@everymatrix/general-footer-template 1.54.11 → 1.55.0

package/dist/collection/components/custom-clock/custom-clock.js

@@ -5,23 +5,6 @@ import utc from "dayjs/plugin/utc";
 import timezone from "dayjs/plugin/timezone";
 export class CustomClock {
     constructor() {
-        /**
-         * clockformat
-         */
-        this.clockFormat = 'HH:mm:ss';
-        /**
-         * configurable time zone
-         */
-        this.timeZone = '';
-        /**
-         * custom translation by href
-         */
-        this.translationUrl = '';
-        /**
-         * language
-         */
-        this.language = 'en';
-        this.timeString = '';
         this.startClock = () => {
             this.intervalId = setInterval(() => {
                 if (this.timeZone.length > 0) {
@@ -34,6 +17,11 @@ export class CustomClock {
                 }
             }, 1000);
         };
+        this.clockFormat = 'HH:mm:ss';
+        this.timeZone = '';
+        this.translationUrl = '';
+        this.language = 'en';
+        this.timeString = '';
     }
     handleNewTranslations() {
         getTranslations(this.translationUrl);
@@ -80,8 +68,6 @@ export class CustomClock {
                     "tags": [],
                     "text": "clockformat"
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "clock-format",
                 "reflect": true,
                 "defaultValue": "'HH:mm:ss'"
@@ -100,8 +86,6 @@ export class CustomClock {
                     "tags": [],
                     "text": "configurable time zone"
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "time-zone",
                 "reflect": true,
                 "defaultValue": "''"
@@ -120,8 +104,6 @@ export class CustomClock {
                     "tags": [],
                     "text": "custom translation by href"
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "translation-url",
                 "reflect": true,
                 "defaultValue": "''"
@@ -140,8 +122,6 @@ export class CustomClock {
                     "tags": [],
                     "text": "language"
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "language",
                 "reflect": true,
                 "defaultValue": "'en'"

package/dist/collection/components/custom-content-section/custom-content-section.js

@@ -2,23 +2,20 @@ import { h } from "@stencil/core";
 import sanitizeHtml from "sanitize-html";
 export class CustomContentSection {
     constructor() {
-        /**
-         * If this is true it will emit an event at the moment the content with url its clicked
-         */
+        this.customContent = undefined;
+        this.repeaterContent = undefined;
         this.navigateViaEvent = false;
-        /**
-        * Post Message event to be sent on navigation via Event
-        */
         this.postMessageEvent = '';
     }
     render() {
         const clean = sanitizeHtml(this.customContent, {
-            allowedTags: sanitizeHtml.defaults.allowedTags.concat(['img']),
+            allowedTags: sanitizeHtml.defaults.allowedTags.concat(['img', 'a']),
             allowedAttributes: {
-                img: ['src', 'srcset', 'alt', 'title', 'width', 'height', 'loading']
+                img: ['src', 'srcset', 'alt', 'title', 'width', 'height', 'loading'],
+                a: ['href', 'target', 'rel']
             }
         });
-        return h("div", { key: '894fdc79eb310d5a7cfde48445afd3d1d464359e', class: "CustomContentSectionContainer" }, h("div", { key: 'cfecce550a4e9b6b692ff12de96262e1413f8f2b', class: "CustomContentSectionWrapper" }, h("div", { key: '1e76edcbb408a184848bda0c86a99d2467e3e081', class: "CustomContentSectionContent", innerHTML: clean }), this.repeaterContent ? h("image-list", { style: { width: "100%" }, repeaterContent: this.repeaterContent ? this.repeaterContent : null, "navigate-via-event": this.navigateViaEvent, "post-message-event": this.postMessageEvent }) : ''));
+        return h("div", { key: '7cfcf732fff969c5bcd0b08a4b921ae3592732b3', class: "CustomContentSectionContainer" }, h("div", { key: 'c5cf9a5ada78c792ebb778d3d3084e0b0b938ed4', class: "CustomContentSectionWrapper" }, h("div", { key: 'abc8184b4eb9c97e0261bec4baebfb7e272cd3bb', class: "CustomContentSectionContent", innerHTML: clean }), this.repeaterContent ? h("image-list", { style: { width: "100%" }, repeaterContent: this.repeaterContent ? this.repeaterContent : null, "navigate-via-event": this.navigateViaEvent, "post-message-event": this.postMessageEvent }) : ''));
     }
     static get is() { return "custom-content-section"; }
     static get encapsulation() { return "scoped"; }
@@ -48,8 +45,6 @@ export class CustomContentSection {
                     "tags": [],
                     "text": "custom HTML content to be rendered"
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "custom-content",
                 "reflect": false
             },
@@ -67,8 +62,6 @@ export class CustomContentSection {
                     "tags": [],
                     "text": "the links content to be displayed, including titles, url, open target"
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "repeater-content",
                 "reflect": false
             },
@@ -86,8 +79,6 @@ export class CustomContentSection {
                     "tags": [],
                     "text": "If this is true it will emit an event at the moment the content with url its clicked"
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "navigate-via-event",
                 "reflect": true,
                 "defaultValue": "false"
@@ -106,8 +97,6 @@ export class CustomContentSection {
                     "tags": [],
                     "text": "Post Message event to be sent on navigation via Event"
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "post-message-event",
                 "reflect": true,
                 "defaultValue": "''"

package/dist/collection/components/general-footer-template/demo-footer.css

@@ -16,7 +16,7 @@ body {
 
 .FooterSectionContainer {
   color: var(--emw--footer-typography, var(--emw--color-thpography, #fff));
-  padding: 12px;
+  padding: 15px 20px 0;
 }
 
 /* // FOOTER CONTAINER - only serves to be read as a container */
@@ -28,7 +28,6 @@ body {
 .FooterGrid {
   background-color: var(--emw--footer-color-bg, var(--emw--color-background, #0E1511));
   display: grid;
-  padding: 8px 24px 0 24px;
   grid-template-rows: repeat(9, auto);
   grid-template-areas: "one" "two" "three" "four" "five" "six" "seven";
 }

package/dist/collection/components/general-footer-template/general-footer-template.js

@@ -1,71 +1,30 @@
 import { h } from "@stencil/core";
 import { componentRules, normalizeRepeaterContent, getDevicePlatform } from "../../utils/utils";
+import { setClientStyling, setClientStylingURL, setStreamStyling } from "../../../../../../../../libs/common/src/styling/index";
 export class GeneralFooterTemplate {
     constructor() {
+        this.platform = getDevicePlatform();
         /**
-         * Environment segregation
+         *  Host element
          */
+        this.MANDATORY_FIELDS = ['endpoint', 'language', 'sections'];
+        this.language = undefined;
+        this.sections = undefined;
+        this.endpoint = undefined;
         this.env = 'stage';
-        /**
-         * User roles
-         */
         this.userRoles = 'everyone';
-        /**
-         * If this is true it will emit an event at the moment the content with url its clicked
-         */
+        this.userid = undefined;
+        this.session = undefined;
+        this.baseUrl = undefined;
         this.navigateViaEvent = 'false';
-        /**
-        * Post Message event to be sent on navigation via Event
-        */
         this.postMessageEvent = 'NavigateTo';
-        /**
-         * custom styling by string content
-         */
         this.clientStyling = '';
-        /**
-         * custom styling by href
-        */
         this.clientStylingUrl = '';
-        /**
-         * custom translation by href
-         */
         this.translationUrl = '';
-        /**
-         * clockformat
-         */
         this.clockFormat = 'HH:MM:ss';
-        /**
-         * configurable time zone
-         */
         this.timeZone = '';
-        /**
-          * wether or not styling appends should be disallowed
-        */
+        this.mbSource = undefined;
         this.hasErrors = false;
-        this.stylingAppends = false;
-        this.platform = getDevicePlatform();
-        /**
-         *  Host element
-         */
-        this.MANDATORY_FIELDS = ['endpoint', 'language', 'sections'];
-        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);
-            });
-        };
     }
     validateMandatoryFields() {
         this.MANDATORY_FIELDS.forEach((field) => {
@@ -93,16 +52,19 @@ export class GeneralFooterTemplate {
             }
         });
     }
-    componentDidRender() {
-        // start custom styling area
-        if (!this.stylingAppends && this.stylingContainer) {
+    disconnectedCallback() {
+        this.stylingSubscription && this.stylingSubscription.unsubscribe();
+    }
+    componentDidLoad() {
+        if (window.emMessageBus != undefined) {
+            setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`, this.stylingSubscription);
+        }
+        else {
             if (this.clientStyling)
-                this.setClientStyling();
+                setClientStyling(this.stylingContainer, this.clientStyling);
             if (this.clientStylingUrl)
-                this.setClientStylingURL();
-            this.stylingAppends = true;
+                setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
         }
-        // end custom styling area
     }
     render() {
         if (this.hasErrors) {
@@ -122,12 +84,12 @@ export class GeneralFooterTemplate {
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
-            "$": ["./demo-footer.scss", "./pariuri_plus_variant.css", "./variant_style_1.css", "general-footer-template.scss"]
+            "$": ["./demo-footer.scss"]
         };
     }
     static get styleUrls() {
         return {
-            "$": ["demo-footer.css", "pariuri_plus_variant.css", "variant_style_1.css", "general-footer-template.css"]
+            "$": ["demo-footer.css"]
         };
     }
     static get properties() {
@@ -146,8 +108,6 @@ export class GeneralFooterTemplate {
                     "tags": [],
                     "text": "the language of the footer"
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "language",
                 "reflect": true
             },
@@ -165,8 +125,6 @@ export class GeneralFooterTemplate {
                     "tags": [],
                     "text": "which sections should be included in the footer (some have defined attributes)"
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "sections",
                 "reflect": true
             },
@@ -184,8 +142,6 @@ export class GeneralFooterTemplate {
                     "tags": [],
                     "text": "endpoint for data retrieval"
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "endpoint",
                 "reflect": true
             },
@@ -203,8 +159,6 @@ export class GeneralFooterTemplate {
                     "tags": [],
                     "text": "Environment segregation"
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "env",
                 "reflect": true,
                 "defaultValue": "'stage'"
@@ -223,8 +177,6 @@ export class GeneralFooterTemplate {
                     "tags": [],
                     "text": "User roles"
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "user-roles",
                 "reflect": true,
                 "defaultValue": "'everyone'"
@@ -243,8 +195,6 @@ export class GeneralFooterTemplate {
                     "tags": [],
                     "text": "the id of the current userid, to be used in order to determine login status (relevant for certain components ex. \"panic button\")"
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "userid",
                 "reflect": true
             },
@@ -262,8 +212,6 @@ export class GeneralFooterTemplate {
                     "tags": [],
                     "text": "the current session, to be used in order to determine login status (relevant for certain components ex. \"panic button\")"
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "session",
                 "reflect": true
             },
@@ -281,8 +229,6 @@ export class GeneralFooterTemplate {
                     "tags": [],
                     "text": "If this is present, then the footer will attach the baseurl inside src for all HelperLinks present in the footer (so it will be baseurl + helper_link) - This is needed when the footer is integrated inside an iframe it can\u2019t take the parent host to create the right anchors."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "base-url",
                 "reflect": true
             },
@@ -300,8 +246,6 @@ export class GeneralFooterTemplate {
                     "tags": [],
                     "text": "If this is true it will emit an event at the moment the content with url its clicked"
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "navigate-via-event",
                 "reflect": true,
                 "defaultValue": "'false'"
@@ -320,8 +264,6 @@ export class GeneralFooterTemplate {
                     "tags": [],
                     "text": "Post Message event to be sent on navigation via Event"
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "post-message-event",
                 "reflect": true,
                 "defaultValue": "'NavigateTo'"
@@ -340,8 +282,6 @@ export class GeneralFooterTemplate {
                     "tags": [],
                     "text": "custom styling by string content"
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "client-styling",
                 "reflect": true,
                 "defaultValue": "''"
@@ -360,8 +300,6 @@ export class GeneralFooterTemplate {
                     "tags": [],
                     "text": "custom styling by href"
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "client-styling-url",
                 "reflect": true,
                 "defaultValue": "''"
@@ -380,8 +318,6 @@ export class GeneralFooterTemplate {
                     "tags": [],
                     "text": "custom translation by href"
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "translation-url",
                 "reflect": true,
                 "defaultValue": "''"
@@ -400,8 +336,6 @@ export class GeneralFooterTemplate {
                     "tags": [],
                     "text": "clockformat"
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "clock-format",
                 "reflect": true,
                 "defaultValue": "'HH:MM:ss'"
@@ -420,18 +354,32 @@ export class GeneralFooterTemplate {
                     "tags": [],
                     "text": "configurable time zone"
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "time-zone",
                 "reflect": true,
                 "defaultValue": "''"
+            },
+            "mbSource": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "wether or not styling appends should be disallowed"
+                },
+                "attribute": "mb-source",
+                "reflect": true
             }
         };
     }
     static get states() {
         return {
-            "hasErrors": {},
-            "stylingAppends": {}
+            "hasErrors": {}
         };
     }
 }

package/dist/collection/components/image-list/image-list.js

@@ -1,17 +1,12 @@
 import { h } from "@stencil/core";
 export class ImageList {
     constructor() {
-        /**
-         * If this is true it will emit an event at the moment the content with url its clicked
-         */
-        this.navigateViaEvent = false;
-        /**
-        * Post Message event to be sent on navigation via event
-        */
-        this.postMessageEvent = '';
         this.navigateLink = (url, target, externalLink) => {
             window.postMessage({ type: this.postMessageEvent, path: url, url, target, externalLink }, window.location.href);
         };
+        this.repeaterContent = undefined;
+        this.navigateViaEvent = false;
+        this.postMessageEvent = '';
     }
     render() {
         var _a, _b, _c;
@@ -47,8 +42,6 @@ export class ImageList {
                     "tags": [],
                     "text": "the links content to be displayed, including titles, url, open target"
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "repeater-content",
                 "reflect": false
             },
@@ -66,8 +59,6 @@ export class ImageList {
                     "tags": [],
                     "text": "If this is true it will emit an event at the moment the content with url its clicked"
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "navigate-via-event",
                 "reflect": false,
                 "defaultValue": "false"
@@ -86,8 +77,6 @@ export class ImageList {
                     "tags": [],
                     "text": "Post Message event to be sent on navigation via event"
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "post-message-event",
                 "reflect": true,
                 "defaultValue": "''"

package/dist/collection/components/link-section-list/link-section-list.js

@@ -1,13 +1,10 @@
 import { h } from "@stencil/core";
 export class LinkSectionList {
     constructor() {
-        /**
-         * If this is true it will emit an event at the moment the content with url its clicked
-         */
+        this.repeaterContent = undefined;
+        this.baseUrl = undefined;
+        this.language = undefined;
         this.navigateViaEvent = false;
-        /**
-        * Post Message event to be sent on navigation via event
-        */
         this.postMessageEvent = '';
     }
     navigateLink(link) {
@@ -42,7 +39,7 @@ export class LinkSectionList {
             }
             return obj;
         }, []);
-        return h("div", { class: "LinkSectionListContainer" }, h("div", { class: "LinkSectionListWrapper" }, h("h2", { class: "LinkSectionListTitle" }, linkSections.categoryTitle), linkSections.map(category => h("ul", null, category.links.map(link => h("li", { class: "LinkSectionListLink", key: link.linkName }, this.navigateViaEvent === true ? (h("span", null, link.linkName && link.icon ? (h("span", { class: "LinkSectionListLinkText", onClick: () => this.navigateLink(link) }, h("img", { class: "LinkSectionIcon", src: link.icon, alt: "icon" }), h("span", null, link.linkName, " "))) :
+        return h("div", { class: "LinkSectionListContainer" }, h("div", { class: "LinkSectionListWrapper" }, this.repeaterContent.categoryTitle && h("h2", { class: "LinkSectionListTitle" }, this.repeaterContent.categoryTitle), linkSections.map(category => h("ul", null, category.categoryTitle && h("p", null, category.categoryTitle), category.links.map(link => h("li", { class: "LinkSectionListLink", key: link.linkName }, this.navigateViaEvent === true ? (h("span", null, link.linkName && link.icon ? (h("span", { class: "LinkSectionListLinkText", onClick: () => this.navigateLink(link) }, h("img", { class: "LinkSectionIcon", src: link.icon, alt: "icon" }), h("span", null, link.linkName, " "))) :
             link.linkName ?
                 h("span", { class: "LinkSectionListLinkText", onClick: () => this.navigateLink(link) }, h("span", null, link.linkName, " "))
                 :
@@ -77,8 +74,6 @@ export class LinkSectionList {
                     "tags": [],
                     "text": "the links content to be displayed, including titles, url, open target"
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "repeater-content",
                 "reflect": false
             },
@@ -96,8 +91,6 @@ export class LinkSectionList {
                     "tags": [],
                     "text": "If this is present, then the footer will attach the baseurl inside src for all HelperLinks present in the footer (so it will be baseurl + helper_link) - This is needed when the footer is integrated inside an iframe it can\u2019t take the parent host to create the right anchors."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "base-url",
                 "reflect": true
             },
@@ -115,8 +108,6 @@ export class LinkSectionList {
                     "tags": [],
                     "text": "the language of the footer"
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "language",
                 "reflect": true
             },
@@ -134,8 +125,6 @@ export class LinkSectionList {
                     "tags": [],
                     "text": "If this is true it will emit an event at the moment the content with url its clicked"
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "navigate-via-event",
                 "reflect": false,
                 "defaultValue": "false"
@@ -154,8 +143,6 @@ export class LinkSectionList {
                     "tags": [],
                     "text": "Post Message event to be sent on navigation via event"
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "post-message-event",
                 "reflect": true,
                 "defaultValue": "''"

package/dist/collection/utils/utils.js

@@ -177,7 +177,7 @@ export const normalizeRepeaterContent = (data) => {
             isExternalLink: 'isExternalLink',
             image: 'paymentMethodImage',
             title: 'paymentTitle',
-            url: 'paymentUrl',
+            url: 'paymentMethodUrl',
             target: 'target'
         },
         sponsors: {

package/dist/esm/custom-clock.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h } from './index-e2977b84.js';
+import { r as registerInstance, h } from './index-7f32a4a7.js';
 import { c as commonjsGlobal } from './_commonjsHelpers-57e89916.js';
 
 const DEFAULT_LANGUAGE = 'en';
@@ -74,23 +74,6 @@ const CustomClockStyle0 = customClockCss;
 const CustomClock = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        /**
-         * clockformat
-         */
-        this.clockFormat = 'HH:mm:ss';
-        /**
-         * configurable time zone
-         */
-        this.timeZone = '';
-        /**
-         * custom translation by href
-         */
-        this.translationUrl = '';
-        /**
-         * language
-         */
-        this.language = 'en';
-        this.timeString = '';
         this.startClock = () => {
             this.intervalId = setInterval(() => {
                 if (this.timeZone.length > 0) {
@@ -103,6 +86,11 @@ const CustomClock = class {
                 }
             }, 1000);
         };
+        this.clockFormat = 'HH:mm:ss';
+        this.timeZone = '';
+        this.translationUrl = '';
+        this.language = 'en';
+        this.timeString = '';
     }
     handleNewTranslations() {
         getTranslations(this.translationUrl);