@everymatrix/helper-tabs 1.87.26 → 1.87.28

package/dist/cjs/helper-tab_2.cjs.entry.js

@@ -76,6 +76,8 @@ const getTranslations = (data) => {
     });
 };
 
+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
@@ -121,18 +123,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 helperTabCss = ":host{display:block}.TabContent{font-size:14px;color:var(--emw--color-typography, #000);font-weight:normal}";
@@ -168,7 +227,7 @@ const HelperTab = class {
     componentDidLoad() {
         if (this.stylingContainer) {
             if (window.emMessageBus != undefined) {
-                setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`);
+                setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`, this.stylingSubscription);
             }
             else {
                 if (this.clientStyling)
@@ -254,7 +313,7 @@ const HelperTabs = class {
     componentDidLoad() {
         if (this.stylingContainer) {
             if (window.emMessageBus != undefined) {
-                setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`);
+                setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`, this.stylingSubscription);
             }
             else {
                 if (this.clientStyling)

package/dist/esm/helper-tab_2.entry.js

@@ -72,6 +72,8 @@ const getTranslations = (data) => {
     });
 };
 
+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
@@ -117,18 +119,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 helperTabCss = ":host{display:block}.TabContent{font-size:14px;color:var(--emw--color-typography, #000);font-weight:normal}";
@@ -164,7 +223,7 @@ const HelperTab = class {
     componentDidLoad() {
         if (this.stylingContainer) {
             if (window.emMessageBus != undefined) {
-                setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`);
+                setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`, this.stylingSubscription);
             }
             else {
                 if (this.clientStyling)
@@ -250,7 +309,7 @@ const HelperTabs = class {
     componentDidLoad() {
         if (this.stylingContainer) {
             if (window.emMessageBus != undefined) {
-                setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`);
+                setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`, this.stylingSubscription);
             }
             else {
                 if (this.clientStyling)

package/dist/helper-tabs/helper-tab_2.entry.js

@@ -1 +1 @@
-import{r as e,h as i,g as t}from"./index-3174302b.js";const o="en",a=["en"],n={en:{howToPlay:"Each play includes one set of numbers from ${lowNumber} to ${highNumber} with a selectable number of ${maxinumAllowed} and a minimum selection of ${minimumAllowed}. The winnings are automatically credited to your account.",register:"Register or Login",butTickets:'Buy tickets. Select "Buy Tickets" to pick your numbers. Want us to automatically generate random numbers for you? Choose “quick pick”.',reviewPurchase:"Review and Complete your purchase. Once you've chosen your total number of plays, and confirmed your number of selections, review your ticket details and complete your purchase!",odds:"What are my odds of winning?",winGame:"How can I find out if I’ve won a draw game?",claimPrize:"How do I claim my prize?"},ro:{howToPlay:"Each play includes one set of numbers from ${lowNumber} to ${highNumber} with a selectable number of ${maxinumAllowed} and a minimum selection of ${minimumAllowed}. The winnings are automatically credited to your account.",register:"Register or Login",butTickets:'Buy tickets. Select "Buy Tickets" to pick your numbers. Want us to automatically generate random numbers for you? Choose “quick pick”.',reviewPurchase:"Review and Complete your purchase. Once you've chosen your total number of plays, and confirmed your number of selections, review your ticket details and complete your purchase!",odds:"What are my odds of winning?",winGame:"How can I find out if I’ve won a draw game?",claimPrize:"How do I claim my prize?"},fr:{howToPlay:"Each play includes one set of numbers from ${lowNumber} to ${highNumber} with a selectable number of ${maxinumAllowed} and a minimum selection of ${minimumAllowed}. The winnings are automatically credited to your account.",register:"Register or Login",butTickets:'Buy tickets. Select "Buy Tickets" to pick your numbers. Want us to automatically generate random numbers for you? Choose “quick pick”.',reviewPurchase:"Review and Complete your purchase. Once you've chosen your total number of plays, and confirmed your number of selections, review your ticket details and complete your purchase!",odds:"What are my odds of winning?",winGame:"How can I find out if I’ve won a draw game?",claimPrize:"How do I claim my prize?"},ar:{howToPlay:"Each play includes one set of numbers from ${lowNumber} to ${highNumber} with a selectable number of ${maxinumAllowed} and a minimum selection of ${minimumAllowed}. The winnings are automatically credited to your account.",register:"Register or Login",butTickets:'Buy tickets. Select "Buy Tickets" to pick your numbers. Want us to automatically generate random numbers for you? Choose “quick pick”.',reviewPurchase:"Review and Complete your purchase. Once you've chosen your total number of plays, and confirmed your number of selections, review your ticket details and complete your purchase!",odds:"What are my odds of winning?",winGame:"How can I find out if I’ve won a draw game?",claimPrize:"How do I claim my prize?"},hr:{howToPlay:"Each play includes one set of numbers from ${lowNumber} to ${highNumber} with a selectable number of ${maxinumAllowed} and a minimum selection of ${minimumAllowed}. The winnings are automatically credited to your account.",register:"Register or Login",butTickets:'Buy tickets. Select "Buy Tickets" to pick your numbers. Want us to automatically generate random numbers for you? Choose “quick pick”.',reviewPurchase:"Review and Complete your purchase. Once you've chosen your total number of plays, and confirmed your number of selections, review your ticket details and complete your purchase!",odds:"What are my odds of winning?",winGame:"How can I find out if I’ve won a draw game?",claimPrize:"How do I claim my prize?"}},s=(e,i)=>{const t=i;return n[void 0!==t&&a.includes(t)?t:o][e]};function r(e,i){if(e){const t=document.createElement("style");t.innerHTML=i,e.appendChild(t)}}function c(e,i){if(!e||!i)return;const t=new URL(i);fetch(t.href).then((e=>e.text())).then((i=>{const t=document.createElement("style");t.innerHTML=i,e&&e.appendChild(t)})).catch((e=>{console.error("There was an error while trying to load client styling from URL",e)}))}function l(e,i){if(window.emMessageBus){const t=document.createElement("style");window.emMessageBus.subscribe(i,(i=>{t.innerHTML=i,e&&e.appendChild(t)}))}}const u=class{constructor(i){e(this,i),this.selectedIndex=0,this.cmsEndpoint=void 0,this.mbSource=void 0,this.clientStyling="",this.clientStylingUrl="",this.lowNumber=void 0,this.highNumber=void 0,this.minimumAllowed=void 0,this.maxinumAllowed=void 0,this.language="en",this.translationUrl=void 0,this.tabContent=""}handleClientStylingChange(e,i){e!=i&&r(this.stylingContainer,this.clientStyling)}handleClientStylingChangeURL(e,i){e!=i&&this.clientStylingUrl&&c(this.stylingContainer,this.clientStylingUrl)}componentDidLoad(){this.stylingContainer&&(null!=window.emMessageBus?l(this.stylingContainer,`${this.mbSource}.Style`):(this.clientStyling&&r(this.stylingContainer,this.clientStyling),this.clientStylingUrl&&c(this.stylingContainer,this.clientStylingUrl)))}disconnectedCallback(){this.stylingSubscription&&this.stylingSubscription.unsubscribe()}componentWillLoad(){var e;this.translationUrl&&(e=JSON.parse(this.translationUrl),Object.keys(e).forEach((i=>{for(let t in e[i])n[i][t]=e[i][t]})))}getHowToPlay(){return this.lowNumber&&this.highNumber&&this.maxinumAllowed&&this.minimumAllowed?((e,i)=>{const t=i.lang;let s=n[void 0!==t&&a.includes(t)?t:o][e];return i?(Object.keys(i).forEach((e=>{s=s.replace(new RegExp("\\${"+e+"}","gm"),i[e])})),s):n[void 0!==t&&a.includes(t)?t:o][e]})("howToPlay",{lowNumber:this.lowNumber,highNumber:this.highNumber,maxinumAllowed:this.maxinumAllowed,minimumAllowed:this.minimumAllowed,lang:this.language}):""}render(){return this.tabContent=i("div",{key:"92877a17361066f68fce6299cb8f65901f6abc60",class:"TabContent",ref:e=>this.stylingContainer=e},this.getHowToPlay()),this.selectedIndex+1==2?this.tabContent=i("div",{key:"9876b9250371034ef40dab0f5fc3fe1a5631a370",class:"TabContent",ref:e=>this.stylingContainer=e},i("ol",{key:"ef2097eb54aeb640f06871277d8cafd2f4455109"},i("li",{key:"e9a0237e1fdead445abcd9240174276ffef81a67"},s("register",this.language)),i("li",{key:"2bdfaffdc9f1a7ae021913cb0ba346132140dcfd"},s("butTickets",this.language)),i("li",{key:"bff38eaeabeaece83dc8ed1697e5b052802753f6"},s("reviewPurchase",this.language)))):this.selectedIndex+1==3&&(this.tabContent=i("div",{key:"49a7fb3435fb50b54572ec38d1e632e2eacf56fb",class:"TabContent",ref:e=>this.stylingContainer=e},i("ul",{key:"7f642625f35a1ed1eae7655144c0b8b1bfe25f55"},i("li",{key:"037a5913be57dd1e2dcde5a061e9c64e70365e8d"},s("odds",this.language)),i("li",{key:"8775a1b2e8eda285e2c248b8d7235f06ac593fc6"},s("winGame",this.language)),i("li",{key:"5297fc5e757c29a1349049f1fe294e926255d518"},s("claimPrize",this.language))))),this.tabContent}static get watchers(){return{clientStyling:["handleClientStylingChange"],clientStylingUrl:["handleClientStylingChangeURL"]}}};u.style=":host{display:block}.TabContent{font-size:14px;color:var(--emw--color-typography, #000);font-weight:normal}";const h=class{constructor(i){e(this,i),this.disabled=!1,this.label=void 0,this.selected=!1,this.cmsEndpoint=void 0,this.selectedIndex=0,this.tabs=[{label:"How to Play"},{label:"About"},{label:"FAQs"}],this.clientStyling="",this.mbSource=void 0,this.clientStylingurl="",this.clientStylingUrl="",this.lowNumber=void 0,this.highNumber=void 0,this.minimumAllowed=void 0,this.maxinumAllowed=void 0,this.language="en",this.translationUrl=void 0}connectedCallback(){}handleClientStylingChange(e,i){e!=i&&r(this.stylingContainer,this.clientStyling)}handleClientStylingChangeURL(e,i){e!=i&&this.clientStylingUrl&&c(this.stylingContainer,this.clientStylingUrl)}componentDidLoad(){this.stylingContainer&&(null!=window.emMessageBus?l(this.stylingContainer,`${this.mbSource}.Style`):(this.clientStyling&&r(this.stylingContainer,this.clientStyling),this.clientStylingUrl&&c(this.stylingContainer,this.clientStylingUrl)))}disconnectedCallback(){this.stylingSubscription&&this.stylingSubscription.unsubscribe()}render(){return i("div",{key:"173c4774748482dc56fcffb4bac4e1666fa9170f",ref:e=>this.stylingContainer=e},i("div",{key:"680b65218e4b00f134b354f593c0c20fb5882dca",class:"Tabs"},this.tabs.map(((e,t)=>i("button",{class:"TabButton"+(this.selectedIndex==t?" Active":""),onClick:()=>this.selectedIndex=t},e.label)))),i("div",{key:"67aa26c92fb416c5d0934988fb071481f805685b"},i("helper-tab",{key:"63c8dfc253d4fc12b0310a2585a44b90807e1a9f","low-number":this.lowNumber,"high-number":this.highNumber,"minimum-allowed":this.minimumAllowed,"maxinum-allowed":this.maxinumAllowed,selectedIndex:this.selectedIndex,"client-styling":this.clientStyling,language:this.language,"translation-url":this.translationUrl,"client-stylingurl":this.clientStylingurl,"client-styling-url-content":this.clientStylingUrl,"mb-source":this.mbSource})))}get host(){return t(this)}static get watchers(){return{clientStyling:["handleClientStylingChange"],clientStylingUrl:["handleClientStylingChangeURL"]}}};h.style='@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap");:host{display:block;font-family:"Roboto", sans-serif}.Tabs{display:flex;gap:10px;overflow-x:auto}.TabButton{cursor:pointer;width:auto;border-radius:var(--emw--button-border-radius, 4px);padding:8px 15px;margin:5px 0 10px;border:1px solid var(--emw--color-primary, #009993);background:var(--emw--color-background, #fff);color:var(--emw--color-typography, #000);font-size:12px;transition:all 0.2s linear;text-align:center;letter-spacing:0;white-space:nowrap}.TabButton:hover{background:var(--emw--color-background-secondary, #f5f5f5)}.TabButton.Active{background:var(--emw--color-primary, #009993);color:var(--emw--color-background, #fff)}';export{u as helper_tab,h as helper_tabs}
+import{r as e,h as t,g as i}from"./index-3174302b.js";const o="en",n=["en"],a={en:{howToPlay:"Each play includes one set of numbers from ${lowNumber} to ${highNumber} with a selectable number of ${maxinumAllowed} and a minimum selection of ${minimumAllowed}. The winnings are automatically credited to your account.",register:"Register or Login",butTickets:'Buy tickets. Select "Buy Tickets" to pick your numbers. Want us to automatically generate random numbers for you? Choose “quick pick”.',reviewPurchase:"Review and Complete your purchase. Once you've chosen your total number of plays, and confirmed your number of selections, review your ticket details and complete your purchase!",odds:"What are my odds of winning?",winGame:"How can I find out if I’ve won a draw game?",claimPrize:"How do I claim my prize?"},ro:{howToPlay:"Each play includes one set of numbers from ${lowNumber} to ${highNumber} with a selectable number of ${maxinumAllowed} and a minimum selection of ${minimumAllowed}. The winnings are automatically credited to your account.",register:"Register or Login",butTickets:'Buy tickets. Select "Buy Tickets" to pick your numbers. Want us to automatically generate random numbers for you? Choose “quick pick”.',reviewPurchase:"Review and Complete your purchase. Once you've chosen your total number of plays, and confirmed your number of selections, review your ticket details and complete your purchase!",odds:"What are my odds of winning?",winGame:"How can I find out if I’ve won a draw game?",claimPrize:"How do I claim my prize?"},fr:{howToPlay:"Each play includes one set of numbers from ${lowNumber} to ${highNumber} with a selectable number of ${maxinumAllowed} and a minimum selection of ${minimumAllowed}. The winnings are automatically credited to your account.",register:"Register or Login",butTickets:'Buy tickets. Select "Buy Tickets" to pick your numbers. Want us to automatically generate random numbers for you? Choose “quick pick”.',reviewPurchase:"Review and Complete your purchase. Once you've chosen your total number of plays, and confirmed your number of selections, review your ticket details and complete your purchase!",odds:"What are my odds of winning?",winGame:"How can I find out if I’ve won a draw game?",claimPrize:"How do I claim my prize?"},ar:{howToPlay:"Each play includes one set of numbers from ${lowNumber} to ${highNumber} with a selectable number of ${maxinumAllowed} and a minimum selection of ${minimumAllowed}. The winnings are automatically credited to your account.",register:"Register or Login",butTickets:'Buy tickets. Select "Buy Tickets" to pick your numbers. Want us to automatically generate random numbers for you? Choose “quick pick”.',reviewPurchase:"Review and Complete your purchase. Once you've chosen your total number of plays, and confirmed your number of selections, review your ticket details and complete your purchase!",odds:"What are my odds of winning?",winGame:"How can I find out if I’ve won a draw game?",claimPrize:"How do I claim my prize?"},hr:{howToPlay:"Each play includes one set of numbers from ${lowNumber} to ${highNumber} with a selectable number of ${maxinumAllowed} and a minimum selection of ${minimumAllowed}. The winnings are automatically credited to your account.",register:"Register or Login",butTickets:'Buy tickets. Select "Buy Tickets" to pick your numbers. Want us to automatically generate random numbers for you? Choose “quick pick”.',reviewPurchase:"Review and Complete your purchase. Once you've chosen your total number of plays, and confirmed your number of selections, review your ticket details and complete your purchase!",odds:"What are my odds of winning?",winGame:"How can I find out if I’ve won a draw game?",claimPrize:"How do I claim my prize?"}},s=(e,t)=>{const i=t;return a[void 0!==i&&n.includes(i)?i:o][e]},r="__WIDGET_GLOBAL_STYLE_CACHE__";function c(e,t){if(e){const i=document.createElement("style");i.innerHTML=t,e.appendChild(i)}}function l(e,t){if(!e||!t)return;const i=new URL(t);fetch(i.href).then((e=>e.text())).then((t=>{const i=document.createElement("style");i.innerHTML=t,e&&e.appendChild(i)})).catch((e=>{console.error("There was an error while trying to load client styling from URL",e)}))}function u(e,t,i,o=!1){if(!window.emMessageBus)return;if(!("adoptedStyleSheets"in Document.prototype)||!o)return i=function(e,t){const i=document.createElement("style");return window.emMessageBus.subscribe(t,(t=>{e&&(i.innerHTML=t,e.appendChild(i))}))}(e,t),i;window[r]||(window[r]={}),i=function(e,t){return window.emMessageBus.subscribe(t,(i=>{if(!e)return;const o=e.getRootNode(),n=window[r];let a=n[t]?.sheet;a?n[t].refCount=n[t].refCount+1:(a=new CSSStyleSheet,a.replaceSync(i),n[t]={sheet:a,refCount:1});const s=o.adoptedStyleSheets||[];s.includes(a)||(o.adoptedStyleSheets=[...s,a])}))}(e,t);const n=i.unsubscribe.bind(i);return i.unsubscribe=()=>{if(window[r][t]){const e=window[r][t];e.refCount>1?e.refCount=e.refCount-1:delete window[r][t]}n()},i}const d=class{constructor(t){e(this,t),this.selectedIndex=0,this.cmsEndpoint=void 0,this.mbSource=void 0,this.clientStyling="",this.clientStylingUrl="",this.lowNumber=void 0,this.highNumber=void 0,this.minimumAllowed=void 0,this.maxinumAllowed=void 0,this.language="en",this.translationUrl=void 0,this.tabContent=""}handleClientStylingChange(e,t){e!=t&&c(this.stylingContainer,this.clientStyling)}handleClientStylingChangeURL(e,t){e!=t&&this.clientStylingUrl&&l(this.stylingContainer,this.clientStylingUrl)}componentDidLoad(){this.stylingContainer&&(null!=window.emMessageBus?u(this.stylingContainer,`${this.mbSource}.Style`,this.stylingSubscription):(this.clientStyling&&c(this.stylingContainer,this.clientStyling),this.clientStylingUrl&&l(this.stylingContainer,this.clientStylingUrl)))}disconnectedCallback(){this.stylingSubscription&&this.stylingSubscription.unsubscribe()}componentWillLoad(){var e;this.translationUrl&&(e=JSON.parse(this.translationUrl),Object.keys(e).forEach((t=>{for(let i in e[t])a[t][i]=e[t][i]})))}getHowToPlay(){return this.lowNumber&&this.highNumber&&this.maxinumAllowed&&this.minimumAllowed?((e,t)=>{const i=t.lang;let s=a[void 0!==i&&n.includes(i)?i:o][e];return t?(Object.keys(t).forEach((e=>{s=s.replace(new RegExp("\\${"+e+"}","gm"),t[e])})),s):a[void 0!==i&&n.includes(i)?i:o][e]})("howToPlay",{lowNumber:this.lowNumber,highNumber:this.highNumber,maxinumAllowed:this.maxinumAllowed,minimumAllowed:this.minimumAllowed,lang:this.language}):""}render(){return this.tabContent=t("div",{key:"92877a17361066f68fce6299cb8f65901f6abc60",class:"TabContent",ref:e=>this.stylingContainer=e},this.getHowToPlay()),this.selectedIndex+1==2?this.tabContent=t("div",{key:"9876b9250371034ef40dab0f5fc3fe1a5631a370",class:"TabContent",ref:e=>this.stylingContainer=e},t("ol",{key:"ef2097eb54aeb640f06871277d8cafd2f4455109"},t("li",{key:"e9a0237e1fdead445abcd9240174276ffef81a67"},s("register",this.language)),t("li",{key:"2bdfaffdc9f1a7ae021913cb0ba346132140dcfd"},s("butTickets",this.language)),t("li",{key:"bff38eaeabeaece83dc8ed1697e5b052802753f6"},s("reviewPurchase",this.language)))):this.selectedIndex+1==3&&(this.tabContent=t("div",{key:"49a7fb3435fb50b54572ec38d1e632e2eacf56fb",class:"TabContent",ref:e=>this.stylingContainer=e},t("ul",{key:"7f642625f35a1ed1eae7655144c0b8b1bfe25f55"},t("li",{key:"037a5913be57dd1e2dcde5a061e9c64e70365e8d"},s("odds",this.language)),t("li",{key:"8775a1b2e8eda285e2c248b8d7235f06ac593fc6"},s("winGame",this.language)),t("li",{key:"5297fc5e757c29a1349049f1fe294e926255d518"},s("claimPrize",this.language))))),this.tabContent}static get watchers(){return{clientStyling:["handleClientStylingChange"],clientStylingUrl:["handleClientStylingChangeURL"]}}};d.style=":host{display:block}.TabContent{font-size:14px;color:var(--emw--color-typography, #000);font-weight:normal}";const h=class{constructor(t){e(this,t),this.disabled=!1,this.label=void 0,this.selected=!1,this.cmsEndpoint=void 0,this.selectedIndex=0,this.tabs=[{label:"How to Play"},{label:"About"},{label:"FAQs"}],this.clientStyling="",this.mbSource=void 0,this.clientStylingurl="",this.clientStylingUrl="",this.lowNumber=void 0,this.highNumber=void 0,this.minimumAllowed=void 0,this.maxinumAllowed=void 0,this.language="en",this.translationUrl=void 0}connectedCallback(){}handleClientStylingChange(e,t){e!=t&&c(this.stylingContainer,this.clientStyling)}handleClientStylingChangeURL(e,t){e!=t&&this.clientStylingUrl&&l(this.stylingContainer,this.clientStylingUrl)}componentDidLoad(){this.stylingContainer&&(null!=window.emMessageBus?u(this.stylingContainer,`${this.mbSource}.Style`,this.stylingSubscription):(this.clientStyling&&c(this.stylingContainer,this.clientStyling),this.clientStylingUrl&&l(this.stylingContainer,this.clientStylingUrl)))}disconnectedCallback(){this.stylingSubscription&&this.stylingSubscription.unsubscribe()}render(){return t("div",{key:"173c4774748482dc56fcffb4bac4e1666fa9170f",ref:e=>this.stylingContainer=e},t("div",{key:"680b65218e4b00f134b354f593c0c20fb5882dca",class:"Tabs"},this.tabs.map(((e,i)=>t("button",{class:"TabButton"+(this.selectedIndex==i?" Active":""),onClick:()=>this.selectedIndex=i},e.label)))),t("div",{key:"67aa26c92fb416c5d0934988fb071481f805685b"},t("helper-tab",{key:"63c8dfc253d4fc12b0310a2585a44b90807e1a9f","low-number":this.lowNumber,"high-number":this.highNumber,"minimum-allowed":this.minimumAllowed,"maxinum-allowed":this.maxinumAllowed,selectedIndex:this.selectedIndex,"client-styling":this.clientStyling,language:this.language,"translation-url":this.translationUrl,"client-stylingurl":this.clientStylingurl,"client-styling-url-content":this.clientStylingUrl,"mb-source":this.mbSource})))}get host(){return i(this)}static get watchers(){return{clientStyling:["handleClientStylingChange"],clientStylingUrl:["handleClientStylingChangeURL"]}}};h.style='@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap");:host{display:block;font-family:"Roboto", sans-serif}.Tabs{display:flex;gap:10px;overflow-x:auto}.TabButton{cursor:pointer;width:auto;border-radius:var(--emw--button-border-radius, 4px);padding:8px 15px;margin:5px 0 10px;border:1px solid var(--emw--color-primary, #009993);background:var(--emw--color-background, #fff);color:var(--emw--color-typography, #000);font-size:12px;transition:all 0.2s linear;text-align:center;letter-spacing:0;white-space:nowrap}.TabButton:hover{background:var(--emw--color-background-secondary, #f5f5f5)}.TabButton.Active{background:var(--emw--color-primary, #009993);color:var(--emw--color-background, #fff)}';export{d as helper_tab,h as helper_tabs}

package/package.json

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