@everymatrix/lottery-game-page 0.1.5 → 0.1.9

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

@@ -0,0 +1,169 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-5701a895.js');
+
+const DEFAULT_LANGUAGE = 'en';
+const SUPPORTED_LANGUAGES = ['ro', 'en'];
+const TRANSLATIONS = {
+  en: {
+    loading: 'Loading, please wait ...',
+    error: 'It was an error while trying to fetch the data',
+    grid: 'Grid',
+    multiplier: 'Multiplier',
+    numberOfDraws: 'Number of draws',
+    wagerPerDraw: 'Wager per draw',
+    resetButton: 'Reset',
+    autoButton: 'I feel lucky'
+  },
+  ro: {
+    loading: 'Se incarca, va rugam asteptati ...',
+    error: 'A fost o eroare in timp ce asteptam datele',
+    grid: 'Grid',
+    multiplier: 'Multiplicator',
+    numberOfDraws: 'Numarul de extrageri',
+    wagerPerDraw: 'Pariul per extragere',
+    resetButton: 'Reseteaza',
+    autoButton: 'Ma simt norocos'
+  },
+};
+const translate = (key, customLang) => {
+  const lang = customLang;
+  return TRANSLATIONS[lang !== undefined && SUPPORTED_LANGUAGES.includes(lang) ? lang : DEFAULT_LANGUAGE][key];
+};
+
+const lotteryTicketCss = "@import url(\"https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap\");:host{display:block;font-family:\"Roboto\", sans-serif}.TicketTitle{font-size:16px;font-weight:bold}.ButtonContainer{display:flex;justify-content:flex-end}.Toggle{cursor:pointer;margin-top:20px;display:inline-block}.ToggleSwitch{display:inline-block;background:#707070;border-radius:16px;width:58px;height:24px;position:relative;vertical-align:middle;transition:background 0.25s}.ToggleSwitch:before,.ToggleSwitch:after{content:\"\"}.ToggleSwitch:before{display:block;background:linear-gradient(to bottom, #fff 0%, #F1F1F1 100%);border-radius:50%;box-shadow:0 0 0 1px rgba(0, 0, 0, 0.25);width:16px;height:16px;position:absolute;top:4px;left:4px;transition:left 0.25s}.Toggle:hover .ToggleSwitch:before{background:linear-gradient(to bottom, #fff 0%, #fff 100%);box-shadow:0 0 0 1px rgba(0, 0, 0, 0.5)}.ToggleCheckbox:checked+.ToggleSwitch{background:#00ABA4}.ToggleCheckbox:checked+.ToggleSwitch:before{left:38px}.ToggleCheckbox{position:absolute;visibility:hidden}.Label{margin-right:5px;position:relative;top:2px;font-size:14px;font-weight:lighter;color:#000}input[type=number]{-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none}.NumberInput,.WagerInput{margin-top:10px;display:inline-flex;align-items:center}.NumberInput,.NumberInput *{box-sizing:border-box}.NumberInput button{cursor:pointer;outline:none;-webkit-appearance:none;border:none;align-items:center;justify-content:center;height:20px;position:relative}.NumberInput button:after{display:inline-block;position:absolute;transform:translate(-50%, -50%) rotate(180deg);align-items:center;text-align:center}.NumberInput button.Plus:after{transform:translate(-50%, -50%) rotate(0deg);width:30px;display:inline-flex;align-items:center;text-align:center}.NumberInput input[type=number],.WagerInput input[type=number]{max-width:50px;display:inline-flex;align-items:center;padding:4px 10px;text-align:center}.NumberInput input[type=number] .WagerInputTitle,.WagerInput input[type=number] .WagerInputTitle{font-size:14px;color:#000;padding:10px}.InputDefault{background-color:#F1F1F1;border-radius:4px;padding:5px;border:solid 1px #D4D4D4;color:#707070}.AutoButton{cursor:pointer;display:inline-block;border-radius:4px;padding:8px 20px;width:max-content;margin:5px 0;border:1px solid #00958f;background:#FFF;color:#000;font-size:12px;transition:all 0.2s linear;text-transform:uppercase;text-align:center;letter-spacing:0}.AutoButton:active{background:#00958f;color:#FFF}.ResetButton{cursor:pointer;display:inline-block;border-radius:4px;padding:8px 20px;width:max-content;margin:5px 0;color:#000;font-size:12px;transition:all 0.2s linear;text-transform:uppercase;text-align:center;letter-spacing:0;background:#FF3D00;border:1px solid #FF3D00;color:#FFF}.ResetButton:hover{background:#FF6536;border:1px solid #FF3D00}.TicketGridBullets{background:#f1f1f1;border-radius:4px;padding:20px;margin-top:5px}.TicketGridBullets .TicketGridTitle{margin-top:0px}.Minus{border-radius:4px;width:30px;height:24px !important;margin-right:10px;color:#FFF;background:#009993}.Plus{border-radius:4px;width:30px;height:24px !important;margin-left:10px;color:#FFF;background:#009993}.SelectWrapper{width:auto;padding:5px;margin:0 auto;border:1px solid #ccc;border-radius:5px;position:relative}.SelectButton,.SelectOptions li{display:flex;align-items:center;cursor:pointer}.SelectButton{display:flex;padding:0 5px;border-radius:7px;align-items:center;justify-content:space-between;font-size:14px}.SelectButton span:first-child{padding-right:10px}.SelectExpand{transition:transform 0.3s linear;font-size:12px}.SelectActive .SelectExpand{transform:rotate(180deg)}.SelectContent{display:none;padding:5px;border-radius:7px}.SelectWrapper.SelectActive .SelectContent{width:100%;display:block;position:absolute;left:0;top:32px;padding:0;border:1px solid #ccc;overflow:hidden;background:#fff}.SelectContent .SelectOptions{max-height:100px;margin:0;overflow-y:auto;padding:0}.SelectContent .SelectOptions .SelectedValue{background-color:#009993;color:#fff}.SelectOptions::-webkit-scrollbar{width:7px}.SelectOptions::-webkit-scrollbar-track{background:#f1f1f1;border-radius:25px}.SelectOptions::-webkit-scrollbar-thumb{background:#ccc;border-radius:25px}.SelectOptions li{height:20px;padding:0 13px;font-size:14px}.SelectOptions li:hover{background:#f2f2f2}";
+
+const LotteryTicket = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.ticketCompleted = index.createEvent(this, "ticketCompleted", 7);
+    this.autoSelection = index.createEvent(this, "autoSelection", 7);
+    this.resetSelection = index.createEvent(this, "resetSelection", 7);
+    this.stakeChange = index.createEvent(this, "stakeChange", 7);
+    this.multiplierChange = index.createEvent(this, "multiplierChange", 7);
+    /**
+     * Number of grids of a ticket
+     */
+    this.numberOfGrids = 1;
+    /**
+     * Option to have the ticket registered for multiple draws
+     */
+    this.multipleDraws = true;
+    /**
+     * Shows the reset button
+     */
+    this.resetButton = false;
+    /**
+     * Shows the auto-pick button
+     */
+    this.autoPick = false;
+    /**
+     * Language
+     */
+    this.language = 'en';
+    this.multiplier = false;
+    this.numberOfDraws = 1;
+    this.isLoading = true;
+    this.hasErrors = false;
+    this.ticketDone = false;
+    this.isCustomSelect = false;
+    this.amountInfo = {};
+  }
+  /**
+   * @TODO find a better way to implement click outside the custom select, so that we don't have to use the 'data-cluster' attribute on each element
+   */
+  checkForClickOutside(ev) {
+    if (ev.composedPath()[0].getAttribute('data-cluster') !== 'SelectComponent') {
+      this.isCustomSelect = false;
+    }
+  }
+  connectedCallback() {
+    let url = new URL(`${this.endpoint}/games/${this.gameId}`);
+    fetch(url.href)
+      .then((response) => {
+      if (response.ok) {
+        return response.json();
+      }
+      else {
+        // Throw error
+        this.hasErrors = true;
+      }
+    })
+      .then((data) => {
+      this.isLoading = false;
+      this.gameData = data;
+      this.grids = [...Array(data.rules.boards.length).keys()];
+      this.amountInfo = this.gameData.rules.stakes[0]; // initial value for select
+    })
+      .catch((err) => {
+      this.isLoading = false;
+      this.hasErrors = true;
+      console.error('Error!', err);
+    });
+  }
+  multiplierChangeHandler(e) {
+    this.multiplier = e.target ? e.target.checked : false;
+    this.multiplierChange.emit(this.multiplier);
+  }
+  drawsChangeHandler(event) {
+    this.ticket = Object.assign(Object.assign({}, this.ticket), { draws: event });
+    this.ticketCompleted.emit(this.ticket);
+  }
+  gridFilledHandler(event) {
+    this.ticket = Object.assign(Object.assign({}, event.detail), { draws: this.numberOfDraws });
+    this.ticketDone = true;
+    this.ticketCompleted.emit(this.ticket);
+  }
+  toggleAutoSelection() {
+    this.ticketDone = true;
+    this.autoSelection.emit(this.ticketId);
+  }
+  toggleResetSelection() {
+    this.ticketDone = false;
+    this.resetSelection.emit(this.ticketId);
+  }
+  changeStake(ticketid, amount) {
+    this.stakeChange.emit({
+      ticketId: ticketid,
+      stake: amount
+    });
+  }
+  toggleClass() {
+    this.isCustomSelect = !this.isCustomSelect;
+  }
+  setDropdownItem(item) {
+    this.amountInfo = {
+      amount: item.amount,
+      currency: item.currency
+    };
+    this.isCustomSelect = false;
+    this.changeStake(this.ticketId, item.amount);
+  }
+  render() {
+    if (this.isLoading) {
+      return (index.h("div", null, index.h("p", null, translate('loading', this.language))));
+    }
+    else {
+      if (this.hasErrors) {
+        return (index.h("div", null, index.h("p", null, translate('error', this.language))));
+      }
+      else {
+        const { rules } = this.gameData;
+        return (index.h("div", { class: "TicketContainer" }, index.h("p", { class: "TicketTitle" }, this.gameData.name), this.resetButton && this.ticketDone &&
+          index.h("div", { class: "ButtonContainer" }, index.h("a", { class: "ResetButton", onClick: () => this.toggleResetSelection() }, translate('resetButton', this.language))), this.autoPick && !this.ticketDone &&
+          index.h("div", { class: "ButtonContainer" }, index.h("a", { class: "AutoButton", onClick: () => this.toggleAutoSelection() }, translate('autoButton', this.language))), this.grids.map((item, index$1) => index.h("div", { class: "TicketGridBullets" }, index.h("p", { class: "TicketGridTitle" }, translate('grid', this.language), " ", item), index.h("lottery-grid", { "grid-index": index$1, "maximum-allowed": rules.boards[index$1].maximumAllowed, "minimum-allowed": rules.boards[index$1].minimumAllowed, "total-numbers": rules.boards[index$1].totalNumbers, selectable: true, "reset-button": true, "auto-pick": true, "game-id": this.gameId, "ticket-id": this.ticketId, language: this.language }))), rules.multiplier &&
+          index.h("div", null, index.h("label", { class: "Toggle" }, index.h("label", { class: "Label" }, translate('multiplier', this.language), ": "), index.h("input", { class: "ToggleCheckbox", type: "checkbox", onInput: (e) => this.multiplierChangeHandler(e) }), index.h("div", { class: "ToggleSwitch" }))), this.multipleDraws &&
+          index.h("div", { class: "TicketDraws" }, index.h("label", { class: "Label" }, translate('numberOfDraws', this.language), ": "), index.h("div", { class: "NumberInput" }, index.h("button", { onClick: () => this.numberOfDraws > 1 ? this.numberOfDraws-- : this.numberOfDraws = 1, class: "Minus" }, "-"), index.h("input", { class: "InputDefault", min: "1", value: this.numberOfDraws, type: "number" }), index.h("button", { onClick: () => this.numberOfDraws++, class: "Plus" }, "+"))), index.h("div", null, index.h("label", { class: "Label" }, translate('wagerPerDraw', this.language), ": "), index.h("div", { class: "WagerInput" }, rules.stakes.length > 1 ?
+          (index.h("div", { "data-cluster": "SelectComponent", class: this.isCustomSelect ? "SelectWrapper SelectActive" : "SelectWrapper" }, index.h("div", { "data-cluster": "SelectComponent", class: "SelectButton", onClick: () => this.toggleClass() }, index.h("span", { "data-cluster": "SelectComponent" }, this.amountInfo.amount, " ", this.amountInfo.currency), index.h("span", { "data-cluster": "SelectComponent", class: "SelectExpand" }, "\u25BC")), index.h("div", { "data-cluster": "SelectComponent", class: "SelectContent" }, index.h("ul", { "data-cluster": "SelectComponent", class: "SelectOptions" }, rules.stakes.map((item) => index.h("li", { "data-cluster": "SelectComponent", class: this.amountInfo.amount == item.amount ? 'SelectedValue' : '', value: item.amount, onClick: () => this.setDropdownItem(item) }, item.amount, " ", item.currency)))))) : (index.h("div", null, index.h("input", { min: "1", value: rules.stakes[0].amount, type: "number", disabled: true }), index.h("p", { class: "WagerInputTitle" }, rules.stakes[0].currency)))))));
+      }
+    }
+  }
+  static get watchers() { return {
+    "numberOfDraws": ["drawsChangeHandler"]
+  }; }
+};
+LotteryTicket.style = lotteryTicketCss;
+
+exports.lottery_ticket = LotteryTicket;

package/dist/collection/collection-manifest.json

@@ -8,17 +8,78 @@
     "typescriptVersion": "4.5.4"
   },
   "collections": [
+    {
+      "name": "@everymatrix/helper-accordion",
+      "tags": [
+        "helper-accordion"
+      ]
+    },
+    {
+      "name": "@everymatrix/helper-filters",
+      "tags": [
+        "helper-filters"
+      ]
+    },
     {
       "name": "@everymatrix/helper-modal",
       "tags": [
         "helper-modal"
       ]
     },
+    {
+      "name": "@everymatrix/helper-pagination",
+      "tags": [
+        "helper-pagination"
+      ]
+    },
+    {
+      "name": "@everymatrix/helper-tabs",
+      "tags": [
+        "helper-tab",
+        "helper-tabs"
+      ]
+    },
+    {
+      "name": "@everymatrix/lottery-bullet",
+      "tags": [
+        "lottery-bullet"
+      ]
+    },
     {
       "name": "@everymatrix/lottery-draw-results",
       "tags": [
         "lottery-draw-results"
       ]
+    },
+    {
+      "name": "@everymatrix/lottery-draw-results-history",
+      "tags": [
+        "lottery-draw-results-history"
+      ]
+    },
+    {
+      "name": "@everymatrix/lottery-game-details",
+      "tags": [
+        "lottery-game-details"
+      ]
+    },
+    {
+      "name": "@everymatrix/lottery-grid",
+      "tags": [
+        "lottery-grid"
+      ]
+    },
+    {
+      "name": "@everymatrix/lottery-ticket",
+      "tags": [
+        "lottery-ticket"
+      ]
+    },
+    {
+      "name": "@everymatrix/lottery-ticket-controller",
+      "tags": [
+        "lottery-ticket-controller"
+      ]
     }
   ],
   "bundles": [

package/dist/components/helper-accordion.js

@@ -0,0 +1,6 @@
+import { A as Accordion, d as defineCustomElement$1 } from './helper-accordion2.js';
+
+const HelperAccordion = Accordion;
+const defineCustomElement = defineCustomElement$1;
+
+export { HelperAccordion, defineCustomElement };

package/dist/components/helper-accordion2.js

@@ -0,0 +1,116 @@
+import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+
+const DEFAULT_LANGUAGE = 'en';
+const SUPPORTED_LANGUAGES = ['ro', 'en'];
+const TRANSLATIONS = {
+  en: {
+    deleteTicket: 'Delete ticket'
+  },
+  ro: {
+    deleteTicket: 'Sterge biletul'
+  },
+};
+const translate = (key, customLang) => {
+  const lang = customLang;
+  return TRANSLATIONS[lang !== undefined && SUPPORTED_LANGUAGES.includes(lang) ? lang : DEFAULT_LANGUAGE][key];
+};
+
+const helperAccordionCss = "@import url(\"https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap\");:host{display:block;font-family:\"Roboto\", sans-serif}.Header{border-radius:4px 4px 0 0;background:#009993;display:flex;gap:30px;border:1px solid #009993;padding:8px 10px;user-select:none}.Header:hover{background:#00ABA4}.Header .Title,.Header .Subtitle,.Header .Description{margin:0;font-size:14px;color:#fff}.Header .Expand{margin-left:auto;color:#FFF;width:17px;height:17px;cursor:pointer;text-align:center;transform:rotate(90deg);font-size:20px;user-select:none}.HeaderTicketHistory{border-radius:4px;background:#F1F1F1;display:flex;gap:30px;border:1px solid #009993;padding:8px 10px;user-select:none;margin-bottom:5px}.HeaderTicketHistory:hover{background:#00ABA4}.HeaderTicketHistory .Title,.HeaderTicketHistory .Subtitle,.HeaderTicketHistory .Description{margin:0;font-size:14px;color:#000}.HeaderTicketHistory .Expand{margin-left:auto;color:#FFF;width:17px;height:17px;cursor:pointer;text-align:center;transform:rotate(90deg);font-size:20px;user-select:none}.Content{border-radius:0 0 4px 4px;background:#fff;border:1px solid #009993;padding:10px 15px;user-select:none;color:#000;margin-bottom:10px}.ActionButton{cursor:pointer;display:inline-block;border-radius:4px;margin:20px 0 10px;text-transform:uppercase;font-size:12px;text-align:center;padding:8px 20px;min-width:80px;background:#FF3D00;border:1px solid #FF3D00;color:#FFF}.ActionButton:hover{background:#FF6536;border:1px solid #FF3D00}";
+
+const Accordion = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.accordionEvent = createEvent(this, "helperAccordionAction", 7);
+    /**
+   * Flag for ticket history
+   */
+    this.ticketHistoryFlag = false;
+    /**
+     * Title (top header)
+     */
+    this.headerTitle = '';
+    /**
+     * SubTitle (top header)
+     */
+    this.headerSubtitle = '';
+    /**
+     * Description
+     */
+    this.description = '';
+    /**
+     * Enables footer content
+     */
+    this.footer = false;
+    /**
+     * Enables footer button for tab deletion
+     */
+    this.deleteTab = false;
+    /**
+     * Activates postMessages as events for actions from the widget
+     */
+    this.postMessage = false;
+    /**
+     * Name of the event emitter by the action button
+     */
+    this.eventName = 'helperAccordionAction';
+    /**
+     * Collapsed
+     */
+    this.collapsed = true;
+    /**
+     * Language
+     */
+    this.language = 'en';
+  }
+  // @TODO fix the `any` type :)
+  connectedCallback() {
+    this.showContent = !this.collapsed;
+  }
+  toggleContent() {
+    this.showContent = !this.showContent;
+  }
+  deleteAction() {
+    if (this.postMessage) {
+      // @TODO maybe change the name type, this one sucks
+      window.postMessage({ type: this.eventName }, window.location.href);
+    }
+    this.accordionEvent.emit();
+  }
+  render() {
+    return (h("div", { class: "Wrapper" }, h("div", { class: this.ticketHistoryFlag === true ? 'HeaderTicketHistory' : 'Header' }, h("p", { class: "Title" }, this.headerTitle), h("p", { class: "Subtitle" }, this.headerSubtitle), h("p", { class: "Subtitle" }, this.description), h("span", { class: "Expand", onClick: () => this.toggleContent() }, this.showContent ? '<' : '>')), this.showContent &&
+      h("div", null, h("div", { class: "Content" }, h("slot", { name: 'accordionContent' }), this.footer && this.showContent &&
+        h("div", null, this.deleteTab &&
+          h("span", { class: "ActionButton", onClick: () => this.deleteAction() }, translate('deleteTicket', this.language)))))));
+  }
+  static get style() { return helperAccordionCss; }
+}, [1, "helper-accordion", {
+    "ticketHistoryFlag": [4, "ticket-history-flag"],
+    "headerTitle": [1, "header-title"],
+    "headerSubtitle": [1, "header-subtitle"],
+    "description": [1],
+    "footer": [4],
+    "deleteTab": [4, "delete-tab"],
+    "postMessage": [4, "post-message"],
+    "eventName": [1, "event-name"],
+    "collapsed": [4],
+    "language": [1],
+    "showContent": [32]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["helper-accordion"];
+  components.forEach(tagName => { switch (tagName) {
+    case "helper-accordion":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, Accordion);
+      }
+      break;
+  } });
+}
+defineCustomElement();
+
+export { Accordion as A, defineCustomElement as d };

package/dist/components/helper-filters.js

@@ -0,0 +1,6 @@
+import { H as HelperFilters$1, d as defineCustomElement$1 } from './helper-filters2.js';
+
+const HelperFilters = HelperFilters$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { HelperFilters, defineCustomElement };

package/dist/components/helper-filters2.js

@@ -0,0 +1,166 @@
+import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+import { d as defineCustomElement$1 } from './helper-modal2.js';
+
+const DEFAULT_LANGUAGE = 'en';
+const SUPPORTED_LANGUAGES = ['ro', 'en'];
+const TRANSLATIONS = {
+  en: {
+    filterOpen: 'Filter',
+    filterClear: 'Clear',
+    filterModalTicketTitle: 'Ticket Results',
+    filterModalDrawTitle: 'Draws Results History',
+    filterTicketPlaceholder: 'Search for a ticket ID',
+    filterDrawPlaceholder: 'Search for a draw ID',
+    filterDateRangePlaceholder: 'Date Range',
+    filterModalButton: 'Search',
+    filterFromCalendar: 'From',
+    filterToCalendar: 'To',
+    filterOrDate: 'or search by date'
+  },
+  ro: {
+    filterOpen: 'Filtrare',
+    filterClear: 'Stergere',
+    filterModalTicketTitle: 'Rezultatele biletelor',
+    filterModalDrawTitle: 'Rezultatele draw-urilor',
+    filterTicketPlaceholder: 'Cauta ID bilet',
+    filterDrawPlaceholder: 'Cauta ID draw',
+    filterDateRangePlaceholder: 'Perioada',
+    filterModalButton: 'Cauta',
+    filterOrDate: 'sau cauta dupa data'
+  },
+};
+const translate = (key, customLang) => {
+  const lang = customLang;
+  return TRANSLATIONS[lang !== undefined && SUPPORTED_LANGUAGES.includes(lang) ? lang : DEFAULT_LANGUAGE][key];
+};
+
+const helperFiltersCss = "@import url(\"https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap\");:host{display:block;font-family:\"Roboto\", sans-serif}.FilterButtonsWrapper{display:flex;justify-content:flex-end;gap:5px}.FilterButtonsWrapper .FilterOpen{cursor:pointer;border-radius:4px;padding:8px 15px;width:max-content;border:1px solid #00958f;background:#00958f;color:#FFF;font-size:12px;transition:all 0.2s linear;text-align:center;letter-spacing:0}.FilterButtonsWrapper .FilterOpen:hover{background:#00958f;color:#FFF}.FilterButtonsWrapper .FilterClear{cursor:pointer;border-radius:4px;padding:8px 15px;width:max-content;border:1px solid #00958f;background:#FFF;color:#000;font-size:12px;transition:all 0.2s linear;text-align:center;letter-spacing:0}.FilterButtonsWrapper .FilterClear:hover{background:#00958f;color:#FFF}.FilterModalHeader,.FilterModalBody,.FilterModalFooter{display:flex;flex-direction:column;gap:5px;align-items:center;margin:20px 0}.FilterModalHeader .FilterModalTitle,.FilterModalBody .FilterModalTitle,.FilterModalFooter .FilterModalTitle{margin:0;padding:0;font-weight:700;font-size:16px;color:#009993;text-transform:uppercase}.FilterModalHeader .FilterModalSearch,.FilterModalBody .FilterModalSearch,.FilterModalFooter .FilterModalSearch{border-radius:4px;background:#e8ebef;color:#263445;width:100%;height:26px;max-width:280px;padding:5px;font-size:15px;border:none;outline:#009993}.FilterModalHeader .FilterCalendarWrapper,.FilterModalBody .FilterCalendarWrapper,.FilterModalFooter .FilterCalendarWrapper{display:flex;gap:5px}.FilterModalHeader .FilterCalendarWrapper .VaadinDatePicker,.FilterModalBody .FilterCalendarWrapper .VaadinDatePicker,.FilterModalFooter .FilterCalendarWrapper .VaadinDatePicker{width:50%;max-width:143px}.FilterModalHeader .FilterModalButton,.FilterModalBody .FilterModalButton,.FilterModalFooter .FilterModalButton{cursor:pointer;border-radius:4px;padding:8px 60px;width:max-content;margin:5px;border:1px solid #00958f;background:#00958f;color:#FFF;font-size:12px;transition:all 0.2s linear;text-transform:uppercase;text-align:center;letter-spacing:0}.FilterModalHeader .FilterModalButton:hover,.FilterModalBody .FilterModalButton:hover,.FilterModalFooter .FilterModalButton:hover{background:#00958f;color:#FFF}.FilterModalHeader p,.FilterModalBody p,.FilterModalFooter p{margin:5px 0}";
+
+const HelperFilters = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.filterDraw = createEvent(this, "filterDraw", 7);
+    this.filterSelection = createEvent(this, "filterSelection", 7);
+    this.filterSelectionReset = createEvent(this, "filterSelectionReset", 7);
+    /**
+     * Check if show the filter option by id
+     */
+    this.showFilterId = true;
+    /**
+     * Choose if filter by draw ID or ticket ID. By default is draw ID.
+     */
+    this.activateTicketSearch = false;
+    /**
+     * Game ID
+     */
+    this.gameId = '';
+    /**
+     * Player ID
+     */
+    this.playerId = '';
+    /**
+     * Session ID
+     */
+    this.session = '';
+    /**
+     * Instead of customEvents the widget triggers postMessages
+     */
+    this.postMessage = false;
+    /**
+     * Language
+     */
+    this.language = 'en';
+    this.showFilterModal = false;
+    this.showClearButton = false;
+    this.filterData = {};
+    this.filterDataReset = { ticketDrawId: '', filterFromCalendar: '', filterToCalendar: '' };
+  }
+  // reset field values each time the filter modal opens
+  componentDidRender() {
+    this.filterData.ticketDrawId = null;
+    this.filterData.filterFromCalendar = null;
+    this.filterData.filterToCalendar = null;
+    // @TODO: to way binding?
+    if (document.getElementById('#FilterById'))
+      document.getElementById('#FilterById').value = '';
+  }
+  filterSelectionHandler(event) {
+    if (this.postMessage)
+      window.postMessage({ type: 'filterSelection', event }, window.location.href);
+    if (this.filterData.ticketDrawId)
+      this.filterDraw.emit(event);
+    if (this.filterData.filterFromCalendar || this.filterData.filterToCalendar)
+      this.filterSelection.emit(event);
+  }
+  filterSelectionResetHandler(event) {
+    if (this.postMessage)
+      window.postMessage({ type: 'filterSelectionReset', event }, window.location.href);
+    this.filterSelectionReset.emit(event);
+  }
+  modalCloseEvent() {
+    this.showFilterModal = false;
+  }
+  // Toggle filter modal
+  toggleFilterModal() {
+    this.showFilterModal = true;
+  }
+  // Filter search
+  filterSearch() {
+    this.modalCloseEvent();
+    this.showClearButton = true;
+    this.filterSelectionHandler(this.filterData);
+  }
+  resetSearch() {
+    this.showClearButton = false;
+    this.filterSelectionResetHandler(this.filterDataReset);
+    this.filterData = {};
+  }
+  handleTicketDrawId(event) {
+    this.filterData.ticketDrawId = event.target.value;
+  }
+  handleFilterFrom(event) {
+    this.filterData.filterFromCalendar = new Date(event.target.value).toISOString();
+  }
+  handleFilterTo(event) {
+    this.filterData.filterToCalendar = new Date(event.target.value).toISOString();
+  }
+  render() {
+    return (h("div", { class: "HelperFilters" }, h("div", { class: "FilterButtonsWrapper" }, h("button", { class: "FilterOpen", onClick: () => this.toggleFilterModal() }, translate('filterOpen', this.language)), this.showClearButton ? h("button", { class: "FilterClear", onClick: () => this.resetSearch() }, translate('filterClear', this.language)) : null), h("helper-modal", { "title-modal": "Filter Modal", visible: this.showFilterModal }, h("div", { class: "FilterModalHeader" }, h("h3", { class: "FilterModalTitle" }, this.activateTicketSearch ? translate('filterModalTicketTitle', this.language) : translate('filterModalDrawTitle', this.language))), h("div", { class: "FilterModalBody" }, h("input", { id: "FilterById", type: "text", value: this.filterData.ticketDrawId, onInput: (event) => this.handleTicketDrawId(event), class: "FilterModalSearch", placeholder: this.activateTicketSearch ? translate('filterTicketPlaceholder', this.language) : translate('filterDrawPlaceholder', this.language) }), h("p", null, translate('filterOrDate', this.language)), h("div", { class: "FilterCalendarWrapper" })), h("div", { class: "FilterModalFooter" }, h("button", { class: "FilterModalButton", onClick: () => this.filterSearch() }, translate('filterModalButton', this.language))))));
+  }
+  static get style() { return helperFiltersCss; }
+}, [1, "helper-filters", {
+    "showFilterId": [4, "show-filter-id"],
+    "activateTicketSearch": [4, "activate-ticket-search"],
+    "gameId": [1, "game-id"],
+    "playerId": [1, "player-id"],
+    "session": [1],
+    "postMessage": [4, "post-message"],
+    "language": [1],
+    "showFilterModal": [32],
+    "showClearButton": [32],
+    "filterData": [32],
+    "filterDataReset": [32]
+  }, [[0, "modalCloseEvent", "modalCloseEvent"]]]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["helper-filters", "helper-modal"];
+  components.forEach(tagName => { switch (tagName) {
+    case "helper-filters":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, HelperFilters);
+      }
+      break;
+    case "helper-modal":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
+defineCustomElement();
+
+export { HelperFilters as H, defineCustomElement as d };