@everymatrix/casino-challenge-details 0.0.1

package/dist/collection/components/casino-challenge-details/casino-challenge-details.js

@@ -0,0 +1,684 @@
+import { h } from "@stencil/core";
+import { setClientStyling, setClientStylingURL, setStreamStyling } from "../../../../../../../../libs/common/src/styling/index";
+import { resolveTranslationUrl, translate } from "../../utils/locale.utils";
+import { formatDate, getTimeLeft } from "../../utils/utils";
+import giftIcon from "../../assets/gift.svg";
+import targetIcon from "../../assets/target.svg";
+import backIcon from "../../assets/back-arrow.svg";
+import lockIcon from "../../assets/lock.svg";
+import alertIcon from "../../assets/alert.svg";
+import checkIcon from "../../assets/check.svg";
+import infoIcon from "../../assets/info-circle.svg";
+import titleIcon from "../../assets/title-icon.svg";
+import notificationIcon from "../../assets/notification.svg";
+import { ChallengeStatusDictionary, EChallengeLevelTargetType, EChallengeProgressStatus, EChallengeStatus } from "../../utils/types";
+export class CasinoChallengeDetails {
+    constructor() {
+        this.activeEntityRef = null;
+        this.scrollContainerRef = null;
+        this.challengesTabs = ['Active', 'Pending', 'Finished', 'Code'];
+        this.tabs = ['LEVELS', 'GAMES', 'RULES'];
+        this.showNotification = 10;
+        this.checkIsMobile = () => {
+            this.isMobile = window.innerWidth <= 768;
+        };
+        this.calculateTargetValue = (level, currencySymbol) => {
+            var _a;
+            if (!level)
+                return '';
+            const minbet = ((_a = level.BetRange) === null || _a === void 0 ? void 0 : _a.MinBet)
+                ? `, ${translate('minBet', this.language)} ${currencySymbol + level.BetRange.MinBet}`
+                : '';
+            switch (level.LevelTargetType) {
+                case EChallengeLevelTargetType.Accumulative:
+                    return `${translate('placeBetsOf', this.language)} ${currencySymbol + level.DisplayCurrencyTargetTurnover + minbet}`;
+                case EChallengeLevelTargetType.SingleBet:
+                    return `${translate('place', this.language)} ${currencySymbol + level.TargetTurnover} ${translate('bet', this.language)}`;
+                case EChallengeLevelTargetType.MultipleOneBetSize:
+                    return `${translate('place', this.language)} ${level.TargetBetCount} ${translate('bets', this.language) + minbet}`;
+                default:
+                    return '-';
+            }
+        };
+        this.getBadgeContent = () => {
+            var _a;
+            if (this.challenge) {
+                switch ((_a = this.challenge) === null || _a === void 0 ? void 0 : _a.Status) {
+                    case EChallengeStatus.Expired:
+                        return translate('expired', this.language);
+                    case EChallengeStatus.Forfeited:
+                        return translate('forfeited', this.language);
+                    case EChallengeStatus.Completed:
+                        return translate('finished', this.language);
+                    case EChallengeStatus.Paused:
+                        return translate('suspended', this.language);
+                    default:
+                        return [translate('endsIn', this.language), ' - ', h("span", null, this.timeLeft || null)];
+                }
+            }
+            else
+                return null;
+        };
+        this.checkAttrs = () => {
+            if (!this.endpoint) {
+                this.error = 'Endpoint is missing! Please provide a valid endpointURL.';
+                this.hasError = true;
+                console.error(this.error);
+            }
+            return this.hasError;
+        };
+        this.joinUnjoinProgress = async () => {
+            var _a, _b, _c, _d;
+            if (!this.isUserAuthorized) {
+                this.openLoginRegisterModal();
+            }
+            const join = ((_a = this.challenge) === null || _a === void 0 ? void 0 : _a.Status) === EChallengeStatus.Started || ((_b = this.challenge) === null || _b === void 0 ? void 0 : _b.Status) === EChallengeStatus.Paused;
+            const progress = (_d = (_c = this.challenge) === null || _c === void 0 ? void 0 : _c.LevelProgresses) === null || _d === void 0 ? void 0 : _d.find((x) => (x === null || x === void 0 ? void 0 : x.ProgressStatus) === EChallengeProgressStatus.InProgress);
+            if (!this.checkAttrs()) {
+                const url = `${this.endpoint}/challenge/ChangeProgressStatus`;
+                const body = Object.assign(Object.assign({ DomainId: this.domain }, (this.session && { PlayerSessionId: this.session })), (join ? { ProgressToActivate: progress.LevelId } : { ProgressToDeactivate: progress.LevelId }));
+                this.actionLoading = true;
+                return fetch(url, {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json'
+                    },
+                    body: JSON.stringify(body)
+                })
+                    .then((res) => res.json())
+                    .finally(() => (this.actionLoading = false));
+            }
+        };
+        this.handleTabClick = (index) => () => {
+            if (index === 0) {
+                setTimeout(() => {
+                    this.scrollToActiveLevel();
+                }, 0);
+            }
+            if (index === 1) {
+                this.fetchGames();
+            }
+            this.activeTabIndex = index;
+        };
+        this.handleChallengesTabClick = (tabIndex) => () => {
+            window.postMessage({ type: 'GoToChallengesPage', tabIndex }, window.location.href);
+        };
+        this.getBackButtonText = () => {
+            return (h("span", { class: "back-button__text" }, this.isMobile ? translate('all', this.language) : translate('back', this.language)));
+        };
+        this.mbSource = undefined;
+        this.clientStyling = undefined;
+        this.endpoint = '';
+        this.domain = '';
+        this.session = '';
+        this.clientStylingUrl = undefined;
+        this.translationUrl = '';
+        this.language = 'en';
+        this.isUserAuthorized = true;
+        this.challengeId = '';
+        this.activeChallengeTabIndex = '0';
+        this.timeLeft = undefined;
+        this.activeTabIndex = 0;
+        this.actionLoading = false;
+        this.isMobile = false;
+        this.error = '';
+        this.hasError = false;
+        this.games = [];
+        this.gamesAreLoading = false;
+        this.challenge = undefined;
+        this.loading = false;
+    }
+    handleClientStylingChange(newValue, oldValue) {
+        if (newValue != oldValue) {
+            setClientStyling(this.stylingContainer, this.clientStyling);
+        }
+    }
+    handleClientStylingUrlChange(newValue, oldValue) {
+        if (newValue != oldValue) {
+            setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
+        }
+    }
+    handleMbSourceChange(newValue, oldValue) {
+        if (newValue != oldValue) {
+            setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`, this.stylingSubscription);
+        }
+    }
+    onEntityChange(newChallenge, previousChallenge) {
+        var _a, _b, _c, _d;
+        const newActiveProgressId = (_b = (_a = newChallenge === null || newChallenge === void 0 ? void 0 : newChallenge.LevelProgresses) === null || _a === void 0 ? void 0 : _a.find((level) => level.ProgressStatus === EChallengeProgressStatus.InProgress)) === null || _b === void 0 ? void 0 : _b.LevelId;
+        const prevActiveProgressId = (_d = (_c = previousChallenge === null || previousChallenge === void 0 ? void 0 : previousChallenge.LevelProgresses) === null || _c === void 0 ? void 0 : _c.find((level) => level.ProgressStatus === EChallengeProgressStatus.InProgress)) === null || _d === void 0 ? void 0 : _d.LevelId;
+        if (newActiveProgressId == prevActiveProgressId) {
+            setTimeout(() => {
+                this.scrollToActiveLevel();
+            }, 0);
+        }
+    }
+    scrollToActiveLevel() {
+        if (this.activeEntityRef) {
+            const container = this.scrollContainerRef;
+            const target = this.activeEntityRef;
+            const containerTop = container.getBoundingClientRect().top;
+            const targetTop = target.getBoundingClientRect().top;
+            const scrollOffset = targetTop - containerTop;
+            container.scrollTo({
+                top: container.scrollTop + scrollOffset - container.clientHeight / 2 + target.clientHeight / 2,
+                behavior: 'smooth'
+            });
+        }
+    }
+    connectedCallback() {
+        this.timerId = setInterval(() => {
+            this.updateTime();
+        }, 1000);
+    }
+    async getChallenge() {
+        if (!this.checkAttrs()) {
+            const url = `${this.endpoint}/challenge/GetChallengesInfo`;
+            const body = Object.assign({ DomainId: this.domain, PlayerLanguage: this.language, PageNumber: 1, PageSize: 1, ChallengeId: this.challengeId }, (this.session && { PlayerSessionId: this.session }));
+            this.loading = true;
+            return fetch(url, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify(body)
+            })
+                .then((res) => res.json())
+                .then((res) => {
+                this.challenge = res.Data[0];
+            })
+                .finally(() => (this.loading = false));
+        }
+    }
+    componentWillLoad() {
+        if (this.translationUrl) {
+            resolveTranslationUrl(this.translationUrl);
+        }
+        this.updateTime();
+    }
+    componentDidLoad() {
+        if (this.stylingContainer) {
+            if (this.mbSource)
+                setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`, this.stylingSubscription);
+            if (this.clientStyling)
+                setClientStyling(this.stylingContainer, this.clientStyling);
+            if (this.clientStylingUrl)
+                setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
+        }
+        this.getChallenge();
+        this.checkIsMobile();
+        window.addEventListener('resize', this.checkIsMobile);
+        setTimeout(() => {
+            this.scrollToActiveLevel();
+        }, 0);
+    }
+    disconnectedCallback() {
+        if (this.stylingSubscription) {
+            this.stylingSubscription.unsubscribe();
+        }
+        clearInterval(this.timerId);
+        window.removeEventListener('resize', this.checkIsMobile);
+    }
+    getReward(level) {
+        return level.Rewards.map((r) => r.RewardDescription).join(' + ') || '-';
+    }
+    getTarget(level) {
+        var _a;
+        return this.calculateTargetValue(level, (_a = this.challenge) === null || _a === void 0 ? void 0 : _a.CurrencySymbol) || '-';
+    }
+    updateTime() {
+        var _a, _b;
+        if (this.challenge) {
+            this.timeLeft = getTimeLeft((_a = this.challenge) === null || _a === void 0 ? void 0 : _a.ExpirationTime);
+            if (!this.timeLeft && this.timerExpired) {
+                clearInterval(this.timerId);
+                this.timerExpired.emit((_b = this.challenge) === null || _b === void 0 ? void 0 : _b.Id);
+            }
+        }
+    }
+    get getCardBadge() {
+        var _a;
+        if (this.timeLeft) {
+            return (h("div", { class: `details__general-info-timer-badge ${ChallengeStatusDictionary[(_a = this.challenge) === null || _a === void 0 ? void 0 : _a.Status]}` }, this.getBadgeContent()));
+        }
+        return null;
+    }
+    get actionButtonText() {
+        var _a;
+        if (this.isUserAuthorized) {
+            let buttonText;
+            switch ((_a = this.challenge) === null || _a === void 0 ? void 0 : _a.Status) {
+                case EChallengeStatus.Started:
+                    buttonText = 'start';
+                    break;
+                case EChallengeStatus.Paused:
+                    buttonText = 'resume';
+                    break;
+                case EChallengeStatus.InProgress:
+                    buttonText = 'resume';
+                    break;
+                case EChallengeStatus.PendingLevelReward:
+                    buttonText = 'pause';
+                    break;
+                default:
+                    buttonText = 'start';
+                    break;
+            }
+            return buttonText;
+        }
+        return 'join';
+    }
+    openLoginRegisterModal() {
+        window.postMessage({
+            type: 'OpenLoginRegisterModal',
+            transition: 'Login'
+        });
+    }
+    async fetchGames() {
+        var _a;
+        if (!this.checkAttrs()) {
+            const url = `${this.endpoint}/challenge/GetChallengeGames`;
+            const body = Object.assign({ ChallengeId: (_a = this.challenge) === null || _a === void 0 ? void 0 : _a.ChallengeId }, (this.session && { PlayerSessionId: this.session }));
+            this.gamesAreLoading = true;
+            return fetch(url, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify(body)
+            })
+                .then((res) => res.json())
+                .then((res) => {
+                this.games = res.ChallengeGames;
+            })
+                .finally(() => (this.gamesAreLoading = false));
+        }
+    }
+    getLevelStatus(level, active) {
+        if (this.isUserAuthorized) {
+            if (level.ProgressStatus === EChallengeProgressStatus.InProgress && !active)
+                return (h("div", { class: "level__status" }, h("span", null, level.ProgressPercentage, "%"), h("img", { src: lockIcon, alt: "lock-icon", title: "lock-icon" })));
+            else if (level.ProgressStatus === EChallengeProgressStatus.Closed || !active)
+                return (h("div", { class: "level__status" }, h("img", { src: lockIcon, alt: "lock-icon", title: "lock-icon" })));
+            else if (level.ProgressStatus === EChallengeProgressStatus.Fillup)
+                return (h("div", { class: "level__status" }, h("img", { src: lockIcon, alt: "lock-icon", title: "lock-icon" })));
+            else if (level.ProgressStatus === EChallengeProgressStatus.Completed)
+                return h("span", { class: "completed" }, translate('completed', this.language));
+            else if (level.ProgressStatus === EChallengeProgressStatus.InProgress)
+                return h("span", { class: "level__status in-progress" }, level.ProgressPercentage, "%");
+        }
+        return null;
+    }
+    get pageHeader() {
+        return (h("div", { class: "challenges-header" }, h("h1", { class: "challenges-title" }, h("img", { src: titleIcon, alt: "icon" }), translate('title', this.language)), this.isUserAuthorized && (h("div", { class: "challenges-tabs" }, this.challengesTabs.map((label, index) => (h("div", { class: `challenges-tab ${index === +this.activeChallengeTabIndex ? 'active' : ''}`, onClick: this.handleChallengesTabClick(index) }, label, this.showNotification === index && h("img", { src: notificationIcon }))))))));
+    }
+    get cardGeneralInfo() {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+        return (h("div", { class: "details__general-info" }, h("div", { class: "details__general-info-image-container" }, h("img", { class: {
+                'details__general-info-image': true,
+                grayed: [EChallengeStatus.Expired, EChallengeStatus.Forfeited, EChallengeStatus.Completed].includes((_a = this.challenge) === null || _a === void 0 ? void 0 : _a.Status)
+            }, src: (_c = (_b = this.challenge) === null || _b === void 0 ? void 0 : _b.ChallengePresentation) === null || _c === void 0 ? void 0 : _c.BannerUrl, alt: "banner-image", title: "banner-image" }), this.getCardBadge), h("div", { class: "details__general-info-content" }, h("h1", { class: "details__general-info-title" }, (_e = (_d = this.challenge) === null || _d === void 0 ? void 0 : _d.ChallengePresentation) === null || _e === void 0 ? void 0 : _e.PresentationName), h("h3", { class: "details__general-info-end-date_label" }, translate('endDate', this.language), " -", ' ', h("span", { class: "details__general-info-end-date_value" }, this.challenge ? formatDate((_f = this.challenge) === null || _f === void 0 ? void 0 : _f.ExpirationTime) : '-')), h("casino-challenge-progress-bar", { challenge: this.challenge, isUserAuthorized: this.isUserAuthorized, language: this.language }), h("button", { class: {
+                'details__general-info-action-button': true,
+                filled: ((_g = this.challenge) === null || _g === void 0 ? void 0 : _g.Status) === EChallengeStatus.Started,
+                grayed: ((_h = this.challenge) === null || _h === void 0 ? void 0 : _h.Status) === EChallengeStatus.Paused ||
+                    ((_j = this.challenge) === null || _j === void 0 ? void 0 : _j.Status) === EChallengeStatus.InProgress ||
+                    ((_k = this.challenge) === null || _k === void 0 ? void 0 : _k.Status) === EChallengeStatus.PendingLevelReward
+            }, disabled: this.actionLoading, onClick: this.joinUnjoinProgress }, translate(this.actionButtonText, this.language)))));
+    }
+    get challengeTabs() {
+        return (h("div", { class: "details__tabs" }, this.tabs.map((label, index) => (h("div", { class: {
+                details__tab: true,
+                active: index === this.activeTabIndex
+            }, onClick: this.handleTabClick(index) }, label))), h("div", { class: "active-tab-indicator" })));
+    }
+    get levelsTab() {
+        var _a, _b;
+        return (h("div", { class: "levels__tab", ref: (el) => (this.scrollContainerRef = el) }, (_b = (_a = this.challenge) === null || _a === void 0 ? void 0 : _a.LevelProgresses) === null || _b === void 0 ? void 0 : _b.map((level, index) => {
+            var _a;
+            const activeChallenge = [0, 1, 2, 3].includes((_a = this === null || this === void 0 ? void 0 : this.challenge) === null || _a === void 0 ? void 0 : _a.Status);
+            const isGrayed = (this.isUserAuthorized && level.ProgressStatus !== EChallengeProgressStatus.InProgress) || !activeChallenge;
+            const isActiveMatch = level.ProgressStatus === EChallengeProgressStatus.InProgress;
+            return (h("div", { class: {
+                    level: true,
+                    active: this.isUserAuthorized &&
+                        activeChallenge &&
+                        level.ProgressStatus === EChallengeProgressStatus.InProgress,
+                    completed: this.isUserAuthorized &&
+                        activeChallenge &&
+                        level.ProgressStatus === EChallengeProgressStatus.Completed,
+                    grayed: this.isUserAuthorized &&
+                        (level.ProgressStatus === EChallengeProgressStatus.Closed ||
+                            level.ProgressStatus === EChallengeProgressStatus.Fillup)
+                }, ref: isActiveMatch ? (el) => (this.activeEntityRef = el) : undefined, key: level.LevelId }, h("div", { class: {
+                    level__title: true,
+                    grayed: isGrayed
+                } }, h("span", null, "Level ", index + 1), this.isUserAuthorized && this.getLevelStatus(level, activeChallenge)), this.isUserAuthorized && level.ProgressStatus === EChallengeProgressStatus.InProgress && (h("div", { class: "level__progress" }, h("casino-challenge-level-progress-bar", { height: "8px", value: level.ProgressPercentage, active: activeChallenge }))), h("casino-challenge-expandable-paragraph", { "max-height": "56", active: level.ProgressStatus === EChallengeProgressStatus.InProgress && activeChallenge }, h("div", { class: {
+                    level__bonus: true,
+                    grayed: isGrayed
+                } }, h("span", { class: "level__icon" }, h("img", { class: {
+                    grayed: isGrayed
+                }, src: giftIcon, alt: "gift-icon", title: "gift-icon" })), h("span", { class: {
+                    level__value: true,
+                    grayed: isGrayed
+                } }, this.getTarget(level))), h("div", { class: {
+                    level__target: true,
+                    grayed: isGrayed
+                } }, h("span", { class: "level__icon" }, h("img", { class: {
+                    grayed: isGrayed
+                }, src: targetIcon, alt: "target-icon", title: "target-icon" })), h("span", { class: {
+                    level__value: true,
+                    grayed: isGrayed
+                } }, this.getReward(level))))));
+        })));
+    }
+    handleGameClick(game) {
+        if (!this.isUserAuthorized) {
+            this.openLoginRegisterModal();
+            return;
+        }
+        window.postMessage({
+            type: 'GameClick',
+            detail: {
+                ClientCompatibility: game.ClientCompatibility,
+                GameId: game.GameId,
+                GameName: game.GameName,
+                GameLaunchUrl: game.GameLaunchUrl,
+                RestrictedCountries: game.RestrictedCountries,
+                Vendor: game.Vendor
+            }
+        });
+    }
+    get gamesTab() {
+        return (h("div", { class: "games__tab" }, this.gamesAreLoading ? (h("div", { class: "lds-dual-ring" })) : (this.games.map((game) => {
+            return (h("div", { class: "game", onClick: () => this.handleGameClick(game) }, h("img", { src: game.GameIcon, alt: "game-icon", title: "game-icon" }), h("span", { class: "contribution" }, translate('contribution', this.language), " ", game.Contribution, "%")));
+        }))));
+    }
+    get rulesTab() {
+        var _a, _b, _c, _d;
+        return (h("div", { class: "rules__tab" }, h("div", { class: "rule" }, (_b = (_a = this.challenge) === null || _a === void 0 ? void 0 : _a.ChallengePresentation) === null || _b === void 0 ? void 0 : _b.Description), h("a", { class: "link", href: (_d = (_c = this.challenge) === null || _c === void 0 ? void 0 : _c.ChallengePresentation) === null || _d === void 0 ? void 0 : _d.Url, target: "_blank" }, translate('terms', this.language))));
+    }
+    get footer() {
+        var _a, _b, _c, _d;
+        return (h("div", { class: "button__container" }, h("button", { class: {
+                'footer-action-button': true,
+                filled: ((_a = this.challenge) === null || _a === void 0 ? void 0 : _a.Status) === EChallengeStatus.Started || !this.isUserAuthorized,
+                grayed: this.isUserAuthorized &&
+                    (((_b = this.challenge) === null || _b === void 0 ? void 0 : _b.Status) === EChallengeStatus.Paused ||
+                        ((_c = this.challenge) === null || _c === void 0 ? void 0 : _c.Status) === EChallengeStatus.InProgress ||
+                        ((_d = this.challenge) === null || _d === void 0 ? void 0 : _d.Status) === EChallengeStatus.PendingLevelReward)
+            }, onClick: this.joinUnjoinProgress, disabled: this.actionLoading }, translate(this.actionButtonText, this.language))));
+    }
+    get forfeitedNofitication() {
+        var _a;
+        return (((_a = this.challenge) === null || _a === void 0 ? void 0 : _a.Status) === 5 && (h("div", { class: "notification" }, h("img", { class: "notification__icon", src: alertIcon }), h("span", { class: "notification__message" }, translate('forfeitNotification', this.language)))));
+    }
+    get completedNotification() {
+        var _a;
+        return (((_a = this.challenge) === null || _a === void 0 ? void 0 : _a.Status) === 3 && (h("div", { class: "notification" }, h("img", { class: "notification__icon", src: checkIcon }), h("div", { class: "notification__column" }, h("span", { class: "notification__title" }, translate('congrats', this.language)), h("span", { class: "notification__message" }, translate('completedNofitication', this.language))))));
+    }
+    get expiredNotification() {
+        var _a;
+        return (((_a = this.challenge) === null || _a === void 0 ? void 0 : _a.Status) === 4 && (h("div", { class: "notification" }, h("img", { class: "notification__icon", src: infoIcon }), h("span", { class: "notification__message" }, translate('expiredNotification', this.language)))));
+    }
+    render() {
+        return (h("div", { key: 'ac5dde048e4d00efd0a174bb3b077ecc5e7abce7', ref: (el) => (this.stylingContainer = el), class: "container" }, this.pageHeader, this.loading ? (h("div", { class: "lds-dual-ring" })) : (h("div", null, h("button", { class: "back-button" }, h("img", { class: "back-button__icon", src: backIcon }), this.getBackButtonText()), this.forfeitedNofitication, this.completedNotification, this.expiredNotification, h("div", { class: "details" }, this.cardGeneralInfo, h("div", { class: "details__tabs-container" }, this.challengeTabs, this.activeTabIndex === 0 && this.levelsTab, this.activeTabIndex === 1 && this.gamesTab, this.activeTabIndex === 2 && this.rulesTab), this.footer)))));
+    }
+    static get is() { return "casino-challenge-details"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["casino-challenge-details.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["casino-challenge-details.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "mbSource": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Client custom styling via message bus"
+                },
+                "attribute": "mb-source",
+                "reflect": true
+            },
+            "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
+            },
+            "endpoint": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Client endpoint to fetch data"
+                },
+                "attribute": "endpoint",
+                "reflect": true,
+                "defaultValue": "''"
+            },
+            "domain": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Domain Id"
+                },
+                "attribute": "domain",
+                "reflect": true,
+                "defaultValue": "''"
+            },
+            "session": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "User session Id"
+                },
+                "attribute": "session",
+                "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 css file url"
+                },
+                "attribute": "client-styling-url",
+                "reflect": true
+            },
+            "translationUrl": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Client custom translation via json file url"
+                },
+                "attribute": "translation-url",
+                "reflect": true,
+                "defaultValue": "''"
+            },
+            "language": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Client custom language for translation"
+                },
+                "attribute": "language",
+                "reflect": true,
+                "defaultValue": "'en'"
+            },
+            "isUserAuthorized": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Is User authorized"
+                },
+                "attribute": "is-user-authorized",
+                "reflect": true,
+                "defaultValue": "true"
+            },
+            "challengeId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Challenge id"
+                },
+                "attribute": "challenge-id",
+                "reflect": true,
+                "defaultValue": "''"
+            },
+            "activeChallengeTabIndex": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Challenges active tab index"
+                },
+                "attribute": "active-challenge-tab-index",
+                "reflect": true,
+                "defaultValue": "'0'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "timeLeft": {},
+            "activeTabIndex": {},
+            "actionLoading": {},
+            "isMobile": {},
+            "error": {},
+            "hasError": {},
+            "games": {},
+            "gamesAreLoading": {},
+            "challenge": {},
+            "loading": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "timerExpired",
+                "name": "timerExpired",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }];
+    }
+    static get watchers() {
+        return [{
+                "propName": "clientStyling",
+                "methodName": "handleClientStylingChange"
+            }, {
+                "propName": "clientStylingUrl",
+                "methodName": "handleClientStylingUrlChange"
+            }, {
+                "propName": "mbSource",
+                "methodName": "handleMbSourceChange"
+            }, {
+                "propName": "challenge",
+                "methodName": "onEntityChange"
+            }];
+    }
+}