@everymatrix/general-news-notification 1.45.7

package/dist/cjs/index.cjs.js

@@ -0,0 +1,10 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const generalNewsNotification = require('./general-news-notification-57b70677.js');
+require('./index-95e31eec.js');
+
+
+
+exports.GeneralNewsNotification = generalNewsNotification.GeneralNewsNotification;

package/dist/cjs/loader.cjs.js

@@ -0,0 +1,15 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-95e31eec.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-news-notification.cjs",[[1,"general-news-notification",{"cmsEndpoint":[1,"cms-endpoint"],"language":[1],"animationType":[1,"animation-type"],"speed":[2],"canMinimize":[4,"can-minimize"],"canClose":[4,"can-close"],"clientStyling":[1,"client-styling"],"clientStylingUrl":[1,"client-styling-url"],"translationUrl":[1,"translation-url"],"message":[32],"isMinimized":[32],"isClosed":[32],"isLoading":[32]},null,{"cmsEndpoint":["watchEndpoint"],"language":["watchEndpoint"],"clientStyling":["handleStylingChange"],"clientStylingUrl":["handleStylingUrlChange"],"translationUrl":["handleNewTranslations"]}]]]], options);
+};
+
+exports.setNonce = index.setNonce;
+exports.defineCustomElements = defineCustomElements;

package/dist/collection/collection-manifest.json

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

package/dist/collection/components/general-news-notification/general-news-notification.css

@@ -0,0 +1,110 @@
+:host {
+  display: block;
+}
+
+.NotificationWrapper {
+  background: var(--emw-header-color-background, var(--emw-color-background, #000000));
+  color: var(--emfe-w-color-white, #FFFFFF);
+  position: sticky;
+  width: 100%;
+  text-align: center;
+  overflow: hidden;
+  z-index: 298;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  border-bottom: 6px solid var(--emfe-w-color-primary, #22B04E);
+  max-height: 40px;
+}
+
+.SlidingBar {
+  transition: all 0.3s ease-in-out;
+  width: 100%;
+}
+
+.Message {
+  will-change: transform;
+  margin: 0 auto;
+  padding: 10px;
+  width: 90%;
+}
+
+.ScrollLeft .Message {
+  white-space: nowrap;
+  animation: scroll-left 10s linear infinite;
+  width: 100%;
+}
+
+.ScrollRight .Message {
+  white-space: nowrap;
+  animation: scroll-right 10s linear infinite;
+  width: 100%;
+}
+
+.VisibleButtons .Message {
+  display: flex;
+}
+
+@keyframes scroll-left {
+  from {
+    transform: translateX(100%);
+  }
+  to {
+    transform: translateX(-100%);
+  }
+}
+@keyframes scroll-right {
+  from {
+    transform: translateX(-100%);
+  }
+  to {
+    transform: translateX(100%);
+  }
+}
+.SlidingBar:hover .Message {
+  animation-play-state: paused;
+}
+
+.CloseButton {
+  padding-left: 10px;
+  background-color: var(--emw-header-color-background, var(--emw-color-background, #000000));
+  display: flex;
+  z-index: 299;
+  gap: 10px;
+}
+
+.ToggleButton {
+  position: absolute;
+  left: 0;
+}
+.ToggleButton .TriangleActive, .ToggleButton .TriangleInactive {
+  display: block;
+  transition: all 0.2s;
+}
+.ToggleButton .TriangleActive {
+  transform: scale(1.1) rotateX(180deg) translateY(3px);
+  fill: var(--emw--color-primary, #52d004);
+  margin-top: 8px;
+}
+.ToggleButton svg {
+  fill: var(--emw-header-color-background, var(--emw-color-background, #000000));
+  width: 16px;
+  transform: rotate(180deg);
+}
+
+.CloseButton {
+  right: 10px;
+}
+
+button {
+  background-color: var(--emfe-w-color-primary, #22B04E);
+  color: var(--emw-header-color-background, var(--emw-color-background, #000000));
+  border: none;
+  width: 40px;
+  height: 40px;
+  cursor: pointer;
+}
+
+.NotificationWrapper.Minimized {
+  visibility: hidden;
+}

package/dist/collection/components/general-news-notification/general-news-notification.js

@@ -0,0 +1,330 @@
+import { h } from "@stencil/core";
+import { getDevicePlatform } from "../../utils/utils";
+import { getTranslations, translate } from "../../utils/locale.utils";
+export class GeneralNewsNotification {
+    constructor() {
+        this.componentDidLoad = () => {
+            // start custom styling area
+            if (this.stylingContainer) {
+                if (this.clientStyling)
+                    this.setClientStyling();
+                if (this.clientStylingUrl)
+                    this.setClientStylingURL();
+            }
+            // end custom styling area
+        };
+        this.connectedCallback = () => {
+            if (this.cmsEndpoint && this.language) {
+                this.getNotificationMessage();
+            }
+        };
+        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.getNotificationMessage = () => {
+            this.isLoading = true;
+            try {
+                let url = new URL(`${this.cmsEndpoint}/${this.language}/header-notification`);
+                url.searchParams.append('device', getDevicePlatform());
+                url.searchParams.append('platform', getDevicePlatform());
+                fetch(url.href)
+                    .then((res) => {
+                    if (res.status === 200) {
+                        return res.json();
+                    }
+                    else {
+                        throw new Error("HTTP status " + res.status);
+                    }
+                })
+                    .then((data) => {
+                    this.message = data.message;
+                })
+                    .catch((err) => {
+                    // Handle any errors
+                    console.error(err);
+                })
+                    .finally(() => this.isLoading = false);
+            }
+            catch (error) {
+                console.error('Error fetching message:', error);
+            }
+        };
+        this.toggleMinimize = () => {
+            this.isMinimized = !this.isMinimized;
+        };
+        this.closeNotification = () => {
+            this.isClosed = true;
+        };
+        this.cmsEndpoint = undefined;
+        this.language = undefined;
+        this.animationType = 'static';
+        this.speed = 30;
+        this.canMinimize = false;
+        this.canClose = false;
+        this.clientStyling = '';
+        this.clientStylingUrl = '';
+        this.translationUrl = '';
+        this.message = undefined;
+        this.isMinimized = false;
+        this.isClosed = false;
+        this.isLoading = true;
+    }
+    watchEndpoint(newValue, oldValue) {
+        if (newValue && newValue != oldValue && this.cmsEndpoint && this.language) {
+            this.getNotificationMessage();
+        }
+    }
+    handleStylingChange(newValue, oldValue) {
+        if (newValue !== oldValue)
+            this.setClientStyling();
+    }
+    handleStylingUrlChange(newValue, oldValue) {
+        if (newValue !== oldValue)
+            this.setClientStylingURL();
+    }
+    handleNewTranslations() {
+        this.isLoading = true;
+        getTranslations(this.translationUrl).then(() => {
+            this.isLoading = false;
+        });
+    }
+    async componentWillLoad() {
+        if (this.translationUrl.length > 2) {
+            await getTranslations(this.translationUrl);
+        }
+    }
+    render() {
+        if (this.isClosed)
+            return null;
+        const animationDuration = `${this.speed}s`;
+        return (h("div", { ref: el => this.stylingContainer = el }, this.canMinimize && (h("button", { class: "ToggleButton", onClick: this.toggleMinimize }, h("span", { class: this.isMinimized ? '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)" }))))), h("div", { class: {
+                'NotificationWrapper': true,
+                'Minimized': this.isMinimized
+            } }, h("div", { class: {
+                'SlidingBar': true,
+                'Minimized': this.isMinimized,
+                'ScrollLeft': this.animationType === 'scroll-left',
+                'ScrollRight': this.animationType === 'scroll-right',
+                'VisibleButtons': this.canMinimize || this.canClose === true
+            } }, h("div", { class: "Message", style: {
+                animationDuration: animationDuration,
+            } }, this.isLoading ? translate('loading', this.language) : this.message)), this.canClose && (h("div", { class: "CloseButton" }, h("button", { onClick: this.closeNotification }, "X"))))));
+    }
+    static get is() { return "general-news-notification"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["general-news-notification.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["general-news-notification.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "cmsEndpoint": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The CMS endpoint"
+                },
+                "attribute": "cms-endpoint",
+                "reflect": false
+            },
+            "language": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The language"
+                },
+                "attribute": "language",
+                "reflect": false
+            },
+            "animationType": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'static' | 'scroll-left' | 'scroll-right'",
+                    "resolved": "\"scroll-left\" | \"scroll-right\" | \"static\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Animation types"
+                },
+                "attribute": "animation-type",
+                "reflect": false,
+                "defaultValue": "'static'"
+            },
+            "speed": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Default speed of the scroll animation in seconds"
+                },
+                "attribute": "speed",
+                "reflect": false,
+                "defaultValue": "30"
+            },
+            "canMinimize": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Option to minimize"
+                },
+                "attribute": "can-minimize",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "canClose": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Option to close the notification"
+                },
+                "attribute": "can-close",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "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": false,
+                "defaultValue": "''"
+            },
+            "clientStylingUrl": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Client custom styling via url content"
+                },
+                "attribute": "client-styling-url",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "translationUrl": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The translationurl"
+                },
+                "attribute": "translation-url",
+                "reflect": false,
+                "defaultValue": "''"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "message": {},
+            "isMinimized": {},
+            "isClosed": {},
+            "isLoading": {}
+        };
+    }
+    static get watchers() {
+        return [{
+                "propName": "cmsEndpoint",
+                "methodName": "watchEndpoint"
+            }, {
+                "propName": "language",
+                "methodName": "watchEndpoint"
+            }, {
+                "propName": "clientStyling",
+                "methodName": "handleStylingChange"
+            }, {
+                "propName": "clientStylingUrl",
+                "methodName": "handleStylingUrlChange"
+            }, {
+                "propName": "translationUrl",
+                "methodName": "handleNewTranslations"
+            }];
+    }
+}

package/dist/collection/components/general-news-notification/index.js

@@ -0,0 +1 @@
+export { GeneralNewsNotification } from './general-news-notification';

package/dist/collection/index.js

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

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

@@ -0,0 +1,34 @@
+const DEFAULT_LANGUAGE = 'en';
+const TRANSLATIONS = {
+    en: {
+        loading: 'Is Loading ...',
+    }
+};
+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);
+        });
+    });
+};
+export const translate = (key, customLang, values) => {
+    const lang = customLang;
+    let translation = TRANSLATIONS[(lang !== undefined) && (lang in TRANSLATIONS) ? 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;
+};

package/dist/collection/utils/utils.js

@@ -0,0 +1,30 @@
+export function format(first, middle, last) {
+    return ((first || '') + (middle ? ` ${middle}` : '') + (last ? ` ${last}` : ''));
+}
+export const getDevice = () => {
+    let userAgent = window.navigator.userAgent;
+    if (userAgent.toLowerCase().match(/android/i)) {
+        return 'Android';
+    }
+    if (userAgent.toLowerCase().match(/iphone/i)) {
+        return 'iPhone';
+    }
+    if (userAgent.toLowerCase().match(/ipad|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 'ios';
+        }
+        else {
+            return 'mtWeb';
+        }
+    }
+};

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

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