@everymatrix/lottery-draw-results 1.44.0 → 1.45.2

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

@@ -2,562 +2,482 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-40e6760b.js');
+const index = require('./index-e39715e5.js');
 
-const lotteryBulletCss = "@import url(\"https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap\");:host{display:block;font-family:\"Roboto\", sans-serif}@-webkit-keyframes Circle{0%{-webkit-transform:scale(0.5);transform:scale(0.5)}100%{-webkit-transform:scale(1);transform:scale(1)}}@keyframes Circle{0%{-webkit-transform:scale(0.5);transform:scale(0.5)}100%{-webkit-transform:scale(1);transform:scale(1)}}@-webkit-keyframes hover-rotate{0%{-webkit-transform:scale(1) rotateZ(0);transform:scale(1) rotateZ(0)}50%{-webkit-transform:scale(1.2) rotateZ(180deg);transform:scale(1.22) rotateZ(180deg)}100%{-webkit-transform:scale(1) rotateZ(360deg);transform:scale(1) rotateZ(360deg)}}@keyframes hover-rotate{0%{-webkit-transform:scale(1) rotateZ(0);transform:scale(1) rotateZ(0)}50%{-webkit-transform:scale(1.2) rotateZ(180deg);transform:scale(1.2) rotateZ(180deg)}100%{-webkit-transform:scale(1) rotateZ(360deg);transform:scale(1) rotateZ(360deg)}}@-webkit-keyframes selected-scaleUp{0%{-webkit-transform:scale(0.5);transform:scale(0.5)}100%{-webkit-transform:scale(1.2);transform:scale(1.2)}}@keyframes selected-scaleUp{0%{-webkit-transform:scale(0.5);transform:scale(0.5)}100%{-webkit-transform:scale(1);transform:scale(1)}}.Circle{-webkit-animation:Circle 0.8s cubic-bezier(0.39, 0.575, 0.565, 1) both;animation:Circle 0.8s cubic-bezier(0.39, 0.575, 0.565, 1) both;cursor:pointer;color:#000000;display:block;height:30px;width:30px;margin:0;display:flex;align-items:center;justify-content:center;justify-content:center;align-items:center;border:solid 2px #ffffff;background:radial-gradient(circle at top, white 0%, white 100%);font-weight:bold;border-radius:50%;box-shadow:0 2px 4px 0 rgba(0, 0, 0, 0.5);user-select:none;font-size:16px;line-height:16px;font-weight:600;position:relative}.Circle:hover{-webkit-animation:hover-rotate 0.4s linear both;animation:hover-rotate 0.4s linear both;background:radial-gradient(circle at top, white 0%, #f1f1f1 100%)}.Circle.Selected{-webkit-animation:selected-scaleUp 0.4s cubic-bezier(0.39, 0.575, 0.565, 1) both;animation:selected-scaleUp 0.4s cubic-bezier(0.39, 0.575, 0.565, 1) both;color:#ffffff;background:#9EC258;background:-webkit-radial-gradient(top, #00958f, #004D4A);background:-moz-radial-gradient(top, #00958f, #004D4A);background:radial-gradient(to bottom, #00958f, #004D4A);border:solid 2px #00958f}.Circle.Disabled{-webkit-animation:selected-scaleUp 0.4s cubic-bezier(0.39, 0.575, 0.565, 1) both;animation:selected-scaleUp 0.4s cubic-bezier(0.39, 0.575, 0.565, 1) both;color:#f1f1f1;background:#D4D4D4;border:solid 2px #D4D4D4;cursor:default}.Circle.DisabledSelected{-webkit-animation:selected-scaleUp 0.4s cubic-bezier(0.39, 0.575, 0.565, 1) both;animation:selected-scaleUp 0.4s cubic-bezier(0.39, 0.575, 0.565, 1) both;color:#f1f1f1;background:#9EC258;background:-webkit-radial-gradient(top, #00958f, #004D4A);background:-moz-radial-gradient(top, #00958f, #004D4A);background:radial-gradient(to bottom, #00958f, #004D4A);border:solid 2px #D4D4D4;cursor:default}";
+const lotteryBulletCss = "@import url(\"https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap\");:host{display:block;font-family:\"Roboto\", sans-serif}@-webkit-keyframes Circle{0%{-webkit-transform:scale(0.5);transform:scale(0.5)}100%{-webkit-transform:scale(1);transform:scale(1)}}@keyframes Circle{0%{-webkit-transform:scale(0.5);transform:scale(0.5)}100%{-webkit-transform:scale(1);transform:scale(1)}}@-webkit-keyframes hover-rotate{0%{-webkit-transform:scale(1) rotateZ(0);transform:scale(1) rotateZ(0)}50%{-webkit-transform:scale(1.2) rotateZ(180deg);transform:scale(1.22) rotateZ(180deg)}100%{-webkit-transform:scale(1) rotateZ(360deg);transform:scale(1) rotateZ(360deg)}}@keyframes hover-rotate{0%{-webkit-transform:scale(1) rotateZ(0);transform:scale(1) rotateZ(0)}50%{-webkit-transform:scale(1.2) rotateZ(180deg);transform:scale(1.2) rotateZ(180deg)}100%{-webkit-transform:scale(1) rotateZ(360deg);transform:scale(1) rotateZ(360deg)}}@-webkit-keyframes selected-scaleUp{0%{-webkit-transform:scale(0.5);transform:scale(0.5)}100%{-webkit-transform:scale(1.2);transform:scale(1.2)}}@keyframes selected-scaleUp{0%{-webkit-transform:scale(0.5);transform:scale(0.5)}100%{-webkit-transform:scale(1);transform:scale(1)}}.Circle{-webkit-animation:Circle 0.8s cubic-bezier(0.39, 0.575, 0.565, 1) both;animation:Circle 0.8s cubic-bezier(0.39, 0.575, 0.565, 1) both;cursor:pointer;color:#000000;display:block;height:30px;width:30px;margin:0;display:flex;align-items:center;justify-content:center;justify-content:center;align-items:center;border:solid 2px #ffffff;background:radial-gradient(circle at top, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 100%);font-weight:bold;border-radius:50%;box-shadow:0 2px 4px 0 rgba(0, 0, 0, 0.5);user-select:none;font-size:16px;line-height:16px;font-weight:600;position:relative}.Circle:hover{-webkit-animation:hover-rotate 0.4s linear both;animation:hover-rotate 0.4s linear both;background:radial-gradient(circle at top, rgb(255, 255, 255) 0%, rgb(241, 241, 241) 100%)}.Circle.Selected{-webkit-animation:selected-scaleUp 0.4s cubic-bezier(0.39, 0.575, 0.565, 1) both;animation:selected-scaleUp 0.4s cubic-bezier(0.39, 0.575, 0.565, 1) both;color:#ffffff;background:#9EC258;background:-webkit-radial-gradient(top, #00958f, #004D4A);background:-moz-radial-gradient(top, #00958f, #004D4A);background:radial-gradient(to bottom, #00958f, #004D4A);border:solid 2px #00958f}.Circle.Disabled{-webkit-animation:selected-scaleUp 0.4s cubic-bezier(0.39, 0.575, 0.565, 1) both;animation:selected-scaleUp 0.4s cubic-bezier(0.39, 0.575, 0.565, 1) both;color:#f1f1f1;background:#D4D4D4;border:solid 2px #D4D4D4;cursor:default}.Circle.DisabledSelected{-webkit-animation:selected-scaleUp 0.4s cubic-bezier(0.39, 0.575, 0.565, 1) both;animation:selected-scaleUp 0.4s cubic-bezier(0.39, 0.575, 0.565, 1) both;color:#f1f1f1;background:#9EC258;background:-webkit-radial-gradient(top, #00958f, #004D4A);background:-moz-radial-gradient(top, #00958f, #004D4A);background:radial-gradient(to bottom, #00958f, #004D4A);border:solid 2px #D4D4D4;cursor:default}";
+const LotteryBulletStyle0 = lotteryBulletCss;
 
 const LotteryBullet = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.bulletEvent = index.createEvent(this, "lotteryBulletSelection", 7);
-    /**
-     * Value of the bullet
-     */
-    this.value = '0';
-    /**
-     * Marks if the bullet should be selectable
-     */
-    this.selectable = true;
-    /**
-     * Marks if the bullet should be selected
-     */
-    this.isSelected = false;
-    /**
-     * Client custom styling via string
-     */
-    this.clientStyling = '';
-    /**
-     * Client custom styling via url content
-     */
-    this.clientStylingUrlContent = '';
-    this.limitStylingAppends = false;
-    this.select = () => {
-      if (this.selectable) {
-        this.isSelected = !this.isSelected;
-        this.bulletEvent.emit({
-          value: this.value,
-          selected: this.isSelected
-        });
-      }
-    };
-    this.setClientStyling = () => {
-      let sheet = document.createElement('style');
-      sheet.innerHTML = this.clientStyling;
-      this.stylingContainer.prepend(sheet);
-    };
-    this.setClientStylingURL = () => {
-      let cssFile = document.createElement('style');
-      setTimeout(() => {
-        cssFile.innerHTML = this.clientStylingUrlContent;
-        this.stylingContainer.prepend(cssFile);
-      }, 1);
-    };
-  }
-  componentDidRender() {
-    // start custom styling area
-    if (!this.limitStylingAppends && this.stylingContainer) {
-      if (this.clientStyling)
-        this.setClientStyling();
-      if (this.clientStylingUrlContent)
-        this.setClientStylingURL();
-      this.limitStylingAppends = true;
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.bulletEvent = index.createEvent(this, "lotteryBulletSelection", 7);
+        this.select = () => {
+            if (this.selectable) {
+                this.isSelected = !this.isSelected;
+                this.bulletEvent.emit({
+                    value: this.value,
+                    selected: this.isSelected
+                });
+            }
+        };
+        this.setClientStyling = () => {
+            let sheet = document.createElement('style');
+            sheet.innerHTML = this.clientStyling;
+            this.stylingContainer.prepend(sheet);
+        };
+        this.setClientStylingURL = () => {
+            let cssFile = document.createElement('style');
+            setTimeout(() => {
+                cssFile.innerHTML = this.clientStylingUrlContent;
+                this.stylingContainer.prepend(cssFile);
+            }, 1);
+        };
+        this.value = '0';
+        this.selectable = true;
+        this.isSelected = false;
+        this.clientStyling = '';
+        this.clientStylingUrlContent = '';
+        this.limitStylingAppends = false;
+    }
+    componentDidRender() {
+        // start custom styling area
+        if (!this.limitStylingAppends && this.stylingContainer) {
+            if (this.clientStyling)
+                this.setClientStyling();
+            if (this.clientStylingUrlContent)
+                this.setClientStylingURL();
+            this.limitStylingAppends = true;
+        }
+        // end custom styling area
+    }
+    render() {
+        return (index.h("div", { key: 'af3601684ecf1f39d65fc9461430cba96b9e4b8c', class: 'Circle ' + (this.selectable ? '' : 'Disabled') + (this.isSelected ? 'Selected' : ''), onClick: () => this.select(), ref: el => this.stylingContainer = el }, this.value));
     }
-    // end custom styling area
-  }
-  render() {
-    return (index.h("div", { class: 'Circle ' + (this.selectable ? '' : 'Disabled') + (this.isSelected ? 'Selected' : ''), onClick: () => this.select(), ref: el => this.stylingContainer = el }, this.value));
-  }
 };
-LotteryBullet.style = lotteryBulletCss;
+LotteryBullet.style = LotteryBulletStyle0;
 
 const DEFAULT_LANGUAGE = 'en';
 const SUPPORTED_LANGUAGES = ['ro', 'en', 'hr'];
 const TRANSLATIONS = {
-  en: {
-    drawResultsHeader: 'Last draw results',
-    drawId: 'Draw ID',
-    drawName: 'Game name',
-    drawDate: 'Draw Date',
-    drawNumbersGridDraw: 'Draw numbers Grid ',
-    drawNumbersGridTicket: 'Draw numbers Grid ',
-    ticketResult: 'Ticket result',
-    amountWon: 'Amount won',
-    numberOfDraws: 'Number of draws',
-    multiplier: 'Multiplier:',
-    ticketPurchaseDate: 'Ticket Purchase Date',
-    ticketStatus: 'Ticket Status',
-    ticketId: 'Ticket ID',
-    ticketAmount: 'Ticket Amount',
-    winUpTo: 'Win up to',
-  },
-  ro: {
-    drawResultsHeader: 'Ultimele rezultate extragere',
-    drawId: 'Id extragere',
-    drawName: 'Numele jocului',
-    drawDate: 'Data extragerii',
-    drawNumbersGridDraw: 'Numerele extrase Grid',
-    drawNumbersGridTicket: 'Numerele extrase Grid',
-    ticketResult: 'Rezultatul biletului',
-    amountWon: 'Suma castigata',
-    numberOfDraws: 'Numarul de extrageri',
-    multiplier: 'Multiplicator:',
-    ticketPurchaseDate: 'Data achizitionarii biletului',
-    ticketStatus: 'Statusul biletului',
-    ticketId: 'Id biletul',
-    ticketAmount: 'Valoarea biletului',
-    winUpTo: 'Poti castiga'
-  },
-  fr: {
-    drawResultsHeader: 'Résultats du dernier tirage',
-    drawId: 'ID de tirage',
-    drawName: 'Nom du jeu',
-    drawDate: 'Date du tirage',
-    drawNumbersGridDraw: 'Tirage des numéros Grille',
-    drawNumbersGridTicket: 'Tirage des numéros Grille',
-    ticketResult: 'Résultat du ticket',
-    amountWon: 'Montant gagné',
-    numberOfDraws: 'Nombre de tirages',
-    multiplier: 'Multiplicateur',
-    ticketPurchaseDate: 'Date d\'achat du billet',
-    ticketStatus: 'Statut du ticket',
-    ticketId: 'ID de billets',
-    ticketAmount: 'Montant du billet',
-    winUpTo: 'Gagnez jusqu\'à'
-  },
-  ar: {
-    drawResultsHeader: 'نتائج آخر سحب',
-    drawId: 'معرّف السحب',
-    drawName: 'اسم اللعبة',
-    drawDate: 'تاريخ السحب',
-    drawNumbersGridDraw: 'شبكة أرقام السحب',
-    drawNumbersGridTicket: 'شبكة أرقام السحب',
-    ticketResult: 'نتيجة التذكرة',
-    amountWon: 'المبلغ الذي تم ربحه',
-    numberOfDraws: 'عدد السحوبات',
-    multiplier: 'مضاعف',
-    ticketPurchaseDate: 'تاريخ شراء التذكرة',
-    ticketStatus: 'حالة التذكرة',
-    ticketId: 'معرّف التذكرة',
-    ticketAmount: 'مبلغ التذكرة',
-    winUpTo: 'ربح يصل إلى'
-  },
-  hr: {
-    drawResultsHeader: 'Rezultati posljednjeg izvlačenja',
-    drawId: 'ID izvlačenja',
-    drawName: 'Naziv igre',
-    drawDate: 'Datum izvlačenja',
-    drawNumbersGridDraw: 'Tablica izvučenih brojeva',
-    drawNumbersGridTicket: 'Tablica izvučenih brojeva',
-    ticketResult: 'Rezultat listića',
-    amountWon: 'Osvojeni iznos',
-    numberOfDraws: 'Broj izvlačenja',
-    multiplier: 'Multiplikator',
-    ticketPurchaseDate: 'Datum uplate listića',
-    ticketStatus: 'Status listića',
-    ticketId: 'ID listića',
-    ticketAmount: 'Iznos listića',
-    winUpTo: 'Osvoji do'
-  },
+    en: {
+        drawResultsHeader: 'Last draw results',
+        drawId: 'Draw ID',
+        drawName: 'Game name',
+        drawDate: 'Draw Date',
+        drawNumbersGridDraw: 'Draw numbers Grid ',
+        drawNumbersGridTicket: 'Draw numbers Grid ',
+        ticketResult: 'Ticket result',
+        amountWon: 'Amount won',
+        numberOfDraws: 'Number of draws',
+        multiplier: 'Multiplier:',
+        ticketPurchaseDate: 'Ticket Purchase Date',
+        ticketStatus: 'Ticket Status',
+        ticketId: 'Ticket ID',
+        ticketAmount: 'Ticket Amount',
+        winUpTo: 'Win up to',
+    },
+    ro: {
+        drawResultsHeader: 'Ultimele rezultate extragere',
+        drawId: 'Id extragere',
+        drawName: 'Numele jocului',
+        drawDate: 'Data extragerii',
+        drawNumbersGridDraw: 'Numerele extrase Grid',
+        drawNumbersGridTicket: 'Numerele extrase Grid',
+        ticketResult: 'Rezultatul biletului',
+        amountWon: 'Suma castigata',
+        numberOfDraws: 'Numarul de extrageri',
+        multiplier: 'Multiplicator:',
+        ticketPurchaseDate: 'Data achizitionarii biletului',
+        ticketStatus: 'Statusul biletului',
+        ticketId: 'Id biletul',
+        ticketAmount: 'Valoarea biletului',
+        winUpTo: 'Poti castiga'
+    },
+    fr: {
+        drawResultsHeader: 'Résultats du dernier tirage',
+        drawId: 'ID de tirage',
+        drawName: 'Nom du jeu',
+        drawDate: 'Date du tirage',
+        drawNumbersGridDraw: 'Tirage des numéros Grille',
+        drawNumbersGridTicket: 'Tirage des numéros Grille',
+        ticketResult: 'Résultat du ticket',
+        amountWon: 'Montant gagné',
+        numberOfDraws: 'Nombre de tirages',
+        multiplier: 'Multiplicateur',
+        ticketPurchaseDate: 'Date d\'achat du billet',
+        ticketStatus: 'Statut du ticket',
+        ticketId: 'ID de billets',
+        ticketAmount: 'Montant du billet',
+        winUpTo: 'Gagnez jusqu\'à'
+    },
+    ar: {
+        drawResultsHeader: 'نتائج آخر سحب',
+        drawId: 'معرّف السحب',
+        drawName: 'اسم اللعبة',
+        drawDate: 'تاريخ السحب',
+        drawNumbersGridDraw: 'شبكة أرقام السحب',
+        drawNumbersGridTicket: 'شبكة أرقام السحب',
+        ticketResult: 'نتيجة التذكرة',
+        amountWon: 'المبلغ الذي تم ربحه',
+        numberOfDraws: 'عدد السحوبات',
+        multiplier: 'مضاعف',
+        ticketPurchaseDate: 'تاريخ شراء التذكرة',
+        ticketStatus: 'حالة التذكرة',
+        ticketId: 'معرّف التذكرة',
+        ticketAmount: 'مبلغ التذكرة',
+        winUpTo: 'ربح يصل إلى'
+    },
+    hr: {
+        drawResultsHeader: 'Rezultati posljednjeg izvlačenja',
+        drawId: 'ID izvlačenja',
+        drawName: 'Naziv igre',
+        drawDate: 'Datum izvlačenja',
+        drawNumbersGridDraw: 'Tablica izvučenih brojeva',
+        drawNumbersGridTicket: 'Tablica izvučenih brojeva',
+        ticketResult: 'Rezultat listića',
+        amountWon: 'Osvojeni iznos',
+        numberOfDraws: 'Broj izvlačenja',
+        multiplier: 'Multiplikator',
+        ticketPurchaseDate: 'Datum uplate listića',
+        ticketStatus: 'Status listića',
+        ticketId: 'ID listića',
+        ticketAmount: 'Iznos listića',
+        winUpTo: 'Osvoji do'
+    },
 };
 const translate = (key, customLang) => {
-  const lang = customLang;
-  return TRANSLATIONS[lang !== undefined && SUPPORTED_LANGUAGES.includes(lang) ? lang : DEFAULT_LANGUAGE][key];
+    const lang = customLang;
+    return TRANSLATIONS[lang !== undefined && SUPPORTED_LANGUAGES.includes(lang) ? lang : DEFAULT_LANGUAGE][key];
 };
 
 const lotteryDrawResultsCss = "@import url(\"https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap\");:host{display:block;font-family:\"Roboto\", sans-serif}.TicketInfo{display:flex;flex-direction:row;gap:15px;background-color:#009993;color:#fff;padding:12px;font-size:14px}.DrawResultsArea{margin-top:15px}.DrawResultsArea.TicketDraws .Content{padding:0;border:0}.DrawResultsArea.TicketDraws .DrawResultsBody{padding:0;margin-bottom:5px;border-radius:0;border:0}.DrawResultsSection{max-width:600px;margin:0px auto;border-radius:4px}.DrawResultsHeader{display:flex;justify-content:space-between;padding:10px 20px;background-color:#009993;color:#fff;font-size:14px;border-radius:4px 4px 0 0}.DrawResultsHeader h4{text-transform:uppercase;font-weight:400;margin:0;padding-top:15px}.DrawResultsBody{padding:20px;margin-bottom:5px;border-radius:0 0 4px 4px;border:1px solid #009993}.DrawResultsBody>div{margin:10px 0}.DrawResultsBody .NumberOfDrawsContainer{display:table;width:100%}.DrawNumbersGrid{display:flex;flex-direction:column;gap:5px}.DrawNumbersGrid label{display:block;margin-bottom:7px}.Toggle{cursor:pointer;display:inline-block}.ToggleSwitch{display:inline-block;background:#ccc;border-radius:16px;width:58px;height:24px;position:relative;vertical-align:middle;transition:background 0.25s}.ToggleSwitch:before,.ToggleSwitch:after{content:\"\"}.ToggleSwitch:before{display:block;background:linear-gradient(to bottom, #fff 0%, #eee 100%);border-radius:50%;box-shadow:0 0 0 1px rgba(0, 0, 0, 0.25);width:16px;height:16px;position:absolute;top:4px;left:4px;transition:left 0.25s}.Toggle:hover .ToggleSwitch:before{background:linear-gradient(to bottom, #fff 0%, #fff 100%);box-shadow:0 0 0 1px rgba(0, 0, 0, 0.5)}.ToggleCheckbox:checked+.ToggleSwitch{background:#56c080}.ToggleCheckbox:checked+.ToggleSwitch:before{left:38px}.ToggleCheckbox{position:absolute;visibility:hidden}.Label{position:relative}.DrawTicketsContainer{display:flex;flex-direction:column;margin:20px auto 0}.DrawMultipler{margin-top:15px}.ExpandableBoxes{position:relative;display:flex;flex-direction:column;border:1px solid #ccc;border-radius:5px;background-color:white}.ExpandableBox{border-bottom:1px solid #ccc;transition:height 300ms ease-in-out;overflow:hidden;height:80px}.ExpandableBox:last-child{border-bottom:0}.ExpandableBoxHeader{position:relative;list-style:none;outline:0;cursor:pointer;text-transform:uppercase;transition:color 300ms ease-in-out;margin-bottom:24px;margin-left:5px}.ShowBox>.ExpandableBoxHeader{color:#009993}.ExpandableBoxHeader::-webkit-details-marker{display:none}.ExpandableBoxHeader:before,.ExpandableBoxHeader:after{content:\"\";position:absolute}.ExpandableBoxHeader:before{right:21px;top:50%;height:2px;margin-top:-1px;width:16px;background:#009993}.ExpandableBoxHeader:after{right:28px;top:50%;height:16px;margin-top:-8px;width:2px;margin-left:-1px;background:#009993;transition:all 300ms ease-in-out}.ShowBox .ExpandableBoxHeader:after{opacity:0;transform:translateY(25%)}.ExpandableBoxBody{padding-top:0;font-weight:lighter;margin-left:5px}.ExpandableBox.ShowBox{height:300px}";
+const LotteryDrawResultsStyle0 = lotteryDrawResultsCss;
 
 const LotteryDrawResults = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    /**
-     * Language of the widget
-     */
-    this.language = 'en';
-    /**
-     * Shows only the last draw
-     */
-    this.drawMode = false;
-    /**
-     * The drawID (option)
-     */
-    this.drawId = '';
-    /**
-     * The game name
-     */
-    this.gameName = '';
-    /**
-     * The ticket submission date
-     */
-    this.ticketDate = '';
-    /**
-     * The ticket status
-     */
-    this.ticketStatus = '';
-    /**
-     * The ticket id
-     */
-    this.ticketId = '';
-    /**
-     * The ticket amount
-     */
-    this.ticketAmount = '';
-    /**
-     * The ticket multiplier
-     */
-    this.ticketMultiplier = false;
-    /**
-     * The ticket draw count
-     */
-    this.ticketDrawCount = 0;
-    /**
-     * The ticket winning numbers
-     */
-    this.ticketNumbers = '';
-    /**
-     * The session id
-     */
-    this.sessionId = '';
-    /**
-     * Client custom styling via string
-     */
-    this.clientStyling = '';
-    /**
-     * Client custom styling via url content
-     */
-    this.clientStylingUrlContent = '';
-    /**
-     * Data showing the ticket's draw results details
-     */
-    this.ticketDrawData = '';
-    this.multiplier = 3;
-    this.isLoading = true;
-    this.hasErrors = false;
-    this.errorText = '';
-    this.ticketData = [];
-    this.ticketDataLoaded = false;
-    this.ticketDraws = [];
-    this.toggleDrawer = [false];
-    this.limitStylingAppends = false;
-    this.ticketDrawDetails = [];
-    this.ticketDrawDetailsFlag = true;
-    this.setClientStyling = () => {
-      let sheet = document.createElement('style');
-      sheet.innerHTML = this.clientStyling;
-      this.stylingContainer.prepend(sheet);
-    };
-    this.setClientStylingURL = () => {
-      let cssFile = document.createElement('style');
-      setTimeout(() => {
-        cssFile.innerHTML = this.clientStylingUrlContent;
-        this.stylingContainer.prepend(cssFile);
-      }, 1);
-    };
-  }
-  connectedCallback() {
-    let promises = [];
-    // Split ticket numbers for each grid
-    if (this.ticketNumbers) {
-      this.gridNumbers = JSON.parse(this.ticketNumbers);
-    }
-    if (this.drawId) {
-      promises.push(this.getDrawData());
-    }
-    Promise.all(promises)
-      .then(() => {
-      this.isLoading = false;
-    }).catch((err) => {
-      console.log('error ', err);
-      this.isLoading = false;
-    });
-  }
-  componentWillRender() {
-    if (this.ticketDrawData && this.ticketDrawDetailsFlag) {
-      this.ticketDrawDetails = JSON.parse(this.ticketDrawData);
-      this.ticketDrawDetails.forEach((drawDetail) => {
-        this.getDrawData(drawDetail.drawId).then((drawData) => drawDetail.drawData = drawData);
-      });
-      this.ticketDrawDetailsFlag = false;
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.ticketDrawDetails = [];
+        this.ticketDrawDetailsFlag = true;
+        this.setClientStyling = () => {
+            let sheet = document.createElement('style');
+            sheet.innerHTML = this.clientStyling;
+            this.stylingContainer.prepend(sheet);
+        };
+        this.setClientStylingURL = () => {
+            let cssFile = document.createElement('style');
+            setTimeout(() => {
+                cssFile.innerHTML = this.clientStylingUrlContent;
+                this.stylingContainer.prepend(cssFile);
+            }, 1);
+        };
+        this.endpoint = undefined;
+        this.gameId = undefined;
+        this.language = 'en';
+        this.playerId = undefined;
+        this.drawMode = false;
+        this.drawId = '';
+        this.gameName = '';
+        this.ticketDate = '';
+        this.ticketStatus = '';
+        this.ticketId = '';
+        this.ticketAmount = '';
+        this.ticketMultiplier = false;
+        this.ticketDrawCount = 0;
+        this.ticketNumbers = '';
+        this.sessionId = '';
+        this.clientStyling = '';
+        this.clientStylingUrlContent = '';
+        this.ticketDrawData = '';
+        this.multiplier = 3;
+        this.isLoading = true;
+        this.hasErrors = false;
+        this.errorText = '';
+        this.ticketData = [];
+        this.ticketDataLoaded = false;
+        this.ticketDraws = [];
+        this.toggleDrawer = [false];
+        this.limitStylingAppends = false;
+        this.drawData = undefined;
     }
-  }
-  componentDidRender() {
-    // start custom styling area
-    if (!this.limitStylingAppends && this.stylingContainer) {
-      if (this.clientStyling)
-        this.setClientStyling();
-      if (this.clientStylingUrlContent)
-        this.setClientStylingURL();
-      this.limitStylingAppends = true;
+    connectedCallback() {
+        let promises = [];
+        // Split ticket numbers for each grid
+        if (this.ticketNumbers) {
+            this.gridNumbers = JSON.parse(this.ticketNumbers);
+        }
+        if (this.drawId) {
+            promises.push(this.getDrawData());
+        }
+        Promise.all(promises)
+            .then(() => {
+            this.isLoading = false;
+        }).catch((err) => {
+            console.log('error ', err);
+            this.isLoading = false;
+        });
     }
-    // end custom styling area
-  }
-  getDrawData(drawId) {
-    this.isLoading = true;
-    return new Promise((resolve, reject) => {
-      let url = new URL(`${this.endpoint}/games/${this.gameId}/draws/${drawId ? drawId : this.drawId}`);
-      fetch(url.href)
-        .then((response) => {
-        // @TODO EXCEPTIONS
-        return response.json();
-      })
-        .then((data) => {
-        if (drawId) {
-          resolve(data);
+    componentWillRender() {
+        if (this.ticketDrawData && this.ticketDrawDetailsFlag) {
+            this.ticketDrawDetails = JSON.parse(this.ticketDrawData);
+            this.ticketDrawDetails.forEach((drawDetail) => {
+                this.getDrawData(drawDetail.drawId).then((drawData) => drawDetail.drawData = drawData);
+            });
+            this.ticketDrawDetailsFlag = false;
         }
-        else {
-          this.drawData = data;
-          resolve(true);
+    }
+    componentDidRender() {
+        // start custom styling area
+        if (!this.limitStylingAppends && this.stylingContainer) {
+            if (this.clientStyling)
+                this.setClientStyling();
+            if (this.clientStylingUrlContent)
+                this.setClientStylingURL();
+            this.limitStylingAppends = true;
         }
-        this.isLoading = false;
-      })
-        .catch((err) => {
-        reject(err);
-        this.isLoading = false;
-      });
-    });
-  }
-  drawerToggle(index) {
-    this.toggleDrawer = this.toggleDrawer.map((item, itemIndex) => {
-      if (itemIndex == index) {
-        return !item;
-      }
-      return item;
-    });
-    if (index >= this.toggleDrawer.length) {
-      this.toggleDrawer.push(true);
+        // end custom styling area
     }
-  }
-  render() {
-    if (this.isLoading) {
-      return (index.h("p", null, "Loading, please wait ..."));
+    getDrawData(drawId) {
+        this.isLoading = true;
+        return new Promise((resolve, reject) => {
+            let url = new URL(`${this.endpoint}/games/${this.gameId}/draws/${drawId ? drawId : this.drawId}`);
+            fetch(url.href)
+                .then((response) => {
+                // @TODO EXCEPTIONS
+                return response.json();
+            })
+                .then((data) => {
+                if (drawId) {
+                    resolve(data);
+                }
+                else {
+                    this.drawData = data;
+                    resolve(true);
+                }
+                this.isLoading = false;
+            })
+                .catch((err) => {
+                reject(err);
+                this.isLoading = false;
+            });
+        });
     }
-    else if (this.hasErrors) {
-      index.h("p", null, this.errorText);
+    drawerToggle(index) {
+        this.toggleDrawer = this.toggleDrawer.map((item, itemIndex) => {
+            if (itemIndex == index) {
+                return !item;
+            }
+            return item;
+        });
+        if (index >= this.toggleDrawer.length) {
+            this.toggleDrawer.push(true);
+        }
     }
-    else {
-      return (index.h("section", { class: "DrawResultsSection", ref: el => this.stylingContainer = el }, this.drawMode ?
-        index.h("div", { class: "DrawResultsArea" }, this.drawData &&
-          index.h("div", null, index.h("div", { class: "DrawResultsHeader" }, index.h("span", null, translate('drawId', this.language), ":  ", this.drawData.id), index.h("span", null, translate('drawDate', this.language), ": ", this.drawData.date.slice(0, 10))), index.h("div", { class: "DrawResultsBody" }, index.h("div", { class: "DrawNumbersGrid" }, index.h("p", null, translate('drawNumbersGridDraw', this.language), "0:"), index.h("div", { class: "BulletContainer" }, index.h("lottery-grid", { "selected-numbers": this.drawData.winningNumbers.join(','), "display-selected": true, selectable: false, language: this.language, "grid-type": 'ticket', "client-styling": this.clientStyling, "client-styling-url-content": this.clientStylingUrlContent })), index.h("div", { class: "DrawMultipler" }, index.h("label", { class: "Label" }, translate('multiplier', this.language), " ", this.multiplier))))))
-        :
-          index.h("div", { class: "DrawResultsArea TicketDraws" }, index.h("div", { class: "DrawResultsBody" }, index.h("div", { class: "TicketIdContainer" }, index.h("label", { class: "Label" }, translate('ticketId', this.language), ": ", index.h("span", null, this.ticketId))), index.h("div", { class: "TicketAmountContainer" }, index.h("label", { class: "Label" }, translate('ticketAmount', this.language), " ", index.h("span", null, this.ticketAmount))), index.h("div", { class: "DrawNumbersGrid" }, this.gridNumbers.map((grid, index$1) => index.h("div", null, index.h("label", { class: "Label" }, translate('drawNumbersGridTicket', this.language), " ", String.fromCharCode(index$1 + 65), ":"), index.h("div", { class: "BulletContainer" }, index.h("lottery-grid", { "selected-numbers": grid.join(','), selectable: false, "display-selected": true, language: this.language, "grid-type": 'ticket', "client-styling": this.clientStyling, "client-styling-url-content": this.clientStylingUrlContent }))))), index.h("div", { class: "DrawMultipler" }, index.h("label", { class: "Label" }, translate('multiplier', this.language), " ", JSON.stringify(this.ticketMultiplier))), index.h("div", { class: "NumberOfDrawsContainer" }, index.h("label", { class: "Label" }, translate('numberOfDraws', this.language), ": ", this.ticketDrawCount), index.h("div", { class: "DrawTicketsContainer" }, this.ticketDrawDetails && this.ticketDrawDetails.length > 0 &&
-            index.h("div", { class: "ExpandableBoxes" }, this.ticketDrawDetails.map((drawDetail, index$1) => {
-              var _a, _b, _c, _d, _e;
-              return index.h("div", { class: { 'ExpandableBox': true, 'ShowBox': this.toggleDrawer[index$1] }, onClick: () => this.drawerToggle(index$1) }, index.h("div", { class: "ExpandableBoxHeader" }, index.h("div", { class: "TicketResultContainer" }, index.h("p", null, translate('ticketResult', this.language), ": ", drawDetail.state)), drawDetail.state == 'won' &&
-                index.h("div", { class: "AmountWonContainer" }, index.h("p", null, translate('amountWon', this.language), ": ", Number(drawDetail.amount).toLocaleString('en'), " ", drawDetail.currency)), drawDetail.state == 'lost' &&
-                index.h("div", { class: "DrawIdContainer" }, index.h("p", null, translate('drawId', this.language), ": ", drawDetail.drawId))), index.h("div", { class: "ExpandableBoxBody" }, index.h("div", { class: "DrawIdContainer" }, index.h("p", null, translate('drawId', this.language), ": ", drawDetail.drawId)), index.h("div", { class: "DrawDateContainer" }, index.h("p", null, translate('drawDate', this.language), ": ", (_a = drawDetail.drawData) === null || _a === void 0 ? void 0 :
-                _a.date.slice(0, 10), " | ", (_b = drawDetail.drawData) === null || _b === void 0 ? void 0 :
-                _b.date.slice(11, 19))), index.h("div", { class: "DrawNumbersGrid" }, drawDetail.drawData &&
-                index.h("div", { class: 'BulletContainer' }, index.h("label", { class: "Label" }, translate('drawNumbersGridDraw', this.language), " ", String.fromCharCode(index$1 + 10), ":"), index.h("lottery-grid", { "selected-numbers": (_d = (_c = drawDetail.drawData) === null || _c === void 0 ? void 0 : _c.winningNumbers) === null || _d === void 0 ? void 0 : _d.join(','), selectable: false, "display-selected": true, language: this.language, "grid-type": 'ticket', "client-styling": this.clientStyling, "client-styling-url-content": this.clientStylingUrlContent }))), index.h("div", { class: "DrawMultipler" }, index.h("label", { class: "Label" }, translate('multiplier', this.language), " ", (_e = drawDetail.drawData) === null || _e === void 0 ? void 0 :
-                _e.multiplier))));
-            }))))))));
+    render() {
+        if (this.isLoading) {
+            return (index.h("p", null, "Loading, please wait ..."));
+        }
+        else if (this.hasErrors) {
+            index.h("p", null, this.errorText);
+        }
+        else {
+            return (index.h("section", { class: "DrawResultsSection", ref: el => this.stylingContainer = el }, this.drawMode ?
+                index.h("div", { class: "DrawResultsArea" }, this.drawData &&
+                    index.h("div", null, index.h("div", { class: "DrawResultsHeader" }, index.h("span", null, translate('drawId', this.language), ":  ", this.drawData.id), index.h("span", null, translate('drawDate', this.language), ": ", this.drawData.date.slice(0, 10))), index.h("div", { class: "DrawResultsBody" }, index.h("div", { class: "DrawNumbersGrid" }, index.h("p", null, translate('drawNumbersGridDraw', this.language), "0:"), index.h("div", { class: "BulletContainer" }, index.h("lottery-grid", { "selected-numbers": this.drawData.winningNumbers.join(','), "display-selected": true, selectable: false, language: this.language, "grid-type": 'ticket', "client-styling": this.clientStyling, "client-styling-url-content": this.clientStylingUrlContent })), index.h("div", { class: "DrawMultipler" }, index.h("label", { class: "Label" }, translate('multiplier', this.language), " ", this.multiplier))))))
+                :
+                    index.h("div", { class: "DrawResultsArea TicketDraws" }, index.h("div", { class: "DrawResultsBody" }, index.h("div", { class: "TicketIdContainer" }, index.h("label", { class: "Label" }, translate('ticketId', this.language), ": ", index.h("span", null, this.ticketId))), index.h("div", { class: "TicketAmountContainer" }, index.h("label", { class: "Label" }, translate('ticketAmount', this.language), " ", index.h("span", null, this.ticketAmount))), index.h("div", { class: "DrawNumbersGrid" }, this.gridNumbers.map((grid, index$1) => index.h("div", null, index.h("label", { class: "Label" }, translate('drawNumbersGridTicket', this.language), " ", String.fromCharCode(index$1 + 65), ":"), index.h("div", { class: "BulletContainer" }, index.h("lottery-grid", { "selected-numbers": grid.join(','), selectable: false, "display-selected": true, language: this.language, "grid-type": 'ticket', "client-styling": this.clientStyling, "client-styling-url-content": this.clientStylingUrlContent }))))), index.h("div", { class: "DrawMultipler" }, index.h("label", { class: "Label" }, translate('multiplier', this.language), " ", JSON.stringify(this.ticketMultiplier))), index.h("div", { class: "NumberOfDrawsContainer" }, index.h("label", { class: "Label" }, translate('numberOfDraws', this.language), ": ", this.ticketDrawCount), index.h("div", { class: "DrawTicketsContainer" }, this.ticketDrawDetails && this.ticketDrawDetails.length > 0 &&
+                        index.h("div", { class: "ExpandableBoxes" }, this.ticketDrawDetails.map((drawDetail, index$1) => {
+                            var _a, _b, _c, _d, _e;
+                            return index.h("div", { class: { 'ExpandableBox': true, 'ShowBox': this.toggleDrawer[index$1] }, onClick: () => this.drawerToggle(index$1) }, index.h("div", { class: "ExpandableBoxHeader" }, index.h("div", { class: "TicketResultContainer" }, index.h("p", null, translate('ticketResult', this.language), ": ", drawDetail.state)), drawDetail.state == 'won' &&
+                                index.h("div", { class: "AmountWonContainer" }, index.h("p", null, translate('amountWon', this.language), ": ", Number(drawDetail.amount).toLocaleString('en'), " ", drawDetail.currency)), drawDetail.state == 'lost' &&
+                                index.h("div", { class: "DrawIdContainer" }, index.h("p", null, translate('drawId', this.language), ": ", drawDetail.drawId))), index.h("div", { class: "ExpandableBoxBody" }, index.h("div", { class: "DrawIdContainer" }, index.h("p", null, translate('drawId', this.language), ": ", drawDetail.drawId)), index.h("div", { class: "DrawDateContainer" }, index.h("p", null, translate('drawDate', this.language), ": ", (_a = drawDetail.drawData) === null || _a === void 0 ? void 0 :
+                                _a.date.slice(0, 10), " | ", (_b = drawDetail.drawData) === null || _b === void 0 ? void 0 :
+                                _b.date.slice(11, 19))), index.h("div", { class: "DrawNumbersGrid" }, drawDetail.drawData &&
+                                index.h("div", { class: 'BulletContainer' }, index.h("label", { class: "Label" }, translate('drawNumbersGridDraw', this.language), " ", String.fromCharCode(index$1 + 10), ":"), index.h("lottery-grid", { "selected-numbers": (_d = (_c = drawDetail.drawData) === null || _c === void 0 ? void 0 : _c.winningNumbers) === null || _d === void 0 ? void 0 : _d.join(','), selectable: false, "display-selected": true, language: this.language, "grid-type": 'ticket', "client-styling": this.clientStyling, "client-styling-url-content": this.clientStylingUrlContent }))), index.h("div", { class: "DrawMultipler" }, index.h("label", { class: "Label" }, translate('multiplier', this.language), " ", (_e = drawDetail.drawData) === null || _e === void 0 ? void 0 :
+                                _e.multiplier))));
+                        }))))))));
+        }
     }
-  }
 };
-LotteryDrawResults.style = lotteryDrawResultsCss;
+LotteryDrawResults.style = LotteryDrawResultsStyle0;
 
 const lotteryGridCss = "@import url(\"https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap\");:host{display:block;font-family:\"Roboto\", sans-serif}.GridContainer{display:flex;flex-direction:column;max-width:1200px}.Grid{margin-top:10px 0 10px 0;display:flex;flex-direction:row;flex-wrap:wrap;gap:20px}.Grid.TicketGrid{gap:5px}";
+const LotteryGridStyle0 = lotteryGridCss;
 
 const LotteryGrid = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.gridFilledEvent = index.createEvent(this, "gridFilled", 7);
-    this.gridDirtyEvent = index.createEvent(this, "gridDirty", 7);
-    /**
-     * Number of bullets of grid
-     */
-    this.totalNumbers = 0;
-    /**
-     * Number of maximum bullets that can be selected
-     */
-    this.maximumAllowed = 0;
-    /**
-     * Minimum allowed of bullets
-     */
-    this.minimumAllowed = 1;
-    /**
-     * Allows the user to select numbers on the grid
-     */
-    this.selectable = true;
-    /**
-     * Numbers that should be showed as selected on the grid (as a string of those numbers e.g. '1,2,3,4,5,6')
-     */
-    this.selectedNumbers = '';
-    /**
-     * Show only selected numbers
-     */
-    this.displaySelected = false;
-    /**
-     * Language
-     */
-    this.language = 'en';
-    /**
-     * Personalize grid for ticket
-     */
-    this.gridType = '';
-    /**
-     * Client custom styling via string
-     */
-    this.clientStyling = '';
-    /**
-     * Client custom styling via url content
-     */
-    this.clientStylingUrlContent = '';
-    this.numbers = [];
-    this.limitStylingAppends = false;
-    this.selectedCounter = 0;
-    this.setClientStyling = () => {
-      let sheet = document.createElement('style');
-      sheet.innerHTML = this.clientStyling;
-      this.stylingContainer.prepend(sheet);
-    };
-    this.setClientStylingURL = () => {
-      let cssFile = document.createElement('style');
-      setTimeout(() => {
-        cssFile.innerHTML = this.clientStylingUrlContent;
-        this.stylingContainer.prepend(cssFile);
-      }, 1);
-    };
-  }
-  connectedCallback() {
-    let selected = [];
-    if (this.selectedNumbers.length > 0) {
-      selected = this.selectedNumbers.split(',');
-      this.selectedCounter = selected.length;
-    }
-    if (this.displaySelected) {
-      selected.forEach((item) => {
-        this.numbers.push({
-          number: item,
-          selected: true,
-          selectable: this.selectable
-        });
-      });
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.gridFilledEvent = index.createEvent(this, "gridFilled", 7);
+        this.gridDirtyEvent = index.createEvent(this, "gridDirty", 7);
+        this.selectedCounter = 0;
+        this.setClientStyling = () => {
+            let sheet = document.createElement('style');
+            sheet.innerHTML = this.clientStyling;
+            this.stylingContainer.prepend(sheet);
+        };
+        this.setClientStylingURL = () => {
+            let cssFile = document.createElement('style');
+            setTimeout(() => {
+                cssFile.innerHTML = this.clientStylingUrlContent;
+                this.stylingContainer.prepend(cssFile);
+            }, 1);
+        };
+        this.ticketId = undefined;
+        this.totalNumbers = 0;
+        this.gameId = undefined;
+        this.maximumAllowed = 0;
+        this.minimumAllowed = 1;
+        this.selectable = true;
+        this.selectedNumbers = '';
+        this.displaySelected = false;
+        this.language = 'en';
+        this.gridIndex = undefined;
+        this.gridType = '';
+        this.clientStyling = '';
+        this.clientStylingUrlContent = '';
+        this.numbers = [];
+        this.limitStylingAppends = false;
     }
-    else {
-      [...Array(this.totalNumbers).keys()]
-        .map(number => (number + 1).toString())
-        .forEach((number) => {
-        this.numbers.push({
-          number,
-          selected: selected.indexOf(number) >= 0 ? true : false,
-          selectable: this.selectedCounter == this.maximumAllowed ? false : this.selectable
-        });
-      });
+    connectedCallback() {
+        let selected = [];
+        if (this.selectedNumbers.length > 0) {
+            selected = this.selectedNumbers.split(',');
+            this.selectedCounter = selected.length;
+        }
+        if (this.displaySelected) {
+            selected.forEach((item) => {
+                this.numbers.push({
+                    number: item,
+                    selected: true,
+                    selectable: this.selectable
+                });
+            });
+        }
+        else {
+            [...Array(this.totalNumbers).keys()]
+                .map(number => (number + 1).toString())
+                .forEach((number) => {
+                this.numbers.push({
+                    number,
+                    selected: selected.indexOf(number) >= 0 ? true : false,
+                    selectable: this.selectedCounter == this.maximumAllowed ? false : this.selectable
+                });
+            });
+        }
     }
-  }
-  componentDidRender() {
-    // start custom styling area
-    if (!this.limitStylingAppends && this.stylingContainer) {
-      if (this.clientStyling)
-        this.setClientStyling();
-      if (this.clientStylingUrlContent)
-        this.setClientStylingURL();
-      this.limitStylingAppends = true;
+    componentDidRender() {
+        // start custom styling area
+        if (!this.limitStylingAppends && this.stylingContainer) {
+            if (this.clientStyling)
+                this.setClientStyling();
+            if (this.clientStylingUrlContent)
+                this.setClientStylingURL();
+            this.limitStylingAppends = true;
+        }
+        // end custom styling area
     }
-    // end custom styling area
-  }
-  // wrote this because the classic .sort(() => 0.5 - Math.random()) method yielded low entropy shuffles for some reason on certain devices
-  shuffleArray(array) {
-    const result = [];
-    while (array.length > 0) {
-      const randomIndex = Math.floor(Math.random() * (array.length));
-      result.push(array.splice(randomIndex, 1)[0]);
+    // wrote this because the classic .sort(() => 0.5 - Math.random()) method yielded low entropy shuffles for some reason on certain devices
+    shuffleArray(array) {
+        const result = [];
+        while (array.length > 0) {
+            const randomIndex = Math.floor(Math.random() * (array.length));
+            result.push(array.splice(randomIndex, 1)[0]);
+        }
+        return result;
     }
-    return result;
-  }
-  lotteryBulletSelectionHandler(event) {
-    this.numbers = this.numbers.map((item) => {
-      if (item.number == event.detail.value) {
-        return {
-          number: item.number,
-          selected: event.detail.selected,
-          selectable: item.selectable
-        };
-      }
-      return {
-        number: item.number,
-        selected: item.selected,
-        selectable: item.selectable
-      };
-    });
-    if (event.detail.selected) {
-      this.selectedCounter += 1;
-      if (this.selectedCounter == this.maximumAllowed) {
+    lotteryBulletSelectionHandler(event) {
         this.numbers = this.numbers.map((item) => {
-          return {
-            number: item.number,
-            selected: item.selected,
-            selectable: item.selected ? true : false
-          };
+            if (item.number == event.detail.value) {
+                return {
+                    number: item.number,
+                    selected: event.detail.selected,
+                    selectable: item.selectable
+                };
+            }
+            return {
+                number: item.number,
+                selected: item.selected,
+                selectable: item.selectable
+            };
         });
-        this.gridFilledEvent.emit({
-          id: this.ticketId,
-          index: this.gridIndex,
-          selectedNumbers: this.numbers.filter((item) => item.selected).map((item) => item.number)
-        });
-      }
+        if (event.detail.selected) {
+            this.selectedCounter += 1;
+            if (this.selectedCounter == this.maximumAllowed) {
+                this.numbers = this.numbers.map((item) => {
+                    return {
+                        number: item.number,
+                        selected: item.selected,
+                        selectable: item.selected ? true : false
+                    };
+                });
+                this.gridFilledEvent.emit({
+                    id: this.ticketId,
+                    index: this.gridIndex,
+                    selectedNumbers: this.numbers.filter((item) => item.selected).map((item) => item.number)
+                });
+            }
+        }
+        else {
+            if (this.selectedCounter == this.maximumAllowed) {
+                this.numbers = this.numbers.map((item) => {
+                    return {
+                        number: item.number,
+                        selected: item.selected,
+                        selectable: true
+                    };
+                });
+                this.gridDirtyEvent.emit({
+                    id: this.ticketId,
+                    index: this.gridIndex,
+                    selectedNumbers: this.numbers.filter((item) => item.selected).map((item) => item.number)
+                });
+            }
+            this.selectedCounter -= 1;
+        }
     }
-    else {
-      if (this.selectedCounter == this.maximumAllowed) {
-        this.numbers = this.numbers.map((item) => {
-          return {
-            number: item.number,
-            selected: item.selected,
-            selectable: true
-          };
-        });
-        this.gridDirtyEvent.emit({
-          id: this.ticketId,
-          index: this.gridIndex,
-          selectedNumbers: this.numbers.filter((item) => item.selected).map((item) => item.number)
-        });
-      }
-      this.selectedCounter -= 1;
+    async resetSelectionHandler(event) {
+        if (event.detail && event.detail == this.ticketId) {
+            this.selectedCounter = 0;
+            this.numbers = this.numbers.map((item) => {
+                return {
+                    number: item.number,
+                    selected: false,
+                    selectable: this.selectable
+                };
+            });
+            this.gridDirtyEvent.emit({
+                id: this.ticketId,
+                index: this.gridIndex,
+                selectedNumbers: this.numbers.filter((item) => item.selected).map((item) => item.number)
+            });
+        }
     }
-  }
-  async resetSelectionHandler(event) {
-    if (event.detail && event.detail == this.ticketId) {
-      this.selectedCounter = 0;
-      this.numbers = this.numbers.map((item) => {
-        return {
-          number: item.number,
-          selected: false,
-          selectable: this.selectable
-        };
-      });
-      this.gridDirtyEvent.emit({
-        id: this.ticketId,
-        index: this.gridIndex,
-        selectedNumbers: this.numbers.filter((item) => item.selected).map((item) => item.number)
-      });
+    async autoSelectionHandler(event) {
+        if (event.detail && event.detail == this.ticketId) {
+            this.resetSelectionHandler(event);
+            let array = [...Array(this.totalNumbers).keys()]
+                .map(number => number + 1);
+            array = this.shuffleArray(array);
+            array = array.slice(0, this.minimumAllowed);
+            this.numbers = this.numbers.map((item) => {
+                return {
+                    number: item.number,
+                    selected: array.indexOf(parseInt(item.number, 10)) >= 0 ? true : false,
+                    selectable: array.indexOf(parseInt(item.number, 10)) >= 0 ? true : false,
+                };
+            });
+            this.gridFilledEvent.emit({
+                id: this.ticketId,
+                index: this.gridIndex,
+                selectedNumbers: this.numbers.filter((item) => item.selected).map((item) => item.number)
+            });
+            this.selectedCounter = this.maximumAllowed;
+        }
     }
-  }
-  async autoSelectionHandler(event) {
-    if (event.detail && event.detail == this.ticketId) {
-      this.resetSelectionHandler(event);
-      let array = [...Array(this.totalNumbers).keys()]
-        .map(number => number + 1);
-      array = this.shuffleArray(array);
-      array = array.slice(0, this.minimumAllowed);
-      this.numbers = this.numbers.map((item) => {
-        return {
-          number: item.number,
-          selected: array.indexOf(parseInt(item.number, 10)) >= 0 ? true : false,
-          selectable: array.indexOf(parseInt(item.number, 10)) >= 0 ? true : false,
-        };
-      });
-      this.gridFilledEvent.emit({
-        id: this.ticketId,
-        index: this.gridIndex,
-        selectedNumbers: this.numbers.filter((item) => item.selected).map((item) => item.number)
-      });
-      this.selectedCounter = this.maximumAllowed;
+    render() {
+        return (index.h("div", { key: '54b9187146b5d2625fd5ce7f53f38abf091cd943', class: "GridContainer", ref: el => this.stylingContainer = el }, index.h("div", { key: 'e7e8570557ebaa78edf881cdbc1ed720028cdf6e', class: this.gridType === 'ticket' ? 'Grid TicketGrid' : 'Grid' }, this.numbers.map((item) => index.h("div", null, index.h("lottery-bullet", { value: item.number, selectable: item.selectable, "is-selected": item.selected, "client-styling": this.clientStyling, "client-styling-url-content": this.clientStylingUrlContent }))))));
     }
-  }
-  render() {
-    return (index.h("div", { class: "GridContainer", ref: el => this.stylingContainer = el }, index.h("div", { class: this.gridType === 'ticket' ? 'Grid TicketGrid' : 'Grid' }, this.numbers.map((item) => index.h("div", null, index.h("lottery-bullet", { value: item.number, selectable: item.selectable, "is-selected": item.selected, "client-styling": this.clientStyling, "client-styling-url-content": this.clientStylingUrlContent }))))));
-  }
 };
-LotteryGrid.style = lotteryGridCss;
+LotteryGrid.style = LotteryGridStyle0;
 
 exports.lottery_bullet = LotteryBullet;
 exports.lottery_draw_results = LotteryDrawResults;