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