@everymatrix/general-about-us 1.44.0 → 1.45.2

package/dist/components/general-about-us.d.ts

@@ -1,11 +0,0 @@
-import type { Components, JSX } from "../types/components";
-
-interface GeneralAboutUs extends Components.GeneralAboutUs, HTMLElement {}
-export const GeneralAboutUs: {
-  prototype: GeneralAboutUs;
-  new (): GeneralAboutUs;
-};
-/**
- * Used to define this component and all nested components recursively.
- */
-export const defineCustomElement: () => void;

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

@@ -1,288 +0,0 @@
-import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
-
-const DEFAULT_LANGUAGE = 'en';
-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) && (lang in TRANSLATIONS) ? 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 chevronSvg = 'data:image/svg+xml;base64,PCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4KDTwhLS0gVXBsb2FkZWQgdG86IFNWRyBSZXBvLCB3d3cuc3ZncmVwby5jb20sIFRyYW5zZm9ybWVkIGJ5OiBTVkcgUmVwbyBNaXhlciBUb29scyAtLT4KPHN2ZyBoZWlnaHQ9IjY0cHgiIHdpZHRoPSI2NHB4IiB2ZXJzaW9uPSIxLjEiIGlkPSJDYXBhXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHZpZXdCb3g9IjAgMCAxODUuMzQzIDE4NS4zNDMiIHhtbDpzcGFjZT0icHJlc2VydmUiIGZpbGw9IiNENUYzREYiIHN0cm9rZT0iI0Q1RjNERiI+Cg08ZyBpZD0iU1ZHUmVwb19iZ0NhcnJpZXIiIHN0cm9rZS13aWR0aD0iMCIvPgoNPGcgaWQ9IlNWR1JlcG9fdHJhY2VyQ2FycmllciIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+Cg08ZyBpZD0iU1ZHUmVwb19pY29uQ2FycmllciI+IDxnPiA8Zz4gPHBhdGggc3R5bGU9ImZpbGw6I2VjZjlmMDsiIGQ9Ik01MS43MDcsMTg1LjM0M2MtMi43NDEsMC01LjQ5My0xLjA0NC03LjU5My0zLjE0OWMtNC4xOTQtNC4xOTQtNC4xOTQtMTAuOTgxLDAtMTUuMTc1IGw3NC4zNTItNzQuMzQ3TDQ0LjExNCwxOC4zMmMtNC4xOTQtNC4xOTQtNC4xOTQtMTAuOTg3LDAtMTUuMTc1YzQuMTk0LTQuMTk0LDEwLjk4Ny00LjE5NCwxNS4xOCwwbDgxLjkzNCw4MS45MzQgYzQuMTk0LDQuMTk0LDQuMTk0LDEwLjk4NywwLDE1LjE3NWwtODEuOTM0LDgxLjkzOUM1Ny4yMDEsMTg0LjI5Myw1NC40NTQsMTg1LjM0Myw1MS43MDcsMTg1LjM0M3oiLz4gPC9nPiA8L2c+IDwvZz4KDTwvc3ZnPg==';
-
-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(--emw--color-error, #ed0909);\n}\n\n.AboutUsWrapper {\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  background-color: var(--emw--color-background, #000000);\n  width: 100%;\n  border-radius: var(--emw--border-radius-large, 15px);\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  position: relative;\n  width: 100%;\n  max-width: 100%;\n  height: auto;\n  border-radius: var(--emw--border-radius-large, 20px);\n  background: var(--emw--color-background, black);\n}\n.ItemImage .ForegroundImage {\n  z-index: 3;\n  pointer-events: none;\n  opacity: 1;\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  transition: opacity 0.5s ease, filter 0.5s ease;\n  border-radius: var(--emw--border-radius-large, 20px);\n}\n.ItemImage .BackgroundImage {\n  position: absolute;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  transition: opacity 0.5s ease, filter 0.5s ease;\n  border-radius: var(--emw--border-radius-large, 20px);\n  z-index: 2;\n  top: 20px;\n  filter: blur(16px);\n  opacity: 0.7;\n  transform: scale(1.01);\n}\n.ItemImage .ItemDetails {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: 16px;\n  width: 60%;\n  padding: 40px;\n}\n.ItemImage .ItemDetails > div {\n  position: relative;\n  height: auto;\n  border-radius: var(--emw--border-radius-medium, 5px);\n  z-index: 10;\n  overflow: hidden;\n}\n.ItemImage .Title {\n  padding: 20px 0px 10px 0px;\n  font-size: var(--emw--font-size-x-large, 38px);\n  font-weight: var(--emw--font-weight-bold, 700);\n  color: var(--emw--color-typography, #ffff);\n}\n.ItemImage .Title .FirstWord {\n  text-transform: uppercase;\n  letter-spacing: 1px;\n  background: var(--emw--color-primary, #1EC450);\n  -webkit-background-clip: text;\n  -webkit-text-fill-color: transparent;\n}\n.ItemImage .Description {\n  font-size: var(--emw--font-size-small-plus, 16px);\n  font-weight: var(--emw--font-weight-normal, 400);\n  color: var(--emw--color-gray-100, #D1D1D2);\n}\n.ItemImage button {\n  position: relative;\n  width: auto;\n  padding: 10px 24px;\n  color: var(--emw--button-text-color, #ffff);\n  font-size: var(--emw--font-size-small, 16px);\n  border: var(--emw--button-border, 3px solid) var(--emw--button-border-color, #063B17);\n  border-radius: var(--emw--button-border-radius, 50px);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  cursor: pointer;\n  z-index: 20;\n  animation: ButtonEffect 4s linear infinite;\n  background-image: linear-gradient(to right, var(--emw--color-primary, #22B04E), color-mix(in srgb, var(--emw--color-primary, #22B04E), black 30%), var(--emw--color-primary, #22B04E));\n  background-size: 300% 100%;\n}\n.ItemImage button:hover {\n  opacity: 0.8;\n}\n.ItemImage button img.Chevron {\n  position: relative;\n  height: var(--emw--size-standard, 12px);\n  margin-left: var(--emw--spacing-small-minus, 6px);\n}\n@keyframes ButtonEffect {\n  0% {\n    background-position: 0% 50%;\n  }\n  33% {\n    background-position: 100% 50%;\n  }\n  66% {\n    background-position: 200% 50%;\n  }\n  100% {\n    background-position: 300% 50%;\n  }\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    gap: var(--emw--spacing-small-minus, 10px);\n    max-width: 100%;\n    background-color: var(--emw--color-background, #000000);\n    animation: fadeInAnimation ease 1.5s;\n    animation-iteration-count: 1;\n    animation-fill-mode: forwards;\n  }\n  .AboutUsWrapper .ItemDetails {\n    padding: 30px;\n  }\n  .AboutUsWrapper .ItemDetails .Title {\n    font-size: var(--emw--font-size-large, 28px);\n    padding: 0;\n  }\n  .AboutUsWrapper .ItemDetails .Button {\n    font-size: var(--emw--font-size-small, 14px);\n    padding: 8px 20px;\n  }\n  .AboutUsWrapper .ItemDetails > div {\n    border-radius: var(--emw--border-radius-medium, 5px);\n    gap: var(--emw--spacing-2x-small, 4px);\n  }\n  .AboutUsWrapper .Description {\n    text-align: left;\n    font-size: var(--emw--font-size-small, 14px);\n    font-weight: var(--emw--font-weight-normal, 400);\n  }\n  .AboutUsWrapper button {\n    padding-bottom: 10px;\n    line-height: 15px;\n    padding: 10px;\n  }\n}\n@container (max-width: 800px) {\n  .Title {\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\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: 'NavigateTo', path: url, target: 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);
-      });
-    };
-    // end custom styling area
-    this.formatTitle = (title, language) => {
-      let firstWord, restOfTitle;
-      // Check for common languages that do not use space - here: Chinese, Japanese, Thai
-      if (['zh', 'ja', 'th'].includes(language)) {
-        firstWord = title.substring(0, 1);
-        restOfTitle = title.substring(1);
-      }
-      else {
-        const words = title.split(' ');
-        firstWord = words.shift();
-        restOfTitle = words.join(' ');
-      }
-      return h("div", { class: "Title" }, h("span", { class: "FirstWord" }, firstWord, " "), h("span", null, restOfTitle));
-    };
-  }
-  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;
-    }
-  }
-  render() {
-    var _a, _b, _c, _d, _e;
-    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" }, h("div", { class: "ForegroundImage", style: { background: `linear-gradient(to left, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0.6) 100%),
-                              linear-gradient(to bottom left, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 1) 100%),
-                              linear-gradient(to bottom, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, 0.6) 100%),
-                              url(${this.setImage((_a = this.aboutUsData) === null || _a === void 0 ? void 0 : _a.images)}) no-repeat center center / cover` } }), h("img", { class: "BackgroundImage", src: this.setImage(this.aboutUsData.images), alt: "image" }), h("div", { class: "ItemDetails" }, this.formatTitle((_b = this.aboutUsData) === null || _b === void 0 ? void 0 : _b.title, this.language), h("div", { class: "Description", innerHTML: (_c = this.aboutUsData) === null || _c === void 0 ? void 0 : _c.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);
-        } }, (_e = (_d = this.aboutUsData) === null || _d === void 0 ? void 0 : _d.button) === null || _e === void 0 ? void 0 :
-        _e.buttonText, h("img", { src: chevronSvg, alt: "right chevron", class: "Chevron" })))))));
-    }
-  }
-  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

@@ -1,26 +0,0 @@
-/* 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

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