@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,494 +0,0 @@
1
- import { Component, h, Prop, State, Event, Listen, Watch } from '@stencil/core';
2
- import { translate } from '../../utils/locale.utils';
3
- import '@everymatrix/lottery-grid';
4
- export class LotteryTicket {
5
- constructor() {
6
- /**
7
- * Number of grids of a ticket
8
- */
9
- this.numberOfGrids = 1;
10
- /**
11
- * Option to have the ticket registered for multiple draws
12
- */
13
- this.multipleDraws = true;
14
- /**
15
- * Shows the reset button
16
- */
17
- this.resetButton = false;
18
- /**
19
- * Shows the auto-pick button
20
- */
21
- this.autoPick = false;
22
- /**
23
- * Language
24
- */
25
- this.language = 'en';
26
- /**
27
- * Client custom styling via string
28
- */
29
- this.clientStyling = '';
30
- /**
31
- * Client custom styling via url content
32
- */
33
- this.clientStylingUrlContent = '';
34
- this.multiplier = false;
35
- this.numberOfDraws = 1;
36
- this.isLoading = true;
37
- this.hasErrors = false;
38
- this.ticketDone = false;
39
- this.isCustomSelect = false;
40
- this.amountInfo = {};
41
- this.limitStylingAppends = false;
42
- this.setClientStyling = () => {
43
- let sheet = document.createElement('style');
44
- sheet.innerHTML = this.clientStyling;
45
- this.stylingContainer.prepend(sheet);
46
- };
47
- this.setClientStylingURL = () => {
48
- let cssFile = document.createElement('style');
49
- setTimeout(() => {
50
- cssFile.innerHTML = this.clientStylingUrlContent;
51
- this.stylingContainer.prepend(cssFile);
52
- }, 1);
53
- };
54
- }
55
- /**
56
- * @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
57
- */
58
- checkForClickOutside(ev) {
59
- if (ev.composedPath()[0].getAttribute('data-cluster') !== 'SelectComponent') {
60
- this.isCustomSelect = false;
61
- }
62
- }
63
- connectedCallback() {
64
- let url = new URL(`${this.endpoint}/games/${this.gameId}`);
65
- fetch(url.href)
66
- .then((response) => {
67
- if (response.ok) {
68
- return response.json();
69
- }
70
- else {
71
- // Throw error
72
- this.hasErrors = true;
73
- }
74
- })
75
- .then((data) => {
76
- this.isLoading = false;
77
- this.gameData = data;
78
- this.grids = [...Array(this.gameData.type.boards.length).keys()];
79
- this.amountInfo = this.gameData.type.stakes[0]; // initial value for select
80
- })
81
- .catch((err) => {
82
- this.isLoading = false;
83
- this.hasErrors = true;
84
- console.error('Error!', err);
85
- });
86
- }
87
- componentDidRender() {
88
- // start custom styling area
89
- if (!this.limitStylingAppends && this.stylingContainer) {
90
- if (this.clientStyling)
91
- this.setClientStyling();
92
- if (this.clientStylingUrlContent)
93
- this.setClientStylingURL();
94
- this.limitStylingAppends = true;
95
- }
96
- // end custom styling area
97
- }
98
- multiplierChangeHandler(e) {
99
- this.multiplier = e.target ? e.target.checked : false;
100
- this.multiplierChange.emit(this.multiplier);
101
- }
102
- drawsChangeHandler(event) {
103
- this.ticket = Object.assign(Object.assign({}, this.ticket), { draws: event });
104
- this.ticketCompleted.emit(this.ticket);
105
- }
106
- gridFilledHandler(event) {
107
- this.ticket = Object.assign(Object.assign({}, event.detail), { draws: this.numberOfDraws });
108
- this.ticketDone = true;
109
- this.ticketCompleted.emit(this.ticket);
110
- }
111
- toggleAutoSelection() {
112
- this.ticketDone = true;
113
- this.autoSelection.emit(this.ticketId);
114
- }
115
- toggleResetSelection() {
116
- this.ticketDone = false;
117
- this.resetSelection.emit(this.ticketId);
118
- }
119
- changeStake(ticketid, amount) {
120
- this.stakeChange.emit({
121
- ticketId: ticketid,
122
- stake: amount
123
- });
124
- }
125
- toggleClass() {
126
- this.isCustomSelect = !this.isCustomSelect;
127
- }
128
- setDropdownItem(item) {
129
- this.amountInfo = {
130
- value: item.value,
131
- currency: item.currency
132
- };
133
- this.isCustomSelect = false;
134
- this.changeStake(this.ticketId, item.amount);
135
- }
136
- render() {
137
- if (this.isLoading) {
138
- return (h("div", null,
139
- h("p", null, translate('loading', this.language))));
140
- }
141
- else {
142
- if (this.hasErrors) {
143
- return (h("div", null,
144
- h("p", null, translate('error', this.language))));
145
- }
146
- else {
147
- const { type } = this.gameData;
148
- return (h("div", { class: "TicketContainer", ref: el => this.stylingContainer = el },
149
- h("p", { class: "TicketTitle" }, this.gameData.name),
150
- this.resetButton && this.ticketDone &&
151
- h("div", { class: "ButtonContainer" },
152
- h("a", { class: "ResetButton", onClick: () => this.toggleResetSelection() }, translate('resetButton', this.language))),
153
- this.autoPick && !this.ticketDone &&
154
- h("div", { class: "ButtonContainer" },
155
- h("a", { class: "AutoButton", onClick: () => this.toggleAutoSelection() }, translate('autoButton', this.language))),
156
- this.grids.map((_, index) => h("div", { class: "TicketGridBullets" },
157
- h("p", { class: "TicketGridTitle" },
158
- translate('grid', this.language),
159
- " ",
160
- index + 1),
161
- 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 }))),
162
- type.multiplier &&
163
- h("div", null,
164
- h("label", { class: "Toggle" },
165
- h("label", { class: "Label" },
166
- translate('multiplier', this.language),
167
- ": "),
168
- h("input", { class: "ToggleCheckbox", type: "checkbox", onInput: (e) => this.multiplierChangeHandler(e) }),
169
- h("div", { class: "ToggleSwitch" }))),
170
- this.multipleDraws &&
171
- h("div", { class: "TicketDraws" },
172
- h("label", { class: "Label" },
173
- translate('numberOfDraws', this.language),
174
- ": "),
175
- h("div", { class: "NumberInput" },
176
- h("button", { onClick: () => this.numberOfDraws > 1 ? this.numberOfDraws-- : this.numberOfDraws = 1, class: "Minus" }, "-"),
177
- h("input", { class: "InputDefault", min: "1", value: this.numberOfDraws, type: "number" }),
178
- h("button", { onClick: () => this.numberOfDraws++, class: "Plus" }, "+"))),
179
- h("div", null,
180
- h("label", { class: "Label" },
181
- translate('wagerPerDraw', this.language),
182
- ": "),
183
- h("div", { class: "WagerInput" }, type.stakes.length > 1 ?
184
- (h("div", { "data-cluster": "SelectComponent", class: this.isCustomSelect ? "SelectWrapper SelectActive" : "SelectWrapper" },
185
- h("div", { "data-cluster": "SelectComponent", class: "SelectButton", onClick: () => this.toggleClass() },
186
- h("span", { "data-cluster": "SelectComponent" },
187
- this.amountInfo.value,
188
- " ",
189
- this.amountInfo.currency),
190
- h("span", { "data-cluster": "SelectComponent", class: "SelectExpand" }, "\u25BC")),
191
- h("div", { "data-cluster": "SelectComponent", class: "SelectContent" },
192
- 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) },
193
- item.value,
194
- " ",
195
- item.currency)))))) : (h("div", null,
196
- h("input", { min: "1", value: type.stakes[0].amount, type: "number", disabled: true }),
197
- h("p", { class: "WagerInputTitle" }, type.stakes[0].currency)))))));
198
- }
199
- }
200
- }
201
- static get is() { return "lottery-ticket"; }
202
- static get encapsulation() { return "shadow"; }
203
- static get originalStyleUrls() { return {
204
- "$": ["lottery-ticket.scss"]
205
- }; }
206
- static get styleUrls() { return {
207
- "$": ["lottery-ticket.css"]
208
- }; }
209
- static get properties() { return {
210
- "endpoint": {
211
- "type": "string",
212
- "mutable": false,
213
- "complexType": {
214
- "original": "string",
215
- "resolved": "string",
216
- "references": {}
217
- },
218
- "required": false,
219
- "optional": false,
220
- "docs": {
221
- "tags": [],
222
- "text": "NorWAy endpoint"
223
- },
224
- "attribute": "endpoint",
225
- "reflect": true
226
- },
227
- "gameId": {
228
- "type": "string",
229
- "mutable": false,
230
- "complexType": {
231
- "original": "string",
232
- "resolved": "string",
233
- "references": {}
234
- },
235
- "required": false,
236
- "optional": false,
237
- "docs": {
238
- "tags": [],
239
- "text": "Game ID"
240
- },
241
- "attribute": "game-id",
242
- "reflect": true
243
- },
244
- "numberOfGrids": {
245
- "type": "number",
246
- "mutable": false,
247
- "complexType": {
248
- "original": "number",
249
- "resolved": "number",
250
- "references": {}
251
- },
252
- "required": false,
253
- "optional": false,
254
- "docs": {
255
- "tags": [],
256
- "text": "Number of grids of a ticket"
257
- },
258
- "attribute": "number-of-grids",
259
- "reflect": true,
260
- "defaultValue": "1"
261
- },
262
- "multipleDraws": {
263
- "type": "boolean",
264
- "mutable": false,
265
- "complexType": {
266
- "original": "boolean",
267
- "resolved": "boolean",
268
- "references": {}
269
- },
270
- "required": false,
271
- "optional": false,
272
- "docs": {
273
- "tags": [],
274
- "text": "Option to have the ticket registered for multiple draws"
275
- },
276
- "attribute": "multiple-draws",
277
- "reflect": true,
278
- "defaultValue": "true"
279
- },
280
- "ticketId": {
281
- "type": "number",
282
- "mutable": false,
283
- "complexType": {
284
- "original": "number",
285
- "resolved": "number",
286
- "references": {}
287
- },
288
- "required": false,
289
- "optional": false,
290
- "docs": {
291
- "tags": [],
292
- "text": "Ticket ID"
293
- },
294
- "attribute": "ticket-id",
295
- "reflect": true
296
- },
297
- "resetButton": {
298
- "type": "boolean",
299
- "mutable": false,
300
- "complexType": {
301
- "original": "boolean",
302
- "resolved": "boolean",
303
- "references": {}
304
- },
305
- "required": false,
306
- "optional": false,
307
- "docs": {
308
- "tags": [],
309
- "text": "Shows the reset button"
310
- },
311
- "attribute": "reset-button",
312
- "reflect": true,
313
- "defaultValue": "false"
314
- },
315
- "autoPick": {
316
- "type": "boolean",
317
- "mutable": false,
318
- "complexType": {
319
- "original": "boolean",
320
- "resolved": "boolean",
321
- "references": {}
322
- },
323
- "required": false,
324
- "optional": false,
325
- "docs": {
326
- "tags": [],
327
- "text": "Shows the auto-pick button"
328
- },
329
- "attribute": "auto-pick",
330
- "reflect": true,
331
- "defaultValue": "false"
332
- },
333
- "language": {
334
- "type": "string",
335
- "mutable": false,
336
- "complexType": {
337
- "original": "string",
338
- "resolved": "string",
339
- "references": {}
340
- },
341
- "required": false,
342
- "optional": false,
343
- "docs": {
344
- "tags": [],
345
- "text": "Language"
346
- },
347
- "attribute": "language",
348
- "reflect": true,
349
- "defaultValue": "'en'"
350
- },
351
- "clientStyling": {
352
- "type": "string",
353
- "mutable": false,
354
- "complexType": {
355
- "original": "string",
356
- "resolved": "string",
357
- "references": {}
358
- },
359
- "required": false,
360
- "optional": false,
361
- "docs": {
362
- "tags": [],
363
- "text": "Client custom styling via string"
364
- },
365
- "attribute": "client-styling",
366
- "reflect": true,
367
- "defaultValue": "''"
368
- },
369
- "clientStylingUrlContent": {
370
- "type": "string",
371
- "mutable": false,
372
- "complexType": {
373
- "original": "string",
374
- "resolved": "string",
375
- "references": {}
376
- },
377
- "required": false,
378
- "optional": false,
379
- "docs": {
380
- "tags": [],
381
- "text": "Client custom styling via url content"
382
- },
383
- "attribute": "client-styling-url-content",
384
- "reflect": true,
385
- "defaultValue": "''"
386
- }
387
- }; }
388
- static get states() { return {
389
- "multiplier": {},
390
- "numberOfDraws": {},
391
- "isLoading": {},
392
- "hasErrors": {},
393
- "ticketDone": {},
394
- "isCustomSelect": {},
395
- "amountInfo": {},
396
- "limitStylingAppends": {}
397
- }; }
398
- static get events() { return [{
399
- "method": "ticketCompleted",
400
- "name": "ticketCompleted",
401
- "bubbles": true,
402
- "cancelable": true,
403
- "composed": true,
404
- "docs": {
405
- "tags": [{
406
- "name": "TODO",
407
- "text": "including ts type"
408
- }],
409
- "text": ""
410
- },
411
- "complexType": {
412
- "original": "any",
413
- "resolved": "any",
414
- "references": {}
415
- }
416
- }, {
417
- "method": "autoSelection",
418
- "name": "autoSelection",
419
- "bubbles": true,
420
- "cancelable": true,
421
- "composed": true,
422
- "docs": {
423
- "tags": [],
424
- "text": ""
425
- },
426
- "complexType": {
427
- "original": "any",
428
- "resolved": "any",
429
- "references": {}
430
- }
431
- }, {
432
- "method": "resetSelection",
433
- "name": "resetSelection",
434
- "bubbles": true,
435
- "cancelable": true,
436
- "composed": true,
437
- "docs": {
438
- "tags": [],
439
- "text": ""
440
- },
441
- "complexType": {
442
- "original": "any",
443
- "resolved": "any",
444
- "references": {}
445
- }
446
- }, {
447
- "method": "stakeChange",
448
- "name": "stakeChange",
449
- "bubbles": true,
450
- "cancelable": true,
451
- "composed": true,
452
- "docs": {
453
- "tags": [],
454
- "text": ""
455
- },
456
- "complexType": {
457
- "original": "any",
458
- "resolved": "any",
459
- "references": {}
460
- }
461
- }, {
462
- "method": "multiplierChange",
463
- "name": "multiplierChange",
464
- "bubbles": true,
465
- "cancelable": true,
466
- "composed": true,
467
- "docs": {
468
- "tags": [],
469
- "text": ""
470
- },
471
- "complexType": {
472
- "original": "any",
473
- "resolved": "any",
474
- "references": {}
475
- }
476
- }]; }
477
- static get watchers() { return [{
478
- "propName": "numberOfDraws",
479
- "methodName": "drawsChangeHandler"
480
- }]; }
481
- static get listeners() { return [{
482
- "name": "click",
483
- "method": "checkForClickOutside",
484
- "target": "window",
485
- "capture": false,
486
- "passive": false
487
- }, {
488
- "name": "gridFilled",
489
- "method": "gridFilledHandler",
490
- "target": undefined,
491
- "capture": false,
492
- "passive": false
493
- }]; }
494
- }
@@ -1 +0,0 @@
1
- export * from './components';
@@ -1,58 +0,0 @@
1
- const DEFAULT_LANGUAGE = 'en';
2
- const SUPPORTED_LANGUAGES = ['ro', 'en', 'hr'];
3
- const TRANSLATIONS = {
4
- en: {
5
- loading: 'Loading, please wait ...',
6
- error: 'It was an error while trying to fetch the data',
7
- grid: 'Grid',
8
- multiplier: 'Multiplier',
9
- numberOfDraws: 'Number of draws',
10
- wagerPerDraw: 'Wager per draw',
11
- resetButton: 'Reset',
12
- autoButton: 'I feel lucky'
13
- },
14
- ro: {
15
- loading: 'Se incarca, va rugam asteptati ...',
16
- error: 'A fost o eroare in timp ce asteptam datele',
17
- grid: 'Grid',
18
- multiplier: 'Multiplicator',
19
- numberOfDraws: 'Numarul de extrageri',
20
- wagerPerDraw: 'Pariul per extragere',
21
- resetButton: 'Reseteaza',
22
- autoButton: 'Ma simt norocos'
23
- },
24
- fr: {
25
- loading: 'Loading, please wait ...',
26
- error: 'It was an error while trying to fetch the data',
27
- grid: 'Grid',
28
- multiplier: 'Multiplier',
29
- numberOfDraws: 'Number of draws',
30
- wagerPerDraw: 'Wager per draw',
31
- resetButton: 'Reset',
32
- autoButton: 'I feel lucky'
33
- },
34
- ar: {
35
- loading: 'Loading, please wait ...',
36
- error: 'It was an error while trying to fetch the data',
37
- grid: 'Grid',
38
- multiplier: 'Multiplier',
39
- numberOfDraws: 'Number of draws',
40
- wagerPerDraw: 'Wager per draw',
41
- resetButton: 'Reset',
42
- autoButton: 'I feel lucky'
43
- },
44
- hr: {
45
- loading: 'Učitavanje, molimo pričekajte ...',
46
- error: 'Došlo je do pogreške prilikom pokušaja dohvaćanja podataka',
47
- grid: 'Tablica',
48
- multiplier: 'Multiplikator',
49
- numberOfDraws: 'Broj izvlačenja',
50
- wagerPerDraw: 'Ulog po izvlačenju',
51
- resetButton: 'Resetiraj',
52
- autoButton: 'Osjećam se sretno'
53
- }
54
- };
55
- export const translate = (key, customLang) => {
56
- const lang = customLang;
57
- return TRANSLATIONS[lang !== undefined && SUPPORTED_LANGUAGES.includes(lang) ? lang : DEFAULT_LANGUAGE][key];
58
- };
File without changes
@@ -1,26 +0,0 @@
1
- /* LotteryTicket custom elements */
2
-
3
- import type { Components, JSX } from "../types/components";
4
-
5
- /**
6
- * Used to manually set the base path where assets can be found.
7
- * If the script is used as "module", it's recommended to use "import.meta.url",
8
- * such as "setAssetPath(import.meta.url)". Other options include
9
- * "setAssetPath(document.currentScript.src)", or using a bundler's replace plugin to
10
- * dynamically set the path at build time, such as "setAssetPath(process.env.ASSET_PATH)".
11
- * But do note that this configuration depends on how your script is bundled, or lack of
12
- * bundling, and where your assets can be loaded from. Additionally custom bundling
13
- * will have to ensure the static assets are copied to its build directory.
14
- */
15
- export declare const setAssetPath: (path: string) => void;
16
-
17
- export interface SetPlatformOptions {
18
- raf?: (c: FrameRequestCallback) => number;
19
- ael?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
20
- rel?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
21
- }
22
- export declare const setPlatformOptions: (opts: SetPlatformOptions) => void;
23
-
24
- export type { Components, JSX };
25
-
26
- export * from '../types';
@@ -1 +0,0 @@
1
- export { setAssetPath, setPlatformOptions } from '@stencil/core/internal/client';
@@ -1,6 +0,0 @@
1
- import { L as LotteryBullet$1, d as defineCustomElement$1 } from './lottery-bullet2.js';
2
-
3
- const LotteryBullet = LotteryBullet$1;
4
- const defineCustomElement = defineCustomElement$1;
5
-
6
- export { LotteryBullet, defineCustomElement };
@@ -1,91 +0,0 @@
1
- import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
2
-
3
- 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}";
4
-
5
- const LotteryBullet = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
6
- constructor() {
7
- super();
8
- this.__registerHost();
9
- this.__attachShadow();
10
- this.bulletEvent = createEvent(this, "lotteryBulletSelection", 7);
11
- /**
12
- * Value of the bullet
13
- */
14
- this.value = '0';
15
- /**
16
- * Marks if the bullet should be selectable
17
- */
18
- this.selectable = true;
19
- /**
20
- * Marks if the bullet should be selected
21
- */
22
- this.isSelected = false;
23
- /**
24
- * Client custom styling via string
25
- */
26
- this.clientStyling = '';
27
- /**
28
- * Client custom styling via url content
29
- */
30
- this.clientStylingUrlContent = '';
31
- this.limitStylingAppends = false;
32
- this.select = () => {
33
- if (this.selectable) {
34
- this.isSelected = !this.isSelected;
35
- this.bulletEvent.emit({
36
- value: this.value,
37
- selected: this.isSelected
38
- });
39
- }
40
- };
41
- this.setClientStyling = () => {
42
- let sheet = document.createElement('style');
43
- sheet.innerHTML = this.clientStyling;
44
- this.stylingContainer.prepend(sheet);
45
- };
46
- this.setClientStylingURL = () => {
47
- let cssFile = document.createElement('style');
48
- setTimeout(() => {
49
- cssFile.innerHTML = this.clientStylingUrlContent;
50
- this.stylingContainer.prepend(cssFile);
51
- }, 1);
52
- };
53
- }
54
- componentDidRender() {
55
- // start custom styling area
56
- if (!this.limitStylingAppends && this.stylingContainer) {
57
- if (this.clientStyling)
58
- this.setClientStyling();
59
- if (this.clientStylingUrlContent)
60
- this.setClientStylingURL();
61
- this.limitStylingAppends = true;
62
- }
63
- // end custom styling area
64
- }
65
- render() {
66
- return (h("div", { class: 'Circle ' + (this.selectable ? '' : 'Disabled') + (this.isSelected ? 'Selected' : ''), onClick: () => this.select(), ref: el => this.stylingContainer = el }, this.value));
67
- }
68
- static get style() { return lotteryBulletCss; }
69
- }, [1, "lottery-bullet", {
70
- "value": [513],
71
- "selectable": [516],
72
- "isSelected": [516, "is-selected"],
73
- "clientStyling": [513, "client-styling"],
74
- "clientStylingUrlContent": [513, "client-styling-url-content"],
75
- "limitStylingAppends": [32]
76
- }]);
77
- function defineCustomElement() {
78
- if (typeof customElements === "undefined") {
79
- return;
80
- }
81
- const components = ["lottery-bullet"];
82
- components.forEach(tagName => { switch (tagName) {
83
- case "lottery-bullet":
84
- if (!customElements.get(tagName)) {
85
- customElements.define(tagName, LotteryBullet);
86
- }
87
- break;
88
- } });
89
- }
90
-
91
- export { LotteryBullet as L, defineCustomElement as d };