@everymatrix/lottery-game-page 0.1.1 → 0.1.2

package/dist/cjs/lottery-draw-results-history.cjs.entry.js

@@ -0,0 +1,124 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-e5770ba2.js');
+
+const DEFAULT_LANGUAGE = 'en';
+const SUPPORTED_LANGUAGES = ['ro', 'en'];
+const TRANSLATIONS = {
+  en: {
+    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'
+  },
+  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'
+  },
+};
+const translate = (key, customLang) => {
+  const lang = 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 LotteryDrawResultsHistory = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    /**
+     * The number of results to be displayed
+     */
+    this.numberOfResults = 3;
+    /**
+     *Language
+     */
+    this.language = 'en';
+    this.drawData = [];
+    this.displayAllDrawsResults = true;
+    this.showQuickFilters = true;
+    this.winningDataSetsData = [''];
+    this.getDrawsData = () => {
+      let url = new URL(`${this.endpoint}/games/${this.gameId}`);
+      fetch(url.href)
+        .then((res) => {
+        if (res.status >= 300) {
+          throw new Error('There was an error while fetching the data');
+        }
+        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.filterResults = (resultsNumber) => {
+      this.numberOfResults = resultsNumber;
+      this.displayAllDrawsResults = true;
+    };
+    this.getDrawResults = (drawID) => {
+      let url = new URL(`${this.endpoint}/games/${this.gameId}/draws/${drawID}`);
+      let drawOptions = {
+        method: "GET",
+        headers: {
+          'Content-Type': "application/json",
+          'Accept': 'application/json',
+        },
+      };
+      fetch(url.href, drawOptions)
+        .then((response) => {
+        return response.json();
+      })
+        .then((data) => {
+        console.log("getDrawResults ", data);
+        this.drawData = [data];
+      });
+    };
+    this.viewAllResults = () => {
+      this.numberOfResults = this.drawData.length;
+      this.displayAllDrawsResults = false;
+      window.scrollTo({ top: 0, behavior: 'smooth' });
+    };
+  }
+  // Filters events
+  filtersHandler(event) {
+    var _a;
+    this.getDrawResults((_a = event.detail) === null || _a === void 0 ? void 0 : _a.drawTicketId);
+    this.showQuickFilters = false;
+  }
+  clearFiltersHandler() {
+    this.drawData = this.winningDataSetsData;
+    this.showQuickFilters = true;
+  }
+  connectedCallback() {
+    this.getDrawsData();
+  }
+  disconnectedCallback() {
+    clearInterval(this.interval);
+  }
+  render() {
+    let gridHeader = index.h("div", { class: "DrawResultsHeader" }, this.displayAllDrawsResults ? index.h("h4", null, translate('drawResultsHeader', this.language)) :
+      index.h("div", { class: "DrawResultsHeaderContent" }, index.h("div", { class: "FilterSection" }, this.showQuickFilters &&
+        index.h("div", { class: "FilterResultsContainer" }, index.h("button", { class: "QuickFilterButton", onClick: () => this.filterResults(5) }, translate('lastFiveDraws', this.language)), index.h("button", { class: "QuickFilterButton", onClick: () => this.filterResults(10) }, translate('lastTenDraws', this.language)), index.h("button", { class: "QuickFilterButton", onClick: () => this.filterResults(15) }, translate('lastFifteenDraws', this.language))), index.h("helper-filters", { "show-filter-id": "true", "activate-ticket-search": "false", "game-id": "3797", "player-id": "2323" })), index.h("h4", null, "All draws results history")));
+    let gridContent = index.h("div", { class: "HistoryGridWrapper" }, index.h("div", { class: "HistoryGrid" }, this.drawData.map((item) => index.h("lottery-draw-results", { endpoint: this.endpoint, "game-id": this.gameId, "draw-id": item.id, "draw-mode": true })).reverse().slice(0, this.numberOfResults)));
+    return index.h("section", { class: "GridWrapper" }, index.h("div", { class: "DrawResultsSection" }, index.h("div", { class: "DrawResultsArea" }, gridHeader, gridContent, this.displayAllDrawsResults && index.h("button", { class: "ViewAllResults", onClick: this.viewAllResults }, "View All"))));
+  }
+};
+LotteryDrawResultsHistory.style = lotteryDrawResultsHistoryCss;
+
+exports.lottery_draw_results_history = LotteryDrawResultsHistory;

package/dist/cjs/lottery-game-details.cjs.entry.js

@@ -0,0 +1,19 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-e5770ba2.js');
+
+const lotteryGameDetailsCss = ":host{display:block}";
+
+const LotteryGameDetails = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+  }
+  render() {
+    return (index.h("div", null, index.h("helper-accordion", { "header-title": "Game Details", collapsed: false }, index.h("div", { slot: "accordionContent" }, index.h("helper-tabs", null)))));
+  }
+};
+LotteryGameDetails.style = lotteryGameDetailsCss;
+
+exports.lottery_game_details = LotteryGameDetails;

package/dist/cjs/lottery-game-page.cjs.entry.js

@@ -2,13 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-614098f4.js');
-require('@everymatrix/lottery-ticket-controller');
-require('@everymatrix/lottery-game-details');
-require('@everymatrix/lottery-draw-results-history');
+const index = require('./index-e5770ba2.js');
 
 const DEFAULT_LANGUAGE = 'en';
-const SUPPORTED_LANGUAGES = ['ro', 'en', 'ar'];
+const SUPPORTED_LANGUAGES = ['ro', 'en'];
 const TRANSLATIONS = {
   en: {
     error: 'Error',
@@ -21,7 +18,7 @@ const TRANSLATIONS = {
     buy: 'Buy tickets',
     viewLatest: 'View latest results',
     createTicket: 'Create Ticket',
-    modalSuccess: 'Purchase successfully completed!',
+    modalSuccess: 'Purchase will be successfull soon!',
     deleteTicketModalTitle: 'Delete Ticket',
     deleteTicketModalText: 'Are you sure you want to delete this ticket?',
     deleteTicketModalCancel: 'Cancel',
@@ -29,9 +26,7 @@ const TRANSLATIONS = {
     orderSummaryTitle: 'Order Summary',
     orderSummaryTickets: 'Ticket',
     orderSummaryTotal: 'Total',
-    orderSummarySubmit: 'Submit',
-    lastDrawResultsTitle: 'Last Draw Results',
-    modalLogin: 'Please login to submit a ticket',
+    orderSummarySubmit: 'Submit'
   },
   ro: {
     error: 'Eroare',
@@ -40,11 +35,11 @@ const TRANSLATIONS = {
     lobbyButton: 'Lobby',
     prize: 'MARELE JACKPOT OMG',
     winUpTo: 'Castiga pana la',
-    nextDraw: 'Urmatoarea extragere:',
+    nextDraw: 'In cat timp devii milionar daca cumperi acum!!!',
     buy: 'Cumpara bilet',
     viewLatest: 'Ultimile extrageri',
     createTicket: 'Creeaza bilet',
-    modalSuccess: 'Achizitie efectuata cu succes',
+    modalSuccess: 'Achiziția va avea succes în curând!',
     deleteTicketModalTitle: 'Sterge biletul',
     deleteTicketModalText: 'Esti sigur ca vrei sa stergi acest bilet?',
     deleteTicketModalCancel: 'Anuleaza',
@@ -52,32 +47,7 @@ const TRANSLATIONS = {
     orderSummaryTitle: 'Rezumat comanda',
     orderSummaryTickets: 'Bilet',
     orderSummaryTotal: 'Total',
-    orderSummarySubmit: 'Trimite',
-    lastDrawResultsTitle: 'Cele mai recente extrageri',
-    modalLogin: 'Please login to submit a ticket',
-  },
-  ar: {
-    error: 'خطأ',
-    title: 'كرونو',
-    backButton: 'خلف',
-    lobbyButton: 'ردهة',
-    prize: 'جائزة',
-    winUpTo: 'الفوز بما يصل الى',
-    nextDraw: 'السحب التالي:',
-    buy: 'اشتري تذاكر',
-    viewLatest: 'عرض أحدث النتائج',
-    createTicket: 'إنشاء تذكرة',
-    modalSuccess: '!سيتم الشراء بنجاح قريبًا',
-    deleteTicketModalTitle: 'حذف التذكرة',
-    deleteTicketModalText: 'هل أنت متأكد أنك تريد حذف هذه التذكرة؟',
-    deleteTicketModalCancel: 'يلغي',
-    deleteTicketModalConfirm: 'حذف',
-    orderSummaryTitle: 'ملخص الطلب',
-    orderSummaryTickets: 'تذكرة',
-    orderSummaryTotal: 'المجموع',
-    orderSummarySubmit: 'يُقدِّم',
-    lastDrawResultsTitle: 'Cele mai recente extrageri',
-    modalLogin: 'الرجاء تسجيل الدخول لتقديم تذكرة'
+    orderSummarySubmit: 'Trimite'
   },
 };
 const translate = (key, customLang) => {
@@ -85,7 +55,7 @@ const translate = (key, customLang) => {
   return TRANSLATIONS[lang !== undefined && SUPPORTED_LANGUAGES.includes(lang) ? lang : DEFAULT_LANGUAGE][key];
 };
 
-const lotteryGamePageCss = "@import url(\"https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap\");:host{display:block;font-family:\"Roboto\", sans-serif}.GamePage .GridBanner{background-color:#009993;background-repeat:no-repeat;background-position:center;color:#111;padding:0 20px 10px;height:220px;display:flex;flex-direction:column;justify-content:space-between}.GamePage .GridBanner .BannerButtonsWrapper{display:flex;justify-content:space-between;padding-top:16px}.GamePage .GridBanner .BannerButtonsWrapper .BannerBackButton,.GamePage .GridBanner .BannerButtonsWrapper .BannerLobbyButton{background:#fff;border:1px solid #D4D4D4;border-radius:4px;padding:7px 15px;font-size:12px;text-transform:uppercase;width:80px}.GamePage .GridBanner .GridBannerArea{padding-top:30px;display:flex;flex-direction:column;align-items:center}.GamePage .TotalWinnings{color:#000;font-size:18px;display:flex;flex-direction:row;justify-content:center;align-items:center;gap:10px;text-transform:uppercase}.GamePage .TotalWinnings span{font-size:18px;font-weight:700}.GamePage .NextDraw{color:#00958f;font-size:24px;font-weight:600;margin:0 auto;text-align:center;text-transform:uppercase;display:flex;justify-content:center;align-items:center;flex-direction:column}.GamePage .NextDraw .BannerText{font-weight:400;font-size:18px;text-transform:uppercase;padding:0;margin:15px 0 0 0}.GamePage .NextDraw .BannerCountdown{font-size:22px;color:#00958f;display:flex;gap:20px}.GamePage .Tabs{display:flex;justify-content:center;gap:10px}.GamePage .Tabs .TabButton{border-radius:4px;cursor:pointer;padding:8px 0;width:50%;max-width:200px;border:1px solid #00958f;background:#F1F1F1;color:#000;font-size:12px;transition:all 0.2s linear;text-transform:uppercase;text-align:center;letter-spacing:0}.GamePage .Tabs .TabButton.Active{background:#00958f;color:#FFF}.LastDrawResultsTitle{color:#009993;padding:25px 0 10px 0;text-align:center;border-radius:4px;text-transform:uppercase;font-size:16px;font-weight:600;margin:0}.NextDrawWrapper{padding:10px 15px;background:#F1F1F1;background:linear-gradient(0deg, #f1f1f1 0%, rgba(253, 187, 45, 0) 100%)}.NextDrawWrapper .BannerText{font-size:16px;font-weight:700;text-align:center}.NextDrawWrapper .BannerCountdown{font-size:22px;display:flex;gap:8px;color:#009993;font-weight:bolder;justify-content:center}.GamePageContent{padding:15px;max-width:1200px;margin:0 auto}.GameDetails{padding-bottom:10px;margin-bottom:20px}.CreateNewTicket{background:#004D4A;height:100px;width:100%;display:flex;flex-direction:column;justify-content:center;align-items:center}.CreateNewTicket button{cursor:pointer;display:inline-block;border-radius:50%;width:40px;height:40px;margin:5px;border:1px solid #FFF;background:#FFF;color:#004D4A;font-size:12px;transition:all 0.2s linear;text-transform:uppercase;text-align:center;letter-spacing:0}.CreateNewTicket button:hover{background:#F1F1F1}.CreateNewTicket span{display:inline-block;font-size:12px;text-align:center;margin:0 auto;color:#FFF}.OrderSummary{min-width:200px;border-radius:4px;display:flex;flex-direction:column;justify-content:center;margin-top:20px;background:#fff}.OrderSummary .OrderSummaryTitle{font-size:16px;color:#009993;text-transform:uppercase;text-align:center}.OrderSummary .Ticket{display:inline-block;color:#000;font-size:14px;height:50px;border-bottom:solid 1px #D4D4D4;line-height:50px}.OrderSummary .Ticket span{text-align:right}.OrderSummary .Total{display:inline-block;color:#000;font-size:14px;height:50px;line-height:50px}.OrderSummary .Total span{text-align:right}.ButtonWrapper{display:flex;align-items:center;justify-content:center}.ButtonWrapper .Button{cursor:pointer;border-radius:4px;padding:8px 60px;width:max-content;margin:5px;font-size:12px;transition:all 0.2s linear;text-transform:uppercase;text-align:center;letter-spacing:0;background:#009993;border:1px solid #009993;color:#FFF}.ButtonWrapper .Button:hover{background:#00ABA4}.ButtonWrapper .Button.ButtonDisabled{pointer-events:none;background:#ccc;border:1px solid #ccc}.SubmitModalSuccess{text-align:center;font-size:18px;padding:20px}.DeleteTicketModalWrapper{padding:20px;text-align:center}.DeleteTicketModalWrapper .DeleteTicketModalTitle{font-size:16px;color:#00958f;font-weight:400;text-transform:uppercase;margin:20px 0 40px}.DeleteTicketModalWrapper .DeleteTicketModalText{font-size:14px;color:#000;line-height:22px;margin-bottom:40px}.DeleteTicketModalWrapper .DeleteTicketModalButtons{display:flex;gap:10px;justify-content:center}.DeleteTicketModalWrapper .DeleteTicketModalButtons .DeleteTicketModalConfirm{cursor:pointer;border-radius:4px;padding:8px 25px;width:max-content;margin:5px;color:#000;font-size:12px;transition:all 0.2s linear;text-transform:uppercase;text-align:center;letter-spacing:0;background:#FF3D00;border:1px solid #FF3D00;color:#FFF}.DeleteTicketModalWrapper .DeleteTicketModalButtons .DeleteTicketModalConfirm:hover{background:#FF6536;border:1px solid #FF3D00}.DeleteTicketModalWrapper .DeleteTicketModalButtons .DeleteTicketModalCancel{cursor:pointer;width:max-content;border-radius:4px;padding:10px 25px;margin:5px;border:1px solid #00958f;background:#FFF;color:#000;font-size:12px;transition:all 0.2s linear;text-transform:uppercase;text-align:center;letter-spacing:0}.DeleteTicketModalWrapper .DeleteTicketModalButtons .DeleteTicketModalCancel:hover{background:#F1F1F1}@media (min-width: 1200px){.GamePageContent .TicketsWrapper{float:left;width:49%}.GamePageContent .GameDetails{float:right;width:49%}.GamePageContent .OrderSummary{float:right;width:49%}}";
+const lotteryGamePageCss = "@import url(\"https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap\");:host{display:block;font-family:\"Roboto\", sans-serif}.GamePage .GridBanner{background-color:#009993;background-repeat:no-repeat;background-position:center;color:#111;padding:0 20px 10px;height:220px;display:flex;flex-direction:column;justify-content:space-between}.GamePage .GridBanner .BannerButtonsWrapper{display:flex;justify-content:space-between;padding-top:16px}.GamePage .GridBanner .BannerButtonsWrapper .BannerBackButton,.GamePage .GridBanner .BannerButtonsWrapper .BannerLobbyButton{background:#fff;border:1px solid #D4D4D4;border-radius:4px;padding:7px 15px;font-size:12px;text-transform:uppercase;width:80px}.GamePage .GridBanner .GridBannerArea{padding-top:30px;display:flex;flex-direction:column;align-items:center}.GamePage .TotalWinnings{color:#00958f;font-size:18px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:10px}.GamePage .TotalWinnings span{font-size:22px;font-weight:700}.GamePage .NextDraw{color:#00958f;font-size:24px;font-weight:600;margin:0 auto;text-align:center;text-transform:capitalize;display:flex;justify-content:center;align-items:center;flex-direction:column}.GamePage .NextDraw .BannerText{font-weight:400;font-size:18px}.GamePage .NextDraw .BannerCountdown{font-size:22px;color:#00958f;display:flex;gap:20px}.GamePage .Tabs{display:flex;justify-content:center;gap:10px}.GamePage .Tabs .TabButton{border-radius:4px;cursor:pointer;padding:8px 0;width:50%;max-width:200px;border:1px solid #00958f;background:#F1F1F1;color:#000;font-size:12px;transition:all 0.2s linear;text-transform:uppercase;text-align:center;letter-spacing:0}.GamePage .Tabs .TabButton.Active{background:#00958f;color:#FFF}.NextDrawWrapper{padding:10px 15px;background:#fff}.NextDrawWrapper .BannerText{font-size:16px;font-weight:700;text-align:center}.NextDrawWrapper .BannerCountdown{font-size:22px;display:flex;gap:8px;color:#009993;font-weight:bolder;justify-content:center}.GamePageContent{padding:10px 15px;max-width:1200px;margin:0 auto}.GameDetails{padding-bottom:10px;margin-bottom:20px;border-bottom:1px solid #e9e9e9}.CreateNewTicket{background:#004D4A;height:100px;width:100%;display:flex;flex-direction:column;justify-content:center;align-items:center}.CreateNewTicket button{cursor:pointer;display:inline-block;border-radius:50%;width:40px;height:40px;margin:5px;border:1px solid #FFF;background:#FFF;color:#004D4A;font-size:12px;transition:all 0.2s linear;text-transform:uppercase;text-align:center;letter-spacing:0}.CreateNewTicket button:hover{background:#F1F1F1}.CreateNewTicket span{display:inline-block;font-size:12px;text-align:center;margin:0 auto;color:#FFF}.OrderSummary{min-width:200px;border-radius:4px;display:flex;flex-direction:column;justify-content:center;margin-top:20px;background:#fff}.OrderSummary .OrderSummaryTitle{font-size:16px;color:#009993;text-transform:uppercase;text-align:center}.OrderSummary .Ticket{display:inline-block;color:#000;font-size:14px;height:50px;border-bottom:solid 1px #D4D4D4;line-height:50px}.OrderSummary .Ticket span{text-align:right}.OrderSummary .Total{display:inline-block;color:#000;font-size:14px;height:50px;line-height:50px}.OrderSummary .Total span{text-align:right}.ButtonWrapper{display:flex;align-items:center;justify-content:center}.ButtonWrapper .Button{cursor:pointer;border-radius:4px;padding:8px 60px;width:max-content;margin:5px;font-size:12px;transition:all 0.2s linear;text-transform:uppercase;text-align:center;letter-spacing:0;background:#009993;border:1px solid #009993;color:#FFF}.ButtonWrapper .Button:hover{background:#00ABA4}.SubmitModalSuccess{text-align:center;font-size:18px;padding:20px}.DeleteTicketModalWrapper{padding:20px;text-align:center}.DeleteTicketModalWrapper .DeleteTicketModalTitle{font-size:16px;color:#00958f;font-weight:400;text-transform:uppercase;margin:20px 0 40px}.DeleteTicketModalWrapper .DeleteTicketModalText{font-size:14px;color:#000;line-height:22px;margin-bottom:40px}.DeleteTicketModalWrapper .DeleteTicketModalButtons{display:flex;gap:10px;justify-content:center}.DeleteTicketModalWrapper .DeleteTicketModalButtons .DeleteTicketModalConfirm{cursor:pointer;border-radius:4px;padding:8px 25px;width:max-content;margin:5px;color:#000;font-size:12px;transition:all 0.2s linear;text-transform:uppercase;text-align:center;letter-spacing:0;background:#FF3D00;border:1px solid #FF3D00;color:#FFF}.DeleteTicketModalWrapper .DeleteTicketModalButtons .DeleteTicketModalConfirm:hover{background:#FF6536;border:1px solid #FF3D00}.DeleteTicketModalWrapper .DeleteTicketModalButtons .DeleteTicketModalCancel{cursor:pointer;width:max-content;border-radius:4px;padding:10px 25px;margin:5px;border:1px solid #00958f;background:#FFF;color:#000;font-size:12px;transition:all 0.2s linear;text-transform:uppercase;text-align:center;letter-spacing:0}.DeleteTicketModalWrapper .DeleteTicketModalButtons .DeleteTicketModalCancel:hover{background:#F1F1F1}@media (min-width: 1200px){.GamePageContent .TicketsWrapper{float:left;width:49%}.GamePageContent .GameDetails{float:right;width:49%}.GamePageContent .OrderSummary{float:right;width:49%}}";
 
 const LotteryGamePage = class {
   constructor(hostRef) {
@@ -110,8 +80,6 @@ const LotteryGamePage = class {
     this.deleteVisible = false;
     this.latestDraw = {};
     this.totalWinningsAmount = 0;
-    this.isLoggedIn = false;
-    this.loginModalVisible = false;
     this.multiplier = false;
     this.quickPick = false;
   }
@@ -119,10 +87,6 @@ const LotteryGamePage = class {
   connectedCallback() {
     this.getGameDetails();
     this.getDraws();
-    console.log(this.language);
-    if (this.sessionId) {
-      this.isLoggedIn = true;
-    }
   }
   countdownLogic(date) {
     this.interval = setInterval(() => {
@@ -149,6 +113,7 @@ const LotteryGamePage = class {
       this.gameData = data;
       this.basicStake = this.gameData.rules.stakes[0].amount;
       let draws = this.gameData.draws.filter((item) => !item.winningNumbers);
+      console.log('draws', draws);
       this.nextDraw = draws[0].id;
       this.createNewTicket();
     })
@@ -211,7 +176,6 @@ const LotteryGamePage = class {
   }
   modalCloseEvent() {
     this.deleteVisible = false;
-    this.loginModalVisible = false;
   }
   stakeChangeHandler(event) {
     const { ticketId, stake } = event.detail;
@@ -273,9 +237,6 @@ const LotteryGamePage = class {
       { gameId: this.gameId, ticketId: this.tickets.length + 1, completed: false, amount: 1, stake: this.basicStake, grids: [] }
     ];
   }
-  showLoginModal() {
-    this.loginModalVisible = true;
-  }
   submitTickets() {
     let url = new URL(`${this.endpoint}/tickets`);
     // @TODO Body TS type
@@ -283,6 +244,7 @@ const LotteryGamePage = class {
       gameId: this.gameId,
       tickets: []
     };
+    console.log('body', body);
     this.tickets.forEach((item) => {
       body.tickets.push({
         startingDrawId: this.nextDraw,
@@ -325,11 +287,9 @@ const LotteryGamePage = class {
     }
     return (
     /* Game details */
-    index.h("div", { class: "GamePage", dir: this.language == 'ar' ? 'rtl' : 'ltr' }, index.h("div", { class: "GridBanner" }, index.h("div", { class: "BannerButtonsWrapper" }, index.h("button", { class: "BannerBackButton" }, index.h("span", { class: "BannerBackButtonArrow" }, "\u1438 "), translate('backButton', this.language)), index.h("button", { class: "BannerLobbyButton" }, translate('lobbyButton', this.language))), index.h("div", { class: "Tabs" }, index.h("div", { class: 'TabButton' + (this.tabIndex == 0 ? ' Active' : ''), onClick: () => this.tabIndex = 0 }, translate('buy', this.language)), index.h("div", { class: 'TabButton' + (this.tabIndex == 1 ? ' Active' : ''), onClick: () => this.tabIndex = 1 }, translate('viewLatest', this.language)))), index.h("div", { class: "NextDrawWrapper" }, index.h("div", { class: "TotalWinnings" }, translate('winUpTo', this.language), ": ", index.h("span", null, "$", this.totalWinningsAmount.toLocaleString('en-US', { maximumFractionDigits: 2 }))), index.h("div", { class: "NextDraw" }, index.h("p", { class: "BannerText" }, translate('nextDraw', this.language)), index.h("div", { class: "BannerCountdown" }, index.h("span", { class: "CountdownDays" }, this.daysRemaining, "D"), index.h("span", { class: "CountdownHours" }, this.hoursRemaining, "H"), index.h("span", { class: "CountdownMinutes" }, this.minutesRemaining, "M"), index.h("span", { class: "CountdownSeconds" }, this.secondsRemaining, "S")))), this.tabIndex == 0 &&
-      index.h("div", { class: "GamePageContent" }, index.h("div", { class: "GameDetails" }, index.h("lottery-game-details", null)), index.h("div", { class: "TicketsWrapper" }, this.tickets.map((item) => index.h("lottery-ticket-controller", { endpoint: this.endpoint, "ticket-id": item.ticketId, "game-id": item.gameId, collapsed: false, last: true, language: this.language, "auto-pick": this.autoPick, "reset-button": this.resetButton })), index.h("div", { class: "CreateNewTicket" }, index.h("button", { onClick: () => this.createNewTicket() }, "+"), index.h("span", null, translate('createTicket', this.language)))), index.h("div", { class: "OrderSummary" }, index.h("h3", { class: "OrderSummaryTitle" }, translate('orderSummaryTitle', this.language)), index.h("div", { class: "Ticket" }, translate('orderSummaryTickets', this.language), ": ", index.h("span", null, this.tickets.length)), index.h("div", { class: "Total" }, translate('orderSummaryTotal', this.language), ": ", index.h("span", null, this.totalAmount, " ", this.currency)), index.h("div", { class: "ButtonWrapper" }, this.isLoggedIn &&
-        index.h("span", { class: "Button", onClick: () => this.submitTickets() }, translate('orderSummarySubmit', this.language)), !this.isLoggedIn &&
-        index.h("div", null, index.h("span", { class: "Button", onClick: () => this.showLoginModal() }, translate('orderSummarySubmit', this.language)), index.h("helper-modal", { "title-modal": "Success", visible: this.loginModalVisible }, index.h("p", { class: "SubmitModalSuccess" }, translate('modalLogin', this.language))))))), this.tabIndex == 1 &&
-      index.h("div", null, index.h("h4", { class: "LastDrawResultsTitle" }, translate('lastDrawResultsTitle', this.language)), index.h("lottery-draw-results", { endpoint: this.endpoint, "game-id": this.gameId, language: this.language, "draw-id": this.lastDrawId, "draw-mode": true }), index.h("lottery-draw-results-history", { endpoint: this.endpoint, "game-id": this.gameId, language: this.language })), index.h("helper-modal", { "title-modal": "Success", visible: this.successVisible }, index.h("p", { class: "SubmitModalSuccess" }, translate('modalSuccess', this.language))), index.h("helper-modal", { "title-modal": "Delete Ticket", visible: this.deleteVisible }, index.h("div", { class: "DeleteTicketModalWrapper" }, index.h("h3", { class: "DeleteTicketModalTitle" }, translate('deleteTicketModalTitle', this.language)), index.h("p", { class: "DeleteTicketModalText" }, translate('deleteTicketModalText', this.language)), index.h("div", { class: "DeleteTicketModalButtons" }, index.h("button", { class: "DeleteTicketModalCancel", onClick: () => this.modalCloseEvent() }, translate('deleteTicketModalCancel', this.language)), index.h("button", { class: "DeleteTicketModalConfirm", onClick: () => this.confirmDeleteTicketHandler(this.deleteEventData) }, translate('deleteTicketModalConfirm', this.language)))))));
+    index.h("div", { class: "GamePage" }, index.h("div", { class: "GridBanner" }, index.h("div", { class: "BannerButtonsWrapper" }, index.h("button", { class: "BannerBackButton" }, index.h("span", { class: "BannerBackButtonArrow" }, "\u1438 "), translate('backButton', this.language)), index.h("button", { class: "BannerLobbyButton" }, translate('lobbyButton', this.language))), index.h("div", { class: "Tabs" }, index.h("div", { class: 'TabButton' + (this.tabIndex == 0 ? ' Active' : ''), onClick: () => this.tabIndex = 0 }, translate('buy', this.language)), index.h("div", { class: 'TabButton' + (this.tabIndex == 1 ? ' Active' : ''), onClick: () => this.tabIndex = 1 }, translate('viewLatest', this.language)))), index.h("div", { class: "NextDrawWrapper" }, index.h("div", { class: "TotalWinnings" }, translate('winUpTo', this.language), ": ", index.h("span", null, "$", this.totalWinningsAmount.toLocaleString('en-US', { maximumFractionDigits: 2 }))), index.h("div", { class: "NextDraw" }, index.h("p", { class: "BannerText" }, translate('nextDraw', this.language)), index.h("div", { class: "BannerCountdown" }, index.h("span", { class: "CountdownDays" }, this.daysRemaining, "D"), index.h("span", { class: "CountdownHours" }, this.hoursRemaining, "H"), index.h("span", { class: "CountdownMinutes" }, this.minutesRemaining, "M"), index.h("span", { class: "CountdownSeconds" }, this.secondsRemaining, "S")))), this.tabIndex == 0 &&
+      index.h("div", { class: "GamePageContent" }, index.h("div", { class: "GameDetails" }, index.h("lottery-game-details", null)), index.h("div", { class: "TicketsWrapper" }, this.tickets.map((item) => index.h("lottery-ticket-controller", { endpoint: this.endpoint, "ticket-id": item.ticketId, "game-id": item.gameId, collapsed: false, last: true, language: this.language, "auto-pick": this.autoPick, "reset-button": this.resetButton })), index.h("div", { class: "CreateNewTicket" }, index.h("button", { onClick: () => this.createNewTicket() }, "+"), index.h("span", null, translate('createTicket', this.language)))), index.h("div", { class: "OrderSummary" }, index.h("h3", { class: "OrderSummaryTitle" }, translate('orderSummaryTitle', this.language)), index.h("div", { class: "Ticket" }, translate('orderSummaryTickets', this.language), ": ", index.h("span", null, this.tickets.length)), index.h("div", { class: "Total" }, translate('orderSummaryTotal', this.language), ": ", index.h("span", null, this.totalAmount, " ", this.currency)), index.h("div", { class: "ButtonWrapper" }, index.h("span", { class: "Button", onClick: () => this.submitTickets() }, translate('orderSummarySubmit', this.language))))), this.tabIndex == 1 &&
+      index.h("div", null, index.h("lottery-draw-results", { endpoint: this.endpoint, "game-id": this.gameId, language: this.language, "draw-id": this.lastDrawId, "draw-mode": true }), index.h("lottery-draw-results-history", { endpoint: this.endpoint, "game-id": this.gameId, language: this.language })), index.h("helper-modal", { "title-modal": "Success", visible: this.successVisible }, index.h("p", { class: "SubmitModalSuccess" }, translate('modalSuccess', this.language))), index.h("helper-modal", { "title-modal": "Delete Ticket", visible: this.deleteVisible }, index.h("div", { class: "DeleteTicketModalWrapper" }, index.h("h3", { class: "DeleteTicketModalTitle" }, translate('deleteTicketModalTitle', this.language)), index.h("p", { class: "DeleteTicketModalText" }, translate('deleteTicketModalText', this.language)), index.h("div", { class: "DeleteTicketModalButtons" }, index.h("button", { class: "DeleteTicketModalCancel", onClick: () => this.modalCloseEvent() }, translate('deleteTicketModalCancel', this.language)), index.h("button", { class: "DeleteTicketModalConfirm", onClick: () => this.confirmDeleteTicketHandler(this.deleteEventData) }, translate('deleteTicketModalConfirm', this.language)))))));
   }
   static get assetsDirs() { return ["static"]; }
   get element() { return index.getElement(this); }

package/dist/cjs/lottery-game-page.cjs.js

@@ -1,6 +1,6 @@
 'use strict';
 
-const index = require('./index-614098f4.js');
+const index = require('./index-e5770ba2.js');
 
 /*
  Stencil Client Patch Browser v2.15.2 | MIT Licensed | https://stenciljs.com
@@ -15,5 +15,5 @@ const patchBrowser = () => {
 };
 
 patchBrowser().then(options => {
-  return index.bootstrapLazy([["helper-modal.cjs",[[1,"helper-modal",{"titleModal":[1,"title-modal"],"visible":[1540]}]]],["lottery-draw-results.cjs",[[1,"lottery-draw-results",{"endpoint":[1],"gameId":[1,"game-id"],"language":[1],"playerId":[1,"player-id"],"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],"isLoading":[32],"drawResults":[32],"rules":[32],"toggleDrawer":[32],"hasErrors":[32],"errorText":[32]}]]],["lottery-game-page.cjs",[[1,"lottery-game-page",{"endpoint":[1],"gameId":[1,"game-id"],"playerId":[2,"player-id"],"sessionId":[1,"session-id"],"language":[1],"autoPick":[4,"auto-pick"],"resetButton":[4,"reset-button"],"tickets":[32],"tabIndex":[32],"hasErrors":[32],"totalAmount":[32],"successVisible":[32],"deleteVisible":[32],"deleteEventData":[32],"daysRemaining":[32],"hoursRemaining":[32],"minutesRemaining":[32],"secondsRemaining":[32],"latestDraw":[32],"totalWinningsAmount":[32],"nextDate":[32],"isLoggedIn":[32],"loginModalVisible":[32]},[[0,"ticketCompleted","gridFilledHandler"],[0,"gridDirty","gridDirtyHandler"],[0,"deleteTicket","deleteTicketHandler"],[0,"modalCloseEvent","modalCloseEvent"],[0,"stakeChange","stakeChangeHandler"],[0,"multiplierChange","multiplierChangeHandler"]]]]]], options);
+  return index.bootstrapLazy([["lottery-game-page.cjs",[[1,"lottery-game-page",{"endpoint":[1],"gameId":[1,"game-id"],"playerId":[2,"player-id"],"sessionId":[1,"session-id"],"language":[1],"autoPick":[4,"auto-pick"],"resetButton":[4,"reset-button"],"tickets":[32],"tabIndex":[32],"hasErrors":[32],"totalAmount":[32],"successVisible":[32],"deleteVisible":[32],"deleteEventData":[32],"daysRemaining":[32],"hoursRemaining":[32],"minutesRemaining":[32],"secondsRemaining":[32],"latestDraw":[32],"totalWinningsAmount":[32],"nextDate":[32]},[[0,"ticketCompleted","gridFilledHandler"],[0,"gridDirty","gridDirtyHandler"],[0,"deleteTicket","deleteTicketHandler"],[0,"modalCloseEvent","modalCloseEvent"],[0,"stakeChange","stakeChangeHandler"],[0,"multiplierChange","multiplierChangeHandler"]]]]],["helper-pagination.cjs",[[1,"helper-pagination",{"firstPage":[1540,"first-page"],"previousPage":[1540,"previous-page"],"offset":[1538],"limit":[1538],"total":[1538],"language":[1],"offsetInt":[32],"lastPage":[32],"limitInt":[32],"totalInt":[32],"pagesArray":[32],"endInt":[32]}]]],["lottery-bullet_2.cjs",[[1,"lottery-grid",{"ticketId":[2,"ticket-id"],"totalNumbers":[2,"total-numbers"],"gameId":[1,"game-id"],"maximumAllowed":[2,"maximum-allowed"],"minimumAllowed":[2,"minimum-allowed"],"selectable":[4],"selectedNumbers":[1,"selected-numbers"],"displaySelected":[4,"display-selected"],"language":[1],"gridIndex":[2,"grid-index"],"numbers":[32]},[[0,"lotteryBulletSelection","lotteryBulletSelectionHandler"],[4,"resetSelection","resetSelectionHandler"],[4,"autoSelection","autoSelectionHandler"]]],[1,"lottery-bullet",{"value":[1],"selectable":[4],"isSelected":[4,"is-selected"]}]]],["helper-filters_2.cjs",[[1,"lottery-draw-results",{"endpoint":[1],"gameId":[1,"game-id"],"language":[1],"playerId":[1,"player-id"],"drawMode":[4,"draw-mode"],"drawId":[1,"draw-id"],"gameName":[1,"game-name"],"multiplier":[32],"ticketData":[32],"isLoading":[32],"drawResults":[32],"rules":[32],"toggleDrawer":[32],"hasErrors":[32],"errorText":[32]}],[1,"helper-filters",{"showFilterId":[4,"show-filter-id"],"activateTicketSearch":[4,"activate-ticket-search"],"gameId":[1,"game-id"],"playerId":[1,"player-id"],"session":[1],"postMessage":[4,"post-message"],"language":[1],"showFilterModal":[32],"showClearButton":[32],"filterData":[32],"filterDataReset":[32]},[[0,"modalCloseEvent","modalCloseEvent"]]]]],["lottery-draw-results-history.cjs",[[1,"lottery-draw-results-history",{"endpoint":[1],"gameId":[1,"game-id"],"numberOfResults":[2,"number-of-results"],"language":[1],"drawData":[32],"displayAllDrawsResults":[32],"showQuickFilters":[32],"winningDataSetsData":[32]},[[0,"filterSelection","filtersHandler"],[0,"filterSelectionReset","clearFiltersHandler"]]]]],["lottery-ticket.cjs",[[1,"lottery-ticket",{"endpoint":[1],"gameId":[1,"game-id"],"numberOfGrids":[2,"number-of-grids"],"multipleDraws":[4,"multiple-draws"],"ticketId":[2,"ticket-id"],"resetButton":[4,"reset-button"],"autoPick":[4,"auto-pick"],"language":[1],"multiplier":[32],"numberOfDraws":[32],"isLoading":[32],"hasErrors":[32],"ticketDone":[32]},[[0,"gridFilled","gridFilledHandler"]]]]],["lottery-ticket-controller.cjs",[[1,"lottery-ticket-controller",{"endpoint":[1],"ticketId":[2,"ticket-id"],"ticketDescription":[1,"ticket-description"],"gameId":[1,"game-id"],"postMessage":[4,"post-message"],"eventName":[1,"event-name"],"collapsed":[4],"numberOfGrids":[2,"number-of-grids"],"last":[4],"language":[1],"autoPick":[4,"auto-pick"],"resetButton":[4,"reset-button"]},[[0,"helperAccordionAction","helperAccordionActionHandler"]]]]],["helper-tabs.cjs",[[1,"helper-tabs",{"disabled":[4],"label":[1],"selected":[4],"cmsEndpoint":[1,"cms-endpoint"],"selectedIndex":[1538,"selected-index"],"tabs":[16]}]]],["helper-accordion.cjs",[[1,"helper-accordion",{"headerTitle":[1,"header-title"],"headerSubtitle":[1,"header-subtitle"],"description":[1],"footer":[4],"deleteTab":[4,"delete-tab"],"postMessage":[4,"post-message"],"eventName":[1,"event-name"],"collapsed":[4],"language":[1],"showContent":[32]}]]],["helper-tab.cjs",[[1,"helper-tab",{"selectedIndex":[2,"selected-index"],"cmsEndpoint":[1,"cms-endpoint"]}]]],["lottery-game-details.cjs",[[1,"lottery-game-details"]]],["helper-modal.cjs",[[1,"helper-modal",{"titleModal":[1,"title-modal"],"visible":[1540]}]]]], options);
 });

package/dist/cjs/lottery-ticket-controller.cjs.entry.js

@@ -0,0 +1,69 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-e5770ba2.js');
+
+const lotteryTicketControllerCss = ":host{display:block}";
+
+const LotteryTicketController = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.deleteTicketEvent = index.createEvent(this, "deleteTicket", 7);
+    /**
+     * Endpoint URL for the source of data (NorWAy standard)
+     */
+    this.endpoint = '';
+    /**
+     * Ticket number
+     */
+    this.ticketId = 1;
+    /**
+     * Activates postMessages as events for actions from the widget
+     */
+    this.postMessage = false;
+    /**
+     * Name of the event emitter by the action button
+     */
+    this.eventName = 'deleteTicketAction';
+    /**
+     * Collapsed
+     */
+    this.collapsed = true;
+    /**
+     * Number of grids?
+     */
+    this.numberOfGrids = 1;
+    /**
+     * This toggles if the last ticket added should be expanded or not
+     */
+    this.last = false;
+    /**
+     * Language
+     */
+    this.language = 'en';
+    /**
+     * Shows the auto-pick button
+     */
+    this.autoPick = false;
+    /**
+     * Shows the reset button
+     */
+    this.resetButton = false;
+  }
+  // @TODO fix the `any` type
+  helperAccordionActionHandler() {
+    if (this.postMessage) {
+      window.postMessage({ type: this.eventName }, window.location.href);
+    }
+    this.deleteTicketEvent.emit({
+      ticketId: this.ticketId
+    });
+  }
+  render() {
+    return (index.h("div", null, index.h("helper-accordion", { "header-title": 'Ticket ' + this.ticketId, "header-subtitle": this.ticketDescription, footer: true, "delete-tab": true, collapsed: !this.last || this.collapsed, language: this.language }, index.h("div", { slot: "accordionContent" }, index.h("lottery-ticket", { endpoint: this.endpoint, "game-id": this.gameId, "ticket-id": this.ticketId, "number-of-grids": this.numberOfGrids, language: this.language, "reset-button": this.resetButton, "auto-pick": this.autoPick })))));
+  }
+};
+LotteryTicketController.style = lotteryTicketControllerCss;
+
+exports.lottery_ticket_controller = LotteryTicketController;

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

@@ -0,0 +1,146 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-e5770ba2.js');
+
+const DEFAULT_LANGUAGE = 'en';
+const SUPPORTED_LANGUAGES = ['ro', 'en'];
+const TRANSLATIONS = {
+  en: {
+    loading: 'Loading, please wait ...',
+    error: 'It was an error while trying to fetch the data',
+    grid: 'Grid',
+    multiplier: 'Multiplier',
+    numberOfDraws: 'Number of draws',
+    wagerPerDraw: 'Wager per draw',
+    resetButton: 'Reset',
+    autoButton: 'I feel lucky'
+  },
+  ro: {
+    loading: 'Se incarca, va rugam asteptati ...',
+    error: 'A fost o eroare in timp ce asteptam datele',
+    grid: 'Grid',
+    multiplier: 'Multiplicator',
+    numberOfDraws: 'Numarul de extrageri',
+    wagerPerDraw: 'Pariul per extragere',
+    resetButton: 'Reseteaza',
+    autoButton: 'Ma simt norocos'
+  },
+};
+const translate = (key, customLang) => {
+  const lang = customLang;
+  return TRANSLATIONS[lang !== undefined && SUPPORTED_LANGUAGES.includes(lang) ? lang : DEFAULT_LANGUAGE][key];
+};
+
+const lotteryTicketCss = "@import url(\"https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap\");:host{display:block;font-family:\"Roboto\", sans-serif}.Toggle{cursor:pointer;margin-top:20px;display:inline-block}.ToggleSwitch{display:inline-block;background:#707070;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%, #F1F1F1 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:#00ABA4}.ToggleCheckbox:checked+.ToggleSwitch:before{left:38px}.ToggleCheckbox{position:absolute;visibility:hidden}.Label{margin-right:5px;position:relative;top:2px;font-size:14px;font-weight:lighter;color:#000}input[type=number]{-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none}.NumberInput,.WagerInput{margin-top:10px;display:inline-flex;align-items:center}.NumberInput,.NumberInput *{box-sizing:border-box}.NumberInput button{cursor:pointer;outline:none;-webkit-appearance:none;background-color:transparent;border:none;align-items:center;justify-content:center;height:20px;margin:0;position:relative}.NumberInput button:after{display:inline-block;position:absolute;transform:translate(-50%, -50%) rotate(180deg);width:30px;align-items:center;text-align:center}.NumberInput button.Plus:after{transform:translate(-50%, -50%) rotate(0deg);width:30px;display:inline-flex;align-items:center;text-align:center}.NumberInput input[type=number],.WagerInput input[type=number]{max-width:50px;display:inline-flex;align-items:center;padding:4px 10px;text-align:center}.NumberInput input[type=number] .WagerInputTitle,.WagerInput input[type=number] .WagerInputTitle{font-size:14px;color:#000;padding:10px}.InputDefault{background-color:#F1F1F1;border-radius:4px;padding:5px;border:solid 1px #D4D4D4;color:#707070}.AutoButton{cursor:pointer;display:block;border-radius:4px;padding:8px 25px;width:max-content;margin:5px 0;border:1px solid #00958f;background:#FFF;color:#000;font-size:12px;transition:all 0.2s linear;text-transform:uppercase;text-align:center;letter-spacing:0}.AutoButton:active{background:#00958f;color:#FFF}.ResetButton{cursor:pointer;display:block;border-radius:4px;padding:8px 25px;width:max-content;margin:5px 0;color:#000;font-size:12px;transition:all 0.2s linear;text-transform:uppercase;text-align:center;letter-spacing:0;background:#FF3D00;border:1px solid #FF3D00;color:#FFF}.ResetButton:hover{background:#FF6536;border:1px solid #FF3D00}.TicketGridBullets{background:#f1f1f1;border-radius:4px;padding:20px;margin-top:5px}.TicketGridBullets .TicketGridTitle{margin-top:0px}";
+
+const LotteryTicket = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.ticketCompleted = index.createEvent(this, "ticketCompleted", 7);
+    this.autoSelection = index.createEvent(this, "autoSelection", 7);
+    this.resetSelection = index.createEvent(this, "resetSelection", 7);
+    this.stakeChange = index.createEvent(this, "stakeChange", 7);
+    this.multiplierChange = index.createEvent(this, "multiplierChange", 7);
+    /**
+     * Number of grids of a ticket
+     */
+    this.numberOfGrids = 1;
+    /**
+     * Option to have the ticket registered for multiple draws
+     */
+    this.multipleDraws = true;
+    /**
+     * Shows the reset button
+     */
+    this.resetButton = false;
+    /**
+     * Shows the auto-pick button
+     */
+    this.autoPick = false;
+    /**
+     * Language
+     */
+    this.language = 'en';
+    this.multiplier = false;
+    this.numberOfDraws = 1;
+    this.isLoading = true;
+    this.hasErrors = false;
+    this.ticketDone = false;
+  }
+  connectedCallback() {
+    let url = new URL(`${this.endpoint}/games/${this.gameId}`);
+    fetch(url.href)
+      .then((response) => {
+      if (response.ok) {
+        return response.json();
+      }
+      else {
+        // Throw error
+        this.hasErrors = true;
+      }
+    })
+      .then((data) => {
+      this.isLoading = false;
+      this.gameData = data;
+      this.grids = [...Array(data.rules.boards.length).keys()];
+    })
+      .catch((err) => {
+      this.isLoading = false;
+      this.hasErrors = true;
+      console.error('Error!', err);
+    });
+  }
+  multiplierChangeHandler(e) {
+    this.multiplier = e.target ? e.target.checked : false;
+    this.multiplierChange.emit(this.multiplier);
+  }
+  drawsChangeHandler(event) {
+    this.ticket = Object.assign(Object.assign({}, this.ticket), { draws: event });
+    this.ticketCompleted.emit(this.ticket);
+  }
+  gridFilledHandler(event) {
+    this.ticket = Object.assign(Object.assign({}, event.detail), { draws: this.numberOfDraws });
+    this.ticketDone = true;
+    this.ticketCompleted.emit(this.ticket);
+  }
+  toggleAutoSelection() {
+    this.ticketDone = true;
+    this.autoSelection.emit(this.ticketId);
+  }
+  toggleResetSelection() {
+    this.ticketDone = false;
+    this.resetSelection.emit(this.ticketId);
+  }
+  changeStake(event) {
+    this.stakeChange.emit({
+      ticketId: this.ticketId,
+      stake: event.target.value
+    });
+  }
+  render() {
+    if (this.isLoading) {
+      return (index.h("div", null, index.h("p", null, translate('loading', this.language))));
+    }
+    else {
+      if (this.hasErrors) {
+        return (index.h("div", null, index.h("p", null, translate('error', this.language))));
+      }
+      else {
+        const { rules } = this.gameData;
+        return (index.h("div", { class: "TicketContainer" }, index.h("p", null, this.gameData.name), this.resetButton && this.ticketDone &&
+          index.h("a", { class: "ResetButton", onClick: () => this.toggleResetSelection() }, translate('resetButton', this.language)), this.autoPick && !this.ticketDone &&
+          index.h("a", { class: "AutoButton", onClick: () => this.toggleAutoSelection() }, translate('autoButton', this.language)), this.grids.map((item, index$1) => index.h("div", { class: "TicketGridBullets" }, index.h("p", { class: "TicketGridTitle" }, translate('grid', this.language), " ", item), index.h("lottery-grid", { "grid-index": index$1, "maximum-allowed": rules.boards[index$1].maximumAllowed, "minimum-allowed": rules.boards[index$1].minimumAllowed, "total-numbers": rules.boards[index$1].totalNumbers, selectable: true, "reset-button": true, "auto-pick": true, "game-id": this.gameId, "ticket-id": this.ticketId, language: this.language }))), rules.multiplier &&
+          index.h("div", null, index.h("label", { class: "Toggle" }, index.h("label", { class: "Label" }, translate('multiplier', this.language), ": "), index.h("input", { class: "ToggleCheckbox", type: "checkbox", onInput: (e) => this.multiplierChangeHandler(e) }), index.h("div", { class: "ToggleSwitch" }))), this.multipleDraws &&
+          index.h("div", { class: "TicketDraws" }, index.h("label", { class: "Label" }, translate('numberOfDraws', this.language), ": "), index.h("div", { class: "NumberInput" }, index.h("button", { onClick: () => this.numberOfDraws > 1 ? this.numberOfDraws-- : this.numberOfDraws = 1, class: "Minus" }, "-"), index.h("input", { class: "InputDefault", min: "1", value: this.numberOfDraws, type: "number" }), index.h("button", { onClick: () => this.numberOfDraws++, class: "Plus" }, "+"))), index.h("label", { class: "Label" }, translate('wagerPerDraw', this.language), ": "), index.h("div", { class: "WagerInput" }, rules.stakes.length > 1 ? index.h("div", null, index.h("select", { class: "InputDefault", onChange: (event) => this.changeStake(event) }, rules.stakes.map((item) => index.h("option", { value: item.amount }, item.amount, " ", item.currency)))) : index.h("div", null, index.h("input", { min: "1", value: rules.stakes[0].amount, type: "number", disabled: true }), index.h("p", { class: "WagerInputTitle" }, rules.stakes[0].currency)))));
+      }
+    }
+  }
+  static get watchers() { return {
+    "numberOfDraws": ["drawsChangeHandler"]
+  }; }
+};
+LotteryTicket.style = lotteryTicketCss;
+
+exports.lottery_ticket = LotteryTicket;