@everymatrix/casino-engagement-suite-jackpot-details 1.44.0 → 1.45.0

package/dist/collection/components/casino-engagement-suite-jackpot-details/casino-engagement-suite-jackpot-details.js

@@ -1,532 +1,472 @@
-import { Component, Element, Event, h, Listen, Prop, State, Watch } from '@stencil/core';
-import { isBefore } from 'date-fns';
-import { translate } from '../../utils/locale.utils';
-import '@everymatrix/casino-engagement-suite-progress-bar';
-import { formatBalance } from '../../utils';
+import { h } from "@stencil/core";
+import { isBefore } from "date-fns";
+import { translate } from "../../utils/locale.utils";
+import "../../../../../casino-engagement-suite-progress-bar/dist/types/index";
+import { formatBalance } from "../../utils";
 export class CasinoEngagementSuiteJackpotDetails {
-  constructor() {
-    /**
-     * Client custom styling via string
-     */
-    this.clientStyling = '';
-    /**
-     * Client custom styling via url
-     */
-    this.clientStylingUrl = '';
-    /**
-    * Language of the widget
-     */
-    this.language = 'en';
-    /**
-     * Current game slug
-     */
-    this.gameSlug = '';
-    /**
-    * User's device type
-     */
-    this.device = 'Mobile';
-    this.limitStylingAppends = false;
-    this.timer = '';
-    this.disabledStatus = '';
-    this.activeTab = 1;
-    this.visibleGames = [];
-    this.enabled = false;
-    this.showDetails = false;
-    this.jackpotEndTime = '';
-    this.showTooltip = false;
-    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
-          }
-        });
-      }
-    };
-  }
-  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);
+    constructor() {
+        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();
         }
-        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];
+    }
+    disconnectedCallback() {
+        this.clearInterval();
+    }
+    clearInterval() {
+        if (this.interval) {
+            clearInterval(this.interval);
+            this.interval = null;
         }
-        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", { class: this.getPopupClasses() },
-      this.getTopNavigationTemplate(),
-      h("div", { class: "JackpotDetailsPopupContent" },
-        this.getJackpotDetailsHeaderTemplate(),
-        this.getJackpotCountdown(),
-        this.getTabsTemplate(),
-        this.getTabsContentTemplate(),
-        this.showTooltip && this.getTooltipTemplate()));
-  }
-  static get is() { return "casino-engagement-suite-jackpot-details"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["casino-engagement-suite-jackpot-details.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["casino-engagement-suite-jackpot-details.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": "''"
-    },
-    "jackpot": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "Jackpot",
-        "resolved": "Jackpot",
-        "references": {
-          "Jackpot": {
-            "location": "import",
-            "path": "../../models"
-          }
+    }
+    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;
         }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Selected jackpot"
-      }
-    },
-    "jackpotChangeStatusRequest": {
-      "type": "unknown",
-      "mutable": true,
-      "complexType": {
-        "original": "(event: MouseEvent) => void",
-        "resolved": "(event: MouseEvent) => void",
-        "references": {
-          "MouseEvent": {
-            "location": "global"
-          }
+        else {
+            this.disabledStatus = '';
+            this.jackpotEndTime = event.JackpotEndTime;
+            this.startCountdown();
         }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Change jackpot status"
-      }
-    },
-    "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'"
-    },
-    "gameSlug": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Current game slug"
-      },
-      "attribute": "game-slug",
-      "reflect": false,
-      "defaultValue": "''"
-    },
-    "device": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "\"Mobile\" | \"Tablet\" | \"Desktop\"",
-        "resolved": "\"Desktop\" | \"Mobile\" | \"Tablet\"",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "User's device type"
-      },
-      "attribute": "device",
-      "reflect": false,
-      "defaultValue": "'Mobile' as 'Mobile' | 'Tablet' | 'Desktop'"
-    }
-  }; }
-  static get states() { return {
-    "limitStylingAppends": {},
-    "timer": {},
-    "disabledStatus": {},
-    "activeTab": {},
-    "visibleGames": {},
-    "enabled": {},
-    "balance": {},
-    "winBalance": {},
-    "showDetails": {},
-    "jackpotEndTime": {},
-    "showTooltip": {}
-  }; }
-  static get events() { return [{
-      "method": "close",
-      "name": "close",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "void",
-        "resolved": "void",
-        "references": {}
-      }
-    }, {
-      "method": "back",
-      "name": "back",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "void",
-        "resolved": "void",
-        "references": {}
-      }
-    }]; }
-  static get elementRef() { return "host"; }
-  static get watchers() { return [{
-      "propName": "jackpot",
-      "methodName": "handleJackpotUpdate"
-    }]; }
-  static get listeners() { return [{
-      "name": "message",
-      "method": "handleEvent",
-      "target": "window",
-      "capture": false,
-      "passive": false
-    }, {
-      "name": "resize",
-      "method": "handleResize",
-      "target": "window",
-      "capture": false,
-      "passive": true
-    }]; }
+    }
+    getTopNavigationTemplate() {
+        return (h("div", { class: "JackpotDetailsNavigation" }, h("button", { class: "EngagementSuiteIconButton Back", onClick: this.handleBackClick }), h("div", { class: "JackpotPopupName" }, translate('jackpots', this.language)), h("button", { class: "EngagementSuiteIconButton Close", onClick: this.handleCloseClick })));
+    }
+    getJackpotBalance() {
+        return formatBalance(this.balance, this.jackpot.Currency);
+    }
+    getJoinButtonClasses() {
+        return {
+            EngagementSuiteButton: 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: "EngagementSuiteTabs" }, h("div", { "data-index": "1", onClick: this.handleTabChange, class: `EngagementSuiteTab ${this.activeTab === 1 ? 'Active' : ''}` }, translate('info', this.language)), h("div", { "data-index": "2", onClick: this.handleTabChange, class: `EngagementSuiteTab ${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: "EngagementSuiteIconButton Help", 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: "EngagementSuiteButton 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: "EngagementSuiteTooltipBackdrop" }, h("div", { class: "EngagementSuiteTooltip" }, h("button", { class: "EngagementSuiteIconButton Close", onClick: this.toggleTooltip }), translate('contributionTooltip', this.language))));
+    }
+    render() {
+        return h("div", { key: '96e68ef1594d185301719b8c8f4c6cb0c32307e9', class: this.getPopupClasses() }, this.getTopNavigationTemplate(), h("div", { key: '8eb282874b1efc99a05dfcf479b8b1be51402caa', class: "JackpotDetailsPopupContent" }, this.getJackpotDetailsHeaderTemplate(), this.getJackpotCountdown(), this.getTabsTemplate(), this.getTabsContentTemplate(), this.showTooltip && this.getTooltipTemplate()));
+    }
+    static get is() { return "casino-engagement-suite-jackpot-details"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["casino-engagement-suite-jackpot-details.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["casino-engagement-suite-jackpot-details.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": "''"
+            },
+            "jackpot": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "Jackpot",
+                    "resolved": "Jackpot",
+                    "references": {
+                        "Jackpot": {
+                            "location": "import",
+                            "path": "../../models",
+                            "id": "../../../../packages/stencil/casino-engagement-suite-jackpot-details/src/models/index.ts::Jackpot"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Selected jackpot"
+                }
+            },
+            "jackpotChangeStatusRequest": {
+                "type": "unknown",
+                "mutable": true,
+                "complexType": {
+                    "original": "(event: MouseEvent) => void",
+                    "resolved": "(event: MouseEvent) => void",
+                    "references": {
+                        "MouseEvent": {
+                            "location": "global",
+                            "id": "global::MouseEvent"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Change jackpot status"
+                }
+            },
+            "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'"
+            },
+            "gameSlug": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Current game slug"
+                },
+                "attribute": "game-slug",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "device": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "\"Mobile\" | \"Tablet\" | \"Desktop\"",
+                    "resolved": "\"Desktop\" | \"Mobile\" | \"Tablet\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "User's device type"
+                },
+                "attribute": "device",
+                "reflect": false,
+                "defaultValue": "'Mobile' as 'Mobile' | 'Tablet' | 'Desktop'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "limitStylingAppends": {},
+            "timer": {},
+            "disabledStatus": {},
+            "activeTab": {},
+            "visibleGames": {},
+            "enabled": {},
+            "balance": {},
+            "winBalance": {},
+            "showDetails": {},
+            "jackpotEndTime": {},
+            "showTooltip": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "close",
+                "name": "close",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "back",
+                "name": "back",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "host"; }
+    static get watchers() {
+        return [{
+                "propName": "jackpot",
+                "methodName": "handleJackpotUpdate"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "message",
+                "method": "handleEvent",
+                "target": "window",
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "resize",
+                "method": "handleResize",
+                "target": "window",
+                "capture": false,
+                "passive": true
+            }];
+    }
 }