@everymatrix/casino-challenges-container 0.0.14 → 0.0.16
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/casino-challenges-container/casino-challenge-card_5.entry.js +1 -0
- package/dist/casino-challenges-container/casino-challenges-container-677ffb33.js +1 -0
- package/dist/casino-challenges-container/casino-challenges-container.esm.js +1 -1
- package/dist/casino-challenges-container/index-7720ad93.js +2 -0
- package/dist/casino-challenges-container/index.esm.js +1 -1
- package/dist/cjs/casino-challenge-card_5.cjs.entry.js +3108 -0
- package/dist/cjs/{casino-challenges-container-13757ed0.js → casino-challenges-container-50aca824.js} +32 -8
- package/dist/cjs/casino-challenges-container.cjs.js +2 -2
- package/dist/cjs/{index-2d1d2666.js → index-d5f8d1ee.js} +32 -5
- package/dist/cjs/index.cjs.js +2 -2
- package/dist/cjs/loader.cjs.js +2 -2
- package/dist/collection/collection-manifest.json +12 -0
- package/dist/collection/components/casino-challenges-container/casino-challenges-container.js +17 -3
- package/dist/collection/utils/locale.utils.js +16 -4
- package/dist/collection/utils/types.js +7 -0
- package/dist/esm/casino-challenge-card_5.entry.js +3101 -0
- package/dist/esm/{casino-challenges-container-e2d42fb0.js → casino-challenges-container-677ffb33.js} +32 -8
- package/dist/esm/casino-challenges-container.js +3 -3
- package/dist/esm/{index-7cb21c9d.js → index-7720ad93.js} +32 -5
- package/dist/esm/index.js +2 -2
- package/dist/esm/loader.js +3 -3
- package/dist/types/components/casino-challenges-container/casino-challenges-container.d.ts +3 -1
- package/dist/types/utils/types.d.ts +28 -1
- package/package.json +1 -1
- package/dist/casino-challenges-container/casino-challenges-container-e2d42fb0.js +0 -1
- package/dist/casino-challenges-container/casino-challenges-container_3.entry.js +0 -1
- package/dist/casino-challenges-container/index-7cb21c9d.js +0 -2
- package/dist/cjs/casino-challenges-container_3.cjs.entry.js +0 -283
- package/dist/esm/casino-challenges-container_3.entry.js +0 -278
|
@@ -1,283 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
-
|
|
5
|
-
const casinoChallengesContainer = require('./casino-challenges-container-13757ed0.js');
|
|
6
|
-
const index = require('./index-2d1d2666.js');
|
|
7
|
-
require('@everymatrix/casino-challenge-card');
|
|
8
|
-
|
|
9
|
-
const casinoChallengesListCss = ".challenges-list {\n display: flex;\n flex-wrap: wrap;\n gap: 30px;\n width: 100%;\n}\n\n.loader {\n width: 308px;\n border-radius: 16px;\n border: 2px solid var(--emw--button-border-color, rgba(221, 255, 207, 0.1019607843));\n background-color: var(--emw--color-background, #141515);\n box-sizing: border-box;\n position: relative;\n}\n@container challenge-list (max-width: 576px) {\n .loader {\n width: 100%;\n }\n}\n.loader:hover {\n background: linear-gradient(90deg, rgb(0, 62, 92) 0%, rgb(17, 59, 33) 100%);\n cursor: pointer;\n}\n.loader .SkeletonRows .SkeletonContainer {\n padding: 0 20px 0 20px;\n}\n.loader .SkeletonButton .Skeleton.Text {\n margin: 0;\n height: 28px;\n margin: 0 20px 20px 20px;\n border-radius: var(--emw--button-border-radius, 99px);\n width: auto;\n}\n.loader .Skeleton.Image {\n border-radius: 16px 16px 0 0;\n}\n.loader .Skeleton.Text {\n margin: 20px 0;\n}";
|
|
10
|
-
const CasinoChallengesListStyle0 = casinoChallengesListCss;
|
|
11
|
-
|
|
12
|
-
const skeletons = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
|
|
13
|
-
const CasinoChallengeList = class {
|
|
14
|
-
constructor(hostRef) {
|
|
15
|
-
index.registerInstance(this, hostRef);
|
|
16
|
-
this.loadMore = index.createEvent(this, "loadMore", 7);
|
|
17
|
-
this.timerExpired = index.createEvent(this, "timerExpired", 7);
|
|
18
|
-
this.setLastItemRef = (el) => {
|
|
19
|
-
if (this.lastItemRef && this.observer) {
|
|
20
|
-
this.observer.unobserve(this.lastItemRef);
|
|
21
|
-
}
|
|
22
|
-
this.lastItemRef = el;
|
|
23
|
-
if (el && this.observer && !this.loading) {
|
|
24
|
-
this.observer.observe(el);
|
|
25
|
-
}
|
|
26
|
-
};
|
|
27
|
-
this.mbSource = undefined;
|
|
28
|
-
this.clientStyling = undefined;
|
|
29
|
-
this.clientStylingUrl = undefined;
|
|
30
|
-
this.language = 'en';
|
|
31
|
-
this.translationUrl = undefined;
|
|
32
|
-
this.challenges = [];
|
|
33
|
-
this.loading = false;
|
|
34
|
-
this.hasMore = false;
|
|
35
|
-
}
|
|
36
|
-
handleClientStylingChange(newValue, oldValue) {
|
|
37
|
-
if (newValue != oldValue) {
|
|
38
|
-
casinoChallengesContainer.setClientStyling(this.stylingContainer, this.clientStyling);
|
|
39
|
-
}
|
|
40
|
-
}
|
|
41
|
-
handleClientStylingUrlChange(newValue, oldValue) {
|
|
42
|
-
if (newValue != oldValue) {
|
|
43
|
-
casinoChallengesContainer.setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
|
|
44
|
-
}
|
|
45
|
-
}
|
|
46
|
-
handleMbSourceChange(newValue, oldValue) {
|
|
47
|
-
if (newValue != oldValue) {
|
|
48
|
-
casinoChallengesContainer.setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`);
|
|
49
|
-
}
|
|
50
|
-
}
|
|
51
|
-
setupObserver() {
|
|
52
|
-
if (!this.lastItemRef || this.loading || !this.hasMore)
|
|
53
|
-
return;
|
|
54
|
-
if (!this.observer) {
|
|
55
|
-
this.observer = new IntersectionObserver(([entry]) => {
|
|
56
|
-
if (entry.isIntersecting && !this.loading && this.hasMore) {
|
|
57
|
-
this.observer.unobserve(entry.target);
|
|
58
|
-
this.loadMore.emit();
|
|
59
|
-
}
|
|
60
|
-
}, {
|
|
61
|
-
root: null,
|
|
62
|
-
rootMargin: '0px',
|
|
63
|
-
threshold: 0.1
|
|
64
|
-
});
|
|
65
|
-
}
|
|
66
|
-
this.observer.disconnect();
|
|
67
|
-
this.observer.observe(this.lastItemRef);
|
|
68
|
-
}
|
|
69
|
-
componentDidRender() {
|
|
70
|
-
this.setupObserver();
|
|
71
|
-
}
|
|
72
|
-
disconnectedCallback() {
|
|
73
|
-
var _a;
|
|
74
|
-
(_a = this.observer) === null || _a === void 0 ? void 0 : _a.disconnect();
|
|
75
|
-
this.observer = undefined;
|
|
76
|
-
}
|
|
77
|
-
componentDidLoad() {
|
|
78
|
-
if (this.stylingContainer) {
|
|
79
|
-
if (this.mbSource)
|
|
80
|
-
casinoChallengesContainer.setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`);
|
|
81
|
-
if (this.clientStyling)
|
|
82
|
-
casinoChallengesContainer.setClientStyling(this.stylingContainer, this.clientStyling);
|
|
83
|
-
if (this.clientStylingUrl)
|
|
84
|
-
casinoChallengesContainer.setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
|
|
85
|
-
}
|
|
86
|
-
}
|
|
87
|
-
renderSkeletons() {
|
|
88
|
-
return skeletons.map((skeleton) => (index.h("div", { class: "loader", key: skeleton }, index.h("ui-skeleton", { structure: "image", height: "200px", "border-radius": "16px 16px 0 0" }), index.h("ui-skeleton", { class: "SkeletonRows", structure: "text", width: "220px", height: "16px", rows: "3" }), index.h("ui-skeleton", { class: "SkeletonButton", structure: "text", width: "100%" }))));
|
|
89
|
-
}
|
|
90
|
-
onTimerExpired(e) {
|
|
91
|
-
if (this.timerExpired) {
|
|
92
|
-
this.timerExpired.emit(e.detail);
|
|
93
|
-
}
|
|
94
|
-
}
|
|
95
|
-
render() {
|
|
96
|
-
return (index.h("div", { key: 'c2dc103d0aa9777b8b79bd8e787985a69f2e2457', ref: (el) => (this.stylingContainer = el), class: "challenges-list" }, this.challenges.map((challenge, index$1) => (index.h("div", { key: challenge.Id, ref: index$1 === this.challenges.length - 1 ? this.setLastItemRef : null }, index.h("casino-challenge-card", { challenge: challenge, language: this.language, mbSource: this.mbSource, clientStyling: this.clientStyling, clientStylingUrl: this.clientStylingUrl, translationUrl: this.translationUrl, onTimerExpired: this.onTimerExpired })))), this.loading && this.renderSkeletons()));
|
|
97
|
-
}
|
|
98
|
-
get el() { return index.getElement(this); }
|
|
99
|
-
static get watchers() { return {
|
|
100
|
-
"clientStyling": ["handleClientStylingChange"],
|
|
101
|
-
"clientStylingUrl": ["handleClientStylingUrlChange"],
|
|
102
|
-
"mbSource": ["handleMbSourceChange"]
|
|
103
|
-
}; }
|
|
104
|
-
};
|
|
105
|
-
CasinoChallengeList.style = CasinoChallengesListStyle0;
|
|
106
|
-
|
|
107
|
-
const uiSkeletonCss = ":host{display:block}.Skeleton{animation:skeleton-loading 1s linear infinite alternate}.Rectangle{background-color:var(--emw-skeleton-rectangle-background, #c2c2c2);width:var(--emw-skeleton-rectangle-width, 400px);height:var(--emw-skeleton-rectangle-height, 200px);border-radius:var(--emw-skeleton-rectangle-border-radius, 10px)}.Circle{background-color:var(--emw-skeleton-circle-background, #c2c2c2);width:var(--emw-skeleton-circle-size, 400px);height:var(--emw-skeleton-circle-size, 400px);border-radius:50%}.Text{background-color:var(--emw-skeleton-text-background, #c2c2c2);width:var(--emw-skeleton-text-width, 500px);height:var(--emw-skeleton-text-height, 20px);border-radius:var(--emw-skeleton-text-border-radius, 10px);margin-bottom:var(--emw-skeleton-text-margin-bottom, 5px)}.Text:last-child{width:calc(var(--emw-skeleton-text-width, 400px) - 100px)}.Title{background-color:var(--emw-skeleton-title-background, #c2c2c2);width:var(--emw-skeleton-title-width, 300px);height:var(--emw-skeleton-title-height, 30px);border-radius:var(--emw-skeleton-title-border-radius, 10px);margin-bottom:var(--emw-skeleton-title-margin-bottom, 5px)}.Image{background-color:var(--emw-skeleton-image-background, #c2c2c2);width:var(--emw-skeleton-image-width, 100%);height:var(--emw-skeleton-image-height, 100%);border-radius:var(--emw-skeleton-image-border-radius, unset)}.Logo{background-color:var(--emw-skeleton-logo-background, #c2c2c2);width:var(--emw-skeleton-logo-width, 120px);height:var(--emw-skeleton-logo-height, 75px);border-radius:var(--emw-skeleton-logo-border-radius, 10px)}@keyframes skeleton-loading{0%{background-color:var(--emw-skeleton-primary-color, #e0e0e0)}100%{background-color:var(--emw-skeleton-secondary-color, #f0f0f0)}}";
|
|
108
|
-
const UiSkeletonStyle0 = uiSkeletonCss;
|
|
109
|
-
|
|
110
|
-
const UiSkeleton = class {
|
|
111
|
-
constructor(hostRef) {
|
|
112
|
-
index.registerInstance(this, hostRef);
|
|
113
|
-
this.stylingValue = {
|
|
114
|
-
width: this.handleStylingProps(this.width),
|
|
115
|
-
height: this.handleStylingProps(this.height),
|
|
116
|
-
borderRadius: this.handleStylingProps(this.borderRadius),
|
|
117
|
-
marginBottom: this.handleStylingProps(this.marginBottom),
|
|
118
|
-
marginTop: this.handleStylingProps(this.marginTop),
|
|
119
|
-
marginLeft: this.handleStylingProps(this.marginLeft),
|
|
120
|
-
marginRight: this.handleStylingProps(this.marginRight),
|
|
121
|
-
size: this.handleStylingProps(this.size)
|
|
122
|
-
};
|
|
123
|
-
this.structure = undefined;
|
|
124
|
-
this.width = 'unset';
|
|
125
|
-
this.height = 'unset';
|
|
126
|
-
this.borderRadius = 'unset';
|
|
127
|
-
this.marginBottom = 'unset';
|
|
128
|
-
this.marginTop = 'unset';
|
|
129
|
-
this.marginLeft = 'unset';
|
|
130
|
-
this.marginRight = 'unset';
|
|
131
|
-
this.animation = true;
|
|
132
|
-
this.rows = 0;
|
|
133
|
-
this.size = '100%';
|
|
134
|
-
}
|
|
135
|
-
handleStructureChange(newValue, oldValue) {
|
|
136
|
-
if (oldValue !== newValue) {
|
|
137
|
-
this.handleStructure(newValue);
|
|
138
|
-
}
|
|
139
|
-
}
|
|
140
|
-
handleStylingProps(value) {
|
|
141
|
-
switch (typeof value) {
|
|
142
|
-
case 'number':
|
|
143
|
-
return value === 0 ? 0 : `${value}px`;
|
|
144
|
-
case 'undefined':
|
|
145
|
-
return 'unset';
|
|
146
|
-
case 'string':
|
|
147
|
-
if (['auto', 'unset', 'none', 'inherit', 'initial'].includes(value) ||
|
|
148
|
-
value.endsWith('px') ||
|
|
149
|
-
value.endsWith('%')) {
|
|
150
|
-
return value;
|
|
151
|
-
}
|
|
152
|
-
else {
|
|
153
|
-
return 'unset';
|
|
154
|
-
}
|
|
155
|
-
default:
|
|
156
|
-
return 'unset';
|
|
157
|
-
}
|
|
158
|
-
}
|
|
159
|
-
handleStructure(structure) {
|
|
160
|
-
switch (structure) {
|
|
161
|
-
case 'logo':
|
|
162
|
-
return this.renderLogo();
|
|
163
|
-
case 'image':
|
|
164
|
-
return this.renderImage();
|
|
165
|
-
case 'title':
|
|
166
|
-
return this.renderTitle();
|
|
167
|
-
case 'text':
|
|
168
|
-
return this.renderText();
|
|
169
|
-
case 'rectangle':
|
|
170
|
-
return this.renderRectangle();
|
|
171
|
-
case 'circle':
|
|
172
|
-
return this.renderCircle();
|
|
173
|
-
default:
|
|
174
|
-
return null;
|
|
175
|
-
}
|
|
176
|
-
}
|
|
177
|
-
renderLogo() {
|
|
178
|
-
return (index.h("div", { class: "SkeletonContainer" }, index.h("div", { class: 'Logo ' + (this.animation ? 'Skeleton' : '') })));
|
|
179
|
-
}
|
|
180
|
-
renderImage() {
|
|
181
|
-
return index.h("div", { class: 'Image ' + (this.animation ? 'Skeleton' : '') });
|
|
182
|
-
}
|
|
183
|
-
renderTitle() {
|
|
184
|
-
return (index.h("div", { class: "SkeletonContainer" }, index.h("div", { class: 'Title ' + (this.animation ? 'Skeleton' : '') })));
|
|
185
|
-
}
|
|
186
|
-
renderText() {
|
|
187
|
-
return (index.h("div", { class: "SkeletonContainer" }, Array.from({ length: this.rows > 0 ? this.rows : 1 }).map((_, index$1) => (index.h("div", { key: index$1, class: 'Text ' + (this.animation ? 'Skeleton' : '') })))));
|
|
188
|
-
}
|
|
189
|
-
renderRectangle() {
|
|
190
|
-
return (index.h("div", { class: "SkeletonContainer" }, index.h("div", { class: 'Rectangle ' + (this.animation ? 'Skeleton' : '') })));
|
|
191
|
-
}
|
|
192
|
-
renderCircle() {
|
|
193
|
-
return (index.h("div", { class: "SkeletonContainer" }, index.h("div", { class: 'Circle ' + (this.animation ? 'Skeleton' : '') })));
|
|
194
|
-
}
|
|
195
|
-
render() {
|
|
196
|
-
let styleBlock = '';
|
|
197
|
-
switch (this.structure) {
|
|
198
|
-
case 'logo':
|
|
199
|
-
styleBlock = `
|
|
200
|
-
:host {
|
|
201
|
-
--emw-skeleton-logo-width: ${this.stylingValue.width};
|
|
202
|
-
--emw-skeleton-logo-height: ${this.stylingValue.height};
|
|
203
|
-
--emw-skeleton-logo-border-radius: ${this.stylingValue.borderRadius};
|
|
204
|
-
--emw-skeleton-logo-margin-bottom: ${this.stylingValue.marginBottom};
|
|
205
|
-
--emw-skeleton-logo-margin-top: ${this.stylingValue.marginTop};
|
|
206
|
-
--emw-skeleton-logo-margin-left: ${this.stylingValue.marginLeft};
|
|
207
|
-
--emw-skeleton-logo-margin-right: ${this.stylingValue.marginRight};
|
|
208
|
-
}
|
|
209
|
-
`;
|
|
210
|
-
break;
|
|
211
|
-
case 'image':
|
|
212
|
-
styleBlock = `
|
|
213
|
-
:host {
|
|
214
|
-
--emw-skeleton-image-width: ${this.stylingValue.width};
|
|
215
|
-
--emw-skeleton-image-height: ${this.stylingValue.height};
|
|
216
|
-
--emw-skeleton-image-border-radius: ${this.stylingValue.borderRadius};
|
|
217
|
-
--emw-skeleton-image-margin-bottom: ${this.stylingValue.marginBottom};
|
|
218
|
-
--emw-skeleton-image-margin-top: ${this.stylingValue.marginTop};
|
|
219
|
-
--emw-skeleton-image-margin-left: ${this.stylingValue.marginLeft};
|
|
220
|
-
--emw-skeleton-image-margin-right: ${this.stylingValue.marginRight};
|
|
221
|
-
}
|
|
222
|
-
`;
|
|
223
|
-
break;
|
|
224
|
-
case 'title':
|
|
225
|
-
styleBlock = `
|
|
226
|
-
:host {
|
|
227
|
-
--emw-skeleton-title-width: ${this.stylingValue.width};
|
|
228
|
-
--emw-skeleton-title-height: ${this.stylingValue.height};
|
|
229
|
-
--emw-skeleton-title-border-radius: ${this.stylingValue.borderRadius};
|
|
230
|
-
--emw-skeleton-title-margin-bottom: ${this.stylingValue.marginBottom};
|
|
231
|
-
--emw-skeleton-title-margin-top: ${this.stylingValue.marginTop};
|
|
232
|
-
--emw-skeleton-title-margin-left: ${this.stylingValue.marginLeft};
|
|
233
|
-
--emw-skeleton-title-margin-right: ${this.stylingValue.marginRight};
|
|
234
|
-
}
|
|
235
|
-
`;
|
|
236
|
-
break;
|
|
237
|
-
case 'text':
|
|
238
|
-
styleBlock = `
|
|
239
|
-
:host {
|
|
240
|
-
--emw-skeleton-text-width: ${this.stylingValue.width};
|
|
241
|
-
--emw-skeleton-text-height: ${this.stylingValue.height};
|
|
242
|
-
--emw-skeleton-text-border-radius: ${this.stylingValue.borderRadius};
|
|
243
|
-
--emw-skeleton-text-margin-bottom: ${this.stylingValue.marginBottom};
|
|
244
|
-
--emw-skeleton-text-margin-top: ${this.stylingValue.marginTop};
|
|
245
|
-
--emw-skeleton-text-margin-left: ${this.stylingValue.marginLeft};
|
|
246
|
-
--emw-skeleton-text-margin-right: ${this.stylingValue.marginRight};
|
|
247
|
-
}
|
|
248
|
-
`;
|
|
249
|
-
break;
|
|
250
|
-
case 'rectangle':
|
|
251
|
-
styleBlock = `
|
|
252
|
-
:host {
|
|
253
|
-
--emw-skeleton-rectangle-width: ${this.stylingValue.width};
|
|
254
|
-
--emw-skeleton-rectangle-height: ${this.stylingValue.height};
|
|
255
|
-
--emw-skeleton-rectangle-border-radius: ${this.stylingValue.borderRadius};
|
|
256
|
-
--emw-skeleton-rectangle-margin-bottom: ${this.stylingValue.marginBottom};
|
|
257
|
-
--emw-skeleton-rectangle-margin-top: ${this.stylingValue.marginTop};
|
|
258
|
-
--emw-skeleton-rectangle-margin-left: ${this.stylingValue.marginLeft};
|
|
259
|
-
--emw-skeleton-rectangle-margin-right: ${this.stylingValue.marginRight};
|
|
260
|
-
}
|
|
261
|
-
`;
|
|
262
|
-
break;
|
|
263
|
-
case 'circle':
|
|
264
|
-
styleBlock = `
|
|
265
|
-
:host {
|
|
266
|
-
--emw-skeleton-circle-size: ${this.stylingValue.size};
|
|
267
|
-
}
|
|
268
|
-
`;
|
|
269
|
-
break;
|
|
270
|
-
default:
|
|
271
|
-
styleBlock = '';
|
|
272
|
-
}
|
|
273
|
-
return (index.h(index.Host, { key: 'e6b885bfd985ce7663d990756fe9101e25eb97f0' }, index.h("style", { key: '06ae24c7bb74f4dacfc12ae58085333f9dc89da5' }, styleBlock), this.handleStructure(this.structure)));
|
|
274
|
-
}
|
|
275
|
-
static get watchers() { return {
|
|
276
|
-
"structure": ["handleStructureChange"]
|
|
277
|
-
}; }
|
|
278
|
-
};
|
|
279
|
-
UiSkeleton.style = UiSkeletonStyle0;
|
|
280
|
-
|
|
281
|
-
exports.casino_challenges_container = casinoChallengesContainer.CasinoChallengesContainer;
|
|
282
|
-
exports.casino_challenges_list = CasinoChallengeList;
|
|
283
|
-
exports.ui_skeleton = UiSkeleton;
|
|
@@ -1,278 +0,0 @@
|
|
|
1
|
-
import { s as setClientStyling, a as setClientStylingURL, b as setStreamStyling } from './casino-challenges-container-e2d42fb0.js';
|
|
2
|
-
export { C as casino_challenges_container } from './casino-challenges-container-e2d42fb0.js';
|
|
3
|
-
import { r as registerInstance, c as createEvent, h, g as getElement, H as Host } from './index-7cb21c9d.js';
|
|
4
|
-
import '@everymatrix/casino-challenge-card';
|
|
5
|
-
|
|
6
|
-
const casinoChallengesListCss = ".challenges-list {\n display: flex;\n flex-wrap: wrap;\n gap: 30px;\n width: 100%;\n}\n\n.loader {\n width: 308px;\n border-radius: 16px;\n border: 2px solid var(--emw--button-border-color, rgba(221, 255, 207, 0.1019607843));\n background-color: var(--emw--color-background, #141515);\n box-sizing: border-box;\n position: relative;\n}\n@container challenge-list (max-width: 576px) {\n .loader {\n width: 100%;\n }\n}\n.loader:hover {\n background: linear-gradient(90deg, rgb(0, 62, 92) 0%, rgb(17, 59, 33) 100%);\n cursor: pointer;\n}\n.loader .SkeletonRows .SkeletonContainer {\n padding: 0 20px 0 20px;\n}\n.loader .SkeletonButton .Skeleton.Text {\n margin: 0;\n height: 28px;\n margin: 0 20px 20px 20px;\n border-radius: var(--emw--button-border-radius, 99px);\n width: auto;\n}\n.loader .Skeleton.Image {\n border-radius: 16px 16px 0 0;\n}\n.loader .Skeleton.Text {\n margin: 20px 0;\n}";
|
|
7
|
-
const CasinoChallengesListStyle0 = casinoChallengesListCss;
|
|
8
|
-
|
|
9
|
-
const skeletons = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
|
|
10
|
-
const CasinoChallengeList = class {
|
|
11
|
-
constructor(hostRef) {
|
|
12
|
-
registerInstance(this, hostRef);
|
|
13
|
-
this.loadMore = createEvent(this, "loadMore", 7);
|
|
14
|
-
this.timerExpired = createEvent(this, "timerExpired", 7);
|
|
15
|
-
this.setLastItemRef = (el) => {
|
|
16
|
-
if (this.lastItemRef && this.observer) {
|
|
17
|
-
this.observer.unobserve(this.lastItemRef);
|
|
18
|
-
}
|
|
19
|
-
this.lastItemRef = el;
|
|
20
|
-
if (el && this.observer && !this.loading) {
|
|
21
|
-
this.observer.observe(el);
|
|
22
|
-
}
|
|
23
|
-
};
|
|
24
|
-
this.mbSource = undefined;
|
|
25
|
-
this.clientStyling = undefined;
|
|
26
|
-
this.clientStylingUrl = undefined;
|
|
27
|
-
this.language = 'en';
|
|
28
|
-
this.translationUrl = undefined;
|
|
29
|
-
this.challenges = [];
|
|
30
|
-
this.loading = false;
|
|
31
|
-
this.hasMore = false;
|
|
32
|
-
}
|
|
33
|
-
handleClientStylingChange(newValue, oldValue) {
|
|
34
|
-
if (newValue != oldValue) {
|
|
35
|
-
setClientStyling(this.stylingContainer, this.clientStyling);
|
|
36
|
-
}
|
|
37
|
-
}
|
|
38
|
-
handleClientStylingUrlChange(newValue, oldValue) {
|
|
39
|
-
if (newValue != oldValue) {
|
|
40
|
-
setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
|
|
41
|
-
}
|
|
42
|
-
}
|
|
43
|
-
handleMbSourceChange(newValue, oldValue) {
|
|
44
|
-
if (newValue != oldValue) {
|
|
45
|
-
setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`);
|
|
46
|
-
}
|
|
47
|
-
}
|
|
48
|
-
setupObserver() {
|
|
49
|
-
if (!this.lastItemRef || this.loading || !this.hasMore)
|
|
50
|
-
return;
|
|
51
|
-
if (!this.observer) {
|
|
52
|
-
this.observer = new IntersectionObserver(([entry]) => {
|
|
53
|
-
if (entry.isIntersecting && !this.loading && this.hasMore) {
|
|
54
|
-
this.observer.unobserve(entry.target);
|
|
55
|
-
this.loadMore.emit();
|
|
56
|
-
}
|
|
57
|
-
}, {
|
|
58
|
-
root: null,
|
|
59
|
-
rootMargin: '0px',
|
|
60
|
-
threshold: 0.1
|
|
61
|
-
});
|
|
62
|
-
}
|
|
63
|
-
this.observer.disconnect();
|
|
64
|
-
this.observer.observe(this.lastItemRef);
|
|
65
|
-
}
|
|
66
|
-
componentDidRender() {
|
|
67
|
-
this.setupObserver();
|
|
68
|
-
}
|
|
69
|
-
disconnectedCallback() {
|
|
70
|
-
var _a;
|
|
71
|
-
(_a = this.observer) === null || _a === void 0 ? void 0 : _a.disconnect();
|
|
72
|
-
this.observer = undefined;
|
|
73
|
-
}
|
|
74
|
-
componentDidLoad() {
|
|
75
|
-
if (this.stylingContainer) {
|
|
76
|
-
if (this.mbSource)
|
|
77
|
-
setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`);
|
|
78
|
-
if (this.clientStyling)
|
|
79
|
-
setClientStyling(this.stylingContainer, this.clientStyling);
|
|
80
|
-
if (this.clientStylingUrl)
|
|
81
|
-
setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
|
|
82
|
-
}
|
|
83
|
-
}
|
|
84
|
-
renderSkeletons() {
|
|
85
|
-
return skeletons.map((skeleton) => (h("div", { class: "loader", key: skeleton }, h("ui-skeleton", { structure: "image", height: "200px", "border-radius": "16px 16px 0 0" }), h("ui-skeleton", { class: "SkeletonRows", structure: "text", width: "220px", height: "16px", rows: "3" }), h("ui-skeleton", { class: "SkeletonButton", structure: "text", width: "100%" }))));
|
|
86
|
-
}
|
|
87
|
-
onTimerExpired(e) {
|
|
88
|
-
if (this.timerExpired) {
|
|
89
|
-
this.timerExpired.emit(e.detail);
|
|
90
|
-
}
|
|
91
|
-
}
|
|
92
|
-
render() {
|
|
93
|
-
return (h("div", { key: 'c2dc103d0aa9777b8b79bd8e787985a69f2e2457', ref: (el) => (this.stylingContainer = el), class: "challenges-list" }, this.challenges.map((challenge, index) => (h("div", { key: challenge.Id, ref: index === this.challenges.length - 1 ? this.setLastItemRef : null }, h("casino-challenge-card", { challenge: challenge, language: this.language, mbSource: this.mbSource, clientStyling: this.clientStyling, clientStylingUrl: this.clientStylingUrl, translationUrl: this.translationUrl, onTimerExpired: this.onTimerExpired })))), this.loading && this.renderSkeletons()));
|
|
94
|
-
}
|
|
95
|
-
get el() { return getElement(this); }
|
|
96
|
-
static get watchers() { return {
|
|
97
|
-
"clientStyling": ["handleClientStylingChange"],
|
|
98
|
-
"clientStylingUrl": ["handleClientStylingUrlChange"],
|
|
99
|
-
"mbSource": ["handleMbSourceChange"]
|
|
100
|
-
}; }
|
|
101
|
-
};
|
|
102
|
-
CasinoChallengeList.style = CasinoChallengesListStyle0;
|
|
103
|
-
|
|
104
|
-
const uiSkeletonCss = ":host{display:block}.Skeleton{animation:skeleton-loading 1s linear infinite alternate}.Rectangle{background-color:var(--emw-skeleton-rectangle-background, #c2c2c2);width:var(--emw-skeleton-rectangle-width, 400px);height:var(--emw-skeleton-rectangle-height, 200px);border-radius:var(--emw-skeleton-rectangle-border-radius, 10px)}.Circle{background-color:var(--emw-skeleton-circle-background, #c2c2c2);width:var(--emw-skeleton-circle-size, 400px);height:var(--emw-skeleton-circle-size, 400px);border-radius:50%}.Text{background-color:var(--emw-skeleton-text-background, #c2c2c2);width:var(--emw-skeleton-text-width, 500px);height:var(--emw-skeleton-text-height, 20px);border-radius:var(--emw-skeleton-text-border-radius, 10px);margin-bottom:var(--emw-skeleton-text-margin-bottom, 5px)}.Text:last-child{width:calc(var(--emw-skeleton-text-width, 400px) - 100px)}.Title{background-color:var(--emw-skeleton-title-background, #c2c2c2);width:var(--emw-skeleton-title-width, 300px);height:var(--emw-skeleton-title-height, 30px);border-radius:var(--emw-skeleton-title-border-radius, 10px);margin-bottom:var(--emw-skeleton-title-margin-bottom, 5px)}.Image{background-color:var(--emw-skeleton-image-background, #c2c2c2);width:var(--emw-skeleton-image-width, 100%);height:var(--emw-skeleton-image-height, 100%);border-radius:var(--emw-skeleton-image-border-radius, unset)}.Logo{background-color:var(--emw-skeleton-logo-background, #c2c2c2);width:var(--emw-skeleton-logo-width, 120px);height:var(--emw-skeleton-logo-height, 75px);border-radius:var(--emw-skeleton-logo-border-radius, 10px)}@keyframes skeleton-loading{0%{background-color:var(--emw-skeleton-primary-color, #e0e0e0)}100%{background-color:var(--emw-skeleton-secondary-color, #f0f0f0)}}";
|
|
105
|
-
const UiSkeletonStyle0 = uiSkeletonCss;
|
|
106
|
-
|
|
107
|
-
const UiSkeleton = class {
|
|
108
|
-
constructor(hostRef) {
|
|
109
|
-
registerInstance(this, hostRef);
|
|
110
|
-
this.stylingValue = {
|
|
111
|
-
width: this.handleStylingProps(this.width),
|
|
112
|
-
height: this.handleStylingProps(this.height),
|
|
113
|
-
borderRadius: this.handleStylingProps(this.borderRadius),
|
|
114
|
-
marginBottom: this.handleStylingProps(this.marginBottom),
|
|
115
|
-
marginTop: this.handleStylingProps(this.marginTop),
|
|
116
|
-
marginLeft: this.handleStylingProps(this.marginLeft),
|
|
117
|
-
marginRight: this.handleStylingProps(this.marginRight),
|
|
118
|
-
size: this.handleStylingProps(this.size)
|
|
119
|
-
};
|
|
120
|
-
this.structure = undefined;
|
|
121
|
-
this.width = 'unset';
|
|
122
|
-
this.height = 'unset';
|
|
123
|
-
this.borderRadius = 'unset';
|
|
124
|
-
this.marginBottom = 'unset';
|
|
125
|
-
this.marginTop = 'unset';
|
|
126
|
-
this.marginLeft = 'unset';
|
|
127
|
-
this.marginRight = 'unset';
|
|
128
|
-
this.animation = true;
|
|
129
|
-
this.rows = 0;
|
|
130
|
-
this.size = '100%';
|
|
131
|
-
}
|
|
132
|
-
handleStructureChange(newValue, oldValue) {
|
|
133
|
-
if (oldValue !== newValue) {
|
|
134
|
-
this.handleStructure(newValue);
|
|
135
|
-
}
|
|
136
|
-
}
|
|
137
|
-
handleStylingProps(value) {
|
|
138
|
-
switch (typeof value) {
|
|
139
|
-
case 'number':
|
|
140
|
-
return value === 0 ? 0 : `${value}px`;
|
|
141
|
-
case 'undefined':
|
|
142
|
-
return 'unset';
|
|
143
|
-
case 'string':
|
|
144
|
-
if (['auto', 'unset', 'none', 'inherit', 'initial'].includes(value) ||
|
|
145
|
-
value.endsWith('px') ||
|
|
146
|
-
value.endsWith('%')) {
|
|
147
|
-
return value;
|
|
148
|
-
}
|
|
149
|
-
else {
|
|
150
|
-
return 'unset';
|
|
151
|
-
}
|
|
152
|
-
default:
|
|
153
|
-
return 'unset';
|
|
154
|
-
}
|
|
155
|
-
}
|
|
156
|
-
handleStructure(structure) {
|
|
157
|
-
switch (structure) {
|
|
158
|
-
case 'logo':
|
|
159
|
-
return this.renderLogo();
|
|
160
|
-
case 'image':
|
|
161
|
-
return this.renderImage();
|
|
162
|
-
case 'title':
|
|
163
|
-
return this.renderTitle();
|
|
164
|
-
case 'text':
|
|
165
|
-
return this.renderText();
|
|
166
|
-
case 'rectangle':
|
|
167
|
-
return this.renderRectangle();
|
|
168
|
-
case 'circle':
|
|
169
|
-
return this.renderCircle();
|
|
170
|
-
default:
|
|
171
|
-
return null;
|
|
172
|
-
}
|
|
173
|
-
}
|
|
174
|
-
renderLogo() {
|
|
175
|
-
return (h("div", { class: "SkeletonContainer" }, h("div", { class: 'Logo ' + (this.animation ? 'Skeleton' : '') })));
|
|
176
|
-
}
|
|
177
|
-
renderImage() {
|
|
178
|
-
return h("div", { class: 'Image ' + (this.animation ? 'Skeleton' : '') });
|
|
179
|
-
}
|
|
180
|
-
renderTitle() {
|
|
181
|
-
return (h("div", { class: "SkeletonContainer" }, h("div", { class: 'Title ' + (this.animation ? 'Skeleton' : '') })));
|
|
182
|
-
}
|
|
183
|
-
renderText() {
|
|
184
|
-
return (h("div", { class: "SkeletonContainer" }, Array.from({ length: this.rows > 0 ? this.rows : 1 }).map((_, index) => (h("div", { key: index, class: 'Text ' + (this.animation ? 'Skeleton' : '') })))));
|
|
185
|
-
}
|
|
186
|
-
renderRectangle() {
|
|
187
|
-
return (h("div", { class: "SkeletonContainer" }, h("div", { class: 'Rectangle ' + (this.animation ? 'Skeleton' : '') })));
|
|
188
|
-
}
|
|
189
|
-
renderCircle() {
|
|
190
|
-
return (h("div", { class: "SkeletonContainer" }, h("div", { class: 'Circle ' + (this.animation ? 'Skeleton' : '') })));
|
|
191
|
-
}
|
|
192
|
-
render() {
|
|
193
|
-
let styleBlock = '';
|
|
194
|
-
switch (this.structure) {
|
|
195
|
-
case 'logo':
|
|
196
|
-
styleBlock = `
|
|
197
|
-
:host {
|
|
198
|
-
--emw-skeleton-logo-width: ${this.stylingValue.width};
|
|
199
|
-
--emw-skeleton-logo-height: ${this.stylingValue.height};
|
|
200
|
-
--emw-skeleton-logo-border-radius: ${this.stylingValue.borderRadius};
|
|
201
|
-
--emw-skeleton-logo-margin-bottom: ${this.stylingValue.marginBottom};
|
|
202
|
-
--emw-skeleton-logo-margin-top: ${this.stylingValue.marginTop};
|
|
203
|
-
--emw-skeleton-logo-margin-left: ${this.stylingValue.marginLeft};
|
|
204
|
-
--emw-skeleton-logo-margin-right: ${this.stylingValue.marginRight};
|
|
205
|
-
}
|
|
206
|
-
`;
|
|
207
|
-
break;
|
|
208
|
-
case 'image':
|
|
209
|
-
styleBlock = `
|
|
210
|
-
:host {
|
|
211
|
-
--emw-skeleton-image-width: ${this.stylingValue.width};
|
|
212
|
-
--emw-skeleton-image-height: ${this.stylingValue.height};
|
|
213
|
-
--emw-skeleton-image-border-radius: ${this.stylingValue.borderRadius};
|
|
214
|
-
--emw-skeleton-image-margin-bottom: ${this.stylingValue.marginBottom};
|
|
215
|
-
--emw-skeleton-image-margin-top: ${this.stylingValue.marginTop};
|
|
216
|
-
--emw-skeleton-image-margin-left: ${this.stylingValue.marginLeft};
|
|
217
|
-
--emw-skeleton-image-margin-right: ${this.stylingValue.marginRight};
|
|
218
|
-
}
|
|
219
|
-
`;
|
|
220
|
-
break;
|
|
221
|
-
case 'title':
|
|
222
|
-
styleBlock = `
|
|
223
|
-
:host {
|
|
224
|
-
--emw-skeleton-title-width: ${this.stylingValue.width};
|
|
225
|
-
--emw-skeleton-title-height: ${this.stylingValue.height};
|
|
226
|
-
--emw-skeleton-title-border-radius: ${this.stylingValue.borderRadius};
|
|
227
|
-
--emw-skeleton-title-margin-bottom: ${this.stylingValue.marginBottom};
|
|
228
|
-
--emw-skeleton-title-margin-top: ${this.stylingValue.marginTop};
|
|
229
|
-
--emw-skeleton-title-margin-left: ${this.stylingValue.marginLeft};
|
|
230
|
-
--emw-skeleton-title-margin-right: ${this.stylingValue.marginRight};
|
|
231
|
-
}
|
|
232
|
-
`;
|
|
233
|
-
break;
|
|
234
|
-
case 'text':
|
|
235
|
-
styleBlock = `
|
|
236
|
-
:host {
|
|
237
|
-
--emw-skeleton-text-width: ${this.stylingValue.width};
|
|
238
|
-
--emw-skeleton-text-height: ${this.stylingValue.height};
|
|
239
|
-
--emw-skeleton-text-border-radius: ${this.stylingValue.borderRadius};
|
|
240
|
-
--emw-skeleton-text-margin-bottom: ${this.stylingValue.marginBottom};
|
|
241
|
-
--emw-skeleton-text-margin-top: ${this.stylingValue.marginTop};
|
|
242
|
-
--emw-skeleton-text-margin-left: ${this.stylingValue.marginLeft};
|
|
243
|
-
--emw-skeleton-text-margin-right: ${this.stylingValue.marginRight};
|
|
244
|
-
}
|
|
245
|
-
`;
|
|
246
|
-
break;
|
|
247
|
-
case 'rectangle':
|
|
248
|
-
styleBlock = `
|
|
249
|
-
:host {
|
|
250
|
-
--emw-skeleton-rectangle-width: ${this.stylingValue.width};
|
|
251
|
-
--emw-skeleton-rectangle-height: ${this.stylingValue.height};
|
|
252
|
-
--emw-skeleton-rectangle-border-radius: ${this.stylingValue.borderRadius};
|
|
253
|
-
--emw-skeleton-rectangle-margin-bottom: ${this.stylingValue.marginBottom};
|
|
254
|
-
--emw-skeleton-rectangle-margin-top: ${this.stylingValue.marginTop};
|
|
255
|
-
--emw-skeleton-rectangle-margin-left: ${this.stylingValue.marginLeft};
|
|
256
|
-
--emw-skeleton-rectangle-margin-right: ${this.stylingValue.marginRight};
|
|
257
|
-
}
|
|
258
|
-
`;
|
|
259
|
-
break;
|
|
260
|
-
case 'circle':
|
|
261
|
-
styleBlock = `
|
|
262
|
-
:host {
|
|
263
|
-
--emw-skeleton-circle-size: ${this.stylingValue.size};
|
|
264
|
-
}
|
|
265
|
-
`;
|
|
266
|
-
break;
|
|
267
|
-
default:
|
|
268
|
-
styleBlock = '';
|
|
269
|
-
}
|
|
270
|
-
return (h(Host, { key: 'e6b885bfd985ce7663d990756fe9101e25eb97f0' }, h("style", { key: '06ae24c7bb74f4dacfc12ae58085333f9dc89da5' }, styleBlock), this.handleStructure(this.structure)));
|
|
271
|
-
}
|
|
272
|
-
static get watchers() { return {
|
|
273
|
-
"structure": ["handleStructureChange"]
|
|
274
|
-
}; }
|
|
275
|
-
};
|
|
276
|
-
UiSkeleton.style = UiSkeletonStyle0;
|
|
277
|
-
|
|
278
|
-
export { CasinoChallengeList as casino_challenges_list, UiSkeleton as ui_skeleton };
|