@everymatrix/lottery-banner 0.0.15 → 0.0.16

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 (11) hide show
  1. package/dist/cjs/index.cjs.js +1 -1
  2. package/dist/cjs/{lottery-banner-38fe4a6f.js → lottery-banner-73236552.js} +70 -11
  3. package/dist/cjs/lottery-banner.cjs.entry.js +1 -1
  4. package/dist/esm/index.js +1 -1
  5. package/dist/esm/{lottery-banner-66323365.js → lottery-banner-89c08855.js} +70 -11
  6. package/dist/esm/lottery-banner.entry.js +1 -1
  7. package/dist/lottery-banner/index.esm.js +1 -1
  8. package/dist/lottery-banner/lottery-banner-89c08855.js +1 -0
  9. package/dist/lottery-banner/lottery-banner.entry.js +1 -1
  10. package/package.json +1 -1
  11. package/dist/lottery-banner/lottery-banner-66323365.js +0 -1
package/dist/cjs/index.cjs.js CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- const lotteryBanner = require('./lottery-banner-38fe4a6f.js');
5
+ const lotteryBanner = require('./lottery-banner-73236552.js');
6
6
  require('./index-4511b749.js');
7
7
 
8
8
 
package/dist/cjs/{lottery-banner-38fe4a6f.js → lottery-banner-73236552.js} RENAMED
@@ -2,6 +2,8 @@
2
2
 
3
3
  const index = require('./index-4511b749.js');
4
4
 
5
+ const StyleCacheKey = '__WIDGET_GLOBAL_STYLE_CACHE__';
6
+
5
7
  /**
6
8
  * @name setClientStyling
7
9
  * @description Method used to create and append to the passed element of the widget a style element with the content received
@@ -47,18 +49,75 @@ function setClientStylingURL(stylingContainer, clientStylingUrl) {
47
49
  * @param {HTMLElement} stylingContainer The highest element of the widget
48
50
  * @param {string} domain The domain from where the content should be fetched (e.g. 'Casino.Style', 'App.Style', 'casino-footer.style', etc.)
49
51
  * @param {ref} subscription A reference to a variable where the subscription should be saved for unsubscribing when no longer needed
52
+ * @param {boolean} useAdoptedStyleSheets A flag to gradually enable testing of adoptedStyleSheets
50
53
  */
51
- function setStreamStyling(stylingContainer, domain, subscription) {
52
- if (window.emMessageBus) {
53
- const sheet = document.createElement('style');
54
+ function setStreamStyling(stylingContainer, domain, subscription, useAdoptedStyleSheets = false) {
55
+ if (!window.emMessageBus) return;
54
56
 
55
- window.emMessageBus.subscribe(domain, (data) => {
56
- sheet.innerHTML = data;
57
- if (stylingContainer) {
58
- stylingContainer.appendChild(sheet);
59
- }
60
- });
57
+ const supportAdoptStyle = 'adoptedStyleSheets' in Document.prototype;
58
+
59
+ if (!supportAdoptStyle || !useAdoptedStyleSheets) {
60
+ subscription = getStyleTagSubscription(stylingContainer, domain);
61
+
62
+ return subscription;
63
+ }
64
+
65
+ if (!window[StyleCacheKey]) {
66
+ window[StyleCacheKey] = {};
61
67
  }
68
+ subscription = getAdoptStyleSubscription(stylingContainer, domain);
69
+
70
+ const originalUnsubscribe = subscription.unsubscribe.bind(subscription);
71
+ const wrappedUnsubscribe = () => {
72
+ if (window[StyleCacheKey][domain]) {
73
+ const cachedObject = window[StyleCacheKey][domain];
74
+ cachedObject.refCount > 1
75
+ ? (cachedObject.refCount = cachedObject.refCount - 1)
76
+ : delete window[StyleCacheKey][domain];
77
+ }
78
+
79
+ originalUnsubscribe();
80
+ };
81
+ subscription.unsubscribe = wrappedUnsubscribe;
82
+
83
+ return subscription;
84
+ }
85
+
86
+ function getStyleTagSubscription(stylingContainer, domain) {
87
+ const sheet = document.createElement('style');
88
+
89
+ return window.emMessageBus.subscribe(domain, (data) => {
90
+ if (stylingContainer) {
91
+ sheet.innerHTML = data;
92
+ stylingContainer.appendChild(sheet);
93
+ }
94
+ });
95
+ }
96
+
97
+ function getAdoptStyleSubscription(stylingContainer, domain) {
98
+ return window.emMessageBus.subscribe(domain, (data) => {
99
+ if (!stylingContainer) return;
100
+
101
+ const shadowRoot = stylingContainer.getRootNode();
102
+ const cacheStyleObject = window[StyleCacheKey];
103
+ let cachedStyle = cacheStyleObject[domain]?.sheet;
104
+
105
+ if (!cachedStyle) {
106
+ cachedStyle = new CSSStyleSheet();
107
+ cachedStyle.replaceSync(data);
108
+ cacheStyleObject[domain] = {
109
+ sheet: cachedStyle,
110
+ refCount: 1
111
+ };
112
+ } else {
113
+ cacheStyleObject[domain].refCount = cacheStyleObject[domain].refCount + 1;
114
+ }
115
+
116
+ const currentSheets = shadowRoot.adoptedStyleSheets || [];
117
+ if (!currentSheets.includes(cachedStyle)) {
118
+ shadowRoot.adoptedStyleSheets = [...currentSheets, cachedStyle];
119
+ }
120
+ });
62
121
  }
63
122
 
64
123
  const DEFAULT_LANGUAGE = 'en';
@@ -141,7 +200,7 @@ const LotteryBanner = class {
141
200
  }
142
201
  handleMbSourceChange(newValue, oldValue) {
143
202
  if (newValue !== oldValue) {
144
- setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`);
203
+ setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`, this.stylingSubscription);
145
204
  }
146
205
  }
147
206
  async componentWillLoad() {
@@ -152,7 +211,7 @@ const LotteryBanner = class {
152
211
  componentDidLoad() {
153
212
  if (this.stylingContainer) {
154
213
  if (this.mbSource)
155
- setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`);
214
+ setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`, this.stylingSubscription);
156
215
  if (this.clientStyling)
157
216
  setClientStyling(this.stylingContainer, this.clientStyling);
158
217
  if (this.clientStylingUrl)
package/dist/cjs/lottery-banner.cjs.entry.js CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- const lotteryBanner = require('./lottery-banner-38fe4a6f.js');
5
+ const lotteryBanner = require('./lottery-banner-73236552.js');
6
6
  require('./index-4511b749.js');
7
7
 
8
8
 
package/dist/esm/index.js CHANGED
@@ -1,2 +1,2 @@
1
- export { L as LotteryBanner } from './lottery-banner-66323365.js';
1
+ export { L as LotteryBanner } from './lottery-banner-89c08855.js';
2
2
  import './index-0b45dd81.js';
package/dist/esm/{lottery-banner-66323365.js → lottery-banner-89c08855.js} RENAMED
@@ -1,5 +1,7 @@
1
1
  import { r as registerInstance, h } from './index-0b45dd81.js';
2
2
 
3
+ const StyleCacheKey = '__WIDGET_GLOBAL_STYLE_CACHE__';
4
+
3
5
  /**
4
6
  * @name setClientStyling
5
7
  * @description Method used to create and append to the passed element of the widget a style element with the content received
@@ -45,18 +47,75 @@ function setClientStylingURL(stylingContainer, clientStylingUrl) {
45
47
  * @param {HTMLElement} stylingContainer The highest element of the widget
46
48
  * @param {string} domain The domain from where the content should be fetched (e.g. 'Casino.Style', 'App.Style', 'casino-footer.style', etc.)
47
49
  * @param {ref} subscription A reference to a variable where the subscription should be saved for unsubscribing when no longer needed
50
+ * @param {boolean} useAdoptedStyleSheets A flag to gradually enable testing of adoptedStyleSheets
48
51
  */
49
- function setStreamStyling(stylingContainer, domain, subscription) {
50
- if (window.emMessageBus) {
51
- const sheet = document.createElement('style');
52
+ function setStreamStyling(stylingContainer, domain, subscription, useAdoptedStyleSheets = false) {
53
+ if (!window.emMessageBus) return;
52
54
 
53
- window.emMessageBus.subscribe(domain, (data) => {
54
- sheet.innerHTML = data;
55
- if (stylingContainer) {
56
- stylingContainer.appendChild(sheet);
57
- }
58
- });
55
+ const supportAdoptStyle = 'adoptedStyleSheets' in Document.prototype;
56
+
57
+ if (!supportAdoptStyle || !useAdoptedStyleSheets) {
58
+ subscription = getStyleTagSubscription(stylingContainer, domain);
59
+
60
+ return subscription;
61
+ }
62
+
63
+ if (!window[StyleCacheKey]) {
64
+ window[StyleCacheKey] = {};
59
65
  }
66
+ subscription = getAdoptStyleSubscription(stylingContainer, domain);
67
+
68
+ const originalUnsubscribe = subscription.unsubscribe.bind(subscription);
69
+ const wrappedUnsubscribe = () => {
70
+ if (window[StyleCacheKey][domain]) {
71
+ const cachedObject = window[StyleCacheKey][domain];
72
+ cachedObject.refCount > 1
73
+ ? (cachedObject.refCount = cachedObject.refCount - 1)
74
+ : delete window[StyleCacheKey][domain];
75
+ }
76
+
77
+ originalUnsubscribe();
78
+ };
79
+ subscription.unsubscribe = wrappedUnsubscribe;
80
+
81
+ return subscription;
82
+ }
83
+
84
+ function getStyleTagSubscription(stylingContainer, domain) {
85
+ const sheet = document.createElement('style');
86
+
87
+ return window.emMessageBus.subscribe(domain, (data) => {
88
+ if (stylingContainer) {
89
+ sheet.innerHTML = data;
90
+ stylingContainer.appendChild(sheet);
91
+ }
92
+ });
93
+ }
94
+
95
+ function getAdoptStyleSubscription(stylingContainer, domain) {
96
+ return window.emMessageBus.subscribe(domain, (data) => {
97
+ if (!stylingContainer) return;
98
+
99
+ const shadowRoot = stylingContainer.getRootNode();
100
+ const cacheStyleObject = window[StyleCacheKey];
101
+ let cachedStyle = cacheStyleObject[domain]?.sheet;
102
+
103
+ if (!cachedStyle) {
104
+ cachedStyle = new CSSStyleSheet();
105
+ cachedStyle.replaceSync(data);
106
+ cacheStyleObject[domain] = {
107
+ sheet: cachedStyle,
108
+ refCount: 1
109
+ };
110
+ } else {
111
+ cacheStyleObject[domain].refCount = cacheStyleObject[domain].refCount + 1;
112
+ }
113
+
114
+ const currentSheets = shadowRoot.adoptedStyleSheets || [];
115
+ if (!currentSheets.includes(cachedStyle)) {
116
+ shadowRoot.adoptedStyleSheets = [...currentSheets, cachedStyle];
117
+ }
118
+ });
60
119
  }
61
120
 
62
121
  const DEFAULT_LANGUAGE = 'en';
@@ -139,7 +198,7 @@ const LotteryBanner = class {
139
198
  }
140
199
  handleMbSourceChange(newValue, oldValue) {
141
200
  if (newValue !== oldValue) {
142
- setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`);
201
+ setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`, this.stylingSubscription);
143
202
  }
144
203
  }
145
204
  async componentWillLoad() {
@@ -150,7 +209,7 @@ const LotteryBanner = class {
150
209
  componentDidLoad() {
151
210
  if (this.stylingContainer) {
152
211
  if (this.mbSource)
153
- setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`);
212
+ setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`, this.stylingSubscription);
154
213
  if (this.clientStyling)
155
214
  setClientStyling(this.stylingContainer, this.clientStyling);
156
215
  if (this.clientStylingUrl)
package/dist/esm/lottery-banner.entry.js CHANGED
@@ -1,2 +1,2 @@
1
- export { L as lottery_banner } from './lottery-banner-66323365.js';
1
+ export { L as lottery_banner } from './lottery-banner-89c08855.js';
2
2
  import './index-0b45dd81.js';
package/dist/lottery-banner/index.esm.js CHANGED
@@ -1 +1 @@
1
- export{L as LotteryBanner}from"./lottery-banner-66323365.js";import"./index-0b45dd81.js";
1
+ export{L as LotteryBanner}from"./lottery-banner-89c08855.js";import"./index-0b45dd81.js";
package/dist/lottery-banner/lottery-banner-89c08855.js ADDED
@@ -0,0 +1 @@
1
+ import{r as n,h as t}from"./index-0b45dd81.js";const e="__WIDGET_GLOBAL_STYLE_CACHE__";function r(n,t){if(n){const e=document.createElement("style");e.innerHTML=t,n.appendChild(e)}}function o(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)}))}function i(n,t,r,o=!1){if(!window.emMessageBus)return;if(!("adoptedStyleSheets"in Document.prototype)||!o)return r=function(n,t){const e=document.createElement("style");return window.emMessageBus.subscribe(t,(t=>{n&&(e.innerHTML=t,n.appendChild(e))}))}(n,t),r;window[e]||(window[e]={}),r=function(n,t){return window.emMessageBus.subscribe(t,(r=>{if(!n)return;const o=n.getRootNode(),i=window[e];let a=i[t]?.sheet;a?i[t].refCount=i[t].refCount+1:(a=new CSSStyleSheet,a.replaceSync(r),i[t]={sheet:a,refCount:1});const l=o.adoptedStyleSheets||[];l.includes(a)||(o.adoptedStyleSheets=[...l,a])}))}(n,t);const i=r.unsubscribe.bind(r);return r.unsubscribe=()=>{if(window[e][t]){const n=window[e][t];n.refCount>1?n.refCount=n.refCount-1:delete window[e][t]}i()},r}const a=["ro","en","fr","ar","hr"],l={en:{stopAt:"Stop at",turnover:"Turnover: "},ro:{stop:"Oprește",at:"la"},fr:{stop:"Arrêtez",at:"à"},ar:{stop:"توقف",at:"في"},hr:{stop:"Stop",at:"u"}},s=(n,t)=>{const e=t;return l[void 0!==e&&a.includes(e)?e:"en"][n]},c=class{constructor(t){n(this,t),this.mbSource=void 0,this.clientStyling=void 0,this.clientStylingUrl=void 0,this.translationUrl="",this.language="en",this.logoUrl=void 0,this.stopTime="",this.bannerTitle=void 0,this.turnover=void 0,this.layout="logo,title,info"}handleClientStylingChange(n,t){n!==t&&r(this.stylingContainer,this.clientStyling)}handleClientStylingUrlChange(n,t){n!==t&&o(this.stylingContainer,this.clientStylingUrl)}handleMbSourceChange(n,t){n!==t&&i(this.stylingContainer,`${this.mbSource}.Style`,this.stylingSubscription)}async componentWillLoad(){this.translationUrl&&(async n=>{if(n)try{const e=await fetch(n);if(!e.ok)throw new Error(`HTTP error! status: ${e.status}`);const r=await e.json();t=r,Object.keys(t).forEach((n=>{for(let e in t[n])l[n][e]=t[n][e]}))}catch(n){console.error("Failed to fetch or parse translations from URL:",n)}var t})(this.translationUrl)}componentDidLoad(){this.stylingContainer&&(this.mbSource&&i(this.stylingContainer,`${this.mbSource}.Style`,this.stylingSubscription),this.clientStyling&&r(this.stylingContainer,this.clientStyling),this.clientStylingUrl&&o(this.stylingContainer,this.clientStylingUrl))}disconnectedCallback(){this.stylingSubscription&&this.stylingSubscription.unsubscribe()}renderElement(n,e=""){switch(n){case"logo":return t("div",{class:`lottery-banner__logo-wrapper ${e}`},this.logoUrl&&t("img",{alt:"logo",src:this.logoUrl,class:"lottery-banner__logo"}));case"title":return this.bannerTitle&&t("div",{class:`lottery-banner__title ${e}`},this.bannerTitle);case"info":return t("div",{class:`lottery-banner__info ${e}`},this.stopTime&&t("div",{class:"lottery-banner__info-item"},t("span",{class:"lottery-banner__info-item-label"},s("stopAt",this.language)),t("span",{class:"lottery-banner__info-item-value"},this.stopTime)),null!=this.turnover&&t("div",{class:"lottery-banner__info-item"},t("span",{class:"lottery-banner__info-item-label"},s("turnover",this.language)),t("span",{class:"lottery-banner__info-item-value"},this.turnover)));default:return null}}render(){const n=this.layout.split(",").map((n=>n.trim()));return t("section",{key:"d26c3cb4854c8fea2367df25b6e8cf11b23731e4",ref:n=>this.stylingContainer=n,class:"lottery-banner"},n.map(((t,e)=>this.renderElement(t,3===n.length&&1===e?"lottery-banner__item--center":""))))}static get watchers(){return{clientStyling:["handleClientStylingChange"],clientStylingUrl:["handleClientStylingUrlChange"],mbSource:["handleMbSourceChange"]}}};c.style=":host {\n display: block;\n}\n\n.lottery-banner {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--lottery-banner-gap, 0.5rem);\n padding: var(--lottery-banner-padding, 0px 20px);\n background: var(--lottery-banner-background, var(--emw--color-primary, #fed275));\n border-top: var(--lottery-banner-border-width, 2px) var(--lottery-banner-border-style, solid) var(--lottery-banner-border-color, var(--emw--color-primary, #fed275));\n border-bottom: var(--lottery-banner-border-width, 2px) var(--lottery-banner-border-style, solid) var(--lottery-banner-border-color, var(--emw--color-primary, #fed275));\n border-left: var(--lottery-banner-border-left, none);\n border-right: var(--lottery-banner-border-right, none);\n border-radius: var(--lottery-banner-border-radius, 0);\n white-space: nowrap;\n height: var(--lottery-banner-height, 50px);\n container-type: inline-size;\n position: relative;\n box-sizing: border-box;\n}\n\n.lottery-banner__logo-wrapper {\n display: flex;\n align-items: center;\n justify-content: center;\n height: 100%;\n}\n.lottery-banner__logo-wrapper img {\n height: 100%;\n object-fit: var(--lottery-banner-logo-object-fit, contain);\n}\n\n.lottery-banner__item--center {\n position: absolute;\n left: 50%;\n top: 50%;\n transform: translate(-50%, -50%);\n}\n\n.lottery-banner__title {\n text-align: center;\n font-size: var(--lottery-banner-title-font-size, 1.5rem);\n font-weight: 800;\n font-style: italic;\n color: var(--emw--color-typography, #000);\n}\n\n.lottery-banner__info {\n display: flex;\n align-items: center;\n gap: var(--lottery-banner-info-gap, 0.75rem);\n}\n\n.lottery-banner__info-item {\n font-size: var(--lottery-banner-info-font-size, 0.9rem);\n color: var(--lottery-banner-info-color, var(--emw--color-typography, #000));\n display: inline-flex;\n align-items: center;\n gap: 0.3rem;\n}\n\n.lottery-banner__info-item-label {\n font-weight: var(--lottery-banner-info-label-font-weight, 700);\n color: var(--lottery-banner-info-label-color, var(--emw--color-typography, #000));\n}\n\n.lottery-banner__info-item-value {\n font-weight: var(--lottery-banner-info-value-font-weight, inherit);\n color: var(--lottery-banner-info-value-color, var(--emw--color-typography, #000));\n}\n\n@container (max-width: 700px) {\n .lottery-banner {\n height: auto;\n padding: var(--lottery-banner-mobile-padding, 0.5rem 1rem);\n }\n .lottery-banner__title {\n flex-basis: 100%;\n text-align: var(--lottery-banner-mobile-title-text-align, left);\n }\n .lottery-banner__info {\n flex-wrap: wrap;\n gap: var(--lottery-banner-mobile-info-gap, 0.1rem);\n }\n}";export{c as L}
package/dist/lottery-banner/lottery-banner.entry.js CHANGED
@@ -1 +1 @@
1
- export{L as lottery_banner}from"./lottery-banner-66323365.js";import"./index-0b45dd81.js";
1
+ export{L as lottery_banner}from"./lottery-banner-89c08855.js";import"./index-0b45dd81.js";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@everymatrix/lottery-banner",
3
- "version": "0.0.15",
3
+ "version": "0.0.16",
4
4
  "main": "./dist/index.cjs.js",
5
5
  "module": "./dist/index.js",
6
6
  "es2015": "./dist/esm/index.mjs",
package/dist/lottery-banner/lottery-banner-66323365.js DELETED
@@ -1 +0,0 @@
1
- import{r as n,h as t}from"./index-0b45dd81.js";function e(n,t){if(n){const e=document.createElement("style");e.innerHTML=t,n.appendChild(e)}}function r(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)}))}function o(n,t){if(window.emMessageBus){const e=document.createElement("style");window.emMessageBus.subscribe(t,(t=>{e.innerHTML=t,n&&n.appendChild(e)}))}}const a=["ro","en","fr","ar","hr"],i={en:{stopAt:"Stop at",turnover:"Turnover: "},ro:{stop:"Oprește",at:"la"},fr:{stop:"Arrêtez",at:"à"},ar:{stop:"توقف",at:"في"},hr:{stop:"Stop",at:"u"}},l=(n,t)=>{const e=t;return i[void 0!==e&&a.includes(e)?e:"en"][n]},s=class{constructor(t){n(this,t),this.mbSource=void 0,this.clientStyling=void 0,this.clientStylingUrl=void 0,this.translationUrl="",this.language="en",this.logoUrl=void 0,this.stopTime="",this.bannerTitle=void 0,this.turnover=void 0,this.layout="logo,title,info"}handleClientStylingChange(n,t){n!==t&&e(this.stylingContainer,this.clientStyling)}handleClientStylingUrlChange(n,t){n!==t&&r(this.stylingContainer,this.clientStylingUrl)}handleMbSourceChange(n,t){n!==t&&o(this.stylingContainer,`${this.mbSource}.Style`)}async componentWillLoad(){this.translationUrl&&(async n=>{if(n)try{const e=await fetch(n);if(!e.ok)throw new Error(`HTTP error! status: ${e.status}`);const r=await e.json();t=r,Object.keys(t).forEach((n=>{for(let e in t[n])i[n][e]=t[n][e]}))}catch(n){console.error("Failed to fetch or parse translations from URL:",n)}var t})(this.translationUrl)}componentDidLoad(){this.stylingContainer&&(this.mbSource&&o(this.stylingContainer,`${this.mbSource}.Style`),this.clientStyling&&e(this.stylingContainer,this.clientStyling),this.clientStylingUrl&&r(this.stylingContainer,this.clientStylingUrl))}disconnectedCallback(){this.stylingSubscription&&this.stylingSubscription.unsubscribe()}renderElement(n,e=""){switch(n){case"logo":return t("div",{class:`lottery-banner__logo-wrapper ${e}`},this.logoUrl&&t("img",{alt:"logo",src:this.logoUrl,class:"lottery-banner__logo"}));case"title":return this.bannerTitle&&t("div",{class:`lottery-banner__title ${e}`},this.bannerTitle);case"info":return t("div",{class:`lottery-banner__info ${e}`},this.stopTime&&t("div",{class:"lottery-banner__info-item"},t("span",{class:"lottery-banner__info-item-label"},l("stopAt",this.language)),t("span",{class:"lottery-banner__info-item-value"},this.stopTime)),null!=this.turnover&&t("div",{class:"lottery-banner__info-item"},t("span",{class:"lottery-banner__info-item-label"},l("turnover",this.language)),t("span",{class:"lottery-banner__info-item-value"},this.turnover)));default:return null}}render(){const n=this.layout.split(",").map((n=>n.trim()));return t("section",{key:"d26c3cb4854c8fea2367df25b6e8cf11b23731e4",ref:n=>this.stylingContainer=n,class:"lottery-banner"},n.map(((t,e)=>this.renderElement(t,3===n.length&&1===e?"lottery-banner__item--center":""))))}static get watchers(){return{clientStyling:["handleClientStylingChange"],clientStylingUrl:["handleClientStylingUrlChange"],mbSource:["handleMbSourceChange"]}}};s.style=":host {\n display: block;\n}\n\n.lottery-banner {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--lottery-banner-gap, 0.5rem);\n padding: var(--lottery-banner-padding, 0px 20px);\n background: var(--lottery-banner-background, var(--emw--color-primary, #fed275));\n border-top: var(--lottery-banner-border-width, 2px) var(--lottery-banner-border-style, solid) var(--lottery-banner-border-color, var(--emw--color-primary, #fed275));\n border-bottom: var(--lottery-banner-border-width, 2px) var(--lottery-banner-border-style, solid) var(--lottery-banner-border-color, var(--emw--color-primary, #fed275));\n border-left: var(--lottery-banner-border-left, none);\n border-right: var(--lottery-banner-border-right, none);\n border-radius: var(--lottery-banner-border-radius, 0);\n white-space: nowrap;\n height: var(--lottery-banner-height, 50px);\n container-type: inline-size;\n position: relative;\n box-sizing: border-box;\n}\n\n.lottery-banner__logo-wrapper {\n display: flex;\n align-items: center;\n justify-content: center;\n height: 100%;\n}\n.lottery-banner__logo-wrapper img {\n height: 100%;\n object-fit: var(--lottery-banner-logo-object-fit, contain);\n}\n\n.lottery-banner__item--center {\n position: absolute;\n left: 50%;\n top: 50%;\n transform: translate(-50%, -50%);\n}\n\n.lottery-banner__title {\n text-align: center;\n font-size: var(--lottery-banner-title-font-size, 1.5rem);\n font-weight: 800;\n font-style: italic;\n color: var(--emw--color-typography, #000);\n}\n\n.lottery-banner__info {\n display: flex;\n align-items: center;\n gap: var(--lottery-banner-info-gap, 0.75rem);\n}\n\n.lottery-banner__info-item {\n font-size: var(--lottery-banner-info-font-size, 0.9rem);\n color: var(--lottery-banner-info-color, var(--emw--color-typography, #000));\n display: inline-flex;\n align-items: center;\n gap: 0.3rem;\n}\n\n.lottery-banner__info-item-label {\n font-weight: var(--lottery-banner-info-label-font-weight, 700);\n color: var(--lottery-banner-info-label-color, var(--emw--color-typography, #000));\n}\n\n.lottery-banner__info-item-value {\n font-weight: var(--lottery-banner-info-value-font-weight, inherit);\n color: var(--lottery-banner-info-value-color, var(--emw--color-typography, #000));\n}\n\n@container (max-width: 700px) {\n .lottery-banner {\n height: auto;\n padding: var(--lottery-banner-mobile-padding, 0.5rem 1rem);\n }\n .lottery-banner__title {\n flex-basis: 100%;\n text-align: var(--lottery-banner-mobile-title-text-align, left);\n }\n .lottery-banner__info {\n flex-wrap: wrap;\n gap: var(--lottery-banner-mobile-info-gap, 0.1rem);\n }\n}";export{s as L}