@everymatrix/lottery-game-page 0.1.2 → 0.1.4

package/dist/components/helper-tab2.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
 
-const helperTabCss = ":host{display:block}";
+const helperTabCss = ":host{display:block}.TabContent{font-size:14px;color:#000;font-weight:normal}";
 
 const HelperTab = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -11,24 +11,28 @@ const HelperTab = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
      * Selected index
      */
     this.selectedIndex = 0;
+    this.tabContent = '';
   }
-  /**
- * Endpoing for CMS
- */
   connectedCallback() {
     /**
      * fetch(cmsEndpoint + / + / + selectedIndex)
      */
   }
   render() {
-    return [
-      h("div", null, "Reference site about Lorem Ipsum, giving information on its origins, as well as a random Lipsum generator.", this.selectedIndex + 1)
-    ];
+    this.tabContent = h("div", { class: "TabContent" }, "Each play includes one set of numbers from 1 to 21 with a selectable number of 8 and a second, 4-digit set of numbers, with a minimum selection of 1. Draws are held every 5 minutes and the winnings are automatically credited to your account.");
+    if (this.selectedIndex + 1 == 2) {
+      this.tabContent = h("div", { class: "TabContent" }, h("ol", null, h("li", null, "Register or Login"), h("li", null, "Buy tickets. Select 'Buy Tickets' to pick your numbers. Want us to automatically generate random numbers for you? Choose \u201CI feel lucky\u201D."), h("li", null, "Review and Complete your purchase. Once you've chosen your total number of plays, and confirmed your number of selections, review your ticket details and complete your purchase!")));
+    }
+    else if (this.selectedIndex + 1 == 3) {
+      this.tabContent = h("div", { class: "TabContent" }, h("ul", null, h("li", null, "What are my odds of winning?"), h("li", null, "How can I find out if I\u2019ve won a draw game?"), h("li", null, "How do I claim my prize?")));
+    }
+    return (this.tabContent);
   }
   static get style() { return helperTabCss; }
 }, [1, "helper-tab", {
     "selectedIndex": [2, "selected-index"],
-    "cmsEndpoint": [1, "cms-endpoint"]
+    "cmsEndpoint": [1, "cms-endpoint"],
+    "tabContent": [32]
   }]);
 function defineCustomElement() {
   if (typeof customElements === "undefined") {

package/dist/components/helper-tabs2.js

@@ -23,7 +23,7 @@ const HelperTabs = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     /**
      * Tabs details
      */
-    this.tabs = [{ label: 'Draw Details' }, { label: 'Winnings' }, { label: 'How to Play' }, { label: 'Game Odds' }, { label: 'FAQs' }];
+    this.tabs = [{ label: 'How to Play' }, { label: 'About' }, { label: 'FAQs' }];
   }
   connectedCallback() {
   }

package/dist/components/lottery-bullet2.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
 
-const lotteryBulletCss = "@import url(\"https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap\");:host{display:block;font-family:\"Roboto\", sans-serif}.Circle{cursor:pointer;color:#000000;display:block;background:#FFF;border:solid 2px #00958f;height:20px;width:20px;border-radius:50%;margin:0;display:flex;align-items:center;justify-content:center;user-select:none;font-size:12px;font-weight:600;position:relative}.Circle:hover{background:#aee4e2}.Circle.Selected{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{color:#707070;background:#D4D4D4;border:solid 2px #707070;cursor:default}.Circle.DisabledSelected{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 #707070;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, 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 LotteryBullet = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {

package/dist/components/lottery-draw-results-history2.js

@@ -16,17 +16,23 @@ const TRANSLATIONS = {
     viewAllResults: 'View All',
     lastFiveDraws: 'Last 5 Draws',
     lastTenDraws: 'Last 10 Draws',
-    lastFifteenDraws: 'Last 15 Draws'
+    lastFifteenDraws: 'Last 15 Draws',
+    allDrawResultsHistory: 'All Draw Results History',
+    noResults: 'No results',
+    fetchingResults: 'Fetching results'
   },
   ro: {
-    drawResultsHeader: 'Draw results history',
-    drawId: 'Draw ID',
-    drawDate: 'Draw Date',
-    drawNumbersGridA: 'Draw numbers Grid A',
-    viewAllResults: 'View All',
-    lastFiveDraws: 'Last 5 Draws',
-    lastTenDraws: 'Last 10 Draws',
-    lastFifteenDraws: 'Last 15 Draws'
+    drawResultsHeader: 'Istoricul extragerilor',
+    drawId: 'ID-ul extragerii',
+    drawDate: 'Data extragerii',
+    drawNumbersGridA: 'Numerele extrase Grid A',
+    viewAllResults: 'Vezi toate rezultatele',
+    lastFiveDraws: 'Ultimile 5 extrageri',
+    lastTenDraws: 'Ultimile 10 extrageri',
+    lastFifteenDraws: 'Ultimile 15 extrageri',
+    allDrawResultsHistory: 'Istoricul tuturor extragerilor',
+    noResults: 'Niciun rezultat',
+    fetchingResults: 'Se obtin rezultatele'
   },
 };
 const translate = (key, customLang) => {
@@ -34,7 +40,7 @@ const translate = (key, customLang) => {
   return TRANSLATIONS[lang !== undefined && SUPPORTED_LANGUAGES.includes(lang) ? lang : DEFAULT_LANGUAGE][key];
 };
 
-const lotteryDrawResultsHistoryCss = "@import url(\"https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap\");:host{display:block;font-family:\"Roboto\", sans-serif}.GridBanner{background-color:#009993;background-repeat:no-repeat;background-position:center;color:#111;padding:0 20px 30px}.GridBanner .BannerButtonsWrapper{display:flex;justify-content:space-between;padding-top:16px}.GridBanner .BannerButtonsWrapper .BannerBackButton,.GridBanner .BannerButtonsWrapper .BannerLobbyButton{background:#fff;border:1px solid #009993;border-radius:4px;padding:7px 15px;font-size:12px;text-transform:uppercase;width:80px}.GridBanner .HistoryGridBannerArea{padding-top:30px}.HistoryGridBannerArea{display:flex;flex-direction:column;align-items:center}.BannerText{font-size:14px;font-weight:300}.BannerCountdown{font-size:22px;display:flex;gap:20px}.DrawResultsSection{max-width:500px;margin:0 auto}.HistoryGridWrapper{padding:0 15px}.HistoryGrid{border:1px solid #009993;border-radius:5px}.DrawResultsHeader{color:#009993;padding:15px;text-align:center}.DrawResultsHeader h4{text-transform:uppercase;font-size:16px;font-weight:600;margin:0}.DrawNumbersGrid{padding:10px 50px}.DrawNumbersGrid p{margin:0 0 10px 0;font-size:14px}.BulletContainer{margin-bottom:20px}.DrawResultTop{background-color:#009993;padding:10px;text-align:center;color:#fff;padding:0 50px;display:flex;justify-content:center;gap:40px}.ViewAllResults{display:block;padding:10px 40px;margin:40px auto;border:0;border-radius:5px;background-color:#009993;color:#fff;outline:none}.FilterSection{display:flex;justify-content:space-between;padding:10px 0 25px}.FilterSection .FilterResultsContainer{display:flex;gap:5px}.FilterSection .QuickFilterButton{cursor:pointer;width:max-content;border-radius:4px;border:1px solid #00958f;background:#FFF;color:#000;font-size:12px;transition:all 0.2s linear;text-align:center;letter-spacing:0}.FilterSection .QuickFilterButton:hover{background:#F1F1F1}.FilterSection helper-filters{margin-left:auto}";
+const lotteryDrawResultsHistoryCss = "@import url(\"https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap\");:host{display:block;font-family:\"Roboto\", sans-serif}.GridBanner{background-color:#009993;background-repeat:no-repeat;background-position:center;color:#111;padding:0 20px 30px}.GridBanner .BannerButtonsWrapper{display:flex;justify-content:space-between;padding-top:16px}.GridBanner .BannerButtonsWrapper .BannerBackButton,.GridBanner .BannerButtonsWrapper .BannerLobbyButton{background:#fff;border:1px solid #009993;border-radius:4px;padding:7px 15px;font-size:12px;text-transform:uppercase;width:80px}.GridBanner .HistoryGridBannerArea{padding-top:30px}.HistoryGridBannerArea{display:flex;flex-direction:column;align-items:center}.BannerText{font-size:14px;font-weight:300}.BannerCountdown{font-size:22px;display:flex;gap:20px}.DrawResultsSection{max-width:600px;margin:0px auto}.HistoryGrid{border-radius:5px}.DrawResultsHeader{color:#009993;padding:25px 0 10px 0;text-align:center;border-radius:4px 4px 0 0}.DrawResultsHeader h4{text-transform:uppercase;font-size:16px;font-weight:600;margin:0}.DrawNumbersGrid{padding:10px 50px}.DrawNumbersGrid p{margin:0 0 10px 0;font-size:14px}.BulletContainer{margin-bottom:20px}.DrawResultTop{background-color:#009993;padding:10px;text-align:center;color:#fff;padding:0 50px;display:flex;justify-content:center;gap:40px}.ViewAllResults{display:block;padding:10px 40px;margin:40px auto;border:0;border-radius:5px;background-color:#009993;color:#fff;outline:none}.FilterSection{display:flex;justify-content:space-between;padding:25px 15px 10px;gap:10px;margin:0px 15px}.FilterSection .FilterResultsContainer{display:flex;gap:5px;overflow-x:auto}.FilterSection .QuickFilterButton{cursor:pointer;width:max-content;border-radius:4px;border:1px solid #00958f;background:#FFF;color:#000;font-size:12px;transition:all 0.2s linear;text-align:center;letter-spacing:0}.FilterSection .QuickFilterButton:hover{background:#F1F1F1}.FilterSection helper-filters{margin-left:auto}";
 
 const LotteryDrawResultsHistory = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -53,8 +59,16 @@ const LotteryDrawResultsHistory = /*@__PURE__*/ proxyCustomElement(class extends
     this.displayAllDrawsResults = true;
     this.showQuickFilters = true;
     this.winningDataSetsData = [''];
-    this.getDrawsData = () => {
-      let url = new URL(`${this.endpoint}/games/${this.gameId}`);
+    this.dateFiltersFrom = '';
+    this.dateFiltersTo = '';
+    this.isLoading = false;
+    this.noResults = false;
+    this.getDrawsData = (filterbydate = false) => {
+      let url = filterbydate ? new URL(`${this.endpoint}/games/${this.gameId}/draws`) : new URL(`${this.endpoint}/games/${this.gameId}`);
+      if (this.dateFiltersFrom)
+        url.searchParams.append('from', this.dateFiltersFrom);
+      if (this.dateFiltersTo)
+        url.searchParams.append('to', this.dateFiltersTo);
       fetch(url.href)
         .then((res) => {
         if (res.status >= 300) {
@@ -63,11 +77,21 @@ const LotteryDrawResultsHistory = /*@__PURE__*/ proxyCustomElement(class extends
         return res.json();
       })
         .then((data) => {
-        console.log("getDrawsData ", data);
-        // filter out incomplete data sets for draws
-        this.winningDataSetsData = data.draws.filter(draw => draw.winningNumbers);
-        this.drawData = this.winningDataSetsData;
-        console.log('this.drawData', this.drawData);
+        this.isLoading = false;
+        if (filterbydate) {
+          this.winningDataSetsData = data.items.filter(draw => draw.winningNumbers);
+        }
+        else {
+          this.winningDataSetsData = data.draws.filter(draw => draw.winningNumbers);
+        }
+        this.drawData = this.winningDataSetsData.map((item) => item);
+      })
+        .catch((err) => {
+        console.log('err', err);
+      })
+        .finally(() => {
+        this.isLoading = false;
+        this.noResults = this.drawData.filter(draw => draw.winningNumbers).length == 0 ? true : false;
       });
     };
     this.filterResults = (resultsNumber) => {
@@ -88,8 +112,8 @@ const LotteryDrawResultsHistory = /*@__PURE__*/ proxyCustomElement(class extends
         return response.json();
       })
         .then((data) => {
-        console.log("getDrawResults ", data);
-        this.drawData = [data];
+        this.drawData = [data].map((item) => item);
+        this.isLoading = false;
       });
     };
     this.viewAllResults = () => {
@@ -99,27 +123,40 @@ const LotteryDrawResultsHistory = /*@__PURE__*/ proxyCustomElement(class extends
     };
   }
   // Filters events
+  filtersDrawHandler(event) {
+    this.isLoading = true;
+    this.showQuickFilters = false;
+    this.getDrawResults(event.detail.ticketDrawId);
+  }
   filtersHandler(event) {
-    var _a;
-    this.getDrawResults((_a = event.detail) === null || _a === void 0 ? void 0 : _a.drawTicketId);
     this.showQuickFilters = false;
+    this.dateFiltersFrom = event.detail.filterFromCalendar;
+    this.dateFiltersTo = event.detail.filterToCalendar;
+    this.isLoading = true;
+    this.getDrawsData(true);
   }
   clearFiltersHandler() {
     this.drawData = this.winningDataSetsData;
     this.showQuickFilters = true;
+    this.dateFiltersFrom = '';
+    this.dateFiltersTo = '';
+    this.isLoading = true;
+    this.getDrawsData(false);
   }
   connectedCallback() {
-    this.getDrawsData();
+    if (this.showQuickFilters)
+      this.getDrawsData(false);
   }
   disconnectedCallback() {
     clearInterval(this.interval);
   }
   render() {
     let gridHeader = h("div", { class: "DrawResultsHeader" }, this.displayAllDrawsResults ? h("h4", null, translate('drawResultsHeader', this.language)) :
-      h("div", { class: "DrawResultsHeaderContent" }, h("div", { class: "FilterSection" }, this.showQuickFilters &&
-        h("div", { class: "FilterResultsContainer" }, h("button", { class: "QuickFilterButton", onClick: () => this.filterResults(5) }, translate('lastFiveDraws', this.language)), h("button", { class: "QuickFilterButton", onClick: () => this.filterResults(10) }, translate('lastTenDraws', this.language)), h("button", { class: "QuickFilterButton", onClick: () => this.filterResults(15) }, translate('lastFifteenDraws', this.language))), h("helper-filters", { "show-filter-id": "true", "activate-ticket-search": "false", "game-id": "3797", "player-id": "2323" })), h("h4", null, "All draws results history")));
-    let gridContent = h("div", { class: "HistoryGridWrapper" }, h("div", { class: "HistoryGrid" }, this.drawData.map((item) => h("lottery-draw-results", { endpoint: this.endpoint, "game-id": this.gameId, "draw-id": item.id, "draw-mode": true })).reverse().slice(0, this.numberOfResults)));
-    return h("section", { class: "GridWrapper" }, h("div", { class: "DrawResultsSection" }, h("div", { class: "DrawResultsArea" }, gridHeader, gridContent, this.displayAllDrawsResults && h("button", { class: "ViewAllResults", onClick: this.viewAllResults }, "View All"))));
+      [h("div", { class: "DrawResultsHeaderContent" }, h("h4", null, translate('allDrawResultsHistory', this.language)), h("div", { class: "FilterSection" }, this.showQuickFilters &&
+          h("div", { class: "FilterResultsContainer" }, h("button", { class: "QuickFilterButton", onClick: () => this.filterResults(5) }, translate('lastFiveDraws', this.language)), h("button", { class: "QuickFilterButton", onClick: () => this.filterResults(10) }, translate('lastTenDraws', this.language)), h("button", { class: "QuickFilterButton", onClick: () => this.filterResults(15) }, translate('lastFifteenDraws', this.language))), h("helper-filters", { "show-filter-id": "true", "activate-ticket-search": "false", "game-id": this.gameId }))),
+      ]);
+    return h("section", { class: "GridWrapper" }, h("div", { class: "DrawResultsSection" }, h("div", { class: "DrawResultsAreaHistory" }, gridHeader, h("div", { class: "HistoryGridWrapper" }, h("div", { class: "HistoryGrid" }, this.isLoading &&
+      h("p", null, translate('fetchingResults', this.language)), !this.isLoading && !this.noResults && this.drawData.map((item) => h("lottery-draw-results", { endpoint: this.endpoint, "game-id": this.gameId, "draw-id": item.id, "draw-mode": true })).reverse().slice(0, this.numberOfResults), !this.isLoading && this.noResults && (h("p", null, translate('noResults', this.language))))), this.displayAllDrawsResults && h("button", { class: "ViewAllResults", onClick: this.viewAllResults }, translate('viewAllResults', this.language)))));
   }
   static get style() { return lotteryDrawResultsHistoryCss; }
 }, [1, "lottery-draw-results-history", {
@@ -130,8 +167,12 @@ const LotteryDrawResultsHistory = /*@__PURE__*/ proxyCustomElement(class extends
     "drawData": [32],
     "displayAllDrawsResults": [32],
     "showQuickFilters": [32],
-    "winningDataSetsData": [32]
-  }, [[0, "filterSelection", "filtersHandler"], [0, "filterSelectionReset", "clearFiltersHandler"]]]);
+    "winningDataSetsData": [32],
+    "dateFiltersFrom": [32],
+    "dateFiltersTo": [32],
+    "isLoading": [32],
+    "noResults": [32]
+  }, [[0, "filterDraw", "filtersDrawHandler"], [0, "filterSelection", "filtersHandler"], [0, "filterSelectionReset", "clearFiltersHandler"]]]);
 function defineCustomElement() {
   if (typeof customElements === "undefined") {
     return;

package/dist/components/lottery-draw-results2.js

@@ -14,7 +14,13 @@ const TRANSLATIONS = {
     drawNumbersGridTicket: 'Draw numbers Grid B',
     ticketResult: 'Ticket result',
     amountWon: 'Amount won',
-    numberOfDraws: 'Number of draws'
+    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',
@@ -25,7 +31,13 @@ const TRANSLATIONS = {
     drawNumbersGridTicket: 'Numerele extrase Grid B',
     ticketResult: 'Rezultatul biletului',
     amountWon: 'Suma castigata',
-    numberOfDraws: 'Numarul de extrageri'
+    numberOfDraws: 'Numarul de extrageri',
+    multiplier: 'Multiplicator:',
+    ticketPurchaseDate: 'Data achizitionarii biletului',
+    ticketStatus: 'Statusul biletului',
+    ticketId: 'Id biletul',
+    ticketAmount: 'Valoarea biletului',
+    winUpTo: 'Poti castiga'
   },
 };
 const translate = (key, customLang) => {
@@ -33,22 +45,8 @@ const translate = (key, 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}.DrawResultsSection{max-width:500px;margin:0 auto;margin:0px auto 10px;border-radius:4px}.DrawResultsHeader{display:flex;justify-content:space-between;padding:10px 20px;background-color:#009993;color:#fff;font-size:14px}.DrawResultsHeader h4{text-transform:uppercase;font-weight:400;margin:0}.DrawMultipler label{display:block;margin:15px 0}.DrawResultsBody{padding:0 20px}.DrawResultsBody .DrawNumbersGrid{font-size:14px}.DrawResultsBody .NumberOfDrawsContainer{display:table;width:100%}.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{margin-right:5px;position:relative;top:2px}.DrawTicketsContainer{margin:30px auto}.ExpandableBoxes{position:relative}.ExpandableBox{width:100%;height:100%;max-height:100px;float:left;margin:0 0 20px 0;border:1px solid #009993;border-radius:4px;padding:10px;box-sizing:border-box;-webkit-transition:all 0.6s ease-in-out;-moz-transition:all 0.6s ease-in-out;-o-transition:all 0.6s ease-in-out;-ms-transition:all 0.6s ease-in-out;transition:all 0.6s ease-in-out;overflow:hidden}.ExpandableBox.ShowBox{max-height:400px;margin:0px 0px 20p 0px}.ExpandableBox.HideBox{width:0;height:0;overflow:hidden;border:none;padding:0;margin:0;opacity:0}";
+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}.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}.DrawMultipler label{display:block;margin:15px 0}.DrawResultsBody{padding:0px 20px;margin-bottom:5px;border-radius:0 0 4px 4px;border:1px solid #009993}.DrawResultsBody .DrawNumbersGrid{font-size:14px}.DrawResultsBody .NumberOfDrawsContainer{display:table;width:100%}.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{margin-right:5px;position:relative;top:2px}.DrawTicketsContainer{margin:30px auto}.ExpandableBoxes{position:relative}.ExpandableBox{line-height:12px;font-weight:lighter;width:100%;height:100%;max-height:70px;float:left;margin:0 0 20px 0;border:1px solid #f1f1f1;background:#fff;border-radius:4px;padding:10px;-webkit-transition:all 0.6s ease-in-out;-moz-transition:all 0.6s ease-in-out;-o-transition:all 0.6s ease-in-out;-ms-transition:all 0.6s ease-in-out;transition:all 0.6s ease-in-out;overflow:hidden;box-shadow:rgba(99, 99, 99, 0.2) 0px 2px 8px 0px}.ExpandableBox.ShowBox{max-height:400px;margin:0px 0px 20p 0px}.ExpandableBox.HideBox{width:0;height:0;overflow:hidden;border:none;padding:0;margin:0;opacity:0}";
 
-const DEFAULT_VALUES = {
-  gamename: 'Chrono',
-  gamedate: '24/09/2022',
-  state: 'Processing',
-  amount: 304444,
-  ticketid: '6963444',
-  selection: '[5, 6, 7, 8,  9]',
-  multiplier: 4.5,
-  resultstatus: 'Processing',
-  drawstatus: 'Won',
-  drawamount: 1022,
-  drawid: '54545555',
-  drawdate: '24/09/2032'
-};
 const LotteryDrawResults = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
     super();
@@ -62,9 +60,39 @@ const LotteryDrawResults = /*@__PURE__*/ proxyCustomElement(class extends HTMLEl
      * Shows only the last draw
      */
     this.drawMode = false;
+    /**
+     * The drawID (option)
+     */
+    this.drawId = '';
+    /**
+     * The game name
+     */
     this.gameName = '';
-    this.multiplier = 5.434;
-    this.ticketData = {};
+    /**
+     * 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;
+    this.multiplier = 3;
     this.isLoading = true;
     this.drawResults = [];
     this.rules = {};
@@ -86,9 +114,6 @@ const LotteryDrawResults = /*@__PURE__*/ proxyCustomElement(class extends HTMLEl
   connectedCallback() {
     let promises = [];
     promises.push(this.getGameData());
-    if (this.playerId) {
-      promises.push(this.getTicketData());
-    }
     if (this.drawId) {
       promises.push(this.getDrawData());
     }
@@ -108,9 +133,11 @@ const LotteryDrawResults = /*@__PURE__*/ proxyCustomElement(class extends HTMLEl
         .then((data) => {
         this.drawData = data;
         resolve(true);
+        this.isLoading = false;
       })
         .catch((err) => {
         reject(err);
+        this.isLoading = false;
       });
     });
   }
@@ -127,6 +154,8 @@ const LotteryDrawResults = /*@__PURE__*/ proxyCustomElement(class extends HTMLEl
           totalNumbers: data.rules.boards[0].totalNumbers
         };
         resolve(true);
+        this.isLoading = false;
+        this.hasErrors = false;
       })
         .catch((err) => {
         this.isLoading = false;
@@ -136,26 +165,7 @@ const LotteryDrawResults = /*@__PURE__*/ proxyCustomElement(class extends HTMLEl
       });
     });
   }
-  getTicketData() {
-    return new Promise((resolve, reject) => {
-      let url = new URL(`${this.endpoint}/tickets/player/${this.playerId}`);
-      fetch(url.href)
-        .then((response) => {
-        return response.json();
-      })
-        .then((data) => {
-        this.ticketData = data.length === 0 ? DEFAULT_VALUES : data[1];
-        this.drawResults = this.ticketData.drawResults.map((item) => item);
-        this.selection = this.ticketData.selection[0].join(',');
-        resolve(true);
-      })
-        .catch((err) => {
-        reject(err);
-      });
-    });
-  }
   render() {
-    var _a, _b, _c, _d, _e, _f;
     if (this.isLoading) {
       return (h("p", null, "Loading, please wait ..."));
     }
@@ -164,12 +174,11 @@ const LotteryDrawResults = /*@__PURE__*/ proxyCustomElement(class extends HTMLEl
     }
     else {
       return (h("section", { class: "DrawResultsSection" }, !this.drawMode ?
-        h("div", { class: "DrawResultsArea" }, h("div", { class: "TicketInfo" }, h("div", { class: "TicketGameName" }, translate('drawName', this.language), ": ", h("span", null, this.gameName)), h("div", { class: "TicketDate" }, "Ticket Purchase Date: ", h("span", null, (_a = this.ticketData) === null || _a === void 0 ? void 0 : _a.createdAt.slice(0, 10))), h("div", { class: "TicketStatus" }, "Status: ", h("span", null, (_b = this.ticketData) === null || _b === void 0 ? void 0 : _b.state))), h("div", { class: "DrawResultsBody" }, h("div", { class: "TicketIdContainer" }, h("p", null, "Ticket id: ", h("span", null, (_c = this.ticketData) === null || _c === void 0 ? void 0 : _c.id))), h("div", { class: "TicketAmountContainer" }, h("p", null, "Ticket amount: ", h("span", null, (_d = this.ticketData) === null || _d === void 0 ? void 0 : _d.amount))), h("div", { class: "DrawNumbersGrid" }, h("p", null, translate('drawNumbersGridTicket', this.language), ":"), h("div", { class: "BulletContainer" }, h("lottery-grid", { "maximum-allowed": this.rules.maximumAllowed, "total-numbers": this.rules.totalNumbers, "selected-numbers": this.selection, selectable: false, "display-selected": true, language: this.language }))), h("div", { class: "DrawMultipler" }, h("label", { class: "Label" }, "Multiplier: ", h("span", null, JSON.stringify((_e = this.ticketData) === null || _e === void 0 ? void 0 : _e.multiplier)))), h("div", { class: "NumberOfDrawsContainer" }, h("p", null, translate('numberOfDraws', this.language), ": ", (_f = this.ticketData) === null || _f === void 0 ? void 0 :
-          _f.drawCount), h("div", { class: "DrawTicketsContainer" }, this.drawResults.map((item, index) => h("div", { class: "ExpandableBoxes" }, h("div", { class: this.toggleDrawer[index] ? 'ExpandableBox ShowBox' : 'ExpandableBox', onClick: () => this.changeBox(index) }, h("div", { class: "TicketResultContainer" }, h("p", null, translate('ticketResult', this.language), ": ", item.status)), item.state == 'won' &&
-          h("div", { class: "AmountWonContainer" }, h("p", null, translate('amountWon', this.language), ": ", Number(item.amount).toLocaleString('en'), " ", item.currency)), h("div", { class: "DrawIdContainer" }, h("p", null, translate('drawId', this.language), ": ", item.drawId)), h("div", { class: "DrawDateContainer" }, h("p", null, translate('drawDate', this.language), ": ", item.updatedAt.slice(0, 10), " | ", item.updatedAt.slice(11, 19))), h("div", { class: "DrawNumbersGrid" }), h("div", { class: "DrawMultipler" }, h("label", { class: "Label" }, "Multiplier: ", item.multiplier)))))))))
+        h("div", { class: "DrawResultsArea" }, h("div", { class: "TicketInfo" }, h("div", { class: "TicketGameName" }, translate('drawName', this.language), ": ", h("span", null, this.gameName)), h("div", { class: "TicketDate" }, translate('ticketPurchaseDate', this.language), ": ", h("span", null, this.ticketDate.slice(0, 10))), h("div", { class: "TicketStatus" }, translate('ticketStatus', this.language), ": ", h("span", null, this.ticketStatus))), h("div", { class: "DrawResultsBody" }, h("div", { class: "TicketIdContainer" }, h("p", null, translate('ticketId', this.language), ": ", h("span", null, this.ticketId))), h("div", { class: "TicketAmountContainer" }, h("p", null, translate('ticketAmount', this.language), " ", h("span", null, this.ticketAmount))), h("div", { class: "DrawNumbersGrid" }, h("p", null, translate('drawNumbersGridTicket', this.language), ":"), h("div", { class: "BulletContainer" }, h("lottery-grid", { "maximum-allowed": this.rules.maximumAllowed, "total-numbers": this.rules.totalNumbers, "selected-numbers": this.selection, selectable: false, "display-selected": true, language: this.language }))), h("div", { class: "DrawMultipler" }, h("label", { class: "Label" }, translate('winUpTo', this.language), " ", h("span", null, JSON.stringify(this.ticketMultiplier)))), h("div", { class: "NumberOfDrawsContainer" }, h("p", null, translate('numberOfDraws', this.language), ": ", this.ticketDrawCount), h("div", { class: "DrawTicketsContainer" }, this.drawResults.map((item, index) => h("div", { class: "ExpandableBoxes" }, h("div", { class: this.toggleDrawer[index] ? 'ExpandableBox ShowBox' : 'ExpandableBox', onClick: () => this.changeBox(index) }, h("div", { class: "TicketResultContainer" }, h("p", null, translate('ticketResult', this.language), ": ", item.status)), item.state == 'won' &&
+          h("div", { class: "AmountWonContainer" }, h("p", null, translate('amountWon', this.language), ": ", Number(item.amount).toLocaleString('en'), " ", item.currency)), h("div", { class: "DrawIdContainer" }, h("p", null, translate('drawId', this.language), ": ", item.drawId)), h("div", { class: "DrawDateContainer" }, h("p", null, translate('drawDate', this.language), ": ", item.updatedAt.slice(0, 10), " | ", item.updatedAt.slice(11, 19))), h("div", { class: "DrawNumbersGrid" }), h("div", { class: "DrawMultipler" }, h("label", { class: "Label" }, translate('winUpTo', this.language), " ", item.multiplier)))))))))
         :
           h("div", { class: "DrawResultsArea" }, this.drawData &&
-            h("div", null, h("div", { class: "DrawResultsHeader" }, h("span", null, translate('drawId', this.language), ":  ", this.drawData.id), h("span", null, translate('drawDate', this.language), ": ", this.drawData.date.slice(0, 10))), h("div", { class: "DrawResultsBody" }, h("div", { class: "DrawNumbersGrid" }, h("p", null, translate('drawNumbersGridDraw', this.language), ":"), h("div", { class: "BulletContainer" }, h("lottery-grid", { "maximum-allowed": this.rules.maximumAllowed, "total-numbers": this.rules.totalNumbers, selectedNumbers: this.drawData.winningNumbers.join(','), "display-selected": true, selectable: false, language: this.language })), h("div", { class: "DrawMultipler" }, h("label", { class: "Label" }, "Multiplier: ", this.multiplier))))))));
+            h("div", null, h("div", { class: "DrawResultsHeader" }, h("span", null, translate('drawId', this.language), ":  ", this.drawData.id), h("span", null, translate('drawDate', this.language), ": ", this.drawData.date.slice(0, 10))), h("div", { class: "DrawResultsBody" }, h("div", { class: "DrawNumbersGrid" }, h("p", null, translate('drawNumbersGridDraw', this.language), ":"), h("div", { class: "BulletContainer" }, h("lottery-grid", { "maximum-allowed": this.rules.maximumAllowed, "total-numbers": this.rules.totalNumbers, selectedNumbers: this.drawData.winningNumbers.join(','), "display-selected": true, selectable: false, language: this.language })), h("div", { class: "DrawMultipler" }, h("label", { class: "Label" }, translate('multiplier', this.language), " ", this.multiplier))))))));
     }
   }
   static get style() { return lotteryDrawResultsCss; }
@@ -181,8 +190,13 @@ const LotteryDrawResults = /*@__PURE__*/ proxyCustomElement(class extends HTMLEl
     "drawMode": [4, "draw-mode"],
     "drawId": [1, "draw-id"],
     "gameName": [1, "game-name"],
+    "ticketDate": [1, "ticket-date"],
+    "ticketStatus": [1, "ticket-status"],
+    "ticketId": [1, "ticket-id"],
+    "ticketAmount": [1, "ticket-amount"],
+    "ticketMultiplier": [4, "ticket-multiplier"],
+    "ticketDrawCount": [2, "ticket-draw-count"],
     "multiplier": [32],
-    "ticketData": [32],
     "isLoading": [32],
     "drawResults": [32],
     "rules": [32],