@everymatrix/lottery-draw-results 0.0.3 → 0.1.1

package/dist/cjs/{index-03778cb9.js → index-33a98fae.js}

@@ -76,7 +76,7 @@ const registerStyle = (scopeId, cssText, allowCS) => {
 };
 const addStyle = (styleContainerNode, cmpMeta, mode, hostElm) => {
     let scopeId = getScopeId(cmpMeta);
-    const style = styles.get(scopeId);
+    let style = styles.get(scopeId);
     // if an element is NOT connected then getRootNode() will return the wrong root node
     // so the fallback is to always use the document for the root node in those cases
     styleContainerNode = styleContainerNode.nodeType === 11 /* DocumentFragment */ ? styleContainerNode : doc;
@@ -156,7 +156,7 @@ const h = (nodeName, vnodeData, ...children) => {
     let child = null;
     let simple = false;
     let lastSimple = false;
-    const vNodeChildren = [];
+    let vNodeChildren = [];
     const walk = (c) => {
         for (let i = 0; i < c.length; i++) {
             child = c[i];
@@ -279,7 +279,7 @@ const setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags) => {
             if ((isProp || (isComplex && newValue !== null)) && !isSvg) {
                 try {
                     if (!elm.tagName.includes('-')) {
-                        const n = newValue == null ? '' : newValue;
+                        let n = newValue == null ? '' : newValue;
                         // Workaround for Safari, moving the <input> caret when re-assigning the same valued
                         if (memberName === 'list') {
                             isProp = false;
@@ -336,7 +336,7 @@ const updateElement = (oldVnode, newVnode, isSvgMode, memberName) => {
 };
 const createElm = (oldParentVNode, newParentVNode, childIndex, parentElm) => {
     // tslint:disable-next-line: prefer-const
-    const newVNode = newParentVNode.$children$[childIndex];
+    let newVNode = newParentVNode.$children$[childIndex];
     let i = 0;
     let elm;
     let childNode;
@@ -715,6 +715,10 @@ const parsePropertyValue = (propValue, propType) => {
             // but we'll cheat here and say that the string "false" is the boolean false
             return propValue === 'false' ? false : propValue === '' || !!propValue;
         }
+        if (propType & 2 /* Number */) {
+            // force it to be a number
+            return parseFloat(propValue);
+        }
         if (propType & 1 /* String */) {
             // could have been passed as a number or boolean
             // but we still want it as a string
@@ -1084,9 +1088,7 @@ const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
     if (module) {
         return module[exportName];
     }
-    /*!__STENCIL_STATIC_IMPORT_SWITCH__*/
     return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
-    /* @vite-ignore */
     /* webpackInclude: /\.entry\.js$/ */
     /* webpackExclude: /\.system\.entry\.js$/ */
     /* webpackMode: "lazy" */

package/dist/cjs/loader.cjs.js

@@ -2,10 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-03778cb9.js');
+const index = require('./index-33a98fae.js');
 
 /*
- Stencil Client Patch Esm v2.17.0 | MIT Licensed | https://stenciljs.com
+ Stencil Client Patch Esm v2.15.2 | MIT Licensed | https://stenciljs.com
  */
 const patchEsm = () => {
     return index.promiseResolve();
@@ -14,7 +14,7 @@ const patchEsm = () => {
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
   return patchEsm().then(() => {
-  return index.bootstrapLazy([["lottery-draw-results.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"],"multiplier":[32],"ticketData":[32],"isLoading":[32],"drawResults":[32],"rules":[32],"toggleDrawer":[32],"hasErrors":[32],"errorText":[32]}]]]], options);
+  return index.bootstrapLazy([["lottery-draw-results.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"],"multiplier":[32],"isLoading":[32],"drawResults":[32],"rules":[32],"toggleDrawer":[32],"hasErrors":[32],"errorText":[32]}]]]], options);
   });
 };
 

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-03778cb9.js');
+const index = require('./index-33a98fae.js');
 require('@everymatrix/lottery-grid');
 
 const DEFAULT_LANGUAGE = 'en';
@@ -17,7 +17,13 @@ const TRANSLATIONS = {
     drawNumbersGridTicket: 'Draw numbers Grid B',
     ticketResult: 'Ticket result',
     amountWon: 'Amount won',
-    numberOfDraws: 'Number of draws'
+    numberOfDraws: 'Number of draws',
+    multiplier: 'Multiplier:',
+    ticketPurchaseDate: 'Ticket Purchase Date',
+    ticketStatus: 'Ticket Status',
+    ticketId: 'Ticket ID',
+    ticketAmount: 'Ticket Amount',
+    winUpTo: 'Win up to',
   },
   ro: {
     drawResultsHeader: 'Ultimele rezultate extragere',
@@ -28,7 +34,13 @@ const TRANSLATIONS = {
     drawNumbersGridTicket: 'Numerele extrase Grid B',
     ticketResult: 'Rezultatul biletului',
     amountWon: 'Suma castigata',
-    numberOfDraws: 'Numarul de extrageri'
+    numberOfDraws: 'Numarul de extrageri',
+    multiplier: 'Multiplicator:',
+    ticketPurchaseDate: 'Data achizitionarii biletului',
+    ticketStatus: 'Statusul biletului',
+    ticketId: 'Id biletul',
+    ticketAmount: 'Valoarea biletului',
+    winUpTo: 'Poti castiga'
   },
 };
 const translate = (key, customLang) => {
@@ -36,22 +48,8 @@ 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}.DrawResultsSection{max-width:500px;margin:0 auto;margin:0px auto 10px;border-radius:4px}.DrawResultsHeader{display:flex;justify-content:space-between;padding:10px 20px;background-color:#009993;color:#fff;font-size:14px}.DrawResultsHeader h4{text-transform:uppercase;font-weight:400;margin:0}.DrawMultipler label{display:block;margin:15px 0}.DrawResultsBody{padding:0 20px}.DrawResultsBody .DrawNumbersGrid{font-size:14px}.DrawResultsBody .NumberOfDrawsContainer{display:table;width:100%}.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{margin-right:5px;position:relative;top:2px}.DrawTicketsContainer{margin:30px auto}.ExpandableBoxes{position:relative}.ExpandableBox{width:100%;height:100%;max-height:100px;float:left;margin:0 0 20px 0;border:1px solid #009993;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}.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}.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}.DrawMultipler label{display:block;margin:15px 0}.DrawResultsBody{padding:0px 20px;margin-bottom:5px;border-radius:0 0 4px 4px;border:1px solid #009993}.DrawResultsBody .DrawNumbersGrid{font-size:14px}.DrawResultsBody .NumberOfDrawsContainer{display:table;width:100%}.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{margin-right:5px;position:relative;top:2px}.DrawTicketsContainer{margin:30px auto}.ExpandableBoxes{position:relative}.ExpandableBox{line-height:12px;font-weight:lighter;width:100%;height:100%;max-height:70px;float:left;margin:0 0 20px 0;border:1px solid #f1f1f1;background:#fff;border-radius:4px;padding:10px;-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.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 DEFAULT_VALUES = {
-  gamename: 'Chrono',
-  gamedate: '24/09/2022',
-  state: 'Processing',
-  amount: 304444,
-  ticketid: '6963444',
-  selection: '[5, 6, 7, 8,  9]',
-  multiplier: 4.5,
-  resultstatus: 'Processing',
-  drawstatus: 'Won',
-  drawamount: 1022,
-  drawid: '54545555',
-  drawdate: '24/09/2032'
-};
 const LotteryDrawResults = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
@@ -63,9 +61,39 @@ const LotteryDrawResults = class {
      * Shows only the last draw
      */
     this.drawMode = false;
+    /**
+     * The drawID (option)
+     */
+    this.drawId = '';
+    /**
+     * The game name
+     */
     this.gameName = '';
-    this.multiplier = 5.434;
-    this.ticketData = {};
+    /**
+     * The ticket submission date
+     */
+    this.ticketDate = '';
+    /**
+     * The ticket status
+     */
+    this.ticketStatus = '';
+    /**
+     * The ticket id
+     */
+    this.ticketId = '';
+    /**
+     * The ticket amount
+     */
+    this.ticketAmount = '';
+    /**
+     * The ticket multiplier
+     */
+    this.ticketMultiplier = false;
+    /**
+     * The ticket draw count
+     */
+    this.ticketDrawCount = 0;
+    this.multiplier = 3;
     this.isLoading = true;
     this.drawResults = [];
     this.rules = {};
@@ -87,9 +115,6 @@ const LotteryDrawResults = class {
   connectedCallback() {
     let promises = [];
     promises.push(this.getGameData());
-    if (this.playerId) {
-      promises.push(this.getTicketData());
-    }
     if (this.drawId) {
       promises.push(this.getDrawData());
     }
@@ -109,9 +134,11 @@ const LotteryDrawResults = class {
         .then((data) => {
         this.drawData = data;
         resolve(true);
+        this.isLoading = false;
       })
         .catch((err) => {
         reject(err);
+        this.isLoading = false;
       });
     });
   }
@@ -128,6 +155,8 @@ const LotteryDrawResults = class {
           totalNumbers: data.rules.boards[0].totalNumbers
         };
         resolve(true);
+        this.isLoading = false;
+        this.hasErrors = false;
       })
         .catch((err) => {
         this.isLoading = false;
@@ -137,26 +166,7 @@ const LotteryDrawResults = class {
       });
     });
   }
-  getTicketData() {
-    return new Promise((resolve, reject) => {
-      let url = new URL(`${this.endpoint}/tickets/player/${this.playerId}`);
-      fetch(url.href)
-        .then((response) => {
-        return response.json();
-      })
-        .then((data) => {
-        this.ticketData = data.length === 0 ? DEFAULT_VALUES : data[1];
-        this.drawResults = this.ticketData.drawResults.map((item) => item);
-        this.selection = this.ticketData.selection[0].join(',');
-        resolve(true);
-      })
-        .catch((err) => {
-        reject(err);
-      });
-    });
-  }
   render() {
-    var _a, _b, _c, _d, _e, _f;
     if (this.isLoading) {
       return (index.h("p", null, "Loading, please wait ..."));
     }
@@ -165,12 +175,11 @@ const LotteryDrawResults = class {
     }
     else {
       return (index.h("section", { class: "DrawResultsSection" }, !this.drawMode ?
-        index.h("div", { class: "DrawResultsArea" }, index.h("div", { class: "TicketInfo" }, index.h("div", { class: "TicketGameName" }, translate('drawName', this.language), ": ", index.h("span", null, this.gameName)), index.h("div", { class: "TicketDate" }, "Ticket Purchase Date: ", index.h("span", null, (_a = this.ticketData) === null || _a === void 0 ? void 0 : _a.createdAt.slice(0, 10))), index.h("div", { class: "TicketStatus" }, "Status: ", index.h("span", null, (_b = this.ticketData) === null || _b === void 0 ? void 0 : _b.state))), index.h("div", { class: "DrawResultsBody" }, index.h("div", { class: "TicketIdContainer" }, index.h("p", null, "Ticket id: ", index.h("span", null, (_c = this.ticketData) === null || _c === void 0 ? void 0 : _c.id))), index.h("div", { class: "TicketAmountContainer" }, index.h("p", null, "Ticket amount: ", index.h("span", null, (_d = this.ticketData) === null || _d === void 0 ? void 0 : _d.amount))), index.h("div", { class: "DrawNumbersGrid" }, index.h("p", null, translate('drawNumbersGridTicket', this.language), ":"), index.h("div", { class: "BulletContainer" }, index.h("lottery-grid", { "maximum-allowed": this.rules.maximumAllowed, "total-numbers": this.rules.totalNumbers, "selected-numbers": this.selection, selectable: false, "display-selected": true, language: this.language }))), index.h("div", { class: "DrawMultipler" }, index.h("label", { class: "Label" }, "Multiplier: ", index.h("span", null, JSON.stringify((_e = this.ticketData) === null || _e === void 0 ? void 0 : _e.multiplier)))), index.h("div", { class: "NumberOfDrawsContainer" }, index.h("p", null, translate('numberOfDraws', this.language), ": ", (_f = this.ticketData) === null || _f === void 0 ? void 0 :
-          _f.drawCount), index.h("div", { class: "DrawTicketsContainer" }, this.drawResults.map((item, index$1) => index.h("div", { class: "ExpandableBoxes" }, 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.status)), 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" }), index.h("div", { class: "DrawMultipler" }, index.h("label", { class: "Label" }, "Multiplier: ", item.multiplier)))))))))
+        index.h("div", { class: "DrawResultsArea" }, index.h("div", { class: "TicketInfo" }, index.h("div", { class: "TicketGameName" }, translate('drawName', this.language), ": ", index.h("span", null, this.gameName)), index.h("div", { class: "TicketDate" }, translate('ticketPurchaseDate', this.language), ": ", index.h("span", null, this.ticketDate.slice(0, 10))), index.h("div", { class: "TicketStatus" }, translate('ticketStatus', this.language), ": ", index.h("span", null, this.ticketStatus))), index.h("div", { class: "DrawResultsBody" }, index.h("div", { class: "TicketIdContainer" }, index.h("p", null, translate('ticketId', this.language), ": ", index.h("span", null, this.ticketId))), index.h("div", { class: "TicketAmountContainer" }, index.h("p", null, translate('ticketAmount', this.language), " ", index.h("span", null, this.ticketAmount))), index.h("div", { class: "DrawNumbersGrid" }, index.h("p", null, translate('drawNumbersGridTicket', this.language), ":"), index.h("div", { class: "BulletContainer" }, index.h("lottery-grid", { "maximum-allowed": this.rules.maximumAllowed, "total-numbers": this.rules.totalNumbers, "selected-numbers": this.selection, selectable: false, "display-selected": true, language: this.language }))), index.h("div", { class: "DrawMultipler" }, index.h("label", { class: "Label" }, translate('winUpTo', this.language), " ", index.h("span", null, JSON.stringify(this.ticketMultiplier)))), index.h("div", { class: "NumberOfDrawsContainer" }, index.h("p", null, translate('numberOfDraws', this.language), ": ", this.ticketDrawCount), index.h("div", { class: "DrawTicketsContainer" }, this.drawResults.map((item, index$1) => index.h("div", { class: "ExpandableBoxes" }, 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.status)), 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" }), index.h("div", { class: "DrawMultipler" }, index.h("label", { class: "Label" }, translate('winUpTo', this.language), " ", item.multiplier)))))))))
         :
           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), ":"), index.h("div", { class: "BulletContainer" }, index.h("lottery-grid", { "maximum-allowed": this.rules.maximumAllowed, "total-numbers": this.rules.totalNumbers, selectedNumbers: this.drawData.winningNumbers.join(','), "display-selected": true, selectable: false, language: this.language })), index.h("div", { class: "DrawMultipler" }, index.h("label", { class: "Label" }, "Multiplier: ", 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), ":"), index.h("div", { class: "BulletContainer" }, index.h("lottery-grid", { "maximum-allowed": this.rules.maximumAllowed, "total-numbers": this.rules.totalNumbers, selectedNumbers: this.drawData.winningNumbers.join(','), "display-selected": true, selectable: false, language: this.language })), index.h("div", { class: "DrawMultipler" }, index.h("label", { class: "Label" }, translate('multiplier', this.language), " ", this.multiplier))))))));
     }
   }
 };

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

@@ -1,9 +1,9 @@
 'use strict';
 
-const index = require('./index-03778cb9.js');
+const index = require('./index-33a98fae.js');
 
 /*
- Stencil Client Patch Browser v2.17.0 | MIT Licensed | https://stenciljs.com
+ Stencil Client Patch Browser v2.15.2 | MIT Licensed | https://stenciljs.com
  */
 const patchBrowser = () => {
     const importMeta = (typeof document === 'undefined' ? new (require('u' + 'rl').URL)('file:' + __filename).href : (document.currentScript && document.currentScript.src || new URL('lottery-draw-results.cjs.js', document.baseURI).href));
@@ -15,5 +15,5 @@ const patchBrowser = () => {
 };
 
 patchBrowser().then(options => {
-  return index.bootstrapLazy([["lottery-draw-results.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"],"multiplier":[32],"ticketData":[32],"isLoading":[32],"drawResults":[32],"rules":[32],"toggleDrawer":[32],"hasErrors":[32],"errorText":[32]}]]]], options);
+  return index.bootstrapLazy([["lottery-draw-results.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"],"multiplier":[32],"isLoading":[32],"drawResults":[32],"rules":[32],"toggleDrawer":[32],"hasErrors":[32],"errorText":[32]}]]]], options);
 });

package/dist/collection/collection-manifest.json

@@ -4,7 +4,7 @@
   ],
   "compiler": {
     "name": "@stencil/core",
-    "version": "2.17.0",
+    "version": "2.15.2",
     "typescriptVersion": "4.5.4"
   },
   "collections": [],

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

@@ -14,10 +14,13 @@
   font-size: 14px;
 }
 
+.DrawResultsArea {
+  margin-top: 15px;
+}
+
 .DrawResultsSection {
-  max-width: 500px;
-  margin: 0 auto;
-  margin: 0px auto 10px;
+  max-width: 600px;
+  margin: 0px auto;
   border-radius: 4px;
 }
 
@@ -28,11 +31,13 @@
   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;
 }
 
 .DrawMultipler label {
@@ -41,7 +46,10 @@
 }
 
 .DrawResultsBody {
-  padding: 0 20px;
+  padding: 0px 20px;
+  margin-bottom: 5px;
+  border-radius: 0 0 4px 4px;
+  border: 1px solid #009993;
 }
 .DrawResultsBody .DrawNumbersGrid {
   font-size: 14px;
@@ -115,21 +123,24 @@
 }
 
 .ExpandableBox {
+  line-height: 12px;
+  font-weight: lighter;
   width: 100%;
   height: 100%;
-  max-height: 100px;
+  max-height: 70px;
   float: left;
   margin: 0 0 20px 0;
-  border: 1px solid #009993;
+  border: 1px solid #f1f1f1;
+  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.ShowBox {