@everymatrix/general-footer-template 1.0.69

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

@@ -0,0 +1,315 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-4c3922ac.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',
+    },
+};
+// 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'
+            },
+            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: 'paymentUrl',
+            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["license-description"].content = data.licenseDesc;
+    return repeaterResponse;
+};
+
+const demoFooterCss = ":host {\n  display: block;\n}\n\n/* $-background-primary: #14202d; */\n* {\n  font-family: sans-serif;\n}\n\nhtml,\nbody {\n  margin: 0;\n  padding: 0;\n  font-family: inherit;\n}\n\n.FooterSectionContainer {\n  color: var(--emw--footer-typography, var(--emw-color-thpography, #fff));\n  padding: 12px;\n}\n\n/* // FOOTER CONTAINER - only serves to be read as a container */\n.FooterContainer {\n  container-type: inline-size;\n  container-name: footerContainer;\n}\n\n.FooterGrid {\n  background-color: var(--emw--footer-color-bg, var(--emw--color-background, #0E1511));\n  display: grid;\n  padding: 8px 24px 0 24px;\n  grid-template-rows: repeat(9, auto);\n  grid-template-areas: \"one\" \"two\" \"three\" \"four\" \"five\" \"six\" \"seven\";\n}\n\n.FooterSectionContainer1 {\n  position: relative;\n  grid-area: one;\n}\n\n.FooterSectionContainer2 {\n  position: relative;\n  grid-area: two;\n}\n\n.FooterSectionContainer3 {\n  position: relative;\n  grid-area: three;\n}\n\n.FooterSectionContainer4 {\n  position: relative;\n  grid-area: four;\n}\n\n.FooterSectionContainer5 {\n  grid-area: five;\n}\n\n.FooterSectionContainer6 {\n  padding-top: 22px;\n  grid-area: six;\n}\n\n.FooterSectionContainer7 {\n  grid-area: seven;\n}\n\n/* // remove paddings */\n.FooterSectionContainer7 div {\n  padding: 0;\n}\n\n@container (max-width: 750px) {\n  .FooterSectionContainer3:after,\n  .FooterSectionContainer2:after {\n    position: absolute;\n    content: \"\";\n    height: 1px;\n    width: 90%;\n    background-color: var(--emw--color-gray-100, #444);\n  }\n  .FooterSectionContainer5 {\n    grid-area: five;\n    background-color: var(--emw--color-background-secondary, #060706);\n    padding: 30px 0;\n    font-size: var(--emw--font-size-medium, 16px);\n    min-height: var(--emw--size-medium-plus, 100px);\n    justify-self: center;\n  }\n}\n/* // STYLES FOR TABLET / DESKTOP */\n@container (min-width: 750px) {\n  .FooterGrid {\n    background: var(--emw--footer-color-bg, var(--emw--color-background, #0E1511));\n    display: grid;\n    border-top: 5px solid var(--emw--footer-color-primary, var(--emw--color-primary, #22B04E));\n    grid-template-rows: repeat(5, auto);\n    grid-template-columns: 1fr 1fr 1fr 1fr;\n    grid-template-areas: \"one two three four\" \"five five five five\" \"six six six six\" \"seven seven seven seven\";\n  }\n  .FooterSectionContainer1 {\n    padding: 30px 40px;\n    grid-area: one;\n    background: var(--emw--color-background, #000000);\n  }\n  .FooterSectionContainer2 {\n    grid-area: two;\n    min-height: var(--emw--size-4x-medium, 500px);\n  }\n  .FooterSectionContainer3 {\n    grid-area: three;\n  }\n  .FooterSectionContainer4 {\n    grid-area: four;\n  }\n  .FooterSectionContainer5 {\n    grid-area: five;\n    background-color: var(--emw--color-background-secondary, #091217);\n    padding: var(--emw--spacing-x-large, 30px) 0;\n    font-size: var(--emw--font-size-medium, 16px);\n    min-height: var(--emw--size-medium-plus, 100px);\n  }\n  .FooterSectionContainer6 {\n    grid-area: six;\n    padding: 0;\n  }\n  .FooterSectionContainer7 {\n    grid-area: seven;\n    padding: 0;\n  }\n  /* // remove paddings */\n  .FooterSectionContainer5 .CustomContentSectionWrapper {\n    padding: 0;\n  }\n  .FooterSectionContainer5 .CustomContentSectionWrapper div {\n    display: flex;\n    flex-direction: left;\n    align-items: center;\n    padding-left: var(--emw--spacing-large, 20px);\n  }\n  .FooterSectionContainer5 .CustomContentSectionWrapper div p {\n    margin: var(--emw--spacing-2x-small, 5px);\n    text-align: center;\n  }\n  .FooterSectionContainer6 .CustomContentSectionWrapper div p {\n    text-align: center;\n  }\n  .FooterSectionContainer6 .ImageListWrapper {\n    padding: 0;\n  }\n  .FooterSectionContainer6 .ImageListWrapper {\n    padding: 0;\n  }\n  .FooterSectionContainer7 .CustomContentSectionWrapper {\n    padding: 0;\n    padding-bottom: var(--emw--spacing-large, 22px);\n    font-size: var(--emw--font-size-small, 14px);\n  }\n}";
+const GeneralFooterTemplateStyle0 = demoFooterCss;
+
+const pariuriPlusVariantCss = ":host {\n  display: block;\n}\n\n/* $-background-primary: #14202d; */\n\n* {\n  font-family: sans-serif;\n}\n\nhtml,\nbody {\n  margin: 0;\n  padding: 0;\n  font-family: inherit;\n}\n\n.FooterSectionContainer {\n  color: #fff;\n  padding: 12px;\n}\n\n/* // FOOTER CONTAINER - only serves to be read as a container */\n.FooterContainer {\n  container-type: inline-size;\n  container-name: footerContainer;\n}\n\n\n.FooterGrid {\n  background-color: #14202D;\n  display: grid;\n  padding: 8px 24px 0 24px;\n  grid-template-rows: repeat(9, auto);\n  grid-template-areas: \"one\"\n                       \"two\"\n                       \"three\"\n                       \"four\"\n                       \"five\"\n                       \"six\"\n                       \"seven\";\n}\n\n \n\n.FooterSectionContainer1 {\n  position: relative;\n  grid-area: one;\n  \n}\n.FooterSectionContainer2 {\n  position: relative;\n  grid-area: two;\n  border-bottom: 1px solid rgba(254, 254, 254, 0.2);\n}\n.FooterSectionContainer3 {\n  position: relative;\n  grid-area: three;\n  \n}\n.FooterSectionContainer4 {\n  position: relative;\n  grid-area: four;\n  border-bottom: 1px solid rgba(254, 254, 254, 0.2);\n}\n.FooterSectionContainer5 {\n  grid-area: five;\n  /* border-bottom: 1px solid #444; */\n}\n.FooterSectionContainer6 {\n  padding-top: 22px;\n  grid-area: six;\n}\n.FooterSectionContainer7 {\n  grid-area: seven;\n}\n\n/* // remove paddings */\n.FooterSectionContainer7 div{\n  padding: 0;\n}\n\n.FooterSectionContainer3:after {\n  position: absolute;\n  content: \"\";\n  left: 30%;\n  bottom: -20px;\n  height: 1px;\n  width: 40%;\n  background-color: #444;\n}\n\n\n\n/* // STYLES FOR TABLET / DESKTOP */\n@container (min-width: 750px) {\n  .FooterGrid {\n    background: $-background-primary;\n    display: grid;\n    grid-template-rows: repeat(5, auto);\n    grid-template-columns: 2fr 1fr;\n    grid-template-areas: \"one two\"\n                         \"three four\"\n                         \"five five\"\n                         \"six six\"\n                         \"seven seven\";\n  }\n  \n  \n  .FooterSectionContainer1 {\n    grid-area: one;\n    border-bottom: 1px solid rgba(254, 254, 254, 0.2);\n  }\n  .FooterSectionContainer2 {\n    grid-area: two;\n\n  }\n  .FooterSectionContainer3 {\n    grid-area: three;\n    border-bottom: 1px solid rgba(254, 254, 254, 0.2);\n  }\n  .FooterSectionContainer4 {\n    grid-area: four;\n  }\n  .FooterSectionContainer5 {\n    grid-area: five;\n  }\n  .FooterSectionContainer6 {\n    grid-area: six;\n    padding: 0;\n  }\n  .FooterSectionContainer7 {\n    grid-area: seven;\n    padding: 0;\n  }\n\n  /* VERTICAL BARS */\n  .FooterSectionContainer3:after {\n    position: absolute;\n    content: \"\";\n    left: initial;\n    bottom:initial;\n    top: 30%;\n    right: 20px;\n    width: 1px;\n    height: 40%;\n    background-color: #444;\n  }\n\n  /* // remove paddings */\n  .FooterSectionContainer5 .CustomContentSectionWrapper {\n    padding: 0;\n  }\n\n  .FooterSectionContainer5 .CustomContentSectionWrapper div {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n  }\n\n  .FooterSectionContainer5 .CustomContentSectionWrapper div p {\n    margin: 5px;\n    text-align: center;\n  }\n\n  .FooterSectionContainer6 .CustomContentSectionWrapper div p {\n    text-align: center;\n  }\n\n  .FooterSectionContainer6 .ImageListWrapper {\n    padding: 0;\n  }\n\n  .FooterSectionContainer6 .ImageListWrapper {\n    padding: 0;\n    /* padding-bottom: 22px; */\n    /* font-size: 14px; */\n  }\n\n  .FooterSectionContainer7 .CustomContentSectionWrapper {\n    padding: 0;\n    padding-bottom: 22px;\n    font-size: 14px;\n  }\n}";
+const GeneralFooterTemplateStyle1 = pariuriPlusVariantCss;
+
+const variantStyle1Css = ":host {\n  display: block;\n}\n\n/* $-background-primary: #14202d; */\n\n* {\n  font-family: sans-serif;\n}\n\nhtml,\nbody {\n  margin: 0;\n  padding: 0;\n  font-family: inherit;\n}\n\n.footer-section__container {\n  color: #777;\n  padding: 12px;\n}\n\n/* // FOOTER CONTAINER - only serves to be read as a container */\n.footer-container {\n  container-type: inline-size;\n  container-name: footerContainer;\n}\n\n\n.footer-grid {\n  background-color: #14202d;\n  display: grid;\n  padding: 0 50px;\n  grid-template-rows: repeat(9, auto);\n  grid-template-areas: \"one\"\n                       \"two\"\n                       \"three\"\n                       \"four\"\n                       \"five\"\n                       \"six\"\n                       \"seven\";\n}\n\n \n\n.footer-section__container--1 {\n  grid-area: one;\n  border-bottom: 1px solid #444;\n}\n.footer-section__container--2 {\n  position: relative;\n  grid-area: two;\n  border-bottom: 1px solid #444;\n}\n.footer-section__container--3 {\n  grid-area: three;\n  border-bottom: 1px solid #444;\n}\n.footer-section__container--4 {\n  position: relative;\n  grid-area: four;\n  border-bottom: 1px solid #444;\n}\n.footer-section__container--5 {\n  grid-area: five;\n  border-bottom: 1px solid #444;\n}\n.footer-section__container--6 {\n  padding-top: 22px;\n  grid-area: six;\n}\n.footer-section__container--7 {\n  grid-area: seven;\n}\n\n/* // remove paddings */\n.footer-section__container--7 div{\n  padding: 0;\n}\n\n\n\n/* // STYLES FOR TABLET / DESKTOP */\n@container (min-width: 750px) {\n  .footer-grid {\n    background: $-background-primary;\n    display: grid;\n    grid-template-rows: repeat(5, auto);\n    grid-template-columns: 1fr 1fr;\n    grid-template-areas: \"one one\"\n                         \"two three\"\n                         \"four five\"\n                         \"six six\"\n                         \"seven seven\";\n  }\n  \n  \n  .footer-section__container--1 {\n    grid-area: one;\n  }\n  .footer-section__container--2 {\n    grid-area: two;\n  }\n  .footer-section__container--3 {\n    grid-area: three;\n  }\n  .footer-section__container--4 {\n    grid-area: four;\n  }\n  .footer-section__container--5 {\n    grid-area: five;\n  }\n  .footer-section__container--6 {\n    grid-area: six;\n    padding: 0;\n  }\n  .footer-section__container--7 {\n    grid-area: seven;\n    padding: 0;\n  }\n\n  /* VERTICAL BARS */\n  .footer-section__container--2:after,\n  .footer-section__container--4:after {\n    position: absolute;\n    content: \"\";\n    top: 10%;\n    right: 0;\n    width: 1px;\n    height: 80%;\n    background-color: #444;\n  }\n\n  /* // remove paddings */\n  .footer-section__container--6 .image-list__wrapper {\n    padding: 22px 0 0 0;\n  }\n\n  .footer-section__container--7 .custom-content-section__wrapper {\n    padding: 0;\n    padding-bottom: 22px;\n    font-size: 14px;\n  }\n\n  \n}";
+const GeneralFooterTemplateStyle2 = variantStyle1Css;
+
+const generalFooterTemplateCss = ":host {\n  display: block;\n}\n\n* {\n  font-family: sans-serif;\n}\n\nhtml,\nbody {\n  margin: 0;\n  padding: 0;\n  font-family: inherit;\n}\n\n.footer-section__container {\n  color: var(--emfe-w-footer-typography, var(--emfe-w-color-white, #FFFFFF));\n  padding: 12px;\n}\n\n.footer-container {\n  container-type: inline-size;\n  container-name: footerContainer;\n}\n\n.footer-grid {\n  background-color: var(--emfe-w-footer-color-bg, var(--emfe-w-color-dark-blue, #07072A));\n  display: grid;\n  grid-template-rows: repeat(9, auto);\n  grid-template-areas: \"one\" \"two\" \"three\" \"four\" \"five\" \"six\" \"seven\";\n}\n\n.footer-section__container--1 {\n  grid-area: one;\n}\n.footer-section__container--2 {\n  grid-area: two;\n}\n.footer-section__container--3 {\n  grid-area: three;\n}\n.footer-section__container--4 {\n  grid-area: four;\n}\n.footer-section__container--5 {\n  grid-area: five;\n}\n.footer-section__container--6 {\n  grid-area: six;\n}\n.footer-section__container--7 {\n  grid-area: seven;\n}\n\n@container (min-width: 750px) {\n  .footer-grid {\n    background: var(--emfe-w-footer-color-bg, var(--emfe-w-color-dark-blue, #07072A));\n    display: grid;\n    grid-template-rows: repeat(7, auto);\n    grid-template-columns: 2fr 1fr;\n    grid-template-areas: \"one two\" \"three four\" \"five five\" \"six six\" \"seven seven\" \"eight eight\" \"nine nine\";\n  }\n  .footer-section__container--1 {\n    grid-area: one;\n  }\n  .footer-section__container--2 {\n    grid-area: two;\n  }\n  .footer-section__container--3 {\n    grid-area: three;\n  }\n  .footer-section__container--4 {\n    grid-area: four;\n  }\n  .footer-section__container--5 {\n    grid-area: five;\n  }\n  .footer-section__container--6 {\n    grid-area: six;\n  }\n  .footer-section__container--7 {\n    grid-area: seven;\n  }\n}";
+const GeneralFooterTemplateStyle3 = generalFooterTemplateCss;
+
+const GeneralFooterTemplate = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.platform = getDevicePlatform();
+        /**
+         *  Host element
+         */
+        this.MANDATORY_FIELDS = ['endpoint', 'language', 'sections'];
+        this.setClientStyling = () => {
+            let sheet = document.createElement('style');
+            sheet.innerHTML = this.clientStyling;
+            this.stylingContainer.prepend(sheet);
+        };
+        this.setClientStylingURL = () => {
+            let url = new URL(this.clientStylingUrl);
+            let cssFile = document.createElement('style');
+            fetch(url.href)
+                .then((res) => res.text())
+                .then((data) => {
+                cssFile.innerHTML = data;
+                setTimeout(() => { this.stylingContainer.prepend(cssFile); }, 1);
+            })
+                .catch((err) => {
+                console.log('error ', err);
+            });
+        };
+        this.language = undefined;
+        this.sections = undefined;
+        this.endpoint = undefined;
+        this.env = 'stage';
+        this.userRoles = 'everyone';
+        this.userid = undefined;
+        this.session = undefined;
+        this.baseUrl = undefined;
+        this.navigateViaEvent = 'false';
+        this.postMessageEvent = 'NavigateTo';
+        this.clientStyling = '';
+        this.clientStylingUrl = '';
+        this.hasErrors = false;
+        this.stylingAppends = false;
+    }
+    validateMandatoryFields() {
+        this.MANDATORY_FIELDS.forEach((field) => {
+            if (!this[field]) {
+                console.error(`Mandatory parameter ${field} not received`);
+                this.hasErrors = true;
+            }
+        });
+    }
+    componentWillLoad() {
+        this.sectionsList = this.sections.split(',').map(section => section.trim());
+        const url = new URL(`${this.endpoint}/${this.language}/footer-raw-data`);
+        url.searchParams.append('env', this.env);
+        url.searchParams.append('device', this.platform);
+        url.searchParams.append('userroles', this.userRoles);
+        this.validateMandatoryFields();
+        return fetch(url.href)
+            .then((res) => res.json())
+            .then((data) => {
+            this.footerContent = normalizeRepeaterContent(data);
+        });
+    }
+    componentDidRender() {
+        // start custom styling area
+        if (!this.stylingAppends && this.stylingContainer) {
+            if (this.clientStyling)
+                this.setClientStyling();
+            if (this.clientStylingUrl)
+                this.setClientStylingURL();
+            this.stylingAppends = true;
+        }
+        // end custom styling area
+    }
+    render() {
+        const footerSections = this.sectionsList.map((section, i) => {
+            const FooterElement = 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, 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 });
+        });
+        if (this.hasErrors) {
+            return index.h("div", null, "There was an error while bootstraping the widget");
+        }
+        else {
+            return (index.h("footer", { class: "FooterContainer", ref: el => this.stylingContainer = el }, index.h("div", { class: "FooterGrid customStyle" }, footerSections)));
+        }
+    }
+};
+GeneralFooterTemplate.style = GeneralFooterTemplateStyle0 + (GeneralFooterTemplateStyle1 + (GeneralFooterTemplateStyle2 + GeneralFooterTemplateStyle3));
+
+exports.general_footer_template = GeneralFooterTemplate;

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

@@ -0,0 +1,25 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-4c3922ac.js');
+const appGlobals = require('./app-globals-3a1e7e63.js');
+
+/*
+ Stencil Client Patch Browser v4.20.0 | MIT Licensed | https://stenciljs.com
+ */
+var patchBrowser = () => {
+  const importMeta = (typeof document === 'undefined' ? new (require('u' + 'rl').URL)('file:' + __filename).href : (document.currentScript && document.currentScript.src || new URL('general-footer-template.cjs.js', document.baseURI).href));
+  const opts = {};
+  if (importMeta !== "") {
+    opts.resourcesUrl = new URL(".", importMeta).href;
+  }
+  return index.promiseResolve(opts);
+};
+
+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"]}]]],["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"],"hasErrors":[32],"stylingAppends":[32]}]]],["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"]}]]],["image-list.cjs",[[2,"image-list",{"repeaterContent":[8,"repeater-content"],"navigateViaEvent":[4,"navigate-via-event"],"postMessageEvent":[513,"post-message-event"]}]]]], options);
+});
+
+exports.setNonce = index.setNonce;

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

@@ -0,0 +1,29 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-4c3922ac.js');
+
+const imageListCss = ".sc-image-list-h {\n  display: block;\n  margin: 0;\n  padding: 0;\n}\n\n.ImageListContainer.sc-image-list {\n  height: 100%;\n}\n.ImageListWrapper.sc-image-list {\n  box-sizing: border-box;\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  max-width: 90%;\n  margin: auto;\n  padding: var(--emw--spacing-large, 20px) 0;\n}\n.ImageListSectionTitle.sc-image-list {\n  width: 100%;\n  display: flex;\n  justify-content: left;\n  align-content: center;\n  padding: var(--emw--spacing-large, 20px) var(--emw--spacing-medium, 14px) var(--emw--spacing-x-large, 30px);\n  color: var(--emw--footer-typography, var(--emw-color-thpography, #fff));\n  text-transform: uppercase;\n  font-size: 24px;\n  font-weight: 100;\n}\n.ImageListLineup.sc-image-list {\n  box-sizing: border-box;\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--emw--spacing-x-large, 30px);\n  justify-content: left;\n  align-items: flex-start;\n  padding-left: var(--emw--spacing-large, 20px);\n}\n.ImageListIcon.sc-image-list img.sc-image-list {\n  max-height: var(--emw--size-medium-2x-minus, 40px);\n}\n\na.sc-image-list {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: flex-end;\n  text-decoration: none;\n}\n\na.sc-image-list p.sc-image-list {\n  text-decoration: none;\n  color: var(--emw--color-gray-100, #666);\n  margin: 0;\n}\n\n@container (max-width: 750px) {\n  .ImageListSectionTitle.sc-image-list {\n    justify-content: center;\n    font-size: var(--emw--font-size-medium, 16px);\n    color: var(--emw--footer-typography, var(--emw-color-thpography, #fff));\n    padding: var(--emw--spacing-large, 20px) 0 var(--emw--spacing-x-large, 30px);\n    justify-content: center;\n  }\n  .ImageListLineup.sc-image-list {\n    justify-content: center;\n    padding: 0;\n  }\n}";
+const ImageListStyle0 = imageListCss;
+
+const ImageList = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.navigateLink = (url, target, externalLink) => {
+            window.postMessage({ type: this.postMessageEvent, url, target, externalLink }, window.location.href);
+        };
+        this.repeaterContent = undefined;
+        this.navigateViaEvent = false;
+        this.postMessageEvent = '';
+    }
+    render() {
+        var _a, _b, _c;
+        return index.h("div", { key: '16df5dda83672031449915c4a87aa904032ba5a1', class: "ImageListContainer" }, index.h("div", { key: '5bd3f924a852ebf20cdeef3349bc68bf3f11d18d', class: "ImageListWrapper" }, index.h("div", { key: '1aef8f464a64f1526cf608207fae6938aba83362', class: "ImageListSectionTitle" }, (_a = this.repeaterContent) === null || _a === void 0 ? void 0 : _a.categoryTitle), index.h("div", { key: '0388ae28994cfa29e19e6524e720b88e4ff29b54', class: "ImageListLineup" }, (_c = (_b = this.repeaterContent) === null || _b === void 0 ? void 0 : _b.content) === null || _c === void 0 ? void 0 : _c.map(repeater => {
+            return (index.h("div", { class: 'ImageListIcon' }, this.navigateViaEvent === true ? (index.h("div", { class: 'ImageListIcon', style: { cursor: 'pointer' }, onClick: () => this.navigateLink(repeater === null || repeater === void 0 ? void 0 : repeater.url, repeater === null || repeater === void 0 ? void 0 : repeater.target, repeater === null || repeater === void 0 ? void 0 : repeater.isExternalLink) }, index.h("img", { src: repeater === null || repeater === void 0 ? void 0 : repeater.image, alt: "" }), index.h("p", null, repeater === null || repeater === void 0 ? void 0 : repeater.title))) : (index.h("a", { href: (repeater === null || repeater === void 0 ? void 0 : repeater.url) || 'javascript:void(0)', target: (repeater === null || repeater === void 0 ? void 0 : repeater.target) || '_parent' }, index.h("div", { class: "ImageListPositioner" }, index.h("img", { src: repeater === null || repeater === void 0 ? void 0 : repeater.image, alt: "" })), index.h("p", null, repeater === null || repeater === void 0 ? void 0 : repeater.title)))));
+        }))));
+    }
+};
+ImageList.style = ImageListStyle0;
+
+exports.image_list = ImageList;