@everymatrix/casino-challenges-list 0.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (56) hide show
  1. package/dist/casino-challenges-list/app-globals-0f993ce5.js +1 -0
  2. package/dist/casino-challenges-list/casino-challenges-list-d8eefa92.js +1 -0
  3. package/dist/casino-challenges-list/casino-challenges-list.esm.js +1 -0
  4. package/dist/casino-challenges-list/casino-challenges-list_2.entry.js +1 -0
  5. package/dist/casino-challenges-list/index-e9d014fd.js +2 -0
  6. package/dist/casino-challenges-list/index.esm.js +1 -0
  7. package/dist/cjs/app-globals-3a1e7e63.js +5 -0
  8. package/dist/cjs/casino-challenges-list-4da62aa7.js +155 -0
  9. package/dist/cjs/casino-challenges-list.cjs.js +25 -0
  10. package/dist/cjs/casino-challenges-list_2.cjs.entry.js +184 -0
  11. package/dist/cjs/index-75e73570.js +1200 -0
  12. package/dist/cjs/index.cjs.js +11 -0
  13. package/dist/cjs/loader.cjs.js +15 -0
  14. package/dist/collection/collection-manifest.json +19 -0
  15. package/dist/collection/components/casino-challenges-list/casino-challenges-list.css +40 -0
  16. package/dist/collection/components/casino-challenges-list/casino-challenges-list.js +274 -0
  17. package/dist/collection/components/casino-challenges-list/index.js +1 -0
  18. package/dist/collection/index.js +1 -0
  19. package/dist/collection/utils/types.js +40 -0
  20. package/dist/collection/utils/utils.js +3 -0
  21. package/dist/esm/app-globals-0f993ce5.js +3 -0
  22. package/dist/esm/casino-challenges-list-d8eefa92.js +153 -0
  23. package/dist/esm/casino-challenges-list.js +20 -0
  24. package/dist/esm/casino-challenges-list_2.entry.js +179 -0
  25. package/dist/esm/index-e9d014fd.js +1171 -0
  26. package/dist/esm/index.js +3 -0
  27. package/dist/esm/loader.js +11 -0
  28. package/dist/index.cjs.js +1 -0
  29. package/dist/index.js +1 -0
  30. package/dist/stencil.config.dev.js +19 -0
  31. package/dist/stencil.config.js +19 -0
  32. package/dist/storybook/main.js +43 -0
  33. package/dist/storybook/preview.js +9 -0
  34. package/dist/types/builds/emfe-widgets/widgets-monorepo/packages/stencil/casino-challenges-list/.stencil/libs/common/src/storybook/storybook-utils.d.ts +39 -0
  35. package/dist/types/builds/emfe-widgets/widgets-monorepo/packages/stencil/casino-challenges-list/.stencil/packages/stencil/casino-challenges-list/stencil.config.d.ts +2 -0
  36. package/dist/types/builds/emfe-widgets/widgets-monorepo/packages/stencil/casino-challenges-list/.stencil/packages/stencil/casino-challenges-list/stencil.config.dev.d.ts +2 -0
  37. package/dist/types/builds/emfe-widgets/widgets-monorepo/packages/stencil/casino-challenges-list/.stencil/packages/stencil/casino-challenges-list/storybook/main.d.ts +3 -0
  38. package/dist/types/builds/emfe-widgets/widgets-monorepo/packages/stencil/casino-challenges-list/.stencil/packages/stencil/casino-challenges-list/storybook/preview.d.ts +70 -0
  39. package/dist/types/builds/emfe-widgets/widgets-monorepo/packages/stencil/casino-challenges-list/.stencil/tools/plugins/index.d.ts +3 -0
  40. package/dist/types/builds/emfe-widgets/widgets-monorepo/packages/stencil/casino-challenges-list/.stencil/tools/plugins/stencil-clean-deps-plugin.d.ts +5 -0
  41. package/dist/types/builds/emfe-widgets/widgets-monorepo/packages/stencil/casino-challenges-list/.stencil/tools/plugins/vite-chunk-plugin.d.ts +6 -0
  42. package/dist/types/builds/emfe-widgets/widgets-monorepo/packages/stencil/casino-challenges-list/.stencil/tools/plugins/vite-clean-deps-plugin.d.ts +4 -0
  43. package/dist/types/components/casino-challenges-list/casino-challenges-list.d.ts +30 -0
  44. package/dist/types/components/casino-challenges-list/index.d.ts +1 -0
  45. package/dist/types/components.d.ts +71 -0
  46. package/dist/types/index.d.ts +1 -0
  47. package/dist/types/stencil-public-runtime.d.ts +1674 -0
  48. package/dist/types/utils/types.d.ts +124 -0
  49. package/dist/types/utils/utils.d.ts +1 -0
  50. package/loader/cdn.js +1 -0
  51. package/loader/index.cjs.js +1 -0
  52. package/loader/index.d.ts +24 -0
  53. package/loader/index.es2017.js +1 -0
  54. package/loader/index.js +2 -0
  55. package/loader/package.json +11 -0
  56. package/package.json +27 -0
@@ -0,0 +1,11 @@
1
+ 'use strict';
2
+
3
+ Object.defineProperty(exports, '__esModule', { value: true });
4
+
5
+ const casinoChallengesList = require('./casino-challenges-list-4da62aa7.js');
6
+ require('./index-75e73570.js');
7
+ require('@everymatrix/casino-challenge-card');
8
+
9
+
10
+
11
+ exports.CasinoChallengeList = casinoChallengesList.CasinoChallengeList;
@@ -0,0 +1,15 @@
1
+ 'use strict';
2
+
3
+ Object.defineProperty(exports, '__esModule', { value: true });
4
+
5
+ const index = require('./index-75e73570.js');
6
+ const appGlobals = require('./app-globals-3a1e7e63.js');
7
+
8
+ const defineCustomElements = async (win, options) => {
9
+ if (typeof window === 'undefined') return undefined;
10
+ await appGlobals.globalScripts();
11
+ return index.bootstrapLazy([["casino-challenges-list_2.cjs",[[1,"casino-challenges-list",{"mbSource":[513,"mb-source"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"language":[513],"translationUrl":[513,"translation-url"],"challenges":[16],"loading":[516],"hasMore":[516,"has-more"]},null,{"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingUrlChange"],"mbSource":["handleMbSourceChange"]}],[0,"ui-skeleton",{"structure":[1],"width":[1],"height":[1],"borderRadius":[8,"border-radius"],"marginBottom":[8,"margin-bottom"],"marginTop":[8,"margin-top"],"marginLeft":[8,"margin-left"],"marginRight":[8,"margin-right"],"animation":[4],"rows":[2],"size":[1]},null,{"structure":["handleStructureChange"]}]]]], options);
12
+ };
13
+
14
+ exports.setNonce = index.setNonce;
15
+ exports.defineCustomElements = defineCustomElements;
@@ -0,0 +1,19 @@
1
+ {
2
+ "entries": [
3
+ "components/casino-challenges-list/casino-challenges-list.js"
4
+ ],
5
+ "compiler": {
6
+ "name": "@stencil/core",
7
+ "version": "4.19.2",
8
+ "typescriptVersion": "5.4.5"
9
+ },
10
+ "collections": [
11
+ {
12
+ "name": "@everymatrix/ui-skeleton",
13
+ "tags": [
14
+ "ui-skeleton"
15
+ ]
16
+ }
17
+ ],
18
+ "bundles": []
19
+ }
@@ -0,0 +1,40 @@
1
+ .challenges-list {
2
+ display: flex;
3
+ flex-wrap: wrap;
4
+ gap: 30px;
5
+ width: 100%;
6
+ }
7
+
8
+ .loader {
9
+ width: 308px;
10
+ border-radius: 16px;
11
+ border: 2px solid var(--emw--button-border-color, rgba(221, 255, 207, 0.1019607843));
12
+ background-color: var(--emw--color-background, #141515);
13
+ box-sizing: border-box;
14
+ position: relative;
15
+ }
16
+ @container challenge-list (max-width: 576px) {
17
+ .loader {
18
+ width: 100%;
19
+ }
20
+ }
21
+ .loader:hover {
22
+ background: linear-gradient(90deg, rgb(0, 62, 92) 0%, rgb(17, 59, 33) 100%);
23
+ cursor: pointer;
24
+ }
25
+ .loader .SkeletonRows .SkeletonContainer {
26
+ padding: 0 20px 0 20px;
27
+ }
28
+ .loader .SkeletonButton .Skeleton.Text {
29
+ margin: 0;
30
+ height: 28px;
31
+ margin: 0 20px 20px 20px;
32
+ border-radius: var(--emw--button-border-radius, 99px);
33
+ width: auto;
34
+ }
35
+ .loader .Skeleton.Image {
36
+ border-radius: 16px 16px 0 0;
37
+ }
38
+ .loader .Skeleton.Text {
39
+ margin: 20px 0;
40
+ }
@@ -0,0 +1,274 @@
1
+ import { h } from "@stencil/core";
2
+ import { setClientStyling, setClientStylingURL, setStreamStyling } from "../../../../../../../../libs/common/src/styling/index";
3
+ import "../../../../../ui-skeleton/dist/types/index";
4
+ import "@everymatrix/casino-challenge-card";
5
+ const skeletons = [0, 1, 2, 3, 4, 5];
6
+ export class CasinoChallengeList {
7
+ constructor() {
8
+ this.setLastItemRef = (el) => {
9
+ if (this.lastItemRef && this.observer) {
10
+ this.observer.unobserve(this.lastItemRef);
11
+ }
12
+ this.lastItemRef = el;
13
+ if (el && this.observer && !this.loading) {
14
+ this.observer.observe(el);
15
+ }
16
+ };
17
+ this.mbSource = undefined;
18
+ this.clientStyling = undefined;
19
+ this.clientStylingUrl = undefined;
20
+ this.language = 'en';
21
+ this.translationUrl = undefined;
22
+ this.challenges = [];
23
+ this.loading = false;
24
+ this.hasMore = false;
25
+ }
26
+ handleClientStylingChange(newValue, oldValue) {
27
+ if (newValue != oldValue) {
28
+ setClientStyling(this.stylingContainer, this.clientStyling);
29
+ }
30
+ }
31
+ handleClientStylingUrlChange(newValue, oldValue) {
32
+ if (newValue != oldValue) {
33
+ setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
34
+ }
35
+ }
36
+ handleMbSourceChange(newValue, oldValue) {
37
+ if (newValue != oldValue) {
38
+ setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`, this.stylingSubscription);
39
+ }
40
+ }
41
+ setupObserver() {
42
+ if (!this.lastItemRef || this.loading || !this.hasMore)
43
+ return;
44
+ if (!this.observer) {
45
+ this.observer = new IntersectionObserver(([entry]) => {
46
+ if (entry.isIntersecting && !this.loading && this.hasMore) {
47
+ this.observer.unobserve(entry.target);
48
+ this.loadMore.emit();
49
+ }
50
+ }, {
51
+ root: null,
52
+ rootMargin: '0px',
53
+ threshold: 0.1
54
+ });
55
+ }
56
+ this.observer.disconnect();
57
+ this.observer.observe(this.lastItemRef);
58
+ }
59
+ componentDidRender() {
60
+ this.setupObserver();
61
+ }
62
+ disconnectedCallback() {
63
+ var _a;
64
+ (_a = this.observer) === null || _a === void 0 ? void 0 : _a.disconnect();
65
+ this.observer = undefined;
66
+ }
67
+ componentDidLoad() {
68
+ if (this.stylingContainer) {
69
+ if (this.mbSource)
70
+ setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`, this.stylingSubscription);
71
+ if (this.clientStyling)
72
+ setClientStyling(this.stylingContainer, this.clientStyling);
73
+ if (this.clientStylingUrl)
74
+ setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
75
+ }
76
+ }
77
+ renderSkeletons() {
78
+ 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%" }))));
79
+ }
80
+ render() {
81
+ return (h("div", { key: 'c6251da5e01eff5d3ce1c7e1a0151a0b437c5e55', 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 })))), this.loading && this.renderSkeletons()));
82
+ }
83
+ static get is() { return "casino-challenges-list"; }
84
+ static get encapsulation() { return "shadow"; }
85
+ static get originalStyleUrls() {
86
+ return {
87
+ "$": ["casino-challenges-list.scss"]
88
+ };
89
+ }
90
+ static get styleUrls() {
91
+ return {
92
+ "$": ["casino-challenges-list.css"]
93
+ };
94
+ }
95
+ static get properties() {
96
+ return {
97
+ "mbSource": {
98
+ "type": "string",
99
+ "mutable": false,
100
+ "complexType": {
101
+ "original": "string",
102
+ "resolved": "string",
103
+ "references": {}
104
+ },
105
+ "required": false,
106
+ "optional": false,
107
+ "docs": {
108
+ "tags": [],
109
+ "text": ""
110
+ },
111
+ "attribute": "mb-source",
112
+ "reflect": true
113
+ },
114
+ "clientStyling": {
115
+ "type": "string",
116
+ "mutable": false,
117
+ "complexType": {
118
+ "original": "string",
119
+ "resolved": "string",
120
+ "references": {}
121
+ },
122
+ "required": false,
123
+ "optional": false,
124
+ "docs": {
125
+ "tags": [],
126
+ "text": ""
127
+ },
128
+ "attribute": "client-styling",
129
+ "reflect": true
130
+ },
131
+ "clientStylingUrl": {
132
+ "type": "string",
133
+ "mutable": false,
134
+ "complexType": {
135
+ "original": "string",
136
+ "resolved": "string",
137
+ "references": {}
138
+ },
139
+ "required": false,
140
+ "optional": false,
141
+ "docs": {
142
+ "tags": [],
143
+ "text": ""
144
+ },
145
+ "attribute": "client-styling-url",
146
+ "reflect": true
147
+ },
148
+ "language": {
149
+ "type": "string",
150
+ "mutable": false,
151
+ "complexType": {
152
+ "original": "string",
153
+ "resolved": "string",
154
+ "references": {}
155
+ },
156
+ "required": false,
157
+ "optional": false,
158
+ "docs": {
159
+ "tags": [],
160
+ "text": ""
161
+ },
162
+ "attribute": "language",
163
+ "reflect": true,
164
+ "defaultValue": "'en'"
165
+ },
166
+ "translationUrl": {
167
+ "type": "string",
168
+ "mutable": false,
169
+ "complexType": {
170
+ "original": "string",
171
+ "resolved": "string",
172
+ "references": {}
173
+ },
174
+ "required": false,
175
+ "optional": false,
176
+ "docs": {
177
+ "tags": [],
178
+ "text": ""
179
+ },
180
+ "attribute": "translation-url",
181
+ "reflect": true
182
+ },
183
+ "challenges": {
184
+ "type": "unknown",
185
+ "mutable": false,
186
+ "complexType": {
187
+ "original": "IChallenge[]",
188
+ "resolved": "IChallenge[]",
189
+ "references": {
190
+ "IChallenge": {
191
+ "location": "import",
192
+ "path": "../../components",
193
+ "id": "../../../../packages/stencil/casino-challenges-list/src/components.d.ts::unknown"
194
+ }
195
+ }
196
+ },
197
+ "required": false,
198
+ "optional": false,
199
+ "docs": {
200
+ "tags": [],
201
+ "text": ""
202
+ },
203
+ "defaultValue": "[]"
204
+ },
205
+ "loading": {
206
+ "type": "boolean",
207
+ "mutable": false,
208
+ "complexType": {
209
+ "original": "boolean",
210
+ "resolved": "boolean",
211
+ "references": {}
212
+ },
213
+ "required": false,
214
+ "optional": false,
215
+ "docs": {
216
+ "tags": [],
217
+ "text": ""
218
+ },
219
+ "attribute": "loading",
220
+ "reflect": true,
221
+ "defaultValue": "false"
222
+ },
223
+ "hasMore": {
224
+ "type": "boolean",
225
+ "mutable": false,
226
+ "complexType": {
227
+ "original": "boolean",
228
+ "resolved": "boolean",
229
+ "references": {}
230
+ },
231
+ "required": false,
232
+ "optional": false,
233
+ "docs": {
234
+ "tags": [],
235
+ "text": ""
236
+ },
237
+ "attribute": "has-more",
238
+ "reflect": true,
239
+ "defaultValue": "false"
240
+ }
241
+ };
242
+ }
243
+ static get events() {
244
+ return [{
245
+ "method": "loadMore",
246
+ "name": "loadMore",
247
+ "bubbles": true,
248
+ "cancelable": true,
249
+ "composed": true,
250
+ "docs": {
251
+ "tags": [],
252
+ "text": ""
253
+ },
254
+ "complexType": {
255
+ "original": "any",
256
+ "resolved": "any",
257
+ "references": {}
258
+ }
259
+ }];
260
+ }
261
+ static get elementRef() { return "el"; }
262
+ static get watchers() {
263
+ return [{
264
+ "propName": "clientStyling",
265
+ "methodName": "handleClientStylingChange"
266
+ }, {
267
+ "propName": "clientStylingUrl",
268
+ "methodName": "handleClientStylingUrlChange"
269
+ }, {
270
+ "propName": "mbSource",
271
+ "methodName": "handleMbSourceChange"
272
+ }];
273
+ }
274
+ }
@@ -0,0 +1 @@
1
+ export { CasinoChallengeList } from './casino-challenges-list';
@@ -0,0 +1 @@
1
+ export * from './components/casino-challenges-list';
@@ -0,0 +1,40 @@
1
+ export var EChallengeLevelTargetType;
2
+ (function (EChallengeLevelTargetType) {
3
+ EChallengeLevelTargetType[EChallengeLevelTargetType["Accumulative"] = 0] = "Accumulative";
4
+ EChallengeLevelTargetType[EChallengeLevelTargetType["SingleBet"] = 1] = "SingleBet";
5
+ EChallengeLevelTargetType[EChallengeLevelTargetType["MultipleOneBetSize"] = 2] = "MultipleOneBetSize";
6
+ })(EChallengeLevelTargetType || (EChallengeLevelTargetType = {}));
7
+ export var EChallengeRecurrenceType;
8
+ (function (EChallengeRecurrenceType) {
9
+ EChallengeRecurrenceType[EChallengeRecurrenceType["Single"] = 0] = "Single";
10
+ EChallengeRecurrenceType[EChallengeRecurrenceType["Daily"] = 1] = "Daily";
11
+ EChallengeRecurrenceType[EChallengeRecurrenceType["Weekly"] = 2] = "Weekly";
12
+ EChallengeRecurrenceType[EChallengeRecurrenceType["Monthly"] = 3] = "Monthly";
13
+ })(EChallengeRecurrenceType || (EChallengeRecurrenceType = {}));
14
+ export var EChallengeRewardType;
15
+ (function (EChallengeRewardType) {
16
+ EChallengeRewardType[EChallengeRewardType["FreeSpins"] = 0] = "FreeSpins";
17
+ EChallengeRewardType[EChallengeRewardType["LuckyWheel"] = 1] = "LuckyWheel";
18
+ EChallengeRewardType[EChallengeRewardType["Leaderboard"] = 2] = "Leaderboard";
19
+ EChallengeRewardType[EChallengeRewardType["Challenge"] = 3] = "Challenge";
20
+ EChallengeRewardType[EChallengeRewardType["Custom"] = 4] = "Custom";
21
+ })(EChallengeRewardType || (EChallengeRewardType = {}));
22
+ export var EChallengeStatus;
23
+ (function (EChallengeStatus) {
24
+ EChallengeStatus[EChallengeStatus["Setup"] = 0] = "Setup";
25
+ EChallengeStatus[EChallengeStatus["Active"] = 1] = "Active";
26
+ EChallengeStatus[EChallengeStatus["Paused"] = 2] = "Paused";
27
+ EChallengeStatus[EChallengeStatus["Closed"] = 3] = "Closed";
28
+ EChallengeStatus[EChallengeStatus["Deleted"] = 4] = "Deleted";
29
+ })(EChallengeStatus || (EChallengeStatus = {}));
30
+ export var EChallengeTriggerType;
31
+ (function (EChallengeTriggerType) {
32
+ EChallengeTriggerType[EChallengeTriggerType["GameLaunch"] = 0] = "GameLaunch";
33
+ EChallengeTriggerType[EChallengeTriggerType["Reward"] = 1] = "Reward";
34
+ EChallengeTriggerType[EChallengeTriggerType["Manual"] = 2] = "Manual";
35
+ })(EChallengeTriggerType || (EChallengeTriggerType = {}));
36
+ export var EChallengeValidityType;
37
+ (function (EChallengeValidityType) {
38
+ EChallengeValidityType[EChallengeValidityType["Period"] = 0] = "Period";
39
+ EChallengeValidityType[EChallengeValidityType["Date"] = 1] = "Date";
40
+ })(EChallengeValidityType || (EChallengeValidityType = {}));
@@ -0,0 +1,3 @@
1
+ export function format(first, middle, last) {
2
+ return (first || '') + (middle ? ` ${middle}` : '') + (last ? ` ${last}` : '');
3
+ }
@@ -0,0 +1,3 @@
1
+ const globalScripts = () => {};
2
+
3
+ export { globalScripts as g };
@@ -0,0 +1,153 @@
1
+ import { r as registerInstance, c as createEvent, h, g as getElement } from './index-e9d014fd.js';
2
+ import '@everymatrix/casino-challenge-card';
3
+
4
+ /**
5
+ * @name setClientStyling
6
+ * @description Method used to create and append to the passed element of the widget a style element with the content received
7
+ * @param {HTMLElement} stylingContainer The reference element of the widget
8
+ * @param {string} clientStyling The style content
9
+ */
10
+ function setClientStyling(stylingContainer, clientStyling) {
11
+ if (stylingContainer) {
12
+ const sheet = document.createElement('style');
13
+ sheet.innerHTML = clientStyling;
14
+ stylingContainer.appendChild(sheet);
15
+ }
16
+ }
17
+
18
+ /**
19
+ * @name setClientStylingURL
20
+ * @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
21
+ * @param {HTMLElement} stylingContainer The reference element of the widget
22
+ * @param {string} clientStylingUrl The URL of the style content
23
+ */
24
+ function setClientStylingURL(stylingContainer, clientStylingUrl) {
25
+ const url = new URL(clientStylingUrl);
26
+
27
+ fetch(url.href)
28
+ .then((res) => res.text())
29
+ .then((data) => {
30
+ const cssFile = document.createElement('style');
31
+ cssFile.innerHTML = data;
32
+ if (stylingContainer) {
33
+ stylingContainer.appendChild(cssFile);
34
+ }
35
+ })
36
+ .catch((err) => {
37
+ console.error('There was an error while trying to load client styling from URL', err);
38
+ });
39
+ }
40
+
41
+ /**
42
+ * @name setStreamLibrary
43
+ * @description Method used to create and append to the passed element of the widget a style element with content fetched from the MessageBus
44
+ * @param {HTMLElement} stylingContainer The highest element of the widget
45
+ * @param {string} domain The domain from where the content should be fetched (e.g. 'Casino.Style', 'App.Style', 'casino-footer.style', etc.)
46
+ * @param {ref} subscription A reference to a variable where the subscription should be saved for unsubscribing when no longer needed
47
+ */
48
+ function setStreamStyling(stylingContainer, domain, subscription) {
49
+ if (window.emMessageBus) {
50
+ const sheet = document.createElement('style');
51
+
52
+ window.emMessageBus.subscribe(domain, (data) => {
53
+ sheet.innerHTML = data;
54
+ if (stylingContainer) {
55
+ stylingContainer.appendChild(sheet);
56
+ }
57
+ });
58
+ }
59
+ }
60
+
61
+ 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}";
62
+ const CasinoChallengesListStyle0 = casinoChallengesListCss;
63
+
64
+ const skeletons = [0, 1, 2, 3, 4, 5];
65
+ const CasinoChallengeList = class {
66
+ constructor(hostRef) {
67
+ registerInstance(this, hostRef);
68
+ this.loadMore = createEvent(this, "loadMore", 7);
69
+ this.setLastItemRef = (el) => {
70
+ if (this.lastItemRef && this.observer) {
71
+ this.observer.unobserve(this.lastItemRef);
72
+ }
73
+ this.lastItemRef = el;
74
+ if (el && this.observer && !this.loading) {
75
+ this.observer.observe(el);
76
+ }
77
+ };
78
+ this.mbSource = undefined;
79
+ this.clientStyling = undefined;
80
+ this.clientStylingUrl = undefined;
81
+ this.language = 'en';
82
+ this.translationUrl = undefined;
83
+ this.challenges = [];
84
+ this.loading = false;
85
+ this.hasMore = false;
86
+ }
87
+ handleClientStylingChange(newValue, oldValue) {
88
+ if (newValue != oldValue) {
89
+ setClientStyling(this.stylingContainer, this.clientStyling);
90
+ }
91
+ }
92
+ handleClientStylingUrlChange(newValue, oldValue) {
93
+ if (newValue != oldValue) {
94
+ setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
95
+ }
96
+ }
97
+ handleMbSourceChange(newValue, oldValue) {
98
+ if (newValue != oldValue) {
99
+ setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`);
100
+ }
101
+ }
102
+ setupObserver() {
103
+ if (!this.lastItemRef || this.loading || !this.hasMore)
104
+ return;
105
+ if (!this.observer) {
106
+ this.observer = new IntersectionObserver(([entry]) => {
107
+ if (entry.isIntersecting && !this.loading && this.hasMore) {
108
+ this.observer.unobserve(entry.target);
109
+ this.loadMore.emit();
110
+ }
111
+ }, {
112
+ root: null,
113
+ rootMargin: '0px',
114
+ threshold: 0.1
115
+ });
116
+ }
117
+ this.observer.disconnect();
118
+ this.observer.observe(this.lastItemRef);
119
+ }
120
+ componentDidRender() {
121
+ this.setupObserver();
122
+ }
123
+ disconnectedCallback() {
124
+ var _a;
125
+ (_a = this.observer) === null || _a === void 0 ? void 0 : _a.disconnect();
126
+ this.observer = undefined;
127
+ }
128
+ componentDidLoad() {
129
+ if (this.stylingContainer) {
130
+ if (this.mbSource)
131
+ setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`);
132
+ if (this.clientStyling)
133
+ setClientStyling(this.stylingContainer, this.clientStyling);
134
+ if (this.clientStylingUrl)
135
+ setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
136
+ }
137
+ }
138
+ renderSkeletons() {
139
+ 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%" }))));
140
+ }
141
+ render() {
142
+ return (h("div", { key: 'c6251da5e01eff5d3ce1c7e1a0151a0b437c5e55', 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 })))), this.loading && this.renderSkeletons()));
143
+ }
144
+ get el() { return getElement(this); }
145
+ static get watchers() { return {
146
+ "clientStyling": ["handleClientStylingChange"],
147
+ "clientStylingUrl": ["handleClientStylingUrlChange"],
148
+ "mbSource": ["handleMbSourceChange"]
149
+ }; }
150
+ };
151
+ CasinoChallengeList.style = CasinoChallengesListStyle0;
152
+
153
+ export { CasinoChallengeList as C };
@@ -0,0 +1,20 @@
1
+ import { p as promiseResolve, b as bootstrapLazy } from './index-e9d014fd.js';
2
+ export { s as setNonce } from './index-e9d014fd.js';
3
+ import { g as globalScripts } from './app-globals-0f993ce5.js';
4
+
5
+ /*
6
+ Stencil Client Patch Browser v4.19.2 | MIT Licensed | https://stenciljs.com
7
+ */
8
+ var patchBrowser = () => {
9
+ const importMeta = import.meta.url;
10
+ const opts = {};
11
+ if (importMeta !== "") {
12
+ opts.resourcesUrl = new URL(".", importMeta).href;
13
+ }
14
+ return promiseResolve(opts);
15
+ };
16
+
17
+ patchBrowser().then(async (options) => {
18
+ await globalScripts();
19
+ return bootstrapLazy([["casino-challenges-list_2",[[1,"casino-challenges-list",{"mbSource":[513,"mb-source"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"language":[513],"translationUrl":[513,"translation-url"],"challenges":[16],"loading":[516],"hasMore":[516,"has-more"]},null,{"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingUrlChange"],"mbSource":["handleMbSourceChange"]}],[0,"ui-skeleton",{"structure":[1],"width":[1],"height":[1],"borderRadius":[8,"border-radius"],"marginBottom":[8,"margin-bottom"],"marginTop":[8,"margin-top"],"marginLeft":[8,"margin-left"],"marginRight":[8,"margin-right"],"animation":[4],"rows":[2],"size":[1]},null,{"structure":["handleStructureChange"]}]]]], options);
20
+ });