@everymatrix/general-about-us 1.29.0

package/dist/components/general-about-us.js

@@ -0,0 +1,269 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+
+const DEFAULT_LANGUAGE = 'en';
+const SUPPORTED_LANGUAGES = ['ro', 'en', 'fr', 'ar', 'hu', 'hr'];
+const TRANSLATIONS = {
+  en: {
+    error: 'Error',
+    noResults: 'Loading, please wait ...',
+  },
+  hu: {
+    error: 'Error',
+    noResults: 'Loading, please wait ...',
+  },
+  ro: {
+    error: 'Eroare',
+    noResults: 'Loading, please wait ...',
+  },
+  fr: {
+    error: 'Error',
+    noResults: 'Loading, please wait ...',
+  },
+  ar: {
+    error: 'خطأ',
+    noResults: 'Loading, please wait ...',
+  },
+  hr: {
+    error: 'Greška',
+    noResults: 'Učitavanje, molimo pričekajte ...',
+  }
+};
+const translate = (key, customLang) => {
+  const lang = customLang;
+  return TRANSLATIONS[lang !== undefined && SUPPORTED_LANGUAGES.includes(lang) ? lang : DEFAULT_LANGUAGE][key];
+};
+
+function checkDeviceType() {
+  const userAgent = navigator.userAgent.toLowerCase();
+  const width = screen.availWidth;
+  const height = screen.availHeight;
+  if (userAgent.includes('iphone')) {
+    return 'mobile';
+  }
+  if (userAgent.includes('android')) {
+    if (height > width && width < 800) {
+      return 'mobile';
+    }
+    if (width > height && height < 800) {
+      return 'tablet';
+    }
+  }
+  return 'desktop';
+}
+function checkCustomDeviceWidth() {
+  const width = screen.availWidth;
+  if (width < 600) {
+    return 'mobile';
+  }
+  else if (width >= 600 && width < 1100) {
+    return 'tablet';
+  }
+}
+function getDeviceCustom() {
+  const userAgent = navigator.userAgent.toLowerCase();
+  let source = '';
+  source = (userAgent.includes('android') || userAgent.includes('iphone') || userAgent.includes('ipad')) ? checkCustomDeviceWidth() : 'desktop';
+  return source;
+}
+const getDevice = () => {
+  let userAgent = window.navigator.userAgent.toLocaleLowerCase();
+  if (userAgent.includes('android/i'))
+    return 'android';
+  if (userAgent.includes('iphone/i'))
+    return 'iPhone';
+  if (userAgent.includes('ipad/i') || userAgent.includes('ipod/i'))
+    return 'iPad';
+  return 'PC';
+};
+const getDevicePlatform = () => {
+  const device = getDevice();
+  if (device) {
+    if (device === 'PC') {
+      return 'dk';
+    }
+    else if (device === 'iPad' || device === 'iPhone') {
+      return 'mtWeb';
+    }
+    else {
+      return 'mtWeb';
+    }
+  }
+};
+
+const generalAboutUsCss = ":host {\n  display: block;\n  font-family: inherit;\n}\n\np {\n  margin: 0;\n  padding: 0;\n  font-family: inherit;\n}\n\nbutton {\n  font-family: inherit;\n}\n\n.AboutUsError .ErrorInfo {\n  color: var(--emfe-w-color-error, var(--emfe-w-color-red, #ed0909));\n}\n\n.AboutUsWrapper {\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  width: 100%;\n  background-color: var(--emfe-w-casino-color-bg, var(--emfe-w-color-background, #07072A));\n  animation: fadeInAnimation ease 1.5s;\n  animation-iteration-count: 1;\n  animation-fill-mode: forwards;\n}\n\n@keyframes fadeInAnimation {\n  0% {\n    opacity: 0;\n  }\n  100% {\n    opacity: 1;\n  }\n}\n.ItemImage {\n  flex: auto;\n  max-width: 50%;\n  height: 300px;\n  border-radius: 5px;\n}\n\n.ItemDetails {\n  flex: 1 1 0;\n  display: flex;\n  flex-direction: column;\n  justify-content: space-around;\n  border-radius: 5px;\n  margin: 0 20px;\n}\n\n.Title {\n  font-size: 24px;\n  font-weight: 700;\n  -webkit-text-fill-color: transparent;\n  color: var(--emfe-w-casino-typography, var(--emfe-w-color-contrast, #FFFFFF));\n  background: linear-gradient(to top, var(--emfe-w-categories-color-secondary, var(--emfe-w-color-secondary, #FD2839)), var(--emfe-w-categories-color-primary, var(--emfe-w-color-primary, #D0046C)));\n  -webkit-background-clip: text;\n  -webkit-text-fill-color: transparent;\n}\n\n.Description {\n  font-size: 16px;\n  color: var(--emfe-w-casino-typography, var(--emfe-w-color-contrast, #FFFFFF));\n}\n\nbutton {\n  width: 160px;\n  padding: 10px 15px;\n  background: linear-gradient(to top, var(--emfe-w-categories-color-secondary, var(--emfe-w-color-secondary, #FD2839)), var(--emfe-w-categories-color-primary, var(--emfe-w-color-primary, #D0046C)));\n  color: var(--emfe-w-button-typography, var(--emfe-w-color-white, #FFFFFF));\n  font-size: 16px;\n  border: 2px solid var(--emfe-w-casino-color-primary, var(--emfe-w-color-primary, #D0046C));\n  border-radius: 5px;\n  line-height: 24px;\n  transition: all 1s;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  cursor: pointer;\n}\nbutton:hover {\n  background: linear-gradient(to bottom, var(--emfe-w-categories-color-secondary, var(--emfe-w-color-secondary, #FD2839)), var(--emfe-w-categories-color-primary, var(--emfe-w-color-primary, #D0046C)));\n  color: var(--emfe-w-button-typography, var(--emfe-w-color-white, #FFFFFF));\n  transition: all 0.5s;\n  transform: translateY(-10px);\n}\nbutton button::after {\n  content: \"\";\n  display: block;\n  background-color: var(--emfe-w-button-typography, var(--emfe-w-color-white, #FFFFFF));\n  mask-image: url(\"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yMS44ODMgMTJsLTcuNTI3IDYuMjM1LjY0NC43NjUgOS03LjUyMS05LTcuNDc5LS42NDUuNzY0IDcuNTI5IDYuMjM2aC0yMS44ODR2MWgyMS44ODN6Ii8+PC9zdmc+\");\n  width: 24px;\n  height: 24px;\n  margin: 0 10px;\n}\n\n@container (max-width: 475px) {\n  .AboutUsWrapper {\n    display: flex;\n    flex-direction: column;\n    justify-content: space-between;\n    flex-wrap: wrap;\n    width: 100%;\n    gap: 20px;\n    padding-bottom: 20px;\n    background-color: var(--emfe-w-casino-color-bg, var(--emfe-w-color-background, #07072A));\n    animation: fadeInAnimation ease 1.5s;\n    animation-iteration-count: 1;\n    animation-fill-mode: forwards;\n  }\n\n  .ItemImage {\n    flex: auto;\n    width: 100%;\n    max-width: unset;\n    flex-grow: 1;\n  }\n\n  .ItemDetails {\n    flex: 1 1 0;\n    display: flex;\n    flex-direction: column;\n    justify-content: space-around;\n    align-items: center;\n    border-radius: 5px;\n    gap: 20px;\n    margin: 0 20px;\n  }\n\n  .Description {\n    text-align: center;\n  }\n}";
+
+const GeneralAboutUs$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    /**
+     * Language of the widget
+     */
+    this.language = 'en';
+    /**
+     * User roles
+     */
+    this.userRoles = 'everyone';
+    /**
+     * CMS Endpoint stage
+     */
+    this.cmsEnv = 'stage';
+    /**
+     * Client custom styling via inline style
+    */
+    this.clientStyling = '';
+    /**
+     * Client custom styling via url
+     */
+    this.clientStylingUrl = '';
+    this.hasErrors = false;
+    this.isLoading = true;
+    this.limitStylingAppends = false;
+    this.device = '';
+    this.handleClick = (url, target, location, isExternal) => {
+      window.postMessage({ type: 'AboutUsClicked', buttonUrl: url, targetType: target, locations: location, externalLink: isExternal || false }, window.location.href);
+      // @ts-ignore Analytics event
+      if (typeof gtag == 'function') {
+        // @ts-ignore
+        gtag('event', 'GeneralAboutUs', {
+          'context': 'AboutUsContent'
+        });
+      }
+    };
+    this.setImage = (image) => {
+      let source = '';
+      this.device = checkDeviceType();
+      switch (this.device) {
+        case 'mobile':
+          source = image.imageMobile;
+          break;
+        case 'tablet':
+          source = image.imageTablet;
+          break;
+        case 'desktop':
+          source = image.imageDesktop;
+          break;
+      }
+      return source;
+    };
+    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);
+      });
+    };
+  }
+  watchEndpoint(newValue, oldValue) {
+    if (newValue && newValue != oldValue && this.cmsEndpoint) {
+      this.getAboutUs();
+    }
+  }
+  componentWillLoad() {
+    if (this.cmsEndpoint && this.language) {
+      return this.getAboutUs();
+    }
+  }
+  componentDidLoad() {
+    this.device = getDeviceCustom();
+  }
+  getAboutUs() {
+    let url = new URL(`${this.cmsEndpoint}/${this.language}/homepage`);
+    url.searchParams.append('env', this.cmsEnv);
+    url.searchParams.append('userRoles', this.userRoles);
+    url.searchParams.append('device', getDevicePlatform());
+    return new Promise((resolve, reject) => {
+      this.isLoading = true;
+      fetch(url.href)
+        .then((res) => res.json())
+        .then((aboutUsContent) => {
+        const keysToKeep = ['title', 'description', 'images', 'button', 'externalLink', 'targetType', 'locations'];
+        const aboutUsArrContent = Object.entries(aboutUsContent)
+          .filter(([key]) => keysToKeep.includes(key))
+          .reduce((acc, [key, value]) => {
+          acc[key] = value;
+          return acc;
+        }, {});
+        this.aboutUsData = aboutUsArrContent;
+        resolve(aboutUsArrContent);
+      }).catch((err) => {
+        console.error(err);
+        this.hasErrors = true;
+        reject(err);
+      }).finally(() => {
+        this.isLoading = false;
+      });
+    });
+  }
+  componentDidRender() {
+    // start custom styling area
+    if (!this.limitStylingAppends && this.stylingContainer) {
+      if (this.clientStyling)
+        this.setClientStyling();
+      if (this.clientStylingUrl)
+        this.setClientStylingURL();
+      this.limitStylingAppends = true;
+    }
+  }
+  // end custom styling area
+  render() {
+    var _a, _b, _c, _d;
+    if (this.hasErrors) {
+      return (h("div", { class: "AboutUsError" }, h("div", { class: "ErrorInfo" }, translate('error', this.language))));
+    }
+    if (!this.isLoading) {
+      return (h("div", { ref: el => this.stylingContainer = el }, h("div", { class: "AboutUsWrapper" }, h("div", { class: "ItemImage", style: { background: `url(${this.setImage(this.aboutUsData.images)}) no-repeat center center / cover` } }), h("div", { class: "ItemDetails" }, h("div", { class: "Title", innerHTML: (_a = this.aboutUsData) === null || _a === void 0 ? void 0 : _a.title }), h("div", { class: "Description", innerHTML: (_b = this.aboutUsData) === null || _b === void 0 ? void 0 : _b.description }), h("button", { class: "Button", onClick: () => {
+          var _a, _b, _c, _d, _e;
+          return this.handleClick((_b = (_a = this.aboutUsData) === null || _a === void 0 ? void 0 : _a.button) === null || _b === void 0 ? void 0 : _b.buttonUrl, (_c = this.aboutUsData) === null || _c === void 0 ? void 0 : _c.targetType, (_d = this.aboutUsData) === null || _d === void 0 ? void 0 : _d.locations, (_e = this.aboutUsData) === null || _e === void 0 ? void 0 : _e.externalLink);
+        } }, (_d = (_c = this.aboutUsData) === null || _c === void 0 ? void 0 : _c.button) === null || _d === void 0 ? void 0 : _d.buttonText)))));
+    }
+  }
+  static get watchers() { return {
+    "cmsEndpoint": ["watchEndpoint"],
+    "language": ["watchEndpoint"],
+    "userRoles": ["watchEndpoint"],
+    "device": ["watchEndpoint"]
+  }; }
+  static get style() { return generalAboutUsCss; }
+}, [1, "general-about-us", {
+    "cmsEndpoint": [513, "cms-endpoint"],
+    "language": [513],
+    "userRoles": [513, "user-roles"],
+    "cmsEnv": [513, "cms-env"],
+    "clientStyling": [513, "client-styling"],
+    "clientStylingUrl": [513, "client-styling-url"],
+    "hasErrors": [32],
+    "isLoading": [32],
+    "limitStylingAppends": [32],
+    "device": [32]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["general-about-us"];
+  components.forEach(tagName => { switch (tagName) {
+    case "general-about-us":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, GeneralAboutUs$1);
+      }
+      break;
+  } });
+}
+
+const GeneralAboutUs = GeneralAboutUs$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { GeneralAboutUs, defineCustomElement };

package/dist/components/index.d.ts

@@ -0,0 +1,26 @@
+/* GeneralAboutUs 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/esm/general-about-us.entry.js

@@ -0,0 +1,240 @@
+import { r as registerInstance, h } from './index-b262ca21.js';
+
+const DEFAULT_LANGUAGE = 'en';
+const SUPPORTED_LANGUAGES = ['ro', 'en', 'fr', 'ar', 'hu', 'hr'];
+const TRANSLATIONS = {
+  en: {
+    error: 'Error',
+    noResults: 'Loading, please wait ...',
+  },
+  hu: {
+    error: 'Error',
+    noResults: 'Loading, please wait ...',
+  },
+  ro: {
+    error: 'Eroare',
+    noResults: 'Loading, please wait ...',
+  },
+  fr: {
+    error: 'Error',
+    noResults: 'Loading, please wait ...',
+  },
+  ar: {
+    error: 'خطأ',
+    noResults: 'Loading, please wait ...',
+  },
+  hr: {
+    error: 'Greška',
+    noResults: 'Učitavanje, molimo pričekajte ...',
+  }
+};
+const translate = (key, customLang) => {
+  const lang = customLang;
+  return TRANSLATIONS[lang !== undefined && SUPPORTED_LANGUAGES.includes(lang) ? lang : DEFAULT_LANGUAGE][key];
+};
+
+function checkDeviceType() {
+  const userAgent = navigator.userAgent.toLowerCase();
+  const width = screen.availWidth;
+  const height = screen.availHeight;
+  if (userAgent.includes('iphone')) {
+    return 'mobile';
+  }
+  if (userAgent.includes('android')) {
+    if (height > width && width < 800) {
+      return 'mobile';
+    }
+    if (width > height && height < 800) {
+      return 'tablet';
+    }
+  }
+  return 'desktop';
+}
+function checkCustomDeviceWidth() {
+  const width = screen.availWidth;
+  if (width < 600) {
+    return 'mobile';
+  }
+  else if (width >= 600 && width < 1100) {
+    return 'tablet';
+  }
+}
+function getDeviceCustom() {
+  const userAgent = navigator.userAgent.toLowerCase();
+  let source = '';
+  source = (userAgent.includes('android') || userAgent.includes('iphone') || userAgent.includes('ipad')) ? checkCustomDeviceWidth() : 'desktop';
+  return source;
+}
+const getDevice = () => {
+  let userAgent = window.navigator.userAgent.toLocaleLowerCase();
+  if (userAgent.includes('android/i'))
+    return 'android';
+  if (userAgent.includes('iphone/i'))
+    return 'iPhone';
+  if (userAgent.includes('ipad/i') || userAgent.includes('ipod/i'))
+    return 'iPad';
+  return 'PC';
+};
+const getDevicePlatform = () => {
+  const device = getDevice();
+  if (device) {
+    if (device === 'PC') {
+      return 'dk';
+    }
+    else if (device === 'iPad' || device === 'iPhone') {
+      return 'mtWeb';
+    }
+    else {
+      return 'mtWeb';
+    }
+  }
+};
+
+const generalAboutUsCss = ":host {\n  display: block;\n  font-family: inherit;\n}\n\np {\n  margin: 0;\n  padding: 0;\n  font-family: inherit;\n}\n\nbutton {\n  font-family: inherit;\n}\n\n.AboutUsError .ErrorInfo {\n  color: var(--emfe-w-color-error, var(--emfe-w-color-red, #ed0909));\n}\n\n.AboutUsWrapper {\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  width: 100%;\n  background-color: var(--emfe-w-casino-color-bg, var(--emfe-w-color-background, #07072A));\n  animation: fadeInAnimation ease 1.5s;\n  animation-iteration-count: 1;\n  animation-fill-mode: forwards;\n}\n\n@keyframes fadeInAnimation {\n  0% {\n    opacity: 0;\n  }\n  100% {\n    opacity: 1;\n  }\n}\n.ItemImage {\n  flex: auto;\n  max-width: 50%;\n  height: 300px;\n  border-radius: 5px;\n}\n\n.ItemDetails {\n  flex: 1 1 0;\n  display: flex;\n  flex-direction: column;\n  justify-content: space-around;\n  border-radius: 5px;\n  margin: 0 20px;\n}\n\n.Title {\n  font-size: 24px;\n  font-weight: 700;\n  -webkit-text-fill-color: transparent;\n  color: var(--emfe-w-casino-typography, var(--emfe-w-color-contrast, #FFFFFF));\n  background: linear-gradient(to top, var(--emfe-w-categories-color-secondary, var(--emfe-w-color-secondary, #FD2839)), var(--emfe-w-categories-color-primary, var(--emfe-w-color-primary, #D0046C)));\n  -webkit-background-clip: text;\n  -webkit-text-fill-color: transparent;\n}\n\n.Description {\n  font-size: 16px;\n  color: var(--emfe-w-casino-typography, var(--emfe-w-color-contrast, #FFFFFF));\n}\n\nbutton {\n  width: 160px;\n  padding: 10px 15px;\n  background: linear-gradient(to top, var(--emfe-w-categories-color-secondary, var(--emfe-w-color-secondary, #FD2839)), var(--emfe-w-categories-color-primary, var(--emfe-w-color-primary, #D0046C)));\n  color: var(--emfe-w-button-typography, var(--emfe-w-color-white, #FFFFFF));\n  font-size: 16px;\n  border: 2px solid var(--emfe-w-casino-color-primary, var(--emfe-w-color-primary, #D0046C));\n  border-radius: 5px;\n  line-height: 24px;\n  transition: all 1s;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  cursor: pointer;\n}\nbutton:hover {\n  background: linear-gradient(to bottom, var(--emfe-w-categories-color-secondary, var(--emfe-w-color-secondary, #FD2839)), var(--emfe-w-categories-color-primary, var(--emfe-w-color-primary, #D0046C)));\n  color: var(--emfe-w-button-typography, var(--emfe-w-color-white, #FFFFFF));\n  transition: all 0.5s;\n  transform: translateY(-10px);\n}\nbutton button::after {\n  content: \"\";\n  display: block;\n  background-color: var(--emfe-w-button-typography, var(--emfe-w-color-white, #FFFFFF));\n  mask-image: url(\"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yMS44ODMgMTJsLTcuNTI3IDYuMjM1LjY0NC43NjUgOS03LjUyMS05LTcuNDc5LS42NDUuNzY0IDcuNTI5IDYuMjM2aC0yMS44ODR2MWgyMS44ODN6Ii8+PC9zdmc+\");\n  width: 24px;\n  height: 24px;\n  margin: 0 10px;\n}\n\n@container (max-width: 475px) {\n  .AboutUsWrapper {\n    display: flex;\n    flex-direction: column;\n    justify-content: space-between;\n    flex-wrap: wrap;\n    width: 100%;\n    gap: 20px;\n    padding-bottom: 20px;\n    background-color: var(--emfe-w-casino-color-bg, var(--emfe-w-color-background, #07072A));\n    animation: fadeInAnimation ease 1.5s;\n    animation-iteration-count: 1;\n    animation-fill-mode: forwards;\n  }\n\n  .ItemImage {\n    flex: auto;\n    width: 100%;\n    max-width: unset;\n    flex-grow: 1;\n  }\n\n  .ItemDetails {\n    flex: 1 1 0;\n    display: flex;\n    flex-direction: column;\n    justify-content: space-around;\n    align-items: center;\n    border-radius: 5px;\n    gap: 20px;\n    margin: 0 20px;\n  }\n\n  .Description {\n    text-align: center;\n  }\n}";
+
+const GeneralAboutUs = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    /**
+     * Language of the widget
+     */
+    this.language = 'en';
+    /**
+     * User roles
+     */
+    this.userRoles = 'everyone';
+    /**
+     * CMS Endpoint stage
+     */
+    this.cmsEnv = 'stage';
+    /**
+     * Client custom styling via inline style
+    */
+    this.clientStyling = '';
+    /**
+     * Client custom styling via url
+     */
+    this.clientStylingUrl = '';
+    this.hasErrors = false;
+    this.isLoading = true;
+    this.limitStylingAppends = false;
+    this.device = '';
+    this.handleClick = (url, target, location, isExternal) => {
+      window.postMessage({ type: 'AboutUsClicked', buttonUrl: url, targetType: target, locations: location, externalLink: isExternal || false }, window.location.href);
+      // @ts-ignore Analytics event
+      if (typeof gtag == 'function') {
+        // @ts-ignore
+        gtag('event', 'GeneralAboutUs', {
+          'context': 'AboutUsContent'
+        });
+      }
+    };
+    this.setImage = (image) => {
+      let source = '';
+      this.device = checkDeviceType();
+      switch (this.device) {
+        case 'mobile':
+          source = image.imageMobile;
+          break;
+        case 'tablet':
+          source = image.imageTablet;
+          break;
+        case 'desktop':
+          source = image.imageDesktop;
+          break;
+      }
+      return source;
+    };
+    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);
+      });
+    };
+  }
+  watchEndpoint(newValue, oldValue) {
+    if (newValue && newValue != oldValue && this.cmsEndpoint) {
+      this.getAboutUs();
+    }
+  }
+  componentWillLoad() {
+    if (this.cmsEndpoint && this.language) {
+      return this.getAboutUs();
+    }
+  }
+  componentDidLoad() {
+    this.device = getDeviceCustom();
+  }
+  getAboutUs() {
+    let url = new URL(`${this.cmsEndpoint}/${this.language}/homepage`);
+    url.searchParams.append('env', this.cmsEnv);
+    url.searchParams.append('userRoles', this.userRoles);
+    url.searchParams.append('device', getDevicePlatform());
+    return new Promise((resolve, reject) => {
+      this.isLoading = true;
+      fetch(url.href)
+        .then((res) => res.json())
+        .then((aboutUsContent) => {
+        const keysToKeep = ['title', 'description', 'images', 'button', 'externalLink', 'targetType', 'locations'];
+        const aboutUsArrContent = Object.entries(aboutUsContent)
+          .filter(([key]) => keysToKeep.includes(key))
+          .reduce((acc, [key, value]) => {
+          acc[key] = value;
+          return acc;
+        }, {});
+        this.aboutUsData = aboutUsArrContent;
+        resolve(aboutUsArrContent);
+      }).catch((err) => {
+        console.error(err);
+        this.hasErrors = true;
+        reject(err);
+      }).finally(() => {
+        this.isLoading = false;
+      });
+    });
+  }
+  componentDidRender() {
+    // start custom styling area
+    if (!this.limitStylingAppends && this.stylingContainer) {
+      if (this.clientStyling)
+        this.setClientStyling();
+      if (this.clientStylingUrl)
+        this.setClientStylingURL();
+      this.limitStylingAppends = true;
+    }
+  }
+  // end custom styling area
+  render() {
+    var _a, _b, _c, _d;
+    if (this.hasErrors) {
+      return (h("div", { class: "AboutUsError" }, h("div", { class: "ErrorInfo" }, translate('error', this.language))));
+    }
+    if (!this.isLoading) {
+      return (h("div", { ref: el => this.stylingContainer = el }, h("div", { class: "AboutUsWrapper" }, h("div", { class: "ItemImage", style: { background: `url(${this.setImage(this.aboutUsData.images)}) no-repeat center center / cover` } }), h("div", { class: "ItemDetails" }, h("div", { class: "Title", innerHTML: (_a = this.aboutUsData) === null || _a === void 0 ? void 0 : _a.title }), h("div", { class: "Description", innerHTML: (_b = this.aboutUsData) === null || _b === void 0 ? void 0 : _b.description }), h("button", { class: "Button", onClick: () => {
+          var _a, _b, _c, _d, _e;
+          return this.handleClick((_b = (_a = this.aboutUsData) === null || _a === void 0 ? void 0 : _a.button) === null || _b === void 0 ? void 0 : _b.buttonUrl, (_c = this.aboutUsData) === null || _c === void 0 ? void 0 : _c.targetType, (_d = this.aboutUsData) === null || _d === void 0 ? void 0 : _d.locations, (_e = this.aboutUsData) === null || _e === void 0 ? void 0 : _e.externalLink);
+        } }, (_d = (_c = this.aboutUsData) === null || _c === void 0 ? void 0 : _c.button) === null || _d === void 0 ? void 0 : _d.buttonText)))));
+    }
+  }
+  static get watchers() { return {
+    "cmsEndpoint": ["watchEndpoint"],
+    "language": ["watchEndpoint"],
+    "userRoles": ["watchEndpoint"],
+    "device": ["watchEndpoint"]
+  }; }
+};
+GeneralAboutUs.style = generalAboutUsCss;
+
+export { GeneralAboutUs as general_about_us };

package/dist/esm/general-about-us.js

@@ -0,0 +1,17 @@
+import { p as promiseResolve, b as bootstrapLazy } from './index-b262ca21.js';
+
+/*
+ Stencil Client Patch Browser v2.15.2 | MIT Licensed | https://stenciljs.com
+ */
+const patchBrowser = () => {
+    const importMeta = import.meta.url;
+    const opts = {};
+    if (importMeta !== '') {
+        opts.resourcesUrl = new URL('.', importMeta).href;
+    }
+    return promiseResolve(opts);
+};
+
+patchBrowser().then(options => {
+  return bootstrapLazy([["general-about-us",[[1,"general-about-us",{"cmsEndpoint":[513,"cms-endpoint"],"language":[513],"userRoles":[513,"user-roles"],"cmsEnv":[513,"cms-env"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"hasErrors":[32],"isLoading":[32],"limitStylingAppends":[32],"device":[32]}]]]], options);
+});