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

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

@@ -1 +1 @@
-import{p as e,b as l}from"./p-fad4589e.js";(()=>{const l=import.meta.url,n={};return""!==l&&(n.resourcesUrl=new URL(".",l).href),e(n)})().then((e=>l([["p-a9f41c83",[[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"]]],[1,"casino-engagement-suite-progress-bar",{value:[2],disabled:[4],clientStyling:[513,"client-styling"],clientStylingUrl:[513,"client-styling-url"],limitStylingAppends:[32]}]]]],e)));
+import{p as e,b as n}from"./p-fad4589e.js";(()=>{const n=import.meta.url,l={};return""!==n&&(l.resourcesUrl=new URL(".",n).href),e(l)})().then((e=>n([["p-26d7de05",[[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]}]]]],e)));

package/dist/casino-engagement-suite-challenges-list/p-26d7de05.entry.js

@@ -0,0 +1 @@
+import{r as e,c as t,h as s,g as o}from"./p-fad4589e.js";var n,i;!function(e){e[e.Closed=0]="Closed",e[e.InProgress=1]="InProgress",e[e.Fillup=2]="Fillup",e[e.Completed=3]="Completed"}(n||(n={})),function(e){e[e.Started=0]="Started",e[e.InProgress=1]="InProgress",e[e.PendingLevelReward=2]="PendingLevelReward",e[e.Completed=3]="Completed",e[e.Expired=4]="Expired"}(i||(i={}));const a=["en"],l={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"}},r=(e,t)=>{const s=t;return l[void 0!==s&&a.includes(s)?s:"en"][e]};function h(e){return(h="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function p(e,t){if(t.length<e)throw new TypeError(e+" argument"+(e>1?"s":"")+" required, but only "+t.length+" present")}function g(e){p(1,arguments);var t=Object.prototype.toString.call(e);return e instanceof Date||"object"===h(e)&&"[object Date]"===t?new Date(e.getTime()):"number"==typeof e||"[object Number]"===t?new Date(e):("string"!=typeof e&&"[object String]"!==t||"undefined"==typeof 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"),console.warn((new Error).stack)),new Date(NaN))}function d(e,t){return p(2,arguments),g(e).getTime()-g(t).getTime()}var c={ceil:Math.ceil,round:Math.round,floor:Math.floor,trunc:function(e){return e<0?Math.ceil(e):Math.floor(e)}};function u(e){return e?c[e]:c.trunc}const C=class{constructor(s){e(this,s),this.close=t(this,"close",7),this.clientStyling="",this.clientStylingUrl="",this.language="en",this.device="Mobile",this.challenges=[],this.tooltip=!1,this.timers={},this.limitStylingAppends=!1,this.newChallengeIds=[],this.pausedChallengeIds=[],this.setClientStyling=()=>{let e=document.createElement("style");e.innerHTML=this.clientStyling,this.host.prepend(e)},this.setClientStylingURL=()=>{let e=new URL(this.clientStylingUrl),t=document.createElement("style");fetch(e.href).then((e=>e.text())).then((e=>{t.innerHTML=e,setTimeout((()=>{this.host.prepend(t)}),1)})).catch((e=>{console.log("Error ",e)}))},this.handleCloseClick=()=>{this.close.emit(),this.tooltip=!1,this.newChallengeIds=[]},this.handleChallengeClick=e=>{const t=+e.currentTarget.getAttribute("data-id");window.postMessage({type:"ChallengeClick",id:t}),this.newChallengeIds=this.newChallengeIds.filter((e=>e!==t))},this.showTooltip=()=>{this.tooltip=!0},this.hideTooltip=()=>{this.tooltip=!1},this.changeChallengeStatus=e=>{var t,s;e.stopPropagation();const o=+e.currentTarget.getAttribute("data-id");(null===(t=this.inProgressChallenges)||void 0===t?void 0:t.includes(o))?window.postMessage({type:"ShowConfirmationModal",ProgressToDeactivate:o}):(null===(s=this.inProgressChallenges)||void 0===s?void 0:s.length)>0?window.postMessage({type:"ShowConfirmationModal",ProgressToActivate:o,ProgressToDeactivate:this.inProgressChallenges[0]}):window.postMessage({type:"ChallengeJoinRequest",data:{ProgressToActivate:o}})}}challengesPropHandler(e){!this.interval&&e.length&&(this.updateTimers(),this.startCountdown()),this.interval&&!e.length&&clearInterval(this.interval)}handleEvent(e){switch(e.data.type){case"ChallengeGrant":{const t=e.data.data,s=this.challenges.findIndex((e=>function(e,t,s){p(2,arguments);var o=d(e,t)/1e3;return u(null==s?void 0:s.roundingMethod)(o)}(new Date(e.ExpirationTime),new Date(t.ExpirationTime))>0));s>-1?this.challenges.splice(s,0,t):this.challenges.unshift(t),this.challenges=[...this.challenges],this.newChallengeIds.push(t.Id),window.postMessage({type:"UpdateChallenges"});break}case"ChallengeChangeStatusNotification":{const t=e.data.data.ChallengeId;e.data.data.IsEnabled?this.pausedChallengeIds=this.pausedChallengeIds.filter((e=>e!==t)):this.pausedChallengeIds.push(t);break}}}componentWillLoad(){var e;this.challengesPropHandler(this.challenges),(null===(e=this.challenges)||void 0===e?void 0:e.length)&&(this.newChallengeIds=this.challenges.filter((e=>e.IsNew)).map((e=>e.Id)))}componentDidRender(){!this.limitStylingAppends&&this.host&&(this.clientStyling&&this.setClientStyling(),this.clientStylingUrl&&this.setClientStylingURL(),this.limitStylingAppends=!0)}disconnectedCallback(){this.interval&&clearInterval(this.interval)}startCountdown(){this.interval=setInterval((()=>{this.updateTimers()}),1e3)}updateTimers(){const e=(new Date).getTime();this.timers=this.challenges.filter((e=>e.Status!==i.Expired)).reduce(((t,s)=>{const o=new Date(s.ExpirationTime).getTime()-e;let n="00h:00m:00s";if(o<1)this.removeChallenge(s.Id);else{const{days:e,hours:t,minutes:s,seconds:i}={days:String(Math.floor(o/864e5)).padStart(2,"0"),hours:String(Math.floor(o%864e5/36e5)).padStart(2,"0"),minutes:String(Math.floor(o%36e5/6e4)).padStart(2,"0"),seconds:String(Math.floor(o%6e4/1e3)).padStart(2,"0")};n="00"===e?`${t}h:${s}m:${i}s`:`${e}d:${t}h:${s}m`}return Object.assign(Object.assign({},t),{[s.Id]:n})}),{})}removeChallenge(e){const t=this.challenges.findIndex((t=>t.Id===e));t>-1&&(this.challenges.splice(t,1),window.postMessage({type:"ChallengeHasExpired",id:e}))}getChallengeClasses(e){return{ChallengeCard:!0,InProgress:e.Status===i.InProgress&&!this.pausedChallengeIds.includes(e.Id),Completed:this.isChallengeCompleted(e),Paused:this.isChallengePaused(e)}}isChallengePaused(e){return e.Status===i.Started&&e.LevelProgresses[0].ProgressPercentage>0||this.pausedChallengeIds.includes(e.Id)}isChallengeCompleted(e){return e.Status===i.Completed||e.Status===i.PendingLevelReward&&e.LevelProgresses.every((e=>100===e.ProgressPercentage))}getChallengeProgress(e){if(e.Status===i.Completed)return 100;if(this.isChallengePaused(e)||e.Status===i.PendingLevelReward||e.Status===i.InProgress){const t=e.LevelProgresses.find((e=>e.ProgressStatus===n.InProgress));return t?t.ProgressPercentage:0}return-1}getChallengeHeaderTemplate(e){const{Id:t}=e;return s("div",{class:"ChallengeCardHeader"},s("div",{class:"ChallengeName"},e.ChallengePresentation.PresentationName),s("button",{class:`${e.Status===i.InProgress?"ChallengeJoinButton Joined":"ChallengeJoinButton"} ${this.isJoiningToChallenge?"Disabled":""}`,onClick:this.changeChallengeStatus,"data-id":t},r(e.Status===i.InProgress?"unjoin":"join",this.language)))}getChallengeTemplate(e){const t=this.getChallengeProgress(e),o=this.timers[e.Id],n=this.newChallengeIds.includes(e.Id),i=t>-1?s("casino-engagement-suite-progress-bar",{class:this.device,value:t,disabled:this.isChallengePaused(e)},s("span",{slot:"Title",class:"ChallengeCountdown"},o)):s("span",{class:"ChallengeCountdown"},o);return s("div",{class:this.getChallengeClasses(e),onClick:this.handleChallengeClick,key:e.Id,"data-id":e.Id},this.getChallengeHeaderTemplate(e),i,s("div",{class:"ChallengeLabel "+(n?"ShowChallengeLabel":"")},s("span",null,r("new",this.language))))}getHeaderTemplate(){return s("header",{class:"ChallengesListPopupHeader"},s("button",{onClick:this.showTooltip,class:"ChallengesIconButton"},s("img",{src:"https://static.everymatrix.com/gic/img/engagement-suite/help.svg",alt:"Show tooltip"})),s("div",{class:"ChallengesListPopupHeaderName"},r("challenges",this.language)),s("button",{class:"ChallengesIconButton",onClick:this.handleCloseClick},s("img",{src:"https://static.everymatrix.com/gic/img/engagement-suite/close.svg",alt:"Close challenges list"})))}getListTemplate(){return this.challenges.length?s("div",{class:"ChallengesListWrapper"},s("div",{class:"ChallengesList"},this.challenges.map((e=>this.getChallengeTemplate(e))))):s("div",{class:"ChallengesListEmpty"},s("h2",null,r("noChallenges",this.language)),s("p",null,r("tryOtherGames",this.language)))}getTooltipTemplate(){return s("div",{class:"ChallengesTooltipBackdrop"},s("div",{class:"ChallengesTooltip"},s("button",{class:"ChallengesIconButton",onClick:this.hideTooltip},s("img",{src:"https://static.everymatrix.com/gic/img/engagement-suite/close.svg",alt:"Close tooltip"})),r("tooltip",this.language)))}render(){return s("div",{class:`ChallengesListPopup ${this.device}`},this.getHeaderTemplate(),this.getListTemplate(),this.tooltip&&this.getTooltipTemplate())}get host(){return o(this)}static get watchers(){return{challenges:["challengesPropHandler"]}}};C.style='@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 b=class{constructor(t){e(this,t),this.value=0,this.disabled=!1,this.hidePercent=!1,this.clientStyling="",this.clientStylingUrl="",this.limitStylingAppends=!1,this.setClientStyling=()=>{let e=document.createElement("style");e.innerHTML=this.clientStyling,this.host.prepend(e)},this.setClientStylingURL=()=>{let e=new URL(this.clientStylingUrl),t=document.createElement("style");fetch(e.href).then((e=>e.text())).then((e=>{t.innerHTML=e,setTimeout((()=>{this.host.prepend(t)}),1)})).catch((e=>{console.log("Error ",e)}))}}componentDidRender(){!this.limitStylingAppends&&this.host&&(this.clientStyling&&this.setClientStyling(),this.clientStylingUrl&&this.setClientStylingURL(),this.limitStylingAppends=!0)}getProgressBarClasses(){return{ProgressBar:!0,Completed:100===this.value,Disabled:this.disabled,HidePercent:this.hidePercent}}render(){return s("div",{class:this.getProgressBarClasses(),part:"ProgressBar"},s("div",{class:"ProgressBarInfo",part:"ProgressBarInfo"},s("slot",{name:"Title"},s("div",null)),s("slot",{name:"Percent"},s("div",{class:"ProgressBarPercent",part:"ProgressBarPercent"},this.value,"%"))),s("div",{class:"ProgressBarBackground",part:"ProgressBarBackground"},s("div",{class:"ProgressBarLine",part:"ProgressBarLine",style:{width:this.value+"%"}})))}get host(){return o(this)}};b.style=":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)}";export{C as casino_engagement_suite_challenges_list,b as casino_engagement_suite_progress_bar}

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

@@ -15,5 +15,5 @@ const patchBrowser = () => {
 };
 
 patchBrowser().then(options => {
-  return index.bootstrapLazy([["casino-engagement-suite-challenges-list_2.cjs",[[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"]]],[1,"casino-engagement-suite-progress-bar",{"value":[2],"disabled":[4],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"limitStylingAppends":[32]}]]]], options);
+  return index.bootstrapLazy([["casino-engagement-suite-challenges-list_2.cjs",[[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/cjs/casino-engagement-suite-challenges-list_2.cjs.entry.js

@@ -27,6 +27,7 @@ const TRANSLATIONS = {
     challenges: 'Challenges',
     join: 'Join',
     unjoin: 'Unjoin',
+    new: 'new',
     noChallenges: 'No Challenges yet',
     tryOtherGames: 'Try winning Challenges as rewards or launching other booster games',
     tooltip: 'Competition where your real money bets contribute towards the level progress to achieve the level reward'
@@ -175,7 +176,7 @@ function differenceInSeconds(dateLeft, dateRight, options) {
   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}.ChallengesListEmpty{padding:20px 32px}.ChallengesListEmpty h2{margin:0 0 16px 0;text-align:center;font-weight:600;font-size:20px;line-height:24px;font-family:\"Montserrat\", sans-serif;color:var(--emw--color-typography, #FFFFFF)}.ChallengesListEmpty p{font-size:14px;line-height:17px;color:var(--emw--color-gray-100, #BBB9C3)}.ChallengeCountdown{color:var(--emw--color-gray-100, #BBB9C3);font-size:12px;line-height:12px}.ChallengesTooltipBackdrop{padding:48px 30px 0;position:absolute;width:100%;height:100%;inset:0;background-color:rgba(0, 0, 0, 0.5)}.ChallengesTooltipBackdrop .ChallengesTooltip{border:1px solid var(--emw--button-border-color, #403956);background-color:var(--emw--color-background, #1E1638);border-radius:8px;padding:32px;font-size:14px;line-height:17px;color:var(--emw--color-gray-100, #BBB9C3);position:relative}.ChallengesTooltipBackdrop .ChallengesTooltip .ChallengesIconButton{top:12px;right:6px;position:absolute}.ChallengesListPopup.Tablet .ChallengesListPopupHeader,.ChallengesListPopup.Desktop .ChallengesListPopupHeader{padding-top:16px}.ChallengesListPopup.Tablet .ChallengesListPopupHeaderName,.ChallengesListPopup.Desktop .ChallengesListPopupHeaderName{font-size:16px;line-height:16px}.ChallengesListPopup.Tablet .ChallengesIconButton,.ChallengesListPopup.Desktop .ChallengesIconButton{width:24px;height:24px}.ChallengesListPopup.Tablet .ChallengesList,.ChallengesListPopup.Desktop .ChallengesList{padding:20px 24px 0;row-gap:20px}.ChallengesListPopup.Tablet .ChallengeCardHeader,.ChallengesListPopup.Desktop .ChallengeCardHeader{margin-bottom:16px}.ChallengesListPopup.Tablet .ChallengeName,.ChallengesListPopup.Desktop .ChallengeName{line-height:27px;font-size:22px}.ChallengesListPopup.Tablet .ChallengeJoinButton,.ChallengesListPopup.Desktop .ChallengeJoinButton{min-width:100px;height:36px;font-size:16px}.ChallengesListPopup.Tablet .ChallengeCountdown,.ChallengesListPopup.Desktop .ChallengeCountdown{font-size:14px;line-height:14px}.ChallengesListPopup.Tablet .ChallengesTooltip,.ChallengesListPopup.Desktop .ChallengesTooltip{padding:60px 65px;font-size:16px;line-height:20px}.ChallengesListPopup.Tablet .ChallengesTooltip .ChallengesIconButton,.ChallengesListPopup.Desktop .ChallengesTooltip .ChallengesIconButton{top:24px;right:24px}";
+const casinoEngagementSuiteChallengesListCss = "@import url(\"https://fonts.googleapis.com/css2?family=Montserrat:wght@600&display=swap\");:host{display:block;font-family:inherit}*{box-sizing:border-box;margin:0;padding:0}button{border:none;background:none;cursor:pointer}button:focus{outline:none}.ChallengesListPopup{display:flex;height:100%;background-color:var(--emw--color-background, #1E1638);border-radius:8px;overflow:hidden;flex-direction:column;position:relative}.ChallengesListPopupHeader{display:flex;justify-content:space-between;align-items:center;padding:12px 8px 8px}.ChallengesIconButton{width:16px;height:16px;cursor:pointer}.ChallengesListPopupHeaderName{color:var(--emw--color-gray-100, #BBB9C3);font-size:14px;font-weight:500;line-height:14px}.ChallengesListWrapper{overflow-y:auto;-ms-overflow-style:none;scrollbar-width:none}.ChallengesListWrapper::-webkit-scrollbar{display:none}.ChallengesList{display:flex;flex-direction:column;row-gap:12px;padding:8px 19px 0}.ChallengeCard{padding:15px 15px 19px;border:1px solid var(--emw--button-border-color, #403956);border-radius:6px;position:relative;cursor:pointer}.ChallengeJoinButton.Joined::before,.ChallengeCard.InProgress::before{content:\"\";position:absolute;inset:0;border-radius:var(--emw--button-border-radius, 4px);padding:1px;background:linear-gradient(98.25deg, #FF9400 22.48%, #FEF746 131.02%, #FFE24A 131.9%);-webkit-mask:linear-gradient(#FFF 0 0) content-box, linear-gradient(#FFF 0 0);-webkit-mask-composite:xor;mask-composite:exclude}.ChallengeCardHeader{display:flex;justify-content:space-between;gap:24px;margin-bottom:12px}.ChallengeName{color:var(--emw--color-typography, #FFFFFF);font-family:\"Montserrat\", sans-serif;line-height:22px;font-weight:700;font-size:18px;word-break:break-word}.ChallengeJoinButton{transition:all 0.5s ease-out;background:linear-gradient(98.25deg, #FF9400 22.48%, #FEF746 131.02%, #FFE24A 131.9%);color:var(--emw--color-typography, #1E1638);border-radius:99px;min-width:88px;height:32px;font-size:14px;font-weight:700;position:relative;font-family:\"Montserrat\", sans-serif}.ChallengeJoinButton.Joined{background:linear-gradient(98.25deg, #FF9400 22.48%, #FEF746 131.02%, #FFE24A 131.9%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.ChallengeJoinButton.Joined::before{border-radius:99px}.Disabled{opacity:0.5;pointer-events:none;cursor:auto}.ChallengesListEmpty{padding:20px 32px}.ChallengesListEmpty h2{margin:0 0 16px 0;text-align:center;font-weight:600;font-size:20px;line-height:24px;font-family:\"Montserrat\", sans-serif;color:var(--emw--color-typography, #FFFFFF)}.ChallengesListEmpty p{font-size:14px;line-height:17px;color:var(--emw--color-gray-100, #BBB9C3)}.ChallengeCountdown{color:var(--emw--color-gray-100, #BBB9C3);font-size:12px;line-height:12px}.ChallengeLabel{min-width:35px;height:18px;background:linear-gradient(180deg, #FFB801 15.86%, #FEF746 31.36%, #FBFFE0 36.86%, #FFFA60 47.86%, #FF9400 87.36%);border-radius:2px;display:none;position:absolute;top:-11px;right:11px;padding:0 2px;align-items:center;justify-content:center}.ChallengeLabel span{display:inline-block;text-transform:uppercase;font-size:10px;line-height:10px;font-weight:700;font-family:\"Montserrat\", sans-serif;color:var(--emw--color-typography, #1E1638)}.ShowChallengeLabel{display:inline-flex}.ChallengesTooltipBackdrop{padding:48px 30px 0;position:absolute;width:100%;height:100%;inset:0;background-color:rgba(0, 0, 0, 0.5)}.ChallengesTooltipBackdrop .ChallengesTooltip{border:1px solid var(--emw--button-border-color, #403956);background-color:var(--emw--color-background, #1E1638);border-radius:8px;padding:32px;font-size:14px;line-height:17px;color:var(--emw--color-gray-100, #BBB9C3);position:relative}.ChallengesTooltipBackdrop .ChallengesTooltip .ChallengesIconButton{top:12px;right:6px;position:absolute}.ChallengesListPopup.Tablet .ChallengesListPopupHeader,.ChallengesListPopup.Desktop .ChallengesListPopupHeader{padding-top:16px}.ChallengesListPopup.Tablet .ChallengesListPopupHeaderName,.ChallengesListPopup.Desktop .ChallengesListPopupHeaderName{font-size:16px;line-height:16px}.ChallengesListPopup.Tablet .ChallengesIconButton,.ChallengesListPopup.Desktop .ChallengesIconButton{width:24px;height:24px}.ChallengesListPopup.Tablet .ChallengesList,.ChallengesListPopup.Desktop .ChallengesList{padding:20px 24px 0;row-gap:20px}.ChallengesListPopup.Tablet .ChallengeCardHeader,.ChallengesListPopup.Desktop .ChallengeCardHeader{margin-bottom:16px}.ChallengesListPopup.Tablet .ChallengeName,.ChallengesListPopup.Desktop .ChallengeName{line-height:27px;font-size:22px}.ChallengesListPopup.Tablet .ChallengeJoinButton,.ChallengesListPopup.Desktop .ChallengeJoinButton{min-width:100px;height:36px;font-size:16px}.ChallengesListPopup.Tablet .ChallengeCountdown,.ChallengesListPopup.Desktop .ChallengeCountdown{font-size:14px;line-height:14px}.ChallengesListPopup.Tablet .ChallengesTooltip,.ChallengesListPopup.Desktop .ChallengesTooltip{padding:60px 65px;font-size:16px;line-height:20px}.ChallengesListPopup.Tablet .ChallengesTooltip .ChallengesIconButton,.ChallengesListPopup.Desktop .ChallengesTooltip .ChallengesIconButton{top:24px;right:24px}";
 
 const CasinoEngagementSuiteChallengesList = class {
   constructor(hostRef) {
@@ -204,6 +205,8 @@ const CasinoEngagementSuiteChallengesList = class {
     this.tooltip = false;
     this.timers = {};
     this.limitStylingAppends = false;
+    this.newChallengeIds = [];
+    this.pausedChallengeIds = [];
     this.setClientStyling = () => {
       let sheet = document.createElement('style');
       sheet.innerHTML = this.clientStyling;
@@ -225,10 +228,12 @@ const CasinoEngagementSuiteChallengesList = class {
     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;
@@ -237,31 +242,28 @@ const CasinoEngagementSuiteChallengesList = class {
       this.tooltip = false;
     };
     this.changeChallengeStatus = (e) => {
+      var _a, _b;
       e.stopPropagation();
       const id = +e.currentTarget.getAttribute('data-id');
-      const inProgressChallenges = this.challenges.filter(c => c.Status === ChallengeProgressStatus.InProgress).map(c => c.Id);
-      if (inProgressChallenges.includes(id)) {
+      if ((_a = this.inProgressChallenges) === null || _a === void 0 ? void 0 : _a.includes(id)) {
         window.postMessage({
           type: 'ShowConfirmationModal',
-          action: 'unjoin',
-          id,
+          ProgressToDeactivate: id,
         });
         return;
       }
-      if ((inProgressChallenges === null || inProgressChallenges === void 0 ? void 0 : inProgressChallenges.length) > 0) {
+      if (((_b = this.inProgressChallenges) === null || _b === void 0 ? void 0 : _b.length) > 0) {
         window.postMessage({
           type: 'ShowConfirmationModal',
-          action: 'join',
-          prevId: inProgressChallenges[0],
-          id,
+          ProgressToActivate: id,
+          ProgressToDeactivate: this.inProgressChallenges[0],
         });
         return;
       }
       window.postMessage({
-        type: 'ChallengeAttendance',
-        confirmationData: {
-          action: 'join',
-          id,
+        type: 'ChallengeJoinRequest',
+        data: {
+          ProgressToActivate: id,
         },
       });
     };
@@ -276,19 +278,42 @@ const CasinoEngagementSuiteChallengesList = class {
     }
   }
   handleEvent(e) {
-    const newChallenge = e.data.data;
-    if (e.data.type === 'ChallengeGrant') {
-      const index = this.challenges.findIndex(challenge => differenceInSeconds(new Date(challenge.ExpirationTime), new Date(newChallenge.ExpirationTime)) > 0);
-      if (index > -1) {
-        this.challenges.splice(index, 0, newChallenge);
+    const type = e.data.type;
+    switch (type) {
+      case 'ChallengeGrant': {
+        const newChallenge = e.data.data;
+        const index = this.challenges.findIndex(challenge => differenceInSeconds(new Date(challenge.ExpirationTime), new Date(newChallenge.ExpirationTime)) > 0);
+        if (index > -1) {
+          this.challenges.splice(index, 0, newChallenge);
+        }
+        else {
+          this.challenges.unshift(newChallenge);
+        }
+        this.challenges = [...this.challenges];
+        this.newChallengeIds.push(newChallenge.Id);
+        window.postMessage({ type: 'UpdateChallenges' });
+        break;
       }
-      else {
-        this.challenges.unshift(newChallenge);
+      case 'ChallengeChangeStatusNotification': {
+        const isEnabled = e.data.data.IsEnabled;
+        const id = e.data.data.ChallengeId;
+        if (!isEnabled) {
+          this.pausedChallengeIds.push(id);
+        }
+        else {
+          this.pausedChallengeIds = this.pausedChallengeIds.filter(c => c !== id);
+        }
+        break;
       }
     }
   }
   componentWillLoad() {
+    var _a;
     this.challengesPropHandler(this.challenges);
+    if ((_a = this.challenges) === null || _a === void 0 ? void 0 : _a.length) {
+      this.newChallengeIds = this.challenges.filter(challenge => challenge.IsNew)
+        .map(challenge => challenge.Id);
+    }
   }
   componentDidRender() {
     if (!this.limitStylingAppends && this.host) {
@@ -340,14 +365,16 @@ const CasinoEngagementSuiteChallengesList = class {
   getChallengeClasses(challenge) {
     return {
       ChallengeCard: true,
-      InProgress: challenge.Status === ChallengeProgressStatus.InProgress,
+      InProgress: challenge.Status === ChallengeProgressStatus.InProgress
+        && !this.pausedChallengeIds.includes(challenge.Id),
       Completed: this.isChallengeCompleted(challenge),
       Paused: this.isChallengePaused(challenge)
     };
   }
   isChallengePaused(challenge) {
-    return challenge.Status === ChallengeProgressStatus.Started
-      && challenge.LevelProgresses[0].ProgressPercentage > 0;
+    return (challenge.Status === ChallengeProgressStatus.Started
+      && challenge.LevelProgresses[0].ProgressPercentage > 0)
+      || this.pausedChallengeIds.includes(challenge.Id);
   }
   isChallengeCompleted(challenge) {
     return challenge.Status === ChallengeProgressStatus.Completed
@@ -375,17 +402,19 @@ const CasinoEngagementSuiteChallengesList = class {
   }
   getChallengeHeaderTemplate(challenge) {
     const { Id } = challenge;
-    return index.h("div", { class: "ChallengeCardHeader" }, index.h("div", { class: "ChallengeName" }, challenge.ChallengePresentation.PresentationName), index.h("button", { class: challenge.Status === ChallengeProgressStatus.InProgress ? 'ChallengeJoinButton Joined' : 'ChallengeJoinButton', onClick: this.changeChallengeStatus, "data-id": Id }, challenge.Status === ChallengeProgressStatus.InProgress
+    return index.h("div", { class: "ChallengeCardHeader" }, index.h("div", { class: "ChallengeName" }, challenge.ChallengePresentation.PresentationName), index.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
       ? index.h("casino-engagement-suite-progress-bar", { class: this.device, value: challengeProgress, disabled: this.isChallengePaused(challenge) }, index.h("span", { slot: "Title", class: "ChallengeCountdown" }, countdown))
       : index.h("span", { class: "ChallengeCountdown" }, countdown);
-    return (index.h("div", { class: this.getChallengeClasses(challenge), onClick: this.handleChallengeClick, key: challenge.Id, "data-id": challenge.Id }, this.getChallengeHeaderTemplate(challenge), progressTemplate));
+    return (index.h("div", { class: this.getChallengeClasses(challenge), onClick: this.handleChallengeClick, key: challenge.Id, "data-id": challenge.Id }, this.getChallengeHeaderTemplate(challenge), progressTemplate, index.h("div", { class: `ChallengeLabel ${isNewChallenge ? 'ShowChallengeLabel' : ''}` }, index.h("span", null, translate('new', this.language)))));
   }
   getHeaderTemplate() {
     return index.h("header", { class: "ChallengesListPopupHeader" }, index.h("button", { onClick: this.showTooltip, class: "ChallengesIconButton" }, index.h("img", { src: "https://static.everymatrix.com/gic/img/engagement-suite/help.svg", alt: "Show tooltip" })), index.h("div", { class: "ChallengesListPopupHeaderName" }, translate('challenges', this.language)), index.h("button", { class: "ChallengesIconButton", onClick: this.handleCloseClick }, index.h("img", { src: "https://static.everymatrix.com/gic/img/engagement-suite/close.svg", alt: "Close challenges list" })));
@@ -399,15 +428,10 @@ const CasinoEngagementSuiteChallengesList = class {
     }
   }
   getTooltipTemplate() {
-    if (this.tooltip) {
-      return index.h("div", { class: "ChallengesTooltipBackdrop" }, index.h("div", { class: "ChallengesTooltip" }, index.h("button", { class: "ChallengesIconButton", onClick: this.hideTooltip }, index.h("img", { src: "https://static.everymatrix.com/gic/img/engagement-suite/close.svg", alt: "Close tooltip" })), translate('tooltip', this.language)));
-    }
-    else {
-      return '';
-    }
+    return index.h("div", { class: "ChallengesTooltipBackdrop" }, index.h("div", { class: "ChallengesTooltip" }, index.h("button", { class: "ChallengesIconButton", onClick: this.hideTooltip }, index.h("img", { src: "https://static.everymatrix.com/gic/img/engagement-suite/close.svg", alt: "Close tooltip" })), translate('tooltip', this.language)));
   }
   render() {
-    return index.h("div", { class: `ChallengesListPopup ${this.device}` }, this.getHeaderTemplate(), this.getListTemplate(), this.getTooltipTemplate());
+    return index.h("div", { class: `ChallengesListPopup ${this.device}` }, this.getHeaderTemplate(), this.getListTemplate(), this.tooltip && this.getTooltipTemplate());
   }
   get host() { return index.getElement(this); }
   static get watchers() { return {
@@ -416,7 +440,7 @@ const CasinoEngagementSuiteChallengesList = class {
 };
 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}.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 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) {
@@ -429,6 +453,10 @@ const CasinoEngagementSuiteProgressBar = class {
      * Shows disabled styles
      */
     this.disabled = false;
+    /**
+     * Hide percent value
+     */
+    this.hidePercent = false;
     /**
      * Client custom styling via string
      */
@@ -470,7 +498,8 @@ const CasinoEngagementSuiteProgressBar = class {
     return {
       ProgressBar: true,
       Completed: this.value === 100,
-      Disabled: this.disabled
+      Disabled: this.disabled,
+      HidePercent: this.hidePercent
     };
   }
   render() {

package/dist/cjs/loader.cjs.js

@@ -14,7 +14,7 @@ const patchEsm = () => {
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
   return patchEsm().then(() => {
-  return index.bootstrapLazy([["casino-engagement-suite-challenges-list_2.cjs",[[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"]]],[1,"casino-engagement-suite-progress-bar",{"value":[2],"disabled":[4],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"limitStylingAppends":[32]}]]]], options);
+  return index.bootstrapLazy([["casino-engagement-suite-challenges-list_2.cjs",[[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/collection/components/casino-engagement-suite-challenges-list/casino-engagement-suite-challenges-list.css

@@ -124,6 +124,12 @@ button:focus {
   border-radius: 99px;
 }
 
+.Disabled {
+  opacity: 0.5;
+  pointer-events: none;
+  cursor: auto;
+}
+
 .ChallengesListEmpty {
   padding: 20px 32px;
 }
@@ -150,6 +156,33 @@ button:focus {
   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;

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

@@ -28,6 +28,8 @@ export class CasinoEngagementSuiteChallengesList {
     this.tooltip = false;
     this.timers = {};
     this.limitStylingAppends = false;
+    this.newChallengeIds = [];
+    this.pausedChallengeIds = [];
     this.setClientStyling = () => {
       let sheet = document.createElement('style');
       sheet.innerHTML = this.clientStyling;
@@ -49,10 +51,12 @@ export class CasinoEngagementSuiteChallengesList {
     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;
@@ -61,31 +65,28 @@ export class CasinoEngagementSuiteChallengesList {
       this.tooltip = false;
     };
     this.changeChallengeStatus = (e) => {
+      var _a, _b;
       e.stopPropagation();
       const id = +e.currentTarget.getAttribute('data-id');
-      const inProgressChallenges = this.challenges.filter(c => c.Status === ChallengeProgressStatus.InProgress).map(c => c.Id);
-      if (inProgressChallenges.includes(id)) {
+      if ((_a = this.inProgressChallenges) === null || _a === void 0 ? void 0 : _a.includes(id)) {
         window.postMessage({
           type: 'ShowConfirmationModal',
-          action: 'unjoin',
-          id,
+          ProgressToDeactivate: id,
         });
         return;
       }
-      if ((inProgressChallenges === null || inProgressChallenges === void 0 ? void 0 : inProgressChallenges.length) > 0) {
+      if (((_b = this.inProgressChallenges) === null || _b === void 0 ? void 0 : _b.length) > 0) {
         window.postMessage({
           type: 'ShowConfirmationModal',
-          action: 'join',
-          prevId: inProgressChallenges[0],
-          id,
+          ProgressToActivate: id,
+          ProgressToDeactivate: this.inProgressChallenges[0],
         });
         return;
       }
       window.postMessage({
-        type: 'ChallengeAttendance',
-        confirmationData: {
-          action: 'join',
-          id,
+        type: 'ChallengeJoinRequest',
+        data: {
+          ProgressToActivate: id,
         },
       });
     };
@@ -100,19 +101,42 @@ export class CasinoEngagementSuiteChallengesList {
     }
   }
   handleEvent(e) {
-    const newChallenge = e.data.data;
-    if (e.data.type === 'ChallengeGrant') {
-      const index = this.challenges.findIndex(challenge => differenceInSeconds(new Date(challenge.ExpirationTime), new Date(newChallenge.ExpirationTime)) > 0);
-      if (index > -1) {
-        this.challenges.splice(index, 0, newChallenge);
+    const type = e.data.type;
+    switch (type) {
+      case 'ChallengeGrant': {
+        const newChallenge = e.data.data;
+        const index = this.challenges.findIndex(challenge => differenceInSeconds(new Date(challenge.ExpirationTime), new Date(newChallenge.ExpirationTime)) > 0);
+        if (index > -1) {
+          this.challenges.splice(index, 0, newChallenge);
+        }
+        else {
+          this.challenges.unshift(newChallenge);
+        }
+        this.challenges = [...this.challenges];
+        this.newChallengeIds.push(newChallenge.Id);
+        window.postMessage({ type: 'UpdateChallenges' });
+        break;
       }
-      else {
-        this.challenges.unshift(newChallenge);
+      case 'ChallengeChangeStatusNotification': {
+        const isEnabled = e.data.data.IsEnabled;
+        const id = e.data.data.ChallengeId;
+        if (!isEnabled) {
+          this.pausedChallengeIds.push(id);
+        }
+        else {
+          this.pausedChallengeIds = this.pausedChallengeIds.filter(c => c !== id);
+        }
+        break;
       }
     }
   }
   componentWillLoad() {
+    var _a;
     this.challengesPropHandler(this.challenges);
+    if ((_a = this.challenges) === null || _a === void 0 ? void 0 : _a.length) {
+      this.newChallengeIds = this.challenges.filter(challenge => challenge.IsNew)
+        .map(challenge => challenge.Id);
+    }
   }
   componentDidRender() {
     if (!this.limitStylingAppends && this.host) {
@@ -164,14 +188,16 @@ export class CasinoEngagementSuiteChallengesList {
   getChallengeClasses(challenge) {
     return {
       ChallengeCard: true,
-      InProgress: challenge.Status === ChallengeProgressStatus.InProgress,
+      InProgress: challenge.Status === ChallengeProgressStatus.InProgress
+        && !this.pausedChallengeIds.includes(challenge.Id),
       Completed: this.isChallengeCompleted(challenge),
       Paused: this.isChallengePaused(challenge)
     };
   }
   isChallengePaused(challenge) {
-    return challenge.Status === ChallengeProgressStatus.Started
-      && challenge.LevelProgresses[0].ProgressPercentage > 0;
+    return (challenge.Status === ChallengeProgressStatus.Started
+      && challenge.LevelProgresses[0].ProgressPercentage > 0)
+      || this.pausedChallengeIds.includes(challenge.Id);
   }
   isChallengeCompleted(challenge) {
     return challenge.Status === ChallengeProgressStatus.Completed
@@ -201,20 +227,24 @@ export class CasinoEngagementSuiteChallengesList {
     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', onClick: this.changeChallengeStatus, "data-id": Id }, challenge.Status === ChallengeProgressStatus.InProgress
+      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));
+      progressTemplate,
+      h("div", { class: `ChallengeLabel ${isNewChallenge ? 'ShowChallengeLabel' : ''}` },
+        h("span", null, translate('new', this.language)))));
   }
   getHeaderTemplate() {
     return h("header", { class: "ChallengesListPopupHeader" },
@@ -236,22 +266,17 @@ export class CasinoEngagementSuiteChallengesList {
     }
   }
   getTooltipTemplate() {
-    if (this.tooltip) {
-      return h("div", { class: "ChallengesTooltipBackdrop" },
-        h("div", { class: "ChallengesTooltip" },
-          h("button", { class: "ChallengesIconButton", onClick: this.hideTooltip },
-            h("img", { src: "https://static.everymatrix.com/gic/img/engagement-suite/close.svg", alt: "Close tooltip" })),
-          translate('tooltip', this.language)));
-    }
-    else {
-      return '';
-    }
+    return h("div", { class: "ChallengesTooltipBackdrop" },
+      h("div", { class: "ChallengesTooltip" },
+        h("button", { class: "ChallengesIconButton", onClick: this.hideTooltip },
+          h("img", { src: "https://static.everymatrix.com/gic/img/engagement-suite/close.svg", alt: "Close tooltip" })),
+        translate('tooltip', this.language)));
   }
   render() {
     return h("div", { class: `ChallengesListPopup ${this.device}` },
       this.getHeaderTemplate(),
       this.getListTemplate(),
-      this.getTooltipTemplate());
+      this.tooltip && this.getTooltipTemplate());
   }
   static get is() { return "casino-engagement-suite-challenges-list"; }
   static get encapsulation() { return "shadow"; }
@@ -357,12 +382,50 @@ export class CasinoEngagementSuiteChallengesList {
         "text": "List of challenges"
       },
       "defaultValue": "[] as Array<Challenge>"
+    },
+    "isJoiningToChallenge": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Is joining to challenge"
+      },
+      "attribute": "is-joining-to-challenge",
+      "reflect": false
+    },
+    "inProgressChallenges": {
+      "type": "unknown",
+      "mutable": true,
+      "complexType": {
+        "original": "Array<number>",
+        "resolved": "number[]",
+        "references": {
+          "Array": {
+            "location": "global"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Active challenges"
+      }
     }
   }; }
   static get states() { return {
     "tooltip": {},
     "timers": {},
-    "limitStylingAppends": {}
+    "limitStylingAppends": {},
+    "newChallengeIds": {},
+    "pausedChallengeIds": {}
   }; }
   static get events() { return [{
       "method": "close",

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

@@ -5,6 +5,7 @@ const TRANSLATIONS = {
     challenges: 'Challenges',
     join: 'Join',
     unjoin: 'Unjoin',
+    new: 'new',
     noChallenges: 'No Challenges yet',
     tryOtherGames: 'Try winning Challenges as rewards or launching other booster games',
     tooltip: 'Competition where your real money bets contribute towards the level progress to achieve the level reward'

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

@@ -24,6 +24,7 @@ const TRANSLATIONS = {
     challenges: 'Challenges',
     join: 'Join',
     unjoin: 'Unjoin',
+    new: 'new',
     noChallenges: 'No Challenges yet',
     tryOtherGames: 'Try winning Challenges as rewards or launching other booster games',
     tooltip: 'Competition where your real money bets contribute towards the level progress to achieve the level reward'
@@ -172,7 +173,7 @@ function differenceInSeconds(dateLeft, dateRight, options) {
   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}.ChallengesListEmpty{padding:20px 32px}.ChallengesListEmpty h2{margin:0 0 16px 0;text-align:center;font-weight:600;font-size:20px;line-height:24px;font-family:\"Montserrat\", sans-serif;color:var(--emw--color-typography, #FFFFFF)}.ChallengesListEmpty p{font-size:14px;line-height:17px;color:var(--emw--color-gray-100, #BBB9C3)}.ChallengeCountdown{color:var(--emw--color-gray-100, #BBB9C3);font-size:12px;line-height:12px}.ChallengesTooltipBackdrop{padding:48px 30px 0;position:absolute;width:100%;height:100%;inset:0;background-color:rgba(0, 0, 0, 0.5)}.ChallengesTooltipBackdrop .ChallengesTooltip{border:1px solid var(--emw--button-border-color, #403956);background-color:var(--emw--color-background, #1E1638);border-radius:8px;padding:32px;font-size:14px;line-height:17px;color:var(--emw--color-gray-100, #BBB9C3);position:relative}.ChallengesTooltipBackdrop .ChallengesTooltip .ChallengesIconButton{top:12px;right:6px;position:absolute}.ChallengesListPopup.Tablet .ChallengesListPopupHeader,.ChallengesListPopup.Desktop .ChallengesListPopupHeader{padding-top:16px}.ChallengesListPopup.Tablet .ChallengesListPopupHeaderName,.ChallengesListPopup.Desktop .ChallengesListPopupHeaderName{font-size:16px;line-height:16px}.ChallengesListPopup.Tablet .ChallengesIconButton,.ChallengesListPopup.Desktop .ChallengesIconButton{width:24px;height:24px}.ChallengesListPopup.Tablet .ChallengesList,.ChallengesListPopup.Desktop .ChallengesList{padding:20px 24px 0;row-gap:20px}.ChallengesListPopup.Tablet .ChallengeCardHeader,.ChallengesListPopup.Desktop .ChallengeCardHeader{margin-bottom:16px}.ChallengesListPopup.Tablet .ChallengeName,.ChallengesListPopup.Desktop .ChallengeName{line-height:27px;font-size:22px}.ChallengesListPopup.Tablet .ChallengeJoinButton,.ChallengesListPopup.Desktop .ChallengeJoinButton{min-width:100px;height:36px;font-size:16px}.ChallengesListPopup.Tablet .ChallengeCountdown,.ChallengesListPopup.Desktop .ChallengeCountdown{font-size:14px;line-height:14px}.ChallengesListPopup.Tablet .ChallengesTooltip,.ChallengesListPopup.Desktop .ChallengesTooltip{padding:60px 65px;font-size:16px;line-height:20px}.ChallengesListPopup.Tablet .ChallengesTooltip .ChallengesIconButton,.ChallengesListPopup.Desktop .ChallengesTooltip .ChallengesIconButton{top:24px;right:24px}";
+const casinoEngagementSuiteChallengesListCss = "@import url(\"https://fonts.googleapis.com/css2?family=Montserrat:wght@600&display=swap\");:host{display:block;font-family:inherit}*{box-sizing:border-box;margin:0;padding:0}button{border:none;background:none;cursor:pointer}button:focus{outline:none}.ChallengesListPopup{display:flex;height:100%;background-color:var(--emw--color-background, #1E1638);border-radius:8px;overflow:hidden;flex-direction:column;position:relative}.ChallengesListPopupHeader{display:flex;justify-content:space-between;align-items:center;padding:12px 8px 8px}.ChallengesIconButton{width:16px;height:16px;cursor:pointer}.ChallengesListPopupHeaderName{color:var(--emw--color-gray-100, #BBB9C3);font-size:14px;font-weight:500;line-height:14px}.ChallengesListWrapper{overflow-y:auto;-ms-overflow-style:none;scrollbar-width:none}.ChallengesListWrapper::-webkit-scrollbar{display:none}.ChallengesList{display:flex;flex-direction:column;row-gap:12px;padding:8px 19px 0}.ChallengeCard{padding:15px 15px 19px;border:1px solid var(--emw--button-border-color, #403956);border-radius:6px;position:relative;cursor:pointer}.ChallengeJoinButton.Joined::before,.ChallengeCard.InProgress::before{content:\"\";position:absolute;inset:0;border-radius:var(--emw--button-border-radius, 4px);padding:1px;background:linear-gradient(98.25deg, #FF9400 22.48%, #FEF746 131.02%, #FFE24A 131.9%);-webkit-mask:linear-gradient(#FFF 0 0) content-box, linear-gradient(#FFF 0 0);-webkit-mask-composite:xor;mask-composite:exclude}.ChallengeCardHeader{display:flex;justify-content:space-between;gap:24px;margin-bottom:12px}.ChallengeName{color:var(--emw--color-typography, #FFFFFF);font-family:\"Montserrat\", sans-serif;line-height:22px;font-weight:700;font-size:18px;word-break:break-word}.ChallengeJoinButton{transition:all 0.5s ease-out;background:linear-gradient(98.25deg, #FF9400 22.48%, #FEF746 131.02%, #FFE24A 131.9%);color:var(--emw--color-typography, #1E1638);border-radius:99px;min-width:88px;height:32px;font-size:14px;font-weight:700;position:relative;font-family:\"Montserrat\", sans-serif}.ChallengeJoinButton.Joined{background:linear-gradient(98.25deg, #FF9400 22.48%, #FEF746 131.02%, #FFE24A 131.9%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.ChallengeJoinButton.Joined::before{border-radius:99px}.Disabled{opacity:0.5;pointer-events:none;cursor:auto}.ChallengesListEmpty{padding:20px 32px}.ChallengesListEmpty h2{margin:0 0 16px 0;text-align:center;font-weight:600;font-size:20px;line-height:24px;font-family:\"Montserrat\", sans-serif;color:var(--emw--color-typography, #FFFFFF)}.ChallengesListEmpty p{font-size:14px;line-height:17px;color:var(--emw--color-gray-100, #BBB9C3)}.ChallengeCountdown{color:var(--emw--color-gray-100, #BBB9C3);font-size:12px;line-height:12px}.ChallengeLabel{min-width:35px;height:18px;background:linear-gradient(180deg, #FFB801 15.86%, #FEF746 31.36%, #FBFFE0 36.86%, #FFFA60 47.86%, #FF9400 87.36%);border-radius:2px;display:none;position:absolute;top:-11px;right:11px;padding:0 2px;align-items:center;justify-content:center}.ChallengeLabel span{display:inline-block;text-transform:uppercase;font-size:10px;line-height:10px;font-weight:700;font-family:\"Montserrat\", sans-serif;color:var(--emw--color-typography, #1E1638)}.ShowChallengeLabel{display:inline-flex}.ChallengesTooltipBackdrop{padding:48px 30px 0;position:absolute;width:100%;height:100%;inset:0;background-color:rgba(0, 0, 0, 0.5)}.ChallengesTooltipBackdrop .ChallengesTooltip{border:1px solid var(--emw--button-border-color, #403956);background-color:var(--emw--color-background, #1E1638);border-radius:8px;padding:32px;font-size:14px;line-height:17px;color:var(--emw--color-gray-100, #BBB9C3);position:relative}.ChallengesTooltipBackdrop .ChallengesTooltip .ChallengesIconButton{top:12px;right:6px;position:absolute}.ChallengesListPopup.Tablet .ChallengesListPopupHeader,.ChallengesListPopup.Desktop .ChallengesListPopupHeader{padding-top:16px}.ChallengesListPopup.Tablet .ChallengesListPopupHeaderName,.ChallengesListPopup.Desktop .ChallengesListPopupHeaderName{font-size:16px;line-height:16px}.ChallengesListPopup.Tablet .ChallengesIconButton,.ChallengesListPopup.Desktop .ChallengesIconButton{width:24px;height:24px}.ChallengesListPopup.Tablet .ChallengesList,.ChallengesListPopup.Desktop .ChallengesList{padding:20px 24px 0;row-gap:20px}.ChallengesListPopup.Tablet .ChallengeCardHeader,.ChallengesListPopup.Desktop .ChallengeCardHeader{margin-bottom:16px}.ChallengesListPopup.Tablet .ChallengeName,.ChallengesListPopup.Desktop .ChallengeName{line-height:27px;font-size:22px}.ChallengesListPopup.Tablet .ChallengeJoinButton,.ChallengesListPopup.Desktop .ChallengeJoinButton{min-width:100px;height:36px;font-size:16px}.ChallengesListPopup.Tablet .ChallengeCountdown,.ChallengesListPopup.Desktop .ChallengeCountdown{font-size:14px;line-height:14px}.ChallengesListPopup.Tablet .ChallengesTooltip,.ChallengesListPopup.Desktop .ChallengesTooltip{padding:60px 65px;font-size:16px;line-height:20px}.ChallengesListPopup.Tablet .ChallengesTooltip .ChallengesIconButton,.ChallengesListPopup.Desktop .ChallengesTooltip .ChallengesIconButton{top:24px;right:24px}";
 
 const CasinoEngagementSuiteChallengesList$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -203,6 +204,8 @@ const CasinoEngagementSuiteChallengesList$1 = /*@__PURE__*/ proxyCustomElement(c
     this.tooltip = false;
     this.timers = {};
     this.limitStylingAppends = false;
+    this.newChallengeIds = [];
+    this.pausedChallengeIds = [];
     this.setClientStyling = () => {
       let sheet = document.createElement('style');
       sheet.innerHTML = this.clientStyling;
@@ -224,10 +227,12 @@ const CasinoEngagementSuiteChallengesList$1 = /*@__PURE__*/ proxyCustomElement(c
     this.handleCloseClick = () => {
       this.close.emit();
       this.tooltip = false;
+      this.newChallengeIds = [];
     };
     this.handleChallengeClick = (ev) => {
       const id = +ev.currentTarget.getAttribute('data-id');
       window.postMessage({ type: 'ChallengeClick', id });
+      this.newChallengeIds = this.newChallengeIds.filter(item => item !== id);
     };
     this.showTooltip = () => {
       this.tooltip = true;
@@ -236,31 +241,28 @@ const CasinoEngagementSuiteChallengesList$1 = /*@__PURE__*/ proxyCustomElement(c
       this.tooltip = false;
     };
     this.changeChallengeStatus = (e) => {
+      var _a, _b;
       e.stopPropagation();
       const id = +e.currentTarget.getAttribute('data-id');
-      const inProgressChallenges = this.challenges.filter(c => c.Status === ChallengeProgressStatus.InProgress).map(c => c.Id);
-      if (inProgressChallenges.includes(id)) {
+      if ((_a = this.inProgressChallenges) === null || _a === void 0 ? void 0 : _a.includes(id)) {
         window.postMessage({
           type: 'ShowConfirmationModal',
-          action: 'unjoin',
-          id,
+          ProgressToDeactivate: id,
         });
         return;
       }
-      if ((inProgressChallenges === null || inProgressChallenges === void 0 ? void 0 : inProgressChallenges.length) > 0) {
+      if (((_b = this.inProgressChallenges) === null || _b === void 0 ? void 0 : _b.length) > 0) {
         window.postMessage({
           type: 'ShowConfirmationModal',
-          action: 'join',
-          prevId: inProgressChallenges[0],
-          id,
+          ProgressToActivate: id,
+          ProgressToDeactivate: this.inProgressChallenges[0],
         });
         return;
       }
       window.postMessage({
-        type: 'ChallengeAttendance',
-        confirmationData: {
-          action: 'join',
-          id,
+        type: 'ChallengeJoinRequest',
+        data: {
+          ProgressToActivate: id,
         },
       });
     };
@@ -275,19 +277,42 @@ const CasinoEngagementSuiteChallengesList$1 = /*@__PURE__*/ proxyCustomElement(c
     }
   }
   handleEvent(e) {
-    const newChallenge = e.data.data;
-    if (e.data.type === 'ChallengeGrant') {
-      const index = this.challenges.findIndex(challenge => differenceInSeconds(new Date(challenge.ExpirationTime), new Date(newChallenge.ExpirationTime)) > 0);
-      if (index > -1) {
-        this.challenges.splice(index, 0, newChallenge);
+    const type = e.data.type;
+    switch (type) {
+      case 'ChallengeGrant': {
+        const newChallenge = e.data.data;
+        const index = this.challenges.findIndex(challenge => differenceInSeconds(new Date(challenge.ExpirationTime), new Date(newChallenge.ExpirationTime)) > 0);
+        if (index > -1) {
+          this.challenges.splice(index, 0, newChallenge);
+        }
+        else {
+          this.challenges.unshift(newChallenge);
+        }
+        this.challenges = [...this.challenges];
+        this.newChallengeIds.push(newChallenge.Id);
+        window.postMessage({ type: 'UpdateChallenges' });
+        break;
       }
-      else {
-        this.challenges.unshift(newChallenge);
+      case 'ChallengeChangeStatusNotification': {
+        const isEnabled = e.data.data.IsEnabled;
+        const id = e.data.data.ChallengeId;
+        if (!isEnabled) {
+          this.pausedChallengeIds.push(id);
+        }
+        else {
+          this.pausedChallengeIds = this.pausedChallengeIds.filter(c => c !== id);
+        }
+        break;
       }
     }
   }
   componentWillLoad() {
+    var _a;
     this.challengesPropHandler(this.challenges);
+    if ((_a = this.challenges) === null || _a === void 0 ? void 0 : _a.length) {
+      this.newChallengeIds = this.challenges.filter(challenge => challenge.IsNew)
+        .map(challenge => challenge.Id);
+    }
   }
   componentDidRender() {
     if (!this.limitStylingAppends && this.host) {
@@ -339,14 +364,16 @@ const CasinoEngagementSuiteChallengesList$1 = /*@__PURE__*/ proxyCustomElement(c
   getChallengeClasses(challenge) {
     return {
       ChallengeCard: true,
-      InProgress: challenge.Status === ChallengeProgressStatus.InProgress,
+      InProgress: challenge.Status === ChallengeProgressStatus.InProgress
+        && !this.pausedChallengeIds.includes(challenge.Id),
       Completed: this.isChallengeCompleted(challenge),
       Paused: this.isChallengePaused(challenge)
     };
   }
   isChallengePaused(challenge) {
-    return challenge.Status === ChallengeProgressStatus.Started
-      && challenge.LevelProgresses[0].ProgressPercentage > 0;
+    return (challenge.Status === ChallengeProgressStatus.Started
+      && challenge.LevelProgresses[0].ProgressPercentage > 0)
+      || this.pausedChallengeIds.includes(challenge.Id);
   }
   isChallengeCompleted(challenge) {
     return challenge.Status === ChallengeProgressStatus.Completed
@@ -374,17 +401,19 @@ const CasinoEngagementSuiteChallengesList$1 = /*@__PURE__*/ proxyCustomElement(c
   }
   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', onClick: this.changeChallengeStatus, "data-id": Id }, challenge.Status === ChallengeProgressStatus.InProgress
+    return h("div", { class: "ChallengeCardHeader" }, h("div", { class: "ChallengeName" }, challenge.ChallengePresentation.PresentationName), h("button", { class: `${challenge.Status === ChallengeProgressStatus.InProgress ?
+        'ChallengeJoinButton Joined' : 'ChallengeJoinButton'} ${this.isJoiningToChallenge ? 'Disabled' : ''}`, onClick: this.changeChallengeStatus, "data-id": Id }, challenge.Status === ChallengeProgressStatus.InProgress
       ? translate('unjoin', this.language)
       : translate('join', this.language)));
   }
   getChallengeTemplate(challenge) {
     const challengeProgress = this.getChallengeProgress(challenge);
     const countdown = this.timers[challenge.Id];
+    const isNewChallenge = this.newChallengeIds.includes(challenge.Id);
     const progressTemplate = challengeProgress > -1
       ? h("casino-engagement-suite-progress-bar", { class: this.device, value: challengeProgress, disabled: this.isChallengePaused(challenge) }, h("span", { slot: "Title", class: "ChallengeCountdown" }, countdown))
       : h("span", { class: "ChallengeCountdown" }, countdown);
-    return (h("div", { class: this.getChallengeClasses(challenge), onClick: this.handleChallengeClick, key: challenge.Id, "data-id": challenge.Id }, this.getChallengeHeaderTemplate(challenge), progressTemplate));
+    return (h("div", { class: this.getChallengeClasses(challenge), onClick: this.handleChallengeClick, key: challenge.Id, "data-id": challenge.Id }, this.getChallengeHeaderTemplate(challenge), progressTemplate, h("div", { class: `ChallengeLabel ${isNewChallenge ? 'ShowChallengeLabel' : ''}` }, h("span", null, translate('new', this.language)))));
   }
   getHeaderTemplate() {
     return h("header", { class: "ChallengesListPopupHeader" }, h("button", { onClick: this.showTooltip, class: "ChallengesIconButton" }, h("img", { src: "https://static.everymatrix.com/gic/img/engagement-suite/help.svg", alt: "Show tooltip" })), h("div", { class: "ChallengesListPopupHeaderName" }, translate('challenges', this.language)), h("button", { class: "ChallengesIconButton", onClick: this.handleCloseClick }, h("img", { src: "https://static.everymatrix.com/gic/img/engagement-suite/close.svg", alt: "Close challenges list" })));
@@ -398,15 +427,10 @@ const CasinoEngagementSuiteChallengesList$1 = /*@__PURE__*/ proxyCustomElement(c
     }
   }
   getTooltipTemplate() {
-    if (this.tooltip) {
-      return h("div", { class: "ChallengesTooltipBackdrop" }, h("div", { class: "ChallengesTooltip" }, h("button", { class: "ChallengesIconButton", onClick: this.hideTooltip }, h("img", { src: "https://static.everymatrix.com/gic/img/engagement-suite/close.svg", alt: "Close tooltip" })), translate('tooltip', this.language)));
-    }
-    else {
-      return '';
-    }
+    return h("div", { class: "ChallengesTooltipBackdrop" }, h("div", { class: "ChallengesTooltip" }, h("button", { class: "ChallengesIconButton", onClick: this.hideTooltip }, h("img", { src: "https://static.everymatrix.com/gic/img/engagement-suite/close.svg", alt: "Close tooltip" })), translate('tooltip', this.language)));
   }
   render() {
-    return h("div", { class: `ChallengesListPopup ${this.device}` }, this.getHeaderTemplate(), this.getListTemplate(), this.getTooltipTemplate());
+    return h("div", { class: `ChallengesListPopup ${this.device}` }, this.getHeaderTemplate(), this.getListTemplate(), this.tooltip && this.getTooltipTemplate());
   }
   get host() { return this; }
   static get watchers() { return {
@@ -419,9 +443,13 @@ const CasinoEngagementSuiteChallengesList$1 = /*@__PURE__*/ proxyCustomElement(c
     "language": [1],
     "device": [1],
     "challenges": [1040],
+    "isJoiningToChallenge": [1028, "is-joining-to-challenge"],
+    "inProgressChallenges": [1040],
     "tooltip": [32],
     "timers": [32],
-    "limitStylingAppends": [32]
+    "limitStylingAppends": [32],
+    "newChallengeIds": [32],
+    "pausedChallengeIds": [32]
   }, [[8, "message", "handleEvent"]]]);
 function defineCustomElement$1() {
   if (typeof customElements === "undefined") {

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

@@ -1,6 +1,6 @@
 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}.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 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() {
@@ -15,6 +15,10 @@ const CasinoEngagementSuiteProgressBar = /*@__PURE__*/ proxyCustomElement(class
      * Shows disabled styles
      */
     this.disabled = false;
+    /**
+     * Hide percent value
+     */
+    this.hidePercent = false;
     /**
      * Client custom styling via string
      */
@@ -56,7 +60,8 @@ const CasinoEngagementSuiteProgressBar = /*@__PURE__*/ proxyCustomElement(class
     return {
       ProgressBar: true,
       Completed: this.value === 100,
-      Disabled: this.disabled
+      Disabled: this.disabled,
+      HidePercent: this.hidePercent
     };
   }
   render() {
@@ -67,6 +72,7 @@ const CasinoEngagementSuiteProgressBar = /*@__PURE__*/ proxyCustomElement(class
 }, [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]

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

@@ -13,5 +13,5 @@ const patchBrowser = () => {
 };
 
 patchBrowser().then(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],"tooltip":[32],"timers":[32],"limitStylingAppends":[32]},[[8,"message","handleEvent"]]],[1,"casino-engagement-suite-progress-bar",{"value":[2],"disabled":[4],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"limitStylingAppends":[32]}]]]], 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

@@ -23,6 +23,7 @@ const TRANSLATIONS = {
     challenges: 'Challenges',
     join: 'Join',
     unjoin: 'Unjoin',
+    new: 'new',
     noChallenges: 'No Challenges yet',
     tryOtherGames: 'Try winning Challenges as rewards or launching other booster games',
     tooltip: 'Competition where your real money bets contribute towards the level progress to achieve the level reward'
@@ -171,7 +172,7 @@ function differenceInSeconds(dateLeft, dateRight, options) {
   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}.ChallengesListEmpty{padding:20px 32px}.ChallengesListEmpty h2{margin:0 0 16px 0;text-align:center;font-weight:600;font-size:20px;line-height:24px;font-family:\"Montserrat\", sans-serif;color:var(--emw--color-typography, #FFFFFF)}.ChallengesListEmpty p{font-size:14px;line-height:17px;color:var(--emw--color-gray-100, #BBB9C3)}.ChallengeCountdown{color:var(--emw--color-gray-100, #BBB9C3);font-size:12px;line-height:12px}.ChallengesTooltipBackdrop{padding:48px 30px 0;position:absolute;width:100%;height:100%;inset:0;background-color:rgba(0, 0, 0, 0.5)}.ChallengesTooltipBackdrop .ChallengesTooltip{border:1px solid var(--emw--button-border-color, #403956);background-color:var(--emw--color-background, #1E1638);border-radius:8px;padding:32px;font-size:14px;line-height:17px;color:var(--emw--color-gray-100, #BBB9C3);position:relative}.ChallengesTooltipBackdrop .ChallengesTooltip .ChallengesIconButton{top:12px;right:6px;position:absolute}.ChallengesListPopup.Tablet .ChallengesListPopupHeader,.ChallengesListPopup.Desktop .ChallengesListPopupHeader{padding-top:16px}.ChallengesListPopup.Tablet .ChallengesListPopupHeaderName,.ChallengesListPopup.Desktop .ChallengesListPopupHeaderName{font-size:16px;line-height:16px}.ChallengesListPopup.Tablet .ChallengesIconButton,.ChallengesListPopup.Desktop .ChallengesIconButton{width:24px;height:24px}.ChallengesListPopup.Tablet .ChallengesList,.ChallengesListPopup.Desktop .ChallengesList{padding:20px 24px 0;row-gap:20px}.ChallengesListPopup.Tablet .ChallengeCardHeader,.ChallengesListPopup.Desktop .ChallengeCardHeader{margin-bottom:16px}.ChallengesListPopup.Tablet .ChallengeName,.ChallengesListPopup.Desktop .ChallengeName{line-height:27px;font-size:22px}.ChallengesListPopup.Tablet .ChallengeJoinButton,.ChallengesListPopup.Desktop .ChallengeJoinButton{min-width:100px;height:36px;font-size:16px}.ChallengesListPopup.Tablet .ChallengeCountdown,.ChallengesListPopup.Desktop .ChallengeCountdown{font-size:14px;line-height:14px}.ChallengesListPopup.Tablet .ChallengesTooltip,.ChallengesListPopup.Desktop .ChallengesTooltip{padding:60px 65px;font-size:16px;line-height:20px}.ChallengesListPopup.Tablet .ChallengesTooltip .ChallengesIconButton,.ChallengesListPopup.Desktop .ChallengesTooltip .ChallengesIconButton{top:24px;right:24px}";
+const casinoEngagementSuiteChallengesListCss = "@import url(\"https://fonts.googleapis.com/css2?family=Montserrat:wght@600&display=swap\");:host{display:block;font-family:inherit}*{box-sizing:border-box;margin:0;padding:0}button{border:none;background:none;cursor:pointer}button:focus{outline:none}.ChallengesListPopup{display:flex;height:100%;background-color:var(--emw--color-background, #1E1638);border-radius:8px;overflow:hidden;flex-direction:column;position:relative}.ChallengesListPopupHeader{display:flex;justify-content:space-between;align-items:center;padding:12px 8px 8px}.ChallengesIconButton{width:16px;height:16px;cursor:pointer}.ChallengesListPopupHeaderName{color:var(--emw--color-gray-100, #BBB9C3);font-size:14px;font-weight:500;line-height:14px}.ChallengesListWrapper{overflow-y:auto;-ms-overflow-style:none;scrollbar-width:none}.ChallengesListWrapper::-webkit-scrollbar{display:none}.ChallengesList{display:flex;flex-direction:column;row-gap:12px;padding:8px 19px 0}.ChallengeCard{padding:15px 15px 19px;border:1px solid var(--emw--button-border-color, #403956);border-radius:6px;position:relative;cursor:pointer}.ChallengeJoinButton.Joined::before,.ChallengeCard.InProgress::before{content:\"\";position:absolute;inset:0;border-radius:var(--emw--button-border-radius, 4px);padding:1px;background:linear-gradient(98.25deg, #FF9400 22.48%, #FEF746 131.02%, #FFE24A 131.9%);-webkit-mask:linear-gradient(#FFF 0 0) content-box, linear-gradient(#FFF 0 0);-webkit-mask-composite:xor;mask-composite:exclude}.ChallengeCardHeader{display:flex;justify-content:space-between;gap:24px;margin-bottom:12px}.ChallengeName{color:var(--emw--color-typography, #FFFFFF);font-family:\"Montserrat\", sans-serif;line-height:22px;font-weight:700;font-size:18px;word-break:break-word}.ChallengeJoinButton{transition:all 0.5s ease-out;background:linear-gradient(98.25deg, #FF9400 22.48%, #FEF746 131.02%, #FFE24A 131.9%);color:var(--emw--color-typography, #1E1638);border-radius:99px;min-width:88px;height:32px;font-size:14px;font-weight:700;position:relative;font-family:\"Montserrat\", sans-serif}.ChallengeJoinButton.Joined{background:linear-gradient(98.25deg, #FF9400 22.48%, #FEF746 131.02%, #FFE24A 131.9%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.ChallengeJoinButton.Joined::before{border-radius:99px}.Disabled{opacity:0.5;pointer-events:none;cursor:auto}.ChallengesListEmpty{padding:20px 32px}.ChallengesListEmpty h2{margin:0 0 16px 0;text-align:center;font-weight:600;font-size:20px;line-height:24px;font-family:\"Montserrat\", sans-serif;color:var(--emw--color-typography, #FFFFFF)}.ChallengesListEmpty p{font-size:14px;line-height:17px;color:var(--emw--color-gray-100, #BBB9C3)}.ChallengeCountdown{color:var(--emw--color-gray-100, #BBB9C3);font-size:12px;line-height:12px}.ChallengeLabel{min-width:35px;height:18px;background:linear-gradient(180deg, #FFB801 15.86%, #FEF746 31.36%, #FBFFE0 36.86%, #FFFA60 47.86%, #FF9400 87.36%);border-radius:2px;display:none;position:absolute;top:-11px;right:11px;padding:0 2px;align-items:center;justify-content:center}.ChallengeLabel span{display:inline-block;text-transform:uppercase;font-size:10px;line-height:10px;font-weight:700;font-family:\"Montserrat\", sans-serif;color:var(--emw--color-typography, #1E1638)}.ShowChallengeLabel{display:inline-flex}.ChallengesTooltipBackdrop{padding:48px 30px 0;position:absolute;width:100%;height:100%;inset:0;background-color:rgba(0, 0, 0, 0.5)}.ChallengesTooltipBackdrop .ChallengesTooltip{border:1px solid var(--emw--button-border-color, #403956);background-color:var(--emw--color-background, #1E1638);border-radius:8px;padding:32px;font-size:14px;line-height:17px;color:var(--emw--color-gray-100, #BBB9C3);position:relative}.ChallengesTooltipBackdrop .ChallengesTooltip .ChallengesIconButton{top:12px;right:6px;position:absolute}.ChallengesListPopup.Tablet .ChallengesListPopupHeader,.ChallengesListPopup.Desktop .ChallengesListPopupHeader{padding-top:16px}.ChallengesListPopup.Tablet .ChallengesListPopupHeaderName,.ChallengesListPopup.Desktop .ChallengesListPopupHeaderName{font-size:16px;line-height:16px}.ChallengesListPopup.Tablet .ChallengesIconButton,.ChallengesListPopup.Desktop .ChallengesIconButton{width:24px;height:24px}.ChallengesListPopup.Tablet .ChallengesList,.ChallengesListPopup.Desktop .ChallengesList{padding:20px 24px 0;row-gap:20px}.ChallengesListPopup.Tablet .ChallengeCardHeader,.ChallengesListPopup.Desktop .ChallengeCardHeader{margin-bottom:16px}.ChallengesListPopup.Tablet .ChallengeName,.ChallengesListPopup.Desktop .ChallengeName{line-height:27px;font-size:22px}.ChallengesListPopup.Tablet .ChallengeJoinButton,.ChallengesListPopup.Desktop .ChallengeJoinButton{min-width:100px;height:36px;font-size:16px}.ChallengesListPopup.Tablet .ChallengeCountdown,.ChallengesListPopup.Desktop .ChallengeCountdown{font-size:14px;line-height:14px}.ChallengesListPopup.Tablet .ChallengesTooltip,.ChallengesListPopup.Desktop .ChallengesTooltip{padding:60px 65px;font-size:16px;line-height:20px}.ChallengesListPopup.Tablet .ChallengesTooltip .ChallengesIconButton,.ChallengesListPopup.Desktop .ChallengesTooltip .ChallengesIconButton{top:24px;right:24px}";
 
 const CasinoEngagementSuiteChallengesList = class {
   constructor(hostRef) {
@@ -200,6 +201,8 @@ const CasinoEngagementSuiteChallengesList = class {
     this.tooltip = false;
     this.timers = {};
     this.limitStylingAppends = false;
+    this.newChallengeIds = [];
+    this.pausedChallengeIds = [];
     this.setClientStyling = () => {
       let sheet = document.createElement('style');
       sheet.innerHTML = this.clientStyling;
@@ -221,10 +224,12 @@ const CasinoEngagementSuiteChallengesList = class {
     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;
@@ -233,31 +238,28 @@ const CasinoEngagementSuiteChallengesList = class {
       this.tooltip = false;
     };
     this.changeChallengeStatus = (e) => {
+      var _a, _b;
       e.stopPropagation();
       const id = +e.currentTarget.getAttribute('data-id');
-      const inProgressChallenges = this.challenges.filter(c => c.Status === ChallengeProgressStatus.InProgress).map(c => c.Id);
-      if (inProgressChallenges.includes(id)) {
+      if ((_a = this.inProgressChallenges) === null || _a === void 0 ? void 0 : _a.includes(id)) {
         window.postMessage({
           type: 'ShowConfirmationModal',
-          action: 'unjoin',
-          id,
+          ProgressToDeactivate: id,
         });
         return;
       }
-      if ((inProgressChallenges === null || inProgressChallenges === void 0 ? void 0 : inProgressChallenges.length) > 0) {
+      if (((_b = this.inProgressChallenges) === null || _b === void 0 ? void 0 : _b.length) > 0) {
         window.postMessage({
           type: 'ShowConfirmationModal',
-          action: 'join',
-          prevId: inProgressChallenges[0],
-          id,
+          ProgressToActivate: id,
+          ProgressToDeactivate: this.inProgressChallenges[0],
         });
         return;
       }
       window.postMessage({
-        type: 'ChallengeAttendance',
-        confirmationData: {
-          action: 'join',
-          id,
+        type: 'ChallengeJoinRequest',
+        data: {
+          ProgressToActivate: id,
         },
       });
     };
@@ -272,19 +274,42 @@ const CasinoEngagementSuiteChallengesList = class {
     }
   }
   handleEvent(e) {
-    const newChallenge = e.data.data;
-    if (e.data.type === 'ChallengeGrant') {
-      const index = this.challenges.findIndex(challenge => differenceInSeconds(new Date(challenge.ExpirationTime), new Date(newChallenge.ExpirationTime)) > 0);
-      if (index > -1) {
-        this.challenges.splice(index, 0, newChallenge);
+    const type = e.data.type;
+    switch (type) {
+      case 'ChallengeGrant': {
+        const newChallenge = e.data.data;
+        const index = this.challenges.findIndex(challenge => differenceInSeconds(new Date(challenge.ExpirationTime), new Date(newChallenge.ExpirationTime)) > 0);
+        if (index > -1) {
+          this.challenges.splice(index, 0, newChallenge);
+        }
+        else {
+          this.challenges.unshift(newChallenge);
+        }
+        this.challenges = [...this.challenges];
+        this.newChallengeIds.push(newChallenge.Id);
+        window.postMessage({ type: 'UpdateChallenges' });
+        break;
       }
-      else {
-        this.challenges.unshift(newChallenge);
+      case 'ChallengeChangeStatusNotification': {
+        const isEnabled = e.data.data.IsEnabled;
+        const id = e.data.data.ChallengeId;
+        if (!isEnabled) {
+          this.pausedChallengeIds.push(id);
+        }
+        else {
+          this.pausedChallengeIds = this.pausedChallengeIds.filter(c => c !== id);
+        }
+        break;
       }
     }
   }
   componentWillLoad() {
+    var _a;
     this.challengesPropHandler(this.challenges);
+    if ((_a = this.challenges) === null || _a === void 0 ? void 0 : _a.length) {
+      this.newChallengeIds = this.challenges.filter(challenge => challenge.IsNew)
+        .map(challenge => challenge.Id);
+    }
   }
   componentDidRender() {
     if (!this.limitStylingAppends && this.host) {
@@ -336,14 +361,16 @@ const CasinoEngagementSuiteChallengesList = class {
   getChallengeClasses(challenge) {
     return {
       ChallengeCard: true,
-      InProgress: challenge.Status === ChallengeProgressStatus.InProgress,
+      InProgress: challenge.Status === ChallengeProgressStatus.InProgress
+        && !this.pausedChallengeIds.includes(challenge.Id),
       Completed: this.isChallengeCompleted(challenge),
       Paused: this.isChallengePaused(challenge)
     };
   }
   isChallengePaused(challenge) {
-    return challenge.Status === ChallengeProgressStatus.Started
-      && challenge.LevelProgresses[0].ProgressPercentage > 0;
+    return (challenge.Status === ChallengeProgressStatus.Started
+      && challenge.LevelProgresses[0].ProgressPercentage > 0)
+      || this.pausedChallengeIds.includes(challenge.Id);
   }
   isChallengeCompleted(challenge) {
     return challenge.Status === ChallengeProgressStatus.Completed
@@ -371,17 +398,19 @@ const CasinoEngagementSuiteChallengesList = class {
   }
   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', onClick: this.changeChallengeStatus, "data-id": Id }, challenge.Status === ChallengeProgressStatus.InProgress
+    return h("div", { class: "ChallengeCardHeader" }, h("div", { class: "ChallengeName" }, challenge.ChallengePresentation.PresentationName), h("button", { class: `${challenge.Status === ChallengeProgressStatus.InProgress ?
+        'ChallengeJoinButton Joined' : 'ChallengeJoinButton'} ${this.isJoiningToChallenge ? 'Disabled' : ''}`, onClick: this.changeChallengeStatus, "data-id": Id }, challenge.Status === ChallengeProgressStatus.InProgress
       ? translate('unjoin', this.language)
       : translate('join', this.language)));
   }
   getChallengeTemplate(challenge) {
     const challengeProgress = this.getChallengeProgress(challenge);
     const countdown = this.timers[challenge.Id];
+    const isNewChallenge = this.newChallengeIds.includes(challenge.Id);
     const progressTemplate = challengeProgress > -1
       ? h("casino-engagement-suite-progress-bar", { class: this.device, value: challengeProgress, disabled: this.isChallengePaused(challenge) }, h("span", { slot: "Title", class: "ChallengeCountdown" }, countdown))
       : h("span", { class: "ChallengeCountdown" }, countdown);
-    return (h("div", { class: this.getChallengeClasses(challenge), onClick: this.handleChallengeClick, key: challenge.Id, "data-id": challenge.Id }, this.getChallengeHeaderTemplate(challenge), progressTemplate));
+    return (h("div", { class: this.getChallengeClasses(challenge), onClick: this.handleChallengeClick, key: challenge.Id, "data-id": challenge.Id }, this.getChallengeHeaderTemplate(challenge), progressTemplate, h("div", { class: `ChallengeLabel ${isNewChallenge ? 'ShowChallengeLabel' : ''}` }, h("span", null, translate('new', this.language)))));
   }
   getHeaderTemplate() {
     return h("header", { class: "ChallengesListPopupHeader" }, h("button", { onClick: this.showTooltip, class: "ChallengesIconButton" }, h("img", { src: "https://static.everymatrix.com/gic/img/engagement-suite/help.svg", alt: "Show tooltip" })), h("div", { class: "ChallengesListPopupHeaderName" }, translate('challenges', this.language)), h("button", { class: "ChallengesIconButton", onClick: this.handleCloseClick }, h("img", { src: "https://static.everymatrix.com/gic/img/engagement-suite/close.svg", alt: "Close challenges list" })));
@@ -395,15 +424,10 @@ const CasinoEngagementSuiteChallengesList = class {
     }
   }
   getTooltipTemplate() {
-    if (this.tooltip) {
-      return h("div", { class: "ChallengesTooltipBackdrop" }, h("div", { class: "ChallengesTooltip" }, h("button", { class: "ChallengesIconButton", onClick: this.hideTooltip }, h("img", { src: "https://static.everymatrix.com/gic/img/engagement-suite/close.svg", alt: "Close tooltip" })), translate('tooltip', this.language)));
-    }
-    else {
-      return '';
-    }
+    return h("div", { class: "ChallengesTooltipBackdrop" }, h("div", { class: "ChallengesTooltip" }, h("button", { class: "ChallengesIconButton", onClick: this.hideTooltip }, h("img", { src: "https://static.everymatrix.com/gic/img/engagement-suite/close.svg", alt: "Close tooltip" })), translate('tooltip', this.language)));
   }
   render() {
-    return h("div", { class: `ChallengesListPopup ${this.device}` }, this.getHeaderTemplate(), this.getListTemplate(), this.getTooltipTemplate());
+    return h("div", { class: `ChallengesListPopup ${this.device}` }, this.getHeaderTemplate(), this.getListTemplate(), this.tooltip && this.getTooltipTemplate());
   }
   get host() { return getElement(this); }
   static get watchers() { return {
@@ -412,7 +436,7 @@ const CasinoEngagementSuiteChallengesList = class {
 };
 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}.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 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) {
@@ -425,6 +449,10 @@ const CasinoEngagementSuiteProgressBar = class {
      * Shows disabled styles
      */
     this.disabled = false;
+    /**
+     * Hide percent value
+     */
+    this.hidePercent = false;
     /**
      * Client custom styling via string
      */
@@ -466,7 +494,8 @@ const CasinoEngagementSuiteProgressBar = class {
     return {
       ProgressBar: true,
       Completed: this.value === 100,
-      Disabled: this.disabled
+      Disabled: this.disabled,
+      HidePercent: this.hidePercent
     };
   }
   render() {

package/dist/esm/loader.js

@@ -10,7 +10,7 @@ const patchEsm = () => {
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
   return patchEsm().then(() => {
-  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],"tooltip":[32],"timers":[32],"limitStylingAppends":[32]},[[8,"message","handleEvent"]]],[1,"casino-engagement-suite-progress-bar",{"value":[2],"disabled":[4],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"limitStylingAppends":[32]}]]]], 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/types/components/casino-engagement-suite-challenges-list/casino-engagement-suite-challenges-list.d.ts

@@ -22,10 +22,20 @@ export declare class CasinoEngagementSuiteChallengesList {
    * List of challenges
    */
   challenges: Challenge[];
+  /**
+   *Is joining to challenge
+   */
+  isJoiningToChallenge: boolean;
+  /**
+   *Active challenges
+   */
+  inProgressChallenges: Array<number>;
   close: EventEmitter<void>;
   tooltip: boolean;
   timers: Record<string, string>;
   private limitStylingAppends;
+  newChallengeIds: number[];
+  pausedChallengeIds: number[];
   host: HTMLElement;
   challengesPropHandler(value: Array<Challenge>): void;
   handleEvent(e: any): void;

package/dist/types/components.d.ts

@@ -24,6 +24,14 @@ export namespace Components {
           * User's device type
          */
         "device": "Mobile" | "Tablet" | "Desktop";
+        /**
+          * Active challenges
+         */
+        "inProgressChallenges": Array<number>;
+        /**
+          * Is joining to challenge
+         */
+        "isJoiningToChallenge": boolean;
         /**
           * Language of the widget
          */
@@ -59,6 +67,14 @@ declare namespace LocalJSX {
           * User's device type
          */
         "device"?: "Mobile" | "Tablet" | "Desktop";
+        /**
+          * Active challenges
+         */
+        "inProgressChallenges"?: Array<number>;
+        /**
+          * Is joining to challenge
+         */
+        "isJoiningToChallenge"?: boolean;
         /**
           * Language of the widget
          */

package/dist/types/models/challenge.d.ts

@@ -37,6 +37,7 @@ export interface LevelProgress {
   Rewards: Array<Reward>;
   TargetBetCount: number;
   TargetTurnover: number;
+  DisplayCurrencyTargetTurnover: number;
   CustomRewardMessage: string;
 }
 export declare enum ChallengeProgressStatus {
@@ -55,4 +56,5 @@ export interface Challenge {
   Id: number;
   LevelProgresses: Array<LevelProgress>;
   Status: ChallengeProgressStatus;
+  IsNew: boolean;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@everymatrix/casino-engagement-suite-challenges-list",
-  "version": "1.36.0",
+  "version": "1.36.1",
   "main": "./dist/index.cjs.js",
   "module": "./dist/index.js",
   "es2015": "./dist/esm/index.mjs",

package/dist/casino-engagement-suite-challenges-list/p-a9f41c83.entry.js

@@ -1 +0,0 @@
-import{r as e,c as t,h as s,g as o}from"./p-fad4589e.js";var n,i;!function(e){e[e.Closed=0]="Closed",e[e.InProgress=1]="InProgress",e[e.Fillup=2]="Fillup",e[e.Completed=3]="Completed"}(n||(n={})),function(e){e[e.Started=0]="Started",e[e.InProgress=1]="InProgress",e[e.PendingLevelReward=2]="PendingLevelReward",e[e.Completed=3]="Completed",e[e.Expired=4]="Expired"}(i||(i={}));const a=["en"],l={en:{challenges:"Challenges",join:"Join",unjoin:"Unjoin",noChallenges:"No Challenges yet",tryOtherGames:"Try winning Challenges as rewards or launching other booster games",tooltip:"Competition where your real money bets contribute towards the level progress to achieve the level reward"}},r=(e,t)=>{const s=t;return l[void 0!==s&&a.includes(s)?s:"en"][e]};function h(e){return(h="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function p(e,t){if(t.length<e)throw new TypeError(e+" argument"+(e>1?"s":"")+" required, but only "+t.length+" present")}function g(e){p(1,arguments);var t=Object.prototype.toString.call(e);return e instanceof Date||"object"===h(e)&&"[object Date]"===t?new Date(e.getTime()):"number"==typeof e||"[object Number]"===t?new Date(e):("string"!=typeof e&&"[object String]"!==t||"undefined"==typeof 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"),console.warn((new Error).stack)),new Date(NaN))}function d(e,t){return p(2,arguments),g(e).getTime()-g(t).getTime()}var c={ceil:Math.ceil,round:Math.round,floor:Math.floor,trunc:function(e){return e<0?Math.ceil(e):Math.floor(e)}};function u(e){return e?c[e]:c.trunc}const C=class{constructor(s){e(this,s),this.close=t(this,"close",7),this.clientStyling="",this.clientStylingUrl="",this.language="en",this.device="Mobile",this.challenges=[],this.tooltip=!1,this.timers={},this.limitStylingAppends=!1,this.setClientStyling=()=>{let e=document.createElement("style");e.innerHTML=this.clientStyling,this.host.prepend(e)},this.setClientStylingURL=()=>{let e=new URL(this.clientStylingUrl),t=document.createElement("style");fetch(e.href).then((e=>e.text())).then((e=>{t.innerHTML=e,setTimeout((()=>{this.host.prepend(t)}),1)})).catch((e=>{console.log("Error ",e)}))},this.handleCloseClick=()=>{this.close.emit(),this.tooltip=!1},this.handleChallengeClick=e=>{const t=+e.currentTarget.getAttribute("data-id");window.postMessage({type:"ChallengeClick",id:t})},this.showTooltip=()=>{this.tooltip=!0},this.hideTooltip=()=>{this.tooltip=!1},this.changeChallengeStatus=e=>{e.stopPropagation();const t=+e.currentTarget.getAttribute("data-id"),s=this.challenges.filter((e=>e.Status===i.InProgress)).map((e=>e.Id));s.includes(t)?window.postMessage({type:"ShowConfirmationModal",action:"unjoin",id:t}):(null==s?void 0:s.length)>0?window.postMessage({type:"ShowConfirmationModal",action:"join",prevId:s[0],id:t}):window.postMessage({type:"ChallengeAttendance",confirmationData:{action:"join",id:t}})}}challengesPropHandler(e){!this.interval&&e.length&&(this.updateTimers(),this.startCountdown()),this.interval&&!e.length&&clearInterval(this.interval)}handleEvent(e){const t=e.data.data;if("ChallengeGrant"===e.data.type){const e=this.challenges.findIndex((e=>function(e,t,s){p(2,arguments);var o=d(e,t)/1e3;return u(null==s?void 0:s.roundingMethod)(o)}(new Date(e.ExpirationTime),new Date(t.ExpirationTime))>0));e>-1?this.challenges.splice(e,0,t):this.challenges.unshift(t)}}componentWillLoad(){this.challengesPropHandler(this.challenges)}componentDidRender(){!this.limitStylingAppends&&this.host&&(this.clientStyling&&this.setClientStyling(),this.clientStylingUrl&&this.setClientStylingURL(),this.limitStylingAppends=!0)}disconnectedCallback(){this.interval&&clearInterval(this.interval)}startCountdown(){this.interval=setInterval((()=>{this.updateTimers()}),1e3)}updateTimers(){const e=(new Date).getTime();this.timers=this.challenges.filter((e=>e.Status!==i.Expired)).reduce(((t,s)=>{const o=new Date(s.ExpirationTime).getTime()-e;let n="00h:00m:00s";if(o<1)this.removeChallenge(s.Id);else{const{days:e,hours:t,minutes:s,seconds:i}={days:String(Math.floor(o/864e5)).padStart(2,"0"),hours:String(Math.floor(o%864e5/36e5)).padStart(2,"0"),minutes:String(Math.floor(o%36e5/6e4)).padStart(2,"0"),seconds:String(Math.floor(o%6e4/1e3)).padStart(2,"0")};n="00"===e?`${t}h:${s}m:${i}s`:`${e}d:${t}h:${s}m`}return Object.assign(Object.assign({},t),{[s.Id]:n})}),{})}removeChallenge(e){const t=this.challenges.findIndex((t=>t.Id===e));t>-1&&(this.challenges.splice(t,1),window.postMessage({type:"ChallengeHasExpired",id:e}))}getChallengeClasses(e){return{ChallengeCard:!0,InProgress:e.Status===i.InProgress,Completed:this.isChallengeCompleted(e),Paused:this.isChallengePaused(e)}}isChallengePaused(e){return e.Status===i.Started&&e.LevelProgresses[0].ProgressPercentage>0}isChallengeCompleted(e){return e.Status===i.Completed||e.Status===i.PendingLevelReward&&e.LevelProgresses.every((e=>100===e.ProgressPercentage))}getChallengeProgress(e){if(e.Status===i.Completed)return 100;if(this.isChallengePaused(e)||e.Status===i.PendingLevelReward||e.Status===i.InProgress){const t=e.LevelProgresses.find((e=>e.ProgressStatus===n.InProgress));return t?t.ProgressPercentage:0}return-1}getChallengeHeaderTemplate(e){const{Id:t}=e;return s("div",{class:"ChallengeCardHeader"},s("div",{class:"ChallengeName"},e.ChallengePresentation.PresentationName),s("button",{class:e.Status===i.InProgress?"ChallengeJoinButton Joined":"ChallengeJoinButton",onClick:this.changeChallengeStatus,"data-id":t},r(e.Status===i.InProgress?"unjoin":"join",this.language)))}getChallengeTemplate(e){const t=this.getChallengeProgress(e),o=this.timers[e.Id],n=t>-1?s("casino-engagement-suite-progress-bar",{class:this.device,value:t,disabled:this.isChallengePaused(e)},s("span",{slot:"Title",class:"ChallengeCountdown"},o)):s("span",{class:"ChallengeCountdown"},o);return s("div",{class:this.getChallengeClasses(e),onClick:this.handleChallengeClick,key:e.Id,"data-id":e.Id},this.getChallengeHeaderTemplate(e),n)}getHeaderTemplate(){return s("header",{class:"ChallengesListPopupHeader"},s("button",{onClick:this.showTooltip,class:"ChallengesIconButton"},s("img",{src:"https://static.everymatrix.com/gic/img/engagement-suite/help.svg",alt:"Show tooltip"})),s("div",{class:"ChallengesListPopupHeaderName"},r("challenges",this.language)),s("button",{class:"ChallengesIconButton",onClick:this.handleCloseClick},s("img",{src:"https://static.everymatrix.com/gic/img/engagement-suite/close.svg",alt:"Close challenges list"})))}getListTemplate(){return this.challenges.length?s("div",{class:"ChallengesListWrapper"},s("div",{class:"ChallengesList"},this.challenges.map((e=>this.getChallengeTemplate(e))))):s("div",{class:"ChallengesListEmpty"},s("h2",null,r("noChallenges",this.language)),s("p",null,r("tryOtherGames",this.language)))}getTooltipTemplate(){return this.tooltip?s("div",{class:"ChallengesTooltipBackdrop"},s("div",{class:"ChallengesTooltip"},s("button",{class:"ChallengesIconButton",onClick:this.hideTooltip},s("img",{src:"https://static.everymatrix.com/gic/img/engagement-suite/close.svg",alt:"Close tooltip"})),r("tooltip",this.language))):""}render(){return s("div",{class:`ChallengesListPopup ${this.device}`},this.getHeaderTemplate(),this.getListTemplate(),this.getTooltipTemplate())}get host(){return o(this)}static get watchers(){return{challenges:["challengesPropHandler"]}}};C.style='@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}.ChallengesListEmpty{padding:20px 32px}.ChallengesListEmpty h2{margin:0 0 16px 0;text-align:center;font-weight:600;font-size:20px;line-height:24px;font-family:"Montserrat", sans-serif;color:var(--emw--color-typography, #FFFFFF)}.ChallengesListEmpty p{font-size:14px;line-height:17px;color:var(--emw--color-gray-100, #BBB9C3)}.ChallengeCountdown{color:var(--emw--color-gray-100, #BBB9C3);font-size:12px;line-height:12px}.ChallengesTooltipBackdrop{padding:48px 30px 0;position:absolute;width:100%;height:100%;inset:0;background-color:rgba(0, 0, 0, 0.5)}.ChallengesTooltipBackdrop .ChallengesTooltip{border:1px solid var(--emw--button-border-color, #403956);background-color:var(--emw--color-background, #1E1638);border-radius:8px;padding:32px;font-size:14px;line-height:17px;color:var(--emw--color-gray-100, #BBB9C3);position:relative}.ChallengesTooltipBackdrop .ChallengesTooltip .ChallengesIconButton{top:12px;right:6px;position:absolute}.ChallengesListPopup.Tablet .ChallengesListPopupHeader,.ChallengesListPopup.Desktop .ChallengesListPopupHeader{padding-top:16px}.ChallengesListPopup.Tablet .ChallengesListPopupHeaderName,.ChallengesListPopup.Desktop .ChallengesListPopupHeaderName{font-size:16px;line-height:16px}.ChallengesListPopup.Tablet .ChallengesIconButton,.ChallengesListPopup.Desktop .ChallengesIconButton{width:24px;height:24px}.ChallengesListPopup.Tablet .ChallengesList,.ChallengesListPopup.Desktop .ChallengesList{padding:20px 24px 0;row-gap:20px}.ChallengesListPopup.Tablet .ChallengeCardHeader,.ChallengesListPopup.Desktop .ChallengeCardHeader{margin-bottom:16px}.ChallengesListPopup.Tablet .ChallengeName,.ChallengesListPopup.Desktop .ChallengeName{line-height:27px;font-size:22px}.ChallengesListPopup.Tablet .ChallengeJoinButton,.ChallengesListPopup.Desktop .ChallengeJoinButton{min-width:100px;height:36px;font-size:16px}.ChallengesListPopup.Tablet .ChallengeCountdown,.ChallengesListPopup.Desktop .ChallengeCountdown{font-size:14px;line-height:14px}.ChallengesListPopup.Tablet .ChallengesTooltip,.ChallengesListPopup.Desktop .ChallengesTooltip{padding:60px 65px;font-size:16px;line-height:20px}.ChallengesListPopup.Tablet .ChallengesTooltip .ChallengesIconButton,.ChallengesListPopup.Desktop .ChallengesTooltip .ChallengesIconButton{top:24px;right:24px}';const m=class{constructor(t){e(this,t),this.value=0,this.disabled=!1,this.clientStyling="",this.clientStylingUrl="",this.limitStylingAppends=!1,this.setClientStyling=()=>{let e=document.createElement("style");e.innerHTML=this.clientStyling,this.host.prepend(e)},this.setClientStylingURL=()=>{let e=new URL(this.clientStylingUrl),t=document.createElement("style");fetch(e.href).then((e=>e.text())).then((e=>{t.innerHTML=e,setTimeout((()=>{this.host.prepend(t)}),1)})).catch((e=>{console.log("Error ",e)}))}}componentDidRender(){!this.limitStylingAppends&&this.host&&(this.clientStyling&&this.setClientStyling(),this.clientStylingUrl&&this.setClientStylingURL(),this.limitStylingAppends=!0)}getProgressBarClasses(){return{ProgressBar:!0,Completed:100===this.value,Disabled:this.disabled}}render(){return s("div",{class:this.getProgressBarClasses(),part:"ProgressBar"},s("div",{class:"ProgressBarInfo",part:"ProgressBarInfo"},s("slot",{name:"Title"},s("div",null)),s("slot",{name:"Percent"},s("div",{class:"ProgressBarPercent",part:"ProgressBarPercent"},this.value,"%"))),s("div",{class:"ProgressBarBackground",part:"ProgressBarBackground"},s("div",{class:"ProgressBarLine",part:"ProgressBarLine",style:{width:this.value+"%"}})))}get host(){return o(this)}};m.style=":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}.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)}";export{C as casino_engagement_suite_challenges_list,m as casino_engagement_suite_progress_bar}