@everymatrix/player-elevate-points-history 1.31.2

package/dist/cjs/bonus-pagination-limits_6.cjs.entry.js

@@ -0,0 +1,1115 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-974f5239.js');
+const playerElevateCardItems = require('./player-elevate-card-items-67656c5f.js');
+
+const DEFAULT_LANGUAGE$1 = 'en';
+const SUPPORTED_LANGUAGES$1 = ['pt-br', 'en', 'es-mx', 'hu', 'hr'];
+const TRANSLATIONS$1 = {
+  en: {
+    "pageLimitLabel": 'Show',
+  },
+  hu: {
+    "pageLimitLabel": 'Show',
+  },
+  hr: {
+    "pageLimitLabel": 'Show',
+  },
+  "pt-br": {
+    "pageLimitLabel": 'Show',
+  },
+  "es-mx": {
+    "pageLimitLabel": 'Show',
+  }
+};
+const translate$1 = (key, customLang) => {
+  const lang = customLang;
+  return TRANSLATIONS$1[lang !== undefined && SUPPORTED_LANGUAGES$1.includes(lang) ? lang : DEFAULT_LANGUAGE$1][key];
+};
+
+const bonusPaginationLimitsCss = ":host{display:block}.NoOfItemsToDisplayMessage{display:inline-block;margin:0.1rem;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:var(--emfe-w-color-primary, #191a19);line-height:1.8}.PaginationWrapper{display:flex;flex-direction:row}ul.PaginationArea{margin-block:5px;display:flex;flex-direction:row;padding:0px}ul.PaginationArea li.Item.Active:hover{color:var(--emfe-w-color-primary, #eaefea);background-color:var(--emfe-w-color-secondary, #191a19)}ul.PaginationArea li.Item.Active,ul.PaginationArea li.Item:hover{background-color:var(--emfe-w-color-primary, rgba(169, 171, 169, 0.7));font-weight:bold;border-radius:0.3rem}ul.PaginationArea li.Item{padding-inline-start:0px;list-style:none;padding:5px 6px;margin:2px;cursor:pointer;display:inline-block}";
+
+const BonusPaginationLimits = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.pageLimitChanged = index.createEvent(this, "pageLimitChanged", 7);
+    /**
+     * Language of the widget
+     */
+    this.language = 'en';
+    /**
+     * Translation via url
+     */
+    this.translationUrl = '';
+    /**
+     * Default limit for per page, default: 10
+     */
+    this.limit = 10;
+    this.pageLimits = [10, 25, 50];
+  }
+  onPageLimitClicked(pageLimit) {
+    this.limit = pageLimit;
+    this.pageLimitChanged.emit({ limit: this.limit });
+  }
+  componentWillLoad() {
+    if (!this.pageLimitOptions) {
+      return;
+    }
+    try {
+      this.pageLimits = this.pageLimitOptions.split(',').map((item) => {
+        return parseInt(item);
+      });
+      // if there is an array of custom limits provided (string to array - e.g. [5, 10, 15])
+      // and the value for the custom set limit (e.g. 8) isn't part of the provided array,
+      // then ignore the  set the custom set limit and make the limit equal to the first value of the array
+      // (as part of the example so far, this would be 5)
+      if (!this.pageLimits.includes(this.limit)) {
+        this.limit = this.pageLimits[0];
+      }
+    }
+    catch (e) {
+      console.error('Error when parse PageLimitOptions', e);
+    }
+  }
+  renderStylingWrapper() {
+    return index.h("general-styling-wrapper", { targetTranslations: TRANSLATIONS$1, translationUrl: this.translationUrl });
+  }
+  render() {
+    return index.h("div", { class: 'PaginationWrapper' }, index.h("span", { class: 'NoOfItemsToDisplayMessage' }, translate$1('pageLimitLabel', this.language)), index.h("ul", { class: 'PaginationArea' }, this.pageLimits.map((pageLimit) => {
+      return (index.h("li", { class: `${this.limit == pageLimit ? 'Active' : ''} PageSize Item`, onClick: () => {
+          this.onPageLimitClicked(pageLimit);
+        } }, pageLimit));
+    })), index.h("general-styling-wrapper", { targetTranslations: TRANSLATIONS$1, translationUrl: this.translationUrl }), this.renderStylingWrapper());
+  }
+};
+BonusPaginationLimits.style = bonusPaginationLimitsCss;
+
+const DEFAULT_LANGUAGE = 'en';
+const SUPPORTED_LANGUAGES = ['pt-br', 'en', 'es-mx', 'hu', 'hr'];
+const TRANSLATIONS = {
+  "en": {
+    "firstPage": '|<',
+    "lastPage": '>|',
+    "prePage": '<',
+    "nextPage": '>',
+    "pageOfTotal": '{start}-{end} of {total}',
+  },
+  "hu": {
+    "firstPage": 'First',
+    "lastPage": 'Last',
+    "prePage": '<',
+    "nextPage": '>',
+    "pageOfTotal": '{start}-{end} of {total}',
+  },
+  "hr": {
+    "firstPage": 'First',
+    "lastPage": 'Last',
+    "prePage": '<',
+    "nextPage": '>',
+    "pageOfTotal": '{start}-{end} of {total}',
+  },
+  "pt-br": {
+    "firstPage": 'First',
+    "lastPage": 'Last',
+    "prePage": '<',
+    "nextPage": '>',
+    "pageOfTotal": '{start}-{end} of {total}',
+  },
+  "es-mx": {
+    "firstPage": 'First',
+    "lastPage": 'Last',
+    "prePage": '<',
+    "nextPage": '>',
+    "pageOfTotal": '{start}-{end} of {total}',
+  }
+};
+const translate = (key, customLang, values) => {
+  const lang = customLang;
+  let translation = TRANSLATIONS[lang !== undefined && SUPPORTED_LANGUAGES.includes(lang) ? lang : DEFAULT_LANGUAGE][key];
+  if (values !== undefined) {
+    for (const [key, value] of Object.entries(values.values)) {
+      const regex = new RegExp(`{${key}}`, 'g');
+      translation = translation.replace(regex, value);
+    }
+  }
+  return translation;
+};
+
+const bonusPaginationNavCss = ":host{display:block}.PageNavigationWrapper{display:flex;flex-direction:row}.PageNavigationWrapper .PageOfMessage{margin:5px;padding:5px 6px;margin:2px}.PageNavigation{display:flex;flex-direction:row;align-items:center}.PageNavigation .PageArrow{color:var(--emfe-w-color-primary, #777676);padding:6px 5px;cursor:pointer;font-weight:bold;width:1.2rem;text-align:center}.PageNavigation .PageArrow.Disabled{color:var(--emfe-w-color-gray-100, #e0e0e0)}ul.PaginationArea{list-style:none;padding:0px;margin:0px;display:flex}ul.PaginationArea li.PageItem{cursor:pointer;padding:5px 6px;margin:2px;width:0.9rem;text-align:center}ul.PaginationArea li.PageItem.Active,ul.PaginationArea li.PageItem:hover{font-weight:bold;color:var(--emfe-w-color-primary, #f5f1f1);background-color:var(--emfe-w-color-secondary, #8c8989);border-radius:0.3rem}";
+
+const BonusPaginationNav = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.reloadPageEmitter = index.createEvent(this, "reloadPageByType", 7);
+    /**
+     * The received length of dataset
+     */
+    this.total = 1;
+    /**
+     * The received limit for the number of pages
+     */
+    this.limit = 10;
+    /**
+     * The offset of dataset
+     */
+    this.offset = 0;
+    /**
+     * The table id, use to identify which table listen the page change message
+     * when there is more than 1 table on same page
+     */
+    this.tableId = 'default';
+    /**
+     * Language
+     */
+    this.language = 'en';
+    /**
+     * Translation via url
+     */
+    this.translationUrl = '';
+    /**
+     * Customize pagination: Activate pagination arrows
+     */
+    this.arrowsActive = true;
+    /**
+     * Customize pagination: Activate pagination secondary arrows
+     */
+    this.secondaryArrowsActive = true;
+    /**
+     * Customize pagination: Activate pagination numbered navigation
+     */
+    this.displayPageNumbers = true;
+    this.endPageIndex = 0;
+    this.currentPage = 1;
+  }
+  pageLimitChangedHandler(event) {
+    this.limit = event.detail.limit ? event.detail.limit : this.limit;
+    //reset offset = 0, this.currentPage = 1 when page limit changed
+    this.currentPage = 1;
+    this.offset = 0;
+    this.updatePageStatus();
+    if (event.type == 'pageLimitChanged') {
+      this.reloadPageEmitter.emit({ offset: 0, limit: this.limit, tableId: this.tableId });
+    }
+  }
+  goTo(step) {
+    if (step == '...' || step == 0 || step > this.endPageIndex + 1) {
+      return;
+    }
+    this.currentPage = step;
+    let offset = (this.currentPage - 1) * this.limit;
+    this.reloadPageEmitter.emit({ offset, limit: this.limit, tableId: this.tableId });
+  }
+  renderPageList() {
+    return index.h("ul", { class: 'PaginationArea' }, this.pagesArray.map((page) => {
+      return (index.h("li", { class: `PageItem ${this.currentPage == page ? 'Active' : ''}`, onClick: () => {
+          this.goTo(page);
+        } }, page));
+    }));
+  }
+  renderStylingWrapper() {
+    return index.h("general-styling-wrapper", { targetTranslations: TRANSLATIONS, translationUrl: this.translationUrl });
+  }
+  updatePageStatus() {
+    this.endPageIndex = (Math.ceil(this.total / this.limit) - 1);
+    this.endPageIndex = this.endPageIndex < 0 ? this.endPageIndex = 0 : this.endPageIndex;
+    this.pagesArray = [];
+    if (this.endPageIndex < 5) {
+      this.pagesArray = Array.from({ length: this.endPageIndex + 1 }, (_, i) => i + 1);
+    }
+    else {
+      /**
+       * Construct numbered navigation area based on current page position
+       */
+      if (this.currentPage == 1 || this.currentPage == 2) {
+        this.pagesArray = Array.from({ length: 4 }, (_, i) => i + 1);
+        this.pagesArray.push('...');
+      }
+      else if (this.currentPage >= 3 && ((this.endPageIndex - this.currentPage) >= 2)) {
+        this.pagesArray = Array.from({ length: 3 }, (_, i) => this.currentPage + i - 1);
+        this.pagesArray.push('...');
+        this.pagesArray.unshift('...');
+      }
+      else if ((this.endPageIndex - this.currentPage) < 3) {
+        this.pagesArray = Array.from({ length: 4 }, (_, i) => this.endPageIndex - 2 + i);
+        this.pagesArray.unshift('...');
+      }
+    }
+  }
+  componentWillRender() {
+    this.currentPage = Math.floor(this.offset / this.limit) + 1;
+    this.updatePageStatus();
+  }
+  render() {
+    const startOffset = (this.currentPage - 1) * this.limit + 1;
+    const endOffset = this.currentPage * this.limit > this.total ? this.total : this.currentPage * this.limit;
+    return index.h("div", { class: 'PageNavigationWrapper' }, this.displayRangeOfTotal && this.total > 0 && index.h("span", { class: 'PageOfMessage' }, translate('pageOfTotal', this.language, {
+      values: {
+        start: startOffset,
+        end: endOffset,
+        total: this.total
+      }
+    })), index.h("div", { class: 'PageNavigation' }, this.arrowsActive &&
+      index.h("div", { class: `PageArrow FirstPage ${this.currentPage == 1 ? 'Disabled' : ''}`, onClick: () => {
+          this.goTo(1);
+        } }, translate('firstPage', this.language)), this.secondaryArrowsActive &&
+      index.h("span", { class: `PageArrow PrePage ${this.currentPage == 1 ? 'Disabled' : ''}`, onClick: () => {
+          this.goTo(this.currentPage - 1);
+        } }, translate('prePage', this.language)), this.displayPageNumbers && this.renderPageList(), this.secondaryArrowsActive &&
+      index.h("span", { class: `PageArrow NextPage ${this.currentPage == (this.endPageIndex + 1) ? 'Disabled' : ''}`, onClick: () => {
+          this.goTo(this.currentPage + 1);
+        } }, translate('nextPage', this.language)), this.arrowsActive &&
+      index.h("div", { class: `PageArrow LastPage ${this.currentPage == this.endPageIndex + 1 ? 'Disabled' : ''}`, onClick: () => {
+          this.goTo(this.endPageIndex + 1);
+        } }, " ", translate('lastPage', this.language), " "), this.renderStylingWrapper()));
+  }
+};
+BonusPaginationNav.style = bonusPaginationNavCss;
+
+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;
+
+var WalletType;
+(function (WalletType) {
+  WalletType["spendable"] = "spendable";
+  WalletType["loyalty"] = "loyalty";
+  WalletType["history"] = "history";
+})(WalletType || (WalletType = {}));
+
+const translation = {
+  en: {
+    tabTitle: {
+      [WalletType.spendable]: 'Coins',
+      [WalletType.loyalty]: 'XP',
+      [WalletType.history]: 'Conversion History'
+    },
+    barTitle: {
+      [WalletType.spendable]: 'Coins History',
+      [WalletType.loyalty]: 'Experience Points History',
+      [WalletType.history]: 'Conversion History'
+    },
+    bonus: 'Bonus',
+    redeem: 'Redeem',
+    reload: 'Reload',
+    reloadMsgWhenError: 'Network Problem, please ',
+    pointType: {
+      registration: 'Registration',
+      cancelledRegistration: 'Cancelled Registration',
+      expiredRegistration: 'Expired Registration',
+      manual: 'Manual',
+      cancelledManual: 'Cancelled Manual',
+      expiredManual: 'Expired Manual',
+      wageringByRealMoney: 'Real Money Wager',
+      wageringByBonusMoney: 'Bonus Money Wager',
+      cancelledWageringByRealMoney: 'Cancelled Real Money Wager',
+      cancelledWageringByBonusMoney: 'Cancelled Bonus Money Wager',
+      expiredWageringByRealMoney: 'Expired Real Money Wager',
+      expiredWageringByBonusMoney: 'Expired Bonus Money Wager',
+      levelExpired: 'Level Expiration',
+      bonus: 'Bonus Redeem',
+    }
+  }
+};
+
+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);
+    throw e;
+  }
+  return res;
+};
+
+const getWallets = async (endpoint, language, type, session, pageSetting) => {
+  const params = {
+    type,
+    language,
+    pagination: `offset=${pageSetting.offset},limit=${pageSetting.limit}`
+  };
+  const url = getUrl(endpoint + getUriByWalletType(params.type), params);
+  const res = await fetcher(url, {
+    headers: {
+      'x-SessionId': session
+    }
+  });
+  return res;
+};
+const getUriByWalletType = (type) => `/v1/elevate/${type == WalletType.history ? 'redeemHistory' : 'pointsHistory'}`;
+
+const renderWallets = (locale, wallets, pageSetting) => wallets && (index.h(index.Fragment, null,
+  index.h("div", { class: "Records" }, wallets.map(wallet => (index.h("div", { class: "RecordContainer" },
+    index.h("div", { class: "Row" },
+      index.h("div", { class: "Title" }, locale.pointType[wallet.pointType] || wallet.pointType),
+      index.h("div", { class: `Amount ${getAmountConfig(wallet.points).class}` },
+        getAmountConfig(wallet.points).symbol,
+        wallet.points)),
+    wallet.payload && wallet.payload.displayName &&
+      index.h("div", { class: "Row Desc", innerHTML: wallet.payload.displayName['*'] }),
+    index.h("div", { class: "Row" },
+      index.h("div", { class: "DateTime" }, formatDate(new Date(wallet.modified)))))))),
+  index.h("div", { class: "PaginationContainer" },
+    index.h("bonus-pagination-nav", { offset: pageSetting.offset, limit: pageSetting.limit, displayPageNumbers: pageSetting.displayPageNumbers, tableId: pageSetting.tableId, secondaryArrowsActive: pageSetting.secondaryArrowsActive, total: pageSetting.total }))));
+const getAmountConfig = (amount) => {
+  if (amount > 0) {
+    return {
+      class: 'Positive',
+      symbol: '+'
+    };
+  }
+  else {
+    return {
+      class: 'Negative',
+      symbol: ''
+    };
+  }
+};
+const padTo2Digits = (num) => {
+  return num.toString().padStart(2, '0');
+};
+const formatDate = (date) => {
+  return ([
+    date.getFullYear(),
+    padTo2Digits(date.getMonth() + 1),
+    padTo2Digits(date.getDate()),
+  ].join('-') +
+    ' ' +
+    [
+      padTo2Digits(date.getHours()),
+      padTo2Digits(date.getMinutes()),
+      padTo2Digits(date.getSeconds()),
+    ].join(':'));
+};
+
+const backSvg = `<svg width="9" height="15" viewBox="0 0 9 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.75 1L1.25 7.5L7.75 14" stroke="#242424" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
+`;
+
+const menuSvg = `<svg width="30" height="8" viewBox="0 0 30 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="4" cy="4" r="4" fill="black"/>
+<circle cx="15" cy="4" r="4" fill="black"/>
+<circle cx="26" cy="4" r="4" fill="black"/>
+</svg>
+`;
+
+const renderTopBar = (locale, type, pageSetting) => index.h("div", { class: "TopBarContainer" },
+  index.h("div", { class: "BackImageContainer" },
+    index.h("span", { class: "BackImage", innerHTML: backSvg })),
+  index.h("div", { class: "TitleContainer" },
+    index.h("div", { class: "Title", title: locale.barTitle[type] }, locale.barTitle[type]),
+    index.h("div", { class: 'Limits' },
+      index.h("bonus-pagination-limits", { pageLimitOptions: pageSetting.pageLimitOptions, limit: pageSetting.limit }))),
+  index.h("div", null,
+    index.h("span", { class: "MenuImage", innerHTML: menuSvg })));
+
+const renderTabs = (locale, type, onChangeTab) => index.h("div", { class: "Tabs Row" }, Object.keys(WalletType).map(key => {
+  const isActive = key === type;
+  const cssActive = isActive ? 'active' : '';
+  return (index.h("div", null,
+    index.h("div", { class: `TabText ${cssActive}`, onClick: () => {
+        onChangeTab(key);
+      } }, locale.tabTitle[key]),
+    index.h("div", { class: `TabBorderBottom ${cssActive}` })));
+}));
+
+const playerElevatePointsHistoryCss = ":host{display:block}main{max-width:420px}main player-elevate-pointcard{width:100%;height:220px}.PlayerElevatePointsDetaisContainer{background:#FFFFFF;padding:20px 10px 0;margin-top:-100px;position:relative;min-height:360px}.PlayerElevatePointsDetaisContainer .ReloadMsg{padding:20px}.PlayerElevatePointsDetaisContainer .ReloadMsg a.Reload{cursor:pointer}.TitleContainer{font-size:20px;font-weight:500;line-height:25px;letter-spacing:0em;text-align:left;display:flex;justify-content:space-between}.TopBarContainer{display:flex;align-items:center;justify-content:space-between}.TopBarContainer .TitleContainer{width:100%}.TopBarContainer .Title{background:#303030;padding:5px 16px;color:#FFFFFF;box-shadow:0px 4px 13px 0px #00000040;border-radius:8px;width:fit-content;margin-left:7px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.PaginationContainer{display:flex;justify-content:center}.MonthStat{margin-top:25px;display:none;font-size:16px;font-weight:500;line-height:19px;letter-spacing:0px;text-align:left;color:#242424}.MonthStat .Amount{color:#53B65A}.BackImageContainer{width:35px;height:35px;flex:0 0 35px;border-radius:6px;text-align:center;line-height:35px;box-shadow:0px 4px 40px 0px #8A959E33;display:none}.Records{margin-top:16px}.MenuImage,.BackImage{cursor:pointer;display:none}.Row{display:flex;justify-content:space-between;align-items:center}.Row:nth-child(n+2){margin-top:3px}.Tabs.Row{justify-content:space-around;margin-top:20px}.Tabs.Row .TabText{font-size:16px;margin:10px 15px;color:#9C9C9C;cursor:pointer}.Tabs.Row .TabText.active{color:#242424;font-weight:600}.Tabs.Row .TabBorderBottom{height:5px;border-radius:4px;background:transparent}.Tabs.Row .TabBorderBottom.active{background:#242424}.RecordContainer{margin:5px 0;padding:10px;box-shadow:0px 0px 8px 0px #0000001A;border-radius:5px}.RecordContainer .Title{color:#242424;font-size:16px;font-weight:600;line-height:19px;letter-spacing:0px;text-align:left}.RecordContainer .Amount{font-size:16px;font-weight:600;line-height:19px;letter-spacing:0px;text-align:left}.RecordContainer .Amount.Positive{color:#53B65A}.RecordContainer .Amount.Negative{color:#B41E2D}.RecordContainer .DateTime{color:#9C9C9C;font-size:16px;font-weight:400;line-height:19px;letter-spacing:0px;text-align:left}.RecordContainer .Tag{font-size:12px;font-weight:500;line-height:14px;letter-spacing:0em;text-align:center;color:#767171;padding:8px 30px;border-radius:8px;box-shadow:0px 2px 4px 0px #00000040}";
+
+const PlayerElevatePointsHistory = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.paginationReset = index.createEvent(this, "paginationReset", 7);
+    /**
+     * Customize pagination: Activate pagination secondary arrows
+     */
+    this.secondaryArrowsActive = true;
+    /**
+     * Customize pagination: Activate pagination numbered navigation
+     */
+    this.displayPageNumbers = false;
+    /**
+     * Customize page list options, default: 10,25,50
+     */
+    this.pageLimitOptions = '10,25,50';
+    /**
+     * 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.type = WalletType.spendable;
+    this.pointsWallets = {};
+  }
+  switchTab(type) {
+    var _a, _b;
+    this.type = type;
+    if (this.pointsWallets[type] || !((_a = this.pointsWallets[type]) === null || _a === void 0 ? void 0 : _a.isLoadFailed)) {
+      return;
+    }
+    this.paginationReset.emit({ limit: ((_b = this.pointsWallets[type]) === null || _b === void 0 ? void 0 : _b.pageSetting.limit) || this.limit, tableId: this.type });
+  }
+  getPageSettingByType(type) {
+    return this.pointsWallets[type] ? this.pointsWallets[type].pageSetting : {
+      limit: this.limit, total: 0, offset: 0, tableId: type,
+      secondaryArrowsActive: this.secondaryArrowsActive,
+      displayPageNumbers: this.displayPageNumbers,
+      pageLimitOptions: this.pageLimitOptions || undefined
+    };
+  }
+  render() {
+    var _a, _b;
+    const pageSetting = this.getPageSettingByType(this.type);
+    return (index.h("main", null, index.h("general-styling-wrapper", { clientStyling: this.clientStyling, clientStylingUrl: this.clientStylingUrl,
+      // @ts-ignore
+      targetTranslations: translation, translationUrl: this.translationUrl }), index.h("player-elevate-pointcard", { playerAvatarUrl: this.playerAvatarUrl, endpoint: this.endpoint, session: this.session, language: this.language, clientStylingUrl: this.clientStylingUrl, clientStyling: this.clientStyling, translationUrl: this.translationUrl }), index.h("div", { class: "PlayerElevatePointsDetaisContainer" }, [
+      renderTopBar(this.locale, this.type, pageSetting),
+      renderTabs(this.locale, this.type, (type) => this.switchTab(type)),
+      ((_a = this.pointsWallets[this.type]) === null || _a === void 0 ? void 0 : _a.isLoadFailed)
+        ? index.h("div", { class: 'ReloadMsg' }, this.locale['reloadMsgWhenError'], index.h("a", { class: 'Reload', onClick: () => { this.updateWallets(); } }, this.locale['reload']))
+        : renderWallets(this.locale, ((_b = this.pointsWallets[this.type]) === null || _b === void 0 ? void 0 : _b.wallets) || [], pageSetting)
+    ])));
+  }
+  walletTypeChangedHandler() {
+    //do not reload when loaded tab switched back
+    if (this.pointsWallets[this.type]) {
+      return;
+    }
+    this.updateWallets();
+  }
+  async updateWallets() {
+    let pageSetting = this.pointsWallets[this.type]
+      ? this.pointsWallets[this.type].pageSetting
+      : this.getPageSettingByType(this.type);
+    try {
+      const walletsDetail = await getWallets(this.endpoint, this.language, this.type, this.session, pageSetting);
+      const wallets = walletsDetail.data || [];
+      if (walletsDetail.success) {
+        pageSetting.total = walletsDetail.total;
+        this.pointsWallets[this.type] = { wallets, pageSetting };
+        this.pointsWallets = Object.assign({}, this.pointsWallets);
+      }
+      else {
+        console.error(walletsDetail);
+        this.pointsWallets[this.type].isLoadFailed = true;
+        //pageSetting.total = 0;
+      }
+    }
+    catch (e) {
+      console.error(e);
+      this.pointsWallets[this.type].isLoadFailed = true;
+    }
+  }
+  reloadPageByTypeHandler(event) {
+    if (event.detail.tableId != this.type) {
+      return;
+    }
+    //reset all wallets when limit changed
+    //otherwise fetch new data with new offset when offset changed
+    if (this.limit != event.detail.limit) {
+      this.pointsWallets = {};
+      this.limit = event.detail.limit;
+    }
+    else {
+      let pageSetting = this.pointsWallets[this.type].pageSetting || this.getPageSettingByType(this.type);
+      pageSetting.offset = event.detail.offset;
+      this.pointsWallets[this.type].pageSetting = pageSetting;
+    }
+    this.updateWallets();
+  }
+  setLimit() {
+    try {
+      const pageLimits = this.pageLimitOptions.split(',').map((item) => {
+        return parseInt(item);
+      });
+      if (pageLimits.includes(this.limit)) ;
+      else {
+        this.limit = pageLimits[0];
+      }
+    }
+    catch (e) {
+      console.error('Error when parse PageLimitOptions', e);
+      this.limit = 10;
+    }
+  }
+  async componentWillLoad() {
+    this.setLimit();
+    this.updateWallets();
+  }
+  static get assetsDirs() { return ["static"]; }
+  static get watchers() { return {
+    "type": ["walletTypeChangedHandler"],
+    "endpoint": ["updateWallets"],
+    "language": ["updateWallets"],
+    "session": ["updateWallets"]
+  }; }
+};
+PlayerElevatePointsHistory.style = playerElevatePointsHistoryCss;
+
+exports.bonus_pagination_limits = BonusPaginationLimits;
+exports.bonus_pagination_nav = BonusPaginationNav;
+exports.general_styling_wrapper = GeneralStylingWrapper;
+exports.player_elevate_card_data = PlayerElevateCardData;
+exports.player_elevate_pointcard = PlayerElevatePointcard;
+exports.player_elevate_points_history = PlayerElevatePointsHistory;