@everymatrix/general-footer-template 1.77.15 → 1.77.17

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

@@ -3,223 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-13599735.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;
-};
+const utils = require('./utils-9b9a9d42.js');
 
 /**
  * @name setClientStyling
@@ -284,7 +68,7 @@ const GeneralFooterTemplateStyle0 = demoFooterCss;
 const GeneralFooterTemplate = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.platform = getDevicePlatform();
+        this.platform = utils.getDevicePlatform();
         /**
          *  Host element
          */
@@ -306,7 +90,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;
     }
@@ -337,7 +121,7 @@ const GeneralFooterTemplate = class {
                 this.hasErrors = true;
             }
             else {
-                this.footerContent = normalizeRepeaterContent(data);
+                this.footerContent = utils.normalizeRepeaterContent(data);
             }
         });
     }
@@ -367,10 +151,10 @@ const GeneralFooterTemplate = class {
         }
         else {
             const footerSections = this.sectionsList.map((section, i) => {
-                const FooterElement = componentRules[section].component;
+                const FooterElement = utils.componentRules[section].component;
                 const elementIsRepeater = this.footerContent.repeaters.hasOwnProperty(section);
                 const elementIsCustom = this.footerContent.wysiwyg.hasOwnProperty(section);
-                return index.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 index.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: utils.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 (index.h("footer", { class: "FooterContainer", ref: el => this.stylingContainer = el }, index.h("div", { class: "FooterGrid customStyle" }, footerSections)));
         }

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

@@ -19,7 +19,7 @@ var patchBrowser = () => {
 
 patchBrowser().then(async (options) => {
   await appGlobals.globalScripts();
-  return index.bootstrapLazy([["custom-content-section.cjs",[[2,"custom-content-section",{"customContent":[1,"custom-content"],"repeaterContent":[8,"repeater-content"],"navigateViaEvent":[516,"navigate-via-event"],"postMessageEvent":[513,"post-message-event"]}]]],["link-section-list.cjs",[[0,"link-section-list",{"repeaterContent":[8,"repeater-content"],"baseUrl":[513,"base-url"],"language":[513],"navigateViaEvent":[4,"navigate-via-event"],"postMessageEvent":[513,"post-message-event"],"dropdownLinks":[516,"dropdown-links"],"openCategory":[32]}]]],["custom-clock.cjs",[[2,"custom-clock",{"clockFormat":[513,"clock-format"],"timeZone":[513,"time-zone"],"translationUrl":[513,"translation-url"],"language":[513],"timeString":[32]},null,{"translationUrl":["handleNewTranslations"]}]]],["footer-logo.cjs",[[2,"footer-logo",{"endpoint":[513],"language":[513],"logoContent":[32]},null,{"endpoint":["onConfigChange"],"language":["onConfigChange"]}]]],["general-footer-template.cjs",[[1,"general-footer-template",{"language":[513],"sections":[513],"endpoint":[513],"env":[513],"userRoles":[513,"user-roles"],"userid":[513],"session":[513],"baseUrl":[513,"base-url"],"navigateViaEvent":[513,"navigate-via-event"],"postMessageEvent":[513,"post-message-event"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"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.cjs",[[0,"ui-image",{"src":[1],"width":[1],"height":[1],"alt":[1],"styles":[8],"detectDistance":[1,"detect-distance"],"imgLoaded":[32],"shouldLoad":[32]},null,{"src":["handleSrc"]}],[0,"ui-skeleton",{"structure":[1],"width":[1],"height":[1],"borderRadius":[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.cjs",[[2,"image-list",{"repeaterContent":[8,"repeater-content"],"navigateViaEvent":[4,"navigate-via-event"],"postMessageEvent":[513,"post-message-event"]}]]]], options);
+  return index.bootstrapLazy([["custom-content-section.cjs",[[2,"custom-content-section",{"customContent":[1,"custom-content"],"repeaterContent":[8,"repeater-content"],"navigateViaEvent":[516,"navigate-via-event"],"postMessageEvent":[513,"post-message-event"]}]]],["link-section-list.cjs",[[0,"link-section-list",{"repeaterContent":[8,"repeater-content"],"baseUrl":[513,"base-url"],"language":[513],"navigateViaEvent":[4,"navigate-via-event"],"postMessageEvent":[513,"post-message-event"],"accordionLinks":[516,"accordion-links"],"openCategory":[32]}]]],["custom-clock.cjs",[[2,"custom-clock",{"clockFormat":[513,"clock-format"],"timeZone":[513,"time-zone"],"translationUrl":[513,"translation-url"],"language":[513],"timeString":[32]},null,{"translationUrl":["handleNewTranslations"]}]]],["footer-logo.cjs",[[2,"footer-logo",{"endpoint":[513],"language":[513],"logoContent":[32]},null,{"endpoint":["onConfigChange"],"language":["onConfigChange"]}]]],["general-footer-template.cjs",[[1,"general-footer-template",{"language":[513],"sections":[513],"endpoint":[513],"env":[513],"userRoles":[513,"user-roles"],"userid":[513],"session":[513],"baseUrl":[513,"base-url"],"navigateViaEvent":[513,"navigate-via-event"],"postMessageEvent":[513,"post-message-event"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"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.cjs",[[0,"ui-image",{"src":[1],"width":[1],"height":[1],"alt":[1],"styles":[8],"detectDistance":[1,"detect-distance"],"imgLoaded":[32],"shouldLoad":[32]},null,{"src":["handleSrc"]}],[0,"ui-skeleton",{"structure":[1],"width":[1],"height":[1],"borderRadius":[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.cjs",[[2,"image-list",{"repeaterContent":[8,"repeater-content"],"navigateViaEvent":[4,"navigate-via-event"],"postMessageEvent":[513,"post-message-event"]}]]]], options);
 });
 
 exports.setNonce = index.setNonce;

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

@@ -3,6 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-13599735.js');
+const utils = require('./utils-9b9a9d42.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;
@@ -10,19 +11,28 @@ const LinkSectionListStyle0 = linkSectionListCss;
 const LinkSectionList = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
+        this.isMobile = utils.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}`;
@@ -56,19 +66,15 @@ const LinkSectionList = class {
             }
             return obj;
         }, []);
-        return index.h("div", { class: "LinkSectionListContainer" }, index.h("div", { class: "LinkSectionListWrapper" }, this.repeaterContent.categoryTitle && index.h("h2", { class: "LinkSectionListTitle" }, this.repeaterContent.categoryTitle), linkSections.map(category => this.dropdownLinks ? (index.h("div", { class: "LinkSectionListDropdown" }, index.h("button", { type: 'button', class: `LinkSectionListDropdownHeader ${this.openCategory === category.categoryTitle ? 'IsOpen' : ''}`, onClick: () => this.toggleCategory(category.categoryTitle) }, category.categoryTitle, index.h("span", { class: this.openCategory === category.categoryTitle ? 'TriangleActive' : 'TriangleInactive' }, index.h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "14", height: "6.835", viewBox: "0 0 14 6.835" }, index.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)" })))), index.h("ul", { class: { 'LinkSectionListDropdownList': true, open: this.openCategory === category.categoryTitle } }, category.links.map(link => index.h("li", { class: "LinkSectionListLink", key: link.linkName }, this.navigateViaEvent === true ? (index.h("span", null, link.linkName && link.icon ? (index.h("span", { class: "LinkSectionListLinkText", onClick: () => this.navigateLink(link) }, index.h("div", { class: "ContainerImage" }, index.h("ui-image", { class: "LinkSectionIcon", src: link.icon, alt: "icon" })), index.h("span", { class: '' }, link.linkName, " "))) :
-            link.linkName ?
-                index.h("span", { class: "LinkSectionListLinkText", onClick: () => this.navigateLink(link) }, index.h("span", null, link.linkName, " "))
-                :
-                    index.h("span", { class: "LinkSectionListLinkText", onClick: () => this.navigateLink(link) }, index.h("div", { class: "ContainerImage" }, index.h("ui-image", { class: "LinkSectionIcon", src: link.icon, alt: "icon" }))))) : (index.h("a", { class: "LinkSectionListLink", href: this.createHrefLink(link), target: link.target || '_blank' }, link.linkName && link.icon ? (index.h("span", { class: "LinkSectionListLinkText" }, index.h("div", { class: "ContainerImage" }, index.h("ui-image", { class: "LinkSectionIcon", src: link.icon, alt: "icon" })), index.h("span", null, link.linkName))) :
-            link.linkName ? (index.h("span", { class: "LinkSectionListLinkText" }, index.h("span", null, link.linkName))) :
-                index.h("span", { class: "LinkSectionListLinkText" }, index.h("div", { class: "ContainerImage" }, index.h("ui-image", { class: "LinkSectionIcon", src: link.icon, alt: "icon" })))))))))) : (index.h("ul", null, category.categoryTitle && index.h("p", null, category.categoryTitle), category.links.map(link => index.h("li", { class: "LinkSectionListLink", key: link.linkName }, this.navigateViaEvent === true ? (index.h("span", null, link.linkName && link.icon ? (index.h("span", { class: "LinkSectionListLinkText", onClick: () => this.navigateLink(link) }, index.h("div", { class: "ContainerImage" }, index.h("ui-image", { class: "LinkSectionIcon", src: link.icon, alt: "icon" })), index.h("span", { class: '' }, link.linkName, " "))) :
+        const renderLinkItems = (category) => category.links.map(link => index.h("li", { class: "LinkSectionListLink", key: link.linkName }, this.navigateViaEvent === true ? (index.h("span", null, link.linkName && link.icon ? (index.h("span", { class: "LinkSectionListLinkText", onClick: () => this.navigateLink(link) }, index.h("div", { class: "ContainerImage" }, index.h("ui-image", { class: "LinkSectionIcon", src: link.icon, alt: "icon" })), index.h("span", { class: '' }, link.linkName, " "))) :
             link.linkName ?
                 index.h("span", { class: "LinkSectionListLinkText", onClick: () => this.navigateLink(link) }, index.h("span", null, link.linkName, " "))
                 :
                     index.h("span", { class: "LinkSectionListLinkText", onClick: () => this.navigateLink(link) }, index.h("div", { class: "ContainerImage" }, index.h("ui-image", { class: "LinkSectionIcon", src: link.icon, alt: "icon" }))))) : (index.h("a", { class: "LinkSectionListLink", href: this.createHrefLink(link), target: link.target || '_blank' }, link.linkName && link.icon ? (index.h("span", { class: "LinkSectionListLinkText" }, index.h("div", { class: "ContainerImage" }, index.h("ui-image", { class: "LinkSectionIcon", src: link.icon, alt: "icon" })), index.h("span", null, link.linkName))) :
             link.linkName ? (index.h("span", { class: "LinkSectionListLinkText" }, index.h("span", null, link.linkName))) :
-                index.h("span", { class: "LinkSectionListLinkText" }, index.h("div", { class: "ContainerImage" }, index.h("ui-image", { class: "LinkSectionIcon", src: link.icon, alt: "icon" }))))))))))));
+                index.h("span", { class: "LinkSectionListLinkText" }, index.h("div", { class: "ContainerImage" }, index.h("ui-image", { class: "LinkSectionIcon", src: link.icon, alt: "icon" })))))));
+        return index.h("div", { class: "LinkSectionListContainer" }, index.h("div", { class: `LinkSectionListWrapper ${this.accordionLinks ? (this.isMobile ? "is-mobile" : "is-desktop") : ""}` }, this.repeaterContent.categoryTitle && index.h("h2", { class: "LinkSectionListTitle" }, this.repeaterContent.categoryTitle), linkSections.map(category => this.accordionLinks ?
+            (index.h("div", { class: "LinkSectionListDropdown" }, index.h("button", { type: 'button', class: `LinkSectionListDropdownHeader ${this.openCategory === category.categoryTitle ? 'IsOpen' : ''}`, onClick: () => this.toggleCategory(category.categoryTitle) }, category.categoryTitle, index.h("span", { class: this.isCategoryOpen(category.categoryTitle) ? 'TriangleActive' : 'TriangleInactive' }, index.h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "14", height: "6.835", viewBox: "0 0 14 6.835" }, index.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)" })))), index.h("ul", { class: { 'LinkSectionListDropdownList': true, open: this.isCategoryOpen(category.categoryTitle) } }, renderLinkItems(category)))) : (index.h("ul", null, category.categoryTitle && index.h("p", null, category.categoryTitle), renderLinkItems(category))))));
     }
 };
 LinkSectionList.style = LinkSectionListStyle0;

package/dist/cjs/loader.cjs.js

@@ -8,7 +8,7 @@ const appGlobals = require('./app-globals-3a1e7e63.js');
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;
   await appGlobals.globalScripts();
-  return index.bootstrapLazy([["custom-content-section.cjs",[[2,"custom-content-section",{"customContent":[1,"custom-content"],"repeaterContent":[8,"repeater-content"],"navigateViaEvent":[516,"navigate-via-event"],"postMessageEvent":[513,"post-message-event"]}]]],["link-section-list.cjs",[[0,"link-section-list",{"repeaterContent":[8,"repeater-content"],"baseUrl":[513,"base-url"],"language":[513],"navigateViaEvent":[4,"navigate-via-event"],"postMessageEvent":[513,"post-message-event"],"dropdownLinks":[516,"dropdown-links"],"openCategory":[32]}]]],["custom-clock.cjs",[[2,"custom-clock",{"clockFormat":[513,"clock-format"],"timeZone":[513,"time-zone"],"translationUrl":[513,"translation-url"],"language":[513],"timeString":[32]},null,{"translationUrl":["handleNewTranslations"]}]]],["footer-logo.cjs",[[2,"footer-logo",{"endpoint":[513],"language":[513],"logoContent":[32]},null,{"endpoint":["onConfigChange"],"language":["onConfigChange"]}]]],["general-footer-template.cjs",[[1,"general-footer-template",{"language":[513],"sections":[513],"endpoint":[513],"env":[513],"userRoles":[513,"user-roles"],"userid":[513],"session":[513],"baseUrl":[513,"base-url"],"navigateViaEvent":[513,"navigate-via-event"],"postMessageEvent":[513,"post-message-event"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"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.cjs",[[0,"ui-image",{"src":[1],"width":[1],"height":[1],"alt":[1],"styles":[8],"detectDistance":[1,"detect-distance"],"imgLoaded":[32],"shouldLoad":[32]},null,{"src":["handleSrc"]}],[0,"ui-skeleton",{"structure":[1],"width":[1],"height":[1],"borderRadius":[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.cjs",[[2,"image-list",{"repeaterContent":[8,"repeater-content"],"navigateViaEvent":[4,"navigate-via-event"],"postMessageEvent":[513,"post-message-event"]}]]]], options);
+  return index.bootstrapLazy([["custom-content-section.cjs",[[2,"custom-content-section",{"customContent":[1,"custom-content"],"repeaterContent":[8,"repeater-content"],"navigateViaEvent":[516,"navigate-via-event"],"postMessageEvent":[513,"post-message-event"]}]]],["link-section-list.cjs",[[0,"link-section-list",{"repeaterContent":[8,"repeater-content"],"baseUrl":[513,"base-url"],"language":[513],"navigateViaEvent":[4,"navigate-via-event"],"postMessageEvent":[513,"post-message-event"],"accordionLinks":[516,"accordion-links"],"openCategory":[32]}]]],["custom-clock.cjs",[[2,"custom-clock",{"clockFormat":[513,"clock-format"],"timeZone":[513,"time-zone"],"translationUrl":[513,"translation-url"],"language":[513],"timeString":[32]},null,{"translationUrl":["handleNewTranslations"]}]]],["footer-logo.cjs",[[2,"footer-logo",{"endpoint":[513],"language":[513],"logoContent":[32]},null,{"endpoint":["onConfigChange"],"language":["onConfigChange"]}]]],["general-footer-template.cjs",[[1,"general-footer-template",{"language":[513],"sections":[513],"endpoint":[513],"env":[513],"userRoles":[513,"user-roles"],"userid":[513],"session":[513],"baseUrl":[513,"base-url"],"navigateViaEvent":[513,"navigate-via-event"],"postMessageEvent":[513,"post-message-event"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"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.cjs",[[0,"ui-image",{"src":[1],"width":[1],"height":[1],"alt":[1],"styles":[8],"detectDistance":[1,"detect-distance"],"imgLoaded":[32],"shouldLoad":[32]},null,{"src":["handleSrc"]}],[0,"ui-skeleton",{"structure":[1],"width":[1],"height":[1],"borderRadius":[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.cjs",[[2,"image-list",{"repeaterContent":[8,"repeater-content"],"navigateViaEvent":[4,"navigate-via-event"],"postMessageEvent":[513,"post-message-event"]}]]]], options);
 };
 
 exports.setNonce = index.setNonce;

package/dist/cjs/utils-9b9a9d42.js

@@ -0,0 +1,230 @@
+'use strict';
+
+/**
+ * custom rules for component types
+ */
+const isMobile = () => {
+    let userAgent = window.navigator.userAgent;
+    return !!(userAgent.toLowerCase().match(/android/i) ||
+        userAgent.toLowerCase().match(/blackberry|bb/i) ||
+        userAgent.toLowerCase().match(/iphone|ipad|ipod/i) ||
+        userAgent.toLowerCase().match(/windows phone|windows mobile|iemobile|wpdesktop/i));
+};
+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;
+};
+
+exports.componentRules = componentRules;
+exports.getDevicePlatform = getDevicePlatform;
+exports.isMobile = isMobile;
+exports.normalizeRepeaterContent = normalizeRepeaterContent;

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

@@ -26,7 +26,7 @@ export class GeneralFooterTemplate {
         this.clockFormat = 'HH:MM:ss';
         this.timeZone = '';
         this.mbSource = undefined;
-        this.dropdownLinks = false;
+        this.accordionLinks = false;
         this.hasErrors = false;
         this.footerContent = undefined;
     }
@@ -90,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, 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)));
         }
@@ -407,7 +407,7 @@ export class GeneralFooterTemplate {
                 "attribute": "mb-source",
                 "reflect": true
             },
-            "dropdownLinks": {
+            "accordionLinks": {
                 "type": "boolean",
                 "mutable": false,
                 "complexType": {
@@ -421,7 +421,7 @@ export class GeneralFooterTemplate {
                     "tags": [],
                     "text": "whether dropdown behavior is enabled for the link-section-list"
                 },
-                "attribute": "dropdown-links",
+                "attribute": "accordion-links",
                 "reflect": true,
                 "defaultValue": "false"
             }