@everymatrix/lottery-hakuna-ticket-history 0.0.1

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

@@ -0,0 +1,1417 @@
+import { r as registerInstance, h, g as getElement, c as createEvent, H as Host } from './index-50addd47.js';
+import { s as setClientStyling, a as setClientStylingURL, b as setStreamStyling, r as renderIconDefinitionToSVGElement } from './lottery-hakuna-ticket-history-cdab50d9.js';
+export { L as lottery_hakuna_ticket_history } from './lottery-hakuna-ticket-history-cdab50d9.js';
+
+// This icon file is generated automatically.
+var DeleteFilled = { "icon": { "tag": "svg", "attrs": { "viewBox": "64 64 896 896", "focusable": "false" }, "children": [{ "tag": "path", "attrs": { "d": "M864 256H736v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zm-200 0H360v-72h304v72z" } }] }, "name": "delete", "theme": "filled" };
+const DeleteFilled$1 = DeleteFilled;
+
+const DEFAULT_LANGUAGE$3 = 'en';
+const SUPPORTED_LANGUAGES$3 = ['ro', 'en', 'fr', 'ar', 'hr', 'zh'];
+const TRANSLATIONS$3 = {
+    en: {
+        loading: 'Loading'
+    },
+    ro: {},
+    fr: {},
+    ar: {},
+    hr: {}
+};
+const translate$3 = (key, customLang, replacements) => {
+    const lang = customLang;
+    let translation = TRANSLATIONS$3[lang !== undefined && SUPPORTED_LANGUAGES$3.includes(lang) ? lang : DEFAULT_LANGUAGE$3][key];
+    if (replacements) {
+        Object.keys(replacements).forEach((placeholder) => {
+            translation = translation.replace(`{${placeholder}}`, replacements[placeholder]);
+        });
+    }
+    return translation;
+};
+const getTranslations$3 = (data) => {
+    Object.keys(data).forEach((item) => {
+        for (let key in data[item]) {
+            TRANSLATIONS$3[item][key] = data[item][key];
+        }
+    });
+};
+const resolveTranslationUrl$2 = async (translationUrl) => {
+    if (translationUrl) {
+        try {
+            const response = await fetch(translationUrl);
+            if (!response.ok) {
+                throw new Error(`HTTP error! status: ${response.status}`);
+            }
+            const translations = await response.json();
+            getTranslations$3(translations);
+        }
+        catch (error) {
+            console.error('Failed to fetch or parse translations from URL:', error);
+        }
+    }
+};
+
+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 {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.handleClick = (event) => {
+            if (this.disabled) {
+                return;
+            }
+            // Get the button element from the shadow root
+            const button = this.host.shadowRoot.querySelector('.btn');
+            if (!button)
+                return;
+            const rect = button.getBoundingClientRect();
+            const size = Math.max(rect.width, rect.height);
+            const top = event.clientY - rect.top - size / 2;
+            const left = event.clientX - rect.left - size / 2;
+            // Add the new ripple to the state, triggering a re-render
+            const newRipple = { top, left, size };
+            this.ripples = [...this.ripples, newRipple];
+            // Set a timeout to clean up the ripple from the state after the animation ends
+            // This prevents the DOM from filling up with old ripple elements
+            setTimeout(() => {
+                this.ripples = this.ripples.filter((r) => r !== newRipple);
+            }, 600); // This duration should match the CSS animation duration
+        };
+        this.variant = 'primary';
+        this.size = 'medium';
+        this.color = undefined;
+        this.disabled = false;
+        this.loading = false;
+        this.text = undefined;
+        this.mbSource = undefined;
+        this.language = 'en';
+        this.clientStyling = undefined;
+        this.clientStylingUrl = undefined;
+        this.translationUrl = '';
+        this.ripples = [];
+    }
+    handleClientStylingChange(newValue, oldValue) {
+        if (newValue != oldValue) {
+            setClientStyling(this.stylingContainer, this.clientStyling);
+        }
+    }
+    handleClientStylingUrlChange(newValue, oldValue) {
+        if (newValue != oldValue) {
+            setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
+        }
+    }
+    handleMbSourceChange(newValue, oldValue) {
+        if (newValue != oldValue) {
+            setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`);
+        }
+    }
+    disconnectedCallback() {
+        this.stylingSubscription && this.stylingSubscription.unsubscribe();
+    }
+    componentDidLoad() {
+        if (this.stylingContainer) {
+            if (this.mbSource)
+                setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`);
+            if (this.clientStyling)
+                setClientStyling(this.stylingContainer, this.clientStyling);
+            if (this.clientStylingUrl)
+                setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
+        }
+    }
+    componentWillLoad() {
+        if (this.translationUrl) {
+            resolveTranslationUrl$2(this.translationUrl);
+        }
+    }
+    render() {
+        const { variant, disabled, size, color } = this;
+        const isDisabled = disabled || this.loading;
+        // 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
+            }, 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$3('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`,
+                height: `${ripple.size}px`
+            } }))))));
+    }
+    get host() { return getElement(this); }
+    static get watchers() { return {
+        "clientStyling": ["handleClientStylingChange"],
+        "clientStylingUrl": ["handleClientStylingUrlChange"],
+        "mbSource": ["handleMbSourceChange"]
+    }; }
+};
+LotteryButton.style = LotteryButtonStyle0;
+
+const DEFAULT_LANGUAGE$2 = 'en';
+const SUPPORTED_LANGUAGES$2 = ['ro', 'en', 'fr', 'ar', 'hr'];
+const TRANSLATIONS$2 = {
+    en: {
+        total: 'Total:',
+    },
+};
+const translate$2 = (key, customLang, replacements) => {
+    const lang = customLang;
+    let translation = TRANSLATIONS$2[lang !== undefined && SUPPORTED_LANGUAGES$2.includes(lang) ? lang : DEFAULT_LANGUAGE$2][key];
+    if (replacements) {
+        Object.keys(replacements).forEach((placeholder) => {
+            translation = translation.replace(`{${placeholder}}`, replacements[placeholder]);
+        });
+    }
+    return translation;
+};
+const getTranslations$2 = (data) => {
+    Object.keys(data).forEach((item) => {
+        for (let key in data[item]) {
+            TRANSLATIONS$2[item][key] = data[item][key];
+        }
+    });
+};
+const resolveTranslationUrl$1 = async (translationUrl) => {
+    if (translationUrl) {
+        try {
+            const response = await fetch(translationUrl);
+            if (!response.ok) {
+                throw new Error(`HTTP error! status: ${response.status}`);
+            }
+            const translations = await response.json();
+            getTranslations$2(translations);
+        }
+        catch (error) {
+            console.error('Failed to fetch or parse translations from URL:', error);
+        }
+    }
+};
+
+const lotteryHakunaTicketHistoryItemCss = ".lottery-hakuna-ticket-history-item__container{display:flex;padding:var(--lottery-hakuna-ticket-history-item-container-padding, 20px);flex-direction:column;justify-content:center;gap:var(--lottery-hakuna-ticket-history-item-container-gap, 16px);border-radius:var(--lottery-hakuna-ticket-history-item-container-border-radius, 12px);border:1px solid transparent;min-width:var(--lottery-hakuna-ticket-history-item-container-min-width, 200px);background-origin:border-box;background-clip:padding-box, border-box;background-image:linear-gradient(var(--emw-hakuna-bg-secondary, #120505), var(--emw-hakuna-bg-secondary, #120505)), linear-gradient(to top left, var(--emw-hakuna-color-primary, #c52217) var(--lottery-hakuna-ticket-history-item-border-gradient-start-stop, 22%), var(--emw-hakuna-bg-primary, #2c2525) var(--lottery-hakuna-ticket-history-item-border-gradient-end-stop, 68%))}.lottery-hakuna-ticket-history-item__top{display:flex;justify-content:space-between;align-items:center}.lottery-hakuna-ticket-history-item__country-wrapper{display:flex;align-items:center;gap:10px}.lottery-hakuna-ticket-history-item__country-flag{width:var(--lottery-hakuna-ticket-history-item-country-flag-width, 30px);object-fit:cover;aspect-ratio:var(--lottery-hakuna-ticket-history-item-country-flag-aspect-ratio, 3/2)}.lottery-hakuna-ticket-history-item__country-name{color:var(--lottery-hakuna-ticket-history-item-country-name-color, #fff);font-size:var(--lottery-hakuna-ticket-history-item-country-name-font-size, 14px);font-style:normal;font-weight:var(--lottery-hakuna-ticket-history-item-country-name-font-weight, 700);line-height:var(--lottery-hakuna-ticket-history-item-country-name-line-height, normal)}.lottery-hakuna-ticket-history-item__details{display:flex;gap:var(--lottery-hakuna-ticket-history-item-details-gap, 13px);color:var(--emw-hakuna-text-secondary, #b4a5a5);font-size:var(--lottery-hakuna-ticket-history-item-details-font-size, 10px);font-style:normal;font-weight:var(--lottery-hakuna-ticket-history-item-details-font-weight, 700);line-height:var(--lottery-hakuna-ticket-history-item-details-line-height, normal)}.lottery-hakuna-ticket-history-item__meta{display:flex;gap:var(--lottery-hakuna-ticket-history-item-meta-gap, 10px)}.lottery-hakuna-ticket-history-item__meta-value{color:var(--lottery-hakuna-ticket-history-item-meta-value-color, inherit)}.lottery-hakuna-ticket-history-item__bottom{display:flex;justify-content:space-between;align-items:center;align-self:stretch}.lottery-hakuna-ticket-history-item__numbers-wrapper{flex:1;display:flex;align-items:flex-start;gap:var(--lottery-hakuna-ticket-history-item-numbers-wrapper-gap, 8px);box-shadow:var(--lottery-hakuna-ticket-history-item-numbers-wrapper-box-shadow, 0 1px 2px 0 rgba(0, 0, 0, 0.25))}.lottery-hakuna-ticket-history-item__date-wrapper{color:var(--lottery-hakuna-ticket-history-item-date-wrapper-color, #fffefe);text-align:var(--lottery-hakuna-ticket-history-item-date-wrapper-text-align, right);font-size:var(--lottery-hakuna-ticket-history-item-date-wrapper-font-size, 8px);font-style:normal;font-weight:var(--lottery-hakuna-ticket-history-item-date-wrapper-font-weight, 400);line-height:var(--lottery-hakuna-ticket-history-item-date-wrapper-line-height, 125%);min-width:var(--lottery-hakuna-ticket-history-item-date-wrapper-min-width, 70px);max-width:var(--lottery-hakuna-ticket-history-item-date-wrapper-max-width, 100px)}lottery-selection-group{width:100%}ui-skeleton{--emw-skeleton-primary-color:#414141;--emw-skeleton-secondary-color:#2f2929}";
+const LotteryHakunaTicketHistoryItemStyle0 = lotteryHakunaTicketHistoryItemCss;
+
+const LotteryHakunaTicketHistoryItem = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.selectionGroupStyle = `
+  :host{
+      --lottery-selection-width: 24px;
+      --lottery-selection-height: 24px;
+      --lottery-selection-padding: 10px;
+      --lottery-selection-border-radius: 6px;
+      --lottery-selection-border-width: 1px;
+      --lottery-selection-border-color: var(--emw-hakuna-color-primary, #c52217);
+
+      --lottery-selection-color: var(--emw-hakuna-text-primary, #ffffff);
+      --lottery-selection-font-size: 14px;
+      --lottery-selection-font-weight: 500;
+
+      --lottery-selection-hover-background: transparent;
+      --lottery-selection-hover-border-color: var(--emw-hakuna-color-primary, #c52217);
+      --lottery-selection-hover-color: var(--emw-hakuna-text-primary, #ffffff);
+
+      .lottery-selection__button{
+        box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.15);
+        line-height: normal;
+      }
+      .lottery-selection__button:hover{
+        cursor: default;
+      }
+      --lottery-selection-group-item-gap:6px;
+  }
+  `;
+        this.renderSkeleton = () => {
+            return (h("div", { class: "lottery-hakuna-ticket-history-item__container" }, h("div", { class: "lottery-hakuna-ticket-history-item__top" }, h("div", { class: "lottery-hakuna-ticket-history-item__country-wrapper" }, h("ui-skeleton", { structure: "image", width: "30px", height: "20px" }), h("ui-skeleton", { structure: "title", width: "86px", height: "17px", marginBottom: 0 })), h("div", { class: "lottery-hakuna-ticket-history-item__details" }, h("ui-skeleton", { structure: "text", width: "60%", height: "20px" }))), h("div", { class: "lottery-hakuna-ticket-history-item__bottom" }, h("div", { class: "lottery-hakuna-ticket-history-item__numbers-wrapper" }, new Array(this.selectedNumbersCount).fill(h("ui-skeleton", { borderRadius: "8px", structure: "rectangle", width: "24px", height: "24px" }))), h("div", { class: "lottery-hakuna-ticket-history-item__date-wrapper" }, h("ui-skeleton", { structure: "text", width: "180px", height: "14px" })))));
+        };
+        this.renderMain = () => {
+            return (h("div", { class: "lottery-hakuna-ticket-history-item__container" }, h("div", { class: "lottery-hakuna-ticket-history-item__top" }, h("div", { class: "lottery-hakuna-ticket-history-item__country-wrapper" }, this.historyItemImageSrc && (h("img", { src: this.historyItemImageSrc, alt: this.historyItemName, class: "lottery-hakuna-ticket-history-item__country-flag" })), h("span", { class: "lottery-hakuna-ticket-history-item__country-name" }, this.historyItemName)), h("div", { class: "lottery-hakuna-ticket-history-item__details" }, h("span", { class: "lottery-hakuna-ticket-history-item__meta" }, translate$2('total', this.language), h("span", { class: "lottery-hakuna-ticket-history-item__meta-value" }, this.totalAmount)))), h("div", { class: "lottery-hakuna-ticket-history-item__bottom" }, h("div", { class: "lottery-hakuna-ticket-history-item__numbers-wrapper" }, this.selectedNumbers && (h("lottery-selection-group", { type: "preview", bulletTexts: this.selectedNumbers, clientStyling: this.selectionGroupStyle + (this.clientStyling || ''), clientStylingUrl: this.clientStylingUrl, mbSource: this.mbSource, hasBorder: true, hasBackground: false, selectionGroupId: this.ticketId ? this.ticketId.toString() : undefined }))), h("div", { class: "lottery-hakuna-ticket-history-item__date-wrapper" }, this.date && h("div", null, this.date), this.time && h("div", null, this.time)))));
+        };
+        this.mbSource = undefined;
+        this.clientStyling = undefined;
+        this.clientStylingUrl = undefined;
+        this.language = 'en';
+        this.translationUrl = '';
+        this.historyItemName = undefined;
+        this.historyItemImageSrc = undefined;
+        this.ticketId = undefined;
+        this.totalAmount = undefined;
+        this.date = undefined;
+        this.time = undefined;
+        this.selectedNumbers = undefined;
+        this.showSkeleton = false;
+        this.selectedNumbersCount = 6;
+    }
+    handleClientStylingChange(newValue, oldValue) {
+        if (newValue != oldValue) {
+            setClientStyling(this.stylingContainer, this.clientStyling);
+        }
+    }
+    handleClientStylingUrlChange(newValue, oldValue) {
+        if (newValue != oldValue) {
+            setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
+        }
+    }
+    handleMbSourceChange(newValue, oldValue) {
+        if (newValue != oldValue) {
+            setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`);
+        }
+    }
+    async componentWillLoad() {
+        resolveTranslationUrl$1(this.translationUrl);
+    }
+    componentDidLoad() {
+        if (this.stylingContainer) {
+            if (this.mbSource)
+                setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`);
+            if (this.clientStyling)
+                setClientStyling(this.stylingContainer, this.clientStyling);
+            if (this.clientStylingUrl)
+                setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
+        }
+    }
+    disconnectedCallback() {
+        this.stylingSubscription && this.stylingSubscription.unsubscribe();
+    }
+    render() {
+        return (h("div", { key: 'd22e301e9824aa3539e0c11ed52a1bddc5e1fb9c', ref: (el) => (this.stylingContainer = el), class: "lottery-hakuna-ticket-history-item__container-wrapper" }, this.showSkeleton ? this.renderSkeleton() : this.renderMain()));
+    }
+    static get watchers() { return {
+        "clientStyling": ["handleClientStylingChange"],
+        "clientStylingUrl": ["handleClientStylingUrlChange"],
+        "mbSource": ["handleMbSourceChange"]
+    }; }
+};
+LotteryHakunaTicketHistoryItem.style = LotteryHakunaTicketHistoryItemStyle0;
+
+const lotteryInfiniteScrollCss = ":host{display:block;width:100%}.lottery-infinite-scroll__container{display:block;width:100%;overflow-x:hidden;-webkit-overflow-scrolling:touch;padding-right:10px;box-sizing:border-box;scrollbar-width:thin;scrollbar-color:var(--emw-hakuna-bg-secondary, #120505) var(--lottery-infinite-scroll-scrollbar-track-background, transparent);}.lottery-infinite-scroll__container::-webkit-scrollbar{width:var(--lottery-infinite-scroll-scrollbar-width, 2px)}.lottery-infinite-scroll__container::-webkit-scrollbar-track{background:var(--lottery-infinite-scroll-scrollbar-track-background, transparent)}.lottery-infinite-scroll__container::-webkit-scrollbar-thumb{background:var(--emw-hakuna-bg-secondary, #120505);border-radius:var(--lottery-infinite-scroll-scrollbar-thumb-border-radius, 2px)}.lottery-infinite-scroll__sentinel{width:100%;display:block;text-align:center;}.lottery-infinite-scroll__sentinel.virtual-scroll-sentinel{height:1px;pointer-events:none;opacity:0;position:absolute;width:100%}.lottery-infinite-scroll__sentinel:not(.virtual-scroll-sentinel){height:1px;}.lottery-infinite-scroll__end-message{width:100%;display:block;text-align:center;}.lottery-infinite-scroll__end-message.virtual-scroll-end-message{position:absolute;width:100%}.ptr-indicator{height:var(--pull-trigger-distance, 60px);margin-top:calc(-1 * var(--pull-trigger-distance, 60px));display:flex;align-items:center;justify-content:center;position:absolute;top:0;width:100%;z-index:10;font-size:14px;color:#666;}";
+const LotteryInfiniteScrollStyle0 = lotteryInfiniteScrollCss;
+
+const LotteryInfiniteScroll = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.loadMore = createEvent(this, "loadMore", 7);
+        this.refresh = createEvent(this, "refresh", 7);
+        /** Y-coordinate of the touch start event. */
+        this.startY = 0;
+        /** Indicates if a touch event is currently active for pull-to-refresh. */
+        this.isTouching = false;
+        // --- Virtual Scroll Core Logic ---
+        this.onScroll = () => {
+            if (this.enableVirtualScroll) {
+                if (this.rafId)
+                    cancelAnimationFrame(this.rafId);
+                this.rafId = requestAnimationFrame(() => this.calculateVisibleRange());
+            }
+        };
+        // --- Pull to Refresh Logic (Touch handling) ---
+        this.handleTouchStart = (e) => {
+            // Only allow pull-down when scrollbar is at the top
+            if (this.scrollContainer.scrollTop <= 0) {
+                this.startY = e.touches[0].clientY;
+                this.isTouching = true;
+            }
+        };
+        this.handleTouchMove = (e) => {
+            if (!this.isTouching || this.isRefreshing)
+                return;
+            const currentY = e.touches[0].clientY;
+            const distance = currentY - this.startY;
+            // Only process pull-down and when scrollbar is at the top
+            if (distance > 0 && this.scrollContainer.scrollTop <= 0) {
+                // Prevent default scroll behavior (prevents entire page from being dragged)
+                if (e.cancelable)
+                    e.preventDefault();
+                // Add damping effect (harder to pull further)
+                this.pullDistance = Math.pow(distance, 0.8);
+            }
+            else {
+                // If user pushes up, or already scrolled, reset
+                this.isTouching = false;
+                this.pullDistance = 0;
+            }
+        };
+        this.handleTouchEnd = () => {
+            this.isTouching = false;
+            if (this.pullDistance >= this.pullTriggerDistance) {
+                // Trigger refresh
+                this.pullDistance = this.pullTriggerDistance; // Stay in loading area
+                this.refresh.emit();
+            }
+            else {
+                // Not reached threshold, bounce back
+                this.pullDistance = 0;
+            }
+        };
+        this.items = [];
+        this.hasMore = false;
+        this.isLoading = false;
+        this.isRefreshing = false;
+        this.threshold = '0px 0px 200px 0px';
+        this.estimatedItemHeight = 200;
+        this.containerHeight = '100%';
+        this.enableVirtualScroll = false;
+        this.renderItem = undefined;
+        this.renderSkeleton = undefined;
+        this.skeletonCount = 6;
+        this.pullTriggerDistance = 60;
+        this.minItemWidth = 340;
+        this.gridGap = 10;
+        this.visibleStartIndex = 0;
+        this.visibleEndIndex = 10;
+        this.pullDistance = 0;
+        this.columns = 1;
+    }
+    componentDidLoad() {
+        if (this.enableVirtualScroll) {
+            // Listen for container size changes, recalculate columns
+            this.initResizeObserver();
+            // Initial calculation
+            this.calculateMetrics();
+        }
+        // Initialize observer on component load
+        this.initObserver();
+    }
+    componentDidUpdate() {
+        if (this.hasMore && !this.isLoading) {
+            this.initObserver();
+        }
+    }
+    disconnectedCallback() {
+        this.disconnectObserver();
+        if (this.resizeObserver)
+            this.resizeObserver.disconnect();
+        if (this.rafId)
+            cancelAnimationFrame(this.rafId);
+    }
+    initResizeObserver() {
+        if (!window.ResizeObserver || !this.scrollContainer)
+            return;
+        this.resizeObserver = new ResizeObserver((entries) => {
+            for (let entry of entries) {
+                // When width changes, recalculate the number of columns
+                const width = entry.contentRect.width;
+                this.recalcColumns(width);
+                this.calculateVisibleRange();
+            }
+        });
+        this.resizeObserver.observe(this.scrollContainer);
+    }
+    recalcColumns(containerWidth) {
+        if (!this.enableVirtualScroll)
+            return;
+        // Calculation logic must be consistent with CSS grid-template-columns: repeat(auto-fill, ...)
+        // Considering the gap
+        const effectiveWidth = containerWidth + this.gridGap;
+        const itemOccupancy = this.minItemWidth + this.gridGap;
+        // At least 1 column
+        const newColumns = Math.max(1, Math.floor(effectiveWidth / itemOccupancy));
+        if (this.columns !== newColumns) {
+            this.columns = newColumns;
+        }
+    }
+    // --- Watchers ---
+    handleItemsChange() {
+        if (this.enableVirtualScroll) {
+            this.calculateVisibleRange();
+        }
+    }
+    handleRefreshingChange(newValue) {
+        if (!newValue) {
+            this.pullDistance = 0;
+        }
+    }
+    // --- Observer Logic ---
+    disconnectObserver() {
+        if (this.observer) {
+            this.observer.disconnect();
+            this.observer = null;
+        }
+    }
+    initObserver() {
+        this.disconnectObserver();
+        if (!this.hasMore || this.isLoading || !this.sentinel)
+            return;
+        const options = {
+            root: this.scrollContainer === this.el.shadowRoot.querySelector('.lottery-infinite-scroll__container')
+                ? this.scrollContainer
+                : null,
+            rootMargin: this.threshold,
+            threshold: 0.1
+        };
+        this.observer = new IntersectionObserver((entries) => {
+            // When scrolled to bottom and not currently loading
+            if (entries[0].isIntersecting && this.hasMore && !this.isLoading) {
+                this.loadMore.emit();
+            }
+        }, options);
+        this.observer.observe(this.sentinel);
+    }
+    calculateMetrics() {
+        if (!this.scrollContainer)
+            return;
+        this.recalcColumns(this.scrollContainer.clientWidth);
+        this.calculateVisibleRange();
+    }
+    calculateVisibleRange() {
+        if (!this.scrollContainer || !this.enableVirtualScroll)
+            return;
+        const scrollTop = this.scrollContainer.scrollTop;
+        const viewportHeight = this.scrollContainer.clientHeight;
+        // 1. Calculate the current "Row" index
+        // We assume each row has a height of estimatedItemHeight (although it may differ in reality, this is sufficient for visible window calculation)
+        const startRow = Math.floor(scrollTop / this.estimatedItemHeight);
+        // 2. Buffer row count
+        const bufferRows = 3;
+        // 3. Calculate visible rows
+        const visibleRows = Math.ceil(viewportHeight / this.estimatedItemHeight);
+        // 4. Calculate start and end rows for rendering
+        const renderStartRow = Math.max(0, startRow - bufferRows);
+        const renderEndRow = startRow + visibleRows + bufferRows;
+        // 5. Convert to Item indices (Row * Columns)
+        const startIndex = renderStartRow * this.columns;
+        const endIndex = Math.min(this.items.length, renderEndRow * this.columns);
+        if (this.visibleStartIndex !== startIndex || this.visibleEndIndex !== endIndex) {
+            this.visibleStartIndex = startIndex;
+            this.visibleEndIndex = endIndex;
+        }
+    }
+    render() {
+        const { items, visibleStartIndex, visibleEndIndex, estimatedItemHeight, columns, gridGap, minItemWidth } = this;
+        // Check if we should show skeleton: items are empty, loading is true, and renderSkeleton is provided
+        const showSkeleton = items.length === 0 && !!this.renderSkeleton && this.isLoading;
+        // Virtual Scroll Calculations for Spacer
+        let paddingTop = 0;
+        let paddingBottom = 0;
+        let visibleItems = [];
+        if (this.enableVirtualScroll && !showSkeleton) {
+            const totalRows = Math.ceil(items.length / columns);
+            const startRow = Math.floor(visibleStartIndex / columns);
+            // Note: Here we calculate how many rows are actually rendered based on the number of slices, for calculating bottom padding.
+            const renderedCount = visibleEndIndex - visibleStartIndex;
+            const renderedRows = Math.ceil(renderedCount / columns);
+            // Top Spacer: Number of rows hidden at the top * Estimated height
+            paddingTop = startRow * estimatedItemHeight;
+            // Bottom Spacer: Total rows - (Top rows + Rendered rows) * Estimated height
+            // Ensure the total scroll height is roughly correct
+            paddingBottom = Math.max(0, (totalRows - startRow - renderedRows) * estimatedItemHeight);
+            visibleItems = items.slice(visibleStartIndex, visibleEndIndex);
+        }
+        else {
+            visibleItems = showSkeleton ? new Array(this.skeletonCount).fill(null) : items;
+        }
+        // Styles
+        const contentTransform = {
+            transform: `translateY(${this.pullDistance}px)`,
+            transition: this.isTouching ? 'none' : 'transform 0.3s ease-out'
+        };
+        // Grid Layout Style
+        const listStyle = {
+            display: 'grid',
+            // Responsive column width
+            gridTemplateColumns: `repeat(auto-fill, minmax(${minItemWidth}px, 1fr))`,
+            gap: `${gridGap}px`,
+            // Even with Flex/Grid, we don't need absolute positioning, use margin/padding for spacing
+            paddingTop: `${paddingTop}px`,
+            paddingBottom: `${paddingBottom}px`,
+            boxSizing: 'border-box'
+        };
+        return (h("div", { key: '366232c373082c1a825da935fd02039c3cef5653', class: "lottery-infinite-scroll__container", style: {
+                height: this.containerHeight,
+                overflowY: 'auto',
+                position: 'relative',
+                contain: 'strict' // Performance optimization
+            }, ref: (el) => (this.scrollContainer = el), onScroll: this.onScroll, onTouchStart: this.handleTouchStart, onTouchMove: this.handleTouchMove, onTouchEnd: this.handleTouchEnd }, h("div", { key: '1dbe68c185299f989101ad2489319ebab82c44da', class: "ptr-indicator", style: Object.assign(Object.assign({}, contentTransform), { position: 'absolute', top: '0', left: '0', width: '100%', height: `${this.pullTriggerDistance}px`, display: 'flex', alignItems: 'center', justifyContent: 'center', marginTop: `-${this.pullTriggerDistance}px`, pointerEvents: 'none' }) }, this.isRefreshing ? (h("slot", { name: "refresh-loading" }, "Refreshing...")) : (h("slot", { name: "pull-hint" }, this.pullDistance > this.pullTriggerDistance ? 'Release' : 'Pull'))), h("div", { key: 'd058018d407dd0e003571e0c1259f837deb093be', class: "scroll-content-wrapper", style: contentTransform }, h("div", { key: '1041eb5548bc79c2a507477013e3e34f35e25c22', class: "list-content", style: listStyle }, visibleItems.map((item, i) => {
+            /* Pass the real index to renderItem */
+            const realIndex = this.enableVirtualScroll && !showSkeleton ? visibleStartIndex + i : i;
+            return (h("div", { key: realIndex, class: "list-item-wrapper" }, showSkeleton
+                ? this.renderSkeleton
+                    ? this.renderSkeleton(realIndex)
+                    : null
+                : this.renderItem
+                    ? this.renderItem(item, realIndex)
+                    : null));
+        })), (this.hasMore || (this.isLoading && !showSkeleton)) && (h("div", { key: '0af2a85096fc16e9071ec0363a4eb58753324247', class: "lottery-infinite-scroll__sentinel", ref: (el) => (this.sentinel = el), style: { height: '20px', display: 'flex', justifyContent: 'center' } }, this.isLoading ? h("slot", { name: "loading-more" }, "Loading...") : null)), !this.hasMore && !this.isLoading && items.length > 0 && (h("div", { key: 'e6e814a96727e2442137412c25ec09908b2f9015', class: "end-message", style: { textAlign: 'center', padding: '10px' } }, h("slot", { key: '02831150b863992dabd59ab01f7bbb23066877bf', name: "end-message" }, "No more data"))))));
+    }
+    get el() { return getElement(this); }
+    static get watchers() { return {
+        "items": ["handleItemsChange"],
+        "isRefreshing": ["handleRefreshingChange"]
+    }; }
+};
+LotteryInfiniteScroll.style = LotteryInfiniteScrollStyle0;
+
+// Basic sanitization method for SVG content
+// This is NOT a complete XSS prevention for SVG, but prevents common attacks.
+function sanitizeSvg(svgString) {
+    let sanitized = svgString.replace(/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi, ''); // Remove <script> tags
+    sanitized = sanitized.replace(/on[a-z]+=[\"'][^\"']*[\"']/gi, ''); // Remove on* attributes
+    sanitized = sanitized.replace(/javascript:/gi, ''); // Remove javascript: URLs
+    return sanitized;
+}
+
+const lotterySelectionCss = ":host{display:inline-block}.lottery-selection__button{display:flex;align-items:center;justify-content:center;width:var(--lottery-selection-width, 32px);height:var(--lottery-selection-height, 32px);padding:var(--lottery-selection-padding, 0);box-sizing:border-box;background:var(--lottery-selection-background, var(--emw--color-background, #fff));border:var(--lottery-selection-border-width, 2px) var(--lottery-selection-border-style, solid) var(--lottery-selection-border-color, var(--emw--color-primary, #0d196e));border-radius:var(--lottery-selection-border-radius, var(--emw--border-radius-medium, 8px));color:var(--lottery-selection-color, var(--emw--color-typography, #000));font-weight:var(--lottery-selection-font-weight, bold);font-size:var(--lottery-selection-font-size, 1em);cursor:pointer;user-select:none;}.lottery-selection__button:hover{background:var(--lottery-selection-hover-background, var(--emw--color-background, #fff));border-color:var(--lottery-selection-hover-border-color, var(--emw--color-primary, #0d196e));color:var(--lottery-selection-hover-color, var(--emw--color-typography, #000))}.lottery-selection__button .lottery-selection__delete-icon{display:none}.lottery-selection__button.isDeleteByIcon:hover .lottery-selection__text{display:none}.lottery-selection__button.isDeleteByIcon:hover .lottery-selection__delete-icon{display:flex;align-items:center;justify-content:center;fill:var(--lottery-selection-delete-icon-color, var(--emw--color-typography, #000));vertical-align:middle}.lottery-selection__button.lottery-selection__button--selected{background-color:var(--lottery-selection-selected-background, var(--emw--color-primary, #0d196e));border-color:var(--lottery-selection-selected-border-color, var(--emw--color-primary, #0d196e));color:var(--lottery-selection-selected-color, var(--emw--color-typography-inverse, #fff))}.lottery-selection__button.lottery-selection__button--disabled{background-color:var(--lottery-selection-disabled-background, var(--emw--color-gray-50, #f5f5f5));border-color:var(--lottery-selection-disabled-border-color, var(--emw--color-gray-100, #e6e6e6));color:var(--lottery-selection-disabled-color, var(--emw--color-gray-150, #6f6f6f));cursor:not-allowed;pointer-events:none;}.lottery-selection__button.lottery-selection__button--no-border{border:none}.lottery-selection__button.lottery-selection__button--no-background{background:transparent}";
+const LotterySelectionStyle0 = lotterySelectionCss;
+
+const LotterySelection = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.lotteryBulletClickHandler = createEvent(this, "lotteryBulletClick", 7);
+        this.value = 0;
+        this.text = undefined;
+        this.idx = undefined;
+        this.type = 'toggle';
+        this.mbSource = undefined;
+        this.clientStyling = undefined;
+        this.clientStylingUrl = undefined;
+        this.hasBorder = true;
+        this.hasBackground = true;
+        this.deleteIconSvg = '';
+        this.deleteIconWidth = '16px';
+        this.deleteIconHeight = '16px';
+    }
+    handleClientStylingChange(newValue, oldValue) {
+        if (newValue !== oldValue) {
+            setClientStyling(this.stylingContainer, this.clientStyling);
+        }
+    }
+    handleClientStylingUrlChange(newValue, oldValue) {
+        if (newValue !== oldValue) {
+            setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
+        }
+    }
+    handleMbSourceChange(newValue, oldValue) {
+        if (newValue !== oldValue) {
+            setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`);
+        }
+    }
+    componentDidLoad() {
+        if (this.stylingContainer) {
+            if (this.mbSource)
+                setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`);
+            if (this.clientStyling)
+                setClientStyling(this.stylingContainer, this.clientStyling);
+            if (this.clientStylingUrl)
+                setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
+        }
+    }
+    disconnectedCallback() {
+        this.stylingSubscription && this.stylingSubscription.unsubscribe();
+    }
+    handleClick() {
+        if (this.type === 'disabled' || this.type === 'readonly') {
+            return;
+        }
+        console.log('bullet clicked', this.type, this.idx, this.text, this.value);
+        this.lotteryBulletClickHandler.emit({
+            type: this.type,
+            idx: this.idx,
+            text: this.text,
+            value: this.value
+        });
+    }
+    render() {
+        let iconToRender;
+        if (this.deleteIconSvg) {
+            iconToRender = sanitizeSvg(this.deleteIconSvg);
+        }
+        else {
+            iconToRender = renderIconDefinitionToSVGElement(DeleteFilled$1, {
+                extraSVGAttrs: {
+                    width: this.deleteIconWidth,
+                    height: this.deleteIconHeight,
+                    fill: 'currentColor'
+                }
+            });
+        }
+        return (h("div", { key: '0d1e8aaa80a907a7467410f6b27b4b6175e82299', class: "lottery-selection", ref: (el) => (this.stylingContainer = el) }, h("button", { key: '11a2402abbc290dc877ad95f3433092c3a0d8419', class: {
+                'lottery-selection__button': true,
+                'lottery-selection__button--selected': this.value == 1,
+                'lottery-selection__button--disabled': this.type === 'disabled',
+                'lottery-selection__button--no-border': !this.hasBorder,
+                'lottery-selection__button--no-background': !this.hasBackground,
+                isDeleteByIcon: this.type === 'delete',
+                isCallDialogBtn: this.type === 'input' || this.type === 'readonly'
+            }, onClick: this.handleClick.bind(this), disabled: this.type === 'disabled' }, this.type === 'delete' && h("span", { key: 'f99001d936a8f7bdf8adc5c46e82caf730a9442a', class: "lottery-selection__delete-icon", innerHTML: iconToRender }), h("span", { key: '55775e2492a1fe45cc8a457ac0a0d206744461ab', class: "lottery-selection__text" }, this.text))));
+    }
+    static get watchers() { return {
+        "clientStyling": ["handleClientStylingChange"],
+        "clientStylingUrl": ["handleClientStylingUrlChange"],
+        "mbSource": ["handleMbSourceChange"]
+    }; }
+};
+LotterySelection.style = LotterySelectionStyle0;
+
+const DEFAULT_LANGUAGE$1 = 'en';
+const SUPPORTED_LANGUAGES$1 = ['ro', 'en', 'fr', 'ar', 'hr', 'zh'];
+const TRANSLATIONS$1 = {
+    en: {
+        noTicketBoard: 'No ticket board available.',
+        selectionCleared: 'Your selection has been cleared.',
+        clearAll: 'Clear All',
+        stopAt: 'Stop at',
+        turnover: 'Turnover: ',
+        pleaseFillIn: 'Please fill in all the selection input!',
+        fillIn: 'Fill in',
+        noBets: 'Sorry. No bets have been placed so far. Check back later!',
+        search: 'Search',
+        clear: 'Clear',
+        oddsChart: 'Odds Chart',
+        ticketSuccess: 'Ticket purchased successfully.',
+        stakePerLine: 'Stake per Line:',
+        lowestOdds: 'Lowest Odds:',
+        highestOdds: 'Highest Odds:',
+        orderSummary: 'ORDER SUMMARY',
+        ticket: 'Ticket',
+        lines: 'Lines',
+        total: 'Total',
+        submit: 'Submit',
+        loading: 'Loading',
+        enterValidNumber: 'Please enter a valid number.',
+        enterNumberBetween: 'Please enter a number between {min} and {max}.',
+        numberAlreadySelected: 'This number has already been selected.',
+        enterScoreUpTo: 'Please enter the score (Up to {maxScore})',
+        enterValue: 'Please enter a value',
+        myChoices: 'My Choices',
+        teams: 'Teams',
+        scores: 'Scores',
+        euro: 'Euro',
+        cancel: 'Cancel',
+        confirm: 'Confirm'
+    },
+    ro: {},
+    fr: {},
+    ar: {},
+    hr: {}
+};
+const translate$1 = (key, customLang, replacements) => {
+    const lang = customLang;
+    let translation = TRANSLATIONS$1[lang !== undefined && SUPPORTED_LANGUAGES$1.includes(lang) ? lang : DEFAULT_LANGUAGE$1][key];
+    if (replacements) {
+        Object.keys(replacements).forEach((placeholder) => {
+            translation = translation.replace(`{${placeholder}}`, replacements[placeholder]);
+        });
+    }
+    return translation;
+};
+const getTranslations$1 = (data) => {
+    Object.keys(data).forEach((item) => {
+        for (let key in data[item]) {
+            TRANSLATIONS$1[item][key] = data[item][key];
+        }
+    });
+};
+
+function getBulletTextsSet(bulletTexts, splitToken) {
+    return new Set(bulletTexts ? bulletTexts.split(splitToken) : []);
+}
+function validateInput({ value, selectedSet, maxValue, minValue, language, type = 'integer' }) {
+    const trimmedValue = value.trim();
+    if (type === 'integer') {
+        // Strict integer check
+        if (!/^-?\d+$/.test(trimmedValue)) {
+            return {
+                valid: false,
+                errorMessage: translate$1('enterValidNumber', language),
+                value
+            };
+        }
+        const numValue = Number(trimmedValue);
+        if (isNaN(numValue)) {
+            return {
+                valid: false,
+                errorMessage: translate$1('enterValidNumber', language),
+                value
+            };
+        }
+        if ((minValue !== undefined && numValue < minValue) || (maxValue !== undefined && numValue > maxValue)) {
+            return {
+                valid: false,
+                errorMessage: translate$1('enterNumberBetween', language, {
+                    min: minValue,
+                    max: maxValue
+                }),
+                value
+            };
+        }
+        // Normalize value (e.g. "05" -> "5") for set check
+        const normalizedValue = String(numValue);
+        if (selectedSet.has(normalizedValue)) {
+            return {
+                valid: false,
+                errorMessage: translate$1('numberAlreadySelected', language),
+                value
+            };
+        }
+    }
+    else {
+        // Text mode validation
+        if (selectedSet.has(trimmedValue)) {
+            return {
+                valid: false,
+                errorMessage: translate$1('numberAlreadySelected', language), // Or generic 'alreadySelected' if available, but reusing key for now
+                value
+            };
+        }
+    }
+    return {
+        valid: true,
+        errorMessage: '',
+        value
+    };
+}
+function removeBulletTexts(text, selectedArr) {
+    return selectedArr.filter((s) => s !== text);
+}
+function addSelectedBulletTexts(text, selectedArr) {
+    return selectedArr.concat([text]);
+}
+function removeAndAddSelectedBulletTexts(text, selectedArr, maxSelectedCount) {
+    return selectedArr.slice(selectedArr.length - (maxSelectedCount - 1)).concat([text]);
+}
+function buildSelectedBulletTextsArr(item, selectedArr, maxSelectedCount) {
+    if (item.type === 'delete') {
+        return removeBulletTexts(item.text, selectedArr);
+    }
+    if (item.type === 'toggle') {
+        if (selectedArr.includes(item.text)) {
+            return removeBulletTexts(item.text, selectedArr);
+        }
+        if (selectedArr.length >= maxSelectedCount) {
+            return removeAndAddSelectedBulletTexts(item.text, selectedArr, maxSelectedCount);
+        }
+        return addSelectedBulletTexts(item.text, selectedArr);
+    }
+    return [];
+}
+
+const lotterySelectionGroupCss = ":host {\n  width: 100%;\n}\n\n.lottery-selection-group {\n  container-type: inline-size;\n  padding: var(--lottery-selection-group-padding, 0);\n  background: var(--lottery-selection-group-background, transparent);\n  border: var(--lottery-selection-group-border, none);\n  border-radius: var(--lottery-selection-group-border-radius, 0);\n}\n.lottery-selection-group__item {\n  display: flex;\n  flex-direction: var(--lottery-selection-group-flex-direction, row);\n  align-items: var(--lottery-selection-group-item-align, center);\n  justify-content: var(--lottery-selection-group-item-justify, flex-start);\n  gap: var(--lottery-selection-group-item-gap, 16px);\n  width: 100%;\n}\n.lottery-selection-group__item--left {\n  width: var(--lottery-selection-group-label-width, 130px);\n  min-width: var(--lottery-selection-group-label-min-width, auto);\n  max-width: var(--lottery-selection-group-label-max-width, none);\n  color: var(--lottery-selection-group-label-color, var(--emw--color-typography, #000));\n  font-size: var(--lottery-selection-group-label-font-size, 1em);\n  font-weight: var(--lottery-selection-group-label-font-weight, bold);\n  text-align: var(--lottery-selection-group-label-align, left);\n  white-space: var(--lottery-selection-group-label-white-space, normal);\n}\n.lottery-selection-group__item--right {\n  flex: 1;\n  display: flex;\n  flex-wrap: var(--lottery-selection-group-bullets-wrap, wrap); /* Allow items to wrap */\n  gap: var(--lottery-selection-group-bullets-gap, 8px); /* Gap between bullets */\n  align-items: var(--lottery-selection-group-bullets-align, center);\n  justify-content: var(--lottery-selection-group-bullets-justify, flex-start); /* Align bullets to start */\n}\n@container (max-width: 320px) {\n  .lottery-selection-group__item--left {\n    width: 100px;\n    max-width: 100px;\n  }\n}\n\n.dialog-input {\n  width: 100%;\n  padding: var(--lottery-selection-group-input-padding, 8px);\n  border: var(--lottery-selection-group-input-border-width, 1px) var(--lottery-selection-group-input-border-style, solid) var(--lottery-selection-group-input-border-color, var(--emw--color-gray-100, #e6e6e6));\n  border-radius: var(--lottery-selection-group-input-radius, 4px);\n  background-color: var(--lottery-selection-group-input-bg, #fff);\n  color: var(--lottery-selection-group-input-color, #000);\n  box-sizing: border-box;\n  margin-top: var(--lottery-selection-group-input-margin-top, 10px);\n  font-size: var(--lottery-selection-group-input-font-size, 1em);\n}\n.dialog-input::placeholder {\n  color: var(--lottery-selection-group-input-placeholder-color, #999);\n}\n\n.dialog-input.invalid,\n.dialog-input.invalid:focus {\n  border-color: var(--emw--color-error, #ff3d00);\n  outline-color: var(--emw--color-error, #ff3d00);\n}\n\n.error-message {\n  color: var(--lottery-selection-group-error-color, var(--emw--color-error, #ff3d00));\n  font-size: var(--lottery-selection-group-error-font-size, 12px);\n  font-weight: var(--lottery-selection-group-error-font-weight, normal);\n  margin-top: 4px;\n}\n\n.addSelectionDialog-title {\n  color: var(--lottery-selection-group-dialog-title-color, var(--emw--color-typography, #000));\n  font-size: var(--lottery-selection-group-dialog-title-font-size, 1.2em);\n  font-weight: var(--lottery-selection-group-dialog-title-font-weight, bold);\n  margin-bottom: var(--lottery-selection-group-dialog-title-margin-bottom, 0);\n}\n.addSelectionDialog-footer {\n  display: flex;\n  justify-content: var(--lottery-selection-group-dialog-footer-justify, flex-end);\n  gap: var(--lottery-selection-group-dialog-footer-gap, 18px);\n  margin-top: var(--lottery-selection-group-dialog-footer-margin-top, 0);\n}";
+const LotterySelectionGroupStyle0 = lotterySelectionGroupCss;
+
+const LotterySelectionGroup = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.bulletGroupUpdateSelectedBulletTexts = createEvent(this, "bulletGroupUpdateSelection", 7);
+        this.mbSource = undefined;
+        this.clientStyling = undefined;
+        this.clientStylingUrl = undefined;
+        this.language = 'en';
+        this.translationUrl = '';
+        this.splitToken = ',';
+        this.selectionGroupId = undefined;
+        this.selectionGroupLabel = undefined;
+        this.type = 'bet';
+        this.selectedBulletTexts = null;
+        this.maxSelectedCount = null;
+        this.maxDisplayBulletsCount = 11;
+        this.bulletTexts = null;
+        this.maxIntegerBulletText = null;
+        this.minIntegerBulletText = 0;
+        this.bulletTextType = 'integer';
+        this.hasBorder = true;
+        this.hasBackground = true;
+        this.dialogTitle = undefined;
+        this.dialogInputPlaceholder = undefined;
+        this.dialogConfig = {
+            width: '400px',
+            visible: false,
+            onConfirm: () => this.handleFillInAddMore(),
+            onCancel: () => this.handleCloseAddMoreDialog()
+        };
+        this.inputInfo = { valid: true, errorMessage: '', value: '' };
+    }
+    handleClientStylingChange(newValue, oldValue) {
+        if (newValue != oldValue) {
+            setClientStyling(this.stylingContainer, this.clientStyling);
+        }
+    }
+    handleClientStylingUrlChange(newValue, oldValue) {
+        if (newValue != oldValue) {
+            setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
+        }
+    }
+    handleMbSourceChange(newValue, oldValue) {
+        if (newValue != oldValue) {
+            setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`);
+        }
+    }
+    componentWillLoad() {
+        if (this.translationUrl) {
+            getTranslations$1(JSON.parse(this.translationUrl));
+        }
+    }
+    componentDidLoad() {
+        if (this.stylingContainer) {
+            if (this.mbSource)
+                setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`);
+            if (this.clientStyling)
+                setClientStyling(this.stylingContainer, this.clientStyling);
+            if (this.clientStylingUrl)
+                setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
+        }
+    }
+    disconnectedCallback() {
+        this.stylingSubscription && this.stylingSubscription.unsubscribe();
+    }
+    lotteryBulletClickHandler(event) {
+        event.stopPropagation();
+        // if it's input type, open the dialog
+        if (event.detail.type === 'input') {
+            this.dialogConfig = Object.assign(Object.assign({}, this.dialogConfig), { visible: true });
+            return;
+        }
+        if (['delete', 'toggle'].includes(event.detail.type)) {
+            this.bulletGroupUpdateSelectedBulletTexts.emit({
+                newSelectedBulletTexts: buildSelectedBulletTextsArr(event.detail, Array.from(this.selectedSet), this.maxSelectedCount).join(this.splitToken),
+                selectionGroupId: this.selectionGroupId
+            });
+            return;
+        }
+    }
+    get selectedSet() {
+        return getBulletTextsSet(this.selectedBulletTexts, this.splitToken);
+    }
+    get bulletTextsSet() {
+        if (this.bulletTexts)
+            return getBulletTextsSet(this.bulletTexts, this.splitToken);
+        if (this.bulletTextType === 'integer' &&
+            this.maxIntegerBulletText !== null &&
+            this.maxIntegerBulletText !== undefined) {
+            return getBulletTextsSet(Array.from({ length: Number(this.lastDisplayBulletText) - this.minIntegerBulletText + 1 }, (_, index) => this.minIntegerBulletText + index).join(this.splitToken), this.splitToken);
+        }
+        // If neither bulletTexts nor maxIntegerBulletText are provided,
+        return new Set();
+    }
+    // the last bullet text
+    get lastDisplayBulletText() {
+        if (this.bulletTextType === 'integer') {
+            if (this.maxIntegerBulletText !== null && this.maxIntegerBulletText !== undefined) {
+                return Math.min(this.maxIntegerBulletText, this.minIntegerBulletText + this.maxDisplayBulletsCount - 1);
+            }
+            return this.minIntegerBulletText + this.maxDisplayBulletsCount - 1;
+        }
+        // Text mode: return the text at the max display index if available
+        if (this.bulletTextsSet.size > 0) {
+            const texts = Array.from(this.bulletTextsSet);
+            if (texts.length >= this.maxDisplayBulletsCount) {
+                return texts[this.maxDisplayBulletsCount - 1];
+            }
+            return texts[texts.length - 1]; // If fewer than maxDisplayBulletsCount, return the last one
+        }
+        return null;
+    }
+    get isSingleSelectionMode() {
+        return this.maxSelectedCount === 1;
+    }
+    getBulletToRender() {
+        const allBulletTexts = Array.from(this.bulletTextsSet);
+        // Determine which bullets to display based on type and limit
+        let bulletsToRender = allBulletTexts;
+        let showInputButton = false;
+        if (this.bulletTextType === 'text') {
+            // For text, if we have more items than the limit, we need an input button.
+            // The input button takes one slot, so we show (limit - 1) items.
+            if (allBulletTexts.length > this.maxDisplayBulletsCount) {
+                showInputButton = true;
+                bulletsToRender = allBulletTexts.slice(0, this.maxDisplayBulletsCount - 1);
+            }
+            else {
+                bulletsToRender = allBulletTexts;
+            }
+        }
+        else {
+            // For integer, logic is based on maxIntegerBulletText vs displayed range
+            showInputButton =
+                this.maxIntegerBulletText !== null &&
+                    this.maxIntegerBulletText !== undefined &&
+                    this.maxIntegerBulletText > Number(this.lastDisplayBulletText);
+            // Integer bullets generation already respects the count, no slicing needed on the raw set
+            bulletsToRender = allBulletTexts;
+        }
+        return {
+            bulletsToRender,
+            showInputButton
+        };
+    }
+    renderBulletGroup() {
+        let items = [];
+        if (this.type === 'bet') {
+            const isMaxSelected = this.maxSelectedCount !== null && this.selectedSet.size >= this.maxSelectedCount;
+            const { bulletsToRender, showInputButton } = this.getBulletToRender();
+            bulletsToRender.forEach((text, idx) => {
+                let bulletType = 'toggle';
+                if (!this.selectedSet.has(String(text)) && isMaxSelected && !this.isSingleSelectionMode) {
+                    bulletType = 'disabled';
+                }
+                items.push({
+                    value: this.selectedSet.has(String(text)) ? 1 : 0,
+                    text: String(text),
+                    idx,
+                    type: bulletType
+                });
+            });
+            if (showInputButton) {
+                let inputBulletType = 'input';
+                if (isMaxSelected && !this.isSingleSelectionMode) {
+                    inputBulletType = 'disabled';
+                }
+                const inputButtonText = this.bulletTextType === 'text' ? '...' : `${this.lastDisplayBulletText}+`;
+                const inputButtonIdx = this.bulletTextType === 'text' ? -1 : Number(this.lastDisplayBulletText) + 1;
+                // Special handling for integer mode:
+                // If the generated set is "full" (size == maxDisplayBulletsCount),
+                // we need to remove the last item to make room for the "N+" button
+                // so the total visual count remains consistent.
+                if (this.bulletTextType === 'integer' && items.length >= this.maxDisplayBulletsCount) {
+                    items.pop();
+                }
+                items.push({
+                    value: 0,
+                    text: inputButtonText,
+                    idx: inputButtonIdx,
+                    type: inputBulletType
+                });
+            }
+        }
+        else if (['choice', 'preview'].includes(this.type)) {
+            // For choice/preview, also respect the visual limit for text mode
+            const { bulletsToRender } = this.getBulletToRender();
+            bulletsToRender.forEach((text, idx) => {
+                let bulletType = 'toggle';
+                if (this.type === 'preview') {
+                    bulletType = 'readonly';
+                }
+                else if (this.selectedSet.has(String(text))) {
+                    bulletType = 'delete';
+                }
+                items.push({
+                    value: this.selectedSet.has(String(text)) ? 1 : 0,
+                    text,
+                    idx,
+                    type: bulletType
+                });
+            });
+        }
+        return (h("div", { class: "lottery-selection-group__item--right" }, items.map((item) => {
+            return (h("lottery-selection", { clientStyling: this.clientStyling, clientStylingUrl: this.clientStylingUrl, mbSource: this.mbSource, text: item.text, idx: item.idx, value: item.value, type: item.type, hasBorder: this.hasBorder, hasBackground: this.hasBackground }));
+        })));
+    }
+    handleCloseAddMoreDialog() {
+        this.dialogConfig = Object.assign(Object.assign({}, this.dialogConfig), { visible: false });
+        this.inputInfo = { value: '', errorMessage: '', valid: true };
+    }
+    handleInputChange(e) {
+        const inputElement = e.target;
+        const value = inputElement.value;
+        this.inputInfo = Object.assign(Object.assign({}, this.inputInfo), { value: value });
+        this.inputInfo = validateInput({
+            value,
+            selectedSet: this.selectedSet,
+            maxValue: this.maxIntegerBulletText,
+            minValue: this.bulletTextType === 'integer' ? Number(this.lastDisplayBulletText) + 1 : undefined,
+            language: this.language,
+            type: this.bulletTextType
+        });
+    }
+    handleFillInAddMore() {
+        if (this.inputInfo.valid) {
+            const { value } = this.inputInfo;
+            // Normalize the value (e.g., "05" -> "5") to match validation logic
+            let normalizedValue = value;
+            if (this.bulletTextType === 'integer') {
+                normalizedValue = String(Number(value));
+            }
+            else {
+                normalizedValue = value.trim();
+            }
+            let newSelectedBulletTexts;
+            if (this.isSingleSelectionMode) {
+                newSelectedBulletTexts = normalizedValue;
+            }
+            else {
+                newSelectedBulletTexts = addSelectedBulletTexts(normalizedValue, Array.from(this.selectedSet)).join(this.splitToken);
+            }
+            this.bulletGroupUpdateSelectedBulletTexts.emit({
+                newSelectedBulletTexts,
+                selectionGroupId: this.selectionGroupId
+            });
+            this.handleCloseAddMoreDialog();
+        }
+    }
+    render() {
+        return (h("div", { key: '66b8e9c63d948eb2f7eb37adb80892dbedd7df9a', class: "lottery-selection-group", ref: (el) => (this.stylingContainer = el) }, h("div", { key: '6562fdcad0f352b5e2d03edcc980a9aeab32277e', class: "lottery-selection-group__item" }, this.selectionGroupLabel && (h("div", { key: '43c2132e4904a2b69b970d9b2074f120ed4d0986', class: "lottery-selection-group__item--left" }, this.selectionGroupLabel)), this.renderBulletGroup()), h("lottery-tipping-dialog", { key: 'cb693d10e6b499628909571021d8508cdebbe29a', visible: this.dialogConfig.visible, width: this.dialogConfig.width, onCancel: this.dialogConfig.onCancel }, h("div", { key: 'dd312634574bbe1b4d3de7e82a9c58f58f846c1a', class: "addSelectionDialog" }, h("div", { key: 'b371b1090598f0219a7c652bab51e9d349703c34', class: "addSelectionDialog-title" }, this.dialogTitle || (this.bulletTextType === 'text'
+            ? translate$1('enterValue', this.language)
+            : translate$1('enterScoreUpTo', this.language, {
+                maxScore: this.maxIntegerBulletText
+            }))), h("input", { key: 'b5f1bb74999246dac8dc20f04e3af893deae6654', type: "text", class: {
+                'dialog-input': true,
+                invalid: !this.inputInfo.valid
+            }, value: this.inputInfo.value, onInput: this.handleInputChange.bind(this), placeholder: this.dialogInputPlaceholder }), h("div", { key: 'f33970a6dffdc881ffa9cf2c0bb54b26b27cccd6', class: "error-message" }, this.inputInfo.errorMessage)), h("div", { key: '4c580dae14b38aff03e17067b2c0b72d01aa4f42', slot: "footer", class: "addSelectionDialog-footer" }, h("lottery-button", { key: '874aa0ffde8fe2d0b08efea0cf951f101ab8dad0', onClick: this.dialogConfig.onCancel, text: translate$1('cancel', this.language), variant: "outline" }), h("lottery-button", { key: '63a556eb5f9ad1cdd357c017756be274d40ef235', onClick: this.dialogConfig.onConfirm, text: translate$1('confirm', this.language), variant: "primary", disabled: !this.inputInfo.valid || !this.inputInfo.value })))));
+    }
+    static get watchers() { return {
+        "clientStyling": ["handleClientStylingChange"],
+        "clientStylingUrl": ["handleClientStylingUrlChange"],
+        "mbSource": ["handleMbSourceChange"]
+    }; }
+};
+LotterySelectionGroup.style = LotterySelectionGroupStyle0;
+
+const DEFAULT_LANGUAGE = 'en';
+const SUPPORTED_LANGUAGES = ['ro', 'en', 'fr', 'ar', 'hr'];
+const TRANSLATIONS = {
+    en: {
+        cancel: 'Cancel',
+        confirm: 'Confirm'
+    },
+    ro: {
+        cancel: 'Anulează',
+        confirm: 'Confirmă'
+    },
+    fr: {
+        cancel: 'Annuler',
+        confirm: 'Confirmer'
+    },
+    ar: {
+        cancel: 'إلغاء',
+        confirm: 'تأكيد'
+    },
+    hr: {
+        cancel: 'Odustani',
+        confirm: 'Potvrdi'
+    }
+};
+const translate = (key, customLang) => {
+    const lang = customLang;
+    return TRANSLATIONS[lang !== undefined && SUPPORTED_LANGUAGES.includes(lang) ? lang : DEFAULT_LANGUAGE][key];
+};
+const getTranslations = (data) => {
+    Object.keys(data).forEach((item) => {
+        for (let key in data[item]) {
+            TRANSLATIONS[item][key] = data[item][key];
+        }
+    });
+};
+const resolveTranslationUrl = async (translationUrl) => {
+    if (translationUrl) {
+        try {
+            const response = await fetch(translationUrl);
+            if (!response.ok) {
+                throw new Error(`HTTP error! status: ${response.status}`);
+            }
+            const translations = await response.json();
+            getTranslations(translations);
+        }
+        catch (error) {
+            console.error('Failed to fetch or parse translations from URL:', error);
+        }
+    }
+};
+
+const lotteryTippingDialogCss = ".dialog-wrapper{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;visibility:hidden;opacity:1;z-index:199}.dialog-wrapper-visible{visibility:visible}.mask{position:fixed;inset:0;background-color:rgba(0, 0, 0, 0.5);opacity:0;z-index:1000;transition:opacity var(--duration) linear}.mask-enter{opacity:1}.mask-leave{opacity:0}.dialog{position:relative;background:var(--emw--color-background, #fff);border-radius:12px;box-shadow:0 4px 32px rgba(0, 0, 0, 0.15);opacity:0;transform:scale(0.9);transition:all var(--duration) linear;width:100%;max-width:100vw;overflow:hidden;z-index:1000}.dialog-enter{opacity:1;transform:scale(1)}.dialog-leave{opacity:0}.dialog.fullscreen{width:100vw !important;height:100vh;overflow:auto;max-height:none;border-radius:0;overflow:hidden}.dialog-header{padding:16px 16px 0 16px;display:flex;justify-content:space-between;align-items:center}.dialog-header .dialog-title{margin:0;font-size:1.25rem;font-weight:500;color:var(--emw--color-typography, #000)}.dialog-header .close-btn{background:transparent;border:none;font-size:1.5rem;width:2rem;height:2rem;color:var(--emw--color-gray-150, #6f6f6f);cursor:pointer;border-radius:4px}.dialog-header .close-btn:hover{background:var(--emw--color-gray-50, #f5f5f5);color:var(--emw--color-gray-300, #333)}.dialog-content{padding:24px;font-size:0.95rem;line-height:1.6;color:var(--emw--color-dialog-typography, #000);flex:1;overflow-y:auto;max-height:calc(100vh - 200px)}.dialog.fullscreen .dialog-content{max-height:none}.dialog-footer{padding:0 16px 16px 16px;display:flex;justify-content:center;gap:12px}.dialog-footer .cancel-btn,.dialog-footer .confirm-btn{padding:10px 24px;border-radius:6px;font-size:0.9rem;cursor:pointer;transition:all 0.3s linear}.dialog-footer .cancel-btn{border:var(--emw--button-border, 1px solid rgba(221, 221, 221, 0.8666666667));background-color:var(--emw--color-background, #fff);color:var(--emw--color-typography, #000)}.dialog-footer .cancel-btn:hover{background-color:var(--emw--color-background-tertiary, #ccc)}.dialog-footer .confirm-btn{border:none;color:var(--emw--color-typography-normalized, #ffffff);background:var(--emw--color-primary, #009993)}.dialog-footer .confirm-btn:hover{background:var(--emw--color-primary-variant, #004d4a)}@media screen and (max-width: 480px){.dialog.fullscreen .dialog-content{padding:12px}}.Loading{display:flex;align-items:center;justify-content:center;width:100%;height:100%}.Loading svg{animation:spin 1s linear infinite;transform-origin:center}@keyframes spin{100%{transform:rotate(360deg)}}";
+const LotteryTippingDialogStyle0 = lotteryTippingDialogCss;
+
+const LotteryTippingDialog = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.open = createEvent(this, "open", 7);
+        this.close = createEvent(this, "close", 7);
+        this.confirm = createEvent(this, "confirm", 7);
+        this.cancel = createEvent(this, "cancel", 7);
+        this.wasVisible = false;
+        this.mbSource = undefined;
+        this.clientStyling = '';
+        this.clientStylingUrl = '';
+        this.visible = undefined;
+        this.dialogTitle = '';
+        this.width = '520px';
+        this.closable = true;
+        this.mask = true;
+        this.maskClosable = true;
+        this.animationDuration = 300;
+        this.fullscreen = false;
+        this.showFooter = true;
+        this.showCancelBtn = true;
+        this.language = 'en';
+        this.translationUrl = undefined;
+        this.dialogClass = undefined;
+        this.dialogStyle = undefined;
+    }
+    handleClientStylingChange(newValue, oldValue) {
+        if (newValue != oldValue) {
+            setClientStyling(this.stylingContainer, this.clientStyling);
+        }
+    }
+    handleClientStylingUrlChange(newValue, oldValue) {
+        if (newValue != oldValue) {
+            setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
+        }
+    }
+    handleMbSourceChange(newValue, oldValue) {
+        if (newValue != oldValue) {
+            setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`);
+        }
+    }
+    componentWillLoad() {
+        if (this.translationUrl) {
+            resolveTranslationUrl(this.translationUrl);
+        }
+    }
+    componentWillUpdate() {
+        if (this.visible && !this.wasVisible) {
+            this.disableBodyScroll();
+        }
+        else if (!this.visible && this.wasVisible) {
+            this.enableBodyScroll();
+        }
+        this.wasVisible = this.visible;
+    }
+    disconnectedCallback() {
+        this.enableBodyScroll();
+        this.stylingSubscription && this.stylingSubscription.unsubscribe();
+    }
+    disableBodyScroll() {
+        document.body.style.overflow = 'hidden';
+    }
+    enableBodyScroll() {
+        document.body.style.overflow = '';
+    }
+    handleClose() {
+        this.cancel.emit();
+    }
+    handleMaskClick() {
+        if (this.maskClosable) {
+            this.cancel.emit();
+        }
+    }
+    handleConfirm() {
+        this.confirm.emit();
+    }
+    render() {
+        const computedDialogStyle = Object.assign({ width: typeof this.width === 'number' ? `${this.width}px` : this.width, '--duration': `${this.animationDuration}ms` }, (this.dialogStyle || {}));
+        const dialogWrapperClass = ['dialog-wrapper', this.visible ? 'dialog-wrapper-visible' : ''];
+        const maskClass = ['mask', this.visible ? 'mask-enter' : 'mask-leave'];
+        const computedDialogClass = [
+            'dialog',
+            this.visible ? 'dialog-enter' : 'dialog-leave',
+            this.fullscreen ? 'fullscreen' : '',
+            this.dialogClass
+        ]
+            .filter(Boolean)
+            .join(' ');
+        const contentStyle = {
+            maxHeight: 'calc(100vh - 62px)',
+            overflowY: 'auto'
+        };
+        return (h("div", { key: '306683c5190fa6dca57dcf75e52eca575c0215e7', class: dialogWrapperClass.join(' '), ref: (el) => (this.stylingContainer = el) }, h("div", { key: '8be097f3a86fcd9ad4e18c6ac56cafdcf249049b', class: maskClass.join(' '), onClick: this.handleMaskClick.bind(this) }), h("div", { key: '87d2206d3e3d75fe0e0ef8a6afd8de5c20892ae6', part: "dialog", class: computedDialogClass, style: computedDialogStyle, role: "dialog", "aria-modal": "true", "aria-labelledby": "dialog-title" }, h("div", { key: '30ca33b925ff2525ead8aae83e72031258367b40', class: "dialog-header" }, h("h2", { key: '492c3e864ac1547da58b0a47e4cc8d45470bde54', id: "dialog-title", class: "dialog-title" }, this.dialogTitle), this.closable && (h("button", { key: '8ae4b872d18ce82d33292dc794e8a1f714a96ba9', class: "close-btn", onClick: this.handleClose.bind(this) }, "x"))), h("div", { key: 'd661c78b333f78b9dee92e0975f8b136ef5a3071', class: "dialog-content", style: contentStyle }, h("slot", { key: 'f32a6f6e4962239e0148e61c4bb70f6b5d3a2c82' })), this.showFooter && (h("div", { key: '40b5e9fd1c9221eb4d6c87d053c5d018f540d8e7', class: "dialog-footer" }, h("slot", { key: '91539def47d118a69735ec229e7a6b36fc1db40b', name: "footer" }, this.showCancelBtn && (h("button", { key: 'f3b3add23f150c660159a906c2ef23b5fbe3b4c5', class: "cancel-btn", onClick: this.handleClose.bind(this) }, translate('cancel', this.language))), h("button", { key: '5fc33e89b6c55ac9e2162302e128bce0e79c5f89', class: "confirm-btn", onClick: this.handleConfirm.bind(this) }, translate('confirm', this.language))))))));
+    }
+    get el() { return getElement(this); }
+    static get watchers() { return {
+        "clientStyling": ["handleClientStylingChange"],
+        "clientStylingUrl": ["handleClientStylingUrlChange"],
+        "mbSource": ["handleMbSourceChange"]
+    }; }
+};
+LotteryTippingDialog.style = LotteryTippingDialogStyle0;
+
+const uiSkeletonCss = ":host{display:block}.Skeleton{animation:skeleton-loading 1s linear infinite alternate}.SkeletonRectangle{background-color:var(--emw-skeleton-rectangle-background, #c2c2c2);width:var(--emw-skeleton-rectangle-width, 400px);height:var(--emw-skeleton-rectangle-height, 200px);border-radius:var(--emw-skeleton-rectangle-border-radius, 10px)}.SkeletonCircle{background-color:var(--emw-skeleton-circle-background, #c2c2c2);width:var(--emw-skeleton-circle-size, 400px);height:var(--emw-skeleton-circle-size, 400px);border-radius:50%}.SkeletonText{background-color:var(--emw-skeleton-text-background, #c2c2c2);width:var(--emw-skeleton-text-width, 500px);height:var(--emw-skeleton-text-height, 20px);border-radius:var(--emw-skeleton-text-border-radius, 10px);margin-bottom:var(--emw-skeleton-text-margin-bottom, 5px)}.SkeletonText:last-child{width:calc(var(--emw-skeleton-text-width, 400px) - 100px)}.SkeletonTitle{background-color:var(--emw-skeleton-title-background, #c2c2c2);width:var(--emw-skeleton-title-width, 300px);height:var(--emw-skeleton-title-height, 30px);border-radius:var(--emw-skeleton-title-border-radius, 10px);margin-bottom:var(--emw-skeleton-title-margin-bottom, 5px)}.SkeletonImage{background-color:var(--emw-skeleton-image-background, #c2c2c2);width:var(--emw-skeleton-image-width, 100%);height:var(--emw-skeleton-image-height, 100%);border-radius:var(--emw-skeleton-image-border-radius, unset)}.SkeletonLogo{background-color:var(--emw-skeleton-logo-background, #c2c2c2);width:var(--emw-skeleton-logo-width, 120px);height:var(--emw-skeleton-logo-height, 75px);border-radius:var(--emw-skeleton-logo-border-radius, 10px)}@keyframes skeleton-loading{0%{background-color:var(--emw-skeleton-primary-color, #e0e0e0)}100%{background-color:var(--emw-skeleton-secondary-color, #f0f0f0)}}";
+const UiSkeletonStyle0 = uiSkeletonCss;
+
+const UiSkeleton = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.stylingValue = {
+            width: this.handleStylingProps(this.width),
+            height: this.handleStylingProps(this.height),
+            borderRadius: this.handleStylingProps(this.borderRadius),
+            marginBottom: this.handleStylingProps(this.marginBottom),
+            marginTop: this.handleStylingProps(this.marginTop),
+            marginLeft: this.handleStylingProps(this.marginLeft),
+            marginRight: this.handleStylingProps(this.marginRight),
+            size: this.handleStylingProps(this.size),
+        };
+        this.structure = undefined;
+        this.width = 'unset';
+        this.height = 'unset';
+        this.borderRadius = 'unset';
+        this.marginBottom = 'unset';
+        this.marginTop = 'unset';
+        this.marginLeft = 'unset';
+        this.marginRight = 'unset';
+        this.animation = true;
+        this.rows = 0;
+        this.size = '100%';
+    }
+    handleStructureChange(newValue, oldValue) {
+        if (oldValue !== newValue) {
+            this.handleStructure(newValue);
+        }
+    }
+    handleStylingProps(value) {
+        switch (typeof value) {
+            case 'number':
+                return value === 0 ? 0 : `${value}px`;
+            case 'undefined':
+                return 'unset';
+            case 'string':
+                if (['auto', 'unset', 'none', 'inherit', 'initial'].includes(value) ||
+                    value.endsWith('px') ||
+                    value.endsWith('%')) {
+                    return value;
+                }
+                else {
+                    return 'unset';
+                }
+            default:
+                return 'unset';
+        }
+    }
+    handleStructure(structure) {
+        switch (structure) {
+            case 'logo':
+                return this.renderLogo();
+            case 'image':
+                return this.renderImage();
+            case 'title':
+                return this.renderTitle();
+            case 'text':
+                return this.renderText();
+            case 'rectangle':
+                return this.renderRectangle();
+            case 'circle':
+                return this.renderCircle();
+            default:
+                return null;
+        }
+    }
+    renderLogo() {
+        return (h("div", { class: "SkeletonContainer" }, h("div", { class: 'SkeletonLogo ' + (this.animation ? 'Skeleton' : '') })));
+    }
+    renderImage() {
+        return h("div", { class: 'SkeletonImage ' + (this.animation ? 'Skeleton' : '') });
+    }
+    renderTitle() {
+        return (h("div", { class: "SkeletonContainer" }, h("div", { class: 'SkeletonTitle ' + (this.animation ? 'Skeleton' : '') })));
+    }
+    renderText() {
+        return (h("div", { class: "SkeletonContainer" }, Array.from({ length: this.rows > 0 ? this.rows : 1 }).map((_, index) => (h("div", { key: index, class: 'SkeletonText ' + (this.animation ? 'Skeleton' : '') })))));
+    }
+    renderRectangle() {
+        return (h("div", { class: "SkeletonContainer" }, h("div", { class: 'SkeletonRectangle ' + (this.animation ? 'Skeleton' : '') })));
+    }
+    renderCircle() {
+        return (h("div", { class: "SkeletonContainer" }, h("div", { class: 'SkeletonCircle ' + (this.animation ? 'Skeleton' : '') })));
+    }
+    render() {
+        let styleBlock = '';
+        switch (this.structure) {
+            case 'logo':
+                styleBlock = `
+          :host {
+            --emw-skeleton-logo-width: ${this.stylingValue.width};
+            --emw-skeleton-logo-height: ${this.stylingValue.height};
+            --emw-skeleton-logo-border-radius: ${this.stylingValue.borderRadius};
+            --emw-skeleton-logo-margin-bottom: ${this.stylingValue.marginBottom};
+            --emw-skeleton-logo-margin-top: ${this.stylingValue.marginTop};
+            --emw-skeleton-logo-margin-left: ${this.stylingValue.marginLeft};
+            --emw-skeleton-logo-margin-right: ${this.stylingValue.marginRight};
+          }
+        `;
+                break;
+            case 'image':
+                styleBlock = `
+          :host {
+            --emw-skeleton-image-width: ${this.stylingValue.width};
+            --emw-skeleton-image-height: ${this.stylingValue.height};
+            --emw-skeleton-image-border-radius: ${this.stylingValue.borderRadius};
+            --emw-skeleton-image-margin-bottom: ${this.stylingValue.marginBottom};
+            --emw-skeleton-image-margin-top: ${this.stylingValue.marginTop};
+            --emw-skeleton-image-margin-left: ${this.stylingValue.marginLeft};
+            --emw-skeleton-image-margin-right: ${this.stylingValue.marginRight};
+          }
+        `;
+                break;
+            case 'title':
+                styleBlock = `
+          :host {
+            --emw-skeleton-title-width: ${this.stylingValue.width};
+            --emw-skeleton-title-height: ${this.stylingValue.height};
+            --emw-skeleton-title-border-radius: ${this.stylingValue.borderRadius};
+            --emw-skeleton-title-margin-bottom: ${this.stylingValue.marginBottom};
+            --emw-skeleton-title-margin-top: ${this.stylingValue.marginTop};
+            --emw-skeleton-title-margin-left: ${this.stylingValue.marginLeft};
+            --emw-skeleton-title-margin-right: ${this.stylingValue.marginRight};
+          }
+        `;
+                break;
+            case 'text':
+                styleBlock = `
+          :host {
+            --emw-skeleton-text-width: ${this.stylingValue.width};
+            --emw-skeleton-text-height: ${this.stylingValue.height};
+            --emw-skeleton-text-border-radius: ${this.stylingValue.borderRadius};
+            --emw-skeleton-text-margin-bottom: ${this.stylingValue.marginBottom};
+            --emw-skeleton-text-margin-top: ${this.stylingValue.marginTop};
+            --emw-skeleton-text-margin-left: ${this.stylingValue.marginLeft};
+            --emw-skeleton-text-margin-right: ${this.stylingValue.marginRight};
+          }
+        `;
+                break;
+            case 'rectangle':
+                styleBlock = `
+          :host {
+            --emw-skeleton-rectangle-width: ${this.stylingValue.width};
+            --emw-skeleton-rectangle-height: ${this.stylingValue.height};
+            --emw-skeleton-rectangle-border-radius: ${this.stylingValue.borderRadius};
+            --emw-skeleton-rectangle-margin-bottom: ${this.stylingValue.marginBottom};
+            --emw-skeleton-rectangle-margin-top: ${this.stylingValue.marginTop};
+            --emw-skeleton-rectangle-margin-left: ${this.stylingValue.marginLeft};
+            --emw-skeleton-rectangle-margin-right: ${this.stylingValue.marginRight};
+          }
+        `;
+                break;
+            case 'circle':
+                styleBlock = `
+          :host {
+            --emw-skeleton-circle-size: ${this.stylingValue.size};
+          }
+        `;
+                break;
+            default:
+                styleBlock = '';
+        }
+        return (h(Host, { key: 'c2a2650acd416962a2bc4e1a7ee18bc6d8e2def8' }, h("style", { key: '9bd7fc1f9e9ed9f17735a7b72fce6f09696f5e19' }, styleBlock), this.handleStructure(this.structure)));
+    }
+    static get watchers() { return {
+        "structure": ["handleStructureChange"]
+    }; }
+};
+UiSkeleton.style = UiSkeletonStyle0;
+
+export { LotteryButton as lottery_button, LotteryHakunaTicketHistoryItem as lottery_hakuna_ticket_history_item, LotteryInfiniteScroll as lottery_infinite_scroll, LotterySelection as lottery_selection, LotterySelectionGroup as lottery_selection_group, LotteryTippingDialog as lottery_tipping_dialog, UiSkeleton as ui_skeleton };