@everymatrix/lottery-ticket 0.1.2 → 0.1.4

package/dist/cjs/{index-3626c135.js → index-1a18a097.js}

@@ -77,6 +77,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-1a18a097.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-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],"isCustomSelect":[32],"amountInfo":[32]},[[8,"click","checkForClickOutside"],[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);
   });
 };
 

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

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-3626c135.js');
+const index = require('./index-1a18a097.js');
 
-const lotteryBulletCss = "@import url(\"https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap\");:host{display:block;font-family:\"Roboto\", sans-serif}.Circle{cursor:pointer;color:#000000;display:block;background:#FFF;border:solid 2px #00958f;height:20px;width:20px;border-radius:50%;margin:0;display:flex;align-items:center;justify-content:center;user-select:none;font-size:12px;font-weight:600;position:relative}.Circle:hover{background:#aee4e2}.Circle.Selected{color:#ffffff;background:#9EC258;background:-webkit-radial-gradient(top, #00958f, #004D4A);background:-moz-radial-gradient(top, #00958f, #004D4A);background:radial-gradient(to bottom, #00958f, #004D4A);border:solid 2px #00958f}.Circle.Disabled{color:#707070;background:#D4D4D4;border:solid 2px #707070;cursor:default}.Circle.DisabledSelected{color:#ffffff;background:#9EC258;background:-webkit-radial-gradient(top, #00958f, #004D4A);background:-moz-radial-gradient(top, #00958f, #004D4A);background:radial-gradient(to bottom, #00958f, #004D4A);border:solid 2px #707070;cursor:default}";
+const lotteryBulletCss = "@import url(\"https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap\");:host{display:block;font-family:\"Roboto\", sans-serif}@-webkit-keyframes Circle{0%{-webkit-transform:scale(0.5);transform:scale(0.5)}100%{-webkit-transform:scale(1);transform:scale(1)}}@keyframes Circle{0%{-webkit-transform:scale(0.5);transform:scale(0.5)}100%{-webkit-transform:scale(1);transform:scale(1)}}@-webkit-keyframes hover-rotate{0%{-webkit-transform:scale(1) rotateZ(0);transform:scale(1) rotateZ(0)}50%{-webkit-transform:scale(1.2) rotateZ(180deg);transform:scale(1.22) rotateZ(180deg)}100%{-webkit-transform:scale(1) rotateZ(360deg);transform:scale(1) rotateZ(360deg)}}@keyframes hover-rotate{0%{-webkit-transform:scale(1) rotateZ(0);transform:scale(1) rotateZ(0)}50%{-webkit-transform:scale(1.2) rotateZ(180deg);transform:scale(1.2) rotateZ(180deg)}100%{-webkit-transform:scale(1) rotateZ(360deg);transform:scale(1) rotateZ(360deg)}}@-webkit-keyframes selected-scaleUp{0%{-webkit-transform:scale(0.5);transform:scale(0.5)}100%{-webkit-transform:scale(1.2);transform:scale(1.2)}}@keyframes selected-scaleUp{0%{-webkit-transform:scale(0.5);transform:scale(0.5)}100%{-webkit-transform:scale(1);transform:scale(1)}}.Circle{-webkit-animation:Circle 0.8s cubic-bezier(0.39, 0.575, 0.565, 1) both;animation:Circle 0.8s cubic-bezier(0.39, 0.575, 0.565, 1) both;cursor:pointer;color:#000000;display:block;height:30px;width:30px;margin:0;display:flex;align-items:center;justify-content:center;justify-content:center;align-items:center;border:solid 2px #ffffff;background:radial-gradient(circle at top, white 0%, white 100%);font-weight:bold;border-radius:50%;box-shadow:0 2px 4px 0 rgba(0, 0, 0, 0.5);user-select:none;font-size:16px;line-height:16px;font-weight:600;position:relative}.Circle:hover{-webkit-animation:hover-rotate 0.4s linear both;animation:hover-rotate 0.4s linear both;background:radial-gradient(circle at top, white 0%, #f1f1f1 100%)}.Circle.Selected{-webkit-animation:selected-scaleUp 0.4s cubic-bezier(0.39, 0.575, 0.565, 1) both;animation:selected-scaleUp 0.4s cubic-bezier(0.39, 0.575, 0.565, 1) both;color:#ffffff;background:#9EC258;background:-webkit-radial-gradient(top, #00958f, #004D4A);background:-moz-radial-gradient(top, #00958f, #004D4A);background:radial-gradient(to bottom, #00958f, #004D4A);border:solid 2px #00958f}.Circle.Disabled{-webkit-animation:selected-scaleUp 0.4s cubic-bezier(0.39, 0.575, 0.565, 1) both;animation:selected-scaleUp 0.4s cubic-bezier(0.39, 0.575, 0.565, 1) both;color:#f1f1f1;background:#D4D4D4;border:solid 2px #D4D4D4;cursor:default}.Circle.DisabledSelected{-webkit-animation:selected-scaleUp 0.4s cubic-bezier(0.39, 0.575, 0.565, 1) both;animation:selected-scaleUp 0.4s cubic-bezier(0.39, 0.575, 0.565, 1) both;color:#f1f1f1;background:#9EC258;background:-webkit-radial-gradient(top, #00958f, #004D4A);background:-moz-radial-gradient(top, #00958f, #004D4A);background:radial-gradient(to bottom, #00958f, #004D4A);border:solid 2px #D4D4D4;cursor:default}";
 
 const LotteryBullet = class {
   constructor(hostRef) {
@@ -38,7 +38,7 @@ const LotteryBullet = class {
 };
 LotteryBullet.style = lotteryBulletCss;
 
-const lotteryGridCss = "@import url(\"https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap\");:host{display:block;font-family:\"Roboto\", sans-serif}.GridContainer{display:flex;flex-direction:column;max-width:350px}.Grid{margin-top:10px 0 10px 0;display:flex;flex-direction:row;flex-wrap:wrap;gap:10px}";
+const lotteryGridCss = "@import url(\"https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap\");:host{display:block;font-family:\"Roboto\", sans-serif}.GridContainer{display:flex;flex-direction:column;max-width:1200px}.Grid{margin-top:10px 0 10px 0;display:flex;flex-direction:row;flex-wrap:wrap;gap:25px}";
 
 const LotteryGrid = class {
   constructor(hostRef) {
@@ -227,7 +227,7 @@ const translate = (key, 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 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) {
@@ -262,6 +262,16 @@ const LotteryTicket = class {
     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}`);
@@ -279,6 +289,7 @@ const LotteryTicket = class {
       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;
@@ -307,12 +318,23 @@ const LotteryTicket = class {
     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 (index.h("div", null, index.h("p", null, translate('loading', this.language))));
@@ -323,11 +345,12 @@ const LotteryTicket = class {
       }
       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 &&
+        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("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)))));
+          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)))))));
       }
     }
   }

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

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

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,

package/dist/components/lottery-bullet2.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
 
-const lotteryBulletCss = "@import url(\"https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap\");:host{display:block;font-family:\"Roboto\", sans-serif}.Circle{cursor:pointer;color:#000000;display:block;background:#FFF;border:solid 2px #00958f;height:20px;width:20px;border-radius:50%;margin:0;display:flex;align-items:center;justify-content:center;user-select:none;font-size:12px;font-weight:600;position:relative}.Circle:hover{background:#aee4e2}.Circle.Selected{color:#ffffff;background:#9EC258;background:-webkit-radial-gradient(top, #00958f, #004D4A);background:-moz-radial-gradient(top, #00958f, #004D4A);background:radial-gradient(to bottom, #00958f, #004D4A);border:solid 2px #00958f}.Circle.Disabled{color:#707070;background:#D4D4D4;border:solid 2px #707070;cursor:default}.Circle.DisabledSelected{color:#ffffff;background:#9EC258;background:-webkit-radial-gradient(top, #00958f, #004D4A);background:-moz-radial-gradient(top, #00958f, #004D4A);background:radial-gradient(to bottom, #00958f, #004D4A);border:solid 2px #707070;cursor:default}";
+const lotteryBulletCss = "@import url(\"https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap\");:host{display:block;font-family:\"Roboto\", sans-serif}@-webkit-keyframes Circle{0%{-webkit-transform:scale(0.5);transform:scale(0.5)}100%{-webkit-transform:scale(1);transform:scale(1)}}@keyframes Circle{0%{-webkit-transform:scale(0.5);transform:scale(0.5)}100%{-webkit-transform:scale(1);transform:scale(1)}}@-webkit-keyframes hover-rotate{0%{-webkit-transform:scale(1) rotateZ(0);transform:scale(1) rotateZ(0)}50%{-webkit-transform:scale(1.2) rotateZ(180deg);transform:scale(1.22) rotateZ(180deg)}100%{-webkit-transform:scale(1) rotateZ(360deg);transform:scale(1) rotateZ(360deg)}}@keyframes hover-rotate{0%{-webkit-transform:scale(1) rotateZ(0);transform:scale(1) rotateZ(0)}50%{-webkit-transform:scale(1.2) rotateZ(180deg);transform:scale(1.2) rotateZ(180deg)}100%{-webkit-transform:scale(1) rotateZ(360deg);transform:scale(1) rotateZ(360deg)}}@-webkit-keyframes selected-scaleUp{0%{-webkit-transform:scale(0.5);transform:scale(0.5)}100%{-webkit-transform:scale(1.2);transform:scale(1.2)}}@keyframes selected-scaleUp{0%{-webkit-transform:scale(0.5);transform:scale(0.5)}100%{-webkit-transform:scale(1);transform:scale(1)}}.Circle{-webkit-animation:Circle 0.8s cubic-bezier(0.39, 0.575, 0.565, 1) both;animation:Circle 0.8s cubic-bezier(0.39, 0.575, 0.565, 1) both;cursor:pointer;color:#000000;display:block;height:30px;width:30px;margin:0;display:flex;align-items:center;justify-content:center;justify-content:center;align-items:center;border:solid 2px #ffffff;background:radial-gradient(circle at top, white 0%, white 100%);font-weight:bold;border-radius:50%;box-shadow:0 2px 4px 0 rgba(0, 0, 0, 0.5);user-select:none;font-size:16px;line-height:16px;font-weight:600;position:relative}.Circle:hover{-webkit-animation:hover-rotate 0.4s linear both;animation:hover-rotate 0.4s linear both;background:radial-gradient(circle at top, white 0%, #f1f1f1 100%)}.Circle.Selected{-webkit-animation:selected-scaleUp 0.4s cubic-bezier(0.39, 0.575, 0.565, 1) both;animation:selected-scaleUp 0.4s cubic-bezier(0.39, 0.575, 0.565, 1) both;color:#ffffff;background:#9EC258;background:-webkit-radial-gradient(top, #00958f, #004D4A);background:-moz-radial-gradient(top, #00958f, #004D4A);background:radial-gradient(to bottom, #00958f, #004D4A);border:solid 2px #00958f}.Circle.Disabled{-webkit-animation:selected-scaleUp 0.4s cubic-bezier(0.39, 0.575, 0.565, 1) both;animation:selected-scaleUp 0.4s cubic-bezier(0.39, 0.575, 0.565, 1) both;color:#f1f1f1;background:#D4D4D4;border:solid 2px #D4D4D4;cursor:default}.Circle.DisabledSelected{-webkit-animation:selected-scaleUp 0.4s cubic-bezier(0.39, 0.575, 0.565, 1) both;animation:selected-scaleUp 0.4s cubic-bezier(0.39, 0.575, 0.565, 1) both;color:#f1f1f1;background:#9EC258;background:-webkit-radial-gradient(top, #00958f, #004D4A);background:-moz-radial-gradient(top, #00958f, #004D4A);background:radial-gradient(to bottom, #00958f, #004D4A);border:solid 2px #D4D4D4;cursor:default}";
 
 const LotteryBullet = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {

package/dist/components/lottery-grid2.js

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
 import { d as defineCustomElement$1 } from './lottery-bullet2.js';
 
-const lotteryGridCss = "@import url(\"https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap\");:host{display:block;font-family:\"Roboto\", sans-serif}.GridContainer{display:flex;flex-direction:column;max-width:350px}.Grid{margin-top:10px 0 10px 0;display:flex;flex-direction:row;flex-wrap:wrap;gap:10px}";
+const lotteryGridCss = "@import url(\"https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap\");:host{display:block;font-family:\"Roboto\", sans-serif}.GridContainer{display:flex;flex-direction:column;max-width:1200px}.Grid{margin-top:10px 0 10px 0;display:flex;flex-direction:row;flex-wrap:wrap;gap:25px}";
 
 const LotteryGrid = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {

package/dist/components/lottery-ticket.js

@@ -31,7 +31,7 @@ const translate = (key, 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 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$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -68,6 +68,16 @@ const LotteryTicket$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
     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}`);
@@ -85,6 +95,7 @@ const LotteryTicket$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
       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;
@@ -113,12 +124,23 @@ const LotteryTicket$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
     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, h("p", null, translate('loading', this.language))));
@@ -129,11 +151,12 @@ const LotteryTicket$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
       }
       else {
         const { rules } = this.gameData;
-        return (h("div", { class: "TicketContainer" }, h("p", null, this.gameData.name), this.resetButton && this.ticketDone &&
-          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)), this.grids.map((item, index) => h("div", { class: "TicketGridBullets" }, h("p", { class: "TicketGridTitle" }, translate('grid', this.language), " ", item), h("lottery-grid", { "grid-index": index, "maximum-allowed": rules.boards[index].maximumAllowed, "minimum-allowed": rules.boards[index].minimumAllowed, "total-numbers": rules.boards[index].totalNumbers, selectable: true, "reset-button": true, "auto-pick": true, "game-id": this.gameId, "ticket-id": this.ticketId, language: this.language }))), rules.multiplier &&
+        return (h("div", { class: "TicketContainer" }, h("p", { class: "TicketTitle" }, this.gameData.name), this.resetButton && this.ticketDone &&
+          h("div", { class: "ButtonContainer" }, h("a", { class: "ResetButton", onClick: () => this.toggleResetSelection() }, translate('resetButton', this.language))), this.autoPick && !this.ticketDone &&
+          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), " ", item), h("lottery-grid", { "grid-index": index, "maximum-allowed": rules.boards[index].maximumAllowed, "minimum-allowed": rules.boards[index].minimumAllowed, "total-numbers": rules.boards[index].totalNumbers, selectable: true, "reset-button": true, "auto-pick": true, "game-id": this.gameId, "ticket-id": this.ticketId, language: this.language }))), rules.multiplier &&
           h("div", null, h("label", { class: "Toggle" }, h("label", { class: "Label" }, translate('multiplier', this.language), ": "), h("input", { class: "ToggleCheckbox", type: "checkbox", onInput: (e) => this.multiplierChangeHandler(e) }), h("div", { class: "ToggleSwitch" }))), this.multipleDraws &&
-          h("div", { class: "TicketDraws" }, h("label", { class: "Label" }, translate('numberOfDraws', this.language), ": "), h("div", { class: "NumberInput" }, 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", { class: "TicketDraws" }, h("label", { class: "Label" }, translate('numberOfDraws', this.language), ": "), h("div", { class: "NumberInput" }, 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("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)))))));
       }
     }
   }
@@ -154,8 +177,10 @@ const LotteryTicket$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
     "numberOfDraws": [32],
     "isLoading": [32],
     "hasErrors": [32],
-    "ticketDone": [32]
-  }, [[0, "gridFilled", "gridFilledHandler"]]]);
+    "ticketDone": [32],
+    "isCustomSelect": [32],
+    "amountInfo": [32]
+  }, [[8, "click", "checkForClickOutside"], [0, "gridFilled", "gridFilledHandler"]]]);
 function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
     return;

package/dist/esm/{index-dbc4aa67.js → index-c436caae.js}

@@ -55,6 +55,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/esm/loader.js

@@ -1,4 +1,4 @@
-import { p as promiseResolve, b as bootstrapLazy } from './index-dbc4aa67.js';
+import { p as promiseResolve, b as bootstrapLazy } from './index-c436caae.js';
 
 /*
  Stencil Client Patch Esm v2.15.2 | MIT Licensed | https://stenciljs.com
@@ -10,7 +10,7 @@ const patchEsm = () => {
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
   return patchEsm().then(() => {
-  return bootstrapLazy([["lottery-bullet_3",[[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 bootstrapLazy([["lottery-bullet_3",[[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"]]],[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/esm/lottery-bullet_3.entry.js

@@ -1,6 +1,6 @@
-import { r as registerInstance, c as createEvent, h } from './index-dbc4aa67.js';
+import { r as registerInstance, c as createEvent, h } from './index-c436caae.js';
 
-const lotteryBulletCss = "@import url(\"https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap\");:host{display:block;font-family:\"Roboto\", sans-serif}.Circle{cursor:pointer;color:#000000;display:block;background:#FFF;border:solid 2px #00958f;height:20px;width:20px;border-radius:50%;margin:0;display:flex;align-items:center;justify-content:center;user-select:none;font-size:12px;font-weight:600;position:relative}.Circle:hover{background:#aee4e2}.Circle.Selected{color:#ffffff;background:#9EC258;background:-webkit-radial-gradient(top, #00958f, #004D4A);background:-moz-radial-gradient(top, #00958f, #004D4A);background:radial-gradient(to bottom, #00958f, #004D4A);border:solid 2px #00958f}.Circle.Disabled{color:#707070;background:#D4D4D4;border:solid 2px #707070;cursor:default}.Circle.DisabledSelected{color:#ffffff;background:#9EC258;background:-webkit-radial-gradient(top, #00958f, #004D4A);background:-moz-radial-gradient(top, #00958f, #004D4A);background:radial-gradient(to bottom, #00958f, #004D4A);border:solid 2px #707070;cursor:default}";
+const lotteryBulletCss = "@import url(\"https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap\");:host{display:block;font-family:\"Roboto\", sans-serif}@-webkit-keyframes Circle{0%{-webkit-transform:scale(0.5);transform:scale(0.5)}100%{-webkit-transform:scale(1);transform:scale(1)}}@keyframes Circle{0%{-webkit-transform:scale(0.5);transform:scale(0.5)}100%{-webkit-transform:scale(1);transform:scale(1)}}@-webkit-keyframes hover-rotate{0%{-webkit-transform:scale(1) rotateZ(0);transform:scale(1) rotateZ(0)}50%{-webkit-transform:scale(1.2) rotateZ(180deg);transform:scale(1.22) rotateZ(180deg)}100%{-webkit-transform:scale(1) rotateZ(360deg);transform:scale(1) rotateZ(360deg)}}@keyframes hover-rotate{0%{-webkit-transform:scale(1) rotateZ(0);transform:scale(1) rotateZ(0)}50%{-webkit-transform:scale(1.2) rotateZ(180deg);transform:scale(1.2) rotateZ(180deg)}100%{-webkit-transform:scale(1) rotateZ(360deg);transform:scale(1) rotateZ(360deg)}}@-webkit-keyframes selected-scaleUp{0%{-webkit-transform:scale(0.5);transform:scale(0.5)}100%{-webkit-transform:scale(1.2);transform:scale(1.2)}}@keyframes selected-scaleUp{0%{-webkit-transform:scale(0.5);transform:scale(0.5)}100%{-webkit-transform:scale(1);transform:scale(1)}}.Circle{-webkit-animation:Circle 0.8s cubic-bezier(0.39, 0.575, 0.565, 1) both;animation:Circle 0.8s cubic-bezier(0.39, 0.575, 0.565, 1) both;cursor:pointer;color:#000000;display:block;height:30px;width:30px;margin:0;display:flex;align-items:center;justify-content:center;justify-content:center;align-items:center;border:solid 2px #ffffff;background:radial-gradient(circle at top, white 0%, white 100%);font-weight:bold;border-radius:50%;box-shadow:0 2px 4px 0 rgba(0, 0, 0, 0.5);user-select:none;font-size:16px;line-height:16px;font-weight:600;position:relative}.Circle:hover{-webkit-animation:hover-rotate 0.4s linear both;animation:hover-rotate 0.4s linear both;background:radial-gradient(circle at top, white 0%, #f1f1f1 100%)}.Circle.Selected{-webkit-animation:selected-scaleUp 0.4s cubic-bezier(0.39, 0.575, 0.565, 1) both;animation:selected-scaleUp 0.4s cubic-bezier(0.39, 0.575, 0.565, 1) both;color:#ffffff;background:#9EC258;background:-webkit-radial-gradient(top, #00958f, #004D4A);background:-moz-radial-gradient(top, #00958f, #004D4A);background:radial-gradient(to bottom, #00958f, #004D4A);border:solid 2px #00958f}.Circle.Disabled{-webkit-animation:selected-scaleUp 0.4s cubic-bezier(0.39, 0.575, 0.565, 1) both;animation:selected-scaleUp 0.4s cubic-bezier(0.39, 0.575, 0.565, 1) both;color:#f1f1f1;background:#D4D4D4;border:solid 2px #D4D4D4;cursor:default}.Circle.DisabledSelected{-webkit-animation:selected-scaleUp 0.4s cubic-bezier(0.39, 0.575, 0.565, 1) both;animation:selected-scaleUp 0.4s cubic-bezier(0.39, 0.575, 0.565, 1) both;color:#f1f1f1;background:#9EC258;background:-webkit-radial-gradient(top, #00958f, #004D4A);background:-moz-radial-gradient(top, #00958f, #004D4A);background:radial-gradient(to bottom, #00958f, #004D4A);border:solid 2px #D4D4D4;cursor:default}";
 
 const LotteryBullet = class {
   constructor(hostRef) {
@@ -34,7 +34,7 @@ const LotteryBullet = class {
 };
 LotteryBullet.style = lotteryBulletCss;
 
-const lotteryGridCss = "@import url(\"https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap\");:host{display:block;font-family:\"Roboto\", sans-serif}.GridContainer{display:flex;flex-direction:column;max-width:350px}.Grid{margin-top:10px 0 10px 0;display:flex;flex-direction:row;flex-wrap:wrap;gap:10px}";
+const lotteryGridCss = "@import url(\"https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap\");:host{display:block;font-family:\"Roboto\", sans-serif}.GridContainer{display:flex;flex-direction:column;max-width:1200px}.Grid{margin-top:10px 0 10px 0;display:flex;flex-direction:row;flex-wrap:wrap;gap:25px}";
 
 const LotteryGrid = class {
   constructor(hostRef) {
@@ -223,7 +223,7 @@ const translate = (key, 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 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) {
@@ -258,6 +258,16 @@ const LotteryTicket = class {
     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}`);
@@ -275,6 +285,7 @@ const LotteryTicket = class {
       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;
@@ -303,12 +314,23 @@ const LotteryTicket = class {
     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, h("p", null, translate('loading', this.language))));
@@ -319,11 +341,12 @@ const LotteryTicket = class {
       }
       else {
         const { rules } = this.gameData;
-        return (h("div", { class: "TicketContainer" }, h("p", null, this.gameData.name), this.resetButton && this.ticketDone &&
-          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)), this.grids.map((item, index) => h("div", { class: "TicketGridBullets" }, h("p", { class: "TicketGridTitle" }, translate('grid', this.language), " ", item), h("lottery-grid", { "grid-index": index, "maximum-allowed": rules.boards[index].maximumAllowed, "minimum-allowed": rules.boards[index].minimumAllowed, "total-numbers": rules.boards[index].totalNumbers, selectable: true, "reset-button": true, "auto-pick": true, "game-id": this.gameId, "ticket-id": this.ticketId, language: this.language }))), rules.multiplier &&
+        return (h("div", { class: "TicketContainer" }, h("p", { class: "TicketTitle" }, this.gameData.name), this.resetButton && this.ticketDone &&
+          h("div", { class: "ButtonContainer" }, h("a", { class: "ResetButton", onClick: () => this.toggleResetSelection() }, translate('resetButton', this.language))), this.autoPick && !this.ticketDone &&
+          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), " ", item), h("lottery-grid", { "grid-index": index, "maximum-allowed": rules.boards[index].maximumAllowed, "minimum-allowed": rules.boards[index].minimumAllowed, "total-numbers": rules.boards[index].totalNumbers, selectable: true, "reset-button": true, "auto-pick": true, "game-id": this.gameId, "ticket-id": this.ticketId, language: this.language }))), rules.multiplier &&
           h("div", null, h("label", { class: "Toggle" }, h("label", { class: "Label" }, translate('multiplier', this.language), ": "), h("input", { class: "ToggleCheckbox", type: "checkbox", onInput: (e) => this.multiplierChangeHandler(e) }), h("div", { class: "ToggleSwitch" }))), this.multipleDraws &&
-          h("div", { class: "TicketDraws" }, h("label", { class: "Label" }, translate('numberOfDraws', this.language), ": "), h("div", { class: "NumberInput" }, 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", { class: "TicketDraws" }, h("label", { class: "Label" }, translate('numberOfDraws', this.language), ": "), h("div", { class: "NumberInput" }, 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("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)))))));
       }
     }
   }

package/dist/esm/lottery-ticket.js

@@ -1,4 +1,4 @@
-import { p as promiseResolve, b as bootstrapLazy } from './index-dbc4aa67.js';
+import { p as promiseResolve, b as bootstrapLazy } from './index-c436caae.js';
 
 /*
  Stencil Client Patch Browser v2.15.2 | MIT Licensed | https://stenciljs.com
@@ -13,5 +13,5 @@ const patchBrowser = () => {
 };
 
 patchBrowser().then(options => {
-  return bootstrapLazy([["lottery-bullet_3",[[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 bootstrapLazy([["lottery-bullet_3",[[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"]]],[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/lottery-ticket/lottery-ticket.esm.js

@@ -1 +1 @@
-import{p as e,b as t}from"./p-6d0df066.js";(()=>{const t=import.meta.url,l={};return""!==t&&(l.resourcesUrl=new URL(".",t).href),e(l)})().then((e=>t([["p-ed151006",[[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"]}]]]],e)));
+import{p as e,b as t}from"./p-91b1278e.js";(()=>{const t=import.meta.url,l={};return""!==t&&(l.resourcesUrl=new URL(".",t).href),e(l)})().then((e=>t([["p-ec3208f7",[[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"]]],[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"]}]]]],e)));

package/dist/lottery-ticket/p-91b1278e.js

@@ -0,0 +1 @@
+let e,t,n=!1;const l="undefined"!=typeof window?window:{},s=l.document||{head:{}},o={t:0,l:"",jmp:e=>e(),raf:e=>requestAnimationFrame(e),ael:(e,t,n,l)=>e.addEventListener(t,n,l),rel:(e,t,n,l)=>e.removeEventListener(t,n,l),ce:(e,t)=>new CustomEvent(e,t)},c=e=>Promise.resolve(e),r=(()=>{try{return new CSSStyleSheet,"function"==typeof(new CSSStyleSheet).replace}catch(e){}return!1})(),i=(e,t,n)=>{n&&n.map((([n,l,s])=>{const c=a(e,n),r=u(t,s),i=f(n);o.ael(c,l,r,i),(t.o=t.o||[]).push((()=>o.rel(c,l,r,i)))}))},u=(e,t)=>n=>{try{256&e.t?e.i[t](n):(e.u=e.u||[]).push([t,n])}catch(e){J(e)}},a=(e,t)=>4&t?s:8&t?l:e,f=e=>0!=(2&e),h=new WeakMap,y=e=>"sc-"+e.h,$={},d=e=>"object"==(e=typeof e)||"function"===e,m=(e,t,...n)=>{let l=null,s=!1,o=!1,c=[];const r=t=>{for(let n=0;n<t.length;n++)l=t[n],Array.isArray(l)?r(l):null!=l&&"boolean"!=typeof l&&((s="function"!=typeof e&&!d(l))&&(l+=""),s&&o?c[c.length-1].$+=l:c.push(s?p(null,l):l),o=s)};if(r(n),t){const e=t.className||t.class;e&&(t.class="object"!=typeof e?e:Object.keys(e).filter((t=>e[t])).join(" "))}const i=p(e,null);return i.m=t,c.length>0&&(i.p=c),i},p=(e,t)=>({t:0,S:e,$:t,g:null,p:null,m:null}),b={},w=(e,t,n,s,c,r)=>{if(n!==s){let i=I(e,t),u=t.toLowerCase();if("class"===t){const t=e.classList,l=g(n),o=g(s);t.remove(...l.filter((e=>e&&!o.includes(e)))),t.add(...o.filter((e=>e&&!l.includes(e))))}else if(i||"o"!==t[0]||"n"!==t[1]){const l=d(s);if((i||l&&null!==s)&&!c)try{if(e.tagName.includes("-"))e[t]=s;else{let l=null==s?"":s;"list"===t?i=!1:null!=n&&e[t]==l||(e[t]=l)}}catch(e){}null==s||!1===s?!1===s&&""!==e.getAttribute(t)||e.removeAttribute(t):(!i||4&r||c)&&!l&&e.setAttribute(t,s=!0===s?"":s)}else t="-"===t[2]?t.slice(3):I(l,u)?u.slice(2):u[2]+t.slice(3),n&&o.rel(e,t,n,!1),s&&o.ael(e,t,s,!1)}},S=/\s/,g=e=>e?e.split(S):[],j=(e,t,n,l)=>{const s=11===t.g.nodeType&&t.g.host?t.g.host:t.g,o=e&&e.m||$,c=t.m||$;for(l in o)l in c||w(s,l,o[l],void 0,n,t.t);for(l in c)w(s,l,o[l],c[l],n,t.t)},v=(t,n,l)=>{let o,c,r=n.p[l],i=0;if(null!==r.$)o=r.g=s.createTextNode(r.$);else if(o=r.g=s.createElement(r.S),j(null,r,!1),null!=e&&o["s-si"]!==e&&o.classList.add(o["s-si"]=e),r.p)for(i=0;i<r.p.length;++i)c=v(t,r,i),c&&o.appendChild(c);return o},k=(e,n,l,s,o,c)=>{let r,i=e;for(i.shadowRoot&&i.tagName===t&&(i=i.shadowRoot);o<=c;++o)s[o]&&(r=v(null,l,o),r&&(s[o].g=r,i.insertBefore(r,n)))},M=(e,t,n,l)=>{for(;t<=n;++t)(l=e[t])&&l.g.remove()},C=(e,t)=>e.S===t.S,O=(e,t)=>{const n=t.g=e.g,l=e.p,s=t.p,o=t.$;null===o?(j(e,t,!1),null!==l&&null!==s?((e,t,n,l)=>{let s,o=0,c=0,r=t.length-1,i=t[0],u=t[r],a=l.length-1,f=l[0],h=l[a];for(;o<=r&&c<=a;)null==i?i=t[++o]:null==u?u=t[--r]:null==f?f=l[++c]:null==h?h=l[--a]:C(i,f)?(O(i,f),i=t[++o],f=l[++c]):C(u,h)?(O(u,h),u=t[--r],h=l[--a]):C(i,h)?(O(i,h),e.insertBefore(i.g,u.g.nextSibling),i=t[++o],h=l[--a]):C(u,f)?(O(u,f),e.insertBefore(u.g,i.g),u=t[--r],f=l[++c]):(s=v(t&&t[c],n,c),f=l[++c],s&&i.g.parentNode.insertBefore(s,i.g));o>r?k(e,null==l[a+1]?null:l[a+1].g,n,l,c,a):c>a&&M(t,o,r)})(n,l,t,s):null!==s?(null!==e.$&&(n.textContent=""),k(n,null,t,s,0,s.length-1)):null!==l&&M(l,0,l.length-1)):e.$!==o&&(n.data=o)},P=(e,t,n)=>{const l=(e=>B(e).j)(e);return{emit:e=>x(l,t,{bubbles:!!(4&n),composed:!!(2&n),cancelable:!!(1&n),detail:e})}},x=(e,t,n)=>{const l=o.ce(t,n);return e.dispatchEvent(l),l},E=(e,t)=>{t&&!e.v&&t["s-p"]&&t["s-p"].push(new Promise((t=>e.v=t)))},N=(e,t)=>{if(e.t|=16,!(4&e.t))return E(e,e.k),se((()=>T(e,t)));e.t|=512},T=(e,t)=>{const n=e.i;return t&&(e.t|=256,e.u&&(e.u.map((([e,t])=>U(n,e,t))),e.u=null)),W(void 0,(()=>A(e,n,t)))},A=async(e,t,n)=>{const l=e.j,o=l["s-rc"];n&&(e=>{const t=e.M,n=e.j,l=t.t,o=((e,t)=>{let n=y(t),l=X.get(n);if(e=11===e.nodeType?e:s,l)if("string"==typeof l){let t,o=h.get(e=e.head||e);o||h.set(e,o=new Set),o.has(n)||(t=s.createElement("style"),t.innerHTML=l,e.insertBefore(t,e.querySelector("link")),o&&o.add(n))}else e.adoptedStyleSheets.includes(l)||(e.adoptedStyleSheets=[...e.adoptedStyleSheets,l]);return n})(n.shadowRoot?n.shadowRoot:n.getRootNode(),t);10&l&&(n["s-sc"]=o,n.classList.add(o+"-h"))})(e);F(e,t),o&&(o.map((e=>e())),l["s-rc"]=void 0);{const t=l["s-p"],n=()=>L(e);0===t.length?n():(Promise.all(t).then(n),e.t|=4,t.length=0)}},F=(n,l)=>{try{l=l.render(),n.t&=-17,n.t|=2,((n,l)=>{const s=n.j,o=n.C||p(null,null),c=(e=>e&&e.S===b)(l)?l:m(null,null,l);t=s.tagName,c.S=null,c.t|=4,n.C=c,c.g=o.g=s.shadowRoot||s,e=s["s-sc"],O(o,c)})(n,l)}catch(e){J(e,n.j)}return null},L=e=>{const t=e.j,n=e.k;64&e.t||(e.t|=64,q(t),e.O(t),n||R()),e.v&&(e.v(),e.v=void 0),512&e.t&&le((()=>N(e,!1))),e.t&=-517},R=()=>{q(s.documentElement),le((()=>x(l,"appload",{detail:{namespace:"lottery-ticket"}})))},U=(e,t,n)=>{if(e&&e[t])try{return e[t](n)}catch(e){J(e)}},W=(e,t)=>e&&e.then?e.then(t):t(),q=e=>e.classList.add("hydrated"),H=(e,t,n)=>{if(t.P){e.watchers&&(t.N=e.watchers);const l=Object.entries(t.P),s=e.prototype;if(l.map((([e,[l]])=>{(31&l||2&n&&32&l)&&Object.defineProperty(s,e,{get(){return((e,t)=>B(this).T.get(t))(0,e)},set(n){((e,t,n,l)=>{const s=B(e),o=s.j,c=s.T.get(t),r=s.t,i=s.i;if(n=((e,t)=>null==e||d(e)?e:4&t?"false"!==e&&(""===e||!!e):2&t?parseFloat(e):1&t?e+"":e)(n,l.P[t][0]),(!(8&r)||void 0===c)&&n!==c&&(!Number.isNaN(c)||!Number.isNaN(n))&&(s.T.set(t,n),i)){if(l.N&&128&r){const e=l.N[t];e&&e.map((e=>{try{i[e](n,c,t)}catch(e){J(e,o)}}))}2==(18&r)&&N(s,!1)}})(this,e,n,t)},configurable:!0,enumerable:!0})})),1&n){const t=new Map;s.attributeChangedCallback=function(e,n,l){o.jmp((()=>{const n=t.get(e);if(this.hasOwnProperty(n))l=this[n],delete this[n];else if(s.hasOwnProperty(n)&&"number"==typeof this[n]&&this[n]==l)return;this[n]=(null!==l||"boolean"!=typeof this[n])&&l}))},e.observedAttributes=l.filter((([e,t])=>15&t[0])).map((([e,n])=>{const l=n[1]||e;return t.set(l,e),l}))}}return e},V=e=>{U(e,"connectedCallback")},_=(e,t={})=>{const n=[],c=t.exclude||[],u=l.customElements,a=s.head,f=a.querySelector("meta[charset]"),h=s.createElement("style"),$=[];let d,m=!0;Object.assign(o,t),o.l=new URL(t.resourcesUrl||"./",s.baseURI).href,e.map((e=>{e[1].map((t=>{const l={t:t[0],h:t[1],P:t[2],A:t[3]};l.P=t[2],l.A=t[3],l.N={};const s=l.h,a=class extends HTMLElement{constructor(e){super(e),G(e=this,l),1&l.t&&e.attachShadow({mode:"open"})}connectedCallback(){d&&(clearTimeout(d),d=null),m?$.push(this):o.jmp((()=>(e=>{if(0==(1&o.t)){const t=B(e),n=t.M,l=()=>{};if(1&t.t)i(e,t,n.A),V(t.i);else{t.t|=1;{let n=e;for(;n=n.parentNode||n.host;)if(n["s-p"]){E(t,t.k=n);break}}n.P&&Object.entries(n.P).map((([t,[n]])=>{if(31&n&&e.hasOwnProperty(t)){const n=e[t];delete e[t],e[t]=n}})),(async(e,t,n,l,s)=>{if(0==(32&t.t)){{if(t.t|=32,(s=Q(n)).then){const e=()=>{};s=await s,e()}s.isProxied||(n.N=s.watchers,H(s,n,2),s.isProxied=!0);const e=()=>{};t.t|=8;try{new s(t)}catch(e){J(e)}t.t&=-9,t.t|=128,e(),V(t.i)}if(s.style){let e=s.style;const t=y(n);if(!X.has(t)){const l=()=>{};((e,t,n)=>{let l=X.get(e);r&&n?(l=l||new CSSStyleSheet,l.replace(t)):l=t,X.set(e,l)})(t,e,!!(1&n.t)),l()}}}const o=t.k,c=()=>N(t,!0);o&&o["s-rc"]?o["s-rc"].push(c):c()})(0,t,n)}l()}})(this)))}disconnectedCallback(){o.jmp((()=>(()=>{if(0==(1&o.t)){const e=B(this);e.o&&(e.o.map((e=>e())),e.o=void 0)}})()))}componentOnReady(){return B(this).F}};l.L=e[0],c.includes(s)||u.get(s)||(n.push(s),u.define(s,H(a,l,1)))}))})),h.innerHTML=n+"{visibility:hidden}.hydrated{visibility:inherit}",h.setAttribute("data-styles",""),a.insertBefore(h,f?f.nextSibling:a.firstChild),m=!1,$.length?$.map((e=>e.connectedCallback())):o.jmp((()=>d=setTimeout(R,30)))},z=new WeakMap,B=e=>z.get(e),D=(e,t)=>z.set(t.i=e,t),G=(e,t)=>{const n={t:0,j:e,M:t,T:new Map};return n.F=new Promise((e=>n.O=e)),e["s-p"]=[],e["s-rc"]=[],i(e,n,t.A),z.set(e,n)},I=(e,t)=>t in e,J=(e,t)=>(0,console.error)(e,t),K=new Map,Q=e=>{const t=e.h.replace(/-/g,"_"),n=e.L,l=K.get(n);return l?l[t]:import(`./${n}.entry.js`).then((e=>(K.set(n,e),e[t])),J)},X=new Map,Y=[],Z=[],ee=(e,t)=>l=>{e.push(l),n||(n=!0,t&&4&o.t?le(ne):o.raf(ne))},te=e=>{for(let t=0;t<e.length;t++)try{e[t](performance.now())}catch(e){J(e)}e.length=0},ne=()=>{te(Y),te(Z),(n=Y.length>0)&&o.raf(ne)},le=e=>c().then(e),se=ee(Z,!0);export{_ as b,P as c,m as h,c as p,D as r}

package/dist/lottery-ticket/p-ec3208f7.entry.js

@@ -0,0 +1 @@
+import{r as t,c as e,h as i}from"./p-91b1278e.js";const s=class{constructor(i){t(this,i),this.bulletEvent=e(this,"lotteryBulletSelection",7),this.value="0",this.selectable=!0,this.isSelected=!1,this.select=()=>{this.selectable&&(this.isSelected=!this.isSelected,this.bulletEvent.emit({value:this.value,selected:this.isSelected}))}}render(){return i("div",{class:"Circle "+(this.selectable?"":"Disabled")+(this.isSelected?"Selected":""),onClick:()=>this.select()},this.value)}};s.style='@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 r=class{constructor(i){t(this,i),this.gridFilledEvent=e(this,"gridFilled",7),this.gridDirtyEvent=e(this,"gridDirty",7),this.totalNumbers=0,this.maximumAllowed=0,this.minimumAllowed=1,this.selectable=!0,this.selectedNumbers="",this.displaySelected=!1,this.language="en",this.numbers=[],this.selectedCounter=0}connectedCallback(){let t=[];this.selectedNumbers.length>0&&(t=this.selectedNumbers.split(","),this.selectedCounter=t.length),this.displaySelected?t.forEach((t=>{this.numbers.push({number:t,selected:!0,selectable:this.selectable})})):[...Array(this.totalNumbers).keys()].map((t=>(t+1).toString())).forEach((e=>{this.numbers.push({number:e,selected:t.indexOf(e)>=0,selectable:this.selectedCounter!=this.maximumAllowed&&this.selectable})}))}lotteryBulletSelectionHandler(t){this.numbers=this.numbers.map((e=>e.number==t.detail.value?{number:e.number,selected:t.detail.selected,selectable:e.selectable}:{number:e.number,selected:e.selected,selectable:e.selectable})),t.detail.selected?(this.selectedCounter+=1,this.selectedCounter==this.maximumAllowed&&(this.numbers=this.numbers.map((t=>({number:t.number,selected:t.selected,selectable:!!t.selected}))),this.gridFilledEvent.emit({id:this.ticketId,index:this.gridIndex,selectedNumbers:this.numbers.filter((t=>t.selected)).map((t=>t.number))}))):(this.selectedCounter==this.maximumAllowed&&(this.numbers=this.numbers.map((t=>({number:t.number,selected:t.selected,selectable:!0}))),this.gridDirtyEvent.emit({id:this.ticketId,index:this.gridIndex,selectedNumbers:this.numbers.filter((t=>t.selected)).map((t=>t.number))})),this.selectedCounter-=1)}async resetSelectionHandler(t){t.detail&&t.detail==this.ticketId&&(this.selectedCounter=0,this.numbers=this.numbers.map((t=>({number:t.number,selected:!1,selectable:this.selectable}))),this.gridDirtyEvent.emit({id:this.ticketId,index:this.gridIndex,selectedNumbers:this.numbers.filter((t=>t.selected)).map((t=>t.number))}))}async autoSelectionHandler(t){if(t.detail&&t.detail==this.ticketId){this.resetSelectionHandler(t);let e=[...Array(this.totalNumbers).keys()].map((t=>t+1)).sort((()=>.5-Math.random()));e=e.slice(0,this.minimumAllowed),this.numbers=this.numbers.map((t=>({number:t.number,selected:e.indexOf(parseInt(t.number,10))>=0,selectable:e.indexOf(parseInt(t.number,10))>=0}))),this.gridFilledEvent.emit({id:this.ticketId,index:this.gridIndex,selectedNumbers:this.numbers.filter((t=>t.selected)).map((t=>t.number))}),this.selectedCounter=this.maximumAllowed}}render(){return i("div",{class:"GridContainer"},i("div",{class:"Grid"},this.numbers.map((t=>i("div",null,i("lottery-bullet",{value:t.number,selectable:t.selectable,"is-selected":t.selected}))))))}};r.style='@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap");:host{display:block;font-family:"Roboto", sans-serif}.GridContainer{display:flex;flex-direction:column;max-width:1200px}.Grid{margin-top:10px 0 10px 0;display:flex;flex-direction:row;flex-wrap:wrap;gap:25px}';const a=["ro","en"],o={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"}},l=(t,e)=>{const i=e;return o[void 0!==i&&a.includes(i)?i:"en"][t]},n=class{constructor(i){t(this,i),this.ticketCompleted=e(this,"ticketCompleted",7),this.autoSelection=e(this,"autoSelection",7),this.resetSelection=e(this,"resetSelection",7),this.stakeChange=e(this,"stakeChange",7),this.multiplierChange=e(this,"multiplierChange",7),this.numberOfGrids=1,this.multipleDraws=!0,this.resetButton=!1,this.autoPick=!1,this.language="en",this.multiplier=!1,this.numberOfDraws=1,this.isLoading=!0,this.hasErrors=!1,this.ticketDone=!1,this.isCustomSelect=!1,this.amountInfo={}}checkForClickOutside(t){"SelectComponent"!==t.composedPath()[0].getAttribute("data-cluster")&&(this.isCustomSelect=!1)}connectedCallback(){let t=new URL(`${this.endpoint}/games/${this.gameId}`);fetch(t.href).then((t=>{if(t.ok)return t.json();this.hasErrors=!0})).then((t=>{this.isLoading=!1,this.gameData=t,this.grids=[...Array(t.rules.boards.length).keys()],this.amountInfo=this.gameData.rules.stakes[0]})).catch((t=>{this.isLoading=!1,this.hasErrors=!0,console.error("Error!",t)}))}multiplierChangeHandler(t){this.multiplier=!!t.target&&t.target.checked,this.multiplierChange.emit(this.multiplier)}drawsChangeHandler(t){this.ticket=Object.assign(Object.assign({},this.ticket),{draws:t}),this.ticketCompleted.emit(this.ticket)}gridFilledHandler(t){this.ticket=Object.assign(Object.assign({},t.detail),{draws:this.numberOfDraws}),this.ticketDone=!0,this.ticketCompleted.emit(this.ticket)}toggleAutoSelection(){this.ticketDone=!0,this.autoSelection.emit(this.ticketId)}toggleResetSelection(){this.ticketDone=!1,this.resetSelection.emit(this.ticketId)}changeStake(t,e){this.stakeChange.emit({ticketId:t,stake:e})}toggleClass(){this.isCustomSelect=!this.isCustomSelect}setDropdownItem(t){this.amountInfo={amount:t.amount,currency:t.currency},this.isCustomSelect=!1,this.changeStake(this.ticketId,t.amount)}render(){if(this.isLoading)return i("div",null,i("p",null,l("loading",this.language)));if(this.hasErrors)return i("div",null,i("p",null,l("error",this.language)));{const{rules:t}=this.gameData;return i("div",{class:"TicketContainer"},i("p",{class:"TicketTitle"},this.gameData.name),this.resetButton&&this.ticketDone&&i("div",{class:"ButtonContainer"},i("a",{class:"ResetButton",onClick:()=>this.toggleResetSelection()},l("resetButton",this.language))),this.autoPick&&!this.ticketDone&&i("div",{class:"ButtonContainer"},i("a",{class:"AutoButton",onClick:()=>this.toggleAutoSelection()},l("autoButton",this.language))),this.grids.map(((e,s)=>i("div",{class:"TicketGridBullets"},i("p",{class:"TicketGridTitle"},l("grid",this.language)," ",e),i("lottery-grid",{"grid-index":s,"maximum-allowed":t.boards[s].maximumAllowed,"minimum-allowed":t.boards[s].minimumAllowed,"total-numbers":t.boards[s].totalNumbers,selectable:!0,"reset-button":!0,"auto-pick":!0,"game-id":this.gameId,"ticket-id":this.ticketId,language:this.language})))),t.multiplier&&i("div",null,i("label",{class:"Toggle"},i("label",{class:"Label"},l("multiplier",this.language),": "),i("input",{class:"ToggleCheckbox",type:"checkbox",onInput:t=>this.multiplierChangeHandler(t)}),i("div",{class:"ToggleSwitch"}))),this.multipleDraws&&i("div",{class:"TicketDraws"},i("label",{class:"Label"},l("numberOfDraws",this.language),": "),i("div",{class:"NumberInput"},i("button",{onClick:()=>this.numberOfDraws>1?this.numberOfDraws--:this.numberOfDraws=1,class:"Minus"},"-"),i("input",{class:"InputDefault",min:"1",value:this.numberOfDraws,type:"number"}),i("button",{onClick:()=>this.numberOfDraws++,class:"Plus"},"+"))),i("div",null,i("label",{class:"Label"},l("wagerPerDraw",this.language),": "),i("div",{class:"WagerInput"},t.stakes.length>1?i("div",{"data-cluster":"SelectComponent",class:this.isCustomSelect?"SelectWrapper SelectActive":"SelectWrapper"},i("div",{"data-cluster":"SelectComponent",class:"SelectButton",onClick:()=>this.toggleClass()},i("span",{"data-cluster":"SelectComponent"},this.amountInfo.amount," ",this.amountInfo.currency),i("span",{"data-cluster":"SelectComponent",class:"SelectExpand"},"▼")),i("div",{"data-cluster":"SelectComponent",class:"SelectContent"},i("ul",{"data-cluster":"SelectComponent",class:"SelectOptions"},t.stakes.map((t=>i("li",{"data-cluster":"SelectComponent",class:this.amountInfo.amount==t.amount?"SelectedValue":"",value:t.amount,onClick:()=>this.setDropdownItem(t)},t.amount," ",t.currency)))))):i("div",null,i("input",{min:"1",value:t.stakes[0].amount,type:"number",disabled:!0}),i("p",{class:"WagerInputTitle"},t.stakes[0].currency)))))}}static get watchers(){return{numberOfDraws:["drawsChangeHandler"]}}};n.style='@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}';export{s as lottery_bullet,r as lottery_grid,n as lottery_ticket}

package/dist/types/components/lottery-ticket/lottery-ticket.d.ts

@@ -42,6 +42,12 @@ export declare class LotteryTicket {
   private isLoading;
   private hasErrors;
   private ticketDone;
+  private isCustomSelect;
+  private 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: any): void;
   /**
    * @TODO including ts type
    */
@@ -56,6 +62,8 @@ export declare class LotteryTicket {
   gridFilledHandler(event: CustomEvent<GridEvent>): void;
   toggleAutoSelection(): void;
   toggleResetSelection(): void;
-  changeStake(event: any): void;
+  changeStake(ticketid: number, amount: string): void;
+  toggleClass(): void;
+  setDropdownItem(item: any): void;
   render(): any;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@everymatrix/lottery-ticket",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "main": "./dist/index.cjs.js",
   "module": "./dist/index.js",
   "es2015": "./dist/esm/index.mjs",

package/dist/lottery-ticket/p-6d0df066.js

@@ -1 +0,0 @@
-let e,t,n=!1;const l="undefined"!=typeof window?window:{},s=l.document||{head:{}},o={t:0,l:"",jmp:e=>e(),raf:e=>requestAnimationFrame(e),ael:(e,t,n,l)=>e.addEventListener(t,n,l),rel:(e,t,n,l)=>e.removeEventListener(t,n,l),ce:(e,t)=>new CustomEvent(e,t)},c=e=>Promise.resolve(e),r=(()=>{try{return new CSSStyleSheet,"function"==typeof(new CSSStyleSheet).replace}catch(e){}return!1})(),i=(e,t,n)=>{n&&n.map((([n,l,s])=>{const c=a(e,n),r=u(t,s),i=f(n);o.ael(c,l,r,i),(t.o=t.o||[]).push((()=>o.rel(c,l,r,i)))}))},u=(e,t)=>n=>{try{256&e.t?e.i[t](n):(e.u=e.u||[]).push([t,n])}catch(e){J(e)}},a=(e,t)=>4&t?s:e,f=e=>0!=(2&e),h=new WeakMap,y=e=>"sc-"+e.h,$={},d=e=>"object"==(e=typeof e)||"function"===e,m=(e,t,...n)=>{let l=null,s=!1,o=!1,c=[];const r=t=>{for(let n=0;n<t.length;n++)l=t[n],Array.isArray(l)?r(l):null!=l&&"boolean"!=typeof l&&((s="function"!=typeof e&&!d(l))&&(l+=""),s&&o?c[c.length-1].$+=l:c.push(s?p(null,l):l),o=s)};if(r(n),t){const e=t.className||t.class;e&&(t.class="object"!=typeof e?e:Object.keys(e).filter((t=>e[t])).join(" "))}const i=p(e,null);return i.m=t,c.length>0&&(i.p=c),i},p=(e,t)=>({t:0,S:e,$:t,g:null,p:null,m:null}),b={},w=(e,t,n,s,c,r)=>{if(n!==s){let i=I(e,t),u=t.toLowerCase();if("class"===t){const t=e.classList,l=g(n),o=g(s);t.remove(...l.filter((e=>e&&!o.includes(e)))),t.add(...o.filter((e=>e&&!l.includes(e))))}else if(i||"o"!==t[0]||"n"!==t[1]){const l=d(s);if((i||l&&null!==s)&&!c)try{if(e.tagName.includes("-"))e[t]=s;else{let l=null==s?"":s;"list"===t?i=!1:null!=n&&e[t]==l||(e[t]=l)}}catch(e){}null==s||!1===s?!1===s&&""!==e.getAttribute(t)||e.removeAttribute(t):(!i||4&r||c)&&!l&&e.setAttribute(t,s=!0===s?"":s)}else t="-"===t[2]?t.slice(3):I(l,u)?u.slice(2):u[2]+t.slice(3),n&&o.rel(e,t,n,!1),s&&o.ael(e,t,s,!1)}},S=/\s/,g=e=>e?e.split(S):[],j=(e,t,n,l)=>{const s=11===t.g.nodeType&&t.g.host?t.g.host:t.g,o=e&&e.m||$,c=t.m||$;for(l in o)l in c||w(s,l,o[l],void 0,n,t.t);for(l in c)w(s,l,o[l],c[l],n,t.t)},v=(t,n,l)=>{let o,c,r=n.p[l],i=0;if(null!==r.$)o=r.g=s.createTextNode(r.$);else if(o=r.g=s.createElement(r.S),j(null,r,!1),null!=e&&o["s-si"]!==e&&o.classList.add(o["s-si"]=e),r.p)for(i=0;i<r.p.length;++i)c=v(t,r,i),c&&o.appendChild(c);return o},k=(e,n,l,s,o,c)=>{let r,i=e;for(i.shadowRoot&&i.tagName===t&&(i=i.shadowRoot);o<=c;++o)s[o]&&(r=v(null,l,o),r&&(s[o].g=r,i.insertBefore(r,n)))},M=(e,t,n,l)=>{for(;t<=n;++t)(l=e[t])&&l.g.remove()},C=(e,t)=>e.S===t.S,O=(e,t)=>{const n=t.g=e.g,l=e.p,s=t.p,o=t.$;null===o?(j(e,t,!1),null!==l&&null!==s?((e,t,n,l)=>{let s,o=0,c=0,r=t.length-1,i=t[0],u=t[r],a=l.length-1,f=l[0],h=l[a];for(;o<=r&&c<=a;)null==i?i=t[++o]:null==u?u=t[--r]:null==f?f=l[++c]:null==h?h=l[--a]:C(i,f)?(O(i,f),i=t[++o],f=l[++c]):C(u,h)?(O(u,h),u=t[--r],h=l[--a]):C(i,h)?(O(i,h),e.insertBefore(i.g,u.g.nextSibling),i=t[++o],h=l[--a]):C(u,f)?(O(u,f),e.insertBefore(u.g,i.g),u=t[--r],f=l[++c]):(s=v(t&&t[c],n,c),f=l[++c],s&&i.g.parentNode.insertBefore(s,i.g));o>r?k(e,null==l[a+1]?null:l[a+1].g,n,l,c,a):c>a&&M(t,o,r)})(n,l,t,s):null!==s?(null!==e.$&&(n.textContent=""),k(n,null,t,s,0,s.length-1)):null!==l&&M(l,0,l.length-1)):e.$!==o&&(n.data=o)},P=(e,t,n)=>{const l=(e=>B(e).j)(e);return{emit:e=>x(l,t,{bubbles:!!(4&n),composed:!!(2&n),cancelable:!!(1&n),detail:e})}},x=(e,t,n)=>{const l=o.ce(t,n);return e.dispatchEvent(l),l},E=(e,t)=>{t&&!e.v&&t["s-p"]&&t["s-p"].push(new Promise((t=>e.v=t)))},N=(e,t)=>{if(e.t|=16,!(4&e.t))return E(e,e.k),se((()=>T(e,t)));e.t|=512},T=(e,t)=>{const n=e.i;return t&&(e.t|=256,e.u&&(e.u.map((([e,t])=>U(n,e,t))),e.u=null)),W(void 0,(()=>A(e,n,t)))},A=async(e,t,n)=>{const l=e.j,o=l["s-rc"];n&&(e=>{const t=e.M,n=e.j,l=t.t,o=((e,t)=>{let n=y(t),l=X.get(n);if(e=11===e.nodeType?e:s,l)if("string"==typeof l){let t,o=h.get(e=e.head||e);o||h.set(e,o=new Set),o.has(n)||(t=s.createElement("style"),t.innerHTML=l,e.insertBefore(t,e.querySelector("link")),o&&o.add(n))}else e.adoptedStyleSheets.includes(l)||(e.adoptedStyleSheets=[...e.adoptedStyleSheets,l]);return n})(n.shadowRoot?n.shadowRoot:n.getRootNode(),t);10&l&&(n["s-sc"]=o,n.classList.add(o+"-h"))})(e);F(e,t),o&&(o.map((e=>e())),l["s-rc"]=void 0);{const t=l["s-p"],n=()=>L(e);0===t.length?n():(Promise.all(t).then(n),e.t|=4,t.length=0)}},F=(n,l)=>{try{l=l.render(),n.t&=-17,n.t|=2,((n,l)=>{const s=n.j,o=n.C||p(null,null),c=(e=>e&&e.S===b)(l)?l:m(null,null,l);t=s.tagName,c.S=null,c.t|=4,n.C=c,c.g=o.g=s.shadowRoot||s,e=s["s-sc"],O(o,c)})(n,l)}catch(e){J(e,n.j)}return null},L=e=>{const t=e.j,n=e.k;64&e.t||(e.t|=64,q(t),e.O(t),n||R()),e.v&&(e.v(),e.v=void 0),512&e.t&&le((()=>N(e,!1))),e.t&=-517},R=()=>{q(s.documentElement),le((()=>x(l,"appload",{detail:{namespace:"lottery-ticket"}})))},U=(e,t,n)=>{if(e&&e[t])try{return e[t](n)}catch(e){J(e)}},W=(e,t)=>e&&e.then?e.then(t):t(),q=e=>e.classList.add("hydrated"),H=(e,t,n)=>{if(t.P){e.watchers&&(t.N=e.watchers);const l=Object.entries(t.P),s=e.prototype;if(l.map((([e,[l]])=>{(31&l||2&n&&32&l)&&Object.defineProperty(s,e,{get(){return((e,t)=>B(this).T.get(t))(0,e)},set(n){((e,t,n,l)=>{const s=B(e),o=s.j,c=s.T.get(t),r=s.t,i=s.i;if(n=((e,t)=>null==e||d(e)?e:4&t?"false"!==e&&(""===e||!!e):2&t?parseFloat(e):1&t?e+"":e)(n,l.P[t][0]),(!(8&r)||void 0===c)&&n!==c&&(!Number.isNaN(c)||!Number.isNaN(n))&&(s.T.set(t,n),i)){if(l.N&&128&r){const e=l.N[t];e&&e.map((e=>{try{i[e](n,c,t)}catch(e){J(e,o)}}))}2==(18&r)&&N(s,!1)}})(this,e,n,t)},configurable:!0,enumerable:!0})})),1&n){const t=new Map;s.attributeChangedCallback=function(e,n,l){o.jmp((()=>{const n=t.get(e);if(this.hasOwnProperty(n))l=this[n],delete this[n];else if(s.hasOwnProperty(n)&&"number"==typeof this[n]&&this[n]==l)return;this[n]=(null!==l||"boolean"!=typeof this[n])&&l}))},e.observedAttributes=l.filter((([e,t])=>15&t[0])).map((([e,n])=>{const l=n[1]||e;return t.set(l,e),l}))}}return e},V=e=>{U(e,"connectedCallback")},_=(e,t={})=>{const n=[],c=t.exclude||[],u=l.customElements,a=s.head,f=a.querySelector("meta[charset]"),h=s.createElement("style"),$=[];let d,m=!0;Object.assign(o,t),o.l=new URL(t.resourcesUrl||"./",s.baseURI).href,e.map((e=>{e[1].map((t=>{const l={t:t[0],h:t[1],P:t[2],A:t[3]};l.P=t[2],l.A=t[3],l.N={};const s=l.h,a=class extends HTMLElement{constructor(e){super(e),G(e=this,l),1&l.t&&e.attachShadow({mode:"open"})}connectedCallback(){d&&(clearTimeout(d),d=null),m?$.push(this):o.jmp((()=>(e=>{if(0==(1&o.t)){const t=B(e),n=t.M,l=()=>{};if(1&t.t)i(e,t,n.A),V(t.i);else{t.t|=1;{let n=e;for(;n=n.parentNode||n.host;)if(n["s-p"]){E(t,t.k=n);break}}n.P&&Object.entries(n.P).map((([t,[n]])=>{if(31&n&&e.hasOwnProperty(t)){const n=e[t];delete e[t],e[t]=n}})),(async(e,t,n,l,s)=>{if(0==(32&t.t)){{if(t.t|=32,(s=Q(n)).then){const e=()=>{};s=await s,e()}s.isProxied||(n.N=s.watchers,H(s,n,2),s.isProxied=!0);const e=()=>{};t.t|=8;try{new s(t)}catch(e){J(e)}t.t&=-9,t.t|=128,e(),V(t.i)}if(s.style){let e=s.style;const t=y(n);if(!X.has(t)){const l=()=>{};((e,t,n)=>{let l=X.get(e);r&&n?(l=l||new CSSStyleSheet,l.replace(t)):l=t,X.set(e,l)})(t,e,!!(1&n.t)),l()}}}const o=t.k,c=()=>N(t,!0);o&&o["s-rc"]?o["s-rc"].push(c):c()})(0,t,n)}l()}})(this)))}disconnectedCallback(){o.jmp((()=>(()=>{if(0==(1&o.t)){const e=B(this);e.o&&(e.o.map((e=>e())),e.o=void 0)}})()))}componentOnReady(){return B(this).F}};l.L=e[0],c.includes(s)||u.get(s)||(n.push(s),u.define(s,H(a,l,1)))}))})),h.innerHTML=n+"{visibility:hidden}.hydrated{visibility:inherit}",h.setAttribute("data-styles",""),a.insertBefore(h,f?f.nextSibling:a.firstChild),m=!1,$.length?$.map((e=>e.connectedCallback())):o.jmp((()=>d=setTimeout(R,30)))},z=new WeakMap,B=e=>z.get(e),D=(e,t)=>z.set(t.i=e,t),G=(e,t)=>{const n={t:0,j:e,M:t,T:new Map};return n.F=new Promise((e=>n.O=e)),e["s-p"]=[],e["s-rc"]=[],i(e,n,t.A),z.set(e,n)},I=(e,t)=>t in e,J=(e,t)=>(0,console.error)(e,t),K=new Map,Q=e=>{const t=e.h.replace(/-/g,"_"),n=e.L,l=K.get(n);return l?l[t]:import(`./${n}.entry.js`).then((e=>(K.set(n,e),e[t])),J)},X=new Map,Y=[],Z=[],ee=(e,t)=>l=>{e.push(l),n||(n=!0,t&&4&o.t?le(ne):o.raf(ne))},te=e=>{for(let t=0;t<e.length;t++)try{e[t](performance.now())}catch(e){J(e)}e.length=0},ne=()=>{te(Y),te(Z),(n=Y.length>0)&&o.raf(ne)},le=e=>c().then(e),se=ee(Z,!0);export{_ as b,P as c,m as h,c as p,D as r}

package/dist/lottery-ticket/p-ed151006.entry.js

@@ -1 +0,0 @@
-import{r as t,c as e,h as i}from"./p-6d0df066.js";const s=class{constructor(i){t(this,i),this.bulletEvent=e(this,"lotteryBulletSelection",7),this.value="0",this.selectable=!0,this.isSelected=!1,this.select=()=>{this.selectable&&(this.isSelected=!this.isSelected,this.bulletEvent.emit({value:this.value,selected:this.isSelected}))}}render(){return i("div",{class:"Circle "+(this.selectable?"":"Disabled")+(this.isSelected?"Selected":""),onClick:()=>this.select()},this.value)}};s.style='@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap");:host{display:block;font-family:"Roboto", sans-serif}.Circle{cursor:pointer;color:#000000;display:block;background:#FFF;border:solid 2px #00958f;height:20px;width:20px;border-radius:50%;margin:0;display:flex;align-items:center;justify-content:center;user-select:none;font-size:12px;font-weight:600;position:relative}.Circle:hover{background:#aee4e2}.Circle.Selected{color:#ffffff;background:#9EC258;background:-webkit-radial-gradient(top, #00958f, #004D4A);background:-moz-radial-gradient(top, #00958f, #004D4A);background:radial-gradient(to bottom, #00958f, #004D4A);border:solid 2px #00958f}.Circle.Disabled{color:#707070;background:#D4D4D4;border:solid 2px #707070;cursor:default}.Circle.DisabledSelected{color:#ffffff;background:#9EC258;background:-webkit-radial-gradient(top, #00958f, #004D4A);background:-moz-radial-gradient(top, #00958f, #004D4A);background:radial-gradient(to bottom, #00958f, #004D4A);border:solid 2px #707070;cursor:default}';const r=class{constructor(i){t(this,i),this.gridFilledEvent=e(this,"gridFilled",7),this.gridDirtyEvent=e(this,"gridDirty",7),this.totalNumbers=0,this.maximumAllowed=0,this.minimumAllowed=1,this.selectable=!0,this.selectedNumbers="",this.displaySelected=!1,this.language="en",this.numbers=[],this.selectedCounter=0}connectedCallback(){let t=[];this.selectedNumbers.length>0&&(t=this.selectedNumbers.split(","),this.selectedCounter=t.length),this.displaySelected?t.forEach((t=>{this.numbers.push({number:t,selected:!0,selectable:this.selectable})})):[...Array(this.totalNumbers).keys()].map((t=>(t+1).toString())).forEach((e=>{this.numbers.push({number:e,selected:t.indexOf(e)>=0,selectable:this.selectedCounter!=this.maximumAllowed&&this.selectable})}))}lotteryBulletSelectionHandler(t){this.numbers=this.numbers.map((e=>e.number==t.detail.value?{number:e.number,selected:t.detail.selected,selectable:e.selectable}:{number:e.number,selected:e.selected,selectable:e.selectable})),t.detail.selected?(this.selectedCounter+=1,this.selectedCounter==this.maximumAllowed&&(this.numbers=this.numbers.map((t=>({number:t.number,selected:t.selected,selectable:!!t.selected}))),this.gridFilledEvent.emit({id:this.ticketId,index:this.gridIndex,selectedNumbers:this.numbers.filter((t=>t.selected)).map((t=>t.number))}))):(this.selectedCounter==this.maximumAllowed&&(this.numbers=this.numbers.map((t=>({number:t.number,selected:t.selected,selectable:!0}))),this.gridDirtyEvent.emit({id:this.ticketId,index:this.gridIndex,selectedNumbers:this.numbers.filter((t=>t.selected)).map((t=>t.number))})),this.selectedCounter-=1)}async resetSelectionHandler(t){t.detail&&t.detail==this.ticketId&&(this.selectedCounter=0,this.numbers=this.numbers.map((t=>({number:t.number,selected:!1,selectable:this.selectable}))),this.gridDirtyEvent.emit({id:this.ticketId,index:this.gridIndex,selectedNumbers:this.numbers.filter((t=>t.selected)).map((t=>t.number))}))}async autoSelectionHandler(t){if(t.detail&&t.detail==this.ticketId){this.resetSelectionHandler(t);let e=[...Array(this.totalNumbers).keys()].map((t=>t+1)).sort((()=>.5-Math.random()));e=e.slice(0,this.minimumAllowed),this.numbers=this.numbers.map((t=>({number:t.number,selected:e.indexOf(parseInt(t.number,10))>=0,selectable:e.indexOf(parseInt(t.number,10))>=0}))),this.gridFilledEvent.emit({id:this.ticketId,index:this.gridIndex,selectedNumbers:this.numbers.filter((t=>t.selected)).map((t=>t.number))}),this.selectedCounter=this.maximumAllowed}}render(){return i("div",{class:"GridContainer"},i("div",{class:"Grid"},this.numbers.map((t=>i("div",null,i("lottery-bullet",{value:t.number,selectable:t.selectable,"is-selected":t.selected}))))))}};r.style='@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap");:host{display:block;font-family:"Roboto", sans-serif}.GridContainer{display:flex;flex-direction:column;max-width:350px}.Grid{margin-top:10px 0 10px 0;display:flex;flex-direction:row;flex-wrap:wrap;gap:10px}';const l=["ro","en"],o={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"}},a=(t,e)=>{const i=e;return o[void 0!==i&&l.includes(i)?i:"en"][t]},n=class{constructor(i){t(this,i),this.ticketCompleted=e(this,"ticketCompleted",7),this.autoSelection=e(this,"autoSelection",7),this.resetSelection=e(this,"resetSelection",7),this.stakeChange=e(this,"stakeChange",7),this.multiplierChange=e(this,"multiplierChange",7),this.numberOfGrids=1,this.multipleDraws=!0,this.resetButton=!1,this.autoPick=!1,this.language="en",this.multiplier=!1,this.numberOfDraws=1,this.isLoading=!0,this.hasErrors=!1,this.ticketDone=!1}connectedCallback(){let t=new URL(`${this.endpoint}/games/${this.gameId}`);fetch(t.href).then((t=>{if(t.ok)return t.json();this.hasErrors=!0})).then((t=>{this.isLoading=!1,this.gameData=t,this.grids=[...Array(t.rules.boards.length).keys()]})).catch((t=>{this.isLoading=!1,this.hasErrors=!0,console.error("Error!",t)}))}multiplierChangeHandler(t){this.multiplier=!!t.target&&t.target.checked,this.multiplierChange.emit(this.multiplier)}drawsChangeHandler(t){this.ticket=Object.assign(Object.assign({},this.ticket),{draws:t}),this.ticketCompleted.emit(this.ticket)}gridFilledHandler(t){this.ticket=Object.assign(Object.assign({},t.detail),{draws:this.numberOfDraws}),this.ticketDone=!0,this.ticketCompleted.emit(this.ticket)}toggleAutoSelection(){this.ticketDone=!0,this.autoSelection.emit(this.ticketId)}toggleResetSelection(){this.ticketDone=!1,this.resetSelection.emit(this.ticketId)}changeStake(t){this.stakeChange.emit({ticketId:this.ticketId,stake:t.target.value})}render(){if(this.isLoading)return i("div",null,i("p",null,a("loading",this.language)));if(this.hasErrors)return i("div",null,i("p",null,a("error",this.language)));{const{rules:t}=this.gameData;return i("div",{class:"TicketContainer"},i("p",null,this.gameData.name),this.resetButton&&this.ticketDone&&i("a",{class:"ResetButton",onClick:()=>this.toggleResetSelection()},a("resetButton",this.language)),this.autoPick&&!this.ticketDone&&i("a",{class:"AutoButton",onClick:()=>this.toggleAutoSelection()},a("autoButton",this.language)),this.grids.map(((e,s)=>i("div",{class:"TicketGridBullets"},i("p",{class:"TicketGridTitle"},a("grid",this.language)," ",e),i("lottery-grid",{"grid-index":s,"maximum-allowed":t.boards[s].maximumAllowed,"minimum-allowed":t.boards[s].minimumAllowed,"total-numbers":t.boards[s].totalNumbers,selectable:!0,"reset-button":!0,"auto-pick":!0,"game-id":this.gameId,"ticket-id":this.ticketId,language:this.language})))),t.multiplier&&i("div",null,i("label",{class:"Toggle"},i("label",{class:"Label"},a("multiplier",this.language),": "),i("input",{class:"ToggleCheckbox",type:"checkbox",onInput:t=>this.multiplierChangeHandler(t)}),i("div",{class:"ToggleSwitch"}))),this.multipleDraws&&i("div",{class:"TicketDraws"},i("label",{class:"Label"},a("numberOfDraws",this.language),": "),i("div",{class:"NumberInput"},i("button",{onClick:()=>this.numberOfDraws>1?this.numberOfDraws--:this.numberOfDraws=1,class:"Minus"},"-"),i("input",{class:"InputDefault",min:"1",value:this.numberOfDraws,type:"number"}),i("button",{onClick:()=>this.numberOfDraws++,class:"Plus"},"+"))),i("label",{class:"Label"},a("wagerPerDraw",this.language),": "),i("div",{class:"WagerInput"},t.stakes.length>1?i("div",null,i("select",{class:"InputDefault",onChange:t=>this.changeStake(t)},t.stakes.map((t=>i("option",{value:t.amount},t.amount," ",t.currency))))):i("div",null,i("input",{min:"1",value:t.stakes[0].amount,type:"number",disabled:!0}),i("p",{class:"WagerInputTitle"},t.stakes[0].currency))))}}static get watchers(){return{numberOfDraws:["drawsChangeHandler"]}}};n.style='@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}';export{s as lottery_bullet,r as lottery_grid,n as lottery_ticket}