@everymatrix/general-footer-template 1.77.4 → 1.77.6

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

@@ -26,6 +26,7 @@ export class GeneralFooterTemplate {
         this.clockFormat = 'HH:MM:ss';
         this.timeZone = '';
         this.mbSource = undefined;
+        this.dropdownLinks = false;
         this.hasErrors = false;
         this.footerContent = undefined;
     }
@@ -89,7 +90,7 @@ export class GeneralFooterTemplate {
                 const FooterElement = componentRules[section].component;
                 const elementIsRepeater = this.footerContent.repeaters.hasOwnProperty(section);
                 const elementIsCustom = this.footerContent.wysiwyg.hasOwnProperty(section);
-                return h(FooterElement, { class: `${section} FooterSectionContainer FooterSectionContainer${i + 1}`, userid: this.userid, session: this.session, "base-url": this.baseUrl, language: this.language, "navigate-via-event": this.navigateViaEvent, "post-message-event": this.postMessageEvent, ruleset: componentRules[section], repeaterContent: elementIsRepeater ? this.footerContent.repeaters[section] : null, customContent: elementIsCustom ? this.footerContent.wysiwyg[section].content : null, "translation-url": this.translationUrl, "clock-format": this.clockFormat, "time-zone": this.timeZone });
+                return h(FooterElement, { class: `${section} FooterSectionContainer FooterSectionContainer${i + 1}`, userid: this.userid, session: this.session, "base-url": this.baseUrl, endpoint: this.endpoint, language: this.language, "navigate-via-event": this.navigateViaEvent, "post-message-event": this.postMessageEvent, ruleset: componentRules[section], repeaterContent: elementIsRepeater ? this.footerContent.repeaters[section] : null, customContent: elementIsCustom ? this.footerContent.wysiwyg[section].content : null, "translation-url": this.translationUrl, "clock-format": this.clockFormat, "time-zone": this.timeZone, "dropdown-links": this.dropdownLinks });
             });
             return (h("footer", { class: "FooterContainer", ref: el => this.stylingContainer = el }, h("div", { class: "FooterGrid customStyle" }, footerSections)));
         }
@@ -405,6 +406,24 @@ export class GeneralFooterTemplate {
                 },
                 "attribute": "mb-source",
                 "reflect": true
+            },
+            "dropdownLinks": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "whether dropdown behavior is enabled for the link-section-list"
+                },
+                "attribute": "dropdown-links",
+                "reflect": true,
+                "defaultValue": "false"
             }
         };
     }

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

@@ -23,6 +23,52 @@
   font-weight: var(--emw--font-weight-semibold, 500);
   text-transform: uppercase;
 }
+.LinkSectionListDropdownHeader {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  background: var(--emw--color-primary, #184026);
+  color: var(--emw--color-typography, #FFFFFF);
+  text-align: left;
+  padding: 10px;
+  border: none;
+  border-radius: var(--emw--button-border-radius, 4px);
+  margin-bottom: 3px;
+  cursor: pointer;
+  font-size: 1rem;
+}
+.LinkSectionListDropdownHeader:hover {
+  color: var(--emw--color-secondary, #52d004);
+}
+.LinkSectionListDropdownHeader:hover svg {
+  fill: var(--emw--color-secondary, #52d004);
+}
+.LinkSectionListDropdownHeader.IsOpen {
+  color: var(--emw--color-secondary, #52d004);
+}
+.LinkSectionListDropdownHeader.IsOpen svg {
+  fill: var(--emw--color-secondary, #52d004);
+}
+.LinkSectionListDropdownHeader .TriangleActive {
+  transform: rotate(90deg);
+  -webkit-transform: rotate(90deg);
+}
+.LinkSectionListDropdownHeader svg {
+  fill: var(--emw--color-typography, #FFFFFF);
+  margin-left: 8px;
+  width: 16px;
+  transform: rotate(-90deg);
+  -webkit-transform: rotate(-90deg);
+}
+.LinkSectionListDropdownList {
+  list-style: none;
+  display: none;
+}
+.LinkSectionListDropdownList.open {
+  display: flex;
+  margin: 5px 0;
+}
 .LinkSectionListLink {
   font-weight: var(--emw--font-weight-light, 300);
 }

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

@@ -7,10 +7,18 @@ export class LinkSectionList {
         this.language = undefined;
         this.navigateViaEvent = false;
         this.postMessageEvent = '';
+        this.dropdownLinks = true;
+        this.openCategory = null;
     }
     navigateLink(link) {
         window.postMessage({ type: this.postMessageEvent, path: link.linkUrl, url: link.linkUrl, target: link.target, externalLink: link.externalLink }, window.location.href);
     }
+    toggleCategory(cat) {
+        this.openCategory = this.openCategory === cat ? null : cat;
+    }
+    createHrefLink(link) {
+        return link.externalLink ? link.linkUrl : `${this.baseUrl}/${this.language}${link.linkUrl}`;
+    }
     render() {
         var _a, _b;
         const linkSections = (_b = (_a = this.repeaterContent) === null || _a === void 0 ? void 0 : _a.content) === null || _b === void 0 ? void 0 : _b.reduce((obj, elem) => {
@@ -40,13 +48,19 @@ 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("ui-image", { class: "LinkSectionIcon", src: link.icon, alt: "icon" })), 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 => this.dropdownLinks ? (h("div", { class: "LinkSectionListDropdown" }, h("button", { type: 'button', class: `LinkSectionListDropdownHeader ${this.openCategory === category.categoryTitle ? 'IsOpen' : ''}`, onClick: () => this.toggleCategory(category.categoryTitle) }, category.categoryTitle, h("span", { class: this.openCategory === category.categoryTitle ? 'TriangleActive' : 'TriangleInactive' }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "14", height: "6.835", viewBox: "0 0 14 6.835" }, h("path", { id: "arrow", d: "M281.541,447.921a.488.488,0,0,0,.295-.122l6.5-5.851a.488.488,0,1,0-.65-.726l-6.176,5.556-6.176-5.556h0a.488.488,0,1,0-.65.726l6.5,5.851a.488.488,0,0,0,.355.122Z", transform: "translate(-274.511 -441.088)" })))), h("ul", { class: { 'LinkSectionListDropdownList': true, open: this.openCategory === 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("ui-image", { class: "LinkSectionIcon", src: link.icon, alt: "icon" }))))) : (h("a", { class: "LinkSectionListLink", href: this.createHrefLink(link), 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("ui-image", { class: "LinkSectionIcon", src: link.icon, alt: "icon" })))))))))) : (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("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))) :
+                    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: this.createHrefLink(link), 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("ui-image", { class: "LinkSectionIcon", src: link.icon, alt: "icon" })))))))))));
+                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() {
@@ -147,7 +161,30 @@ export class LinkSectionList {
                 "attribute": "post-message-event",
                 "reflect": true,
                 "defaultValue": "''"
+            },
+            "dropdownLinks": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If is true then this component will look like a dropdown"
+                },
+                "attribute": "dropdown-links",
+                "reflect": true,
+                "defaultValue": "true"
             }
         };
     }
+    static get states() {
+        return {
+            "openCategory": {}
+        };
+    }
 }

package/dist/collection/utils/utils.js

@@ -72,6 +72,9 @@ export const componentRules = {
     "clock": {
         component: 'custom-clock',
     },
+    "logo": {
+        component: 'footer-logo'
+    }
 };
 // This method takes repeater content and changes it to fit an uniform standard for property names in order to be treated in a general case by the footer
 // ex. if helpLinks repeaters use "helpImage" and socialLinks repeaters use "socialImage", both will use "image" after the normalization

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, h } from './index-83985f06.js';
+import { r as registerInstance, h } from './index-4b819858.js';
 import { c as commonjsGlobal } from './_commonjsHelpers-1c8beb5f.js';
 
 const DEFAULT_LANGUAGE = 'en';

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, h } from './index-83985f06.js';
+import { r as registerInstance, h } from './index-4b819858.js';
 import { c as commonjsGlobal } from './_commonjsHelpers-1c8beb5f.js';
 
 var purify = {exports: {}};

package/dist/esm/footer-logo.entry.js

@@ -0,0 +1,57 @@
+import { r as registerInstance, h } from './index-4b819858.js';
+
+const footerLogoCss = ".HeaderBranding.sc-footer-logo{text-align:center;width:100%;display:flex;justify-content:center;align-items:center}img.sc-footer-logo{width:10rem;height:auto}";
+const FooterLogoStyle0 = footerLogoCss;
+
+const FooterLogo = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.isLogoFromCMS = false;
+        this.endpoint = undefined;
+        this.language = 'en';
+        this.logoContent = null;
+    }
+    onConfigChange(newValue, oldValue) {
+        if (newValue !== oldValue && this.endpoint && this.language) {
+            this.getLogo();
+        }
+    }
+    getLogo() {
+        const logoURL = new URL(`${this.endpoint}/${this.language.toLowerCase()}/op-options/style`);
+        return fetch(logoURL)
+            .then((res) => res.json())
+            .then((data) => {
+            if (data.logoUrl.length > 0 && (data.logoUrl != "null" || data.logoUrl != "false")) {
+                this.isLogoFromCMS = true;
+                return data.logoUrl;
+            }
+            else {
+                this.isLogoFromCMS = false;
+                console.error("Invalid logo URL:", data);
+                return null;
+            }
+        })
+            .catch((error) => {
+            console.error("Error fetching logo:", error);
+            return null;
+        });
+    }
+    async connectedCallback() {
+        if (this.endpoint && this.language) {
+            const logo = await this.getLogo();
+            if (this.isLogoFromCMS && logo) {
+                this.logoContent = logo;
+            }
+        }
+    }
+    render() {
+        return (this.logoContent ? (h("div", { class: "HeaderBranding" }, h("img", { src: this.logoContent, alt: "Logo" }))) : null);
+    }
+    static get watchers() { return {
+        "endpoint": ["onConfigChange"],
+        "language": ["onConfigChange"]
+    }; }
+};
+FooterLogo.style = FooterLogoStyle0;
+
+export { FooterLogo as footer_logo };

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, g as getElement } from './index-83985f06.js';
+import { r as registerInstance, h, g as getElement } from './index-4b819858.js';
 
 /**
  * custom rules for component types
@@ -67,6 +67,9 @@ const componentRules = {
     "clock": {
         component: 'custom-clock',
     },
+    "logo": {
+        component: 'footer-logo'
+    }
 };
 // This method takes repeater content and changes it to fit an uniform standard for property names in order to be treated in a general case by the footer
 // ex. if helpLinks repeaters use "helpImage" and socialLinks repeaters use "socialImage", both will use "image" after the normalization
@@ -299,6 +302,7 @@ const GeneralFooterTemplate = class {
         this.clockFormat = 'HH:MM:ss';
         this.timeZone = '';
         this.mbSource = undefined;
+        this.dropdownLinks = false;
         this.hasErrors = false;
         this.footerContent = undefined;
     }
@@ -362,7 +366,7 @@ const GeneralFooterTemplate = class {
                 const FooterElement = componentRules[section].component;
                 const elementIsRepeater = this.footerContent.repeaters.hasOwnProperty(section);
                 const elementIsCustom = this.footerContent.wysiwyg.hasOwnProperty(section);
-                return h(FooterElement, { class: `${section} FooterSectionContainer FooterSectionContainer${i + 1}`, userid: this.userid, session: this.session, "base-url": this.baseUrl, language: this.language, "navigate-via-event": this.navigateViaEvent, "post-message-event": this.postMessageEvent, ruleset: componentRules[section], repeaterContent: elementIsRepeater ? this.footerContent.repeaters[section] : null, customContent: elementIsCustom ? this.footerContent.wysiwyg[section].content : null, "translation-url": this.translationUrl, "clock-format": this.clockFormat, "time-zone": this.timeZone });
+                return h(FooterElement, { class: `${section} FooterSectionContainer FooterSectionContainer${i + 1}`, userid: this.userid, session: this.session, "base-url": this.baseUrl, endpoint: this.endpoint, language: this.language, "navigate-via-event": this.navigateViaEvent, "post-message-event": this.postMessageEvent, ruleset: componentRules[section], repeaterContent: elementIsRepeater ? this.footerContent.repeaters[section] : null, customContent: elementIsCustom ? this.footerContent.wysiwyg[section].content : null, "translation-url": this.translationUrl, "clock-format": this.clockFormat, "time-zone": this.timeZone, "dropdown-links": this.dropdownLinks });
             });
             return (h("footer", { class: "FooterContainer", ref: el => this.stylingContainer = el }, h("div", { class: "FooterGrid customStyle" }, footerSections)));
         }

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

@@ -1,5 +1,5 @@
-import { p as promiseResolve, b as bootstrapLazy } from './index-83985f06.js';
-export { s as setNonce } from './index-83985f06.js';
+import { p as promiseResolve, b as bootstrapLazy } from './index-4b819858.js';
+export { s as setNonce } from './index-4b819858.js';
 import { g as globalScripts } from './app-globals-0f993ce5.js';
 
 /*
@@ -16,5 +16,5 @@ var patchBrowser = () => {
 
 patchBrowser().then(async (options) => {
   await globalScripts();
-  return bootstrapLazy([["custom-content-section",[[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",[[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",[[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",[[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"],"customCss":[513,"custom-css"],"translationUrl":[513,"translation-url"],"clockFormat":[513,"clock-format"],"timeZone":[513,"time-zone"],"mbSource":[513,"mb-source"],"hasErrors":[32],"footerContent":[32]},null,{"language":["watchLanguage"]}]]],["ui-image_2",[[0,"ui-image",{"src":[1],"width":[1],"height":[1],"alt":[1],"styles":[8],"detectDistance":[1,"detect-distance"],"loading":[1],"imgLoaded":[32]},null,{"src":["onSrcChange"],"loading":["onLoadingChange"]}],[0,"ui-skeleton",{"structure":[1],"width":[1],"height":[1],"borderRadius":[8,"border-radius"],"marginBottom":[8,"margin-bottom"],"marginTop":[8,"margin-top"],"marginLeft":[8,"margin-left"],"marginRight":[8,"margin-right"],"animation":[4],"rows":[2],"size":[1]},null,{"structure":["handleStructureChange"]}]]],["image-list",[[2,"image-list",{"repeaterContent":[8,"repeater-content"],"navigateViaEvent":[4,"navigate-via-event"],"postMessageEvent":[513,"post-message-event"]}]]]], options);
+  return bootstrapLazy([["custom-content-section",[[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",[[0,"link-section-list",{"repeaterContent":[8,"repeater-content"],"baseUrl":[513,"base-url"],"language":[513],"navigateViaEvent":[4,"navigate-via-event"],"postMessageEvent":[513,"post-message-event"],"dropdownLinks":[516,"dropdown-links"],"openCategory":[32]}]]],["custom-clock",[[2,"custom-clock",{"clockFormat":[513,"clock-format"],"timeZone":[513,"time-zone"],"translationUrl":[513,"translation-url"],"language":[513],"timeString":[32]},null,{"translationUrl":["handleNewTranslations"]}]]],["footer-logo",[[2,"footer-logo",{"endpoint":[513],"language":[513],"logoContent":[32]},null,{"endpoint":["onConfigChange"],"language":["onConfigChange"]}]]],["general-footer-template",[[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"],"customCss":[513,"custom-css"],"translationUrl":[513,"translation-url"],"clockFormat":[513,"clock-format"],"timeZone":[513,"time-zone"],"mbSource":[513,"mb-source"],"dropdownLinks":[516,"dropdown-links"],"hasErrors":[32],"footerContent":[32]},null,{"language":["watchLanguage"]}]]],["ui-image_2",[[0,"ui-image",{"src":[1],"width":[1],"height":[1],"alt":[1],"styles":[8],"detectDistance":[1,"detect-distance"],"loading":[1],"imgLoaded":[32]},null,{"src":["onSrcChange"],"loading":["onLoadingChange"]}],[0,"ui-skeleton",{"structure":[1],"width":[1],"height":[1],"borderRadius":[8,"border-radius"],"marginBottom":[8,"margin-bottom"],"marginTop":[8,"margin-top"],"marginLeft":[8,"margin-left"],"marginRight":[8,"margin-right"],"animation":[4],"rows":[2],"size":[1]},null,{"structure":["handleStructureChange"]}]]],["image-list",[[2,"image-list",{"repeaterContent":[8,"repeater-content"],"navigateViaEvent":[4,"navigate-via-event"],"postMessageEvent":[513,"post-message-event"]}]]]], options);
 });

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, h } from './index-83985f06.js';
+import { r as registerInstance, h } from './index-4b819858.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  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;

package/dist/esm/{index-83985f06.js → index-4b819858.js}

@@ -1,5 +1,5 @@
 const NAMESPACE = 'general-footer-template';
-const BUILD = /* general-footer-template */ { allRenderFn: true, appendChildSlotFix: false, asyncLoading: true, asyncQueue: false, attachStyles: true, cloneNodeFix: false, cmpDidLoad: true, cmpDidRender: false, cmpDidUnload: false, cmpDidUpdate: false, cmpShouldUpdate: false, cmpWillLoad: true, cmpWillRender: false, cmpWillUpdate: false, connectedCallback: false, constructableCSS: true, cssAnnotations: true, devTools: false, disconnectedCallback: true, element: false, event: false, experimentalScopedSlotChanges: false, experimentalSlotFixes: false, formAssociated: false, hasRenderFn: true, hostListener: false, hostListenerTarget: false, hostListenerTargetBody: false, hostListenerTargetDocument: false, hostListenerTargetParent: false, hostListenerTargetWindow: false, hotModuleReplacement: false, hydrateClientSide: false, hydrateServerSide: false, hydratedAttribute: false, hydratedClass: true, hydratedSelectorName: "hydrated", initializeNextTick: false, invisiblePrehydration: true, isDebug: false, isDev: false, isTesting: false, lazyLoad: true, lifecycle: true, lifecycleDOMEvents: false, member: true, method: false, mode: false, observeAttribute: true, profile: false, prop: true, propBoolean: true, propMutable: false, propNumber: true, propString: true, reflect: true, scoped: true, scopedSlotTextContentFix: false, scriptDataOpts: false, shadowDelegatesFocus: false, shadowDom: true, slot: false, slotChildNodesFix: false, slotRelocation: false, state: true, style: true, svg: false, taskQueue: true, transformTagName: false, updatable: true, vdomAttribute: true, vdomClass: true, vdomFunctional: true, vdomKey: true, vdomListener: true, vdomPropOrAttr: true, vdomRef: true, vdomRender: true, vdomStyle: true, vdomText: true, vdomXlink: false, watchCallback: true };
+const BUILD = /* general-footer-template */ { allRenderFn: true, appendChildSlotFix: false, asyncLoading: true, asyncQueue: false, attachStyles: true, cloneNodeFix: false, cmpDidLoad: true, cmpDidRender: false, cmpDidUnload: false, cmpDidUpdate: false, cmpShouldUpdate: false, cmpWillLoad: true, cmpWillRender: false, cmpWillUpdate: false, connectedCallback: true, constructableCSS: true, cssAnnotations: true, devTools: false, disconnectedCallback: true, element: false, event: false, experimentalScopedSlotChanges: false, experimentalSlotFixes: false, formAssociated: false, hasRenderFn: true, hostListener: false, hostListenerTarget: false, hostListenerTargetBody: false, hostListenerTargetDocument: false, hostListenerTargetParent: false, hostListenerTargetWindow: false, hotModuleReplacement: false, hydrateClientSide: false, hydrateServerSide: false, hydratedAttribute: false, hydratedClass: true, hydratedSelectorName: "hydrated", initializeNextTick: false, invisiblePrehydration: true, isDebug: false, isDev: false, isTesting: false, lazyLoad: true, lifecycle: true, lifecycleDOMEvents: false, member: true, method: false, mode: false, observeAttribute: true, profile: false, prop: true, propBoolean: true, propMutable: false, propNumber: true, propString: true, reflect: true, scoped: true, scopedSlotTextContentFix: false, scriptDataOpts: false, shadowDelegatesFocus: false, shadowDom: true, slot: false, slotChildNodesFix: false, slotRelocation: false, state: true, style: true, svg: true, taskQueue: true, transformTagName: false, updatable: true, vdomAttribute: true, vdomClass: true, vdomFunctional: true, vdomKey: true, vdomListener: true, vdomPropOrAttr: true, vdomRef: true, vdomRender: true, vdomStyle: true, vdomText: true, vdomXlink: false, watchCallback: true };
 
 /*
  Stencil Client Platform v4.19.2 | MIT Licensed | https://stenciljs.com
@@ -61,6 +61,10 @@ var loadModule = (cmpMeta, hostRef, hmrVersionId) => {
                     return import(
                       /* webpackMode: "lazy" */
                       './custom-content-section.entry.js').then(processMod, consoleError);
+                case 'footer-logo':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './footer-logo.entry.js').then(processMod, consoleError);
                 case 'link-section-list':
                     return import(
                       /* webpackMode: "lazy" */
@@ -151,6 +155,8 @@ var writeTask = /* @__PURE__ */ queueTask(queueDomWrites, true);
 
 // src/utils/constants.ts
 var EMPTY_OBJ = {};
+var SVG_NS = "http://www.w3.org/2000/svg";
+var HTML_NS = "http://www.w3.org/1999/xhtml";
 
 // src/utils/helpers.ts
 var isDef = (v) => v != null;
@@ -547,9 +553,16 @@ var createElm = (oldParentVNode, newParentVNode, childIndex, parentElm) => {
   if (newVNode2.$text$ !== null) {
     elm = newVNode2.$elm$ = doc.createTextNode(newVNode2.$text$);
   } else {
-    elm = newVNode2.$elm$ = doc.createElement(
+    if (!isSvgMode) {
+      isSvgMode = newVNode2.$tag$ === "svg";
+    }
+    elm = newVNode2.$elm$ = doc.createElementNS(
+      isSvgMode ? SVG_NS : HTML_NS,
       !useNativeShadowDom && BUILD.slotRelocation && newVNode2.$flags$ & 2 /* isSlotFallback */ ? "slot-fb" : newVNode2.$tag$
-    );
+    ) ;
+    if (isSvgMode && newVNode2.$tag$ === "foreignObject") {
+      isSvgMode = false;
+    }
     {
       updateElement(null, newVNode2, isSvgMode);
     }
@@ -567,6 +580,13 @@ var createElm = (oldParentVNode, newParentVNode, childIndex, parentElm) => {
         }
       }
     }
+    {
+      if (newVNode2.$tag$ === "svg") {
+        isSvgMode = false;
+      } else if (elm.tagName === "foreignObject") {
+        isSvgMode = true;
+      }
+    }
   }
   elm["s-hn"] = hostTagName;
   return elm;
@@ -696,8 +716,12 @@ var patch = (oldVNode, newVNode2, isInitialRender = false) => {
   const elm = newVNode2.$elm$ = oldVNode.$elm$;
   const oldChildren = oldVNode.$children$;
   const newChildren = newVNode2.$children$;
+  const tag = newVNode2.$tag$;
   const text = newVNode2.$text$;
   if (text === null) {
+    {
+      isSvgMode = tag === "svg" ? true : tag === "foreignObject" ? false : isSvgMode;
+    }
     {
       {
         updateElement(oldVNode, newVNode2, isSvgMode);
@@ -713,6 +737,9 @@ var patch = (oldVNode, newVNode2, isInitialRender = false) => {
     } else if (oldChildren !== null) {
       removeVnodes(oldChildren, 0, oldChildren.length - 1);
     }
+    if (isSvgMode && tag === "svg") {
+      isSvgMode = false;
+    }
   } else if (oldVNode.$text$ !== text) {
     elm.data = text;
   }
@@ -1083,6 +1110,7 @@ var initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId) => {
         hostRef.$flags$ |= 128 /* isWatchReady */;
       }
       endNewInstance();
+      fireConnectedCallback(hostRef.$lazyInstance$);
     } else {
       Cstr = elm.constructor;
       const cmpTag = elm.localName;
@@ -1110,6 +1138,9 @@ var initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId) => {
   }
 };
 var fireConnectedCallback = (instance) => {
+  {
+    safeCall(instance, "connectedCallback");
+  }
 };
 
 // src/runtime/connected-callback.ts
@@ -1142,8 +1173,10 @@ var connectedCallback = (elm) => {
         initializeComponent(elm, hostRef, cmpMeta);
       }
     } else {
-      if (hostRef == null ? void 0 : hostRef.$lazyInstance$) ; else if (hostRef == null ? void 0 : hostRef.$onReadyPromise$) {
-        hostRef.$onReadyPromise$.then(() => fireConnectedCallback());
+      if (hostRef == null ? void 0 : hostRef.$lazyInstance$) {
+        fireConnectedCallback(hostRef.$lazyInstance$);
+      } else if (hostRef == null ? void 0 : hostRef.$onReadyPromise$) {
+        hostRef.$onReadyPromise$.then(() => fireConnectedCallback(hostRef.$lazyInstance$));
       }
     }
     endConnected();

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

@@ -1,6 +1,6 @@
-import { r as registerInstance, h } from './index-83985f06.js';
+import { r as registerInstance, h } from './index-4b819858.js';
 
-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 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.LinkSectionListDropdownHeader {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  width: 100%;\n  background: var(--emw--color-primary, #184026);\n  color: var(--emw--color-typography, #FFFFFF);\n  text-align: left;\n  padding: 10px;\n  border: none;\n  border-radius: var(--emw--button-border-radius, 4px);\n  margin-bottom: 3px;\n  cursor: pointer;\n  font-size: 1rem;\n}\n.LinkSectionListDropdownHeader:hover {\n  color: var(--emw--color-secondary, #52d004);\n}\n.LinkSectionListDropdownHeader:hover svg {\n  fill: var(--emw--color-secondary, #52d004);\n}\n.LinkSectionListDropdownHeader.IsOpen {\n  color: var(--emw--color-secondary, #52d004);\n}\n.LinkSectionListDropdownHeader.IsOpen svg {\n  fill: var(--emw--color-secondary, #52d004);\n}\n.LinkSectionListDropdownHeader .TriangleActive {\n  transform: rotate(90deg);\n  -webkit-transform: rotate(90deg);\n}\n.LinkSectionListDropdownHeader svg {\n  fill: var(--emw--color-typography, #FFFFFF);\n  margin-left: 8px;\n  width: 16px;\n  transform: rotate(-90deg);\n  -webkit-transform: rotate(-90deg);\n}\n.LinkSectionListDropdownList {\n  list-style: none;\n  display: none;\n}\n.LinkSectionListDropdownList.open {\n  display: flex;\n  margin: 5px 0;\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 {
@@ -11,10 +11,18 @@ const LinkSectionList = class {
         this.language = undefined;
         this.navigateViaEvent = false;
         this.postMessageEvent = '';
+        this.dropdownLinks = true;
+        this.openCategory = null;
     }
     navigateLink(link) {
         window.postMessage({ type: this.postMessageEvent, path: link.linkUrl, url: link.linkUrl, target: link.target, externalLink: link.externalLink }, window.location.href);
     }
+    toggleCategory(cat) {
+        this.openCategory = this.openCategory === cat ? null : cat;
+    }
+    createHrefLink(link) {
+        return link.externalLink ? link.linkUrl : `${this.baseUrl}/${this.language}${link.linkUrl}`;
+    }
     render() {
         var _a, _b;
         const linkSections = (_b = (_a = this.repeaterContent) === null || _a === void 0 ? void 0 : _a.content) === null || _b === void 0 ? void 0 : _b.reduce((obj, elem) => {
@@ -44,13 +52,19 @@ const LinkSectionList = class {
             }
             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("ui-image", { class: "LinkSectionIcon", src: link.icon, alt: "icon" })), 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 => this.dropdownLinks ? (h("div", { class: "LinkSectionListDropdown" }, h("button", { type: 'button', class: `LinkSectionListDropdownHeader ${this.openCategory === category.categoryTitle ? 'IsOpen' : ''}`, onClick: () => this.toggleCategory(category.categoryTitle) }, category.categoryTitle, h("span", { class: this.openCategory === category.categoryTitle ? 'TriangleActive' : 'TriangleInactive' }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "14", height: "6.835", viewBox: "0 0 14 6.835" }, h("path", { id: "arrow", d: "M281.541,447.921a.488.488,0,0,0,.295-.122l6.5-5.851a.488.488,0,1,0-.65-.726l-6.176,5.556-6.176-5.556h0a.488.488,0,1,0-.65.726l6.5,5.851a.488.488,0,0,0,.355.122Z", transform: "translate(-274.511 -441.088)" })))), h("ul", { class: { 'LinkSectionListDropdownList': true, open: this.openCategory === 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("ui-image", { class: "LinkSectionIcon", src: link.icon, alt: "icon" }))))) : (h("a", { class: "LinkSectionListLink", href: this.createHrefLink(link), 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("ui-image", { class: "LinkSectionIcon", src: link.icon, alt: "icon" })))))))))) : (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("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))) :
+                    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: this.createHrefLink(link), 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("ui-image", { class: "LinkSectionIcon", src: link.icon, alt: "icon" })))))))))));
+                h("span", { class: "LinkSectionListLinkText" }, h("div", { class: "ContainerImage" }, h("ui-image", { class: "LinkSectionIcon", src: link.icon, alt: "icon" }))))))))))));
     }
 };
 LinkSectionList.style = LinkSectionListStyle0;

package/dist/esm/loader.js

@@ -1,11 +1,11 @@
-import { b as bootstrapLazy } from './index-83985f06.js';
-export { s as setNonce } from './index-83985f06.js';
+import { b as bootstrapLazy } from './index-4b819858.js';
+export { s as setNonce } from './index-4b819858.js';
 import { g as globalScripts } from './app-globals-0f993ce5.js';
 
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;
   await globalScripts();
-  return bootstrapLazy([["custom-content-section",[[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",[[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",[[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",[[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"],"customCss":[513,"custom-css"],"translationUrl":[513,"translation-url"],"clockFormat":[513,"clock-format"],"timeZone":[513,"time-zone"],"mbSource":[513,"mb-source"],"hasErrors":[32],"footerContent":[32]},null,{"language":["watchLanguage"]}]]],["ui-image_2",[[0,"ui-image",{"src":[1],"width":[1],"height":[1],"alt":[1],"styles":[8],"detectDistance":[1,"detect-distance"],"loading":[1],"imgLoaded":[32]},null,{"src":["onSrcChange"],"loading":["onLoadingChange"]}],[0,"ui-skeleton",{"structure":[1],"width":[1],"height":[1],"borderRadius":[8,"border-radius"],"marginBottom":[8,"margin-bottom"],"marginTop":[8,"margin-top"],"marginLeft":[8,"margin-left"],"marginRight":[8,"margin-right"],"animation":[4],"rows":[2],"size":[1]},null,{"structure":["handleStructureChange"]}]]],["image-list",[[2,"image-list",{"repeaterContent":[8,"repeater-content"],"navigateViaEvent":[4,"navigate-via-event"],"postMessageEvent":[513,"post-message-event"]}]]]], options);
+  return bootstrapLazy([["custom-content-section",[[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",[[0,"link-section-list",{"repeaterContent":[8,"repeater-content"],"baseUrl":[513,"base-url"],"language":[513],"navigateViaEvent":[4,"navigate-via-event"],"postMessageEvent":[513,"post-message-event"],"dropdownLinks":[516,"dropdown-links"],"openCategory":[32]}]]],["custom-clock",[[2,"custom-clock",{"clockFormat":[513,"clock-format"],"timeZone":[513,"time-zone"],"translationUrl":[513,"translation-url"],"language":[513],"timeString":[32]},null,{"translationUrl":["handleNewTranslations"]}]]],["footer-logo",[[2,"footer-logo",{"endpoint":[513],"language":[513],"logoContent":[32]},null,{"endpoint":["onConfigChange"],"language":["onConfigChange"]}]]],["general-footer-template",[[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"],"customCss":[513,"custom-css"],"translationUrl":[513,"translation-url"],"clockFormat":[513,"clock-format"],"timeZone":[513,"time-zone"],"mbSource":[513,"mb-source"],"dropdownLinks":[516,"dropdown-links"],"hasErrors":[32],"footerContent":[32]},null,{"language":["watchLanguage"]}]]],["ui-image_2",[[0,"ui-image",{"src":[1],"width":[1],"height":[1],"alt":[1],"styles":[8],"detectDistance":[1,"detect-distance"],"loading":[1],"imgLoaded":[32]},null,{"src":["onSrcChange"],"loading":["onLoadingChange"]}],[0,"ui-skeleton",{"structure":[1],"width":[1],"height":[1],"borderRadius":[8,"border-radius"],"marginBottom":[8,"margin-bottom"],"marginTop":[8,"margin-top"],"marginLeft":[8,"margin-left"],"marginRight":[8,"margin-right"],"animation":[4],"rows":[2],"size":[1]},null,{"structure":["handleStructureChange"]}]]],["image-list",[[2,"image-list",{"repeaterContent":[8,"repeater-content"],"navigateViaEvent":[4,"navigate-via-event"],"postMessageEvent":[513,"post-message-event"]}]]]], options);
 };
 
 export { defineCustomElements };

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host, g as getElement } from './index-83985f06.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-4b819858.js';
 
 const uiImageCss = ".HostContainer{display:block}.UiContainer{height:100%;width:100%;border-radius:inherit;object-fit:inherit}.UiContainer .Image{border-radius:inherit}.Hidden{opacity:0;transition:opacity 0.5s ease-in-out}.Visible{opacity:1;border-radius:var(--emw--border-radius-medium, 10px);transition:opacity 0.5s ease-in-out}";
 const UiImageStyle0 = uiImageCss;
@@ -7,6 +7,9 @@ const UiImage = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.hasStarted = false;
+        this._onLoad = () => {
+            this.imgLoaded = true;
+        };
         this.src = undefined;
         this.width = undefined;
         this.height = undefined;
@@ -29,7 +32,6 @@ const UiImage = class {
         if (newVal === oldVal)
             return;
         this.cleanupObserver();
-        this.detachImgHandlers();
         if (newVal === 'eager') {
             if (this.imgEl && this.src) {
                 this.imgEl.src = this.src;
@@ -49,7 +51,8 @@ const UiImage = class {
     }
     disconnectedCallback() {
         this.cleanupObserver();
-        this.detachImgHandlers();
+        if (this.imgEl)
+            this.imgEl.src = '';
     }
     canUseIO() {
         return typeof window !== 'undefined' && 'IntersectionObserver' in window;
@@ -79,32 +82,6 @@ const UiImage = class {
         (_a = this.io) === null || _a === void 0 ? void 0 : _a.disconnect();
         this.io = undefined;
     }
-    wireOnceHandlers() {
-        if (!this.imgEl)
-            return;
-        this.detachImgHandlers();
-        this._onLoad = () => {
-            var _a;
-            if (this.currentSrc && ((_a = this.imgEl) === null || _a === void 0 ? void 0 : _a.currentSrc) && !this.imgEl.currentSrc.includes(this.currentSrc))
-                return;
-            this.imgLoaded = true;
-        };
-        this._onError = () => {
-            console.error('Load image failed:', this.src);
-        };
-        this.imgEl.addEventListener('load', this._onLoad, { once: true });
-        this.imgEl.addEventListener('error', this._onError, { once: true });
-    }
-    detachImgHandlers() {
-        if (!this.imgEl)
-            return;
-        if (this._onLoad)
-            this.imgEl.removeEventListener('load', this._onLoad);
-        if (this._onError)
-            this.imgEl.removeEventListener('error', this._onError);
-        this._onLoad = undefined;
-        this._onError = undefined;
-    }
     beginLoad() {
         if (this.hasStarted)
             return;
@@ -113,12 +90,6 @@ const UiImage = class {
         if (!this.src)
             return;
         this.hasStarted = true;
-        this.wireOnceHandlers();
-        if (this.imgEl.complete && this.imgEl.naturalWidth > 0) {
-            this.imgLoaded = true;
-            return;
-        }
-        this.currentSrc = this.src;
         this.imgEl.src = this.src;
         if (this.imgEl.complete && this.imgEl.naturalWidth > 0) {
             this.imgLoaded = true;
@@ -131,7 +102,7 @@ const UiImage = class {
         return (h(Host, { class: "HostContainer" }, h("img", { src: this.src, decoding: "async", style: this.styles, class: "UiContainer Visible", alt: this.alt, width: this.width, height: this.height, loading: "eager" })));
     }
     renderLazy() {
-        return (h(Host, { class: "HostContainer", "aria-busy": !this.imgLoaded ? 'true' : 'false' }, this.showSkeleton && (h("ui-skeleton", { class: "UiContainer", structure: "image", width: "100%", height: "100%" })), h("img", { ref: (el) => (this.imgEl = el), src: undefined, decoding: "async", style: this.styles, class: `UiContainer ${this.imgLoaded ? 'Visible' : 'Hidden'}`, alt: this.alt, width: this.width, height: this.height, loading: "lazy" })));
+        return (h(Host, { class: "HostContainer", "aria-busy": !this.imgLoaded ? 'true' : 'false' }, this.showSkeleton && (h("ui-skeleton", { class: "UiContainer", structure: "image", width: "100%", height: "100%" })), h("img", { ref: (el) => (this.imgEl = el), src: undefined, decoding: "async", style: this.styles, onLoad: this._onLoad, class: `UiContainer ${this.imgLoaded ? 'Visible' : 'Hidden'}`, alt: this.alt, width: this.width, height: this.height, loading: "lazy" })));
     }
     render() {
         return this.loading === 'eager' ? this.renderEager() : this.renderLazy();