@everymatrix/player-elevate-points-history 1.43.4 → 1.45.0

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

@@ -2,351 +2,312 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-974f5239.js');
-const playerElevateCardItems = require('./player-elevate-card-items-574f7423.js');
+const index = require('./index-c769d3e9.js');
+const playerElevateCardItems = require('./player-elevate-card-items-e7f7d092.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',
-  }
+    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 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 BonusPaginationLimitsStyle0 = bonusPaginationLimitsCss;
 
 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;
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.pageLimitChanged = index.createEvent(this, "pageLimitChanged", 7);
+        this.language = 'en';
+        this.translationUrl = '';
+        this.pageLimitOptions = undefined;
+        this.limit = 10;
+        this.pageLimits = [10, 25, 50];
     }
-    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];
-      }
+    onPageLimitClicked(pageLimit) {
+        this.limit = pageLimit;
+        this.pageLimitChanged.emit({ limit: this.limit });
     }
-    catch (e) {
-      console.error('Error when parse PageLimitOptions', e);
+    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", { key: '57f5e61ee287f72d0427a2e4f646e37c6b9358b9', class: 'PaginationWrapper' }, index.h("span", { key: '5f82b19fcf269086659b3faa475d9967b2af57fa', class: 'NoOfItemsToDisplayMessage' }, translate$1('pageLimitLabel', this.language)), index.h("ul", { key: '559c2d5378a352691583567579a8e681d092ddd3', 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", { key: 'a8b9632e7421318e330f33b9c1cc9eb7121e35e9', targetTranslations: TRANSLATIONS$1, translationUrl: this.translationUrl }), this.renderStylingWrapper());
     }
-  }
-  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;
+BonusPaginationLimits.style = BonusPaginationLimitsStyle0;
 
 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}',
-  }
+    "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);
+    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;
+    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 BonusPaginationNavStyle0 = bonusPaginationNavCss;
 
 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 });
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.reloadPageEmitter = index.createEvent(this, "reloadPageByType", 7);
+        this.total = 1;
+        this.limit = 10;
+        this.offset = 0;
+        this.tableId = 'default';
+        this.language = 'en';
+        this.translationUrl = '';
+        this.arrowsActive = true;
+        this.secondaryArrowsActive = true;
+        this.displayPageNumbers = true;
+        this.displayRangeOfTotal = undefined;
+        this.endPageIndex = 0;
+        this.pagesArray = undefined;
+        this.currentPage = 1;
     }
-  }
-  goTo(step) {
-    if (step == '...' || step == 0 || step > this.endPageIndex + 1) {
-      return;
+    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 });
+        }
     }
-    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);
+    goTo(step) {
+        if (step == '...' || step == 0 || parseInt(step.toString(), 10) > (this.endPageIndex + 1)) {
+            return;
+        }
+        this.currentPage = step;
+        let offset = (this.currentPage - 1) * this.limit;
+        this.reloadPageEmitter.emit({ offset, limit: this.limit, tableId: this.tableId });
     }
-    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('...');
-      }
+    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", { key: 'a6817c12f1e1e9960f8e91cfd5c5e2fa1ea72f7f', class: 'PageNavigationWrapper' }, this.displayRangeOfTotal && this.total > 0 && index.h("span", { key: '8f7a16c5835147e2a83808f882a66a2463e3998e', class: 'PageOfMessage' }, translate('pageOfTotal', this.language, {
+            values: {
+                start: startOffset,
+                end: endOffset,
+                total: this.total
+            }
+        })), index.h("div", { key: 'ddc20a86777c2fde667ad8b75ab86f3bc72ccfdb', class: 'PageNavigation' }, this.arrowsActive &&
+            index.h("div", { key: 'ce2a45b8c0d6e32cfa3f1c5cc8b3c9ac58acc409', class: `PageArrow FirstPage ${this.currentPage == 1 ? 'Disabled' : ''}`, onClick: () => {
+                    this.goTo(1);
+                } }, translate('firstPage', this.language)), this.secondaryArrowsActive &&
+            index.h("span", { key: '82dce028e4283dcac511b3b62823e87f2085f4b5', 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", { key: 'a6ed748ce3e2555ac3d9d4bae174ad5bad0fabec', class: `PageArrow NextPage ${this.currentPage == (this.endPageIndex + 1) ? 'Disabled' : ''}`, onClick: () => {
+                    this.goTo(this.currentPage + 1);
+                } }, translate('nextPage', this.language)), this.arrowsActive &&
+            index.h("div", { key: '60a81a86f11e2bb07ee93b61d6f367a11b0e2b6c', class: `PageArrow LastPage ${this.currentPage == this.endPageIndex + 1 ? 'Disabled' : ''}`, onClick: () => {
+                    this.goTo(this.endPageIndex + 1);
+                } }, " ", translate('lastPage', this.language), " "), this.renderStylingWrapper()));
     }
-  }
-  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;
+BonusPaginationNav.style = BonusPaginationNavStyle0;
 
 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) {
-    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;
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        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);
+            });
+        };
+        this.clientStyling = '';
+        this.clientStylingUrl = '';
+        this.translationUrl = '';
+        this.targetTranslations = undefined;
     }
-    // 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
     }
-    return await Promise.all(promises);
-  }
-  render() {
-    return (index.h("div", { class: "StyleShell" }, index.h("slot", { name: "mainContent" })));
-  }
-  get el() { return index.getElement(this); }
+    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", { key: '4d3414408c7662f88331dbe655966237f74d6958', class: "StyleShell" }, index.h("slot", { key: '1d004644d84602c4314bdf5dfc26b55b160f57df', name: "mainContent" })));
+    }
+    get el() { return index.getElement(this); }
 };
-GeneralStylingWrapper.style = generalStylingWrapperCss;
+GeneralStylingWrapper.style = GeneralStylingWrapperStyle0;
 
 /**
  * @name startOfDay
@@ -533,706 +494,583 @@ 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(--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 rgba(0, 0, 0, 0.2509803922);\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 PlayerElevateCardDataStyle0 = playerElevateCardDataCss;
 
 const PlayerElevateCardData = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.playerElevateLeveLoaded = index.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) {
+        index.registerInstance(this, hostRef);
+        this.playerElevateLeveLoaded = index.createEvent(this, "playerElevateLeveLoaded", 7);
+        this.params = undefined;
+        this.playerElevateLevel = undefined;
+        this.pointExpireString = undefined;
     }
-    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 = 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;
+    onParamsChanged() {
+        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, expiredTranslationKey = daysToExpried === 0 ? 'pointsToBeExpiredDay' : 'pointsToBeExpired';
+        if (daysToExpried == 0) {
+            hoursToExpired = differenceInHours(new Date(aboutToExpire.expireTime), new Date());
+            expiredTranslationKey = hoursToExpired > 1 ? 'pointsToBeExpiredHours' : 'pointsToBeExpiredHour';
         }
-        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 = playerElevateCardItems.translateWithParams(expiredTranslationKey, {
+            expirationPoints: aboutToExpire.points,
+            expireDay: daysToExpried,
+        });
+        return pointExpireInfoAsString;
     }
-    const promises = [];
-    promises.push(this.loadPlayerLevelInfo());
-    if (this.params.calculateLevelFlag) {
-      promises.push(this.loadLevels());
+    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);
+    }
+    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 index.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 index.getElement(this); }
+    static get watchers() { return {
+        "params": ["onParamsChanged"]
+    }; }
 };
-PlayerElevateCardData.style = playerElevateCardDataCss;
+PlayerElevateCardData.style = PlayerElevateCardDataStyle0;
 
 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 PlayerElevatePointcardStyle0 = playerElevatePointcardCss;
 
 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';
-  }
-  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) {
+        index.registerInstance(this, hostRef);
+        this.isPointDetailCard = this.buttonType === 'earningRule';
+        this.endpoint = undefined;
+        this.theme = 'Dark';
+        this.session = undefined;
+        this.playerAvatarUrl = undefined;
+        this.language = 'en';
+        this.playerName = undefined;
+        this.cardTitle = undefined;
+        this.buttonType = 'earningRule';
+        this.dateFormat = 'yyyy-MM-dd';
+        this.clientStyling = '';
+        this.clientStylingUrl = '';
+        this.translationUrl = '';
+        this.pointExpireString = undefined;
+        this.playerElevateLevel = undefined;
+        this.elevateWalletTotal = undefined;
+        this.elevateSPTotal = undefined;
+    }
+    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'];
+            this.elevateSPTotal = event.detail['loyaltyWalletTotal'];
+        }
+        if (event.detail['elevateLevel']) {
+            this.playerElevateLevel = event.detail['elevateLevel'];
+        }
+        if (event.detail['pointExpireString']) {
+            this.pointExpireString = event.detail.pointExpireString;
+        }
     }
-    if (event.detail['elevateLevelWalletTotal']) {
-      this.elevateWalletTotal = event.detail['elevateLevelWalletTotal'];
-      this.elevateSPTotal = event.detail['loyaltyWalletTotal'];
+    onDetailsClick() {
+        window.postMessage({ type: this.isPointDetailCard ? 'BEEPointRulesClicked' : 'BEEDetailsClicked',
+            path: this.isPointDetailCard ? 'player-elevate-level' : 'player-elevate-point-details' }, 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.pointExpireString;
+    render() {
+        const backgroundOuterImagePath = index.getAssetPath('../static/card-ground.svg');
+        const backgroundInnerImagePath = index.getAssetPath('../static/card-ground-over.svg');
+        return (index.h("div", { key: '13461fc9cf8b777337a539c15da4bb2781f5a837', class: `ElevateCardWrapper ${this.theme}` }, index.h("div", { key: '526e72c0ada871f74ba4a07f0a125bc25840c09c', class: "PointsCard Outer ", style: { 'backgroundImage': `url(${backgroundOuterImagePath}` } }, index.h("general-styling-wrapper", { key: '95e358ceb8fa3c247660f7ca15a4684b132874be', clientStyling: this.clientStyling, clientStylingUrl: this.clientStylingUrl, targetTranslations: playerElevateCardItems.TRANSLATIONS, translationUrl: this.translationUrl }), index.h("player-elevate-card-data", { key: '24c765d743446ac597a9dcc9cd22515e7e39e6db', params: this.paramProxy }), index.h("div", { key: '309db4bbfc244a7fb97827774d9d4383109ca0d7', class: 'OuterCover Inner', style: { 'backgroundImage': `url(${backgroundInnerImagePath}` } }, index.h("div", { key: '9d5614ded2f73b505e60900675a7d95b3cfbcbc6', class: 'Content Row' }, this.playerElevateLevel && (index.h(index.Fragment, { key: '9a17e809083e61aad19f7ffef5d5ee5885ae8b4d' }, index.h("div", { key: '47068df3c0070ee2785b0d0201b08766fe0d71e8', class: "PlayerImg" }, index.h(playerElevateCardItems.PlayerAvatar, { key: '40115f8b190d871c85f9531fbf0bafb8fbd739e2', onlyBadge: true, loyaltyIconUrl: this.playerElevateLevel.presentation.asset })), index.h("div", { key: '278cd70c23ecb48655e90810af570ce5366d13d5', class: `LevelInfo ${this.playerElevateLevel.name}` }, index.h("div", { key: 'ce682ff881c5b12ed0b736ffcc67ad07b3713999', class: "PointsTxt Label" }, this.cardTitle ? this.cardTitle : playerElevateCardItems.translate('spendablePoints')), index.h("div", { key: 'eeebc5c468cf6e3d566f708fd47a19956ad9defe', class: 'PointsTxt SPPoints' }, index.h(playerElevateCardItems.PlayerPoints, { key: 'ad58990b7fa789cf2d5c524191447196e97c8a16', spendablePoints: this.playerElevateLevel.spendablePoints, language: this.language }), index.h("a", { key: '0dbdd6cd84e1cb43dac4485f4e3eec3130d6c65c', class: "TC", onClick: () => {
+                this.onDetailsClick();
+            } }, playerElevateCardItems.translate('termAndConditions', this.language))), this.pointExpireString && (index.h("div", { key: '45c3267d390995fabe34974913adf97b112cf8c2', class: 'ExpirationPoints' }, this.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, " "))))))))));
-  }
-  static get watchers() { return {
-    "session": ["onSessionOrEndpointChange"],
-    "endpoint": ["onSessionOrEndpointChange"],
-    "language": ["onSessionOrEndpointChange"]
-  }; }
+    static get watchers() { return {
+        "session": ["onSessionOrEndpointChange"],
+        "endpoint": ["onSessionOrEndpointChange"],
+        "language": ["onSessionOrEndpointChange"]
+    }; }
 };
-PlayerElevatePointcard.style = playerElevatePointcardCss;
+PlayerElevatePointcard.style = PlayerElevatePointcardStyle0;
 
 var WalletType;
 (function (WalletType) {
-  WalletType["spendable"] = "spendable";
-  WalletType["loyalty"] = "loyalty";
-  WalletType["history"] = "history";
+    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',
-    noContent: 'No Content',
-    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',
+    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',
+        noContent: 'No Content',
+        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('&');
+    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;
+    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 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 }))));
+    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: ''
-    };
-  }
+    if (amount > 0) {
+        return {
+            class: 'Positive',
+            symbol: '+'
+        };
+    }
+    else {
+        return {
+            class: 'Negative',
+            symbol: ''
+        };
+    }
 };
 const padTo2Digits = (num) => {
-  return num.toString().padStart(2, '0');
+    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(':'));
+    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 backSvg = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOSIgaGVpZ2h0PSIxNSIgdmlld0JveD0iMCAwIDkgMTUiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik03Ljc1IDFMMS4yNSA3LjVMNy43NSAxNCIgc3Ryb2tlPSIjMjQyNDI0IiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+Cjwvc3ZnPgo=';
 
-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 menuSvg = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzAiIGhlaWdodD0iOCIgdmlld0JveD0iMCAwIDMwIDgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxjaXJjbGUgY3g9IjQiIGN5PSI0IiByPSI0IiBmaWxsPSJibGFjayIvPgo8Y2lyY2xlIGN4PSIxNSIgY3k9IjQiIHI9IjQiIGZpbGw9ImJsYWNrIi8+CjxjaXJjbGUgY3g9IjI2IiBjeT0iNCIgcj0iNCIgZmlsbD0iYmxhY2siLz4KPC9zdmc+Cg==';
 
 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 })));
+    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 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}` })));
 }));
 
-var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
+var GeneralAnimationLoadingVIKkNY2X = {};
 
-function createCommonjsModule(fn, basedir, module) {
-	return module = {
-		path: basedir,
-		exports: {},
-		require: function (path, base) {
-			return commonjsRequire();
-		}
-	}, fn(module, module.exports), module.exports;
-}
+(function (exports) {
+var V=Object.defineProperty,z=Object.defineProperties;var F=Object.getOwnPropertyDescriptors;var N=Object.getOwnPropertySymbols;var G=Object.prototype.hasOwnProperty,q=Object.prototype.propertyIsEnumerable;var v=(e,t,n)=>t in e?V(e,t,{enumerable:!0,configurable:!0,writable:!0,value:n}):e[t]=n,P=(e,t)=>{for(var n in t||(t={}))G.call(t,n)&&v(e,n,t[n]);if(N)for(var n of N(t))q.call(t,n)&&v(e,n,t[n]);return e},M=(e,t)=>z(e,F(t));var $=(e,t,n)=>v(e,typeof t!="symbol"?t+"":t,n);var T=(e,t,n)=>new Promise((i,l)=>{var s=o=>{try{u(n.next(o));}catch(r){l(r);}},c=o=>{try{u(n.throw(o));}catch(r){l(r);}},u=o=>o.done?i(o.value):Promise.resolve(o.value).then(s,c);u((n=n.apply(e,t)).next());});Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});function g(){}function H(e){return e()}function B(){return Object.create(null)}function b(e){e.forEach(H);}function I(e){return typeof e=="function"}function K(e,t){return e!=e?t==t:e!==t||e&&typeof e=="object"||typeof e=="function"}function Q(e){return Object.keys(e).length===0}function W(e,t){e.appendChild(t);}function X(e,t,n){const i=Y(e);if(!i.getElementById(t)){const l=L("style");l.id=t,l.textContent=n,Z(i,l);}}function Y(e){if(!e)return document;const t=e.getRootNode?e.getRootNode():e.ownerDocument;return t&&t.host?t:e.ownerDocument}function Z(e,t){return W(e.head||e,t),t.sheet}function U(e,t,n){e.insertBefore(t,n||null);}function C(e){e.parentNode&&e.parentNode.removeChild(e);}function L(e){return document.createElement(e)}function tt(e,t,n){n==null?e.removeAttribute(t):e.getAttribute(t)!==n&&e.setAttribute(t,n);}function et(e){return Array.from(e.childNodes)}function nt(e){const t={};return e.childNodes.forEach(n=>{t[n.slot||"default"]=!0;}),t}let j;function _(e){j=e;}const h=[],w=[];let m=[];const R=[],st=Promise.resolve();let k=!1;function it(){k||(k=!0,st.then(y));}function E(e){m.push(e);}const x=new Set;let a=0;function y(){if(a!==0)return;const e=j;do{try{for(;a<h.length;){const t=h[a];a++,_(t),rt(t.$$);}}catch(t){throw h.length=0,a=0,t}for(_(null),h.length=0,a=0;w.length;)w.pop()();for(let t=0;t<m.length;t+=1){const n=m[t];x.has(n)||(x.add(n),n());}m.length=0;}while(h.length);for(;R.length;)R.pop()();k=!1,x.clear(),_(e);}function rt(e){if(e.fragment!==null){e.update(),b(e.before_update);const t=e.dirty;e.dirty=[-1],e.fragment&&e.fragment.p(e.ctx,t),e.after_update.forEach(E);}}function lt(e){const t=[],n=[];m.forEach(i=>e.indexOf(i)===-1?t.push(i):n.push(i)),n.forEach(i=>i()),m=t;}const ct=new Set;function ot(e,t){e&&e.i&&(ct.delete(e),e.i(t));}function ut(e,t,n){const{fragment:i,after_update:l}=e.$$;i&&i.m(t,n),E(()=>{const s=e.$$.on_mount.map(H).filter(I);e.$$.on_destroy?e.$$.on_destroy.push(...s):b(s),e.$$.on_mount=[];}),l.forEach(E);}function dt(e,t){const n=e.$$;n.fragment!==null&&(lt(n.after_update),b(n.on_destroy),n.fragment&&n.fragment.d(t),n.on_destroy=n.fragment=null,n.ctx=[]);}function $t(e,t){e.$$.dirty[0]===-1&&(h.push(e),it(),e.$$.dirty.fill(0)),e.$$.dirty[t/31|0]|=1<<t%31;}function ft(e,t,n,i,l,s,c=null,u=[-1]){const o=j;_(e);const r=e.$$={fragment:null,ctx:[],props:s,update:g,not_equal:l,bound:B(),on_mount:[],on_destroy:[],on_disconnect:[],before_update:[],after_update:[],context:new Map(t.context||(o?o.$$.context:[])),callbacks:B(),dirty:u,skip_bound:!1,root:t.target||o.$$.root};c&&c(r.root);let f=!1;if(r.ctx=n?n(e,t.props||{},(d,O,...S)=>{const A=S.length?S[0]:O;return r.ctx&&l(r.ctx[d],r.ctx[d]=A)&&(!r.skip_bound&&r.bound[d]&&r.bound[d](A),f&&$t(e,d)),O}):[],r.update(),f=!0,b(r.before_update),r.fragment=i?i(r.ctx):!1,t.target){if(t.hydrate){const d=et(t.target);r.fragment&&r.fragment.l(d),d.forEach(C);}else r.fragment&&r.fragment.c();t.intro&&ot(e.$$.fragment),ut(e,t.target,t.anchor),y();}_(o);}let D;typeof HTMLElement=="function"&&(D=class extends HTMLElement{constructor(t,n,i){super();$(this,"$$ctor");$(this,"$$s");$(this,"$$c");$(this,"$$cn",!1);$(this,"$$d",{});$(this,"$$r",!1);$(this,"$$p_d",{});$(this,"$$l",{});$(this,"$$l_u",new Map);this.$$ctor=t,this.$$s=n,i&&this.attachShadow({mode:"open"});}addEventListener(t,n,i){if(this.$$l[t]=this.$$l[t]||[],this.$$l[t].push(n),this.$$c){const l=this.$$c.$on(t,n);this.$$l_u.set(n,l);}super.addEventListener(t,n,i);}removeEventListener(t,n,i){if(super.removeEventListener(t,n,i),this.$$c){const l=this.$$l_u.get(n);l&&(l(),this.$$l_u.delete(n));}}connectedCallback(){return T(this,null,function*(){if(this.$$cn=!0,!this.$$c){let t=function(s){return ()=>{let c;return {c:function(){c=L("slot"),s!=="default"&&tt(c,"name",s);},m:function(r,f){U(r,c,f);},d:function(r){r&&C(c);}}}};if(yield Promise.resolve(),!this.$$cn||this.$$c)return;const n={},i=nt(this);for(const s of this.$$s)s in i&&(n[s]=[t(s)]);for(const s of this.attributes){const c=this.$$g_p(s.name);c in this.$$d||(this.$$d[c]=p(c,s.value,this.$$p_d,"toProp"));}for(const s in this.$$p_d)!(s in this.$$d)&&this[s]!==void 0&&(this.$$d[s]=this[s],delete this[s]);this.$$c=new this.$$ctor({target:this.shadowRoot||this,props:M(P({},this.$$d),{$$slots:n,$$scope:{ctx:[]}})});const l=()=>{this.$$r=!0;for(const s in this.$$p_d)if(this.$$d[s]=this.$$c.$$.ctx[this.$$c.$$.props[s]],this.$$p_d[s].reflect){const c=p(s,this.$$d[s],this.$$p_d,"toAttribute");c==null?this.removeAttribute(this.$$p_d[s].attribute||s):this.setAttribute(this.$$p_d[s].attribute||s,c);}this.$$r=!1;};this.$$c.$$.after_update.push(l),l();for(const s in this.$$l)for(const c of this.$$l[s]){const u=this.$$c.$on(s,c);this.$$l_u.set(c,u);}this.$$l={};}})}attributeChangedCallback(t,n,i){var l;this.$$r||(t=this.$$g_p(t),this.$$d[t]=p(t,i,this.$$p_d,"toProp"),(l=this.$$c)==null||l.$set({[t]:this.$$d[t]}));}disconnectedCallback(){this.$$cn=!1,Promise.resolve().then(()=>{!this.$$cn&&this.$$c&&(this.$$c.$destroy(),this.$$c=void 0);});}$$g_p(t){return Object.keys(this.$$p_d).find(n=>this.$$p_d[n].attribute===t||!this.$$p_d[n].attribute&&n.toLowerCase()===t)||t}});function p(e,t,n,i){var s;const l=(s=n[e])==null?void 0:s.type;if(t=l==="Boolean"&&typeof t!="boolean"?t!=null:t,!i||!n[e])return t;if(i==="toAttribute")switch(l){case"Object":case"Array":return t==null?null:JSON.stringify(t);case"Boolean":return t?"":null;case"Number":return t==null?null:t;default:return t}else switch(l){case"Object":case"Array":return t&&JSON.parse(t);case"Boolean":return t;case"Number":return t!=null?+t:t;default:return t}}function at(e,t,n,i,l,s){let c=class extends D{constructor(){super(e,n,l),this.$$p_d=t;}static get observedAttributes(){return Object.keys(t).map(u=>(t[u].attribute||u).toLowerCase())}};return Object.keys(t).forEach(u=>{Object.defineProperty(c.prototype,u,{get(){return this.$$c&&u in this.$$c?this.$$c[u]:this.$$d[u]},set(o){var r;o=p(u,o,t),this.$$d[u]=o,(r=this.$$c)==null||r.$set({[u]:o});}});}),i.forEach(u=>{Object.defineProperty(c.prototype,u,{get(){var o;return (o=this.$$c)==null?void 0:o[u]}});}),e.element=c,c}class ht{constructor(){$(this,"$$");$(this,"$$set");}$destroy(){dt(this,1),this.$destroy=g;}$on(t,n){if(!I(n))return g;const i=this.$$.callbacks[t]||(this.$$.callbacks[t]=[]);return i.push(n),()=>{const l=i.indexOf(n);l!==-1&&i.splice(l,1);}}$set(t){this.$$set&&!Q(t)&&(this.$$.skip_bound=!0,this.$$set(t),this.$$.skip_bound=!1);}}const gt="4";typeof window!="undefined"&&(window.__svelte||(window.__svelte={v:new Set})).v.add(gt);function mt(e){X(e,"svelte-g6m3er",".LoaderContainer.svelte-g6m3er.svelte-g6m3er{display:flex;justify-content:center}.lds-ellipsis.svelte-g6m3er.svelte-g6m3er{display:inline-block;position:relative;width:80px;height:80px}.lds-ellipsis.svelte-g6m3er div.svelte-g6m3er{position:absolute;top:33px;width:13px;height:13px;border-radius:50%;background:#d1d1d1;animation-timing-function:cubic-bezier(0, 1, 1, 0)}.lds-ellipsis.svelte-g6m3er div.svelte-g6m3er:nth-child(1){left:8px;animation:svelte-g6m3er-lds-ellipsis1 0.6s infinite}.lds-ellipsis.svelte-g6m3er div.svelte-g6m3er:nth-child(2){left:8px;animation:svelte-g6m3er-lds-ellipsis2 0.6s infinite}.lds-ellipsis.svelte-g6m3er div.svelte-g6m3er:nth-child(3){left:32px;animation:svelte-g6m3er-lds-ellipsis2 0.6s infinite}.lds-ellipsis.svelte-g6m3er div.svelte-g6m3er:nth-child(4){left:56px;animation:svelte-g6m3er-lds-ellipsis3 0.6s infinite}@keyframes svelte-g6m3er-lds-ellipsis1{0%{transform:scale(0)}100%{transform:scale(1)}}@keyframes svelte-g6m3er-lds-ellipsis3{0%{transform:scale(1)}100%{transform:scale(0)}}@keyframes svelte-g6m3er-lds-ellipsis2{0%{transform:translate(0, 0)}100%{transform:translate(24px, 0)}}");}function _t(e){let t;return {c(){t=L("div"),t.innerHTML='<section class="LoaderContainer svelte-g6m3er" part="LoaderContainer"><div class="lds-ellipsis svelte-g6m3er"><div class="svelte-g6m3er"></div><div class="svelte-g6m3er"></div><div class="svelte-g6m3er"></div><div class="svelte-g6m3er"></div></div></section>';},m(n,i){U(n,t,i),e[3](t);},p:g,i:g,o:g,d(n){n&&C(t),e[3](null);}}}function pt(e,t,n){let{clientstyling:i=""}=t,{clientstylingurl:l=""}=t,s;const c=()=>{let r=document.createElement("style");r.innerHTML=i,s.appendChild(r);},u=()=>{let r=new URL(l),f=document.createElement("style");fetch(r.href).then(d=>d.text()).then(d=>{f.innerHTML=d,setTimeout(()=>{s.appendChild(f);},1),setTimeout(()=>{},500);});};function o(r){w[r?"unshift":"push"](()=>{s=r,n(0,s);});}return e.$$set=r=>{"clientstyling"in r&&n(1,i=r.clientstyling),"clientstylingurl"in r&&n(2,l=r.clientstylingurl);},e.$$.update=()=>{e.$$.dirty&3&&i&&s&&c(),e.$$.dirty&5&&l&&s&&u();},[s,i,l,o]}class J extends ht{constructor(t){super(),ft(this,t,pt,_t,K,{clientstyling:1,clientstylingurl:2},mt);}get clientstyling(){return this.$$.ctx[1]}set clientstyling(t){this.$$set({clientstyling:t}),y();}get clientstylingurl(){return this.$$.ctx[2]}set clientstylingurl(t){this.$$set({clientstylingurl:t}),y();}}at(J,{clientstyling:{},clientstylingurl:{}},[],[],!0);exports.default=J;
+}(GeneralAnimationLoadingVIKkNY2X));
 
-function commonjsRequire () {
-	throw new Error('Dynamic requires are not currently supported by @rollup/plugin-commonjs');
-}
-
-createCommonjsModule(function (module, exports) {
-!function(t,e){module.exports=e();}(commonjsGlobal,(function(){function t(){}function e(t){return t()}function n(){return Object.create(null)}function i(t){t.forEach(e);}function s(t){return "function"==typeof t}function o(t,e){return t!=t?e==e:t!==e||t&&"object"==typeof t||"function"==typeof t}function l(t,e,n){t.insertBefore(e,n||null);}function r(t){t.parentNode&&t.parentNode.removeChild(t);}function c(t){const e={};for(const n of t)e[n.name]=n.value;return e}let a;function d(t){a=t;}const u=[],f=[];let p=[];const h=[],$=Promise.resolve();let m=!1;function g(t){p.push(t);}
-// flush() calls callbacks in this order:
-// 1. All beforeUpdate callbacks, in order: parents before children
-// 2. All bind:this callbacks, in reverse order: children before parents.
-// 3. All afterUpdate callbacks, in order: parents before children. EXCEPT
-//    for afterUpdates called during the initial onMount, which are called in
-//    reverse order: children before parents.
-// Since callbacks might update component values, which could trigger another
-// call to flush(), the following steps guard against this:
-// 1. During beforeUpdate, any updated components will be added to the
-//    dirty_components array and will cause a reentrant call to flush(). Because
-//    the flush index is kept outside the function, the reentrant call will pick
-//    up where the earlier call left off and go through all dirty components. The
-//    current_component value is saved and restored so that the reentrant call will
-//    not interfere with the "parent" flush() call.
-// 2. bind:this callbacks cannot trigger new flush() calls.
-// 3. During afterUpdate, any updated components will NOT have their afterUpdate
-//    callback called a second time; the seen_callbacks set, outside the flush()
-//    function, guarantees this behavior.
-const y=new Set;let b=0;// Do *not* move this inside the flush() function
-function x(){
-// Do not reenter flush while dirty components are updated, as this can
-// result in an infinite loop. Instead, let the inner flush handle it.
-// Reentrancy is ok afterwards for bindings etc.
-if(0!==b)return;const t=a;do{
-// first, call beforeUpdate functions
-// and update components
-try{for(;b<u.length;){const t=u[b];b++,d(t),v(t.$$);}}catch(t){
-// reset dirty state to not end up in a deadlocked state and then rethrow
-throw u.length=0,b=0,t}for(d(null),u.length=0,b=0;f.length;)f.pop()();
-// then, once components are updated, call
-// afterUpdate functions. This may cause
-// subsequent updates...
-for(let t=0;t<p.length;t+=1){const e=p[t];y.has(e)||(
-// ...so guard against infinite loops
-y.add(e),e());}p.length=0;}while(u.length);for(;h.length;)h.pop()();m=!1,y.clear(),d(t);}function v(t){if(null!==t.fragment){t.update(),i(t.before_update);const e=t.dirty;t.dirty=[-1],t.fragment&&t.fragment.p(t.ctx,e),t.after_update.forEach(g);}}
-/**
-     * Useful for example to execute remaining `afterUpdate` callbacks before executing `destroy`.
-     */const _=new Set;function k(t,e){const n=t.$$;null!==n.fragment&&(!function(t){const e=[],n=[];p.forEach((i=>-1===t.indexOf(i)?e.push(i):n.push(i))),n.forEach((t=>t())),p=e;}(n.after_update),i(n.on_destroy),n.fragment&&n.fragment.d(e),
-// TODO null out other refs, including component.$$ (but need to
-// preserve final state?)
-n.on_destroy=n.fragment=null,n.ctx=[]);}function E(t,e){-1===t.$$.dirty[0]&&(u.push(t),m||(m=!0,$.then(x)),t.$$.dirty.fill(0)),t.$$.dirty[e/31|0]|=1<<e%31;}function C(o,l,c,u,f,p,h,$=[-1]){const m=a;d(o);const y=o.$$={fragment:null,ctx:[],
-// state
-props:p,update:t,not_equal:f,bound:n(),
-// lifecycle
-on_mount:[],on_destroy:[],on_disconnect:[],before_update:[],after_update:[],context:new Map(l.context||(m?m.$$.context:[])),
-// everything else
-callbacks:n(),dirty:$,skip_bound:!1,root:l.target||m.$$.root};h&&h(y.root);let b=!1;if(y.ctx=c?c(o,l.props||{},((t,e,...n)=>{const i=n.length?n[0]:e;return y.ctx&&f(y.ctx[t],y.ctx[t]=i)&&(!y.skip_bound&&y.bound[t]&&y.bound[t](i),b&&E(o,t)),e})):[],y.update(),b=!0,i(y.before_update),
-// `false` as a special case of no DOM component
-y.fragment=!!u&&u(y.ctx),l.target){if(l.hydrate){const t=function(t){return Array.from(t.childNodes)}(l.target);
-// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-y.fragment&&y.fragment.l(t),t.forEach(r);}else
-// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-y.fragment&&y.fragment.c();l.intro&&((v=o.$$.fragment)&&v.i&&(_.delete(v),v.i(k))),function(t,n,o,l){const{fragment:r,after_update:c}=t.$$;r&&r.m(n,o),l||
-// onMount happens before the initial afterUpdate
-g((()=>{const n=t.$$.on_mount.map(e).filter(s);
-// if the component was destroyed immediately
-// it will update the `$$.on_destroy` reference to `null`.
-// the destructured on_destroy may still reference to the old array
-t.$$.on_destroy?t.$$.on_destroy.push(...n):
-// Edge case - component was destroyed immediately,
-// most likely as a result of a binding initialising
-i(n),t.$$.on_mount=[];})),c.forEach(g);}(o,l.target,l.anchor,l.customElement),x();}var v,k;d(m);}let w;
-/* src/GeneralAnimationLoading.svelte generated by Svelte v3.59.2 */
-function L(e){let n;return {c(){var e;e="div",n=document.createElement(e),n.innerHTML='<section class="LoaderContainer" part="LoaderContainer"><div class="lds-ellipsis"><div></div><div></div><div></div><div></div></div></section>',this.c=t;},m(t,i){l(t,n,i),
-/*div5_binding*/e[3](n);},p:t,i:t,o:t,d(t){t&&r(n)
-/*div5_binding*/,e[3](null);}}}function T(t,e,n){let i,{clientstyling:s=""}=e,{clientstylingurl:o=""}=e;return t.$$set=t=>{"clientstyling"in t&&n(1,s=t.clientstyling),"clientstylingurl"in t&&n(2,o=t.clientstylingurl);},t.$$.update=()=>{/*clientstyling, customStylingContainer*/3&t.$$.dirty&&s&&i&&(()=>{let t=document.createElement("style");t.innerHTML=s,i.appendChild(t);})(),/*clientstylingurl, customStylingContainer*/5&t.$$.dirty&&o&&i&&(()=>{let t=new URL(o),e=document.createElement("style");fetch(t.href).then((t=>t.text())).then((t=>{e.innerHTML=t,setTimeout((()=>{i.appendChild(e);}),1),setTimeout((()=>{}),500);}));})();},[i,s,o,function(t){f[t?"unshift":"push"]((()=>{i=t,n(0,i);}));}]}"function"==typeof HTMLElement&&(w=class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"});}connectedCallback(){const{on_mount:t}=this.$$;this.$$.on_disconnect=t.map(e).filter(s);
-// @ts-ignore todo: improve typings
-for(const t in this.$$.slotted)
-// @ts-ignore todo: improve typings
-this.appendChild(this.$$.slotted[t]);}attributeChangedCallback(t,e,n){this[t]=n;}disconnectedCallback(){i(this.$$.on_disconnect);}$destroy(){k(this,1),this.$destroy=t;}$on(e,n){
-// TODO should this delegate to addEventListener?
-if(!s(n))return t;const i=this.$$.callbacks[e]||(this.$$.callbacks[e]=[]);return i.push(n),()=>{const t=i.indexOf(n);-1!==t&&i.splice(t,1);}}$set(t){var e;this.$$set&&(e=t,0!==Object.keys(e).length)&&(this.$$.skip_bound=!0,this.$$set(t),this.$$.skip_bound=!1);}});class M extends w{constructor(t){super();const e=document.createElement("style");e.textContent=".LoaderContainer{display:flex;justify-content:center}.lds-ellipsis{display:inline-block;position:relative;width:80px;height:80px}.lds-ellipsis div{position:absolute;top:33px;width:13px;height:13px;border-radius:50%;background:#d1d1d1;animation-timing-function:cubic-bezier(0, 1, 1, 0)}.lds-ellipsis div:nth-child(1){left:8px;animation:lds-ellipsis1 0.6s infinite}.lds-ellipsis div:nth-child(2){left:8px;animation:lds-ellipsis2 0.6s infinite}.lds-ellipsis div:nth-child(3){left:32px;animation:lds-ellipsis2 0.6s infinite}.lds-ellipsis div:nth-child(4){left:56px;animation:lds-ellipsis3 0.6s infinite}@keyframes lds-ellipsis1{0%{transform:scale(0)}100%{transform:scale(1)}}@keyframes lds-ellipsis3{0%{transform:scale(1)}100%{transform:scale(0)}}@keyframes lds-ellipsis2{0%{transform:translate(0, 0)}100%{transform:translate(24px, 0)}}",this.shadowRoot.appendChild(e),C(this,{target:this.shadowRoot,props:c(this.attributes),customElement:!0},T,L,o,{clientstyling:1,clientstylingurl:2},null),t&&(t.target&&l(t.target,this,t.anchor),t.props&&(this.$set(t.props),x()));}static get observedAttributes(){return ["clientstyling","clientstylingurl"]}get clientstyling(){return this.$$.ctx[1]}set clientstyling(t){this.$$set({clientstyling:t}),x();}get clientstylingurl(){return this.$$.ctx[2]}set clientstylingurl(t){this.$$set({clientstylingurl:t}),x();}}return !customElements.get("general-animation-loading")&&customElements.define("general-animation-loading",M),M}));
-//# sourceMappingURL=general-animation-loading.js.map
-});
+if(typeof window!="undefined"){let n=function(t){return function(...i){try{return t.apply(this,i)}catch(e){if(e instanceof DOMException&&e.message.includes("has already been used with this registry")||e.message.includes("Cannot define multiple custom elements with the same tag name"))return !1;throw e}}};customElements.define=n(customElements.define),Promise.resolve().then(()=>GeneralAnimationLoadingVIKkNY2X).then(({default:t})=>{!customElements.get("general-animation-loading")&&customElements.define("general-animation-loading",t.element);});}
 
-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}.NoContent{font-size:16px;color:var(--emfe-w-color-black-100, #afafaf);text-align:center;height:120px;line-height:120px}";
+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 rgba(0, 0, 0, 0.2509803922);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 rgba(138, 149, 158, 0.2);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 rgba(0, 0, 0, 0.1019607843);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 rgba(0, 0, 0, 0.2509803922)}.NoContent{font-size:16px;color:var(--emfe-w-color-black-100, #afafaf);text-align:center;height:120px;line-height:120px}";
+const PlayerElevatePointsHistoryStyle0 = playerElevatePointsHistoryCss;
 
 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;
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.paginationReset = index.createEvent(this, "paginationReset", 7);
+        this.playerAvatarUrl = undefined;
+        this.session = undefined;
+        this.endpoint = undefined;
+        this.limit = undefined;
+        this.secondaryArrowsActive = true;
+        this.displayPageNumbers = false;
+        this.pageLimitOptions = '10,25,50';
+        this.language = 'en';
+        this.clientStyling = '';
+        this.clientStylingUrl = '';
+        this.translationUrl = '';
+        this.locale = translation['en'];
+        this.type = WalletType.spendable;
+        this.pageSetting = undefined;
+        this.pointsWallets = {};
     }
-    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
-    };
-  }
-  loadWallets(renderer) {
-    if (!this.pointsWallets[this.type] || this.pointsWallets[this.type].isLoading) {
-      return index.h("general-animation-loading", null);
-    }
-    else {
-      if (this.pointsWallets[this.type].wallets.length === 0) {
-        return (index.h("div", { class: "NoContent" }, this.locale.noContent));
-      }
-      else {
-        return renderer();
-      }
+    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 });
     }
-  }
-  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']))
-        : this.loadWallets(renderWallets.bind(this, 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;
+    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
+        };
     }
-    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] = Object.assign(Object.assign({}, 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;
-      }
+    loadWallets(renderer) {
+        if (!this.pointsWallets[this.type] || this.pointsWallets[this.type].isLoading) {
+            return index.h("general-animation-loading", null);
+        }
+        else {
+            if (this.pointsWallets[this.type].wallets.length === 0) {
+                return (index.h("div", { class: "NoContent" }, this.locale.noContent));
+            }
+            else {
+                return renderer();
+            }
+        }
     }
-    catch (e) {
-      console.error(e);
-      this.pointsWallets[this.type].isLoadFailed = true;
+    render() {
+        var _a, _b;
+        const pageSetting = this.getPageSettingByType(this.type);
+        return (index.h("main", { key: 'a92c0b154fec4d3ce8b8e919b9af5ebd80f1d125' }, index.h("general-styling-wrapper", { key: '5095ab265d71f9e74f6f049b7b0b212ae11bc4da', clientStyling: this.clientStyling, clientStylingUrl: this.clientStylingUrl,
+            // @ts-ignore
+            targetTranslations: translation, translationUrl: this.translationUrl }), index.h("player-elevate-pointcard", { key: 'c471ddeccbe8e18e15935c9d106bf8c52c80a6fb', playerAvatarUrl: this.playerAvatarUrl, endpoint: this.endpoint, session: this.session, language: this.language, clientStylingUrl: this.clientStylingUrl, clientStyling: this.clientStyling, translationUrl: this.translationUrl }), index.h("div", { key: '5fa700aaa6e0cffe6d3d9dd8366bf9a95bba3a14', 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']))
+                : this.loadWallets(renderWallets.bind(this, this.locale, ((_b = this.pointsWallets[this.type]) === null || _b === void 0 ? void 0 : _b.wallets) || [], pageSetting))
+        ])));
     }
-  }
-  reloadPageByTypeHandler(event) {
-    if (event.detail.tableId != this.type) {
-      return;
+    walletTypeChangedHandler() {
+        //do not reload when loaded tab switched back
+        if (this.pointsWallets[this.type]) {
+            return;
+        }
+        this.updateWallets();
     }
-    //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;
+    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] = Object.assign(Object.assign({}, 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;
+        }
     }
-    else {
-      let pageSetting = this.pointsWallets[this.type].pageSetting || this.getPageSettingByType(this.type);
-      pageSetting.offset = event.detail.offset;
-      this.pointsWallets[this.type].pageSetting = pageSetting;
+    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();
     }
-    this.updateWallets();
-  }
-  setLimit() {
-    try {
-      const pageLimits = this.pageLimitOptions.split(',').map((item) => {
-        return parseInt(item);
-      });
-      if (pageLimits.includes(this.limit)) ;
-      else {
-        this.limit = pageLimits[0];
-      }
+    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;
+        }
     }
-    catch (e) {
-      console.error('Error when parse PageLimitOptions', e);
-      this.limit = 10;
+    async componentWillLoad() {
+        this.setLimit();
+        this.updateWallets();
     }
-  }
-  async componentWillLoad() {
-    this.setLimit();
-    this.updateWallets();
-  }
-  static get assetsDirs() { return ["static"]; }
-  static get watchers() { return {
-    "type": ["walletTypeChangedHandler"],
-    "endpoint": ["updateWallets"],
-    "language": ["updateWallets"],
-    "session": ["updateWallets"]
-  }; }
+    static get assetsDirs() { return ["static"]; }
+    static get watchers() { return {
+        "type": ["walletTypeChangedHandler"],
+        "endpoint": ["updateWallets"],
+        "language": ["updateWallets"],
+        "session": ["updateWallets"]
+    }; }
 };
-PlayerElevatePointsHistory.style = playerElevatePointsHistoryCss;
+PlayerElevatePointsHistory.style = PlayerElevatePointsHistoryStyle0;
 
 exports.bonus_pagination_limits = BonusPaginationLimits;
 exports.bonus_pagination_nav = BonusPaginationNav;