@everymatrix/casino-engagement-suite-jackpot-details 1.0.69

package/dist/esm/casino-engagement-suite-jackpot-details.entry.js

@@ -0,0 +1,386 @@
+import { r as registerInstance, c as createEvent, h, g as getElement } from './index-0237d1e2.js';
+
+function _typeof(o) {
+  "@babel/helpers - typeof";
+
+  return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) {
+    return typeof o;
+  } : function (o) {
+    return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o;
+  }, _typeof(o);
+}
+
+function requiredArgs(required, args) {
+  if (args.length < required) {
+    throw new TypeError(required + ' argument' + (required > 1 ? 's' : '') + ' required, but only ' + args.length + ' present');
+  }
+}
+
+/**
+ * @name toDate
+ * @category Common Helpers
+ * @summary Convert the given argument to an instance of Date.
+ *
+ * @description
+ * Convert the given argument to an instance of Date.
+ *
+ * If the argument is an instance of Date, the function returns its clone.
+ *
+ * If the argument is a number, it is treated as a timestamp.
+ *
+ * If the argument is none of the above, the function returns Invalid Date.
+ *
+ * **Note**: *all* Date arguments passed to any *date-fns* function is processed by `toDate`.
+ *
+ * @param {Date|Number} argument - the value to convert
+ * @returns {Date} the parsed date in the local time zone
+ * @throws {TypeError} 1 argument required
+ *
+ * @example
+ * // Clone the date:
+ * const result = toDate(new Date(2014, 1, 11, 11, 30, 30))
+ * //=> Tue Feb 11 2014 11:30:30
+ *
+ * @example
+ * // Convert the timestamp to date:
+ * const result = toDate(1392098430000)
+ * //=> Tue Feb 11 2014 11:30:30
+ */
+function toDate(argument) {
+  requiredArgs(1, arguments);
+  var argStr = Object.prototype.toString.call(argument);
+
+  // Clone the date
+  if (argument instanceof Date || _typeof(argument) === 'object' && argStr === '[object Date]') {
+    // Prevent the date to lose the milliseconds when passed to new Date() in IE10
+    return new Date(argument.getTime());
+  } else if (typeof argument === 'number' || argStr === '[object Number]') {
+    return new Date(argument);
+  } else {
+    if ((typeof argument === 'string' || argStr === '[object String]') && typeof console !== 'undefined') {
+      // eslint-disable-next-line no-console
+      console.warn("Starting with v2.0.0-beta.1 date-fns doesn't accept strings as date arguments. Please use `parseISO` to parse strings. See: https://github.com/date-fns/date-fns/blob/master/docs/upgradeGuide.md#string-arguments");
+      // eslint-disable-next-line no-console
+      console.warn(new Error().stack);
+    }
+    return new Date(NaN);
+  }
+}
+
+/**
+ * @name isBefore
+ * @category Common Helpers
+ * @summary Is the first date before the second one?
+ *
+ * @description
+ * Is the first date before the second one?
+ *
+ * @param {Date|Number} date - the date that should be before the other one to return true
+ * @param {Date|Number} dateToCompare - the date to compare with
+ * @returns {Boolean} the first date is before the second date
+ * @throws {TypeError} 2 arguments required
+ *
+ * @example
+ * // Is 10 July 1989 before 11 February 1987?
+ * const result = isBefore(new Date(1989, 6, 10), new Date(1987, 1, 11))
+ * //=> false
+ */
+function isBefore(dirtyDate, dirtyDateToCompare) {
+  requiredArgs(2, arguments);
+  var date = toDate(dirtyDate);
+  var dateToCompare = toDate(dirtyDateToCompare);
+  return date.getTime() < dateToCompare.getTime();
+}
+
+const DEFAULT_LANGUAGE = 'en';
+const SUPPORTED_LANGUAGES = ['en'];
+const TRANSLATIONS = {
+    en: {
+        jackpots: 'Jackpots',
+        join: 'Join',
+        unjoin: 'Unjoin',
+        info: 'Info',
+        games: 'Games',
+        operatorContribution: 'Operator Contribution',
+        type: 'Type',
+        winningProbability: 'Winning Probability',
+        tc: 'Terms & Conditions',
+        jackpotIsWon: 'Jackpot’s won!',
+        loadMore: 'Load More',
+        jackpotDetails: 'Jackpot Details',
+    }
+};
+const translate = (key, customLang) => {
+    const lang = customLang;
+    return TRANSLATIONS[lang !== undefined && SUPPORTED_LANGUAGES.includes(lang) ? lang : DEFAULT_LANGUAGE][key];
+};
+
+function formatBalance(amount, currency, maxAmount = 99999999) {
+    amount = Math.min(amount, maxAmount);
+    return `${currency} ${new Intl.NumberFormat('en', { minimumFractionDigits: 2, maximumFractionDigits: 2 })
+        .format(amount)}`;
+}
+
+const casinoEngagementSuiteJackpotDetailsCss = ":host{display:block;font-family:inherit}*{box-sizing:border-box;margin:0;padding:0}button{border:none;background:none}button:focus{outline:none}button:not(:disabled){cursor:pointer}.PopupButton{background:linear-gradient(98.25deg, #FF9400 22.48%, #FEF746 131.02%, #FFE24A 131.9%);color:var(--emw--color-typography, #1E1638);border-radius:99px;min-width:88px;min-height:32px;font-size:14px;font-weight:700;position:relative;font-family:\"Montserrat\", sans-serif}.PopupButton.Active{background:linear-gradient(98.25deg, #FF9400 22.48%, #FEF746 131.02%, #FFE24A 131.9%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.PopupButton.Active::before{content:\"\";position:absolute;inset:0;padding:1px;background:linear-gradient(98.25deg, #FF9400 22.48%, #FEF746 131.02%, #FFE24A 131.9%);-webkit-mask:linear-gradient(#FFF 0 0) content-box, linear-gradient(#FFF 0 0);-webkit-mask-composite:xor;mask-composite:exclude;border-radius:99px}.PopupButton.Loading{opacity:0.5;pointer-events:none}.JackpotDetailsPopup{display:flex;height:100%;background-color:var(--emw--color-background, #1E1638);border-radius:8px;overflow:hidden;flex-direction:column;position:relative}.JackpotDetailsPopup.Disabled .JackpotDetailsHeader{opacity:0.5}.JackpotDetailsPopup.Disabled .JackpotDetailsTabs{cursor:default;pointer-events:none}.JackpotDetailsPopup.Disabled .JackpotInfoItem{color:var(--emw--color-primary, #8F8B9C)}.JackpotGamesListWrapper,.JackpotInfoTabContent{overflow-x:auto;scrollbar-gutter:stable}.JackpotGamesListWrapper::-webkit-scrollbar,.JackpotInfoTabContent::-webkit-scrollbar{width:3px;background:none}.JackpotGamesListWrapper::-webkit-scrollbar-thumb,.JackpotInfoTabContent::-webkit-scrollbar-thumb{border-radius:4px;background:var(--emw--color-gray-transparency-30, rgba(255, 255, 255, 0.3))}.JackpotDetailsNavigation{display:flex;justify-content:space-between;align-items:center;padding:12px 8px 8px}.JackpotDetailsNavigation .JackpotIconButton{width:16px;height:16px;cursor:pointer;display:flex;justify-content:center;align-items:center}.JackpotDetailsNavigation .JackpotPopupName{color:var(--emw--color-gray-100, #BBB9C3);font-size:16px;font-weight:500;line-height:16px;display:none}.JackpotDetailsPopupContent{padding:8px 18px 18px;overflow:hidden;height:100%;display:flex;flex-direction:column}.JackpotDetailsHeader{display:flex;justify-content:space-between;align-items:center;gap:12px}.JackpotDetailsHeader .JackpotDetailsHeaderSecondCol{text-align:right}.JackpotDetailsHeader .JackpotType{text-transform:uppercase;font-family:\"Montserrat\", sans-serif;font-size:var(--emw--font-size-medium, 18px);font-weight:var(--emw--font-weight-bold, 700);line-height:22px;color:var(--emfe-w-color-white, #FFF);word-break:break-all}.JackpotDetailsHeader .JackpotBalance{margin-top:8px;font-family:Montserrat, sans-serif;font-size:18px;font-weight:var(--emw--font-weight-bold, 800);line-height:18px}.JackpotDetailsHeader .JackpotIsWon{margin-top:8px;font-family:Montserrat, sans-serif;font-weight:var(--emw--font-weight-bold, 700);font-size:12px;line-height:15px;background:linear-gradient(98.25deg, #FF9400 22.48%, #FEF746 131.02%, #FFE24A 131.9%);-webkit-text-fill-color:transparent;-webkit-background-clip:text}.JackpotDetailsPopup.Mega .JackpotBalance{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}.JackpotDetailsPopup.Major .JackpotBalance{background:linear-gradient(180deg, #A19FA0 5.36%, #E1DBDB 28.86%, #FEFFFF 36.86%, #E1DBDB 44.36%, #5E5B5F 91.86%);-webkit-text-fill-color:transparent;-webkit-background-clip:text}.JackpotDetailsPopup.Minor .JackpotBalance{background:linear-gradient(180deg, #A0522C 5.36%, #FFAB8C 28.86%, #FFEEDF 36.86%, #FFAB8C 44.36%, #6A3A21 91.86%);-webkit-text-fill-color:transparent;-webkit-background-clip:text}.JackpotGamesLoadMore::before,.JackpotJoinButton.Joined::before{content:\"\";position:absolute;inset:0;border-radius:var(--emw--button-border-radius, 4px);padding:1px;background:linear-gradient(98.25deg, #FF9400 22.48%, #FEF746 131.02%, #FFE24A 131.9%);-webkit-mask:linear-gradient(#FFF 0 0) content-box, linear-gradient(#FFF 0 0);-webkit-mask-composite:xor;mask-composite:exclude}.JackpotGamesButton{margin-top:12px;align-self:center;min-width:140px}.JackpotCountdown{font-size:var(--emw--font-size-x-small, 12px);line-height:12px;margin-top:12px;color:var(--emw--color-gray-150, #BBB9C3)}.JackpotCountdown.Suspended{font-weight:var(--emw--font-weight-bold, 700);color:var(--emfe-w-color-white, #FFF);text-transform:capitalize}.JackpotDetailsTabsWrapper{display:flex;flex-direction:column}.JackpotDetailsTabs{margin:20px 0 12px;display:flex;position:relative}.JackpotDetailsTabs .JackpotDetailsTab{padding:9px 16px 7px;font-weight:500;font-size:12px;line-height:15px;color:var(--emw--color-background, #666178);border-bottom:2px solid transparent;cursor:pointer}.JackpotDetailsTabs .JackpotDetailsTab.Active{color:var(--emw--color-typography, #FFF);border-color:var(--emw--color-typography, #FFF)}.JackpotDetailsTabs::after{content:\"\";position:absolute;bottom:0;left:0;width:100%;height:1px;background-color:var(--emw--color-typography, #FFF);opacity:0.1}.JackpotInfoItem{margin-bottom:8px;color:var(--emw--color-typography, #FFF);font-size:14px;line-height:17px}.JackpotInfoItem span{font-weight:var(--emw--font-weight-bold, 700)}.JackpotInfoItem .tc{color:var(--emw--color-primary, #59D1FF)}.JackpotGamesListWrapper{overflow:auto;flex-grow:1}.JackpotGamesList{display:flex;gap:10px;flex-wrap:wrap}.JackpotGamesList .JackpotGamesListItem{width:calc(25% - 8px);aspect-ratio:74/40;cursor:pointer}.JackpotGamesList .JackpotGamesListItem.Disabled{opacity:0.5;pointer-events:none;cursor:auto}.JackpotDetailsButton{margin-bottom:12px;display:flex;align-items:center;font-size:var(--emw--font-size-x-small, 12px);line-height:12px;color:var(--emw--color-primary-variant, #666178);cursor:pointer}.JackpotDetailsButton .Toggle{width:16px;height:16px;margin-right:4px}.JackpotDetailsButton .Closed{background:center/100% url(\"https://static.everymatrix.com/gic/img/engagement-suite/eye-closed.svg\")}.JackpotDetailsButton .Open{background:center/100% url(\"https://static.everymatrix.com/gic/img/engagement-suite/eye-open.svg\")}.JackpotDescription{margin-bottom:20px;color:var(--emw--color-typography, #FFF);font-size:var(--emw--font-size-small, 14px);line-height:17px}.JackpotDetailsPopup.Tablet .JackpotDetailsButton,.JackpotDetailsPopup.Desktop .JackpotDetailsButton{margin-bottom:20px}.JackpotDetailsPopup.Tablet .JackpotDescription,.JackpotDetailsPopup.Desktop .JackpotDescription{font-size:var(--emw--font-size-medium, 16px);line-height:22px}.JackpotDetailsPopup.Tablet .JackpotPopupName,.JackpotDetailsPopup.Desktop .JackpotPopupName{display:block}.JackpotDetailsPopup.Tablet .JackpotDetailsNavigation,.JackpotDetailsPopup.Desktop .JackpotDetailsNavigation{padding-top:16px}.JackpotDetailsPopup.Tablet .JackpotIconButton,.JackpotDetailsPopup.Desktop .JackpotIconButton{width:24px;height:24px}.JackpotDetailsPopup.Tablet .JackpotDetailsPopupContent,.JackpotDetailsPopup.Desktop .JackpotDetailsPopupContent{padding:20px 24px 30px}.JackpotDetailsPopup.Tablet .JackpotBalance,.JackpotDetailsPopup.Tablet .JackpotType,.JackpotDetailsPopup.Desktop .JackpotBalance,.JackpotDetailsPopup.Desktop .JackpotType{line-height:27px;font-size:22px}.JackpotDetailsPopup.Tablet .JackpotBalance,.JackpotDetailsPopup.Desktop .JackpotBalance{font-weight:var(--emw--font-weight-bold, 700)}.JackpotDetailsPopup.Tablet .PopupButton,.JackpotDetailsPopup.Desktop .PopupButton{min-height:36px;font-size:16px}.JackpotDetailsPopup.Tablet .JackpotCountdown,.JackpotDetailsPopup.Desktop .JackpotCountdown{font-size:var(--emw--font-size-small, 14px);line-height:14px}.JackpotDetailsPopup.Tablet .JackpotDetailsTabs,.JackpotDetailsPopup.Desktop .JackpotDetailsTabs{margin-bottom:20px}.JackpotDetailsPopup.Tablet .JackpotInfoItem,.JackpotDetailsPopup.Desktop .JackpotInfoItem{font-size:16px;line-height:20px}.JackpotDetailsPopup.Tablet .JackpotIsWon,.JackpotDetailsPopup.Desktop .JackpotIsWon{font-size:14px;line-height:17px}.JackpotDetailsPopup.Tablet .JackpotGamesList,.JackpotDetailsPopup.Desktop .JackpotGamesList{gap:12px}.JackpotDetailsPopup.Tablet .JackpotGamesList .JackpotGamesListItem,.JackpotDetailsPopup.Desktop .JackpotGamesList .JackpotGamesListItem{width:calc(20% - 10px)}.JackpotDetailsPopup.Tablet .JackpotDetailsTabs .JackpotDetailsTab,.JackpotDetailsPopup.Desktop .JackpotDetailsTabs .JackpotDetailsTab{font-size:16px;line-height:20px}";
+const CasinoEngagementSuiteJackpotDetailsStyle0 = casinoEngagementSuiteJackpotDetailsCss;
+
+const CasinoEngagementSuiteJackpotDetails = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.close = createEvent(this, "close", 7);
+        this.back = createEvent(this, "back", 7);
+        this.maxVisibleGames = 0;
+        this.handleTabChange = (e) => {
+            this.activeTab = +(e.target.getAttribute('data-index'));
+            this.visibleGames = [];
+            this.maxVisibleGames = 0;
+        };
+        this.handleLoadMore = () => {
+            this.visibleGames = this.jackpot.GamesInfo.slice(0, this.visibleGames.length + this.maxVisibleGames);
+        };
+        this.toggleShowDetails = () => {
+            this.showDetails = !this.showDetails;
+        };
+        this.toggleTooltip = () => {
+            this.showTooltip = !this.showTooltip;
+        };
+        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.handleCloseClick = () => {
+            this.close.emit();
+        };
+        this.handleBackClick = () => {
+            this.back.emit();
+        };
+        this.onGameClick = (ev) => {
+            const slug = ev.currentTarget.getAttribute('data-slug');
+            if (slug) {
+                window.postMessage({
+                    type: 'EngagementSuiteGameRedirect',
+                    data: {
+                        Slug: slug
+                    }
+                });
+            }
+        };
+        this.clientStyling = '';
+        this.clientStylingUrl = '';
+        this.jackpot = undefined;
+        this.jackpotChangeStatusRequest = undefined;
+        this.language = 'en';
+        this.gameSlug = '';
+        this.device = 'Mobile';
+        this.limitStylingAppends = false;
+        this.timer = '';
+        this.disabledStatus = '';
+        this.activeTab = 1;
+        this.visibleGames = [];
+        this.enabled = false;
+        this.balance = undefined;
+        this.winBalance = undefined;
+        this.showDetails = false;
+        this.jackpotEndTime = '';
+        this.showTooltip = false;
+    }
+    handleEvent(e) {
+        const { type, data } = e === null || e === void 0 ? void 0 : e.data;
+        switch (type) {
+            case 'UpdateJackpotStatus': {
+                const data = e.data.data;
+                if (this.jackpot.JackpotId === data.JackpotId) {
+                    this.updateJackpotStatus(e.data.data);
+                }
+                break;
+            }
+            case 'JoinJackpotResult': {
+                const res = data;
+                if (res.Success && this.jackpot.JackpotId in res.JackpotIds) {
+                    this.enabled = this.jackpot.Enabled = res.JackpotIds[this.jackpot.JackpotId];
+                }
+                break;
+            }
+        }
+    }
+    handleJackpotUpdate() {
+        this.balance = this.jackpot.Balance;
+        this.winBalance = this.jackpot.WinBalance;
+    }
+    handleResize() {
+        this.activeTab === 2 && this.setVisibleGames();
+        this.showTooltip = false;
+    }
+    componentWillLoad() {
+        this.enabled = this.jackpot.Enabled;
+        this.balance = this.jackpot.Balance;
+        this.winBalance = this.jackpot.WinBalance;
+        this.jackpotEndTime = this.jackpot.JackpotEndTime;
+        this.disabledStatus = this.jackpot.Reason || '';
+        this.startCountdown();
+    }
+    componentDidRender() {
+        if (!this.limitStylingAppends && this.host) {
+            if (this.clientStyling)
+                this.setClientStyling();
+            if (this.clientStylingUrl)
+                this.setClientStylingURL();
+            this.limitStylingAppends = true;
+        }
+        if (this.activeTab === 2 && !this.maxVisibleGames) {
+            this.setVisibleGames();
+        }
+    }
+    disconnectedCallback() {
+        this.clearInterval();
+    }
+    clearInterval() {
+        if (this.interval) {
+            clearInterval(this.interval);
+            this.interval = null;
+        }
+    }
+    setVisibleGames() {
+        const gap = this.device === 'Mobile' ? 10 : 12;
+        const gamesPerRow = this.device === 'Mobile' ? 4 : 5;
+        const availableWidth = this.gamesListWrapperEl.offsetWidth - (gap * (gamesPerRow - 1));
+        const gameElWidth = availableWidth / gamesPerRow;
+        const gameElHeight = (gameElWidth / 74 * 40) + gap;
+        this.maxVisibleGames = Math.max(Math.floor(this.gamesListWrapperEl.offsetHeight / gameElHeight) * gamesPerRow, gamesPerRow);
+        this.visibleGames = this.jackpot.GamesInfo.slice(0, this.maxVisibleGames);
+    }
+    updateJackpotStatus(event) {
+        if (event.IsClosed) {
+            this.clearInterval();
+            this.disabledStatus = event.Reason;
+            this.activeTab = 1;
+        }
+        else {
+            this.disabledStatus = '';
+            this.jackpotEndTime = event.JackpotEndTime;
+            this.startCountdown();
+        }
+    }
+    getTopNavigationTemplate() {
+        return (h("div", { class: "JackpotDetailsNavigation" }, h("button", { class: "JackpotIconButton", onClick: this.handleBackClick }, h("img", { src: "https://static.everymatrix.com/gic/img/engagement-suite/back.svg", alt: "back" })), h("div", { class: "JackpotPopupName" }, translate('jackpots', this.language)), h("button", { class: "JackpotIconButton", onClick: this.handleCloseClick }, h("img", { src: "https://static.everymatrix.com/gic/img/engagement-suite/close.svg", alt: "close" }))));
+    }
+    getJackpotBalance() {
+        return formatBalance(this.balance, this.jackpot.Currency);
+    }
+    getJoinButtonClasses() {
+        return {
+            PopupButton: true,
+            Active: this.enabled,
+            Loading: this.jackpot.Pending
+        };
+    }
+    getJackpotDetailsHeaderTemplate() {
+        const joinButtonDisabled = isBefore(new Date(this.jackpot.JackpotEndTime), new Date()) || !!this.disabledStatus;
+        return (h("div", { class: "JackpotDetailsHeader" }, h("div", null, h("div", { class: "JackpotType" }, this.jackpot.Type), h("div", { class: "JackpotBalance" }, this.getJackpotBalance())), h("div", { class: "JackpotDetailsHeaderSecondCol" }, h("button", { disabled: joinButtonDisabled, onClick: this.jackpotChangeStatusRequest, class: this.getJoinButtonClasses(), "data-id": this.jackpot.JackpotId }, this.enabled
+            ? translate('unjoin', this.language)
+            : translate('join', this.language)), !!this.winBalance && h("div", { class: "JackpotIsWon" }, translate('jackpotIsWon', this.language)))));
+    }
+    getTabsTemplate() {
+        return h("div", { class: "JackpotDetailsTabs" }, h("div", { "data-index": "1", onClick: this.handleTabChange, class: `JackpotDetailsTab ${this.activeTab === 1 ? 'Active' : ''}` }, translate('info', this.language)), h("div", { "data-index": "2", onClick: this.handleTabChange, class: `JackpotDetailsTab ${this.activeTab === 2 ? 'Active' : ''}` }, translate('games', this.language)));
+    }
+    getTabsContentTemplate() {
+        return this.activeTab === 1
+            ? this.getJackpotInfoTemplate()
+            : this.getGamesTemplate();
+    }
+    getJackpotDetailsTemplate() {
+        return h("div", null, h("div", { class: "JackpotDetailsButton", onClick: this.toggleShowDetails }, h("div", { class: `Toggle ${this.showDetails ? 'Closed' : 'Open'}` }), h("span", null, translate('jackpotDetails', this.language))), this.showDetails && h("div", { class: "JackpotDetailsContent" }, this.jackpot.Description && h("p", { class: "JackpotDescription" }, this.jackpot.Description), this.jackpot.JackpotRulesUrl && h("a", { class: "TermsAndConditions", href: this.jackpot.JackpotRulesUrl, target: "_blank" }, translate('tc', this.jackpot.JackpotRulesUrl))));
+    }
+    getBetLimitsRange() {
+        var _a, _b, _c, _d;
+        if (this.jackpot.BetLimits) {
+            const playerCurrency = this.jackpot.Currency;
+            const betCurrencies = Object.keys(this.jackpot.BetLimits);
+            const matchedCurrency = betCurrencies.find(currency => currency === playerCurrency);
+            const betCurrency = matchedCurrency ? matchedCurrency : betCurrencies[0];
+            const showMinBet = this.jackpot.BetLimits && !!((_a = this.jackpot.BetLimits[betCurrency]) === null || _a === void 0 ? void 0 : _a.MinBet);
+            const showMaxBet = this.jackpot.BetLimits && !!((_b = this.jackpot.BetLimits[betCurrency]) === null || _b === void 0 ? void 0 : _b.MaxBet);
+            const formattedMinBet = formatBalance((_c = this.jackpot.BetLimits[betCurrency]) === null || _c === void 0 ? void 0 : _c.MinBet, betCurrency);
+            const formattedMaxBet = formatBalance((_d = this.jackpot.BetLimits[betCurrency]) === null || _d === void 0 ? void 0 : _d.MaxBet, betCurrency);
+            return h("div", null, showMinBet && h("div", { class: "JackpotInfoItem" }, translate('minBet', this.language), ":\u00A0", h("span", null, formattedMinBet)), showMaxBet && h("div", { class: "JackpotInfoItem" }, translate('maxBet', this.language), ":\u00A0", h("span", null, formattedMaxBet)));
+        }
+    }
+    getJackpotInfoTemplate() {
+        const showDetails = !!(this.jackpot.Description || this.jackpot.JackpotRulesUrl);
+        return h("div", { class: "JackpotInfoTabContent" }, showDetails && this.getJackpotDetailsTemplate(), h("div", { class: "JackpotInfo" }, h("div", { class: "JackpotInfoItem" }, translate('betContribution', this.language), ":\u00A0", h("span", null, +this.jackpot.ContributionPercent, "%")), h("div", { class: "JackpotInfoItem" }, translate('type', this.language), ":\u00A0", h("span", null, this.jackpot.JackpotTypePresentation)), h("div", { class: "JackpotInfoItem" }, translate('winningProbability', this.language), ":\u00A0", h("span", null, "1:", this.jackpot.Probability)), h("div", { class: "JackpotInfoItem" }, translate('operatorContribution', this.language), ":\u00A0", h("span", null, +this.jackpot.OperatorContributionPercent, "%"), h("button", { class: "JackpotContributionTooltipButton", onClick: this.toggleTooltip })), this.getBetLimitsRange()));
+    }
+    getGamesTemplate() {
+        const list = this.visibleGames.map((game) => {
+            return h("div", { onClick: this.onGameClick, class: `JackpotGamesListItem ${game.GameSlug === this.gameSlug ? 'Disabled' : ''}`, key: game.CasinoGameId, "data-slug": game.GameSlug, style: { background: `center / cover url(${game.GameIcon}) no-repeat` }, title: game.GameName });
+        });
+        return [
+            h("div", { class: "JackpotGamesListWrapper", ref: el => this.gamesListWrapperEl = el }, h("div", { class: "JackpotGamesList" }, list)),
+            this.visibleGames.length < this.jackpot.GamesInfo.length
+                ? h("button", { class: "PopupButton Active JackpotGamesButton", onClick: this.handleLoadMore }, translate('loadMore', this.language))
+                : ''
+        ];
+    }
+    getJackpotCountdown() {
+        const timerMessage = translate(this.disabledStatus, this.language) || this.timer;
+        return (h("div", { class: `JackpotCountdown ${this.disabledStatus ? 'Suspended' : ''}` }, timerMessage));
+    }
+    startCountdown() {
+        this.updateTimer();
+        this.interval = setInterval(() => {
+            this.updateTimer();
+        }, 1000);
+    }
+    updateTimer() {
+        const expirationTime = new Date(this.jackpotEndTime).getTime();
+        const now = new Date().getTime();
+        const distance = expirationTime - now;
+        if (distance < 1) {
+            this.clearInterval();
+            return;
+        }
+        const { days, hours, minutes, seconds } = {
+            days: String(Math.floor(distance / (1000 * 60 * 60 * 24))).padStart(2, '0'),
+            hours: String(Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60))).padStart(2, '0'),
+            minutes: String(Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60))).padStart(2, '0'),
+            seconds: String(Math.floor((distance % (1000 * 60)) / 1000)).padStart(2, '0')
+        };
+        this.timer = days === '00'
+            ? `${hours}h:${minutes}m:${seconds}s`
+            : `${days}d:${hours}h:${minutes}m`;
+    }
+    getPopupClasses() {
+        return {
+            JackpotDetailsPopup: true,
+            Disabled: !!this.disabledStatus || isBefore(new Date(this.jackpot.JackpotEndTime), new Date()),
+            [this.device]: true,
+            [this.jackpot.Type.charAt(0).toUpperCase() + this.jackpot.Type.slice(1)]: true
+        };
+    }
+    getTooltipTemplate() {
+        return (h("div", { class: "JackpotsTooltipBackdrop" }, h("div", { class: "JackpotsTooltip" }, h("button", { class: "JackpotsIconButton", onClick: this.toggleTooltip }, h("img", { src: "https://static.everymatrix.com/gic/img/engagement-suite/close.svg", alt: "Close tooltip" })), translate('contributionTooltip', this.language))));
+    }
+    render() {
+        return h("div", { key: '1588370db82c0c7d4118fce75e60cb2e1204c9f3', class: this.getPopupClasses() }, this.getTopNavigationTemplate(), h("div", { key: '320b03501c86164369fc715590cfbbfa6dc8bf3e', class: "JackpotDetailsPopupContent" }, this.getJackpotDetailsHeaderTemplate(), this.getJackpotCountdown(), this.getTabsTemplate(), this.getTabsContentTemplate(), this.showTooltip && this.getTooltipTemplate()));
+    }
+    get host() { return getElement(this); }
+    static get watchers() { return {
+        "jackpot": ["handleJackpotUpdate"]
+    }; }
+};
+CasinoEngagementSuiteJackpotDetails.style = CasinoEngagementSuiteJackpotDetailsStyle0;
+
+export { CasinoEngagementSuiteJackpotDetails as casino_engagement_suite_jackpot_details };

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

@@ -0,0 +1,20 @@
+import { p as promiseResolve, b as bootstrapLazy } from './index-0237d1e2.js';
+export { s as setNonce } from './index-0237d1e2.js';
+import { g as globalScripts } from './app-globals-0f993ce5.js';
+
+/*
+ Stencil Client Patch Browser v4.20.0 | MIT Licensed | https://stenciljs.com
+ */
+var patchBrowser = () => {
+  const importMeta = import.meta.url;
+  const opts = {};
+  if (importMeta !== "") {
+    opts.resourcesUrl = new URL(".", importMeta).href;
+  }
+  return promiseResolve(opts);
+};
+
+patchBrowser().then(async (options) => {
+  await globalScripts();
+  return bootstrapLazy([["casino-engagement-suite-jackpot-details",[[1,"casino-engagement-suite-jackpot-details",{"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"jackpot":[16],"jackpotChangeStatusRequest":[1040],"language":[1],"gameSlug":[1,"game-slug"],"device":[1],"limitStylingAppends":[32],"timer":[32],"disabledStatus":[32],"activeTab":[32],"visibleGames":[32],"enabled":[32],"balance":[32],"winBalance":[32],"showDetails":[32],"jackpotEndTime":[32],"showTooltip":[32]},[[8,"message","handleEvent"],[9,"resize","handleResize"]],{"jackpot":["handleJackpotUpdate"]}]]],["casino-engagement-suite-progress-bar",[[1,"casino-engagement-suite-progress-bar",{"value":[2],"disabled":[4],"hidePercent":[4,"hide-percent"],"indeterminate":[4],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"limitStylingAppends":[32]}]]]], options);
+});

package/dist/esm/casino-engagement-suite-progress-bar.entry.js

@@ -0,0 +1,67 @@
+import { r as registerInstance, h, g as getElement } from './index-0237d1e2.js';
+
+const casinoEngagementSuiteProgressBarCss = ":host{display:block;font-family:inherit}:host(.Desktop) .ProgressBarPercent{font-size:14px;line-height:14px}.ProgressBarBackground{height:8px;background-color:var(--emw--color-background, #666178);border-radius:4px;position:relative}.ProgressBarLine{position:absolute;left:0;top:0;bottom:0;border-radius:4px;background:linear-gradient(98.25deg, #FF9400 22.48%, #FEF746 131.02%, #FFE24A 131.9%);transition:width ease-out 0.3s}.ProgressBarInfo{margin-bottom:8px;display:flex;justify-content:space-between;align-items:center}.ProgressBarPercent{font-weight:700;font-size:12px;line-height:12px}.HidePercent .ProgressBarPercent{display:none}.ProgressBar:not(.Disabled) .ProgressBarPercent{background:linear-gradient(98.25deg, #FF9400 22.48%, #FEF746 131.02%, #FFE24A 131.9%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.ProgressBar.Disabled .ProgressBarPercent{color:var(--emw--color-background, #666178)}.ProgressBar.Disabled .ProgressBarLine{background:var(--emw--color-background-secondary, #474668)}";
+const CasinoEngagementSuiteProgressBarStyle0 = casinoEngagementSuiteProgressBarCss;
+
+const CasinoEngagementSuiteProgressBar = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        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.value = 0;
+        this.disabled = false;
+        this.hidePercent = false;
+        this.indeterminate = false;
+        this.clientStyling = '';
+        this.clientStylingUrl = '';
+        this.limitStylingAppends = false;
+    }
+    componentDidRender() {
+        if (!this.limitStylingAppends && this.host) {
+            if (this.clientStyling)
+                this.setClientStyling();
+            if (this.clientStylingUrl)
+                this.setClientStylingURL();
+            this.limitStylingAppends = true;
+        }
+    }
+    getProgressBarClasses() {
+        return {
+            ProgressBar: true,
+            Completed: this.value === 100,
+            Disabled: this.disabled,
+            HidePercent: this.hidePercent || this.indeterminate
+        };
+    }
+    getProgressBarLineTemplate() {
+        if (this.indeterminate) {
+            return h("div", { class: "ProgressBarLine Indeterminate", part: "ProgressBarLine Indeterminate" });
+        }
+        else {
+            return h("div", { class: "ProgressBarLine", part: "ProgressBarLine", style: { width: this.value + '%' } });
+        }
+    }
+    render() {
+        return h("div", { key: 'ecce3a26a92d2e090c1db84bdc1bdbeb505080ed', class: this.getProgressBarClasses(), part: "ProgressBar" }, h("div", { key: '649fe1103d222200f2a1ad3b5967e37da1f1ab3d', class: "ProgressBarInfo", part: "ProgressBarInfo" }, h("slot", { key: '49dc180eedd823f0027f75099813fb9d91bcd938', name: "Title" }, h("div", { key: 'e6e59da3fe7bbcb37e118e7fd23a8ff35587aca5' })), h("slot", { key: '3dc8e5fd1dbc8c268b9c76e393b751cb53605e7e', name: "Percent" }, h("div", { key: '6a9e880f3ee3c4f26e8577c69be5db5f8e2d10ad', class: "ProgressBarPercent", part: "ProgressBarPercent" }, this.value, "%"))), h("div", { key: '141106e77caad7b04bb199f911e87c0c6f0adc2d', class: "ProgressBarBackground", part: "ProgressBarBackground" }, this.getProgressBarLineTemplate()));
+    }
+    get host() { return getElement(this); }
+};
+CasinoEngagementSuiteProgressBar.style = CasinoEngagementSuiteProgressBarStyle0;
+
+export { CasinoEngagementSuiteProgressBar as casino_engagement_suite_progress_bar };