@everymatrix/lottery-tipping-page 1.77.30 → 1.77.32

package/dist/esm/general-multi-select_13.entry.js

@@ -1,8 +1,8 @@
 import { r as registerInstance, c as createEvent, g as getAssetPath, h, a as getElement } from './index-3be4f76e.js';
-import { s as setClientStyling, a as setClientStylingURL, b as setStreamStyling } from './lottery-tipping-page-7f79b61d.js';
-export { L as lottery_tipping_page } from './lottery-tipping-page-7f79b61d.js';
+import { s as setClientStyling, a as setClientStylingURL, b as setStreamStyling } from './lottery-tipping-page-b611e76d.js';
+export { L as lottery_tipping_page } from './lottery-tipping-page-b611e76d.js';
 
-const generalMultiSelectCss = ".multi-select-container{position:relative;font-family:\"Inter\", sans-serif;margin-top:4px;width:100%}.flex-row{display:flex;flex-direction:row;align-items:center;flex-wrap:nowrap;padding:8px 12px;padding-right:4px;border-radius:4px;background:var(--emw-selector-color-background, #e8ebef);cursor:pointer}.control{flex:1;display:flex;align-items:center;flex-wrap:nowrap;overflow:hidden}.control:focus-within{border-color:var(--emw--color-primary, #fed275);box-shadow:0 0 0 2px var(--emw--button-box-shadow-color-secondary, rgba(0, 0, 0, 0.15))}.chip{display:inline-flex;align-items:center;background:var(--emw--color-gray-50, #f5f5f5);color:var(--emw--color-typography, #555);border-radius:4px;padding:2px 8px;margin-right:6px;font-size:0.875rem;line-height:1.2;justify-content:space-between;flex:0 1 auto;min-width:0}.chip-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.overflow-chip{background:var(--emw--color-gray-100, #e6e6e6);color:var(--emw--color-gray-300, #333);width:20px;text-align:center;display:block}.remove-btn{background:none;border:none;font-size:1rem;margin-left:6px;cursor:pointer;color:var(--emw--color-gray-150, #6f6f6f)}.remove-btn:hover{color:var(--emw--color-error, red)}.placeholder{color:var(--emw--color-gray-150, #6f6f6f);font-size:0.875rem;padding:3px 8px;line-height:1.2}.arrow{margin-left:auto;font-size:0.8rem;width:20px;color:var(--emw--color-gray-150, #6f6f6f)}.dropdown{position:absolute;top:calc(100% + 4px);left:0;width:100%;max-height:240px;overflow-y:auto;border:1px solid var(--emw--color-gray-100, #e6e6e6);border-radius:6px;background:var(--emw--color-background, #ffffff);box-shadow:0 4px 12px var(--emw--button-box-shadow-color-secondary, rgba(0, 0, 0, 0.15));z-index:10}.dropdown-item{padding:10px 14px;cursor:pointer;font-size:0.875rem;line-height:1.4;transition:background 0.2s}.dropdown-item:hover{background:var(--emw--color-gray-100, #f4f5f7)}.dropdown-item.selected{background:var(--emw--color-primary-variant, #bae7ff);color:var(--emw--color-primary, #0050b3);font-weight:500}.overflow-popover{position:absolute;top:var(--overflow-top, 0px);left:var(--overflow-left, 0px);max-width:200px;padding:12px;display:flex;flex-wrap:wrap;gap:6px;border:1px solid var(--emw--color-gray-100, #d0d5dd);border-radius:6px;background:var(--emw--color-background, #ffffff);box-shadow:0 4px 12px var(--emw--button-box-shadow-color-secondary, rgba(0, 0, 0, 0.15));z-index:20}";
+const generalMultiSelectCss = ".multi-select-container{position:relative;font-family:\"Inter\", sans-serif;margin-top:4px;width:100%}.flex-row{display:flex;flex-direction:row;align-items:center;flex-wrap:nowrap;padding:8px 12px;padding-right:4px;border-radius:4px;background:var(--emw-selector-color-background, #e8ebef);cursor:pointer}.control{flex:1;display:flex;align-items:center;flex-wrap:nowrap;overflow:hidden}.control:focus-within{border-color:var(--emw--color-primary, #fed275);box-shadow:0 0 0 2px var(--emw--button-box-shadow-color-secondary, rgba(0, 0, 0, 0.15))}.chip{display:inline-flex;align-items:center;background:var(--emw--color-gray-50, #f5f5f5);color:var(--emw--color-dialog-typography, #000);border-radius:4px;padding:2px 8px;margin-right:6px;font-size:0.875rem;line-height:1.2;justify-content:space-between;flex:0 1 auto;min-width:0}.chip-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.overflow-chip{background:var(--emw--color-gray-100, #e6e6e6);color:var(--emw--color-gray-300, #333);width:20px;text-align:center;display:block}.remove-btn{background:none;border:none;font-size:1rem;margin-left:6px;cursor:pointer;color:var(--emw--color-gray-150, #6f6f6f)}.remove-btn:hover{color:var(--emw--color-error, red)}.placeholder{color:var(--emw--color-gray-150, #6f6f6f);font-size:0.875rem;padding:3px 8px;line-height:1.2}.arrow{margin-left:auto;font-size:0.8rem;width:20px;color:var(--emw--color-gray-150, #6f6f6f)}.dropdown{position:absolute;top:calc(100% + 4px);left:0;width:100%;max-height:240px;overflow-y:auto;border:1px solid var(--emw--color-gray-100, #e6e6e6);border-radius:6px;background:var(--emw--color-dialog-background, #ffffff);box-shadow:0 4px 12px var(--emw--button-box-shadow-color-secondary, rgba(0, 0, 0, 0.15));z-index:10}.dropdown-item{padding:10px 14px;cursor:pointer;font-size:0.875rem;line-height:1.4;transition:background 0.2s}.dropdown-item:hover{background:var(--emw--color-background-tertiary, #ccc);color:var(--emw--color-typography, #000)}.dropdown-item.selected{background:var(--emw--color-background-secondary, #f5f5f5);color:var(--emw--color-typography, #000);font-weight:500}.overflow-popover{position:absolute;top:var(--overflow-top, 0px);left:var(--overflow-left, 0px);max-width:200px;padding:12px;display:flex;flex-wrap:wrap;gap:6px;border:1px solid var(--emw--color-gray-100, #d0d5dd);border-radius:6px;background:var(--emw--color-background, #ffffff);box-shadow:0 4px 12px var(--emw--button-box-shadow-color-secondary, rgba(0, 0, 0, 0.15));z-index:20}";
 const GeneralMultiSelectStyle0 = generalMultiSelectCss;
 
 const GeneralMultiSelect = class {
@@ -437,7 +437,7 @@ const getTranslations$3 = (data) => {
     });
 };
 
-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-dialog-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;min-height:200px;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-dialog-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));color:var(--emw--color-gray-300, #333);background:var(--emw--color-gray-400, #fff)}.dialog-footer .cancel-btn:hover{border-color:var(--emw--color-gray-100, #e6e6e6)}.dialog-footer .confirm-btn{border:none;color:var(--emw--color-gray-400, #fff);background:var(--emw-pool-game-acition-normal, #4a90e2);box-shadow:0 2px 4px rgba(74, 144, 226, 0.2)}.dialog-footer .confirm-btn:hover{background:var(--emw-pool-game-action-hover, #357abd)}@media screen and (max-width: 480px){.dialog.fullscreen .dialog-content{padding:12px}}";
+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-dialog-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;min-height:200px;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-dialog-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));color:var(--emw--color-gray-300, #333);background:var(--emw--color-gray-400, #fff)}.dialog-footer .cancel-btn:hover{border-color:var(--emw--color-gray-100, #e6e6e6)}.dialog-footer .confirm-btn{border:none;color:var(--emw--color-gray-400, #fff);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}}";
 const LotteryTippingDialogStyle0 = lotteryTippingDialogCss;
 
 const LotteryTippingDialog = class {
@@ -10268,10 +10268,34 @@ const LotteryTippingPagination = class {
 };
 LotteryTippingPagination.style = LotteryTippingPaginationStyle0;
 
+// 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 DownOutlined = { "icon": { "tag": "svg", "attrs": { "viewBox": "64 64 896 896", "focusable": "false" }, "children": [{ "tag": "path", "attrs": { "d": "M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z" } }] }, "name": "down", "theme": "outlined" };
 const DownOutlined$1 = DownOutlined;
 
+// This icon file is generated automatically.
+var EllipsisOutlined = { "icon": { "tag": "svg", "attrs": { "viewBox": "64 64 896 896", "focusable": "false" }, "children": [{ "tag": "path", "attrs": { "d": "M176 511a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0z" } }] }, "name": "ellipsis", "theme": "outlined" };
+const EllipsisOutlined$1 = EllipsisOutlined;
+
+// 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++) {
@@ -10321,7 +10345,7 @@ const lotteryTippingPanelCss = ".panel-container{border:2px solid var(--emw--col
 const LotteryTippingPanelStyle0 = lotteryTippingPanelCss;
 
 const downIcon = renderIconDefinitionToSVGElement(DownOutlined$1, {
-    extraSVGAttrs: { width: '16px', height: '16px', fill: '' }
+    extraSVGAttrs: { width: '16px', height: '16px', fill: 'currentColor' }
 });
 const lotteryTippingPanel = class {
     constructor(hostRef) {
@@ -10364,7 +10388,7 @@ const lotteryTippingPanel = class {
         this.stylingSubscription && this.stylingSubscription.unsubscribe();
     }
     render() {
-        return (h("div", { key: 'aad4bd39648c6e9df1191429caa1f8b35424d31c', class: "panel-container", ref: (el) => (this.stylingContainer = el) }, h("div", { key: '685317142a2fe2d110bbec41c6561446f1229b5b', class: { 'panel-header': true, active: this.expanded }, onClick: this.togglePanel }, h("div", { key: 'bf42af64a3eac7e8998cb9fe75c465eeaf44b7ba', class: "header-content" }, h("slot", { key: '181469c7a4cbe6030f64d4a08eb3e11390a4f569', name: "header" }, h("span", { key: '25db3b952ba81bff3a17d67ab9c960365abb6852' }, this.headerTitle))), h("span", { key: 'fc10e5fe178aa9b6bbae680b6fe58ca66c3a7df3', class: `arrow ${this.expanded ? 'expanded' : ''}`, innerHTML: downIcon })), h("div", { key: '8ae6e1a6b51eb398625d11d0b94fdbebf3cbcbc1', class: `panel-body ${this.expanded ? 'open' : 'closed'}` }, h("slot", { key: '9fdf6862787be818e8e9655f151630fd2913c4fd', name: "content" }))));
+        return (h("div", { key: 'a924b69afd386d9a4eea9cd7e68b7421dd3949fc', class: "panel-container", ref: (el) => (this.stylingContainer = el) }, h("div", { key: '250ffcdb2c188a099c3323b8bdb983cb01c56d66', class: { 'panel-header': true, active: this.expanded }, onClick: this.togglePanel }, h("div", { key: '09ff482c092c4bc534c9e053bd964ac8aad0311a', class: "header-content" }, h("slot", { key: 'eb463418cd334b070272d7f32edef2c63a2ad583', name: "header" }, h("span", { key: 'ca745afa0ee74494e17e10cf06430ecdaca04070' }, this.headerTitle))), h("span", { key: 'ff58468a38f1d37c9d4fe902e528584c8e43a721', class: `arrow ${this.expanded ? 'expanded' : ''}`, innerHTML: downIcon })), h("div", { key: '725f0bc8350e4cc5604b500384c1eca3196c60f3', class: `panel-body ${this.expanded ? 'open' : 'closed'}` }, h("slot", { key: 'a10bee4011b55784271817a396eaa8aad64c3c0e', name: "content" }))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -10375,6 +10399,112 @@ const lotteryTippingPanel = class {
 };
 lotteryTippingPanel.style = LotteryTippingPanelStyle0;
 
+const DEFAULT_LANGUAGE$2 = 'en';
+const SUPPORTED_LANGUAGES$2 = ['ro', 'en', 'fr', 'ar', 'hr'];
+const TRANSLATIONS$2 = {
+    en: {
+        selectionCleared: 'Your selection will be cleared.',
+        ticketSubmitted: 'Ticket submitted successfully.',
+        ticketFailed: 'Failed to purchase the ticket. Please try again.',
+        lines: 'Lines',
+        line: 'Line',
+        bettingType: 'Betting Type',
+        playingMode: 'Playing Mode',
+        orderSummaryTitle: 'Order Summary',
+        orderSummaryTickets: 'Tickets',
+        orderSummaryTotal: 'Total',
+        orderSummarySubmit: 'Submit',
+        cancel: 'Cancel',
+        confirm: 'Confirm'
+    },
+    ro: {
+        selectionCleared: 'Selecția dvs. va fi ștearsă.',
+        ticketSubmitted: 'Bilet trimis cu succes.',
+        ticketFailed: 'Nu s-a putut achiziționa biletul. Vă rugăm să încercați din nou.',
+        lines: 'Linii',
+        line: 'Linie',
+        bettingType: 'Tip de pariu',
+        playingMode: 'Mod de joc',
+        orderSummaryTitle: 'Sumar comandă',
+        orderSummaryTickets: 'Bilete',
+        orderSummaryTotal: 'Total',
+        orderSummarySubmit: 'Trimite',
+        cancel: 'Anulează',
+        confirm: 'Confirmă'
+    },
+    fr: {
+        selectionCleared: 'Votre sélection sera effacée.',
+        ticketSubmitted: 'Billet soumis avec succès.',
+        ticketFailed: "Échec de l'achat du billet. Veuillez réessayer.",
+        lines: 'Lignes',
+        line: 'Ligne',
+        bettingType: 'Type de pari',
+        playingMode: 'Mode de jeu',
+        orderSummaryTitle: 'Résumé de la commande',
+        orderSummaryTickets: 'Billets',
+        orderSummaryTotal: 'Total',
+        orderSummarySubmit: 'Soumettre',
+        cancel: 'Annuler',
+        confirm: 'Confirmer'
+    },
+    ar: {
+        selectionCleared: 'سيتم مسح اختيارك.',
+        ticketSubmitted: 'تم إرسال التذكرة بنجاح.',
+        ticketFailed: 'فشل شراء التذكرة. يرجى المحاولة مرة أخرى.',
+        lines: 'خطوط',
+        line: 'خط',
+        bettingType: 'نوع الرهان',
+        playingMode: 'وضع اللعب',
+        orderSummaryTitle: 'ملخص الطلب',
+        orderSummaryTickets: 'التذاكر',
+        orderSummaryTotal: 'المجموع',
+        orderSummarySubmit: 'إرسال',
+        cancel: 'إلغاء',
+        confirm: 'تأكيد'
+    },
+    hr: {
+        selectionCleared: 'Vaš odabir bit će obrisan.',
+        ticketSubmitted: 'Listić je uspješno predan.',
+        ticketFailed: 'Kupnja listića nije uspjela. Molimo pokušajte ponovo.',
+        lines: 'Linije',
+        line: 'Linija',
+        bettingType: 'Vrsta oklade',
+        playingMode: 'Način igranja',
+        orderSummaryTitle: 'Sažetak narudžbe',
+        orderSummaryTickets: 'Listići',
+        orderSummaryTotal: 'Ukupno',
+        orderSummarySubmit: 'Pošalji',
+        cancel: 'Odustani',
+        confirm: 'Potvrdi'
+    }
+};
+const translate$2 = (key, customLang) => {
+    const lang = customLang;
+    return TRANSLATIONS$2[lang !== undefined && SUPPORTED_LANGUAGES$2.includes(lang) ? lang : DEFAULT_LANGUAGE$2][key];
+};
+const getTranslations$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 formatDate$1 = ({ date, type = 'date', format: format$1 }) => {
     try {
         const parsedDate = parseISO(date);
@@ -10502,9 +10632,9 @@ const getPlayTypeConfig = ({ rawData, selectedBettingType, selectedPlayingMode }
     return { betTypeId, betType };
 };
 
-const DEFAULT_LANGUAGE$2 = 'en';
-const SUPPORTED_LANGUAGES$2 = ['ro', 'en', 'fr', 'ar', 'hr'];
-const TRANSLATIONS$2 = {
+const DEFAULT_LANGUAGE$1 = 'en';
+const SUPPORTED_LANGUAGES$1 = ['ro', 'en', 'fr', 'ar', 'hr'];
+const TRANSLATIONS$1 = {
     en: {
         stop: 'Stop',
         at: 'at'
@@ -10526,118 +10656,12 @@ const TRANSLATIONS$2 = {
         at: 'u'
     }
 };
-const translate$2 = (key, customLang) => {
-    const lang = customLang;
-    return TRANSLATIONS$2[lang !== undefined && SUPPORTED_LANGUAGES$2.includes(lang) ? lang : DEFAULT_LANGUAGE$2][key];
-};
-
-const DEFAULT_LANGUAGE$1 = 'en';
-const SUPPORTED_LANGUAGES$1 = ['ro', 'en', 'fr', 'ar', 'hr'];
-const TRANSLATIONS$1 = {
-    en: {
-        selectionCleared: 'Your selection will be cleared.',
-        ticketSubmitted: 'Ticket submitted successfully.',
-        ticketFailed: 'Failed to purchase the ticket. Please try again.',
-        lines: 'Lines',
-        line: 'Line',
-        bettingType: 'Betting Type',
-        playingMode: 'Playing Mode',
-        orderSummaryTitle: 'Order Summary',
-        orderSummaryTickets: 'Tickets',
-        orderSummaryTotal: 'Total',
-        orderSummarySubmit: 'Submit',
-        cancel: 'Cancel',
-        confirm: 'Confirm'
-    },
-    ro: {
-        selectionCleared: 'Selecția dvs. va fi ștearsă.',
-        ticketSubmitted: 'Bilet trimis cu succes.',
-        ticketFailed: 'Nu s-a putut achiziționa biletul. Vă rugăm să încercați din nou.',
-        lines: 'Linii',
-        line: 'Linie',
-        bettingType: 'Tip de pariu',
-        playingMode: 'Mod de joc',
-        orderSummaryTitle: 'Sumar comandă',
-        orderSummaryTickets: 'Bilete',
-        orderSummaryTotal: 'Total',
-        orderSummarySubmit: 'Trimite',
-        cancel: 'Anulează',
-        confirm: 'Confirmă'
-    },
-    fr: {
-        selectionCleared: 'Votre sélection sera effacée.',
-        ticketSubmitted: 'Billet soumis avec succès.',
-        ticketFailed: "Échec de l'achat du billet. Veuillez réessayer.",
-        lines: 'Lignes',
-        line: 'Ligne',
-        bettingType: 'Type de pari',
-        playingMode: 'Mode de jeu',
-        orderSummaryTitle: 'Résumé de la commande',
-        orderSummaryTickets: 'Billets',
-        orderSummaryTotal: 'Total',
-        orderSummarySubmit: 'Soumettre',
-        cancel: 'Annuler',
-        confirm: 'Confirmer'
-    },
-    ar: {
-        selectionCleared: 'سيتم مسح اختيارك.',
-        ticketSubmitted: 'تم إرسال التذكرة بنجاح.',
-        ticketFailed: 'فشل شراء التذكرة. يرجى المحاولة مرة أخرى.',
-        lines: 'خطوط',
-        line: 'خط',
-        bettingType: 'نوع الرهان',
-        playingMode: 'وضع اللعب',
-        orderSummaryTitle: 'ملخص الطلب',
-        orderSummaryTickets: 'التذاكر',
-        orderSummaryTotal: 'المجموع',
-        orderSummarySubmit: 'إرسال',
-        cancel: 'إلغاء',
-        confirm: 'تأكيد'
-    },
-    hr: {
-        selectionCleared: 'Vaš odabir bit će obrisan.',
-        ticketSubmitted: 'Listić je uspješno predan.',
-        ticketFailed: 'Kupnja listića nije uspjela. Molimo pokušajte ponovo.',
-        lines: 'Linije',
-        line: 'Linija',
-        bettingType: 'Vrsta oklade',
-        playingMode: 'Način igranja',
-        orderSummaryTitle: 'Sažetak narudžbe',
-        orderSummaryTickets: 'Listići',
-        orderSummaryTotal: 'Ukupno',
-        orderSummarySubmit: 'Pošalji',
-        cancel: 'Odustani',
-        confirm: 'Potvrdi'
-    }
-};
 const translate$1 = (key, customLang) => {
     const lang = customLang;
     return TRANSLATIONS$1[lang !== undefined && SUPPORTED_LANGUAGES$1.includes(lang) ? lang : DEFAULT_LANGUAGE$1][key];
 };
-const getTranslations$1 = (data) => {
-    Object.keys(data).forEach((item) => {
-        for (let key in data[item]) {
-            TRANSLATIONS$1[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 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  border: 1px solid var(--emw--color-gray-150, #6f6f6f);\n  border-radius: 0.4rem;\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 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 {
@@ -10648,6 +10672,7 @@ const LotteryTippingTicketBanner = class {
         this.clientStylingUrl = undefined;
         this.language = 'en';
         this.translationUrl = '';
+        this.logoUrl = undefined;
         this.stopTime = '';
         this.period = undefined;
     }
@@ -10704,8 +10729,7 @@ const LotteryTippingTicketBanner = class {
         this.stylingSubscription && this.stylingSubscription.unsubscribe();
     }
     render() {
-        const backgroundImagePath = getAssetPath('../static/poolgame-bg.webp');
-        return (h("div", { key: '07515ab821761d26edcc285f83f6e81dfab269ca', ref: (el) => (this.stylingContainer = el), class: "lottery-tipping-ticket-banner__container" }, h("section", { key: 'bbd8a3ae1b718f77b726dc89be4f901757579541', class: "banner" }, h("div", { key: '2b1883da2db0bfae83e5b4997c999fff433eb7a8', class: "left" }, h("img", { key: '54b482734d27bdfbbd2983bc95704273195fdd0d', alt: "Betting", src: backgroundImagePath, class: "logo" })), h("div", { key: '2a735ea687f0aaea72b0142f7026c9da0e15195d', class: "mid period" }, this.formattedPeriod), h("div", { key: '9c797b4a3bc6d2f0a69f4fd8af07f80eb765d0aa', class: "right" }, h("span", { key: '8c3abf153cf7f9ee1e2afcd42f67f7d90fe2f2a6', class: "pill" }, h("strong", { key: '4b3d99c269b4f494f62cbacc943f93f248004a96' }, translate$2('stop', this.language)), "\u00A0", translate$2('at', this.language), "\u00A0", this.formattedStopTime)))));
+        return (h("div", { key: '8b8b9d66021090e8a4f566e11908341fb6a65bad', ref: (el) => (this.stylingContainer = el), class: "lottery-tipping-ticket-banner__container" }, h("section", { key: '37d23ad6aca6c4a02283a78e6011d0c6e4f81dff', class: "banner" }, h("div", { key: '919a9f7535468d5d75fa21e5c48c56c6c994aea7', class: "left" }, this.logoUrl && h("img", { key: '1d8e9f3e9ed7eaec36b604401c0a4045d735c209', alt: "Betting", src: this.logoUrl, class: "logo" })), h("div", { key: '3cdc189bcab34d964e6a17339c60e449ba4883d7', class: "mid period" }, this.formattedPeriod), h("div", { key: '526f90497ed8a14ba03d04cffbbe7c263b0bd23c', class: "right" }, h("span", { key: '00676d5b0fae7ad7b4d2cf549572ae7b3d3091c1', class: "pill" }, h("strong", { key: 'dde2bac5a9316cf97d34a19a433e6bcb74d50750' }, translate$1('stop', this.language)), "\u00A0", translate$1('at', this.language), "\u00A0", this.formattedStopTime)))));
     }
     static get assetsDirs() { return ["../static"]; }
     static get watchers() { return {
@@ -10842,16 +10866,30 @@ const showNotification = ({ message, theme = 'success' }) => {
     });
 };
 
-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 img {\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 img {\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 img {\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 {\n  line-height: 1rem;\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}";
+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) {
         registerInstance(this, hostRef);
         this.lotteryTippingBulletBetEvent = createEvent(this, "lotteryTippingBulletBetSelect", 7);
         this.lotteryTippingCurrentPageChangeEvent = createEvent(this, "lotteryTippingCurrentPageChange", 7);
-        this.infoImagePath = getAssetPath('../static/info.svg');
-        this.eventNameRender = (item, value) => (h("div", { class: "flex gap-1 eventNameContainer__item" }, h("span", { class: "eventNameContainer__item--title" }, value), h("general-tooltip", null, h("img", { slot: "trigger", class: "info-icon", src: this.infoImagePath, style: { width: '18px' } }), h("div", { slot: "content" }, h("div", { class: "match-info" }, h("div", { class: "match-info-item" }, h("div", { class: "match-info-item-label" }, translate('homeTeam', this.language)), h("div", { class: "match-info-item-value" }, item.homeName)), h("div", { class: "match-info-item" }, h("div", { class: "match-info-item-label" }, translate('awayTeam', this.language)), h("div", { class: "match-info-item-value" }, item.awayName)))))));
+        this.eventNameRender = (item, value) => (h("div", { class: "flex gap-1 eventNameContainer__item" }, h("span", { class: "eventNameContainer__item--title" }, value), h("general-tooltip", null, h("span", { slot: "trigger", class: "icon info-icon", innerHTML: infoImagePath, style: { width: '18px' } }), h("div", { slot: "content" }, h("div", { class: "match-info" }, h("div", { class: "match-info-item" }, h("div", { class: "match-info-item-label" }, translate('homeTeam', this.language)), h("div", { class: "match-info-item-value" }, item.homeName)), h("div", { class: "match-info-item" }, h("div", { class: "match-info-item-label" }, translate('awayTeam', this.language)), h("div", { class: "match-info-item-value" }, item.awayName)))))));
         this.columns = [
             { title: '', value: 'index', width: 3 },
             {
@@ -11117,11 +11155,13 @@ const LotteryTippingTicketBet = class {
     handleCurrentPageChange() {
         this.lotteryTippingCurrentPageChangeEvent.emit({ currentPage: this.currentPage });
     }
+    renderLoading() {
+        return (h("div", { class: "loading-wrap" }, h("section", { class: "dots-container" }, h("div", { class: "dot" }), h("div", { class: "dot" }), h("div", { class: "dot" }), h("div", { class: "dot" }), h("div", { class: "dot" }))));
+    }
     render() {
         var _a, _b, _c, _d;
-        const loadingImagePath = getAssetPath('../static/loading.svg');
         if (this.isLoading) {
-            return (h("div", { ref: (el) => (this.stylingContainer = el), class: "LotteryTippingTicketBet__container" }, h("div", { class: "flex align-center gap-1" }, h("p", null, translate('loading', this.language)), h("img", { src: loadingImagePath }))));
+            return this.renderLoading();
         }
         if (this.hasErrors) {
             return (h("div", { ref: (el) => (this.stylingContainer = el), class: "LotteryTippingTicketBet__container" }, h("p", null, translate('error', this.language))));
@@ -11130,10 +11170,6 @@ const LotteryTippingTicketBet = class {
             var _a;
             return (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)));
         })))), h("tbody", null, dataSource.map((row, index) => (h("tr", { key: index }, columns.map((column) => (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) : row[column.value])))))))));
-        const deleteImagePath = getAssetPath('../static/delete.svg');
-        const addImagePath = getAssetPath('../static/add.svg');
-        const leftImagePath = getAssetPath('../static/left-arrow.svg');
-        const rightImagePath = getAssetPath('../static/right-arrow.svg');
         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) {
@@ -11143,16 +11179,16 @@ const LotteryTippingTicketBet = class {
             return (h("div", { class: "LotteryTippingTicketBet__container", ref: (el) => (this.stylingContainer = el) }, h("div", { class: "LotteryTippingTicketBet__main", ref: (el) => (this.mainContainer = el) }, 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 && (h("div", null, h("div", { class: 'border-line' }), h("div", { class: "LotteryTippingTicketBet__footer" }, h("div", { class: "my-pagination flex justify-between" }, h("span", null, translate('lineInfo', this.language, {
                 currentPage: this.currentPage,
                 totalPages: this.totalPages
-            })), h("div", { class: 'flex gap-1' }, h("span", { class: `btn ${this.currentPage === 1 ? 'disabled' : ''}`, onClick: this.prevPage.bind(this) }, h("img", { src: leftImagePath })), h("span", { class: `btn ${this.currentPage === this.totalPages ? 'disabled' : ''}`, onClick: this.nextPage.bind(this) }, h("img", { src: rightImagePath }))))))))));
+            })), h("div", { class: 'flex gap-1' }, h("span", { class: `btn ${this.currentPage === 1 ? 'disabled' : ''}`, onClick: this.prevPage.bind(this) }, h("span", { class: "icon", innerHTML: leftImagePath })), h("span", { class: `btn ${this.currentPage === this.totalPages ? 'disabled' : ''}`, onClick: this.nextPage.bind(this) }, h("span", { class: "icon", innerHTML: rightImagePath }))))))))));
         }
         return (h("div", { ref: (el) => (this.stylingContainer = el), class: "LotteryTippingTicketBet__container" }, h("div", { class: "LotteryTippingTicketBet__tableToolbar flex justify-end gap-1" }, h("button", { class: {
                 'LotteryTippingTicketBet__tableToolbar--item': true,
                 'mr-0': !(lineOperatorAddShow || lineOperatorRemoveShow)
             }, onClick: this.handleClearAll.bind(this) }, translate('clearAll', this.language))), h("div", { class: "flex align-center LotteryTippingTicketBet__main", ref: (el) => (this.mainContainer = el) }, 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) && (h("div", { class: "LotteryTippingTicketBet__lineOperatorGroup" }, lineOperatorAddShow && (h("div", { class: {
                 'LotteryTippingTicketBet__lineOperatorGroup--item': true
-            }, onClick: this.handleAddLine.bind(this) }, h("img", { src: addImagePath }))), lineOperatorRemoveShow && (h("div", { class: {
+            }, onClick: this.handleAddLine.bind(this) }, h("span", { class: "icon", innerHTML: addImagePath }))), lineOperatorRemoveShow && (h("div", { class: {
                 'LotteryTippingTicketBet__lineOperatorGroup--item': true
-            }, onClick: this.handleRemoveLine.bind(this) }, h("img", { src: deleteImagePath })))))), h("div", { class: 'border-line' }), h("div", { class: "LotteryTippingTicketBet__footer" }, h("div", { class: "my-pagination flex justify-between" }, h("span", null, translate('lineInfo', this.language, { currentPage: this.currentPage, totalPages: this.totalPages })), h("div", { class: 'flex gap-1' }, h("span", { class: `btn ${this.currentPage === 1 ? 'disabled' : ''}`, onClick: this.prevPage.bind(this) }, h("img", { src: leftImagePath })), h("span", { class: `btn ${this.currentPage === this.totalPages ? 'disabled' : ''}`, onClick: this.nextPage.bind(this) }, h("img", { src: rightImagePath }))))), this.dialogConfig.visible && (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))));
+            }, onClick: this.handleRemoveLine.bind(this) }, h("span", { class: "icon", innerHTML: deleteImagePath })))))), h("div", { class: 'border-line' }), h("div", { class: "LotteryTippingTicketBet__footer" }, h("div", { class: "my-pagination flex justify-between" }, h("span", null, translate('lineInfo', this.language, { currentPage: this.currentPage, totalPages: this.totalPages })), h("div", { class: 'flex gap-1' }, h("span", { class: `btn ${this.currentPage === 1 ? 'disabled' : ''}`, onClick: this.prevPage.bind(this) }, h("span", { class: "icon", innerHTML: leftImagePath })), h("span", { class: `btn ${this.currentPage === this.totalPages ? 'disabled' : ''}`, onClick: this.nextPage.bind(this) }, h("span", { class: "icon", innerHTML: rightImagePath }))))), this.dialogConfig.visible && (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 {
@@ -11180,19 +11216,22 @@ var BettingTypeEnum;
     BettingTypeEnum["Both"] = "Both";
 })(BettingTypeEnum || (BettingTypeEnum = {}));
 
-const lotteryTippingTicketControllerCss = ".lottery-tipping-ticket-controller__container {\n  display: block;\n  box-sizing: border-box;\n  font-size: 14px;\n  container-type: inline-size;\n  background: var(--emw--color-background, #fff);\n}\n@container (max-width: 375px) {\n  .lottery-tipping-ticket-controller__container {\n    font-size: 12px;\n  }\n}\n\n.LotteryTippingTicketController__top {\n  padding: 1.8rem;\n  display: flex;\n  flex-direction: column;\n  gap: 2rem;\n  margin: 0 auto;\n  max-width: 800px;\n}\n.LotteryTippingTicketController__row {\n  display: flex;\n  align-items: center;\n  gap: 1rem;\n  justify-content: space-between;\n  flex-wrap: wrap;\n}\n.LotteryTippingTicketController__section {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n}\n.LotteryTippingTicketController__label {\n  font-weight: 500;\n  white-space: nowrap;\n  width: 6rem;\n  color: var(--emw--color-typography-secondary, #333);\n}\n.LotteryTippingTicketController__segmented-control {\n  height: 2.2rem;\n  display: inline-flex;\n  background-color: var(--emw--color-background-secondary, #f5f5f5);\n  border-radius: 2rem;\n  padding: 0.2rem;\n}\n.LotteryTippingTicketController__segment {\n  background-color: transparent;\n  border: none;\n  padding: 0.3rem 0.8rem;\n  cursor: pointer;\n  font-weight: 500;\n  border-radius: 2rem;\n  outline: none;\n  transition: background-color 0.25s ease, color 0.25s ease;\n  white-space: nowrap;\n  color: var(--emw--color-typography, #000);\n}\n.LotteryTippingTicketController__segment--active {\n  background-color: var(--emw--color-background, #ffffff);\n  color: var(--emw--color-typography, #000);\n  font-weight: 600;\n}\n.LotteryTippingTicketController__segment--disabled:hover {\n  cursor: not-allowed !important;\n}\n.LotteryTippingTicketController__segment:not(.LotteryTippingTicketController__segment--active):hover {\n  background-color: var(--emw--color-background-tertiary, #ccc);\n}\n\n.flex {\n  display: flex;\n}\n\n.flex-wrap {\n  flex-wrap: wrap;\n}\n\n.align-center {\n  align-items: center;\n}\n\n.gap-1 {\n  gap: 4px;\n}\n\n.LotteryTippingTicketController__main {\n  align-items: flex-start;\n  justify-content: center;\n  gap: 2rem;\n  max-width: 1200px;\n  margin: 0 auto;\n  padding: 0 20px;\n  flex-wrap: wrap;\n}\n.LotteryTippingTicketController__main--left {\n  border: 1px solid var(--emw--color-gray-50, #f5f5f5);\n  padding: 1rem;\n  border-radius: 1rem;\n  flex: 1.5;\n}\n.LotteryTippingTicketController__main--right {\n  padding: 1rem;\n  border-radius: 1rem;\n  flex: 1;\n}\n\n.order-summary {\n  max-width: 360px;\n  width: 100%;\n  background: var(--emw--color-background, #fff);\n}\n\n.order-summary__title {\n  margin-bottom: 16px;\n  text-align: center;\n  color: var(--emw--color-typography, #000);\n  text-transform: uppercase;\n}\n\n.order-summary__ticket-info {\n  display: flex;\n  align-items: center;\n  margin-bottom: 16px;\n  gap: 10px;\n  color: var(--emw--color-typography, #000);\n}\n\n.order-summary__ticket {\n  font-weight: 500;\n  width: 50px;\n  text-align: right;\n  color: var(--emw--color-typography, #000);\n}\n\n.order-summary__details {\n  display: flex;\n  align-items: center;\n  color: var(--emw--color-typography, #000);\n}\n\n.order-summary__multiplier {\n  color: var(--emw--color-typography-secondary, #333);\n  margin: 0 8px;\n}\n\n.order-summary__divider {\n  border: none;\n  border-top: 1px solid var(--emw--color-gray-100, #e6e6e6);\n  margin: 20px 0;\n}\n\n.order-summary__button-wrapper {\n  display: flex;\n  justify-content: center;\n}\n\n.order-summary__button {\n  cursor: pointer;\n  padding: 0.5rem 4rem;\n  background: var(--emw--color-primary, #fed275);\n  color: var(--emw--color-typography, #000);\n  border-radius: var(--emw--button-border-radius, 4px);\n  border: none;\n}\n\n.order-summary__button:not(.order-summary__button--disabled):not(.order-summary__button--loading):hover {\n  transform: translateY(-1px);\n  background: var(--emw--color-primary-variant, #ffe66f);\n}\n\n.order-summary__button--loading {\n  background: var(--emw--color-primary-variant, #ffe66f);\n  cursor: not-allowed;\n}\n\n.order-summary__button--disabled {\n  background: var(--emw--color-background-secondary, #f5f5f5);\n  color: var(--emw--color-typography, #000);\n  cursor: not-allowed;\n}\n\n.skeleton-content {\n  display: flex;\n  flex-direction: column;\n  gap: 29px;\n  align-items: center;\n}\n\n.skeleton-item {\n  background: var(--emw--color-background-secondary, #f5f5f5);\n  border-radius: 4px;\n  height: 40px;\n  width: 200px;\n}\n\n.skeleton-animated {\n  animation: skeleton-shimmer 1.5s infinite linear;\n  background: linear-gradient(90deg, var(--emw--color-background-secondary, #f5f5f5) 25%, var(--emw--color-background-tertiary, #ccc) 37%, var(--emw--color-background-secondary, #f5f5f5) 63%);\n  background-size: 200% 100%;\n}\n\n@keyframes skeleton-shimmer {\n  to {\n    background-position: 100% 0;\n  }\n}";
+const lotteryTippingTicketControllerCss = ".lottery-tipping-ticket-controller__container {\n  display: block;\n  box-sizing: border-box;\n  font-size: 14px;\n  container-type: inline-size;\n  background: var(--emw--color-background, #fff);\n}\n@container (max-width: 375px) {\n  .lottery-tipping-ticket-controller__container {\n    font-size: 12px;\n  }\n}\n\n.LotteryTippingTicketController__top {\n  padding: 1.8rem;\n  display: flex;\n  flex-direction: column;\n  gap: 2rem;\n  margin: 0 auto;\n  max-width: 800px;\n}\n.LotteryTippingTicketController__row {\n  display: flex;\n  align-items: center;\n  gap: 1rem;\n  justify-content: space-between;\n  flex-wrap: wrap;\n}\n.LotteryTippingTicketController__section {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n}\n.LotteryTippingTicketController__label {\n  font-weight: 500;\n  white-space: nowrap;\n  width: 6rem;\n  color: var(--emw--color-typography-secondary, #333);\n}\n.LotteryTippingTicketController__segmented-control {\n  height: 2.2rem;\n  display: inline-flex;\n  background-color: var(--emw--color-background-secondary, #f5f5f5);\n  border-radius: 2rem;\n  padding: 0.2rem;\n}\n.LotteryTippingTicketController__segment {\n  background-color: transparent;\n  border: none;\n  padding: 0.3rem 0.8rem;\n  cursor: pointer;\n  font-weight: 500;\n  border-radius: 2rem;\n  outline: none;\n  transition: background-color 0.25s ease, color 0.25s ease;\n  white-space: nowrap;\n  color: var(--emw--color-typography, #000);\n}\n.LotteryTippingTicketController__segment--active {\n  background-color: var(--emw--color-background, #ffffff);\n  color: var(--emw--color-typography, #000);\n  font-weight: 600;\n}\n.LotteryTippingTicketController__segment--disabled:hover {\n  cursor: not-allowed !important;\n}\n.LotteryTippingTicketController__segment:not(.LotteryTippingTicketController__segment--active):hover {\n  background-color: var(--emw--color-background-tertiary, #ccc);\n}\n\n.flex {\n  display: flex;\n}\n\n.flex-wrap {\n  flex-wrap: wrap;\n}\n\n.align-center {\n  align-items: center;\n}\n\n.gap-1 {\n  gap: 4px;\n}\n\n.LotteryTippingTicketController__main {\n  align-items: flex-start;\n  justify-content: center;\n  gap: 2rem;\n  max-width: 1200px;\n  margin: 0 auto;\n  padding: 0 20px;\n  flex-wrap: wrap;\n}\n.LotteryTippingTicketController__main--left {\n  border: 1px solid var(--emw--color-gray-50, #f5f5f5);\n  padding: 1rem;\n  border-radius: 1rem;\n  flex: 1.5;\n}\n.LotteryTippingTicketController__main--right {\n  padding: 1rem;\n  border-radius: 1rem;\n  flex: 1;\n}\n\n.order-summary {\n  max-width: 360px;\n  width: 100%;\n  background: var(--emw--color-background, #fff);\n}\n\n.order-summary__title {\n  margin-bottom: 16px;\n  text-align: center;\n  color: var(--emw--color-typography, #000);\n  text-transform: uppercase;\n}\n\n.order-summary__ticket-info {\n  display: flex;\n  align-items: center;\n  margin-bottom: 16px;\n  gap: 10px;\n  color: var(--emw--color-typography, #000);\n}\n\n.order-summary__ticket {\n  font-weight: 500;\n  width: 50px;\n  text-align: right;\n  color: var(--emw--color-typography, #000);\n}\n\n.order-summary__details {\n  display: flex;\n  align-items: center;\n  color: var(--emw--color-typography, #000);\n}\n\n.order-summary__multiplier {\n  color: var(--emw--color-typography-secondary, #333);\n  margin: 0 8px;\n}\n\n.order-summary__divider {\n  border: none;\n  border-top: 1px solid var(--emw--color-gray-100, #e6e6e6);\n  margin: 20px 0;\n}\n\n.order-summary__button-wrapper {\n  display: flex;\n  justify-content: center;\n}\n\n.order-summary__button {\n  cursor: pointer;\n  padding: 0.8rem 4rem;\n  background: var(--emw--color-primary, #fed275);\n  color: var(--emw--color-typography, #000);\n  border-radius: var(--emw--button-border-radius, 4px);\n  border: none;\n  position: relative;\n}\n\n.loading-icon {\n  position: absolute;\n  right: 40px;\n  top: 10px;\n}\n\n.order-summary__button:not(.order-summary__button--disabled):not(.order-summary__button--loading):hover {\n  transform: translateY(-1px);\n  background: var(--emw--color-primary-variant, #ffe66f);\n}\n\n.order-summary__button--loading {\n  background: var(--emw--color-primary-variant, #ffe66f);\n  cursor: not-allowed;\n}\n\n.order-summary__button--disabled {\n  background: var(--emw--color-background-secondary, #f5f5f5);\n  color: var(--emw--color-typography, #000);\n  cursor: not-allowed;\n}\n\n.skeleton-content {\n  display: flex;\n  flex-direction: column;\n  gap: 29px;\n  align-items: center;\n}\n\n.skeleton-item {\n  background: var(--emw--color-background-secondary, #f5f5f5);\n  border-radius: 4px;\n  height: 40px;\n  width: 200px;\n}\n\n.skeleton-animated {\n  animation: skeleton-shimmer 1.5s infinite linear;\n  background: linear-gradient(90deg, var(--emw--color-background-secondary, #f5f5f5) 25%, var(--emw--color-background-tertiary, #ccc) 37%, var(--emw--color-background-secondary, #f5f5f5) 63%);\n  background-size: 200% 100%;\n}\n\n@keyframes skeleton-shimmer {\n  to {\n    background-position: 100% 0;\n  }\n}\n.loading-icon.scale {\n  animation: scale 1s infinite ease-in-out;\n}\n\n@keyframes scale {\n  0%, 100% {\n    transform: scale(1);\n  }\n  50% {\n    transform: scale(1.2);\n  }\n}";
 const LotteryTippingTicketControllerStyle0 = lotteryTippingTicketControllerCss;
 
+const loadingImagePath = renderIconDefinitionToSVGElement(EllipsisOutlined$1, {
+    extraSVGAttrs: { height: '20px', width: '20px', fill: 'currentColor' }
+});
 const LotteryTippingTicketController = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.logoutEventHandler = createEvent(this, "logout", 7);
-        this.loadingImagePath = getAssetPath('../static/loading.svg');
         this.mbSource = undefined;
         this.clientStyling = undefined;
         this.clientStylingUrl = undefined;
         this.translationUrl = '';
         this.language = 'en';
+        this.logoUrl = undefined;
         this.endpoint = '';
         this.endpointTicket = undefined;
         this.sessionId = undefined;
@@ -11282,7 +11321,7 @@ const LotteryTippingTicketController = class {
             };
             this.dialogConfig = {
                 visible: true,
-                content: translate$1('selectionCleared', this.language),
+                content: translate$2('selectionCleared', this.language),
                 onConfirm: onConfirm,
                 onCancel: closeDialog
             };
@@ -11441,7 +11480,7 @@ const LotteryTippingTicketController = class {
         this.submitLoading = true;
         doSubmitTicket({ body, sessionId: this.sessionId, url: url.href })
             .then(() => {
-            showNotification$1({ message: translate$1('ticketSubmitted', this.language) });
+            showNotification$1({ message: translate$2('ticketSubmitted', this.language) });
             this.clearBulletConfig();
         })
             .catch((res) => {
@@ -11450,7 +11489,7 @@ const LotteryTippingTicketController = class {
                 showNotification$1({ message: TICKET_INVALID_TOKEN, theme: 'error' });
                 return;
             }
-            showNotification$1({ message: translate$1('ticketFailed', this.language), theme: 'error' });
+            showNotification$1({ message: translate$2('ticketFailed', this.language), theme: 'error' });
         })
             .finally(() => {
             this.submitLoading = false;
@@ -11458,9 +11497,9 @@ const LotteryTippingTicketController = class {
     }
     get lineCountRender() {
         const _ = thousandSeparator(this.totalLineCombination);
-        let unit = translate$1('lines', this.language);
+        let unit = translate$2('lines', this.language);
         if ([0, 1].includes(+_))
-            unit = translate$1('line', this.language);
+            unit = translate$2('line', this.language);
         return _ + ' ' + unit;
     }
     renderBettingControls() {
@@ -11473,18 +11512,18 @@ const LotteryTippingTicketController = class {
                 LotteryTippingTicketController__segment: true,
                 'LotteryTippingTicketController__segment--active': this.selectedPlayingMode === item.code
             }, onClick: this.handlePlayingModeChange.bind(this, item.code) }, item.name)))));
-        return (h("div", { class: "LotteryTippingTicketController__top" }, h("div", { class: "LotteryTippingTicketController__row" }, h("div", { class: "LotteryTippingTicketController__section" }, h("span", { class: "LotteryTippingTicketController__label" }, translate$1('bettingType', this.language)), !!this.bettingTypeOptions.length ? renderBettingTypeOptions() : renderSkeleton()), h("div", { class: "LotteryTippingTicketController__section" }, h("span", { class: "LotteryTippingTicketController__label" }, translate$1('playingMode', this.language)), !!this.playingModeOptions.length ? renderPlayingModeOptions() : renderSkeleton()))));
+        return (h("div", { class: "LotteryTippingTicketController__top" }, h("div", { class: "LotteryTippingTicketController__row" }, h("div", { class: "LotteryTippingTicketController__section" }, h("span", { class: "LotteryTippingTicketController__label" }, translate$2('bettingType', this.language)), !!this.bettingTypeOptions.length ? renderBettingTypeOptions() : renderSkeleton()), h("div", { class: "LotteryTippingTicketController__section" }, h("span", { class: "LotteryTippingTicketController__label" }, translate$2('playingMode', this.language)), !!this.playingModeOptions.length ? renderPlayingModeOptions() : renderSkeleton()))));
     }
     renderOrderSummary() {
-        return (h("div", { class: "LotteryTippingTicketController__main--right order-summary" }, h("h3", { class: "order-summary__title" }, translate$1('orderSummaryTitle', this.language)), h("div", { class: "order-summary__ticket-info" }, h("div", { class: "order-summary__ticket" }, translate$1('orderSummaryTickets', this.language), ":"), h("div", { class: "order-summary__details" }, h("span", { class: "order-summary__line-count" }, this.lineCountRender), h("div", null, this.currentStake && h("span", { class: "order-summary__multiplier" }, "x"), h("span", { class: "order-summary__stake" }, this.currentStakeFormatted)), this.isBothBettingType && (h("div", null, h("span", { class: "order-summary__multiplier" }, "x"), h("span", { class: "order-summary__stake" }, "2"))))), h("hr", { class: "order-summary__divider" }), h("div", { class: "order-summary__ticket-info" }, h("div", { class: "order-summary__ticket" }, translate$1('orderSummaryTotal', this.language), ":"), h("span", { class: "order-summary__details" }, this.totalAmountFormatted)), h("div", { class: "order-summary__button-wrapper" }, h("button", { class: {
+        return (h("div", { class: "LotteryTippingTicketController__main--right order-summary" }, h("h3", { class: "order-summary__title" }, translate$2('orderSummaryTitle', this.language)), h("div", { class: "order-summary__ticket-info" }, h("div", { class: "order-summary__ticket" }, translate$2('orderSummaryTickets', this.language), ":"), h("div", { class: "order-summary__details" }, h("span", { class: "order-summary__line-count" }, this.lineCountRender), h("div", null, this.currentStake && h("span", { class: "order-summary__multiplier" }, "x"), h("span", { class: "order-summary__stake" }, this.currentStakeFormatted)), this.isBothBettingType && (h("div", null, h("span", { class: "order-summary__multiplier" }, "x"), h("span", { class: "order-summary__stake" }, "2"))))), h("hr", { class: "order-summary__divider" }), h("div", { class: "order-summary__ticket-info" }, h("div", { class: "order-summary__ticket" }, translate$2('orderSummaryTotal', this.language), ":"), h("span", { class: "order-summary__details" }, this.totalAmountFormatted)), h("div", { class: "order-summary__button-wrapper" }, h("button", { class: {
                 'order-summary__button': true,
                 'order-summary__button--disabled': !this.hasSelectAllBullet,
                 'order-summary__button--loading': this.submitLoading
-            }, onClick: this.handleSubmit.bind(this), disabled: !this.hasSelectAllBullet || this.submitLoading }, h("div", { class: "flex align-center gap-1" }, translate$1('orderSummarySubmit', this.language), this.submitLoading && h("img", { src: this.loadingImagePath }))))));
+            }, onClick: this.handleSubmit.bind(this), disabled: !this.hasSelectAllBullet || this.submitLoading }, h("span", { class: "order-summary__button--text" }, translate$2('orderSummarySubmit', this.language)), this.submitLoading && h("span", { class: "loading-icon scale", innerHTML: loadingImagePath })))));
     }
     render() {
         var _a, _b, _c, _d, _e, _f, _g;
-        return (h("div", { key: '0a07c0f2b9d0ba2f72596ca2a39daace665d752f', class: "lottery-tipping-ticket-controller__container", ref: (el) => (this.stylingContainer = el) }, h("lottery-tipping-ticket-banner", { key: 'c02cbcab65f5d37455fdf6f416d880e40156f7a5', "client-styling": this.clientStyling, "client-styling-Url": this.clientStylingUrl, stopTime: (_b = (_a = this.rawData) === null || _a === void 0 ? void 0 : _a.currentDraw) === null || _b === void 0 ? void 0 : _b.wagerCloseTime, period: (_d = (_c = this.rawData) === null || _c === void 0 ? void 0 : _c.currentDraw) === null || _d === void 0 ? void 0 : _d.date, language: this.language, "translation-url": this.translationUrl }), this.renderBettingControls(), h("div", { key: 'bab9dfd04949e8f6cf41dea54a365beb5ab68c31', class: "flex flex-wrap LotteryTippingTicketController__main" }, h("div", { key: '3e60ccac1e6fcac2002f969a15fe5b323778999c', class: "LotteryTippingTicketController__main--left" }, h("lottery-tipping-ticket-bet", { key: '687dc500753e860750d436203b7a2585ed37658d', ref: (el) => (this.childRef = el), endpoint: this.endpoint, "session-id": this.sessionId, "game-id": (_e = this.rawData) === null || _e === void 0 ? void 0 : _e.type, "draw-id": this.drawId, language: this.language, "translation-url": this.translationUrl, "max-total-pages": this.lineNumberRange.maxLineNumber, "min-total-pages": this.lineNumberRange.minLineNumber, "total-pages": this.lineNumberRange.defaultBoards, mode: this.selectedPlayingMode === PlayModeEnum.SingleBet ? 'single' : 'multi', "client-styling": this.clientStyling, "client-styling-Url": this.clientStylingUrl })), this.renderOrderSummary()), this.dialogConfig.visible && (h("vaadin-confirm-dialog", { key: '4e5ae727ceaff20804a3c7c9acf63f8a3d2bd54d', rejectButtonVisible: true, rejectText: translate$1('cancel', this.language), confirmText: translate$1('confirm', this.language), opened: (_f = this.dialogConfig) === null || _f === void 0 ? void 0 : _f.visible, onConfirm: this.dialogConfig.onConfirm, onReject: this.dialogConfig.onCancel }, (_g = this.dialogConfig) === null || _g === void 0 ? void 0 : _g.content))));
+        return (h("div", { key: '6b7aee4aacf53744bed1b3f3064b3a8357806ce5', class: "lottery-tipping-ticket-controller__container", ref: (el) => (this.stylingContainer = el) }, h("lottery-tipping-ticket-banner", { key: '59907469fbee5440485938631bf311476d2649df', "client-styling": this.clientStyling, "client-styling-Url": this.clientStylingUrl, stopTime: (_b = (_a = this.rawData) === null || _a === void 0 ? void 0 : _a.currentDraw) === null || _b === void 0 ? void 0 : _b.wagerCloseTime, period: (_d = (_c = this.rawData) === null || _c === void 0 ? void 0 : _c.currentDraw) === null || _d === void 0 ? void 0 : _d.date, language: this.language, "translation-url": this.translationUrl, "logo-url": this.logoUrl }), this.renderBettingControls(), h("div", { key: '891700a5bb16ce5ddb4be8a0c48c824a97710edd', class: "flex flex-wrap LotteryTippingTicketController__main" }, h("div", { key: 'bdc6509e6a560bfaa01a730c3967d3e26c3e9dc9', class: "LotteryTippingTicketController__main--left" }, h("lottery-tipping-ticket-bet", { key: '8fbfdf48b51ac3aa8faf51da106131d25ed99992', ref: (el) => (this.childRef = el), endpoint: this.endpoint, "session-id": this.sessionId, "game-id": (_e = this.rawData) === null || _e === void 0 ? void 0 : _e.type, "draw-id": this.drawId, language: this.language, "translation-url": this.translationUrl, "max-total-pages": this.lineNumberRange.maxLineNumber, "min-total-pages": this.lineNumberRange.minLineNumber, "total-pages": this.lineNumberRange.defaultBoards, mode: this.selectedPlayingMode === PlayModeEnum.SingleBet ? 'single' : 'multi', "client-styling": this.clientStyling, "client-styling-Url": this.clientStylingUrl })), this.renderOrderSummary()), this.dialogConfig.visible && (h("vaadin-confirm-dialog", { key: 'a93fcec56f649438c6f0d3668d322885dd4da7dc', rejectButtonVisible: true, rejectText: translate$2('cancel', this.language), confirmText: translate$2('confirm', this.language), opened: (_f = this.dialogConfig) === null || _f === void 0 ? void 0 : _f.visible, onConfirm: this.dialogConfig.onConfirm, onReject: this.dialogConfig.onCancel }, (_g = this.dialogConfig) === null || _g === void 0 ? void 0 : _g.content))));
     }
     static get assetsDirs() { return ["../static"]; }
     static get watchers() { return {