@everymatrix/bonus-elevate-levels 1.0.69

package/dist/collection/components/elevate-levels-data/elevate-levels-data.css

@@ -0,0 +1,3 @@
+:host {
+  display: block;
+}

package/dist/collection/components/elevate-levels-data/elevate-levels-data.js

@@ -0,0 +1,89 @@
+import "../../../../../general-styling-wrapper/dist/types/index";
+import fetch from "node-fetch";
+export class ElevateLevelsData {
+    constructor() {
+        this.scopeParams = undefined;
+    }
+    async componentWillRender() {
+        //load data
+        if (!this.scopeParams.endpoint) {
+            return;
+        }
+        const endpoint = this.scopeParams.endpoint;
+        let url = new URL(`${endpoint}/v1/elevate/levels?language=${this.scopeParams.language}`);
+        await fetch(url.href)
+            .then((res) => res.json())
+            .then((res) => {
+            const elevateLevels = res.data.sort((a, b) => {
+                return a.firstEntryPoints < b.firstEntryPoints ? -1 : 1;
+            });
+            let selectedLevelId = this.scopeParams.selectedLevelId;
+            // if selected level is not set, set first（basic） as default
+            if (!selectedLevelId && this.scopeParams.showDefault && elevateLevels.length > 0) {
+                selectedLevelId = elevateLevels[0].id;
+            }
+            if (selectedLevelId) {
+                // get current level by name
+                const currentLevel = elevateLevels.filter((item) => {
+                    return item.id == selectedLevelId;
+                })[0];
+                this.elevateLevelsDataChange.emit({ currentLevel: currentLevel });
+            }
+            this.elevateLevelsDataChange.emit({ 'clearError': true });
+            this.elevateLevelsDataChange.emit({ 'elevateLevels': elevateLevels });
+        }).catch((err) => {
+            this.elevateLevelsDataChange.emit({ errorMessage: { type: 'errorWhenLoadElevateLevels', err } });
+            console.error(err);
+        });
+    }
+    static get is() { return "elevate-levels-data"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["elevate-levels-data.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["elevate-levels-data.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "scopeParams": {
+                "type": "any",
+                "mutable": true,
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Params from parent"
+                },
+                "attribute": "scope-params",
+                "reflect": true
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "elevateLevelsDataChange",
+                "name": "elevateLevelsDataChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }];
+    }
+}

package/dist/collection/index.js

@@ -0,0 +1 @@
+export * from './components';

package/dist/collection/models/elevate-levels.js

@@ -0,0 +1 @@
+export {};

package/dist/collection/utils/locale.utils.js

@@ -0,0 +1,48 @@
+const DEFAULT_LANGUAGE = 'en';
+const SUPPORTED_LANGUAGES = ['ro', 'en', 'fr', 'hr', 'tr'];
+export const TRANSLATIONS = {
+    en: {
+        level: 'level',
+        seeAll: 'See All',
+        termsAndConditions: 'Terms & Conditions',
+        loadElevateLevelErrorMessage: 'Error when load elevate levels',
+        noLevelsSet: 'There is no level set',
+        points: 'Points',
+    },
+    fr: {
+        level: 'level',
+        seeAll: 'See All',
+        termsAndConditions: 'Terms & Conditions',
+        loadElevateLevelErrorMessage: 'Error when load elevate levels',
+        noLevelsSet: 'There is no level set',
+        points: 'Points',
+    },
+    hr: {
+        level: 'Razina',
+        seeAll: 'Vidi sve',
+        privilegesFor: 'Privilegije za',
+        termsAndConditions: 'Uvjeti i odredbe',
+        noLevelsSet: 'There is no level set',
+        points: 'Points',
+    },
+    ro: {
+        level: 'level',
+        seeAll: 'See All',
+        termsAndConditions: 'Terms & Conditions',
+        loadElevateLevelErrorMessage: 'Error when load elevate levels',
+        noLevelsSet: 'There is no level set',
+        points: 'Points',
+    },
+    tr: {
+        level: 'level',
+        seeAll: 'See All',
+        termsAndConditions: 'Terms & Conditions',
+        loadElevateLevelErrorMessage: 'Error when load elevate levels',
+        noLevelsSet: 'There is no level set',
+        points: 'Points',
+    }
+};
+export const translate = (key, customLang) => {
+    const lang = customLang;
+    return TRANSLATIONS[lang !== undefined && (SUPPORTED_LANGUAGES.includes(lang) || TRANSLATIONS[lang]) ? lang : DEFAULT_LANGUAGE][key];
+};

package/dist/collection/utils/prototype-collector.js

@@ -0,0 +1,5 @@
+export const PrototypeDecorator = (target) => {
+    target.prototype.getProps = () => {
+        console.log(target);
+    };
+};

package/dist/collection/utils/utils.js

@@ -0,0 +1,44 @@
+export function format(first, middle, last) {
+    return ((first || '') + (middle ? ` ${middle}` : '') + (last ? ` ${last}` : ''));
+}
+export function getValueByLangFromPresentation(presentation, keyName, lang) {
+    if (!presentation || !presentation[keyName]) {
+        return '';
+    }
+    return presentation[keyName][lang] ? presentation[keyName][lang] : presentation[keyName]['*'];
+}
+/**
+ * @name isMobile
+ * @description A method that returns if the browser used to access the app is from a mobile device or not
+ * @param {String} userAgent window.navigator.userAgent
+ * @returns {Boolean} true or false
+ */
+export const isMobile = (userAgent) => {
+    return !!(userAgent.toLowerCase().match(/android/i) ||
+        userAgent.toLowerCase().match(/blackberry|bb/i) ||
+        userAgent.toLowerCase().match(/iphone|ipad|ipod/i) ||
+        userAgent.toLowerCase().match(/windows phone|windows mobile|iemobile|wpdesktop/i));
+};
+/**
+ * @name getDevice
+ * @description A method that returns the type of the device
+ * @param {String} userAgent window.navigator.userAgent
+ * @returns {String} Android/iPhone/iPad/PC
+ */
+export const getDevice = (userAgent) => {
+    if (userAgent.toLowerCase().match(/android/i)) {
+        return 'Android';
+    }
+    if (userAgent.toLowerCase().match(/iphone/i)) {
+        return 'iPhone';
+    }
+    if (userAgent.toLowerCase().match(/ipad|ipod/i)) {
+        return 'iPad';
+    }
+    return 'PC';
+};
+export var MOVE_TO;
+(function (MOVE_TO) {
+    MOVE_TO[MOVE_TO["slideToRight"] = 1] = "slideToRight";
+    MOVE_TO[MOVE_TO["slideToLeft"] = -1] = "slideToLeft";
+})(MOVE_TO || (MOVE_TO = {}));

package/dist/esm/app-globals-0f993ce5.js

@@ -0,0 +1,3 @@
+const globalScripts = () => {};
+
+export { globalScripts as g };

package/dist/esm/bonus-elevate-levels.js

@@ -0,0 +1,20 @@
+import { p as promiseResolve, b as bootstrapLazy } from './index-ed3d1f59.js';
+export { s as setNonce } from './index-ed3d1f59.js';
+import { g as globalScripts } from './app-globals-0f993ce5.js';
+
+/*
+ Stencil Client Patch Browser v4.20.0 | MIT Licensed | https://stenciljs.com
+ */
+var patchBrowser = () => {
+  const importMeta = import.meta.url;
+  const opts = {};
+  if (importMeta !== "") {
+    opts.resourcesUrl = new URL(".", importMeta).href;
+  }
+  return promiseResolve(opts);
+};
+
+patchBrowser().then(async (options) => {
+  await globalScripts();
+  return bootstrapLazy([["bonus-elevate-levels_5",[[1,"bonus-elevate-levels",{"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"endpoint":[513],"language":[513],"translationUrl":[513,"translation-url"],"selectedLevelId":[1537,"selected-level-id"],"showDefault":[4,"show-default"],"elevateLevelParamProxy":[32],"elevateLevels":[32],"currentLevel":[32],"errorMessage":[32]},[[0,"selectedLevelChanged","selectedLevelChangedHandler"],[2,"elevateLevelsDataChange","elevateLevelsDataChangeHandler"]],{"selectedLevelId":["selectedLevelIdChangedHandler"],"elevateLevels":["selectedLevelIdChangedHandler"],"endpoint":["onSessionOrEndpointChange"],"language":["onSessionOrEndpointChange"]}],[0,"elevate-level-list",{"levels":[16],"language":[1],"selectedLevelId":[1537,"selected-level-id"],"isShowSliderButton":[32],"touchPosStart":[32],"touchPosEnd":[32],"offset":[32]},[[1,"touchstart","onTouchStart"],[1,"touchmove","onTouchMove"],[9,"resize","handleResize"]],{"selectedLevelId":["levelsChangedHandler"]}],[0,"elevate-level-presentation",{"elevateLevel":[16]}],[0,"elevate-levels-data",{"scopeParams":[1544,"scope-params"]}],[4,"general-styling-wrapper",{"clientStyling":[1,"client-styling"],"clientStylingUrl":[1,"client-styling-url"],"translationUrl":[1,"translation-url"],"targetTranslations":[16]}]]]], options);
+});

package/dist/esm/bonus-elevate-levels_5.entry.js

@@ -0,0 +1,421 @@
+import { r as registerInstance, h, c as createEvent, H as Host, g as getElement } from './index-ed3d1f59.js';
+
+const DEFAULT_LANGUAGE = 'en';
+const SUPPORTED_LANGUAGES = ['ro', 'en', 'fr', 'hr', 'tr'];
+const TRANSLATIONS = {
+    en: {
+        level: 'level',
+        seeAll: 'See All',
+        termsAndConditions: 'Terms & Conditions',
+        loadElevateLevelErrorMessage: 'Error when load elevate levels',
+        noLevelsSet: 'There is no level set',
+        points: 'Points',
+    },
+    fr: {
+        level: 'level',
+        seeAll: 'See All',
+        termsAndConditions: 'Terms & Conditions',
+        loadElevateLevelErrorMessage: 'Error when load elevate levels',
+        noLevelsSet: 'There is no level set',
+        points: 'Points',
+    },
+    hr: {
+        level: 'Razina',
+        seeAll: 'Vidi sve',
+        privilegesFor: 'Privilegije za',
+        termsAndConditions: 'Uvjeti i odredbe',
+        noLevelsSet: 'There is no level set',
+        points: 'Points',
+    },
+    ro: {
+        level: 'level',
+        seeAll: 'See All',
+        termsAndConditions: 'Terms & Conditions',
+        loadElevateLevelErrorMessage: 'Error when load elevate levels',
+        noLevelsSet: 'There is no level set',
+        points: 'Points',
+    },
+    tr: {
+        level: 'level',
+        seeAll: 'See All',
+        termsAndConditions: 'Terms & Conditions',
+        loadElevateLevelErrorMessage: 'Error when load elevate levels',
+        noLevelsSet: 'There is no level set',
+        points: 'Points',
+    }
+};
+const translate = (key, customLang) => {
+    const lang = customLang;
+    return TRANSLATIONS[lang !== undefined && (SUPPORTED_LANGUAGES.includes(lang) || TRANSLATIONS[lang]) ? lang : DEFAULT_LANGUAGE][key];
+};
+
+const bonusElevateLevelsCss = ":host{display:block}.ElevateLevelContent{padding:20px;position:relative}.ElevateLevelContent .Privileges{padding-bottom:30px}.ElevateLevelContent .tc{position:absolute;right:10px;bottom:10px;text-align:right;display:none}";
+const BonusElevateLevelsStyle0 = bonusElevateLevelsCss;
+
+const BonusElevateLevels = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.clientStyling = '';
+        this.clientStylingUrl = '';
+        this.endpoint = undefined;
+        this.language = 'en';
+        this.translationUrl = '';
+        this.selectedLevelId = undefined;
+        this.showDefault = undefined;
+        this.elevateLevelParamProxy = undefined;
+        this.elevateLevels = [];
+        this.currentLevel = undefined;
+        this.errorMessage = undefined;
+    }
+    selectedLevelChangedHandler(event) {
+        if (event.detail) {
+            this.currentLevel = Object.assign({}, event.detail.level);
+        }
+    }
+    selectedLevelIdChangedHandler() {
+        if (this.selectedLevelId && this.elevateLevels) {
+            const currentLevel = this.elevateLevels.filter((item) => {
+                return item.id == this.selectedLevelId;
+            })[0];
+            this.currentLevel = Object.assign({}, currentLevel);
+        }
+    }
+    onSessionOrEndpointChange() {
+        this.elevateLevelParamProxy = Object.assign(Object.assign({}, this.elevateLevelParamProxy), { endpoint: this.endpoint, language: this.language });
+    }
+    elevateLevelsDataChangeHandler(event) {
+        if (!event.detail) {
+            return;
+        }
+        if (event.detail.currentLevel) {
+            this.currentLevel = Object.assign({}, event.detail.currentLevel);
+        }
+        if (event.detail.elevateLevels) {
+            this.elevateLevels = [...event.detail.elevateLevels];
+        }
+        if (event.detail.clearError) {
+            this.errorMessage = null;
+        }
+        if (event.detail.errorMessage) {
+            if (event.detail.errorMessage['errorWhenLoadElevateLevels']) {
+                this.errorMessage = translate('loadElevateLevelErrorMessage', this.language);
+            }
+        }
+    }
+    onTCClick() {
+        window.postMessage({ type: 'termAndConditionClicked' }, window.location.href);
+    }
+    componentWillLoad() {
+        this.elevateLevelParamProxy = {
+            endpoint: this.endpoint, language: this.language, selectedLevelId: this.selectedLevelId,
+            showDefault: this.showDefault
+        };
+    }
+    render() {
+        return (h("div", { key: '327b5cd6a3bc756ce0696a0f2a4081f35bad7316', class: "ElevateLevelContent" }, h("elevate-levels-data", { key: 'cf1ab9a55cdaf9eba688bd524cb4a83d63563e77', scopeParams: this.elevateLevelParamProxy }), h("div", { key: '9c85b9a805712db07c7c99ac2db843062997f667', class: "LevelContent" }, this.elevateLevels ?
+            h("elevate-level-list", { language: this.language, selectedLevelId: this.selectedLevelId, levels: this.elevateLevels }) : translate('noLevelsSet', this.language), this.currentLevel &&
+            h("elevate-level-presentation", { key: '0fecb2a451caeef4512dc6f2af4fd3406610cc72', elevateLevel: this.currentLevel })), this.errorMessage && h("div", { key: 'ef746907148df80338fd2300322cd8eea9342f51' }, this.errorMessage), h("general-styling-wrapper", { key: 'e3d82ef1b7e5986354e18d875f9e3c547ff8adba', clientStyling: this.clientStyling, clientStylingUrl: this.clientStylingUrl, targetTranslations: TRANSLATIONS, translationUrl: this.translationUrl })));
+    }
+    static get watchers() { return {
+        "selectedLevelId": ["selectedLevelIdChangedHandler"],
+        "elevateLevels": ["selectedLevelIdChangedHandler"],
+        "endpoint": ["onSessionOrEndpointChange"],
+        "language": ["onSessionOrEndpointChange"]
+    }; }
+};
+BonusElevateLevels.style = BonusElevateLevelsStyle0;
+
+/**
+ * @name isMobile
+ * @description A method that returns if the browser used to access the app is from a mobile device or not
+ * @param {String} userAgent window.navigator.userAgent
+ * @returns {Boolean} true or false
+ */
+const isMobile = (userAgent) => {
+    return !!(userAgent.toLowerCase().match(/android/i) ||
+        userAgent.toLowerCase().match(/blackberry|bb/i) ||
+        userAgent.toLowerCase().match(/iphone|ipad|ipod/i) ||
+        userAgent.toLowerCase().match(/windows phone|windows mobile|iemobile|wpdesktop/i));
+};
+var MOVE_TO;
+(function (MOVE_TO) {
+    MOVE_TO[MOVE_TO["slideToRight"] = 1] = "slideToRight";
+    MOVE_TO[MOVE_TO["slideToLeft"] = -1] = "slideToLeft";
+})(MOVE_TO || (MOVE_TO = {}));
+
+const elevateLevelListCss = "elevate-level-list{display:flex;flex-direction:row}.LevelItemsWrapper{display:flex;flex:1;margin-top:10px;min-height:30px;transition-property:all;position:relative;height:138px;overflow-x:hidden}.Mobile.LevelItems{overflow-x:hidden}.LevelItems{overflow-x:auto;display:flex;flex-direction:row;gap:10px;left:0;position:absolute;transition:left 0.5s ease-in-out}.LevelItems .Item:hover,.LevelItems .Item.Active{background-color:var(--emfe-w-color-gray-50, rgb(244, 244, 244));box-shadow:0px 4px 13px 0px rgba(0, 0, 0, 0.25)}.LevelItems .Item{width:86px;height:125px;border-radius:15px;text-align:center;display:flex;flex-direction:column;cursor:pointer}.LevelItems .Item .LevelName{font-size:13px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.LevelItems .Item .LevelPoints{color:var(--emfe-w-color-gray-100, rgb(118, 113, 113));font-size:10px}.LevelItems .Item .LevelImg{width:65px;height:68px;margin:11px auto}.SliderButton{display:flex;width:29px;align-items:center;cursor:pointer}.SliderButton.Disabled svg{stroke:var(--emfe-w-color-gray-50, #cbc5c5)}.SliderButton.Hidden{display:none}";
+const ElevateLevelListStyle0 = elevateLevelListCss;
+
+const ElevateLevelList = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.selectedLevelChanged = createEvent(this, "selectedLevelChanged", 7);
+        this.minOffset = 0;
+        this.isMobile = isMobile(window.navigator.userAgent);
+        this.levels = undefined;
+        this.language = undefined;
+        this.selectedLevelId = undefined;
+        this.isShowSliderButton = false;
+        this.touchPosStart = undefined;
+        this.touchPosEnd = undefined;
+        this.offset = 0;
+    }
+    onLevelClicked(elevateLevel) {
+        this.selectedLevelChanged.emit({ level: elevateLevel });
+        this.selectedLevelId = elevateLevel.id;
+    }
+    levelsChangedHandler() {
+        this.initOffsetOfLevelItems();
+    }
+    initOffsetOfLevelItems() {
+        if (!this.levels || this.levels.length == 0 || !this.selectedLevelId) {
+            return;
+        }
+        const currentLevelIndex = this.levels.findIndex((item) => {
+            return this.selectedLevelId == item.id;
+        });
+        this.onLevelClicked(this.levels[currentLevelIndex == -1 ? 0 : currentLevelIndex]);
+        //do not need change the slider offset when level items less than moveCountForOneTouch
+        if (this.levels.length <= this.moveCountForOneTouch) {
+            return;
+        }
+        //to avoid the slider do not move when currentLevelIndex = moveCountForOneTouch - 1
+        let newOffset = Math.floor((currentLevelIndex == -1 ? 1 : currentLevelIndex + 1) / this.moveCountForOneTouch)
+            * this.moveCountForOneTouch * this.childElementWidth * (-1);
+        this.offset = newOffset <= this.minOffset ? this.minOffset : (newOffset >= 0 ? 0 : newOffset);
+    }
+    onTouchStart(e) {
+        this.touchPosStart = { clientX: e.touches[0].clientX, clientY: e.touches[0].clientY };
+    }
+    onTouchMove(e) {
+        this.touchPosEnd = { clientX: e.touches[0].clientX, clientY: e.touches[0].clientY };
+        const diffX = this.touchPosEnd.clientX - this.touchPosStart.clientX;
+        const diffY = this.touchPosEnd.clientY - this.touchPosStart.clientY;
+        if (Math.abs(diffX) > Math.abs(diffY)) {
+            this.slideTo(diffX > 0 ? MOVE_TO.slideToRight : MOVE_TO.slideToLeft);
+        }
+    }
+    slideTo(direction) {
+        let newOffset = this.levelsElement.offsetLeft +
+            (this.childElementWidth) * this.moveCountForOneTouch * direction;
+        if (newOffset % this.childElementWidth != 0) {
+            const leftOfPreNode = (Math.floor(newOffset / this.childElementWidth)) * this.childElementWidth;
+            const leftOfNextNode = (Math.ceil(newOffset / this.childElementWidth)) * this.childElementWidth;
+            //touchmove to right, get left of pre-node; touchmove to left, get left of next-node
+            newOffset = direction == MOVE_TO.slideToRight ? leftOfPreNode : leftOfNextNode;
+        }
+        this.offset = newOffset < this.minOffset ? this.minOffset : (newOffset >= 0 ? 0 : newOffset);
+    }
+    initLevelSlider() {
+        var _a;
+        if (!((_a = this.levelsElement) === null || _a === void 0 ? void 0 : _a.firstElementChild)) {
+            console.log('Widget[elevate-level-list] DOM is not ready.');
+            return;
+        }
+        this.isShowSliderButton = !this.isMobile && (this.levelsElement.clientWidth > this.levelsElement.parentElement.clientWidth);
+        this.minOffset = this.levelsElement.parentElement.clientWidth - this.levelsElement.clientWidth;
+        this.childElementWidth = this.levelsElement.firstElementChild.clientWidth;
+        this.moveCountForOneTouch = Math.ceil(this.levelsElement.parentElement.clientWidth / this.childElementWidth) - 1;
+        const childElementCount = this.levelsElement.childElementCount;
+        this.childElementWidth += (this.levelsElement.clientWidth - this.childElementWidth * childElementCount) / (childElementCount - 1);
+    }
+    debounce(callback, delay) {
+        {
+            let timer;
+            return () => {
+                clearTimeout(timer);
+                timer = setTimeout(() => {
+                    callback();
+                }, delay);
+            };
+        }
+    }
+    ;
+    handleResize() {
+        this.debounce(this.initLevelSlider.bind(this), 200)();
+    }
+    componentDidRender() {
+        this.host.componentOnReady().then(() => {
+            this.initLevelSlider();
+        });
+    }
+    render() {
+        return (h(Host, { key: 'd88d3434af89a0f8fd20a97735121fdf297905ab' }, this.levels && [
+            h("div", { key: 'cff36ba584e2474a65a1b95545b00937ecd06c8c', class: `SliderButton LeftButton ${this.offset == 0 ? 'Disabled' : ''} ${this.isShowSliderButton ? '' : 'Hidden'}`, onClick: () => this.slideTo(MOVE_TO.slideToRight) }, h("svg", { key: '640b4dd9b26b4097d15623f3e9c6b14b9a60b37e', fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '0a50ffc9319ad33ed61e4696c37a0bfe6090518c', "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", d: "M15 19l-7-7 7-7" }))),
+            h("div", { key: '314c5b4c5bbc0d50041a66fdf474441ea418345a', class: 'LevelItemsWrapper' }, h("div", { key: 'ff1fb084aeb20319c36a3420e9eb8693ea81b144', style: { 'left': `${this.offset}px` }, class: `LevelItems ${this.isMobile ? 'Mobile' : ''}`, id: 'levelItems', ref: (el) => { this.levelsElement = el; } }, this.levels.map((level, idx) => {
+                return (h("div", { class: `Item ${this.selectedLevelId == level.id ? 'Active' : ''}`, onClick: this.onLevelClicked.bind(this, level) }, h("img", { alt: `Presentation Icon for ${level.presentation.displayName}`, class: "LevelImg", src: level.presentation.asset }), h("span", { class: "LevelName", title: level.presentation.displayName }, level.presentation.displayName), h("span", { class: "LevelPoints" }, idx == 0 ? '' : '>', level.firstEntryPoints, ' ', translate('points', this.language))));
+            }))),
+            h("div", { key: '8dae638ca436c7e747a0f737028588ee5d040edd', class: `SliderButton RightButton ${this.offset <= this.minOffset ? 'Disabled' : ''} ${this.isShowSliderButton ? '' : 'Hidden'}`, onClick: () => this.slideTo(MOVE_TO.slideToLeft) }, h("svg", { key: 'bba16b49668567aaa41beedd9ea461d256c6812d', fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '36a0b6f3ffe8b50ebea9a4ec1c01e3341c440949', "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", d: "M9 5l7 7-7 7" })))
+        ]));
+    }
+    get host() { return getElement(this); }
+    static get watchers() { return {
+        "selectedLevelId": ["levelsChangedHandler"]
+    }; }
+};
+ElevateLevelList.style = ElevateLevelListStyle0;
+
+const elevateLevelPresentationCss = ":host{display:block}.PriviliegeList{padding-inline-start:5px}.PriviliegeList li{display:flex}.PriviliegeList li .Img{width:80px}.PriviliegeList li .Img img{width:60px;margin:10px}.PriviliegeList li .Content h4{text-transform:capitalize;margin-block-start:10px}";
+const ElevateLevelPresentationStyle0 = elevateLevelPresentationCss;
+
+const ElevateLevelPresentation = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.elevateLevel = undefined;
+    }
+    render() {
+        return h(Host, { key: '16d128717e716f7ca7d3bb77fc3a2e67209318b6' }, h("div", { key: '658657abdfc64844bd2af40562efe40385e1735a', class: "Row Desc" }, h("h3", { key: 'ec5871c2f810c8c120bf99510717381175bc1ef4' }, this.elevateLevel.presentation.displayName), h("p", { key: '865915c6eea90295238fb47eaa91c8f968199ca5' }, h("span", { key: '2b90c6c5d6957b73fc4a0f53d53da0ca023a4f0a', class: "TxtDesc", innerHTML: this.elevateLevel.presentation.description }))));
+    }
+};
+ElevateLevelPresentation.style = ElevateLevelPresentationStyle0;
+
+var browser = {exports: {}};
+
+(function (module, exports) {
+
+// ref: https://github.com/tc39/proposal-global
+var getGlobal = function () {
+	// the only reliable means to get the global object is
+	// `Function('return this')()`
+	// However, this causes CSP violations in Chrome apps.
+	if (typeof self !== 'undefined') { return self; }
+	if (typeof window !== 'undefined') { return window; }
+	if (typeof global !== 'undefined') { return global; }
+	throw new Error('unable to locate global object');
+};
+
+var global = getGlobal();
+
+module.exports = exports = global.fetch;
+
+// Needed for TypeScript and Webpack.
+if (global.fetch) {
+	exports.default = global.fetch.bind(global);
+}
+
+exports.Headers = global.Headers;
+exports.Request = global.Request;
+exports.Response = global.Response;
+}(browser, browser.exports));
+
+const fetch$1 = browser.exports;
+
+const elevateLevelsDataCss = ":host{display:block}";
+const ElevateLevelsDataStyle0 = elevateLevelsDataCss;
+
+const ElevateLevelsData = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.elevateLevelsDataChange = createEvent(this, "elevateLevelsDataChange", 7);
+        this.scopeParams = undefined;
+    }
+    async componentWillRender() {
+        //load data
+        if (!this.scopeParams.endpoint) {
+            return;
+        }
+        const endpoint = this.scopeParams.endpoint;
+        let url = new URL(`${endpoint}/v1/elevate/levels?language=${this.scopeParams.language}`);
+        await fetch$1(url.href)
+            .then((res) => res.json())
+            .then((res) => {
+            const elevateLevels = res.data.sort((a, b) => {
+                return a.firstEntryPoints < b.firstEntryPoints ? -1 : 1;
+            });
+            let selectedLevelId = this.scopeParams.selectedLevelId;
+            // if selected level is not set, set first（basic） as default
+            if (!selectedLevelId && this.scopeParams.showDefault && elevateLevels.length > 0) {
+                selectedLevelId = elevateLevels[0].id;
+            }
+            if (selectedLevelId) {
+                // get current level by name
+                const currentLevel = elevateLevels.filter((item) => {
+                    return item.id == selectedLevelId;
+                })[0];
+                this.elevateLevelsDataChange.emit({ currentLevel: currentLevel });
+            }
+            this.elevateLevelsDataChange.emit({ 'clearError': true });
+            this.elevateLevelsDataChange.emit({ 'elevateLevels': elevateLevels });
+        }).catch((err) => {
+            this.elevateLevelsDataChange.emit({ errorMessage: { type: 'errorWhenLoadElevateLevels', err } });
+            console.error(err);
+        });
+    }
+};
+ElevateLevelsData.style = ElevateLevelsDataStyle0;
+
+const mergeTranslations = (url, target) => {
+    return new Promise((resolve) => {
+        fetch(url)
+            .then((res) => res.json())
+            .then((data) => {
+            Object.keys(data).forEach((item) => {
+                target[item] = target[item] ? target[item] : {};
+                for (let key in data[item]) {
+                    target[item][key] = data[item][key];
+                }
+            });
+            resolve(true);
+        });
+    });
+};
+
+const generalStylingWrapperCss = ":host{display:block}";
+const GeneralStylingWrapperStyle0 = generalStylingWrapperCss;
+
+const GeneralStylingWrapper = class {
+    constructor(hostRef) {
+        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;
+    }
+    componentDidRender() {
+        // start custom styling area
+        if (!this.stylingAppends) {
+            if (this.clientStyling)
+                this.setClientStyling();
+            if (this.clientStylingUrl)
+                this.setClientStylingURL();
+            this.stylingAppends = true;
+        }
+        // end custom styling area
+    }
+    async componentWillLoad() {
+        const promises = [];
+        if (this.translationUrl) {
+            const translationPromise = mergeTranslations(this.translationUrl, this.targetTranslations);
+            promises.push(translationPromise);
+        }
+        return await Promise.all(promises);
+    }
+    render() {
+        return (h("div", { key: '4d3414408c7662f88331dbe655966237f74d6958', class: "StyleShell" }, h("slot", { key: '1d004644d84602c4314bdf5dfc26b55b160f57df', name: "mainContent" })));
+    }
+    get el() { return getElement(this); }
+};
+GeneralStylingWrapper.style = GeneralStylingWrapperStyle0;
+
+export { BonusElevateLevels as bonus_elevate_levels, ElevateLevelList as elevate_level_list, ElevateLevelPresentation as elevate_level_presentation, ElevateLevelsData as elevate_levels_data, GeneralStylingWrapper as general_styling_wrapper };