@everymatrix/general-tutorial-slider 1.49.2 → 1.50.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/general-tutorial-slider.cjs.entry.js +2 -2
- package/dist/collection/components/general-tutorial-slider/general-tutorial-slider.css +7 -7
- package/dist/collection/components/general-tutorial-slider/general-tutorial-slider.js +1 -1
- package/dist/esm/general-tutorial-slider.entry.js +2 -2
- package/dist/general-tutorial-slider/general-tutorial-slider.esm.js +1 -1
- package/dist/general-tutorial-slider/p-6a4da579.entry.js +1 -0
- package/dist/types/Users/maria.bumbar/Desktop/widgets-monorepo/packages/stencil/general-tutorial-slider/.stencil/packages/stencil/general-tutorial-slider/stencil.config.d.ts +2 -0
- package/dist/types/Users/maria.bumbar/Desktop/widgets-monorepo/packages/stencil/general-tutorial-slider/.stencil/packages/stencil/general-tutorial-slider/stencil.config.dev.d.ts +2 -0
- package/package.json +1 -1
- package/dist/general-tutorial-slider/p-5bac4bfc.entry.js +0 -1
- package/dist/types/Users/adrian.pripon/Documents/Work/widgets-monorepo/packages/stencil/general-tutorial-slider/.stencil/packages/stencil/general-tutorial-slider/stencil.config.d.ts +0 -2
- package/dist/types/Users/adrian.pripon/Documents/Work/widgets-monorepo/packages/stencil/general-tutorial-slider/.stencil/packages/stencil/general-tutorial-slider/stencil.config.dev.d.ts +0 -2
|
@@ -84,7 +84,7 @@ const getDevicePlatform = () => {
|
|
|
84
84
|
}
|
|
85
85
|
};
|
|
86
86
|
|
|
87
|
-
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(--
|
|
87
|
+
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}";
|
|
88
88
|
const GeneralTutorialSliderStyle0 = generalTutorialSliderCss;
|
|
89
89
|
|
|
90
90
|
const GeneralTutorialSlider = class {
|
|
@@ -289,7 +289,7 @@ const GeneralTutorialSlider = class {
|
|
|
289
289
|
if (!this.isLoading) {
|
|
290
290
|
return (index.h("div", { ref: el => this.stylingContainer = el }, index.h("div", { class: "TutorialWrapper" }, index.h("div", { class: "TutorialContent", ref: (el) => this.slider = el }, ((this.showSliderArrows && !this.isMobile) ||
|
|
291
291
|
(this.showSliderArrowsMobile && this.isMobile)) &&
|
|
292
|
-
index.h("div", { class: this.activeIndex === 0 ? 'SliderNavButton DisabledArrow' : 'SliderNavButton', onClick: () => this.move(-1) }, index.h("svg", { fill: "none", stroke: "var(--
|
|
292
|
+
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) => {
|
|
293
293
|
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
|
|
294
294
|
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 }));
|
|
295
295
|
}))), ((this.showSliderArrows && !this.isMobile) ||
|
|
@@ -52,7 +52,7 @@ main {
|
|
|
52
52
|
padding: 25px 15px;
|
|
53
53
|
font-size: 18px;
|
|
54
54
|
font-weight: 600;
|
|
55
|
-
color: var(--
|
|
55
|
+
color: var(--emw--color-secondary, #FD2839);
|
|
56
56
|
}
|
|
57
57
|
.TutorialItem .ItemImage {
|
|
58
58
|
overflow: hidden;
|
|
@@ -77,12 +77,12 @@ main {
|
|
|
77
77
|
}
|
|
78
78
|
.SliderNavButton svg {
|
|
79
79
|
width: 20px;
|
|
80
|
-
stroke: var(--
|
|
80
|
+
stroke: var(--emw--color-secondary, #FD2839);
|
|
81
81
|
}
|
|
82
82
|
|
|
83
83
|
.DisabledArrow svg {
|
|
84
84
|
opacity: 0.2;
|
|
85
|
-
stroke: var(--
|
|
85
|
+
stroke: var(--emw--color-secondary, #FD2839);
|
|
86
86
|
pointer-events: none;
|
|
87
87
|
}
|
|
88
88
|
|
|
@@ -111,11 +111,11 @@ main {
|
|
|
111
111
|
background: #bbb;
|
|
112
112
|
}
|
|
113
113
|
.DotsWrapper ul.Dots li.active {
|
|
114
|
-
border: solid 1px var(--
|
|
115
|
-
background: var(--
|
|
114
|
+
border: solid 1px var(--emw--color-secondary, #FD2839);
|
|
115
|
+
background: var(--emw--color-secondary, #FD2839);
|
|
116
116
|
}
|
|
117
117
|
.DotsWrapper ul.Dots li.default {
|
|
118
|
-
border: solid 1px var(--
|
|
118
|
+
border: solid 1px var(--emw--color-secondary, #FD2839);
|
|
119
119
|
background-color: #FFF;
|
|
120
120
|
}
|
|
121
121
|
|
|
@@ -148,7 +148,7 @@ main {
|
|
|
148
148
|
padding: 25px 15px;
|
|
149
149
|
font-size: 18px;
|
|
150
150
|
font-weight: 600;
|
|
151
|
-
color: var(--
|
|
151
|
+
color: var(--emw--color-secondary, #FD2839);
|
|
152
152
|
}
|
|
153
153
|
.TutorialItem .ItemImage {
|
|
154
154
|
min-height: 200px;
|
|
@@ -202,7 +202,7 @@ export class GeneralTutorialSlider {
|
|
|
202
202
|
if (!this.isLoading) {
|
|
203
203
|
return (h("div", { ref: el => this.stylingContainer = el }, h("div", { class: "TutorialWrapper" }, h("div", { class: "TutorialContent", ref: (el) => this.slider = el }, ((this.showSliderArrows && !this.isMobile) ||
|
|
204
204
|
(this.showSliderArrowsMobile && this.isMobile)) &&
|
|
205
|
-
h("div", { class: this.activeIndex === 0 ? 'SliderNavButton DisabledArrow' : 'SliderNavButton', onClick: () => this.move(-1) }, h("svg", { fill: "none", stroke: "var(--
|
|
205
|
+
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) => {
|
|
206
206
|
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
|
|
207
207
|
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 }));
|
|
208
208
|
}))), ((this.showSliderArrows && !this.isMobile) ||
|
|
@@ -80,7 +80,7 @@ const getDevicePlatform = () => {
|
|
|
80
80
|
}
|
|
81
81
|
};
|
|
82
82
|
|
|
83
|
-
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(--
|
|
83
|
+
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}";
|
|
84
84
|
const GeneralTutorialSliderStyle0 = generalTutorialSliderCss;
|
|
85
85
|
|
|
86
86
|
const GeneralTutorialSlider = class {
|
|
@@ -285,7 +285,7 @@ const GeneralTutorialSlider = class {
|
|
|
285
285
|
if (!this.isLoading) {
|
|
286
286
|
return (h("div", { ref: el => this.stylingContainer = el }, h("div", { class: "TutorialWrapper" }, h("div", { class: "TutorialContent", ref: (el) => this.slider = el }, ((this.showSliderArrows && !this.isMobile) ||
|
|
287
287
|
(this.showSliderArrowsMobile && this.isMobile)) &&
|
|
288
|
-
h("div", { class: this.activeIndex === 0 ? 'SliderNavButton DisabledArrow' : 'SliderNavButton', onClick: () => this.move(-1) }, h("svg", { fill: "none", stroke: "var(--
|
|
288
|
+
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) => {
|
|
289
289
|
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
|
|
290
290
|
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 }));
|
|
291
291
|
}))), ((this.showSliderArrows && !this.isMobile) ||
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{p as e,b as r}from"./p-87756a93.js";export{s as setNonce}from"./p-87756a93.js";import{g as l}from"./p-e1255160.js";(()=>{const s=import.meta.url,r={};return""!==s&&(r.resourcesUrl=new URL(".",s).href),e(r)})().then((async e=>(await l(),r([["p-
|
|
1
|
+
import{p as e,b as r}from"./p-87756a93.js";export{s as setNonce}from"./p-87756a93.js";import{g as l}from"./p-e1255160.js";(()=>{const s=import.meta.url,r={};return""!==s&&(r.resourcesUrl=new URL(".",s).href),e(r)})().then((async e=>(await l(),r([["p-6a4da579",[[1,"general-tutorial-slider",{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],limitStylingAppends:[32],isLoading:[32],activeIndex:[32],tutorialElementWidth:[32]},null,{cmsEndpoint:["watchEndpoint"],language:["watchEndpoint"]}]]]],e))));
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{r as t,h as i,g as n}from"./p-87756a93.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…"}},o=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.setClientStyling=()=>{let t=document.createElement("style");t.innerHTML=this.clientStyling,this.stylingContainer.prepend(t)},this.setClientStylingURL=()=>{let t=new URL(this.clientStylingUrl),i=document.createElement("style");fetch(t.href).then((t=>t.text())).then((t=>{i.innerHTML=t,setTimeout((()=>{this.stylingContainer.prepend(i)}),1)})).catch((t=>{console.log("error ",t)}))},this.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.limitStylingAppends=!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}))}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)}componentDidRender(){this.el.addEventListener("touchstart",this.handleTouchStart.bind(this),{passive:!0}),this.el.addEventListener("touchmove",this.handleTouchMove.bind(this),{passive:!0}),this.recalculateItemsPerPage(),!this.limitStylingAppends&&this.stylingContainer&&(this.clientStyling&&this.setClientStyling(),this.clientStylingUrl&&this.setClientStylingURL(),this.limitStylingAppends=!0)}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)}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,u,c,p,v,m,w,g,f,x,I;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===(u=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===u?void 0:u.src,alt:null==t?void 0:t.slug})):(null===(c=null==t?void 0:t.media)||void 0===c?void 0:c.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===(I=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===I?void 0:I.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"]}}};o.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{o as general_tutorial_slider}
|
package/package.json
CHANGED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import{r as t,h as i,g as n}from"./p-87756a93.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…"}},o=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.setClientStyling=()=>{let t=document.createElement("style");t.innerHTML=this.clientStyling,this.stylingContainer.prepend(t)},this.setClientStylingURL=()=>{let t=new URL(this.clientStylingUrl),i=document.createElement("style");fetch(t.href).then((t=>t.text())).then((t=>{i.innerHTML=t,setTimeout((()=>{this.stylingContainer.prepend(i)}),1)})).catch((t=>{console.log("error ",t)}))},this.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.limitStylingAppends=!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}))}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)}componentDidRender(){this.el.addEventListener("touchstart",this.handleTouchStart.bind(this),{passive:!0}),this.el.addEventListener("touchmove",this.handleTouchMove.bind(this),{passive:!0}),this.recalculateItemsPerPage(),!this.limitStylingAppends&&this.stylingContainer&&(this.clientStyling&&this.setClientStyling(),this.clientStylingUrl&&this.setClientStylingURL(),this.limitStylingAppends=!0)}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)}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(--emfe-w-color-secondary, #FD2839)",viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg"},i("path",{"stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"2",d:"M15 19l-7-7 7-7"}))),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,u,c,p,v,m,f,w,g,x,I;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===(u=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===u?void 0:u.src,alt:null==t?void 0:t.slug})):(null===(c=null==t?void 0:t.media)||void 0===c?void 0:c.video)?i("div",{class:"ItemImage"},i("video",{controls:!0,loop:!0,autoplay:!0},i("source",this.isMobile?{src:null===(f=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===f?void 0:f.src,type:"video/mp4"}:{src:null===(I=null===(x=null===(g=null===(w=null==t?void 0:t.media)||void 0===w?void 0:w.video[0])||void 0===g?void 0:g.sources)||void 0===x?void 0:x.find((t=>"desktop"===t.media)))||void 0===I?void 0:I.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"]}}};o.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(--emfe-w-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(--emfe-w-color-secondary, #FD2839);\n}\n\n.DisabledArrow svg {\n opacity: 0.2;\n stroke: var(--emfe-w-color-secondary, #FD2839);\n pointer-events: none;\n}\n\n.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(--emfe-w-color-secondary, #FD2839);\n background: var(--emfe-w-color-secondary, #FD2839);\n}\n.DotsWrapper ul.Dots li.default {\n border: solid 1px var(--emfe-w-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(--emfe-w-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{o as general_tutorial_slider}
|