@everymatrix/gamification-dropdown 1.40.0

package/dist/components/gamification-dropdown.js

@@ -0,0 +1,229 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { d as defineCustomElement$4 } from './general-styling-wrapper2.js';
+import { d as defineCustomElement$3 } from './player-elevate-card-data2.js';
+import { d as defineCustomElement$2 } from './player-elevate-loyaltycard2.js';
+
+const DEFAULT_LANGUAGE = 'en';
+const SUPPORTED_LANGUAGES = ['de', 'en', 'hr'];
+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"
+  }
+};
+const getTranslations = (url) => {
+  // fetch url, get the data, replace the TRANSLATIONS content
+  return new Promise((resolve) => {
+    fetch(url)
+      .then((res) => res.json())
+      .then((data) => {
+      Object.keys(data).forEach((item) => {
+        for (let key in data[item]) {
+          TRANSLATIONS[item][key] = data[item][key];
+        }
+      });
+      resolve(true);
+    });
+  });
+};
+const translate = (key, customLang, values) => {
+  const lang = customLang;
+  let translation = TRANSLATIONS[lang !== undefined && SUPPORTED_LANGUAGES.includes(lang) ? lang : DEFAULT_LANGUAGE][key];
+  if (values !== undefined) {
+    for (const [key, value] of Object.entries(values.values)) {
+      const regex = new RegExp(`{${key}}`, 'g');
+      translation = translation.replace(regex, value);
+    }
+  }
+  return translation;
+};
+
+const gamificationDropdownCss = ":host{display:block}.GamificationDropdownContainer{position:relative}.GamificationDropdownContainer .GamificationDropdown{position:absolute;left:0;z-index:999;overflow:hidden}.GamificationDropdownButton{cursor:pointer;font-size:14px;height:20px;background-color:unset;color:var(--emw--color-typography, #FFFFFF);padding:0;border:none;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;display:flex;align-items:center;justify-content:center;line-height:0}.GamificationDropdownButton:hover{color:var(--emw--color-primary, #52d004)}.GamificationDropdownButton:hover svg{fill:var(--emw--color-primary, #52d004)}.GamificationDropdownButton.IsOpen{color:var(--emw--color-primary, #52d004)}.GamificationDropdownButton.IsOpen svg{fill:var(--emw--color-primary, #52d004)}.GamificationDropdownButton svg{fill:var(--emw--color-typography, #FFFFFF);margin-left:8px;width:16px}";
+
+const GamificationDropdown$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    /**
+     * 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.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.handleOutsideClick = (event) => {
+      const dropdownElement = document.querySelector('gamification-dropdown');
+      if (dropdownElement && !dropdownElement.contains(event.target)) {
+        this.isOpen = false;
+        document.removeEventListener('click', this.handleOutsideClick);
+      }
+    };
+    this.handleDropdownClick = () => {
+      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);
+    }
+    if (this.endpoint && this.language) {
+      return this.fetchPointsData();
+    }
+  }
+  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", { class: "GamificationDropdownContainer" }, h("button", { class: `GamificationDropdownButton ${this.isOpen ? 'IsOpen' : ''}`, type: "button", onClick: this.handleDropdownClick, title: typeof this.loyaltyPoints === 'number'
+          ? String(this.loyaltyPoints)
+          : translate('gamificationNoPoints', this.language) }, typeof this.loyaltyPoints === 'number'
+        ? `${Math.floor(this.loyaltyPoints)} XP`
+        : '...', h("span", null, 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" }, h("player-elevate-loyaltycard", { endpoint: this.endpoint, session: this.session, language: this.language, "client-styling-url": this.clientStylingUrl, "client-styling": this.clientStyling })))));
+    }
+  }
+  static get watchers() { return {
+    "translationUrl": ["handleNewTranslations"]
+  }; }
+  static get style() { return gamificationDropdownCss; }
+}, [1, "gamification-dropdown", {
+    "endpoint": [513],
+    "language": [513],
+    "session": [513],
+    "clientStyling": [513, "client-styling"],
+    "clientStylingUrl": [513, "client-styling-url"],
+    "translationUrl": [513, "translation-url"],
+    "isOpen": [32],
+    "isLoading": [32],
+    "stylingAppends": [32],
+    "loyaltyPoints": [32]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["gamification-dropdown", "general-styling-wrapper", "player-elevate-card-data", "player-elevate-loyaltycard"];
+  components.forEach(tagName => { switch (tagName) {
+    case "gamification-dropdown":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, GamificationDropdown$1);
+      }
+      break;
+    case "general-styling-wrapper":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "player-elevate-card-data":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "player-elevate-loyaltycard":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const GamificationDropdown = GamificationDropdown$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { GamificationDropdown, defineCustomElement };

package/dist/components/general-styling-wrapper.js

@@ -0,0 +1,6 @@
+import { G as GeneralStylingWrapper$1, d as defineCustomElement$1 } from './general-styling-wrapper2.js';
+
+const GeneralStylingWrapper = GeneralStylingWrapper$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { GeneralStylingWrapper, defineCustomElement };

package/dist/components/general-styling-wrapper2.js

@@ -0,0 +1,103 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+
+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 GeneralStylingWrapper = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    /**
+     * Client custom styling via inline styles
+     */
+    this.clientStyling = '';
+    /**
+     * Client custom styling via url
+     */
+    this.clientStylingUrl = '';
+    /**
+     * Translation via url
+     */
+    this.translationUrl = '';
+    this.stylingAppends = false;
+    this.setClientStyling = () => {
+      let sheet = document.createElement('style');
+      sheet.innerHTML = this.clientStyling;
+      this.el.prepend(sheet);
+    };
+    this.setClientStylingURL = () => {
+      let url = new URL(this.clientStylingUrl);
+      let cssFile = document.createElement('style');
+      fetch(url.href)
+        .then((res) => res.text())
+        .then((data) => {
+        cssFile.innerHTML = data;
+        setTimeout(() => {
+          this.el.prepend(cssFile);
+        }, 1);
+      })
+        .catch((err) => {
+        console.log('error ', err);
+      });
+    };
+  }
+  componentDidRender() {
+    // start custom styling area
+    if (!this.stylingAppends) {
+      if (this.clientStyling)
+        this.setClientStyling();
+      if (this.clientStylingUrl)
+        this.setClientStylingURL();
+      this.stylingAppends = true;
+    }
+    // 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", { class: "StyleShell" }, h("slot", { name: "mainContent" })));
+  }
+  get el() { return this; }
+  static get style() { return generalStylingWrapperCss; }
+}, [4, "general-styling-wrapper", {
+    "clientStyling": [1, "client-styling"],
+    "clientStylingUrl": [1, "client-styling-url"],
+    "translationUrl": [1, "translation-url"],
+    "targetTranslations": [16]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["general-styling-wrapper"];
+  components.forEach(tagName => { switch (tagName) {
+    case "general-styling-wrapper":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, GeneralStylingWrapper);
+      }
+      break;
+  } });
+}
+
+export { GeneralStylingWrapper as G, defineCustomElement as d };

package/dist/components/index.d.ts

@@ -0,0 +1,26 @@
+/* GamificationDropdown custom elements */
+
+import type { Components, JSX } from "../types/components";
+
+/**
+ * Used to manually set the base path where assets can be found.
+ * If the script is used as "module", it's recommended to use "import.meta.url",
+ * such as "setAssetPath(import.meta.url)". Other options include
+ * "setAssetPath(document.currentScript.src)", or using a bundler's replace plugin to
+ * dynamically set the path at build time, such as "setAssetPath(process.env.ASSET_PATH)".
+ * But do note that this configuration depends on how your script is bundled, or lack of
+ * bundling, and where your assets can be loaded from. Additionally custom bundling
+ * will have to ensure the static assets are copied to its build directory.
+ */
+export declare const setAssetPath: (path: string) => void;
+
+export interface SetPlatformOptions {
+  raf?: (c: FrameRequestCallback) => number;
+  ael?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
+  rel?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
+}
+export declare const setPlatformOptions: (opts: SetPlatformOptions) => void;
+
+export type { Components, JSX };
+
+export * from '../types';

package/dist/components/index.js

@@ -0,0 +1 @@
+export { setAssetPath, setPlatformOptions } from '@stencil/core/internal/client';

package/dist/components/player-elevate-card-data.js

@@ -0,0 +1,6 @@
+import { P as PlayerElevateCardData$1, d as defineCustomElement$1 } from './player-elevate-card-data2.js';
+
+const PlayerElevateCardData = PlayerElevateCardData$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { PlayerElevateCardData, defineCustomElement };