@everymatrix/general-footer-template 1.77.15 → 1.77.17

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

@@ -1,20 +1,30 @@
 import { h } from "@stencil/core";
+import { isMobile } from "../../utils/utils";
 import "../../../../../ui-image/dist/types/index";
 export class LinkSectionList {
     constructor() {
+        this.isMobile = isMobile();
         this.repeaterContent = undefined;
         this.baseUrl = undefined;
         this.language = undefined;
         this.navigateViaEvent = false;
         this.postMessageEvent = '';
-        this.dropdownLinks = false;
+        this.accordionLinks = false;
         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;
+    toggleCategory(category) {
+        if (!this.isMobile)
+            return;
+        this.openCategory = this.openCategory === category ? null : category;
+    }
+    isCategoryOpen(category) {
+        if (this.isMobile) {
+            return this.openCategory === category;
+        }
+        return true;
     }
     createHrefLink(link) {
         return link.externalLink ? link.linkUrl : `${this.baseUrl}/${this.language}${link.linkUrl}`;
@@ -48,19 +58,15 @@ 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 => 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, " "))) :
+        const renderLinkItems = (category) => 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("span", { class: "LinkSectionListLinkText" }, h("div", { class: "ContainerImage" }, h("ui-image", { class: "LinkSectionIcon", src: link.icon, alt: "icon" })))))));
+        return h("div", { class: "LinkSectionListContainer" }, h("div", { class: `LinkSectionListWrapper ${this.accordionLinks ? (this.isMobile ? "is-mobile" : "is-desktop") : ""}` }, this.repeaterContent.categoryTitle && h("h2", { class: "LinkSectionListTitle" }, this.repeaterContent.categoryTitle), linkSections.map(category => this.accordionLinks ?
+            (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.isCategoryOpen(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.isCategoryOpen(category.categoryTitle) } }, renderLinkItems(category)))) : (h("ul", null, category.categoryTitle && h("p", null, category.categoryTitle), renderLinkItems(category))))));
     }
     static get is() { return "link-section-list"; }
     static get originalStyleUrls() {
@@ -162,7 +168,7 @@ export class LinkSectionList {
                 "reflect": true,
                 "defaultValue": "''"
             },
-            "dropdownLinks": {
+            "accordionLinks": {
                 "type": "boolean",
                 "mutable": false,
                 "complexType": {
@@ -176,7 +182,7 @@ export class LinkSectionList {
                     "tags": [],
                     "text": "If is true then this component will look like a dropdown"
                 },
-                "attribute": "dropdown-links",
+                "attribute": "accordion-links",
                 "reflect": true,
                 "defaultValue": "false"
             }

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

@@ -1,221 +1,5 @@
 import { r as registerInstance, h, g as getElement } from './index-4b819858.js';
-
-/**
- * custom rules for component types
- */
-const getDevice = () => {
-    let userAgent = window.navigator.userAgent;
-    if (userAgent.toLowerCase().match(/android/i)) {
-        return 'Android';
-    }
-    if (userAgent.toLowerCase().match(/iphone/i)) {
-        return 'iPhone';
-    }
-    if (userAgent.toLowerCase().match(/ipad|ipod/i)) {
-        return 'iPad';
-    }
-    return 'PC';
-};
-const getDevicePlatform = () => {
-    const device = getDevice();
-    if (device) {
-        if (device === 'PC') {
-            return 'dk';
-        }
-        else if (device === 'iPad' || device === 'iPhone') {
-            return 'ios';
-        }
-        else {
-            return 'mtWeb';
-        }
-    }
-};
-const componentRules = {
-    "downloadApp": {
-        component: 'custom-content-section'
-    },
-    "link-section": {
-        component: 'link-section-list'
-    },
-    "copyright": {
-        component: 'custom-content-section'
-    },
-    "download": {
-        component: 'custom-content-section'
-    },
-    "helpLinks": {
-        component: 'image-list'
-    },
-    "license-description": {
-        component: 'custom-content-section'
-    },
-    "licenses": {
-        component: 'image-list',
-    },
-    "payment": {
-        component: 'image-list',
-    },
-    "social": {
-        component: 'image-list',
-    },
-    "sponsors": {
-        component: 'image-list',
-    },
-    "vendors": {
-        component: 'image-list',
-    },
-    "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
-const normalizeRepeaterContent = (data) => {
-    const repeaterResponse = {
-        repeaters: {
-            vendors: {
-                categoryTitle: data.gameVendorsLinksTitle,
-                content: []
-            },
-            "link-section": {
-                categoryTitle: data.helpLinksTitle,
-                content: []
-            },
-            helpLinks: {
-                categoryTitle: data.helpLinksTitle,
-                content: []
-            },
-            licenses: {
-                categoryTitle: data.licensesLinksTitle,
-                content: []
-            },
-            sponsors: {
-                categoryTitle: data.sponsorsLinksTitle,
-                content: []
-            },
-            payment: {
-                categoryTitle: data.paymentLinksTitle,
-                content: []
-            },
-            social: {
-                categoryTitle: data.socialLinksTitle,
-                content: []
-            },
-            downloadApp: {
-                categoryTitle: data.downloadAppLinksTitle,
-                content: []
-            }
-        },
-        wysiwyg: {
-            copyright: {
-                categoryTitle: 'test',
-                content: 'test'
-            },
-            customCSS: {
-                categoryTitle: 'test',
-                content: 'test'
-            },
-            download: {
-                categoryTitle: 'test',
-                content: 'test'
-            },
-            downloadApp: {
-                categoryTitle: 'test',
-                content: 'test'
-            },
-            "license-description": {
-                categoryTitle: 'test',
-                content: 'test'
-            }
-        }
-    };
-    const propertyNamesMap = {
-        helpLinks: {
-            repeaterName: 'helpLinksRepeater',
-            isExternalLink: 'helpLinkType',
-            image: 'helpLinkImage',
-            title: 'helpLinkTitle',
-            url: 'helpLinkUrl',
-            target: 'target'
-        },
-        "link-section": {
-            repeaterName: 'helpLinksRepeater',
-            isExternalLink: 'helpLinkType',
-            linkCategory: 'helpLinkCategory',
-            image: 'helpLinkImage',
-            title: 'helpLinkTitle',
-            url: 'helpLinkUrl',
-            target: 'target'
-        },
-        social: {
-            repeaterName: 'socialLinksRepeater',
-            isExternalLink: 'isExternalLink',
-            image: 'socialLinkImage',
-            title: 'socialLinkTitle',
-            url: 'socialLinkUrl',
-            target: 'target'
-        },
-        vendors: {
-            repeaterName: 'gameVendorsRepeater',
-            isExternalLink: 'isExternalLink',
-            image: 'gameVendorImage',
-            title: 'gameVendorTitle',
-            url: 'gameVendorUrl',
-            target: 'target'
-        },
-        licenses: {
-            repeaterName: 'licensesRepeater',
-            isExternalLink: 'isExternalLink',
-            image: 'licenseImage',
-            title: 'licenseTitle',
-            url: 'licenseUrl',
-            target: 'target'
-        },
-        payment: {
-            repeaterName: 'paymentMethodsRepeater',
-            isExternalLink: 'isExternalLink',
-            image: 'paymentMethodImage',
-            title: 'paymentTitle',
-            url: 'paymentMethodUrl',
-            target: 'target'
-        },
-        sponsors: {
-            repeaterName: 'sponsorsRepeater',
-            isExternalLink: 'isExternalLink',
-            image: 'sponsorImage',
-            title: 'sponsorTitle',
-            url: 'sponsorUrl',
-            target: 'target'
-        }
-    };
-    // this goes through all of the repeater content sections and uniformize their property names so that the footer can treat them generally instead of case-by-case
-    Object.entries(repeaterResponse.repeaters).forEach(repeater => {
-        var _a, _b, _c;
-        if (propertyNamesMap[repeater[0]] && data[(_a = propertyNamesMap[repeater[0]]) === null || _a === void 0 ? void 0 : _a.repeaterName]) {
-            repeater[1].content = (_c = data[(_b = propertyNamesMap[repeater[0]]) === null || _b === void 0 ? void 0 : _b.repeaterName]) === null || _c === void 0 ? void 0 : _c.map(content => {
-                var _a, _b, _c, _d, _e, _f;
-                return {
-                    // all properties have a null fallback - avoid undefined propagation
-                    isExternalLink: (_a = content[propertyNamesMap[repeater[0]].isExternalLink]) !== null && _a !== void 0 ? _a : null,
-                    linkCategory: (_b = content[propertyNamesMap[repeater[0]].linkCategory]) !== null && _b !== void 0 ? _b : null,
-                    image: (_c = content[propertyNamesMap[repeater[0]].image]) !== null && _c !== void 0 ? _c : null,
-                    title: (_d = content[propertyNamesMap[repeater[0]].title]) !== null && _d !== void 0 ? _d : null,
-                    url: (_e = content[propertyNamesMap[repeater[0]].url]) !== null && _e !== void 0 ? _e : null,
-                    target: (_f = content[propertyNamesMap[repeater[0]].target]) !== null && _f !== void 0 ? _f : null,
-                };
-            });
-        }
-    });
-    repeaterResponse.repeaters.downloadApp.content = data.downloadInfos.imageArea || [];
-    repeaterResponse.wysiwyg.downloadApp.content = data.downloadInfos.downloadDescription || '';
-    repeaterResponse.wysiwyg.copyright.content = data.copyright;
-    repeaterResponse.wysiwyg.customCSS.content = data.customCSS;
-    repeaterResponse.wysiwyg["license-description"].content = data.licenseDesc;
-    return repeaterResponse;
-};
+import { g as getDevicePlatform, n as normalizeRepeaterContent, c as componentRules } from './utils-904e2462.js';
 
 /**
  * @name setClientStyling
@@ -302,7 +86,7 @@ const GeneralFooterTemplate = class {
         this.clockFormat = 'HH:MM:ss';
         this.timeZone = '';
         this.mbSource = undefined;
-        this.dropdownLinks = false;
+        this.accordionLinks = false;
         this.hasErrors = false;
         this.footerContent = undefined;
     }
@@ -366,7 +150,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, 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(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, "accordion-links": this.accordionLinks });
             });
             return (h("footer", { class: "FooterContainer", ref: el => this.stylingContainer = el }, h("div", { class: "FooterGrid customStyle" }, footerSections)));
         }

package/dist/esm/general-footer-template.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"],"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"],"imgLoaded":[32],"shouldLoad":[32]},null,{"src":["handleSrc"]}],[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"],"accordionLinks":[516,"accordion-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"],"accordionLinks":[516,"accordion-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"],"imgLoaded":[32],"shouldLoad":[32]},null,{"src":["handleSrc"]}],[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/link-section-list.entry.js

@@ -1,4 +1,5 @@
 import { r as registerInstance, h } from './index-4b819858.js';
+import { i as isMobile } from './utils-904e2462.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.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}\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;
@@ -6,19 +7,28 @@ const LinkSectionListStyle0 = linkSectionListCss;
 const LinkSectionList = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
+        this.isMobile = isMobile();
         this.repeaterContent = undefined;
         this.baseUrl = undefined;
         this.language = undefined;
         this.navigateViaEvent = false;
         this.postMessageEvent = '';
-        this.dropdownLinks = false;
+        this.accordionLinks = false;
         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;
+    toggleCategory(category) {
+        if (!this.isMobile)
+            return;
+        this.openCategory = this.openCategory === category ? null : category;
+    }
+    isCategoryOpen(category) {
+        if (this.isMobile) {
+            return this.openCategory === category;
+        }
+        return true;
     }
     createHrefLink(link) {
         return link.externalLink ? link.linkUrl : `${this.baseUrl}/${this.language}${link.linkUrl}`;
@@ -52,19 +62,15 @@ 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 => 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, " "))) :
+        const renderLinkItems = (category) => 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("span", { class: "LinkSectionListLinkText" }, h("div", { class: "ContainerImage" }, h("ui-image", { class: "LinkSectionIcon", src: link.icon, alt: "icon" })))))));
+        return h("div", { class: "LinkSectionListContainer" }, h("div", { class: `LinkSectionListWrapper ${this.accordionLinks ? (this.isMobile ? "is-mobile" : "is-desktop") : ""}` }, this.repeaterContent.categoryTitle && h("h2", { class: "LinkSectionListTitle" }, this.repeaterContent.categoryTitle), linkSections.map(category => this.accordionLinks ?
+            (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.isCategoryOpen(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.isCategoryOpen(category.categoryTitle) } }, renderLinkItems(category)))) : (h("ul", null, category.categoryTitle && h("p", null, category.categoryTitle), renderLinkItems(category))))));
     }
 };
 LinkSectionList.style = LinkSectionListStyle0;

package/dist/esm/loader.js

@@ -5,7 +5,7 @@ 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"],"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"],"imgLoaded":[32],"shouldLoad":[32]},null,{"src":["handleSrc"]}],[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"],"accordionLinks":[516,"accordion-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"],"accordionLinks":[516,"accordion-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"],"imgLoaded":[32],"shouldLoad":[32]},null,{"src":["handleSrc"]}],[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 };