@everymatrix/lottery-ticket 0.1.2 → 0.1.6

package/dist/cjs/{index-3626c135.js → index-7d839bfc.js}

@@ -75,8 +75,8 @@ const hostListenerProxy = (hostRef, methodName) => (ev) => {
     }
 };
 const getHostListenerTarget = (elm, flags) => {
-    if (flags & 4 /* TargetDocument */)
-        return doc;
+    if (flags & 8 /* TargetWindow */)
+        return win;
     return elm;
 };
 // prettier-ignore

package/dist/cjs/loader.cjs.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-3626c135.js');
+const index = require('./index-7d839bfc.js');
 
 /*
  Stencil Client Patch Esm v2.15.2 | MIT Licensed | https://stenciljs.com
@@ -14,7 +14,7 @@ const patchEsm = () => {
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
   return patchEsm().then(() => {
-  return index.bootstrapLazy([["lottery-bullet_3.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"]]],[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);
+  return index.bootstrapLazy([["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],"isCustomSelect":[32],"amountInfo":[32]},[[8,"click","checkForClickOutside"],[0,"gridFilled","gridFilledHandler"]]]]]], options);
   });
 };
 

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

@@ -0,0 +1,170 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-7d839bfc.js');
+require('@everymatrix/lottery-grid');
+
+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}.TicketTitle{font-size:16px;font-weight:bold}.ButtonContainer{display:flex;justify-content:flex-end}.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;border:none;align-items:center;justify-content:center;height:20px;position:relative}.NumberInput button:after{display:inline-block;position:absolute;transform:translate(-50%, -50%) rotate(180deg);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:inline-block;border-radius:4px;padding:8px 20px;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:inline-block;border-radius:4px;padding:8px 20px;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}.Minus{border-radius:4px;width:30px;height:24px !important;margin-right:10px;color:#FFF;background:#009993}.Plus{border-radius:4px;width:30px;height:24px !important;margin-left:10px;color:#FFF;background:#009993}.SelectWrapper{width:auto;padding:5px;margin:0 auto;border:1px solid #ccc;border-radius:5px;position:relative}.SelectButton,.SelectOptions li{display:flex;align-items:center;cursor:pointer}.SelectButton{display:flex;padding:0 5px;border-radius:7px;align-items:center;justify-content:space-between;font-size:14px}.SelectButton span:first-child{padding-right:10px}.SelectExpand{transition:transform 0.3s linear;font-size:12px}.SelectActive .SelectExpand{transform:rotate(180deg)}.SelectContent{display:none;padding:5px;border-radius:7px}.SelectWrapper.SelectActive .SelectContent{width:100%;display:block;position:absolute;left:0;top:32px;padding:0;border:1px solid #ccc;overflow:hidden;background:#fff}.SelectContent .SelectOptions{max-height:100px;margin:0;overflow-y:auto;padding:0}.SelectContent .SelectOptions .SelectedValue{background-color:#009993;color:#fff}.SelectOptions::-webkit-scrollbar{width:7px}.SelectOptions::-webkit-scrollbar-track{background:#f1f1f1;border-radius:25px}.SelectOptions::-webkit-scrollbar-thumb{background:#ccc;border-radius:25px}.SelectOptions li{height:20px;padding:0 13px;font-size:14px}.SelectOptions li:hover{background:#f2f2f2}";
+
+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;
+    this.isCustomSelect = false;
+    this.amountInfo = {};
+  }
+  /**
+   * @TODO find a better way to implement click outside the custom select, so that we don't have to use the 'data-cluster' attribute on each element
+   */
+  checkForClickOutside(ev) {
+    if (ev.composedPath()[0].getAttribute('data-cluster') !== 'SelectComponent') {
+      this.isCustomSelect = 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()];
+      this.amountInfo = this.gameData.rules.stakes[0]; // initial value for select
+    })
+      .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(ticketid, amount) {
+    this.stakeChange.emit({
+      ticketId: ticketid,
+      stake: amount
+    });
+  }
+  toggleClass() {
+    this.isCustomSelect = !this.isCustomSelect;
+  }
+  setDropdownItem(item) {
+    this.amountInfo = {
+      amount: item.amount,
+      currency: item.currency
+    };
+    this.isCustomSelect = false;
+    this.changeStake(this.ticketId, item.amount);
+  }
+  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", { class: "TicketTitle" }, this.gameData.name), this.resetButton && this.ticketDone &&
+          index.h("div", { class: "ButtonContainer" }, index.h("a", { class: "ResetButton", onClick: () => this.toggleResetSelection() }, translate('resetButton', this.language))), this.autoPick && !this.ticketDone &&
+          index.h("div", { class: "ButtonContainer" }, 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("div", null, index.h("label", { class: "Label" }, translate('wagerPerDraw', this.language), ": "), index.h("div", { class: "WagerInput" }, rules.stakes.length > 1 ?
+          (index.h("div", { "data-cluster": "SelectComponent", class: this.isCustomSelect ? "SelectWrapper SelectActive" : "SelectWrapper" }, index.h("div", { "data-cluster": "SelectComponent", class: "SelectButton", onClick: () => this.toggleClass() }, index.h("span", { "data-cluster": "SelectComponent" }, this.amountInfo.amount, " ", this.amountInfo.currency), index.h("span", { "data-cluster": "SelectComponent", class: "SelectExpand" }, "\u25BC")), index.h("div", { "data-cluster": "SelectComponent", class: "SelectContent" }, index.h("ul", { "data-cluster": "SelectComponent", class: "SelectOptions" }, rules.stakes.map((item) => index.h("li", { "data-cluster": "SelectComponent", class: this.amountInfo.amount == item.amount ? 'SelectedValue' : '', value: item.amount, onClick: () => this.setDropdownItem(item) }, 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;

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

@@ -1,6 +1,6 @@
 'use strict';
 
-const index = require('./index-3626c135.js');
+const index = require('./index-7d839bfc.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-bullet_3.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"]]],[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);
+  return index.bootstrapLazy([["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],"isCustomSelect":[32],"amountInfo":[32]},[[8,"click","checkForClickOutside"],[0,"gridFilled","gridFilledHandler"]]]]]], options);
 });

package/dist/collection/collection-manifest.json

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

package/dist/collection/components/lottery-ticket/lottery-ticket.css

@@ -4,6 +4,16 @@
   font-family: "Roboto", sans-serif;
 }
 
+.TicketTitle {
+  font-size: 16px;
+  font-weight: bold;
+}
+
+.ButtonContainer {
+  display: flex;
+  justify-content: flex-end;
+}
+
 .Toggle {
   cursor: pointer;
   margin-top: 20px;
@@ -90,12 +100,10 @@ input[type=number]::-webkit-outer-spin-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;
 }
 
@@ -103,7 +111,6 @@ input[type=number]::-webkit-outer-spin-button {
   display: inline-block;
   position: absolute;
   transform: translate(-50%, -50%) rotate(180deg);
-  width: 30px;
   align-items: center;
   text-align: center;
 }
@@ -141,9 +148,9 @@ input[type=number]::-webkit-outer-spin-button {
 
 .AutoButton {
   cursor: pointer;
-  display: block;
+  display: inline-block;
   border-radius: 4px;
-  padding: 8px 25px;
+  padding: 8px 20px;
   width: max-content;
   margin: 5px 0;
   border: 1px solid #00958f;
@@ -162,9 +169,9 @@ input[type=number]::-webkit-outer-spin-button {
 
 .ResetButton {
   cursor: pointer;
-  display: block;
+  display: inline-block;
   border-radius: 4px;
-  padding: 8px 25px;
+  padding: 8px 20px;
   width: max-content;
   margin: 5px 0;
   color: #000;
@@ -190,4 +197,111 @@ input[type=number]::-webkit-outer-spin-button {
 }
 .TicketGridBullets .TicketGridTitle {
   margin-top: 0px;
+}
+
+.Minus {
+  border-radius: 4px;
+  width: 30px;
+  height: 24px !important;
+  margin-right: 10px;
+  color: #FFF;
+  background: #009993;
+}
+
+.Plus {
+  border-radius: 4px;
+  width: 30px;
+  height: 24px !important;
+  margin-left: 10px;
+  color: #FFF;
+  background: #009993;
+}
+
+.SelectWrapper {
+  width: auto;
+  padding: 5px;
+  margin: 0 auto;
+  border: 1px solid #ccc;
+  border-radius: 5px;
+  position: relative;
+}
+
+.SelectButton, .SelectOptions li {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+}
+
+.SelectButton {
+  display: flex;
+  padding: 0 5px;
+  border-radius: 7px;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 14px;
+}
+.SelectButton span:first-child {
+  padding-right: 10px;
+}
+
+.SelectExpand {
+  transition: transform 0.3s linear;
+  font-size: 12px;
+}
+
+.SelectActive .SelectExpand {
+  transform: rotate(180deg);
+}
+
+.SelectContent {
+  display: none;
+  padding: 5px;
+  border-radius: 7px;
+}
+
+.SelectWrapper.SelectActive .SelectContent {
+  width: 100%;
+  display: block;
+  position: absolute;
+  left: 0;
+  top: 32px;
+  padding: 0;
+  border: 1px solid #ccc;
+  overflow: hidden;
+  background: #fff;
+}
+
+.SelectContent .SelectOptions {
+  max-height: 100px;
+  margin: 0;
+  overflow-y: auto;
+  padding: 0;
+}
+.SelectContent .SelectOptions .SelectedValue {
+  background-color: #009993;
+  color: #fff;
+}
+
+.SelectOptions::-webkit-scrollbar {
+  width: 7px;
+}
+
+.SelectOptions::-webkit-scrollbar-track {
+  background: #f1f1f1;
+  border-radius: 25px;
+}
+
+.SelectOptions::-webkit-scrollbar-thumb {
+  background: #ccc;
+  border-radius: 25px;
+}
+
+.SelectOptions li {
+  height: 20px;
+  padding: 0 13px;
+  font-size: 14px;
+}
+
+.SelectOptions li:hover {
+  background: #f2f2f2;
 }

package/dist/collection/components/lottery-ticket/lottery-ticket.js

@@ -28,6 +28,16 @@ export class LotteryTicket {
     this.isLoading = true;
     this.hasErrors = false;
     this.ticketDone = false;
+    this.isCustomSelect = false;
+    this.amountInfo = {};
+  }
+  /**
+   * @TODO find a better way to implement click outside the custom select, so that we don't have to use the 'data-cluster' attribute on each element
+   */
+  checkForClickOutside(ev) {
+    if (ev.composedPath()[0].getAttribute('data-cluster') !== 'SelectComponent') {
+      this.isCustomSelect = false;
+    }
   }
   connectedCallback() {
     let url = new URL(`${this.endpoint}/games/${this.gameId}`);
@@ -45,6 +55,7 @@ export class LotteryTicket {
       this.isLoading = false;
       this.gameData = data;
       this.grids = [...Array(data.rules.boards.length).keys()];
+      this.amountInfo = this.gameData.rules.stakes[0]; // initial value for select
     })
       .catch((err) => {
       this.isLoading = false;
@@ -73,12 +84,23 @@ export class LotteryTicket {
     this.ticketDone = false;
     this.resetSelection.emit(this.ticketId);
   }
-  changeStake(event) {
+  changeStake(ticketid, amount) {
     this.stakeChange.emit({
-      ticketId: this.ticketId,
-      stake: event.target.value
+      ticketId: ticketid,
+      stake: amount
     });
   }
+  toggleClass() {
+    this.isCustomSelect = !this.isCustomSelect;
+  }
+  setDropdownItem(item) {
+    this.amountInfo = {
+      amount: item.amount,
+      currency: item.currency
+    };
+    this.isCustomSelect = false;
+    this.changeStake(this.ticketId, item.amount);
+  }
   render() {
     if (this.isLoading) {
       return (h("div", null,
@@ -92,11 +114,13 @@ export class LotteryTicket {
       else {
         const { rules } = this.gameData;
         return (h("div", { class: "TicketContainer" },
-          h("p", null, this.gameData.name),
+          h("p", { class: "TicketTitle" }, this.gameData.name),
           this.resetButton && this.ticketDone &&
-            h("a", { class: "ResetButton", onClick: () => this.toggleResetSelection() }, translate('resetButton', this.language)),
+            h("div", { class: "ButtonContainer" },
+              h("a", { class: "ResetButton", onClick: () => this.toggleResetSelection() }, translate('resetButton', this.language))),
           this.autoPick && !this.ticketDone &&
-            h("a", { class: "AutoButton", onClick: () => this.toggleAutoSelection() }, translate('autoButton', this.language)),
+            h("div", { class: "ButtonContainer" },
+              h("a", { class: "AutoButton", onClick: () => this.toggleAutoSelection() }, translate('autoButton', this.language))),
           this.grids.map((item, index) => h("div", { class: "TicketGridBullets" },
             h("p", { class: "TicketGridTitle" },
               translate('grid', this.language),
@@ -120,16 +144,25 @@ export class LotteryTicket {
                 h("button", { onClick: () => this.numberOfDraws > 1 ? this.numberOfDraws-- : this.numberOfDraws = 1, class: "Minus" }, "-"),
                 h("input", { class: "InputDefault", min: "1", value: this.numberOfDraws, type: "number" }),
                 h("button", { onClick: () => this.numberOfDraws++, class: "Plus" }, "+"))),
-          h("label", { class: "Label" },
-            translate('wagerPerDraw', this.language),
-            ": "),
-          h("div", { class: "WagerInput" }, rules.stakes.length > 1 ? h("div", null,
-            h("select", { class: "InputDefault", onChange: (event) => this.changeStake(event) }, rules.stakes.map((item) => h("option", { value: item.amount },
-              item.amount,
-              " ",
-              item.currency)))) : h("div", null,
-            h("input", { min: "1", value: rules.stakes[0].amount, type: "number", disabled: true }),
-            h("p", { class: "WagerInputTitle" }, rules.stakes[0].currency)))));
+          h("div", null,
+            h("label", { class: "Label" },
+              translate('wagerPerDraw', this.language),
+              ": "),
+            h("div", { class: "WagerInput" }, rules.stakes.length > 1 ?
+              (h("div", { "data-cluster": "SelectComponent", class: this.isCustomSelect ? "SelectWrapper SelectActive" : "SelectWrapper" },
+                h("div", { "data-cluster": "SelectComponent", class: "SelectButton", onClick: () => this.toggleClass() },
+                  h("span", { "data-cluster": "SelectComponent" },
+                    this.amountInfo.amount,
+                    " ",
+                    this.amountInfo.currency),
+                  h("span", { "data-cluster": "SelectComponent", class: "SelectExpand" }, "\u25BC")),
+                h("div", { "data-cluster": "SelectComponent", class: "SelectContent" },
+                  h("ul", { "data-cluster": "SelectComponent", class: "SelectOptions" }, rules.stakes.map((item) => h("li", { "data-cluster": "SelectComponent", class: this.amountInfo.amount == item.amount ? 'SelectedValue' : '', value: item.amount, onClick: () => this.setDropdownItem(item) },
+                    item.amount,
+                    " ",
+                    item.currency)))))) : (h("div", null,
+              h("input", { min: "1", value: rules.stakes[0].amount, type: "number", disabled: true }),
+              h("p", { class: "WagerInputTitle" }, rules.stakes[0].currency)))))));
       }
     }
   }
@@ -289,7 +322,9 @@ export class LotteryTicket {
     "numberOfDraws": {},
     "isLoading": {},
     "hasErrors": {},
-    "ticketDone": {}
+    "ticketDone": {},
+    "isCustomSelect": {},
+    "amountInfo": {}
   }; }
   static get events() { return [{
       "method": "ticketCompleted",
@@ -375,6 +410,12 @@ export class LotteryTicket {
       "methodName": "drawsChangeHandler"
     }]; }
   static get listeners() { return [{
+      "name": "click",
+      "method": "checkForClickOutside",
+      "target": "window",
+      "capture": false,
+      "passive": false
+    }, {
       "name": "gridFilled",
       "method": "gridFilledHandler",
       "target": undefined,