@everymatrix/casino-engagement-suite-challenges-details 1.36.0 → 1.37.0

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

@@ -1 +1 @@
-import{p as e,b as l}from"./p-8db66ba7.js";(()=>{const l=import.meta.url,i={};return""!==l&&(i.resourcesUrl=new URL(".",l).href),e(i)})().then((e=>l([["p-9159f1ae",[[1,"casino-engagement-suite-challenges-details",{clientStyling:[513,"client-styling"],clientStylingUrl:[513,"client-styling-url"],challenge:[16],language:[1],gameSlug:[1,"game-slug"],device:[1],limitStylingAppends:[32],timer:[32],showDetails:[32],isExpiredChallenge:[32]}],[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 i}from"./p-808a7dc5.js";(()=>{const i=import.meta.url,l={};return""!==i&&(l.resourcesUrl=new URL(".",i).href),e(l)})().then((e=>i([["p-b3146c91",[[1,"casino-engagement-suite-challenges-details",{clientStyling:[513,"client-styling"],clientStylingUrl:[513,"client-styling-url"],challenge:[16],inProgressChallenges:[16],language:[1],gameSlug:[1,"game-slug"],device:[1],isJoiningToChallenge:[1028,"is-joining-to-challenge"],limitStylingAppends:[32],timer:[32],showDetails:[32],isExpiredChallenge:[32]}],[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-details/p-808a7dc5.js

@@ -0,0 +1 @@
+let e,t,n=!1;const l="undefined"!=typeof window?window:{},s=l.document||{head:{}},o={t:0,l:"",jmp:e=>e(),raf:e=>requestAnimationFrame(e),ael:(e,t,n,l)=>e.addEventListener(t,n,l),rel:(e,t,n,l)=>e.removeEventListener(t,n,l),ce:(e,t)=>new CustomEvent(e,t)},i=e=>Promise.resolve(e),c=(()=>{try{return new CSSStyleSheet,"function"==typeof(new CSSStyleSheet).replace}catch(e){}return!1})(),r=new WeakMap,a=e=>"sc-"+e.o,u={},f=e=>"object"==(e=typeof e)||"function"===e,d=(e,t,...n)=>{let l=null,s=null,o=!1,i=!1,c=[];const r=t=>{for(let n=0;n<t.length;n++)l=t[n],Array.isArray(l)?r(l):null!=l&&"boolean"!=typeof l&&((o="function"!=typeof e&&!f(l))&&(l+=""),o&&i?c[c.length-1].i+=l:c.push(o?$(null,l):l),i=o)};if(r(n),t){t.key&&(s=t.key);{const e=t.className||t.class;e&&(t.class="object"!=typeof e?e:Object.keys(e).filter((t=>e[t])).join(" "))}}const a=$(e,null);return a.u=t,c.length>0&&(a.$=c),a.h=s,a},$=(e,t)=>({t:0,m:e,i:t,p:null,$:null,u:null,h:null}),h={},y=(e,t,n,s,i,c)=>{if(n!==s){let r=_(e,t),a=t.toLowerCase();if("class"===t){const t=e.classList,l=p(n),o=p(s);t.remove(...l.filter((e=>e&&!o.includes(e)))),t.add(...o.filter((e=>e&&!l.includes(e))))}else if("style"===t){for(const t in n)s&&null!=s[t]||(t.includes("-")?e.style.removeProperty(t):e.style[t]="");for(const t in s)n&&s[t]===n[t]||(t.includes("-")?e.style.setProperty(t,s[t]):e.style[t]=s[t])}else if("key"===t);else if(r||"o"!==t[0]||"n"!==t[1]){const l=f(s);if((r||l&&null!==s)&&!i)try{if(e.tagName.includes("-"))e[t]=s;else{let l=null==s?"":s;"list"===t?r=!1:null!=n&&e[t]==l||(e[t]=l)}}catch(e){}null==s||!1===s?!1===s&&""!==e.getAttribute(t)||e.removeAttribute(t):(!r||4&c||i)&&!l&&e.setAttribute(t,s=!0===s?"":s)}else t="-"===t[2]?t.slice(3):_(l,a)?a.slice(2):a[2]+t.slice(3),n&&o.rel(e,t,n,!1),s&&o.ael(e,t,s,!1)}},m=/\s/,p=e=>e?e.split(m):[],b=(e,t,n,l)=>{const s=11===t.p.nodeType&&t.p.host?t.p.host:t.p,o=e&&e.u||u,i=t.u||u;for(l in o)l in i||y(s,l,o[l],void 0,n,t.t);for(l in i)y(s,l,o[l],i[l],n,t.t)},w=(t,n,l)=>{let o,i,c=n.$[l],r=0;if(null!==c.i)o=c.p=s.createTextNode(c.i);else if(o=c.p=s.createElement(c.m),b(null,c,!1),null!=e&&o["s-si"]!==e&&o.classList.add(o["s-si"]=e),c.$)for(r=0;r<c.$.length;++r)i=w(t,c,r),i&&o.appendChild(i);return o},g=(e,n,l,s,o,i)=>{let c,r=e;for(r.shadowRoot&&r.tagName===t&&(r=r.shadowRoot);o<=i;++o)s[o]&&(c=w(null,l,o),c&&(s[o].p=c,r.insertBefore(c,n)))},S=(e,t,n,l)=>{for(;t<=n;++t)(l=e[t])&&l.p.remove()},k=(e,t)=>e.m===t.m&&e.h===t.h,j=(e,t)=>{const n=t.p=e.p,l=e.$,s=t.$,o=t.i;null===o?("slot"===t.m||b(e,t,!1),null!==l&&null!==s?((e,t,n,l)=>{let s,o,i=0,c=0,r=0,a=0,u=t.length-1,f=t[0],d=t[u],$=l.length-1,h=l[0],y=l[$];for(;i<=u&&c<=$;)if(null==f)f=t[++i];else if(null==d)d=t[--u];else if(null==h)h=l[++c];else if(null==y)y=l[--$];else if(k(f,h))j(f,h),f=t[++i],h=l[++c];else if(k(d,y))j(d,y),d=t[--u],y=l[--$];else if(k(f,y))j(f,y),e.insertBefore(f.p,d.p.nextSibling),f=t[++i],y=l[--$];else if(k(d,h))j(d,h),e.insertBefore(d.p,f.p),d=t[--u],h=l[++c];else{for(r=-1,a=i;a<=u;++a)if(t[a]&&null!==t[a].h&&t[a].h===h.h){r=a;break}r>=0?(o=t[r],o.m!==h.m?s=w(t&&t[c],n,r):(j(o,h),t[r]=void 0,s=o.p),h=l[++c]):(s=w(t&&t[c],n,c),h=l[++c]),s&&f.p.parentNode.insertBefore(s,f.p)}i>u?g(e,null==l[$+1]?null:l[$+1].p,n,l,c,$):c>$&&S(t,i,u)})(n,l,t,s):null!==s?(null!==e.i&&(n.textContent=""),g(n,null,t,s,0,s.length-1)):null!==l&&S(l,0,l.length-1)):e.i!==o&&(n.data=o)},v=e=>D(e).g,M=(e,t,n)=>{const l=v(e);return{emit:e=>C(l,t,{bubbles:!!(4&n),composed:!!(2&n),cancelable:!!(1&n),detail:e})}},C=(e,t,n)=>{const l=o.ce(t,n);return e.dispatchEvent(l),l},O=(e,t)=>{t&&!e.S&&t["s-p"]&&t["s-p"].push(new Promise((t=>e.S=t)))},P=(e,t)=>{if(e.t|=16,!(4&e.t))return O(e,e.k),ee((()=>x(e,t)));e.t|=512},x=(e,t)=>{const n=e.j;let l;return t&&(l=T(n,"componentWillLoad")),W(l,(()=>E(e,n,t)))},E=async(e,t,n)=>{const l=e.g,o=l["s-rc"];n&&(e=>{const t=e.v,n=e.g,l=t.t,o=((e,t)=>{let n=a(t),l=I.get(n);if(e=11===e.nodeType?e:s,l)if("string"==typeof l){let t,o=r.get(e=e.head||e);o||r.set(e,o=new Set),o.has(n)||(t=s.createElement("style"),t.innerHTML=l,e.insertBefore(t,e.querySelector("link")),o&&o.add(n))}else e.adoptedStyleSheets.includes(l)||(e.adoptedStyleSheets=[...e.adoptedStyleSheets,l]);return n})(n.shadowRoot?n.shadowRoot:n.getRootNode(),t);10&l&&(n["s-sc"]=o,n.classList.add(o+"-h"))})(e);L(e,t),o&&(o.map((e=>e())),l["s-rc"]=void 0);{const t=l["s-p"],n=()=>N(e);0===t.length?n():(Promise.all(t).then(n),e.t|=4,t.length=0)}},L=(n,l)=>{try{l=l.render(),n.t&=-17,n.t|=2,((n,l)=>{const s=n.g,o=n.v,i=n.M||$(null,null),c=(e=>e&&e.m===h)(l)?l:d(null,null,l);t=s.tagName,o.C&&(c.u=c.u||{},o.C.map((([e,t])=>c.u[t]=s[e]))),c.m=null,c.t|=4,n.M=c,c.p=i.p=s.shadowRoot||s,e=s["s-sc"],j(i,c)})(n,l)}catch(e){z(e,n.g)}return null},N=e=>{const t=e.g,n=e.k;T(e.j,"componentDidRender"),64&e.t||(e.t|=64,A(t),e.O(t),n||R()),e.S&&(e.S(),e.S=void 0),512&e.t&&Z((()=>P(e,!1))),e.t&=-517},R=()=>{A(s.documentElement),Z((()=>C(l,"appload",{detail:{namespace:"casino-engagement-suite-challenges-details"}})))},T=(e,t,n)=>{if(e&&e[t])try{return e[t](n)}catch(e){z(e)}},W=(e,t)=>e&&e.then?e.then(t):t(),A=e=>e.classList.add("hydrated"),F=(e,t,n)=>{if(t.P){e.watchers&&(t.L=e.watchers);const l=Object.entries(t.P),s=e.prototype;if(l.map((([e,[l]])=>{(31&l||2&n&&32&l)&&Object.defineProperty(s,e,{get(){return((e,t)=>D(this).N.get(t))(0,e)},set(n){((e,t,n,l)=>{const s=D(e),o=s.g,i=s.N.get(t),c=s.t,r=s.j;if(n=((e,t)=>null==e||f(e)?e:4&t?"false"!==e&&(""===e||!!e):2&t?parseFloat(e):1&t?e+"":e)(n,l.P[t][0]),(!(8&c)||void 0===i)&&n!==i&&(!Number.isNaN(i)||!Number.isNaN(n))&&(s.N.set(t,n),r)){if(l.L&&128&c){const e=l.L[t];e&&e.map((e=>{try{r[e](n,i,t)}catch(e){z(e,o)}}))}2==(18&c)&&P(s,!1)}})(this,e,n,t)},configurable:!0,enumerable:!0})})),1&n){const n=new Map;s.attributeChangedCallback=function(e,t,l){o.jmp((()=>{const t=n.get(e);if(this.hasOwnProperty(t))l=this[t],delete this[t];else if(s.hasOwnProperty(t)&&"number"==typeof this[t]&&this[t]==l)return;this[t]=(null!==l||"boolean"!=typeof this[t])&&l}))},e.observedAttributes=l.filter((([e,t])=>15&t[0])).map((([e,l])=>{const s=l[1]||e;return n.set(s,e),512&l[0]&&t.C.push([e,s]),s}))}}return e},U=(e,t={})=>{const n=[],i=t.exclude||[],r=l.customElements,u=s.head,f=u.querySelector("meta[charset]"),d=s.createElement("style"),$=[];let h,y=!0;Object.assign(o,t),o.l=new URL(t.resourcesUrl||"./",s.baseURI).href,e.map((e=>{e[1].map((t=>{const l={t:t[0],o:t[1],P:t[2],R:t[3]};l.P=t[2],l.C=[],l.L={};const s=l.o,u=class extends HTMLElement{constructor(e){super(e),V(e=this,l),1&l.t&&e.attachShadow({mode:"open"})}connectedCallback(){h&&(clearTimeout(h),h=null),y?$.push(this):o.jmp((()=>(e=>{if(0==(1&o.t)){const t=D(e),n=t.v,l=()=>{};if(!(1&t.t)){t.t|=1;{let n=e;for(;n=n.parentNode||n.host;)if(n["s-p"]){O(t,t.k=n);break}}n.P&&Object.entries(n.P).map((([t,[n]])=>{if(31&n&&e.hasOwnProperty(t)){const n=e[t];delete e[t],e[t]=n}})),(async(e,t,n,l,s)=>{if(0==(32&t.t)){{if(t.t|=32,(s=G(n)).then){const e=()=>{};s=await s,e()}s.isProxied||(n.L=s.watchers,F(s,n,2),s.isProxied=!0);const e=()=>{};t.t|=8;try{new s(t)}catch(e){z(e)}t.t&=-9,t.t|=128,e()}if(s.style){let e=s.style;const t=a(n);if(!I.has(t)){const l=()=>{};((e,t,n)=>{let l=I.get(e);c&&n?(l=l||new CSSStyleSheet,l.replace(t)):l=t,I.set(e,l)})(t,e,!!(1&n.t)),l()}}}const o=t.k,i=()=>P(t,!0);o&&o["s-rc"]?o["s-rc"].push(i):i()})(0,t,n)}l()}})(this)))}disconnectedCallback(){o.jmp((()=>(()=>{0==(1&o.t)&&T(D(this).j,"disconnectedCallback")})()))}componentOnReady(){return D(this).T}};l.W=e[0],i.includes(s)||r.get(s)||(n.push(s),r.define(s,F(u,l,1)))}))})),d.innerHTML=n+"{visibility:hidden}.hydrated{visibility:inherit}",d.setAttribute("data-styles",""),u.insertBefore(d,f?f.nextSibling:u.firstChild),y=!1,$.length?$.map((e=>e.connectedCallback())):o.jmp((()=>h=setTimeout(R,30)))},q=new WeakMap,D=e=>q.get(e),H=(e,t)=>q.set(t.j=e,t),V=(e,t)=>{const n={t:0,g:e,v:t,N:new Map};return n.T=new Promise((e=>n.O=e)),e["s-p"]=[],e["s-rc"]=[],q.set(e,n)},_=(e,t)=>t in e,z=(e,t)=>(0,console.error)(e,t),B=new Map,G=e=>{const t=e.o.replace(/-/g,"_"),n=e.W,l=B.get(n);return l?l[t]:import(`./${n}.entry.js`).then((e=>(B.set(n,e),e[t])),z)},I=new Map,J=[],K=[],Q=(e,t)=>l=>{e.push(l),n||(n=!0,t&&4&o.t?Z(Y):o.raf(Y))},X=e=>{for(let t=0;t<e.length;t++)try{e[t](performance.now())}catch(e){z(e)}e.length=0},Y=()=>{X(J),X(K),(n=J.length>0)&&o.raf(Y)},Z=e=>i().then(e),ee=Q(K,!0);export{U as b,M as c,v as g,d as h,i as p,H as r}

package/dist/casino-engagement-suite-challenges-details/p-b3146c91.entry.js

@@ -0,0 +1 @@
+import{r as e,c as t,h as l,g as s}from"./p-808a7dc5.js";const a=["en"],i={en:{challenges:"Challenges",join:"Join",unjoin:"Unjoin",details:"Challenge Details",tc:"Terms & Conditions",level:"Level",place:"Place",bet:"bet",bets:"bets",win:"Win"}},n=(e,t)=>{const l=t;return i[void 0!==l&&a.includes(l)?l:"en"][e]};var o,r;!function(e){e[e.Closed=0]="Closed",e[e.InProgress=1]="InProgress",e[e.Fillup=2]="Fillup",e[e.Completed=3]="Completed"}(o||(o={})),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"}(r||(r={}));const h=class{constructor(l){e(this,l),this.close=t(this,"close",7),this.back=t(this,"back",7),this.clientStyling="",this.clientStylingUrl="",this.language="en",this.gameSlug="",this.device="Mobile",this.limitStylingAppends=!1,this.timer="",this.showDetails=!1,this.isExpiredChallenge=!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.handleBackClick=()=>{this.back.emit()},this.onGameClick=e=>{const t=e.currentTarget.getAttribute("data-slug");window.postMessage({type:"EngagementSuiteGameRedirect",Slug:t})},this.changeChallengeStatus=e=>{var t,l;const s=+e.currentTarget.getAttribute("data-id");(null===(t=this.inProgressChallenges)||void 0===t?void 0:t.includes(s))?window.postMessage({type:"ShowConfirmationModal",ProgressToDeactivate:s}):(null===(l=this.inProgressChallenges)||void 0===l?void 0:l.length)>0?window.postMessage({type:"ShowConfirmationModal",ProgressToActivate:s,ProgressToDeactivate:this.inProgressChallenges[0]}):window.postMessage({type:"ChallengeJoinRequest",data:{ProgressToActivate:s}})},this.toggle=()=>{this.showDetails=!this.showDetails}}challengePropHandler(e){!this.interval&&e&&(this.updateTimer(),this.startCountdown()),this.interval&&!e&&clearInterval(this.interval)}componentWillLoad(){this.challengePropHandler(this.challenge)}componentDidRender(){!this.limitStylingAppends&&this.host&&(this.clientStyling&&this.setClientStyling(),this.clientStylingUrl&&this.setClientStylingURL(),this.limitStylingAppends=!0)}disconnectedCallback(){this.interval&&clearInterval(this.interval)}getActionsTemplate(){return l("header",{class:"ChallengeActions"},l("button",{class:"ChallengeIconButton",onClick:this.handleBackClick},l("img",{src:"https://static.everymatrix.com/gic/img/engagement-suite/back.svg",alt:"back"})),"Mobile"!==this.device&&l("div",{class:"ChallengePopupName"},n("challenges",this.language)),l("button",{class:"ChallengeIconButton",onClick:this.handleCloseClick},l("img",{src:"https://static.everymatrix.com/gic/img/engagement-suite/close.svg",alt:"close"})))}getChallengeHeader(){const e=this.challenge.Status===r.InProgress;return l("div",{class:"ChallengeDetailsHeader"},l("span",{class:"ChallengeName"},this.challenge.ChallengePresentation.PresentationName),l("button",{onClick:this.changeChallengeStatus,class:`ChallengeJoinButton ${e?"Joined":""}\n            ${this.isExpiredChallenge||this.isJoiningToChallenge?"Disabled":""}`,"data-id":this.challenge.Id},n(e?"unjoin":"join",this.language)))}getChallengeCountdown(){return l("div",{class:"ChallengeCountdown "+(this.isExpiredChallenge?"Expired":"")},this.isExpiredChallenge?"Expired":this.timer)}getChallengeDetails(){const e=this.challenge.ChallengePresentation.Description,t=this.challenge.ChallengePresentation.Url,s=this.challenge.Games;return l("div",{class:"CollapseDetails "+(this.showDetails?"ShowDetails":"")},e&&l("span",{class:"ChallengeDescription"},e),t&&l("div",{class:"TC"},l("a",{href:t,target:"_blank"},n("tc",this.language))),(null==s?void 0:s.length)&&l("div",{class:"ChallengeGames"},s.map((e=>l("div",{class:"Game",key:e.CasinoGameId},l("img",{src:e.GameIcon,alt:e.GameName,onClick:this.onGameClick,class:e.GameSlug===this.gameSlug?"Disabled":"","data-slug":e.GameSlug}))))))}startCountdown(){this.interval=setInterval((()=>{this.updateTimer()}),1e3)}updateTimer(){const e=new Date(this.challenge.ExpirationTime).getTime()-(new Date).getTime();if(e<1)return clearInterval(this.interval),this.timer="",void(this.isExpiredChallenge=!0);const{days:t,hours:l,minutes:s,seconds:a}={days:String(Math.floor(e/864e5)).padStart(2,"0"),hours:String(Math.floor(e%864e5/36e5)).padStart(2,"0"),minutes:String(Math.floor(e%36e5/6e4)).padStart(2,"0"),seconds:String(Math.floor(e%6e4/1e3)).padStart(2,"0")};this.timer="00"===t?`${l}h:${s}m:${a}s`:`${t}d:${l}h:${s}m`}getLevelTarget(e){let t=`${n("place",this.language)} ${e.DisplayCurrencyTargetTurnover}`;return 1===e.LevelTargetType?t+=` ${n("bet",this.language)}`:2===e.LevelTargetType&&(t+=` ${n("bets",this.language)} X ${e.TargetBetCount}`),l("span",{class:"ChallengeLevelTarget"},t)}getChallengeLevels(){const e=this.challenge.Status===r.Started&&this.challenge.LevelProgresses[0].ProgressPercentage>0,t=t=>"ChallengeLevelCard "+(1!==t.ProgressStatus||this.isExpiredChallenge||e?"":"InProgress");return l("div",{class:"ChallengeLevels"},this.challenge.LevelProgresses.map(((s,a)=>l("div",{class:t(s)},l("casino-engagement-suite-progress-bar",{class:this.device,value:s.ProgressPercentage,"hide-percent":0===s.ProgressPercentage||100===s.ProgressPercentage,disabled:this.isExpiredChallenge||e},l("span",{slot:"Title",class:"ChallengeLevelTitle"},l("span",null,"Level ",a+1,": "),this.getLevelTarget(s))),l("div",{class:"ChallengeRewardMessage"},l("img",{src:"https://static.everymatrix.com/gic/img/engagement-suite/reward.svg",alt:"win"}),l("span",null,n("win",this.language),": "),l("span",{class:"CustomRewardMessage"},s.CustomRewardMessage))))))}getToggleButton(){return l("div",{class:"ChallengeCollapseButton",onClick:this.toggle},l("span",{class:"Toggle "+(this.showDetails?"Closed":"Open")}),l("span",null,n("details",this.language)))}render(){return l("div",{class:`ChallengeDetailsPopup ${this.device}`},this.getActionsTemplate(),l("div",{class:"ChallengeDetails"},this.getChallengeHeader(),this.getChallengeCountdown(),this.getToggleButton(),this.getChallengeDetails(),this.getChallengeLevels()))}get host(){return s(this)}static get watchers(){return{challenge:["challengePropHandler"]}}};h.style='@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700;900&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}.ChallengeDetailsPopup{display:flex;height:100%;background-color:var(--emw--color-background, #1E1638);border-radius:8px;overflow:hidden;flex-direction:column;position:relative}.ChallengeActions{display:flex;justify-content:space-between;align-items:center;padding:12px 8px 8px}.ChallengeActions .ChallengeIconButton{width:16px;height:16px;cursor:pointer}.ChallengeActions .ChallengePopupName{color:var(--emw--color-gray-100, #BBB9C3);font-size:16px;font-weight:500;line-height:16px}.ChallengeDetails{padding:0px 19px 10px;overflow-y:auto;-ms-overflow-style:none;scrollbar-width:none}.ChallengeDetails::-webkit-scrollbar{display:none}.ChallengeDetailsHeader{display:flex;justify-content:space-between;gap:12px}.ChallengeDetailsHeader .ChallengeName{font-family:"Montserrat", sans-serif;font-size:var(--emw--font-size-medium, 18px);font-weight:var(--emw--font-weight-bold, 700);line-height:22px;color:var(--emfe-w-color-white, #FFF);word-break:break-all}.ChallengeJoinButton.Joined::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}.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}.ChallengeCountdown{font-weight:var(--emw--font-weight-normal, 400);font-size:var(--emw--font-size-x-small, 12px);line-height:12px;margin:12px 0 24px;color:var(--emw--color-gray-150, #BBB9C3)}.ChallengeCountdown.Expired{font-weight:var(--emw--font-weight-normal, 700);color:var(--emfe-w-color-white, #FFF)}.ChallengeCollapseButton{margin-bottom:14px;display:flex;flex-direction:row;align-items:center;font-size:var(--emw--font-size-x-small, 12px);line-height:12px;color:var(--emw--color-primary-variant, #666178);cursor:pointer}.ChallengeCollapseButton .Toggle{width:16px;height:16px;display:block;margin-right:4px}.ChallengeCollapseButton .Closed{background:url("https://static.everymatrix.com/gic/img/engagement-suite/eye-closed.svg") no-repeat center/contain}.ChallengeCollapseButton .Open{background:url("https://static.everymatrix.com/gic/img/engagement-suite/eye-open.svg") no-repeat center/contain}.CollapseDetails{display:none;font-size:var(--emw--font-size-small, 14px);line-height:17px;font-weight:var(--emw--font-weight-normal, 400)}.CollapseDetails .ChallengeDescription{color:var(--emfe-w-color-white, #FFF);margin-bottom:12px}.CollapseDetails .TC{margin:12px 0 16px}.CollapseDetails .TC a{color:var(--emw--color-secondary, #59D1FF);text-underline-offset:3px}.CollapseDetails .ChallengeGames{width:100%;overflow-y:auto;display:flex;gap:4px}.CollapseDetails .ChallengeGames::-webkit-scrollbar{height:2px;background:none}.CollapseDetails .ChallengeGames::-webkit-scrollbar-thumb{border-radius:4px;background-color:var(--emw--color-background, #666178)}.CollapseDetails .ChallengeGames .Game img{width:96px;height:50px;border-radius:2px;cursor:pointer}.ShowDetails{display:block}.ChallengeLevels{display:flex;flex-direction:column;gap:16px;margin-top:24px;color:var(--emw--color-primary, #8F8B9C);font-size:var(--emw--font-size-small, 12px);font-weight:var(--emw--font-weight-normal, 400);line-height:12px}.ChallengeLevels .ChallengeLevelCard{border:1px solid var(--emw--button-border-color, #403956);padding:16px;border-radius:8px}.ChallengeLevels .ChallengeLevelCard .ChallengeLevelTitle{margin-bottom:2px}.ChallengeLevels .ChallengeLevelCard .ChallengeRewardMessage{margin-top:10px;line-height:15px;display:flex;flex-direction:row;align-items:center;gap:4px}.ChallengeLevels .ChallengeLevelCard .ChallengeRewardMessage .CustomRewardMessage{font-weight:var(--emw--font-weight-semibold, 600);word-break:break-all}.ChallengeLevels .InProgress{position:relative;border:none}.ChallengeLevels .InProgress .ChallengeLevelTarget,.ChallengeLevels .InProgress .CustomRewardMessage{color:var(--emfe-w-color-white, #FFF)}.ChallengeLevels .InProgress::before{content:"";position:absolute;inset:0;border-radius:8px;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}.ChallengeDetailsPopup.Tablet .ChallengeActions,.ChallengeDetailsPopup.Desktop .ChallengeActions{padding-top:16px}.ChallengeDetailsPopup.Tablet .ChallengeIconButton,.ChallengeDetailsPopup.Desktop .ChallengeIconButton{width:24px;height:24px}.ChallengeDetailsPopup.Tablet .ChallengeDetails,.ChallengeDetailsPopup.Desktop .ChallengeDetails{padding:20px 24px}.ChallengeDetailsPopup.Tablet .ChallengeName,.ChallengeDetailsPopup.Desktop .ChallengeName{line-height:27px;font-size:22px}.ChallengeDetailsPopup.Tablet .ChallengeJoinButton,.ChallengeDetailsPopup.Desktop .ChallengeJoinButton{min-width:100px;height:36px;font-size:16px}.ChallengeDetailsPopup.Tablet .ChallengeCountdown,.ChallengeDetailsPopup.Tablet .ChallengeLevels,.ChallengeDetailsPopup.Desktop .ChallengeCountdown,.ChallengeDetailsPopup.Desktop .ChallengeLevels{font-size:var(--emw--font-size-small, 14px);line-height:14px}.ChallengeDetailsPopup.Tablet .ChallengeCollapseButton,.ChallengeDetailsPopup.Desktop .ChallengeCollapseButton{margin-bottom:12px}.ChallengeDetailsPopup.Tablet .ChallengeLevels .ChallengeLevelTitle,.ChallengeDetailsPopup.Desktop .ChallengeLevels .ChallengeLevelTitle{margin-bottom:4px}.ChallengeDetailsPopup.Tablet .ChallengeLevels .ChallengeRewardMessage,.ChallengeDetailsPopup.Desktop .ChallengeLevels .ChallengeRewardMessage{margin-top:12px;line-height:17px}';const g=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 l("div",{class:this.getProgressBarClasses(),part:"ProgressBar"},l("div",{class:"ProgressBarInfo",part:"ProgressBarInfo"},l("slot",{name:"Title"},l("div",null)),l("slot",{name:"Percent"},l("div",{class:"ProgressBarPercent",part:"ProgressBarPercent"},this.value,"%"))),l("div",{class:"ProgressBarBackground",part:"ProgressBarBackground"},l("div",{class:"ProgressBarLine",part:"ProgressBarLine",style:{width:this.value+"%"}})))}get host(){return s(this)}};g.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{h as casino_engagement_suite_challenges_details,g as casino_engagement_suite_progress_bar}

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

@@ -1,6 +1,6 @@
 'use strict';
 
-const index = require('./index-7b0587ba.js');
+const index = require('./index-a0eb9215.js');
 
 /*
  Stencil Client Patch Browser v2.15.2 | MIT Licensed | https://stenciljs.com
@@ -15,5 +15,5 @@ const patchBrowser = () => {
 };
 
 patchBrowser().then(options => {
-  return index.bootstrapLazy([["casino-engagement-suite-challenges-details_2.cjs",[[1,"casino-engagement-suite-challenges-details",{"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"challenge":[16],"language":[1],"gameSlug":[1,"game-slug"],"device":[1],"limitStylingAppends":[32],"timer":[32],"showDetails":[32],"isExpiredChallenge":[32]}],[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-details_2.cjs",[[1,"casino-engagement-suite-challenges-details",{"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"challenge":[16],"inProgressChallenges":[16],"language":[1],"gameSlug":[1,"game-slug"],"device":[1],"isJoiningToChallenge":[1028,"is-joining-to-challenge"],"limitStylingAppends":[32],"timer":[32],"showDetails":[32],"isExpiredChallenge":[32]}],[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-details_2.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-7b0587ba.js');
+const index = require('./index-a0eb9215.js');
 
 const DEFAULT_LANGUAGE = 'en';
 const SUPPORTED_LANGUAGES = ['en'];
@@ -96,6 +96,38 @@ const CasinoEngagementSuiteChallengesDetails = class {
     this.handleBackClick = () => {
       this.back.emit();
     };
+    this.onGameClick = (ev) => {
+      const gameSlug = ev.currentTarget.getAttribute('data-slug');
+      window.postMessage({ type: 'EngagementSuiteGameRedirect', Slug: gameSlug });
+    };
+    this.changeChallengeStatus = (e) => {
+      var _a, _b;
+      const id = +e.currentTarget.getAttribute('data-id');
+      if ((_a = this.inProgressChallenges) === null || _a === void 0 ? void 0 : _a.includes(id)) {
+        window.postMessage({
+          type: 'ShowConfirmationModal',
+          ProgressToDeactivate: id,
+        });
+        return;
+      }
+      if (((_b = this.inProgressChallenges) === null || _b === void 0 ? void 0 : _b.length) > 0) {
+        window.postMessage({
+          type: 'ShowConfirmationModal',
+          ProgressToActivate: id,
+          ProgressToDeactivate: this.inProgressChallenges[0],
+        });
+        return;
+      }
+      window.postMessage({
+        type: 'ChallengeJoinRequest',
+        data: {
+          ProgressToActivate: id,
+        },
+      });
+    };
+    this.toggle = () => {
+      this.showDetails = !this.showDetails;
+    };
   }
   challengePropHandler(value) {
     if (!this.interval && value) {
@@ -127,8 +159,8 @@ const CasinoEngagementSuiteChallengesDetails = class {
   getChallengeHeader() {
     const presentationName = this.challenge.ChallengePresentation.PresentationName;
     const inProgressChallenge = this.challenge.Status === ChallengeProgressStatus.InProgress;
-    return (index.h("div", { class: "ChallengeDetailsHeader" }, index.h("span", { class: "ChallengeName" }, presentationName), index.h("button", { class: `ChallengeJoinButton ${inProgressChallenge ? 'Joined' : ''}
-          ${this.isExpiredChallenge ? 'Disabled' : ''}` }, inProgressChallenge
+    return (index.h("div", { class: "ChallengeDetailsHeader" }, index.h("span", { class: "ChallengeName" }, presentationName), index.h("button", { onClick: this.changeChallengeStatus, class: `ChallengeJoinButton ${inProgressChallenge ? 'Joined' : ''}
+            ${this.isExpiredChallenge || this.isJoiningToChallenge ? 'Disabled' : ''}`, "data-id": this.challenge.Id }, inProgressChallenge
       ? translate('unjoin', this.language)
       : translate('join', this.language))));
   }
@@ -140,10 +172,7 @@ const CasinoEngagementSuiteChallengesDetails = class {
     const description = this.challenge.ChallengePresentation.Description;
     const url = this.challenge.ChallengePresentation.Url;
     const games = this.challenge.Games;
-    return (index.h("div", { class: `CollapseDetails ${this.showDetails ? 'ShowDetails' : ''}` }, description && index.h("span", { class: "ChallengeDescription" }, description), url && (index.h("div", { class: "TC" }, index.h("a", { href: url, target: "_blank" }, translate('tc', this.language)))), (games === null || games === void 0 ? void 0 : games.length) && (index.h("div", { class: "ChallengeGames" }, games.map((game) => (index.h("div", { class: "Game" }, index.h("img", { src: game.GameIcon, alt: game.GameName, onClick: () => this.onGameClick(game.GameSlug), class: `${game.GameSlug === this.gameSlug ? 'Disabled' : ''}` }))))))));
-  }
-  onGameClick(gameSlug) {
-    window.postMessage({ type: 'GameClick', slug: gameSlug });
+    return (index.h("div", { class: `CollapseDetails ${this.showDetails ? 'ShowDetails' : ''}` }, description && index.h("span", { class: "ChallengeDescription" }, description), url && (index.h("div", { class: "TC" }, index.h("a", { href: url, target: "_blank" }, translate('tc', this.language)))), (games === null || games === void 0 ? void 0 : games.length) && (index.h("div", { class: "ChallengeGames" }, games.map((game) => (index.h("div", { class: "Game", key: game.CasinoGameId }, index.h("img", { src: game.GameIcon, alt: game.GameName, onClick: this.onGameClick, class: `${game.GameSlug === this.gameSlug ? 'Disabled' : ''}`, "data-slug": game.GameSlug }))))))));
   }
   startCountdown() {
     this.interval = setInterval(() => {
@@ -171,7 +200,7 @@ const CasinoEngagementSuiteChallengesDetails = class {
       : `${days}d:${hours}h:${minutes}m`;
   }
   getLevelTarget(level) {
-    let levelTarget = `${translate('place', this.language)} ${level.TargetTurnover}`;
+    let levelTarget = `${translate('place', this.language)} ${level.DisplayCurrencyTargetTurnover}`;
     if (level.LevelTargetType === 1) {
       levelTarget += ` ${translate('bet', this.language)}`;
     }
@@ -189,7 +218,7 @@ const CasinoEngagementSuiteChallengesDetails = class {
     return (index.h("div", { class: "ChallengeLevels" }, this.challenge.LevelProgresses.map((level, index$1) => (index.h("div", { class: getClass(level) }, index.h("casino-engagement-suite-progress-bar", { class: this.device, value: level.ProgressPercentage, "hide-percent": level.ProgressPercentage === 0 || level.ProgressPercentage === 100, disabled: this.isExpiredChallenge || isChallengePaused }, index.h("span", { slot: "Title", class: "ChallengeLevelTitle" }, index.h("span", null, "Level ", index$1 + 1, ": "), this.getLevelTarget(level))), index.h("div", { class: "ChallengeRewardMessage" }, index.h("img", { src: "https://static.everymatrix.com/gic/img/engagement-suite/reward.svg", alt: "win" }), index.h("span", null, translate('win', this.language), ": "), index.h("span", { class: "CustomRewardMessage" }, level.CustomRewardMessage)))))));
   }
   getToggleButton() {
-    return (index.h("div", { class: "ChallengeCollapseButton", onClick: () => this.showDetails = !this.showDetails }, index.h("span", { class: `Toggle ${this.showDetails ? 'Closed' : 'Open'}` }), index.h("span", null, translate('details', this.language))));
+    return (index.h("div", { class: "ChallengeCollapseButton", onClick: this.toggle }, index.h("span", { class: `Toggle ${this.showDetails ? 'Closed' : 'Open'}` }), index.h("span", null, translate('details', this.language))));
   }
   render() {
     return index.h("div", { class: `ChallengeDetailsPopup ${this.device}` }, this.getActionsTemplate(), index.h("div", { class: "ChallengeDetails" }, this.getChallengeHeader(), this.getChallengeCountdown(), this.getToggleButton(), this.getChallengeDetails(), this.getChallengeLevels()));
@@ -201,7 +230,7 @@ const CasinoEngagementSuiteChallengesDetails = class {
 };
 CasinoEngagementSuiteChallengesDetails.style = casinoEngagementSuiteChallengesDetailsCss;
 
-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) {
@@ -214,6 +243,10 @@ const CasinoEngagementSuiteProgressBar = class {
      * Shows disabled styles
      */
     this.disabled = false;
+    /**
+     * Hide percent value
+     */
+    this.hidePercent = false;
     /**
      * Client custom styling via string
      */
@@ -255,7 +288,8 @@ const CasinoEngagementSuiteProgressBar = class {
     return {
       ProgressBar: true,
       Completed: this.value === 100,
-      Disabled: this.disabled
+      Disabled: this.disabled,
+      HidePercent: this.hidePercent
     };
   }
   render() {

package/dist/cjs/{index-7b0587ba.js → index-a0eb9215.js}

@@ -154,6 +154,7 @@ const isComplexType = (o) => {
 // export function h(nodeName: string | d.FunctionalComponent, vnodeData: d.PropsType, ...children: d.ChildType[]): d.VNode;
 const h = (nodeName, vnodeData, ...children) => {
     let child = null;
+    let key = null;
     let simple = false;
     let lastSimple = false;
     let vNodeChildren = [];
@@ -181,6 +182,10 @@ const h = (nodeName, vnodeData, ...children) => {
     };
     walk(children);
     if (vnodeData) {
+        // normalize class / classname attributes
+        if (vnodeData.key) {
+            key = vnodeData.key;
+        }
         {
             const classData = vnodeData.className || vnodeData.class;
             if (classData) {
@@ -198,6 +203,9 @@ const h = (nodeName, vnodeData, ...children) => {
     if (vNodeChildren.length > 0) {
         vnode.$children$ = vNodeChildren;
     }
+    {
+        vnode.$key$ = key;
+    }
     return vnode;
 };
 const newVNode = (tag, text) => {
@@ -211,6 +219,9 @@ const newVNode = (tag, text) => {
     {
         vnode.$attrs$ = null;
     }
+    {
+        vnode.$key$ = null;
+    }
     return vnode;
 };
 const Host = {};
@@ -259,6 +270,8 @@ const setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags) => {
                 }
             }
         }
+        else if (memberName === 'key')
+            ;
         else if ((!isProp ) &&
             memberName[0] === 'o' &&
             memberName[1] === 'n') {
@@ -423,6 +436,8 @@ const removeVnodes = (vnodes, startIdx, endIdx, vnode, elm) => {
 const updateChildren = (parentElm, oldCh, newVNode, newCh) => {
     let oldStartIdx = 0;
     let newStartIdx = 0;
+    let idxInOld = 0;
+    let i = 0;
     let oldEndIdx = oldCh.length - 1;
     let oldStartVnode = oldCh[0];
     let oldEndVnode = oldCh[oldEndIdx];
@@ -430,6 +445,7 @@ const updateChildren = (parentElm, oldCh, newVNode, newCh) => {
     let newStartVnode = newCh[0];
     let newEndVnode = newCh[newEndIdx];
     let node;
+    let elmToMove;
     while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {
         if (oldStartVnode == null) {
             // Vnode might have been moved left
@@ -467,7 +483,29 @@ const updateChildren = (parentElm, oldCh, newVNode, newCh) => {
             newStartVnode = newCh[++newStartIdx];
         }
         else {
+            // createKeyToOldIdx
+            idxInOld = -1;
             {
+                for (i = oldStartIdx; i <= oldEndIdx; ++i) {
+                    if (oldCh[i] && oldCh[i].$key$ !== null && oldCh[i].$key$ === newStartVnode.$key$) {
+                        idxInOld = i;
+                        break;
+                    }
+                }
+            }
+            if (idxInOld >= 0) {
+                elmToMove = oldCh[idxInOld];
+                if (elmToMove.$tag$ !== newStartVnode.$tag$) {
+                    node = createElm(oldCh && oldCh[newStartIdx], newVNode, idxInOld);
+                }
+                else {
+                    patch(elmToMove, newStartVnode);
+                    oldCh[idxInOld] = undefined;
+                    node = elmToMove.$elm$;
+                }
+                newStartVnode = newCh[++newStartIdx];
+            }
+            else {
                 // new element
                 node = createElm(oldCh && oldCh[newStartIdx], newVNode, newStartIdx);
                 newStartVnode = newCh[++newStartIdx];
@@ -490,7 +528,9 @@ const isSameVnode = (vnode1, vnode2) => {
     // compare if two vnode to see if they're "technically" the same
     // need to have the same element tag, and same key to be the same
     if (vnode1.$tag$ === vnode2.$tag$) {
-        return true;
+        {
+            return vnode1.$key$ === vnode2.$key$;
+        }
     }
     return false;
 };

package/dist/cjs/loader.cjs.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-7b0587ba.js');
+const index = require('./index-a0eb9215.js');
 
 /*
  Stencil Client Patch Esm v2.15.2 | MIT Licensed | https://stenciljs.com
@@ -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-details_2.cjs",[[1,"casino-engagement-suite-challenges-details",{"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"challenge":[16],"language":[1],"gameSlug":[1,"game-slug"],"device":[1],"limitStylingAppends":[32],"timer":[32],"showDetails":[32],"isExpiredChallenge":[32]}],[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-details_2.cjs",[[1,"casino-engagement-suite-challenges-details",{"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"challenge":[16],"inProgressChallenges":[16],"language":[1],"gameSlug":[1,"game-slug"],"device":[1],"isJoiningToChallenge":[1028,"is-joining-to-challenge"],"limitStylingAppends":[32],"timer":[32],"showDetails":[32],"isExpiredChallenge":[32]}],[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-details/casino-engagement-suite-challenges-details.js

@@ -52,6 +52,38 @@ export class CasinoEngagementSuiteChallengesDetails {
     this.handleBackClick = () => {
       this.back.emit();
     };
+    this.onGameClick = (ev) => {
+      const gameSlug = ev.currentTarget.getAttribute('data-slug');
+      window.postMessage({ type: 'EngagementSuiteGameRedirect', Slug: gameSlug });
+    };
+    this.changeChallengeStatus = (e) => {
+      var _a, _b;
+      const id = +e.currentTarget.getAttribute('data-id');
+      if ((_a = this.inProgressChallenges) === null || _a === void 0 ? void 0 : _a.includes(id)) {
+        window.postMessage({
+          type: 'ShowConfirmationModal',
+          ProgressToDeactivate: id,
+        });
+        return;
+      }
+      if (((_b = this.inProgressChallenges) === null || _b === void 0 ? void 0 : _b.length) > 0) {
+        window.postMessage({
+          type: 'ShowConfirmationModal',
+          ProgressToActivate: id,
+          ProgressToDeactivate: this.inProgressChallenges[0],
+        });
+        return;
+      }
+      window.postMessage({
+        type: 'ChallengeJoinRequest',
+        data: {
+          ProgressToActivate: id,
+        },
+      });
+    };
+    this.toggle = () => {
+      this.showDetails = !this.showDetails;
+    };
   }
   challengePropHandler(value) {
     if (!this.interval && value) {
@@ -90,8 +122,8 @@ export class CasinoEngagementSuiteChallengesDetails {
     const inProgressChallenge = this.challenge.Status === ChallengeProgressStatus.InProgress;
     return (h("div", { class: "ChallengeDetailsHeader" },
       h("span", { class: "ChallengeName" }, presentationName),
-      h("button", { class: `ChallengeJoinButton ${inProgressChallenge ? 'Joined' : ''}
-          ${this.isExpiredChallenge ? 'Disabled' : ''}` }, inProgressChallenge
+      h("button", { onClick: this.changeChallengeStatus, class: `ChallengeJoinButton ${inProgressChallenge ? 'Joined' : ''}
+            ${this.isExpiredChallenge || this.isJoiningToChallenge ? 'Disabled' : ''}`, "data-id": this.challenge.Id }, inProgressChallenge
         ? translate('unjoin', this.language)
         : translate('join', this.language))));
   }
@@ -107,11 +139,8 @@ export class CasinoEngagementSuiteChallengesDetails {
       description && h("span", { class: "ChallengeDescription" }, description),
       url && (h("div", { class: "TC" },
         h("a", { href: url, target: "_blank" }, translate('tc', this.language)))),
-      (games === null || games === void 0 ? void 0 : games.length) && (h("div", { class: "ChallengeGames" }, games.map((game) => (h("div", { class: "Game" },
-        h("img", { src: game.GameIcon, alt: game.GameName, onClick: () => this.onGameClick(game.GameSlug), class: `${game.GameSlug === this.gameSlug ? 'Disabled' : ''}` }))))))));
-  }
-  onGameClick(gameSlug) {
-    window.postMessage({ type: 'GameClick', slug: gameSlug });
+      (games === null || games === void 0 ? void 0 : games.length) && (h("div", { class: "ChallengeGames" }, games.map((game) => (h("div", { class: "Game", key: game.CasinoGameId },
+        h("img", { src: game.GameIcon, alt: game.GameName, onClick: this.onGameClick, class: `${game.GameSlug === this.gameSlug ? 'Disabled' : ''}`, "data-slug": game.GameSlug }))))))));
   }
   startCountdown() {
     this.interval = setInterval(() => {
@@ -139,7 +168,7 @@ export class CasinoEngagementSuiteChallengesDetails {
       : `${days}d:${hours}h:${minutes}m`;
   }
   getLevelTarget(level) {
-    let levelTarget = `${translate('place', this.language)} ${level.TargetTurnover}`;
+    let levelTarget = `${translate('place', this.language)} ${level.DisplayCurrencyTargetTurnover}`;
     if (level.LevelTargetType === 1) {
       levelTarget += ` ${translate('bet', this.language)}`;
     }
@@ -170,7 +199,7 @@ export class CasinoEngagementSuiteChallengesDetails {
         h("span", { class: "CustomRewardMessage" }, level.CustomRewardMessage)))))));
   }
   getToggleButton() {
-    return (h("div", { class: "ChallengeCollapseButton", onClick: () => this.showDetails = !this.showDetails },
+    return (h("div", { class: "ChallengeCollapseButton", onClick: this.toggle },
       h("span", { class: `Toggle ${this.showDetails ? 'Closed' : 'Open'}` }),
       h("span", null, translate('details', this.language))));
   }
@@ -249,6 +278,25 @@ export class CasinoEngagementSuiteChallengesDetails {
         "text": "Selected challenge"
       }
     },
+    "inProgressChallenges": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "Array<number>",
+        "resolved": "number[]",
+        "references": {
+          "Array": {
+            "location": "global"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Active challenges"
+      }
+    },
     "language": {
       "type": "string",
       "mutable": false,
@@ -302,6 +350,23 @@ export class CasinoEngagementSuiteChallengesDetails {
       "attribute": "device",
       "reflect": false,
       "defaultValue": "'Mobile' as 'Mobile' | 'Tablet' | 'Desktop'"
+    },
+    "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
     }
   }; }
   static get states() { return {

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

@@ -95,6 +95,38 @@ const CasinoEngagementSuiteChallengesDetails$1 = /*@__PURE__*/ proxyCustomElemen
     this.handleBackClick = () => {
       this.back.emit();
     };
+    this.onGameClick = (ev) => {
+      const gameSlug = ev.currentTarget.getAttribute('data-slug');
+      window.postMessage({ type: 'EngagementSuiteGameRedirect', Slug: gameSlug });
+    };
+    this.changeChallengeStatus = (e) => {
+      var _a, _b;
+      const id = +e.currentTarget.getAttribute('data-id');
+      if ((_a = this.inProgressChallenges) === null || _a === void 0 ? void 0 : _a.includes(id)) {
+        window.postMessage({
+          type: 'ShowConfirmationModal',
+          ProgressToDeactivate: id,
+        });
+        return;
+      }
+      if (((_b = this.inProgressChallenges) === null || _b === void 0 ? void 0 : _b.length) > 0) {
+        window.postMessage({
+          type: 'ShowConfirmationModal',
+          ProgressToActivate: id,
+          ProgressToDeactivate: this.inProgressChallenges[0],
+        });
+        return;
+      }
+      window.postMessage({
+        type: 'ChallengeJoinRequest',
+        data: {
+          ProgressToActivate: id,
+        },
+      });
+    };
+    this.toggle = () => {
+      this.showDetails = !this.showDetails;
+    };
   }
   challengePropHandler(value) {
     if (!this.interval && value) {
@@ -126,8 +158,8 @@ const CasinoEngagementSuiteChallengesDetails$1 = /*@__PURE__*/ proxyCustomElemen
   getChallengeHeader() {
     const presentationName = this.challenge.ChallengePresentation.PresentationName;
     const inProgressChallenge = this.challenge.Status === ChallengeProgressStatus.InProgress;
-    return (h("div", { class: "ChallengeDetailsHeader" }, h("span", { class: "ChallengeName" }, presentationName), h("button", { class: `ChallengeJoinButton ${inProgressChallenge ? 'Joined' : ''}
-          ${this.isExpiredChallenge ? 'Disabled' : ''}` }, inProgressChallenge
+    return (h("div", { class: "ChallengeDetailsHeader" }, h("span", { class: "ChallengeName" }, presentationName), h("button", { onClick: this.changeChallengeStatus, class: `ChallengeJoinButton ${inProgressChallenge ? 'Joined' : ''}
+            ${this.isExpiredChallenge || this.isJoiningToChallenge ? 'Disabled' : ''}`, "data-id": this.challenge.Id }, inProgressChallenge
       ? translate('unjoin', this.language)
       : translate('join', this.language))));
   }
@@ -139,10 +171,7 @@ const CasinoEngagementSuiteChallengesDetails$1 = /*@__PURE__*/ proxyCustomElemen
     const description = this.challenge.ChallengePresentation.Description;
     const url = this.challenge.ChallengePresentation.Url;
     const games = this.challenge.Games;
-    return (h("div", { class: `CollapseDetails ${this.showDetails ? 'ShowDetails' : ''}` }, description && h("span", { class: "ChallengeDescription" }, description), url && (h("div", { class: "TC" }, h("a", { href: url, target: "_blank" }, translate('tc', this.language)))), (games === null || games === void 0 ? void 0 : games.length) && (h("div", { class: "ChallengeGames" }, games.map((game) => (h("div", { class: "Game" }, h("img", { src: game.GameIcon, alt: game.GameName, onClick: () => this.onGameClick(game.GameSlug), class: `${game.GameSlug === this.gameSlug ? 'Disabled' : ''}` }))))))));
-  }
-  onGameClick(gameSlug) {
-    window.postMessage({ type: 'GameClick', slug: gameSlug });
+    return (h("div", { class: `CollapseDetails ${this.showDetails ? 'ShowDetails' : ''}` }, description && h("span", { class: "ChallengeDescription" }, description), url && (h("div", { class: "TC" }, h("a", { href: url, target: "_blank" }, translate('tc', this.language)))), (games === null || games === void 0 ? void 0 : games.length) && (h("div", { class: "ChallengeGames" }, games.map((game) => (h("div", { class: "Game", key: game.CasinoGameId }, h("img", { src: game.GameIcon, alt: game.GameName, onClick: this.onGameClick, class: `${game.GameSlug === this.gameSlug ? 'Disabled' : ''}`, "data-slug": game.GameSlug }))))))));
   }
   startCountdown() {
     this.interval = setInterval(() => {
@@ -170,7 +199,7 @@ const CasinoEngagementSuiteChallengesDetails$1 = /*@__PURE__*/ proxyCustomElemen
       : `${days}d:${hours}h:${minutes}m`;
   }
   getLevelTarget(level) {
-    let levelTarget = `${translate('place', this.language)} ${level.TargetTurnover}`;
+    let levelTarget = `${translate('place', this.language)} ${level.DisplayCurrencyTargetTurnover}`;
     if (level.LevelTargetType === 1) {
       levelTarget += ` ${translate('bet', this.language)}`;
     }
@@ -188,7 +217,7 @@ const CasinoEngagementSuiteChallengesDetails$1 = /*@__PURE__*/ proxyCustomElemen
     return (h("div", { class: "ChallengeLevels" }, this.challenge.LevelProgresses.map((level, index) => (h("div", { class: getClass(level) }, h("casino-engagement-suite-progress-bar", { class: this.device, value: level.ProgressPercentage, "hide-percent": level.ProgressPercentage === 0 || level.ProgressPercentage === 100, disabled: this.isExpiredChallenge || isChallengePaused }, h("span", { slot: "Title", class: "ChallengeLevelTitle" }, h("span", null, "Level ", index + 1, ": "), this.getLevelTarget(level))), h("div", { class: "ChallengeRewardMessage" }, h("img", { src: "https://static.everymatrix.com/gic/img/engagement-suite/reward.svg", alt: "win" }), h("span", null, translate('win', this.language), ": "), h("span", { class: "CustomRewardMessage" }, level.CustomRewardMessage)))))));
   }
   getToggleButton() {
-    return (h("div", { class: "ChallengeCollapseButton", onClick: () => this.showDetails = !this.showDetails }, h("span", { class: `Toggle ${this.showDetails ? 'Closed' : 'Open'}` }), h("span", null, translate('details', this.language))));
+    return (h("div", { class: "ChallengeCollapseButton", onClick: this.toggle }, h("span", { class: `Toggle ${this.showDetails ? 'Closed' : 'Open'}` }), h("span", null, translate('details', this.language))));
   }
   render() {
     return h("div", { class: `ChallengeDetailsPopup ${this.device}` }, this.getActionsTemplate(), h("div", { class: "ChallengeDetails" }, this.getChallengeHeader(), this.getChallengeCountdown(), this.getToggleButton(), this.getChallengeDetails(), this.getChallengeLevels()));
@@ -202,9 +231,11 @@ const CasinoEngagementSuiteChallengesDetails$1 = /*@__PURE__*/ proxyCustomElemen
     "clientStyling": [513, "client-styling"],
     "clientStylingUrl": [513, "client-styling-url"],
     "challenge": [16],
+    "inProgressChallenges": [16],
     "language": [1],
     "gameSlug": [1, "game-slug"],
     "device": [1],
+    "isJoiningToChallenge": [1028, "is-joining-to-challenge"],
     "limitStylingAppends": [32],
     "timer": [32],
     "showDetails": [32],

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-details.js

@@ -1,4 +1,4 @@
-import { p as promiseResolve, b as bootstrapLazy } from './index-5178deb5.js';
+import { p as promiseResolve, b as bootstrapLazy } from './index-c5abae48.js';
 
 /*
  Stencil Client Patch Browser v2.15.2 | MIT Licensed | https://stenciljs.com
@@ -13,5 +13,5 @@ const patchBrowser = () => {
 };
 
 patchBrowser().then(options => {
-  return bootstrapLazy([["casino-engagement-suite-challenges-details_2",[[1,"casino-engagement-suite-challenges-details",{"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"challenge":[16],"language":[1],"gameSlug":[1,"game-slug"],"device":[1],"limitStylingAppends":[32],"timer":[32],"showDetails":[32],"isExpiredChallenge":[32]}],[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-details_2",[[1,"casino-engagement-suite-challenges-details",{"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"challenge":[16],"inProgressChallenges":[16],"language":[1],"gameSlug":[1,"game-slug"],"device":[1],"isJoiningToChallenge":[1028,"is-joining-to-challenge"],"limitStylingAppends":[32],"timer":[32],"showDetails":[32],"isExpiredChallenge":[32]}],[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-details_2.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, g as getElement } from './index-5178deb5.js';
+import { r as registerInstance, c as createEvent, h, g as getElement } from './index-c5abae48.js';
 
 const DEFAULT_LANGUAGE = 'en';
 const SUPPORTED_LANGUAGES = ['en'];
@@ -92,6 +92,38 @@ const CasinoEngagementSuiteChallengesDetails = class {
     this.handleBackClick = () => {
       this.back.emit();
     };
+    this.onGameClick = (ev) => {
+      const gameSlug = ev.currentTarget.getAttribute('data-slug');
+      window.postMessage({ type: 'EngagementSuiteGameRedirect', Slug: gameSlug });
+    };
+    this.changeChallengeStatus = (e) => {
+      var _a, _b;
+      const id = +e.currentTarget.getAttribute('data-id');
+      if ((_a = this.inProgressChallenges) === null || _a === void 0 ? void 0 : _a.includes(id)) {
+        window.postMessage({
+          type: 'ShowConfirmationModal',
+          ProgressToDeactivate: id,
+        });
+        return;
+      }
+      if (((_b = this.inProgressChallenges) === null || _b === void 0 ? void 0 : _b.length) > 0) {
+        window.postMessage({
+          type: 'ShowConfirmationModal',
+          ProgressToActivate: id,
+          ProgressToDeactivate: this.inProgressChallenges[0],
+        });
+        return;
+      }
+      window.postMessage({
+        type: 'ChallengeJoinRequest',
+        data: {
+          ProgressToActivate: id,
+        },
+      });
+    };
+    this.toggle = () => {
+      this.showDetails = !this.showDetails;
+    };
   }
   challengePropHandler(value) {
     if (!this.interval && value) {
@@ -123,8 +155,8 @@ const CasinoEngagementSuiteChallengesDetails = class {
   getChallengeHeader() {
     const presentationName = this.challenge.ChallengePresentation.PresentationName;
     const inProgressChallenge = this.challenge.Status === ChallengeProgressStatus.InProgress;
-    return (h("div", { class: "ChallengeDetailsHeader" }, h("span", { class: "ChallengeName" }, presentationName), h("button", { class: `ChallengeJoinButton ${inProgressChallenge ? 'Joined' : ''}
-          ${this.isExpiredChallenge ? 'Disabled' : ''}` }, inProgressChallenge
+    return (h("div", { class: "ChallengeDetailsHeader" }, h("span", { class: "ChallengeName" }, presentationName), h("button", { onClick: this.changeChallengeStatus, class: `ChallengeJoinButton ${inProgressChallenge ? 'Joined' : ''}
+            ${this.isExpiredChallenge || this.isJoiningToChallenge ? 'Disabled' : ''}`, "data-id": this.challenge.Id }, inProgressChallenge
       ? translate('unjoin', this.language)
       : translate('join', this.language))));
   }
@@ -136,10 +168,7 @@ const CasinoEngagementSuiteChallengesDetails = class {
     const description = this.challenge.ChallengePresentation.Description;
     const url = this.challenge.ChallengePresentation.Url;
     const games = this.challenge.Games;
-    return (h("div", { class: `CollapseDetails ${this.showDetails ? 'ShowDetails' : ''}` }, description && h("span", { class: "ChallengeDescription" }, description), url && (h("div", { class: "TC" }, h("a", { href: url, target: "_blank" }, translate('tc', this.language)))), (games === null || games === void 0 ? void 0 : games.length) && (h("div", { class: "ChallengeGames" }, games.map((game) => (h("div", { class: "Game" }, h("img", { src: game.GameIcon, alt: game.GameName, onClick: () => this.onGameClick(game.GameSlug), class: `${game.GameSlug === this.gameSlug ? 'Disabled' : ''}` }))))))));
-  }
-  onGameClick(gameSlug) {
-    window.postMessage({ type: 'GameClick', slug: gameSlug });
+    return (h("div", { class: `CollapseDetails ${this.showDetails ? 'ShowDetails' : ''}` }, description && h("span", { class: "ChallengeDescription" }, description), url && (h("div", { class: "TC" }, h("a", { href: url, target: "_blank" }, translate('tc', this.language)))), (games === null || games === void 0 ? void 0 : games.length) && (h("div", { class: "ChallengeGames" }, games.map((game) => (h("div", { class: "Game", key: game.CasinoGameId }, h("img", { src: game.GameIcon, alt: game.GameName, onClick: this.onGameClick, class: `${game.GameSlug === this.gameSlug ? 'Disabled' : ''}`, "data-slug": game.GameSlug }))))))));
   }
   startCountdown() {
     this.interval = setInterval(() => {
@@ -167,7 +196,7 @@ const CasinoEngagementSuiteChallengesDetails = class {
       : `${days}d:${hours}h:${minutes}m`;
   }
   getLevelTarget(level) {
-    let levelTarget = `${translate('place', this.language)} ${level.TargetTurnover}`;
+    let levelTarget = `${translate('place', this.language)} ${level.DisplayCurrencyTargetTurnover}`;
     if (level.LevelTargetType === 1) {
       levelTarget += ` ${translate('bet', this.language)}`;
     }
@@ -185,7 +214,7 @@ const CasinoEngagementSuiteChallengesDetails = class {
     return (h("div", { class: "ChallengeLevels" }, this.challenge.LevelProgresses.map((level, index) => (h("div", { class: getClass(level) }, h("casino-engagement-suite-progress-bar", { class: this.device, value: level.ProgressPercentage, "hide-percent": level.ProgressPercentage === 0 || level.ProgressPercentage === 100, disabled: this.isExpiredChallenge || isChallengePaused }, h("span", { slot: "Title", class: "ChallengeLevelTitle" }, h("span", null, "Level ", index + 1, ": "), this.getLevelTarget(level))), h("div", { class: "ChallengeRewardMessage" }, h("img", { src: "https://static.everymatrix.com/gic/img/engagement-suite/reward.svg", alt: "win" }), h("span", null, translate('win', this.language), ": "), h("span", { class: "CustomRewardMessage" }, level.CustomRewardMessage)))))));
   }
   getToggleButton() {
-    return (h("div", { class: "ChallengeCollapseButton", onClick: () => this.showDetails = !this.showDetails }, h("span", { class: `Toggle ${this.showDetails ? 'Closed' : 'Open'}` }), h("span", null, translate('details', this.language))));
+    return (h("div", { class: "ChallengeCollapseButton", onClick: this.toggle }, h("span", { class: `Toggle ${this.showDetails ? 'Closed' : 'Open'}` }), h("span", null, translate('details', this.language))));
   }
   render() {
     return h("div", { class: `ChallengeDetailsPopup ${this.device}` }, this.getActionsTemplate(), h("div", { class: "ChallengeDetails" }, this.getChallengeHeader(), this.getChallengeCountdown(), this.getToggleButton(), this.getChallengeDetails(), this.getChallengeLevels()));
@@ -197,7 +226,7 @@ const CasinoEngagementSuiteChallengesDetails = class {
 };
 CasinoEngagementSuiteChallengesDetails.style = casinoEngagementSuiteChallengesDetailsCss;
 
-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) {
@@ -210,6 +239,10 @@ const CasinoEngagementSuiteProgressBar = class {
      * Shows disabled styles
      */
     this.disabled = false;
+    /**
+     * Hide percent value
+     */
+    this.hidePercent = false;
     /**
      * Client custom styling via string
      */
@@ -251,7 +284,8 @@ const CasinoEngagementSuiteProgressBar = class {
     return {
       ProgressBar: true,
       Completed: this.value === 100,
-      Disabled: this.disabled
+      Disabled: this.disabled,
+      HidePercent: this.hidePercent
     };
   }
   render() {

package/dist/esm/{index-5178deb5.js → index-c5abae48.js}

@@ -132,6 +132,7 @@ const isComplexType = (o) => {
 // export function h(nodeName: string | d.FunctionalComponent, vnodeData: d.PropsType, ...children: d.ChildType[]): d.VNode;
 const h = (nodeName, vnodeData, ...children) => {
     let child = null;
+    let key = null;
     let simple = false;
     let lastSimple = false;
     let vNodeChildren = [];
@@ -159,6 +160,10 @@ const h = (nodeName, vnodeData, ...children) => {
     };
     walk(children);
     if (vnodeData) {
+        // normalize class / classname attributes
+        if (vnodeData.key) {
+            key = vnodeData.key;
+        }
         {
             const classData = vnodeData.className || vnodeData.class;
             if (classData) {
@@ -176,6 +181,9 @@ const h = (nodeName, vnodeData, ...children) => {
     if (vNodeChildren.length > 0) {
         vnode.$children$ = vNodeChildren;
     }
+    {
+        vnode.$key$ = key;
+    }
     return vnode;
 };
 const newVNode = (tag, text) => {
@@ -189,6 +197,9 @@ const newVNode = (tag, text) => {
     {
         vnode.$attrs$ = null;
     }
+    {
+        vnode.$key$ = null;
+    }
     return vnode;
 };
 const Host = {};
@@ -237,6 +248,8 @@ const setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags) => {
                 }
             }
         }
+        else if (memberName === 'key')
+            ;
         else if ((!isProp ) &&
             memberName[0] === 'o' &&
             memberName[1] === 'n') {
@@ -401,6 +414,8 @@ const removeVnodes = (vnodes, startIdx, endIdx, vnode, elm) => {
 const updateChildren = (parentElm, oldCh, newVNode, newCh) => {
     let oldStartIdx = 0;
     let newStartIdx = 0;
+    let idxInOld = 0;
+    let i = 0;
     let oldEndIdx = oldCh.length - 1;
     let oldStartVnode = oldCh[0];
     let oldEndVnode = oldCh[oldEndIdx];
@@ -408,6 +423,7 @@ const updateChildren = (parentElm, oldCh, newVNode, newCh) => {
     let newStartVnode = newCh[0];
     let newEndVnode = newCh[newEndIdx];
     let node;
+    let elmToMove;
     while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {
         if (oldStartVnode == null) {
             // Vnode might have been moved left
@@ -445,7 +461,29 @@ const updateChildren = (parentElm, oldCh, newVNode, newCh) => {
             newStartVnode = newCh[++newStartIdx];
         }
         else {
+            // createKeyToOldIdx
+            idxInOld = -1;
             {
+                for (i = oldStartIdx; i <= oldEndIdx; ++i) {
+                    if (oldCh[i] && oldCh[i].$key$ !== null && oldCh[i].$key$ === newStartVnode.$key$) {
+                        idxInOld = i;
+                        break;
+                    }
+                }
+            }
+            if (idxInOld >= 0) {
+                elmToMove = oldCh[idxInOld];
+                if (elmToMove.$tag$ !== newStartVnode.$tag$) {
+                    node = createElm(oldCh && oldCh[newStartIdx], newVNode, idxInOld);
+                }
+                else {
+                    patch(elmToMove, newStartVnode);
+                    oldCh[idxInOld] = undefined;
+                    node = elmToMove.$elm$;
+                }
+                newStartVnode = newCh[++newStartIdx];
+            }
+            else {
                 // new element
                 node = createElm(oldCh && oldCh[newStartIdx], newVNode, newStartIdx);
                 newStartVnode = newCh[++newStartIdx];
@@ -468,7 +506,9 @@ const isSameVnode = (vnode1, vnode2) => {
     // compare if two vnode to see if they're "technically" the same
     // need to have the same element tag, and same key to be the same
     if (vnode1.$tag$ === vnode2.$tag$) {
-        return true;
+        {
+            return vnode1.$key$ === vnode2.$key$;
+        }
     }
     return false;
 };

package/dist/esm/loader.js

@@ -1,4 +1,4 @@
-import { p as promiseResolve, b as bootstrapLazy } from './index-5178deb5.js';
+import { p as promiseResolve, b as bootstrapLazy } from './index-c5abae48.js';
 
 /*
  Stencil Client Patch Esm v2.15.2 | MIT Licensed | https://stenciljs.com
@@ -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-details_2",[[1,"casino-engagement-suite-challenges-details",{"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"challenge":[16],"language":[1],"gameSlug":[1,"game-slug"],"device":[1],"limitStylingAppends":[32],"timer":[32],"showDetails":[32],"isExpiredChallenge":[32]}],[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-details_2",[[1,"casino-engagement-suite-challenges-details",{"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"challenge":[16],"inProgressChallenges":[16],"language":[1],"gameSlug":[1,"game-slug"],"device":[1],"isJoiningToChallenge":[1028,"is-joining-to-challenge"],"limitStylingAppends":[32],"timer":[32],"showDetails":[32],"isExpiredChallenge":[32]}],[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-details/casino-engagement-suite-challenges-details.d.ts

@@ -11,9 +11,13 @@ export declare class CasinoEngagementSuiteChallengesDetails {
    */
   clientStylingUrl: string;
   /**
-    * Selected challenge
-    */
+   * Selected challenge
+   */
   challenge: Challenge;
+  /**
+   *Active challenges
+   */
+  inProgressChallenges: Array<number>;
   /**
   * Language of the widget
    */
@@ -26,6 +30,10 @@ export declare class CasinoEngagementSuiteChallengesDetails {
   * User's device type
    */
   device: "Mobile" | "Tablet" | "Desktop";
+  /**
+   *Is joining to challenge
+   */
+  isJoiningToChallenge: boolean;
   close: EventEmitter<void>;
   back: EventEmitter<void>;
   private limitStylingAppends;
@@ -47,11 +55,13 @@ export declare class CasinoEngagementSuiteChallengesDetails {
   getChallengeDetails(): any;
   handleCloseClick: () => void;
   handleBackClick: () => void;
-  onGameClick(gameSlug: string): void;
+  onGameClick: (ev: MouseEvent) => void;
+  changeChallengeStatus: (e: MouseEvent) => void;
   startCountdown(): void;
   updateTimer(): void;
   getLevelTarget(level: LevelProgress): any;
   getChallengeLevels(): any;
   getToggleButton(): any;
+  toggle: () => void;
   render(): any;
 }

package/dist/types/components.d.ts

@@ -28,6 +28,14 @@ export namespace Components {
           * Current game slug
          */
         "gameSlug": string;
+        /**
+          * Active challenges
+         */
+        "inProgressChallenges": Array<number>;
+        /**
+          * Is joining to challenge
+         */
+        "isJoiningToChallenge": boolean;
         /**
           * Language of the widget
          */
@@ -67,6 +75,14 @@ declare namespace LocalJSX {
           * Current game slug
          */
         "gameSlug"?: string;
+        /**
+          * Active challenges
+         */
+        "inProgressChallenges"?: Array<number>;
+        /**
+          * Is joining to challenge
+         */
+        "isJoiningToChallenge"?: boolean;
         /**
           * Language of the widget
          */

package/dist/types/models/casino-challenges-details.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-details",
-  "version": "1.36.0",
+  "version": "1.37.0",
   "main": "./dist/index.cjs.js",
   "module": "./dist/index.js",
   "es2015": "./dist/esm/index.mjs",

package/dist/casino-engagement-suite-challenges-details/p-8db66ba7.js

@@ -1 +0,0 @@
-let e,t,n=!1;const l="undefined"!=typeof window?window:{},s=l.document||{head:{}},o={t:0,l:"",jmp:e=>e(),raf:e=>requestAnimationFrame(e),ael:(e,t,n,l)=>e.addEventListener(t,n,l),rel:(e,t,n,l)=>e.removeEventListener(t,n,l),ce:(e,t)=>new CustomEvent(e,t)},c=e=>Promise.resolve(e),i=(()=>{try{return new CSSStyleSheet,"function"==typeof(new CSSStyleSheet).replace}catch(e){}return!1})(),r=new WeakMap,a=e=>"sc-"+e.o,u={},f=e=>"object"==(e=typeof e)||"function"===e,d=(e,t,...n)=>{let l=null,s=!1,o=!1,c=[];const i=t=>{for(let n=0;n<t.length;n++)l=t[n],Array.isArray(l)?i(l):null!=l&&"boolean"!=typeof l&&((s="function"!=typeof e&&!f(l))&&(l+=""),s&&o?c[c.length-1].i+=l:c.push(s?h(null,l):l),o=s)};if(i(n),t){const e=t.className||t.class;e&&(t.class="object"!=typeof e?e:Object.keys(e).filter((t=>e[t])).join(" "))}const r=h(e,null);return r.u=t,c.length>0&&(r.h=c),r},h=(e,t)=>({t:0,$:e,i:t,m:null,h:null,u:null}),$={},m=(e,t,n,s,c,i)=>{if(n!==s){let r=_(e,t),a=t.toLowerCase();if("class"===t){const t=e.classList,l=p(n),o=p(s);t.remove(...l.filter((e=>e&&!o.includes(e)))),t.add(...o.filter((e=>e&&!l.includes(e))))}else if("style"===t){for(const t in n)s&&null!=s[t]||(t.includes("-")?e.style.removeProperty(t):e.style[t]="");for(const t in s)n&&s[t]===n[t]||(t.includes("-")?e.style.setProperty(t,s[t]):e.style[t]=s[t])}else if(r||"o"!==t[0]||"n"!==t[1]){const l=f(s);if((r||l&&null!==s)&&!c)try{if(e.tagName.includes("-"))e[t]=s;else{let l=null==s?"":s;"list"===t?r=!1:null!=n&&e[t]==l||(e[t]=l)}}catch(e){}null==s||!1===s?!1===s&&""!==e.getAttribute(t)||e.removeAttribute(t):(!r||4&i||c)&&!l&&e.setAttribute(t,s=!0===s?"":s)}else t="-"===t[2]?t.slice(3):_(l,a)?a.slice(2):a[2]+t.slice(3),n&&o.rel(e,t,n,!1),s&&o.ael(e,t,s,!1)}},y=/\s/,p=e=>e?e.split(y):[],b=(e,t,n,l)=>{const s=11===t.m.nodeType&&t.m.host?t.m.host:t.m,o=e&&e.u||u,c=t.u||u;for(l in o)l in c||m(s,l,o[l],void 0,n,t.t);for(l in c)m(s,l,o[l],c[l],n,t.t)},w=(t,n,l)=>{let o,c,i=n.h[l],r=0;if(null!==i.i)o=i.m=s.createTextNode(i.i);else if(o=i.m=s.createElement(i.$),b(null,i,!1),null!=e&&o["s-si"]!==e&&o.classList.add(o["s-si"]=e),i.h)for(r=0;r<i.h.length;++r)c=w(t,i,r),c&&o.appendChild(c);return o},g=(e,n,l,s,o,c)=>{let i,r=e;for(r.shadowRoot&&r.tagName===t&&(r=r.shadowRoot);o<=c;++o)s[o]&&(i=w(null,l,o),i&&(s[o].m=i,r.insertBefore(i,n)))},S=(e,t,n,l)=>{for(;t<=n;++t)(l=e[t])&&l.m.remove()},j=(e,t)=>e.$===t.$,M=(e,t)=>{const n=t.m=e.m,l=e.h,s=t.h,o=t.i;null===o?("slot"===t.$||b(e,t,!1),null!==l&&null!==s?((e,t,n,l)=>{let s,o=0,c=0,i=t.length-1,r=t[0],a=t[i],u=l.length-1,f=l[0],d=l[u];for(;o<=i&&c<=u;)null==r?r=t[++o]:null==a?a=t[--i]:null==f?f=l[++c]:null==d?d=l[--u]:j(r,f)?(M(r,f),r=t[++o],f=l[++c]):j(a,d)?(M(a,d),a=t[--i],d=l[--u]):j(r,d)?(M(r,d),e.insertBefore(r.m,a.m.nextSibling),r=t[++o],d=l[--u]):j(a,f)?(M(a,f),e.insertBefore(a.m,r.m),a=t[--i],f=l[++c]):(s=w(t&&t[c],n,c),f=l[++c],s&&r.m.parentNode.insertBefore(s,r.m));o>i?g(e,null==l[u+1]?null:l[u+1].m,n,l,c,u):c>u&&S(t,o,i)})(n,l,t,s):null!==s?(null!==e.i&&(n.textContent=""),g(n,null,t,s,0,s.length-1)):null!==l&&S(l,0,l.length-1)):e.i!==o&&(n.data=o)},k=e=>D(e).p,v=(e,t,n)=>{const l=k(e);return{emit:e=>C(l,t,{bubbles:!!(4&n),composed:!!(2&n),cancelable:!!(1&n),detail:e})}},C=(e,t,n)=>{const l=o.ce(t,n);return e.dispatchEvent(l),l},O=(e,t)=>{t&&!e.g&&t["s-p"]&&t["s-p"].push(new Promise((t=>e.g=t)))},P=(e,t)=>{if(e.t|=16,!(4&e.t))return O(e,e.S),ee((()=>x(e,t)));e.t|=512},x=(e,t)=>{const n=e.j;let l;return t&&(l=T(n,"componentWillLoad")),W(l,(()=>E(e,n,t)))},E=async(e,t,n)=>{const l=e.p,o=l["s-rc"];n&&(e=>{const t=e.M,n=e.p,l=t.t,o=((e,t)=>{let n=a(t),l=I.get(n);if(e=11===e.nodeType?e:s,l)if("string"==typeof l){let t,o=r.get(e=e.head||e);o||r.set(e,o=new Set),o.has(n)||(t=s.createElement("style"),t.innerHTML=l,e.insertBefore(t,e.querySelector("link")),o&&o.add(n))}else e.adoptedStyleSheets.includes(l)||(e.adoptedStyleSheets=[...e.adoptedStyleSheets,l]);return n})(n.shadowRoot?n.shadowRoot:n.getRootNode(),t);10&l&&(n["s-sc"]=o,n.classList.add(o+"-h"))})(e);L(e,t),o&&(o.map((e=>e())),l["s-rc"]=void 0);{const t=l["s-p"],n=()=>N(e);0===t.length?n():(Promise.all(t).then(n),e.t|=4,t.length=0)}},L=(n,l)=>{try{l=l.render(),n.t&=-17,n.t|=2,((n,l)=>{const s=n.p,o=n.M,c=n.k||h(null,null),i=(e=>e&&e.$===$)(l)?l:d(null,null,l);t=s.tagName,o.v&&(i.u=i.u||{},o.v.map((([e,t])=>i.u[t]=s[e]))),i.$=null,i.t|=4,n.k=i,i.m=c.m=s.shadowRoot||s,e=s["s-sc"],M(c,i)})(n,l)}catch(e){z(e,n.p)}return null},N=e=>{const t=e.p,n=e.S;T(e.j,"componentDidRender"),64&e.t||(e.t|=64,A(t),e.C(t),n||R()),e.g&&(e.g(),e.g=void 0),512&e.t&&Z((()=>P(e,!1))),e.t&=-517},R=()=>{A(s.documentElement),Z((()=>C(l,"appload",{detail:{namespace:"casino-engagement-suite-challenges-details"}})))},T=(e,t,n)=>{if(e&&e[t])try{return e[t](n)}catch(e){z(e)}},W=(e,t)=>e&&e.then?e.then(t):t(),A=e=>e.classList.add("hydrated"),F=(e,t,n)=>{if(t.O){e.watchers&&(t.P=e.watchers);const l=Object.entries(t.O),s=e.prototype;if(l.map((([e,[l]])=>{(31&l||2&n&&32&l)&&Object.defineProperty(s,e,{get(){return((e,t)=>D(this).L.get(t))(0,e)},set(n){((e,t,n,l)=>{const s=D(e),o=s.p,c=s.L.get(t),i=s.t,r=s.j;if(n=((e,t)=>null==e||f(e)?e:4&t?"false"!==e&&(""===e||!!e):2&t?parseFloat(e):1&t?e+"":e)(n,l.O[t][0]),(!(8&i)||void 0===c)&&n!==c&&(!Number.isNaN(c)||!Number.isNaN(n))&&(s.L.set(t,n),r)){if(l.P&&128&i){const e=l.P[t];e&&e.map((e=>{try{r[e](n,c,t)}catch(e){z(e,o)}}))}2==(18&i)&&P(s,!1)}})(this,e,n,t)},configurable:!0,enumerable:!0})})),1&n){const n=new Map;s.attributeChangedCallback=function(e,t,l){o.jmp((()=>{const t=n.get(e);if(this.hasOwnProperty(t))l=this[t],delete this[t];else if(s.hasOwnProperty(t)&&"number"==typeof this[t]&&this[t]==l)return;this[t]=(null!==l||"boolean"!=typeof this[t])&&l}))},e.observedAttributes=l.filter((([e,t])=>15&t[0])).map((([e,l])=>{const s=l[1]||e;return n.set(s,e),512&l[0]&&t.v.push([e,s]),s}))}}return e},U=(e,t={})=>{const n=[],c=t.exclude||[],r=l.customElements,u=s.head,f=u.querySelector("meta[charset]"),d=s.createElement("style"),h=[];let $,m=!0;Object.assign(o,t),o.l=new URL(t.resourcesUrl||"./",s.baseURI).href,e.map((e=>{e[1].map((t=>{const l={t:t[0],o:t[1],O:t[2],N:t[3]};l.O=t[2],l.v=[],l.P={};const s=l.o,u=class extends HTMLElement{constructor(e){super(e),V(e=this,l),1&l.t&&e.attachShadow({mode:"open"})}connectedCallback(){$&&(clearTimeout($),$=null),m?h.push(this):o.jmp((()=>(e=>{if(0==(1&o.t)){const t=D(e),n=t.M,l=()=>{};if(!(1&t.t)){t.t|=1;{let n=e;for(;n=n.parentNode||n.host;)if(n["s-p"]){O(t,t.S=n);break}}n.O&&Object.entries(n.O).map((([t,[n]])=>{if(31&n&&e.hasOwnProperty(t)){const n=e[t];delete e[t],e[t]=n}})),(async(e,t,n,l,s)=>{if(0==(32&t.t)){{if(t.t|=32,(s=G(n)).then){const e=()=>{};s=await s,e()}s.isProxied||(n.P=s.watchers,F(s,n,2),s.isProxied=!0);const e=()=>{};t.t|=8;try{new s(t)}catch(e){z(e)}t.t&=-9,t.t|=128,e()}if(s.style){let e=s.style;const t=a(n);if(!I.has(t)){const l=()=>{};((e,t,n)=>{let l=I.get(e);i&&n?(l=l||new CSSStyleSheet,l.replace(t)):l=t,I.set(e,l)})(t,e,!!(1&n.t)),l()}}}const o=t.S,c=()=>P(t,!0);o&&o["s-rc"]?o["s-rc"].push(c):c()})(0,t,n)}l()}})(this)))}disconnectedCallback(){o.jmp((()=>(()=>{0==(1&o.t)&&T(D(this).j,"disconnectedCallback")})()))}componentOnReady(){return D(this).R}};l.T=e[0],c.includes(s)||r.get(s)||(n.push(s),r.define(s,F(u,l,1)))}))})),d.innerHTML=n+"{visibility:hidden}.hydrated{visibility:inherit}",d.setAttribute("data-styles",""),u.insertBefore(d,f?f.nextSibling:u.firstChild),m=!1,h.length?h.map((e=>e.connectedCallback())):o.jmp((()=>$=setTimeout(R,30)))},q=new WeakMap,D=e=>q.get(e),H=(e,t)=>q.set(t.j=e,t),V=(e,t)=>{const n={t:0,p:e,M:t,L:new Map};return n.R=new Promise((e=>n.C=e)),e["s-p"]=[],e["s-rc"]=[],q.set(e,n)},_=(e,t)=>t in e,z=(e,t)=>(0,console.error)(e,t),B=new Map,G=e=>{const t=e.o.replace(/-/g,"_"),n=e.T,l=B.get(n);return l?l[t]:import(`./${n}.entry.js`).then((e=>(B.set(n,e),e[t])),z)},I=new Map,J=[],K=[],Q=(e,t)=>l=>{e.push(l),n||(n=!0,t&&4&o.t?Z(Y):o.raf(Y))},X=e=>{for(let t=0;t<e.length;t++)try{e[t](performance.now())}catch(e){z(e)}e.length=0},Y=()=>{X(J),X(K),(n=J.length>0)&&o.raf(Y)},Z=e=>c().then(e),ee=Q(K,!0);export{U as b,v as c,k as g,d as h,c as p,H as r}

package/dist/casino-engagement-suite-challenges-details/p-9159f1ae.entry.js

@@ -1 +0,0 @@
-import{r as e,c as t,h as l,g as s}from"./p-8db66ba7.js";const a=["en"],n={en:{challenges:"Challenges",join:"Join",unjoin:"Unjoin",details:"Challenge Details",tc:"Terms & Conditions",level:"Level",place:"Place",bet:"bet",bets:"bets",win:"Win"}},i=(e,t)=>{const l=t;return n[void 0!==l&&a.includes(l)?l:"en"][e]};var o,r;!function(e){e[e.Closed=0]="Closed",e[e.InProgress=1]="InProgress",e[e.Fillup=2]="Fillup",e[e.Completed=3]="Completed"}(o||(o={})),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"}(r||(r={}));const g=class{constructor(l){e(this,l),this.close=t(this,"close",7),this.back=t(this,"back",7),this.clientStyling="",this.clientStylingUrl="",this.language="en",this.gameSlug="",this.device="Mobile",this.limitStylingAppends=!1,this.timer="",this.showDetails=!1,this.isExpiredChallenge=!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.handleBackClick=()=>{this.back.emit()}}challengePropHandler(e){!this.interval&&e&&(this.updateTimer(),this.startCountdown()),this.interval&&!e&&clearInterval(this.interval)}componentWillLoad(){this.challengePropHandler(this.challenge)}componentDidRender(){!this.limitStylingAppends&&this.host&&(this.clientStyling&&this.setClientStyling(),this.clientStylingUrl&&this.setClientStylingURL(),this.limitStylingAppends=!0)}disconnectedCallback(){this.interval&&clearInterval(this.interval)}getActionsTemplate(){return l("header",{class:"ChallengeActions"},l("button",{class:"ChallengeIconButton",onClick:this.handleBackClick},l("img",{src:"https://static.everymatrix.com/gic/img/engagement-suite/back.svg",alt:"back"})),"Mobile"!==this.device&&l("div",{class:"ChallengePopupName"},i("challenges",this.language)),l("button",{class:"ChallengeIconButton",onClick:this.handleCloseClick},l("img",{src:"https://static.everymatrix.com/gic/img/engagement-suite/close.svg",alt:"close"})))}getChallengeHeader(){const e=this.challenge.Status===r.InProgress;return l("div",{class:"ChallengeDetailsHeader"},l("span",{class:"ChallengeName"},this.challenge.ChallengePresentation.PresentationName),l("button",{class:`ChallengeJoinButton ${e?"Joined":""}\n          ${this.isExpiredChallenge?"Disabled":""}`},i(e?"unjoin":"join",this.language)))}getChallengeCountdown(){return l("div",{class:"ChallengeCountdown "+(this.isExpiredChallenge?"Expired":"")},this.isExpiredChallenge?"Expired":this.timer)}getChallengeDetails(){const e=this.challenge.ChallengePresentation.Description,t=this.challenge.ChallengePresentation.Url,s=this.challenge.Games;return l("div",{class:"CollapseDetails "+(this.showDetails?"ShowDetails":"")},e&&l("span",{class:"ChallengeDescription"},e),t&&l("div",{class:"TC"},l("a",{href:t,target:"_blank"},i("tc",this.language))),(null==s?void 0:s.length)&&l("div",{class:"ChallengeGames"},s.map((e=>l("div",{class:"Game"},l("img",{src:e.GameIcon,alt:e.GameName,onClick:()=>this.onGameClick(e.GameSlug),class:e.GameSlug===this.gameSlug?"Disabled":""}))))))}onGameClick(e){window.postMessage({type:"GameClick",slug:e})}startCountdown(){this.interval=setInterval((()=>{this.updateTimer()}),1e3)}updateTimer(){const e=new Date(this.challenge.ExpirationTime).getTime()-(new Date).getTime();if(e<1)return clearInterval(this.interval),this.timer="",void(this.isExpiredChallenge=!0);const{days:t,hours:l,minutes:s,seconds:a}={days:String(Math.floor(e/864e5)).padStart(2,"0"),hours:String(Math.floor(e%864e5/36e5)).padStart(2,"0"),minutes:String(Math.floor(e%36e5/6e4)).padStart(2,"0"),seconds:String(Math.floor(e%6e4/1e3)).padStart(2,"0")};this.timer="00"===t?`${l}h:${s}m:${a}s`:`${t}d:${l}h:${s}m`}getLevelTarget(e){let t=`${i("place",this.language)} ${e.TargetTurnover}`;return 1===e.LevelTargetType?t+=` ${i("bet",this.language)}`:2===e.LevelTargetType&&(t+=` ${i("bets",this.language)} X ${e.TargetBetCount}`),l("span",{class:"ChallengeLevelTarget"},t)}getChallengeLevels(){const e=this.challenge.Status===r.Started&&this.challenge.LevelProgresses[0].ProgressPercentage>0,t=t=>"ChallengeLevelCard "+(1!==t.ProgressStatus||this.isExpiredChallenge||e?"":"InProgress");return l("div",{class:"ChallengeLevels"},this.challenge.LevelProgresses.map(((s,a)=>l("div",{class:t(s)},l("casino-engagement-suite-progress-bar",{class:this.device,value:s.ProgressPercentage,"hide-percent":0===s.ProgressPercentage||100===s.ProgressPercentage,disabled:this.isExpiredChallenge||e},l("span",{slot:"Title",class:"ChallengeLevelTitle"},l("span",null,"Level ",a+1,": "),this.getLevelTarget(s))),l("div",{class:"ChallengeRewardMessage"},l("img",{src:"https://static.everymatrix.com/gic/img/engagement-suite/reward.svg",alt:"win"}),l("span",null,i("win",this.language),": "),l("span",{class:"CustomRewardMessage"},s.CustomRewardMessage))))))}getToggleButton(){return l("div",{class:"ChallengeCollapseButton",onClick:()=>this.showDetails=!this.showDetails},l("span",{class:"Toggle "+(this.showDetails?"Closed":"Open")}),l("span",null,i("details",this.language)))}render(){return l("div",{class:`ChallengeDetailsPopup ${this.device}`},this.getActionsTemplate(),l("div",{class:"ChallengeDetails"},this.getChallengeHeader(),this.getChallengeCountdown(),this.getToggleButton(),this.getChallengeDetails(),this.getChallengeLevels()))}get host(){return s(this)}static get watchers(){return{challenge:["challengePropHandler"]}}};g.style='@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700;900&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}.ChallengeDetailsPopup{display:flex;height:100%;background-color:var(--emw--color-background, #1E1638);border-radius:8px;overflow:hidden;flex-direction:column;position:relative}.ChallengeActions{display:flex;justify-content:space-between;align-items:center;padding:12px 8px 8px}.ChallengeActions .ChallengeIconButton{width:16px;height:16px;cursor:pointer}.ChallengeActions .ChallengePopupName{color:var(--emw--color-gray-100, #BBB9C3);font-size:16px;font-weight:500;line-height:16px}.ChallengeDetails{padding:0px 19px 10px;overflow-y:auto;-ms-overflow-style:none;scrollbar-width:none}.ChallengeDetails::-webkit-scrollbar{display:none}.ChallengeDetailsHeader{display:flex;justify-content:space-between;gap:12px}.ChallengeDetailsHeader .ChallengeName{font-family:"Montserrat", sans-serif;font-size:var(--emw--font-size-medium, 18px);font-weight:var(--emw--font-weight-bold, 700);line-height:22px;color:var(--emfe-w-color-white, #FFF);word-break:break-all}.ChallengeJoinButton.Joined::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}.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}.ChallengeCountdown{font-weight:var(--emw--font-weight-normal, 400);font-size:var(--emw--font-size-x-small, 12px);line-height:12px;margin:12px 0 24px;color:var(--emw--color-gray-150, #BBB9C3)}.ChallengeCountdown.Expired{font-weight:var(--emw--font-weight-normal, 700);color:var(--emfe-w-color-white, #FFF)}.ChallengeCollapseButton{margin-bottom:14px;display:flex;flex-direction:row;align-items:center;font-size:var(--emw--font-size-x-small, 12px);line-height:12px;color:var(--emw--color-primary-variant, #666178);cursor:pointer}.ChallengeCollapseButton .Toggle{width:16px;height:16px;display:block;margin-right:4px}.ChallengeCollapseButton .Closed{background:url("https://static.everymatrix.com/gic/img/engagement-suite/eye-closed.svg") no-repeat center/contain}.ChallengeCollapseButton .Open{background:url("https://static.everymatrix.com/gic/img/engagement-suite/eye-open.svg") no-repeat center/contain}.CollapseDetails{display:none;font-size:var(--emw--font-size-small, 14px);line-height:17px;font-weight:var(--emw--font-weight-normal, 400)}.CollapseDetails .ChallengeDescription{color:var(--emfe-w-color-white, #FFF);margin-bottom:12px}.CollapseDetails .TC{margin:12px 0 16px}.CollapseDetails .TC a{color:var(--emw--color-secondary, #59D1FF);text-underline-offset:3px}.CollapseDetails .ChallengeGames{width:100%;overflow-y:auto;display:flex;gap:4px}.CollapseDetails .ChallengeGames::-webkit-scrollbar{height:2px;background:none}.CollapseDetails .ChallengeGames::-webkit-scrollbar-thumb{border-radius:4px;background-color:var(--emw--color-background, #666178)}.CollapseDetails .ChallengeGames .Game img{width:96px;height:50px;border-radius:2px;cursor:pointer}.ShowDetails{display:block}.ChallengeLevels{display:flex;flex-direction:column;gap:16px;margin-top:24px;color:var(--emw--color-primary, #8F8B9C);font-size:var(--emw--font-size-small, 12px);font-weight:var(--emw--font-weight-normal, 400);line-height:12px}.ChallengeLevels .ChallengeLevelCard{border:1px solid var(--emw--button-border-color, #403956);padding:16px;border-radius:8px}.ChallengeLevels .ChallengeLevelCard .ChallengeLevelTitle{margin-bottom:2px}.ChallengeLevels .ChallengeLevelCard .ChallengeRewardMessage{margin-top:10px;line-height:15px;display:flex;flex-direction:row;align-items:center;gap:4px}.ChallengeLevels .ChallengeLevelCard .ChallengeRewardMessage .CustomRewardMessage{font-weight:var(--emw--font-weight-semibold, 600);word-break:break-all}.ChallengeLevels .InProgress{position:relative;border:none}.ChallengeLevels .InProgress .ChallengeLevelTarget,.ChallengeLevels .InProgress .CustomRewardMessage{color:var(--emfe-w-color-white, #FFF)}.ChallengeLevels .InProgress::before{content:"";position:absolute;inset:0;border-radius:8px;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}.ChallengeDetailsPopup.Tablet .ChallengeActions,.ChallengeDetailsPopup.Desktop .ChallengeActions{padding-top:16px}.ChallengeDetailsPopup.Tablet .ChallengeIconButton,.ChallengeDetailsPopup.Desktop .ChallengeIconButton{width:24px;height:24px}.ChallengeDetailsPopup.Tablet .ChallengeDetails,.ChallengeDetailsPopup.Desktop .ChallengeDetails{padding:20px 24px}.ChallengeDetailsPopup.Tablet .ChallengeName,.ChallengeDetailsPopup.Desktop .ChallengeName{line-height:27px;font-size:22px}.ChallengeDetailsPopup.Tablet .ChallengeJoinButton,.ChallengeDetailsPopup.Desktop .ChallengeJoinButton{min-width:100px;height:36px;font-size:16px}.ChallengeDetailsPopup.Tablet .ChallengeCountdown,.ChallengeDetailsPopup.Tablet .ChallengeLevels,.ChallengeDetailsPopup.Desktop .ChallengeCountdown,.ChallengeDetailsPopup.Desktop .ChallengeLevels{font-size:var(--emw--font-size-small, 14px);line-height:14px}.ChallengeDetailsPopup.Tablet .ChallengeCollapseButton,.ChallengeDetailsPopup.Desktop .ChallengeCollapseButton{margin-bottom:12px}.ChallengeDetailsPopup.Tablet .ChallengeLevels .ChallengeLevelTitle,.ChallengeDetailsPopup.Desktop .ChallengeLevels .ChallengeLevelTitle{margin-bottom:4px}.ChallengeDetailsPopup.Tablet .ChallengeLevels .ChallengeRewardMessage,.ChallengeDetailsPopup.Desktop .ChallengeLevels .ChallengeRewardMessage{margin-top:12px;line-height:17px}';const h=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 l("div",{class:this.getProgressBarClasses(),part:"ProgressBar"},l("div",{class:"ProgressBarInfo",part:"ProgressBarInfo"},l("slot",{name:"Title"},l("div",null)),l("slot",{name:"Percent"},l("div",{class:"ProgressBarPercent",part:"ProgressBarPercent"},this.value,"%"))),l("div",{class:"ProgressBarBackground",part:"ProgressBarBackground"},l("div",{class:"ProgressBarLine",part:"ProgressBarLine",style:{width:this.value+"%"}})))}get host(){return s(this)}};h.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{g as casino_engagement_suite_challenges_details,h as casino_engagement_suite_progress_bar}