@everymatrix/general-tutorial-slider 1.43.0 → 1.43.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.
@@ -5,7 +5,6 @@ Object.defineProperty(exports, '__esModule', { value: true });
5
5
  const index = require('./index-18ec3908.js');
6
6
 
7
7
  const DEFAULT_LANGUAGE = 'en';
8
- const SUPPORTED_LANGUAGES = ['ro', 'en', 'fr', 'ar', 'hu', 'hr'];
9
8
  const TRANSLATIONS = {
10
9
  en: {
11
10
  error: 'Error',
@@ -42,7 +41,7 @@ const TRANSLATIONS = {
42
41
  };
43
42
  const translate = (key, customLang) => {
44
43
  const lang = customLang;
45
- return TRANSLATIONS[lang !== undefined && SUPPORTED_LANGUAGES.includes(lang) ? lang : DEFAULT_LANGUAGE][key];
44
+ return TRANSLATIONS[(lang !== undefined) && (lang in TRANSLATIONS) ? lang : DEFAULT_LANGUAGE][key];
46
45
  };
47
46
 
48
47
  /**
@@ -1,5 +1,4 @@
1
1
  const DEFAULT_LANGUAGE = 'en';
2
- const SUPPORTED_LANGUAGES = ['ro', 'en', 'fr', 'ar', 'hu', 'hr'];
3
2
  const TRANSLATIONS = {
4
3
  en: {
5
4
  error: 'Error',
@@ -36,5 +35,5 @@ const TRANSLATIONS = {
36
35
  };
37
36
  export const translate = (key, customLang) => {
38
37
  const lang = customLang;
39
- return TRANSLATIONS[lang !== undefined && SUPPORTED_LANGUAGES.includes(lang) ? lang : DEFAULT_LANGUAGE][key];
38
+ return TRANSLATIONS[(lang !== undefined) && (lang in TRANSLATIONS) ? lang : DEFAULT_LANGUAGE][key];
40
39
  };
@@ -1,7 +1,6 @@
1
1
  import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
2
2
 
3
3
  const DEFAULT_LANGUAGE = 'en';
4
- const SUPPORTED_LANGUAGES = ['ro', 'en', 'fr', 'ar', 'hu', 'hr'];
5
4
  const TRANSLATIONS = {
6
5
  en: {
7
6
  error: 'Error',
@@ -38,7 +37,7 @@ const TRANSLATIONS = {
38
37
  };
39
38
  const translate = (key, customLang) => {
40
39
  const lang = customLang;
41
- return TRANSLATIONS[lang !== undefined && SUPPORTED_LANGUAGES.includes(lang) ? lang : DEFAULT_LANGUAGE][key];
40
+ return TRANSLATIONS[(lang !== undefined) && (lang in TRANSLATIONS) ? lang : DEFAULT_LANGUAGE][key];
42
41
  };
43
42
 
44
43
  /**
@@ -1,7 +1,6 @@
1
1
  import { r as registerInstance, h, g as getElement } from './index-a2165162.js';
2
2
 
3
3
  const DEFAULT_LANGUAGE = 'en';
4
- const SUPPORTED_LANGUAGES = ['ro', 'en', 'fr', 'ar', 'hu', 'hr'];
5
4
  const TRANSLATIONS = {
6
5
  en: {
7
6
  error: 'Error',
@@ -38,7 +37,7 @@ const TRANSLATIONS = {
38
37
  };
39
38
  const translate = (key, customLang) => {
40
39
  const lang = customLang;
41
- return TRANSLATIONS[lang !== undefined && SUPPORTED_LANGUAGES.includes(lang) ? lang : DEFAULT_LANGUAGE][key];
40
+ return TRANSLATIONS[(lang !== undefined) && (lang in TRANSLATIONS) ? lang : DEFAULT_LANGUAGE][key];
42
41
  };
43
42
 
44
43
  /**
@@ -1 +1 @@
1
- import{p as e,b as r}from"./p-a878ee14.js";(()=>{const r=import.meta.url,s={};return""!==r&&(s.resourcesUrl=new URL(".",r).href),e(s)})().then((e=>r([["p-a5ce3c59",[[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]}]]]],e)));
1
+ import{p as e,b as r}from"./p-a878ee14.js";(()=>{const r=import.meta.url,s={};return""!==r&&(s.resourcesUrl=new URL(".",r).href),e(s)})().then((e=>r([["p-4e4fd5b7",[[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]}]]]],e)));
@@ -0,0 +1 @@
1
+ import{r as t,h as i,g as n}from"./p-a878ee14.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.clientStyling="",this.clientStylingUrl="",this.language="en",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,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)}))}}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\n .TutorialItems {\n height: inherit;\n }\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}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@everymatrix/general-tutorial-slider",
3
- "version": "1.43.0",
3
+ "version": "1.43.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-a878ee14.js";const e=["ro","en","fr","ar","hu","hr"],o={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…"}},s=class{constructor(i){var n;t(this,i),this.clientStyling="",this.clientStylingUrl="",this.language="en",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,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)}))}}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"},(()=>{const t=this.language;return o[void 0!==t&&e.includes(t)?t:"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()))))}get el(){return n(this)}static get watchers(){return{cmsEndpoint:["watchEndpoint"],language:["watchEndpoint"]}}};s.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\n .TutorialItems {\n height: inherit;\n }\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{s as general_tutorial_slider}