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

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

@@ -0,0 +1,316 @@
+import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+
+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)}.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 CasinoEngagementSuiteJackpotDetails$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.close = createEvent(this, "close", 7);
+    this.back = createEvent(this, "back", 7);
+    /**
+     * 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.loading = false;
+    this.enabled = false;
+    this.showDetails = 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.changeJackpotStatus = (ev) => {
+      ev.stopPropagation();
+      window.postMessage({
+        type: 'JackpotChangeStatusRequest',
+        data: {
+          [this.jackpot.Id]: !this.jackpot.Enabled,
+        },
+      });
+      this.loading = true;
+    };
+    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': {
+        this.updateJackpotStatus(e.data.data);
+        break;
+      }
+      case 'JoinJackpotResult': {
+        const res = data;
+        if (res.Success && this.jackpot.Id in res.JackpotIds) {
+          this.enabled = this.jackpot.Enabled = res.JackpotIds[this.jackpot.Id];
+        }
+        this.loading = false;
+        break;
+      }
+      case 'UpdateJackpotBalance': {
+        const jackpotUpdate = data
+          .find((updateMessage => updateMessage.JackpotId === this.jackpot.Id));
+        if (jackpotUpdate) {
+          this.balance = this.jackpot.Balance = jackpotUpdate.Balance;
+          this.winBalance = this.jackpot.WinBalance = jackpotUpdate.WinBalance;
+        }
+      }
+    }
+  }
+  componentWillLoad() {
+    this.startCountdown();
+    this.enabled = this.jackpot.Enabled;
+    this.balance = this.jackpot.Balance;
+    this.winBalance = this.jackpot.WinBalance;
+  }
+  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) {
+      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.floor(this.gamesListWrapperEl.offsetHeight / gameElHeight) * gamesPerRow;
+      this.visibleGames = this.jackpot.GamesInfo.slice(0, this.maxVisibleGames);
+    }
+  }
+  disconnectedCallback() {
+    this.clearInterval();
+  }
+  clearInterval() {
+    if (this.interval) {
+      clearInterval(this.interval);
+      this.interval = null;
+    }
+  }
+  updateJackpotStatus(event) {
+    if (event.IsClosed) {
+      this.clearInterval();
+      this.disabledStatus = event.Reason;
+      this.activeTab = 1;
+    }
+    else {
+      this.disabledStatus = '';
+      this.jackpot.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.winBalance || this.balance, this.jackpot.Currency);
+  }
+  getJoinButtonClasses() {
+    return {
+      PopupButton: true,
+      Active: this.enabled,
+      Loading: this.loading
+    };
+  }
+  getJackpotDetailsHeaderTemplate() {
+    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: !!this.disabledStatus, onClick: this.changeJackpotStatus, class: this.getJoinButtonClasses() }, 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("p", { class: "JackpotDescription" }, this.jackpot.Description));
+  }
+  getJackpotInfoTemplate() {
+    return h("div", null, this.jackpot.Description && this.getJackpotDetailsTemplate(), h("div", { class: "JackpotInfo" }, h("div", { class: "JackpotInfoItem" }, translate('operatorContribution', this.language), ":\u00A0", h("span", null, this.jackpot.OperatorContributionPercent, "%")), 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)), this.jackpot.JackpotRulesUrl && h("div", { class: "JackpotInfoItem" }, h("a", { class: "tc", href: this.jackpot.JackpotRulesUrl, target: "_blank" }, translate('tc', this.jackpot.JackpotRulesUrl)))));
+  }
+  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 = this.disabledStatus || 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.jackpot.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,
+      [this.device]: true,
+      [this.jackpot.Type.charAt(0).toUpperCase() + this.jackpot.Type.slice(1)]: true
+    };
+  }
+  render() {
+    return h("div", { class: this.getPopupClasses() }, this.getTopNavigationTemplate(), h("div", { class: "JackpotDetailsPopupContent" }, this.getJackpotDetailsHeaderTemplate(), this.getJackpotCountdown(), this.getTabsTemplate(), this.getTabsContentTemplate()));
+  }
+  get host() { return this; }
+  static get style() { return casinoEngagementSuiteJackpotDetailsCss; }
+}, [1, "casino-engagement-suite-jackpot-details", {
+    "clientStyling": [513, "client-styling"],
+    "clientStylingUrl": [513, "client-styling-url"],
+    "jackpot": [16],
+    "language": [1],
+    "gameSlug": [1, "game-slug"],
+    "device": [1],
+    "limitStylingAppends": [32],
+    "timer": [32],
+    "disabledStatus": [32],
+    "activeTab": [32],
+    "visibleGames": [32],
+    "loading": [32],
+    "enabled": [32],
+    "balance": [32],
+    "winBalance": [32],
+    "showDetails": [32]
+  }, [[8, "message", "handleEvent"]]]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["casino-engagement-suite-jackpot-details"];
+  components.forEach(tagName => { switch (tagName) {
+    case "casino-engagement-suite-jackpot-details":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, CasinoEngagementSuiteJackpotDetails$1);
+      }
+      break;
+  } });
+}
+
+const CasinoEngagementSuiteJackpotDetails = CasinoEngagementSuiteJackpotDetails$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { CasinoEngagementSuiteJackpotDetails, defineCustomElement };

package/dist/components/casino-engagement-suite-progress-bar.js

@@ -0,0 +1,97 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+
+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 CasinoEngagementSuiteProgressBar$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    /**
+     * Value for the widget
+     */
+    this.value = 0;
+    /**
+     * Shows disabled styles
+     */
+    this.disabled = false;
+    /**
+     * Hide percent value
+     */
+    this.hidePercent = false;
+    /**
+     * Client custom styling via string
+     */
+    this.clientStyling = '';
+    /**
+     * Client custom styling via url
+     */
+    this.clientStylingUrl = '';
+    this.limitStylingAppends = false;
+    this.setClientStyling = () => {
+      let sheet = document.createElement('style');
+      sheet.innerHTML = this.clientStyling;
+      this.host.prepend(sheet);
+    };
+    this.setClientStylingURL = () => {
+      let url = new URL(this.clientStylingUrl);
+      let cssFile = document.createElement('style');
+      fetch(url.href)
+        .then((res) => res.text())
+        .then((data) => {
+        cssFile.innerHTML = data;
+        setTimeout(() => { this.host.prepend(cssFile); }, 1);
+      })
+        .catch((err) => {
+        console.log('Error ', err);
+      });
+    };
+  }
+  componentDidRender() {
+    if (!this.limitStylingAppends && this.host) {
+      if (this.clientStyling)
+        this.setClientStyling();
+      if (this.clientStylingUrl)
+        this.setClientStylingURL();
+      this.limitStylingAppends = true;
+    }
+  }
+  getProgressBarClasses() {
+    return {
+      ProgressBar: true,
+      Completed: this.value === 100,
+      Disabled: this.disabled,
+      HidePercent: this.hidePercent
+    };
+  }
+  render() {
+    return h("div", { class: this.getProgressBarClasses(), part: "ProgressBar" }, h("div", { class: "ProgressBarInfo", part: "ProgressBarInfo" }, h("slot", { name: "Title" }, h("div", null)), h("slot", { name: "Percent" }, h("div", { class: "ProgressBarPercent", part: "ProgressBarPercent" }, this.value, "%"))), h("div", { class: "ProgressBarBackground", part: "ProgressBarBackground" }, h("div", { class: "ProgressBarLine", part: "ProgressBarLine", style: { width: this.value + '%' } })));
+  }
+  get host() { return this; }
+  static get style() { return casinoEngagementSuiteProgressBarCss; }
+}, [1, "casino-engagement-suite-progress-bar", {
+    "value": [2],
+    "disabled": [4],
+    "hidePercent": [4, "hide-percent"],
+    "clientStyling": [513, "client-styling"],
+    "clientStylingUrl": [513, "client-styling-url"],
+    "limitStylingAppends": [32]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["casino-engagement-suite-progress-bar"];
+  components.forEach(tagName => { switch (tagName) {
+    case "casino-engagement-suite-progress-bar":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, CasinoEngagementSuiteProgressBar$1);
+      }
+      break;
+  } });
+}
+
+const CasinoEngagementSuiteProgressBar = CasinoEngagementSuiteProgressBar$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { CasinoEngagementSuiteProgressBar, defineCustomElement };

package/dist/components/index.d.ts

@@ -0,0 +1,26 @@
+/* CasinoEngagementSuiteJackpotDetails custom elements */
+
+import type { Components, JSX } from "../types/components";
+
+/**
+ * Used to manually set the base path where assets can be found.
+ * If the script is used as "module", it's recommended to use "import.meta.url",
+ * such as "setAssetPath(import.meta.url)". Other options include
+ * "setAssetPath(document.currentScript.src)", or using a bundler's replace plugin to
+ * dynamically set the path at build time, such as "setAssetPath(process.env.ASSET_PATH)".
+ * But do note that this configuration depends on how your script is bundled, or lack of
+ * bundling, and where your assets can be loaded from. Additionally custom bundling
+ * will have to ensure the static assets are copied to its build directory.
+ */
+export declare const setAssetPath: (path: string) => void;
+
+export interface SetPlatformOptions {
+  raf?: (c: FrameRequestCallback) => number;
+  ael?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
+  rel?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
+}
+export declare const setPlatformOptions: (opts: SetPlatformOptions) => void;
+
+export type { Components, JSX };
+
+export * from '../types';

package/dist/components/index.js

@@ -0,0 +1 @@
+export { setAssetPath, setPlatformOptions } from '@stencil/core/internal/client';