@everymatrix/bonus-elevate-levels 1.43.4 → 1.45.0

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

@@ -1,223 +1,232 @@
-import { Component, Event, h, Host, Listen, Prop, State, Watch, Element } from '@stencil/core';
-import { translate } from '../../utils/locale.utils';
+import { h, Host } 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"
-          }
+    constructor() {
+        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);
+            };
         }
-      },
-      "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
-    }]; }
+    }
+    ;
+    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" })))
+        ]));
+    }
+    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",
+                            "id": "global::Array"
+                        },
+                        "ElevateLevel": {
+                            "location": "import",
+                            "path": "../../models/elevate-levels",
+                            "id": "../../../../packages/stencil/bonus-elevate-levels/src/models/elevate-levels.ts::ElevateLevel"
+                        }
+                    }
+                },
+                "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.js

@@ -1,39 +1,45 @@
-import { Component, h, Host, Prop } from '@stencil/core';
+import { h, Host } 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"
-      }
+    constructor() {
+        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 }))));
+    }
+    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",
+                            "id": "../../../../packages/stencil/bonus-elevate-levels/src/models/elevate-levels.ts::ElevateLevel"
+                        }
+                    }
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Elevate level"
+                }
+            }
+        };
     }
-  }; }
 }