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

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

@@ -0,0 +1,1170 @@
+import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+import '@everymatrix/casino-engagement-suite-progress-bar';
+
+var ChallengeLevelProgressStatus;
+(function (ChallengeLevelProgressStatus) {
+  ChallengeLevelProgressStatus[ChallengeLevelProgressStatus["Closed"] = 0] = "Closed";
+  ChallengeLevelProgressStatus[ChallengeLevelProgressStatus["InProgress"] = 1] = "InProgress";
+  ChallengeLevelProgressStatus[ChallengeLevelProgressStatus["Fillup"] = 2] = "Fillup";
+  ChallengeLevelProgressStatus[ChallengeLevelProgressStatus["Completed"] = 3] = "Completed";
+})(ChallengeLevelProgressStatus || (ChallengeLevelProgressStatus = {}));
+var ChallengeProgressStatus;
+(function (ChallengeProgressStatus) {
+  ChallengeProgressStatus[ChallengeProgressStatus["Started"] = 0] = "Started";
+  ChallengeProgressStatus[ChallengeProgressStatus["InProgress"] = 1] = "InProgress";
+  ChallengeProgressStatus[ChallengeProgressStatus["PendingLevelReward"] = 2] = "PendingLevelReward";
+  ChallengeProgressStatus[ChallengeProgressStatus["Completed"] = 3] = "Completed";
+  ChallengeProgressStatus[ChallengeProgressStatus["Expired"] = 4] = "Expired";
+})(ChallengeProgressStatus || (ChallengeProgressStatus = {}));
+
+const DEFAULT_LANGUAGE = 'en';
+const SUPPORTED_LANGUAGES = ['en'];
+const TRANSLATIONS = {
+  en: {
+    challenges: 'Challenges',
+    join: 'Join',
+    unjoin: 'Unjoin',
+    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'
+  }
+};
+const translate = (key, customLang) => {
+  const lang = customLang;
+  return TRANSLATIONS[lang !== undefined && SUPPORTED_LANGUAGES.includes(lang) ? lang : DEFAULT_LANGUAGE][key];
+};
+
+function _typeof(o) {
+  "@babel/helpers - typeof";
+
+  return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) {
+    return typeof o;
+  } : function (o) {
+    return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o;
+  }, _typeof(o);
+}
+
+function requiredArgs(required, args) {
+  if (args.length < required) {
+    throw new TypeError(required + ' argument' + (required > 1 ? 's' : '') + ' required, but only ' + args.length + ' present');
+  }
+}
+
+/**
+ * @name toDate
+ * @category Common Helpers
+ * @summary Convert the given argument to an instance of Date.
+ *
+ * @description
+ * Convert the given argument to an instance of Date.
+ *
+ * If the argument is an instance of Date, the function returns its clone.
+ *
+ * If the argument is a number, it is treated as a timestamp.
+ *
+ * If the argument is none of the above, the function returns Invalid Date.
+ *
+ * **Note**: *all* Date arguments passed to any *date-fns* function is processed by `toDate`.
+ *
+ * @param {Date|Number} argument - the value to convert
+ * @returns {Date} the parsed date in the local time zone
+ * @throws {TypeError} 1 argument required
+ *
+ * @example
+ * // Clone the date:
+ * const result = toDate(new Date(2014, 1, 11, 11, 30, 30))
+ * //=> Tue Feb 11 2014 11:30:30
+ *
+ * @example
+ * // Convert the timestamp to date:
+ * const result = toDate(1392098430000)
+ * //=> Tue Feb 11 2014 11:30:30
+ */
+function toDate(argument) {
+  requiredArgs(1, arguments);
+  var argStr = Object.prototype.toString.call(argument);
+
+  // Clone the date
+  if (argument instanceof Date || _typeof(argument) === 'object' && argStr === '[object Date]') {
+    // Prevent the date to lose the milliseconds when passed to new Date() in IE10
+    return new Date(argument.getTime());
+  } else if (typeof argument === 'number' || argStr === '[object Number]') {
+    return new Date(argument);
+  } else {
+    if ((typeof argument === 'string' || argStr === '[object String]') && typeof console !== 'undefined') {
+      // eslint-disable-next-line no-console
+      console.warn("Starting with v2.0.0-beta.1 date-fns doesn't accept strings as date arguments. Please use `parseISO` to parse strings. See: https://github.com/date-fns/date-fns/blob/master/docs/upgradeGuide.md#string-arguments");
+      // eslint-disable-next-line no-console
+      console.warn(new Error().stack);
+    }
+    return new Date(NaN);
+  }
+}
+
+/**
+ * @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
+ * @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 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
+ * @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 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 CasinoEngagementSuiteChallengesList$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.close = createEvent(this, "close", 7);
+    /**
+     * Client custom styling via string
+     */
+    this.clientStyling = '';
+    /**
+     * Client custom styling via url
+     */
+    this.clientStylingUrl = '';
+    /**
+     * Language of the widget
+     */
+    this.language = 'en';
+    /**
+     * User's device type
+     */
+    this.device = 'Mobile';
+    /**
+     * List of challenges
+     */
+    this.challenges = [];
+    this.tooltip = false;
+    this.timers = {};
+    this.limitStylingAppends = false;
+    this.setClientStyling = () => {
+      let sheet = document.createElement('style');
+      sheet.innerHTML = this.clientStyling;
+      this.host.prepend(sheet);
+    };
+    this.setClientStylingURL = () => {
+      let url = new URL(this.clientStylingUrl);
+      let cssFile = document.createElement('style');
+      fetch(url.href)
+        .then((res) => res.text())
+        .then((data) => {
+        cssFile.innerHTML = data;
+        setTimeout(() => { this.host.prepend(cssFile); }, 1);
+      })
+        .catch((err) => {
+        console.log('Error ', err);
+      });
+    };
+    this.handleCloseClick = () => {
+      this.close.emit();
+      this.tooltip = false;
+    };
+    this.handleChallengeClick = (ev) => {
+      const id = +ev.currentTarget.getAttribute('data-id');
+      window.postMessage({ type: `ChallengeClick`, id });
+    };
+    this.showTooltip = () => {
+      this.tooltip = true;
+    };
+    this.hideTooltip = () => {
+      this.tooltip = false;
+    };
+  }
+  challengesPropHandler(value) {
+    if (!this.interval && value.length) {
+      this.updateTimers();
+      this.startCountdown();
+    }
+    if (this.interval && !value.length) {
+      clearInterval(this.interval);
+    }
+  }
+  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);
+      }
+      else {
+        this.challenges.unshift(newChallenge);
+      }
+    }
+  }
+  componentWillLoad() {
+    this.challengesPropHandler(this.challenges);
+  }
+  componentDidRender() {
+    if (!this.limitStylingAppends && this.host) {
+      if (this.clientStyling)
+        this.setClientStyling();
+      if (this.clientStylingUrl)
+        this.setClientStylingURL();
+      this.limitStylingAppends = true;
+    }
+  }
+  disconnectedCallback() {
+    this.interval && clearInterval(this.interval);
+  }
+  startCountdown() {
+    this.interval = setInterval(() => {
+      this.updateTimers();
+    }, 1000);
+  }
+  updateTimers() {
+    const now = new Date();
+    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
+      });
+      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');
+        countdown = days === '00'
+          ? `${hours}h:${minutes}m:${seconds}s`
+          : `${days}d:${hours}h:${minutes}m`;
+      }
+      return Object.assign(Object.assign({}, acc), { [challenge.Id]: countdown });
+    }, {});
+  }
+  removeChallenge(id) {
+    const index = this.challenges.findIndex(challenge => challenge.Id === id);
+    if (index > -1) {
+      this.challenges.splice(index, 1);
+      window.postMessage({ type: 'ChallengeHasExpired', id });
+    }
+  }
+  getChallengeClasses(challenge) {
+    return {
+      ChallengeCard: true,
+      InProgress: challenge.Status === ChallengeProgressStatus.InProgress,
+      Completed: this.isChallengeCompleted(challenge),
+      Paused: this.isChallengePaused(challenge)
+    };
+  }
+  isChallengePaused(challenge) {
+    return challenge.Status === ChallengeProgressStatus.Started
+      && challenge.LevelProgresses[0].ProgressPercentage > 0;
+  }
+  isChallengeCompleted(challenge) {
+    return challenge.Status === ChallengeProgressStatus.Completed
+      || (challenge.Status === ChallengeProgressStatus.PendingLevelReward
+        && challenge.LevelProgresses.every(progress => progress.ProgressPercentage === 100));
+  }
+  getChallengeProgress(challenge) {
+    if (challenge.Status === ChallengeProgressStatus.Completed) {
+      return 100;
+    }
+    if (this.isChallengePaused(challenge)
+      || challenge.Status === ChallengeProgressStatus.PendingLevelReward
+      || challenge.Status === ChallengeProgressStatus.InProgress) {
+      const activeLevel = challenge.LevelProgresses
+        .find(level => level.ProgressStatus === ChallengeLevelProgressStatus.InProgress);
+      /**
+       * It is possible that Paused/InProgress challenge
+       * doesn't have InProgress level
+       * because level becomes InProgress after user's bet.
+       * In this case should be displayed progress of the next level (0%)
+       */
+      return activeLevel ? activeLevel.ProgressPercentage : 0;
+    }
+    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
+      ? translate('unjoin', this.language)
+      : translate('join', this.language)));
+  }
+  getChallengeTemplate(challenge) {
+    const challengeProgress = this.getChallengeProgress(challenge);
+    const countdown = this.timers[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));
+  }
+  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" })));
+  }
+  getListTemplate() {
+    if (this.challenges.length) {
+      return h("div", { class: "ChallengesListWrapper" }, h("div", { class: "ChallengesList" }, this.challenges.map(challenge => this.getChallengeTemplate(challenge))));
+    }
+    else {
+      return h("div", { class: "ChallengesListEmpty" }, h("h2", null, translate('noChallenges', this.language)), h("p", null, translate('tryOtherGames', this.language)));
+    }
+  }
+  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 '';
+    }
+  }
+  render() {
+    return h("div", { class: `ChallengesListPopup ${this.device}` }, this.getHeaderTemplate(), this.getListTemplate(), this.getTooltipTemplate());
+  }
+  get host() { return this; }
+  static get watchers() { return {
+    "challenges": ["challengesPropHandler"]
+  }; }
+  static get style() { return casinoEngagementSuiteChallengesListCss; }
+}, [1, "casino-engagement-suite-challenges-list", {
+    "clientStyling": [513, "client-styling"],
+    "clientStylingUrl": [513, "client-styling-url"],
+    "language": [1],
+    "device": [1],
+    "challenges": [1040],
+    "tooltip": [32],
+    "timers": [32],
+    "limitStylingAppends": [32]
+  }, [[8, "message", "handleEvent"]]]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["casino-engagement-suite-challenges-list"];
+  components.forEach(tagName => { switch (tagName) {
+    case "casino-engagement-suite-challenges-list":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, CasinoEngagementSuiteChallengesList$1);
+      }
+      break;
+  } });
+}
+
+const CasinoEngagementSuiteChallengesList = CasinoEngagementSuiteChallengesList$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { CasinoEngagementSuiteChallengesList, defineCustomElement };