@everymatrix/general-slider-navigation 1.77.4 → 1.77.6
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 +15 -7
- 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.js +6 -4
- package/dist/collection/components/general-slider-navigation/general-slider-navigation.js +1 -39
- package/dist/esm/carousel-component_2.entry.js +15 -7
- 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 +2 -1
- package/dist/types/components/general-slider-navigation/general-slider-navigation.d.ts +0 -8
- package/dist/types/components.d.ts +0 -16
- package/package.json +1 -1
|
@@ -183,6 +183,15 @@ function setStreamStyling(stylingContainer, domain, subscription) {
|
|
|
183
183
|
}
|
|
184
184
|
}
|
|
185
185
|
|
|
186
|
+
const debounce = (func, delay) => {
|
|
187
|
+
return function(...args) {
|
|
188
|
+
clearTimeout(this.debounceTimer);
|
|
189
|
+
this.debounceTimer = setTimeout(() => {
|
|
190
|
+
func.apply(this, args);
|
|
191
|
+
}, delay);
|
|
192
|
+
};
|
|
193
|
+
};
|
|
194
|
+
|
|
186
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)}.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}";
|
|
187
196
|
const CarouselComponentStyle0 = carouselComponentCss;
|
|
188
197
|
|
|
@@ -275,7 +284,6 @@ const CarouselComponent = class {
|
|
|
275
284
|
}
|
|
276
285
|
componentDidLoad() {
|
|
277
286
|
this.init();
|
|
278
|
-
this.calcInnerWidth();
|
|
279
287
|
if (this.stylingContainer) {
|
|
280
288
|
if (this.mbSource) {
|
|
281
289
|
setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`);
|
|
@@ -294,6 +302,8 @@ const CarouselComponent = class {
|
|
|
294
302
|
if (this.slideTimer > 0) {
|
|
295
303
|
this.timer();
|
|
296
304
|
}
|
|
305
|
+
this.calcInnerWidth();
|
|
306
|
+
this.resize();
|
|
297
307
|
}
|
|
298
308
|
calcInnerWidth() {
|
|
299
309
|
const parent = this.el.parentElement;
|
|
@@ -304,9 +314,9 @@ const CarouselComponent = class {
|
|
|
304
314
|
else {
|
|
305
315
|
this.innerWidth = window.innerWidth;
|
|
306
316
|
}
|
|
307
|
-
this.resize();
|
|
308
317
|
}
|
|
309
318
|
resize() {
|
|
319
|
+
this.calcInnerWidth();
|
|
310
320
|
if (this.isMobile) {
|
|
311
321
|
this.width = Math.max(innerWidth * 0.3, 200);
|
|
312
322
|
this.height = window.innerHeight * 0.4;
|
|
@@ -355,7 +365,7 @@ const CarouselComponent = class {
|
|
|
355
365
|
}
|
|
356
366
|
}
|
|
357
367
|
bindEvents() {
|
|
358
|
-
window.onresize = (
|
|
368
|
+
window.onresize = debounce(this.resize, 150).bind(this);
|
|
359
369
|
this.el.addEventListener('touchstart', this.handleTouchStart, false);
|
|
360
370
|
this.el.addEventListener('touchend', this.handleTouchEnd, false);
|
|
361
371
|
}
|
|
@@ -384,7 +394,7 @@ const CarouselComponent = class {
|
|
|
384
394
|
}, onClick: this.moveSliderIndex.bind(this, index$1 + 1) })))));
|
|
385
395
|
}
|
|
386
396
|
render() {
|
|
387
|
-
return (index.h("div", { key: '
|
|
397
|
+
return (index.h("div", { key: '84ee06d891aca129d0b806915f837c95113aceec', ref: (el) => (this.stylingContainer = el) }, index.h("div", { key: '8421b660dab67eb20551042e395bb01095df9c7d', class: "Carousel" }, index.h("div", { key: 'a0f544c2d0aa51f9a2db14889bbc5f5cc90e13d1', class: "CarouselBody" }, index.h("div", { key: '726ef4ae8a3d38d693ddf2fb002f3c874ecf9270', class: "CarouselSlider", ref: (el) => (this.sliderElement = el), style: { width: `${this.totalWidth}px`, transform: this.getSliderTransformStyle() } }, this.content.map((item, index$1) => {
|
|
388
398
|
const isActive = index$1 === this.currIndex - 1;
|
|
389
399
|
const buttonStyle = !isActive ? { cursor: 'unset' } : {};
|
|
390
400
|
const activeItemHeight = !isActive
|
|
@@ -429,8 +439,6 @@ const GeneralSliderNavigation = class {
|
|
|
429
439
|
this.userRoles = 'everyone';
|
|
430
440
|
this.bulletNavigation = true;
|
|
431
441
|
this.slideTimer = undefined;
|
|
432
|
-
this.sliderMobileWidth = 200;
|
|
433
|
-
this.sliderDesktopWidth = 300;
|
|
434
442
|
this.translationUrl = '';
|
|
435
443
|
this.isLoading = true;
|
|
436
444
|
this.hasErrors = false;
|
|
@@ -509,7 +517,7 @@ const GeneralSliderNavigation = class {
|
|
|
509
517
|
return (index.h("div", { class: "PageError" }, index.h("div", { class: "TitleError" }, translate('error', this.language))));
|
|
510
518
|
}
|
|
511
519
|
if (!this.isLoading) {
|
|
512
|
-
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
|
|
520
|
+
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 })));
|
|
513
521
|
}
|
|
514
522
|
}
|
|
515
523
|
static get watchers() { return {
|
|
@@ -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"],"
|
|
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"],"isLoading":[32],"hasErrors":[32],"device":[32]},null,{"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingChangeURL"],"translationUrl":["handleNewTranslations"],"cmsEndpoint":["watchEndpoint"],"language":["watchEndpoint"]}],[1,"carousel-component",{"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"],"currIndex":[32],"width":[32],"height":[32],"margin":[32],"sliderElement":[32],"totalWidth":[32],"device":[32],"innerWidth":[32]},null,{"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingChangeURL"],"translationUrl":["handleNewTranslations"]}]]]], 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"],"
|
|
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"],"isLoading":[32],"hasErrors":[32],"device":[32]},null,{"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingChangeURL"],"translationUrl":["handleNewTranslations"],"cmsEndpoint":["watchEndpoint"],"language":["watchEndpoint"]}],[1,"carousel-component",{"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"],"currIndex":[32],"width":[32],"height":[32],"margin":[32],"sliderElement":[32],"totalWidth":[32],"device":[32],"innerWidth":[32]},null,{"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingChangeURL"],"translationUrl":["handleNewTranslations"]}]]]], options);
|
|
12
12
|
};
|
|
13
13
|
|
|
14
14
|
exports.setNonce = index.setNonce;
|
|
@@ -2,6 +2,7 @@ import { h } from "@stencil/core";
|
|
|
2
2
|
import { checkDeviceType, isMobile } from "../../utils/utils";
|
|
3
3
|
import { getTranslations, translate } from "../../utils/locale.utils";
|
|
4
4
|
import { setClientStyling, setClientStylingURL, setStreamStyling } from "../../../../../../../../libs/common/src/styling/index";
|
|
5
|
+
import { debounce } from "../../../../../../../../libs/common/src/utils/index";
|
|
5
6
|
export class CarouselComponent {
|
|
6
7
|
constructor() {
|
|
7
8
|
this.userAgent = window.navigator.userAgent;
|
|
@@ -90,7 +91,6 @@ export class CarouselComponent {
|
|
|
90
91
|
}
|
|
91
92
|
componentDidLoad() {
|
|
92
93
|
this.init();
|
|
93
|
-
this.calcInnerWidth();
|
|
94
94
|
if (this.stylingContainer) {
|
|
95
95
|
if (this.mbSource) {
|
|
96
96
|
setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`, this.stylingSubscription);
|
|
@@ -109,6 +109,8 @@ export class CarouselComponent {
|
|
|
109
109
|
if (this.slideTimer > 0) {
|
|
110
110
|
this.timer();
|
|
111
111
|
}
|
|
112
|
+
this.calcInnerWidth();
|
|
113
|
+
this.resize();
|
|
112
114
|
}
|
|
113
115
|
calcInnerWidth() {
|
|
114
116
|
const parent = this.el.parentElement;
|
|
@@ -119,9 +121,9 @@ export class CarouselComponent {
|
|
|
119
121
|
else {
|
|
120
122
|
this.innerWidth = window.innerWidth;
|
|
121
123
|
}
|
|
122
|
-
this.resize();
|
|
123
124
|
}
|
|
124
125
|
resize() {
|
|
126
|
+
this.calcInnerWidth();
|
|
125
127
|
if (this.isMobile) {
|
|
126
128
|
this.width = Math.max(innerWidth * 0.3, 200);
|
|
127
129
|
this.height = window.innerHeight * 0.4;
|
|
@@ -170,7 +172,7 @@ export class CarouselComponent {
|
|
|
170
172
|
}
|
|
171
173
|
}
|
|
172
174
|
bindEvents() {
|
|
173
|
-
window.onresize = (
|
|
175
|
+
window.onresize = debounce(this.resize, 150).bind(this);
|
|
174
176
|
this.el.addEventListener('touchstart', this.handleTouchStart, false);
|
|
175
177
|
this.el.addEventListener('touchend', this.handleTouchEnd, false);
|
|
176
178
|
}
|
|
@@ -199,7 +201,7 @@ export class CarouselComponent {
|
|
|
199
201
|
}, onClick: this.moveSliderIndex.bind(this, index + 1) })))));
|
|
200
202
|
}
|
|
201
203
|
render() {
|
|
202
|
-
return (h("div", { key: '
|
|
204
|
+
return (h("div", { key: '84ee06d891aca129d0b806915f837c95113aceec', ref: (el) => (this.stylingContainer = el) }, h("div", { key: '8421b660dab67eb20551042e395bb01095df9c7d', class: "Carousel" }, h("div", { key: 'a0f544c2d0aa51f9a2db14889bbc5f5cc90e13d1', class: "CarouselBody" }, h("div", { key: '726ef4ae8a3d38d693ddf2fb002f3c874ecf9270', class: "CarouselSlider", ref: (el) => (this.sliderElement = el), style: { width: `${this.totalWidth}px`, transform: this.getSliderTransformStyle() } }, this.content.map((item, index) => {
|
|
203
205
|
const isActive = index === this.currIndex - 1;
|
|
204
206
|
const buttonStyle = !isActive ? { cursor: 'unset' } : {};
|
|
205
207
|
const activeItemHeight = !isActive
|
|
@@ -13,8 +13,6 @@ export class GeneralSliderNavigation {
|
|
|
13
13
|
this.userRoles = 'everyone';
|
|
14
14
|
this.bulletNavigation = true;
|
|
15
15
|
this.slideTimer = undefined;
|
|
16
|
-
this.sliderMobileWidth = 200;
|
|
17
|
-
this.sliderDesktopWidth = 300;
|
|
18
16
|
this.translationUrl = '';
|
|
19
17
|
this.isLoading = true;
|
|
20
18
|
this.hasErrors = false;
|
|
@@ -93,7 +91,7 @@ export class GeneralSliderNavigation {
|
|
|
93
91
|
return (h("div", { class: "PageError" }, h("div", { class: "TitleError" }, translate('error', this.language))));
|
|
94
92
|
}
|
|
95
93
|
if (!this.isLoading) {
|
|
96
|
-
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
|
|
94
|
+
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 })));
|
|
97
95
|
}
|
|
98
96
|
}
|
|
99
97
|
static get is() { return "general-slider-navigation"; }
|
|
@@ -269,42 +267,6 @@ export class GeneralSliderNavigation {
|
|
|
269
267
|
"attribute": "slide-timer",
|
|
270
268
|
"reflect": true
|
|
271
269
|
},
|
|
272
|
-
"sliderMobileWidth": {
|
|
273
|
-
"type": "number",
|
|
274
|
-
"mutable": false,
|
|
275
|
-
"complexType": {
|
|
276
|
-
"original": "number",
|
|
277
|
-
"resolved": "number",
|
|
278
|
-
"references": {}
|
|
279
|
-
},
|
|
280
|
-
"required": false,
|
|
281
|
-
"optional": false,
|
|
282
|
-
"docs": {
|
|
283
|
-
"tags": [],
|
|
284
|
-
"text": "Mobile width for sliders"
|
|
285
|
-
},
|
|
286
|
-
"attribute": "slider-mobile-width",
|
|
287
|
-
"reflect": true,
|
|
288
|
-
"defaultValue": "200"
|
|
289
|
-
},
|
|
290
|
-
"sliderDesktopWidth": {
|
|
291
|
-
"type": "number",
|
|
292
|
-
"mutable": false,
|
|
293
|
-
"complexType": {
|
|
294
|
-
"original": "number",
|
|
295
|
-
"resolved": "number",
|
|
296
|
-
"references": {}
|
|
297
|
-
},
|
|
298
|
-
"required": false,
|
|
299
|
-
"optional": false,
|
|
300
|
-
"docs": {
|
|
301
|
-
"tags": [],
|
|
302
|
-
"text": "Desktop width for sliders"
|
|
303
|
-
},
|
|
304
|
-
"attribute": "slider-desktop-width",
|
|
305
|
-
"reflect": true,
|
|
306
|
-
"defaultValue": "300"
|
|
307
|
-
},
|
|
308
270
|
"translationUrl": {
|
|
309
271
|
"type": "string",
|
|
310
272
|
"mutable": false,
|
|
@@ -179,6 +179,15 @@ function setStreamStyling(stylingContainer, domain, subscription) {
|
|
|
179
179
|
}
|
|
180
180
|
}
|
|
181
181
|
|
|
182
|
+
const debounce = (func, delay) => {
|
|
183
|
+
return function(...args) {
|
|
184
|
+
clearTimeout(this.debounceTimer);
|
|
185
|
+
this.debounceTimer = setTimeout(() => {
|
|
186
|
+
func.apply(this, args);
|
|
187
|
+
}, delay);
|
|
188
|
+
};
|
|
189
|
+
};
|
|
190
|
+
|
|
182
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)}.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}";
|
|
183
192
|
const CarouselComponentStyle0 = carouselComponentCss;
|
|
184
193
|
|
|
@@ -271,7 +280,6 @@ const CarouselComponent = class {
|
|
|
271
280
|
}
|
|
272
281
|
componentDidLoad() {
|
|
273
282
|
this.init();
|
|
274
|
-
this.calcInnerWidth();
|
|
275
283
|
if (this.stylingContainer) {
|
|
276
284
|
if (this.mbSource) {
|
|
277
285
|
setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`);
|
|
@@ -290,6 +298,8 @@ const CarouselComponent = class {
|
|
|
290
298
|
if (this.slideTimer > 0) {
|
|
291
299
|
this.timer();
|
|
292
300
|
}
|
|
301
|
+
this.calcInnerWidth();
|
|
302
|
+
this.resize();
|
|
293
303
|
}
|
|
294
304
|
calcInnerWidth() {
|
|
295
305
|
const parent = this.el.parentElement;
|
|
@@ -300,9 +310,9 @@ const CarouselComponent = class {
|
|
|
300
310
|
else {
|
|
301
311
|
this.innerWidth = window.innerWidth;
|
|
302
312
|
}
|
|
303
|
-
this.resize();
|
|
304
313
|
}
|
|
305
314
|
resize() {
|
|
315
|
+
this.calcInnerWidth();
|
|
306
316
|
if (this.isMobile) {
|
|
307
317
|
this.width = Math.max(innerWidth * 0.3, 200);
|
|
308
318
|
this.height = window.innerHeight * 0.4;
|
|
@@ -351,7 +361,7 @@ const CarouselComponent = class {
|
|
|
351
361
|
}
|
|
352
362
|
}
|
|
353
363
|
bindEvents() {
|
|
354
|
-
window.onresize = (
|
|
364
|
+
window.onresize = debounce(this.resize, 150).bind(this);
|
|
355
365
|
this.el.addEventListener('touchstart', this.handleTouchStart, false);
|
|
356
366
|
this.el.addEventListener('touchend', this.handleTouchEnd, false);
|
|
357
367
|
}
|
|
@@ -380,7 +390,7 @@ const CarouselComponent = class {
|
|
|
380
390
|
}, onClick: this.moveSliderIndex.bind(this, index + 1) })))));
|
|
381
391
|
}
|
|
382
392
|
render() {
|
|
383
|
-
return (h("div", { key: '
|
|
393
|
+
return (h("div", { key: '84ee06d891aca129d0b806915f837c95113aceec', ref: (el) => (this.stylingContainer = el) }, h("div", { key: '8421b660dab67eb20551042e395bb01095df9c7d', class: "Carousel" }, h("div", { key: 'a0f544c2d0aa51f9a2db14889bbc5f5cc90e13d1', class: "CarouselBody" }, h("div", { key: '726ef4ae8a3d38d693ddf2fb002f3c874ecf9270', class: "CarouselSlider", ref: (el) => (this.sliderElement = el), style: { width: `${this.totalWidth}px`, transform: this.getSliderTransformStyle() } }, this.content.map((item, index) => {
|
|
384
394
|
const isActive = index === this.currIndex - 1;
|
|
385
395
|
const buttonStyle = !isActive ? { cursor: 'unset' } : {};
|
|
386
396
|
const activeItemHeight = !isActive
|
|
@@ -425,8 +435,6 @@ const GeneralSliderNavigation = class {
|
|
|
425
435
|
this.userRoles = 'everyone';
|
|
426
436
|
this.bulletNavigation = true;
|
|
427
437
|
this.slideTimer = undefined;
|
|
428
|
-
this.sliderMobileWidth = 200;
|
|
429
|
-
this.sliderDesktopWidth = 300;
|
|
430
438
|
this.translationUrl = '';
|
|
431
439
|
this.isLoading = true;
|
|
432
440
|
this.hasErrors = false;
|
|
@@ -505,7 +513,7 @@ const GeneralSliderNavigation = class {
|
|
|
505
513
|
return (h("div", { class: "PageError" }, h("div", { class: "TitleError" }, translate('error', this.language))));
|
|
506
514
|
}
|
|
507
515
|
if (!this.isLoading) {
|
|
508
|
-
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
|
|
516
|
+
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 })));
|
|
509
517
|
}
|
|
510
518
|
}
|
|
511
519
|
static get watchers() { return {
|
|
@@ -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"],"
|
|
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"],"isLoading":[32],"hasErrors":[32],"device":[32]},null,{"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingChangeURL"],"translationUrl":["handleNewTranslations"],"cmsEndpoint":["watchEndpoint"],"language":["watchEndpoint"]}],[1,"carousel-component",{"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"],"currIndex":[32],"width":[32],"height":[32],"margin":[32],"sliderElement":[32],"totalWidth":[32],"device":[32],"innerWidth":[32]},null,{"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingChangeURL"],"translationUrl":["handleNewTranslations"]}]]]], 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"],"
|
|
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"],"isLoading":[32],"hasErrors":[32],"device":[32]},null,{"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingChangeURL"],"translationUrl":["handleNewTranslations"],"cmsEndpoint":["watchEndpoint"],"language":["watchEndpoint"]}],[1,"carousel-component",{"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"],"currIndex":[32],"width":[32],"height":[32],"margin":[32],"sliderElement":[32],"totalWidth":[32],"device":[32],"innerWidth":[32]},null,{"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingChangeURL"],"translationUrl":["handleNewTranslations"]}]]]], 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=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.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)}async componentWillLoad(){this.translationUrl.length>2&&await o(this.translationUrl)}componentDidLoad(){this.init(),this.calcInnerWidth(),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.moveSliderIndex(Math.floor(this.content.length/2)),this.bindEvents(),this.slideTimer>0&&this.timer()}calcInnerWidth(){const t=this.el.parentElement;this.innerWidth=t?t.offsetWidth:window.innerWidth,this.resize()}resize(){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 t=this.sliderElement.children;for(let i=0;i<t.length;i++){const e=t[i];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=()=>this.resize(),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:"a8ac2effba14d03c1c65a025b3cfb1f4463d09c6",ref:t=>this.stylingContainer=t},i("div",{key:"6666154623b874dc94c9a5c45cda9e698b0c7047",class:"Carousel"},i("div",{key:"80a991072e2c964648ba2a51c49e8e3e75a5b732",class:"CarouselBody"},i("div",{key:"2a0005eaf91ba079b05e238092af50778864d8d2",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"]}}};l.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 d=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.sliderMobileWidth=200,this.sliderDesktopWidth=300,this.translationUrl="",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,"slider-mobile-width":this.sliderMobileWidth,"slider-desktop-width":this.sliderDesktopWidth}))}static get watchers(){return{clientStyling:["handleClientStylingChange"],clientStylingUrl:["handleClientStylingChangeURL"],translationUrl:["handleNewTranslations"],cmsEndpoint:["watchEndpoint"],language:["watchEndpoint"]}}};d.style="";export{l as carousel_component,d 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.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.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)}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.moveSliderIndex(Math.floor(this.content.length/2)),this.bindEvents(),this.slideTimer>0&&this.timer(),this.calcInnerWidth(),this.resize()}calcInnerWidth(){const t=this.el.parentElement;this.innerWidth=t?t.offsetWidth:window.innerWidth}resize(){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 t=this.sliderElement.children;for(let i=0;i<t.length;i++){const e=t[i];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:"84ee06d891aca129d0b806915f837c95113aceec",ref:t=>this.stylingContainer=t},i("div",{key:"8421b660dab67eb20551042e395bb01095df9c7d",class:"Carousel"},i("div",{key:"a0f544c2d0aa51f9a2db14889bbc5f5cc90e13d1",class:"CarouselBody"},i("div",{key:"726ef4ae8a3d38d693ddf2fb002f3c874ecf9270",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"]}}};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.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}))}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 l}from"./index-1af267c3.js";export{s as setNonce}from"./index-1af267c3.js";import{g as
|
|
1
|
+
import{p as n,b as l}from"./index-1af267c3.js";export{s as setNonce}from"./index-1af267c3.js";import{g as t}from"./app-globals-0f993ce5.js";(()=>{const l=import.meta.url,t={};return""!==l&&(t.resourcesUrl=new URL(".",l).href),n(t)})().then((async n=>(await t(),l([["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"],isLoading:[32],hasErrors:[32],device:[32]},null,{clientStyling:["handleClientStylingChange"],clientStylingUrl:["handleClientStylingChangeURL"],translationUrl:["handleNewTranslations"],cmsEndpoint:["watchEndpoint"],language:["watchEndpoint"]}],[1,"carousel-component",{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"],currIndex:[32],width:[32],height:[32],margin:[32],sliderElement:[32],totalWidth:[32],device:[32],innerWidth:[32]},null,{clientStyling:["handleClientStylingChange"],clientStylingUrl:["handleClientStylingChangeURL"],translationUrl:["handleNewTranslations"]}]]]],n))));
|
|
@@ -38,7 +38,7 @@ export declare class CarouselComponent {
|
|
|
38
38
|
sliderElement: HTMLElement;
|
|
39
39
|
totalWidth: number;
|
|
40
40
|
device: string;
|
|
41
|
-
|
|
41
|
+
innerWidth: number;
|
|
42
42
|
el: HTMLElement;
|
|
43
43
|
private userAgent;
|
|
44
44
|
private isMobile;
|
|
@@ -47,6 +47,7 @@ export declare class CarouselComponent {
|
|
|
47
47
|
private interval;
|
|
48
48
|
private touchStartX;
|
|
49
49
|
private touchEndX;
|
|
50
|
+
debounceTimer: ReturnType<typeof setTimeout>;
|
|
50
51
|
handleClientStylingChange(newValue: any, oldValue: any): void;
|
|
51
52
|
handleClientStylingChangeURL(newValue: any, oldValue: any): void;
|
|
52
53
|
handleNewTranslations(): void;
|
|
@@ -35,14 +35,6 @@ export declare class GeneralSliderNavigation {
|
|
|
35
35
|
* Timer for auto sliding
|
|
36
36
|
*/
|
|
37
37
|
slideTimer: number;
|
|
38
|
-
/**
|
|
39
|
-
* Mobile width for sliders
|
|
40
|
-
*/
|
|
41
|
-
sliderMobileWidth: number;
|
|
42
|
-
/**
|
|
43
|
-
* Desktop width for sliders
|
|
44
|
-
*/
|
|
45
|
-
sliderDesktopWidth: number;
|
|
46
38
|
/**
|
|
47
39
|
* Translation via url
|
|
48
40
|
*/
|
|
@@ -73,14 +73,6 @@ export namespace Components {
|
|
|
73
73
|
* Timer for auto sliding
|
|
74
74
|
*/
|
|
75
75
|
"slideTimer": number;
|
|
76
|
-
/**
|
|
77
|
-
* Desktop width for sliders
|
|
78
|
-
*/
|
|
79
|
-
"sliderDesktopWidth": number;
|
|
80
|
-
/**
|
|
81
|
-
* Mobile width for sliders
|
|
82
|
-
*/
|
|
83
|
-
"sliderMobileWidth": number;
|
|
84
76
|
/**
|
|
85
77
|
* Translation via url
|
|
86
78
|
*/
|
|
@@ -177,14 +169,6 @@ declare namespace LocalJSX {
|
|
|
177
169
|
* Timer for auto sliding
|
|
178
170
|
*/
|
|
179
171
|
"slideTimer"?: number;
|
|
180
|
-
/**
|
|
181
|
-
* Desktop width for sliders
|
|
182
|
-
*/
|
|
183
|
-
"sliderDesktopWidth"?: number;
|
|
184
|
-
/**
|
|
185
|
-
* Mobile width for sliders
|
|
186
|
-
*/
|
|
187
|
-
"sliderMobileWidth"?: number;
|
|
188
172
|
/**
|
|
189
173
|
* Translation via url
|
|
190
174
|
*/
|