@everymatrix/lottery-game-page 0.1.5 → 0.1.9

package/dist/cjs/helper-accordion.cjs.entry.js

@@ -0,0 +1,92 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-5701a895.js');
+
+const DEFAULT_LANGUAGE = 'en';
+const SUPPORTED_LANGUAGES = ['ro', 'en'];
+const TRANSLATIONS = {
+  en: {
+    deleteTicket: 'Delete ticket'
+  },
+  ro: {
+    deleteTicket: 'Sterge biletul'
+  },
+};
+const translate = (key, customLang) => {
+  const lang = customLang;
+  return TRANSLATIONS[lang !== undefined && SUPPORTED_LANGUAGES.includes(lang) ? lang : DEFAULT_LANGUAGE][key];
+};
+
+const helperAccordionCss = "@import url(\"https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap\");:host{display:block;font-family:\"Roboto\", sans-serif}.Header{border-radius:4px 4px 0 0;background:#009993;display:flex;gap:30px;border:1px solid #009993;padding:8px 10px;user-select:none}.Header:hover{background:#00ABA4}.Header .Title,.Header .Subtitle,.Header .Description{margin:0;font-size:14px;color:#fff}.Header .Expand{margin-left:auto;color:#FFF;width:17px;height:17px;cursor:pointer;text-align:center;transform:rotate(90deg);font-size:20px;user-select:none}.HeaderTicketHistory{border-radius:4px;background:#F1F1F1;display:flex;gap:30px;border:1px solid #009993;padding:8px 10px;user-select:none;margin-bottom:5px}.HeaderTicketHistory:hover{background:#00ABA4}.HeaderTicketHistory .Title,.HeaderTicketHistory .Subtitle,.HeaderTicketHistory .Description{margin:0;font-size:14px;color:#000}.HeaderTicketHistory .Expand{margin-left:auto;color:#FFF;width:17px;height:17px;cursor:pointer;text-align:center;transform:rotate(90deg);font-size:20px;user-select:none}.Content{border-radius:0 0 4px 4px;background:#fff;border:1px solid #009993;padding:10px 15px;user-select:none;color:#000;margin-bottom:10px}.ActionButton{cursor:pointer;display:inline-block;border-radius:4px;margin:20px 0 10px;text-transform:uppercase;font-size:12px;text-align:center;padding:8px 20px;min-width:80px;background:#FF3D00;border:1px solid #FF3D00;color:#FFF}.ActionButton:hover{background:#FF6536;border:1px solid #FF3D00}";
+
+const Accordion = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.accordionEvent = index.createEvent(this, "helperAccordionAction", 7);
+    /**
+   * Flag for ticket history
+   */
+    this.ticketHistoryFlag = false;
+    /**
+     * Title (top header)
+     */
+    this.headerTitle = '';
+    /**
+     * SubTitle (top header)
+     */
+    this.headerSubtitle = '';
+    /**
+     * Description
+     */
+    this.description = '';
+    /**
+     * Enables footer content
+     */
+    this.footer = false;
+    /**
+     * Enables footer button for tab deletion
+     */
+    this.deleteTab = false;
+    /**
+     * Activates postMessages as events for actions from the widget
+     */
+    this.postMessage = false;
+    /**
+     * Name of the event emitter by the action button
+     */
+    this.eventName = 'helperAccordionAction';
+    /**
+     * Collapsed
+     */
+    this.collapsed = true;
+    /**
+     * Language
+     */
+    this.language = 'en';
+  }
+  // @TODO fix the `any` type :)
+  connectedCallback() {
+    this.showContent = !this.collapsed;
+  }
+  toggleContent() {
+    this.showContent = !this.showContent;
+  }
+  deleteAction() {
+    if (this.postMessage) {
+      // @TODO maybe change the name type, this one sucks
+      window.postMessage({ type: this.eventName }, window.location.href);
+    }
+    this.accordionEvent.emit();
+  }
+  render() {
+    return (index.h("div", { class: "Wrapper" }, index.h("div", { class: this.ticketHistoryFlag === true ? 'HeaderTicketHistory' : 'Header' }, index.h("p", { class: "Title" }, this.headerTitle), index.h("p", { class: "Subtitle" }, this.headerSubtitle), index.h("p", { class: "Subtitle" }, this.description), index.h("span", { class: "Expand", onClick: () => this.toggleContent() }, this.showContent ? '<' : '>')), this.showContent &&
+      index.h("div", null, index.h("div", { class: "Content" }, index.h("slot", { name: 'accordionContent' }), this.footer && this.showContent &&
+        index.h("div", null, this.deleteTab &&
+          index.h("span", { class: "ActionButton", onClick: () => this.deleteAction() }, translate('deleteTicket', this.language)))))));
+  }
+};
+Accordion.style = helperAccordionCss;
+
+exports.helper_accordion = Accordion;

package/dist/cjs/{lottery-draw-results.cjs.entry.js → helper-filters_2.cjs.entry.js}

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

package/dist/cjs/helper-modal.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-614098f4.js');
+const index = require('./index-5701a895.js');
 
 /**
  * @name isMobile

package/dist/cjs/helper-pagination.cjs.entry.js

@@ -0,0 +1,188 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-5701a895.js');
+
+/**
+ * @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 = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.hpPageChange = index.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 = index.h("ul", { class: "PaginationArea" }, this.pagesArray.map((item, index$1) => {
+      return (index.h("li", { class: 'PaginationItem' + (item === this.currentPage ? ' ActiveItem' : ' ') + ' ' + (isMobile(this.userAgent) ? 'MobileButtons' : '') }, index.h("button", { disabled: item === this.currentPage ? true : false, onClick: this.paginationNavigation.bind(this, item, index$1) }, index.h("span", null, item))));
+    }));
+    /**
+     * Left navigation area
+     */
+    let buttonsLeftSide = index.h("div", { class: "LeftItems" }, index.h("button", { disabled: !this.previousPage, onClick: this.navigateTo.bind(this, 'firstPage') }, translate('firstPage', this.language)), index.h("button", { disabled: !this.previousPage ? true : false, onClick: this.navigateTo.bind(this, 'previousPage') }, translate('previousPage', this.language)));
+    if (isMobile(this.userAgent)) {
+      buttonsLeftSide =
+        index.h("div", { class: "LeftItems" }, index.h("button", { disabled: !this.previousPage ? true : false, onClick: this.navigateTo.bind(this, 'previousPage') }, translate('previousPage', this.language)));
+    }
+    /**
+     * Right navigation area
+     */
+    let buttonsRightSide = index.h("div", { class: "RightItems" }, index.h("button", { disabled: !this.lastPage ? true : false, onClick: this.navigateTo.bind(this, 'nextPage') }, translate('nextPage', this.language)), index.h("button", { disabled: !this.lastPage ? true : false, onClick: this.navigateTo.bind(this, 'lastPage') }, translate('lastPage', this.language)));
+    if (isMobile(this.userAgent)) {
+      buttonsRightSide =
+        index.h("div", { class: "RightItems" }, index.h("button", { disabled: !this.lastPage ? true : false, onClick: this.navigateTo.bind(this, 'nextPage') }, translate('nextPage', this.language)));
+    }
+    return (index.h("div", { id: "PaginationContainer" }, buttonsLeftSide, navigationArea, buttonsRightSide));
+  }
+};
+HelperPagination.style = helperPaginationCss;
+
+exports.helper_pagination = HelperPagination;

package/dist/cjs/helper-tab.cjs.entry.js

@@ -0,0 +1,36 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-5701a895.js');
+
+const helperTabCss = ":host{display:block}.TabContent{font-size:14px;color:#000;font-weight:normal}";
+
+const HelperTab = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    /**
+     * Selected index
+     */
+    this.selectedIndex = 0;
+    this.tabContent = '';
+  }
+  connectedCallback() {
+    /**
+     * fetch(cmsEndpoint + / + / + selectedIndex)
+     */
+  }
+  render() {
+    this.tabContent = index.h("div", { class: "TabContent" }, "Each play includes one set of numbers from 1 to 21 with a selectable number of 8 and a second, 4-digit set of numbers, with a minimum selection of 1. Draws are held every 5 minutes and the winnings are automatically credited to your account.");
+    if (this.selectedIndex + 1 == 2) {
+      this.tabContent = index.h("div", { class: "TabContent" }, index.h("ol", null, index.h("li", null, "Register or Login"), index.h("li", null, "Buy tickets. Select 'Buy Tickets' to pick your numbers. Want us to automatically generate random numbers for you? Choose \u201CI feel lucky\u201D."), index.h("li", null, "Review and Complete your purchase. Once you've chosen your total number of plays, and confirmed your number of selections, review your ticket details and complete your purchase!")));
+    }
+    else if (this.selectedIndex + 1 == 3) {
+      this.tabContent = index.h("div", { class: "TabContent" }, index.h("ul", null, index.h("li", null, "What are my odds of winning?"), index.h("li", null, "How can I find out if I\u2019ve won a draw game?"), index.h("li", null, "How do I claim my prize?")));
+    }
+    return (this.tabContent);
+  }
+};
+HelperTab.style = helperTabCss;
+
+exports.helper_tab = HelperTab;

package/dist/cjs/helper-tabs.cjs.entry.js

@@ -0,0 +1,38 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-5701a895.js');
+
+const helperTabsCss = "@import url(\"https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap\");:host{display:block;font-family:\"Roboto\", sans-serif}.Tabs{display:flex;gap:10px;overflow-x:auto}.TabButton{cursor:pointer;width:auto;border-radius:4px;padding:8px 15px;margin:5px 0 10px;border:1px solid #009993;background:#FFF;color:#000;font-size:12px;transition:all 0.2s linear;text-align:center;letter-spacing:0;white-space:nowrap}.TabButton:hover{background:#F1F1F1}.TabButton.Active{background:#009993;color:#FFF}";
+
+const HelperTabs = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    /**
+     * Tell me if it is disabled
+     */
+    this.disabled = false;
+    /**
+   * Tell me what tab is selected
+   */
+    this.selected = false;
+    /**
+     * Default selected index
+     */
+    this.selectedIndex = 0;
+    /**
+     * Tabs details
+     */
+    this.tabs = [{ label: 'How to Play' }, { label: 'About' }, { label: 'FAQs' }];
+  }
+  connectedCallback() {
+  }
+  render() {
+    return (index.h("div", null, index.h("div", { class: "Tabs" }, this.tabs.map((tab, index$1) => index.h("button", { class: 'TabButton' + (this.selectedIndex == index$1 ? ' Active' : ''), onClick: () => this.selectedIndex = index$1 }, tab.label))), index.h("div", null, index.h("helper-tab", { selectedIndex: this.selectedIndex }))));
+  }
+  get host() { return index.getElement(this); }
+};
+HelperTabs.style = helperTabsCss;
+
+exports.helper_tabs = HelperTabs;

package/dist/cjs/{index-614098f4.js → index-5701a895.js}

@@ -50,7 +50,7 @@ const supportsConstructibleStylesheets = /*@__PURE__*/ (() => {
 const addHostEventListeners = (elm, hostRef, listeners, attachParentListeners) => {
     if (listeners) {
         listeners.map(([flags, name, method]) => {
-            const target = elm;
+            const target = getHostListenerTarget(elm, flags) ;
             const handler = hostListenerProxy(hostRef, method);
             const opts = hostListenerOpts(flags);
             plt.ael(target, name, handler, opts);
@@ -74,6 +74,13 @@ const hostListenerProxy = (hostRef, methodName) => (ev) => {
         consoleError(e);
     }
 };
+const getHostListenerTarget = (elm, flags) => {
+    if (flags & 4 /* TargetDocument */)
+        return doc;
+    if (flags & 8 /* TargetWindow */)
+        return win;
+    return elm;
+};
 // prettier-ignore
 const hostListenerOpts = (flags) => (flags & 2 /* Capture */) !== 0;
 const HYDRATED_CSS = '{visibility:hidden}.hydrated{visibility:inherit}';
@@ -619,6 +626,9 @@ const dispatchHooks = (hostRef, isInitialLoad) => {
             }
         }
     }
+    {
+        promise = then(promise, () => safeCall(instance, 'componentWillRender'));
+    }
     endSchedule();
     return then(promise, () => updateComponent(hostRef, instance, isInitialLoad));
 };
@@ -686,7 +696,11 @@ const postUpdateComponent = (hostRef) => {
     const tagName = hostRef.$cmpMeta$.$tagName$;
     const elm = hostRef.$hostElement$;
     const endPostUpdate = createTime('postUpdate', tagName);
+    const instance = hostRef.$lazyInstance$ ;
     const ancestorComponent = hostRef.$ancestorComponent$;
+    {
+        safeCall(instance, 'componentDidRender');
+    }
     if (!(hostRef.$flags$ & 64 /* hasLoadedComponent */)) {
         hostRef.$flags$ |= 64 /* hasLoadedComponent */;
         {
@@ -795,6 +809,7 @@ const getValue = (ref, propName) => getHostRef(ref).$instanceValues$.get(propNam
 const setValue = (ref, propName, newVal, cmpMeta) => {
     // check our new property value against our internal value
     const hostRef = getHostRef(ref);
+    const elm = hostRef.$hostElement$ ;
     const oldVal = hostRef.$instanceValues$.get(propName);
     const flags = hostRef.$flags$;
     const instance = hostRef.$lazyInstance$ ;
@@ -807,6 +822,22 @@ const setValue = (ref, propName, newVal, cmpMeta) => {
         // set our new value!
         hostRef.$instanceValues$.set(propName, newVal);
         if (instance) {
+            // get an array of method names of watch functions to call
+            if (cmpMeta.$watchers$ && flags & 128 /* isWatchReady */) {
+                const watchMethods = cmpMeta.$watchers$[propName];
+                if (watchMethods) {
+                    // this instance is watching for when this property changed
+                    watchMethods.map((watchMethodName) => {
+                        try {
+                            // fire off each of the watch methods that are watching this property
+                            instance[watchMethodName](newVal, oldVal, propName);
+                        }
+                        catch (e) {
+                            consoleError(e, elm);
+                        }
+                    });
+                }
+            }
             if ((flags & (2 /* hasRendered */ | 16 /* isQueuedForUpdate */)) === 2 /* hasRendered */) {
                 // looks like this value actually changed, so we've got work to do!
                 // but only if we've already rendered, otherwise just chill out
@@ -819,6 +850,9 @@ const setValue = (ref, propName, newVal, cmpMeta) => {
 };
 const proxyComponent = (Cstr, cmpMeta, flags) => {
     if (cmpMeta.$members$) {
+        if (Cstr.watchers) {
+            cmpMeta.$watchers$ = Cstr.watchers;
+        }
         // It's better to have a const than two Object.entries()
         const members = Object.entries(cmpMeta.$members$);
         const prototype = Cstr.prototype;
@@ -926,6 +960,12 @@ const initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId, Cstr) =>
                 endLoad();
             }
             if (!Cstr.isProxied) {
+                // we've never proxied this Constructor before
+                // let's add the getters/setters to its prototype before
+                // the first time we create an instance of the implementation
+                {
+                    cmpMeta.$watchers$ = Cstr.watchers;
+                }
                 proxyComponent(Cstr, cmpMeta, 2 /* proxyState */);
                 Cstr.isProxied = true;
             }
@@ -949,6 +989,9 @@ const initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId, Cstr) =>
             {
                 hostRef.$flags$ &= ~8 /* isConstructingInstance */;
             }
+            {
+                hostRef.$flags$ |= 128 /* isWatchReady */;
+            }
             endNewInstance();
             fireConnectedCallback(hostRef.$lazyInstance$);
         }
@@ -1078,6 +1121,9 @@ const bootstrapLazy = (lazyBundles, options = {}) => {
             {
                 cmpMeta.$attrsToReflect$ = [];
             }
+            {
+                cmpMeta.$watchers$ = {};
+            }
             const tagName = cmpMeta.$tagName$;
             const HostElement = class extends HTMLElement {
                 // StencilLazyHost