@everymatrix/lottery-draw-results 0.1.24 → 1.15.0

package/dist/cjs/{index-43800d3c.js → index-40e6760b.js}

@@ -557,9 +557,14 @@ const callNodeRefs = (vNode) => {
 };
 const renderVdom = (hostRef, renderFnResults) => {
     const hostElm = hostRef.$hostElement$;
+    const cmpMeta = hostRef.$cmpMeta$;
     const oldVNode = hostRef.$vnode$ || newVNode(null, null);
     const rootVnode = isHost(renderFnResults) ? renderFnResults : h(null, null, renderFnResults);
     hostTagName = hostElm.tagName;
+    if (cmpMeta.$attrsToReflect$) {
+        rootVnode.$attrs$ = rootVnode.$attrs$ || {};
+        cmpMeta.$attrsToReflect$.map(([propName, attribute]) => (rootVnode.$attrs$[attribute] = hostElm[propName]));
+    }
     rootVnode.$tag$ = null;
     rootVnode.$flags$ |= 4 /* isHost */;
     hostRef.$vnode$ = rootVnode;
@@ -629,6 +634,9 @@ const dispatchHooks = (hostRef, isInitialLoad) => {
             }
         }
     }
+    {
+        promise = then(promise, () => safeCall(instance, 'componentWillRender'));
+    }
     endSchedule();
     return then(promise, () => updateComponent(hostRef, instance, isInitialLoad));
 };
@@ -914,6 +922,9 @@ const proxyComponent = (Cstr, cmpMeta, flags) => {
                 .map(([propName, m]) => {
                 const attrName = m[1] || propName;
                 attrNameToPropName.set(attrName, propName);
+                if (m[0] & 512 /* ReflectAttr */) {
+                    cmpMeta.$attrsToReflect$.push([propName, attrName]);
+                }
                 return attrName;
             });
         }
@@ -1082,6 +1093,9 @@ const bootstrapLazy = (lazyBundles, options = {}) => {
             {
                 cmpMeta.$listeners$ = compactMeta[3];
             }
+            {
+                cmpMeta.$attrsToReflect$ = [];
+            }
             const tagName = cmpMeta.$tagName$;
             const HostElement = class extends HTMLElement {
                 // StencilLazyHost

package/dist/cjs/loader.cjs.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-43800d3c.js');
+const index = require('./index-40e6760b.js');
 
 /*
  Stencil Client Patch Esm v2.15.2 | MIT Licensed | https://stenciljs.com
@@ -14,7 +14,7 @@ const patchEsm = () => {
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
   return patchEsm().then(() => {
-  return index.bootstrapLazy([["lottery-bullet_3.cjs",[[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"],"ticketNumbers":[1,"ticket-numbers"],"sessionId":[1,"session-id"],"clientStyling":[1,"client-styling"],"clientStylingUrlContent":[1,"client-styling-url-content"],"multiplier":[32],"isLoading":[32],"rules":[32],"toggleDrawer":[32],"hasErrors":[32],"errorText":[32],"ticketData":[32],"ticketDataLoaded":[32],"ticketDraws":[32],"hasDrawNumbers":[32],"limitStylingAppends":[32]}],[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"],"gridType":[1,"grid-type"],"clientStyling":[1,"client-styling"],"clientStylingUrlContent":[1,"client-styling-url-content"],"numbers":[32],"limitStylingAppends":[32]},[[0,"lotteryBulletSelection","lotteryBulletSelectionHandler"],[4,"resetSelection","resetSelectionHandler"],[4,"autoSelection","autoSelectionHandler"]]],[1,"lottery-bullet",{"value":[1],"selectable":[4],"isSelected":[4,"is-selected"],"clientStyling":[1,"client-styling"],"clientStylingUrlContent":[1,"client-styling-url-content"],"limitStylingAppends":[32]}]]]], options);
+  return index.bootstrapLazy([["lottery-bullet_3.cjs",[[1,"lottery-draw-results",{"endpoint":[513],"gameId":[513,"game-id"],"language":[513],"playerId":[513,"player-id"],"drawMode":[516,"draw-mode"],"drawId":[513,"draw-id"],"gameName":[513,"game-name"],"ticketDate":[513,"ticket-date"],"ticketStatus":[513,"ticket-status"],"ticketId":[513,"ticket-id"],"ticketAmount":[513,"ticket-amount"],"ticketMultiplier":[516,"ticket-multiplier"],"ticketDrawCount":[514,"ticket-draw-count"],"ticketNumbers":[513,"ticket-numbers"],"sessionId":[513,"session-id"],"clientStyling":[513,"client-styling"],"clientStylingUrlContent":[513,"client-styling-url-content"],"ticketDrawData":[513,"ticket-draw-data"],"multiplier":[32],"isLoading":[32],"hasErrors":[32],"errorText":[32],"ticketData":[32],"ticketDataLoaded":[32],"ticketDraws":[32],"toggleDrawer":[32],"limitStylingAppends":[32],"drawData":[32]}],[1,"lottery-grid",{"ticketId":[514,"ticket-id"],"totalNumbers":[514,"total-numbers"],"gameId":[513,"game-id"],"maximumAllowed":[514,"maximum-allowed"],"minimumAllowed":[514,"minimum-allowed"],"selectable":[516],"selectedNumbers":[513,"selected-numbers"],"displaySelected":[516,"display-selected"],"language":[513],"gridIndex":[514,"grid-index"],"gridType":[513,"grid-type"],"clientStyling":[513,"client-styling"],"clientStylingUrlContent":[513,"client-styling-url-content"],"numbers":[32],"limitStylingAppends":[32]},[[0,"lotteryBulletSelection","lotteryBulletSelectionHandler"],[4,"resetSelection","resetSelectionHandler"],[4,"autoSelection","autoSelectionHandler"]]],[1,"lottery-bullet",{"value":[513],"selectable":[516],"isSelected":[516,"is-selected"],"clientStyling":[513,"client-styling"],"clientStylingUrlContent":[513,"client-styling-url-content"],"limitStylingAppends":[32]}]]]], options);
   });
 };
 

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-43800d3c.js');
+const index = require('./index-40e6760b.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}";
 
@@ -147,7 +147,7 @@ const translate = (key, customLang) => {
   return TRANSLATIONS[lang !== undefined && SUPPORTED_LANGUAGES.includes(lang) ? lang : DEFAULT_LANGUAGE][key];
 };
 
-const lotteryDrawResultsCss = "@import url(\"https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap\");:host{display:block;font-family:\"Roboto\", sans-serif}.TicketInfo{display:flex;flex-direction:row;gap:15px;background-color:#009993;color:#fff;padding:12px;font-size:14px}.DrawResultsArea{margin-top:15px}.DrawResultsArea.TicketDraws .Content{padding:0;border:0}.DrawResultsArea.TicketDraws .DrawResultsBody{padding:0;margin-bottom:5px;border-radius:0;border:0}.DrawResultsSection{max-width:600px;margin:0px auto;border-radius:4px}.DrawResultsHeader{display:flex;justify-content:space-between;padding:10px 20px;background-color:#009993;color:#fff;font-size:14px;border-radius:4px 4px 0 0}.DrawResultsHeader h4{text-transform:uppercase;font-weight:400;margin:0;padding-top:15px}.DrawResultsBody{padding:20px;margin-bottom:5px;border-radius:0 0 4px 4px;border:1px solid #009993}.DrawResultsBody>div{margin:10px 0}.DrawResultsBody .NumberOfDrawsContainer{display:table;width:100%}.DrawNumbersGrid{margin-bottom:15px}.DrawNumbersGrid label{display:block;margin-bottom:10px}.Toggle{cursor:pointer;display:inline-block}.ToggleSwitch{display:inline-block;background:#ccc;border-radius:16px;width:58px;height:24px;position:relative;vertical-align:middle;transition:background 0.25s}.ToggleSwitch:before,.ToggleSwitch:after{content:\"\"}.ToggleSwitch:before{display:block;background:linear-gradient(to bottom, #fff 0%, #eee 100%);border-radius:50%;box-shadow:0 0 0 1px rgba(0, 0, 0, 0.25);width:16px;height:16px;position:absolute;top:4px;left:4px;transition:left 0.25s}.Toggle:hover .ToggleSwitch:before{background:linear-gradient(to bottom, #fff 0%, #fff 100%);box-shadow:0 0 0 1px rgba(0, 0, 0, 0.5)}.ToggleCheckbox:checked+.ToggleSwitch{background:#56c080}.ToggleCheckbox:checked+.ToggleSwitch:before{left:38px}.ToggleCheckbox{position:absolute;visibility:hidden}.Label{position:relative}.DrawTicketsContainer{display:flex;flex-direction:column;margin:20px auto 0}.DrawMultipler{margin-top:15px}.ExpandableBoxes{position:relative;display:flex;flex-direction:column}.ExpandableBox{line-height:12px;font-weight:lighter;width:100%;height:100%;max-height:80px;float:left;margin:0 0 20px 0;border:1px solid #009993;background:#fff;border-radius:4px;padding:10px;box-sizing:border-box;-webkit-transition:all 0.6s ease-in-out;-moz-transition:all 0.6s ease-in-out;-o-transition:all 0.6s ease-in-out;-ms-transition:all 0.6s ease-in-out;transition:all 0.6s ease-in-out;overflow:hidden;box-shadow:rgba(99, 99, 99, 0.2) 0px 2px 8px 0px}.ExpandableBox:last-of-type{margin-bottom:0}.ExpandableBox.ShowBox{max-height:400px;margin:0px 0px 20p 0px}.ExpandableBox.HideBox{width:0;height:0;overflow:hidden;border:none;padding:0;margin:0;opacity:0}";
+const lotteryDrawResultsCss = "@import url(\"https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap\");:host{display:block;font-family:\"Roboto\", sans-serif}.TicketInfo{display:flex;flex-direction:row;gap:15px;background-color:#009993;color:#fff;padding:12px;font-size:14px}.DrawResultsArea{margin-top:15px}.DrawResultsArea.TicketDraws .Content{padding:0;border:0}.DrawResultsArea.TicketDraws .DrawResultsBody{padding:0;margin-bottom:5px;border-radius:0;border:0}.DrawResultsSection{max-width:600px;margin:0px auto;border-radius:4px}.DrawResultsHeader{display:flex;justify-content:space-between;padding:10px 20px;background-color:#009993;color:#fff;font-size:14px;border-radius:4px 4px 0 0}.DrawResultsHeader h4{text-transform:uppercase;font-weight:400;margin:0;padding-top:15px}.DrawResultsBody{padding:20px;margin-bottom:5px;border-radius:0 0 4px 4px;border:1px solid #009993}.DrawResultsBody>div{margin:10px 0}.DrawResultsBody .NumberOfDrawsContainer{display:table;width:100%}.DrawNumbersGrid{display:flex;flex-direction:column;gap:5px}.DrawNumbersGrid label{display:block;margin-bottom:7px}.Toggle{cursor:pointer;display:inline-block}.ToggleSwitch{display:inline-block;background:#ccc;border-radius:16px;width:58px;height:24px;position:relative;vertical-align:middle;transition:background 0.25s}.ToggleSwitch:before,.ToggleSwitch:after{content:\"\"}.ToggleSwitch:before{display:block;background:linear-gradient(to bottom, #fff 0%, #eee 100%);border-radius:50%;box-shadow:0 0 0 1px rgba(0, 0, 0, 0.25);width:16px;height:16px;position:absolute;top:4px;left:4px;transition:left 0.25s}.Toggle:hover .ToggleSwitch:before{background:linear-gradient(to bottom, #fff 0%, #fff 100%);box-shadow:0 0 0 1px rgba(0, 0, 0, 0.5)}.ToggleCheckbox:checked+.ToggleSwitch{background:#56c080}.ToggleCheckbox:checked+.ToggleSwitch:before{left:38px}.ToggleCheckbox{position:absolute;visibility:hidden}.Label{position:relative}.DrawTicketsContainer{display:flex;flex-direction:column;margin:20px auto 0}.DrawMultipler{margin-top:15px}.ExpandableBoxes{position:relative;display:flex;flex-direction:column;border:1px solid #ccc;border-radius:5px;background-color:white}.ExpandableBox{border-bottom:1px solid #ccc;transition:height 300ms ease-in-out;overflow:hidden;height:80px}.ExpandableBox:last-child{border-bottom:0}.ExpandableBoxHeader{position:relative;list-style:none;outline:0;cursor:pointer;text-transform:uppercase;transition:color 300ms ease-in-out;margin-bottom:24px;margin-left:5px}.ShowBox>.ExpandableBoxHeader{color:#009993}.ExpandableBoxHeader::-webkit-details-marker{display:none}.ExpandableBoxHeader:before,.ExpandableBoxHeader:after{content:\"\";position:absolute}.ExpandableBoxHeader:before{right:21px;top:50%;height:2px;margin-top:-1px;width:16px;background:#009993}.ExpandableBoxHeader:after{right:28px;top:50%;height:16px;margin-top:-8px;width:2px;margin-left:-1px;background:#009993;transition:all 300ms ease-in-out}.ShowBox .ExpandableBoxHeader:after{opacity:0;transform:translateY(25%)}.ExpandableBoxBody{padding-top:0;font-weight:lighter;margin-left:5px}.ExpandableBox.ShowBox{height:300px}";
 
 const LotteryDrawResults = class {
   constructor(hostRef) {
@@ -208,78 +208,21 @@ const LotteryDrawResults = class {
      * Client custom styling via url content
      */
     this.clientStylingUrlContent = '';
+    /**
+     * Data showing the ticket's draw results details
+     */
+    this.ticketDrawData = '';
     this.multiplier = 3;
     this.isLoading = true;
-    this.rules = {};
-    this.toggleDrawer = [false];
     this.hasErrors = false;
     this.errorText = '';
     this.ticketData = [];
     this.ticketDataLoaded = false;
     this.ticketDraws = [];
-    this.hasDrawNumbers = false;
+    this.toggleDrawer = [false];
     this.limitStylingAppends = false;
-    this.getTicketsData = () => {
-      let url = new URL(`${this.endpoint}/tickets`);
-      let drawOptions = {
-        method: "GET",
-        headers: {
-          'Content-Type': "application/json",
-          'Accept': 'application/json',
-          'Authorization': `Bearer ${this.sessionId}`
-        },
-      };
-      fetch(url.href, drawOptions)
-        .then((response) => {
-        return response.json();
-      })
-        .then((data) => {
-        if (data) {
-          this.ticketData = data;
-          this.ticketDataLoaded = true;
-        }
-        return this.ticketData;
-      })
-        .then((response) => {
-        response.forEach(ticket => {
-          if (ticket.drawResults.length) {
-            ticket.drawResults.forEach(draw => {
-              fetch(`${this.endpoint}/games/${this.gameId}/draws/${draw.drawId}`)
-                .then((response) => {
-                return response.json();
-              })
-                .then((data) => {
-                // check if draw id is unique
-                if (!this.ticketDraws.some(el => el.drawId === draw.drawId)) {
-                  this.ticketDraws.push({ drawId: draw.drawId, drawNumbers: data.winningNumbers });
-                }
-              })
-                .catch((err) => {
-                console.log('error ', err);
-              });
-            });
-          }
-          return this.ticketDraws;
-        });
-      })
-        .then(() => {
-        this.hasDrawNumbers = true;
-      })
-        .catch((err) => {
-        console.log('error ', err);
-      });
-    };
-    this.changeBox = (index) => {
-      this.toggleDrawer = this.toggleDrawer.map((item, itemIndex) => {
-        if (itemIndex == index) {
-          return !item;
-        }
-        return item;
-      });
-      if (index >= this.toggleDrawer.length) {
-        this.toggleDrawer.push(true);
-      }
-    };
+    this.ticketDrawDetails = [];
+    this.ticketDrawDetailsFlag = true;
     this.setClientStyling = () => {
       let sheet = document.createElement('style');
       sheet.innerHTML = this.clientStyling;
@@ -295,13 +238,13 @@ const LotteryDrawResults = class {
   }
   connectedCallback() {
     let promises = [];
-    promises.push(this.getGameData());
+    // Split ticket numbers for each grid
+    if (this.ticketNumbers) {
+      this.gridNumbers = JSON.parse(this.ticketNumbers);
+    }
     if (this.drawId) {
       promises.push(this.getDrawData());
     }
-    if (!this.drawMode) {
-      this.getTicketsData();
-    }
     Promise.all(promises)
       .then(() => {
       this.isLoading = false;
@@ -310,6 +253,15 @@ const LotteryDrawResults = class {
       this.isLoading = false;
     });
   }
+  componentWillRender() {
+    if (this.ticketDrawData && this.ticketDrawDetailsFlag) {
+      this.ticketDrawDetails = JSON.parse(this.ticketDrawData);
+      this.ticketDrawDetails.forEach((drawDetail) => {
+        this.getDrawData(drawDetail.drawId).then((drawData) => drawDetail.drawData = drawData);
+      });
+      this.ticketDrawDetailsFlag = false;
+    }
+  }
   componentDidRender() {
     // start custom styling area
     if (!this.limitStylingAppends && this.stylingContainer) {
@@ -321,21 +273,24 @@ const LotteryDrawResults = class {
     }
     // end custom styling area
   }
-  getDrawData(drawID) {
+  getDrawData(drawId) {
+    this.isLoading = true;
     return new Promise((resolve, reject) => {
-      let url = new URL(`${this.endpoint}/games/${this.gameId}/draws/${drawID ? drawID : this.drawId}`);
+      let url = new URL(`${this.endpoint}/games/${this.gameId}/draws/${drawId ? drawId : this.drawId}`);
       fetch(url.href)
         .then((response) => {
         // @TODO EXCEPTIONS
         return response.json();
       })
         .then((data) => {
-        this.drawData = data;
-        resolve(true);
-        this.isLoading = false;
-        if (drawID) {
-          return this.drawData.winningNumbers;
+        if (drawId) {
+          resolve(data);
+        }
+        else {
+          this.drawData = data;
+          resolve(true);
         }
+        this.isLoading = false;
       })
         .catch((err) => {
         reject(err);
@@ -343,29 +298,16 @@ const LotteryDrawResults = class {
       });
     });
   }
-  getGameData() {
-    return new Promise((resolve, reject) => {
-      let url = new URL(`${this.endpoint}/games/${this.gameId}`);
-      fetch(url.href)
-        .then((response) => {
-        return response.json();
-      })
-        .then((data) => {
-        this.rules = {
-          maximumAllowed: data.rules.boards[0].maximumAllowed,
-          totalNumbers: data.rules.boards[0].totalNumbers
-        };
-        resolve(true);
-        this.isLoading = false;
-        this.hasErrors = false;
-      })
-        .catch((err) => {
-        this.isLoading = false;
-        this.hasErrors = true;
-        this.errorText = err;
-        reject(err);
-      });
+  drawerToggle(index) {
+    this.toggleDrawer = this.toggleDrawer.map((item, itemIndex) => {
+      if (itemIndex == index) {
+        return !item;
+      }
+      return item;
     });
+    if (index >= this.toggleDrawer.length) {
+      this.toggleDrawer.push(true);
+    }
   }
   render() {
     if (this.isLoading) {
@@ -377,14 +319,19 @@ const LotteryDrawResults = class {
     else {
       return (index.h("section", { class: "DrawResultsSection", ref: el => this.stylingContainer = el }, this.drawMode ?
         index.h("div", { class: "DrawResultsArea" }, this.drawData &&
-          index.h("div", null, index.h("div", { class: "DrawResultsHeader" }, index.h("span", null, translate('drawId', this.language), ":  ", this.drawData.id), index.h("span", null, translate('drawDate', this.language), ": ", this.drawData.date.slice(0, 10))), index.h("div", { class: "DrawResultsBody" }, index.h("div", { class: "DrawNumbersGrid" }, index.h("p", null, translate('drawNumbersGridDraw', this.language), "0:"), index.h("div", { class: "BulletContainer" }, index.h("lottery-grid", { "maximum-allowed": this.rules.maximumAllowed, "total-numbers": this.rules.totalNumbers, "selected-numbers": this.drawData.winningNumbers.join(','), "display-selected": true, selectable: false, language: this.language, "grid-type": 'ticket', "client-styling": this.clientStyling, "client-styling-url-content": this.clientStylingUrlContent })), index.h("div", { class: "DrawMultipler" }, index.h("label", { class: "Label" }, translate('multiplier', this.language), " ", this.multiplier))))))
+          index.h("div", null, index.h("div", { class: "DrawResultsHeader" }, index.h("span", null, translate('drawId', this.language), ":  ", this.drawData.id), index.h("span", null, translate('drawDate', this.language), ": ", this.drawData.date.slice(0, 10))), index.h("div", { class: "DrawResultsBody" }, index.h("div", { class: "DrawNumbersGrid" }, index.h("p", null, translate('drawNumbersGridDraw', this.language), "0:"), index.h("div", { class: "BulletContainer" }, index.h("lottery-grid", { "selected-numbers": this.drawData.winningNumbers.join(','), "display-selected": true, selectable: false, language: this.language, "grid-type": 'ticket', "client-styling": this.clientStyling, "client-styling-url-content": this.clientStylingUrlContent })), index.h("div", { class: "DrawMultipler" }, index.h("label", { class: "Label" }, translate('multiplier', this.language), " ", this.multiplier))))))
         :
-          index.h("div", { class: "DrawResultsArea TicketDraws" }, index.h("div", { class: "DrawResultsBody" }, index.h("div", { class: "TicketIdContainer" }, index.h("label", { class: "Label" }, translate('ticketId', this.language), ": ", index.h("span", null, this.ticketId))), index.h("div", { class: "TicketAmountContainer" }, index.h("label", { class: "Label" }, translate('ticketAmount', this.language), " ", index.h("span", null, this.ticketAmount))), index.h("div", { class: "DrawNumbersGrid" }, index.h("label", { class: "Label" }, translate('drawNumbersGridTicket', this.language), "0:"), index.h("div", { class: "BulletContainer" }, index.h("lottery-grid", { "maximum-allowed": this.rules.maximumAllowed, "total-numbers": this.rules.totalNumbers, "selected-numbers": JSON.parse(this.ticketNumbers).join(','), selectable: false, "display-selected": true, language: this.language, "grid-type": 'ticket', "client-styling": this.clientStyling, "client-styling-url-content": this.clientStylingUrlContent }))), index.h("div", { class: "DrawMultipler" }, index.h("label", { class: "Label" }, translate('multiplier', this.language), " ", JSON.stringify(this.ticketMultiplier))), index.h("div", { class: "NumberOfDrawsContainer" }, index.h("label", { class: "Label" }, translate('numberOfDraws', this.language), ": ", this.ticketDrawCount), index.h("div", { class: "DrawTicketsContainer" }, this.ticketData.map((ticket) => index.h("div", { class: "ExpandableBoxes" }, ticket.drawResults.length ?
-            index.h("div", null, ticket.id == this.ticketId && ticket.drawResults.map((item, index$1) => index.h("div", { class: this.toggleDrawer[index$1] ? 'ExpandableBox ShowBox' : 'ExpandableBox', onClick: () => this.changeBox(index$1) }, index.h("div", { class: "TicketResultContainer" }, index.h("p", null, translate('ticketResult', this.language), ": ", item.state)), item.state == 'won' &&
-              index.h("div", { class: "AmountWonContainer" }, index.h("p", null, translate('amountWon', this.language), ": ", Number(item.amount).toLocaleString('en'), " ", item.currency)), index.h("div", { class: "DrawIdContainer" }, index.h("p", null, translate('drawId', this.language), ": ", item.drawId)), index.h("div", { class: "DrawDateContainer" }, index.h("p", null, translate('drawDate', this.language), ": ", item.updatedAt.slice(0, 10), " | ", item.updatedAt.slice(11, 19))), index.h("div", { class: "DrawNumbersGrid" }, this.hasDrawNumbers && this.ticketDraws.map((ticketDraw) => item.drawId && item.drawId === ticketDraw.drawId &&
-              index.h("div", null, index.h("label", { class: "Label" }, translate('drawNumbersGridDraw', this.language), "A:"), index.h("lottery-grid", { "maximum-allowed": this.rules.maximumAllowed, "total-numbers": this.rules.totalNumbers, "selected-numbers": ticketDraw.drawNumbers.join(','), selectable: false, "display-selected": true, language: this.language, "grid-type": 'ticket', "client-styling": this.clientStyling, "client-styling-url-content": this.clientStylingUrlContent })))), index.h("div", { class: "DrawMultipler" }, index.h("label", { class: "Label" }, translate('multiplier', this.language), " ", item.multiplier)))))
-            :
-              index.h("span", null)))))))));
+          index.h("div", { class: "DrawResultsArea TicketDraws" }, index.h("div", { class: "DrawResultsBody" }, index.h("div", { class: "TicketIdContainer" }, index.h("label", { class: "Label" }, translate('ticketId', this.language), ": ", index.h("span", null, this.ticketId))), index.h("div", { class: "TicketAmountContainer" }, index.h("label", { class: "Label" }, translate('ticketAmount', this.language), " ", index.h("span", null, this.ticketAmount))), index.h("div", { class: "DrawNumbersGrid" }, this.gridNumbers.map((grid, index$1) => index.h("div", null, index.h("label", { class: "Label" }, translate('drawNumbersGridTicket', this.language), " ", String.fromCharCode(index$1 + 65), ":"), index.h("div", { class: "BulletContainer" }, index.h("lottery-grid", { "selected-numbers": grid.join(','), selectable: false, "display-selected": true, language: this.language, "grid-type": 'ticket', "client-styling": this.clientStyling, "client-styling-url-content": this.clientStylingUrlContent }))))), index.h("div", { class: "DrawMultipler" }, index.h("label", { class: "Label" }, translate('multiplier', this.language), " ", JSON.stringify(this.ticketMultiplier))), index.h("div", { class: "NumberOfDrawsContainer" }, index.h("label", { class: "Label" }, translate('numberOfDraws', this.language), ": ", this.ticketDrawCount), index.h("div", { class: "DrawTicketsContainer" }, this.ticketDrawDetails && this.ticketDrawDetails.length > 0 &&
+            index.h("div", { class: "ExpandableBoxes" }, this.ticketDrawDetails.map((drawDetail, index$1) => {
+              var _a, _b, _c, _d, _e;
+              return index.h("div", { class: { 'ExpandableBox': true, 'ShowBox': this.toggleDrawer[index$1] }, onClick: () => this.drawerToggle(index$1) }, index.h("div", { class: "ExpandableBoxHeader" }, index.h("div", { class: "TicketResultContainer" }, index.h("p", null, translate('ticketResult', this.language), ": ", drawDetail.state)), drawDetail.state == 'won' &&
+                index.h("div", { class: "AmountWonContainer" }, index.h("p", null, translate('amountWon', this.language), ": ", Number(drawDetail.amount).toLocaleString('en'), " ", drawDetail.currency)), drawDetail.state == 'lost' &&
+                index.h("div", { class: "DrawIdContainer" }, index.h("p", null, translate('drawId', this.language), ": ", drawDetail.drawId))), index.h("div", { class: "ExpandableBoxBody" }, index.h("div", { class: "DrawIdContainer" }, index.h("p", null, translate('drawId', this.language), ": ", drawDetail.drawId)), index.h("div", { class: "DrawDateContainer" }, index.h("p", null, translate('drawDate', this.language), ": ", (_a = drawDetail.drawData) === null || _a === void 0 ? void 0 :
+                _a.date.slice(0, 10), " | ", (_b = drawDetail.drawData) === null || _b === void 0 ? void 0 :
+                _b.date.slice(11, 19))), index.h("div", { class: "DrawNumbersGrid" }, drawDetail.drawData &&
+                index.h("div", { class: 'BulletContainer' }, index.h("label", { class: "Label" }, translate('drawNumbersGridDraw', this.language), " ", String.fromCharCode(index$1 + 10), ":"), index.h("lottery-grid", { "selected-numbers": (_d = (_c = drawDetail.drawData) === null || _c === void 0 ? void 0 : _c.winningNumbers) === null || _d === void 0 ? void 0 : _d.join(','), selectable: false, "display-selected": true, language: this.language, "grid-type": 'ticket', "client-styling": this.clientStyling, "client-styling-url-content": this.clientStylingUrlContent }))), index.h("div", { class: "DrawMultipler" }, index.h("label", { class: "Label" }, translate('multiplier', this.language), " ", (_e = drawDetail.drawData) === null || _e === void 0 ? void 0 :
+                _e.multiplier))));
+            }))))))));
     }
   }
 };
@@ -491,6 +438,15 @@ const LotteryGrid = class {
     }
     // 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) {
@@ -562,8 +518,8 @@ const LotteryGrid = class {
     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());
+        .map(number => number + 1);
+      array = this.shuffleArray(array);
       array = array.slice(0, this.minimumAllowed);
       this.numbers = this.numbers.map((item) => {
         return {

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

@@ -1,6 +1,6 @@
 'use strict';
 
-const index = require('./index-43800d3c.js');
+const index = require('./index-40e6760b.js');
 
 /*
  Stencil Client Patch Browser v2.15.2 | MIT Licensed | https://stenciljs.com
@@ -15,5 +15,5 @@ const patchBrowser = () => {
 };
 
 patchBrowser().then(options => {
-  return index.bootstrapLazy([["lottery-bullet_3.cjs",[[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"],"ticketNumbers":[1,"ticket-numbers"],"sessionId":[1,"session-id"],"clientStyling":[1,"client-styling"],"clientStylingUrlContent":[1,"client-styling-url-content"],"multiplier":[32],"isLoading":[32],"rules":[32],"toggleDrawer":[32],"hasErrors":[32],"errorText":[32],"ticketData":[32],"ticketDataLoaded":[32],"ticketDraws":[32],"hasDrawNumbers":[32],"limitStylingAppends":[32]}],[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"],"gridType":[1,"grid-type"],"clientStyling":[1,"client-styling"],"clientStylingUrlContent":[1,"client-styling-url-content"],"numbers":[32],"limitStylingAppends":[32]},[[0,"lotteryBulletSelection","lotteryBulletSelectionHandler"],[4,"resetSelection","resetSelectionHandler"],[4,"autoSelection","autoSelectionHandler"]]],[1,"lottery-bullet",{"value":[1],"selectable":[4],"isSelected":[4,"is-selected"],"clientStyling":[1,"client-styling"],"clientStylingUrlContent":[1,"client-styling-url-content"],"limitStylingAppends":[32]}]]]], options);
+  return index.bootstrapLazy([["lottery-bullet_3.cjs",[[1,"lottery-draw-results",{"endpoint":[513],"gameId":[513,"game-id"],"language":[513],"playerId":[513,"player-id"],"drawMode":[516,"draw-mode"],"drawId":[513,"draw-id"],"gameName":[513,"game-name"],"ticketDate":[513,"ticket-date"],"ticketStatus":[513,"ticket-status"],"ticketId":[513,"ticket-id"],"ticketAmount":[513,"ticket-amount"],"ticketMultiplier":[516,"ticket-multiplier"],"ticketDrawCount":[514,"ticket-draw-count"],"ticketNumbers":[513,"ticket-numbers"],"sessionId":[513,"session-id"],"clientStyling":[513,"client-styling"],"clientStylingUrlContent":[513,"client-styling-url-content"],"ticketDrawData":[513,"ticket-draw-data"],"multiplier":[32],"isLoading":[32],"hasErrors":[32],"errorText":[32],"ticketData":[32],"ticketDataLoaded":[32],"ticketDraws":[32],"toggleDrawer":[32],"limitStylingAppends":[32],"drawData":[32]}],[1,"lottery-grid",{"ticketId":[514,"ticket-id"],"totalNumbers":[514,"total-numbers"],"gameId":[513,"game-id"],"maximumAllowed":[514,"maximum-allowed"],"minimumAllowed":[514,"minimum-allowed"],"selectable":[516],"selectedNumbers":[513,"selected-numbers"],"displaySelected":[516,"display-selected"],"language":[513],"gridIndex":[514,"grid-index"],"gridType":[513,"grid-type"],"clientStyling":[513,"client-styling"],"clientStylingUrlContent":[513,"client-styling-url-content"],"numbers":[32],"limitStylingAppends":[32]},[[0,"lotteryBulletSelection","lotteryBulletSelectionHandler"],[4,"resetSelection","resetSelectionHandler"],[4,"autoSelection","autoSelectionHandler"]]],[1,"lottery-bullet",{"value":[513],"selectable":[516],"isSelected":[516,"is-selected"],"clientStyling":[513,"client-styling"],"clientStylingUrlContent":[513,"client-styling-url-content"],"limitStylingAppends":[32]}]]]], options);
 });

package/dist/collection/components/lottery-draw-results/lottery-draw-results.css

@@ -65,11 +65,13 @@
 }
 
 .DrawNumbersGrid {
-  margin-bottom: 15px;
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
 }
 .DrawNumbersGrid label {
   display: block;
-  margin-bottom: 10px;
+  margin-bottom: 7px;
 }
 
 .Toggle {
@@ -139,44 +141,67 @@
   position: relative;
   display: flex;
   flex-direction: column;
+  border: 1px solid #ccc;
+  border-radius: 5px;
+  background-color: white;
 }
 
 .ExpandableBox {
-  line-height: 12px;
-  font-weight: lighter;
-  width: 100%;
-  height: 100%;
-  max-height: 80px;
-  float: left;
-  margin: 0 0 20px 0;
-  border: 1px solid #009993;
-  background: #fff;
-  border-radius: 4px;
-  padding: 10px;
-  box-sizing: border-box;
-  -webkit-transition: all 0.6s ease-in-out;
-  -moz-transition: all 0.6s ease-in-out;
-  -o-transition: all 0.6s ease-in-out;
-  -ms-transition: all 0.6s ease-in-out;
-  transition: all 0.6s ease-in-out;
+  border-bottom: 1px solid #ccc;
+  transition: height 300ms ease-in-out;
   overflow: hidden;
-  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
+  height: 80px;
 }
-.ExpandableBox:last-of-type {
-  margin-bottom: 0;
+.ExpandableBox:last-child {
+  border-bottom: 0;
 }
-
-.ExpandableBox.ShowBox {
-  max-height: 400px;
-  margin: 0px 0px 20p 0px;
+.ExpandableBoxHeader {
+  position: relative;
+  list-style: none;
+  outline: 0;
+  cursor: pointer;
+  text-transform: uppercase;
+  transition: color 300ms ease-in-out;
+  margin-bottom: 24px;
+  margin-left: 5px;
 }
-
-.ExpandableBox.HideBox {
-  width: 0;
-  height: 0;
-  overflow: hidden;
-  border: none;
-  padding: 0;
-  margin: 0;
+.ShowBox > .ExpandableBoxHeader {
+  color: #009993;
+}
+.ExpandableBoxHeader::-webkit-details-marker {
+  display: none;
+}
+.ExpandableBoxHeader:before, .ExpandableBoxHeader:after {
+  content: "";
+  position: absolute;
+}
+.ExpandableBoxHeader:before {
+  right: 21px;
+  top: 50%;
+  height: 2px;
+  margin-top: -1px;
+  width: 16px;
+  background: #009993;
+}
+.ExpandableBoxHeader:after {
+  right: 28px;
+  top: 50%;
+  height: 16px;
+  margin-top: -8px;
+  width: 2px;
+  margin-left: -1px;
+  background: #009993;
+  transition: all 300ms ease-in-out;
+}
+.ShowBox .ExpandableBoxHeader:after {
   opacity: 0;
+  transform: translateY(25%);
+}
+.ExpandableBoxBody {
+  padding-top: 0;
+  font-weight: lighter;
+  margin-left: 5px;
+}
+.ExpandableBox.ShowBox {
+  height: 300px;
 }