@everymatrix/lottery-tipping-page 1.94.4 → 1.94.6

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

@@ -235,59 +235,6 @@ const GeneralTooltip = class {
 };
 GeneralTooltip.style = GeneralTooltipStyle0;
 
-const DEFAULT_LANGUAGE$5 = 'en';
-const SUPPORTED_LANGUAGES$5 = ['ro', 'en', 'fr', 'ar', 'hr'];
-const TRANSLATIONS$5 = {
-    en: {
-        stop: 'Stop',
-        at: 'at',
-        turnover: 'Turnover: ',
-        startIn: 'Sales Start in:',
-    },
-    ro: {
-        stop: 'Oprește',
-        at: 'la'
-    },
-    fr: {
-        stop: 'Arrêtez',
-        at: 'à'
-    },
-    ar: {
-        stop: 'توقف',
-        at: 'في'
-    },
-    hr: {
-        stop: 'Stop',
-        at: 'u'
-    }
-};
-const translate$5 = (key, customLang) => {
-    const lang = customLang;
-    return TRANSLATIONS$5[lang !== undefined && SUPPORTED_LANGUAGES$5.includes(lang) ? lang : DEFAULT_LANGUAGE$5][key];
-};
-const getTranslations$5 = (data) => {
-    Object.keys(data).forEach((item) => {
-        for (let key in data[item]) {
-            TRANSLATIONS$5[item][key] = data[item][key];
-        }
-    });
-};
-const resolveTranslationUrl$3 = 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$5(translations);
-        }
-        catch (error) {
-            console.error('Failed to fetch or parse translations from URL:', error);
-        }
-    }
-};
-
 function _typeof(o) {
   "@babel/helpers - typeof";
 
@@ -413,31 +360,6 @@ function getTimezoneOffsetInMilliseconds(date) {
   return date.getTime() - utcDate.getTime();
 }
 
-/**
- * @name startOfDay
- * @category Day Helpers
- * @summary Return the start of a day for the given date.
- *
- * @description
- * Return the start of a day for the given date.
- * The result will be in the local timezone.
- *
- * @param {Date|Number} date - the original date
- * @returns {Date} the start of a day
- * @throws {TypeError} 1 argument required
- *
- * @example
- * // The start of a day for 2 September 2014 11:55:00:
- * const result = startOfDay(new Date(2014, 8, 2, 11, 55, 0))
- * //=> Tue Sep 02 2014 00:00:00
- */
-function startOfDay(dirtyDate) {
-  requiredArgs(1, arguments);
-  var date = toDate(dirtyDate);
-  date.setHours(0, 0, 0, 0);
-  return date;
-}
-
 /**
  * Days in 1 week.
  *
@@ -467,41 +389,6 @@ var millisecondsInMinute = 60000;
  */
 var millisecondsInHour = 3600000;
 
-/**
- * @name isSameDay
- * @category Day Helpers
- * @summary Are the given dates in the same day (and year and month)?
- *
- * @description
- * Are the given dates in the same day (and year and month)?
- *
- * @param {Date|Number} dateLeft - the first date to check
- * @param {Date|Number} dateRight - the second date to check
- * @returns {Boolean} the dates are in the same day (and year and month)
- * @throws {TypeError} 2 arguments required
- *
- * @example
- * // Are 4 September 06:00:00 and 4 September 18:00:00 in the same day?
- * const result = isSameDay(new Date(2014, 8, 4, 6, 0), new Date(2014, 8, 4, 18, 0))
- * //=> true
- *
- * @example
- * // Are 4 September and 4 October in the same day?
- * const result = isSameDay(new Date(2014, 8, 4), new Date(2014, 9, 4))
- * //=> false
- *
- * @example
- * // Are 4 September, 2014 and 4 September, 2015 in the same day?
- * const result = isSameDay(new Date(2014, 8, 4), new Date(2015, 8, 4))
- * //=> false
- */
-function isSameDay(dirtyDateLeft, dirtyDateRight) {
-  requiredArgs(2, arguments);
-  var dateLeftStartOfDay = startOfDay(dirtyDateLeft);
-  var dateRightStartOfDay = startOfDay(dirtyDateRight);
-  return dateLeftStartOfDay.getTime() === dateRightStartOfDay.getTime();
-}
-
 /**
  * @name isDate
  * @category Common Helpers
@@ -579,77 +466,6 @@ 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();
-}
-
-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 subMilliseconds
  * @category Millisecond Helpers
@@ -2645,106 +2461,53 @@ function cleanEscapedString(input) {
 }
 
 /**
- * @name isBefore
+ * @name isAfter
  * @category Common Helpers
- * @summary Is the first date before the second one?
+ * @summary Is the first date after the second one?
  *
  * @description
- * Is the first date before the second one?
+ * Is the first date after the second one?
  *
- * @param {Date|Number} date - the date that should be before the other one to return true
+ * @param {Date|Number} date - the date that should be after 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
+ * @returns {Boolean} the first date is after 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
+ * // Is 10 July 1989 after 11 February 1987?
+ * const result = isAfter(new Date(1989, 6, 10), new Date(1987, 1, 11))
+ * //=> true
  */
-function isBefore(dirtyDate, dirtyDateToCompare) {
+function isAfter(dirtyDate, dirtyDateToCompare) {
   requiredArgs(2, arguments);
   var date = toDate(dirtyDate);
   var dateToCompare = toDate(dirtyDateToCompare);
-  return date.getTime() < dateToCompare.getTime();
-}
-
-/**
- * @name isToday
- * @category Day Helpers
- * @summary Is the given date today?
- * @pure false
- *
- * @description
- * Is the given date today?
- *
- * > ⚠️ Please note that this function is not present in the FP submodule as
- * > it uses `Date.now()` internally hence impure and can't be safely curried.
- *
- * @param {Date|Number} date - the date to check
- * @returns {Boolean} the date is today
- * @throws {TypeError} 1 argument required
- *
- * @example
- * // If today is 6 October 2014, is 6 October 14:00:00 today?
- * const result = isToday(new Date(2014, 9, 6, 14, 0))
- * //=> true
- */
-function isToday(dirtyDate) {
-  requiredArgs(1, arguments);
-  return isSameDay(dirtyDate, Date.now());
+  return date.getTime() > dateToCompare.getTime();
 }
 
 /**
- * @name isWithinInterval
- * @category Interval Helpers
- * @summary Is the given date within the interval?
+ * @name isBefore
+ * @category Common Helpers
+ * @summary Is the first date before the second one?
  *
  * @description
- * Is the given date within the interval? (Including start and end.)
+ * Is the first date before the second one?
  *
- * @param {Date|Number} date - the date to check
- * @param {Interval} interval - the interval to check
- * @returns {Boolean} the date is within the interval
+ * @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
- * @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)
- * })
+ * // Is 10 July 1989 before 11 February 1987?
+ * const result = isBefore(new Date(1989, 6, 10), new Date(1987, 1, 11))
  * //=> 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) {
+function isBefore(dirtyDate, dirtyDateToCompare) {
   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;
+  var date = toDate(dirtyDate);
+  var dateToCompare = toDate(dirtyDateToCompare);
+  return date.getTime() < dateToCompare.getTime();
 }
 
 /**
@@ -2973,77 +2736,233 @@ function validateTimezone(_hours, minutes) {
   return minutes >= 0 && minutes <= 59;
 }
 
-const formatDate$2 = ({ date, type = 'date', format: format$1 }) => {
-    try {
-        const parsedDate = parseISO(date);
-        if (isNaN(parsedDate.getTime())) {
-            throw new Error(`Invalid date: ${date}`);
+const helperCountDownCss = ":host{display:block}.helper-count-down-container{display:flex;align-items:center}.helper-count-down-prefix{margin-right:4px}.helper-count-down-suffix{margin-left:4px}.helper-count-down-values{display:flex;align-items:center}.helper-count-down-item{display:flex;align-items:center;justify-content:center}.helper-count-down-item-num{font-variant-numeric:tabular-nums}";
+const HelperCountDownStyle0 = helperCountDownCss;
+
+const HelperCountDown = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.countDownChange = index.createEvent(this, "countDownChange", 7);
+        this.countDownFinish = index.createEvent(this, "countDownFinish", 7);
+        this.value = undefined;
+        this.format = 'HH:mm:ss';
+        this.prefix = undefined;
+        this.suffix = undefined;
+        this.mbSource = undefined;
+        this.clientStyling = undefined;
+        this.clientStylingUrl = undefined;
+        this.endTime = undefined;
+        this.timeObj = {
+            day: { str: '00', unit: '' },
+            hour: { str: '00', unit: '' },
+            minute: { str: '00', unit: '' },
+            second: { str: '00', unit: '' }
+        };
+    }
+    handleClientStylingChange(newValue, oldValue) {
+        if (newValue != oldValue) {
+            lotteryTippingPage.setClientStyling(this.stylingContainer, this.clientStyling);
         }
-        if (format$1)
-            return format(parsedDate, format$1);
-        let formatStr = 'dd/MM/yyyy';
-        if (type === 'time') {
-            formatStr = 'dd/MM/yyyy HH:mm:ss';
+    }
+    handleClientStylingUrlChange(newValue, oldValue) {
+        if (newValue != oldValue) {
+            lotteryTippingPage.setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
         }
-        else if (type === 'week') {
-            formatStr = 'ccc dd/MM/yyyy HH:mm:ss';
+    }
+    handleMbSourceChange(newValue, oldValue) {
+        if (newValue != oldValue) {
+            lotteryTippingPage.setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`, this.stylingSubscription);
         }
-        return format(parsedDate, formatStr);
     }
-    catch (error) {
-        console.error('Error formatting date:', error.message);
-        return '';
+    handleValueChange(newValue) {
+        this.setEndTime(newValue);
+        if (newValue) {
+            this.startCountDown();
+        }
+        else {
+            this.clearCountDown();
+        }
+    }
+    componentDidLoad() {
+        if (this.stylingContainer) {
+            if (this.mbSource)
+                lotteryTippingPage.setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`, this.stylingSubscription);
+            if (this.clientStyling)
+                lotteryTippingPage.setClientStyling(this.stylingContainer, this.clientStyling);
+            if (this.clientStylingUrl)
+                lotteryTippingPage.setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
+        }
+        this.setEndTime(this.value);
+        if (this.value)
+            this.startCountDown();
+    }
+    setEndTime(value) {
+        if (typeof value === 'string') {
+            // If it's a string, parse it and get the milliseconds
+            const time = parseISO(value).getTime();
+            this.endTime = isNaN(time) ? null : time;
+        }
+        else {
+            // If it's a number, use it directly
+            this.endTime = value;
+        }
+    }
+    disconnectedCallback() {
+        this.stylingSubscription && this.stylingSubscription.unsubscribe();
+        this.clearCountDown();
+    }
+    startCountDown() {
+        this.clearCountDown();
+        this.tick();
+        this.timer = setInterval(() => {
+            this.tick();
+        }, 1000);
+    }
+    clearCountDown() {
+        if (this.timer) {
+            clearInterval(this.timer);
+            this.timer = null;
+        }
+    }
+    tick() {
+        if (!this.endTime)
+            return;
+        let leftTime = this.endTime - Date.now();
+        if (leftTime <= 0) {
+            leftTime = 0;
+            this.clearCountDown();
+            this.countDownFinish.emit();
+        }
+        const d = Math.floor(leftTime / (1000 * 60 * 60 * 24));
+        const h = Math.floor((leftTime / (1000 * 60 * 60)) % 24);
+        const m = Math.floor((leftTime / 1000 / 60) % 60);
+        const s = Math.floor((leftTime / 1000) % 60);
+        const pad = (n) => (n < 10 ? `0${n}` : `${n}`);
+        this.timeObj = {
+            day: { str: pad(d), unit: 'd' },
+            hour: { str: pad(h), unit: 'h' },
+            minute: { str: pad(m), unit: 'm' },
+            second: { str: pad(s), unit: 's' }
+        };
+        const formatTime = this.getFormatTime();
+        this.countDownChange.emit({ leftTime, formatTime, legalTime: formatTime });
+    }
+    getFormatTime() {
+        return this.format
+            .replace('DD', this.timeObj.day.str)
+            .replace('HH', this.timeObj.hour.str)
+            .replace('mm', this.timeObj.minute.str)
+            .replace('ss', this.timeObj.second.str);
+    }
+    renderItems() {
+        const regex = /(DD|HH|mm|ss)|([\s\S]+?)(?=(DD|HH|mm|ss)|$)/g;
+        const items = [];
+        let match;
+        while ((match = regex.exec(this.format)) !== null) {
+            if (match[1]) {
+                let val = '';
+                switch (match[1]) {
+                    case 'DD':
+                        val = this.timeObj.day.str;
+                        break;
+                    case 'HH':
+                        val = this.timeObj.hour.str;
+                        break;
+                    case 'mm':
+                        val = this.timeObj.minute.str;
+                        break;
+                    case 'ss':
+                        val = this.timeObj.second.str;
+                        break;
+                }
+                items.push({ val, unit: '' });
+            }
+            else if (match[2]) {
+                if (items.length > 0) {
+                    items[items.length - 1].unit = match[2];
+                }
+            }
+        }
+        return items.map((item, index$1) => {
+            return (index.h("div", { key: index$1 + item.unit, class: "helper-count-down-item", part: "item" }, index.h("div", { class: "helper-count-down-item-num" }, item.val), index.h("div", { class: "helper-count-down-item-unit" }, item.unit)));
+        });
     }
+    render() {
+        return (index.h("div", { key: 'b360412e045020b5ac0263c6ca56458f31eedb2c', class: "helper-count-down-container", ref: (el) => (this.stylingContainer = el) }, index.h("slot", { key: 'c72bed87fba869c842407b04e0cbfe038e5b7ea8' }), this.prefix && index.h("div", { key: '8d3ba9d60577421f81bae7bc76f52a774b17e1fe', class: "helper-count-down-prefix" }, this.prefix), index.h("div", { key: '187edf3b8eb6de85efe1a748fd8ef47a68e19611', class: "helper-count-down-values", part: "values" }, this.renderItems()), this.suffix && index.h("div", { key: '3a8e5d9561ecd3f52eff423bd43c8b60a261a17c', class: "helper-count-down-suffix" }, this.suffix)));
+    }
+    static get watchers() { return {
+        "clientStyling": ["handleClientStylingChange"],
+        "clientStylingUrl": ["handleClientStylingUrlChange"],
+        "mbSource": ["handleMbSourceChange"],
+        "value": ["handleValueChange"]
+    }; }
 };
-function formatTime(time) {
-    if (!time)
-        return;
-    if (isToday(new Date(time))) {
-        return formatDate$2({ date: time, format: 'HH:mm' });
+HelperCountDown.style = HelperCountDownStyle0;
+
+const DEFAULT_LANGUAGE$5 = 'en';
+const SUPPORTED_LANGUAGES$5 = ['ro', 'en', 'fr', 'ar', 'hr'];
+const TRANSLATIONS$5 = {
+    en: {
+        stop: 'Stop',
+        at: 'at',
+        turnover: 'Turnover: ',
+        startIn: 'Sales Start in:',
+    },
+    ro: {
+        stop: 'Oprește',
+        at: 'la'
+    },
+    fr: {
+        stop: 'Arrêtez',
+        at: 'à'
+    },
+    ar: {
+        stop: 'توقف',
+        at: 'في'
+    },
+    hr: {
+        stop: 'Stop',
+        at: 'u'
     }
-    return formatDate$2({ 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) };
+};
+const translate$5 = (key, customLang) => {
+    const lang = customLang;
+    return TRANSLATIONS$5[lang !== undefined && SUPPORTED_LANGUAGES$5.includes(lang) ? lang : DEFAULT_LANGUAGE$5][key];
+};
+const getTranslations$5 = (data) => {
+    Object.keys(data).forEach((item) => {
+        for (let key in data[item]) {
+            TRANSLATIONS$5[item][key] = data[item][key];
+        }
+    });
+};
+const resolveTranslationUrl$3 = 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$5(translations);
+        }
+        catch (error) {
+            console.error('Failed to fetch or parse translations from URL:', error);
+        }
     }
-    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.lottery-banner__info-item-value__strong {\n  font-weight: 700;\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 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.lottery-banner__info-item-value__strong {\n  font-weight: 700;\n}\n\nhelper-count-down::part(values) {\n  gap: 8px;\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) {
         index.registerInstance(this, hostRef);
-        this.lotteryBannerTimerStop = index.createEvent(this, "lotteryBannerTimerStop", 7);
+        this.lotteryBannerWagerStarted = index.createEvent(this, "lotteryBannerWagerStarted", 7);
+        this.handleCountdownFinish = () => {
+            this.isWagerStarted = true;
+            this.lotteryBannerWagerStarted.emit();
+        };
         this.mbSource = undefined;
         this.clientStyling = undefined;
         this.clientStylingUrl = undefined;
@@ -3055,7 +2974,8 @@ const LotteryBanner = class {
         this.bannerTitle = undefined;
         this.turnover = undefined;
         this.layout = 'logo,title,info';
-        this.formattedTime = undefined;
+        this.isWagerStarted = false;
+        this.formattedStopTime = undefined;
     }
     handleClientStylingChange(newValue, oldValue) {
         if (newValue !== oldValue) {
@@ -3073,29 +2993,23 @@ const LotteryBanner = class {
         }
     }
     handleTimeChange() {
-        this.startTimer();
+        this.checkWagerStatus();
     }
     async componentWillLoad() {
         if (this.translationUrl) {
             resolveTranslationUrl$3(this.translationUrl);
         }
-        this.startTimer();
+        this.checkWagerStatus();
     }
-    startTimer() {
-        if (this.timer) {
-            clearInterval(this.timer);
+    checkWagerStatus() {
+        if (this.startTime && isBefore(new Date(), parseISO(this.startTime))) {
+            this.isWagerStarted = false;
         }
-        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();
+        else {
+            this.isWagerStarted = true;
+        }
+        if (this.stopTime) {
+            this.formattedStopTime = format(parseISO(this.stopTime), 'dd/MM/yyyy HH:mm');
         }
     }
     componentDidLoad() {
@@ -3110,10 +3024,8 @@ const LotteryBanner = class {
     }
     disconnectedCallback() {
         this.stylingSubscription && this.stylingSubscription.unsubscribe();
-        this.timer && clearInterval(this.timer);
     }
     renderElement(item, className = '') {
-        var _a, _b, _c;
         const poolGameLogo = index.getAssetPath('../static/poolGameLogo.webp');
         switch (item) {
             case 'logo':
@@ -3121,14 +3033,14 @@ const LotteryBanner = class {
             case 'title':
                 return this.bannerTitle && index.h("div", { class: `lottery-banner__title ${className}` }, this.bannerTitle);
             case 'info':
-                return (index.h("div", { class: `lottery-banner__info ${className}` }, ((_a = this.formattedTime) === null || _a === void 0 ? void 0 : _a.start) && (index.h("div", { class: "lottery-banner__info-item" }, index.h("span", { class: "lottery-banner__info-item-label" }, index.h("span", { class: "lottery-banner__info-item-label__strong" }, translate$5('startIn', this.language)), "\u00A0"), index.h("span", { class: "lottery-banner__info-item-value lottery-banner__info-item-value__strong" }, this.formattedTime.start))), ((_b = this.formattedTime) === null || _b === void 0 ? void 0 : _b.end) && (index.h("div", { class: "lottery-banner__info-item" }, index.h("span", { class: "lottery-banner__info-item-label" }, index.h("span", { class: "lottery-banner__info-item-label__strong" }, translate$5('stop', this.language)), "\u00A0", translate$5('at', this.language)), index.h("span", { class: "lottery-banner__info-item-value" }, this.formattedTime.end))), ((_c = this.formattedTime) === null || _c === void 0 ? void 0 : _c.end) && this.turnover !== null && this.turnover !== undefined && (index.h("div", { class: "lottery-banner__info-item" }, index.h("span", { class: "lottery-banner__info-item-label" }, translate$5('turnover', this.language)), index.h("span", { class: "lottery-banner__info-item-value" }, this.turnover)))));
+                return (index.h("div", { class: `lottery-banner__info ${className}` }, !this.isWagerStarted ? (index.h("div", { class: "lottery-banner__info-item" }, index.h("span", { class: "lottery-banner__info-item-label" }, index.h("span", { class: "lottery-banner__info-item-label__strong" }, translate$5('startIn', this.language)), "\u00A0"), index.h("helper-count-down", { class: "lottery-banner__info-item-value lottery-banner__info-item-value__strong", value: this.startTime, format: "DDD HHH mmM ssS", onCountDownFinish: this.handleCountdownFinish }))) : (index.h("div", { class: "lottery-banner__info-item" }, index.h("span", { class: "lottery-banner__info-item-label" }, index.h("span", { class: "lottery-banner__info-item-label__strong" }, translate$5('stop', this.language)), "\u00A0", translate$5('at', this.language)), index.h("span", { class: "lottery-banner__info-item-value" }, this.formattedStopTime))), this.isWagerStarted && this.turnover !== null && this.turnover !== undefined && (index.h("div", { class: "lottery-banner__info-item" }, index.h("span", { class: "lottery-banner__info-item-label" }, translate$5('turnover', this.language)), index.h("span", { class: "lottery-banner__info-item-value" }, this.turnover)))));
             default:
                 return null;
         }
     }
     render() {
         const layoutItems = this.layout.split(',').map((item) => item.trim());
-        return (index.h("section", { key: 'fe2c807504069e45cf9b9f04b754710b49930caf', ref: (el) => (this.stylingContainer = el), class: "lottery-banner" }, layoutItems.map((item, index) => {
+        return (index.h("section", { key: '3f14279ebff86c47ec5d5d7c4e1054c5899e8580', 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);
@@ -11431,6 +11343,7 @@ const DEFAULT_LANGUAGE = 'en';
 const SUPPORTED_LANGUAGES = ['ro', 'en', 'fr', 'ar', 'hr'];
 const TRANSLATIONS = {
     en: {
+        gameNotAvailable: 'Sorry. The Game is not available now.',
         stop: 'Stop',
         at: 'at',
         turnover: 'Turnover: ',
@@ -11749,7 +11662,7 @@ async function fetchSaleStatistics({ endpoint, gameId, drawId }) {
     }
 }
 
-const lotteryTippingTicketControllerCss = ".lottery-tipping-ticket-controller__container {\n  display: block;\n  box-sizing: border-box;\n  font-size: 14px;\n  container-type: inline-size;\n  background: var(--emw--color-background, #fff);\n}\n@container (max-width: 375px) {\n  .lottery-tipping-ticket-controller__container {\n    font-size: 12px;\n  }\n}\n\n.LotteryTippingTicketController__top {\n  padding: 1.8rem;\n  display: flex;\n  flex-direction: column;\n  gap: 2rem;\n  margin: 0 auto;\n  max-width: 800px;\n}\n.LotteryTippingTicketController__row {\n  display: flex;\n  align-items: center;\n  gap: 1rem;\n  justify-content: space-between;\n  flex-wrap: wrap;\n}\n.LotteryTippingTicketController__section {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n}\n.LotteryTippingTicketController__label {\n  font-weight: 500;\n  white-space: nowrap;\n  width: 6rem;\n  color: var(--emw--color-typography-secondary, #333);\n}\n.LotteryTippingTicketController__segmented-control {\n  height: 2.2rem;\n  display: inline-flex;\n  background-color: var(--emw--color-background-secondary, #f5f5f5);\n  border-radius: 2rem;\n  padding: 0.2rem;\n}\n.LotteryTippingTicketController__segment {\n  background-color: transparent;\n  border: none;\n  padding: 0.3rem 0.8rem;\n  cursor: pointer;\n  font-weight: 500;\n  border-radius: 2rem;\n  outline: none;\n  transition: background-color 0.25s ease, color 0.25s ease;\n  white-space: nowrap;\n  color: var(--emw--color-typography, #000);\n}\n.LotteryTippingTicketController__segment--active {\n  background-color: var(--emw--color-background, #ffffff);\n  color: var(--emw--color-typography, #000);\n  font-weight: 600;\n}\n.LotteryTippingTicketController__segment--disabled:hover {\n  cursor: not-allowed !important;\n}\n.LotteryTippingTicketController__segment:not(.LotteryTippingTicketController__segment--active):hover {\n  background-color: var(--emw--color-background-tertiary, #ccc);\n}\n\n.flex {\n  display: flex;\n}\n\n.flex-wrap {\n  flex-wrap: wrap;\n}\n\n.align-center {\n  align-items: center;\n}\n\n.gap-1 {\n  gap: 4px;\n}\n\n.LotteryTippingTicketController__main {\n  align-items: flex-start;\n  justify-content: center;\n  gap: 2rem;\n  max-width: 1200px;\n  margin: 0 auto;\n  padding: 0 20px;\n  flex-wrap: wrap;\n}\n.LotteryTippingTicketController__main--left {\n  border: 1px solid var(--emw--color-gray-50, #f5f5f5);\n  padding: 1rem;\n  border-radius: 1rem;\n  flex: 1.5;\n}\n.LotteryTippingTicketController__main--right {\n  padding: 1rem;\n  border-radius: 1rem;\n  flex: 1;\n}\n\n.order-summary {\n  max-width: 360px;\n  width: 100%;\n  background: var(--emw--color-background, #fff);\n}\n\n.order-summary__title {\n  margin-bottom: 16px;\n  text-align: center;\n  color: var(--emw--color-typography, #000);\n  text-transform: uppercase;\n}\n\n.order-summary__ticket-info {\n  display: flex;\n  align-items: center;\n  margin-bottom: 16px;\n  gap: 10px;\n  color: var(--emw--color-typography, #000);\n}\n\n.order-summary__ticket {\n  font-weight: 500;\n  width: 50px;\n  text-align: right;\n  color: var(--emw--color-typography, #000);\n}\n\n.order-summary__details {\n  display: flex;\n  align-items: center;\n  color: var(--emw--color-typography, #000);\n}\n\n.order-summary__multiplier {\n  color: var(--emw--color-typography-secondary, #333);\n  margin: 0 8px;\n}\n\n.order-summary__divider {\n  border: none;\n  border-top: 1px solid var(--emw--color-gray-100, #e6e6e6);\n  margin: 20px 0;\n}\n\n.order-summary__button-wrapper {\n  display: flex;\n  justify-content: center;\n}\n\n.order-summary__button {\n  cursor: pointer;\n  padding: 0.8rem 4rem;\n  background: var(--emw--color-primary, #fed275);\n  color: var(--emw--color-typography, #000);\n  border-radius: var(--emw--button-border-radius, 4px);\n  border: none;\n  position: relative;\n}\n\n.loading-icon {\n  position: absolute;\n  right: 40px;\n  top: 10px;\n}\n\n.order-summary__button:not(.order-summary__button--disabled):not(.order-summary__button--loading):hover {\n  transform: translateY(-1px);\n  background: var(--emw--color-primary-variant, #ffe66f);\n}\n\n.order-summary__button--loading {\n  background: var(--emw--color-primary-variant, #ffe66f);\n  cursor: not-allowed;\n}\n\n.order-summary__button--disabled {\n  background: var(--emw--color-background-secondary, #f5f5f5);\n  color: var(--emw--color-typography, #000);\n  cursor: not-allowed;\n}\n\n.skeleton-content {\n  display: flex;\n  flex-direction: column;\n  gap: 29px;\n  align-items: center;\n}\n\n.skeleton-item {\n  background: var(--emw--color-background-secondary, #f5f5f5);\n  border-radius: 4px;\n  height: 40px;\n  width: 200px;\n}\n\n.skeleton-animated {\n  animation: skeleton-shimmer 1.5s infinite linear;\n  background: linear-gradient(90deg, var(--emw--color-background-secondary, #f5f5f5) 25%, var(--emw--color-background-tertiary, #ccc) 37%, var(--emw--color-background-secondary, #f5f5f5) 63%);\n  background-size: 200% 100%;\n}\n\n@keyframes skeleton-shimmer {\n  to {\n    background-position: 100% 0;\n  }\n}\n.loading-icon.scale {\n  animation: scale 1s infinite ease-in-out;\n}\n\n@keyframes scale {\n  0%, 100% {\n    transform: scale(1);\n  }\n  50% {\n    transform: scale(1.2);\n  }\n}";
+const lotteryTippingTicketControllerCss = ".lottery-tipping-ticket-controller__container {\n  display: block;\n  box-sizing: border-box;\n  font-size: 14px;\n  container-type: inline-size;\n  background: var(--emw--color-background, #fff);\n}\n@container (max-width: 375px) {\n  .lottery-tipping-ticket-controller__container {\n    font-size: 12px;\n  }\n}\n\n.LotteryTippingTicketController__top {\n  padding: 1.8rem;\n  display: flex;\n  flex-direction: column;\n  gap: 2rem;\n  margin: 0 auto;\n  max-width: 800px;\n}\n.LotteryTippingTicketController__row {\n  display: flex;\n  align-items: center;\n  gap: 1rem;\n  justify-content: space-between;\n  flex-wrap: wrap;\n}\n.LotteryTippingTicketController__section {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n}\n.LotteryTippingTicketController__label {\n  font-weight: 500;\n  white-space: nowrap;\n  width: 6rem;\n  color: var(--emw--color-typography-secondary, #333);\n}\n.LotteryTippingTicketController__segmented-control {\n  height: 2.2rem;\n  display: inline-flex;\n  background-color: var(--emw--color-background-secondary, #f5f5f5);\n  border-radius: 2rem;\n  padding: 0.2rem;\n}\n.LotteryTippingTicketController__segment {\n  background-color: transparent;\n  border: none;\n  padding: 0.3rem 0.8rem;\n  cursor: pointer;\n  font-weight: 500;\n  border-radius: 2rem;\n  outline: none;\n  transition: background-color 0.25s ease, color 0.25s ease;\n  white-space: nowrap;\n  color: var(--emw--color-typography, #000);\n}\n.LotteryTippingTicketController__segment--active {\n  background-color: var(--emw--color-background, #ffffff);\n  color: var(--emw--color-typography, #000);\n  font-weight: 600;\n}\n.LotteryTippingTicketController__segment--disabled:hover {\n  cursor: not-allowed !important;\n}\n.LotteryTippingTicketController__segment:not(.LotteryTippingTicketController__segment--active):hover {\n  background-color: var(--emw--color-background-tertiary, #ccc);\n}\n\n.flex {\n  display: flex;\n}\n\n.flex-wrap {\n  flex-wrap: wrap;\n}\n\n.align-center {\n  align-items: center;\n}\n\n.gap-1 {\n  gap: 4px;\n}\n\n.LotteryTippingTicketController__main {\n  align-items: flex-start;\n  justify-content: center;\n  gap: 2rem;\n  max-width: 1200px;\n  margin: 0 auto;\n  padding: 0 20px;\n  flex-wrap: wrap;\n}\n.LotteryTippingTicketController__main--left {\n  border: 1px solid var(--emw--color-gray-50, #f5f5f5);\n  padding: 1rem;\n  border-radius: 1rem;\n  flex: 1.5;\n}\n.LotteryTippingTicketController__main--right {\n  padding: 1rem;\n  border-radius: 1rem;\n  flex: 1;\n}\n\n.order-summary {\n  max-width: 360px;\n  width: 100%;\n  background: var(--emw--color-background, #fff);\n}\n\n.order-summary__title {\n  margin-bottom: 16px;\n  text-align: center;\n  color: var(--emw--color-typography, #000);\n  text-transform: uppercase;\n}\n\n.order-summary__ticket-info {\n  display: flex;\n  align-items: center;\n  margin-bottom: 16px;\n  gap: 10px;\n  color: var(--emw--color-typography, #000);\n}\n\n.order-summary__ticket {\n  font-weight: 500;\n  width: 50px;\n  text-align: right;\n  color: var(--emw--color-typography, #000);\n}\n\n.order-summary__details {\n  display: flex;\n  align-items: center;\n  color: var(--emw--color-typography, #000);\n}\n\n.order-summary__multiplier {\n  color: var(--emw--color-typography-secondary, #333);\n  margin: 0 8px;\n}\n\n.order-summary__divider {\n  border: none;\n  border-top: 1px solid var(--emw--color-gray-100, #e6e6e6);\n  margin: 20px 0;\n}\n\n.order-summary__button-wrapper {\n  display: flex;\n  justify-content: center;\n}\n\n.order-summary__button {\n  cursor: pointer;\n  padding: 0.8rem 4rem;\n  background: var(--emw--color-primary, #fed275);\n  color: var(--emw--color-typography, #000);\n  border-radius: var(--emw--button-border-radius, 4px);\n  border: none;\n  position: relative;\n}\n\n.loading-icon {\n  position: absolute;\n  right: 40px;\n  top: 10px;\n}\n\n.order-summary__button:not(.order-summary__button--disabled):not(.order-summary__button--loading):hover {\n  transform: translateY(-1px);\n  background: var(--emw--color-primary-variant, #ffe66f);\n}\n\n.order-summary__button--loading {\n  background: var(--emw--color-primary-variant, #ffe66f);\n  cursor: not-allowed;\n}\n\n.order-summary__button--disabled {\n  background: var(--emw--color-background-secondary, #f5f5f5);\n  color: var(--emw--color-typography, #000);\n  cursor: not-allowed;\n}\n\n.skeleton-content {\n  display: flex;\n  flex-direction: column;\n  gap: 29px;\n  align-items: center;\n}\n\n.skeleton-item {\n  background: var(--emw--color-background-secondary, #f5f5f5);\n  border-radius: 4px;\n  height: 40px;\n  width: 200px;\n}\n\n.skeleton-animated {\n  animation: skeleton-shimmer 1.5s infinite linear;\n  background: linear-gradient(90deg, var(--emw--color-background-secondary, #f5f5f5) 25%, var(--emw--color-background-tertiary, #ccc) 37%, var(--emw--color-background-secondary, #f5f5f5) 63%);\n  background-size: 200% 100%;\n}\n\n@keyframes skeleton-shimmer {\n  to {\n    background-position: 100% 0;\n  }\n}\n.loading-icon.scale {\n  animation: scale 1s infinite ease-in-out;\n}\n\n@keyframes scale {\n  0%, 100% {\n    transform: scale(1);\n  }\n  50% {\n    transform: scale(1.2);\n  }\n}\n.noActiveDraw {\n  margin: 30% auto 0px;\n  padding: 24px;\n  border: 2px solid var(--emw--color-primary, #fed275);\n  border-radius: 4px;\n  width: 280px;\n  color: var(--emw--color-typography, #000);\n}";
 const LotteryTippingTicketControllerStyle0 = lotteryTippingTicketControllerCss;
 
 const LotteryTippingTicketController = class {
@@ -11778,12 +11691,14 @@ const LotteryTippingTicketController = class {
         this.hasSelectBullet = undefined;
         this.hasSelectAllBullet = undefined;
         this.totalLineCombination = 0;
-        this.submitLoading = undefined;
+        this.submitLoading = false;
+        this.isSalesActive = false;
         this.drawSubmitAvailable = false;
         this.rawData = {};
         this.saleStatisticsInfo = {};
         this.currentStake = undefined;
         this.dialogConfig = { visible: false };
+        this.gameUnavailable = false;
     }
     async getLotteryTippingBulletResults() {
         return await this.childRef.getData();
@@ -11950,9 +11865,6 @@ const LotteryTippingTicketController = class {
             lotteryTippingPage.setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`, this.stylingSubscription);
         }
     }
-    handleTimerStop() {
-        this.drawSubmitAvailable = true;
-    }
     componentWillLoad() {
         if (this.translationUrl) {
             resolveTranslationUrl(this.translationUrl);
@@ -11971,6 +11883,33 @@ const LotteryTippingTicketController = class {
     disconnectedCallback() {
         this.stylingSubscription && this.stylingSubscription.unsubscribe();
     }
+    updateDrawSalesStatus() {
+        var _a;
+        const currentDraw = (_a = this.rawData) === null || _a === void 0 ? void 0 : _a.currentDraw;
+        if (!currentDraw) {
+            this.gameUnavailable = true;
+            this.isSalesActive = false;
+            return;
+        }
+        const now = new Date();
+        const wagerStartTime = currentDraw.wagerStartTime ? parseISO(currentDraw.wagerStartTime) : null;
+        const wagerCloseTime = currentDraw.wagerCloseTime ? parseISO(currentDraw.wagerCloseTime) : null;
+        // Rule 1: If the current time < the opening - sale time → display "Start in" countDown and disable the button.
+        if (wagerStartTime && isBefore(now, wagerStartTime)) {
+            this.isSalesActive = false;
+            this.gameUnavailable = false;
+        }
+        // Rule 2: If the opening-sale time < the current time < the closing time → display "Stop at xx time" to remind the player.
+        else if (wagerStartTime && wagerCloseTime && isAfter(now, wagerStartTime) && isBefore(now, wagerCloseTime)) {
+            this.isSalesActive = true;
+            this.gameUnavailable = false;
+        }
+        // Rule 3: If the current time > the closing time → the game is unavailable.
+        else {
+            this.gameUnavailable = true;
+            this.isSalesActive = false;
+        }
+    }
     connectedCallback() {
         const fetchData = () => {
             let url = new URL(`${this.endpoint}/games/${this.gameId}`);
@@ -11991,6 +11930,7 @@ const LotteryTippingTicketController = class {
                 });
                 this.handleBettingTypeChange(bettingType);
                 this.selectedPlayingMode = playMode;
+                this.updateDrawSalesStatus();
                 return this.updateSaleStatistics();
             })
                 .catch((err) => {
@@ -12013,6 +11953,14 @@ const LotteryTippingTicketController = class {
         });
     }
     async handleSubmit() {
+        this.updateDrawSalesStatus();
+        if (!this.isSalesActive) {
+            showNotification({
+                message: 'Sales for this period have closed.',
+                theme: 'error'
+            });
+            return;
+        }
         const rawResults = await this.getLotteryTippingBulletResults();
         const { betTypeId, betType } = getPlayTypeConfig({
             rawData: this.rawData,
@@ -12078,11 +12026,14 @@ const LotteryTippingTicketController = class {
         return (index.h("div", { class: "LotteryTippingTicketController__main--right order-summary" }, index.h("h3", { class: "order-summary__title" }, translate('orderSummaryTitle', this.language)), index.h("div", { class: "order-summary__ticket-info" }, index.h("div", { class: "order-summary__ticket" }, translate('orderSummaryTickets', this.language), ":"), index.h("div", { class: "order-summary__details" }, index.h("span", { class: "order-summary__line-count" }, this.lineCountRender), index.h("div", null, this.currentStake && index.h("span", { class: "order-summary__multiplier" }, "x"), index.h("span", { class: "order-summary__stake" }, this.currentStakeFormatted)), this.isBothBettingType && (index.h("div", null, index.h("span", { class: "order-summary__multiplier" }, "x"), index.h("span", { class: "order-summary__stake" }, this.bothBettingTypeMultiplier))))), index.h("hr", { class: "order-summary__divider" }), index.h("div", { class: "order-summary__ticket-info" }, index.h("div", { class: "order-summary__ticket" }, translate('orderSummaryTotal', this.language), ":"), index.h("span", { class: "order-summary__details" }, this.totalAmountFormatted)), index.h("div", { class: "order-summary__button-wrapper" }, index.h("lottery-button", { onClick: this.handleSubmit.bind(this), loading: this.submitLoading, disabled: !this.hasSelectAllBullet ||
                 this.submitLoading ||
                 ((_a = this.currentStake) === null || _a === void 0 ? void 0 : _a.value) === undefined ||
-                !this.drawSubmitAvailable, text: translate('orderSummarySubmit', this.language) }))));
+                !this.isSalesActive, text: translate('orderSummarySubmit', this.language) }))));
     }
     render() {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
-        return (index.h("div", { key: '8f520b33fe0b935feb26e39baa840457ccc357df', class: "lottery-tipping-ticket-controller__container", ref: (el) => (this.stylingContainer = el) }, index.h("lottery-banner", { key: '10ddfb775cfe7c8f2c980414302123309a7ad7d1', "client-styling": this.clientStyling, "client-styling-Url": this.clientStylingUrl, stopTime: (_b = (_a = this.rawData) === null || _a === void 0 ? void 0 : _a.currentDraw) === null || _b === void 0 ? void 0 : _b.wagerCloseTime, startTime: (_d = (_c = this.rawData) === null || _c === void 0 ? void 0 : _c.currentDraw) === null || _d === void 0 ? void 0 : _d.wagerStartTime, "banner-title": formattedWeekName((_f = (_e = this.rawData) === null || _e === void 0 ? void 0 : _e.currentDraw) === null || _f === void 0 ? void 0 : _f.date), turnover: formattedTurnover((_h = (_g = this.saleStatisticsInfo) === null || _g === void 0 ? void 0 : _g.wagerSegment) === null || _h === void 0 ? void 0 : _h.totalSalesCrossDraw), language: this.language, "translation-url": this.translationUrl, onLotteryBannerTimerStop: this.handleTimerStop.bind(this) }), this.renderBettingControls(), index.h("div", { key: 'add963c6aaa5f852f589fc1b20b31882d62ca8db', class: "flex flex-wrap LotteryTippingTicketController__main" }, index.h("div", { key: '55c990ea441ca3b2192c3dbaa328dd31046b6d9c', class: "LotteryTippingTicketController__main--left" }, index.h("lottery-tipping-ticket-bet", { key: '7511cd997bfef3688e60afd207c109bfe20637cd', ref: (el) => (this.childRef = el), endpoint: this.endpoint, "session-id": this.sessionId, "game-id": (_j = this.rawData) === null || _j === void 0 ? void 0 : _j.type, "draw-id": this.drawId, language: this.language, "translation-url": this.translationUrl, "max-total-pages": this.lineNumberRange.maxLineNumber, "min-total-pages": this.lineNumberRange.minLineNumber, "total-pages": this.lineNumberRange.defaultBoards, mode: this.selectedPlayingMode === PlayModeEnum.SingleBet ? 'single' : 'multi', "client-styling": this.clientStyling, "client-styling-Url": this.clientStylingUrl })), this.renderOrderSummary()), this.dialogConfig.visible && (index.h("vaadin-confirm-dialog", { key: 'dfc1353806484dc8614d19737f922113a18099af', rejectButtonVisible: true, rejectText: translate('cancel', this.language), confirmText: translate('confirm', this.language), opened: (_k = this.dialogConfig) === null || _k === void 0 ? void 0 : _k.visible, onConfirm: this.dialogConfig.onConfirm, onReject: this.dialogConfig.onCancel }, (_l = this.dialogConfig) === null || _l === void 0 ? void 0 : _l.content))));
+        if (this.gameUnavailable) {
+            return (index.h("div", { class: "lottery-tipping-ticket-controller__container", ref: (el) => (this.stylingContainer = el) }, index.h("div", { class: "noActiveDraw" }, translate('gameNotAvailable', this.language))));
+        }
+        return (index.h("div", { class: "lottery-tipping-ticket-controller__container", ref: (el) => (this.stylingContainer = el) }, index.h("lottery-banner", { "client-styling": this.clientStyling, "client-styling-Url": this.clientStylingUrl, stopTime: (_b = (_a = this.rawData) === null || _a === void 0 ? void 0 : _a.currentDraw) === null || _b === void 0 ? void 0 : _b.wagerCloseTime, startTime: (_d = (_c = this.rawData) === null || _c === void 0 ? void 0 : _c.currentDraw) === null || _d === void 0 ? void 0 : _d.wagerStartTime, "banner-title": formattedWeekName((_f = (_e = this.rawData) === null || _e === void 0 ? void 0 : _e.currentDraw) === null || _f === void 0 ? void 0 : _f.date), turnover: formattedTurnover((_h = (_g = this.saleStatisticsInfo) === null || _g === void 0 ? void 0 : _g.wagerSegment) === null || _h === void 0 ? void 0 : _h.totalSalesCrossDraw), language: this.language, onLotteryBannerWagerStarted: () => this.updateDrawSalesStatus(), "translation-url": this.translationUrl }), this.renderBettingControls(), index.h("div", { class: "flex flex-wrap LotteryTippingTicketController__main" }, index.h("div", { class: "LotteryTippingTicketController__main--left" }, index.h("lottery-tipping-ticket-bet", { ref: (el) => (this.childRef = el), endpoint: this.endpoint, "session-id": this.sessionId, "game-id": (_j = this.rawData) === null || _j === void 0 ? void 0 : _j.type, "draw-id": this.drawId, language: this.language, "translation-url": this.translationUrl, "max-total-pages": this.lineNumberRange.maxLineNumber, "min-total-pages": this.lineNumberRange.minLineNumber, "total-pages": this.lineNumberRange.defaultBoards, mode: this.selectedPlayingMode === PlayModeEnum.SingleBet ? 'single' : 'multi', "client-styling": this.clientStyling, "client-styling-Url": this.clientStylingUrl })), this.renderOrderSummary()), this.dialogConfig.visible && (index.h("vaadin-confirm-dialog", { rejectButtonVisible: true, rejectText: translate('cancel', this.language), confirmText: translate('confirm', this.language), opened: (_k = this.dialogConfig) === null || _k === void 0 ? void 0 : _k.visible, onConfirm: this.dialogConfig.onConfirm, onReject: this.dialogConfig.onCancel }, (_l = this.dialogConfig) === null || _l === void 0 ? void 0 : _l.content))));
     }
     static get assetsDirs() { return ["../static"]; }
     static get watchers() { return {
@@ -17420,6 +17371,7 @@ LotteryTippingTicketHistory.style = LotteryTippingTicketHistoryStyle0;
 exports.lottery_tipping_page = lotteryTippingPage.LotteryTippingPage;
 exports.general_multi_select = GeneralMultiSelect;
 exports.general_tooltip = GeneralTooltip;
+exports.helper_count_down = HelperCountDown;
 exports.lottery_banner = LotteryBanner;
 exports.lottery_button = LotteryButton;
 exports.lottery_tipping_bullet = LotteryTippingBullet;