@everymatrix/lottery-draw-results 0.1.23 → 1.13.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (21) hide show
  1. package/dist/cjs/{index-43800d3c.js → index-35787b9c.js} +3 -0
  2. package/dist/cjs/loader.cjs.js +2 -2
  3. package/dist/cjs/lottery-bullet_3.cjs.entry.js +64 -108
  4. package/dist/cjs/lottery-draw-results.cjs.js +2 -2
  5. package/dist/collection/components/lottery-draw-results/lottery-draw-results.css +59 -34
  6. package/dist/collection/components/lottery-draw-results/lottery-draw-results.js +117 -147
  7. package/dist/components/lottery-draw-results.js +56 -109
  8. package/dist/components/lottery-grid2.js +11 -2
  9. package/dist/esm/{index-9547eb6c.js → index-44c9eb79.js} +3 -0
  10. package/dist/esm/loader.js +2 -2
  11. package/dist/esm/lottery-bullet_3.entry.js +64 -108
  12. package/dist/esm/lottery-draw-results.js +2 -2
  13. package/dist/lottery-draw-results/lottery-draw-results.esm.js +1 -1
  14. package/dist/lottery-draw-results/p-01e78d3a.js +1 -0
  15. package/dist/lottery-draw-results/p-a52e01d1.entry.js +1 -0
  16. package/dist/types/components/lottery-draw-results/lottery-draw-results.d.ts +11 -7
  17. package/dist/types/components.d.ts +8 -0
  18. package/package.json +1 -1
  19. package/dist/lottery-draw-results/p-954ea9de.entry.js +0 -1
  20. package/dist/lottery-draw-results/p-e1cb3144.js +0 -1
  21. /package/dist/types/Users/{dragos.bodea/Documents/everymatrix-prjs → adrian.pripon/Documents/Work}/stencil/widgets-stencil/packages/lottery-draw-results/.stencil/packages/lottery-draw-results/stencil.config.d.ts +0 -0
package/dist/collection/components/lottery-draw-results/lottery-draw-results.js CHANGED
@@ -59,79 +59,21 @@ export class LotteryDrawResults {
59
59
  * Client custom styling via url content
60
60
  */
61
61
  this.clientStylingUrlContent = '';
62
+ /**
63
+ * Data showing the ticket's draw results details
64
+ */
65
+ this.ticketDrawData = '';
62
66
  this.multiplier = 3;
63
67
  this.isLoading = true;
64
- this.rules = {};
65
- this.toggleDrawer = [false];
66
68
  this.hasErrors = false;
67
69
  this.errorText = '';
68
70
  this.ticketData = [];
69
71
  this.ticketDataLoaded = false;
70
72
  this.ticketDraws = [];
71
- this.hasDrawNumbers = false;
73
+ this.toggleDrawer = [false];
72
74
  this.limitStylingAppends = false;
73
- this.getTicketsData = () => {
74
- let url = new URL(`${this.endpoint}/tickets`);
75
- let drawOptions = {
76
- method: "GET",
77
- headers: {
78
- 'Content-Type': "application/json",
79
- 'Accept': 'application/json',
80
- 'Authorization': `Bearer ${this.sessionId}`
81
- },
82
- };
83
- fetch(url.href, drawOptions)
84
- .then((response) => {
85
- return response.json();
86
- })
87
- .then((data) => {
88
- if (data) {
89
- this.ticketData = data;
90
- this.ticketDataLoaded = true;
91
- }
92
- return this.ticketData;
93
- })
94
- .then((response) => {
95
- response.forEach(ticket => {
96
- if (ticket.drawResults.length) {
97
- ticket.drawResults.forEach(draw => {
98
- fetch(`${this.endpoint}/games/${this.gameId}/draws/${draw.drawId}`)
99
- .then((response) => {
100
- return response.json();
101
- })
102
- .then((data) => {
103
- // check if draw id is unique
104
- if (!this.ticketDraws.some(el => el.drawId === draw.drawId)) {
105
- this.ticketDraws.push({ drawId: draw.drawId, drawNumbers: data.winningNumbers });
106
- }
107
- })
108
- .catch((err) => {
109
- console.log('error ', err);
110
- });
111
- });
112
- }
113
- return this.ticketDraws;
114
- });
115
- })
116
- .then(() => {
117
- this.hasDrawNumbers = true;
118
- })
119
- .catch((err) => {
120
- console.log('error ', err);
121
- });
122
- ;
123
- };
124
- this.changeBox = (index) => {
125
- this.toggleDrawer = this.toggleDrawer.map((item, itemIndex) => {
126
- if (itemIndex == index) {
127
- return !item;
128
- }
129
- return item;
130
- });
131
- if (index >= this.toggleDrawer.length) {
132
- this.toggleDrawer.push(true);
133
- }
134
- };
75
+ this.ticketDrawDetails = [];
76
+ this.ticketDrawDetailsFlag = true;
135
77
  this.setClientStyling = () => {
136
78
  let sheet = document.createElement('style');
137
79
  sheet.innerHTML = this.clientStyling;
@@ -147,13 +89,13 @@ export class LotteryDrawResults {
147
89
  }
148
90
  connectedCallback() {
149
91
  let promises = [];
150
- promises.push(this.getGameData());
92
+ // Split ticket numbers for each grid
93
+ if (this.ticketNumbers) {
94
+ this.gridNumbers = JSON.parse(this.ticketNumbers);
95
+ }
151
96
  if (this.drawId) {
152
97
  promises.push(this.getDrawData());
153
98
  }
154
- if (!this.drawMode) {
155
- this.getTicketsData();
156
- }
157
99
  Promise.all(promises)
158
100
  .then(() => {
159
101
  this.isLoading = false;
@@ -161,7 +103,15 @@ export class LotteryDrawResults {
161
103
  console.log('error ', err);
162
104
  this.isLoading = false;
163
105
  });
164
- ;
106
+ }
107
+ componentWillRender() {
108
+ if (this.ticketDrawData && this.ticketDrawDetailsFlag) {
109
+ this.ticketDrawDetails = JSON.parse(this.ticketDrawData);
110
+ this.ticketDrawDetails.forEach((drawDetail) => {
111
+ this.getDrawData(drawDetail.drawId).then((drawData) => drawDetail.drawData = drawData);
112
+ });
113
+ this.ticketDrawDetailsFlag = false;
114
+ }
165
115
  }
166
116
  componentDidRender() {
167
117
  // start custom styling area
@@ -174,21 +124,24 @@ export class LotteryDrawResults {
174
124
  }
175
125
  // end custom styling area
176
126
  }
177
- getDrawData(drawID) {
127
+ getDrawData(drawId) {
128
+ this.isLoading = true;
178
129
  return new Promise((resolve, reject) => {
179
- let url = new URL(`${this.endpoint}/games/${this.gameId}/draws/${drawID ? drawID : this.drawId}`);
130
+ let url = new URL(`${this.endpoint}/games/${this.gameId}/draws/${drawId ? drawId : this.drawId}`);
180
131
  fetch(url.href)
181
132
  .then((response) => {
182
133
  // @TODO EXCEPTIONS
183
134
  return response.json();
184
135
  })
185
136
  .then((data) => {
186
- this.drawData = data;
187
- resolve(true);
188
- this.isLoading = false;
189
- if (drawID) {
190
- return this.drawData.winningNumbers;
137
+ if (drawId) {
138
+ resolve(data);
139
+ }
140
+ else {
141
+ this.drawData = data;
142
+ resolve(true);
191
143
  }
144
+ this.isLoading = false;
192
145
  })
193
146
  .catch((err) => {
194
147
  reject(err);
@@ -196,29 +149,16 @@ export class LotteryDrawResults {
196
149
  });
197
150
  });
198
151
  }
199
- getGameData() {
200
- return new Promise((resolve, reject) => {
201
- let url = new URL(`${this.endpoint}/games/${this.gameId}`);
202
- fetch(url.href)
203
- .then((response) => {
204
- return response.json();
205
- })
206
- .then((data) => {
207
- this.rules = {
208
- maximumAllowed: data.rules.boards[0].maximumAllowed,
209
- totalNumbers: data.rules.boards[0].totalNumbers
210
- };
211
- resolve(true);
212
- this.isLoading = false;
213
- this.hasErrors = false;
214
- })
215
- .catch((err) => {
216
- this.isLoading = false;
217
- this.hasErrors = true;
218
- this.errorText = err;
219
- reject(err);
220
- });
152
+ drawerToggle(index) {
153
+ this.toggleDrawer = this.toggleDrawer.map((item, itemIndex) => {
154
+ if (itemIndex == index) {
155
+ return !item;
156
+ }
157
+ return item;
221
158
  });
159
+ if (index >= this.toggleDrawer.length) {
160
+ this.toggleDrawer.push(true);
161
+ }
222
162
  }
223
163
  render() {
224
164
  if (this.isLoading) {
@@ -246,7 +186,7 @@ export class LotteryDrawResults {
246
186
  translate('drawNumbersGridDraw', this.language),
247
187
  "0:"),
248
188
  h("div", { class: "BulletContainer" },
249
- 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 })),
189
+ 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 })),
250
190
  h("div", { class: "DrawMultipler" },
251
191
  h("label", { class: "Label" },
252
192
  translate('multiplier', this.language),
@@ -265,12 +205,14 @@ export class LotteryDrawResults {
265
205
  translate('ticketAmount', this.language),
266
206
  " ",
267
207
  h("span", null, this.ticketAmount))),
268
- h("div", { class: "DrawNumbersGrid" },
208
+ h("div", { class: "DrawNumbersGrid" }, this.gridNumbers.map((grid, index) => h("div", null,
269
209
  h("label", { class: "Label" },
270
210
  translate('drawNumbersGridTicket', this.language),
271
- "0:"),
211
+ " ",
212
+ String.fromCharCode(index + 65),
213
+ ":"),
272
214
  h("div", { class: "BulletContainer" },
273
- 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 }))),
215
+ 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 }))))),
274
216
  h("div", { class: "DrawMultipler" },
275
217
  h("label", { class: "Label" },
276
218
  translate('multiplier', this.language),
@@ -281,46 +223,57 @@ export class LotteryDrawResults {
281
223
  translate('numberOfDraws', this.language),
282
224
  ": ",
283
225
  this.ticketDrawCount),
284
- h("div", { class: "DrawTicketsContainer" }, this.ticketData.map((ticket) => h("div", { class: "ExpandableBoxes" }, ticket.drawResults.length ?
285
- h("div", null, ticket.id == this.ticketId && ticket.drawResults.map((item, index) => h("div", { class: this.toggleDrawer[index] ? 'ExpandableBox ShowBox' : 'ExpandableBox', onClick: () => this.changeBox(index) },
286
- h("div", { class: "TicketResultContainer" },
287
- h("p", null,
288
- translate('ticketResult', this.language),
289
- ": ",
290
- item.state)),
291
- item.state == 'won' &&
292
- h("div", { class: "AmountWonContainer" },
293
- h("p", null,
294
- translate('amountWon', this.language),
295
- ": ",
296
- Number(item.amount).toLocaleString('en'),
297
- " ",
298
- item.currency)),
299
- h("div", { class: "DrawIdContainer" },
300
- h("p", null,
301
- translate('drawId', this.language),
302
- ": ",
303
- item.drawId)),
304
- h("div", { class: "DrawDateContainer" },
305
- h("p", null,
306
- translate('drawDate', this.language),
307
- ": ",
308
- item.updatedAt.slice(0, 10),
309
- " | ",
310
- item.updatedAt.slice(11, 19))),
311
- h("div", { class: "DrawNumbersGrid" }, this.hasDrawNumbers && this.ticketDraws.map((ticketDraw) => item.drawId && item.drawId === ticketDraw.drawId &&
312
- h("div", null,
313
- h("label", { class: "Label" },
314
- translate('drawNumbersGridDraw', this.language),
315
- "A:"),
316
- 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 })))),
317
- h("div", { class: "DrawMultipler" },
318
- h("label", { class: "Label" },
319
- translate('multiplier', this.language),
320
- " ",
321
- item.multiplier)))))
322
- :
323
- h("span", null)))))))));
226
+ h("div", { class: "DrawTicketsContainer" }, this.ticketDrawDetails && this.ticketDrawDetails.length > 0 &&
227
+ h("div", { class: "ExpandableBoxes" }, this.ticketDrawDetails.map((drawDetail, index) => {
228
+ var _a, _b, _c, _d, _e;
229
+ return h("div", { class: { 'ExpandableBox': true, 'ShowBox': this.toggleDrawer[index] }, onClick: () => this.drawerToggle(index) },
230
+ h("div", { class: "ExpandableBoxHeader" },
231
+ h("div", { class: "TicketResultContainer" },
232
+ h("p", null,
233
+ translate('ticketResult', this.language),
234
+ ": ",
235
+ drawDetail.state)),
236
+ drawDetail.state == 'won' &&
237
+ h("div", { class: "AmountWonContainer" },
238
+ h("p", null,
239
+ translate('amountWon', this.language),
240
+ ": ",
241
+ Number(drawDetail.amount).toLocaleString('en'),
242
+ " ",
243
+ drawDetail.currency)),
244
+ drawDetail.state == 'lost' &&
245
+ h("div", { class: "DrawIdContainer" },
246
+ h("p", null,
247
+ translate('drawId', this.language),
248
+ ": ",
249
+ drawDetail.drawId))),
250
+ h("div", { class: "ExpandableBoxBody" },
251
+ h("div", { class: "DrawIdContainer" },
252
+ h("p", null,
253
+ translate('drawId', this.language),
254
+ ": ",
255
+ drawDetail.drawId)),
256
+ h("div", { class: "DrawDateContainer" },
257
+ h("p", null,
258
+ translate('drawDate', this.language),
259
+ ": ", (_a = drawDetail.drawData) === null || _a === void 0 ? void 0 :
260
+ _a.date.slice(0, 10),
261
+ " | ", (_b = drawDetail.drawData) === null || _b === void 0 ? void 0 :
262
+ _b.date.slice(11, 19))),
263
+ h("div", { class: "DrawNumbersGrid" }, drawDetail.drawData &&
264
+ h("div", { class: 'BulletContainer' },
265
+ h("label", { class: "Label" },
266
+ translate('drawNumbersGridDraw', this.language),
267
+ " ",
268
+ String.fromCharCode(index + 10),
269
+ ":"),
270
+ 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 }))),
271
+ h("div", { class: "DrawMultipler" },
272
+ h("label", { class: "Label" },
273
+ translate('multiplier', this.language),
274
+ " ", (_e = drawDetail.drawData) === null || _e === void 0 ? void 0 :
275
+ _e.multiplier))));
276
+ }))))))));
324
277
  }
325
278
  }
326
279
  static get is() { return "lottery-draw-results"; }
@@ -634,19 +587,36 @@ export class LotteryDrawResults {
634
587
  "attribute": "client-styling-url-content",
635
588
  "reflect": false,
636
589
  "defaultValue": "''"
590
+ },
591
+ "ticketDrawData": {
592
+ "type": "string",
593
+ "mutable": false,
594
+ "complexType": {
595
+ "original": "string",
596
+ "resolved": "string",
597
+ "references": {}
598
+ },
599
+ "required": false,
600
+ "optional": false,
601
+ "docs": {
602
+ "tags": [],
603
+ "text": "Data showing the ticket's draw results details"
604
+ },
605
+ "attribute": "ticket-draw-data",
606
+ "reflect": false,
607
+ "defaultValue": "''"
637
608
  }
638
609
  }; }
639
610
  static get states() { return {
640
611
  "multiplier": {},
641
612
  "isLoading": {},
642
- "rules": {},
643
- "toggleDrawer": {},
644
613
  "hasErrors": {},
645
614
  "errorText": {},
646
615
  "ticketData": {},
647
616
  "ticketDataLoaded": {},
648
617
  "ticketDraws": {},
649
- "hasDrawNumbers": {},
650
- "limitStylingAppends": {}
618
+ "toggleDrawer": {},
619
+ "limitStylingAppends": {},
620
+ "drawData": {}
651
621
  }; }
652
622
  }
package/dist/components/lottery-draw-results.js CHANGED
@@ -79,7 +79,7 @@ const translate = (key, customLang) => {
79
79
  return TRANSLATIONS[lang !== undefined && SUPPORTED_LANGUAGES.includes(lang) ? lang : DEFAULT_LANGUAGE][key];
80
80
  };
81
81
 
82
- 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}";
82
+ 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}";
83
83
 
84
84
  const LotteryDrawResults$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
85
85
  constructor() {
@@ -142,78 +142,21 @@ const LotteryDrawResults$1 = /*@__PURE__*/ proxyCustomElement(class extends HTML
142
142
  * Client custom styling via url content
143
143
  */
144
144
  this.clientStylingUrlContent = '';
145
+ /**
146
+ * Data showing the ticket's draw results details
147
+ */
148
+ this.ticketDrawData = '';
145
149
  this.multiplier = 3;
146
150
  this.isLoading = true;
147
- this.rules = {};
148
- this.toggleDrawer = [false];
149
151
  this.hasErrors = false;
150
152
  this.errorText = '';
151
153
  this.ticketData = [];
152
154
  this.ticketDataLoaded = false;
153
155
  this.ticketDraws = [];
154
- this.hasDrawNumbers = false;
156
+ this.toggleDrawer = [false];
155
157
  this.limitStylingAppends = false;
156
- this.getTicketsData = () => {
157
- let url = new URL(`${this.endpoint}/tickets`);
158
- let drawOptions = {
159
- method: "GET",
160
- headers: {
161
- 'Content-Type': "application/json",
162
- 'Accept': 'application/json',
163
- 'Authorization': `Bearer ${this.sessionId}`
164
- },
165
- };
166
- fetch(url.href, drawOptions)
167
- .then((response) => {
168
- return response.json();
169
- })
170
- .then((data) => {
171
- if (data) {
172
- this.ticketData = data;
173
- this.ticketDataLoaded = true;
174
- }
175
- return this.ticketData;
176
- })
177
- .then((response) => {
178
- response.forEach(ticket => {
179
- if (ticket.drawResults.length) {
180
- ticket.drawResults.forEach(draw => {
181
- fetch(`${this.endpoint}/games/${this.gameId}/draws/${draw.drawId}`)
182
- .then((response) => {
183
- return response.json();
184
- })
185
- .then((data) => {
186
- // check if draw id is unique
187
- if (!this.ticketDraws.some(el => el.drawId === draw.drawId)) {
188
- this.ticketDraws.push({ drawId: draw.drawId, drawNumbers: data.winningNumbers });
189
- }
190
- })
191
- .catch((err) => {
192
- console.log('error ', err);
193
- });
194
- });
195
- }
196
- return this.ticketDraws;
197
- });
198
- })
199
- .then(() => {
200
- this.hasDrawNumbers = true;
201
- })
202
- .catch((err) => {
203
- console.log('error ', err);
204
- });
205
- };
206
- this.changeBox = (index) => {
207
- this.toggleDrawer = this.toggleDrawer.map((item, itemIndex) => {
208
- if (itemIndex == index) {
209
- return !item;
210
- }
211
- return item;
212
- });
213
- if (index >= this.toggleDrawer.length) {
214
- this.toggleDrawer.push(true);
215
- }
216
- };
158
+ this.ticketDrawDetails = [];
159
+ this.ticketDrawDetailsFlag = true;
217
160
  this.setClientStyling = () => {
218
161
  let sheet = document.createElement('style');
219
162
  sheet.innerHTML = this.clientStyling;
@@ -229,13 +172,13 @@ const LotteryDrawResults$1 = /*@__PURE__*/ proxyCustomElement(class extends HTML
229
172
  }
230
173
  connectedCallback() {
231
174
  let promises = [];
232
- promises.push(this.getGameData());
175
+ // Split ticket numbers for each grid
176
+ if (this.ticketNumbers) {
177
+ this.gridNumbers = JSON.parse(this.ticketNumbers);
178
+ }
233
179
  if (this.drawId) {
234
180
  promises.push(this.getDrawData());
235
181
  }
236
- if (!this.drawMode) {
237
- this.getTicketsData();
238
- }
239
182
  Promise.all(promises)
240
183
  .then(() => {
241
184
  this.isLoading = false;
@@ -244,6 +187,15 @@ const LotteryDrawResults$1 = /*@__PURE__*/ proxyCustomElement(class extends HTML
244
187
  this.isLoading = false;
245
188
  });
246
189
  }
190
+ componentWillRender() {
191
+ if (this.ticketDrawData && this.ticketDrawDetailsFlag) {
192
+ this.ticketDrawDetails = JSON.parse(this.ticketDrawData);
193
+ this.ticketDrawDetails.forEach((drawDetail) => {
194
+ this.getDrawData(drawDetail.drawId).then((drawData) => drawDetail.drawData = drawData);
195
+ });
196
+ this.ticketDrawDetailsFlag = false;
197
+ }
198
+ }
247
199
  componentDidRender() {
248
200
  // start custom styling area
249
201
  if (!this.limitStylingAppends && this.stylingContainer) {
@@ -255,21 +207,24 @@ const LotteryDrawResults$1 = /*@__PURE__*/ proxyCustomElement(class extends HTML
255
207
  }
256
208
  // end custom styling area
257
209
  }
258
- getDrawData(drawID) {
210
+ getDrawData(drawId) {
211
+ this.isLoading = true;
259
212
  return new Promise((resolve, reject) => {
260
- let url = new URL(`${this.endpoint}/games/${this.gameId}/draws/${drawID ? drawID : this.drawId}`);
213
+ let url = new URL(`${this.endpoint}/games/${this.gameId}/draws/${drawId ? drawId : this.drawId}`);
261
214
  fetch(url.href)
262
215
  .then((response) => {
263
216
  // @TODO EXCEPTIONS
264
217
  return response.json();
265
218
  })
266
219
  .then((data) => {
267
- this.drawData = data;
268
- resolve(true);
269
- this.isLoading = false;
270
- if (drawID) {
271
- return this.drawData.winningNumbers;
220
+ if (drawId) {
221
+ resolve(data);
222
+ }
223
+ else {
224
+ this.drawData = data;
225
+ resolve(true);
272
226
  }
227
+ this.isLoading = false;
273
228
  })
274
229
  .catch((err) => {
275
230
  reject(err);
@@ -277,29 +232,16 @@ const LotteryDrawResults$1 = /*@__PURE__*/ proxyCustomElement(class extends HTML
277
232
  });
278
233
  });
279
234
  }
280
- getGameData() {
281
- return new Promise((resolve, reject) => {
282
- let url = new URL(`${this.endpoint}/games/${this.gameId}`);
283
- fetch(url.href)
284
- .then((response) => {
285
- return response.json();
286
- })
287
- .then((data) => {
288
- this.rules = {
289
- maximumAllowed: data.rules.boards[0].maximumAllowed,
290
- totalNumbers: data.rules.boards[0].totalNumbers
291
- };
292
- resolve(true);
293
- this.isLoading = false;
294
- this.hasErrors = false;
295
- })
296
- .catch((err) => {
297
- this.isLoading = false;
298
- this.hasErrors = true;
299
- this.errorText = err;
300
- reject(err);
301
- });
235
+ drawerToggle(index) {
236
+ this.toggleDrawer = this.toggleDrawer.map((item, itemIndex) => {
237
+ if (itemIndex == index) {
238
+ return !item;
239
+ }
240
+ return item;
302
241
  });
242
+ if (index >= this.toggleDrawer.length) {
243
+ this.toggleDrawer.push(true);
244
+ }
303
245
  }
304
246
  render() {
305
247
  if (this.isLoading) {
@@ -311,14 +253,19 @@ const LotteryDrawResults$1 = /*@__PURE__*/ proxyCustomElement(class extends HTML
311
253
  else {
312
254
  return (h("section", { class: "DrawResultsSection", ref: el => this.stylingContainer = el }, this.drawMode ?
313
255
  h("div", { class: "DrawResultsArea" }, this.drawData &&
314
- h("div", null, h("div", { class: "DrawResultsHeader" }, h("span", null, translate('drawId', this.language), ": ", this.drawData.id), h("span", null, translate('drawDate', this.language), ": ", this.drawData.date.slice(0, 10))), h("div", { class: "DrawResultsBody" }, h("div", { class: "DrawNumbersGrid" }, h("p", null, translate('drawNumbersGridDraw', this.language), "0:"), h("div", { class: "BulletContainer" }, 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 })), h("div", { class: "DrawMultipler" }, h("label", { class: "Label" }, translate('multiplier', this.language), " ", this.multiplier))))))
256
+ h("div", null, h("div", { class: "DrawResultsHeader" }, h("span", null, translate('drawId', this.language), ": ", this.drawData.id), h("span", null, translate('drawDate', this.language), ": ", this.drawData.date.slice(0, 10))), h("div", { class: "DrawResultsBody" }, h("div", { class: "DrawNumbersGrid" }, h("p", null, translate('drawNumbersGridDraw', this.language), "0:"), h("div", { class: "BulletContainer" }, 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 })), h("div", { class: "DrawMultipler" }, h("label", { class: "Label" }, translate('multiplier', this.language), " ", this.multiplier))))))
315
257
  :
316
- h("div", { class: "DrawResultsArea TicketDraws" }, h("div", { class: "DrawResultsBody" }, h("div", { class: "TicketIdContainer" }, h("label", { class: "Label" }, translate('ticketId', this.language), ": ", h("span", null, this.ticketId))), h("div", { class: "TicketAmountContainer" }, h("label", { class: "Label" }, translate('ticketAmount', this.language), " ", h("span", null, this.ticketAmount))), h("div", { class: "DrawNumbersGrid" }, h("label", { class: "Label" }, translate('drawNumbersGridTicket', this.language), "0:"), h("div", { class: "BulletContainer" }, 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 }))), h("div", { class: "DrawMultipler" }, h("label", { class: "Label" }, translate('multiplier', this.language), " ", JSON.stringify(this.ticketMultiplier))), h("div", { class: "NumberOfDrawsContainer" }, h("label", { class: "Label" }, translate('numberOfDraws', this.language), ": ", this.ticketDrawCount), h("div", { class: "DrawTicketsContainer" }, this.ticketData.map((ticket) => h("div", { class: "ExpandableBoxes" }, ticket.drawResults.length ?
317
- h("div", null, ticket.id == this.ticketId && ticket.drawResults.map((item, index) => h("div", { class: this.toggleDrawer[index] ? 'ExpandableBox ShowBox' : 'ExpandableBox', onClick: () => this.changeBox(index) }, h("div", { class: "TicketResultContainer" }, h("p", null, translate('ticketResult', this.language), ": ", item.state)), item.state == 'won' &&
318
- h("div", { class: "AmountWonContainer" }, h("p", null, translate('amountWon', this.language), ": ", Number(item.amount).toLocaleString('en'), " ", item.currency)), h("div", { class: "DrawIdContainer" }, h("p", null, translate('drawId', this.language), ": ", item.drawId)), h("div", { class: "DrawDateContainer" }, h("p", null, translate('drawDate', this.language), ": ", item.updatedAt.slice(0, 10), " | ", item.updatedAt.slice(11, 19))), h("div", { class: "DrawNumbersGrid" }, this.hasDrawNumbers && this.ticketDraws.map((ticketDraw) => item.drawId && item.drawId === ticketDraw.drawId &&
319
- h("div", null, h("label", { class: "Label" }, translate('drawNumbersGridDraw', this.language), "A:"), 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 })))), h("div", { class: "DrawMultipler" }, h("label", { class: "Label" }, translate('multiplier', this.language), " ", item.multiplier)))))
320
- :
321
- h("span", null)))))))));
258
+ h("div", { class: "DrawResultsArea TicketDraws" }, h("div", { class: "DrawResultsBody" }, h("div", { class: "TicketIdContainer" }, h("label", { class: "Label" }, translate('ticketId', this.language), ": ", h("span", null, this.ticketId))), h("div", { class: "TicketAmountContainer" }, h("label", { class: "Label" }, translate('ticketAmount', this.language), " ", h("span", null, this.ticketAmount))), h("div", { class: "DrawNumbersGrid" }, this.gridNumbers.map((grid, index) => h("div", null, h("label", { class: "Label" }, translate('drawNumbersGridTicket', this.language), " ", String.fromCharCode(index + 65), ":"), h("div", { class: "BulletContainer" }, 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 }))))), h("div", { class: "DrawMultipler" }, h("label", { class: "Label" }, translate('multiplier', this.language), " ", JSON.stringify(this.ticketMultiplier))), h("div", { class: "NumberOfDrawsContainer" }, h("label", { class: "Label" }, translate('numberOfDraws', this.language), ": ", this.ticketDrawCount), h("div", { class: "DrawTicketsContainer" }, this.ticketDrawDetails && this.ticketDrawDetails.length > 0 &&
259
+ h("div", { class: "ExpandableBoxes" }, this.ticketDrawDetails.map((drawDetail, index) => {
260
+ var _a, _b, _c, _d, _e;
261
+ return h("div", { class: { 'ExpandableBox': true, 'ShowBox': this.toggleDrawer[index] }, onClick: () => this.drawerToggle(index) }, h("div", { class: "ExpandableBoxHeader" }, h("div", { class: "TicketResultContainer" }, h("p", null, translate('ticketResult', this.language), ": ", drawDetail.state)), drawDetail.state == 'won' &&
262
+ h("div", { class: "AmountWonContainer" }, h("p", null, translate('amountWon', this.language), ": ", Number(drawDetail.amount).toLocaleString('en'), " ", drawDetail.currency)), drawDetail.state == 'lost' &&
263
+ h("div", { class: "DrawIdContainer" }, h("p", null, translate('drawId', this.language), ": ", drawDetail.drawId))), h("div", { class: "ExpandableBoxBody" }, h("div", { class: "DrawIdContainer" }, h("p", null, translate('drawId', this.language), ": ", drawDetail.drawId)), h("div", { class: "DrawDateContainer" }, h("p", null, translate('drawDate', this.language), ": ", (_a = drawDetail.drawData) === null || _a === void 0 ? void 0 :
264
+ _a.date.slice(0, 10), " | ", (_b = drawDetail.drawData) === null || _b === void 0 ? void 0 :
265
+ _b.date.slice(11, 19))), h("div", { class: "DrawNumbersGrid" }, drawDetail.drawData &&
266
+ h("div", { class: 'BulletContainer' }, h("label", { class: "Label" }, translate('drawNumbersGridDraw', this.language), " ", String.fromCharCode(index + 10), ":"), 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 }))), h("div", { class: "DrawMultipler" }, h("label", { class: "Label" }, translate('multiplier', this.language), " ", (_e = drawDetail.drawData) === null || _e === void 0 ? void 0 :
267
+ _e.multiplier))));
268
+ }))))))));
322
269
  }
323
270
  }
324
271
  static get style() { return lotteryDrawResultsCss; }
@@ -340,17 +287,17 @@ const LotteryDrawResults$1 = /*@__PURE__*/ proxyCustomElement(class extends HTML
340
287
  "sessionId": [1, "session-id"],
341
288
  "clientStyling": [1, "client-styling"],
342
289
  "clientStylingUrlContent": [1, "client-styling-url-content"],
290
+ "ticketDrawData": [1, "ticket-draw-data"],
343
291
  "multiplier": [32],
344
292
  "isLoading": [32],
345
- "rules": [32],
346
- "toggleDrawer": [32],
347
293
  "hasErrors": [32],
348
294
  "errorText": [32],
349
295
  "ticketData": [32],
350
296
  "ticketDataLoaded": [32],
351
297
  "ticketDraws": [32],
352
- "hasDrawNumbers": [32],
353
- "limitStylingAppends": [32]
298
+ "toggleDrawer": [32],
299
+ "limitStylingAppends": [32],
300
+ "drawData": [32]
354
301
  }]);
355
302
  function defineCustomElement$1() {
356
303
  if (typeof customElements === "undefined") {