@everymatrix/general-about-us 1.0.69

package/dist/cjs/index.cjs.js

@@ -0,0 +1,2 @@
+'use strict';
+

package/dist/cjs/loader.cjs.js

@@ -0,0 +1,15 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-f16005fe.js');
+const appGlobals = require('./app-globals-3a1e7e63.js');
+
+const defineCustomElements = async (win, options) => {
+  if (typeof window === 'undefined') return undefined;
+  await appGlobals.globalScripts();
+  return index.bootstrapLazy([["general-about-us.cjs",[[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]},null,{"cmsEndpoint":["watchEndpoint"],"language":["watchEndpoint"],"userRoles":["watchEndpoint"],"device":["watchEndpoint"]}]]]], options);
+};
+
+exports.setNonce = index.setNonce;
+exports.defineCustomElements = defineCustomElements;

package/dist/collection/collection-manifest.json

@@ -0,0 +1,12 @@
+{
+  "entries": [
+    "components/general-about-us/general-about-us.js"
+  ],
+  "compiler": {
+    "name": "@stencil/core",
+    "version": "4.20.0",
+    "typescriptVersion": "5.5.3"
+  },
+  "collections": [],
+  "bundles": []
+}

package/dist/collection/components/general-about-us/general-about-us.css

@@ -0,0 +1,184 @@
+:host {
+  display: block;
+  font-family: inherit;
+}
+
+p {
+  margin: 0;
+  padding: 0;
+  font-family: inherit;
+}
+
+button {
+  font-family: inherit;
+}
+
+.AboutUsError .ErrorInfo {
+  color: var(--emw--color-error, #ed0909);
+}
+
+.AboutUsWrapper {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  background-color: var(--emw--color-background, #000000);
+  width: 100%;
+  border-radius: var(--emw--border-radius-large, 15px);
+  animation: fadeInAnimation ease 1.5s;
+  animation-iteration-count: 1;
+  animation-fill-mode: forwards;
+}
+
+@keyframes fadeInAnimation {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+.ItemImage {
+  position: relative;
+  width: 100%;
+  max-width: 100%;
+  height: 300px;
+  border-radius: var(--emw--border-radius-large, 20px);
+  background: var(--emw--color-background, black);
+}
+.ItemImage .ForegroundImage {
+  z-index: 3;
+  pointer-events: none;
+  opacity: 1;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  transition: opacity 0.5s ease, filter 0.5s ease;
+  border-radius: var(--emw--border-radius-large, 20px);
+}
+.ItemImage .BackgroundImage {
+  position: absolute;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  transition: opacity 0.5s ease, filter 0.5s ease;
+  border-radius: var(--emw--border-radius-large, 20px);
+  z-index: 2;
+  top: 20px;
+  filter: blur(16px);
+  opacity: 0.5;
+  transform: scale(1.01);
+}
+.ItemImage .ItemDetails > div {
+  position: relative;
+  height: auto;
+  max-width: 70%;
+  display: flex;
+  border-radius: var(--emw--border-radius-medium, 5px);
+  margin: 0 20px;
+  padding: 24px 20px;
+  z-index: 10;
+  overflow: hidden;
+  align-items: center;
+}
+.ItemImage .Title {
+  font-size: var(--emw--font-size-2x-large, 32px);
+  font-weight: var(--emw--font-weight-bold, 700);
+  color: var(--emw--color-typography, #D5F3DF);
+}
+.ItemImage .Title .FirstWord {
+  font-size: var(--emw--font-size-2x-large, 36px);
+  text-transform: uppercase;
+  letter-spacing: 1px;
+  background: var(--emw--color-primary, #1EC450);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+.ItemImage .Description {
+  font-size: var(--emw--font-size-small-plus, 16px);
+  font-weight: var(--emw--font-weight-normal, 400);
+  color: var(--emw--color-typography, #D5F3DF);
+}
+.ItemImage button {
+  position: relative;
+  width: 160px;
+  padding: 10px 15px;
+  color: var(--emw--button-text-color, #D5F3DF);
+  font-size: var(--emw--font-size-large, 20px);
+  border: var(--emw--button-border, 3px solid) var(--emw--button-border-color, #063B17);
+  border-radius: var(--emw--button-border-radius, 50px);
+  line-height: 24px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  z-index: 20;
+  margin-left: 32px;
+  animation: ButtonEffect 4s linear infinite;
+  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));
+  background-size: 300% 100%;
+}
+.ItemImage button:hover {
+  opacity: 0.8;
+}
+.ItemImage button img.Chevron {
+  position: relative;
+  height: var(--emw--size-standard, 16px);
+  margin-left: var(--emw--spacing-small-minus, 10px);
+}
+@keyframes ButtonEffect {
+  0% {
+    background-position: 0% 50%;
+  }
+  33% {
+    background-position: 100% 50%;
+  }
+  66% {
+    background-position: 200% 50%;
+  }
+  100% {
+    background-position: 300% 50%;
+  }
+}
+
+@container (max-width: 475px) {
+  .AboutUsWrapper {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    gap: var(--emw--spacing-small-minus, 10px);
+    max-width: 100%;
+    background-color: var(--emw--color-background, #000000);
+    animation: fadeInAnimation ease 1.5s;
+    animation-iteration-count: 1;
+    animation-fill-mode: forwards;
+  }
+  .AboutUsWrapper .ItemImage {
+    flex: auto;
+    width: 100%;
+    flex-grow: 1;
+    margin: 0;
+  }
+  .AboutUsWrapper .ItemDetails > div {
+    flex: 1 1 0;
+    display: flex;
+    border-radius: var(--emw--border-radius-medium, 5px);
+    gap: var(--emw--spacing-2x-small, 4px);
+    padding: 20px 10px;
+    align-items: center;
+  }
+  .AboutUsWrapper .Description {
+    text-align: left;
+    font-size: var(--emw--font-size-small, 14px);
+    font-weight: var(--emw--font-weight-normal, 400);
+  }
+  .AboutUsWrapper button {
+    padding-bottom: 10px;
+    line-height: 15px;
+    padding: 10px;
+  }
+}

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

@@ -0,0 +1,290 @@
+import { h } from "@stencil/core";
+import { translate } from "../../utils/locale.utils";
+import { getDeviceCustom, checkDeviceType, getDevicePlatform } from "../../utils/utils";
+import chevronRight from "../../utils/chevron.svg";
+export class GeneralAboutUs {
+    constructor() {
+        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));
+        };
+        this.cmsEndpoint = undefined;
+        this.language = 'en';
+        this.userRoles = 'everyone';
+        this.cmsEnv = 'stage';
+        this.clientStyling = '';
+        this.clientStylingUrl = '';
+        this.hasErrors = false;
+        this.isLoading = true;
+        this.limitStylingAppends = false;
+        this.device = '';
+    }
+    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: chevronRight, alt: "right chevron", class: "Chevron" })))))));
+        }
+    }
+    static get is() { return "general-about-us"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["general-about-us.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["general-about-us.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "cmsEndpoint": {
+                "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": "cms-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'"
+            },
+            "userRoles": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "User roles"
+                },
+                "attribute": "user-roles",
+                "reflect": true,
+                "defaultValue": "'everyone'"
+            },
+            "cmsEnv": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "CMS Endpoint stage"
+                },
+                "attribute": "cms-env",
+                "reflect": true,
+                "defaultValue": "'stage'"
+            },
+            "clientStyling": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Client custom styling via inline style"
+                },
+                "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": "''"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "hasErrors": {},
+            "isLoading": {},
+            "limitStylingAppends": {},
+            "device": {}
+        };
+    }
+    static get watchers() {
+        return [{
+                "propName": "cmsEndpoint",
+                "methodName": "watchEndpoint"
+            }, {
+                "propName": "language",
+                "methodName": "watchEndpoint"
+            }, {
+                "propName": "userRoles",
+                "methodName": "watchEndpoint"
+            }, {
+                "propName": "device",
+                "methodName": "watchEndpoint"
+            }];
+    }
+}

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

@@ -0,0 +1,2 @@
+;
+export {};

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

@@ -0,0 +1 @@
+export { GeneralAboutUs } from './general-about-us';

package/dist/collection/index.js

@@ -0,0 +1 @@
+export * from './components';

package/dist/collection/utils/chevron.svg

@@ -0,0 +1,7 @@
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+
+<svg height="64px" width="64px" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 185.343 185.343" xml:space="preserve" fill="#D5F3DF" stroke="#D5F3DF">
+
+
+
+

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

@@ -0,0 +1,32 @@
+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 ...',
+    }
+};
+export const translate = (key, customLang) => {
+    const lang = customLang;
+    return TRANSLATIONS[lang !== undefined && SUPPORTED_LANGUAGES.includes(lang) ? lang : DEFAULT_LANGUAGE][key];
+};

package/dist/collection/utils/utils.js

@@ -0,0 +1,56 @@
+export 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';
+    }
+}
+export 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';
+};
+export const getDevicePlatform = () => {
+    const device = getDevice();
+    if (device) {
+        if (device === 'PC') {
+            return 'dk';
+        }
+        else if (device === 'iPad' || device === 'iPhone') {
+            return 'mtWeb';
+        }
+        else {
+            return 'mtWeb';
+        }
+    }
+};

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

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