@everymatrix/lottery-hakuna-ticket-buy 0.0.1

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

@@ -0,0 +1,1276 @@
+import { r as registerInstance, h, g as getElement, c as createEvent } from './index-1f778cb5.js';
+import { s as setClientStyling, a as setClientStylingURL, b as setStreamStyling } from './lottery-hakuna-ticket-buy-a9f8e014.js';
+export { L as lottery_hakuna_ticket_buy } from './lottery-hakuna-ticket-buy-a9f8e014.js';
+
+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 lotteryHakunaCollapseCss = ":host{display:block;width:100%;box-sizing:border-box}.lottery-hakuna-collapse{border:var(--lottery-hakuna-collapse-border-width, 1px) solid transparent;border-radius:var(--lottery-hakuna-collapse-border-radius, 12px);background-origin:border-box;background-clip:padding-box, border-box;background-image:linear-gradient(var(--lottery-hakuna-collapse-bg, #120505), var(--lottery-hakuna-collapse-bg, #120505)), linear-gradient(to top left, var(--lottery-hakuna-collapse-border-gradient-start, #c52217) var(--lottery-hakuna-collapse-border-gradient-start-stop, 32%), var(--lottery-hakuna-collapse-border-gradient-end, #2c2525) var(--lottery-hakuna-collapse-border-gradient-end-stop, 68%));overflow:hidden;margin-bottom:var(--lottery-hakuna-collapse-margin-bottom, 10px)}.lottery-hakuna-collapse .header{display:flex;justify-content:space-between;align-items:center;padding:var(--lottery-hakuna-collapse-header-padding, 20px);cursor:pointer;user-select:none}.lottery-hakuna-collapse .header .header-content{display:flex;align-items:center;flex:1;gap:var(--lottery-hakuna-collapse-header-gap, 8px)}.lottery-hakuna-collapse .header .title{font-size:var(--lottery-hakuna-collapse-title-size, 16px);font-weight:var(--lottery-hakuna-collapse-title-weight, 600);color:var(--lottery-hakuna-collapse-title-color, #fff)}.lottery-hakuna-collapse .header .icon{color:var(--lottery-hakuna-collapse-icon-color, #fff);font-size:var(--lottery-hakuna-collapse-icon-size, 12px);transition:transform 0.3s ease}.lottery-hakuna-collapse .header .icon.is-open{transform:rotate(180deg)}.lottery-hakuna-collapse .content{padding:var(--lottery-hakuna-collapse-content-padding, 0 20px 20px 20px);color:var(--lottery-hakuna-collapse-content-color, #fff);font-size:var(--lottery-hakuna-collapse-content-size, 14px);line-height:var(--lottery-hakuna-collapse-content-line-height, 1.5)}";
+const LotteryHakunaCollapseStyle0 = lotteryHakunaCollapseCss;
+
+const LotteryHakunaCollapse = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.mbSource = undefined;
+        this.clientStyling = undefined;
+        this.clientStylingUrl = undefined;
+        this.headerTitle = '';
+        this.collapsed = true;
+        this.isOpen = false;
+        this.hasSummary = false;
+    }
+    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() {
+        this.isOpen = !this.collapsed;
+    }
+    componentWillRender() {
+        this.hasSummary = !!this.el.querySelector('[slot="summary"]');
+    }
+    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();
+    }
+    async toggle() {
+        this.isOpen = !this.isOpen;
+    }
+    render() {
+        const showContent = this.isOpen || this.hasSummary;
+        return (h("div", { key: '5e28ba28bf46f6a22f749bbd878aef8972bb7eeb', ref: (el) => (this.stylingContainer = el), class: "lottery-hakuna-collapse" }, h("div", { key: 'ec42a23932c7e0652476743c1cafcfe7e411c2aa', class: "header", onClick: () => this.toggle() }, h("div", { key: '152e98bb7fc69274d61ffff0d6de9f76a1df90f8', class: "header-content" }, this.headerTitle && h("span", { key: '0acc51d711ca12fa1a666dbe1678071a37fa0aff', class: "title" }, this.headerTitle)), h("span", { key: 'ad31e6e3a249a9dca394e725e805422297811f85', class: { icon: true, 'is-open': this.isOpen } }, h("svg", { key: '14bc41acc77204fcb1966f8966dc6feb49730518', xmlns: "http://www.w3.org/2000/svg", width: "18", height: "18", viewBox: "0 0 18 18", fill: "none" }, h("path", { key: 'bac152fc477b275a1792264a35dba2765cf2687f', "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M3.96967 6.21967C4.26256 5.92678 4.73744 5.92678 5.03033 6.21967L9 10.1893L12.9697 6.21967C13.2626 5.92678 13.7374 5.92678 14.0303 6.21967C14.3232 6.51256 14.3232 6.98744 14.0303 7.28033L9.53033 11.7803C9.23744 12.0732 8.76256 12.0732 8.46967 11.7803L3.96967 7.28033C3.67678 6.98744 3.67678 6.51256 3.96967 6.21967Z", fill: "currentColor" })))), showContent && h("div", { key: '0358ec8ccc21286a31f6ffcb770efa6c1bcc36ea', class: "content" }, this.isOpen ? h("slot", null) : h("slot", { name: "summary" }))));
+    }
+    get el() { return getElement(this); }
+    static get watchers() { return {
+        "clientStyling": ["handleClientStylingChange"],
+        "clientStylingUrl": ["handleClientStylingUrlChange"],
+        "mbSource": ["handleMbSourceChange"]
+    }; }
+};
+LotteryHakunaCollapse.style = LotteryHakunaCollapseStyle0;
+
+var CurSelectionBtnType;
+(function (CurSelectionBtnType) {
+    CurSelectionBtnType["UNSELECTED"] = "unselected";
+    CurSelectionBtnType["SELECTED"] = "selected";
+})(CurSelectionBtnType || (CurSelectionBtnType = {}));
+
+const DEFAULT_LANGUAGE$2 = 'en';
+const SUPPORTED_LANGUAGES$2 = ['ro', 'en', 'hr'];
+const TRANSLATIONS$2 = {
+    en: {
+        ticket: 'Ticket',
+        loading: 'Loading, please wait ...',
+        error: 'It was an error while trying to fetch the data',
+        quickPick: 'Quick Pick',
+        submit: 'SUBMIT'
+    },
+    ro: {
+        loading: 'Se incarca, va rugam asteptati ...',
+        error: 'A fost o eroare in timp ce asteptam datele',
+        multiplier: 'Multiplicator',
+        numberOfDraws: 'Numarul de extrageri',
+        wagerPerDraw: 'Pariul per extragere',
+        resetButton: 'Reseteaza',
+        autoButton: 'quick pick',
+        lines: 'Select how many lines you want to buy',
+        lineName: 'Line',
+        playType: 'Select one play type you want to buy'
+    },
+    fr: {
+        loading: 'Loading, please wait ...',
+        error: 'It was an error while trying to fetch the data',
+        multiplier: 'Multiplier',
+        numberOfDraws: 'Number of Draws',
+        wagerPerDraw: 'Wager per Draw',
+        resetButton: 'Reset',
+        autoButton: 'quick pick',
+        lines: 'Select how many lines you want to buy',
+        lineName: 'Line',
+        playType: 'Select one play type you want to buy'
+    },
+    ar: {
+        loading: 'Loading, please wait ...',
+        error: 'It was an error while trying to fetch the data',
+        multiplier: 'Multiplier',
+        numberOfDraws: 'Number of Draws',
+        wagerPerDraw: 'Wager per Draw',
+        resetButton: 'Reset',
+        autoButton: 'quick pick',
+        lines: 'Select how many lines you want to buy',
+        lineName: 'Line',
+        playType: 'Select one play type you want to buy'
+    },
+    hr: {
+        loading: 'Učitavanje, molimo pričekajte ...',
+        error: 'Došlo je do pogreške prilikom pokušaja dohvaćanja podataka',
+        multiplier: 'Multiplikator',
+        numberOfDraws: 'Broj izvlačenja',
+        wagerPerDraw: 'Ulog po izvlačenju',
+        resetButton: 'Resetiraj',
+        autoButton: 'quick pick',
+        lines: 'Select how many lines you want to buy',
+        lineName: 'Line',
+        playType: 'Select one play type you want to buy'
+    }
+};
+const translate$2 = (key, customLang) => {
+    const lang = customLang;
+    return TRANSLATIONS$2[lang !== undefined && SUPPORTED_LANGUAGES$2.includes(lang) ? lang : DEFAULT_LANGUAGE$2][key];
+};
+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 lotteryHakunaTicketCss = "@import url(\"https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap\");:host{--emw--color-background-secondary:var(--emw-hakuna-bg-secondary, #120505);--emw--color-primary:var(--emw-hakuna-color-primary, #c52217);--emw--color-background:var(--emw-hakuna-bg-primary, #2c2525);--emw--color-background-tertiary:var(--emw-hakuna-bg-tertiary, #4f2421);--lottery-button-outline-active-bg:var(--emw-hakuna-bg-tertiary, #4f2421);--lottery-selection-background:var(--emw-hakuna-bg-primary, #2c2525);--lottery-selection-color:var(--emw-hakuna-text-secondary, #b4a5a5);--lottery-selection-group-bullets-gap:10px;--lottery-selection-disabled-background:#392f2f;--lottery-selection-disabled-color:var(--emw-hakuna-bg-secondary, #120505);--lottery-selection-border-radius:6px;--lottery-selection-hover-background:var(--emw-hakuna-bg-tertiary, #4f2421);--lottery-selection-hover-color:var(--emw-hakuna-text-secondary, #b4a5a5)}.hakuna-ticket .icon-btn{display:flex;align-items:center;justify-content:center;height:32px;cursor:pointer;color:var(--emw-hakuna-text-secondary, #b4a5a5);transition:color 0.2s ease, opacity 0.2s ease}.hakuna-ticket .icon-btn.disabled{cursor:not-allowed;opacity:0.5;pointer-events:none}.hakuna-ticket-content-selection{display:flex;align-items:center;gap:12px}.hakuna-ticket-content-selection-text{color:var(--emw-hakuna-text-secondary, #b4a5a5);font-size:12px;font-style:normal;font-weight:500;line-height:normal}.hakuna-ticket-content-selection-dots{display:flex;align-items:center;justify-content:center;gap:4px}.hakuna-ticket-content-selection-dots-item{width:10px;height:10px;border-radius:50%;background-color:var(--emw-hakuna-bg-tertiary, #4f2421);transition:background-color 0.3s ease, transform 0.3s ease;box-shadow:0 2px 4px 0 rgba(0, 0, 0, 0.15)}.hakuna-ticket-content-selection-dots-item.active{background-color:var(--emw-hakuna-color-primary, #c52217);transform:scale(1.06)}.hakuna-ticket-content-bullets{margin:20px 0}.hakuna-ticket-content-bullets.disabled{pointer-events:none;cursor:not-allowed}.hakuna-ticket-content-operation{display:flex;justify-content:space-between}.hakuna-ticket-content-operation--right{display:flex;gap:8px;align-items:center}.hakuna-ticket .cur-selection-btn{display:flex;width:32px;height:32px;justify-content:center;align-items:center;border-radius:6px;background:var(--emw-hakuna-bg-primary, #2c2525);box-shadow:0 2px 4px 0 rgba(0, 0, 0, 0.15);font-size:14px;font-weight:500;color:var(--emw-hakuna-text-secondary, #b4a5a5)}.hakuna-ticket .cur-selection-btn.active{color:var(--emw-hakuna-text-primary, #ffffff);font-weight:700;font-size:16px;background:linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 100%), var(--emw-hakuna-color-primary, #c52217);box-shadow:0 2px 4px 0 rgba(0, 0, 0, 0.15)}.hakuna-ticket-summary-item{display:flex;justify-content:space-between;align-items:center}.hakuna-ticket-summary-selection{display:flex;gap:6px;align-items:center}.hakuna-ticket-summary-operation{display:flex;align-items:center;gap:10px;margin-left:20px}";
+const LotteryHakunaTicketStyle0 = lotteryHakunaTicketCss;
+
+const LotteryHakunaTicket = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.ticketUpdateEvent = createEvent(this, "ticketUpdate", 7);
+        this.deleteTicket = createEvent(this, "deleteTicket", 7);
+        this.editTicket = createEvent(this, "editTicket", 7);
+        this.saveTicket = createEvent(this, "saveTicket", 7);
+        this.MAIN_SELECTION_NAME = 'mainSelection';
+        this.gameName = 'South Africa';
+        this.allowQuickPick = true;
+        this.highNumber = 6;
+        this.lowNumber = 6;
+        this.maximumAllowed = 6;
+        this.minimumAllowed = 2;
+        this.numberRange = [6];
+        this.useCollapse = true;
+        this.isSubmitted = false;
+        this.ticketId = 1;
+        this.language = 'en';
+        this.clientStyling = '';
+        this.clientStylingUrl = '';
+        this.mbSource = undefined;
+        this.translationUrl = undefined;
+        this.disableDelete = false;
+        this.grids = [];
+        this.ticketDone = [];
+        this.quickPicks = [];
+    }
+    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$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);
+        }
+        this.fillInGrids(1);
+    }
+    toggleAutoSelection(index) {
+        this.ticketDone = [...this.ticketDone.slice(0, index), true, ...this.ticketDone.slice(index + 1)];
+        this.quickPicks[index] = true;
+        this.clearSingleGrid(index);
+        this.quickPickSelection(index);
+    }
+    toggleResetSelection(index) {
+        this.ticketDone = [...this.ticketDone.slice(0, index), false, ...this.ticketDone.slice(index + 1)];
+        const newQuickPicks = [...this.quickPicks];
+        newQuickPicks[index] = false;
+        this.quickPicks = newQuickPicks;
+        this.clearSingleGrid(index);
+    }
+    clearAllGrid() {
+        this.grids.forEach((_, index) => {
+            this.toggleResetSelection(index);
+        });
+    }
+    toggleResetAllSelection() {
+        this.fillInGrids(1);
+        this.ticketDone = [false];
+        this.quickPicks = [false];
+        this.updateGridStatus([], this.MAIN_SELECTION_NAME, 0);
+        this.editTicket.emit({ ticketId: this.ticketId });
+    }
+    updateGridStatus(arr, selectionType, gridIdx) {
+        const ticket = {
+            selectionType,
+            id: this.ticketId,
+            index: gridIdx,
+            selectedNumbers: arr,
+            quickPicks: this.quickPicks
+        };
+        this.ticketUpdateEvent.emit(ticket);
+    }
+    bulletGroupUpdateSelectionHandler(event) {
+        var _a;
+        event.stopPropagation();
+        const { newSelectedBulletTexts, selectionGroupId } = event.detail;
+        if (!selectionGroupId) {
+            console.error('Miss selectionGroupId');
+            return;
+        }
+        const selectionGroupIdArray = selectionGroupId.split('-');
+        const gridIdx = Number(selectionGroupIdArray[0]);
+        const groupType = selectionGroupIdArray[1];
+        const newSelectedBulletTextsArray = newSelectedBulletTexts
+            ? (_a = newSelectedBulletTexts.split(',')) === null || _a === void 0 ? void 0 : _a.sort((a, b) => Number(a) - Number(b))
+            : [];
+        this.grids = this.grids.map((grid, index) => {
+            if (index === gridIdx) {
+                if (groupType === this.MAIN_SELECTION_NAME) {
+                    return Object.assign(Object.assign({}, grid), { selection: newSelectedBulletTexts });
+                }
+            }
+            return grid;
+        });
+        if (this.numberRange.includes(newSelectedBulletTextsArray.length)) {
+            this.ticketDone = [...this.ticketDone.slice(0, gridIdx), true, ...this.ticketDone.slice(gridIdx + 1)];
+        }
+        else {
+            this.ticketDone = [...this.ticketDone.slice(0, gridIdx), false, ...this.ticketDone.slice(gridIdx + 1)];
+        }
+        this.quickPicks = [...this.quickPicks.slice(0, gridIdx), false, ...this.quickPicks.slice(gridIdx + 1)];
+        this.updateGridStatus(newSelectedBulletTextsArray, groupType, gridIdx);
+    }
+    shuffleArray(array) {
+        const result = [];
+        while (array.length > 0) {
+            const randomIndex = Math.floor(Math.random() * array.length);
+            result.push(array.splice(randomIndex, 1)[0]);
+        }
+        return result;
+    }
+    quickPickSelection(gridIdx) {
+        const { highNumber, lowNumber } = this;
+        const curAllowedSelectionNum = this.numberRange[0];
+        let array = Array.from({ length: highNumber - lowNumber + 1 }, (_, index) => lowNumber + index);
+        array = this.shuffleArray(array);
+        array = array.slice(0, curAllowedSelectionNum);
+        array.sort((a, b) => a - b);
+        this.grids = this.grids.map((grid, index) => {
+            if (index === gridIdx) {
+                return Object.assign(Object.assign({}, grid), { selection: array.join(',') });
+            }
+            return grid;
+        });
+        // qucikpick is only available for the main selection?
+        this.updateGridStatus(array.map((item) => item.toString()), this.MAIN_SELECTION_NAME, gridIdx);
+    }
+    clearSingleGrid(gridIdx) {
+        this.grids = this.grids.map((grid, index) => {
+            if (index === gridIdx) {
+                return Object.assign(Object.assign({}, grid), { selection: '' });
+            }
+            return grid;
+        });
+        this.updateGridStatus([], this.MAIN_SELECTION_NAME, gridIdx);
+    }
+    fillInGrids(numberOfGrids) {
+        const { highNumber, lowNumber } = this;
+        this.grids = Array.from({ length: numberOfGrids }, (_, index) => ({
+            selection: '',
+            bulletTexts: Array.from({ length: highNumber - lowNumber + 1 }, (_, i) => lowNumber + i).join(','),
+            groupIdx: index,
+            isSubmitted: false
+        }));
+    }
+    renderMainPlaceBet() {
+        const curAllowedSelectionNum = this.numberRange[0];
+        return (h("div", { class: "hakuna-ticket-content" }, this.grids.map((item, index) => {
+            const isGridEmpty = !item.selection;
+            const selectedCount = item.selection ? item.selection.split(',').filter(Boolean).length : 0;
+            return (h("div", null, h("div", { class: "hakuna-ticket-content-selection" }, h("div", { class: "hakuna-ticket-content-selection-text" }, "Pick ", curAllowedSelectionNum, " numbers"), h("div", { class: "hakuna-ticket-content-selection-dots" }, Array.from({ length: curAllowedSelectionNum }, (_, i) => i + 1).map((dotIndex) => (h("div", { key: dotIndex, class: {
+                    'hakuna-ticket-content-selection-dots-item': true,
+                    active: dotIndex <= selectedCount
+                } }))))), h("div", { class: { 'hakuna-ticket-content-bullets': true, disabled: this.isSubmitted } }, h("lottery-selection-group", { type: "bet", hasBorder: false, bulletTexts: item.bulletTexts, selectionGroupId: `${item.groupIdx}-${this.MAIN_SELECTION_NAME}`, "selected-bullet-texts": item.selection, maxSelectedCount: curAllowedSelectionNum, language: this.language, "translation-url": this.translationUrl, "client-styling": this.clientStyling, "client-styling-url": this.clientStylingUrl, "mb-source": this.mbSource })), h("div", { class: "hakuna-ticket-content-operation", style: { display: 'flex', alignItems: 'center' } }, h("div", { class: "hakuna-ticket-content-operation--left" }, h("div", { class: { 'icon-btn': true, disabled: isGridEmpty || this.isSubmitted }, onClick: () => !isGridEmpty && this.toggleResetSelection(index) }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" }, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M0.833374 9.99996C0.833374 5.39759 4.56433 1.66663 9.16671 1.66663C11.4687 1.66663 13.554 2.60112 15.0613 4.10944C15.5943 4.64284 16.1651 5.30202 16.6667 5.91199V3.33329C16.6667 2.87306 17.0398 2.49996 17.5 2.49996C17.9603 2.49996 18.3334 2.87306 18.3334 3.33329V8.33329C18.3334 8.79353 17.9603 9.16663 17.5 9.16663H12.5C12.0398 9.16663 11.6667 8.79353 11.6667 8.33329C11.6667 7.87306 12.0398 7.49996 12.5 7.49996H15.8077C15.2309 6.77602 14.5138 5.91942 13.8824 5.28755C12.6749 4.07924 11.0087 3.33329 9.16671 3.33329C5.48481 3.33329 2.50004 6.31806 2.50004 9.99996C2.50004 13.6819 5.48481 16.6666 9.16671 16.6666C12.2048 16.6666 14.7703 14.6337 15.5729 11.8523C15.7005 11.4101 16.1624 11.155 16.6046 11.2826C17.0468 11.4102 17.3018 11.8721 17.1742 12.3143C16.1713 15.79 12.9671 18.3333 9.16671 18.3333C4.56433 18.3333 0.833374 14.6023 0.833374 9.99996Z", fill: "currentColor" })))), h("div", { class: "hakuna-ticket-content-operation--right" }, this.allowQuickPick && (h("lottery-button", { variant: "outline", color: "var(--emw-hakuna-color-primary, #C52217)", size: "small", onClick: this.toggleAutoSelection.bind(this, index), disabled: this.isSubmitted }, h("span", { slot: "icon-left" }, h("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M7.81557 0.631525C8.05311 0.734641 8.19424 0.982014 8.16212 1.23897L7.66075 5.24995L11.2745 5.24995C11.4151 5.24992 11.5575 5.2499 11.6738 5.26043C11.7838 5.27039 11.9945 5.29674 12.1772 5.44439C12.3864 5.61342 12.5062 5.86924 12.5021 6.13814C12.4986 6.37303 12.384 6.55174 12.3212 6.64264C12.2548 6.73875 12.1636 6.84811 12.0736 6.95609L6.86476 13.2067C6.69898 13.4057 6.42189 13.4715 6.18435 13.3684C5.94681 13.2653 5.80568 13.0179 5.8378 12.7609L6.33917 8.74995L2.72543 8.74995C2.58485 8.74998 2.44246 8.75001 2.32613 8.73947C2.21611 8.72951 2.00543 8.70316 1.82272 8.55551C1.61355 8.38648 1.49373 8.13066 1.49778 7.86176C1.50132 7.62688 1.61595 7.44816 1.67873 7.35726C1.74512 7.26115 1.8363 7.15177 1.92632 7.04379C1.93078 7.03844 1.93523 7.0331 1.93968 7.02776L7.13516 0.793177C7.30094 0.59424 7.57803 0.52841 7.81557 0.631525ZM2.9954 7.58328H6.99996C7.16728 7.58328 7.32654 7.65513 7.43727 7.78057C7.548 7.906 7.59954 8.07295 7.57879 8.23897L7.24224 10.9314L11.0045 6.41662H6.99996C6.83264 6.41662 6.67338 6.34477 6.56265 6.21934C6.45192 6.0939 6.40038 5.92696 6.42113 5.76093L6.75768 3.06855L2.9954 7.58328Z", fill: "white" }))), h("span", { style: { color: '#fff' } }, translate$2('quickPick', this.language)))), h("lottery-button", { variant: "primary", color: "var(--emw-hakuna-color-primary, #C52217)", size: "small", text: translate$2('submit', this.language), disabled: !this.ticketDone[index] || this.isSubmitted, onClick: this.handleSaveTicket.bind(this) })))));
+        })));
+    }
+    renderCurSelectionButton(status, text) {
+        if (status === CurSelectionBtnType.UNSELECTED) {
+            return h("div", { class: "cur-selection-btn unselected" }, "?");
+        }
+        else {
+            return h("div", { class: "cur-selection-btn active" }, " ", text);
+        }
+    }
+    handleEditTicket() {
+        var _a;
+        const { ticketId } = this;
+        this.editTicket.emit({ ticketId });
+        (_a = this.collapseComponent) === null || _a === void 0 ? void 0 : _a.toggle();
+    }
+    handleDelTicket() {
+        const { ticketId } = this;
+        this.deleteTicket.emit({ ticketId });
+    }
+    handleSaveTicket() {
+        var _a;
+        this.saveTicket.emit({ ticketId: this.ticketId });
+        (_a = this.collapseComponent) === null || _a === void 0 ? void 0 : _a.toggle();
+    }
+    renderCurSelection() {
+        const curAllowedSelectionNum = this.numberRange[0];
+        return (h("div", { class: "hakuna-ticket-summary" }, this.grids.map((item, gridIndex) => {
+            const selectionArr = item.selection ? item.selection.split(',').filter(Boolean) : [];
+            selectionArr.sort((a, b) => Number(a) - Number(b));
+            return (h("div", { key: gridIndex, class: "hakuna-ticket-summary-item" }, h("div", { class: "hakuna-ticket-summary-selection" }, Array.from({ length: curAllowedSelectionNum }).map((_, idx) => this.renderCurSelectionButton(idx < selectionArr.length && this.isSubmitted
+                ? CurSelectionBtnType.SELECTED
+                : CurSelectionBtnType.UNSELECTED, selectionArr[idx]))), h("div", { class: "hakuna-ticket-summary-operation" }, h("div", { class: { 'icon-btn': true, disabled: !this.isSubmitted }, onClick: () => this.isSubmitted && this.handleEditTicket() }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "19", height: "19", viewBox: "0 0 19 19", fill: "none" }, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M13.9173 0.757664C14.9276 -0.252556 16.5654 -0.252554 17.5757 0.757667C18.5859 1.76789 18.5859 3.40578 17.5757 4.41601L9.65042 12.3413C9.63402 12.3577 9.61776 12.3739 9.60164 12.3901C9.36341 12.6288 9.15337 12.8392 8.90014 12.9944C8.67769 13.1307 8.43517 13.2312 8.18147 13.2921C7.89269 13.3614 7.59538 13.3611 7.25815 13.3608C7.23533 13.3608 7.21232 13.3608 7.18912 13.3608H5.80132C5.34361 13.3608 4.97256 12.9897 4.97256 12.532V11.1442C4.97256 11.121 4.97254 11.098 4.97251 11.0752C4.9722 10.738 4.97192 10.4406 5.04125 10.1519C5.10216 9.89817 5.20262 9.65564 5.33894 9.43319C5.49411 9.17997 5.70454 8.96993 5.94322 8.7317C5.95937 8.71557 5.97566 8.69932 5.99206 8.68291L13.9173 0.757664ZM16.4036 1.92971C16.0407 1.5668 15.4523 1.5668 15.0894 1.92971L7.16411 9.85496C6.84954 10.1695 6.79154 10.2351 6.75221 10.2992C6.70677 10.3734 6.67328 10.4542 6.65298 10.5388C6.63541 10.612 6.63008 10.6994 6.63008 11.1442V11.7032H7.18912C7.63398 11.7032 7.72134 11.6979 7.79453 11.6803C7.8791 11.66 7.95994 11.6265 8.03409 11.5811C8.09827 11.5418 8.16381 11.4838 8.47837 11.1692L16.4036 3.24396C16.7665 2.88104 16.7665 2.29263 16.4036 1.92971ZM4.7726 1.75807L8.28763 1.75807C8.74535 1.75807 9.11639 2.12912 9.11639 2.58684C9.11639 3.04455 8.74535 3.4156 8.28763 3.4156H4.80683C4.09693 3.4156 3.61434 3.41624 3.24132 3.44672C2.87798 3.47641 2.69217 3.53021 2.56255 3.59626C2.25067 3.75517 1.9971 4.00874 1.83819 4.32062C1.77214 4.45024 1.71833 4.63605 1.68865 4.9994C1.65817 5.37241 1.65753 5.855 1.65753 6.5649V13.5265C1.65753 14.2364 1.65817 14.719 1.68865 15.092C1.71833 15.4554 1.77214 15.6412 1.83819 15.7708C1.9971 16.0827 2.25067 16.3362 2.56255 16.4951C2.69217 16.5612 2.87798 16.615 3.24132 16.6447C3.61434 16.6752 4.09692 16.6758 4.80683 16.6758H11.7684C12.4783 16.6758 12.9609 16.6752 13.3339 16.6447C13.6973 16.615 13.8831 16.5612 14.0127 16.4951C14.3246 16.3362 14.5782 16.0827 14.7371 15.7708C14.8031 15.6412 14.8569 15.4554 14.8866 15.092C14.9171 14.719 14.9177 14.2364 14.9177 13.5265V10.0457C14.9177 9.58799 15.2888 9.21694 15.7465 9.21694C16.2042 9.21694 16.5753 9.58799 16.5753 10.0457V13.5608C16.5753 14.2279 16.5753 14.7785 16.5386 15.227C16.5006 15.6928 16.4189 16.1211 16.2139 16.5233C15.8961 17.1471 15.389 17.6542 14.7652 17.972C14.363 18.177 13.9348 18.2586 13.4689 18.2967C13.0204 18.3334 12.4698 18.3333 11.8027 18.3333H4.77258C4.10546 18.3333 3.55487 18.3334 3.10635 18.2967C2.6405 18.2586 2.21228 18.177 1.81005 17.972C1.18628 17.6542 0.679145 17.1471 0.36132 16.5233C0.156374 16.1211 0.0746879 15.6928 0.0366268 15.227C-1.89071e-05 14.7785 -1.02138e-05 14.2279 3.57439e-07 13.5607V6.53067C-1.02138e-05 5.86354 -1.89071e-05 5.31294 0.0366268 4.86442C0.0746879 4.39858 0.156374 3.97035 0.36132 3.56812C0.679145 2.94436 1.18628 2.43722 1.81005 2.11939C2.21228 1.91445 2.6405 1.83276 3.10635 1.7947C3.55487 1.75805 4.10547 1.75806 4.7726 1.75807Z", fill: "currentColor" }))), h("div", { class: { 'icon-btn': true, disabled: this.disableDelete }, onClick: () => !this.disableDelete && this.handleDelTicket() }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" }, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M9.30123 0.833253H10.6988C11.1381 0.833238 11.5171 0.833225 11.8292 0.858728C12.1587 0.885646 12.4863 0.945075 12.8017 1.10574C13.2721 1.34542 13.6545 1.72787 13.8942 2.19828C14.0549 2.51359 14.1143 2.84128 14.1412 3.17073C14.1641 3.45054 14.1664 3.78406 14.1667 4.16659H17.5C17.9603 4.16659 18.3334 4.53968 18.3334 4.99992C18.3334 5.46016 17.9603 5.83325 17.5 5.83325H16.6667V14.3677C16.6667 15.0385 16.6667 15.5921 16.6299 16.0431C16.5916 16.5115 16.5095 16.9421 16.3034 17.3466C15.9838 17.9738 15.4739 18.4837 14.8467 18.8033C14.4422 19.0094 14.0116 19.0915 13.5432 19.1298C13.0922 19.1666 12.5386 19.1666 11.8678 19.1666H8.13225C7.46145 19.1666 6.90782 19.1666 6.45683 19.1298C5.98842 19.0915 5.55783 19.0094 5.15339 18.8033C4.52618 18.4837 4.01624 17.9738 3.69667 17.3466C3.49059 16.9421 3.40845 16.5115 3.37018 16.0431C3.33333 15.5921 3.33334 15.0385 3.33335 14.3677L3.33335 5.83325H2.50002C2.03978 5.83325 1.66669 5.46016 1.66669 4.99992C1.66669 4.53968 2.03978 4.16659 2.50002 4.16659H5.83338C5.83361 3.78406 5.83597 3.45054 5.85883 3.17073C5.88575 2.84128 5.94518 2.51359 6.10584 2.19828C6.34552 1.72787 6.72797 1.34542 7.19838 1.10574C7.51369 0.945075 7.84138 0.885646 8.17083 0.858728C8.48297 0.833225 8.86194 0.833238 9.30123 0.833253ZM5.00002 5.83325V14.3333C5.00002 15.0471 5.00067 15.5323 5.03131 15.9074C5.06116 16.2727 5.11527 16.4596 5.18168 16.5899C5.34146 16.9035 5.59643 17.1585 5.91004 17.3183C6.04037 17.3847 6.22721 17.4388 6.59255 17.4686C6.96763 17.4993 7.45287 17.4999 8.16669 17.4999H11.8334C12.5472 17.4999 13.0324 17.4993 13.4075 17.4686C13.7728 17.4388 13.9597 17.3847 14.09 17.3183C14.4036 17.1585 14.6586 16.9035 14.8184 16.5899C14.8848 16.4596 14.9389 16.2727 14.9687 15.9074C14.9994 15.5323 15 15.0471 15 14.3333V5.83325H5.00002ZM12.5 4.16659H7.50008C7.50045 3.779 7.503 3.51407 7.51996 3.30645C7.53846 3.08006 7.56985 2.99613 7.59085 2.95493C7.67074 2.79813 7.79823 2.67064 7.95503 2.59075C7.99623 2.56975 8.08016 2.53836 8.30655 2.51986C8.54266 2.50057 8.85289 2.49992 9.33335 2.49992H10.6667C11.1471 2.49992 11.4574 2.50057 11.6935 2.51986C11.9199 2.53836 12.0038 2.56975 12.045 2.59075C12.2018 2.67064 12.3293 2.79813 12.4092 2.95493C12.4302 2.99613 12.4616 3.08006 12.4801 3.30645C12.497 3.51407 12.4996 3.779 12.5 4.16659ZM8.33335 8.74992C8.79359 8.74992 9.16669 9.12302 9.16669 9.58325V13.7499C9.16669 14.2102 8.79359 14.5833 8.33335 14.5833C7.87312 14.5833 7.50002 14.2102 7.50002 13.7499V9.58325C7.50002 9.12302 7.87312 8.74992 8.33335 8.74992ZM11.6667 8.74992C12.1269 8.74992 12.5 9.12302 12.5 9.58325V13.7499C12.5 14.2102 12.1269 14.5833 11.6667 14.5833C11.2064 14.5833 10.8334 14.2102 10.8334 13.7499V9.58325C10.8334 9.12302 11.2064 8.74992 11.6667 8.74992Z", fill: "currentColor" }))))));
+        })));
+    }
+    render() {
+        return (h("div", { key: 'ec4162e1484e14c2ae0ac18961288319ef4bda2b', class: "hakuna-ticket", ref: (el) => (this.stylingContainer = el) }, h("lottery-hakuna-collapse", { key: 'f8ab5f8595947e840fdeb549dca5582eb5d54f0a', ref: (el) => (this.collapseComponent = el), "header-title": `${this.gameName} #${this.ticketId}`, footer: true, collapsed: false, language: this.language, "translation-url": this.translationUrl, "client-styling": this.clientStyling, "client-styling-url": this.clientStylingUrl, "mb-source": this.mbSource }, this.renderMainPlaceBet(), h("div", { key: 'e68dd5bd71f166d26d75b73d747bc3749bd8edd2', slot: "summary" }, this.renderCurSelection()))));
+    }
+    static get watchers() { return {
+        "clientStyling": ["handleClientStylingChange"],
+        "clientStylingUrl": ["handleClientStylingUrlChange"],
+        "mbSource": ["handleMbSourceChange"]
+    }; }
+};
+LotteryHakunaTicket.style = LotteryHakunaTicketStyle0;
+
+// 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;
+
+var __assign = (undefined && undefined.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var defaultColors = {
+    primaryColor: '#333',
+    secondaryColor: '#E6E6E6'
+};
+function renderIconDefinitionToSVGElement(icond, options) {
+    if (options === void 0) { options = {}; }
+    if (typeof icond.icon === 'function') {
+        // two-tone
+        var placeholders = options.placeholders || defaultColors;
+        return renderAbstractNodeToSVGElement(icond.icon(placeholders.primaryColor, placeholders.secondaryColor), options);
+    }
+    // fill, outline
+    return renderAbstractNodeToSVGElement(icond.icon, options);
+}
+function renderAbstractNodeToSVGElement(node, options) {
+    var targetAttrs = node.tag === 'svg'
+        ? __assign(__assign({}, node.attrs), (options.extraSVGAttrs || {})) : node.attrs;
+    var attrs = Object.keys(targetAttrs).reduce(function (acc, nextKey) {
+        var key = nextKey;
+        var value = targetAttrs[key];
+        var token = "".concat(key, "=\"").concat(value, "\"");
+        acc.push(token);
+        return acc;
+    }, []);
+    var attrsToken = attrs.length ? ' ' + attrs.join(' ') : '';
+    var children = (node.children || [])
+        .map(function (child) { return renderAbstractNodeToSVGElement(child, options); })
+        .join('');
+    if (children && children.length) {
+        return "<".concat(node.tag).concat(attrsToken, ">").concat(children, "</").concat(node.tag, ">");
+    }
+    return "<".concat(node.tag).concat(attrsToken, " />");
+}
+
+// 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;
+
+export { LotteryButton as lottery_button, LotteryHakunaCollapse as lottery_hakuna_collapse, LotteryHakunaTicket as lottery_hakuna_ticket, LotterySelection as lottery_selection, LotterySelectionGroup as lottery_selection_group, LotteryTippingDialog as lottery_tipping_dialog };