@everymatrix/lottery-draw-results 0.1.6 → 0.1.20

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

@@ -1,6 +1,6 @@
 'use strict';
 
-const index = require('./index-33a98fae.js');
+const index = require('./index-43800d3c.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([["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]}]]]], options);
+  return index.bootstrapLazy([["lottery-bullet_3.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"],"ticketNumbers":[1,"ticket-numbers"],"sessionId":[1,"session-id"],"clientStyling":[1,"client-styling"],"clientStylingUrlContent":[1,"client-styling-url-content"],"multiplier":[32],"isLoading":[32],"rules":[32],"toggleDrawer":[32],"hasErrors":[32],"errorText":[32],"ticketData":[32],"ticketDataLoaded":[32],"ticketDraws":[32],"hasDrawNumbers":[32],"limitStylingAppends":[32]}],[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"]}]]]], options);
 });

package/dist/collection/collection-manifest.json

@@ -7,12 +7,19 @@
     "version": "2.15.2",
     "typescriptVersion": "4.5.4"
   },
-  "collections": [],
-  "bundles": [
+  "collections": [
     {
-      "components": [
-        "lottery-draw-results"
+      "name": "@everymatrix/lottery-bullet",
+      "tags": [
+        "lottery-bullet"
+      ]
+    },
+    {
+      "name": "@everymatrix/lottery-grid",
+      "tags": [
+        "lottery-grid"
       ]
     }
-  ]
+  ],
+  "bundles": []
 }

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

@@ -17,6 +17,16 @@
 .DrawResultsArea {
   margin-top: 15px;
 }
+.DrawResultsArea.TicketDraws .Content {
+  padding: 0;
+  border: 0;
+}
+.DrawResultsArea.TicketDraws .DrawResultsBody {
+  padding: 0;
+  margin-bottom: 5px;
+  border-radius: 0;
+  border: 0;
+}
 
 .DrawResultsSection {
   max-width: 600px;
@@ -40,25 +50,28 @@
   padding-top: 15px;
 }
 
-.DrawMultipler label {
-  display: block;
-  margin: 15px 0;
-}
-
 .DrawResultsBody {
-  padding: 0px 20px;
+  padding: 20px;
   margin-bottom: 5px;
   border-radius: 0 0 4px 4px;
   border: 1px solid #009993;
 }
-.DrawResultsBody .DrawNumbersGrid {
-  font-size: 14px;
+.DrawResultsBody > div {
+  margin: 10px 0;
 }
 .DrawResultsBody .NumberOfDrawsContainer {
   display: table;
   width: 100%;
 }
 
+.DrawNumbersGrid {
+  margin-bottom: 15px;
+}
+.DrawNumbersGrid label {
+  display: block;
+  margin-bottom: 10px;
+}
+
 .Toggle {
   cursor: pointer;
   display: inline-block;
@@ -109,17 +122,23 @@
 }
 
 .Label {
-  margin-right: 5px;
   position: relative;
-  top: 2px;
 }
 
 .DrawTicketsContainer {
-  margin: 30px auto;
+  display: flex;
+  flex-direction: column;
+  margin: 20px auto 0;
+}
+
+.DrawMultipler {
+  margin-top: 15px;
 }
 
 .ExpandableBoxes {
   position: relative;
+  display: flex;
+  flex-direction: column;
 }
 
 .ExpandableBox {
@@ -127,13 +146,14 @@
   font-weight: lighter;
   width: 100%;
   height: 100%;
-  max-height: 70px;
+  max-height: 80px;
   float: left;
   margin: 0 0 20px 0;
-  border: 1px solid #f1f1f1;
+  border: 1px solid #009993;
   background: #fff;
   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;
@@ -142,6 +162,9 @@
   overflow: hidden;
   box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
 }
+.ExpandableBox:last-of-type {
+  margin-bottom: 0;
+}
 
 .ExpandableBox.ShowBox {
   max-height: 400px;

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

@@ -43,13 +43,75 @@ export class LotteryDrawResults {
      * The ticket draw count
      */
     this.ticketDrawCount = 0;
+    /**
+     * The ticket winning numbers
+     */
+    this.ticketNumbers = '';
+    /**
+     * The session id
+     */
+    this.sessionId = '';
+    /**
+     * Client custom styling via string
+     */
+    this.clientStyling = '';
+    /**
+     * Client custom styling via url content
+     */
+    this.clientStylingUrlContent = '';
     this.multiplier = 3;
     this.isLoading = true;
-    this.drawResults = [];
     this.rules = {};
     this.toggleDrawer = [false];
     this.hasErrors = false;
     this.errorText = '';
+    this.ticketData = [];
+    this.ticketDataLoaded = false;
+    this.ticketDraws = [];
+    this.hasDrawNumbers = false;
+    this.limitStylingAppends = false;
+    this.getTicketsData = () => {
+      let url = new URL(`${this.endpoint}/tickets`);
+      let drawOptions = {
+        method: "GET",
+        headers: {
+          'Content-Type': "application/json",
+          'Accept': 'application/json',
+          'Authorization': `Bearer ${this.sessionId}`
+        },
+      };
+      fetch(url.href, drawOptions)
+        .then((response) => {
+        return response.json();
+      })
+        .then((data) => {
+        if (data) {
+          this.ticketData = data;
+          this.ticketDataLoaded = true;
+        }
+        return this.ticketData;
+      }).then((response) => {
+        response.forEach(ticket => {
+          if (ticket.drawResults.length) {
+            ticket.drawResults.forEach(draw => {
+              fetch(`${this.endpoint}/games/${this.gameId}/draws/${draw.drawId}`)
+                .then((response) => {
+                return response.json();
+              })
+                .then((data) => {
+                // check if draw id is unique
+                if (!this.ticketDraws.some(el => el.drawId === draw.drawId)) {
+                  this.ticketDraws.push({ drawId: draw.drawId, drawNumbers: data.winningNumbers });
+                }
+              });
+            });
+          }
+          return this.ticketDraws;
+        });
+      }).then(() => {
+        this.hasDrawNumbers = true;
+      });
+    };
     this.changeBox = (index) => {
       this.toggleDrawer = this.toggleDrawer.map((item, itemIndex) => {
         if (itemIndex == index) {
@@ -61,6 +123,18 @@ export class LotteryDrawResults {
         this.toggleDrawer.push(true);
       }
     };
+    this.setClientStyling = () => {
+      let sheet = document.createElement('style');
+      sheet.innerHTML = this.clientStyling;
+      this.stylingContainer.prepend(sheet);
+    };
+    this.setClientStylingURL = () => {
+      let cssFile = document.createElement('style');
+      setTimeout(() => {
+        cssFile.innerHTML = this.clientStylingUrlContent;
+        this.stylingContainer.prepend(cssFile);
+      }, 1);
+    };
   }
   connectedCallback() {
     let promises = [];
@@ -68,14 +142,28 @@ export class LotteryDrawResults {
     if (this.drawId) {
       promises.push(this.getDrawData());
     }
+    if (!this.drawMode) {
+      this.getTicketsData();
+    }
     Promise.all(promises)
       .then(() => {
       this.isLoading = false;
     });
   }
-  getDrawData() {
+  componentDidRender() {
+    // start custom styling area
+    if (!this.limitStylingAppends && this.stylingContainer) {
+      if (this.clientStyling)
+        this.setClientStyling();
+      if (this.clientStylingUrlContent)
+        this.setClientStylingURL();
+      this.limitStylingAppends = true;
+    }
+    // end custom styling area
+  }
+  getDrawData(drawID) {
     return new Promise((resolve, reject) => {
-      let url = new URL(`${this.endpoint}/games/${this.gameId}/draws/${this.drawId}`);
+      let url = new URL(`${this.endpoint}/games/${this.gameId}/draws/${drawID ? drawID : this.drawId}`);
       fetch(url.href)
         .then((response) => {
         // @TODO EXCEPTIONS
@@ -85,6 +173,9 @@ export class LotteryDrawResults {
         this.drawData = data;
         resolve(true);
         this.isLoading = false;
+        if (drawID) {
+          return this.drawData.winningNumbers;
+        }
       })
         .catch((err) => {
         reject(err);
@@ -124,105 +215,99 @@ export class LotteryDrawResults {
       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" },
-              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),
+      return (h("section", { class: "DrawResultsSection", ref: el => this.stylingContainer = el }, this.drawMode ?
+        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),
                 ": ",
-                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" },
+                this.drawData.date.slice(0, 10))),
+            h("div", { class: "DrawResultsBody" },
+              h("div", { class: "DrawNumbersGrid" },
+                h("p", null,
+                  translate('drawNumbersGridDraw', this.language),
+                  "0:"),
+                h("div", { class: "BulletContainer" },
+                  h("lottery-grid", { "maximum-allowed": this.rules.maximumAllowed, "total-numbers": this.rules.totalNumbers, "selected-numbers": this.drawData.winningNumbers.join(','), "display-selected": true, selectable: false, language: this.language, "grid-type": 'ticket', "client-styling": this.clientStyling, "client-styling-url-content": this.clientStylingUrlContent })),
+                h("div", { class: "DrawMultipler" },
+                  h("label", { class: "Label" },
+                    translate('multiplier', this.language),
+                    " ",
+                    this.multiplier))))))
+        :
+          h("div", { class: "DrawResultsArea TicketDraws" },
+            h("div", { class: "DrawResultsBody" },
+              h("div", { class: "TicketIdContainer" },
+                h("label", { class: "Label" },
+                  translate('ticketId', this.language),
+                  ": ",
+                  h("span", null, this.ticketId))),
+              h("div", { class: "TicketAmountContainer" },
+                h("label", { class: "Label" },
+                  translate('ticketAmount', this.language),
+                  " ",
+                  h("span", null, this.ticketAmount))),
+              h("div", { class: "DrawNumbersGrid" },
+                h("label", { class: "Label" },
+                  translate('drawNumbersGridTicket', this.language),
+                  "0:"),
+                h("div", { class: "BulletContainer" },
+                  h("lottery-grid", { "maximum-allowed": this.rules.maximumAllowed, "total-numbers": this.rules.totalNumbers, "selected-numbers": JSON.parse(this.ticketNumbers).join(','), selectable: false, "display-selected": true, language: this.language, "grid-type": 'ticket', "client-styling": this.clientStyling, "client-styling-url-content": this.clientStylingUrlContent }))),
+              h("div", { class: "DrawMultipler" },
+                h("label", { class: "Label" },
+                  translate('multiplier', this.language),
+                  " ",
+                  JSON.stringify(this.ticketMultiplier))),
+              h("div", { class: "NumberOfDrawsContainer" },
+                h("label", { class: "Label" },
+                  translate('numberOfDraws', this.language),
+                  ": ",
+                  this.ticketDrawCount),
+                h("div", { class: "DrawTicketsContainer" }, this.ticketData.map((ticket) => h("div", { class: "ExpandableBoxes" }, ticket.drawResults.length ?
+                  h("div", null, ticket.id == this.ticketId && ticket.drawResults.map((item, index) => 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.state)),
+                    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('amountWon', this.language),
+                        translate('drawDate', this.language),
                         ": ",
-                        Number(item.amount).toLocaleString('en'),
+                        item.updatedAt.slice(0, 10),
+                        " | ",
+                        item.updatedAt.slice(11, 19))),
+                    h("div", { class: "DrawNumbersGrid" }, this.hasDrawNumbers && this.ticketDraws.map((ticketDraw) => item.drawId && item.drawId === ticketDraw.drawId &&
+                      h("div", null,
+                        h("label", { class: "Label" },
+                          translate('drawNumbersGridDraw', this.language),
+                          "A:"),
+                        h("lottery-grid", { "maximum-allowed": this.rules.maximumAllowed, "total-numbers": this.rules.totalNumbers, "selected-numbers": ticketDraw.drawNumbers.join(','), selectable: false, "display-selected": true, language: this.language, "grid-type": 'ticket', "client-styling": this.clientStyling, "client-styling-url-content": this.clientStylingUrlContent })))),
+                    h("div", { class: "DrawMultipler" },
+                      h("label", { class: "Label" },
+                        translate('multiplier', this.language),
                         " ",
-                        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" },
-                      translate('multiplier', this.language),
-                      " ",
-                      this.multiplier))))))));
+                        item.multiplier)))))
+                  :
+                    h("span", null)))))))));
     }
   }
   static get is() { return "lottery-draw-results"; }
@@ -464,15 +549,91 @@ export class LotteryDrawResults {
       "attribute": "ticket-draw-count",
       "reflect": false,
       "defaultValue": "0"
+    },
+    "ticketNumbers": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The ticket winning numbers"
+      },
+      "attribute": "ticket-numbers",
+      "reflect": false,
+      "defaultValue": "''"
+    },
+    "sessionId": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The session id"
+      },
+      "attribute": "session-id",
+      "reflect": false,
+      "defaultValue": "''"
+    },
+    "clientStyling": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Client custom styling via string"
+      },
+      "attribute": "client-styling",
+      "reflect": false,
+      "defaultValue": "''"
+    },
+    "clientStylingUrlContent": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Client custom styling via url content"
+      },
+      "attribute": "client-styling-url-content",
+      "reflect": false,
+      "defaultValue": "''"
     }
   }; }
   static get states() { return {
     "multiplier": {},
     "isLoading": {},
-    "drawResults": {},
     "rules": {},
     "toggleDrawer": {},
     "hasErrors": {},
-    "errorText": {}
+    "errorText": {},
+    "ticketData": {},
+    "ticketDataLoaded": {},
+    "ticketDraws": {},
+    "hasDrawNumbers": {},
+    "limitStylingAppends": {}
   }; }
 }

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

@@ -6,8 +6,8 @@ const TRANSLATIONS = {
     drawId: 'Draw ID',
     drawName: 'Game name',
     drawDate: 'Draw Date',
-    drawNumbersGridDraw: 'Draw numbers Grid A',
-    drawNumbersGridTicket: 'Draw numbers Grid B',
+    drawNumbersGridDraw: 'Draw numbers Grid ',
+    drawNumbersGridTicket: 'Draw numbers Grid ',
     ticketResult: 'Ticket result',
     amountWon: 'Amount won',
     numberOfDraws: 'Number of draws',
@@ -23,8 +23,8 @@ const TRANSLATIONS = {
     drawId: 'Id extragere',
     drawName: 'Numele jocului',
     drawDate: 'Data extragerii',
-    drawNumbersGridDraw: 'Numerele extrase Grid A',
-    drawNumbersGridTicket: 'Numerele extrase Grid B',
+    drawNumbersGridDraw: 'Numerele extrase Grid',
+    drawNumbersGridTicket: 'Numerele extrase Grid',
     ticketResult: 'Rezultatul biletului',
     amountWon: 'Suma castigata',
     numberOfDraws: 'Numarul de extrageri',

package/dist/components/lottery-bullet.js

@@ -0,0 +1,6 @@
+import { L as LotteryBullet$1, d as defineCustomElement$1 } from './lottery-bullet2.js';
+
+const LotteryBullet = LotteryBullet$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { LotteryBullet, defineCustomElement };

package/dist/components/lottery-bullet2.js

@@ -0,0 +1,56 @@
+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}@-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() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.bulletEvent = createEvent(this, "lotteryBulletSelection", 7);
+    /**
+     * Value of the bullet
+     */
+    this.value = '0';
+    /**
+     * Marks if the bullet should be selectable
+     */
+    this.selectable = true;
+    /**
+     * Marks if the bullet should be selected
+     */
+    this.isSelected = false;
+    this.select = () => {
+      if (this.selectable) {
+        this.isSelected = !this.isSelected;
+        this.bulletEvent.emit({
+          value: this.value,
+          selected: this.isSelected
+        });
+      }
+    };
+  }
+  render() {
+    return (h("div", { class: 'Circle ' + (this.selectable ? '' : 'Disabled') + (this.isSelected ? 'Selected' : ''), onClick: () => this.select() }, this.value));
+  }
+  static get style() { return lotteryBulletCss; }
+}, [1, "lottery-bullet", {
+    "value": [1],
+    "selectable": [4],
+    "isSelected": [4, "is-selected"]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["lottery-bullet"];
+  components.forEach(tagName => { switch (tagName) {
+    case "lottery-bullet":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, LotteryBullet);
+      }
+      break;
+  } });
+}
+
+export { LotteryBullet as L, defineCustomElement as d };