@everymatrix/general-slider-navigation 1.36.0 → 1.36.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/carousel-component_2.cjs.entry.js +442 -0
- package/dist/cjs/general-slider-navigation.cjs.js +2 -2
- package/dist/cjs/{index-3420513e.js → index-d69ac031.js} +0 -13
- package/dist/cjs/loader.cjs.js +2 -2
- package/dist/collection/collection-manifest.json +1 -0
- package/dist/collection/components/carousel-component/carousel-component.css +167 -0
- package/dist/collection/components/carousel-component/carousel-component.js +379 -0
- package/dist/collection/components/general-slider-navigation/general-slider-navigation.css +0 -282
- package/dist/collection/components/general-slider-navigation/general-slider-navigation.js +34 -307
- package/dist/collection/utils/locale.utils.js +24 -2
- package/dist/components/carousel-component.d.ts +11 -0
- package/dist/components/carousel-component.js +6 -0
- package/dist/components/carousel-component2.js +374 -0
- package/dist/components/general-slider-navigation.js +25 -294
- package/dist/esm/carousel-component_2.entry.js +437 -0
- package/dist/esm/general-slider-navigation.js +2 -2
- package/dist/esm/{index-22e4ccbc.js → index-a33109c0.js} +0 -13
- package/dist/esm/loader.js +2 -2
- package/dist/general-slider-navigation/general-slider-navigation.esm.js +1 -1
- package/dist/general-slider-navigation/p-734ecc50.js +1 -0
- package/dist/general-slider-navigation/p-88323bff.entry.js +1 -0
- package/dist/types/components/carousel-component/carousel-component.d.ts +70 -0
- package/dist/types/components/general-slider-navigation/general-slider-navigation.d.ts +7 -51
- package/dist/types/components.d.ts +77 -40
- package/dist/types/utils/locale.utils.d.ts +1 -0
- package/package.json +1 -1
- package/dist/cjs/general-slider-navigation.cjs.entry.js +0 -369
- package/dist/esm/general-slider-navigation.entry.js +0 -365
- package/dist/general-slider-navigation/p-2f9afaa5.entry.js +0 -1
- package/dist/general-slider-navigation/p-b72fe935.js +0 -1
|
@@ -0,0 +1,437 @@
|
|
|
1
|
+
import { r as registerInstance, h, g as getElement } from './index-a33109c0.js';
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* @name isMobile
|
|
5
|
+
* @description A method that returns if the browser used to access the app is from a mobile device or not
|
|
6
|
+
* @param {String} userAgent window.navigator.userAgent
|
|
7
|
+
* @returns {Boolean} true or false
|
|
8
|
+
*/
|
|
9
|
+
const isMobile = (userAgent) => {
|
|
10
|
+
return !!(userAgent.toLowerCase().match(/android/i) ||
|
|
11
|
+
userAgent.toLowerCase().match(/blackberry|bb/i) ||
|
|
12
|
+
userAgent.toLowerCase().match(/iphone|ipad|ipod/i) ||
|
|
13
|
+
userAgent.toLowerCase().match(/windows phone|windows mobile|iemobile|wpdesktop/i));
|
|
14
|
+
};
|
|
15
|
+
const getDevice = () => {
|
|
16
|
+
let userAgent = window.navigator.userAgent;
|
|
17
|
+
if (userAgent.toLowerCase().match(/android/i)) {
|
|
18
|
+
return 'Android';
|
|
19
|
+
}
|
|
20
|
+
if (userAgent.toLowerCase().match(/iphone/i)) {
|
|
21
|
+
return 'iPhone';
|
|
22
|
+
}
|
|
23
|
+
if (userAgent.toLowerCase().match(/ipad|ipod/i)) {
|
|
24
|
+
return 'iPad';
|
|
25
|
+
}
|
|
26
|
+
return 'PC';
|
|
27
|
+
};
|
|
28
|
+
const getDevicePlatform = () => {
|
|
29
|
+
const device = getDevice();
|
|
30
|
+
if (device) {
|
|
31
|
+
if (device === 'PC') {
|
|
32
|
+
return 'dk';
|
|
33
|
+
}
|
|
34
|
+
else if (device === 'iPad' || device === 'iPhone') {
|
|
35
|
+
return 'ios';
|
|
36
|
+
}
|
|
37
|
+
else {
|
|
38
|
+
return 'mtWeb';
|
|
39
|
+
}
|
|
40
|
+
}
|
|
41
|
+
};
|
|
42
|
+
function checkDeviceType() {
|
|
43
|
+
const userAgent = navigator.userAgent.toLowerCase();
|
|
44
|
+
const width = screen.availWidth;
|
|
45
|
+
const height = screen.availHeight;
|
|
46
|
+
if (userAgent.includes('iphone')) {
|
|
47
|
+
return 'mobile';
|
|
48
|
+
}
|
|
49
|
+
if (userAgent.includes('android')) {
|
|
50
|
+
if (height > width && width < 800) {
|
|
51
|
+
return 'mobile';
|
|
52
|
+
}
|
|
53
|
+
if (width > height && height < 800) {
|
|
54
|
+
return 'tablet';
|
|
55
|
+
}
|
|
56
|
+
}
|
|
57
|
+
return 'desktop';
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
const DEFAULT_LANGUAGE = 'en';
|
|
61
|
+
const SUPPORTED_LANGUAGES = ['ro', 'en', 'fr', 'ar', 'hu', 'hr'];
|
|
62
|
+
const TRANSLATIONS = {
|
|
63
|
+
en: {
|
|
64
|
+
error: 'Error',
|
|
65
|
+
noResults: 'Loading, please wait ...',
|
|
66
|
+
joinNow: 'Join now'
|
|
67
|
+
},
|
|
68
|
+
hu: {
|
|
69
|
+
error: 'Error',
|
|
70
|
+
noResults: 'Loading, please wait ...',
|
|
71
|
+
joinNow: 'Join now'
|
|
72
|
+
},
|
|
73
|
+
ro: {
|
|
74
|
+
error: 'Eroare',
|
|
75
|
+
noResults: 'Loading, please wait ...',
|
|
76
|
+
joinNow: 'Join now'
|
|
77
|
+
},
|
|
78
|
+
fr: {
|
|
79
|
+
error: 'Error',
|
|
80
|
+
noResults: 'Loading, please wait ...',
|
|
81
|
+
joinNow: 'Join now'
|
|
82
|
+
},
|
|
83
|
+
ar: {
|
|
84
|
+
error: 'خطأ',
|
|
85
|
+
noResults: 'Loading, please wait ...',
|
|
86
|
+
joinNow: 'Join now'
|
|
87
|
+
},
|
|
88
|
+
hr: {
|
|
89
|
+
error: 'Greška',
|
|
90
|
+
noResults: 'Učitavanje, molimo pričekajte ...',
|
|
91
|
+
joinNow: 'Join now'
|
|
92
|
+
},
|
|
93
|
+
'pt-br': {
|
|
94
|
+
'error': 'Erro',
|
|
95
|
+
'noResults': 'Carregando, espere por favor…',
|
|
96
|
+
'joinNow': 'Join now'
|
|
97
|
+
},
|
|
98
|
+
'es-mx': {
|
|
99
|
+
'error': 'Error',
|
|
100
|
+
'noResults': 'Cargando, espere por favor…',
|
|
101
|
+
'joinNow': 'Join now'
|
|
102
|
+
}
|
|
103
|
+
};
|
|
104
|
+
const getTranslations = (url) => {
|
|
105
|
+
return new Promise((resolve) => {
|
|
106
|
+
fetch(url)
|
|
107
|
+
.then((res) => res.json())
|
|
108
|
+
.then((data) => {
|
|
109
|
+
Object.keys(data).forEach((item) => {
|
|
110
|
+
for (let key in data[item]) {
|
|
111
|
+
TRANSLATIONS[item][key] = data[item][key];
|
|
112
|
+
}
|
|
113
|
+
});
|
|
114
|
+
resolve(true);
|
|
115
|
+
});
|
|
116
|
+
});
|
|
117
|
+
};
|
|
118
|
+
const translate = (key, customLang) => {
|
|
119
|
+
const lang = customLang;
|
|
120
|
+
return TRANSLATIONS[lang !== undefined && SUPPORTED_LANGUAGES.includes(lang) ? lang : DEFAULT_LANGUAGE][key];
|
|
121
|
+
};
|
|
122
|
+
|
|
123
|
+
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:20px 0 50px 0;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(--emfe-w-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}";
|
|
124
|
+
|
|
125
|
+
const CarouselComponent = class {
|
|
126
|
+
constructor(hostRef) {
|
|
127
|
+
registerInstance(this, hostRef);
|
|
128
|
+
/**
|
|
129
|
+
* Client custom styling via inline style
|
|
130
|
+
*/
|
|
131
|
+
this.clientStyling = '';
|
|
132
|
+
/**
|
|
133
|
+
* Client custom styling via url
|
|
134
|
+
*/
|
|
135
|
+
this.clientStylingUrl = '';
|
|
136
|
+
/**
|
|
137
|
+
* Show bullet navigation under slides
|
|
138
|
+
*/
|
|
139
|
+
this.bulletNavigation = true;
|
|
140
|
+
/**
|
|
141
|
+
* Language of the widget
|
|
142
|
+
*/
|
|
143
|
+
this.language = 'en';
|
|
144
|
+
/**
|
|
145
|
+
* Translation via url
|
|
146
|
+
*/
|
|
147
|
+
this.translationUrl = '';
|
|
148
|
+
this.currIndex = 0;
|
|
149
|
+
this.device = '';
|
|
150
|
+
this.stylingAppends = false;
|
|
151
|
+
this.userAgent = window.navigator.userAgent;
|
|
152
|
+
this.isMobile = isMobile(this.userAgent);
|
|
153
|
+
this.touchStartX = 0;
|
|
154
|
+
this.touchEndX = 0;
|
|
155
|
+
this.setClientStylingURL = () => {
|
|
156
|
+
let url = new URL(this.clientStylingUrl);
|
|
157
|
+
let cssFile = document.createElement('style');
|
|
158
|
+
fetch(url.href)
|
|
159
|
+
.then((res) => res.text())
|
|
160
|
+
.then((data) => {
|
|
161
|
+
cssFile.innerHTML = data;
|
|
162
|
+
setTimeout(() => { this.stylingContainer.prepend(cssFile); }, 1);
|
|
163
|
+
})
|
|
164
|
+
.catch((err) => {
|
|
165
|
+
console.log('error ', err);
|
|
166
|
+
});
|
|
167
|
+
};
|
|
168
|
+
this.setClientStyling = () => {
|
|
169
|
+
let sheet = document.createElement('style');
|
|
170
|
+
sheet.innerHTML = this.clientStyling;
|
|
171
|
+
this.stylingContainer.prepend(sheet);
|
|
172
|
+
};
|
|
173
|
+
this.moveSliderIndex = (index) => {
|
|
174
|
+
if (index < 1)
|
|
175
|
+
index = this.sliderData.length;
|
|
176
|
+
if (index > this.sliderData.length)
|
|
177
|
+
index = 1;
|
|
178
|
+
this.currIndex = index;
|
|
179
|
+
if (this.sliderElement) {
|
|
180
|
+
this.sliderElement.style.transform = this.getSliderTransformStyle();
|
|
181
|
+
}
|
|
182
|
+
};
|
|
183
|
+
this.handleTouchStart = (event) => {
|
|
184
|
+
this.touchStartX = event.changedTouches[0].screenX;
|
|
185
|
+
};
|
|
186
|
+
this.handleTouchEnd = (event) => {
|
|
187
|
+
this.touchEndX = event.changedTouches[0].screenX;
|
|
188
|
+
this.handleSwipe();
|
|
189
|
+
};
|
|
190
|
+
this.navigationTo = (url, target, isExternal) => {
|
|
191
|
+
window.postMessage({ type: 'NavigateTo', path: url, target: target || null, externalLink: isExternal || false }, window.location.href);
|
|
192
|
+
};
|
|
193
|
+
this.changeSlider = (index) => {
|
|
194
|
+
if (index > this.currIndex - 1) {
|
|
195
|
+
this.next();
|
|
196
|
+
}
|
|
197
|
+
else if (index < this.currIndex - 1) {
|
|
198
|
+
this.prev();
|
|
199
|
+
}
|
|
200
|
+
};
|
|
201
|
+
this.setImage = (image) => {
|
|
202
|
+
let source = '';
|
|
203
|
+
this.device = checkDeviceType();
|
|
204
|
+
switch (this.device) {
|
|
205
|
+
case 'mobile':
|
|
206
|
+
source = image.srcMobile;
|
|
207
|
+
break;
|
|
208
|
+
case 'tablet':
|
|
209
|
+
source = image.srcTablet;
|
|
210
|
+
break;
|
|
211
|
+
case 'desktop':
|
|
212
|
+
source = image.srcDesktop;
|
|
213
|
+
break;
|
|
214
|
+
}
|
|
215
|
+
return source;
|
|
216
|
+
};
|
|
217
|
+
}
|
|
218
|
+
handleNewTranslations() {
|
|
219
|
+
getTranslations(this.translationUrl);
|
|
220
|
+
}
|
|
221
|
+
async componentWillLoad() {
|
|
222
|
+
if (this.translationUrl.length > 2) {
|
|
223
|
+
await getTranslations(this.translationUrl);
|
|
224
|
+
}
|
|
225
|
+
}
|
|
226
|
+
componentDidLoad() {
|
|
227
|
+
this.init();
|
|
228
|
+
}
|
|
229
|
+
componentDidRender() {
|
|
230
|
+
if (!this.stylingAppends && this.stylingContainer) {
|
|
231
|
+
if (this.clientStyling)
|
|
232
|
+
this.setClientStyling();
|
|
233
|
+
if (this.clientStylingUrl)
|
|
234
|
+
this.setClientStylingURL();
|
|
235
|
+
this.stylingAppends = true;
|
|
236
|
+
}
|
|
237
|
+
}
|
|
238
|
+
init() {
|
|
239
|
+
this.resize();
|
|
240
|
+
this.moveSliderIndex(Math.floor(this.sliderData.length / 2));
|
|
241
|
+
this.bindEvents();
|
|
242
|
+
if (this.slideTimer > 0) {
|
|
243
|
+
this.timer();
|
|
244
|
+
}
|
|
245
|
+
}
|
|
246
|
+
resize() {
|
|
247
|
+
if (this.isMobile) {
|
|
248
|
+
this.width = Math.max(window.innerWidth * 0.3, 200);
|
|
249
|
+
this.height = window.innerHeight * 0.40;
|
|
250
|
+
}
|
|
251
|
+
else {
|
|
252
|
+
this.width = Math.max(window.innerWidth * 0.2, 275);
|
|
253
|
+
this.height = window.innerHeight * 0.55;
|
|
254
|
+
}
|
|
255
|
+
this.totalWidth = this.width * this.sliderData.length;
|
|
256
|
+
//this is where the margin gap between slides is calculated with the animation
|
|
257
|
+
this.margin = -5;
|
|
258
|
+
const children = this.sliderElement.children;
|
|
259
|
+
for (let i = 0; i < children.length; i++) {
|
|
260
|
+
const item = children[i];
|
|
261
|
+
item.style.margin = `0 ${this.margin}px`;
|
|
262
|
+
item.style.width = `${this.width - (this.margin * 2)}px`;
|
|
263
|
+
}
|
|
264
|
+
if (this.sliderElement) {
|
|
265
|
+
this.sliderElement.style.transform = this.getSliderTransformStyle();
|
|
266
|
+
}
|
|
267
|
+
}
|
|
268
|
+
timer() {
|
|
269
|
+
this.clearTimer();
|
|
270
|
+
this.interval = setInterval(() => {
|
|
271
|
+
this.moveSliderIndex(++this.currIndex);
|
|
272
|
+
}, this.slideTimer * 1000);
|
|
273
|
+
}
|
|
274
|
+
disconnectedCallback() {
|
|
275
|
+
this.clearTimer();
|
|
276
|
+
}
|
|
277
|
+
clearTimer() {
|
|
278
|
+
if (this.interval) {
|
|
279
|
+
clearInterval(this.interval);
|
|
280
|
+
}
|
|
281
|
+
}
|
|
282
|
+
prev() {
|
|
283
|
+
this.moveSliderIndex(--this.currIndex);
|
|
284
|
+
if (this.slideTimer > 0) {
|
|
285
|
+
this.timer();
|
|
286
|
+
}
|
|
287
|
+
}
|
|
288
|
+
next() {
|
|
289
|
+
this.moveSliderIndex(++this.currIndex);
|
|
290
|
+
if (this.slideTimer > 0) {
|
|
291
|
+
this.timer();
|
|
292
|
+
}
|
|
293
|
+
}
|
|
294
|
+
bindEvents() {
|
|
295
|
+
window.onresize = () => this.resize();
|
|
296
|
+
this.el.addEventListener('touchstart', this.handleTouchStart, false);
|
|
297
|
+
this.el.addEventListener('touchend', this.handleTouchEnd, false);
|
|
298
|
+
}
|
|
299
|
+
handleSwipe() {
|
|
300
|
+
if (this.touchEndX < this.touchStartX) {
|
|
301
|
+
this.next();
|
|
302
|
+
}
|
|
303
|
+
if (this.touchEndX > this.touchStartX) {
|
|
304
|
+
this.prev();
|
|
305
|
+
}
|
|
306
|
+
}
|
|
307
|
+
getTransformStyle(index) {
|
|
308
|
+
const perspective = index === this.currIndex - 1 ? '1200px' : '900px';
|
|
309
|
+
const rotateY = index < this.currIndex - 1 ? '20deg' : '-20deg';
|
|
310
|
+
return index === this.currIndex - 1 ? `perspective(${perspective})` : `perspective(${perspective}) rotateY(${rotateY})`;
|
|
311
|
+
}
|
|
312
|
+
getSliderTransformStyle() {
|
|
313
|
+
return `translate3d(${((this.currIndex * -this.width) + (this.width / 2) + window.innerWidth / 2)}px, 0, 0)`;
|
|
314
|
+
}
|
|
315
|
+
renderNavigation() {
|
|
316
|
+
return (h("div", { class: "CarouselNavigation" }, this.sliderData.map((_item, index) => (h("div", { class: {
|
|
317
|
+
'CarouselNavigationBullet': true,
|
|
318
|
+
'CarouselNavigationBulletActive': index === this.currIndex - 1,
|
|
319
|
+
}, onClick: this.moveSliderIndex.bind(this, index + 1) })))));
|
|
320
|
+
}
|
|
321
|
+
render() {
|
|
322
|
+
return (h("div", { ref: el => this.stylingContainer = el }, h("div", { class: "Carousel" }, h("div", { class: "CarouselBody" }, h("div", { class: "CarouselSlider", ref: el => this.sliderElement = el, style: { width: `${this.totalWidth}px`, transform: this.getSliderTransformStyle() } }, this.sliderData.map((item, index) => {
|
|
323
|
+
const isActive = index === this.currIndex - 1;
|
|
324
|
+
const buttonStyle = !isActive ? { cursor: 'unset' } : {};
|
|
325
|
+
const activeItemHeight = !isActive ? { height: `${this.height - 70}px` } : { height: `${this.height}px` };
|
|
326
|
+
return (h("div", { class: {
|
|
327
|
+
'CarouselSliderItem': true,
|
|
328
|
+
'CarouselSliderItemActive': isActive,
|
|
329
|
+
}, onClick: this.changeSlider.bind(this, index), style: activeItemHeight }, h("div", { class: "Item3dFrame", style: { backgroundSize: 'cover', backgroundPosition: 'center', backgroundImage: `url(${this.setImage(item.image)})`, transform: this.getTransformStyle(index) } }, h("div", { class: "ItemSection" }, h("div", { class: "TopSection" }, h("button", { onClick: () => {
|
|
330
|
+
if (isActive) {
|
|
331
|
+
this.navigationTo(item.url, item.targetType, item.externalLink);
|
|
332
|
+
}
|
|
333
|
+
}, 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()))))));
|
|
334
|
+
}))), this.bulletNavigation ? this.renderNavigation() : null)));
|
|
335
|
+
}
|
|
336
|
+
get el() { return getElement(this); }
|
|
337
|
+
static get watchers() { return {
|
|
338
|
+
"translationUrl": ["handleNewTranslations"]
|
|
339
|
+
}; }
|
|
340
|
+
};
|
|
341
|
+
CarouselComponent.style = carouselComponentCss;
|
|
342
|
+
|
|
343
|
+
const generalSliderNavigationCss = "";
|
|
344
|
+
|
|
345
|
+
const GeneralSliderNavigation = class {
|
|
346
|
+
constructor(hostRef) {
|
|
347
|
+
registerInstance(this, hostRef);
|
|
348
|
+
/**
|
|
349
|
+
* Client custom styling via inline style
|
|
350
|
+
*/
|
|
351
|
+
this.clientStyling = '';
|
|
352
|
+
/**
|
|
353
|
+
* Client custom styling via url
|
|
354
|
+
*/
|
|
355
|
+
this.clientStylingUrl = '';
|
|
356
|
+
/**
|
|
357
|
+
* CMS Endpoint stage
|
|
358
|
+
*/
|
|
359
|
+
this.cmsEnv = 'stage';
|
|
360
|
+
/**
|
|
361
|
+
* Language of the widget
|
|
362
|
+
*/
|
|
363
|
+
this.language = 'en';
|
|
364
|
+
/**
|
|
365
|
+
* User roles
|
|
366
|
+
*/
|
|
367
|
+
this.userRoles = 'everyone';
|
|
368
|
+
/**
|
|
369
|
+
* Show bullet navigation under slides
|
|
370
|
+
*/
|
|
371
|
+
this.bulletNavigation = true;
|
|
372
|
+
/**
|
|
373
|
+
* Translation via url
|
|
374
|
+
*/
|
|
375
|
+
this.translationUrl = '';
|
|
376
|
+
this.isLoading = true;
|
|
377
|
+
this.hasErrors = false;
|
|
378
|
+
this.device = '';
|
|
379
|
+
}
|
|
380
|
+
handleNewTranslations() {
|
|
381
|
+
getTranslations(this.translationUrl);
|
|
382
|
+
}
|
|
383
|
+
watchEndpoint(newValue, oldValue) {
|
|
384
|
+
if (newValue && newValue != oldValue && this.cmsEndpoint) {
|
|
385
|
+
this.getGeneralSliderNavigation().then((GeneralSliderNavigation) => {
|
|
386
|
+
this.sliderData = GeneralSliderNavigation;
|
|
387
|
+
});
|
|
388
|
+
}
|
|
389
|
+
}
|
|
390
|
+
async componentWillLoad() {
|
|
391
|
+
if (this.translationUrl.length > 2) {
|
|
392
|
+
await getTranslations(this.translationUrl);
|
|
393
|
+
}
|
|
394
|
+
if (this.cmsEndpoint && this.language) {
|
|
395
|
+
return this.getGeneralSliderNavigation().then((GeneralSliderNavigation) => {
|
|
396
|
+
this.sliderData = GeneralSliderNavigation;
|
|
397
|
+
});
|
|
398
|
+
}
|
|
399
|
+
}
|
|
400
|
+
getGeneralSliderNavigation() {
|
|
401
|
+
let url = new URL(`${this.cmsEndpoint}/${this.language}/homepage`);
|
|
402
|
+
url.searchParams.append('env', this.cmsEnv);
|
|
403
|
+
url.searchParams.append('userRoles', this.userRoles);
|
|
404
|
+
url.searchParams.append('device', getDevicePlatform());
|
|
405
|
+
return new Promise((resolve, reject) => {
|
|
406
|
+
this.isLoading = true;
|
|
407
|
+
fetch(url.href)
|
|
408
|
+
.then((res) => res.json())
|
|
409
|
+
.then((menuSliderData) => {
|
|
410
|
+
resolve(menuSliderData.banners);
|
|
411
|
+
})
|
|
412
|
+
.catch((err) => {
|
|
413
|
+
console.error(err);
|
|
414
|
+
this.hasErrors = true;
|
|
415
|
+
reject(err);
|
|
416
|
+
}).finally(() => {
|
|
417
|
+
this.isLoading = false;
|
|
418
|
+
});
|
|
419
|
+
});
|
|
420
|
+
}
|
|
421
|
+
render() {
|
|
422
|
+
if (this.hasErrors) {
|
|
423
|
+
return (h("div", { class: "PageError" }, h("div", { class: "TitleError" }, translate('error', this.language))));
|
|
424
|
+
}
|
|
425
|
+
if (!this.isLoading) {
|
|
426
|
+
return (h("div", null, h("carousel-component", { sliderData: this.sliderData, language: this.language, clientStyling: this.clientStyling, clientStylingUrl: this.clientStylingUrl, bulletNavigation: this.bulletNavigation, slideTimer: this.slideTimer, translationUrl: this.translationUrl })));
|
|
427
|
+
}
|
|
428
|
+
}
|
|
429
|
+
static get watchers() { return {
|
|
430
|
+
"translationUrl": ["handleNewTranslations"],
|
|
431
|
+
"cmsEndpoint": ["watchEndpoint"],
|
|
432
|
+
"language": ["watchEndpoint"]
|
|
433
|
+
}; }
|
|
434
|
+
};
|
|
435
|
+
GeneralSliderNavigation.style = generalSliderNavigationCss;
|
|
436
|
+
|
|
437
|
+
export { CarouselComponent as carousel_component, GeneralSliderNavigation as general_slider_navigation };
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { p as promiseResolve, b as bootstrapLazy } from './index-
|
|
1
|
+
import { p as promiseResolve, b as bootstrapLazy } from './index-a33109c0.js';
|
|
2
2
|
|
|
3
3
|
/*
|
|
4
4
|
Stencil Client Patch Browser v2.15.2 | MIT Licensed | https://stenciljs.com
|
|
@@ -13,5 +13,5 @@ const patchBrowser = () => {
|
|
|
13
13
|
};
|
|
14
14
|
|
|
15
15
|
patchBrowser().then(options => {
|
|
16
|
-
return bootstrapLazy([["
|
|
16
|
+
return bootstrapLazy([["carousel-component_2",[[1,"general-slider-navigation",{"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]}],[1,"carousel-component",{"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"sliderData":[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],"stylingAppends":[32]}]]]], options);
|
|
17
17
|
});
|
|
@@ -707,9 +707,6 @@ const postUpdateComponent = (hostRef) => {
|
|
|
707
707
|
}
|
|
708
708
|
}
|
|
709
709
|
else {
|
|
710
|
-
{
|
|
711
|
-
safeCall(instance, 'componentDidUpdate');
|
|
712
|
-
}
|
|
713
710
|
endPostUpdate();
|
|
714
711
|
}
|
|
715
712
|
// load events fire from bottom to top
|
|
@@ -987,7 +984,6 @@ const initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId, Cstr) =>
|
|
|
987
984
|
hostRef.$flags$ |= 128 /* isWatchReady */;
|
|
988
985
|
}
|
|
989
986
|
endNewInstance();
|
|
990
|
-
fireConnectedCallback(hostRef.$lazyInstance$);
|
|
991
987
|
}
|
|
992
988
|
if (Cstr.style) {
|
|
993
989
|
// this component has styles but we haven't registered them yet
|
|
@@ -1016,11 +1012,6 @@ const initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId, Cstr) =>
|
|
|
1016
1012
|
schedule();
|
|
1017
1013
|
}
|
|
1018
1014
|
};
|
|
1019
|
-
const fireConnectedCallback = (instance) => {
|
|
1020
|
-
{
|
|
1021
|
-
safeCall(instance, 'connectedCallback');
|
|
1022
|
-
}
|
|
1023
|
-
};
|
|
1024
1015
|
const connectedCallback = (elm) => {
|
|
1025
1016
|
if ((plt.$flags$ & 1 /* isTmpDisconnected */) === 0) {
|
|
1026
1017
|
const hostRef = getHostRef(elm);
|
|
@@ -1059,10 +1050,6 @@ const connectedCallback = (elm) => {
|
|
|
1059
1050
|
initializeComponent(elm, hostRef, cmpMeta);
|
|
1060
1051
|
}
|
|
1061
1052
|
}
|
|
1062
|
-
else {
|
|
1063
|
-
// fire off connectedCallback() on component instance
|
|
1064
|
-
fireConnectedCallback(hostRef.$lazyInstance$);
|
|
1065
|
-
}
|
|
1066
1053
|
endConnected();
|
|
1067
1054
|
}
|
|
1068
1055
|
};
|
package/dist/esm/loader.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { p as promiseResolve, b as bootstrapLazy } from './index-
|
|
1
|
+
import { p as promiseResolve, b as bootstrapLazy } from './index-a33109c0.js';
|
|
2
2
|
|
|
3
3
|
/*
|
|
4
4
|
Stencil Client Patch Esm v2.15.2 | MIT Licensed | https://stenciljs.com
|
|
@@ -10,7 +10,7 @@ const patchEsm = () => {
|
|
|
10
10
|
const defineCustomElements = (win, options) => {
|
|
11
11
|
if (typeof window === 'undefined') return Promise.resolve();
|
|
12
12
|
return patchEsm().then(() => {
|
|
13
|
-
return bootstrapLazy([["
|
|
13
|
+
return bootstrapLazy([["carousel-component_2",[[1,"general-slider-navigation",{"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]}],[1,"carousel-component",{"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"sliderData":[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],"stylingAppends":[32]}]]]], options);
|
|
14
14
|
});
|
|
15
15
|
};
|
|
16
16
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{p as
|
|
1
|
+
import{p as i,b as l}from"./p-734ecc50.js";(()=>{const l=import.meta.url,n={};return""!==l&&(n.resourcesUrl=new URL(".",l).href),i(n)})().then((i=>l([["p-88323bff",[[1,"general-slider-navigation",{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]}],[1,"carousel-component",{clientStyling:[513,"client-styling"],clientStylingUrl:[513,"client-styling-url"],sliderData:[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],stylingAppends:[32]}]]]],i)));
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
let e,t,n=!1,l=!1;const s="undefined"!=typeof window?window:{},o=s.document||{head:{}},r={t:0,l:"",jmp:e=>e(),raf:e=>requestAnimationFrame(e),ael:(e,t,n,l)=>e.addEventListener(t,n,l),rel:(e,t,n,l)=>e.removeEventListener(t,n,l),ce:(e,t)=>new CustomEvent(e,t)},i=e=>Promise.resolve(e),c=(()=>{try{return new CSSStyleSheet,"function"==typeof(new CSSStyleSheet).replace}catch(e){}return!1})(),a=new WeakMap,u=e=>"sc-"+e.o,f={},h=e=>"object"==(e=typeof e)||"function"===e,d=(e,t,...n)=>{let l=null,s=!1,o=!1,r=[];const i=t=>{for(let n=0;n<t.length;n++)l=t[n],Array.isArray(l)?i(l):null!=l&&"boolean"!=typeof l&&((s="function"!=typeof e&&!h(l))&&(l+=""),s&&o?r[r.length-1].i+=l:r.push(s?p(null,l):l),o=s)};if(i(n),t){const e=t.className||t.class;e&&(t.class="object"!=typeof e?e:Object.keys(e).filter((t=>e[t])).join(" "))}const c=p(e,null);return c.u=t,r.length>0&&(c.h=r),c},p=(e,t)=>({t:0,p:e,i:t,$:null,h:null,u:null}),$={},y=(e,t,n,l,o,i)=>{if(n!==l){let c=_(e,t),a=t.toLowerCase();if("class"===t){const t=e.classList,s=w(n),o=w(l);t.remove(...s.filter((e=>e&&!o.includes(e)))),t.add(...o.filter((e=>e&&!s.includes(e))))}else if("style"===t){for(const t in n)l&&null!=l[t]||(t.includes("-")?e.style.removeProperty(t):e.style[t]="");for(const t in l)n&&l[t]===n[t]||(t.includes("-")?e.style.setProperty(t,l[t]):e.style[t]=l[t])}else if("ref"===t)l&&l(e);else if(c||"o"!==t[0]||"n"!==t[1]){const s=h(l);if((c||s&&null!==l)&&!o)try{if(e.tagName.includes("-"))e[t]=l;else{let s=null==l?"":l;"list"===t?c=!1:null!=n&&e[t]==s||(e[t]=s)}}catch(e){}null==l||!1===l?!1===l&&""!==e.getAttribute(t)||e.removeAttribute(t):(!c||4&i||o)&&!s&&e.setAttribute(t,l=!0===l?"":l)}else t="-"===t[2]?t.slice(3):_(s,a)?a.slice(2):a[2]+t.slice(3),n&&r.rel(e,t,n,!1),l&&r.ael(e,t,l,!1)}},m=/\s/,w=e=>e?e.split(m):[],b=(e,t,n,l)=>{const s=11===t.$.nodeType&&t.$.host?t.$.host:t.$,o=e&&e.u||f,r=t.u||f;for(l in o)l in r||y(s,l,o[l],void 0,n,t.t);for(l in r)y(s,l,o[l],r[l],n,t.t)},g=(t,l,s)=>{let r,i,c=l.h[s],a=0;if(null!==c.i)r=c.$=o.createTextNode(c.i);else{if(n||(n="svg"===c.p),r=c.$=o.createElementNS(n?"http://www.w3.org/2000/svg":"http://www.w3.org/1999/xhtml",c.p),n&&"foreignObject"===c.p&&(n=!1),b(null,c,n),null!=e&&r["s-si"]!==e&&r.classList.add(r["s-si"]=e),c.h)for(a=0;a<c.h.length;++a)i=g(t,c,a),i&&r.appendChild(i);"svg"===c.p?n=!1:"foreignObject"===r.tagName&&(n=!0)}return r},v=(e,n,l,s,o,r)=>{let i,c=e;for(c.shadowRoot&&c.tagName===t&&(c=c.shadowRoot);o<=r;++o)s[o]&&(i=g(null,l,o),i&&(s[o].$=i,c.insertBefore(i,n)))},S=(e,t,n,l,s)=>{for(;t<=n;++t)(l=e[t])&&(s=l.$,M(l),s.remove())},j=(e,t)=>e.p===t.p,O=(e,t)=>{const l=t.$=e.$,s=e.h,o=t.h,r=t.p,i=t.i;null===i?(n="svg"===r||"foreignObject"!==r&&n,b(e,t,n),null!==s&&null!==o?((e,t,n,l)=>{let s,o=0,r=0,i=t.length-1,c=t[0],a=t[i],u=l.length-1,f=l[0],h=l[u];for(;o<=i&&r<=u;)null==c?c=t[++o]:null==a?a=t[--i]:null==f?f=l[++r]:null==h?h=l[--u]:j(c,f)?(O(c,f),c=t[++o],f=l[++r]):j(a,h)?(O(a,h),a=t[--i],h=l[--u]):j(c,h)?(O(c,h),e.insertBefore(c.$,a.$.nextSibling),c=t[++o],h=l[--u]):j(a,f)?(O(a,f),e.insertBefore(a.$,c.$),a=t[--i],f=l[++r]):(s=g(t&&t[r],n,r),f=l[++r],s&&c.$.parentNode.insertBefore(s,c.$));o>i?v(e,null==l[u+1]?null:l[u+1].$,n,l,r,u):r>u&&S(t,o,i)})(l,s,t,o):null!==o?(null!==e.i&&(l.textContent=""),v(l,null,t,o,0,o.length-1)):null!==s&&S(s,0,s.length-1),n&&"svg"===r&&(n=!1)):e.i!==i&&(l.data=i)},M=e=>{e.u&&e.u.ref&&e.u.ref(null),e.h&&e.h.map(M)},k=e=>q(e).m,C=(e,t)=>{t&&!e.g&&t["s-p"]&&t["s-p"].push(new Promise((t=>e.g=t)))},x=(e,t)=>{if(e.t|=16,!(4&e.t))return C(e,e.v),ee((()=>L(e,t)));e.t|=512},L=(e,t)=>{const n=e.S;let l;return t&&(l=T(n,"componentWillLoad")),W(l,(()=>P(e,n,t)))},P=async(e,t,n)=>{const l=e.m,s=l["s-rc"];n&&(e=>{const t=e.j,n=e.m,l=t.t,s=((e,t)=>{let n=u(t),l=I.get(n);if(e=11===e.nodeType?e:o,l)if("string"==typeof l){let t,s=a.get(e=e.head||e);s||a.set(e,s=new Set),s.has(n)||(t=o.createElement("style"),t.innerHTML=l,e.insertBefore(t,e.querySelector("link")),s&&s.add(n))}else e.adoptedStyleSheets.includes(l)||(e.adoptedStyleSheets=[...e.adoptedStyleSheets,l]);return n})(n.shadowRoot?n.shadowRoot:n.getRootNode(),t);10&l&&(n["s-sc"]=s,n.classList.add(s+"-h"))})(e);E(e,t),s&&(s.map((e=>e())),l["s-rc"]=void 0);{const t=l["s-p"],n=()=>N(e);0===t.length?n():(Promise.all(t).then(n),e.t|=4,t.length=0)}},E=(n,l)=>{try{l=l.render(),n.t&=-17,n.t|=2,((n,l)=>{const s=n.m,o=n.j,r=n.O||p(null,null),i=(e=>e&&e.p===$)(l)?l:d(null,null,l);t=s.tagName,o.M&&(i.u=i.u||{},o.M.map((([e,t])=>i.u[t]=s[e]))),i.p=null,i.t|=4,n.O=i,i.$=r.$=s.shadowRoot||s,e=s["s-sc"],O(r,i)})(n,l)}catch(e){z(e,n.m)}return null},N=e=>{const t=e.m,n=e.S,l=e.v;T(n,"componentDidRender"),64&e.t||(e.t|=64,A(t),T(n,"componentDidLoad"),e.k(t),l||R()),e.g&&(e.g(),e.g=void 0),512&e.t&&Z((()=>x(e,!1))),e.t&=-517},R=()=>{A(o.documentElement),Z((()=>(e=>{const t=r.ce("appload",{detail:{namespace:"general-slider-navigation"}});return e.dispatchEvent(t),t})(s)))},T=(e,t,n)=>{if(e&&e[t])try{return e[t](n)}catch(e){z(e)}},W=(e,t)=>e&&e.then?e.then(t):t(),A=e=>e.classList.add("hydrated"),D=(e,t,n)=>{if(t.C){e.watchers&&(t.L=e.watchers);const l=Object.entries(t.C),s=e.prototype;if(l.map((([e,[l]])=>{(31&l||2&n&&32&l)&&Object.defineProperty(s,e,{get(){return((e,t)=>q(this).P.get(t))(0,e)},set(n){((e,t,n,l)=>{const s=q(e),o=s.m,r=s.P.get(t),i=s.t,c=s.S;if(n=((e,t)=>null==e||h(e)?e:4&t?"false"!==e&&(""===e||!!e):2&t?parseFloat(e):1&t?e+"":e)(n,l.C[t][0]),(!(8&i)||void 0===r)&&n!==r&&(!Number.isNaN(r)||!Number.isNaN(n))&&(s.P.set(t,n),c)){if(l.L&&128&i){const e=l.L[t];e&&e.map((e=>{try{c[e](n,r,t)}catch(e){z(e,o)}}))}2==(18&i)&&x(s,!1)}})(this,e,n,t)},configurable:!0,enumerable:!0})})),1&n){const n=new Map;s.attributeChangedCallback=function(e,t,l){r.jmp((()=>{const t=n.get(e);if(this.hasOwnProperty(t))l=this[t],delete this[t];else if(s.hasOwnProperty(t)&&"number"==typeof this[t]&&this[t]==l)return;this[t]=(null!==l||"boolean"!=typeof this[t])&&l}))},e.observedAttributes=l.filter((([e,t])=>15&t[0])).map((([e,l])=>{const s=l[1]||e;return n.set(s,e),512&l[0]&&t.M.push([e,s]),s}))}}return e},F=(e,t={})=>{const n=[],l=t.exclude||[],i=s.customElements,a=o.head,f=a.querySelector("meta[charset]"),h=o.createElement("style"),d=[];let p,$=!0;Object.assign(r,t),r.l=new URL(t.resourcesUrl||"./",o.baseURI).href,e.map((e=>{e[1].map((t=>{const s={t:t[0],o:t[1],C:t[2],N:t[3]};s.C=t[2],s.M=[],s.L={};const o=s.o,a=class extends HTMLElement{constructor(e){super(e),V(e=this,s),1&s.t&&e.attachShadow({mode:"open"})}connectedCallback(){p&&(clearTimeout(p),p=null),$?d.push(this):r.jmp((()=>(e=>{if(0==(1&r.t)){const t=q(e),n=t.j,l=()=>{};if(!(1&t.t)){t.t|=1;{let n=e;for(;n=n.parentNode||n.host;)if(n["s-p"]){C(t,t.v=n);break}}n.C&&Object.entries(n.C).map((([t,[n]])=>{if(31&n&&e.hasOwnProperty(t)){const n=e[t];delete e[t],e[t]=n}})),(async(e,t,n,l,s)=>{if(0==(32&t.t)){{if(t.t|=32,(s=G(n)).then){const e=()=>{};s=await s,e()}s.isProxied||(n.L=s.watchers,D(s,n,2),s.isProxied=!0);const e=()=>{};t.t|=8;try{new s(t)}catch(e){z(e)}t.t&=-9,t.t|=128,e()}if(s.style){let e=s.style;const t=u(n);if(!I.has(t)){const l=()=>{};((e,t,n)=>{let l=I.get(e);c&&n?(l=l||new CSSStyleSheet,l.replace(t)):l=t,I.set(e,l)})(t,e,!!(1&n.t)),l()}}}const o=t.v,r=()=>x(t,!0);o&&o["s-rc"]?o["s-rc"].push(r):r()})(0,t,n)}l()}})(this)))}disconnectedCallback(){r.jmp((()=>(()=>{0==(1&r.t)&&T(q(this).S,"disconnectedCallback")})()))}componentOnReady(){return q(this).R}};s.T=e[0],l.includes(o)||i.get(o)||(n.push(o),i.define(o,D(a,s,1)))}))})),h.innerHTML=n+"{visibility:hidden}.hydrated{visibility:inherit}",h.setAttribute("data-styles",""),a.insertBefore(h,f?f.nextSibling:a.firstChild),$=!1,d.length?d.map((e=>e.connectedCallback())):r.jmp((()=>p=setTimeout(R,30)))},U=new WeakMap,q=e=>U.get(e),H=(e,t)=>U.set(t.S=e,t),V=(e,t)=>{const n={t:0,m:e,j:t,P:new Map};return n.R=new Promise((e=>n.k=e)),e["s-p"]=[],e["s-rc"]=[],U.set(e,n)},_=(e,t)=>t in e,z=(e,t)=>(0,console.error)(e,t),B=new Map,G=e=>{const t=e.o.replace(/-/g,"_"),n=e.T,l=B.get(n);return l?l[t]:import(`./${n}.entry.js`).then((e=>(B.set(n,e),e[t])),z)},I=new Map,J=[],K=[],Q=(e,t)=>n=>{e.push(n),l||(l=!0,t&&4&r.t?Z(Y):r.raf(Y))},X=e=>{for(let t=0;t<e.length;t++)try{e[t](performance.now())}catch(e){z(e)}e.length=0},Y=()=>{X(J),X(K),(l=J.length>0)&&r.raf(Y)},Z=e=>i().then(e),ee=Q(K,!0);export{F as b,k as g,d as h,i as p,H as r}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{r as t,h as i,g as e}from"./p-734ecc50.js";const s=["ro","en","fr","ar","hu","hr"],o={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"}},r=t=>new Promise((i=>{fetch(t).then((t=>t.json())).then((t=>{Object.keys(t).forEach((i=>{for(let e in t[i])o[i][e]=t[i][e]})),i(!0)}))})),n=(t,i)=>{const e=i;return o[void 0!==e&&s.includes(e)?e:"en"][t]},a=class{constructor(i){var e;t(this,i),this.clientStyling="",this.clientStylingUrl="",this.bulletNavigation=!0,this.language="en",this.translationUrl="",this.currIndex=0,this.device="",this.stylingAppends=!1,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.setClientStylingURL=()=>{let t=new URL(this.clientStylingUrl),i=document.createElement("style");fetch(t.href).then((t=>t.text())).then((t=>{i.innerHTML=t,setTimeout((()=>{this.stylingContainer.prepend(i)}),1)})).catch((t=>{console.log("error ",t)}))},this.setClientStyling=()=>{let t=document.createElement("style");t.innerHTML=this.clientStyling,this.stylingContainer.prepend(t)},this.moveSliderIndex=t=>{t<1&&(t=this.sliderData.length),t>this.sliderData.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}}handleNewTranslations(){r(this.translationUrl)}async componentWillLoad(){this.translationUrl.length>2&&await r(this.translationUrl)}componentDidLoad(){this.init()}componentDidRender(){!this.stylingAppends&&this.stylingContainer&&(this.clientStyling&&this.setClientStyling(),this.clientStylingUrl&&this.setClientStylingURL(),this.stylingAppends=!0)}init(){this.resize(),this.moveSliderIndex(Math.floor(this.sliderData.length/2)),this.bindEvents(),this.slideTimer>0&&this.timer()}resize(){this.isMobile?(this.width=Math.max(.3*window.innerWidth,200),this.height=.4*window.innerHeight):(this.width=Math.max(.2*window.innerWidth,275),this.height=.55*window.innerHeight),this.totalWidth=this.width*this.sliderData.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+window.innerWidth/2}px, 0, 0)`}renderNavigation(){return i("div",{class:"CarouselNavigation"},this.sliderData.map(((t,e)=>i("div",{class:{CarouselNavigationBullet:!0,CarouselNavigationBulletActive:e===this.currIndex-1},onClick:this.moveSliderIndex.bind(this,e+1)}))))}render(){return i("div",{ref:t=>this.stylingContainer=t},i("div",{class:"Carousel"},i("div",{class:"CarouselBody"},i("div",{class:"CarouselSlider",ref:t=>this.sliderElement=t,style:{width:`${this.totalWidth}px`,transform:this.getSliderTransformStyle()}},this.sliderData.map(((t,e)=>{const s=e===this.currIndex-1,o=s?{}:{cursor:"unset"},r=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:r},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,n("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{translationUrl:["handleNewTranslations"]}}};a.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:20px 0 50px 0;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(--emfe-w-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 h=class{constructor(i){t(this,i),this.clientStyling="",this.clientStylingUrl="",this.cmsEnv="stage",this.language="en",this.userRoles="everyone",this.bulletNavigation=!0,this.translationUrl="",this.isLoading=!0,this.hasErrors=!1,this.device=""}handleNewTranslations(){r(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 r(this.translationUrl),this.cmsEndpoint&&this.language)return this.getGeneralSliderNavigation().then((t=>{this.sliderData=t}))}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"},n("error",this.language))):this.isLoading?void 0:i("div",null,i("carousel-component",{sliderData:this.sliderData,language:this.language,clientStyling:this.clientStyling,clientStylingUrl:this.clientStylingUrl,bulletNavigation:this.bulletNavigation,slideTimer:this.slideTimer,translationUrl:this.translationUrl}))}static get watchers(){return{translationUrl:["handleNewTranslations"],cmsEndpoint:["watchEndpoint"],language:["watchEndpoint"]}}};h.style="";export{a as carousel_component,h as general_slider_navigation}
|
|
@@ -0,0 +1,70 @@
|
|
|
1
|
+
export declare class CarouselComponent {
|
|
2
|
+
/**
|
|
3
|
+
* Client custom styling via inline style
|
|
4
|
+
*/
|
|
5
|
+
clientStyling: string;
|
|
6
|
+
/**
|
|
7
|
+
* Client custom styling via url
|
|
8
|
+
*/
|
|
9
|
+
clientStylingUrl: string;
|
|
10
|
+
/**
|
|
11
|
+
* Endpoint URL for the source of data
|
|
12
|
+
*/
|
|
13
|
+
sliderData: Array<any>;
|
|
14
|
+
/**
|
|
15
|
+
* Show bullet navigation under slides
|
|
16
|
+
*/
|
|
17
|
+
bulletNavigation: boolean;
|
|
18
|
+
/**
|
|
19
|
+
* Language of the widget
|
|
20
|
+
*/
|
|
21
|
+
language: string;
|
|
22
|
+
/**
|
|
23
|
+
* Timer for auto sliding
|
|
24
|
+
*/
|
|
25
|
+
slideTimer: number;
|
|
26
|
+
/**
|
|
27
|
+
* Translation via url
|
|
28
|
+
*/
|
|
29
|
+
translationUrl: string;
|
|
30
|
+
currIndex: number;
|
|
31
|
+
width: number;
|
|
32
|
+
height: number;
|
|
33
|
+
margin: number;
|
|
34
|
+
sliderElement: HTMLElement;
|
|
35
|
+
totalWidth: number;
|
|
36
|
+
device: string;
|
|
37
|
+
private stylingAppends;
|
|
38
|
+
el: HTMLElement;
|
|
39
|
+
private userAgent;
|
|
40
|
+
private isMobile;
|
|
41
|
+
private stylingContainer;
|
|
42
|
+
private interval;
|
|
43
|
+
private touchStartX;
|
|
44
|
+
private touchEndX;
|
|
45
|
+
handleNewTranslations(): void;
|
|
46
|
+
componentWillLoad(): Promise<void>;
|
|
47
|
+
componentDidLoad(): void;
|
|
48
|
+
componentDidRender(): void;
|
|
49
|
+
setClientStylingURL: () => void;
|
|
50
|
+
setClientStyling: () => void;
|
|
51
|
+
private init;
|
|
52
|
+
private resize;
|
|
53
|
+
moveSliderIndex: (index: number) => any;
|
|
54
|
+
private timer;
|
|
55
|
+
disconnectedCallback(): void;
|
|
56
|
+
private clearTimer;
|
|
57
|
+
private prev;
|
|
58
|
+
private next;
|
|
59
|
+
private bindEvents;
|
|
60
|
+
private handleTouchStart;
|
|
61
|
+
private handleTouchEnd;
|
|
62
|
+
private handleSwipe;
|
|
63
|
+
private getTransformStyle;
|
|
64
|
+
private getSliderTransformStyle;
|
|
65
|
+
private renderNavigation;
|
|
66
|
+
navigationTo: (url: string, target: string, isExternal: boolean) => void;
|
|
67
|
+
changeSlider: (index: number) => void;
|
|
68
|
+
setImage: (image: any) => string;
|
|
69
|
+
render(): any;
|
|
70
|
+
}
|