@everymatrix/casino-challenges-overlay 0.3.2 → 0.3.4

package/dist/cjs/{index-87f5caf5.js → index-11e96899.js}

@@ -21,7 +21,7 @@ function _interopNamespace(e) {
 }
 
 const NAMESPACE = 'casino-challenges-overlay';
-const BUILD = /* casino-challenges-overlay */ { allRenderFn: true, appendChildSlotFix: false, asyncLoading: true, asyncQueue: false, attachStyles: true, cloneNodeFix: false, cmpDidLoad: true, cmpDidRender: false, cmpDidUnload: false, cmpDidUpdate: false, cmpShouldUpdate: false, cmpWillLoad: true, cmpWillRender: false, cmpWillUpdate: false, connectedCallback: false, constructableCSS: true, cssAnnotations: true, devTools: false, disconnectedCallback: true, element: false, event: false, experimentalScopedSlotChanges: false, experimentalSlotFixes: false, formAssociated: false, hasRenderFn: true, hostListener: false, hostListenerTarget: false, hostListenerTargetBody: false, hostListenerTargetDocument: false, hostListenerTargetParent: false, hostListenerTargetWindow: false, hotModuleReplacement: false, hydrateClientSide: false, hydrateServerSide: false, hydratedAttribute: false, hydratedClass: true, hydratedSelectorName: "hydrated", initializeNextTick: false, invisiblePrehydration: true, isDebug: false, isDev: false, isTesting: false, lazyLoad: true, lifecycle: true, lifecycleDOMEvents: false, member: true, method: false, mode: false, observeAttribute: true, profile: false, prop: true, propBoolean: false, propMutable: false, propNumber: false, propString: true, reflect: true, scoped: false, scopedSlotTextContentFix: false, scriptDataOpts: false, shadowDelegatesFocus: false, shadowDom: true, slot: false, slotChildNodesFix: false, slotRelocation: false, state: true, style: true, svg: false, taskQueue: true, transformTagName: false, updatable: true, vdomAttribute: true, vdomClass: true, vdomFunctional: false, vdomKey: true, vdomListener: false, vdomPropOrAttr: true, vdomRef: false, vdomRender: true, vdomStyle: true, vdomText: true, vdomXlink: false, watchCallback: true };
+const BUILD = /* casino-challenges-overlay */ { allRenderFn: true, appendChildSlotFix: false, asyncLoading: true, asyncQueue: false, attachStyles: true, cloneNodeFix: false, cmpDidLoad: true, cmpDidRender: false, cmpDidUnload: false, cmpDidUpdate: false, cmpShouldUpdate: false, cmpWillLoad: true, cmpWillRender: false, cmpWillUpdate: false, connectedCallback: false, constructableCSS: true, cssAnnotations: true, devTools: false, disconnectedCallback: true, element: false, event: false, experimentalScopedSlotChanges: false, experimentalSlotFixes: false, formAssociated: false, hasRenderFn: true, hostListener: true, hostListenerTarget: true, hostListenerTargetBody: false, hostListenerTargetDocument: false, hostListenerTargetParent: false, hostListenerTargetWindow: true, hotModuleReplacement: false, hydrateClientSide: false, hydrateServerSide: false, hydratedAttribute: false, hydratedClass: true, hydratedSelectorName: "hydrated", initializeNextTick: false, invisiblePrehydration: true, isDebug: false, isDev: false, isTesting: false, lazyLoad: true, lifecycle: true, lifecycleDOMEvents: false, member: true, method: false, mode: false, observeAttribute: true, profile: false, prop: true, propBoolean: true, propMutable: false, propNumber: false, propString: true, reflect: true, scoped: false, scopedSlotTextContentFix: false, scriptDataOpts: false, shadowDelegatesFocus: false, shadowDom: true, slot: false, slotChildNodesFix: false, slotRelocation: false, state: true, style: true, svg: false, taskQueue: true, transformTagName: false, updatable: true, vdomAttribute: true, vdomClass: true, vdomFunctional: false, vdomKey: true, vdomListener: true, vdomPropOrAttr: true, vdomRef: true, vdomRender: true, vdomStyle: true, vdomText: true, vdomXlink: false, watchCallback: true };
 
 /*
  Stencil Client Platform v4.19.2 | MIT Licensed | https://stenciljs.com
@@ -71,10 +71,10 @@ var loadModule = (cmpMeta, hostRef, hmrVersionId) => {
           }
           switch(bundleId) {
               
-                case 'casino-challenges-overlay.cjs':
+                case 'casino-challenges-overlay_2.cjs':
                     return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
                         /* webpackMode: "lazy" */
-                        './casino-challenges-overlay.cjs.entry.js')); }).then(processMod, consoleError);
+                        './casino-challenges-overlay_2.cjs.entry.js')); }).then(processMod, consoleError);
           }
       }
   return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
@@ -106,6 +106,22 @@ var plt = {
   rel: (el, eventName, listener, opts) => el.removeEventListener(eventName, listener, opts),
   ce: (eventName, opts) => new CustomEvent(eventName, opts)
 };
+var supportsListenerOptions = /* @__PURE__ */ (() => {
+  let supportsListenerOptions2 = false;
+  try {
+    doc.addEventListener(
+      "e",
+      null,
+      Object.defineProperty({}, "passive", {
+        get() {
+          supportsListenerOptions2 = true;
+        }
+      })
+    );
+  } catch (e) {
+  }
+  return supportsListenerOptions2;
+})();
 var promiseResolve = (v) => Promise.resolve(v);
 var supportsConstructableStylesheets = /* @__PURE__ */ (() => {
   try {
@@ -295,6 +311,9 @@ var Host = {};
 var isHost = (node) => node && node.$tag$ === Host;
 var parsePropertyValue = (propValue, propType) => {
   if (propValue != null && !isComplexType(propValue)) {
+    if (propType & 4 /* Boolean */) {
+      return propValue === "false" ? false : propValue === "" || !!propValue;
+    }
     if (propType & 1 /* String */) {
       return String(propValue);
     }
@@ -376,7 +395,7 @@ var getScopeId = (cmp, mode) => "sc-" + (cmp.$tagName$);
 var setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags) => {
   if (oldValue !== newValue) {
     let isProp = isMemberInElement(elm, memberName);
-    memberName.toLowerCase();
+    let ln = memberName.toLowerCase();
     if (memberName === "class") {
       const classList = elm.classList;
       const oldClasses = parseClassList(oldValue);
@@ -404,7 +423,29 @@ var setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags) => {
           }
         }
       }
-    } else if (memberName === "key") ; else {
+    } else if (memberName === "key") ; else if (memberName === "ref") {
+      if (newValue) {
+        newValue(elm);
+      }
+    } else if ((!isProp ) && memberName[0] === "o" && memberName[1] === "n") {
+      if (memberName[2] === "-") {
+        memberName = memberName.slice(3);
+      } else if (isMemberInElement(win, ln)) {
+        memberName = ln.slice(2);
+      } else {
+        memberName = ln[2] + memberName.slice(3);
+      }
+      if (oldValue || newValue) {
+        const capture = memberName.endsWith(CAPTURE_EVENT_SUFFIX);
+        memberName = memberName.replace(CAPTURE_EVENT_REGEX, "");
+        if (oldValue) {
+          plt.rel(elm, memberName, oldValue, capture);
+        }
+        if (newValue) {
+          plt.ael(elm, memberName, newValue, capture);
+        }
+      }
+    } else {
       const isComplex = isComplexType(newValue);
       if ((isProp || isComplex && newValue !== null) && !isSvg) {
         try {
@@ -438,6 +479,8 @@ var setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags) => {
 };
 var parseClassListRegex = /\s/;
 var parseClassList = (value) => !value ? [] : value.split(parseClassListRegex);
+var CAPTURE_EVENT_SUFFIX = "Capture";
+var CAPTURE_EVENT_REGEX = new RegExp(CAPTURE_EVENT_SUFFIX + "$");
 
 // src/runtime/vdom/update-element.ts
 var updateElement = (oldVnode, newVnode, isSvgMode2) => {
@@ -520,6 +563,7 @@ var removeVnodes = (vnodes, startIdx, endIdx) => {
     const vnode = vnodes[index];
     if (vnode) {
       const elm = vnode.$elm$;
+      nullifyVNodeRefs(vnode);
       if (elm) {
         elm.remove();
       }
@@ -644,6 +688,12 @@ var patch = (oldVNode, newVNode2, isInitialRender = false) => {
     elm.data = text;
   }
 };
+var nullifyVNodeRefs = (vNode) => {
+  {
+    vNode.$attrs$ && vNode.$attrs$.ref && vNode.$attrs$.ref(null);
+    vNode.$children$ && vNode.$children$.map(nullifyVNodeRefs);
+  }
+};
 var insertBefore = (parent, newNode, reference) => {
   const inserted = parent == null ? void 0 : parent.insertBefore(newNode, reference);
   return inserted;
@@ -707,6 +757,13 @@ var dispatchHooks = (hostRef, isInitialLoad) => {
   }
   let maybePromise;
   if (isInitialLoad) {
+    {
+      hostRef.$flags$ |= 256 /* isListenReady */;
+      if (hostRef.$queuedListeners$) {
+        hostRef.$queuedListeners$.map(([methodName, event]) => safeCall(instance, methodName, event));
+        hostRef.$queuedListeners$ = void 0;
+      }
+    }
     {
       maybePromise = safeCall(instance, "componentWillLoad");
     }
@@ -1034,6 +1091,7 @@ var connectedCallback = (elm) => {
         initializeComponent(elm, hostRef, cmpMeta);
       }
     } else {
+      addHostEventListeners(elm, hostRef, cmpMeta.$listeners$);
       if (hostRef == null ? void 0 : hostRef.$lazyInstance$) ; else if (hostRef == null ? void 0 : hostRef.$onReadyPromise$) {
         hostRef.$onReadyPromise$.then(() => fireConnectedCallback());
       }
@@ -1049,6 +1107,12 @@ var disconnectInstance = (instance) => {
 var disconnectedCallback = async (elm) => {
   if ((plt.$flags$ & 1 /* isTmpDisconnected */) === 0) {
     const hostRef = getHostRef(elm);
+    {
+      if (hostRef.$rmListeners$) {
+        hostRef.$rmListeners$.map((rmListener) => rmListener());
+        hostRef.$rmListeners$ = void 0;
+      }
+    }
     if (hostRef == null ? void 0 : hostRef.$lazyInstance$) {
       disconnectInstance(hostRef.$lazyInstance$);
     } else if (hostRef == null ? void 0 : hostRef.$onReadyPromise$) {
@@ -1088,6 +1152,9 @@ var bootstrapLazy = (lazyBundles, options = {}) => {
       {
         cmpMeta.$members$ = compactMeta[2];
       }
+      {
+        cmpMeta.$listeners$ = compactMeta[3];
+      }
       {
         cmpMeta.$attrsToReflect$ = [];
       }
@@ -1119,9 +1186,10 @@ var bootstrapLazy = (lazyBundles, options = {}) => {
           }
         }
         connectedCallback() {
-          getHostRef(this);
+          const hostRef = getHostRef(this);
           if (!this.hasRegisteredEventListeners) {
             this.hasRegisteredEventListeners = true;
+            addHostEventListeners(this, hostRef, cmpMeta.$listeners$);
           }
           if (appLoadFallback) {
             clearTimeout(appLoadFallback);
@@ -1176,6 +1244,39 @@ var bootstrapLazy = (lazyBundles, options = {}) => {
   }
   endBootstrap();
 };
+var addHostEventListeners = (elm, hostRef, listeners, attachParentListeners) => {
+  if (listeners) {
+    listeners.map(([flags, name, method]) => {
+      const target = getHostListenerTarget(elm, flags) ;
+      const handler = hostListenerProxy(hostRef, method);
+      const opts = hostListenerOpts(flags);
+      plt.ael(target, name, handler, opts);
+      (hostRef.$rmListeners$ = hostRef.$rmListeners$ || []).push(() => plt.rel(target, name, handler, opts));
+    });
+  }
+};
+var hostListenerProxy = (hostRef, methodName) => (ev) => {
+  var _a;
+  try {
+    {
+      if (hostRef.$flags$ & 256 /* isListenReady */) {
+        (_a = hostRef.$lazyInstance$) == null ? void 0 : _a[methodName](ev);
+      } else {
+        (hostRef.$queuedListeners$ = hostRef.$queuedListeners$ || []).push([methodName, ev]);
+      }
+    }
+  } catch (e) {
+    consoleError(e);
+  }
+};
+var getHostListenerTarget = (elm, flags) => {
+  if (flags & 8 /* TargetWindow */) return win;
+  return elm;
+};
+var hostListenerOpts = (flags) => supportsListenerOptions ? {
+  passive: (flags & 1 /* Passive */) !== 0,
+  capture: (flags & 2 /* Capture */) !== 0
+} : (flags & 2 /* Capture */) !== 0;
 
 // src/runtime/nonce.ts
 var setNonce = (nonce) => plt.$nonce$ = nonce;

package/dist/cjs/index.cjs.js

@@ -2,8 +2,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const casinoChallengesOverlay = require('./casino-challenges-overlay-e96b8732.js');
-require('./index-87f5caf5.js');
+const casinoChallengesOverlay = require('./casino-challenges-overlay-a75f839f.js');
+require('./index-11e96899.js');
 
 
 

package/dist/cjs/loader.cjs.js

@@ -2,13 +2,13 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-87f5caf5.js');
+const index = require('./index-11e96899.js');
 const appGlobals = require('./app-globals-3a1e7e63.js');
 
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;
   await appGlobals.globalScripts();
-  return index.bootstrapLazy([["casino-challenges-overlay.cjs",[[1,"casino-challenges-overlay",{"mbSource":[513,"mb-source"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"translationUrl":[513,"translation-url"],"language":[513],"progress":[32],"isGrayed":[32],"isNew":[32],"isGift":[32],"isNotification":[32]},null,{"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingUrlChange"],"mbSource":["handleMbSourceChange"]}]]]], options);
+  return index.bootstrapLazy([["casino-challenges-overlay_2.cjs",[[1,"casino-challenges-overlay",{"mbSource":[513,"mb-source"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"translationUrl":[513,"translation-url"],"language":[513],"challenges":[16],"progress":[32],"isGrayed":[32],"isNew":[32],"isGift":[32],"isNotification":[32],"inProgressCount":[32],"activeChallenge":[32],"showModal":[32],"modalTitle":[32],"modalSubTitle":[32],"modalBtnText":[32],"modalShowIcon":[32],"modalReward":[32],"modalAddition":[32],"modalAdditionLink":[32],"modalAdditionText":[32]},[[8,"message","handleEvent"]],{"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingUrlChange"],"mbSource":["handleMbSourceChange"],"challenges":["handleChallengesChange"]}],[1,"casino-challenges-overlay-modal",{"mbSource":[513,"mb-source"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"language":[1],"isOpen":[4,"is-open"],"showIcon":[4,"show-icon"],"showButton":[4,"show-button"],"header":[1],"subtitle":[1],"reward":[1],"addition":[1],"additionLinkUrl":[1,"addition-link-url"],"additionLinkText":[1,"addition-link-text"],"actionText":[1,"action-text"],"translationUrl":[513,"translation-url"],"handleClick":[16]},null,{"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingUrlChange"],"mbSource":["handleMbSourceChange"]}]]]], options);
 };
 
 exports.setNonce = index.setNonce;

package/dist/collection/collection-manifest.json

@@ -7,6 +7,13 @@
     "version": "4.19.2",
     "typescriptVersion": "5.4.5"
   },
-  "collections": [],
+  "collections": [
+    {
+      "name": "@everymatrix/casino-challenges-overlay-modal",
+      "tags": [
+        "casino-challenges-overlay-modal"
+      ]
+    }
+  ],
   "bundles": []
 }

package/dist/collection/components/casino-challenges-overlay/casino-challenges-overlay.css

@@ -40,6 +40,9 @@
   z-index: 304;
   top: 0;
 }
+.circle.grayed {
+  mix-blend-mode: luminosity;
+}
 .circle.grayed::before {
   display: block;
 }

package/dist/collection/components/casino-challenges-overlay/casino-challenges-overlay.js

@@ -4,6 +4,8 @@ import bgIcon from "../../assets/bg-icon.svg";
 import bellIcon from "../../assets/bell.svg";
 import giftIcon from "../../assets/gift.svg";
 import { resolveTranslationUrl, translate } from "../../utils/locale.utils";
+import { EChallengeProgressStatus, EChallengeRewardType, EChallengeStatus } from "../../utils/types";
+import "../../../../../casino-challenges-overlay-modal/dist/types/index";
 export class CasinoChallengesOverlay {
     constructor() {
         this.mbSource = undefined;
@@ -11,11 +13,23 @@ export class CasinoChallengesOverlay {
         this.clientStylingUrl = undefined;
         this.translationUrl = '';
         this.language = 'en';
-        this.progress = 50;
+        this.challenges = undefined;
+        this.progress = 0;
         this.isGrayed = false;
         this.isNew = false;
         this.isGift = false;
         this.isNotification = false;
+        this.inProgressCount = 0;
+        this.activeChallenge = '';
+        this.showModal = false;
+        this.modalTitle = '';
+        this.modalSubTitle = '';
+        this.modalBtnText = '';
+        this.modalShowIcon = true;
+        this.modalReward = '';
+        this.modalAddition = '';
+        this.modalAdditionLink = '';
+        this.modalAdditionText = '';
     }
     handleClientStylingChange(newValue, oldValue) {
         if (newValue != oldValue) {
@@ -32,7 +46,134 @@ export class CasinoChallengesOverlay {
             setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`, this.stylingSubscription);
         }
     }
+    handleChallengesChange(newValue) {
+        let maxPercentage = 0;
+        let count = 0;
+        for (const challenge of newValue.filter((x) => x.Status === EChallengeStatus.InProgress)) {
+            if (challenge.Status === EChallengeStatus.InProgress) {
+                count++;
+                for (const level of challenge.LevelProgresses) {
+                    if (level.ProgressStatus === EChallengeProgressStatus.InProgress) {
+                        if (level.ProgressPercentage > maxPercentage) {
+                            maxPercentage = level.ProgressPercentage;
+                            this.activeChallenge = challenge.ChallengeId;
+                        }
+                    }
+                }
+            }
+        }
+        this.progress = maxPercentage;
+        this.inProgressCount = count;
+    }
+    handleEvent(e) {
+        const { type, data } = e === null || e === void 0 ? void 0 : e.data;
+        switch (type) {
+            case 'UpdateChallengeProgress': {
+                const newChallenge = data;
+                let completedLevel = '';
+                this.isNew = this.isNotification = this.isGift = false;
+                const newChallenges = this.challenges.map((challenge) => {
+                    if (challenge.ChallengeId !== (newChallenge === null || newChallenge === void 0 ? void 0 : newChallenge.ChallengeId))
+                        return challenge;
+                    const updatedLevels = challenge.LevelProgresses.map((level) => {
+                        const newLevelData = newChallenge === null || newChallenge === void 0 ? void 0 : newChallenge.Levels.find((l) => l.LevelId === level.LevelId);
+                        if (!newLevelData)
+                            return level;
+                        if (newLevelData.ProgressPercentage === 100) {
+                            completedLevel = level.LevelId;
+                            if (level.Rewards.every((r) => r.Type === EChallengeRewardType.Challenge)) {
+                                this.isNew = true;
+                            }
+                            else {
+                                this.isGift = true;
+                            }
+                        }
+                        return Object.assign(Object.assign({}, level), newLevelData);
+                    });
+                    return Object.assign(Object.assign({}, challenge), { Status: newChallenge.Status, LevelProgresses: updatedLevels });
+                });
+                this.challenges = newChallenges;
+                if (completedLevel) {
+                    for (const challenge of this.challenges) {
+                        for (const level of challenge.LevelProgresses) {
+                            if (level.LevelId === completedLevel) {
+                                level.ProgressStatus = EChallengeProgressStatus.Completed;
+                                const nextLevel = challenge.LevelProgresses.find((z) => z.OrderNumber === level.OrderNumber + 1);
+                                if (nextLevel) {
+                                    nextLevel.ProgressStatus = EChallengeProgressStatus.InProgress;
+                                }
+                                break;
+                            }
+                        }
+                    }
+                }
+                break;
+            }
+            case 'ChallengeForfeitNotification': {
+                this.handleStatusEvent(data);
+                break;
+            }
+            case 'ShowChallengeRewardModal': {
+                this.showModal = true;
+                if (data === null || data === void 0 ? void 0 : data.HasError) {
+                    this.modalTitle = translate('errorTitle', this.language);
+                    this.modalSubTitle = translate('errorSubTitle', this.language);
+                    this.modalBtnText = translate('errorBtnText', this.language);
+                    this.modalShowIcon = false;
+                }
+                else {
+                    const completedLevel = this.challenges
+                        .flatMap((x) => x.LevelProgresses || [])
+                        .find((level) => level.LevelId === (data === null || data === void 0 ? void 0 : data.LevelId));
+                    this.modalSubTitle = translate('level', this.language) + ' 3 ' + translate('completed', this.language);
+                    this.modalReward = completedLevel.Rewards.map((reward) => reward.RewardDescription).join(' + ');
+                    if (completedLevel.Rewards.some((x) => x.Type === EChallengeRewardType.Custom)) {
+                        this.modalAddition = translate('physicalReward', this.language);
+                        this.modalAdditionText = translate('linkText', this.language);
+                    }
+                }
+                break;
+            }
+            case 'ChallengeChangeStatusNotification': {
+                this.handleStatusEvent(data);
+            }
+        }
+    }
+    handleStatusEvent(data) {
+        const newChallenges = [...this.challenges];
+        newChallenges.forEach(({ ChallengeId }, i) => {
+            if ((data === null || data === void 0 ? void 0 : data.ChallengeId) === ChallengeId) {
+                if ((data === null || data === void 0 ? void 0 : data.IsEnabled) === true) {
+                    newChallenges[i] = Object.assign(Object.assign({}, newChallenges[i]), { Status: EChallengeStatus.InProgress });
+                    this.challenges = newChallenges;
+                    return;
+                }
+                else {
+                    newChallenges[i] = Object.assign(Object.assign({}, newChallenges[i]), { Status: EChallengeStatus.Forfeited });
+                }
+            }
+        });
+        if ((data === null || data === void 0 ? void 0 : data.ChallengeId) === this.activeChallenge) {
+            this.isNotification = true;
+            if (this.inProgressCount === 1) {
+                setTimeout(() => {
+                    this.isGrayed = true;
+                    this.isNotification = false;
+                }, 10000);
+            }
+            else if (this.inProgressCount > 1) {
+                setTimeout(() => {
+                    this.challenges = newChallenges;
+                    this.isNotification = false;
+                }, 10000);
+            }
+        }
+        else {
+            this.challenges = newChallenges;
+        }
+    }
     componentWillLoad() {
+        this.handleChallengesChange(this.challenges);
         if (this.translationUrl) {
             resolveTranslationUrl(this.translationUrl);
         }
@@ -127,16 +268,29 @@ export class CasinoChallengesOverlay {
         const icon = this.isGift ? giftIcon : this.isNotification ? bellIcon : null;
         if (icon)
             return h("img", { class: "icon", src: icon });
-        return h("div", { class: "gradient-text" }, "1");
+        return h("div", { class: "gradient-text" }, this.inProgressCount);
+    }
+    closeModal() {
+        this.showModal = false;
+        this.modalTitle = '';
+        this.modalSubTitle = '';
+        this.modalBtnText = '';
+        this.modalShowIcon = true;
+        this.modalReward = '';
+        this.modalAddition = '';
+        this.modalAdditionText = '';
     }
     render() {
+        if (this.inProgressCount < 1) {
+            return;
+        }
         const dot = this.getCapsuleDotPosition(this.progress);
-        return (h("div", { key: '7af8930a4a36a295e68f38f3c30ae7543b8cc12d', class: "container" }, h("div", { key: '27d77b134ecd3a27309f1e5d84b9c1bd2bbf8bcb', class: `circle ${this.isGrayed ? 'grayed' : ''}`, style: {
+        return (h("div", { class: "container" }, h("div", { class: `circle ${this.isGrayed ? 'grayed' : ''}`, style: {
                 '--progress': `${this.progress}%`
-            } }, h("img", { key: '42486b790d0c33022c2a4acb0ef2ad9b618a1fc2', class: "circle__img", src: bgIcon }), h("div", { key: 'eba633711d409a63ef91621759029d82b64a96b7', class: "circle__content" }, h("span", { key: 'fe466e281f00b217aae2c44be730131e1349eaa3' }, this.progress, "%")), dot && (h("div", { key: 'b76218c1769e78fd165f9a3b0e311ec16dfc67ed', class: "dot", style: {
+            } }, h("img", { class: "circle__img", src: bgIcon }), h("div", { class: "circle__content" }, h("span", null, this.progress, "%")), dot && (h("div", { class: "dot", style: {
                 left: `${dot.x}px`,
                 top: `${dot.y}px`
-            } }))), !this.isGrayed && h("div", { key: '59049b68efc9649973521afb1b05caa11a14a3b4', class: `badge ${this.isNew ? 'new' : ''}` }, this.renderBadgeContent())));
+            } }))), !this.isGrayed && h("div", { class: `badge ${this.isNew ? 'new' : ''}` }, this.renderBadgeContent()), h("casino-challenges-overlay-modal", { isOpen: this.showModal, handleClick: () => this.closeModal(), header: this.modalTitle, subtitle: this.modalSubTitle, actionText: this.modalBtnText, showIcon: this.modalShowIcon, reward: this.modalReward, addition: this.modalAddition, additionLinkText: this.modalAdditionText, additionLinkUrl: this.modalAdditionText })));
     }
     static get is() { return "casino-challenges-overlay"; }
     static get encapsulation() { return "shadow"; }
@@ -238,6 +392,27 @@ export class CasinoChallengesOverlay {
                 "attribute": "language",
                 "reflect": true,
                 "defaultValue": "'en'"
+            },
+            "challenges": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "IChallenge[]",
+                    "resolved": "IChallenge[]",
+                    "references": {
+                        "IChallenge": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "../../../../packages/stencil/casino-challenges-overlay/src/utils/types.ts::IChallenge"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "User challenges list"
+                }
             }
         };
     }
@@ -247,7 +422,18 @@ export class CasinoChallengesOverlay {
             "isGrayed": {},
             "isNew": {},
             "isGift": {},
-            "isNotification": {}
+            "isNotification": {},
+            "inProgressCount": {},
+            "activeChallenge": {},
+            "showModal": {},
+            "modalTitle": {},
+            "modalSubTitle": {},
+            "modalBtnText": {},
+            "modalShowIcon": {},
+            "modalReward": {},
+            "modalAddition": {},
+            "modalAdditionLink": {},
+            "modalAdditionText": {}
         };
     }
     static get watchers() {
@@ -260,6 +446,18 @@ export class CasinoChallengesOverlay {
             }, {
                 "propName": "mbSource",
                 "methodName": "handleMbSourceChange"
+            }, {
+                "propName": "challenges",
+                "methodName": "handleChallengesChange"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "message",
+                "method": "handleEvent",
+                "target": "window",
+                "capture": false,
+                "passive": false
             }];
     }
 }

package/dist/collection/utils/locale.utils.js

@@ -1,7 +1,15 @@
 const DEFAULT_LANGUAGE = 'en';
 const TRANSLATIONS = {
     en: {
-        new: 'new'
+        new: 'new',
+        errorBtnText: 'Ok',
+        errorTitle: 'Reward failed',
+        errorSubTitle: 'Sorry — we couldn’t grant the reward. Please try again.',
+        level: 'Level',
+        completed: 'has been completed!',
+        youWon: 'You have won',
+        physicalReward: 'for physical rewards please contact ',
+        linkText: 'Customer Support'
     },
     ro: {},
     fr: {},

package/dist/collection/utils/types.js

@@ -0,0 +1,32 @@
+export var EChallengeRewardType;
+(function (EChallengeRewardType) {
+    EChallengeRewardType[EChallengeRewardType["FreeSpins"] = 0] = "FreeSpins";
+    EChallengeRewardType[EChallengeRewardType["LuckyWheel"] = 1] = "LuckyWheel";
+    EChallengeRewardType[EChallengeRewardType["Leaderboard"] = 2] = "Leaderboard";
+    EChallengeRewardType[EChallengeRewardType["Challenge"] = 3] = "Challenge";
+    EChallengeRewardType[EChallengeRewardType["Custom"] = 4] = "Custom";
+})(EChallengeRewardType || (EChallengeRewardType = {}));
+export var EChallengeProgressStatus;
+(function (EChallengeProgressStatus) {
+    EChallengeProgressStatus[EChallengeProgressStatus["Closed"] = 0] = "Closed";
+    EChallengeProgressStatus[EChallengeProgressStatus["InProgress"] = 1] = "InProgress";
+    EChallengeProgressStatus[EChallengeProgressStatus["Fillup"] = 2] = "Fillup";
+    EChallengeProgressStatus[EChallengeProgressStatus["Completed"] = 3] = "Completed";
+})(EChallengeProgressStatus || (EChallengeProgressStatus = {}));
+export var EChallengeStatus;
+(function (EChallengeStatus) {
+    EChallengeStatus[EChallengeStatus["Started"] = 0] = "Started";
+    EChallengeStatus[EChallengeStatus["InProgress"] = 1] = "InProgress";
+    EChallengeStatus[EChallengeStatus["PendingLevelReward"] = 2] = "PendingLevelReward";
+    EChallengeStatus[EChallengeStatus["Completed"] = 3] = "Completed";
+    EChallengeStatus[EChallengeStatus["Expired"] = 4] = "Expired";
+    EChallengeStatus[EChallengeStatus["Forfeited"] = 5] = "Forfeited";
+    EChallengeStatus[EChallengeStatus["Awaiting"] = 6] = "Awaiting";
+    EChallengeStatus[EChallengeStatus["Paused"] = 7] = "Paused";
+})(EChallengeStatus || (EChallengeStatus = {}));
+export var EChallengeLevelTargetType;
+(function (EChallengeLevelTargetType) {
+    EChallengeLevelTargetType[EChallengeLevelTargetType["Accumulative"] = 0] = "Accumulative";
+    EChallengeLevelTargetType[EChallengeLevelTargetType["SingleBet"] = 1] = "SingleBet";
+    EChallengeLevelTargetType[EChallengeLevelTargetType["MultipleOneBetSize"] = 2] = "MultipleOneBetSize";
+})(EChallengeLevelTargetType || (EChallengeLevelTargetType = {}));