@everymatrix/lottery-ticket 0.1.23 → 1.0.69

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

@@ -1,494 +1,444 @@
-import { Component, h, Prop, State, Event, Listen, Watch } from '@stencil/core';
-import { translate } from '../../utils/locale.utils';
-import '@everymatrix/lottery-grid';
+import { h } from "@stencil/core";
+import { translate } from "../../utils/locale.utils";
+import "../../../../../lottery-grid/dist/types/index";
 export class LotteryTicket {
-  constructor() {
-    /**
-     * Number of grids of a ticket
-     */
-    this.numberOfGrids = 1;
-    /**
-     * Option to have the ticket registered for multiple draws
-     */
-    this.multipleDraws = true;
-    /**
-     * Shows the reset button
-     */
-    this.resetButton = false;
-    /**
-     * Shows the auto-pick button
-     */
-    this.autoPick = false;
-    /**
-     * Language
-     */
-    this.language = 'en';
-    /**
-     * Client custom styling via string
-     */
-    this.clientStyling = '';
+    constructor() {
+        this.setClientStyling = () => {
+            let sheet = document.createElement('style');
+            sheet.innerHTML = this.clientStyling;
+            this.stylingContainer.prepend(sheet);
+        };
+        this.setClientStylingURL = () => {
+            let cssFile = document.createElement('style');
+            setTimeout(() => {
+                cssFile.innerHTML = this.clientStylingUrlContent;
+                this.stylingContainer.prepend(cssFile);
+            }, 1);
+        };
+        this.endpoint = undefined;
+        this.gameId = undefined;
+        this.numberOfGrids = 1;
+        this.multipleDraws = true;
+        this.ticketId = undefined;
+        this.resetButton = false;
+        this.autoPick = false;
+        this.language = 'en';
+        this.clientStyling = '';
+        this.clientStylingUrlContent = '';
+        this.multiplier = false;
+        this.numberOfDraws = 1;
+        this.isLoading = true;
+        this.hasErrors = false;
+        this.ticketDone = false;
+        this.isCustomSelect = false;
+        this.amountInfo = {};
+        this.limitStylingAppends = false;
+    }
     /**
-     * Client custom styling via url content
+     * @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
      */
-    this.clientStylingUrlContent = '';
-    this.multiplier = false;
-    this.numberOfDraws = 1;
-    this.isLoading = true;
-    this.hasErrors = false;
-    this.ticketDone = false;
-    this.isCustomSelect = false;
-    this.amountInfo = {};
-    this.limitStylingAppends = false;
-    this.setClientStyling = () => {
-      let sheet = document.createElement('style');
-      sheet.innerHTML = this.clientStyling;
-      this.stylingContainer.prepend(sheet);
-    };
-    this.setClientStylingURL = () => {
-      let cssFile = document.createElement('style');
-      setTimeout(() => {
-        cssFile.innerHTML = this.clientStylingUrlContent;
-        this.stylingContainer.prepend(cssFile);
-      }, 1);
-    };
-  }
-  /**
-   * @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;
+    checkForClickOutside(ev) {
+        if (ev.composedPath()[0].getAttribute('data-cluster') !== 'SelectComponent') {
+            this.isCustomSelect = false;
+        }
+    }
+    connectedCallback() {
+        let url = new URL(`${this.endpoint}/games/${this.gameId}`);
+        fetch(url.href)
+            .then((response) => {
+            if (response.ok) {
+                return response.json();
+            }
+            else {
+                // Throw error
+                this.hasErrors = true;
+            }
+        })
+            .then((data) => {
+            this.isLoading = false;
+            this.gameData = data;
+            this.grids = [...Array(this.gameData.type.boards.length).keys()];
+            this.amountInfo = this.gameData.type.stakes[0]; // initial value for select
+        })
+            .catch((err) => {
+            this.isLoading = false;
+            this.hasErrors = true;
+            console.error('Error!', err);
+        });
+    }
+    componentDidRender() {
+        // start custom styling area
+        if (!this.limitStylingAppends && this.stylingContainer) {
+            if (this.clientStyling)
+                this.setClientStyling();
+            if (this.clientStylingUrlContent)
+                this.setClientStylingURL();
+            this.limitStylingAppends = true;
+        }
+        // end custom styling area
+    }
+    multiplierChangeHandler(e) {
+        this.multiplier = e.target ? e.target.checked : false;
+        this.multiplierChange.emit(this.multiplier);
+    }
+    drawsChangeHandler(event) {
+        this.ticket = Object.assign(Object.assign({}, this.ticket), { draws: event });
+        this.ticketCompleted.emit(this.ticket);
+    }
+    gridFilledHandler(event) {
+        this.ticket = Object.assign(Object.assign({}, event.detail), { draws: this.numberOfDraws });
+        this.ticketDone = true;
+        this.ticketCompleted.emit(this.ticket);
+    }
+    toggleAutoSelection() {
+        this.ticketDone = true;
+        this.autoSelection.emit(this.ticketId);
+    }
+    toggleResetSelection() {
+        this.ticketDone = false;
+        this.resetSelection.emit(this.ticketId);
+    }
+    changeStake(ticketid, amount) {
+        this.stakeChange.emit({
+            ticketId: ticketid,
+            stake: amount
+        });
+    }
+    toggleClass() {
+        this.isCustomSelect = !this.isCustomSelect;
+    }
+    setDropdownItem(item) {
+        this.amountInfo = {
+            value: item.value,
+            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))));
+        }
+        else {
+            if (this.hasErrors) {
+                return (h("div", null, h("p", null, translate('error', this.language))));
+            }
+            else {
+                const { type } = this.gameData;
+                return (h("div", { class: "TicketContainer", ref: el => this.stylingContainer = el }, 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((_, index) => h("div", { class: "TicketGridBullets" }, h("p", { class: "TicketGridTitle" }, translate('grid', this.language), " ", index + 1), h("lottery-grid", { "grid-index": index, "maximum-allowed": type.boards[index].maximumAllowed, "minimum-allowed": type.boards[index].minimumAllowed, "total-numbers": type.boards[index].highNumber - type.boards[index].lowNumber + 1, selectable: true, "reset-button": true, "auto-pick": true, "game-id": this.gameId, "ticket-id": this.ticketId, language: this.language, "client-styling": this.clientStyling, "client-styling-url-content": this.clientStylingUrlContent }))), type.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("div", null, h("label", { class: "Label" }, translate('wagerPerDraw', this.language), ": "), h("div", { class: "WagerInput" }, type.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.value, " ", 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" }, type.stakes.map((item) => h("li", { "data-cluster": "SelectComponent", class: this.amountInfo.value == item.value ? 'SelectedValue' : '', value: item.value, onClick: () => this.setDropdownItem(item) }, item.value, " ", item.currency)))))) : (h("div", null, h("input", { min: "1", value: type.stakes[0].amount, type: "number", disabled: true }), h("p", { class: "WagerInputTitle" }, type.stakes[0].currency)))))));
+            }
+        }
+    }
+    static get is() { return "lottery-ticket"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["lottery-ticket.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["lottery-ticket.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "endpoint": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "NorWAy endpoint"
+                },
+                "attribute": "endpoint",
+                "reflect": true
+            },
+            "gameId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Game ID"
+                },
+                "attribute": "game-id",
+                "reflect": true
+            },
+            "numberOfGrids": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Number of grids of a ticket"
+                },
+                "attribute": "number-of-grids",
+                "reflect": true,
+                "defaultValue": "1"
+            },
+            "multipleDraws": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Option to have the ticket registered for multiple draws"
+                },
+                "attribute": "multiple-draws",
+                "reflect": true,
+                "defaultValue": "true"
+            },
+            "ticketId": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Ticket ID"
+                },
+                "attribute": "ticket-id",
+                "reflect": true
+            },
+            "resetButton": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Shows the reset button"
+                },
+                "attribute": "reset-button",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "autoPick": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Shows the auto-pick button"
+                },
+                "attribute": "auto-pick",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "language": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Language"
+                },
+                "attribute": "language",
+                "reflect": true,
+                "defaultValue": "'en'"
+            },
+            "clientStyling": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Client custom styling via string"
+                },
+                "attribute": "client-styling",
+                "reflect": true,
+                "defaultValue": "''"
+            },
+            "clientStylingUrlContent": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Client custom styling via url content"
+                },
+                "attribute": "client-styling-url-content",
+                "reflect": true,
+                "defaultValue": "''"
+            }
+        };
     }
-  }
-  connectedCallback() {
-    let url = new URL(`${this.endpoint}/games/${this.gameId}`);
-    fetch(url.href)
-      .then((response) => {
-      if (response.ok) {
-        return response.json();
-      }
-      else {
-        // Throw error
-        this.hasErrors = true;
-      }
-    })
-      .then((data) => {
-      this.isLoading = false;
-      this.gameData = data;
-      this.grids = [...Array(data.rules.boards.length).keys()];
-      this.amountInfo = this.gameData.rules.stakes[0]; // initial value for select
-    })
-      .catch((err) => {
-      this.isLoading = false;
-      this.hasErrors = true;
-      console.error('Error!', err);
-    });
-  }
-  componentDidRender() {
-    // start custom styling area
-    if (!this.limitStylingAppends && this.stylingContainer) {
-      if (this.clientStyling)
-        this.setClientStyling();
-      if (this.clientStylingUrlContent)
-        this.setClientStylingURL();
-      this.limitStylingAppends = true;
+    static get states() {
+        return {
+            "multiplier": {},
+            "numberOfDraws": {},
+            "isLoading": {},
+            "hasErrors": {},
+            "ticketDone": {},
+            "isCustomSelect": {},
+            "amountInfo": {},
+            "limitStylingAppends": {}
+        };
     }
-    // end custom styling area
-  }
-  multiplierChangeHandler(e) {
-    this.multiplier = e.target ? e.target.checked : false;
-    this.multiplierChange.emit(this.multiplier);
-  }
-  drawsChangeHandler(event) {
-    this.ticket = Object.assign(Object.assign({}, this.ticket), { draws: event });
-    this.ticketCompleted.emit(this.ticket);
-  }
-  gridFilledHandler(event) {
-    this.ticket = Object.assign(Object.assign({}, event.detail), { draws: this.numberOfDraws });
-    this.ticketDone = true;
-    this.ticketCompleted.emit(this.ticket);
-  }
-  toggleAutoSelection() {
-    this.ticketDone = true;
-    this.autoSelection.emit(this.ticketId);
-  }
-  toggleResetSelection() {
-    this.ticketDone = false;
-    this.resetSelection.emit(this.ticketId);
-  }
-  changeStake(ticketid, amount) {
-    this.stakeChange.emit({
-      ticketId: ticketid,
-      stake: amount
-    });
-  }
-  toggleClass() {
-    this.isCustomSelect = !this.isCustomSelect;
-  }
-  setDropdownItem(item) {
-    this.amountInfo = {
-      amount: item.amount,
-      currency: item.currency
-    };
-    this.isCustomSelect = false;
-    this.changeStake(this.ticketId, item.amount);
-  }
-  render() {
-    if (this.isLoading) {
-      return (h("div", null,
-        h("p", null, translate('loading', this.language))));
+    static get events() {
+        return [{
+                "method": "ticketCompleted",
+                "name": "ticketCompleted",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "TODO",
+                            "text": "including ts type"
+                        }],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }, {
+                "method": "autoSelection",
+                "name": "autoSelection",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }, {
+                "method": "resetSelection",
+                "name": "resetSelection",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }, {
+                "method": "stakeChange",
+                "name": "stakeChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }, {
+                "method": "multiplierChange",
+                "name": "multiplierChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }];
     }
-    else {
-      if (this.hasErrors) {
-        return (h("div", null,
-          h("p", null, translate('error', this.language))));
-      }
-      else {
-        const { rules } = this.gameData;
-        return (h("div", { class: "TicketContainer", ref: el => this.stylingContainer = el },
-          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, "client-styling": this.clientStyling, "client-styling-url-content": this.clientStylingUrlContent }))),
-          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("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)))))));
-      }
+    static get watchers() {
+        return [{
+                "propName": "numberOfDraws",
+                "methodName": "drawsChangeHandler"
+            }];
     }
-  }
-  static get is() { return "lottery-ticket"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["lottery-ticket.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["lottery-ticket.css"]
-  }; }
-  static get properties() { return {
-    "endpoint": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "NorWAy endpoint"
-      },
-      "attribute": "endpoint",
-      "reflect": false
-    },
-    "gameId": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Game ID"
-      },
-      "attribute": "game-id",
-      "reflect": false
-    },
-    "numberOfGrids": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Number of grids of a ticket"
-      },
-      "attribute": "number-of-grids",
-      "reflect": false,
-      "defaultValue": "1"
-    },
-    "multipleDraws": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Option to have the ticket registered for multiple draws"
-      },
-      "attribute": "multiple-draws",
-      "reflect": false,
-      "defaultValue": "true"
-    },
-    "ticketId": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Ticket ID"
-      },
-      "attribute": "ticket-id",
-      "reflect": false
-    },
-    "resetButton": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Shows the reset button"
-      },
-      "attribute": "reset-button",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "autoPick": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Shows the auto-pick button"
-      },
-      "attribute": "auto-pick",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "language": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Language"
-      },
-      "attribute": "language",
-      "reflect": false,
-      "defaultValue": "'en'"
-    },
-    "clientStyling": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Client custom styling via string"
-      },
-      "attribute": "client-styling",
-      "reflect": false,
-      "defaultValue": "''"
-    },
-    "clientStylingUrlContent": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Client custom styling via url content"
-      },
-      "attribute": "client-styling-url-content",
-      "reflect": false,
-      "defaultValue": "''"
+    static get listeners() {
+        return [{
+                "name": "click",
+                "method": "checkForClickOutside",
+                "target": "window",
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "gridFilled",
+                "method": "gridFilledHandler",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
     }
-  }; }
-  static get states() { return {
-    "multiplier": {},
-    "numberOfDraws": {},
-    "isLoading": {},
-    "hasErrors": {},
-    "ticketDone": {},
-    "isCustomSelect": {},
-    "amountInfo": {},
-    "limitStylingAppends": {}
-  }; }
-  static get events() { return [{
-      "method": "ticketCompleted",
-      "name": "ticketCompleted",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [{
-            "name": "TODO",
-            "text": "including ts type"
-          }],
-        "text": ""
-      },
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
-      }
-    }, {
-      "method": "autoSelection",
-      "name": "autoSelection",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
-      }
-    }, {
-      "method": "resetSelection",
-      "name": "resetSelection",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
-      }
-    }, {
-      "method": "stakeChange",
-      "name": "stakeChange",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
-      }
-    }, {
-      "method": "multiplierChange",
-      "name": "multiplierChange",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
-      }
-    }]; }
-  static get watchers() { return [{
-      "propName": "numberOfDraws",
-      "methodName": "drawsChangeHandler"
-    }]; }
-  static get listeners() { return [{
-      "name": "click",
-      "method": "checkForClickOutside",
-      "target": "window",
-      "capture": false,
-      "passive": false
-    }, {
-      "name": "gridFilled",
-      "method": "gridFilledHandler",
-      "target": undefined,
-      "capture": false,
-      "passive": false
-    }]; }
 }