@everymatrix/bonus-elevate-shop 1.31.2

package/dist/cjs/bonus-elevate-shop_4.cjs.entry.js

@@ -0,0 +1,787 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-ec3ffb89.js');
+const playerElevateCardItems = require('./player-elevate-card-items-8154b78f.js');
+
+const getUrl = (path, params = {}) => {
+  return path + '?' + Object.keys(params).map(key => `${key}=${params[key]}`).join('&');
+};
+const fetcher = async (input, init = {}) => {
+  let res;
+  // @ts-ignore
+  res = await fetch(input, init);
+  res = await res.text();
+  try {
+    res = JSON.parse(res);
+  }
+  catch (e) {
+    console.error(e);
+  }
+  return res;
+};
+async function fetchNorwayApi(path, params = {}, init = {}) {
+  const { endpoint, language, session } = this;
+  const fetchParams = params;
+  if (!init.method || init.method === 'GET') {
+    fetchParams.language = language;
+  }
+  const url = getUrl(`${endpoint}${path}`, fetchParams);
+  if (!init.headers)
+    init.headers = {};
+  init.headers['x-SessionId'] = session;
+  const res = await fetcher(url, init);
+  return res;
+}
+
+const translation = {
+  en: {
+    Points: 'Points',
+    Point: 'Point',
+  }
+};
+
+const avaliableTrueSvg = `<svg width="46" height="46" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <g filter="url(#filter0_bd_179_6145)">
+    <circle cx="23" cy="19" r="19" style="fill: var(--emfe-w-elevate-avaliable-button-enabled-color, #53B65C);" />
+    <circle cx="23" cy="19" r="18" stroke="url(#paint0_linear_179_6145)" stroke-opacity="0.6" stroke-width="2"/>
+    <circle cx="23" cy="19" r="18" stroke="url(#paint1_linear_179_6145)" stroke-width="2"/>
+    <circle cx="23" cy="19" r="18" stroke="url(#paint2_linear_179_6145)" stroke-width="2"/>
+  </g>
+  <g filter="url(#filter1_d_179_6145)">
+    <path d="M31.1977 11C31.7015 11 32.1279 11.1777 32.4767 11.5332C32.8256 11.8887 33 12.3203 33 12.8281V18.9102C33 20.2852 32.7364 21.5977 32.2093 22.8477C31.6822 24.0977 30.9748 25.1719 30.0872 26.0703C29.1996 26.9688 28.1376 27.6816 26.9012 28.209C25.6647 28.7363 24.3682 29 23.0116 29C21.6473 29 20.3469 28.7363 19.1105 28.209C17.874 27.6816 16.8101 26.9688 15.9186 26.0703C15.0271 25.1719 14.3178 24.0977 13.7907 22.8477C13.2636 21.5977 13 20.2852 13 18.9102V12.8281C13 12.3281 13.1783 11.8984 13.5349 11.5391C13.8915 11.1797 14.3178 11 14.814 11H31.1977ZM23.0116 23.4688C23.376 23.4688 23.6938 23.3398 23.9651 23.082L28.6628 18.5352C28.9496 18.2617 29.093 17.9297 29.093 17.5391C29.093 17.1562 28.9593 16.8301 28.6919 16.5605C28.4244 16.291 28.1008 16.1562 27.7209 16.1562C27.3566 16.1562 27.0388 16.2852 26.7674 16.543L23.0116 20.1758L19.2558 16.543C18.9845 16.2852 18.6705 16.1562 18.314 16.1562C17.9341 16.1562 17.6105 16.291 17.343 16.5605C17.0756 16.8301 16.9419 17.1562 16.9419 17.5391C16.9419 17.9375 17.0814 18.2695 17.3605 18.5352L22.0698 23.082C22.3256 23.3398 22.6395 23.4688 23.0116 23.4688Z" fill="white"/>
+  </g>
+  <defs>
+    <filter id="filter0_bd_179_6145" x="-36" y="-40" width="118" height="118" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+      <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+      <feGaussianBlur in="BackgroundImageFix" stdDeviation="20"/>
+      <feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_179_6145"/>
+      <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+      <feOffset dy="4"/>
+      <feGaussianBlur stdDeviation="2"/>
+      <feComposite in2="hardAlpha" operator="out"/>
+      <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
+      <feBlend mode="normal" in2="effect1_backgroundBlur_179_6145" result="effect2_dropShadow_179_6145"/>
+      <feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_179_6145" result="shape"/>
+    </filter>
+    <filter id="filter1_d_179_6145" x="11" y="10" width="24" height="22" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+      <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+      <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+      <feOffset dy="1"/>
+      <feGaussianBlur stdDeviation="1"/>
+      <feComposite in2="hardAlpha" operator="out"/>
+      <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
+      <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_179_6145"/>
+      <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_179_6145" result="shape"/>
+    </filter>
+    <linearGradient id="paint0_linear_179_6145" x1="49.2869" y1="15.1911" x2="36.3103" y2="15.603" gradientUnits="userSpaceOnUse">
+      <stop stop-color="white"/>
+      <stop offset="1" stop-color="#EFEFEF" stop-opacity="0"/>
+    </linearGradient>
+    <linearGradient id="paint1_linear_179_6145" x1="4" y1="0" x2="19.3776" y2="8.17396" gradientUnits="userSpaceOnUse">
+      <stop stop-color="white" stop-opacity="0.5"/>
+      <stop offset="1" stop-color="white" stop-opacity="0"/>
+    </linearGradient>
+    <linearGradient id="paint2_linear_179_6145" x1="42" y1="38" x2="27.0558" y2="34.3156" gradientUnits="userSpaceOnUse">
+      <stop stop-color="white" stop-opacity="0.5"/>
+      <stop offset="1" stop-color="white" stop-opacity="0"/>
+    </linearGradient>
+  </defs>
+</svg>
+`;
+
+const avaliableFalseSvg = `<svg width="46" height="46" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_bd_183_6497)">
+<circle cx="23" cy="19" r="19" style="fill: var(--emfe-w-elevate-avaliable-button-disabled-color, #B7B7B7);" />
+<circle cx="23" cy="19" r="18" stroke="url(#paint0_linear_183_6497)" stroke-opacity="0.6" stroke-width="2"/>
+<circle cx="23" cy="19" r="18" stroke="url(#paint1_linear_183_6497)" stroke-width="2"/>
+<circle cx="23" cy="19" r="18" stroke="url(#paint2_linear_183_6497)" stroke-width="2"/>
+</g>
+<g filter="url(#filter1_d_183_6497)">
+<path d="M31.1977 11C31.7015 11 32.1279 11.1777 32.4767 11.5332C32.8256 11.8887 33 12.3203 33 12.8281V18.9102C33 20.2852 32.7364 21.5977 32.2093 22.8477C31.6822 24.0977 30.9748 25.1719 30.0872 26.0703C29.1996 26.9688 28.1376 27.6816 26.9012 28.209C25.6647 28.7363 24.3682 29 23.0116 29C21.6473 29 20.3469 28.7363 19.1105 28.209C17.874 27.6816 16.8101 26.9688 15.9186 26.0703C15.0271 25.1719 14.3178 24.0977 13.7907 22.8477C13.2636 21.5977 13 20.2852 13 18.9102V12.8281C13 12.3281 13.1783 11.8984 13.5349 11.5391C13.8915 11.1797 14.3178 11 14.814 11H31.1977ZM23.0116 23.4688C23.376 23.4688 23.6938 23.3398 23.9651 23.082L28.6628 18.5352C28.9496 18.2617 29.093 17.9297 29.093 17.5391C29.093 17.1562 28.9593 16.8301 28.6919 16.5605C28.4244 16.291 28.1008 16.1562 27.7209 16.1562C27.3566 16.1562 27.0388 16.2852 26.7674 16.543L23.0116 20.1758L19.2558 16.543C18.9845 16.2852 18.6705 16.1562 18.314 16.1562C17.9341 16.1562 17.6105 16.291 17.343 16.5605C17.0756 16.8301 16.9419 17.1562 16.9419 17.5391C16.9419 17.9375 17.0814 18.2695 17.3605 18.5352L22.0698 23.082C22.3256 23.3398 22.6395 23.4688 23.0116 23.4688Z" fill="#F0F0F0"/>
+</g>
+<defs>
+<filter id="filter0_bd_183_6497" x="-36" y="-40" width="118" height="118" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feGaussianBlur in="BackgroundImageFix" stdDeviation="20"/>
+<feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_183_6497"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="4"/>
+<feGaussianBlur stdDeviation="2"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
+<feBlend mode="normal" in2="effect1_backgroundBlur_183_6497" result="effect2_dropShadow_183_6497"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_183_6497" result="shape"/>
+</filter>
+<filter id="filter1_d_183_6497" x="11" y="10" width="24" height="22" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="1"/>
+<feGaussianBlur stdDeviation="1"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_183_6497"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_183_6497" result="shape"/>
+</filter>
+<linearGradient id="paint0_linear_183_6497" x1="49.2869" y1="15.1911" x2="36.3103" y2="15.603" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="#EFEFEF" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint1_linear_183_6497" x1="4" y1="0" x2="19.3776" y2="8.17396" gradientUnits="userSpaceOnUse">
+<stop stop-color="white" stop-opacity="0.5"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint2_linear_183_6497" x1="42" y1="38" x2="27.0558" y2="34.3156" gradientUnits="userSpaceOnUse">
+<stop stop-color="white" stop-opacity="0.5"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+</defs>
+</svg>
+`;
+
+const getStatusData = (gift, redeem) => {
+  switch (gift.available) {
+    case "true":
+      return {
+        extraClass: ' active',
+        onClick: () => redeem(gift.id),
+        icon: avaliableTrueSvg
+      };
+    case "false":
+      return {
+        extraClass: ' deactive',
+        onClick: () => { },
+        icon: avaliableFalseSvg
+      };
+  }
+};
+const renderGifts = (gifts, locale, redeem) => {
+  return (index.h("div", { class: "Gifts FlexLayout" }, gifts.map(gift => {
+    var _a;
+    const statusData = getStatusData(gift, redeem);
+    const presentation = gift.presentation;
+    const getPropForBackgroundImage = (asset) => asset ?
+      { backgroundImage: `url('${asset}')` } :
+      {};
+    return (index.h("div", { class: "Gift" },
+      index.h("div", { class: "ImgContainer", onClick: () => window.postMessage({ type: 'BEEShopImgClicked', itemId: gift.id }, window.location.href), style: Object.assign({}, getPropForBackgroundImage(((_a = presentation.assets) === null || _a === void 0 ? void 0 : _a.length) > 0 ? presentation.assets[0] : '')) }),
+      index.h("div", { class: "InfoContainer" },
+        index.h("div", null,
+          index.h("div", { class: "Point" },
+            gift.points,
+            " ",
+            gift.points === 1 ? locale.Point : locale.Points),
+          index.h("div", { class: "Title" }, (presentation === null || presentation === void 0 ? void 0 : presentation.displayName) || gift.displayName),
+          index.h("div", { class: "Description" }, (presentation === null || presentation === void 0 ? void 0 : presentation.description) || '')),
+        index.h("div", { class: "AvaliableWrap" + statusData.extraClass, onClick: () => statusData.onClick() },
+          index.h("span", { innerHTML: statusData.icon })))));
+  })));
+};
+
+const bonusElevateShopCss = ":host{display:block}svg circle{shape-rendering:crispEdges}.MainContainer{max-width:420px}.MainContainer player-elevate-pointcard{width:100%;height:220px}.Gifts{display:flex;justify-content:space-between;padding:15px;padding-left:-8px;padding-right:-8px;flex:0 0 45.1282051282%;flex-wrap:wrap;justify-content:flex-start;background:var(--emfe-w-color-white, #FFFFFF);color:var(--emfe-w-color-black-150, #000000);font-weight:500;gap:10px;margin-top:-100px;position:relative;min-height:200px}.InfoContainer{display:flex;margin-top:17px;justify-content:space-between}.Gift{display:block;margin-bottom:10px;padding:8px;box-shadow:0px 18px 45px 0px var(--emfe-w-color-black-150, #A7A7A733);border-radius:11px;background:var(--emfe-w-color-white, #FFFFFF)}.Gift .ImgContainer{width:160px;height:107px;border-radius:11px;box-shadow:0px 2px 6px 0px var(--emfe-w-color-black-200, #00000040);cursor:pointer;background-size:cover;background-position:center center;background-repeat:no-repeat}.Gift .Point{font-size:20px}.Gift .Title,.Gift .Description{padding-left:3px}.Gift .Title{font-size:14px;margin-top:10px}.Gift .Description{font-size:12px;color:var(--emfe-w-color-black-100, #767171)}.Gift .AvaliableWrap{align-self:self-end}.Gift .AvaliableWrap.active{cursor:pointer}.Gift .AvaliableWrap.deactive{cursor:not-allowed}.Gift .AvaliableWrap span svg{width:var(--emfe-w-elevate-avaliable-button-size, 46px)}";
+
+const BonusElevateShop = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    /**
+     * Language of the widget
+     */
+    this.language = 'en';
+    /**
+     * Client custom styling via string
+     */
+    this.clientStyling = '';
+    /**
+     * Client custom styling via url
+     */
+    this.clientStylingUrl = '';
+    /**
+     * translation via url
+     */
+    this.translationUrl = '';
+    this.locale = translation['en'];
+    this.gifts = [];
+  }
+  async updateGifts() {
+    const res = await fetchNorwayApi.bind(this, '/v1/elevate/shop', {}).call();
+    this.gifts = res.data || [];
+  }
+  async redeemGift(id) {
+    if (!confirm('Are you sure to redeem this gift?'))
+      return;
+    const res = await fetchNorwayApi.bind(this, '/v1/elevate/redeem', {}, {
+      method: 'PUT',
+      body: JSON.stringify({ giftID: id }),
+      headers: {
+        'Content-Type': 'application/json-patch+json',
+      }
+    }).call();
+    if (res.success) {
+      window.postMessage({ type: 'BEEGiftRedeem', itemId: id }, window.location.href);
+    }
+  }
+  render() {
+    return (index.h("main", { class: "MainContainer" }, index.h("general-styling-wrapper", { clientStyling: this.clientStyling, clientStylingUrl: this.clientStylingUrl, targetTranslations: translation, translationUrl: this.translationUrl }), index.h("player-elevate-pointcard", { endpoint: this.endpoint, session: this.session, language: this.language, clientStylingUrl: this.clientStylingUrl, clientStyling: this.clientStyling, translationUrl: this.translationUrl }), renderGifts(this.gifts, this.locale, this.redeemGift.bind(this))));
+  }
+  async componentDidLoad() {
+    this.updateGifts();
+  }
+  static get assetsDirs() { return ["static"]; }
+  static get watchers() { return {
+    "endpoint": ["updateGifts"],
+    "language": ["updateGifts"],
+    "session": ["updateGifts"]
+  }; }
+};
+BonusElevateShop.style = bonusElevateShopCss;
+
+const mergeTranslations = (url, target) => {
+  return new Promise((resolve) => {
+    fetch(url)
+      .then((res) => res.json())
+      .then((data) => {
+      Object.keys(data).forEach((item) => {
+        target[item] = target[item] ? target[item] : {};
+        for (let key in data[item]) {
+          target[item][key] = data[item][key];
+        }
+      });
+      resolve(true);
+    });
+  });
+};
+
+const generalStylingWrapperCss = ":host{display:block}";
+
+const GeneralStylingWrapper = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    /**
+     * Client custom styling via inline styles
+     */
+    this.clientStyling = '';
+    /**
+     * Client custom styling via url
+     */
+    this.clientStylingUrl = '';
+    /**
+     * Translation via url
+     */
+    this.translationUrl = '';
+    this.stylingAppends = false;
+    this.setClientStyling = () => {
+      let sheet = document.createElement('style');
+      sheet.innerHTML = this.clientStyling;
+      this.el.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.el.prepend(cssFile);
+        }, 1);
+      })
+        .catch((err) => {
+        console.log('error ', err);
+      });
+    };
+  }
+  componentDidRender() {
+    // start custom styling area
+    if (!this.stylingAppends) {
+      if (this.clientStyling)
+        this.setClientStyling();
+      if (this.clientStylingUrl)
+        this.setClientStylingURL();
+      this.stylingAppends = true;
+    }
+    // end custom styling area
+  }
+  async componentWillLoad() {
+    const promises = [];
+    if (this.translationUrl) {
+      const translationPromise = mergeTranslations(this.translationUrl, this.targetTranslations);
+      promises.push(translationPromise);
+    }
+    return await Promise.all(promises);
+  }
+  render() {
+    return (index.h("div", { class: "StyleShell" }, index.h("slot", { name: "mainContent" })));
+  }
+  get el() { return index.getElement(this); }
+};
+GeneralStylingWrapper.style = generalStylingWrapperCss;
+
+/**
+ * @name startOfDay
+ * @category Day Helpers
+ * @summary Return the start of a day for the given date.
+ *
+ * @description
+ * Return the start of a day for the given date.
+ * The result will be in the local timezone.
+ *
+ * @param {Date|Number} date - the original date
+ * @returns {Date} the start of a day
+ * @throws {TypeError} 1 argument required
+ *
+ * @example
+ * // The start of a day for 2 September 2014 11:55:00:
+ * const result = startOfDay(new Date(2014, 8, 2, 11, 55, 0))
+ * //=> Tue Sep 02 2014 00:00:00
+ */
+function startOfDay(dirtyDate) {
+  playerElevateCardItems.requiredArgs(1, arguments);
+  var date = playerElevateCardItems.toDate(dirtyDate);
+  date.setHours(0, 0, 0, 0);
+  return date;
+}
+
+var MILLISECONDS_IN_DAY = 86400000;
+
+/**
+ * @name differenceInCalendarDays
+ * @category Day Helpers
+ * @summary Get the number of calendar days between the given dates.
+ *
+ * @description
+ * Get the number of calendar days between the given dates. This means that the times are removed
+ * from the dates and then the difference in days is calculated.
+ *
+ * @param {Date|Number} dateLeft - the later date
+ * @param {Date|Number} dateRight - the earlier date
+ * @returns {Number} the number of calendar days
+ * @throws {TypeError} 2 arguments required
+ *
+ * @example
+ * // How many calendar days are between
+ * // 2 July 2011 23:00:00 and 2 July 2012 00:00:00?
+ * const result = differenceInCalendarDays(
+ *   new Date(2012, 6, 2, 0, 0),
+ *   new Date(2011, 6, 2, 23, 0)
+ * )
+ * //=> 366
+ * // How many calendar days are between
+ * // 2 July 2011 23:59:00 and 3 July 2011 00:01:00?
+ * const result = differenceInCalendarDays(
+ *   new Date(2011, 6, 3, 0, 1),
+ *   new Date(2011, 6, 2, 23, 59)
+ * )
+ * //=> 1
+ */
+function differenceInCalendarDays(dirtyDateLeft, dirtyDateRight) {
+  playerElevateCardItems.requiredArgs(2, arguments);
+  var startOfDayLeft = startOfDay(dirtyDateLeft);
+  var startOfDayRight = startOfDay(dirtyDateRight);
+  var timestampLeft = startOfDayLeft.getTime() - playerElevateCardItems.getTimezoneOffsetInMilliseconds(startOfDayLeft);
+  var timestampRight = startOfDayRight.getTime() - playerElevateCardItems.getTimezoneOffsetInMilliseconds(startOfDayRight);
+
+  // Round the number of days to the nearest integer
+  // because the number of milliseconds in a day is not constant
+  // (e.g. it's different in the day of the daylight saving time clock shift)
+  return Math.round((timestampLeft - timestampRight) / MILLISECONDS_IN_DAY);
+}
+
+/**
+ * Days in 1 week.
+ *
+ * @name daysInWeek
+ * @constant
+ * @type {number}
+ * @default
+ */
+
+/**
+ * Milliseconds in 1 hour
+ *
+ * @name millisecondsInHour
+ * @constant
+ * @type {number}
+ * @default
+ */
+var millisecondsInHour = 3600000;
+
+/**
+ * @name differenceInMilliseconds
+ * @category Millisecond Helpers
+ * @summary Get the number of milliseconds between the given dates.
+ *
+ * @description
+ * Get the number of milliseconds between the given dates.
+ *
+ * @param {Date|Number} dateLeft - the later date
+ * @param {Date|Number} dateRight - the earlier date
+ * @returns {Number} the number of milliseconds
+ * @throws {TypeError} 2 arguments required
+ *
+ * @example
+ * // How many milliseconds are between
+ * // 2 July 2014 12:30:20.600 and 2 July 2014 12:30:21.700?
+ * const result = differenceInMilliseconds(
+ *   new Date(2014, 6, 2, 12, 30, 21, 700),
+ *   new Date(2014, 6, 2, 12, 30, 20, 600)
+ * )
+ * //=> 1100
+ */
+function differenceInMilliseconds(dateLeft, dateRight) {
+  playerElevateCardItems.requiredArgs(2, arguments);
+  return playerElevateCardItems.toDate(dateLeft).getTime() - playerElevateCardItems.toDate(dateRight).getTime();
+}
+
+var roundingMap = {
+  ceil: Math.ceil,
+  round: Math.round,
+  floor: Math.floor,
+  trunc: function trunc(value) {
+    return value < 0 ? Math.ceil(value) : Math.floor(value);
+  } // Math.trunc is not supported by IE
+};
+
+var defaultRoundingMethod = 'trunc';
+function getRoundingMethod(method) {
+  return method ? roundingMap[method] : roundingMap[defaultRoundingMethod];
+}
+
+/**
+ * @name differenceInHours
+ * @category Hour Helpers
+ * @summary Get the number of hours between the given dates.
+ *
+ * @description
+ * Get the number of hours between the given dates.
+ *
+ * @param {Date|Number} dateLeft - the later date
+ * @param {Date|Number} dateRight - the earlier date
+ * @param {Object} [options] - an object with options.
+ * @param {String} [options.roundingMethod='trunc'] - a rounding method (`ceil`, `floor`, `round` or `trunc`)
+ * @returns {Number} the number of hours
+ * @throws {TypeError} 2 arguments required
+ *
+ * @example
+ * // How many hours are between 2 July 2014 06:50:00 and 2 July 2014 19:00:00?
+ * const result = differenceInHours(
+ *   new Date(2014, 6, 2, 19, 0),
+ *   new Date(2014, 6, 2, 6, 50)
+ * )
+ * //=> 12
+ */
+function differenceInHours(dateLeft, dateRight, options) {
+  playerElevateCardItems.requiredArgs(2, arguments);
+  var diff = differenceInMilliseconds(dateLeft, dateRight) / millisecondsInHour;
+  return getRoundingMethod(options === null || options === void 0 ? void 0 : options.roundingMethod)(diff);
+}
+
+/**
+ * @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) {
+  playerElevateCardItems.requiredArgs(2, arguments);
+  var date = playerElevateCardItems.toDate(dirtyDate);
+  var dateToCompare = playerElevateCardItems.toDate(dirtyDateToCompare);
+  return date.getTime() < dateToCompare.getTime();
+}
+
+function updateProgressSvg(progressElementRef, percent) {
+  const svgElement = progressElementRef.querySelector('#total_level');
+  const endLockWidth = 15;
+  const barWidth = svgElement.getBBox().width;
+  const widthOnBar = percent * barWidth - endLockWidth < 0 ? 0 : percent * barWidth - endLockWidth;
+  //update bar's width, widthOnBar
+  const levelBar = progressElementRef.querySelector('#current_level');
+  //update filters, x = widthOnBar
+  const levelFilter = progressElementRef.querySelector('#filter_current_level');
+  //update circle, widthOnBar+10
+  const levelCircle = progressElementRef.querySelector('#circle_current_level');
+  svgElement.setAttribute('viewbox', `0 0 ${widthOnBar} 28`);
+  levelBar.setAttribute('width', `${widthOnBar}`);
+  levelCircle.setAttribute('cx', `${widthOnBar + 3}`);
+  levelFilter.setAttribute('x', `${widthOnBar - 4}`);
+  //update lock location
+  const endLockElement = progressElementRef.querySelector('#lock');
+  // wrapper of endLock, include ball and heatfilter1_d_305_23
+  const filter1 = progressElementRef.querySelector('#filter_heart_ball');
+  // ball in endlockfilter2_i_305_23
+  const filter2 = progressElementRef.querySelector('#filter_ball');
+  // heart in endlockfilter3_d_305_23
+  const filter3 = progressElementRef.querySelector('#filter_heart');
+  //wrapper of lockfilter4_d_305_23
+  const filterLock = progressElementRef.querySelector('#filter_lock');
+  // shadow of ball paint0_linear_305_23
+  const paint0 = progressElementRef.querySelector('#paint0_linear_ball');
+  //paint in lockpaint1_linear_305_23
+  const paint1 = progressElementRef.querySelector('#paint1_linear_lock');
+  // box of lock and heart, for move position dynamically
+  const lockBox = progressElementRef.querySelector('#lock_box');
+  const heartBox = progressElementRef.querySelector('#heart_box');
+  const rightPaddingOfLockWidth = 10, cxOfEndLockEle = barWidth - rightPaddingOfLockWidth;
+  //set cx of lockElement
+  endLockElement.setAttribute('cx', `${cxOfEndLockEle}`);
+  //set cx of sub Elements
+  paint1.setAttribute('x1', `${cxOfEndLockEle}`);
+  paint1.setAttribute('x2', `${cxOfEndLockEle}`);
+  paint0.setAttribute('x1', `${cxOfEndLockEle - 6}`);
+  paint0.setAttribute('x2', `${cxOfEndLockEle - 6 + 11.2}`);
+  filterLock.setAttribute('x', `${cxOfEndLockEle - 6}`);
+  filter3.setAttribute('x', `${cxOfEndLockEle - 6 - 2}`);
+  filter2.setAttribute('x', `${cxOfEndLockEle - 6 - 2 - 2}`);
+  filter1.setAttribute('x', `${cxOfEndLockEle - 6 - 2 - 2 - 4}`);
+  lockBox.setAttribute('x', `${cxOfEndLockEle - 6}`);
+  heartBox.setAttribute('x', `${cxOfEndLockEle - 6}`);
+}
+
+const playerElevateCardDataCss = ":host {\n  display: block;\n  width: 360px;\n  height: 230px;\n}\n\n.ElevateCardWrapper {\n  contain: layout inline-size;\n  width: 100%;\n  height: fit-content;\n  min-height: 218px;\n}\n\n.Outer {\n  container-type: inline-size;\n  font-size: 12px;\n  background-size: cover;\n  background-repeat: no-repeat;\n  line-height: initial;\n  width: 100%;\n  height: 100%;\n}\n\n.Dark {\n  color: var(--emfe-w-color-gray150, #efefef);\n}\n\n.Light {\n  color: var(--emfe-w-color-black, #0e0e0e);\n}\n\n@container (min-width: 381px) {\n  .Outer {\n    background-size: cover;\n  }\n  .Outer .OuterCover {\n    min-height: 190px;\n  }\n}\n@container (min-width: 260px) {\n  .Outer {\n    background-size: contain;\n  }\n}\n.OuterCover {\n  width: 100%;\n  height: 100%;\n  content: \"\";\n  background-repeat: no-repeat;\n  background-size: cover;\n  border-radius: 15px;\n}\n\n.Inner {\n  display: flex;\n  flex-direction: column;\n  min-height: 158px;\n}\n.Inner .Content {\n  padding: 15px;\n  flex-wrap: wrap;\n  gap: 8px;\n}\n.Inner .Row {\n  display: flex;\n  flex-direction: row;\n}\n.Inner .CardCell {\n  display: flex;\n}\n.Inner .LevelInfo {\n  display: flex;\n  flex-direction: column;\n}\n.Inner .LevelInfo .ElevateLevel .LevelName {\n  height: 28px;\n  border-radius: 5px;\n  line-height: 28px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.Inner .LevelInfo.Level0 .ElevateLevel .LevelName {\n  box-shadow: -2px -2px 7px 0px var(--emfe-w-elevate-color-level0button-shadow, rgba(191, 84, 6, 0.75));\n  background: linear-gradient(180deg, var(--emfe-w-elevate-color-level0-bg0, #E2792C) 0%, var(--emfe-w-elevate-color-level0-bg1, rgba(242, 151, 99, 0)) 100%);\n}\n.Inner .LevelInfo.Level1 .ElevateLevel .LevelName {\n  box-shadow: -2px -2px 7px 0px var(--emfe-w-elevate-color-level1button-shadow, rgba(151, 151, 151, 0.75));\n  background: linear-gradient(180deg, var(--emfe-w-elevate-color-level1-bg0, #BEBFED) 0%, var(--emfe-w-elevate-color-level1-bg1, rgba(216, 217, 233, 0)) 100%);\n}\n.Inner .LevelInfo.Level2 .ElevateLevel .LevelName {\n  box-shadow: -2px -2px 7px 0px var(--emfe-w-elevate-color-level2button-shadow, rgba(191, 120, 6, 0.75));\n  background: linear-gradient(180deg, var(--emfe-w-elevate-color-level2-bg0, #FCC410) 0%, var(--emfe-w-elevate-color-level2-bg1, rgba(255, 189, 43, 0)) 100%);\n}\n.Inner .LevelInfo.Level3 .ElevateLevel .LevelName {\n  box-shadow: -2px -2px 7px 0px var(--emfe-w-elevate-color-level3button-shadow, rgba(65, 6, 191, 0.75));\n  background: linear-gradient(180deg, var(--emfe-w-elevate-color-level3-bg0, #B1A2DB) 0%, var(--emfe-w-elevate-color-level3-bg1, rgba(203, 202, 245, 0)) 100%);\n}\n.Inner .LevelInfo.Level4 .ElevateLevel .LevelName {\n  box-shadow: -2px -2px 7px 0px var(--emfe-w-elevate-color-level4button-shadow, rgba(65, 6, 191, 0.75));\n  background: linear-gradient(180deg, var(--emfe-w-elevate-color-level4-bg0, #B1A2DB) 0%, var(--emfe-w-elevate-color-level4-bg1, rgba(203, 202, 245, 0)) 100%);\n}\n.Inner .LevelInfo .ElevateLevel {\n  display: flex;\n}\n.Inner .LevelInfo {\n  flex: 1;\n  flex-grow: 1;\n  min-width: 150px;\n}\n.Inner .PlayerImg {\n  width: 29%;\n  margin: auto;\n  max-width: 100px;\n  min-width: 30px;\n  order: 0;\n}\n.Inner .PlayerAvatar {\n  max-width: 100px;\n  flex-basis: 100px;\n  height: auto;\n  margin: auto;\n  padding-top: 10px;\n}\n.Inner .PlayerAvatar .Avatar, .Inner .PlayerAvatar .Badge {\n  width: 100%;\n  height: 100%;\n}\n.Inner .PlayerAvatar .Avatar {\n  border-radius: 50%;\n  background-size: contain;\n  background-repeat: no-repeat;\n}\n.Inner .ElevateLevel .ExpirationDate {\n  max-width: 138px;\n  min-width: 118px;\n}\n.Inner .PlayerName, .Inner .RedeemButton, .Inner .ElevateLevel {\n  text-transform: capitalize;\n  width: 100%;\n}\n.Inner .PlayerName {\n  font-size: 16px;\n}\n.Inner .Row .PointsInfo {\n  display: table;\n  font-weight: 600;\n}\n.Inner .Row .Redeem {\n  justify-content: flex-end;\n  margin-left: auto;\n}\n.Inner .Row .Redeem:hover {\n  color: var(--emfe-w-elevate-color-redeem-hover, #00ABA4);\n  cursor: pointer;\n}\n.Inner .Row .RedeemButton:hover span {\n  color: var(emfe-w-elevate-color-redeem-text-hover, #f1f1f1);\n  font-weight: bold;\n}\n.Inner .Row .RedeemButton {\n  width: 95px;\n  height: 35px;\n  display: flex;\n  align-items: center;\n  border-radius: 10px;\n  background: var(--emfe-w-elevate-color-redeem-bg, linear-gradient(0deg, #26CC37, #26CC37)), linear-gradient(117.99deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 33.89%), linear-gradient(283.85deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 33.47%), linear-gradient(268.18deg, rgba(255, 255, 255, 0.6) -17.36%, rgba(239, 239, 239, 0) 15.78%);\n  box-shadow: 0px 4px 4px 0px #00000040;\n}\n.Inner .Row .RedeemButton span {\n  color: var(--emfe-w-color-white, #fff);\n  line-height: 18px;\n  font-size: 15px;\n  text-align: center;\n  width: 100%;\n}\n.Inner .Row .Points {\n  font-size: large;\n  vertical-align: middle;\n}\n.Inner .Row .Points .XP {\n  font-size: x-small;\n}\n.Inner .Row .ExpirationPoints {\n  font-size: small;\n  text-align: right;\n  font-weight: bold;\n  color: var(--emfe-w-color-red, #9e595f);\n}";
+
+const PlayerElevateCardData = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.playerElevateLeveLoaded = index.createEvent(this, "playerElevateLeveLoaded", 7);
+  }
+  handleWindowResizs() {
+    this.initLevelProgressbar();
+  }
+  onRedeemClick() {
+    window.postMessage({ type: 'BEERedeemClicked' }, window.location.href);
+  }
+  loadLevels() {
+    let url = new URL(`${this.params.endpoint}/v1/elevate/levels?language=${this.params.language}`);
+    return new Promise((resolve, reject) => {
+      return fetch(url.href, {
+        method: 'GET',
+      })
+        .then((res) => res.json())
+        .then((res) => {
+        this.levels = res.data;
+        resolve(true);
+      })
+        .catch((err) => {
+        reject(err);
+      });
+    });
+  }
+  calcuatePointsToBeExpired(walletTotalInfo) {
+    let pointExpireInfoAsString = '';
+    if (!walletTotalInfo || !walletTotalInfo.aboutToExpire ||
+      walletTotalInfo.aboutToExpire.length == 0 ||
+      walletTotalInfo.aboutToExpire[0].points <= 0) {
+      return pointExpireInfoAsString;
+    }
+    walletTotalInfo.aboutToExpire.sort((expire1, expire2) => {
+      return isBefore(new Date(expire1.expireTime), new Date(expire2.expireTime))
+        ? -1
+        : 1;
+    });
+    const aboutToExpire = walletTotalInfo.aboutToExpire[0];
+    const daysToExpried = differenceInCalendarDays(new Date(aboutToExpire.expireTime), new Date());
+    let hoursToExpired = 0, expiredTranslationKey = daysToExpried === 0 ? 'pointsToBeExpiredDay' : 'pointsToBeExpired';
+    if (daysToExpried == 0) {
+      hoursToExpired = differenceInHours(new Date(aboutToExpire.expireTime), new Date());
+      expiredTranslationKey = hoursToExpired > 1 ? 'pointsToBeExpiredHours' : 'pointsToBeExpiredHour';
+    }
+    pointExpireInfoAsString = playerElevateCardItems.translateWithParams(expiredTranslationKey, {
+      expirationPoints: aboutToExpire.points,
+      expireDay: daysToExpried,
+    });
+    return pointExpireInfoAsString;
+  }
+  loadPlayerLevelInfo() {
+    let url = new URL(`${this.params.endpoint}/v1/elevate/playerInfo?language=${this.params.language}`);
+    return new Promise((resolve, reject) => {
+      return fetch(url.href, {
+        method: 'GET',
+        headers: {
+          'X-Sessionid': this.params.session,
+          'Content-Type': 'application/json',
+        },
+      })
+        .then((res) => res.json())
+        .then((res) => {
+        var _a, _b, _c;
+        if (!res.success) {
+          console.error('Exception when fetch user elevateinfo, ', res.errorCode, res.errorMessage);
+          reject(true);
+          return;
+        }
+        let playerElevateInfo = res.data;
+        this.playerElevateLevel = playerElevateInfo.level;
+        this.playerElevateLevel.name = this.playerElevateLevel.presentation.displayName || this.playerElevateLevel.name;
+        this.playerElevateLevel.spendablePoints = ((_a = playerElevateInfo.spendableWallet) === null || _a === void 0 ? void 0 : _a.total.points) || 0;
+        this.playerElevateLeveLoaded.emit({ elevateLevel: this.playerElevateLevel });
+        const spendableTotal = (_b = res.data.spendableWallet) === null || _b === void 0 ? void 0 : _b.total;
+        const loyaltyWalletTotal = (_c = res.data.loyaltyWallet) === null || _c === void 0 ? void 0 : _c.total;
+        this.playerElevateLeveLoaded.emit({
+          elevateLevelWalletTotal: spendableTotal,
+          loyaltyWalletTotal
+        });
+        let spExpireInfoAsString = this.calcuatePointsToBeExpired(spendableTotal);
+        let xpExpireInfoAsString = this.calcuatePointsToBeExpired(loyaltyWalletTotal);
+        if (spExpireInfoAsString || xpExpireInfoAsString) {
+          this.playerElevateLeveLoaded.emit({
+            pointExpireString: spExpireInfoAsString,
+            xpExpireString: xpExpireInfoAsString
+          });
+        }
+        resolve(this.playerElevateLevel);
+      })
+        .catch((err) => {
+        console.log('error ', err);
+        reject(true);
+      });
+    });
+  }
+  setLoyaltyProgress(percent) {
+    updateProgressSvg(this.loyaltyProgressEle, percent);
+  }
+  initLevelProgressbar() {
+    setTimeout(() => {
+      this.loyaltyProgressEle =
+        this.elevateCardRef.parentElement.querySelector('#LevelProgress');
+      if (!this.loyaltyProgressEle) {
+        return;
+      }
+      this.setLoyaltyProgress(!this.playerElevateLevel.nextLevel
+        ? 1
+        : (this.playerElevateLevel.loyaltyPoints -
+          this.playerElevateLevel.entryPoints) /
+          (this.playerElevateLevel.nextLevel.entryPoints -
+            this.playerElevateLevel.loyaltyPoints));
+      this.params['playerElevateLevel'] = this.playerElevateLevel;
+    }, 80);
+  }
+  componentWillRender() { }
+  componentDidRender() {
+    this.initLevelProgressbar();
+  }
+  componentWillLoad() {
+    if (!this.params.endpoint || !this.params.session) {
+      return;
+    }
+    const promises = [];
+    promises.push(this.loadPlayerLevelInfo());
+    if (this.params.calculateLevelFlag) {
+      promises.push(this.loadLevels());
+    }
+    Promise.all(promises).then((res) => {
+      console.log('elevate-init', res);
+      this.initLevelProgressbar();
+      if (!this.levels) {
+        return;
+      }
+      this.levels.sort((level1, level2) => {
+        return level1.firstEntryPoints > level2.firstEntryPoints ? 1 : -1;
+      });
+      const playerPoints = this.playerElevateLevel.loyaltyPoints;
+      let playerLevelNumber = 0;
+      this.levels.forEach((elevateLevel, idx) => {
+        if (playerPoints > elevateLevel.firstEntryPoints) {
+          playerLevelNumber = idx;
+        }
+      });
+      this.playerElevateLeveLoaded.emit({
+        calculatedLevelFlag: playerLevelNumber,
+      });
+    });
+  }
+  get elevateCardRef() { return index.getElement(this); }
+};
+PlayerElevateCardData.style = playerElevateCardDataCss;
+
+const playerElevatePointcardCss = ":host{display:block}.PointsCard .Inner .Row .ExpirationPoints{text-align:left}.PointsCard .Inner .PlayerAvatar .Avatar{display:none}.PointsCard .Inner .PlayerAvatar .Badge{border-radius:50%;background-size:contain;width:100%;height:100%;position:inherit}.PointsCard .Inner .PointsTxt{display:flex;flex-direction:row;justify-content:space-between}.PointsCard .Inner .DetailButton{background:linear-gradient(283.85deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 33.47%), linear-gradient(117.99deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 33.89%), linear-gradient(268.18deg, rgba(255, 255, 255, 0.6) -17.36%, rgba(239, 239, 239, 0) 15.78%), linear-gradient(0deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.6));border-radius:5px;box-shadow:0px 4px 4px 0px rgba(0, 0, 0, 0.25);border:2px solid;font-size:11px;width:108px;padding:4px;cursor:pointer;margin-top:5px;height:16px;min-width:45px;text-align:center}.PointsCard .Inner .DetailButton span{color:var(--emfe-w-color-gray-150, #6D6D6D)}.PointsCard .Inner .DetailButton span{display:inline-block;vertical-align:middle}.PointsCard .Inner .DetailButton:hover span{color:var(--emfe-w-color-gray-150, #6D6D6D)}.PointsCard .Inner .LevelInfo{gap:15px;width:70%}.PointsCard .Inner .LevelInfo .PointsTxt{font-size:15px}.PointsCard .Inner .LevelInfo .PointsTxt.Label{display:none}.PointsCard .Inner .LevelInfo .PointsTxt.SPPoints{padding-top:15px}.PointsCard .Inner .LevelInfo .PointsTxt .TC{font-size:x-small;color:var(--emw--color-gray-300, #58586B);display:flex;align-content:center;height:100%;flex-wrap:wrap;text-decoration:underline;cursor:pointer;display:none}";
+
+const PlayerElevatePointcard = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    /**
+     * The style that widget shows,available value: Dark, Light
+     * Default: Dark
+     */
+    this.theme = 'Dark';
+    /**
+     * Widget Language to show
+     */
+    this.language = 'en';
+    /**
+     * Check if the card used in points details widget, default: 'earningRule'
+     * value: 'details'/'earningRule'
+     * It effected the button in card
+     * 'earningRule':  button text, 'earning rules', post 'BEEPointRulesClicked' when clicked
+     * 'details': button text, 'details', post 'BEEDetailsClicked' when clicked
+     */
+    this.buttonType = 'earningRule';
+    /**
+     * datePattern
+     */
+    this.dateFormat = 'yyyy-MM-dd';
+    /**
+     * Client custom styling via inline styles
+     */
+    this.clientStyling = '';
+    /**
+     * Client custom styling via url
+     */
+    this.clientStylingUrl = '';
+    /**
+     * Translation via url
+     */
+    this.translationUrl = '';
+    this.isPointDetailCard = this.buttonType === 'earningRule';
+  }
+  playerElevateLeveLoadedHandler(event) {
+    if (!event.detail) {
+      return;
+    }
+    if (event.detail['elevateLevelWalletTotal']) {
+      this.elevateWalletTotal = event.detail['elevateLevelWalletTotal'];
+      this.elevateSPTotal = event.detail['loyaltyWalletTotal'];
+    }
+    if (event.detail['elevateLevel']) {
+      this.playerElevateLevel = event.detail['elevateLevel'];
+    }
+    if (event.detail['pointExpireString']) {
+      this.pointExpireString = event.detail.pointExpireString;
+    }
+  }
+  onDetailsClick() {
+    window.postMessage({ type: this.isPointDetailCard ? 'BEEPointRulesClicked' : 'BEEDetailsClicked',
+      path: this.isPointDetailCard ? 'player-elevate-level' : 'player-elevate-point-details' }, window.location.href);
+  }
+  componentWillLoad() {
+    this.paramProxy = {
+      endpoint: this.endpoint,
+      session: this.session,
+      language: this.language,
+    };
+  }
+  render() {
+    const backgroundOuterImagePath = index.getAssetPath('../static/card-ground.svg');
+    const backgroundInnerImagePath = index.getAssetPath('../static/card-ground-over.svg');
+    return (index.h("div", { class: `ElevateCardWrapper ${this.theme}` }, index.h("div", { class: "PointsCard Outer ", style: { 'backgroundImage': `url(${backgroundOuterImagePath}` } }, index.h("general-styling-wrapper", { clientStyling: this.clientStyling, clientStylingUrl: this.clientStylingUrl, targetTranslations: playerElevateCardItems.TRANSLATIONS, translationUrl: this.translationUrl }), index.h("player-elevate-card-data", { params: this.paramProxy }), index.h("div", { class: 'OuterCover Inner', style: { 'backgroundImage': `url(${backgroundInnerImagePath}` } }, index.h("div", { class: 'Content Row' }, this.playerElevateLevel && (index.h(index.Fragment, null, index.h("div", { class: "PlayerImg" }, index.h(playerElevateCardItems.PlayerAvatar, { onlyBadge: true, loyaltyIconUrl: this.playerElevateLevel.presentation.asset })), index.h("div", { class: `LevelInfo ${this.playerElevateLevel.name}` }, index.h("div", { class: "PointsTxt Label" }, this.cardTitle ? this.cardTitle : playerElevateCardItems.translate('spendablePoints')), index.h("div", { class: 'PointsTxt SPPoints' }, index.h(playerElevateCardItems.PlayerPoints, { spendablePoints: this.playerElevateLevel.spendablePoints, language: this.language }), index.h("a", { class: "TC", onClick: () => {
+        this.onDetailsClick();
+      } }, playerElevateCardItems.translate('termAndConditions', this.language))), this.pointExpireString && (index.h("div", { class: 'ExpirationPoints' }, this.pointExpireString, " "))))))))));
+  }
+};
+PlayerElevatePointcard.style = playerElevatePointcardCss;
+
+exports.bonus_elevate_shop = BonusElevateShop;
+exports.general_styling_wrapper = GeneralStylingWrapper;
+exports.player_elevate_card_data = PlayerElevateCardData;
+exports.player_elevate_pointcard = PlayerElevatePointcard;