@everymatrix/lottery-selection-group 0.0.1

package/dist/cjs/index.cjs.js

@@ -0,0 +1,10 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const lotterySelectionGroup = require('./lottery-selection-group-1608b2e2.js');
+require('./index-bc355d7d.js');
+
+
+
+exports.LotterySelectionGroup = lotterySelectionGroup.LotterySelectionGroup;

package/dist/cjs/loader.cjs.js

@@ -0,0 +1,15 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-bc355d7d.js');
+const appGlobals = require('./app-globals-3a1e7e63.js');
+
+const defineCustomElements = async (win, options) => {
+  if (typeof window === 'undefined') return undefined;
+  await appGlobals.globalScripts();
+  return index.bootstrapLazy([["lottery-button_4.cjs",[[1,"lottery-selection-group",{"mbSource":[513,"mb-source"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"language":[513],"translationUrl":[513,"translation-url"],"splitToken":[513,"split-token"],"selectionGroupId":[513,"selection-group-id"],"selectionGroupLabel":[513,"selection-group-label"],"type":[513],"selectedBulletTexts":[513,"selected-bullet-texts"],"maxSelectedCount":[514,"max-selected-count"],"maxDisplayBulletsCount":[514,"max-display-bullets-count"],"bulletTexts":[513,"bullet-texts"],"maxIntegerBulletText":[514,"max-integer-bullet-text"],"minIntegerBulletText":[514,"min-integer-bullet-text"],"bulletTextType":[513,"bullet-text-type"],"hasBorder":[516,"has-border"],"hasBackground":[516,"has-background"],"dialogTitle":[513,"dialog-title"],"dialogInputPlaceholder":[513,"dialog-input-placeholder"],"dialogConfig":[32],"inputInfo":[32]},[[0,"lotteryBulletClick","lotteryBulletClickHandler"]],{"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingUrlChange"],"mbSource":["handleMbSourceChange"]}],[1,"lottery-button",{"variant":[513],"size":[513],"color":[513],"disabled":[516],"loading":[516],"text":[513],"mbSource":[513,"mb-source"],"language":[513],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"translationUrl":[513,"translation-url"],"ripples":[32]},null,{"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingUrlChange"],"mbSource":["handleMbSourceChange"]}],[1,"lottery-selection",{"value":[520],"text":[513],"idx":[514],"type":[513],"mbSource":[513,"mb-source"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"hasBorder":[516,"has-border"],"hasBackground":[516,"has-background"],"deleteIconSvg":[513,"delete-icon-svg"],"deleteIconWidth":[513,"delete-icon-width"],"deleteIconHeight":[513,"delete-icon-height"]},null,{"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingUrlChange"],"mbSource":["handleMbSourceChange"]}],[1,"lottery-tipping-dialog",{"mbSource":[1,"mb-source"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"visible":[516],"dialogTitle":[1,"dialog-title"],"width":[1],"closable":[4],"mask":[4],"maskClosable":[4,"mask-closable"],"animationDuration":[2,"animation-duration"],"fullscreen":[4],"showFooter":[4,"show-footer"],"showCancelBtn":[4,"show-cancel-btn"],"language":[513],"translationUrl":[520,"translation-url"]},null,{"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingUrlChange"],"mbSource":["handleMbSourceChange"]}]]]], options);
+};
+
+exports.setNonce = index.setNonce;
+exports.defineCustomElements = defineCustomElements;

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

@@ -0,0 +1,486 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-bc355d7d.js');
+const lotterySelectionGroup = require('./lottery-selection-group-1608b2e2.js');
+
+const DEFAULT_LANGUAGE$1 = 'en';
+const SUPPORTED_LANGUAGES$1 = ['ro', 'en', 'fr', 'ar', 'hr', 'zh'];
+const TRANSLATIONS$1 = {
+    en: {
+        loading: 'Loading'
+    },
+    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];
+        }
+    });
+};
+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$1(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) {
+        index.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) {
+            lotterySelectionGroup.setClientStyling(this.stylingContainer, this.clientStyling);
+        }
+    }
+    handleClientStylingUrlChange(newValue, oldValue) {
+        if (newValue != oldValue) {
+            lotterySelectionGroup.setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
+        }
+    }
+    handleMbSourceChange(newValue, oldValue) {
+        if (newValue != oldValue) {
+            lotterySelectionGroup.setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`);
+        }
+    }
+    disconnectedCallback() {
+        this.stylingSubscription && this.stylingSubscription.unsubscribe();
+    }
+    componentDidLoad() {
+        if (this.stylingContainer) {
+            if (this.mbSource)
+                lotterySelectionGroup.setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`);
+            if (this.clientStyling)
+                lotterySelectionGroup.setClientStyling(this.stylingContainer, this.clientStyling);
+            if (this.clientStylingUrl)
+                lotterySelectionGroup.setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
+        }
+    }
+    componentWillLoad() {
+        if (this.translationUrl) {
+            resolveTranslationUrl$1(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 (index.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 ? (index.h("div", { class: "loading-container" }, index.h("span", { class: "content" }, this.text || translate$1('loading', this.language)), index.h("span", { class: "spinner" }))) : (index.h("span", { class: "content" }, index.h("slot", { name: "icon-left" }), this.text || index.h("slot", null), index.h("slot", { name: "icon-right" }))), index.h("div", { key: '302ea02be395bb24989d4abc040a513e23fa029a', class: "ripple-container" }, this.ripples.map((ripple, index$1) => (index.h("span", { key: index$1, class: "ripple", style: {
+                top: `${ripple.top}px`,
+                left: `${ripple.left}px`,
+                width: `${ripple.size}px`,
+                height: `${ripple.size}px`
+            } }))))));
+    }
+    get host() { return index.getElement(this); }
+    static get watchers() { return {
+        "clientStyling": ["handleClientStylingChange"],
+        "clientStylingUrl": ["handleClientStylingUrlChange"],
+        "mbSource": ["handleMbSourceChange"]
+    }; }
+};
+LotteryButton.style = LotteryButtonStyle0;
+
+// 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) {
+        index.registerInstance(this, hostRef);
+        this.lotteryBulletClickHandler = index.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) {
+            lotterySelectionGroup.setClientStyling(this.stylingContainer, this.clientStyling);
+        }
+    }
+    handleClientStylingUrlChange(newValue, oldValue) {
+        if (newValue !== oldValue) {
+            lotterySelectionGroup.setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
+        }
+    }
+    handleMbSourceChange(newValue, oldValue) {
+        if (newValue !== oldValue) {
+            lotterySelectionGroup.setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`);
+        }
+    }
+    componentDidLoad() {
+        if (this.stylingContainer) {
+            if (this.mbSource)
+                lotterySelectionGroup.setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`);
+            if (this.clientStyling)
+                lotterySelectionGroup.setClientStyling(this.stylingContainer, this.clientStyling);
+            if (this.clientStylingUrl)
+                lotterySelectionGroup.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 (index.h("div", { key: '0d1e8aaa80a907a7467410f6b27b4b6175e82299', class: "lottery-selection", ref: (el) => (this.stylingContainer = el) }, index.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' && index.h("span", { key: 'f99001d936a8f7bdf8adc5c46e82caf730a9442a', class: "lottery-selection__delete-icon", innerHTML: iconToRender }), index.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 = '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) {
+        index.registerInstance(this, hostRef);
+        this.open = index.createEvent(this, "open", 7);
+        this.close = index.createEvent(this, "close", 7);
+        this.confirm = index.createEvent(this, "confirm", 7);
+        this.cancel = index.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;
+    }
+    handleClientStylingChange(newValue, oldValue) {
+        if (newValue != oldValue) {
+            lotterySelectionGroup.setClientStyling(this.stylingContainer, this.clientStyling);
+        }
+    }
+    handleClientStylingUrlChange(newValue, oldValue) {
+        if (newValue != oldValue) {
+            lotterySelectionGroup.setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
+        }
+    }
+    handleMbSourceChange(newValue, oldValue) {
+        if (newValue != oldValue) {
+            lotterySelectionGroup.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(e) {
+        if (this.maskClosable && e.target === this.el.querySelector('.mask')) {
+            this.cancel.emit();
+        }
+    }
+    handleConfirm() {
+        this.confirm.emit();
+    }
+    render() {
+        const dialogStyle = {
+            width: typeof this.width === 'number' ? `${this.width}px` : this.width,
+            '--duration': `${this.animationDuration}ms`
+        };
+        const dialogWrapperClass = ['dialog-wrapper', this.visible ? 'dialog-wrapper-visible' : ''];
+        const maskClass = ['mask', this.visible ? 'mask-enter' : 'mask-leave'];
+        const dialogClass = [
+            'dialog',
+            this.visible ? 'dialog-enter' : 'dialog-leave',
+            this.fullscreen ? 'fullscreen' : ''
+        ].join(' ');
+        const contentStyle = {
+            maxHeight: 'calc(100vh - 62px)',
+            overflowY: 'auto'
+        };
+        return (index.h("div", { key: '716c6488b86fc5a74bcd8c8c8a4eee1b85f75cb7', class: dialogWrapperClass.join(' '), ref: (el) => (this.stylingContainer = el) }, index.h("div", { key: '161d976b5a15f62c63b56555e161b5b29c0a7771', class: maskClass.join(' '), onClick: this.handleMaskClick.bind(this) }), index.h("div", { key: 'ebd2c356c169765b06c85997dc9906b74358b450', class: dialogClass, style: dialogStyle, role: "dialog", "aria-modal": "true", "aria-labelledby": "dialog-title" }, index.h("div", { key: '2a8616c336447b33d3c4b3f22deee3871abd93c9', class: "dialog-header" }, index.h("h2", { key: 'fc4f4f87826620754f8cce73874726cdebcc280e', id: "dialog-title", class: "dialog-title" }, this.dialogTitle), this.closable && (index.h("button", { key: '1626434c0700df7dc094cbf0c96840476ab65da5', class: "close-btn", onClick: this.handleClose.bind(this) }, "x"))), index.h("div", { key: '44d28c0e477e3e16069749f7700ee70b6a486d07', class: "dialog-content", style: contentStyle }, index.h("slot", { key: '745e1329fc3647247245f7aa96d10a06b6b18329' })), this.showFooter && (index.h("div", { key: 'cc3b19ba0ab16fd485f2c4e81a5793a25cecb98f', class: "dialog-footer" }, index.h("slot", { key: '906adc00a3735e096159002b972804cfe147f42e', name: "footer" }, this.showCancelBtn && (index.h("button", { key: '1fc68b04c7c39ca9b7dfb228836eb38c4368c355', class: "cancel-btn", onClick: this.handleClose.bind(this) }, translate('cancel', this.language))), index.h("button", { key: '1d054ca93148286249d4989c783a67e1afe33667', class: "confirm-btn", onClick: this.handleConfirm.bind(this) }, translate('confirm', this.language))))))));
+    }
+    get el() { return index.getElement(this); }
+    static get watchers() { return {
+        "clientStyling": ["handleClientStylingChange"],
+        "clientStylingUrl": ["handleClientStylingUrlChange"],
+        "mbSource": ["handleMbSourceChange"]
+    }; }
+};
+LotteryTippingDialog.style = LotteryTippingDialogStyle0;
+
+exports.lottery_selection_group = lotterySelectionGroup.LotterySelectionGroup;
+exports.lottery_button = LotteryButton;
+exports.lottery_selection = LotterySelection;
+exports.lottery_tipping_dialog = LotteryTippingDialog;