@everymatrix/casino-engagement-suite-modal-container 1.44.0 → 1.45.2

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

@@ -1,207 +1,197 @@
-import { r as registerInstance, c as createEvent, h, g as getElement } from './index-89c6c4a4.js';
+import { r as registerInstance, c as createEvent, h, g as getElement } from './index-896654aa.js';
 
-const casinoEngagementSuiteModalCss = ":host{display:block;font-family:inherit}*{box-sizing:border-box;margin:0;padding:0}button{border:none;background:none;cursor:pointer;touch-action:manipulation}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}.IconCloseButton img{width:24px;height:24px}.ModalBodyWrapper{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden}.ModalBodyWrapper::-webkit-scrollbar{width:3px;background:none}.ModalBodyWrapper::-webkit-scrollbar-thumb{border-radius:4px;background-color:var(--emw--color-background, #666178)}.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:24px;border-radius:8px;width:450px;max-width:100%;text-align:center;max-height:90dvh}.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:var(--emw--font-size-large, 24px);padding:0 16px;margin-bottom:16px}.ModalIcon{width:44px;height:44px;border-radius:50%;background-size:cover;margin:12px 0}.ModalBody{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 .IconCloseButton img{width:16px;height:16px}.ModalOverlay.Mobile .ModalBody{font-size:14px}.ModalOverlay.Mobile .ModalContent{width:318px;padding:12px}.ModalOverlay.Mobile .ModalHeader h1{font-size:20px;padding:0 60px}.ModalOverlay.Mobile.ShowAnimation .ModalWinAnimation{background-size:400px}";
+const casinoEngagementSuiteModalCss = ":host{display:block;font-family:inherit}*{box-sizing:border-box;margin:0;padding:0}button{border:none;background:none;cursor:pointer;touch-action:manipulation}button:focus{outline:none}.EngagementSuiteIconButton{width:24px;height:24px}.EngagementSuiteIconButton.Close{background:center/100% url(https://static.everymatrix.com/gic/img/engagement-suite/close.svg) no-repeat}.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;z-index:1}.ModalOverlay.Open{display:flex}.IconCloseContainer{width:100%;display:flex;justify-content:end}.ModalBodyWrapper{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden}.ModalBodyWrapper::-webkit-scrollbar{width:3px;background:none}.ModalBodyWrapper::-webkit-scrollbar-thumb{border-radius:var(--emw--border-radius-small, 4px);background-color:var(--emw--color-gray-transparency-30, rgba(255, 255, 255, 0.3))}.ModalContent{display:flex;flex-direction:column;align-items:center;font-family:var(--emw--font-family-secondary, \"Montserrat\", sans-serif);position:relative;color:var(--emw--color-typography, #FFFFFF);background-color:var(--emw--color-background, #1E1638);padding:24px;border-radius:var(--emw--border-radius-large, 8px);width:450px;max-width:100%;text-align:center;max-height:90dvh}.GradientBorder::before{content:\"\";position:absolute;top:-1px;left:-1px;right:-1px;bottom:-1px;border-radius:var(--emw--border-radius-large, 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:var(--emw--font-size-large-plus, 24px);padding:0 16px;margin-bottom:16px}.ModalIcon{width:44px;height:44px;border-radius:50%;background-size:cover;margin:12px 0}.ModalBody{font-size:var(--emw--font-size-medium, 16px);font-weight:var(--emw--font-weight-normal, 400);color:var(--emw--color-secondary, #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 .EngagementSuiteIconButton{width:16px;height:16px}.ModalOverlay.Mobile .ModalBody{font-size:var(--emw--font-size-small, 14px)}.ModalOverlay.Mobile .ModalContent{width:318px;padding:12px}.ModalOverlay.Mobile .ModalHeader h1{font-size:var(--emw--font-size-large, 20px);padding:0 60px}.ModalOverlay.Mobile.ShowAnimation .ModalWinAnimation{background-size:400px}";
+const CasinoEngagementSuiteModalStyle0 = casinoEngagementSuiteModalCss;
 
 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;
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.closeModal = createEvent(this, "closeModal", 7);
+        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);
+            });
+        };
+        this.clientStyling = '';
+        this.clientStylingUrl = '';
+        this.isOpen = undefined;
+        this.isLoading = undefined;
+        this.header = undefined;
+        this.contentIcon = undefined;
+        this.modalType = undefined;
+        this.device = 'Mobile';
+        this.showAnimation = false;
+        this.limitStylingAppends = false;
     }
-  }
-  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: "ModalBodyWrapper" }, h("div", { class: "ModalBody" }, h("slot", { name: "body" })), h("div", { class: "ModalFooter" }, h("slot", { name: "footer" }))))));
-  }
-  get host() { return getElement(this); }
+    componentDidRender() {
+        if (!this.limitStylingAppends && this.host) {
+            if (this.clientStyling)
+                this.setClientStyling();
+            if (this.clientStylingUrl)
+                this.setClientStylingURL();
+            this.limitStylingAppends = true;
+        }
+    }
+    render() {
+        return (h("div", { key: '570a2289e990efeae5cceac8bc2152cbb9bb5221', class: `ModalOverlay ${this.isOpen && 'Open'} ${this.device} ${this.showAnimation && 'ShowAnimation'}` }, h("div", { key: '9d40898f29b5a539907a7e50f3fdee02636aced6', class: "ModalWinAnimation" }), h("div", { key: '724ffe5cd946b40aa12f99ac926a6c832c1633da', class: "ModalContent GradientBorder" }, h("div", { key: '14bb1463ba0b5e9cdb545a81c13873a3e124f4c3', class: 'IconCloseContainer' }, h("button", { key: '1640c3c0881c65199a26f3f2217610189d626f91', class: "EngagementSuiteIconButton Close", onClick: this.handleCloseClick })), 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", { key: 'c49ddc1152bb9c8af76ff11874816da8477ba821', class: "ModalHeader" }, h("h1", { key: '08352f25028b0b08c2c1a77b91ea80cc968aa4e1' }, this.header)), h("div", { key: '3420427d531aceb3861c1876394443ad664ff68b', class: "ModalBodyWrapper" }, h("div", { key: '3e453586b727029f5fca9688b376d4b3e8298dbf', class: "ModalBody" }, h("slot", { key: '0d82c3fa9b0faa9012005ccca85350313a684326', name: "body" })), h("div", { key: '9e7a078e4c912869f2e3573a533bb3cf82454a4c', class: "ModalFooter" }, h("slot", { key: 'df8e0568aeca79889cf8eb8f7fb33caf685b092e', name: "footer" }))))));
+    }
+    get host() { return getElement(this); }
 };
-CasinoEngagementSuiteModal.style = casinoEngagementSuiteModalCss;
+CasinoEngagementSuiteModal.style = CasinoEngagementSuiteModalStyle0;
 
 const DEFAULT_LANGUAGE = 'en';
 const SUPPORTED_LANGUAGES = ['en'];
 const TRANSLATIONS = {
-  en: {
-    joinHeader: 'Choose another mission?',
-    desc: 'Any progress on the current mission will be kept and you can rejoin the mission at any time.',
-    joinQuestion: 'Would you still like to join another mission?',
-    joinConfirm: 'Yes, join another mission',
-    joinReject: 'No, stay at this mission',
-    unJoinHeader: 'Quit Mission?',
-    unJoinQuestion: 'Would you still like to quit the mission?',
-    unJoinConfirm: 'Yes, I want to quit this mission',
-    unJoinReject: 'No, stay at this mission',
-    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.',
-    noMissions: 'No Missions yet',
-    tryOtherGames: 'Try winning Missions as rewards or launching other booster games',
-    tooltip: 'Mission where your real money bets contribute towards the level progress to achieve the level reward',
-    jackpotWin: 'Total Jackpot Win!',
-    jackpotWinInfo: 'Please refresh game page or place any bet to update game balance'
-  }
+    en: {
+        joinHeader: 'Choose another mission?',
+        desc: 'Any progress on the current mission will be kept and you can rejoin the mission at any time.',
+        joinQuestion: 'Would you still like to join another mission?',
+        joinConfirm: 'Yes, join another mission',
+        joinReject: 'No, stay at this mission',
+        unJoinHeader: 'Quit Mission?',
+        unJoinQuestion: 'Would you still like to quit the mission?',
+        unJoinConfirm: 'Yes, I want to quit this mission',
+        unJoinReject: 'No, stay at this mission',
+        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.',
+        noMissions: 'No Missions yet',
+        tryOtherGames: 'Try winning Missions as rewards or launching other booster games',
+        tooltip: 'Mission where your real money bets contribute towards the level progress to achieve the level reward',
+        jackpotWin: 'Total Jackpot Win!',
+        jackpotWinInfo: 'Please refresh game page or place any bet to update game balance'
+    }
 };
 const translate = (key, customLang) => {
-  const lang = customLang;
-  return TRANSLATIONS[lang !== undefined && SUPPORTED_LANGUAGES.includes(lang) ? lang : DEFAULT_LANGUAGE][key];
+    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)}`;
+    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:160px;height:36px;font-size:var(--emw--font-size-small-plus, 16px);font-weight:var(--emw--font-weight-bold, 700);position:relative;font-family:\"Montserrat\", sans-serif;padding:0 12px;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);word-break:break-word}.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;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}.JackpotWinInfoText{padding:0 50px;margin-top:20px;font-size:var(--emw--font-size-small, 14px);line-height:16px;color:var(--emw--color-gray-100, #BBB9C3)}.SupportInfo{margin-top:20px}.ModalContainer.Mobile .ModalFooterButton,.ModalContainer.Mobile .ModalFooterButtonOutlined{font-size:var(--emw--font-size-small, 14px);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}.ModalContainer.Mobile .JackpotWinInfoText{padding:0;margin-top:20px;font-size:var(--emw--font-size-small, 14px);line-height:16px;color:var(--emw--color-gray-100, #BBB9C3)}.LeftAlign,.LeftAlignQuestion{text-align:left;line-height:1.2}.LeftAlignQuestion{margin-top:20px}";
+const casinoEngagementSuiteModalContainerCss = ":host{display:block;font-family:inherit}.ModalFooterButton,.ModalFooterButtonOutlined{transition:all 0.5s ease-out;background:var(--emw--engagement-suite-gradient-button, linear-gradient(98.25deg, #FF9400 22.48%, #FEF746 131.02%, #FFE24A 131.9%));color:var(--emw--color-background, #1E1638);border-radius:99px;min-width:160px;height:36px;font-size:var(--emw--font-size-medium, 16px);font-weight:var(--emw--font-weight-bold, 700);position:relative;font-family:var(--emw--font-family-secondary, \"Montserrat\", sans-serif);padding:0 12px;box-sizing:border-box;margin:auto;border:none;cursor:pointer}.ModalFooterButtonOutlined{background:linear-gradient(var(--emw--color-background, #1E1638) 0 0) padding-box, var(--emw--engagement-suite-gradient-button, linear-gradient(98.25deg, #FF9400 22.48%, #FEF746 131.02%, #FFE24A 131.9%)) border-box;border:2px solid transparent}.GradientText{background:var(--emw--engagement-suite-gradient-button, 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);word-break:break-word}.JackpotWinText{margin:0;font-weight:var(--emw--font-weight-semibold, 600);font-size:var(--emw--font-size-medium, 16px);line-height:20px;color:var(--emw--color-typography, #FFF)}.JackpotWinAmount{margin-top:8px;background:var(--emw-linear-gradient-golden, 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:var(--emw--font-weight-black, 900);font-size:var(--emw--font-size-medium, 16px);line-height:16px}.JackpotWinInfoText{padding:0 50px;margin-top:20px;font-size:var(--emw--font-size-small, 14px);line-height:16px;color:var(--emw--color-secondary, #BBB9C3)}.SupportInfo{margin-top:20px}.ModalContainer.Mobile .ModalFooterButton,.ModalContainer.Mobile .ModalFooterButtonOutlined{font-size:var(--emw--font-size-small, 14px);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:var(--emw--font-size-small, 14px);line-height:16px}.ModalContainer.Mobile .JackpotWinAmount{font-size:var(--emw--font-size-small, 14px);line-height:14px}.ModalContainer.Mobile .JackpotWinInfoText{padding:0;margin-top:20px;font-size:var(--emw--font-size-small, 14px);line-height:16px;color:var(--emw--color-secondary, #BBB9C3)}.LeftAlign,.LeftAlignQuestion{text-align:left;line-height:1.2}.LeftAlignQuestion{margin-top:20px}";
+const CasinoEngagementSuiteModalContainerStyle0 = casinoEngagementSuiteModalContainerCss;
 
 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;
-      }
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.closeModal = createEvent(this, "closeModal", 7);
+        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));
+        };
+        this.clientStyling = '';
+        this.clientStylingUrl = '';
+        this.language = 'en';
+        this.isJoiningToChallenge = undefined;
+        this.device = 'Mobile';
+        this.limitStylingAppends = false;
+        this.openModals = [];
+        this.rewardMessage = '';
+        this.hasError = false;
+        this.confirmationData = null;
+        this.winAmount = { amount: 0, currency: '' };
+    }
+    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);
     }
-    this.openModals = [...this.openModals, modalType];
-    this.rewardMessage = rewardMessage;
-    this.hasError = hasError;
-    if (confirmationData) {
-      this.confirmationData = confirmationData;
+    componentDidRender() {
+        if (!this.limitStylingAppends && this.host) {
+            if (this.clientStyling)
+                this.setClientStyling();
+            if (this.clientStylingUrl)
+                this.setClientStylingURL();
+            this.limitStylingAppends = true;
+        }
     }
-  }
-  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", { key: 'e9a8acb94d06f7c7f551de2fa61d601d3a0eeac8', class: `ModalContainer ${this.device}` }, h("casino-engagement-suite-modal", { key: '5d28d01520bb671c4c932b6e53d6b1075f9c3378', clientStylingUrl: this.clientStylingUrl, 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", { key: '6ef8750352a10fcbffbbe09c8bfba46b96c2098a', slot: "body" }, h("div", { key: 'c7b0c5c5202185a4001fbd23a60077e5b4484cfd' }, translate('won', this.language), " ", h("span", { key: 'a4635cada0b6b4bb54a73377fcd0165a12400c5f', class: 'ModalReward' }, this.rewardMessage)), this.hasError && (h("div", { key: 'e06df98ca254006caf79ff443da7e7c4dc7c8e46', class: "SupportInfo" }, translate('supportInfo', this.language)))), h("div", { key: '434d5bf025fe0222f8d73d94e26bfe465492eacb', slot: "footer" }, h("button", { key: '6927f9a1ee16c3b50abd62fe5bc736800b18d8f8', class: 'ModalFooterButton', onClick: this.handleCloseClick, "data-type": 'REWARD_MODAL' }, translate('continue', this.language)))), h("casino-engagement-suite-modal", { key: '802cb8c9e712f387f26ea4411f3bb0a1497fba80', clientStylingUrl: this.clientStylingUrl, 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", { key: '70fe768de685e857cdf3cc889ec9f7a841ed4c09', slot: "body" }, h("div", { key: 'bfafa6ea6d1d200d4c4c1a1e2a9d5bc43a0fbfa1', class: "JackpotWinText" }, translate('jackpotWin', this.language)), h("div", { key: '62d3c8a92e0d0e0b2178087f421701a00b23bd32', class: "JackpotWinAmount" }, formatBalance(this.winAmount.amount, this.winAmount.currency))), h("div", { key: 'a062a76ba5d7d5ccb9defc85697b69d59ef1af5a', slot: "footer" }, h("button", { key: '9fa028e9f0857539e66007b1ac5f5f005dd03267', class: 'ModalFooterButton', onClick: this.handleCloseClick, "data-type": 'JACKPOT_REWARD_MODAL' }, translate('continue', this.language)), h("div", { key: '483eb12b73245887e6ebc251e2e93db7e6d7dbc3', class: "JackpotWinInfoText" }, translate('jackpotWinInfo', this.language)))), h("casino-engagement-suite-modal", { key: '898dc39daf3ee36027a080364042e8653df9c390', clientStylingUrl: this.clientStylingUrl, 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", { key: '08bcfbe6506982e393c92b0f776629dc336b751a', slot: "body" }, h("div", { key: '58e20c9775e690344804f505ef30c5a4d59940ce', class: 'LeftAlign' }, translate('desc', this.language)), h("div", { key: '8081f426a1c5556b3d95e875da12e9fb214937db', class: 'LeftAlignQuestion' }, ProgressToActivate ?
+            translate('joinQuestion', this.language) :
+            translate('unJoinQuestion', this.language))), h("div", { key: '44614b02fd105bbe4a698460696a7842c85e3c49', slot: "footer", class: 'ManyActions' }, h("button", { key: '21b8b45fd8e28625d2ece9124bca65fb5429eb12', class: `ModalFooterButton ${this.isJoiningToChallenge ? 'Disabled' : ''}`, onClick: this.handleChallengeAttendance }, ProgressToActivate ?
+            translate('joinConfirm', this.language) :
+            translate('unJoinConfirm', this.language)), h("button", { key: 'e01e434afa2e1129c325042a37b1ac76be5a28c7', class: `ModalFooterButtonOutlined ${this.isJoiningToChallenge ? 'Disabled' : ''}`, onClick: this.handleCloseClick, "data-type": 'TARGET_MODAL' }, h("div", { key: '622d587b43206691f4f67b7f13c18f4187560b15', class: 'GradientText' }, ProgressToActivate ?
+            translate('joinReject', this.language) :
+            translate('unJoinReject', this.language))))), h("casino-engagement-suite-modal", { key: '8310ae114d8eefd5d91fb07c5d7cca34c70bffa3', clientStylingUrl: this.clientStylingUrl, 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", { key: 'f6cc0be359c4cdbe0c2a3dd3ff3dbfb0841e65fe', slot: "body" }, h("span", { key: 'd4229846b65de554ba68c2c4545e2ac1fcc4fabe' }, translate('contactSupport', this.language))), h("div", { key: '55a91614a32feca8f3ea613b2ea27bb0f37145e9', slot: "footer" }, h("button", { key: '9ea26fa1b55d7fe1201e460c11ec46e8ea673240', class: 'ModalFooterButton', onClick: this.handleCloseClick, "data-type": 'SUPPORT_MODAL' }, translate('okContinue', this.language))))));
     }
-  }
-  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("div", null, translate('won', this.language), " ", h("span", { class: 'ModalReward' }, this.rewardMessage)), this.hasError && (h("div", { 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("div", { class: "JackpotWinInfoText" }, translate('jackpotWinInfo', 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("div", { class: 'LeftAlign' }, translate('desc', this.language)), h("div", { class: 'LeftAlignQuestion' }, 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); }
+    get host() { return getElement(this); }
 };
-CasinoEngagementSuiteModalContainer.style = casinoEngagementSuiteModalContainerCss;
+CasinoEngagementSuiteModalContainer.style = CasinoEngagementSuiteModalContainerStyle0;
 
 export { CasinoEngagementSuiteModal as casino_engagement_suite_modal, CasinoEngagementSuiteModalContainer as casino_engagement_suite_modal_container };