@everymatrix/general-footer-template 1.54.11 → 1.55.0

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-10cb8e8c.js');
+const index = require('./index-d85e54c5.js');
 const _commonjsHelpers = require('./_commonjsHelpers-0a7b82d9.js');
 
 const DEFAULT_LANGUAGE = 'en';
@@ -78,23 +78,6 @@ const CustomClockStyle0 = customClockCss;
 const CustomClock = class {
     constructor(hostRef) {
         index.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) {
@@ -107,6 +90,11 @@ const CustomClock = class {
                 }
             }, 1000);
         };
+        this.clockFormat = 'HH:mm:ss';
+        this.timeZone = '';
+        this.translationUrl = '';
+        this.language = 'en';
+        this.timeString = '';
     }
     handleNewTranslations() {
         getTranslations(this.translationUrl);

package/dist/cjs/custom-content-section.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index$2 = require('./index-10cb8e8c.js');
+const index$2 = require('./index-d85e54c5.js');
 const _commonjsHelpers = require('./_commonjsHelpers-0a7b82d9.js');
 
 var decode = {};
@@ -3331,7 +3331,7 @@ function filter$1(test, node, recurse = true, limit = Infinity) {
 function find(test, nodes, recurse, limit) {
     const result = [];
     /** Stack of the arrays we are looking at. */
-    const nodeStack = [Array.isArray(nodes) ? nodes : [nodes]];
+    const nodeStack = [nodes];
     /** Stack of the indices within the arrays. */
     const indexStack = [0];
     for (;;) {
@@ -3385,19 +3385,20 @@ function findOneChild(test, nodes) {
  * @returns The first node that passes `test`.
  */
 function findOne(test, nodes, recurse = true) {
-    const searchedNodes = Array.isArray(nodes) ? nodes : [nodes];
-    for (let i = 0; i < searchedNodes.length; i++) {
-        const node = searchedNodes[i];
-        if (isTag(node) && test(node)) {
-            return node;
+    let elem = null;
+    for (let i = 0; i < nodes.length && !elem; i++) {
+        const node = nodes[i];
+        if (!isTag(node)) {
+            continue;
+        }
+        else if (test(node)) {
+            elem = node;
         }
-        if (recurse && hasChildren(node) && node.children.length > 0) {
-            const found = findOne(test, node.children, true);
-            if (found)
-                return found;
+        else if (recurse && node.children.length > 0) {
+            elem = findOne(test, node.children, true);
         }
     }
-    return null;
+    return elem;
 }
 /**
  * Checks if a tree of nodes contains at least one node passing a test.
@@ -3408,8 +3409,8 @@ function findOne(test, nodes, recurse = true) {
  * @returns Whether a tree of nodes contains at least one node passing the test.
  */
 function existsOne(test, nodes) {
-    return (Array.isArray(nodes) ? nodes : [nodes]).some((node) => (isTag(node) && test(node)) ||
-        (hasChildren(node) && existsOne(test, node.children)));
+    return nodes.some((checked) => isTag(checked) &&
+        (test(checked) || existsOne(test, checked.children)));
 }
 /**
  * Search an array of nodes and their children for elements passing a test function.
@@ -3423,7 +3424,7 @@ function existsOne(test, nodes) {
  */
 function findAll(test, nodes) {
     const result = [];
-    const nodeStack = [Array.isArray(nodes) ? nodes : [nodes]];
+    const nodeStack = [nodes];
     const indexStack = [0];
     for (;;) {
         if (indexStack[0] >= nodeStack[0].length) {
@@ -3437,9 +3438,11 @@ function findAll(test, nodes) {
             continue;
         }
         const elem = nodeStack[0][indexStack[0]++];
-        if (isTag(elem) && test(elem))
+        if (!isTag(elem))
+            continue;
+        if (test(elem))
             result.push(elem);
-        if (hasChildren(elem) && elem.children.length > 0) {
+        if (elem.children.length > 0) {
             indexStack.unshift(0);
             nodeStack.unshift(elem.children);
         }
@@ -3569,19 +3572,6 @@ function getElementById(id, nodes, recurse = true) {
 function getElementsByTagName(tagName, nodes, recurse = true, limit = Infinity) {
     return filter$1(Checks["tag_name"](tagName), nodes, recurse, limit);
 }
-/**
- * Returns all nodes with the supplied `className`.
- *
- * @category Legacy Query Functions
- * @param className Class name to search for.
- * @param nodes Nodes to search through.
- * @param recurse Also consider child nodes.
- * @param limit Maximum number of nodes to return.
- * @returns All nodes with the supplied `className`.
- */
-function getElementsByClassName(className, nodes, recurse = true, limit = Infinity) {
-    return filter$1(getAttribCheck("class", className), nodes, recurse, limit);
-}
 /**
  * Returns all nodes with the supplied `type`.
  *
@@ -3949,7 +3939,6 @@ const index = /*#__PURE__*/Object.freeze({
     getElements: getElements,
     getElementById: getElementById,
     getElementsByTagName: getElementsByTagName,
-    getElementsByClassName: getElementsByClassName,
     getElementsByTagType: getElementsByTagType,
     removeSubsets: removeSubsets,
     get DocumentPosition () { return DocumentPosition; },
@@ -5260,12 +5249,9 @@ class Node$4 {
     if (opts.index) {
       pos = this.positionInside(opts.index);
     } else if (opts.word) {
-      let inputString = ('document' in this.source.input)
-        ? this.source.input.document
-        : this.source.input.css;
-      let stringRepresentation = inputString.slice(
-        sourceOffset(inputString, this.source.start),
-        sourceOffset(inputString, this.source.end)
+      let stringRepresentation = this.source.input.css.slice(
+        sourceOffset(this.source.input.css, this.source.start),
+        sourceOffset(this.source.input.css, this.source.end)
       );
       let index = stringRepresentation.indexOf(opts.word);
       if (index !== -1) pos = this.positionInside(index);
@@ -5276,14 +5262,11 @@ class Node$4 {
   positionInside(index) {
     let column = this.source.start.column;
     let line = this.source.start.line;
-    let inputString = ('document' in this.source.input)
-      ? this.source.input.document
-      : this.source.input.css;
-    let offset = sourceOffset(inputString, this.source.start);
+    let offset = sourceOffset(this.source.input.css, this.source.start);
     let end = offset + index;
 
     for (let i = offset; i < end; i++) {
-      if (inputString[i] === '\n') {
+      if (this.source.input.css[i] === '\n') {
         column = 1;
         line += 1;
       } else {
@@ -5316,12 +5299,9 @@ class Node$4 {
         };
 
     if (opts.word) {
-      let inputString = ('document' in this.source.input)
-        ? this.source.input.document
-        : this.source.input.css;
-      let stringRepresentation = inputString.slice(
-        sourceOffset(inputString, this.source.start),
-        sourceOffset(inputString, this.source.end)
+      let stringRepresentation = this.source.input.css.slice(
+        sourceOffset(this.source.input.css, this.source.start),
+        sourceOffset(this.source.input.css, this.source.end)
       );
       let index = stringRepresentation.indexOf(opts.word);
       if (index !== -1) {
@@ -6020,34 +6000,22 @@ Document$3.registerProcessor = dependant => {
 var document = Document$3;
 Document$3.default = Document$3;
 
-// This alphabet uses `A-Za-z0-9_-` symbols.
-// The order of characters is optimized for better gzip and brotli compression.
-// References to the same file (works both for gzip and brotli):
-// `'use`, `andom`, and `rict'`
-// References to the brotli default dictionary:
-// `-26T`, `1983`, `40px`, `75px`, `bush`, `jack`, `mind`, `very`, and `wolf`
 let urlAlphabet =
   'useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict';
-
 let customAlphabet = (alphabet, defaultSize = 21) => {
   return (size = defaultSize) => {
     let id = '';
-    // A compact alternative for `for (var i = 0; i < step; i++)`.
-    let i = size | 0;
+    let i = size;
     while (i--) {
-      // `| 0` is more compact and faster than `Math.floor()`.
       id += alphabet[(Math.random() * alphabet.length) | 0];
     }
     return id
   }
 };
-
 let nanoid$1 = (size = 21) => {
   let id = '';
-  // A compact alternative for `for (var i = 0; i < step; i++)`.
-  let i = size | 0;
+  let i = size;
   while (i--) {
-    // `| 0` is more compact and faster than `Math.floor()`.
     id += urlAlphabet[(Math.random() * 64) | 0];
   }
   return id
@@ -6237,9 +6205,6 @@ class Input$4 {
       this.hasBOM = false;
     }
 
-    this.document = this.css;
-    if (opts.document) this.document = opts.document.toString();
-
     if (opts.from) {
       if (
         !pathAvailable$1 ||
@@ -7629,8 +7594,6 @@ class Parser$1 {
       if (prev && prev.type === 'rule' && !prev.raws.ownSemicolon) {
         prev.raws.ownSemicolon = this.spaces;
         this.spaces = '';
-        prev.source.end = this.getPosition(token[2]);
-        prev.source.end.offset += prev.raws.ownSemicolon.length;
       }
     }
   }
@@ -8641,7 +8604,7 @@ let Root$1 = root;
 
 class Processor$1 {
   constructor(plugins = []) {
-    this.version = '8.5.2';
+    this.version = '8.4.49';
     this.plugins = this.normalize(plugins);
   }
 
@@ -9068,15 +9031,6 @@ function sanitizeHtml(html, options, _recursing) {
       if (skip) {
         if (options.disallowedTagsMode === 'discard' || options.disallowedTagsMode === 'completelyDiscard') {
           // We want the contents but not this tag
-          if (frame.innerText && !hasText) {
-            const escaped = escapeHtml(frame.innerText);
-            if (options.textFilter) {
-              result += options.textFilter(escaped, name);
-            } else {
-              result += escapeHtml(frame.innerText);
-            }
-            addedText = true;
-          }
           return;
         }
         tempResult = result;
@@ -9729,23 +9683,20 @@ const CustomContentSectionStyle0 = customContentSectionCss;
 const CustomContentSection = class {
     constructor(hostRef) {
         index$2.registerInstance(this, hostRef);
-        /**
-         * 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$1(this.customContent, {
-            allowedTags: sanitizeHtml$1.defaults.allowedTags.concat(['img']),
+            allowedTags: sanitizeHtml$1.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 index$2.h("div", { key: '894fdc79eb310d5a7cfde48445afd3d1d464359e', class: "CustomContentSectionContainer" }, index$2.h("div", { key: 'cfecce550a4e9b6b692ff12de96262e1413f8f2b', class: "CustomContentSectionWrapper" }, index$2.h("div", { key: '1e76edcbb408a184848bda0c86a99d2467e3e081', class: "CustomContentSectionContent", innerHTML: clean }), this.repeaterContent ? index$2.h("image-list", { style: { width: "100%" }, repeaterContent: this.repeaterContent ? this.repeaterContent : null, "navigate-via-event": this.navigateViaEvent, "post-message-event": this.postMessageEvent }) : ''));
+        return index$2.h("div", { key: '7cfcf732fff969c5bcd0b08a4b921ae3592732b3', class: "CustomContentSectionContainer" }, index$2.h("div", { key: 'c5cf9a5ada78c792ebb778d3d3084e0b0b938ed4', class: "CustomContentSectionWrapper" }, index$2.h("div", { key: 'abc8184b4eb9c97e0261bec4baebfb7e272cd3bb', class: "CustomContentSectionContent", innerHTML: clean }), this.repeaterContent ? index$2.h("image-list", { style: { width: "100%" }, repeaterContent: this.repeaterContent ? this.repeaterContent : null, "navigate-via-event": this.navigateViaEvent, "post-message-event": this.postMessageEvent }) : ''));
     }
 };
 CustomContentSection.style = CustomContentSectionStyle0;

package/dist/cjs/general-footer-template.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-10cb8e8c.js');
+const index = require('./index-d85e54c5.js');
 
 /**
  * custom rules for component types
@@ -176,7 +176,7 @@ const normalizeRepeaterContent = (data) => {
             isExternalLink: 'isExternalLink',
             image: 'paymentMethodImage',
             title: 'paymentTitle',
-            url: 'paymentUrl',
+            url: 'paymentMethodUrl',
             target: 'target'
         },
         sponsors: {
@@ -213,85 +213,91 @@ const normalizeRepeaterContent = (data) => {
     return repeaterResponse;
 };
 
-const demoFooterCss = ":host {\n  display: block;\n}\n\n/* $-background-primary: #14202d; */\n* {\n  font-family: sans-serif;\n}\n\nhtml,\nbody {\n  margin: 0;\n  padding: 0;\n  font-family: inherit;\n}\n\n.FooterSectionContainer {\n  color: var(--emw--footer-typography, var(--emw--color-thpography, #fff));\n  padding: 12px;\n}\n\n/* // FOOTER CONTAINER - only serves to be read as a container */\n.FooterContainer {\n  container-type: inline-size;\n  container-name: footerContainer;\n}\n\n.FooterGrid {\n  background-color: var(--emw--footer-color-bg, var(--emw--color-background, #0E1511));\n  display: grid;\n  padding: 8px 24px 0 24px;\n  grid-template-rows: repeat(9, auto);\n  grid-template-areas: \"one\" \"two\" \"three\" \"four\" \"five\" \"six\" \"seven\";\n}\n\n.FooterSectionContainer1 {\n  position: relative;\n  grid-area: one;\n}\n\n.FooterSectionContainer2 {\n  position: relative;\n  grid-area: two;\n}\n\n.FooterSectionContainer3 {\n  position: relative;\n  grid-area: three;\n}\n\n.FooterSectionContainer4 {\n  position: relative;\n  grid-area: four;\n}\n\n.FooterSectionContainer5 {\n  grid-area: five;\n}\n\n.FooterSectionContainer6 {\n  padding-top: 22px;\n  grid-area: six;\n}\n\n.FooterSectionContainer7 {\n  grid-area: seven;\n}\n\n/* // remove paddings */\n.FooterSectionContainer7 div {\n  padding: 0;\n}\n\n@container (max-width: 750px) {\n  .FooterSectionContainer3:after,\n  .FooterSectionContainer2:after {\n    position: absolute;\n    content: \"\";\n    height: 1px;\n    width: 90%;\n    background-color: var(--emw--color-gray-100, #444);\n  }\n  .FooterSectionContainer5 {\n    grid-area: five;\n    background-color: var(--emw--color-background-secondary, #060706);\n    padding: 30px 0;\n    font-size: var(--emw--font-size-medium, 16px);\n    min-height: var(--emw--size-medium-plus, 100px);\n    justify-self: center;\n  }\n}\n/* // STYLES FOR TABLET / DESKTOP */\n@container (min-width: 750px) {\n  .FooterGrid {\n    background: var(--emw--footer-color-bg, var(--emw--color-background, #0E1511));\n    display: grid;\n    border-top: 5px solid var(--emw--footer-color-primary, var(--emw--color-primary, #22B04E));\n    grid-template-rows: repeat(5, auto);\n    grid-template-columns: 1fr 1fr 1fr 1fr;\n    grid-template-areas: \"one two three four\" \"five five five five\" \"six six six six\" \"seven seven seven seven\";\n  }\n  .FooterSectionContainer1 {\n    padding: 30px 40px;\n    grid-area: one;\n    background: var(--emw--color-background, #000000);\n  }\n  .FooterSectionContainer2 {\n    grid-area: two;\n    min-height: var(--emw--size-4x-medium, 500px);\n  }\n  .FooterSectionContainer3 {\n    grid-area: three;\n  }\n  .FooterSectionContainer4 {\n    grid-area: four;\n  }\n  .FooterSectionContainer5 {\n    grid-area: five;\n    background-color: var(--emw--color-background-secondary, #091217);\n    padding: var(--emw--spacing-x-large, 30px) 0;\n    font-size: var(--emw--font-size-medium, 16px);\n    min-height: var(--emw--size-medium-plus, 100px);\n  }\n  .FooterSectionContainer6 {\n    grid-area: six;\n    padding: 0;\n  }\n  .FooterSectionContainer7 {\n    grid-area: seven;\n    padding: 0;\n  }\n  /* // remove paddings */\n  .FooterSectionContainer5 .CustomContentSectionWrapper {\n    padding: 0;\n  }\n  .FooterSectionContainer5 .CustomContentSectionWrapper div {\n    display: flex;\n    flex-direction: left;\n    align-items: center;\n    padding-left: var(--emw--spacing-large, 20px);\n  }\n  .FooterSectionContainer5 .CustomContentSectionWrapper div p {\n    margin: var(--emw--spacing-2x-small, 5px);\n    text-align: center;\n  }\n  .FooterSectionContainer6 .CustomContentSectionWrapper div p {\n    text-align: center;\n  }\n  .FooterSectionContainer6 .ImageListWrapper {\n    padding: 0;\n  }\n  .FooterSectionContainer6 .ImageListWrapper {\n    padding: 0;\n  }\n  .FooterSectionContainer7 .CustomContentSectionWrapper {\n    padding: 0;\n    padding-bottom: var(--emw--spacing-large, 22px);\n    font-size: var(--emw--font-size-small, 14px);\n  }\n}";
-const GeneralFooterTemplateStyle0 = demoFooterCss;
+/**
+ * @name setClientStyling
+ * @description Method used to create and append to the passed element of the widget a style element with the content received
+ * @param {HTMLElement} stylingContainer The reference element of the widget
+ * @param {string} clientStyling The style content
+ */
+function setClientStyling(stylingContainer, clientStyling) {
+  if (stylingContainer) {
+    const sheet = document.createElement('style');
+    sheet.innerHTML = clientStyling;
+    stylingContainer.appendChild(sheet);
+  }
+}
+
+/**
+ * @name setClientStylingURL
+ * @description Method used to create and append to the passed element of the widget a style element with the content fetched from a given URL
+ * @param {HTMLElement} stylingContainer The reference element of the widget
+ * @param {string} clientStylingUrl The URL of the style content
+ */
+function setClientStylingURL(stylingContainer, clientStylingUrl) {
+  const url = new URL(clientStylingUrl);
+
+  fetch(url.href)
+    .then((res) => res.text())
+    .then((data) => {
+      const cssFile = document.createElement('style');
+      cssFile.innerHTML = data;
+      if (stylingContainer) {
+        stylingContainer.appendChild(cssFile);
+      }
+    })
+    .catch((err) => {
+      console.error('There was an error while trying to load client styling from URL', err);
+    });
+}
 
-const pariuriPlusVariantCss = ":host {\n  display: block;\n}\n\n/* $-background-primary: #14202d; */\n\n* {\n  font-family: sans-serif;\n}\n\nhtml,\nbody {\n  margin: 0;\n  padding: 0;\n  font-family: inherit;\n}\n\n.FooterSectionContainer {\n  color: #fff;\n  padding: 12px;\n}\n\n/* // FOOTER CONTAINER - only serves to be read as a container */\n.FooterContainer {\n  container-type: inline-size;\n  container-name: footerContainer;\n}\n\n\n.FooterGrid {\n  background-color: #14202D;\n  display: grid;\n  padding: 8px 24px 0 24px;\n  grid-template-rows: repeat(9, auto);\n  grid-template-areas: \"one\"\n                       \"two\"\n                       \"three\"\n                       \"four\"\n                       \"five\"\n                       \"six\"\n                       \"seven\";\n}\n\n \n\n.FooterSectionContainer1 {\n  position: relative;\n  grid-area: one;\n  \n}\n.FooterSectionContainer2 {\n  position: relative;\n  grid-area: two;\n  border-bottom: 1px solid rgba(254, 254, 254, 0.2);\n}\n.FooterSectionContainer3 {\n  position: relative;\n  grid-area: three;\n  \n}\n.FooterSectionContainer4 {\n  position: relative;\n  grid-area: four;\n  border-bottom: 1px solid rgba(254, 254, 254, 0.2);\n}\n.FooterSectionContainer5 {\n  grid-area: five;\n  /* border-bottom: 1px solid #444; */\n}\n.FooterSectionContainer6 {\n  padding-top: 22px;\n  grid-area: six;\n}\n.FooterSectionContainer7 {\n  grid-area: seven;\n}\n\n/* // remove paddings */\n.FooterSectionContainer7 div{\n  padding: 0;\n}\n\n.FooterSectionContainer3:after {\n  position: absolute;\n  content: \"\";\n  left: 30%;\n  bottom: -20px;\n  height: 1px;\n  width: 40%;\n  background-color: #444;\n}\n\n\n\n/* // STYLES FOR TABLET / DESKTOP */\n@container (min-width: 750px) {\n  .FooterGrid {\n    background: $-background-primary;\n    display: grid;\n    grid-template-rows: repeat(5, auto);\n    grid-template-columns: 2fr 1fr;\n    grid-template-areas: \"one two\"\n                         \"three four\"\n                         \"five five\"\n                         \"six six\"\n                         \"seven seven\";\n  }\n  \n  \n  .FooterSectionContainer1 {\n    grid-area: one;\n    border-bottom: 1px solid rgba(254, 254, 254, 0.2);\n  }\n  .FooterSectionContainer2 {\n    grid-area: two;\n\n  }\n  .FooterSectionContainer3 {\n    grid-area: three;\n    border-bottom: 1px solid rgba(254, 254, 254, 0.2);\n  }\n  .FooterSectionContainer4 {\n    grid-area: four;\n  }\n  .FooterSectionContainer5 {\n    grid-area: five;\n  }\n  .FooterSectionContainer6 {\n    grid-area: six;\n    padding: 0;\n  }\n  .FooterSectionContainer7 {\n    grid-area: seven;\n    padding: 0;\n  }\n\n  /* VERTICAL BARS */\n  .FooterSectionContainer3:after {\n    position: absolute;\n    content: \"\";\n    left: initial;\n    bottom:initial;\n    top: 30%;\n    right: 20px;\n    width: 1px;\n    height: 40%;\n    background-color: #444;\n  }\n\n  /* // remove paddings */\n  .FooterSectionContainer5 .CustomContentSectionWrapper {\n    padding: 0;\n  }\n\n  .FooterSectionContainer5 .CustomContentSectionWrapper div {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n  }\n\n  .FooterSectionContainer5 .CustomContentSectionWrapper div p {\n    margin: 5px;\n    text-align: center;\n  }\n\n  .FooterSectionContainer6 .CustomContentSectionWrapper div p {\n    text-align: center;\n  }\n\n  .FooterSectionContainer6 .ImageListWrapper {\n    padding: 0;\n  }\n\n  .FooterSectionContainer6 .ImageListWrapper {\n    padding: 0;\n    /* padding-bottom: 22px; */\n    /* font-size: 14px; */\n  }\n\n  .FooterSectionContainer7 .CustomContentSectionWrapper {\n    padding: 0;\n    padding-bottom: 22px;\n    font-size: 14px;\n  }\n}";
-const GeneralFooterTemplateStyle1 = pariuriPlusVariantCss;
+/**
+ * @name setStreamLibrary
+ * @description Method used to create and append to the passed element of the widget a style element with content fetched from the MessageBus
+ * @param {HTMLElement} stylingContainer The highest element of the widget
+ * @param {string} domain The domain from where the content should be fetched (e.g. 'Casino.Style', 'App.Style', 'casino-footer.style', etc.)
+ * @param {ref} subscription A reference to a variable where the subscription should be saved for unsubscribing when no longer needed
+ */
+function setStreamStyling(stylingContainer, domain, subscription) {
+  if (window.emMessageBus) {
+    const sheet = document.createElement('style');
 
-const variantStyle1Css = ":host {\n  display: block;\n}\n\n/* $-background-primary: #14202d; */\n\n* {\n  font-family: sans-serif;\n}\n\nhtml,\nbody {\n  margin: 0;\n  padding: 0;\n  font-family: inherit;\n}\n\n.footer-section__container {\n  color: #777;\n  padding: 12px;\n}\n\n/* // FOOTER CONTAINER - only serves to be read as a container */\n.footer-container {\n  container-type: inline-size;\n  container-name: footerContainer;\n}\n\n\n.footer-grid {\n  background-color: #14202d;\n  display: grid;\n  padding: 0 50px;\n  grid-template-rows: repeat(9, auto);\n  grid-template-areas: \"one\"\n                       \"two\"\n                       \"three\"\n                       \"four\"\n                       \"five\"\n                       \"six\"\n                       \"seven\";\n}\n\n \n\n.footer-section__container--1 {\n  grid-area: one;\n  border-bottom: 1px solid #444;\n}\n.footer-section__container--2 {\n  position: relative;\n  grid-area: two;\n  border-bottom: 1px solid #444;\n}\n.footer-section__container--3 {\n  grid-area: three;\n  border-bottom: 1px solid #444;\n}\n.footer-section__container--4 {\n  position: relative;\n  grid-area: four;\n  border-bottom: 1px solid #444;\n}\n.footer-section__container--5 {\n  grid-area: five;\n  border-bottom: 1px solid #444;\n}\n.footer-section__container--6 {\n  padding-top: 22px;\n  grid-area: six;\n}\n.footer-section__container--7 {\n  grid-area: seven;\n}\n\n/* // remove paddings */\n.footer-section__container--7 div{\n  padding: 0;\n}\n\n\n\n/* // STYLES FOR TABLET / DESKTOP */\n@container (min-width: 750px) {\n  .footer-grid {\n    background: $-background-primary;\n    display: grid;\n    grid-template-rows: repeat(5, auto);\n    grid-template-columns: 1fr 1fr;\n    grid-template-areas: \"one one\"\n                         \"two three\"\n                         \"four five\"\n                         \"six six\"\n                         \"seven seven\";\n  }\n  \n  \n  .footer-section__container--1 {\n    grid-area: one;\n  }\n  .footer-section__container--2 {\n    grid-area: two;\n  }\n  .footer-section__container--3 {\n    grid-area: three;\n  }\n  .footer-section__container--4 {\n    grid-area: four;\n  }\n  .footer-section__container--5 {\n    grid-area: five;\n  }\n  .footer-section__container--6 {\n    grid-area: six;\n    padding: 0;\n  }\n  .footer-section__container--7 {\n    grid-area: seven;\n    padding: 0;\n  }\n\n  /* VERTICAL BARS */\n  .footer-section__container--2:after,\n  .footer-section__container--4:after {\n    position: absolute;\n    content: \"\";\n    top: 10%;\n    right: 0;\n    width: 1px;\n    height: 80%;\n    background-color: #444;\n  }\n\n  /* // remove paddings */\n  .footer-section__container--6 .image-list__wrapper {\n    padding: 22px 0 0 0;\n  }\n\n  .footer-section__container--7 .custom-content-section__wrapper {\n    padding: 0;\n    padding-bottom: 22px;\n    font-size: 14px;\n  }\n\n  \n}";
-const GeneralFooterTemplateStyle2 = variantStyle1Css;
+    window.emMessageBus.subscribe(domain, (data) => {
+      sheet.innerHTML = data;
+      if (stylingContainer) {
+        stylingContainer.appendChild(sheet);
+      }
+    });
+  }
+}
 
-const generalFooterTemplateCss = ":host {\n  display: block;\n}\n\n* {\n  font-family: sans-serif;\n}\n\nhtml,\nbody {\n  margin: 0;\n  padding: 0;\n  font-family: inherit;\n}\n\n.footer-section__container {\n  color: var(--emw--footer-typography, var(--emw--color-white, #FFFFFF));\n  padding: 12px;\n}\n\n.footer-container {\n  container-type: inline-size;\n  container-name: footerContainer;\n}\n\n.footer-grid {\n  background-color: var(--emw--footer-color-bg, var(--emw--color-dark-blue, #07072A));\n  display: grid;\n  grid-template-rows: repeat(9, auto);\n  grid-template-areas: \"one\" \"two\" \"three\" \"four\" \"five\" \"six\" \"seven\";\n}\n\n.footer-section__container--1 {\n  grid-area: one;\n}\n.footer-section__container--2 {\n  grid-area: two;\n}\n.footer-section__container--3 {\n  grid-area: three;\n}\n.footer-section__container--4 {\n  grid-area: four;\n}\n.footer-section__container--5 {\n  grid-area: five;\n}\n.footer-section__container--6 {\n  grid-area: six;\n}\n.footer-section__container--7 {\n  grid-area: seven;\n}\n\n@container (min-width: 750px) {\n  .footer-grid {\n    background: var(--emw--footer-color-bg, var(--emw--color-dark-blue, #07072A));\n    display: grid;\n    grid-template-rows: repeat(7, auto);\n    grid-template-columns: 2fr 1fr;\n    grid-template-areas: \"one two\" \"three four\" \"five five\" \"six six\" \"seven seven\" \"eight eight\" \"nine nine\";\n  }\n  .footer-section__container--1 {\n    grid-area: one;\n  }\n  .footer-section__container--2 {\n    grid-area: two;\n  }\n  .footer-section__container--3 {\n    grid-area: three;\n  }\n  .footer-section__container--4 {\n    grid-area: four;\n  }\n  .footer-section__container--5 {\n    grid-area: five;\n  }\n  .footer-section__container--6 {\n    grid-area: six;\n  }\n  .footer-section__container--7 {\n    grid-area: seven;\n  }\n}";
-const GeneralFooterTemplateStyle3 = generalFooterTemplateCss;
+const demoFooterCss = ":host {\n  display: block;\n}\n\n/* $-background-primary: #14202d; */\n* {\n  font-family: sans-serif;\n}\n\nhtml,\nbody {\n  margin: 0;\n  padding: 0;\n  font-family: inherit;\n}\n\n.FooterSectionContainer {\n  color: var(--emw--footer-typography, var(--emw--color-thpography, #fff));\n  padding: 15px 20px 0;\n}\n\n/* // FOOTER CONTAINER - only serves to be read as a container */\n.FooterContainer {\n  container-type: inline-size;\n  container-name: footerContainer;\n}\n\n.FooterGrid {\n  background-color: var(--emw--footer-color-bg, var(--emw--color-background, #0E1511));\n  display: grid;\n  grid-template-rows: repeat(9, auto);\n  grid-template-areas: \"one\" \"two\" \"three\" \"four\" \"five\" \"six\" \"seven\";\n}\n\n.FooterSectionContainer1 {\n  position: relative;\n  grid-area: one;\n}\n\n.FooterSectionContainer2 {\n  position: relative;\n  grid-area: two;\n}\n\n.FooterSectionContainer3 {\n  position: relative;\n  grid-area: three;\n}\n\n.FooterSectionContainer4 {\n  position: relative;\n  grid-area: four;\n}\n\n.FooterSectionContainer5 {\n  grid-area: five;\n}\n\n.FooterSectionContainer6 {\n  padding-top: 22px;\n  grid-area: six;\n}\n\n.FooterSectionContainer7 {\n  grid-area: seven;\n}\n\n/* // remove paddings */\n.FooterSectionContainer7 div {\n  padding: 0;\n}\n\n@container (max-width: 750px) {\n  .FooterSectionContainer3:after,\n  .FooterSectionContainer2:after {\n    position: absolute;\n    content: \"\";\n    height: 1px;\n    width: 90%;\n    background-color: var(--emw--color-gray-100, #444);\n  }\n  .FooterSectionContainer5 {\n    grid-area: five;\n    background-color: var(--emw--color-background-secondary, #060706);\n    padding: 30px 0;\n    font-size: var(--emw--font-size-medium, 16px);\n    min-height: var(--emw--size-medium-plus, 100px);\n    justify-self: center;\n  }\n}\n/* // STYLES FOR TABLET / DESKTOP */\n@container (min-width: 750px) {\n  .FooterGrid {\n    background: var(--emw--footer-color-bg, var(--emw--color-background, #0E1511));\n    display: grid;\n    border-top: 5px solid var(--emw--footer-color-primary, var(--emw--color-primary, #22B04E));\n    grid-template-rows: repeat(5, auto);\n    grid-template-columns: 1fr 1fr 1fr 1fr;\n    grid-template-areas: \"one two three four\" \"five five five five\" \"six six six six\" \"seven seven seven seven\";\n  }\n  .FooterSectionContainer1 {\n    padding: 30px 40px;\n    grid-area: one;\n    background: var(--emw--color-background, #000000);\n  }\n  .FooterSectionContainer2 {\n    grid-area: two;\n    min-height: var(--emw--size-4x-medium, 500px);\n  }\n  .FooterSectionContainer3 {\n    grid-area: three;\n  }\n  .FooterSectionContainer4 {\n    grid-area: four;\n  }\n  .FooterSectionContainer5 {\n    grid-area: five;\n    background-color: var(--emw--color-background-secondary, #091217);\n    padding: var(--emw--spacing-x-large, 30px) 0;\n    font-size: var(--emw--font-size-medium, 16px);\n    min-height: var(--emw--size-medium-plus, 100px);\n  }\n  .FooterSectionContainer6 {\n    grid-area: six;\n    padding: 0;\n  }\n  .FooterSectionContainer7 {\n    grid-area: seven;\n    padding: 0;\n  }\n  /* // remove paddings */\n  .FooterSectionContainer5 .CustomContentSectionWrapper {\n    padding: 0;\n  }\n  .FooterSectionContainer5 .CustomContentSectionWrapper div {\n    display: flex;\n    flex-direction: left;\n    align-items: center;\n    padding-left: var(--emw--spacing-large, 20px);\n  }\n  .FooterSectionContainer5 .CustomContentSectionWrapper div p {\n    margin: var(--emw--spacing-2x-small, 5px);\n    text-align: center;\n  }\n  .FooterSectionContainer6 .CustomContentSectionWrapper div p {\n    text-align: center;\n  }\n  .FooterSectionContainer6 .ImageListWrapper {\n    padding: 0;\n  }\n  .FooterSectionContainer6 .ImageListWrapper {\n    padding: 0;\n  }\n  .FooterSectionContainer7 .CustomContentSectionWrapper {\n    padding: 0;\n    padding-bottom: var(--emw--spacing-large, 22px);\n    font-size: var(--emw--font-size-small, 14px);\n  }\n}";
+const GeneralFooterTemplateStyle0 = demoFooterCss;
 
 const GeneralFooterTemplate = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
+        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) => {
@@ -319,16 +325,19 @@ const GeneralFooterTemplate = class {
             }
         });
     }
-    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`);
+        }
+        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) {
@@ -345,6 +354,6 @@ const GeneralFooterTemplate = class {
         }
     }
 };
-GeneralFooterTemplate.style = GeneralFooterTemplateStyle0 + (GeneralFooterTemplateStyle1 + (GeneralFooterTemplateStyle2 + GeneralFooterTemplateStyle3));
+GeneralFooterTemplate.style = GeneralFooterTemplateStyle0;
 
 exports.general_footer_template = GeneralFooterTemplate;

package/dist/cjs/general-footer-template.cjs.js

@@ -2,11 +2,11 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-10cb8e8c.js');
+const index = require('./index-d85e54c5.js');
 const appGlobals = require('./app-globals-3a1e7e63.js');
 
 /*
- Stencil Client Patch Browser v4.26.0 | MIT Licensed | https://stenciljs.com
+ 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('general-footer-template.cjs.js', document.baseURI).href));
@@ -19,7 +19,7 @@ var patchBrowser = () => {
 
 patchBrowser().then(async (options) => {
   await appGlobals.globalScripts();
-  return index.bootstrapLazy([["custom-content-section.cjs",[[2,"custom-content-section",{"customContent":[1,"custom-content"],"repeaterContent":[8,"repeater-content"],"navigateViaEvent":[516,"navigate-via-event"],"postMessageEvent":[513,"post-message-event"]}]]],["custom-clock.cjs",[[2,"custom-clock",{"clockFormat":[513,"clock-format"],"timeZone":[513,"time-zone"],"translationUrl":[513,"translation-url"],"language":[513],"timeString":[32]},null,{"translationUrl":["handleNewTranslations"]}]]],["general-footer-template.cjs",[[1,"general-footer-template",{"language":[513],"sections":[513],"endpoint":[513],"env":[513],"userRoles":[513,"user-roles"],"userid":[513],"session":[513],"baseUrl":[513,"base-url"],"navigateViaEvent":[513,"navigate-via-event"],"postMessageEvent":[513,"post-message-event"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"translationUrl":[513,"translation-url"],"clockFormat":[513,"clock-format"],"timeZone":[513,"time-zone"],"hasErrors":[32],"stylingAppends":[32]}]]],["link-section-list.cjs",[[0,"link-section-list",{"repeaterContent":[8,"repeater-content"],"baseUrl":[513,"base-url"],"language":[513],"navigateViaEvent":[4,"navigate-via-event"],"postMessageEvent":[513,"post-message-event"]}]]],["image-list.cjs",[[2,"image-list",{"repeaterContent":[8,"repeater-content"],"navigateViaEvent":[4,"navigate-via-event"],"postMessageEvent":[513,"post-message-event"]}]]]], options);
+  return index.bootstrapLazy([["custom-content-section.cjs",[[2,"custom-content-section",{"customContent":[1,"custom-content"],"repeaterContent":[8,"repeater-content"],"navigateViaEvent":[516,"navigate-via-event"],"postMessageEvent":[513,"post-message-event"]}]]],["custom-clock.cjs",[[2,"custom-clock",{"clockFormat":[513,"clock-format"],"timeZone":[513,"time-zone"],"translationUrl":[513,"translation-url"],"language":[513],"timeString":[32]},null,{"translationUrl":["handleNewTranslations"]}]]],["general-footer-template.cjs",[[1,"general-footer-template",{"language":[513],"sections":[513],"endpoint":[513],"env":[513],"userRoles":[513,"user-roles"],"userid":[513],"session":[513],"baseUrl":[513,"base-url"],"navigateViaEvent":[513,"navigate-via-event"],"postMessageEvent":[513,"post-message-event"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"translationUrl":[513,"translation-url"],"clockFormat":[513,"clock-format"],"timeZone":[513,"time-zone"],"mbSource":[513,"mb-source"],"hasErrors":[32]}]]],["link-section-list.cjs",[[0,"link-section-list",{"repeaterContent":[8,"repeater-content"],"baseUrl":[513,"base-url"],"language":[513],"navigateViaEvent":[4,"navigate-via-event"],"postMessageEvent":[513,"post-message-event"]}]]],["image-list.cjs",[[2,"image-list",{"repeaterContent":[8,"repeater-content"],"navigateViaEvent":[4,"navigate-via-event"],"postMessageEvent":[513,"post-message-event"]}]]]], options);
 });
 
 exports.setNonce = index.setNonce;

package/dist/cjs/image-list.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-10cb8e8c.js');
+const index = require('./index-d85e54c5.js');
 
 const imageListCss = ".sc-image-list-h {\n  display: block;\n  margin: 0;\n  padding: 0;\n}\n\n.ImageListContainer.sc-image-list {\n  height: 100%;\n}\n.ImageListWrapper.sc-image-list {\n  box-sizing: border-box;\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  max-width: 90%;\n  margin: auto;\n  padding: var(--emw--spacing-large, 20px) 0;\n}\n.ImageListSectionTitle.sc-image-list {\n  width: 100%;\n  display: flex;\n  justify-content: left;\n  align-content: center;\n  padding: var(--emw--spacing-large, 20px) var(--emw--spacing-medium, 14px) var(--emw--spacing-x-large, 30px);\n  color: var(--emw--footer-typography, var(--emw--color-thpography, #fff));\n  text-transform: uppercase;\n  font-size: 24px;\n  font-weight: 100;\n}\n.ImageListLineup.sc-image-list {\n  box-sizing: border-box;\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--emw--spacing-x-large, 30px);\n  justify-content: left;\n  align-items: flex-start;\n  padding-left: var(--emw--spacing-large, 20px);\n}\n.ImageListIcon.sc-image-list img.sc-image-list {\n  max-height: var(--emw--size-medium-2x-minus, 40px);\n}\n\na.sc-image-list {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: flex-end;\n  text-decoration: none;\n}\n\na.sc-image-list p.sc-image-list {\n  text-decoration: none;\n  color: var(--emw--color-gray-100, #666);\n  margin: 0;\n}\n\n@container (max-width: 750px) {\n  .ImageListSectionTitle.sc-image-list {\n    justify-content: center;\n    font-size: var(--emw--font-size-medium, 16px);\n    color: var(--emw--footer-typography, var(--emw--color-thpography, #fff));\n    padding: var(--emw--spacing-large, 20px) 0 var(--emw--spacing-x-large, 30px);\n    justify-content: center;\n  }\n  .ImageListLineup.sc-image-list {\n    justify-content: center;\n    padding: 0;\n  }\n}";
 const ImageListStyle0 = imageListCss;
@@ -10,17 +10,12 @@ const ImageListStyle0 = imageListCss;
 const ImageList = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        /**
-         * 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;