@everymatrix/general-footer-template 1.87.26 → 1.87.27

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/dist/cjs/general-footer-template.cjs.entry.js +69 -10
  2. package/dist/esm/general-footer-template.entry.js +69 -10
  3. package/dist/general-footer-template/general-footer-template.entry.js +1 -1
  4. package/package.json +1 -1
package/dist/cjs/general-footer-template.cjs.entry.js CHANGED
@@ -5,6 +5,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
5
5
  const index = require('./index-e4512e24.js');
6
6
  const utils = require('./utils-614b68e1.js');
7
7
 
8
+ const StyleCacheKey = '__WIDGET_GLOBAL_STYLE_CACHE__';
9
+
8
10
  /**
9
11
  * @name setClientStyling
10
12
  * @description Method used to create and append to the passed element of the widget a style element with the content received
@@ -50,18 +52,75 @@ function setClientStylingURL(stylingContainer, clientStylingUrl) {
50
52
  * @param {HTMLElement} stylingContainer The highest element of the widget
51
53
  * @param {string} domain The domain from where the content should be fetched (e.g. 'Casino.Style', 'App.Style', 'casino-footer.style', etc.)
52
54
  * @param {ref} subscription A reference to a variable where the subscription should be saved for unsubscribing when no longer needed
55
+ * @param {boolean} useAdoptedStyleSheets A flag to gradually enable testing of adoptedStyleSheets
53
56
  */
54
- function setStreamStyling(stylingContainer, domain, subscription) {
55
- if (window.emMessageBus) {
56
- const sheet = document.createElement('style');
57
+ function setStreamStyling(stylingContainer, domain, subscription, useAdoptedStyleSheets = false) {
58
+ if (!window.emMessageBus) return;
57
59
 
58
- window.emMessageBus.subscribe(domain, (data) => {
59
- sheet.innerHTML = data;
60
- if (stylingContainer) {
61
- stylingContainer.appendChild(sheet);
62
- }
63
- });
60
+ const supportAdoptStyle = 'adoptedStyleSheets' in Document.prototype;
61
+
62
+ if (!supportAdoptStyle || !useAdoptedStyleSheets) {
63
+ subscription = getStyleTagSubscription(stylingContainer, domain);
64
+
65
+ return subscription;
66
+ }
67
+
68
+ if (!window[StyleCacheKey]) {
69
+ window[StyleCacheKey] = {};
64
70
  }
71
+ subscription = getAdoptStyleSubscription(stylingContainer, domain);
72
+
73
+ const originalUnsubscribe = subscription.unsubscribe.bind(subscription);
74
+ const wrappedUnsubscribe = () => {
75
+ if (window[StyleCacheKey][domain]) {
76
+ const cachedObject = window[StyleCacheKey][domain];
77
+ cachedObject.refCount > 1
78
+ ? (cachedObject.refCount = cachedObject.refCount - 1)
79
+ : delete window[StyleCacheKey][domain];
80
+ }
81
+
82
+ originalUnsubscribe();
83
+ };
84
+ subscription.unsubscribe = wrappedUnsubscribe;
85
+
86
+ return subscription;
87
+ }
88
+
89
+ function getStyleTagSubscription(stylingContainer, domain) {
90
+ const sheet = document.createElement('style');
91
+
92
+ return window.emMessageBus.subscribe(domain, (data) => {
93
+ if (stylingContainer) {
94
+ sheet.innerHTML = data;
95
+ stylingContainer.appendChild(sheet);
96
+ }
97
+ });
98
+ }
99
+
100
+ function getAdoptStyleSubscription(stylingContainer, domain) {
101
+ return window.emMessageBus.subscribe(domain, (data) => {
102
+ if (!stylingContainer) return;
103
+
104
+ const shadowRoot = stylingContainer.getRootNode();
105
+ const cacheStyleObject = window[StyleCacheKey];
106
+ let cachedStyle = cacheStyleObject[domain]?.sheet;
107
+
108
+ if (!cachedStyle) {
109
+ cachedStyle = new CSSStyleSheet();
110
+ cachedStyle.replaceSync(data);
111
+ cacheStyleObject[domain] = {
112
+ sheet: cachedStyle,
113
+ refCount: 1
114
+ };
115
+ } else {
116
+ cacheStyleObject[domain].refCount = cacheStyleObject[domain].refCount + 1;
117
+ }
118
+
119
+ const currentSheets = shadowRoot.adoptedStyleSheets || [];
120
+ if (!currentSheets.includes(cachedStyle)) {
121
+ shadowRoot.adoptedStyleSheets = [...currentSheets, cachedStyle];
122
+ }
123
+ });
65
124
  }
66
125
 
67
126
  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}";
@@ -136,7 +195,7 @@ const GeneralFooterTemplate = class {
136
195
  }
137
196
  componentDidLoad() {
138
197
  if (window.emMessageBus != undefined) {
139
- setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`);
198
+ setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`, this.stylingSubscription);
140
199
  }
141
200
  else {
142
201
  if (this.clientStyling)
package/dist/esm/general-footer-template.entry.js CHANGED
@@ -1,6 +1,8 @@
1
1
  import { r as registerInstance, h, g as getElement } from './index-2051e205.js';
2
2
  import { g as getDevicePlatform, n as normalizeRepeaterContent, c as componentRules } from './utils-c4781120.js';
3
3
 
4
+ const StyleCacheKey = '__WIDGET_GLOBAL_STYLE_CACHE__';
5
+
4
6
  /**
5
7
  * @name setClientStyling
6
8
  * @description Method used to create and append to the passed element of the widget a style element with the content received
@@ -46,18 +48,75 @@ function setClientStylingURL(stylingContainer, clientStylingUrl) {
46
48
  * @param {HTMLElement} stylingContainer The highest element of the widget
47
49
  * @param {string} domain The domain from where the content should be fetched (e.g. 'Casino.Style', 'App.Style', 'casino-footer.style', etc.)
48
50
  * @param {ref} subscription A reference to a variable where the subscription should be saved for unsubscribing when no longer needed
51
+ * @param {boolean} useAdoptedStyleSheets A flag to gradually enable testing of adoptedStyleSheets
49
52
  */
50
- function setStreamStyling(stylingContainer, domain, subscription) {
51
- if (window.emMessageBus) {
52
- const sheet = document.createElement('style');
53
+ function setStreamStyling(stylingContainer, domain, subscription, useAdoptedStyleSheets = false) {
54
+ if (!window.emMessageBus) return;
53
55
 
54
- window.emMessageBus.subscribe(domain, (data) => {
55
- sheet.innerHTML = data;
56
- if (stylingContainer) {
57
- stylingContainer.appendChild(sheet);
58
- }
59
- });
56
+ const supportAdoptStyle = 'adoptedStyleSheets' in Document.prototype;
57
+
58
+ if (!supportAdoptStyle || !useAdoptedStyleSheets) {
59
+ subscription = getStyleTagSubscription(stylingContainer, domain);
60
+
61
+ return subscription;
62
+ }
63
+
64
+ if (!window[StyleCacheKey]) {
65
+ window[StyleCacheKey] = {};
60
66
  }
67
+ subscription = getAdoptStyleSubscription(stylingContainer, domain);
68
+
69
+ const originalUnsubscribe = subscription.unsubscribe.bind(subscription);
70
+ const wrappedUnsubscribe = () => {
71
+ if (window[StyleCacheKey][domain]) {
72
+ const cachedObject = window[StyleCacheKey][domain];
73
+ cachedObject.refCount > 1
74
+ ? (cachedObject.refCount = cachedObject.refCount - 1)
75
+ : delete window[StyleCacheKey][domain];
76
+ }
77
+
78
+ originalUnsubscribe();
79
+ };
80
+ subscription.unsubscribe = wrappedUnsubscribe;
81
+
82
+ return subscription;
83
+ }
84
+
85
+ function getStyleTagSubscription(stylingContainer, domain) {
86
+ const sheet = document.createElement('style');
87
+
88
+ return window.emMessageBus.subscribe(domain, (data) => {
89
+ if (stylingContainer) {
90
+ sheet.innerHTML = data;
91
+ stylingContainer.appendChild(sheet);
92
+ }
93
+ });
94
+ }
95
+
96
+ function getAdoptStyleSubscription(stylingContainer, domain) {
97
+ return window.emMessageBus.subscribe(domain, (data) => {
98
+ if (!stylingContainer) return;
99
+
100
+ const shadowRoot = stylingContainer.getRootNode();
101
+ const cacheStyleObject = window[StyleCacheKey];
102
+ let cachedStyle = cacheStyleObject[domain]?.sheet;
103
+
104
+ if (!cachedStyle) {
105
+ cachedStyle = new CSSStyleSheet();
106
+ cachedStyle.replaceSync(data);
107
+ cacheStyleObject[domain] = {
108
+ sheet: cachedStyle,
109
+ refCount: 1
110
+ };
111
+ } else {
112
+ cacheStyleObject[domain].refCount = cacheStyleObject[domain].refCount + 1;
113
+ }
114
+
115
+ const currentSheets = shadowRoot.adoptedStyleSheets || [];
116
+ if (!currentSheets.includes(cachedStyle)) {
117
+ shadowRoot.adoptedStyleSheets = [...currentSheets, cachedStyle];
118
+ }
119
+ });
61
120
  }
62
121
 
63
122
  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}";
@@ -132,7 +191,7 @@ const GeneralFooterTemplate = class {
132
191
  }
133
192
  componentDidLoad() {
134
193
  if (window.emMessageBus != undefined) {
135
- setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`);
194
+ setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`, this.stylingSubscription);
136
195
  }
137
196
  else {
138
197
  if (this.clientStyling)
package/dist/general-footer-template/general-footer-template.entry.js CHANGED
@@ -1 +1 @@
1
- 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}
1
+ 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";const a="__WIDGET_GLOBAL_STYLE_CACHE__";function c(n,t){if(n){const e=document.createElement("style");e.innerHTML=t,n.appendChild(e)}}const s=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,e,o=!1){if(!window.emMessageBus)return;if(!("adoptedStyleSheets"in Document.prototype)||!o)return function(n,t){const e=document.createElement("style");return window.emMessageBus.subscribe(t,(t=>{n&&(e.innerHTML=t,n.appendChild(e))}))}(n,t);window[a]||(window[a]={});const i=(e=function(n,t){return window.emMessageBus.subscribe(t,(e=>{if(!n)return;const o=n.getRootNode(),i=window[a];let r=i[t]?.sheet;r?i[t].refCount=i[t].refCount+1:(r=new CSSStyleSheet,r.replaceSync(e),i[t]={sheet:r,refCount:1});const c=o.adoptedStyleSheets||[];c.includes(r)||(o.adoptedStyleSheets=[...c,r])}))}(n,t)).unsubscribe.bind(e);e.unsubscribe=()=>{if(window[a][t]){const n=window[a][t];n.refCount>1?n.refCount=n.refCount-1:delete window[a][t]}i()}}(this.stylingContainer,`${this.mbSource}.Style`,this.stylingSubscription):(this.clientStyling&&c(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&&c(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"]}}};s.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{s as general_footer_template}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@everymatrix/general-footer-template",
3
- "version": "1.87.26",
3
+ "version": "1.87.27",
4
4
  "main": "./dist/index.cjs.js",
5
5
  "module": "./dist/index.js",
6
6
  "es2015": "./dist/esm/index.mjs",