@everymatrix/general-tutorial-slider 1.60.2 → 1.61.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.
@@ -2,7 +2,7 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- const index = require('./index-7f840d12.js');
5
+ const index = require('./index-2ae23085.js');
6
6
  const appGlobals = require('./app-globals-3a1e7e63.js');
7
7
 
8
8
  /*
@@ -19,7 +19,7 @@ var patchBrowser = () => {
19
19
 
20
20
  patchBrowser().then(async (options) => {
21
21
  await appGlobals.globalScripts();
22
- return index.bootstrapLazy([["general-tutorial-slider.cjs",[[1,"general-tutorial-slider",{"mbSource":[1,"mb-source"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"language":[513],"cmsEndpoint":[513,"cms-endpoint"],"userRoles":[513,"user-roles"],"cmsEnv":[513,"cms-env"],"showSliderDots":[516,"show-slider-dots"],"showSliderArrows":[516,"show-slider-arrows"],"showSliderArrowsMobile":[516,"show-slider-arrows-mobile"],"enableAutoScroll":[516,"enable-auto-scroll"],"intervalPeriod":[514,"interval-period"],"scrollItems":[520,"scroll-items"],"itemsPerPage":[514,"items-per-page"],"hasErrors":[32],"isLoading":[32],"activeIndex":[32],"tutorialElementWidth":[32]},null,{"cmsEndpoint":["watchEndpoint"],"language":["watchEndpoint"],"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingChangeURL"]}]]]], options);
22
+ return index.bootstrapLazy([["general-tutorial-slider_2.cjs",[[1,"general-tutorial-slider",{"mbSource":[1,"mb-source"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"language":[513],"cmsEndpoint":[513,"cms-endpoint"],"userRoles":[513,"user-roles"],"cmsEnv":[513,"cms-env"],"showSliderDots":[516,"show-slider-dots"],"showSliderArrows":[516,"show-slider-arrows"],"showSliderArrowsMobile":[516,"show-slider-arrows-mobile"],"enableAutoScroll":[516,"enable-auto-scroll"],"intervalPeriod":[514,"interval-period"],"scrollItems":[520,"scroll-items"],"itemsPerPage":[514,"items-per-page"],"hasErrors":[32],"isLoading":[32],"activeIndex":[32],"tutorialElementWidth":[32]},null,{"cmsEndpoint":["watchEndpoint"],"language":["watchEndpoint"],"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingChangeURL"]}],[0,"ui-image",{"src":[1],"width":[1],"height":[1],"alt":[1],"imgClass":[1,"img-class"],"styles":[8],"detectDistance":[1,"detect-distance"],"imgLoaded":[32],"shouldLoad":[32]},null,{"src":["handleSrc"]}]]]], options);
23
23
  });
24
24
 
25
25
  exports.setNonce = index.setNonce;
@@ -2,7 +2,7 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- const index = require('./index-7f840d12.js');
5
+ const index = require('./index-2ae23085.js');
6
6
 
7
7
  const DEFAULT_LANGUAGE = 'en';
8
8
  const TRANSLATIONS = {
@@ -141,7 +141,7 @@ const getDevicePlatform = () => {
141
141
  }
142
142
  };
143
143
 
144
- const generalTutorialSliderCss = ":host {\n display: block;\n}\n\n.GeneralTutorialSliderError {\n display: flex;\n justify-content: center;\n flex-direction: column;\n}\n.GeneralTutorialSliderError.TitleError {\n color: red;\n}\n\nmain {\n width: 100%;\n overflow: hidden;\n}\n\n.TutorialWrapper {\n width: 100%;\n display: flex;\n flex: 0 0 auto;\n justify-content: center;\n flex-direction: column;\n overflow: auto;\n}\n\n.TutorialContent {\n display: flex;\n justify-content: center;\n flex-direction: row;\n}\n\n.TutorialItems {\n display: flex;\n transition: transform 0.4s ease-in-out;\n transform: translateX(0px);\n}\n\n.TutorialItem {\n flex: 0 0 auto;\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n align-items: center;\n color: #000;\n background-color: #f5f5f5;\n border-radius: 5px;\n user-select: none;\n}\n.TutorialItem .ItemTitle {\n padding: 25px 15px;\n font-size: 18px;\n font-weight: 600;\n color: var(--emw--color-secondary, #FD2839);\n}\n.TutorialItem .ItemImage {\n overflow: hidden;\n}\n.TutorialItem .ItemImage img, .TutorialItem .ItemImage video {\n height: auto;\n width: 450px;\n}\n.TutorialItem .ItemDescription {\n font-size: 14px;\n padding: 25px 15px;\n font-weight: 400;\n color: #000;\n}\n\n.SliderNavButton {\n border: 0px;\n width: 25px;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.SliderNavButton svg {\n width: 20px;\n stroke: var(--emw--color-secondary, #FD2839);\n}\n\n.DisabledArrow svg {\n opacity: 0.2;\n stroke: var(--emw--color-secondary, #FD2839);\n pointer-events: none;\n}\n\n.DotsWrapper {\n width: 100%;\n margin: 0 auto;\n margin-top: 20px;\n height: 30px;\n}\n.DotsWrapper ul.Dots {\n display: flex;\n justify-content: center;\n padding: 0;\n}\n.DotsWrapper ul.Dots li {\n height: 10px;\n width: 10px;\n background: #ccc;\n border-radius: 50%;\n margin-left: 3px;\n margin-right: 3px;\n list-style: none;\n cursor: pointer;\n}\n.DotsWrapper ul.Dots li:hover {\n background: #bbb;\n}\n.DotsWrapper ul.Dots li.active {\n border: solid 1px var(--emw--color-secondary, #FD2839);\n background: var(--emw--color-secondary, #FD2839);\n}\n.DotsWrapper ul.Dots li.default {\n border: solid 1px var(--emw--color-secondary, #FD2839);\n background-color: #FFF;\n}\n\n@container (max-width: 475px) {\n @media screen and (orientation: landscape) {\n .TutorialItem {\n width: 100%;\n }\n }\n main {\n height: 90cqh;\n }\n .TutorialItems {\n height: inherit;\n }\n .TutorialItem {\n min-width: 100%;\n max-height: 800px;\n overflow: auto;\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n align-items: center;\n color: #000;\n background-color: #f5f5f5;\n border-radius: 5px;\n user-select: none;\n }\n .TutorialItem .ItemTitle {\n padding: 25px 15px;\n font-size: 18px;\n font-weight: 600;\n color: var(--emw--color-secondary, #FD2839);\n }\n .TutorialItem .ItemImage {\n min-height: 200px;\n }\n .TutorialItem .ItemImage img, .TutorialItem .ItemImage video {\n height: auto;\n width: 100%;\n }\n .TutorialItem .ItemDescription {\n font-size: 14px;\n padding: 25px 15px;\n font-weight: 400;\n color: #000;\n }\n}";
144
+ const generalTutorialSliderCss = ":host {\n display: block;\n}\n\n.GeneralTutorialSliderError {\n display: flex;\n justify-content: center;\n flex-direction: column;\n}\n.GeneralTutorialSliderError.TitleError {\n color: red;\n}\n\nmain {\n width: 100%;\n overflow: hidden;\n}\n\n.TutorialWrapper {\n width: 100%;\n display: flex;\n flex: 0 0 auto;\n justify-content: center;\n flex-direction: column;\n overflow: auto;\n}\n\n.TutorialContent {\n display: flex;\n justify-content: center;\n flex-direction: row;\n}\n\n.TutorialItems {\n display: flex;\n transition: transform 0.4s ease-in-out;\n transform: translateX(0px);\n}\n\n.TutorialItem {\n flex: 0 0 auto;\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n align-items: center;\n color: #000;\n background-color: #f5f5f5;\n border-radius: 5px;\n user-select: none;\n}\n.TutorialItem .ItemTitle {\n padding: 25px 15px;\n font-size: 18px;\n font-weight: 600;\n color: var(--emw--color-secondary, #FD2839);\n}\n.TutorialItem .ItemImage {\n overflow: hidden;\n}\n.TutorialItem .ItemImage ui-image, .TutorialItem .ItemImage video {\n height: auto;\n width: 450px;\n}\n.TutorialItem .ItemDescription {\n font-size: 14px;\n padding: 25px 15px;\n font-weight: 400;\n color: #000;\n}\n\n.SliderNavButton {\n border: 0px;\n width: 25px;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.SliderNavButton svg {\n width: 20px;\n stroke: var(--emw--color-secondary, #FD2839);\n}\n\n.DisabledArrow svg {\n opacity: 0.2;\n stroke: var(--emw--color-secondary, #FD2839);\n pointer-events: none;\n}\n\n.DotsWrapper {\n width: 100%;\n margin: 0 auto;\n margin-top: 20px;\n height: 30px;\n}\n.DotsWrapper ul.Dots {\n display: flex;\n justify-content: center;\n padding: 0;\n}\n.DotsWrapper ul.Dots li {\n height: 10px;\n width: 10px;\n background: #ccc;\n border-radius: 50%;\n margin-left: 3px;\n margin-right: 3px;\n list-style: none;\n cursor: pointer;\n}\n.DotsWrapper ul.Dots li:hover {\n background: #bbb;\n}\n.DotsWrapper ul.Dots li.active {\n border: solid 1px var(--emw--color-secondary, #FD2839);\n background: var(--emw--color-secondary, #FD2839);\n}\n.DotsWrapper ul.Dots li.default {\n border: solid 1px var(--emw--color-secondary, #FD2839);\n background-color: #FFF;\n}\n\n@container (max-width: 475px) {\n @media screen and (orientation: landscape) {\n .TutorialItem {\n width: 100%;\n }\n }\n main {\n height: 90cqh;\n }\n .TutorialItems {\n height: inherit;\n }\n .TutorialItem {\n min-width: 100%;\n max-height: 800px;\n overflow: auto;\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n align-items: center;\n color: #000;\n background-color: #f5f5f5;\n border-radius: 5px;\n user-select: none;\n }\n .TutorialItem .ItemTitle {\n padding: 25px 15px;\n font-size: 18px;\n font-weight: 600;\n color: var(--emw--color-secondary, #FD2839);\n }\n .TutorialItem .ItemImage {\n min-height: 200px;\n }\n .TutorialItem .ItemImage ui-image, .TutorialItem .ItemImage video {\n height: auto;\n width: 100%;\n }\n .TutorialItem .ItemDescription {\n font-size: 14px;\n padding: 25px 15px;\n font-weight: 400;\n color: #000;\n }\n}";
145
145
  const GeneralTutorialSliderStyle0 = generalTutorialSliderCss;
146
146
 
147
147
  const GeneralTutorialSlider = class {
@@ -344,7 +344,7 @@ const GeneralTutorialSlider = class {
344
344
  (this.showSliderArrowsMobile && this.isMobile)) &&
345
345
  index.h("div", { class: this.activeIndex === 0 ? 'SliderNavButton DisabledArrow' : 'SliderNavButton', onClick: () => this.move(-1) }, index.h("svg", { fill: "none", stroke: "var(--emw--color-secondary, #FD2839)", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", d: "M15 19l-7-7 7-7" }))), index.h("main", null, index.h("div", { style: styles, ref: (el) => this.tutorialsElement = el, class: "TutorialItems" }, this.tutorialData.map((data) => {
346
346
  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
347
- return index.h("div", { class: "TutorialItem", style: itemStyle }, index.h("div", { class: "ItemTitle", innerHTML: data === null || data === void 0 ? void 0 : data.title }), ((_a = data === null || data === void 0 ? void 0 : data.media) === null || _a === void 0 ? void 0 : _a.images) ? (index.h("div", { class: "ItemImage" }, this.isMobile ? (index.h("img", { src: (_e = (_d = (_c = (_b = data === null || data === void 0 ? void 0 : data.media) === null || _b === void 0 ? void 0 : _b.images[0]) === null || _c === void 0 ? void 0 : _c.sources) === null || _d === void 0 ? void 0 : _d.find((source) => source.media === 'mobile')) === null || _e === void 0 ? void 0 : _e.src, alt: data === null || data === void 0 ? void 0 : data.slug })) : (index.h("img", { src: (_j = (_h = (_g = (_f = data === null || data === void 0 ? void 0 : data.media) === null || _f === void 0 ? void 0 : _f.images[0]) === null || _g === void 0 ? void 0 : _g.sources) === null || _h === void 0 ? void 0 : _h.find((source) => source.media === 'desktop')) === null || _j === void 0 ? void 0 : _j.src, alt: data === null || data === void 0 ? void 0 : data.slug })))) : ((_k = data === null || data === void 0 ? void 0 : data.media) === null || _k === void 0 ? void 0 : _k.video) ? (index.h("div", { class: "ItemImage" }, this.isMobile ? (index.h("video", { controls: true, loop: true, autoplay: true }, index.h("source", { src: (_p = (_o = (_m = (_l = data === null || data === void 0 ? void 0 : data.media) === null || _l === void 0 ? void 0 : _l.video[0]) === null || _m === void 0 ? void 0 : _m.sources) === null || _o === void 0 ? void 0 : _o.find((source) => source.media === 'mobile')) === null || _p === void 0 ? void 0 : _p.src, type: "video/mp4" }))) : (index.h("video", { controls: true, loop: true, autoplay: true }, index.h("source", { src: (_t = (_s = (_r = (_q = data === null || data === void 0 ? void 0 : data.media) === null || _q === void 0 ? void 0 : _q.video[0]) === null || _r === void 0 ? void 0 : _r.sources) === null || _s === void 0 ? void 0 : _s.find((source) => source.media === 'desktop')) === null || _t === void 0 ? void 0 : _t.src, type: "video/mp4" }))))) : null, index.h("div", { class: "ItemDescription", innerHTML: data === null || data === void 0 ? void 0 : data.content }));
347
+ return index.h("div", { class: "TutorialItem", style: itemStyle }, index.h("div", { class: "ItemTitle", innerHTML: data === null || data === void 0 ? void 0 : data.title }), ((_a = data === null || data === void 0 ? void 0 : data.media) === null || _a === void 0 ? void 0 : _a.images) ? (index.h("div", { class: "ItemImage" }, this.isMobile ? (index.h("ui-image", { src: (_e = (_d = (_c = (_b = data === null || data === void 0 ? void 0 : data.media) === null || _b === void 0 ? void 0 : _b.images[0]) === null || _c === void 0 ? void 0 : _c.sources) === null || _d === void 0 ? void 0 : _d.find((source) => source.media === 'mobile')) === null || _e === void 0 ? void 0 : _e.src, alt: data === null || data === void 0 ? void 0 : data.slug })) : (index.h("ui-image", { src: (_j = (_h = (_g = (_f = data === null || data === void 0 ? void 0 : data.media) === null || _f === void 0 ? void 0 : _f.images[0]) === null || _g === void 0 ? void 0 : _g.sources) === null || _h === void 0 ? void 0 : _h.find((source) => source.media === 'desktop')) === null || _j === void 0 ? void 0 : _j.src, alt: data === null || data === void 0 ? void 0 : data.slug })))) : ((_k = data === null || data === void 0 ? void 0 : data.media) === null || _k === void 0 ? void 0 : _k.video) ? (index.h("div", { class: "ItemImage" }, this.isMobile ? (index.h("video", { controls: true, loop: true, autoplay: true }, index.h("source", { src: (_p = (_o = (_m = (_l = data === null || data === void 0 ? void 0 : data.media) === null || _l === void 0 ? void 0 : _l.video[0]) === null || _m === void 0 ? void 0 : _m.sources) === null || _o === void 0 ? void 0 : _o.find((source) => source.media === 'mobile')) === null || _p === void 0 ? void 0 : _p.src, type: "video/mp4" }))) : (index.h("video", { controls: true, loop: true, autoplay: true }, index.h("source", { src: (_t = (_s = (_r = (_q = data === null || data === void 0 ? void 0 : data.media) === null || _q === void 0 ? void 0 : _q.video[0]) === null || _r === void 0 ? void 0 : _r.sources) === null || _s === void 0 ? void 0 : _s.find((source) => source.media === 'desktop')) === null || _t === void 0 ? void 0 : _t.src, type: "video/mp4" }))))) : null, index.h("div", { class: "ItemDescription", innerHTML: data === null || data === void 0 ? void 0 : data.content }));
348
348
  }))), ((this.showSliderArrows && !this.isMobile) ||
349
349
  (this.showSliderArrowsMobile && this.isMobile)) &&
350
350
  index.h("div", { class: this.activeIndex === this.tutorialData.length - 1 ? ' SliderNavButton DisabledArrow disabled' : 'SliderNavButton', onClick: () => this.move(1) }, index.h("svg", { fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", d: "M9 5l7 7-7 7" }))), index.h("div", null)), this.showSliderDots &&
@@ -361,4 +361,69 @@ const GeneralTutorialSlider = class {
361
361
  };
362
362
  GeneralTutorialSlider.style = GeneralTutorialSliderStyle0;
363
363
 
364
+ const uiImageCss = ":host{display:block}.Hidden{opacity:0;transition:opacity 0.5s ease-in-out}.Visible{opacity:1;transition:opacity 0.5s ease-in-out}";
365
+ const UiImageStyle0 = uiImageCss;
366
+
367
+ const UiImage = class {
368
+ constructor(hostRef) {
369
+ index.registerInstance(this, hostRef);
370
+ this.src = undefined;
371
+ this.width = undefined;
372
+ this.height = undefined;
373
+ this.alt = undefined;
374
+ this.imgClass = '';
375
+ this.styles = undefined;
376
+ this.detectDistance = '200px';
377
+ this.imgLoaded = false;
378
+ this.shouldLoad = false;
379
+ }
380
+ handleSrc() {
381
+ if (!this.shouldLoad) {
382
+ return;
383
+ }
384
+ const tempImage = new Image();
385
+ tempImage.src = this.src;
386
+ tempImage.onload = () => {
387
+ if (this.image) {
388
+ this.image.src = this.src;
389
+ this.imgLoaded = true;
390
+ this.el.dispatchEvent(new CustomEvent('load', { bubbles: true }));
391
+ }
392
+ };
393
+ }
394
+ componentDidLoad() {
395
+ if ('IntersectionObserver' in window) {
396
+ this.el.__uxComponent = this;
397
+ if (!window.EMUxObserver) {
398
+ window.EMUxObserver = new IntersectionObserver((entries) => {
399
+ entries.forEach(entry => {
400
+ if (entry.isIntersecting) {
401
+ const comp = entry.target.__uxComponent;
402
+ if (comp) {
403
+ comp.shouldLoad = true;
404
+ comp.handleSrc();
405
+ }
406
+ window.EMUxObserver.unobserve(entry.target);
407
+ }
408
+ });
409
+ }, { rootMargin: this.detectDistance });
410
+ }
411
+ window.EMUxObserver.observe(this.el);
412
+ }
413
+ else {
414
+ this.shouldLoad = true;
415
+ this.handleSrc();
416
+ }
417
+ }
418
+ render() {
419
+ return (index.h("img", { key: '2bb4dc391fc2f753514103e91c0abf065de3236a', ref: el => (this.image = el), style: this.styles, class: `${this.imgClass} ${this.imgLoaded ? 'Visible' : 'Hidden'}`, alt: this.alt, width: this.width, height: this.height, loading: "lazy" }));
420
+ }
421
+ get el() { return index.getElement(this); }
422
+ static get watchers() { return {
423
+ "src": ["handleSrc"]
424
+ }; }
425
+ };
426
+ UiImage.style = UiImageStyle0;
427
+
364
428
  exports.general_tutorial_slider = GeneralTutorialSlider;
429
+ exports.ui_image = UiImage;
@@ -21,7 +21,7 @@ function _interopNamespace(e) {
21
21
  }
22
22
 
23
23
  const NAMESPACE = 'general-tutorial-slider';
24
- const BUILD = /* general-tutorial-slider */ { allRenderFn: true, appendChildSlotFix: false, asyncLoading: true, asyncQueue: false, attachStyles: true, cloneNodeFix: false, cmpDidLoad: true, cmpDidRender: true, cmpDidUnload: false, cmpDidUpdate: true, cmpShouldUpdate: false, cmpWillLoad: true, cmpWillRender: false, cmpWillUpdate: false, connectedCallback: true, constructableCSS: true, cssAnnotations: true, devTools: false, disconnectedCallback: true, element: false, event: false, experimentalScopedSlotChanges: false, experimentalSlotFixes: false, formAssociated: false, hasRenderFn: true, hostListener: false, hostListenerTarget: false, hostListenerTargetBody: false, hostListenerTargetDocument: false, hostListenerTargetParent: false, hostListenerTargetWindow: false, hotModuleReplacement: false, hydrateClientSide: false, hydrateServerSide: false, hydratedAttribute: false, hydratedClass: true, hydratedSelectorName: "hydrated", initializeNextTick: false, invisiblePrehydration: true, isDebug: false, isDev: false, isTesting: false, lazyLoad: true, lifecycle: true, lifecycleDOMEvents: false, member: true, method: false, mode: false, observeAttribute: true, profile: false, prop: true, propBoolean: true, propMutable: false, propNumber: true, propString: true, reflect: true, scoped: false, scopedSlotTextContentFix: false, scriptDataOpts: false, shadowDelegatesFocus: false, shadowDom: true, slot: false, slotChildNodesFix: false, slotRelocation: false, state: true, style: true, svg: true, taskQueue: true, transformTagName: false, updatable: true, vdomAttribute: true, vdomClass: true, vdomFunctional: false, vdomKey: false, vdomListener: true, vdomPropOrAttr: true, vdomRef: true, vdomRender: true, vdomStyle: true, vdomText: true, vdomXlink: false, watchCallback: true };
24
+ const BUILD = /* general-tutorial-slider */ { allRenderFn: true, appendChildSlotFix: false, asyncLoading: true, asyncQueue: false, attachStyles: true, cloneNodeFix: false, cmpDidLoad: true, cmpDidRender: true, cmpDidUnload: false, cmpDidUpdate: true, cmpShouldUpdate: false, cmpWillLoad: true, cmpWillRender: false, cmpWillUpdate: false, connectedCallback: true, constructableCSS: true, cssAnnotations: true, devTools: false, disconnectedCallback: true, element: false, event: false, experimentalScopedSlotChanges: false, experimentalSlotFixes: false, formAssociated: false, hasRenderFn: true, hostListener: false, hostListenerTarget: false, hostListenerTargetBody: false, hostListenerTargetDocument: false, hostListenerTargetParent: false, hostListenerTargetWindow: false, hotModuleReplacement: false, hydrateClientSide: false, hydrateServerSide: false, hydratedAttribute: false, hydratedClass: true, hydratedSelectorName: "hydrated", initializeNextTick: false, invisiblePrehydration: true, isDebug: false, isDev: false, isTesting: false, lazyLoad: true, lifecycle: true, lifecycleDOMEvents: false, member: true, method: false, mode: false, observeAttribute: true, profile: false, prop: true, propBoolean: true, propMutable: false, propNumber: true, propString: true, reflect: true, scoped: false, scopedSlotTextContentFix: false, scriptDataOpts: false, shadowDelegatesFocus: false, shadowDom: true, slot: false, slotChildNodesFix: false, slotRelocation: false, state: true, style: true, svg: true, taskQueue: true, transformTagName: false, updatable: true, vdomAttribute: true, vdomClass: true, vdomFunctional: false, vdomKey: true, vdomListener: true, vdomPropOrAttr: true, vdomRef: true, vdomRender: true, vdomStyle: true, vdomText: true, vdomXlink: false, watchCallback: true };
25
25
 
26
26
  /*
27
27
  Stencil Client Platform v4.19.2 | MIT Licensed | https://stenciljs.com
@@ -71,10 +71,10 @@ var loadModule = (cmpMeta, hostRef, hmrVersionId) => {
71
71
  }
72
72
  switch(bundleId) {
73
73
 
74
- case 'general-tutorial-slider.cjs':
74
+ case 'general-tutorial-slider_2.cjs':
75
75
  return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
76
76
  /* webpackMode: "lazy" */
77
- './general-tutorial-slider.cjs.entry.js')); }).then(processMod, consoleError);
77
+ './general-tutorial-slider_2.cjs.entry.js')); }).then(processMod, consoleError);
78
78
  }
79
79
  }
80
80
  return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
@@ -233,6 +233,7 @@ var uniqueTime = (key, measureText) => {
233
233
  };
234
234
  var h = (nodeName, vnodeData, ...children) => {
235
235
  let child = null;
236
+ let key = null;
236
237
  let simple = false;
237
238
  let lastSimple = false;
238
239
  const vNodeChildren = [];
@@ -256,6 +257,9 @@ var h = (nodeName, vnodeData, ...children) => {
256
257
  };
257
258
  walk(children);
258
259
  if (vnodeData) {
260
+ if (vnodeData.key) {
261
+ key = vnodeData.key;
262
+ }
259
263
  {
260
264
  const classData = vnodeData.className || vnodeData.class;
261
265
  if (classData) {
@@ -268,6 +272,9 @@ var h = (nodeName, vnodeData, ...children) => {
268
272
  if (vNodeChildren.length > 0) {
269
273
  vnode.$children$ = vNodeChildren;
270
274
  }
275
+ {
276
+ vnode.$key$ = key;
277
+ }
271
278
  return vnode;
272
279
  };
273
280
  var newVNode = (tag, text) => {
@@ -281,6 +288,9 @@ var newVNode = (tag, text) => {
281
288
  {
282
289
  vnode.$attrs$ = null;
283
290
  }
291
+ {
292
+ vnode.$key$ = null;
293
+ }
284
294
  return vnode;
285
295
  };
286
296
  var Host = {};
@@ -403,7 +413,7 @@ var setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags) => {
403
413
  }
404
414
  }
405
415
  }
406
- } else if (memberName === "ref") {
416
+ } else if (memberName === "key") ; else if (memberName === "ref") {
407
417
  if (newValue) {
408
418
  newValue(elm);
409
419
  }
@@ -567,6 +577,8 @@ var removeVnodes = (vnodes, startIdx, endIdx) => {
567
577
  var updateChildren = (parentElm, oldCh, newVNode2, newCh, isInitialRender = false) => {
568
578
  let oldStartIdx = 0;
569
579
  let newStartIdx = 0;
580
+ let idxInOld = 0;
581
+ let i2 = 0;
570
582
  let oldEndIdx = oldCh.length - 1;
571
583
  let oldStartVnode = oldCh[0];
572
584
  let oldEndVnode = oldCh[oldEndIdx];
@@ -574,6 +586,7 @@ var updateChildren = (parentElm, oldCh, newVNode2, newCh, isInitialRender = fals
574
586
  let newStartVnode = newCh[0];
575
587
  let newEndVnode = newCh[newEndIdx];
576
588
  let node;
589
+ let elmToMove;
577
590
  while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {
578
591
  if (oldStartVnode == null) {
579
592
  oldStartVnode = oldCh[++oldStartIdx];
@@ -602,7 +615,26 @@ var updateChildren = (parentElm, oldCh, newVNode2, newCh, isInitialRender = fals
602
615
  oldEndVnode = oldCh[--oldEndIdx];
603
616
  newStartVnode = newCh[++newStartIdx];
604
617
  } else {
618
+ idxInOld = -1;
605
619
  {
620
+ for (i2 = oldStartIdx; i2 <= oldEndIdx; ++i2) {
621
+ if (oldCh[i2] && oldCh[i2].$key$ !== null && oldCh[i2].$key$ === newStartVnode.$key$) {
622
+ idxInOld = i2;
623
+ break;
624
+ }
625
+ }
626
+ }
627
+ if (idxInOld >= 0) {
628
+ elmToMove = oldCh[idxInOld];
629
+ if (elmToMove.$tag$ !== newStartVnode.$tag$) {
630
+ node = createElm(oldCh && oldCh[newStartIdx], newVNode2, idxInOld);
631
+ } else {
632
+ patch(elmToMove, newStartVnode, isInitialRender);
633
+ oldCh[idxInOld] = void 0;
634
+ node = elmToMove.$elm$;
635
+ }
636
+ newStartVnode = newCh[++newStartIdx];
637
+ } else {
606
638
  node = createElm(oldCh && oldCh[newStartIdx], newVNode2, newStartIdx);
607
639
  newStartVnode = newCh[++newStartIdx];
608
640
  }
@@ -628,6 +660,9 @@ var updateChildren = (parentElm, oldCh, newVNode2, newCh, isInitialRender = fals
628
660
  };
629
661
  var isSameVnode = (leftVNode, rightVNode, isInitialRender = false) => {
630
662
  if (leftVNode.$tag$ === rightVNode.$tag$) {
663
+ if (!isInitialRender) {
664
+ return leftVNode.$key$ === rightVNode.$key$;
665
+ }
631
666
  return true;
632
667
  }
633
668
  return false;
@@ -2,13 +2,13 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- const index = require('./index-7f840d12.js');
5
+ const index = require('./index-2ae23085.js');
6
6
  const appGlobals = require('./app-globals-3a1e7e63.js');
7
7
 
8
8
  const defineCustomElements = async (win, options) => {
9
9
  if (typeof window === 'undefined') return undefined;
10
10
  await appGlobals.globalScripts();
11
- return index.bootstrapLazy([["general-tutorial-slider.cjs",[[1,"general-tutorial-slider",{"mbSource":[1,"mb-source"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"language":[513],"cmsEndpoint":[513,"cms-endpoint"],"userRoles":[513,"user-roles"],"cmsEnv":[513,"cms-env"],"showSliderDots":[516,"show-slider-dots"],"showSliderArrows":[516,"show-slider-arrows"],"showSliderArrowsMobile":[516,"show-slider-arrows-mobile"],"enableAutoScroll":[516,"enable-auto-scroll"],"intervalPeriod":[514,"interval-period"],"scrollItems":[520,"scroll-items"],"itemsPerPage":[514,"items-per-page"],"hasErrors":[32],"isLoading":[32],"activeIndex":[32],"tutorialElementWidth":[32]},null,{"cmsEndpoint":["watchEndpoint"],"language":["watchEndpoint"],"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingChangeURL"]}]]]], options);
11
+ return index.bootstrapLazy([["general-tutorial-slider_2.cjs",[[1,"general-tutorial-slider",{"mbSource":[1,"mb-source"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"language":[513],"cmsEndpoint":[513,"cms-endpoint"],"userRoles":[513,"user-roles"],"cmsEnv":[513,"cms-env"],"showSliderDots":[516,"show-slider-dots"],"showSliderArrows":[516,"show-slider-arrows"],"showSliderArrowsMobile":[516,"show-slider-arrows-mobile"],"enableAutoScroll":[516,"enable-auto-scroll"],"intervalPeriod":[514,"interval-period"],"scrollItems":[520,"scroll-items"],"itemsPerPage":[514,"items-per-page"],"hasErrors":[32],"isLoading":[32],"activeIndex":[32],"tutorialElementWidth":[32]},null,{"cmsEndpoint":["watchEndpoint"],"language":["watchEndpoint"],"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingChangeURL"]}],[0,"ui-image",{"src":[1],"width":[1],"height":[1],"alt":[1],"imgClass":[1,"img-class"],"styles":[8],"detectDistance":[1,"detect-distance"],"imgLoaded":[32],"shouldLoad":[32]},null,{"src":["handleSrc"]}]]]], options);
12
12
  };
13
13
 
14
14
  exports.setNonce = index.setNonce;
@@ -7,6 +7,13 @@
7
7
  "version": "4.19.2",
8
8
  "typescriptVersion": "5.4.5"
9
9
  },
10
- "collections": [],
10
+ "collections": [
11
+ {
12
+ "name": "@everymatrix/ui-image",
13
+ "tags": [
14
+ "ui-image"
15
+ ]
16
+ }
17
+ ],
11
18
  "bundles": []
12
19
  }
@@ -57,7 +57,7 @@ main {
57
57
  .TutorialItem .ItemImage {
58
58
  overflow: hidden;
59
59
  }
60
- .TutorialItem .ItemImage img, .TutorialItem .ItemImage video {
60
+ .TutorialItem .ItemImage ui-image, .TutorialItem .ItemImage video {
61
61
  height: auto;
62
62
  width: 450px;
63
63
  }
@@ -153,7 +153,7 @@ main {
153
153
  .TutorialItem .ItemImage {
154
154
  min-height: 200px;
155
155
  }
156
- .TutorialItem .ItemImage img, .TutorialItem .ItemImage video {
156
+ .TutorialItem .ItemImage ui-image, .TutorialItem .ItemImage video {
157
157
  height: auto;
158
158
  width: 100%;
159
159
  }
@@ -2,6 +2,7 @@ import { h } from "@stencil/core";
2
2
  import { translate } from "../../utils/locale.utils";
3
3
  import { setClientStyling, setClientStylingURL, setStreamStyling } from "../../../../../../../../libs/common/src/styling/index";
4
4
  import { isMobile, getDevicePlatform } from "../../utils/utils";
5
+ import "../../../../../ui-image/dist/types/index";
5
6
  export class GeneralTutorialSlider {
6
7
  constructor() {
7
8
  this.userAgent = window.navigator.userAgent;
@@ -201,7 +202,7 @@ export class GeneralTutorialSlider {
201
202
  (this.showSliderArrowsMobile && this.isMobile)) &&
202
203
  h("div", { class: this.activeIndex === 0 ? 'SliderNavButton DisabledArrow' : 'SliderNavButton', onClick: () => this.move(-1) }, h("svg", { fill: "none", stroke: "var(--emw--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" }))), h("main", null, h("div", { style: styles, ref: (el) => this.tutorialsElement = el, class: "TutorialItems" }, this.tutorialData.map((data) => {
203
204
  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
204
- return h("div", { class: "TutorialItem", style: itemStyle }, h("div", { class: "ItemTitle", innerHTML: data === null || data === void 0 ? void 0 : data.title }), ((_a = data === null || data === void 0 ? void 0 : data.media) === null || _a === void 0 ? void 0 : _a.images) ? (h("div", { class: "ItemImage" }, this.isMobile ? (h("img", { src: (_e = (_d = (_c = (_b = data === null || data === void 0 ? void 0 : data.media) === null || _b === void 0 ? void 0 : _b.images[0]) === null || _c === void 0 ? void 0 : _c.sources) === null || _d === void 0 ? void 0 : _d.find((source) => source.media === 'mobile')) === null || _e === void 0 ? void 0 : _e.src, alt: data === null || data === void 0 ? void 0 : data.slug })) : (h("img", { src: (_j = (_h = (_g = (_f = data === null || data === void 0 ? void 0 : data.media) === null || _f === void 0 ? void 0 : _f.images[0]) === null || _g === void 0 ? void 0 : _g.sources) === null || _h === void 0 ? void 0 : _h.find((source) => source.media === 'desktop')) === null || _j === void 0 ? void 0 : _j.src, alt: data === null || data === void 0 ? void 0 : data.slug })))) : ((_k = data === null || data === void 0 ? void 0 : data.media) === null || _k === void 0 ? void 0 : _k.video) ? (h("div", { class: "ItemImage" }, this.isMobile ? (h("video", { controls: true, loop: true, autoplay: true }, h("source", { src: (_p = (_o = (_m = (_l = data === null || data === void 0 ? void 0 : data.media) === null || _l === void 0 ? void 0 : _l.video[0]) === null || _m === void 0 ? void 0 : _m.sources) === null || _o === void 0 ? void 0 : _o.find((source) => source.media === 'mobile')) === null || _p === void 0 ? void 0 : _p.src, type: "video/mp4" }))) : (h("video", { controls: true, loop: true, autoplay: true }, h("source", { src: (_t = (_s = (_r = (_q = data === null || data === void 0 ? void 0 : data.media) === null || _q === void 0 ? void 0 : _q.video[0]) === null || _r === void 0 ? void 0 : _r.sources) === null || _s === void 0 ? void 0 : _s.find((source) => source.media === 'desktop')) === null || _t === void 0 ? void 0 : _t.src, type: "video/mp4" }))))) : null, h("div", { class: "ItemDescription", innerHTML: data === null || data === void 0 ? void 0 : data.content }));
205
+ return h("div", { class: "TutorialItem", style: itemStyle }, h("div", { class: "ItemTitle", innerHTML: data === null || data === void 0 ? void 0 : data.title }), ((_a = data === null || data === void 0 ? void 0 : data.media) === null || _a === void 0 ? void 0 : _a.images) ? (h("div", { class: "ItemImage" }, this.isMobile ? (h("ui-image", { src: (_e = (_d = (_c = (_b = data === null || data === void 0 ? void 0 : data.media) === null || _b === void 0 ? void 0 : _b.images[0]) === null || _c === void 0 ? void 0 : _c.sources) === null || _d === void 0 ? void 0 : _d.find((source) => source.media === 'mobile')) === null || _e === void 0 ? void 0 : _e.src, alt: data === null || data === void 0 ? void 0 : data.slug })) : (h("ui-image", { src: (_j = (_h = (_g = (_f = data === null || data === void 0 ? void 0 : data.media) === null || _f === void 0 ? void 0 : _f.images[0]) === null || _g === void 0 ? void 0 : _g.sources) === null || _h === void 0 ? void 0 : _h.find((source) => source.media === 'desktop')) === null || _j === void 0 ? void 0 : _j.src, alt: data === null || data === void 0 ? void 0 : data.slug })))) : ((_k = data === null || data === void 0 ? void 0 : data.media) === null || _k === void 0 ? void 0 : _k.video) ? (h("div", { class: "ItemImage" }, this.isMobile ? (h("video", { controls: true, loop: true, autoplay: true }, h("source", { src: (_p = (_o = (_m = (_l = data === null || data === void 0 ? void 0 : data.media) === null || _l === void 0 ? void 0 : _l.video[0]) === null || _m === void 0 ? void 0 : _m.sources) === null || _o === void 0 ? void 0 : _o.find((source) => source.media === 'mobile')) === null || _p === void 0 ? void 0 : _p.src, type: "video/mp4" }))) : (h("video", { controls: true, loop: true, autoplay: true }, h("source", { src: (_t = (_s = (_r = (_q = data === null || data === void 0 ? void 0 : data.media) === null || _q === void 0 ? void 0 : _q.video[0]) === null || _r === void 0 ? void 0 : _r.sources) === null || _s === void 0 ? void 0 : _s.find((source) => source.media === 'desktop')) === null || _t === void 0 ? void 0 : _t.src, type: "video/mp4" }))))) : null, h("div", { class: "ItemDescription", innerHTML: data === null || data === void 0 ? void 0 : data.content }));
205
206
  }))), ((this.showSliderArrows && !this.isMobile) ||
206
207
  (this.showSliderArrowsMobile && this.isMobile)) &&
207
208
  h("div", { class: this.activeIndex === this.tutorialData.length - 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" }))), h("div", null)), this.showSliderDots &&
@@ -1,5 +1,5 @@
1
- import { p as promiseResolve, b as bootstrapLazy } from './index-37276b41.js';
2
- export { s as setNonce } from './index-37276b41.js';
1
+ import { p as promiseResolve, b as bootstrapLazy } from './index-619abaf6.js';
2
+ export { s as setNonce } from './index-619abaf6.js';
3
3
  import { g as globalScripts } from './app-globals-0f993ce5.js';
4
4
 
5
5
  /*
@@ -16,5 +16,5 @@ var patchBrowser = () => {
16
16
 
17
17
  patchBrowser().then(async (options) => {
18
18
  await globalScripts();
19
- return bootstrapLazy([["general-tutorial-slider",[[1,"general-tutorial-slider",{"mbSource":[1,"mb-source"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"language":[513],"cmsEndpoint":[513,"cms-endpoint"],"userRoles":[513,"user-roles"],"cmsEnv":[513,"cms-env"],"showSliderDots":[516,"show-slider-dots"],"showSliderArrows":[516,"show-slider-arrows"],"showSliderArrowsMobile":[516,"show-slider-arrows-mobile"],"enableAutoScroll":[516,"enable-auto-scroll"],"intervalPeriod":[514,"interval-period"],"scrollItems":[520,"scroll-items"],"itemsPerPage":[514,"items-per-page"],"hasErrors":[32],"isLoading":[32],"activeIndex":[32],"tutorialElementWidth":[32]},null,{"cmsEndpoint":["watchEndpoint"],"language":["watchEndpoint"],"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingChangeURL"]}]]]], options);
19
+ return bootstrapLazy([["general-tutorial-slider_2",[[1,"general-tutorial-slider",{"mbSource":[1,"mb-source"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"language":[513],"cmsEndpoint":[513,"cms-endpoint"],"userRoles":[513,"user-roles"],"cmsEnv":[513,"cms-env"],"showSliderDots":[516,"show-slider-dots"],"showSliderArrows":[516,"show-slider-arrows"],"showSliderArrowsMobile":[516,"show-slider-arrows-mobile"],"enableAutoScroll":[516,"enable-auto-scroll"],"intervalPeriod":[514,"interval-period"],"scrollItems":[520,"scroll-items"],"itemsPerPage":[514,"items-per-page"],"hasErrors":[32],"isLoading":[32],"activeIndex":[32],"tutorialElementWidth":[32]},null,{"cmsEndpoint":["watchEndpoint"],"language":["watchEndpoint"],"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingChangeURL"]}],[0,"ui-image",{"src":[1],"width":[1],"height":[1],"alt":[1],"imgClass":[1,"img-class"],"styles":[8],"detectDistance":[1,"detect-distance"],"imgLoaded":[32],"shouldLoad":[32]},null,{"src":["handleSrc"]}]]]], options);
20
20
  });
@@ -1,4 +1,4 @@
1
- import { r as registerInstance, h, g as getElement } from './index-37276b41.js';
1
+ import { r as registerInstance, h, g as getElement } from './index-619abaf6.js';
2
2
 
3
3
  const DEFAULT_LANGUAGE = 'en';
4
4
  const TRANSLATIONS = {
@@ -137,7 +137,7 @@ const getDevicePlatform = () => {
137
137
  }
138
138
  };
139
139
 
140
- const generalTutorialSliderCss = ":host {\n display: block;\n}\n\n.GeneralTutorialSliderError {\n display: flex;\n justify-content: center;\n flex-direction: column;\n}\n.GeneralTutorialSliderError.TitleError {\n color: red;\n}\n\nmain {\n width: 100%;\n overflow: hidden;\n}\n\n.TutorialWrapper {\n width: 100%;\n display: flex;\n flex: 0 0 auto;\n justify-content: center;\n flex-direction: column;\n overflow: auto;\n}\n\n.TutorialContent {\n display: flex;\n justify-content: center;\n flex-direction: row;\n}\n\n.TutorialItems {\n display: flex;\n transition: transform 0.4s ease-in-out;\n transform: translateX(0px);\n}\n\n.TutorialItem {\n flex: 0 0 auto;\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n align-items: center;\n color: #000;\n background-color: #f5f5f5;\n border-radius: 5px;\n user-select: none;\n}\n.TutorialItem .ItemTitle {\n padding: 25px 15px;\n font-size: 18px;\n font-weight: 600;\n color: var(--emw--color-secondary, #FD2839);\n}\n.TutorialItem .ItemImage {\n overflow: hidden;\n}\n.TutorialItem .ItemImage img, .TutorialItem .ItemImage video {\n height: auto;\n width: 450px;\n}\n.TutorialItem .ItemDescription {\n font-size: 14px;\n padding: 25px 15px;\n font-weight: 400;\n color: #000;\n}\n\n.SliderNavButton {\n border: 0px;\n width: 25px;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.SliderNavButton svg {\n width: 20px;\n stroke: var(--emw--color-secondary, #FD2839);\n}\n\n.DisabledArrow svg {\n opacity: 0.2;\n stroke: var(--emw--color-secondary, #FD2839);\n pointer-events: none;\n}\n\n.DotsWrapper {\n width: 100%;\n margin: 0 auto;\n margin-top: 20px;\n height: 30px;\n}\n.DotsWrapper ul.Dots {\n display: flex;\n justify-content: center;\n padding: 0;\n}\n.DotsWrapper ul.Dots li {\n height: 10px;\n width: 10px;\n background: #ccc;\n border-radius: 50%;\n margin-left: 3px;\n margin-right: 3px;\n list-style: none;\n cursor: pointer;\n}\n.DotsWrapper ul.Dots li:hover {\n background: #bbb;\n}\n.DotsWrapper ul.Dots li.active {\n border: solid 1px var(--emw--color-secondary, #FD2839);\n background: var(--emw--color-secondary, #FD2839);\n}\n.DotsWrapper ul.Dots li.default {\n border: solid 1px var(--emw--color-secondary, #FD2839);\n background-color: #FFF;\n}\n\n@container (max-width: 475px) {\n @media screen and (orientation: landscape) {\n .TutorialItem {\n width: 100%;\n }\n }\n main {\n height: 90cqh;\n }\n .TutorialItems {\n height: inherit;\n }\n .TutorialItem {\n min-width: 100%;\n max-height: 800px;\n overflow: auto;\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n align-items: center;\n color: #000;\n background-color: #f5f5f5;\n border-radius: 5px;\n user-select: none;\n }\n .TutorialItem .ItemTitle {\n padding: 25px 15px;\n font-size: 18px;\n font-weight: 600;\n color: var(--emw--color-secondary, #FD2839);\n }\n .TutorialItem .ItemImage {\n min-height: 200px;\n }\n .TutorialItem .ItemImage img, .TutorialItem .ItemImage video {\n height: auto;\n width: 100%;\n }\n .TutorialItem .ItemDescription {\n font-size: 14px;\n padding: 25px 15px;\n font-weight: 400;\n color: #000;\n }\n}";
140
+ const generalTutorialSliderCss = ":host {\n display: block;\n}\n\n.GeneralTutorialSliderError {\n display: flex;\n justify-content: center;\n flex-direction: column;\n}\n.GeneralTutorialSliderError.TitleError {\n color: red;\n}\n\nmain {\n width: 100%;\n overflow: hidden;\n}\n\n.TutorialWrapper {\n width: 100%;\n display: flex;\n flex: 0 0 auto;\n justify-content: center;\n flex-direction: column;\n overflow: auto;\n}\n\n.TutorialContent {\n display: flex;\n justify-content: center;\n flex-direction: row;\n}\n\n.TutorialItems {\n display: flex;\n transition: transform 0.4s ease-in-out;\n transform: translateX(0px);\n}\n\n.TutorialItem {\n flex: 0 0 auto;\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n align-items: center;\n color: #000;\n background-color: #f5f5f5;\n border-radius: 5px;\n user-select: none;\n}\n.TutorialItem .ItemTitle {\n padding: 25px 15px;\n font-size: 18px;\n font-weight: 600;\n color: var(--emw--color-secondary, #FD2839);\n}\n.TutorialItem .ItemImage {\n overflow: hidden;\n}\n.TutorialItem .ItemImage ui-image, .TutorialItem .ItemImage video {\n height: auto;\n width: 450px;\n}\n.TutorialItem .ItemDescription {\n font-size: 14px;\n padding: 25px 15px;\n font-weight: 400;\n color: #000;\n}\n\n.SliderNavButton {\n border: 0px;\n width: 25px;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.SliderNavButton svg {\n width: 20px;\n stroke: var(--emw--color-secondary, #FD2839);\n}\n\n.DisabledArrow svg {\n opacity: 0.2;\n stroke: var(--emw--color-secondary, #FD2839);\n pointer-events: none;\n}\n\n.DotsWrapper {\n width: 100%;\n margin: 0 auto;\n margin-top: 20px;\n height: 30px;\n}\n.DotsWrapper ul.Dots {\n display: flex;\n justify-content: center;\n padding: 0;\n}\n.DotsWrapper ul.Dots li {\n height: 10px;\n width: 10px;\n background: #ccc;\n border-radius: 50%;\n margin-left: 3px;\n margin-right: 3px;\n list-style: none;\n cursor: pointer;\n}\n.DotsWrapper ul.Dots li:hover {\n background: #bbb;\n}\n.DotsWrapper ul.Dots li.active {\n border: solid 1px var(--emw--color-secondary, #FD2839);\n background: var(--emw--color-secondary, #FD2839);\n}\n.DotsWrapper ul.Dots li.default {\n border: solid 1px var(--emw--color-secondary, #FD2839);\n background-color: #FFF;\n}\n\n@container (max-width: 475px) {\n @media screen and (orientation: landscape) {\n .TutorialItem {\n width: 100%;\n }\n }\n main {\n height: 90cqh;\n }\n .TutorialItems {\n height: inherit;\n }\n .TutorialItem {\n min-width: 100%;\n max-height: 800px;\n overflow: auto;\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n align-items: center;\n color: #000;\n background-color: #f5f5f5;\n border-radius: 5px;\n user-select: none;\n }\n .TutorialItem .ItemTitle {\n padding: 25px 15px;\n font-size: 18px;\n font-weight: 600;\n color: var(--emw--color-secondary, #FD2839);\n }\n .TutorialItem .ItemImage {\n min-height: 200px;\n }\n .TutorialItem .ItemImage ui-image, .TutorialItem .ItemImage video {\n height: auto;\n width: 100%;\n }\n .TutorialItem .ItemDescription {\n font-size: 14px;\n padding: 25px 15px;\n font-weight: 400;\n color: #000;\n }\n}";
141
141
  const GeneralTutorialSliderStyle0 = generalTutorialSliderCss;
142
142
 
143
143
  const GeneralTutorialSlider = class {
@@ -340,7 +340,7 @@ const GeneralTutorialSlider = class {
340
340
  (this.showSliderArrowsMobile && this.isMobile)) &&
341
341
  h("div", { class: this.activeIndex === 0 ? 'SliderNavButton DisabledArrow' : 'SliderNavButton', onClick: () => this.move(-1) }, h("svg", { fill: "none", stroke: "var(--emw--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" }))), h("main", null, h("div", { style: styles, ref: (el) => this.tutorialsElement = el, class: "TutorialItems" }, this.tutorialData.map((data) => {
342
342
  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
343
- return h("div", { class: "TutorialItem", style: itemStyle }, h("div", { class: "ItemTitle", innerHTML: data === null || data === void 0 ? void 0 : data.title }), ((_a = data === null || data === void 0 ? void 0 : data.media) === null || _a === void 0 ? void 0 : _a.images) ? (h("div", { class: "ItemImage" }, this.isMobile ? (h("img", { src: (_e = (_d = (_c = (_b = data === null || data === void 0 ? void 0 : data.media) === null || _b === void 0 ? void 0 : _b.images[0]) === null || _c === void 0 ? void 0 : _c.sources) === null || _d === void 0 ? void 0 : _d.find((source) => source.media === 'mobile')) === null || _e === void 0 ? void 0 : _e.src, alt: data === null || data === void 0 ? void 0 : data.slug })) : (h("img", { src: (_j = (_h = (_g = (_f = data === null || data === void 0 ? void 0 : data.media) === null || _f === void 0 ? void 0 : _f.images[0]) === null || _g === void 0 ? void 0 : _g.sources) === null || _h === void 0 ? void 0 : _h.find((source) => source.media === 'desktop')) === null || _j === void 0 ? void 0 : _j.src, alt: data === null || data === void 0 ? void 0 : data.slug })))) : ((_k = data === null || data === void 0 ? void 0 : data.media) === null || _k === void 0 ? void 0 : _k.video) ? (h("div", { class: "ItemImage" }, this.isMobile ? (h("video", { controls: true, loop: true, autoplay: true }, h("source", { src: (_p = (_o = (_m = (_l = data === null || data === void 0 ? void 0 : data.media) === null || _l === void 0 ? void 0 : _l.video[0]) === null || _m === void 0 ? void 0 : _m.sources) === null || _o === void 0 ? void 0 : _o.find((source) => source.media === 'mobile')) === null || _p === void 0 ? void 0 : _p.src, type: "video/mp4" }))) : (h("video", { controls: true, loop: true, autoplay: true }, h("source", { src: (_t = (_s = (_r = (_q = data === null || data === void 0 ? void 0 : data.media) === null || _q === void 0 ? void 0 : _q.video[0]) === null || _r === void 0 ? void 0 : _r.sources) === null || _s === void 0 ? void 0 : _s.find((source) => source.media === 'desktop')) === null || _t === void 0 ? void 0 : _t.src, type: "video/mp4" }))))) : null, h("div", { class: "ItemDescription", innerHTML: data === null || data === void 0 ? void 0 : data.content }));
343
+ return h("div", { class: "TutorialItem", style: itemStyle }, h("div", { class: "ItemTitle", innerHTML: data === null || data === void 0 ? void 0 : data.title }), ((_a = data === null || data === void 0 ? void 0 : data.media) === null || _a === void 0 ? void 0 : _a.images) ? (h("div", { class: "ItemImage" }, this.isMobile ? (h("ui-image", { src: (_e = (_d = (_c = (_b = data === null || data === void 0 ? void 0 : data.media) === null || _b === void 0 ? void 0 : _b.images[0]) === null || _c === void 0 ? void 0 : _c.sources) === null || _d === void 0 ? void 0 : _d.find((source) => source.media === 'mobile')) === null || _e === void 0 ? void 0 : _e.src, alt: data === null || data === void 0 ? void 0 : data.slug })) : (h("ui-image", { src: (_j = (_h = (_g = (_f = data === null || data === void 0 ? void 0 : data.media) === null || _f === void 0 ? void 0 : _f.images[0]) === null || _g === void 0 ? void 0 : _g.sources) === null || _h === void 0 ? void 0 : _h.find((source) => source.media === 'desktop')) === null || _j === void 0 ? void 0 : _j.src, alt: data === null || data === void 0 ? void 0 : data.slug })))) : ((_k = data === null || data === void 0 ? void 0 : data.media) === null || _k === void 0 ? void 0 : _k.video) ? (h("div", { class: "ItemImage" }, this.isMobile ? (h("video", { controls: true, loop: true, autoplay: true }, h("source", { src: (_p = (_o = (_m = (_l = data === null || data === void 0 ? void 0 : data.media) === null || _l === void 0 ? void 0 : _l.video[0]) === null || _m === void 0 ? void 0 : _m.sources) === null || _o === void 0 ? void 0 : _o.find((source) => source.media === 'mobile')) === null || _p === void 0 ? void 0 : _p.src, type: "video/mp4" }))) : (h("video", { controls: true, loop: true, autoplay: true }, h("source", { src: (_t = (_s = (_r = (_q = data === null || data === void 0 ? void 0 : data.media) === null || _q === void 0 ? void 0 : _q.video[0]) === null || _r === void 0 ? void 0 : _r.sources) === null || _s === void 0 ? void 0 : _s.find((source) => source.media === 'desktop')) === null || _t === void 0 ? void 0 : _t.src, type: "video/mp4" }))))) : null, h("div", { class: "ItemDescription", innerHTML: data === null || data === void 0 ? void 0 : data.content }));
344
344
  }))), ((this.showSliderArrows && !this.isMobile) ||
345
345
  (this.showSliderArrowsMobile && this.isMobile)) &&
346
346
  h("div", { class: this.activeIndex === this.tutorialData.length - 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" }))), h("div", null)), this.showSliderDots &&
@@ -357,4 +357,68 @@ const GeneralTutorialSlider = class {
357
357
  };
358
358
  GeneralTutorialSlider.style = GeneralTutorialSliderStyle0;
359
359
 
360
- export { GeneralTutorialSlider as general_tutorial_slider };
360
+ const uiImageCss = ":host{display:block}.Hidden{opacity:0;transition:opacity 0.5s ease-in-out}.Visible{opacity:1;transition:opacity 0.5s ease-in-out}";
361
+ const UiImageStyle0 = uiImageCss;
362
+
363
+ const UiImage = class {
364
+ constructor(hostRef) {
365
+ registerInstance(this, hostRef);
366
+ this.src = undefined;
367
+ this.width = undefined;
368
+ this.height = undefined;
369
+ this.alt = undefined;
370
+ this.imgClass = '';
371
+ this.styles = undefined;
372
+ this.detectDistance = '200px';
373
+ this.imgLoaded = false;
374
+ this.shouldLoad = false;
375
+ }
376
+ handleSrc() {
377
+ if (!this.shouldLoad) {
378
+ return;
379
+ }
380
+ const tempImage = new Image();
381
+ tempImage.src = this.src;
382
+ tempImage.onload = () => {
383
+ if (this.image) {
384
+ this.image.src = this.src;
385
+ this.imgLoaded = true;
386
+ this.el.dispatchEvent(new CustomEvent('load', { bubbles: true }));
387
+ }
388
+ };
389
+ }
390
+ componentDidLoad() {
391
+ if ('IntersectionObserver' in window) {
392
+ this.el.__uxComponent = this;
393
+ if (!window.EMUxObserver) {
394
+ window.EMUxObserver = new IntersectionObserver((entries) => {
395
+ entries.forEach(entry => {
396
+ if (entry.isIntersecting) {
397
+ const comp = entry.target.__uxComponent;
398
+ if (comp) {
399
+ comp.shouldLoad = true;
400
+ comp.handleSrc();
401
+ }
402
+ window.EMUxObserver.unobserve(entry.target);
403
+ }
404
+ });
405
+ }, { rootMargin: this.detectDistance });
406
+ }
407
+ window.EMUxObserver.observe(this.el);
408
+ }
409
+ else {
410
+ this.shouldLoad = true;
411
+ this.handleSrc();
412
+ }
413
+ }
414
+ render() {
415
+ return (h("img", { key: '2bb4dc391fc2f753514103e91c0abf065de3236a', ref: el => (this.image = el), style: this.styles, class: `${this.imgClass} ${this.imgLoaded ? 'Visible' : 'Hidden'}`, alt: this.alt, width: this.width, height: this.height, loading: "lazy" }));
416
+ }
417
+ get el() { return getElement(this); }
418
+ static get watchers() { return {
419
+ "src": ["handleSrc"]
420
+ }; }
421
+ };
422
+ UiImage.style = UiImageStyle0;
423
+
424
+ export { GeneralTutorialSlider as general_tutorial_slider, UiImage as ui_image };
@@ -1,5 +1,5 @@
1
1
  const NAMESPACE = 'general-tutorial-slider';
2
- const BUILD = /* general-tutorial-slider */ { allRenderFn: true, appendChildSlotFix: false, asyncLoading: true, asyncQueue: false, attachStyles: true, cloneNodeFix: false, cmpDidLoad: true, cmpDidRender: true, cmpDidUnload: false, cmpDidUpdate: true, cmpShouldUpdate: false, cmpWillLoad: true, cmpWillRender: false, cmpWillUpdate: false, connectedCallback: true, constructableCSS: true, cssAnnotations: true, devTools: false, disconnectedCallback: true, element: false, event: false, experimentalScopedSlotChanges: false, experimentalSlotFixes: false, formAssociated: false, hasRenderFn: true, hostListener: false, hostListenerTarget: false, hostListenerTargetBody: false, hostListenerTargetDocument: false, hostListenerTargetParent: false, hostListenerTargetWindow: false, hotModuleReplacement: false, hydrateClientSide: false, hydrateServerSide: false, hydratedAttribute: false, hydratedClass: true, hydratedSelectorName: "hydrated", initializeNextTick: false, invisiblePrehydration: true, isDebug: false, isDev: false, isTesting: false, lazyLoad: true, lifecycle: true, lifecycleDOMEvents: false, member: true, method: false, mode: false, observeAttribute: true, profile: false, prop: true, propBoolean: true, propMutable: false, propNumber: true, propString: true, reflect: true, scoped: false, scopedSlotTextContentFix: false, scriptDataOpts: false, shadowDelegatesFocus: false, shadowDom: true, slot: false, slotChildNodesFix: false, slotRelocation: false, state: true, style: true, svg: true, taskQueue: true, transformTagName: false, updatable: true, vdomAttribute: true, vdomClass: true, vdomFunctional: false, vdomKey: false, vdomListener: true, vdomPropOrAttr: true, vdomRef: true, vdomRender: true, vdomStyle: true, vdomText: true, vdomXlink: false, watchCallback: true };
2
+ const BUILD = /* general-tutorial-slider */ { allRenderFn: true, appendChildSlotFix: false, asyncLoading: true, asyncQueue: false, attachStyles: true, cloneNodeFix: false, cmpDidLoad: true, cmpDidRender: true, cmpDidUnload: false, cmpDidUpdate: true, cmpShouldUpdate: false, cmpWillLoad: true, cmpWillRender: false, cmpWillUpdate: false, connectedCallback: true, constructableCSS: true, cssAnnotations: true, devTools: false, disconnectedCallback: true, element: false, event: false, experimentalScopedSlotChanges: false, experimentalSlotFixes: false, formAssociated: false, hasRenderFn: true, hostListener: false, hostListenerTarget: false, hostListenerTargetBody: false, hostListenerTargetDocument: false, hostListenerTargetParent: false, hostListenerTargetWindow: false, hotModuleReplacement: false, hydrateClientSide: false, hydrateServerSide: false, hydratedAttribute: false, hydratedClass: true, hydratedSelectorName: "hydrated", initializeNextTick: false, invisiblePrehydration: true, isDebug: false, isDev: false, isTesting: false, lazyLoad: true, lifecycle: true, lifecycleDOMEvents: false, member: true, method: false, mode: false, observeAttribute: true, profile: false, prop: true, propBoolean: true, propMutable: false, propNumber: true, propString: true, reflect: true, scoped: false, scopedSlotTextContentFix: false, scriptDataOpts: false, shadowDelegatesFocus: false, shadowDom: true, slot: false, slotChildNodesFix: false, slotRelocation: false, state: true, style: true, svg: true, taskQueue: true, transformTagName: false, updatable: true, vdomAttribute: true, vdomClass: true, vdomFunctional: false, vdomKey: true, vdomListener: true, vdomPropOrAttr: true, vdomRef: true, vdomRender: true, vdomStyle: true, vdomText: true, vdomXlink: false, watchCallback: true };
3
3
 
4
4
  /*
5
5
  Stencil Client Platform v4.19.2 | MIT Licensed | https://stenciljs.com
@@ -49,10 +49,10 @@ var loadModule = (cmpMeta, hostRef, hmrVersionId) => {
49
49
  }
50
50
  switch(bundleId) {
51
51
 
52
- case 'general-tutorial-slider':
52
+ case 'general-tutorial-slider_2':
53
53
  return import(
54
54
  /* webpackMode: "lazy" */
55
- './general-tutorial-slider.entry.js').then(processMod, consoleError);
55
+ './general-tutorial-slider_2.entry.js').then(processMod, consoleError);
56
56
  }
57
57
  }
58
58
  return import(
@@ -211,6 +211,7 @@ var uniqueTime = (key, measureText) => {
211
211
  };
212
212
  var h = (nodeName, vnodeData, ...children) => {
213
213
  let child = null;
214
+ let key = null;
214
215
  let simple = false;
215
216
  let lastSimple = false;
216
217
  const vNodeChildren = [];
@@ -234,6 +235,9 @@ var h = (nodeName, vnodeData, ...children) => {
234
235
  };
235
236
  walk(children);
236
237
  if (vnodeData) {
238
+ if (vnodeData.key) {
239
+ key = vnodeData.key;
240
+ }
237
241
  {
238
242
  const classData = vnodeData.className || vnodeData.class;
239
243
  if (classData) {
@@ -246,6 +250,9 @@ var h = (nodeName, vnodeData, ...children) => {
246
250
  if (vNodeChildren.length > 0) {
247
251
  vnode.$children$ = vNodeChildren;
248
252
  }
253
+ {
254
+ vnode.$key$ = key;
255
+ }
249
256
  return vnode;
250
257
  };
251
258
  var newVNode = (tag, text) => {
@@ -259,6 +266,9 @@ var newVNode = (tag, text) => {
259
266
  {
260
267
  vnode.$attrs$ = null;
261
268
  }
269
+ {
270
+ vnode.$key$ = null;
271
+ }
262
272
  return vnode;
263
273
  };
264
274
  var Host = {};
@@ -381,7 +391,7 @@ var setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags) => {
381
391
  }
382
392
  }
383
393
  }
384
- } else if (memberName === "ref") {
394
+ } else if (memberName === "key") ; else if (memberName === "ref") {
385
395
  if (newValue) {
386
396
  newValue(elm);
387
397
  }
@@ -545,6 +555,8 @@ var removeVnodes = (vnodes, startIdx, endIdx) => {
545
555
  var updateChildren = (parentElm, oldCh, newVNode2, newCh, isInitialRender = false) => {
546
556
  let oldStartIdx = 0;
547
557
  let newStartIdx = 0;
558
+ let idxInOld = 0;
559
+ let i2 = 0;
548
560
  let oldEndIdx = oldCh.length - 1;
549
561
  let oldStartVnode = oldCh[0];
550
562
  let oldEndVnode = oldCh[oldEndIdx];
@@ -552,6 +564,7 @@ var updateChildren = (parentElm, oldCh, newVNode2, newCh, isInitialRender = fals
552
564
  let newStartVnode = newCh[0];
553
565
  let newEndVnode = newCh[newEndIdx];
554
566
  let node;
567
+ let elmToMove;
555
568
  while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {
556
569
  if (oldStartVnode == null) {
557
570
  oldStartVnode = oldCh[++oldStartIdx];
@@ -580,7 +593,26 @@ var updateChildren = (parentElm, oldCh, newVNode2, newCh, isInitialRender = fals
580
593
  oldEndVnode = oldCh[--oldEndIdx];
581
594
  newStartVnode = newCh[++newStartIdx];
582
595
  } else {
596
+ idxInOld = -1;
583
597
  {
598
+ for (i2 = oldStartIdx; i2 <= oldEndIdx; ++i2) {
599
+ if (oldCh[i2] && oldCh[i2].$key$ !== null && oldCh[i2].$key$ === newStartVnode.$key$) {
600
+ idxInOld = i2;
601
+ break;
602
+ }
603
+ }
604
+ }
605
+ if (idxInOld >= 0) {
606
+ elmToMove = oldCh[idxInOld];
607
+ if (elmToMove.$tag$ !== newStartVnode.$tag$) {
608
+ node = createElm(oldCh && oldCh[newStartIdx], newVNode2, idxInOld);
609
+ } else {
610
+ patch(elmToMove, newStartVnode, isInitialRender);
611
+ oldCh[idxInOld] = void 0;
612
+ node = elmToMove.$elm$;
613
+ }
614
+ newStartVnode = newCh[++newStartIdx];
615
+ } else {
584
616
  node = createElm(oldCh && oldCh[newStartIdx], newVNode2, newStartIdx);
585
617
  newStartVnode = newCh[++newStartIdx];
586
618
  }
@@ -606,6 +638,9 @@ var updateChildren = (parentElm, oldCh, newVNode2, newCh, isInitialRender = fals
606
638
  };
607
639
  var isSameVnode = (leftVNode, rightVNode, isInitialRender = false) => {
608
640
  if (leftVNode.$tag$ === rightVNode.$tag$) {
641
+ if (!isInitialRender) {
642
+ return leftVNode.$key$ === rightVNode.$key$;
643
+ }
609
644
  return true;
610
645
  }
611
646
  return false;
@@ -1,11 +1,11 @@
1
- import { b as bootstrapLazy } from './index-37276b41.js';
2
- export { s as setNonce } from './index-37276b41.js';
1
+ import { b as bootstrapLazy } from './index-619abaf6.js';
2
+ export { s as setNonce } from './index-619abaf6.js';
3
3
  import { g as globalScripts } from './app-globals-0f993ce5.js';
4
4
 
5
5
  const defineCustomElements = async (win, options) => {
6
6
  if (typeof window === 'undefined') return undefined;
7
7
  await globalScripts();
8
- return bootstrapLazy([["general-tutorial-slider",[[1,"general-tutorial-slider",{"mbSource":[1,"mb-source"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"language":[513],"cmsEndpoint":[513,"cms-endpoint"],"userRoles":[513,"user-roles"],"cmsEnv":[513,"cms-env"],"showSliderDots":[516,"show-slider-dots"],"showSliderArrows":[516,"show-slider-arrows"],"showSliderArrowsMobile":[516,"show-slider-arrows-mobile"],"enableAutoScroll":[516,"enable-auto-scroll"],"intervalPeriod":[514,"interval-period"],"scrollItems":[520,"scroll-items"],"itemsPerPage":[514,"items-per-page"],"hasErrors":[32],"isLoading":[32],"activeIndex":[32],"tutorialElementWidth":[32]},null,{"cmsEndpoint":["watchEndpoint"],"language":["watchEndpoint"],"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingChangeURL"]}]]]], options);
8
+ return bootstrapLazy([["general-tutorial-slider_2",[[1,"general-tutorial-slider",{"mbSource":[1,"mb-source"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"language":[513],"cmsEndpoint":[513,"cms-endpoint"],"userRoles":[513,"user-roles"],"cmsEnv":[513,"cms-env"],"showSliderDots":[516,"show-slider-dots"],"showSliderArrows":[516,"show-slider-arrows"],"showSliderArrowsMobile":[516,"show-slider-arrows-mobile"],"enableAutoScroll":[516,"enable-auto-scroll"],"intervalPeriod":[514,"interval-period"],"scrollItems":[520,"scroll-items"],"itemsPerPage":[514,"items-per-page"],"hasErrors":[32],"isLoading":[32],"activeIndex":[32],"tutorialElementWidth":[32]},null,{"cmsEndpoint":["watchEndpoint"],"language":["watchEndpoint"],"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingChangeURL"]}],[0,"ui-image",{"src":[1],"width":[1],"height":[1],"alt":[1],"imgClass":[1,"img-class"],"styles":[8],"detectDistance":[1,"detect-distance"],"imgLoaded":[32],"shouldLoad":[32]},null,{"src":["handleSrc"]}]]]], options);
9
9
  };
10
10
 
11
11
  export { defineCustomElements };
@@ -1 +1 @@
1
- import{p as e,b as l}from"./p-df9e22a7.js";export{s as setNonce}from"./p-df9e22a7.js";import{g as t}from"./p-e1255160.js";(()=>{const l=import.meta.url,s={};return""!==l&&(s.resourcesUrl=new URL(".",l).href),e(s)})().then((async e=>(await t(),l([["p-2ac9a6c7",[[1,"general-tutorial-slider",{mbSource:[1,"mb-source"],clientStyling:[513,"client-styling"],clientStylingUrl:[513,"client-styling-url"],language:[513],cmsEndpoint:[513,"cms-endpoint"],userRoles:[513,"user-roles"],cmsEnv:[513,"cms-env"],showSliderDots:[516,"show-slider-dots"],showSliderArrows:[516,"show-slider-arrows"],showSliderArrowsMobile:[516,"show-slider-arrows-mobile"],enableAutoScroll:[516,"enable-auto-scroll"],intervalPeriod:[514,"interval-period"],scrollItems:[520,"scroll-items"],itemsPerPage:[514,"items-per-page"],hasErrors:[32],isLoading:[32],activeIndex:[32],tutorialElementWidth:[32]},null,{cmsEndpoint:["watchEndpoint"],language:["watchEndpoint"],clientStyling:["handleClientStylingChange"],clientStylingUrl:["handleClientStylingChangeURL"]}]]]],e))));
1
+ import{p as e,b as l}from"./p-d772c977.js";export{s as setNonce}from"./p-d772c977.js";import{g as t}from"./p-e1255160.js";(()=>{const l=import.meta.url,s={};return""!==l&&(s.resourcesUrl=new URL(".",l).href),e(s)})().then((async e=>(await t(),l([["p-5ec043a5",[[1,"general-tutorial-slider",{mbSource:[1,"mb-source"],clientStyling:[513,"client-styling"],clientStylingUrl:[513,"client-styling-url"],language:[513],cmsEndpoint:[513,"cms-endpoint"],userRoles:[513,"user-roles"],cmsEnv:[513,"cms-env"],showSliderDots:[516,"show-slider-dots"],showSliderArrows:[516,"show-slider-arrows"],showSliderArrowsMobile:[516,"show-slider-arrows-mobile"],enableAutoScroll:[516,"enable-auto-scroll"],intervalPeriod:[514,"interval-period"],scrollItems:[520,"scroll-items"],itemsPerPage:[514,"items-per-page"],hasErrors:[32],isLoading:[32],activeIndex:[32],tutorialElementWidth:[32]},null,{cmsEndpoint:["watchEndpoint"],language:["watchEndpoint"],clientStyling:["handleClientStylingChange"],clientStylingUrl:["handleClientStylingChangeURL"]}],[0,"ui-image",{src:[1],width:[1],height:[1],alt:[1],imgClass:[1,"img-class"],styles:[8],detectDistance:[1,"detect-distance"],imgLoaded:[32],shouldLoad:[32]},null,{src:["handleSrc"]}]]]],e))));
@@ -0,0 +1 @@
1
+ import{r as t,h as i,g as n}from"./p-d772c977.js";const e={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 ..."},"es-mx":{error:"Error",noResults:"Cargando, espere por favor…"},"pt-br":{error:"Erro",noResults:"Carregando, espere por favor…"}};function o(t,i){if(t){const n=document.createElement("style");n.innerHTML=i,t.appendChild(n)}}function s(t,i){const n=new URL(i);fetch(n.href).then((t=>t.text())).then((i=>{const n=document.createElement("style");n.innerHTML=i,t&&t.appendChild(n)})).catch((t=>{console.error("There was an error while trying to load client styling from URL",t)}))}const r=class{constructor(i){var n;t(this,i),this.userAgent=window.navigator.userAgent,this.isMobile=!!((n=this.userAgent).toLowerCase().match(/android/i)||n.toLowerCase().match(/blackberry|bb/i)||n.toLowerCase().match(/iphone|ipad|ipod/i)||n.toLowerCase().match(/windows phone|windows mobile|iemobile|wpdesktop/i)),this.allElementsWidth=0,this.xDown=null,this.yDown=null,this.resizeHandler=()=>{this.recalculateItemsPerPage()},this.orientationChangeHandler=()=>{setTimeout((()=>{this.recalculateItemsPerPage()}),10)},this.mbSource=void 0,this.clientStyling="",this.clientStylingUrl="",this.language="en",this.cmsEndpoint=void 0,this.userRoles="everyone",this.cmsEnv="stage",this.showSliderDots=!0,this.showSliderArrows=!0,this.showSliderArrowsMobile=!1,this.enableAutoScroll=!1,this.intervalPeriod=5e3,this.scrollItems=1,this.itemsPerPage=1,this.hasErrors=!1,this.isLoading=!0,this.activeIndex=0,this.tutorialElementWidth=0}watchEndpoint(t,i){t&&t!=i&&this.cmsEndpoint&&this.getGeneralTutorialSlider().then((t=>{this.tutorialData=t}))}handleClientStylingChange(t,i){t!=i&&o(this.stylingContainer,this.clientStyling)}handleClientStylingChangeURL(t,i){t!=i&&this.clientStylingUrl&&s(this.stylingContainer,this.clientStylingUrl)}connectedCallback(){window.screen.orientation.addEventListener("change",this.orientationChangeHandler)}componentWillLoad(){if(this.cmsEndpoint&&this.language)return this.getGeneralTutorialSlider().then((t=>{this.tutorialData=t}))}componentDidLoad(){window.addEventListener("resize",this.resizeHandler),this.stylingContainer&&(null!=window.emMessageBus?function(t,i){if(window.emMessageBus){const n=document.createElement("style");window.emMessageBus.subscribe(i,(i=>{n.innerHTML=i,t&&t.appendChild(n)}))}}(this.stylingContainer,`${this.mbSource}.Style`):(this.clientStyling&&o(this.stylingContainer,this.clientStyling),this.clientStylingUrl&&s(this.stylingContainer,this.clientStylingUrl)))}componentDidRender(){this.el.addEventListener("touchstart",this.handleTouchStart.bind(this),{passive:!0}),this.el.addEventListener("touchmove",this.handleTouchMove.bind(this),{passive:!0}),this.recalculateItemsPerPage()}componentDidUpdate(){this.recalculateItemsPerPage()}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),this.stylingSubscription&&this.stylingSubscription.unsubscribe()}getGeneralTutorialSlider(){let t=new URL(`${this.cmsEndpoint}/${this.language}/slider-onboarding`);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,n)=>{this.isLoading=!0,fetch(t.href).then((t=>t.json())).then((t=>{i(t)})).catch((t=>{console.error(t),this.hasErrors=!0,n(t)})).finally((()=>{this.isLoading=!1}))}))}move(t){this.setActive(this.activeIndex+t)}recalculateItemsPerPage(){this.tutorialsElement&&(this.tutorialElementWidth=this.tutorialsElement.clientWidth,this.allElementsWidth=(this.tutorialData.length-1)*this.tutorialElementWidth)}goTo(t){let i=this.activeIndex-t;if(i>0)for(let t=0;t<i;t++)this.move(-1);else for(let t=0;t>i;t--)this.move(1)}handleTouchStart(t){const i=this.getTouches(t)[0];this.xDown=i.clientX,this.yDown=i.clientY}getTouches(t){return t.touches||t.originalEvent.touches}handleTouchMove(t){if(!this.xDown||!this.yDown)return;let i=this.xDown-t.touches[0].clientX,n=this.yDown-t.touches[0].clientY;Math.abs(i)>Math.abs(n)&&this.move(i>0?1:-1),this.xDown=null,this.yDown=null}setActive(t){const i=this.tutorialData.length;this.activeIndex=t>=0?t>=i-1?i-1:t:0}renderDots(){const t=[];for(let n=0;n<this.tutorialData.length/this.itemsPerPage;n++)t.push(i("li",{class:n==this.activeIndex?"active":"default",onClick:()=>{this.goTo(n),this.setActive(n)}}));return t}render(){const t={transform:`translate(${this.allElementsWidth/(this.tutorialData.length-1)*this.activeIndex*-1}px, 0px)`},n={width:this.tutorialElementWidth/this.itemsPerPage+"px"};return this.hasErrors?i("div",{class:"GeneralTutorialSliderError"},i("div",{class:"TitleError"},e[void 0!==(o=this.language)&&o in e?o:"en"].error)):this.isLoading?void 0:i("div",{ref:t=>this.stylingContainer=t},i("div",{class:"TutorialWrapper"},i("div",{class:"TutorialContent",ref:t=>this.slider=t},(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(--emw--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"}))),i("main",null,i("div",{style:t,ref:t=>this.tutorialsElement=t,class:"TutorialItems"},this.tutorialData.map((t=>{var e,o,s,r,l,a,d,h,c,u,p,v,m,w,g,f,x,y;return i("div",{class:"TutorialItem",style:n},i("div",{class:"ItemTitle",innerHTML:null==t?void 0:t.title}),(null===(e=null==t?void 0:t.media)||void 0===e?void 0:e.images)?i("div",{class:"ItemImage"},i("ui-image",this.isMobile?{src:null===(l=null===(r=null===(s=null===(o=null==t?void 0:t.media)||void 0===o?void 0:o.images[0])||void 0===s?void 0:s.sources)||void 0===r?void 0:r.find((t=>"mobile"===t.media)))||void 0===l?void 0:l.src,alt:null==t?void 0:t.slug}:{src:null===(c=null===(h=null===(d=null===(a=null==t?void 0:t.media)||void 0===a?void 0:a.images[0])||void 0===d?void 0:d.sources)||void 0===h?void 0:h.find((t=>"desktop"===t.media)))||void 0===c?void 0:c.src,alt:null==t?void 0:t.slug})):(null===(u=null==t?void 0:t.media)||void 0===u?void 0:u.video)?i("div",{class:"ItemImage"},i("video",{controls:!0,loop:!0,autoplay:!0},i("source",this.isMobile?{src:null===(w=null===(m=null===(v=null===(p=null==t?void 0:t.media)||void 0===p?void 0:p.video[0])||void 0===v?void 0:v.sources)||void 0===m?void 0:m.find((t=>"mobile"===t.media)))||void 0===w?void 0:w.src,type:"video/mp4"}:{src:null===(y=null===(x=null===(f=null===(g=null==t?void 0:t.media)||void 0===g?void 0:g.video[0])||void 0===f?void 0:f.sources)||void 0===x?void 0:x.find((t=>"desktop"===t.media)))||void 0===y?void 0:y.src,type:"video/mp4"}))):null,i("div",{class:"ItemDescription",innerHTML:null==t?void 0:t.content}))})))),(this.showSliderArrows&&!this.isMobile||this.showSliderArrowsMobile&&this.isMobile)&&i("div",{class:this.activeIndex===this.tutorialData.length-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"}))),i("div",null)),this.showSliderDots&&i("div",{class:"DotsWrapper"},i("ul",{class:"Dots"},this.renderDots()))));var o}get el(){return n(this)}static get watchers(){return{cmsEndpoint:["watchEndpoint"],language:["watchEndpoint"],clientStyling:["handleClientStylingChange"],clientStylingUrl:["handleClientStylingChangeURL"]}}};r.style=":host {\n display: block;\n}\n\n.GeneralTutorialSliderError {\n display: flex;\n justify-content: center;\n flex-direction: column;\n}\n.GeneralTutorialSliderError.TitleError {\n color: red;\n}\n\nmain {\n width: 100%;\n overflow: hidden;\n}\n\n.TutorialWrapper {\n width: 100%;\n display: flex;\n flex: 0 0 auto;\n justify-content: center;\n flex-direction: column;\n overflow: auto;\n}\n\n.TutorialContent {\n display: flex;\n justify-content: center;\n flex-direction: row;\n}\n\n.TutorialItems {\n display: flex;\n transition: transform 0.4s ease-in-out;\n transform: translateX(0px);\n}\n\n.TutorialItem {\n flex: 0 0 auto;\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n align-items: center;\n color: #000;\n background-color: #f5f5f5;\n border-radius: 5px;\n user-select: none;\n}\n.TutorialItem .ItemTitle {\n padding: 25px 15px;\n font-size: 18px;\n font-weight: 600;\n color: var(--emw--color-secondary, #FD2839);\n}\n.TutorialItem .ItemImage {\n overflow: hidden;\n}\n.TutorialItem .ItemImage ui-image, .TutorialItem .ItemImage video {\n height: auto;\n width: 450px;\n}\n.TutorialItem .ItemDescription {\n font-size: 14px;\n padding: 25px 15px;\n font-weight: 400;\n color: #000;\n}\n\n.SliderNavButton {\n border: 0px;\n width: 25px;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.SliderNavButton svg {\n width: 20px;\n stroke: var(--emw--color-secondary, #FD2839);\n}\n\n.DisabledArrow svg {\n opacity: 0.2;\n stroke: var(--emw--color-secondary, #FD2839);\n pointer-events: none;\n}\n\n.DotsWrapper {\n width: 100%;\n margin: 0 auto;\n margin-top: 20px;\n height: 30px;\n}\n.DotsWrapper ul.Dots {\n display: flex;\n justify-content: center;\n padding: 0;\n}\n.DotsWrapper ul.Dots li {\n height: 10px;\n width: 10px;\n background: #ccc;\n border-radius: 50%;\n margin-left: 3px;\n margin-right: 3px;\n list-style: none;\n cursor: pointer;\n}\n.DotsWrapper ul.Dots li:hover {\n background: #bbb;\n}\n.DotsWrapper ul.Dots li.active {\n border: solid 1px var(--emw--color-secondary, #FD2839);\n background: var(--emw--color-secondary, #FD2839);\n}\n.DotsWrapper ul.Dots li.default {\n border: solid 1px var(--emw--color-secondary, #FD2839);\n background-color: #FFF;\n}\n\n@container (max-width: 475px) {\n @media screen and (orientation: landscape) {\n .TutorialItem {\n width: 100%;\n }\n }\n main {\n height: 90cqh;\n }\n .TutorialItems {\n height: inherit;\n }\n .TutorialItem {\n min-width: 100%;\n max-height: 800px;\n overflow: auto;\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n align-items: center;\n color: #000;\n background-color: #f5f5f5;\n border-radius: 5px;\n user-select: none;\n }\n .TutorialItem .ItemTitle {\n padding: 25px 15px;\n font-size: 18px;\n font-weight: 600;\n color: var(--emw--color-secondary, #FD2839);\n }\n .TutorialItem .ItemImage {\n min-height: 200px;\n }\n .TutorialItem .ItemImage ui-image, .TutorialItem .ItemImage video {\n height: auto;\n width: 100%;\n }\n .TutorialItem .ItemDescription {\n font-size: 14px;\n padding: 25px 15px;\n font-weight: 400;\n color: #000;\n }\n}";const l=class{constructor(i){t(this,i),this.src=void 0,this.width=void 0,this.height=void 0,this.alt=void 0,this.imgClass="",this.styles=void 0,this.detectDistance="200px",this.imgLoaded=!1,this.shouldLoad=!1}handleSrc(){if(!this.shouldLoad)return;const t=new Image;t.src=this.src,t.onload=()=>{this.image&&(this.image.src=this.src,this.imgLoaded=!0,this.el.dispatchEvent(new CustomEvent("load",{bubbles:!0})))}}componentDidLoad(){"IntersectionObserver"in window?(this.el.__uxComponent=this,window.EMUxObserver||(window.EMUxObserver=new IntersectionObserver((t=>{t.forEach((t=>{if(t.isIntersecting){const i=t.target.__uxComponent;i&&(i.shouldLoad=!0,i.handleSrc()),window.EMUxObserver.unobserve(t.target)}}))}),{rootMargin:this.detectDistance})),window.EMUxObserver.observe(this.el)):(this.shouldLoad=!0,this.handleSrc())}render(){return i("img",{key:"2bb4dc391fc2f753514103e91c0abf065de3236a",ref:t=>this.image=t,style:this.styles,class:`${this.imgClass} ${this.imgLoaded?"Visible":"Hidden"}`,alt:this.alt,width:this.width,height:this.height,loading:"lazy"})}get el(){return n(this)}static get watchers(){return{src:["handleSrc"]}}};l.style=":host{display:block}.Hidden{opacity:0;transition:opacity 0.5s ease-in-out}.Visible{opacity:1;transition:opacity 0.5s ease-in-out}";export{r as general_tutorial_slider,l as ui_image}
@@ -0,0 +1,2 @@
1
+ var e=Object.defineProperty,t=new WeakMap,n=e=>t.get(e),l=(e,n)=>t.set(n.t=e,n),o=(e,t)=>t in e,s=(e,t)=>(0,console.error)(e,t),r=new Map,i=new Map,c="slot-fb{display:contents}slot-fb[hidden]{display:none}",u="undefined"!=typeof window?window:{},a=u.document||{head:{}},f={l:0,o:"",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)},h=e=>Promise.resolve(e),d=(()=>{try{return new CSSStyleSheet,"function"==typeof(new CSSStyleSheet).replaceSync}catch(e){}return!1})(),p=!1,m=[],y=[],w=(e,t)=>n=>{e.push(n),p||(p=!0,t&&4&f.l?b(v):f.raf(v))},$=e=>{for(let t=0;t<e.length;t++)try{e[t](performance.now())}catch(e){s(e)}e.length=0},v=()=>{$(m),$(y),(p=m.length>0)&&f.raf(v)},b=e=>h().then(e),g=w(y,!0),S={},j=e=>"object"==(e=typeof e)||"function"===e;function k(e){var t,n,l;return null!=(l=null==(n=null==(t=e.head)?void 0:t.querySelector('meta[name="csp-nonce"]'))?void 0:n.getAttribute("content"))?l:void 0}((t,n)=>{for(var l in n)e(t,l,{get:n[l],enumerable:!0})})({},{err:()=>C,map:()=>E,ok:()=>O,unwrap:()=>P,unwrapErr:()=>R});var O=e=>({isOk:!0,isErr:!1,value:e}),C=e=>({isOk:!1,isErr:!0,value:e});function E(e,t){if(e.isOk){const n=t(e.value);return n instanceof Promise?n.then((e=>O(e))):O(n)}if(e.isErr)return C(e.value);throw"should never get here"}var M,x,P=e=>{if(e.isOk)return e.value;throw e.value},R=e=>{if(e.isErr)return e.value;throw e.value},D=(e,t,...n)=>{let l=null,o=null,s=!1,r=!1;const i=[],c=t=>{for(let n=0;n<t.length;n++)l=t[n],Array.isArray(l)?c(l):null!=l&&"boolean"!=typeof l&&((s="function"!=typeof e&&!j(l))&&(l+=""),s&&r?i[i.length-1].i+=l:i.push(s?L(null,l):l),r=s)};if(c(n),t){t.key&&(o=t.key);{const e=t.className||t.class;e&&(t.class="object"!=typeof e?e:Object.keys(e).filter((t=>e[t])).join(" "))}}const u=L(e,null);return u.u=t,i.length>0&&(u.h=i),u.p=o,u},L=(e,t)=>({l:0,m:e,i:t,$:null,h:null,u:null,p:null}),T={},U=e=>n(e).$hostElement$,A=new WeakMap,F=e=>"sc-"+e.v,N=(e,t,n,l,s,r)=>{if(n!==l){let i=o(e,t),c=t.toLowerCase();if("class"===t){const t=e.classList,o=H(n),s=H(l);t.remove(...o.filter((e=>e&&!s.includes(e)))),t.add(...s.filter((e=>e&&!o.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("key"===t);else if("ref"===t)l&&l(e);else if(i||"o"!==t[0]||"n"!==t[1]){const o=j(l);if((i||o&&null!==l)&&!s)try{if(e.tagName.includes("-"))e[t]=l;else{const o=null==l?"":l;"list"===t?i=!1:null!=n&&e[t]==o||(e[t]=o)}}catch(e){}null==l||!1===l?!1===l&&""!==e.getAttribute(t)||e.removeAttribute(t):(!i||4&r||s)&&!o&&e.setAttribute(t,l=!0===l?"":l)}else if(t="-"===t[2]?t.slice(3):o(u,c)?c.slice(2):c[2]+t.slice(3),n||l){const o=t.endsWith(q);t=t.replace(G,""),n&&f.rel(e,t,n,o),l&&f.ael(e,t,l,o)}}},W=/\s/,H=e=>e?e.split(W):[],q="Capture",G=RegExp(q+"$"),V=(e,t,n)=>{const l=11===t.$.nodeType&&t.$.host?t.$.host:t.$,o=e&&e.u||S,s=t.u||S;for(const e of _(Object.keys(o)))e in s||N(l,e,o[e],void 0,n,t.l);for(const e of _(Object.keys(s)))N(l,e,o[e],s[e],n,t.l)};function _(e){return e.includes("ref")?[...e.filter((e=>"ref"!==e)),"ref"]:e}var z=!1,B=(e,t,n)=>{const l=t.h[n];let o,s,r=0;if(null!==l.i)o=l.$=a.createTextNode(l.i);else{if(z||(z="svg"===l.m),o=l.$=a.createElementNS(z?"http://www.w3.org/2000/svg":"http://www.w3.org/1999/xhtml",l.m),z&&"foreignObject"===l.m&&(z=!1),V(null,l,z),null!=M&&o["s-si"]!==M&&o.classList.add(o["s-si"]=M),l.h)for(r=0;r<l.h.length;++r)s=B(e,l,r),s&&o.appendChild(s);"svg"===l.m?z=!1:"foreignObject"===o.tagName&&(z=!0)}return o["s-hn"]=x,o},I=(e,t,n,l,o,s)=>{let r,i=e;for(i.shadowRoot&&i.tagName===x&&(i=i.shadowRoot);o<=s;++o)l[o]&&(r=B(null,n,o),r&&(l[o].$=r,Y(i,r,t)))},J=(e,t,n)=>{for(let l=t;l<=n;++l){const t=e[l];if(t){const e=t.$;X(t),e&&e.remove()}}},K=(e,t,n=!1)=>e.m===t.m&&(!!n||e.p===t.p),Q=(e,t,n=!1)=>{const l=t.$=e.$,o=e.h,s=t.h,r=t.m,i=t.i;null===i?(V(e,t,z="svg"===r||"foreignObject"!==r&&z),null!==o&&null!==s?((e,t,n,l,o=!1)=>{let s,r,i=0,c=0,u=0,a=0,f=t.length-1,h=t[0],d=t[f],p=l.length-1,m=l[0],y=l[p];for(;i<=f&&c<=p;)if(null==h)h=t[++i];else if(null==d)d=t[--f];else if(null==m)m=l[++c];else if(null==y)y=l[--p];else if(K(h,m,o))Q(h,m,o),h=t[++i],m=l[++c];else if(K(d,y,o))Q(d,y,o),d=t[--f],y=l[--p];else if(K(h,y,o))Q(h,y,o),Y(e,h.$,d.$.nextSibling),h=t[++i],y=l[--p];else if(K(d,m,o))Q(d,m,o),Y(e,d.$,h.$),d=t[--f],m=l[++c];else{for(u=-1,a=i;a<=f;++a)if(t[a]&&null!==t[a].p&&t[a].p===m.p){u=a;break}u>=0?(r=t[u],r.m!==m.m?s=B(t&&t[c],n,u):(Q(r,m,o),t[u]=void 0,s=r.$),m=l[++c]):(s=B(t&&t[c],n,c),m=l[++c]),s&&Y(h.$.parentNode,s,h.$)}i>f?I(e,null==l[p+1]?null:l[p+1].$,n,l,c,p):c>p&&J(t,i,f)})(l,o,t,s,n):null!==s?(null!==e.i&&(l.textContent=""),I(l,null,t,s,0,s.length-1)):null!==o&&J(o,0,o.length-1),z&&"svg"===r&&(z=!1)):e.i!==i&&(l.data=i)},X=e=>{e.u&&e.u.ref&&e.u.ref(null),e.h&&e.h.map(X)},Y=(e,t,n)=>null==e?void 0:e.insertBefore(t,n),Z=(e,t)=>{t&&!e.S&&t["s-p"]&&t["s-p"].push(new Promise((t=>e.S=t)))},ee=(e,t)=>{if(e.l|=16,!(4&e.l))return Z(e,e.j),g((()=>te(e,t)));e.l|=512},te=(e,t)=>{const n=e.t;if(!n)throw Error(`Can't render component <${e.$hostElement$.tagName.toLowerCase()} /> with invalid Stencil runtime! Make sure this imported component is compiled with a \`externalRuntime: true\` flag. For more information, please refer to https://stenciljs.com/docs/custom-elements#externalruntime`);let l;return t&&(l=ce(n,"componentWillLoad")),ne(l,(()=>oe(e,n,t)))},ne=(e,t)=>le(e)?e.then(t).catch((e=>{console.error(e),t()})):t(),le=e=>e instanceof Promise||e&&e.then&&"function"==typeof e.then,oe=async(e,t,n)=>{var l;const o=e.$hostElement$,s=o["s-rc"];n&&(e=>{const t=e.k,n=e.$hostElement$,l=t.l,o=((e,t)=>{var n;const l=F(t),o=i.get(l);if(e=11===e.nodeType?e:a,o)if("string"==typeof o){let s,r=A.get(e=e.head||e);if(r||A.set(e,r=new Set),!r.has(l)){{s=a.createElement("style"),s.innerHTML=o;const t=null!=(n=f.O)?n:k(a);null!=t&&s.setAttribute("nonce",t),e.insertBefore(s,e.querySelector("link"))}4&t.l&&(s.innerHTML+=c),r&&r.add(l)}}else e.adoptedStyleSheets.includes(o)||(e.adoptedStyleSheets=[...e.adoptedStyleSheets,o]);return l})(n.shadowRoot?n.shadowRoot:n.getRootNode(),t);10&l&&(n["s-sc"]=o,n.classList.add(o+"-h"))})(e);se(e,t,o,n),s&&(s.map((e=>e())),o["s-rc"]=void 0);{const t=null!=(l=o["s-p"])?l:[],n=()=>re(e);0===t.length?n():(Promise.all(t).then(n),e.l|=4,t.length=0)}},se=(e,t,n,l)=>{try{t=t.render(),e.l&=-17,e.l|=2,((e,t,n=!1)=>{const l=e.$hostElement$,o=e.k,s=e.C||L(null,null),r=(e=>e&&e.m===T)(t)?t:D(null,null,t);if(x=l.tagName,o.M&&(r.u=r.u||{},o.M.map((([e,t])=>r.u[t]=l[e]))),n&&r.u)for(const e of Object.keys(r.u))l.hasAttribute(e)&&!["key","ref","style","class"].includes(e)&&(r.u[e]=l[e]);r.m=null,r.l|=4,e.C=r,r.$=s.$=l.shadowRoot||l,M=l["s-sc"],Q(s,r,n)})(e,t,l)}catch(t){s(t,e.$hostElement$)}return null},re=e=>{const t=e.$hostElement$,n=e.t,l=e.j;ce(n,"componentDidRender"),64&e.l?ce(n,"componentDidUpdate"):(e.l|=64,ue(t),ce(n,"componentDidLoad"),e.P(t),l||ie()),e.S&&(e.S(),e.S=void 0),512&e.l&&b((()=>ee(e,!1))),e.l&=-517},ie=()=>{ue(a.documentElement),b((()=>(e=>{const t=f.ce("appload",{detail:{namespace:"general-tutorial-slider"}});return e.dispatchEvent(t),t})(u)))},ce=(e,t,n)=>{if(e&&e[t])try{return e[t](n)}catch(e){s(e)}},ue=e=>e.classList.add("hydrated"),ae=(e,t,l)=>{var o,r;const i=e.prototype;if(t.R||t.D||e.watchers){e.watchers&&!t.D&&(t.D=e.watchers);const c=Object.entries(null!=(o=t.R)?o:{});if(c.map((([e,[o]])=>{(31&o||2&l&&32&o)&&Object.defineProperty(i,e,{get(){return((e,t)=>n(this).L.get(t))(0,e)},set(l){((e,t,l,o)=>{const r=n(e);if(!r)throw Error(`Couldn't find host element for "${o.v}" as it is unknown to this Stencil runtime. This usually happens when integrating a 3rd party Stencil component with another Stencil component or application. Please reach out to the maintainers of the 3rd party Stencil component or report this on the Stencil Discord server (https://chat.stenciljs.com) or comment on this similar [GitHub issue](https://github.com/ionic-team/stencil/issues/5457).`);const i=r.$hostElement$,c=r.L.get(t),u=r.l,a=r.t;if(l=((e,t)=>null==e||j(e)?e:4&t?"false"!==e&&(""===e||!!e):2&t?parseFloat(e):1&t?e+"":e)(l,o.R[t][0]),(!(8&u)||void 0===c)&&l!==c&&(!Number.isNaN(c)||!Number.isNaN(l))&&(r.L.set(t,l),a)){if(o.D&&128&u){const e=o.D[t];e&&e.map((e=>{try{a[e](l,c,t)}catch(e){s(e,i)}}))}2==(18&u)&&ee(r,!1)}})(this,e,l,t)},configurable:!0,enumerable:!0})})),1&l){const l=new Map;i.attributeChangedCallback=function(e,o,s){f.jmp((()=>{var r;const c=l.get(e);if(this.hasOwnProperty(c))s=this[c],delete this[c];else{if(i.hasOwnProperty(c)&&"number"==typeof this[c]&&this[c]==s)return;if(null==c){const l=n(this),i=null==l?void 0:l.l;if(i&&!(8&i)&&128&i&&s!==o){const n=l.t,i=null==(r=t.D)?void 0:r[e];null==i||i.forEach((t=>{null!=n[t]&&n[t].call(n,s,o,e)}))}return}}this[c]=(null!==s||"boolean"!=typeof this[c])&&s}))},e.observedAttributes=Array.from(new Set([...Object.keys(null!=(r=t.D)?r:{}),...c.filter((([e,t])=>15&t[0])).map((([e,n])=>{var o;const s=n[1]||e;return l.set(s,e),512&n[0]&&(null==(o=t.M)||o.push([e,s])),s}))]))}}return e},fe=e=>{ce(e,"connectedCallback")},he=e=>{ce(e,"disconnectedCallback")},de=(e,l={})=>{var o;const h=[],p=l.exclude||[],m=u.customElements,y=a.head,w=y.querySelector("meta[charset]"),$=a.createElement("style"),v=[];let b,g=!0;Object.assign(f,l),f.o=new URL(l.resourcesUrl||"./",a.baseURI).href;let S=!1;if(e.map((e=>{e[1].map((l=>{var o;const c={l:l[0],v:l[1],R:l[2],T:l[3]};4&c.l&&(S=!0),c.R=l[2],c.M=[],c.D=null!=(o=l[4])?o:{};const u=c.v,a=class extends HTMLElement{constructor(e){if(super(e),this.hasRegisteredEventListeners=!1,((e,n)=>{const l={l:0,$hostElement$:e,k:n,L:new Map};l.U=new Promise((e=>l.P=e)),e["s-p"]=[],e["s-rc"]=[],t.set(e,l)})(e=this,c),1&c.l)if(e.shadowRoot){if("open"!==e.shadowRoot.mode)throw Error(`Unable to re-use existing shadow root for ${c.v}! Mode is set to ${e.shadowRoot.mode} but Stencil only supports open shadow roots.`)}else e.attachShadow({mode:"open"})}connectedCallback(){this.hasRegisteredEventListeners||(this.hasRegisteredEventListeners=!0),b&&(clearTimeout(b),b=null),g?v.push(this):f.jmp((()=>(e=>{if(!(1&f.l)){const t=n(e),l=t.k,o=()=>{};if(1&t.l)(null==t?void 0:t.t)?fe(t.t):(null==t?void 0:t.U)&&t.U.then((()=>fe(t.t)));else{t.l|=1;{let n=e;for(;n=n.parentNode||n.host;)if(n["s-p"]){Z(t,t.j=n);break}}l.R&&Object.entries(l.R).map((([t,[n]])=>{if(31&n&&e.hasOwnProperty(t)){const n=e[t];delete e[t],e[t]=n}})),(async(e,t,n)=>{let l;if(!(32&t.l)){if(t.l|=32,n.A){const e=(e=>{const t=e.v.replace(/-/g,"_"),n=e.A;if(!n)return;const l=r.get(n);return l?l[t]:import(`./${n}.entry.js`).then((e=>(r.set(n,e),e[t])),s)
2
+ /*!__STENCIL_STATIC_IMPORT_SWITCH__*/})(n);if(e&&"then"in e){const t=()=>{};l=await e,t()}else l=e;if(!l)throw Error(`Constructor for "${n.v}#${t.F}" was not found`);l.isProxied||(n.D=l.watchers,ae(l,n,2),l.isProxied=!0);const o=()=>{};t.l|=8;try{new l(t)}catch(e){s(e)}t.l&=-9,t.l|=128,o(),fe(t.t)}else l=e.constructor,customElements.whenDefined(e.localName).then((()=>t.l|=128));if(l&&l.style){let e;"string"==typeof l.style&&(e=l.style);const t=F(n);if(!i.has(t)){const l=()=>{};((e,t,n)=>{let l=i.get(e);d&&n?(l=l||new CSSStyleSheet,"string"==typeof l?l=t:l.replaceSync(t)):l=t,i.set(e,l)})(t,e,!!(1&n.l)),l()}}}const o=t.j,c=()=>ee(t,!0);o&&o["s-rc"]?o["s-rc"].push(c):c()})(e,t,l)}o()}})(this)))}disconnectedCallback(){f.jmp((()=>(async()=>{if(!(1&f.l)){const e=n(this);(null==e?void 0:e.t)?he(e.t):(null==e?void 0:e.U)&&e.U.then((()=>he(e.t)))}})()))}componentOnReady(){return n(this).U}};c.A=e[0],p.includes(u)||m.get(u)||(h.push(u),m.define(u,ae(a,c,1)))}))})),h.length>0&&(S&&($.textContent+=c),$.textContent+=h.sort()+"{visibility:hidden}.hydrated{visibility:inherit}",$.innerHTML.length)){$.setAttribute("data-styles","");const e=null!=(o=f.O)?o:k(a);null!=e&&$.setAttribute("nonce",e),y.insertBefore($,w?w.nextSibling:y.firstChild)}g=!1,v.length?v.map((e=>e.connectedCallback())):f.jmp((()=>b=setTimeout(ie,30)))},pe=e=>f.O=e;export{de as b,U as g,D as h,h as p,l as r,pe as s}
@@ -1,3 +1,4 @@
1
+ import "../../../../../../dist/packages/stencil/ui-image/dist/types/index";
1
2
  export declare class GeneralTutorialSlider {
2
3
  /**
3
4
  * Client custom styling via streamStyling
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@everymatrix/general-tutorial-slider",
3
- "version": "1.60.2",
3
+ "version": "1.61.1",
4
4
  "main": "./dist/index.cjs.js",
5
5
  "module": "./dist/index.js",
6
6
  "es2015": "./dist/esm/index.mjs",
@@ -1 +0,0 @@
1
- import{r as t,h as i,g as n}from"./p-df9e22a7.js";const e={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 ..."},"es-mx":{error:"Error",noResults:"Cargando, espere por favor…"},"pt-br":{error:"Erro",noResults:"Carregando, espere por favor…"}};function o(t,i){if(t){const n=document.createElement("style");n.innerHTML=i,t.appendChild(n)}}function s(t,i){const n=new URL(i);fetch(n.href).then((t=>t.text())).then((i=>{const n=document.createElement("style");n.innerHTML=i,t&&t.appendChild(n)})).catch((t=>{console.error("There was an error while trying to load client styling from URL",t)}))}const r=class{constructor(i){var n;t(this,i),this.userAgent=window.navigator.userAgent,this.isMobile=!!((n=this.userAgent).toLowerCase().match(/android/i)||n.toLowerCase().match(/blackberry|bb/i)||n.toLowerCase().match(/iphone|ipad|ipod/i)||n.toLowerCase().match(/windows phone|windows mobile|iemobile|wpdesktop/i)),this.allElementsWidth=0,this.xDown=null,this.yDown=null,this.resizeHandler=()=>{this.recalculateItemsPerPage()},this.orientationChangeHandler=()=>{setTimeout((()=>{this.recalculateItemsPerPage()}),10)},this.mbSource=void 0,this.clientStyling="",this.clientStylingUrl="",this.language="en",this.cmsEndpoint=void 0,this.userRoles="everyone",this.cmsEnv="stage",this.showSliderDots=!0,this.showSliderArrows=!0,this.showSliderArrowsMobile=!1,this.enableAutoScroll=!1,this.intervalPeriod=5e3,this.scrollItems=1,this.itemsPerPage=1,this.hasErrors=!1,this.isLoading=!0,this.activeIndex=0,this.tutorialElementWidth=0}watchEndpoint(t,i){t&&t!=i&&this.cmsEndpoint&&this.getGeneralTutorialSlider().then((t=>{this.tutorialData=t}))}handleClientStylingChange(t,i){t!=i&&o(this.stylingContainer,this.clientStyling)}handleClientStylingChangeURL(t,i){t!=i&&this.clientStylingUrl&&s(this.stylingContainer,this.clientStylingUrl)}connectedCallback(){window.screen.orientation.addEventListener("change",this.orientationChangeHandler)}componentWillLoad(){if(this.cmsEndpoint&&this.language)return this.getGeneralTutorialSlider().then((t=>{this.tutorialData=t}))}componentDidLoad(){window.addEventListener("resize",this.resizeHandler),this.stylingContainer&&(null!=window.emMessageBus?function(t,i){if(window.emMessageBus){const n=document.createElement("style");window.emMessageBus.subscribe(i,(i=>{n.innerHTML=i,t&&t.appendChild(n)}))}}(this.stylingContainer,`${this.mbSource}.Style`):(this.clientStyling&&o(this.stylingContainer,this.clientStyling),this.clientStylingUrl&&s(this.stylingContainer,this.clientStylingUrl)))}componentDidRender(){this.el.addEventListener("touchstart",this.handleTouchStart.bind(this),{passive:!0}),this.el.addEventListener("touchmove",this.handleTouchMove.bind(this),{passive:!0}),this.recalculateItemsPerPage()}componentDidUpdate(){this.recalculateItemsPerPage()}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),this.stylingSubscription&&this.stylingSubscription.unsubscribe()}getGeneralTutorialSlider(){let t=new URL(`${this.cmsEndpoint}/${this.language}/slider-onboarding`);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,n)=>{this.isLoading=!0,fetch(t.href).then((t=>t.json())).then((t=>{i(t)})).catch((t=>{console.error(t),this.hasErrors=!0,n(t)})).finally((()=>{this.isLoading=!1}))}))}move(t){this.setActive(this.activeIndex+t)}recalculateItemsPerPage(){this.tutorialsElement&&(this.tutorialElementWidth=this.tutorialsElement.clientWidth,this.allElementsWidth=(this.tutorialData.length-1)*this.tutorialElementWidth)}goTo(t){let i=this.activeIndex-t;if(i>0)for(let t=0;t<i;t++)this.move(-1);else for(let t=0;t>i;t--)this.move(1)}handleTouchStart(t){const i=this.getTouches(t)[0];this.xDown=i.clientX,this.yDown=i.clientY}getTouches(t){return t.touches||t.originalEvent.touches}handleTouchMove(t){if(!this.xDown||!this.yDown)return;let i=this.xDown-t.touches[0].clientX,n=this.yDown-t.touches[0].clientY;Math.abs(i)>Math.abs(n)&&this.move(i>0?1:-1),this.xDown=null,this.yDown=null}setActive(t){const i=this.tutorialData.length;this.activeIndex=t>=0?t>=i-1?i-1:t:0}renderDots(){const t=[];for(let n=0;n<this.tutorialData.length/this.itemsPerPage;n++)t.push(i("li",{class:n==this.activeIndex?"active":"default",onClick:()=>{this.goTo(n),this.setActive(n)}}));return t}render(){const t={transform:`translate(${this.allElementsWidth/(this.tutorialData.length-1)*this.activeIndex*-1}px, 0px)`},n={width:this.tutorialElementWidth/this.itemsPerPage+"px"};return this.hasErrors?i("div",{class:"GeneralTutorialSliderError"},i("div",{class:"TitleError"},e[void 0!==(o=this.language)&&o in e?o:"en"].error)):this.isLoading?void 0:i("div",{ref:t=>this.stylingContainer=t},i("div",{class:"TutorialWrapper"},i("div",{class:"TutorialContent",ref:t=>this.slider=t},(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(--emw--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"}))),i("main",null,i("div",{style:t,ref:t=>this.tutorialsElement=t,class:"TutorialItems"},this.tutorialData.map((t=>{var e,o,s,r,l,a,d,h,c,u,p,v,m,g,w,f,x,y;return i("div",{class:"TutorialItem",style:n},i("div",{class:"ItemTitle",innerHTML:null==t?void 0:t.title}),(null===(e=null==t?void 0:t.media)||void 0===e?void 0:e.images)?i("div",{class:"ItemImage"},i("img",this.isMobile?{src:null===(l=null===(r=null===(s=null===(o=null==t?void 0:t.media)||void 0===o?void 0:o.images[0])||void 0===s?void 0:s.sources)||void 0===r?void 0:r.find((t=>"mobile"===t.media)))||void 0===l?void 0:l.src,alt:null==t?void 0:t.slug}:{src:null===(c=null===(h=null===(d=null===(a=null==t?void 0:t.media)||void 0===a?void 0:a.images[0])||void 0===d?void 0:d.sources)||void 0===h?void 0:h.find((t=>"desktop"===t.media)))||void 0===c?void 0:c.src,alt:null==t?void 0:t.slug})):(null===(u=null==t?void 0:t.media)||void 0===u?void 0:u.video)?i("div",{class:"ItemImage"},i("video",{controls:!0,loop:!0,autoplay:!0},i("source",this.isMobile?{src:null===(g=null===(m=null===(v=null===(p=null==t?void 0:t.media)||void 0===p?void 0:p.video[0])||void 0===v?void 0:v.sources)||void 0===m?void 0:m.find((t=>"mobile"===t.media)))||void 0===g?void 0:g.src,type:"video/mp4"}:{src:null===(y=null===(x=null===(f=null===(w=null==t?void 0:t.media)||void 0===w?void 0:w.video[0])||void 0===f?void 0:f.sources)||void 0===x?void 0:x.find((t=>"desktop"===t.media)))||void 0===y?void 0:y.src,type:"video/mp4"}))):null,i("div",{class:"ItemDescription",innerHTML:null==t?void 0:t.content}))})))),(this.showSliderArrows&&!this.isMobile||this.showSliderArrowsMobile&&this.isMobile)&&i("div",{class:this.activeIndex===this.tutorialData.length-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"}))),i("div",null)),this.showSliderDots&&i("div",{class:"DotsWrapper"},i("ul",{class:"Dots"},this.renderDots()))));var o}get el(){return n(this)}static get watchers(){return{cmsEndpoint:["watchEndpoint"],language:["watchEndpoint"],clientStyling:["handleClientStylingChange"],clientStylingUrl:["handleClientStylingChangeURL"]}}};r.style=":host {\n display: block;\n}\n\n.GeneralTutorialSliderError {\n display: flex;\n justify-content: center;\n flex-direction: column;\n}\n.GeneralTutorialSliderError.TitleError {\n color: red;\n}\n\nmain {\n width: 100%;\n overflow: hidden;\n}\n\n.TutorialWrapper {\n width: 100%;\n display: flex;\n flex: 0 0 auto;\n justify-content: center;\n flex-direction: column;\n overflow: auto;\n}\n\n.TutorialContent {\n display: flex;\n justify-content: center;\n flex-direction: row;\n}\n\n.TutorialItems {\n display: flex;\n transition: transform 0.4s ease-in-out;\n transform: translateX(0px);\n}\n\n.TutorialItem {\n flex: 0 0 auto;\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n align-items: center;\n color: #000;\n background-color: #f5f5f5;\n border-radius: 5px;\n user-select: none;\n}\n.TutorialItem .ItemTitle {\n padding: 25px 15px;\n font-size: 18px;\n font-weight: 600;\n color: var(--emw--color-secondary, #FD2839);\n}\n.TutorialItem .ItemImage {\n overflow: hidden;\n}\n.TutorialItem .ItemImage img, .TutorialItem .ItemImage video {\n height: auto;\n width: 450px;\n}\n.TutorialItem .ItemDescription {\n font-size: 14px;\n padding: 25px 15px;\n font-weight: 400;\n color: #000;\n}\n\n.SliderNavButton {\n border: 0px;\n width: 25px;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.SliderNavButton svg {\n width: 20px;\n stroke: var(--emw--color-secondary, #FD2839);\n}\n\n.DisabledArrow svg {\n opacity: 0.2;\n stroke: var(--emw--color-secondary, #FD2839);\n pointer-events: none;\n}\n\n.DotsWrapper {\n width: 100%;\n margin: 0 auto;\n margin-top: 20px;\n height: 30px;\n}\n.DotsWrapper ul.Dots {\n display: flex;\n justify-content: center;\n padding: 0;\n}\n.DotsWrapper ul.Dots li {\n height: 10px;\n width: 10px;\n background: #ccc;\n border-radius: 50%;\n margin-left: 3px;\n margin-right: 3px;\n list-style: none;\n cursor: pointer;\n}\n.DotsWrapper ul.Dots li:hover {\n background: #bbb;\n}\n.DotsWrapper ul.Dots li.active {\n border: solid 1px var(--emw--color-secondary, #FD2839);\n background: var(--emw--color-secondary, #FD2839);\n}\n.DotsWrapper ul.Dots li.default {\n border: solid 1px var(--emw--color-secondary, #FD2839);\n background-color: #FFF;\n}\n\n@container (max-width: 475px) {\n @media screen and (orientation: landscape) {\n .TutorialItem {\n width: 100%;\n }\n }\n main {\n height: 90cqh;\n }\n .TutorialItems {\n height: inherit;\n }\n .TutorialItem {\n min-width: 100%;\n max-height: 800px;\n overflow: auto;\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n align-items: center;\n color: #000;\n background-color: #f5f5f5;\n border-radius: 5px;\n user-select: none;\n }\n .TutorialItem .ItemTitle {\n padding: 25px 15px;\n font-size: 18px;\n font-weight: 600;\n color: var(--emw--color-secondary, #FD2839);\n }\n .TutorialItem .ItemImage {\n min-height: 200px;\n }\n .TutorialItem .ItemImage img, .TutorialItem .ItemImage video {\n height: auto;\n width: 100%;\n }\n .TutorialItem .ItemDescription {\n font-size: 14px;\n padding: 25px 15px;\n font-weight: 400;\n color: #000;\n }\n}";export{r as general_tutorial_slider}
@@ -1,2 +0,0 @@
1
- var t=Object.defineProperty,e=new WeakMap,n=t=>e.get(t),o=(t,n)=>e.set(n.t=t,n),l=(t,e)=>e in t,r=(t,e)=>(0,console.error)(t,e),s=new Map,i=new Map,c="slot-fb{display:contents}slot-fb[hidden]{display:none}",a="undefined"!=typeof window?window:{},u=a.document||{head:{}},f={o:0,l:"",jmp:t=>t(),raf:t=>requestAnimationFrame(t),ael:(t,e,n,o)=>t.addEventListener(e,n,o),rel:(t,e,n,o)=>t.removeEventListener(e,n,o),ce:(t,e)=>new CustomEvent(t,e)},h=t=>Promise.resolve(t),p=(()=>{try{return new CSSStyleSheet,"function"==typeof(new CSSStyleSheet).replaceSync}catch(t){}return!1})(),d=!1,m=[],w=[],y=(t,e)=>n=>{t.push(n),d||(d=!0,e&&4&f.o?b($):f.raf($))},v=t=>{for(let e=0;e<t.length;e++)try{t[e](performance.now())}catch(t){r(t)}t.length=0},$=()=>{v(m),v(w),(d=m.length>0)&&f.raf($)},b=t=>h().then(t),g=y(w,!0),S={},j=t=>"object"==(t=typeof t)||"function"===t;function O(t){var e,n,o;return null!=(o=null==(n=null==(e=t.head)?void 0:e.querySelector('meta[name="csp-nonce"]'))?void 0:n.getAttribute("content"))?o:void 0}((e,n)=>{for(var o in n)t(e,o,{get:n[o],enumerable:!0})})({},{err:()=>C,map:()=>E,ok:()=>k,unwrap:()=>P,unwrapErr:()=>R});var k=t=>({isOk:!0,isErr:!1,value:t}),C=t=>({isOk:!1,isErr:!0,value:t});function E(t,e){if(t.isOk){const n=e(t.value);return n instanceof Promise?n.then((t=>k(t))):k(n)}if(t.isErr)return C(t.value);throw"should never get here"}var M,x,P=t=>{if(t.isOk)return t.value;throw t.value},R=t=>{if(t.isErr)return t.value;throw t.value},D=(t,e,...n)=>{let o=null,l=!1,r=!1;const s=[],i=e=>{for(let n=0;n<e.length;n++)o=e[n],Array.isArray(o)?i(o):null!=o&&"boolean"!=typeof o&&((l="function"!=typeof t&&!j(o))&&(o+=""),l&&r?s[s.length-1].i+=o:s.push(l?L(null,o):o),r=l)};if(i(n),e){const t=e.className||e.class;t&&(e.class="object"!=typeof t?t:Object.keys(t).filter((e=>t[e])).join(" "))}const c=L(t,null);return c.u=e,s.length>0&&(c.h=s),c},L=(t,e)=>({o:0,p:t,i:e,m:null,h:null,u:null}),T={},U=t=>n(t).$hostElement$,A=new WeakMap,F=t=>"sc-"+t.v,N=(t,e,n,o,r,s)=>{if(n!==o){let i=l(t,e),c=e.toLowerCase();if("class"===e){const e=t.classList,l=H(n),r=H(o);e.remove(...l.filter((t=>t&&!r.includes(t)))),e.add(...r.filter((t=>t&&!l.includes(t))))}else if("style"===e){for(const e in n)o&&null!=o[e]||(e.includes("-")?t.style.removeProperty(e):t.style[e]="");for(const e in o)n&&o[e]===n[e]||(e.includes("-")?t.style.setProperty(e,o[e]):t.style[e]=o[e])}else if("ref"===e)o&&o(t);else if(i||"o"!==e[0]||"n"!==e[1]){const l=j(o);if((i||l&&null!==o)&&!r)try{if(t.tagName.includes("-"))t[e]=o;else{const l=null==o?"":o;"list"===e?i=!1:null!=n&&t[e]==l||(t[e]=l)}}catch(t){}null==o||!1===o?!1===o&&""!==t.getAttribute(e)||t.removeAttribute(e):(!i||4&s||r)&&!l&&t.setAttribute(e,o=!0===o?"":o)}else if(e="-"===e[2]?e.slice(3):l(a,c)?c.slice(2):c[2]+e.slice(3),n||o){const l=e.endsWith(q);e=e.replace(G,""),n&&f.rel(t,e,n,l),o&&f.ael(t,e,o,l)}}},W=/\s/,H=t=>t?t.split(W):[],q="Capture",G=RegExp(q+"$"),V=(t,e,n)=>{const o=11===e.m.nodeType&&e.m.host?e.m.host:e.m,l=t&&t.u||S,r=e.u||S;for(const t of _(Object.keys(l)))t in r||N(o,t,l[t],void 0,n,e.o);for(const t of _(Object.keys(r)))N(o,t,l[t],r[t],n,e.o)};function _(t){return t.includes("ref")?[...t.filter((t=>"ref"!==t)),"ref"]:t}var z=!1,B=(t,e,n)=>{const o=e.h[n];let l,r,s=0;if(null!==o.i)l=o.m=u.createTextNode(o.i);else{if(z||(z="svg"===o.p),l=o.m=u.createElementNS(z?"http://www.w3.org/2000/svg":"http://www.w3.org/1999/xhtml",o.p),z&&"foreignObject"===o.p&&(z=!1),V(null,o,z),null!=M&&l["s-si"]!==M&&l.classList.add(l["s-si"]=M),o.h)for(s=0;s<o.h.length;++s)r=B(t,o,s),r&&l.appendChild(r);"svg"===o.p?z=!1:"foreignObject"===l.tagName&&(z=!0)}return l["s-hn"]=x,l},I=(t,e,n,o,l,r)=>{let s,i=t;for(i.shadowRoot&&i.tagName===x&&(i=i.shadowRoot);l<=r;++l)o[l]&&(s=B(null,n,l),s&&(o[l].m=s,Y(i,s,e)))},J=(t,e,n)=>{for(let o=e;o<=n;++o){const e=t[o];if(e){const t=e.m;X(e),t&&t.remove()}}},K=(t,e)=>t.p===e.p,Q=(t,e,n=!1)=>{const o=e.m=t.m,l=t.h,r=e.h,s=e.p,i=e.i;null===i?(V(t,e,z="svg"===s||"foreignObject"!==s&&z),null!==l&&null!==r?((t,e,n,o,l=!1)=>{let r,s=0,i=0,c=e.length-1,a=e[0],u=e[c],f=o.length-1,h=o[0],p=o[f];for(;s<=c&&i<=f;)null==a?a=e[++s]:null==u?u=e[--c]:null==h?h=o[++i]:null==p?p=o[--f]:K(a,h)?(Q(a,h,l),a=e[++s],h=o[++i]):K(u,p)?(Q(u,p,l),u=e[--c],p=o[--f]):K(a,p)?(Q(a,p,l),Y(t,a.m,u.m.nextSibling),a=e[++s],p=o[--f]):K(u,h)?(Q(u,h,l),Y(t,u.m,a.m),u=e[--c],h=o[++i]):(r=B(e&&e[i],n,i),h=o[++i],r&&Y(a.m.parentNode,r,a.m));s>c?I(t,null==o[f+1]?null:o[f+1].m,n,o,i,f):i>f&&J(e,s,c)})(o,l,e,r,n):null!==r?(null!==t.i&&(o.textContent=""),I(o,null,e,r,0,r.length-1)):null!==l&&J(l,0,l.length-1),z&&"svg"===s&&(z=!1)):t.i!==i&&(o.data=i)},X=t=>{t.u&&t.u.ref&&t.u.ref(null),t.h&&t.h.map(X)},Y=(t,e,n)=>null==t?void 0:t.insertBefore(e,n),Z=(t,e)=>{e&&!t.$&&e["s-p"]&&e["s-p"].push(new Promise((e=>t.$=e)))},tt=(t,e)=>{if(t.o|=16,!(4&t.o))return Z(t,t.S),g((()=>et(t,e)));t.o|=512},et=(t,e)=>{const n=t.t;if(!n)throw Error(`Can't render component <${t.$hostElement$.tagName.toLowerCase()} /> with invalid Stencil runtime! Make sure this imported component is compiled with a \`externalRuntime: true\` flag. For more information, please refer to https://stenciljs.com/docs/custom-elements#externalruntime`);let o;return e&&(o=ct(n,"componentWillLoad")),nt(o,(()=>lt(t,n,e)))},nt=(t,e)=>ot(t)?t.then(e).catch((t=>{console.error(t),e()})):e(),ot=t=>t instanceof Promise||t&&t.then&&"function"==typeof t.then,lt=async(t,e,n)=>{var o;const l=t.$hostElement$,r=l["s-rc"];n&&(t=>{const e=t.j,n=t.$hostElement$,o=e.o,l=((t,e)=>{var n;const o=F(e),l=i.get(o);if(t=11===t.nodeType?t:u,l)if("string"==typeof l){let r,s=A.get(t=t.head||t);if(s||A.set(t,s=new Set),!s.has(o)){{r=u.createElement("style"),r.innerHTML=l;const e=null!=(n=f.O)?n:O(u);null!=e&&r.setAttribute("nonce",e),t.insertBefore(r,t.querySelector("link"))}4&e.o&&(r.innerHTML+=c),s&&s.add(o)}}else t.adoptedStyleSheets.includes(l)||(t.adoptedStyleSheets=[...t.adoptedStyleSheets,l]);return o})(n.shadowRoot?n.shadowRoot:n.getRootNode(),e);10&o&&(n["s-sc"]=l,n.classList.add(l+"-h"))})(t);rt(t,e,l,n),r&&(r.map((t=>t())),l["s-rc"]=void 0);{const e=null!=(o=l["s-p"])?o:[],n=()=>st(t);0===e.length?n():(Promise.all(e).then(n),t.o|=4,e.length=0)}},rt=(t,e,n,o)=>{try{e=e.render(),t.o&=-17,t.o|=2,((t,e,n=!1)=>{const o=t.$hostElement$,l=t.j,r=t.k||L(null,null),s=(t=>t&&t.p===T)(e)?e:D(null,null,e);if(x=o.tagName,l.C&&(s.u=s.u||{},l.C.map((([t,e])=>s.u[e]=o[t]))),n&&s.u)for(const t of Object.keys(s.u))o.hasAttribute(t)&&!["key","ref","style","class"].includes(t)&&(s.u[t]=o[t]);s.p=null,s.o|=4,t.k=s,s.m=r.m=o.shadowRoot||o,M=o["s-sc"],Q(r,s,n)})(t,e,o)}catch(e){r(e,t.$hostElement$)}return null},st=t=>{const e=t.$hostElement$,n=t.t,o=t.S;ct(n,"componentDidRender"),64&t.o?ct(n,"componentDidUpdate"):(t.o|=64,at(e),ct(n,"componentDidLoad"),t.M(e),o||it()),t.$&&(t.$(),t.$=void 0),512&t.o&&b((()=>tt(t,!1))),t.o&=-517},it=()=>{at(u.documentElement),b((()=>(t=>{const e=f.ce("appload",{detail:{namespace:"general-tutorial-slider"}});return t.dispatchEvent(e),e})(a)))},ct=(t,e,n)=>{if(t&&t[e])try{return t[e](n)}catch(t){r(t)}},at=t=>t.classList.add("hydrated"),ut=(t,e,o)=>{var l,s;const i=t.prototype;if(e.P||e.R||t.watchers){t.watchers&&!e.R&&(e.R=t.watchers);const c=Object.entries(null!=(l=e.P)?l:{});if(c.map((([t,[l]])=>{(31&l||2&o&&32&l)&&Object.defineProperty(i,t,{get(){return((t,e)=>n(this).D.get(e))(0,t)},set(o){((t,e,o,l)=>{const s=n(t);if(!s)throw Error(`Couldn't find host element for "${l.v}" as it is unknown to this Stencil runtime. This usually happens when integrating a 3rd party Stencil component with another Stencil component or application. Please reach out to the maintainers of the 3rd party Stencil component or report this on the Stencil Discord server (https://chat.stenciljs.com) or comment on this similar [GitHub issue](https://github.com/ionic-team/stencil/issues/5457).`);const i=s.$hostElement$,c=s.D.get(e),a=s.o,u=s.t;if(o=((t,e)=>null==t||j(t)?t:4&e?"false"!==t&&(""===t||!!t):2&e?parseFloat(t):1&e?t+"":t)(o,l.P[e][0]),(!(8&a)||void 0===c)&&o!==c&&(!Number.isNaN(c)||!Number.isNaN(o))&&(s.D.set(e,o),u)){if(l.R&&128&a){const t=l.R[e];t&&t.map((t=>{try{u[t](o,c,e)}catch(t){r(t,i)}}))}2==(18&a)&&tt(s,!1)}})(this,t,o,e)},configurable:!0,enumerable:!0})})),1&o){const o=new Map;i.attributeChangedCallback=function(t,l,r){f.jmp((()=>{var s;const c=o.get(t);if(this.hasOwnProperty(c))r=this[c],delete this[c];else{if(i.hasOwnProperty(c)&&"number"==typeof this[c]&&this[c]==r)return;if(null==c){const o=n(this),i=null==o?void 0:o.o;if(i&&!(8&i)&&128&i&&r!==l){const n=o.t,i=null==(s=e.R)?void 0:s[t];null==i||i.forEach((e=>{null!=n[e]&&n[e].call(n,r,l,t)}))}return}}this[c]=(null!==r||"boolean"!=typeof this[c])&&r}))},t.observedAttributes=Array.from(new Set([...Object.keys(null!=(s=e.R)?s:{}),...c.filter((([t,e])=>15&e[0])).map((([t,n])=>{var l;const r=n[1]||t;return o.set(r,t),512&n[0]&&(null==(l=e.C)||l.push([t,r])),r}))]))}}return t},ft=t=>{ct(t,"connectedCallback")},ht=t=>{ct(t,"disconnectedCallback")},pt=(t,o={})=>{var l;const h=[],d=o.exclude||[],m=a.customElements,w=u.head,y=w.querySelector("meta[charset]"),v=u.createElement("style"),$=[];let b,g=!0;Object.assign(f,o),f.l=new URL(o.resourcesUrl||"./",u.baseURI).href;let S=!1;if(t.map((t=>{t[1].map((o=>{var l;const c={o:o[0],v:o[1],P:o[2],L:o[3]};4&c.o&&(S=!0),c.P=o[2],c.C=[],c.R=null!=(l=o[4])?l:{};const a=c.v,u=class extends HTMLElement{constructor(t){if(super(t),this.hasRegisteredEventListeners=!1,((t,n)=>{const o={o:0,$hostElement$:t,j:n,D:new Map};o.T=new Promise((t=>o.M=t)),t["s-p"]=[],t["s-rc"]=[],e.set(t,o)})(t=this,c),1&c.o)if(t.shadowRoot){if("open"!==t.shadowRoot.mode)throw Error(`Unable to re-use existing shadow root for ${c.v}! Mode is set to ${t.shadowRoot.mode} but Stencil only supports open shadow roots.`)}else t.attachShadow({mode:"open"})}connectedCallback(){this.hasRegisteredEventListeners||(this.hasRegisteredEventListeners=!0),b&&(clearTimeout(b),b=null),g?$.push(this):f.jmp((()=>(t=>{if(!(1&f.o)){const e=n(t),o=e.j,l=()=>{};if(1&e.o)(null==e?void 0:e.t)?ft(e.t):(null==e?void 0:e.T)&&e.T.then((()=>ft(e.t)));else{e.o|=1;{let n=t;for(;n=n.parentNode||n.host;)if(n["s-p"]){Z(e,e.S=n);break}}o.P&&Object.entries(o.P).map((([e,[n]])=>{if(31&n&&t.hasOwnProperty(e)){const n=t[e];delete t[e],t[e]=n}})),(async(t,e,n)=>{let o;if(!(32&e.o)){if(e.o|=32,n.U){const t=(t=>{const e=t.v.replace(/-/g,"_"),n=t.U;if(!n)return;const o=s.get(n);return o?o[e]:import(`./${n}.entry.js`).then((t=>(s.set(n,t),t[e])),r)
2
- /*!__STENCIL_STATIC_IMPORT_SWITCH__*/})(n);if(t&&"then"in t){const e=()=>{};o=await t,e()}else o=t;if(!o)throw Error(`Constructor for "${n.v}#${e.A}" was not found`);o.isProxied||(n.R=o.watchers,ut(o,n,2),o.isProxied=!0);const l=()=>{};e.o|=8;try{new o(e)}catch(t){r(t)}e.o&=-9,e.o|=128,l(),ft(e.t)}else o=t.constructor,customElements.whenDefined(t.localName).then((()=>e.o|=128));if(o&&o.style){let t;"string"==typeof o.style&&(t=o.style);const e=F(n);if(!i.has(e)){const o=()=>{};((t,e,n)=>{let o=i.get(t);p&&n?(o=o||new CSSStyleSheet,"string"==typeof o?o=e:o.replaceSync(e)):o=e,i.set(t,o)})(e,t,!!(1&n.o)),o()}}}const l=e.S,c=()=>tt(e,!0);l&&l["s-rc"]?l["s-rc"].push(c):c()})(t,e,o)}l()}})(this)))}disconnectedCallback(){f.jmp((()=>(async()=>{if(!(1&f.o)){const t=n(this);(null==t?void 0:t.t)?ht(t.t):(null==t?void 0:t.T)&&t.T.then((()=>ht(t.t)))}})()))}componentOnReady(){return n(this).T}};c.U=t[0],d.includes(a)||m.get(a)||(h.push(a),m.define(a,ut(u,c,1)))}))})),h.length>0&&(S&&(v.textContent+=c),v.textContent+=h.sort()+"{visibility:hidden}.hydrated{visibility:inherit}",v.innerHTML.length)){v.setAttribute("data-styles","");const t=null!=(l=f.O)?l:O(u);null!=t&&v.setAttribute("nonce",t),w.insertBefore(v,y?y.nextSibling:w.firstChild)}g=!1,$.length?$.map((t=>t.connectedCallback())):f.jmp((()=>b=setTimeout(it,30)))},dt=t=>f.O=t;export{pt as b,U as g,D as h,h as p,o as r,dt as s}