@everymatrix/lottery-game-page 0.1.0 → 0.1.4

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h } from './index-0fa076cd.js';
+import { r as registerInstance, c as createEvent, h } from './index-ade3d0ab.js';
 
 /**
  * @name isMobile

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

@@ -0,0 +1,184 @@
+import { r as registerInstance, c as createEvent, h } from './index-ade3d0ab.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) {
+    registerInstance(this, hostRef);
+    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));
+  }
+};
+HelperPagination.style = helperPaginationCss;
+
+export { HelperPagination as helper_pagination };

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, h } from './index-0fa076cd.js';
+import { r as registerInstance, h } from './index-ade3d0ab.js';
 
 const helperTabCss = ":host{display:block}.TabContent{font-size:14px;color:#000;font-weight:normal}";
 

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

@@ -0,0 +1,34 @@
+import { r as registerInstance, h, g as getElement } from './index-ade3d0ab.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) {
+    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 (h("div", null, h("div", { class: "Tabs" }, this.tabs.map((tab, index) => h("button", { class: 'TabButton' + (this.selectedIndex == index ? ' Active' : ''), onClick: () => this.selectedIndex = index }, tab.label))), h("div", null, h("helper-tab", { selectedIndex: this.selectedIndex }))));
+  }
+  get host() { return getElement(this); }
+};
+HelperTabs.style = helperTabsCss;
+
+export { HelperTabs as helper_tabs };

package/dist/esm/{index-0fa076cd.js → index-ade3d0ab.js}

@@ -28,7 +28,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);
@@ -52,6 +52,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}';
@@ -597,6 +604,9 @@ const dispatchHooks = (hostRef, isInitialLoad) => {
             }
         }
     }
+    {
+        promise = then(promise, () => safeCall(instance, 'componentWillRender'));
+    }
     endSchedule();
     return then(promise, () => updateComponent(hostRef, instance, isInitialLoad));
 };
@@ -664,7 +674,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 */;
         {
@@ -773,6 +787,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$ ;
@@ -785,6 +800,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
@@ -797,6 +828,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;
@@ -904,6 +938,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;
             }
@@ -927,6 +967,9 @@ const initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId, Cstr) =>
             {
                 hostRef.$flags$ &= ~8 /* isConstructingInstance */;
             }
+            {
+                hostRef.$flags$ |= 128 /* isWatchReady */;
+            }
             endNewInstance();
             fireConnectedCallback(hostRef.$lazyInstance$);
         }
@@ -1056,6 +1099,9 @@ const bootstrapLazy = (lazyBundles, options = {}) => {
             {
                 cmpMeta.$attrsToReflect$ = [];
             }
+            {
+                cmpMeta.$watchers$ = {};
+            }
             const tagName = cmpMeta.$tagName$;
             const HostElement = class extends HTMLElement {
                 // StencilLazyHost

package/dist/esm/loader.js

@@ -1,4 +1,4 @@
-import { p as promiseResolve, b as bootstrapLazy } from './index-0fa076cd.js';
+import { p as promiseResolve, b as bootstrapLazy } from './index-ade3d0ab.js';
 
 /*
  Stencil Client Patch Esm v2.15.2 | MIT Licensed | https://stenciljs.com
@@ -10,7 +10,7 @@ const patchEsm = () => {
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
   return patchEsm().then(() => {
-  return bootstrapLazy([["helper-tab",[[1,"helper-tab",{"selectedIndex":[2,"selected-index"],"cmsEndpoint":[1,"cms-endpoint"],"tabContent":[32]}]]],["helper-accordion_2",[[1,"helper-tabs",{"disabled":[4],"label":[1],"selected":[4],"cmsEndpoint":[1,"cms-endpoint"],"selectedIndex":[1538,"selected-index"],"tabs":[16]}],[1,"helper-accordion",{"ticketHistoryFlag":[4,"ticket-history-flag"],"headerTitle":[1,"header-title"],"headerSubtitle":[1,"header-subtitle"],"description":[1],"footer":[4],"deleteTab":[4,"delete-tab"],"postMessage":[4,"post-message"],"eventName":[1,"event-name"],"collapsed":[4],"language":[1],"showContent":[32]}]]],["lottery-game-details",[[1,"lottery-game-details"]]],["helper-modal",[[1,"helper-modal",{"titleModal":[1,"title-modal"],"visible":[1540]}]]],["lottery-game-page",[[1,"lottery-game-page",{"endpoint":[1],"gameId":[1,"game-id"],"playerId":[2,"player-id"],"sessionId":[1,"session-id"],"language":[1],"autoPick":[4,"auto-pick"],"resetButton":[4,"reset-button"],"tickets":[32],"tabIndex":[32],"hasErrors":[32],"totalAmount":[32],"successVisible":[32],"deleteVisible":[32],"deleteEventData":[32],"daysRemaining":[32],"hoursRemaining":[32],"minutesRemaining":[32],"secondsRemaining":[32],"latestDraw":[32],"totalWinningsAmount":[32],"nextDate":[32],"isLoggedIn":[32],"loginModalVisible":[32]},[[0,"ticketCompleted","gridFilledHandler"],[0,"gridDirty","gridDirtyHandler"],[0,"deleteTicket","deleteTicketHandler"],[0,"modalCloseEvent","modalCloseEvent"],[0,"stakeChange","stakeChangeHandler"],[0,"multiplierChange","multiplierChangeHandler"]]]]]], options);
+  return bootstrapLazy([["lottery-game-page",[[1,"lottery-game-page",{"endpoint":[1],"gameId":[1,"game-id"],"playerId":[2,"player-id"],"sessionId":[1,"session-id"],"language":[1],"autoPick":[4,"auto-pick"],"resetButton":[4,"reset-button"],"tickets":[32],"tabIndex":[32],"hasErrors":[32],"totalAmount":[32],"successVisible":[32],"deleteVisible":[32],"deleteEventData":[32],"daysRemaining":[32],"hoursRemaining":[32],"minutesRemaining":[32],"secondsRemaining":[32],"latestDraw":[32],"totalWinningsAmount":[32],"nextDate":[32],"isLoggedIn":[32],"loginModalVisible":[32]},[[0,"ticketCompleted","gridFilledHandler"],[0,"gridDirty","gridDirtyHandler"],[0,"deleteTicket","deleteTicketHandler"],[0,"modalCloseEvent","modalCloseEvent"],[0,"stakeChange","stakeChangeHandler"],[0,"multiplierChange","multiplierChangeHandler"]]]]],["helper-pagination",[[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]}]]],["lottery-bullet_2",[[1,"lottery-grid",{"ticketId":[2,"ticket-id"],"totalNumbers":[2,"total-numbers"],"gameId":[1,"game-id"],"maximumAllowed":[2,"maximum-allowed"],"minimumAllowed":[2,"minimum-allowed"],"selectable":[4],"selectedNumbers":[1,"selected-numbers"],"displaySelected":[4,"display-selected"],"language":[1],"gridIndex":[2,"grid-index"],"numbers":[32]},[[0,"lotteryBulletSelection","lotteryBulletSelectionHandler"],[4,"resetSelection","resetSelectionHandler"],[4,"autoSelection","autoSelectionHandler"]]],[1,"lottery-bullet",{"value":[1],"selectable":[4],"isSelected":[4,"is-selected"]}]]],["helper-filters_2",[[1,"lottery-draw-results",{"endpoint":[1],"gameId":[1,"game-id"],"language":[1],"playerId":[1,"player-id"],"drawMode":[4,"draw-mode"],"drawId":[1,"draw-id"],"gameName":[1,"game-name"],"ticketDate":[1,"ticket-date"],"ticketStatus":[1,"ticket-status"],"ticketId":[1,"ticket-id"],"ticketAmount":[1,"ticket-amount"],"ticketMultiplier":[4,"ticket-multiplier"],"ticketDrawCount":[2,"ticket-draw-count"],"multiplier":[32],"isLoading":[32],"drawResults":[32],"rules":[32],"toggleDrawer":[32],"hasErrors":[32],"errorText":[32]}],[1,"helper-filters",{"showFilterId":[4,"show-filter-id"],"activateTicketSearch":[4,"activate-ticket-search"],"gameId":[1,"game-id"],"playerId":[1,"player-id"],"session":[1],"postMessage":[4,"post-message"],"language":[1],"showFilterModal":[32],"showClearButton":[32],"filterData":[32],"filterDataReset":[32]},[[0,"modalCloseEvent","modalCloseEvent"]]]]],["lottery-draw-results-history",[[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"]]]]],["lottery-ticket",[[1,"lottery-ticket",{"endpoint":[1],"gameId":[1,"game-id"],"numberOfGrids":[2,"number-of-grids"],"multipleDraws":[4,"multiple-draws"],"ticketId":[2,"ticket-id"],"resetButton":[4,"reset-button"],"autoPick":[4,"auto-pick"],"language":[1],"multiplier":[32],"numberOfDraws":[32],"isLoading":[32],"hasErrors":[32],"ticketDone":[32],"isCustomSelect":[32],"amountInfo":[32]},[[8,"click","checkForClickOutside"],[0,"gridFilled","gridFilledHandler"]]]]],["lottery-ticket-controller",[[1,"lottery-ticket-controller",{"endpoint":[1],"ticketId":[2,"ticket-id"],"ticketDescription":[1,"ticket-description"],"gameId":[1,"game-id"],"postMessage":[4,"post-message"],"eventName":[1,"event-name"],"collapsed":[4],"numberOfGrids":[2,"number-of-grids"],"last":[4],"language":[1],"autoPick":[4,"auto-pick"],"resetButton":[4,"reset-button"]},[[0,"helperAccordionAction","helperAccordionActionHandler"]]]]],["helper-tabs",[[1,"helper-tabs",{"disabled":[4],"label":[1],"selected":[4],"cmsEndpoint":[1,"cms-endpoint"],"selectedIndex":[1538,"selected-index"],"tabs":[16]}]]],["helper-accordion",[[1,"helper-accordion",{"ticketHistoryFlag":[4,"ticket-history-flag"],"headerTitle":[1,"header-title"],"headerSubtitle":[1,"header-subtitle"],"description":[1],"footer":[4],"deleteTab":[4,"delete-tab"],"postMessage":[4,"post-message"],"eventName":[1,"event-name"],"collapsed":[4],"language":[1],"showContent":[32]}]]],["helper-tab",[[1,"helper-tab",{"selectedIndex":[2,"selected-index"],"cmsEndpoint":[1,"cms-endpoint"],"tabContent":[32]}]]],["lottery-game-details",[[1,"lottery-game-details"]]],["helper-modal",[[1,"helper-modal",{"titleModal":[1,"title-modal"],"visible":[1540]}]]]], options);
   });
 };
 

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

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