@everymatrix/lottery-tipping-entrance 1.94.62 → 1.94.63

package/dist/cjs/{draw-selection_20.cjs.entry.js → app-tooltip_26.cjs.entry.js}

@@ -2,8 +2,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-2a5f420f.js');
-const lotteryTippingEntrance = require('./lottery-tipping-entrance-d0c92753.js');
+const index = require('./index-cfe49ce0.js');
+const lotteryTippingEntrance = require('./lottery-tipping-entrance-5d99622f.js');
 
 /**
  * @name addDays
@@ -115,6 +115,40 @@ function isBefore(dirtyDate, dirtyDateToCompare) {
   return date.getTime() < dateToCompare.getTime();
 }
 
+const tooltipCss = ":host{display:inline-flex;position:relative}.tooltip-wrapper{position:relative;display:inline-flex}.tooltip-content-wrapper{position:absolute;z-index:10;bottom:125%;left:50%;transform:translateX(-50%);opacity:0;visibility:hidden;transition:opacity 0.2s, visibility 0.2s}.tooltip-content-wrapper.visible{opacity:1;visibility:visible}.tooltip-content{background-color:var(--emw--tooltip-background-color, #000);color:var(--emw--tooltip-text-color, #fff);border-radius:4px;box-shadow:0 2px 8px rgba(0, 0, 0, 0.15);white-space:nowrap;padding:4px}";
+const AppTooltipStyle0 = tooltipCss;
+
+const Tooltip = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.show = () => (this.visible = true);
+        this.hide = () => (this.visible = false);
+        this.visible = false;
+    }
+    componentDidLoad() {
+        this.trigger = this.host.querySelector('[slot="trigger"]');
+        if (this.trigger) {
+            this.trigger.addEventListener('mouseenter', this.show);
+            this.trigger.addEventListener('mouseleave', this.hide);
+            this.trigger.addEventListener('focus', this.show);
+            this.trigger.addEventListener('blur', this.hide);
+        }
+    }
+    disconnectedCallback() {
+        if (this.trigger) {
+            this.trigger.removeEventListener('mouseenter', this.show);
+            this.trigger.removeEventListener('mouseleave', this.hide);
+            this.trigger.removeEventListener('focus', this.show);
+            this.trigger.removeEventListener('blur', this.hide);
+        }
+    }
+    render() {
+        return (index.h("div", { key: 'e56695ac60fcd7903127179423e9954ef40f05c0', class: "tooltip-wrapper" }, index.h("slot", { key: '4e2472a395ceeb2b911692739d326c031df07e29', name: "trigger" }), index.h("div", { key: 'f77bd72da94eb17d12e42ebb86c395c55801b728', class: { 'tooltip-content-wrapper': true, visible: this.visible } }, index.h("div", { key: '988399e2b42988622d46eaf255f17c6221eb9697', class: "tooltip-content" }, index.h("slot", { key: '05de0572ab1331d965e61947c5c15775e225197a', name: "content" })))));
+    }
+    get host() { return index.getElement(this); }
+};
+Tooltip.style = AppTooltipStyle0;
+
 const infoImage = `<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg height="1024" node-id="1" sillyvg="true" template-height="1024" template-width="1024" version="1.1" viewBox="0 0 1024 1024" width="1024" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs node-id="52"></defs><g node-id="165"><g node-id="176"><path d="M 715.70 689.10 L 724.50 691.70 L 724.10 693.20 L 715.20 690.50 L 715.70 689.10 Z M 733.50 693.80 L 742.60 695.40 L 742.40 696.90 L 733.20 695.30 L 733.50 693.80 Z M 751.70 696.50 L 760.90 697.00 L 760.90 698.60 L 751.60 698.10 L 751.70 696.50 Z M 901.10 462.70 L 902.50 461.90 L 906.90 470.10 L 905.50 470.80 L 901.10 462.70 Z M 770.10 697.00 L 779.30 696.40 L 779.40 698.00 L 770.10 698.60 L 770.10 697.00 Z M 909.30 479.20 L 910.70 478.60 L 914.10 487.30 L 912.60 487.80 L 909.30 479.20 Z M 788.40 695.30 L 797.50 693.70 L 797.80 695.20 L 788.60 696.80 L 788.40 695.30 Z M 915.50 496.50 L 917.00 496.10 L 918.30 500.60 L 919.30 505.10 L 917.80 505.40 L 915.50 496.50 Z M 806.40 691.50 L 815.20 688.80 L 815.70 690.30 L 806.80 693.00 L 806.40 691.50 Z M 919.60 514.50 L 921.10 514.20 L 922.40 523.40 L 920.80 523.60 L 919.60 514.50 Z M 823.90 685.60 L 832.30 681.90 L 833.00 683.30 L 824.50 687.00 L 823.90 685.60 Z M 921.50 532.80 L 923.10 532.70 L 923.30 542.00 L 921.70 542.00 L 921.50 532.80 Z M 840.50 677.70 L 848.40 673.00 L 849.20 674.30 L 841.20 679.00 L 840.50 677.70 Z M 921.30 551.20 L 922.90 551.30 L 922.00 560.60 L 920.40 560.40 L 921.30 551.20 Z M 856.10 667.90 L 863.40 662.30 L 864.40 663.50 L 857.00 669.10 L 856.10 667.90 Z M 919.00 569.50 L 920.50 569.80 L 918.50 578.90 L 917.00 578.50 L 919.00 569.50 Z M 870.40 656.30 L 877.00 649.90 L 878.10 651.00 L 871.40 657.50 L 870.40 656.30 Z M 914.60 587.30 L 916.10 587.80 L 913.10 596.60 L 911.60 596.00 L 914.60 587.30 Z M 883.30 643.20 L 889.10 636.10 L 890.30 637.10 L 884.40 644.30 L 883.30 643.20 Z M 908.00 604.50 L 909.40 605.10 L 905.40 613.50 L 904.00 612.80 L 908.00 604.50 Z M 894.60 628.60 L 899.60 620.80 L 900.90 621.60 L 895.90 629.40 L 894.60 628.60 Z" fill="#777f99" fill-rule="nonzero" group-id="1,12" node-id="60" stroke="none" target-height="236.69998" target-width="208.09998" target-x="715.2" target-y="461.9"></path></g><path d="M 702.70 684.10 L 707.00 685.90 L 706.40 687.40 L 702.00 685.60 L 702.70 684.10 Z" fill="#777f99" fill-rule="nonzero" group-id="1,13" node-id="65" stroke="none" target-height="3.3000488" target-width="5" target-x="702" target-y="684.1"></path></g><g node-id="166"><g node-id="178"><path d="M 198.90 515.60 L 196.00 511.80 L 197.30 510.90 L 200.10 514.60 L 198.90 515.60 Z" fill="#777f99" fill-rule="nonzero" group-id="2,14" node-id="73" stroke="none" target-height="4.6999817" target-width="4.100006" target-x="196" target-y="510.9"></path></g><g node-id="179"><path d="M 190.90 503.80 L 186.80 495.20 L 188.30 494.60 L 192.30 503.00 L 190.90 503.80 Z M 183.90 486.20 L 182.10 476.90 L 183.60 476.70 L 185.40 485.80 L 183.90 486.20 Z M 181.30 467.50 L 181.80 458.00 L 183.40 458.20 L 182.90 467.50 L 181.30 467.50 Z M 183.40 448.70 L 186.20 439.60 L 187.70 440.10 L 185.00 449.00 L 183.40 448.70 Z M 190.00 430.90 L 194.90 422.70 L 196.20 423.60 L 191.40 431.60 L 190.00 430.90 Z M 202.00 416.40 L 200.80 415.40 L 207.50 408.70 L 208.50 409.90 L 202.00 416.40 Z M 215.90 404.10 L 215.00 402.80 L 219.00 400.20 L 223.10 397.90 L 223.80 399.30 L 215.90 404.10 Z M 232.40 395.60 L 231.90 394.10 L 236.40 392.60 L 241.00 391.40 L 241.40 392.90 L 232.40 395.60 Z M 250.40 391.40 L 250.20 389.80 L 254.90 389.50 L 259.70 389.40 L 259.70 391.00 L 250.40 391.40 Z M 269.00 391.70 L 269.20 390.20 L 273.80 391.00 L 278.50 392.10 L 278.10 393.60 L 269.00 391.70 Z" fill="#777f99" fill-rule="nonzero" group-id="2,15" node-id="78" stroke="none" target-height="114.399994" target-width="97.2" target-x="181.3" target-y="389.4"></path></g><path d="M 286.90 396.50 L 287.50 395.10 L 291.80 397.00 L 291.10 398.40 L 286.90 396.50 Z" fill="#777f99" fill-rule="nonzero" group-id="2,16" node-id="83" stroke="none" target-height="3.2999878" target-width="4.899994" target-x="286.9" target-y="395.1"></path></g><g node-id="167"><path d="M 308.80 594.00 L 679.00 594.00 L 685.10 593.20 L 688.00 592.20 L 693.30 589.20 L 695.70 587.10 L 697.70 584.80 L 700.80 579.50 L 702.40 573.50 L 702.60 570.40 L 702.60 422.00 L 702.30 411.60 L 701.60 401.40 L 700.40 391.30 L 698.70 381.50 L 696.50 371.80 L 693.90 362.20 L 690.90 352.80 L 687.40 343.70 L 683.50 334.80 L 679.30 326.00 L 674.60 317.50 L 669.50 309.30 L 664.10 301.30 L 658.40 293.60 L 652.30 286.10 L 645.80 279.00 L 639.10 272.10 L 632.00 265.60 L 624.70 259.40 L 617.00 253.50 L 609.10 248.00 L 601.00 242.90 L 592.50 238.10 L 583.90 233.70 L 574.90 229.70 L 565.90 226.10 L 556.60 223.00 L 547.10 220.20 L 537.40 218.00 L 527.50 216.10 L 528.80 211.90 L 529.60 207.60 L 529.90 203.20 L 529.60 198.40 L 528.70 193.90 L 527.20 189.50 L 525.10 185.30 L 522.60 181.50 L 519.60 178.00 L 516.10 174.90 L 512.30 172.30 L 508.00 170.10 L 503.50 168.50 L 498.90 167.60 L 494.30 167.30 L 489.60 167.50 L 485.10 168.30 L 480.70 169.70 L 476.50 171.70 L 472.60 174.20 L 468.90 177.30 L 465.70 180.90 L 463.00 184.70 L 460.90 188.80 L 459.30 193.20 L 458.30 197.60 L 457.90 202.30 L 458.10 206.90 L 458.90 211.50 L 460.30 216.10 L 450.40 218.00 L 440.70 220.30 L 431.20 223.00 L 421.90 226.20 L 412.90 229.70 L 403.90 233.80 L 395.30 238.20 L 386.80 242.90 L 378.70 248.10 L 370.80 253.60 L 363.10 259.50 L 355.80 265.70 L 348.70 272.20 L 342.00 279.00 L 335.50 286.20 L 329.40 293.70 L 323.60 301.40 L 318.30 309.30 L 313.20 317.60 L 308.50 326.10 L 304.30 334.80 L 300.40 343.70 L 296.90 352.90 L 293.90 362.20 L 291.30 371.90 L 289.10 381.50 L 287.40 391.40 L 286.20 401.40 L 285.50 411.60 L 285.20 422.00 L 285.20 570.40 L 285.40 573.60 L 286.00 576.70 L 287.10 579.60 L 288.40 582.30 L 292.10 587.10 L 296.90 590.80 L 299.60 592.10 L 302.50 593.20 L 305.60 593.80 L 308.80 594.00 Z" fill="#bad6f7" fill-rule="nonzero" group-id="3" node-id="89" stroke="none" target-height="426.7" target-width="417.39996" target-x="285.2" target-y="167.3"></path></g><g node-id="168"><path d="M 493.80 798.40 L 503.30 797.60 L 512.20 795.40 L 517.80 793.20 L 523.20 790.40 L 528.20 787.20 L 532.80 783.40 L 537.00 779.20 L 540.80 774.60 L 544.00 769.60 L 546.80 764.20 L 549.00 758.60 L 550.30 754.20 L 551.80 745.00 L 552.00 740.20 L 435.60 740.20 L 435.80 745.30 L 436.50 750.30 L 437.60 755.30 L 439.10 760.10 L 441.00 764.80 L 443.30 769.30 L 446.10 773.50 L 449.10 777.60 L 452.60 781.40 L 456.40 784.90 L 460.40 788.00 L 464.70 790.70 L 469.20 793.00 L 473.90 794.90 L 478.70 796.40 L 483.60 797.50 L 488.70 798.20 L 493.80 798.40 Z" fill="#3a3a77" fill-rule="nonzero" group-id="4" node-id="94" stroke="none" target-height="58.200012" target-width="116.399994" target-x="435.6" target-y="740.2"></path></g><path d="M 782.90 675.10 L 770.80 651.00 L 767.90 645.70 L 764.50 640.80 L 760.60 636.00 L 756.30 631.60 L 751.80 627.60 L 747.10 624.00 L 742.00 620.80 L 737.00 618.20 L 731.90 616.10 L 726.70 614.50 L 721.70 613.50 L 716.80 613.20 L 270.90 613.20 L 266.00 613.50 L 261.00 614.50 L 255.80 616.10 L 250.70 618.20 L 245.70 620.80 L 240.60 624.00 L 235.90 627.60 L 231.40 631.60 L 227.10 636.00 L 223.20 640.70 L 219.80 645.70 L 216.90 651.00 L 204.80 675.10 L 202.60 680.00 L 200.90 684.70 L 199.80 689.10 L 199.10 693.30 L 198.80 697.60 L 199.00 701.60 L 199.60 705.20 L 200.60 708.50 L 202.10 711.70 L 203.90 714.50 L 206.20 716.90 L 208.90 719.00 L 211.90 720.60 L 215.30 721.80 L 219.10 722.60 L 223.60 722.90 L 764.20 722.90 L 768.60 722.60 L 772.50 721.80 L 775.90 720.60 L 778.80 719.00 L 781.50 716.90 L 783.80 714.40 L 785.70 711.70 L 787.20 708.50 L 788.20 705.20 L 788.80 701.50 L 789.00 697.60 L 788.70 693.30 L 788.00 689.10 L 786.80 684.70 L 785.10 680.00 L 782.90 675.10 Z" fill="#bad6f7" fill-rule="nonzero" node-id="97" stroke="none" target-height="109.70001" target-width="590.2" target-x="198.8" target-y="613.2"></path><path d="M 499.30 798.20 L 504.90 797.40 L 510.20 796.10 L 515.30 794.40 L 520.20 792.20 L 524.80 789.50 L 529.20 786.50 L 533.20 783.20 L 536.90 779.40 L 540.30 775.40 L 543.30 771.10 L 545.90 766.50 L 548.10 761.60 L 549.80 756.50 L 551.00 751.30 L 551.80 745.90 L 552.10 740.20 L 499.30 740.20 L 499.30 798.20 Z" fill="#3a3a77" fill-rule="nonzero" node-id="99" stroke="none" target-height="58" target-width="52.799988" target-x="499.3" target-y="740.2"></path><g node-id="169"><path d="M 770.80 650.90 L 767.90 645.60 L 764.50 640.70 L 760.60 635.90 L 756.30 631.50 L 751.80 627.50 L 747.10 623.90 L 742.00 620.70 L 737.00 618.10 L 731.90 616.00 L 726.70 614.40 L 721.70 613.40 L 716.80 613.10 L 499.30 613.10 L 499.30 722.80 L 764.20 722.80 L 768.70 722.50 L 772.50 721.70 L 775.90 720.50 L 778.90 718.90 L 781.60 716.80 L 783.90 714.40 L 785.70 711.60 L 787.20 708.50 L 788.20 705.10 L 788.80 701.50 L 789.00 697.60 L 788.70 693.20 L 788.00 689.00 L 786.90 684.60 L 785.20 680.00 L 783.00 675.00 L 770.80 650.90 Z" fill="#cedfff" fill-rule="nonzero" group-id="5" node-id="103" stroke="none" target-height="109.70001" target-width="289.7" target-x="499.3" target-y="613.1"></path></g><path d="M 729.60 182.10 L 765.70 216.40 L 694.00 242.10 L 729.60 182.10 Z" fill="#d3dcf4" fill-rule="nonzero" node-id="106" stroke="none" target-height="60" target-width="71.70001" target-x="694" target-y="182.1"></path><path d="M 704.20 261.10 L 808.40 236.60 L 808.40 288.70 L 704.20 261.10 Z" fill="#d3dcf4" fill-rule="nonzero" node-id="108" stroke="none" target-height="52.100006" target-width="104.20001" target-x="704.2" target-y="236.6"></path><path d="M 916.20 528.70 L 881.90 501.00 L 746.80 491.40 L 743.30 490.90 L 740.00 490.00 L 736.90 488.70 L 734.10 487.00 L 731.50 484.90 L 729.20 482.60 L 727.20 480.00 L 725.60 477.10 L 724.30 474.00 L 723.40 470.80 L 723.00 467.40 L 723.00 463.90 L 726.90 408.90 L 727.40 405.40 L 728.30 402.10 L 729.60 399.10 L 731.30 396.20 L 733.40 393.60 L 735.70 391.30 L 738.30 389.30 L 741.20 387.70 L 744.30 386.40 L 747.50 385.50 L 750.90 385.10 L 754.40 385.10 L 901.10 395.60 L 904.60 396.10 L 907.90 397.00 L 911.00 398.40 L 913.80 400.10 L 916.40 402.10 L 918.70 404.40 L 920.70 407.10 L 922.30 409.90 L 923.60 413.00 L 924.50 416.20 L 924.90 419.60 L 924.90 423.10 L 921.00 478.10 L 916.20 528.70 Z" fill="#4c96ec" fill-rule="nonzero" node-id="110" stroke="none" target-height="143.6" target-width="201.90002" target-x="723" target-y="385.1"></path><path d="M 796.50 440.10 L 796.20 443.70 L 795.30 446.90 L 793.80 450.00 L 791.90 452.70 L 789.50 455.10 L 786.80 457.00 L 783.70 458.50 L 780.50 459.40 L 776.90 459.70 L 773.30 459.40 L 770.10 458.50 L 767.00 457.00 L 764.30 455.10 L 761.90 452.70 L 760.00 450.00 L 758.50 446.90 L 757.60 443.70 L 757.30 440.10 L 757.60 436.50 L 758.50 433.30 L 760.00 430.20 L 761.90 427.50 L 764.30 425.10 L 767.00 423.20 L 770.10 421.70 L 773.30 420.80 L 776.90 420.50 L 780.50 420.80 L 783.70 421.70 L 786.80 423.20 L 789.50 425.10 L 791.90 427.50 L 793.80 430.20 L 795.30 433.30 L 796.20 436.50 L 796.50 440.10 Z" fill="#fe9f39" fill-rule="nonzero" node-id="112" stroke="none" target-height="39.200012" target-width="39.200012" target-x="757.3" target-y="420.5"></path><path d="M 823.30 435.40 L 883.20 439.70 L 886.20 440.50 L 888.60 442.10 L 890.30 444.50 L 891.10 447.40 L 891.10 449.00 L 890.30 452.00 L 888.70 454.40 L 886.30 456.10 L 883.40 456.90 L 820.30 452.30 L 817.60 451.10 L 815.60 449.10 L 814.30 446.40 L 814.00 443.30 L 814.80 440.30 L 816.40 437.90 L 818.80 436.20 L 821.70 435.40 Z" fill="#ebf0ff" fill-rule="nonzero" node-id="114" stroke="none" target-height="21.5" target-width="77.099976" target-x="814" target-y="435.4"></path><g node-id="170"><path d="M 151.30 615.80 L 151.80 610.50 L 154.90 595.30 L 158.70 582.20 L 161.30 575.30 L 164.20 568.50 L 170.10 557.70 L 172.90 553.80 L 180.50 544.30 L 185.40 538.60 L 196.10 528.10 L 201.80 523.30 L 207.90 518.80 L 214.30 514.70 L 221.10 510.90 L 228.00 507.50 L 235.40 504.50 L 243.30 501.90 L 251.60 499.70 L 259.90 498.00 L 268.80 496.80 L 278.30 496.00 L 288.50 495.70 L 297.90 496.00 L 307.00 496.70 L 315.70 497.80 L 324.10 499.40 L 332.60 501.40 L 340.50 503.80 L 348.00 506.50 L 355.10 509.50 L 362.00 513.10 L 368.40 516.80 L 374.20 520.80 L 379.50 525.10 L 384.50 529.80 L 388.70 534.60 L 392.40 539.60 L 395.50 544.70 L 397.50 549.10 L 399.10 553.50 L 400.20 558.10 L 400.90 562.70 L 401.20 567.40 L 400.90 572.10 L 400.20 576.70 L 399.10 581.30 L 397.50 585.70 L 395.50 590.10 L 392.40 595.20 L 388.70 600.20 L 384.40 605.00 L 379.40 609.70 L 374.20 614.00 L 368.40 618.00 L 362.00 621.70 L 355.00 625.30 L 348.00 628.30 L 340.50 631.00 L 332.50 633.40 L 324.10 635.40 L 315.70 637.00 L 307.00 638.10 L 297.90 638.80 L 288.50 639.10 L 277.00 638.80 L 266.30 638.10 L 256.30 636.90 L 246.90 635.20 L 239.30 633.40 L 232.20 631.30 L 225.60 628.90 L 219.50 626.20 L 213.80 623.20 L 208.20 619.80 L 203.10 616.10 L 198.50 612.00 L 194.30 607.70 L 190.50 603.00 L 187.80 602.10 L 185.00 601.70 L 182.20 601.90 L 176.50 603.30 L 169.50 606.70 L 155.70 615.70 L 153.70 616.70 L 152.50 616.90 L 151.80 616.60 L 151.30 615.80 Z" fill="#e0eaff" fill-rule="nonzero" group-id="6" node-id="118" stroke="none" target-height="143.39996" target-width="249.90001" target-x="151.3" target-y="495.7"></path></g><g node-id="171"><path d="M 237.00 541.10 L 300.10 541.10 L 302.10 541.40 L 303.80 542.10 L 305.30 543.30 L 306.50 544.80 L 307.20 546.50 L 307.50 548.50 L 307.20 550.50 L 306.50 552.20 L 305.30 553.70 L 303.80 554.90 L 302.10 555.60 L 300.10 555.90 L 237.00 555.90 L 235.00 555.60 L 233.30 554.90 L 231.80 553.70 L 230.60 552.20 L 229.90 550.50 L 229.60 548.50 L 229.90 546.50 L 230.70 544.80 L 231.80 543.30 L 233.30 542.10 L 235.10 541.40 L 237.00 541.10 Z" fill="#3a3a77" fill-rule="nonzero" group-id="7" node-id="123" stroke="none" target-height="14.800049" target-width="77.899994" target-x="229.6" target-y="541.1"></path></g><g node-id="172"><path d="M 346.70 547.80 L 346.00 551.70 L 344.10 554.90 L 341.30 557.30 L 339.60 558.10 L 335.70 558.80 L 331.80 558.10 L 330.10 557.30 L 327.30 554.90 L 325.40 551.70 L 324.70 547.80 L 325.40 543.90 L 327.30 540.70 L 330.10 538.30 L 331.80 537.50 L 335.70 536.80 L 339.60 537.50 L 342.80 539.40 L 345.20 542.20 L 346.00 543.90 L 346.70 547.80 Z" fill="#fe9f39" fill-rule="nonzero" group-id="8" node-id="128" stroke="none" target-height="22" target-width="22" target-x="324.7" target-y="536.8"></path></g><g node-id="173"><path d="M 237.00 579.10 L 300.10 579.10 L 302.10 579.40 L 303.80 580.10 L 305.30 581.30 L 306.50 582.80 L 307.20 584.50 L 307.50 586.50 L 307.20 588.50 L 306.50 590.20 L 305.30 591.70 L 303.80 592.90 L 302.10 593.60 L 300.10 593.90 L 237.00 593.90 L 235.00 593.60 L 233.30 592.90 L 231.80 591.70 L 230.60 590.20 L 229.90 588.50 L 229.60 586.50 L 229.90 584.50 L 230.70 582.80 L 231.80 581.30 L 233.30 580.10 L 235.10 579.40 L 237.00 579.10 Z" fill="#3a3a77" fill-rule="nonzero" group-id="9" node-id="133" stroke="none" target-height="14.800049" target-width="77.899994" target-x="229.6" target-y="579.1"></path></g><g node-id="174"><path d="M 346.70 584.00 L 346.00 587.90 L 344.10 591.10 L 341.30 593.50 L 339.60 594.30 L 335.70 595.00 L 331.80 594.30 L 328.60 592.40 L 326.20 589.60 L 324.90 586.00 L 324.90 582.00 L 326.20 578.40 L 327.30 576.90 L 330.10 574.50 L 333.70 573.20 L 337.70 573.20 L 339.60 573.70 L 342.80 575.60 L 345.20 578.40 L 346.00 580.10 L 346.70 584.00 Z" fill="#fe9f39" fill-rule="nonzero" group-id="10" node-id="138" stroke="none" target-height="21.799988" target-width="21.800018" target-x="324.9" target-y="573.2"></path></g><path d="M 746.70 838.40 L 746.70 767.10 L 699.10 767.10 L 699.10 838.40 L 699.40 839.30 L 720.20 851.50 L 721.50 852.00 L 723.10 852.10 L 726.10 851.30 L 745.20 840.30 L 746.20 839.50 L 746.70 838.40 Z" fill="#949fff" fill-rule="nonzero" node-id="141" stroke="none" target-height="85" target-width="47.600037" target-x="699.1" target-y="767.1"></path><path d="M 720.20 780.40 L 700.10 768.80 L 699.30 768.00 L 699.10 767.10 L 699.50 766.30 L 700.50 765.40 L 719.60 754.40 L 721.10 753.80 L 724.20 753.70 L 725.50 754.10 L 745.60 765.70 L 746.40 766.50 L 746.60 767.40 L 746.20 768.20 L 745.20 769.10 L 726.10 780.10 L 723.10 780.90 L 720.20 780.40 Z" fill="#dee6ff" fill-rule="nonzero" node-id="143" stroke="none" target-height="27.200012" target-width="47.5" target-x="699.1" target-y="753.7"></path><path d="M 115.50 836.70 L 115.50 662.50 L 67.90 662.50 L 67.90 836.70 L 68.20 837.60 L 68.90 838.20 L 89.00 849.80 L 90.30 850.30 L 91.90 850.40 L 94.90 849.60 L 114.00 838.60 L 114.90 837.80 L 115.50 836.70 Z" fill="#dee1f0" fill-rule="nonzero" node-id="145" stroke="none" target-height="187.90002" target-width="47.6" target-x="67.9" target-y="662.5"></path><path d="M 89.00 675.70 L 68.90 664.10 L 68.10 663.30 L 67.90 662.40 L 68.30 661.60 L 69.30 660.70 L 88.40 649.70 L 91.40 648.90 L 94.30 649.40 L 114.40 661.00 L 115.20 661.80 L 115.40 662.70 L 115.00 663.50 L 114.00 664.40 L 94.90 675.40 L 93.50 676.00 L 91.90 676.30 L 90.30 676.20 L 89.00 675.70 Z" fill="#fafbfd" fill-rule="nonzero" node-id="147" stroke="none" target-height="27.399963" target-width="47.5" target-x="67.9" target-y="648.9"></path><g node-id="175"><g node-id="181"><path d="M 977.00 861.10 L 30.00 861.10 L 30.30 854.90 L 31.10 852.00 L 32.30 849.40 L 34.00 847.00 L 36.00 845.00 L 38.40 843.30 L 41.00 842.10 L 43.90 841.30 L 47.00 841.00 L 960.00 841.00 L 963.10 841.30 L 966.00 842.10 L 968.60 843.30 L 971.00 845.00 L 973.00 847.00 L 974.70 849.40 L 975.90 852.00 L 976.70 854.90 L 977.00 861.10 Z" fill="#b7cdeb" fill-rule="nonzero" group-id="11,17" node-id="153" stroke="none" target-height="20.099976" target-width="947" target-x="30" target-y="841"></path></g></g><path d="M 781.10 806.50 L 779.10 811.10 L 777.70 815.60 L 777.10 818.80 L 777.40 831.00 L 777.90 833.60 L 778.80 836.00 L 780.20 838.20 L 782.10 840.10 L 784.20 841.70 L 787.10 843.00 L 790.60 843.90 L 795.30 844.40 L 821.60 845.20 L 827.70 844.70 L 833.50 843.60 L 839.10 842.00 L 844.50 839.90 L 849.70 837.30 L 854.80 834.10 L 858.70 831.20 L 860.40 829.50 L 862.30 826.00 L 862.90 818.70 L 863.50 817.10 L 864.70 815.50 L 875.40 811.70 L 897.10 805.20 L 901.90 803.00 L 903.80 801.50 L 905.20 799.60 L 906.40 796.30 L 906.90 792.40 L 907.60 790.90 L 910.10 788.30 L 913.30 786.20 L 918.60 783.50 L 937.90 775.70 L 947.90 770.00 L 949.50 768.20 L 949.90 767.20 L 949.90 763.00 L 950.30 760.40 L 951.00 758.20 L 953.50 754.10 L 958.00 750.00 L 965.80 743.90 L 970.10 739.70 L 974.00 735.10 L 974.00 729.20 L 972.70 726.80 L 971.10 724.70 L 969.20 723.00 L 964.80 720.40 L 962.30 719.60 L 958.40 718.90 L 954.40 718.80 L 950.50 719.30 L 940.30 722.20 L 934.40 722.50 L 931.60 722.00 L 926.10 720.00 L 917.70 714.60 L 914.80 713.50 L 911.70 712.90 L 908.60 712.90 L 905.30 713.40 L 902.00 714.50 L 898.90 715.90 L 895.80 717.90 L 892.90 720.30 L 882.90 730.00 L 880.20 731.70 L 877.40 732.70 L 874.40 733.30 L 871.20 733.30 L 864.40 732.30 L 861.20 732.30 L 858.40 732.90 L 855.60 733.90 L 852.90 735.50 L 850.20 737.80 L 845.80 742.50 L 833.90 757.60 L 830.50 761.10 L 826.60 763.30 L 824.40 763.80 L 819.90 763.90 L 818.10 764.30 L 814.80 765.90 L 809.20 769.90 L 804.00 774.10 L 799.30 778.70 L 794.90 783.60 L 790.90 788.80 L 787.30 794.40 L 784.00 800.30 L 781.10 806.50" fill="#b1c6d9" fill-rule="nonzero" node-id="157" stroke="none" target-height="132.29999" target-width="196.90002" target-x="777.1" target-y="712.9"></path><path d="M 190.10 807.80 L 185.40 803.00 L 182.70 800.90 L 179.80 799.10 L 176.60 797.90 L 171.40 796.70 L 170.00 795.90 L 167.00 792.70 L 163.30 787.30 L 160.90 784.40 L 155.90 780.00 L 153.50 778.70 L 151.70 778.20 L 149.80 778.20 L 145.50 779.00 L 143.60 779.10 L 140.00 778.00 L 138.40 776.90 L 134.40 772.80 L 131.80 770.60 L 126.00 767.00 L 123.30 766.30 L 119.10 767.00 L 117.30 767.70 L 112.50 771.10 L 110.30 772.30 L 108.20 772.90 L 106.00 772.80 L 99.70 771.20 L 92.60 770.90 L 90.20 771.30 L 88.10 772.20 L 86.30 773.60 L 84.70 775.40 L 82.90 779.00 L 83.40 780.90 L 85.70 783.50 L 96.10 792.90 L 98.20 795.70 L 98.10 798.60 L 99.70 801.20 L 101.20 802.70 L 103.80 804.40 L 114.90 809.00 L 120.80 812.10 L 123.20 814.40 L 123.90 815.90 L 124.50 819.10 L 125.00 820.10 L 127.20 821.80 L 148.40 828.70 L 150.20 830.30 L 151.00 834.90 L 151.80 836.80 L 153.00 838.50 L 156.30 841.00 L 162.70 843.80 L 167.10 845.30 L 176.20 847.10 L 185.50 847.30 L 195.00 845.90 L 197.20 845.20 L 198.90 844.30 L 200.20 843.00 L 201.20 841.40 L 201.90 839.40 L 202.30 836.90 L 202.30 833.00 L 201.90 829.40 L 201.10 826.00 L 198.40 819.50 L 196.70 816.40 L 193.60 812.00 L 190.10 807.80 Z" fill="#b0c6da" fill-rule="nonzero" node-id="159" stroke="none" target-height="81" target-width="119.4" target-x="82.9" target-y="766.3"></path><path d="M 191.00 838.00 L 190.30 837.90 L 179.70 827.80 L 170.10 819.20 L 161.40 812.00 L 152.40 805.10 L 137.40 794.80 L 130.10 790.50 L 118.20 784.50 L 110.20 781.20 L 104.20 779.10 L 94.30 776.60 L 93.90 776.40 L 94.20 775.70 L 99.00 776.60 L 104.50 778.10 L 110.60 780.20 L 118.70 783.60 L 130.60 789.60 L 137.90 793.90 L 153.10 804.30 L 162.10 811.20 L 170.80 818.40 L 180.50 827.00 L 191.10 837.20 L 191.00 838.00 Z" fill="#95b4ce" fill-rule="nonzero" node-id="161" stroke="none" target-height="62.299988" target-width="97.200005" target-x="93.9" target-y="775.7"></path><path d="M 787.20 834.60 L 788.30 834.40 L 802.90 820.40 L 816.30 808.20 L 828.70 797.60 L 841.40 787.40 L 852.90 778.60 L 863.50 771.20 L 874.30 764.10 L 884.00 758.20 L 892.70 753.40 L 909.30 745.20 L 926.10 738.60 L 933.80 736.20 L 947.10 733.00 L 947.70 732.60 L 947.70 732.00 L 947.30 731.50 L 946.60 731.40 L 940.30 732.80 L 925.50 737.10 L 908.60 743.70 L 891.80 751.90 L 883.10 756.80 L 873.30 762.70 L 862.50 769.80 L 851.90 777.30 L 840.20 786.10 L 827.50 796.30 L 815.00 807.00 L 801.50 819.20 L 786.90 833.30 L 786.70 833.80 L 787.20 834.60 Z" fill="#95b4ce" fill-rule="nonzero" node-id="163" stroke="none" target-height="103.19995" target-width="161" target-x="786.7" target-y="731.4"></path></svg>`;
 
 const drawSelectionCss = ".draw-page{width:100%;position:relative}.draw-page .draw-page__background{width:100%;height:100%;position:absolute;z-index:0;background:linear-gradient(to right, var(--emw--color-primary, #fed275), var(--emw--color-primary-variant, #ffe66f))}.draw-page .draw-page__background .top-waves{position:absolute;top:30px;left:20px;width:100px;height:60px}.draw-page .draw-page__background .wave{position:absolute;width:80px;height:4px;background:rgba(255, 255, 255, 0.7);border-radius:20px}.draw-page .draw-page__background .wave:nth-child(1){top:0;transform:rotate(-5deg);clip-path:polygon(0 0, 25% 100%, 50% 0, 75% 100%, 100% 0, 100% 100%, 0% 100%)}.draw-page .draw-page__background .wave:nth-child(2){top:20px;transform:rotate(-3deg);clip-path:polygon(0 0, 25% 100%, 50% 0, 75% 100%, 100% 0, 100% 100%, 0% 100%)}.draw-page .draw-page__background .wave:nth-child(3){top:40px;transform:rotate(-1deg);clip-path:polygon(0 0, 25% 100%, 50% 0, 75% 100%, 100% 0, 100% 100%, 0% 100%)}.draw-page .draw-page__background .wave-svg{position:absolute;width:100px;height:8px}.draw-page .draw-page__background .wave-svg:nth-child(1){top:0}.draw-page .draw-page__background .wave-svg:nth-child(2){top:20px}.draw-page .draw-page__background .wave-svg:nth-child(3){top:40px}.draw-page .draw-page__background .dots-cluster{position:absolute;bottom:100px;right:80px;width:120px;height:80px}.draw-page .draw-page__background .dot{position:absolute;border-radius:50%;background-color:rgba(255, 255, 255, 0.6)}.draw-page .draw-page__background .dot:nth-child(1){width:6px;height:6px;top:0px;left:0px}.draw-page .draw-page__background .dot:nth-child(2){width:8px;height:8px;top:0px;left:15px}.draw-page .draw-page__background .dot:nth-child(3){width:5px;height:5px;top:0px;left:32px}.draw-page .draw-page__background .dot:nth-child(4){width:7px;height:7px;top:0px;left:46px}.draw-page .draw-page__background .dot:nth-child(5){width:6px;height:6px;top:0px;left:62px}.draw-page .draw-page__background .dot:nth-child(6){width:8px;height:8px;top:0px;left:78px}.draw-page .draw-page__background .dot:nth-child(7){width:5px;height:5px;top:0px;left:95px}.draw-page .draw-page__background .dot:nth-child(8){width:7px;height:7px;top:15px;left:5px}.draw-page .draw-page__background .dot:nth-child(9){width:6px;height:6px;top:15px;left:20px}.draw-page .draw-page__background .dot:nth-child(10){width:8px;height:8px;top:15px;left:35px}.draw-page .draw-page__background .dot:nth-child(11){width:5px;height:5px;top:15px;left:52px}.draw-page .draw-page__background .dot:nth-child(12){width:7px;height:7px;top:15px;left:67px}.draw-page .draw-page__background .dot:nth-child(13){width:6px;height:6px;top:15px;left:83px}.draw-page .draw-page__background .dot:nth-child(14){width:8px;height:8px;top:30px;left:8px}.draw-page .draw-page__background .dot:nth-child(15){width:5px;height:5px;top:30px;left:25px}.draw-page .draw-page__background .dot:nth-child(16){width:7px;height:7px;top:30px;left:40px}.draw-page .draw-page__background .dot:nth-child(17){width:6px;height:6px;top:30px;left:55px}.draw-page .draw-page__background .dot:nth-child(18){width:8px;height:8px;top:30px;left:72px}.draw-page .draw-page__background .dot:nth-child(19){width:6px;height:6px;top:45px;left:12px}.draw-page .draw-page__background .dot:nth-child(20){width:7px;height:7px;top:45px;left:28px}.draw-page .draw-page__background .dot:nth-child(21){width:5px;height:5px;top:45px;left:44px}.draw-page .draw-page__background .dot:nth-child(22){width:8px;height:8px;top:45px;left:58px}.draw-page .draw-page__background .dot:nth-child(23){width:7px;height:7px;top:60px;left:15px}.draw-page .draw-page__background .dot:nth-child(24){width:6px;height:6px;top:60px;left:32px}.draw-page .draw-page__background .dot:nth-child(25){width:8px;height:8px;top:60px;left:48px}.draw-page .draw-page__background .dot:nth-child(26){width:5px;height:5px;top:75px;left:20px}.draw-page .draw-page__background .dot:nth-child(27){width:7px;height:7px;top:75px;left:35px}.draw-info{padding:16px}.draw-info-title{margin-bottom:36px;display:flex;justify-content:center;flex-direction:column;align-items:center;position:relative;color:var(--emw--color-typography, #000)}.draw-info-title-main{font-size:30px;font-weight:bold}.draw-info-title-sub{position:absolute;bottom:24px;font-weight:600}.draw-info-item-list{display:flex;justify-content:center;flex-wrap:wrap;gap:26px}.draw-info-item{cursor:pointer;text-align:center;padding:20px;width:164px;height:152px;background-color:var(--emw--color-background, #fff);color:var(--emw--color-typography, #000);border-radius:21% 25% 19% 22%/30% 30% 34% 27%;position:relative;display:flex;align-items:center;justify-content:center;flex-direction:column}.draw-info-item:hover{animation:jelly 0.6s ease}.draw-info-item:hover .draw-info-item-projector{animation:shadow-jelly 0.6s ease}.draw-info-item-day{font-size:10px;font-weight:bold;position:absolute;left:calc(50% - 31px);top:-28px;width:64px;height:64px;background:var(--emw--color-secondary-variant, rgb(255, 152, 0));border-radius:50%;display:flex;align-items:center;color:var(--emw--color-typography-tertiary, #fff);justify-content:center;font-style:italic}.draw-info-item-day.reverse{top:unset;bottom:-28px}.draw-info-item-date,.draw-info-item-turnover{margin-top:8px;font-size:16px;color:var(--emw--color-typography, #000);font-family:Arial, Helvetica, sans-serif}.draw-info-item-projecter{content:\"\";position:absolute;top:calc(100% + 40px);left:50%;transform:translateX(-50%);width:120px;height:20px;background:var(--emw--color-background, #fff);border-radius:50%;filter:blur(12px)}.draw-info-footer{width:100%;margin:0 auto;margin-top:100px;position:relative}.draw-info-footer-text{text-align:center;margin-top:12px;font-size:22px;color:var(--emw--color-typography, #000);font-family:\"Comic Sans MS\";font-weight:600}.empty-draw-wrap{display:flex;justify-content:center;align-items:center;width:100%;min-height:calc(100vh - 104px)}.empty-draw{width:240px;height:160px;padding:18px 12px 12px 12px;background:var(--emw--color-secondary, #fff3b9);position:relative;margin:0 auto;display:flex;justify-content:center;align-items:center;text-align:center;border-radius:12px}.empty-draw .empty-draw-logo{position:absolute;top:-64%;left:50%;transform:translateX(-50%);width:200px;height:200px}.empty-draw .empty-draw-logo svg{width:100%;height:100%}.empty-draw-content{display:flex;gap:4px}.empty-draw-text{font-size:14px;font-weight:bold;color:var(--emw--color-typography, #000)}.empty-draw svg{fill:var(--emw--color-typography, #000)}.loading-indicator{z-index:1;display:flex;justify-content:center;padding-top:40px;color:var(--emw--color-typography, #000)}.empty-draw-text{color:var(--emw--color-typography, #000)}@keyframes jelly{0%,100%{transform:scale(1)}25%{transform:scale(1.05, 0.95)}50%{transform:scale(0.95, 1.05)}75%{transform:scale(1.03, 0.97)}}@keyframes shadow-jelly{0%,100%{transform:translateX(-50%) scale(1);opacity:0.1}25%{transform:translateX(-50%) scale(1.1, 0.9);opacity:0.08}50%{transform:translateX(-50%) scale(0.9, 1.1);opacity:0.12}75%{transform:translateX(-50%) scale(1.05, 0.95);opacity:0.09}}";
@@ -604,9 +638,9 @@ const HelperCountDown = class {
 };
 HelperCountDown.style = HelperCountDownStyle0;
 
-const DEFAULT_LANGUAGE$7 = 'en';
-const SUPPORTED_LANGUAGES$7 = ['ro', 'en', 'fr', 'ar', 'hr'];
-const TRANSLATIONS$7 = {
+const DEFAULT_LANGUAGE$9 = 'en';
+const SUPPORTED_LANGUAGES$9 = ['ro', 'en', 'fr', 'ar', 'hr'];
+const TRANSLATIONS$9 = {
     en: {
         stop: 'Stop',
         at: 'at',
@@ -630,18 +664,18 @@ const TRANSLATIONS$7 = {
         at: 'u'
     }
 };
-const translate$7 = (key, customLang) => {
+const translate$9 = (key, customLang) => {
     const lang = customLang;
-    return TRANSLATIONS$7[lang !== undefined && SUPPORTED_LANGUAGES$7.includes(lang) ? lang : DEFAULT_LANGUAGE$7][key];
+    return TRANSLATIONS$9[lang !== undefined && SUPPORTED_LANGUAGES$9.includes(lang) ? lang : DEFAULT_LANGUAGE$9][key];
 };
-const getTranslations$7 = (data) => {
+const getTranslations$9 = (data) => {
     Object.keys(data).forEach((item) => {
         for (let key in data[item]) {
-            TRANSLATIONS$7[item][key] = data[item][key];
+            TRANSLATIONS$9[item][key] = data[item][key];
         }
     });
 };
-const resolveTranslationUrl$4 = async (translationUrl) => {
+const resolveTranslationUrl$5 = async (translationUrl) => {
     if (translationUrl) {
         try {
             const response = await fetch(translationUrl);
@@ -649,7 +683,7 @@ const resolveTranslationUrl$4 = async (translationUrl) => {
                 throw new Error(`HTTP error! status: ${response.status}`);
             }
             const translations = await response.json();
-            getTranslations$7(translations);
+            getTranslations$9(translations);
         }
         catch (error) {
             console.error('Failed to fetch or parse translations from URL:', error);
@@ -702,7 +736,7 @@ const LotteryBanner = class {
     }
     async componentWillLoad() {
         if (this.translationUrl) {
-            resolveTranslationUrl$4(this.translationUrl);
+            resolveTranslationUrl$5(this.translationUrl);
         }
         this.checkWagerStatus();
     }
@@ -738,7 +772,7 @@ const LotteryBanner = class {
             case 'title':
                 return this.bannerTitle && index.h("div", { class: `lottery-banner__title ${className}` }, this.bannerTitle);
             case 'info':
-                return (index.h("div", { class: `lottery-banner__info ${className}` }, !this.isWagerStarted ? (index.h("div", { class: "lottery-banner__info-item" }, index.h("span", { class: "lottery-banner__info-item-label" }, index.h("span", { class: "lottery-banner__info-item-label__strong" }, translate$7('startIn', this.language)), "\u00A0"), index.h("helper-count-down", { class: "lottery-banner__info-item-value lottery-banner__info-item-value__strong", value: this.startTime, format: "DDD HHH mmM ssS", onCountDownFinish: this.handleCountdownFinish }))) : (index.h("div", { class: "lottery-banner__info-item" }, index.h("span", { class: "lottery-banner__info-item-label" }, index.h("span", { class: "lottery-banner__info-item-label__strong" }, translate$7('stop', this.language)), "\u00A0", translate$7('at', this.language)), index.h("span", { class: "lottery-banner__info-item-value" }, this.formattedStopTime))), this.isWagerStarted && this.turnover !== null && this.turnover !== undefined && (index.h("div", { class: "lottery-banner__info-item" }, index.h("span", { class: "lottery-banner__info-item-label" }, translate$7('turnover', this.language)), index.h("span", { class: "lottery-banner__info-item-value" }, this.turnover)))));
+                return (index.h("div", { class: `lottery-banner__info ${className}` }, !this.isWagerStarted ? (index.h("div", { class: "lottery-banner__info-item" }, index.h("span", { class: "lottery-banner__info-item-label" }, index.h("span", { class: "lottery-banner__info-item-label__strong" }, translate$9('startIn', this.language)), "\u00A0"), index.h("helper-count-down", { class: "lottery-banner__info-item-value lottery-banner__info-item-value__strong", value: this.startTime, format: "DDD HHH mmM ssS", onCountDownFinish: this.handleCountdownFinish }))) : (index.h("div", { class: "lottery-banner__info-item" }, index.h("span", { class: "lottery-banner__info-item-label" }, index.h("span", { class: "lottery-banner__info-item-label__strong" }, translate$9('stop', this.language)), "\u00A0", translate$9('at', this.language)), index.h("span", { class: "lottery-banner__info-item-value" }, this.formattedStopTime))), this.isWagerStarted && this.turnover !== null && this.turnover !== undefined && (index.h("div", { class: "lottery-banner__info-item" }, index.h("span", { class: "lottery-banner__info-item-label" }, translate$9('turnover', this.language)), index.h("span", { class: "lottery-banner__info-item-value" }, this.turnover)))));
             default:
                 return null;
         }
@@ -762,9 +796,9 @@ const LotteryBanner = class {
 };
 LotteryBanner.style = LotteryBannerStyle0;
 
-const DEFAULT_LANGUAGE$6 = 'en';
-const SUPPORTED_LANGUAGES$6 = ['ro', 'en', 'fr', 'ar', 'hr', 'zh'];
-const TRANSLATIONS$6 = {
+const DEFAULT_LANGUAGE$8 = 'en';
+const SUPPORTED_LANGUAGES$8 = ['ro', 'en', 'fr', 'ar', 'hr', 'zh'];
+const TRANSLATIONS$8 = {
     en: {
         loading: 'Loading'
     },
@@ -773,9 +807,9 @@ const TRANSLATIONS$6 = {
     ar: {},
     hr: {}
 };
-const translate$6 = (key, customLang, replacements) => {
+const translate$8 = (key, customLang, replacements) => {
     const lang = customLang;
-    let translation = TRANSLATIONS$6[lang !== undefined && SUPPORTED_LANGUAGES$6.includes(lang) ? lang : DEFAULT_LANGUAGE$6][key];
+    let translation = TRANSLATIONS$8[lang !== undefined && SUPPORTED_LANGUAGES$8.includes(lang) ? lang : DEFAULT_LANGUAGE$8][key];
     if (replacements) {
         Object.keys(replacements).forEach((placeholder) => {
             translation = translation.replace(`{${placeholder}}`, replacements[placeholder]);
@@ -783,14 +817,14 @@ const translate$6 = (key, customLang, replacements) => {
     }
     return translation;
 };
-const getTranslations$6 = (data) => {
+const getTranslations$8 = (data) => {
     Object.keys(data).forEach((item) => {
         for (let key in data[item]) {
-            TRANSLATIONS$6[item][key] = data[item][key];
+            TRANSLATIONS$8[item][key] = data[item][key];
         }
     });
 };
-const resolveTranslationUrl$3 = async (translationUrl) => {
+const resolveTranslationUrl$4 = async (translationUrl) => {
     if (translationUrl) {
         try {
             const response = await fetch(translationUrl);
@@ -798,7 +832,7 @@ const resolveTranslationUrl$3 = async (translationUrl) => {
                 throw new Error(`HTTP error! status: ${response.status}`);
             }
             const translations = await response.json();
-            getTranslations$6(translations);
+            getTranslations$8(translations);
         }
         catch (error) {
             console.error('Failed to fetch or parse translations from URL:', error);
@@ -876,7 +910,7 @@ const LotteryButton = class {
     }
     componentWillLoad() {
         if (this.translationUrl) {
-            resolveTranslationUrl$3(this.translationUrl);
+            resolveTranslationUrl$4(this.translationUrl);
         }
     }
     render() {
@@ -916,7 +950,7 @@ const LotteryButton = class {
                 [`btn--${variant}`]: true,
                 [`btn--${size}`]: true,
                 'btn--loading': this.loading
-            }, style: color ? buttonStyles : undefined, disabled: isDisabled, onClick: this.handleClick, ref: (el) => (this.stylingContainer = el) }, this.loading ? (index.h("div", { class: "loading-container" }, index.h("span", { class: "content" }, this.text || translate$6('loading', this.language)), index.h("span", { class: "spinner" }))) : (index.h("span", { class: "content" }, index.h("slot", { name: "icon-left" }), this.text || index.h("slot", null), index.h("slot", { name: "icon-right" }))), index.h("div", { key: '302ea02be395bb24989d4abc040a513e23fa029a', class: "ripple-container" }, this.ripples.map((ripple, index$1) => (index.h("span", { key: index$1, class: "ripple", style: {
+            }, style: color ? buttonStyles : undefined, disabled: isDisabled, onClick: this.handleClick, ref: (el) => (this.stylingContainer = el) }, this.loading ? (index.h("div", { class: "loading-container" }, index.h("span", { class: "content" }, this.text || translate$8('loading', this.language)), index.h("span", { class: "spinner" }))) : (index.h("span", { class: "content" }, index.h("slot", { name: "icon-left" }), this.text || index.h("slot", null), index.h("slot", { name: "icon-right" }))), index.h("div", { key: '302ea02be395bb24989d4abc040a513e23fa029a', class: "ripple-container" }, this.ripples.map((ripple, index$1) => (index.h("span", { key: index$1, class: "ripple", style: {
                 top: `${ripple.top}px`,
                 left: `${ripple.left}px`,
                 width: `${ripple.size}px`,
@@ -932,21 +966,74 @@ const LotteryButton = class {
 };
 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 generateUUID$3 = () => {
+    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
+        var r = (Math.random() * 16) | 0, v = c == 'x' ? r : (r & 0x3) | 0x8;
+        return v.toString(16);
+    });
+};
+function fetchRequest$3(url, method = 'GET', body = null, headers = {}) {
+    return new Promise((resolve, reject) => {
+        const uuid = generateUUID$3();
+        const headersOrigin = Object.assign({ 'Content-Type': 'application/json' }, headers);
+        if (method !== 'GET' && method !== 'HEAD') {
+            headersOrigin['X-Idempotency-Key'] = uuid;
+        }
+        const options = {
+            method,
+            headers: headersOrigin,
+            body: null
+        };
+        if (body && method !== 'GET' && method !== 'HEAD') {
+            options.body = JSON.stringify(body);
+        }
+        else {
+            delete options.body;
+        }
+        fetch(url, options)
+            .then((response) => {
+            if (!response.ok) {
+                return reject(response);
+            }
+            return response.json();
+        })
+            .then((data) => resolve(data))
+            .catch((error) => reject(error));
+    });
+}
 
-const LotteryTippingBullet = class {
+var TicketStatus;
+(function (TicketStatus) {
+    TicketStatus["PURCHASED"] = "Purchased";
+    TicketStatus["SETTLED"] = "Settled";
+    TicketStatus["CANCELED"] = "Canceled";
+    TicketStatus["ERROR"] = "Error";
+})(TicketStatus || (TicketStatus = {}));
+
+const lotteryOrderSummaryCss = ":host{width:100%}.order-summary{width:100%;background:var(--emw--color-background, #fff);border-radius:var(--lottery-order-summary-border-radius, 8px);border:var(--lottery-order-summary-border, none);box-shadow:var(--lottery-order-summary-box-shadow, none);box-sizing:border-box}.order-summary__title{margin:var(--lottery-order-summary-title-margin, 0 0 30px 0);text-align:var(--lottery-order-summary-title-text-align, center);color:var(--emw--color-typography, #000);text-transform:uppercase;font-weight:var(--lottery-order-summary-title-font-weight, 700)}.order-summary__ticket-info{display:flex;align-items:center;margin-bottom:var(--lottery-order-summary-row-gap, 16px);gap:var(--lottery-order-summary-col-gap, 10px);color:var(--emw--color-typography, #000)}.order-summary__ticket-label{display:flex;flex-direction:row;align-items:center;width:var(--lottery-order-summary-label-width, 50px);max-width:var(--lottery-order-summary-label-max-width, 100%);flex-shrink:0}.order-summary__colon{margin-left:2px}.order-summary__ticket{font-weight:var(--lottery-order-summary-label-font-weight, 500);color:var(--emw--color-typography, #000);overflow-wrap:break-word}.order-summary__details{display:flex;align-items:center;color:var(--emw--color-typography, #000);font-weight:var(--lottery-order-summary-details-font-weight, 400)}.order-summary__divider{border:none;border-top:var(--lottery-order-summary-divider-border, 1px solid var(--emw--color-gray-100, #e6e6e6));margin:var(--lottery-order-summary-divider-margin, 20px 0)}.order-summary__button-wrapper{display:flex;justify-content:center;margin:var(--lottery-order-summary-button-wrapper-margin, 0);padding:var(--lottery-order-summary-button-wrapper-padding, 0)}";
+const LotteryOrderSummaryStyle0 = lotteryOrderSummaryCss;
+
+const LotteryOrderSummary = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.lotteryTippingBulletToggleEvent = index.createEvent(this, "lotteryTippingBulletToggle", 7);
+        this.orderSummarySubmit = index.createEvent(this, "orderSummarySubmit", 7);
+        this.submitSuccess = index.createEvent(this, "lotteryTicketSubmitSuccess", 7);
+        this.submitError = index.createEvent(this, "lotteryTicketSubmitError", 7);
+        this.sessionExpired = index.createEvent(this, "sessionExpired", 7);
+        this.endpoint = undefined;
+        this.sessionId = undefined;
         this.mbSource = undefined;
         this.clientStyling = undefined;
         this.clientStylingUrl = undefined;
-        this.positionIdx = undefined;
-        this.theme = 'default';
-        this.value = '';
-        this.disabled = false;
-        this.isSelected = false;
+        this.language = 'en';
+        this.orderSummaryTitle = undefined;
+        this.ticketsLabel = undefined;
+        this.totalLabel = undefined;
+        this.showColon = true;
+        this.showDivider = false;
+        this.submitDisabled = false;
+        this.submitButtonText = undefined;
+        this.submitLoading = false;
     }
     handleClientStylingChange(newValue, oldValue) {
         if (newValue != oldValue) {
@@ -973,23 +1060,77 @@ const LotteryTippingBullet = class {
                 lotteryTippingEntrance.setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
         }
     }
-    handleClick() {
-        if (!this.disabled) {
-            this.lotteryTippingBulletToggleEvent.emit({ positionIdx: this.positionIdx });
-        }
-    }
     disconnectedCallback() {
         this.stylingSubscription && this.stylingSubscription.unsubscribe();
     }
+    handleLotteryTicketParamsReady(event) {
+        if (event.detail && this.isValidTicketSubmitParam(event.detail)) {
+            this.handleSubmitTickets(event.detail);
+        }
+        else {
+            const errorMessage = 'Invalid ticket data received before submission.';
+            console.error(errorMessage, event.detail);
+            this.submitError.emit({
+                message: errorMessage,
+                dataOrigin: event.detail,
+                status: 400 // Bad Request
+            });
+        }
+    }
+    isValidTicketSubmitParam(detail) {
+        return (detail &&
+            Array.isArray(detail.tickets) &&
+            detail.tickets.length > 0 &&
+            detail.tickets.every((ticket) => this.isValidTicketParam(ticket)));
+    }
+    isValidTicketParam(ticket) {
+        return (ticket &&
+            ticket.gameName !== undefined &&
+            ticket.startingDrawId !== undefined &&
+            ticket.amount !== undefined &&
+            ticket.currency !== undefined &&
+            ticket.selection !== undefined);
+    }
+    async handleSubmitTickets(body) {
+        try {
+            this.submitLoading = true;
+            const res = await fetchRequest$3(`${this.endpoint}/tickets`, 'POST', body, {
+                Authorization: `Bearer ${this.sessionId}`
+            });
+            if (!res.tickets.every((ticket) => ticket.state === TicketStatus.PURCHASED)) {
+                this.submitError.emit({
+                    message: 'Failed to purchase ticket',
+                    dataOrigin: res,
+                    status: 200
+                });
+            }
+            else {
+                this.submitSuccess.emit({
+                    dataOrigin: res,
+                    status: 200
+                });
+            }
+        }
+        catch (e) {
+            if (e.status === 401) {
+                this.sessionExpired.emit();
+            }
+            if (e.status > 300 || !e.status) {
+                this.submitError.emit({
+                    dataOrigin: e,
+                    status: e.status || 0
+                });
+            }
+        }
+        finally {
+            this.submitLoading = false;
+        }
+    }
+    handleSubmit() {
+        this.orderSummarySubmit.emit();
+    }
     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))));
+        return (index.h("div", { key: 'bdab321b9336f47e16057d240b3226d7cba59b97', ref: (el) => (this.stylingContainer = el) }, index.h("div", { key: 'de7ffcc9f96d8c7cfc7bdb3a3c7225ee78c33483', class: "order-summary" }, index.h("h3", { key: '9500cd69a6eba0855d4981cdad8eaa91b9c98567', class: "order-summary__title" }, this.orderSummaryTitle), index.h("div", { key: 'ce29c82eef1d12bc63e94e4fa2d5474700860af2', class: "order-summary__ticket" }, index.h("div", { key: '9db79da17590c7f847f46c3b3b66489ea9a0e268', class: "order-summary__ticket-info" }, index.h("div", { key: '4b5a2df807aeb421cf3c1ebf33f410a92f39ccaf', class: "order-summary__ticket-label" }, index.h("div", { key: 'feb73e9f849d2e3d6b77e4c848657f27e6a82323', class: "order-summary__ticket" }, this.ticketsLabel), index.h("span", { key: '51f70dcdda2154d8ce97d8e1a7c0f61a6198afbb', class: "order-summary__colon" }, this.showColon ? ':' : null)), index.h("div", { key: '4fed2d63cd7a881c8844055fe1fde99c8c7aa9fb', class: "order-summary__details" }, index.h("slot", { key: '6a7969738546ee4aca81a075f6174556e78d2c31', name: "orderSummaryTicketDetail" }))), this.showDivider && index.h("hr", { key: '029803fa93960d5098a24d5ca18e77e14562b29f', class: "order-summary__divider" }), index.h("div", { key: '738096c5b605a97851dbf24a972d93d9533ad48b', class: "order-summary__ticket-info" }, index.h("div", { key: 'acd8a7f3e64c97f58c79f57a90143151c996abf8', class: "order-summary__ticket-label" }, index.h("div", { key: '44e6b29978ca4fc2b22ca9d95ee4facfc883f292', class: "order-summary__ticket" }, this.totalLabel), index.h("span", { key: '330a00a4b39e578a1b0d80211d2b68d44c5235c9', class: "order-summary__colon" }, this.showColon ? ':' : null)), index.h("span", { key: '294046815a62a80366458aade4ec5d5476577a93', class: "order-summary__details" }, index.h("slot", { key: '02d129ef0caf523ec0c9da34318df46d3b008376', name: "orderSummaryTotalDetail" })))), index.h("slot", { key: '9395396883f0594ad8db216a9aa9fa0aeff45c10', name: "orderSummaryChoice" }), index.h("div", { key: '462672abc490cde00fea90ea585f48875ca2ec47', class: "order-summary__button-wrapper" }, index.h("lottery-button", { key: '1885bee3570ce6b58d4ae1977c635f418485fdbe', onClick: this.handleSubmit.bind(this), loading: this.submitLoading, disabled: this.submitDisabled, text: this.submitButtonText })))));
     }
     static get watchers() { return {
         "clientStyling": ["handleClientStylingChange"],
@@ -997,114 +1138,71 @@ const LotteryTippingBullet = class {
         "mbSource": ["handleMbSourceChange"]
     }; }
 };
-LotteryTippingBullet.style = LotteryTippingBulletStyle0;
+LotteryOrderSummary.style = LotteryOrderSummaryStyle0;
 
-const lotteryTippingBulletGroupCss = "";
-const LotteryTippingBulletGroupStyle0 = lotteryTippingBulletGroupCss;
+const lotterySegmentedCss = ":host{display:block}.wrapper{display:flex;align-items:center;gap:8px}.label{font-size:16px;color:var(--emw-segmented-label-color, #333);font-weight:500}.segmented-container{display:inline-flex;position:relative;background-color:var(--emw-segmented-bg, #f0f0f0);border-radius:20px;box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1)}.option{position:relative;z-index:1;border:none;background-color:transparent;padding:12px 18px;cursor:pointer;font-size:14px;font-weight:500;color:var(--emw-segmented-text-color, #555);transition:color 0.3s ease;white-space:nowrap}.option.active{color:var(--emw-segmented-active-text-color, #000);font-weight:bold}.active-indicator{position:absolute;z-index:0;top:2px;bottom:2px;background-color:var(--emw-segmented-active-bg, #fff);border-radius:22px;box-shadow:0 2px 4px rgba(0, 0, 0, 0.15);transition:transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), width 0.3s cubic-bezier(0.4, 0, 0.2, 1)}";
+const LotterySegmentedStyle0 = lotterySegmentedCss;
 
-const LotteryTippingBulletGroup = class {
+const LotterySegmented = 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) {
-            lotteryTippingEntrance.setClientStyling(this.stylingContainer, this.clientStyling);
-        }
+        this.valueChange = index.createEvent(this, "valueChange", 7);
+        this.optionRefs = [];
+        this.label = undefined;
+        this.options = [];
+        this.value = undefined;
     }
-    handleClientStylingUrlChange(newValue, oldValue) {
-        if (newValue != oldValue) {
-            lotteryTippingEntrance.setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
-        }
+    handleValueChange() {
+        this.updateActiveIndicator();
     }
-    handleMbSourceChange(newValue, oldValue) {
-        if (newValue != oldValue) {
-            lotteryTippingEntrance.setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`, this.stylingSubscription);
+    componentWillLoad() {
+        if (!this.value && this.options.length > 0) {
+            // Default to the first option if no value is provided
+            this.value = this.options[0].value;
         }
     }
     componentDidLoad() {
-        if (this.stylingContainer) {
-            if (this.mbSource)
-                lotteryTippingEntrance.setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`, this.stylingSubscription);
-            if (this.clientStyling)
-                lotteryTippingEntrance.setClientStyling(this.stylingContainer, this.clientStyling);
-            if (this.clientStylingUrl)
-                lotteryTippingEntrance.setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
-        }
-    }
-    disconnectedCallback() {
-        this.stylingSubscription && this.stylingSubscription.unsubscribe();
+        // Use requestAnimationFrame to ensure layout is calculated
+        requestAnimationFrame(() => this.updateActiveIndicator());
     }
-    lotteryTippingBulletSelectionHandler(event) {
-        const { positionIdx } = event.detail;
-        this.handleToggle(positionIdx);
+    handleWindowResize() {
+        this.updateActiveIndicator();
     }
-    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;
+    updateActiveIndicator() {
+        const selectedIndex = this.options.findIndex((opt) => opt.value === this.value);
+        if (selectedIndex === -1 || !this.activeIndicator || !this.optionRefs[selectedIndex]) {
+            return;
         }
-        else {
-            // multi mode: multiple buttons can be selected
-            newConfigArr = newConfigArr.map((item) => (Object.assign({}, item)));
-            newConfigArr[index].isSelected = !newConfigArr[index].isSelected;
+        const selectedOptionEl = this.optionRefs[selectedIndex];
+        const containerEl = this.activeIndicator.parentElement;
+        const containerRect = containerEl.getBoundingClientRect();
+        const optionRect = selectedOptionEl.getBoundingClientRect();
+        this.activeIndicator.style.transform = `translateX(${optionRect.left - containerRect.left}px)`;
+        this.activeIndicator.style.width = `${optionRect.width}px`;
+    }
+    onOptionClick(optionValue) {
+        if (this.value !== optionValue) {
+            this.valueChange.emit(optionValue);
         }
-        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 })))))));
+        return (index.h("div", { key: '675f17d5fd8ddef56324416fda27ffd130ddafa3', class: "wrapper" }, this.label && index.h("label", { key: 'd6dfc897e2014a7ce57cc4ddca57b1e6173eb1a5', class: "label" }, this.label), index.h("div", { key: 'e89097f2a9536ada1e0edf52e0d50cdd8f88c52e', class: "segmented-container" }, index.h("div", { key: 'f720dc7b9b8957cb6d363fd6a2313978eba6988e', class: "active-indicator", ref: (el) => (this.activeIndicator = el) }), this.options.map((option, index$1) => (index.h("button", { class: { option: true, active: this.value === option.value }, onClick: () => this.onOptionClick(option.value), ref: (el) => (this.optionRefs[index$1] = el) }, option.label))))));
     }
+    get host() { return index.getElement(this); }
     static get watchers() { return {
-        "clientStyling": ["handleClientStylingChange"],
-        "clientStylingUrl": ["handleClientStylingUrlChange"],
-        "mbSource": ["handleMbSourceChange"]
+        "value": ["handleValueChange"]
     }; }
 };
-LotteryTippingBulletGroup.style = LotteryTippingBulletGroupStyle0;
+LotterySegmented.style = LotterySegmentedStyle0;
 
 // This icon file is generated automatically.
 var CalendarOutlined = { "icon": { "tag": "svg", "attrs": { "viewBox": "64 64 896 896", "focusable": "false" }, "children": [{ "tag": "path", "attrs": { "d": "M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z" } }] }, "name": "calendar", "theme": "outlined" };
 const CalendarOutlined$1 = CalendarOutlined;
 
+// This icon file is generated automatically.
+var DeleteFilled = { "icon": { "tag": "svg", "attrs": { "viewBox": "64 64 896 896", "focusable": "false" }, "children": [{ "tag": "path", "attrs": { "d": "M864 256H736v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zm-200 0H360v-72h304v72z" } }] }, "name": "delete", "theme": "filled" };
+const DeleteFilled$1 = DeleteFilled;
+
 // 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;
@@ -1178,49 +1276,1148 @@ function renderAbstractNodeToSVGElement(node, options) {
     return "<".concat(node.tag).concat(attrsToken, " />");
 }
 
-const DEFAULT_LANGUAGE$5 = 'en';
-const SUPPORTED_LANGUAGES$5 = ['ro', 'en', 'fr', 'ar', 'hr'];
-const TRANSLATIONS$5 = {
-    en: {
-        weeks: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
-        bettingType: 'Betting Type:',
-        prizeAllocation: 'Prize Allocation (Turnover: {turnover})',
-        prizes: 'Prizes',
-        numberOfWinners: 'Number of Winners',
-        prizeMoney: 'Prize Money',
-        noLatestResult: 'No latest result.',
-        loading: 'Loading....'
-    },
-    ro: {
-        bettingType: 'Tip de pariu:',
-        prizeAllocation: 'Alocarea premiilor (Cifră de afaceri: €{turnover})',
-        prizes: 'Premii',
-        numberOfWinners: 'Număr de câștigători',
-        prizeMoney: 'Bani de premiu',
-        noLatestResult: 'Niciun rezultat recent.',
-        loading: 'Se încarcă....'
-    },
-    fr: {
-        bettingType: 'Type de pari:',
-        prizeAllocation: "Répartition des prix (Chiffre d'affaires: € {turnover})",
-        prizes: 'Prix',
-        numberOfWinners: 'Nombre de gagnants',
-        prizeMoney: 'Prix en argent',
-        noLatestResult: 'Aucun résultat récent.',
-        loading: 'Chargement....'
-    },
-    ar: {
-        bettingType: 'نوع الرهان:',
-        prizeAllocation: 'تخصيص الجائزة (دوران: € {turnover})',
-        prizes: 'الجوائز',
-        numberOfWinners: 'عدد الفائزين',
-        prizeMoney: 'أموال الجائزة',
-        noLatestResult: 'لا يوجد أحدث نتيجة.',
-        loading: 'جار التحميل....'
-    },
-    hr: {
-        bettingType: 'Vrsta oklade:',
-        prizeAllocation: 'Raspodjela nagrada (Promet: € {turnover})',
+// Basic sanitization method for SVG content
+// This is NOT a complete XSS prevention for SVG, but prevents common attacks.
+function sanitizeSvg(svgString) {
+    let sanitized = svgString.replace(/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi, ''); // Remove <script> tags
+    sanitized = sanitized.replace(/on[a-z]+=[\"'][^\"']*[\"']/gi, ''); // Remove on* attributes
+    sanitized = sanitized.replace(/javascript:/gi, ''); // Remove javascript: URLs
+    return sanitized;
+}
+
+const lotterySelectionCss = ":host{display:inline-block}.lottery-selection__button{display:flex;align-items:center;justify-content:center;width:var(--lottery-selection-width, 32px);height:var(--lottery-selection-height, 32px);padding:var(--lottery-selection-padding, 0);box-sizing:border-box;background:var(--lottery-selection-background, var(--emw--color-background, #fff));border:var(--lottery-selection-border-width, 2px) var(--lottery-selection-border-style, solid) var(--lottery-selection-border-color, var(--emw--color-primary, #0d196e));border-radius:var(--lottery-selection-border-radius, var(--emw--border-radius-medium, 8px));color:var(--lottery-selection-color, var(--emw--color-typography, #000));font-weight:var(--lottery-selection-font-weight, bold);font-size:var(--lottery-selection-font-size, 1em);cursor:pointer;user-select:none;}.lottery-selection__button:hover{background:var(--lottery-selection-hover-background, var(--emw--color-background, #fff));border-color:var(--lottery-selection-hover-border-color, var(--emw--color-primary, #0d196e));color:var(--lottery-selection-hover-color, var(--emw--color-typography, #000))}.lottery-selection__button .lottery-selection__delete-icon{display:none}.lottery-selection__button.isDeleteByIcon:hover .lottery-selection__text{display:none}.lottery-selection__button.isDeleteByIcon:hover .lottery-selection__delete-icon{display:flex;align-items:center;justify-content:center;fill:var(--lottery-selection-delete-icon-color, var(--emw--color-typography, #000));vertical-align:middle}.lottery-selection__button.lottery-selection__button--selected{background-color:var(--lottery-selection-selected-background, var(--emw--color-primary, #0d196e));border-color:var(--lottery-selection-selected-border-color, var(--emw--color-primary, #0d196e));color:var(--lottery-selection-selected-color, var(--emw--color-typography-inverse, #fff))}.lottery-selection__button.lottery-selection__button--disabled{background-color:var(--lottery-selection-disabled-background, var(--emw--color-gray-50, #f5f5f5));border-color:var(--lottery-selection-disabled-border-color, var(--emw--color-gray-100, #e6e6e6));color:var(--lottery-selection-disabled-color, var(--emw--color-gray-150, #6f6f6f));cursor:not-allowed;pointer-events:none;}.lottery-selection__button.lottery-selection__button--no-border{border:none}.lottery-selection__button.lottery-selection__button--no-background{background:transparent}";
+const LotterySelectionStyle0 = lotterySelectionCss;
+
+const LotterySelection = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.lotteryBulletClickHandler = index.createEvent(this, "lotteryBulletClick", 7);
+        this.value = 0;
+        this.text = undefined;
+        this.idx = undefined;
+        this.type = 'toggle';
+        this.mbSource = undefined;
+        this.clientStyling = undefined;
+        this.clientStylingUrl = undefined;
+        this.hasBorder = true;
+        this.hasBackground = true;
+        this.deleteIconSvg = '';
+        this.deleteIconWidth = '16px';
+        this.deleteIconHeight = '16px';
+    }
+    handleClientStylingChange(newValue, oldValue) {
+        if (newValue !== oldValue) {
+            lotteryTippingEntrance.setClientStyling(this.stylingContainer, this.clientStyling);
+        }
+    }
+    handleClientStylingUrlChange(newValue, oldValue) {
+        if (newValue !== oldValue) {
+            lotteryTippingEntrance.setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
+        }
+    }
+    handleMbSourceChange(newValue, oldValue) {
+        if (newValue !== oldValue) {
+            lotteryTippingEntrance.setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`, this.stylingSubscription);
+        }
+    }
+    componentDidLoad() {
+        if (this.stylingContainer) {
+            if (this.mbSource)
+                lotteryTippingEntrance.setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`, this.stylingSubscription);
+            if (this.clientStyling)
+                lotteryTippingEntrance.setClientStyling(this.stylingContainer, this.clientStyling);
+            if (this.clientStylingUrl)
+                lotteryTippingEntrance.setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
+        }
+    }
+    disconnectedCallback() {
+        this.stylingSubscription && this.stylingSubscription.unsubscribe();
+    }
+    handleClick() {
+        if (this.type === 'disabled' || this.type === 'readonly') {
+            return;
+        }
+        console.log('bullet clicked', this.type, this.idx, this.text, this.value);
+        this.lotteryBulletClickHandler.emit({
+            type: this.type,
+            idx: this.idx,
+            text: this.text,
+            value: this.value
+        });
+    }
+    render() {
+        let iconToRender;
+        if (this.deleteIconSvg) {
+            iconToRender = sanitizeSvg(this.deleteIconSvg);
+        }
+        else {
+            iconToRender = renderIconDefinitionToSVGElement(DeleteFilled$1, {
+                extraSVGAttrs: {
+                    width: this.deleteIconWidth,
+                    height: this.deleteIconHeight,
+                    fill: 'currentColor'
+                }
+            });
+        }
+        return (index.h("div", { key: '0d1e8aaa80a907a7467410f6b27b4b6175e82299', class: "lottery-selection", ref: (el) => (this.stylingContainer = el) }, index.h("button", { key: '11a2402abbc290dc877ad95f3433092c3a0d8419', class: {
+                'lottery-selection__button': true,
+                'lottery-selection__button--selected': this.value == 1,
+                'lottery-selection__button--disabled': this.type === 'disabled',
+                'lottery-selection__button--no-border': !this.hasBorder,
+                'lottery-selection__button--no-background': !this.hasBackground,
+                isDeleteByIcon: this.type === 'delete',
+                isCallDialogBtn: this.type === 'input' || this.type === 'readonly'
+            }, onClick: this.handleClick.bind(this), disabled: this.type === 'disabled' }, this.type === 'delete' && index.h("span", { key: 'f99001d936a8f7bdf8adc5c46e82caf730a9442a', class: "lottery-selection__delete-icon", innerHTML: iconToRender }), index.h("span", { key: '55775e2492a1fe45cc8a457ac0a0d206744461ab', class: "lottery-selection__text" }, this.text))));
+    }
+    static get watchers() { return {
+        "clientStyling": ["handleClientStylingChange"],
+        "clientStylingUrl": ["handleClientStylingUrlChange"],
+        "mbSource": ["handleMbSourceChange"]
+    }; }
+};
+LotterySelection.style = LotterySelectionStyle0;
+
+const DEFAULT_LANGUAGE$7 = 'en';
+const SUPPORTED_LANGUAGES$7 = ['ro', 'en', 'fr', 'ar', 'hr', 'zh'];
+const TRANSLATIONS$7 = {
+    en: {
+        noTicketBoard: 'No ticket board available.',
+        selectionCleared: 'Your selection has been cleared.',
+        clearAll: 'Clear All',
+        stopAt: 'Stop at',
+        turnover: 'Turnover: ',
+        pleaseFillIn: 'Please fill in all the selection input!',
+        fillIn: 'Fill in',
+        noBets: 'Sorry. No bets have been placed so far. Check back later!',
+        search: 'Search',
+        clear: 'Clear',
+        oddsChart: 'Odds Chart',
+        ticketSuccess: 'Ticket purchased successfully.',
+        stakePerLine: 'Stake per Line:',
+        lowestOdds: 'Lowest Odds:',
+        highestOdds: 'Highest Odds:',
+        orderSummary: 'ORDER SUMMARY',
+        ticket: 'Ticket',
+        lines: 'Lines',
+        total: 'Total',
+        submit: 'Submit',
+        loading: 'Loading',
+        enterValidNumber: 'Please enter a valid number.',
+        enterNumberBetween: 'Please enter a number between {min} and {max}.',
+        numberAlreadySelected: 'This number has already been selected.',
+        enterScoreUpTo: 'Please enter the score (Up to {maxScore})',
+        enterValue: 'Please enter a value',
+        myChoices: 'My Choices',
+        teams: 'Teams',
+        scores: 'Scores',
+        euro: 'Euro',
+        cancel: 'Cancel',
+        confirm: 'Confirm'
+    },
+    ro: {},
+    fr: {},
+    ar: {},
+    hr: {}
+};
+const translate$7 = (key, customLang, replacements) => {
+    const lang = customLang;
+    let translation = TRANSLATIONS$7[lang !== undefined && SUPPORTED_LANGUAGES$7.includes(lang) ? lang : DEFAULT_LANGUAGE$7][key];
+    if (replacements) {
+        Object.keys(replacements).forEach((placeholder) => {
+            translation = translation.replace(`{${placeholder}}`, replacements[placeholder]);
+        });
+    }
+    return translation;
+};
+const getTranslations$7 = (data) => {
+    Object.keys(data).forEach((item) => {
+        for (let key in data[item]) {
+            TRANSLATIONS$7[item][key] = data[item][key];
+        }
+    });
+};
+
+function getBulletTextsSet(bulletTexts, splitToken) {
+    return new Set(bulletTexts ? bulletTexts.split(splitToken) : []);
+}
+function validateInput({ value, selectedSet, maxValue, minValue, language, type = 'integer' }) {
+    const trimmedValue = value.trim();
+    if (type === 'integer') {
+        // Strict integer check
+        if (!/^-?\d+$/.test(trimmedValue)) {
+            return {
+                valid: false,
+                errorMessage: translate$7('enterValidNumber', language),
+                value
+            };
+        }
+        const numValue = Number(trimmedValue);
+        if (isNaN(numValue)) {
+            return {
+                valid: false,
+                errorMessage: translate$7('enterValidNumber', language),
+                value
+            };
+        }
+        if ((minValue !== undefined && numValue < minValue) || (maxValue !== undefined && numValue > maxValue)) {
+            return {
+                valid: false,
+                errorMessage: translate$7('enterNumberBetween', language, {
+                    min: minValue,
+                    max: maxValue
+                }),
+                value
+            };
+        }
+        // Normalize value (e.g. "05" -> "5") for set check
+        const normalizedValue = String(numValue);
+        if (selectedSet.has(normalizedValue)) {
+            return {
+                valid: false,
+                errorMessage: translate$7('numberAlreadySelected', language),
+                value
+            };
+        }
+    }
+    else {
+        // Text mode validation
+        if (selectedSet.has(trimmedValue)) {
+            return {
+                valid: false,
+                errorMessage: translate$7('numberAlreadySelected', language), // Or generic 'alreadySelected' if available, but reusing key for now
+                value
+            };
+        }
+    }
+    return {
+        valid: true,
+        errorMessage: '',
+        value
+    };
+}
+function removeBulletTexts(text, selectedArr) {
+    return selectedArr.filter((s) => s !== text);
+}
+function addSelectedBulletTexts(text, selectedArr) {
+    return selectedArr.concat([text]);
+}
+function removeAndAddSelectedBulletTexts(text, selectedArr, maxSelectedCount) {
+    return selectedArr.slice(selectedArr.length - (maxSelectedCount - 1)).concat([text]);
+}
+function buildSelectedBulletTextsArr(item, selectedArr, maxSelectedCount) {
+    if (item.type === 'delete') {
+        return removeBulletTexts(item.text, selectedArr);
+    }
+    if (item.type === 'toggle') {
+        if (selectedArr.includes(item.text)) {
+            return removeBulletTexts(item.text, selectedArr);
+        }
+        if (selectedArr.length >= maxSelectedCount) {
+            return removeAndAddSelectedBulletTexts(item.text, selectedArr, maxSelectedCount);
+        }
+        return addSelectedBulletTexts(item.text, selectedArr);
+    }
+    return [];
+}
+
+const lotterySelectionGroupCss = ":host {\n  width: 100%;\n}\n\n.lottery-selection-group {\n  container-type: inline-size;\n  padding: var(--lottery-selection-group-padding, 0);\n  background: var(--lottery-selection-group-background, transparent);\n  border: var(--lottery-selection-group-border, none);\n  border-radius: var(--lottery-selection-group-border-radius, 0);\n}\n.lottery-selection-group__item {\n  display: flex;\n  flex-direction: var(--lottery-selection-group-flex-direction, row);\n  align-items: var(--lottery-selection-group-item-align, center);\n  justify-content: var(--lottery-selection-group-item-justify, flex-start);\n  gap: var(--lottery-selection-group-item-gap, 16px);\n  width: 100%;\n}\n.lottery-selection-group__item--left {\n  width: var(--lottery-selection-group-label-width, 130px);\n  min-width: var(--lottery-selection-group-label-min-width, auto);\n  max-width: var(--lottery-selection-group-label-max-width, none);\n  color: var(--lottery-selection-group-label-color, var(--emw--color-typography, #000));\n  font-size: var(--lottery-selection-group-label-font-size, 1em);\n  font-weight: var(--lottery-selection-group-label-font-weight, bold);\n  text-align: var(--lottery-selection-group-label-align, left);\n  white-space: var(--lottery-selection-group-label-white-space, normal);\n}\n.lottery-selection-group__item--right {\n  flex: 1;\n  display: flex;\n  flex-wrap: var(--lottery-selection-group-bullets-wrap, wrap); /* Allow items to wrap */\n  gap: var(--lottery-selection-group-bullets-gap, 8px); /* Gap between bullets */\n  align-items: var(--lottery-selection-group-bullets-align, center);\n  justify-content: var(--lottery-selection-group-bullets-justify, flex-start); /* Align bullets to start */\n}\n@container (max-width: 320px) {\n  .lottery-selection-group__item--left {\n    width: 100px;\n    max-width: 100px;\n  }\n}\n\n.dialog-input {\n  width: 100%;\n  padding: var(--lottery-selection-group-input-padding, 8px);\n  border: var(--lottery-selection-group-input-border-width, 1px) var(--lottery-selection-group-input-border-style, solid) var(--lottery-selection-group-input-border-color, var(--emw--color-gray-100, #e6e6e6));\n  border-radius: var(--lottery-selection-group-input-radius, 4px);\n  background-color: var(--lottery-selection-group-input-bg, #fff);\n  color: var(--lottery-selection-group-input-color, #000);\n  box-sizing: border-box;\n  margin-top: var(--lottery-selection-group-input-margin-top, 10px);\n  font-size: var(--lottery-selection-group-input-font-size, 1em);\n}\n.dialog-input::placeholder {\n  color: var(--lottery-selection-group-input-placeholder-color, #999);\n}\n\n.dialog-input.invalid,\n.dialog-input.invalid:focus {\n  border-color: var(--emw--color-error, #ff3d00);\n  outline-color: var(--emw--color-error, #ff3d00);\n}\n\n.error-message {\n  color: var(--lottery-selection-group-error-color, var(--emw--color-error, #ff3d00));\n  font-size: var(--lottery-selection-group-error-font-size, 12px);\n  font-weight: var(--lottery-selection-group-error-font-weight, normal);\n  margin-top: 4px;\n}\n\n.addSelectionDialog-title {\n  color: var(--lottery-selection-group-dialog-title-color, var(--emw--color-typography, #000));\n  font-size: var(--lottery-selection-group-dialog-title-font-size, 1.2em);\n  font-weight: var(--lottery-selection-group-dialog-title-font-weight, bold);\n  margin-bottom: var(--lottery-selection-group-dialog-title-margin-bottom, 0);\n}\n.addSelectionDialog-footer {\n  display: flex;\n  justify-content: var(--lottery-selection-group-dialog-footer-justify, flex-end);\n  gap: var(--lottery-selection-group-dialog-footer-gap, 18px);\n  margin-top: var(--lottery-selection-group-dialog-footer-margin-top, 0);\n}";
+const LotterySelectionGroupStyle0 = lotterySelectionGroupCss;
+
+const LotterySelectionGroup = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.bulletGroupUpdateSelectedBulletTexts = index.createEvent(this, "bulletGroupUpdateSelection", 7);
+        this.mbSource = undefined;
+        this.clientStyling = undefined;
+        this.clientStylingUrl = undefined;
+        this.language = 'en';
+        this.translationUrl = '';
+        this.splitToken = ',';
+        this.selectionGroupId = undefined;
+        this.selectionGroupLabel = undefined;
+        this.type = 'bet';
+        this.selectedBulletTexts = null;
+        this.maxSelectedCount = null;
+        this.maxDisplayBulletsCount = 11;
+        this.bulletTexts = null;
+        this.maxIntegerBulletText = null;
+        this.minIntegerBulletText = 0;
+        this.bulletTextType = 'integer';
+        this.hasBorder = true;
+        this.hasBackground = true;
+        this.dialogTitle = undefined;
+        this.dialogInputPlaceholder = undefined;
+        this.disabledBulletTexts = '';
+        this.dialogConfig = {
+            width: '400px',
+            visible: false,
+            onConfirm: () => this.handleFillInAddMore(),
+            onCancel: () => this.handleCloseAddMoreDialog()
+        };
+        this.inputInfo = { valid: true, errorMessage: '', value: '' };
+    }
+    handleClientStylingChange(newValue, oldValue) {
+        if (newValue != oldValue) {
+            lotteryTippingEntrance.setClientStyling(this.stylingContainer, this.clientStyling);
+        }
+    }
+    handleClientStylingUrlChange(newValue, oldValue) {
+        if (newValue != oldValue) {
+            lotteryTippingEntrance.setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
+        }
+    }
+    handleMbSourceChange(newValue, oldValue) {
+        if (newValue != oldValue) {
+            lotteryTippingEntrance.setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`, this.stylingSubscription);
+        }
+    }
+    componentWillLoad() {
+        if (this.translationUrl) {
+            getTranslations$7(JSON.parse(this.translationUrl));
+        }
+    }
+    componentDidLoad() {
+        if (this.stylingContainer) {
+            if (this.mbSource)
+                lotteryTippingEntrance.setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`, this.stylingSubscription);
+            if (this.clientStyling)
+                lotteryTippingEntrance.setClientStyling(this.stylingContainer, this.clientStyling);
+            if (this.clientStylingUrl)
+                lotteryTippingEntrance.setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
+        }
+    }
+    disconnectedCallback() {
+        this.stylingSubscription && this.stylingSubscription.unsubscribe();
+    }
+    lotteryBulletClickHandler(event) {
+        event.stopPropagation();
+        // if it's input type, open the dialog
+        if (event.detail.type === 'input') {
+            this.dialogConfig = Object.assign(Object.assign({}, this.dialogConfig), { visible: true });
+            return;
+        }
+        if (['delete', 'toggle'].includes(event.detail.type)) {
+            this.bulletGroupUpdateSelectedBulletTexts.emit({
+                newSelectedBulletTexts: buildSelectedBulletTextsArr(event.detail, Array.from(this.selectedSet), this.maxSelectedCount).join(this.splitToken),
+                selectionGroupId: this.selectionGroupId
+            });
+            return;
+        }
+    }
+    get selectedSet() {
+        return getBulletTextsSet(this.selectedBulletTexts, this.splitToken);
+    }
+    get disabledSet() {
+        return getBulletTextsSet(this.disabledBulletTexts, this.splitToken);
+    }
+    get bulletTextsSet() {
+        if (this.bulletTexts)
+            return getBulletTextsSet(this.bulletTexts, this.splitToken);
+        if (this.bulletTextType === 'integer' &&
+            this.maxIntegerBulletText !== null &&
+            this.maxIntegerBulletText !== undefined) {
+            return getBulletTextsSet(Array.from({ length: Number(this.lastDisplayBulletText) - this.minIntegerBulletText + 1 }, (_, index) => this.minIntegerBulletText + index).join(this.splitToken), this.splitToken);
+        }
+        // If neither bulletTexts nor maxIntegerBulletText are provided,
+        return new Set();
+    }
+    // the last bullet text
+    get lastDisplayBulletText() {
+        if (this.bulletTextType === 'integer') {
+            if (this.maxIntegerBulletText !== null && this.maxIntegerBulletText !== undefined) {
+                return Math.min(this.maxIntegerBulletText, this.minIntegerBulletText + this.maxDisplayBulletsCount - 1);
+            }
+            return this.minIntegerBulletText + this.maxDisplayBulletsCount - 1;
+        }
+        // Text mode: return the text at the max display index if available
+        if (this.bulletTextsSet.size > 0) {
+            const texts = Array.from(this.bulletTextsSet);
+            if (texts.length >= this.maxDisplayBulletsCount) {
+                return texts[this.maxDisplayBulletsCount - 1];
+            }
+            return texts[texts.length - 1]; // If fewer than maxDisplayBulletsCount, return the last one
+        }
+        return null;
+    }
+    get isSingleSelectionMode() {
+        return this.maxSelectedCount === 1;
+    }
+    getBulletToRender() {
+        const allBulletTexts = Array.from(this.bulletTextsSet);
+        // Determine which bullets to display based on type and limit
+        let bulletsToRender = allBulletTexts;
+        let showInputButton = false;
+        if (this.bulletTextType === 'text') {
+            // For text, if we have more items than the limit, we need an input button.
+            // The input button takes one slot, so we show (limit - 1) items.
+            if (allBulletTexts.length > this.maxDisplayBulletsCount) {
+                showInputButton = true;
+                bulletsToRender = allBulletTexts.slice(0, this.maxDisplayBulletsCount - 1);
+            }
+            else {
+                bulletsToRender = allBulletTexts;
+            }
+        }
+        else {
+            // For integer, logic is based on maxIntegerBulletText vs displayed range
+            showInputButton =
+                this.maxIntegerBulletText !== null &&
+                    this.maxIntegerBulletText !== undefined &&
+                    this.maxIntegerBulletText > Number(this.lastDisplayBulletText);
+            // Integer bullets generation already respects the count, no slicing needed on the raw set
+            bulletsToRender = allBulletTexts;
+        }
+        return {
+            bulletsToRender,
+            showInputButton
+        };
+    }
+    renderBulletGroup() {
+        let items = [];
+        if (this.type === 'bet') {
+            const isMaxSelected = this.maxSelectedCount !== null && this.selectedSet.size >= this.maxSelectedCount;
+            const { bulletsToRender, showInputButton } = this.getBulletToRender();
+            bulletsToRender.forEach((text, idx) => {
+                let bulletType = 'toggle';
+                if (this.disabledSet.has(String(text))) {
+                    bulletType = 'disabled';
+                }
+                else if (!this.selectedSet.has(String(text)) && isMaxSelected && !this.isSingleSelectionMode) {
+                    bulletType = 'disabled';
+                }
+                items.push({
+                    value: this.selectedSet.has(String(text)) ? 1 : 0,
+                    text: String(text),
+                    idx,
+                    type: bulletType
+                });
+            });
+            if (showInputButton) {
+                let inputBulletType = 'input';
+                if (isMaxSelected && !this.isSingleSelectionMode) {
+                    inputBulletType = 'disabled';
+                }
+                const inputButtonText = this.bulletTextType === 'text' ? '...' : `${this.lastDisplayBulletText}+`;
+                const inputButtonIdx = this.bulletTextType === 'text' ? -1 : Number(this.lastDisplayBulletText) + 1;
+                // Special handling for integer mode:
+                // If the generated set is "full" (size == maxDisplayBulletsCount),
+                // we need to remove the last item to make room for the "N+" button
+                // so the total visual count remains consistent.
+                if (this.bulletTextType === 'integer' && items.length >= this.maxDisplayBulletsCount) {
+                    items.pop();
+                }
+                items.push({
+                    value: 0,
+                    text: inputButtonText,
+                    idx: inputButtonIdx,
+                    type: inputBulletType
+                });
+            }
+        }
+        else if (['choice', 'preview'].includes(this.type)) {
+            // For choice/preview, also respect the visual limit for text mode
+            const { bulletsToRender } = this.getBulletToRender();
+            bulletsToRender.forEach((text, idx) => {
+                let bulletType = 'toggle';
+                if (this.disabledSet.has(String(text))) {
+                    bulletType = 'disabled';
+                }
+                else if (this.type === 'preview') {
+                    bulletType = 'readonly';
+                }
+                else if (this.selectedSet.has(String(text))) {
+                    bulletType = 'delete';
+                }
+                items.push({
+                    value: this.selectedSet.has(String(text)) ? 1 : 0,
+                    text,
+                    idx,
+                    type: bulletType
+                });
+            });
+        }
+        return (index.h("div", { class: "lottery-selection-group__item--right" }, items.map((item) => {
+            return (index.h("lottery-selection", { clientStyling: this.clientStyling, clientStylingUrl: this.clientStylingUrl, mbSource: this.mbSource, text: item.text, idx: item.idx, value: item.value, type: item.type, hasBorder: this.hasBorder, hasBackground: this.hasBackground }));
+        })));
+    }
+    handleCloseAddMoreDialog() {
+        this.dialogConfig = Object.assign(Object.assign({}, this.dialogConfig), { visible: false });
+        this.inputInfo = { value: '', errorMessage: '', valid: true };
+    }
+    handleInputChange(e) {
+        const inputElement = e.target;
+        const value = inputElement.value;
+        this.inputInfo = Object.assign(Object.assign({}, this.inputInfo), { value: value });
+        this.inputInfo = validateInput({
+            value,
+            selectedSet: this.selectedSet,
+            maxValue: this.maxIntegerBulletText,
+            minValue: this.bulletTextType === 'integer' ? Number(this.lastDisplayBulletText) + 1 : undefined,
+            language: this.language,
+            type: this.bulletTextType
+        });
+    }
+    handleFillInAddMore() {
+        if (this.inputInfo.valid) {
+            const { value } = this.inputInfo;
+            // Normalize the value (e.g., "05" -> "5") to match validation logic
+            let normalizedValue = value;
+            if (this.bulletTextType === 'integer') {
+                normalizedValue = String(Number(value));
+            }
+            else {
+                normalizedValue = value.trim();
+            }
+            let newSelectedBulletTexts;
+            if (this.isSingleSelectionMode) {
+                newSelectedBulletTexts = normalizedValue;
+            }
+            else {
+                newSelectedBulletTexts = addSelectedBulletTexts(normalizedValue, Array.from(this.selectedSet)).join(this.splitToken);
+            }
+            this.bulletGroupUpdateSelectedBulletTexts.emit({
+                newSelectedBulletTexts,
+                selectionGroupId: this.selectionGroupId
+            });
+            this.handleCloseAddMoreDialog();
+        }
+    }
+    render() {
+        return (index.h("div", { key: '39225bad75cf435b166269367df570732eff7ef4', class: "lottery-selection-group", ref: (el) => (this.stylingContainer = el) }, index.h("div", { key: '2bb2bc539c9fc05aeece7145b13f722756bc054e', class: "lottery-selection-group__item" }, this.selectionGroupLabel && (index.h("div", { key: 'dc15197dca90375bd4eb50e87d96402d1ef694d2', class: "lottery-selection-group__item--left" }, this.selectionGroupLabel)), this.renderBulletGroup()), index.h("lottery-tipping-dialog", { key: '9526dbb5d1656d6724e6566465febde778437c64', visible: this.dialogConfig.visible, width: this.dialogConfig.width, onCancel: this.dialogConfig.onCancel }, index.h("div", { key: 'ecf5800430e92be4a2af279f1d8c5075d5965b7e', class: "addSelectionDialog" }, index.h("div", { key: '3e8a2f445679ef5fe2ada60d4a6832f472f27dfa', class: "addSelectionDialog-title" }, this.dialogTitle ||
+            (this.bulletTextType === 'text'
+                ? translate$7('enterValue', this.language)
+                : translate$7('enterScoreUpTo', this.language, {
+                    maxScore: this.maxIntegerBulletText
+                }))), index.h("input", { key: '46462ee8f27410639d45970a76fc3d90a03f3a10', type: "text", class: {
+                'dialog-input': true,
+                invalid: !this.inputInfo.valid
+            }, value: this.inputInfo.value, onInput: this.handleInputChange.bind(this), placeholder: this.dialogInputPlaceholder }), index.h("div", { key: '2e66988e4186f8f4f773ed548fc76e53085be946', class: "error-message" }, this.inputInfo.errorMessage)), index.h("div", { key: '81dc64f0b7cba422a54af8ecff4734aa19832583', slot: "footer", class: "addSelectionDialog-footer" }, index.h("lottery-button", { key: '3027240894aef525dc9fc50db79597cf29f9cb99', onClick: this.dialogConfig.onCancel, text: translate$7('cancel', this.language), variant: "outline" }), index.h("lottery-button", { key: 'ab8c6deed9ab4a7d79d71ed6fe8122b23af5741b', onClick: this.dialogConfig.onConfirm, text: translate$7('confirm', this.language), variant: "primary", disabled: !this.inputInfo.valid || !this.inputInfo.value })))));
+    }
+    static get watchers() { return {
+        "clientStyling": ["handleClientStylingChange"],
+        "clientStylingUrl": ["handleClientStylingUrlChange"],
+        "mbSource": ["handleMbSourceChange"]
+    }; }
+};
+LotterySelectionGroup.style = LotterySelectionGroupStyle0;
+
+const DEFAULT_LANGUAGE$6 = 'en';
+const SUPPORTED_LANGUAGES$6 = ['ro', 'en', 'fr', 'ar', 'hr'];
+const TRANSLATIONS$6 = {
+    en: {
+        homeTeam: 'Home team:',
+        awayTeam: 'Away team:',
+        loading: 'Loading...',
+        error: 'Error!',
+        noData: 'No data available.',
+        lineInfo: 'Line {currentPage} of {totalPages}',
+        clearAll: 'Clear All'
+    },
+    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$6 = (key, customLang, replacements) => {
+    const lang = customLang;
+    let translation = TRANSLATIONS$6[lang !== undefined && SUPPORTED_LANGUAGES$6.includes(lang) ? lang : DEFAULT_LANGUAGE$6][key];
+    if (replacements) {
+        Object.keys(replacements).forEach((placeholder) => {
+            translation = translation.replace(`{${placeholder}}`, replacements[placeholder]);
+        });
+    }
+    return translation;
+};
+const getTranslations$6 = (data) => {
+    Object.keys(data).forEach((item) => {
+        for (let key in data[item]) {
+            TRANSLATIONS$6[item][key] = data[item][key];
+        }
+    });
+};
+const resolveTranslationUrl$3 = 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$6(translations);
+        }
+        catch (error) {
+            console.error('Failed to fetch or parse translations from URL:', error);
+        }
+    }
+};
+
+const formatDate$1 = ({ date, type = 'date', format }) => {
+    try {
+        const parsedDate = lotteryTippingEntrance.parseISO(date);
+        if (isNaN(parsedDate.getTime())) {
+            throw new Error(`Invalid date: ${date}`);
+        }
+        if (format)
+            return lotteryTippingEntrance.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 lotteryTippingEntrance.format(parsedDate, formatStr);
+    }
+    catch (error) {
+        console.error('Error formatting date:', error.message);
+        return '';
+    }
+};
+
+const lotteryTippingBetSlipCss = ":host {\n  --lottery-button-border-radius: 16px;\n}\n\n.LotteryTippingTicketBet__container {\n  display: block; /* Or inline-block, depending on desired layout flow */\n  font-size: 14px;\n  padding: 12px;\n  border: 1px solid var(--emw--color-gray-100, #e6e6e6);\n  border-radius: var(--emw--button-border-radius, 4px);\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.LotteryTippingTicketBet__main {\n  overflow: hidden;\n}\n\n.table-scroll-wrapper {\n  overflow-x: auto;\n  flex-grow: 1;\n  min-width: 0;\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@container (max-width: 400px) {\n  .my-table-component th {\n    padding: 0.3rem 0.3rem;\n  }\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 th:nth-child(1),\n.my-table-component td:nth-child(1) {\n  /* index */\n  min-width: 10px;\n}\n.my-table-component th:nth-child(3),\n.my-table-component td:nth-child(3) {\n  /* startTime */\n  min-width: 60px;\n}\n.my-table-component th:nth-child(4),\n.my-table-component td:nth-child(4) {\n  /* results */\n  min-width: 120px;\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  margin-right: 2rem;\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  border: none;\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  border: none;\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}\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}\n\n.lottery-selection-group-table-header .lottery-selection__button {\n  border: none;\n  background: none;\n}";
+const LotteryTippingBetSlipStyle0 = lotteryTippingBetSlipCss;
+
+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 LotteryTippingBetSlip = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.selectionChangeHandler = index.createEvent(this, "lotteryTippingBetSelectionChange", 7);
+        this.clearAll = index.createEvent(this, "lotteryTippingBetClearAll", 7);
+        this.addLine = index.createEvent(this, "lotteryTippingBetAddLine", 7);
+        this.removeLine = index.createEvent(this, "lotteryTippingBetRemoveLine", 7);
+        this.pageChange = index.createEvent(this, "lotteryTippingBetPageChange", 7);
+        this.columns = [
+            { title: '', value: 'index', width: 3 },
+            {
+                title: '',
+                value: 'eventName',
+                width: 65,
+                render: (item, value) => this.renderEventName(item, value)
+            },
+            {
+                title: '',
+                value: 'startTime',
+                width: 22,
+                align: 'right',
+                nowrap: true,
+                render: (_, value) => formatDate$1({ date: value, format: 'ccc HH:mm' })
+            },
+            {
+                title: () => (index.h("lottery-selection-group", { language: this.language, "translation-url": this.translationUrl, "client-styling": this.clientStyling, clientStylingUrl: this.clientStylingUrl, type: "preview", splitToken: this.bulletTextsSplitToken, "bullet-texts": this.bulletNames, bulletTextType: "text", hasBackground: false, hasBorder: false })),
+                value: 'results',
+                width: 10,
+                render: (_, __, curRow) => (index.h("lottery-selection-group", { language: this.language, "translation-url": this.translationUrl, "client-styling": this.clientStyling, clientStylingUrl: this.clientStylingUrl, "mb-source": this.mbSource, selectionGroupId: `${this.currentPage - 1}${this.bulletTextsSplitToken}${curRow}`, type: this.readPretty ? 'preview' : 'bet', "selected-bullet-texts": this.selectedBulletTexts(curRow), "disabled-bullet-texts": this.getBulletDisabledOptions(curRow), "max-selected-count": this.mode === 'single' ? 1 : this.bulletTexts.split(this.bulletTextsSplitToken).length, "bullet-texts": this.bulletTexts, splitToken: this.bulletTextsSplitToken, bulletTextType: "text" }))
+            }
+        ];
+        this.mbSource = undefined;
+        this.clientStyling = undefined;
+        this.clientStylingUrl = undefined;
+        this.translationUrl = '';
+        this.language = 'en';
+        this.totalPages = 1;
+        this.minTotalPages = 1;
+        this.maxTotalPages = 3;
+        this.bulletTexts = '1,X,2';
+        this.bulletNames = 'Home,Draw,Away';
+        this.bulletTextsSplitToken = ',';
+        this.showClearButton = true;
+        this.addImage = renderIconDefinitionToSVGElement(PlusSquareOutlined$1, {
+            extraSVGAttrs: { width: '20px', height: '20px', fill: 'currentColor' }
+        });
+        this.deleteImage = renderIconDefinitionToSVGElement(DeleteOutlined$1, {
+            extraSVGAttrs: { width: '20px', height: '20px', fill: 'currentColor' }
+        });
+        this.infoImage = renderIconDefinitionToSVGElement(InfoCircleOutlined$1, {
+            extraSVGAttrs: { width: '16px', height: '16px', fill: 'currentColor' }
+        });
+        this.leftImage = renderIconDefinitionToSVGElement(LeftOutlined$1, {
+            extraSVGAttrs: { width: '20px', height: '20px', fill: 'currentColor' }
+        });
+        this.rightImage = renderIconDefinitionToSVGElement(RightOutlined$1, {
+            extraSVGAttrs: { width: '20px', height: '20px', fill: 'currentColor' }
+        });
+        this.mode = 'multi';
+        this.readPretty = false;
+        this.ticketDataSourceStr = '[]';
+        this.bulletSelectionsLineGroupStr = '[]';
+        this.currentPage = 1;
+        this.bulletSelectionsLineGroup = [];
+        this.ticketDataSource = [];
+        this.betIsLoading = false;
+        this.betHasErrors = false;
+    }
+    renderEventName(_, value) {
+        const [homeName, awayName] = value.split(' vs ');
+        return (index.h("div", { class: "flex gap-1 eventNameContainer__item" }, index.h("span", { class: "eventNameContainer__item--title" }, value), index.h("app-tooltip", null, index.h("span", { slot: "trigger", class: "icon info-icon", innerHTML: this.infoImage, 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$6('homeTeam', this.language)), index.h("div", { class: "match-info-item-value" }, homeName)), index.h("div", { class: "match-info-item" }, index.h("div", { class: "match-info-item-label" }, translate$6('awayTeam', this.language)), index.h("div", { class: "match-info-item-value" }, awayName)))))));
+    }
+    selectedBulletTexts(curRow) {
+        var _a, _b, _c;
+        return ((_c = (_b = (_a = this.bulletSelectionsLineGroup) === null || _a === void 0 ? void 0 : _a[this.currentPage - 1]) === null || _b === void 0 ? void 0 : _b[curRow]) === null || _c === void 0 ? void 0 : _c.join(this.bulletTextsSplitToken)) || '';
+    }
+    getBulletDisabledOptions(curRow) {
+        const { outcomes } = this.ticketDataSource[curRow];
+        const curActiveOptions = outcomes.map((ev) => ev.betOn);
+        const bulletText = this.bulletTexts.split(this.bulletTextsSplitToken);
+        const disabledOptions = bulletText.filter((bullet) => !curActiveOptions.includes(bullet));
+        return disabledOptions.join(this.bulletTextsSplitToken);
+    }
+    handleNewTranslations() {
+        resolveTranslationUrl$3(this.translationUrl);
+    }
+    handleClientStylingChange(newValue, oldValue) {
+        if (newValue != oldValue) {
+            lotteryTippingEntrance.setClientStyling(this.stylingContainer, this.clientStyling);
+        }
+    }
+    handleClientStylingUrlChange(newValue, oldValue) {
+        if (newValue != oldValue) {
+            lotteryTippingEntrance.setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
+        }
+    }
+    handleMbSourceChange(newValue, oldValue) {
+        if (newValue != oldValue) {
+            lotteryTippingEntrance.setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`, this.stylingSubscription);
+        }
+    }
+    parseTicketDataSource(newValue) {
+        try {
+            this.ticketDataSource = JSON.parse(newValue || '[]');
+        }
+        catch (e) {
+            console.error('Failed to parse ticketDataSourceStr:', e);
+        }
+    }
+    parseBulletSelectionsLineGroup(newValue) {
+        try {
+            this.bulletSelectionsLineGroup = JSON.parse(newValue || '[]');
+        }
+        catch (e) {
+            console.error('Failed to parse bulletSelectionsLineGroupStr:', e);
+        }
+    }
+    connectedCallback() {
+        this.boundMessageHandler = this.messageHandler.bind(this);
+        window.addEventListener('message', this.boundMessageHandler);
+    }
+    disconnectedCallback() {
+        this.stylingSubscription && this.stylingSubscription.unsubscribe();
+        if (this.boundMessageHandler) {
+            window.removeEventListener('message', this.boundMessageHandler);
+        }
+    }
+    messageHandler() {
+        // This handler can be kept for other potential messages, or removed if no longer needed.
+    }
+    componentWillLoad() {
+        resolveTranslationUrl$3(this.translationUrl);
+        this.parseTicketDataSource(this.ticketDataSourceStr);
+        this.parseBulletSelectionsLineGroup(this.bulletSelectionsLineGroupStr);
+    }
+    componentDidLoad() {
+        if (this.stylingContainer) {
+            if (this.mbSource)
+                lotteryTippingEntrance.setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`, this.stylingSubscription);
+            if (this.clientStyling)
+                lotteryTippingEntrance.setClientStyling(this.stylingContainer, this.clientStyling);
+            if (this.clientStylingUrl)
+                lotteryTippingEntrance.setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
+        }
+    }
+    handleClearAll() {
+        this.clearAll.emit();
+    }
+    bulletGroupUpdateSelectionHandler(event) {
+        event.stopPropagation();
+        const { newSelectedBulletTexts, selectionGroupId } = event.detail;
+        if (!selectionGroupId) {
+            console.error('Miss selectionGroupId');
+            return;
+        }
+        const idParts = selectionGroupId.split(this.bulletTextsSplitToken);
+        if (idParts.length !== 2) {
+            console.error('Invalid selectionGroupId format:', selectionGroupId);
+            return;
+        }
+        const [boardId, matchId] = idParts;
+        this.selectionChangeHandler.emit({
+            newSelections: newSelectedBulletTexts.split(this.bulletTextsSplitToken),
+            matchId,
+            boardId
+        });
+    }
+    prevPage() {
+        const doPrev = () => {
+            this.pageChange.emit({ newPage: this.currentPage - 1 });
+        };
+        this.swapCard('prev', doPrev);
+    }
+    nextPage() {
+        const doNext = () => {
+            this.pageChange.emit({ newPage: this.currentPage + 1 });
+        };
+        this.swapCard('next', doNext);
+    }
+    handleAddLine() {
+        const doAdd = () => {
+            this.addLine.emit();
+        };
+        this.swapCard('add', doAdd);
+    }
+    handleRemoveLine() {
+        this.removeLine.emit({
+            boardId: this.currentPage - 1,
+            close: (onClose) => {
+                onClose && this.swapCard('remove', onClose);
+            }
+        });
+    }
+    swapCard(action, cb) {
+        const wrapper = this.mainContainer;
+        if (!wrapper)
+            return;
+        // Prevent new animations if one is already in progress
+        const isAnimating = Array.from(wrapper.classList).some((cls) => cls.startsWith('card-out-') || cls.startsWith('card-in-'));
+        if (isAnimating) {
+            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);
+        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 });
+    }
+    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" }))));
+    }
+    renderErrorContent() {
+        return index.h("p", null, translate$6('error', this.language));
+    }
+    renderEmptyContent() {
+        return (index.h("div", { class: "LotteryTippingTicketBet__empty" }, index.h("p", null, translate$6('noData', this.language))));
+    }
+    renderPageFooter() {
+        if (this.totalPages <= 1)
+            return null;
+        return (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$6('lineInfo', this.language, { currentPage: this.currentPage, totalPages: this.totalPages })), index.h("div", { class: 'flex gap-1' }, index.h("button", { type: "button", class: `btn ${this.currentPage === 1 ? 'disabled' : ''}`, onClick: () => this.prevPage(), disabled: this.currentPage === 1 }, index.h("span", { class: "icon", innerHTML: this.leftImage })), index.h("button", { type: "button", class: `btn ${this.currentPage === this.totalPages ? 'disabled' : ''}`, onClick: () => this.nextPage(), disabled: this.currentPage === this.totalPages }, index.h("span", { class: "icon", innerHTML: this.rightImage })))))));
+    }
+    renderReadPrettyContent() {
+        var _a;
+        return (index.h("div", { class: "LotteryTippingTicketBet__main", ref: (el) => (this.mainContainer = el) }, index.h("div", { class: "table-scroll-wrapper" }, 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.renderPageFooter()));
+    }
+    renderDefaultContent() {
+        var _a;
+        const lineOperatorAddShow = this.totalPages < this.maxTotalPages && this.currentPage === this.totalPages ? true : false;
+        const lineOperatorRemoveShow = this.totalPages > this.minTotalPages ? true : false;
+        return (index.h("div", null, index.h("div", { class: "LotteryTippingTicketBet__tableToolbar flex justify-end gap-1" }, this.showClearButton && (index.h("lottery-button", { class: {
+                'LotteryTippingTicketBet__tableToolbar--item': true,
+                'mr-0': !(lineOperatorAddShow || lineOperatorRemoveShow)
+            }, text: translate$6('clearAll', this.language), onClick: () => this.handleClearAll(), variant: "text", clientStyling: this.clientStyling || '' }))), index.h("div", { class: "flex align-center LotteryTippingTicketBet__main", ref: (el) => (this.mainContainer = el) }, index.h("div", { class: "table-scroll-wrapper" }, 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 })), (lineOperatorAddShow || lineOperatorRemoveShow) && (index.h("div", { class: "LotteryTippingTicketBet__lineOperatorGroup" }, lineOperatorAddShow && (index.h("button", { type: "button", class: {
+                'LotteryTippingTicketBet__lineOperatorGroup--item': true
+            }, onClick: () => this.handleAddLine() }, index.h("span", { class: "icon", innerHTML: this.addImage }))), lineOperatorRemoveShow && (index.h("button", { type: "button", class: {
+                'LotteryTippingTicketBet__lineOperatorGroup--item': true
+            }, onClick: () => this.handleRemoveLine() }, index.h("span", { class: "icon", innerHTML: this.deleteImage })))))), this.renderPageFooter()));
+    }
+    render() {
+        let content;
+        if (this.betIsLoading) {
+            content = this.renderLoading();
+        }
+        else if (this.betHasErrors) {
+            content = this.renderErrorContent();
+        }
+        else if (this.ticketDataSource.length === 0) {
+            content = this.renderEmptyContent();
+        }
+        else if (this.readPretty) {
+            content = this.renderReadPrettyContent();
+        }
+        else {
+            content = this.renderDefaultContent();
+        }
+        return (index.h("div", { key: '425f7f3d185616af3189857a9159868e3c57f100', ref: (el) => (this.stylingContainer = el), class: "LotteryTippingTicketBet__container" }, content));
+    }
+    static get watchers() { return {
+        "translationUrl": ["handleNewTranslations"],
+        "clientStyling": ["handleClientStylingChange"],
+        "clientStylingUrl": ["handleClientStylingUrlChange"],
+        "mbSource": ["handleMbSourceChange"],
+        "ticketDataSourceStr": ["parseTicketDataSource"],
+        "bulletSelectionsLineGroupStr": ["parseBulletSelectionsLineGroup"]
+    }; }
+};
+LotteryTippingBetSlip.style = LotteryTippingBetSlipStyle0;
+
+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) {
+            lotteryTippingEntrance.setClientStyling(this.stylingContainer, this.clientStyling);
+        }
+    }
+    handleClientStylingUrlChange(newValue, oldValue) {
+        if (newValue != oldValue) {
+            lotteryTippingEntrance.setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
+        }
+    }
+    handleMbSourceChange(newValue, oldValue) {
+        if (newValue != oldValue) {
+            lotteryTippingEntrance.setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`, this.stylingSubscription);
+        }
+    }
+    componentDidLoad() {
+        if (this.stylingContainer) {
+            if (this.mbSource)
+                lotteryTippingEntrance.setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`, this.stylingSubscription);
+            if (this.clientStyling)
+                lotteryTippingEntrance.setClientStyling(this.stylingContainer, this.clientStyling);
+            if (this.clientStylingUrl)
+                lotteryTippingEntrance.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) {
+            lotteryTippingEntrance.setClientStyling(this.stylingContainer, this.clientStyling);
+        }
+    }
+    handleClientStylingUrlChange(newValue, oldValue) {
+        if (newValue != oldValue) {
+            lotteryTippingEntrance.setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
+        }
+    }
+    handleMbSourceChange(newValue, oldValue) {
+        if (newValue != oldValue) {
+            lotteryTippingEntrance.setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`, this.stylingSubscription);
+        }
+    }
+    componentDidLoad() {
+        if (this.stylingContainer) {
+            if (this.mbSource)
+                lotteryTippingEntrance.setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`, this.stylingSubscription);
+            if (this.clientStyling)
+                lotteryTippingEntrance.setClientStyling(this.stylingContainer, this.clientStyling);
+            if (this.clientStylingUrl)
+                lotteryTippingEntrance.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$5 = 'en';
+const SUPPORTED_LANGUAGES$5 = ['ro', 'en', 'fr', 'ar', 'hr'];
+const TRANSLATIONS$5 = {
+    en: {
+        weeks: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
+        bettingType: 'Betting Type:',
+        prizeAllocation: 'Prize Allocation (Turnover: {turnover})',
+        prizes: 'Prizes',
+        numberOfWinners: 'Number of Winners',
+        prizeMoney: 'Prize Money',
+        noLatestResult: 'No latest result.',
+        loading: 'Loading....'
+    },
+    ro: {
+        bettingType: 'Tip de pariu:',
+        prizeAllocation: 'Alocarea premiilor (Cifră de afaceri: €{turnover})',
+        prizes: 'Premii',
+        numberOfWinners: 'Număr de câștigători',
+        prizeMoney: 'Bani de premiu',
+        noLatestResult: 'Niciun rezultat recent.',
+        loading: 'Se încarcă....'
+    },
+    fr: {
+        bettingType: 'Type de pari:',
+        prizeAllocation: "Répartition des prix (Chiffre d'affaires: € {turnover})",
+        prizes: 'Prix',
+        numberOfWinners: 'Nombre de gagnants',
+        prizeMoney: 'Prix en argent',
+        noLatestResult: 'Aucun résultat récent.',
+        loading: 'Chargement....'
+    },
+    ar: {
+        bettingType: 'نوع الرهان:',
+        prizeAllocation: 'تخصيص الجائزة (دوران: € {turnover})',
+        prizes: 'الجوائز',
+        numberOfWinners: 'عدد الفائزين',
+        prizeMoney: 'أموال الجائزة',
+        noLatestResult: 'لا يوجد أحدث نتيجة.',
+        loading: 'جار التحميل....'
+    },
+    hr: {
+        bettingType: 'Vrsta oklade:',
+        prizeAllocation: 'Raspodjela nagrada (Promet: € {turnover})',
         prizes: 'Nagrade',
         numberOfWinners: 'Broj pobjednika',
         prizeMoney: 'Novčana nagrada',
@@ -1822,7 +3019,7 @@ var DrawStatusEnum;
     DrawStatusEnum["CANCELED"] = "CANCELED";
 })(DrawStatusEnum || (DrawStatusEnum = {}));
 
-const generateUUID$3 = () => {
+const generateUUID$2 = () => {
     return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
         var r = (Math.random() * 16) | 0, v = c == 'x' ? r : (r & 0x3) | 0x8;
         return v.toString(16);
@@ -1830,7 +3027,7 @@ const generateUUID$3 = () => {
 };
 function fetchRequest$2(url, method = 'GET', body = null, headers = {}) {
     return new Promise((resolve, reject) => {
-        const uuid = generateUUID$3();
+        const uuid = generateUUID$2();
         const headersOrigin = Object.assign({ 'Content-Type': 'application/json' }, headers);
         if (method !== 'GET' && method !== 'HEAD') {
             headersOrigin['X-Idempotency-Key'] = uuid;
@@ -1857,14 +3054,14 @@ function fetchRequest$2(url, method = 'GET', body = null, headers = {}) {
             .catch((error) => reject(error));
     });
 }
-function isEmptyValueOfArray$1(arr) {
+function isEmptyValueOfArray$2(arr) {
     if (arr.length === 0) {
         return true;
     }
     const len = arr.length;
     let count = 0;
     for (let i = 0; i < len; i++) {
-        if (isEmptyValue$1(arr[i])) {
+        if (isEmptyValue$2(arr[i])) {
             count++;
         }
         else {
@@ -1876,14 +3073,14 @@ function isEmptyValueOfArray$1(arr) {
     }
     return false;
 }
-function isEmptyValueOfObject$1(obj) {
+function isEmptyValueOfObject$2(obj) {
     if (Object.keys(obj).length === 0) {
         return true;
     }
     const len = Object.keys(obj).length;
     let count = 0;
     for (const val of Object.values(obj)) {
-        if (isEmptyValue$1(val)) {
+        if (isEmptyValue$2(val)) {
             count++;
         }
         else {
@@ -1895,7 +3092,7 @@ function isEmptyValueOfObject$1(obj) {
     }
     return false;
 }
-function isEmptyValue$1(value, allowZero) {
+function isEmptyValue$2(value, allowZero) {
     if (value === null || value === undefined || value === '') {
         return true;
     }
@@ -1903,19 +3100,19 @@ function isEmptyValue$1(value, allowZero) {
         return false;
     }
     else if (Array.isArray(value)) {
-        return isEmptyValueOfArray$1(value);
+        return isEmptyValueOfArray$2(value);
     }
     else if (Object.prototype.toString.call(value) === '[object Object]') {
-        return isEmptyValueOfObject$1(value);
+        return isEmptyValueOfObject$2(value);
     }
     else {
         return !value;
     }
 }
-function toQueryParams$1(params) {
+function toQueryParams$2(params) {
     const finalParams = {};
     Object.entries(params).forEach(([key, value]) => {
-        if (!isEmptyValue$1(value, true)) {
+        if (!isEmptyValue$2(value, true)) {
             finalParams[key] = value;
         }
     });
@@ -2108,7 +3305,7 @@ const LotteryTippingLatestResult = class {
         try {
             const GAME_DRAW_LIMIT = 9999;
             const filterData = { status: [DrawStatusEnum.PAYABLE, DrawStatusEnum.CLOSED], limit: GAME_DRAW_LIMIT };
-            const { items } = await fetchRequest$2(`${this.endpoint}/games/${this.gameId}/draws${toQueryParams$1(filterData)}`, 'GET');
+            const { items } = await fetchRequest$2(`${this.endpoint}/games/${this.gameId}/draws${toQueryParams$2(filterData)}`, 'GET');
             if (!items || items.length === 0)
                 return;
             const filteredItems = items;
@@ -2245,7 +3442,9 @@ const TRANSLATIONS$2 = {
     en: {
         buyTickets: 'Buy Tickets',
         myTickets: 'My Tickets',
-        logout: 'Log out'
+        logout: 'Log out',
+        ticketSubmitted: 'Ticket submitted successfully.',
+        ticketFailed: 'Failed to submit tickets.'
     },
     ro: {
         buyTickets: 'Cumpără bilete',
@@ -2295,12 +3494,21 @@ const resolveTranslationUrl$1 = async (translationUrl) => {
     }
 };
 
+const showNotification$2 = ({ message, theme = 'success' }) => {
+    window.postMessage({
+        type: 'ShowNotificationToast',
+        message,
+        theme
+    });
+};
+
 const lotteryTippingPageCss = ".lottery-tipping-page {\n  container-type: inline-size;\n  background: var(--emw--color-background, #fff);\n}\n.lottery-tipping-page-header {\n  height: 56px;\n  padding: 8px 10px;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n}\n.lottery-tipping-page-header-operation {\n  display: flex;\n  gap: 14px;\n  align-items: center;\n}\n.lottery-tipping-page-header .tab-btns {\n  display: flex;\n  align-items: center;\n  gap: 40px;\n  flex: 1;\n  justify-content: center;\n}\n.lottery-tipping-page-header .tab-btn {\n  padding: 0 8px;\n  line-height: 40px;\n  font-size: 16px;\n  cursor: pointer;\n  font-weight: 600;\n  height: 40px;\n  border: 2px solid var(--emw--color-primary, #fed275);\n  border-radius: 8px;\n  color: var(--emw--color-typography, #000);\n  transition: all 0.2s linear;\n}\n.lottery-tipping-page-header .tab-btn.active {\n  background-color: var(--emw--color-primary, #fed275);\n  color: var(--emw--color-typography, #000);\n  border: 1px solid var(--emw--color-typography, #000);\n}\n\n@container (min-width: 1200px) {\n  .tab-btns {\n    gap: 40px;\n  }\n}\n@container (max-width: 480px) {\n  .tab-btns {\n    gap: 24px;\n  }\n}";
 const LotteryTippingPageStyle0 = lotteryTippingPageCss;
 
 const LotteryTippingPage = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
+        this.logoutEventHandler = index.createEvent(this, "logout", 7);
         this.handleTabClick = (tab) => {
             this.activeTab = tab;
         };
@@ -2351,6 +3559,15 @@ const LotteryTippingPage = class {
             this.stylingSubscription.unsubscribe();
         }
     }
+    handleSessionExpired() {
+        this.logoutEventHandler.emit();
+    }
+    handleLotteryTicketSubmitSuccess() {
+        showNotification$2({ message: translate$2('ticketSubmitted', this.language), theme: 'success' });
+    }
+    handleLotteryTicketSubmitError() {
+        showNotification$2({ message: translate$2('ticketFailed', this.language), theme: 'error' });
+    }
     renderTabs() {
         const tabOptions = {
             [Tab.BuyTickets]: translate$2('buyTickets', this.language),
@@ -2360,7 +3577,7 @@ const LotteryTippingPage = class {
     }
     renderContent() {
         if (this.activeTab === Tab.BuyTickets) {
-            return (index.h("lottery-tipping-ticket-controller", { endpoint: this.endpoint, gameId: this.gameId, playerId: this.playerId, sessionId: this.sessionId, drawId: this.drawId, language: this.language, "mb-source": this.mbSource, "client-styling": this.clientStyling, "client-styling-url": this.clientStylingUrl, "translation-url": this.translationUrl }));
+            return (index.h("lottery-tipping-ticket-buy", { endpoint: this.endpoint, gameId: this.gameId, drawId: this.drawId, sessionId: this.sessionId, language: this.language, "mb-source": this.mbSource, "client-styling": this.clientStyling, "client-styling-url": this.clientStylingUrl, "translation-url": this.translationUrl }));
         }
         if (this.activeTab === Tab.MyTickets) {
             return (index.h("lottery-tipping-ticket-history", { endpoint: this.endpoint, gameId: this.gameId, playerId: this.playerId, sessionId: this.sessionId, drawId: this.drawId, language: this.language, "mb-source": this.mbSource, "client-styling-url": this.clientStylingUrl, "client-styling": this.clientStyling, "translation-url": this.translationUrl }));
@@ -2368,7 +3585,7 @@ const LotteryTippingPage = class {
         return null;
     }
     render() {
-        return (index.h("div", { key: '62f666e26682d4a8cb26060e5ac9d84f4e60d55c', class: "lottery-tipping-page", ref: (el) => (this.stylingContainer = el) }, index.h("div", { key: 'ea4e9581c9c5ad1b472c2caafba6c4fd84015cb9', class: "lottery-tipping-page-header" }, index.h("slot", { key: 'af74e6981a1912f2c53ece0990b301717c9dc4ab', name: "backBtn" }), this.renderTabs(), index.h("div", { key: '81675f34303260b406b5ba1588db43512d0ed162', class: "lottery-tipping-page-header-operation" }, index.h("slot", { key: '0e64913427a2937695ecc30446a784f510e68f70', name: "themeBtn" }), index.h("slot", { key: 'ca9c5405531466fb7f40b3b419ab264f3aa75f2d', name: "logoutBtn" }))), index.h("div", { key: 'fc231b87b57bedb3e8115d8bf0b1945390b53a3b', class: "lottery-tipping-content" }, this.renderContent())));
+        return (index.h("div", { key: '3bd9dd7b474837c833638dca71b935abed471535', class: "lottery-tipping-page", ref: (el) => (this.stylingContainer = el) }, index.h("div", { key: '1cae9cf33d43f12d7d7c3e0e9a4e2ba7fbc1c49a', class: "lottery-tipping-page-header" }, index.h("slot", { key: '6c284581461a0be882eaa2c88eeb132238ecd78a', name: "backBtn" }), this.renderTabs(), index.h("div", { key: 'aac3e8563cb62650d405bbce9e76e53ca2eadade', class: "lottery-tipping-page-header-operation" }, index.h("slot", { key: 'd7f62cdc830f8c7dadc21527105de192ea3ae8ce', name: "themeBtn" }), index.h("slot", { key: 'c9090f6cb71d963fde1ea878cff2d3d682f1c752', name: "logoutBtn" }))), index.h("div", { key: '45f22f9e171d3c28c2604a48efe894a8d85389ae', class: "lottery-tipping-content" }, this.renderContent())));
     }
     static get watchers() { return {
         "clientStyling": ["handleClientStylingChange"],
@@ -2378,7 +3595,7 @@ const LotteryTippingPage = class {
 };
 LotteryTippingPage.style = LotteryTippingPageStyle0;
 
-const generateUUID$2 = () => {
+const generateUUID$1 = () => {
     return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
         var r = (Math.random() * 16) | 0, v = c == 'x' ? r : (r & 0x3) | 0x8;
         return v.toString(16);
@@ -2386,7 +3603,7 @@ const generateUUID$2 = () => {
 };
 function fetchRequest$1(url, method = 'GET', body = null, headers = {}) {
     return new Promise((resolve, reject) => {
-        const uuid = generateUUID$2();
+        const uuid = generateUUID$1();
         const headersOrigin = Object.assign({ 'Content-Type': 'application/json' }, headers);
         if (method !== 'GET' && method !== 'HEAD') {
             headersOrigin['X-Idempotency-Key'] = uuid;
@@ -2413,14 +3630,14 @@ function fetchRequest$1(url, method = 'GET', body = null, headers = {}) {
             .catch((error) => reject(error));
     });
 }
-function isEmptyValueOfArray(arr) {
+function isEmptyValueOfArray$1(arr) {
     if (arr.length === 0) {
         return true;
     }
     const len = arr.length;
     let count = 0;
     for (let i = 0; i < len; i++) {
-        if (isEmptyValue(arr[i])) {
+        if (isEmptyValue$1(arr[i])) {
             count++;
         }
         else {
@@ -2432,14 +3649,14 @@ function isEmptyValueOfArray(arr) {
     }
     return false;
 }
-function isEmptyValueOfObject(obj) {
+function isEmptyValueOfObject$1(obj) {
     if (Object.keys(obj).length === 0) {
         return true;
     }
     const len = Object.keys(obj).length;
     let count = 0;
     for (const val of Object.values(obj)) {
-        if (isEmptyValue(val)) {
+        if (isEmptyValue$1(val)) {
             count++;
         }
         else {
@@ -2451,7 +3668,7 @@ function isEmptyValueOfObject(obj) {
     }
     return false;
 }
-function isEmptyValue(value, allowZero) {
+function isEmptyValue$1(value, allowZero) {
     if (value === null || value === undefined || value === '') {
         return true;
     }
@@ -2459,19 +3676,19 @@ function isEmptyValue(value, allowZero) {
         return false;
     }
     else if (Array.isArray(value)) {
-        return isEmptyValueOfArray(value);
+        return isEmptyValueOfArray$1(value);
     }
     else if (Object.prototype.toString.call(value) === '[object Object]') {
-        return isEmptyValueOfObject(value);
+        return isEmptyValueOfObject$1(value);
     }
     else {
         return !value;
     }
 }
-function toQueryParams(params) {
+function toQueryParams$1(params) {
     const finalParams = {};
     Object.entries(params).forEach(([key, value]) => {
-        if (!isEmptyValue(value, true)) {
+        if (!isEmptyValue$1(value, true)) {
             finalParams[key] = value;
         }
     });
@@ -2527,7 +3744,7 @@ const isMobile = (userAgent) => {
         userAgent.toLowerCase().match(/iphone|ipad|ipod/i) ||
         userAgent.toLowerCase().match(/windows phone|windows mobile|iemobile|wpdesktop/i));
 };
-const showNotification$2 = ({ message, theme = 'success' }) => {
+const showNotification$1 = ({ message, theme = 'success' }) => {
     window.postMessage({
         type: 'ShowNotificationToast',
         message,
@@ -2812,7 +4029,7 @@ const getTranslations$1 = (data) => {
     });
 };
 
-const formatDate$1 = ({ date, type = 'date', format }) => {
+const formatDate = ({ date, type = 'date', format }) => {
     try {
         const parsedDate = lotteryTippingEntrance.parseISO(date);
         if (isNaN(parsedDate.getTime())) {
@@ -2847,7 +4064,7 @@ const DEFAULT_BULLET_CONFIG = [
     }
 ];
 const SPLIT_TOKEN = '-';
-const showNotification$1 = ({ message, theme = 'success', renderOne = false }) => {
+const showNotification = ({ message, theme = 'success', renderOne = false }) => {
     window.postMessage({
         type: 'ShowNotificationToast',
         message,
@@ -2894,7 +4111,7 @@ const LotteryTippingTicketBet = class {
                 width: 22,
                 align: 'right',
                 nowrap: true,
-                render: (_, value) => formatDate$1({ date: value, format: 'ccc HH:mm' })
+                render: (_, value) => formatDate({ date: value, format: 'ccc HH:mm' })
             },
             {
                 title: () => (index.h("lottery-tipping-bullet-group", { theme: "text", bulletConfigContent: JSON.stringify(DEFAULT_BULLET_CONFIG) })),
@@ -3029,7 +4246,7 @@ const LotteryTippingTicketBet = class {
     }
     handleClearAll() {
         this._resetBulletConfig();
-        showNotification$1({ message: translate$1('selectionCleared', this.language), renderOne: true });
+        showNotification({ message: translate$1('selectionCleared', this.language), renderOne: true });
         this.lotteryTippingBulletBetEvent.emit({ hasSelectBullet: false });
     }
     async resetBulletConfig({ minLineNumber, maxLineNumber, defaultBoards }) {
@@ -3197,39 +4414,193 @@ const LotteryTippingTicketBet = class {
 };
 LotteryTippingTicketBet.style = LotteryTippingTicketBetStyle0;
 
-var PlayModeEnum;
-(function (PlayModeEnum) {
-    PlayModeEnum["SingleBet"] = "SingleBet";
-    PlayModeEnum["SystemBet"] = "SystemBet";
-})(PlayModeEnum || (PlayModeEnum = {}));
-var BettingTypeEnum;
-(function (BettingTypeEnum) {
-    BettingTypeEnum["FullTime"] = "FullTime";
-    BettingTypeEnum["HalfTime"] = "HalfTime";
-    BettingTypeEnum["Both"] = "Both";
-})(BettingTypeEnum || (BettingTypeEnum = {}));
-var DrawStatus;
-(function (DrawStatus) {
-    DrawStatus["OPEN"] = "OPEN";
-})(DrawStatus || (DrawStatus = {}));
-var TicketState;
-(function (TicketState) {
-    TicketState["Settled"] = "Settled";
-    TicketState["Purchased"] = "Purchased";
-    TicketState["Canceled"] = "Canceled";
-})(TicketState || (TicketState = {}));
+function isEmptyValue(value, allowZero) {
+    if (value === null || value === undefined || value === '') {
+        return true;
+    }
+    else if (value === 0 && allowZero) {
+        return false;
+    }
+    else if (Array.isArray(value)) {
+        return isEmptyValueOfArray(value);
+    }
+    else if (Object.prototype.toString.call(value) === '[object Object]') {
+        return isEmptyValueOfObject(value);
+    }
+    else {
+        return !value;
+    }
+}
+function isEmptyValueOfArray(arr) {
+    if (arr.length === 0) {
+        return true;
+    }
+    const len = arr.length;
+    let count = 0;
+    for (let i = 0; i < len; i++) {
+        if (isEmptyValue(arr[i])) {
+            count++;
+        }
+        else {
+            return false;
+        }
+    }
+    if (count === len) {
+        return true;
+    }
+    return false;
+}
+function isEmptyValueOfObject(obj) {
+    if (Object.keys(obj).length === 0) {
+        return true;
+    }
+    const len = Object.keys(obj).length;
+    let count = 0;
+    for (const val of Object.values(obj)) {
+        if (isEmptyValue(val)) {
+            count++;
+        }
+        else {
+            return false;
+        }
+    }
+    if (count === len) {
+        return true;
+    }
+    return false;
+}
+function thousandSeparator(value) {
+    if (value === 0) {
+        return '0';
+    }
+    if (!value) {
+        return '';
+    }
+    value = value.toString();
+    const parts = value.split('.');
+    parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+    return parts.join('.');
+}
+function formattedTurnover(turnover, unit = '€') {
+    if (turnover === null || turnover === undefined)
+        return '';
+    return `${unit}${turnover ? thousandSeparator(turnover) : 0}`;
+}
+function calculateCombinationInLine(selectionsInLine = [[]], matchNum) {
+    let res = 1;
+    for (let i = 0; i < matchNum; i++) {
+        const curMatchSelections = (selectionsInLine[i] || []).filter((i) => i);
+        res *= curMatchSelections.length;
+        if (res === 0)
+            return 0;
+    }
+    return res;
+}
+function getTotalLinesAndCheckIfNotComplete(bulletSelectionsLineGroup, matchNum, minCombinations, maxCombinations) {
+    const isEffectivelyEmpty = !bulletSelectionsLineGroup ||
+        bulletSelectionsLineGroup.length === 0 ||
+        bulletSelectionsLineGroup.every((board) => !board.some((match) => match && match.length > 0));
+    if (isEffectivelyEmpty || matchNum === undefined || matchNum === null) {
+        return {
+            totalLines: 0,
+            notComplete: true
+        };
+    }
+    // total line combination is sum of all the line's combination
+    const _totalLines = bulletSelectionsLineGroup.reduce((pre, cur) => pre + calculateCombinationInLine(cur, matchNum), 0);
+    //  each line's combination should within in [minCombinations, maxCombinations]
+    return {
+        totalLines: _totalLines,
+        notComplete: bulletSelectionsLineGroup.some((selectionsInLine) => {
+            const curCombination = calculateCombinationInLine(selectionsInLine, matchNum);
+            return curCombination < minCombinations || curCombination > maxCombinations;
+        })
+    };
+}
+
+const generateUUID = () => {
+    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
+        var r = (Math.random() * 16) | 0, v = c == 'x' ? r : (r & 0x3) | 0x8;
+        return v.toString(16);
+    });
+};
+function fetchRequest(url, method = 'GET', body = null, headers = {}) {
+    return new Promise((resolve, reject) => {
+        const uuid = generateUUID();
+        const headersOrigin = Object.assign({ 'Content-Type': 'application/json', 'X-APP-KEY': '123456' }, headers);
+        if (method !== 'GET' && method !== 'HEAD') {
+            headersOrigin['X-Idempotency-Key'] = uuid;
+        }
+        const options = {
+            method,
+            headers: headersOrigin,
+            body: null
+        };
+        if (body && method !== 'GET' && method !== 'HEAD') {
+            options.body = JSON.stringify(body);
+        }
+        else {
+            delete options.body;
+        }
+        fetch(url, options)
+            .then((response) => {
+            if (!response.ok) {
+                return response.json().then((errorData) => {
+                    const error = {
+                        status: response.status,
+                        statusText: response.statusText,
+                        code: errorData.code || 'UNKNOWN_ERROR',
+                        message: errorData.message || 'An unknown error occurred',
+                        data: errorData.data || null
+                    };
+                    reject(error);
+                }, () => reject({
+                    status: response.status,
+                    statusText: response.statusText,
+                    code: 'PARSE_ERROR',
+                    message: 'Failed to parse error response'
+                }));
+            }
+            else {
+                return response.json();
+            }
+        })
+            .then((data) => resolve(data), (error) => reject(error));
+    });
+}
+async function fetchSaleStatistics({ endpoint, gameId, drawId }) {
+    try {
+        const res = await fetchRequest(`${endpoint}/games/${gameId}/draws/${drawId}/saleStatistics`);
+        return res;
+    }
+    catch (error) {
+        return Promise.reject(error);
+    }
+}
+function toQueryParams(params) {
+    const finalParams = {};
+    Object.entries(params).forEach(([key, value]) => {
+        if (!isEmptyValue(value, true)) {
+            finalParams[key] = value;
+        }
+    });
+    const queryString = Object.entries(finalParams)
+        .map(([key, value]) => `${encodeURIComponent(key)}=${encodeURIComponent(value)}`)
+        .join('&');
+    return queryString ? `?${queryString}` : '';
+}
 
 const DEFAULT_LANGUAGE = 'en';
 const SUPPORTED_LANGUAGES = ['ro', 'en', 'fr', 'ar', 'hr'];
 const TRANSLATIONS = {
     en: {
-        gameNotAvailable: 'Sorry. The Game is not available now.',
         stop: 'Stop',
         at: 'at',
         turnover: 'Turnover: ',
         selectionCleared: 'Your selection will be cleared.',
+        selectionOnLineCleared: 'Your selection on this line will be cleared.',
         ticketSubmitted: 'Ticket submitted successfully.',
-        ticketFailed: 'Failed to submit tickets.',
+        ticketFailed: 'Failed to purchase the ticket. Please try again.',
         lines: 'Lines',
         line: 'Line',
         bettingType: 'Betting Type',
@@ -3240,7 +4611,9 @@ const TRANSLATIONS = {
         orderSummarySubmit: 'Submit',
         cancel: 'Cancel',
         confirm: 'Confirm',
-        stakePerLine: 'Stake per Line:'
+        stakePerLine: 'Stake per Line:',
+        error: 'Error!',
+        gameNotAvailable: 'Sorry. The Game is not available now.'
     },
     ro: {
         selectionCleared: 'Selecția dvs. va fi ștearsă.',
@@ -3297,438 +4670,98 @@ const TRANSLATIONS = {
         playingMode: 'Način igranja',
         orderSummaryTitle: 'Sažetak narudžbe',
         orderSummaryTickets: 'Listići',
-        orderSummaryTotal: 'Ukupno',
-        orderSummarySubmit: 'Pošalji',
-        cancel: 'Odustani',
-        confirm: 'Potvrdi'
-    }
-};
-const translate = (key, customLang) => {
-    const lang = customLang;
-    return TRANSLATIONS[lang !== undefined && SUPPORTED_LANGUAGES.includes(lang) ? lang : DEFAULT_LANGUAGE][key];
-};
-const getTranslations = (data) => {
-    Object.keys(data).forEach((item) => {
-        for (let key in data[item]) {
-            TRANSLATIONS[item][key] = data[item][key];
-        }
-    });
-};
-const resolveTranslationUrl = async (translationUrl) => {
-    if (translationUrl) {
-        try {
-            const response = await fetch(translationUrl);
-            if (!response.ok) {
-                throw new Error(`HTTP error! status: ${response.status}`);
-            }
-            const translations = await response.json();
-            getTranslations(translations);
-        }
-        catch (error) {
-            console.error('Failed to fetch or parse translations from URL:', error);
-        }
-    }
-};
-
-const formatDate = ({ date, type = 'date', format }) => {
-    try {
-        const parsedDate = lotteryTippingEntrance.parseISO(date);
-        if (isNaN(parsedDate.getTime())) {
-            throw new Error(`Invalid date: ${date}`);
-        }
-        if (format)
-            return lotteryTippingEntrance.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 lotteryTippingEntrance.format(parsedDate, formatStr);
-    }
-    catch (error) {
-        console.error('Error formatting date:', error.message);
-        return '';
-    }
-};
-const generateUUID$1 = () => {
-    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
-        var r = (Math.random() * 16) | 0, v = c == 'x' ? r : (r & 0x3) | 0x8;
-        return v.toString(16);
-    });
-};
-function fetchRequest(url, method = 'GET', body = null, headers = {}) {
-    return new Promise((resolve, reject) => {
-        const uuid = generateUUID$1();
-        const headersOrigin = Object.assign({ 'Content-Type': 'application/json' }, headers);
-        if (method !== 'GET' && method !== 'HEAD') {
-            headersOrigin['X-Idempotency-Key'] = uuid;
-        }
-        const options = {
-            method,
-            headers: headersOrigin
-        };
-        if (body && method !== 'GET' && method !== 'HEAD') {
-            options.body = JSON.stringify(body);
-        }
-        fetch(url, options)
-            .then((response) => {
-            if (!response.ok) {
-                throw new Error(`HTTP error! Status: ${response.status}`);
-            }
-            return response.json();
-        })
-            .then((data) => resolve(data))
-            .catch((error) => reject(error));
-    });
-}
-const showNotification = ({ message, theme = 'success' }) => {
-    window.postMessage({
-        type: 'ShowNotificationToast',
-        message,
-        theme
-    });
-};
-const thousandSeparator = (value) => {
-    if (value === 0) {
-        return '0';
-    }
-    if (!value) {
-        return '';
+        orderSummaryTotal: 'Ukupno',
+        orderSummarySubmit: 'Pošalji',
+        cancel: 'Odustani',
+        confirm: 'Potvrdi'
     }
-    value = value.toString();
-    const parts = value.split('.');
-    parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ',');
-    return parts.join('.');
 };
-const HomeDrawAwayArr = ['H', 'D', 'A'];
-// Utility to format raw results into winning numbers (H/D/A)
-const formatResultsToWinningNumbers = (rawResults) => {
-    // Convert each bullet item into binary (1 if selected, 0 otherwise)
-    const toBinarySelection = (matchRes) => matchRes.map((bulletItem) => (bulletItem.isSelected ? 1 : 0));
-    // Step 1: Convert rawResults into arrays of 0/1 flags
-    const binaryResults = rawResults.map((lineRes) => lineRes.map(toBinarySelection));
-    const resultLinesArr = [];
-    // Step 2: Iterate through each line of results
-    binaryResults.forEach((line, lineIdx) => {
-        const formattedLine = [];
-        // Step 3: Iterate through each match in a line
-        line.forEach((match, matchIdx) => {
-            // Step 4: Collect the winning outcomes (H/D/A) based on binary flags
-            const outcomes = match.map((isSelected, idx) => (isSelected ? HomeDrawAwayArr[idx] : null)).filter(Boolean);
-            // Wrap outcomes into the expected structure [[matchRes]]
-            formattedLine[matchIdx] = [outcomes];
+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]);
         });
-        resultLinesArr[lineIdx] = formattedLine;
-    });
-    return resultLinesArr;
-};
-const buildSubmitParam = ({ playerId, rawResults, gameId, rawData, amount, currentStake, betTypeId, betType }) => {
-    var _a;
-    const body = { playerId, tickets: [] };
-    const selections = formatResultsToWinningNumbers(rawResults);
-    const stake = currentStake || {};
-    body.tickets.push({
-        startingDrawId: (_a = rawData === null || rawData === void 0 ? void 0 : rawData.currentDraw) === null || _a === void 0 ? void 0 : _a.id,
-        amount,
-        gameId: gameId,
-        gameName: rawData.name,
-        currency: stake.currency,
-        selection: selections.map((i) => ({
-            betType: betTypeId,
-            stake: +stake.value,
-            poolGameSelections: i,
-            quickPick: false,
-            betName: betType.name
-        })),
-        multiplier: false,
-        drawCount: 1,
-        quickPick: false
-    });
-    return body;
-};
-// BettingTypes, playModes and playTypes
-const getEnableOptions = (raw = []) => raw.filter((i) => i.enabled);
-// the first one in bet type config that enabled = true, will be default choice
-const getDefaultType = ({ playTypeConfig = [], betTypeConfig = [], enabledBettingTypeOptions = [], enabledPlayingModeOptions = [] }) => {
-    const enabledBetTypeConfig = betTypeConfig.filter((i) => i.enabled);
-    for (const item of enabledBetTypeConfig) {
-        const { bettingType, playMode } = playTypeConfig === null || playTypeConfig === void 0 ? void 0 : playTypeConfig.find((i) => i.betTypeId === item.id);
-        if (enabledBettingTypeOptions.map((i) => i.code).includes(bettingType) &&
-            enabledPlayingModeOptions.map((i) => i.code).includes(playMode))
-            return { bettingType, playMode };
-    }
-    return {};
-};
-const calculatePlayingModeOptions = ({ bettingType, playTypeConfig, betTypeConfig, enabledPlayingModeOptions }) => {
-    const enabledBetTypeIdConfig = betTypeConfig.filter((i) => i.enabled).map((i) => i.id);
-    const filteredPlayTypesConfig = playTypeConfig.filter((i) => enabledBetTypeIdConfig.includes(i.betTypeId));
-    const selectedBettingTypeFilteredPlayTypesConfig = filteredPlayTypesConfig.filter((i) => i.bettingType === bettingType);
-    const _ = selectedBettingTypeFilteredPlayTypesConfig.map((i) => i.playMode);
-    return enabledPlayingModeOptions.filter((i) => _.includes(i.code));
-};
-const getCheckedCountForEachLineAndEachMatch = ({ rawResults }) => {
-    const getMatchCheckRes = (matchRes) => matchRes.filter((bulletItem) => bulletItem.isSelected).length;
-    const checkedCountForEachLineAndEachMatch = rawResults.map((lineRes) => lineRes.length > 0 ? lineRes.map(getMatchCheckRes) : [0]);
-    return checkedCountForEachLineAndEachMatch;
-};
-const getPlayTypeConfig = ({ rawData, selectedBettingType, selectedPlayingMode }) => {
-    var _a, _b, _c, _d, _e, _f;
-    const betTypeId = (_d = (_c = (_b = (_a = rawData === null || rawData === void 0 ? void 0 : rawData.rules) === null || _a === void 0 ? void 0 : _a.poolGame) === null || _b === void 0 ? void 0 : _b.playTypes) === null || _c === void 0 ? void 0 : _c.find((i) => i.bettingType === selectedBettingType && i.playMode === selectedPlayingMode)) === null || _d === void 0 ? void 0 : _d.betTypeId;
-    const betType = (_f = (_e = rawData === null || rawData === void 0 ? void 0 : rawData.rules) === null || _e === void 0 ? void 0 : _e.betTypes) === null || _f === void 0 ? void 0 : _f.find((i) => i.id === betTypeId);
-    return { betTypeId, betType };
-};
-const getMinValue = (arr) => (arr.length ? Math.min.apply(null, arr) : undefined);
-function formattedTurnover(turnover, unit = '€') {
-    if (turnover === null || turnover === undefined)
-        return '';
-    return `${unit}${turnover ? thousandSeparator(turnover) : 0}`;
-}
-function formattedWeekName(date) {
-    if (!date)
-        return '';
-    const _temp = formatDate({ date, format: 'EEEE' });
-    if (!['saturday', 'sunday'].includes(_temp.toLowerCase())) {
-        return 'MIDWEEK';
     }
-    return _temp.toUpperCase();
-}
-
-const TICKET_INVALID_TOKEN = 'TICKET_INVALID_TOKEN';
-const generateUUID = () => {
-    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
-        var r = (Math.random() * 16) | 0, v = c == 'x' ? r : (r & 0x3) | 0x8;
-        return v.toString(16);
-    });
+    return translation;
 };
-const doSubmitTicket = ({ body, sessionId, url }) => {
-    const options = {
-        method: 'POST',
-        headers: {
-            'Content-Type': 'application/json',
-            Accept: 'application/json',
-            Authorization: `Bearer ${sessionId}`,
-            'X-Idempotency-Key': generateUUID()
-        },
-        body: JSON.stringify(body)
-    };
-    return fetch(url, options).then((res) => {
-        if (res.status === 401) {
-            throw new Error(TICKET_INVALID_TOKEN);
-        }
-        if (res.status > 300) {
-            throw new Error(res.statusText);
+const getTranslations = (data) => {
+    Object.keys(data).forEach((item) => {
+        for (let key in data[item]) {
+            TRANSLATIONS[item][key] = data[item][key];
         }
-        return res.json().then((data) => {
-            if (checkTicketDetailHasError(data.tickets))
-                throw new Error(res.statusText);
-            return data;
-        });
     });
 };
-function checkTicketDetailHasError(tickets) {
-    if (!tickets || !tickets.length)
-        return true;
-    return tickets.some((i) => i.state !== TicketState.Purchased);
-}
-async function fetchSaleStatistics({ endpoint, gameId, drawId }) {
-    try {
-        const res = await fetchRequest(`${endpoint}/games/${gameId}/draws/${drawId}/saleStatistics`);
-        return res;
-    }
-    catch (error) {
-        return Promise.reject(error);
+const resolveTranslationUrl = async (translationUrl) => {
+    if (translationUrl) {
+        try {
+            const response = await fetch(translationUrl);
+            if (!response.ok) {
+                throw new Error(`HTTP error! status: ${response.status}`);
+            }
+            const translations = await response.json();
+            getTranslations(translations);
+        }
+        catch (error) {
+            console.error('Failed to fetch or parse translations from URL:', error);
+        }
     }
-}
+};
 
-const 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: 1rem;\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}\n.noActiveDraw {\n  margin: 30% auto 0px;\n  padding: 24px;\n  border: 2px solid var(--emw--color-primary, #fed275);\n  border-radius: 4px;\n  width: 280px;\n  color: var(--emw--color-typography, #000);\n}";
-const LotteryTippingTicketControllerStyle0 = lotteryTippingTicketControllerCss;
+const lotteryTippingTicketBuyCss = ":host {\n  --vaadin-input-field-background: var(--emw--color-background, #fff);\n  --vaadin-input-field-border-color: var(--emw--color-gray-100, #e6e6e6);\n  --vaadin-input-field-invalid-hover-highlight: var(--emw--color-background, #fff);\n  --vaadin-input-field-hover-highlight: var(--emw--color-background, #fff);\n  --vaadin-input-field-border-width: 1px;\n  --lottery-selection-border-color: #e6e6e6;\n  --lottery-selection-hover-border-color: #e6e6e6;\n  --lottery-selection-selected-border-color: #e6e6e6;\n  --lottery-selection-selected-color: #fed275;\n  --lottery-button-primary-active-bg: #fed275;\n  --lottery-selection-selected-background: #000;\n  --lottery-button-text-color: #000;\n}\n\n.lottery-tipping-ticket-buy {\n  container-type: inline-size;\n  container-name: lottery-tipping-ticket-buy;\n}\n\n.flex {\n  display: flex;\n}\n\n.flex-wrap {\n  flex-wrap: wrap;\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.bet-selector {\n  display: flex;\n  gap: 18px;\n  flex-direction: column;\n  width: 80%;\n  max-width: 800px;\n  margin: 20px auto;\n}\n.bet-selector-line {\n  display: flex;\n  align-items: center;\n}\n.bet-selector-line-segments {\n  width: 100%;\n  display: flex;\n  flex-wrap: wrap;\n  gap: 18px;\n  justify-content: space-between;\n}\n.bet-selector-line-label {\n  font-size: 16px;\n  margin-right: 8px;\n  color: var(--emw--color-typography, #000);\n}\n\n.bet-board {\n  display: flex;\n  width: 84vw;\n  max-width: 1200px;\n  margin: 0px auto;\n  gap: 30px;\n  flex-wrap: wrap;\n}\n.bet-board-slip {\n  min-width: 460px;\n  flex: 1.6;\n}\n.bet-board-order {\n  flex: 1;\n  min-width: 200px;\n}\n\n@container lottery-tipping-ticket-buy (max-width: 768px) {\n  .bet-board {\n    width: 94%;\n  }\n  .bet-board-slip {\n    min-width: 100%;\n  }\n}\n.skeleton-block {\n  background-color: var(--emw--color-background-tertiary, #e0e0e0);\n  border-radius: 4px;\n  position: relative;\n  overflow: hidden;\n}\n.skeleton-block::after {\n  content: \"\";\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background: linear-gradient(90deg, transparent, var(--emw--color-background-secondary, rgba(255, 255, 255, 0.4)), transparent);\n  animation: shimmer 1.5s infinite;\n}\n\n@keyframes shimmer {\n  0% {\n    transform: translateX(-100%);\n  }\n  100% {\n    transform: translateX(100%);\n  }\n}\n.no-active-draw {\n  margin: 100px auto;\n  padding: 24px;\n  border: 2px solid var(--emw--color-primary, #fed275);\n  border-radius: 4px;\n  width: 280px;\n  color: var(--emw--color-typography, #000);\n}";
+const LotteryTippingTicketBuyStyle0 = lotteryTippingTicketBuyCss;
 
-const LotteryTippingTicketController = class {
+const LotteryTippingTicketBuy = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.logoutEventHandler = index.createEvent(this, "logout", 7);
-        this.bothBettingTypeMultiplier = 2;
-        this.onStakeChange = (e) => {
-            this.currentStake = this.getCurrentStakeByValue(e.detail.value);
+        this.onClearAll = index.createEvent(this, "lotteryTippingSelectionClear", 7);
+        this.lotteryTicketParamsReady = index.createEvent(this, "lotteryTicketParamsReady", 7);
+        this.SPLIT_TOKEN = ',';
+        this.EVENT_PART_MAP = {
+            '3': 'Full Time',
+            '5': 'Half Time'
         };
+        this.endpoint = '';
+        this.sessionId = undefined;
+        this.playerId = '';
+        this.gameId = '';
+        this.drawId = '';
+        this.currency = 'EUR';
+        this.tippingBetOptions = '1,X,2';
+        this.tippingBetOptionNames = 'Home,Draw,Away';
+        this.groupBy = 'BettingType,EventPart,Event';
         this.mbSource = undefined;
         this.clientStyling = undefined;
         this.clientStylingUrl = undefined;
         this.translationUrl = '';
         this.language = 'en';
-        this.endpoint = '';
-        this.sessionId = undefined;
-        this.gameId = undefined;
-        this.playerId = '';
-        this.drawId = undefined;
-        this.isLoading = true;
-        this.bettingTypeOptions = [];
-        this.playingModeOptions = [];
-        this.selectedBettingType = undefined;
-        this.selectedPlayingMode = undefined;
-        this.hasSelectBullet = undefined;
-        this.hasSelectAllBullet = undefined;
-        this.totalLineCombination = 0;
-        this.submitLoading = false;
-        this.isSalesActive = false;
-        this.drawSubmitAvailable = false;
-        this.rawData = {};
-        this.saleStatisticsInfo = {};
-        this.currentStake = undefined;
+        this.bulletSelectionsLineGroup = [[[]]];
+        this.draw = undefined;
+        this.isLoading = false;
+        this.betCurrentPage = 1;
+        this.betTotalPages = undefined;
         this.dialogConfig = { visible: false };
+        this.submitLoading = undefined;
+        this.betHasErrors = false;
         this.gameUnavailable = false;
-    }
-    async getLotteryTippingBulletResults() {
-        return await this.childRef.getData();
-    }
-    get lineNumberRange() {
-        const { betType } = getPlayTypeConfig({
-            rawData: this.rawData,
-            selectedBettingType: this.selectedBettingType,
-            selectedPlayingMode: this.selectedPlayingMode
-        });
-        const boardsAllowed = (betType === null || betType === void 0 ? void 0 : betType.boardsAllowed) || [0];
-        const [minLineNumber, maxLineNumber] = [Math.min(...boardsAllowed), Math.max(...boardsAllowed)];
-        const defaultBoards = (betType === null || betType === void 0 ? void 0 : betType.defaultBoards) || minLineNumber;
-        return { minLineNumber, maxLineNumber, defaultBoards };
-    }
-    get playTypeConfig() {
-        var _a, _b, _c;
-        return (_c = (_b = (_a = this.rawData) === null || _a === void 0 ? void 0 : _a.rules) === null || _b === void 0 ? void 0 : _b.poolGame) === null || _c === void 0 ? void 0 : _c.playTypes;
-    }
-    get betTypeConfig() {
-        var _a, _b;
-        return (_b = (_a = this.rawData) === null || _a === void 0 ? void 0 : _a.rules) === null || _b === void 0 ? void 0 : _b.betTypes;
-    }
-    get isBothBettingType() {
-        return this.selectedBettingType === BettingTypeEnum.Both;
-    }
-    get stakeOptions() {
-        var _a, _b, _c;
-        return (_c = (_b = (_a = this.rawData) === null || _a === void 0 ? void 0 : _a.rules) === null || _b === void 0 ? void 0 : _b.stakes) === null || _c === void 0 ? void 0 : _c.map((item) => {
-            var _a;
-            return { value: (_a = item.value) === null || _a === void 0 ? void 0 : _a.toString(), label: item.value, currency: item.currency };
-        });
-    }
-    getCurrentStakeByValue(value) {
-        var _a;
-        return (_a = this.stakeOptions) === null || _a === void 0 ? void 0 : _a.find((item) => +item.value === +value);
-    }
-    initiateCurrentStake() {
-        var _a, _b;
-        // if only one option, default to the first one
-        if (((_a = this.stakeOptions) === null || _a === void 0 ? void 0 : _a.length) === 1) {
-            this.currentStake = this.stakeOptions[0];
-        }
-        else {
-            // otherwise, default to the smallest stake option from the config
-            const minValue = getMinValue(((_b = this.stakeOptions) === null || _b === void 0 ? void 0 : _b.map((i) => i.value)) || []);
-            this.currentStake = this.getCurrentStakeByValue(minValue);
-        }
-    }
-    handleBettingTypeChange(type) {
-        var _a, _b, _c, _d;
-        if (type === this.selectedBettingType)
-            return;
-        this.selectedBettingType = type;
-        const calcPlayingModeOptions = calculatePlayingModeOptions({
-            bettingType: this.selectedBettingType,
-            playTypeConfig: this.playTypeConfig,
-            betTypeConfig: this.betTypeConfig,
-            enabledPlayingModeOptions: getEnableOptions(((_c = (_b = (_a = this.rawData) === null || _a === void 0 ? void 0 : _a.rules) === null || _b === void 0 ? void 0 : _b.poolGame) === null || _c === void 0 ? void 0 : _c.playModes) || [])
-        });
-        this.playingModeOptions = calcPlayingModeOptions;
-        if (!calcPlayingModeOptions.length) {
-            this.selectedPlayingMode = undefined;
-        }
-        else if (!calcPlayingModeOptions.map((i) => i.code).includes(this.selectedPlayingMode)) {
-            this.hasSelectBullet = false;
-            this.handlePlayingModeChange((_d = calcPlayingModeOptions[0]) === null || _d === void 0 ? void 0 : _d.code);
-        }
-        this.clearBulletConfig();
-    }
-    async clearBulletConfig() {
-        return await this.childRef.resetBulletConfig(this.lineNumberRange);
-    }
-    handlePlayingModeChange(mode) {
-        if (mode === this.selectedPlayingMode)
-            return;
-        const doChangeSelectedPlayingMod = (closeDialog) => {
-            this.selectedPlayingMode = mode;
-            this.clearBulletConfig().then(() => {
-                closeDialog === null || closeDialog === void 0 ? void 0 : closeDialog();
-            });
-        };
-        if (this.hasSelectBullet) {
-            const closeDialog = () => {
-                this.dialogConfig = { visible: false };
-            };
-            const onConfirm = () => {
-                doChangeSelectedPlayingMod(closeDialog);
-            };
-            this.dialogConfig = {
-                visible: true,
-                content: translate('selectionCleared', this.language),
-                onConfirm: onConfirm,
-                onCancel: closeDialog
-            };
-        }
-        else {
-            doChangeSelectedPlayingMod();
-        }
-    }
-    lotteryTippingBulletGroupSelectionHandler(event) {
-        var _a;
-        const hasSelectBullet = (_a = event.detail) === null || _a === void 0 ? void 0 : _a.hasSelectBullet;
-        if (hasSelectBullet !== undefined)
-            this.hasSelectBullet = hasSelectBullet;
-        this.bulletBetSelectChecker();
-    }
-    calculateCombinationInLine(checkedNumberArr) {
-        return checkedNumberArr.reduce((pre, cur) => pre * cur, 1);
-    }
-    calculateTotalAmount() {
-        const stake = this.currentStake;
-        if (!stake) {
-            return 0;
-        }
-        let totalAmount = +stake.value * this.totalLineCombination;
-        if (this.isBothBettingType)
-            totalAmount = this.bothBettingTypeMultiplier * totalAmount;
-        return totalAmount;
-    }
-    get totalAmountFormatted() {
-        var _a;
-        const totalAmount = this.calculateTotalAmount();
-        return thousandSeparator(totalAmount) + ' ' + (((_a = this.currentStake) === null || _a === void 0 ? void 0 : _a.currency) || '');
-    }
-    get currentStakeFormatted() {
-        const { value = '', currency = '' } = this.currentStake || {};
-        return `${value} ${currency}`;
-    }
-    bulletBetSelectChecker() {
-        const validateSelectionsAndCalculateTotals = async () => {
-            const doCheckIfNotCompleteSelect = ({ rawResults }) => {
-                const checkedCountForEachLineAndEachMatch = getCheckedCountForEachLineAndEachMatch({ rawResults });
-                // total line combination is sum of all the line's combination
-                this.totalLineCombination = checkedCountForEachLineAndEachMatch.reduce((pre, cur) => pre + this.calculateCombinationInLine(cur), 0);
-                //  each line's combination should within in [combinations, maxCombinations]
-                const { combinations = 1, maxCombinations = 1 } = getPlayTypeConfig({
-                    rawData: this.rawData,
-                    selectedBettingType: this.selectedBettingType,
-                    selectedPlayingMode: this.selectedPlayingMode
-                }).betType || {};
-                return checkedCountForEachLineAndEachMatch.some((checkedNumberArr) => {
-                    const curCombination = this.calculateCombinationInLine(checkedNumberArr);
-                    return curCombination < combinations || curCombination > maxCombinations;
-                });
-            };
-            const rawResults = await this.getLotteryTippingBulletResults();
-            this.hasSelectAllBullet = !doCheckIfNotCompleteSelect({ rawResults });
+        this.isSalesActive = false;
+        this.currentStake = undefined;
+        this.gameConfig = undefined;
+        this.turnover = undefined;
+        this.betTypes = undefined;
+        this.curBetType = undefined;
+        this.eventPartIds = undefined;
+        this.curEventPartId = undefined;
+        this.boardRange = {
+            min: 1,
+            max: 3
         };
-        validateSelectionsAndCalculateTotals();
+        this.eventMap = undefined;
+        this.eventPart2EventOutcomeMap = undefined;
+        this.betTypeOptions = [];
+        this.eventPartOptions = [];
+        this.stakeOptions = [];
     }
     handleClientStylingChange(newValue, oldValue) {
         if (newValue != oldValue) {
@@ -3750,6 +4783,14 @@ const LotteryTippingTicketController = class {
             resolveTranslationUrl(this.translationUrl);
         }
     }
+    connectedCallback() {
+        if (this.endpoint && this.gameId && this.drawId) {
+            this.getTippingInfo();
+        }
+        else {
+            console.log('no fetch');
+        }
+    }
     componentDidLoad() {
         if (this.stylingContainer) {
             if (this.mbSource)
@@ -3763,9 +4804,23 @@ const LotteryTippingTicketController = class {
     disconnectedCallback() {
         this.stylingSubscription && this.stylingSubscription.unsubscribe();
     }
+    parsedOutcome(tippingInfo) {
+        const { outcomes } = tippingInfo;
+        const eventPartIdList = [];
+        for (const bettingTypeId in outcomes) {
+            const eventParts = outcomes[bettingTypeId];
+            this.eventPart2EventOutcomeMap = eventParts;
+            for (const eventPartId in eventParts) {
+                eventPartIdList.push(eventPartId);
+            }
+        }
+        if (eventPartIdList.length > 0) {
+            this.eventPartIds = eventPartIdList;
+            this.curEventPartId = eventPartIdList[0];
+        }
+    }
     updateDrawSalesStatus() {
-        var _a;
-        const currentDraw = (_a = this.rawData) === null || _a === void 0 ? void 0 : _a.currentDraw;
+        const currentDraw = this.draw;
         if (!currentDraw) {
             this.gameUnavailable = true;
             this.isSalesActive = false;
@@ -3790,139 +4845,296 @@ const LotteryTippingTicketController = class {
             this.isSalesActive = false;
         }
     }
-    connectedCallback() {
-        const fetchData = () => {
-            let url = new URL(`${this.endpoint}/games/${this.gameId}`);
+    async getTippingInfo() {
+        try {
             this.isLoading = true;
-            fetchRequest(url.href, 'GET')
-                .then((res) => {
-                var _a, _b, _c, _d, _e, _f, _g;
-                this.rawData = res;
-                this.bettingTypeOptions = getEnableOptions(((_b = (_a = res === null || res === void 0 ? void 0 : res.rules) === null || _a === void 0 ? void 0 : _a.poolGame) === null || _b === void 0 ? void 0 : _b.bettingTypes) || []);
-                this.playingModeOptions = getEnableOptions(((_d = (_c = res === null || res === void 0 ? void 0 : res.rules) === null || _c === void 0 ? void 0 : _c.poolGame) === null || _d === void 0 ? void 0 : _d.playModes) || []);
-                this.initiateCurrentStake();
-                // default: select the first one
-                const { bettingType, playMode } = getDefaultType({
-                    playTypeConfig: (_f = (_e = res === null || res === void 0 ? void 0 : res.rules) === null || _e === void 0 ? void 0 : _e.poolGame) === null || _f === void 0 ? void 0 : _f.playTypes,
-                    betTypeConfig: (_g = res === null || res === void 0 ? void 0 : res.rules) === null || _g === void 0 ? void 0 : _g.betTypes,
-                    enabledBettingTypeOptions: this.bettingTypeOptions,
-                    enabledPlayingModeOptions: this.playingModeOptions
-                });
-                this.handleBettingTypeChange(bettingType);
-                this.selectedPlayingMode = playMode;
-                this.updateDrawSalesStatus();
-                return this.updateSaleStatistics();
-            })
-                .catch((err) => {
-                console.error('Error!', err);
-            })
-                .finally(() => {
-                this.isLoading = false;
-            });
-        };
-        fetchData();
+            const { gameId, drawId, endpoint, groupBy } = this;
+            const res = await fetchRequest(`${endpoint}/poolgames/${gameId}/draws/${drawId}/bettingSelections${toQueryParams({
+                groupBy
+            })}`, 'GET');
+            const { game, eventMap } = res;
+            this.gameConfig = res;
+            this.draw = game.currentDraw;
+            this.betTypes = game.rules.betTypes;
+            this._setBetType(this.betTypes[0]);
+            this.currentStake = String(game.rules.stakes[0].value);
+            this.eventMap = eventMap;
+            this.parsedOutcome(res);
+            const betTypeOptions = this.betTypes.map((bt) => ({ label: bt.name, value: bt.name }));
+            this.betTypeOptions = betTypeOptions;
+            const eventPartOptions = this.eventPartIds.map((id) => ({ label: this.EVENT_PART_MAP[id], value: id }));
+            this.eventPartOptions = eventPartOptions;
+            const stakeOptions = game.rules.stakes.map((stake) => ({ label: stake.value, value: stake.value }));
+            this.stakeOptions = stakeOptions;
+            this.updateDrawSalesStatus();
+            this.updateSaleStatistics();
+        }
+        catch (err) {
+            this.betHasErrors = true;
+            console.error('Failed to get tipping info:', err);
+        }
+        finally {
+            this.isLoading = false;
+        }
     }
     updateSaleStatistics() {
-        var _a;
+        var _a, _b, _c;
         return fetchSaleStatistics({
             endpoint: this.endpoint,
-            gameId: (_a = this.rawData) === null || _a === void 0 ? void 0 : _a.type,
-            drawId: this.drawId
+            gameId: (_b = (_a = this.gameConfig) === null || _a === void 0 ? void 0 : _a.game) === null || _b === void 0 ? void 0 : _b.type,
+            drawId: (_c = this.draw) === null || _c === void 0 ? void 0 : _c.id
         }).then((res) => {
-            this.saleStatisticsInfo = res;
+            var _a;
+            this.turnover = (_a = res === null || res === void 0 ? void 0 : res.wagerSegment) === null || _a === void 0 ? void 0 : _a.totalSalesCrossDraw;
+        });
+    }
+    handleSelectionChange(event) {
+        const { newSelections, matchId, boardId } = event.detail;
+        const boardIndex = parseInt(boardId, 10);
+        const matchIndex = parseInt(matchId, 10);
+        const newBulletSelectionsLineGroup = this.bulletSelectionsLineGroup.map((board, index) => {
+            if (index !== boardIndex)
+                return board;
+            const newBoard = [...board];
+            newBoard[matchIndex] = newSelections;
+            return newBoard;
+        });
+        // console.log('newBulletSelectionsLineGroup', newBulletSelectionsLineGroup);
+        this.bulletSelectionsLineGroup = newBulletSelectionsLineGroup;
+    }
+    handleClearAll() {
+        this._resetBulletConfig();
+        this.onClearAll.emit();
+    }
+    handlePageChange(event) {
+        const { newPage } = event.detail;
+        if (newPage >= 1 && newPage <= this.betTotalPages) {
+            this.betCurrentPage = newPage;
+        }
+    }
+    handleAddLine() {
+        if (this.betTotalPages < this.boardRange.max) {
+            this.bulletSelectionsLineGroup = [...this.bulletSelectionsLineGroup, this.initLineForBulletConfig()];
+            this.betTotalPages++;
+            this.betCurrentPage = this.betTotalPages;
+        }
+    }
+    handleRemoveLine(event) {
+        const { boardId, close } = event.detail;
+        if (this.betTotalPages > this.boardRange.min) {
+            const closeDialog = () => {
+                this.dialogConfig = { visible: false };
+            };
+            const doRemove = () => {
+                this.bulletSelectionsLineGroup = this.bulletSelectionsLineGroup.filter((_, index) => index !== boardId);
+                this.betTotalPages--;
+                const removedPage = boardId + 1;
+                if (this.betCurrentPage > removedPage) {
+                    this.betCurrentPage--;
+                }
+                if (this.betCurrentPage > this.betTotalPages) {
+                    this.betCurrentPage = this.betTotalPages;
+                }
+                close(closeDialog);
+            };
+            this.dialogConfig = {
+                visible: true,
+                content: translate('selectionOnLineCleared', this.language),
+                onConfirm: doRemove,
+                onCancel: closeDialog
+            };
+        }
+    }
+    handleSubmitTickets() {
+        const params = this.buildTicketParam();
+        this.lotteryTicketParamsReady.emit(params);
+    }
+    handleTicketSubmitSuccess() {
+        this._resetBulletConfig();
+        this.updateSaleStatistics();
+    }
+    buildTicketParam() {
+        let body = {
+            tickets: []
+        };
+        body.tickets.push({
+            gameName: this.gameConfig.game.name,
+            startingDrawId: this.draw.id,
+            amount: this.calculateTotalAmount(),
+            currency: this.currency,
+            selection: this.bulletSelectionsLineGroup.map((boardInfo) => {
+                const matchList = boardInfo.map((matchSelection, matchIdx) => {
+                    const curBettingTypeMatches = matchSelection.map((bet) => {
+                        return {
+                            betOn: bet,
+                            id: this.parsedEvent[matchIdx].outcomes.find((outcome) => outcome.betOn === bet).id
+                        };
+                    });
+                    return [curBettingTypeMatches];
+                });
+                return {
+                    betType: this.curBetType.id,
+                    prizePool: this.parsedEvent[0].outcomes[0].prizePools[0],
+                    stake: this.currentStake,
+                    poolGameSelections: matchList
+                };
+            })
         });
+        return body;
+    }
+    initLineForBulletConfig() {
+        return [[]];
     }
-    async handleSubmit() {
-        this.updateDrawSalesStatus();
-        if (!this.isSalesActive) {
-            showNotification({
-                message: 'Sales for this period have closed.',
-                theme: 'error'
+    _resetBulletConfig() {
+        this.bulletSelectionsLineGroup = Array.from({ length: this.betTotalPages }).map(this.initLineForBulletConfig.bind(this));
+        this.betCurrentPage = 1;
+    }
+    calculateTotalAmount() {
+        const stake = this.currentStake;
+        if (!stake) {
+            return '0';
+        }
+        let totalAmount = +stake * this.totalLineCombination;
+        return totalAmount.toString();
+    }
+    get hasSelection() {
+        return this.bulletSelectionsLineGroup.some((board) => board.some((match) => match && match.length > 0));
+    }
+    get parsedEvent() {
+        if (!this.eventPart2EventOutcomeMap || !this.curEventPartId || !this.eventMap) {
+            return [];
+        }
+        const curEventObj = this.eventPart2EventOutcomeMap[this.curEventPartId];
+        const flatEvents = [];
+        for (const eventId in curEventObj) {
+            const curEventOutcomeArr = curEventObj[eventId];
+            const eventDetail = this.eventMap[eventId];
+            const { eventName, startTime, order } = eventDetail;
+            flatEvents.push({
+                eventName,
+                startTime,
+                order,
+                outcomes: curEventOutcomeArr.map((outcome) => {
+                    const { betOn, outcomeId, prizePools } = outcome;
+                    return {
+                        betOn,
+                        id: outcomeId,
+                        prizePools
+                    };
+                })
             });
+        }
+        flatEvents.sort((a, b) => a.order - b.order);
+        // console.log('flatEvents', flatEvents);
+        return flatEvents;
+    }
+    get _selectionStats() {
+        const { combinations: minCombinations = 1, maxCombinations = 1 } = this.curBetType || {};
+        return getTotalLinesAndCheckIfNotComplete(this.bulletSelectionsLineGroup, this.parsedEvent.length, minCombinations, maxCombinations);
+    }
+    get totalLineCombination() {
+        return this._selectionStats.totalLines;
+    }
+    get hasSelectAllBullet() {
+        return !this._selectionStats.notComplete;
+    }
+    _setBetType(betType) {
+        if (!betType)
+            return;
+        this.curBetType = betType;
+        this.boardRange.min = Math.min(...betType.boardsAllowed);
+        this.boardRange.max = Math.max(...betType.boardsAllowed);
+        this.betTotalPages = betType.defaultBoards;
+        this._resetBulletConfig();
+    }
+    handleBetTypeChange(event) {
+        const newBetTypeName = event.detail;
+        if (newBetTypeName === this.curBetType.name) {
             return;
         }
-        const rawResults = await this.getLotteryTippingBulletResults();
-        const { betTypeId, betType } = getPlayTypeConfig({
-            rawData: this.rawData,
-            selectedBettingType: this.selectedBettingType,
-            selectedPlayingMode: this.selectedPlayingMode
-        });
-        const url = new URL(`${this.endpoint}/tickets`);
-        const body = buildSubmitParam({
-            playerId: this.playerId,
-            rawResults,
-            gameId: this.gameId,
-            rawData: this.rawData,
-            amount: this.calculateTotalAmount().toString(),
-            currentStake: this.currentStake,
-            betTypeId,
-            betType
-        });
-        this.submitLoading = true;
-        doSubmitTicket({ body, sessionId: this.sessionId, url: url.href })
-            .then(() => {
-            showNotification({ message: translate('ticketSubmitted', this.language) });
-            this.clearBulletConfig();
-            this.updateSaleStatistics();
-        })
-            .catch((res) => {
-            if (res.message === TICKET_INVALID_TOKEN) {
-                this.logoutEventHandler.emit();
-                showNotification({ message: TICKET_INVALID_TOKEN, theme: 'error' });
-                return;
-            }
-            showNotification({ message: translate('ticketFailed', this.language), theme: 'error' });
-        })
-            .finally(() => {
-            this.submitLoading = false;
-        });
+        const switchBetType = () => {
+            const newBetType = this.betTypes.find((bt) => bt.name === newBetTypeName);
+            this._setBetType(newBetType);
+            this.dialogConfig = { visible: false };
+        };
+        this.handleSwitchWithConfirmation(switchBetType);
     }
-    get lineCountRender() {
-        const _ = thousandSeparator(this.totalLineCombination);
-        let unit = translate('lines', this.language);
-        if ([0, 1].includes(+_))
-            unit = translate('line', this.language);
-        return _ + ' ' + unit;
+    handleEventPartChange(event) {
+        const newEventPartId = event.detail;
+        if (newEventPartId === this.curEventPartId) {
+            return;
+        }
+        const switchEventPart = () => {
+            this.curEventPartId = newEventPartId;
+            this._resetBulletConfig();
+            this.dialogConfig = { visible: false };
+        };
+        this.handleSwitchWithConfirmation(switchEventPart);
     }
-    renderBettingControls() {
-        var _a;
-        const renderSkeleton = () => (index.h("div", { class: "skeleton-content" }, index.h("div", { class: "skeleton-item skeleton-animated" })));
-        const renderBettingTypeOptions = () => (index.h("div", { class: "LotteryTippingTicketController__segmented-control" }, this.bettingTypeOptions.map((item) => (index.h("button", { class: {
-                LotteryTippingTicketController__segment: true,
-                'LotteryTippingTicketController__segment--active': this.selectedBettingType === item.code
-            }, onClick: this.handleBettingTypeChange.bind(this, item.code) }, item.name)))));
-        const renderPlayingModeOptions = () => (index.h("div", { class: "LotteryTippingTicketController__segmented-control" }, this.playingModeOptions.map((item) => (index.h("button", { class: {
-                LotteryTippingTicketController__segment: true,
-                'LotteryTippingTicketController__segment--active': this.selectedPlayingMode === item.code
-            }, onClick: this.handlePlayingModeChange.bind(this, item.code) }, item.name)))));
-        const renderingStakeOptions = () => {
-            var _a, _b;
-            return (index.h("div", null, ((_a = this.stakeOptions) === null || _a === void 0 ? void 0 : _a.length) === 1 ? (index.h("div", null, this.stakeOptions[0].label)) : (index.h("vaadin-select", { items: this.stakeOptions || [], value: ((_b = this.currentStake) === null || _b === void 0 ? void 0 : _b.value) || '', "on-value-changed": this.onStakeChange.bind(this), "no-vertical-overlap": true }))));
+    onStakeChange(event) {
+        this.currentStake = event.detail.value;
+    }
+    handleSwitchWithConfirmation(switchAction) {
+        const closeDialog = () => {
+            this.dialogConfig = { visible: false };
+        };
+        const doConfirm = () => {
+            switchAction();
+            closeDialog();
         };
-        return (index.h("div", { class: "LotteryTippingTicketController__top" }, index.h("div", { class: "LotteryTippingTicketController__row" }, index.h("div", { class: "LotteryTippingTicketController__section" }, index.h("span", { class: "LotteryTippingTicketController__label" }, translate('bettingType', this.language)), !!this.bettingTypeOptions.length ? renderBettingTypeOptions() : renderSkeleton()), index.h("div", { class: "LotteryTippingTicketController__section" }, index.h("span", { class: "LotteryTippingTicketController__label" }, translate('playingMode', this.language)), !!this.playingModeOptions.length ? renderPlayingModeOptions() : renderSkeleton())), index.h("div", { class: "LotteryTippingTicketController__row" }, ((_a = this.stakeOptions) === null || _a === void 0 ? void 0 : _a.length) && (index.h("div", { class: "LotteryTippingTicketController__section" }, index.h("span", { class: "LotteryTippingTicketController__label" }, translate('stakePerLine', this.language)), renderingStakeOptions())))));
+        if (this.hasSelection) {
+            this.dialogConfig = {
+                visible: true,
+                content: translate('selectionCleared', this.language),
+                onConfirm: doConfirm,
+                onCancel: closeDialog
+            };
+        }
+        else {
+            switchAction();
+        }
     }
-    renderOrderSummary() {
-        var _a;
-        return (index.h("div", { class: "LotteryTippingTicketController__main--right order-summary" }, index.h("h3", { class: "order-summary__title" }, translate('orderSummaryTitle', this.language)), index.h("div", { class: "order-summary__ticket-info" }, index.h("div", { class: "order-summary__ticket" }, translate('orderSummaryTickets', this.language), ":"), index.h("div", { class: "order-summary__details" }, index.h("span", { class: "order-summary__line-count" }, this.lineCountRender), index.h("div", null, this.currentStake && index.h("span", { class: "order-summary__multiplier" }, "x"), index.h("span", { class: "order-summary__stake" }, this.currentStakeFormatted)), this.isBothBettingType && (index.h("div", null, index.h("span", { class: "order-summary__multiplier" }, "x"), index.h("span", { class: "order-summary__stake" }, this.bothBettingTypeMultiplier))))), index.h("hr", { class: "order-summary__divider" }), index.h("div", { class: "order-summary__ticket-info" }, index.h("div", { class: "order-summary__ticket" }, translate('orderSummaryTotal', this.language), ":"), index.h("span", { class: "order-summary__details" }, this.totalAmountFormatted)), index.h("div", { class: "order-summary__button-wrapper" }, index.h("lottery-button", { onClick: this.handleSubmit.bind(this), loading: this.submitLoading, disabled: !this.hasSelectAllBullet ||
-                this.submitLoading ||
-                ((_a = this.currentStake) === null || _a === void 0 ? void 0 : _a.value) === undefined ||
-                !this.isSalesActive, text: translate('orderSummarySubmit', this.language) }))));
+    _renderSkeletonBlock(style) {
+        return index.h("div", { class: "skeleton-block", style: style });
+    }
+    renderSkeletons() {
+        return (index.h("div", { class: "lottery-tipping-ticket-buy", ref: (el) => (this.stylingContainer = el) }, this._renderSkeletonBlock({ height: '60px', marginBottom: '16px' }), this._renderSkeletonBlock({ width: '60%', margin: '0 auto', height: '80px', marginBottom: '16px' }), index.h("div", { class: "bet-board", style: { display: 'flex', gap: '16px' } }, this._renderSkeletonBlock({ flex: '2', height: '400px' }), this._renderSkeletonBlock({ flex: '1', height: '400px' }))));
+    }
+    renderErrorContent() {
+        return index.h("p", null, translate('error', this.language));
+    }
+    renderNoActiveDraw() {
+        return (index.h("div", { class: "lottery-tipping-ticket-buy", ref: (el) => (this.stylingContainer = el) }, index.h("div", { class: "no-active-draw" }, translate('gameNotAvailable', this.language))));
+    }
+    get ticketDataSourceForBetSlip() {
+        return this.parsedEvent.map(({ eventName, startTime, outcomes }) => ({
+            eventName,
+            startTime,
+            outcomes: outcomes.map(({ betOn }) => ({ betOn }))
+        }));
     }
     render() {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
-        if (this.gameUnavailable) {
-            return (index.h("div", { class: "lottery-tipping-ticket-controller__container", ref: (el) => (this.stylingContainer = el) }, index.h("div", { class: "noActiveDraw" }, translate('gameNotAvailable', this.language))));
+        var _a, _b, _c, _d, _e, _f, _g, _h;
+        if (this.isLoading) {
+            return this.renderSkeletons();
+        }
+        else if (this.betHasErrors) {
+            return this.renderErrorContent();
+        }
+        else if (this.gameUnavailable) {
+            return this.renderNoActiveDraw();
+        }
+        else {
+            return (index.h("div", { class: "lottery-tipping-ticket-buy", ref: (el) => (this.stylingContainer = el) }, index.h("lottery-banner", { clientStylingUrl: this.clientStylingUrl, stopTime: (_a = this.draw) === null || _a === void 0 ? void 0 : _a.wagerCloseTime, startTime: (_b = this.draw) === null || _b === void 0 ? void 0 : _b.wagerStartTime, "banner-title": (_d = (_c = this.gameConfig) === null || _c === void 0 ? void 0 : _c.game) === null || _d === void 0 ? void 0 : _d.name, turnover: formattedTurnover(this.turnover), language: this.language, "translation-url": this.translationUrl, onLotteryBannerWagerStarted: () => this.updateDrawSalesStatus() }), index.h("div", { class: "bet-selector" }, index.h("div", { class: "bet-selector-line" }, index.h("div", { class: "bet-selector-line-segments" }, index.h("lottery-segmented", { class: "event-part-selector", label: "Event Part", options: this.eventPartOptions, value: this.curEventPartId.toString(), onValueChange: this.handleEventPartChange.bind(this) }), index.h("lottery-segmented", { label: "Bet Type", options: this.betTypeOptions, value: ((_e = this.curBetType) === null || _e === void 0 ? void 0 : _e.name) || '', onValueChange: this.handleBetTypeChange.bind(this) }))), index.h("div", { class: "bet-selector-line" }, index.h("div", { class: "bet-selector-line-label" }, translate('stakePerLine', this.language)), index.h("div", { class: "bet-selector-line-input" }, this.stakeOptions.length > 1 ? (index.h("vaadin-select", { items: this.stakeOptions, value: this.currentStake, "on-value-changed": this.onStakeChange.bind(this), "no-vertical-overlap": true })) : (this.currentStake)))), index.h("div", { class: "bet-board" }, index.h("div", { class: "bet-board-slip" }, index.h("lottery-tipping-bet-slip", { language: this.language, "mb-source": this.mbSource, "client-styling": this.clientStyling, "client-styling-url": this.clientStylingUrl, "translation-url": this.translationUrl, "current-page": this.betCurrentPage, "total-pages": this.betTotalPages, "max-total-pages": this.boardRange.max, "min-total-pages": this.boardRange.min, mode: ((_f = this.curBetType) === null || _f === void 0 ? void 0 : _f.combinations) > 1 ? 'multi' : 'single', readPretty: false, bulletTexts: this.tippingBetOptions, bulletNames: this.tippingBetOptionNames, bulletTextsSplitToken: this.SPLIT_TOKEN, "ticket-data-source-str": JSON.stringify(this.ticketDataSourceForBetSlip), "bullet-selections-line-group-str": JSON.stringify(this.bulletSelectionsLineGroup), showClearButton: true })), index.h("div", { class: "bet-board-order" }, index.h("lottery-order-summary", { "client-styling": this.clientStyling, clientStylingUrl: this.clientStylingUrl, mbSource: this.mbSource, language: this.language, "translation-url": this.translationUrl, endpoint: this.endpoint, sessionId: this.sessionId, orderSummaryTitle: translate('orderSummaryTitle', this.language), ticketsLabel: translate('orderSummaryTickets', this.language), totalLabel: translate('orderSummaryTotal', this.language), "show-divider": true, submitLoading: this.submitLoading, submitDisabled: !this.hasSelectAllBullet || this.submitLoading || !this.isSalesActive, submitButtonText: translate('orderSummarySubmit', this.language) }, index.h("div", { class: "order-summary__details", slot: "orderSummaryTicketDetail" }, index.h("span", { class: "order-summary__line-count" }, `${this.totalLineCombination} ${this.totalLineCombination > 1 ? translate('lines', this.language) : translate('line', this.language)}`), index.h("div", null, index.h("span", { class: "order-summary__multiplier" }, "x"), index.h("span", { class: "order-summary__stake" }, `${this.currentStake} ${this.currency}`))), index.h("span", { class: "order-summary__details", slot: "orderSummaryTotalDetail" }, `${this.calculateTotalAmount()} ${this.currency}`)))), this.dialogConfig.visible && (index.h("vaadin-confirm-dialog", { rejectButtonVisible: true, rejectText: translate('cancel', this.language), confirmText: translate('confirm', this.language), opened: (_g = this.dialogConfig) === null || _g === void 0 ? void 0 : _g.visible, onConfirm: this.dialogConfig.onConfirm, onReject: this.dialogConfig.onCancel }, (_h = this.dialogConfig) === null || _h === void 0 ? void 0 : _h.content))));
         }
-        return (index.h("div", { class: "lottery-tipping-ticket-controller__container", ref: (el) => (this.stylingContainer = el) }, index.h("lottery-banner", { "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, startTime: (_d = (_c = this.rawData) === null || _c === void 0 ? void 0 : _c.currentDraw) === null || _d === void 0 ? void 0 : _d.wagerStartTime, "banner-title": formattedWeekName((_f = (_e = this.rawData) === null || _e === void 0 ? void 0 : _e.currentDraw) === null || _f === void 0 ? void 0 : _f.date), turnover: formattedTurnover((_h = (_g = this.saleStatisticsInfo) === null || _g === void 0 ? void 0 : _g.wagerSegment) === null || _h === void 0 ? void 0 : _h.totalSalesCrossDraw), language: this.language, onLotteryBannerWagerStarted: () => this.updateDrawSalesStatus(), "translation-url": this.translationUrl }), this.renderBettingControls(), index.h("div", { class: "flex flex-wrap LotteryTippingTicketController__main" }, index.h("div", { class: "LotteryTippingTicketController__main--left" }, index.h("lottery-tipping-ticket-bet", { ref: (el) => (this.childRef = el), endpoint: this.endpoint, "session-id": this.sessionId, "game-id": (_j = this.rawData) === null || _j === void 0 ? void 0 : _j.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 && (index.h("vaadin-confirm-dialog", { rejectButtonVisible: true, rejectText: translate('cancel', this.language), confirmText: translate('confirm', this.language), opened: (_k = this.dialogConfig) === null || _k === void 0 ? void 0 : _k.visible, onConfirm: this.dialogConfig.onConfirm, onReject: this.dialogConfig.onCancel }, (_l = this.dialogConfig) === null || _l === void 0 ? void 0 : _l.content))));
     }
-    static get assetsDirs() { return ["../static"]; }
     static get watchers() { return {
         "clientStyling": ["handleClientStylingChange"],
         "clientStylingUrl": ["handleClientStylingUrlChange"],
         "mbSource": ["handleMbSourceChange"]
     }; }
 };
-LotteryTippingTicketController.style = LotteryTippingTicketControllerStyle0;
+LotteryTippingTicketBuy.style = LotteryTippingTicketBuyStyle0;
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 
@@ -9008,7 +10220,7 @@ const LotteryTippingTicketHistory = class {
             this.rawData = res;
         }
         catch (e) {
-            showNotification$2({ message: (_a = e.message) !== null && _a !== void 0 ? _a : e, theme: 'error' });
+            showNotification$1({ message: (_a = e.message) !== null && _a !== void 0 ? _a : e, theme: 'error' });
         }
         finally {
         }
@@ -9044,7 +10256,7 @@ const LotteryTippingTicketHistory = class {
     async fetchTicketList() {
         this.isLoading = true;
         try {
-            const { items, total } = await fetchRequest$1(`${this.endpoint}/tickets${toQueryParams(this.filterData)}`, 'GET', null, {
+            const { items, total } = await fetchRequest$1(`${this.endpoint}/tickets${toQueryParams$1(this.filterData)}`, 'GET', null, {
                 Authorization: `Bearer ${this.sessionId}`
             });
             this.ticketHistory = items;
@@ -9056,7 +10268,7 @@ const LotteryTippingTicketHistory = class {
         catch (e) {
             console.log('in fetchTicketList error is: ', e);
             if (e.status === 401) {
-                showNotification$2({ message: e.message, theme: 'error' });
+                showNotification$1({ message: e.message, theme: 'error' });
                 this.logout.emit();
             }
         }
@@ -9423,12 +10635,18 @@ const UiSkeleton = class {
 UiSkeleton.style = UiSkeletonStyle0;
 
 exports.lottery_tipping_entrance = lotteryTippingEntrance.LotteryTippingEntrance;
+exports.app_tooltip = Tooltip;
 exports.draw_selection = DrawSelection;
 exports.general_multi_select = GeneralMultiSelect;
 exports.general_tooltip = GeneralTooltip;
 exports.helper_count_down = HelperCountDown;
 exports.lottery_banner = LotteryBanner;
 exports.lottery_button = LotteryButton;
+exports.lottery_order_summary = LotteryOrderSummary;
+exports.lottery_segmented = LotterySegmented;
+exports.lottery_selection = LotterySelection;
+exports.lottery_selection_group = LotterySelectionGroup;
+exports.lottery_tipping_bet_slip = LotteryTippingBetSlip;
 exports.lottery_tipping_bullet = LotteryTippingBullet;
 exports.lottery_tipping_bullet_group = LotteryTippingBulletGroup;
 exports.lottery_tipping_calendar = LotteryTippingCalendar;
@@ -9439,6 +10657,6 @@ exports.lottery_tipping_page = LotteryTippingPage;
 exports.lottery_tipping_pagination = LotteryTippingPagination;
 exports.lottery_tipping_panel = lotteryTippingPanel;
 exports.lottery_tipping_ticket_bet = LotteryTippingTicketBet;
-exports.lottery_tipping_ticket_controller = LotteryTippingTicketController;
+exports.lottery_tipping_ticket_buy = LotteryTippingTicketBuy;
 exports.lottery_tipping_ticket_history = LotteryTippingTicketHistory;
 exports.ui_skeleton = UiSkeleton;