@everymatrix/general-footer-template 1.62.0 → 1.62.1

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

@@ -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; },
@@ -5410,34 +5421,22 @@ class Declaration$4 extends Node$3 {
 var declaration = Declaration$4;
 Declaration$4.default = Declaration$4;
 
-// This alphabet uses `A-Za-z0-9_-` symbols.
-// The order of characters is optimized for better gzip and brotli compression.
-// References to the same file (works both for gzip and brotli):
-// `'use`, `andom`, and `rict'`
-// References to the brotli default dictionary:
-// `-26T`, `1983`, `40px`, `75px`, `bush`, `jack`, `mind`, `very`, and `wolf`
 let urlAlphabet =
   'useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict';
-
 let customAlphabet = (alphabet, defaultSize = 21) => {
   return (size = defaultSize) => {
     let id = '';
-    // A compact alternative for `for (var i = 0; i < step; i++)`.
     let i = size | 0;
     while (i--) {
-      // `| 0` is more compact and faster than `Math.floor()`.
       id += alphabet[(Math.random() * alphabet.length) | 0];
     }
     return id
   }
 };
-
 let nanoid$1 = (size = 21) => {
   let id = '';
-  // A compact alternative for `for (var i = 0; i < step; i++)`.
   let i = size | 0;
   while (i--) {
-    // `| 0` is more compact and faster than `Math.floor()`.
     id += urlAlphabet[(Math.random() * 64) | 0];
   }
   return id
@@ -9550,7 +9549,7 @@ const CustomContentSection = class {
                 a: ['href', 'target', 'rel']
             }
         });
-        return index$2.h("div", { key: '9990a716f474932b66644b13ec3ef378302dfaeb', class: "CustomContentSectionContainer" }, index$2.h("div", { key: '0ff21f48796f21dee167a686e3e346896a56cf71', class: "CustomContentSectionWrapper" }, index$2.h("div", { key: '6b8be4492fdb7f8c3b07545089a2e4dd47a1d8c8', 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: 'a4613d65e38bb44dacda6d6d1df9a3cf32845167', class: "CustomContentSectionContainer" }, index$2.h("div", { key: 'f6704f1e13d3a5dd188318cad51babdd8af8b2f1', class: "CustomContentSectionWrapper" }, index$2.h("div", { key: 'e818696e2ef290f92905adbac46fdd9f5ddf3e6c', 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.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-image_2.cjs",[[0,"ui-image",{"src":[1],"width":[1],"height":[1],"alt":[1],"imgClass":[1,"img-class"],"styles":[8],"detectDistance":[1,"detect-distance"],"imgLoaded":[32],"shouldLoad":[32]},null,{"src":["handleSrc"]}],[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);
+  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"]}]]],["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-image_2.cjs",[[0,"ui-image",{"src":[1],"width":[1],"height":[1],"alt":[1],"styles":[8],"detectDistance":[1,"detect-distance"],"imgLoaded":[32],"shouldLoad":[32]},null,{"src":["handleSrc"]}],[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"]}]]]], options);
 });
 
 exports.setNonce = index.setNonce;

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

@@ -13,41 +13,16 @@ const ImageList = class {
         this.navigateLink = (url, target, externalLink) => {
             window.postMessage({ type: this.postMessageEvent, path: url, url, target, externalLink }, window.location.href);
         };
-        this.onImageLoad = () => {
-            this.removeLoadingState();
-            this.cleanupListeners();
-        };
         this.repeaterContent = undefined;
         this.navigateViaEvent = false;
         this.postMessageEvent = '';
-        this.skeletonLoading = true;
-    }
-    componentDidLoad() {
-        this.initImageListeners();
-    }
-    initImageListeners() {
-        if (!this.imgRef)
-            return;
-        if (this.imgRef.complete) {
-            this.onImageLoad();
-            return;
-        }
-        this.imgRef.addEventListener('load', this.onImageLoad);
-    }
-    removeLoadingState() {
-        this.skeletonLoading = false;
-    }
-    cleanupListeners() {
-        var _a;
-        (_a = this.imgRef) === null || _a === void 0 ? void 0 : _a.removeEventListener('load', this.onImageLoad);
     }
     render() {
         var _a, _b, _c, _d;
-        return ((_a = this.repeaterContent) === null || _a === void 0 ? void 0 : _a.content.length) > 0 && index.h("div", { key: '36827a44dd3782bf173681efcf7a5592582efb32', class: "ImageListContainer" }, index.h("div", { key: 'd94522bf3aeafd30b56b63182854d11b44c74e65', class: "ImageListWrapper" }, index.h("div", { key: '11c2ab05764b80fa01322a30952f97646a8130c8', class: "ImageListSectionTitle" }, (_b = this.repeaterContent) === null || _b === void 0 ? void 0 : _b.categoryTitle), index.h("div", { key: 'eb0b8f03cf1c69095243ce42c99e86b74003cd01', 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("ui-image", { 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("ui-image", { 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)))));
+        return ((_a = this.repeaterContent) === null || _a === void 0 ? void 0 : _a.content.length) > 0 && index.h("div", { key: 'e7604ed1dcace3e2bd67c74e677e5c849c9c8407', class: "ImageListContainer" }, index.h("div", { key: '985672261fcfeac501d1182f5ab9f20e82307cc7', class: "ImageListWrapper" }, index.h("div", { key: '29b903e7bd639b8eb782d5aa6b646098ceee1ced', class: "ImageListSectionTitle" }, (_b = this.repeaterContent) === null || _b === void 0 ? void 0 : _b.categoryTitle), index.h("div", { key: '6cf6da5d3480a5f6d25c9d106e143dbb222e3b74', 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("ui-image", { src: repeater === null || repeater === void 0 ? void 0 : repeater.image, alt: "icon" })), 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" }, index.h("div", { class: "ImageListPositioner" }, index.h("ui-image", { src: repeater === null || repeater === void 0 ? void 0 : repeater.image, alt: "icon" }))), index.h("p", null, repeater === null || repeater === void 0 ? void 0 : repeater.title)))));
         }))));
     }
-    get el() { return index.getElement(this); }
 };
 ImageList.style = ImageListStyle0;
 

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

@@ -10,35 +10,11 @@ const LinkSectionListStyle0 = linkSectionListCss;
 const LinkSectionList = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.onImageLoad = () => {
-            this.removeLoadingState();
-            this.cleanupListeners();
-        };
         this.repeaterContent = undefined;
         this.baseUrl = undefined;
         this.language = undefined;
         this.navigateViaEvent = false;
         this.postMessageEvent = '';
-        this.skeletonLoading = true;
-    }
-    componentDidLoad() {
-        this.initImageListeners();
-    }
-    initImageListeners() {
-        if (!this.imgRef)
-            return;
-        if (this.imgRef.complete) {
-            this.onImageLoad();
-            return;
-        }
-        this.imgRef.addEventListener('load', this.onImageLoad);
-    }
-    removeLoadingState() {
-        this.skeletonLoading = false;
-    }
-    cleanupListeners() {
-        var _a;
-        (_a = this.imgRef) === null || _a === void 0 ? void 0 : _a.removeEventListener('load', this.onImageLoad);
     }
     navigateLink(link) {
         window.postMessage({ type: this.postMessageEvent, path: link.linkUrl, url: link.linkUrl, target: link.target, externalLink: link.externalLink }, window.location.href);
@@ -72,15 +48,14 @@ 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" }, 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, " "))) :
+        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("ui-image", { class: "LinkSectionIcon", src: link.icon, alt: "icon" })), 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" }, 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))) :
+                    index.h("span", { class: "LinkSectionListLinkText", onClick: () => this.navigateLink(link) }, index.h("div", { class: "ContainerImage" }, index.h("ui-image", { class: "LinkSectionIcon", src: link.icon, alt: "icon" }))))) : (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("ui-image", { class: "LinkSectionIcon", src: link.icon, alt: "icon" })), 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" }, 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: "LinkSectionListLinkText" }, index.h("div", { class: "ContainerImage" }, index.h("ui-image", { class: "LinkSectionIcon", src: link.icon, alt: "icon" })))))))))));
     }
-    get el() { return index.getElement(this); }
 };
 LinkSectionList.style = LinkSectionListStyle0;
 

package/dist/cjs/loader.cjs.js

@@ -8,7 +8,7 @@ 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-image_2.cjs",[[0,"ui-image",{"src":[1],"width":[1],"height":[1],"alt":[1],"imgClass":[1,"img-class"],"styles":[8],"detectDistance":[1,"detect-distance"],"imgLoaded":[32],"shouldLoad":[32]},null,{"src":["handleSrc"]}],[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);
+  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"]}]]],["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-image_2.cjs",[[0,"ui-image",{"src":[1],"width":[1],"height":[1],"alt":[1],"styles":[8],"detectDistance":[1,"detect-distance"],"imgLoaded":[32],"shouldLoad":[32]},null,{"src":["handleSrc"]}],[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"]}]]]], options);
 };
 
 exports.setNonce = index.setNonce;

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

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-4f1d0ebb.js');
 
-const uiImageCss = ":host{display:block}.Hidden{opacity:0;transition:opacity 0.5s ease-in-out}.Visible{opacity:1;transition:opacity 0.5s ease-in-out}";
+const uiImageCss = ".HostContainer{display:block}.UiContainer{height:100%;width:100%;border-radius:inherit}.UiContainer .Image{border-radius:inherit}.Hidden{opacity:0;transition:opacity 0.5s ease-in-out}.Visible{opacity:1;transition:opacity 0.5s ease-in-out}";
 const UiImageStyle0 = uiImageCss;
 
 const UiImage = class {
@@ -14,7 +14,6 @@ const UiImage = class {
         this.width = undefined;
         this.height = undefined;
         this.alt = undefined;
-        this.imgClass = '';
         this.styles = undefined;
         this.detectDistance = '200px';
         this.imgLoaded = false;
@@ -24,15 +23,14 @@ const UiImage = class {
         if (!this.shouldLoad) {
             return;
         }
-        const tempImage = new Image();
-        tempImage.src = this.src;
-        tempImage.onload = () => {
+        const preloadedImage = new Image();
+        preloadedImage.onload = () => {
             if (this.image) {
                 this.image.src = this.src;
                 this.imgLoaded = true;
-                this.el.dispatchEvent(new CustomEvent('load', { bubbles: true }));
             }
         };
+        preloadedImage.src = this.src;
     }
     componentDidLoad() {
         if ('IntersectionObserver' in window) {
@@ -59,7 +57,7 @@ const UiImage = class {
         }
     }
     render() {
-        return (index.h("img", { key: '2bb4dc391fc2f753514103e91c0abf065de3236a', ref: el => (this.image = el), style: this.styles, class: `${this.imgClass} ${this.imgLoaded ? 'Visible' : 'Hidden'}`, alt: this.alt, width: this.width, height: this.height, loading: "lazy" }));
+        return (index.h(index.Host, { key: '527318220c6b48375943e897fe0e53e0f33e67ed', class: "HostContainer" }, !this.imgLoaded && (index.h("ui-skeleton", { key: 'e5c49a781ff2fac5c796cb6a3f8d334dce7be35b', class: "UiContainer", structure: "image", width: "100%", height: "100%" })), index.h("img", { key: '09dfbf8f52c2c899246590790f2780a84bdeefc3', ref: (el) => (this.image = el), src: this.shouldLoad ? this.src : undefined, onLoad: () => (this.imgLoaded = true), style: this.styles, class: `UiContainer ${this.imgLoaded ? 'Visible' : 'Hidden'}`, alt: this.alt, width: this.width, height: this.height, loading: "lazy" })));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
@@ -68,7 +66,7 @@ const UiImage = class {
 };
 UiImage.style = UiImageStyle0;
 
-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 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, 100%);height:var(--emw-skeleton-image-height, 100%);border-radius:var(--emw-skeleton-image-border-radius, inherit)}.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 {
@@ -116,7 +114,7 @@ const UiSkeleton = class {
         return (index.h("div", { class: "SkeletonContainer" }, index.h("div", { class: "Logo " + (this.animation ? 'Skeleton' : '') })));
     }
     renderImage() {
-        return (index.h("div", { class: "SkeletonContainer" }, index.h("div", { class: "Image " + (this.animation ? 'Skeleton' : '') })));
+        return (index.h("div", { class: "Image " + (this.animation ? 'Skeleton' : '') }));
     }
     renderTitle() {
         return (index.h("div", { class: "SkeletonContainer" }, index.h("div", { class: "Title " + (this.animation ? 'Skeleton' : '') })));
@@ -226,7 +224,7 @@ const UiSkeleton = class {
             default:
                 styleBlock = '';
         }
-        return (index.h(index.Host, { key: '0641e666452d2172c26ed238d236c2ca3db9f8ed' }, index.h("style", { key: '285fb8210d32aff7f99005627fdecf36f66e82a4' }, styleBlock), this.handleStructure(this.structure)));
+        return (index.h(index.Host, { key: '3bb792a149db7fe732d5cbfa092cdb4d6ca0689e' }, index.h("style", { key: 'a4607599b60659f385ae2660513e38b383739674' }, styleBlock), this.handleStructure(this.structure)));
     }
     static get watchers() { return {
         "structure": ["handleStructureChange"]

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

@@ -1,6 +1,5 @@
 import { h } from "@stencil/core";
 import sanitizeHtml from "sanitize-html";
-import "../../../../../ui-skeleton/dist/types/index";
 export class CustomContentSection {
     constructor() {
         this.customContent = undefined;
@@ -16,7 +15,7 @@ export class CustomContentSection {
                 a: ['href', 'target', 'rel']
             }
         });
-        return h("div", { key: '9990a716f474932b66644b13ec3ef378302dfaeb', class: "CustomContentSectionContainer" }, h("div", { key: '0ff21f48796f21dee167a686e3e346896a56cf71', class: "CustomContentSectionWrapper" }, h("div", { key: '6b8be4492fdb7f8c3b07545089a2e4dd47a1d8c8', class: "CustomContentSectionContent", innerHTML: clean }), this.repeaterContent ? h("image-list", { style: { width: "100%" }, repeaterContent: this.repeaterContent ? this.repeaterContent : null, "navigate-via-event": this.navigateViaEvent, "post-message-event": this.postMessageEvent }) : ''));
+        return h("div", { key: 'a4613d65e38bb44dacda6d6d1df9a3cf32845167', class: "CustomContentSectionContainer" }, h("div", { key: 'f6704f1e13d3a5dd188318cad51babdd8af8b2f1', class: "CustomContentSectionWrapper" }, h("div", { key: 'e818696e2ef290f92905adbac46fdd9f5ddf3e6c', class: "CustomContentSectionContent", innerHTML: clean }), this.repeaterContent ? h("image-list", { style: { width: "100%" }, repeaterContent: this.repeaterContent ? this.repeaterContent : null, "navigate-via-event": this.navigateViaEvent, "post-message-event": this.postMessageEvent }) : ''));
     }
     static get is() { return "custom-content-section"; }
     static get encapsulation() { return "scoped"; }

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

@@ -1,7 +1,7 @@
 import { h } from "@stencil/core";
 import { componentRules, normalizeRepeaterContent, getDevicePlatform } from "../../utils/utils";
 import { setClientStyling, setClientStylingURL, setStreamStyling } from "../../../../../../../../libs/common/src/styling/index";
-import "../../../../../ui-skeleton/dist/types/index";
+import "../../../../../ui-image/dist/types/index";
 export class GeneralFooterTemplate {
     constructor() {
         this.platform = getDevicePlatform();

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

@@ -5,38 +5,14 @@ export class ImageList {
         this.navigateLink = (url, target, externalLink) => {
             window.postMessage({ type: this.postMessageEvent, path: url, url, target, externalLink }, window.location.href);
         };
-        this.onImageLoad = () => {
-            this.removeLoadingState();
-            this.cleanupListeners();
-        };
         this.repeaterContent = undefined;
         this.navigateViaEvent = false;
         this.postMessageEvent = '';
-        this.skeletonLoading = true;
-    }
-    componentDidLoad() {
-        this.initImageListeners();
-    }
-    initImageListeners() {
-        if (!this.imgRef)
-            return;
-        if (this.imgRef.complete) {
-            this.onImageLoad();
-            return;
-        }
-        this.imgRef.addEventListener('load', this.onImageLoad);
-    }
-    removeLoadingState() {
-        this.skeletonLoading = false;
-    }
-    cleanupListeners() {
-        var _a;
-        (_a = this.imgRef) === null || _a === void 0 ? void 0 : _a.removeEventListener('load', this.onImageLoad);
     }
     render() {
         var _a, _b, _c, _d;
-        return ((_a = this.repeaterContent) === null || _a === void 0 ? void 0 : _a.content.length) > 0 && h("div", { key: '36827a44dd3782bf173681efcf7a5592582efb32', class: "ImageListContainer" }, h("div", { key: 'd94522bf3aeafd30b56b63182854d11b44c74e65', class: "ImageListWrapper" }, h("div", { key: '11c2ab05764b80fa01322a30952f97646a8130c8', class: "ImageListSectionTitle" }, (_b = this.repeaterContent) === null || _b === void 0 ? void 0 : _b.categoryTitle), h("div", { key: 'eb0b8f03cf1c69095243ce42c99e86b74003cd01', class: "ImageListLineup" }, (_d = (_c = this.repeaterContent) === null || _c === void 0 ? void 0 : _c.content) === null || _d === void 0 ? void 0 : _d.map(repeater => {
-            return (h("div", { class: 'ImageListIcon' }, this.navigateViaEvent === true ? (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) }, h("div", { class: "ContainerImage" }, h("ui-image", { 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 && (h("div", { class: "SkeletonWrapper" }, h("ui-skeleton", { structure: "rectangle", rows: "1", width: "100%", height: "100%" })))), h("p", null, repeater === null || repeater === void 0 ? void 0 : repeater.title))) : (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' }, h("div", { class: "ContainerImage" }, this.skeletonLoading && (h("div", { class: "SkeletonWrapper" }, h("ui-skeleton", { structure: "rectangle", rows: "1", width: "100%", height: "100%" }))), h("div", { class: "ImageListPositioner" }, h("ui-image", { src: repeater === null || repeater === void 0 ? void 0 : repeater.image, alt: "icon", ref: (el) => (this.imgRef = el), style: { display: this.skeletonLoading ? 'none' : 'block' } }))), h("p", null, repeater === null || repeater === void 0 ? void 0 : repeater.title)))));
+        return ((_a = this.repeaterContent) === null || _a === void 0 ? void 0 : _a.content.length) > 0 && h("div", { key: 'e7604ed1dcace3e2bd67c74e677e5c849c9c8407', class: "ImageListContainer" }, h("div", { key: '985672261fcfeac501d1182f5ab9f20e82307cc7', class: "ImageListWrapper" }, h("div", { key: '29b903e7bd639b8eb782d5aa6b646098ceee1ced', class: "ImageListSectionTitle" }, (_b = this.repeaterContent) === null || _b === void 0 ? void 0 : _b.categoryTitle), h("div", { key: '6cf6da5d3480a5f6d25c9d106e143dbb222e3b74', class: "ImageListLineup" }, (_d = (_c = this.repeaterContent) === null || _c === void 0 ? void 0 : _c.content) === null || _d === void 0 ? void 0 : _d.map(repeater => {
+            return (h("div", { class: 'ImageListIcon' }, this.navigateViaEvent === true ? (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) }, h("div", { class: "ContainerImage" }, h("ui-image", { src: repeater === null || repeater === void 0 ? void 0 : repeater.image, alt: "icon" })), h("p", null, repeater === null || repeater === void 0 ? void 0 : repeater.title))) : (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' }, h("div", { class: "ContainerImage" }, h("div", { class: "ImageListPositioner" }, h("ui-image", { src: repeater === null || repeater === void 0 ? void 0 : repeater.image, alt: "icon" }))), h("p", null, repeater === null || repeater === void 0 ? void 0 : repeater.title)))));
         }))));
     }
     static get is() { return "image-list"; }
@@ -108,10 +84,4 @@ export class ImageList {
             }
         };
     }
-    static get states() {
-        return {
-            "skeletonLoading": {}
-        };
-    }
-    static get elementRef() { return "el"; }
 }

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

@@ -1,35 +1,12 @@
 import { h } from "@stencil/core";
+import "../../../../../ui-image/dist/types/index";
 export class LinkSectionList {
     constructor() {
-        this.onImageLoad = () => {
-            this.removeLoadingState();
-            this.cleanupListeners();
-        };
         this.repeaterContent = undefined;
         this.baseUrl = undefined;
         this.language = undefined;
         this.navigateViaEvent = false;
         this.postMessageEvent = '';
-        this.skeletonLoading = true;
-    }
-    componentDidLoad() {
-        this.initImageListeners();
-    }
-    initImageListeners() {
-        if (!this.imgRef)
-            return;
-        if (this.imgRef.complete) {
-            this.onImageLoad();
-            return;
-        }
-        this.imgRef.addEventListener('load', this.onImageLoad);
-    }
-    removeLoadingState() {
-        this.skeletonLoading = false;
-    }
-    cleanupListeners() {
-        var _a;
-        (_a = this.imgRef) === null || _a === void 0 ? void 0 : _a.removeEventListener('load', this.onImageLoad);
     }
     navigateLink(link) {
         window.postMessage({ type: this.postMessageEvent, path: link.linkUrl, url: link.linkUrl, target: link.target, externalLink: link.externalLink }, window.location.href);
@@ -63,13 +40,13 @@ export class LinkSectionList {
             }
             return obj;
         }, []);
-        return h("div", { class: "LinkSectionListContainer" }, h("div", { class: "LinkSectionListWrapper" }, this.repeaterContent.categoryTitle && h("h2", { class: "LinkSectionListTitle" }, this.repeaterContent.categoryTitle), linkSections.map(category => h("ul", null, category.categoryTitle && h("p", null, category.categoryTitle), category.links.map(link => h("li", { class: "LinkSectionListLink", key: link.linkName }, this.navigateViaEvent === true ? (h("span", null, link.linkName && link.icon ? (h("span", { class: "LinkSectionListLinkText", onClick: () => this.navigateLink(link) }, h("div", { class: "ContainerImage" }, h("img", { class: "LinkSectionIcon", src: link.icon, alt: "icon", ref: (el) => (this.imgRef = el), style: { display: this.skeletonLoading ? 'none' : 'block' } }), this.skeletonLoading && (h("div", { class: "SkeletonWrapper" }, h("ui-skeleton", { structure: "text", rows: "1", width: "100%", height: "100%" })))), h("span", { class: '' }, link.linkName, " "))) :
+        return h("div", { class: "LinkSectionListContainer" }, h("div", { class: "LinkSectionListWrapper" }, this.repeaterContent.categoryTitle && h("h2", { class: "LinkSectionListTitle" }, this.repeaterContent.categoryTitle), linkSections.map(category => h("ul", null, category.categoryTitle && h("p", null, category.categoryTitle), category.links.map(link => h("li", { class: "LinkSectionListLink", key: link.linkName }, this.navigateViaEvent === true ? (h("span", null, link.linkName && link.icon ? (h("span", { class: "LinkSectionListLinkText", onClick: () => this.navigateLink(link) }, h("div", { class: "ContainerImage" }, h("ui-image", { class: "LinkSectionIcon", src: link.icon, alt: "icon" })), h("span", { class: '' }, link.linkName, " "))) :
             link.linkName ?
                 h("span", { class: "LinkSectionListLinkText", onClick: () => this.navigateLink(link) }, h("span", null, link.linkName, " "))
                 :
-                    h("span", { class: "LinkSectionListLinkText", onClick: () => this.navigateLink(link) }, h("div", { class: "ContainerImage" }, h("img", { class: "LinkSectionIcon", src: link.icon, alt: "icon", ref: (el) => (this.imgRef = el), style: { display: this.skeletonLoading ? 'none' : 'block' } }), this.skeletonLoading && (h("div", { class: "SkeletonWrapper" }, h("ui-skeleton", { structure: "text", rows: "1", width: "100%", height: "100%" }))))))) : (h("a", { class: "LinkSectionListLink", href: link.externalLink ? link.linkUrl : `${this.baseUrl}/${this.language}${link.linkUrl}`, target: link.target || '_blank' }, link.linkName && link.icon ? (h("span", { class: "LinkSectionListLinkText" }, h("div", { class: "ContainerImage" }, h("img", { class: "LinkSectionIcon", src: link.icon, alt: "icon", ref: (el) => (this.imgRef = el), style: { display: this.skeletonLoading ? 'none' : 'block' } }), this.skeletonLoading && (h("div", { class: "SkeletonWrapper" }, h("ui-skeleton", { structure: "text", rows: "1", width: "100%", height: "100%" })))), h("span", null, link.linkName))) :
+                    h("span", { class: "LinkSectionListLinkText", onClick: () => this.navigateLink(link) }, h("div", { class: "ContainerImage" }, h("ui-image", { class: "LinkSectionIcon", src: link.icon, alt: "icon" }))))) : (h("a", { class: "LinkSectionListLink", href: link.externalLink ? link.linkUrl : `${this.baseUrl}/${this.language}${link.linkUrl}`, target: link.target || '_blank' }, link.linkName && link.icon ? (h("span", { class: "LinkSectionListLinkText" }, h("div", { class: "ContainerImage" }, h("ui-image", { class: "LinkSectionIcon", src: link.icon, alt: "icon" })), h("span", null, link.linkName))) :
             link.linkName ? (h("span", { class: "LinkSectionListLinkText" }, h("span", null, link.linkName))) :
-                h("span", { class: "LinkSectionListLinkText" }, h("div", { class: "ContainerImage" }, h("img", { class: "LinkSectionIcon", src: link.icon, alt: "icon", ref: (el) => (this.imgRef = el), style: { display: this.skeletonLoading ? 'none' : 'block' } }), this.skeletonLoading && (h("div", { class: "SkeletonWrapper" }, h("ui-skeleton", { structure: "text", rows: "1", width: "100%", height: "100%" })))))))))))));
+                h("span", { class: "LinkSectionListLinkText" }, h("div", { class: "ContainerImage" }, h("ui-image", { class: "LinkSectionIcon", src: link.icon, alt: "icon" })))))))))));
     }
     static get is() { return "link-section-list"; }
     static get originalStyleUrls() {
@@ -173,10 +150,4 @@ export class LinkSectionList {
             }
         };
     }
-    static get states() {
-        return {
-            "skeletonLoading": {}
-        };
-    }
-    static get elementRef() { return "el"; }
 }