@everymatrix/general-footer-template 1.85.23 → 1.86.1

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

@@ -64,7 +64,7 @@ function setStreamStyling(stylingContainer, domain, subscription) {
   }
 }
 
-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: 15px 20px 0;\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  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 two  two\" \"one three three three\" \"one  four four  four\" \"one five five five\" \"one six six six\" \"seven seven seven seven\" \"eight eight eight eight\" \"nine nine nine nine\";\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 demoFooterCss = "/*\n============================================================================\nBASE STYLES - apply to all footer variants\n============================================================================\n*/\n: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.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  grid-template-rows: repeat(9, auto);\n  grid-template-areas: \"one\" \"two\" \"three\" \"four\" \"five\" \"six\" \"seven\";\n}\n\n.FooterSectionContainer {\n  color: var(--emw--footer-typography, var(--emw--color-typography, #fff));\n  padding: 15px 20px 0;\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.FooterSectionContainer7 div {\n  padding: 0;\n}\n\n/*\n============================================================================\nSTANDARD VARIANT (Default) - applies when variant=\"standard\" or no variant specified\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@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 two  two\" \"one three three three\" \"one  four four  four\" \"one five five five\" \"one six six six\" \"seven seven seven seven\" \"eight eight eight eight\" \"nine nine nine nine\";\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  .FooterSectionContainer5 .CustomContentSectionWrapper {\n    padding: 0;\n  }\n  .FooterSectionContainer5 .CustomContentSectionWrapper div {\n    display: flex;\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  .FooterSectionContainer7 .CustomContentSectionWrapper {\n    padding: 0;\n    padding-bottom: var(--emw--spacing-large, 22px);\n    font-size: var(--emw--font-size-small, 14px);\n  }\n}\n/*\n============================================================================\nCOMPACT VARIANT - applies when variant=\"compact\"\n============================================================================\n*/\n.FooterContainer--compact {\n  /*\n  ========================================================================\n  CONTAINER QUERIES\n  ========================================================================\n  */\n}\n.FooterContainer--compact ul {\n  font-size: var(--emw--font-size-normal, 16px);\n}\n.FooterContainer--compact img.Visible {\n  border-radius: 0;\n}\n.FooterContainer--compact .ImageListWrapper.sc-image-list {\n  padding: var(--emw--spacing-2x-small, 5px) 0;\n}\n.FooterContainer--compact .ImageListIcon.sc-image-list img.sc-image-list {\n  width: 100%;\n}\n.FooterContainer--compact div.ImageListSectionTitle.sc-image-list {\n  padding-left: 0;\n}\n.FooterContainer--compact div.ImageListLineup.sc-image-list {\n  padding-left: 0;\n}\n.FooterContainer--compact .FooterSectionContainer2 .ImageListSectionTitle.sc-image-list,\n.FooterContainer--compact .FooterSectionContainer3 .ImageListSectionTitle.sc-image-list,\n.FooterContainer--compact .FooterSectionContainer4 .ImageListSectionTitle.sc-image-list,\n.FooterContainer--compact .FooterSectionContainer6 div.CustomContentSectionWrapper div p,\n.FooterContainer--compact .FooterSectionContainer9 .ImageListSectionTitle.sc-image-list,\n.FooterContainer--compact div.ImageListSectionTitle.sc-image-list,\n.FooterContainer--compact .FooterSectionContainer6.FooterSectionContainer6 .CustomContentSectionWrapper div p {\n  color: var(--emw--color-primary);\n  font-size: var(--emw--font-size-medium, 18px);\n  font-weight: var(--emw--font-weight-mid, 500);\n  letter-spacing: var(--emw--letter-spacing-medium);\n}\n.FooterContainer--compact .FooterSectionContainer6 .CustomContentSectionWrapper div p {\n  text-align: left;\n  padding-left: 20px;\n  font-size: var(--emw--font-size-medium, 16px);\n}\n.FooterContainer--compact .FooterSectionContainer6 div.CustomContentSectionContent {\n  padding: 0;\n}\n.FooterContainer--compact .FooterSectionContainer6 div.CustomContentSectionContent p {\n  text-transform: uppercase;\n  padding: var(--emw--spacing-large, 20px) var(--emw--spacing-medium, 14px) var(--emw--spacing-x-large, 30px) 0;\n  margin: 0;\n}\n.FooterContainer--compact .FooterSectionContainer6 div.ImageListSectionTitle.sc-image-list {\n  display: none;\n}\n.FooterContainer--compact .FooterSectionContainer7.FooterSectionContainer7 .CustomContentSectionWrapper div p {\n  text-align: center;\n  padding: 20px 0;\n  margin: 0 20px;\n  border-top: 1px solid var(--emw--color-primary);\n  border-bottom: 1px solid var(--emw--color-primary);\n  font-size: var(--emw--font-size-small, 12px);\n}\n.FooterContainer--compact .FooterSectionContainer5 div.ImageListLineup.sc-image-list {\n  justify-content: center;\n}\n.FooterContainer--compact div.LinkSectionListWrapper {\n  display: grid;\n  justify-content: center;\n}\n.FooterContainer--compact .LinkSectionListLink .LinkSectionListLinkText .ContainerImage {\n  max-width: 15px;\n  max-height: 15px;\n}\n.FooterContainer--compact .LinkSectionListLink .LinkSectionListLinkText .ContainerImage img {\n  width: 100%;\n  height: auto;\n  display: block;\n  position: relative;\n  border: none;\n  border-radius: 0;\n}\n.FooterContainer--compact .LinkSectionListLink .LinkSectionListLinkText .ContainerImage img:before {\n  content: \" \";\n  background: var(--emw--footer-color-bg, #00001c);\n  display: block;\n  position: absolute;\n  z-index: 2;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n}\n.FooterContainer--compact .LinkSectionListWrapper ul {\n  display: inline-block;\n  break-inside: avoid;\n  margin: 0 0 24px;\n  padding: 0;\n  width: 100%;\n}\n.FooterContainer--compact .LinkSectionListWrapper ul p {\n  color: var(--emw--color-primary);\n  letter-spacing: var(--emw--letter-spacing-medium);\n}\n.FooterContainer--compact ul li span.LinkSectionListLinkText span {\n  font-size: var(--emw--font-size-small);\n  letter-spacing: var(--emw--letter-spacing-small);\n}\n.FooterContainer--compact .LinkSectionListContainer ul {\n  padding-left: 0;\n}\n.FooterContainer--compact .license-description {\n  text-align: left;\n}\n.FooterContainer--compact .social .ImageListIcon.sc-image-list img.sc-image-list {\n  width: auto;\n}\n@container (max-width: 480px) {\n  .FooterContainer--compact div.LinkSectionListWrapper {\n    justify-content: center;\n    column-count: 1;\n  }\n  .FooterContainer--compact .LinkSectionListWrapper ul p {\n    text-align: center;\n  }\n  .FooterContainer--compact .LinkSectionListContainer ul {\n    padding-left: 0;\n    align-items: center;\n    display: flex;\n    margin: 0;\n  }\n  .FooterContainer--compact image-list.FooterSectionContainer2 .ImageListIcon p {\n    display: none;\n  }\n  .FooterContainer--compact .FooterSectionContainer8 .CustomContentSectionContent p {\n    text-align: center;\n    font-size: var(--emw--font-size-small, 12px);\n  }\n}\n@container (max-width: 750px) {\n  .FooterContainer--compact .FooterSectionContainer6 div.CustomContentSectionContent {\n    padding: 0;\n  }\n  .FooterContainer--compact .FooterSectionContainer6 .CustomContentSectionWrapper div p {\n    text-align: center;\n  }\n  .FooterContainer--compact .LinkSectionListWrapper ul p {\n    text-align: center;\n  }\n  .FooterContainer--compact .LinkSectionListContainer ul {\n    padding-left: 0;\n    align-items: center;\n  }\n  .FooterContainer--compact image-list.FooterSectionContainer2 .ImageListIcon p {\n    display: none;\n  }\n  .FooterContainer--compact .FooterSectionContainer8 .CustomContentSectionContent p {\n    text-align: center;\n  }\n}\n@container (min-width: 650px) {\n  .FooterContainer--compact .LinkSectionListWrapper {\n    grid-gap: 2rem;\n    grid-template-columns: repeat(6, 1fr);\n    grid-template-rows: 1fr;\n  }\n}\n@container (min-width: 750px) {\n  .FooterContainer--compact .FooterGrid {\n    border-top: 5px solid var(--emw--footer-color-primary);\n  }\n  .FooterContainer--compact .FooterGrid.customStyle {\n    display: grid;\n    border-top: 5px solid var(--emw--footer-color-primary, var(--emw--color-primary, #fc3c2a));\n    grid-template-rows: auto auto auto auto auto;\n    grid-template-columns: repeat(5, 1fr);\n    grid-template-areas: \"one one one one one\" \"two three four six nine\" \"seven seven seven seven seven\" \"five five five five five\" \"eight eight eight eight eight\"; /* row 5 */\n  }\n  .FooterContainer--compact .FooterSectionContainer .ImageListLineup.sc-image-list {\n    justify-content: start;\n  }\n  .FooterContainer--compact .FooterSectionContainer8 {\n    grid-area: eight;\n  }\n  .FooterContainer--compact .FooterSectionContainer .CustomContentSectionWrapper.sc-custom-content-section {\n    text-align: center;\n  }\n}\n@media (max-width: 768px) {\n  .FooterContainer--compact .FooterSectionContainer8 {\n    grid-area: eight;\n  }\n  .FooterContainer--compact .FooterSectionContainer9 {\n    grid-area: nine;\n  }\n  .FooterContainer--compact div.FooterGrid {\n    display: grid;\n    grid-template-areas: \"one\" \"two\" \"three\" \"four\" \"five\" \"six\" \"nine\" \"seven\" \"eight\";\n  }\n  .FooterContainer--compact .FooterSectionContainer9 .ImageListIcon p.sc-image-list {\n    display: none;\n  }\n}\n@media (min-width: 1301px) {\n  .FooterContainer--compact {\n    padding-bottom: 0;\n  }\n  .FooterContainer--compact .FooterSectionContainer5 .ImageListSectionTitle.sc-image-list {\n    display: none;\n  }\n}";
 const GeneralFooterTemplateStyle0 = demoFooterCss;
 
 const GeneralFooterTemplate = class {
@@ -93,6 +93,7 @@ const GeneralFooterTemplate = class {
         this.timeZone = '';
         this.mbSource = undefined;
         this.accordionLinks = false;
+        this.variant = 'standard';
         this.hasErrors = false;
         this.footerContent = undefined;
     }
@@ -166,7 +167,10 @@ const GeneralFooterTemplate = class {
                 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: 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)));
+            const footerContainerClasses = (this.variant && this.variant !== 'standard')
+                ? `FooterContainer FooterContainer--${this.variant}`
+                : 'FooterContainer';
+            return (index.h("footer", { class: footerContainerClasses, ref: el => this.stylingContainer = el }, index.h("div", { class: "FooterGrid customStyle" }, footerSections)));
         }
     }
     get hostEl() { return index.getElement(this); }

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"],"accordionLinks":[516,"accordion-links"],"openCategory":[32]},[[9,"resize","onResize"]]]]],["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);
+  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]},[[9,"resize","onResize"]]]]],["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"],"variant":[513],"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/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"],"accordionLinks":[516,"accordion-links"],"openCategory":[32]},[[9,"resize","onResize"]]]]],["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);
+  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]},[[9,"resize","onResize"]]]]],["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"],"variant":[513],"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/collection/components/general-footer-template/demo-footer.css

@@ -1,8 +1,12 @@
+/*
+============================================================================
+BASE STYLES - apply to all footer variants
+============================================================================
+*/
 :host {
   display: block;
 }
 
-/* $-background-primary: #14202d; */
 * {
   font-family: sans-serif;
 }
@@ -14,12 +18,6 @@ body {
   font-family: inherit;
 }
 
-.FooterSectionContainer {
-  color: var(--emw--footer-typography, var(--emw--color-thpography, #fff));
-  padding: 15px 20px 0;
-}
-
-/* // FOOTER CONTAINER - only serves to be read as a container */
 .FooterContainer {
   container-type: inline-size;
   container-name: footerContainer;
@@ -32,6 +30,11 @@ body {
   grid-template-areas: "one" "two" "three" "four" "five" "six" "seven";
 }
 
+.FooterSectionContainer {
+  color: var(--emw--footer-typography, var(--emw--color-typography, #fff));
+  padding: 15px 20px 0;
+}
+
 .FooterSectionContainer1 {
   position: relative;
   grid-area: one;
@@ -65,11 +68,15 @@ body {
   grid-area: seven;
 }
 
-/* // remove paddings */
 .FooterSectionContainer7 div {
   padding: 0;
 }
 
+/*
+============================================================================
+STANDARD VARIANT (Default) - applies when variant="standard" or no variant specified
+============================================================================
+*/
 @container (max-width: 750px) {
   .FooterSectionContainer3:after,
   .FooterSectionContainer2:after {
@@ -88,7 +95,6 @@ body {
     justify-self: center;
   }
 }
-/* // STYLES FOR TABLET / DESKTOP */
 @container (min-width: 750px) {
   .FooterGrid {
     background: var(--emw--footer-color-bg, var(--emw--color-background, #0E1511));
@@ -128,13 +134,11 @@ body {
     grid-area: seven;
     padding: 0;
   }
-  /* // remove paddings */
   .FooterSectionContainer5 .CustomContentSectionWrapper {
     padding: 0;
   }
   .FooterSectionContainer5 .CustomContentSectionWrapper div {
     display: flex;
-    flex-direction: left;
     align-items: center;
     padding-left: var(--emw--spacing-large, 20px);
   }
@@ -148,12 +152,223 @@ body {
   .FooterSectionContainer6 .ImageListWrapper {
     padding: 0;
   }
-  .FooterSectionContainer6 .ImageListWrapper {
-    padding: 0;
-  }
   .FooterSectionContainer7 .CustomContentSectionWrapper {
     padding: 0;
     padding-bottom: var(--emw--spacing-large, 22px);
     font-size: var(--emw--font-size-small, 14px);
   }
+}
+/*
+============================================================================
+COMPACT VARIANT - applies when variant="compact"
+============================================================================
+*/
+.FooterContainer--compact {
+  /*
+  ========================================================================
+  CONTAINER QUERIES
+  ========================================================================
+  */
+}
+.FooterContainer--compact ul {
+  font-size: var(--emw--font-size-normal, 16px);
+}
+.FooterContainer--compact img.Visible {
+  border-radius: 0;
+}
+.FooterContainer--compact .ImageListWrapper.sc-image-list {
+  padding: var(--emw--spacing-2x-small, 5px) 0;
+}
+.FooterContainer--compact .ImageListIcon.sc-image-list img.sc-image-list {
+  width: 100%;
+}
+.FooterContainer--compact div.ImageListSectionTitle.sc-image-list {
+  padding-left: 0;
+}
+.FooterContainer--compact div.ImageListLineup.sc-image-list {
+  padding-left: 0;
+}
+.FooterContainer--compact .FooterSectionContainer2 .ImageListSectionTitle.sc-image-list,
+.FooterContainer--compact .FooterSectionContainer3 .ImageListSectionTitle.sc-image-list,
+.FooterContainer--compact .FooterSectionContainer4 .ImageListSectionTitle.sc-image-list,
+.FooterContainer--compact .FooterSectionContainer6 div.CustomContentSectionWrapper div p,
+.FooterContainer--compact .FooterSectionContainer9 .ImageListSectionTitle.sc-image-list,
+.FooterContainer--compact div.ImageListSectionTitle.sc-image-list,
+.FooterContainer--compact .FooterSectionContainer6.FooterSectionContainer6 .CustomContentSectionWrapper div p {
+  color: var(--emw--color-primary);
+  font-size: var(--emw--font-size-medium, 18px);
+  font-weight: var(--emw--font-weight-mid, 500);
+  letter-spacing: var(--emw--letter-spacing-medium);
+}
+.FooterContainer--compact .FooterSectionContainer6 .CustomContentSectionWrapper div p {
+  text-align: left;
+  padding-left: 20px;
+  font-size: var(--emw--font-size-medium, 16px);
+}
+.FooterContainer--compact .FooterSectionContainer6 div.CustomContentSectionContent {
+  padding: 0;
+}
+.FooterContainer--compact .FooterSectionContainer6 div.CustomContentSectionContent p {
+  text-transform: uppercase;
+  padding: var(--emw--spacing-large, 20px) var(--emw--spacing-medium, 14px) var(--emw--spacing-x-large, 30px) 0;
+  margin: 0;
+}
+.FooterContainer--compact .FooterSectionContainer6 div.ImageListSectionTitle.sc-image-list {
+  display: none;
+}
+.FooterContainer--compact .FooterSectionContainer7.FooterSectionContainer7 .CustomContentSectionWrapper div p {
+  text-align: center;
+  padding: 20px 0;
+  margin: 0 20px;
+  border-top: 1px solid var(--emw--color-primary);
+  border-bottom: 1px solid var(--emw--color-primary);
+  font-size: var(--emw--font-size-small, 12px);
+}
+.FooterContainer--compact .FooterSectionContainer5 div.ImageListLineup.sc-image-list {
+  justify-content: center;
+}
+.FooterContainer--compact div.LinkSectionListWrapper {
+  display: grid;
+  justify-content: center;
+}
+.FooterContainer--compact .LinkSectionListLink .LinkSectionListLinkText .ContainerImage {
+  max-width: 15px;
+  max-height: 15px;
+}
+.FooterContainer--compact .LinkSectionListLink .LinkSectionListLinkText .ContainerImage img {
+  width: 100%;
+  height: auto;
+  display: block;
+  position: relative;
+  border: none;
+  border-radius: 0;
+}
+.FooterContainer--compact .LinkSectionListLink .LinkSectionListLinkText .ContainerImage img:before {
+  content: " ";
+  background: var(--emw--footer-color-bg, #00001c);
+  display: block;
+  position: absolute;
+  z-index: 2;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+.FooterContainer--compact .LinkSectionListWrapper ul {
+  display: inline-block;
+  break-inside: avoid;
+  margin: 0 0 24px;
+  padding: 0;
+  width: 100%;
+}
+.FooterContainer--compact .LinkSectionListWrapper ul p {
+  color: var(--emw--color-primary);
+  letter-spacing: var(--emw--letter-spacing-medium);
+}
+.FooterContainer--compact ul li span.LinkSectionListLinkText span {
+  font-size: var(--emw--font-size-small);
+  letter-spacing: var(--emw--letter-spacing-small);
+}
+.FooterContainer--compact .LinkSectionListContainer ul {
+  padding-left: 0;
+}
+.FooterContainer--compact .license-description {
+  text-align: left;
+}
+.FooterContainer--compact .social .ImageListIcon.sc-image-list img.sc-image-list {
+  width: auto;
+}
+@container (max-width: 480px) {
+  .FooterContainer--compact div.LinkSectionListWrapper {
+    justify-content: center;
+    column-count: 1;
+  }
+  .FooterContainer--compact .LinkSectionListWrapper ul p {
+    text-align: center;
+  }
+  .FooterContainer--compact .LinkSectionListContainer ul {
+    padding-left: 0;
+    align-items: center;
+    display: flex;
+    margin: 0;
+  }
+  .FooterContainer--compact image-list.FooterSectionContainer2 .ImageListIcon p {
+    display: none;
+  }
+  .FooterContainer--compact .FooterSectionContainer8 .CustomContentSectionContent p {
+    text-align: center;
+    font-size: var(--emw--font-size-small, 12px);
+  }
+}
+@container (max-width: 750px) {
+  .FooterContainer--compact .FooterSectionContainer6 div.CustomContentSectionContent {
+    padding: 0;
+  }
+  .FooterContainer--compact .FooterSectionContainer6 .CustomContentSectionWrapper div p {
+    text-align: center;
+  }
+  .FooterContainer--compact .LinkSectionListWrapper ul p {
+    text-align: center;
+  }
+  .FooterContainer--compact .LinkSectionListContainer ul {
+    padding-left: 0;
+    align-items: center;
+  }
+  .FooterContainer--compact image-list.FooterSectionContainer2 .ImageListIcon p {
+    display: none;
+  }
+  .FooterContainer--compact .FooterSectionContainer8 .CustomContentSectionContent p {
+    text-align: center;
+  }
+}
+@container (min-width: 650px) {
+  .FooterContainer--compact .LinkSectionListWrapper {
+    grid-gap: 2rem;
+    grid-template-columns: repeat(6, 1fr);
+    grid-template-rows: 1fr;
+  }
+}
+@container (min-width: 750px) {
+  .FooterContainer--compact .FooterGrid {
+    border-top: 5px solid var(--emw--footer-color-primary);
+  }
+  .FooterContainer--compact .FooterGrid.customStyle {
+    display: grid;
+    border-top: 5px solid var(--emw--footer-color-primary, var(--emw--color-primary, #fc3c2a));
+    grid-template-rows: auto auto auto auto auto;
+    grid-template-columns: repeat(5, 1fr);
+    grid-template-areas: "one one one one one" "two three four six nine" "seven seven seven seven seven" "five five five five five" "eight eight eight eight eight"; /* row 5 */
+  }
+  .FooterContainer--compact .FooterSectionContainer .ImageListLineup.sc-image-list {
+    justify-content: start;
+  }
+  .FooterContainer--compact .FooterSectionContainer8 {
+    grid-area: eight;
+  }
+  .FooterContainer--compact .FooterSectionContainer .CustomContentSectionWrapper.sc-custom-content-section {
+    text-align: center;
+  }
+}
+@media (max-width: 768px) {
+  .FooterContainer--compact .FooterSectionContainer8 {
+    grid-area: eight;
+  }
+  .FooterContainer--compact .FooterSectionContainer9 {
+    grid-area: nine;
+  }
+  .FooterContainer--compact div.FooterGrid {
+    display: grid;
+    grid-template-areas: "one" "two" "three" "four" "five" "six" "nine" "seven" "eight";
+  }
+  .FooterContainer--compact .FooterSectionContainer9 .ImageListIcon p.sc-image-list {
+    display: none;
+  }
+}
+@media (min-width: 1301px) {
+  .FooterContainer--compact {
+    padding-bottom: 0;
+  }
+  .FooterContainer--compact .FooterSectionContainer5 .ImageListSectionTitle.sc-image-list {
+    display: none;
+  }
 }

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

@@ -27,6 +27,7 @@ export class GeneralFooterTemplate {
         this.timeZone = '';
         this.mbSource = undefined;
         this.accordionLinks = false;
+        this.variant = 'standard';
         this.hasErrors = false;
         this.footerContent = undefined;
     }
@@ -100,7 +101,10 @@ export class GeneralFooterTemplate {
                 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, "accordion-links": this.accordionLinks });
             });
-            return (h("footer", { class: "FooterContainer", ref: el => this.stylingContainer = el }, h("div", { class: "FooterGrid customStyle" }, footerSections)));
+            const footerContainerClasses = (this.variant && this.variant !== 'standard')
+                ? `FooterContainer FooterContainer--${this.variant}`
+                : 'FooterContainer';
+            return (h("footer", { class: footerContainerClasses, ref: el => this.stylingContainer = el }, h("div", { class: "FooterGrid customStyle" }, footerSections)));
         }
     }
     static get is() { return "general-footer-template"; }
@@ -432,6 +436,30 @@ export class GeneralFooterTemplate {
                 "attribute": "accordion-links",
                 "reflect": true,
                 "defaultValue": "false"
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "FooterVariant",
+                    "resolved": "\"compact\" | \"standard\"",
+                    "references": {
+                        "FooterVariant": {
+                            "location": "local",
+                            "path": "/builds/emfe-widgets/widgets-monorepo/packages/stencil/general-footer-template/src/components/general-footer-template/general-footer-template.tsx",
+                            "id": "../../../../packages/stencil/general-footer-template/src/components/general-footer-template/general-footer-template.tsx::FooterVariant"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "footer design variant - 'standard' for the current design, 'compact' for the new compact design"
+                },
+                "attribute": "variant",
+                "reflect": true,
+                "defaultValue": "'standard'"
             }
         };
     }

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

@@ -60,7 +60,7 @@ function setStreamStyling(stylingContainer, domain, subscription) {
   }
 }
 
-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: 15px 20px 0;\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  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 two  two\" \"one three three three\" \"one  four four  four\" \"one five five five\" \"one six six six\" \"seven seven seven seven\" \"eight eight eight eight\" \"nine nine nine nine\";\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 demoFooterCss = "/*\n============================================================================\nBASE STYLES - apply to all footer variants\n============================================================================\n*/\n: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.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  grid-template-rows: repeat(9, auto);\n  grid-template-areas: \"one\" \"two\" \"three\" \"four\" \"five\" \"six\" \"seven\";\n}\n\n.FooterSectionContainer {\n  color: var(--emw--footer-typography, var(--emw--color-typography, #fff));\n  padding: 15px 20px 0;\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.FooterSectionContainer7 div {\n  padding: 0;\n}\n\n/*\n============================================================================\nSTANDARD VARIANT (Default) - applies when variant=\"standard\" or no variant specified\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@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 two  two\" \"one three three three\" \"one  four four  four\" \"one five five five\" \"one six six six\" \"seven seven seven seven\" \"eight eight eight eight\" \"nine nine nine nine\";\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  .FooterSectionContainer5 .CustomContentSectionWrapper {\n    padding: 0;\n  }\n  .FooterSectionContainer5 .CustomContentSectionWrapper div {\n    display: flex;\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  .FooterSectionContainer7 .CustomContentSectionWrapper {\n    padding: 0;\n    padding-bottom: var(--emw--spacing-large, 22px);\n    font-size: var(--emw--font-size-small, 14px);\n  }\n}\n/*\n============================================================================\nCOMPACT VARIANT - applies when variant=\"compact\"\n============================================================================\n*/\n.FooterContainer--compact {\n  /*\n  ========================================================================\n  CONTAINER QUERIES\n  ========================================================================\n  */\n}\n.FooterContainer--compact ul {\n  font-size: var(--emw--font-size-normal, 16px);\n}\n.FooterContainer--compact img.Visible {\n  border-radius: 0;\n}\n.FooterContainer--compact .ImageListWrapper.sc-image-list {\n  padding: var(--emw--spacing-2x-small, 5px) 0;\n}\n.FooterContainer--compact .ImageListIcon.sc-image-list img.sc-image-list {\n  width: 100%;\n}\n.FooterContainer--compact div.ImageListSectionTitle.sc-image-list {\n  padding-left: 0;\n}\n.FooterContainer--compact div.ImageListLineup.sc-image-list {\n  padding-left: 0;\n}\n.FooterContainer--compact .FooterSectionContainer2 .ImageListSectionTitle.sc-image-list,\n.FooterContainer--compact .FooterSectionContainer3 .ImageListSectionTitle.sc-image-list,\n.FooterContainer--compact .FooterSectionContainer4 .ImageListSectionTitle.sc-image-list,\n.FooterContainer--compact .FooterSectionContainer6 div.CustomContentSectionWrapper div p,\n.FooterContainer--compact .FooterSectionContainer9 .ImageListSectionTitle.sc-image-list,\n.FooterContainer--compact div.ImageListSectionTitle.sc-image-list,\n.FooterContainer--compact .FooterSectionContainer6.FooterSectionContainer6 .CustomContentSectionWrapper div p {\n  color: var(--emw--color-primary);\n  font-size: var(--emw--font-size-medium, 18px);\n  font-weight: var(--emw--font-weight-mid, 500);\n  letter-spacing: var(--emw--letter-spacing-medium);\n}\n.FooterContainer--compact .FooterSectionContainer6 .CustomContentSectionWrapper div p {\n  text-align: left;\n  padding-left: 20px;\n  font-size: var(--emw--font-size-medium, 16px);\n}\n.FooterContainer--compact .FooterSectionContainer6 div.CustomContentSectionContent {\n  padding: 0;\n}\n.FooterContainer--compact .FooterSectionContainer6 div.CustomContentSectionContent p {\n  text-transform: uppercase;\n  padding: var(--emw--spacing-large, 20px) var(--emw--spacing-medium, 14px) var(--emw--spacing-x-large, 30px) 0;\n  margin: 0;\n}\n.FooterContainer--compact .FooterSectionContainer6 div.ImageListSectionTitle.sc-image-list {\n  display: none;\n}\n.FooterContainer--compact .FooterSectionContainer7.FooterSectionContainer7 .CustomContentSectionWrapper div p {\n  text-align: center;\n  padding: 20px 0;\n  margin: 0 20px;\n  border-top: 1px solid var(--emw--color-primary);\n  border-bottom: 1px solid var(--emw--color-primary);\n  font-size: var(--emw--font-size-small, 12px);\n}\n.FooterContainer--compact .FooterSectionContainer5 div.ImageListLineup.sc-image-list {\n  justify-content: center;\n}\n.FooterContainer--compact div.LinkSectionListWrapper {\n  display: grid;\n  justify-content: center;\n}\n.FooterContainer--compact .LinkSectionListLink .LinkSectionListLinkText .ContainerImage {\n  max-width: 15px;\n  max-height: 15px;\n}\n.FooterContainer--compact .LinkSectionListLink .LinkSectionListLinkText .ContainerImage img {\n  width: 100%;\n  height: auto;\n  display: block;\n  position: relative;\n  border: none;\n  border-radius: 0;\n}\n.FooterContainer--compact .LinkSectionListLink .LinkSectionListLinkText .ContainerImage img:before {\n  content: \" \";\n  background: var(--emw--footer-color-bg, #00001c);\n  display: block;\n  position: absolute;\n  z-index: 2;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n}\n.FooterContainer--compact .LinkSectionListWrapper ul {\n  display: inline-block;\n  break-inside: avoid;\n  margin: 0 0 24px;\n  padding: 0;\n  width: 100%;\n}\n.FooterContainer--compact .LinkSectionListWrapper ul p {\n  color: var(--emw--color-primary);\n  letter-spacing: var(--emw--letter-spacing-medium);\n}\n.FooterContainer--compact ul li span.LinkSectionListLinkText span {\n  font-size: var(--emw--font-size-small);\n  letter-spacing: var(--emw--letter-spacing-small);\n}\n.FooterContainer--compact .LinkSectionListContainer ul {\n  padding-left: 0;\n}\n.FooterContainer--compact .license-description {\n  text-align: left;\n}\n.FooterContainer--compact .social .ImageListIcon.sc-image-list img.sc-image-list {\n  width: auto;\n}\n@container (max-width: 480px) {\n  .FooterContainer--compact div.LinkSectionListWrapper {\n    justify-content: center;\n    column-count: 1;\n  }\n  .FooterContainer--compact .LinkSectionListWrapper ul p {\n    text-align: center;\n  }\n  .FooterContainer--compact .LinkSectionListContainer ul {\n    padding-left: 0;\n    align-items: center;\n    display: flex;\n    margin: 0;\n  }\n  .FooterContainer--compact image-list.FooterSectionContainer2 .ImageListIcon p {\n    display: none;\n  }\n  .FooterContainer--compact .FooterSectionContainer8 .CustomContentSectionContent p {\n    text-align: center;\n    font-size: var(--emw--font-size-small, 12px);\n  }\n}\n@container (max-width: 750px) {\n  .FooterContainer--compact .FooterSectionContainer6 div.CustomContentSectionContent {\n    padding: 0;\n  }\n  .FooterContainer--compact .FooterSectionContainer6 .CustomContentSectionWrapper div p {\n    text-align: center;\n  }\n  .FooterContainer--compact .LinkSectionListWrapper ul p {\n    text-align: center;\n  }\n  .FooterContainer--compact .LinkSectionListContainer ul {\n    padding-left: 0;\n    align-items: center;\n  }\n  .FooterContainer--compact image-list.FooterSectionContainer2 .ImageListIcon p {\n    display: none;\n  }\n  .FooterContainer--compact .FooterSectionContainer8 .CustomContentSectionContent p {\n    text-align: center;\n  }\n}\n@container (min-width: 650px) {\n  .FooterContainer--compact .LinkSectionListWrapper {\n    grid-gap: 2rem;\n    grid-template-columns: repeat(6, 1fr);\n    grid-template-rows: 1fr;\n  }\n}\n@container (min-width: 750px) {\n  .FooterContainer--compact .FooterGrid {\n    border-top: 5px solid var(--emw--footer-color-primary);\n  }\n  .FooterContainer--compact .FooterGrid.customStyle {\n    display: grid;\n    border-top: 5px solid var(--emw--footer-color-primary, var(--emw--color-primary, #fc3c2a));\n    grid-template-rows: auto auto auto auto auto;\n    grid-template-columns: repeat(5, 1fr);\n    grid-template-areas: \"one one one one one\" \"two three four six nine\" \"seven seven seven seven seven\" \"five five five five five\" \"eight eight eight eight eight\"; /* row 5 */\n  }\n  .FooterContainer--compact .FooterSectionContainer .ImageListLineup.sc-image-list {\n    justify-content: start;\n  }\n  .FooterContainer--compact .FooterSectionContainer8 {\n    grid-area: eight;\n  }\n  .FooterContainer--compact .FooterSectionContainer .CustomContentSectionWrapper.sc-custom-content-section {\n    text-align: center;\n  }\n}\n@media (max-width: 768px) {\n  .FooterContainer--compact .FooterSectionContainer8 {\n    grid-area: eight;\n  }\n  .FooterContainer--compact .FooterSectionContainer9 {\n    grid-area: nine;\n  }\n  .FooterContainer--compact div.FooterGrid {\n    display: grid;\n    grid-template-areas: \"one\" \"two\" \"three\" \"four\" \"five\" \"six\" \"nine\" \"seven\" \"eight\";\n  }\n  .FooterContainer--compact .FooterSectionContainer9 .ImageListIcon p.sc-image-list {\n    display: none;\n  }\n}\n@media (min-width: 1301px) {\n  .FooterContainer--compact {\n    padding-bottom: 0;\n  }\n  .FooterContainer--compact .FooterSectionContainer5 .ImageListSectionTitle.sc-image-list {\n    display: none;\n  }\n}";
 const GeneralFooterTemplateStyle0 = demoFooterCss;
 
 const GeneralFooterTemplate = class {
@@ -89,6 +89,7 @@ const GeneralFooterTemplate = class {
         this.timeZone = '';
         this.mbSource = undefined;
         this.accordionLinks = false;
+        this.variant = 'standard';
         this.hasErrors = false;
         this.footerContent = undefined;
     }
@@ -162,7 +163,10 @@ const GeneralFooterTemplate = class {
                 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, "accordion-links": this.accordionLinks });
             });
-            return (h("footer", { class: "FooterContainer", ref: el => this.stylingContainer = el }, h("div", { class: "FooterGrid customStyle" }, footerSections)));
+            const footerContainerClasses = (this.variant && this.variant !== 'standard')
+                ? `FooterContainer FooterContainer--${this.variant}`
+                : 'FooterContainer';
+            return (h("footer", { class: footerContainerClasses, ref: el => this.stylingContainer = el }, h("div", { class: "FooterGrid customStyle" }, footerSections)));
         }
     }
     get hostEl() { return getElement(this); }

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"],"accordionLinks":[516,"accordion-links"],"openCategory":[32]},[[9,"resize","onResize"]]]]],["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);
+  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]},[[9,"resize","onResize"]]]]],["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"],"variant":[513],"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/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"],"accordionLinks":[516,"accordion-links"],"openCategory":[32]},[[9,"resize","onResize"]]]]],["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);
+  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]},[[9,"resize","onResize"]]]]],["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"],"variant":[513],"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 };

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

@@ -1 +1 @@
-import{r as n,h as e,g as t}from"./index-2051e205.js";import{g as o,n as i,c as r}from"./utils-c4781120.js";function a(n,e){if(n){const t=document.createElement("style");t.innerHTML=e,n.appendChild(t)}}const s=class{constructor(e){n(this,e),this.platform=o(),this.MANDATORY_FIELDS=["endpoint","language","sections"],this.language=void 0,this.sections=void 0,this.endpoint=void 0,this.env="stage",this.userRoles="everyone",this.userid=void 0,this.session=void 0,this.baseUrl=void 0,this.navigateViaEvent="false",this.postMessageEvent="NavigateTo",this.clientStyling="",this.clientStylingUrl="",this.customCss=void 0,this.translationUrl="",this.clockFormat="HH:MM:ss",this.timeZone="",this.mbSource=void 0,this.accordionLinks=!1,this.hasErrors=!1,this.footerContent=void 0}validateMandatoryFields(){this.MANDATORY_FIELDS.forEach((n=>{this[n]||(console.error(`Mandatory parameter ${n} not received`),this.hasErrors=!0)}))}watchLanguage(n,e){n&&e&&n!=e&&this.setFooterData()}setFooterData(){this.sectionsList=this.sections.split(",").map((n=>n.trim()));const n=new URL(`${this.endpoint}/${this.language}/footer-raw-data`);return n.searchParams.append("env",this.env),n.searchParams.append("device",this.platform),n.searchParams.append("userRoles",this.userRoles),this.validateMandatoryFields(),fetch(n.href).then((n=>n.json())).then((n=>{0===Object.keys(n).length?this.hasErrors=!0:this.footerContent=i(n)}))}async componentWillLoad(){await this.setFooterData()}disconnectedCallback(){this.stylingSubscription&&this.stylingSubscription.unsubscribe()}componentDidLoad(){null!=window.emMessageBus?function(n,e){if(window.emMessageBus){const t=document.createElement("style");window.emMessageBus.subscribe(e,(e=>{t.innerHTML=e,n&&n.appendChild(t)}))}}(this.stylingContainer,`${this.mbSource}.Style`):(this.clientStyling&&a(this.stylingContainer,this.clientStyling),this.clientStylingUrl&&function(n,e){if(!n||!e)return;const t=new URL(e);fetch(t.href).then((n=>n.text())).then((e=>{const t=document.createElement("style");t.innerHTML=e,n&&n.appendChild(t)})).catch((n=>{console.error("There was an error while trying to load client styling from URL",n)}))}(this.stylingContainer,this.clientStylingUrl),this.customCss=this.footerContent.wysiwyg.customCSS.content,this.customCss&&a(this.hostEl.shadowRoot,this.customCss))}render(){if(this.hasErrors)return e("div",null,"There was an error while bootstraping the widget");{const n=this.sectionsList.map(((n,t)=>{var o,i,a;const s=(null===(o=this.footerContent.repeaters)||void 0===o?void 0:o[n])||(null===(i=this.footerContent.wysiwyg)||void 0===i?void 0:i[n]),d=null==s?void 0:s.content;if("object"==typeof d&&0===(null===(a=Object.keys(d))||void 0===a?void 0:a.length)||"string"==typeof d&&""===d.trim())return null;const c=r[n].component,h=this.footerContent.repeaters.hasOwnProperty(n),l=this.footerContent.wysiwyg.hasOwnProperty(n);return e(c,{class:`${n} FooterSectionContainer FooterSectionContainer${t+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:r[n],repeaterContent:h?this.footerContent.repeaters[n]:null,customContent:l?this.footerContent.wysiwyg[n].content:null,"translation-url":this.translationUrl,"clock-format":this.clockFormat,"time-zone":this.timeZone,"accordion-links":this.accordionLinks})}));return e("footer",{class:"FooterContainer",ref:n=>this.stylingContainer=n},e("div",{class:"FooterGrid customStyle"},n))}}get hostEl(){return t(this)}static get watchers(){return{language:["watchLanguage"]}}};s.style=':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: 15px 20px 0;\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  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 two  two" "one three three three" "one  four four  four" "one five five five" "one six six six" "seven seven seven seven" "eight eight eight eight" "nine nine nine nine";\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}';export{s as general_footer_template}
+import{r as n,h as t,g as e}from"./index-2051e205.js";import{g as o,n as i,c as r}from"./utils-c4781120.js";function a(n,t){if(n){const e=document.createElement("style");e.innerHTML=t,n.appendChild(e)}}const c=class{constructor(t){n(this,t),this.platform=o(),this.MANDATORY_FIELDS=["endpoint","language","sections"],this.language=void 0,this.sections=void 0,this.endpoint=void 0,this.env="stage",this.userRoles="everyone",this.userid=void 0,this.session=void 0,this.baseUrl=void 0,this.navigateViaEvent="false",this.postMessageEvent="NavigateTo",this.clientStyling="",this.clientStylingUrl="",this.customCss=void 0,this.translationUrl="",this.clockFormat="HH:MM:ss",this.timeZone="",this.mbSource=void 0,this.accordionLinks=!1,this.variant="standard",this.hasErrors=!1,this.footerContent=void 0}validateMandatoryFields(){this.MANDATORY_FIELDS.forEach((n=>{this[n]||(console.error(`Mandatory parameter ${n} not received`),this.hasErrors=!0)}))}watchLanguage(n,t){n&&t&&n!=t&&this.setFooterData()}setFooterData(){this.sectionsList=this.sections.split(",").map((n=>n.trim()));const n=new URL(`${this.endpoint}/${this.language}/footer-raw-data`);return n.searchParams.append("env",this.env),n.searchParams.append("device",this.platform),n.searchParams.append("userRoles",this.userRoles),this.validateMandatoryFields(),fetch(n.href).then((n=>n.json())).then((n=>{0===Object.keys(n).length?this.hasErrors=!0:this.footerContent=i(n)}))}async componentWillLoad(){await this.setFooterData()}disconnectedCallback(){this.stylingSubscription&&this.stylingSubscription.unsubscribe()}componentDidLoad(){null!=window.emMessageBus?function(n,t){if(window.emMessageBus){const e=document.createElement("style");window.emMessageBus.subscribe(t,(t=>{e.innerHTML=t,n&&n.appendChild(e)}))}}(this.stylingContainer,`${this.mbSource}.Style`):(this.clientStyling&&a(this.stylingContainer,this.clientStyling),this.clientStylingUrl&&function(n,t){if(!n||!t)return;const e=new URL(t);fetch(e.href).then((n=>n.text())).then((t=>{const e=document.createElement("style");e.innerHTML=t,n&&n.appendChild(e)})).catch((n=>{console.error("There was an error while trying to load client styling from URL",n)}))}(this.stylingContainer,this.clientStylingUrl),this.customCss=this.footerContent.wysiwyg.customCSS.content,this.customCss&&a(this.hostEl.shadowRoot,this.customCss))}render(){if(this.hasErrors)return t("div",null,"There was an error while bootstraping the widget");{const n=this.sectionsList.map(((n,e)=>{var o,i,a;const c=(null===(o=this.footerContent.repeaters)||void 0===o?void 0:o[n])||(null===(i=this.footerContent.wysiwyg)||void 0===i?void 0:i[n]),s=null==c?void 0:c.content;if("object"==typeof s&&0===(null===(a=Object.keys(s))||void 0===a?void 0:a.length)||"string"==typeof s&&""===s.trim())return null;const p=r[n].component,m=this.footerContent.repeaters.hasOwnProperty(n),d=this.footerContent.wysiwyg.hasOwnProperty(n);return t(p,{class:`${n} FooterSectionContainer FooterSectionContainer${e+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:r[n],repeaterContent:m?this.footerContent.repeaters[n]:null,customContent:d?this.footerContent.wysiwyg[n].content:null,"translation-url":this.translationUrl,"clock-format":this.clockFormat,"time-zone":this.timeZone,"accordion-links":this.accordionLinks})}));return t("footer",{class:this.variant&&"standard"!==this.variant?`FooterContainer FooterContainer--${this.variant}`:"FooterContainer",ref:n=>this.stylingContainer=n},t("div",{class:"FooterGrid customStyle"},n))}}get hostEl(){return e(this)}static get watchers(){return{language:["watchLanguage"]}}};c.style='/*\n============================================================================\nBASE STYLES - apply to all footer variants\n============================================================================\n*/\n: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.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  grid-template-rows: repeat(9, auto);\n  grid-template-areas: "one" "two" "three" "four" "five" "six" "seven";\n}\n\n.FooterSectionContainer {\n  color: var(--emw--footer-typography, var(--emw--color-typography, #fff));\n  padding: 15px 20px 0;\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.FooterSectionContainer7 div {\n  padding: 0;\n}\n\n/*\n============================================================================\nSTANDARD VARIANT (Default) - applies when variant="standard" or no variant specified\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@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 two  two" "one three three three" "one  four four  four" "one five five five" "one six six six" "seven seven seven seven" "eight eight eight eight" "nine nine nine nine";\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  .FooterSectionContainer5 .CustomContentSectionWrapper {\n    padding: 0;\n  }\n  .FooterSectionContainer5 .CustomContentSectionWrapper div {\n    display: flex;\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  .FooterSectionContainer7 .CustomContentSectionWrapper {\n    padding: 0;\n    padding-bottom: var(--emw--spacing-large, 22px);\n    font-size: var(--emw--font-size-small, 14px);\n  }\n}\n/*\n============================================================================\nCOMPACT VARIANT - applies when variant="compact"\n============================================================================\n*/\n.FooterContainer--compact {\n  /*\n  ========================================================================\n  CONTAINER QUERIES\n  ========================================================================\n  */\n}\n.FooterContainer--compact ul {\n  font-size: var(--emw--font-size-normal, 16px);\n}\n.FooterContainer--compact img.Visible {\n  border-radius: 0;\n}\n.FooterContainer--compact .ImageListWrapper.sc-image-list {\n  padding: var(--emw--spacing-2x-small, 5px) 0;\n}\n.FooterContainer--compact .ImageListIcon.sc-image-list img.sc-image-list {\n  width: 100%;\n}\n.FooterContainer--compact div.ImageListSectionTitle.sc-image-list {\n  padding-left: 0;\n}\n.FooterContainer--compact div.ImageListLineup.sc-image-list {\n  padding-left: 0;\n}\n.FooterContainer--compact .FooterSectionContainer2 .ImageListSectionTitle.sc-image-list,\n.FooterContainer--compact .FooterSectionContainer3 .ImageListSectionTitle.sc-image-list,\n.FooterContainer--compact .FooterSectionContainer4 .ImageListSectionTitle.sc-image-list,\n.FooterContainer--compact .FooterSectionContainer6 div.CustomContentSectionWrapper div p,\n.FooterContainer--compact .FooterSectionContainer9 .ImageListSectionTitle.sc-image-list,\n.FooterContainer--compact div.ImageListSectionTitle.sc-image-list,\n.FooterContainer--compact .FooterSectionContainer6.FooterSectionContainer6 .CustomContentSectionWrapper div p {\n  color: var(--emw--color-primary);\n  font-size: var(--emw--font-size-medium, 18px);\n  font-weight: var(--emw--font-weight-mid, 500);\n  letter-spacing: var(--emw--letter-spacing-medium);\n}\n.FooterContainer--compact .FooterSectionContainer6 .CustomContentSectionWrapper div p {\n  text-align: left;\n  padding-left: 20px;\n  font-size: var(--emw--font-size-medium, 16px);\n}\n.FooterContainer--compact .FooterSectionContainer6 div.CustomContentSectionContent {\n  padding: 0;\n}\n.FooterContainer--compact .FooterSectionContainer6 div.CustomContentSectionContent p {\n  text-transform: uppercase;\n  padding: var(--emw--spacing-large, 20px) var(--emw--spacing-medium, 14px) var(--emw--spacing-x-large, 30px) 0;\n  margin: 0;\n}\n.FooterContainer--compact .FooterSectionContainer6 div.ImageListSectionTitle.sc-image-list {\n  display: none;\n}\n.FooterContainer--compact .FooterSectionContainer7.FooterSectionContainer7 .CustomContentSectionWrapper div p {\n  text-align: center;\n  padding: 20px 0;\n  margin: 0 20px;\n  border-top: 1px solid var(--emw--color-primary);\n  border-bottom: 1px solid var(--emw--color-primary);\n  font-size: var(--emw--font-size-small, 12px);\n}\n.FooterContainer--compact .FooterSectionContainer5 div.ImageListLineup.sc-image-list {\n  justify-content: center;\n}\n.FooterContainer--compact div.LinkSectionListWrapper {\n  display: grid;\n  justify-content: center;\n}\n.FooterContainer--compact .LinkSectionListLink .LinkSectionListLinkText .ContainerImage {\n  max-width: 15px;\n  max-height: 15px;\n}\n.FooterContainer--compact .LinkSectionListLink .LinkSectionListLinkText .ContainerImage img {\n  width: 100%;\n  height: auto;\n  display: block;\n  position: relative;\n  border: none;\n  border-radius: 0;\n}\n.FooterContainer--compact .LinkSectionListLink .LinkSectionListLinkText .ContainerImage img:before {\n  content: " ";\n  background: var(--emw--footer-color-bg, #00001c);\n  display: block;\n  position: absolute;\n  z-index: 2;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n}\n.FooterContainer--compact .LinkSectionListWrapper ul {\n  display: inline-block;\n  break-inside: avoid;\n  margin: 0 0 24px;\n  padding: 0;\n  width: 100%;\n}\n.FooterContainer--compact .LinkSectionListWrapper ul p {\n  color: var(--emw--color-primary);\n  letter-spacing: var(--emw--letter-spacing-medium);\n}\n.FooterContainer--compact ul li span.LinkSectionListLinkText span {\n  font-size: var(--emw--font-size-small);\n  letter-spacing: var(--emw--letter-spacing-small);\n}\n.FooterContainer--compact .LinkSectionListContainer ul {\n  padding-left: 0;\n}\n.FooterContainer--compact .license-description {\n  text-align: left;\n}\n.FooterContainer--compact .social .ImageListIcon.sc-image-list img.sc-image-list {\n  width: auto;\n}\n@container (max-width: 480px) {\n  .FooterContainer--compact div.LinkSectionListWrapper {\n    justify-content: center;\n    column-count: 1;\n  }\n  .FooterContainer--compact .LinkSectionListWrapper ul p {\n    text-align: center;\n  }\n  .FooterContainer--compact .LinkSectionListContainer ul {\n    padding-left: 0;\n    align-items: center;\n    display: flex;\n    margin: 0;\n  }\n  .FooterContainer--compact image-list.FooterSectionContainer2 .ImageListIcon p {\n    display: none;\n  }\n  .FooterContainer--compact .FooterSectionContainer8 .CustomContentSectionContent p {\n    text-align: center;\n    font-size: var(--emw--font-size-small, 12px);\n  }\n}\n@container (max-width: 750px) {\n  .FooterContainer--compact .FooterSectionContainer6 div.CustomContentSectionContent {\n    padding: 0;\n  }\n  .FooterContainer--compact .FooterSectionContainer6 .CustomContentSectionWrapper div p {\n    text-align: center;\n  }\n  .FooterContainer--compact .LinkSectionListWrapper ul p {\n    text-align: center;\n  }\n  .FooterContainer--compact .LinkSectionListContainer ul {\n    padding-left: 0;\n    align-items: center;\n  }\n  .FooterContainer--compact image-list.FooterSectionContainer2 .ImageListIcon p {\n    display: none;\n  }\n  .FooterContainer--compact .FooterSectionContainer8 .CustomContentSectionContent p {\n    text-align: center;\n  }\n}\n@container (min-width: 650px) {\n  .FooterContainer--compact .LinkSectionListWrapper {\n    grid-gap: 2rem;\n    grid-template-columns: repeat(6, 1fr);\n    grid-template-rows: 1fr;\n  }\n}\n@container (min-width: 750px) {\n  .FooterContainer--compact .FooterGrid {\n    border-top: 5px solid var(--emw--footer-color-primary);\n  }\n  .FooterContainer--compact .FooterGrid.customStyle {\n    display: grid;\n    border-top: 5px solid var(--emw--footer-color-primary, var(--emw--color-primary, #fc3c2a));\n    grid-template-rows: auto auto auto auto auto;\n    grid-template-columns: repeat(5, 1fr);\n    grid-template-areas: "one one one one one" "two three four six nine" "seven seven seven seven seven" "five five five five five" "eight eight eight eight eight"; /* row 5 */\n  }\n  .FooterContainer--compact .FooterSectionContainer .ImageListLineup.sc-image-list {\n    justify-content: start;\n  }\n  .FooterContainer--compact .FooterSectionContainer8 {\n    grid-area: eight;\n  }\n  .FooterContainer--compact .FooterSectionContainer .CustomContentSectionWrapper.sc-custom-content-section {\n    text-align: center;\n  }\n}\n@media (max-width: 768px) {\n  .FooterContainer--compact .FooterSectionContainer8 {\n    grid-area: eight;\n  }\n  .FooterContainer--compact .FooterSectionContainer9 {\n    grid-area: nine;\n  }\n  .FooterContainer--compact div.FooterGrid {\n    display: grid;\n    grid-template-areas: "one" "two" "three" "four" "five" "six" "nine" "seven" "eight";\n  }\n  .FooterContainer--compact .FooterSectionContainer9 .ImageListIcon p.sc-image-list {\n    display: none;\n  }\n}\n@media (min-width: 1301px) {\n  .FooterContainer--compact {\n    padding-bottom: 0;\n  }\n  .FooterContainer--compact .FooterSectionContainer5 .ImageListSectionTitle.sc-image-list {\n    display: none;\n  }\n}';export{c as general_footer_template}

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

@@ -1 +1 @@
-import{p as e,b as t}from"./index-2051e205.js";export{s as setNonce}from"./index-2051e205.js";import{g as n}from"./app-globals-0f993ce5.js";(()=>{const t=import.meta.url,n={};return""!==t&&(n.resourcesUrl=new URL(".",t).href),e(n)})().then((async e=>(await n(),t([["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]},[[9,"resize","onResize"]]]]],["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"]}]]]],e))));
+import{p as e,b as t}from"./index-2051e205.js";export{s as setNonce}from"./index-2051e205.js";import{g as n}from"./app-globals-0f993ce5.js";(()=>{const t=import.meta.url,n={};return""!==t&&(n.resourcesUrl=new URL(".",t).href),e(n)})().then((async e=>(await n(),t([["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]},[[9,"resize","onResize"]]]]],["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"],variant:[513],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"]}]]]],e))));

package/dist/types/components/general-footer-template/general-footer-template.d.ts

@@ -1,4 +1,5 @@
 import "../../../../../../dist/packages/stencil/ui-image/dist/types/index";
+export type FooterVariant = 'standard' | 'compact';
 export declare class GeneralFooterTemplate {
     hostEl: HTMLElement;
     /**
@@ -73,6 +74,10 @@ export declare class GeneralFooterTemplate {
      * whether dropdown behavior is enabled for the link-section-list
     */
     accordionLinks: boolean;
+    /**
+     * footer design variant - 'standard' for the current design, 'compact' for the new compact design
+    */
+    variant: FooterVariant;
     private hasErrors;
     /**
      * clean / formatted section list to be used for rendering footer components

package/dist/types/components.d.ts

@@ -5,6 +5,8 @@
  * It contains typing information for all components that exist in this project.
  */
 import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
+import { FooterVariant } from "./components/general-footer-template/general-footer-template";
+export { FooterVariant } from "./components/general-footer-template/general-footer-template";
 export namespace Components {
     interface CustomClock {
         /**
@@ -125,6 +127,10 @@ export namespace Components {
           * the id of the current userid, to be used in order to determine login status (relevant for certain components ex. "panic button")
          */
         "userid": string;
+        /**
+          * footer design variant - 'standard' for the current design, 'compact' for the new compact design
+         */
+        "variant": FooterVariant;
     }
     interface ImageList {
         /**
@@ -333,6 +339,10 @@ declare namespace LocalJSX {
           * the id of the current userid, to be used in order to determine login status (relevant for certain components ex. "panic button")
          */
         "userid"?: string;
+        /**
+          * footer design variant - 'standard' for the current design, 'compact' for the new compact design
+         */
+        "variant"?: FooterVariant;
     }
     interface ImageList {
         /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@everymatrix/general-footer-template",
-  "version": "1.85.23",
+  "version": "1.86.1",
   "main": "./dist/index.cjs.js",
   "module": "./dist/index.js",
   "es2015": "./dist/esm/index.mjs",