@everymatrix/lottery-ticket-controller 0.1.6 → 0.1.7

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 (31) hide show
  1. package/dist/cjs/helper-accordion_5.cjs.entry.js +514 -0
  2. package/dist/cjs/loader.cjs.js +1 -1
  3. package/dist/cjs/lottery-ticket-controller.cjs.js +1 -1
  4. package/dist/collection/collection-manifest.json +1 -7
  5. package/dist/components/helper-accordion2.js +0 -1
  6. package/dist/components/lottery-bullet2.js +0 -1
  7. package/dist/components/lottery-grid2.js +0 -1
  8. package/dist/components/lottery-ticket-controller.js +0 -1
  9. package/dist/components/lottery-ticket2.js +0 -1
  10. package/dist/esm/helper-accordion_5.entry.js +506 -0
  11. package/dist/esm/loader.js +1 -1
  12. package/dist/esm/lottery-ticket-controller.js +1 -1
  13. package/dist/lottery-ticket-controller/lottery-ticket-controller.esm.js +1 -1
  14. package/dist/lottery-ticket-controller/p-95406ad0.entry.js +1 -0
  15. package/dist/stencil.config.js +0 -3
  16. package/package.json +2 -2
  17. package/dist/cjs/helper-accordion.cjs.entry.js +0 -92
  18. package/dist/cjs/lottery-bullet.cjs.entry.js +0 -41
  19. package/dist/cjs/lottery-grid.cjs.entry.js +0 -167
  20. package/dist/cjs/lottery-ticket-controller.cjs.entry.js +0 -69
  21. package/dist/cjs/lottery-ticket.cjs.entry.js +0 -169
  22. package/dist/esm/helper-accordion.entry.js +0 -88
  23. package/dist/esm/lottery-bullet.entry.js +0 -37
  24. package/dist/esm/lottery-grid.entry.js +0 -163
  25. package/dist/esm/lottery-ticket-controller.entry.js +0 -65
  26. package/dist/esm/lottery-ticket.entry.js +0 -165
  27. package/dist/lottery-ticket-controller/p-25f1639a.entry.js +0 -1
  28. package/dist/lottery-ticket-controller/p-40d1058f.entry.js +0 -1
  29. package/dist/lottery-ticket-controller/p-dc525e6c.entry.js +0 -1
  30. package/dist/lottery-ticket-controller/p-f08b1b06.entry.js +0 -1
  31. package/dist/lottery-ticket-controller/p-f886ec7e.entry.js +0 -1
package/package.json CHANGED
@@ -1,8 +1,8 @@
1
1
  {
2
2
  "name": "@everymatrix/lottery-ticket-controller",
3
- "version": "0.1.6",
3
+ "version": "0.1.7",
4
4
  "main": "./dist/index.cjs.js",
5
- "module": "./dist/components/lottery-ticket-controller.js",
5
+ "module": "./dist/index.js",
6
6
  "es2015": "./dist/esm/index.mjs",
7
7
  "es2017": "./dist/esm/index.mjs",
8
8
  "types": "./dist/types/index.d.ts",
@@ -1,92 +0,0 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
- const index = require('./index-95915aab.js');
6
-
7
- const DEFAULT_LANGUAGE = 'en';
8
- const SUPPORTED_LANGUAGES = ['ro', 'en'];
9
- const TRANSLATIONS = {
10
- en: {
11
- deleteTicket: 'Delete ticket'
12
- },
13
- ro: {
14
- deleteTicket: 'Sterge biletul'
15
- },
16
- };
17
- const translate = (key, customLang) => {
18
- const lang = customLang;
19
- return TRANSLATIONS[lang !== undefined && SUPPORTED_LANGUAGES.includes(lang) ? lang : DEFAULT_LANGUAGE][key];
20
- };
21
-
22
- const helperAccordionCss = "@import url(\"https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap\");:host{display:block;font-family:\"Roboto\", sans-serif}.Header{border-radius:4px 4px 0 0;background:#009993;display:flex;gap:30px;border:1px solid #009993;padding:8px 10px;user-select:none}.Header:hover{background:#00ABA4}.Header .Title,.Header .Subtitle,.Header .Description{margin:0;font-size:14px;color:#fff}.Header .Expand{margin-left:auto;color:#FFF;width:17px;height:17px;cursor:pointer;text-align:center;transform:rotate(90deg);font-size:20px;user-select:none}.HeaderTicketHistory{border-radius:4px;background:#F1F1F1;display:flex;gap:30px;border:1px solid #009993;padding:8px 10px;user-select:none;margin-bottom:5px}.HeaderTicketHistory:hover{background:#00ABA4}.HeaderTicketHistory .Title,.HeaderTicketHistory .Subtitle,.HeaderTicketHistory .Description{margin:0;font-size:14px;color:#000}.HeaderTicketHistory .Expand{margin-left:auto;color:#FFF;width:17px;height:17px;cursor:pointer;text-align:center;transform:rotate(90deg);font-size:20px;user-select:none}.Content{border-radius:0 0 4px 4px;background:#fff;border:1px solid #009993;padding:10px 15px;user-select:none;color:#000;margin-bottom:10px}.ActionButton{cursor:pointer;display:inline-block;border-radius:4px;margin:20px 0 10px;text-transform:uppercase;font-size:12px;text-align:center;padding:8px 20px;min-width:80px;background:#FF3D00;border:1px solid #FF3D00;color:#FFF}.ActionButton:hover{background:#FF6536;border:1px solid #FF3D00}";
23
-
24
- const Accordion = class {
25
- constructor(hostRef) {
26
- index.registerInstance(this, hostRef);
27
- this.accordionEvent = index.createEvent(this, "helperAccordionAction", 7);
28
- /**
29
- * Flag for ticket history
30
- */
31
- this.ticketHistoryFlag = false;
32
- /**
33
- * Title (top header)
34
- */
35
- this.headerTitle = '';
36
- /**
37
- * SubTitle (top header)
38
- */
39
- this.headerSubtitle = '';
40
- /**
41
- * Description
42
- */
43
- this.description = '';
44
- /**
45
- * Enables footer content
46
- */
47
- this.footer = false;
48
- /**
49
- * Enables footer button for tab deletion
50
- */
51
- this.deleteTab = false;
52
- /**
53
- * Activates postMessages as events for actions from the widget
54
- */
55
- this.postMessage = false;
56
- /**
57
- * Name of the event emitter by the action button
58
- */
59
- this.eventName = 'helperAccordionAction';
60
- /**
61
- * Collapsed
62
- */
63
- this.collapsed = true;
64
- /**
65
- * Language
66
- */
67
- this.language = 'en';
68
- }
69
- // @TODO fix the `any` type :)
70
- connectedCallback() {
71
- this.showContent = !this.collapsed;
72
- }
73
- toggleContent() {
74
- this.showContent = !this.showContent;
75
- }
76
- deleteAction() {
77
- if (this.postMessage) {
78
- // @TODO maybe change the name type, this one sucks
79
- window.postMessage({ type: this.eventName }, window.location.href);
80
- }
81
- this.accordionEvent.emit();
82
- }
83
- render() {
84
- return (index.h("div", { class: "Wrapper" }, index.h("div", { class: this.ticketHistoryFlag === true ? 'HeaderTicketHistory' : 'Header' }, index.h("p", { class: "Title" }, this.headerTitle), index.h("p", { class: "Subtitle" }, this.headerSubtitle), index.h("p", { class: "Subtitle" }, this.description), index.h("span", { class: "Expand", onClick: () => this.toggleContent() }, this.showContent ? '<' : '>')), this.showContent &&
85
- index.h("div", null, index.h("div", { class: "Content" }, index.h("slot", { name: 'accordionContent' }), this.footer && this.showContent &&
86
- index.h("div", null, this.deleteTab &&
87
- index.h("span", { class: "ActionButton", onClick: () => this.deleteAction() }, translate('deleteTicket', this.language)))))));
88
- }
89
- };
90
- Accordion.style = helperAccordionCss;
91
-
92
- exports.helper_accordion = Accordion;
@@ -1,41 +0,0 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
- const index = require('./index-95915aab.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
- this.select = () => {
26
- if (this.selectable) {
27
- this.isSelected = !this.isSelected;
28
- this.bulletEvent.emit({
29
- value: this.value,
30
- selected: this.isSelected
31
- });
32
- }
33
- };
34
- }
35
- render() {
36
- return (index.h("div", { class: 'Circle ' + (this.selectable ? '' : 'Disabled') + (this.isSelected ? 'Selected' : ''), onClick: () => this.select() }, this.value));
37
- }
38
- };
39
- LotteryBullet.style = lotteryBulletCss;
40
-
41
- exports.lottery_bullet = LotteryBullet;
@@ -1,167 +0,0 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
- const index = require('./index-95915aab.js');
6
-
7
- 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:25px}";
8
-
9
- const LotteryGrid = class {
10
- constructor(hostRef) {
11
- index.registerInstance(this, hostRef);
12
- this.gridFilledEvent = index.createEvent(this, "gridFilled", 7);
13
- this.gridDirtyEvent = index.createEvent(this, "gridDirty", 7);
14
- /**
15
- * Number of bullets of grid
16
- */
17
- this.totalNumbers = 0;
18
- /**
19
- * Number of maximum bullets that can be selected
20
- */
21
- this.maximumAllowed = 0;
22
- /**
23
- * Minimum allowed of bullets
24
- */
25
- this.minimumAllowed = 1;
26
- /**
27
- * Allows the user to select numbers on the grid
28
- */
29
- this.selectable = true;
30
- /**
31
- * Numbers that should be showed as selected on the grid (as a string of those numbers e.g. '1,2,3,4,5,6')
32
- */
33
- this.selectedNumbers = '';
34
- /**
35
- * Show only selected numbers
36
- */
37
- this.displaySelected = false;
38
- /**
39
- * Language
40
- */
41
- this.language = 'en';
42
- this.numbers = [];
43
- this.selectedCounter = 0;
44
- }
45
- connectedCallback() {
46
- let selected = [];
47
- if (this.selectedNumbers.length > 0) {
48
- selected = this.selectedNumbers.split(',');
49
- this.selectedCounter = selected.length;
50
- }
51
- if (this.displaySelected) {
52
- selected.forEach((item) => {
53
- this.numbers.push({
54
- number: item,
55
- selected: true,
56
- selectable: this.selectable
57
- });
58
- });
59
- }
60
- else {
61
- [...Array(this.totalNumbers).keys()]
62
- .map(number => (number + 1).toString())
63
- .forEach((number) => {
64
- this.numbers.push({
65
- number,
66
- selected: selected.indexOf(number) >= 0 ? true : false,
67
- selectable: this.selectedCounter == this.maximumAllowed ? false : this.selectable
68
- });
69
- });
70
- }
71
- }
72
- lotteryBulletSelectionHandler(event) {
73
- this.numbers = this.numbers.map((item) => {
74
- if (item.number == event.detail.value) {
75
- return {
76
- number: item.number,
77
- selected: event.detail.selected,
78
- selectable: item.selectable
79
- };
80
- }
81
- return {
82
- number: item.number,
83
- selected: item.selected,
84
- selectable: item.selectable
85
- };
86
- });
87
- if (event.detail.selected) {
88
- this.selectedCounter += 1;
89
- if (this.selectedCounter == this.maximumAllowed) {
90
- this.numbers = this.numbers.map((item) => {
91
- return {
92
- number: item.number,
93
- selected: item.selected,
94
- selectable: item.selected ? true : false
95
- };
96
- });
97
- this.gridFilledEvent.emit({
98
- id: this.ticketId,
99
- index: this.gridIndex,
100
- selectedNumbers: this.numbers.filter((item) => item.selected).map((item) => item.number)
101
- });
102
- }
103
- }
104
- else {
105
- if (this.selectedCounter == this.maximumAllowed) {
106
- this.numbers = this.numbers.map((item) => {
107
- return {
108
- number: item.number,
109
- selected: item.selected,
110
- selectable: true
111
- };
112
- });
113
- this.gridDirtyEvent.emit({
114
- id: this.ticketId,
115
- index: this.gridIndex,
116
- selectedNumbers: this.numbers.filter((item) => item.selected).map((item) => item.number)
117
- });
118
- }
119
- this.selectedCounter -= 1;
120
- }
121
- }
122
- async resetSelectionHandler(event) {
123
- if (event.detail && event.detail == this.ticketId) {
124
- this.selectedCounter = 0;
125
- this.numbers = this.numbers.map((item) => {
126
- return {
127
- number: item.number,
128
- selected: false,
129
- selectable: this.selectable
130
- };
131
- });
132
- this.gridDirtyEvent.emit({
133
- id: this.ticketId,
134
- index: this.gridIndex,
135
- selectedNumbers: this.numbers.filter((item) => item.selected).map((item) => item.number)
136
- });
137
- }
138
- }
139
- async autoSelectionHandler(event) {
140
- if (event.detail && event.detail == this.ticketId) {
141
- this.resetSelectionHandler(event);
142
- let array = [...Array(this.totalNumbers).keys()]
143
- .map(number => number + 1)
144
- .sort(() => 0.5 - Math.random());
145
- array = array.slice(0, this.minimumAllowed);
146
- this.numbers = this.numbers.map((item) => {
147
- return {
148
- number: item.number,
149
- selected: array.indexOf(parseInt(item.number, 10)) >= 0 ? true : false,
150
- selectable: array.indexOf(parseInt(item.number, 10)) >= 0 ? true : false,
151
- };
152
- });
153
- this.gridFilledEvent.emit({
154
- id: this.ticketId,
155
- index: this.gridIndex,
156
- selectedNumbers: this.numbers.filter((item) => item.selected).map((item) => item.number)
157
- });
158
- this.selectedCounter = this.maximumAllowed;
159
- }
160
- }
161
- render() {
162
- return (index.h("div", { class: "GridContainer" }, index.h("div", { class: "Grid" }, this.numbers.map((item) => index.h("div", null, index.h("lottery-bullet", { value: item.number, selectable: item.selectable, "is-selected": item.selected }))))));
163
- }
164
- };
165
- LotteryGrid.style = lotteryGridCss;
166
-
167
- exports.lottery_grid = LotteryGrid;
@@ -1,69 +0,0 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
- const index = require('./index-95915aab.js');
6
-
7
- const lotteryTicketControllerCss = ":host{display:block}";
8
-
9
- const LotteryTicketController = class {
10
- constructor(hostRef) {
11
- index.registerInstance(this, hostRef);
12
- this.deleteTicketEvent = index.createEvent(this, "deleteTicket", 7);
13
- /**
14
- * Endpoint URL for the source of data (NorWAy standard)
15
- */
16
- this.endpoint = '';
17
- /**
18
- * Ticket number
19
- */
20
- this.ticketId = 1;
21
- /**
22
- * Activates postMessages as events for actions from the widget
23
- */
24
- this.postMessage = false;
25
- /**
26
- * Name of the event emitter by the action button
27
- */
28
- this.eventName = 'deleteTicketAction';
29
- /**
30
- * Collapsed
31
- */
32
- this.collapsed = true;
33
- /**
34
- * Number of grids?
35
- */
36
- this.numberOfGrids = 1;
37
- /**
38
- * This toggles if the last ticket added should be expanded or not
39
- */
40
- this.last = false;
41
- /**
42
- * Language
43
- */
44
- this.language = 'en';
45
- /**
46
- * Shows the auto-pick button
47
- */
48
- this.autoPick = false;
49
- /**
50
- * Shows the reset button
51
- */
52
- this.resetButton = false;
53
- }
54
- // @TODO fix the `any` type
55
- helperAccordionActionHandler() {
56
- if (this.postMessage) {
57
- window.postMessage({ type: this.eventName }, window.location.href);
58
- }
59
- this.deleteTicketEvent.emit({
60
- ticketId: this.ticketId
61
- });
62
- }
63
- render() {
64
- return (index.h("div", null, index.h("helper-accordion", { "header-title": 'Ticket ' + this.ticketId, "header-subtitle": this.ticketDescription, footer: true, "delete-tab": true, collapsed: !this.last || this.collapsed, language: this.language }, index.h("div", { slot: "accordionContent" }, index.h("lottery-ticket", { endpoint: this.endpoint, "game-id": this.gameId, "ticket-id": this.ticketId, "number-of-grids": this.numberOfGrids, language: this.language, "reset-button": this.resetButton, "auto-pick": this.autoPick })))));
65
- }
66
- };
67
- LotteryTicketController.style = lotteryTicketControllerCss;
68
-
69
- exports.lottery_ticket_controller = LotteryTicketController;
@@ -1,169 +0,0 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
- const index = require('./index-95915aab.js');
6
-
7
- const DEFAULT_LANGUAGE = 'en';
8
- const SUPPORTED_LANGUAGES = ['ro', 'en'];
9
- const TRANSLATIONS = {
10
- en: {
11
- loading: 'Loading, please wait ...',
12
- error: 'It was an error while trying to fetch the data',
13
- grid: 'Grid',
14
- multiplier: 'Multiplier',
15
- numberOfDraws: 'Number of draws',
16
- wagerPerDraw: 'Wager per draw',
17
- resetButton: 'Reset',
18
- autoButton: 'I feel lucky'
19
- },
20
- ro: {
21
- loading: 'Se incarca, va rugam asteptati ...',
22
- error: 'A fost o eroare in timp ce asteptam datele',
23
- grid: 'Grid',
24
- multiplier: 'Multiplicator',
25
- numberOfDraws: 'Numarul de extrageri',
26
- wagerPerDraw: 'Pariul per extragere',
27
- resetButton: 'Reseteaza',
28
- autoButton: 'Ma simt norocos'
29
- },
30
- };
31
- const translate = (key, customLang) => {
32
- const lang = customLang;
33
- return TRANSLATIONS[lang !== undefined && SUPPORTED_LANGUAGES.includes(lang) ? lang : DEFAULT_LANGUAGE][key];
34
- };
35
-
36
- 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}";
37
-
38
- const LotteryTicket = class {
39
- constructor(hostRef) {
40
- index.registerInstance(this, hostRef);
41
- this.ticketCompleted = index.createEvent(this, "ticketCompleted", 7);
42
- this.autoSelection = index.createEvent(this, "autoSelection", 7);
43
- this.resetSelection = index.createEvent(this, "resetSelection", 7);
44
- this.stakeChange = index.createEvent(this, "stakeChange", 7);
45
- this.multiplierChange = index.createEvent(this, "multiplierChange", 7);
46
- /**
47
- * Number of grids of a ticket
48
- */
49
- this.numberOfGrids = 1;
50
- /**
51
- * Option to have the ticket registered for multiple draws
52
- */
53
- this.multipleDraws = true;
54
- /**
55
- * Shows the reset button
56
- */
57
- this.resetButton = false;
58
- /**
59
- * Shows the auto-pick button
60
- */
61
- this.autoPick = false;
62
- /**
63
- * Language
64
- */
65
- this.language = 'en';
66
- this.multiplier = false;
67
- this.numberOfDraws = 1;
68
- this.isLoading = true;
69
- this.hasErrors = false;
70
- this.ticketDone = false;
71
- this.isCustomSelect = false;
72
- this.amountInfo = {};
73
- }
74
- /**
75
- * @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
76
- */
77
- checkForClickOutside(ev) {
78
- if (ev.composedPath()[0].getAttribute('data-cluster') !== 'SelectComponent') {
79
- this.isCustomSelect = false;
80
- }
81
- }
82
- connectedCallback() {
83
- let url = new URL(`${this.endpoint}/games/${this.gameId}`);
84
- fetch(url.href)
85
- .then((response) => {
86
- if (response.ok) {
87
- return response.json();
88
- }
89
- else {
90
- // Throw error
91
- this.hasErrors = true;
92
- }
93
- })
94
- .then((data) => {
95
- this.isLoading = false;
96
- this.gameData = data;
97
- this.grids = [...Array(data.rules.boards.length).keys()];
98
- this.amountInfo = this.gameData.rules.stakes[0]; // initial value for select
99
- })
100
- .catch((err) => {
101
- this.isLoading = false;
102
- this.hasErrors = true;
103
- console.error('Error!', err);
104
- });
105
- }
106
- multiplierChangeHandler(e) {
107
- this.multiplier = e.target ? e.target.checked : false;
108
- this.multiplierChange.emit(this.multiplier);
109
- }
110
- drawsChangeHandler(event) {
111
- this.ticket = Object.assign(Object.assign({}, this.ticket), { draws: event });
112
- this.ticketCompleted.emit(this.ticket);
113
- }
114
- gridFilledHandler(event) {
115
- this.ticket = Object.assign(Object.assign({}, event.detail), { draws: this.numberOfDraws });
116
- this.ticketDone = true;
117
- this.ticketCompleted.emit(this.ticket);
118
- }
119
- toggleAutoSelection() {
120
- this.ticketDone = true;
121
- this.autoSelection.emit(this.ticketId);
122
- }
123
- toggleResetSelection() {
124
- this.ticketDone = false;
125
- this.resetSelection.emit(this.ticketId);
126
- }
127
- changeStake(ticketid, amount) {
128
- this.stakeChange.emit({
129
- ticketId: ticketid,
130
- stake: amount
131
- });
132
- }
133
- toggleClass() {
134
- this.isCustomSelect = !this.isCustomSelect;
135
- }
136
- setDropdownItem(item) {
137
- this.amountInfo = {
138
- amount: item.amount,
139
- currency: item.currency
140
- };
141
- this.isCustomSelect = false;
142
- this.changeStake(this.ticketId, item.amount);
143
- }
144
- render() {
145
- if (this.isLoading) {
146
- return (index.h("div", null, index.h("p", null, translate('loading', this.language))));
147
- }
148
- else {
149
- if (this.hasErrors) {
150
- return (index.h("div", null, index.h("p", null, translate('error', this.language))));
151
- }
152
- else {
153
- const { rules } = this.gameData;
154
- return (index.h("div", { class: "TicketContainer" }, index.h("p", { class: "TicketTitle" }, this.gameData.name), this.resetButton && this.ticketDone &&
155
- index.h("div", { class: "ButtonContainer" }, index.h("a", { class: "ResetButton", onClick: () => this.toggleResetSelection() }, translate('resetButton', this.language))), this.autoPick && !this.ticketDone &&
156
- index.h("div", { class: "ButtonContainer" }, index.h("a", { class: "AutoButton", onClick: () => this.toggleAutoSelection() }, translate('autoButton', this.language))), this.grids.map((item, index$1) => index.h("div", { class: "TicketGridBullets" }, index.h("p", { class: "TicketGridTitle" }, translate('grid', this.language), " ", item), index.h("lottery-grid", { "grid-index": index$1, "maximum-allowed": rules.boards[index$1].maximumAllowed, "minimum-allowed": rules.boards[index$1].minimumAllowed, "total-numbers": rules.boards[index$1].totalNumbers, selectable: true, "reset-button": true, "auto-pick": true, "game-id": this.gameId, "ticket-id": this.ticketId, language: this.language }))), rules.multiplier &&
157
- 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 &&
158
- 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" }, rules.stakes.length > 1 ?
159
- (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.amount, " ", 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" }, rules.stakes.map((item) => index.h("li", { "data-cluster": "SelectComponent", class: this.amountInfo.amount == item.amount ? 'SelectedValue' : '', value: item.amount, onClick: () => this.setDropdownItem(item) }, item.amount, " ", item.currency)))))) : (index.h("div", null, index.h("input", { min: "1", value: rules.stakes[0].amount, type: "number", disabled: true }), index.h("p", { class: "WagerInputTitle" }, rules.stakes[0].currency)))))));
160
- }
161
- }
162
- }
163
- static get watchers() { return {
164
- "numberOfDraws": ["drawsChangeHandler"]
165
- }; }
166
- };
167
- LotteryTicket.style = lotteryTicketCss;
168
-
169
- exports.lottery_ticket = LotteryTicket;
@@ -1,88 +0,0 @@
1
- import { r as registerInstance, c as createEvent, h } from './index-e3877ca0.js';
2
-
3
- const DEFAULT_LANGUAGE = 'en';
4
- const SUPPORTED_LANGUAGES = ['ro', 'en'];
5
- const TRANSLATIONS = {
6
- en: {
7
- deleteTicket: 'Delete ticket'
8
- },
9
- ro: {
10
- deleteTicket: 'Sterge biletul'
11
- },
12
- };
13
- const translate = (key, customLang) => {
14
- const lang = customLang;
15
- return TRANSLATIONS[lang !== undefined && SUPPORTED_LANGUAGES.includes(lang) ? lang : DEFAULT_LANGUAGE][key];
16
- };
17
-
18
- const helperAccordionCss = "@import url(\"https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap\");:host{display:block;font-family:\"Roboto\", sans-serif}.Header{border-radius:4px 4px 0 0;background:#009993;display:flex;gap:30px;border:1px solid #009993;padding:8px 10px;user-select:none}.Header:hover{background:#00ABA4}.Header .Title,.Header .Subtitle,.Header .Description{margin:0;font-size:14px;color:#fff}.Header .Expand{margin-left:auto;color:#FFF;width:17px;height:17px;cursor:pointer;text-align:center;transform:rotate(90deg);font-size:20px;user-select:none}.HeaderTicketHistory{border-radius:4px;background:#F1F1F1;display:flex;gap:30px;border:1px solid #009993;padding:8px 10px;user-select:none;margin-bottom:5px}.HeaderTicketHistory:hover{background:#00ABA4}.HeaderTicketHistory .Title,.HeaderTicketHistory .Subtitle,.HeaderTicketHistory .Description{margin:0;font-size:14px;color:#000}.HeaderTicketHistory .Expand{margin-left:auto;color:#FFF;width:17px;height:17px;cursor:pointer;text-align:center;transform:rotate(90deg);font-size:20px;user-select:none}.Content{border-radius:0 0 4px 4px;background:#fff;border:1px solid #009993;padding:10px 15px;user-select:none;color:#000;margin-bottom:10px}.ActionButton{cursor:pointer;display:inline-block;border-radius:4px;margin:20px 0 10px;text-transform:uppercase;font-size:12px;text-align:center;padding:8px 20px;min-width:80px;background:#FF3D00;border:1px solid #FF3D00;color:#FFF}.ActionButton:hover{background:#FF6536;border:1px solid #FF3D00}";
19
-
20
- const Accordion = class {
21
- constructor(hostRef) {
22
- registerInstance(this, hostRef);
23
- this.accordionEvent = createEvent(this, "helperAccordionAction", 7);
24
- /**
25
- * Flag for ticket history
26
- */
27
- this.ticketHistoryFlag = false;
28
- /**
29
- * Title (top header)
30
- */
31
- this.headerTitle = '';
32
- /**
33
- * SubTitle (top header)
34
- */
35
- this.headerSubtitle = '';
36
- /**
37
- * Description
38
- */
39
- this.description = '';
40
- /**
41
- * Enables footer content
42
- */
43
- this.footer = false;
44
- /**
45
- * Enables footer button for tab deletion
46
- */
47
- this.deleteTab = false;
48
- /**
49
- * Activates postMessages as events for actions from the widget
50
- */
51
- this.postMessage = false;
52
- /**
53
- * Name of the event emitter by the action button
54
- */
55
- this.eventName = 'helperAccordionAction';
56
- /**
57
- * Collapsed
58
- */
59
- this.collapsed = true;
60
- /**
61
- * Language
62
- */
63
- this.language = 'en';
64
- }
65
- // @TODO fix the `any` type :)
66
- connectedCallback() {
67
- this.showContent = !this.collapsed;
68
- }
69
- toggleContent() {
70
- this.showContent = !this.showContent;
71
- }
72
- deleteAction() {
73
- if (this.postMessage) {
74
- // @TODO maybe change the name type, this one sucks
75
- window.postMessage({ type: this.eventName }, window.location.href);
76
- }
77
- this.accordionEvent.emit();
78
- }
79
- render() {
80
- return (h("div", { class: "Wrapper" }, h("div", { class: this.ticketHistoryFlag === true ? 'HeaderTicketHistory' : 'Header' }, h("p", { class: "Title" }, this.headerTitle), h("p", { class: "Subtitle" }, this.headerSubtitle), h("p", { class: "Subtitle" }, this.description), h("span", { class: "Expand", onClick: () => this.toggleContent() }, this.showContent ? '<' : '>')), this.showContent &&
81
- h("div", null, h("div", { class: "Content" }, h("slot", { name: 'accordionContent' }), this.footer && this.showContent &&
82
- h("div", null, this.deleteTab &&
83
- h("span", { class: "ActionButton", onClick: () => this.deleteAction() }, translate('deleteTicket', this.language)))))));
84
- }
85
- };
86
- Accordion.style = helperAccordionCss;
87
-
88
- export { Accordion as helper_accordion };