@everymatrix/lottery-grid 1.52.6 → 1.53.10

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.
@@ -1,8 +1,76 @@
1
1
  import { h } from "@stencil/core";
2
- // import { translate } from '../../utils/locale.utils';
3
2
  import "../../../../../lottery-bullet/dist/types/index";
4
3
  export class LotteryGrid {
5
4
  constructor() {
5
+ /**
6
+ * Number of bullets of grid
7
+ */
8
+ this.totalNumbers = 0;
9
+ /**
10
+ * Number of maximum bullets that can be selected
11
+ */
12
+ this.maximumAllowed = 7;
13
+ /**
14
+ * Minimum allowed of bullets
15
+ */
16
+ this.minimumAllowed = 3;
17
+ /**
18
+ * Allows the user to select numbers on the grid
19
+ */
20
+ this.selectable = true;
21
+ /**
22
+ * Numbers that should be showed as selected on the grid (as a string of those numbers e.g. '1,2,3,4,5,6')
23
+ */
24
+ this.selectedNumbers = '';
25
+ /**
26
+ * Bonus numbers that should be showed as selected on the grid (as a string of those numbers e.g. '1')
27
+ */
28
+ this.secondaryNumbers = '';
29
+ /**
30
+ * Show only selected numbers
31
+ */
32
+ this.displaySelected = false;
33
+ /**
34
+ * Language
35
+ */
36
+ this.language = 'en';
37
+ /**
38
+ * Personalize grid for ticket
39
+ */
40
+ this.gridType = '';
41
+ /**
42
+ * Client custom styling via string
43
+ */
44
+ this.clientStyling = '';
45
+ /**
46
+ * Client custom styling via url content
47
+ */
48
+ this.clientStylingUrlContent = '';
49
+ /**
50
+ * Maximum number of the grid
51
+ */
52
+ this.highNumber = 47;
53
+ /**
54
+ * Lowest number of the grid
55
+ */
56
+ this.lowNumber = 1;
57
+ /**
58
+ * Type of selection
59
+ */
60
+ this.selectionType = 'mainSelection';
61
+ /**
62
+ * Allows partial quickpick or not
63
+ */
64
+ this.partialQuickpickAvailable = false;
65
+ /**
66
+ * main selection numbers
67
+ */
68
+ this.numbers = [];
69
+ /**
70
+ * Bonus selection numbers
71
+ */
72
+ this.bonusNumbers = [];
73
+ this.limitStylingAppends = false;
6
74
  this.selectedCounter = 0;
7
75
  this.setClientStyling = () => {
8
76
  let sheet = document.createElement('style');
@@ -16,21 +84,6 @@ export class LotteryGrid {
16
84
  this.stylingContainer.prepend(cssFile);
17
85
  }, 1);
18
86
  };
19
- this.ticketId = undefined;
20
- this.totalNumbers = 0;
21
- this.gameId = undefined;
22
- this.maximumAllowed = 0;
23
- this.minimumAllowed = 1;
24
- this.selectable = true;
25
- this.selectedNumbers = '';
26
- this.displaySelected = false;
27
- this.language = 'en';
28
- this.gridIndex = undefined;
29
- this.gridType = '';
30
- this.clientStyling = '';
31
- this.clientStylingUrlContent = '';
32
- this.numbers = [];
33
- this.limitStylingAppends = false;
34
87
  }
35
88
  connectedCallback() {
36
89
  let selected = [];
@@ -38,6 +91,15 @@ export class LotteryGrid {
38
91
  selected = this.selectedNumbers.split(',');
39
92
  this.selectedCounter = selected.length;
40
93
  }
94
+ if (this.secondaryNumbers.length > 0) {
95
+ this.bonusNumbers = this.secondaryNumbers.split(',').map(item => {
96
+ return {
97
+ number: item,
98
+ selected: true,
99
+ selectable: this.selectable
100
+ };
101
+ });
102
+ }
41
103
  if (this.displaySelected) {
42
104
  selected.forEach((item) => {
43
105
  this.numbers.push({
@@ -48,9 +110,8 @@ export class LotteryGrid {
48
110
  });
49
111
  }
50
112
  else {
51
- [...Array(this.totalNumbers).keys()]
52
- .map(number => (number + 1).toString())
53
- .forEach((number) => {
113
+ let gridNumbers = Array.from({ length: this.highNumber - this.lowNumber + 1 }, (_, index) => this.lowNumber + index);
114
+ gridNumbers.map(number => number.toString()).forEach((number) => {
54
115
  this.numbers.push({
55
116
  number,
56
117
  selected: selected.indexOf(number) >= 0 ? true : false,
@@ -81,56 +142,81 @@ export class LotteryGrid {
81
142
  }
82
143
  lotteryBulletSelectionHandler(event) {
83
144
  this.numbers = this.numbers.map((item) => {
84
- if (item.number == event.detail.value) {
85
- return {
86
- number: item.number,
87
- selected: event.detail.selected,
88
- selectable: item.selectable
89
- };
90
- }
91
145
  return {
92
146
  number: item.number,
93
- selected: item.selected,
147
+ selected: item.number == event.detail.value ? event.detail.selected : item.selected,
94
148
  selectable: item.selectable
95
149
  };
96
150
  });
97
151
  if (event.detail.selected) {
98
152
  this.selectedCounter += 1;
99
- if (this.selectedCounter == this.maximumAllowed) {
153
+ if (this.selectedCounter >= this.minimumAllowed && this.selectedCounter <= this.maximumAllowed) {
100
154
  this.numbers = this.numbers.map((item) => {
101
- return {
102
- number: item.number,
103
- selected: item.selected,
104
- selectable: item.selected ? true : false
105
- };
155
+ if (this.selectedCounter === this.maximumAllowed) {
156
+ return {
157
+ number: item.number,
158
+ selected: item.selected,
159
+ selectable: item.selected ? true : false
160
+ };
161
+ }
162
+ else {
163
+ return {
164
+ number: item.number,
165
+ selected: item.selected,
166
+ selectable: true
167
+ };
168
+ }
106
169
  });
107
- this.gridFilledEvent.emit({
170
+ if (JSON.parse(this.numberRange).includes(this.selectedCounter)) {
171
+ this.gridFilledEvent.emit({
172
+ id: this.ticketId,
173
+ index: this.gridIndex,
174
+ selectionType: this.selectionType,
175
+ selectedNumbers: this.numbers.filter((item) => item.selected).map((item) => item.number)
176
+ });
177
+ }
178
+ else {
179
+ this.gridDirtyEvent.emit({
180
+ id: this.ticketId,
181
+ index: this.gridIndex,
182
+ selectionType: this.selectionType,
183
+ selectedNumbers: this.numbers.filter((item) => item.selected).map((item) => item.number)
184
+ });
185
+ }
186
+ }
187
+ }
188
+ else {
189
+ this.selectedCounter -= 1;
190
+ this.numbers = this.numbers.map((item) => {
191
+ return {
192
+ number: item.number,
193
+ selected: item.selected,
194
+ selectable: true
195
+ };
196
+ });
197
+ if (this.selectedCounter < this.minimumAllowed) {
198
+ this.gridDirtyEvent.emit({
108
199
  id: this.ticketId,
109
200
  index: this.gridIndex,
201
+ selectionType: this.selectionType,
110
202
  selectedNumbers: this.numbers.filter((item) => item.selected).map((item) => item.number)
111
203
  });
112
204
  }
113
- }
114
- else {
115
- if (this.selectedCounter == this.maximumAllowed) {
116
- this.numbers = this.numbers.map((item) => {
117
- return {
118
- number: item.number,
119
- selected: item.selected,
120
- selectable: true
121
- };
122
- });
123
- this.gridDirtyEvent.emit({
205
+ else {
206
+ this.gridFilledEvent.emit({
124
207
  id: this.ticketId,
125
208
  index: this.gridIndex,
209
+ selectionType: this.selectionType,
126
210
  selectedNumbers: this.numbers.filter((item) => item.selected).map((item) => item.number)
127
211
  });
128
212
  }
129
- this.selectedCounter -= 1;
213
+ if (this.selectedCounter === 0) {
214
+ this.gridClearAllEvent.emit(this.gridIndex);
215
+ }
130
216
  }
131
217
  }
132
218
  async resetSelectionHandler(event) {
133
- if (event.detail && event.detail == this.ticketId) {
219
+ if (event.detail && event.detail.ticketId == this.ticketId && event.detail.index === this.gridIndex) {
134
220
  this.selectedCounter = 0;
135
221
  this.numbers = this.numbers.map((item) => {
136
222
  return {
@@ -142,34 +228,35 @@ export class LotteryGrid {
142
228
  this.gridDirtyEvent.emit({
143
229
  id: this.ticketId,
144
230
  index: this.gridIndex,
145
- selectedNumbers: this.numbers.filter((item) => item.selected).map((item) => item.number)
231
+ selectionType: this.selectionType,
232
+ selectedNumbers: []
146
233
  });
147
234
  }
148
235
  }
149
236
  async autoSelectionHandler(event) {
150
- if (event.detail && event.detail == this.ticketId) {
237
+ if (event.detail && event.detail.ticketId == this.ticketId && event.detail.index === this.gridIndex) {
151
238
  this.resetSelectionHandler(event);
152
- let array = [...Array(this.totalNumbers).keys()]
153
- .map(number => number + 1);
239
+ let array = Array.from({ length: this.highNumber - this.lowNumber + 1 }, (_, index) => this.lowNumber + index);
154
240
  array = this.shuffleArray(array);
155
241
  array = array.slice(0, this.minimumAllowed);
156
242
  this.numbers = this.numbers.map((item) => {
157
243
  return {
158
244
  number: item.number,
159
245
  selected: array.indexOf(parseInt(item.number, 10)) >= 0 ? true : false,
160
- selectable: array.indexOf(parseInt(item.number, 10)) >= 0 ? true : false,
246
+ selectable: this.partialQuickpickAvailable ? array.indexOf(parseInt(item.number, 10)) >= 0 ? true : false : false,
161
247
  };
162
248
  });
163
249
  this.gridFilledEvent.emit({
164
250
  id: this.ticketId,
165
251
  index: this.gridIndex,
252
+ selectionType: this.selectionType,
166
253
  selectedNumbers: this.numbers.filter((item) => item.selected).map((item) => item.number)
167
254
  });
168
- this.selectedCounter = this.maximumAllowed;
255
+ this.selectedCounter = this.minimumAllowed;
169
256
  }
170
257
  }
171
258
  render() {
172
- return (h("div", { key: '54b9187146b5d2625fd5ce7f53f38abf091cd943', class: "GridContainer", ref: el => this.stylingContainer = el }, h("div", { key: 'e7e8570557ebaa78edf881cdbc1ed720028cdf6e', class: this.gridType === 'ticket' ? 'Grid TicketGrid' : 'Grid' }, this.numbers.map((item) => h("div", null, h("lottery-bullet", { value: item.number, selectable: item.selectable, "is-selected": item.selected, "client-styling": this.clientStyling, "client-styling-url-content": this.clientStylingUrlContent }))))));
259
+ return (h("div", { key: '8ad436904a126e6bee036c7372cf45c075022e5f', class: "GridContainer", ref: el => this.stylingContainer = el }, h("div", { key: '5a8818209485f0808a99978910f6f26473dd6f59', class: this.gridType === 'ticket' ? 'Grid TicketGrid' : 'Grid' }, this.numbers.map((item) => h("div", null, h("lottery-bullet", { value: item.number, selectable: item.selectable, "is-selected": item.selected, "client-styling": this.clientStyling, "client-styling-url-content": this.clientStylingUrlContent }))), this.bonusNumbers.length ? this.bonusNumbers.map((item) => h("div", null, h("lottery-bullet", { value: item.number, selectable: item.selectable, "is-selected": item.selected, "is-bonus": true, "client-styling": this.clientStyling, "client-styling-url-content": this.clientStylingUrlContent }))) : '')));
173
260
  }
174
261
  static get is() { return "lottery-grid"; }
175
262
  static get encapsulation() { return "shadow"; }
@@ -199,6 +286,8 @@ export class LotteryGrid {
199
286
  "tags": [],
200
287
  "text": "Identifier for the ticket"
201
288
  },
289
+ "getter": false,
290
+ "setter": false,
202
291
  "attribute": "ticket-id",
203
292
  "reflect": true
204
293
  },
@@ -216,6 +305,8 @@ export class LotteryGrid {
216
305
  "tags": [],
217
306
  "text": "Number of bullets of grid"
218
307
  },
308
+ "getter": false,
309
+ "setter": false,
219
310
  "attribute": "total-numbers",
220
311
  "reflect": true,
221
312
  "defaultValue": "0"
@@ -234,6 +325,8 @@ export class LotteryGrid {
234
325
  "tags": [],
235
326
  "text": "Game ID"
236
327
  },
328
+ "getter": false,
329
+ "setter": false,
237
330
  "attribute": "game-id",
238
331
  "reflect": true
239
332
  },
@@ -251,9 +344,11 @@ export class LotteryGrid {
251
344
  "tags": [],
252
345
  "text": "Number of maximum bullets that can be selected"
253
346
  },
347
+ "getter": false,
348
+ "setter": false,
254
349
  "attribute": "maximum-allowed",
255
350
  "reflect": true,
256
- "defaultValue": "0"
351
+ "defaultValue": "7"
257
352
  },
258
353
  "minimumAllowed": {
259
354
  "type": "number",
@@ -269,9 +364,30 @@ export class LotteryGrid {
269
364
  "tags": [],
270
365
  "text": "Minimum allowed of bullets"
271
366
  },
367
+ "getter": false,
368
+ "setter": false,
272
369
  "attribute": "minimum-allowed",
273
370
  "reflect": true,
274
- "defaultValue": "1"
371
+ "defaultValue": "3"
372
+ },
373
+ "numberRange": {
374
+ "type": "string",
375
+ "mutable": false,
376
+ "complexType": {
377
+ "original": "string",
378
+ "resolved": "string",
379
+ "references": {}
380
+ },
381
+ "required": false,
382
+ "optional": false,
383
+ "docs": {
384
+ "tags": [],
385
+ "text": "The number of numbers user can select on the grid"
386
+ },
387
+ "getter": false,
388
+ "setter": false,
389
+ "attribute": "number-range",
390
+ "reflect": true
275
391
  },
276
392
  "selectable": {
277
393
  "type": "boolean",
@@ -287,6 +403,8 @@ export class LotteryGrid {
287
403
  "tags": [],
288
404
  "text": "Allows the user to select numbers on the grid"
289
405
  },
406
+ "getter": false,
407
+ "setter": false,
290
408
  "attribute": "selectable",
291
409
  "reflect": true,
292
410
  "defaultValue": "true"
@@ -305,10 +423,32 @@ export class LotteryGrid {
305
423
  "tags": [],
306
424
  "text": "Numbers that should be showed as selected on the grid (as a string of those numbers e.g. '1,2,3,4,5,6')"
307
425
  },
426
+ "getter": false,
427
+ "setter": false,
308
428
  "attribute": "selected-numbers",
309
429
  "reflect": true,
310
430
  "defaultValue": "''"
311
431
  },
432
+ "secondaryNumbers": {
433
+ "type": "string",
434
+ "mutable": false,
435
+ "complexType": {
436
+ "original": "string",
437
+ "resolved": "string",
438
+ "references": {}
439
+ },
440
+ "required": false,
441
+ "optional": false,
442
+ "docs": {
443
+ "tags": [],
444
+ "text": "Bonus numbers that should be showed as selected on the grid (as a string of those numbers e.g. '1')"
445
+ },
446
+ "getter": false,
447
+ "setter": false,
448
+ "attribute": "secondary-numbers",
449
+ "reflect": true,
450
+ "defaultValue": "''"
451
+ },
312
452
  "displaySelected": {
313
453
  "type": "boolean",
314
454
  "mutable": false,
@@ -323,6 +463,8 @@ export class LotteryGrid {
323
463
  "tags": [],
324
464
  "text": "Show only selected numbers"
325
465
  },
466
+ "getter": false,
467
+ "setter": false,
326
468
  "attribute": "display-selected",
327
469
  "reflect": true,
328
470
  "defaultValue": "false"
@@ -341,6 +483,8 @@ export class LotteryGrid {
341
483
  "tags": [],
342
484
  "text": "Language"
343
485
  },
486
+ "getter": false,
487
+ "setter": false,
344
488
  "attribute": "language",
345
489
  "reflect": true,
346
490
  "defaultValue": "'en'"
@@ -359,6 +503,8 @@ export class LotteryGrid {
359
503
  "tags": [],
360
504
  "text": "The index of the number"
361
505
  },
506
+ "getter": false,
507
+ "setter": false,
362
508
  "attribute": "grid-index",
363
509
  "reflect": true
364
510
  },
@@ -376,6 +522,8 @@ export class LotteryGrid {
376
522
  "tags": [],
377
523
  "text": "Personalize grid for ticket"
378
524
  },
525
+ "getter": false,
526
+ "setter": false,
379
527
  "attribute": "grid-type",
380
528
  "reflect": true,
381
529
  "defaultValue": "''"
@@ -394,6 +542,8 @@ export class LotteryGrid {
394
542
  "tags": [],
395
543
  "text": "Client custom styling via string"
396
544
  },
545
+ "getter": false,
546
+ "setter": false,
397
547
  "attribute": "client-styling",
398
548
  "reflect": true,
399
549
  "defaultValue": "''"
@@ -412,15 +562,98 @@ export class LotteryGrid {
412
562
  "tags": [],
413
563
  "text": "Client custom styling via url content"
414
564
  },
565
+ "getter": false,
566
+ "setter": false,
415
567
  "attribute": "client-styling-url-content",
416
568
  "reflect": true,
417
569
  "defaultValue": "''"
570
+ },
571
+ "highNumber": {
572
+ "type": "number",
573
+ "mutable": false,
574
+ "complexType": {
575
+ "original": "number",
576
+ "resolved": "number",
577
+ "references": {}
578
+ },
579
+ "required": false,
580
+ "optional": false,
581
+ "docs": {
582
+ "tags": [],
583
+ "text": "Maximum number of the grid"
584
+ },
585
+ "getter": false,
586
+ "setter": false,
587
+ "attribute": "high-number",
588
+ "reflect": true,
589
+ "defaultValue": "47"
590
+ },
591
+ "lowNumber": {
592
+ "type": "number",
593
+ "mutable": false,
594
+ "complexType": {
595
+ "original": "number",
596
+ "resolved": "number",
597
+ "references": {}
598
+ },
599
+ "required": false,
600
+ "optional": false,
601
+ "docs": {
602
+ "tags": [],
603
+ "text": "Lowest number of the grid"
604
+ },
605
+ "getter": false,
606
+ "setter": false,
607
+ "attribute": "low-number",
608
+ "reflect": true,
609
+ "defaultValue": "1"
610
+ },
611
+ "selectionType": {
612
+ "type": "string",
613
+ "mutable": false,
614
+ "complexType": {
615
+ "original": "string",
616
+ "resolved": "string",
617
+ "references": {}
618
+ },
619
+ "required": false,
620
+ "optional": false,
621
+ "docs": {
622
+ "tags": [],
623
+ "text": "Type of selection"
624
+ },
625
+ "getter": false,
626
+ "setter": false,
627
+ "attribute": "selection-type",
628
+ "reflect": true,
629
+ "defaultValue": "'mainSelection'"
630
+ },
631
+ "partialQuickpickAvailable": {
632
+ "type": "boolean",
633
+ "mutable": false,
634
+ "complexType": {
635
+ "original": "boolean",
636
+ "resolved": "boolean",
637
+ "references": {}
638
+ },
639
+ "required": false,
640
+ "optional": false,
641
+ "docs": {
642
+ "tags": [],
643
+ "text": "Allows partial quickpick or not"
644
+ },
645
+ "getter": false,
646
+ "setter": false,
647
+ "attribute": "partial-quickpick-available",
648
+ "reflect": true,
649
+ "defaultValue": "false"
418
650
  }
419
651
  };
420
652
  }
421
653
  static get states() {
422
654
  return {
423
655
  "numbers": {},
656
+ "bonusNumbers": {},
424
657
  "limitStylingAppends": {}
425
658
  };
426
659
  }
@@ -467,6 +700,21 @@ export class LotteryGrid {
467
700
  }
468
701
  }
469
702
  }
703
+ }, {
704
+ "method": "gridClearAllEvent",
705
+ "name": "gridClearAllEvent",
706
+ "bubbles": true,
707
+ "cancelable": true,
708
+ "composed": true,
709
+ "docs": {
710
+ "tags": [],
711
+ "text": "When all the selection of each bullet are cleared, it emits this event"
712
+ },
713
+ "complexType": {
714
+ "original": "number",
715
+ "resolved": "number",
716
+ "references": {}
717
+ }
470
718
  }];
471
719
  }
472
720
  static get listeners() {
@@ -3,23 +3,23 @@ const SUPPORTED_LANGUAGES = ['ro', 'en', 'hr'];
3
3
  const TRANSLATIONS = {
4
4
  en: {
5
5
  resetButton: 'Reset',
6
- autoButton: 'I feel lucky'
6
+ autoButton: 'quick pick'
7
7
  },
8
8
  ro: {
9
9
  resetButton: 'Reseteaza',
10
- autoButton: 'Ma simt norocos'
10
+ autoButton: 'quick pick'
11
11
  },
12
12
  fr: {
13
13
  resetButton: 'Reset',
14
- autoButton: 'I feel lucky'
14
+ autoButton: 'quick pick'
15
15
  },
16
16
  ar: {
17
17
  resetButton: 'Reset',
18
- autoButton: 'I feel lucky'
18
+ autoButton: 'quick pick'
19
19
  },
20
20
  hr: {
21
21
  resetButton: 'Resetiraj',
22
- autoButton: 'Osjećam se sretno'
22
+ autoButton: 'quick pick'
23
23
  }
24
24
  };
25
25
  export const translate = (key, customLang) => {