@everymatrix/lottery-game-page 0.1.0 → 0.1.4

package/dist/components/helper-pagination.js

@@ -0,0 +1,216 @@
+import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+
+/**
+ * @name isMobile
+ * @description A method that returns if the browser used to access the app is from a mobile device or not
+ * @param {String} userAgent window.navigator.userAgent
+ * @returns {Boolean} true or false
+ */
+const isMobile = (userAgent) => {
+  return !!(userAgent.toLowerCase().match(/android/i) ||
+    userAgent.toLowerCase().match(/blackberry|bb/i) ||
+    userAgent.toLowerCase().match(/iphone|ipad|ipod/i) ||
+    userAgent.toLowerCase().match(/windows phone|windows mobile|iemobile|wpdesktop/i));
+};
+
+const DEFAULT_LANGUAGE = 'en';
+const SUPPORTED_LANGUAGES = ['ro', 'en'];
+const TRANSLATIONS = {
+  en: {
+    firstPage: 'First',
+    previousPage: 'Previous',
+    nextPage: 'Next',
+    lastPage: 'Last'
+  },
+  ro: {
+    firstPage: 'Prima',
+    previousPage: 'Anterior',
+    nextPage: 'Urmatoarea',
+    lastPage: 'Ultima'
+  },
+};
+const translate = (key, customLang) => {
+  const lang = customLang;
+  return TRANSLATIONS[lang !== undefined && SUPPORTED_LANGUAGES.includes(lang) ? lang : DEFAULT_LANGUAGE][key];
+};
+
+const helperPaginationCss = "@import url(\"https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap\");:host{display:block;font-family:\"Roboto\", sans-serif}#PaginationContainer{width:100%;margin-top:20px;display:inline-flex;justify-content:space-between;align-items:center}.LeftItems button:not(:first-child),.RightItems button:not(:last-child){margin:0 10px}.LeftItems button,.RightItems button{padding:0;background-color:#009993;border-color:#009993}.PaginationArea{display:inline-flex;gap:10px;list-style:none}.PaginationArea li{margin:0;padding:0}.PaginationArea li button{width:24px;height:24px;display:flex;border:0;padding:0;justify-content:center;align-items:center;background-color:transparent;color:#000;cursor:pointer;pointer-events:all}.PaginationItem.ActiveItem button{background:#009993;border-color:#009993;color:#fff}.PaginationItem.ActiveItem button:disabled{pointer-events:none;cursor:not-allowed}.PaginationItem button:hover,.PaginationItem button:active{background:#009993;border-color:#009993;color:#fff;opacity:0.8}button{width:100px;height:32px;border:1px solid #524e52;border-radius:5px;background:#524e52;color:#fff;font-size:14px;font:inherit;cursor:pointer;transition:all 0.1s linear;text-transform:uppercase;text-align:center;letter-spacing:0}button:hover,button:active{background:#004D4A;border-color:#004D4A}button:disabled{background-color:#ccc;border-color:#ccc;color:#fff;cursor:not-allowed}@media screen and (max-width: 720px){button{width:90px;font-size:12px}}@media screen and (max-width: 480px){button{width:70px;font-size:10px}.paginationArea{padding:5px}}@media screen and (max-width: 320px){button{width:58px;font-size:10px}.paginationArea{padding:5px;gap:5px}}@media (hover: none){.paginationItem button:hover{background:inherit;border-color:inherit;color:inherit;opacity:1}.paginationItem.activeItem button:hover{background:#009993;border-color:#009993;color:#fff}}";
+
+const HelperPagination$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.hpPageChange = createEvent(this, "hpPageChange", 7);
+    /**
+     * First page boolean value - determines if the page is disabled or active
+     */
+    this.firstPage = false;
+    /**
+     * Previous page boolean value - determines if the page is disabled or active
+     */
+    this.previousPage = false;
+    /**
+     * The received offset
+     */
+    this.offset = 0;
+    /**
+     * The received limit for the number of pages
+     */
+    this.limit = 1;
+    /**
+     * The received total number of pages
+     */
+    this.total = 1;
+    /**
+     * Language
+     */
+    this.language = 'en';
+    /**
+     * In component working variable for the array of pages
+     */
+    this.pagesArray = [];
+    /**
+     * In component working variable for last page
+     */
+    this.endInt = 0;
+    this.userAgent = window.navigator.userAgent;
+    this.currentPage = 1;
+    /**
+     * Navigation logic
+     */
+    this.navigateTo = (navigationPage) => {
+      switch (navigationPage) {
+        case 'firstPage':
+          this.offsetInt = 0;
+          break;
+        case 'lastPage':
+          this.offsetInt = this.endInt * this.limitInt;
+          break;
+        case 'previousPage':
+          this.offsetInt -= 10;
+          break;
+        case 'nextPage':
+          this.offsetInt += 10;
+          break;
+        case 'fivePagesBack':
+          this.offsetInt -= 30;
+          this.offsetInt = this.offsetInt < 0 ? 0 : this.offsetInt;
+          break;
+        case 'fivePagesForward':
+          this.offsetInt += 30;
+          this.offsetInt = this.offsetInt / 10 >= this.endInt ? this.endInt * 10 : this.offsetInt;
+          break;
+      }
+      this.hpPageChange.emit({ offset: this.offsetInt, limit: this.limitInt, total: this.totalInt });
+    };
+    /**
+     * Handle navigation from here
+     */
+    this.paginationNavigation = (pageNumber, index) => {
+      if (!isNaN(pageNumber)) {
+        if (pageNumber === 1) {
+          this.offsetInt = pageNumber - 1;
+        }
+        else {
+          this.offsetInt = (pageNumber - 1) * 10;
+        }
+      }
+      else {
+        if (index === 0 && this.currentPage <= 4) {
+          this.navigateTo('firstPage');
+        }
+        else if (index === 0 && this.currentPage > 4) {
+          this.navigateTo('fivePagesBack');
+        }
+        else if (index === 4 && this.endInt - this.currentPage >= 2) {
+          this.navigateTo('fivePagesForward');
+        }
+      }
+      this.currentPage = this.offsetInt;
+      this.hpPageChange.emit({ offset: this.offsetInt, limit: this.limitInt, total: this.totalInt });
+    };
+  }
+  componentWillRender() {
+    this.offsetInt = this.offset;
+    this.currentPage = this.offsetInt / this.limitInt + 1;
+    this.limitInt = this.limit;
+    this.totalInt = this.total;
+    this.endInt = (Math.ceil(this.totalInt / this.limitInt) - 1);
+    this.lastPage = (this.offsetInt >= this.endInt * this.limitInt) ? false : true;
+    /**
+     * Construct numbered navigation area based on current page position
+     */
+    if (this.currentPage === 1 || this.currentPage === 2) {
+      this.pagesArray = Array.from({ length: 4 }, (_, i) => i + 1);
+      this.pagesArray.push('...');
+    }
+    else if (this.currentPage >= 3 && ((this.endInt - this.currentPage) >= 2)) {
+      this.pagesArray = Array.from({ length: 3 }, (_, i) => this.currentPage + i - 1);
+      this.pagesArray.push('...');
+      this.pagesArray.unshift('...');
+    }
+    else if ((this.endInt - this.currentPage) < 3) {
+      this.pagesArray = Array.from({ length: 4 }, (_, i) => this.endInt - 2 + i);
+      this.pagesArray.unshift('...');
+    }
+  }
+  render() {
+    /**
+     * Center navigation area
+     */
+    let navigationArea = h("ul", { class: "PaginationArea" }, this.pagesArray.map((item, index) => {
+      return (h("li", { class: 'PaginationItem' + (item === this.currentPage ? ' ActiveItem' : ' ') + ' ' + (isMobile(this.userAgent) ? 'MobileButtons' : '') }, h("button", { disabled: item === this.currentPage ? true : false, onClick: this.paginationNavigation.bind(this, item, index) }, h("span", null, item))));
+    }));
+    /**
+     * Left navigation area
+     */
+    let buttonsLeftSide = h("div", { class: "LeftItems" }, h("button", { disabled: !this.previousPage, onClick: this.navigateTo.bind(this, 'firstPage') }, translate('firstPage', this.language)), h("button", { disabled: !this.previousPage ? true : false, onClick: this.navigateTo.bind(this, 'previousPage') }, translate('previousPage', this.language)));
+    if (isMobile(this.userAgent)) {
+      buttonsLeftSide =
+        h("div", { class: "LeftItems" }, h("button", { disabled: !this.previousPage ? true : false, onClick: this.navigateTo.bind(this, 'previousPage') }, translate('previousPage', this.language)));
+    }
+    /**
+     * Right navigation area
+     */
+    let buttonsRightSide = h("div", { class: "RightItems" }, h("button", { disabled: !this.lastPage ? true : false, onClick: this.navigateTo.bind(this, 'nextPage') }, translate('nextPage', this.language)), h("button", { disabled: !this.lastPage ? true : false, onClick: this.navigateTo.bind(this, 'lastPage') }, translate('lastPage', this.language)));
+    if (isMobile(this.userAgent)) {
+      buttonsRightSide =
+        h("div", { class: "RightItems" }, h("button", { disabled: !this.lastPage ? true : false, onClick: this.navigateTo.bind(this, 'nextPage') }, translate('nextPage', this.language)));
+    }
+    return (h("div", { id: "PaginationContainer" }, buttonsLeftSide, navigationArea, buttonsRightSide));
+  }
+  static get style() { return helperPaginationCss; }
+}, [1, "helper-pagination", {
+    "firstPage": [1540, "first-page"],
+    "previousPage": [1540, "previous-page"],
+    "offset": [1538],
+    "limit": [1538],
+    "total": [1538],
+    "language": [1],
+    "offsetInt": [32],
+    "lastPage": [32],
+    "limitInt": [32],
+    "totalInt": [32],
+    "pagesArray": [32],
+    "endInt": [32]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["helper-pagination"];
+  components.forEach(tagName => { switch (tagName) {
+    case "helper-pagination":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, HelperPagination$1);
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const HelperPagination = HelperPagination$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { HelperPagination, defineCustomElement };

package/dist/components/lottery-bullet.js

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

package/dist/components/lottery-bullet2.js

@@ -0,0 +1,57 @@
+import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+
+const lotteryBulletCss = "@import url(\"https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap\");:host{display:block;font-family:\"Roboto\", sans-serif}@-webkit-keyframes Circle{0%{-webkit-transform:scale(0.5);transform:scale(0.5)}100%{-webkit-transform:scale(1);transform:scale(1)}}@keyframes Circle{0%{-webkit-transform:scale(0.5);transform:scale(0.5)}100%{-webkit-transform:scale(1);transform:scale(1)}}@-webkit-keyframes hover-rotate{0%{-webkit-transform:scale(1) rotateZ(0);transform:scale(1) rotateZ(0)}50%{-webkit-transform:scale(1.2) rotateZ(180deg);transform:scale(1.22) rotateZ(180deg)}100%{-webkit-transform:scale(1) rotateZ(360deg);transform:scale(1) rotateZ(360deg)}}@keyframes hover-rotate{0%{-webkit-transform:scale(1) rotateZ(0);transform:scale(1) rotateZ(0)}50%{-webkit-transform:scale(1.2) rotateZ(180deg);transform:scale(1.2) rotateZ(180deg)}100%{-webkit-transform:scale(1) rotateZ(360deg);transform:scale(1) rotateZ(360deg)}}@-webkit-keyframes selected-scaleUp{0%{-webkit-transform:scale(0.5);transform:scale(0.5)}100%{-webkit-transform:scale(1.2);transform:scale(1.2)}}@keyframes selected-scaleUp{0%{-webkit-transform:scale(0.5);transform:scale(0.5)}100%{-webkit-transform:scale(1);transform:scale(1)}}.Circle{-webkit-animation:Circle 0.8s cubic-bezier(0.39, 0.575, 0.565, 1) both;animation:Circle 0.8s cubic-bezier(0.39, 0.575, 0.565, 1) both;cursor:pointer;color:#000000;display:block;height:30px;width:30px;margin:0;display:flex;align-items:center;justify-content:center;justify-content:center;align-items:center;border:solid 2px #ffffff;background:radial-gradient(circle at top, white 0%, white 100%);font-weight:bold;border-radius:50%;box-shadow:0 2px 4px 0 rgba(0, 0, 0, 0.5);user-select:none;font-size:16px;line-height:16px;font-weight:600;position:relative}.Circle:hover{-webkit-animation:hover-rotate 0.4s linear both;animation:hover-rotate 0.4s linear both;background:radial-gradient(circle at top, white 0%, #f1f1f1 100%)}.Circle.Selected{-webkit-animation:selected-scaleUp 0.4s cubic-bezier(0.39, 0.575, 0.565, 1) both;animation:selected-scaleUp 0.4s cubic-bezier(0.39, 0.575, 0.565, 1) both;color:#ffffff;background:#9EC258;background:-webkit-radial-gradient(top, #00958f, #004D4A);background:-moz-radial-gradient(top, #00958f, #004D4A);background:radial-gradient(to bottom, #00958f, #004D4A);border:solid 2px #00958f}.Circle.Disabled{-webkit-animation:selected-scaleUp 0.4s cubic-bezier(0.39, 0.575, 0.565, 1) both;animation:selected-scaleUp 0.4s cubic-bezier(0.39, 0.575, 0.565, 1) both;color:#f1f1f1;background:#D4D4D4;border:solid 2px #D4D4D4;cursor:default}.Circle.DisabledSelected{-webkit-animation:selected-scaleUp 0.4s cubic-bezier(0.39, 0.575, 0.565, 1) both;animation:selected-scaleUp 0.4s cubic-bezier(0.39, 0.575, 0.565, 1) both;color:#f1f1f1;background:#9EC258;background:-webkit-radial-gradient(top, #00958f, #004D4A);background:-moz-radial-gradient(top, #00958f, #004D4A);background:radial-gradient(to bottom, #00958f, #004D4A);border:solid 2px #D4D4D4;cursor:default}";
+
+const LotteryBullet = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.bulletEvent = 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;
+    this.select = () => {
+      if (this.selectable) {
+        this.isSelected = !this.isSelected;
+        this.bulletEvent.emit({
+          value: this.value,
+          selected: this.isSelected
+        });
+      }
+    };
+  }
+  render() {
+    return (h("div", { class: 'Circle ' + (this.selectable ? '' : 'Disabled') + (this.isSelected ? 'Selected' : ''), onClick: () => this.select() }, this.value));
+  }
+  static get style() { return lotteryBulletCss; }
+}, [1, "lottery-bullet", {
+    "value": [1],
+    "selectable": [4],
+    "isSelected": [4, "is-selected"]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["lottery-bullet"];
+  components.forEach(tagName => { switch (tagName) {
+    case "lottery-bullet":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, LotteryBullet);
+      }
+      break;
+  } });
+}
+defineCustomElement();
+
+export { LotteryBullet as L, defineCustomElement as d };

package/dist/components/lottery-draw-results-history.js

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

package/dist/components/lottery-draw-results-history2.js

@@ -0,0 +1,216 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { d as defineCustomElement$5 } from './helper-filters2.js';
+import { d as defineCustomElement$4 } from './helper-modal2.js';
+import { d as defineCustomElement$3 } from './lottery-bullet2.js';
+import { d as defineCustomElement$2 } from './lottery-draw-results2.js';
+import { d as defineCustomElement$1 } from './lottery-grid2.js';
+
+const DEFAULT_LANGUAGE = 'en';
+const SUPPORTED_LANGUAGES = ['ro', 'en'];
+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'
+  },
+};
+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}.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 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    /**
+     * The number of results to be displayed
+     */
+    this.numberOfResults = 3;
+    /**
+     *Language
+     */
+    this.language = 'en';
+    this.drawData = [];
+    this.displayAllDrawsResults = true;
+    this.showQuickFilters = true;
+    this.winningDataSetsData = [''];
+    this.dateFiltersFrom = '';
+    this.dateFiltersTo = '';
+    this.isLoading = false;
+    this.noResults = false;
+    this.getDrawsData = (filterbydate = false) => {
+      let url = filterbydate ? new URL(`${this.endpoint}/games/${this.gameId}/draws`) : new URL(`${this.endpoint}/games/${this.gameId}`);
+      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.isLoading = false;
+        if (filterbydate) {
+          this.winningDataSetsData = data.items.filter(draw => draw.winningNumbers);
+        }
+        else {
+          this.winningDataSetsData = data.draws.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) => {
+        return response.json();
+      })
+        .then((data) => {
+        this.drawData = [data].map((item) => item);
+        this.isLoading = false;
+      });
+    };
+    this.viewAllResults = () => {
+      this.numberOfResults = this.drawData.length;
+      this.displayAllDrawsResults = false;
+      window.scrollTo({ top: 0, behavior: 'smooth' });
+    };
+  }
+  // Filters events
+  filtersDrawHandler(event) {
+    this.isLoading = true;
+    this.showQuickFilters = false;
+    this.getDrawResults(event.detail.ticketDrawId);
+  }
+  filtersHandler(event) {
+    this.showQuickFilters = false;
+    this.dateFiltersFrom = event.detail.filterFromCalendar;
+    this.dateFiltersTo = event.detail.filterToCalendar;
+    this.isLoading = true;
+    this.getDrawsData(true);
+  }
+  clearFiltersHandler() {
+    this.drawData = this.winningDataSetsData;
+    this.showQuickFilters = true;
+    this.dateFiltersFrom = '';
+    this.dateFiltersTo = '';
+    this.isLoading = true;
+    this.getDrawsData(false);
+  }
+  connectedCallback() {
+    if (this.showQuickFilters)
+      this.getDrawsData(false);
+  }
+  disconnectedCallback() {
+    clearInterval(this.interval);
+  }
+  render() {
+    let gridHeader = h("div", { class: "DrawResultsHeader" }, this.displayAllDrawsResults ? h("h4", null, translate('drawResultsHeader', this.language)) :
+      [h("div", { class: "DrawResultsHeaderContent" }, h("h4", null, translate('allDrawResultsHistory', this.language)), h("div", { class: "FilterSection" }, this.showQuickFilters &&
+          h("div", { class: "FilterResultsContainer" }, h("button", { class: "QuickFilterButton", onClick: () => this.filterResults(5) }, translate('lastFiveDraws', this.language)), h("button", { class: "QuickFilterButton", onClick: () => this.filterResults(10) }, translate('lastTenDraws', this.language)), h("button", { class: "QuickFilterButton", onClick: () => this.filterResults(15) }, translate('lastFifteenDraws', this.language))), h("helper-filters", { "show-filter-id": "true", "activate-ticket-search": "false", "game-id": this.gameId }))),
+      ]);
+    return h("section", { class: "GridWrapper" }, h("div", { class: "DrawResultsSection" }, h("div", { class: "DrawResultsAreaHistory" }, gridHeader, h("div", { class: "HistoryGridWrapper" }, h("div", { class: "HistoryGrid" }, this.isLoading &&
+      h("p", null, translate('fetchingResults', this.language)), !this.isLoading && !this.noResults && this.drawData.map((item) => h("lottery-draw-results", { endpoint: this.endpoint, "game-id": this.gameId, "draw-id": item.id, "draw-mode": true })).reverse().slice(0, this.numberOfResults), !this.isLoading && this.noResults && (h("p", null, translate('noResults', this.language))))), this.displayAllDrawsResults && h("button", { class: "ViewAllResults", onClick: this.viewAllResults }, translate('viewAllResults', this.language)))));
+  }
+  static get style() { return lotteryDrawResultsHistoryCss; }
+}, [1, "lottery-draw-results-history", {
+    "endpoint": [1],
+    "gameId": [1, "game-id"],
+    "numberOfResults": [2, "number-of-results"],
+    "language": [1],
+    "drawData": [32],
+    "displayAllDrawsResults": [32],
+    "showQuickFilters": [32],
+    "winningDataSetsData": [32],
+    "dateFiltersFrom": [32],
+    "dateFiltersTo": [32],
+    "isLoading": [32],
+    "noResults": [32]
+  }, [[0, "filterDraw", "filtersDrawHandler"], [0, "filterSelection", "filtersHandler"], [0, "filterSelectionReset", "clearFiltersHandler"]]]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["lottery-draw-results-history", "helper-filters", "helper-modal", "lottery-bullet", "lottery-draw-results", "lottery-grid"];
+  components.forEach(tagName => { switch (tagName) {
+    case "lottery-draw-results-history":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, LotteryDrawResultsHistory);
+      }
+      break;
+    case "helper-filters":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$5();
+      }
+      break;
+    case "helper-modal":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "lottery-bullet":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "lottery-draw-results":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+    case "lottery-grid":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
+defineCustomElement();
+
+export { LotteryDrawResultsHistory as L, defineCustomElement as d };

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

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