@everymatrix/lottery-ticket 1.31.2 → 1.32.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 (54) hide show
  1. package/LICENSE +21 -0
  2. package/package.json +4 -3
  3. package/dist/cjs/index-e62c9a3f.js +0 -1283
  4. package/dist/cjs/index.cjs.js +0 -2
  5. package/dist/cjs/loader.cjs.js +0 -21
  6. package/dist/cjs/lottery-bullet_3.cjs.entry.js +0 -504
  7. package/dist/cjs/lottery-ticket.cjs.js +0 -19
  8. package/dist/collection/collection-manifest.json +0 -25
  9. package/dist/collection/components/lottery-ticket/lottery-ticket.css +0 -307
  10. package/dist/collection/components/lottery-ticket/lottery-ticket.js +0 -494
  11. package/dist/collection/components/lottery-ticket/lottery-ticket.types.js +0 -1
  12. package/dist/collection/index.js +0 -1
  13. package/dist/collection/utils/locale.utils.js +0 -58
  14. package/dist/collection/utils/utils.js +0 -0
  15. package/dist/components/index.d.ts +0 -26
  16. package/dist/components/index.js +0 -1
  17. package/dist/components/lottery-bullet.js +0 -6
  18. package/dist/components/lottery-bullet2.js +0 -91
  19. package/dist/components/lottery-grid.js +0 -6
  20. package/dist/components/lottery-grid2.js +0 -245
  21. package/dist/components/lottery-ticket.d.ts +0 -11
  22. package/dist/components/lottery-ticket.js +0 -276
  23. package/dist/esm/index-a0f57440.js +0 -1257
  24. package/dist/esm/index.js +0 -1
  25. package/dist/esm/loader.js +0 -17
  26. package/dist/esm/lottery-bullet_3.entry.js +0 -498
  27. package/dist/esm/lottery-ticket.js +0 -17
  28. package/dist/esm/polyfills/core-js.js +0 -11
  29. package/dist/esm/polyfills/css-shim.js +0 -1
  30. package/dist/esm/polyfills/dom.js +0 -79
  31. package/dist/esm/polyfills/es5-html-element.js +0 -1
  32. package/dist/esm/polyfills/index.js +0 -34
  33. package/dist/esm/polyfills/system.js +0 -6
  34. package/dist/index.cjs.js +0 -1
  35. package/dist/index.js +0 -1
  36. package/dist/lottery-ticket/index.esm.js +0 -0
  37. package/dist/lottery-ticket/lottery-ticket.esm.js +0 -1
  38. package/dist/lottery-ticket/p-5aa3d0a5.entry.js +0 -1
  39. package/dist/lottery-ticket/p-9cd1415d.js +0 -1
  40. package/dist/stencil.config.js +0 -22
  41. package/dist/types/Users/dragos.bodea/Documents/everymatrix-prjs/emfe-widgets/widgets-stencil/packages/lottery-ticket/.stencil/packages/lottery-ticket/stencil.config.d.ts +0 -2
  42. package/dist/types/components/lottery-ticket/lottery-ticket.d.ts +0 -82
  43. package/dist/types/components/lottery-ticket/lottery-ticket.types.d.ts +0 -49
  44. package/dist/types/components.d.ts +0 -125
  45. package/dist/types/index.d.ts +0 -1
  46. package/dist/types/stencil-public-runtime.d.ts +0 -1565
  47. package/dist/types/utils/locale.utils.d.ts +0 -1
  48. package/dist/types/utils/utils.d.ts +0 -0
  49. package/loader/cdn.js +0 -3
  50. package/loader/index.cjs.js +0 -3
  51. package/loader/index.d.ts +0 -12
  52. package/loader/index.es2017.js +0 -3
  53. package/loader/index.js +0 -4
  54. package/loader/package.json +0 -10
@@ -1,2 +0,0 @@
1
- 'use strict';
2
-
@@ -1,21 +0,0 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
- const index = require('./index-e62c9a3f.js');
6
-
7
- /*
8
- Stencil Client Patch Esm v2.15.2 | MIT Licensed | https://stenciljs.com
9
- */
10
- const patchEsm = () => {
11
- return index.promiseResolve();
12
- };
13
-
14
- const defineCustomElements = (win, options) => {
15
- if (typeof window === 'undefined') return Promise.resolve();
16
- return patchEsm().then(() => {
17
- return index.bootstrapLazy([["lottery-bullet_3.cjs",[[1,"lottery-ticket",{"endpoint":[513],"gameId":[513,"game-id"],"numberOfGrids":[514,"number-of-grids"],"multipleDraws":[516,"multiple-draws"],"ticketId":[514,"ticket-id"],"resetButton":[516,"reset-button"],"autoPick":[516,"auto-pick"],"language":[513],"clientStyling":[513,"client-styling"],"clientStylingUrlContent":[513,"client-styling-url-content"],"multiplier":[32],"numberOfDraws":[32],"isLoading":[32],"hasErrors":[32],"ticketDone":[32],"isCustomSelect":[32],"amountInfo":[32],"limitStylingAppends":[32]},[[8,"click","checkForClickOutside"],[0,"gridFilled","gridFilledHandler"]]],[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);
18
- });
19
- };
20
-
21
- exports.defineCustomElements = defineCustomElements;
@@ -1,504 +0,0 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
- const index = require('./index-e62c9a3f.js');
6
-
7
- 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}";
8
-
9
- const LotteryBullet = class {
10
- constructor(hostRef) {
11
- index.registerInstance(this, hostRef);
12
- this.bulletEvent = index.createEvent(this, "lotteryBulletSelection", 7);
13
- /**
14
- * Value of the bullet
15
- */
16
- this.value = '0';
17
- /**
18
- * Marks if the bullet should be selectable
19
- */
20
- this.selectable = true;
21
- /**
22
- * Marks if the bullet should be selected
23
- */
24
- this.isSelected = false;
25
- /**
26
- * Client custom styling via string
27
- */
28
- this.clientStyling = '';
29
- /**
30
- * Client custom styling via url content
31
- */
32
- this.clientStylingUrlContent = '';
33
- this.limitStylingAppends = false;
34
- this.select = () => {
35
- if (this.selectable) {
36
- this.isSelected = !this.isSelected;
37
- this.bulletEvent.emit({
38
- value: this.value,
39
- selected: this.isSelected
40
- });
41
- }
42
- };
43
- this.setClientStyling = () => {
44
- let sheet = document.createElement('style');
45
- sheet.innerHTML = this.clientStyling;
46
- this.stylingContainer.prepend(sheet);
47
- };
48
- this.setClientStylingURL = () => {
49
- let cssFile = document.createElement('style');
50
- setTimeout(() => {
51
- cssFile.innerHTML = this.clientStylingUrlContent;
52
- this.stylingContainer.prepend(cssFile);
53
- }, 1);
54
- };
55
- }
56
- componentDidRender() {
57
- // start custom styling area
58
- if (!this.limitStylingAppends && this.stylingContainer) {
59
- if (this.clientStyling)
60
- this.setClientStyling();
61
- if (this.clientStylingUrlContent)
62
- this.setClientStylingURL();
63
- this.limitStylingAppends = true;
64
- }
65
- // end custom styling area
66
- }
67
- render() {
68
- return (index.h("div", { class: 'Circle ' + (this.selectable ? '' : 'Disabled') + (this.isSelected ? 'Selected' : ''), onClick: () => this.select(), ref: el => this.stylingContainer = el }, this.value));
69
- }
70
- };
71
- LotteryBullet.style = lotteryBulletCss;
72
-
73
- const lotteryGridCss = "@import url(\"https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap\");:host{display:block;font-family:\"Roboto\", sans-serif}.GridContainer{display:flex;flex-direction:column;max-width:1200px}.Grid{margin-top:10px 0 10px 0;display:flex;flex-direction:row;flex-wrap:wrap;gap:20px}.Grid.TicketGrid{gap:5px}";
74
-
75
- const LotteryGrid = class {
76
- constructor(hostRef) {
77
- index.registerInstance(this, hostRef);
78
- this.gridFilledEvent = index.createEvent(this, "gridFilled", 7);
79
- this.gridDirtyEvent = index.createEvent(this, "gridDirty", 7);
80
- /**
81
- * Number of bullets of grid
82
- */
83
- this.totalNumbers = 0;
84
- /**
85
- * Number of maximum bullets that can be selected
86
- */
87
- this.maximumAllowed = 0;
88
- /**
89
- * Minimum allowed of bullets
90
- */
91
- this.minimumAllowed = 1;
92
- /**
93
- * Allows the user to select numbers on the grid
94
- */
95
- this.selectable = true;
96
- /**
97
- * Numbers that should be showed as selected on the grid (as a string of those numbers e.g. '1,2,3,4,5,6')
98
- */
99
- this.selectedNumbers = '';
100
- /**
101
- * Show only selected numbers
102
- */
103
- this.displaySelected = false;
104
- /**
105
- * Language
106
- */
107
- this.language = 'en';
108
- /**
109
- * Personalize grid for ticket
110
- */
111
- this.gridType = '';
112
- /**
113
- * Client custom styling via string
114
- */
115
- this.clientStyling = '';
116
- /**
117
- * Client custom styling via url content
118
- */
119
- this.clientStylingUrlContent = '';
120
- this.numbers = [];
121
- this.limitStylingAppends = false;
122
- this.selectedCounter = 0;
123
- this.setClientStyling = () => {
124
- let sheet = document.createElement('style');
125
- sheet.innerHTML = this.clientStyling;
126
- this.stylingContainer.prepend(sheet);
127
- };
128
- this.setClientStylingURL = () => {
129
- let cssFile = document.createElement('style');
130
- setTimeout(() => {
131
- cssFile.innerHTML = this.clientStylingUrlContent;
132
- this.stylingContainer.prepend(cssFile);
133
- }, 1);
134
- };
135
- }
136
- connectedCallback() {
137
- let selected = [];
138
- if (this.selectedNumbers.length > 0) {
139
- selected = this.selectedNumbers.split(',');
140
- this.selectedCounter = selected.length;
141
- }
142
- if (this.displaySelected) {
143
- selected.forEach((item) => {
144
- this.numbers.push({
145
- number: item,
146
- selected: true,
147
- selectable: this.selectable
148
- });
149
- });
150
- }
151
- else {
152
- [...Array(this.totalNumbers).keys()]
153
- .map(number => (number + 1).toString())
154
- .forEach((number) => {
155
- this.numbers.push({
156
- number,
157
- selected: selected.indexOf(number) >= 0 ? true : false,
158
- selectable: this.selectedCounter == this.maximumAllowed ? false : this.selectable
159
- });
160
- });
161
- }
162
- }
163
- componentDidRender() {
164
- // start custom styling area
165
- if (!this.limitStylingAppends && this.stylingContainer) {
166
- if (this.clientStyling)
167
- this.setClientStyling();
168
- if (this.clientStylingUrlContent)
169
- this.setClientStylingURL();
170
- this.limitStylingAppends = true;
171
- }
172
- // end custom styling area
173
- }
174
- // wrote this because the classic .sort(() => 0.5 - Math.random()) method yielded low entropy shuffles for some reason on certain devices
175
- shuffleArray(array) {
176
- const result = [];
177
- while (array.length > 0) {
178
- const randomIndex = Math.floor(Math.random() * (array.length));
179
- result.push(array.splice(randomIndex, 1)[0]);
180
- }
181
- return result;
182
- }
183
- lotteryBulletSelectionHandler(event) {
184
- this.numbers = this.numbers.map((item) => {
185
- if (item.number == event.detail.value) {
186
- return {
187
- number: item.number,
188
- selected: event.detail.selected,
189
- selectable: item.selectable
190
- };
191
- }
192
- return {
193
- number: item.number,
194
- selected: item.selected,
195
- selectable: item.selectable
196
- };
197
- });
198
- if (event.detail.selected) {
199
- this.selectedCounter += 1;
200
- if (this.selectedCounter == this.maximumAllowed) {
201
- this.numbers = this.numbers.map((item) => {
202
- return {
203
- number: item.number,
204
- selected: item.selected,
205
- selectable: item.selected ? true : false
206
- };
207
- });
208
- this.gridFilledEvent.emit({
209
- id: this.ticketId,
210
- index: this.gridIndex,
211
- selectedNumbers: this.numbers.filter((item) => item.selected).map((item) => item.number)
212
- });
213
- }
214
- }
215
- else {
216
- if (this.selectedCounter == this.maximumAllowed) {
217
- this.numbers = this.numbers.map((item) => {
218
- return {
219
- number: item.number,
220
- selected: item.selected,
221
- selectable: true
222
- };
223
- });
224
- this.gridDirtyEvent.emit({
225
- id: this.ticketId,
226
- index: this.gridIndex,
227
- selectedNumbers: this.numbers.filter((item) => item.selected).map((item) => item.number)
228
- });
229
- }
230
- this.selectedCounter -= 1;
231
- }
232
- }
233
- async resetSelectionHandler(event) {
234
- if (event.detail && event.detail == this.ticketId) {
235
- this.selectedCounter = 0;
236
- this.numbers = this.numbers.map((item) => {
237
- return {
238
- number: item.number,
239
- selected: false,
240
- selectable: this.selectable
241
- };
242
- });
243
- this.gridDirtyEvent.emit({
244
- id: this.ticketId,
245
- index: this.gridIndex,
246
- selectedNumbers: this.numbers.filter((item) => item.selected).map((item) => item.number)
247
- });
248
- }
249
- }
250
- async autoSelectionHandler(event) {
251
- if (event.detail && event.detail == this.ticketId) {
252
- this.resetSelectionHandler(event);
253
- let array = [...Array(this.totalNumbers).keys()]
254
- .map(number => number + 1);
255
- array = this.shuffleArray(array);
256
- array = array.slice(0, this.minimumAllowed);
257
- this.numbers = this.numbers.map((item) => {
258
- return {
259
- number: item.number,
260
- selected: array.indexOf(parseInt(item.number, 10)) >= 0 ? true : false,
261
- selectable: array.indexOf(parseInt(item.number, 10)) >= 0 ? true : false,
262
- };
263
- });
264
- this.gridFilledEvent.emit({
265
- id: this.ticketId,
266
- index: this.gridIndex,
267
- selectedNumbers: this.numbers.filter((item) => item.selected).map((item) => item.number)
268
- });
269
- this.selectedCounter = this.maximumAllowed;
270
- }
271
- }
272
- render() {
273
- return (index.h("div", { class: "GridContainer", ref: el => this.stylingContainer = el }, index.h("div", { class: this.gridType === 'ticket' ? 'Grid TicketGrid' : 'Grid' }, this.numbers.map((item) => index.h("div", null, index.h("lottery-bullet", { value: item.number, selectable: item.selectable, "is-selected": item.selected, "client-styling": this.clientStyling, "client-styling-url-content": this.clientStylingUrlContent }))))));
274
- }
275
- };
276
- LotteryGrid.style = lotteryGridCss;
277
-
278
- const DEFAULT_LANGUAGE = 'en';
279
- const SUPPORTED_LANGUAGES = ['ro', 'en', 'hr'];
280
- const TRANSLATIONS = {
281
- en: {
282
- loading: 'Loading, please wait ...',
283
- error: 'It was an error while trying to fetch the data',
284
- grid: 'Grid',
285
- multiplier: 'Multiplier',
286
- numberOfDraws: 'Number of draws',
287
- wagerPerDraw: 'Wager per draw',
288
- resetButton: 'Reset',
289
- autoButton: 'I feel lucky'
290
- },
291
- ro: {
292
- loading: 'Se incarca, va rugam asteptati ...',
293
- error: 'A fost o eroare in timp ce asteptam datele',
294
- grid: 'Grid',
295
- multiplier: 'Multiplicator',
296
- numberOfDraws: 'Numarul de extrageri',
297
- wagerPerDraw: 'Pariul per extragere',
298
- resetButton: 'Reseteaza',
299
- autoButton: 'Ma simt norocos'
300
- },
301
- fr: {
302
- loading: 'Loading, please wait ...',
303
- error: 'It was an error while trying to fetch the data',
304
- grid: 'Grid',
305
- multiplier: 'Multiplier',
306
- numberOfDraws: 'Number of draws',
307
- wagerPerDraw: 'Wager per draw',
308
- resetButton: 'Reset',
309
- autoButton: 'I feel lucky'
310
- },
311
- ar: {
312
- loading: 'Loading, please wait ...',
313
- error: 'It was an error while trying to fetch the data',
314
- grid: 'Grid',
315
- multiplier: 'Multiplier',
316
- numberOfDraws: 'Number of draws',
317
- wagerPerDraw: 'Wager per draw',
318
- resetButton: 'Reset',
319
- autoButton: 'I feel lucky'
320
- },
321
- hr: {
322
- loading: 'Učitavanje, molimo pričekajte ...',
323
- error: 'Došlo je do pogreške prilikom pokušaja dohvaćanja podataka',
324
- grid: 'Tablica',
325
- multiplier: 'Multiplikator',
326
- numberOfDraws: 'Broj izvlačenja',
327
- wagerPerDraw: 'Ulog po izvlačenju',
328
- resetButton: 'Resetiraj',
329
- autoButton: 'Osjećam se sretno'
330
- }
331
- };
332
- const translate = (key, customLang) => {
333
- const lang = customLang;
334
- return TRANSLATIONS[lang !== undefined && SUPPORTED_LANGUAGES.includes(lang) ? lang : DEFAULT_LANGUAGE][key];
335
- };
336
-
337
- const lotteryTicketCss = "@import url(\"https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap\");:host{display:block;font-family:\"Roboto\", sans-serif}.TicketTitle{font-size:16px;font-weight:bold}.ButtonContainer{display:flex;justify-content:flex-end}.Toggle{cursor:pointer;margin-top:20px;display:inline-block}.ToggleSwitch{display:inline-block;background:#707070;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%, #F1F1F1 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:#00ABA4}.ToggleCheckbox:checked+.ToggleSwitch:before{left:38px}.ToggleCheckbox{position:absolute;visibility:hidden}.Label{margin-right:5px;position:relative;top:2px;font-size:14px;font-weight:lighter;color:#000}input[type=number]{-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none}.NumberInput,.WagerInput{margin-top:10px;display:inline-flex;align-items:center}.NumberInput,.NumberInput *{box-sizing:border-box}.NumberInput button{cursor:pointer;outline:none;-webkit-appearance:none;border:none;align-items:center;justify-content:center;height:20px;position:relative}.NumberInput button:after{display:inline-block;position:absolute;transform:translate(-50%, -50%) rotate(180deg);align-items:center;text-align:center}.NumberInput button.Plus:after{transform:translate(-50%, -50%) rotate(0deg);width:30px;display:inline-flex;align-items:center;text-align:center}.NumberInput input[type=number],.WagerInput input[type=number]{max-width:50px;display:inline-flex;align-items:center;padding:4px 10px;text-align:center}.NumberInput input[type=number] .WagerInputTitle,.WagerInput input[type=number] .WagerInputTitle{font-size:14px;color:#000;padding:10px}.InputDefault{background-color:#F1F1F1;border-radius:4px;padding:5px;border:solid 1px #D4D4D4;color:#707070}.AutoButton{cursor:pointer;display:inline-block;border-radius:4px;padding:8px 20px;width:max-content;margin:5px 0;border:1px solid #00958f;background:#FFF;color:#000;font-size:12px;transition:all 0.2s linear;text-transform:uppercase;text-align:center;letter-spacing:0}.AutoButton:active{background:#00958f;color:#FFF}.ResetButton{cursor:pointer;display:inline-block;border-radius:4px;padding:8px 20px;width:max-content;margin:5px 0;color:#000;font-size:12px;transition:all 0.2s linear;text-transform:uppercase;text-align:center;letter-spacing:0;background:#FF3D00;border:1px solid #FF3D00;color:#FFF}.ResetButton:hover{background:#FF6536;border:1px solid #FF3D00}.TicketGridBullets{background:#f1f1f1;border-radius:4px;padding:20px;margin-top:5px}.TicketGridBullets .TicketGridTitle{margin-top:0px}.Minus{border-radius:4px;width:30px;height:24px !important;margin-right:10px;color:#FFF;background:#009993}.Plus{border-radius:4px;width:30px;height:24px !important;margin-left:10px;color:#FFF;background:#009993}.SelectWrapper{width:auto;padding:5px;margin:0 auto;border:1px solid #ccc;border-radius:5px;position:relative}.SelectButton,.SelectOptions li{display:flex;align-items:center;cursor:pointer}.SelectButton{display:flex;padding:0 5px;border-radius:7px;align-items:center;justify-content:space-between;font-size:14px}.SelectButton span:first-child{padding-right:10px}.SelectExpand{transition:transform 0.3s linear;font-size:12px}.SelectActive .SelectExpand{transform:rotate(180deg)}.SelectContent{display:none;padding:5px;border-radius:7px}.SelectWrapper.SelectActive .SelectContent{width:100%;display:block;position:absolute;left:0;top:32px;padding:0;border:1px solid #ccc;overflow:hidden;background:#fff}.SelectContent .SelectOptions{max-height:100px;margin:0;overflow-y:auto;padding:0}.SelectContent .SelectOptions .SelectedValue{background-color:#009993;color:#fff}.SelectOptions::-webkit-scrollbar{width:7px}.SelectOptions::-webkit-scrollbar-track{background:#f1f1f1;border-radius:25px}.SelectOptions::-webkit-scrollbar-thumb{background:#ccc;border-radius:25px}.SelectOptions li{height:20px;padding:0 13px;font-size:14px}.SelectOptions li:hover{background:#f2f2f2}";
338
-
339
- const LotteryTicket = class {
340
- constructor(hostRef) {
341
- index.registerInstance(this, hostRef);
342
- this.ticketCompleted = index.createEvent(this, "ticketCompleted", 7);
343
- this.autoSelection = index.createEvent(this, "autoSelection", 7);
344
- this.resetSelection = index.createEvent(this, "resetSelection", 7);
345
- this.stakeChange = index.createEvent(this, "stakeChange", 7);
346
- this.multiplierChange = index.createEvent(this, "multiplierChange", 7);
347
- /**
348
- * Number of grids of a ticket
349
- */
350
- this.numberOfGrids = 1;
351
- /**
352
- * Option to have the ticket registered for multiple draws
353
- */
354
- this.multipleDraws = true;
355
- /**
356
- * Shows the reset button
357
- */
358
- this.resetButton = false;
359
- /**
360
- * Shows the auto-pick button
361
- */
362
- this.autoPick = false;
363
- /**
364
- * Language
365
- */
366
- this.language = 'en';
367
- /**
368
- * Client custom styling via string
369
- */
370
- this.clientStyling = '';
371
- /**
372
- * Client custom styling via url content
373
- */
374
- this.clientStylingUrlContent = '';
375
- this.multiplier = false;
376
- this.numberOfDraws = 1;
377
- this.isLoading = true;
378
- this.hasErrors = false;
379
- this.ticketDone = false;
380
- this.isCustomSelect = false;
381
- this.amountInfo = {};
382
- this.limitStylingAppends = false;
383
- this.setClientStyling = () => {
384
- let sheet = document.createElement('style');
385
- sheet.innerHTML = this.clientStyling;
386
- this.stylingContainer.prepend(sheet);
387
- };
388
- this.setClientStylingURL = () => {
389
- let cssFile = document.createElement('style');
390
- setTimeout(() => {
391
- cssFile.innerHTML = this.clientStylingUrlContent;
392
- this.stylingContainer.prepend(cssFile);
393
- }, 1);
394
- };
395
- }
396
- /**
397
- * @TODO find a better way to implement click outside the custom select, so that we don't have to use the 'data-cluster' attribute on each element
398
- */
399
- checkForClickOutside(ev) {
400
- if (ev.composedPath()[0].getAttribute('data-cluster') !== 'SelectComponent') {
401
- this.isCustomSelect = false;
402
- }
403
- }
404
- connectedCallback() {
405
- let url = new URL(`${this.endpoint}/games/${this.gameId}`);
406
- fetch(url.href)
407
- .then((response) => {
408
- if (response.ok) {
409
- return response.json();
410
- }
411
- else {
412
- // Throw error
413
- this.hasErrors = true;
414
- }
415
- })
416
- .then((data) => {
417
- this.isLoading = false;
418
- this.gameData = data;
419
- this.grids = [...Array(this.gameData.type.boards.length).keys()];
420
- this.amountInfo = this.gameData.type.stakes[0]; // initial value for select
421
- })
422
- .catch((err) => {
423
- this.isLoading = false;
424
- this.hasErrors = true;
425
- console.error('Error!', err);
426
- });
427
- }
428
- componentDidRender() {
429
- // start custom styling area
430
- if (!this.limitStylingAppends && this.stylingContainer) {
431
- if (this.clientStyling)
432
- this.setClientStyling();
433
- if (this.clientStylingUrlContent)
434
- this.setClientStylingURL();
435
- this.limitStylingAppends = true;
436
- }
437
- // end custom styling area
438
- }
439
- multiplierChangeHandler(e) {
440
- this.multiplier = e.target ? e.target.checked : false;
441
- this.multiplierChange.emit(this.multiplier);
442
- }
443
- drawsChangeHandler(event) {
444
- this.ticket = Object.assign(Object.assign({}, this.ticket), { draws: event });
445
- this.ticketCompleted.emit(this.ticket);
446
- }
447
- gridFilledHandler(event) {
448
- this.ticket = Object.assign(Object.assign({}, event.detail), { draws: this.numberOfDraws });
449
- this.ticketDone = true;
450
- this.ticketCompleted.emit(this.ticket);
451
- }
452
- toggleAutoSelection() {
453
- this.ticketDone = true;
454
- this.autoSelection.emit(this.ticketId);
455
- }
456
- toggleResetSelection() {
457
- this.ticketDone = false;
458
- this.resetSelection.emit(this.ticketId);
459
- }
460
- changeStake(ticketid, amount) {
461
- this.stakeChange.emit({
462
- ticketId: ticketid,
463
- stake: amount
464
- });
465
- }
466
- toggleClass() {
467
- this.isCustomSelect = !this.isCustomSelect;
468
- }
469
- setDropdownItem(item) {
470
- this.amountInfo = {
471
- value: item.value,
472
- currency: item.currency
473
- };
474
- this.isCustomSelect = false;
475
- this.changeStake(this.ticketId, item.amount);
476
- }
477
- render() {
478
- if (this.isLoading) {
479
- return (index.h("div", null, index.h("p", null, translate('loading', this.language))));
480
- }
481
- else {
482
- if (this.hasErrors) {
483
- return (index.h("div", null, index.h("p", null, translate('error', this.language))));
484
- }
485
- else {
486
- const { type } = this.gameData;
487
- return (index.h("div", { class: "TicketContainer", ref: el => this.stylingContainer = el }, index.h("p", { class: "TicketTitle" }, this.gameData.name), this.resetButton && this.ticketDone &&
488
- index.h("div", { class: "ButtonContainer" }, index.h("a", { class: "ResetButton", onClick: () => this.toggleResetSelection() }, translate('resetButton', this.language))), this.autoPick && !this.ticketDone &&
489
- index.h("div", { class: "ButtonContainer" }, index.h("a", { class: "AutoButton", onClick: () => this.toggleAutoSelection() }, translate('autoButton', this.language))), this.grids.map((_, index$1) => index.h("div", { class: "TicketGridBullets" }, index.h("p", { class: "TicketGridTitle" }, translate('grid', this.language), " ", index$1 + 1), index.h("lottery-grid", { "grid-index": index$1, "maximum-allowed": type.boards[index$1].maximumAllowed, "minimum-allowed": type.boards[index$1].minimumAllowed, "total-numbers": type.boards[index$1].highNumber - type.boards[index$1].lowNumber + 1, selectable: true, "reset-button": true, "auto-pick": true, "game-id": this.gameId, "ticket-id": this.ticketId, language: this.language, "client-styling": this.clientStyling, "client-styling-url-content": this.clientStylingUrlContent }))), type.multiplier &&
490
- index.h("div", null, index.h("label", { class: "Toggle" }, index.h("label", { class: "Label" }, translate('multiplier', this.language), ": "), index.h("input", { class: "ToggleCheckbox", type: "checkbox", onInput: (e) => this.multiplierChangeHandler(e) }), index.h("div", { class: "ToggleSwitch" }))), this.multipleDraws &&
491
- index.h("div", { class: "TicketDraws" }, index.h("label", { class: "Label" }, translate('numberOfDraws', this.language), ": "), index.h("div", { class: "NumberInput" }, index.h("button", { onClick: () => this.numberOfDraws > 1 ? this.numberOfDraws-- : this.numberOfDraws = 1, class: "Minus" }, "-"), index.h("input", { class: "InputDefault", min: "1", value: this.numberOfDraws, type: "number" }), index.h("button", { onClick: () => this.numberOfDraws++, class: "Plus" }, "+"))), index.h("div", null, index.h("label", { class: "Label" }, translate('wagerPerDraw', this.language), ": "), index.h("div", { class: "WagerInput" }, type.stakes.length > 1 ?
492
- (index.h("div", { "data-cluster": "SelectComponent", class: this.isCustomSelect ? "SelectWrapper SelectActive" : "SelectWrapper" }, index.h("div", { "data-cluster": "SelectComponent", class: "SelectButton", onClick: () => this.toggleClass() }, index.h("span", { "data-cluster": "SelectComponent" }, this.amountInfo.value, " ", this.amountInfo.currency), index.h("span", { "data-cluster": "SelectComponent", class: "SelectExpand" }, "\u25BC")), index.h("div", { "data-cluster": "SelectComponent", class: "SelectContent" }, index.h("ul", { "data-cluster": "SelectComponent", class: "SelectOptions" }, type.stakes.map((item) => index.h("li", { "data-cluster": "SelectComponent", class: this.amountInfo.value == item.value ? 'SelectedValue' : '', value: item.value, onClick: () => this.setDropdownItem(item) }, item.value, " ", item.currency)))))) : (index.h("div", null, index.h("input", { min: "1", value: type.stakes[0].amount, type: "number", disabled: true }), index.h("p", { class: "WagerInputTitle" }, type.stakes[0].currency)))))));
493
- }
494
- }
495
- }
496
- static get watchers() { return {
497
- "numberOfDraws": ["drawsChangeHandler"]
498
- }; }
499
- };
500
- LotteryTicket.style = lotteryTicketCss;
501
-
502
- exports.lottery_bullet = LotteryBullet;
503
- exports.lottery_grid = LotteryGrid;
504
- exports.lottery_ticket = LotteryTicket;
@@ -1,19 +0,0 @@
1
- 'use strict';
2
-
3
- const index = require('./index-e62c9a3f.js');
4
-
5
- /*
6
- Stencil Client Patch Browser v2.15.2 | MIT Licensed | https://stenciljs.com
7
- */
8
- const patchBrowser = () => {
9
- const importMeta = (typeof document === 'undefined' ? new (require('u' + 'rl').URL)('file:' + __filename).href : (document.currentScript && document.currentScript.src || new URL('lottery-ticket.cjs.js', document.baseURI).href));
10
- const opts = {};
11
- if (importMeta !== '') {
12
- opts.resourcesUrl = new URL('.', importMeta).href;
13
- }
14
- return index.promiseResolve(opts);
15
- };
16
-
17
- patchBrowser().then(options => {
18
- return index.bootstrapLazy([["lottery-bullet_3.cjs",[[1,"lottery-ticket",{"endpoint":[513],"gameId":[513,"game-id"],"numberOfGrids":[514,"number-of-grids"],"multipleDraws":[516,"multiple-draws"],"ticketId":[514,"ticket-id"],"resetButton":[516,"reset-button"],"autoPick":[516,"auto-pick"],"language":[513],"clientStyling":[513,"client-styling"],"clientStylingUrlContent":[513,"client-styling-url-content"],"multiplier":[32],"numberOfDraws":[32],"isLoading":[32],"hasErrors":[32],"ticketDone":[32],"isCustomSelect":[32],"amountInfo":[32],"limitStylingAppends":[32]},[[8,"click","checkForClickOutside"],[0,"gridFilled","gridFilledHandler"]]],[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);
19
- });
@@ -1,25 +0,0 @@
1
- {
2
- "entries": [
3
- "./components/lottery-ticket/lottery-ticket.js"
4
- ],
5
- "compiler": {
6
- "name": "@stencil/core",
7
- "version": "2.15.2",
8
- "typescriptVersion": "4.5.4"
9
- },
10
- "collections": [
11
- {
12
- "name": "@everymatrix/lottery-bullet",
13
- "tags": [
14
- "lottery-bullet"
15
- ]
16
- },
17
- {
18
- "name": "@everymatrix/lottery-grid",
19
- "tags": [
20
- "lottery-grid"
21
- ]
22
- }
23
- ],
24
- "bundles": []
25
- }