@everymatrix/casino-challenge-card 1.77.5 → 1.77.7

package/dist/cjs/casino-challenge-card.cjs.entry.js

@@ -2,8 +2,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const casinoChallengeCard = require('./casino-challenge-card-e1c638cc.js');
-require('./index-4b50b479.js');
+const casinoChallengeCard = require('./casino-challenge-card-1f059b3e.js');
+require('./index-c337b778.js');
 
 
 

package/dist/cjs/casino-challenge-card.cjs.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-4b50b479.js');
+const index = require('./index-c337b778.js');
 const appGlobals = require('./app-globals-3a1e7e63.js');
 
 /*
@@ -19,7 +19,7 @@ var patchBrowser = () => {
 
 patchBrowser().then(async (options) => {
   await appGlobals.globalScripts();
-  return index.bootstrapLazy([["casino-challenge-card.cjs",[[1,"casino-challenge-card",{"mbSource":[513,"mb-source"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"translationUrl":[513,"translation-url"],"language":[513],"challenge":[16],"tooltipIndex":[32],"timeLeft":[32]},null,{"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingUrlChange"],"mbSource":["handleMbSourceChange"]}]]]], options);
+  return index.bootstrapLazy([["casino-challenge-card.cjs",[[1,"casino-challenge-card",{"mbSource":[513,"mb-source"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"translationUrl":[513,"translation-url"],"language":[513],"endpoint":[513],"domain":[513],"session":[513],"challenge":[16],"isUserAuthorized":[516,"is-user-authorized"],"tooltipIndex":[32],"timeLeft":[32],"error":[32],"hasError":[32],"actionLoading":[32]},null,{"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingUrlChange"],"mbSource":["handleMbSourceChange"]}]]]], options);
 });
 
 exports.setNonce = index.setNonce;

package/dist/cjs/{index-4b50b479.js → index-c337b778.js}

@@ -21,7 +21,7 @@ function _interopNamespace(e) {
 }
 
 const NAMESPACE = 'casino-challenge-card';
-const BUILD = /* casino-challenge-card */ { 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: true, constructableCSS: true, cssAnnotations: true, devTools: false, disconnectedCallback: true, element: false, event: true, 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: true, vdomPropOrAttr: true, vdomRef: true, vdomRender: true, vdomStyle: false, vdomText: true, vdomXlink: false, watchCallback: true };
+const BUILD = /* casino-challenge-card */ { 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: true, constructableCSS: true, cssAnnotations: true, devTools: false, disconnectedCallback: true, element: false, event: true, 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: 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
@@ -295,6 +295,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);
     }
@@ -399,6 +402,27 @@ var setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags) => {
       const newClasses = parseClassList(newValue);
       classList.remove(...oldClasses.filter((c) => c && !newClasses.includes(c)));
       classList.add(...newClasses.filter((c) => c && !oldClasses.includes(c)));
+    } else if (memberName === "style") {
+      {
+        for (const prop in oldValue) {
+          if (!newValue || newValue[prop] == null) {
+            if (prop.includes("-")) {
+              elm.style.removeProperty(prop);
+            } else {
+              elm.style[prop] = "";
+            }
+          }
+        }
+      }
+      for (const prop in newValue) {
+        if (!oldValue || newValue[prop] !== oldValue[prop]) {
+          if (prop.includes("-")) {
+            elm.style.setProperty(prop, newValue[prop]);
+          } else {
+            elm.style[prop] = newValue[prop];
+          }
+        }
+      }
     } else if (memberName === "key") ; else if (memberName === "ref") {
       if (newValue) {
         newValue(elm);

package/dist/cjs/index.cjs.js

@@ -2,8 +2,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const casinoChallengeCard = require('./casino-challenge-card-e1c638cc.js');
-require('./index-4b50b479.js');
+const casinoChallengeCard = require('./casino-challenge-card-1f059b3e.js');
+require('./index-c337b778.js');
 
 
 

package/dist/cjs/loader.cjs.js

@@ -2,13 +2,13 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-4b50b479.js');
+const index = require('./index-c337b778.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-challenge-card.cjs",[[1,"casino-challenge-card",{"mbSource":[513,"mb-source"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"translationUrl":[513,"translation-url"],"language":[513],"challenge":[16],"tooltipIndex":[32],"timeLeft":[32]},null,{"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingUrlChange"],"mbSource":["handleMbSourceChange"]}]]]], options);
+  return index.bootstrapLazy([["casino-challenge-card.cjs",[[1,"casino-challenge-card",{"mbSource":[513,"mb-source"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"translationUrl":[513,"translation-url"],"language":[513],"endpoint":[513],"domain":[513],"session":[513],"challenge":[16],"isUserAuthorized":[516,"is-user-authorized"],"tooltipIndex":[32],"timeLeft":[32],"error":[32],"hasError":[32],"actionLoading":[32]},null,{"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingUrlChange"],"mbSource":["handleMbSourceChange"]}]]]], options);
 };
 
 exports.setNonce = index.setNonce;

package/dist/collection/assets/finish.svg

@@ -0,0 +1,7 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1.64454 12.1262C1.59842 12.1279 1.55129 12.1227 1.50432 12.1099C1.25757 12.0421 1.11249 11.7872 1.18022 11.5403L3.53016 2.9587C3.59791 2.7121 3.85222 2.56674 4.09973 2.6346C4.34647 2.70234 4.49155 2.95727 4.42382 3.20416L2.07388 11.7858C2.01902 11.9855 1.84123 12.1188 1.64454 12.1262Z" fill="#36BA3B"/>
+<path d="M1.56304 11.2634C1.54768 11.2639 1.53198 11.2622 1.51633 11.2579C1.43414 11.2354 1.38582 11.1505 1.40838 11.0682L3.65813 2.91503C3.68069 2.83289 3.76541 2.78447 3.84785 2.80707C3.93004 2.82963 3.97837 2.91455 3.9558 2.99679L1.70605 11.15C1.68778 11.2165 1.62856 11.2609 1.56304 11.2634Z" fill="#BCFCB1" fill-opacity="0.1"/>
+<path d="M12.5193 12.7932L10.7261 13.0234C9.36173 13.1986 7.97361 12.7222 7.09339 11.6652L7.04779 11.6104C6.32843 10.7466 5.30931 10.1654 4.18656 10.1091L2.36239 10.0176L2.30469 9.95988L4.22969 3.18457L6.09312 3.28367C7.22169 3.34368 8.27297 3.87562 8.98981 4.74935C9.86892 5.82087 11.2377 6.36445 12.6124 6.18798L14.3382 5.89767L14.3866 5.96023L12.5193 12.7932Z" fill="#BCFCB1" fill-opacity="0.1"/>
+<path d="M12.4616 12.7356L10.6684 12.9658C9.30403 13.1409 7.94476 12.6069 7.06454 11.5499L7.01894 11.4951C6.29958 10.6312 5.25161 10.1078 4.12886 10.0514L2.30469 9.95996L4.17199 3.12695L6.03542 3.22605C7.16399 3.28607 8.21528 3.818 8.93211 4.69174C9.81122 5.76326 11.18 6.30683 12.5547 6.13036L14.3289 5.90261L12.4616 12.7356Z" fill="#BEFFBA"/>
+<path d="M10.4846 10.7164C10.0913 10.6853 9.70239 10.6038 9.33368 10.4595C8.81235 10.2552 8.34237 9.93721 7.94891 9.54046L8.58169 7.22503C8.97607 7.62191 9.44687 7.93989 9.96914 8.14388C10.3368 8.28753 10.7242 8.37375 11.1163 8.40495L10.4846 10.7164ZM5.64507 7.93902C5.36858 7.86283 5.08321 7.81464 4.79278 7.79918L2.93018 7.70004L3.56313 5.38386L5.42739 5.48301C5.7173 5.4984 6.00215 5.54649 6.27815 5.62252L5.64507 7.93902ZM8.94137 4.68682C9.02168 4.78473 9.10835 4.87553 9.19648 4.96447L9.19225 4.96335L8.57806 7.21077C8.50279 7.13454 8.42536 7.06039 8.35634 6.97819L8.32704 6.94284C7.79735 6.29722 7.08036 5.838 6.28696 5.61781L6.90329 3.36255C7.69621 3.58192 8.41068 4.03999 8.94137 4.68682ZM7.07378 11.5449L7.02819 11.4902C6.50536 10.8623 5.80786 10.4173 5.0353 10.1978L5.65007 7.94823C6.44204 8.16795 7.15774 8.62634 7.68651 9.27083L7.71144 9.30098C7.78284 9.38629 7.86277 9.46347 7.94086 9.54239L7.32104 11.8104C7.2359 11.7251 7.15173 11.6385 7.07378 11.5449ZM12.4709 12.7307L10.6776 12.9609C10.5064 12.9829 10.3351 12.9937 10.165 12.9937C10.0674 12.9937 9.97087 12.9847 9.87413 12.9777L10.4888 10.7288C10.5929 10.7369 10.6973 10.7433 10.8018 10.7433C10.9723 10.7433 11.1429 10.7325 11.3123 10.7107L13.0851 10.4831L12.4709 12.7307ZM13.7221 8.15218L11.9464 8.38012C11.6741 8.41488 11.3997 8.4143 11.127 8.39329L11.7425 6.14108C11.8452 6.149 11.9476 6.15825 12.0512 6.15825C12.2215 6.15825 12.3926 6.14744 12.5639 6.12544L14.3382 5.89769L13.7221 8.15218Z" fill="#36BA3B"/>
+</svg>

package/dist/collection/assets/trophy.svg

@@ -0,0 +1,14 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.62874 10.125V11.2633C8.62874 11.2633 8.14417 11.7632 5.99992 11.7632C3.85566 11.7632 3.37109 11.2633 3.37109 11.2633V10.125H8.62874Z" fill="#E6A45E"/>
+<path d="M8.6288 10.125V11.2633C8.6288 11.2633 8.14423 11.7632 5.99998 11.7632C5.28331 11.7632 4.75205 11.7073 4.3623 11.633C6.31612 11.7594 8.6288 10.125 8.6288 10.125Z" fill="#D8924E"/>
+<path d="M4.8869 9.57471C3.99141 9.67153 3.37109 9.88156 3.37109 10.1251C3.37109 10.4605 4.54806 10.7324 5.99992 10.7324C7.45178 10.7324 8.62874 10.4605 8.62874 10.1251C8.62874 9.88158 8.00854 9.67157 7.1132 9.57474L4.8869 9.57471Z" fill="#FFEDCC"/>
+<path d="M5.43106 7.11426V8.27946C5.43106 9.03276 4.96633 9.70796 4.2627 9.97695C4.2627 9.97695 4.64567 10.2819 6.00023 10.2819C7.35479 10.2819 7.73776 9.97695 7.73776 9.97695C7.03413 9.70796 6.56939 9.03276 6.56939 8.27946V7.11426H5.43106Z" fill="#F7D17F"/>
+<path d="M2.91406 0.783691C2.91406 4.31267 3.6012 7.34873 5.99994 7.34873C8.39867 7.34873 9.08581 4.31267 9.08581 0.783691H2.91406Z" fill="#EAB166"/>
+<path d="M2.94436 2.00277H1.15709C1.05906 2.00277 0.986632 2.09167 1.00707 2.18755C1.14083 2.8152 1.71065 4.85364 3.54097 5.34559L3.85578 6.01533C1.21086 5.36629 0.532426 3.12561 0.358406 2.02205C0.306761 1.69454 0.553763 1.39795 0.885321 1.39795H2.92152L2.94436 2.00277Z" fill="#F7D17F"/>
+<path d="M9.05594 2.00277H10.8432C10.9412 2.00277 11.0137 2.09167 10.9932 2.18755C10.8595 2.8152 10.2897 4.85364 8.45934 5.34559L8.14453 6.01533C10.7894 5.36629 11.4679 3.12561 11.6419 2.02205C11.6935 1.69454 11.4465 1.39795 11.115 1.39795H9.07879L9.05594 2.00277Z" fill="#F7D17F"/>
+<path d="M5.99994 1.32617C7.70422 1.32617 9.08581 1.08231 9.08581 0.781495C9.08581 0.480677 7.70422 0.236816 5.99994 0.236816C4.29565 0.236816 2.91406 0.480677 2.91406 0.781495C2.91406 1.08231 4.29565 1.32617 5.99994 1.32617Z" fill="#E6A45E"/>
+<path d="M8.82366 0.783691C7.89819 7.01684 4.61577 6.57617 4.19092 6.49858C4.6415 7.0368 5.23301 7.34872 6.00043 7.34872C8.39916 7.34872 9.0863 4.31267 9.0863 0.783691H8.82366Z" fill="#E6A45E"/>
+<path d="M4.6424 0.293457C3.62008 0.382063 2.91406 0.566744 2.91406 0.781365C2.91406 1.00194 3.65879 1.19121 4.72717 1.27675C4.6758 0.950781 4.64651 0.622219 4.6424 0.293457Z" fill="#D8924E"/>
+<path d="M6.22548 2.60369L6.3949 3.12511C6.42662 3.22275 6.51761 3.28886 6.62027 3.28886H7.16853C7.39809 3.28886 7.49354 3.58261 7.30782 3.71755L6.86427 4.03981C6.78121 4.10015 6.74646 4.20711 6.77818 4.30475L6.94761 4.82618C7.01854 5.0445 6.76866 5.22606 6.58294 5.09112L6.13939 4.76886C6.05633 4.70852 5.94387 4.70852 5.86081 4.76886L5.41726 5.09112C5.23154 5.22606 4.98165 5.0445 5.05259 4.82618L5.22201 4.30475C5.25374 4.20711 5.21898 4.10015 5.13593 4.03981L4.69238 3.71755C4.50666 3.58261 4.6021 3.28886 4.83167 3.28886H5.37993C5.48259 3.28886 5.57358 3.22275 5.6053 3.12511L5.77472 2.60369C5.84566 2.38536 6.15454 2.38536 6.22548 2.60369Z" fill="#D8924E"/>
+<path d="M6.22548 2.50994L6.3949 3.03136C6.42662 3.129 6.51761 3.19511 6.62027 3.19511H7.16853C7.39809 3.19511 7.49354 3.48886 7.30782 3.6238L6.86427 3.94606C6.78121 4.0064 6.74646 4.11336 6.77818 4.211L6.94761 4.73243C7.01854 4.95075 6.76866 5.13231 6.58294 4.99737L6.13939 4.67511C6.05633 4.61477 5.94387 4.61477 5.86081 4.67511L5.41726 4.99737C5.23154 5.13231 4.98165 4.95075 5.05259 4.73243L5.22201 4.211C5.25374 4.11336 5.21898 4.0064 5.13593 3.94606L4.69238 3.6238C4.50666 3.48886 4.6021 3.19511 4.83167 3.19511H5.37993C5.48259 3.19511 5.57358 3.129 5.6053 3.03136L5.77472 2.50994C5.84566 2.29161 6.15454 2.29161 6.22548 2.50994Z" fill="#FFEDCC"/>
+</svg>

package/dist/collection/components/casino-challenge-card/casino-challenge-card.css

@@ -6,7 +6,7 @@
   box-sizing: border-box;
   position: relative;
 }
-@container challenge-list (max-width: 576px) {
+@container challenges-container (max-width: 576px) {
   .card {
     width: 100%;
   }
@@ -20,11 +20,14 @@
   height: 200px;
   border-radius: 16px 16px 0 0;
 }
-@container challenge-list (max-width: 576px) {
+@container challenges-container (max-width: 576px) {
   .card__image {
     height: 224px;
   }
 }
+.card__image.grayed {
+  opacity: 0.6;
+}
 .card__title {
   color: var(--emw--color-white, #FFFFFF);
   font-size: var(--emw--font-size-medium, 16px);
@@ -49,9 +52,36 @@
   border-color: var(--emw--color-secondary, #e9931e);
   cursor: pointer;
 }
+.card__button.filled {
+  background-color: var(--emw--button-background-primary-color, #18CE51);
+  color: var(--emw--color-white, #FFFFFF);
+  border-color: var(--emw--color-gray-300, #083B17);
+}
+.card__button.filled:hover {
+  color: var(--emw--color-gray-300, #083B17);
+  border-color: transparent;
+  box-shadow: 0 0 4px 0 rgba(188, 252, 177, 0.2), 0 0 20px 0 rgba(0, 183, 79, 0.5);
+}
+.card__button.grayed {
+  color: var(--emw--color-gray-50, #E2E2E2);
+}
+.card__button.grayed:hover {
+  color: var(--emw--color-white, #FFFFFF);
+  border-color: var(--emw--button-primary-border, #24B24E);
+}
+.card__button:hover {
+  border-color: var(--emw--color-secondary, #e9931e);
+  cursor: pointer;
+}
+.card__button:disabled, .card__button:disabled:hover {
+  color: var(--emw--color-gray-50, #E2E2E2);
+  cursor: not-allowed;
+  border: 2px solid var(--emw--button-border-color, #727672);
+  opacity: 0.7;
+}
 .card__badge {
   position: absolute;
-  background: white;
+  background: var(--emw--color-white, #FFFFFF);
   top: 6px;
   right: 6px;
   border-radius: 30px;
@@ -59,12 +89,36 @@
   line-height: 22px;
   font-weight: var(--emw--font-weight-medium, 500);
   font-size: var(--emw--font-size-x-small, 12px);
-  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
+  box-shadow: 0 4px 4px 0 var(--emw--button-box-shadow-color, rgba(0, 0, 0, 0.25));
   backdrop-filter: blur(20px);
+  box-sizing: border-box;
 }
 .card__badge span {
   font-weight: var(--emw--font-weight-bold, 700);
 }
+.card__badge.expired {
+  background: var(--emw--background-gray-color, rgba(250, 250, 250, 0.5019607843));
+  border: 1px solid var(--emw--border-gray-color, #292C29);
+  font-weight: 700;
+}
+.card__badge.completed {
+  background: var(--emw--background-success-color, #C9F0D7);
+  border: 1px solid var(--emw--border-success-color, #00B74F);
+  color: var(--emw--color-gray-300, #083B17);
+  font-weight: 700;
+}
+.card__badge.forfeited {
+  background: var(--emw--background-errored-color, #FFE1DF);
+  border: 1px solid var(--emw--border-errored-color, #D6421E);
+  color: var(--emw--errored-color, #850606);
+  font-weight: 700;
+}
+.card__badge.paused {
+  background: var(--emw--background-warning-color, #F8E4AD);
+  border: 1px solid var(--emw--border-warning-color, #EA9018);
+  color: var(--emw--warning-color, #6D460A);
+  font-weight: 700;
+}
 
 .info-item {
   line-height: 24px;
@@ -72,7 +126,7 @@
   font-weight: var(--emw--font-weight-bold, 700);
   color: var(--emw--color-primary, #1dbf51);
 }
-@container challenge-list (min-width: 576px) {
+@container challenges-container (min-width: 576px) {
   .info-item {
     white-space: nowrap;
     overflow: hidden;
@@ -80,6 +134,9 @@
     vertical-align: bottom;
   }
 }
+.info-item.grayed {
+  color: var(--emw--disabled-color, #727672);
+}
 .info-item__label {
   font-weight: var(--emw--font-weight-medium, 500);
   margin-right: 3px;
@@ -110,4 +167,71 @@
   width: 0;
   height: 0;
   z-index: 201;
+}
+
+.progress {
+  background-color: var(--emw--progress-background, rgba(188, 252, 177, 0.1019607843));
+  border-radius: 100px;
+  height: 20px;
+  margin-bottom: 10px;
+  position: relative;
+  align-content: center;
+  padding: 0 2px;
+  box-sizing: border-box;
+}
+.progress.paused {
+  opacity: 0.5;
+}
+.progress.grayed {
+  mix-blend-mode: luminosity;
+}
+.progress__placeholder {
+  height: 20px;
+}
+.progress__icon {
+  padding-top: 4px;
+}
+.progress__point {
+  position: absolute;
+  text-align: center;
+  font-size: 12px;
+  color: var(--emw--color-gray-150, #C8D6CE);
+  font-weight: 700;
+  line-height: 19px;
+  top: 0;
+  height: 19px;
+  width: 19px;
+  border-radius: 50%;
+}
+.progress__point.start {
+  left: 0;
+  border: 2px solid var(--emw--button-background-primary-color, #18CE51);
+  background: linear-gradient(90deg, var(--emw--progress-active-level, #24AA4D) 0%, var(--emw--progress-active-level-secondary, #113F21) 100%);
+}
+.progress__point.end {
+  right: 0;
+  border: 2px solid var(--emw--dark-green, #1C8D56);
+  background: var(--emw--color-gray-300, #083B17);
+  opacity: 0.7;
+}
+.progress__point.finished {
+  opacity: 1;
+}
+.progress__point.hidden {
+  opacity: 0;
+}
+.progress__bar {
+  border-radius: 73px;
+  height: 16px;
+  background: linear-gradient(90deg, var(--emw--secondary-green, #1E654F) 0%, var(--emw--dark-green, #1C8D56) 100%);
+  text-align: end;
+  color: var(--emw--color-gray-50, #E2E2E2);
+  font-size: 11px;
+  font-weight: 700;
+  line-height: 16px;
+  padding-right: 6px;
+  box-sizing: border-box;
+}
+.progress__bar.finished {
+  text-align: center;
 }

package/dist/collection/components/casino-challenge-card/casino-challenge-card.js

@@ -1,8 +1,10 @@
 import { h } from "@stencil/core";
 import { resolveTranslationUrl, translate } from "../../utils/locale.utils";
-import { EChallengeLevelTargetType } from "../../utils/types";
+import { ChallengeStatusDictionary, EChallengeLevelTargetType, EChallengeProgressStatus, EChallengeStatus } from "../../utils/types";
 import { getTimeLeft } from "../../utils/utils";
 import { setClientStyling, setClientStylingURL, setStreamStyling } from "../../../../../../../../libs/common/src/styling/index";
+import finishIcon from "../../assets/finish.svg";
+import trophyIcon from "../../assets/trophy.svg";
 export class CasinoChallengeCard {
     constructor() {
         this.calculateTargetValue = (level, currencySymbol) => {
@@ -29,28 +31,61 @@ export class CasinoChallengeCard {
         this.onMouseLeaveHandler = () => {
             this.tooltipIndex = null;
         };
+        this.getBadgeContent = () => {
+            switch (this.challenge.Status) {
+                case EChallengeStatus.Expired:
+                    return translate('expired', this.language);
+                case EChallengeStatus.Forfeited:
+                    return translate('forfeited', this.language);
+                case EChallengeStatus.Completed:
+                    return translate('finished', this.language);
+                case EChallengeStatus.Paused:
+                    return translate('suspended', this.language);
+                default:
+                    return this.timeLeft
+                        ? [translate('endsIn', this.language), ' - ', h("span", null, this.timeLeft)]
+                        : translate('expired', this.language);
+            }
+        };
+        this.checkAttrs = () => {
+            if (!this.endpoint) {
+                this.error = 'Endpoint is missing! Please provide a valid endpointURL.';
+                this.hasError = true;
+                console.error(this.error);
+            }
+            return this.hasError;
+        };
         this.mbSource = undefined;
         this.clientStyling = undefined;
         this.clientStylingUrl = undefined;
         this.translationUrl = '';
         this.language = 'en';
+        this.endpoint = '';
+        this.domain = '';
+        this.session = '';
         this.challenge = undefined;
+        this.isUserAuthorized = true;
         this.tooltipIndex = null;
         this.timeLeft = undefined;
+        this.error = '';
+        this.hasError = false;
+        this.actionLoading = false;
     }
     get infoItems() {
-        var _a, _b, _c, _d;
-        const level1 = (_a = this.challenge) === null || _a === void 0 ? void 0 : _a.LevelProgresses.find((x) => x.OrderNumber === 0);
-        if (level1) {
-            const rewardValue = (_b = level1.Rewards) === null || _b === void 0 ? void 0 : _b.slice(0, 2).map((r) => r.RewardDescription).join(' + ');
+        var _a, _b, _c, _d, _e;
+        const level = this.isUserAuthorized
+            ? (_a = this.challenge) === null || _a === void 0 ? void 0 : _a.LevelProgresses.find((x) => x.ProgressStatus === EChallengeProgressStatus.InProgress)
+            : (_b = this.challenge) === null || _b === void 0 ? void 0 : _b.LevelProgresses.find((x) => x.OrderNumber === 0);
+        if (level) {
+            const rewardValue = (_c = level.Rewards) === null || _c === void 0 ? void 0 : _c.slice(0, 2).map((r) => r.RewardDescription).join(' + ');
             return [
                 {
                     lable: translate('totalLevels', this.language),
-                    value: (_c = this.challenge.LevelProgresses) === null || _c === void 0 ? void 0 : _c.length
+                    value: (_d = this.challenge.LevelProgresses) === null || _d === void 0 ? void 0 : _d.length
                 },
                 {
                     lable: translate('level1', this.language),
-                    value: this.calculateTargetValue(level1, (_d = this.challenge) === null || _d === void 0 ? void 0 : _d.CurrencySymbol)
+                    value: this.calculateTargetValue(level, (_e = this.challenge) === null || _e === void 0 ? void 0 : _e.CurrencySymbol)
                 },
                 {
                     lable: translate('get', this.language),
@@ -111,16 +146,85 @@ export class CasinoChallengeCard {
         }
     }
     renderInfoItem(item, index) {
-        return (h("div", { class: "info-item", onMouseEnter: (e) => this.onMouseEnterHandler(index, e.currentTarget), onMouseLeave: this.onMouseLeaveHandler }, h("span", { class: "info-item__label" }, item.lable), item.value, this.tooltipIndex === index && h("div", { class: "info-item__tooltip" }, item.value)));
+        return (h("div", { class: `info-item ${this.isChallengeGrayed}`, onMouseEnter: (e) => this.onMouseEnterHandler(index, e.currentTarget), onMouseLeave: this.onMouseLeaveHandler }, h("span", { class: "info-item__label" }, item.lable), item.value, this.tooltipIndex === index && h("div", { class: "info-item__tooltip" }, item.value)));
     }
-    renderCardBadge() {
-        return (h("div", { class: "card__badge" }, this.timeLeft
-            ? [translate('endsIn', this.language), ' - ', h("span", null, this.timeLeft)]
-            : translate('expired', this.language)));
+    get getCardBadge() {
+        return (h("div", { class: `card__badge ${ChallengeStatusDictionary[this.challenge.Status]}` }, this.getBadgeContent()));
+    }
+    get isChallengeGrayed() {
+        return [EChallengeStatus.Expired, EChallengeStatus.Forfeited, EChallengeStatus.Completed].includes(this.challenge.Status)
+            ? 'grayed'
+            : '';
+    }
+    get getChallengeProgress() {
+        var _a;
+        const currLevel = (_a = this.challenge) === null || _a === void 0 ? void 0 : _a.LevelProgresses.find((x) => x.ProgressStatus === EChallengeProgressStatus.InProgress);
+        if (!this.isUserAuthorized || !currLevel)
+            return null;
+        const { Status, LevelProgresses } = this.challenge;
+        if (Status === EChallengeStatus.Expired || Status === EChallengeStatus.Started) {
+            return h("div", { class: "progress__placeholder" });
+        }
+        const barValue = Status === EChallengeStatus.Paused
+            ? translate('suspended', this.language)
+            : Status === EChallengeStatus.Completed
+                ? translate('finished', this.language)
+                : `${currLevel.ProgressPercentage}%`;
+        const isLastLevel = !LevelProgresses.some((x) => x.OrderNumber > currLevel.OrderNumber);
+        const secondImgSrc = Status === EChallengeStatus.Completed ? trophyIcon : isLastLevel ? finishIcon : '';
+        return (h("div", { class: {
+                progress: true,
+                paused: Status === EChallengeStatus.Paused,
+                grayed: Status === EChallengeStatus.Forfeited
+            } }, h("div", { class: {
+                progress__point: true,
+                start: true,
+                hidden: Status === EChallengeStatus.Completed
+            } }, currLevel.OrderNumber + 1), h("div", { class: {
+                progress__bar: true,
+                finished: Status === EChallengeStatus.Completed
+            }, style: { width: `${currLevel.ProgressPercentage}%` } }, barValue), h("div", { class: {
+                progress__point: true,
+                end: true,
+                finished: Status === EChallengeStatus.Completed
+            } }, secondImgSrc ? h("img", { class: "progress__icon", src: secondImgSrc }) : currLevel.OrderNumber + 2)));
+    }
+    get getCardButton() {
+        if (this.isUserAuthorized) {
+            if (this.challenge.Status === EChallengeStatus.Started) {
+                return (h("button", { class: "card__button filled", disabled: this.actionLoading, onClick: () => this.joinUnjoinProgress(true) }, translate('start', this.language)));
+            }
+            if (this.challenge.Status === EChallengeStatus.Paused) {
+                return (h("button", { class: "card__button grayed", disabled: this.actionLoading, onClick: () => this.joinUnjoinProgress(true) }, translate('resume', this.language)));
+            }
+            if (this.challenge.Status === EChallengeStatus.InProgress ||
+                this.challenge.Status === EChallengeStatus.PendingLevelReward) {
+                return (h("button", { class: "card__button grayed", disabled: this.actionLoading, onClick: () => this.joinUnjoinProgress(false) }, translate('pause', this.language)));
+            }
+        }
+        return h("button", { class: "card__button" }, translate('viewDetails', this.language));
+    }
+    async joinUnjoinProgress(join) {
+        var _a;
+        const progress = (_a = this.challenge) === null || _a === void 0 ? void 0 : _a.LevelProgresses.find((x) => x.ProgressStatus === EChallengeProgressStatus.InProgress);
+        if (!this.checkAttrs()) {
+            const url = `${this.endpoint}/challenge/ChangeProgressStatus`;
+            const body = Object.assign(Object.assign({ DomainId: this.domain }, (this.session && { PlayerSessionId: this.session })), (join ? { ProgressToActivate: progress.LevelId } : { ProgressToDeactivate: progress.LevelId }));
+            this.actionLoading = true;
+            return fetch(url, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify(body)
+            })
+                .then((res) => res.json())
+                .finally(() => (this.actionLoading = false));
+        }
     }
     render() {
         var _a, _b, _c, _d;
-        return (h("div", { key: '5df3a2d368e6057d1b47cf5d4766126406c4afc8', ref: (el) => (this.stylingContainer = el) }, h("div", { key: 'de708f82c0fbe5324419fafcb395f115c020d021', class: "card" }, h("img", { key: '209c1f05bb70c3182b4ff6211e7c9398999b30fc', class: "card__image", src: (_b = (_a = this.challenge) === null || _a === void 0 ? void 0 : _a.ChallengePresentation) === null || _b === void 0 ? void 0 : _b.Url }), this.renderCardBadge(), h("div", { key: 'aa3a5f3eee8bdb7c2606bc8a232c441ff4a22006', class: "card__content" }, h("h1", { key: '524933e67d8eac476d678aee9f2643b6ac1449ff', class: "card__title" }, (_d = (_c = this.challenge) === null || _c === void 0 ? void 0 : _c.ChallengePresentation) === null || _d === void 0 ? void 0 : _d.PresentationName), this.infoItems.map((x, index) => this.renderInfoItem(x, index)), h("button", { key: '52fec7d22602a2757c1a36238fb0b797f6bb4306', class: "card__button" }, translate('viewDetails', this.language))))));
+        return (h("div", { key: '3405a652d64b5a9d1bc2f43ff226abfefb359158', ref: (el) => (this.stylingContainer = el) }, h("div", { key: 'a84228899e4845a36fa94b11b4e8d5b1fcbc0ae7', class: "card" }, h("img", { key: 'a4b6b6f8161f1184442b1e12c510254323b91e1a', class: `card__image ${this.isChallengeGrayed}`, src: (_b = (_a = this.challenge) === null || _a === void 0 ? void 0 : _a.ChallengePresentation) === null || _b === void 0 ? void 0 : _b.Url }), this.getCardBadge, h("div", { key: '7d24cf5cdec35ab541989308811c12d1d665c891', class: "card__content" }, h("h1", { key: 'b9e045fd05580d001be012903938102dbbc64128', class: "card__title" }, (_d = (_c = this.challenge) === null || _c === void 0 ? void 0 : _c.ChallengePresentation) === null || _d === void 0 ? void 0 : _d.PresentationName), this.getChallengeProgress, this.infoItems.map((x, index) => this.renderInfoItem(x, index)), this.getCardButton))));
     }
     static get is() { return "casino-challenge-card"; }
     static get encapsulation() { return "shadow"; }
@@ -223,6 +327,60 @@ export class CasinoChallengeCard {
                 "reflect": true,
                 "defaultValue": "'en'"
             },
+            "endpoint": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Client endpoint to fetch data"
+                },
+                "attribute": "endpoint",
+                "reflect": true,
+                "defaultValue": "''"
+            },
+            "domain": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Domain Id"
+                },
+                "attribute": "domain",
+                "reflect": true,
+                "defaultValue": "''"
+            },
+            "session": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "User session Id"
+                },
+                "attribute": "session",
+                "reflect": true,
+                "defaultValue": "''"
+            },
             "challenge": {
                 "type": "unknown",
                 "mutable": false,
@@ -243,13 +401,34 @@ export class CasinoChallengeCard {
                     "tags": [],
                     "text": "Challenge entity"
                 }
+            },
+            "isUserAuthorized": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Is User authorized"
+                },
+                "attribute": "is-user-authorized",
+                "reflect": true,
+                "defaultValue": "true"
             }
         };
     }
     static get states() {
         return {
             "tooltipIndex": {},
-            "timeLeft": {}
+            "timeLeft": {},
+            "error": {},
+            "hasError": {},
+            "actionLoading": {}
         };
     }
     static get events() {