@everymatrix/lottery-draw-results 0.0.3

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

@@ -0,0 +1,365 @@
+import { Component, Prop, h, State } from '@stencil/core';
+import { translate } from '../../utils/locale.utils';
+import '@everymatrix/lottery-grid';
+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'
+};
+export class LotteryDrawResults {
+  constructor() {
+    /**
+     * Language of the widget
+     */
+    this.language = 'en';
+    /**
+     * Shows only the last draw
+     */
+    this.drawMode = false;
+    this.gameName = '';
+    this.multiplier = 5.434;
+    this.ticketData = {};
+    this.isLoading = true;
+    this.drawResults = [];
+    this.rules = {};
+    this.toggleDrawer = [false];
+    this.hasErrors = false;
+    this.errorText = '';
+    this.changeBox = (index) => {
+      this.toggleDrawer = this.toggleDrawer.map((item, itemIndex) => {
+        if (itemIndex == index) {
+          return !item;
+        }
+        return item;
+      });
+      if (index >= this.toggleDrawer.length) {
+        this.toggleDrawer.push(true);
+      }
+    };
+  }
+  connectedCallback() {
+    let promises = [];
+    promises.push(this.getGameData());
+    if (this.playerId) {
+      promises.push(this.getTicketData());
+    }
+    if (this.drawId) {
+      promises.push(this.getDrawData());
+    }
+    Promise.all(promises)
+      .then(() => {
+      this.isLoading = false;
+    });
+  }
+  getDrawData() {
+    return new Promise((resolve, reject) => {
+      let url = new URL(`${this.endpoint}/games/${this.gameId}/draws/${this.drawId}`);
+      fetch(url.href)
+        .then((response) => {
+        // @TODO EXCEPTIONS
+        return response.json();
+      })
+        .then((data) => {
+        this.drawData = data;
+        resolve(true);
+      })
+        .catch((err) => {
+        reject(err);
+      });
+    });
+  }
+  getGameData() {
+    return new Promise((resolve, reject) => {
+      let url = new URL(`${this.endpoint}/games/${this.gameId}`);
+      fetch(url.href)
+        .then((response) => {
+        return response.json();
+      })
+        .then((data) => {
+        this.rules = {
+          maximumAllowed: data.rules.boards[0].maximumAllowed,
+          totalNumbers: data.rules.boards[0].totalNumbers
+        };
+        resolve(true);
+      })
+        .catch((err) => {
+        this.isLoading = false;
+        this.hasErrors = true;
+        this.errorText = err;
+        reject(err);
+      });
+    });
+  }
+  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 ..."));
+    }
+    else if (this.hasErrors) {
+      h("p", null, this.errorText);
+    }
+    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" }, 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))))))));
+    }
+  }
+  static get is() { return "lottery-draw-results"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["lottery-draw-results.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["lottery-draw-results.css"]
+  }; }
+  static get properties() { return {
+    "endpoint": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Endpoint URL for the source of data"
+      },
+      "attribute": "endpoint",
+      "reflect": false
+    },
+    "gameId": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "GameID of the lottery game"
+      },
+      "attribute": "game-id",
+      "reflect": false
+    },
+    "language": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Language of the widget"
+      },
+      "attribute": "language",
+      "reflect": false,
+      "defaultValue": "'en'"
+    },
+    "playerId": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Player ID"
+      },
+      "attribute": "player-id",
+      "reflect": false
+    },
+    "drawMode": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Shows only the last draw"
+      },
+      "attribute": "draw-mode",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "drawId": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Shows results for a specific drawID (option)"
+      },
+      "attribute": "draw-id",
+      "reflect": false
+    },
+    "gameName": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "game-name",
+      "reflect": false,
+      "defaultValue": "''"
+    }
+  }; }
+  static get states() { return {
+    "multiplier": {},
+    "ticketData": {},
+    "isLoading": {},
+    "drawResults": {},
+    "rules": {},
+    "toggleDrawer": {},
+    "hasErrors": {},
+    "errorText": {}
+  }; }
+}

package/dist/collection/index.js

@@ -0,0 +1 @@
+export * from './components';

package/dist/collection/utils/locale.utils.js

@@ -0,0 +1,30 @@
+const DEFAULT_LANGUAGE = 'en';
+const SUPPORTED_LANGUAGES = ['ro', 'en'];
+const TRANSLATIONS = {
+  en: {
+    drawResultsHeader: 'Last draw results',
+    drawId: 'Draw ID',
+    drawName: 'Game name',
+    drawDate: 'Draw Date',
+    drawNumbersGridDraw: 'Draw numbers Grid A',
+    drawNumbersGridTicket: 'Draw numbers Grid B',
+    ticketResult: 'Ticket result',
+    amountWon: 'Amount won',
+    numberOfDraws: 'Number of draws'
+  },
+  ro: {
+    drawResultsHeader: 'Ultimele rezultate extragere',
+    drawId: 'Id extragere',
+    drawName: 'Numele jocului',
+    drawDate: 'Data extragerii',
+    drawNumbersGridDraw: 'Numerele extrase Grid A',
+    drawNumbersGridTicket: 'Numerele extrase Grid B',
+    ticketResult: 'Rezultatul biletului',
+    amountWon: 'Suma castigata',
+    numberOfDraws: 'Numarul de extrageri'
+  },
+};
+export const translate = (key, customLang) => {
+  const lang = customLang;
+  return TRANSLATIONS[lang !== undefined && SUPPORTED_LANGUAGES.includes(lang) ? lang : DEFAULT_LANGUAGE][key];
+};

package/dist/collection/utils/utils.js

@@ -0,0 +1,3 @@
+export function format(first, middle, last) {
+  return ((first || '') + (middle ? ` ${middle}` : '') + (last ? ` ${last}` : ''));
+}

package/dist/components/index.d.ts

@@ -0,0 +1,22 @@
+/* LotteryDrawResults custom elements */
+export { LotteryDrawResults as LotteryDrawResults } from '../types/components/lottery-draw-results/lottery-draw-results';
+
+/**
+ * Used to manually set the base path where assets can be found.
+ * If the script is used as "module", it's recommended to use "import.meta.url",
+ * such as "setAssetPath(import.meta.url)". Other options include
+ * "setAssetPath(document.currentScript.src)", or using a bundler's replace plugin to
+ * dynamically set the path at build time, such as "setAssetPath(process.env.ASSET_PATH)".
+ * But do note that this configuration depends on how your script is bundled, or lack of
+ * bundling, and where your assets can be loaded from. Additionally custom bundling
+ * will have to ensure the static assets are copied to its build directory.
+ */
+export declare const setAssetPath: (path: string) => void;
+
+export interface SetPlatformOptions {
+  raf?: (c: FrameRequestCallback) => number;
+  ael?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
+  rel?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
+}
+export declare const setPlatformOptions: (opts: SetPlatformOptions) => void;
+export * from '../types';

package/dist/components/index.js

@@ -0,0 +1,2 @@
+export { setAssetPath, setPlatformOptions } from '@stencil/core/internal/client';
+export { LotteryDrawResults, defineCustomElement as defineCustomElementLotteryDrawResults } from './lottery-draw-results.js';

package/dist/components/lottery-draw-results.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface LotteryDrawResults extends Components.LotteryDrawResults, HTMLElement {}
+export const LotteryDrawResults: {
+  prototype: LotteryDrawResults;
+  new (): LotteryDrawResults;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

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

@@ -0,0 +1,209 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import '@everymatrix/lottery-grid';
+
+const DEFAULT_LANGUAGE = 'en';
+const SUPPORTED_LANGUAGES = ['ro', 'en'];
+const TRANSLATIONS = {
+  en: {
+    drawResultsHeader: 'Last draw results',
+    drawId: 'Draw ID',
+    drawName: 'Game name',
+    drawDate: 'Draw Date',
+    drawNumbersGridDraw: 'Draw numbers Grid A',
+    drawNumbersGridTicket: 'Draw numbers Grid B',
+    ticketResult: 'Ticket result',
+    amountWon: 'Amount won',
+    numberOfDraws: 'Number of draws'
+  },
+  ro: {
+    drawResultsHeader: 'Ultimele rezultate extragere',
+    drawId: 'Id extragere',
+    drawName: 'Numele jocului',
+    drawDate: 'Data extragerii',
+    drawNumbersGridDraw: 'Numerele extrase Grid A',
+    drawNumbersGridTicket: 'Numerele extrase Grid B',
+    ticketResult: 'Rezultatul biletului',
+    amountWon: 'Suma castigata',
+    numberOfDraws: 'Numarul de extrageri'
+  },
+};
+const translate = (key, customLang) => {
+  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}.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 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$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    /**
+     * Language of the widget
+     */
+    this.language = 'en';
+    /**
+     * Shows only the last draw
+     */
+    this.drawMode = false;
+    this.gameName = '';
+    this.multiplier = 5.434;
+    this.ticketData = {};
+    this.isLoading = true;
+    this.drawResults = [];
+    this.rules = {};
+    this.toggleDrawer = [false];
+    this.hasErrors = false;
+    this.errorText = '';
+    this.changeBox = (index) => {
+      this.toggleDrawer = this.toggleDrawer.map((item, itemIndex) => {
+        if (itemIndex == index) {
+          return !item;
+        }
+        return item;
+      });
+      if (index >= this.toggleDrawer.length) {
+        this.toggleDrawer.push(true);
+      }
+    };
+  }
+  connectedCallback() {
+    let promises = [];
+    promises.push(this.getGameData());
+    if (this.playerId) {
+      promises.push(this.getTicketData());
+    }
+    if (this.drawId) {
+      promises.push(this.getDrawData());
+    }
+    Promise.all(promises)
+      .then(() => {
+      this.isLoading = false;
+    });
+  }
+  getDrawData() {
+    return new Promise((resolve, reject) => {
+      let url = new URL(`${this.endpoint}/games/${this.gameId}/draws/${this.drawId}`);
+      fetch(url.href)
+        .then((response) => {
+        // @TODO EXCEPTIONS
+        return response.json();
+      })
+        .then((data) => {
+        this.drawData = data;
+        resolve(true);
+      })
+        .catch((err) => {
+        reject(err);
+      });
+    });
+  }
+  getGameData() {
+    return new Promise((resolve, reject) => {
+      let url = new URL(`${this.endpoint}/games/${this.gameId}`);
+      fetch(url.href)
+        .then((response) => {
+        return response.json();
+      })
+        .then((data) => {
+        this.rules = {
+          maximumAllowed: data.rules.boards[0].maximumAllowed,
+          totalNumbers: data.rules.boards[0].totalNumbers
+        };
+        resolve(true);
+      })
+        .catch((err) => {
+        this.isLoading = false;
+        this.hasErrors = true;
+        this.errorText = err;
+        reject(err);
+      });
+    });
+  }
+  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 ..."));
+    }
+    else if (this.hasErrors) {
+      h("p", null, this.errorText);
+    }
+    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" }, 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))))))));
+    }
+  }
+  static get style() { return lotteryDrawResultsCss; }
+}, [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]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["lottery-draw-results"];
+  components.forEach(tagName => { switch (tagName) {
+    case "lottery-draw-results":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, LotteryDrawResults$1);
+      }
+      break;
+  } });
+}
+
+const LotteryDrawResults = LotteryDrawResults$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { LotteryDrawResults, defineCustomElement };