@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,6 +0,0 @@
1
- import { L as LotteryGrid$1, d as defineCustomElement$1 } from './lottery-grid2.js';
2
-
3
- const LotteryGrid = LotteryGrid$1;
4
- const defineCustomElement = defineCustomElement$1;
5
-
6
- export { LotteryGrid, defineCustomElement };
@@ -1,245 +0,0 @@
1
- import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
2
- import { d as defineCustomElement$1 } from './lottery-bullet2.js';
3
-
4
- 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}";
5
-
6
- const LotteryGrid = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
7
- constructor() {
8
- super();
9
- this.__registerHost();
10
- this.__attachShadow();
11
- this.gridFilledEvent = createEvent(this, "gridFilled", 7);
12
- this.gridDirtyEvent = createEvent(this, "gridDirty", 7);
13
- /**
14
- * Number of bullets of grid
15
- */
16
- this.totalNumbers = 0;
17
- /**
18
- * Number of maximum bullets that can be selected
19
- */
20
- this.maximumAllowed = 0;
21
- /**
22
- * Minimum allowed of bullets
23
- */
24
- this.minimumAllowed = 1;
25
- /**
26
- * Allows the user to select numbers on the grid
27
- */
28
- this.selectable = true;
29
- /**
30
- * Numbers that should be showed as selected on the grid (as a string of those numbers e.g. '1,2,3,4,5,6')
31
- */
32
- this.selectedNumbers = '';
33
- /**
34
- * Show only selected numbers
35
- */
36
- this.displaySelected = false;
37
- /**
38
- * Language
39
- */
40
- this.language = 'en';
41
- /**
42
- * Personalize grid for ticket
43
- */
44
- this.gridType = '';
45
- /**
46
- * Client custom styling via string
47
- */
48
- this.clientStyling = '';
49
- /**
50
- * Client custom styling via url content
51
- */
52
- this.clientStylingUrlContent = '';
53
- this.numbers = [];
54
- this.limitStylingAppends = false;
55
- this.selectedCounter = 0;
56
- this.setClientStyling = () => {
57
- let sheet = document.createElement('style');
58
- sheet.innerHTML = this.clientStyling;
59
- this.stylingContainer.prepend(sheet);
60
- };
61
- this.setClientStylingURL = () => {
62
- let cssFile = document.createElement('style');
63
- setTimeout(() => {
64
- cssFile.innerHTML = this.clientStylingUrlContent;
65
- this.stylingContainer.prepend(cssFile);
66
- }, 1);
67
- };
68
- }
69
- connectedCallback() {
70
- let selected = [];
71
- if (this.selectedNumbers.length > 0) {
72
- selected = this.selectedNumbers.split(',');
73
- this.selectedCounter = selected.length;
74
- }
75
- if (this.displaySelected) {
76
- selected.forEach((item) => {
77
- this.numbers.push({
78
- number: item,
79
- selected: true,
80
- selectable: this.selectable
81
- });
82
- });
83
- }
84
- else {
85
- [...Array(this.totalNumbers).keys()]
86
- .map(number => (number + 1).toString())
87
- .forEach((number) => {
88
- this.numbers.push({
89
- number,
90
- selected: selected.indexOf(number) >= 0 ? true : false,
91
- selectable: this.selectedCounter == this.maximumAllowed ? false : this.selectable
92
- });
93
- });
94
- }
95
- }
96
- componentDidRender() {
97
- // start custom styling area
98
- if (!this.limitStylingAppends && this.stylingContainer) {
99
- if (this.clientStyling)
100
- this.setClientStyling();
101
- if (this.clientStylingUrlContent)
102
- this.setClientStylingURL();
103
- this.limitStylingAppends = true;
104
- }
105
- // end custom styling area
106
- }
107
- // wrote this because the classic .sort(() => 0.5 - Math.random()) method yielded low entropy shuffles for some reason on certain devices
108
- shuffleArray(array) {
109
- const result = [];
110
- while (array.length > 0) {
111
- const randomIndex = Math.floor(Math.random() * (array.length));
112
- result.push(array.splice(randomIndex, 1)[0]);
113
- }
114
- return result;
115
- }
116
- lotteryBulletSelectionHandler(event) {
117
- this.numbers = this.numbers.map((item) => {
118
- if (item.number == event.detail.value) {
119
- return {
120
- number: item.number,
121
- selected: event.detail.selected,
122
- selectable: item.selectable
123
- };
124
- }
125
- return {
126
- number: item.number,
127
- selected: item.selected,
128
- selectable: item.selectable
129
- };
130
- });
131
- if (event.detail.selected) {
132
- this.selectedCounter += 1;
133
- if (this.selectedCounter == this.maximumAllowed) {
134
- this.numbers = this.numbers.map((item) => {
135
- return {
136
- number: item.number,
137
- selected: item.selected,
138
- selectable: item.selected ? true : false
139
- };
140
- });
141
- this.gridFilledEvent.emit({
142
- id: this.ticketId,
143
- index: this.gridIndex,
144
- selectedNumbers: this.numbers.filter((item) => item.selected).map((item) => item.number)
145
- });
146
- }
147
- }
148
- else {
149
- if (this.selectedCounter == this.maximumAllowed) {
150
- this.numbers = this.numbers.map((item) => {
151
- return {
152
- number: item.number,
153
- selected: item.selected,
154
- selectable: true
155
- };
156
- });
157
- this.gridDirtyEvent.emit({
158
- id: this.ticketId,
159
- index: this.gridIndex,
160
- selectedNumbers: this.numbers.filter((item) => item.selected).map((item) => item.number)
161
- });
162
- }
163
- this.selectedCounter -= 1;
164
- }
165
- }
166
- async resetSelectionHandler(event) {
167
- if (event.detail && event.detail == this.ticketId) {
168
- this.selectedCounter = 0;
169
- this.numbers = this.numbers.map((item) => {
170
- return {
171
- number: item.number,
172
- selected: false,
173
- selectable: this.selectable
174
- };
175
- });
176
- this.gridDirtyEvent.emit({
177
- id: this.ticketId,
178
- index: this.gridIndex,
179
- selectedNumbers: this.numbers.filter((item) => item.selected).map((item) => item.number)
180
- });
181
- }
182
- }
183
- async autoSelectionHandler(event) {
184
- if (event.detail && event.detail == this.ticketId) {
185
- this.resetSelectionHandler(event);
186
- let array = [...Array(this.totalNumbers).keys()]
187
- .map(number => number + 1);
188
- array = this.shuffleArray(array);
189
- array = array.slice(0, this.minimumAllowed);
190
- this.numbers = this.numbers.map((item) => {
191
- return {
192
- number: item.number,
193
- selected: array.indexOf(parseInt(item.number, 10)) >= 0 ? true : false,
194
- selectable: array.indexOf(parseInt(item.number, 10)) >= 0 ? true : false,
195
- };
196
- });
197
- this.gridFilledEvent.emit({
198
- id: this.ticketId,
199
- index: this.gridIndex,
200
- selectedNumbers: this.numbers.filter((item) => item.selected).map((item) => item.number)
201
- });
202
- this.selectedCounter = this.maximumAllowed;
203
- }
204
- }
205
- render() {
206
- return (h("div", { class: "GridContainer", ref: el => this.stylingContainer = el }, h("div", { 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 }))))));
207
- }
208
- static get style() { return lotteryGridCss; }
209
- }, [1, "lottery-grid", {
210
- "ticketId": [514, "ticket-id"],
211
- "totalNumbers": [514, "total-numbers"],
212
- "gameId": [513, "game-id"],
213
- "maximumAllowed": [514, "maximum-allowed"],
214
- "minimumAllowed": [514, "minimum-allowed"],
215
- "selectable": [516],
216
- "selectedNumbers": [513, "selected-numbers"],
217
- "displaySelected": [516, "display-selected"],
218
- "language": [513],
219
- "gridIndex": [514, "grid-index"],
220
- "gridType": [513, "grid-type"],
221
- "clientStyling": [513, "client-styling"],
222
- "clientStylingUrlContent": [513, "client-styling-url-content"],
223
- "numbers": [32],
224
- "limitStylingAppends": [32]
225
- }, [[0, "lotteryBulletSelection", "lotteryBulletSelectionHandler"], [4, "resetSelection", "resetSelectionHandler"], [4, "autoSelection", "autoSelectionHandler"]]]);
226
- function defineCustomElement() {
227
- if (typeof customElements === "undefined") {
228
- return;
229
- }
230
- const components = ["lottery-grid", "lottery-bullet"];
231
- components.forEach(tagName => { switch (tagName) {
232
- case "lottery-grid":
233
- if (!customElements.get(tagName)) {
234
- customElements.define(tagName, LotteryGrid);
235
- }
236
- break;
237
- case "lottery-bullet":
238
- if (!customElements.get(tagName)) {
239
- defineCustomElement$1();
240
- }
241
- break;
242
- } });
243
- }
244
-
245
- export { LotteryGrid as L, defineCustomElement as d };
@@ -1,11 +0,0 @@
1
- import type { Components, JSX } from "../types/components";
2
-
3
- interface LotteryTicket extends Components.LotteryTicket, HTMLElement {}
4
- export const LotteryTicket: {
5
- prototype: LotteryTicket;
6
- new (): LotteryTicket;
7
- };
8
- /**
9
- * Used to define this component and all nested components recursively.
10
- */
11
- export const defineCustomElement: () => void;
@@ -1,276 +0,0 @@
1
- import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
2
- import { d as defineCustomElement$3 } from './lottery-bullet2.js';
3
- import { d as defineCustomElement$2 } from './lottery-grid2.js';
4
-
5
- const DEFAULT_LANGUAGE = 'en';
6
- const SUPPORTED_LANGUAGES = ['ro', 'en', 'hr'];
7
- const TRANSLATIONS = {
8
- en: {
9
- loading: 'Loading, please wait ...',
10
- error: 'It was an error while trying to fetch the data',
11
- grid: 'Grid',
12
- multiplier: 'Multiplier',
13
- numberOfDraws: 'Number of draws',
14
- wagerPerDraw: 'Wager per draw',
15
- resetButton: 'Reset',
16
- autoButton: 'I feel lucky'
17
- },
18
- ro: {
19
- loading: 'Se incarca, va rugam asteptati ...',
20
- error: 'A fost o eroare in timp ce asteptam datele',
21
- grid: 'Grid',
22
- multiplier: 'Multiplicator',
23
- numberOfDraws: 'Numarul de extrageri',
24
- wagerPerDraw: 'Pariul per extragere',
25
- resetButton: 'Reseteaza',
26
- autoButton: 'Ma simt norocos'
27
- },
28
- fr: {
29
- loading: 'Loading, please wait ...',
30
- error: 'It was an error while trying to fetch the data',
31
- grid: 'Grid',
32
- multiplier: 'Multiplier',
33
- numberOfDraws: 'Number of draws',
34
- wagerPerDraw: 'Wager per draw',
35
- resetButton: 'Reset',
36
- autoButton: 'I feel lucky'
37
- },
38
- ar: {
39
- loading: 'Loading, please wait ...',
40
- error: 'It was an error while trying to fetch the data',
41
- grid: 'Grid',
42
- multiplier: 'Multiplier',
43
- numberOfDraws: 'Number of draws',
44
- wagerPerDraw: 'Wager per draw',
45
- resetButton: 'Reset',
46
- autoButton: 'I feel lucky'
47
- },
48
- hr: {
49
- loading: 'Učitavanje, molimo pričekajte ...',
50
- error: 'Došlo je do pogreške prilikom pokušaja dohvaćanja podataka',
51
- grid: 'Tablica',
52
- multiplier: 'Multiplikator',
53
- numberOfDraws: 'Broj izvlačenja',
54
- wagerPerDraw: 'Ulog po izvlačenju',
55
- resetButton: 'Resetiraj',
56
- autoButton: 'Osjećam se sretno'
57
- }
58
- };
59
- const translate = (key, customLang) => {
60
- const lang = customLang;
61
- return TRANSLATIONS[lang !== undefined && SUPPORTED_LANGUAGES.includes(lang) ? lang : DEFAULT_LANGUAGE][key];
62
- };
63
-
64
- 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}";
65
-
66
- const LotteryTicket$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
67
- constructor() {
68
- super();
69
- this.__registerHost();
70
- this.__attachShadow();
71
- this.ticketCompleted = createEvent(this, "ticketCompleted", 7);
72
- this.autoSelection = createEvent(this, "autoSelection", 7);
73
- this.resetSelection = createEvent(this, "resetSelection", 7);
74
- this.stakeChange = createEvent(this, "stakeChange", 7);
75
- this.multiplierChange = createEvent(this, "multiplierChange", 7);
76
- /**
77
- * Number of grids of a ticket
78
- */
79
- this.numberOfGrids = 1;
80
- /**
81
- * Option to have the ticket registered for multiple draws
82
- */
83
- this.multipleDraws = true;
84
- /**
85
- * Shows the reset button
86
- */
87
- this.resetButton = false;
88
- /**
89
- * Shows the auto-pick button
90
- */
91
- this.autoPick = false;
92
- /**
93
- * Language
94
- */
95
- this.language = 'en';
96
- /**
97
- * Client custom styling via string
98
- */
99
- this.clientStyling = '';
100
- /**
101
- * Client custom styling via url content
102
- */
103
- this.clientStylingUrlContent = '';
104
- this.multiplier = false;
105
- this.numberOfDraws = 1;
106
- this.isLoading = true;
107
- this.hasErrors = false;
108
- this.ticketDone = false;
109
- this.isCustomSelect = false;
110
- this.amountInfo = {};
111
- this.limitStylingAppends = false;
112
- this.setClientStyling = () => {
113
- let sheet = document.createElement('style');
114
- sheet.innerHTML = this.clientStyling;
115
- this.stylingContainer.prepend(sheet);
116
- };
117
- this.setClientStylingURL = () => {
118
- let cssFile = document.createElement('style');
119
- setTimeout(() => {
120
- cssFile.innerHTML = this.clientStylingUrlContent;
121
- this.stylingContainer.prepend(cssFile);
122
- }, 1);
123
- };
124
- }
125
- /**
126
- * @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
127
- */
128
- checkForClickOutside(ev) {
129
- if (ev.composedPath()[0].getAttribute('data-cluster') !== 'SelectComponent') {
130
- this.isCustomSelect = false;
131
- }
132
- }
133
- connectedCallback() {
134
- let url = new URL(`${this.endpoint}/games/${this.gameId}`);
135
- fetch(url.href)
136
- .then((response) => {
137
- if (response.ok) {
138
- return response.json();
139
- }
140
- else {
141
- // Throw error
142
- this.hasErrors = true;
143
- }
144
- })
145
- .then((data) => {
146
- this.isLoading = false;
147
- this.gameData = data;
148
- this.grids = [...Array(this.gameData.type.boards.length).keys()];
149
- this.amountInfo = this.gameData.type.stakes[0]; // initial value for select
150
- })
151
- .catch((err) => {
152
- this.isLoading = false;
153
- this.hasErrors = true;
154
- console.error('Error!', err);
155
- });
156
- }
157
- componentDidRender() {
158
- // start custom styling area
159
- if (!this.limitStylingAppends && this.stylingContainer) {
160
- if (this.clientStyling)
161
- this.setClientStyling();
162
- if (this.clientStylingUrlContent)
163
- this.setClientStylingURL();
164
- this.limitStylingAppends = true;
165
- }
166
- // end custom styling area
167
- }
168
- multiplierChangeHandler(e) {
169
- this.multiplier = e.target ? e.target.checked : false;
170
- this.multiplierChange.emit(this.multiplier);
171
- }
172
- drawsChangeHandler(event) {
173
- this.ticket = Object.assign(Object.assign({}, this.ticket), { draws: event });
174
- this.ticketCompleted.emit(this.ticket);
175
- }
176
- gridFilledHandler(event) {
177
- this.ticket = Object.assign(Object.assign({}, event.detail), { draws: this.numberOfDraws });
178
- this.ticketDone = true;
179
- this.ticketCompleted.emit(this.ticket);
180
- }
181
- toggleAutoSelection() {
182
- this.ticketDone = true;
183
- this.autoSelection.emit(this.ticketId);
184
- }
185
- toggleResetSelection() {
186
- this.ticketDone = false;
187
- this.resetSelection.emit(this.ticketId);
188
- }
189
- changeStake(ticketid, amount) {
190
- this.stakeChange.emit({
191
- ticketId: ticketid,
192
- stake: amount
193
- });
194
- }
195
- toggleClass() {
196
- this.isCustomSelect = !this.isCustomSelect;
197
- }
198
- setDropdownItem(item) {
199
- this.amountInfo = {
200
- value: item.value,
201
- currency: item.currency
202
- };
203
- this.isCustomSelect = false;
204
- this.changeStake(this.ticketId, item.amount);
205
- }
206
- render() {
207
- if (this.isLoading) {
208
- return (h("div", null, h("p", null, translate('loading', this.language))));
209
- }
210
- else {
211
- if (this.hasErrors) {
212
- return (h("div", null, h("p", null, translate('error', this.language))));
213
- }
214
- else {
215
- const { type } = this.gameData;
216
- return (h("div", { class: "TicketContainer", ref: el => this.stylingContainer = el }, h("p", { class: "TicketTitle" }, this.gameData.name), this.resetButton && this.ticketDone &&
217
- h("div", { class: "ButtonContainer" }, h("a", { class: "ResetButton", onClick: () => this.toggleResetSelection() }, translate('resetButton', this.language))), this.autoPick && !this.ticketDone &&
218
- h("div", { class: "ButtonContainer" }, h("a", { class: "AutoButton", onClick: () => this.toggleAutoSelection() }, translate('autoButton', this.language))), this.grids.map((_, index) => h("div", { class: "TicketGridBullets" }, h("p", { class: "TicketGridTitle" }, translate('grid', this.language), " ", index + 1), h("lottery-grid", { "grid-index": index, "maximum-allowed": type.boards[index].maximumAllowed, "minimum-allowed": type.boards[index].minimumAllowed, "total-numbers": type.boards[index].highNumber - type.boards[index].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 &&
219
- h("div", null, h("label", { class: "Toggle" }, h("label", { class: "Label" }, translate('multiplier', this.language), ": "), h("input", { class: "ToggleCheckbox", type: "checkbox", onInput: (e) => this.multiplierChangeHandler(e) }), h("div", { class: "ToggleSwitch" }))), this.multipleDraws &&
220
- h("div", { class: "TicketDraws" }, h("label", { class: "Label" }, translate('numberOfDraws', this.language), ": "), h("div", { class: "NumberInput" }, h("button", { onClick: () => this.numberOfDraws > 1 ? this.numberOfDraws-- : this.numberOfDraws = 1, class: "Minus" }, "-"), h("input", { class: "InputDefault", min: "1", value: this.numberOfDraws, type: "number" }), h("button", { onClick: () => this.numberOfDraws++, class: "Plus" }, "+"))), h("div", null, h("label", { class: "Label" }, translate('wagerPerDraw', this.language), ": "), h("div", { class: "WagerInput" }, type.stakes.length > 1 ?
221
- (h("div", { "data-cluster": "SelectComponent", class: this.isCustomSelect ? "SelectWrapper SelectActive" : "SelectWrapper" }, h("div", { "data-cluster": "SelectComponent", class: "SelectButton", onClick: () => this.toggleClass() }, h("span", { "data-cluster": "SelectComponent" }, this.amountInfo.value, " ", this.amountInfo.currency), h("span", { "data-cluster": "SelectComponent", class: "SelectExpand" }, "\u25BC")), h("div", { "data-cluster": "SelectComponent", class: "SelectContent" }, h("ul", { "data-cluster": "SelectComponent", class: "SelectOptions" }, type.stakes.map((item) => h("li", { "data-cluster": "SelectComponent", class: this.amountInfo.value == item.value ? 'SelectedValue' : '', value: item.value, onClick: () => this.setDropdownItem(item) }, item.value, " ", item.currency)))))) : (h("div", null, h("input", { min: "1", value: type.stakes[0].amount, type: "number", disabled: true }), h("p", { class: "WagerInputTitle" }, type.stakes[0].currency)))))));
222
- }
223
- }
224
- }
225
- static get watchers() { return {
226
- "numberOfDraws": ["drawsChangeHandler"]
227
- }; }
228
- static get style() { return lotteryTicketCss; }
229
- }, [1, "lottery-ticket", {
230
- "endpoint": [513],
231
- "gameId": [513, "game-id"],
232
- "numberOfGrids": [514, "number-of-grids"],
233
- "multipleDraws": [516, "multiple-draws"],
234
- "ticketId": [514, "ticket-id"],
235
- "resetButton": [516, "reset-button"],
236
- "autoPick": [516, "auto-pick"],
237
- "language": [513],
238
- "clientStyling": [513, "client-styling"],
239
- "clientStylingUrlContent": [513, "client-styling-url-content"],
240
- "multiplier": [32],
241
- "numberOfDraws": [32],
242
- "isLoading": [32],
243
- "hasErrors": [32],
244
- "ticketDone": [32],
245
- "isCustomSelect": [32],
246
- "amountInfo": [32],
247
- "limitStylingAppends": [32]
248
- }, [[8, "click", "checkForClickOutside"], [0, "gridFilled", "gridFilledHandler"]]]);
249
- function defineCustomElement$1() {
250
- if (typeof customElements === "undefined") {
251
- return;
252
- }
253
- const components = ["lottery-ticket", "lottery-bullet", "lottery-grid"];
254
- components.forEach(tagName => { switch (tagName) {
255
- case "lottery-ticket":
256
- if (!customElements.get(tagName)) {
257
- customElements.define(tagName, LotteryTicket$1);
258
- }
259
- break;
260
- case "lottery-bullet":
261
- if (!customElements.get(tagName)) {
262
- defineCustomElement$3();
263
- }
264
- break;
265
- case "lottery-grid":
266
- if (!customElements.get(tagName)) {
267
- defineCustomElement$2();
268
- }
269
- break;
270
- } });
271
- }
272
-
273
- const LotteryTicket = LotteryTicket$1;
274
- const defineCustomElement = defineCustomElement$1;
275
-
276
- export { LotteryTicket, defineCustomElement };