@everymatrix/lottery-button 0.3.26 → 0.3.28

package/dist/cjs/{index-429abf5d.js → index-7ea2a016.js}

@@ -21,7 +21,7 @@ function _interopNamespace(e) {
 }
 
 const NAMESPACE = 'lottery-button';
-const BUILD = /* lottery-button */ { allRenderFn: true, appendChildSlotFix: false, asyncLoading: true, asyncQueue: false, attachStyles: true, cloneNodeFix: false, cmpDidLoad: true, cmpDidRender: false, cmpDidUnload: false, cmpDidUpdate: false, cmpShouldUpdate: false, cmpWillLoad: true, cmpWillRender: false, cmpWillUpdate: false, connectedCallback: false, constructableCSS: true, cssAnnotations: true, devTools: false, disconnectedCallback: true, element: false, event: false, experimentalScopedSlotChanges: false, experimentalSlotFixes: false, formAssociated: false, hasRenderFn: true, hostListener: false, hostListenerTarget: false, hostListenerTargetBody: false, hostListenerTargetDocument: false, hostListenerTargetParent: false, hostListenerTargetWindow: false, hotModuleReplacement: false, hydrateClientSide: false, hydrateServerSide: false, hydratedAttribute: false, hydratedClass: true, hydratedSelectorName: "hydrated", initializeNextTick: false, invisiblePrehydration: true, isDebug: false, isDev: false, isTesting: false, lazyLoad: true, lifecycle: true, lifecycleDOMEvents: false, member: true, method: false, mode: false, observeAttribute: true, profile: false, prop: true, propBoolean: true, propMutable: false, propNumber: false, propString: true, reflect: true, scoped: false, scopedSlotTextContentFix: false, scriptDataOpts: false, shadowDelegatesFocus: false, shadowDom: true, slot: false, slotChildNodesFix: false, slotRelocation: false, state: true, style: true, svg: false, taskQueue: true, transformTagName: false, updatable: true, vdomAttribute: true, vdomClass: true, vdomFunctional: false, vdomKey: true, vdomListener: true, vdomPropOrAttr: true, vdomRef: false, vdomRender: true, vdomStyle: true, vdomText: true, vdomXlink: false, watchCallback: true };
+const BUILD = /* lottery-button */ { allRenderFn: true, appendChildSlotFix: false, asyncLoading: true, asyncQueue: false, attachStyles: true, cloneNodeFix: false, cmpDidLoad: true, cmpDidRender: false, cmpDidUnload: false, cmpDidUpdate: false, cmpShouldUpdate: false, cmpWillLoad: true, cmpWillRender: false, cmpWillUpdate: false, connectedCallback: false, constructableCSS: true, cssAnnotations: true, devTools: false, disconnectedCallback: true, element: false, event: false, experimentalScopedSlotChanges: false, experimentalSlotFixes: false, formAssociated: false, hasRenderFn: true, hostListener: false, hostListenerTarget: false, hostListenerTargetBody: false, hostListenerTargetDocument: false, hostListenerTargetParent: false, hostListenerTargetWindow: false, hotModuleReplacement: false, hydrateClientSide: false, hydrateServerSide: false, hydratedAttribute: false, hydratedClass: true, hydratedSelectorName: "hydrated", initializeNextTick: false, invisiblePrehydration: true, isDebug: false, isDev: false, isTesting: false, lazyLoad: true, lifecycle: true, lifecycleDOMEvents: false, member: true, method: false, mode: false, observeAttribute: true, profile: false, prop: true, propBoolean: true, propMutable: false, propNumber: false, propString: true, reflect: true, scoped: false, scopedSlotTextContentFix: false, scriptDataOpts: false, shadowDelegatesFocus: false, shadowDom: true, slot: true, slotChildNodesFix: false, slotRelocation: false, state: true, style: true, svg: false, taskQueue: true, transformTagName: false, updatable: true, vdomAttribute: true, vdomClass: true, vdomFunctional: false, vdomKey: true, vdomListener: true, vdomPropOrAttr: true, vdomRef: true, vdomRender: true, vdomStyle: true, vdomText: true, vdomXlink: false, watchCallback: true };
 
 /*
  Stencil Client Platform v4.19.2 | MIT Licensed | https://stenciljs.com
@@ -408,7 +408,11 @@ var setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags) => {
           }
         }
       }
-    } else if (memberName === "key") ; else if ((!isProp ) && memberName[0] === "o" && memberName[1] === "n") {
+    } else if (memberName === "key") ; else if (memberName === "ref") {
+      if (newValue) {
+        newValue(elm);
+      }
+    } else if ((!isProp ) && memberName[0] === "o" && memberName[1] === "n") {
       if (memberName[2] === "-") {
         memberName = memberName.slice(3);
       } else if (isMemberInElement(win, ln)) {
@@ -544,6 +548,7 @@ var removeVnodes = (vnodes, startIdx, endIdx) => {
     const vnode = vnodes[index];
     if (vnode) {
       const elm = vnode.$elm$;
+      nullifyVNodeRefs(vnode);
       if (elm) {
         elm.remove();
       }
@@ -647,10 +652,11 @@ var patch = (oldVNode, newVNode2, isInitialRender = false) => {
   const elm = newVNode2.$elm$ = oldVNode.$elm$;
   const oldChildren = oldVNode.$children$;
   const newChildren = newVNode2.$children$;
+  const tag = newVNode2.$tag$;
   const text = newVNode2.$text$;
   if (text === null) {
     {
-      {
+      if (tag === "slot" && !useNativeShadowDom) ; else {
         updateElement(oldVNode, newVNode2, isSvgMode);
       }
     }
@@ -668,6 +674,12 @@ var patch = (oldVNode, newVNode2, isInitialRender = false) => {
     elm.data = text;
   }
 };
+var nullifyVNodeRefs = (vNode) => {
+  {
+    vNode.$attrs$ && vNode.$attrs$.ref && vNode.$attrs$.ref(null);
+    vNode.$children$ && vNode.$children$.map(nullifyVNodeRefs);
+  }
+};
 var insertBefore = (parent, newNode, reference) => {
   const inserted = parent == null ? void 0 : parent.insertBefore(newNode, reference);
   return inserted;

package/dist/cjs/index.cjs.js

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

package/dist/cjs/loader.cjs.js

@@ -2,13 +2,13 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-429abf5d.js');
+const index = require('./index-7ea2a016.js');
 const appGlobals = require('./app-globals-3a1e7e63.js');
 
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;
   await appGlobals.globalScripts();
-  return index.bootstrapLazy([["lottery-button.cjs",[[1,"lottery-button",{"variant":[513],"size":[513],"disabled":[516],"loading":[516],"text":[513],"mbSource":[513,"mb-source"],"language":[513],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"translationUrl":[513,"translation-url"],"ripples":[32]},null,{"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingUrlChange"],"mbSource":["handleMbSourceChange"]}]]]], options);
+  return index.bootstrapLazy([["lottery-button.cjs",[[1,"lottery-button",{"variant":[513],"size":[513],"color":[513],"disabled":[516],"loading":[516],"text":[513],"mbSource":[513,"mb-source"],"language":[513],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"translationUrl":[513,"translation-url"],"ripples":[32]},null,{"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingUrlChange"],"mbSource":["handleMbSourceChange"]}]]]], options);
 };
 
 exports.setNonce = index.setNonce;

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

@@ -1,6 +1,6 @@
 'use strict';
 
-const index = require('./index-429abf5d.js');
+const index = require('./index-7ea2a016.js');
 
 /**
  * @name setClientStyling
@@ -105,7 +105,7 @@ const resolveTranslationUrl = async (translationUrl) => {
     }
 };
 
-const lotteryButtonCss = ":host{display:inline-block;font-family:\"PingFang SC\", \"Microsoft YaHei\", \"Helvetica Neue\", Helvetica, Arial, sans-serif}.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;border:1px solid transparent;border-radius:6px;font-weight:500;cursor:pointer;outline:none;overflow:hidden;transition:background-color 0.2s, border-color 0.2s, color 0.2s;user-select:none;-webkit-tap-highlight-color:transparent}.btn .content{position:relative}.btn:disabled{cursor:not-allowed;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:2px solid rgba(255, 255, 255, 0.3);border-radius:50%;border-top-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:#08104a}.btn--outline .spinner,.btn--dashed .spinner,.btn--text .spinner{border-top-color:currentColor;border-color:rgba(0, 0, 0, 0.2)}.btn--outline{background-color:var(--emw--color-background, #fff);border-color:#dcdcdc;color:var(--emw--color-typography, #000)}.btn--outline:hover:not(:disabled){background-color:var(--emw--color-background-tertiary, #ccc);border-color:#a6a6a6}.btn--outline:active:not(:disabled){background-color:#e6e6e6}.btn--dashed{background-color:transparent;border-style:dashed;border-color:#dcdcdc;color:#333}.btn--dashed:hover:not(:disabled){border-color:#a6a6a6;color:#0052d9}.btn--text{background-color:transparent;color:#0052d9;border-color:transparent}.btn--text:hover:not(:disabled){background-color:#f2f2f2}.btn--text:active:not(:disabled){background-color:#e6e6e6}.btn--small{height:28px;font-size:12px;padding:0 12px}.btn--medium{height:34px;font-size:14px;padding:0 18px}.btn--large{height:40px;font-size:16px;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: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:rgba(0, 0, 0, 0.1)}@keyframes ripple-animation{to{transform:scale(4);opacity:0}}";
+const lotteryButtonCss = ":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}}";
 const LotteryButtonStyle0 = lotteryButtonCss;
 
 const LotteryButton = class {
@@ -134,6 +134,7 @@ const LotteryButton = class {
         };
         this.variant = 'primary';
         this.size = 'medium';
+        this.color = undefined;
         this.disabled = false;
         this.loading = false;
         this.text = undefined;
@@ -178,14 +179,43 @@ const LotteryButton = class {
         }
     }
     render() {
-        const { variant, disabled, size } = this;
+        const { variant, disabled, size, color } = this;
         const isDisabled = disabled || this.loading;
-        return (index.h("button", { key: '19094b8ffd0d13c7e3cdc7139d559214803f0e73', class: {
+        // Calculate styles based on variant and color
+        const buttonStyles = {};
+        if (color) {
+            switch (variant) {
+                case 'primary':
+                    Object.assign(buttonStyles, {
+                        backgroundColor: color,
+                        borderColor: color
+                    });
+                    break;
+                case 'outline':
+                case 'dashed':
+                    Object.assign(buttonStyles, {
+                        color: color,
+                        borderColor: color
+                    });
+                    break;
+                case 'text':
+                    Object.assign(buttonStyles, {
+                        color: color
+                    });
+                    break;
+                default:
+                    Object.assign(buttonStyles, {
+                        backgroundColor: color,
+                        borderColor: color
+                    });
+            }
+        }
+        return (index.h("button", { key: 'aa74ad98c90e7548228557bf8a8d26b125d4a83a', class: {
                 btn: true,
                 [`btn--${variant}`]: true,
                 [`btn--${size}`]: true,
                 'btn--loading': this.loading
-            }, disabled: isDisabled, onClick: this.handleClick }, this.loading ? (index.h("div", { class: "loading-container" }, index.h("span", { class: "content" }, this.text || translate('loading', this.language)), index.h("span", { class: "spinner" }))) : (index.h("span", { class: "content" }, this.text)), index.h("div", { key: 'e7e7542f0b79c5bf8e41969e23dd77d9fdec4462', class: "ripple-container" }, this.ripples.map((ripple, index$1) => (index.h("span", { key: index$1, class: "ripple", style: {
+            }, style: color ? buttonStyles : undefined, disabled: isDisabled, onClick: this.handleClick, ref: (el) => (this.stylingContainer = el) }, this.loading ? (index.h("div", { class: "loading-container" }, index.h("span", { class: "content" }, this.text || translate('loading', this.language)), index.h("span", { class: "spinner" }))) : (index.h("span", { class: "content" }, index.h("slot", { name: "icon-left" }), this.text || index.h("slot", null), index.h("slot", { name: "icon-right" }))), index.h("div", { key: '302ea02be395bb24989d4abc040a513e23fa029a', class: "ripple-container" }, this.ripples.map((ripple, index$1) => (index.h("span", { key: index$1, class: "ripple", style: {
                 top: `${ripple.top}px`,
                 left: `${ripple.left}px`,
                 width: `${ripple.size}px`,

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

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

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-429abf5d.js');
+const index = require('./index-7ea2a016.js');
 const appGlobals = require('./app-globals-3a1e7e63.js');
 
 /*
@@ -19,7 +19,7 @@ var patchBrowser = () => {
 
 patchBrowser().then(async (options) => {
   await appGlobals.globalScripts();
-  return index.bootstrapLazy([["lottery-button.cjs",[[1,"lottery-button",{"variant":[513],"size":[513],"disabled":[516],"loading":[516],"text":[513],"mbSource":[513,"mb-source"],"language":[513],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"translationUrl":[513,"translation-url"],"ripples":[32]},null,{"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingUrlChange"],"mbSource":["handleMbSourceChange"]}]]]], options);
+  return index.bootstrapLazy([["lottery-button.cjs",[[1,"lottery-button",{"variant":[513],"size":[513],"color":[513],"disabled":[516],"loading":[516],"text":[513],"mbSource":[513,"mb-source"],"language":[513],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"translationUrl":[513,"translation-url"],"ripples":[32]},null,{"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingUrlChange"],"mbSource":["handleMbSourceChange"]}]]]], options);
 });
 
 exports.setNonce = index.setNonce;

package/dist/collection/components/lottery-button/lottery-button.css

@@ -1,29 +1,40 @@
 :host {
   display: inline-block;
-  font-family: "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
 }
 
 .btn {
+  font: inherit;
   position: relative;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   border: 1px solid transparent;
-  border-radius: 6px;
-  font-weight: 500;
+  border-radius: var(--lottery-button-border-radius, 6px);
+  font-weight: var(--lottery-button-font-weight, 500);
   cursor: pointer;
   outline: none;
   overflow: hidden;
-  transition: background-color 0.2s, border-color 0.2s, color 0.2s;
+  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: 0.5;
+  opacity: var(--lottery-button-disabled-opacity, 0.5);
 }
 .btn .loading-container {
   display: flex;
@@ -36,9 +47,9 @@
   display: inline-block;
   width: 1em;
   height: 1em;
-  border: 2px solid rgba(255, 255, 255, 0.3);
+  border: var(--lottery-button-spinner-border, 2px solid rgba(255, 255, 255, 0.3));
   border-radius: 50%;
-  border-top-color: white;
+  border-top-color: var(--lottery-button-spinner-color, white);
   animation: spin 1s ease-in-out infinite;
   margin-left: 0.5em;
   vertical-align: middle;
@@ -66,72 +77,80 @@
   background-color: var(--emw--color-primary-variant, #1367e7);
 }
 .btn--primary:active:not(:disabled) {
-  background-color: #08104a;
+  background-color: var(--lottery-button-primary-active-bg, #08104a);
 }
 
 .btn--outline .spinner,
 .btn--dashed .spinner,
 .btn--text .spinner {
   border-top-color: currentColor;
-  border-color: rgba(0, 0, 0, 0.2);
+  border-color: var(--lottery-button-spinner-inverse-border-color, rgba(0, 0, 0, 0.2));
 }
 
 /* Outline Variant */
 .btn--outline {
   background-color: var(--emw--color-background, #fff);
-  border-color: #dcdcdc;
+  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: #a6a6a6;
+  border-color: var(--lottery-button-outline-hover-border-color, #a6a6a6);
 }
 .btn--outline:active:not(:disabled) {
-  background-color: #e6e6e6;
+  background-color: var(--lottery-button-outline-active-bg, #e6e6e6);
 }
 
 /* Dashed Variant */
 .btn--dashed {
   background-color: transparent;
   border-style: dashed;
-  border-color: #dcdcdc;
-  color: #333;
+  border-color: var(--lottery-button-dashed-border-color, #dcdcdc);
+  color: var(--lottery-button-dashed-color, #333);
 }
 .btn--dashed:hover:not(:disabled) {
-  border-color: #a6a6a6;
-  color: #0052d9;
+  border-color: var(--lottery-button-dashed-hover-border-color, #a6a6a6);
+  color: var(--lottery-button-dashed-hover-color, #0052d9);
 }
 
 /* Text Variant */
 .btn--text {
   background-color: transparent;
-  color: #0052d9;
+  color: var(--lottery-button-text-color, #0052d9);
   border-color: transparent;
 }
 .btn--text:hover:not(:disabled) {
-  background-color: #f2f2f2;
+  background-color: var(--lottery-button-text-hover-bg, #f2f2f2);
 }
 .btn--text:active:not(:disabled) {
-  background-color: #e6e6e6;
+  background-color: var(--lottery-button-text-active-bg, #e6e6e6);
+}
+
+/* Custom Color Variant */
+.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);
 }
 
 /* Size Variants */
 .btn--small {
-  height: 28px;
-  font-size: 12px;
-  padding: 0 12px;
+  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: 34px;
-  font-size: 14px;
-  padding: 0 18px;
+  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: 40px;
-  font-size: 16px;
-  padding: 0 24px;
+  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 Effect */
@@ -149,7 +168,7 @@
 .ripple {
   position: absolute;
   border-radius: 50%;
-  background-color: rgba(255, 255, 255, 0.3);
+  background-color: var(--lottery-button-ripple-light, rgba(255, 255, 255, 0.3));
   transform: scale(0);
   animation: ripple-animation 600ms linear;
 }
@@ -157,7 +176,7 @@
 .btn--outline .ripple,
 .btn--dashed .ripple,
 .btn--text .ripple {
-  background-color: rgba(0, 0, 0, 0.1);
+  background-color: var(--lottery-button-ripple-dark, rgba(0, 0, 0, 0.03));
 }
 
 @keyframes ripple-animation {

package/dist/collection/components/lottery-button/lottery-button.js

@@ -26,6 +26,7 @@ export class LotteryButton {
         };
         this.variant = 'primary';
         this.size = 'medium';
+        this.color = undefined;
         this.disabled = false;
         this.loading = false;
         this.text = undefined;
@@ -70,14 +71,43 @@ export class LotteryButton {
         }
     }
     render() {
-        const { variant, disabled, size } = this;
+        const { variant, disabled, size, color } = this;
         const isDisabled = disabled || this.loading;
-        return (h("button", { key: '19094b8ffd0d13c7e3cdc7139d559214803f0e73', class: {
+        // Calculate styles based on variant and color
+        const buttonStyles = {};
+        if (color) {
+            switch (variant) {
+                case 'primary':
+                    Object.assign(buttonStyles, {
+                        backgroundColor: color,
+                        borderColor: color
+                    });
+                    break;
+                case 'outline':
+                case 'dashed':
+                    Object.assign(buttonStyles, {
+                        color: color,
+                        borderColor: color
+                    });
+                    break;
+                case 'text':
+                    Object.assign(buttonStyles, {
+                        color: color
+                    });
+                    break;
+                default:
+                    Object.assign(buttonStyles, {
+                        backgroundColor: color,
+                        borderColor: color
+                    });
+            }
+        }
+        return (h("button", { key: 'aa74ad98c90e7548228557bf8a8d26b125d4a83a', class: {
                 btn: true,
                 [`btn--${variant}`]: true,
                 [`btn--${size}`]: true,
                 'btn--loading': this.loading
-            }, disabled: isDisabled, onClick: this.handleClick }, this.loading ? (h("div", { class: "loading-container" }, h("span", { class: "content" }, this.text || translate('loading', this.language)), h("span", { class: "spinner" }))) : (h("span", { class: "content" }, this.text)), h("div", { key: 'e7e7542f0b79c5bf8e41969e23dd77d9fdec4462', class: "ripple-container" }, this.ripples.map((ripple, index) => (h("span", { key: index, class: "ripple", style: {
+            }, style: color ? buttonStyles : undefined, disabled: isDisabled, onClick: this.handleClick, ref: (el) => (this.stylingContainer = el) }, this.loading ? (h("div", { class: "loading-container" }, h("span", { class: "content" }, this.text || translate('loading', this.language)), h("span", { class: "spinner" }))) : (h("span", { class: "content" }, h("slot", { name: "icon-left" }), this.text || h("slot", null), h("slot", { name: "icon-right" }))), h("div", { key: '302ea02be395bb24989d4abc040a513e23fa029a', class: "ripple-container" }, this.ripples.map((ripple, index) => (h("span", { key: index, class: "ripple", style: {
                 top: `${ripple.top}px`,
                 left: `${ripple.left}px`,
                 width: `${ripple.size}px`,
@@ -146,6 +176,23 @@ export class LotteryButton {
                 "reflect": true,
                 "defaultValue": "'medium'"
             },
+            "color": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The color of the button.\nCan be any valid CSS color value (hex, rgb, rgba, color name, etc.)."
+                },
+                "attribute": "color",
+                "reflect": true
+            },
             "disabled": {
                 "type": "boolean",
                 "mutable": false,

package/dist/esm/{index-020f75bf.js → index-66798fac.js}

@@ -1,5 +1,5 @@
 const NAMESPACE = 'lottery-button';
-const BUILD = /* lottery-button */ { allRenderFn: true, appendChildSlotFix: false, asyncLoading: true, asyncQueue: false, attachStyles: true, cloneNodeFix: false, cmpDidLoad: true, cmpDidRender: false, cmpDidUnload: false, cmpDidUpdate: false, cmpShouldUpdate: false, cmpWillLoad: true, cmpWillRender: false, cmpWillUpdate: false, connectedCallback: false, constructableCSS: true, cssAnnotations: true, devTools: false, disconnectedCallback: true, element: false, event: false, experimentalScopedSlotChanges: false, experimentalSlotFixes: false, formAssociated: false, hasRenderFn: true, hostListener: false, hostListenerTarget: false, hostListenerTargetBody: false, hostListenerTargetDocument: false, hostListenerTargetParent: false, hostListenerTargetWindow: false, hotModuleReplacement: false, hydrateClientSide: false, hydrateServerSide: false, hydratedAttribute: false, hydratedClass: true, hydratedSelectorName: "hydrated", initializeNextTick: false, invisiblePrehydration: true, isDebug: false, isDev: false, isTesting: false, lazyLoad: true, lifecycle: true, lifecycleDOMEvents: false, member: true, method: false, mode: false, observeAttribute: true, profile: false, prop: true, propBoolean: true, propMutable: false, propNumber: false, propString: true, reflect: true, scoped: false, scopedSlotTextContentFix: false, scriptDataOpts: false, shadowDelegatesFocus: false, shadowDom: true, slot: false, slotChildNodesFix: false, slotRelocation: false, state: true, style: true, svg: false, taskQueue: true, transformTagName: false, updatable: true, vdomAttribute: true, vdomClass: true, vdomFunctional: false, vdomKey: true, vdomListener: true, vdomPropOrAttr: true, vdomRef: false, vdomRender: true, vdomStyle: true, vdomText: true, vdomXlink: false, watchCallback: true };
+const BUILD = /* lottery-button */ { allRenderFn: true, appendChildSlotFix: false, asyncLoading: true, asyncQueue: false, attachStyles: true, cloneNodeFix: false, cmpDidLoad: true, cmpDidRender: false, cmpDidUnload: false, cmpDidUpdate: false, cmpShouldUpdate: false, cmpWillLoad: true, cmpWillRender: false, cmpWillUpdate: false, connectedCallback: false, constructableCSS: true, cssAnnotations: true, devTools: false, disconnectedCallback: true, element: false, event: false, experimentalScopedSlotChanges: false, experimentalSlotFixes: false, formAssociated: false, hasRenderFn: true, hostListener: false, hostListenerTarget: false, hostListenerTargetBody: false, hostListenerTargetDocument: false, hostListenerTargetParent: false, hostListenerTargetWindow: false, hotModuleReplacement: false, hydrateClientSide: false, hydrateServerSide: false, hydratedAttribute: false, hydratedClass: true, hydratedSelectorName: "hydrated", initializeNextTick: false, invisiblePrehydration: true, isDebug: false, isDev: false, isTesting: false, lazyLoad: true, lifecycle: true, lifecycleDOMEvents: false, member: true, method: false, mode: false, observeAttribute: true, profile: false, prop: true, propBoolean: true, propMutable: false, propNumber: false, propString: true, reflect: true, scoped: false, scopedSlotTextContentFix: false, scriptDataOpts: false, shadowDelegatesFocus: false, shadowDom: true, slot: true, slotChildNodesFix: false, slotRelocation: false, state: true, style: true, svg: false, taskQueue: true, transformTagName: false, updatable: true, vdomAttribute: true, vdomClass: true, vdomFunctional: false, vdomKey: true, vdomListener: true, vdomPropOrAttr: true, vdomRef: true, vdomRender: true, vdomStyle: true, vdomText: true, vdomXlink: false, watchCallback: true };
 
 /*
  Stencil Client Platform v4.19.2 | MIT Licensed | https://stenciljs.com
@@ -386,7 +386,11 @@ var setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags) => {
           }
         }
       }
-    } else if (memberName === "key") ; else if ((!isProp ) && memberName[0] === "o" && memberName[1] === "n") {
+    } else if (memberName === "key") ; else if (memberName === "ref") {
+      if (newValue) {
+        newValue(elm);
+      }
+    } else if ((!isProp ) && memberName[0] === "o" && memberName[1] === "n") {
       if (memberName[2] === "-") {
         memberName = memberName.slice(3);
       } else if (isMemberInElement(win, ln)) {
@@ -522,6 +526,7 @@ var removeVnodes = (vnodes, startIdx, endIdx) => {
     const vnode = vnodes[index];
     if (vnode) {
       const elm = vnode.$elm$;
+      nullifyVNodeRefs(vnode);
       if (elm) {
         elm.remove();
       }
@@ -625,10 +630,11 @@ var patch = (oldVNode, newVNode2, isInitialRender = false) => {
   const elm = newVNode2.$elm$ = oldVNode.$elm$;
   const oldChildren = oldVNode.$children$;
   const newChildren = newVNode2.$children$;
+  const tag = newVNode2.$tag$;
   const text = newVNode2.$text$;
   if (text === null) {
     {
-      {
+      if (tag === "slot" && !useNativeShadowDom) ; else {
         updateElement(oldVNode, newVNode2, isSvgMode);
       }
     }
@@ -646,6 +652,12 @@ var patch = (oldVNode, newVNode2, isInitialRender = false) => {
     elm.data = text;
   }
 };
+var nullifyVNodeRefs = (vNode) => {
+  {
+    vNode.$attrs$ && vNode.$attrs$.ref && vNode.$attrs$.ref(null);
+    vNode.$children$ && vNode.$children$.map(nullifyVNodeRefs);
+  }
+};
 var insertBefore = (parent, newNode, reference) => {
   const inserted = parent == null ? void 0 : parent.insertBefore(newNode, reference);
   return inserted;

package/dist/esm/index.js

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

package/dist/esm/loader.js

@@ -1,11 +1,11 @@
-import { b as bootstrapLazy } from './index-020f75bf.js';
-export { s as setNonce } from './index-020f75bf.js';
+import { b as bootstrapLazy } from './index-66798fac.js';
+export { s as setNonce } from './index-66798fac.js';
 import { g as globalScripts } from './app-globals-0f993ce5.js';
 
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;
   await globalScripts();
-  return bootstrapLazy([["lottery-button",[[1,"lottery-button",{"variant":[513],"size":[513],"disabled":[516],"loading":[516],"text":[513],"mbSource":[513,"mb-source"],"language":[513],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"translationUrl":[513,"translation-url"],"ripples":[32]},null,{"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingUrlChange"],"mbSource":["handleMbSourceChange"]}]]]], options);
+  return bootstrapLazy([["lottery-button",[[1,"lottery-button",{"variant":[513],"size":[513],"color":[513],"disabled":[516],"loading":[516],"text":[513],"mbSource":[513,"mb-source"],"language":[513],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"translationUrl":[513,"translation-url"],"ripples":[32]},null,{"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingUrlChange"],"mbSource":["handleMbSourceChange"]}]]]], options);
 };
 
 export { defineCustomElements };

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, g as getElement } from './index-020f75bf.js';
+import { r as registerInstance, h, g as getElement } from './index-66798fac.js';
 
 /**
  * @name setClientStyling
@@ -103,7 +103,7 @@ const resolveTranslationUrl = async (translationUrl) => {
     }
 };
 
-const lotteryButtonCss = ":host{display:inline-block;font-family:\"PingFang SC\", \"Microsoft YaHei\", \"Helvetica Neue\", Helvetica, Arial, sans-serif}.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;border:1px solid transparent;border-radius:6px;font-weight:500;cursor:pointer;outline:none;overflow:hidden;transition:background-color 0.2s, border-color 0.2s, color 0.2s;user-select:none;-webkit-tap-highlight-color:transparent}.btn .content{position:relative}.btn:disabled{cursor:not-allowed;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:2px solid rgba(255, 255, 255, 0.3);border-radius:50%;border-top-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:#08104a}.btn--outline .spinner,.btn--dashed .spinner,.btn--text .spinner{border-top-color:currentColor;border-color:rgba(0, 0, 0, 0.2)}.btn--outline{background-color:var(--emw--color-background, #fff);border-color:#dcdcdc;color:var(--emw--color-typography, #000)}.btn--outline:hover:not(:disabled){background-color:var(--emw--color-background-tertiary, #ccc);border-color:#a6a6a6}.btn--outline:active:not(:disabled){background-color:#e6e6e6}.btn--dashed{background-color:transparent;border-style:dashed;border-color:#dcdcdc;color:#333}.btn--dashed:hover:not(:disabled){border-color:#a6a6a6;color:#0052d9}.btn--text{background-color:transparent;color:#0052d9;border-color:transparent}.btn--text:hover:not(:disabled){background-color:#f2f2f2}.btn--text:active:not(:disabled){background-color:#e6e6e6}.btn--small{height:28px;font-size:12px;padding:0 12px}.btn--medium{height:34px;font-size:14px;padding:0 18px}.btn--large{height:40px;font-size:16px;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: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:rgba(0, 0, 0, 0.1)}@keyframes ripple-animation{to{transform:scale(4);opacity:0}}";
+const lotteryButtonCss = ":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}}";
 const LotteryButtonStyle0 = lotteryButtonCss;
 
 const LotteryButton = class {
@@ -132,6 +132,7 @@ const LotteryButton = class {
         };
         this.variant = 'primary';
         this.size = 'medium';
+        this.color = undefined;
         this.disabled = false;
         this.loading = false;
         this.text = undefined;
@@ -176,14 +177,43 @@ const LotteryButton = class {
         }
     }
     render() {
-        const { variant, disabled, size } = this;
+        const { variant, disabled, size, color } = this;
         const isDisabled = disabled || this.loading;
-        return (h("button", { key: '19094b8ffd0d13c7e3cdc7139d559214803f0e73', class: {
+        // Calculate styles based on variant and color
+        const buttonStyles = {};
+        if (color) {
+            switch (variant) {
+                case 'primary':
+                    Object.assign(buttonStyles, {
+                        backgroundColor: color,
+                        borderColor: color
+                    });
+                    break;
+                case 'outline':
+                case 'dashed':
+                    Object.assign(buttonStyles, {
+                        color: color,
+                        borderColor: color
+                    });
+                    break;
+                case 'text':
+                    Object.assign(buttonStyles, {
+                        color: color
+                    });
+                    break;
+                default:
+                    Object.assign(buttonStyles, {
+                        backgroundColor: color,
+                        borderColor: color
+                    });
+            }
+        }
+        return (h("button", { key: 'aa74ad98c90e7548228557bf8a8d26b125d4a83a', class: {
                 btn: true,
                 [`btn--${variant}`]: true,
                 [`btn--${size}`]: true,
                 'btn--loading': this.loading
-            }, disabled: isDisabled, onClick: this.handleClick }, this.loading ? (h("div", { class: "loading-container" }, h("span", { class: "content" }, this.text || translate('loading', this.language)), h("span", { class: "spinner" }))) : (h("span", { class: "content" }, this.text)), h("div", { key: 'e7e7542f0b79c5bf8e41969e23dd77d9fdec4462', class: "ripple-container" }, this.ripples.map((ripple, index) => (h("span", { key: index, class: "ripple", style: {
+            }, style: color ? buttonStyles : undefined, disabled: isDisabled, onClick: this.handleClick, ref: (el) => (this.stylingContainer = el) }, this.loading ? (h("div", { class: "loading-container" }, h("span", { class: "content" }, this.text || translate('loading', this.language)), h("span", { class: "spinner" }))) : (h("span", { class: "content" }, h("slot", { name: "icon-left" }), this.text || h("slot", null), h("slot", { name: "icon-right" }))), h("div", { key: '302ea02be395bb24989d4abc040a513e23fa029a', class: "ripple-container" }, this.ripples.map((ripple, index) => (h("span", { key: index, class: "ripple", style: {
                 top: `${ripple.top}px`,
                 left: `${ripple.left}px`,
                 width: `${ripple.size}px`,

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

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

package/dist/esm/lottery-button.js

@@ -1,5 +1,5 @@
-import { p as promiseResolve, b as bootstrapLazy } from './index-020f75bf.js';
-export { s as setNonce } from './index-020f75bf.js';
+import { p as promiseResolve, b as bootstrapLazy } from './index-66798fac.js';
+export { s as setNonce } from './index-66798fac.js';
 import { g as globalScripts } from './app-globals-0f993ce5.js';
 
 /*
@@ -16,5 +16,5 @@ var patchBrowser = () => {
 
 patchBrowser().then(async (options) => {
   await globalScripts();
-  return bootstrapLazy([["lottery-button",[[1,"lottery-button",{"variant":[513],"size":[513],"disabled":[516],"loading":[516],"text":[513],"mbSource":[513,"mb-source"],"language":[513],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"translationUrl":[513,"translation-url"],"ripples":[32]},null,{"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingUrlChange"],"mbSource":["handleMbSourceChange"]}]]]], options);
+  return bootstrapLazy([["lottery-button",[[1,"lottery-button",{"variant":[513],"size":[513],"color":[513],"disabled":[516],"loading":[516],"text":[513],"mbSource":[513,"mb-source"],"language":[513],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"translationUrl":[513,"translation-url"],"ripples":[32]},null,{"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingUrlChange"],"mbSource":["handleMbSourceChange"]}]]]], options);
 });

package/dist/lottery-button/index-66798fac.js

@@ -0,0 +1,2 @@
+var e=Object.defineProperty,t=new WeakMap,n=e=>t.get(e),l=(e,n)=>t.set(n.t=e,n),o=(e,t)=>t in e,s=(e,t)=>(0,console.error)(e,t),r=new Map,i=new Map,c="slot-fb{display:contents}slot-fb[hidden]{display:none}",u="undefined"!=typeof window?window:{},a=u.document||{head:{}},f={l:0,o:"",jmp:e=>e(),raf:e=>requestAnimationFrame(e),ael:(e,t,n,l)=>e.addEventListener(t,n,l),rel:(e,t,n,l)=>e.removeEventListener(t,n,l),ce:(e,t)=>new CustomEvent(e,t)},h=e=>Promise.resolve(e),d=(()=>{try{return new CSSStyleSheet,"function"==typeof(new CSSStyleSheet).replaceSync}catch(e){}return!1})(),p=!1,m=[],y=[],$=(e,t)=>n=>{e.push(n),p||(p=!0,t&&4&f.l?v(b):f.raf(b))},w=e=>{for(let t=0;t<e.length;t++)try{e[t](performance.now())}catch(e){s(e)}e.length=0},b=()=>{w(m),w(y),(p=m.length>0)&&f.raf(b)},v=e=>h().then(e),g=$(y,!0),S={},j=e=>"object"==(e=typeof e)||"function"===e;function k(e){var t,n,l;return null!=(l=null==(n=null==(t=e.head)?void 0:t.querySelector('meta[name="csp-nonce"]'))?void 0:n.getAttribute("content"))?l:void 0}((t,n)=>{for(var l in n)e(t,l,{get:n[l],enumerable:!0})})({},{err:()=>E,map:()=>C,ok:()=>O,unwrap:()=>P,unwrapErr:()=>L});var O=e=>({isOk:!0,isErr:!1,value:e}),E=e=>({isOk:!1,isErr:!0,value:e});function C(e,t){if(e.isOk){const n=t(e.value);return n instanceof Promise?n.then((e=>O(e))):O(n)}if(e.isErr)return E(e.value);throw"should never get here"}var M,x,P=e=>{if(e.isOk)return e.value;throw e.value},L=e=>{if(e.isErr)return e.value;throw e.value},R=(e,t,...n)=>{let l=null,o=null,s=!1,r=!1;const i=[],c=t=>{for(let n=0;n<t.length;n++)l=t[n],Array.isArray(l)?c(l):null!=l&&"boolean"!=typeof l&&((s="function"!=typeof e&&!j(l))&&(l+=""),s&&r?i[i.length-1].i+=l:i.push(s?T(null,l):l),r=s)};if(c(n),t){t.key&&(o=t.key);{const e=t.className||t.class;e&&(t.class="object"!=typeof e?e:Object.keys(e).filter((t=>e[t])).join(" "))}}const u=T(e,null);return u.u=t,i.length>0&&(u.h=i),u.p=o,u},T=(e,t)=>({l:0,m:e,i:t,$:null,h:null,u:null,p:null}),A={},N=e=>n(e).$hostElement$,U=new WeakMap,W=e=>"sc-"+e.v,D=(e,t,n,l,s,r)=>{if(n!==l){let i=o(e,t),c=t.toLowerCase();if("class"===t){const t=e.classList,o=H(n),s=H(l);t.remove(...o.filter((e=>e&&!s.includes(e)))),t.add(...s.filter((e=>e&&!o.includes(e))))}else if("style"===t){for(const t in n)l&&null!=l[t]||(t.includes("-")?e.style.removeProperty(t):e.style[t]="");for(const t in l)n&&l[t]===n[t]||(t.includes("-")?e.style.setProperty(t,l[t]):e.style[t]=l[t])}else if("key"===t);else if("ref"===t)l&&l(e);else if(i||"o"!==t[0]||"n"!==t[1]){const o=j(l);if((i||o&&null!==l)&&!s)try{if(e.tagName.includes("-"))e[t]=l;else{const o=null==l?"":l;"list"===t?i=!1:null!=n&&e[t]==o||(e[t]=o)}}catch(e){}null==l||!1===l?!1===l&&""!==e.getAttribute(t)||e.removeAttribute(t):(!i||4&r||s)&&!o&&e.setAttribute(t,l=!0===l?"":l)}else if(t="-"===t[2]?t.slice(3):o(u,c)?c.slice(2):c[2]+t.slice(3),n||l){const o=t.endsWith(q);t=t.replace(G,""),n&&f.rel(e,t,n,o),l&&f.ael(e,t,l,o)}}},F=/\s/,H=e=>e?e.split(F):[],q="Capture",G=RegExp(q+"$"),V=(e,t,n)=>{const l=11===t.$.nodeType&&t.$.host?t.$.host:t.$,o=e&&e.u||S,s=t.u||S;for(const e of _(Object.keys(o)))e in s||D(l,e,o[e],void 0,n,t.l);for(const e of _(Object.keys(s)))D(l,e,o[e],s[e],n,t.l)};function _(e){return e.includes("ref")?[...e.filter((e=>"ref"!==e)),"ref"]:e}var z=!1,B=!1,I=(e,t,n)=>{const l=t.h[n];let o,s,r=0;if(null!==l.i)o=l.$=a.createTextNode(l.i);else if(o=l.$=a.createElement(l.m),V(null,l,B),null!=M&&o["s-si"]!==M&&o.classList.add(o["s-si"]=M),l.h)for(r=0;r<l.h.length;++r)s=I(e,l,r),s&&o.appendChild(s);return o["s-hn"]=x,o},J=(e,t,n,l,o,s)=>{let r,i=e;for(i.shadowRoot&&i.tagName===x&&(i=i.shadowRoot);o<=s;++o)l[o]&&(r=I(null,n,o),r&&(l[o].$=r,Z(i,r,t)))},K=(e,t,n)=>{for(let l=t;l<=n;++l){const t=e[l];if(t){const e=t.$;Y(t),e&&e.remove()}}},Q=(e,t,n=!1)=>e.m===t.m&&(!!n||e.p===t.p),X=(e,t,n=!1)=>{const l=t.$=e.$,o=e.h,s=t.h,r=t.i;null===r?(("slot"!==t.m||z)&&V(e,t,B),null!==o&&null!==s?((e,t,n,l,o=!1)=>{let s,r,i=0,c=0,u=0,a=0,f=t.length-1,h=t[0],d=t[f],p=l.length-1,m=l[0],y=l[p];for(;i<=f&&c<=p;)if(null==h)h=t[++i];else if(null==d)d=t[--f];else if(null==m)m=l[++c];else if(null==y)y=l[--p];else if(Q(h,m,o))X(h,m,o),h=t[++i],m=l[++c];else if(Q(d,y,o))X(d,y,o),d=t[--f],y=l[--p];else if(Q(h,y,o))X(h,y,o),Z(e,h.$,d.$.nextSibling),h=t[++i],y=l[--p];else if(Q(d,m,o))X(d,m,o),Z(e,d.$,h.$),d=t[--f],m=l[++c];else{for(u=-1,a=i;a<=f;++a)if(t[a]&&null!==t[a].p&&t[a].p===m.p){u=a;break}u>=0?(r=t[u],r.m!==m.m?s=I(t&&t[c],n,u):(X(r,m,o),t[u]=void 0,s=r.$),m=l[++c]):(s=I(t&&t[c],n,c),m=l[++c]),s&&Z(h.$.parentNode,s,h.$)}i>f?J(e,null==l[p+1]?null:l[p+1].$,n,l,c,p):c>p&&K(t,i,f)})(l,o,t,s,n):null!==s?(null!==e.i&&(l.textContent=""),J(l,null,t,s,0,s.length-1)):null!==o&&K(o,0,o.length-1)):e.i!==r&&(l.data=r)},Y=e=>{e.u&&e.u.ref&&e.u.ref(null),e.h&&e.h.map(Y)},Z=(e,t,n)=>null==e?void 0:e.insertBefore(t,n),ee=(e,t)=>{t&&!e.S&&t["s-p"]&&t["s-p"].push(new Promise((t=>e.S=t)))},te=(e,t)=>{if(e.l|=16,!(4&e.l))return ee(e,e.j),g((()=>ne(e,t)));e.l|=512},ne=(e,t)=>{const n=e.t;if(!n)throw Error(`Can't render component <${e.$hostElement$.tagName.toLowerCase()} /> with invalid Stencil runtime! Make sure this imported component is compiled with a \`externalRuntime: true\` flag. For more information, please refer to https://stenciljs.com/docs/custom-elements#externalruntime`);let l;return t&&(l=ue(n,"componentWillLoad")),le(l,(()=>se(e,n,t)))},le=(e,t)=>oe(e)?e.then(t).catch((e=>{console.error(e),t()})):t(),oe=e=>e instanceof Promise||e&&e.then&&"function"==typeof e.then,se=async(e,t,n)=>{var l;const o=e.$hostElement$,s=o["s-rc"];n&&(e=>{const t=e.k,n=e.$hostElement$,l=t.l,o=((e,t)=>{var n;const l=W(t),o=i.get(l);if(e=11===e.nodeType?e:a,o)if("string"==typeof o){let s,r=U.get(e=e.head||e);if(r||U.set(e,r=new Set),!r.has(l)){{s=a.createElement("style"),s.innerHTML=o;const t=null!=(n=f.O)?n:k(a);null!=t&&s.setAttribute("nonce",t),e.insertBefore(s,e.querySelector("link"))}4&t.l&&(s.innerHTML+=c),r&&r.add(l)}}else e.adoptedStyleSheets.includes(o)||(e.adoptedStyleSheets=[...e.adoptedStyleSheets,o]);return l})(n.shadowRoot?n.shadowRoot:n.getRootNode(),t);10&l&&(n["s-sc"]=o,n.classList.add(o+"-h"))})(e);re(e,t,o,n),s&&(s.map((e=>e())),o["s-rc"]=void 0);{const t=null!=(l=o["s-p"])?l:[],n=()=>ie(e);0===t.length?n():(Promise.all(t).then(n),e.l|=4,t.length=0)}},re=(e,t,n,l)=>{try{t=t.render(),e.l&=-17,e.l|=2,((e,t,n=!1)=>{const l=e.$hostElement$,o=e.k,s=e.C||T(null,null),r=(e=>e&&e.m===A)(t)?t:R(null,null,t);if(x=l.tagName,o.M&&(r.u=r.u||{},o.M.map((([e,t])=>r.u[t]=l[e]))),n&&r.u)for(const e of Object.keys(r.u))l.hasAttribute(e)&&!["key","ref","style","class"].includes(e)&&(r.u[e]=l[e]);r.m=null,r.l|=4,e.C=r,r.$=s.$=l.shadowRoot||l,M=l["s-sc"],z=!!(1&o.l),X(s,r,n)})(e,t,l)}catch(t){s(t,e.$hostElement$)}return null},ie=e=>{const t=e.$hostElement$,n=e.t,l=e.j;64&e.l||(e.l|=64,ae(t),ue(n,"componentDidLoad"),e.P(t),l||ce()),e.S&&(e.S(),e.S=void 0),512&e.l&&v((()=>te(e,!1))),e.l&=-517},ce=()=>{ae(a.documentElement),v((()=>(e=>{const t=f.ce("appload",{detail:{namespace:"lottery-button"}});return e.dispatchEvent(t),t})(u)))},ue=(e,t,n)=>{if(e&&e[t])try{return e[t](n)}catch(e){s(e)}},ae=e=>e.classList.add("hydrated"),fe=(e,t,l)=>{var o,r;const i=e.prototype;if(t.L||t.R||e.watchers){e.watchers&&!t.R&&(t.R=e.watchers);const c=Object.entries(null!=(o=t.L)?o:{});if(c.map((([e,[o]])=>{(31&o||2&l&&32&o)&&Object.defineProperty(i,e,{get(){return((e,t)=>n(this).T.get(t))(0,e)},set(l){((e,t,l,o)=>{const r=n(e);if(!r)throw Error(`Couldn't find host element for "${o.v}" as it is unknown to this Stencil runtime. This usually happens when integrating a 3rd party Stencil component with another Stencil component or application. Please reach out to the maintainers of the 3rd party Stencil component or report this on the Stencil Discord server (https://chat.stenciljs.com) or comment on this similar [GitHub issue](https://github.com/ionic-team/stencil/issues/5457).`);const i=r.$hostElement$,c=r.T.get(t),u=r.l,a=r.t;if(l=((e,t)=>null==e||j(e)?e:4&t?"false"!==e&&(""===e||!!e):1&t?e+"":e)(l,o.L[t][0]),(!(8&u)||void 0===c)&&l!==c&&(!Number.isNaN(c)||!Number.isNaN(l))&&(r.T.set(t,l),a)){if(o.R&&128&u){const e=o.R[t];e&&e.map((e=>{try{a[e](l,c,t)}catch(e){s(e,i)}}))}2==(18&u)&&te(r,!1)}})(this,e,l,t)},configurable:!0,enumerable:!0})})),1&l){const l=new Map;i.attributeChangedCallback=function(e,o,s){f.jmp((()=>{var r;const c=l.get(e);if(this.hasOwnProperty(c))s=this[c],delete this[c];else{if(i.hasOwnProperty(c)&&"number"==typeof this[c]&&this[c]==s)return;if(null==c){const l=n(this),i=null==l?void 0:l.l;if(i&&!(8&i)&&128&i&&s!==o){const n=l.t,i=null==(r=t.R)?void 0:r[e];null==i||i.forEach((t=>{null!=n[t]&&n[t].call(n,s,o,e)}))}return}}this[c]=(null!==s||"boolean"!=typeof this[c])&&s}))},e.observedAttributes=Array.from(new Set([...Object.keys(null!=(r=t.R)?r:{}),...c.filter((([e,t])=>15&t[0])).map((([e,n])=>{var o;const s=n[1]||e;return l.set(s,e),512&n[0]&&(null==(o=t.M)||o.push([e,s])),s}))]))}}return e},he=e=>{ue(e,"disconnectedCallback")},de=(e,l={})=>{var o;const h=[],p=l.exclude||[],m=u.customElements,y=a.head,$=y.querySelector("meta[charset]"),w=a.createElement("style"),b=[];let v,g=!0;Object.assign(f,l),f.o=new URL(l.resourcesUrl||"./",a.baseURI).href;let S=!1;if(e.map((e=>{e[1].map((l=>{var o;const c={l:l[0],v:l[1],L:l[2],A:l[3]};4&c.l&&(S=!0),c.L=l[2],c.M=[],c.R=null!=(o=l[4])?o:{};const u=c.v,a=class extends HTMLElement{constructor(e){if(super(e),this.hasRegisteredEventListeners=!1,((e,n)=>{const l={l:0,$hostElement$:e,k:n,T:new Map};l.N=new Promise((e=>l.P=e)),e["s-p"]=[],e["s-rc"]=[],t.set(e,l)})(e=this,c),1&c.l)if(e.shadowRoot){if("open"!==e.shadowRoot.mode)throw Error(`Unable to re-use existing shadow root for ${c.v}! Mode is set to ${e.shadowRoot.mode} but Stencil only supports open shadow roots.`)}else e.attachShadow({mode:"open"})}connectedCallback(){this.hasRegisteredEventListeners||(this.hasRegisteredEventListeners=!0),v&&(clearTimeout(v),v=null),g?b.push(this):f.jmp((()=>(e=>{if(!(1&f.l)){const t=n(e),l=t.k,o=()=>{};if(1&t.l)(null==t?void 0:t.t)||(null==t?void 0:t.N)&&t.N.then((()=>{}));else{t.l|=1;{let n=e;for(;n=n.parentNode||n.host;)if(n["s-p"]){ee(t,t.j=n);break}}l.L&&Object.entries(l.L).map((([t,[n]])=>{if(31&n&&e.hasOwnProperty(t)){const n=e[t];delete e[t],e[t]=n}})),(async(e,t,n)=>{let l;if(!(32&t.l)){if(t.l|=32,n.U){const e=(e=>{const t=e.v.replace(/-/g,"_"),n=e.U;if(!n)return;const l=r.get(n);return l?l[t]:import(`./${n}.entry.js`).then((e=>(r.set(n,e),e[t])),s)
+/*!__STENCIL_STATIC_IMPORT_SWITCH__*/})(n);if(e&&"then"in e){const t=()=>{};l=await e,t()}else l=e;if(!l)throw Error(`Constructor for "${n.v}#${t.W}" was not found`);l.isProxied||(n.R=l.watchers,fe(l,n,2),l.isProxied=!0);const o=()=>{};t.l|=8;try{new l(t)}catch(e){s(e)}t.l&=-9,t.l|=128,o()}else l=e.constructor,customElements.whenDefined(e.localName).then((()=>t.l|=128));if(l&&l.style){let e;"string"==typeof l.style&&(e=l.style);const t=W(n);if(!i.has(t)){const l=()=>{};((e,t,n)=>{let l=i.get(e);d&&n?(l=l||new CSSStyleSheet,"string"==typeof l?l=t:l.replaceSync(t)):l=t,i.set(e,l)})(t,e,!!(1&n.l)),l()}}}const o=t.j,c=()=>te(t,!0);o&&o["s-rc"]?o["s-rc"].push(c):c()})(e,t,l)}o()}})(this)))}disconnectedCallback(){f.jmp((()=>(async()=>{if(!(1&f.l)){const e=n(this);(null==e?void 0:e.t)?he(e.t):(null==e?void 0:e.N)&&e.N.then((()=>he(e.t)))}})()))}componentOnReady(){return n(this).N}};c.U=e[0],p.includes(u)||m.get(u)||(h.push(u),m.define(u,fe(a,c,1)))}))})),h.length>0&&(S&&(w.textContent+=c),w.textContent+=h.sort()+"{visibility:hidden}.hydrated{visibility:inherit}",w.innerHTML.length)){w.setAttribute("data-styles","");const e=null!=(o=f.O)?o:k(a);null!=e&&w.setAttribute("nonce",e),y.insertBefore(w,$?$.nextSibling:y.firstChild)}g=!1,b.length?b.map((e=>e.connectedCallback())):f.jmp((()=>v=setTimeout(ce,30)))},pe=e=>f.O=e;export{de as b,N as g,R as h,h as p,l as r,pe as s}

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

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

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

@@ -0,0 +1 @@
+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}

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

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

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

@@ -1 +1 @@
-import{p as t,b as n}from"./index-020f75bf.js";export{s as setNonce}from"./index-020f75bf.js";import{g as l}from"./app-globals-0f993ce5.js";(()=>{const n=import.meta.url,l={};return""!==n&&(l.resourcesUrl=new URL(".",n).href),t(l)})().then((async t=>(await l(),n([["lottery-button",[[1,"lottery-button",{variant:[513],size:[513],disabled:[516],loading:[516],text:[513],mbSource:[513,"mb-source"],language:[513],clientStyling:[513,"client-styling"],clientStylingUrl:[513,"client-styling-url"],translationUrl:[513,"translation-url"],ripples:[32]},null,{clientStyling:["handleClientStylingChange"],clientStylingUrl:["handleClientStylingUrlChange"],mbSource:["handleMbSourceChange"]}]]]],t))));
+import{p as t,b as n}from"./index-66798fac.js";export{s as setNonce}from"./index-66798fac.js";import{g as l}from"./app-globals-0f993ce5.js";(()=>{const n=import.meta.url,l={};return""!==n&&(l.resourcesUrl=new URL(".",n).href),t(l)})().then((async t=>(await l(),n([["lottery-button",[[1,"lottery-button",{variant:[513],size:[513],color:[513],disabled:[516],loading:[516],text:[513],mbSource:[513,"mb-source"],language:[513],clientStyling:[513,"client-styling"],clientStylingUrl:[513,"client-styling-url"],translationUrl:[513,"translation-url"],ripples:[32]},null,{clientStyling:["handleClientStylingChange"],clientStylingUrl:["handleClientStylingUrlChange"],mbSource:["handleMbSourceChange"]}]]]],t))));

package/dist/types/components/lottery-button/lottery-button.d.ts

@@ -12,6 +12,11 @@ export declare class LotteryButton {
      * Can be 'small', 'medium', or 'large'.
      */
     size: ButtonSize;
+    /**
+     * The color of the button.
+     * Can be any valid CSS color value (hex, rgb, rgba, color name, etc.).
+     */
+    color: string;
     /**
      * If `true`, the user cannot interact with the button.
      */

package/dist/types/components.d.ts

@@ -11,6 +11,10 @@ export namespace Components {
     interface LotteryButton {
         "clientStyling": string;
         "clientStylingUrl": string;
+        /**
+          * The color of the button. Can be any valid CSS color value (hex, rgb, rgba, color name, etc.).
+         */
+        "color": string;
         /**
           * If `true`, the user cannot interact with the button.
          */
@@ -45,6 +49,10 @@ declare namespace LocalJSX {
     interface LotteryButton {
         "clientStyling"?: string;
         "clientStylingUrl"?: string;
+        /**
+          * The color of the button. Can be any valid CSS color value (hex, rgb, rgba, color name, etc.).
+         */
+        "color"?: string;
         /**
           * If `true`, the user cannot interact with the button.
          */

package/package.json

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

package/dist/lottery-button/index-020f75bf.js

@@ -1,2 +0,0 @@
-var e=Object.defineProperty,t=new WeakMap,n=e=>t.get(e),l=(e,n)=>t.set(n.t=e,n),o=(e,t)=>t in e,s=(e,t)=>(0,console.error)(e,t),r=new Map,i=new Map,c="slot-fb{display:contents}slot-fb[hidden]{display:none}",u="undefined"!=typeof window?window:{},a=u.document||{head:{}},f={l:0,o:"",jmp:e=>e(),raf:e=>requestAnimationFrame(e),ael:(e,t,n,l)=>e.addEventListener(t,n,l),rel:(e,t,n,l)=>e.removeEventListener(t,n,l),ce:(e,t)=>new CustomEvent(e,t)},h=e=>Promise.resolve(e),d=(()=>{try{return new CSSStyleSheet,"function"==typeof(new CSSStyleSheet).replaceSync}catch(e){}return!1})(),p=!1,m=[],y=[],$=(e,t)=>n=>{e.push(n),p||(p=!0,t&&4&f.l?v(b):f.raf(b))},w=e=>{for(let t=0;t<e.length;t++)try{e[t](performance.now())}catch(e){s(e)}e.length=0},b=()=>{w(m),w(y),(p=m.length>0)&&f.raf(b)},v=e=>h().then(e),g=$(y,!0),S={},j=e=>"object"==(e=typeof e)||"function"===e;function k(e){var t,n,l;return null!=(l=null==(n=null==(t=e.head)?void 0:t.querySelector('meta[name="csp-nonce"]'))?void 0:n.getAttribute("content"))?l:void 0}((t,n)=>{for(var l in n)e(t,l,{get:n[l],enumerable:!0})})({},{err:()=>E,map:()=>C,ok:()=>O,unwrap:()=>P,unwrapErr:()=>L});var O=e=>({isOk:!0,isErr:!1,value:e}),E=e=>({isOk:!1,isErr:!0,value:e});function C(e,t){if(e.isOk){const n=t(e.value);return n instanceof Promise?n.then((e=>O(e))):O(n)}if(e.isErr)return E(e.value);throw"should never get here"}var M,x,P=e=>{if(e.isOk)return e.value;throw e.value},L=e=>{if(e.isErr)return e.value;throw e.value},R=(e,t,...n)=>{let l=null,o=null,s=!1,r=!1;const i=[],c=t=>{for(let n=0;n<t.length;n++)l=t[n],Array.isArray(l)?c(l):null!=l&&"boolean"!=typeof l&&((s="function"!=typeof e&&!j(l))&&(l+=""),s&&r?i[i.length-1].i+=l:i.push(s?T(null,l):l),r=s)};if(c(n),t){t.key&&(o=t.key);{const e=t.className||t.class;e&&(t.class="object"!=typeof e?e:Object.keys(e).filter((t=>e[t])).join(" "))}}const u=T(e,null);return u.u=t,i.length>0&&(u.h=i),u.p=o,u},T=(e,t)=>({l:0,m:e,i:t,$:null,h:null,u:null,p:null}),A={},N=e=>n(e).$hostElement$,U=new WeakMap,W=e=>"sc-"+e.v,D=(e,t,n,l,s,r)=>{if(n!==l){let i=o(e,t),c=t.toLowerCase();if("class"===t){const t=e.classList,o=H(n),s=H(l);t.remove(...o.filter((e=>e&&!s.includes(e)))),t.add(...s.filter((e=>e&&!o.includes(e))))}else if("style"===t){for(const t in n)l&&null!=l[t]||(t.includes("-")?e.style.removeProperty(t):e.style[t]="");for(const t in l)n&&l[t]===n[t]||(t.includes("-")?e.style.setProperty(t,l[t]):e.style[t]=l[t])}else if("key"===t);else if(i||"o"!==t[0]||"n"!==t[1]){const o=j(l);if((i||o&&null!==l)&&!s)try{if(e.tagName.includes("-"))e[t]=l;else{const o=null==l?"":l;"list"===t?i=!1:null!=n&&e[t]==o||(e[t]=o)}}catch(e){}null==l||!1===l?!1===l&&""!==e.getAttribute(t)||e.removeAttribute(t):(!i||4&r||s)&&!o&&e.setAttribute(t,l=!0===l?"":l)}else if(t="-"===t[2]?t.slice(3):o(u,c)?c.slice(2):c[2]+t.slice(3),n||l){const o=t.endsWith(q);t=t.replace(G,""),n&&f.rel(e,t,n,o),l&&f.ael(e,t,l,o)}}},F=/\s/,H=e=>e?e.split(F):[],q="Capture",G=RegExp(q+"$"),V=(e,t,n)=>{const l=11===t.$.nodeType&&t.$.host?t.$.host:t.$,o=e&&e.u||S,s=t.u||S;for(const e of _(Object.keys(o)))e in s||D(l,e,o[e],void 0,n,t.l);for(const e of _(Object.keys(s)))D(l,e,o[e],s[e],n,t.l)};function _(e){return e.includes("ref")?[...e.filter((e=>"ref"!==e)),"ref"]:e}var z=!1,B=(e,t,n)=>{const l=t.h[n];let o,s,r=0;if(null!==l.i)o=l.$=a.createTextNode(l.i);else if(o=l.$=a.createElement(l.m),V(null,l,z),null!=M&&o["s-si"]!==M&&o.classList.add(o["s-si"]=M),l.h)for(r=0;r<l.h.length;++r)s=B(e,l,r),s&&o.appendChild(s);return o["s-hn"]=x,o},I=(e,t,n,l,o,s)=>{let r,i=e;for(i.shadowRoot&&i.tagName===x&&(i=i.shadowRoot);o<=s;++o)l[o]&&(r=B(null,n,o),r&&(l[o].$=r,X(i,r,t)))},J=(e,t,n)=>{for(let l=t;l<=n;++l){const t=e[l];if(t){const e=t.$;e&&e.remove()}}},K=(e,t,n=!1)=>e.m===t.m&&(!!n||e.p===t.p),Q=(e,t,n=!1)=>{const l=t.$=e.$,o=e.h,s=t.h,r=t.i;null===r?(V(e,t,z),null!==o&&null!==s?((e,t,n,l,o=!1)=>{let s,r,i=0,c=0,u=0,a=0,f=t.length-1,h=t[0],d=t[f],p=l.length-1,m=l[0],y=l[p];for(;i<=f&&c<=p;)if(null==h)h=t[++i];else if(null==d)d=t[--f];else if(null==m)m=l[++c];else if(null==y)y=l[--p];else if(K(h,m,o))Q(h,m,o),h=t[++i],m=l[++c];else if(K(d,y,o))Q(d,y,o),d=t[--f],y=l[--p];else if(K(h,y,o))Q(h,y,o),X(e,h.$,d.$.nextSibling),h=t[++i],y=l[--p];else if(K(d,m,o))Q(d,m,o),X(e,d.$,h.$),d=t[--f],m=l[++c];else{for(u=-1,a=i;a<=f;++a)if(t[a]&&null!==t[a].p&&t[a].p===m.p){u=a;break}u>=0?(r=t[u],r.m!==m.m?s=B(t&&t[c],n,u):(Q(r,m,o),t[u]=void 0,s=r.$),m=l[++c]):(s=B(t&&t[c],n,c),m=l[++c]),s&&X(h.$.parentNode,s,h.$)}i>f?I(e,null==l[p+1]?null:l[p+1].$,n,l,c,p):c>p&&J(t,i,f)})(l,o,t,s,n):null!==s?(null!==e.i&&(l.textContent=""),I(l,null,t,s,0,s.length-1)):null!==o&&J(o,0,o.length-1)):e.i!==r&&(l.data=r)},X=(e,t,n)=>null==e?void 0:e.insertBefore(t,n),Y=(e,t)=>{t&&!e.S&&t["s-p"]&&t["s-p"].push(new Promise((t=>e.S=t)))},Z=(e,t)=>{if(e.l|=16,!(4&e.l))return Y(e,e.j),g((()=>ee(e,t)));e.l|=512},ee=(e,t)=>{const n=e.t;if(!n)throw Error(`Can't render component <${e.$hostElement$.tagName.toLowerCase()} /> with invalid Stencil runtime! Make sure this imported component is compiled with a \`externalRuntime: true\` flag. For more information, please refer to https://stenciljs.com/docs/custom-elements#externalruntime`);let l;return t&&(l=ie(n,"componentWillLoad")),te(l,(()=>le(e,n,t)))},te=(e,t)=>ne(e)?e.then(t).catch((e=>{console.error(e),t()})):t(),ne=e=>e instanceof Promise||e&&e.then&&"function"==typeof e.then,le=async(e,t,n)=>{var l;const o=e.$hostElement$,s=o["s-rc"];n&&(e=>{const t=e.k,n=e.$hostElement$,l=t.l,o=((e,t)=>{var n;const l=W(t),o=i.get(l);if(e=11===e.nodeType?e:a,o)if("string"==typeof o){let s,r=U.get(e=e.head||e);if(r||U.set(e,r=new Set),!r.has(l)){{s=a.createElement("style"),s.innerHTML=o;const t=null!=(n=f.O)?n:k(a);null!=t&&s.setAttribute("nonce",t),e.insertBefore(s,e.querySelector("link"))}4&t.l&&(s.innerHTML+=c),r&&r.add(l)}}else e.adoptedStyleSheets.includes(o)||(e.adoptedStyleSheets=[...e.adoptedStyleSheets,o]);return l})(n.shadowRoot?n.shadowRoot:n.getRootNode(),t);10&l&&(n["s-sc"]=o,n.classList.add(o+"-h"))})(e);oe(e,t,o,n),s&&(s.map((e=>e())),o["s-rc"]=void 0);{const t=null!=(l=o["s-p"])?l:[],n=()=>se(e);0===t.length?n():(Promise.all(t).then(n),e.l|=4,t.length=0)}},oe=(e,t,n,l)=>{try{t=t.render(),e.l&=-17,e.l|=2,((e,t,n=!1)=>{const l=e.$hostElement$,o=e.k,s=e.C||T(null,null),r=(e=>e&&e.m===A)(t)?t:R(null,null,t);if(x=l.tagName,o.M&&(r.u=r.u||{},o.M.map((([e,t])=>r.u[t]=l[e]))),n&&r.u)for(const e of Object.keys(r.u))l.hasAttribute(e)&&!["key","ref","style","class"].includes(e)&&(r.u[e]=l[e]);r.m=null,r.l|=4,e.C=r,r.$=s.$=l.shadowRoot||l,M=l["s-sc"],Q(s,r,n)})(e,t,l)}catch(t){s(t,e.$hostElement$)}return null},se=e=>{const t=e.$hostElement$,n=e.t,l=e.j;64&e.l||(e.l|=64,ce(t),ie(n,"componentDidLoad"),e.P(t),l||re()),e.S&&(e.S(),e.S=void 0),512&e.l&&v((()=>Z(e,!1))),e.l&=-517},re=()=>{ce(a.documentElement),v((()=>(e=>{const t=f.ce("appload",{detail:{namespace:"lottery-button"}});return e.dispatchEvent(t),t})(u)))},ie=(e,t,n)=>{if(e&&e[t])try{return e[t](n)}catch(e){s(e)}},ce=e=>e.classList.add("hydrated"),ue=(e,t,l)=>{var o,r;const i=e.prototype;if(t.L||t.R||e.watchers){e.watchers&&!t.R&&(t.R=e.watchers);const c=Object.entries(null!=(o=t.L)?o:{});if(c.map((([e,[o]])=>{(31&o||2&l&&32&o)&&Object.defineProperty(i,e,{get(){return((e,t)=>n(this).T.get(t))(0,e)},set(l){((e,t,l,o)=>{const r=n(e);if(!r)throw Error(`Couldn't find host element for "${o.v}" as it is unknown to this Stencil runtime. This usually happens when integrating a 3rd party Stencil component with another Stencil component or application. Please reach out to the maintainers of the 3rd party Stencil component or report this on the Stencil Discord server (https://chat.stenciljs.com) or comment on this similar [GitHub issue](https://github.com/ionic-team/stencil/issues/5457).`);const i=r.$hostElement$,c=r.T.get(t),u=r.l,a=r.t;if(l=((e,t)=>null==e||j(e)?e:4&t?"false"!==e&&(""===e||!!e):1&t?e+"":e)(l,o.L[t][0]),(!(8&u)||void 0===c)&&l!==c&&(!Number.isNaN(c)||!Number.isNaN(l))&&(r.T.set(t,l),a)){if(o.R&&128&u){const e=o.R[t];e&&e.map((e=>{try{a[e](l,c,t)}catch(e){s(e,i)}}))}2==(18&u)&&Z(r,!1)}})(this,e,l,t)},configurable:!0,enumerable:!0})})),1&l){const l=new Map;i.attributeChangedCallback=function(e,o,s){f.jmp((()=>{var r;const c=l.get(e);if(this.hasOwnProperty(c))s=this[c],delete this[c];else{if(i.hasOwnProperty(c)&&"number"==typeof this[c]&&this[c]==s)return;if(null==c){const l=n(this),i=null==l?void 0:l.l;if(i&&!(8&i)&&128&i&&s!==o){const n=l.t,i=null==(r=t.R)?void 0:r[e];null==i||i.forEach((t=>{null!=n[t]&&n[t].call(n,s,o,e)}))}return}}this[c]=(null!==s||"boolean"!=typeof this[c])&&s}))},e.observedAttributes=Array.from(new Set([...Object.keys(null!=(r=t.R)?r:{}),...c.filter((([e,t])=>15&t[0])).map((([e,n])=>{var o;const s=n[1]||e;return l.set(s,e),512&n[0]&&(null==(o=t.M)||o.push([e,s])),s}))]))}}return e},ae=e=>{ie(e,"disconnectedCallback")},fe=(e,l={})=>{var o;const h=[],p=l.exclude||[],m=u.customElements,y=a.head,$=y.querySelector("meta[charset]"),w=a.createElement("style"),b=[];let v,g=!0;Object.assign(f,l),f.o=new URL(l.resourcesUrl||"./",a.baseURI).href;let S=!1;if(e.map((e=>{e[1].map((l=>{var o;const c={l:l[0],v:l[1],L:l[2],A:l[3]};4&c.l&&(S=!0),c.L=l[2],c.M=[],c.R=null!=(o=l[4])?o:{};const u=c.v,a=class extends HTMLElement{constructor(e){if(super(e),this.hasRegisteredEventListeners=!1,((e,n)=>{const l={l:0,$hostElement$:e,k:n,T:new Map};l.N=new Promise((e=>l.P=e)),e["s-p"]=[],e["s-rc"]=[],t.set(e,l)})(e=this,c),1&c.l)if(e.shadowRoot){if("open"!==e.shadowRoot.mode)throw Error(`Unable to re-use existing shadow root for ${c.v}! Mode is set to ${e.shadowRoot.mode} but Stencil only supports open shadow roots.`)}else e.attachShadow({mode:"open"})}connectedCallback(){this.hasRegisteredEventListeners||(this.hasRegisteredEventListeners=!0),v&&(clearTimeout(v),v=null),g?b.push(this):f.jmp((()=>(e=>{if(!(1&f.l)){const t=n(e),l=t.k,o=()=>{};if(1&t.l)(null==t?void 0:t.t)||(null==t?void 0:t.N)&&t.N.then((()=>{}));else{t.l|=1;{let n=e;for(;n=n.parentNode||n.host;)if(n["s-p"]){Y(t,t.j=n);break}}l.L&&Object.entries(l.L).map((([t,[n]])=>{if(31&n&&e.hasOwnProperty(t)){const n=e[t];delete e[t],e[t]=n}})),(async(e,t,n)=>{let l;if(!(32&t.l)){if(t.l|=32,n.U){const e=(e=>{const t=e.v.replace(/-/g,"_"),n=e.U;if(!n)return;const l=r.get(n);return l?l[t]:import(`./${n}.entry.js`).then((e=>(r.set(n,e),e[t])),s)
-/*!__STENCIL_STATIC_IMPORT_SWITCH__*/})(n);if(e&&"then"in e){const t=()=>{};l=await e,t()}else l=e;if(!l)throw Error(`Constructor for "${n.v}#${t.W}" was not found`);l.isProxied||(n.R=l.watchers,ue(l,n,2),l.isProxied=!0);const o=()=>{};t.l|=8;try{new l(t)}catch(e){s(e)}t.l&=-9,t.l|=128,o()}else l=e.constructor,customElements.whenDefined(e.localName).then((()=>t.l|=128));if(l&&l.style){let e;"string"==typeof l.style&&(e=l.style);const t=W(n);if(!i.has(t)){const l=()=>{};((e,t,n)=>{let l=i.get(e);d&&n?(l=l||new CSSStyleSheet,"string"==typeof l?l=t:l.replaceSync(t)):l=t,i.set(e,l)})(t,e,!!(1&n.l)),l()}}}const o=t.j,c=()=>Z(t,!0);o&&o["s-rc"]?o["s-rc"].push(c):c()})(e,t,l)}o()}})(this)))}disconnectedCallback(){f.jmp((()=>(async()=>{if(!(1&f.l)){const e=n(this);(null==e?void 0:e.t)?ae(e.t):(null==e?void 0:e.N)&&e.N.then((()=>ae(e.t)))}})()))}componentOnReady(){return n(this).N}};c.U=e[0],p.includes(u)||m.get(u)||(h.push(u),m.define(u,ue(a,c,1)))}))})),h.length>0&&(S&&(w.textContent+=c),w.textContent+=h.sort()+"{visibility:hidden}.hydrated{visibility:inherit}",w.innerHTML.length)){w.setAttribute("data-styles","");const e=null!=(o=f.O)?o:k(a);null!=e&&w.setAttribute("nonce",e),y.insertBefore(w,$?$.nextSibling:y.firstChild)}g=!1,b.length?b.map((e=>e.connectedCallback())):f.jmp((()=>v=setTimeout(re,30)))},he=e=>f.O=e;export{fe as b,N as g,R as h,h as p,l as r,he as s}

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

@@ -1 +0,0 @@
-import{r as t,h as e,g as n}from"./index-020f75bf.js";function o(t,e){if(t){const n=document.createElement("style");n.innerHTML=e,t.appendChild(n)}}function i(t,e){if(!t||!e)return;const n=new URL(e);fetch(n.href).then((t=>t.text())).then((e=>{const n=document.createElement("style");n.innerHTML=e,t&&t.appendChild(n)})).catch((t=>{console.error("There was an error while trying to load client styling from URL",t)}))}function r(t,e){if(window.emMessageBus){const n=document.createElement("style");window.emMessageBus.subscribe(e,(e=>{n.innerHTML=e,t&&t.appendChild(n)}))}}const a=["ro","en","fr","ar","hr","zh"],s={en:{loading:"Loading"},ro:{},fr:{},ar:{},hr:{}},l=class{constructor(e){t(this,e),this.handleClick=t=>{if(this.disabled)return;const e=this.host.shadowRoot.querySelector(".btn");if(!e)return;const n=e.getBoundingClientRect(),o=Math.max(n.width,n.height),i={top:t.clientY-n.top-o/2,left:t.clientX-n.left-o/2,size:o};this.ripples=[...this.ripples,i],setTimeout((()=>{this.ripples=this.ripples.filter((t=>t!==i))}),600)},this.variant="primary",this.size="medium",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,e){t!=e&&o(this.stylingContainer,this.clientStyling)}handleClientStylingUrlChange(t,e){t!=e&&i(this.stylingContainer,this.clientStylingUrl)}handleMbSourceChange(t,e){t!=e&&r(this.stylingContainer,`${this.mbSource}.Style`)}disconnectedCallback(){this.stylingSubscription&&this.stylingSubscription.unsubscribe()}componentDidLoad(){this.stylingContainer&&(this.mbSource&&r(this.stylingContainer,`${this.mbSource}.Style`),this.clientStyling&&o(this.stylingContainer,this.clientStyling),this.clientStylingUrl&&i(this.stylingContainer,this.clientStylingUrl))}componentWillLoad(){this.translationUrl&&(async t=>{if(t)try{const n=await fetch(t);if(!n.ok)throw new Error(`HTTP error! status: ${n.status}`);const o=await n.json();e=o,Object.keys(e).forEach((t=>{for(let n in e[t])s[t][n]=e[t][n]}))}catch(t){console.error("Failed to fetch or parse translations from URL:",t)}var e})(this.translationUrl)}render(){const{variant:t,disabled:n,size:o}=this,i=n||this.loading;return e("button",{key:"19094b8ffd0d13c7e3cdc7139d559214803f0e73",class:{btn:!0,[`btn--${t}`]:!0,[`btn--${o}`]:!0,"btn--loading":this.loading},disabled:i,onClick:this.handleClick},this.loading?e("div",{class:"loading-container"},e("span",{class:"content"},this.text||(()=>{const t=this.language;let e=s[void 0!==t&&a.includes(t)?t:"en"].loading;return e})()),e("span",{class:"spinner"})):e("span",{class:"content"},this.text),e("div",{key:"e7e7542f0b79c5bf8e41969e23dd77d9fdec4462",class:"ripple-container"},this.ripples.map(((t,n)=>e("span",{key:n,class:"ripple",style:{top:`${t.top}px`,left:`${t.left}px`,width:`${t.size}px`,height:`${t.size}px`}})))))}get host(){return n(this)}static get watchers(){return{clientStyling:["handleClientStylingChange"],clientStylingUrl:["handleClientStylingUrlChange"],mbSource:["handleMbSourceChange"]}}};l.style=':host{display:inline-block;font-family:"PingFang SC", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif}.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;border:1px solid transparent;border-radius:6px;font-weight:500;cursor:pointer;outline:none;overflow:hidden;transition:background-color 0.2s, border-color 0.2s, color 0.2s;user-select:none;-webkit-tap-highlight-color:transparent}.btn .content{position:relative}.btn:disabled{cursor:not-allowed;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:2px solid rgba(255, 255, 255, 0.3);border-radius:50%;border-top-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:#08104a}.btn--outline .spinner,.btn--dashed .spinner,.btn--text .spinner{border-top-color:currentColor;border-color:rgba(0, 0, 0, 0.2)}.btn--outline{background-color:var(--emw--color-background, #fff);border-color:#dcdcdc;color:var(--emw--color-typography, #000)}.btn--outline:hover:not(:disabled){background-color:var(--emw--color-background-tertiary, #ccc);border-color:#a6a6a6}.btn--outline:active:not(:disabled){background-color:#e6e6e6}.btn--dashed{background-color:transparent;border-style:dashed;border-color:#dcdcdc;color:#333}.btn--dashed:hover:not(:disabled){border-color:#a6a6a6;color:#0052d9}.btn--text{background-color:transparent;color:#0052d9;border-color:transparent}.btn--text:hover:not(:disabled){background-color:#f2f2f2}.btn--text:active:not(:disabled){background-color:#e6e6e6}.btn--small{height:28px;font-size:12px;padding:0 12px}.btn--medium{height:34px;font-size:14px;padding:0 18px}.btn--large{height:40px;font-size:16px;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: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:rgba(0, 0, 0, 0.1)}@keyframes ripple-animation{to{transform:scale(4);opacity:0}}';export{l as L}