@everymatrix/gamification-dropdown 1.43.4 → 1.54.2

package/dist/esm/gamification-dropdown_4.entry.js

@@ -1,266 +1,88 @@
-import { r as registerInstance, h, g as getElement, c as createEvent, a as getAssetPath, F as Fragment } from './index-a803f08b.js';
-import { r as requiredArgs, t as toDate, g as getTimezoneOffsetInMilliseconds, a as translateWithParams, T as TRANSLATIONS$1, P as PlayerAvatar, b as PlayerPoints, c as PlayerLoyaltyProcess, d as translate$1, f as format } from './player-elevate-card-items-5bf07fe3.js';
-
-const DEFAULT_LANGUAGE = 'en';
-let TRANSLATIONS = {
-  en: {
-    gamificationNoPoints: "No points"
-  },
-  de: {
-    gamificationNoPoints: "No points"
-  },
-  ro: {
-    gamificationNoPoints: "No points"
-  },
-  fr: {
-    gamificationNoPoints: "No points"
-  },
-  ar: {
-    gamificationNoPoints: "No points"
-  },
-  hr: {
-    gamificationNoPoints: "No points"
-  }
-};
-const getTranslations = (url) => {
-  return new Promise((resolve) => {
-    fetch(url)
-      .then((res) => res.json())
-      .then((data) => {
-      Object.keys(data).forEach((lang) => {
-        if (!TRANSLATIONS[lang]) {
-          TRANSLATIONS[lang] = {};
-        }
-        for (let key in data[lang]) {
-          TRANSLATIONS[lang][key] = data[lang][key];
-        }
-      });
-      resolve(true);
-    });
-  });
-};
-const translate = (key, customLang) => {
-  const lang = customLang;
-  return TRANSLATIONS[(lang !== undefined) && (lang in TRANSLATIONS) ? lang : DEFAULT_LANGUAGE][key];
-};
-
-const gamificationDropdownCss = ":host{display:block}.GamificationDropdownContainer{position:relative}.GamificationDropdownContainer .GamificationDropdown{position:absolute;left:0;z-index:200;overflow:hidden;cursor:pointer}.GamificationDropdownButton{cursor:pointer;font-size:14px;height:20px;background-color:unset;color:var(--emw--color-typography, #FFFFFF);padding:0;border:none;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;display:flex;align-items:center;justify-content:center;line-height:0}.GamificationDropdownButton:hover{color:var(--emw--color-primary, #52d004)}.GamificationDropdownButton:hover svg{fill:var(--emw--color-primary, #52d004)}.GamificationDropdownButton.IsOpen{color:var(--emw--color-primary, #52d004)}.GamificationDropdownButton.IsOpen svg{fill:var(--emw--color-primary, #52d004)}.GamificationDropdownButton .TriangleActive,.GamificationDropdownButton .TriangleInactive{display:block;transition:all 0.2s}.GamificationDropdownButton .TriangleActive{transform:scale(1.1) rotateX(180deg) translateY(3px);fill:var(--emw--color-primary, #52d004);margin-top:4px}.GamificationDropdownButton svg{fill:var(--emw--color-typography, #FFFFFF);margin-left:8px;width:16px}";
-
-const GamificationDropdown = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    /**
-     * Language of the widget
-     */
-    this.language = 'en';
-    /**
-     * Session of the user
-     */
-    this.session = '';
-    /**
-    * Client custom styling via string
-    */
-    this.clientStyling = '';
-    /**
-     * Client custom styling via url
-     */
-    this.clientStylingUrl = '';
-    /**
-     * Translations via URL
-     */
-    this.translationUrl = '';
-    this.isOpen = false;
-    this.isLoading = false;
-    this.stylingAppends = false;
-    this.setClientStyling = () => {
-      let sheet = document.createElement('style');
-      sheet.innerHTML = this.clientStyling;
-      this.stylingContainer.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.stylingContainer.prepend(cssFile); }, 1);
-      })
-        .catch((err) => {
-        console.log('error ', err);
-      });
-    };
-    this.navigateToGamification = () => {
-      window.postMessage({ type: 'NavigateToGamification' }, window.location.href);
-      this.isOpen = false;
-    };
-    this.handleOutsideClick = (event) => {
-      const path = event.composedPath();
-      if (!path.includes(this.el)) {
-        this.isOpen = false;
-        document.removeEventListener('click', this.handleOutsideClick);
-      }
-    };
-    this.handleDropdownClick = (event) => {
-      event.stopPropagation();
-      this.isOpen = !this.isOpen;
-      if (this.isOpen) {
-        document.addEventListener('click', this.handleOutsideClick);
-      }
-      else {
-        document.removeEventListener('click', this.handleOutsideClick);
-      }
-    };
-  }
-  handleNewTranslations() {
-    this.isLoading = true;
-    getTranslations(this.translationUrl).then(() => {
-      this.isLoading = false;
-    });
-  }
-  async componentWillLoad() {
-    if (this.translationUrl.length > 2) {
-      await getTranslations(this.translationUrl);
-    }
-    if (this.endpoint && this.language) {
-      return this.fetchPointsData();
-    }
-  }
-  componentDidRender() {
-    // start custom styling area
-    if (!this.stylingAppends && this.stylingContainer) {
-      if (this.clientStyling)
-        this.setClientStyling();
-      if (this.clientStylingUrl)
-        this.setClientStylingURL();
-      this.stylingAppends = true;
-    }
-    // end custom styling area
-  }
-  fetchPointsData() {
-    let url = new URL(`${this.endpoint}/v1/elevate/playerInfo`);
-    url.searchParams.append('language', this.language);
-    const headers = new Headers();
-    headers.append('X-SessionId', this.session);
-    const options = {
-      method: 'GET',
-      headers
-    };
-    return new Promise((resolve, reject) => {
-      this.isLoading = true;
-      fetch(url.href, options)
-        .then((res) => res.json())
-        .then((data) => {
-        var _a, _b;
-        this.loyaltyPoints = (_b = (_a = data === null || data === void 0 ? void 0 : data.data) === null || _a === void 0 ? void 0 : _a.level) === null || _b === void 0 ? void 0 : _b.loyaltyPoints;
-        resolve(true);
-      }).catch((err) => {
-        console.error(err);
-        reject(err);
-      }).finally(() => {
-        this.isLoading = false;
-      });
-    });
-  }
-  render() {
-    if (this.isLoading) {
-      return null;
-    }
-    else {
-      return (h("div", { ref: el => this.stylingContainer = el, class: "GamificationDropdownContainer" }, h("button", { class: `GamificationDropdownButton ${this.isOpen ? 'IsOpen' : ''}`, type: "button", onClick: (e) => this.handleDropdownClick(e), title: typeof this.loyaltyPoints === 'number'
-          ? String(this.loyaltyPoints)
-          : translate('gamificationNoPoints', this.language) }, typeof this.loyaltyPoints === 'number'
-        ? `${this.loyaltyPoints} XP`
-        : '...', h("span", { class: this.isOpen ? 'TriangleActive' : 'TriangleInactive' }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "14", height: "6.835", viewBox: "0 0 14 6.835" }, h("path", { id: "arrow", d: "M281.541,447.921a.488.488,0,0,0,.295-.122l6.5-5.851a.488.488,0,1,0-.65-.726l-6.176,5.556-6.176-5.556h0a.488.488,0,1,0-.65.726l6.5,5.851a.488.488,0,0,0,.355.122Z", transform: "translate(-274.511 -441.088)" })))), this.isOpen && (h("div", { class: "GamificationDropdown", onClick: this.navigateToGamification }, h("player-elevate-loyaltycard", { endpoint: this.endpoint, session: this.session, language: this.language, "client-styling-url": this.clientStylingUrl, "client-styling": this.clientStyling })))));
-    }
-  }
-  get el() { return getElement(this); }
-  static get watchers() { return {
-    "translationUrl": ["handleNewTranslations"]
-  }; }
-};
-GamificationDropdown.style = gamificationDropdownCss;
+export { G as gamification_dropdown } from './gamification-dropdown-ae7b7c69.js';
+import { r as registerInstance, h, g as getElement, c as createEvent, a as getAssetPath, F as Fragment } from './index-ea7720e4.js';
+import { r as requiredArgs, t as toDate, g as getTimezoneOffsetInMilliseconds, a as translateWithParams, T as TRANSLATIONS, P as PlayerAvatar, b as PlayerElevateLoyaltyLevel, c as PlayerPoints, d as PlayerLoyaltyProcess } from './player-elevate-card-items-9d490a3b.js';
 
 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);
+    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 GeneralStylingWrapperStyle0 = generalStylingWrapperCss;
 
 const GeneralStylingWrapper = class {
-  constructor(hostRef) {
-    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;
+    constructor(hostRef) {
+        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);
+            });
+        };
     }
-    // end custom styling area
-  }
-  async componentWillLoad() {
-    const promises = [];
-    if (this.translationUrl) {
-      const translationPromise = mergeTranslations(this.translationUrl, this.targetTranslations);
-      promises.push(translationPromise);
+    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);
     }
-    return await Promise.all(promises);
-  }
-  render() {
-    return (h("div", { class: "StyleShell" }, h("slot", { name: "mainContent" })));
-  }
-  get el() { return getElement(this); }
+    render() {
+        return (h("div", { key: '4d3414408c7662f88331dbe655966237f74d6958', class: "StyleShell" }, h("slot", { key: '1d004644d84602c4314bdf5dfc26b55b160f57df', name: "mainContent" })));
+    }
+    get el() { return getElement(this); }
 };
-GeneralStylingWrapper.style = generalStylingWrapperCss;
+GeneralStylingWrapper.style = GeneralStylingWrapperStyle0;
 
 /**
  * @name startOfDay
@@ -341,6 +163,16 @@ function differenceInCalendarDays(dirtyDateLeft, dirtyDateRight) {
  * @default
  */
 
+/**
+ * Milliseconds in 1 minute
+ *
+ * @name millisecondsInMinute
+ * @constant
+ * @type {number}
+ * @default
+ */
+var millisecondsInMinute = 60000;
+
 /**
  * Milliseconds in 1 hour
  *
@@ -421,6 +253,43 @@ function differenceInHours(dateLeft, dateRight, options) {
   return getRoundingMethod(options === null || options === void 0 ? void 0 : options.roundingMethod)(diff);
 }
 
+/**
+ * @name differenceInMinutes
+ * @category Minute Helpers
+ * @summary Get the number of minutes between the given dates.
+ *
+ * @description
+ * Get the signed number of full (rounded towards 0) minutes 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 minutes
+ * @throws {TypeError} 2 arguments required
+ *
+ * @example
+ * // How many minutes are between 2 July 2014 12:07:59 and 2 July 2014 12:20:00?
+ * const result = differenceInMinutes(
+ *   new Date(2014, 6, 2, 12, 20, 0),
+ *   new Date(2014, 6, 2, 12, 7, 59)
+ * )
+ * //=> 12
+ *
+ * @example
+ * // How many minutes are between 10:01:59 and 10:00:00
+ * const result = differenceInMinutes(
+ *   new Date(2000, 0, 1, 10, 0, 0),
+ *   new Date(2000, 0, 1, 10, 1, 59)
+ * )
+ * //=> -1
+ */
+function differenceInMinutes(dateLeft, dateRight, options) {
+  requiredArgs(2, arguments);
+  var diff = differenceInMilliseconds(dateLeft, dateRight) / millisecondsInMinute;
+  return getRoundingMethod(options === null || options === void 0 ? void 0 : options.roundingMethod)(diff);
+}
+
 /**
  * @name isBefore
  * @category Common Helpers
@@ -447,302 +316,313 @@ function isBefore(dirtyDate, dirtyDateToCompare) {
 }
 
 function updateProgressSvg(progressElementRef, percent) {
-  const svgElement = progressElementRef.querySelector('#total_level');
-  const endLockWidth = 17, pointR = 6.5;
-  //Total Widget of the progress
-  const barWidth = svgElement.getBBox().width;
-  //The filled width according to current progress
-  const levelPercent = percent > 1 ? 1 : percent;
-  const widthOnBar = (levelPercent * barWidth - endLockWidth) < 0 ? 0 : levelPercent * 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 < pointR ? pointR : widthOnBar)}`);
-  levelFilter.setAttribute('x', `${widthOnBar - 8}`);
-  //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}`);
-  svgElement.parentElement.style.opacity = '1';
+    const svgElement = progressElementRef.querySelector('#total_level');
+    const endLockWidth = 17, pointR = 6.5;
+    //Total Widget of the progress
+    const barWidth = svgElement.getBBox().width;
+    //The filled width according to current progress
+    const levelPercent = percent > 1 ? 1 : percent;
+    const widthOnBar = (levelPercent * barWidth - endLockWidth) < 0 ? 0 : levelPercent * 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 < pointR ? pointR : widthOnBar)}`);
+    levelFilter.setAttribute('x', `${widthOnBar - 8}`);
+    //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}`);
+    svgElement.parentElement.style.opacity = '1';
 }
 
-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 .LevelProgress svg {\n  transition: opacity 0.4s;\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 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(--emw--color-gray150, #efefef);\n}\n\n.Light {\n  color: var(--emw--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 .LevelProgress svg {\n  transition: opacity 0.4s;\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(--emw--elevate-color-level0button-shadow, rgba(191, 84, 6, 0.75));\n  background: linear-gradient(180deg, var(--emw--elevate-color-level0-bg0, #E2792C) 0%, var(--emw--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(--emw--elevate-color-level1button-shadow, rgba(151, 151, 151, 0.75));\n  background: linear-gradient(180deg, var(--emw--elevate-color-level1-bg0, #BEBFED) 0%, var(--emw--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(--emw--elevate-color-level2button-shadow, rgba(191, 120, 6, 0.75));\n  background: linear-gradient(180deg, var(--emw--elevate-color-level2-bg0, #FCC410) 0%, var(--emw--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(--emw--elevate-color-level3button-shadow, rgba(65, 6, 191, 0.75));\n  background: linear-gradient(180deg, var(--emw--elevate-color-level3-bg0, #B1A2DB) 0%, var(--emw--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(--emw--elevate-color-level4button-shadow, rgba(65, 6, 191, 0.75));\n  background: linear-gradient(180deg, var(--emw--elevate-color-level4-bg0, #B1A2DB) 0%, var(--emw--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(--emw--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(--emw--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 rgba(0, 0, 0, 0.2509803922);\n}\n.Inner .Row .RedeemButton span {\n  color: var(--emw--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(--emw--color-red, #9e595f);\n}";
+const PlayerElevateCardDataStyle0 = playerElevateCardDataCss;
 
 const PlayerElevateCardData = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.playerElevateLeveLoaded = createEvent(this, "playerElevateLeveLoaded", 7);
-  }
-  handleWindowResizs() {
-    this.initLevelProgressbar();
-  }
-  onParamsChanged() {
-    this.loadElevateInfo();
-  }
-  redeemGiftButtonHandler() {
-    this.loadElevateInfo();
-  }
-  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;
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.playerElevateLeveLoaded = createEvent(this, "playerElevateLeveLoaded", 7);
     }
-    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';
+    handleWindowResizs() {
+        this.initLevelProgressbar();
     }
-    pointExpireInfoAsString = 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;
+    onParamsChanged() {
+        this.loadElevateInfo();
+    }
+    redeemGiftButtonHandler() {
+        this.loadElevateInfo();
+    }
+    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;
         }
-        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
+        walletTotalInfo.aboutToExpire.sort((expire1, expire2) => {
+            return isBefore(new Date(expire1.expireTime), new Date(expire2.expireTime))
+                ? -1
+                : 1;
         });
-        let spExpireInfoAsString = this.calcuatePointsToBeExpired(spendableTotal);
-        let xpExpireInfoAsString = this.calcuatePointsToBeExpired(loyaltyWalletTotal);
-        if (spExpireInfoAsString || xpExpireInfoAsString) {
-          this.playerElevateLeveLoaded.emit({
-            pointExpireString: spExpireInfoAsString,
-            xpExpireString: xpExpireInfoAsString
-          });
+        const aboutToExpire = walletTotalInfo.aboutToExpire[0];
+        const daysToExpried = differenceInCalendarDays(new Date(aboutToExpire.expireTime), new Date());
+        let hoursToExpired = 0, minutesToExpired = 0, expiredTranslationKey = daysToExpried === 0 ? 'pointsToBeExpiredDay' : 'pointsToBeExpired';
+        if (daysToExpried <= 0) {
+            hoursToExpired = differenceInHours(new Date(aboutToExpire.expireTime), new Date(), { roundingMethod: 'floor' });
+            expiredTranslationKey = hoursToExpired > 1 ? 'pointsToBeExpiredHours' : 'pointsToBeExpiredHour';
+            if (hoursToExpired <= 0) {
+                minutesToExpired = differenceInMinutes(new Date(aboutToExpire.expireTime), new Date(), { roundingMethod: 'floor' });
+                expiredTranslationKey = minutesToExpired > 1 ? 'pointsToBeExpiredMinutes' : 'pointsToBeExpiredMinute';
+            }
         }
-        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.nextLevel.entryPoints));
-      this.params['playerElevateLevel'] = this.playerElevateLevel;
-    }, 80);
-  }
-  componentDidRender() {
-    this.initLevelProgressbar();
-  }
-  loadElevateInfo() {
-    if (!this.params.endpoint || !this.params.session) {
-      return;
+        pointExpireInfoAsString = translateWithParams(expiredTranslationKey, {
+            expirationPoints: aboutToExpire.points,
+            expireDay: Math.max(daysToExpried, hoursToExpired, minutesToExpired),
+        });
+        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.nextLevel.entryPoints));
+            this.params['playerElevateLevel'] = this.playerElevateLevel;
+        }, 80);
     }
-    const promises = [];
-    promises.push(this.loadPlayerLevelInfo());
-    if (this.params.calculateLevelFlag) {
-      promises.push(this.loadLevels());
+    componentDidRender() {
+        this.initLevelProgressbar();
     }
-    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;
+    loadElevateInfo() {
+        if (!this.params.endpoint || !this.params.session) {
+            return;
         }
-      });
-      this.playerElevateLeveLoaded.emit({
-        calculatedLevelFlag: playerLevelNumber,
-      });
-    });
-  }
-  componentWillLoad() {
-    this.loadElevateInfo();
-  }
-  get elevateCardRef() { return getElement(this); }
-  static get watchers() { return {
-    "params": ["onParamsChanged"]
-  }; }
+        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,
+            });
+        });
+    }
+    componentWillLoad() {
+        this.loadElevateInfo();
+    }
+    get elevateCardRef() { return getElement(this); }
+    static get watchers() { return {
+        "params": ["onParamsChanged"]
+    }; }
 };
-PlayerElevateCardData.style = playerElevateCardDataCss;
+PlayerElevateCardData.style = PlayerElevateCardDataStyle0;
 
-const playerElevateLoyaltycardCss = ":host{display:block}@media screen and (min-width: 501px){.LoyaltyCard .Inner .LevelInfo .ElevateLevel{flex-wrap:nowrap}.LoyaltyCard .Inner .LevelInfo .ElevateLevel .ExpirationDate{padding-top:11px;margin-left:5px}}@media screen and (max-width: 500px){.LoyaltyCard .Inner .LevelInfo .ElevateLevel{flex-wrap:wrap}.LoyaltyCard .Inner .LevelInfo .ElevateLevel .ExpirationDate{padding-top:0px;margin-left:0px}}.LoyaltyCard .Inner .LevelProgress{margin-left:0px}.LoyaltyCard .Inner .Row .PointsInfo{width:100%}.LoyaltyCard .Inner .Row .PointsInfo.ExpirationPoints{text-align:left;color:var(--emfe-w-color-red-50, red)}.LoyaltyCard .Inner .PlayerAvatar .Avatar{display:none}.LoyaltyCard .Inner .PlayerAvatar .Badge{border-radius:50%;background-size:contain;width:100%;height:100%}.LoyaltyCard .Inner .LevelInfo .ElevateLevel{display:flex;flex:1;align-items:center}.LoyaltyCard .Inner .LevelInfo .ElevateLevel .ExpirationDate{position:relative;padding-left:5px}.LoyaltyCard .Inner .LevelInfo .ElevateLevel .ExpirationDate .ExpireTime{margin-left:5px}.LoyaltyCard .Inner .LevelInfo .ElevateLevel .LevelName{padding-left:0;font-size:var(--emfe-w-elevate-fontsize-2xlarge, 21px);position:relative;width:auto;color:var(--emfe-w-elevate-color-levelname, #FFBD2B);font-weight:bold}.LoyaltyCard .Row{padding-top:3px;padding-bottom:5px}.LoyaltyCard .ExpireTime{margin-left:5px}.LoyaltyCard .NextLevelTip{text-align:right;font-size:11px;color:var(--emfe-w-color-black, #000);opacity:0.8;font-weight:bold}";
+const playerElevateLoyaltycardCss = ":host{display:block}@media screen and (min-width: 501px){.LoyaltyCard .Inner .LevelInfo .ElevateLevel{flex-wrap:nowrap}.LoyaltyCard .Inner .LevelInfo .ElevateLevel .ExpirationDate{padding-top:11px;margin-left:5px}}@media screen and (max-width: 500px){.LoyaltyCard .Inner .LevelInfo .ElevateLevel{flex-wrap:wrap}.LoyaltyCard .Inner .LevelInfo .ElevateLevel .ExpirationDate{padding-top:0px;margin-left:0px}}.LoyaltyCard .Inner .LevelProgress{margin-left:0px}.LoyaltyCard .Inner .Row .PointsInfo.ExpirationPoints{text-align:left;color:var(--emw--color-red-50, red)}.LoyaltyCard .Inner .PlayerAvatar .Avatar{display:none}.LoyaltyCard .Inner .PlayerAvatar .Badge{border-radius:50%;background-size:contain;width:100%;height:100%}.LoyaltyCard .Inner .LevelInfo .ElevateLevel{display:flex;flex:1;align-items:center}.LoyaltyCard .Inner .LevelInfo .ElevateLevel .ExpirationDate{position:relative;padding-left:5px}.LoyaltyCard .Inner .LevelInfo .ElevateLevel .ExpirationDate .ExpireTime{margin-left:5px}.LoyaltyCard .Inner .LevelInfo .ElevateLevel .LevelName{padding-left:0;font-size:var(--emw--elevate-fontsize-2xlarge, 21px);position:relative;width:auto;color:var(--emw--elevate-color-levelname, #FFBD2B);font-weight:bold}.LoyaltyCard .PointsRange{display:flex;justify-content:space-between}.LoyaltyCard .PointsRange .PointsInfo{width:auto}.LoyaltyCard .NextLevelTip{text-align:right;font-size:11px;color:var(--emw--color-black, #000);opacity:0.8;font-weight:bold}";
+const PlayerElevateLoyaltycardStyle0 = playerElevateLoyaltycardCss;
 
 const PlayerElevateLoyaltycard = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    /**
-     * The style that widget shows,available value: Dark, Light
-     * Default: Dark
-     */
-    this.theme = 'Dark';
-    /**
-     * Widget Language to show
-     */
-    this.language = 'en';
-    /**
-     * 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 = '';
-  }
-  onSessionOrEndpointChange() {
-    this.paramProxy = Object.assign(Object.assign({}, this.paramProxy), { session: this.session, endpoint: this.endpoint, language: this.language });
-  }
-  playerElevateLeveLoadedHandler(event) {
-    if (!event.detail) {
-      return;
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        /**
+         * The style that widget shows,available value: Dark, Light
+         * Default: Dark
+         */
+        this.theme = 'Dark';
+        /**
+         * Widget Language to show
+         */
+        this.language = 'en';
+        /**
+         * 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 = '';
+    }
+    onSessionOrEndpointChange() {
+        this.paramProxy = Object.assign(Object.assign({}, this.paramProxy), { session: this.session, endpoint: this.endpoint, language: this.language });
+    }
+    playerElevateLeveLoadedHandler(event) {
+        if (!event.detail) {
+            return;
+        }
+        if (event.detail['elevateLevelWalletTotal']) {
+            this.elevateWalletTotal = event.detail['elevateLevelWalletTotal'];
+        }
+        if (event.detail['elevateLevel']) {
+            this.playerElevateLevel = event.detail['elevateLevel'];
+        }
+        if (event.detail['pointExpireString']) {
+            this.pointExpireString = event.detail.xpExpireString;
+        }
     }
-    if (event.detail['elevateLevelWalletTotal']) {
-      this.elevateWalletTotal = event.detail['elevateLevelWalletTotal'];
+    onRedeemClick() {
+        window.postMessage({ type: 'BEERedeemClicked' }, window.location.href);
     }
-    if (event.detail['elevateLevel']) {
-      this.playerElevateLevel = event.detail['elevateLevel'];
+    componentWillLoad() {
+        this.paramProxy = {
+            endpoint: this.endpoint,
+            session: this.session,
+            language: this.language,
+        };
     }
-    if (event.detail['pointExpireString']) {
-      this.pointExpireString = event.detail.xpExpireString;
+    getNextLevelPoints() {
+        var _a, _b;
+        return ((_a = this.playerElevateLevel) === null || _a === void 0 ? void 0 : _a.nextLevel) ? (_b = this.playerElevateLevel) === null || _b === void 0 ? void 0 : _b.nextLevel.entryPoints : -1;
+    }
+    getNextLevelTips() {
+        var _a;
+        //need xx to reach Diamond
+        let nextLevel = (_a = this.playerElevateLevel) === null || _a === void 0 ? void 0 : _a.nextLevel;
+        if (this.playerElevateLevel && nextLevel) {
+            const pointsToReach = (nextLevel.entryPoints - this.playerElevateLevel.loyaltyPoints).toFixed(2);
+            return translateWithParams('tipsForNextLevel', {
+                pointsToReach,
+                levelName: nextLevel.name,
+                lang: this.language
+            });
+        }
+        return '';
     }
-  }
-  onRedeemClick() {
-    window.postMessage({ type: 'BEERedeemClicked' }, window.location.href);
-  }
-  componentWillLoad() {
-    this.paramProxy = {
-      endpoint: this.endpoint,
-      session: this.session,
-      language: this.language,
-    };
-  }
-  getNextLevelTips() {
-    var _a;
-    //need xx to reach Diamond
-    let nextLevel = (_a = this.playerElevateLevel) === null || _a === void 0 ? void 0 : _a.nextLevel;
-    if (this.playerElevateLevel && nextLevel) {
-      const pointsToReach = (nextLevel.entryPoints - this.playerElevateLevel.loyaltyPoints).toFixed(2);
-      return translateWithParams('tipsForNextLevel', {
-        pointsToReach,
-        levelName: nextLevel.name,
-      });
+    render() {
+        const backgroundOuterImagePath = getAssetPath('../static/card-ground.svg');
+        const backgroundInnerImagePath = getAssetPath('../static/card-ground-over.svg');
+        return (h("div", { key: '2b0944f8317a94621e1bc65bbbb3726654b8963b', class: `ElevateCardWrapper ${this.theme}` }, h("div", { key: 'c6d4dbba143435b4485d7fde91ab0a48a2f6688b', class: "LoyaltyCard Outer", style: { 'backgroundImage': `url(${backgroundOuterImagePath}` } }, h("general-styling-wrapper", { key: 'e47a4efe925eb35d4449c6ff33a0afef9d284e55', clientStyling: this.clientStyling, clientStylingUrl: this.clientStylingUrl, targetTranslations: TRANSLATIONS, translationUrl: this.translationUrl }), h("player-elevate-card-data", { key: 'a560991893305894ddd41756cd7b3c32d0ef9e03', params: this.paramProxy }), h("div", { key: 'ceb8b71386f84f54518a3694535aa16c2c3d3951', class: 'OuterCover Inner', style: { 'backgroundImage': `url(${backgroundInnerImagePath}` } }, h("div", { key: '1df9647c3de42e74adee0f8895511442118ae381', class: 'Content Row' }, this.playerElevateLevel && (h(Fragment, { key: '569bcd5fc3c578d2e6cc7442d28444e29688660c' }, h("div", { key: 'aa40032bff99c5462b906e4427232ca2d4019017', class: "PlayerImg" }, h(PlayerAvatar, { key: '7a2d535b0c2029c90b9f1c123f9feebafca6bdde', onlyBadge: true, loyaltyIconUrl: this.playerElevateLevel.presentation.asset })), h("div", { key: '90999da8fc2a3102eac235fcbc8afbec2a2bbdf8', class: `LevelInfo ${this.playerElevateLevel.name}` }, h(PlayerElevateLoyaltyLevel, { key: '67e8bf370b1b77e776fb6d955ae63928fd1338d8', hideInfo: true, level: this.playerElevateLevel.name, expireTime: this.playerElevateLevel.expireTime, dateFormat: this.dateFormat }), h("div", { key: '1e0fefc6a23f4aeeef5e19828399fe1229a3fc81', class: 'PointsRange' }, h(PlayerPoints, { key: 'dd176e624cde3b6f517101d7702a15465305174d', loyaltyPoints: this.playerElevateLevel.loyaltyPoints, language: this.language }), h(PlayerPoints, { key: '6cddb64c92545803d08fbbc513cc951b2691a42e', loyaltyPoints: this.getNextLevelPoints(), language: this.language })), h(PlayerLoyaltyProcess, { key: '08817ca979ea784aeb735579b0d52e5150eb0852' }), h("div", { key: 'be9a1b40a8145d5e6d329d8e9f047296e84dd24b', class: "NextLevelTip" }, this.getNextLevelTips()), this.pointExpireString && (h("div", { key: 'f9cbb7d06e34717cb9f74cb8d2e506e49969e775', class: 'PointsInfo ExpirationPoints' }, this.pointExpireString, " "))))))))));
     }
-    return '';
-  }
-  render() {
-    const backgroundOuterImagePath = getAssetPath('../static/card-ground.svg');
-    const backgroundInnerImagePath = getAssetPath('../static/card-ground-over.svg');
-    return (h("div", { class: `ElevateCardWrapper ${this.theme}` }, h("div", { class: "LoyaltyCard Outer", style: { 'backgroundImage': `url(${backgroundOuterImagePath}` } }, h("general-styling-wrapper", { clientStyling: this.clientStyling, clientStylingUrl: this.clientStylingUrl, targetTranslations: TRANSLATIONS$1, translationUrl: this.translationUrl }), h("player-elevate-card-data", { params: this.paramProxy }), h("div", { class: 'OuterCover Inner', style: { 'backgroundImage': `url(${backgroundInnerImagePath}` } }, h("div", { class: 'Content Row' }, this.playerElevateLevel && (h(Fragment, null, h("div", { class: "PlayerImg" }, h(PlayerAvatar, { onlyBadge: true, loyaltyIconUrl: this.playerElevateLevel.presentation.asset })), h("div", { class: `LevelInfo ${this.playerElevateLevel.name}` }, h("div", { class: 'CardCell ElevateLevel' }, h("span", { class: "LevelName", title: this.playerElevateLevel.name }, this.playerElevateLevel.name)), h(PlayerPoints, { loyaltyPoints: this.playerElevateLevel.loyaltyPoints, language: this.language }), this.pointExpireString && (h("div", { class: 'PointsInfo ExpirationPoints' }, this.pointExpireString, " ")), h(PlayerLoyaltyProcess, null), h("div", { class: "Row NextLevelTip" }, this.getNextLevelTips()), this.playerElevateLevel.expireTime && (h("div", { class: "Row CardCell ExpirationDate Txt" }, translate$1('expireOn', this.language), h("span", { class: "ExpireTime" }, format(new Date(this.playerElevateLevel.expireTime), this.dateFormat || 'yyyy-MM-dd'))))))))))));
-  }
-  static get watchers() { return {
-    "session": ["onSessionOrEndpointChange"],
-    "endpoint": ["onSessionOrEndpointChange"],
-    "language": ["onSessionOrEndpointChange"]
-  }; }
+    static get watchers() { return {
+        "session": ["onSessionOrEndpointChange"],
+        "endpoint": ["onSessionOrEndpointChange"],
+        "language": ["onSessionOrEndpointChange"]
+    }; }
 };
-PlayerElevateLoyaltycard.style = playerElevateLoyaltycardCss;
+PlayerElevateLoyaltycard.style = PlayerElevateLoyaltycardStyle0;
 
-export { GamificationDropdown as gamification_dropdown, GeneralStylingWrapper as general_styling_wrapper, PlayerElevateCardData as player_elevate_card_data, PlayerElevateLoyaltycard as player_elevate_loyaltycard };
+export { GeneralStylingWrapper as general_styling_wrapper, PlayerElevateCardData as player_elevate_card_data, PlayerElevateLoyaltycard as player_elevate_loyaltycard };