@everymatrix/lottery-button 1.87.26 → 1.87.28

package/dist/cjs/index.cjs.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const lotteryButton = require('./lottery-button-8bebeaec.js');
+const lotteryButton = require('./lottery-button-cd5365f9.js');
 require('./index-7ea2a016.js');
 
 

package/dist/cjs/{lottery-button-8bebeaec.js → lottery-button-cd5365f9.js}

@@ -2,6 +2,8 @@
 
 const index = require('./index-7ea2a016.js');
 
+const StyleCacheKey = '__WIDGET_GLOBAL_STYLE_CACHE__';
+
 /**
  * @name setClientStyling
  * @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) {
  * @param {HTMLElement} stylingContainer The highest element of the widget
  * @param {string} domain The domain from where the content should be fetched (e.g. 'Casino.Style', 'App.Style', 'casino-footer.style', etc.)
  * @param {ref} subscription A reference to a variable where the subscription should be saved for unsubscribing when no longer needed
+ * @param {boolean} useAdoptedStyleSheets A flag to gradually enable testing of adoptedStyleSheets
  */
-function setStreamStyling(stylingContainer, domain, subscription) {
-  if (window.emMessageBus) {
-    const sheet = document.createElement('style');
+function setStreamStyling(stylingContainer, domain, subscription, useAdoptedStyleSheets = false) {
+  if (!window.emMessageBus) return;
 
-    window.emMessageBus.subscribe(domain, (data) => {
-      sheet.innerHTML = data;
-      if (stylingContainer) {
-        stylingContainer.appendChild(sheet);
-      }
-    });
+  const supportAdoptStyle = 'adoptedStyleSheets' in Document.prototype;
+
+  if (!supportAdoptStyle || !useAdoptedStyleSheets) {
+    subscription = getStyleTagSubscription(stylingContainer, domain);
+
+    return subscription;
+  }
+
+  if (!window[StyleCacheKey]) {
+    window[StyleCacheKey] = {};
   }
+  subscription = getAdoptStyleSubscription(stylingContainer, domain);
+
+  const originalUnsubscribe = subscription.unsubscribe.bind(subscription);
+  const wrappedUnsubscribe = () => {
+    if (window[StyleCacheKey][domain]) {
+      const cachedObject = window[StyleCacheKey][domain];
+      cachedObject.refCount > 1
+        ? (cachedObject.refCount = cachedObject.refCount - 1)
+        : delete window[StyleCacheKey][domain];
+    }
+
+    originalUnsubscribe();
+  };
+  subscription.unsubscribe = wrappedUnsubscribe;
+
+  return subscription;
+}
+
+function getStyleTagSubscription(stylingContainer, domain) {
+  const sheet = document.createElement('style');
+
+  return window.emMessageBus.subscribe(domain, (data) => {
+    if (stylingContainer) {
+      sheet.innerHTML = data;
+      stylingContainer.appendChild(sheet);
+    }
+  });
+}
+
+function getAdoptStyleSubscription(stylingContainer, domain) {
+  return window.emMessageBus.subscribe(domain, (data) => {
+    if (!stylingContainer) return;
+
+    const shadowRoot = stylingContainer.getRootNode();
+    const cacheStyleObject = window[StyleCacheKey];
+    let cachedStyle = cacheStyleObject[domain]?.sheet;
+
+    if (!cachedStyle) {
+      cachedStyle = new CSSStyleSheet();
+      cachedStyle.replaceSync(data);
+      cacheStyleObject[domain] = {
+        sheet: cachedStyle,
+        refCount: 1
+      };
+    } else {
+      cacheStyleObject[domain].refCount = cacheStyleObject[domain].refCount + 1;
+    }
+
+    const currentSheets = shadowRoot.adoptedStyleSheets || [];
+    if (!currentSheets.includes(cachedStyle)) {
+      shadowRoot.adoptedStyleSheets = [...currentSheets, cachedStyle];
+    }
+  });
 }
 
 const DEFAULT_LANGUAGE = 'en';
@@ -157,7 +216,7 @@ const LotteryButton = class {
     }
     handleMbSourceChange(newValue, oldValue) {
         if (newValue != oldValue) {
-            setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`);
+            setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`, this.stylingSubscription);
         }
     }
     disconnectedCallback() {
@@ -166,7 +225,7 @@ const LotteryButton = class {
     componentDidLoad() {
         if (this.stylingContainer) {
             if (this.mbSource)
-                setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`);
+                setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`, this.stylingSubscription);
             if (this.clientStyling)
                 setClientStyling(this.stylingContainer, this.clientStyling);
             if (this.clientStylingUrl)

package/dist/cjs/lottery-button.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const lotteryButton = require('./lottery-button-8bebeaec.js');
+const lotteryButton = require('./lottery-button-cd5365f9.js');
 require('./index-7ea2a016.js');
 
 

package/dist/esm/index.js

@@ -1,2 +1,2 @@
-export { L as LotteryButton } from './lottery-button-a45ce58d.js';
+export { L as LotteryButton } from './lottery-button-4ca314fb.js';
 import './index-66798fac.js';

package/dist/esm/{lottery-button-a45ce58d.js → lottery-button-4ca314fb.js}

@@ -1,5 +1,7 @@
 import { r as registerInstance, h, g as getElement } from './index-66798fac.js';
 
+const StyleCacheKey = '__WIDGET_GLOBAL_STYLE_CACHE__';
+
 /**
  * @name setClientStyling
  * @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) {
  * @param {HTMLElement} stylingContainer The highest element of the widget
  * @param {string} domain The domain from where the content should be fetched (e.g. 'Casino.Style', 'App.Style', 'casino-footer.style', etc.)
  * @param {ref} subscription A reference to a variable where the subscription should be saved for unsubscribing when no longer needed
+ * @param {boolean} useAdoptedStyleSheets A flag to gradually enable testing of adoptedStyleSheets
  */
-function setStreamStyling(stylingContainer, domain, subscription) {
-  if (window.emMessageBus) {
-    const sheet = document.createElement('style');
+function setStreamStyling(stylingContainer, domain, subscription, useAdoptedStyleSheets = false) {
+  if (!window.emMessageBus) return;
 
-    window.emMessageBus.subscribe(domain, (data) => {
-      sheet.innerHTML = data;
-      if (stylingContainer) {
-        stylingContainer.appendChild(sheet);
-      }
-    });
+  const supportAdoptStyle = 'adoptedStyleSheets' in Document.prototype;
+
+  if (!supportAdoptStyle || !useAdoptedStyleSheets) {
+    subscription = getStyleTagSubscription(stylingContainer, domain);
+
+    return subscription;
+  }
+
+  if (!window[StyleCacheKey]) {
+    window[StyleCacheKey] = {};
   }
+  subscription = getAdoptStyleSubscription(stylingContainer, domain);
+
+  const originalUnsubscribe = subscription.unsubscribe.bind(subscription);
+  const wrappedUnsubscribe = () => {
+    if (window[StyleCacheKey][domain]) {
+      const cachedObject = window[StyleCacheKey][domain];
+      cachedObject.refCount > 1
+        ? (cachedObject.refCount = cachedObject.refCount - 1)
+        : delete window[StyleCacheKey][domain];
+    }
+
+    originalUnsubscribe();
+  };
+  subscription.unsubscribe = wrappedUnsubscribe;
+
+  return subscription;
+}
+
+function getStyleTagSubscription(stylingContainer, domain) {
+  const sheet = document.createElement('style');
+
+  return window.emMessageBus.subscribe(domain, (data) => {
+    if (stylingContainer) {
+      sheet.innerHTML = data;
+      stylingContainer.appendChild(sheet);
+    }
+  });
+}
+
+function getAdoptStyleSubscription(stylingContainer, domain) {
+  return window.emMessageBus.subscribe(domain, (data) => {
+    if (!stylingContainer) return;
+
+    const shadowRoot = stylingContainer.getRootNode();
+    const cacheStyleObject = window[StyleCacheKey];
+    let cachedStyle = cacheStyleObject[domain]?.sheet;
+
+    if (!cachedStyle) {
+      cachedStyle = new CSSStyleSheet();
+      cachedStyle.replaceSync(data);
+      cacheStyleObject[domain] = {
+        sheet: cachedStyle,
+        refCount: 1
+      };
+    } else {
+      cacheStyleObject[domain].refCount = cacheStyleObject[domain].refCount + 1;
+    }
+
+    const currentSheets = shadowRoot.adoptedStyleSheets || [];
+    if (!currentSheets.includes(cachedStyle)) {
+      shadowRoot.adoptedStyleSheets = [...currentSheets, cachedStyle];
+    }
+  });
 }
 
 const DEFAULT_LANGUAGE = 'en';
@@ -155,7 +214,7 @@ const LotteryButton = class {
     }
     handleMbSourceChange(newValue, oldValue) {
         if (newValue != oldValue) {
-            setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`);
+            setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`, this.stylingSubscription);
         }
     }
     disconnectedCallback() {
@@ -164,7 +223,7 @@ const LotteryButton = class {
     componentDidLoad() {
         if (this.stylingContainer) {
             if (this.mbSource)
-                setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`);
+                setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`, this.stylingSubscription);
             if (this.clientStyling)
                 setClientStyling(this.stylingContainer, this.clientStyling);
             if (this.clientStylingUrl)

package/dist/esm/lottery-button.entry.js

@@ -1,2 +1,2 @@
-export { L as lottery_button } from './lottery-button-a45ce58d.js';
+export { L as lottery_button } from './lottery-button-4ca314fb.js';
 import './index-66798fac.js';

package/dist/lottery-button/index.esm.js

@@ -1 +1 @@
-export{L as LotteryButton}from"./lottery-button-a45ce58d.js";import"./index-66798fac.js";
+export{L as LotteryButton}from"./lottery-button-4ca314fb.js";import"./index-66798fac.js";

package/dist/lottery-button/lottery-button-4ca314fb.js

@@ -0,0 +1 @@
+import{r as t,h as o,g as e}from"./index-66798fac.js";const r="__WIDGET_GLOBAL_STYLE_CACHE__";function n(t,o){if(t){const e=document.createElement("style");e.innerHTML=o,t.appendChild(e)}}function i(t,o){if(!t||!o)return;const e=new URL(o);fetch(e.href).then((t=>t.text())).then((o=>{const e=document.createElement("style");e.innerHTML=o,t&&t.appendChild(e)})).catch((t=>{console.error("There was an error while trying to load client styling from URL",t)}))}function a(t,o,e,n=!1){if(!window.emMessageBus)return;if(!("adoptedStyleSheets"in Document.prototype)||!n)return e=function(t,o){const e=document.createElement("style");return window.emMessageBus.subscribe(o,(o=>{t&&(e.innerHTML=o,t.appendChild(e))}))}(t,o),e;window[r]||(window[r]={}),e=function(t,o){return window.emMessageBus.subscribe(o,(e=>{if(!t)return;const n=t.getRootNode(),i=window[r];let a=i[o]?.sheet;a?i[o].refCount=i[o].refCount+1:(a=new CSSStyleSheet,a.replaceSync(e),i[o]={sheet:a,refCount:1});const l=n.adoptedStyleSheets||[];l.includes(a)||(n.adoptedStyleSheets=[...l,a])}))}(t,o);const i=e.unsubscribe.bind(e);return e.unsubscribe=()=>{if(window[r][o]){const t=window[r][o];t.refCount>1?t.refCount=t.refCount-1:delete window[r][o]}i()},e}const l=["ro","en","fr","ar","hr","zh"],s={en:{loading:"Loading"},ro:{},fr:{},ar:{},hr:{}},d=class{constructor(o){t(this,o),this.handleClick=t=>{if(this.disabled)return;const o=this.host.shadowRoot.querySelector(".btn");if(!o)return;const e=o.getBoundingClientRect(),r=Math.max(e.width,e.height),n={top:t.clientY-e.top-r/2,left:t.clientX-e.left-r/2,size:r};this.ripples=[...this.ripples,n],setTimeout((()=>{this.ripples=this.ripples.filter((t=>t!==n))}),600)},this.variant="primary",this.size="medium",this.color=void 0,this.disabled=!1,this.loading=!1,this.text=void 0,this.mbSource=void 0,this.language="en",this.clientStyling=void 0,this.clientStylingUrl=void 0,this.translationUrl="",this.ripples=[]}handleClientStylingChange(t,o){t!=o&&n(this.stylingContainer,this.clientStyling)}handleClientStylingUrlChange(t,o){t!=o&&i(this.stylingContainer,this.clientStylingUrl)}handleMbSourceChange(t,o){t!=o&&a(this.stylingContainer,`${this.mbSource}.Style`,this.stylingSubscription)}disconnectedCallback(){this.stylingSubscription&&this.stylingSubscription.unsubscribe()}componentDidLoad(){this.stylingContainer&&(this.mbSource&&a(this.stylingContainer,`${this.mbSource}.Style`,this.stylingSubscription),this.clientStyling&&n(this.stylingContainer,this.clientStyling),this.clientStylingUrl&&i(this.stylingContainer,this.clientStylingUrl))}componentWillLoad(){this.translationUrl&&(async t=>{if(t)try{const e=await fetch(t);if(!e.ok)throw new Error(`HTTP error! status: ${e.status}`);const r=await e.json();o=r,Object.keys(o).forEach((t=>{for(let e in o[t])s[t][e]=o[t][e]}))}catch(t){console.error("Failed to fetch or parse translations from URL:",t)}var o})(this.translationUrl)}render(){const{variant:t,disabled:e,size:r,color:n}=this,i=e||this.loading,a={};if(n)switch(t){case"primary":default:Object.assign(a,{backgroundColor:n,borderColor:n});break;case"outline":case"dashed":Object.assign(a,{color:n,borderColor:n});break;case"text":Object.assign(a,{color:n})}return o("button",{key:"aa74ad98c90e7548228557bf8a8d26b125d4a83a",class:{btn:!0,[`btn--${t}`]:!0,[`btn--${r}`]:!0,"btn--loading":this.loading},style:n?a:void 0,disabled:i,onClick:this.handleClick,ref:t=>this.stylingContainer=t},this.loading?o("div",{class:"loading-container"},o("span",{class:"content"},this.text||(()=>{const t=this.language;let o=s[void 0!==t&&l.includes(t)?t:"en"].loading;return o})()),o("span",{class:"spinner"})):o("span",{class:"content"},o("slot",{name:"icon-left"}),this.text||o("slot",null),o("slot",{name:"icon-right"})),o("div",{key:"302ea02be395bb24989d4abc040a513e23fa029a",class:"ripple-container"},this.ripples.map(((t,e)=>o("span",{key:e,class:"ripple",style:{top:`${t.top}px`,left:`${t.left}px`,width:`${t.size}px`,height:`${t.size}px`}})))))}get host(){return e(this)}static get watchers(){return{clientStyling:["handleClientStylingChange"],clientStylingUrl:["handleClientStylingUrlChange"],mbSource:["handleMbSourceChange"]}}};d.style=":host{display:inline-block}.btn{font:inherit;position:relative;display:inline-flex;align-items:center;justify-content:center;border:1px solid transparent;border-radius:var(--lottery-button-border-radius, 6px);font-weight:var(--lottery-button-font-weight, 500);cursor:pointer;outline:none;overflow:hidden;transition:var(--lottery-button-transition, background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s);user-select:none;-webkit-tap-highlight-color:transparent;box-shadow:var(--lottery-button-box-shadow, 0 2px 4px 0 rgba(0, 0, 0, 0.5))}.btn .content{position:relative;display:inline-flex;align-items:center;gap:var(--lottery-button-content-gap, 0.5em)}.btn .content ::slotted(span){display:inline-flex;align-items:center}.btn:hover:not(:disabled){box-shadow:var(--lottery-button-hover-box-shadow, 0 4px 8px 0 rgba(0, 0, 0, 0.5))}.btn:disabled{cursor:not-allowed;opacity:var(--lottery-button-disabled-opacity, 0.5)}.btn .loading-container{display:flex;align-items:center}.btn--loading{position:relative}.btn .spinner{display:inline-block;width:1em;height:1em;border:var(--lottery-button-spinner-border, 2px solid rgba(255, 255, 255, 0.3));border-radius:50%;border-top-color:var(--lottery-button-spinner-color, white);animation:spin 1s ease-in-out infinite;margin-left:0.5em;vertical-align:middle}.btn--small .spinner{width:0.8em;height:0.8em}.btn--large .spinner{width:1.2em;height:1.2em}@keyframes spin{to{transform:rotate(360deg)}}.btn--primary{background-color:var(--emw--color-primary, #0d196e);color:var(--emw--color-typography-inverse, #fff)}.btn--primary:hover:not(:disabled){background-color:var(--emw--color-primary-variant, #1367e7)}.btn--primary:active:not(:disabled){background-color:var(--lottery-button-primary-active-bg, #08104a)}.btn--outline .spinner,.btn--dashed .spinner,.btn--text .spinner{border-top-color:currentColor;border-color:var(--lottery-button-spinner-inverse-border-color, rgba(0, 0, 0, 0.2))}.btn--outline{background-color:var(--emw--color-background, #fff);border-color:var(--lottery-button-outline-border-color, #dcdcdc);color:var(--emw--color-typography, #000)}.btn--outline:hover:not(:disabled){background-color:var(--emw--color-background-tertiary, #ccc);border-color:var(--lottery-button-outline-hover-border-color, #a6a6a6)}.btn--outline:active:not(:disabled){background-color:var(--lottery-button-outline-active-bg, #e6e6e6)}.btn--dashed{background-color:transparent;border-style:dashed;border-color:var(--lottery-button-dashed-border-color, #dcdcdc);color:var(--lottery-button-dashed-color, #333)}.btn--dashed:hover:not(:disabled){border-color:var(--lottery-button-dashed-hover-border-color, #a6a6a6);color:var(--lottery-button-dashed-hover-color, #0052d9)}.btn--text{background-color:transparent;color:var(--lottery-button-text-color, #0052d9);border-color:transparent}.btn--text:hover:not(:disabled){background-color:var(--lottery-button-text-hover-bg, #f2f2f2)}.btn--text:active:not(:disabled){background-color:var(--lottery-button-text-active-bg, #e6e6e6)}.btn--custom-color:hover:not(:disabled){opacity:var(--lottery-button-custom-hover-opacity, 0.9)}.btn--custom-color:active:not(:disabled){opacity:var(--lottery-button-custom-active-opacity, 0.8)}.btn--small{height:var(--lottery-button-small-height, 28px);font-size:var(--lottery-button-small-font-size, 12px);padding:var(--lottery-button-small-padding, 0 12px)}.btn--medium{height:var(--lottery-button-medium-height, 34px);font-size:var(--lottery-button-medium-font-size, 14px);padding:var(--lottery-button-medium-padding, 0 18px)}.btn--large{height:var(--lottery-button-large-height, 40px);font-size:var(--lottery-button-large-font-size, 16px);padding:var(--lottery-button-large-padding, 0 24px)}.ripple-container{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden;pointer-events:none;border-radius:inherit}.ripple{position:absolute;border-radius:50%;background-color:var(--lottery-button-ripple-light, rgba(255, 255, 255, 0.3));transform:scale(0);animation:ripple-animation 600ms linear}.btn--outline .ripple,.btn--dashed .ripple,.btn--text .ripple{background-color:var(--lottery-button-ripple-dark, rgba(0, 0, 0, 0.03))}@keyframes ripple-animation{to{transform:scale(4);opacity:0}}";export{d as L}

package/dist/lottery-button/lottery-button.entry.js

@@ -1 +1 @@
-export{L as lottery_button}from"./lottery-button-a45ce58d.js";import"./index-66798fac.js";
+export{L as lottery_button}from"./lottery-button-4ca314fb.js";import"./index-66798fac.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@everymatrix/lottery-button",
-  "version": "1.87.26",
+  "version": "1.87.28",
   "main": "./dist/index.cjs.js",
   "module": "./dist/index.js",
   "es2015": "./dist/esm/index.mjs",

package/dist/lottery-button/lottery-button-a45ce58d.js

@@ -1 +0,0 @@
-import{r as t,h as o,g as e}from"./index-66798fac.js";function r(t,o){if(t){const e=document.createElement("style");e.innerHTML=o,t.appendChild(e)}}function n(t,o){if(!t||!o)return;const e=new URL(o);fetch(e.href).then((t=>t.text())).then((o=>{const e=document.createElement("style");e.innerHTML=o,t&&t.appendChild(e)})).catch((t=>{console.error("There was an error while trying to load client styling from URL",t)}))}function i(t,o){if(window.emMessageBus){const e=document.createElement("style");window.emMessageBus.subscribe(o,(o=>{e.innerHTML=o,t&&t.appendChild(e)}))}}const a=["ro","en","fr","ar","hr","zh"],l={en:{loading:"Loading"},ro:{},fr:{},ar:{},hr:{}},s=class{constructor(o){t(this,o),this.handleClick=t=>{if(this.disabled)return;const o=this.host.shadowRoot.querySelector(".btn");if(!o)return;const e=o.getBoundingClientRect(),r=Math.max(e.width,e.height),n={top:t.clientY-e.top-r/2,left:t.clientX-e.left-r/2,size:r};this.ripples=[...this.ripples,n],setTimeout((()=>{this.ripples=this.ripples.filter((t=>t!==n))}),600)},this.variant="primary",this.size="medium",this.color=void 0,this.disabled=!1,this.loading=!1,this.text=void 0,this.mbSource=void 0,this.language="en",this.clientStyling=void 0,this.clientStylingUrl=void 0,this.translationUrl="",this.ripples=[]}handleClientStylingChange(t,o){t!=o&&r(this.stylingContainer,this.clientStyling)}handleClientStylingUrlChange(t,o){t!=o&&n(this.stylingContainer,this.clientStylingUrl)}handleMbSourceChange(t,o){t!=o&&i(this.stylingContainer,`${this.mbSource}.Style`)}disconnectedCallback(){this.stylingSubscription&&this.stylingSubscription.unsubscribe()}componentDidLoad(){this.stylingContainer&&(this.mbSource&&i(this.stylingContainer,`${this.mbSource}.Style`),this.clientStyling&&r(this.stylingContainer,this.clientStyling),this.clientStylingUrl&&n(this.stylingContainer,this.clientStylingUrl))}componentWillLoad(){this.translationUrl&&(async t=>{if(t)try{const e=await fetch(t);if(!e.ok)throw new Error(`HTTP error! status: ${e.status}`);const r=await e.json();o=r,Object.keys(o).forEach((t=>{for(let e in o[t])l[t][e]=o[t][e]}))}catch(t){console.error("Failed to fetch or parse translations from URL:",t)}var o})(this.translationUrl)}render(){const{variant:t,disabled:e,size:r,color:n}=this,i=e||this.loading,s={};if(n)switch(t){case"primary":default:Object.assign(s,{backgroundColor:n,borderColor:n});break;case"outline":case"dashed":Object.assign(s,{color:n,borderColor:n});break;case"text":Object.assign(s,{color:n})}return o("button",{key:"aa74ad98c90e7548228557bf8a8d26b125d4a83a",class:{btn:!0,[`btn--${t}`]:!0,[`btn--${r}`]:!0,"btn--loading":this.loading},style:n?s:void 0,disabled:i,onClick:this.handleClick,ref:t=>this.stylingContainer=t},this.loading?o("div",{class:"loading-container"},o("span",{class:"content"},this.text||(()=>{const t=this.language;let o=l[void 0!==t&&a.includes(t)?t:"en"].loading;return o})()),o("span",{class:"spinner"})):o("span",{class:"content"},o("slot",{name:"icon-left"}),this.text||o("slot",null),o("slot",{name:"icon-right"})),o("div",{key:"302ea02be395bb24989d4abc040a513e23fa029a",class:"ripple-container"},this.ripples.map(((t,e)=>o("span",{key:e,class:"ripple",style:{top:`${t.top}px`,left:`${t.left}px`,width:`${t.size}px`,height:`${t.size}px`}})))))}get host(){return e(this)}static get watchers(){return{clientStyling:["handleClientStylingChange"],clientStylingUrl:["handleClientStylingUrlChange"],mbSource:["handleMbSourceChange"]}}};s.style=":host{display:inline-block}.btn{font:inherit;position:relative;display:inline-flex;align-items:center;justify-content:center;border:1px solid transparent;border-radius:var(--lottery-button-border-radius, 6px);font-weight:var(--lottery-button-font-weight, 500);cursor:pointer;outline:none;overflow:hidden;transition:var(--lottery-button-transition, background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s);user-select:none;-webkit-tap-highlight-color:transparent;box-shadow:var(--lottery-button-box-shadow, 0 2px 4px 0 rgba(0, 0, 0, 0.5))}.btn .content{position:relative;display:inline-flex;align-items:center;gap:var(--lottery-button-content-gap, 0.5em)}.btn .content ::slotted(span){display:inline-flex;align-items:center}.btn:hover:not(:disabled){box-shadow:var(--lottery-button-hover-box-shadow, 0 4px 8px 0 rgba(0, 0, 0, 0.5))}.btn:disabled{cursor:not-allowed;opacity:var(--lottery-button-disabled-opacity, 0.5)}.btn .loading-container{display:flex;align-items:center}.btn--loading{position:relative}.btn .spinner{display:inline-block;width:1em;height:1em;border:var(--lottery-button-spinner-border, 2px solid rgba(255, 255, 255, 0.3));border-radius:50%;border-top-color:var(--lottery-button-spinner-color, white);animation:spin 1s ease-in-out infinite;margin-left:0.5em;vertical-align:middle}.btn--small .spinner{width:0.8em;height:0.8em}.btn--large .spinner{width:1.2em;height:1.2em}@keyframes spin{to{transform:rotate(360deg)}}.btn--primary{background-color:var(--emw--color-primary, #0d196e);color:var(--emw--color-typography-inverse, #fff)}.btn--primary:hover:not(:disabled){background-color:var(--emw--color-primary-variant, #1367e7)}.btn--primary:active:not(:disabled){background-color:var(--lottery-button-primary-active-bg, #08104a)}.btn--outline .spinner,.btn--dashed .spinner,.btn--text .spinner{border-top-color:currentColor;border-color:var(--lottery-button-spinner-inverse-border-color, rgba(0, 0, 0, 0.2))}.btn--outline{background-color:var(--emw--color-background, #fff);border-color:var(--lottery-button-outline-border-color, #dcdcdc);color:var(--emw--color-typography, #000)}.btn--outline:hover:not(:disabled){background-color:var(--emw--color-background-tertiary, #ccc);border-color:var(--lottery-button-outline-hover-border-color, #a6a6a6)}.btn--outline:active:not(:disabled){background-color:var(--lottery-button-outline-active-bg, #e6e6e6)}.btn--dashed{background-color:transparent;border-style:dashed;border-color:var(--lottery-button-dashed-border-color, #dcdcdc);color:var(--lottery-button-dashed-color, #333)}.btn--dashed:hover:not(:disabled){border-color:var(--lottery-button-dashed-hover-border-color, #a6a6a6);color:var(--lottery-button-dashed-hover-color, #0052d9)}.btn--text{background-color:transparent;color:var(--lottery-button-text-color, #0052d9);border-color:transparent}.btn--text:hover:not(:disabled){background-color:var(--lottery-button-text-hover-bg, #f2f2f2)}.btn--text:active:not(:disabled){background-color:var(--lottery-button-text-active-bg, #e6e6e6)}.btn--custom-color:hover:not(:disabled){opacity:var(--lottery-button-custom-hover-opacity, 0.9)}.btn--custom-color:active:not(:disabled){opacity:var(--lottery-button-custom-active-opacity, 0.8)}.btn--small{height:var(--lottery-button-small-height, 28px);font-size:var(--lottery-button-small-font-size, 12px);padding:var(--lottery-button-small-padding, 0 12px)}.btn--medium{height:var(--lottery-button-medium-height, 34px);font-size:var(--lottery-button-medium-font-size, 14px);padding:var(--lottery-button-medium-padding, 0 18px)}.btn--large{height:var(--lottery-button-large-height, 40px);font-size:var(--lottery-button-large-font-size, 16px);padding:var(--lottery-button-large-padding, 0 24px)}.ripple-container{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden;pointer-events:none;border-radius:inherit}.ripple{position:absolute;border-radius:50%;background-color:var(--lottery-button-ripple-light, rgba(255, 255, 255, 0.3));transform:scale(0);animation:ripple-animation 600ms linear}.btn--outline .ripple,.btn--dashed .ripple,.btn--text .ripple{background-color:var(--lottery-button-ripple-dark, rgba(0, 0, 0, 0.03))}@keyframes ripple-animation{to{transform:scale(4);opacity:0}}";export{s as L}