@everymatrix/casino-engagement-suite-container 1.0.69

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

@@ -0,0 +1,745 @@
+import { __rest } from "tslib";
+import { h } from "@stencil/core";
+import "../../../../../casino-engagement-suite-challenges-details/dist/types/index";
+import "../../../../../casino-engagement-suite-bar/dist/types/index";
+import "../../../../../casino-engagement-suite-challenges-list/dist/types/index";
+import "../../../../../casino-engagement-suite-free-spins-list/dist/types/index";
+import "../../../../../casino-engagement-suite-free-spins-details/dist/types/index";
+import "../../../../../casino-engagement-suite-jackpots-list/dist/types/index";
+import "../../../../../casino-engagement-suite-jackpot-details/dist/types/index";
+import "@everymatrix/casino-engagement-suite-tournament";
+import "../../../../../casino-engagement-suite-modal-container/dist/types/index";
+import { ChallengeLevelProgressStatus, ChallengeProgressStatus } from "../../models/casino-engagement-suite-config";
+import { getDeviceType, getScreenOrientation } from "../../utils/utils";
+import { MODAL_TYPES } from "../../utils/constants";
+import differenceInSeconds from "date-fns/differenceInSeconds";
+export class CasinoEngagementSuiteContainer {
+    constructor() {
+        this.handlePopupClose = (listName, detailsName) => () => {
+            if (listName === 'showChallengesList' && this.isForfeitedChallengeLabel) {
+                this.isForfeitedChallengeLabel = false;
+                this.setChallengePercent();
+            }
+            this[listName] = false;
+            this[detailsName] = false;
+            this.activeWidget = '';
+        };
+        this.handleJackpotsPopupClose = () => {
+            this.showJackpotsList = false;
+            this.showJackpotDetails = false;
+            this.activeWidget = '';
+        };
+        this.handleChallengePopupBack = () => {
+            this.showChallengeDetails = false;
+            this.showChallengesList = true;
+        };
+        this.handleFreeSpinsPopupBack = () => {
+            this.showFreeSpinsDetails = false;
+            this.showFreeSpinsList = true;
+        };
+        this.handleResetNewChallengeLabel = (e) => {
+            if (!this.challenges)
+                return;
+            if (e.detail === 'list') {
+                this.challenges.forEach(c => c.IsNew = false);
+                this.isChallengeLabel = false;
+            }
+            else {
+                const challenge = this.challenges.find(item => item.Id === e.detail);
+                if (challenge) {
+                    challenge.IsNew = false;
+                }
+            }
+            this.challenges = [...this.challenges];
+        };
+        this.handleJackpotPopupBack = () => {
+            this.showJackpotDetails = false;
+            this.showJackpotsList = true;
+        };
+        this.orientationChangeHandler = () => {
+            this.orientation = getScreenOrientation();
+            this.barHeight = this.barWrapperEl.offsetHeight;
+        };
+        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.jackpotChangeStatusRequest = (ev) => {
+            ev.stopPropagation();
+            const id = ev.currentTarget.getAttribute('data-id');
+            this.jackpots = this.jackpots.map(jackpot => {
+                const matchedJackpotId = String(id) === String(jackpot.JackpotId);
+                return matchedJackpotId
+                    ? Object.assign(Object.assign({}, jackpot), { Pending: true }) : jackpot;
+            });
+            if (this.showJackpotDetails) {
+                const updatedSelectedJackpot = this.jackpots.find(jackpot => jackpot.JackpotId === this.selectedJackpotId);
+                if (updatedSelectedJackpot) {
+                    this.selectedJackpot = Object.assign({}, updatedSelectedJackpot);
+                }
+            }
+            const jackpotsEnabledStatuses = this.jackpots.reduce((acc, jackpot) => {
+                if (jackpot.Pending) {
+                    acc[jackpot.JackpotId] = !jackpot.Enabled;
+                }
+                else {
+                    acc[jackpot.JackpotId] = jackpot.Enabled;
+                }
+                return acc;
+            }, {});
+            window.postMessage({
+                type: 'JackpotChangeStatusRequest',
+                data: jackpotsEnabledStatuses,
+            });
+        };
+        this.onLeaderboardsClose = () => {
+            this.showLeaderboardWidget = false;
+            this.activeWidget = '';
+        };
+        this.clientStyling = '';
+        this.clientStylingUrl = '';
+        this.language = 'en';
+        this.orientation = 'Landscape';
+        this.device = 'Mobile';
+        this.showChallengesList = false;
+        this.showFreeSpinsList = false;
+        this.showJackpotsList = false;
+        this.showChallengeDetails = false;
+        this.showFreeSpinsDetails = false;
+        this.showJackpotDetails = false;
+        this.showLeaderboardWidget = false;
+        this.challengePercent = undefined;
+        this.remainingFreeSpins = undefined;
+        this.highlightChallenge = false;
+        this.limitStylingAppends = false;
+        this.activeWidget = undefined;
+        this.challenges = undefined;
+        this.inProgressChallenges = undefined;
+        this.jackpots = [];
+        this.freeSpins = undefined;
+        this.leaderboards = undefined;
+        this.gameSlug = '';
+        this.pausedChallengeIds = [];
+        this.isChallengeLabel = false;
+        this.isForfeitedSpinsLabel = false;
+        this.isForfeitedChallengeLabel = false;
+        this.isJoiningToChallenge = false;
+        this.selectedChallenge = undefined;
+        this.selectedJackpot = undefined;
+        this.selectedSpin = undefined;
+        this.selectedSpinId = undefined;
+        this.selectedChallengeId = undefined;
+        this.selectedJackpotId = undefined;
+        this.barHeight = 0;
+    }
+    handleEvent(e) {
+        var _a;
+        const _b = e === null || e === void 0 ? void 0 : e.data, { type } = _b, rest = __rest(_b, ["type"]);
+        switch (type) {
+            case 'ChallengeGrant': {
+                const newChallenge = e.data.data.challengeProgressData[0];
+                const index = this.challenges.findIndex(challenge => differenceInSeconds(new Date(challenge.ExpirationTime), new Date(newChallenge.ExpirationTime)) > 0);
+                if (index > -1) {
+                    this.challenges.splice(index, 0, newChallenge);
+                }
+                else {
+                    this.challenges.push(newChallenge);
+                }
+                this.challenges = [...this.challenges];
+                this.isChallengeLabel = true;
+                break;
+            }
+            case 'CampaignGrant': {
+                this.grantFreeSpinCampaigns(e.data.data);
+                break;
+            }
+            case 'ForfeitCampaign': {
+                const forfeitedId = e.data.data.toString();
+                const forfeitedItem = this.freeSpins.find(fs => fs.Id === forfeitedId);
+                forfeitedItem.IsForfeited = true;
+                this.freeSpins = [...this.freeSpins];
+                this.isForfeitedSpinsLabel = true;
+                this.setRemainingFreeSpins();
+                break;
+            }
+            case 'ChallengeForfeitNotification': {
+                const forfeitedChallenge = (_a = this.challenges) === null || _a === void 0 ? void 0 : _a.find(c => c.ChallengeId === e.data.data.ChallengeId);
+                if (forfeitedChallenge) {
+                    forfeitedChallenge.Status = 5;
+                    this.inProgressChallenges = [...this.inProgressChallenges.filter(id => id !== forfeitedChallenge.Id)];
+                    this.challenges = [...this.challenges];
+                    this.isForfeitedChallengeLabel = true;
+                    this.setChallengePercent();
+                }
+                break;
+            }
+            case 'ChallengeHasExpired': {
+                this.setChallengePercent();
+                break;
+            }
+            case 'FreeSpinHasExpired': {
+                this.setRemainingFreeSpins();
+                break;
+            }
+            case 'BarLeaderboardsClick': {
+                this.showLeaderboardWidget = true;
+                this.showFreeSpinsList = false;
+                this.showChallengesList = false;
+                this.showJackpotsList = false;
+                this.showChallengeDetails = false;
+                this.showJackpotDetails = false;
+                this.showFreeSpinsDetails = false;
+                this.activeWidget = 'Leaderboards';
+                break;
+            }
+            case 'BarChallengesClick': {
+                this.showChallengesList = true;
+                this.showFreeSpinsList = false;
+                this.showJackpotsList = false;
+                this.showChallengeDetails = false;
+                this.showJackpotDetails = false;
+                this.showFreeSpinsDetails = false;
+                this.showLeaderboardWidget = false;
+                this.activeWidget = 'Challenges';
+                this.isChallengeLabel = false;
+                break;
+            }
+            case 'BarFreeSpinsClick': {
+                this.showFreeSpinsList = true;
+                this.showChallengesList = false;
+                this.showJackpotsList = false;
+                this.showChallengeDetails = false;
+                this.showJackpotDetails = false;
+                this.showFreeSpinsDetails = false;
+                this.showLeaderboardWidget = false;
+                this.isForfeitedSpinsLabel = false;
+                this.activeWidget = 'FreeSpins';
+                break;
+            }
+            case 'BarJackpotsClick': {
+                this.showJackpotsList = true;
+                this.showFreeSpinsList = false;
+                this.showChallengesList = false;
+                this.showChallengeDetails = false;
+                this.showJackpotDetails = false;
+                this.showFreeSpinsDetails = false;
+                this.showLeaderboardWidget = false;
+                this.activeWidget = 'Jackpots';
+                break;
+            }
+            case 'ChallengeClick': {
+                this.selectedChallengeId = e.data.id;
+                this.selectedChallenge = this.challenges.find(challenge => challenge.Id === this.selectedChallengeId);
+                this.isChallengeLabel = false;
+                this.showChallengesList = false;
+                this.showChallengeDetails = true;
+                break;
+            }
+            case 'FreeSpinClick': {
+                this.selectedSpinId = e.data.id;
+                this.selectedSpin = this.freeSpins.find(spin => spin.AwardBonusId === this.selectedSpinId);
+                this.isForfeitedSpinsLabel = false;
+                this.showFreeSpinsList = false;
+                this.showFreeSpinsDetails = true;
+                break;
+            }
+            case 'JackpotClick': {
+                this.selectedJackpotId = e.data.id;
+                this.selectedJackpot = this.jackpots.find(jackpot => jackpot.JackpotId === this.selectedJackpotId);
+                this.showJackpotsList = false;
+                this.showJackpotDetails = true;
+                break;
+            }
+            case 'UpdateChallengeProgress': {
+                this.updateChallengeProgress(e.data.data);
+                break;
+            }
+            case 'UpdateFreeSpinsProgress': {
+                this.updateFreeSpinsProgress(e.data.data);
+                break;
+            }
+            case 'ChallengeChangeStatusNotification': {
+                const { IsEnabled, ChallengeId } = e.data.data;
+                if (!IsEnabled && !this.pausedChallengeIds.includes(ChallengeId)) {
+                    this.pausedChallengeIds = [...this.pausedChallengeIds, ChallengeId];
+                }
+                else {
+                    this.pausedChallengeIds = this.pausedChallengeIds.filter(id => id !== ChallengeId);
+                }
+                break;
+            }
+            case 'ShowChallengeRewardModal': {
+                const { ChallengeId, LevelId, HasError, ProcessedRewards } = rest.data;
+                const type = (ProcessedRewards === null || ProcessedRewards === void 0 ? void 0 : ProcessedRewards.length) ? MODAL_TYPES.REWARD_MODAL : MODAL_TYPES.SUPPORT_MODAL;
+                const event = {
+                    modalType: type,
+                    rewardMessage: this.getRewardMessage(ChallengeId, LevelId),
+                    hasError: HasError
+                };
+                this.openModal.emit(event);
+                break;
+            }
+            case 'ShowConfirmationModal': {
+                const event = {
+                    modalType: MODAL_TYPES.TARGET_MODAL,
+                    confirmationData: rest,
+                };
+                this.openModal.emit(event);
+                break;
+            }
+            case 'ChallengeJoinRequest': {
+                this.isJoiningToChallenge = true;
+                break;
+            }
+            case 'JoinChallengeResult': {
+                const { Success, JoinId, UnjoinId } = e.data.data;
+                if (Success) {
+                    if (JoinId) {
+                        this.updateChallengeStatus(JoinId, 1, true);
+                    }
+                    if (UnjoinId) {
+                        this.updateChallengeStatus(UnjoinId, 0, false);
+                    }
+                    this.challenges = [...this.challenges];
+                    const updatedSelectedChallenge = this.challenges.find(challenge => challenge.Id === this.selectedChallengeId);
+                    this.selectedChallenge = Object.assign({}, updatedSelectedChallenge);
+                }
+                this.isJoiningToChallenge = false;
+                this.closeModal.emit(MODAL_TYPES.TARGET_MODAL);
+                this.setChallengePercent();
+                break;
+            }
+            case 'ShowJackpotRewardModal': {
+                const { Amount, Currency } = e.data.data;
+                const event = {
+                    modalType: MODAL_TYPES.JACKPOT_REWARD_MODAL,
+                    winAmount: {
+                        amount: Amount,
+                        currency: Currency
+                    }
+                };
+                this.openModal.emit(event);
+                break;
+            }
+            case 'UpdateJackpotBalance':
+                this.updateJackpotBalance(e.data.data);
+                break;
+            case 'UpdateJackpotStatus':
+                this.updateJackpotStatus(e.data.data);
+                break;
+            case 'JoinJackpotResult':
+                this.joinJackpotResult(e.data.data);
+                break;
+        }
+    }
+    componentDidLoad() {
+        this.orientation = getScreenOrientation();
+        this.device = getDeviceType();
+        window.screen.orientation.addEventListener('change', this.orientationChangeHandler);
+    }
+    componentDidRender() {
+        // start custom styling area
+        if (!this.limitStylingAppends && this.host) {
+            if (this.clientStyling)
+                this.setClientStyling();
+            if (this.clientStylingUrl)
+                this.setClientStylingURL();
+            this.limitStylingAppends = true;
+        }
+        // end custom styling area
+        this.barHeight = this.barWrapperEl.offsetHeight;
+    }
+    disconnectedCallback() {
+        window.screen.orientation.removeEventListener('change', this.orientationChangeHandler);
+    }
+    /**
+     * Called to initialize widget
+     * @param config
+     */
+    async init(config) {
+        var _a;
+        this.challenges = config.challenges;
+        this.inProgressChallenges = (_a = config.challenges) === null || _a === void 0 ? void 0 : _a.filter(c => c.Status === ChallengeProgressStatus.InProgress
+            || c.Status === ChallengeProgressStatus.PendingLevelReward).map(c => c.Id);
+        this.leaderboards = config.leaderboards;
+        this.jackpots = config.jackpots || [];
+        this.freeSpins = config.freeSpins;
+        this.gameSlug = config.slug;
+        this.setChallengePercent();
+        this.setChallengeLabel();
+        this.setRemainingFreeSpins();
+        this.setSpinsForfeitedLabel();
+    }
+    setChallengeLabel() {
+        if (!this.challenges)
+            return;
+        this.isChallengeLabel = !!this.challenges.filter((challenge) => challenge.IsNew).length;
+    }
+    setSpinsForfeitedLabel() {
+        var _a;
+        if (!this.freeSpins)
+            return;
+        this.isForfeitedSpinsLabel = !!((_a = this.freeSpins) === null || _a === void 0 ? void 0 : _a.filter((spin) => spin.IsForfeited).length);
+    }
+    setChallengePercent() {
+        if (!this.challenges)
+            return;
+        this.highlightChallenge = this.isForfeitedChallengeLabel;
+        const activeChallenge = this.challenges
+            .find(challenge => challenge.Status === ChallengeProgressStatus.InProgress);
+        if (activeChallenge) {
+            const activeLevel = activeChallenge.LevelProgresses
+                .find(progress => progress.ProgressStatus === ChallengeLevelProgressStatus.InProgress);
+            const completedLevel = activeChallenge.LevelProgresses
+                .filter(progress => progress.ProgressStatus === ChallengeLevelProgressStatus.Fillup ||
+                progress.ProgressStatus === ChallengeLevelProgressStatus.Completed).slice(-1)[0];
+            this.highlightChallenge = activeChallenge.LevelProgresses.every(progress => progress.ProgressPercentage === 100) ||
+                this.isForfeitedChallengeLabel;
+            this.challengePercent = activeLevel ? `${activeLevel.ProgressPercentage}%`
+                : (completedLevel ? `${completedLevel.ProgressPercentage}%` : '0%');
+        }
+        else {
+            this.challengePercent = '—';
+        }
+    }
+    setRemainingFreeSpins() {
+        if (!this.freeSpins)
+            return;
+        if (this.freeSpins.length) {
+            this.remainingFreeSpins = this.freeSpins.filter(f => !f.IsForfeited)
+                .reduce((acc, item) => acc + (item.NumberOfFreeSpins - item.NumberOfUsedFreeSpins), 0)
+                .toString();
+        }
+        else {
+            this.remainingFreeSpins = '—';
+        }
+    }
+    updateChallengeProgress(data) {
+        var _a;
+        const challenge = (_a = this.challenges) === null || _a === void 0 ? void 0 : _a.find(challenge => challenge.ChallengeId === data.ChallengeId);
+        if (challenge) {
+            if (data.Status === ChallengeProgressStatus.Completed) {
+                challenge.Status = data.Status;
+                this.inProgressChallenges = [...this.inProgressChallenges.filter(c => c !== challenge.Id)];
+            }
+            challenge.LevelProgresses = challenge.LevelProgresses.map(level => {
+                var _a;
+                const updatedLevel = (_a = data.Levels) === null || _a === void 0 ? void 0 : _a.find(l => l.LevelId === level.LevelId);
+                return updatedLevel
+                    ? Object.assign(Object.assign({}, level), { ProgressPercentage: updatedLevel.ProgressPercentage, ProgressStatus: updatedLevel.ProgressStatus }) : level;
+            });
+            this.challenges = [...this.challenges];
+        }
+        if (this.showChallengeDetails) {
+            const updatedSelectedChallenge = this.challenges.find(challenge => challenge.Id === this.selectedChallengeId);
+            if (updatedSelectedChallenge) {
+                this.selectedChallenge = Object.assign({}, updatedSelectedChallenge);
+            }
+        }
+        this.setChallengePercent();
+    }
+    updateFreeSpinsProgress(data) {
+        var _a;
+        const campaign = (_a = this.freeSpins) === null || _a === void 0 ? void 0 : _a.find(campaign => campaign.AwardBonusId === data.AwardBonusId);
+        if (campaign) {
+            campaign.NumberOfUsedFreeSpins = data.NumberOfUsedFreeSpins;
+            campaign.VendorFreeSpinsRemainingCost = data.VendorFreeSpinsRemainingCost;
+            this.freeSpins = [...this.freeSpins];
+        }
+        if (this.showFreeSpinsDetails && this.selectedSpinId === data.AwardBonusId) {
+            const updatedSelectedCampaign = this.freeSpins.find(campaign => campaign.AwardBonusId === this.selectedSpinId);
+            if (updatedSelectedCampaign) {
+                this.selectedSpin = Object.assign({}, updatedSelectedCampaign);
+            }
+        }
+        this.setRemainingFreeSpins();
+    }
+    updateChallengeStatus(id, status, addToInProgress) {
+        var _a;
+        const challenge = (_a = this.challenges) === null || _a === void 0 ? void 0 : _a.find(c => c.Id === id);
+        if (challenge) {
+            challenge.Status = status;
+            this.inProgressChallenges = addToInProgress
+                ? [...this.inProgressChallenges, challenge.Id]
+                : this.inProgressChallenges.filter(id => id !== challenge.Id);
+        }
+    }
+    updateJackpotBalance(updatedJackpots) {
+        this.jackpots = this.jackpots.map(jackpot => {
+            const updatedJackpot = updatedJackpots.find(updatedJackpot => updatedJackpot.JackpotId === jackpot.JackpotId);
+            return updatedJackpot
+                ? Object.assign(Object.assign({}, jackpot), { Balance: updatedJackpot.Balance, WinBalance: updatedJackpot.WinBalance }) : jackpot;
+        });
+        if (this.showJackpotDetails) {
+            const updatedSelectedJackpot = this.jackpots.find(jackpot => jackpot.JackpotId === this.selectedJackpotId);
+            if (updatedSelectedJackpot) {
+                this.selectedJackpot = Object.assign({}, updatedSelectedJackpot);
+            }
+        }
+    }
+    updateJackpotStatus(statusUpdate) {
+        this.jackpots = this.jackpots.map(jackpot => {
+            const jackpotToUpdate = String(jackpot.JackpotId) === String(statusUpdate.JackpotId);
+            return jackpotToUpdate
+                ? Object.assign(Object.assign({}, jackpot), { IsClosed: statusUpdate.IsClosed, JackpotEndTime: statusUpdate.JackpotEndTime, Reason: statusUpdate.Reason }) : jackpot;
+        });
+        if (this.showJackpotDetails) {
+            const updatedSelectedJackpot = this.jackpots.find(jackpot => jackpot.JackpotId === this.selectedJackpotId);
+            if (updatedSelectedJackpot) {
+                this.selectedJackpot = Object.assign({}, updatedSelectedJackpot);
+            }
+        }
+    }
+    joinJackpotResult(joinResult) {
+        if (joinResult.Success) {
+            const jackpotIds = Object.keys(joinResult.JackpotIds);
+            if (jackpotIds.length > 0) {
+                this.jackpots = this.jackpots.map(jackpot => {
+                    const matchedJackpotId = jackpotIds.find(jackpotId => String(jackpotId) === String(jackpot.JackpotId));
+                    return matchedJackpotId
+                        ? Object.assign(Object.assign(Object.assign({}, jackpot), (jackpot.Enabled !== joinResult.JackpotIds[matchedJackpotId] && { Pending: false })), { Enabled: joinResult.JackpotIds[matchedJackpotId] }) : jackpot;
+                });
+            }
+            if (this.showJackpotDetails) {
+                const updatedSelectedJackpot = this.jackpots.find(jackpot => jackpot.JackpotId === this.selectedJackpotId);
+                if (updatedSelectedJackpot) {
+                    this.selectedJackpot = Object.assign({}, updatedSelectedJackpot);
+                }
+            }
+        }
+    }
+    grantFreeSpinCampaigns(campaigns) {
+        campaigns.forEach(newCampaign => {
+            const index = this.freeSpins.findIndex(campaign => differenceInSeconds(new Date(campaign.ExpiryDate), new Date(newCampaign.ExpiryDate)) > 0);
+            if (index > -1) {
+                this.freeSpins.splice(index, 0, newCampaign);
+            }
+            else {
+                this.freeSpins.push(newCampaign);
+            }
+            this.freeSpins = [...this.freeSpins];
+        });
+        this.setRemainingFreeSpins();
+    }
+    getChallengesWidgets() {
+        return h("div", null, h("div", { class: this.showChallengesList ? 'Backdrop Opened' : 'Backdrop' }, h("casino-engagement-suite-challenges-list", { device: this.device, class: "CasinoEngagementSuiteDialog", onResetNewChallengeLabel: this.handleResetNewChallengeLabel, onClose: this.handlePopupClose('showChallengesList', 'showChallengeDetails'), challenges: this.challenges, inProgressChallenges: this.inProgressChallenges, isJoiningToChallenge: this.isJoiningToChallenge, pausedChallengeIds: this.pausedChallengeIds })), h("div", { class: this.showChallengeDetails ? 'Backdrop Opened' : 'Backdrop' }, this.showChallengeDetails && (h("casino-engagement-suite-challenges-details", { device: this.device, class: "CasinoEngagementSuiteDialog", onResetNewChallengeLabel: this.handleResetNewChallengeLabel, onBack: this.handleChallengePopupBack, onClose: this.handlePopupClose('showChallengesList', 'showChallengeDetails'), "game-slug": this.gameSlug, challenge: this.selectedChallenge, inProgressChallenges: this.inProgressChallenges, isJoiningToChallenge: this.isJoiningToChallenge, pausedChallengeIds: this.pausedChallengeIds }))));
+    }
+    getLeaderboardsWidgets() {
+        return (h("div", { class: this.showLeaderboardWidget ? 'Backdrop Opened' : 'Backdrop' }, h("casino-engagement-suite-tournament", { class: "CasinoEngagementSuiteDialog", leaderboardsInit: this.leaderboards, onClose: this.onLeaderboardsClose })));
+    }
+    getFreeSpinWidgets() {
+        return h("div", null, h("div", { class: this.showFreeSpinsList ? 'Backdrop Opened' : 'Backdrop' }, h("casino-engagement-suite-free-spins-list", { device: this.device, class: "CasinoEngagementSuiteDialog", onClose: this.handlePopupClose('showFreeSpinsList', 'showFreeSpinsDetails'), freeSpins: this.freeSpins })), h("div", { class: this.showFreeSpinsDetails ? 'Backdrop Opened' : 'Backdrop' }, this.showFreeSpinsDetails && (h("casino-engagement-suite-free-spins-details", { device: this.device, class: "CasinoEngagementSuiteDialog", onBack: this.handleFreeSpinsPopupBack, onClose: this.handlePopupClose('showFreeSpinsList', 'showFreeSpinsDetails'), "game-slug": this.gameSlug, spin: this.selectedSpin }))));
+    }
+    getJackpotsWidgets() {
+        return h("div", null, h("div", { class: this.showJackpotsList ? 'Backdrop Opened' : 'Backdrop' }, h("casino-engagement-suite-jackpots-list", { device: this.device, class: "CasinoEngagementSuiteDialog", onClose: this.handleJackpotsPopupClose, jackpots: this.jackpots, jackpotChangeStatusRequest: this.jackpotChangeStatusRequest })), this.showJackpotDetails && h("div", { class: "Backdrop Opened" }, h("casino-engagement-suite-jackpot-details", { device: this.device, class: "CasinoEngagementSuiteDialog", onBack: this.handleJackpotPopupBack, onClose: this.handleJackpotsPopupClose, "game-slug": this.gameSlug, jackpot: this.selectedJackpot, jackpotChangeStatusRequest: this.jackpotChangeStatusRequest })));
+    }
+    getRewardMessage(challengeId, levelId) {
+        var _a, _b, _c, _d;
+        return ((_d = (_c = (_b = (_a = this.challenges) === null || _a === void 0 ? void 0 : _a.find(el => el.Id === challengeId)) === null || _b === void 0 ? void 0 : _b.LevelProgresses) === null || _c === void 0 ? void 0 : _c.find(el => el.LevelId === levelId)) === null || _d === void 0 ? void 0 : _d.CustomRewardMessage) || '';
+    }
+    render() {
+        return (h("div", { key: '70922a17bf1ca3ac0f1a02b42a1963437037b76f', class: `CasinoEngagementSuiteContainer ${this.device} ${this.orientation}`, style: { ['--barHeight']: `${this.barHeight}px` } }, h("div", { key: '77f2b9e4f14ea09a453760225117ed228986c5f8', class: "barWrapper", ref: el => this.barWrapperEl = el }, h("casino-engagement-suite-bar", { key: 'd01b26a0945b4ad0d828d3740dfbf17fc1f9cbda', orientation: this.orientation, device: this.device, "active-widget": this.activeWidget, "is-challenge-label": this.isChallengeLabel, "is-spin-forfeited-label": this.isForfeitedSpinsLabel, leaderboards: this.leaderboards, jackpots: this.jackpots, remainingFreeSpins: this.remainingFreeSpins, highlightChallenge: this.highlightChallenge, "challenge-percent": this.challengePercent, "is-forfeited-challenge-label": this.isForfeitedChallengeLabel })), this.challenges && this.getChallengesWidgets(), this.freeSpins && this.getFreeSpinWidgets(), !!this.jackpots.length && this.getJackpotsWidgets(), this.leaderboards && this.getLeaderboardsWidgets(), h("casino-engagement-suite-modal-container", { key: '9551803550c768a85c85861a1d2619050684943f', device: this.device, isJoiningToChallenge: this.isJoiningToChallenge })));
+    }
+    static get is() { return "casino-engagement-suite-container"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["casino-engagement-suite-container.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["casino-engagement-suite-container.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "clientStyling": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Client custom styling via string"
+                },
+                "attribute": "client-styling",
+                "reflect": true,
+                "defaultValue": "''"
+            },
+            "clientStylingUrl": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Client custom styling via url"
+                },
+                "attribute": "client-styling-url",
+                "reflect": true,
+                "defaultValue": "''"
+            },
+            "language": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Language of the widget"
+                },
+                "attribute": "language",
+                "reflect": false,
+                "defaultValue": "'en'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "orientation": {},
+            "device": {},
+            "showChallengesList": {},
+            "showFreeSpinsList": {},
+            "showJackpotsList": {},
+            "showChallengeDetails": {},
+            "showFreeSpinsDetails": {},
+            "showJackpotDetails": {},
+            "showLeaderboardWidget": {},
+            "challengePercent": {},
+            "remainingFreeSpins": {},
+            "highlightChallenge": {},
+            "limitStylingAppends": {},
+            "activeWidget": {},
+            "challenges": {},
+            "inProgressChallenges": {},
+            "jackpots": {},
+            "freeSpins": {},
+            "leaderboards": {},
+            "gameSlug": {},
+            "pausedChallengeIds": {},
+            "isChallengeLabel": {},
+            "isForfeitedSpinsLabel": {},
+            "isForfeitedChallengeLabel": {},
+            "isJoiningToChallenge": {},
+            "selectedChallenge": {},
+            "selectedJackpot": {},
+            "selectedSpin": {},
+            "selectedSpinId": {},
+            "selectedChallengeId": {},
+            "selectedJackpotId": {},
+            "barHeight": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "openModal",
+                "name": "openModal",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "OpenModalEvent",
+                    "resolved": "OpenModalEvent",
+                    "references": {
+                        "OpenModalEvent": {
+                            "location": "import",
+                            "path": "../../models/casino-engagement-suite-config",
+                            "id": "../../../../packages/stencil/casino-engagement-suite-container/src/models/casino-engagement-suite-config.ts::OpenModalEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "closeModal",
+                "name": "closeModal",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "init": {
+                "complexType": {
+                    "signature": "(config: CasinoEngagementSuiteConfig) => Promise<void>",
+                    "parameters": [{
+                            "name": "config",
+                            "type": "CasinoEngagementSuiteConfig",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "CasinoEngagementSuiteConfig": {
+                            "location": "import",
+                            "path": "../../models/casino-engagement-suite-config",
+                            "id": "../../../../packages/stencil/casino-engagement-suite-container/src/models/casino-engagement-suite-config.ts::CasinoEngagementSuiteConfig"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Called to initialize widget",
+                    "tags": [{
+                            "name": "param",
+                            "text": "config"
+                        }]
+                }
+            }
+        };
+    }
+    static get elementRef() { return "host"; }
+    static get listeners() {
+        return [{
+                "name": "message",
+                "method": "handleEvent",
+                "target": "window",
+                "capture": false,
+                "passive": false
+            }];
+    }
+}