@everymatrix/helper-tabs 1.55.0 → 1.56.2
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/dist/cjs/helper-tab_2.cjs.entry.js +125 -52
- package/dist/cjs/helper-tabs.cjs.js +3 -3
- package/dist/cjs/{index-d8f4ee8c.js → index-d010e014.js} +45 -48
- package/dist/cjs/loader.cjs.js +2 -2
- package/dist/collection/collection-manifest.json +2 -2
- package/dist/collection/components/helper-tab/helper-tab.js +62 -32
- package/dist/collection/components/helper-tabs/helper-tabs.js +56 -30
- package/dist/esm/helper-tab_2.entry.js +125 -52
- package/dist/esm/helper-tabs.js +4 -4
- package/dist/esm/{index-55376e55.js → index-3174302b.js} +45 -48
- package/dist/esm/loader.js +3 -3
- package/dist/helper-tabs/helper-tabs.esm.js +1 -1
- package/dist/helper-tabs/p-88d4a539.entry.js +1 -0
- package/dist/helper-tabs/p-a0103339.js +2 -0
- package/dist/types/components/helper-tab/helper-tab.d.ts +10 -5
- package/dist/types/components/helper-tabs/helper-tabs.d.ts +10 -5
- package/dist/types/components.d.ts +20 -4
- package/dist/types/stencil-public-runtime.d.ts +0 -6
- package/package.json +1 -1
- package/dist/helper-tabs/p-47fcd693.js +0 -2
- package/dist/helper-tabs/p-7f43459b.entry.js +0 -1
|
@@ -1,23 +1,13 @@
|
|
|
1
1
|
import { h } from "@stencil/core";
|
|
2
2
|
import { translate, translateWithParams, getTranslations } from "../../utils/locale.utils";
|
|
3
|
+
import { setClientStyling, setClientStylingURL, setStreamStyling } from "../../../../../../../../libs/common/src/styling/index";
|
|
3
4
|
export class HelperTab {
|
|
4
5
|
constructor() {
|
|
5
|
-
this.setClientStyling = () => {
|
|
6
|
-
let sheet = document.createElement('style');
|
|
7
|
-
sheet.innerHTML = this.clientStyling;
|
|
8
|
-
this.stylingContainer.prepend(sheet);
|
|
9
|
-
};
|
|
10
|
-
this.setClientStylingURL = () => {
|
|
11
|
-
let cssFile = document.createElement('style');
|
|
12
|
-
setTimeout(() => {
|
|
13
|
-
cssFile.innerHTML = this.clientStylingUrlContent;
|
|
14
|
-
this.stylingContainer.prepend(cssFile);
|
|
15
|
-
}, 1);
|
|
16
|
-
};
|
|
17
6
|
this.selectedIndex = 0;
|
|
18
7
|
this.cmsEndpoint = undefined;
|
|
8
|
+
this.mbSource = undefined;
|
|
19
9
|
this.clientStyling = '';
|
|
20
|
-
this.
|
|
10
|
+
this.clientStylingUrl = '';
|
|
21
11
|
this.lowNumber = undefined;
|
|
22
12
|
this.highNumber = undefined;
|
|
23
13
|
this.minimumAllowed = undefined;
|
|
@@ -25,24 +15,39 @@ export class HelperTab {
|
|
|
25
15
|
this.language = 'en';
|
|
26
16
|
this.translationUrl = undefined;
|
|
27
17
|
this.tabContent = '';
|
|
28
|
-
|
|
18
|
+
}
|
|
19
|
+
handleClientStylingChange(newValue, oldValue) {
|
|
20
|
+
if (newValue != oldValue) {
|
|
21
|
+
setClientStyling(this.stylingContainer, this.clientStyling);
|
|
22
|
+
}
|
|
23
|
+
}
|
|
24
|
+
handleClientStylingChangeURL(newValue, oldValue) {
|
|
25
|
+
if (newValue != oldValue) {
|
|
26
|
+
if (this.clientStylingUrl)
|
|
27
|
+
setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
|
|
28
|
+
}
|
|
29
|
+
}
|
|
30
|
+
componentDidLoad() {
|
|
31
|
+
if (this.stylingContainer) {
|
|
32
|
+
if (window.emMessageBus != undefined) {
|
|
33
|
+
setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`, this.stylingSubscription);
|
|
34
|
+
}
|
|
35
|
+
else {
|
|
36
|
+
if (this.clientStyling)
|
|
37
|
+
setClientStyling(this.stylingContainer, this.clientStyling);
|
|
38
|
+
if (this.clientStylingUrl)
|
|
39
|
+
setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
|
|
40
|
+
}
|
|
41
|
+
}
|
|
42
|
+
}
|
|
43
|
+
disconnectedCallback() {
|
|
44
|
+
this.stylingSubscription && this.stylingSubscription.unsubscribe();
|
|
29
45
|
}
|
|
30
46
|
componentWillLoad() {
|
|
31
47
|
if (this.translationUrl) {
|
|
32
48
|
getTranslations(JSON.parse(this.translationUrl));
|
|
33
49
|
}
|
|
34
50
|
}
|
|
35
|
-
componentDidRender() {
|
|
36
|
-
// start custom styling area
|
|
37
|
-
if (!this.limitStylingAppends && this.stylingContainer) {
|
|
38
|
-
if (this.clientStyling)
|
|
39
|
-
this.setClientStyling();
|
|
40
|
-
if (this.clientStylingUrlContent)
|
|
41
|
-
this.setClientStylingURL();
|
|
42
|
-
this.limitStylingAppends = true;
|
|
43
|
-
}
|
|
44
|
-
// end custom styling area
|
|
45
|
-
}
|
|
46
51
|
getHowToPlay() {
|
|
47
52
|
if (this.lowNumber && this.highNumber && this.maxinumAllowed && this.minimumAllowed) {
|
|
48
53
|
return translateWithParams('howToPlay', {
|
|
@@ -56,12 +61,12 @@ export class HelperTab {
|
|
|
56
61
|
return '';
|
|
57
62
|
}
|
|
58
63
|
render() {
|
|
59
|
-
this.tabContent = h("div", { key: '
|
|
64
|
+
this.tabContent = h("div", { key: '92877a17361066f68fce6299cb8f65901f6abc60', class: "TabContent", ref: el => this.stylingContainer = el }, this.getHowToPlay());
|
|
60
65
|
if (this.selectedIndex + 1 == 2) {
|
|
61
|
-
this.tabContent = h("div", { key: '
|
|
66
|
+
this.tabContent = h("div", { key: '9876b9250371034ef40dab0f5fc3fe1a5631a370', class: "TabContent", ref: el => this.stylingContainer = el }, h("ol", { key: 'ef2097eb54aeb640f06871277d8cafd2f4455109' }, h("li", { key: 'e9a0237e1fdead445abcd9240174276ffef81a67' }, translate('register', this.language)), h("li", { key: '2bdfaffdc9f1a7ae021913cb0ba346132140dcfd' }, translate('butTickets', this.language)), h("li", { key: 'bff38eaeabeaece83dc8ed1697e5b052802753f6' }, translate('reviewPurchase', this.language))));
|
|
62
67
|
}
|
|
63
68
|
else if (this.selectedIndex + 1 == 3) {
|
|
64
|
-
this.tabContent = h("div", { key: '
|
|
69
|
+
this.tabContent = h("div", { key: '49a7fb3435fb50b54572ec38d1e632e2eacf56fb', class: "TabContent", ref: el => this.stylingContainer = el }, h("ul", { key: '7f642625f35a1ed1eae7655144c0b8b1bfe25f55' }, h("li", { key: '037a5913be57dd1e2dcde5a061e9c64e70365e8d' }, translate('odds', this.language)), h("li", { key: '8775a1b2e8eda285e2c248b8d7235f06ac593fc6' }, translate('winGame', this.language)), h("li", { key: '5297fc5e757c29a1349049f1fe294e926255d518' }, translate('claimPrize', this.language))));
|
|
65
70
|
}
|
|
66
71
|
return (this.tabContent);
|
|
67
72
|
}
|
|
@@ -114,6 +119,23 @@ export class HelperTab {
|
|
|
114
119
|
"attribute": "cms-endpoint",
|
|
115
120
|
"reflect": true
|
|
116
121
|
},
|
|
122
|
+
"mbSource": {
|
|
123
|
+
"type": "string",
|
|
124
|
+
"mutable": false,
|
|
125
|
+
"complexType": {
|
|
126
|
+
"original": "string",
|
|
127
|
+
"resolved": "string",
|
|
128
|
+
"references": {}
|
|
129
|
+
},
|
|
130
|
+
"required": false,
|
|
131
|
+
"optional": false,
|
|
132
|
+
"docs": {
|
|
133
|
+
"tags": [],
|
|
134
|
+
"text": "Client custom styling via streamStyling"
|
|
135
|
+
},
|
|
136
|
+
"attribute": "mb-source",
|
|
137
|
+
"reflect": false
|
|
138
|
+
},
|
|
117
139
|
"clientStyling": {
|
|
118
140
|
"type": "string",
|
|
119
141
|
"mutable": false,
|
|
@@ -132,7 +154,7 @@ export class HelperTab {
|
|
|
132
154
|
"reflect": true,
|
|
133
155
|
"defaultValue": "''"
|
|
134
156
|
},
|
|
135
|
-
"
|
|
157
|
+
"clientStylingUrl": {
|
|
136
158
|
"type": "string",
|
|
137
159
|
"mutable": false,
|
|
138
160
|
"complexType": {
|
|
@@ -146,7 +168,7 @@ export class HelperTab {
|
|
|
146
168
|
"tags": [],
|
|
147
169
|
"text": "Client custom styling via url content"
|
|
148
170
|
},
|
|
149
|
-
"attribute": "client-styling-url
|
|
171
|
+
"attribute": "client-styling-url",
|
|
150
172
|
"reflect": true,
|
|
151
173
|
"defaultValue": "''"
|
|
152
174
|
},
|
|
@@ -257,8 +279,16 @@ export class HelperTab {
|
|
|
257
279
|
}
|
|
258
280
|
static get states() {
|
|
259
281
|
return {
|
|
260
|
-
"tabContent": {}
|
|
261
|
-
"limitStylingAppends": {}
|
|
282
|
+
"tabContent": {}
|
|
262
283
|
};
|
|
263
284
|
}
|
|
285
|
+
static get watchers() {
|
|
286
|
+
return [{
|
|
287
|
+
"propName": "clientStyling",
|
|
288
|
+
"methodName": "handleClientStylingChange"
|
|
289
|
+
}, {
|
|
290
|
+
"propName": "clientStylingUrl",
|
|
291
|
+
"methodName": "handleClientStylingChangeURL"
|
|
292
|
+
}];
|
|
293
|
+
}
|
|
264
294
|
}
|
|
@@ -1,18 +1,7 @@
|
|
|
1
1
|
import { h } from "@stencil/core";
|
|
2
|
+
import { setClientStyling, setClientStylingURL, setStreamStyling } from "../../../../../../../../libs/common/src/styling/index";
|
|
2
3
|
export class HelperTabs {
|
|
3
4
|
constructor() {
|
|
4
|
-
this.setClientStyling = () => {
|
|
5
|
-
let sheet = document.createElement('style');
|
|
6
|
-
sheet.innerHTML = this.clientStyling;
|
|
7
|
-
this.stylingContainer.prepend(sheet);
|
|
8
|
-
};
|
|
9
|
-
this.setClientStylingURL = () => {
|
|
10
|
-
let cssFile = document.createElement('style');
|
|
11
|
-
setTimeout(() => {
|
|
12
|
-
cssFile.innerHTML = this.clientStylingUrlContent;
|
|
13
|
-
this.stylingContainer.prepend(cssFile);
|
|
14
|
-
}, 1);
|
|
15
|
-
};
|
|
16
5
|
this.disabled = false;
|
|
17
6
|
this.label = undefined;
|
|
18
7
|
this.selected = false;
|
|
@@ -20,34 +9,50 @@ export class HelperTabs {
|
|
|
20
9
|
this.selectedIndex = 0;
|
|
21
10
|
this.tabs = [{ label: 'How to Play' }, { label: 'About' }, { label: 'FAQs' }];
|
|
22
11
|
this.clientStyling = '';
|
|
12
|
+
this.mbSource = undefined;
|
|
23
13
|
this.clientStylingurl = '';
|
|
24
|
-
this.
|
|
14
|
+
this.clientStylingUrl = '';
|
|
25
15
|
this.lowNumber = undefined;
|
|
26
16
|
this.highNumber = undefined;
|
|
27
17
|
this.minimumAllowed = undefined;
|
|
28
18
|
this.maxinumAllowed = undefined;
|
|
29
19
|
this.language = 'en';
|
|
30
20
|
this.translationUrl = undefined;
|
|
31
|
-
this.limitStylingAppends = false;
|
|
32
21
|
}
|
|
33
22
|
connectedCallback() {
|
|
34
23
|
if (this.tabs.length == 0) {
|
|
35
24
|
// fetch CMS data
|
|
36
25
|
}
|
|
37
26
|
}
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
27
|
+
handleClientStylingChange(newValue, oldValue) {
|
|
28
|
+
if (newValue != oldValue) {
|
|
29
|
+
setClientStyling(this.stylingContainer, this.clientStyling);
|
|
30
|
+
}
|
|
31
|
+
}
|
|
32
|
+
handleClientStylingChangeURL(newValue, oldValue) {
|
|
33
|
+
if (newValue != oldValue) {
|
|
34
|
+
if (this.clientStylingUrl)
|
|
35
|
+
setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
|
|
36
|
+
}
|
|
37
|
+
}
|
|
38
|
+
componentDidLoad() {
|
|
39
|
+
if (this.stylingContainer) {
|
|
40
|
+
if (window.emMessageBus != undefined) {
|
|
41
|
+
setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`, this.stylingSubscription);
|
|
42
|
+
}
|
|
43
|
+
else {
|
|
44
|
+
if (this.clientStyling)
|
|
45
|
+
setClientStyling(this.stylingContainer, this.clientStyling);
|
|
46
|
+
if (this.clientStylingUrl)
|
|
47
|
+
setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
|
|
44
48
|
}
|
|
45
|
-
this.limitStylingAppends = true;
|
|
46
49
|
}
|
|
47
|
-
|
|
50
|
+
}
|
|
51
|
+
disconnectedCallback() {
|
|
52
|
+
this.stylingSubscription && this.stylingSubscription.unsubscribe();
|
|
48
53
|
}
|
|
49
54
|
render() {
|
|
50
|
-
return (h("div", { key: '
|
|
55
|
+
return (h("div", { key: '173c4774748482dc56fcffb4bac4e1666fa9170f', ref: el => this.stylingContainer = el }, h("div", { key: '680b65218e4b00f134b354f593c0c20fb5882dca', class: "Tabs" }, this.tabs.map((tab, index) => h("button", { class: 'TabButton' + (this.selectedIndex == index ? ' Active' : ''), onClick: () => this.selectedIndex = index }, tab.label))), h("div", { key: '67aa26c92fb416c5d0934988fb071481f805685b' }, h("helper-tab", { key: '63c8dfc253d4fc12b0310a2585a44b90807e1a9f', "low-number": this.lowNumber, "high-number": this.highNumber, "minimum-allowed": this.minimumAllowed, "maxinum-allowed": this.maxinumAllowed, selectedIndex: this.selectedIndex, "client-styling": this.clientStyling, language: this.language, "translation-url": this.translationUrl, "client-stylingurl": this.clientStylingurl, "client-styling-url-content": this.clientStylingUrl, "mb-source": this.mbSource }))));
|
|
51
56
|
}
|
|
52
57
|
static get is() { return "helper-tabs"; }
|
|
53
58
|
static get encapsulation() { return "shadow"; }
|
|
@@ -194,6 +199,23 @@ export class HelperTabs {
|
|
|
194
199
|
"reflect": true,
|
|
195
200
|
"defaultValue": "''"
|
|
196
201
|
},
|
|
202
|
+
"mbSource": {
|
|
203
|
+
"type": "string",
|
|
204
|
+
"mutable": false,
|
|
205
|
+
"complexType": {
|
|
206
|
+
"original": "string",
|
|
207
|
+
"resolved": "string",
|
|
208
|
+
"references": {}
|
|
209
|
+
},
|
|
210
|
+
"required": false,
|
|
211
|
+
"optional": false,
|
|
212
|
+
"docs": {
|
|
213
|
+
"tags": [],
|
|
214
|
+
"text": "Client custom styling via streamStyling"
|
|
215
|
+
},
|
|
216
|
+
"attribute": "mb-source",
|
|
217
|
+
"reflect": false
|
|
218
|
+
},
|
|
197
219
|
"clientStylingurl": {
|
|
198
220
|
"type": "string",
|
|
199
221
|
"mutable": false,
|
|
@@ -212,7 +234,7 @@ export class HelperTabs {
|
|
|
212
234
|
"reflect": true,
|
|
213
235
|
"defaultValue": "''"
|
|
214
236
|
},
|
|
215
|
-
"
|
|
237
|
+
"clientStylingUrl": {
|
|
216
238
|
"type": "string",
|
|
217
239
|
"mutable": false,
|
|
218
240
|
"complexType": {
|
|
@@ -226,7 +248,7 @@ export class HelperTabs {
|
|
|
226
248
|
"tags": [],
|
|
227
249
|
"text": "Client custom styling via url content"
|
|
228
250
|
},
|
|
229
|
-
"attribute": "client-styling-url
|
|
251
|
+
"attribute": "client-styling-url",
|
|
230
252
|
"reflect": true,
|
|
231
253
|
"defaultValue": "''"
|
|
232
254
|
},
|
|
@@ -335,10 +357,14 @@ export class HelperTabs {
|
|
|
335
357
|
}
|
|
336
358
|
};
|
|
337
359
|
}
|
|
338
|
-
static get states() {
|
|
339
|
-
return {
|
|
340
|
-
"limitStylingAppends": {}
|
|
341
|
-
};
|
|
342
|
-
}
|
|
343
360
|
static get elementRef() { return "host"; }
|
|
361
|
+
static get watchers() {
|
|
362
|
+
return [{
|
|
363
|
+
"propName": "clientStyling",
|
|
364
|
+
"methodName": "handleClientStylingChange"
|
|
365
|
+
}, {
|
|
366
|
+
"propName": "clientStylingUrl",
|
|
367
|
+
"methodName": "handleClientStylingChangeURL"
|
|
368
|
+
}];
|
|
369
|
+
}
|
|
344
370
|
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { r as registerInstance, h, g as getElement } from './index-
|
|
1
|
+
import { r as registerInstance, h, g as getElement } from './index-3174302b.js';
|
|
2
2
|
|
|
3
3
|
const DEFAULT_LANGUAGE = 'en';
|
|
4
4
|
const SUPPORTED_LANGUAGES = ['en'];
|
|
@@ -72,28 +72,74 @@ const getTranslations = (data) => {
|
|
|
72
72
|
});
|
|
73
73
|
};
|
|
74
74
|
|
|
75
|
+
/**
|
|
76
|
+
* @name setClientStyling
|
|
77
|
+
* @description Method used to create and append to the passed element of the widget a style element with the content received
|
|
78
|
+
* @param {HTMLElement} stylingContainer The reference element of the widget
|
|
79
|
+
* @param {string} clientStyling The style content
|
|
80
|
+
*/
|
|
81
|
+
function setClientStyling(stylingContainer, clientStyling) {
|
|
82
|
+
if (stylingContainer) {
|
|
83
|
+
const sheet = document.createElement('style');
|
|
84
|
+
sheet.innerHTML = clientStyling;
|
|
85
|
+
stylingContainer.appendChild(sheet);
|
|
86
|
+
}
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
/**
|
|
90
|
+
* @name setClientStylingURL
|
|
91
|
+
* @description Method used to create and append to the passed element of the widget a style element with the content fetched from a given URL
|
|
92
|
+
* @param {HTMLElement} stylingContainer The reference element of the widget
|
|
93
|
+
* @param {string} clientStylingUrl The URL of the style content
|
|
94
|
+
*/
|
|
95
|
+
function setClientStylingURL(stylingContainer, clientStylingUrl) {
|
|
96
|
+
const url = new URL(clientStylingUrl);
|
|
97
|
+
|
|
98
|
+
fetch(url.href)
|
|
99
|
+
.then((res) => res.text())
|
|
100
|
+
.then((data) => {
|
|
101
|
+
const cssFile = document.createElement('style');
|
|
102
|
+
cssFile.innerHTML = data;
|
|
103
|
+
if (stylingContainer) {
|
|
104
|
+
stylingContainer.appendChild(cssFile);
|
|
105
|
+
}
|
|
106
|
+
})
|
|
107
|
+
.catch((err) => {
|
|
108
|
+
console.error('There was an error while trying to load client styling from URL', err);
|
|
109
|
+
});
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
/**
|
|
113
|
+
* @name setStreamLibrary
|
|
114
|
+
* @description Method used to create and append to the passed element of the widget a style element with content fetched from the MessageBus
|
|
115
|
+
* @param {HTMLElement} stylingContainer The highest element of the widget
|
|
116
|
+
* @param {string} domain The domain from where the content should be fetched (e.g. 'Casino.Style', 'App.Style', 'casino-footer.style', etc.)
|
|
117
|
+
* @param {ref} subscription A reference to a variable where the subscription should be saved for unsubscribing when no longer needed
|
|
118
|
+
*/
|
|
119
|
+
function setStreamStyling(stylingContainer, domain, subscription) {
|
|
120
|
+
if (window.emMessageBus) {
|
|
121
|
+
const sheet = document.createElement('style');
|
|
122
|
+
|
|
123
|
+
window.emMessageBus.subscribe(domain, (data) => {
|
|
124
|
+
sheet.innerHTML = data;
|
|
125
|
+
if (stylingContainer) {
|
|
126
|
+
stylingContainer.appendChild(sheet);
|
|
127
|
+
}
|
|
128
|
+
});
|
|
129
|
+
}
|
|
130
|
+
}
|
|
131
|
+
|
|
75
132
|
const helperTabCss = ":host{display:block}.TabContent{font-size:14px;color:var(--emw--button-text-color, #000);font-weight:normal}";
|
|
76
133
|
const HelperTabStyle0 = helperTabCss;
|
|
77
134
|
|
|
78
135
|
const HelperTab = class {
|
|
79
136
|
constructor(hostRef) {
|
|
80
137
|
registerInstance(this, hostRef);
|
|
81
|
-
this.setClientStyling = () => {
|
|
82
|
-
let sheet = document.createElement('style');
|
|
83
|
-
sheet.innerHTML = this.clientStyling;
|
|
84
|
-
this.stylingContainer.prepend(sheet);
|
|
85
|
-
};
|
|
86
|
-
this.setClientStylingURL = () => {
|
|
87
|
-
let cssFile = document.createElement('style');
|
|
88
|
-
setTimeout(() => {
|
|
89
|
-
cssFile.innerHTML = this.clientStylingUrlContent;
|
|
90
|
-
this.stylingContainer.prepend(cssFile);
|
|
91
|
-
}, 1);
|
|
92
|
-
};
|
|
93
138
|
this.selectedIndex = 0;
|
|
94
139
|
this.cmsEndpoint = undefined;
|
|
140
|
+
this.mbSource = undefined;
|
|
95
141
|
this.clientStyling = '';
|
|
96
|
-
this.
|
|
142
|
+
this.clientStylingUrl = '';
|
|
97
143
|
this.lowNumber = undefined;
|
|
98
144
|
this.highNumber = undefined;
|
|
99
145
|
this.minimumAllowed = undefined;
|
|
@@ -101,24 +147,39 @@ const HelperTab = class {
|
|
|
101
147
|
this.language = 'en';
|
|
102
148
|
this.translationUrl = undefined;
|
|
103
149
|
this.tabContent = '';
|
|
104
|
-
|
|
150
|
+
}
|
|
151
|
+
handleClientStylingChange(newValue, oldValue) {
|
|
152
|
+
if (newValue != oldValue) {
|
|
153
|
+
setClientStyling(this.stylingContainer, this.clientStyling);
|
|
154
|
+
}
|
|
155
|
+
}
|
|
156
|
+
handleClientStylingChangeURL(newValue, oldValue) {
|
|
157
|
+
if (newValue != oldValue) {
|
|
158
|
+
if (this.clientStylingUrl)
|
|
159
|
+
setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
|
|
160
|
+
}
|
|
161
|
+
}
|
|
162
|
+
componentDidLoad() {
|
|
163
|
+
if (this.stylingContainer) {
|
|
164
|
+
if (window.emMessageBus != undefined) {
|
|
165
|
+
setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`);
|
|
166
|
+
}
|
|
167
|
+
else {
|
|
168
|
+
if (this.clientStyling)
|
|
169
|
+
setClientStyling(this.stylingContainer, this.clientStyling);
|
|
170
|
+
if (this.clientStylingUrl)
|
|
171
|
+
setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
|
|
172
|
+
}
|
|
173
|
+
}
|
|
174
|
+
}
|
|
175
|
+
disconnectedCallback() {
|
|
176
|
+
this.stylingSubscription && this.stylingSubscription.unsubscribe();
|
|
105
177
|
}
|
|
106
178
|
componentWillLoad() {
|
|
107
179
|
if (this.translationUrl) {
|
|
108
180
|
getTranslations(JSON.parse(this.translationUrl));
|
|
109
181
|
}
|
|
110
182
|
}
|
|
111
|
-
componentDidRender() {
|
|
112
|
-
// start custom styling area
|
|
113
|
-
if (!this.limitStylingAppends && this.stylingContainer) {
|
|
114
|
-
if (this.clientStyling)
|
|
115
|
-
this.setClientStyling();
|
|
116
|
-
if (this.clientStylingUrlContent)
|
|
117
|
-
this.setClientStylingURL();
|
|
118
|
-
this.limitStylingAppends = true;
|
|
119
|
-
}
|
|
120
|
-
// end custom styling area
|
|
121
|
-
}
|
|
122
183
|
getHowToPlay() {
|
|
123
184
|
if (this.lowNumber && this.highNumber && this.maxinumAllowed && this.minimumAllowed) {
|
|
124
185
|
return translateWithParams('howToPlay', {
|
|
@@ -132,15 +193,19 @@ const HelperTab = class {
|
|
|
132
193
|
return '';
|
|
133
194
|
}
|
|
134
195
|
render() {
|
|
135
|
-
this.tabContent = h("div", { key: '
|
|
196
|
+
this.tabContent = h("div", { key: '92877a17361066f68fce6299cb8f65901f6abc60', class: "TabContent", ref: el => this.stylingContainer = el }, this.getHowToPlay());
|
|
136
197
|
if (this.selectedIndex + 1 == 2) {
|
|
137
|
-
this.tabContent = h("div", { key: '
|
|
198
|
+
this.tabContent = h("div", { key: '9876b9250371034ef40dab0f5fc3fe1a5631a370', class: "TabContent", ref: el => this.stylingContainer = el }, h("ol", { key: 'ef2097eb54aeb640f06871277d8cafd2f4455109' }, h("li", { key: 'e9a0237e1fdead445abcd9240174276ffef81a67' }, translate('register', this.language)), h("li", { key: '2bdfaffdc9f1a7ae021913cb0ba346132140dcfd' }, translate('butTickets', this.language)), h("li", { key: 'bff38eaeabeaece83dc8ed1697e5b052802753f6' }, translate('reviewPurchase', this.language))));
|
|
138
199
|
}
|
|
139
200
|
else if (this.selectedIndex + 1 == 3) {
|
|
140
|
-
this.tabContent = h("div", { key: '
|
|
201
|
+
this.tabContent = h("div", { key: '49a7fb3435fb50b54572ec38d1e632e2eacf56fb', class: "TabContent", ref: el => this.stylingContainer = el }, h("ul", { key: '7f642625f35a1ed1eae7655144c0b8b1bfe25f55' }, h("li", { key: '037a5913be57dd1e2dcde5a061e9c64e70365e8d' }, translate('odds', this.language)), h("li", { key: '8775a1b2e8eda285e2c248b8d7235f06ac593fc6' }, translate('winGame', this.language)), h("li", { key: '5297fc5e757c29a1349049f1fe294e926255d518' }, translate('claimPrize', this.language))));
|
|
141
202
|
}
|
|
142
203
|
return (this.tabContent);
|
|
143
204
|
}
|
|
205
|
+
static get watchers() { return {
|
|
206
|
+
"clientStyling": ["handleClientStylingChange"],
|
|
207
|
+
"clientStylingUrl": ["handleClientStylingChangeURL"]
|
|
208
|
+
}; }
|
|
144
209
|
};
|
|
145
210
|
HelperTab.style = HelperTabStyle0;
|
|
146
211
|
|
|
@@ -150,18 +215,6 @@ const HelperTabsStyle0 = helperTabsCss;
|
|
|
150
215
|
const HelperTabs = class {
|
|
151
216
|
constructor(hostRef) {
|
|
152
217
|
registerInstance(this, hostRef);
|
|
153
|
-
this.setClientStyling = () => {
|
|
154
|
-
let sheet = document.createElement('style');
|
|
155
|
-
sheet.innerHTML = this.clientStyling;
|
|
156
|
-
this.stylingContainer.prepend(sheet);
|
|
157
|
-
};
|
|
158
|
-
this.setClientStylingURL = () => {
|
|
159
|
-
let cssFile = document.createElement('style');
|
|
160
|
-
setTimeout(() => {
|
|
161
|
-
cssFile.innerHTML = this.clientStylingUrlContent;
|
|
162
|
-
this.stylingContainer.prepend(cssFile);
|
|
163
|
-
}, 1);
|
|
164
|
-
};
|
|
165
218
|
this.disabled = false;
|
|
166
219
|
this.label = undefined;
|
|
167
220
|
this.selected = false;
|
|
@@ -169,33 +222,53 @@ const HelperTabs = class {
|
|
|
169
222
|
this.selectedIndex = 0;
|
|
170
223
|
this.tabs = [{ label: 'How to Play' }, { label: 'About' }, { label: 'FAQs' }];
|
|
171
224
|
this.clientStyling = '';
|
|
225
|
+
this.mbSource = undefined;
|
|
172
226
|
this.clientStylingurl = '';
|
|
173
|
-
this.
|
|
227
|
+
this.clientStylingUrl = '';
|
|
174
228
|
this.lowNumber = undefined;
|
|
175
229
|
this.highNumber = undefined;
|
|
176
230
|
this.minimumAllowed = undefined;
|
|
177
231
|
this.maxinumAllowed = undefined;
|
|
178
232
|
this.language = 'en';
|
|
179
233
|
this.translationUrl = undefined;
|
|
180
|
-
this.limitStylingAppends = false;
|
|
181
234
|
}
|
|
182
235
|
connectedCallback() {
|
|
183
236
|
}
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
237
|
+
handleClientStylingChange(newValue, oldValue) {
|
|
238
|
+
if (newValue != oldValue) {
|
|
239
|
+
setClientStyling(this.stylingContainer, this.clientStyling);
|
|
240
|
+
}
|
|
241
|
+
}
|
|
242
|
+
handleClientStylingChangeURL(newValue, oldValue) {
|
|
243
|
+
if (newValue != oldValue) {
|
|
244
|
+
if (this.clientStylingUrl)
|
|
245
|
+
setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
|
|
246
|
+
}
|
|
247
|
+
}
|
|
248
|
+
componentDidLoad() {
|
|
249
|
+
if (this.stylingContainer) {
|
|
250
|
+
if (window.emMessageBus != undefined) {
|
|
251
|
+
setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`);
|
|
252
|
+
}
|
|
253
|
+
else {
|
|
254
|
+
if (this.clientStyling)
|
|
255
|
+
setClientStyling(this.stylingContainer, this.clientStyling);
|
|
256
|
+
if (this.clientStylingUrl)
|
|
257
|
+
setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
|
|
190
258
|
}
|
|
191
|
-
this.limitStylingAppends = true;
|
|
192
259
|
}
|
|
193
|
-
|
|
260
|
+
}
|
|
261
|
+
disconnectedCallback() {
|
|
262
|
+
this.stylingSubscription && this.stylingSubscription.unsubscribe();
|
|
194
263
|
}
|
|
195
264
|
render() {
|
|
196
|
-
return (h("div", { key: '
|
|
265
|
+
return (h("div", { key: '173c4774748482dc56fcffb4bac4e1666fa9170f', ref: el => this.stylingContainer = el }, h("div", { key: '680b65218e4b00f134b354f593c0c20fb5882dca', class: "Tabs" }, this.tabs.map((tab, index) => h("button", { class: 'TabButton' + (this.selectedIndex == index ? ' Active' : ''), onClick: () => this.selectedIndex = index }, tab.label))), h("div", { key: '67aa26c92fb416c5d0934988fb071481f805685b' }, h("helper-tab", { key: '63c8dfc253d4fc12b0310a2585a44b90807e1a9f', "low-number": this.lowNumber, "high-number": this.highNumber, "minimum-allowed": this.minimumAllowed, "maxinum-allowed": this.maxinumAllowed, selectedIndex: this.selectedIndex, "client-styling": this.clientStyling, language: this.language, "translation-url": this.translationUrl, "client-stylingurl": this.clientStylingurl, "client-styling-url-content": this.clientStylingUrl, "mb-source": this.mbSource }))));
|
|
197
266
|
}
|
|
198
267
|
get host() { return getElement(this); }
|
|
268
|
+
static get watchers() { return {
|
|
269
|
+
"clientStyling": ["handleClientStylingChange"],
|
|
270
|
+
"clientStylingUrl": ["handleClientStylingChangeURL"]
|
|
271
|
+
}; }
|
|
199
272
|
};
|
|
200
273
|
HelperTabs.style = HelperTabsStyle0;
|
|
201
274
|
|
package/dist/esm/helper-tabs.js
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
import { p as promiseResolve, b as bootstrapLazy } from './index-
|
|
2
|
-
export { s as setNonce } from './index-
|
|
1
|
+
import { p as promiseResolve, b as bootstrapLazy } from './index-3174302b.js';
|
|
2
|
+
export { s as setNonce } from './index-3174302b.js';
|
|
3
3
|
import { g as globalScripts } from './app-globals-0f993ce5.js';
|
|
4
4
|
|
|
5
5
|
/*
|
|
6
|
-
Stencil Client Patch Browser v4.
|
|
6
|
+
Stencil Client Patch Browser v4.19.2 | MIT Licensed | https://stenciljs.com
|
|
7
7
|
*/
|
|
8
8
|
var patchBrowser = () => {
|
|
9
9
|
const importMeta = import.meta.url;
|
|
@@ -16,5 +16,5 @@ var patchBrowser = () => {
|
|
|
16
16
|
|
|
17
17
|
patchBrowser().then(async (options) => {
|
|
18
18
|
await globalScripts();
|
|
19
|
-
return bootstrapLazy([["helper-tab_2",[[1,"helper-tabs",{"disabled":[516],"label":[513],"selected":[516],"cmsEndpoint":[513,"cms-endpoint"],"selectedIndex":[1538,"selected-index"],"tabs":[16],"clientStyling":[513,"client-styling"],"clientStylingurl":[513,"client-stylingurl"],"
|
|
19
|
+
return bootstrapLazy([["helper-tab_2",[[1,"helper-tabs",{"disabled":[516],"label":[513],"selected":[516],"cmsEndpoint":[513,"cms-endpoint"],"selectedIndex":[1538,"selected-index"],"tabs":[16],"clientStyling":[513,"client-styling"],"mbSource":[1,"mb-source"],"clientStylingurl":[513,"client-stylingurl"],"clientStylingUrl":[513,"client-styling-url"],"lowNumber":[514,"low-number"],"highNumber":[514,"high-number"],"minimumAllowed":[514,"minimum-allowed"],"maxinumAllowed":[514,"maxinum-allowed"],"language":[513],"translationUrl":[520,"translation-url"]},null,{"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingChangeURL"]}],[1,"helper-tab",{"selectedIndex":[514,"selected-index"],"cmsEndpoint":[513,"cms-endpoint"],"mbSource":[1,"mb-source"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"lowNumber":[514,"low-number"],"highNumber":[514,"high-number"],"minimumAllowed":[514,"minimum-allowed"],"maxinumAllowed":[514,"maxinum-allowed"],"language":[513],"translationUrl":[520,"translation-url"],"tabContent":[32]},null,{"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingChangeURL"]}]]]], options);
|
|
20
20
|
});
|