@everymatrix/lottery-game-page 0.1.0 → 0.1.4

package/dist/components/lottery-draw-results2.js

@@ -0,0 +1,232 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { d as defineCustomElement$2 } from './lottery-bullet2.js';
+import { d as defineCustomElement$1 } from './lottery-grid2.js';
+
+const DEFAULT_LANGUAGE = 'en';
+const SUPPORTED_LANGUAGES = ['ro', 'en'];
+const TRANSLATIONS = {
+  en: {
+    drawResultsHeader: 'Last draw results',
+    drawId: 'Draw ID',
+    drawName: 'Game name',
+    drawDate: 'Draw Date',
+    drawNumbersGridDraw: 'Draw numbers Grid A',
+    drawNumbersGridTicket: 'Draw numbers Grid B',
+    ticketResult: 'Ticket result',
+    amountWon: 'Amount won',
+    numberOfDraws: 'Number of draws',
+    multiplier: 'Multiplier:',
+    ticketPurchaseDate: 'Ticket Purchase Date',
+    ticketStatus: 'Ticket Status',
+    ticketId: 'Ticket ID',
+    ticketAmount: 'Ticket Amount',
+    winUpTo: 'Win up to',
+  },
+  ro: {
+    drawResultsHeader: 'Ultimele rezultate extragere',
+    drawId: 'Id extragere',
+    drawName: 'Numele jocului',
+    drawDate: 'Data extragerii',
+    drawNumbersGridDraw: 'Numerele extrase Grid A',
+    drawNumbersGridTicket: 'Numerele extrase Grid B',
+    ticketResult: 'Rezultatul biletului',
+    amountWon: 'Suma castigata',
+    numberOfDraws: 'Numarul de extrageri',
+    multiplier: 'Multiplicator:',
+    ticketPurchaseDate: 'Data achizitionarii biletului',
+    ticketStatus: 'Statusul biletului',
+    ticketId: 'Id biletul',
+    ticketAmount: 'Valoarea biletului',
+    winUpTo: 'Poti castiga'
+  },
+};
+const translate = (key, customLang) => {
+  const lang = customLang;
+  return TRANSLATIONS[lang !== undefined && SUPPORTED_LANGUAGES.includes(lang) ? lang : DEFAULT_LANGUAGE][key];
+};
+
+const lotteryDrawResultsCss = "@import url(\"https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap\");:host{display:block;font-family:\"Roboto\", sans-serif}.TicketInfo{display:flex;flex-direction:row;gap:15px;background-color:#009993;color:#fff;padding:12px;font-size:14px}.DrawResultsArea{margin-top:15px}.DrawResultsSection{max-width:600px;margin:0px auto;border-radius:4px}.DrawResultsHeader{display:flex;justify-content:space-between;padding:10px 20px;background-color:#009993;color:#fff;font-size:14px;border-radius:4px 4px 0 0}.DrawResultsHeader h4{text-transform:uppercase;font-weight:400;margin:0;padding-top:15px}.DrawMultipler label{display:block;margin:15px 0}.DrawResultsBody{padding:0px 20px;margin-bottom:5px;border-radius:0 0 4px 4px;border:1px solid #009993}.DrawResultsBody .DrawNumbersGrid{font-size:14px}.DrawResultsBody .NumberOfDrawsContainer{display:table;width:100%}.Toggle{cursor:pointer;display:inline-block}.ToggleSwitch{display:inline-block;background:#ccc;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%, #eee 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:#56c080}.ToggleCheckbox:checked+.ToggleSwitch:before{left:38px}.ToggleCheckbox{position:absolute;visibility:hidden}.Label{margin-right:5px;position:relative;top:2px}.DrawTicketsContainer{margin:30px auto}.ExpandableBoxes{position:relative}.ExpandableBox{line-height:12px;font-weight:lighter;width:100%;height:100%;max-height:70px;float:left;margin:0 0 20px 0;border:1px solid #f1f1f1;background:#fff;border-radius:4px;padding:10px;-webkit-transition:all 0.6s ease-in-out;-moz-transition:all 0.6s ease-in-out;-o-transition:all 0.6s ease-in-out;-ms-transition:all 0.6s ease-in-out;transition:all 0.6s ease-in-out;overflow:hidden;box-shadow:rgba(99, 99, 99, 0.2) 0px 2px 8px 0px}.ExpandableBox.ShowBox{max-height:400px;margin:0px 0px 20p 0px}.ExpandableBox.HideBox{width:0;height:0;overflow:hidden;border:none;padding:0;margin:0;opacity:0}";
+
+const LotteryDrawResults = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    /**
+     * Language of the widget
+     */
+    this.language = 'en';
+    /**
+     * Shows only the last draw
+     */
+    this.drawMode = false;
+    /**
+     * The drawID (option)
+     */
+    this.drawId = '';
+    /**
+     * The game name
+     */
+    this.gameName = '';
+    /**
+     * The ticket submission date
+     */
+    this.ticketDate = '';
+    /**
+     * The ticket status
+     */
+    this.ticketStatus = '';
+    /**
+     * The ticket id
+     */
+    this.ticketId = '';
+    /**
+     * The ticket amount
+     */
+    this.ticketAmount = '';
+    /**
+     * The ticket multiplier
+     */
+    this.ticketMultiplier = false;
+    /**
+     * The ticket draw count
+     */
+    this.ticketDrawCount = 0;
+    this.multiplier = 3;
+    this.isLoading = true;
+    this.drawResults = [];
+    this.rules = {};
+    this.toggleDrawer = [false];
+    this.hasErrors = false;
+    this.errorText = '';
+    this.changeBox = (index) => {
+      this.toggleDrawer = this.toggleDrawer.map((item, itemIndex) => {
+        if (itemIndex == index) {
+          return !item;
+        }
+        return item;
+      });
+      if (index >= this.toggleDrawer.length) {
+        this.toggleDrawer.push(true);
+      }
+    };
+  }
+  connectedCallback() {
+    let promises = [];
+    promises.push(this.getGameData());
+    if (this.drawId) {
+      promises.push(this.getDrawData());
+    }
+    Promise.all(promises)
+      .then(() => {
+      this.isLoading = false;
+    });
+  }
+  getDrawData() {
+    return new Promise((resolve, reject) => {
+      let url = new URL(`${this.endpoint}/games/${this.gameId}/draws/${this.drawId}`);
+      fetch(url.href)
+        .then((response) => {
+        // @TODO EXCEPTIONS
+        return response.json();
+      })
+        .then((data) => {
+        this.drawData = data;
+        resolve(true);
+        this.isLoading = false;
+      })
+        .catch((err) => {
+        reject(err);
+        this.isLoading = false;
+      });
+    });
+  }
+  getGameData() {
+    return new Promise((resolve, reject) => {
+      let url = new URL(`${this.endpoint}/games/${this.gameId}`);
+      fetch(url.href)
+        .then((response) => {
+        return response.json();
+      })
+        .then((data) => {
+        this.rules = {
+          maximumAllowed: data.rules.boards[0].maximumAllowed,
+          totalNumbers: data.rules.boards[0].totalNumbers
+        };
+        resolve(true);
+        this.isLoading = false;
+        this.hasErrors = false;
+      })
+        .catch((err) => {
+        this.isLoading = false;
+        this.hasErrors = true;
+        this.errorText = err;
+        reject(err);
+      });
+    });
+  }
+  render() {
+    if (this.isLoading) {
+      return (h("p", null, "Loading, please wait ..."));
+    }
+    else if (this.hasErrors) {
+      h("p", null, this.errorText);
+    }
+    else {
+      return (h("section", { class: "DrawResultsSection" }, !this.drawMode ?
+        h("div", { class: "DrawResultsArea" }, h("div", { class: "TicketInfo" }, h("div", { class: "TicketGameName" }, translate('drawName', this.language), ": ", h("span", null, this.gameName)), h("div", { class: "TicketDate" }, translate('ticketPurchaseDate', this.language), ": ", h("span", null, this.ticketDate.slice(0, 10))), h("div", { class: "TicketStatus" }, translate('ticketStatus', this.language), ": ", h("span", null, this.ticketStatus))), h("div", { class: "DrawResultsBody" }, h("div", { class: "TicketIdContainer" }, h("p", null, translate('ticketId', this.language), ": ", h("span", null, this.ticketId))), h("div", { class: "TicketAmountContainer" }, h("p", null, translate('ticketAmount', this.language), " ", h("span", null, this.ticketAmount))), h("div", { class: "DrawNumbersGrid" }, h("p", null, translate('drawNumbersGridTicket', this.language), ":"), h("div", { class: "BulletContainer" }, h("lottery-grid", { "maximum-allowed": this.rules.maximumAllowed, "total-numbers": this.rules.totalNumbers, "selected-numbers": this.selection, selectable: false, "display-selected": true, language: this.language }))), h("div", { class: "DrawMultipler" }, h("label", { class: "Label" }, translate('winUpTo', this.language), " ", h("span", null, JSON.stringify(this.ticketMultiplier)))), h("div", { class: "NumberOfDrawsContainer" }, h("p", null, translate('numberOfDraws', this.language), ": ", this.ticketDrawCount), h("div", { class: "DrawTicketsContainer" }, this.drawResults.map((item, index) => h("div", { class: "ExpandableBoxes" }, h("div", { class: this.toggleDrawer[index] ? 'ExpandableBox ShowBox' : 'ExpandableBox', onClick: () => this.changeBox(index) }, h("div", { class: "TicketResultContainer" }, h("p", null, translate('ticketResult', this.language), ": ", item.status)), item.state == 'won' &&
+          h("div", { class: "AmountWonContainer" }, h("p", null, translate('amountWon', this.language), ": ", Number(item.amount).toLocaleString('en'), " ", item.currency)), h("div", { class: "DrawIdContainer" }, h("p", null, translate('drawId', this.language), ": ", item.drawId)), h("div", { class: "DrawDateContainer" }, h("p", null, translate('drawDate', this.language), ": ", item.updatedAt.slice(0, 10), " | ", item.updatedAt.slice(11, 19))), h("div", { class: "DrawNumbersGrid" }), h("div", { class: "DrawMultipler" }, h("label", { class: "Label" }, translate('winUpTo', this.language), " ", item.multiplier)))))))))
+        :
+          h("div", { class: "DrawResultsArea" }, this.drawData &&
+            h("div", null, h("div", { class: "DrawResultsHeader" }, h("span", null, translate('drawId', this.language), ":  ", this.drawData.id), h("span", null, translate('drawDate', this.language), ": ", this.drawData.date.slice(0, 10))), h("div", { class: "DrawResultsBody" }, h("div", { class: "DrawNumbersGrid" }, h("p", null, translate('drawNumbersGridDraw', this.language), ":"), h("div", { class: "BulletContainer" }, h("lottery-grid", { "maximum-allowed": this.rules.maximumAllowed, "total-numbers": this.rules.totalNumbers, selectedNumbers: this.drawData.winningNumbers.join(','), "display-selected": true, selectable: false, language: this.language })), h("div", { class: "DrawMultipler" }, h("label", { class: "Label" }, translate('multiplier', this.language), " ", this.multiplier))))))));
+    }
+  }
+  static get style() { return lotteryDrawResultsCss; }
+}, [1, "lottery-draw-results", {
+    "endpoint": [1],
+    "gameId": [1, "game-id"],
+    "language": [1],
+    "playerId": [1, "player-id"],
+    "drawMode": [4, "draw-mode"],
+    "drawId": [1, "draw-id"],
+    "gameName": [1, "game-name"],
+    "ticketDate": [1, "ticket-date"],
+    "ticketStatus": [1, "ticket-status"],
+    "ticketId": [1, "ticket-id"],
+    "ticketAmount": [1, "ticket-amount"],
+    "ticketMultiplier": [4, "ticket-multiplier"],
+    "ticketDrawCount": [2, "ticket-draw-count"],
+    "multiplier": [32],
+    "isLoading": [32],
+    "drawResults": [32],
+    "rules": [32],
+    "toggleDrawer": [32],
+    "hasErrors": [32],
+    "errorText": [32]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["lottery-draw-results", "lottery-bullet", "lottery-grid"];
+  components.forEach(tagName => { switch (tagName) {
+    case "lottery-draw-results":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, LotteryDrawResults);
+      }
+      break;
+    case "lottery-bullet":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+    case "lottery-grid":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
+defineCustomElement();
+
+export { LotteryDrawResults as L, defineCustomElement as d };

package/dist/components/lottery-game-page.js

@@ -1,12 +1,16 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
-import '@everymatrix/lottery-ticket-controller';
-import '@everymatrix/lottery-draw-results-history';
-import '@everymatrix/lottery-draw-results';
-import { d as defineCustomElement$6 } from './helper-accordion2.js';
-import { d as defineCustomElement$5 } from './helper-modal2.js';
-import { d as defineCustomElement$4 } from './helper-tab2.js';
-import { d as defineCustomElement$3 } from './helper-tabs2.js';
-import { d as defineCustomElement$2 } from './lottery-game-details2.js';
+import { d as defineCustomElement$d } from './helper-accordion2.js';
+import { d as defineCustomElement$c } from './helper-filters2.js';
+import { d as defineCustomElement$b } from './helper-modal2.js';
+import { d as defineCustomElement$a } from './helper-tab2.js';
+import { d as defineCustomElement$9 } from './helper-tabs2.js';
+import { d as defineCustomElement$8 } from './lottery-bullet2.js';
+import { d as defineCustomElement$7 } from './lottery-draw-results2.js';
+import { d as defineCustomElement$6 } from './lottery-draw-results-history2.js';
+import { d as defineCustomElement$5 } from './lottery-game-details2.js';
+import { d as defineCustomElement$4 } from './lottery-grid2.js';
+import { d as defineCustomElement$3 } from './lottery-ticket2.js';
+import { d as defineCustomElement$2 } from './lottery-ticket-controller2.js';
 
 const DEFAULT_LANGUAGE = 'en';
 const SUPPORTED_LANGUAGES = ['ro', 'en', 'ar'];
@@ -366,7 +370,7 @@ function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["lottery-game-page", "helper-accordion", "helper-modal", "helper-tab", "helper-tabs", "lottery-game-details"];
+  const components = ["lottery-game-page", "helper-accordion", "helper-filters", "helper-modal", "helper-tab", "helper-tabs", "lottery-bullet", "lottery-draw-results", "lottery-draw-results-history", "lottery-game-details", "lottery-grid", "lottery-ticket", "lottery-ticket-controller"];
   components.forEach(tagName => { switch (tagName) {
     case "lottery-game-page":
       if (!customElements.get(tagName)) {
@@ -375,25 +379,60 @@ function defineCustomElement$1() {
       break;
     case "helper-accordion":
       if (!customElements.get(tagName)) {
-        defineCustomElement$6();
+        defineCustomElement$d();
+      }
+      break;
+    case "helper-filters":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$c();
       }
       break;
     case "helper-modal":
       if (!customElements.get(tagName)) {
-        defineCustomElement$5();
+        defineCustomElement$b();
       }
       break;
     case "helper-tab":
       if (!customElements.get(tagName)) {
-        defineCustomElement$4();
+        defineCustomElement$a();
       }
       break;
     case "helper-tabs":
       if (!customElements.get(tagName)) {
-        defineCustomElement$3();
+        defineCustomElement$9();
+      }
+      break;
+    case "lottery-bullet":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$8();
+      }
+      break;
+    case "lottery-draw-results":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$7();
+      }
+      break;
+    case "lottery-draw-results-history":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$6();
       }
       break;
     case "lottery-game-details":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$5();
+      }
+      break;
+    case "lottery-grid":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "lottery-ticket":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "lottery-ticket-controller":
       if (!customElements.get(tagName)) {
         defineCustomElement$2();
       }

package/dist/components/lottery-grid.js

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

package/dist/components/lottery-grid2.js

@@ -0,0 +1,197 @@
+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: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() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.gridFilledEvent = createEvent(this, "gridFilled", 7);
+    this.gridDirtyEvent = createEvent(this, "gridDirty", 7);
+    /**
+     * Number of bullets of grid
+     */
+    this.totalNumbers = 0;
+    /**
+     * Number of maximum bullets that can be selected
+     */
+    this.maximumAllowed = 0;
+    /**
+     * Minimum allowed of bullets
+     */
+    this.minimumAllowed = 1;
+    /**
+     * Allows the user to select numbers on the grid
+     */
+    this.selectable = true;
+    /**
+     * Numbers that should be showed as selected on the grid (as a string of those numbers e.g. '1,2,3,4,5,6')
+     */
+    this.selectedNumbers = '';
+    /**
+     * Show only selected numbers
+     */
+    this.displaySelected = false;
+    /**
+     * Language
+     */
+    this.language = 'en';
+    this.numbers = [];
+    this.selectedCounter = 0;
+  }
+  connectedCallback() {
+    let selected = [];
+    if (this.selectedNumbers.length > 0) {
+      selected = this.selectedNumbers.split(',');
+      this.selectedCounter = selected.length;
+    }
+    if (this.displaySelected) {
+      selected.forEach((item) => {
+        this.numbers.push({
+          number: item,
+          selected: true,
+          selectable: this.selectable
+        });
+      });
+    }
+    else {
+      [...Array(this.totalNumbers).keys()]
+        .map(number => (number + 1).toString())
+        .forEach((number) => {
+        this.numbers.push({
+          number,
+          selected: selected.indexOf(number) >= 0 ? true : false,
+          selectable: this.selectedCounter == this.maximumAllowed ? false : this.selectable
+        });
+      });
+    }
+  }
+  lotteryBulletSelectionHandler(event) {
+    this.numbers = this.numbers.map((item) => {
+      if (item.number == event.detail.value) {
+        return {
+          number: item.number,
+          selected: event.detail.selected,
+          selectable: item.selectable
+        };
+      }
+      return {
+        number: item.number,
+        selected: item.selected,
+        selectable: item.selectable
+      };
+    });
+    if (event.detail.selected) {
+      this.selectedCounter += 1;
+      if (this.selectedCounter == this.maximumAllowed) {
+        this.numbers = this.numbers.map((item) => {
+          return {
+            number: item.number,
+            selected: item.selected,
+            selectable: item.selected ? true : false
+          };
+        });
+        this.gridFilledEvent.emit({
+          id: this.ticketId,
+          index: this.gridIndex,
+          selectedNumbers: this.numbers.filter((item) => item.selected).map((item) => item.number)
+        });
+      }
+    }
+    else {
+      if (this.selectedCounter == this.maximumAllowed) {
+        this.numbers = this.numbers.map((item) => {
+          return {
+            number: item.number,
+            selected: item.selected,
+            selectable: true
+          };
+        });
+        this.gridDirtyEvent.emit({
+          id: this.ticketId,
+          index: this.gridIndex,
+          selectedNumbers: this.numbers.filter((item) => item.selected).map((item) => item.number)
+        });
+      }
+      this.selectedCounter -= 1;
+    }
+  }
+  async resetSelectionHandler(event) {
+    if (event.detail && event.detail == this.ticketId) {
+      this.selectedCounter = 0;
+      this.numbers = this.numbers.map((item) => {
+        return {
+          number: item.number,
+          selected: false,
+          selectable: this.selectable
+        };
+      });
+      this.gridDirtyEvent.emit({
+        id: this.ticketId,
+        index: this.gridIndex,
+        selectedNumbers: this.numbers.filter((item) => item.selected).map((item) => item.number)
+      });
+    }
+  }
+  async autoSelectionHandler(event) {
+    if (event.detail && event.detail == this.ticketId) {
+      this.resetSelectionHandler(event);
+      let array = [...Array(this.totalNumbers).keys()]
+        .map(number => number + 1)
+        .sort(() => 0.5 - Math.random());
+      array = array.slice(0, this.minimumAllowed);
+      this.numbers = this.numbers.map((item) => {
+        return {
+          number: item.number,
+          selected: array.indexOf(parseInt(item.number, 10)) >= 0 ? true : false,
+          selectable: array.indexOf(parseInt(item.number, 10)) >= 0 ? true : false,
+        };
+      });
+      this.gridFilledEvent.emit({
+        id: this.ticketId,
+        index: this.gridIndex,
+        selectedNumbers: this.numbers.filter((item) => item.selected).map((item) => item.number)
+      });
+      this.selectedCounter = this.maximumAllowed;
+    }
+  }
+  render() {
+    return (h("div", { class: "GridContainer" }, h("div", { class: "Grid" }, this.numbers.map((item) => h("div", null, h("lottery-bullet", { value: item.number, selectable: item.selectable, "is-selected": item.selected }))))));
+  }
+  static get style() { return lotteryGridCss; }
+}, [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"]]]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["lottery-grid", "lottery-bullet"];
+  components.forEach(tagName => { switch (tagName) {
+    case "lottery-grid":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, LotteryGrid);
+      }
+      break;
+    case "lottery-bullet":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
+defineCustomElement();
+
+export { LotteryGrid as L, defineCustomElement as d };

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

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

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

@@ -0,0 +1,118 @@
+import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+import { d as defineCustomElement$4 } from './helper-accordion2.js';
+import { d as defineCustomElement$3 } from './lottery-bullet2.js';
+import { d as defineCustomElement$2 } from './lottery-grid2.js';
+import { d as defineCustomElement$1 } from './lottery-ticket2.js';
+
+const lotteryTicketControllerCss = ":host{display:block}";
+
+const LotteryTicketController = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.deleteTicketEvent = createEvent(this, "deleteTicket", 7);
+    /**
+     * Endpoint URL for the source of data (NorWAy standard)
+     */
+    this.endpoint = '';
+    /**
+     * Ticket number
+     */
+    this.ticketId = 1;
+    /**
+     * Activates postMessages as events for actions from the widget
+     */
+    this.postMessage = false;
+    /**
+     * Name of the event emitter by the action button
+     */
+    this.eventName = 'deleteTicketAction';
+    /**
+     * Collapsed
+     */
+    this.collapsed = true;
+    /**
+     * Number of grids?
+     */
+    this.numberOfGrids = 1;
+    /**
+     * This toggles if the last ticket added should be expanded or not
+     */
+    this.last = false;
+    /**
+     * Language
+     */
+    this.language = 'en';
+    /**
+     * Shows the auto-pick button
+     */
+    this.autoPick = false;
+    /**
+     * Shows the reset button
+     */
+    this.resetButton = false;
+  }
+  // @TODO fix the `any` type
+  helperAccordionActionHandler() {
+    if (this.postMessage) {
+      window.postMessage({ type: this.eventName }, window.location.href);
+    }
+    this.deleteTicketEvent.emit({
+      ticketId: this.ticketId
+    });
+  }
+  render() {
+    return (h("div", null, h("helper-accordion", { "header-title": 'Ticket ' + this.ticketId, "header-subtitle": this.ticketDescription, footer: true, "delete-tab": true, collapsed: !this.last || this.collapsed, language: this.language }, h("div", { slot: "accordionContent" }, h("lottery-ticket", { endpoint: this.endpoint, "game-id": this.gameId, "ticket-id": this.ticketId, "number-of-grids": this.numberOfGrids, language: this.language, "reset-button": this.resetButton, "auto-pick": this.autoPick })))));
+  }
+  static get style() { return lotteryTicketControllerCss; }
+}, [1, "lottery-ticket-controller", {
+    "endpoint": [1],
+    "ticketId": [2, "ticket-id"],
+    "ticketDescription": [1, "ticket-description"],
+    "gameId": [1, "game-id"],
+    "postMessage": [4, "post-message"],
+    "eventName": [1, "event-name"],
+    "collapsed": [4],
+    "numberOfGrids": [2, "number-of-grids"],
+    "last": [4],
+    "language": [1],
+    "autoPick": [4, "auto-pick"],
+    "resetButton": [4, "reset-button"]
+  }, [[0, "helperAccordionAction", "helperAccordionActionHandler"]]]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["lottery-ticket-controller", "helper-accordion", "lottery-bullet", "lottery-grid", "lottery-ticket"];
+  components.forEach(tagName => { switch (tagName) {
+    case "lottery-ticket-controller":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, LotteryTicketController);
+      }
+      break;
+    case "helper-accordion":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "lottery-bullet":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "lottery-grid":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+    case "lottery-ticket":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
+defineCustomElement();
+
+export { LotteryTicketController as L, defineCustomElement as d };

package/dist/components/lottery-ticket.js

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