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

package/dist/components/casino-engagement-suite-progress-bar.js

@@ -0,0 +1,6 @@
+import { C as CasinoEngagementSuiteProgressBar$1, d as defineCustomElement$1 } from './casino-engagement-suite-progress-bar2.js';
+
+const CasinoEngagementSuiteProgressBar = CasinoEngagementSuiteProgressBar$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { CasinoEngagementSuiteProgressBar, defineCustomElement };

package/dist/components/casino-engagement-suite-progress-bar2.js

@@ -0,0 +1,94 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+
+const casinoEngagementSuiteProgressBarCss = ":host{display:block;font-family:inherit}:host(.Desktop) .ProgressBarPercent{font-size:14px;line-height:14px}.ProgressBarBackground{height:8px;background-color:var(--emw--color-background, #666178);border-radius:4px;position:relative}.ProgressBarLine{position:absolute;left:0;top:0;bottom:0;border-radius:4px;background:linear-gradient(98.25deg, #FF9400 22.48%, #FEF746 131.02%, #FFE24A 131.9%);transition:width ease-out 0.3s}.ProgressBarInfo{margin-bottom:8px;display:flex;justify-content:space-between;align-items:center}.ProgressBarPercent{font-weight:700;font-size:12px;line-height:12px}.HidePercent .ProgressBarPercent{display:none}.ProgressBar:not(.Disabled) .ProgressBarPercent{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}.ProgressBar.Disabled .ProgressBarPercent{color:var(--emw--color-background, #666178)}.ProgressBar.Disabled .ProgressBarLine{background:var(--emw--color-background-secondary, #474668)}";
+
+const CasinoEngagementSuiteProgressBar = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    /**
+     * Value for the widget
+     */
+    this.value = 0;
+    /**
+     * Shows disabled styles
+     */
+    this.disabled = false;
+    /**
+     * Hide percent value
+     */
+    this.hidePercent = false;
+    /**
+     * Client custom styling via string
+     */
+    this.clientStyling = '';
+    /**
+     * Client custom styling via url
+     */
+    this.clientStylingUrl = '';
+    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);
+      });
+    };
+  }
+  componentDidRender() {
+    if (!this.limitStylingAppends && this.host) {
+      if (this.clientStyling)
+        this.setClientStyling();
+      if (this.clientStylingUrl)
+        this.setClientStylingURL();
+      this.limitStylingAppends = true;
+    }
+  }
+  getProgressBarClasses() {
+    return {
+      ProgressBar: true,
+      Completed: this.value === 100,
+      Disabled: this.disabled,
+      HidePercent: this.hidePercent
+    };
+  }
+  render() {
+    return h("div", { class: this.getProgressBarClasses(), part: "ProgressBar" }, h("div", { class: "ProgressBarInfo", part: "ProgressBarInfo" }, h("slot", { name: "Title" }, h("div", null)), h("slot", { name: "Percent" }, h("div", { class: "ProgressBarPercent", part: "ProgressBarPercent" }, this.value, "%"))), h("div", { class: "ProgressBarBackground", part: "ProgressBarBackground" }, h("div", { class: "ProgressBarLine", part: "ProgressBarLine", style: { width: this.value + '%' } })));
+  }
+  get host() { return this; }
+  static get style() { return casinoEngagementSuiteProgressBarCss; }
+}, [1, "casino-engagement-suite-progress-bar", {
+    "value": [2],
+    "disabled": [4],
+    "hidePercent": [4, "hide-percent"],
+    "clientStyling": [513, "client-styling"],
+    "clientStylingUrl": [513, "client-styling-url"],
+    "limitStylingAppends": [32]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["casino-engagement-suite-progress-bar"];
+  components.forEach(tagName => { switch (tagName) {
+    case "casino-engagement-suite-progress-bar":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, CasinoEngagementSuiteProgressBar);
+      }
+      break;
+  } });
+}
+
+export { CasinoEngagementSuiteProgressBar as C, defineCustomElement as d };

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

@@ -1,4 +1,4 @@
-import { p as promiseResolve, b as bootstrapLazy } from './index-70e47fe0.js';
+import { p as promiseResolve, b as bootstrapLazy } from './index-ddf7e990.js';
 
 /*
  Stencil Client Patch Browser v2.15.2 | MIT Licensed | https://stenciljs.com
@@ -13,5 +13,5 @@ const patchBrowser = () => {
 };
 
 patchBrowser().then(options => {
-  return bootstrapLazy([["casino-engagement-suite-challenges-list",[[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"]]]]]], options);
+  return bootstrapLazy([["casino-engagement-suite-challenges-list_2",[[1,"casino-engagement-suite-challenges-list",{"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"language":[1],"device":[1],"challenges":[1040],"isJoiningToChallenge":[1028,"is-joining-to-challenge"],"inProgressChallenges":[1040],"tooltip":[32],"timers":[32],"limitStylingAppends":[32],"newChallengeIds":[32],"pausedChallengeIds":[32]},[[8,"message","handleEvent"]]],[1,"casino-engagement-suite-progress-bar",{"value":[2],"disabled":[4],"hidePercent":[4,"hide-percent"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"limitStylingAppends":[32]}]]]], options);
 });

package/dist/esm/casino-engagement-suite-challenges-list_2.entry.js

@@ -0,0 +1,508 @@
+import { r as registerInstance, c as createEvent, h, g as getElement } from './index-ddf7e990.js';
+
+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',
+    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'
+  }
+};
+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 differenceInMilliseconds
+ * @category Millisecond Helpers
+ * @summary Get the number of milliseconds between the given dates.
+ *
+ * @description
+ * Get the number of milliseconds between the given dates.
+ *
+ * @param {Date|Number} dateLeft - the later date
+ * @param {Date|Number} dateRight - the earlier date
+ * @returns {Number} the number of milliseconds
+ * @throws {TypeError} 2 arguments required
+ *
+ * @example
+ * // How many milliseconds are between
+ * // 2 July 2014 12:30:20.600 and 2 July 2014 12:30:21.700?
+ * const result = differenceInMilliseconds(
+ *   new Date(2014, 6, 2, 12, 30, 21, 700),
+ *   new Date(2014, 6, 2, 12, 30, 20, 600)
+ * )
+ * //=> 1100
+ */
+function differenceInMilliseconds(dateLeft, dateRight) {
+  requiredArgs(2, arguments);
+  return toDate(dateLeft).getTime() - toDate(dateRight).getTime();
+}
+
+var roundingMap = {
+  ceil: Math.ceil,
+  round: Math.round,
+  floor: Math.floor,
+  trunc: function trunc(value) {
+    return value < 0 ? Math.ceil(value) : Math.floor(value);
+  } // Math.trunc is not supported by IE
+};
+
+var defaultRoundingMethod = 'trunc';
+function getRoundingMethod(method) {
+  return method ? roundingMap[method] : roundingMap[defaultRoundingMethod];
+}
+
+/**
+ * @name differenceInSeconds
+ * @category Second Helpers
+ * @summary Get the number of seconds between the given dates.
+ *
+ * @description
+ * Get the number of seconds between the given dates.
+ *
+ * @param {Date|Number} dateLeft - the later date
+ * @param {Date|Number} dateRight - the earlier date
+ * @param {Object} [options] - an object with options.
+ * @param {String} [options.roundingMethod='trunc'] - a rounding method (`ceil`, `floor`, `round` or `trunc`)
+ * @returns {Number} the number of seconds
+ * @throws {TypeError} 2 arguments required
+ *
+ * @example
+ * // How many seconds are between
+ * // 2 July 2014 12:30:07.999 and 2 July 2014 12:30:20.000?
+ * const result = differenceInSeconds(
+ *   new Date(2014, 6, 2, 12, 30, 20, 0),
+ *   new Date(2014, 6, 2, 12, 30, 7, 999)
+ * )
+ * //=> 12
+ */
+function differenceInSeconds(dateLeft, dateRight, options) {
+  requiredArgs(2, arguments);
+  var diff = differenceInMilliseconds(dateLeft, dateRight) / 1000;
+  return getRoundingMethod(options === null || options === void 0 ? void 0 : options.roundingMethod)(diff);
+}
+
+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 = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    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.newChallengeIds = [];
+    this.pausedChallengeIds = [];
+    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.newChallengeIds = [];
+    };
+    this.handleChallengeClick = (ev) => {
+      const id = +ev.currentTarget.getAttribute('data-id');
+      window.postMessage({ type: 'ChallengeClick', id });
+      this.newChallengeIds = this.newChallengeIds.filter(item => item !== id);
+    };
+    this.showTooltip = () => {
+      this.tooltip = true;
+    };
+    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) {
+      this.updateTimers();
+      this.startCountdown();
+    }
+    if (this.interval && !value.length) {
+      clearInterval(this.interval);
+    }
+  }
+  handleEvent(e) {
+    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;
+      }
+      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) {
+      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().getTime();
+    this.timers = this.challenges.filter(challenge => challenge.Status !== ChallengeProgressStatus.Expired).reduce((acc, challenge) => {
+      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, 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`;
+      }
+      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
+        && !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)
+      || this.pausedChallengeIds.includes(challenge.Id);
+  }
+  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) {
+    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, 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: "Close 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() {
+    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.tooltip && this.getTooltipTemplate());
+  }
+  get host() { return getElement(this); }
+  static get watchers() { return {
+    "challenges": ["challengesPropHandler"]
+  }; }
+};
+CasinoEngagementSuiteChallengesList.style = casinoEngagementSuiteChallengesListCss;
+
+const casinoEngagementSuiteProgressBarCss = ":host{display:block;font-family:inherit}:host(.Desktop) .ProgressBarPercent{font-size:14px;line-height:14px}.ProgressBarBackground{height:8px;background-color:var(--emw--color-background, #666178);border-radius:4px;position:relative}.ProgressBarLine{position:absolute;left:0;top:0;bottom:0;border-radius:4px;background:linear-gradient(98.25deg, #FF9400 22.48%, #FEF746 131.02%, #FFE24A 131.9%);transition:width ease-out 0.3s}.ProgressBarInfo{margin-bottom:8px;display:flex;justify-content:space-between;align-items:center}.ProgressBarPercent{font-weight:700;font-size:12px;line-height:12px}.HidePercent .ProgressBarPercent{display:none}.ProgressBar:not(.Disabled) .ProgressBarPercent{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}.ProgressBar.Disabled .ProgressBarPercent{color:var(--emw--color-background, #666178)}.ProgressBar.Disabled .ProgressBarLine{background:var(--emw--color-background-secondary, #474668)}";
+
+const CasinoEngagementSuiteProgressBar = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    /**
+     * Value for the widget
+     */
+    this.value = 0;
+    /**
+     * Shows disabled styles
+     */
+    this.disabled = false;
+    /**
+     * Hide percent value
+     */
+    this.hidePercent = false;
+    /**
+     * Client custom styling via string
+     */
+    this.clientStyling = '';
+    /**
+     * Client custom styling via url
+     */
+    this.clientStylingUrl = '';
+    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);
+      });
+    };
+  }
+  componentDidRender() {
+    if (!this.limitStylingAppends && this.host) {
+      if (this.clientStyling)
+        this.setClientStyling();
+      if (this.clientStylingUrl)
+        this.setClientStylingURL();
+      this.limitStylingAppends = true;
+    }
+  }
+  getProgressBarClasses() {
+    return {
+      ProgressBar: true,
+      Completed: this.value === 100,
+      Disabled: this.disabled,
+      HidePercent: this.hidePercent
+    };
+  }
+  render() {
+    return h("div", { class: this.getProgressBarClasses(), part: "ProgressBar" }, h("div", { class: "ProgressBarInfo", part: "ProgressBarInfo" }, h("slot", { name: "Title" }, h("div", null)), h("slot", { name: "Percent" }, h("div", { class: "ProgressBarPercent", part: "ProgressBarPercent" }, this.value, "%"))), h("div", { class: "ProgressBarBackground", part: "ProgressBarBackground" }, h("div", { class: "ProgressBarLine", part: "ProgressBarLine", style: { width: this.value + '%' } })));
+  }
+  get host() { return getElement(this); }
+};
+CasinoEngagementSuiteProgressBar.style = casinoEngagementSuiteProgressBarCss;
+
+export { CasinoEngagementSuiteChallengesList as casino_engagement_suite_challenges_list, CasinoEngagementSuiteProgressBar as casino_engagement_suite_progress_bar };