@everymatrix/lottery-tipping-ticket-controller 1.85.15 → 1.85.17

package/dist/cjs/general-tooltip_7.cjs.entry.js

@@ -0,0 +1,1136 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-3e1fe885.js');
+const lotteryTippingTicketController = require('./lottery-tipping-ticket-controller-1e79780d.js');
+
+/**
+ * @name startOfDay
+ * @category Day Helpers
+ * @summary Return the start of a day for the given date.
+ *
+ * @description
+ * Return the start of a day for the given date.
+ * The result will be in the local timezone.
+ *
+ * @param {Date|Number} date - the original date
+ * @returns {Date} the start of a day
+ * @throws {TypeError} 1 argument required
+ *
+ * @example
+ * // The start of a day for 2 September 2014 11:55:00:
+ * const result = startOfDay(new Date(2014, 8, 2, 11, 55, 0))
+ * //=> Tue Sep 02 2014 00:00:00
+ */
+function startOfDay(dirtyDate) {
+  lotteryTippingTicketController.requiredArgs(1, arguments);
+  var date = lotteryTippingTicketController.toDate(dirtyDate);
+  date.setHours(0, 0, 0, 0);
+  return date;
+}
+
+/**
+ * @name isSameDay
+ * @category Day Helpers
+ * @summary Are the given dates in the same day (and year and month)?
+ *
+ * @description
+ * Are the given dates in the same day (and year and month)?
+ *
+ * @param {Date|Number} dateLeft - the first date to check
+ * @param {Date|Number} dateRight - the second date to check
+ * @returns {Boolean} the dates are in the same day (and year and month)
+ * @throws {TypeError} 2 arguments required
+ *
+ * @example
+ * // Are 4 September 06:00:00 and 4 September 18:00:00 in the same day?
+ * const result = isSameDay(new Date(2014, 8, 4, 6, 0), new Date(2014, 8, 4, 18, 0))
+ * //=> true
+ *
+ * @example
+ * // Are 4 September and 4 October in the same day?
+ * const result = isSameDay(new Date(2014, 8, 4), new Date(2014, 9, 4))
+ * //=> false
+ *
+ * @example
+ * // Are 4 September, 2014 and 4 September, 2015 in the same day?
+ * const result = isSameDay(new Date(2014, 8, 4), new Date(2015, 8, 4))
+ * //=> false
+ */
+function isSameDay(dirtyDateLeft, dirtyDateRight) {
+  lotteryTippingTicketController.requiredArgs(2, arguments);
+  var dateLeftStartOfDay = startOfDay(dirtyDateLeft);
+  var dateRightStartOfDay = startOfDay(dirtyDateRight);
+  return dateLeftStartOfDay.getTime() === dateRightStartOfDay.getTime();
+}
+
+/**
+ * @name isToday
+ * @category Day Helpers
+ * @summary Is the given date today?
+ * @pure false
+ *
+ * @description
+ * Is the given date today?
+ *
+ * > ⚠️ Please note that this function is not present in the FP submodule as
+ * > it uses `Date.now()` internally hence impure and can't be safely curried.
+ *
+ * @param {Date|Number} date - the date to check
+ * @returns {Boolean} the date is today
+ * @throws {TypeError} 1 argument required
+ *
+ * @example
+ * // If today is 6 October 2014, is 6 October 14:00:00 today?
+ * const result = isToday(new Date(2014, 9, 6, 14, 0))
+ * //=> true
+ */
+function isToday(dirtyDate) {
+  lotteryTippingTicketController.requiredArgs(1, arguments);
+  return isSameDay(dirtyDate, Date.now());
+}
+
+const generalTooltipCss = ".general-tooltip-wrapper{display:inline-block;position:relative;line-height:0}.general-tooltip-container{display:contents;}.general-tooltip-popup{position:absolute;color:var(--emw--color-typography-inverse, #fff);background:var(--emw--color-background-inverse, #000);padding:8px 12px;border-radius:4px;font-size:0.875em;line-height:1.4;z-index:1000;opacity:0;visibility:hidden;transition:opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;white-space:nowrap;pointer-events:none;}.general-tooltip-popup.visible{opacity:1;visibility:visible}.general-tooltip-arrow{position:absolute;width:0;height:0;border-style:solid}.general-tooltip-top{bottom:100%;left:50%;transform:translateX(-50%);margin-bottom:8px;}.general-tooltip-top .general-tooltip-arrow{top:100%;left:50%;transform:translateX(-50%);border-width:6px 6px 0 6px;border-color:var(--emw--color-gray-300, #333) transparent transparent transparent}.general-tooltip-bottom{top:100%;left:50%;transform:translateX(-50%);margin-top:8px;}.general-tooltip-bottom .general-tooltip-arrow{bottom:100%;left:50%;transform:translateX(-50%);border-width:0 6px 6px 6px;border-color:transparent transparent var(--emw--color-gray-300, #333) transparent}.general-tooltip-left{right:100%;top:50%;transform:translateY(-50%);margin-right:8px;}.general-tooltip-left .general-tooltip-arrow{left:100%;top:50%;transform:translateY(-50%);border-width:6px 0 6px 6px;border-color:transparent transparent transparent var(--emw--color-gray-300, #333)}.general-tooltip-right{left:100%;top:50%;transform:translateY(-50%);margin-left:8px;}.general-tooltip-right .general-tooltip-arrow{right:100%;top:50%;transform:translateY(-50%);border-width:6px 6px 6px 0;border-color:transparent var(--emw--color-gray-300, #333) transparent transparent}";
+const GeneralTooltipStyle0 = generalTooltipCss;
+
+const GeneralTooltip = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.mbSource = undefined;
+        this.clientStyling = undefined;
+        this.clientStylingUrl = undefined;
+        this.position = 'top';
+        this.delay = 200;
+        this.isVisible = false;
+        this._tooltipId = undefined;
+    }
+    handleClientStylingChange(newValue, oldValue) {
+        if (newValue != oldValue) {
+            lotteryTippingTicketController.setClientStyling(this.stylingContainer, this.clientStyling);
+        }
+    }
+    handleClientStylingUrlChange(newValue, oldValue) {
+        if (newValue != oldValue) {
+            lotteryTippingTicketController.setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
+        }
+    }
+    handleMbSourceChange(newValue, oldValue) {
+        if (newValue != oldValue) {
+            lotteryTippingTicketController.setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`);
+        }
+    }
+    componentWillLoad() {
+        this._tooltipId = `general-tooltip-${Math.random().toString(36).substring(2, 9)}`;
+    }
+    componentDidLoad() {
+        if (this.stylingContainer) {
+            if (this.mbSource)
+                lotteryTippingTicketController.setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`);
+            if (this.clientStyling)
+                lotteryTippingTicketController.setClientStyling(this.stylingContainer, this.clientStyling);
+            if (this.clientStylingUrl)
+                lotteryTippingTicketController.setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
+        }
+    }
+    handleMouseEnterOrFocus() {
+        clearTimeout(this.hideTimeout); // Clear any pending hide
+        if (this.showTimeout)
+            clearTimeout(this.showTimeout);
+        this.showTimeout = setTimeout(() => {
+            this.isVisible = true;
+        }, this.delay);
+    }
+    handleMouseLeaveOrBlur() {
+        if (this.showTimeout)
+            clearTimeout(this.showTimeout);
+        this.hideTimeout = setTimeout(() => {
+            this.isVisible = false;
+        }, 100);
+    }
+    handleKeyDown(event) {
+        if (event.key === 'Escape' && this.isVisible) {
+            this.isVisible = false;
+        }
+    }
+    disconnectedCallback() {
+        this.stylingSubscription && this.stylingSubscription.unsubscribe();
+        clearTimeout(this.showTimeout);
+        clearTimeout(this.hideTimeout);
+    }
+    render() {
+        const tooltipClasses = {
+            'general-tooltip-popup': true,
+            visible: this.isVisible,
+            [`general-tooltip-${this.position}`]: true
+        };
+        return (index.h("div", { key: 'c0d52518e1e196e0d022789f7c6b7e64173b2c7d', class: "general-tooltip-wrapper" }, index.h("slot", { key: 'a935e103e16b0b619a024706e8224f4a937de6b9', name: "trigger" }), index.h("div", { key: '35c60e35ce3f8d5c2c42cd333fe64a3b289d34d4', class: "general-tooltip-container", role: "tooltip", ref: (el) => (this.stylingContainer = el) }, index.h("div", { key: '9d3fd9f142c1e3bd263dee289a2c1a9e4eebfddc', id: this._tooltipId, class: tooltipClasses, role: "tooltip" }, index.h("slot", { key: '31344f0d4d4139f913d1819cc4f42a39f5113d8a', name: "content" }), index.h("div", { key: 'f5cdd93060baec37b2a2879056efe2d66c5a553a', class: "general-tooltip-arrow" })))));
+    }
+    get hostElement() { return index.getElement(this); }
+    static get watchers() { return {
+        "clientStyling": ["handleClientStylingChange"],
+        "clientStylingUrl": ["handleClientStylingUrlChange"],
+        "mbSource": ["handleMbSourceChange"]
+    }; }
+};
+GeneralTooltip.style = GeneralTooltipStyle0;
+
+const DEFAULT_LANGUAGE$2 = 'en';
+const SUPPORTED_LANGUAGES$2 = ['ro', 'en', 'fr', 'ar', 'hr', 'zh'];
+const TRANSLATIONS$2 = {
+    en: {
+        loading: 'Loading'
+    },
+    ro: {},
+    fr: {},
+    ar: {},
+    hr: {}
+};
+const translate$2 = (key, customLang, replacements) => {
+    const lang = customLang;
+    let translation = TRANSLATIONS$2[lang !== undefined && SUPPORTED_LANGUAGES$2.includes(lang) ? lang : DEFAULT_LANGUAGE$2][key];
+    if (replacements) {
+        Object.keys(replacements).forEach((placeholder) => {
+            translation = translation.replace(`{${placeholder}}`, replacements[placeholder]);
+        });
+    }
+    return translation;
+};
+const getTranslations$1 = (data) => {
+    Object.keys(data).forEach((item) => {
+        for (let key in data[item]) {
+            TRANSLATIONS$2[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$1(translations);
+        }
+        catch (error) {
+            console.error('Failed to fetch or parse translations from URL:', error);
+        }
+    }
+};
+
+const lotteryButtonCss = ":host{display:inline-block;font-family:\"PingFang SC\", \"Microsoft YaHei\", \"Helvetica Neue\", Helvetica, Arial, sans-serif}.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;border:1px solid transparent;border-radius:6px;font-weight:500;cursor:pointer;outline:none;overflow:hidden;transition:background-color 0.2s, border-color 0.2s, color 0.2s;user-select:none;-webkit-tap-highlight-color:transparent}.btn .content{position:relative}.btn:disabled{cursor:not-allowed;opacity:0.5}.btn .loading-container{display:flex;align-items:center}.btn--loading{position:relative}.btn .spinner{display:inline-block;width:1em;height:1em;border:2px solid rgba(255, 255, 255, 0.3);border-radius:50%;border-top-color:white;animation:spin 1s ease-in-out infinite;margin-left:0.5em;vertical-align:middle}.btn--small .spinner{width:0.8em;height:0.8em}.btn--large .spinner{width:1.2em;height:1.2em}@keyframes spin{to{transform:rotate(360deg)}}.btn--primary{background-color:var(--emw--color-primary, #0d196e);color:var(--emw--color-typography-inverse, #fff)}.btn--primary:hover:not(:disabled){background-color:var(--emw--color-primary-variant, #1367e7)}.btn--primary:active:not(:disabled){background-color:#08104a}.btn--outline .spinner,.btn--dashed .spinner,.btn--text .spinner{border-top-color:currentColor;border-color:rgba(0, 0, 0, 0.2)}.btn--outline{background-color:var(--emw--color-background, #fff);border-color:#dcdcdc;color:var(--emw--color-typography, #000)}.btn--outline:hover:not(:disabled){background-color:var(--emw--color-background-tertiary, #ccc);border-color:#a6a6a6}.btn--outline:active:not(:disabled){background-color:#e6e6e6}.btn--dashed{background-color:transparent;border-style:dashed;border-color:#dcdcdc;color:#333}.btn--dashed:hover:not(:disabled){border-color:#a6a6a6;color:#0052d9}.btn--text{background-color:transparent;color:#0052d9;border-color:transparent}.btn--text:hover:not(:disabled){background-color:#f2f2f2}.btn--text:active:not(:disabled){background-color:#e6e6e6}.btn--small{height:28px;font-size:12px;padding:0 12px}.btn--medium{height:34px;font-size:14px;padding:0 18px}.btn--large{height:40px;font-size:16px;padding:0 24px}.ripple-container{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden;pointer-events:none;border-radius:inherit}.ripple{position:absolute;border-radius:50%;background-color:rgba(255, 255, 255, 0.3);transform:scale(0);animation:ripple-animation 600ms linear}.btn--outline .ripple,.btn--dashed .ripple,.btn--text .ripple{background-color:rgba(0, 0, 0, 0.1)}@keyframes ripple-animation{to{transform:scale(4);opacity:0}}";
+const 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.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) {
+            lotteryTippingTicketController.setClientStyling(this.stylingContainer, this.clientStyling);
+        }
+    }
+    handleClientStylingUrlChange(newValue, oldValue) {
+        if (newValue != oldValue) {
+            lotteryTippingTicketController.setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
+        }
+    }
+    handleMbSourceChange(newValue, oldValue) {
+        if (newValue != oldValue) {
+            lotteryTippingTicketController.setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`);
+        }
+    }
+    disconnectedCallback() {
+        this.stylingSubscription && this.stylingSubscription.unsubscribe();
+    }
+    componentDidLoad() {
+        if (this.stylingContainer) {
+            if (this.mbSource)
+                lotteryTippingTicketController.setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`);
+            if (this.clientStyling)
+                lotteryTippingTicketController.setClientStyling(this.stylingContainer, this.clientStyling);
+            if (this.clientStylingUrl)
+                lotteryTippingTicketController.setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
+        }
+    }
+    componentWillLoad() {
+        if (this.translationUrl) {
+            resolveTranslationUrl(this.translationUrl);
+        }
+    }
+    render() {
+        const { variant, disabled, size } = this;
+        const isDisabled = disabled || this.loading;
+        return (index.h("button", { key: '19094b8ffd0d13c7e3cdc7139d559214803f0e73', class: {
+                btn: true,
+                [`btn--${variant}`]: true,
+                [`btn--${size}`]: true,
+                'btn--loading': this.loading
+            }, disabled: isDisabled, onClick: this.handleClick }, this.loading ? (index.h("div", { class: "loading-container" }, index.h("span", { class: "content" }, this.text || translate$2('loading', this.language)), index.h("span", { class: "spinner" }))) : (index.h("span", { class: "content" }, this.text)), index.h("div", { key: 'e7e7542f0b79c5bf8e41969e23dd77d9fdec4462', class: "ripple-container" }, this.ripples.map((ripple, index$1) => (index.h("span", { key: index$1, class: "ripple", style: {
+                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;
+
+const lotteryTippingBulletCss = ".LotteryTippingBullet__segment{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;font-size:16px;line-height:1;font-weight:500;color:var(--emw--color-typography, #000);background:var(--emw--color-background, #fff);border:1px solid var(--emw--color-gray-100, #e6e6e6);border-radius:6px;cursor:pointer;transition:all 0.2s ease;user-select:none}.LotteryTippingBullet__segment:not(.LotteryTippingBullet__segment--disabled):hover{cursor:pointer;animation:jelly 0.3s ease-in-out;transform:scale(1.02)}.LotteryTippingBullet__segment--text{border:none;color:var(--emw--color-typography, #000);background:transparent;font-weight:400}.LotteryTippingBullet__segment--text:hover{cursor:not-allowed !important}.LotteryTippingBullet__segment--active{font-weight:600;background-color:var(--emw--color-background-inverse, #000);color:var(--emw--color-primary, #fed275)}.LotteryTippingBullet__segment--disabled:not(.LotteryTippingBullet__segment--active){background-color:var(--emw--color-background-tertiary, #ccc);color:var(--emw--color-gray-150, #6f6f6f);border-color:var(--emw--color-gray-100, #e6e6e6)}.LotteryTippingBullet__segment--disabled:hover{cursor:not-allowed}@keyframes jelly{0%{transform:translate(0, 0)}20%{transform:translate(-0.5px, -0.5px)}40%{transform:translate(0.5px, 0.5px)}60%{transform:translate(-0.25px, -0.25px)}80%{transform:translate(0.25px, 0.25px)}100%{transform:translate(0, 0)}}";
+const LotteryTippingBulletStyle0 = lotteryTippingBulletCss;
+
+const LotteryTippingBullet = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.lotteryTippingBulletToggleEvent = index.createEvent(this, "lotteryTippingBulletToggle", 7);
+        this.mbSource = undefined;
+        this.clientStyling = undefined;
+        this.clientStylingUrl = undefined;
+        this.positionIdx = undefined;
+        this.theme = 'default';
+        this.value = '';
+        this.disabled = false;
+        this.isSelected = false;
+    }
+    handleClientStylingChange(newValue, oldValue) {
+        if (newValue != oldValue) {
+            lotteryTippingTicketController.setClientStyling(this.stylingContainer, this.clientStyling);
+        }
+    }
+    handleClientStylingUrlChange(newValue, oldValue) {
+        if (newValue != oldValue) {
+            lotteryTippingTicketController.setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
+        }
+    }
+    handleMbSourceChange(newValue, oldValue) {
+        if (newValue != oldValue) {
+            lotteryTippingTicketController.setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`);
+        }
+    }
+    componentDidLoad() {
+        if (this.stylingContainer) {
+            if (this.mbSource)
+                lotteryTippingTicketController.setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`);
+            if (this.clientStyling)
+                lotteryTippingTicketController.setClientStyling(this.stylingContainer, this.clientStyling);
+            if (this.clientStylingUrl)
+                lotteryTippingTicketController.setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
+        }
+    }
+    handleClick() {
+        if (!this.disabled) {
+            this.lotteryTippingBulletToggleEvent.emit({ positionIdx: this.positionIdx });
+        }
+    }
+    disconnectedCallback() {
+        this.stylingSubscription && this.stylingSubscription.unsubscribe();
+    }
+    render() {
+        return (index.h("div", { key: 'ef0fee38ed62adb7809b5a60668af6a499ebe5a6', ref: (el) => (this.stylingContainer = el) }, this.theme === 'text' ? (index.h("div", { class: {
+                LotteryTippingBullet__segment: true,
+                'LotteryTippingBullet__segment--text': true
+            } }, this.value)) : (index.h("button", { class: {
+                LotteryTippingBullet__segment: true,
+                'LotteryTippingBullet__segment--disabled': this.disabled,
+                'LotteryTippingBullet__segment--active': this.isSelected
+            }, onClick: this.handleClick.bind(this) }, this.isSelected ? 'X' : this.value))));
+    }
+    static get watchers() { return {
+        "clientStyling": ["handleClientStylingChange"],
+        "clientStylingUrl": ["handleClientStylingUrlChange"],
+        "mbSource": ["handleMbSourceChange"]
+    }; }
+};
+LotteryTippingBullet.style = LotteryTippingBulletStyle0;
+
+const lotteryTippingBulletGroupCss = "";
+const LotteryTippingBulletGroupStyle0 = lotteryTippingBulletGroupCss;
+
+const LotteryTippingBulletGroup = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.lotteryTippingBulletGroupToggleEvent = index.createEvent(this, "lotteryTippingBulletGroupToggle", 7);
+        this.mbSource = undefined;
+        this.clientStyling = undefined;
+        this.clientStylingUrl = undefined;
+        this.positionIdx = undefined;
+        this.theme = 'default';
+        this.mode = 'single';
+        this.bulletConfigContent = '';
+    }
+    get bulletConfigArr() {
+        const defaultConfig = [
+            {
+                value: '1'
+            },
+            {
+                value: 'X'
+            },
+            {
+                value: '2'
+            }
+        ];
+        if (typeof this.bulletConfigContent === 'string' && this.bulletConfigContent) {
+            try {
+                const _temp = JSON.parse(this.bulletConfigContent);
+                return _temp;
+            }
+            catch (e) {
+                console.error('Error parsing bulletConfigContent:', e);
+                return defaultConfig;
+            }
+        }
+        else {
+            return defaultConfig;
+        }
+    }
+    handleClientStylingChange(newValue, oldValue) {
+        if (newValue != oldValue) {
+            lotteryTippingTicketController.setClientStyling(this.stylingContainer, this.clientStyling);
+        }
+    }
+    handleClientStylingUrlChange(newValue, oldValue) {
+        if (newValue != oldValue) {
+            lotteryTippingTicketController.setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
+        }
+    }
+    handleMbSourceChange(newValue, oldValue) {
+        if (newValue != oldValue) {
+            lotteryTippingTicketController.setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`);
+        }
+    }
+    componentDidLoad() {
+        if (this.stylingContainer) {
+            if (this.mbSource)
+                lotteryTippingTicketController.setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`);
+            if (this.clientStyling)
+                lotteryTippingTicketController.setClientStyling(this.stylingContainer, this.clientStyling);
+            if (this.clientStylingUrl)
+                lotteryTippingTicketController.setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
+        }
+    }
+    disconnectedCallback() {
+        this.stylingSubscription && this.stylingSubscription.unsubscribe();
+    }
+    lotteryTippingBulletSelectionHandler(event) {
+        const { positionIdx } = event.detail;
+        this.handleToggle(positionIdx);
+    }
+    handleToggle(index) {
+        let newConfigArr = [...this.bulletConfigArr];
+        if (this.mode === 'single') {
+            // single mode: only one button can be selected
+            newConfigArr = newConfigArr.map((item) => (Object.assign(Object.assign({}, item), { isSelected: false })));
+            newConfigArr[index].isSelected = true;
+        }
+        else {
+            // multi mode: multiple buttons can be selected
+            newConfigArr = newConfigArr.map((item) => (Object.assign({}, item)));
+            newConfigArr[index].isSelected = !newConfigArr[index].isSelected;
+        }
+        this.lotteryTippingBulletGroupToggleEvent.emit({
+            bulletConfigArr: newConfigArr,
+            positionIdx: this.positionIdx + '-' + index
+        });
+    }
+    render() {
+        var _a;
+        return (index.h("div", { ref: (el) => (this.stylingContainer = el), key: this.positionIdx }, index.h("div", { key: '68223022eed831932c571378164be913206d98e9', style: { display: 'flex', flexDirection: 'row', gap: '10px' } }, (_a = this.bulletConfigArr) === null || _a === void 0 ? void 0 : _a.map((item, index$1) => (index.h("div", { key: index$1 }, index.h("lottery-tipping-bullet", { value: item.value, isSelected: item.isSelected, "position-idx": index$1, disabled: item.disabled, theme: this.theme, clientStyling: this.clientStyling, clientStylingUrl: this.clientStylingUrl, mbSource: this.mbSource })))))));
+    }
+    static get watchers() { return {
+        "clientStyling": ["handleClientStylingChange"],
+        "clientStylingUrl": ["handleClientStylingUrlChange"],
+        "mbSource": ["handleMbSourceChange"]
+    }; }
+};
+LotteryTippingBulletGroup.style = LotteryTippingBulletGroupStyle0;
+
+const DEFAULT_LANGUAGE$1 = 'en';
+const SUPPORTED_LANGUAGES$1 = ['ro', 'en', 'fr', 'ar', 'hr'];
+const TRANSLATIONS$1 = {
+    en: {
+        stop: 'Stop',
+        at: 'at',
+        turnover: 'Turnover: '
+    },
+    ro: {
+        stop: 'Oprește',
+        at: 'la'
+    },
+    fr: {
+        stop: 'Arrêtez',
+        at: 'à'
+    },
+    ar: {
+        stop: 'توقف',
+        at: 'في'
+    },
+    hr: {
+        stop: 'Stop',
+        at: 'u'
+    }
+};
+const translate$1 = (key, customLang) => {
+    const lang = customLang;
+    return TRANSLATIONS$1[lang !== undefined && SUPPORTED_LANGUAGES$1.includes(lang) ? lang : DEFAULT_LANGUAGE$1][key];
+};
+
+const lotteryTippingTicketBannerCss = ".lottery-tipping-ticket-banner__container {\n  font-family: system-ui, sans-serif;\n  font-size: 14px;\n  container-type: inline-size;\n}\n\n.banner {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  justify-content: space-between;\n  padding: 0 1rem;\n  background: var(--emw--color-primary, #fed275);\n  border-top: 2px solid var(--emw--color-primary, #fed275);\n  border-bottom: 2px solid var(--emw--color-primary, #fed275);\n  gap: 0.5rem;\n  white-space: nowrap;\n  position: relative;\n  height: 46px;\n}\n\n.left {\n  flex: 1;\n  gap: 0.4rem;\n}\n.left .logo {\n  width: 216px;\n  position: absolute;\n  top: -7px;\n}\n\n.brand {\n  font-weight: 700;\n  color: var(--emw--color-typography, #000);\n}\n\n.mid {\n  flex: 1;\n  font-size: 1.5rem;\n  font-weight: 800;\n  font-style: italic;\n  letter-spacing: 0.04em;\n  color: var(--emw--color-typography, #000);\n  text-align: center;\n}\n\n.right {\n  flex: 1;\n  display: flex;\n  gap: 0.4rem;\n  flex-wrap: wrap;\n  justify-content: flex-end;\n}\n\n@container (max-width: 420px) {\n  .mid {\n    text-align: right;\n  }\n  .right {\n    justify-content: center;\n  }\n}\n.pill {\n  padding: 0.25rem 0.7rem;\n  font-size: 0.9rem;\n  color: var(--emw--color-gray-400, #000);\n  display: inline-flex;\n  align-items: baseline;\n}\n\n.pill > strong {\n  font-weight: 700;\n}";
+const LotteryTippingTicketBannerStyle0 = lotteryTippingTicketBannerCss;
+
+const LotteryTippingTicketBanner = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.mbSource = undefined;
+        this.clientStyling = undefined;
+        this.clientStylingUrl = undefined;
+        this.language = 'en';
+        this.translationUrl = '';
+        this.logoUrl = undefined;
+        this.stopTime = '';
+        this.period = undefined;
+        this.formattedTurnover = undefined;
+    }
+    get formattedStopTime() {
+        let _temp = '';
+        if (!this.stopTime) {
+            return _temp;
+        }
+        _temp = lotteryTippingTicketController.formatDate({ date: this.stopTime, format: 'dd/MM/yyyy HH:mm' });
+        if (isToday(new Date(this.stopTime))) {
+            _temp = lotteryTippingTicketController.formatDate({ date: this.stopTime, format: 'HH:mm' });
+        }
+        return _temp;
+    }
+    get formattedPeriod() {
+        let _temp = '';
+        _temp = lotteryTippingTicketController.formatDate({ date: this.period, format: 'EEEE' });
+        if (_temp.toLowerCase() === 'wednesday') {
+            _temp = 'MIDWEEK';
+        }
+        return _temp.toUpperCase();
+    }
+    handleClientStylingChange(newValue, oldValue) {
+        if (newValue != oldValue) {
+            lotteryTippingTicketController.setClientStyling(this.stylingContainer, this.clientStyling);
+        }
+    }
+    handleClientStylingUrlChange(newValue, oldValue) {
+        if (newValue != oldValue) {
+            lotteryTippingTicketController.setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
+        }
+    }
+    handleMbSourceChange(newValue, oldValue) {
+        if (newValue != oldValue) {
+            lotteryTippingTicketController.setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`);
+        }
+    }
+    async componentWillLoad() {
+        if (this.translationUrl) {
+            lotteryTippingTicketController.resolveTranslationUrl(this.translationUrl);
+        }
+    }
+    componentDidLoad() {
+        if (this.stylingContainer) {
+            if (this.mbSource)
+                lotteryTippingTicketController.setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`);
+            if (this.clientStyling)
+                lotteryTippingTicketController.setClientStyling(this.stylingContainer, this.clientStyling);
+            if (this.clientStylingUrl)
+                lotteryTippingTicketController.setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
+        }
+    }
+    disconnectedCallback() {
+        this.stylingSubscription && this.stylingSubscription.unsubscribe();
+    }
+    render() {
+        return (index.h("div", { key: 'e9286d0a6a9433698703b9c04d6d50892a7b3168', ref: (el) => (this.stylingContainer = el), class: "lottery-tipping-ticket-banner__container" }, index.h("section", { key: 'd787e64156f76cf6d12bd552513971301534860c', class: "banner" }, index.h("div", { key: '027baf0c88733d1430801c96b5b338f79f92f22c', class: "left" }, this.logoUrl && index.h("img", { key: '7b41d5635a2121ccf394aca19de48e10e9a93357', alt: "Betting", src: this.logoUrl, class: "logo" })), index.h("div", { key: '73e6c3ffa336b020a3819a72b71117b8084381b1', class: "mid period" }, this.formattedPeriod), index.h("div", { key: '922ae894814157f68aa8f0774c8aa5ca06e1e7cd', class: "right" }, index.h("span", { key: 'efaf79b1ff5617f2ba92cfef464232041cd87fbf', class: "pill" }, index.h("strong", { key: 'c842562b15a13407038933da9d1cc7c6fafa0b76' }, translate$1('stop', this.language)), "\u00A0", translate$1('at', this.language), "\u00A0", this.formattedStopTime), index.h("span", { key: '3e79a5ec17cbcf0896d58196286fa0b637988f69', class: "pill" }, index.h("strong", { key: '1158b00abffb1c6bf04e9eec10b4c996d04f118e' }, translate$1('turnover', this.language)), "\u00A0", this.formattedTurnover)))));
+    }
+    static get assetsDirs() { return ["../static"]; }
+    static get watchers() { return {
+        "clientStyling": ["handleClientStylingChange"],
+        "clientStylingUrl": ["handleClientStylingUrlChange"],
+        "mbSource": ["handleMbSourceChange"]
+    }; }
+};
+LotteryTippingTicketBanner.style = LotteryTippingTicketBannerStyle0;
+
+const DEFAULT_LANGUAGE = 'en';
+const SUPPORTED_LANGUAGES = ['ro', 'en', 'fr', 'ar', 'hr'];
+const TRANSLATIONS = {
+    en: {
+        homeTeam: 'Home team:',
+        awayTeam: 'Away team:',
+        selectionCleared: 'Your selection has been cleared.',
+        selectionOnLineCleared: 'Your selection on this line will be cleared.',
+        loading: 'Loading...',
+        error: 'Error!',
+        noData: 'No data available.',
+        lineInfo: 'Line {currentPage} of {totalPages}',
+        clearAll: 'Clear All',
+        cancel: 'Cancel',
+        confirm: 'Confirm'
+    },
+    ro: {
+        homeTeam: 'Echipa gazdă:',
+        awayTeam: 'Echipa oaspete:',
+        selectionCleared: 'Selecția dvs. a fost ștearsă.',
+        selectionOnLineCleared: 'Selecția dvs. de pe această linie va fi ștearsă.',
+        loading: `Se încarcă...',n    error: 'Eroare!`,
+        noData: 'Nu sunt date disponibile.',
+        lineInfo: 'Linia {currentPage} din {totalPages}',
+        clearAll: 'Șterge tot',
+        cancel: 'Anulează',
+        confirm: 'Confirmă'
+    },
+    fr: {
+        homeTeam: 'Équipe à domicile:',
+        awayTeam: `Équipe à l'extérieur:`,
+        selectionCleared: 'Votre sélection a été effacée.',
+        selectionOnLineCleared: 'Votre sélection sur cette ligne sera effacée.',
+        loading: `Chargement...',n    error: 'Erreur!`,
+        noData: 'Aucune donnée disponible.',
+        lineInfo: 'Ligne {currentPage} sur {totalPages}',
+        clearAll: 'Tout effacer',
+        cancel: 'Annuler',
+        confirm: 'Confirmer'
+    },
+    ar: {
+        homeTeam: 'الفريق المضيف:',
+        awayTeam: 'الفريق الضيف:',
+        selectionCleared: 'تم مسح اختيارك.',
+        selectionOnLineCleared: 'سيتم مسح اختيارك في هذا السطر.',
+        loading: `جار التحميل...',n    error: 'خطأ!`,
+        noData: 'لا توجد بيانات متاحة.',
+        lineInfo: 'السطر {currentPage} من {totalPages}',
+        clearAll: 'مسح الكل',
+        cancel: 'إلغاء',
+        confirm: 'تأكيد'
+    },
+    hr: {
+        homeTeam: 'Domaći tim:',
+        awayTeam: 'Gostujući tim:',
+        selectionCleared: 'Vaš odabir je obrisan.',
+        selectionOnLineCleared: 'Vaš odabir na ovoj liniji bit će obrisan.',
+        loading: `Učitavanje...',n    error: 'Greška!`,
+        noData: 'Nema dostupnih podataka.',
+        lineInfo: 'Linija {currentPage} od {totalPages}',
+        clearAll: 'Očisti sve',
+        cancel: 'Odustani',
+        confirm: 'Potvrdi'
+    }
+};
+const translate = (key, customLang, replacements) => {
+    const lang = customLang;
+    let translation = TRANSLATIONS[lang !== undefined && SUPPORTED_LANGUAGES.includes(lang) ? lang : DEFAULT_LANGUAGE][key];
+    if (replacements) {
+        Object.keys(replacements).forEach((placeholder) => {
+            translation = translation.replace(`{${placeholder}}`, replacements[placeholder]);
+        });
+    }
+    return translation;
+};
+const getTranslations = (data) => {
+    Object.keys(data).forEach((item) => {
+        for (let key in data[item]) {
+            TRANSLATIONS[item][key] = data[item][key];
+        }
+    });
+};
+
+const formatDate = ({ date, type = 'date', format }) => {
+    try {
+        const parsedDate = lotteryTippingTicketController.parseISO(date);
+        if (isNaN(parsedDate.getTime())) {
+            throw new Error(`Invalid date: ${date}`);
+        }
+        if (format)
+            return lotteryTippingTicketController.format(parsedDate, format);
+        let formatStr = 'dd/MM/yyyy';
+        if (type === 'time') {
+            formatStr = 'dd/MM/yyyy HH:mm:ss';
+        }
+        else if (type === 'week') {
+            formatStr = 'ccc dd/MM/yyyy HH:mm:ss';
+        }
+        return lotteryTippingTicketController.format(parsedDate, formatStr);
+    }
+    catch (error) {
+        console.error('Error formatting date:', error.message);
+        return '';
+    }
+};
+const fetcher = (url) => fetch(url).then((r) => r.json());
+const DEFAULT_BULLET_CONFIG = [
+    {
+        value: '1'
+    },
+    {
+        value: 'X'
+    },
+    {
+        value: '2'
+    }
+];
+const SPLIT_TOKEN = '-';
+const showNotification = ({ message, theme = 'success' }) => {
+    window.postMessage({
+        type: 'ShowNotificationToast',
+        message,
+        theme
+    });
+};
+
+// This icon file is generated automatically.
+var DeleteOutlined = { "icon": { "tag": "svg", "attrs": { "viewBox": "64 64 896 896", "focusable": "false" }, "children": [{ "tag": "path", "attrs": { "d": "M360 184h-8c4.4 0 8-3.6 8-8v8h304v-8c0 4.4 3.6 8 8 8h-8v72h72v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80h72v-72zm504 72H160c-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-32zM731.3 840H292.7l-24.2-512h487l-24.2 512z" } }] }, "name": "delete", "theme": "outlined" };
+const DeleteOutlined$1 = DeleteOutlined;
+
+// This icon file is generated automatically.
+var InfoCircleOutlined = { "icon": { "tag": "svg", "attrs": { "viewBox": "64 64 896 896", "focusable": "false" }, "children": [{ "tag": "path", "attrs": { "d": "M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" } }, { "tag": "path", "attrs": { "d": "M464 336a48 48 0 1096 0 48 48 0 10-96 0zm72 112h-48c-4.4 0-8 3.6-8 8v272c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V456c0-4.4-3.6-8-8-8z" } }] }, "name": "info-circle", "theme": "outlined" };
+const InfoCircleOutlined$1 = InfoCircleOutlined;
+
+// This icon file is generated automatically.
+var LeftOutlined = { "icon": { "tag": "svg", "attrs": { "viewBox": "64 64 896 896", "focusable": "false" }, "children": [{ "tag": "path", "attrs": { "d": "M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 000 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z" } }] }, "name": "left", "theme": "outlined" };
+const LeftOutlined$1 = LeftOutlined;
+
+// This icon file is generated automatically.
+var PlusSquareOutlined = { "icon": { "tag": "svg", "attrs": { "viewBox": "64 64 896 896", "focusable": "false" }, "children": [{ "tag": "path", "attrs": { "d": "M328 544h152v152c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V544h152c4.4 0 8-3.6 8-8v-48c0-4.4-3.6-8-8-8H544V328c0-4.4-3.6-8-8-8h-48c-4.4 0-8 3.6-8 8v152H328c-4.4 0-8 3.6-8 8v48c0 4.4 3.6 8 8 8z" } }, { "tag": "path", "attrs": { "d": "M880 112H144c-17.7 0-32 14.3-32 32v736c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V144c0-17.7-14.3-32-32-32zm-40 728H184V184h656v656z" } }] }, "name": "plus-square", "theme": "outlined" };
+const PlusSquareOutlined$1 = PlusSquareOutlined;
+
+// This icon file is generated automatically.
+var RightOutlined = { "icon": { "tag": "svg", "attrs": { "viewBox": "64 64 896 896", "focusable": "false" }, "children": [{ "tag": "path", "attrs": { "d": "M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z" } }] }, "name": "right", "theme": "outlined" };
+const RightOutlined$1 = RightOutlined;
+
+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, " />");
+}
+
+const lotteryTippingTicketBetCss = ".LotteryTippingTicketBet__container {\n  display: block; /* Or inline-block, depending on desired layout flow */\n  font-size: 14px;\n  line-height: 1.5715;\n  color: var(--emw--color-typography, #000);\n  background: var(--emw--color-background, #fff);\n  overflow: hidden;\n  min-width: 300px;\n  container-type: inline-size;\n}\n@container (max-width: 375px) {\n  .LotteryTippingTicketBet__container {\n    font-size: 12px;\n  }\n}\n\n.table-wrapper {\n  overflow-x: auto; /* Handle horizontal scroll if content overflows */\n}\n\n.my-table-component {\n  width: 100%;\n  border-collapse: collapse; /* Important for borders */\n  text-align: left;\n  border-radius: 0.1rem; /* Ant Design like subtle rounding */\n  border-spacing: 0;\n}\n\n/* Header */\n.my-table-component th {\n  background: var(--emw--color-background-secondary, #f5f5f5);\n  color: var(--emw--color-typography, #000);\n  font-weight: 500;\n  padding: 0.4rem 0.5rem;\n  transition: background 0.3s ease;\n}\n\n/* Cells */\n.my-table-component td {\n  padding: 0.4rem 0.5rem;\n  color: var(--emw--color-typography, #000);\n  background: var(--emw--color-background, #fff);\n  transition: background 0.3s;\n}\n@container (max-width: 400px) {\n  .my-table-component td {\n    padding: 0.3rem 0.3rem;\n  }\n}\n\n.my-table-component.bordered th,\n.my-table-component.bordered td {\n  border-bottom: 1px solid var(--emw--color-gray-100, #e6e6e6);\n}\n\n/* Bordered style */\n.my-table-component.grid th,\n.my-table-component.grid td {\n  border: 1px solid var(--emw--color-gray-100, #e6e6e6);\n}\n\n.my-table-component.grid th {\n  border-bottom-width: 1px; /* Ensure bottom border is consistent */\n}\n\n.my-table-component.grid {\n  border: 1px solid var(--emw--color-gray-100, #e6e6e6); /* Outer border */\n  border-right-width: 0;\n  border-bottom-width: 0;\n}\n\n.my-table-component.grid th:last-child,\n.my-table-component.grid td:last-child {\n  border-right: 1px solid var(--emw--color-gray-100, #e6e6e6);\n}\n\n.my-table-component.grid tr:last-child td {\n  border-bottom: 1px solid var(--emw--color-gray-100, #e6e6e6);\n}\n\n/* Striped style */\n.my-table-component.striped tbody tr:nth-child(even) td {\n  background-color: var(--emw--color-background-secondary, #f5f5f5);\n}\n\n/* Hover (optional, but nice) */\n.my-table-component tbody tr:hover td {\n  background-color: var(--emw--color-background-secondary, #f5f5f5);\n}\n\n.flex {\n  display: flex;\n}\n\n.justify-end {\n  justify-content: flex-end;\n}\n\n.gap-1 {\n  gap: 4px;\n}\n\n.justify-between {\n  justify-content: space-between;\n}\n\n.align-center {\n  align-items: center;\n}\n\n.gap-1 {\n  gap: 0.5rem;\n}\n\n.btn {\n  color: var(--emw--color-typography, #000);\n  background: var(--emw--color-background, #fff);\n  font-size: 14px;\n  transition: all 0.2s ease;\n}\n.btn:hover {\n  cursor: pointer;\n}\n\n.btn:hover {\n  background-color: var(--emw--color-gray-100, #e6e6e6);\n}\n\n.btn.disabled {\n  opacity: 0.5;\n  pointer-events: none;\n}\n.btn.disabled:hover {\n  cursor: not-allowed !important;\n}\n\n.LotteryTippingTicketBet__tableToolbar {\n  width: 100%;\n  margin-bottom: 1rem;\n}\n\n.LotteryTippingTicketBet__tableToolbar--item {\n  background-color: transparent;\n  cursor: pointer;\n  font-weight: 500;\n  white-space: nowrap;\n  display: inline-flex;\n  border-radius: 1.6rem;\n  border: 1px solid var(--emw--color-gray-100, #e6e6e6);\n  padding-top: 0.5rem;\n  padding-bottom: 0.5rem;\n  padding-left: 1rem;\n  padding-right: 1rem;\n  margin-right: 2rem;\n  color: var(--emw--color-typography, #000);\n}\n.LotteryTippingTicketBet__tableToolbar--item.mr-0 {\n  margin-right: 0rem !important;\n}\n\n.LotteryTippingTicketBet__lineOperatorGroup {\n  flex-basis: 2rem;\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n  border-radius: 8px;\n}\n\n.LotteryTippingTicketBet__lineOperatorGroup--item {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: 2rem;\n  height: 2rem;\n  background-color: var(--emw--color-background-secondary, #f5f5f5);\n  color: var(--emw--color-typography, #000);\n  border-radius: 8px;\n  transition: all 0.2s ease-in-out;\n  cursor: pointer;\n}\n\n.LotteryTippingTicketBet__lineOperatorGroup--item:hover {\n  transform: scale(1.1);\n  box-shadow: 0 6px 14px var(--emw-calender-curday-box-shadow, rgba(0, 0, 0, 0.09));\n}\n\n.LotteryTippingTicketBet__lineOperatorGroup--item .icon {\n  width: 20px;\n  height: 20px;\n  transition: filter 0.2s ease-in-out;\n  filter: grayscale(0.3);\n}\n\n.LotteryTippingTicketBet__lineOperatorGroup--item:hover .icon {\n  filter: grayscale(0);\n  transform: rotate(3deg);\n}\n\ndiv.border-line {\n  margin-top: 1rem;\n  height: 1px;\n  width: 100%;\n  box-sizing: border-box;\n  background-color: var(--emw--color-background-secondary, #f5f5f5);\n  transition: all 0.3s ease;\n}\n\n.LotteryTippingTicketBet__footer {\n  padding: 0.5rem;\n}\n\n.my-pagination {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  gap: 1rem;\n  font-size: 0.8rem;\n  color: var(--emw--color-typography-secondary, #333);\n}\n\n.my-pagination span {\n  font-weight: 500;\n  user-select: none;\n}\n\n.my-pagination .btn {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 2rem;\n  height: 2rem;\n  border-radius: 50%;\n  transition: all 0.3s ease;\n  cursor: pointer;\n  opacity: 0.9;\n  color: var(--emw--color-typography, #000);\n  background-color: var(--emw--color-background-secondary, #f5f5f5);\n}\n\n.my-pagination .btn .icon {\n  width: 20px;\n  height: 20px;\n  transition: transform 0.2s ease;\n}\n\n.my-pagination .btn:hover {\n  transform: scale(1.1);\n  box-shadow: 0 6px 14px var(--emw-calender-curday-box-shadow, rgba(0, 0, 0, 0.09));\n}\n\n.my-pagination .btn.disabled {\n  background-color: var(--emw--color-background-tertiary, #ccc);\n  cursor: not-allowed;\n  opacity: 0.5;\n  transform: scale(1);\n}\n\n.match-info-item {\n  display: flex;\n}\n\n.match-info-item-label {\n  margin-right: 6px;\n}\n\n.info-icon:hover {\n  cursor: pointer;\n}\n\n.LotteryTippingTicketBet__empty p {\n  text-align: center;\n}\n\n.no-wrap {\n  white-space: nowrap;\n  overflow: hidden;\n}\n\n.eventNameContainer__item--title {\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  max-width: 300px;\n}\n@container (max-width: 600px) {\n  .eventNameContainer__item--title {\n    max-width: 180px;\n  }\n}\n@container (max-width: 500px) {\n  .eventNameContainer__item--title {\n    max-width: 150px;\n  }\n}\n@container (max-width: 400px) {\n  .eventNameContainer__item--title {\n    max-width: 100px;\n  }\n}\n@container (max-width: 330px) {\n  .eventNameContainer__item--title {\n    max-width: 70px;\n  }\n}\n\n.LotteryTippingTicketBet__main {\n  perspective: 800px;\n  will-change: transform, opacity;\n  backface-visibility: hidden;\n}\n\n@container (max-width: 520px) {\n  .LotteryTippingTicketBet__main {\n    flex-wrap: wrap;\n    justify-content: center;\n  }\n  .LotteryTippingTicketBet__tableToolbar--item {\n    margin-right: 0 !important;\n  }\n}\n/* Fade-In Keyframes */\n@keyframes fadeInLeft {\n  from {\n    opacity: 0;\n    transform: translateX(100%);\n  }\n  to {\n    opacity: 1;\n    transform: translateX(0);\n  }\n}\n/* Fade-Out Keyframes */\n@keyframes fadeOut {\n  from {\n    opacity: 1;\n  }\n  to {\n    opacity: 0;\n  }\n}\n@keyframes fadeInRight {\n  from {\n    opacity: 0;\n    transform: translateX(-100%);\n  }\n  to {\n    opacity: 1;\n    transform: translateX(0);\n  }\n}\n@keyframes fadeInUp {\n  from {\n    opacity: 0;\n    transform: translateY(100%);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n@-webkit-keyframes slide-left {\n  0% {\n    -webkit-transform: translateX(0);\n    transform: translateX(0);\n  }\n  100% {\n    -webkit-transform: translateX(-100px);\n    transform: translateX(-100px);\n  }\n}\n@keyframes slide-left {\n  0% {\n    -webkit-transform: translateX(100%);\n    transform: translateX(100%);\n  }\n  100% {\n    -webkit-transform: translateX(0px);\n    transform: translateX(0px);\n  }\n}\n@-webkit-keyframes slide-right {\n  0% {\n    -webkit-transform: translateX(-100%);\n    transform: translateX(-100%);\n  }\n  100% {\n    -webkit-transform: translateX(0px);\n    transform: translateX(0px);\n  }\n}\n@keyframes slide-right {\n  0% {\n    -webkit-transform: translateX(-100px);\n    transform: translateX(-100px);\n  }\n  100% {\n    -webkit-transform: translateX(0);\n    transform: translateX(0);\n  }\n}\n@-webkit-keyframes slide-top {\n  0% {\n    -webkit-transform: translateY(-100px);\n    transform: translateY(-100px);\n  }\n  100% {\n    -webkit-transform: translateY(0px);\n    transform: translateY(0px);\n  }\n}\n@keyframes slide-top {\n  0% {\n    -webkit-transform: translateY(-100px);\n    transform: translateY(-100px);\n  }\n  100% {\n    -webkit-transform: translateY(0px);\n    transform: translateY(0px);\n  }\n}\n/* Apply to your card classes */\n.card-in-left {\n  -webkit-animation: slide-left 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;\n  animation: slide-left 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;\n}\n\n.card-out-left {\n  animation: fadeOut 0.2s ease-out both;\n}\n\n.card-in-right {\n  -webkit-animation: slide-right 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;\n  animation: slide-right 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;\n}\n\n.card-out-right {\n  animation: fadeOut 0.2s ease-out both;\n}\n\n.card-in-up {\n  -webkit-animation: slide-top 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;\n  animation: slide-top 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;\n}\n\n.card-out-down {\n  animation: fadeOut 0.2s ease-out both;\n}\n\n.loading-wrap {\n  margin: 20px 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  min-height: 40vh;\n}\n.loading-wrap .dots-container {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  width: 100%;\n}\n.loading-wrap .dot {\n  height: 14px;\n  width: 14px;\n  margin-right: 14px;\n  border-radius: 14px;\n  background-color: var(--emw--color-gray-300, #333);\n  animation: pulse 1.5s infinite ease-in-out;\n}\n.loading-wrap .dot:last-child {\n  margin-right: 0;\n}\n.loading-wrap .dot:nth-child(1) {\n  animation-delay: -0.3s;\n}\n.loading-wrap .dot:nth-child(2) {\n  animation-delay: -0.1s;\n}\n.loading-wrap .dot:nth-child(3) {\n  animation-delay: 0.1s;\n}\n@keyframes pulse {\n  0% {\n    transform: scale(0.8);\n    background-color: var(--emw--color-gray-300, #333);\n  }\n  50% {\n    transform: scale(1.2);\n    background-color: var(--emw--color-gray-100, #e6e6e6);\n  }\n  100% {\n    transform: scale(0.8);\n    background-color: var(--emw--color-gray-150, #6f6f6f);\n  }\n}";
+const LotteryTippingTicketBetStyle0 = lotteryTippingTicketBetCss;
+
+const addImagePath = renderIconDefinitionToSVGElement(PlusSquareOutlined$1, {
+    extraSVGAttrs: { width: '20px', height: '20px', fill: 'currentColor' }
+});
+const deleteImagePath = renderIconDefinitionToSVGElement(DeleteOutlined$1, {
+    extraSVGAttrs: { width: '20px', height: '20px', fill: 'currentColor' }
+});
+const infoImagePath = renderIconDefinitionToSVGElement(InfoCircleOutlined$1, {
+    extraSVGAttrs: { width: '16px', height: '16px', fill: 'currentColor' }
+});
+const leftImagePath = renderIconDefinitionToSVGElement(LeftOutlined$1, {
+    extraSVGAttrs: { width: '20px', height: '20px', fill: 'currentColor' }
+});
+const rightImagePath = renderIconDefinitionToSVGElement(RightOutlined$1, {
+    extraSVGAttrs: { width: '20px', height: '20px', fill: 'currentColor' }
+});
+const LotteryTippingTicketBet = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.lotteryTippingBulletBetEvent = index.createEvent(this, "lotteryTippingBulletBetSelect", 7);
+        this.lotteryTippingCurrentPageChangeEvent = index.createEvent(this, "lotteryTippingCurrentPageChange", 7);
+        this.eventNameRender = (item, value) => (index.h("div", { class: "flex gap-1 eventNameContainer__item" }, index.h("span", { class: "eventNameContainer__item--title" }, value), index.h("general-tooltip", null, index.h("span", { slot: "trigger", class: "icon info-icon", innerHTML: infoImagePath, style: { width: '18px' } }), index.h("div", { slot: "content" }, index.h("div", { class: "match-info" }, index.h("div", { class: "match-info-item" }, index.h("div", { class: "match-info-item-label" }, translate('homeTeam', this.language)), index.h("div", { class: "match-info-item-value" }, item.homeName)), index.h("div", { class: "match-info-item" }, index.h("div", { class: "match-info-item-label" }, translate('awayTeam', this.language)), index.h("div", { class: "match-info-item-value" }, item.awayName)))))));
+        this.columns = [
+            { title: '', value: 'index', width: 3 },
+            {
+                title: '',
+                value: 'eventName',
+                width: 70,
+                render: this.eventNameRender
+            },
+            {
+                title: '',
+                value: 'startTime',
+                width: 22,
+                align: 'right',
+                nowrap: true,
+                render: (_, value) => formatDate({ date: value, format: 'ccc HH:mm' })
+            },
+            {
+                title: () => (index.h("lottery-tipping-bullet-group", { theme: "text", bulletConfigContent: JSON.stringify(DEFAULT_BULLET_CONFIG) })),
+                value: 'results',
+                width: 5,
+                render: (_, __, curRow) => {
+                    var _a, _b;
+                    return (index.h("lottery-tipping-bullet-group", { mode: this.mode, bulletConfigContent: JSON.stringify((_b = (_a = this.bulletConfigLineGroup) === null || _a === void 0 ? void 0 : _a[this.currentPage - 1]) === null || _b === void 0 ? void 0 : _b[curRow]), "position-idx": `${this.currentPage - 1}${SPLIT_TOKEN}${curRow}` }));
+                }
+            }
+        ];
+        this.mbSource = undefined;
+        this.clientStyling = undefined;
+        this.clientStylingUrl = undefined;
+        this.translationUrl = '';
+        this.language = 'en';
+        this.translationData = undefined;
+        this.clientStylingUrlContent = '';
+        this.sessionId = undefined;
+        this.endpoint = '';
+        this.gameId = undefined;
+        this.drawId = undefined;
+        this.totalPages = undefined;
+        this.minTotalPages = 0;
+        this.maxTotalPages = 0;
+        this.mode = 'multi';
+        this.readPretty = false;
+        this.defaultBulletConfigLineGroup = undefined;
+        this.bulletConfigLineGroup = [[[]]];
+        this.currentPage = 1;
+        this.isLoading = true;
+        this.hasErrors = false;
+        this.dialogConfig = { visible: false };
+        this.ticketDataSource = [];
+    }
+    handleNewTranslations() {
+        this.isLoading = true;
+        getTranslations(JSON.parse(this.translationUrl));
+        this.isLoading = false;
+    }
+    handleClientStylingChange(newValue, oldValue) {
+        if (newValue != oldValue) {
+            lotteryTippingTicketController.setClientStyling(this.stylingContainer, this.clientStyling);
+        }
+    }
+    handleClientStylingUrlChange(newValue, oldValue) {
+        if (newValue != oldValue) {
+            lotteryTippingTicketController.setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
+        }
+    }
+    handleMbSourceChange(newValue, oldValue) {
+        if (newValue != oldValue) {
+            lotteryTippingTicketController.setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`);
+        }
+    }
+    disconnectedCallback() {
+        this.stylingSubscription && this.stylingSubscription.unsubscribe();
+    }
+    componentWillLoad() {
+        if (this.translationUrl) {
+            getTranslations(JSON.parse(this.translationUrl));
+        }
+    }
+    componentDidLoad() {
+        console.log(111, this.stylingContainer);
+        if (this.stylingContainer) {
+            if (this.mbSource)
+                lotteryTippingTicketController.setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`);
+            if (this.clientStyling)
+                lotteryTippingTicketController.setClientStyling(this.stylingContainer, this.clientStyling);
+            if (this.clientStylingUrl)
+                lotteryTippingTicketController.setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
+        }
+    }
+    get parsedDefaultBulletConfigLineGroup() {
+        if (typeof this.defaultBulletConfigLineGroup === 'string' && this.defaultBulletConfigLineGroup) {
+            try {
+                const _temp = JSON.parse(this.defaultBulletConfigLineGroup);
+                return this.readPrettyHandler(_temp);
+            }
+            catch (e) {
+                console.error('Error parsing defaultBulletConfigLineGroup:', e);
+                return undefined;
+            }
+        }
+        else {
+            return undefined;
+        }
+    }
+    readPrettyHandler(rawDefaultBulletConfigLineGroup) {
+        if (this.readPretty) {
+            this.currentPage = 1;
+            this.minTotalPages = 1;
+            this.maxTotalPages = this.totalPages;
+            return rawDefaultBulletConfigLineGroup === null || rawDefaultBulletConfigLineGroup === void 0 ? void 0 : rawDefaultBulletConfigLineGroup.map((item) => item === null || item === void 0 ? void 0 : item.map((i) => i === null || i === void 0 ? void 0 : i.map((j) => (Object.assign(Object.assign({}, j), { disabled: true })))));
+        }
+        return rawDefaultBulletConfigLineGroup;
+    }
+    initLineForBulletConfig() {
+        var _a;
+        return Array.from({ length: (_a = this.ticketDataSource) === null || _a === void 0 ? void 0 : _a.length }, () => [...DEFAULT_BULLET_CONFIG]);
+    }
+    _resetBulletConfig() {
+        this.bulletConfigLineGroup = Array.from({ length: this.totalPages }).map(this.initLineForBulletConfig.bind(this));
+    }
+    fetchMatchData() {
+        // get match
+        let url = new URL(`${this.endpoint}/games/${this.gameId}/draws/${this.drawId}/findDrawEvents`);
+        if (!this.gameId || !this.drawId)
+            return;
+        this.isLoading = true;
+        fetcher(url.href)
+            .then((data) => {
+            this.ticketDataSource = data || [];
+            this.isLoading = false;
+            this.updateBulletConfigLineGroup();
+        })
+            .catch((err) => {
+            this.isLoading = false;
+            this.hasErrors = true;
+            console.error('Error!', err);
+        });
+    }
+    updateBulletConfigLineGroup() {
+        if (this.parsedDefaultBulletConfigLineGroup && this.parsedDefaultBulletConfigLineGroup.length > 0)
+            this.bulletConfigLineGroup = this.parsedDefaultBulletConfigLineGroup;
+        else {
+            this._resetBulletConfig();
+        }
+    }
+    connectedCallback() {
+        this.fetchMatchData();
+    }
+    handleClearAll() {
+        this._resetBulletConfig();
+        showNotification({ message: translate('selectionCleared', this.language) });
+        this.lotteryTippingBulletBetEvent.emit({ hasSelectBullet: false });
+    }
+    async resetBulletConfig({ minLineNumber, maxLineNumber, defaultBoards }) {
+        this.totalPages = defaultBoards;
+        this.minTotalPages = minLineNumber;
+        this.maxTotalPages = maxLineNumber;
+        this.currentPage = 1;
+        this._resetBulletConfig();
+        this.lotteryTippingBulletBetEvent.emit({ hasSelectBullet: false });
+    }
+    lotteryTippingBulletGroupSelectionHandler(event) {
+        const { bulletConfigArr, positionIdx } = event.detail;
+        const [curLine, curRow] = positionIdx.split(SPLIT_TOKEN);
+        this.bulletConfigLineGroup[curLine][curRow] = bulletConfigArr;
+        this.bulletConfigLineGroup = [...this.bulletConfigLineGroup];
+        this.lotteryTippingBulletBetEvent.emit({ hasSelectBullet: true });
+    }
+    async getData() {
+        await this.validateBulletConfigLineGroup();
+        return this.bulletConfigLineGroup;
+    }
+    validateBulletConfigLineGroup() {
+        if (JSON.stringify(this.bulletConfigLineGroup) === '[[[]]]')
+            return Promise.resolve(this.bulletConfigLineGroup);
+        const totalPages = this.bulletConfigLineGroup.length;
+        if (totalPages !== this.totalPages || totalPages < this.minTotalPages || totalPages > this.maxTotalPages) {
+            this._resetBulletConfig();
+            return Promise.reject(new Error('Invalid bullet config line group length'));
+        }
+        else {
+            return Promise.resolve(this.bulletConfigLineGroup);
+        }
+    }
+    /**
+     * previous page
+     */
+    prevPage() {
+        const doPrev = () => {
+            if (this.currentPage > 1) {
+                this.currentPage--;
+            }
+        };
+        this.swapCard('prev', doPrev);
+    }
+    /**
+     * next page
+     */
+    nextPage() {
+        const doNext = () => {
+            if (this.currentPage < this.totalPages) {
+                this.currentPage++;
+            }
+        };
+        this.swapCard('next', doNext);
+    }
+    handleAddLine() {
+        const doAdd = () => {
+            if (this.totalPages <= this.maxTotalPages - 1) {
+                this.bulletConfigLineGroup.push(this.initLineForBulletConfig());
+                this.totalPages++;
+                // move to next line
+                this.currentPage++;
+                this.lotteryTippingBulletBetEvent.emit();
+            }
+        };
+        this.swapCard('add', doAdd);
+    }
+    handleRemoveLine() {
+        const doRemove = () => {
+            if (this.totalPages >= this.minTotalPages + 1) {
+                const closeDialog = () => {
+                    this.dialogConfig = { visible: false };
+                };
+                const doRemove = () => {
+                    this.bulletConfigLineGroup.splice(this.currentPage - 1, 1);
+                    this.totalPages--;
+                    if (this.currentPage !== 1)
+                        this.currentPage--;
+                    this.lotteryTippingBulletBetEvent.emit();
+                    this.swapCard('remove', closeDialog);
+                };
+                this.dialogConfig = {
+                    visible: true,
+                    content: translate('selectionOnLineCleared', this.language),
+                    onConfirm: doRemove,
+                    onCancel: closeDialog
+                };
+            }
+        };
+        doRemove();
+    }
+    swapCard(action, cb) {
+        const wrapper = this.mainContainer;
+        if (!wrapper)
+            return;
+        const map = {
+            next: { out: 'card-out-left', in: 'card-in-left' },
+            prev: { out: 'card-out-right', in: 'card-in-right' },
+            remove: { out: 'card-out-down', in: 'card-in-right' },
+            add: { out: 'card-out-left', in: 'card-in-up' }
+        };
+        const { out: outCls, in: inCls } = map[action];
+        wrapper.classList.add(outCls);
+        // FIXME: reference not clear
+        wrapper.addEventListener('animationend', () => {
+            wrapper.classList.remove(outCls);
+            cb();
+            const newWrapper = this.mainContainer;
+            if (!newWrapper)
+                return;
+            newWrapper.classList.add(inCls);
+            newWrapper.addEventListener('animationend', () => newWrapper.classList.remove(inCls), { once: true });
+        }, { once: true });
+    }
+    handleCurrentPageChange() {
+        this.lotteryTippingCurrentPageChangeEvent.emit({ currentPage: this.currentPage });
+    }
+    renderLoading() {
+        return (index.h("div", { class: "loading-wrap" }, index.h("section", { class: "dots-container" }, index.h("div", { class: "dot" }), index.h("div", { class: "dot" }), index.h("div", { class: "dot" }), index.h("div", { class: "dot" }), index.h("div", { class: "dot" }))));
+    }
+    render() {
+        var _a, _b, _c, _d;
+        if (this.isLoading) {
+            return this.renderLoading();
+        }
+        if (this.hasErrors) {
+            return (index.h("div", { ref: (el) => (this.stylingContainer = el), class: "LotteryTippingTicketBet__container" }, index.h("p", null, translate('error', this.language))));
+        }
+        const MyTable = ({ columns, dataSource, hideHead = false, grid = true, bordered = true }) => (index.h("table", { class: { bordered: bordered, grid: grid, 'my-table-component': true } }, !hideHead && (index.h("thead", null, index.h("tr", null, columns.map((column) => {
+            var _a;
+            return (index.h("th", { key: column.value, style: { width: column.width + '%', textAlign: column.align } }, typeof column.title === 'string' ? column.title : (_a = column.title) === null || _a === void 0 ? void 0 : _a.call(column)));
+        })))), index.h("tbody", null, dataSource.map((row, index$1) => (index.h("tr", { key: index$1 }, columns.map((column) => (index.h("td", { key: column.value, style: { width: column.width + '%', textAlign: column.align }, class: { 'no-wrap': column.nowrap } }, column.render ? column.render(row, row[column.value], index$1) : row[column.value])))))))));
+        const lineOperatorAddShow = this.totalPages < this.maxTotalPages && this.currentPage === this.totalPages ? true : false;
+        const lineOperatorRemoveShow = this.totalPages > this.minTotalPages ? true : false;
+        if (this.ticketDataSource.length === 0 || this.minTotalPages === 0 || this.maxTotalPages === 0) {
+            return (index.h("div", { class: "LotteryTippingTicketBet__container", ref: (el) => (this.stylingContainer = el) }, index.h("div", { class: "LotteryTippingTicketBet__empty" }, index.h("p", null, translate('noData', this.language)))));
+        }
+        if (this.readPretty) {
+            return (index.h("div", { class: "LotteryTippingTicketBet__container", ref: (el) => (this.stylingContainer = el) }, index.h("div", { class: "LotteryTippingTicketBet__main", ref: (el) => (this.mainContainer = el) }, index.h(MyTable, { columns: this.columns, dataSource: ((_a = this.ticketDataSource) === null || _a === void 0 ? void 0 : _a.map((item, index) => (Object.assign(Object.assign({}, item), { index: index + 1 })))) || [], hideHead: false, grid: false, bordered: false }), this.totalPages > 1 && (index.h("div", null, index.h("div", { class: 'border-line' }), index.h("div", { class: "LotteryTippingTicketBet__footer" }, index.h("div", { class: "my-pagination flex justify-between" }, index.h("span", null, translate('lineInfo', this.language, {
+                currentPage: this.currentPage,
+                totalPages: this.totalPages
+            })), index.h("div", { class: 'flex gap-1' }, index.h("span", { class: `btn ${this.currentPage === 1 ? 'disabled' : ''}`, onClick: this.prevPage.bind(this) }, index.h("span", { class: "icon", innerHTML: leftImagePath })), index.h("span", { class: `btn ${this.currentPage === this.totalPages ? 'disabled' : ''}`, onClick: this.nextPage.bind(this) }, index.h("span", { class: "icon", innerHTML: rightImagePath }))))))))));
+        }
+        return (index.h("div", { ref: (el) => (this.stylingContainer = el), class: "LotteryTippingTicketBet__container" }, index.h("div", { class: "LotteryTippingTicketBet__tableToolbar flex justify-end gap-1" }, index.h("button", { class: {
+                'LotteryTippingTicketBet__tableToolbar--item': true,
+                'mr-0': !(lineOperatorAddShow || lineOperatorRemoveShow)
+            }, onClick: this.handleClearAll.bind(this) }, translate('clearAll', this.language))), index.h("div", { class: "flex align-center LotteryTippingTicketBet__main", ref: (el) => (this.mainContainer = el) }, index.h(MyTable, { columns: this.columns, dataSource: ((_b = this.ticketDataSource) === null || _b === void 0 ? void 0 : _b.map((item, index) => (Object.assign(Object.assign({}, item), { index: index + 1 })))) || [], hideHead: false, grid: false, bordered: false }), (lineOperatorAddShow || lineOperatorRemoveShow) && (index.h("div", { class: "LotteryTippingTicketBet__lineOperatorGroup" }, lineOperatorAddShow && (index.h("div", { class: {
+                'LotteryTippingTicketBet__lineOperatorGroup--item': true
+            }, onClick: this.handleAddLine.bind(this) }, index.h("span", { class: "icon", innerHTML: addImagePath }))), lineOperatorRemoveShow && (index.h("div", { class: {
+                'LotteryTippingTicketBet__lineOperatorGroup--item': true
+            }, onClick: this.handleRemoveLine.bind(this) }, index.h("span", { class: "icon", innerHTML: deleteImagePath })))))), index.h("div", { class: 'border-line' }), index.h("div", { class: "LotteryTippingTicketBet__footer" }, index.h("div", { class: "my-pagination flex justify-between" }, index.h("span", null, translate('lineInfo', this.language, { currentPage: this.currentPage, totalPages: this.totalPages })), index.h("div", { class: 'flex gap-1' }, index.h("span", { class: `btn ${this.currentPage === 1 ? 'disabled' : ''}`, onClick: this.prevPage.bind(this) }, index.h("span", { class: "icon", innerHTML: leftImagePath })), index.h("span", { class: `btn ${this.currentPage === this.totalPages ? 'disabled' : ''}`, onClick: this.nextPage.bind(this) }, index.h("span", { class: "icon", innerHTML: rightImagePath }))))), this.dialogConfig.visible && (index.h("vaadin-confirm-dialog", { rejectButtonVisible: true, rejectText: translate('cancel', this.language), confirmText: translate('confirm', this.language), opened: (_c = this.dialogConfig) === null || _c === void 0 ? void 0 : _c.visible, onConfirm: this.dialogConfig.onConfirm, onReject: this.dialogConfig.onCancel }, (_d = this.dialogConfig) === null || _d === void 0 ? void 0 : _d.content))));
+    }
+    static get assetsDirs() { return ["../static"]; }
+    static get watchers() { return {
+        "translationUrl": ["handleNewTranslations"],
+        "clientStyling": ["handleClientStylingChange"],
+        "clientStylingUrl": ["handleClientStylingUrlChange"],
+        "mbSource": ["handleMbSourceChange"],
+        "gameId": ["fetchMatchData"],
+        "sessionId": ["fetchMatchData"],
+        "drawId": ["fetchMatchData"],
+        "defaultBulletConfigLineGroup": ["fetchMatchData"],
+        "currentPage": ["handleCurrentPageChange"]
+    }; }
+};
+LotteryTippingTicketBet.style = LotteryTippingTicketBetStyle0;
+
+exports.lottery_tipping_ticket_controller = lotteryTippingTicketController.LotteryTippingTicketController;
+exports.general_tooltip = GeneralTooltip;
+exports.lottery_button = LotteryButton;
+exports.lottery_tipping_bullet = LotteryTippingBullet;
+exports.lottery_tipping_bullet_group = LotteryTippingBulletGroup;
+exports.lottery_tipping_ticket_banner = LotteryTippingTicketBanner;
+exports.lottery_tipping_ticket_bet = LotteryTippingTicketBet;