@everymatrix/lottery-banner 0.7.3 → 0.7.5

package/dist/cjs/{lottery-banner-c3bceca9.js → lottery-banner-c5020b47.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-const index = require('./index-7e1b19dd.js');
+const index = require('./index-21014502.js');
 
 const StyleCacheKey = '__WIDGET_GLOBAL_STYLE_CACHE__';
 
@@ -298,31 +298,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.
  *
@@ -352,41 +327,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
@@ -464,77 +404,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
@@ -2554,84 +2423,6 @@ function isBefore(dirtyDate, 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());
-}
-
-/**
- * @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;
-}
-
 /**
  * @name parseISO
  * @category Common Helpers
@@ -2858,77 +2649,17 @@ function validateTimezone(_hours, minutes) {
   return minutes >= 0 && minutes <= 59;
 }
 
-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.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;
@@ -2940,7 +2671,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) {
@@ -2958,29 +2690,23 @@ const LotteryBanner = class {
         }
     }
     handleTimeChange() {
-        this.startTimer();
+        this.checkWagerStatus();
     }
     async componentWillLoad() {
         if (this.translationUrl) {
             resolveTranslationUrl(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;
+        }
+        else {
+            this.isWagerStarted = true;
         }
-        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();
+        if (this.stopTime) {
+            this.formattedStopTime = format(parseISO(this.stopTime), 'dd/MM/yyyy HH:mm');
         }
     }
     componentDidLoad() {
@@ -2995,10 +2721,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':
@@ -3006,14 +2730,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('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('stop', this.language)), "\u00A0", translate('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('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('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('stop', this.language)), "\u00A0", translate('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('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);
@@ -3030,3 +2754,7 @@ const LotteryBanner = class {
 LotteryBanner.style = LotteryBannerStyle0;
 
 exports.LotteryBanner = LotteryBanner;
+exports.parseISO = parseISO;
+exports.setClientStyling = setClientStyling;
+exports.setClientStylingURL = setClientStylingURL;
+exports.setStreamStyling = setStreamStyling;

package/dist/cjs/lottery-banner.cjs.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-7e1b19dd.js');
+const index = require('./index-21014502.js');
 const appGlobals = require('./app-globals-3a1e7e63.js');
 
 /*
@@ -19,7 +19,7 @@ var patchBrowser = () => {
 
 patchBrowser().then(async (options) => {
   await appGlobals.globalScripts();
-  return index.bootstrapLazy([["lottery-banner.cjs",[[1,"lottery-banner",{"mbSource":[513,"mb-source"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"translationUrl":[513,"translation-url"],"language":[513],"logoUrl":[513,"logo-url"],"stopTime":[1,"stop-time"],"startTime":[1,"start-time"],"bannerTitle":[1,"banner-title"],"turnover":[1],"layout":[1],"formattedTime":[32]},null,{"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingUrlChange"],"mbSource":["handleMbSourceChange"],"startTime":["handleTimeChange"],"stopTime":["handleTimeChange"]}]]]], options);
+  return index.bootstrapLazy([["helper-count-down_2.cjs",[[1,"lottery-banner",{"mbSource":[513,"mb-source"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"translationUrl":[513,"translation-url"],"language":[513],"logoUrl":[513,"logo-url"],"stopTime":[1,"stop-time"],"startTime":[1,"start-time"],"bannerTitle":[1,"banner-title"],"turnover":[1],"layout":[1],"isWagerStarted":[32],"formattedStopTime":[32]},null,{"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingUrlChange"],"mbSource":["handleMbSourceChange"],"startTime":["handleTimeChange"],"stopTime":["handleTimeChange"]}],[1,"helper-count-down",{"value":[520],"format":[513],"prefix":[513],"suffix":[513],"mbSource":[513,"mb-source"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"endTime":[32],"timeObj":[32]},null,{"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingUrlChange"],"mbSource":["handleMbSourceChange"],"value":["handleValueChange"]}]]]], options);
 });
 
 exports.setNonce = index.setNonce;

package/dist/collection/collection-manifest.json

@@ -7,6 +7,13 @@
     "version": "4.19.2",
     "typescriptVersion": "5.4.5"
   },
-  "collections": [],
+  "collections": [
+    {
+      "name": "@everymatrix/helper-count-down",
+      "tags": [
+        "helper-count-down"
+      ]
+    }
+  ],
   "bundles": []
 }

package/dist/collection/components/lottery-banner/lottery-banner.css

@@ -77,6 +77,10 @@
   font-weight: 700;
 }
 
+helper-count-down::part(values) {
+  gap: 8px;
+}
+
 @container (max-width: 700px) {
   .lottery-banner {
     height: auto;

package/dist/collection/components/lottery-banner/lottery-banner.js

@@ -1,9 +1,14 @@
 import { h, getAssetPath } from "@stencil/core";
 import { setClientStyling, setClientStylingURL, setStreamStyling } from "../../../../../../../../libs/common/src/styling/index";
 import { resolveTranslationUrl, translate } from "../../utils/locale.utils";
-import { getWagerTime } from "../../utils/utils";
+import { format, isBefore, parseISO } from "date-fns";
+import "../../../../../helper-count-down/dist/types/index";
 export class LotteryBanner {
     constructor() {
+        this.handleCountdownFinish = () => {
+            this.isWagerStarted = true;
+            this.lotteryBannerWagerStarted.emit();
+        };
         this.mbSource = undefined;
         this.clientStyling = undefined;
         this.clientStylingUrl = undefined;
@@ -15,7 +20,8 @@ export class LotteryBanner {
         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) {
@@ -33,29 +39,23 @@ export class LotteryBanner {
         }
     }
     handleTimeChange() {
-        this.startTimer();
+        this.checkWagerStatus();
     }
     async componentWillLoad() {
         if (this.translationUrl) {
             resolveTranslationUrl(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() {
@@ -70,10 +70,8 @@ export class LotteryBanner {
     }
     disconnectedCallback() {
         this.stylingSubscription && this.stylingSubscription.unsubscribe();
-        this.timer && clearInterval(this.timer);
     }
     renderElement(item, className = '') {
-        var _a, _b, _c;
         const poolGameLogo = getAssetPath('../static/poolGameLogo.webp');
         switch (item) {
             case 'logo':
@@ -81,14 +79,14 @@ export class LotteryBanner {
             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('startIn', this.language)), "\u00A0"), 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) && (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('stop', this.language)), "\u00A0", translate('at', this.language)), 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 && (h("div", { class: "lottery-banner__info-item" }, h("span", { class: "lottery-banner__info-item-label" }, translate('turnover', this.language)), h("span", { class: "lottery-banner__info-item-value" }, this.turnover)))));
+                return (h("div", { class: `lottery-banner__info ${className}` }, !this.isWagerStarted ? (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('startIn', this.language)), "\u00A0"), 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 }))) : (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('stop', this.language)), "\u00A0", translate('at', this.language)), h("span", { class: "lottery-banner__info-item-value" }, this.formattedStopTime))), this.isWagerStarted && this.turnover !== null && this.turnover !== undefined && (h("div", { class: "lottery-banner__info-item" }, h("span", { class: "lottery-banner__info-item-label" }, translate('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: 'fe2c807504069e45cf9b9f04b754710b49930caf', ref: (el) => (this.stylingContainer = el), class: "lottery-banner" }, layoutItems.map((item, index) => {
+        return (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);
@@ -304,19 +302,20 @@ export class LotteryBanner {
     }
     static get states() {
         return {
-            "formattedTime": {}
+            "isWagerStarted": {},
+            "formattedStopTime": {}
         };
     }
     static get events() {
         return [{
-                "method": "lotteryBannerTimerStop",
-                "name": "lotteryBannerTimerStop",
+                "method": "lotteryBannerWagerStarted",
+                "name": "lotteryBannerWagerStarted",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Event emitted when the timer stops"
+                    "text": "Event emitted when the wager starts (countdown finishes)"
                 },
                 "complexType": {
                     "original": "void",