@everymatrix/lottery-hakuna-collapse 1.87.26 → 1.87.27

package/dist/cjs/index.cjs.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const lotteryHakunaCollapse = require('./lottery-hakuna-collapse-e91d7dc9.js');
+const lotteryHakunaCollapse = require('./lottery-hakuna-collapse-7e57277d.js');
 require('./index-5647524d.js');
 
 

package/dist/cjs/{lottery-hakuna-collapse-e91d7dc9.js → lottery-hakuna-collapse-7e57277d.js}

@@ -2,6 +2,8 @@
 
 const index = require('./index-5647524d.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 lotteryHakunaCollapseCss = ":host{display:block;width:100%;box-sizing:border-box}.lottery-hakuna-collapse{border:var(--lottery-hakuna-collapse-border-width, 1px) solid transparent;border-radius:var(--lottery-hakuna-collapse-border-radius, 12px);background-origin:border-box;background-clip:padding-box, border-box;background-image:linear-gradient(var(--lottery-hakuna-collapse-bg, #120505), var(--lottery-hakuna-collapse-bg, #120505)), linear-gradient(to top left, var(--lottery-hakuna-collapse-border-gradient-start, #c52217) var(--lottery-hakuna-collapse-border-gradient-start-stop, 32%), var(--lottery-hakuna-collapse-border-gradient-end, #2c2525) var(--lottery-hakuna-collapse-border-gradient-end-stop, 68%));overflow:hidden;margin-bottom:var(--lottery-hakuna-collapse-margin-bottom, 10px)}.lottery-hakuna-collapse .header{display:flex;justify-content:space-between;align-items:center;padding:var(--lottery-hakuna-collapse-header-padding, 20px);cursor:pointer;user-select:none}.lottery-hakuna-collapse .header .header-content{display:flex;align-items:center;flex:1;gap:var(--lottery-hakuna-collapse-header-gap, 8px)}.lottery-hakuna-collapse .header .title{font-size:var(--lottery-hakuna-collapse-title-size, 16px);font-weight:var(--lottery-hakuna-collapse-title-weight, 600);color:var(--lottery-hakuna-collapse-title-color, #fff)}.lottery-hakuna-collapse .header .icon{color:var(--lottery-hakuna-collapse-icon-color, #fff);font-size:var(--lottery-hakuna-collapse-icon-size, 12px);transition:transform 0.3s ease}.lottery-hakuna-collapse .header .icon.is-open{transform:rotate(180deg)}.lottery-hakuna-collapse .content{padding:var(--lottery-hakuna-collapse-content-padding, 0 20px 20px 20px);color:var(--lottery-hakuna-collapse-content-color, #fff);font-size:var(--lottery-hakuna-collapse-content-size, 14px);line-height:var(--lottery-hakuna-collapse-content-line-height, 1.5)}";
@@ -87,7 +146,7 @@ const LotteryHakunaCollapse = class {
     }
     handleMbSourceChange(newValue, oldValue) {
         if (newValue != oldValue) {
-            setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`);
+            setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`, this.stylingSubscription);
         }
     }
     componentWillLoad() {
@@ -99,7 +158,7 @@ const LotteryHakunaCollapse = 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-hakuna-collapse.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const lotteryHakunaCollapse = require('./lottery-hakuna-collapse-e91d7dc9.js');
+const lotteryHakunaCollapse = require('./lottery-hakuna-collapse-7e57277d.js');
 require('./index-5647524d.js');
 
 

package/dist/esm/index.js

@@ -1,2 +1,2 @@
-export { L as LotteryHakunaCollapse } from './lottery-hakuna-collapse-e56904fa.js';
+export { L as LotteryHakunaCollapse } from './lottery-hakuna-collapse-f8b27394.js';
 import './index-af1fac59.js';

package/dist/esm/{lottery-hakuna-collapse-e56904fa.js → lottery-hakuna-collapse-f8b27394.js}

@@ -1,5 +1,7 @@
 import { r as registerInstance, h, g as getElement } from './index-af1fac59.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 lotteryHakunaCollapseCss = ":host{display:block;width:100%;box-sizing:border-box}.lottery-hakuna-collapse{border:var(--lottery-hakuna-collapse-border-width, 1px) solid transparent;border-radius:var(--lottery-hakuna-collapse-border-radius, 12px);background-origin:border-box;background-clip:padding-box, border-box;background-image:linear-gradient(var(--lottery-hakuna-collapse-bg, #120505), var(--lottery-hakuna-collapse-bg, #120505)), linear-gradient(to top left, var(--lottery-hakuna-collapse-border-gradient-start, #c52217) var(--lottery-hakuna-collapse-border-gradient-start-stop, 32%), var(--lottery-hakuna-collapse-border-gradient-end, #2c2525) var(--lottery-hakuna-collapse-border-gradient-end-stop, 68%));overflow:hidden;margin-bottom:var(--lottery-hakuna-collapse-margin-bottom, 10px)}.lottery-hakuna-collapse .header{display:flex;justify-content:space-between;align-items:center;padding:var(--lottery-hakuna-collapse-header-padding, 20px);cursor:pointer;user-select:none}.lottery-hakuna-collapse .header .header-content{display:flex;align-items:center;flex:1;gap:var(--lottery-hakuna-collapse-header-gap, 8px)}.lottery-hakuna-collapse .header .title{font-size:var(--lottery-hakuna-collapse-title-size, 16px);font-weight:var(--lottery-hakuna-collapse-title-weight, 600);color:var(--lottery-hakuna-collapse-title-color, #fff)}.lottery-hakuna-collapse .header .icon{color:var(--lottery-hakuna-collapse-icon-color, #fff);font-size:var(--lottery-hakuna-collapse-icon-size, 12px);transition:transform 0.3s ease}.lottery-hakuna-collapse .header .icon.is-open{transform:rotate(180deg)}.lottery-hakuna-collapse .content{padding:var(--lottery-hakuna-collapse-content-padding, 0 20px 20px 20px);color:var(--lottery-hakuna-collapse-content-color, #fff);font-size:var(--lottery-hakuna-collapse-content-size, 14px);line-height:var(--lottery-hakuna-collapse-content-line-height, 1.5)}";
@@ -85,7 +144,7 @@ const LotteryHakunaCollapse = class {
     }
     handleMbSourceChange(newValue, oldValue) {
         if (newValue != oldValue) {
-            setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`);
+            setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`, this.stylingSubscription);
         }
     }
     componentWillLoad() {
@@ -97,7 +156,7 @@ const LotteryHakunaCollapse = 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-hakuna-collapse.entry.js

@@ -1,2 +1,2 @@
-export { L as lottery_hakuna_collapse } from './lottery-hakuna-collapse-e56904fa.js';
+export { L as lottery_hakuna_collapse } from './lottery-hakuna-collapse-f8b27394.js';
 import './index-af1fac59.js';

package/dist/lottery-hakuna-collapse/index.esm.js

@@ -1 +1 @@
-export{L as LotteryHakunaCollapse}from"./lottery-hakuna-collapse-e56904fa.js";import"./index-af1fac59.js";
+export{L as LotteryHakunaCollapse}from"./lottery-hakuna-collapse-f8b27394.js";import"./index-af1fac59.js";

package/dist/lottery-hakuna-collapse/lottery-hakuna-collapse-f8b27394.js

@@ -0,0 +1 @@
+import{r as e,h as t,g as a}from"./index-af1fac59.js";const n="__WIDGET_GLOBAL_STYLE_CACHE__";function o(e,t){if(e){const a=document.createElement("style");a.innerHTML=t,e.appendChild(a)}}function l(e,t){if(!e||!t)return;const a=new URL(t);fetch(a.href).then((e=>e.text())).then((t=>{const a=document.createElement("style");a.innerHTML=t,e&&e.appendChild(a)})).catch((e=>{console.error("There was an error while trying to load client styling from URL",e)}))}function r(e,t,a,o=!1){if(!window.emMessageBus)return;if(!("adoptedStyleSheets"in Document.prototype)||!o)return a=function(e,t){const a=document.createElement("style");return window.emMessageBus.subscribe(t,(t=>{e&&(a.innerHTML=t,e.appendChild(a))}))}(e,t),a;window[n]||(window[n]={}),a=function(e,t){return window.emMessageBus.subscribe(t,(a=>{if(!e)return;const o=e.getRootNode(),l=window[n];let r=l[t]?.sheet;r?l[t].refCount=l[t].refCount+1:(r=new CSSStyleSheet,r.replaceSync(a),l[t]={sheet:r,refCount:1});const i=o.adoptedStyleSheets||[];i.includes(r)||(o.adoptedStyleSheets=[...i,r])}))}(e,t);const l=a.unsubscribe.bind(a);return a.unsubscribe=()=>{if(window[n][t]){const e=window[n][t];e.refCount>1?e.refCount=e.refCount-1:delete window[n][t]}l()},a}const i=class{constructor(t){e(this,t),this.mbSource=void 0,this.clientStyling=void 0,this.clientStylingUrl=void 0,this.headerTitle="",this.collapsed=!0,this.isOpen=!1,this.hasSummary=!1}handleClientStylingChange(e,t){e!=t&&o(this.stylingContainer,this.clientStyling)}handleClientStylingUrlChange(e,t){e!=t&&l(this.stylingContainer,this.clientStylingUrl)}handleMbSourceChange(e,t){e!=t&&r(this.stylingContainer,`${this.mbSource}.Style`,this.stylingSubscription)}componentWillLoad(){this.isOpen=!this.collapsed}componentWillRender(){this.hasSummary=!!this.el.querySelector('[slot="summary"]')}componentDidLoad(){this.stylingContainer&&(this.mbSource&&r(this.stylingContainer,`${this.mbSource}.Style`,this.stylingSubscription),this.clientStyling&&o(this.stylingContainer,this.clientStyling),this.clientStylingUrl&&l(this.stylingContainer,this.clientStylingUrl))}disconnectedCallback(){this.stylingSubscription&&this.stylingSubscription.unsubscribe()}async toggle(){this.isOpen=!this.isOpen}render(){const e=this.isOpen||this.hasSummary;return t("div",{key:"5e28ba28bf46f6a22f749bbd878aef8972bb7eeb",ref:e=>this.stylingContainer=e,class:"lottery-hakuna-collapse"},t("div",{key:"ec42a23932c7e0652476743c1cafcfe7e411c2aa",class:"header",onClick:()=>this.toggle()},t("div",{key:"152e98bb7fc69274d61ffff0d6de9f76a1df90f8",class:"header-content"},this.headerTitle&&t("span",{key:"0acc51d711ca12fa1a666dbe1678071a37fa0aff",class:"title"},this.headerTitle)),t("span",{key:"ad31e6e3a249a9dca394e725e805422297811f85",class:{icon:!0,"is-open":this.isOpen}},t("svg",{key:"14bc41acc77204fcb1966f8966dc6feb49730518",xmlns:"http://www.w3.org/2000/svg",width:"18",height:"18",viewBox:"0 0 18 18",fill:"none"},t("path",{key:"bac152fc477b275a1792264a35dba2765cf2687f","fill-rule":"evenodd","clip-rule":"evenodd",d:"M3.96967 6.21967C4.26256 5.92678 4.73744 5.92678 5.03033 6.21967L9 10.1893L12.9697 6.21967C13.2626 5.92678 13.7374 5.92678 14.0303 6.21967C14.3232 6.51256 14.3232 6.98744 14.0303 7.28033L9.53033 11.7803C9.23744 12.0732 8.76256 12.0732 8.46967 11.7803L3.96967 7.28033C3.67678 6.98744 3.67678 6.51256 3.96967 6.21967Z",fill:"currentColor"})))),e&&t("div",{key:"0358ec8ccc21286a31f6ffcb770efa6c1bcc36ea",class:"content"},t("slot",this.isOpen?null:{name:"summary"})))}get el(){return a(this)}static get watchers(){return{clientStyling:["handleClientStylingChange"],clientStylingUrl:["handleClientStylingUrlChange"],mbSource:["handleMbSourceChange"]}}};i.style=":host{display:block;width:100%;box-sizing:border-box}.lottery-hakuna-collapse{border:var(--lottery-hakuna-collapse-border-width, 1px) solid transparent;border-radius:var(--lottery-hakuna-collapse-border-radius, 12px);background-origin:border-box;background-clip:padding-box, border-box;background-image:linear-gradient(var(--lottery-hakuna-collapse-bg, #120505), var(--lottery-hakuna-collapse-bg, #120505)), linear-gradient(to top left, var(--lottery-hakuna-collapse-border-gradient-start, #c52217) var(--lottery-hakuna-collapse-border-gradient-start-stop, 32%), var(--lottery-hakuna-collapse-border-gradient-end, #2c2525) var(--lottery-hakuna-collapse-border-gradient-end-stop, 68%));overflow:hidden;margin-bottom:var(--lottery-hakuna-collapse-margin-bottom, 10px)}.lottery-hakuna-collapse .header{display:flex;justify-content:space-between;align-items:center;padding:var(--lottery-hakuna-collapse-header-padding, 20px);cursor:pointer;user-select:none}.lottery-hakuna-collapse .header .header-content{display:flex;align-items:center;flex:1;gap:var(--lottery-hakuna-collapse-header-gap, 8px)}.lottery-hakuna-collapse .header .title{font-size:var(--lottery-hakuna-collapse-title-size, 16px);font-weight:var(--lottery-hakuna-collapse-title-weight, 600);color:var(--lottery-hakuna-collapse-title-color, #fff)}.lottery-hakuna-collapse .header .icon{color:var(--lottery-hakuna-collapse-icon-color, #fff);font-size:var(--lottery-hakuna-collapse-icon-size, 12px);transition:transform 0.3s ease}.lottery-hakuna-collapse .header .icon.is-open{transform:rotate(180deg)}.lottery-hakuna-collapse .content{padding:var(--lottery-hakuna-collapse-content-padding, 0 20px 20px 20px);color:var(--lottery-hakuna-collapse-content-color, #fff);font-size:var(--lottery-hakuna-collapse-content-size, 14px);line-height:var(--lottery-hakuna-collapse-content-line-height, 1.5)}";export{i as L}

package/dist/lottery-hakuna-collapse/lottery-hakuna-collapse.entry.js

@@ -1 +1 @@
-export{L as lottery_hakuna_collapse}from"./lottery-hakuna-collapse-e56904fa.js";import"./index-af1fac59.js";
+export{L as lottery_hakuna_collapse}from"./lottery-hakuna-collapse-f8b27394.js";import"./index-af1fac59.js";

package/package.json

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

package/dist/lottery-hakuna-collapse/lottery-hakuna-collapse-e56904fa.js

@@ -1 +0,0 @@
-import{r as e,h as t,g as a}from"./index-af1fac59.js";function o(e,t){if(e){const a=document.createElement("style");a.innerHTML=t,e.appendChild(a)}}function l(e,t){if(!e||!t)return;const a=new URL(t);fetch(a.href).then((e=>e.text())).then((t=>{const a=document.createElement("style");a.innerHTML=t,e&&e.appendChild(a)})).catch((e=>{console.error("There was an error while trying to load client styling from URL",e)}))}function n(e,t){if(window.emMessageBus){const a=document.createElement("style");window.emMessageBus.subscribe(t,(t=>{a.innerHTML=t,e&&e.appendChild(a)}))}}const r=class{constructor(t){e(this,t),this.mbSource=void 0,this.clientStyling=void 0,this.clientStylingUrl=void 0,this.headerTitle="",this.collapsed=!0,this.isOpen=!1,this.hasSummary=!1}handleClientStylingChange(e,t){e!=t&&o(this.stylingContainer,this.clientStyling)}handleClientStylingUrlChange(e,t){e!=t&&l(this.stylingContainer,this.clientStylingUrl)}handleMbSourceChange(e,t){e!=t&&n(this.stylingContainer,`${this.mbSource}.Style`)}componentWillLoad(){this.isOpen=!this.collapsed}componentWillRender(){this.hasSummary=!!this.el.querySelector('[slot="summary"]')}componentDidLoad(){this.stylingContainer&&(this.mbSource&&n(this.stylingContainer,`${this.mbSource}.Style`),this.clientStyling&&o(this.stylingContainer,this.clientStyling),this.clientStylingUrl&&l(this.stylingContainer,this.clientStylingUrl))}disconnectedCallback(){this.stylingSubscription&&this.stylingSubscription.unsubscribe()}async toggle(){this.isOpen=!this.isOpen}render(){const e=this.isOpen||this.hasSummary;return t("div",{key:"5e28ba28bf46f6a22f749bbd878aef8972bb7eeb",ref:e=>this.stylingContainer=e,class:"lottery-hakuna-collapse"},t("div",{key:"ec42a23932c7e0652476743c1cafcfe7e411c2aa",class:"header",onClick:()=>this.toggle()},t("div",{key:"152e98bb7fc69274d61ffff0d6de9f76a1df90f8",class:"header-content"},this.headerTitle&&t("span",{key:"0acc51d711ca12fa1a666dbe1678071a37fa0aff",class:"title"},this.headerTitle)),t("span",{key:"ad31e6e3a249a9dca394e725e805422297811f85",class:{icon:!0,"is-open":this.isOpen}},t("svg",{key:"14bc41acc77204fcb1966f8966dc6feb49730518",xmlns:"http://www.w3.org/2000/svg",width:"18",height:"18",viewBox:"0 0 18 18",fill:"none"},t("path",{key:"bac152fc477b275a1792264a35dba2765cf2687f","fill-rule":"evenodd","clip-rule":"evenodd",d:"M3.96967 6.21967C4.26256 5.92678 4.73744 5.92678 5.03033 6.21967L9 10.1893L12.9697 6.21967C13.2626 5.92678 13.7374 5.92678 14.0303 6.21967C14.3232 6.51256 14.3232 6.98744 14.0303 7.28033L9.53033 11.7803C9.23744 12.0732 8.76256 12.0732 8.46967 11.7803L3.96967 7.28033C3.67678 6.98744 3.67678 6.51256 3.96967 6.21967Z",fill:"currentColor"})))),e&&t("div",{key:"0358ec8ccc21286a31f6ffcb770efa6c1bcc36ea",class:"content"},t("slot",this.isOpen?null:{name:"summary"})))}get el(){return a(this)}static get watchers(){return{clientStyling:["handleClientStylingChange"],clientStylingUrl:["handleClientStylingUrlChange"],mbSource:["handleMbSourceChange"]}}};r.style=":host{display:block;width:100%;box-sizing:border-box}.lottery-hakuna-collapse{border:var(--lottery-hakuna-collapse-border-width, 1px) solid transparent;border-radius:var(--lottery-hakuna-collapse-border-radius, 12px);background-origin:border-box;background-clip:padding-box, border-box;background-image:linear-gradient(var(--lottery-hakuna-collapse-bg, #120505), var(--lottery-hakuna-collapse-bg, #120505)), linear-gradient(to top left, var(--lottery-hakuna-collapse-border-gradient-start, #c52217) var(--lottery-hakuna-collapse-border-gradient-start-stop, 32%), var(--lottery-hakuna-collapse-border-gradient-end, #2c2525) var(--lottery-hakuna-collapse-border-gradient-end-stop, 68%));overflow:hidden;margin-bottom:var(--lottery-hakuna-collapse-margin-bottom, 10px)}.lottery-hakuna-collapse .header{display:flex;justify-content:space-between;align-items:center;padding:var(--lottery-hakuna-collapse-header-padding, 20px);cursor:pointer;user-select:none}.lottery-hakuna-collapse .header .header-content{display:flex;align-items:center;flex:1;gap:var(--lottery-hakuna-collapse-header-gap, 8px)}.lottery-hakuna-collapse .header .title{font-size:var(--lottery-hakuna-collapse-title-size, 16px);font-weight:var(--lottery-hakuna-collapse-title-weight, 600);color:var(--lottery-hakuna-collapse-title-color, #fff)}.lottery-hakuna-collapse .header .icon{color:var(--lottery-hakuna-collapse-icon-color, #fff);font-size:var(--lottery-hakuna-collapse-icon-size, 12px);transition:transform 0.3s ease}.lottery-hakuna-collapse .header .icon.is-open{transform:rotate(180deg)}.lottery-hakuna-collapse .content{padding:var(--lottery-hakuna-collapse-content-padding, 0 20px 20px 20px);color:var(--lottery-hakuna-collapse-content-color, #fff);font-size:var(--lottery-hakuna-collapse-content-size, 14px);line-height:var(--lottery-hakuna-collapse-content-line-height, 1.5)}";export{r as L}