@everymatrix/bonus-elevate-levels 1.31.2

package/dist/cjs/index.cjs.js

@@ -0,0 +1,2 @@
+'use strict';
+

package/dist/cjs/loader.cjs.js

@@ -0,0 +1,21 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-3c66cec7.js');
+
+/*
+ Stencil Client Patch Esm v2.15.2 | MIT Licensed | https://stenciljs.com
+ */
+const patchEsm = () => {
+    return index.promiseResolve();
+};
+
+const defineCustomElements = (win, options) => {
+  if (typeof window === 'undefined') return Promise.resolve();
+  return patchEsm().then(() => {
+  return index.bootstrapLazy([["bonus-elevate-levels_5.cjs",[[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"]]],[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"]]],[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);
+  });
+};
+
+exports.defineCustomElements = defineCustomElements;

package/dist/collection/collection-manifest.json

@@ -0,0 +1,22 @@
+{
+  "entries": [
+    "./components/bonus-elevate-levels/bonus-elevate-levels.js",
+    "./components/elevate-level-list/elevate-level-list.js",
+    "./components/elevate-level-presentation/elevate-level-presentation.js",
+    "./components/elevate-levels-data/elevate-levels-data.js"
+  ],
+  "compiler": {
+    "name": "@stencil/core",
+    "version": "2.15.2",
+    "typescriptVersion": "4.5.4"
+  },
+  "collections": [
+    {
+      "name": "@everymatrix/general-styling-wrapper",
+      "tags": [
+        "general-styling-wrapper"
+      ]
+    }
+  ],
+  "bundles": []
+}

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

@@ -0,0 +1,18 @@
+: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;
+}

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

@@ -0,0 +1,240 @@
+import { Component, h, Listen, Prop, State, Watch } from '@stencil/core';
+import { translate, TRANSLATIONS } from '../../utils/locale.utils';
+export class BonusElevateLevels {
+  constructor() {
+    /**
+     * Client custom styling via string
+     */
+    this.clientStyling = '';
+    /**
+     * Client custom styling via url
+     */
+    this.clientStylingUrl = '';
+    /**
+     * Language of the widget
+     */
+    this.language = 'en';
+    /**
+     * The translationUrl
+     */
+    this.translationUrl = '';
+    /**
+     * Used in elevate level list
+     */
+    this.elevateLevels = [];
+  }
+  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);
+    }
+  }
+  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", { class: "ElevateLevelContent" },
+      h("elevate-levels-data", { scopeParams: this.elevateLevelParamProxy }),
+      h("div", { 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", { elevateLevel: this.currentLevel }),
+        h("div", { class: "tc", onClick: this.onTCClick },
+          translate('termsAndConditions', this.language),
+          ' ')),
+      this.errorMessage && h("div", null, this.errorMessage),
+      h("general-styling-wrapper", { clientStyling: this.clientStyling, clientStylingUrl: this.clientStylingUrl, targetTranslations: TRANSLATIONS, translationUrl: this.translationUrl })));
+  }
+  static get is() { return "bonus-elevate-levels"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["bonus-elevate-levels.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["bonus-elevate-levels.css"]
+  }; }
+  static get properties() { return {
+    "clientStyling": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Client custom styling via string"
+      },
+      "attribute": "client-styling",
+      "reflect": true,
+      "defaultValue": "''"
+    },
+    "clientStylingUrl": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Client custom styling via url"
+      },
+      "attribute": "client-styling-url",
+      "reflect": true,
+      "defaultValue": "''"
+    },
+    "endpoint": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": true,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Endpoint URL for the source of data"
+      },
+      "attribute": "endpoint",
+      "reflect": true
+    },
+    "language": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Language of the widget"
+      },
+      "attribute": "language",
+      "reflect": true,
+      "defaultValue": "'en'"
+    },
+    "translationUrl": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The translationUrl"
+      },
+      "attribute": "translation-url",
+      "reflect": true,
+      "defaultValue": "''"
+    },
+    "selectedLevelId": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Level id to find the level info, then show in view"
+      },
+      "attribute": "selected-level-id",
+      "reflect": true
+    },
+    "showDefault": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "false",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Selected the first level as default when selectedLevelId is not set\nDefault: false"
+      },
+      "attribute": "show-default",
+      "reflect": false
+    }
+  }; }
+  static get states() { return {
+    "elevateLevelParamProxy": {},
+    "elevateLevels": {},
+    "currentLevel": {},
+    "errorMessage": {}
+  }; }
+  static get watchers() { return [{
+      "propName": "selectedLevelId",
+      "methodName": "selectedLevelIdChangedHandler"
+    }, {
+      "propName": "elevateLevels",
+      "methodName": "selectedLevelIdChangedHandler"
+    }]; }
+  static get listeners() { return [{
+      "name": "selectedLevelChanged",
+      "method": "selectedLevelChangedHandler",
+      "target": undefined,
+      "capture": false,
+      "passive": false
+    }, {
+      "name": "elevateLevelsDataChange",
+      "method": "elevateLevelsDataChangeHandler",
+      "target": undefined,
+      "capture": true,
+      "passive": false
+    }]; }
+}

package/dist/collection/components/elevate-level-list/elevate-level-list.css

@@ -0,0 +1,70 @@
+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, #f4f4f4);
+  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, #767171);
+  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;
+}

package/dist/collection/components/elevate-level-list/elevate-level-list.js

@@ -0,0 +1,223 @@
+import { Component, Event, h, Host, Listen, Prop, State, Watch, Element } from '@stencil/core';
+import { translate } from '../../utils/locale.utils';
+import { isMobile, MOVE_TO } from "../../utils/utils";
+export class ElevateLevelList {
+  constructor() {
+    this.isShowSliderButton = false;
+    this.offset = 0;
+    this.minOffset = 0;
+    this.isMobile = isMobile(window.navigator.userAgent);
+  }
+  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, null, this.levels && [
+      h("div", { class: `SliderButton LeftButton ${this.offset == 0 ? 'Disabled' : ''} ${this.isShowSliderButton ? '' : 'Hidden'}`, onClick: () => this.slideTo(MOVE_TO.slideToRight) },
+        h("svg", { fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" },
+          h("path", { "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", d: "M15 19l-7-7 7-7" }))),
+      h("div", { class: 'LevelItemsWrapper' },
+        h("div", { 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", { class: `SliderButton RightButton ${this.offset <= this.minOffset ? 'Disabled' : ''} ${this.isShowSliderButton ? '' : 'Hidden'}`, onClick: () => this.slideTo(MOVE_TO.slideToLeft) },
+        h("svg", { fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" },
+          h("path", { "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", d: "M9 5l7 7-7 7" })))
+    ]));
+  }
+  static get is() { return "elevate-level-list"; }
+  static get originalStyleUrls() { return {
+    "$": ["elevate-level-list.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["elevate-level-list.css"]
+  }; }
+  static get properties() { return {
+    "levels": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "Array<ElevateLevel>",
+        "resolved": "ElevateLevel[]",
+        "references": {
+          "Array": {
+            "location": "global"
+          },
+          "ElevateLevel": {
+            "location": "import",
+            "path": "../../models/elevate-levels"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "ElevateLevelList"
+      }
+    },
+    "language": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The Language"
+      },
+      "attribute": "language",
+      "reflect": false
+    },
+    "selectedLevelId": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": true,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "ID of selected level"
+      },
+      "attribute": "selected-level-id",
+      "reflect": true
+    }
+  }; }
+  static get states() { return {
+    "isShowSliderButton": {},
+    "touchPosStart": {},
+    "touchPosEnd": {},
+    "offset": {}
+  }; }
+  static get events() { return [{
+      "method": "selectedLevelChanged",
+      "name": "selectedLevelChanged",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }]; }
+  static get elementRef() { return "host"; }
+  static get watchers() { return [{
+      "propName": "selectedLevelId",
+      "methodName": "levelsChangedHandler"
+    }]; }
+  static get listeners() { return [{
+      "name": "touchstart",
+      "method": "onTouchStart",
+      "target": undefined,
+      "capture": false,
+      "passive": true
+    }, {
+      "name": "touchmove",
+      "method": "onTouchMove",
+      "target": undefined,
+      "capture": false,
+      "passive": true
+    }, {
+      "name": "resize",
+      "method": "handleResize",
+      "target": "window",
+      "capture": false,
+      "passive": true
+    }]; }
+}

package/dist/collection/components/elevate-level-presentation/elevate-level-presentation.css

@@ -0,0 +1,21 @@
+: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;
+}

package/dist/collection/components/elevate-level-presentation/elevate-level-presentation.js

@@ -0,0 +1,39 @@
+import { Component, h, Host, Prop } from '@stencil/core';
+export class ElevateLevelPresentation {
+  render() {
+    return h(Host, null,
+      h("div", { class: "Row Desc" },
+        h("h3", null, this.elevateLevel.presentation.displayName),
+        h("p", null,
+          h("span", { class: "TxtDesc", innerHTML: this.elevateLevel.presentation.description }))));
+  }
+  static get is() { return "elevate-level-presentation"; }
+  static get originalStyleUrls() { return {
+    "$": ["elevate-level-presentation.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["elevate-level-presentation.css"]
+  }; }
+  static get properties() { return {
+    "elevateLevel": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "ElevateLevel",
+        "resolved": "ElevateLevel",
+        "references": {
+          "ElevateLevel": {
+            "location": "import",
+            "path": "../../models/elevate-levels"
+          }
+        }
+      },
+      "required": true,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Elevate level"
+      }
+    }
+  }; }
+}

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

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