@everymatrix/casino-engagement-suite-modal-container 1.36.0 → 1.37.0

package/dist/components/casino-engagement-suite-modal-container.js

@@ -17,10 +17,15 @@ const TRANSLATIONS = {
     join: 'Unjoin',
     unJoin: 'Unjoin',
     continue: 'Continue',
+    okContinue: 'Ok, continue',
     won: 'You won',
+    supportInfo: 'However, some rewards cannot be issued. Please, contact support.',
+    noReward: 'Reward cannot be issued',
+    contactSupport: 'Please contact support',
     noChallenges: 'No Challenges yet',
     tryOtherGames: 'Try winning Challenges as rewards or launching other booster games',
-    tooltip: 'Competition where your real money bets contribute towards the level progress to achieve the level reward'
+    tooltip: 'Competition where your real money bets contribute towards the level progress to achieve the level reward',
+    jackpotWin: 'Total Jackpot Win!'
   }
 };
 const translate = (key, customLang) => {
@@ -28,7 +33,12 @@ const translate = (key, customLang) => {
   return TRANSLATIONS[lang !== undefined && SUPPORTED_LANGUAGES.includes(lang) ? lang : DEFAULT_LANGUAGE][key];
 };
 
-const casinoEngagementSuiteModalContainerCss = ":host{display:block}.ModalFooterButton,.ModalFooterButtonOutlined{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:140px;height:36px;font-size:14px;font-weight:var(--emw--font-weight-bold, 700);position:relative;font-family:\"Montserrat\", sans-serif;padding:0 16px;box-sizing:border-box;margin:auto;border:none;cursor:pointer}.ModalFooterButtonOutlined{background:linear-gradient(var(--emw--color-background, #1E1638) 0 0) padding-box, linear-gradient(98.25deg, #FF9400 22.48%, #FEF746 131.02%, #FFE24A 131.9%) border-box;border:2px solid transparent}.GradientText{background-image:linear-gradient(98.25deg, #FF9400 22.48%, #FEF746 131.02%, #FFE24A 131.9%);color:transparent;background-clip:text}.ManyActions{display:flex;width:100%;flex-direction:column;align-items:stretch}.ManyActions .ModalFooterButton,.ManyActions .ModalFooterButtonOutlined{width:280px}.ManyActions button:first-child{margin-bottom:16px}.ModalReward{font-weight:var(--emw--font-weight-semibold, 600);color:var(--emw--color-typography, #FFFFFF)}.ModalContainer.Mobile .ModalFooterButton{min-width:140px;height:32px}.ModalContainer.Mobile .ManyActions .ModalFooterButton,.ModalContainer.Mobile .ManyActions .ModalFooterButtonOutlined{width:100%;height:32px}.ModalContainer.Mobile .ManyActions button:first-child{margin-bottom:8px}.LeftAlign{text-align:left;line-height:1.2}";
+function formatBalance(amount, currency) {
+  return `${currency} ${new Intl.NumberFormat('en', { minimumFractionDigits: 2, maximumFractionDigits: 2 })
+    .format(amount)}`;
+}
+
+const casinoEngagementSuiteModalContainerCss = ":host{display:block;font-family:inherit}.ModalFooterButton,.ModalFooterButtonOutlined{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:140px;height:36px;font-size:14px;font-weight:var(--emw--font-weight-bold, 700);position:relative;font-family:\"Montserrat\", sans-serif;padding:0 16px;box-sizing:border-box;margin:auto;border:none;cursor:pointer}.ModalFooterButtonOutlined{background:linear-gradient(var(--emw--color-background, #1E1638) 0 0) padding-box, linear-gradient(98.25deg, #FF9400 22.48%, #FEF746 131.02%, #FFE24A 131.9%) border-box;border:2px solid transparent}.GradientText{background-image:linear-gradient(98.25deg, #FF9400 22.48%, #FEF746 131.02%, #FFE24A 131.9%);color:transparent;background-clip:text}.ManyActions{display:flex;width:100%;flex-direction:column;align-items:stretch}.ManyActions .ModalFooterButton,.ManyActions .ModalFooterButtonOutlined{width:280px}.ManyActions button:first-child{margin-bottom:16px}.Disabled{opacity:0.5;pointer-events:none;cursor:auto}.ModalReward{font-weight:var(--emw--font-weight-semibold, 600);color:var(--emw--color-typography, #FFFFFF)}.JackpotWinText{margin:0;font-weight:var(--emw--font-weight-bold, 600);font-size:16px;line-height:20px;color:var(--emw--color-typography, #FFF)}.JackpotWinAmount{margin-top:8px;box-shadow:-0.41px 0.41px 0px 0px #00000026, -0.41px 0.41px 2px 0px #00000080;background:linear-gradient(180deg, #FFB801 15.86%, #FEF746 31.36%, #FBFFE0 36.86%, #FFFA60 47.86%, #FF9400 87.36%);-webkit-text-fill-color:transparent;-webkit-background-clip:text;font-weight:900;font-size:16px;line-height:16px}.SupportInfo{margin-top:20px}.ModalContainer.Mobile .ModalFooterButton{min-width:140px;height:32px}.ModalContainer.Mobile .ManyActions .ModalFooterButton,.ModalContainer.Mobile .ManyActions .ModalFooterButtonOutlined{width:100%;height:32px}.ModalContainer.Mobile .ManyActions button:first-child{margin-bottom:8px}.ModalContainer.Mobile .JackpotWinText{font-size:14px;line-height:16px}.ModalContainer.Mobile .JackpotWinAmount{font-size:14px;line-height:14px}.LeftAlign{text-align:left;line-height:1.2}";
 
 const CasinoEngagementSuiteModalContainer$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -51,16 +61,18 @@ const CasinoEngagementSuiteModalContainer$1 = /*@__PURE__*/ proxyCustomElement(c
     this.device = 'Mobile';
     this.limitStylingAppends = false;
     this.openModals = [];
-    this.rewards = [];
+    this.rewardMessage = '';
+    this.hasError = false;
     this.confirmationData = null;
+    this.winAmount = { amount: 0, currency: '' };
     this.handleCloseClick = (e) => {
-      const type = +e.currentTarget.getAttribute('data-type');
+      const type = e.currentTarget.getAttribute('data-type');
       this.closeModal.emit(type);
     };
     this.handleChallengeAttendance = () => {
       window.postMessage({
-        type: 'ChallengeAttendance',
-        confirmationData: this.confirmationData,
+        type: 'ChallengeJoinRequest',
+        data: this.confirmationData,
       });
     };
     this.setClientStyling = () => {
@@ -86,11 +98,20 @@ const CasinoEngagementSuiteModalContainer$1 = /*@__PURE__*/ proxyCustomElement(c
     };
   }
   openModalHandler(event) {
-    const { modalType, rewards, confirmationData } = event.detail;
-    this.openModals = [...this.openModals, modalType];
-    if (rewards === null || rewards === void 0 ? void 0 : rewards.length) {
-      this.rewards = [...rewards];
+    const { modalType, rewardMessage, hasError, confirmationData, winAmount } = event.detail;
+    if (winAmount) {
+      // If jackpot win modal is already opened
+      // add won amount to the previous amount
+      if (this.isModalOpen('JACKPOT_REWARD_MODAL')) {
+        this.winAmount = { amount: this.winAmount.amount + winAmount.amount, currency: winAmount.currency };
+      }
+      else {
+        this.winAmount = winAmount;
+      }
     }
+    this.openModals = [...this.openModals, modalType];
+    this.rewardMessage = rewardMessage;
+    this.hasError = hasError;
     if (confirmationData) {
       this.confirmationData = confirmationData;
     }
@@ -108,16 +129,16 @@ const CasinoEngagementSuiteModalContainer$1 = /*@__PURE__*/ proxyCustomElement(c
     }
   }
   render() {
-    const { prevId } = this.confirmationData || {};
-    return (h("div", { class: `ModalContainer ${this.device}` }, h("casino-engagement-suite-modal", { isOpen: this.isModalOpen("REWARD_MODAL"), header: "Congratulations!", icon: "https://static.everymatrix.com/gic/img/engagement-suite/close.svg", contentIcon: "https://static.everymatrix.com/gic/img/engagement-suite/cup-reward.svg", modalType: "REWARD_MODAL", device: this.device }, h("div", { slot: "body" }, h("p", null, translate('won', this.language), " ", h("span", { class: 'ModalReward' }, this.rewards))), h("div", { slot: "footer" }, h("button", { class: 'ModalFooterButton', onClick: this.handleCloseClick, "data-type": 'REWARD_MODAL' }, translate('continue', this.language)))), h("casino-engagement-suite-modal", { isOpen: this.isModalOpen("TARGET_MODAL"), header: prevId ?
+    const { ProgressToActivate } = this.confirmationData || {};
+    return (h("div", { class: `ModalContainer ${this.device}` }, h("casino-engagement-suite-modal", { isOpen: this.isModalOpen("REWARD_MODAL"), header: "Congratulations!", contentIcon: "https://static.everymatrix.com/gic/img/engagement-suite/cup-reward.svg", modalType: "REWARD_MODAL", "show-animation": true, device: this.device }, h("div", { slot: "body" }, h("p", null, translate('won', this.language), " ", h("span", { class: 'ModalReward' }, this.rewardMessage)), this.hasError && (h("p", { class: "SupportInfo" }, translate('supportInfo', this.language)))), h("div", { slot: "footer" }, h("button", { class: 'ModalFooterButton', onClick: this.handleCloseClick, "data-type": 'REWARD_MODAL' }, translate('continue', this.language)))), h("casino-engagement-suite-modal", { isOpen: this.isModalOpen("JACKPOT_REWARD_MODAL"), header: "Congratulations!", contentIcon: "https://static.everymatrix.com/gic/img/engagement-suite/cup-reward.svg", "show-animation": true, modalType: "JACKPOT_REWARD_MODAL", device: this.device }, h("div", { slot: "body" }, h("div", { class: "JackpotWinText" }, translate('jackpotWin', this.language)), h("div", { class: "JackpotWinAmount" }, formatBalance(this.winAmount.amount, this.winAmount.currency))), h("div", { slot: "footer" }, h("button", { class: 'ModalFooterButton', onClick: this.handleCloseClick, "data-type": 'JACKPOT_REWARD_MODAL' }, translate('continue', this.language)))), h("casino-engagement-suite-modal", { isOpen: this.isModalOpen("TARGET_MODAL"), header: ProgressToActivate ?
         translate('joinHeader', this.language) :
-        translate('unJoinHeader', this.language), icon: "https://static.everymatrix.com/gic/img/engagement-suite/close.svg", modalType: "TARGET_MODAL", device: this.device }, h("div", { slot: "body" }, h("p", { class: 'LeftAlign' }, translate('desc', this.language)), h("p", { class: 'LeftAlign' }, prevId ?
+        translate('unJoinHeader', this.language), modalType: "TARGET_MODAL", device: this.device, isLoading: this.isJoiningToChallenge }, h("div", { slot: "body" }, h("p", { class: 'LeftAlign' }, translate('desc', this.language)), h("p", { class: 'LeftAlign' }, ProgressToActivate ?
       translate('joinQuestion', this.language) :
-      translate('unJoinQuestion', this.language))), h("div", { slot: "footer", class: 'ManyActions' }, h("button", { class: 'ModalFooterButton', onClick: this.handleChallengeAttendance }, prevId ?
+      translate('unJoinQuestion', this.language))), h("div", { slot: "footer", class: 'ManyActions' }, h("button", { class: `ModalFooterButton ${this.isJoiningToChallenge ? 'Disabled' : ''}`, onClick: this.handleChallengeAttendance }, ProgressToActivate ?
       translate('joinConfirm', this.language) :
-      translate('unJoinConfirm', this.language)), h("button", { class: 'ModalFooterButtonOutlined', onClick: this.handleCloseClick, "data-type": 'TARGET_MODAL' }, h("div", { class: 'GradientText' }, prevId ?
+      translate('unJoinConfirm', this.language)), h("button", { class: `ModalFooterButtonOutlined ${this.isJoiningToChallenge ? 'Disabled' : ''}`, onClick: this.handleCloseClick, "data-type": 'TARGET_MODAL' }, h("div", { class: 'GradientText' }, ProgressToActivate ?
       translate('joinReject', this.language) :
-      translate('unJoinReject', this.language)))))));
+      translate('unJoinReject', this.language))))), h("casino-engagement-suite-modal", { isOpen: this.isModalOpen("SUPPORT_MODAL"), header: translate('noReward', this.language), contentIcon: "https://static.everymatrix.com/gic/img/engagement-suite/alert.svg", modalType: "SUPPORT_MODAL", device: this.device }, h("div", { slot: "body" }, h("span", null, translate('contactSupport', this.language))), h("div", { slot: "footer" }, h("button", { class: 'ModalFooterButton', onClick: this.handleCloseClick, "data-type": 'SUPPORT_MODAL' }, translate('okContinue', this.language))))));
   }
   get host() { return this; }
   static get style() { return casinoEngagementSuiteModalContainerCss; }
@@ -125,11 +146,14 @@ const CasinoEngagementSuiteModalContainer$1 = /*@__PURE__*/ proxyCustomElement(c
     "clientStyling": [513, "client-styling"],
     "clientStylingUrl": [513, "client-styling-url"],
     "language": [1],
+    "isJoiningToChallenge": [1028, "is-joining-to-challenge"],
     "device": [1],
     "limitStylingAppends": [32],
     "openModals": [32],
-    "rewards": [32],
-    "confirmationData": [32]
+    "rewardMessage": [32],
+    "hasError": [32],
+    "confirmationData": [32],
+    "winAmount": [32]
   }, [[16, "openModal", "openModalHandler"], [16, "closeModal", "closeModalHandler"]]]);
 function defineCustomElement$1() {
   if (typeof customElements === "undefined") {

package/dist/components/casino-engagement-suite-modal2.js

@@ -1,11 +1,6 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
 
-const MODAL_TYPES = {
-  REWARD_MODAL: 'REWARD_MODAL',
-  TARGET_MODAL: 'TARGET_MODAL'
-};
-
-const casinoEngagementSuiteModalCss = ":host{display:block}*{box-sizing:border-box;margin:0;padding:0}button{border:none;background:none;cursor:pointer}button:focus{outline:none}.ModalOverlay{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.5);justify-content:center;align-items:center}.ModalOverlay.Open{display:flex}.IconCloseContainer{width:100%;display:flex;justify-content:end}.ModalContent{display:flex;flex-direction:column;align-items:center;font-family:\"Montserrat\", sans-serif;position:relative;color:var(--emw--color-typography, #FFFFFF);background-color:var(--emw--color-background, #1E1638);padding:12px;border-radius:8px;width:450px;max-width:100%;text-align:center}.GradientBorder::before{content:\"\";position:absolute;top:-1px;left:-1px;right:-1px;bottom:-1px;border-radius:9px;background:linear-gradient(143.2deg, #FF9401 -0.41%, #FFD32D 45.61%, #FF9401 82.77%);z-index:-1}.ModalHeader{font-weight:var(--emw--font-weight-semibold, 600);font-size:20px;margin-top:12px;padding:0 16px}.ModalIcon{width:44px;height:44px;border-radius:50%;background-size:cover;background-position:center;background-image:url(\"https://static.everymatrix.com/gic/img/engagement-suite/bar/leaderboard.svg\");margin-top:12px}.ModalBody{margin-top:20px;font-size:16px;font-family:\"Inter\", sans-serif;font-weight:var(--emw--font-weight-normal, 400);color:var(--emw--color-gray-100, #BBB9C3);padding:0 16px}.ModalFooter{margin-top:40px;margin-bottom:28px;padding:0 16px;width:100%}.ModalOverlay.Mobile .ModalBody{font-size:14px}.ModalOverlay.Mobile .ModalContent{width:318px}.ModalOverlay.Mobile .ModalHeader h1{font-size:20px}";
+const casinoEngagementSuiteModalCss = ":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}.ModalOverlay{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.5);justify-content:center;align-items:center}.ModalOverlay.Open{display:flex}.IconCloseContainer{width:100%;display:flex;justify-content:end}.ModalContent{display:flex;flex-direction:column;align-items:center;font-family:\"Montserrat\", sans-serif;position:relative;color:var(--emw--color-typography, #FFFFFF);background-color:var(--emw--color-background, #1E1638);padding:12px;border-radius:8px;width:450px;max-width:100%;text-align:center}.GradientBorder::before{content:\"\";position:absolute;top:-1px;left:-1px;right:-1px;bottom:-1px;border-radius:9px;background:linear-gradient(143.2deg, #FF9401 -0.41%, #FFD32D 45.61%, #FF9401 82.77%);z-index:-1}.ModalHeader h1{font-weight:var(--emw--font-weight-semibold, 600);font-size:20px;margin-top:12px;padding:0 16px}.ModalIcon{width:44px;height:44px;border-radius:50%;background-size:cover;margin-top:12px}.ModalBody{margin-top:20px;font-size:16px;font-family:\"Inter\", sans-serif;font-weight:var(--emw--font-weight-normal, 400);color:var(--emw--color-gray-100, #BBB9C3);padding:0 16px}.ModalFooter{margin-top:40px;margin-bottom:28px;padding:0 16px;width:100%}@keyframes rotate{100%{transform:rotate(1turn)}}.ModalOverlay .ModalWinAnimation{display:none}.ModalOverlay.ShowAnimation .ModalWinAnimation{display:block;position:absolute;width:100%;height:100%;inset:0;background:center/550px url(https://static.everymatrix.com/gic/img/engagement-suite/light.svg) no-repeat, center/550px url(https://static.everymatrix.com/gic/img/engagement-suite/win.svg) no-repeat;animation:6s rotate linear infinite}.ModalOverlay.Mobile .ModalBody{font-size:14px}.ModalOverlay.Mobile .ModalContent{width:318px}.ModalOverlay.Mobile .ModalHeader h1{font-size:20px}.ModalOverlay.Mobile.ShowAnimation .ModalWinAnimation{background-size:400px}";
 
 const CasinoEngagementSuiteModal = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -22,8 +17,14 @@ const CasinoEngagementSuiteModal = /*@__PURE__*/ proxyCustomElement(class extend
     */
     this.clientStylingUrl = '';
     this.device = 'Mobile';
+    /**
+     * Show win animation
+     */
+    this.showAnimation = false;
     this.limitStylingAppends = false;
     this.handleCloseClick = () => {
+      if (this.isLoading)
+        return;
       this.closeModal.emit(this.modalType);
     };
     this.setClientStyling = () => {
@@ -55,9 +56,9 @@ const CasinoEngagementSuiteModal = /*@__PURE__*/ proxyCustomElement(class extend
     }
   }
   render() {
-    return (h("div", { class: `ModalOverlay ${this.isOpen && 'Open'} ${this.device}` }, h("div", { class: "ModalContent GradientBorder" }, h("div", { class: 'IconCloseContainer' }, h("button", { class: "IconCloseButton", onClick: this.handleCloseClick }, h("img", { src: this.icon, alt: "\u0421lose modal" }))), this.contentIcon ? (h("div", { class: "ModalIcon", style: {
+    return (h("div", { class: `ModalOverlay ${this.isOpen && 'Open'} ${this.device} ${this.showAnimation && 'ShowAnimation'}` }, h("div", { class: "ModalWinAnimation" }), h("div", { class: "ModalContent GradientBorder" }, h("div", { class: 'IconCloseContainer' }, h("button", { class: "IconCloseButton", onClick: this.handleCloseClick }, h("img", { src: "https://static.everymatrix.com/gic/img/engagement-suite/close.svg", alt: "\u0421lose modal" }))), this.contentIcon ? (h("div", { class: "ModalIcon", style: {
         background: `url(${this.contentIcon}) no-repeat center, linear-gradient(98.25deg, #FF9400 22.48%, #FEF746 131.02%, #FFE24A 131.9%)`
-      } })) : this.modalType === MODAL_TYPES.REWARD_MODAL ? (h("div", { class: "ModalIcon" })) : null, h("div", { class: "ModalHeader" }, h("h1", null, this.header)), h("div", { class: "ModalBody" }, h("slot", { name: "body" })), h("div", { class: "ModalFooter" }, h("slot", { name: "footer" })))));
+      } })) : null, h("div", { class: "ModalHeader" }, h("h1", null, this.header)), h("div", { class: "ModalBody" }, h("slot", { name: "body" })), h("div", { class: "ModalFooter" }, h("slot", { name: "footer" })))));
   }
   get host() { return this; }
   static get style() { return casinoEngagementSuiteModalCss; }
@@ -65,11 +66,12 @@ const CasinoEngagementSuiteModal = /*@__PURE__*/ proxyCustomElement(class extend
     "clientStyling": [513, "client-styling"],
     "clientStylingUrl": [513, "client-styling-url"],
     "isOpen": [4, "is-open"],
+    "isLoading": [1028, "is-loading"],
     "header": [1],
-    "icon": [1],
     "contentIcon": [1, "content-icon"],
     "modalType": [1, "modal-type"],
     "device": [1],
+    "showAnimation": [4, "show-animation"],
     "limitStylingAppends": [32]
   }]);
 function defineCustomElement() {

package/dist/esm/casino-engagement-suite-modal-container.js

@@ -13,5 +13,5 @@ const patchBrowser = () => {
 };
 
 patchBrowser().then(options => {
-  return bootstrapLazy([["casino-engagement-suite-modal",[[1,"casino-engagement-suite-modal",{"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"isOpen":[4,"is-open"],"header":[1],"icon":[1],"contentIcon":[1,"content-icon"],"modalType":[1,"modal-type"],"device":[1],"limitStylingAppends":[32]}]]],["casino-engagement-suite-modal-container",[[1,"casino-engagement-suite-modal-container",{"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"language":[1],"device":[1],"limitStylingAppends":[32],"openModals":[32],"rewards":[32],"confirmationData":[32]},[[16,"openModal","openModalHandler"],[16,"closeModal","closeModalHandler"]]]]]], options);
+  return bootstrapLazy([["casino-engagement-suite-modal_2",[[1,"casino-engagement-suite-modal-container",{"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"language":[1],"isJoiningToChallenge":[1028,"is-joining-to-challenge"],"device":[1],"limitStylingAppends":[32],"openModals":[32],"rewardMessage":[32],"hasError":[32],"confirmationData":[32],"winAmount":[32]},[[16,"openModal","openModalHandler"],[16,"closeModal","closeModalHandler"]]],[1,"casino-engagement-suite-modal",{"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"isOpen":[4,"is-open"],"isLoading":[1028,"is-loading"],"header":[1],"contentIcon":[1,"content-icon"],"modalType":[1,"modal-type"],"device":[1],"showAnimation":[4,"show-animation"],"limitStylingAppends":[32]}]]]], options);
 });

package/dist/esm/casino-engagement-suite-modal_2.entry.js

@@ -0,0 +1,206 @@
+import { r as registerInstance, c as createEvent, h, g as getElement } from './index-89c6c4a4.js';
+
+const casinoEngagementSuiteModalCss = ":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}.ModalOverlay{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.5);justify-content:center;align-items:center}.ModalOverlay.Open{display:flex}.IconCloseContainer{width:100%;display:flex;justify-content:end}.ModalContent{display:flex;flex-direction:column;align-items:center;font-family:\"Montserrat\", sans-serif;position:relative;color:var(--emw--color-typography, #FFFFFF);background-color:var(--emw--color-background, #1E1638);padding:12px;border-radius:8px;width:450px;max-width:100%;text-align:center}.GradientBorder::before{content:\"\";position:absolute;top:-1px;left:-1px;right:-1px;bottom:-1px;border-radius:9px;background:linear-gradient(143.2deg, #FF9401 -0.41%, #FFD32D 45.61%, #FF9401 82.77%);z-index:-1}.ModalHeader h1{font-weight:var(--emw--font-weight-semibold, 600);font-size:20px;margin-top:12px;padding:0 16px}.ModalIcon{width:44px;height:44px;border-radius:50%;background-size:cover;margin-top:12px}.ModalBody{margin-top:20px;font-size:16px;font-family:\"Inter\", sans-serif;font-weight:var(--emw--font-weight-normal, 400);color:var(--emw--color-gray-100, #BBB9C3);padding:0 16px}.ModalFooter{margin-top:40px;margin-bottom:28px;padding:0 16px;width:100%}@keyframes rotate{100%{transform:rotate(1turn)}}.ModalOverlay .ModalWinAnimation{display:none}.ModalOverlay.ShowAnimation .ModalWinAnimation{display:block;position:absolute;width:100%;height:100%;inset:0;background:center/550px url(https://static.everymatrix.com/gic/img/engagement-suite/light.svg) no-repeat, center/550px url(https://static.everymatrix.com/gic/img/engagement-suite/win.svg) no-repeat;animation:6s rotate linear infinite}.ModalOverlay.Mobile .ModalBody{font-size:14px}.ModalOverlay.Mobile .ModalContent{width:318px}.ModalOverlay.Mobile .ModalHeader h1{font-size:20px}.ModalOverlay.Mobile.ShowAnimation .ModalWinAnimation{background-size:400px}";
+
+const CasinoEngagementSuiteModal = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.closeModal = createEvent(this, "closeModal", 7);
+    /**
+     * Client custom styling via string
+     */
+    this.clientStyling = '';
+    /**
+    * Client custom styling via url
+    */
+    this.clientStylingUrl = '';
+    this.device = 'Mobile';
+    /**
+     * Show win animation
+     */
+    this.showAnimation = false;
+    this.limitStylingAppends = false;
+    this.handleCloseClick = () => {
+      if (this.isLoading)
+        return;
+      this.closeModal.emit(this.modalType);
+    };
+    this.setClientStyling = () => {
+      let sheet = document.createElement('style');
+      sheet.innerHTML = this.clientStyling;
+      this.host.prepend(sheet);
+    };
+    this.setClientStylingURL = () => {
+      let url = new URL(this.clientStylingUrl);
+      let cssFile = document.createElement('style');
+      fetch(url.href)
+        .then((res) => res.text())
+        .then((data) => {
+        cssFile.innerHTML = data;
+        setTimeout(() => { this.host.prepend(cssFile); }, 1);
+      })
+        .catch((err) => {
+        console.log('Error ', err);
+      });
+    };
+  }
+  componentDidRender() {
+    if (!this.limitStylingAppends && this.host) {
+      if (this.clientStyling)
+        this.setClientStyling();
+      if (this.clientStylingUrl)
+        this.setClientStylingURL();
+      this.limitStylingAppends = true;
+    }
+  }
+  render() {
+    return (h("div", { class: `ModalOverlay ${this.isOpen && 'Open'} ${this.device} ${this.showAnimation && 'ShowAnimation'}` }, h("div", { class: "ModalWinAnimation" }), h("div", { class: "ModalContent GradientBorder" }, h("div", { class: 'IconCloseContainer' }, h("button", { class: "IconCloseButton", onClick: this.handleCloseClick }, h("img", { src: "https://static.everymatrix.com/gic/img/engagement-suite/close.svg", alt: "\u0421lose modal" }))), this.contentIcon ? (h("div", { class: "ModalIcon", style: {
+        background: `url(${this.contentIcon}) no-repeat center, linear-gradient(98.25deg, #FF9400 22.48%, #FEF746 131.02%, #FFE24A 131.9%)`
+      } })) : null, h("div", { class: "ModalHeader" }, h("h1", null, this.header)), h("div", { class: "ModalBody" }, h("slot", { name: "body" })), h("div", { class: "ModalFooter" }, h("slot", { name: "footer" })))));
+  }
+  get host() { return getElement(this); }
+};
+CasinoEngagementSuiteModal.style = casinoEngagementSuiteModalCss;
+
+const DEFAULT_LANGUAGE = 'en';
+const SUPPORTED_LANGUAGES = ['en'];
+const TRANSLATIONS = {
+  en: {
+    joinHeader: 'Choose another challenge?',
+    desc: 'Any progress on the current challenge will be kept and you can rejoin the challenge at any time.',
+    joinQuestion: 'Would you still like to join another challenge?',
+    joinConfirm: 'Yes, join another challenge',
+    joinReject: 'No, stay at the current challenge',
+    unJoinHeader: 'Quit Challenge?',
+    unJoinQuestion: 'Would you still like to quit the challenge?',
+    unJoinConfirm: 'Yes, I want to quit challenge',
+    unJoinReject: 'No, stay at challenge',
+    join: 'Unjoin',
+    unJoin: 'Unjoin',
+    continue: 'Continue',
+    okContinue: 'Ok, continue',
+    won: 'You won',
+    supportInfo: 'However, some rewards cannot be issued. Please, contact support.',
+    noReward: 'Reward cannot be issued',
+    contactSupport: 'Please contact support',
+    noChallenges: 'No Challenges yet',
+    tryOtherGames: 'Try winning Challenges as rewards or launching other booster games',
+    tooltip: 'Competition where your real money bets contribute towards the level progress to achieve the level reward',
+    jackpotWin: 'Total Jackpot Win!'
+  }
+};
+const translate = (key, customLang) => {
+  const lang = customLang;
+  return TRANSLATIONS[lang !== undefined && SUPPORTED_LANGUAGES.includes(lang) ? lang : DEFAULT_LANGUAGE][key];
+};
+
+function formatBalance(amount, currency) {
+  return `${currency} ${new Intl.NumberFormat('en', { minimumFractionDigits: 2, maximumFractionDigits: 2 })
+    .format(amount)}`;
+}
+
+const casinoEngagementSuiteModalContainerCss = ":host{display:block;font-family:inherit}.ModalFooterButton,.ModalFooterButtonOutlined{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:140px;height:36px;font-size:14px;font-weight:var(--emw--font-weight-bold, 700);position:relative;font-family:\"Montserrat\", sans-serif;padding:0 16px;box-sizing:border-box;margin:auto;border:none;cursor:pointer}.ModalFooterButtonOutlined{background:linear-gradient(var(--emw--color-background, #1E1638) 0 0) padding-box, linear-gradient(98.25deg, #FF9400 22.48%, #FEF746 131.02%, #FFE24A 131.9%) border-box;border:2px solid transparent}.GradientText{background-image:linear-gradient(98.25deg, #FF9400 22.48%, #FEF746 131.02%, #FFE24A 131.9%);color:transparent;background-clip:text}.ManyActions{display:flex;width:100%;flex-direction:column;align-items:stretch}.ManyActions .ModalFooterButton,.ManyActions .ModalFooterButtonOutlined{width:280px}.ManyActions button:first-child{margin-bottom:16px}.Disabled{opacity:0.5;pointer-events:none;cursor:auto}.ModalReward{font-weight:var(--emw--font-weight-semibold, 600);color:var(--emw--color-typography, #FFFFFF)}.JackpotWinText{margin:0;font-weight:var(--emw--font-weight-bold, 600);font-size:16px;line-height:20px;color:var(--emw--color-typography, #FFF)}.JackpotWinAmount{margin-top:8px;box-shadow:-0.41px 0.41px 0px 0px #00000026, -0.41px 0.41px 2px 0px #00000080;background:linear-gradient(180deg, #FFB801 15.86%, #FEF746 31.36%, #FBFFE0 36.86%, #FFFA60 47.86%, #FF9400 87.36%);-webkit-text-fill-color:transparent;-webkit-background-clip:text;font-weight:900;font-size:16px;line-height:16px}.SupportInfo{margin-top:20px}.ModalContainer.Mobile .ModalFooterButton{min-width:140px;height:32px}.ModalContainer.Mobile .ManyActions .ModalFooterButton,.ModalContainer.Mobile .ManyActions .ModalFooterButtonOutlined{width:100%;height:32px}.ModalContainer.Mobile .ManyActions button:first-child{margin-bottom:8px}.ModalContainer.Mobile .JackpotWinText{font-size:14px;line-height:16px}.ModalContainer.Mobile .JackpotWinAmount{font-size:14px;line-height:14px}.LeftAlign{text-align:left;line-height:1.2}";
+
+const CasinoEngagementSuiteModalContainer = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.closeModal = createEvent(this, "closeModal", 7);
+    /**
+    * Client custom styling via string
+    */
+    this.clientStyling = '';
+    /**
+    * Client custom styling via url
+    */
+    this.clientStylingUrl = '';
+    /**
+     * Language of the widget
+     */
+    this.language = 'en';
+    this.device = 'Mobile';
+    this.limitStylingAppends = false;
+    this.openModals = [];
+    this.rewardMessage = '';
+    this.hasError = false;
+    this.confirmationData = null;
+    this.winAmount = { amount: 0, currency: '' };
+    this.handleCloseClick = (e) => {
+      const type = e.currentTarget.getAttribute('data-type');
+      this.closeModal.emit(type);
+    };
+    this.handleChallengeAttendance = () => {
+      window.postMessage({
+        type: 'ChallengeJoinRequest',
+        data: this.confirmationData,
+      });
+    };
+    this.setClientStyling = () => {
+      let sheet = document.createElement('style');
+      sheet.innerHTML = this.clientStyling;
+      this.host.prepend(sheet);
+    };
+    this.setClientStylingURL = () => {
+      let url = new URL(this.clientStylingUrl);
+      let cssFile = document.createElement('style');
+      fetch(url.href)
+        .then((res) => res.text())
+        .then((data) => {
+        cssFile.innerHTML = data;
+        setTimeout(() => { this.host.prepend(cssFile); }, 1);
+      })
+        .catch((err) => {
+        console.log('Error ', err);
+      });
+    };
+    this.isModalOpen = (type) => {
+      return Boolean(this.openModals.find(el => el === type));
+    };
+  }
+  openModalHandler(event) {
+    const { modalType, rewardMessage, hasError, confirmationData, winAmount } = event.detail;
+    if (winAmount) {
+      // If jackpot win modal is already opened
+      // add won amount to the previous amount
+      if (this.isModalOpen('JACKPOT_REWARD_MODAL')) {
+        this.winAmount = { amount: this.winAmount.amount + winAmount.amount, currency: winAmount.currency };
+      }
+      else {
+        this.winAmount = winAmount;
+      }
+    }
+    this.openModals = [...this.openModals, modalType];
+    this.rewardMessage = rewardMessage;
+    this.hasError = hasError;
+    if (confirmationData) {
+      this.confirmationData = confirmationData;
+    }
+  }
+  closeModalHandler(event) {
+    this.openModals = this.openModals.filter(el => el !== event.detail);
+  }
+  componentDidRender() {
+    if (!this.limitStylingAppends && this.host) {
+      if (this.clientStyling)
+        this.setClientStyling();
+      if (this.clientStylingUrl)
+        this.setClientStylingURL();
+      this.limitStylingAppends = true;
+    }
+  }
+  render() {
+    const { ProgressToActivate } = this.confirmationData || {};
+    return (h("div", { class: `ModalContainer ${this.device}` }, h("casino-engagement-suite-modal", { isOpen: this.isModalOpen("REWARD_MODAL"), header: "Congratulations!", contentIcon: "https://static.everymatrix.com/gic/img/engagement-suite/cup-reward.svg", modalType: "REWARD_MODAL", "show-animation": true, device: this.device }, h("div", { slot: "body" }, h("p", null, translate('won', this.language), " ", h("span", { class: 'ModalReward' }, this.rewardMessage)), this.hasError && (h("p", { class: "SupportInfo" }, translate('supportInfo', this.language)))), h("div", { slot: "footer" }, h("button", { class: 'ModalFooterButton', onClick: this.handleCloseClick, "data-type": 'REWARD_MODAL' }, translate('continue', this.language)))), h("casino-engagement-suite-modal", { isOpen: this.isModalOpen("JACKPOT_REWARD_MODAL"), header: "Congratulations!", contentIcon: "https://static.everymatrix.com/gic/img/engagement-suite/cup-reward.svg", "show-animation": true, modalType: "JACKPOT_REWARD_MODAL", device: this.device }, h("div", { slot: "body" }, h("div", { class: "JackpotWinText" }, translate('jackpotWin', this.language)), h("div", { class: "JackpotWinAmount" }, formatBalance(this.winAmount.amount, this.winAmount.currency))), h("div", { slot: "footer" }, h("button", { class: 'ModalFooterButton', onClick: this.handleCloseClick, "data-type": 'JACKPOT_REWARD_MODAL' }, translate('continue', this.language)))), h("casino-engagement-suite-modal", { isOpen: this.isModalOpen("TARGET_MODAL"), header: ProgressToActivate ?
+        translate('joinHeader', this.language) :
+        translate('unJoinHeader', this.language), modalType: "TARGET_MODAL", device: this.device, isLoading: this.isJoiningToChallenge }, h("div", { slot: "body" }, h("p", { class: 'LeftAlign' }, translate('desc', this.language)), h("p", { class: 'LeftAlign' }, ProgressToActivate ?
+      translate('joinQuestion', this.language) :
+      translate('unJoinQuestion', this.language))), h("div", { slot: "footer", class: 'ManyActions' }, h("button", { class: `ModalFooterButton ${this.isJoiningToChallenge ? 'Disabled' : ''}`, onClick: this.handleChallengeAttendance }, ProgressToActivate ?
+      translate('joinConfirm', this.language) :
+      translate('unJoinConfirm', this.language)), h("button", { class: `ModalFooterButtonOutlined ${this.isJoiningToChallenge ? 'Disabled' : ''}`, onClick: this.handleCloseClick, "data-type": 'TARGET_MODAL' }, h("div", { class: 'GradientText' }, ProgressToActivate ?
+      translate('joinReject', this.language) :
+      translate('unJoinReject', this.language))))), h("casino-engagement-suite-modal", { isOpen: this.isModalOpen("SUPPORT_MODAL"), header: translate('noReward', this.language), contentIcon: "https://static.everymatrix.com/gic/img/engagement-suite/alert.svg", modalType: "SUPPORT_MODAL", device: this.device }, h("div", { slot: "body" }, h("span", null, translate('contactSupport', this.language))), h("div", { slot: "footer" }, h("button", { class: 'ModalFooterButton', onClick: this.handleCloseClick, "data-type": 'SUPPORT_MODAL' }, translate('okContinue', this.language))))));
+  }
+  get host() { return getElement(this); }
+};
+CasinoEngagementSuiteModalContainer.style = casinoEngagementSuiteModalContainerCss;
+
+export { CasinoEngagementSuiteModal as casino_engagement_suite_modal, CasinoEngagementSuiteModalContainer as casino_engagement_suite_modal_container };

package/dist/esm/loader.js

@@ -10,7 +10,7 @@ const patchEsm = () => {
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
   return patchEsm().then(() => {
-  return bootstrapLazy([["casino-engagement-suite-modal",[[1,"casino-engagement-suite-modal",{"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"isOpen":[4,"is-open"],"header":[1],"icon":[1],"contentIcon":[1,"content-icon"],"modalType":[1,"modal-type"],"device":[1],"limitStylingAppends":[32]}]]],["casino-engagement-suite-modal-container",[[1,"casino-engagement-suite-modal-container",{"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"language":[1],"device":[1],"limitStylingAppends":[32],"openModals":[32],"rewards":[32],"confirmationData":[32]},[[16,"openModal","openModalHandler"],[16,"closeModal","closeModalHandler"]]]]]], options);
+  return bootstrapLazy([["casino-engagement-suite-modal_2",[[1,"casino-engagement-suite-modal-container",{"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"language":[1],"isJoiningToChallenge":[1028,"is-joining-to-challenge"],"device":[1],"limitStylingAppends":[32],"openModals":[32],"rewardMessage":[32],"hasError":[32],"confirmationData":[32],"winAmount":[32]},[[16,"openModal","openModalHandler"],[16,"closeModal","closeModalHandler"]]],[1,"casino-engagement-suite-modal",{"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"isOpen":[4,"is-open"],"isLoading":[1028,"is-loading"],"header":[1],"contentIcon":[1,"content-icon"],"modalType":[1,"modal-type"],"device":[1],"showAnimation":[4,"show-animation"],"limitStylingAppends":[32]}]]]], options);
   });
 };
 

package/dist/types/components/casino-engagement-suite-modal-container/casino-engagement-suite-modal-container.d.ts

@@ -14,11 +14,20 @@ export declare class CasinoEngagementSuiteModalContainer {
    * Language of the widget
    */
   language: string;
+  /**
+   *Is joining to challenge
+   */
+  isJoiningToChallenge: boolean;
   device: "Mobile" | "Tablet" | "Desktop";
   private limitStylingAppends;
   openModals: Array<string>;
-  rewards: Array<string>;
-  confirmationData: Record<string, string | number> | null;
+  rewardMessage: string;
+  hasError: boolean;
+  confirmationData: Record<string, number> | null;
+  winAmount: {
+    amount: number;
+    currency: string;
+  };
   host: HTMLElement;
   openModalHandler(event: {
     detail: OpenModalEvent;

package/dist/types/components.d.ts

@@ -16,6 +16,10 @@ export namespace Components {
          */
         "clientStylingUrl": string;
         "device": "Mobile" | "Tablet" | "Desktop";
+        /**
+          * Is joining to challenge
+         */
+        "isJoiningToChallenge": boolean;
         /**
           * Language of the widget
          */
@@ -44,6 +48,10 @@ declare namespace LocalJSX {
          */
         "clientStylingUrl"?: string;
         "device"?: "Mobile" | "Tablet" | "Desktop";
+        /**
+          * Is joining to challenge
+         */
+        "isJoiningToChallenge"?: boolean;
         /**
           * Language of the widget
          */

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

@@ -1,5 +1,10 @@
 export interface OpenModalEvent {
   modalType: string;
-  rewards?: Array<string>;
-  confirmationData?: Record<string, string | number>;
+  rewardMessage?: string;
+  hasError?: boolean;
+  confirmationData?: Record<string, number>;
+  winAmount?: {
+    amount: number;
+    currency: string;
+  };
 }

package/dist/types/utils/utils.d.ts

@@ -1 +1 @@
-export declare function format(first: string, middle: string, last: string): string;
+export declare function formatBalance(amount: number, currency: string): string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@everymatrix/casino-engagement-suite-modal-container",
-  "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-modal-container/p-0f126ad9.entry.js

@@ -1 +0,0 @@
-import{r as o,c as t,h as e,g as i}from"./p-b944b831.js";const n=class{constructor(e){o(this,e),this.closeModal=t(this,"closeModal",7),this.clientStyling="",this.clientStylingUrl="",this.device="Mobile",this.limitStylingAppends=!1,this.handleCloseClick=()=>{this.closeModal.emit(this.modalType)},this.setClientStyling=()=>{let o=document.createElement("style");o.innerHTML=this.clientStyling,this.host.prepend(o)},this.setClientStylingURL=()=>{let o=new URL(this.clientStylingUrl),t=document.createElement("style");fetch(o.href).then((o=>o.text())).then((o=>{t.innerHTML=o,setTimeout((()=>{this.host.prepend(t)}),1)})).catch((o=>{console.log("Error ",o)}))}}componentDidRender(){!this.limitStylingAppends&&this.host&&(this.clientStyling&&this.setClientStyling(),this.clientStylingUrl&&this.setClientStylingURL(),this.limitStylingAppends=!0)}render(){return e("div",{class:`ModalOverlay ${this.isOpen&&"Open"} ${this.device}`},e("div",{class:"ModalContent GradientBorder"},e("div",{class:"IconCloseContainer"},e("button",{class:"IconCloseButton",onClick:this.handleCloseClick},e("img",{src:this.icon,alt:"Сlose modal"}))),this.contentIcon?e("div",{class:"ModalIcon",style:{background:`url(${this.contentIcon}) no-repeat center, linear-gradient(98.25deg, #FF9400 22.48%, #FEF746 131.02%, #FFE24A 131.9%)`}}):"REWARD_MODAL"===this.modalType?e("div",{class:"ModalIcon"}):null,e("div",{class:"ModalHeader"},e("h1",null,this.header)),e("div",{class:"ModalBody"},e("slot",{name:"body"})),e("div",{class:"ModalFooter"},e("slot",{name:"footer"}))))}get host(){return i(this)}};n.style=':host{display:block}*{box-sizing:border-box;margin:0;padding:0}button{border:none;background:none;cursor:pointer}button:focus{outline:none}.ModalOverlay{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.5);justify-content:center;align-items:center}.ModalOverlay.Open{display:flex}.IconCloseContainer{width:100%;display:flex;justify-content:end}.ModalContent{display:flex;flex-direction:column;align-items:center;font-family:"Montserrat", sans-serif;position:relative;color:var(--emw--color-typography, #FFFFFF);background-color:var(--emw--color-background, #1E1638);padding:12px;border-radius:8px;width:450px;max-width:100%;text-align:center}.GradientBorder::before{content:"";position:absolute;top:-1px;left:-1px;right:-1px;bottom:-1px;border-radius:9px;background:linear-gradient(143.2deg, #FF9401 -0.41%, #FFD32D 45.61%, #FF9401 82.77%);z-index:-1}.ModalHeader{font-weight:var(--emw--font-weight-semibold, 600);font-size:20px;margin-top:12px;padding:0 16px}.ModalIcon{width:44px;height:44px;border-radius:50%;background-size:cover;background-position:center;background-image:url("https://static.everymatrix.com/gic/img/engagement-suite/bar/leaderboard.svg");margin-top:12px}.ModalBody{margin-top:20px;font-size:16px;font-family:"Inter", sans-serif;font-weight:var(--emw--font-weight-normal, 400);color:var(--emw--color-gray-100, #BBB9C3);padding:0 16px}.ModalFooter{margin-top:40px;margin-bottom:28px;padding:0 16px;width:100%}.ModalOverlay.Mobile .ModalBody{font-size:14px}.ModalOverlay.Mobile .ModalContent{width:318px}.ModalOverlay.Mobile .ModalHeader h1{font-size:20px}';export{n as casino_engagement_suite_modal}

package/dist/casino-engagement-suite-modal-container/p-8aa9bb7a.entry.js

@@ -1 +0,0 @@
-import{r as t,c as e,h as o,g as n}from"./p-b944b831.js";const i=["en"],a={en:{joinHeader:"Choose another challenge?",desc:"Any progress on the current challenge will be kept and you can rejoin the challenge at any time.",joinQuestion:"Would you still like to join another challenge?",joinConfirm:"Yes, join another challenge",joinReject:"No, stay at the current challenge",unJoinHeader:"Quit Challenge?",unJoinQuestion:"Would you still like to quit the challenge?",unJoinConfirm:"Yes, I want to quit challenge",unJoinReject:"No, stay at challenge",join:"Unjoin",unJoin:"Unjoin",continue:"Continue",won:"You won",noChallenges:"No Challenges yet",tryOtherGames:"Try winning Challenges as rewards or launching other booster games",tooltip:"Competition where your real money bets contribute towards the level progress to achieve the level reward"}},s=(t,e)=>{const o=e;return a[void 0!==o&&i.includes(o)?o:"en"][t]},l=class{constructor(o){t(this,o),this.closeModal=e(this,"closeModal",7),this.clientStyling="",this.clientStylingUrl="",this.language="en",this.device="Mobile",this.limitStylingAppends=!1,this.openModals=[],this.rewards=[],this.confirmationData=null,this.handleCloseClick=t=>{const e=+t.currentTarget.getAttribute("data-type");this.closeModal.emit(e)},this.handleChallengeAttendance=()=>{window.postMessage({type:"ChallengeAttendance",confirmationData:this.confirmationData})},this.setClientStyling=()=>{let t=document.createElement("style");t.innerHTML=this.clientStyling,this.host.prepend(t)},this.setClientStylingURL=()=>{let t=new URL(this.clientStylingUrl),e=document.createElement("style");fetch(t.href).then((t=>t.text())).then((t=>{e.innerHTML=t,setTimeout((()=>{this.host.prepend(e)}),1)})).catch((t=>{console.log("Error ",t)}))},this.isModalOpen=t=>Boolean(this.openModals.find((e=>e===t)))}openModalHandler(t){const{modalType:e,rewards:o,confirmationData:n}=t.detail;this.openModals=[...this.openModals,e],(null==o?void 0:o.length)&&(this.rewards=[...o]),n&&(this.confirmationData=n)}closeModalHandler(t){this.openModals=this.openModals.filter((e=>e!==t.detail))}componentDidRender(){!this.limitStylingAppends&&this.host&&(this.clientStyling&&this.setClientStyling(),this.clientStylingUrl&&this.setClientStylingURL(),this.limitStylingAppends=!0)}render(){const{prevId:t}=this.confirmationData||{};return o("div",{class:`ModalContainer ${this.device}`},o("casino-engagement-suite-modal",{isOpen:this.isModalOpen("REWARD_MODAL"),header:"Congratulations!",icon:"https://static.everymatrix.com/gic/img/engagement-suite/close.svg",contentIcon:"https://static.everymatrix.com/gic/img/engagement-suite/cup-reward.svg",modalType:"REWARD_MODAL",device:this.device},o("div",{slot:"body"},o("p",null,s("won",this.language)," ",o("span",{class:"ModalReward"},this.rewards))),o("div",{slot:"footer"},o("button",{class:"ModalFooterButton",onClick:this.handleCloseClick,"data-type":"REWARD_MODAL"},s("continue",this.language)))),o("casino-engagement-suite-modal",{isOpen:this.isModalOpen("TARGET_MODAL"),header:s(t?"joinHeader":"unJoinHeader",this.language),icon:"https://static.everymatrix.com/gic/img/engagement-suite/close.svg",modalType:"TARGET_MODAL",device:this.device},o("div",{slot:"body"},o("p",{class:"LeftAlign"},s("desc",this.language)),o("p",{class:"LeftAlign"},s(t?"joinQuestion":"unJoinQuestion",this.language))),o("div",{slot:"footer",class:"ManyActions"},o("button",{class:"ModalFooterButton",onClick:this.handleChallengeAttendance},s(t?"joinConfirm":"unJoinConfirm",this.language)),o("button",{class:"ModalFooterButtonOutlined",onClick:this.handleCloseClick,"data-type":"TARGET_MODAL"},o("div",{class:"GradientText"},s(t?"joinReject":"unJoinReject",this.language))))))}get host(){return n(this)}};l.style=':host{display:block}.ModalFooterButton,.ModalFooterButtonOutlined{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:140px;height:36px;font-size:14px;font-weight:var(--emw--font-weight-bold, 700);position:relative;font-family:"Montserrat", sans-serif;padding:0 16px;box-sizing:border-box;margin:auto;border:none;cursor:pointer}.ModalFooterButtonOutlined{background:linear-gradient(var(--emw--color-background, #1E1638) 0 0) padding-box, linear-gradient(98.25deg, #FF9400 22.48%, #FEF746 131.02%, #FFE24A 131.9%) border-box;border:2px solid transparent}.GradientText{background-image:linear-gradient(98.25deg, #FF9400 22.48%, #FEF746 131.02%, #FFE24A 131.9%);color:transparent;background-clip:text}.ManyActions{display:flex;width:100%;flex-direction:column;align-items:stretch}.ManyActions .ModalFooterButton,.ManyActions .ModalFooterButtonOutlined{width:280px}.ManyActions button:first-child{margin-bottom:16px}.ModalReward{font-weight:var(--emw--font-weight-semibold, 600);color:var(--emw--color-typography, #FFFFFF)}.ModalContainer.Mobile .ModalFooterButton{min-width:140px;height:32px}.ModalContainer.Mobile .ManyActions .ModalFooterButton,.ModalContainer.Mobile .ManyActions .ModalFooterButtonOutlined{width:100%;height:32px}.ModalContainer.Mobile .ManyActions button:first-child{margin-bottom:8px}.LeftAlign{text-align:left;line-height:1.2}';export{l as casino_engagement_suite_modal_container}