@everymatrix/general-slider-navigation 1.36.0 → 1.37.0
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
|
@@ -1,365 +0,0 @@
|
|
|
1
|
-
import { r as registerInstance, h, g as getElement } from './index-22e4ccbc.js';
|
|
2
|
-
|
|
3
|
-
const DEFAULT_LANGUAGE = 'en';
|
|
4
|
-
const SUPPORTED_LANGUAGES = ['ro', 'en', 'fr', 'ar', 'hu', 'hr'];
|
|
5
|
-
const TRANSLATIONS = {
|
|
6
|
-
en: {
|
|
7
|
-
error: 'Error',
|
|
8
|
-
noResults: 'Loading, please wait ...',
|
|
9
|
-
},
|
|
10
|
-
hu: {
|
|
11
|
-
error: 'Error',
|
|
12
|
-
noResults: 'Loading, please wait ...',
|
|
13
|
-
},
|
|
14
|
-
ro: {
|
|
15
|
-
error: 'Eroare',
|
|
16
|
-
noResults: 'Loading, please wait ...',
|
|
17
|
-
},
|
|
18
|
-
fr: {
|
|
19
|
-
error: 'Error',
|
|
20
|
-
noResults: 'Loading, please wait ...',
|
|
21
|
-
},
|
|
22
|
-
ar: {
|
|
23
|
-
error: 'خطأ',
|
|
24
|
-
noResults: 'Loading, please wait ...',
|
|
25
|
-
},
|
|
26
|
-
hr: {
|
|
27
|
-
error: 'Greška',
|
|
28
|
-
noResults: 'Učitavanje, molimo pričekajte ...',
|
|
29
|
-
},
|
|
30
|
-
'pt-br': {
|
|
31
|
-
'error': 'Erro',
|
|
32
|
-
'noResults': 'Carregando, espere por favor…'
|
|
33
|
-
},
|
|
34
|
-
'es-mx': {
|
|
35
|
-
'error': 'Error',
|
|
36
|
-
'noResults': 'Cargando, espere por favor…'
|
|
37
|
-
}
|
|
38
|
-
};
|
|
39
|
-
const translate = (key, customLang) => {
|
|
40
|
-
const lang = customLang;
|
|
41
|
-
return TRANSLATIONS[lang !== undefined && SUPPORTED_LANGUAGES.includes(lang) ? lang : DEFAULT_LANGUAGE][key];
|
|
42
|
-
};
|
|
43
|
-
|
|
44
|
-
/**
|
|
45
|
-
* @name isMobile
|
|
46
|
-
* @description A method that returns if the browser used to access the app is from a mobile device or not
|
|
47
|
-
* @param {String} userAgent window.navigator.userAgent
|
|
48
|
-
* @returns {Boolean} true or false
|
|
49
|
-
*/
|
|
50
|
-
const isMobile = (userAgent) => {
|
|
51
|
-
return !!(userAgent.toLowerCase().match(/android/i) ||
|
|
52
|
-
userAgent.toLowerCase().match(/blackberry|bb/i) ||
|
|
53
|
-
userAgent.toLowerCase().match(/iphone|ipad|ipod/i) ||
|
|
54
|
-
userAgent.toLowerCase().match(/windows phone|windows mobile|iemobile|wpdesktop/i));
|
|
55
|
-
};
|
|
56
|
-
const getDevice = () => {
|
|
57
|
-
let userAgent = window.navigator.userAgent;
|
|
58
|
-
if (userAgent.toLowerCase().match(/android/i)) {
|
|
59
|
-
return 'Android';
|
|
60
|
-
}
|
|
61
|
-
if (userAgent.toLowerCase().match(/iphone/i)) {
|
|
62
|
-
return 'iPhone';
|
|
63
|
-
}
|
|
64
|
-
if (userAgent.toLowerCase().match(/ipad|ipod/i)) {
|
|
65
|
-
return 'iPad';
|
|
66
|
-
}
|
|
67
|
-
return 'PC';
|
|
68
|
-
};
|
|
69
|
-
const getDevicePlatform = () => {
|
|
70
|
-
const device = getDevice();
|
|
71
|
-
if (device) {
|
|
72
|
-
if (device === 'PC') {
|
|
73
|
-
return 'dk';
|
|
74
|
-
}
|
|
75
|
-
else if (device === 'iPad' || device === 'iPhone') {
|
|
76
|
-
return 'ios';
|
|
77
|
-
}
|
|
78
|
-
else {
|
|
79
|
-
return 'mtWeb';
|
|
80
|
-
}
|
|
81
|
-
}
|
|
82
|
-
};
|
|
83
|
-
function checkDeviceType() {
|
|
84
|
-
const userAgent = navigator.userAgent.toLowerCase();
|
|
85
|
-
const width = screen.availWidth;
|
|
86
|
-
const height = screen.availHeight;
|
|
87
|
-
if (userAgent.includes('iphone')) {
|
|
88
|
-
return 'mobile';
|
|
89
|
-
}
|
|
90
|
-
if (userAgent.includes('android')) {
|
|
91
|
-
if (height > width && width < 800) {
|
|
92
|
-
return 'mobile';
|
|
93
|
-
}
|
|
94
|
-
if (width > height && height < 800) {
|
|
95
|
-
return 'tablet';
|
|
96
|
-
}
|
|
97
|
-
}
|
|
98
|
-
return 'desktop';
|
|
99
|
-
}
|
|
100
|
-
|
|
101
|
-
const generalSliderNavigationCss = ":host {\n display: block;\n}\n\n.PageError {\n display: flex;\n justify-content: center;\n flex-direction: column;\n}\n.PageError.TitleError {\n color: red;\n}\n\nmain {\n width: 100%;\n overflow: hidden;\n}\n\n.SliderItemsWrapper {\n display: flex;\n flex-direction: row;\n width: 100%;\n}\n\n.SliderWrapperContent {\n display: flex;\n justify-content: center;\n flex-direction: row;\n width: 100%;\n}\n\n.SliderItems {\n display: flex;\n transition: transform 0.4s ease-in-out;\n transform: translateX(0px);\n}\n\n.SliderItem {\n flex: 0 0 auto;\n width: 100%;\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n align-items: center;\n border-radius: 5px;\n user-select: none;\n}\n\n.GridContainer {\n display: grid;\n grid-template-columns: 1fr;\n grid-template-rows: 1fr 1fr;\n gap: 0px 0px;\n margin: auto;\n width: 220px;\n height: 320px;\n border-radius: 5px;\n margin-bottom: 20px;\n background: var(--emfe-w-color-secondary, #FD2839);\n cursor: pointer;\n}\n.GridContainer .SliderImage {\n grid-area: 1/1/2/2;\n}\n.GridContainer .SliderImage img {\n object-fit: cover;\n height: 320px;\n width: 220px;\n border-radius: 5px;\n}\n.GridContainer .SliderContent {\n grid-area: 1/1/3/2;\n display: flex;\n flex-direction: column;\n flex-wrap: nowrap;\n justify-content: flex-end;\n align-items: baseline;\n gap: 5px;\n margin-left: 20px;\n margin-bottom: 20px;\n}\n.GridContainer .SliderContent .DividerElement {\n background: var(--emfe-w-color-secondary, #FD2839);\n height: 3px;\n width: 60px;\n}\n.GridContainer .SliderContent .Title {\n font-size: 22px;\n font-weight: 400;\n text-transform: uppercase;\n color: var(--emfe-w-color-white, #FFFFFF);\n}\n\n.GridItems {\n display: grid;\n grid-template-columns: 49vw 49vw;\n grid-template-rows: auto auto;\n place-content: unset;\n gap: 2vw;\n margin: 0;\n width: 100vw;\n}\n\n.GridContainerMobile {\n display: grid;\n grid-template-columns: 1fr;\n grid-template-rows: 1fr 1fr;\n gap: 0px 0px;\n margin: auto;\n width: 49vw;\n height: 240px;\n border-radius: 15px;\n background: var(--emfe-w-color-secondary, #FD2839);\n cursor: pointer;\n}\n.GridContainerMobile .SliderImage {\n grid-area: 1/1/2/2;\n}\n.GridContainerMobile .SliderImage img {\n width: 49vw;\n object-fit: cover;\n height: 240px;\n border-radius: 5px;\n}\n.GridContainerMobile .SliderContent {\n grid-area: 1/1/3/2;\n display: flex;\n flex-flow: column;\n justify-content: flex-end;\n align-items: baseline;\n gap: 5px;\n margin-left: 20px;\n margin-bottom: 20px;\n}\n.GridContainerMobile .SliderContent .DividerElement {\n background: var(--emfe-w-color-secondary, #FD2839);\n height: 3px;\n width: 60px;\n}\n.GridContainerMobile .SliderContent .Title {\n font-size: 22px;\n font-weight: 400;\n text-transform: uppercase;\n color: var(--emfe-w-color-white, #FFFFFF);\n}\n\n.GridContainerMobile:nth-last-child(1):nth-child(odd) {\n display: grid;\n gap: 0px 0px;\n margin: auto;\n width: 100vw;\n}\n.GridContainerMobile:nth-last-child(1):nth-child(odd) .SliderImage {\n grid-area: 1/1/2/2;\n}\n.GridContainerMobile:nth-last-child(1):nth-child(odd) .SliderImage img {\n width: 100vw;\n object-fit: cover;\n height: 240px;\n border-radius: 5px;\n}\n\n.SliderNavButton {\n border: 0px;\n width: 45px;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.SliderNavButton svg {\n width: 40px;\n stroke: var(--emfe-w-color-secondary, #FD2839);\n}\n\n.DisabledArrow svg {\n opacity: 0.2;\n stroke: var(--emfe-w-color-secondary, #FD2839);\n pointer-events: none;\n}\n\n@container (max-width: 475px) {\n .SliderItem {\n display: grid;\n grid-template-columns: repeat(auto-fill, max(250px, 1fr));\n color: var(--emfe-w-color-secondary, #FD2839);\n border-radius: 5px;\n user-select: none;\n }\n\n .GridContainer {\n display: grid;\n grid-template-columns: repeat(auto-fill, max(250px, 1fr));\n gap: 10px;\n margin: auto;\n width: 90%;\n height: 220px;\n border-radius: 5px;\n background: var(--emfe-w-color-secondary, #FD2839);\n cursor: pointer;\n }\n .GridContainer .SliderImage {\n grid-area: 1/1/2/2;\n }\n .GridContainer .SliderImage img {\n object-fit: cover;\n height: 220px;\n width: 100%;\n border-radius: 5px;\n }\n .GridContainer .SliderContent {\n grid-area: 1/1/3/2;\n display: flex;\n flex-direction: column;\n flex-wrap: nowrap;\n justify-content: flex-end;\n align-items: baseline;\n gap: 5px;\n margin-left: 20px;\n margin-bottom: 40px;\n }\n .GridContainer .SliderContent .DividerElement {\n background: var(--emfe-w-color-secondary, #FD2839);\n height: 3px;\n width: 60px;\n }\n .GridContainer .SliderContent .Title {\n font-size: 16px;\n font-weight: 400;\n text-transform: uppercase;\n color: var(--emfe-w-color-white, #FFFFFF);\n }\n\n .GridItems {\n display: grid;\n grid-template-columns: 1fr 1fr;\n grid-template-rows: auto auto auto auto;\n gap: 2cqw;\n width: 100cqw;\n justify-items: stretch;\n }\n\n .GridContainerMobile {\n display: grid;\n grid-template-columns: 1fr 1fr;\n grid-template-rows: 1fr 1fr;\n gap: 0px 0px;\n margin: auto;\n height: 200px;\n border-radius: 15px;\n background: white;\n cursor: pointer;\n }\n .GridContainerMobile .SliderImage {\n grid-area: 1/1/2/2;\n }\n .GridContainerMobile .SliderImage img {\n object-fit: cover;\n height: 200px;\n border-radius: 5px;\n }\n .GridContainerMobile .SliderContent {\n grid-area: 1/1/3/2;\n display: flex;\n flex-flow: column;\n justify-content: flex-end;\n align-items: baseline;\n gap: 5px;\n margin-left: 20px;\n margin-bottom: 20px;\n }\n .GridContainerMobile .SliderContent .DividerElement {\n background: var(--emfe-w-color-secondary, #FD2839);\n height: 3px;\n width: 60px;\n }\n .GridContainerMobile .SliderContent .Title {\n font-size: 22px;\n font-weight: 400;\n text-transform: uppercase;\n color: var(--emfe-w-color-white, #FFFFFF);\n }\n}";
|
|
102
|
-
|
|
103
|
-
const GeneralSliderNavigation = class {
|
|
104
|
-
constructor(hostRef) {
|
|
105
|
-
registerInstance(this, hostRef);
|
|
106
|
-
/**
|
|
107
|
-
* Client custom styling via inline style
|
|
108
|
-
*/
|
|
109
|
-
this.clientStyling = '';
|
|
110
|
-
/**
|
|
111
|
-
* Client custom styling via url
|
|
112
|
-
*/
|
|
113
|
-
this.clientStylingUrl = '';
|
|
114
|
-
/**
|
|
115
|
-
* CMS Endpoint stage
|
|
116
|
-
*/
|
|
117
|
-
this.cmsEnv = 'stage';
|
|
118
|
-
/**
|
|
119
|
-
* Language of the widget
|
|
120
|
-
*/
|
|
121
|
-
this.language = 'en';
|
|
122
|
-
/**
|
|
123
|
-
* User roles
|
|
124
|
-
*/
|
|
125
|
-
this.userRoles = 'everyone';
|
|
126
|
-
/**
|
|
127
|
-
* Show slider navigate arrows
|
|
128
|
-
*/
|
|
129
|
-
this.showSliderArrows = true;
|
|
130
|
-
/**
|
|
131
|
-
* Show slider navigate arrows on mobile
|
|
132
|
-
*/
|
|
133
|
-
this.showSliderArrowsMobile = true;
|
|
134
|
-
/**
|
|
135
|
-
* You will see a fixed grid without a slider when using a mobile device.
|
|
136
|
-
*/
|
|
137
|
-
this.showMobileGrid = false;
|
|
138
|
-
/**
|
|
139
|
-
* Set if you want to have a slider on mobile device.
|
|
140
|
-
*/
|
|
141
|
-
this.showNavigationSliderMobile = true;
|
|
142
|
-
/**
|
|
143
|
-
* Set if you want to have a slider on desktop.
|
|
144
|
-
*/
|
|
145
|
-
this.showNavigationSliderDesktop = true;
|
|
146
|
-
/**
|
|
147
|
-
* Specify the number of items you would like to be displayed on desktop.
|
|
148
|
-
*/
|
|
149
|
-
this.itemsPerPageDesktop = 3;
|
|
150
|
-
/**
|
|
151
|
-
* Specify the number of items you would like to be displayed on mobile devices.
|
|
152
|
-
*/
|
|
153
|
-
this.itemsPerPageMobile = 2;
|
|
154
|
-
this.isLoading = true;
|
|
155
|
-
this.limitStylingAppends = false;
|
|
156
|
-
this.hasErrors = false;
|
|
157
|
-
this.device = '';
|
|
158
|
-
this.activeIndex = 0;
|
|
159
|
-
this.sliderMenuElementWidth = 0;
|
|
160
|
-
this.userAgent = window.navigator.userAgent;
|
|
161
|
-
this.isMobile = isMobile(this.userAgent);
|
|
162
|
-
this.allElementsWidth = 0;
|
|
163
|
-
this.xDown = null;
|
|
164
|
-
this.yDown = null;
|
|
165
|
-
this.resizeHandler = () => {
|
|
166
|
-
this.calculateSliderWidth();
|
|
167
|
-
};
|
|
168
|
-
this.orientationChangeHandler = () => {
|
|
169
|
-
setTimeout(() => {
|
|
170
|
-
this.calculateSliderWidth();
|
|
171
|
-
}, 10);
|
|
172
|
-
};
|
|
173
|
-
this.navigationTo = (url, target, isExternal) => {
|
|
174
|
-
window.postMessage({ type: 'NavigateTo', path: url, target: target || null, externalLink: isExternal || false }, window.location.href);
|
|
175
|
-
};
|
|
176
|
-
this.setImage = (image) => {
|
|
177
|
-
let source = '';
|
|
178
|
-
this.device = checkDeviceType();
|
|
179
|
-
switch (this.device) {
|
|
180
|
-
case 'mobile':
|
|
181
|
-
source = image.srcMobile;
|
|
182
|
-
break;
|
|
183
|
-
case 'tablet':
|
|
184
|
-
source = image.srcTablet;
|
|
185
|
-
break;
|
|
186
|
-
case 'desktop':
|
|
187
|
-
source = image.srcDesktop;
|
|
188
|
-
break;
|
|
189
|
-
}
|
|
190
|
-
return source;
|
|
191
|
-
};
|
|
192
|
-
this.setClientStyling = () => {
|
|
193
|
-
let sheet = document.createElement('style');
|
|
194
|
-
sheet.innerHTML = this.clientStyling;
|
|
195
|
-
this.stylingContainer.prepend(sheet);
|
|
196
|
-
};
|
|
197
|
-
this.setClientStylingURL = () => {
|
|
198
|
-
let url = new URL(this.clientStylingUrl);
|
|
199
|
-
let cssFile = document.createElement('style');
|
|
200
|
-
fetch(url.href)
|
|
201
|
-
.then((res) => res.text())
|
|
202
|
-
.then((data) => {
|
|
203
|
-
cssFile.innerHTML = data;
|
|
204
|
-
setTimeout(() => { this.stylingContainer.prepend(cssFile); }, 1);
|
|
205
|
-
})
|
|
206
|
-
.catch((err) => {
|
|
207
|
-
console.log('error ', err);
|
|
208
|
-
});
|
|
209
|
-
};
|
|
210
|
-
}
|
|
211
|
-
watchEndpoint(newValue, oldValue) {
|
|
212
|
-
if (newValue && newValue != oldValue && this.cmsEndpoint) {
|
|
213
|
-
this.getGeneralSliderNavigation().then((GeneralSliderNavigation) => {
|
|
214
|
-
this.sliderData = GeneralSliderNavigation;
|
|
215
|
-
});
|
|
216
|
-
}
|
|
217
|
-
}
|
|
218
|
-
connectedCallback() {
|
|
219
|
-
window.screen.orientation.addEventListener('change', this.orientationChangeHandler);
|
|
220
|
-
}
|
|
221
|
-
componentWillLoad() {
|
|
222
|
-
if (this.cmsEndpoint && this.language) {
|
|
223
|
-
return this.getGeneralSliderNavigation().then((GeneralSliderNavigation) => {
|
|
224
|
-
this.sliderData = GeneralSliderNavigation;
|
|
225
|
-
});
|
|
226
|
-
}
|
|
227
|
-
}
|
|
228
|
-
componentDidLoad() {
|
|
229
|
-
window.addEventListener('resize', this.resizeHandler);
|
|
230
|
-
}
|
|
231
|
-
componentDidRender() {
|
|
232
|
-
this.el.addEventListener('touchstart', this.handleTouchStart.bind(this), { passive: true });
|
|
233
|
-
this.el.addEventListener('touchmove', this.handleTouchMove.bind(this), { passive: true });
|
|
234
|
-
// start custom styling area
|
|
235
|
-
if (!this.limitStylingAppends && this.stylingContainer) {
|
|
236
|
-
if (this.clientStyling)
|
|
237
|
-
this.setClientStyling();
|
|
238
|
-
this.limitStylingAppends = true;
|
|
239
|
-
}
|
|
240
|
-
// end custom styling area
|
|
241
|
-
}
|
|
242
|
-
componentDidUpdate() {
|
|
243
|
-
this.calculateSliderWidth();
|
|
244
|
-
}
|
|
245
|
-
disconnectedCallback() {
|
|
246
|
-
this.el.removeEventListener('touchstart', this.handleTouchStart);
|
|
247
|
-
this.el.removeEventListener('touchmove', this.handleTouchMove);
|
|
248
|
-
window.screen.orientation.removeEventListener('change', this.orientationChangeHandler);
|
|
249
|
-
window.removeEventListener('resize', this.resizeHandler);
|
|
250
|
-
}
|
|
251
|
-
getGeneralSliderNavigation() {
|
|
252
|
-
let url = new URL(`${this.cmsEndpoint}/${this.language}/homepage`);
|
|
253
|
-
url.searchParams.append('env', this.cmsEnv);
|
|
254
|
-
url.searchParams.append('userRoles', this.userRoles);
|
|
255
|
-
url.searchParams.append('device', getDevicePlatform());
|
|
256
|
-
return new Promise((resolve, reject) => {
|
|
257
|
-
this.isLoading = true;
|
|
258
|
-
fetch(url.href)
|
|
259
|
-
.then((res) => res.json())
|
|
260
|
-
.then((menuSliderData) => {
|
|
261
|
-
resolve(menuSliderData.banners);
|
|
262
|
-
})
|
|
263
|
-
.catch((err) => {
|
|
264
|
-
console.error(err);
|
|
265
|
-
this.hasErrors = true;
|
|
266
|
-
reject(err);
|
|
267
|
-
}).finally(() => {
|
|
268
|
-
this.isLoading = false;
|
|
269
|
-
});
|
|
270
|
-
});
|
|
271
|
-
}
|
|
272
|
-
handleTouchStart(evt) {
|
|
273
|
-
const firstTouch = this.getTouches(evt)[0];
|
|
274
|
-
this.xDown = firstTouch.clientX;
|
|
275
|
-
this.yDown = firstTouch.clientY;
|
|
276
|
-
}
|
|
277
|
-
handleTouchMove(evt) {
|
|
278
|
-
if (!this.xDown || !this.yDown)
|
|
279
|
-
return;
|
|
280
|
-
let xUp = evt.touches[0].clientX;
|
|
281
|
-
let yUp = evt.touches[0].clientY;
|
|
282
|
-
let xDiff = this.xDown - xUp;
|
|
283
|
-
let yDiff = this.yDown - yUp;
|
|
284
|
-
if (Math.abs(xDiff) > Math.abs(yDiff)) {
|
|
285
|
-
if (xDiff > 0) {
|
|
286
|
-
this.move(1);
|
|
287
|
-
}
|
|
288
|
-
else {
|
|
289
|
-
this.move(-1);
|
|
290
|
-
}
|
|
291
|
-
}
|
|
292
|
-
this.xDown = null;
|
|
293
|
-
this.yDown = null;
|
|
294
|
-
}
|
|
295
|
-
;
|
|
296
|
-
calculateSliderWidth() {
|
|
297
|
-
if (!this.sliderMenuElement)
|
|
298
|
-
return;
|
|
299
|
-
this.sliderMenuElementWidth = this.sliderMenuElement.clientWidth;
|
|
300
|
-
}
|
|
301
|
-
;
|
|
302
|
-
getTouches(evt) {
|
|
303
|
-
return evt.touches || evt.originalEvent.touches;
|
|
304
|
-
}
|
|
305
|
-
setActive(index) {
|
|
306
|
-
const maxLength = Math.ceil(this.sliderData.length / (!this.isMobile ? this.itemsPerPageDesktop : this.itemsPerPageMobile));
|
|
307
|
-
if (index >= 0) {
|
|
308
|
-
if (index >= maxLength - 1) {
|
|
309
|
-
this.activeIndex = maxLength - 1;
|
|
310
|
-
}
|
|
311
|
-
else {
|
|
312
|
-
this.activeIndex = index;
|
|
313
|
-
}
|
|
314
|
-
}
|
|
315
|
-
else {
|
|
316
|
-
this.activeIndex = 0;
|
|
317
|
-
}
|
|
318
|
-
}
|
|
319
|
-
move(direction) {
|
|
320
|
-
this.setActive(this.activeIndex + direction);
|
|
321
|
-
}
|
|
322
|
-
;
|
|
323
|
-
goTo(index) {
|
|
324
|
-
let diff = this.activeIndex - index;
|
|
325
|
-
if (diff > 0) {
|
|
326
|
-
for (let i = 0; i < diff; i++) {
|
|
327
|
-
this.move(-1);
|
|
328
|
-
}
|
|
329
|
-
}
|
|
330
|
-
else {
|
|
331
|
-
for (let i = 0; i > diff; i--) {
|
|
332
|
-
this.move(1);
|
|
333
|
-
}
|
|
334
|
-
}
|
|
335
|
-
}
|
|
336
|
-
render() {
|
|
337
|
-
const styles = {
|
|
338
|
-
transform: `translate(${(+this.sliderMenuElementWidth * this.activeIndex) * -1}px, 0px)`
|
|
339
|
-
};
|
|
340
|
-
const itemStyleDesktop = {
|
|
341
|
-
width: `${this.sliderMenuElementWidth / Math.ceil(this.itemsPerPageDesktop)}px`
|
|
342
|
-
};
|
|
343
|
-
const itemStyleMobile = {
|
|
344
|
-
width: `${this.sliderMenuElementWidth / this.itemsPerPageMobile}px`
|
|
345
|
-
};
|
|
346
|
-
if (this.hasErrors) {
|
|
347
|
-
return (h("div", { class: "PageError" }, h("div", { class: "TitleError" }, translate('error', this.language))));
|
|
348
|
-
}
|
|
349
|
-
if (!this.isLoading) {
|
|
350
|
-
return (h("div", { ref: el => this.stylingContainer = el }, h("div", { class: "SliderWrapper" }, h("div", { class: "SliderWrapperContent", ref: (el) => this.slider = el }, ((this.showSliderArrows && !this.isMobile) || (this.showSliderArrowsMobile && this.isMobile)) &&
|
|
351
|
-
h("div", { class: this.activeIndex === 0 ? 'SliderNavButton DisabledArrow' : 'SliderNavButton', onClick: () => this.move(-1) }, h("svg", { fill: "none", stroke: "var(--emfe-w-color-secondary, #FD2839)", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, h("path", { "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", d: "M15 19l-7-7 7-7" }))), this.showNavigationSliderMobile && this.isMobile ? (h("main", null, h("div", { style: styles, ref: (el) => this.sliderMenuElement = el, class: "SliderItems" }, this.sliderData.map((data) => h("div", { class: "SliderItem", style: itemStyleMobile }, h("div", { class: "GridContainer", onClick: () => data.externalLink ? this.navigationTo(data.url, data.targetType, data.externalLink) : this.navigationTo(data.url, data.targetType, false) }, h("div", { class: "SliderImage" }, h("img", { src: this.setImage(data.image), alt: data.title })), h("div", { class: "SliderContent" }, h("div", { class: "DividerElement" }), h("div", { class: "Title" }, data.title)))))))) : (this.showNavigationSliderDesktop && !this.isMobile &&
|
|
352
|
-
h("main", null, h("div", { class: "SliderItems", style: styles, ref: (el) => this.sliderMenuElement = el }, h("div", { class: "SliderItemsWrapper" }, this.sliderData.map((data) => h("div", { class: "SliderItem", style: itemStyleDesktop }, h("div", { class: "GridContainer", onClick: () => data.externalLink ? this.navigationTo(data.url, data.targetType, data.externalLink) : this.navigationTo(data.url, data.targetType, false) }, h("div", { class: "SliderImage" }, h("img", { src: this.setImage(data.image), alt: data.title })), h("div", { class: "SliderContent" }, h("div", { class: "DividerElement" }), h("div", { class: "Title" }, data.title))))))))), ((this.showSliderArrows && !this.isMobile) || (this.showSliderArrowsMobile && this.isMobile)) &&
|
|
353
|
-
h("div", { class: this.activeIndex === Math.ceil(this.sliderData.length / (!this.isMobile ? this.itemsPerPageDesktop : this.itemsPerPageMobile)) - 1 ? ' SliderNavButton DisabledArrow disabled' : 'SliderNavButton', onClick: () => this.move(1) }, h("svg", { fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, h("path", { "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", d: "M9 5l7 7-7 7" }))))), (this.showMobileGrid && this.isMobile) &&
|
|
354
|
-
h("main", { class: "GridItems GridMobile" }, this.sliderData.map((dataMobile) => h("div", { class: "GridContainerMobile", onClick: () => dataMobile.externalLink ? this.navigationTo(dataMobile.url, dataMobile.targetType, dataMobile.externalLink) : this.navigationTo(dataMobile.url, dataMobile.targetType, false) }, h("div", { class: "SliderImage" }, h("img", { src: this.setImage(dataMobile.image), alt: dataMobile.title })), h("div", { class: "SliderContent" }, h("div", { class: "DividerElement" }), h("div", { class: "Title" }, dataMobile.title)))))));
|
|
355
|
-
}
|
|
356
|
-
}
|
|
357
|
-
get el() { return getElement(this); }
|
|
358
|
-
static get watchers() { return {
|
|
359
|
-
"cmsEndpoint": ["watchEndpoint"],
|
|
360
|
-
"language": ["watchEndpoint"]
|
|
361
|
-
}; }
|
|
362
|
-
};
|
|
363
|
-
GeneralSliderNavigation.style = generalSliderNavigationCss;
|
|
364
|
-
|
|
365
|
-
export { GeneralSliderNavigation as general_slider_navigation };
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import{r as n,h as i,g as e}from"./p-b72fe935.js";const t=["ro","en","fr","ar","hu","hr"],r={en:{error:"Error",noResults:"Loading, please wait ..."},hu:{error:"Error",noResults:"Loading, please wait ..."},ro:{error:"Eroare",noResults:"Loading, please wait ..."},fr:{error:"Error",noResults:"Loading, please wait ..."},ar:{error:"خطأ",noResults:"Loading, please wait ..."},hr:{error:"Greška",noResults:"Učitavanje, molimo pričekajte ..."},"pt-br":{error:"Erro",noResults:"Carregando, espere por favor…"},"es-mx":{error:"Error",noResults:"Cargando, espere por favor…"}},o=class{constructor(i){var e;n(this,i),this.clientStyling="",this.clientStylingUrl="",this.cmsEnv="stage",this.language="en",this.userRoles="everyone",this.showSliderArrows=!0,this.showSliderArrowsMobile=!0,this.showMobileGrid=!1,this.showNavigationSliderMobile=!0,this.showNavigationSliderDesktop=!0,this.itemsPerPageDesktop=3,this.itemsPerPageMobile=2,this.isLoading=!0,this.limitStylingAppends=!1,this.hasErrors=!1,this.device="",this.activeIndex=0,this.sliderMenuElementWidth=0,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.allElementsWidth=0,this.xDown=null,this.yDown=null,this.resizeHandler=()=>{this.calculateSliderWidth()},this.orientationChangeHandler=()=>{setTimeout((()=>{this.calculateSliderWidth()}),10)},this.navigationTo=(n,i,e)=>{window.postMessage({type:"NavigateTo",path:n,target:i||null,externalLink:e||!1},window.location.href)},this.setImage=n=>{let i="";switch(this.device=function(){const n=navigator.userAgent.toLowerCase(),i=screen.availWidth,e=screen.availHeight;if(n.includes("iphone"))return"mobile";if(n.includes("android")){if(e>i&&i<800)return"mobile";if(i>e&&e<800)return"tablet"}return"desktop"}(),this.device){case"mobile":i=n.srcMobile;break;case"tablet":i=n.srcTablet;break;case"desktop":i=n.srcDesktop}return i},this.setClientStyling=()=>{let n=document.createElement("style");n.innerHTML=this.clientStyling,this.stylingContainer.prepend(n)},this.setClientStylingURL=()=>{let n=new URL(this.clientStylingUrl),i=document.createElement("style");fetch(n.href).then((n=>n.text())).then((n=>{i.innerHTML=n,setTimeout((()=>{this.stylingContainer.prepend(i)}),1)})).catch((n=>{console.log("error ",n)}))}}watchEndpoint(n,i){n&&n!=i&&this.cmsEndpoint&&this.getGeneralSliderNavigation().then((n=>{this.sliderData=n}))}connectedCallback(){window.screen.orientation.addEventListener("change",this.orientationChangeHandler)}componentWillLoad(){if(this.cmsEndpoint&&this.language)return this.getGeneralSliderNavigation().then((n=>{this.sliderData=n}))}componentDidLoad(){window.addEventListener("resize",this.resizeHandler)}componentDidRender(){this.el.addEventListener("touchstart",this.handleTouchStart.bind(this),{passive:!0}),this.el.addEventListener("touchmove",this.handleTouchMove.bind(this),{passive:!0}),!this.limitStylingAppends&&this.stylingContainer&&(this.clientStyling&&this.setClientStyling(),this.limitStylingAppends=!0)}componentDidUpdate(){this.calculateSliderWidth()}disconnectedCallback(){this.el.removeEventListener("touchstart",this.handleTouchStart),this.el.removeEventListener("touchmove",this.handleTouchMove),window.screen.orientation.removeEventListener("change",this.orientationChangeHandler),window.removeEventListener("resize",this.resizeHandler)}getGeneralSliderNavigation(){let n=new URL(`${this.cmsEndpoint}/${this.language}/homepage`);return n.searchParams.append("env",this.cmsEnv),n.searchParams.append("userRoles",this.userRoles),n.searchParams.append("device",(()=>{const n=(()=>{let n=window.navigator.userAgent;return n.toLowerCase().match(/android/i)?"Android":n.toLowerCase().match(/iphone/i)?"iPhone":n.toLowerCase().match(/ipad|ipod/i)?"iPad":"PC"})();if(n)return"PC"===n?"dk":"iPad"===n||"iPhone"===n?"ios":"mtWeb"})()),new Promise(((i,e)=>{this.isLoading=!0,fetch(n.href).then((n=>n.json())).then((n=>{i(n.banners)})).catch((n=>{console.error(n),this.hasErrors=!0,e(n)})).finally((()=>{this.isLoading=!1}))}))}handleTouchStart(n){const i=this.getTouches(n)[0];this.xDown=i.clientX,this.yDown=i.clientY}handleTouchMove(n){if(!this.xDown||!this.yDown)return;let i=this.xDown-n.touches[0].clientX,e=this.yDown-n.touches[0].clientY;Math.abs(i)>Math.abs(e)&&this.move(i>0?1:-1),this.xDown=null,this.yDown=null}calculateSliderWidth(){this.sliderMenuElement&&(this.sliderMenuElementWidth=this.sliderMenuElement.clientWidth)}getTouches(n){return n.touches||n.originalEvent.touches}setActive(n){const i=Math.ceil(this.sliderData.length/(this.isMobile?this.itemsPerPageMobile:this.itemsPerPageDesktop));this.activeIndex=n>=0?n>=i-1?i-1:n:0}move(n){this.setActive(this.activeIndex+n)}goTo(n){let i=this.activeIndex-n;if(i>0)for(let n=0;n<i;n++)this.move(-1);else for(let n=0;n>i;n--)this.move(1)}render(){const n={transform:`translate(${+this.sliderMenuElementWidth*this.activeIndex*-1}px, 0px)`},e={width:this.sliderMenuElementWidth/Math.ceil(this.itemsPerPageDesktop)+"px"},o={width:this.sliderMenuElementWidth/this.itemsPerPageMobile+"px"};return this.hasErrors?i("div",{class:"PageError"},i("div",{class:"TitleError"},(()=>{const n=this.language;return r[void 0!==n&&t.includes(n)?n:"en"].error})())):this.isLoading?void 0:i("div",{ref:n=>this.stylingContainer=n},i("div",{class:"SliderWrapper"},i("div",{class:"SliderWrapperContent",ref:n=>this.slider=n},(this.showSliderArrows&&!this.isMobile||this.showSliderArrowsMobile&&this.isMobile)&&i("div",{class:0===this.activeIndex?"SliderNavButton DisabledArrow":"SliderNavButton",onClick:()=>this.move(-1)},i("svg",{fill:"none",stroke:"var(--emfe-w-color-secondary, #FD2839)",viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg"},i("path",{"stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"2",d:"M15 19l-7-7 7-7"}))),this.showNavigationSliderMobile&&this.isMobile?i("main",null,i("div",{style:n,ref:n=>this.sliderMenuElement=n,class:"SliderItems"},this.sliderData.map((n=>i("div",{class:"SliderItem",style:o},i("div",{class:"GridContainer",onClick:()=>this.navigationTo(n.url,n.targetType,!!n.externalLink&&n.externalLink)},i("div",{class:"SliderImage"},i("img",{src:this.setImage(n.image),alt:n.title})),i("div",{class:"SliderContent"},i("div",{class:"DividerElement"}),i("div",{class:"Title"},n.title)))))))):this.showNavigationSliderDesktop&&!this.isMobile&&i("main",null,i("div",{class:"SliderItems",style:n,ref:n=>this.sliderMenuElement=n},i("div",{class:"SliderItemsWrapper"},this.sliderData.map((n=>i("div",{class:"SliderItem",style:e},i("div",{class:"GridContainer",onClick:()=>this.navigationTo(n.url,n.targetType,!!n.externalLink&&n.externalLink)},i("div",{class:"SliderImage"},i("img",{src:this.setImage(n.image),alt:n.title})),i("div",{class:"SliderContent"},i("div",{class:"DividerElement"}),i("div",{class:"Title"},n.title))))))))),(this.showSliderArrows&&!this.isMobile||this.showSliderArrowsMobile&&this.isMobile)&&i("div",{class:this.activeIndex===Math.ceil(this.sliderData.length/(this.isMobile?this.itemsPerPageMobile:this.itemsPerPageDesktop))-1?" SliderNavButton DisabledArrow disabled":"SliderNavButton",onClick:()=>this.move(1)},i("svg",{fill:"none",stroke:"currentColor",viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg"},i("path",{"stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"2",d:"M9 5l7 7-7 7"}))))),this.showMobileGrid&&this.isMobile&&i("main",{class:"GridItems GridMobile"},this.sliderData.map((n=>i("div",{class:"GridContainerMobile",onClick:()=>this.navigationTo(n.url,n.targetType,!!n.externalLink&&n.externalLink)},i("div",{class:"SliderImage"},i("img",{src:this.setImage(n.image),alt:n.title})),i("div",{class:"SliderContent"},i("div",{class:"DividerElement"}),i("div",{class:"Title"},n.title)))))))}get el(){return e(this)}static get watchers(){return{cmsEndpoint:["watchEndpoint"],language:["watchEndpoint"]}}};o.style=":host {\n display: block;\n}\n\n.PageError {\n display: flex;\n justify-content: center;\n flex-direction: column;\n}\n.PageError.TitleError {\n color: red;\n}\n\nmain {\n width: 100%;\n overflow: hidden;\n}\n\n.SliderItemsWrapper {\n display: flex;\n flex-direction: row;\n width: 100%;\n}\n\n.SliderWrapperContent {\n display: flex;\n justify-content: center;\n flex-direction: row;\n width: 100%;\n}\n\n.SliderItems {\n display: flex;\n transition: transform 0.4s ease-in-out;\n transform: translateX(0px);\n}\n\n.SliderItem {\n flex: 0 0 auto;\n width: 100%;\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n align-items: center;\n border-radius: 5px;\n user-select: none;\n}\n\n.GridContainer {\n display: grid;\n grid-template-columns: 1fr;\n grid-template-rows: 1fr 1fr;\n gap: 0px 0px;\n margin: auto;\n width: 220px;\n height: 320px;\n border-radius: 5px;\n margin-bottom: 20px;\n background: var(--emfe-w-color-secondary, #FD2839);\n cursor: pointer;\n}\n.GridContainer .SliderImage {\n grid-area: 1/1/2/2;\n}\n.GridContainer .SliderImage img {\n object-fit: cover;\n height: 320px;\n width: 220px;\n border-radius: 5px;\n}\n.GridContainer .SliderContent {\n grid-area: 1/1/3/2;\n display: flex;\n flex-direction: column;\n flex-wrap: nowrap;\n justify-content: flex-end;\n align-items: baseline;\n gap: 5px;\n margin-left: 20px;\n margin-bottom: 20px;\n}\n.GridContainer .SliderContent .DividerElement {\n background: var(--emfe-w-color-secondary, #FD2839);\n height: 3px;\n width: 60px;\n}\n.GridContainer .SliderContent .Title {\n font-size: 22px;\n font-weight: 400;\n text-transform: uppercase;\n color: var(--emfe-w-color-white, #FFFFFF);\n}\n\n.GridItems {\n display: grid;\n grid-template-columns: 49vw 49vw;\n grid-template-rows: auto auto;\n place-content: unset;\n gap: 2vw;\n margin: 0;\n width: 100vw;\n}\n\n.GridContainerMobile {\n display: grid;\n grid-template-columns: 1fr;\n grid-template-rows: 1fr 1fr;\n gap: 0px 0px;\n margin: auto;\n width: 49vw;\n height: 240px;\n border-radius: 15px;\n background: var(--emfe-w-color-secondary, #FD2839);\n cursor: pointer;\n}\n.GridContainerMobile .SliderImage {\n grid-area: 1/1/2/2;\n}\n.GridContainerMobile .SliderImage img {\n width: 49vw;\n object-fit: cover;\n height: 240px;\n border-radius: 5px;\n}\n.GridContainerMobile .SliderContent {\n grid-area: 1/1/3/2;\n display: flex;\n flex-flow: column;\n justify-content: flex-end;\n align-items: baseline;\n gap: 5px;\n margin-left: 20px;\n margin-bottom: 20px;\n}\n.GridContainerMobile .SliderContent .DividerElement {\n background: var(--emfe-w-color-secondary, #FD2839);\n height: 3px;\n width: 60px;\n}\n.GridContainerMobile .SliderContent .Title {\n font-size: 22px;\n font-weight: 400;\n text-transform: uppercase;\n color: var(--emfe-w-color-white, #FFFFFF);\n}\n\n.GridContainerMobile:nth-last-child(1):nth-child(odd) {\n display: grid;\n gap: 0px 0px;\n margin: auto;\n width: 100vw;\n}\n.GridContainerMobile:nth-last-child(1):nth-child(odd) .SliderImage {\n grid-area: 1/1/2/2;\n}\n.GridContainerMobile:nth-last-child(1):nth-child(odd) .SliderImage img {\n width: 100vw;\n object-fit: cover;\n height: 240px;\n border-radius: 5px;\n}\n\n.SliderNavButton {\n border: 0px;\n width: 45px;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.SliderNavButton svg {\n width: 40px;\n stroke: var(--emfe-w-color-secondary, #FD2839);\n}\n\n.DisabledArrow svg {\n opacity: 0.2;\n stroke: var(--emfe-w-color-secondary, #FD2839);\n pointer-events: none;\n}\n\n@container (max-width: 475px) {\n .SliderItem {\n display: grid;\n grid-template-columns: repeat(auto-fill, max(250px, 1fr));\n color: var(--emfe-w-color-secondary, #FD2839);\n border-radius: 5px;\n user-select: none;\n }\n\n .GridContainer {\n display: grid;\n grid-template-columns: repeat(auto-fill, max(250px, 1fr));\n gap: 10px;\n margin: auto;\n width: 90%;\n height: 220px;\n border-radius: 5px;\n background: var(--emfe-w-color-secondary, #FD2839);\n cursor: pointer;\n }\n .GridContainer .SliderImage {\n grid-area: 1/1/2/2;\n }\n .GridContainer .SliderImage img {\n object-fit: cover;\n height: 220px;\n width: 100%;\n border-radius: 5px;\n }\n .GridContainer .SliderContent {\n grid-area: 1/1/3/2;\n display: flex;\n flex-direction: column;\n flex-wrap: nowrap;\n justify-content: flex-end;\n align-items: baseline;\n gap: 5px;\n margin-left: 20px;\n margin-bottom: 40px;\n }\n .GridContainer .SliderContent .DividerElement {\n background: var(--emfe-w-color-secondary, #FD2839);\n height: 3px;\n width: 60px;\n }\n .GridContainer .SliderContent .Title {\n font-size: 16px;\n font-weight: 400;\n text-transform: uppercase;\n color: var(--emfe-w-color-white, #FFFFFF);\n }\n\n .GridItems {\n display: grid;\n grid-template-columns: 1fr 1fr;\n grid-template-rows: auto auto auto auto;\n gap: 2cqw;\n width: 100cqw;\n justify-items: stretch;\n }\n\n .GridContainerMobile {\n display: grid;\n grid-template-columns: 1fr 1fr;\n grid-template-rows: 1fr 1fr;\n gap: 0px 0px;\n margin: auto;\n height: 200px;\n border-radius: 15px;\n background: white;\n cursor: pointer;\n }\n .GridContainerMobile .SliderImage {\n grid-area: 1/1/2/2;\n }\n .GridContainerMobile .SliderImage img {\n object-fit: cover;\n height: 200px;\n border-radius: 5px;\n }\n .GridContainerMobile .SliderContent {\n grid-area: 1/1/3/2;\n display: flex;\n flex-flow: column;\n justify-content: flex-end;\n align-items: baseline;\n gap: 5px;\n margin-left: 20px;\n margin-bottom: 20px;\n }\n .GridContainerMobile .SliderContent .DividerElement {\n background: var(--emfe-w-color-secondary, #FD2839);\n height: 3px;\n width: 60px;\n }\n .GridContainerMobile .SliderContent .Title {\n font-size: 22px;\n font-weight: 400;\n text-transform: uppercase;\n color: var(--emfe-w-color-white, #FFFFFF);\n }\n}";export{o as general_slider_navigation}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
let e,t,n=!1,l=!1;const s="undefined"!=typeof window?window:{},o=s.document||{head:{}},i={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)},r=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={},d=e=>"object"==(e=typeof e)||"function"===e,h=(e,t,...n)=>{let l=null,s=!1,o=!1,i=[];const r=t=>{for(let n=0;n<t.length;n++)l=t[n],Array.isArray(l)?r(l):null!=l&&"boolean"!=typeof l&&((s="function"!=typeof e&&!d(l))&&(l+=""),s&&o?i[i.length-1].i+=l:i.push(s?p(null,l):l),o=s)};if(r(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,i.length>0&&(c.h=i),c},p=(e,t)=>({t:0,p:e,i:t,$:null,h:null,u:null}),$={},m=(e,t,n,l,o,r)=>{if(n!==l){let c=z(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=d(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&r||o)&&!s&&e.setAttribute(t,l=!0===l?"":l)}else t="-"===t[2]?t.slice(3):z(s,a)?a.slice(2):a[2]+t.slice(3),n&&i.rel(e,t,n,!1),l&&i.ael(e,t,l,!1)}},y=/\s/,w=e=>e?e.split(y):[],b=(e,t,n,l)=>{const s=11===t.$.nodeType&&t.$.host?t.$.host:t.$,o=e&&e.u||f,i=t.u||f;for(l in o)l in i||m(s,l,o[l],void 0,n,t.t);for(l in i)m(s,l,o[l],i[l],n,t.t)},g=(t,l,s)=>{let i,r,c=l.h[s],a=0;if(null!==c.i)i=c.$=o.createTextNode(c.i);else{if(n||(n="svg"===c.p),i=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&&i["s-si"]!==e&&i.classList.add(i["s-si"]=e),c.h)for(a=0;a<c.h.length;++a)r=g(t,c,a),r&&i.appendChild(r);"svg"===c.p?n=!1:"foreignObject"===i.tagName&&(n=!0)}return i},v=(e,n,l,s,o,i)=>{let r,c=e;for(c.shadowRoot&&c.tagName===t&&(c=c.shadowRoot);o<=i;++o)s[o]&&(r=g(null,l,o),r&&(s[o].$=r,c.insertBefore(r,n)))},S=(e,t,n,l,s)=>{for(;t<=n;++t)(l=e[t])&&(s=l.$,k(l),s.remove())},j=(e,t)=>e.p===t.p,O=(e,t)=>{const l=t.$=e.$,s=e.h,o=t.h,i=t.p,r=t.i;null===r?(n="svg"===i||"foreignObject"!==i&&n,b(e,t,n),null!==s&&null!==o?((e,t,n,l)=>{let s,o=0,i=0,r=t.length-1,c=t[0],a=t[r],u=l.length-1,f=l[0],d=l[u];for(;o<=r&&i<=u;)null==c?c=t[++o]:null==a?a=t[--r]:null==f?f=l[++i]:null==d?d=l[--u]:j(c,f)?(O(c,f),c=t[++o],f=l[++i]):j(a,d)?(O(a,d),a=t[--r],d=l[--u]):j(c,d)?(O(c,d),e.insertBefore(c.$,a.$.nextSibling),c=t[++o],d=l[--u]):j(a,f)?(O(a,f),e.insertBefore(a.$,c.$),a=t[--r],f=l[++i]):(s=g(t&&t[i],n,i),f=l[++i],s&&c.$.parentNode.insertBefore(s,c.$));o>r?v(e,null==l[u+1]?null:l[u+1].$,n,l,i,u):i>u&&S(t,o,r)})(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"===i&&(n=!1)):e.i!==r&&(l.data=r)},k=e=>{e.u&&e.u.ref&&e.u.ref(null),e.h&&e.h.map(k)},C=e=>H(e).m,M=(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 M(e,e.v),te((()=>L(e,t)));e.t|=512},L=(e,t)=>{const n=e.S;let l;return t&&(l=R(n,"componentWillLoad")),T(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=J.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);D(e,t),s&&(s.map((e=>e())),l["s-rc"]=void 0);{const t=l["s-p"],n=()=>E(e);0===t.length?n():(Promise.all(t).then(n),e.t|=4,t.length=0)}},D=(n,l)=>{try{l=l.render(),n.t&=-17,n.t|=2,((n,l)=>{const s=n.m,o=n.j,i=n.O||p(null,null),r=(e=>e&&e.p===$)(l)?l:h(null,null,l);t=s.tagName,o.k&&(r.u=r.u||{},o.k.map((([e,t])=>r.u[t]=s[e]))),r.p=null,r.t|=4,n.O=r,r.$=i.$=s.shadowRoot||s,e=s["s-sc"],O(i,r)})(n,l)}catch(e){B(e,n.m)}return null},E=e=>{const t=e.m,n=e.S,l=e.v;R(n,"componentDidRender"),64&e.t?R(n,"componentDidUpdate"):(e.t|=64,U(t),R(n,"componentDidLoad"),e.C(t),l||N()),e.g&&(e.g(),e.g=void 0),512&e.t&&ee((()=>x(e,!1))),e.t&=-517},N=()=>{U(o.documentElement),ee((()=>(e=>{const t=i.ce("appload",{detail:{namespace:"general-slider-navigation"}});return e.dispatchEvent(t),t})(s)))},R=(e,t,n)=>{if(e&&e[t])try{return e[t](n)}catch(e){B(e)}},T=(e,t)=>e&&e.then?e.then(t):t(),U=e=>e.classList.add("hydrated"),W=(e,t,n)=>{if(t.M){e.watchers&&(t.L=e.watchers);const l=Object.entries(t.M),s=e.prototype;if(l.map((([e,[l]])=>{(31&l||2&n&&32&l)&&Object.defineProperty(s,e,{get(){return((e,t)=>H(this).P.get(t))(0,e)},set(n){((e,t,n,l)=>{const s=H(e),o=s.m,i=s.P.get(t),r=s.t,c=s.S;if(n=((e,t)=>null==e||d(e)?e:4&t?"false"!==e&&(""===e||!!e):2&t?parseFloat(e):1&t?e+"":e)(n,l.M[t][0]),(!(8&r)||void 0===i)&&n!==i&&(!Number.isNaN(i)||!Number.isNaN(n))&&(s.P.set(t,n),c)){if(l.L&&128&r){const e=l.L[t];e&&e.map((e=>{try{c[e](n,i,t)}catch(e){B(e,o)}}))}2==(18&r)&&x(s,!1)}})(this,e,n,t)},configurable:!0,enumerable:!0})})),1&n){const n=new Map;s.attributeChangedCallback=function(e,t,l){i.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.k.push([e,s]),s}))}}return e},A=e=>{R(e,"connectedCallback")},F=(e,t={})=>{const n=[],l=t.exclude||[],r=s.customElements,a=o.head,f=a.querySelector("meta[charset]"),d=o.createElement("style"),h=[];let p,$=!0;Object.assign(i,t),i.l=new URL(t.resourcesUrl||"./",o.baseURI).href,e.map((e=>{e[1].map((t=>{const s={t:t[0],o:t[1],M:t[2],D:t[3]};s.M=t[2],s.k=[],s.L={};const o=s.o,a=class extends HTMLElement{constructor(e){super(e),_(e=this,s),1&s.t&&e.attachShadow({mode:"open"})}connectedCallback(){p&&(clearTimeout(p),p=null),$?h.push(this):i.jmp((()=>(e=>{if(0==(1&i.t)){const t=H(e),n=t.j,l=()=>{};if(1&t.t)A(t.S);else{t.t|=1;{let n=e;for(;n=n.parentNode||n.host;)if(n["s-p"]){M(t,t.v=n);break}}n.M&&Object.entries(n.M).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=I(n)).then){const e=()=>{};s=await s,e()}s.isProxied||(n.L=s.watchers,W(s,n,2),s.isProxied=!0);const e=()=>{};t.t|=8;try{new s(t)}catch(e){B(e)}t.t&=-9,t.t|=128,e(),A(t.S)}if(s.style){let e=s.style;const t=u(n);if(!J.has(t)){const l=()=>{};((e,t,n)=>{let l=J.get(e);c&&n?(l=l||new CSSStyleSheet,l.replace(t)):l=t,J.set(e,l)})(t,e,!!(1&n.t)),l()}}}const o=t.v,i=()=>x(t,!0);o&&o["s-rc"]?o["s-rc"].push(i):i()})(0,t,n)}l()}})(this)))}disconnectedCallback(){i.jmp((()=>(()=>{0==(1&i.t)&&R(H(this).S,"disconnectedCallback")})()))}componentOnReady(){return H(this).N}};s.R=e[0],l.includes(o)||r.get(o)||(n.push(o),r.define(o,W(a,s,1)))}))})),d.innerHTML=n+"{visibility:hidden}.hydrated{visibility:inherit}",d.setAttribute("data-styles",""),a.insertBefore(d,f?f.nextSibling:a.firstChild),$=!1,h.length?h.map((e=>e.connectedCallback())):i.jmp((()=>p=setTimeout(N,30)))},q=new WeakMap,H=e=>q.get(e),V=(e,t)=>q.set(t.S=e,t),_=(e,t)=>{const n={t:0,m:e,j:t,P:new Map};return n.N=new Promise((e=>n.C=e)),e["s-p"]=[],e["s-rc"]=[],q.set(e,n)},z=(e,t)=>t in e,B=(e,t)=>(0,console.error)(e,t),G=new Map,I=e=>{const t=e.o.replace(/-/g,"_"),n=e.R,l=G.get(n);return l?l[t]:import(`./${n}.entry.js`).then((e=>(G.set(n,e),e[t])),B)},J=new Map,K=[],Q=[],X=(e,t)=>n=>{e.push(n),l||(l=!0,t&&4&i.t?ee(Z):i.raf(Z))},Y=e=>{for(let t=0;t<e.length;t++)try{e[t](performance.now())}catch(e){B(e)}e.length=0},Z=()=>{Y(K),Y(Q),(l=K.length>0)&&i.raf(Z)},ee=e=>r().then(e),te=X(Q,!0);export{F as b,C as g,h,r as p,V as r}
|