@everymatrix/promoting-banners 0.1.0

package/dist/cjs/index.cjs.js

@@ -0,0 +1,10 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const promotingBanners = require('./promoting-banners-d707e229.js');
+require('./index-40277d4b.js');
+
+
+
+exports.PromotingBanners = promotingBanners.PromotingBanners;

package/dist/cjs/loader.cjs.js

@@ -0,0 +1,15 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-40277d4b.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([["promoting-banners.cjs",[[1,"promoting-banners",{"cmsEndpoint":[513,"cms-endpoint"],"language":[513],"cmsEnv":[513,"cms-env"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"translationUrl":[513,"translation-url"],"promotingBannersArray":[32],"hasErrors":[32],"isLoading":[32],"translationData":[32]},null,{"clientStyling":["handleStylingChange"],"clientStylingUrl":["handleStylingChange"],"translationUrl":["handleNewTranslations"]}]]]], options);
+};
+
+exports.setNonce = index.setNonce;
+exports.defineCustomElements = defineCustomElements;

package/dist/cjs/promoting-banners-d707e229.js

@@ -0,0 +1,206 @@
+'use strict';
+
+const index = require('./index-40277d4b.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 'mtWeb';
+        }
+        else {
+            return 'mtWeb';
+        }
+    }
+};
+
+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];
+};
+const getTranslations = (url) => {
+    // fetch url, get the data, replace the TRANSLATIONS content
+    return new Promise((resolve, reject) => {
+        fetch(url)
+            .then((res) => res.json())
+            .then((data) => {
+            Object.keys(data).forEach((item) => {
+                for (let key in data[item]) {
+                    TRANSLATIONS[item][key] = data[item][key];
+                }
+            });
+            resolve(TRANSLATIONS);
+        }).catch(err => {
+            reject(err);
+        });
+    });
+};
+
+const promotingBannersCss = ".PromotingBannersIconContainer img{width:50px;height:50px;border-radius:var(--emw--border-radius-image, 50%);background-size:contain;margin:10px}.PromotingBannersSection{padding:10px;border-radius:var(--emw--border-radius-small, 5px);background-color:var(--emw--promo-color-background, var(--emw--color-background, #2f2f2f));background-repeat:no-repeat;background-position:center;color:var(--emw--promo-color-primary, var(--emw--color-primary, #fff));font-family:var(--emw--font-family-primary, \"Montserrat\", sans-serif);overflow:hidden;position:relative}.PromotingBannersGrid{display:grid;grid-gap:30px;background-size:contain;background-repeat:no-repeat;padding:10px;width:100%;grid-template-columns:repeat(auto-fill, minmax(200px, 1fr));box-sizing:border-box}.PromotingBannersContent{color:var(--emw--promo-color-primary, var(--emw--color-primary, #fff))}.PromotingBannersContent p{display:block;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;text-overflow:ellipsis;word-break:break-all}.PromotingBannersHeader{display:flex;justify-content:center;flex-direction:column;align-items:center}.PromotingBannersHeader p{text-align:center}.PromotingBannersBox{min-width:200px;display:flex;justify-content:flex-start;overflow:hidden;flex-direction:row;gap:20px;text-decoration:none;color:inherit;background-size:cover;background-position:center;border-radius:var(--emw--border-radius-small, 5px)}.PromotingBannersSectionTitle,.PromotingBannersSectionSubtitle{margin:10px auto;background:transparent}.PromotingBannersTextContainer{margin:5px;overflow:hidden;position:relative;padding-bottom:30px}.PromotingBannersTitle{margin:5px auto}.PromotingBannersButton{cursor:pointer;color:inherit;text-decoration:none;position:absolute;bottom:5px;border:0;background:transparent}.ButtonDisabled{cursor:not-allowed}.PromotionalBannersTextContainer{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.AboutUsError .ErrorInfo{color:var(--emw--promo-color-error, var(--emw--color-error, #ed0909))}.SkeletonGrid{display:grid}.Skeleton{animation:skeleton-loading 0.6s linear infinite alternate}@keyframes skeleton-loading{0%{background:linear-gradient(90deg, rgba(35, 178, 78, 0.2) 0%, rgba(0, 61, 93, 0.2) 100%)}12%{background:linear-gradient(90deg, rgba(35, 178, 78, 0.225) 0%, rgba(0, 61, 93, 0.225) 100%)}25%{background:linear-gradient(90deg, rgba(35, 178, 78, 0.25) 0%, rgba(0, 61, 93, 0.25) 100%)}33%{background:linear-gradient(90deg, rgba(35, 178, 78, 0.275) 0%, rgba(0, 61, 93, 0.275) 100%)}50%{background:linear-gradient(90deg, rgba(35, 178, 78, 0.3) 0%, rgba(0, 61, 93, 0.3) 100%)}63%{background:linear-gradient(90deg, rgba(35, 178, 78, 0.325) 0%, rgba(0, 61, 93, 0.325) 100%)}75%{background:linear-gradient(90deg, rgba(35, 178, 78, 0.35) 0%, rgba(0, 61, 93, 0.35) 100%)}88%{background:linear-gradient(90deg, rgba(35, 178, 78, 0.375) 0%, rgba(0, 61, 93, 0.375) 100%)}100%{background:linear-gradient(90deg, rgba(35, 178, 78, 0.4) 0%, rgba(0, 61, 93, 0.4) 100%)}}.SkeletonItem{opacity:0.5;margin:0 15px;width:125px;height:150px;border-radius:var(--emw--border-radius-medium, 15px);margin:20px}";
+const PromotingBannersStyle0 = promotingBannersCss;
+
+const PromotingBanners = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        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.componentDidLoad = () => {
+            if (this.stylingContainer) {
+                if (this.clientStyling)
+                    this.setClientStyling();
+                if (this.clientStylingUrl)
+                    this.setClientStylingURL();
+            }
+        };
+        this.cmsEndpoint = '';
+        this.language = 'en';
+        this.cmsEnv = '';
+        this.clientStyling = '';
+        this.clientStylingUrl = '';
+        this.translationUrl = '';
+        this.promotingBannersArray = [];
+        this.hasErrors = false;
+        this.isLoading = true;
+        this.translationData = undefined;
+    }
+    handleStylingChange(newValue, oldValue) {
+        if (newValue !== oldValue)
+            this.setClientStyling();
+    }
+    handleNewTranslations() {
+        this.isLoading = true;
+        getTranslations(this.translationUrl).then(() => {
+            this.isLoading = false;
+        });
+    }
+    connectedCallback() {
+        if (this.cmsEndpoint && this.language) {
+            this.getPromotingBanners();
+        }
+    }
+    getPromotingBanners() {
+        const url = new URL(`${this.cmsEndpoint}/${this.language}/homepage`);
+        const params = new URLSearchParams();
+        params.append('language', this.language);
+        params.append('env', this.cmsEnv);
+        params.append('device', getDevicePlatform());
+        url.search = params.toString();
+        let requestOptions = {
+            method: 'GET',
+            headers: {
+                'Content-Type': 'application/json',
+                'Accept': 'application/json'
+            }
+        };
+        return new Promise((resolve, reject) => {
+            this.isLoading = true;
+            fetch(url.href, requestOptions)
+                .then(res => res.json())
+                .then(data => {
+                const { promotingBanners } = data;
+                this.promotingBannersArray = promotingBanners;
+                resolve(promotingBanners);
+            })
+                .catch(error => {
+                console.error('Error fetching data:', error);
+                this.hasErrors = true;
+                reject(error);
+            }).finally(() => {
+                this.isLoading = false;
+            });
+        });
+    }
+    sendOpenLink(url, isExternal, target) {
+        window.postMessage({ type: 'NavigateTo', path: url, target: target || null, externalLink: isExternal || false }, window.location.href);
+    }
+    async componentWillLoad() {
+        // Translation url logic
+        const promises = [];
+        if (this.translationUrl) {
+            const translationPromise = getTranslations(this.translationUrl).then((data) => {
+                this.translationData = JSON.stringify(data);
+            }).catch(err => {
+                console.log(err);
+            });
+            promises.push(translationPromise);
+        }
+        return Promise.all(promises);
+    }
+    renderBannersGrid(banner) {
+        var _a, _b, _c;
+        return index.h("a", { class: "PromotingBannersBox", href: banner === null || banner === void 0 ? void 0 : banner.url, target: banner.targetType, style: { backgroundImage: `url(${banner === null || banner === void 0 ? void 0 : banner.backgroundImage})` } }, index.h("div", { class: "PromotingBannersIconContainer" }, index.h("img", { src: (getDevice() === 'Android' || getDevice() === 'iPhone') ? (_a = banner.icon) === null || _a === void 0 ? void 0 : _a.mobile : (getDevice() === 'iPad') ? (_b = banner.image) === null || _b === void 0 ? void 0 : _b.srcTablet : (_c = banner.icon) === null || _c === void 0 ? void 0 : _c.desktop, alt: "Banner image" })), index.h("div", { class: "PromotingBannersTextContainer" }, index.h("h3", { class: "PromotingBannersTitle" }, banner === null || banner === void 0 ? void 0 : banner.title), index.h("div", { class: "PromotingBannersContent", innerHTML: banner === null || banner === void 0 ? void 0 : banner.description }), banner.button &&
+            index.h("button", { class: `PromotingBannersButton ${(banner === null || banner === void 0 ? void 0 : banner.button.text) ? '' : 'ButtonDisabled'}`, innerHTML: banner === null || banner === void 0 ? void 0 : banner.button.text, onClick: this.sendOpenLink.bind(this, banner === null || banner === void 0 ? void 0 : banner.button.url, banner === null || banner === void 0 ? void 0 : banner.button.externalLink, banner === null || banner === void 0 ? void 0 : banner.button.target) })));
+    }
+    render() {
+        var _a, _b, _c, _d;
+        return (index.h("div", { key: '80f15f2a7a49290bfd0fb80c6ccfb02b9fe3a0a9', class: "PromotingBannersSection", ref: el => this.stylingContainer = el }, this.hasErrors && index.h("div", { key: '392ef0a6910a457d17efc41a3a2443afc8be4a61', class: "AboutUsError" }, index.h("div", { key: 'c19eb8a49a8c8a422bd47557a7815e0252667005', class: "ErrorInfo" }, translate('error', this.language))), this.isLoading && index.h("div", { key: '28fc923e41227b8ca1529e8e2815ebd70678e50c', class: "SkeletonGrid" }, new Array(4).fill(null).map((index$1) => (index.h("div", { key: index$1, class: "Skeleton SkeletonItem" })))), !this.isLoading &&
+            index.h("div", { key: 'aff2d67a139ede5bdcc3c1ad240806594ab5fae7', class: "PromotingBannersWrapper" }, index.h("div", { key: '7d8caf2fee017407a618960ea37fff9d809e3eaa', class: getDevice() === 'PC' ? 'PromotingBannersHeader' : 'PromotingBannersHeader PromotingBannersHeaderMobile' }, ((_a = this.promotingBannersArray) === null || _a === void 0 ? void 0 : _a.title) && index.h("h1", { key: 'd947b41266fdfda8762ebc654c7a1c3516a08be5', class: "PromotingBannersSectionTitle" }, (_b = this.promotingBannersArray) === null || _b === void 0 ? void 0 : _b.title), ((_c = this.promotingBannersArray) === null || _c === void 0 ? void 0 : _c.description) && index.h("h5", { key: '72127f002e53c9e2d7430e222494c4470aca23e9', class: "PromotingBannersSectionSubtitle", style: { 'display': `${getDevice() !== 'PC' ? 'inline-block' : 'none'}` }, innerHTML: (_d = this.promotingBannersArray) === null || _d === void 0 ? void 0 : _d.description })), index.h("div", { key: '50c4fb4ae455f363d128993908016b0245c2bd50', class: "PromotingBannersGrid" }, this.promotingBannersArray.map(banner => (this.renderBannersGrid(banner)))))));
+    }
+    static get watchers() { return {
+        "clientStyling": ["handleStylingChange"],
+        "clientStylingUrl": ["handleStylingChange"],
+        "translationUrl": ["handleNewTranslations"]
+    }; }
+};
+PromotingBanners.style = PromotingBannersStyle0;
+
+exports.PromotingBanners = PromotingBanners;

package/dist/cjs/promoting-banners.cjs.entry.js

@@ -0,0 +1,10 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const promotingBanners = require('./promoting-banners-d707e229.js');
+require('./index-40277d4b.js');
+
+
+
+exports.promoting_banners = promotingBanners.PromotingBanners;

package/dist/cjs/promoting-banners.cjs.js

@@ -0,0 +1,25 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-40277d4b.js');
+const appGlobals = require('./app-globals-3a1e7e63.js');
+
+/*
+ Stencil Client Patch Browser v4.22.3 | MIT Licensed | https://stenciljs.com
+ */
+var patchBrowser = () => {
+  const importMeta = (typeof document === 'undefined' ? new (require('u' + 'rl').URL)('file:' + __filename).href : (document.currentScript && document.currentScript.src || new URL('promoting-banners.cjs.js', document.baseURI).href));
+  const opts = {};
+  if (importMeta !== "") {
+    opts.resourcesUrl = new URL(".", importMeta).href;
+  }
+  return index.promiseResolve(opts);
+};
+
+patchBrowser().then(async (options) => {
+  await appGlobals.globalScripts();
+  return index.bootstrapLazy([["promoting-banners.cjs",[[1,"promoting-banners",{"cmsEndpoint":[513,"cms-endpoint"],"language":[513],"cmsEnv":[513,"cms-env"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"translationUrl":[513,"translation-url"],"promotingBannersArray":[32],"hasErrors":[32],"isLoading":[32],"translationData":[32]},null,{"clientStyling":["handleStylingChange"],"clientStylingUrl":["handleStylingChange"],"translationUrl":["handleNewTranslations"]}]]]], options);
+});
+
+exports.setNonce = index.setNonce;

package/dist/collection/collection-manifest.json

@@ -0,0 +1,12 @@
+{
+  "entries": [
+    "components/promoting-banners/promoting-banners.js"
+  ],
+  "compiler": {
+    "name": "@stencil/core",
+    "version": "4.22.3",
+    "typescriptVersion": "5.5.4"
+  },
+  "collections": [],
+  "bundles": []
+}

package/dist/collection/components/promoting-banners/index.js

@@ -0,0 +1 @@
+export { PromotingBanners } from './promoting-banners';

package/dist/collection/components/promoting-banners/promoting-banners.css

@@ -0,0 +1,154 @@
+.PromotingBannersIconContainer img {
+  width: 50px;
+  height: 50px;
+  border-radius: var(--emw--border-radius-image, 50%);
+  background-size: contain;
+  margin: 10px;
+}
+
+.PromotingBannersSection {
+  padding: 10px;
+  border-radius: var(--emw--border-radius-small, 5px);
+  background-color: var(--emw--promo-color-background, var(--emw--color-background, #2f2f2f));
+  background-repeat: no-repeat;
+  background-position: center;
+  color: var(--emw--promo-color-primary, var(--emw--color-primary, #fff));
+  font-family: var(--emw--font-family-primary, "Montserrat", sans-serif);
+  overflow: hidden;
+  position: relative;
+}
+
+.PromotingBannersGrid {
+  display: grid;
+  grid-gap: 30px;
+  background-size: contain;
+  background-repeat: no-repeat;
+  padding: 10px;
+  width: 100%;
+  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+  box-sizing: border-box;
+}
+
+.PromotingBannersContent {
+  color: var(--emw--promo-color-primary, var(--emw--color-primary, #fff));
+}
+.PromotingBannersContent p {
+  display: block; /* Enable flexbox layout */
+  -webkit-box-orient: vertical; /* Define orientation */
+  -webkit-line-clamp: 3; /* Limit to 3 lines */
+  overflow: hidden; /* Hide overflow */
+  text-overflow: ellipsis;
+  word-break: break-all;
+}
+
+.PromotingBannersHeader {
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  align-items: center;
+}
+.PromotingBannersHeader p {
+  text-align: center;
+}
+
+.PromotingBannersBox {
+  min-width: 200px;
+  display: flex; /* Use Flexbox for internal content */
+  justify-content: flex-start; /* Align items at the top */
+  overflow: hidden; /* Ensure content doesn't overflow */
+  flex-direction: row;
+  gap: 20px;
+  text-decoration: none;
+  color: inherit;
+  background-size: cover;
+  background-position: center;
+  border-radius: var(--emw--border-radius-small, 5px);
+}
+
+.PromotingBannersSectionTitle, .PromotingBannersSectionSubtitle {
+  margin: 10px auto;
+  background: transparent;
+}
+
+.PromotingBannersTextContainer {
+  margin: 5px;
+  overflow: hidden;
+  position: relative;
+  padding-bottom: 30px;
+}
+
+.PromotingBannersTitle {
+  margin: 5px auto;
+}
+
+.PromotingBannersButton {
+  cursor: pointer;
+  color: inherit;
+  text-decoration: none;
+  position: absolute;
+  bottom: 5px;
+  border: 0;
+  background: transparent;
+}
+
+.ButtonDisabled {
+  cursor: not-allowed;
+}
+
+.PromotionalBannersTextContainer {
+  /* Text overflow handling */
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.AboutUsError .ErrorInfo {
+  color: var(--emw--promo-color-error, var(--emw--color-error, #ed0909));
+}
+
+/* Skeleton styling below */
+.SkeletonGrid {
+  display: grid;
+}
+
+.Skeleton {
+  animation: skeleton-loading 0.6s linear infinite alternate;
+}
+
+@keyframes skeleton-loading {
+  0% {
+    background: linear-gradient(90deg, rgba(35, 178, 78, 0.2) 0%, rgba(0, 61, 93, 0.2) 100%);
+  }
+  12% {
+    background: linear-gradient(90deg, rgba(35, 178, 78, 0.225) 0%, rgba(0, 61, 93, 0.225) 100%);
+  }
+  25% {
+    background: linear-gradient(90deg, rgba(35, 178, 78, 0.25) 0%, rgba(0, 61, 93, 0.25) 100%);
+  }
+  33% {
+    background: linear-gradient(90deg, rgba(35, 178, 78, 0.275) 0%, rgba(0, 61, 93, 0.275) 100%);
+  }
+  50% {
+    background: linear-gradient(90deg, rgba(35, 178, 78, 0.3) 0%, rgba(0, 61, 93, 0.3) 100%);
+  }
+  63% {
+    background: linear-gradient(90deg, rgba(35, 178, 78, 0.325) 0%, rgba(0, 61, 93, 0.325) 100%);
+  }
+  75% {
+    background: linear-gradient(90deg, rgba(35, 178, 78, 0.35) 0%, rgba(0, 61, 93, 0.35) 100%);
+  }
+  88% {
+    background: linear-gradient(90deg, rgba(35, 178, 78, 0.375) 0%, rgba(0, 61, 93, 0.375) 100%);
+  }
+  100% {
+    background: linear-gradient(90deg, rgba(35, 178, 78, 0.4) 0%, rgba(0, 61, 93, 0.4) 100%);
+  }
+}
+.SkeletonItem {
+  opacity: 0.5;
+  margin: 0 15px;
+  width: 125px;
+  height: 150px;
+  border-radius: var(--emw--border-radius-medium, 15px);
+  margin: 20px;
+}