@everymatrix/general-slider-navigation 1.77.28 → 1.77.30
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/carousel-component_2.cjs.entry.js +36 -27
- package/dist/cjs/general-slider-navigation.cjs.js +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/collection/components/carousel-component/carousel-component.css +47 -14
- package/dist/collection/components/carousel-component/carousel-component.js +48 -20
- package/dist/collection/components/general-slider-navigation/general-slider-navigation.js +7 -8
- package/dist/esm/carousel-component_2.entry.js +36 -27
- package/dist/esm/general-slider-navigation.js +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/general-slider-navigation/carousel-component_2.entry.js +1 -1
- package/dist/general-slider-navigation/general-slider-navigation.esm.js +1 -1
- package/dist/types/components/carousel-component/carousel-component.d.ts +6 -0
- package/dist/types/components/general-slider-navigation/general-slider-navigation.d.ts +3 -3
- package/dist/types/components.d.ts +8 -0
- package/package.json +1 -1
|
@@ -192,7 +192,7 @@ const debounce = (func, delay) => {
|
|
|
192
192
|
};
|
|
193
193
|
};
|
|
194
194
|
|
|
195
|
-
const carouselComponentCss = ":host{display:block;font-family:\"Roboto\", sans-serif}html,body{padding:0;margin:0;width:100%;height:100%}.Carousel{position:relative;display:block;width:100%}.carousel__prev,.carousel__next{position:absolute;bottom:-15%;transition:transform 0.25s ease}.carousel__prev i,.carousel__next i{font-size:var(--emw--font-size-x-large, 60px);color:var(--emw--color-white, #
|
|
195
|
+
const carouselComponentCss = ":host{display:block;font-family:\"Roboto\", sans-serif}html,body{padding:0;margin:0;width:100%;height:100%}.Carousel{position:relative;display:block;width:100%}.carousel__prev,.carousel__next{position:absolute;bottom:-15%;transition:transform 0.25s ease}.carousel__prev i,.carousel__next i{font-size:var(--emw--font-size-x-large, 60px);color:var(--emw--color-white, #ffffff);cursor:pointer}.carousel__prev:hover,.carousel__next:hover{transform:scale(1.25)}.carousel__prev{left:40%}.carousel__next{right:40%}.CarouselBody{width:100%;padding:80px 0px;overflow:hidden}.CarouselSlider{position:relative;transition:transform 1s ease-in-out;background:transparent;display:flex;align-items:center}.CarouselSliderItem{opacity:0.7;position:relative;display:block;float:left;box-sizing:border-box}.Item3dFrame{position:relative;width:100%;height:100%;transition:transform 1s ease-in-out, box-shadow 0.5s ease-in-out;transform-style:preserve-3d;display:flex;flex-direction:column;justify-content:flex-end;border-radius:var(--emw--button-border-radius, 20px)}.Item3dFrameImg{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;border-radius:var(--emw--button-border-radius, 20px)}.CarouselSliderItemActive .Item3dFrame{animation:glow 4s linear infinite}@keyframes glow{0%{box-shadow:0 0 50px 5px var(--emw--color-primary, #22b04e)}50%{box-shadow:0 0 50px 5px var(--emw--color-secondary, #f2711c)}100%{box-shadow:0 0 50px 5px var(--emw--color-primary, #22b04e)}}.TopSection{display:flex;justify-content:flex-start;align-items:center}.JoinButton{background-image:linear-gradient(to bottom, color-mix(in srgb, var(--emw--color-primary, #22b04e) 80%, black 20%), var(--emw--color-primary, #22b04e), color-mix(in srgb, var(--emw--color-primary, #22b04e) 80%, var(--emw--color-white, #ffffff) 30%));color:var(--emw--color-typography, #ffffff);height:42px;width:110px;border-radius:var(--emw--button-border-radius, 20px);cursor:pointer;font-size:var(--emw--size-small, 14px);border:2px solid var(--emw--button-border-color, #0e5924);display:flex;align-items:center;justify-content:center;gap:2px}.ItemSection{padding:12px 20px;display:flex;flex-direction:column;gap:2px;z-index:1}.Item3dFrameImgSkeleton{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:var(--emw--button-border-radius, 20px);animation:skeleton-loading 1s linear infinite alternate}@keyframes skeleton-loading{0%{background-color:var(--emw-skeleton-slider-primary-color, #e0e0e0)}100%{background-color:var(--emw-skeleton-slider-secondary-color, #f0f0f0)}}.Divider{border:none;border-top:2px solid var(--emw--color-white, #ffffff);width:100%;opacity:0.3}.BottomSection{display:flex;justify-content:flex-start;align-items:flex-start;width:50%;height:60px}.BottomSection h3{font-size:var(--emw--size-large, 24px);margin:0;color:var(--emw--color-typography, #ffffff)}.CarouselNavigation{display:flex;justify-content:center;align-items:center;position:absolute;bottom:20px;left:50%;transform:translateX(-50%)}.CarouselNavigationBullet{width:12px;height:12px;background-color:var(--emw--color-grey-100, rgba(255, 255, 255, 0.5));border-radius:50%;margin:0 5px;cursor:pointer;transition:background-color 0.3s}.CarouselNavigationBulletActive{background-color:var(--emw--color-primary, #22b04e)}.CarouselSliderItemActive{opacity:1}";
|
|
196
196
|
const CarouselComponentStyle0 = carouselComponentCss;
|
|
197
197
|
|
|
198
198
|
const CarouselComponent = class {
|
|
@@ -202,6 +202,9 @@ const CarouselComponent = class {
|
|
|
202
202
|
this.isMobile = isMobile(this.userAgent);
|
|
203
203
|
this.touchStartX = 0;
|
|
204
204
|
this.touchEndX = 0;
|
|
205
|
+
this.bannersSkeleton = Array.from({ length: 5 }, (_, i) => ({
|
|
206
|
+
id: i
|
|
207
|
+
}));
|
|
205
208
|
this.moveSliderIndex = (index) => {
|
|
206
209
|
if (index < 1)
|
|
207
210
|
index = this.content.length;
|
|
@@ -246,6 +249,7 @@ const CarouselComponent = class {
|
|
|
246
249
|
}
|
|
247
250
|
return source;
|
|
248
251
|
};
|
|
252
|
+
this.isLoading = false;
|
|
249
253
|
this.mbSource = undefined;
|
|
250
254
|
this.clientStyling = '';
|
|
251
255
|
this.clientStylingUrl = '';
|
|
@@ -420,27 +424,33 @@ const CarouselComponent = class {
|
|
|
420
424
|
CarouselNavigationBulletActive: index$1 === this.currIndex - 1
|
|
421
425
|
}, onClick: this.moveSliderIndex.bind(this, index$1 + 1) })))));
|
|
422
426
|
}
|
|
427
|
+
renderContent(item, index$1, isSkeleton) {
|
|
428
|
+
const isActive = index$1 === this.currIndex - 1;
|
|
429
|
+
const buttonStyle = !isActive ? { cursor: 'unset' } : {};
|
|
430
|
+
const activeItemHeight = !isActive ? { height: `${this.height - 70}px` } : { height: `${this.height}px` };
|
|
431
|
+
return (index.h("div", { class: {
|
|
432
|
+
CarouselSliderItem: true,
|
|
433
|
+
CarouselSliderItemActive: isActive
|
|
434
|
+
}, onClick: isSkeleton ? undefined : this.changeSlider.bind(this, index$1), style: activeItemHeight }, index.h("div", { class: "Item3dFrame", style: {
|
|
435
|
+
transform: this.getTransformStyle(index$1)
|
|
436
|
+
} }, isSkeleton && (index.h("div", { class: "Item3dFrameImgSkeleton", style: {
|
|
437
|
+
position: 'absolute',
|
|
438
|
+
top: '0',
|
|
439
|
+
left: '0',
|
|
440
|
+
width: '100%',
|
|
441
|
+
height: '100%',
|
|
442
|
+
backgroundColor: '#eee',
|
|
443
|
+
animation: 'pulse 1.5s infinite'
|
|
444
|
+
} })), !isSkeleton && (index.h("img", { src: this.setImage(item.image), loading: "lazy", class: "Item3dFrameImg" })), index.h("div", { class: "ItemSection" }, index.h("div", { class: "TopSection" }, index.h("button", { onClick: () => {
|
|
445
|
+
if (isActive && !isSkeleton) {
|
|
446
|
+
this.navigationTo(item.url, item.targetType, item.externalLink);
|
|
447
|
+
}
|
|
448
|
+
}, style: buttonStyle, class: "JoinButton" }, index.h("span", null, translate('joinNow', this.language)), index.h("svg", { width: "12", height: "12", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { d: "M5 3L10 8L5 13", stroke: "white", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" })))), index.h("hr", { class: "Divider" }), index.h("div", { class: "BottomSection" }, index.h("h3", null, isSkeleton ? '' : item.title.toUpperCase()))))));
|
|
449
|
+
}
|
|
423
450
|
render() {
|
|
424
|
-
return (index.h("div", { key: '
|
|
425
|
-
|
|
426
|
-
|
|
427
|
-
const activeItemHeight = !isActive
|
|
428
|
-
? { height: `${this.height - 70}px` }
|
|
429
|
-
: { height: `${this.height}px` };
|
|
430
|
-
return (index.h("div", { class: {
|
|
431
|
-
CarouselSliderItem: true,
|
|
432
|
-
CarouselSliderItemActive: isActive
|
|
433
|
-
}, onClick: this.changeSlider.bind(this, index$1), style: activeItemHeight }, index.h("div", { class: "Item3dFrame", style: {
|
|
434
|
-
backgroundSize: 'cover',
|
|
435
|
-
backgroundPosition: 'center',
|
|
436
|
-
backgroundImage: `url(${this.setImage(item.image)})`,
|
|
437
|
-
transform: this.getTransformStyle(index$1)
|
|
438
|
-
} }, index.h("div", { class: "ItemSection" }, index.h("div", { class: "TopSection" }, index.h("button", { onClick: () => {
|
|
439
|
-
if (isActive) {
|
|
440
|
-
this.navigationTo(item.url, item.targetType, item.externalLink);
|
|
441
|
-
}
|
|
442
|
-
}, style: buttonStyle, class: "JoinButton" }, index.h("span", null, translate('joinNow', this.language)), index.h("svg", { width: "12", height: "12", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { d: "M5 3L10 8L5 13", stroke: "white", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" })))), index.h("hr", { class: "Divider" }), index.h("div", { class: "BottomSection" }, index.h("h3", null, item.title.toUpperCase()))))));
|
|
443
|
-
}))), this.bulletNavigation ? this.renderNavigation() : null)));
|
|
451
|
+
return (index.h("div", { key: 'e6cca32bbba354c00253adc393dc410b3dd554d0', ref: (el) => (this.stylingContainer = el) }, index.h("div", { key: '0d05ecb31e02065e1876730bbd99dad6144dc315', class: "Carousel" }, index.h("div", { key: 'd970866951f1c8b5687dcca6b7906570fa69af48', class: "CarouselBody" }, index.h("div", { key: '722ce34d95a2913591fdf8173e0ccf24de9cb81d', class: "CarouselSlider", ref: (el) => (this.sliderElement = el), style: { width: `${this.totalWidth}px`, transform: this.getSliderTransformStyle() } }, this.isLoading
|
|
452
|
+
? this.bannersSkeleton.map((_, index) => this.renderContent(null, index, true))
|
|
453
|
+
: this.content.map((item, index) => this.renderContent(item, index, false)))), this.bulletNavigation ? this.renderNavigation() : null)));
|
|
444
454
|
}
|
|
445
455
|
get el() { return index.getElement(this); }
|
|
446
456
|
static get watchers() { return {
|
|
@@ -469,9 +479,9 @@ const GeneralSliderNavigation = class {
|
|
|
469
479
|
this.slideTimer = undefined;
|
|
470
480
|
this.translationUrl = '';
|
|
471
481
|
this.startFrom = 'middle';
|
|
472
|
-
this.isLoading = true;
|
|
473
482
|
this.hasErrors = false;
|
|
474
483
|
this.device = '';
|
|
484
|
+
this.isLoading = false;
|
|
475
485
|
}
|
|
476
486
|
handleClientStylingChange(newValue, oldValue) {
|
|
477
487
|
if (newValue != oldValue) {
|
|
@@ -525,8 +535,8 @@ const GeneralSliderNavigation = class {
|
|
|
525
535
|
url.searchParams.append('env', this.cmsEnv);
|
|
526
536
|
url.searchParams.append('userRoles', this.userRoles);
|
|
527
537
|
url.searchParams.append('device', getDevicePlatform());
|
|
538
|
+
this.isLoading = true;
|
|
528
539
|
return new Promise((resolve, reject) => {
|
|
529
|
-
this.isLoading = true;
|
|
530
540
|
fetch(url.href)
|
|
531
541
|
.then((res) => res.json())
|
|
532
542
|
.then((menuSliderData) => {
|
|
@@ -536,7 +546,8 @@ const GeneralSliderNavigation = class {
|
|
|
536
546
|
console.error(err);
|
|
537
547
|
this.hasErrors = true;
|
|
538
548
|
reject(err);
|
|
539
|
-
})
|
|
549
|
+
})
|
|
550
|
+
.finally(() => {
|
|
540
551
|
this.isLoading = false;
|
|
541
552
|
});
|
|
542
553
|
});
|
|
@@ -545,9 +556,7 @@ const GeneralSliderNavigation = class {
|
|
|
545
556
|
if (this.hasErrors) {
|
|
546
557
|
return (index.h("div", { class: "PageError" }, index.h("div", { class: "TitleError" }, translate('error', this.language))));
|
|
547
558
|
}
|
|
548
|
-
|
|
549
|
-
return (index.h("div", { ref: el => this.stylingContainer = el }, index.h("carousel-component", { content: this.sliderData, language: this.language, "mb-source": this.mbSource, "client-styling": this.clientStyling, "client-styling-url": this.clientStylingUrl, "bullet-navigation": this.bulletNavigation, "slide-timer": this.slideTimer, "translation-url": this.translationUrl, "start-from": this.startFrom })));
|
|
550
|
-
}
|
|
559
|
+
return (index.h("div", { ref: (el) => (this.stylingContainer = el) }, index.h("carousel-component", { "is-loading": this.isLoading, content: this.sliderData, language: this.language, "mb-source": this.mbSource, "client-styling": this.clientStyling, "client-styling-url": this.clientStylingUrl, "bullet-navigation": this.bulletNavigation, "slide-timer": this.slideTimer, "translation-url": this.translationUrl, "start-from": this.startFrom })));
|
|
551
560
|
}
|
|
552
561
|
static get watchers() { return {
|
|
553
562
|
"clientStyling": ["handleClientStylingChange"],
|
|
@@ -19,7 +19,7 @@ var patchBrowser = () => {
|
|
|
19
19
|
|
|
20
20
|
patchBrowser().then(async (options) => {
|
|
21
21
|
await appGlobals.globalScripts();
|
|
22
|
-
return index.bootstrapLazy([["carousel-component_2.cjs",[[1,"general-slider-navigation",{"mbSource":[1,"mb-source"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"cmsEndpoint":[513,"cms-endpoint"],"cmsEnv":[513,"cms-env"],"language":[513],"userRoles":[513,"user-roles"],"bulletNavigation":[516,"bullet-navigation"],"slideTimer":[514,"slide-timer"],"translationUrl":[513,"translation-url"],"startFrom":[513,"start-from"],"
|
|
22
|
+
return index.bootstrapLazy([["carousel-component_2.cjs",[[1,"general-slider-navigation",{"mbSource":[1,"mb-source"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"cmsEndpoint":[513,"cms-endpoint"],"cmsEnv":[513,"cms-env"],"language":[513],"userRoles":[513,"user-roles"],"bulletNavigation":[516,"bullet-navigation"],"slideTimer":[514,"slide-timer"],"translationUrl":[513,"translation-url"],"startFrom":[513,"start-from"],"hasErrors":[32],"device":[32],"isLoading":[32]},null,{"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingChangeURL"],"translationUrl":["handleNewTranslations"],"cmsEndpoint":["watchEndpoint"],"language":["watchEndpoint"]}],[1,"carousel-component",{"isLoading":[516,"is-loading"],"mbSource":[1,"mb-source"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"content":[16],"bulletNavigation":[516,"bullet-navigation"],"language":[513],"slideTimer":[514,"slide-timer"],"translationUrl":[513,"translation-url"],"startFrom":[513,"start-from"],"currIndex":[32],"width":[32],"height":[32],"margin":[32],"sliderElement":[32],"totalWidth":[32],"device":[32],"innerWidth":[32]},null,{"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingChangeURL"],"translationUrl":["handleNewTranslations"],"content":["handleContentChange"]}]]]], options);
|
|
23
23
|
});
|
|
24
24
|
|
|
25
25
|
exports.setNonce = index.setNonce;
|
package/dist/cjs/loader.cjs.js
CHANGED
|
@@ -8,7 +8,7 @@ const appGlobals = require('./app-globals-3a1e7e63.js');
|
|
|
8
8
|
const defineCustomElements = async (win, options) => {
|
|
9
9
|
if (typeof window === 'undefined') return undefined;
|
|
10
10
|
await appGlobals.globalScripts();
|
|
11
|
-
return index.bootstrapLazy([["carousel-component_2.cjs",[[1,"general-slider-navigation",{"mbSource":[1,"mb-source"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"cmsEndpoint":[513,"cms-endpoint"],"cmsEnv":[513,"cms-env"],"language":[513],"userRoles":[513,"user-roles"],"bulletNavigation":[516,"bullet-navigation"],"slideTimer":[514,"slide-timer"],"translationUrl":[513,"translation-url"],"startFrom":[513,"start-from"],"
|
|
11
|
+
return index.bootstrapLazy([["carousel-component_2.cjs",[[1,"general-slider-navigation",{"mbSource":[1,"mb-source"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"cmsEndpoint":[513,"cms-endpoint"],"cmsEnv":[513,"cms-env"],"language":[513],"userRoles":[513,"user-roles"],"bulletNavigation":[516,"bullet-navigation"],"slideTimer":[514,"slide-timer"],"translationUrl":[513,"translation-url"],"startFrom":[513,"start-from"],"hasErrors":[32],"device":[32],"isLoading":[32]},null,{"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingChangeURL"],"translationUrl":["handleNewTranslations"],"cmsEndpoint":["watchEndpoint"],"language":["watchEndpoint"]}],[1,"carousel-component",{"isLoading":[516,"is-loading"],"mbSource":[1,"mb-source"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"content":[16],"bulletNavigation":[516,"bullet-navigation"],"language":[513],"slideTimer":[514,"slide-timer"],"translationUrl":[513,"translation-url"],"startFrom":[513,"start-from"],"currIndex":[32],"width":[32],"height":[32],"margin":[32],"sliderElement":[32],"totalWidth":[32],"device":[32],"innerWidth":[32]},null,{"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingChangeURL"],"translationUrl":["handleNewTranslations"],"content":["handleContentChange"]}]]]], options);
|
|
12
12
|
};
|
|
13
13
|
|
|
14
14
|
exports.setNonce = index.setNonce;
|
|
@@ -3,7 +3,8 @@
|
|
|
3
3
|
font-family: "Roboto", sans-serif;
|
|
4
4
|
}
|
|
5
5
|
|
|
6
|
-
html,
|
|
6
|
+
html,
|
|
7
|
+
body {
|
|
7
8
|
padding: 0;
|
|
8
9
|
margin: 0;
|
|
9
10
|
width: 100%;
|
|
@@ -16,19 +17,22 @@ html, body {
|
|
|
16
17
|
width: 100%;
|
|
17
18
|
}
|
|
18
19
|
|
|
19
|
-
.carousel__prev,
|
|
20
|
+
.carousel__prev,
|
|
21
|
+
.carousel__next {
|
|
20
22
|
position: absolute;
|
|
21
23
|
bottom: -15%;
|
|
22
24
|
transition: transform 0.25s ease;
|
|
23
25
|
}
|
|
24
26
|
|
|
25
|
-
.carousel__prev i,
|
|
27
|
+
.carousel__prev i,
|
|
28
|
+
.carousel__next i {
|
|
26
29
|
font-size: var(--emw--font-size-x-large, 60px);
|
|
27
|
-
color: var(--emw--color-white, #
|
|
30
|
+
color: var(--emw--color-white, #ffffff);
|
|
28
31
|
cursor: pointer;
|
|
29
32
|
}
|
|
30
33
|
|
|
31
|
-
.carousel__prev:hover,
|
|
34
|
+
.carousel__prev:hover,
|
|
35
|
+
.carousel__next:hover {
|
|
32
36
|
transform: scale(1.25);
|
|
33
37
|
}
|
|
34
38
|
|
|
@@ -74,19 +78,29 @@ html, body {
|
|
|
74
78
|
border-radius: var(--emw--button-border-radius, 20px);
|
|
75
79
|
}
|
|
76
80
|
|
|
81
|
+
.Item3dFrameImg {
|
|
82
|
+
position: absolute;
|
|
83
|
+
top: 0;
|
|
84
|
+
left: 0;
|
|
85
|
+
width: 100%;
|
|
86
|
+
height: 100%;
|
|
87
|
+
object-fit: cover;
|
|
88
|
+
border-radius: var(--emw--button-border-radius, 20px);
|
|
89
|
+
}
|
|
90
|
+
|
|
77
91
|
.CarouselSliderItemActive .Item3dFrame {
|
|
78
92
|
animation: glow 4s linear infinite;
|
|
79
93
|
}
|
|
80
94
|
|
|
81
95
|
@keyframes glow {
|
|
82
96
|
0% {
|
|
83
|
-
box-shadow: 0 0 50px 5px var(--emw--color-primary, #
|
|
97
|
+
box-shadow: 0 0 50px 5px var(--emw--color-primary, #22b04e);
|
|
84
98
|
}
|
|
85
99
|
50% {
|
|
86
|
-
box-shadow: 0 0 50px 5px var(--emw--color-secondary, #
|
|
100
|
+
box-shadow: 0 0 50px 5px var(--emw--color-secondary, #f2711c);
|
|
87
101
|
}
|
|
88
102
|
100% {
|
|
89
|
-
box-shadow: 0 0 50px 5px var(--emw--color-primary, #
|
|
103
|
+
box-shadow: 0 0 50px 5px var(--emw--color-primary, #22b04e);
|
|
90
104
|
}
|
|
91
105
|
}
|
|
92
106
|
.TopSection {
|
|
@@ -96,14 +110,14 @@ html, body {
|
|
|
96
110
|
}
|
|
97
111
|
|
|
98
112
|
.JoinButton {
|
|
99
|
-
background-image: linear-gradient(to bottom, color-mix(in srgb, var(--emw--color-primary, #
|
|
100
|
-
color: var(--emw--color-typography, #
|
|
113
|
+
background-image: linear-gradient(to bottom, color-mix(in srgb, var(--emw--color-primary, #22b04e) 80%, black 20%), var(--emw--color-primary, #22b04e), color-mix(in srgb, var(--emw--color-primary, #22b04e) 80%, var(--emw--color-white, #ffffff) 30%));
|
|
114
|
+
color: var(--emw--color-typography, #ffffff);
|
|
101
115
|
height: 42px;
|
|
102
116
|
width: 110px;
|
|
103
117
|
border-radius: var(--emw--button-border-radius, 20px);
|
|
104
118
|
cursor: pointer;
|
|
105
119
|
font-size: var(--emw--size-small, 14px);
|
|
106
|
-
border: 2px solid var(--emw--button-border-color, #
|
|
120
|
+
border: 2px solid var(--emw--button-border-color, #0e5924);
|
|
107
121
|
display: flex;
|
|
108
122
|
align-items: center;
|
|
109
123
|
justify-content: center;
|
|
@@ -115,11 +129,30 @@ html, body {
|
|
|
115
129
|
display: flex;
|
|
116
130
|
flex-direction: column;
|
|
117
131
|
gap: 2px;
|
|
132
|
+
z-index: 1;
|
|
133
|
+
}
|
|
134
|
+
|
|
135
|
+
.Item3dFrameImgSkeleton {
|
|
136
|
+
position: absolute;
|
|
137
|
+
top: 0;
|
|
138
|
+
left: 0;
|
|
139
|
+
width: 100%;
|
|
140
|
+
height: 100%;
|
|
141
|
+
border-radius: var(--emw--button-border-radius, 20px);
|
|
142
|
+
animation: skeleton-loading 1s linear infinite alternate;
|
|
118
143
|
}
|
|
119
144
|
|
|
145
|
+
@keyframes skeleton-loading {
|
|
146
|
+
0% {
|
|
147
|
+
background-color: var(--emw-skeleton-slider-primary-color, #e0e0e0);
|
|
148
|
+
}
|
|
149
|
+
100% {
|
|
150
|
+
background-color: var(--emw-skeleton-slider-secondary-color, #f0f0f0);
|
|
151
|
+
}
|
|
152
|
+
}
|
|
120
153
|
.Divider {
|
|
121
154
|
border: none;
|
|
122
|
-
border-top: 2px solid var(--emw--color-white, #
|
|
155
|
+
border-top: 2px solid var(--emw--color-white, #ffffff);
|
|
123
156
|
width: 100%;
|
|
124
157
|
opacity: 0.3;
|
|
125
158
|
}
|
|
@@ -135,7 +168,7 @@ html, body {
|
|
|
135
168
|
.BottomSection h3 {
|
|
136
169
|
font-size: var(--emw--size-large, 24px);
|
|
137
170
|
margin: 0;
|
|
138
|
-
color: var(--emw--color-typography, #
|
|
171
|
+
color: var(--emw--color-typography, #ffffff);
|
|
139
172
|
}
|
|
140
173
|
|
|
141
174
|
.CarouselNavigation {
|
|
@@ -159,7 +192,7 @@ html, body {
|
|
|
159
192
|
}
|
|
160
193
|
|
|
161
194
|
.CarouselNavigationBulletActive {
|
|
162
|
-
background-color: var(--emw--color-primary, #
|
|
195
|
+
background-color: var(--emw--color-primary, #22b04e);
|
|
163
196
|
}
|
|
164
197
|
|
|
165
198
|
.CarouselSliderItemActive {
|
|
@@ -9,6 +9,9 @@ export class CarouselComponent {
|
|
|
9
9
|
this.isMobile = isMobile(this.userAgent);
|
|
10
10
|
this.touchStartX = 0;
|
|
11
11
|
this.touchEndX = 0;
|
|
12
|
+
this.bannersSkeleton = Array.from({ length: 5 }, (_, i) => ({
|
|
13
|
+
id: i
|
|
14
|
+
}));
|
|
12
15
|
this.moveSliderIndex = (index) => {
|
|
13
16
|
if (index < 1)
|
|
14
17
|
index = this.content.length;
|
|
@@ -53,6 +56,7 @@ export class CarouselComponent {
|
|
|
53
56
|
}
|
|
54
57
|
return source;
|
|
55
58
|
};
|
|
59
|
+
this.isLoading = false;
|
|
56
60
|
this.mbSource = undefined;
|
|
57
61
|
this.clientStyling = '';
|
|
58
62
|
this.clientStylingUrl = '';
|
|
@@ -227,27 +231,33 @@ export class CarouselComponent {
|
|
|
227
231
|
CarouselNavigationBulletActive: index === this.currIndex - 1
|
|
228
232
|
}, onClick: this.moveSliderIndex.bind(this, index + 1) })))));
|
|
229
233
|
}
|
|
234
|
+
renderContent(item, index, isSkeleton) {
|
|
235
|
+
const isActive = index === this.currIndex - 1;
|
|
236
|
+
const buttonStyle = !isActive ? { cursor: 'unset' } : {};
|
|
237
|
+
const activeItemHeight = !isActive ? { height: `${this.height - 70}px` } : { height: `${this.height}px` };
|
|
238
|
+
return (h("div", { class: {
|
|
239
|
+
CarouselSliderItem: true,
|
|
240
|
+
CarouselSliderItemActive: isActive
|
|
241
|
+
}, onClick: isSkeleton ? undefined : this.changeSlider.bind(this, index), style: activeItemHeight }, h("div", { class: "Item3dFrame", style: {
|
|
242
|
+
transform: this.getTransformStyle(index)
|
|
243
|
+
} }, isSkeleton && (h("div", { class: "Item3dFrameImgSkeleton", style: {
|
|
244
|
+
position: 'absolute',
|
|
245
|
+
top: '0',
|
|
246
|
+
left: '0',
|
|
247
|
+
width: '100%',
|
|
248
|
+
height: '100%',
|
|
249
|
+
backgroundColor: '#eee',
|
|
250
|
+
animation: 'pulse 1.5s infinite'
|
|
251
|
+
} })), !isSkeleton && (h("img", { src: this.setImage(item.image), loading: "lazy", class: "Item3dFrameImg" })), h("div", { class: "ItemSection" }, h("div", { class: "TopSection" }, h("button", { onClick: () => {
|
|
252
|
+
if (isActive && !isSkeleton) {
|
|
253
|
+
this.navigationTo(item.url, item.targetType, item.externalLink);
|
|
254
|
+
}
|
|
255
|
+
}, style: buttonStyle, class: "JoinButton" }, h("span", null, translate('joinNow', this.language)), h("svg", { width: "12", height: "12", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M5 3L10 8L5 13", stroke: "white", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" })))), h("hr", { class: "Divider" }), h("div", { class: "BottomSection" }, h("h3", null, isSkeleton ? '' : item.title.toUpperCase()))))));
|
|
256
|
+
}
|
|
230
257
|
render() {
|
|
231
|
-
return (h("div", { key: '
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
const activeItemHeight = !isActive
|
|
235
|
-
? { height: `${this.height - 70}px` }
|
|
236
|
-
: { height: `${this.height}px` };
|
|
237
|
-
return (h("div", { class: {
|
|
238
|
-
CarouselSliderItem: true,
|
|
239
|
-
CarouselSliderItemActive: isActive
|
|
240
|
-
}, onClick: this.changeSlider.bind(this, index), style: activeItemHeight }, h("div", { class: "Item3dFrame", style: {
|
|
241
|
-
backgroundSize: 'cover',
|
|
242
|
-
backgroundPosition: 'center',
|
|
243
|
-
backgroundImage: `url(${this.setImage(item.image)})`,
|
|
244
|
-
transform: this.getTransformStyle(index)
|
|
245
|
-
} }, h("div", { class: "ItemSection" }, h("div", { class: "TopSection" }, h("button", { onClick: () => {
|
|
246
|
-
if (isActive) {
|
|
247
|
-
this.navigationTo(item.url, item.targetType, item.externalLink);
|
|
248
|
-
}
|
|
249
|
-
}, style: buttonStyle, class: "JoinButton" }, h("span", null, translate('joinNow', this.language)), h("svg", { width: "12", height: "12", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M5 3L10 8L5 13", stroke: "white", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" })))), h("hr", { class: "Divider" }), h("div", { class: "BottomSection" }, h("h3", null, item.title.toUpperCase()))))));
|
|
250
|
-
}))), this.bulletNavigation ? this.renderNavigation() : null)));
|
|
258
|
+
return (h("div", { key: 'e6cca32bbba354c00253adc393dc410b3dd554d0', ref: (el) => (this.stylingContainer = el) }, h("div", { key: '0d05ecb31e02065e1876730bbd99dad6144dc315', class: "Carousel" }, h("div", { key: 'd970866951f1c8b5687dcca6b7906570fa69af48', class: "CarouselBody" }, h("div", { key: '722ce34d95a2913591fdf8173e0ccf24de9cb81d', class: "CarouselSlider", ref: (el) => (this.sliderElement = el), style: { width: `${this.totalWidth}px`, transform: this.getSliderTransformStyle() } }, this.isLoading
|
|
259
|
+
? this.bannersSkeleton.map((_, index) => this.renderContent(null, index, true))
|
|
260
|
+
: this.content.map((item, index) => this.renderContent(item, index, false)))), this.bulletNavigation ? this.renderNavigation() : null)));
|
|
251
261
|
}
|
|
252
262
|
static get is() { return "carousel-component"; }
|
|
253
263
|
static get encapsulation() { return "shadow"; }
|
|
@@ -263,6 +273,24 @@ export class CarouselComponent {
|
|
|
263
273
|
}
|
|
264
274
|
static get properties() {
|
|
265
275
|
return {
|
|
276
|
+
"isLoading": {
|
|
277
|
+
"type": "boolean",
|
|
278
|
+
"mutable": false,
|
|
279
|
+
"complexType": {
|
|
280
|
+
"original": "boolean",
|
|
281
|
+
"resolved": "boolean",
|
|
282
|
+
"references": {}
|
|
283
|
+
},
|
|
284
|
+
"required": false,
|
|
285
|
+
"optional": false,
|
|
286
|
+
"docs": {
|
|
287
|
+
"tags": [],
|
|
288
|
+
"text": "Loading APi"
|
|
289
|
+
},
|
|
290
|
+
"attribute": "is-loading",
|
|
291
|
+
"reflect": true,
|
|
292
|
+
"defaultValue": "false"
|
|
293
|
+
},
|
|
266
294
|
"mbSource": {
|
|
267
295
|
"type": "string",
|
|
268
296
|
"mutable": false,
|
|
@@ -15,9 +15,9 @@ export class GeneralSliderNavigation {
|
|
|
15
15
|
this.slideTimer = undefined;
|
|
16
16
|
this.translationUrl = '';
|
|
17
17
|
this.startFrom = 'middle';
|
|
18
|
-
this.isLoading = true;
|
|
19
18
|
this.hasErrors = false;
|
|
20
19
|
this.device = '';
|
|
20
|
+
this.isLoading = false;
|
|
21
21
|
}
|
|
22
22
|
handleClientStylingChange(newValue, oldValue) {
|
|
23
23
|
if (newValue != oldValue) {
|
|
@@ -71,8 +71,8 @@ export class GeneralSliderNavigation {
|
|
|
71
71
|
url.searchParams.append('env', this.cmsEnv);
|
|
72
72
|
url.searchParams.append('userRoles', this.userRoles);
|
|
73
73
|
url.searchParams.append('device', getDevicePlatform());
|
|
74
|
+
this.isLoading = true;
|
|
74
75
|
return new Promise((resolve, reject) => {
|
|
75
|
-
this.isLoading = true;
|
|
76
76
|
fetch(url.href)
|
|
77
77
|
.then((res) => res.json())
|
|
78
78
|
.then((menuSliderData) => {
|
|
@@ -82,7 +82,8 @@ export class GeneralSliderNavigation {
|
|
|
82
82
|
console.error(err);
|
|
83
83
|
this.hasErrors = true;
|
|
84
84
|
reject(err);
|
|
85
|
-
})
|
|
85
|
+
})
|
|
86
|
+
.finally(() => {
|
|
86
87
|
this.isLoading = false;
|
|
87
88
|
});
|
|
88
89
|
});
|
|
@@ -91,9 +92,7 @@ export class GeneralSliderNavigation {
|
|
|
91
92
|
if (this.hasErrors) {
|
|
92
93
|
return (h("div", { class: "PageError" }, h("div", { class: "TitleError" }, translate('error', this.language))));
|
|
93
94
|
}
|
|
94
|
-
|
|
95
|
-
return (h("div", { ref: el => this.stylingContainer = el }, h("carousel-component", { content: this.sliderData, language: this.language, "mb-source": this.mbSource, "client-styling": this.clientStyling, "client-styling-url": this.clientStylingUrl, "bullet-navigation": this.bulletNavigation, "slide-timer": this.slideTimer, "translation-url": this.translationUrl, "start-from": this.startFrom })));
|
|
96
|
-
}
|
|
95
|
+
return (h("div", { ref: (el) => (this.stylingContainer = el) }, h("carousel-component", { "is-loading": this.isLoading, content: this.sliderData, language: this.language, "mb-source": this.mbSource, "client-styling": this.clientStyling, "client-styling-url": this.clientStylingUrl, "bullet-navigation": this.bulletNavigation, "slide-timer": this.slideTimer, "translation-url": this.translationUrl, "start-from": this.startFrom })));
|
|
97
96
|
}
|
|
98
97
|
static get is() { return "general-slider-navigation"; }
|
|
99
98
|
static get encapsulation() { return "shadow"; }
|
|
@@ -308,9 +307,9 @@ export class GeneralSliderNavigation {
|
|
|
308
307
|
}
|
|
309
308
|
static get states() {
|
|
310
309
|
return {
|
|
311
|
-
"isLoading": {},
|
|
312
310
|
"hasErrors": {},
|
|
313
|
-
"device": {}
|
|
311
|
+
"device": {},
|
|
312
|
+
"isLoading": {}
|
|
314
313
|
};
|
|
315
314
|
}
|
|
316
315
|
static get watchers() {
|
|
@@ -188,7 +188,7 @@ const debounce = (func, delay) => {
|
|
|
188
188
|
};
|
|
189
189
|
};
|
|
190
190
|
|
|
191
|
-
const carouselComponentCss = ":host{display:block;font-family:\"Roboto\", sans-serif}html,body{padding:0;margin:0;width:100%;height:100%}.Carousel{position:relative;display:block;width:100%}.carousel__prev,.carousel__next{position:absolute;bottom:-15%;transition:transform 0.25s ease}.carousel__prev i,.carousel__next i{font-size:var(--emw--font-size-x-large, 60px);color:var(--emw--color-white, #
|
|
191
|
+
const carouselComponentCss = ":host{display:block;font-family:\"Roboto\", sans-serif}html,body{padding:0;margin:0;width:100%;height:100%}.Carousel{position:relative;display:block;width:100%}.carousel__prev,.carousel__next{position:absolute;bottom:-15%;transition:transform 0.25s ease}.carousel__prev i,.carousel__next i{font-size:var(--emw--font-size-x-large, 60px);color:var(--emw--color-white, #ffffff);cursor:pointer}.carousel__prev:hover,.carousel__next:hover{transform:scale(1.25)}.carousel__prev{left:40%}.carousel__next{right:40%}.CarouselBody{width:100%;padding:80px 0px;overflow:hidden}.CarouselSlider{position:relative;transition:transform 1s ease-in-out;background:transparent;display:flex;align-items:center}.CarouselSliderItem{opacity:0.7;position:relative;display:block;float:left;box-sizing:border-box}.Item3dFrame{position:relative;width:100%;height:100%;transition:transform 1s ease-in-out, box-shadow 0.5s ease-in-out;transform-style:preserve-3d;display:flex;flex-direction:column;justify-content:flex-end;border-radius:var(--emw--button-border-radius, 20px)}.Item3dFrameImg{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;border-radius:var(--emw--button-border-radius, 20px)}.CarouselSliderItemActive .Item3dFrame{animation:glow 4s linear infinite}@keyframes glow{0%{box-shadow:0 0 50px 5px var(--emw--color-primary, #22b04e)}50%{box-shadow:0 0 50px 5px var(--emw--color-secondary, #f2711c)}100%{box-shadow:0 0 50px 5px var(--emw--color-primary, #22b04e)}}.TopSection{display:flex;justify-content:flex-start;align-items:center}.JoinButton{background-image:linear-gradient(to bottom, color-mix(in srgb, var(--emw--color-primary, #22b04e) 80%, black 20%), var(--emw--color-primary, #22b04e), color-mix(in srgb, var(--emw--color-primary, #22b04e) 80%, var(--emw--color-white, #ffffff) 30%));color:var(--emw--color-typography, #ffffff);height:42px;width:110px;border-radius:var(--emw--button-border-radius, 20px);cursor:pointer;font-size:var(--emw--size-small, 14px);border:2px solid var(--emw--button-border-color, #0e5924);display:flex;align-items:center;justify-content:center;gap:2px}.ItemSection{padding:12px 20px;display:flex;flex-direction:column;gap:2px;z-index:1}.Item3dFrameImgSkeleton{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:var(--emw--button-border-radius, 20px);animation:skeleton-loading 1s linear infinite alternate}@keyframes skeleton-loading{0%{background-color:var(--emw-skeleton-slider-primary-color, #e0e0e0)}100%{background-color:var(--emw-skeleton-slider-secondary-color, #f0f0f0)}}.Divider{border:none;border-top:2px solid var(--emw--color-white, #ffffff);width:100%;opacity:0.3}.BottomSection{display:flex;justify-content:flex-start;align-items:flex-start;width:50%;height:60px}.BottomSection h3{font-size:var(--emw--size-large, 24px);margin:0;color:var(--emw--color-typography, #ffffff)}.CarouselNavigation{display:flex;justify-content:center;align-items:center;position:absolute;bottom:20px;left:50%;transform:translateX(-50%)}.CarouselNavigationBullet{width:12px;height:12px;background-color:var(--emw--color-grey-100, rgba(255, 255, 255, 0.5));border-radius:50%;margin:0 5px;cursor:pointer;transition:background-color 0.3s}.CarouselNavigationBulletActive{background-color:var(--emw--color-primary, #22b04e)}.CarouselSliderItemActive{opacity:1}";
|
|
192
192
|
const CarouselComponentStyle0 = carouselComponentCss;
|
|
193
193
|
|
|
194
194
|
const CarouselComponent = class {
|
|
@@ -198,6 +198,9 @@ const CarouselComponent = class {
|
|
|
198
198
|
this.isMobile = isMobile(this.userAgent);
|
|
199
199
|
this.touchStartX = 0;
|
|
200
200
|
this.touchEndX = 0;
|
|
201
|
+
this.bannersSkeleton = Array.from({ length: 5 }, (_, i) => ({
|
|
202
|
+
id: i
|
|
203
|
+
}));
|
|
201
204
|
this.moveSliderIndex = (index) => {
|
|
202
205
|
if (index < 1)
|
|
203
206
|
index = this.content.length;
|
|
@@ -242,6 +245,7 @@ const CarouselComponent = class {
|
|
|
242
245
|
}
|
|
243
246
|
return source;
|
|
244
247
|
};
|
|
248
|
+
this.isLoading = false;
|
|
245
249
|
this.mbSource = undefined;
|
|
246
250
|
this.clientStyling = '';
|
|
247
251
|
this.clientStylingUrl = '';
|
|
@@ -416,27 +420,33 @@ const CarouselComponent = class {
|
|
|
416
420
|
CarouselNavigationBulletActive: index === this.currIndex - 1
|
|
417
421
|
}, onClick: this.moveSliderIndex.bind(this, index + 1) })))));
|
|
418
422
|
}
|
|
423
|
+
renderContent(item, index, isSkeleton) {
|
|
424
|
+
const isActive = index === this.currIndex - 1;
|
|
425
|
+
const buttonStyle = !isActive ? { cursor: 'unset' } : {};
|
|
426
|
+
const activeItemHeight = !isActive ? { height: `${this.height - 70}px` } : { height: `${this.height}px` };
|
|
427
|
+
return (h("div", { class: {
|
|
428
|
+
CarouselSliderItem: true,
|
|
429
|
+
CarouselSliderItemActive: isActive
|
|
430
|
+
}, onClick: isSkeleton ? undefined : this.changeSlider.bind(this, index), style: activeItemHeight }, h("div", { class: "Item3dFrame", style: {
|
|
431
|
+
transform: this.getTransformStyle(index)
|
|
432
|
+
} }, isSkeleton && (h("div", { class: "Item3dFrameImgSkeleton", style: {
|
|
433
|
+
position: 'absolute',
|
|
434
|
+
top: '0',
|
|
435
|
+
left: '0',
|
|
436
|
+
width: '100%',
|
|
437
|
+
height: '100%',
|
|
438
|
+
backgroundColor: '#eee',
|
|
439
|
+
animation: 'pulse 1.5s infinite'
|
|
440
|
+
} })), !isSkeleton && (h("img", { src: this.setImage(item.image), loading: "lazy", class: "Item3dFrameImg" })), h("div", { class: "ItemSection" }, h("div", { class: "TopSection" }, h("button", { onClick: () => {
|
|
441
|
+
if (isActive && !isSkeleton) {
|
|
442
|
+
this.navigationTo(item.url, item.targetType, item.externalLink);
|
|
443
|
+
}
|
|
444
|
+
}, style: buttonStyle, class: "JoinButton" }, h("span", null, translate('joinNow', this.language)), h("svg", { width: "12", height: "12", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M5 3L10 8L5 13", stroke: "white", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" })))), h("hr", { class: "Divider" }), h("div", { class: "BottomSection" }, h("h3", null, isSkeleton ? '' : item.title.toUpperCase()))))));
|
|
445
|
+
}
|
|
419
446
|
render() {
|
|
420
|
-
return (h("div", { key: '
|
|
421
|
-
|
|
422
|
-
|
|
423
|
-
const activeItemHeight = !isActive
|
|
424
|
-
? { height: `${this.height - 70}px` }
|
|
425
|
-
: { height: `${this.height}px` };
|
|
426
|
-
return (h("div", { class: {
|
|
427
|
-
CarouselSliderItem: true,
|
|
428
|
-
CarouselSliderItemActive: isActive
|
|
429
|
-
}, onClick: this.changeSlider.bind(this, index), style: activeItemHeight }, h("div", { class: "Item3dFrame", style: {
|
|
430
|
-
backgroundSize: 'cover',
|
|
431
|
-
backgroundPosition: 'center',
|
|
432
|
-
backgroundImage: `url(${this.setImage(item.image)})`,
|
|
433
|
-
transform: this.getTransformStyle(index)
|
|
434
|
-
} }, h("div", { class: "ItemSection" }, h("div", { class: "TopSection" }, h("button", { onClick: () => {
|
|
435
|
-
if (isActive) {
|
|
436
|
-
this.navigationTo(item.url, item.targetType, item.externalLink);
|
|
437
|
-
}
|
|
438
|
-
}, style: buttonStyle, class: "JoinButton" }, h("span", null, translate('joinNow', this.language)), h("svg", { width: "12", height: "12", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M5 3L10 8L5 13", stroke: "white", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" })))), h("hr", { class: "Divider" }), h("div", { class: "BottomSection" }, h("h3", null, item.title.toUpperCase()))))));
|
|
439
|
-
}))), this.bulletNavigation ? this.renderNavigation() : null)));
|
|
447
|
+
return (h("div", { key: 'e6cca32bbba354c00253adc393dc410b3dd554d0', ref: (el) => (this.stylingContainer = el) }, h("div", { key: '0d05ecb31e02065e1876730bbd99dad6144dc315', class: "Carousel" }, h("div", { key: 'd970866951f1c8b5687dcca6b7906570fa69af48', class: "CarouselBody" }, h("div", { key: '722ce34d95a2913591fdf8173e0ccf24de9cb81d', class: "CarouselSlider", ref: (el) => (this.sliderElement = el), style: { width: `${this.totalWidth}px`, transform: this.getSliderTransformStyle() } }, this.isLoading
|
|
448
|
+
? this.bannersSkeleton.map((_, index) => this.renderContent(null, index, true))
|
|
449
|
+
: this.content.map((item, index) => this.renderContent(item, index, false)))), this.bulletNavigation ? this.renderNavigation() : null)));
|
|
440
450
|
}
|
|
441
451
|
get el() { return getElement(this); }
|
|
442
452
|
static get watchers() { return {
|
|
@@ -465,9 +475,9 @@ const GeneralSliderNavigation = class {
|
|
|
465
475
|
this.slideTimer = undefined;
|
|
466
476
|
this.translationUrl = '';
|
|
467
477
|
this.startFrom = 'middle';
|
|
468
|
-
this.isLoading = true;
|
|
469
478
|
this.hasErrors = false;
|
|
470
479
|
this.device = '';
|
|
480
|
+
this.isLoading = false;
|
|
471
481
|
}
|
|
472
482
|
handleClientStylingChange(newValue, oldValue) {
|
|
473
483
|
if (newValue != oldValue) {
|
|
@@ -521,8 +531,8 @@ const GeneralSliderNavigation = class {
|
|
|
521
531
|
url.searchParams.append('env', this.cmsEnv);
|
|
522
532
|
url.searchParams.append('userRoles', this.userRoles);
|
|
523
533
|
url.searchParams.append('device', getDevicePlatform());
|
|
534
|
+
this.isLoading = true;
|
|
524
535
|
return new Promise((resolve, reject) => {
|
|
525
|
-
this.isLoading = true;
|
|
526
536
|
fetch(url.href)
|
|
527
537
|
.then((res) => res.json())
|
|
528
538
|
.then((menuSliderData) => {
|
|
@@ -532,7 +542,8 @@ const GeneralSliderNavigation = class {
|
|
|
532
542
|
console.error(err);
|
|
533
543
|
this.hasErrors = true;
|
|
534
544
|
reject(err);
|
|
535
|
-
})
|
|
545
|
+
})
|
|
546
|
+
.finally(() => {
|
|
536
547
|
this.isLoading = false;
|
|
537
548
|
});
|
|
538
549
|
});
|
|
@@ -541,9 +552,7 @@ const GeneralSliderNavigation = class {
|
|
|
541
552
|
if (this.hasErrors) {
|
|
542
553
|
return (h("div", { class: "PageError" }, h("div", { class: "TitleError" }, translate('error', this.language))));
|
|
543
554
|
}
|
|
544
|
-
|
|
545
|
-
return (h("div", { ref: el => this.stylingContainer = el }, h("carousel-component", { content: this.sliderData, language: this.language, "mb-source": this.mbSource, "client-styling": this.clientStyling, "client-styling-url": this.clientStylingUrl, "bullet-navigation": this.bulletNavigation, "slide-timer": this.slideTimer, "translation-url": this.translationUrl, "start-from": this.startFrom })));
|
|
546
|
-
}
|
|
555
|
+
return (h("div", { ref: (el) => (this.stylingContainer = el) }, h("carousel-component", { "is-loading": this.isLoading, content: this.sliderData, language: this.language, "mb-source": this.mbSource, "client-styling": this.clientStyling, "client-styling-url": this.clientStylingUrl, "bullet-navigation": this.bulletNavigation, "slide-timer": this.slideTimer, "translation-url": this.translationUrl, "start-from": this.startFrom })));
|
|
547
556
|
}
|
|
548
557
|
static get watchers() { return {
|
|
549
558
|
"clientStyling": ["handleClientStylingChange"],
|
|
@@ -16,5 +16,5 @@ var patchBrowser = () => {
|
|
|
16
16
|
|
|
17
17
|
patchBrowser().then(async (options) => {
|
|
18
18
|
await globalScripts();
|
|
19
|
-
return bootstrapLazy([["carousel-component_2",[[1,"general-slider-navigation",{"mbSource":[1,"mb-source"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"cmsEndpoint":[513,"cms-endpoint"],"cmsEnv":[513,"cms-env"],"language":[513],"userRoles":[513,"user-roles"],"bulletNavigation":[516,"bullet-navigation"],"slideTimer":[514,"slide-timer"],"translationUrl":[513,"translation-url"],"startFrom":[513,"start-from"],"
|
|
19
|
+
return bootstrapLazy([["carousel-component_2",[[1,"general-slider-navigation",{"mbSource":[1,"mb-source"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"cmsEndpoint":[513,"cms-endpoint"],"cmsEnv":[513,"cms-env"],"language":[513],"userRoles":[513,"user-roles"],"bulletNavigation":[516,"bullet-navigation"],"slideTimer":[514,"slide-timer"],"translationUrl":[513,"translation-url"],"startFrom":[513,"start-from"],"hasErrors":[32],"device":[32],"isLoading":[32]},null,{"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingChangeURL"],"translationUrl":["handleNewTranslations"],"cmsEndpoint":["watchEndpoint"],"language":["watchEndpoint"]}],[1,"carousel-component",{"isLoading":[516,"is-loading"],"mbSource":[1,"mb-source"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"content":[16],"bulletNavigation":[516,"bullet-navigation"],"language":[513],"slideTimer":[514,"slide-timer"],"translationUrl":[513,"translation-url"],"startFrom":[513,"start-from"],"currIndex":[32],"width":[32],"height":[32],"margin":[32],"sliderElement":[32],"totalWidth":[32],"device":[32],"innerWidth":[32]},null,{"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingChangeURL"],"translationUrl":["handleNewTranslations"],"content":["handleContentChange"]}]]]], options);
|
|
20
20
|
});
|
package/dist/esm/loader.js
CHANGED
|
@@ -5,7 +5,7 @@ import { g as globalScripts } from './app-globals-0f993ce5.js';
|
|
|
5
5
|
const defineCustomElements = async (win, options) => {
|
|
6
6
|
if (typeof window === 'undefined') return undefined;
|
|
7
7
|
await globalScripts();
|
|
8
|
-
return bootstrapLazy([["carousel-component_2",[[1,"general-slider-navigation",{"mbSource":[1,"mb-source"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"cmsEndpoint":[513,"cms-endpoint"],"cmsEnv":[513,"cms-env"],"language":[513],"userRoles":[513,"user-roles"],"bulletNavigation":[516,"bullet-navigation"],"slideTimer":[514,"slide-timer"],"translationUrl":[513,"translation-url"],"startFrom":[513,"start-from"],"
|
|
8
|
+
return bootstrapLazy([["carousel-component_2",[[1,"general-slider-navigation",{"mbSource":[1,"mb-source"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"cmsEndpoint":[513,"cms-endpoint"],"cmsEnv":[513,"cms-env"],"language":[513],"userRoles":[513,"user-roles"],"bulletNavigation":[516,"bullet-navigation"],"slideTimer":[514,"slide-timer"],"translationUrl":[513,"translation-url"],"startFrom":[513,"start-from"],"hasErrors":[32],"device":[32],"isLoading":[32]},null,{"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingChangeURL"],"translationUrl":["handleNewTranslations"],"cmsEndpoint":["watchEndpoint"],"language":["watchEndpoint"]}],[1,"carousel-component",{"isLoading":[516,"is-loading"],"mbSource":[1,"mb-source"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"content":[16],"bulletNavigation":[516,"bullet-navigation"],"language":[513],"slideTimer":[514,"slide-timer"],"translationUrl":[513,"translation-url"],"startFrom":[513,"start-from"],"currIndex":[32],"width":[32],"height":[32],"margin":[32],"sliderElement":[32],"totalWidth":[32],"device":[32],"innerWidth":[32]},null,{"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingChangeURL"],"translationUrl":["handleNewTranslations"],"content":["handleContentChange"]}]]]], options);
|
|
9
9
|
};
|
|
10
10
|
|
|
11
11
|
export { defineCustomElements };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{r as t,h as i,g as e}from"./index-1af267c3.js";const s={en:{error:"Error",noResults:"Loading, please wait ...",joinNow:"Join now"},hu:{error:"Error",noResults:"Loading, please wait ...",joinNow:"Join now"},ro:{error:"Eroare",noResults:"Loading, please wait ...",joinNow:"Join now"},fr:{error:"Error",noResults:"Loading, please wait ...",joinNow:"Join now"},ar:{error:"خطأ",noResults:"Loading, please wait ...",joinNow:"Join now"},hr:{error:"Greška",noResults:"Učitavanje, molimo pričekajte ...",joinNow:"Join now"},"pt-br":{error:"Erro",noResults:"Carregando, espere por favor…",joinNow:"Join now"},"es-mx":{error:"Error",noResults:"Cargando, espere por favor…",joinNow:"Join now"}},o=t=>new Promise((i=>{fetch(t).then((t=>t.json())).then((t=>{Object.keys(t).forEach((i=>{s[i]||(s[i]={});for(let e in t[i])s[i][e]=t[i][e]})),i(!0)}))})),r=(t,i)=>s[void 0!==i&&i in s?i:"en"][t];function n(t,i){if(t){const e=document.createElement("style");e.innerHTML=i,t.appendChild(e)}}function a(t,i){const e=new URL(i);fetch(e.href).then((t=>t.text())).then((i=>{const e=document.createElement("style");e.innerHTML=i,t&&t.appendChild(e)})).catch((t=>{console.error("There was an error while trying to load client styling from URL",t)}))}function h(t,i){if(window.emMessageBus){const e=document.createElement("style");window.emMessageBus.subscribe(i,(i=>{e.innerHTML=i,t&&t.appendChild(e)}))}}const l=(t,i)=>function(...e){clearTimeout(this.debounceTimer),this.debounceTimer=setTimeout((()=>{t.apply(this,e)}),i)},d=class{constructor(i){var e;t(this,i),this.userAgent=window.navigator.userAgent,this.isMobile=!!((e=this.userAgent).toLowerCase().match(/android/i)||e.toLowerCase().match(/blackberry|bb/i)||e.toLowerCase().match(/iphone|ipad|ipod/i)||e.toLowerCase().match(/windows phone|windows mobile|iemobile|wpdesktop/i)),this.touchStartX=0,this.touchEndX=0,this.moveSliderIndex=t=>{t<1&&(t=this.content.length),t>this.content.length&&(t=1),this.currIndex=t,this.sliderElement&&(this.sliderElement.style.transform=this.getSliderTransformStyle())},this.handleTouchStart=t=>{this.touchStartX=t.changedTouches[0].screenX},this.handleTouchEnd=t=>{this.touchEndX=t.changedTouches[0].screenX,this.handleSwipe()},this.navigationTo=(t,i,e)=>{window.postMessage({type:"NavigateTo",path:t,target:i||null,externalLink:e||!1},window.location.href)},this.changeSlider=t=>{t>this.currIndex-1?this.next():t<this.currIndex-1&&this.prev()},this.setImage=t=>{let i="";switch(this.device=function(){const t=navigator.userAgent.toLowerCase(),i=screen.availWidth,e=screen.availHeight;if(t.includes("iphone"))return"mobile";if(t.includes("android")){if(e>i&&i<800)return"mobile";if(i>e&&e<800)return"tablet"}return"desktop"}(),this.device){case"mobile":i=t.srcMobile;break;case"tablet":i=t.srcTablet;break;case"desktop":i=t.srcDesktop}return i},this.mbSource=void 0,this.clientStyling="",this.clientStylingUrl="",this.content=void 0,this.bulletNavigation=!0,this.language="en",this.slideTimer=void 0,this.translationUrl="",this.startFrom="middle",this.currIndex=0,this.width=void 0,this.height=void 0,this.margin=void 0,this.sliderElement=void 0,this.totalWidth=void 0,this.device="",this.innerWidth=void 0}handleClientStylingChange(t,i){t!=i&&n(this.stylingContainer,this.clientStyling)}handleClientStylingChangeURL(t,i){t!=i&&this.clientStylingUrl&&a(this.stylingContainer,this.clientStylingUrl)}handleNewTranslations(){o(this.translationUrl)}handleContentChange(){Array.isArray(this.content)&&this.content.length&&(this.applyStartIndex(),this.resize())}async componentWillLoad(){this.translationUrl.length>2&&await o(this.translationUrl)}componentDidLoad(){this.init(),this.stylingContainer&&(this.mbSource?h(this.stylingContainer,`${this.mbSource}.Style`):(this.clientStyling&&n(this.stylingContainer,this.clientStyling),this.clientStylingUrl&&a(this.stylingContainer,this.clientStylingUrl)))}init(){this.applyStartIndex(),this.bindEvents(),this.slideTimer>0&&this.timer(),this.calcInnerWidth(),this.resize()}applyStartIndex(){if(!this.content||!this.content.length)return;let t=1;switch(this.startFrom){case"start":t=1;break;case"end":t=this.content.length;break;default:t=Math.ceil(this.content.length/2)}this.moveSliderIndex(t)}calcInnerWidth(){const t=this.el.parentElement;this.innerWidth=t?t.offsetWidth:window.innerWidth}resize(){var t;this.calcInnerWidth(),this.isMobile?(this.width=Math.max(.3*innerWidth,200),this.height=.4*window.innerHeight):(this.width=this.innerWidth>1200?Math.max(.1*this.innerWidth,300):Math.max(.2*this.innerWidth,200),this.height=.55*window.innerHeight),this.totalWidth=this.width*this.content.length,this.margin=-5;const i=(null===(t=this.sliderElement)||void 0===t?void 0:t.children)||[];for(let t=0;t<i.length;t++){const e=i[t];e.style.margin=`0 ${this.margin}px`,e.style.width=this.width-2*this.margin+"px"}this.sliderElement&&(this.sliderElement.style.transform=this.getSliderTransformStyle())}timer(){this.clearTimer(),this.interval=setInterval((()=>{this.moveSliderIndex(++this.currIndex)}),1e3*this.slideTimer)}disconnectedCallback(){this.clearTimer()}clearTimer(){this.interval&&clearInterval(this.interval)}prev(){this.moveSliderIndex(--this.currIndex),this.slideTimer>0&&this.timer()}next(){this.moveSliderIndex(++this.currIndex),this.slideTimer>0&&this.timer()}bindEvents(){window.onresize=l(this.resize,150).bind(this),this.el.addEventListener("touchstart",this.handleTouchStart,!1),this.el.addEventListener("touchend",this.handleTouchEnd,!1)}handleSwipe(){this.touchEndX<this.touchStartX&&this.next(),this.touchEndX>this.touchStartX&&this.prev()}getTransformStyle(t){const i=t===this.currIndex-1?"1200px":"900px";return t===this.currIndex-1?`perspective(${i})`:`perspective(${i}) rotateY(${t<this.currIndex-1?"20deg":"-20deg"})`}getSliderTransformStyle(){return`translate3d(${this.currIndex*-this.width+this.width/2+this.innerWidth/2}px, 0, 0)`}renderNavigation(){return i("div",{class:"CarouselNavigation"},this.content.map(((t,e)=>i("div",{class:{CarouselNavigationBullet:!0,CarouselNavigationBulletActive:e===this.currIndex-1},onClick:this.moveSliderIndex.bind(this,e+1)}))))}render(){return i("div",{key:"0855a42f630d9f753ae9e915c0805dd67e24fd6a",ref:t=>this.stylingContainer=t},i("div",{key:"9491db52d401e8f38301636e15ae73899013aa8e",class:"Carousel"},i("div",{key:"74e5f37fd0af7104a34942f3b54afbd3714834ea",class:"CarouselBody"},i("div",{key:"40299537e362a112ebbcdce6548a51f2a2be8286",class:"CarouselSlider",ref:t=>this.sliderElement=t,style:{width:`${this.totalWidth}px`,transform:this.getSliderTransformStyle()}},this.content.map(((t,e)=>{const s=e===this.currIndex-1,o=s?{}:{cursor:"unset"},n=s?{height:`${this.height}px`}:{height:this.height-70+"px"};return i("div",{class:{CarouselSliderItem:!0,CarouselSliderItemActive:s},onClick:this.changeSlider.bind(this,e),style:n},i("div",{class:"Item3dFrame",style:{backgroundSize:"cover",backgroundPosition:"center",backgroundImage:`url(${this.setImage(t.image)})`,transform:this.getTransformStyle(e)}},i("div",{class:"ItemSection"},i("div",{class:"TopSection"},i("button",{onClick:()=>{s&&this.navigationTo(t.url,t.targetType,t.externalLink)},style:o,class:"JoinButton"},i("span",null,r("joinNow",this.language)),i("svg",{width:"12",height:"12",viewBox:"0 0 16 16",fill:"none",xmlns:"http://www.w3.org/2000/svg"},i("path",{d:"M5 3L10 8L5 13",stroke:"white","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round"})))),i("hr",{class:"Divider"}),i("div",{class:"BottomSection"},i("h3",null,t.title.toUpperCase())))))})))),this.bulletNavigation?this.renderNavigation():null))}get el(){return e(this)}static get watchers(){return{clientStyling:["handleClientStylingChange"],clientStylingUrl:["handleClientStylingChangeURL"],translationUrl:["handleNewTranslations"],content:["handleContentChange"]}}};d.style=':host{display:block;font-family:"Roboto", sans-serif}html,body{padding:0;margin:0;width:100%;height:100%}.Carousel{position:relative;display:block;width:100%}.carousel__prev,.carousel__next{position:absolute;bottom:-15%;transition:transform 0.25s ease}.carousel__prev i,.carousel__next i{font-size:var(--emw--font-size-x-large, 60px);color:var(--emw--color-white, #FFFFFF);cursor:pointer}.carousel__prev:hover,.carousel__next:hover{transform:scale(1.25)}.carousel__prev{left:40%}.carousel__next{right:40%}.CarouselBody{width:100%;padding:80px 0px;overflow:hidden}.CarouselSlider{position:relative;transition:transform 1s ease-in-out;background:transparent;display:flex;align-items:center}.CarouselSliderItem{opacity:0.7;position:relative;display:block;float:left;box-sizing:border-box}.Item3dFrame{position:relative;width:100%;height:100%;transition:transform 1s ease-in-out, box-shadow 0.5s ease-in-out;transform-style:preserve-3d;display:flex;flex-direction:column;justify-content:flex-end;border-radius:var(--emw--button-border-radius, 20px)}.CarouselSliderItemActive .Item3dFrame{animation:glow 4s linear infinite}@keyframes glow{0%{box-shadow:0 0 50px 5px var(--emw--color-primary, #22B04E)}50%{box-shadow:0 0 50px 5px var(--emw--color-secondary, #F2711C)}100%{box-shadow:0 0 50px 5px var(--emw--color-primary, #22B04E)}}.TopSection{display:flex;justify-content:flex-start;align-items:center}.JoinButton{background-image:linear-gradient(to bottom, color-mix(in srgb, var(--emw--color-primary, #22B04E) 80%, black 20%), var(--emw--color-primary, #22B04E), color-mix(in srgb, var(--emw--color-primary, #22B04E) 80%, var(--emw--color-white, #FFFFFF) 30%));color:var(--emw--color-typography, #FFFFFF);height:42px;width:110px;border-radius:var(--emw--button-border-radius, 20px);cursor:pointer;font-size:var(--emw--size-small, 14px);border:2px solid var(--emw--button-border-color, #0E5924);display:flex;align-items:center;justify-content:center;gap:2px}.ItemSection{padding:12px 20px;display:flex;flex-direction:column;gap:2px}.Divider{border:none;border-top:2px solid var(--emw--color-white, #FFFFFF);width:100%;opacity:0.3}.BottomSection{display:flex;justify-content:flex-start;align-items:flex-start;width:50%;height:60px}.BottomSection h3{font-size:var(--emw--size-large, 24px);margin:0;color:var(--emw--color-typography, #FFFFFF)}.CarouselNavigation{display:flex;justify-content:center;align-items:center;position:absolute;bottom:20px;left:50%;transform:translateX(-50%)}.CarouselNavigationBullet{width:12px;height:12px;background-color:var(--emw--color-grey-100, rgba(255, 255, 255, 0.5));border-radius:50%;margin:0 5px;cursor:pointer;transition:background-color 0.3s}.CarouselNavigationBulletActive{background-color:var(--emw--color-primary, #22B04E)}.CarouselSliderItemActive{opacity:1}';const c=class{constructor(i){t(this,i),this.mbSource=void 0,this.clientStyling="",this.clientStylingUrl="",this.cmsEndpoint=void 0,this.cmsEnv="stage",this.language="en",this.userRoles="everyone",this.bulletNavigation=!0,this.slideTimer=void 0,this.translationUrl="",this.startFrom="middle",this.isLoading=!0,this.hasErrors=!1,this.device=""}handleClientStylingChange(t,i){t!=i&&n(this.stylingContainer,this.clientStyling)}handleClientStylingChangeURL(t,i){t!=i&&this.clientStylingUrl&&a(this.stylingContainer,this.clientStylingUrl)}handleNewTranslations(){o(this.translationUrl)}watchEndpoint(t,i){t&&t!=i&&this.cmsEndpoint&&this.getGeneralSliderNavigation().then((t=>{this.sliderData=t}))}async componentWillLoad(){if(this.translationUrl.length>2&&await o(this.translationUrl),this.cmsEndpoint&&this.language)return this.getGeneralSliderNavigation().then((t=>{this.sliderData=t}))}componentDidLoad(){this.stylingContainer&&(this.mbSource?h(this.stylingContainer,`${this.mbSource}.Style`):(this.clientStyling&&n(this.stylingContainer,this.clientStyling),this.clientStylingUrl&&a(this.stylingContainer,this.clientStylingUrl)))}disconnectedCallback(){this.stylingSubscription&&this.stylingSubscription.unsubscribe()}getGeneralSliderNavigation(){let t=new URL(`${this.cmsEndpoint}/${this.language}/homepage`);return t.searchParams.append("env",this.cmsEnv),t.searchParams.append("userRoles",this.userRoles),t.searchParams.append("device",(()=>{const t=(()=>{let t=window.navigator.userAgent;return t.toLowerCase().match(/android/i)?"Android":t.toLowerCase().match(/iphone/i)?"iPhone":t.toLowerCase().match(/ipad|ipod/i)?"iPad":"PC"})();if(t)return"PC"===t?"dk":"iPad"===t||"iPhone"===t?"ios":"mtWeb"})()),new Promise(((i,e)=>{this.isLoading=!0,fetch(t.href).then((t=>t.json())).then((t=>{i(t.banners)})).catch((t=>{console.error(t),this.hasErrors=!0,e(t)})).finally((()=>{this.isLoading=!1}))}))}render(){return this.hasErrors?i("div",{class:"PageError"},i("div",{class:"TitleError"},r("error",this.language))):this.isLoading?void 0:i("div",{ref:t=>this.stylingContainer=t},i("carousel-component",{content:this.sliderData,language:this.language,"mb-source":this.mbSource,"client-styling":this.clientStyling,"client-styling-url":this.clientStylingUrl,"bullet-navigation":this.bulletNavigation,"slide-timer":this.slideTimer,"translation-url":this.translationUrl,"start-from":this.startFrom}))}static get watchers(){return{clientStyling:["handleClientStylingChange"],clientStylingUrl:["handleClientStylingChangeURL"],translationUrl:["handleNewTranslations"],cmsEndpoint:["watchEndpoint"],language:["watchEndpoint"]}}};c.style="";export{d as carousel_component,c as general_slider_navigation}
|
|
1
|
+
import{r as t,h as i,g as e}from"./index-1af267c3.js";const s={en:{error:"Error",noResults:"Loading, please wait ...",joinNow:"Join now"},hu:{error:"Error",noResults:"Loading, please wait ...",joinNow:"Join now"},ro:{error:"Eroare",noResults:"Loading, please wait ...",joinNow:"Join now"},fr:{error:"Error",noResults:"Loading, please wait ...",joinNow:"Join now"},ar:{error:"خطأ",noResults:"Loading, please wait ...",joinNow:"Join now"},hr:{error:"Greška",noResults:"Učitavanje, molimo pričekajte ...",joinNow:"Join now"},"pt-br":{error:"Erro",noResults:"Carregando, espere por favor…",joinNow:"Join now"},"es-mx":{error:"Error",noResults:"Cargando, espere por favor…",joinNow:"Join now"}},o=t=>new Promise((i=>{fetch(t).then((t=>t.json())).then((t=>{Object.keys(t).forEach((i=>{s[i]||(s[i]={});for(let e in t[i])s[i][e]=t[i][e]})),i(!0)}))})),r=(t,i)=>s[void 0!==i&&i in s?i:"en"][t];function n(t,i){if(t){const e=document.createElement("style");e.innerHTML=i,t.appendChild(e)}}function a(t,i){const e=new URL(i);fetch(e.href).then((t=>t.text())).then((i=>{const e=document.createElement("style");e.innerHTML=i,t&&t.appendChild(e)})).catch((t=>{console.error("There was an error while trying to load client styling from URL",t)}))}function h(t,i){if(window.emMessageBus){const e=document.createElement("style");window.emMessageBus.subscribe(i,(i=>{e.innerHTML=i,t&&t.appendChild(e)}))}}const l=(t,i)=>function(...e){clearTimeout(this.debounceTimer),this.debounceTimer=setTimeout((()=>{t.apply(this,e)}),i)},d=class{constructor(i){var e;t(this,i),this.userAgent=window.navigator.userAgent,this.isMobile=!!((e=this.userAgent).toLowerCase().match(/android/i)||e.toLowerCase().match(/blackberry|bb/i)||e.toLowerCase().match(/iphone|ipad|ipod/i)||e.toLowerCase().match(/windows phone|windows mobile|iemobile|wpdesktop/i)),this.touchStartX=0,this.touchEndX=0,this.bannersSkeleton=Array.from({length:5},((t,i)=>({id:i}))),this.moveSliderIndex=t=>{t<1&&(t=this.content.length),t>this.content.length&&(t=1),this.currIndex=t,this.sliderElement&&(this.sliderElement.style.transform=this.getSliderTransformStyle())},this.handleTouchStart=t=>{this.touchStartX=t.changedTouches[0].screenX},this.handleTouchEnd=t=>{this.touchEndX=t.changedTouches[0].screenX,this.handleSwipe()},this.navigationTo=(t,i,e)=>{window.postMessage({type:"NavigateTo",path:t,target:i||null,externalLink:e||!1},window.location.href)},this.changeSlider=t=>{t>this.currIndex-1?this.next():t<this.currIndex-1&&this.prev()},this.setImage=t=>{let i="";switch(this.device=function(){const t=navigator.userAgent.toLowerCase(),i=screen.availWidth,e=screen.availHeight;if(t.includes("iphone"))return"mobile";if(t.includes("android")){if(e>i&&i<800)return"mobile";if(i>e&&e<800)return"tablet"}return"desktop"}(),this.device){case"mobile":i=t.srcMobile;break;case"tablet":i=t.srcTablet;break;case"desktop":i=t.srcDesktop}return i},this.isLoading=!1,this.mbSource=void 0,this.clientStyling="",this.clientStylingUrl="",this.content=void 0,this.bulletNavigation=!0,this.language="en",this.slideTimer=void 0,this.translationUrl="",this.startFrom="middle",this.currIndex=0,this.width=void 0,this.height=void 0,this.margin=void 0,this.sliderElement=void 0,this.totalWidth=void 0,this.device="",this.innerWidth=void 0}handleClientStylingChange(t,i){t!=i&&n(this.stylingContainer,this.clientStyling)}handleClientStylingChangeURL(t,i){t!=i&&this.clientStylingUrl&&a(this.stylingContainer,this.clientStylingUrl)}handleNewTranslations(){o(this.translationUrl)}handleContentChange(){Array.isArray(this.content)&&this.content.length&&(this.applyStartIndex(),this.resize())}async componentWillLoad(){this.translationUrl.length>2&&await o(this.translationUrl)}componentDidLoad(){this.init(),this.stylingContainer&&(this.mbSource?h(this.stylingContainer,`${this.mbSource}.Style`):(this.clientStyling&&n(this.stylingContainer,this.clientStyling),this.clientStylingUrl&&a(this.stylingContainer,this.clientStylingUrl)))}init(){this.applyStartIndex(),this.bindEvents(),this.slideTimer>0&&this.timer(),this.calcInnerWidth(),this.resize()}applyStartIndex(){if(!this.content||!this.content.length)return;let t=1;switch(this.startFrom){case"start":t=1;break;case"end":t=this.content.length;break;default:t=Math.ceil(this.content.length/2)}this.moveSliderIndex(t)}calcInnerWidth(){const t=this.el.parentElement;this.innerWidth=t?t.offsetWidth:window.innerWidth}resize(){var t;this.calcInnerWidth(),this.isMobile?(this.width=Math.max(.3*innerWidth,200),this.height=.4*window.innerHeight):(this.width=this.innerWidth>1200?Math.max(.1*this.innerWidth,300):Math.max(.2*this.innerWidth,200),this.height=.55*window.innerHeight),this.totalWidth=this.width*this.content.length,this.margin=-5;const i=(null===(t=this.sliderElement)||void 0===t?void 0:t.children)||[];for(let t=0;t<i.length;t++){const e=i[t];e.style.margin=`0 ${this.margin}px`,e.style.width=this.width-2*this.margin+"px"}this.sliderElement&&(this.sliderElement.style.transform=this.getSliderTransformStyle())}timer(){this.clearTimer(),this.interval=setInterval((()=>{this.moveSliderIndex(++this.currIndex)}),1e3*this.slideTimer)}disconnectedCallback(){this.clearTimer()}clearTimer(){this.interval&&clearInterval(this.interval)}prev(){this.moveSliderIndex(--this.currIndex),this.slideTimer>0&&this.timer()}next(){this.moveSliderIndex(++this.currIndex),this.slideTimer>0&&this.timer()}bindEvents(){window.onresize=l(this.resize,150).bind(this),this.el.addEventListener("touchstart",this.handleTouchStart,!1),this.el.addEventListener("touchend",this.handleTouchEnd,!1)}handleSwipe(){this.touchEndX<this.touchStartX&&this.next(),this.touchEndX>this.touchStartX&&this.prev()}getTransformStyle(t){const i=t===this.currIndex-1?"1200px":"900px";return t===this.currIndex-1?`perspective(${i})`:`perspective(${i}) rotateY(${t<this.currIndex-1?"20deg":"-20deg"})`}getSliderTransformStyle(){return`translate3d(${this.currIndex*-this.width+this.width/2+this.innerWidth/2}px, 0, 0)`}renderNavigation(){return i("div",{class:"CarouselNavigation"},this.content.map(((t,e)=>i("div",{class:{CarouselNavigationBullet:!0,CarouselNavigationBulletActive:e===this.currIndex-1},onClick:this.moveSliderIndex.bind(this,e+1)}))))}renderContent(t,e,s){const o=e===this.currIndex-1,n=o?{}:{cursor:"unset"},a=o?{height:`${this.height}px`}:{height:this.height-70+"px"};return i("div",{class:{CarouselSliderItem:!0,CarouselSliderItemActive:o},onClick:s?void 0:this.changeSlider.bind(this,e),style:a},i("div",{class:"Item3dFrame",style:{transform:this.getTransformStyle(e)}},s&&i("div",{class:"Item3dFrameImgSkeleton",style:{position:"absolute",top:"0",left:"0",width:"100%",height:"100%",backgroundColor:"#eee",animation:"pulse 1.5s infinite"}}),!s&&i("img",{src:this.setImage(t.image),loading:"lazy",class:"Item3dFrameImg"}),i("div",{class:"ItemSection"},i("div",{class:"TopSection"},i("button",{onClick:()=>{o&&!s&&this.navigationTo(t.url,t.targetType,t.externalLink)},style:n,class:"JoinButton"},i("span",null,r("joinNow",this.language)),i("svg",{width:"12",height:"12",viewBox:"0 0 16 16",fill:"none",xmlns:"http://www.w3.org/2000/svg"},i("path",{d:"M5 3L10 8L5 13",stroke:"white","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round"})))),i("hr",{class:"Divider"}),i("div",{class:"BottomSection"},i("h3",null,s?"":t.title.toUpperCase())))))}render(){return i("div",{key:"e6cca32bbba354c00253adc393dc410b3dd554d0",ref:t=>this.stylingContainer=t},i("div",{key:"0d05ecb31e02065e1876730bbd99dad6144dc315",class:"Carousel"},i("div",{key:"d970866951f1c8b5687dcca6b7906570fa69af48",class:"CarouselBody"},i("div",{key:"722ce34d95a2913591fdf8173e0ccf24de9cb81d",class:"CarouselSlider",ref:t=>this.sliderElement=t,style:{width:`${this.totalWidth}px`,transform:this.getSliderTransformStyle()}},this.isLoading?this.bannersSkeleton.map(((t,i)=>this.renderContent(null,i,!0))):this.content.map(((t,i)=>this.renderContent(t,i,!1))))),this.bulletNavigation?this.renderNavigation():null))}get el(){return e(this)}static get watchers(){return{clientStyling:["handleClientStylingChange"],clientStylingUrl:["handleClientStylingChangeURL"],translationUrl:["handleNewTranslations"],content:["handleContentChange"]}}};d.style=':host{display:block;font-family:"Roboto", sans-serif}html,body{padding:0;margin:0;width:100%;height:100%}.Carousel{position:relative;display:block;width:100%}.carousel__prev,.carousel__next{position:absolute;bottom:-15%;transition:transform 0.25s ease}.carousel__prev i,.carousel__next i{font-size:var(--emw--font-size-x-large, 60px);color:var(--emw--color-white, #ffffff);cursor:pointer}.carousel__prev:hover,.carousel__next:hover{transform:scale(1.25)}.carousel__prev{left:40%}.carousel__next{right:40%}.CarouselBody{width:100%;padding:80px 0px;overflow:hidden}.CarouselSlider{position:relative;transition:transform 1s ease-in-out;background:transparent;display:flex;align-items:center}.CarouselSliderItem{opacity:0.7;position:relative;display:block;float:left;box-sizing:border-box}.Item3dFrame{position:relative;width:100%;height:100%;transition:transform 1s ease-in-out, box-shadow 0.5s ease-in-out;transform-style:preserve-3d;display:flex;flex-direction:column;justify-content:flex-end;border-radius:var(--emw--button-border-radius, 20px)}.Item3dFrameImg{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;border-radius:var(--emw--button-border-radius, 20px)}.CarouselSliderItemActive .Item3dFrame{animation:glow 4s linear infinite}@keyframes glow{0%{box-shadow:0 0 50px 5px var(--emw--color-primary, #22b04e)}50%{box-shadow:0 0 50px 5px var(--emw--color-secondary, #f2711c)}100%{box-shadow:0 0 50px 5px var(--emw--color-primary, #22b04e)}}.TopSection{display:flex;justify-content:flex-start;align-items:center}.JoinButton{background-image:linear-gradient(to bottom, color-mix(in srgb, var(--emw--color-primary, #22b04e) 80%, black 20%), var(--emw--color-primary, #22b04e), color-mix(in srgb, var(--emw--color-primary, #22b04e) 80%, var(--emw--color-white, #ffffff) 30%));color:var(--emw--color-typography, #ffffff);height:42px;width:110px;border-radius:var(--emw--button-border-radius, 20px);cursor:pointer;font-size:var(--emw--size-small, 14px);border:2px solid var(--emw--button-border-color, #0e5924);display:flex;align-items:center;justify-content:center;gap:2px}.ItemSection{padding:12px 20px;display:flex;flex-direction:column;gap:2px;z-index:1}.Item3dFrameImgSkeleton{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:var(--emw--button-border-radius, 20px);animation:skeleton-loading 1s linear infinite alternate}@keyframes skeleton-loading{0%{background-color:var(--emw-skeleton-slider-primary-color, #e0e0e0)}100%{background-color:var(--emw-skeleton-slider-secondary-color, #f0f0f0)}}.Divider{border:none;border-top:2px solid var(--emw--color-white, #ffffff);width:100%;opacity:0.3}.BottomSection{display:flex;justify-content:flex-start;align-items:flex-start;width:50%;height:60px}.BottomSection h3{font-size:var(--emw--size-large, 24px);margin:0;color:var(--emw--color-typography, #ffffff)}.CarouselNavigation{display:flex;justify-content:center;align-items:center;position:absolute;bottom:20px;left:50%;transform:translateX(-50%)}.CarouselNavigationBullet{width:12px;height:12px;background-color:var(--emw--color-grey-100, rgba(255, 255, 255, 0.5));border-radius:50%;margin:0 5px;cursor:pointer;transition:background-color 0.3s}.CarouselNavigationBulletActive{background-color:var(--emw--color-primary, #22b04e)}.CarouselSliderItemActive{opacity:1}';const c=class{constructor(i){t(this,i),this.mbSource=void 0,this.clientStyling="",this.clientStylingUrl="",this.cmsEndpoint=void 0,this.cmsEnv="stage",this.language="en",this.userRoles="everyone",this.bulletNavigation=!0,this.slideTimer=void 0,this.translationUrl="",this.startFrom="middle",this.hasErrors=!1,this.device="",this.isLoading=!1}handleClientStylingChange(t,i){t!=i&&n(this.stylingContainer,this.clientStyling)}handleClientStylingChangeURL(t,i){t!=i&&this.clientStylingUrl&&a(this.stylingContainer,this.clientStylingUrl)}handleNewTranslations(){o(this.translationUrl)}watchEndpoint(t,i){t&&t!=i&&this.cmsEndpoint&&this.getGeneralSliderNavigation().then((t=>{this.sliderData=t}))}async componentWillLoad(){if(this.translationUrl.length>2&&await o(this.translationUrl),this.cmsEndpoint&&this.language)return this.getGeneralSliderNavigation().then((t=>{this.sliderData=t}))}componentDidLoad(){this.stylingContainer&&(this.mbSource?h(this.stylingContainer,`${this.mbSource}.Style`):(this.clientStyling&&n(this.stylingContainer,this.clientStyling),this.clientStylingUrl&&a(this.stylingContainer,this.clientStylingUrl)))}disconnectedCallback(){this.stylingSubscription&&this.stylingSubscription.unsubscribe()}getGeneralSliderNavigation(){let t=new URL(`${this.cmsEndpoint}/${this.language}/homepage`);return t.searchParams.append("env",this.cmsEnv),t.searchParams.append("userRoles",this.userRoles),t.searchParams.append("device",(()=>{const t=(()=>{let t=window.navigator.userAgent;return t.toLowerCase().match(/android/i)?"Android":t.toLowerCase().match(/iphone/i)?"iPhone":t.toLowerCase().match(/ipad|ipod/i)?"iPad":"PC"})();if(t)return"PC"===t?"dk":"iPad"===t||"iPhone"===t?"ios":"mtWeb"})()),this.isLoading=!0,new Promise(((i,e)=>{fetch(t.href).then((t=>t.json())).then((t=>{i(t.banners)})).catch((t=>{console.error(t),this.hasErrors=!0,e(t)})).finally((()=>{this.isLoading=!1}))}))}render(){return this.hasErrors?i("div",{class:"PageError"},i("div",{class:"TitleError"},r("error",this.language))):i("div",{ref:t=>this.stylingContainer=t},i("carousel-component",{"is-loading":this.isLoading,content:this.sliderData,language:this.language,"mb-source":this.mbSource,"client-styling":this.clientStyling,"client-styling-url":this.clientStylingUrl,"bullet-navigation":this.bulletNavigation,"slide-timer":this.slideTimer,"translation-url":this.translationUrl,"start-from":this.startFrom}))}static get watchers(){return{clientStyling:["handleClientStylingChange"],clientStylingUrl:["handleClientStylingChangeURL"],translationUrl:["handleNewTranslations"],cmsEndpoint:["watchEndpoint"],language:["watchEndpoint"]}}};c.style="";export{d as carousel_component,c as general_slider_navigation}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{p as n,b as t}from"./index-1af267c3.js";export{s as setNonce}from"./index-1af267c3.js";import{g as l}from"./app-globals-0f993ce5.js";(()=>{const t=import.meta.url,l={};return""!==t&&(l.resourcesUrl=new URL(".",t).href),n(l)})().then((async n=>(await l(),t([["carousel-component_2",[[1,"general-slider-navigation",{mbSource:[1,"mb-source"],clientStyling:[513,"client-styling"],clientStylingUrl:[513,"client-styling-url"],cmsEndpoint:[513,"cms-endpoint"],cmsEnv:[513,"cms-env"],language:[513],userRoles:[513,"user-roles"],bulletNavigation:[516,"bullet-navigation"],slideTimer:[514,"slide-timer"],translationUrl:[513,"translation-url"],startFrom:[513,"start-from"],
|
|
1
|
+
import{p as n,b as t}from"./index-1af267c3.js";export{s as setNonce}from"./index-1af267c3.js";import{g as l}from"./app-globals-0f993ce5.js";(()=>{const t=import.meta.url,l={};return""!==t&&(l.resourcesUrl=new URL(".",t).href),n(l)})().then((async n=>(await l(),t([["carousel-component_2",[[1,"general-slider-navigation",{mbSource:[1,"mb-source"],clientStyling:[513,"client-styling"],clientStylingUrl:[513,"client-styling-url"],cmsEndpoint:[513,"cms-endpoint"],cmsEnv:[513,"cms-env"],language:[513],userRoles:[513,"user-roles"],bulletNavigation:[516,"bullet-navigation"],slideTimer:[514,"slide-timer"],translationUrl:[513,"translation-url"],startFrom:[513,"start-from"],hasErrors:[32],device:[32],isLoading:[32]},null,{clientStyling:["handleClientStylingChange"],clientStylingUrl:["handleClientStylingChangeURL"],translationUrl:["handleNewTranslations"],cmsEndpoint:["watchEndpoint"],language:["watchEndpoint"]}],[1,"carousel-component",{isLoading:[516,"is-loading"],mbSource:[1,"mb-source"],clientStyling:[513,"client-styling"],clientStylingUrl:[513,"client-styling-url"],content:[16],bulletNavigation:[516,"bullet-navigation"],language:[513],slideTimer:[514,"slide-timer"],translationUrl:[513,"translation-url"],startFrom:[513,"start-from"],currIndex:[32],width:[32],height:[32],margin:[32],sliderElement:[32],totalWidth:[32],device:[32],innerWidth:[32]},null,{clientStyling:["handleClientStylingChange"],clientStylingUrl:["handleClientStylingChangeURL"],translationUrl:["handleNewTranslations"],content:["handleContentChange"]}]]]],n))));
|
|
@@ -1,4 +1,8 @@
|
|
|
1
1
|
export declare class CarouselComponent {
|
|
2
|
+
/**
|
|
3
|
+
* Loading APi
|
|
4
|
+
*/
|
|
5
|
+
isLoading: boolean;
|
|
2
6
|
/**
|
|
3
7
|
* Client custom styling via streamStyling
|
|
4
8
|
*/
|
|
@@ -51,6 +55,7 @@ export declare class CarouselComponent {
|
|
|
51
55
|
private interval;
|
|
52
56
|
private touchStartX;
|
|
53
57
|
private touchEndX;
|
|
58
|
+
private bannersSkeleton;
|
|
54
59
|
debounceTimer: ReturnType<typeof setTimeout>;
|
|
55
60
|
handleClientStylingChange(newValue: any, oldValue: any): void;
|
|
56
61
|
handleClientStylingChangeURL(newValue: any, oldValue: any): void;
|
|
@@ -75,6 +80,7 @@ export declare class CarouselComponent {
|
|
|
75
80
|
private getTransformStyle;
|
|
76
81
|
private getSliderTransformStyle;
|
|
77
82
|
private renderNavigation;
|
|
83
|
+
private renderContent;
|
|
78
84
|
navigationTo: (url: string, target: string, isExternal: boolean) => void;
|
|
79
85
|
changeSlider: (index: number) => void;
|
|
80
86
|
setImage: (image: any) => string;
|
|
@@ -12,8 +12,8 @@ export declare class GeneralSliderNavigation {
|
|
|
12
12
|
*/
|
|
13
13
|
clientStylingUrl: string;
|
|
14
14
|
/**
|
|
15
|
-
|
|
16
|
-
|
|
15
|
+
* Endpoint URL for the source of data
|
|
16
|
+
*/
|
|
17
17
|
cmsEndpoint: string;
|
|
18
18
|
/**
|
|
19
19
|
* CMS Endpoint stage
|
|
@@ -43,9 +43,9 @@ export declare class GeneralSliderNavigation {
|
|
|
43
43
|
* Where to start from the carousel. Default is middle
|
|
44
44
|
*/
|
|
45
45
|
startFrom: 'start' | 'middle' | 'end';
|
|
46
|
-
private isLoading;
|
|
47
46
|
hasErrors: boolean;
|
|
48
47
|
device: string;
|
|
48
|
+
isLoading: boolean;
|
|
49
49
|
private stylingContainer;
|
|
50
50
|
private stylingSubscription;
|
|
51
51
|
private sliderData;
|
|
@@ -23,6 +23,10 @@ export namespace Components {
|
|
|
23
23
|
* Endpoint URL for the source of data
|
|
24
24
|
*/
|
|
25
25
|
"content": Array<any>;
|
|
26
|
+
/**
|
|
27
|
+
* Loading APi
|
|
28
|
+
*/
|
|
29
|
+
"isLoading": boolean;
|
|
26
30
|
/**
|
|
27
31
|
* Language of the widget
|
|
28
32
|
*/
|
|
@@ -127,6 +131,10 @@ declare namespace LocalJSX {
|
|
|
127
131
|
* Endpoint URL for the source of data
|
|
128
132
|
*/
|
|
129
133
|
"content"?: Array<any>;
|
|
134
|
+
/**
|
|
135
|
+
* Loading APi
|
|
136
|
+
*/
|
|
137
|
+
"isLoading"?: boolean;
|
|
130
138
|
/**
|
|
131
139
|
* Language of the widget
|
|
132
140
|
*/
|