@everymatrix/lottery-oddsbom-ticket-bet 0.7.28 → 0.7.30

package/dist/esm/{lottery-oddsbom-bullet_9.entry.js → lottery-banner_10.entry.js}

@@ -1,6 +1,378 @@
 import { r as registerInstance, c as createEvent, h, g as getElement } from './index-9dee9d86.js';
-import { s as setClientStyling, a as setClientStylingURL, b as setStreamStyling, c as showNotification, t as translate$1, d as stringToBase64, r as resolveTranslationUrl$1, f as formatNumber, g as getTranslations$1, M as MAX_DISPLAY_OPTION_NUM } from './lottery-oddsbom-ticket-bet-1e36d8ab.js';
-export { L as lottery_oddsbom_ticket_bet } from './lottery-oddsbom-ticket-bet-1e36d8ab.js';
+import { r as requiredArgs, t as toDate, p as parseISO, i as isToday, f as format, s as setClientStyling, a as setClientStylingURL, b as setStreamStyling, c as showNotification, d as translate$2, e as stringToBase64, g as resolveTranslationUrl$2, h as formatNumber, j as getTranslations$2, M as MAX_DISPLAY_OPTION_NUM } from './lottery-oddsbom-ticket-bet-65daa420.js';
+export { L as lottery_oddsbom_ticket_bet } from './lottery-oddsbom-ticket-bet-65daa420.js';
+
+/**
+ * @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();
+}
+
+var roundingMap = {
+  ceil: Math.ceil,
+  round: Math.round,
+  floor: Math.floor,
+  trunc: function trunc(value) {
+    return value < 0 ? Math.ceil(value) : Math.floor(value);
+  } // Math.trunc is not supported by IE
+};
+
+var defaultRoundingMethod = 'trunc';
+function getRoundingMethod(method) {
+  return method ? roundingMap[method] : roundingMap[defaultRoundingMethod];
+}
+
+/**
+ * @name differenceInSeconds
+ * @category Second Helpers
+ * @summary Get the number of seconds between the given dates.
+ *
+ * @description
+ * Get the number of seconds between the given dates.
+ *
+ * @param {Date|Number} dateLeft - the later date
+ * @param {Date|Number} dateRight - the earlier date
+ * @param {Object} [options] - an object with options.
+ * @param {String} [options.roundingMethod='trunc'] - a rounding method (`ceil`, `floor`, `round` or `trunc`)
+ * @returns {Number} the number of seconds
+ * @throws {TypeError} 2 arguments required
+ *
+ * @example
+ * // How many seconds are between
+ * // 2 July 2014 12:30:07.999 and 2 July 2014 12:30:20.000?
+ * const result = differenceInSeconds(
+ *   new Date(2014, 6, 2, 12, 30, 20, 0),
+ *   new Date(2014, 6, 2, 12, 30, 7, 999)
+ * )
+ * //=> 12
+ */
+function differenceInSeconds(dateLeft, dateRight, options) {
+  requiredArgs(2, arguments);
+  var diff = differenceInMilliseconds(dateLeft, dateRight) / 1000;
+  return getRoundingMethod(options === null || options === void 0 ? void 0 : options.roundingMethod)(diff);
+}
+
+/**
+ * @name isBefore
+ * @category Common Helpers
+ * @summary Is the first date before the second one?
+ *
+ * @description
+ * Is the first date before the second one?
+ *
+ * @param {Date|Number} date - the date that should be before the other one to return true
+ * @param {Date|Number} dateToCompare - the date to compare with
+ * @returns {Boolean} the first date is before the second date
+ * @throws {TypeError} 2 arguments required
+ *
+ * @example
+ * // Is 10 July 1989 before 11 February 1987?
+ * const result = isBefore(new Date(1989, 6, 10), new Date(1987, 1, 11))
+ * //=> false
+ */
+function isBefore(dirtyDate, dirtyDateToCompare) {
+  requiredArgs(2, arguments);
+  var date = toDate(dirtyDate);
+  var dateToCompare = toDate(dirtyDateToCompare);
+  return date.getTime() < dateToCompare.getTime();
+}
+
+/**
+ * @name isWithinInterval
+ * @category Interval Helpers
+ * @summary Is the given date within the interval?
+ *
+ * @description
+ * Is the given date within the interval? (Including start and end.)
+ *
+ * @param {Date|Number} date - the date to check
+ * @param {Interval} interval - the interval to check
+ * @returns {Boolean} the date is within the interval
+ * @throws {TypeError} 2 arguments required
+ * @throws {RangeError} The start of an interval cannot be after its end
+ * @throws {RangeError} Date in interval cannot be `Invalid Date`
+ *
+ * @example
+ * // For the date within the interval:
+ * isWithinInterval(new Date(2014, 0, 3), {
+ *   start: new Date(2014, 0, 1),
+ *   end: new Date(2014, 0, 7)
+ * })
+ * //=> true
+ *
+ * @example
+ * // For the date outside of the interval:
+ * isWithinInterval(new Date(2014, 0, 10), {
+ *   start: new Date(2014, 0, 1),
+ *   end: new Date(2014, 0, 7)
+ * })
+ * //=> false
+ *
+ * @example
+ * // For date equal to interval start:
+ * isWithinInterval(date, { start, end: date }) // => true
+ *
+ * @example
+ * // For date equal to interval end:
+ * isWithinInterval(date, { start: date, end }) // => true
+ */
+function isWithinInterval(dirtyDate, interval) {
+  requiredArgs(2, arguments);
+  var time = toDate(dirtyDate).getTime();
+  var startTime = toDate(interval.start).getTime();
+  var endTime = toDate(interval.end).getTime();
+
+  // Throw an exception if start date is after end date or if any date is `Invalid Date`
+  if (!(startTime <= endTime)) {
+    throw new RangeError('Invalid interval');
+  }
+  return time >= startTime && time <= endTime;
+}
+
+const DEFAULT_LANGUAGE$1 = 'en';
+const SUPPORTED_LANGUAGES$1 = ['ro', 'en', 'fr', 'ar', 'hr'];
+const TRANSLATIONS$1 = {
+    en: {
+        stop: 'Stop',
+        at: 'at',
+        turnover: 'Turnover: ',
+        start: 'Sales Start',
+        in: 'in'
+    },
+    ro: {
+        stop: 'Oprește',
+        at: 'la'
+    },
+    fr: {
+        stop: 'Arrêtez',
+        at: 'à'
+    },
+    ar: {
+        stop: 'توقف',
+        at: 'في'
+    },
+    hr: {
+        stop: 'Stop',
+        at: 'u'
+    }
+};
+const translate$1 = (key, customLang) => {
+    const lang = customLang;
+    return TRANSLATIONS$1[lang !== undefined && SUPPORTED_LANGUAGES$1.includes(lang) ? lang : DEFAULT_LANGUAGE$1][key];
+};
+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 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 formatTime(time) {
+    if (!time)
+        return;
+    if (isToday(new Date(time))) {
+        return formatDate({ date: time, format: 'HH:mm' });
+    }
+    return formatDate({ date: time, format: 'dd/MM/yyyy HH:mm' });
+}
+function formatCountdown(stopTime, _now) {
+    if (!stopTime)
+        return;
+    const endTime = typeof stopTime === 'string' ? parseISO(stopTime) : stopTime;
+    const now = _now && new Date();
+    let totalSeconds = differenceInSeconds(endTime, now);
+    if (totalSeconds < 0)
+        return '0D 00H 00M 00S';
+    const days = Math.floor(totalSeconds / 86400);
+    totalSeconds %= 86400;
+    const hours = Math.floor(totalSeconds / 3600);
+    totalSeconds %= 3600;
+    const minutes = Math.floor(totalSeconds / 60);
+    const seconds = totalSeconds % 60;
+    return `${days}D ${hours.toString().padStart(2, '0')}H ${minutes.toString().padStart(2, '0')}M ${seconds
+        .toString()
+        .padStart(2, '0')}S`;
+}
+function getWagerTime(startTime, stopTime) {
+    const now = new Date();
+    if (startTime && isBefore(now, parseISO(startTime))) {
+        return { start: formatCountdown(startTime, now) };
+    }
+    if (startTime &&
+        stopTime &&
+        isWithinInterval(now, {
+            start: parseISO(startTime),
+            end: parseISO(stopTime)
+        })) {
+        return { end: formatTime(stopTime) };
+    }
+    return {};
+}
+
+const lotteryBannerCss = ":host {\n  display: block;\n  container-type: inline-size;\n}\n\n.lottery-banner {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--lottery-banner-gap, 0.5rem);\n  padding: var(--lottery-banner-padding, 0px 20px);\n  background: var(--lottery-banner-background, var(--emw--color-primary, #fed275));\n  border-top: var(--lottery-banner-border-width, 2px) var(--lottery-banner-border-style, solid) var(--lottery-banner-border-color, var(--emw--color-primary, #fed275));\n  border-bottom: var(--lottery-banner-border-width, 2px) var(--lottery-banner-border-style, solid) var(--lottery-banner-border-color, var(--emw--color-primary, #fed275));\n  border-left: var(--lottery-banner-border-left, none);\n  border-right: var(--lottery-banner-border-right, none);\n  border-radius: var(--lottery-banner-border-radius, 0);\n  white-space: nowrap;\n  height: var(--lottery-banner-height, 50px);\n  position: relative;\n  box-sizing: border-box;\n}\n\n.lottery-banner__logo-wrapper {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n}\n.lottery-banner__logo-wrapper img {\n  height: 100%;\n  object-fit: var(--lottery-banner-logo-object-fit, contain);\n}\n\n.lottery-banner__item--center {\n  position: absolute;\n  left: 50%;\n  top: 50%;\n  transform: translate(-50%, -50%);\n}\n\n.lottery-banner__title {\n  text-align: center;\n  font-size: var(--lottery-banner-title-font-size, 1.5rem);\n  font-weight: 800;\n  font-style: italic;\n  letter-spacing: var(--lottery-banner-title-font-letter-spacing, 0.04em);\n  color: var(--emw--color-typography, #000);\n}\n\n.lottery-banner__info {\n  display: flex;\n  align-items: center;\n  gap: var(--lottery-banner-info-gap, 0.75rem);\n}\n\n.lottery-banner__info-item {\n  font-size: var(--lottery-banner-info-font-size, 0.9rem);\n  color: var(--lottery-banner-info-color, var(--emw--color-typography, #000));\n  display: inline-flex;\n  align-items: center;\n  gap: 0.3rem;\n}\n\n.lottery-banner__info-item-label {\n  color: var(--lottery-banner-info-label-color, var(--emw--color-typography, #000));\n}\n.lottery-banner__info-item-label__strong {\n  font-weight: var(--lottery-banner-info-label-font-weight, 700);\n}\n\n.lottery-banner__info-item-value {\n  font-weight: var(--lottery-banner-info-value-font-weight, inherit);\n  color: var(--lottery-banner-info-value-color, var(--emw--color-typography, #000));\n}\n\n@container (max-width: 700px) {\n  .lottery-banner {\n    height: auto;\n    padding: var(--lottery-banner-mobile-padding, 0.5rem 1rem);\n  }\n  .lottery-banner__title {\n    flex-basis: 100%;\n    text-align: var(--lottery-banner-mobile-title-text-align, left);\n  }\n  .lottery-banner__info {\n    flex-direction: column;\n    align-items: flex-start;\n    gap: var(--lottery-banner-mobile-info-gap, 0.1rem);\n  }\n}";
+const LotteryBannerStyle0 = lotteryBannerCss;
+
+const LotteryBanner = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.lotteryBannerTimerStop = createEvent(this, "lotteryBannerTimerStop", 7);
+        this.mbSource = undefined;
+        this.clientStyling = undefined;
+        this.clientStylingUrl = undefined;
+        this.translationUrl = '';
+        this.language = 'en';
+        this.logoUrl = undefined;
+        this.stopTime = '';
+        this.startTime = '';
+        this.bannerTitle = undefined;
+        this.turnover = undefined;
+        this.layout = 'logo,title,info';
+        this.formattedTime = 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`, this.stylingSubscription);
+        }
+    }
+    handleTimeChange() {
+        this.startTimer();
+    }
+    async componentWillLoad() {
+        if (this.translationUrl) {
+            resolveTranslationUrl$1(this.translationUrl);
+        }
+        this.startTimer();
+    }
+    startTimer() {
+        if (this.timer) {
+            clearInterval(this.timer);
+        }
+        this.updateTime();
+        this.timer = setInterval(() => {
+            this.updateTime();
+        }, 1000);
+    }
+    updateTime() {
+        var _a;
+        this.formattedTime = getWagerTime(this.startTime, this.stopTime);
+        if ((_a = this.formattedTime) === null || _a === void 0 ? void 0 : _a.end) {
+            this.timer && clearInterval(this.timer);
+            this.lotteryBannerTimerStop.emit();
+        }
+    }
+    componentDidLoad() {
+        if (this.stylingContainer) {
+            if (this.mbSource)
+                setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`, this.stylingSubscription);
+            if (this.clientStyling)
+                setClientStyling(this.stylingContainer, this.clientStyling);
+            if (this.clientStylingUrl)
+                setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
+        }
+    }
+    disconnectedCallback() {
+        this.stylingSubscription && this.stylingSubscription.unsubscribe();
+        this.timer && clearInterval(this.timer);
+    }
+    renderElement(item, className = '') {
+        var _a, _b;
+        switch (item) {
+            case 'logo':
+                return (h("div", { class: `lottery-banner__logo-wrapper ${className}` }, this.logoUrl && h("img", { alt: "logo", src: this.logoUrl, class: "lottery-banner__logo" })));
+            case 'title':
+                return this.bannerTitle && h("div", { class: `lottery-banner__title ${className}` }, this.bannerTitle);
+            case 'info':
+                return (h("div", { class: `lottery-banner__info ${className}` }, ((_a = this.formattedTime) === null || _a === void 0 ? void 0 : _a.start) && (h("div", { class: "lottery-banner__info-item" }, h("span", { class: "lottery-banner__info-item-label" }, h("span", { class: "lottery-banner__info-item-label__strong" }, translate$1('start', this.language)), "\u00A0", translate$1('in', this.language)), h("span", { class: "lottery-banner__info-item-value" }, this.formattedTime.start))), ((_b = this.formattedTime) === null || _b === void 0 ? void 0 : _b.end) && (h("div", { class: "lottery-banner__info-item" }, h("span", { class: "lottery-banner__info-item-label" }, h("span", { class: "lottery-banner__info-item-label__strong" }, translate$1('stop', this.language)), "\u00A0", translate$1('at', this.language)), h("span", { class: "lottery-banner__info-item-value" }, this.formattedTime.end))), this.turnover !== null && this.turnover !== undefined && (h("div", { class: "lottery-banner__info-item" }, h("span", { class: "lottery-banner__info-item-label" }, translate$1('turnover', this.language)), h("span", { class: "lottery-banner__info-item-value" }, this.turnover)))));
+            default:
+                return null;
+        }
+    }
+    render() {
+        const layoutItems = this.layout.split(',').map((item) => item.trim());
+        return (h("section", { key: '058aa04a8104d393f6066fd2738fb33cb6d832a2', ref: (el) => (this.stylingContainer = el), class: "lottery-banner" }, layoutItems.map((item, index) => {
+            const isMiddle = layoutItems.length === 3 && index === 1;
+            const className = isMiddle ? 'lottery-banner__item--center' : '';
+            return this.renderElement(item, className);
+        })));
+    }
+    static get watchers() { return {
+        "clientStyling": ["handleClientStylingChange"],
+        "clientStylingUrl": ["handleClientStylingUrlChange"],
+        "mbSource": ["handleMbSourceChange"],
+        "startTime": ["handleTimeChange"],
+        "stopTime": ["handleTimeChange"]
+    }; }
+};
+LotteryBanner.style = LotteryBannerStyle0;
 
 // This icon file is generated automatically.
 var ArrowUpOutlined = { "icon": { "tag": "svg", "attrs": { "viewBox": "64 64 896 896", "focusable": "false" }, "children": [{ "tag": "path", "attrs": { "d": "M868 545.5L536.1 163a31.96 31.96 0 00-48.3 0L156 545.5a7.97 7.97 0 006 13.2h81c4.6 0 9-2 12.1-5.5L474 300.9V864c0 4.4 3.6 8 8 8h60c4.4 0 8-3.6 8-8V300.9l218.9 252.3c3 3.5 7.4 5.5 12.1 5.5h81c6.8 0 10.5-8 6-13.2z" } }] }, "name": "arrow-up", "theme": "outlined" };
@@ -307,7 +679,7 @@ const LotteryOddsbomOddschart = class {
             if (values.length != 2 * this.matchInfo.length) {
                 showNotification({
                     theme: 'warning',
-                    message: translate$1('pleaseFillIn', this.language)
+                    message: translate$2('pleaseFillIn', this.language)
                 });
                 return;
             }
@@ -420,7 +792,7 @@ const LotteryOddsbomOddschart = class {
     }
     componentWillLoad() {
         if (this.translationUrl) {
-            resolveTranslationUrl$1(this.translationUrl);
+            resolveTranslationUrl$2(this.translationUrl);
         }
     }
     componentDidLoad() {
@@ -453,7 +825,7 @@ const LotteryOddsbomOddschart = class {
         return (h("div", { class: "oddsbom-oddschart-selection--group", onClick: this.handleGroupClick.bind(this, groupIndex) }, h("div", { class: "oddsbom-oddschart-selection--group-wrap", style: { flexBasis: `${160 * group.length}px` } }, group.map((item, index) => {
             const selection = item.split(':');
             return (h("div", { class: "oddsbom-oddschart-selection-item", key: index }, h("div", { class: "oddsbom-oddschart-selection-item--1" }, h("lottery-oddsbom-bullet", { text: selection[0], "is-reading": true, "is-selected": isSelected })), h("div", { class: "oddsbom-oddschart-selection-item--2" }, h("lottery-oddsbom-bullet", { text: selection[1], "is-reading": true, "is-selected": isSelected }))));
-        })), h("div", { class: "oddsbom-oddschart-selection-odds" }, h("div", { class: "oddsbom-oddschart-selection-odds--text" }, formatNumber(odds)), isSelected && (h("div", { class: "oddsbom-oddschart-selection-odds--fillIn" }, h("lottery-oddsbom-ticket-button", { text: translate$1('fillIn', this.language), size: "small", variant: "outline", onClick: this.handleFillIn.bind(this, group), language: this.language, "translation-url": this.translationUrl, "client-styling": this.clientStyling, "client-styling-Url": this.clientStylingUrl }))))));
+        })), h("div", { class: "oddsbom-oddschart-selection-odds" }, h("div", { class: "oddsbom-oddschart-selection-odds--text" }, formatNumber(odds)), isSelected && (h("div", { class: "oddsbom-oddschart-selection-odds--fillIn" }, h("lottery-oddsbom-ticket-button", { text: translate$2('fillIn', this.language), size: "small", variant: "outline", onClick: this.handleFillIn.bind(this, group), language: this.language, "translation-url": this.translationUrl, "client-styling": this.clientStyling, "client-styling-Url": this.clientStylingUrl }))))));
     }
     handleFillIn(nums) {
         this.oddschartFillInEvent.emit({ fillInNums: nums });
@@ -476,13 +848,13 @@ const LotteryOddsbomOddschart = class {
     }
     render() {
         var _a, _b;
-        return (h("div", { key: 'b160d1870184937cdd013a233a4841545d8f769a', class: "oddsbom-oddschart", ref: (el) => (this.stylingContainer = el) }, !((_a = this.matchInfo) === null || _a === void 0 ? void 0 : _a.length) || !((_b = this.oddsInfo) === null || _b === void 0 ? void 0 : _b.length) ? (h("div", { class: "empty-wrap" }, h("span", { innerHTML: infoIcon, style: { marginRight: '6px', height: '18px' } }), h("span", { class: "empty-wrap-text", style: { fontSize: '18px' } }, translate$1('noBets', this.language)))) : (this.matchInfo && (h("div", { class: "oddsbom-oddschart-container" }, h("div", { class: "oddsbom-oddschart-wrap" }, h("div", { class: "oddsbom-oddschart-match", ref: (el) => (this.matchItemsContainer = el) }, this.matchInfo.map((match, idx) => {
+        return (h("div", { key: 'e7c7c883ae3e911cb828a7076e0cb9fa73ddd2af', class: "oddsbom-oddschart", ref: (el) => (this.stylingContainer = el) }, !((_a = this.matchInfo) === null || _a === void 0 ? void 0 : _a.length) || !((_b = this.oddsInfo) === null || _b === void 0 ? void 0 : _b.length) ? (h("div", { class: "empty-wrap" }, h("span", { innerHTML: infoIcon, style: { marginRight: '6px', height: '18px' } }), h("span", { class: "empty-wrap-text", style: { fontSize: '18px' } }, translate$2('noBets', this.language)))) : (this.matchInfo && (h("div", { class: "oddsbom-oddschart-container" }, h("div", { class: "oddsbom-oddschart-wrap" }, h("div", { class: "oddsbom-oddschart-match", ref: (el) => (this.matchItemsContainer = el) }, this.matchInfo.map((match, idx) => {
             return (h("div", { class: "oddsbom-oddschart-match-item", key: idx }, h("div", { class: "oddsbom-oddschart-match-item-name" }, h("div", { class: "oddsbom-oddschart-match-item-name--home" }, `${idx + 1}. ${match.eventName.split('vs')[0]}`), h("div", { class: "oddsbom-oddschart-match-item-name--delimiter" }, "vs"), h("div", { class: "oddsbom-oddschart-match-item-name--away" }, `${match.eventName.split('vs')[1]}`)), h("div", { class: "oddsbom-oddschart-match-item-input" }, h("lottery-oddsbom-oddschart-input", null), h("lottery-oddsbom-oddschart-input", null))));
-        }), h("div", { class: "oddsbom-oddschart-match-search" }, h("lottery-oddsbom-ticket-button", { text: translate$1('search', this.language), variant: "outline", onClick: this.handleSearch }))), this.hasFillInSelection &&
+        }), h("div", { class: "oddsbom-oddschart-match-search" }, h("lottery-oddsbom-ticket-button", { text: translate$2('search', this.language), variant: "outline", onClick: this.handleSearch }))), this.hasFillInSelection &&
             !this.isSearching &&
             (this.filterdOdds ? (h("div", { class: "oddsbom-oddschart-input-wrap" }, h("div", { class: "oddsbom-oddschart-input" }, this.matchSelection.map((arr) => {
                 return (h("div", { class: "oddsbom-oddschart-input-item" }, h("lottery-oddsbom-bullet", { text: arr[0], "is-reading": true, "is-selected": true }), h("lottery-oddsbom-bullet", { text: arr[1], "is-reading": true, "is-selected": true })));
-            }), h("div", { class: "oddsbom-oddschart-input-odds" }, formatNumber(this.filterdOdds))), h("div", { class: "oddsbom-oddschart-input-operation" }, h("lottery-oddsbom-ticket-button", { text: translate$1('clear', this.language), variant: "outline", size: "small", onClick: this.clearMatchSelection.bind(this) }), h("lottery-oddsbom-ticket-button", { text: translate$1('fillIn', this.language), variant: "outline", size: "small", onClick: this.fillInMatchSelection.bind(this) })))) : (h("div", { class: "oddsbom-oddschart-input-empty" }, h("div", null, h("span", { innerHTML: infoIcon1, style: { marginRight: '6px', height: '16px' } }), h("span", { style: { fontSize: '14px' } }, translate$1('noBets', this.language))), h("div", { class: "oddsbom-oddschart-input-empty-operation" }, h("lottery-oddsbom-ticket-button", { text: translate$1('clear', this.language), variant: "text", size: "small", onClick: this.clearMatchSelection.bind(this) }), h("lottery-oddsbom-ticket-button", { text: translate$1('fillIn', this.language), variant: "text", size: "small", onClick: this.fillInMatchSelection.bind(this) }))))), h("div", { class: "oddsbom-oddschart-match-filter" }, (this.isLoading || this.isSearching) && h("div", { class: "progress-bar" }), h("span", { onClick: this.toggleFilterIcon, class: `arrow ${this.isAscend ? 'ascend' : ''}`, innerHTML: upIcon })), h("div", { class: "oddsbom-oddschart-selection" }, this.oddsInfo.map((oddsItem, idx) => {
+            }), h("div", { class: "oddsbom-oddschart-input-odds" }, formatNumber(this.filterdOdds))), h("div", { class: "oddsbom-oddschart-input-operation" }, h("lottery-oddsbom-ticket-button", { text: translate$2('clear', this.language), variant: "outline", size: "small", onClick: this.clearMatchSelection.bind(this) }), h("lottery-oddsbom-ticket-button", { text: translate$2('fillIn', this.language), variant: "outline", size: "small", onClick: this.fillInMatchSelection.bind(this) })))) : (h("div", { class: "oddsbom-oddschart-input-empty" }, h("div", null, h("span", { innerHTML: infoIcon1, style: { marginRight: '6px', height: '16px' } }), h("span", { style: { fontSize: '14px' } }, translate$2('noBets', this.language))), h("div", { class: "oddsbom-oddschart-input-empty-operation" }, h("lottery-oddsbom-ticket-button", { text: translate$2('clear', this.language), variant: "text", size: "small", onClick: this.clearMatchSelection.bind(this) }), h("lottery-oddsbom-ticket-button", { text: translate$2('fillIn', this.language), variant: "text", size: "small", onClick: this.fillInMatchSelection.bind(this) }))))), h("div", { class: "oddsbom-oddschart-match-filter" }, (this.isLoading || this.isSearching) && h("div", { class: "progress-bar" }), h("span", { onClick: this.toggleFilterIcon, class: `arrow ${this.isAscend ? 'ascend' : ''}`, innerHTML: upIcon })), h("div", { class: "oddsbom-oddschart-selection" }, this.oddsInfo.map((oddsItem, idx) => {
             return this.generateBulletGroup(oddsItem.lineSelection, oddsItem.odds, idx);
         })), h("div", { class: "oddsbom-oddschart-pagination" }, h("div", { class: "oddsbom-oddschart-pagination-wrap" }, h("div", { class: `oddsbom-oddschart-pagination-prev ${this.curPage < 1 ? 'disabled' : ''}`, onClick: this.handlePrevPage }, h("div", { class: "oddsbom-oddschart-pagination-icon", innerHTML: leftArrowIcon })), h("div", { class: "oddsbom-oddschart-pagination-page" }, `${this.curPage + 1} / ${this.totalPage}`), h("div", { class: `oddsbom-oddschart-pagination-next ${this.curPage >= this.totalPage - 1 ? 'disabled' : ''}`, onClick: this.handleNextPage }, h("div", { class: "oddsbom-oddschart-pagination-icon", innerHTML: rightArrowIcon }))))))))));
     }
@@ -555,7 +927,7 @@ const LotteryOddsbomOddschartInput = class {
         this.stylingSubscription && this.stylingSubscription.unsubscribe();
     }
     render() {
-        return (h("div", { key: 'eb973f7978b7452788f72a43da5424abbe845361', class: "oddscharts-input", ref: (el) => (this.stylingContainer = el) }, h("input", { key: 'f24fba10175b944af328b71f8e257d8ad1386af2', ref: (el) => (this.inputElement = el), type: "text", inputMode: "numeric", value: this.value, onInput: this.handleInputChange, onKeyDown: this.handleKeyDown, autocomplete: "one-time-code" })));
+        return (h("div", { key: '027256f6e35e605b7a9afb83e81a099343615f96', class: "oddscharts-input", ref: (el) => (this.stylingContainer = el) }, h("input", { key: 'fc8e961ee6701f8bb57349c9ead508af2d2b448f', ref: (el) => (this.inputElement = el), type: "text", inputMode: "numeric", value: this.value, onInput: this.handleInputChange, onKeyDown: this.handleKeyDown, autocomplete: "one-time-code" })));
     }
     static get watchers() { return {
         "clientStyling": ["handleClientStylingChange"],
@@ -608,7 +980,7 @@ const LotteryOddsbomTicketBoard = class {
     }
     componentWillLoad() {
         if (this.translationUrl) {
-            getTranslations$1(JSON.parse(this.translationUrl));
+            getTranslations$2(JSON.parse(this.translationUrl));
         }
     }
     handleOddsbomBulletGroupToggle(event) {
@@ -638,18 +1010,18 @@ const LotteryOddsbomTicketBoard = class {
     }
     handleClearAllSelection() {
         this.oddsbomBoardClearEvent.emit();
-        showNotification({ message: translate$1('selectionCleared', this.language), renderOne: true });
+        showNotification({ message: translate$2('selectionCleared', this.language), renderOne: true });
     }
     validateInput(value) {
         const numValue = Number(value);
         if (isNaN(numValue)) {
             this.isInputInvalid = true;
-            this.errorMessage = translate$1('enterValidNumber', this.language);
+            this.errorMessage = translate$2('enterValidNumber', this.language);
             return;
         }
         if (numValue < MAX_DISPLAY_OPTION_NUM || numValue > this.addSelectionConfig.maxScore) {
             this.isInputInvalid = true;
-            this.errorMessage = translate$1('enterNumberBetween', this.language, {
+            this.errorMessage = translate$2('enterNumberBetween', this.language, {
                 min: MAX_DISPLAY_OPTION_NUM,
                 max: this.addSelectionConfig.maxScore
             });
@@ -659,7 +1031,7 @@ const LotteryOddsbomTicketBoard = class {
         const selections = this.ticketBoardInfo[matchIdx].addSelections[selectionIdx];
         if (selections.some((s) => Number(s) === Number(value))) {
             this.isInputInvalid = true;
-            this.errorMessage = translate$1('numberAlreadySelected', this.language);
+            this.errorMessage = translate$2('numberAlreadySelected', this.language);
             return;
         }
         this.isInputInvalid = false;
@@ -685,14 +1057,14 @@ const LotteryOddsbomTicketBoard = class {
         this.stylingSubscription && this.stylingSubscription.unsubscribe();
     }
     render() {
-        return (h("div", { key: '58b83bb2222b715e093fae83b28488e9aadbbbd9', class: "oddsbomTicketBoard", ref: (el) => (this.stylingContainer = el) }, h("div", { key: '713493a9e82abf4585f911f91757180cdea7f212', class: "oddsbomTicketBoard-btn" }, h("lottery-oddsbom-ticket-button", { key: '7277db6f5372d2775bf30b69540f090e8076192c', onClick: this.handleClearAllSelection.bind(this), text: translate$1('clearAll', this.language), variant: "outline" })), this.ticketBoardInfo.length ? (h("div", { class: "oddsbomTicketBoard-list" }, this.ticketBoardInfo.map((item, idx) => {
+        return (h("div", { key: 'e5ca4eb7ad8945ab24c8fd400b0b7704bdb69f6e', class: "oddsbomTicketBoard", ref: (el) => (this.stylingContainer = el) }, h("div", { key: '5cf3ab87b72e81a169ffbe65084e86b38cb76ef3', class: "oddsbomTicketBoard-btn" }, h("lottery-oddsbom-ticket-button", { key: 'd8ebcd3faf085333b94d8a61b10c274a075b0d8a', onClick: this.handleClearAllSelection.bind(this), text: translate$2('clearAll', this.language), variant: "outline" })), this.ticketBoardInfo.length ? (h("div", { class: "oddsbomTicketBoard-list" }, this.ticketBoardInfo.map((item, idx) => {
             return (h("div", { class: "oddsbomTicketBoard-item" }, h("div", { class: "oddsbomTicketBoard-item-header" }, `${idx + 1}. ${item.matchName}`), h("div", { class: "oddsbomTicketBoard-item-match" }, h("div", { class: "oddsbomTicketBoard-item-match--left" }, item.matchName.split('vs')[0]), h("div", { class: "oddsbomTicketBoard-item-match--right" }, h("lottery-oddsbom-bullet-group", { bulletConfigs: item.selections[0], selectionIdx: 0, matchIdx: idx, addSelectionConfig: this.addSelectionConfig }))), h("div", { class: "oddsbomTicketBoard-item-match" }, h("div", { class: "oddsbomTicketBoard-item-match--left" }, item.matchName.split('vs')[1]), h("div", { class: "oddsbomTicketBoard-item-match--right" }, h("lottery-oddsbom-bullet-group", { bulletConfigs: item.selections[1], selectionIdx: 1, matchIdx: idx, addSelectionConfig: this.addSelectionConfig })))));
-        }))) : (h("div", { class: "oddsbomTicketBoard-noData" }, translate$1('noTicketBoard', this.language))), h("lottery-tipping-dialog", { key: '23b77482869ae9d539281279f897a5e421a23611', visible: this.dialogConfig.visible, width: this.dialogConfig.width, onCancel: this.handleCloseAddMoreDialog.bind(this) }, h("div", { key: 'aaa92cd6b0fff37031040e04083c826e642ec0f1', class: "addSelectionDialog" }, h("div", { key: '8f52ac9acb648171638061d049892085cf5f648f', class: "addSelectionDialog-title" }, translate$1('enterScoreUpTo', this.language, {
+        }))) : (h("div", { class: "oddsbomTicketBoard-noData" }, translate$2('noTicketBoard', this.language))), h("lottery-tipping-dialog", { key: 'd70640fde439f49c4234b144c25c8a71486477d2', visible: this.dialogConfig.visible, width: this.dialogConfig.width, onCancel: this.handleCloseAddMoreDialog.bind(this) }, h("div", { key: '8f6f15ec60cde94c4074e4b4d8c966e26608e577', class: "addSelectionDialog" }, h("div", { key: '8a78285c454dd4414d167a4ea913df7040646c81', class: "addSelectionDialog-title" }, translate$2('enterScoreUpTo', this.language, {
             maxScore: this.addSelectionConfig.maxScore
-        })), h("input", { key: '50db2d0d62fddabbf92c75f044635babfb102e00', type: "text", class: {
+        })), h("input", { key: '0a9139c2beb9627e14fa811f46f552a0e9a07af0', type: "text", class: {
                 'dialog-input': true,
                 invalid: this.isInputInvalid
-            }, value: this.curAddMoreInfo.value, onInput: this.handleInputChange.bind(this) }), h("div", { key: '710aacdcd1589af9ec50485f637744199807427c', class: "error-message" }, this.errorMessage)), h("div", { key: '9c9ce1cbae02a5723d5261862e930afc3613b567', slot: "footer", class: "addSelectionDialog-footer" }, h("lottery-oddsbom-ticket-button", { key: 'fa4e9d024929f0485ea2099515a1b6b93eabf6b8', onClick: this.dialogConfig.onCancel, text: translate$1('cancel', this.language), variant: "outline" }), h("lottery-oddsbom-ticket-button", { key: '91c1c08b3183d1c328fcc9d79ceda4ba0039f1c3', onClick: this.dialogConfig.onConfirm, text: translate$1('confirm', this.language), variant: "primary", disabled: !this.curAddMoreInfo.value || this.isInputInvalid })))));
+            }, value: this.curAddMoreInfo.value, onInput: this.handleInputChange.bind(this) }), h("div", { key: 'b537f8fd54aa70e043a1e319a4aabef85e8e458a', class: "error-message" }, this.errorMessage)), h("div", { key: '8aa06cf57c03e73fd9c4cead9670d9f8a539d4ca', slot: "footer", class: "addSelectionDialog-footer" }, h("lottery-oddsbom-ticket-button", { key: '9db45725204f7fb16407adbdc7ee77f88c2a2dc8', onClick: this.dialogConfig.onCancel, text: translate$2('cancel', this.language), variant: "outline" }), h("lottery-oddsbom-ticket-button", { key: '10cc96b0f5bd1ef5431e1347b6a142797113d458', onClick: this.dialogConfig.onConfirm, text: translate$2('confirm', this.language), variant: "primary", disabled: !this.curAddMoreInfo.value || this.isInputInvalid })))));
     }
     static get watchers() { return {
         "clientStyling": ["handleClientStylingChange"],
@@ -761,7 +1133,7 @@ const LotteryOddsbomTicketButton = class {
     }
     componentWillLoad() {
         if (this.translationUrl) {
-            resolveTranslationUrl$1(this.translationUrl);
+            resolveTranslationUrl$2(this.translationUrl);
         }
     }
     render() {
@@ -772,7 +1144,7 @@ const LotteryOddsbomTicketButton = class {
                 [`btn--${variant}`]: true,
                 [`btn--${size}`]: true,
                 'btn--loading': this.loading
-            }, disabled: isDisabled, onClick: this.handleClick }, this.loading ? (h("div", { class: "loading-container" }, h("span", { class: "content" }, this.text || translate$1('loading', this.language)), h("span", { class: "spinner" }))) : (h("span", { class: "content" }, this.text)), h("div", { key: '8276ad215063ef4217b11f65fb189d6fcccd1f24', class: "ripple-container" }, this.ripples.map((ripple, index) => (h("span", { key: index, class: "ripple", style: {
+            }, disabled: isDisabled, onClick: this.handleClick }, this.loading ? (h("div", { class: "loading-container" }, h("span", { class: "content" }, this.text || translate$2('loading', this.language)), h("span", { class: "spinner" }))) : (h("span", { class: "content" }, this.text)), h("div", { key: '8276ad215063ef4217b11f65fb189d6fcccd1f24', class: "ripple-container" }, this.ripples.map((ripple, index) => (h("span", { key: index, class: "ripple", style: {
                 top: `${ripple.top}px`,
                 left: `${ripple.left}px`,
                 width: `${ripple.size}px`,
@@ -884,7 +1256,7 @@ const LotteryOddsbomTicketSelection = class {
         });
     }
     render() {
-        return (h("div", { key: '8e359b773654d6a1632f69837009ccc29d547561', class: "oddsbomSelection", ref: (el) => (this.stylingContainer = el) }, h("div", { key: '93c2575de9e70759118f4d4702f356322c2bcb88', class: "oddsbomSelection-panel" }, h("div", { key: '2df0bf1be465b9baa00f44052c623071f78d799d', class: "oddsbomSelection-panel--header", onClick: this.togglePanel }, h("div", { key: 'c32a79afcab02f683ffb8abc26395e098b080939', class: "oddsbomSelection-panel--header-title" }, translate$1('myChoices', this.language)), h("div", { key: 'de2b875b0fc538212d15cb7dde2c95b10d49665a', class: `oddsbomSelection-panel--header-icon ${this.expanded ? 'expanded' : ''}`, innerHTML: downIcon })), h("div", { key: '4a51e00f8ab67d9ab6c1cfd25d47f93c79d7a4bf', class: `oddsbomSelection-panel--content ${this.expanded ? 'open' : 'closed'}` }, h("div", { key: '9f9575c3bb176769cee836c9cf027fc76580b367', class: "oddsbomSelection-panel--content-thead" }, h("div", { key: '3dd762c94c915afc9f14b38fdaec73a42b56004e', class: "oddsbomSelection-panel--content-thead-item" }, translate$1('teams', this.language)), h("div", { key: '2ea960a6db72e11a7e9157871f70769174f722f0', class: "oddsbomSelection-panel--content-thead-item" }, translate$1('scores', this.language))), h("div", { key: '847ef04f0a9e289c796a856c3d16bebc83d2d188', class: "oddsbomSelection-panel--content-tbody" }, this.generateSelectionList())))));
+        return (h("div", { key: '79091bce57ba35ef7a7758daeae94b9847eb712d', class: "oddsbomSelection", ref: (el) => (this.stylingContainer = el) }, h("div", { key: 'a4913e648d8deb508c68360d572d26b98843f0c5', class: "oddsbomSelection-panel" }, h("div", { key: 'fd6b9551dddd71f5eed648dc1ab8bbf6aeb8a92f', class: "oddsbomSelection-panel--header", onClick: this.togglePanel }, h("div", { key: '88930dc74331ca9f6edec7a23c8d42cf9ca9a0e4', class: "oddsbomSelection-panel--header-title" }, translate$2('myChoices', this.language)), h("div", { key: '94b2bd032ea3b9ebcb9e406e74a52a4d1c55a67f', class: `oddsbomSelection-panel--header-icon ${this.expanded ? 'expanded' : ''}`, innerHTML: downIcon })), h("div", { key: 'cf337fd2477ae140c6d7898f7742c326164f7282', class: `oddsbomSelection-panel--content ${this.expanded ? 'open' : 'closed'}` }, h("div", { key: '8dd02d79a4254278b415ec11bdd1906940cb6074', class: "oddsbomSelection-panel--content-thead" }, h("div", { key: '113407e0f9ee69d449202ab1065623187bce2fbe', class: "oddsbomSelection-panel--content-thead-item" }, translate$2('teams', this.language)), h("div", { key: 'fe38c2ad17fdea759f48938742808e622c4076be', class: "oddsbomSelection-panel--content-thead-item" }, translate$2('scores', this.language))), h("div", { key: 'a750c174d5ac53bc77346907828a4bdc96f60e32', class: "oddsbomSelection-panel--content-tbody" }, this.generateSelectionList())))));
     }
     static get watchers() { return {
         "clientStyling": ["handleClientStylingChange"],
@@ -1052,4 +1424,4 @@ const LotteryTippingDialog = class {
 };
 LotteryTippingDialog.style = LotteryTippingDialogStyle0;
 
-export { LotteryOddsbomBullet as lottery_oddsbom_bullet, LotteryOddsbomBulletGroup as lottery_oddsbom_bullet_group, LotteryOddsbomOddschart as lottery_oddsbom_oddschart, LotteryOddsbomOddschartInput as lottery_oddsbom_oddschart_input, LotteryOddsbomTicketBoard as lottery_oddsbom_ticket_board, LotteryOddsbomTicketButton as lottery_oddsbom_ticket_button, LotteryOddsbomTicketSelection as lottery_oddsbom_ticket_selection, LotteryTippingDialog as lottery_tipping_dialog };
+export { LotteryBanner as lottery_banner, LotteryOddsbomBullet as lottery_oddsbom_bullet, LotteryOddsbomBulletGroup as lottery_oddsbom_bullet_group, LotteryOddsbomOddschart as lottery_oddsbom_oddschart, LotteryOddsbomOddschartInput as lottery_oddsbom_oddschart_input, LotteryOddsbomTicketBoard as lottery_oddsbom_ticket_board, LotteryOddsbomTicketButton as lottery_oddsbom_ticket_button, LotteryOddsbomTicketSelection as lottery_oddsbom_ticket_selection, LotteryTippingDialog as lottery_tipping_dialog };