@everymatrix/lottery-oddsbom-entrance 0.0.5 → 0.0.6

package/dist/esm/{lottery-oddsbom-bomb_2.entry.js → helper-date-navigator_8.entry.js}

@@ -1,7 +1,356 @@
-import { h, r as registerInstance, c as createEvent, g as getAssetPath } from './index-275ec96c.js';
-import { s as setClientStyling, a as setClientStylingURL, b as setStreamStyling } from './lottery-oddsbom-entrance-89457e53.js';
-export { L as lottery_oddsbom_entrance } from './lottery-oddsbom-entrance-89457e53.js';
-import '@everymatrix/lottery-oddsbom-latest-result-group';
+import { r as registerInstance, c as createEvent, h, g as getAssetPath, H as Host } from './index-068e610e.js';
+import { s as setClientStyling, a as setClientStylingURL, b as setStreamStyling } from './lottery-oddsbom-entrance-93563752.js';
+export { L as lottery_oddsbom_entrance } from './lottery-oddsbom-entrance-93563752.js';
+
+// This icon file is generated automatically.
+var CalendarOutlined = { "icon": { "tag": "svg", "attrs": { "viewBox": "64 64 896 896", "focusable": "false" }, "children": [{ "tag": "path", "attrs": { "d": "M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z" } }] }, "name": "calendar", "theme": "outlined" };
+const CalendarOutlined$1 = CalendarOutlined;
+
+// 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 LeftOutlined = { "icon": { "tag": "svg", "attrs": { "viewBox": "64 64 896 896", "focusable": "false" }, "children": [{ "tag": "path", "attrs": { "d": "M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 000 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z" } }] }, "name": "left", "theme": "outlined" };
+const LeftOutlined$1 = LeftOutlined;
+
+// This icon file is generated automatically.
+var RightOutlined = { "icon": { "tag": "svg", "attrs": { "viewBox": "64 64 896 896", "focusable": "false" }, "children": [{ "tag": "path", "attrs": { "d": "M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z" } }] }, "name": "right", "theme": "outlined" };
+const RightOutlined$1 = RightOutlined;
+
+var __assign = (undefined && undefined.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var defaultColors = {
+    primaryColor: '#333',
+    secondaryColor: '#E6E6E6'
+};
+function renderIconDefinitionToSVGElement(icond, options) {
+    if (options === void 0) { options = {}; }
+    if (typeof icond.icon === 'function') {
+        // two-tone
+        var placeholders = options.placeholders || defaultColors;
+        return renderAbstractNodeToSVGElement(icond.icon(placeholders.primaryColor, placeholders.secondaryColor), options);
+    }
+    // fill, outline
+    return renderAbstractNodeToSVGElement(icond.icon, options);
+}
+function renderAbstractNodeToSVGElement(node, options) {
+    var targetAttrs = node.tag === 'svg'
+        ? __assign(__assign({}, node.attrs), (options.extraSVGAttrs || {})) : node.attrs;
+    var attrs = Object.keys(targetAttrs).reduce(function (acc, nextKey) {
+        var key = nextKey;
+        var value = targetAttrs[key];
+        var token = "".concat(key, "=\"").concat(value, "\"");
+        acc.push(token);
+        return acc;
+    }, []);
+    var attrsToken = attrs.length ? ' ' + attrs.join(' ') : '';
+    var children = (node.children || [])
+        .map(function (child) { return renderAbstractNodeToSVGElement(child, options); })
+        .join('');
+    if (children && children.length) {
+        return "<".concat(node.tag).concat(attrsToken, ">").concat(children, "</").concat(node.tag, ">");
+    }
+    return "<".concat(node.tag).concat(attrsToken, " />");
+}
+
+const DEFAULT_LANGUAGE$3 = 'en';
+const SUPPORTED_LANGUAGES$3 = ['ro', 'en', 'fr', 'ar', 'hr'];
+const TRANSLATIONS$3 = {
+    en: {
+        weeks: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
+    },
+};
+const translate$3 = (key, customLang, replacements) => {
+    const lang = customLang;
+    let translation = TRANSLATIONS$3[lang !== undefined && SUPPORTED_LANGUAGES$3.includes(lang) ? lang : DEFAULT_LANGUAGE$3][key];
+    if (replacements) {
+        Object.keys(replacements).forEach((placeholder) => {
+            translation = translation.replace(`{${placeholder}}`, replacements[placeholder]);
+        });
+    }
+    return translation;
+};
+const getTranslations$2 = (data) => {
+    Object.keys(data).forEach((item) => {
+        for (let key in data[item]) {
+            TRANSLATIONS$3[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$2(translations);
+        }
+        catch (error) {
+            console.error('Failed to fetch or parse translations from URL:', error);
+        }
+    }
+};
+
+const helperDateNavigatorCss = ".lottery-tipping-calendar{position:relative;display:inline-block}.calendar-visible{opacity:1;visibility:visible}.calendar-leave{opacity:0;visibility:hidden}.calendar{position:absolute;top:40px;left:-50%;background:var(--emw--color-background, #fff);color:var(--emw--color-typography-secondary, #6f6f6f);padding:16px;width:fit-content;border:var(--emw--button-border, 1px solid rgba(221, 221, 221, 0.8666666667));border-radius:var(--emw--border-radius-small, 4px);box-shadow:2px 3px 5px rgba(0, 0, 0, 0.1);cursor:pointer;transition:opacity 0.2s ease, visibility 0.2s ease;z-index:99}.calendar-header{display:flex;align-items:center}.calendar-header .date-picker{display:flex;margin:0 18px;align-items:center}.calendar-header .date-picker-delimiter{font-size:16px;margin:auto 4px}.calendar-header .month-plus,.calendar-header .month-minus,.calendar-header .year-plus,.calendar-header .year-minus{cursor:pointer;font-size:14px}.calendar-header .month-plus:hover,.calendar-header .month-minus:hover,.calendar-header .year-plus:hover,.calendar-header .year-minus:hover{color:var(--emw-pool-game-acition-active, #005fdb);transition:color 0.2s}.calendar-header .year-minus,.calendar-header .month-plus{margin-right:6px}.calendar-content{padding:3px;width:fit-content}.calendar-content .day-item{text-align:center;line-height:40px;cursor:not-allowed;position:relative;pointer-events:none}.calendar-content .day-item:hover{background-color:var(--emw--color-background-secondary, #f5f5f5)}.calendar-content .day-item.isCurDay{border-radius:4px;background:var(--emw--color-secondary, #fff3b9);background-size:50%;color:var(--emw--color-typography-secondary, #6f6f6f);font-weight:600;box-shadow:2px 2px 2px var(--emw-calender-curday-box-shadow, rgba(0, 0, 0, 0.09));cursor:pointer;pointer-events:all}.calendar-content .day-item.isHighLight{cursor:pointer;pointer-events:all}.calendar-content .day-item.isHighLight::after{content:\"\";position:absolute;left:calc(50% - 4px);bottom:0;width:6px;height:6px;border-radius:50%;background-color:var(--emw--color-error, red)}.calendar-content-week{display:grid;grid-template-columns:repeat(7, 40px);grid-template-rows:repeat(1, 36px);justify-items:center;align-items:center;border-bottom:var(--emw--button-border, 1px solid rgba(221, 221, 221, 0.8666666667));color:var(--emw--color-typography-secondary, #6f6f6f)}.calendar-content-day{margin-top:4px;display:grid;grid-template-rows:repeat(6, 40px);grid-template-columns:repeat(7, 40px)}.calling-input{height:36px;width:160px;display:flex;align-items:center;justify-content:space-between;padding:0px 4px;background-color:var(--emw--color-background, #f5f5f5);border-radius:var(--emw--border-radius-small, 4px);border:var(--emw--button-border, 1px solid rgba(221, 221, 221, 0.8666666667));cursor:pointer}.calling-input .input{color:var(--emw--color-typography, #000)}.calling-input-text{color:var(--emw--color-typography, #000)}.date-selection{display:flex;align-items:center;justify-content:center;gap:24px}.date-selection-leftIcon,.date-selection-rightIcon{cursor:pointer;color:var(--emw--color-typography, #000)}";
+const HelperDateNavigatorStyle0 = helperDateNavigatorCss;
+
+const leftArrowIcon = renderIconDefinitionToSVGElement(LeftOutlined$1, {
+    extraSVGAttrs: { width: '16px', height: '16px', fill: 'currentColor' }
+});
+const rightArrowIcon = renderIconDefinitionToSVGElement(RightOutlined$1, {
+    extraSVGAttrs: { width: '16px', height: '16px', fill: 'currentColor' }
+});
+const calendarIcon = renderIconDefinitionToSVGElement(CalendarOutlined$1, {
+    extraSVGAttrs: { width: '18px', height: '18px', fill: 'var(--emw--color-primary-variant, #1367e7)' }
+});
+const HelperDateNavigator = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.changeDate = createEvent(this, "changeDate", 7);
+        this.handleNext = createEvent(this, "next", 7);
+        this.handlePrev = createEvent(this, "prev", 7);
+        this.handleOutsideClick = (event) => {
+            if (!this.showCalendar)
+                return;
+            const path = event.composedPath ? event.composedPath() : [];
+            // check if clicked on calendar
+            const isCalendarClick = path.includes(this.calendarRef);
+            // check if click select option
+            const isSelectOption = path.some((el) => {
+                var _a, _b;
+                return el instanceof HTMLElement &&
+                    (((_a = el.getAttribute('part')) === null || _a === void 0 ? void 0 : _a.includes('item')) || ((_b = el.getAttribute('part')) === null || _b === void 0 ? void 0 : _b.includes('overlay')));
+            });
+            if (!isCalendarClick && !isSelectOption) {
+                this.showCalendar = false;
+            }
+        };
+        this.onYearMinus = () => {
+            const years = this.yearOptions.map((item) => Number(item.value));
+            if (this.alterDate.year - 1 < Math.min(...years))
+                return;
+            this.alterDate.year--;
+            this.loadRecords();
+        };
+        this.onYearPlus = () => {
+            const years = this.yearOptions.map((item) => Number(item.value));
+            if (this.alterDate.year + 1 > Math.max(...years))
+                return;
+            this.alterDate.year++;
+            this.loadRecords();
+        };
+        this.onMonthMinus = () => {
+            if (this.alterDate.month === 0) {
+                this.onYearMinus();
+                this.alterDate.month = 11;
+            }
+            else {
+                this.alterDate.month--;
+                this.loadRecords();
+            }
+        };
+        this.onMonthPlus = () => {
+            if (this.alterDate.month === 11) {
+                this.onYearPlus();
+                this.alterDate.month = 0;
+            }
+            else {
+                this.alterDate.month++;
+                this.loadRecords();
+            }
+        };
+        this.onYearChange = (e) => {
+            this.alterDate.year = parseInt(e.detail.value);
+            this.loadRecords();
+        };
+        this.onMonthChange = (e) => {
+            this.alterDate.month = parseInt(e.detail.value) - 1;
+            this.loadRecords();
+        };
+        this.mbSource = undefined;
+        this.clientStyling = undefined;
+        this.clientStylingUrl = undefined;
+        this.translationUrl = '';
+        this.language = 'en';
+        this.date = '';
+        this.defaultHighlightDates = undefined;
+        this.highlightDates = [];
+        this.weeks = undefined;
+        this.days = [];
+        this.alterDate = { year: 0, month: 0, day: 0 };
+        this.curDate = { year: 0, month: 0, day: 0 };
+        this.recordInfo = [];
+        this.showCalendar = false;
+    }
+    handleClientStylingChange(newValue, oldValue) {
+        if (newValue != oldValue) {
+            setClientStyling(this.stylingContainer, this.clientStyling);
+        }
+    }
+    handleClientStylingUrlChange(newValue, oldValue) {
+        if (newValue != oldValue) {
+            setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
+        }
+    }
+    handleMbSourceChange(newValue, oldValue) {
+        if (newValue != oldValue) {
+            setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`);
+        }
+    }
+    handleGameIdStringChange(newValue, oldValue) {
+        if (newValue != oldValue) {
+            this.setHighlightDates();
+        }
+    }
+    componentWillLoad() {
+        resolveTranslationUrl$2(this.translationUrl);
+        this.weeks = translate$3('weeks', this.language);
+        const d = this.date ? new Date(this.date) : new Date();
+        this.alterDate = { year: d.getFullYear(), month: d.getMonth(), day: d.getDate() };
+        this.curDate = Object.assign({}, this.alterDate);
+        this.loadRecords();
+    }
+    handleDateChange() {
+        const d = this.date ? new Date(this.date) : new Date();
+        this.alterDate = { year: d.getFullYear(), month: d.getMonth(), day: d.getDate() };
+        this.curDate = Object.assign({}, this.alterDate);
+        this.loadRecords();
+    }
+    setHighlightDates() {
+        if (this.defaultHighlightDates) {
+            try {
+                this.highlightDates = JSON.parse(this.defaultHighlightDates);
+            }
+            catch (_a) {
+                this.highlightDates = [];
+            }
+        }
+    }
+    componentDidLoad() {
+        if (this.stylingContainer) {
+            if (this.mbSource)
+                setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`);
+            if (this.clientStyling)
+                setClientStyling(this.stylingContainer, this.clientStyling);
+            if (this.clientStylingUrl)
+                setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
+        }
+        this.setHighlightDates();
+        document.addEventListener('click', this.handleOutsideClick);
+    }
+    disconnectedCallback() {
+        this.stylingSubscription && this.stylingSubscription.unsubscribe();
+        document.removeEventListener('click', this.handleOutsideClick);
+    }
+    get yearOptions() {
+        const years = Array.from({ length: 101 }, (_, i) => this.alterDate.year - 50 + i);
+        return years.map((item) => {
+            return {
+                label: String(item),
+                value: String(item)
+            };
+        });
+    }
+    get monthOptions() {
+        const months = Array.from({ length: 12 }, (_, i) => i + 1);
+        return months.map((item) => {
+            return {
+                label: String(item),
+                value: String(item)
+            };
+        });
+    }
+    loadRecords() {
+        const { year, month } = this.alterDate;
+        this.setDays(year, month);
+    }
+    setDays(year, month) {
+        this.days = [];
+        const firstDayOfMonth = new Date(year, month, 1);
+        const firstDayWeek = firstDayOfMonth.getDay();
+        const startDate = new Date(year, month, 1 - firstDayWeek);
+        for (let i = 0; i < 42; i++) {
+            const temp = new Date(startDate);
+            temp.setDate(startDate.getDate() + i);
+            const day = {
+                date: temp.getDate(),
+                month: temp.getMonth(),
+                year: temp.getFullYear()
+            };
+            this.days.push(day);
+        }
+    }
+    getFullDayOfMonth(year, month) {
+        return new Date(year, month, 0).getDate();
+    }
+    showFormatedDate(date) {
+        return `${date.day}/${date.month + 1}/${date.year}`;
+    }
+    handleSelectDate(curDay, curMonth, curYear) {
+        this.alterDate.day = curDay;
+        this.curDate = Object.assign({}, this.alterDate);
+        this.showCalendar = false;
+        const formattedHighLightArr = this.highlightDates.map((date) => {
+            const d = new Date(date);
+            return { year: d.getFullYear(), month: d.getMonth(), day: d.getDate() };
+        });
+        const idx = formattedHighLightArr.findIndex((obj) => {
+            const { year, month, day } = obj;
+            return curMonth === month && curYear === year && curDay === day;
+        });
+        if (idx > -1) {
+            this.changeDate.emit(idx);
+        }
+    }
+    tellIsCurDay(curDay, curMonth, curYear) {
+        return this.curDate.day === curDay && this.curDate.month === curMonth && this.curDate.year === curYear;
+    }
+    tellIsHighLight(curDay, curMonth, curYear) {
+        if (!this.highlightDates || !this.highlightDates.length)
+            return false;
+        const formattedHighLightArr = this.highlightDates.map((date) => {
+            const d = new Date(date);
+            return { year: d.getFullYear(), month: d.getMonth(), day: d.getDate() };
+        });
+        return formattedHighLightArr.some((obj) => {
+            const { year, month, day } = obj;
+            return curMonth === month && curYear === year && curDay === day;
+        });
+    }
+    renderInner() {
+        const calendarClass = ['calendar', this.showCalendar ? 'calendar-visible' : 'calendar-leave'];
+        return (h("div", { class: "lottery-tipping-calendar", ref: (el) => (this.calendarRef = el) }, h("div", { class: "calling-input", onClick: () => {
+                this.showCalendar = true;
+            } }, h("div", { class: "calling-input-text" }, this.showFormatedDate(this.curDate)), h("div", { class: "calling-input-icon", innerHTML: calendarIcon })), h("div", { class: calendarClass.join(' ') }, h("div", { class: "calendar-header" }, h("div", { class: "date-controller year-minus", onClick: this.onYearMinus }, "<"), h("div", { class: "date-controller month-minus", onClick: this.onMonthMinus }, "<"), h("div", { class: "date-picker" }, h("div", { class: "date-picker-year" }, h("vaadin-select", { items: this.yearOptions, value: this.alterDate.year, style: { '--vaadin-field-default-width': '90px' }, "on-value-changed": this.onYearChange.bind(this) })), h("div", { class: "date-picker-delimiter" }, "-"), h("div", { class: "date-picker-month" }, h("vaadin-select", { items: this.monthOptions, value: this.alterDate.month + 1, style: { '--vaadin-field-default-width': '64px' }, "on-value-changed": this.onMonthChange.bind(this) })), h("div", { class: "date-picker-delimiter" }, "-"), h("div", { class: "date-picker-day" }, this.alterDate.day)), h("div", { class: "date-controller month-plus", onClick: this.onMonthPlus }, ">"), h("div", { class: "date-controller year-plus", onClick: this.onYearPlus }, ">")), h("div", { class: "calendar-content" }, h("div", { class: "calendar-content-week" }, this.weeks.map((week) => (h("div", { class: "week-item" }, week)))), h("div", { class: "calendar-content-day" }, this.days.map((item) => (h("div", { class: {
+                'day-item': true,
+                isCurDay: this.tellIsCurDay(item.date, item.month, item.year),
+                isHighLight: this.tellIsHighLight(item.date, item.month, item.year)
+            }, onClick: () => this.handleSelectDate(item.date, item.month, item.year) }, item.date))))))));
+    }
+    render() {
+        return (h("div", { key: 'da34c4c86cac49411fb15ab8bceda89e379befc6', class: "date-selection" }, h("div", { key: '29f06ef7a5df466018ae6561b54fcbdfbab9f23b', class: "date-selection-leftIcon", innerHTML: leftArrowIcon, onClick: () => this.handlePrev.emit() }), h("div", { key: 'c6d75d873c2683752c37d4083c57761c4f7e523b', class: "date-selection-calendar" }, this.renderInner()), h("div", { key: '8b16b3e0761dd4c877f169aea84d028aaf193b69', class: "date-selection-rightIcon", innerHTML: rightArrowIcon, onClick: () => this.handleNext.emit() })));
+    }
+    static get watchers() { return {
+        "clientStyling": ["handleClientStylingChange"],
+        "clientStylingUrl": ["handleClientStylingUrlChange"],
+        "mbSource": ["handleMbSourceChange"],
+        "defaultHighlightDates": ["handleGameIdStringChange"],
+        "date": ["handleDateChange"]
+    }; }
+};
+HelperDateNavigator.style = HelperDateNavigatorStyle0;
 
 var Bomb;
 (function (Bomb) {
@@ -334,6 +683,33 @@ function isValid(dirtyDate) {
   return !isNaN(Number(date));
 }
 
+/**
+ * @name differenceInMilliseconds
+ * @category Millisecond Helpers
+ * @summary Get the number of milliseconds between the given dates.
+ *
+ * @description
+ * Get the number of milliseconds between the given dates.
+ *
+ * @param {Date|Number} dateLeft - the later date
+ * @param {Date|Number} dateRight - the earlier date
+ * @returns {Number} the number of milliseconds
+ * @throws {TypeError} 2 arguments required
+ *
+ * @example
+ * // How many milliseconds are between
+ * // 2 July 2014 12:30:20.600 and 2 July 2014 12:30:21.700?
+ * const result = differenceInMilliseconds(
+ *   new Date(2014, 6, 2, 12, 30, 21, 700),
+ *   new Date(2014, 6, 2, 12, 30, 20, 600)
+ * )
+ * //=> 1100
+ */
+function differenceInMilliseconds(dateLeft, dateRight) {
+  requiredArgs(2, arguments);
+  return toDate(dateLeft).getTime() - toDate(dateRight).getTime();
+}
+
 /**
  * @name subMilliseconds
  * @category Millisecond Helpers
@@ -2606,7 +2982,7 @@ function validateTimezone(_hours, minutes) {
   return minutes >= 0 && minutes <= 59;
 }
 
-function fetchRequest(url, method = 'GET', body = null, headers = {}) {
+function fetchRequest$3(url, method = 'GET', body = null, headers = {}) {
     return new Promise((resolve, reject) => {
         const headersOrigin = Object.assign({ 'Content-Type': 'application/json' }, headers);
         const options = {
@@ -2662,7 +3038,7 @@ function formattedTime(date) {
     const weekday = format(parsedDate, 'EEEE');
     return `${weekday} at ${hhmm}`;
 }
-function toQueryParams(params) {
+function toQueryParams$2(params) {
     const finalParams = {};
     Object.entries(params).forEach(([key, value]) => {
         if (!isEmptyValue(value, true)) {
@@ -2730,7 +3106,7 @@ function isEmptyValueOfObject(obj) {
     return false;
 }
 const DEFAULT_ALL_BOMB = { name: 'All', code: 'All' };
-function thousandSeparator(value) {
+function thousandSeparator$1(value) {
     if (value === 0) {
         return '0';
     }
@@ -2745,7 +3121,7 @@ function thousandSeparator(value) {
 
 async function fetchLiveDrawsByGroupId({ endpoint, groupId, params = {} }) {
     try {
-        const res = await fetchRequest(`${endpoint}/groups/${groupId}/liveDraws${toQueryParams(params)}`);
+        const res = await fetchRequest$3(`${endpoint}/groups/${groupId}/liveDraws${toQueryParams$2(params)}`);
         return res;
     }
     catch (error) {
@@ -2753,16 +3129,16 @@ async function fetchLiveDrawsByGroupId({ endpoint, groupId, params = {} }) {
         return {};
     }
 }
-async function fetchSaleStatistics({ endpoint, gameId, drawId }) {
+async function fetchSaleStatistics$1({ endpoint, gameId, drawId }) {
     try {
-        const res = await fetchRequest(`${endpoint}/games/${gameId}/draws/${drawId}/saleStatistics`);
+        const res = await fetchRequest$3(`${endpoint}/games/${gameId}/draws/${drawId}/saleStatistics`);
         return res;
     }
     catch (error) {
         return Promise.reject(error);
     }
 }
-async function fetchData({ endpoint, groupId, params }) {
+async function fetchData$1({ endpoint, groupId, params }) {
     try {
         const { sportTags = [], liveDraws = [] } = await fetchLiveDrawsByGroupId({
             endpoint,
@@ -2794,7 +3170,7 @@ async function getTurnoverForAll({ endpoint, configs }) {
     const fallback = { turnover: formattedTurnover(null) };
     const promises = configs.map(async ({ gameId, drawId }) => {
         var _a;
-        const res = await fetchSaleStatistics({
+        const res = await fetchSaleStatistics$1({
             endpoint: endpoint,
             gameId,
             drawId
@@ -2808,12 +3184,12 @@ function formattedTurnover(turnover) {
     if (turnover === null)
         return '';
     const unit = '€';
-    return `${unit}${turnover ? thousandSeparator(turnover) : 0}`;
+    return `${unit}${turnover ? thousandSeparator$1(turnover) : 0}`;
 }
 
-const DEFAULT_LANGUAGE = 'en';
-const SUPPORTED_LANGUAGES = ['ro', 'en', 'fr', 'ar', 'hr'];
-const TRANSLATIONS = {
+const DEFAULT_LANGUAGE$2 = 'en';
+const SUPPORTED_LANGUAGES$2 = ['ro', 'en', 'fr', 'ar', 'hr'];
+const TRANSLATIONS$2 = {
     en: {
         logout: 'Log out',
         draws: 'DRAWS',
@@ -2866,15 +3242,15 @@ const TRANSLATIONS = {
         instructionContent: 'Sadržaj uputa ide ovdje.'
     }
 };
-const translate = (key, customLang) => {
+const translate$2 = (key, customLang) => {
     const lang = customLang;
-    return TRANSLATIONS[lang !== undefined && SUPPORTED_LANGUAGES.includes(lang) ? lang : DEFAULT_LANGUAGE][key];
+    return TRANSLATIONS$2[lang !== undefined && SUPPORTED_LANGUAGES$2.includes(lang) ? lang : DEFAULT_LANGUAGE$2][key];
 };
 
 const lotteryOddsbomBombCss = "/* --- Component: Bomb Card Grid --- */\n.lottery-oddsbom-bomb-wrapper {\n  background: var(--emw--color-background, #fff);\n  color: var(--emw--color-typography, #000);\n  height: 100%;\n}\n\n.bomb-grid-container {\n  width: 100%;\n  display: flex;\n  justify-content: center;\n  container-type: inline-size;\n  container-name: bomb-grid;\n  background: var(--emw--color-background, #fff);\n  color: var(--emw--color-typography, #000);\n  /* --- Component: Bomb Card --- */\n}\n.bomb-grid-container .bomb-grid {\n  display: grid;\n  grid-template-columns: repeat(2, minmax(0, 1fr));\n  gap: 0.75rem;\n  place-items: center;\n}\n.bomb-grid-container .bomb-card-wrapper {\n  width: 100%;\n  max-width: 30rem;\n  height: 100%;\n  box-sizing: border-box;\n  border-radius: 8px;\n  padding: 1rem;\n  border: 1px solid var(--emw--color-gray-100, #e6e6e6);\n}\n.bomb-grid-container .bomb-card {\n  height: 100%;\n  min-width: 24rem;\n  transition: transform 0.3s;\n}\n.bomb-grid-container .bomb-card:hover {\n  transform: scale(1.02);\n  cursor: pointer;\n}\n.bomb-grid-container .card-header {\n  display: flex;\n  align-items: center;\n  gap: 1rem;\n  margin-bottom: 0.8rem;\n}\n.bomb-grid-container .card-icon {\n  width: 48px;\n  height: 48px;\n  border-radius: 50%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.bomb-grid-container .card-icon svg {\n  width: 28px;\n  height: 28px;\n}\n.bomb-grid-container .card-title {\n  flex-grow: 1;\n  word-break: break-all;\n}\n.bomb-grid-container .card-title h2 {\n  margin: 0;\n  font-size: 1.25rem;\n  font-weight: 700;\n  word-wrap: break-word;\n}\n.bomb-grid-container .card-title p {\n  margin: 0;\n  color: var(--emw--color-typography-secondary, #333);\n  font-size: 0.9rem;\n  word-wrap: break-word;\n}\n.bomb-grid-container .card-info {\n  display: flex;\n  gap: 0.75rem;\n  margin-bottom: 0.8rem;\n  flex-wrap: wrap;\n}\n.bomb-grid-container .card-tag {\n  background-color: var(--emw--color-tertiary, #e3f2fd);\n  padding: 0.3rem 0.75rem;\n  border-radius: 4px;\n  font-size: 0.85rem;\n  font-weight: 500;\n  max-width: 120px;\n}\n.bomb-grid-container .card-matches {\n  max-height: 6.8rem;\n  overflow-y: auto;\n}\n.bomb-grid-container .card-matches ol {\n  margin: 0;\n  padding-left: 1.25rem;\n  font-size: 0.85rem;\n  line-height: 1.6;\n}\n.bomb-grid-container .card-matches li {\n  padding-left: 0.2rem;\n  word-wrap: break-word;\n}\n\n/* --- CONTAINER QUERIES FOR RESPONSIVENESS --- */\n@container bomb-grid (max-width: 768px) {\n  .bomb-grid-container .bomb-grid {\n    /* On smaller containers, switch to a single column */\n    grid-template-columns: 1fr;\n  }\n  .bomb-card-wrapper .bomb-card {\n    min-width: 200px;\n  }\n}\n/* --- Component: Filter Controls --- */\n.OddsbomEntranceController__section {\n  margin: 1.5rem 0;\n  display: flex;\n  gap: 12px;\n  color: var(--emw--color-typography, #000);\n  container-type: inline-size;\n  container-name: controller;\n  justify-content: center;\n}\n.OddsbomEntranceController__label {\n  font-weight: 500;\n  white-space: nowrap;\n  width: 6rem;\n  line-height: 2.2rem;\n}\n.OddsbomEntranceController__segmented-control {\n  display: inline-flex;\n  gap: 1rem;\n  flex-wrap: wrap;\n}\n.OddsbomEntranceController__segment {\n  height: 2.2rem;\n  border: none;\n  padding: 0.3rem 0.8rem;\n  cursor: pointer;\n  font-weight: 500;\n  border-radius: 2rem;\n  outline: none;\n  white-space: nowrap;\n  background-color: var(--emw--color-background, #ffffff);\n  color: var(--emw--color-typography, #000);\n}\n.OddsbomEntranceController__segment--active {\n  background-color: var(--emw--color-primary-variant, #1367e7);\n  color: var(--emw--color-typography-reverse, #fff);\n  font-weight: 600;\n}\n.OddsbomEntranceController__segment--disabled:hover {\n  cursor: not-allowed !important;\n}\n.OddsbomEntranceController__segment:not(.OddsbomEntranceController__segment--active):hover {\n  background-color: var(--emw--color-background-tertiary, #ccc);\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@container controller (max-width: 500px) {\n  .OddsbomEntranceController__segmented-control {\n    gap: 0rem;\n  }\n  .OddsbomEntranceController__segment {\n    padding: 0.2rem 0.6rem;\n  }\n  .OddsbomEntranceController__label,\n  .OddsbomEntranceController____segment {\n    line-height: 1.8rem;\n  }\n}\n.loading-wrap {\n  margin: 20px 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  min-height: 100px;\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.empty-draw-wrap {\n  padding-top: 100px;\n}\n.empty-draw-wrap .empty-draw {\n  width: 240px;\n  height: 160px;\n  padding: 18px 12px 12px 12px;\n  background: var(--emw--color-secondary-variant, #e3f2fd);\n  position: relative;\n  margin: 0 auto;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  text-align: center;\n  border-radius: 12px;\n}\n.empty-draw-wrap .empty-draw img {\n  position: absolute;\n  top: -64%;\n  left: 50%;\n  transform: translateX(-50%);\n  width: 200px;\n}\n.empty-draw-wrap .empty-draw-content {\n  display: flex;\n  gap: 4px;\n}\n.empty-draw-wrap .empty-draw-text {\n  font-size: 14px;\n  font-weight: bold;\n  line-height: 20px;\n}";
 const LotteryOddsbomBombStyle0 = lotteryOddsbomBombCss;
 
-const BombIcons = {
+const BombIcons$1 = {
     [Bomb.Football]: (h("svg", { height: "18px", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", class: "text-sm" }, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M19.063 19.072l-.81-.97-.117.083.385-2.43.136-.211 2.23-3.464.037-.057h1.075a9.964 9.964 0 01-2.936 7.049zM4.769 5.112l2.8.877-.072 3.246-2.427 2.95-1.561-.153L2.39 9.26a9.977 9.977 0 012.378-4.148zm7.745-3.086l-.72 1.645-3.798 1.404-2.395-.75A9.953 9.953 0 0112 2c.174 0 .343.017.514.026zm7.346 3.812l-1.128 1.29-3.402-.755-.033-.008-2.446-2.241.057.016.862-1.973a9.996 9.996 0 016.09 3.67zm-1.87 8.894l-3.385-.493-1.358-4.067 2.173-2.755 3.144.698 1.347 3.634-1.921 2.983zm-4.64 5.787l4.304-1.486.62.742a9.945 9.945 0 01-5.878 2.205l.954-1.461zm-6.314-2.84l3.91.873-.001.003 1.509 1.507-1.24 1.898a9.946 9.946 0 01-5.908-2.553l1.73-1.728zm1.16-7.72l4.168.725 1.302 3.9-2.552 2.98-3.97-.885-1.412-3.724L8.196 9.96zM2 12c0-.31.019-.615.047-.92l.485 1.203-.454.907A9.934 9.934 0 012 11.999zM12 1C5.934 1 1 5.935 1 12c0 6.067 4.935 11 11 11 6.066 0 11-4.933 11-11 0-6.065-4.934-11-11-11z", fill: "currentColor" })))
 };
 const LotteryOddsbomBomb = class {
@@ -2928,7 +3304,7 @@ const LotteryOddsbomBomb = class {
     async doFetchData(params = {}) {
         try {
             this.isLoading = true;
-            this.liveDrawsInfoByGroupId = await fetchData({
+            this.liveDrawsInfoByGroupId = await fetchData$1({
                 endpoint: this.endpoint,
                 groupId: this.groupId,
                 params
@@ -2979,7 +3355,7 @@ const LotteryOddsbomBomb = class {
             return this.renderEmpty();
         return (h("div", { class: "bomb-grid" }, this.gameList.map(({ title, subTitle, icon, date, turnover, matchList, drawId, gameId }) => (h("div", { class: "bomb-card-wrapper" }, h("div", { class: "bomb-card", onClick: () => {
                 this.handleBombItemClick.emit({ drawId, gameId });
-            } }, h("div", { class: "card-header" }, BombIcons[icon] && h("div", { class: "card-icon football" }, BombIcons[icon]), h("div", { class: "card-title" }, h("h2", null, title), h("p", null, subTitle)), h("div", { class: "card-jackpot" })), h("div", { class: "card-info" }, h("span", { class: "card-tag" }, date), h("span", { class: "card-tag" }, translate('turnover', this.language) + turnover)), h("div", { class: "card-matches" }, h("ol", null, matchList.map((item) => (h("li", null, item)))))))))));
+            } }, h("div", { class: "card-header" }, BombIcons$1[icon] && h("div", { class: "card-icon football" }, BombIcons$1[icon]), h("div", { class: "card-title" }, h("h2", null, title), h("p", null, subTitle)), h("div", { class: "card-jackpot" })), h("div", { class: "card-info" }, h("span", { class: "card-tag" }, date), h("span", { class: "card-tag" }, translate$2('turnover', this.language) + turnover)), h("div", { class: "card-matches" }, h("ol", null, matchList.map((item) => (h("li", null, item)))))))))));
     }
     render() {
         return (h("div", { key: 'ae8252d8cb1374af9bb8189bcd9edac313c7bc6a', ref: (el) => (this.stylingContainer = el), class: "lottery-oddsbom-bomb-wrapper" }, this.renderFilter(), h("div", { key: '3f673f335248057370e7e57076cc387a86dc4099', class: "bomb-grid-container" }, this.isLoading ? this.renderLoading() : this.renderMain())));
@@ -2993,4 +3369,1469 @@ const LotteryOddsbomBomb = class {
 };
 LotteryOddsbomBomb.style = LotteryOddsbomBombStyle0;
 
-export { LotteryOddsbomBomb as lottery_oddsbom_bomb };
+const lotteryOddsbomBulletCss = ".OddsbomBullet .OddsbomBulletBtn__normal{width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:var(--emw--color-background, #fff);border:2px solid var(--emw--color-primary, #0d196e);border-radius:var(--emw--border-radius-medium, 8px);color:var(--emw--color-typography, #000);font-weight:bold;cursor:pointer;transition:transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.2s ease, background-color 0.3s;user-select:none;position:relative}.OddsbomBullet .OddsbomBulletBtn__normal:hover{transform:scale(1.15) rotate(-5deg);box-shadow:var(--emw--button-box-shadow-color-secondary, rgba(0, 0, 0, 0.15)) 7px 6px 6px}.OddsbomBullet .OddsbomBulletBtn__normal .OddsbomBullet--deleteIcon{display:none}.OddsbomBullet .OddsbomBulletBtn__normal.isDeleteByIcon:hover{background-color:var(--emw--color-background, #fff)}.OddsbomBullet .OddsbomBulletBtn__normal.isDeleteByIcon:hover .OddsbomBullet--text{display:none}.OddsbomBullet .OddsbomBulletBtn__normal.isDeleteByIcon:hover .OddsbomBullet--deleteIcon{display:inline;fill:var(--emw--color-typography, #000)}.OddsbomBullet .OddsbomBulletBtn__normal.isCallDialogBtn:hover{transform:none;box-shadow:none}.OddsbomBullet .OddsbomBulletBtn__normal.OddsbomBulletBtn__selected{background-color:var(--emw--color-primary, #0d196e);color:var(--emw--color-typography-inverse, #fff);transform:scale(1.05);box-shadow:0 5px 10px var(--emw--button-box-shadow-color-secondary, rgba(0, 0, 0, 0.15))}.OddsbomBullet .OddsbomBulletBtn__normal.OddsbomBulletBtn__disabled{background-color:var(--emw--color-gray-50, #f5f5f5);border-color:var(--emw--color-gray-100, #e6e6e6);color:var(--emw--color-gray-150, #6f6f6f);cursor:not-allowed;transform:none;box-shadow:none}.OddsbomBullet .OddsbomBulletBtn__normal.OddsbomBulletBtn__disabled:hover{transform:none;box-shadow:none}";
+const LotteryOddsbomBulletStyle0 = lotteryOddsbomBulletCss;
+
+const DeleteFilledIcon = renderIconDefinitionToSVGElement(DeleteFilled$1, {
+    extraSVGAttrs: { width: '18px', height: '18px', fill: '' }
+});
+const LotteryOddsbomBullet = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.oddsbomBulletToggleEvent = createEvent(this, "oddsbomBulletToggle", 7);
+        this.oddsbomBulletDeleteEvent = createEvent(this, "oddsbomBulletDelete", 7);
+        this.oddsbomBulletAddedByMoreBtnDeleteEvent = createEvent(this, "oddsbomBulletAddedByMoreBtnDelete", 7);
+        this.oddsbomBulletCallDialogEvent = createEvent(this, "oddsbomBulletCallDialog", 7);
+        this.isSelected = undefined;
+        this.disabled = undefined;
+        this.text = undefined;
+        this.idx = undefined;
+        this.isReading = undefined;
+        this.isDeleteByIcon = undefined;
+        this.isCallDialogBtn = undefined;
+        this.isAddedByMoreBtn = undefined;
+        this.mbSource = undefined;
+        this.clientStyling = undefined;
+        this.clientStylingUrl = undefined;
+    }
+    handleClientStylingChange(newValue, oldValue) {
+        if (newValue != oldValue) {
+            setClientStyling(this.stylingContainer, this.clientStyling);
+        }
+    }
+    handleClientStylingUrlChange(newValue, oldValue) {
+        if (newValue != oldValue) {
+            setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
+        }
+    }
+    handleMbSourceChange(newValue, oldValue) {
+        if (newValue != oldValue) {
+            setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`);
+        }
+    }
+    componentDidLoad() {
+        if (this.stylingContainer) {
+            if (this.mbSource)
+                setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`);
+            if (this.clientStyling)
+                setClientStyling(this.stylingContainer, this.clientStyling);
+            if (this.clientStylingUrl)
+                setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
+        }
+    }
+    disconnectedCallback() {
+        this.stylingSubscription && this.stylingSubscription.unsubscribe();
+    }
+    handleClick() {
+        if (this.isCallDialogBtn) {
+            this.oddsbomBulletCallDialogEvent.emit();
+            return;
+        }
+        if (this.isDeleteByIcon) {
+            if (this.isAddedByMoreBtn) {
+                this.oddsbomBulletAddedByMoreBtnDeleteEvent.emit(this.text);
+            }
+            else {
+                this.oddsbomBulletDeleteEvent.emit(this.idx);
+            }
+            return;
+        }
+        if (!this.disabled) {
+            this.oddsbomBulletToggleEvent.emit(this.idx);
+        }
+    }
+    render() {
+        return (h("div", { key: 'e21cf46108e35dcbf7d65e8c6a5f12f5d5ae49cb', class: "OddsbomBullet", ref: (el) => (this.stylingContainer = el) }, h("button", { key: '4edf5cd481d8283bd71f6806b6f93949e1308095', class: {
+                OddsbomBulletBtn__normal: true,
+                OddsbomBulletBtn__selected: this.isSelected,
+                OddsbomBulletBtn__disabled: this.disabled,
+                isDeleteByIcon: this.isDeleteByIcon,
+                isCallDialogBtn: this.isCallDialogBtn || this.isReading
+            }, onClick: this.handleClick.bind(this), disabled: this.disabled }, h("span", { key: 'fa1aed0293dc004808e6992c069d6992317b0788', class: "OddsbomBullet--deleteIcon", innerHTML: DeleteFilledIcon }), h("span", { key: '53ed96f2c2b833d21488049f987b6131718d563e', class: "OddsbomBullet--text" }, this.text))));
+    }
+    static get watchers() { return {
+        "clientStyling": ["handleClientStylingChange"],
+        "clientStylingUrl": ["handleClientStylingUrlChange"],
+        "mbSource": ["handleMbSourceChange"]
+    }; }
+};
+LotteryOddsbomBullet.style = LotteryOddsbomBulletStyle0;
+
+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$2(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,
+            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) {
+                reject(`HTTP error! Status: ${response.status}`);
+                throw new Error(`HTTP error! Status: ${response.status}`);
+            }
+            return response.json();
+        })
+            .then((data) => resolve(data))
+            .catch((error) => reject(error));
+    });
+}
+function toQueryParams$1(params) {
+    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 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;
+        }
+    }
+    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}` : '';
+}
+function transformResults(results) {
+    if (results && results.length > 0) {
+        return results.map((i) => i === null || i === void 0 ? void 0 : i[0]);
+    }
+    return [[]];
+}
+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 changeCurDrawItemByDate(date, drawList) {
+    var _a, _b, _c;
+    const curDrawItem = drawList.find((i) => i.date === date);
+    if (!curDrawItem) {
+        //  NO DATA
+        return Promise.reject();
+    }
+    const curDrawSelectionBettingType = curDrawItem.winningNumbers[0].winning_type;
+    const curDrawSelectionMap = {};
+    curDrawItem.winningNumbers.forEach((item) => {
+        curDrawSelectionMap[item.winning_type] = transformResults(item.poolGameOutcomes);
+    });
+    const results = curDrawSelectionMap[curDrawSelectionBettingType];
+    const curPrizeMap = {};
+    curDrawItem.prizes.forEach((prize) => {
+        const winningType = prize.winningType;
+        if (!curPrizeMap[winningType]) {
+            curPrizeMap[winningType] = [prize];
+        }
+        else {
+            curPrizeMap[winningType].push(prize);
+            curPrizeMap[winningType].sort((a, b) => { var _a; return ((_a = b.totalAmount) === null || _a === void 0 ? void 0 : _a.value) - (a === null || a === void 0 ? void 0 : a.totalAmount.value); });
+        }
+    });
+    const prizes = (((_a = Object.values(curPrizeMap)) === null || _a === void 0 ? void 0 : _a[0]) || []);
+    const currency = ((_c = (_b = prizes[0]) === null || _b === void 0 ? void 0 : _b.totalAmount) === null || _c === void 0 ? void 0 : _c.currency) || '';
+    const { turnOver, winNumber, winTurnOver } = prizes.reduce((pre, cur) => {
+        var _a;
+        const { turnOver: _turnOver, winNumber: _winNumber, winTurnOver: _winTurnOver } = pre;
+        // FIXME: no turnover
+        const turnOver = 0;
+        const winNumber = _winNumber + Number(cur === null || cur === void 0 ? void 0 : cur.players);
+        const winTurnOver = _turnOver + Number((_a = cur === null || cur === void 0 ? void 0 : cur.totalAmount) === null || _a === void 0 ? void 0 : _a.value);
+        return {
+            turnOver,
+            winNumber,
+            winTurnOver
+        };
+    }, {
+        turnOver: 0,
+        winNumber: 0,
+        winTurnOver: 0
+    });
+    return Promise.resolve({
+        date,
+        formattedTurnOver: currency + ' ' + thousandSeparator(turnOver),
+        winNumber,
+        formattedWinTurnOver: currency + ' ' + thousandSeparator(winTurnOver),
+        drawId: curDrawItem.id,
+        results
+    });
+}
+function findLatestDateIdx$1(dateArr) {
+    const currentDate = new Date();
+    let closestIndex = 0;
+    let minDiff = Infinity;
+    dateArr.forEach((dateStr, index) => {
+        const date = new Date(dateStr);
+        const diff = Math.abs(differenceInMilliseconds(currentDate, date));
+        if (diff < minDiff) {
+            minDiff = diff;
+            closestIndex = index;
+        }
+    });
+    return closestIndex;
+}
+
+async function fetchGameInfo({ endpoint, gameId }) {
+    if (!(endpoint && gameId))
+        return;
+    const gameInfo = await fetchRequest$2(`${endpoint}/games/${gameId}`, 'GET', {});
+    return {
+        vendorGameId: gameInfo === null || gameInfo === void 0 ? void 0 : gameInfo.type,
+        gameName: gameInfo.name
+    };
+}
+async function fetchDrawsInfo$1({ endpoint, gameId }) {
+    if (!(endpoint && gameId))
+        return;
+    const GAME_DRAW_LIMIT = 9999;
+    const filterData = { status: 'PAYABLE', limit: GAME_DRAW_LIMIT };
+    const { items: drawList } = await fetchRequest$2(`${endpoint}/games/${gameId}/draws${toQueryParams$1(filterData)}`);
+    if (!drawList || drawList.length === 0)
+        return {};
+    const settledDrawList = drawList
+        .filter((item) => item.winningNumbers.length > 0)
+        .sort((a, b) => a === null || a === void 0 ? void 0 : a.date.localeCompare(b === null || b === void 0 ? void 0 : b.date));
+    const drawDatesOptions = settledDrawList.map((item) => item.date);
+    return {
+        drawDatesOptions,
+        drawResultsList: settledDrawList
+    };
+}
+async function fetchSaleStatistics({ endpoint, gameId, drawId }) {
+    try {
+        const res = await fetchRequest$2(`${endpoint}/games/${gameId}/draws/${drawId}/saleStatistics`);
+        return res;
+    }
+    catch (error) {
+        return Promise.reject(error);
+    }
+}
+
+const DEFAULT_LANGUAGE$1 = 'en';
+const SUPPORTED_LANGUAGES$1 = ['ro', 'en', 'fr', 'ar', 'hr'];
+const TRANSLATIONS$1 = {
+    en: {
+        weeks: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
+        bettingType: 'Betting Type:',
+        prizeAllocation: 'Prize Allocation (Turnover: €{turnover})',
+        prizes: 'Prizes',
+        numberOfWinners: 'Number of Winners',
+        prizeMoney: 'Prize Money',
+        noLatestResult: 'No latest result.',
+        loading: 'Loading....',
+        turnover: 'Turnover:',
+        winners: 'winners,',
+        prize: 'Prize:',
+    },
+};
+const translate$1 = (key, customLang, replacements) => {
+    const lang = customLang;
+    let translation = TRANSLATIONS$1[lang !== undefined && SUPPORTED_LANGUAGES$1.includes(lang) ? lang : DEFAULT_LANGUAGE$1][key];
+    if (replacements) {
+        Object.keys(replacements).forEach((placeholder) => {
+            translation = translation.replace(`{${placeholder}}`, replacements[placeholder]);
+        });
+    }
+    return translation;
+};
+const getTranslations$1 = (data) => {
+    Object.keys(data).forEach((item) => {
+        for (let key in data[item]) {
+            TRANSLATIONS$1[item][key] = data[item][key];
+        }
+    });
+};
+const resolveTranslationUrl$1 = 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$1(translations);
+        }
+        catch (error) {
+            console.error('Failed to fetch or parse translations from URL:', error);
+        }
+    }
+};
+
+const lotteryOddsbomLatestResultCss = ".lottery-tipping-latest-result{container-type:inline-size;background:var(--emw--color-background, #fff);color:var(--emw--color-typography, #000)}.lottery-tipping-latest-result .header-section{display:flex;justify-content:center;align-items:center}.lottery-tipping-latest-result .match-info-section{justify-content:space-between;padding:15px 0px;height:18px}.lottery-tipping-latest-result .match-details,.lottery-tipping-latest-result .prize-details{font-weight:600;display:flex;align-items:center}.lottery-tipping-latest-result .match-details .title-icon{margin-right:8px;display:flex}.lottery-tipping-latest-result .match-details .title-text__extra{margin-left:5px}.lottery-tipping-latest-result .prize-details .winners-count{margin-right:5px}.loading-wrap{margin:20px 0;display:flex;align-items:center;justify-content:center;min-height:100px}.loading-wrap .dots-container{display:flex;align-items:center;justify-content:center;height:100%;width:100%}.loading-wrap .dot{height:14px;width:14px;margin-right:14px;border-radius:14px;background-color:var(--emw--color-gray-300, #333);animation:pulse 1.5s infinite ease-in-out}.loading-wrap .dot:last-child{margin-right:0}.loading-wrap .dot:nth-child(1){animation-delay:-0.3s}.loading-wrap .dot:nth-child(2){animation-delay:-0.1s}.loading-wrap .dot:nth-child(3){animation-delay:0.1s}@keyframes pulse{0%{transform:scale(0.8);background-color:var(--emw--color-gray-300, #333)}50%{transform:scale(1.2);background-color:var(--emw--color-gray-100, #e6e6e6)}100%{transform:scale(0.8);background-color:var(--emw--color-gray-150, #6f6f6f)}}.latest-result-wrapper{background:var(--emw--color-background, #fff)}.latest-result-wrapper.game-wrapper{border:1px solid var(--emw--color-background-tertiary, #ccc);border-radius:8px;box-shadow:0 2px 4px var(--emw--color-background-tertiary, #ccc);overflow-x:auto;transition:box-shadow 0.3s ease;padding:20px}.latest-result-wrapper.game-wrapper:hover{box-shadow:0 4px 12px var(--emw--color-background-tertiary, #ccc)}.loading-turnOver{display:inline-flex;align-items:center}";
+const LotteryOddsbomLatestResultStyle0 = lotteryOddsbomLatestResultCss;
+
+const BombIcons = {
+    ['Football']: (h("svg", { height: "18px", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", class: "text-sm" }, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M19.063 19.072l-.81-.97-.117.083.385-2.43.136-.211 2.23-3.464.037-.057h1.075a9.964 9.964 0 01-2.936 7.049zM4.769 5.112l2.8.877-.072 3.246-2.427 2.95-1.561-.153L2.39 9.26a9.977 9.977 0 012.378-4.148zm7.745-3.086l-.72 1.645-3.798 1.404-2.395-.75A9.953 9.953 0 0112 2c.174 0 .343.017.514.026zm7.346 3.812l-1.128 1.29-3.402-.755-.033-.008-2.446-2.241.057.016.862-1.973a9.996 9.996 0 016.09 3.67zm-1.87 8.894l-3.385-.493-1.358-4.067 2.173-2.755 3.144.698 1.347 3.634-1.921 2.983zm-4.64 5.787l4.304-1.486.62.742a9.945 9.945 0 01-5.878 2.205l.954-1.461zm-6.314-2.84l3.91.873-.001.003 1.509 1.507-1.24 1.898a9.946 9.946 0 01-5.908-2.553l1.73-1.728zm1.16-7.72l4.168.725 1.302 3.9-2.552 2.98-3.97-.885-1.412-3.724L8.196 9.96zM2 12c0-.31.019-.615.047-.92l.485 1.203-.454.907A9.934 9.934 0 012 11.999zM12 1C5.934 1 1 5.935 1 12c0 6.067 4.935 11 11 11 6.066 0 11-4.933 11-11 0-6.065-4.934-11-11-11z", fill: "currentColor" })))
+};
+const LotteryOddsbomLatestResult = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.getGameDrawInfoEvent = createEvent(this, "getGameDrawInfo", 7);
+        this.mbSource = undefined;
+        this.clientStyling = undefined;
+        this.clientStylingUrl = undefined;
+        this.translationUrl = '';
+        this.language = 'en';
+        this.endpoint = undefined;
+        this.gameId = undefined;
+        this.curDate = undefined;
+        this.showLoading = true;
+        this.hideWrapperEmpty = false;
+        this.isPassingData = false;
+        this.drawResults = '';
+        this.isEmpty = true;
+        this._curDate = undefined;
+        this.drawResultsList = [];
+        this.curDrawItem = {};
+        this.curTurnOver = 0;
+        this.isLoadingTurnover = false;
+        this.vendorGameId = undefined;
+        this.gameName = undefined;
+        this.isLoading = false;
+    }
+    handleClientStylingChange(newValue, oldValue) {
+        if (newValue != oldValue) {
+            setClientStyling(this.stylingContainer, this.clientStyling);
+        }
+    }
+    handleClientStylingUrlChange(newValue, oldValue) {
+        if (newValue != oldValue) {
+            setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
+        }
+    }
+    handleMbSourceChange(newValue, oldValue) {
+        if (newValue != oldValue) {
+            setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`);
+        }
+    }
+    async handleDateChange(n, o) {
+        if (n !== o) {
+            await this.setCurItem(n);
+            if (this.curDrawItem && this.curDrawItem.drawId) {
+                this.getTurnOver();
+            }
+        }
+    }
+    async handleDrawResultsChange(n, o) {
+        if (n !== o) {
+            await this.setDrawResults();
+        }
+    }
+    async getTurnOver() {
+        var _a, _b;
+        try {
+            this.isLoadingTurnover = true;
+            const res = await fetchSaleStatistics({
+                endpoint: this.endpoint,
+                gameId: this.vendorGameId,
+                drawId: this.curDrawItem.drawId
+            });
+            this.curTurnOver = (_b = (_a = res === null || res === void 0 ? void 0 : res.wagerSegment) === null || _a === void 0 ? void 0 : _a.totalSalesCrossDraw) !== null && _b !== void 0 ? _b : 0;
+        }
+        catch (e) {
+            console.error(e);
+        }
+        finally {
+            this.isLoadingTurnover = false;
+        }
+    }
+    get formattedTurnover() {
+        const turnover = this.curTurnOver;
+        const unit = '€';
+        if (turnover === null || turnover === undefined)
+            return '';
+        return `${unit}${turnover ? thousandSeparator(turnover) : 0}`;
+    }
+    async setCurItem(curDate) {
+        var _a;
+        try {
+            if (curDate && ((_a = this.drawResultsList) === null || _a === void 0 ? void 0 : _a.length)) {
+                this.curDrawItem = await changeCurDrawItemByDate(curDate, this.drawResultsList);
+                this.isEmpty = false;
+            }
+            else {
+                this.isEmpty = true;
+            }
+        }
+        catch (_b) {
+            this.isEmpty = true;
+        }
+    }
+    async setDrawResults() {
+        try {
+            if (this.drawResults) {
+                this.drawResultsList = JSON.parse(this.drawResults);
+                await this.setCurItem(this.curDate);
+            }
+        }
+        catch (err) {
+            console.error(err);
+        }
+    }
+    componentDidLoad() {
+        if (this.stylingContainer) {
+            if (this.mbSource)
+                setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`);
+            if (this.clientStyling)
+                setClientStyling(this.stylingContainer, this.clientStyling);
+            if (this.clientStylingUrl)
+                setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
+        }
+    }
+    disconnectedCallback() {
+        this.stylingSubscription && this.stylingSubscription.unsubscribe();
+    }
+    async getDrawData() {
+        if (this.isPassingData) {
+            this.setDrawResults();
+        }
+        else {
+            this.fetchData();
+        }
+    }
+    async getGameInfo() {
+        return fetchGameInfo({ endpoint: this.endpoint, gameId: this.gameId }).then(({ vendorGameId, gameName }) => {
+            this.vendorGameId = vendorGameId;
+            this.gameName = gameName;
+        });
+    }
+    async componentWillLoad() {
+        resolveTranslationUrl$1(this.translationUrl);
+        await Promise.all([this.getDrawData(), this.getGameInfo()]);
+        if (this.curDrawItem && this.curDrawItem.drawId) {
+            this.getTurnOver();
+        }
+    }
+    async fetchData() {
+        this.isLoading = true;
+        try {
+            const res = await fetchDrawsInfo$1({ endpoint: this.endpoint, gameId: this.gameId });
+            this.getGameDrawInfoEvent.emit({
+                drawDatesOptions: res.drawDatesOptions,
+                gameId: this.gameId
+            });
+            this.drawResultsList = res.drawResultsList;
+            this._curDate = res.drawDatesOptions[findLatestDateIdx$1(res.drawDatesOptions)];
+            await this.setCurItem(this._curDate);
+        }
+        catch (error) {
+            this.getGameDrawInfoEvent.emit({
+                drawDatesOptions: [],
+                gameId: this.gameId
+            });
+        }
+        finally {
+            this.isLoading = false;
+        }
+    }
+    renderLoading() {
+        return (h("div", { class: "loading-wrap" }, h("section", { class: "dots-container" }, h("div", { class: "dot" }), h("div", { class: "dot" }), h("div", { class: "dot" }), h("div", { class: "dot" }), h("div", { class: "dot" }))));
+    }
+    renderEmpty() {
+        return null;
+    }
+    renderMainContent() {
+        var _a, _b, _c, _d, _e, _f;
+        if (!(this.curDate || this._curDate) || this.isEmpty) {
+            return this.renderEmpty();
+        }
+        return (h("div", { class: "lottery-tipping-latest-result" }, h("div", { class: "header-section match-info-section" }, h("div", { class: "match-details" }, h("span", { class: "title-icon" }, BombIcons.Football), h("span", { class: "title-text" }, this.gameName, ' ', this.isLoadingTurnover ? (h("div", { class: "loading-turnOver" }, h("ui-skeleton", { structure: "rectangle", width: "100px", height: "16px" }))) : (h("span", { class: "title-text__extra" }, "(", translate$1('turnover', this.language) + ' ' + this.formattedTurnover || 0, ")")))), h("div", { class: "prize-details" }, h("span", { class: "winners-count" }, (((_a = this.curDrawItem) === null || _a === void 0 ? void 0 : _a.winNumber) || 0) + ' ' + translate$1('winners', this.language)), h("span", { class: "prize-amount" }, translate$1('prize', this.language) + ' ' + (((_b = this.curDrawItem) === null || _b === void 0 ? void 0 : _b.formattedWinTurnOver) || 0)))), !!(((_c = this.curDrawItem) === null || _c === void 0 ? void 0 : _c.drawId) || (((_d = this.curDrawItem) === null || _d === void 0 ? void 0 : _d.results) || []).length) && (h("lottery-oddsbom-ticket-result", { language: this.language, "mb-source": this.mbSource, "client-styling": this.clientStyling, "client-styling-url": this.clientStylingUrl, "translation-url": this.translationUrl, endpoint: this.endpoint, "game-id": this.vendorGameId, "draw-id": (_e = this.curDrawItem) === null || _e === void 0 ? void 0 : _e.drawId, "default-results": JSON.stringify(((_f = this.curDrawItem) === null || _f === void 0 ? void 0 : _f.results) || []), "split-view": false }))));
+    }
+    render() {
+        return (h("div", { key: '08c7308433c4d55f4cec1540002a03596155fe98', ref: (el) => (this.stylingContainer = el), class: {
+                'latest-result-wrapper': true,
+                'game-wrapper': !(this.hideWrapperEmpty && this.isEmpty)
+            } }, this.isLoading && this.showLoading ? this.renderLoading() : this.renderMainContent()));
+    }
+    static get watchers() { return {
+        "clientStyling": ["handleClientStylingChange"],
+        "clientStylingUrl": ["handleClientStylingUrlChange"],
+        "mbSource": ["handleMbSourceChange"],
+        "curDate": ["handleDateChange"],
+        "drawResults": ["handleDrawResultsChange"]
+    }; }
+};
+LotteryOddsbomLatestResult.style = LotteryOddsbomLatestResultStyle0;
+
+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$1(url, method = 'GET', body = null, headers = {}) {
+    return new Promise((resolve, reject) => {
+        const uuid = generateUUID();
+        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) {
+                reject(`HTTP error! Status: ${response.status}`);
+                throw new Error(`HTTP error! Status: ${response.status}`);
+            }
+            return response.json();
+        })
+            .then((data) => resolve(data))
+            .catch((error) => reject(error));
+    });
+}
+function toQueryParams(params) {
+    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 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;
+        }
+    }
+    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}` : '';
+}
+function findLatestDateIdx(dateArr) {
+    const currentDate = new Date();
+    let closestIndex = 0;
+    let minDiff = Infinity;
+    dateArr.forEach((dateStr, index) => {
+        const date = new Date(dateStr);
+        const diff = Math.abs(differenceInMilliseconds(currentDate, date));
+        if (diff < minDiff) {
+            minDiff = diff;
+            closestIndex = index;
+        }
+    });
+    return closestIndex;
+}
+function getUniqueDatesOptions(preDates = [], dates = []) {
+    const dateSet = new Set();
+    dates.forEach((date) => {
+        if (!dateSet.has(date)) {
+            dateSet.add(date);
+            preDates.push(date);
+        }
+    });
+    return preDates.length ? [...sortDates(preDates)] : [];
+}
+function sortDates(dateArray) {
+    return dateArray.slice().sort((a, b) => a.localeCompare(b));
+}
+
+async function fetchDrawsInfo({ endpoint, gameId }) {
+    if (!(endpoint && gameId))
+        return;
+    const GAME_DRAW_LIMIT = 9999;
+    const filterData = { status: 'PAYABLE', limit: GAME_DRAW_LIMIT };
+    const { items: drawList } = await fetchRequest$1(`${endpoint}/games/${gameId}/draws${toQueryParams(filterData)}`);
+    if (!drawList || drawList.length === 0)
+        return {};
+    const settledDrawList = drawList.sort((a, b) => a === null || a === void 0 ? void 0 : a.date.localeCompare(b === null || b === void 0 ? void 0 : b.date));
+    const drawDatesOptions = settledDrawList.map((item) => item.date);
+    return {
+        drawDatesOptions,
+        drawResultsList: settledDrawList
+    };
+}
+function fetchData({ endpoint, gameIds }) {
+    if (!(endpoint && gameIds))
+        return;
+    return Promise.allSettled(gameIds.map((gameId) => fetchDrawsInfo({ endpoint, gameId })
+        .then((res) => {
+        return { gameId, drawResultsList: res.drawResultsList, drawDatesOptions: res.drawDatesOptions };
+    })
+        .catch((error) => {
+        console.error(`Failed to fetch data for gameId: ${gameId}`, error);
+        return { gameId, drawResultsList: [], drawDatesOptions: [] };
+    }))).then((results) => {
+        return results.reduce((pre, cur) => {
+            if (cur.status === 'fulfilled') {
+                const { gameId, drawResultsList, drawDatesOptions } = cur.value;
+                pre[gameId] = {
+                    drawResultsList,
+                    drawDatesOptions
+                };
+                return pre;
+            }
+        }, {});
+    });
+}
+
+const lotteryOddsbomLatestResultGroupCss = ".lottery-tipping-latest-result-group{container-type:inline-size;padding:16px;background-color:var(--emw--color-background, #fff);height:100%}.games-container{display:flex;flex-direction:column;gap:24px;max-width:800px;margin:0 auto;margin-top:24px}.loading-wrap{margin:20px 0;display:flex;align-items:center;justify-content:center;min-height:100px}.loading-wrap .dots-container{display:flex;align-items:center;justify-content:center;height:100%;width:100%}.loading-wrap .dot{height:14px;width:14px;margin-right:14px;border-radius:14px;background-color:var(--emw--color-gray-300, #333);animation:pulse 1.5s infinite ease-in-out}.loading-wrap .dot:last-child{margin-right:0}.loading-wrap .dot:nth-child(1){animation-delay:-0.3s}.loading-wrap .dot:nth-child(2){animation-delay:-0.1s}.loading-wrap .dot:nth-child(3){animation-delay:0.1s}@keyframes pulse{0%{transform:scale(0.8);background-color:var(--emw--color-gray-300, #333)}50%{transform:scale(1.2);background-color:var(--emw--color-gray-100, #e6e6e6)}100%{transform:scale(0.8);background-color:var(--emw--color-gray-150, #6f6f6f)}}";
+const LotteryOddsbomLatestResultGroupStyle0 = lotteryOddsbomLatestResultGroupCss;
+
+const LotteryOddsbomLatestResultGroup = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.mbSource = undefined;
+        this.clientStyling = undefined;
+        this.clientStylingUrl = undefined;
+        this.translationUrl = '';
+        this.language = 'en';
+        this.endpoint = undefined;
+        this.sessionId = undefined;
+        this.playerId = '';
+        this.gameIds = undefined;
+        this.gameIdArr = [];
+        this.drawDatesOptions = [];
+        this.curDate = undefined;
+        this.isLoading = false;
+        this.drawResultsObj = {};
+    }
+    handleClientStylingChange(newValue, oldValue) {
+        if (newValue != oldValue) {
+            setClientStyling(this.stylingContainer, this.clientStyling);
+        }
+    }
+    handleClientStylingUrlChange(newValue, oldValue) {
+        if (newValue != oldValue) {
+            setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
+        }
+    }
+    handleMbSourceChange(newValue, oldValue) {
+        if (newValue != oldValue) {
+            setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`);
+        }
+    }
+    handleGameIdStringChange(newValue, oldValue) {
+        var _a;
+        if (newValue != oldValue) {
+            this.gameIdArr = ((_a = this.gameIds) === null || _a === void 0 ? void 0 : _a.split(',')) || [];
+            this.getData();
+        }
+    }
+    componentDidLoad() {
+        var _a;
+        this.gameIdArr = ((_a = this.gameIds) === null || _a === void 0 ? void 0 : _a.split(',')) || [];
+        this.getData();
+        if (this.stylingContainer) {
+            if (this.mbSource)
+                setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`);
+            if (this.clientStyling)
+                setClientStyling(this.stylingContainer, this.clientStyling);
+            if (this.clientStylingUrl)
+                setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
+        }
+    }
+    disconnectedCallback() {
+        this.stylingSubscription && this.stylingSubscription.unsubscribe();
+    }
+    getData() {
+        this.isLoading = true;
+        fetchData({ endpoint: this.endpoint, gameIds: this.gameIdArr })
+            .then((res) => {
+            this.drawResultsObj = res;
+            const dates = Object.values(res)
+                .map((i) => i.drawDatesOptions)
+                .filter(Boolean)
+                .flat();
+            this.drawDatesOptions = getUniqueDatesOptions([], dates);
+            this.curDate = this.drawDatesOptions[findLatestDateIdx(this.drawDatesOptions)];
+        })
+            .finally(() => {
+            this.isLoading = false;
+        });
+    }
+    handleChange(e) {
+        const idx = e.detail;
+        this.curDate = this.drawDatesOptions[idx];
+    }
+    handleNext() {
+        if (this.curDate) {
+            const idx = this.drawDatesOptions.findIndex((v) => v === this.curDate);
+            if (idx < this.drawDatesOptions.length - 1) {
+                this.curDate = this.drawDatesOptions[idx + 1];
+            }
+        }
+    }
+    handlePrev() {
+        if (this.curDate) {
+            const idx = this.drawDatesOptions.findIndex((v) => v === this.curDate);
+            if (idx > 0) {
+                this.curDate = this.drawDatesOptions[idx - 1];
+            }
+        }
+    }
+    renderLoading() {
+        return (h("div", { class: "loading-wrap" }, h("section", { class: "dots-container" }, h("div", { class: "dot" }), h("div", { class: "dot" }), h("div", { class: "dot" }), h("div", { class: "dot" }), h("div", { class: "dot" }))));
+    }
+    renderMainContent() {
+        return (h("div", null, this.curDate && (h("helper-date-navigator", { language: this.language, "mb-source": this.mbSource, "client-styling": this.clientStyling, "client-styling-url": this.clientStylingUrl, "translation-url": this.translationUrl, date: this.curDate, "default-highlight-dates": JSON.stringify(this.drawDatesOptions || []), onNext: this.handleNext.bind(this), onPrev: this.handlePrev.bind(this), onChangeDate: this.handleChange.bind(this) })), h("div", { class: "games-container" }, this.gameIdArr.map((gameId) => {
+            var _a, _b;
+            return (h("lottery-oddsbom-latest-result", { endpoint: this.endpoint, "game-id": gameId, "cur-date": this.curDate, drawResults: JSON.stringify((_b = (_a = this.drawResultsObj) === null || _a === void 0 ? void 0 : _a[gameId]) === null || _b === void 0 ? void 0 : _b.drawResultsList), "is-passing-data": true, "show-loading": false, "hide-wrapper-empty": true, language: this.language, "translation-url": this.translationUrl, "client-styling": this.clientStyling, "client-styling-url": this.clientStylingUrl, "mb-source": this.mbSource, "session-id": this.sessionId, "player-id": this.playerId }));
+        }))));
+    }
+    render() {
+        return (h("div", { key: 'e576645b260f4a713cce833aae814ce7edad137e', ref: (el) => (this.stylingContainer = el), class: "lottery-tipping-latest-result-group" }, this.isLoading ? this.renderLoading() : this.renderMainContent()));
+    }
+    static get watchers() { return {
+        "clientStyling": ["handleClientStylingChange"],
+        "clientStylingUrl": ["handleClientStylingUrlChange"],
+        "mbSource": ["handleMbSourceChange"],
+        "gameIds": ["handleGameIdStringChange"]
+    }; }
+};
+LotteryOddsbomLatestResultGroup.style = LotteryOddsbomLatestResultGroupStyle0;
+
+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 '';
+    }
+};
+function fetchRequest(url, method = 'GET', body = null, headers = {}) {
+    return new Promise((resolve, reject) => {
+        const headersOrigin = Object.assign({ 'Content-Type': 'application/json' }, headers);
+        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 fetchTicketMatch({ endpoint, gameId, drawId }) {
+    try {
+        const res = await fetchRequest(`${endpoint}/poolgames/${gameId}/draws/${drawId}/matchConfig`);
+        return res || [];
+    }
+    catch (e) {
+        console.log(e);
+    }
+}
+function getTeamsFromEventName(eventName) {
+    if (!eventName)
+        return '';
+    return eventName.split('vs').map((i) => i.trim());
+}
+function resolveSelections(resInMatch) {
+    const mySet1 = new Set();
+    const mySet2 = new Set();
+    for (const resInLine of resInMatch) {
+        const [team1Score, team2Score] = resInLine.split(':');
+        if (!mySet1.has(team1Score))
+            mySet1.add(team1Score);
+        if (!mySet2.has(team1Score))
+            mySet2.add(team2Score);
+    }
+    return [Array.from(mySet1), Array.from(mySet2)];
+}
+async function buildTicketBetDataSource({ endpoint, gameId, drawId, results, splitView = false }) {
+    const res = await fetchTicketMatch({ endpoint, gameId, drawId });
+    if (splitView) {
+        return (res.reduce((pre, item, index) => {
+            const [team1Name, team2Name] = getTeamsFromEventName(item.eventName);
+            const [team1Res, team2Res] = resolveSelections(results[index] || []);
+            pre === null || pre === void 0 ? void 0 : pre.push({
+                index: index + 1,
+                teamName: team1Name,
+                startTime: item.startTime,
+                results: team1Res
+            });
+            pre === null || pre === void 0 ? void 0 : pre.push({
+                index: index + 1,
+                teamName: team2Name,
+                startTime: item.startTime,
+                results: team2Res
+            });
+            return pre;
+        }, []) || []);
+    }
+    return res.map((item, index) => ({
+        index: index + 1,
+        eventName: item.eventName,
+        startTime: item.startTime,
+        results: results[index] || []
+    }));
+}
+
+const DEFAULT_LANGUAGE = 'en';
+const SUPPORTED_LANGUAGES = ['ro', 'en', 'fr', 'ar', 'hr'];
+const TRANSLATIONS = {
+    en: {
+        filter: 'Filter',
+        clear: 'Clear',
+        searchByTicketId: 'Search by Ticket ID',
+        enterTicketId: 'Enter Ticket ID',
+        searchByTicketType: 'Search by Ticket Type',
+        selectTicketType: 'Select Ticket Type',
+        searchByDate: 'Search by Date',
+        from: 'From',
+        to: 'To',
+        normal: 'Normal',
+        subscription: 'Subscription',
+        ticketsHistory: 'Tickets History',
+        settled: 'Settled',
+        purchased: 'Purchased',
+        canceled: 'Canceled',
+        noData: 'No data Avaliable.',
+        ticketId: 'Ticket ID:',
+        ticketType: 'Ticket Type:',
+        ticketAmount: 'Ticket Amount:',
+        lineDetail: 'Line Detail:',
+        seeDetails: 'See Details',
+        numberOfDraw: 'Number of Draw:',
+        ticketResult: 'Ticket Result:',
+        drawId: 'Draw ID:',
+        drawDate: 'Draw Date:',
+        result: 'Result:',
+        prize: 'Prize:',
+        bettingType: 'Betting Type:'
+    },
+    ro: {
+        ticketsHistory: 'Istoric bilete',
+        settled: 'Decontat',
+        purchased: 'Achiziționat',
+        canceled: 'Anulat',
+        noData: 'Nu sunt date disponibile.',
+        ticketId: 'ID bilet:',
+        ticketType: 'Tip bilet:',
+        ticketAmount: 'Suma biletului:',
+        lineDetail: 'Detaliu linie:',
+        seeDetails: 'Vezi detalii',
+        numberOfDraw: 'Număr de extrageri:',
+        ticketResult: 'Rezultat bilet:',
+        drawId: 'ID extragere:',
+        drawDate: 'Data extragerii:',
+        result: 'Rezultat:',
+        prize: 'Premiu:',
+        bettingType: 'Tip de pariu:'
+    },
+    fr: {
+        ticketsHistory: 'Historique des billets',
+        settled: 'Réglé',
+        purchased: 'Acheté',
+        canceled: 'Annulé',
+        noData: 'Aucune donnée disponible.',
+        ticketId: 'ID du billet:',
+        ticketType: 'Type de billet:',
+        ticketAmount: 'Montant du billet:',
+        lineDetail: 'Détail de la ligne:',
+        seeDetails: 'Voir les détails',
+        numberOfDraw: 'Nombre de tirages:',
+        ticketResult: 'Résultat du billet:',
+        drawId: 'ID du tirage:',
+        drawDate: 'Date du tirage:',
+        result: 'Résultat:',
+        prize: 'Prix:',
+        bettingType: 'Type de pari:'
+    },
+    ar: {
+        ticketsHistory: 'سجل التذاكر',
+        settled: 'تمت التسوية',
+        purchased: 'تم شراؤها',
+        canceled: 'تم الإلغاء',
+        noData: 'لا توجد بيانات متاحة.',
+        ticketId: 'معرف التذكرة:',
+        ticketType: 'نوع التذكرة:',
+        ticketAmount: 'مبلغ التذكرة:',
+        lineDetail: 'تفاصيل الخط:',
+        seeDetails: 'انظر التفاصيل',
+        numberOfDraw: 'عدد السحوبات:',
+        ticketResult: 'نتيجة التذكرة:',
+        drawId: 'معرف السحب:',
+        drawDate: 'تاريخ السحب:',
+        result: 'النتيجة:',
+        prize: 'الجائزة:',
+        bettingType: 'نوع الرهان:'
+    },
+    hr: {
+        ticketsHistory: 'Povijest listića',
+        settled: 'Riješeno',
+        purchased: 'Kupljeno',
+        canceled: 'Otkazano',
+        noData: 'Nema dostupnih podataka.',
+        ticketId: 'ID listića:',
+        ticketType: 'Vrsta listića:',
+        ticketAmount: 'Iznos listića:',
+        lineDetail: 'Detalji linije:',
+        seeDetails: 'Vidi detalje',
+        numberOfDraw: 'Broj izvlačenja:',
+        ticketResult: 'Rezultat listića:',
+        drawId: 'ID izvlačenja:',
+        drawDate: 'Datum izvlačenja:',
+        result: 'Rezultat:',
+        prize: 'Nagrada:',
+        bettingType: 'Vrsta oklade:'
+    }
+};
+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 === null || translation === void 0 ? void 0 : translation.replace(`{${placeholder}}`, replacements[placeholder]);
+        });
+    }
+    return translation;
+};
+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 lotteryOddsbomTicketResultCss = ".LotteryTippingTicketBet__container {\n  display: block; /* Or inline-block, depending on desired layout flow */\n  font-size: 14px;\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.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: 600;\n  padding: 0.4rem 0.5rem;\n  transition: background 0.3s ease;\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.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.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  color: var(--emw--color-typography, #000);\n}\n\n.no-wrap {\n  white-space: nowrap;\n  overflow: hidden;\n}\n\n.eventNameContainer__item {\n  line-height: 1rem;\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  backface-visibility: hidden;\n}\n\n@container (max-width: 520px) {\n  .LotteryTippingTicketBet__main {\n    flex-wrap: wrap;\n    justify-content: center;\n  }\n}\n.loading-wrap {\n  margin: 20px 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  min-height: 100px;\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}";
+const LotteryOddsbomTicketResultStyle0 = lotteryOddsbomTicketResultCss;
+
+const LotteryOddsbomTicketResult = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.latestRequestId = 0;
+        this.mbSource = undefined;
+        this.clientStyling = undefined;
+        this.clientStylingUrl = undefined;
+        this.translationUrl = '';
+        this.language = 'en';
+        this.sessionId = undefined;
+        this.endpoint = '';
+        this.gameId = undefined;
+        this.drawId = undefined;
+        this.defaultResults = undefined;
+        this.splitView = false;
+        this.allResults = undefined;
+        this.ticketBetDataSource = [];
+        this.isLoading = false;
+    }
+    handleClientStylingChange(newValue, oldValue) {
+        if (newValue !== oldValue) {
+            setClientStyling(this.stylingContainer, this.clientStyling);
+        }
+    }
+    handleClientStylingUrlChange(newValue, oldValue) {
+        if (newValue !== oldValue) {
+            setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
+        }
+    }
+    handleMbSourceChange(newValue, oldValue) {
+        if (newValue !== oldValue) {
+            setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`);
+        }
+    }
+    componentDidLoad() {
+        if (this.stylingContainer) {
+            if (this.mbSource)
+                setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`);
+            if (this.clientStyling)
+                setClientStyling(this.stylingContainer, this.clientStyling);
+            if (this.clientStylingUrl)
+                setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
+        }
+    }
+    disconnectedCallback() {
+        this.stylingSubscription && this.stylingSubscription.unsubscribe();
+    }
+    componentWillLoad() {
+        resolveTranslationUrl(this.translationUrl);
+        this.fetchMatchData();
+    }
+    async fetchMatchData() {
+        const currentId = ++this.latestRequestId;
+        if (!this.gameId || !this.drawId) {
+            return;
+        }
+        try {
+            if (this.defaultResults)
+                this.allResults = JSON.parse(this.defaultResults);
+            this.isLoading = true;
+            const res = await buildTicketBetDataSource({
+                endpoint: this.endpoint,
+                gameId: this.gameId,
+                drawId: this.drawId,
+                results: this.allResults || [[]],
+                splitView: this.splitView
+            });
+            if (currentId === this.latestRequestId) {
+                this.ticketBetDataSource = res;
+            }
+        }
+        finally {
+            if (currentId === this.latestRequestId) {
+                this.isLoading = false;
+            }
+        }
+    }
+    get columns() {
+        const dateRender = (_, value) => formatDate({ date: value, format: 'ccc dd/MM HH:mm' });
+        if (this.splitView) {
+            return [
+                {
+                    title: 'No.',
+                    value: 'index',
+                    width: 5,
+                    rowSpan: 2
+                },
+                {
+                    title: 'Date',
+                    value: 'startTime',
+                    width: 25,
+                    rowSpan: 2,
+                    nowrap: true,
+                    render: dateRender
+                },
+                {
+                    title: 'Team',
+                    value: 'teamName',
+                    width: 30
+                },
+                {
+                    title: 'Scores',
+                    value: 'results',
+                    width: 45,
+                    render: (_, value) => (h("div", { class: "flex gap-1" }, value.map((i) => (h("lottery-oddsbom-bullet", { text: i, "is-reading": true, "is-selected": true })))))
+                }
+            ];
+        }
+        const eventNameRender = (_, value) => (h("div", { class: "flex gap-1 eventNameContainer__item" }, h("span", { class: "eventNameContainer__item--title" }, value)));
+        return [
+            {
+                title: 'Match',
+                value: 'eventName',
+                width: 50,
+                render: eventNameRender
+            },
+            {
+                title: 'Date',
+                value: 'startTime',
+                width: 25,
+                nowrap: true,
+                render: dateRender
+            },
+            {
+                title: 'Match Result',
+                value: 'results',
+                width: 25,
+                render: (_, value) => h("div", null, value === null || value === void 0 ? void 0 : value[0])
+            }
+        ];
+    }
+    renderLoading() {
+        return (h("div", { class: "loading-wrap" }, h("section", { class: "dots-container" }, h("div", { class: "dot" }), h("div", { class: "dot" }), h("div", { class: "dot" }), h("div", { class: "dot" }), h("div", { class: "dot" }))));
+    }
+    renderEmpty() {
+        return (h("div", { class: "LotteryTippingTicketBet__empty" }, h("p", null, translate('noData', this.language))));
+    }
+    renderTable({ columns, dataSource, hideHead = false, grid = true, bordered = true }) {
+        const skipMap = {};
+        return (h("table", { class: { bordered: bordered, grid: grid, 'my-table-component': true } }, !hideHead && (h("thead", null, h("tr", null, columns.map((column) => {
+            var _a;
+            return (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)));
+        })))), h("tbody", null, dataSource.map((row, index) => (h("tr", { key: index }, columns.map((column) => {
+            if (skipMap[column.value] && skipMap[column.value] > 0) {
+                skipMap[column.value]--;
+                return null;
+            }
+            const span = column.rowSpan;
+            if (span && span > 1) {
+                skipMap[column.value] = span - 1;
+            }
+            return (h("td", { key: column.value, rowSpan: span, style: { width: column.width + '%', textAlign: column.align }, class: { 'no-wrap': column.nowrap } }, column.render ? column.render(row, row[column.value], index) : row[column.value]));
+        })))))));
+    }
+    renderContent() {
+        if (this.isLoading) {
+            return this.renderLoading();
+        }
+        if (!this.ticketBetDataSource || this.ticketBetDataSource.length === 0) {
+            return this.renderEmpty();
+        }
+        return (h("div", { class: "flex align-center LotteryTippingTicketBet__main" }, this.renderTable({
+            columns: this.columns,
+            dataSource: this.ticketBetDataSource || [],
+            hideHead: false,
+            grid: false,
+            bordered: false
+        })));
+    }
+    render() {
+        return (h("div", { key: '9932926b2958b13636d617cc20a0c77a76a36ebe', ref: (el) => (this.stylingContainer = el), class: "LotteryTippingTicketBet__container" }, this.renderContent()));
+    }
+    static get watchers() { return {
+        "clientStyling": ["handleClientStylingChange"],
+        "clientStylingUrl": ["handleClientStylingUrlChange"],
+        "mbSource": ["handleMbSourceChange"],
+        "gameId": ["fetchMatchData"],
+        "drawId": ["fetchMatchData"],
+        "defaultResults": ["fetchMatchData"]
+    }; }
+};
+LotteryOddsbomTicketResult.style = LotteryOddsbomTicketResultStyle0;
+
+const uiSkeletonCss = ":host{display:block}.Skeleton{animation:skeleton-loading 1s linear infinite alternate}.SkeletonRectangle{background-color:var(--emw-skeleton-rectangle-background, #c2c2c2);width:var(--emw-skeleton-rectangle-width, 400px);height:var(--emw-skeleton-rectangle-height, 200px);border-radius:var(--emw-skeleton-rectangle-border-radius, 10px)}.SkeletonCircle{background-color:var(--emw-skeleton-circle-background, #c2c2c2);width:var(--emw-skeleton-circle-size, 400px);height:var(--emw-skeleton-circle-size, 400px);border-radius:50%}.SkeletonText{background-color:var(--emw-skeleton-text-background, #c2c2c2);width:var(--emw-skeleton-text-width, 500px);height:var(--emw-skeleton-text-height, 20px);border-radius:var(--emw-skeleton-text-border-radius, 10px);margin-bottom:var(--emw-skeleton-text-margin-bottom, 5px)}.SkeletonText:last-child{width:calc(var(--emw-skeleton-text-width, 400px) - 100px)}.SkeletonTitle{background-color:var(--emw-skeleton-title-background, #c2c2c2);width:var(--emw-skeleton-title-width, 300px);height:var(--emw-skeleton-title-height, 30px);border-radius:var(--emw-skeleton-title-border-radius, 10px);margin-bottom:var(--emw-skeleton-title-margin-bottom, 5px)}.SkeletonImage{background-color:var(--emw-skeleton-image-background, #c2c2c2);width:var(--emw-skeleton-image-width, 100%);height:var(--emw-skeleton-image-height, 100%);border-radius:var(--emw-skeleton-image-border-radius, unset)}.SkeletonLogo{background-color:var(--emw-skeleton-logo-background, #c2c2c2);width:var(--emw-skeleton-logo-width, 120px);height:var(--emw-skeleton-logo-height, 75px);border-radius:var(--emw-skeleton-logo-border-radius, 10px)}@keyframes skeleton-loading{0%{background-color:var(--emw-skeleton-primary-color, #e0e0e0)}100%{background-color:var(--emw-skeleton-secondary-color, #f0f0f0)}}";
+const UiSkeletonStyle0 = uiSkeletonCss;
+
+const UiSkeleton = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.stylingValue = {
+            width: this.handleStylingProps(this.width),
+            height: this.handleStylingProps(this.height),
+            borderRadius: this.handleStylingProps(this.borderRadius),
+            marginBottom: this.handleStylingProps(this.marginBottom),
+            marginTop: this.handleStylingProps(this.marginTop),
+            marginLeft: this.handleStylingProps(this.marginLeft),
+            marginRight: this.handleStylingProps(this.marginRight),
+            size: this.handleStylingProps(this.size),
+        };
+        this.structure = undefined;
+        this.width = 'unset';
+        this.height = 'unset';
+        this.borderRadius = 'unset';
+        this.marginBottom = 'unset';
+        this.marginTop = 'unset';
+        this.marginLeft = 'unset';
+        this.marginRight = 'unset';
+        this.animation = true;
+        this.rows = 0;
+        this.size = '100%';
+    }
+    handleStructureChange(newValue, oldValue) {
+        if (oldValue !== newValue) {
+            this.handleStructure(newValue);
+        }
+    }
+    handleStylingProps(value) {
+        switch (typeof value) {
+            case 'number':
+                return value === 0 ? 0 : `${value}px`;
+            case 'undefined':
+                return 'unset';
+            case 'string':
+                if (['auto', 'unset', 'none', 'inherit', 'initial'].includes(value) ||
+                    value.endsWith('px') ||
+                    value.endsWith('%')) {
+                    return value;
+                }
+                else {
+                    return 'unset';
+                }
+            default:
+                return 'unset';
+        }
+    }
+    handleStructure(structure) {
+        switch (structure) {
+            case 'logo':
+                return this.renderLogo();
+            case 'image':
+                return this.renderImage();
+            case 'title':
+                return this.renderTitle();
+            case 'text':
+                return this.renderText();
+            case 'rectangle':
+                return this.renderRectangle();
+            case 'circle':
+                return this.renderCircle();
+            default:
+                return null;
+        }
+    }
+    renderLogo() {
+        return (h("div", { class: "SkeletonContainer" }, h("div", { class: 'SkeletonLogo ' + (this.animation ? 'Skeleton' : '') })));
+    }
+    renderImage() {
+        return h("div", { class: 'SkeletonImage ' + (this.animation ? 'Skeleton' : '') });
+    }
+    renderTitle() {
+        return (h("div", { class: "SkeletonContainer" }, h("div", { class: 'SkeletonTitle ' + (this.animation ? 'Skeleton' : '') })));
+    }
+    renderText() {
+        return (h("div", { class: "SkeletonContainer" }, Array.from({ length: this.rows > 0 ? this.rows : 1 }).map((_, index) => (h("div", { key: index, class: 'SkeletonText ' + (this.animation ? 'Skeleton' : '') })))));
+    }
+    renderRectangle() {
+        return (h("div", { class: "SkeletonContainer" }, h("div", { class: 'SkeletonRectangle ' + (this.animation ? 'Skeleton' : '') })));
+    }
+    renderCircle() {
+        return (h("div", { class: "SkeletonContainer" }, h("div", { class: 'SkeletonCircle ' + (this.animation ? 'Skeleton' : '') })));
+    }
+    render() {
+        let styleBlock = '';
+        switch (this.structure) {
+            case 'logo':
+                styleBlock = `
+          :host {
+            --emw-skeleton-logo-width: ${this.stylingValue.width};
+            --emw-skeleton-logo-height: ${this.stylingValue.height};
+            --emw-skeleton-logo-border-radius: ${this.stylingValue.borderRadius};
+            --emw-skeleton-logo-margin-bottom: ${this.stylingValue.marginBottom};
+            --emw-skeleton-logo-margin-top: ${this.stylingValue.marginTop};
+            --emw-skeleton-logo-margin-left: ${this.stylingValue.marginLeft};
+            --emw-skeleton-logo-margin-right: ${this.stylingValue.marginRight};
+          }
+        `;
+                break;
+            case 'image':
+                styleBlock = `
+          :host {
+            --emw-skeleton-image-width: ${this.stylingValue.width};
+            --emw-skeleton-image-height: ${this.stylingValue.height};
+            --emw-skeleton-image-border-radius: ${this.stylingValue.borderRadius};
+            --emw-skeleton-image-margin-bottom: ${this.stylingValue.marginBottom};
+            --emw-skeleton-image-margin-top: ${this.stylingValue.marginTop};
+            --emw-skeleton-image-margin-left: ${this.stylingValue.marginLeft};
+            --emw-skeleton-image-margin-right: ${this.stylingValue.marginRight};
+          }
+        `;
+                break;
+            case 'title':
+                styleBlock = `
+          :host {
+            --emw-skeleton-title-width: ${this.stylingValue.width};
+            --emw-skeleton-title-height: ${this.stylingValue.height};
+            --emw-skeleton-title-border-radius: ${this.stylingValue.borderRadius};
+            --emw-skeleton-title-margin-bottom: ${this.stylingValue.marginBottom};
+            --emw-skeleton-title-margin-top: ${this.stylingValue.marginTop};
+            --emw-skeleton-title-margin-left: ${this.stylingValue.marginLeft};
+            --emw-skeleton-title-margin-right: ${this.stylingValue.marginRight};
+          }
+        `;
+                break;
+            case 'text':
+                styleBlock = `
+          :host {
+            --emw-skeleton-text-width: ${this.stylingValue.width};
+            --emw-skeleton-text-height: ${this.stylingValue.height};
+            --emw-skeleton-text-border-radius: ${this.stylingValue.borderRadius};
+            --emw-skeleton-text-margin-bottom: ${this.stylingValue.marginBottom};
+            --emw-skeleton-text-margin-top: ${this.stylingValue.marginTop};
+            --emw-skeleton-text-margin-left: ${this.stylingValue.marginLeft};
+            --emw-skeleton-text-margin-right: ${this.stylingValue.marginRight};
+          }
+        `;
+                break;
+            case 'rectangle':
+                styleBlock = `
+          :host {
+            --emw-skeleton-rectangle-width: ${this.stylingValue.width};
+            --emw-skeleton-rectangle-height: ${this.stylingValue.height};
+            --emw-skeleton-rectangle-border-radius: ${this.stylingValue.borderRadius};
+            --emw-skeleton-rectangle-margin-bottom: ${this.stylingValue.marginBottom};
+            --emw-skeleton-rectangle-margin-top: ${this.stylingValue.marginTop};
+            --emw-skeleton-rectangle-margin-left: ${this.stylingValue.marginLeft};
+            --emw-skeleton-rectangle-margin-right: ${this.stylingValue.marginRight};
+          }
+        `;
+                break;
+            case 'circle':
+                styleBlock = `
+          :host {
+            --emw-skeleton-circle-size: ${this.stylingValue.size};
+          }
+        `;
+                break;
+            default:
+                styleBlock = '';
+        }
+        return (h(Host, { key: 'c2a2650acd416962a2bc4e1a7ee18bc6d8e2def8' }, h("style", { key: '9bd7fc1f9e9ed9f17735a7b72fce6f09696f5e19' }, styleBlock), this.handleStructure(this.structure)));
+    }
+    static get watchers() { return {
+        "structure": ["handleStructureChange"]
+    }; }
+};
+UiSkeleton.style = UiSkeletonStyle0;
+
+export { HelperDateNavigator as helper_date_navigator, LotteryOddsbomBomb as lottery_oddsbom_bomb, LotteryOddsbomBullet as lottery_oddsbom_bullet, LotteryOddsbomLatestResult as lottery_oddsbom_latest_result, LotteryOddsbomLatestResultGroup as lottery_oddsbom_latest_result_group, LotteryOddsbomTicketResult as lottery_oddsbom_ticket_result, UiSkeleton as ui_skeleton };