@everymatrix/lottery-ticket-controller 1.44.0 → 1.45.0

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 (58) hide show
  1. package/dist/cjs/app-globals-3a1e7e63.js +5 -0
  2. package/dist/cjs/helper-accordion_5.cjs.entry.js +570 -697
  3. package/dist/cjs/index-2275f129.js +1304 -0
  4. package/dist/cjs/loader.cjs.js +7 -13
  5. package/dist/cjs/lottery-ticket-controller.cjs.js +17 -11
  6. package/dist/collection/collection-manifest.json +3 -3
  7. package/dist/collection/components/lottery-ticket-controller/index.js +1 -0
  8. package/dist/collection/components/lottery-ticket-controller/lottery-ticket-controller.css +1 -1
  9. package/dist/collection/components/lottery-ticket-controller/lottery-ticket-controller.js +371 -399
  10. package/dist/collection/utils/locale.utils.js +17 -17
  11. package/dist/collection/utils/utils.js +1 -1
  12. package/dist/esm/app-globals-0f993ce5.js +3 -0
  13. package/dist/esm/helper-accordion_5.entry.js +570 -697
  14. package/dist/esm/index-cf1a7f99.js +1277 -0
  15. package/dist/esm/loader.js +7 -13
  16. package/dist/esm/lottery-ticket-controller.js +14 -11
  17. package/dist/lottery-ticket-controller/lottery-ticket-controller.esm.js +1 -1
  18. package/dist/lottery-ticket-controller/p-5d5cd019.entry.js +1 -0
  19. package/dist/lottery-ticket-controller/p-e1255160.js +1 -0
  20. package/dist/lottery-ticket-controller/p-ee226061.js +2 -0
  21. package/dist/stencil.config.dev.js +17 -0
  22. package/dist/stencil.config.js +14 -19
  23. package/dist/types/Users/adrian.pripon/Documents/Work/widgets-monorepo/packages/stencil/lottery-ticket-controller/.stencil/packages/stencil/lottery-ticket-controller/stencil.config.d.ts +2 -0
  24. package/dist/types/Users/adrian.pripon/Documents/Work/widgets-monorepo/packages/stencil/lottery-ticket-controller/.stencil/packages/stencil/lottery-ticket-controller/stencil.config.dev.d.ts +2 -0
  25. package/dist/types/components/lottery-ticket-controller/index.d.ts +1 -0
  26. package/dist/types/components/lottery-ticket-controller/lottery-ticket-controller.d.ts +70 -70
  27. package/dist/types/components.d.ts +16 -1
  28. package/dist/types/stencil-public-runtime.d.ts +142 -33
  29. package/loader/cdn.js +1 -3
  30. package/loader/index.cjs.js +1 -3
  31. package/loader/index.d.ts +13 -1
  32. package/loader/index.es2017.js +1 -3
  33. package/loader/index.js +1 -3
  34. package/loader/package.json +1 -0
  35. package/package.json +10 -3
  36. package/dist/cjs/index-797fecd9.js +0 -1286
  37. package/dist/components/helper-accordion.js +0 -6
  38. package/dist/components/helper-accordion2.js +0 -158
  39. package/dist/components/index.d.ts +0 -26
  40. package/dist/components/index.js +0 -1
  41. package/dist/components/lottery-bullet.js +0 -6
  42. package/dist/components/lottery-bullet2.js +0 -91
  43. package/dist/components/lottery-grid.js +0 -6
  44. package/dist/components/lottery-grid2.js +0 -245
  45. package/dist/components/lottery-ticket-controller.d.ts +0 -11
  46. package/dist/components/lottery-ticket-controller.js +0 -185
  47. package/dist/components/lottery-ticket.js +0 -6
  48. package/dist/components/lottery-ticket2.js +0 -273
  49. package/dist/esm/index-c4bda097.js +0 -1260
  50. package/dist/esm/polyfills/core-js.js +0 -11
  51. package/dist/esm/polyfills/css-shim.js +0 -1
  52. package/dist/esm/polyfills/dom.js +0 -79
  53. package/dist/esm/polyfills/es5-html-element.js +0 -1
  54. package/dist/esm/polyfills/index.js +0 -34
  55. package/dist/esm/polyfills/system.js +0 -6
  56. package/dist/lottery-ticket-controller/p-1f81b6df.js +0 -1
  57. package/dist/lottery-ticket-controller/p-2577bcb1.entry.js +0 -1
  58. package/dist/types/Users/adrian.pripon/Documents/Work/widgets-stencil/packages/lottery-ticket-controller/.stencil/packages/lottery-ticket-controller/stencil.config.d.ts +0 -2
@@ -1,6 +0,0 @@
1
- import { A as Accordion, d as defineCustomElement$1 } from './helper-accordion2.js';
2
-
3
- const HelperAccordion = Accordion;
4
- const defineCustomElement = defineCustomElement$1;
5
-
6
- export { HelperAccordion, defineCustomElement };
@@ -1,158 +0,0 @@
1
- import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
2
-
3
- const DEFAULT_LANGUAGE = 'en';
4
- const TRANSLATIONS = {
5
- en: {
6
- deleteTicket: 'Delete ticket'
7
- },
8
- ro: {
9
- deleteTicket: 'Sterge biletul'
10
- },
11
- fr: {
12
- deleteTicket: 'Supprimer le billet'
13
- },
14
- ar: {
15
- deleteTicket: 'حذف التذكرة'
16
- },
17
- hr: {
18
- deleteTicket: 'Izbriši listić'
19
- }
20
- };
21
- const translate = (key, customLang) => {
22
- const lang = customLang;
23
- return TRANSLATIONS[(lang !== undefined) && (lang in TRANSLATIONS) ? lang : DEFAULT_LANGUAGE][key];
24
- };
25
-
26
- 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:5px;background:#009993;display:flex;gap:30px;border:1px solid #009993;padding:8px 10px;user-select:none;margin-bottom:1px;cursor:pointer}.Header:hover{background:#00ABA4}.Header .Title,.Header .Subtitle,.Header .Description{margin:0;font-size:14px;color:#fff;text-transform:capitalize}.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;cursor:pointer}.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}";
27
-
28
- const Accordion = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
29
- constructor() {
30
- super();
31
- this.__registerHost();
32
- this.__attachShadow();
33
- this.accordionEvent = createEvent(this, "helperAccordionAction", 7);
34
- /**
35
- * Flag for ticket history
36
- */
37
- this.ticketHistoryFlag = false;
38
- /**
39
- * Title (top header)
40
- */
41
- this.headerTitle = '';
42
- /**
43
- * SubTitle (top header)
44
- */
45
- this.headerSubtitle = '';
46
- /**
47
- * Description
48
- */
49
- this.description = '';
50
- /**
51
- * Enables footer content
52
- */
53
- this.footer = false;
54
- /**
55
- * Enables footer button for tab deletion
56
- */
57
- this.deleteTab = false;
58
- /**
59
- * Activates postMessages as events for actions from the widget
60
- */
61
- this.postMessage = false;
62
- /**
63
- * Name of the event emitter by the action button
64
- */
65
- this.eventName = 'helperAccordionAction';
66
- /**
67
- * Collapsed
68
- */
69
- this.collapsed = true;
70
- /**
71
- * Language
72
- */
73
- this.language = 'en';
74
- /**
75
- * Client custom styling via string
76
- */
77
- this.clientStyling = '';
78
- /**
79
- * Client custom styling via url content
80
- */
81
- this.clientStylingUrlContent = '';
82
- this.limitStylingAppends = false;
83
- this.setClientStyling = () => {
84
- let sheet = document.createElement('style');
85
- sheet.innerHTML = this.clientStyling;
86
- this.stylingContainer.prepend(sheet);
87
- };
88
- this.setClientStylingURL = () => {
89
- let cssFile = document.createElement('style');
90
- setTimeout(() => {
91
- cssFile.innerHTML = this.clientStylingUrlContent;
92
- this.stylingContainer.prepend(cssFile);
93
- }, 1);
94
- };
95
- }
96
- // @TODO fix the `any` type :)
97
- connectedCallback() {
98
- this.showContent = !this.collapsed;
99
- }
100
- componentDidRender() {
101
- // start custom styling area
102
- if (!this.limitStylingAppends && this.stylingContainer) {
103
- if (this.clientStyling)
104
- this.setClientStyling();
105
- if (this.clientStylingUrlContent)
106
- this.setClientStylingURL();
107
- this.limitStylingAppends = true;
108
- }
109
- // end custom styling area
110
- }
111
- toggleContent() {
112
- this.showContent = !this.showContent;
113
- }
114
- deleteAction() {
115
- if (this.postMessage) {
116
- // @TODO maybe change the name type, this one sucks
117
- window.postMessage({ type: this.eventName }, window.location.href);
118
- }
119
- this.accordionEvent.emit();
120
- }
121
- render() {
122
- return (h("div", { class: "Wrapper", ref: el => this.stylingContainer = el }, h("div", { class: this.ticketHistoryFlag === true ? 'HeaderTicketHistory' : 'Header', onClick: () => this.toggleContent() }, h("p", { class: "Title" }, this.headerTitle), h("p", { class: "Subtitle" }, this.headerSubtitle), h("p", { class: "Subtitle Description" }, this.description), h("span", { class: "Expand" }, this.showContent ? '<' : '>')), this.showContent &&
123
- h("div", null, h("div", { class: "Content" }, h("slot", { name: 'accordionContent' }), this.footer && this.showContent &&
124
- h("div", null, this.deleteTab &&
125
- h("span", { class: "ActionButton", onClick: () => this.deleteAction() }, translate('deleteTicket', this.language)))))));
126
- }
127
- static get style() { return helperAccordionCss; }
128
- }, [1, "helper-accordion", {
129
- "ticketHistoryFlag": [516, "ticket-history-flag"],
130
- "headerTitle": [513, "header-title"],
131
- "headerSubtitle": [513, "header-subtitle"],
132
- "description": [513],
133
- "footer": [516],
134
- "deleteTab": [516, "delete-tab"],
135
- "postMessage": [516, "post-message"],
136
- "eventName": [513, "event-name"],
137
- "collapsed": [516],
138
- "language": [513],
139
- "clientStyling": [513, "client-styling"],
140
- "clientStylingUrlContent": [513, "client-styling-url-content"],
141
- "showContent": [32],
142
- "limitStylingAppends": [32]
143
- }]);
144
- function defineCustomElement() {
145
- if (typeof customElements === "undefined") {
146
- return;
147
- }
148
- const components = ["helper-accordion"];
149
- components.forEach(tagName => { switch (tagName) {
150
- case "helper-accordion":
151
- if (!customElements.get(tagName)) {
152
- customElements.define(tagName, Accordion);
153
- }
154
- break;
155
- } });
156
- }
157
-
158
- export { Accordion as A, defineCustomElement as d };
@@ -1,26 +0,0 @@
1
- /* LotteryTicketController 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 };
@@ -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 LotteryTicketController extends Components.LotteryTicketController, HTMLElement {}
4
- export const LotteryTicketController: {
5
- prototype: LotteryTicketController;
6
- new (): LotteryTicketController;
7
- };
8
- /**
9
- * Used to define this component and all nested components recursively.
10
- */
11
- export const defineCustomElement: () => void;