@everymatrix/lottery-game-page 1.32.4 → 1.33.0

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

@@ -0,0 +1,281 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-cd44e726.js');
+
+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) {
+    index.registerInstance(this, hostRef);
+    this.bulletEvent = index.createEvent(this, "lotteryBulletSelection", 7);
+    /**
+     * Value of the bullet
+     */
+    this.value = '0';
+    /**
+     * Marks if the bullet should be selectable
+     */
+    this.selectable = true;
+    /**
+     * Marks if the bullet should be selected
+     */
+    this.isSelected = false;
+    /**
+     * Client custom styling via string
+     */
+    this.clientStyling = '';
+    /**
+     * Client custom styling via url content
+     */
+    this.clientStylingUrlContent = '';
+    this.limitStylingAppends = false;
+    this.select = () => {
+      if (this.selectable) {
+        this.isSelected = !this.isSelected;
+        this.bulletEvent.emit({
+          value: this.value,
+          selected: this.isSelected
+        });
+      }
+    };
+    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);
+    };
+  }
+  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
+  }
+  render() {
+    return (index.h("div", { class: 'Circle ' + (this.selectable ? '' : 'Disabled') + (this.isSelected ? 'Selected' : ''), onClick: () => this.select(), ref: el => this.stylingContainer = el }, this.value));
+  }
+};
+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:1200px}.Grid{margin-top:10px 0 10px 0;display:flex;flex-direction:row;flex-wrap:wrap;gap:20px}.Grid.TicketGrid{gap:5px}";
+
+const LotteryGrid = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.gridFilledEvent = index.createEvent(this, "gridFilled", 7);
+    this.gridDirtyEvent = index.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';
+    /**
+     * Personalize grid for ticket
+     */
+    this.gridType = '';
+    /**
+     * Client custom styling via string
+     */
+    this.clientStyling = '';
+    /**
+     * Client custom styling via url content
+     */
+    this.clientStylingUrlContent = '';
+    this.numbers = [];
+    this.limitStylingAppends = false;
+    this.selectedCounter = 0;
+    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);
+    };
+  }
+  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
+        });
+      });
+    }
+  }
+  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
+  }
+  // wrote this because the classic .sort(() => 0.5 - Math.random()) method yielded low entropy shuffles for some reason on certain devices
+  shuffleArray(array) {
+    const result = [];
+    while (array.length > 0) {
+      const randomIndex = Math.floor(Math.random() * (array.length));
+      result.push(array.splice(randomIndex, 1)[0]);
+    }
+    return result;
+  }
+  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);
+      array = this.shuffleArray(array);
+      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 (index.h("div", { class: "GridContainer", ref: el => this.stylingContainer = el }, index.h("div", { class: this.gridType === 'ticket' ? 'Grid TicketGrid' : 'Grid' }, this.numbers.map((item) => index.h("div", null, index.h("lottery-bullet", { value: item.number, selectable: item.selectable, "is-selected": item.selected, "client-styling": this.clientStyling, "client-styling-url-content": this.clientStylingUrlContent }))))));
+  }
+};
+LotteryGrid.style = lotteryGridCss;
+
+exports.lottery_bullet = LotteryBullet;
+exports.lottery_grid = LotteryGrid;
+
+//# sourceMappingURL=lottery-bullet_2.cjs.entry.js.map

package/dist/cjs/lottery-bullet_2.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"lottery-bullet.lottery-grid.entry.cjs.js","mappings":"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","names":["h"],"sources":["../lottery-bullet/dist/collection/components/lottery-bullet/lottery-bullet.css?tag=lottery-bullet&encapsulation=shadow","../lottery-bullet/dist/collection/components/lottery-bullet/lottery-bullet.js","../lottery-grid/dist/collection/components/lottery-grid/lottery-grid.css?tag=lottery-grid&encapsulation=shadow","../lottery-grid/dist/collection/components/lottery-grid/lottery-grid.js"],"sourcesContent":["@import url(\"https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap\");\n:host {\n  display: block;\n  font-family: \"Roboto\", sans-serif;\n}\n\n/*** Animation - Show */\n@-webkit-keyframes Circle {\n  0% {\n    -webkit-transform: scale(0.5);\n    transform: scale(0.5);\n  }\n  100% {\n    -webkit-transform: scale(1);\n    transform: scale(1);\n  }\n}\n@keyframes Circle {\n  0% {\n    -webkit-transform: scale(0.5);\n    transform: scale(0.5);\n  }\n  100% {\n    -webkit-transform: scale(1);\n    transform: scale(1);\n  }\n}\n/*** Animation - Hover */\n@-webkit-keyframes hover-rotate {\n  0% {\n    -webkit-transform: scale(1) rotateZ(0);\n    transform: scale(1) rotateZ(0);\n  }\n  50% {\n    -webkit-transform: scale(1.2) rotateZ(180deg);\n    transform: scale(1.22) rotateZ(180deg);\n  }\n  100% {\n    -webkit-transform: scale(1) rotateZ(360deg);\n    transform: scale(1) rotateZ(360deg);\n  }\n}\n@keyframes hover-rotate {\n  0% {\n    -webkit-transform: scale(1) rotateZ(0);\n    transform: scale(1) rotateZ(0);\n  }\n  50% {\n    -webkit-transform: scale(1.2) rotateZ(180deg);\n    transform: scale(1.2) rotateZ(180deg);\n  }\n  100% {\n    -webkit-transform: scale(1) rotateZ(360deg);\n    transform: scale(1) rotateZ(360deg);\n  }\n}\n/*** Animation - Selected */\n@-webkit-keyframes selected-scaleUp {\n  0% {\n    -webkit-transform: scale(0.5);\n    transform: scale(0.5);\n  }\n  100% {\n    -webkit-transform: scale(1.2);\n    transform: scale(1.2);\n  }\n}\n@keyframes selected-scaleUp {\n  0% {\n    -webkit-transform: scale(0.5);\n    transform: scale(0.5);\n  }\n  100% {\n    -webkit-transform: scale(1);\n    transform: scale(1);\n  }\n}\n.Circle {\n  -webkit-animation: Circle 0.8s cubic-bezier(0.39, 0.575, 0.565, 1) both;\n  animation: Circle 0.8s cubic-bezier(0.39, 0.575, 0.565, 1) both;\n  cursor: pointer;\n  color: #000000;\n  display: block;\n  height: 30px;\n  width: 30px;\n  margin: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  justify-content: center;\n  align-items: center;\n  border: solid 2px #ffffff;\n  background: radial-gradient(circle at top, white 0%, white 100%);\n  font-weight: bold;\n  border-radius: 50%;\n  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5);\n  user-select: none;\n  font-size: 16px;\n  line-height: 16px;\n  font-weight: 600;\n  position: relative;\n}\n.Circle:hover {\n  -webkit-animation: hover-rotate 0.4s linear both;\n  animation: hover-rotate 0.4s linear both;\n  background: radial-gradient(circle at top, white 0%, #f1f1f1 100%);\n}\n.Circle.Selected {\n  -webkit-animation: selected-scaleUp 0.4s cubic-bezier(0.39, 0.575, 0.565, 1) both;\n  animation: selected-scaleUp 0.4s cubic-bezier(0.39, 0.575, 0.565, 1) both;\n  color: #ffffff;\n  background: #9EC258;\n  background: -webkit-radial-gradient(top, #00958f, #004D4A);\n  background: -moz-radial-gradient(top, #00958f, #004D4A);\n  background: radial-gradient(to bottom, #00958f, #004D4A);\n  border: solid 2px #00958f;\n}\n.Circle.Disabled {\n  -webkit-animation: selected-scaleUp 0.4s cubic-bezier(0.39, 0.575, 0.565, 1) both;\n  animation: selected-scaleUp 0.4s cubic-bezier(0.39, 0.575, 0.565, 1) both;\n  color: #f1f1f1;\n  background: #D4D4D4;\n  border: solid 2px #D4D4D4;\n  cursor: default;\n}\n.Circle.DisabledSelected {\n  -webkit-animation: selected-scaleUp 0.4s cubic-bezier(0.39, 0.575, 0.565, 1) both;\n  animation: selected-scaleUp 0.4s cubic-bezier(0.39, 0.575, 0.565, 1) both;\n  color: #f1f1f1;\n  background: #9EC258;\n  background: -webkit-radial-gradient(top, #00958f, #004D4A);\n  background: -moz-radial-gradient(top, #00958f, #004D4A);\n  background: radial-gradient(to bottom, #00958f, #004D4A);\n  border: solid 2px #D4D4D4;\n  cursor: default;\n}","import { Component, h, Prop, Event, State } from '@stencil/core';\nexport class LotteryBullet {\n  constructor() {\n    /**\n     * Value of the bullet\n     */\n    this.value = '0';\n    /**\n     * Marks if the bullet should be selectable\n     */\n    this.selectable = true;\n    /**\n     * Marks if the bullet should be selected\n     */\n    this.isSelected = false;\n    /**\n     * Client custom styling via string\n     */\n    this.clientStyling = '';\n    /**\n     * Client custom styling via url content\n     */\n    this.clientStylingUrlContent = '';\n    this.limitStylingAppends = false;\n    this.select = () => {\n      if (this.selectable) {\n        this.isSelected = !this.isSelected;\n        this.bulletEvent.emit({\n          value: this.value,\n          selected: this.isSelected\n        });\n      }\n    };\n    this.setClientStyling = () => {\n      let sheet = document.createElement('style');\n      sheet.innerHTML = this.clientStyling;\n      this.stylingContainer.prepend(sheet);\n    };\n    this.setClientStylingURL = () => {\n      let cssFile = document.createElement('style');\n      setTimeout(() => {\n        cssFile.innerHTML = this.clientStylingUrlContent;\n        this.stylingContainer.prepend(cssFile);\n      }, 1);\n    };\n  }\n  componentDidRender() {\n    // start custom styling area\n    if (!this.limitStylingAppends && this.stylingContainer) {\n      if (this.clientStyling)\n        this.setClientStyling();\n      if (this.clientStylingUrlContent)\n        this.setClientStylingURL();\n      this.limitStylingAppends = true;\n    }\n    // end custom styling area\n  }\n  render() {\n    return (h(\"div\", { class: 'Circle ' + (this.selectable ? '' : 'Disabled') + (this.isSelected ? 'Selected' : ''), onClick: () => this.select(), ref: el => this.stylingContainer = el }, this.value));\n  }\n  static get is() { return \"lottery-bullet\"; }\n  static get encapsulation() { return \"shadow\"; }\n  static get originalStyleUrls() { return {\n    \"$\": [\"lottery-bullet.scss\"]\n  }; }\n  static get styleUrls() { return {\n    \"$\": [\"lottery-bullet.css\"]\n  }; }\n  static get properties() { return {\n    \"value\": {\n      \"type\": \"string\",\n      \"mutable\": false,\n      \"complexType\": {\n        \"original\": \"string\",\n        \"resolved\": \"string\",\n        \"references\": {}\n      },\n      \"required\": false,\n      \"optional\": false,\n      \"docs\": {\n        \"tags\": [],\n        \"text\": \"Value of the bullet\"\n      },\n      \"attribute\": \"value\",\n      \"reflect\": true,\n      \"defaultValue\": \"'0'\"\n    },\n    \"selectable\": {\n      \"type\": \"boolean\",\n      \"mutable\": false,\n      \"complexType\": {\n        \"original\": \"boolean\",\n        \"resolved\": \"boolean\",\n        \"references\": {}\n      },\n      \"required\": false,\n      \"optional\": false,\n      \"docs\": {\n        \"tags\": [],\n        \"text\": \"Marks if the bullet should be selectable\"\n      },\n      \"attribute\": \"selectable\",\n      \"reflect\": true,\n      \"defaultValue\": \"true\"\n    },\n    \"isSelected\": {\n      \"type\": \"boolean\",\n      \"mutable\": false,\n      \"complexType\": {\n        \"original\": \"boolean\",\n        \"resolved\": \"boolean\",\n        \"references\": {}\n      },\n      \"required\": false,\n      \"optional\": false,\n      \"docs\": {\n        \"tags\": [],\n        \"text\": \"Marks if the bullet should be selected\"\n      },\n      \"attribute\": \"is-selected\",\n      \"reflect\": true,\n      \"defaultValue\": \"false\"\n    },\n    \"clientStyling\": {\n      \"type\": \"string\",\n      \"mutable\": false,\n      \"complexType\": {\n        \"original\": \"string\",\n        \"resolved\": \"string\",\n        \"references\": {}\n      },\n      \"required\": false,\n      \"optional\": false,\n      \"docs\": {\n        \"tags\": [],\n        \"text\": \"Client custom styling via string\"\n      },\n      \"attribute\": \"client-styling\",\n      \"reflect\": true,\n      \"defaultValue\": \"''\"\n    },\n    \"clientStylingUrlContent\": {\n      \"type\": \"string\",\n      \"mutable\": false,\n      \"complexType\": {\n        \"original\": \"string\",\n        \"resolved\": \"string\",\n        \"references\": {}\n      },\n      \"required\": false,\n      \"optional\": false,\n      \"docs\": {\n        \"tags\": [],\n        \"text\": \"Client custom styling via url content\"\n      },\n      \"attribute\": \"client-styling-url-content\",\n      \"reflect\": true,\n      \"defaultValue\": \"''\"\n    }\n  }; }\n  static get states() { return {\n    \"limitStylingAppends\": {}\n  }; }\n  static get events() { return [{\n      \"method\": \"bulletEvent\",\n      \"name\": \"lotteryBulletSelection\",\n      \"bubbles\": true,\n      \"cancelable\": true,\n      \"composed\": true,\n      \"docs\": {\n        \"tags\": [],\n        \"text\": \"When a bullet is selected/deselected this event is emmited\"\n      },\n      \"complexType\": {\n        \"original\": \"BulletEvent\",\n        \"resolved\": \"BulletEvent\",\n        \"references\": {\n          \"BulletEvent\": {\n            \"location\": \"import\",\n            \"path\": \"./lottery-bullet.types\"\n          }\n        }\n      }\n    }]; }\n}\n","@import url(\"https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap\");\n:host {\n  display: block;\n  font-family: \"Roboto\", sans-serif;\n}\n\n.GridContainer {\n  display: flex;\n  flex-direction: column;\n  max-width: 1200px;\n}\n\n.Grid {\n  margin-top: 10px 0 10px 0;\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  gap: 20px;\n}\n.Grid.TicketGrid {\n  gap: 5px;\n}","import { Component, h, Prop, Listen, State, Event } from '@stencil/core';\n// import { translate } from '../../utils/locale.utils';\nimport '@everymatrix/lottery-bullet';\nexport class LotteryGrid {\n  constructor() {\n    /**\n     * Number of bullets of grid\n     */\n    this.totalNumbers = 0;\n    /**\n     * Number of maximum bullets that can be selected\n     */\n    this.maximumAllowed = 0;\n    /**\n     * Minimum allowed of bullets\n     */\n    this.minimumAllowed = 1;\n    /**\n     * Allows the user to select numbers on the grid\n     */\n    this.selectable = true;\n    /**\n     * Numbers that should be showed as selected on the grid (as a string of those numbers e.g. '1,2,3,4,5,6')\n     */\n    this.selectedNumbers = '';\n    /**\n     * Show only selected numbers\n     */\n    this.displaySelected = false;\n    /**\n     * Language\n     */\n    this.language = 'en';\n    /**\n     * Personalize grid for ticket\n     */\n    this.gridType = '';\n    /**\n     * Client custom styling via string\n     */\n    this.clientStyling = '';\n    /**\n     * Client custom styling via url content\n     */\n    this.clientStylingUrlContent = '';\n    this.numbers = [];\n    this.limitStylingAppends = false;\n    this.selectedCounter = 0;\n    this.setClientStyling = () => {\n      let sheet = document.createElement('style');\n      sheet.innerHTML = this.clientStyling;\n      this.stylingContainer.prepend(sheet);\n    };\n    this.setClientStylingURL = () => {\n      let cssFile = document.createElement('style');\n      setTimeout(() => {\n        cssFile.innerHTML = this.clientStylingUrlContent;\n        this.stylingContainer.prepend(cssFile);\n      }, 1);\n    };\n  }\n  connectedCallback() {\n    let selected = [];\n    if (this.selectedNumbers.length > 0) {\n      selected = this.selectedNumbers.split(',');\n      this.selectedCounter = selected.length;\n    }\n    if (this.displaySelected) {\n      selected.forEach((item) => {\n        this.numbers.push({\n          number: item,\n          selected: true,\n          selectable: this.selectable\n        });\n      });\n    }\n    else {\n      [...Array(this.totalNumbers).keys()]\n        .map(number => (number + 1).toString())\n        .forEach((number) => {\n        this.numbers.push({\n          number,\n          selected: selected.indexOf(number) >= 0 ? true : false,\n          selectable: this.selectedCounter == this.maximumAllowed ? false : this.selectable\n        });\n      });\n    }\n  }\n  componentDidRender() {\n    // start custom styling area\n    if (!this.limitStylingAppends && this.stylingContainer) {\n      if (this.clientStyling)\n        this.setClientStyling();\n      if (this.clientStylingUrlContent)\n        this.setClientStylingURL();\n      this.limitStylingAppends = true;\n    }\n    // end custom styling area\n  }\n  // wrote this because the classic .sort(() => 0.5 - Math.random()) method yielded low entropy shuffles for some reason on certain devices\n  shuffleArray(array) {\n    const result = [];\n    while (array.length > 0) {\n      const randomIndex = Math.floor(Math.random() * (array.length));\n      result.push(array.splice(randomIndex, 1)[0]);\n    }\n    return result;\n  }\n  lotteryBulletSelectionHandler(event) {\n    this.numbers = this.numbers.map((item) => {\n      if (item.number == event.detail.value) {\n        return {\n          number: item.number,\n          selected: event.detail.selected,\n          selectable: item.selectable\n        };\n      }\n      return {\n        number: item.number,\n        selected: item.selected,\n        selectable: item.selectable\n      };\n    });\n    if (event.detail.selected) {\n      this.selectedCounter += 1;\n      if (this.selectedCounter == this.maximumAllowed) {\n        this.numbers = this.numbers.map((item) => {\n          return {\n            number: item.number,\n            selected: item.selected,\n            selectable: item.selected ? true : false\n          };\n        });\n        this.gridFilledEvent.emit({\n          id: this.ticketId,\n          index: this.gridIndex,\n          selectedNumbers: this.numbers.filter((item) => item.selected).map((item) => item.number)\n        });\n      }\n    }\n    else {\n      if (this.selectedCounter == this.maximumAllowed) {\n        this.numbers = this.numbers.map((item) => {\n          return {\n            number: item.number,\n            selected: item.selected,\n            selectable: true\n          };\n        });\n        this.gridDirtyEvent.emit({\n          id: this.ticketId,\n          index: this.gridIndex,\n          selectedNumbers: this.numbers.filter((item) => item.selected).map((item) => item.number)\n        });\n      }\n      this.selectedCounter -= 1;\n    }\n  }\n  async resetSelectionHandler(event) {\n    if (event.detail && event.detail == this.ticketId) {\n      this.selectedCounter = 0;\n      this.numbers = this.numbers.map((item) => {\n        return {\n          number: item.number,\n          selected: false,\n          selectable: this.selectable\n        };\n      });\n      this.gridDirtyEvent.emit({\n        id: this.ticketId,\n        index: this.gridIndex,\n        selectedNumbers: this.numbers.filter((item) => item.selected).map((item) => item.number)\n      });\n    }\n  }\n  async autoSelectionHandler(event) {\n    if (event.detail && event.detail == this.ticketId) {\n      this.resetSelectionHandler(event);\n      let array = [...Array(this.totalNumbers).keys()]\n        .map(number => number + 1);\n      array = this.shuffleArray(array);\n      array = array.slice(0, this.minimumAllowed);\n      this.numbers = this.numbers.map((item) => {\n        return {\n          number: item.number,\n          selected: array.indexOf(parseInt(item.number, 10)) >= 0 ? true : false,\n          selectable: array.indexOf(parseInt(item.number, 10)) >= 0 ? true : false,\n        };\n      });\n      this.gridFilledEvent.emit({\n        id: this.ticketId,\n        index: this.gridIndex,\n        selectedNumbers: this.numbers.filter((item) => item.selected).map((item) => item.number)\n      });\n      this.selectedCounter = this.maximumAllowed;\n    }\n  }\n  render() {\n    return (h(\"div\", { class: \"GridContainer\", ref: el => this.stylingContainer = el },\n      h(\"div\", { class: this.gridType === 'ticket' ? 'Grid TicketGrid' : 'Grid' }, this.numbers.map((item) => h(\"div\", null,\n        h(\"lottery-bullet\", { value: item.number, selectable: item.selectable, \"is-selected\": item.selected, \"client-styling\": this.clientStyling, \"client-styling-url-content\": this.clientStylingUrlContent }))))));\n  }\n  static get is() { return \"lottery-grid\"; }\n  static get encapsulation() { return \"shadow\"; }\n  static get originalStyleUrls() { return {\n    \"$\": [\"lottery-grid.scss\"]\n  }; }\n  static get styleUrls() { return {\n    \"$\": [\"lottery-grid.css\"]\n  }; }\n  static get properties() { return {\n    \"ticketId\": {\n      \"type\": \"number\",\n      \"mutable\": false,\n      \"complexType\": {\n        \"original\": \"number\",\n        \"resolved\": \"number\",\n        \"references\": {}\n      },\n      \"required\": false,\n      \"optional\": false,\n      \"docs\": {\n        \"tags\": [],\n        \"text\": \"Identifier for the ticket\"\n      },\n      \"attribute\": \"ticket-id\",\n      \"reflect\": true\n    },\n    \"totalNumbers\": {\n      \"type\": \"number\",\n      \"mutable\": false,\n      \"complexType\": {\n        \"original\": \"number\",\n        \"resolved\": \"number\",\n        \"references\": {}\n      },\n      \"required\": false,\n      \"optional\": false,\n      \"docs\": {\n        \"tags\": [],\n        \"text\": \"Number of bullets of grid\"\n      },\n      \"attribute\": \"total-numbers\",\n      \"reflect\": true,\n      \"defaultValue\": \"0\"\n    },\n    \"gameId\": {\n      \"type\": \"string\",\n      \"mutable\": false,\n      \"complexType\": {\n        \"original\": \"string\",\n        \"resolved\": \"string\",\n        \"references\": {}\n      },\n      \"required\": false,\n      \"optional\": false,\n      \"docs\": {\n        \"tags\": [],\n        \"text\": \"Game ID\"\n      },\n      \"attribute\": \"game-id\",\n      \"reflect\": true\n    },\n    \"maximumAllowed\": {\n      \"type\": \"number\",\n      \"mutable\": false,\n      \"complexType\": {\n        \"original\": \"number\",\n        \"resolved\": \"number\",\n        \"references\": {}\n      },\n      \"required\": false,\n      \"optional\": false,\n      \"docs\": {\n        \"tags\": [],\n        \"text\": \"Number of maximum bullets that can be selected\"\n      },\n      \"attribute\": \"maximum-allowed\",\n      \"reflect\": true,\n      \"defaultValue\": \"0\"\n    },\n    \"minimumAllowed\": {\n      \"type\": \"number\",\n      \"mutable\": false,\n      \"complexType\": {\n        \"original\": \"number\",\n        \"resolved\": \"number\",\n        \"references\": {}\n      },\n      \"required\": false,\n      \"optional\": false,\n      \"docs\": {\n        \"tags\": [],\n        \"text\": \"Minimum allowed of bullets\"\n      },\n      \"attribute\": \"minimum-allowed\",\n      \"reflect\": true,\n      \"defaultValue\": \"1\"\n    },\n    \"selectable\": {\n      \"type\": \"boolean\",\n      \"mutable\": false,\n      \"complexType\": {\n        \"original\": \"boolean\",\n        \"resolved\": \"boolean\",\n        \"references\": {}\n      },\n      \"required\": false,\n      \"optional\": false,\n      \"docs\": {\n        \"tags\": [],\n        \"text\": \"Allows the user to select numbers on the grid\"\n      },\n      \"attribute\": \"selectable\",\n      \"reflect\": true,\n      \"defaultValue\": \"true\"\n    },\n    \"selectedNumbers\": {\n      \"type\": \"string\",\n      \"mutable\": false,\n      \"complexType\": {\n        \"original\": \"string\",\n        \"resolved\": \"string\",\n        \"references\": {}\n      },\n      \"required\": false,\n      \"optional\": false,\n      \"docs\": {\n        \"tags\": [],\n        \"text\": \"Numbers that should be showed as selected on the grid (as a string of those numbers e.g. '1,2,3,4,5,6')\"\n      },\n      \"attribute\": \"selected-numbers\",\n      \"reflect\": true,\n      \"defaultValue\": \"''\"\n    },\n    \"displaySelected\": {\n      \"type\": \"boolean\",\n      \"mutable\": false,\n      \"complexType\": {\n        \"original\": \"boolean\",\n        \"resolved\": \"boolean\",\n        \"references\": {}\n      },\n      \"required\": false,\n      \"optional\": false,\n      \"docs\": {\n        \"tags\": [],\n        \"text\": \"Show only selected numbers\"\n      },\n      \"attribute\": \"display-selected\",\n      \"reflect\": true,\n      \"defaultValue\": \"false\"\n    },\n    \"language\": {\n      \"type\": \"string\",\n      \"mutable\": false,\n      \"complexType\": {\n        \"original\": \"string\",\n        \"resolved\": \"string\",\n        \"references\": {}\n      },\n      \"required\": false,\n      \"optional\": false,\n      \"docs\": {\n        \"tags\": [],\n        \"text\": \"Language\"\n      },\n      \"attribute\": \"language\",\n      \"reflect\": true,\n      \"defaultValue\": \"'en'\"\n    },\n    \"gridIndex\": {\n      \"type\": \"number\",\n      \"mutable\": false,\n      \"complexType\": {\n        \"original\": \"number\",\n        \"resolved\": \"number\",\n        \"references\": {}\n      },\n      \"required\": false,\n      \"optional\": false,\n      \"docs\": {\n        \"tags\": [],\n        \"text\": \"The index of the number\"\n      },\n      \"attribute\": \"grid-index\",\n      \"reflect\": true\n    },\n    \"gridType\": {\n      \"type\": \"string\",\n      \"mutable\": false,\n      \"complexType\": {\n        \"original\": \"string\",\n        \"resolved\": \"string\",\n        \"references\": {}\n      },\n      \"required\": false,\n      \"optional\": false,\n      \"docs\": {\n        \"tags\": [],\n        \"text\": \"Personalize grid for ticket\"\n      },\n      \"attribute\": \"grid-type\",\n      \"reflect\": true,\n      \"defaultValue\": \"''\"\n    },\n    \"clientStyling\": {\n      \"type\": \"string\",\n      \"mutable\": false,\n      \"complexType\": {\n        \"original\": \"string\",\n        \"resolved\": \"string\",\n        \"references\": {}\n      },\n      \"required\": false,\n      \"optional\": false,\n      \"docs\": {\n        \"tags\": [],\n        \"text\": \"Client custom styling via string\"\n      },\n      \"attribute\": \"client-styling\",\n      \"reflect\": true,\n      \"defaultValue\": \"''\"\n    },\n    \"clientStylingUrlContent\": {\n      \"type\": \"string\",\n      \"mutable\": false,\n      \"complexType\": {\n        \"original\": \"string\",\n        \"resolved\": \"string\",\n        \"references\": {}\n      },\n      \"required\": false,\n      \"optional\": false,\n      \"docs\": {\n        \"tags\": [],\n        \"text\": \"Client custom styling via url content\"\n      },\n      \"attribute\": \"client-styling-url-content\",\n      \"reflect\": true,\n      \"defaultValue\": \"''\"\n    }\n  }; }\n  static get states() { return {\n    \"numbers\": {},\n    \"limitStylingAppends\": {}\n  }; }\n  static get events() { return [{\n      \"method\": \"gridFilledEvent\",\n      \"name\": \"gridFilled\",\n      \"bubbles\": true,\n      \"cancelable\": true,\n      \"composed\": true,\n      \"docs\": {\n        \"tags\": [],\n        \"text\": \"When the grid is completed, it emits this event with selected numbers\"\n      },\n      \"complexType\": {\n        \"original\": \"GridEvent\",\n        \"resolved\": \"GridEvent\",\n        \"references\": {\n          \"GridEvent\": {\n            \"location\": \"import\",\n            \"path\": \"./lottery-grid.types\"\n          }\n        }\n      }\n    }, {\n      \"method\": \"gridDirtyEvent\",\n      \"name\": \"gridDirty\",\n      \"bubbles\": true,\n      \"cancelable\": true,\n      \"composed\": true,\n      \"docs\": {\n        \"tags\": [],\n        \"text\": \"When the grid is uncomplete after being completed once (reset or change), it emits this event\"\n      },\n      \"complexType\": {\n        \"original\": \"GridEvent\",\n        \"resolved\": \"GridEvent\",\n        \"references\": {\n          \"GridEvent\": {\n            \"location\": \"import\",\n            \"path\": \"./lottery-grid.types\"\n          }\n        }\n      }\n    }]; }\n  static get listeners() { return [{\n      \"name\": \"lotteryBulletSelection\",\n      \"method\": \"lotteryBulletSelectionHandler\",\n      \"target\": undefined,\n      \"capture\": false,\n      \"passive\": false\n    }, {\n      \"name\": \"resetSelection\",\n      \"method\": \"resetSelectionHandler\",\n      \"target\": \"document\",\n      \"capture\": false,\n      \"passive\": false\n    }, {\n      \"name\": \"autoSelection\",\n      \"method\": \"autoSelectionHandler\",\n      \"target\": \"document\",\n      \"capture\": false,\n      \"passive\": false\n    }]; }\n}\n"],"version":3}

package/dist/cjs/lottery-draw-results-history.cjs.entry.js

@@ -0,0 +1,240 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-cd44e726.js');
+
+const DEFAULT_LANGUAGE = 'en';
+const SUPPORTED_LANGUAGES = ['ro', 'en', 'fr', 'ar', 'hr'];
+const TRANSLATIONS = {
+  en: {
+    drawResultsHeader: 'Draw results history',
+    drawId: 'Draw ID',
+    drawDate: 'Draw Date',
+    drawNumbersGridA: 'Draw numbers Grid A',
+    viewAllResults: 'View All',
+    lastFiveDraws: 'Last 5 Draws',
+    lastTenDraws: 'Last 10 Draws',
+    lastFifteenDraws: 'Last 15 Draws',
+    allDrawResultsHistory: 'All Draw Results History',
+    noResults: 'No results',
+    fetchingResults: 'Fetching results'
+  },
+  ro: {
+    drawResultsHeader: 'Istoricul extragerilor',
+    drawId: 'ID-ul extragerii',
+    drawDate: 'Data extragerii',
+    drawNumbersGridA: 'Numerele extrase Grid A',
+    viewAllResults: 'Vezi toate rezultatele',
+    lastFiveDraws: 'Ultimile 5 extrageri',
+    lastTenDraws: 'Ultimile 10 extrageri',
+    lastFifteenDraws: 'Ultimile 15 extrageri',
+    allDrawResultsHistory: 'Istoricul tuturor extragerilor',
+    noResults: 'Niciun rezultat',
+    fetchingResults: 'Se obtin rezultatele'
+  },
+  fr: {
+    drawResultsHeader: 'Dessiner l\'historique des résultats',
+    drawId: 'ID de tirage',
+    drawDate: 'Date du tirage',
+    drawNumbersGridA: 'Tirage des numéros Grille',
+    viewAllResults: 'Voir tout',
+    lastFiveDraws: '5 derniers tirages',
+    lastTenDraws: '10 derniers tirages',
+    lastFifteenDraws: '15 derniers tirages',
+    allDrawResultsHistory: 'Historique des résultats de tous les tirages',
+    noResults: 'Aucun résultat',
+    fetchingResults: 'Récupération des résultats'
+  },
+  ar: {
+    drawResultsHeader: 'سجل نتائج السحب',
+    drawId: 'معرّف السحب',
+    drawDate: 'تاريخ السحب',
+    drawNumbersGridA: 'شبكة أرقام السحب',
+    viewAllResults: 'عرض الكل',
+    lastFiveDraws: 'آخر 5 سحوبات',
+    lastTenDraws: 'آخر 10 سحوبات',
+    lastFifteenDraws: 'آخر 15 سحبًا',
+    allDrawResultsHistory: 'سجل نتائج كل السحوبات',
+    noResults: 'لا توجد نتائج',
+    fetchingResults: 'جلب النتائج'
+  },
+  hr: {
+    drawResultsHeader: 'Povijest rezultata izvlačenja',
+    drawId: 'ID izvlačenja',
+    drawDate: 'Datum izvlačenja',
+    drawNumbersGridA: 'Izvučeni brojevi tablica A',
+    viewAllResults: 'Pogledaj sve',
+    lastFiveDraws: 'Zadnjih 5 izvlačenja',
+    lastTenDraws: 'Zadnjih 10 izvlačenja',
+    lastFifteenDraws: 'Zadnjih 15 izvlačenja',
+    allDrawResultsHistory: 'Povijest svih rezultata izvlačenja',
+    noResults: 'Nema rezultata',
+    fetchingResults: 'Dohvaćanje rezultata'
+  },
+};
+const translate = (key, customLang) => {
+  const lang = customLang;
+  return TRANSLATIONS[lang !== undefined && SUPPORTED_LANGUAGES.includes(lang) ? lang : DEFAULT_LANGUAGE][key];
+};
+
+const lotteryDrawResultsHistoryCss = "@import url(\"https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap\");:host{display:block;font-family:\"Roboto\", sans-serif}.GridBanner{background-color:#009993;background-repeat:no-repeat;background-position:center;color:#111;padding:0 20px 30px}.GridBanner .BannerButtonsWrapper{display:flex;justify-content:space-between;padding-top:16px}.GridBanner .BannerButtonsWrapper .BannerBackButton,.GridBanner .BannerButtonsWrapper .BannerLobbyButton{background:#fff;border:1px solid #009993;border-radius:4px;padding:7px 15px;font-size:12px;text-transform:uppercase;width:80px;cursor:pointer}.GridBanner .HistoryGridBannerArea{padding-top:30px}.HistoryGridBannerArea{display:flex;flex-direction:column;align-items:center}.BannerText{font-size:14px;font-weight:300}.BannerCountdown{font-size:22px;display:flex;gap:20px}.DrawResultsSection{max-width:600px;margin:0px auto}.HistoryGrid{border-radius:5px}.DrawResultsHeader{color:#009993;padding:25px 0 10px 0;text-align:center;border-radius:4px 4px 0 0}.DrawResultsHeader h4{text-transform:uppercase;font-size:16px;font-weight:600;margin:0}.DrawNumbersGrid{padding:10px 50px}.DrawNumbersGrid p{margin:0 0 10px 0;font-size:14px}.BulletContainer{margin-bottom:20px}.DrawResultTop{background-color:#009993;padding:10px;text-align:center;color:#fff;padding:0 50px;display:flex;justify-content:center;gap:40px}.ViewAllResults{display:block;padding:10px 40px;margin:40px auto;border:0;border-radius:5px;background-color:#009993;color:#fff;outline:none}.FilterSection{display:flex;justify-content:space-between;padding:25px 15px 10px;gap:10px;margin:0px 15px}.FilterSection .FilterResultsContainer{display:flex;gap:5px;overflow-x:auto}.FilterSection .QuickFilterButton{cursor:pointer;width:max-content;border-radius:4px;border:1px solid #00958f;background:#FFF;color:#000;font-size:12px;transition:all 0.2s linear;text-align:center;letter-spacing:0}.FilterSection .QuickFilterButton:hover{background:#F1F1F1}.FilterSection helper-filters{margin-left:auto}";
+
+const LotteryDrawResultsHistory = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    /**
+     * The number of results to be displayed
+     */
+    this.numberOfResults = 3;
+    /**
+     *Language
+     */
+    this.language = 'en';
+    /**
+     * Client custom styling via string
+     */
+    this.clientStyling = '';
+    /**
+     * Client custom styling via url content
+     */
+    this.clientStylingUrlContent = '';
+    this.drawData = [];
+    this.winningDataSetsData = [''];
+    this.displayAllDrawsResults = true;
+    this.showQuickFilters = true;
+    this.dateFiltersFrom = '';
+    this.dateFiltersTo = '';
+    this.isLoading = false;
+    this.noResults = false;
+    this.limitStylingAppends = false;
+    this.getDrawsData = () => {
+      let url = new URL(`${this.endpoint}/games/${this.gameId}/draws`);
+      if (this.dateFiltersFrom)
+        url.searchParams.append('from', this.dateFiltersFrom);
+      if (this.dateFiltersTo)
+        url.searchParams.append('to', this.dateFiltersTo);
+      fetch(url.href)
+        .then((res) => {
+        if (res.status >= 300) {
+          throw new Error('There was an error while fetching the data');
+        }
+        return res.json();
+      })
+        .then((data) => {
+        this.winningDataSetsData = data.items.filter(draw => draw.winningNumbers);
+        this.drawData = this.winningDataSetsData.map((item) => item);
+      })
+        .catch((err) => {
+        console.log('err', err);
+      })
+        .finally(() => {
+        this.isLoading = false;
+        this.noResults = this.drawData.filter(draw => draw.winningNumbers).length == 0 ? true : false;
+      });
+    };
+    this.filterResults = (resultsNumber) => {
+      this.numberOfResults = resultsNumber;
+      this.displayAllDrawsResults = true;
+    };
+    this.getDrawResults = (drawID) => {
+      let url = new URL(`${this.endpoint}/games/${this.gameId}/draws/${drawID}`);
+      let drawOptions = {
+        method: "GET",
+        headers: {
+          'Content-Type': "application/json",
+          'Accept': 'application/json',
+        },
+      };
+      fetch(url.href, drawOptions)
+        .then((response) => {
+        if (response.status == 404)
+          this.noResults = true;
+        return response.json();
+      })
+        .then((data) => {
+        this.drawData = [data].map((item) => item);
+      })
+        .catch((err) => {
+        console.log('err', err);
+      })
+        .finally(() => {
+        this.isLoading = false;
+      });
+    };
+    this.viewAllResults = () => {
+      this.numberOfResults = this.drawData.length;
+      this.displayAllDrawsResults = false;
+      window.scrollTo({ top: 0, behavior: 'smooth' });
+    };
+    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);
+    };
+  }
+  // Filters events
+  // @Listen('filterDraw')
+  // filtersDrawHandler(event: CustomEvent<any>):void {
+  //   this.isLoading = true;
+  //   this.showQuickFilters = false;
+  // }
+  filtersHandler(event) {
+    this.showQuickFilters = false;
+    this.isLoading = true;
+    if (event.detail.ticketDrawId) {
+      this.getDrawResults(event.detail.ticketDrawId);
+    }
+    else {
+      this.dateFiltersFrom = event.detail.filterFromCalendar;
+      this.dateFiltersTo = event.detail.filterToCalendar;
+      this.getDrawsData();
+    }
+  }
+  clearFiltersHandler() {
+    this.showQuickFilters = true;
+    this.dateFiltersFrom = '';
+    this.dateFiltersTo = '';
+    this.drawData = this.winningDataSetsData;
+    this.isLoading = true;
+    this.getDrawsData();
+  }
+  connectedCallback() {
+    if (this.showQuickFilters)
+      this.getDrawsData();
+  }
+  disconnectedCallback() {
+    clearInterval(this.interval);
+  }
+  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
+  }
+  render() {
+    let gridHeader = index.h("div", { class: "DrawResultsHeader" }, this.displayAllDrawsResults ? index.h("h4", null, translate('drawResultsHeader', this.language)) :
+      [index.h("div", { class: "DrawResultsHeaderContent" }, index.h("h4", null, translate('allDrawResultsHistory', this.language)), index.h("div", { class: "FilterSection" }, this.showQuickFilters &&
+          index.h("div", { class: "FilterResultsContainer" }, index.h("button", { class: "QuickFilterButton", onClick: () => this.filterResults(5) }, translate('lastFiveDraws', this.language)), index.h("button", { class: "QuickFilterButton", onClick: () => this.filterResults(10) }, translate('lastTenDraws', this.language)), index.h("button", { class: "QuickFilterButton", onClick: () => this.filterResults(15) }, translate('lastFifteenDraws', this.language))), index.h("helper-filters", { "show-filter-id": "true", "activate-ticket-search": "false", "game-id": this.gameId, "client-styling": this.clientStyling, "client-styling-url-content": this.clientStylingUrlContent }))),
+      ]);
+    return index.h("section", { class: "GridWrapper", ref: el => this.stylingContainer = el }, index.h("div", { class: "DrawResultsSection" }, index.h("div", { class: "DrawResultsAreaHistory" }, gridHeader, index.h("div", { class: "HistoryGridWrapper" }, index.h("div", { class: "HistoryGrid" }, this.isLoading &&
+      index.h("p", null, translate('fetchingResults', this.language)), !this.isLoading && !this.noResults && this.drawData.map((item) => index.h("lottery-draw-results", { endpoint: this.endpoint, "game-id": this.gameId, "draw-id": item.id, "draw-mode": true, "client-styling": this.clientStyling, "client-styling-url-content": this.clientStylingUrlContent })).reverse().slice(0, this.numberOfResults), !this.isLoading && this.noResults && (index.h("p", null, translate('noResults', this.language))))), this.displayAllDrawsResults && index.h("button", { class: "ViewAllResults", onClick: this.viewAllResults }, translate('viewAllResults', this.language)))));
+  }
+};
+LotteryDrawResultsHistory.style = lotteryDrawResultsHistoryCss;
+
+exports.lottery_draw_results_history = LotteryDrawResultsHistory;
+
+//# sourceMappingURL=lottery-draw-results-history.cjs.entry.js.map