@everymatrix/general-footer-template 1.54.12 → 1.56.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-c1afe75b.js');
 const _commonjsHelpers = require('./_commonjsHelpers-0a7b82d9.js');
 
 const DEFAULT_LANGUAGE = 'en';

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-c1afe75b.js');
 const _commonjsHelpers = require('./_commonjsHelpers-0a7b82d9.js');
 
 var decode = {};
@@ -5114,6 +5114,10 @@ function sourceOffset(inputCSS, position) {
 }
 
 class Node$4 {
+  get proxyOf() {
+    return this
+  }
+
   constructor(defaults = {}) {
     this.raws = {};
     this[isClean$2] = false;
@@ -5475,10 +5479,6 @@ class Node$4 {
     for (let i in opts) data[i] = opts[i];
     return result.warn(text, data)
   }
-
-  get proxyOf() {
-    return this
-  }
 }
 
 var node_1 = Node$4;
@@ -5499,6 +5499,10 @@ Comment$4.default = Comment$4;
 let Node$2 = node_1;
 
 class Declaration$4 extends Node$2 {
+  get variable() {
+    return this.prop.startsWith('--') || this.prop[0] === '$'
+  }
+
   constructor(defaults) {
     if (
       defaults &&
@@ -5510,10 +5514,6 @@ class Declaration$4 extends Node$2 {
     super(defaults);
     this.type = 'decl';
   }
-
-  get variable() {
-    return this.prop.startsWith('--') || this.prop[0] === '$'
-  }
 }
 
 var declaration = Declaration$4;
@@ -5544,6 +5544,16 @@ function markTreeDirty(node) {
 }
 
 class Container$7 extends Node$1 {
+  get first() {
+    if (!this.proxyOf.nodes) return undefined
+    return this.proxyOf.nodes[0]
+  }
+
+  get last() {
+    if (!this.proxyOf.nodes) return undefined
+    return this.proxyOf.nodes[this.proxyOf.nodes.length - 1]
+  }
+
   append(...children) {
     for (let child of children) {
       let nodes = this.normalize(child, this.last);
@@ -5910,16 +5920,6 @@ class Container$7 extends Node$1 {
       }
     })
   }
-
-  get first() {
-    if (!this.proxyOf.nodes) return undefined
-    return this.proxyOf.nodes[0]
-  }
-
-  get last() {
-    if (!this.proxyOf.nodes) return undefined
-    return this.proxyOf.nodes[this.proxyOf.nodes.length - 1]
-  }
 }
 
 Container$7.registerParse = dependant => {
@@ -6219,6 +6219,10 @@ let sourceMapAvailable$1 = Boolean(SourceMapConsumer$1 && SourceMapGenerator$1);
 let pathAvailable$1 = Boolean(resolve$1 && isAbsolute);
 
 class Input$4 {
+  get from() {
+    return this.file || this.id
+  }
+
   constructor(css, opts = {}) {
     if (
       css === null ||
@@ -6441,10 +6445,6 @@ class Input$4 {
     }
     return json
   }
-
-  get from() {
-    return this.file || this.id
-  }
 }
 
 var input = Input$4;
@@ -6575,12 +6575,6 @@ let Container$3 = container;
 let list$1 = list_1;
 
 class Rule$3 extends Container$3 {
-  constructor(defaults) {
-    super(defaults);
-    this.type = 'rule';
-    if (!this.nodes) this.nodes = [];
-  }
-
   get selectors() {
     return list$1.comma(this.selector)
   }
@@ -6590,6 +6584,12 @@ class Rule$3 extends Container$3 {
     let sep = match ? match[0] : ',' + this.raw('between', 'beforeOpen');
     this.selector = values.join(sep);
   }
+
+  constructor(defaults) {
+    super(defaults);
+    this.type = 'rule';
+    if (!this.nodes) this.nodes = [];
+  }
 }
 
 var rule = Rule$3;
@@ -7875,7 +7875,7 @@ class Parser$1 {
 
   unknownWord(tokens) {
     throw this.input.error(
-      'Unknown word',
+      'Unknown word ' + tokens[0][1],
       { offset: tokens[0][2] },
       { offset: tokens[0][2] + tokens[0][1].length }
     )
@@ -7952,6 +7952,10 @@ Warning$2.default = Warning$2;
 let Warning$1 = warning;
 
 class Result$3 {
+  get content() {
+    return this.css
+  }
+
   constructor(processor, root, opts) {
     this.processor = processor;
     this.messages = [];
@@ -7981,10 +7985,6 @@ class Result$3 {
   warnings() {
     return this.messages.filter(i => i.type === 'warning')
   }
-
-  get content() {
-    return this.css
-  }
 }
 
 var result = Result$3;
@@ -8094,6 +8094,38 @@ function cleanMarks(node) {
 let postcss$1 = {};
 
 class LazyResult$2 {
+  get content() {
+    return this.stringify().content
+  }
+
+  get css() {
+    return this.stringify().css
+  }
+
+  get map() {
+    return this.stringify().map
+  }
+
+  get messages() {
+    return this.sync().messages
+  }
+
+  get opts() {
+    return this.result.opts
+  }
+
+  get processor() {
+    return this.result.processor
+  }
+
+  get root() {
+    return this.sync().root
+  }
+
+  get [Symbol.toStringTag]() {
+    return 'LazyResult'
+  }
+
   constructor(processor, css, opts) {
     this.stringified = false;
     this.processed = false;
@@ -8463,21 +8495,38 @@ class LazyResult$2 {
   warnings() {
     return this.sync().warnings()
   }
+}
+
+LazyResult$2.registerPostcss = dependant => {
+  postcss$1 = dependant;
+};
+
+var lazyResult = LazyResult$2;
+LazyResult$2.default = LazyResult$2;
+
+Root$2.registerLazyResult(LazyResult$2);
+Document$2.registerLazyResult(LazyResult$2);
+
+let MapGenerator = mapGenerator;
+let parse$1 = parse_1;
+const Result$1 = result;
+let stringify$1 = stringify_1;
 
+class NoWorkResult$1 {
   get content() {
-    return this.stringify().content
+    return this.result.css
   }
 
   get css() {
-    return this.stringify().css
+    return this.result.css
   }
 
   get map() {
-    return this.stringify().map
+    return this.result.map
   }
 
   get messages() {
-    return this.sync().messages
+    return []
   }
 
   get opts() {
@@ -8489,30 +8538,31 @@ class LazyResult$2 {
   }
 
   get root() {
-    return this.sync().root
-  }
-
-  get [Symbol.toStringTag]() {
-    return 'LazyResult'
-  }
-}
+    if (this._root) {
+      return this._root
+    }
 
-LazyResult$2.registerPostcss = dependant => {
-  postcss$1 = dependant;
-};
+    let root;
+    let parser = parse$1;
 
-var lazyResult = LazyResult$2;
-LazyResult$2.default = LazyResult$2;
+    try {
+      root = parser(this._css, this._opts);
+    } catch (error) {
+      this.error = error;
+    }
 
-Root$2.registerLazyResult(LazyResult$2);
-Document$2.registerLazyResult(LazyResult$2);
+    if (this.error) {
+      throw this.error
+    } else {
+      this._root = root;
+      return root
+    }
+  }
 
-let MapGenerator = mapGenerator;
-let parse$1 = parse_1;
-const Result$1 = result;
-let stringify$1 = stringify_1;
+  get [Symbol.toStringTag]() {
+    return 'NoWorkResult'
+  }
 
-class NoWorkResult$1 {
   constructor(processor, css, opts) {
     css = css.toString();
     this.stringified = false;
@@ -8579,56 +8629,6 @@ class NoWorkResult$1 {
   warnings() {
     return []
   }
-
-  get content() {
-    return this.result.css
-  }
-
-  get css() {
-    return this.result.css
-  }
-
-  get map() {
-    return this.result.map
-  }
-
-  get messages() {
-    return []
-  }
-
-  get opts() {
-    return this.result.opts
-  }
-
-  get processor() {
-    return this.result.processor
-  }
-
-  get root() {
-    if (this._root) {
-      return this._root
-    }
-
-    let root;
-    let parser = parse$1;
-
-    try {
-      root = parser(this._css, this._opts);
-    } catch (error) {
-      this.error = error;
-    }
-
-    if (this.error) {
-      throw this.error
-    } else {
-      this._root = root;
-      return root
-    }
-  }
-
-  get [Symbol.toStringTag]() {
-    return 'NoWorkResult'
-  }
 }
 
 var noWorkResult = NoWorkResult$1;
@@ -8641,7 +8641,7 @@ let Root$1 = root;
 
 class Processor$1 {
   constructor(plugins = []) {
-    this.version = '8.5.2';
+    this.version = '8.5.3';
     this.plugins = this.normalize(plugins);
   }
 
@@ -9740,12 +9740,13 @@ const CustomContentSection = class {
     }
     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-c1afe75b.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,17 +213,65 @@ 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);
+  }
+}
 
-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 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);
+    });
+}
+
+/**
+ * @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) {
@@ -264,34 +312,12 @@ const GeneralFooterTemplate = class {
          * configurable time zone
          */
         this.timeZone = '';
-        /**
-          * wether or not styling appends should be disallowed
-        */
         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 +345,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 +374,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,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-10cb8e8c.js');
+const index = require('./index-c1afe75b.js');
 const appGlobals = require('./app-globals-3a1e7e63.js');
 
 /*
@@ -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-c1afe75b.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;

package/dist/cjs/{index-10cb8e8c.js → index-c1afe75b.js}

@@ -21,7 +21,7 @@ function _interopNamespace(e) {
 }
 
 const NAMESPACE = 'general-footer-template';
-const BUILD = /* general-footer-template */ { allRenderFn: true, appendChildSlotFix: false, asyncLoading: true, asyncQueue: false, attachStyles: true, cloneNodeFix: false, cmpDidLoad: true, cmpDidRender: true, cmpDidUnload: false, cmpDidUpdate: false, cmpShouldUpdate: false, cmpWillLoad: true, cmpWillRender: false, cmpWillUpdate: false, connectedCallback: false, constructableCSS: true, cssAnnotations: true, devTools: false, disconnectedCallback: true, element: false, event: false, experimentalScopedSlotChanges: false, experimentalSlotFixes: false, formAssociated: false, hasRenderFn: true, hostListener: false, hostListenerTarget: false, hostListenerTargetBody: false, hostListenerTargetDocument: false, hostListenerTargetParent: false, hostListenerTargetWindow: false, hotModuleReplacement: false, hydrateClientSide: false, hydrateServerSide: false, hydratedAttribute: false, hydratedClass: true, hydratedSelectorName: "hydrated", initializeNextTick: false, invisiblePrehydration: true, isDebug: false, isDev: false, isTesting: false, lazyLoad: true, lifecycle: true, lifecycleDOMEvents: false, member: true, method: false, mode: false, modernPropertyDecls: false, observeAttribute: true, profile: false, prop: true, propBoolean: true, propMutable: false, propNumber: false, propString: true, reflect: true, scoped: true, scopedSlotTextContentFix: false, scriptDataOpts: false, shadowDelegatesFocus: false, shadowDom: true, slot: false, slotChildNodesFix: false, slotRelocation: false, state: true, style: true, svg: false, taskQueue: true, transformTagName: false, updatable: true, vdomAttribute: true, vdomClass: true, vdomFunctional: true, vdomKey: true, vdomListener: true, vdomPropOrAttr: true, vdomRef: true, vdomRender: true, vdomStyle: true, vdomText: true, vdomXlink: false, watchCallback: true };
+const BUILD = /* general-footer-template */ { allRenderFn: true, appendChildSlotFix: false, asyncLoading: true, asyncQueue: false, attachStyles: true, cloneNodeFix: false, cmpDidLoad: true, cmpDidRender: false, cmpDidUnload: false, cmpDidUpdate: false, cmpShouldUpdate: false, cmpWillLoad: true, cmpWillRender: false, cmpWillUpdate: false, connectedCallback: false, constructableCSS: true, cssAnnotations: true, devTools: false, disconnectedCallback: true, element: false, event: false, experimentalScopedSlotChanges: false, experimentalSlotFixes: false, formAssociated: false, hasRenderFn: true, hostListener: false, hostListenerTarget: false, hostListenerTargetBody: false, hostListenerTargetDocument: false, hostListenerTargetParent: false, hostListenerTargetWindow: false, hotModuleReplacement: false, hydrateClientSide: false, hydrateServerSide: false, hydratedAttribute: false, hydratedClass: true, hydratedSelectorName: "hydrated", initializeNextTick: false, invisiblePrehydration: true, isDebug: false, isDev: false, isTesting: false, lazyLoad: true, lifecycle: true, lifecycleDOMEvents: false, member: true, method: false, mode: false, modernPropertyDecls: false, observeAttribute: true, profile: false, prop: true, propBoolean: true, propMutable: false, propNumber: false, propString: true, reflect: true, scoped: true, scopedSlotTextContentFix: false, scriptDataOpts: false, shadowDelegatesFocus: false, shadowDom: true, slot: false, slotChildNodesFix: false, slotRelocation: false, state: true, style: true, svg: false, taskQueue: true, transformTagName: false, updatable: true, vdomAttribute: true, vdomClass: true, vdomFunctional: true, vdomKey: true, vdomListener: true, vdomPropOrAttr: true, vdomRef: true, vdomRender: true, vdomStyle: true, vdomText: true, vdomXlink: false, watchCallback: true };
 
 /*
  Stencil Client Platform v4.26.0 | MIT Licensed | https://stenciljs.com
@@ -962,9 +962,6 @@ var postUpdateComponent = (hostRef) => {
   const endPostUpdate = createTime("postUpdate", tagName);
   const instance = hostRef.$lazyInstance$ ;
   const ancestorComponent = hostRef.$ancestorComponent$;
-  {
-    safeCall(instance, "componentDidRender", void 0, elm);
-  }
   if (!(hostRef.$flags$ & 64 /* hasLoadedComponent */)) {
     hostRef.$flags$ |= 64 /* hasLoadedComponent */;
     {

package/dist/cjs/link-section-list.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-10cb8e8c.js');
+const index = require('./index-c1afe75b.js');
 
 const linkSectionListCss = ":host {\n  display: block;\n  margin: 0;\n  padding: 0;\n}\n\n.LinkSectionListContainer {\n  display: block;\n  container-type: inline-size;\n}\n.LinkSectionListWrapper {\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  grid-template-columns: 1fr;\n}\n.LinkSectionListTitle {\n  font-weight: var(--emw--font-weight-semibold, 500);\n  text-transform: uppercase;\n}\n.LinkSectionListLink {\n  font-weight: var(--emw--font-weight-light, 300);\n}\n\nul {\n  width: fit-content;\n  margin: 0;\n  display: flex;\n  flex-direction: column;\n  gap: var(--emw--spacing-medium, 16px);\n  padding-left: var(--emw--spacing-small-minus, 10px);\n  font-size: var(--emw--font-size-small, 16px);\n  text-transform: uppercase;\n}\nul li {\n  list-style: disc;\n  display: flex;\n  align-items: center;\n  padding-left: 25px;\n  position: relative;\n}\nul li::before {\n  content: \"\";\n  position: absolute;\n  left: 0;\n  top: 50%;\n  transform: translateY(-50%);\n  width: 8px;\n  height: 8px;\n  background-color: var(--emw--footer-color-primary, var(--emw--color-primary, #22B04E));\n  border-radius: 50%;\n}\nul li .LinkSectionListLinkText {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n}\nul li .LinkSectionListLinkText span {\n  text-align: center;\n  cursor: pointer;\n}\nul li .LinkSectionListLinkText img.LinkSectionIcon {\n  position: relative;\n  height: 25px;\n  padding: 0 5px;\n}\n\na {\n  color: inherit;\n}\n\n@container (min-width: 280px) {\n  .LinkSectionListWrapper {\n    grid-template-columns: repeat(2, 1fr);\n  }\n}\n@container (min-width: 650px) {\n  .LinkSectionListWrapper {\n    grid-gap: 2rem;\n    grid-template-columns: repeat(4, 1fr);\n    grid-template-rows: 1fr;\n  }\n}";
 const LinkSectionListStyle0 = linkSectionListCss;
@@ -51,7 +51,7 @@ const LinkSectionList = class {
             }
             return obj;
         }, []);
-        return index.h("div", { class: "LinkSectionListContainer" }, index.h("div", { class: "LinkSectionListWrapper" }, index.h("h2", { class: "LinkSectionListTitle" }, linkSections.categoryTitle), linkSections.map(category => index.h("ul", null, category.links.map(link => index.h("li", { class: "LinkSectionListLink", key: link.linkName }, this.navigateViaEvent === true ? (index.h("span", null, link.linkName && link.icon ? (index.h("span", { class: "LinkSectionListLinkText", onClick: () => this.navigateLink(link) }, index.h("img", { class: "LinkSectionIcon", src: link.icon, alt: "icon" }), index.h("span", null, link.linkName, " "))) :
+        return index.h("div", { class: "LinkSectionListContainer" }, index.h("div", { class: "LinkSectionListWrapper" }, this.repeaterContent.categoryTitle && index.h("h2", { class: "LinkSectionListTitle" }, this.repeaterContent.categoryTitle), linkSections.map(category => index.h("ul", null, category.categoryTitle && index.h("p", null, category.categoryTitle), category.links.map(link => index.h("li", { class: "LinkSectionListLink", key: link.linkName }, this.navigateViaEvent === true ? (index.h("span", null, link.linkName && link.icon ? (index.h("span", { class: "LinkSectionListLinkText", onClick: () => this.navigateLink(link) }, index.h("img", { class: "LinkSectionIcon", src: link.icon, alt: "icon" }), index.h("span", null, link.linkName, " "))) :
             link.linkName ?
                 index.h("span", { class: "LinkSectionListLinkText", onClick: () => this.navigateLink(link) }, index.h("span", null, link.linkName, " "))
                 :