@everymatrix/gamification-dropdown 1.43.4 → 1.54.2

package/dist/collection/components/gamification-dropdown/gamification-dropdown.js

@@ -1,266 +1,281 @@
-import { Component, h, State, Prop, Watch, Element } from '@stencil/core';
-import { getTranslations, translate } from '../../utils/locale.utils';
-import '@everymatrix/player-elevate-card';
+import { h } from "@stencil/core";
+import { getTranslations, translate } from "../../utils/locale.utils";
+import "../../../../../player-elevate-card/dist/types/index";
 export class GamificationDropdown {
-  constructor() {
-    /**
-     * Language of the widget
-     */
-    this.language = 'en';
-    /**
-     * Session of the user
-     */
-    this.session = '';
-    /**
-    * Client custom styling via string
-    */
-    this.clientStyling = '';
-    /**
-     * Client custom styling via url
-     */
-    this.clientStylingUrl = '';
-    /**
-     * Translations via URL
-     */
-    this.translationUrl = '';
-    this.isOpen = false;
-    this.isLoading = false;
-    this.stylingAppends = false;
-    this.setClientStyling = () => {
-      let sheet = document.createElement('style');
-      sheet.innerHTML = this.clientStyling;
-      this.stylingContainer.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.stylingContainer.prepend(cssFile); }, 1);
-      })
-        .catch((err) => {
-        console.log('error ', err);
-      });
-    };
-    this.navigateToGamification = () => {
-      window.postMessage({ type: 'NavigateToGamification' }, window.location.href);
-      this.isOpen = false;
-    };
-    this.handleOutsideClick = (event) => {
-      const path = event.composedPath();
-      if (!path.includes(this.el)) {
+    constructor() {
+        /**
+         * Language of the widget
+         */
+        this.language = 'en';
+        /**
+         * Session of the user
+         */
+        this.session = '';
+        /**
+        * Client custom styling via string
+        */
+        this.clientStyling = '';
+        /**
+         * Client custom styling via url
+         */
+        this.clientStylingUrl = '';
+        /**
+         * Translations via URL
+         */
+        this.translationUrl = '';
         this.isOpen = false;
-        document.removeEventListener('click', this.handleOutsideClick);
-      }
-    };
-    this.handleDropdownClick = (event) => {
-      event.stopPropagation();
-      this.isOpen = !this.isOpen;
-      if (this.isOpen) {
-        document.addEventListener('click', this.handleOutsideClick);
-      }
-      else {
-        document.removeEventListener('click', this.handleOutsideClick);
-      }
-    };
-  }
-  handleNewTranslations() {
-    this.isLoading = true;
-    getTranslations(this.translationUrl).then(() => {
-      this.isLoading = false;
-    });
-  }
-  async componentWillLoad() {
-    if (this.translationUrl.length > 2) {
-      await getTranslations(this.translationUrl);
+        this.isLoading = false;
+        this.stylingAppends = false;
+        this.setClientStyling = () => {
+            let sheet = document.createElement('style');
+            sheet.innerHTML = this.clientStyling;
+            this.stylingContainer.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.stylingContainer.prepend(cssFile); }, 1);
+            })
+                .catch((err) => {
+                console.log('error ', err);
+            });
+        };
+        this.navigateToGamification = () => {
+            window.postMessage({ type: 'NavigateToGamification' }, window.location.href);
+            this.isOpen = false;
+        };
+        this.handleOutsideClick = (event) => {
+            const path = event.composedPath();
+            if (!path.includes(this.el)) {
+                this.isOpen = false;
+                document.removeEventListener('click', this.handleOutsideClick);
+            }
+        };
+        this.handleDropdownClick = (event) => {
+            event.stopPropagation();
+            this.isOpen = !this.isOpen;
+            if (this.isOpen) {
+                document.addEventListener('click', this.handleOutsideClick);
+            }
+            else {
+                document.removeEventListener('click', this.handleOutsideClick);
+            }
+        };
     }
-    if (this.endpoint && this.language) {
-      return this.fetchPointsData();
+    handleNewTranslations() {
+        this.isLoading = true;
+        getTranslations(this.translationUrl).then(() => {
+            this.isLoading = false;
+        });
     }
-  }
-  componentDidRender() {
-    // start custom styling area
-    if (!this.stylingAppends && this.stylingContainer) {
-      if (this.clientStyling)
-        this.setClientStyling();
-      if (this.clientStylingUrl)
-        this.setClientStylingURL();
-      this.stylingAppends = true;
+    async componentWillLoad() {
+        if (this.translationUrl.length > 2) {
+            await getTranslations(this.translationUrl);
+        }
+        if (this.endpoint && this.language) {
+            return this.fetchPointsData();
+        }
     }
-    // end custom styling area
-  }
-  fetchPointsData() {
-    let url = new URL(`${this.endpoint}/v1/elevate/playerInfo`);
-    url.searchParams.append('language', this.language);
-    const headers = new Headers();
-    headers.append('X-SessionId', this.session);
-    const options = {
-      method: 'GET',
-      headers
-    };
-    return new Promise((resolve, reject) => {
-      this.isLoading = true;
-      fetch(url.href, options)
-        .then((res) => res.json())
-        .then((data) => {
-        var _a, _b;
-        this.loyaltyPoints = (_b = (_a = data === null || data === void 0 ? void 0 : data.data) === null || _a === void 0 ? void 0 : _a.level) === null || _b === void 0 ? void 0 : _b.loyaltyPoints;
-        resolve(true);
-      }).catch((err) => {
-        console.error(err);
-        reject(err);
-      }).finally(() => {
-        this.isLoading = false;
-      });
-    });
-  }
-  render() {
-    if (this.isLoading) {
-      return null;
+    componentDidRender() {
+        // start custom styling area
+        if (!this.stylingAppends && this.stylingContainer) {
+            if (this.clientStyling)
+                this.setClientStyling();
+            if (this.clientStylingUrl)
+                this.setClientStylingURL();
+            this.stylingAppends = true;
+        }
+        // end custom styling area
+    }
+    fetchPointsData() {
+        let url = new URL(`${this.endpoint}/v1/elevate/playerInfo`);
+        url.searchParams.append('language', this.language);
+        const headers = new Headers();
+        headers.append('X-SessionId', this.session);
+        const options = {
+            method: 'GET',
+            headers
+        };
+        return new Promise((resolve, reject) => {
+            this.isLoading = true;
+            fetch(url.href, options)
+                .then((res) => res.json())
+                .then((data) => {
+                var _a, _b;
+                this.loyaltyPoints = (_b = (_a = data === null || data === void 0 ? void 0 : data.data) === null || _a === void 0 ? void 0 : _a.level) === null || _b === void 0 ? void 0 : _b.loyaltyPoints;
+                resolve(true);
+            }).catch((err) => {
+                console.error(err);
+                reject(err);
+            }).finally(() => {
+                this.isLoading = false;
+            });
+        });
+    }
+    render() {
+        if (this.isLoading) {
+            return null;
+        }
+        else {
+            return (h("div", { ref: el => this.stylingContainer = el, class: "GamificationDropdownContainer" }, h("button", { class: `GamificationDropdownButton ${this.isOpen ? 'IsOpen' : ''}`, type: "button", onClick: (e) => this.handleDropdownClick(e), title: typeof this.loyaltyPoints === 'number'
+                    ? String(this.loyaltyPoints)
+                    : translate('gamificationNoPoints', this.language) }, typeof this.loyaltyPoints === 'number'
+                ? `${this.loyaltyPoints} XP`
+                : '...', h("span", { class: this.isOpen ? 'TriangleActive' : 'TriangleInactive' }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "14", height: "6.835", viewBox: "0 0 14 6.835" }, h("path", { id: "arrow", d: "M281.541,447.921a.488.488,0,0,0,.295-.122l6.5-5.851a.488.488,0,1,0-.65-.726l-6.176,5.556-6.176-5.556h0a.488.488,0,1,0-.65.726l6.5,5.851a.488.488,0,0,0,.355.122Z", transform: "translate(-274.511 -441.088)" })))), this.isOpen && (h("div", { class: "GamificationDropdown", onClick: this.navigateToGamification }, h("player-elevate-loyaltycard", { endpoint: this.endpoint, session: this.session, language: this.language, "client-styling-url": this.clientStylingUrl, "client-styling": this.clientStyling })))));
+        }
+    }
+    static get is() { return "gamification-dropdown"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["gamification-dropdown.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["gamification-dropdown.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "endpoint": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Endpoint URL for the source of data"
+                },
+                "getter": false,
+                "setter": false,
+                "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"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "language",
+                "reflect": true,
+                "defaultValue": "'en'"
+            },
+            "session": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Session of the user"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "session",
+                "reflect": true,
+                "defaultValue": "''"
+            },
+            "clientStyling": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Client custom styling via string"
+                },
+                "getter": false,
+                "setter": false,
+                "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"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "client-styling-url",
+                "reflect": true,
+                "defaultValue": "''"
+            },
+            "translationUrl": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Translations via URL"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "translation-url",
+                "reflect": true,
+                "defaultValue": "''"
+            }
+        };
     }
-    else {
-      return (h("div", { ref: el => this.stylingContainer = el, class: "GamificationDropdownContainer" },
-        h("button", { class: `GamificationDropdownButton ${this.isOpen ? 'IsOpen' : ''}`, type: "button", onClick: (e) => this.handleDropdownClick(e), title: typeof this.loyaltyPoints === 'number'
-            ? String(this.loyaltyPoints)
-            : translate('gamificationNoPoints', this.language) },
-          typeof this.loyaltyPoints === 'number'
-            ? `${this.loyaltyPoints} XP`
-            : '...',
-          h("span", { class: this.isOpen ? 'TriangleActive' : 'TriangleInactive' },
-            h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "14", height: "6.835", viewBox: "0 0 14 6.835" },
-              h("path", { id: "arrow", d: "M281.541,447.921a.488.488,0,0,0,.295-.122l6.5-5.851a.488.488,0,1,0-.65-.726l-6.176,5.556-6.176-5.556h0a.488.488,0,1,0-.65.726l6.5,5.851a.488.488,0,0,0,.355.122Z", transform: "translate(-274.511 -441.088)" })))),
-        this.isOpen && (h("div", { class: "GamificationDropdown", onClick: this.navigateToGamification },
-          h("player-elevate-loyaltycard", { endpoint: this.endpoint, session: this.session, language: this.language, "client-styling-url": this.clientStylingUrl, "client-styling": this.clientStyling })))));
+    static get states() {
+        return {
+            "isOpen": {},
+            "isLoading": {},
+            "stylingAppends": {},
+            "loyaltyPoints": {}
+        };
     }
-  }
-  static get is() { return "gamification-dropdown"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["gamification-dropdown.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["gamification-dropdown.css"]
-  }; }
-  static get properties() { return {
-    "endpoint": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "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'"
-    },
-    "session": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Session of the user"
-      },
-      "attribute": "session",
-      "reflect": true,
-      "defaultValue": "''"
-    },
-    "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": "''"
-    },
-    "translationUrl": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Translations via URL"
-      },
-      "attribute": "translation-url",
-      "reflect": true,
-      "defaultValue": "''"
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "translationUrl",
+                "methodName": "handleNewTranslations"
+            }];
     }
-  }; }
-  static get states() { return {
-    "isOpen": {},
-    "isLoading": {},
-    "stylingAppends": {},
-    "loyaltyPoints": {}
-  }; }
-  static get elementRef() { return "el"; }
-  static get watchers() { return [{
-      "propName": "translationUrl",
-      "methodName": "handleNewTranslations"
-    }]; }
 }

package/dist/collection/components/gamification-dropdown/index.js

@@ -0,0 +1 @@
+export { GamificationDropdown } from './gamification-dropdown';

package/dist/collection/index.js

@@ -1 +1 @@
-export * from './components';
+export * from './components/gamification-dropdown';

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

@@ -1,42 +1,42 @@
 const DEFAULT_LANGUAGE = 'en';
 let TRANSLATIONS = {
-  en: {
-    gamificationNoPoints: "No points"
-  },
-  de: {
-    gamificationNoPoints: "No points"
-  },
-  ro: {
-    gamificationNoPoints: "No points"
-  },
-  fr: {
-    gamificationNoPoints: "No points"
-  },
-  ar: {
-    gamificationNoPoints: "No points"
-  },
-  hr: {
-    gamificationNoPoints: "No points"
-  }
+    en: {
+        gamificationNoPoints: "No points"
+    },
+    de: {
+        gamificationNoPoints: "No points"
+    },
+    ro: {
+        gamificationNoPoints: "No points"
+    },
+    fr: {
+        gamificationNoPoints: "No points"
+    },
+    ar: {
+        gamificationNoPoints: "No points"
+    },
+    hr: {
+        gamificationNoPoints: "No points"
+    }
 };
 export const getTranslations = (url) => {
-  return new Promise((resolve) => {
-    fetch(url)
-      .then((res) => res.json())
-      .then((data) => {
-      Object.keys(data).forEach((lang) => {
-        if (!TRANSLATIONS[lang]) {
-          TRANSLATIONS[lang] = {};
-        }
-        for (let key in data[lang]) {
-          TRANSLATIONS[lang][key] = data[lang][key];
-        }
-      });
-      resolve(true);
+    return new Promise((resolve) => {
+        fetch(url)
+            .then((res) => res.json())
+            .then((data) => {
+            Object.keys(data).forEach((lang) => {
+                if (!TRANSLATIONS[lang]) {
+                    TRANSLATIONS[lang] = {};
+                }
+                for (let key in data[lang]) {
+                    TRANSLATIONS[lang][key] = data[lang][key];
+                }
+            });
+            resolve(true);
+        });
     });
-  });
 };
 export const translate = (key, customLang) => {
-  const lang = customLang;
-  return TRANSLATIONS[(lang !== undefined) && (lang in TRANSLATIONS) ? lang : DEFAULT_LANGUAGE][key];
+    const lang = customLang;
+    return TRANSLATIONS[(lang !== undefined) && (lang in TRANSLATIONS) ? lang : DEFAULT_LANGUAGE][key];
 };

package/dist/collection/utils/utils.js

@@ -1,3 +1,3 @@
 export function format(first, middle, last) {
-  return ((first || '') + (middle ? ` ${middle}` : '') + (last ? ` ${last}` : ''));
+    return (first || '') + (middle ? ` ${middle}` : '') + (last ? ` ${last}` : '');
 }

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

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