@everymatrix/casino-engagement-suite-challenges-list 1.35.0 → 1.36.1

package/dist/components/casino-engagement-suite-challenges-list.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import '@everymatrix/casino-engagement-suite-progress-bar';
+import { d as defineCustomElement$2 } from './casino-engagement-suite-progress-bar2.js';
 
 var ChallengeLevelProgressStatus;
 (function (ChallengeLevelProgressStatus) {
@@ -24,6 +24,7 @@ const TRANSLATIONS = {
     challenges: 'Challenges',
     join: 'Join',
     unjoin: 'Unjoin',
+    new: 'new',
     noChallenges: 'No Challenges yet',
     tryOtherGames: 'Try winning Challenges as rewards or launching other booster games',
     tooltip: 'Competition where your real money bets contribute towards the level progress to achieve the level reward'
@@ -101,417 +102,6 @@ function toDate(argument) {
   }
 }
 
-/**
- * @name compareAsc
- * @category Common Helpers
- * @summary Compare the two dates and return -1, 0 or 1.
- *
- * @description
- * Compare the two dates and return 1 if the first date is after the second,
- * -1 if the first date is before the second or 0 if dates are equal.
- *
- * @param {Date|Number} dateLeft - the first date to compare
- * @param {Date|Number} dateRight - the second date to compare
- * @returns {Number} the result of the comparison
- * @throws {TypeError} 2 arguments required
- *
- * @example
- * // Compare 11 February 1987 and 10 July 1989:
- * const result = compareAsc(new Date(1987, 1, 11), new Date(1989, 6, 10))
- * //=> -1
- *
- * @example
- * // Sort the array of dates:
- * const result = [
- *   new Date(1995, 6, 2),
- *   new Date(1987, 1, 11),
- *   new Date(1989, 6, 10)
- * ].sort(compareAsc)
- * //=> [
- * //   Wed Feb 11 1987 00:00:00,
- * //   Mon Jul 10 1989 00:00:00,
- * //   Sun Jul 02 1995 00:00:00
- * // ]
- */
-function compareAsc(dirtyDateLeft, dirtyDateRight) {
-  requiredArgs(2, arguments);
-  var dateLeft = toDate(dirtyDateLeft);
-  var dateRight = toDate(dirtyDateRight);
-  var diff = dateLeft.getTime() - dateRight.getTime();
-  if (diff < 0) {
-    return -1;
-  } else if (diff > 0) {
-    return 1;
-    // Return 0 if diff is 0; return NaN if diff is NaN
-  } else {
-    return diff;
-  }
-}
-
-function toInteger(dirtyNumber) {
-  if (dirtyNumber === null || dirtyNumber === true || dirtyNumber === false) {
-    return NaN;
-  }
-  var number = Number(dirtyNumber);
-  if (isNaN(number)) {
-    return number;
-  }
-  return number < 0 ? Math.ceil(number) : Math.floor(number);
-}
-
-/**
- * @name addDays
- * @category Day Helpers
- * @summary Add the specified number of days to the given date.
- *
- * @description
- * Add the specified number of days to the given date.
- *
- * @param {Date|Number} date - the date to be changed
- * @param {Number} amount - the amount of days to be added. Positive decimals will be rounded using `Math.floor`, decimals less than zero will be rounded using `Math.ceil`.
- * @returns {Date} - the new date with the days added
- * @throws {TypeError} - 2 arguments required
- *
- * @example
- * // Add 10 days to 1 September 2014:
- * const result = addDays(new Date(2014, 8, 1), 10)
- * //=> Thu Sep 11 2014 00:00:00
- */
-function addDays(dirtyDate, dirtyAmount) {
-  requiredArgs(2, arguments);
-  var date = toDate(dirtyDate);
-  var amount = toInteger(dirtyAmount);
-  if (isNaN(amount)) {
-    return new Date(NaN);
-  }
-  if (!amount) {
-    // If 0 days, no-op to avoid changing times in the hour before end of DST
-    return date;
-  }
-  date.setDate(date.getDate() + amount);
-  return date;
-}
-
-/**
- * @name addMonths
- * @category Month Helpers
- * @summary Add the specified number of months to the given date.
- *
- * @description
- * Add the specified number of months to the given date.
- *
- * @param {Date|Number} date - the date to be changed
- * @param {Number} amount - the amount of months to be added. Positive decimals will be rounded using `Math.floor`, decimals less than zero will be rounded using `Math.ceil`.
- * @returns {Date} the new date with the months added
- * @throws {TypeError} 2 arguments required
- *
- * @example
- * // Add 5 months to 1 September 2014:
- * const result = addMonths(new Date(2014, 8, 1), 5)
- * //=> Sun Feb 01 2015 00:00:00
- */
-function addMonths(dirtyDate, dirtyAmount) {
-  requiredArgs(2, arguments);
-  var date = toDate(dirtyDate);
-  var amount = toInteger(dirtyAmount);
-  if (isNaN(amount)) {
-    return new Date(NaN);
-  }
-  if (!amount) {
-    // If 0 months, no-op to avoid changing times in the hour before end of DST
-    return date;
-  }
-  var dayOfMonth = date.getDate();
-
-  // The JS Date object supports date math by accepting out-of-bounds values for
-  // month, day, etc. For example, new Date(2020, 0, 0) returns 31 Dec 2019 and
-  // new Date(2020, 13, 1) returns 1 Feb 2021.  This is *almost* the behavior we
-  // want except that dates will wrap around the end of a month, meaning that
-  // new Date(2020, 13, 31) will return 3 Mar 2021 not 28 Feb 2021 as desired. So
-  // we'll default to the end of the desired month by adding 1 to the desired
-  // month and using a date of 0 to back up one day to the end of the desired
-  // month.
-  var endOfDesiredMonth = new Date(date.getTime());
-  endOfDesiredMonth.setMonth(date.getMonth() + amount + 1, 0);
-  var daysInMonth = endOfDesiredMonth.getDate();
-  if (dayOfMonth >= daysInMonth) {
-    // If we're already at the end of the month, then this is the correct date
-    // and we're done.
-    return endOfDesiredMonth;
-  } else {
-    // Otherwise, we now know that setting the original day-of-month value won't
-    // cause an overflow, so set the desired day-of-month. Note that we can't
-    // just set the date of `endOfDesiredMonth` because that object may have had
-    // its time changed in the unusual case where where a DST transition was on
-    // the last day of the month and its local time was in the hour skipped or
-    // repeated next to a DST transition.  So we use `date` instead which is
-    // guaranteed to still have the original time.
-    date.setFullYear(endOfDesiredMonth.getFullYear(), endOfDesiredMonth.getMonth(), dayOfMonth);
-    return date;
-  }
-}
-
-/**
- * @name add
- * @category Common Helpers
- * @summary Add the specified years, months, weeks, days, hours, minutes and seconds to the given date.
- *
- * @description
- * Add the specified years, months, weeks, days, hours, minutes and seconds to the given date.
- *
- * @param {Date|Number} date - the date to be changed
- * @param {Duration} duration - the object with years, months, weeks, days, hours, minutes and seconds to be added. Positive decimals will be rounded using `Math.floor`, decimals less than zero will be rounded using `Math.ceil`.
- *
- * | Key            | Description                        |
- * |----------------|------------------------------------|
- * | years          | Amount of years to be added        |
- * | months         | Amount of months to be added       |
- * | weeks          | Amount of weeks to be added        |
- * | days           | Amount of days to be added         |
- * | hours          | Amount of hours to be added        |
- * | minutes        | Amount of minutes to be added      |
- * | seconds        | Amount of seconds to be added      |
- *
- * All values default to 0
- *
- * @returns {Date} the new date with the seconds added
- * @throws {TypeError} 2 arguments required
- *
- * @example
- * // Add the following duration to 1 September 2014, 10:19:50
- * const result = add(new Date(2014, 8, 1, 10, 19, 50), {
- *   years: 2,
- *   months: 9,
- *   weeks: 1,
- *   days: 7,
- *   hours: 5,
- *   minutes: 9,
- *   seconds: 30,
- * })
- * //=> Thu Jun 15 2017 15:29:20
- */
-function add(dirtyDate, duration) {
-  requiredArgs(2, arguments);
-  if (!duration || _typeof(duration) !== 'object') return new Date(NaN);
-  var years = duration.years ? toInteger(duration.years) : 0;
-  var months = duration.months ? toInteger(duration.months) : 0;
-  var weeks = duration.weeks ? toInteger(duration.weeks) : 0;
-  var days = duration.days ? toInteger(duration.days) : 0;
-  var hours = duration.hours ? toInteger(duration.hours) : 0;
-  var minutes = duration.minutes ? toInteger(duration.minutes) : 0;
-  var seconds = duration.seconds ? toInteger(duration.seconds) : 0;
-
-  // Add years and months
-  var date = toDate(dirtyDate);
-  var dateWithMonths = months || years ? addMonths(date, months + years * 12) : date;
-
-  // Add weeks and days
-  var dateWithDays = days || weeks ? addDays(dateWithMonths, days + weeks * 7) : dateWithMonths;
-
-  // Add days, hours, minutes and seconds
-  var minutesToAdd = minutes + hours * 60;
-  var secondsToAdd = seconds + minutesToAdd * 60;
-  var msToAdd = secondsToAdd * 1000;
-  var finalDate = new Date(dateWithDays.getTime() + msToAdd);
-  return finalDate;
-}
-
-/**
- * Google Chrome as of 67.0.3396.87 introduced timezones with offset that includes seconds.
- * They usually appear for dates that denote time before the timezones were introduced
- * (e.g. for 'Europe/Prague' timezone the offset is GMT+00:57:44 before 1 October 1891
- * and GMT+01:00:00 after that date)
- *
- * Date#getTimezoneOffset returns the offset in minutes and would return 57 for the example above,
- * which would lead to incorrect calculations.
- *
- * This function returns the timezone offset in milliseconds that takes seconds in account.
- */
-function getTimezoneOffsetInMilliseconds(date) {
-  var utcDate = new Date(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate(), date.getHours(), date.getMinutes(), date.getSeconds(), date.getMilliseconds()));
-  utcDate.setUTCFullYear(date.getFullYear());
-  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;
-}
-
-var MILLISECONDS_IN_DAY = 86400000;
-
-/**
- * @name differenceInCalendarDays
- * @category Day Helpers
- * @summary Get the number of calendar days between the given dates.
- *
- * @description
- * Get the number of calendar days between the given dates. This means that the times are removed
- * from the dates and then the difference in days is calculated.
- *
- * @param {Date|Number} dateLeft - the later date
- * @param {Date|Number} dateRight - the earlier date
- * @returns {Number} the number of calendar days
- * @throws {TypeError} 2 arguments required
- *
- * @example
- * // How many calendar days are between
- * // 2 July 2011 23:00:00 and 2 July 2012 00:00:00?
- * const result = differenceInCalendarDays(
- *   new Date(2012, 6, 2, 0, 0),
- *   new Date(2011, 6, 2, 23, 0)
- * )
- * //=> 366
- * // How many calendar days are between
- * // 2 July 2011 23:59:00 and 3 July 2011 00:01:00?
- * const result = differenceInCalendarDays(
- *   new Date(2011, 6, 3, 0, 1),
- *   new Date(2011, 6, 2, 23, 59)
- * )
- * //=> 1
- */
-function differenceInCalendarDays(dirtyDateLeft, dirtyDateRight) {
-  requiredArgs(2, arguments);
-  var startOfDayLeft = startOfDay(dirtyDateLeft);
-  var startOfDayRight = startOfDay(dirtyDateRight);
-  var timestampLeft = startOfDayLeft.getTime() - getTimezoneOffsetInMilliseconds(startOfDayLeft);
-  var timestampRight = startOfDayRight.getTime() - getTimezoneOffsetInMilliseconds(startOfDayRight);
-
-  // Round the number of days to the nearest integer
-  // because the number of milliseconds in a day is not constant
-  // (e.g. it's different in the day of the daylight saving time clock shift)
-  return Math.round((timestampLeft - timestampRight) / MILLISECONDS_IN_DAY);
-}
-
-// for accurate equality comparisons of UTC timestamps that end up
-// having the same representation in local time, e.g. one hour before
-// DST ends vs. the instant that DST ends.
-function compareLocalAsc(dateLeft, dateRight) {
-  var diff = dateLeft.getFullYear() - dateRight.getFullYear() || dateLeft.getMonth() - dateRight.getMonth() || dateLeft.getDate() - dateRight.getDate() || dateLeft.getHours() - dateRight.getHours() || dateLeft.getMinutes() - dateRight.getMinutes() || dateLeft.getSeconds() - dateRight.getSeconds() || dateLeft.getMilliseconds() - dateRight.getMilliseconds();
-  if (diff < 0) {
-    return -1;
-  } else if (diff > 0) {
-    return 1;
-    // Return 0 if diff is 0; return NaN if diff is NaN
-  } else {
-    return diff;
-  }
-}
-
-/**
- * @name differenceInDays
- * @category Day Helpers
- * @summary Get the number of full days between the given dates.
- *
- * @description
- * Get the number of full day periods between two dates. Fractional days are
- * truncated towards zero.
- *
- * One "full day" is the distance between a local time in one day to the same
- * local time on the next or previous day. A full day can sometimes be less than
- * or more than 24 hours if a daylight savings change happens between two dates.
- *
- * To ignore DST and only measure exact 24-hour periods, use this instead:
- * `Math.floor(differenceInHours(dateLeft, dateRight)/24)|0`.
- *
- *
- * @param {Date|Number} dateLeft - the later date
- * @param {Date|Number} dateRight - the earlier date
- * @returns {Number} the number of full days according to the local timezone
- * @throws {TypeError} 2 arguments required
- *
- * @example
- * // How many full days are between
- * // 2 July 2011 23:00:00 and 2 July 2012 00:00:00?
- * const result = differenceInDays(
- *   new Date(2012, 6, 2, 0, 0),
- *   new Date(2011, 6, 2, 23, 0)
- * )
- * //=> 365
- * // How many full days are between
- * // 2 July 2011 23:59:00 and 3 July 2011 00:01:00?
- * const result = differenceInDays(
- *   new Date(2011, 6, 3, 0, 1),
- *   new Date(2011, 6, 2, 23, 59)
- * )
- * //=> 0
- * // How many full days are between
- * // 1 March 2020 0:00 and 1 June 2020 0:00 ?
- * // Note: because local time is used, the
- * // result will always be 92 days, even in
- * // time zones where DST starts and the
- * // period has only 92*24-1 hours.
- * const result = differenceInDays(
- *   new Date(2020, 5, 1),
- *   new Date(2020, 2, 1)
- * )
-//=> 92
- */
-function differenceInDays(dirtyDateLeft, dirtyDateRight) {
-  requiredArgs(2, arguments);
-  var dateLeft = toDate(dirtyDateLeft);
-  var dateRight = toDate(dirtyDateRight);
-  var sign = compareLocalAsc(dateLeft, dateRight);
-  var difference = Math.abs(differenceInCalendarDays(dateLeft, dateRight));
-  dateLeft.setDate(dateLeft.getDate() - sign * difference);
-
-  // Math.abs(diff in full days - diff in calendar days) === 1 if last calendar day is not full
-  // If so, result must be decreased by 1 in absolute value
-  var isLastDayNotFull = Number(compareLocalAsc(dateLeft, dateRight) === -sign);
-  var result = sign * (difference - isLastDayNotFull);
-  // Prevent negative zero
-  return result === 0 ? 0 : result;
-}
-
-/**
- * Days in 1 week.
- *
- * @name daysInWeek
- * @constant
- * @type {number}
- * @default
- */
-
-/**
- * Milliseconds in 1 minute
- *
- * @name millisecondsInMinute
- * @constant
- * @type {number}
- * @default
- */
-var millisecondsInMinute = 60000;
-
-/**
- * Milliseconds in 1 hour
- *
- * @name millisecondsInHour
- * @constant
- * @type {number}
- * @default
- */
-var millisecondsInHour = 3600000;
-
 /**
  * @name differenceInMilliseconds
  * @category Millisecond Helpers
@@ -553,229 +143,6 @@ function getRoundingMethod(method) {
   return method ? roundingMap[method] : roundingMap[defaultRoundingMethod];
 }
 
-/**
- * @name differenceInHours
- * @category Hour Helpers
- * @summary Get the number of hours between the given dates.
- *
- * @description
- * Get the number of hours 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 hours
- * @throws {TypeError} 2 arguments required
- *
- * @example
- * // How many hours are between 2 July 2014 06:50:00 and 2 July 2014 19:00:00?
- * const result = differenceInHours(
- *   new Date(2014, 6, 2, 19, 0),
- *   new Date(2014, 6, 2, 6, 50)
- * )
- * //=> 12
- */
-function differenceInHours(dateLeft, dateRight, options) {
-  requiredArgs(2, arguments);
-  var diff = differenceInMilliseconds(dateLeft, dateRight) / millisecondsInHour;
-  return getRoundingMethod(options === null || options === void 0 ? void 0 : options.roundingMethod)(diff);
-}
-
-/**
- * @name differenceInMinutes
- * @category Minute Helpers
- * @summary Get the number of minutes between the given dates.
- *
- * @description
- * Get the signed number of full (rounded towards 0) minutes 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 minutes
- * @throws {TypeError} 2 arguments required
- *
- * @example
- * // How many minutes are between 2 July 2014 12:07:59 and 2 July 2014 12:20:00?
- * const result = differenceInMinutes(
- *   new Date(2014, 6, 2, 12, 20, 0),
- *   new Date(2014, 6, 2, 12, 7, 59)
- * )
- * //=> 12
- *
- * @example
- * // How many minutes are between 10:01:59 and 10:00:00
- * const result = differenceInMinutes(
- *   new Date(2000, 0, 1, 10, 0, 0),
- *   new Date(2000, 0, 1, 10, 1, 59)
- * )
- * //=> -1
- */
-function differenceInMinutes(dateLeft, dateRight, options) {
-  requiredArgs(2, arguments);
-  var diff = differenceInMilliseconds(dateLeft, dateRight) / millisecondsInMinute;
-  return getRoundingMethod(options === null || options === void 0 ? void 0 : options.roundingMethod)(diff);
-}
-
-/**
- * @name differenceInCalendarMonths
- * @category Month Helpers
- * @summary Get the number of calendar months between the given dates.
- *
- * @description
- * Get the number of calendar months between the given dates.
- *
- * @param {Date|Number} dateLeft - the later date
- * @param {Date|Number} dateRight - the earlier date
- * @returns {Number} the number of calendar months
- * @throws {TypeError} 2 arguments required
- *
- * @example
- * // How many calendar months are between 31 January 2014 and 1 September 2014?
- * const result = differenceInCalendarMonths(
- *   new Date(2014, 8, 1),
- *   new Date(2014, 0, 31)
- * )
- * //=> 8
- */
-function differenceInCalendarMonths(dirtyDateLeft, dirtyDateRight) {
-  requiredArgs(2, arguments);
-  var dateLeft = toDate(dirtyDateLeft);
-  var dateRight = toDate(dirtyDateRight);
-  var yearDiff = dateLeft.getFullYear() - dateRight.getFullYear();
-  var monthDiff = dateLeft.getMonth() - dateRight.getMonth();
-  return yearDiff * 12 + monthDiff;
-}
-
-/**
- * @name endOfDay
- * @category Day Helpers
- * @summary Return the end of a day for the given date.
- *
- * @description
- * Return the end 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 end of a day
- * @throws {TypeError} 1 argument required
- *
- * @example
- * // The end of a day for 2 September 2014 11:55:00:
- * const result = endOfDay(new Date(2014, 8, 2, 11, 55, 0))
- * //=> Tue Sep 02 2014 23:59:59.999
- */
-function endOfDay(dirtyDate) {
-  requiredArgs(1, arguments);
-  var date = toDate(dirtyDate);
-  date.setHours(23, 59, 59, 999);
-  return date;
-}
-
-/**
- * @name endOfMonth
- * @category Month Helpers
- * @summary Return the end of a month for the given date.
- *
- * @description
- * Return the end of a month for the given date.
- * The result will be in the local timezone.
- *
- * @param {Date|Number} date - the original date
- * @returns {Date} the end of a month
- * @throws {TypeError} 1 argument required
- *
- * @example
- * // The end of a month for 2 September 2014 11:55:00:
- * const result = endOfMonth(new Date(2014, 8, 2, 11, 55, 0))
- * //=> Tue Sep 30 2014 23:59:59.999
- */
-function endOfMonth(dirtyDate) {
-  requiredArgs(1, arguments);
-  var date = toDate(dirtyDate);
-  var month = date.getMonth();
-  date.setFullYear(date.getFullYear(), month + 1, 0);
-  date.setHours(23, 59, 59, 999);
-  return date;
-}
-
-/**
- * @name isLastDayOfMonth
- * @category Month Helpers
- * @summary Is the given date the last day of a month?
- *
- * @description
- * Is the given date the last day of a month?
- *
- * @param {Date|Number} date - the date to check
- * @returns {Boolean} the date is the last day of a month
- * @throws {TypeError} 1 argument required
- *
- * @example
- * // Is 28 February 2014 the last day of a month?
- * const result = isLastDayOfMonth(new Date(2014, 1, 28))
- * //=> true
- */
-function isLastDayOfMonth(dirtyDate) {
-  requiredArgs(1, arguments);
-  var date = toDate(dirtyDate);
-  return endOfDay(date).getTime() === endOfMonth(date).getTime();
-}
-
-/**
- * @name differenceInMonths
- * @category Month Helpers
- * @summary Get the number of full months between the given dates.
- *
- * @description
- * Get the number of full months between the given dates using trunc as a default rounding method.
- *
- * @param {Date|Number} dateLeft - the later date
- * @param {Date|Number} dateRight - the earlier date
- * @returns {Number} the number of full months
- * @throws {TypeError} 2 arguments required
- *
- * @example
- * // How many full months are between 31 January 2014 and 1 September 2014?
- * const result = differenceInMonths(new Date(2014, 8, 1), new Date(2014, 0, 31))
- * //=> 7
- */
-function differenceInMonths(dirtyDateLeft, dirtyDateRight) {
-  requiredArgs(2, arguments);
-  var dateLeft = toDate(dirtyDateLeft);
-  var dateRight = toDate(dirtyDateRight);
-  var sign = compareAsc(dateLeft, dateRight);
-  var difference = Math.abs(differenceInCalendarMonths(dateLeft, dateRight));
-  var result;
-
-  // Check for the difference of less than month
-  if (difference < 1) {
-    result = 0;
-  } else {
-    if (dateLeft.getMonth() === 1 && dateLeft.getDate() > 27) {
-      // This will check if the date is end of Feb and assign a higher end of month date
-      // to compare it with Jan
-      dateLeft.setDate(30);
-    }
-    dateLeft.setMonth(dateLeft.getMonth() - sign * difference);
-
-    // Math.abs(diff in full months - diff in calendar months) === 1 if last calendar month is not full
-    // If so, result must be decreased by 1 in absolute value
-    var isLastMonthNotFull = compareAsc(dateLeft, dateRight) === -sign;
-
-    // Check for cases of one full calendar month
-    if (isLastDayOfMonth(toDate(dirtyDateLeft)) && difference === 1 && compareAsc(dirtyDateLeft, dateRight) === 1) {
-      isLastMonthNotFull = false;
-    }
-    result = sign * (difference - Number(isLastMonthNotFull));
-  }
-
-  // Prevent negative zero
-  return result === 0 ? 0 : result;
-}
-
 /**
  * @name differenceInSeconds
  * @category Second Helpers
@@ -806,128 +173,7 @@ function differenceInSeconds(dateLeft, dateRight, options) {
   return getRoundingMethod(options === null || options === void 0 ? void 0 : options.roundingMethod)(diff);
 }
 
-/**
- * @name differenceInCalendarYears
- * @category Year Helpers
- * @summary Get the number of calendar years between the given dates.
- *
- * @description
- * Get the number of calendar years between the given dates.
- *
- * @param {Date|Number} dateLeft - the later date
- * @param {Date|Number} dateRight - the earlier date
- * @returns {Number} the number of calendar years
- * @throws {TypeError} 2 arguments required
- *
- * @example
- * // How many calendar years are between 31 December 2013 and 11 February 2015?
- * const result = differenceInCalendarYears(
- *   new Date(2015, 1, 11),
- *   new Date(2013, 11, 31)
- * )
- * //=> 2
- */
-function differenceInCalendarYears(dirtyDateLeft, dirtyDateRight) {
-  requiredArgs(2, arguments);
-  var dateLeft = toDate(dirtyDateLeft);
-  var dateRight = toDate(dirtyDateRight);
-  return dateLeft.getFullYear() - dateRight.getFullYear();
-}
-
-/**
- * @name differenceInYears
- * @category Year Helpers
- * @summary Get the number of full years between the given dates.
- *
- * @description
- * Get the number of full years between the given dates.
- *
- * @param {Date|Number} dateLeft - the later date
- * @param {Date|Number} dateRight - the earlier date
- * @returns {Number} the number of full years
- * @throws {TypeError} 2 arguments required
- *
- * @example
- * // How many full years are between 31 December 2013 and 11 February 2015?
- * const result = differenceInYears(new Date(2015, 1, 11), new Date(2013, 11, 31))
- * //=> 1
- */
-function differenceInYears(dirtyDateLeft, dirtyDateRight) {
-  requiredArgs(2, arguments);
-  var dateLeft = toDate(dirtyDateLeft);
-  var dateRight = toDate(dirtyDateRight);
-  var sign = compareAsc(dateLeft, dateRight);
-  var difference = Math.abs(differenceInCalendarYears(dateLeft, dateRight));
-
-  // Set both dates to a valid leap year for accurate comparison when dealing
-  // with leap days
-  dateLeft.setFullYear(1584);
-  dateRight.setFullYear(1584);
-
-  // Math.abs(diff in full years - diff in calendar years) === 1 if last calendar year is not full
-  // If so, result must be decreased by 1 in absolute value
-  var isLastYearNotFull = compareAsc(dateLeft, dateRight) === -sign;
-  var result = sign * (difference - Number(isLastYearNotFull));
-  // Prevent negative zero
-  return result === 0 ? 0 : result;
-}
-
-/**
- * @name intervalToDuration
- * @category Common Helpers
- * @summary Convert interval to duration
- *
- * @description
- * Convert a interval object to a duration object.
- *
- * @param {Interval} interval - the interval to convert to duration
- *
- * @returns {Duration} The duration Object
- * @throws {TypeError} Requires 2 arguments
- * @throws {RangeError} `start` must not be Invalid Date
- * @throws {RangeError} `end` must not be Invalid Date
- *
- * @example
- * // Get the duration between January 15, 1929 and April 4, 1968.
- * intervalToDuration({
- *   start: new Date(1929, 0, 15, 12, 0, 0),
- *   end: new Date(1968, 3, 4, 19, 5, 0)
- * })
- * // => { years: 39, months: 2, days: 20, hours: 7, minutes: 5, seconds: 0 }
- */
-function intervalToDuration(interval) {
-  requiredArgs(1, arguments);
-  var start = toDate(interval.start);
-  var end = toDate(interval.end);
-  if (isNaN(start.getTime())) throw new RangeError('Start Date is invalid');
-  if (isNaN(end.getTime())) throw new RangeError('End Date is invalid');
-  var duration = {};
-  duration.years = Math.abs(differenceInYears(end, start));
-  var sign = compareAsc(end, start);
-  var remainingMonths = add(start, {
-    years: sign * duration.years
-  });
-  duration.months = Math.abs(differenceInMonths(end, remainingMonths));
-  var remainingDays = add(remainingMonths, {
-    months: sign * duration.months
-  });
-  duration.days = Math.abs(differenceInDays(end, remainingDays));
-  var remainingHours = add(remainingDays, {
-    days: sign * duration.days
-  });
-  duration.hours = Math.abs(differenceInHours(end, remainingHours));
-  var remainingMinutes = add(remainingHours, {
-    hours: sign * duration.hours
-  });
-  duration.minutes = Math.abs(differenceInMinutes(end, remainingMinutes));
-  var remainingSeconds = add(remainingMinutes, {
-    minutes: sign * duration.minutes
-  });
-  duration.seconds = Math.abs(differenceInSeconds(end, remainingSeconds));
-  return duration;
-}
-
-const casinoEngagementSuiteChallengesListCss = "@import url(\"https://fonts.googleapis.com/css2?family=Montserrat:wght@600&display=swap\");:host{display:block;font-family:inherit}*{box-sizing:border-box;margin:0;padding:0}button{border:none;background:none;cursor:pointer}button:focus{outline:none}.ChallengesListPopup{display:flex;height:100%;background-color:var(--emw--color-background, #1E1638);border-radius:8px;overflow:hidden;flex-direction:column;position:relative}.ChallengesListPopupHeader{display:flex;justify-content:space-between;align-items:center;padding:12px 8px 8px}.ChallengesIconButton{width:16px;height:16px;cursor:pointer}.ChallengesListPopupHeaderName{color:var(--emw--color-gray-100, #BBB9C3);font-size:14px;font-weight:500;line-height:14px}.ChallengesListWrapper{overflow-y:auto;-ms-overflow-style:none;scrollbar-width:none}.ChallengesListWrapper::-webkit-scrollbar{display:none}.ChallengesList{display:flex;flex-direction:column;row-gap:12px;padding:8px 19px 0}.ChallengeCard{padding:15px 15px 19px;border:1px solid var(--emw--button-border-color, #403956);border-radius:6px;position:relative}.ChallengeJoinButton.Joined::before,.ChallengeCard.InProgress::before{content:\"\";position:absolute;inset:0;border-radius:var(--emw--button-border-radius, 4px);padding:1px;background:linear-gradient(98.25deg, #FF9400 22.48%, #FEF746 131.02%, #FFE24A 131.9%);-webkit-mask:linear-gradient(#FFF 0 0) content-box, linear-gradient(#FFF 0 0);-webkit-mask-composite:xor;mask-composite:exclude}.ChallengeCardHeader{display:flex;justify-content:space-between;gap:24px;margin-bottom:12px}.ChallengeName{color:var(--emw--color-typography, #FFFFFF);font-family:\"Montserrat\", sans-serif;line-height:22px;font-weight:700;font-size:18px;word-break:break-word}.ChallengeJoinButton{transition:all 0.5s ease-out;background:linear-gradient(98.25deg, #FF9400 22.48%, #FEF746 131.02%, #FFE24A 131.9%);color:var(--emw--color-typography, #1E1638);border-radius:99px;min-width:88px;height:32px;font-size:14px;font-weight:700;position:relative;font-family:\"Montserrat\", sans-serif}.ChallengeJoinButton.Joined{background:linear-gradient(98.25deg, #FF9400 22.48%, #FEF746 131.02%, #FFE24A 131.9%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.ChallengeJoinButton.Joined::before{border-radius:99px}.ChallengesListEmpty{padding:20px 32px}.ChallengesListEmpty h2{margin:0 0 16px 0;text-align:center;font-weight:600;font-size:20px;line-height:24px;font-family:\"Montserrat\", sans-serif;color:var(--emw--color-typography, #FFFFFF)}.ChallengesListEmpty p{font-size:14px;line-height:17px;color:var(--emw--color-gray-100, #BBB9C3)}.ChallengeCountdown{color:var(--emw--color-gray-100, #BBB9C3);font-size:12px;line-height:12px}.ChallengesTooltipBackdrop{padding:48px 30px 0;position:absolute;width:100%;height:100%;inset:0;background-color:rgba(0, 0, 0, 0.5)}.ChallengesTooltipBackdrop .ChallengesTooltip{border:1px solid var(--emw--button-border-color, #403956);background-color:var(--emw--color-background, #1E1638);border-radius:8px;padding:32px;font-size:14px;line-height:17px;color:var(--emw--color-gray-100, #BBB9C3);position:relative}.ChallengesTooltipBackdrop .ChallengesTooltip .ChallengesIconButton{top:12px;right:6px;position:absolute}.ChallengesListPopup.Tablet .ChallengesListPopupHeader,.ChallengesListPopup.Desktop .ChallengesListPopupHeader{padding-top:16px}.ChallengesListPopup.Tablet .ChallengesListPopupHeaderName,.ChallengesListPopup.Desktop .ChallengesListPopupHeaderName{font-size:16px;line-height:16px}.ChallengesListPopup.Tablet .ChallengesIconButton,.ChallengesListPopup.Desktop .ChallengesIconButton{width:24px;height:24px}.ChallengesListPopup.Tablet .ChallengesList,.ChallengesListPopup.Desktop .ChallengesList{padding:20px 24px 0;row-gap:20px}.ChallengesListPopup.Tablet .ChallengeCardHeader,.ChallengesListPopup.Desktop .ChallengeCardHeader{margin-bottom:16px}.ChallengesListPopup.Tablet .ChallengeName,.ChallengesListPopup.Desktop .ChallengeName{line-height:27px;font-size:22px}.ChallengesListPopup.Tablet .ChallengeJoinButton,.ChallengesListPopup.Desktop .ChallengeJoinButton{min-width:100px;height:36px;font-size:16px}.ChallengesListPopup.Tablet .ChallengeCountdown,.ChallengesListPopup.Desktop .ChallengeCountdown{font-size:14px;line-height:14px}.ChallengesListPopup.Tablet .ChallengesTooltip,.ChallengesListPopup.Desktop .ChallengesTooltip{padding:60px 65px;font-size:16px;line-height:20px}.ChallengesListPopup.Tablet .ChallengesTooltip .ChallengesIconButton,.ChallengesListPopup.Desktop .ChallengesTooltip .ChallengesIconButton{top:24px;right:24px}";
+const casinoEngagementSuiteChallengesListCss = "@import url(\"https://fonts.googleapis.com/css2?family=Montserrat:wght@600&display=swap\");:host{display:block;font-family:inherit}*{box-sizing:border-box;margin:0;padding:0}button{border:none;background:none;cursor:pointer}button:focus{outline:none}.ChallengesListPopup{display:flex;height:100%;background-color:var(--emw--color-background, #1E1638);border-radius:8px;overflow:hidden;flex-direction:column;position:relative}.ChallengesListPopupHeader{display:flex;justify-content:space-between;align-items:center;padding:12px 8px 8px}.ChallengesIconButton{width:16px;height:16px;cursor:pointer}.ChallengesListPopupHeaderName{color:var(--emw--color-gray-100, #BBB9C3);font-size:14px;font-weight:500;line-height:14px}.ChallengesListWrapper{overflow-y:auto;-ms-overflow-style:none;scrollbar-width:none}.ChallengesListWrapper::-webkit-scrollbar{display:none}.ChallengesList{display:flex;flex-direction:column;row-gap:12px;padding:8px 19px 0}.ChallengeCard{padding:15px 15px 19px;border:1px solid var(--emw--button-border-color, #403956);border-radius:6px;position:relative;cursor:pointer}.ChallengeJoinButton.Joined::before,.ChallengeCard.InProgress::before{content:\"\";position:absolute;inset:0;border-radius:var(--emw--button-border-radius, 4px);padding:1px;background:linear-gradient(98.25deg, #FF9400 22.48%, #FEF746 131.02%, #FFE24A 131.9%);-webkit-mask:linear-gradient(#FFF 0 0) content-box, linear-gradient(#FFF 0 0);-webkit-mask-composite:xor;mask-composite:exclude}.ChallengeCardHeader{display:flex;justify-content:space-between;gap:24px;margin-bottom:12px}.ChallengeName{color:var(--emw--color-typography, #FFFFFF);font-family:\"Montserrat\", sans-serif;line-height:22px;font-weight:700;font-size:18px;word-break:break-word}.ChallengeJoinButton{transition:all 0.5s ease-out;background:linear-gradient(98.25deg, #FF9400 22.48%, #FEF746 131.02%, #FFE24A 131.9%);color:var(--emw--color-typography, #1E1638);border-radius:99px;min-width:88px;height:32px;font-size:14px;font-weight:700;position:relative;font-family:\"Montserrat\", sans-serif}.ChallengeJoinButton.Joined{background:linear-gradient(98.25deg, #FF9400 22.48%, #FEF746 131.02%, #FFE24A 131.9%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.ChallengeJoinButton.Joined::before{border-radius:99px}.Disabled{opacity:0.5;pointer-events:none;cursor:auto}.ChallengesListEmpty{padding:20px 32px}.ChallengesListEmpty h2{margin:0 0 16px 0;text-align:center;font-weight:600;font-size:20px;line-height:24px;font-family:\"Montserrat\", sans-serif;color:var(--emw--color-typography, #FFFFFF)}.ChallengesListEmpty p{font-size:14px;line-height:17px;color:var(--emw--color-gray-100, #BBB9C3)}.ChallengeCountdown{color:var(--emw--color-gray-100, #BBB9C3);font-size:12px;line-height:12px}.ChallengeLabel{min-width:35px;height:18px;background:linear-gradient(180deg, #FFB801 15.86%, #FEF746 31.36%, #FBFFE0 36.86%, #FFFA60 47.86%, #FF9400 87.36%);border-radius:2px;display:none;position:absolute;top:-11px;right:11px;padding:0 2px;align-items:center;justify-content:center}.ChallengeLabel span{display:inline-block;text-transform:uppercase;font-size:10px;line-height:10px;font-weight:700;font-family:\"Montserrat\", sans-serif;color:var(--emw--color-typography, #1E1638)}.ShowChallengeLabel{display:inline-flex}.ChallengesTooltipBackdrop{padding:48px 30px 0;position:absolute;width:100%;height:100%;inset:0;background-color:rgba(0, 0, 0, 0.5)}.ChallengesTooltipBackdrop .ChallengesTooltip{border:1px solid var(--emw--button-border-color, #403956);background-color:var(--emw--color-background, #1E1638);border-radius:8px;padding:32px;font-size:14px;line-height:17px;color:var(--emw--color-gray-100, #BBB9C3);position:relative}.ChallengesTooltipBackdrop .ChallengesTooltip .ChallengesIconButton{top:12px;right:6px;position:absolute}.ChallengesListPopup.Tablet .ChallengesListPopupHeader,.ChallengesListPopup.Desktop .ChallengesListPopupHeader{padding-top:16px}.ChallengesListPopup.Tablet .ChallengesListPopupHeaderName,.ChallengesListPopup.Desktop .ChallengesListPopupHeaderName{font-size:16px;line-height:16px}.ChallengesListPopup.Tablet .ChallengesIconButton,.ChallengesListPopup.Desktop .ChallengesIconButton{width:24px;height:24px}.ChallengesListPopup.Tablet .ChallengesList,.ChallengesListPopup.Desktop .ChallengesList{padding:20px 24px 0;row-gap:20px}.ChallengesListPopup.Tablet .ChallengeCardHeader,.ChallengesListPopup.Desktop .ChallengeCardHeader{margin-bottom:16px}.ChallengesListPopup.Tablet .ChallengeName,.ChallengesListPopup.Desktop .ChallengeName{line-height:27px;font-size:22px}.ChallengesListPopup.Tablet .ChallengeJoinButton,.ChallengesListPopup.Desktop .ChallengeJoinButton{min-width:100px;height:36px;font-size:16px}.ChallengesListPopup.Tablet .ChallengeCountdown,.ChallengesListPopup.Desktop .ChallengeCountdown{font-size:14px;line-height:14px}.ChallengesListPopup.Tablet .ChallengesTooltip,.ChallengesListPopup.Desktop .ChallengesTooltip{padding:60px 65px;font-size:16px;line-height:20px}.ChallengesListPopup.Tablet .ChallengesTooltip .ChallengesIconButton,.ChallengesListPopup.Desktop .ChallengesTooltip .ChallengesIconButton{top:24px;right:24px}";
 
 const CasinoEngagementSuiteChallengesList$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -958,6 +204,8 @@ const CasinoEngagementSuiteChallengesList$1 = /*@__PURE__*/ proxyCustomElement(c
     this.tooltip = false;
     this.timers = {};
     this.limitStylingAppends = false;
+    this.newChallengeIds = [];
+    this.pausedChallengeIds = [];
     this.setClientStyling = () => {
       let sheet = document.createElement('style');
       sheet.innerHTML = this.clientStyling;
@@ -979,10 +227,12 @@ const CasinoEngagementSuiteChallengesList$1 = /*@__PURE__*/ proxyCustomElement(c
     this.handleCloseClick = () => {
       this.close.emit();
       this.tooltip = false;
+      this.newChallengeIds = [];
     };
     this.handleChallengeClick = (ev) => {
       const id = +ev.currentTarget.getAttribute('data-id');
-      window.postMessage({ type: `ChallengeClick`, id });
+      window.postMessage({ type: 'ChallengeClick', id });
+      this.newChallengeIds = this.newChallengeIds.filter(item => item !== id);
     };
     this.showTooltip = () => {
       this.tooltip = true;
@@ -990,6 +240,32 @@ const CasinoEngagementSuiteChallengesList$1 = /*@__PURE__*/ proxyCustomElement(c
     this.hideTooltip = () => {
       this.tooltip = false;
     };
+    this.changeChallengeStatus = (e) => {
+      var _a, _b;
+      e.stopPropagation();
+      const id = +e.currentTarget.getAttribute('data-id');
+      if ((_a = this.inProgressChallenges) === null || _a === void 0 ? void 0 : _a.includes(id)) {
+        window.postMessage({
+          type: 'ShowConfirmationModal',
+          ProgressToDeactivate: id,
+        });
+        return;
+      }
+      if (((_b = this.inProgressChallenges) === null || _b === void 0 ? void 0 : _b.length) > 0) {
+        window.postMessage({
+          type: 'ShowConfirmationModal',
+          ProgressToActivate: id,
+          ProgressToDeactivate: this.inProgressChallenges[0],
+        });
+        return;
+      }
+      window.postMessage({
+        type: 'ChallengeJoinRequest',
+        data: {
+          ProgressToActivate: id,
+        },
+      });
+    };
   }
   challengesPropHandler(value) {
     if (!this.interval && value.length) {
@@ -1001,19 +277,42 @@ const CasinoEngagementSuiteChallengesList$1 = /*@__PURE__*/ proxyCustomElement(c
     }
   }
   handleEvent(e) {
-    const newChallenge = e.data.data;
-    if (e.data.type === 'ChallengeGrant') {
-      const index = this.challenges.findIndex(challenge => differenceInSeconds(new Date(challenge.ExpirationTime), new Date(newChallenge.ExpirationTime)) > 0);
-      if (index > -1) {
-        this.challenges.splice(index, 0, newChallenge);
+    const type = e.data.type;
+    switch (type) {
+      case 'ChallengeGrant': {
+        const newChallenge = e.data.data;
+        const index = this.challenges.findIndex(challenge => differenceInSeconds(new Date(challenge.ExpirationTime), new Date(newChallenge.ExpirationTime)) > 0);
+        if (index > -1) {
+          this.challenges.splice(index, 0, newChallenge);
+        }
+        else {
+          this.challenges.unshift(newChallenge);
+        }
+        this.challenges = [...this.challenges];
+        this.newChallengeIds.push(newChallenge.Id);
+        window.postMessage({ type: 'UpdateChallenges' });
+        break;
       }
-      else {
-        this.challenges.unshift(newChallenge);
+      case 'ChallengeChangeStatusNotification': {
+        const isEnabled = e.data.data.IsEnabled;
+        const id = e.data.data.ChallengeId;
+        if (!isEnabled) {
+          this.pausedChallengeIds.push(id);
+        }
+        else {
+          this.pausedChallengeIds = this.pausedChallengeIds.filter(c => c !== id);
+        }
+        break;
       }
     }
   }
   componentWillLoad() {
+    var _a;
     this.challengesPropHandler(this.challenges);
+    if ((_a = this.challenges) === null || _a === void 0 ? void 0 : _a.length) {
+      this.newChallengeIds = this.challenges.filter(challenge => challenge.IsNew)
+        .map(challenge => challenge.Id);
+    }
   }
   componentDidRender() {
     if (!this.limitStylingAppends && this.host) {
@@ -1033,23 +332,21 @@ const CasinoEngagementSuiteChallengesList$1 = /*@__PURE__*/ proxyCustomElement(c
     }, 1000);
   }
   updateTimers() {
-    const now = new Date();
+    const now = new Date().getTime();
     this.timers = this.challenges.filter(challenge => challenge.Status !== ChallengeProgressStatus.Expired).reduce((acc, challenge) => {
-      const expirationDate = new Date(challenge.ExpirationTime);
-      const diff = differenceInSeconds(expirationDate, now);
-      const duration = intervalToDuration({
-        start: now,
-        end: expirationDate
-      });
+      const expirationDate = new Date(challenge.ExpirationTime).getTime();
+      const diff = expirationDate - now;
       let countdown = '00h:00m:00s';
       if (diff < 1) {
         this.removeChallenge(challenge.Id);
       }
       else {
-        const days = duration.days.toString().padStart(2, '0');
-        const hours = duration.hours.toString().padStart(2, '0');
-        const minutes = duration.minutes.toString().padStart(2, '0');
-        const seconds = duration.seconds.toString().padStart(2, '0');
+        const { days, hours, minutes, seconds } = {
+          days: String(Math.floor(diff / (1000 * 60 * 60 * 24))).padStart(2, '0'),
+          hours: String(Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60))).padStart(2, '0'),
+          minutes: String(Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60))).padStart(2, '0'),
+          seconds: String(Math.floor((diff % (1000 * 60)) / 1000)).padStart(2, '0')
+        };
         countdown = days === '00'
           ? `${hours}h:${minutes}m:${seconds}s`
           : `${days}d:${hours}h:${minutes}m`;
@@ -1067,14 +364,16 @@ const CasinoEngagementSuiteChallengesList$1 = /*@__PURE__*/ proxyCustomElement(c
   getChallengeClasses(challenge) {
     return {
       ChallengeCard: true,
-      InProgress: challenge.Status === ChallengeProgressStatus.InProgress,
+      InProgress: challenge.Status === ChallengeProgressStatus.InProgress
+        && !this.pausedChallengeIds.includes(challenge.Id),
       Completed: this.isChallengeCompleted(challenge),
       Paused: this.isChallengePaused(challenge)
     };
   }
   isChallengePaused(challenge) {
-    return challenge.Status === ChallengeProgressStatus.Started
-      && challenge.LevelProgresses[0].ProgressPercentage > 0;
+    return (challenge.Status === ChallengeProgressStatus.Started
+      && challenge.LevelProgresses[0].ProgressPercentage > 0)
+      || this.pausedChallengeIds.includes(challenge.Id);
   }
   isChallengeCompleted(challenge) {
     return challenge.Status === ChallengeProgressStatus.Completed
@@ -1101,20 +400,23 @@ const CasinoEngagementSuiteChallengesList$1 = /*@__PURE__*/ proxyCustomElement(c
     return -1;
   }
   getChallengeHeaderTemplate(challenge) {
-    return h("div", { class: "ChallengeCardHeader" }, h("div", { class: "ChallengeName" }, challenge.ChallengePresentation.PresentationName), h("button", { class: challenge.Status === ChallengeProgressStatus.InProgress ? 'ChallengeJoinButton Joined' : 'ChallengeJoinButton' }, challenge.Status === ChallengeProgressStatus.InProgress
+    const { Id } = challenge;
+    return h("div", { class: "ChallengeCardHeader" }, h("div", { class: "ChallengeName" }, challenge.ChallengePresentation.PresentationName), h("button", { class: `${challenge.Status === ChallengeProgressStatus.InProgress ?
+        'ChallengeJoinButton Joined' : 'ChallengeJoinButton'} ${this.isJoiningToChallenge ? 'Disabled' : ''}`, onClick: this.changeChallengeStatus, "data-id": Id }, challenge.Status === ChallengeProgressStatus.InProgress
       ? translate('unjoin', this.language)
       : translate('join', this.language)));
   }
   getChallengeTemplate(challenge) {
     const challengeProgress = this.getChallengeProgress(challenge);
     const countdown = this.timers[challenge.Id];
+    const isNewChallenge = this.newChallengeIds.includes(challenge.Id);
     const progressTemplate = challengeProgress > -1
       ? h("casino-engagement-suite-progress-bar", { class: this.device, value: challengeProgress, disabled: this.isChallengePaused(challenge) }, h("span", { slot: "Title", class: "ChallengeCountdown" }, countdown))
       : h("span", { class: "ChallengeCountdown" }, countdown);
-    return (h("div", { class: this.getChallengeClasses(challenge), onClick: this.handleChallengeClick, key: challenge.Id, "data-id": challenge.Id }, this.getChallengeHeaderTemplate(challenge), progressTemplate));
+    return (h("div", { class: this.getChallengeClasses(challenge), onClick: this.handleChallengeClick, key: challenge.Id, "data-id": challenge.Id }, this.getChallengeHeaderTemplate(challenge), progressTemplate, h("div", { class: `ChallengeLabel ${isNewChallenge ? 'ShowChallengeLabel' : ''}` }, h("span", null, translate('new', this.language)))));
   }
   getHeaderTemplate() {
-    return h("header", { class: "ChallengesListPopupHeader" }, h("button", { onClick: this.showTooltip, class: "ChallengesIconButton" }, h("img", { src: "https://static.everymatrix.com/gic/img/engagement-suite/help.svg", alt: "Show tooltip" })), h("div", { class: "ChallengesListPopupHeaderName" }, translate('challenges', this.language)), h("button", { class: "ChallengesIconButton", onClick: this.handleCloseClick }, h("img", { src: "https://static.everymatrix.com/gic/img/engagement-suite/close.svg", alt: "\u0421lose challenges list" })));
+    return h("header", { class: "ChallengesListPopupHeader" }, h("button", { onClick: this.showTooltip, class: "ChallengesIconButton" }, h("img", { src: "https://static.everymatrix.com/gic/img/engagement-suite/help.svg", alt: "Show tooltip" })), h("div", { class: "ChallengesListPopupHeaderName" }, translate('challenges', this.language)), h("button", { class: "ChallengesIconButton", onClick: this.handleCloseClick }, h("img", { src: "https://static.everymatrix.com/gic/img/engagement-suite/close.svg", alt: "Close challenges list" })));
   }
   getListTemplate() {
     if (this.challenges.length) {
@@ -1125,15 +427,10 @@ const CasinoEngagementSuiteChallengesList$1 = /*@__PURE__*/ proxyCustomElement(c
     }
   }
   getTooltipTemplate() {
-    if (this.tooltip) {
-      return h("div", { class: "ChallengesTooltipBackdrop" }, h("div", { class: "ChallengesTooltip" }, h("button", { class: "ChallengesIconButton", onClick: this.hideTooltip }, h("img", { src: "https://static.everymatrix.com/gic/img/engagement-suite/close.svg", alt: "\u0421lose tooltip" })), translate('tooltip', this.language)));
-    }
-    else {
-      return '';
-    }
+    return h("div", { class: "ChallengesTooltipBackdrop" }, h("div", { class: "ChallengesTooltip" }, h("button", { class: "ChallengesIconButton", onClick: this.hideTooltip }, h("img", { src: "https://static.everymatrix.com/gic/img/engagement-suite/close.svg", alt: "Close tooltip" })), translate('tooltip', this.language)));
   }
   render() {
-    return h("div", { class: `ChallengesListPopup ${this.device}` }, this.getHeaderTemplate(), this.getListTemplate(), this.getTooltipTemplate());
+    return h("div", { class: `ChallengesListPopup ${this.device}` }, this.getHeaderTemplate(), this.getListTemplate(), this.tooltip && this.getTooltipTemplate());
   }
   get host() { return this; }
   static get watchers() { return {
@@ -1146,21 +443,30 @@ const CasinoEngagementSuiteChallengesList$1 = /*@__PURE__*/ proxyCustomElement(c
     "language": [1],
     "device": [1],
     "challenges": [1040],
+    "isJoiningToChallenge": [1028, "is-joining-to-challenge"],
+    "inProgressChallenges": [1040],
     "tooltip": [32],
     "timers": [32],
-    "limitStylingAppends": [32]
+    "limitStylingAppends": [32],
+    "newChallengeIds": [32],
+    "pausedChallengeIds": [32]
   }, [[8, "message", "handleEvent"]]]);
 function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["casino-engagement-suite-challenges-list"];
+  const components = ["casino-engagement-suite-challenges-list", "casino-engagement-suite-progress-bar"];
   components.forEach(tagName => { switch (tagName) {
     case "casino-engagement-suite-challenges-list":
       if (!customElements.get(tagName)) {
         customElements.define(tagName, CasinoEngagementSuiteChallengesList$1);
       }
       break;
+    case "casino-engagement-suite-progress-bar":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
   } });
 }