@everymatrix/general-footer-template 1.60.0 → 1.60.2

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-a589a1e7.js');
+const index = require('./index-4f1d0ebb.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-a589a1e7.js');
+const index$2 = require('./index-4f1d0ebb.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 = [nodes];
+    const nodeStack = [Array.isArray(nodes) ? nodes : [nodes]];
     /** Stack of the indices within the arrays. */
     const indexStack = [0];
     for (;;) {
@@ -3385,20 +3385,19 @@ function findOneChild(test, nodes) {
  * @returns The first node that passes `test`.
  */
 function findOne(test, nodes, recurse = true) {
-    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;
+    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;
         }
-        else if (recurse && node.children.length > 0) {
-            elem = findOne(test, node.children, true);
+        if (recurse && hasChildren(node) && node.children.length > 0) {
+            const found = findOne(test, node.children, true);
+            if (found)
+                return found;
         }
     }
-    return elem;
+    return null;
 }
 /**
  * Checks if a tree of nodes contains at least one node passing a test.
@@ -3409,8 +3408,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 nodes.some((checked) => isTag(checked) &&
-        (test(checked) || existsOne(test, checked.children)));
+    return (Array.isArray(nodes) ? nodes : [nodes]).some((node) => (isTag(node) && test(node)) ||
+        (hasChildren(node) && existsOne(test, node.children)));
 }
 /**
  * Search an array of nodes and their children for elements passing a test function.
@@ -3424,7 +3423,7 @@ function existsOne(test, nodes) {
  */
 function findAll(test, nodes) {
     const result = [];
-    const nodeStack = [nodes];
+    const nodeStack = [Array.isArray(nodes) ? nodes : [nodes]];
     const indexStack = [0];
     for (;;) {
         if (indexStack[0] >= nodeStack[0].length) {
@@ -3438,11 +3437,9 @@ function findAll(test, nodes) {
             continue;
         }
         const elem = nodeStack[0][indexStack[0]++];
-        if (!isTag(elem))
-            continue;
-        if (test(elem))
+        if (isTag(elem) && test(elem))
             result.push(elem);
-        if (elem.children.length > 0) {
+        if (hasChildren(elem) && elem.children.length > 0) {
             indexStack.unshift(0);
             nodeStack.unshift(elem.children);
         }
@@ -3572,6 +3569,19 @@ 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`.
  *
@@ -3939,6 +3949,7 @@ const index = /*#__PURE__*/Object.freeze({
     getElements: getElements,
     getElementById: getElementById,
     getElementsByTagName: getElementsByTagName,
+    getElementsByClassName: getElementsByClassName,
     getElementsByTagType: getElementsByTagType,
     removeSubsets: removeSubsets,
     get DocumentPosition () { return DocumentPosition; },

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-a589a1e7.js');
+const index = require('./index-4f1d0ebb.js');
 
 /**
  * custom rules for component types
@@ -270,7 +270,7 @@ function setStreamStyling(stylingContainer, domain, subscription) {
   }
 }
 
-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.SkeletonContainer {\n  width: 100%;\n  height: 1800px;\n  background-color: var(--emw--footer-color-bg, var(--emw-color-dark-blue, #07072A));\n  background-color: green !important;\n  display: flex;\n  gap: 100px;\n  justify-content: center;\n  align-items: center;\n  flex-direction: column;\n}\n.SkeletonContainer .FirstRow {\n  display: grid;\n  grid-template-columns: 100%;\n  column-gap: 20px;\n  gap: 10px;\n}\n.SkeletonContainer .FirstRow .SkeletonImage {\n  display: flex;\n  width: 20%;\n}\n.SkeletonContainer .SecondRow {\n  display: flex;\n  flex-direction: row;\n}\n.SkeletonContainer .SecondRow .SkeletonMenu {\n  display: flex;\n  gap: 10px;\n  flex-direction: column;\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 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 {
@@ -312,7 +312,7 @@ const GeneralFooterTemplate = class {
         const url = new URL(`${this.endpoint}/${this.language}/footer-raw-data`);
         url.searchParams.append('env', this.env);
         url.searchParams.append('device', this.platform);
-        url.searchParams.append('userroles', this.userRoles);
+        url.searchParams.append('userRoles', this.userRoles);
         this.validateMandatoryFields();
         return fetch(url.href)
             .then((res) => res.json())

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-a589a1e7.js');
+const index = require('./index-4f1d0ebb.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"]}]]],["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"],"skeletonLoading":[32]}]]],["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]}]]],["ui-skeleton.cjs",[[0,"ui-skeleton",{"structure":[1],"width":[1],"height":[1],"borderRadius":[2,"border-radius"],"marginBottom":[2,"margin-bottom"],"marginTop":[2,"margin-top"],"marginLeft":[2,"margin-left"],"marginRight":[2,"margin-right"],"animation":[4],"rows":[2],"size":[1],"color":[1],"primaryColor":[1,"primary-color"],"secondaryColor":[1,"secondary-color"]},null,{"structure":["handleStructureChange"],"primaryColor":["updateStyles"],"secondaryColor":["updateStyles"]}]]],["image-list.cjs",[[2,"image-list",{"repeaterContent":[8,"repeater-content"],"navigateViaEvent":[4,"navigate-via-event"],"postMessageEvent":[513,"post-message-event"],"skeletonLoading":[32]}]]]], 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"]}]]],["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"],"skeletonLoading":[32]}]]],["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]}]]],["ui-skeleton.cjs",[[0,"ui-skeleton",{"structure":[1],"width":[1],"height":[1],"borderRadius":[2,"border-radius"],"marginBottom":[2,"margin-bottom"],"marginTop":[2,"margin-top"],"marginLeft":[2,"margin-left"],"marginRight":[2,"margin-right"],"animation":[4],"rows":[2],"size":[1],"color":[1],"primaryColor":[1,"primary-color"],"secondaryColor":[1,"secondary-color"]},null,{"structure":["handleStructureChange"]}]]],["image-list.cjs",[[2,"image-list",{"repeaterContent":[8,"repeater-content"],"navigateViaEvent":[4,"navigate-via-event"],"postMessageEvent":[513,"post-message-event"],"skeletonLoading":[32]}]]]], options);
 });
 
 exports.setNonce = index.setNonce;

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

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-a589a1e7.js');
+const index = require('./index-4f1d0ebb.js');
 
-const imageListCss = ".sc-image-list-h {\n  display: block;\n  margin: 0;\n  padding: 0;\n}\n\n.ContainerImage.sc-image-list {\n  position: relative;\n  display: inline-block;\n  width: 100%;\n}\n\n.SkeletonWrapper.sc-image-list {\n  background-color: #f0f0f0;\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 imageListCss = ".sc-image-list-h {\n  display: block;\n  margin: 0;\n  padding: 0;\n}\n\n.ContainerImage.sc-image-list {\n  position: relative;\n  display: inline-block;\n  width: 100%;\n}\n\n.SkeletonWrapper.sc-image-list {\n  background-color: #f0f0f0;\n  width: 50px;\n  height: 40px;\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;
 
 const ImageList = class {
@@ -42,9 +42,9 @@ const ImageList = class {
         (_a = this.imgRef) === null || _a === void 0 ? void 0 : _a.removeEventListener('load', this.onImageLoad);
     }
     render() {
-        var _a, _b, _c;
-        return index.h("div", { key: '9a0f6ba04dc838fe6fe02baf854fdd86f51a5107', class: "ImageListContainer" }, index.h("div", { key: '3eaaaed1c03bd32a48ea2449ce6f28c7dc5787d0', class: "ImageListWrapper" }, index.h("div", { key: '3f92875995f098dac4225ca2cc789e63c4689817', class: "ImageListSectionTitle" }, (_a = this.repeaterContent) === null || _a === void 0 ? void 0 : _a.categoryTitle), index.h("div", { key: '0b36613e5d4522b6dd3801031c29cb3a8fedc625', class: "ImageListLineup" }, (_c = (_b = this.repeaterContent) === null || _b === void 0 ? void 0 : _b.content) === null || _c === void 0 ? void 0 : _c.map(repeater => {
-            return (index.h("div", { class: 'ImageListIcon' }, this.navigateViaEvent === true ? (index.h("div", { class: 'ImageListIcon', style: { cursor: 'pointer' }, onClick: () => this.navigateLink(repeater === null || repeater === void 0 ? void 0 : repeater.url, repeater === null || repeater === void 0 ? void 0 : repeater.target, repeater === null || repeater === void 0 ? void 0 : repeater.isExternalLink) }, index.h("div", { class: "ContainerImage" }, this.skeletonLoading && (index.h("div", { class: "SkeletonWrapper" }, index.h("ui-skeleton", { structure: "text", rows: "1", width: "100%", height: "40px" }))), index.h("img", { src: repeater === null || repeater === void 0 ? void 0 : repeater.image, alt: "", ref: (el) => (this.imgRef = el) })), index.h("p", null, repeater === null || repeater === void 0 ? void 0 : repeater.title))) : (index.h("a", { href: (repeater === null || repeater === void 0 ? void 0 : repeater.url) || 'javascript:void(0)', target: (repeater === null || repeater === void 0 ? void 0 : repeater.target) || '_parent' }, index.h("div", { class: "ContainerImage" }, this.skeletonLoading && (index.h("div", { class: "SkeletonWrapper" }, index.h("ui-skeleton", { structure: "text", rows: "1", width: "100%", height: "40px" }))), index.h("div", { class: "ImageListPositioner" }, index.h("img", { src: repeater === null || repeater === void 0 ? void 0 : repeater.image, alt: "", ref: (el) => (this.imgRef = el) }))), index.h("p", null, repeater === null || repeater === void 0 ? void 0 : repeater.title)))));
+        var _a, _b, _c, _d;
+        return ((_a = this.repeaterContent) === null || _a === void 0 ? void 0 : _a.content.length) > 0 && index.h("div", { key: '78285fbc71824ba67190d8a7370631c3ab5f80ad', class: "ImageListContainer" }, index.h("div", { key: 'bb68dacdca57a394485a8e3818e1c09187977e80', class: "ImageListWrapper" }, index.h("div", { key: '099aeba506825296ae6721679983b5c6e3a38b7f', class: "ImageListSectionTitle" }, (_b = this.repeaterContent) === null || _b === void 0 ? void 0 : _b.categoryTitle), index.h("div", { key: '0f3d5597a317036526961b6bc6697cce474b6400', class: "ImageListLineup" }, (_d = (_c = this.repeaterContent) === null || _c === void 0 ? void 0 : _c.content) === null || _d === void 0 ? void 0 : _d.map(repeater => {
+            return (index.h("div", { class: 'ImageListIcon' }, this.navigateViaEvent === true ? (index.h("div", { class: 'ImageListIcon', style: { cursor: 'pointer' }, onClick: () => this.navigateLink(repeater === null || repeater === void 0 ? void 0 : repeater.url, repeater === null || repeater === void 0 ? void 0 : repeater.target, repeater === null || repeater === void 0 ? void 0 : repeater.isExternalLink) }, index.h("div", { class: "ContainerImage" }, index.h("img", { src: repeater === null || repeater === void 0 ? void 0 : repeater.image, alt: "icon", ref: (el) => (this.imgRef = el), style: { display: this.skeletonLoading ? 'none' : 'block' } }), this.skeletonLoading && (index.h("div", { class: "SkeletonWrapper" }, index.h("ui-skeleton", { structure: "rectangle", rows: "1", width: "100%", height: "100%" })))), index.h("p", null, repeater === null || repeater === void 0 ? void 0 : repeater.title))) : (index.h("a", { href: (repeater === null || repeater === void 0 ? void 0 : repeater.url) || 'javascript:void(0)', target: (repeater === null || repeater === void 0 ? void 0 : repeater.target) || '_parent' }, index.h("div", { class: "ContainerImage" }, this.skeletonLoading && (index.h("div", { class: "SkeletonWrapper" }, index.h("ui-skeleton", { structure: "rectangle", rows: "1", width: "100%", height: "100%" }))), index.h("div", { class: "ImageListPositioner" }, index.h("img", { src: repeater === null || repeater === void 0 ? void 0 : repeater.image, alt: "icon", ref: (el) => (this.imgRef = el), style: { display: this.skeletonLoading ? 'none' : 'block' } }))), index.h("p", null, repeater === null || repeater === void 0 ? void 0 : repeater.title)))));
         }))));
     }
     get el() { return index.getElement(this); }

package/dist/cjs/{index-a589a1e7.js → index-4f1d0ebb.js}

@@ -1310,6 +1310,7 @@ var bootstrapLazy = (lazyBundles, options = {}) => {
 // src/runtime/nonce.ts
 var setNonce = (nonce) => plt.$nonce$ = nonce;
 
+exports.Host = Host;
 exports.bootstrapLazy = bootstrapLazy;
 exports.getElement = getElement;
 exports.h = h;

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

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-a589a1e7.js');
+const index = require('./index-4f1d0ebb.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 linkSectionListCss = ":host {\n  display: block;\n  margin: 0;\n  padding: 0;\n}\n\n.SkeletonWrapper {\n  width: 25px;\n  height: 25px;\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  position: relative;\n}\nul li .LinkSectionListLinkText {\n  display: flex;\n  gap: 5px;\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}\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;
 
 const LinkSectionList = class {
@@ -72,13 +72,13 @@ const LinkSectionList = class {
             }
             return obj;
         }, []);
-        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("div", { class: "ContainerImage" }, this.skeletonLoading && (index.h("div", { class: "SkeletonWrapper" }, index.h("ui-skeleton", { structure: "text", rows: "1", width: "100%", height: "20px" }))), index.h("img", { class: "LinkSectionIcon", src: link.icon, alt: "icon", ref: (el) => (this.imgRef = el) })), 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("div", { class: "ContainerImage" }, index.h("img", { class: "LinkSectionIcon", src: link.icon, alt: "icon", ref: (el) => (this.imgRef = el), style: { display: this.skeletonLoading ? 'none' : 'block' } }), this.skeletonLoading && (index.h("div", { class: "SkeletonWrapper" }, index.h("ui-skeleton", { structure: "text", rows: "1", width: "100%", height: "100%" })))), index.h("span", { class: '' }, link.linkName, " "))) :
             link.linkName ?
                 index.h("span", { class: "LinkSectionListLinkText", onClick: () => this.navigateLink(link) }, index.h("span", null, link.linkName, " "))
                 :
-                    index.h("span", { class: "LinkSectionListLinkText", onClick: () => this.navigateLink(link) }, index.h("div", { class: "ContainerImage" }, this.skeletonLoading && (index.h("div", { class: "SkeletonWrapper" }, index.h("ui-skeleton", { structure: "text", rows: "1", width: "100%", height: "20px" }))), index.h("img", { class: "LinkSectionIcon", src: link.icon, alt: "icon", ref: (el) => (this.imgRef = el) }))))) : (index.h("a", { class: "LinkSectionListLink", href: link.externalLink ? link.linkUrl : `${this.baseUrl}/${this.language}${link.linkUrl}`, target: link.target || '_blank' }, link.linkName && link.icon ? (index.h("span", { class: "LinkSectionListLinkText" }, index.h("div", { class: "ContainerImage" }, this.skeletonLoading && (index.h("div", { class: "SkeletonWrapper" }, index.h("ui-skeleton", { structure: "text", rows: "1", width: "100%", height: "20px" }))), index.h("img", { class: "LinkSectionIcon", src: link.icon, alt: "icon", ref: (el) => (this.imgRef = el) })), index.h("span", null, link.linkName))) :
+                    index.h("span", { class: "LinkSectionListLinkText", onClick: () => this.navigateLink(link) }, index.h("div", { class: "ContainerImage" }, index.h("img", { class: "LinkSectionIcon", src: link.icon, alt: "icon", ref: (el) => (this.imgRef = el), style: { display: this.skeletonLoading ? 'none' : 'block' } }), this.skeletonLoading && (index.h("div", { class: "SkeletonWrapper" }, index.h("ui-skeleton", { structure: "text", rows: "1", width: "100%", height: "100%" }))))))) : (index.h("a", { class: "LinkSectionListLink", href: link.externalLink ? link.linkUrl : `${this.baseUrl}/${this.language}${link.linkUrl}`, target: link.target || '_blank' }, link.linkName && link.icon ? (index.h("span", { class: "LinkSectionListLinkText" }, index.h("div", { class: "ContainerImage" }, index.h("img", { class: "LinkSectionIcon", src: link.icon, alt: "icon", ref: (el) => (this.imgRef = el), style: { display: this.skeletonLoading ? 'none' : 'block' } }), this.skeletonLoading && (index.h("div", { class: "SkeletonWrapper" }, index.h("ui-skeleton", { structure: "text", rows: "1", width: "100%", height: "100%" })))), index.h("span", null, link.linkName))) :
             link.linkName ? (index.h("span", { class: "LinkSectionListLinkText" }, index.h("span", null, link.linkName))) :
-                index.h("span", { class: "LinkSectionListLinkText" }, index.h("div", { class: "ContainerImage" }, this.skeletonLoading && (index.h("div", { class: "SkeletonWrapper" }, index.h("ui-skeleton", { structure: "text", rows: "1", width: "100%", height: "20px" }))), index.h("img", { class: "LinkSectionIcon", src: link.icon, alt: "icon", ref: (el) => (this.imgRef = el) })))))))))));
+                index.h("span", { class: "LinkSectionListLinkText" }, index.h("div", { class: "ContainerImage" }, index.h("img", { class: "LinkSectionIcon", src: link.icon, alt: "icon", ref: (el) => (this.imgRef = el), style: { display: this.skeletonLoading ? 'none' : 'block' } }), this.skeletonLoading && (index.h("div", { class: "SkeletonWrapper" }, index.h("ui-skeleton", { structure: "text", rows: "1", width: "100%", height: "100%" })))))))))))));
     }
     get el() { return index.getElement(this); }
 };

package/dist/cjs/loader.cjs.js

@@ -2,13 +2,13 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-a589a1e7.js');
+const index = require('./index-4f1d0ebb.js');
 const appGlobals = require('./app-globals-3a1e7e63.js');
 
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;
   await appGlobals.globalScripts();
-  return index.bootstrapLazy([["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"]}]]],["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"],"skeletonLoading":[32]}]]],["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]}]]],["ui-skeleton.cjs",[[0,"ui-skeleton",{"structure":[1],"width":[1],"height":[1],"borderRadius":[2,"border-radius"],"marginBottom":[2,"margin-bottom"],"marginTop":[2,"margin-top"],"marginLeft":[2,"margin-left"],"marginRight":[2,"margin-right"],"animation":[4],"rows":[2],"size":[1],"color":[1],"primaryColor":[1,"primary-color"],"secondaryColor":[1,"secondary-color"]},null,{"structure":["handleStructureChange"],"primaryColor":["updateStyles"],"secondaryColor":["updateStyles"]}]]],["image-list.cjs",[[2,"image-list",{"repeaterContent":[8,"repeater-content"],"navigateViaEvent":[4,"navigate-via-event"],"postMessageEvent":[513,"post-message-event"],"skeletonLoading":[32]}]]]], 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"]}]]],["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"],"skeletonLoading":[32]}]]],["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]}]]],["ui-skeleton.cjs",[[0,"ui-skeleton",{"structure":[1],"width":[1],"height":[1],"borderRadius":[2,"border-radius"],"marginBottom":[2,"margin-bottom"],"marginTop":[2,"margin-top"],"marginLeft":[2,"margin-left"],"marginRight":[2,"margin-right"],"animation":[4],"rows":[2],"size":[1],"color":[1],"primaryColor":[1,"primary-color"],"secondaryColor":[1,"secondary-color"]},null,{"structure":["handleStructureChange"]}]]],["image-list.cjs",[[2,"image-list",{"repeaterContent":[8,"repeater-content"],"navigateViaEvent":[4,"navigate-via-event"],"postMessageEvent":[513,"post-message-event"],"skeletonLoading":[32]}]]]], options);
 };
 
 exports.setNonce = index.setNonce;

package/dist/cjs/ui-skeleton.cjs.entry.js

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-a589a1e7.js');
+const index = require('./index-4f1d0ebb.js');
 
-const uiSkeletonCss = ".Skeleton{animation:skeleton-loading 1s linear infinite alternate}.Rectangle{background-color:var(--emw-skeleton-rectangle-background, #c2c2c2);width:var(--emw-skeleton-rectangle-width, 400px);height:var(--emw-skeleton-rectangle-height, 200px);border-radius:var(--emw-skeleton-rectangle-border-radius, 2px)}.Circle{background-color:var(--emw-skeleton-circle-background, #c2c2c2);width:var(--emw-skeleton-circle-size, 400px);height:var(--emw-skeleton-circle-size, 400px);border-radius:50%}.Text{background-color:var(--emw-skeleton-text-background, #c2c2c2);width:var(--emw-skeleton-text-width, 500px);height:var(--emw-skeleton-text-height, 20px);border-radius:var(--emw-skeleton-text-border-radius, 5px);margin-bottom:var(--emw-skeleton-text-margin-bottom, 5px)}.Text:last-child{width:var(--emw-skeleton-text-width-100, 300px)}.Title{background-color:var(--emw-skeleton-title-background, #c2c2c2);width:var(--emw-skeleton-title-width, 300px);height:var(--emw-skeleton-title-height, 30px);border-radius:var(--emw-skeleton-title-border-radius, 5px);margin-bottom:var(--emw-skeleton-title-margin-bottom, 5px)}.Image{background-color:var(--emw-skeleton-image-background, #c2c2c2);width:var(--emw-skeleton-image-width, 250px);height:var(--emw-skeleton-image-height, 200px);border-radius:var(--emw-skeleton-image-border-radius, 10px)}.Logo{background-color:var(--emw-skeleton-logo-background, #c2c2c2);width:var(--emw-skeleton-logo-width, 120px);height:var(--emw-skeleton-logo-height, 75px);border-radius:var(--emw-skeleton-logo-border-radius, 5px)}@keyframes skeleton-loading{0%{background-color:var(--emw-skeleton-primary-color, var(--emw-skeleton-color-0, #c2c2c2))}100%{background-color:var(--emw-skeleton-secondary-color, var(--emw-skeleton-color-100, #f0f0f0))}}";
+const uiSkeletonCss = ":host{display:block;--emw-skeleton-rectangle-background:#c2c2c2;--emw-skeleton-circle-background:#c2c2c2;--emw-skeleton-text-background:#c2c2c2;--emw-skeleton-title-background:#c2c2c2;--emw-skeleton-image-background:#c2c2c2;--emw-skeleton-logo-background:#c2c2c2;--emw-skeleton-primary-color:#e0e0e0;--emw-skeleton-secondary-color:#f0f0f0}.Skeleton{animation:skeleton-loading 1s linear infinite alternate}.Rectangle{background-color:var(--emw-skeleton-rectangle-background, #c2c2c2);width:var(--emw-skeleton-rectangle-width, 400px);height:var(--emw-skeleton-rectangle-height, 200px);border-radius:var(--emw-skeleton-rectangle-border-radius, 2px)}.Circle{background-color:var(--emw-skeleton-circle-background, #c2c2c2);width:var(--emw-skeleton-circle-size, 400px);height:var(--emw-skeleton-circle-size, 400px);border-radius:50%}.Text{background-color:var(--emw-skeleton-text-background, #c2c2c2);width:var(--emw-skeleton-text-width, 500px);height:var(--emw-skeleton-text-height, 20px);border-radius:var(--emw-skeleton-text-border-radius, 5px);margin-bottom:var(--emw-skeleton-text-margin-bottom, 5px)}.Text:last-child{width:var(--emw-skeleton-text-width-100, 300px)}.Title{background-color:var(--emw-skeleton-title-background, #c2c2c2);width:var(--emw-skeleton-title-width, 300px);height:var(--emw-skeleton-title-height, 30px);border-radius:var(--emw-skeleton-title-border-radius, 5px);margin-bottom:var(--emw-skeleton-title-margin-bottom, 5px)}.Image{background-color:var(--emw-skeleton-image-background, #c2c2c2);width:var(--emw-skeleton-image-width, 250px);height:var(--emw-skeleton-image-height, 200px);border-radius:var(--emw-skeleton-image-border-radius, 10px)}.Logo{background-color:var(--emw-skeleton-logo-background, #c2c2c2);width:var(--emw-skeleton-logo-width, 120px);height:var(--emw-skeleton-logo-height, 75px);border-radius:var(--emw-skeleton-logo-border-radius, 5px)}@keyframes skeleton-loading{0%{background-color:var(--emw-skeleton-primary-color, var(--emw-skeleton-color-0, #c2c2c2))}100%{background-color:var(--emw-skeleton-secondary-color, var(--emw-skeleton-color-100, #f0f0f0))}}";
 const UiSkeletonStyle0 = uiSkeletonCss;
 
 const UiSkeleton = class {
@@ -30,14 +30,6 @@ const UiSkeleton = class {
             this.handleStructure(newValue);
         }
     }
-    updateStyles() {
-        if (this.primaryColor) {
-            this.skeletonContainer.style.setProperty('--emw-skeleton-primary-color', this.primaryColor);
-        }
-        if (this.secondaryColor) {
-            this.skeletonContainer.style.setProperty('--emw-skeleton-secondary-color', this.secondaryColor);
-        }
-    }
     handleStructure(structure) {
         switch (structure) {
             case 'logo':
@@ -52,95 +44,128 @@ const UiSkeleton = class {
                 return this.renderRectangle();
             case 'circle':
                 return this.renderCircle();
+            default:
+                return null;
         }
     }
     renderLogo() {
-        const styles = {
-            width: `${this.width}`,
-            height: `${this.height}`,
-            'background-color': `${this.color}`,
-            'border-radius': `${this.borderRadius}px`,
-            'margin-bottom': `${this.marginBottom}px`,
-            'margin-top': `${this.marginTop}px`,
-            'margin-left': `${this.marginLeft}px`,
-            'margin-right': `${this.marginRight}px`
-        };
-        return (index.h("div", { ref: el => this.skeletonContainer = el }, index.h("div", { style: styles, class: "Logo " + (this.animation ? 'Skeleton' : '') })));
+        return (index.h("div", { class: "SkeletonContainer" }, index.h("div", { class: "Logo " + (this.animation ? 'Skeleton' : '') })));
     }
     renderImage() {
-        const styles = {
-            width: `${this.width}`,
-            height: `${this.height}`,
-            'background-color': `${this.color}`,
-            'border-radius': `${this.borderRadius}px`,
-            'margin-bottom': `${this.marginBottom}px`,
-            'margin-top': `${this.marginTop}px`,
-            'margin-left': `${this.marginLeft}px`,
-            'margin-right': `${this.marginRight}px`
-        };
-        return (index.h("div", { ref: el => this.skeletonContainer = el }, index.h("div", { style: styles, class: "Image " + (this.animation ? 'Skeleton' : '') })));
+        return (index.h("div", { class: "SkeletonContainer" }, index.h("div", { class: "Image " + (this.animation ? 'Skeleton' : '') })));
     }
     renderTitle() {
-        const styles = {
-            width: `${this.width}`,
-            height: `${this.height}`,
-            'background-color': `${this.color}`,
-            'border-radius': `${this.borderRadius}px`,
-            'margin-bottom': `${this.marginBottom}px`,
-            'margin-top': `${this.marginTop}px`,
-            'margin-left': `${this.marginLeft}px`,
-            'margin-right': `${this.marginRight}px`
-        };
-        return (index.h("div", { ref: el => this.skeletonContainer = el }, index.h("div", { style: styles, class: "Title " + (this.animation ? 'Skeleton' : '') })));
+        return (index.h("div", { class: "SkeletonContainer" }, index.h("div", { class: "Title " + (this.animation ? 'Skeleton' : '') })));
     }
     renderText() {
-        const styles = {
-            width: `${this.width}`,
-            height: `${this.height}`,
-            'background-color': `${this.color}`,
-            'border-radius': `${this.borderRadius}px`,
-            'margin-bottom': `${this.marginBottom}px`,
-            'margin-top': `${this.marginTop}px`,
-            'margin-left': `${this.marginLeft}px`,
-            'margin-right': `${this.marginRight}px`
-        };
-        return (Array.from({ length: this.rows > 0 ? this.rows : 1 }).map((_, index$1) => (index.h("div", { style: styles, key: index$1, class: "Text " + (this.animation ? 'Skeleton' : '') }))));
+        return (index.h("div", { class: "SkeletonContainer" }, Array.from({ length: this.rows > 0 ? this.rows : 1 }).map((_, index$1) => (index.h("div", { key: index$1, class: "Text " + (this.animation ? 'Skeleton' : '') })))));
     }
     renderRectangle() {
-        const styles = {
-            width: `${this.width}`,
-            height: `${this.height}`,
-            'background-color': `${this.color}`,
-            'border-radius': `${this.borderRadius}px`,
-            'margin-bottom': `${this.marginBottom}px`,
-            'margin-top': `${this.marginTop}px`,
-            'margin-left': `${this.marginLeft}px`,
-            'margin-right': `${this.marginRight}px`
-        };
-        return (index.h("div", { ref: el => this.skeletonContainer = el }, index.h("div", { style: styles, class: "Rectangle " + (this.animation ? 'Skeleton' : '') })));
+        return (index.h("div", { class: "SkeletonContainer" }, index.h("div", { class: "Rectangle " + (this.animation ? 'Skeleton' : '') })));
     }
     renderCircle() {
-        const styles = {
-            width: `${this.size}`,
-            height: `${this.size}`,
-            'background-color': `${this.color}`,
-            'margin-bottom': `${this.marginBottom}px`,
-            'margin-top': `${this.marginTop}px`,
-            'margin-left': `${this.marginLeft}px`,
-            'margin-right': `${this.marginRight}px`
-        };
-        return (index.h("div", { ref: el => this.skeletonContainer = el }, index.h("div", { style: styles, class: "Circle " + (this.animation ? 'Skeleton' : '') })));
-    }
-    componentDidLoad() {
-        this.updateStyles();
+        return (index.h("div", { class: "SkeletonContainer" }, index.h("div", { class: "Circle " + (this.animation ? 'Skeleton' : '') })));
     }
     render() {
-        return (this.handleStructure(this.structure));
+        let styleBlock = '';
+        switch (this.structure) {
+            case 'logo':
+                styleBlock = `
+          :host {
+            --emw-skeleton-logo-width: ${this.width};
+            --emw-skeleton-logo-height: ${this.height};
+            --emw-skeleton-logo-border-radius: ${this.borderRadius}px;
+            --emw-skeleton-logo-margin-bottom: ${this.marginBottom}px;
+            --emw-skeleton-logo-margin-top: ${this.marginTop}px;
+            --emw-skeleton-logo-margin-left: ${this.marginLeft}px;
+            --emw-skeleton-logo-margin-right: ${this.marginRight}px;
+            --emw-skeleton-logo-background: ${this.color};
+            --emw-skeleton-primary-color: ${this.primaryColor};
+            --emw-skeleton-secondary-color: ${this.secondaryColor};
+          }
+        `;
+                break;
+            case 'image':
+                styleBlock = `
+          :host {
+            --emw-skeleton-image-width: ${this.width};
+            --emw-skeleton-image-height: ${this.height};
+            --emw-skeleton-image-border-radius: ${this.borderRadius}px;
+            --emw-skeleton-image-margin-bottom: ${this.marginBottom}px;
+            --emw-skeleton-image-margin-top: ${this.marginTop}px;
+            --emw-skeleton-image-margin-left: ${this.marginLeft}px;
+            --emw-skeleton-image-margin-right: ${this.marginRight}px;
+            --emw-skeleton-image-background: ${this.color};
+            --emw-skeleton-primary-color: ${this.primaryColor};
+            --emw-skeleton-secondary-color: ${this.secondaryColor};
+          }
+        `;
+                break;
+            case 'title':
+                styleBlock = `
+          :host {
+            --emw-skeleton-title-width: ${this.width};
+            --emw-skeleton-title-height: ${this.height};
+            --emw-skeleton-title-border-radius: ${this.borderRadius}px;
+            --emw-skeleton-title-margin-bottom: ${this.marginBottom}px;
+            --emw-skeleton-title-margin-top: ${this.marginTop}px;
+            --emw-skeleton-title-margin-left: ${this.marginLeft}px;
+            --emw-skeleton-title-margin-right: ${this.marginRight}px;
+            --emw-skeleton-title-background: ${this.color};
+            --emw-skeleton-primary-color: ${this.primaryColor};
+            --emw-skeleton-secondary-color: ${this.secondaryColor};
+          }
+        `;
+                break;
+            case 'text':
+                styleBlock = `
+          :host {
+            --emw-skeleton-text-width: ${this.width};
+            --emw-skeleton-text-height: ${this.height};
+            --emw-skeleton-text-border-radius: ${this.borderRadius}px;
+            --emw-skeleton-text-margin-bottom: ${this.marginBottom}px;
+            --emw-skeleton-text-margin-top: ${this.marginTop}px;
+            --emw-skeleton-text-margin-left: ${this.marginLeft}px;
+            --emw-skeleton-text-margin-right: ${this.marginRight}px;
+            --emw-skeleton-text-background: ${this.color};
+            --emw-skeleton-primary-color: ${this.primaryColor};
+            --emw-skeleton-secondary-color: ${this.secondaryColor};
+          }
+        `;
+                break;
+            case 'rectangle':
+                styleBlock = `
+          :host {
+            --emw-skeleton-rectangle-width: ${this.width};
+            --emw-skeleton-rectangle-height: ${this.height};
+            --emw-skeleton-rectangle-border-radius: ${this.borderRadius}px;
+            --emw-skeleton-rectangle-margin-bottom: ${this.marginBottom}px;
+            --emw-skeleton-rectangle-margin-top: ${this.marginTop}px;
+            --emw-skeleton-rectangle-margin-left: ${this.marginLeft}px;
+            --emw-skeleton-rectangle-margin-right: ${this.marginRight}px;
+            --emw-skeleton-rectangle-background: ${this.color};
+            --emw-skeleton-primary-color: ${this.primaryColor};
+            --emw-skeleton-secondary-color: ${this.secondaryColor};
+          }
+        `;
+                break;
+            case 'circle':
+                styleBlock = `
+          :host {
+            --emw-skeleton-circle-size: ${this.size};
+            --emw-skeleton-circle-background: ${this.color};
+            --emw-skeleton-primary-color: ${this.primaryColor};
+            --emw-skeleton-secondary-color: ${this.secondaryColor};
+          }
+        `;
+                break;
+            default:
+                styleBlock = '';
+        }
+        return (index.h(index.Host, { key: '58f7f9acd15f0f96b8b6f47f6bea81d49a3857c5' }, index.h("style", { key: 'c72ac31d1c55fd5d18ec334629db45977a0f6124' }, styleBlock), this.handleStructure(this.structure)));
     }
     static get watchers() { return {
-        "structure": ["handleStructureChange"],
-        "primaryColor": ["updateStyles"],
-        "secondaryColor": ["updateStyles"]
+        "structure": ["handleStructureChange"]
     }; }
 };
 UiSkeleton.style = UiSkeletonStyle0;

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

@@ -14,37 +14,6 @@ body {
   font-family: inherit;
 }
 
-.SkeletonContainer {
-  width: 100%;
-  height: 1800px;
-  background-color: var(--emw--footer-color-bg, var(--emw-color-dark-blue, #07072A));
-  background-color: green !important;
-  display: flex;
-  gap: 100px;
-  justify-content: center;
-  align-items: center;
-  flex-direction: column;
-}
-.SkeletonContainer .FirstRow {
-  display: grid;
-  grid-template-columns: 100%;
-  column-gap: 20px;
-  gap: 10px;
-}
-.SkeletonContainer .FirstRow .SkeletonImage {
-  display: flex;
-  width: 20%;
-}
-.SkeletonContainer .SecondRow {
-  display: flex;
-  flex-direction: row;
-}
-.SkeletonContainer .SecondRow .SkeletonMenu {
-  display: flex;
-  gap: 10px;
-  flex-direction: column;
-}
-
 .FooterSectionContainer {
   color: var(--emw--footer-typography, var(--emw--color-thpography, #fff));
   padding: 15px 20px 0;

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

@@ -40,7 +40,7 @@ export class GeneralFooterTemplate {
         const url = new URL(`${this.endpoint}/${this.language}/footer-raw-data`);
         url.searchParams.append('env', this.env);
         url.searchParams.append('device', this.platform);
-        url.searchParams.append('userroles', this.userRoles);
+        url.searchParams.append('userRoles', this.userRoles);
         this.validateMandatoryFields();
         return fetch(url.href)
             .then((res) => res.json())

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

@@ -12,6 +12,8 @@
 
 .SkeletonWrapper {
   background-color: #f0f0f0;
+  width: 50px;
+  height: 40px;
 }
 
 .ImageListContainer {