@everymatrix/general-news-notification 1.45.7

package/dist/esm/general-news-notification-c65ccc64.js

@@ -0,0 +1,204 @@
+import { r as registerInstance, h } from './index-cffad24d.js';
+
+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';
+};
+const getDevicePlatform = () => {
+    const device = getDevice();
+    if (device) {
+        if (device === 'PC') {
+            return 'dk';
+        }
+        else if (device === 'iPad' || device === 'iPhone') {
+            return 'ios';
+        }
+        else {
+            return 'mtWeb';
+        }
+    }
+};
+
+const DEFAULT_LANGUAGE = 'en';
+const TRANSLATIONS = {
+    en: {
+        loading: 'Is Loading ...',
+    }
+};
+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);
+        });
+    });
+};
+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;
+};
+
+const generalNewsNotificationCss = ":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}";
+const GeneralNewsNotificationStyle0 = generalNewsNotificationCss;
+
+const GeneralNewsNotification = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        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 watchers() { return {
+        "cmsEndpoint": ["watchEndpoint"],
+        "language": ["watchEndpoint"],
+        "clientStyling": ["handleStylingChange"],
+        "clientStylingUrl": ["handleStylingUrlChange"],
+        "translationUrl": ["handleNewTranslations"]
+    }; }
+};
+GeneralNewsNotification.style = GeneralNewsNotificationStyle0;
+
+export { GeneralNewsNotification as G };

package/dist/esm/general-news-notification.entry.js

@@ -0,0 +1,2 @@
+export { G as general_news_notification } from './general-news-notification-c65ccc64.js';
+import './index-cffad24d.js';

package/dist/esm/general-news-notification.js

@@ -0,0 +1,20 @@
+import { p as promiseResolve, b as bootstrapLazy } from './index-cffad24d.js';
+export { s as setNonce } from './index-cffad24d.js';
+import { g as globalScripts } from './app-globals-0f993ce5.js';
+
+/*
+ Stencil Client Patch Browser v4.20.0 | MIT Licensed | https://stenciljs.com
+ */
+var patchBrowser = () => {
+  const importMeta = import.meta.url;
+  const opts = {};
+  if (importMeta !== "") {
+    opts.resourcesUrl = new URL(".", importMeta).href;
+  }
+  return promiseResolve(opts);
+};
+
+patchBrowser().then(async (options) => {
+  await globalScripts();
+  return bootstrapLazy([["general-news-notification",[[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);
+});