@everymatrix/general-tutorial-slider 1.85.17 → 1.85.18
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.
|
@@ -65,6 +65,8 @@ function setClientStyling(stylingContainer, clientStyling) {
|
|
|
65
65
|
* @param {string} clientStylingUrl The URL of the style content
|
|
66
66
|
*/
|
|
67
67
|
function setClientStylingURL(stylingContainer, clientStylingUrl) {
|
|
68
|
+
if (!stylingContainer || !clientStylingUrl) return;
|
|
69
|
+
|
|
68
70
|
const url = new URL(clientStylingUrl);
|
|
69
71
|
|
|
70
72
|
fetch(url.href)
|
|
@@ -61,6 +61,8 @@ function setClientStyling(stylingContainer, clientStyling) {
|
|
|
61
61
|
* @param {string} clientStylingUrl The URL of the style content
|
|
62
62
|
*/
|
|
63
63
|
function setClientStylingURL(stylingContainer, clientStylingUrl) {
|
|
64
|
+
if (!stylingContainer || !clientStylingUrl) return;
|
|
65
|
+
|
|
64
66
|
const url = new URL(clientStylingUrl);
|
|
65
67
|
|
|
66
68
|
fetch(url.href)
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{r as t,h as n,g as i}from"./index-37276b41.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,n){if(t){const i=document.createElement("style");i.innerHTML=n,t.appendChild(i)}}function s(t,n){const i=new URL(n);fetch(i.href).then((t=>t.text())).then((n=>{const i=document.createElement("style");i.innerHTML=n,t&&t.appendChild(i)})).catch((t=>{console.error("There was an error while trying to load client styling from URL",t)}))}const r=class{constructor(n){var i;t(this,n),this.userAgent=window.navigator.userAgent,this.isMobile=!!((i=this.userAgent).toLowerCase().match(/android/i)||i.toLowerCase().match(/blackberry|bb/i)||i.toLowerCase().match(/iphone|ipad|ipod/i)||i.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,n){t&&t!=n&&this.cmsEndpoint&&this.getGeneralTutorialSlider().then((t=>{this.tutorialData=t}))}handleClientStylingChange(t,n){t!=n&&o(this.stylingContainer,this.clientStyling)}handleClientStylingChangeURL(t,n){t!=n&&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,n){if(window.emMessageBus){const i=document.createElement("style");window.emMessageBus.subscribe(n,(n=>{i.innerHTML=n,t&&t.appendChild(i)}))}}(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(((n,i)=>{this.isLoading=!0,fetch(t.href).then((t=>t.json())).then((t=>{n(t)})).catch((t=>{console.error(t),this.hasErrors=!0,i(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 n=this.activeIndex-t;if(n>0)for(let t=0;t<n;t++)this.move(-1);else for(let t=0;t>n;t--)this.move(1)}handleTouchStart(t){const n=this.getTouches(t)[0];this.xDown=n.clientX,this.yDown=n.clientY}getTouches(t){return t.touches||t.originalEvent.touches}handleTouchMove(t){if(!this.xDown||!this.yDown)return;let n=this.xDown-t.touches[0].clientX,i=this.yDown-t.touches[0].clientY;Math.abs(n)>Math.abs(i)&&this.move(n>0?1:-1),this.xDown=null,this.yDown=null}setActive(t){const n=this.tutorialData.length;this.activeIndex=t>=0?t>=n-1?n-1:t:0}renderDots(){const t=[];for(let i=0;i<this.tutorialData.length/this.itemsPerPage;i++)t.push(n("li",{class:i==this.activeIndex?"active":"default",onClick:()=>{this.goTo(i),this.setActive(i)}}));return t}render(){const t={transform:`translate(${this.allElementsWidth/(this.tutorialData.length-1)*this.activeIndex*-1}px, 0px)`},i={width:this.tutorialElementWidth/this.itemsPerPage+"px"};return this.hasErrors?n("div",{class:"GeneralTutorialSliderError"},n("div",{class:"TitleError"},e[void 0!==(o=this.language)&&o in e?o:"en"].error)):this.isLoading?void 0:n("div",{ref:t=>this.stylingContainer=t},n("div",{class:"TutorialWrapper"},n("div",{class:"TutorialContent",ref:t=>this.slider=t},(this.showSliderArrows&&!this.isMobile||this.showSliderArrowsMobile&&this.isMobile)&&n("div",{class:0===this.activeIndex?"SliderNavButton DisabledArrow":"SliderNavButton",onClick:()=>this.move(-1)},n("svg",{fill:"none",stroke:"var(--emw--color-secondary, #FD2839)",viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg"},n("path",{"stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"2",d:"M15 19l-7-7 7-7"}))),n("main",null,n("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 n("div",{class:"TutorialItem",style:i},n("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)?n("div",{class:"ItemImage"},n("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)?n("div",{class:"ItemImage"},n("video",{controls:!0,loop:!0,autoplay:!0},n("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,n("div",{class:"ItemDescription",innerHTML:null==t?void 0:t.content}))})))),(this.showSliderArrows&&!this.isMobile||this.showSliderArrowsMobile&&this.isMobile)&&n("div",{class:this.activeIndex===this.tutorialData.length-1?" SliderNavButton DisabledArrow disabled":"SliderNavButton",onClick:()=>this.move(1)},n("svg",{fill:"none",stroke:"currentColor",viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg"},n("path",{"stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"2",d:"M9 5l7 7-7 7"}))),n("div",null)),this.showSliderDots&&n("div",{class:"DotsWrapper"},n("ul",{class:"Dots"},this.renderDots()))));var o}get el(){return i(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 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 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
|
+
import{r as t,h as n,g as i}from"./index-37276b41.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,n){if(t){const i=document.createElement("style");i.innerHTML=n,t.appendChild(i)}}function s(t,n){if(!t||!n)return;const i=new URL(n);fetch(i.href).then((t=>t.text())).then((n=>{const i=document.createElement("style");i.innerHTML=n,t&&t.appendChild(i)})).catch((t=>{console.error("There was an error while trying to load client styling from URL",t)}))}const r=class{constructor(n){var i;t(this,n),this.userAgent=window.navigator.userAgent,this.isMobile=!!((i=this.userAgent).toLowerCase().match(/android/i)||i.toLowerCase().match(/blackberry|bb/i)||i.toLowerCase().match(/iphone|ipad|ipod/i)||i.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,n){t&&t!=n&&this.cmsEndpoint&&this.getGeneralTutorialSlider().then((t=>{this.tutorialData=t}))}handleClientStylingChange(t,n){t!=n&&o(this.stylingContainer,this.clientStyling)}handleClientStylingChangeURL(t,n){t!=n&&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,n){if(window.emMessageBus){const i=document.createElement("style");window.emMessageBus.subscribe(n,(n=>{i.innerHTML=n,t&&t.appendChild(i)}))}}(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(((n,i)=>{this.isLoading=!0,fetch(t.href).then((t=>t.json())).then((t=>{n(t)})).catch((t=>{console.error(t),this.hasErrors=!0,i(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 n=this.activeIndex-t;if(n>0)for(let t=0;t<n;t++)this.move(-1);else for(let t=0;t>n;t--)this.move(1)}handleTouchStart(t){const n=this.getTouches(t)[0];this.xDown=n.clientX,this.yDown=n.clientY}getTouches(t){return t.touches||t.originalEvent.touches}handleTouchMove(t){if(!this.xDown||!this.yDown)return;let n=this.xDown-t.touches[0].clientX,i=this.yDown-t.touches[0].clientY;Math.abs(n)>Math.abs(i)&&this.move(n>0?1:-1),this.xDown=null,this.yDown=null}setActive(t){const n=this.tutorialData.length;this.activeIndex=t>=0?t>=n-1?n-1:t:0}renderDots(){const t=[];for(let i=0;i<this.tutorialData.length/this.itemsPerPage;i++)t.push(n("li",{class:i==this.activeIndex?"active":"default",onClick:()=>{this.goTo(i),this.setActive(i)}}));return t}render(){const t={transform:`translate(${this.allElementsWidth/(this.tutorialData.length-1)*this.activeIndex*-1}px, 0px)`},i={width:this.tutorialElementWidth/this.itemsPerPage+"px"};return this.hasErrors?n("div",{class:"GeneralTutorialSliderError"},n("div",{class:"TitleError"},e[void 0!==(o=this.language)&&o in e?o:"en"].error)):this.isLoading?void 0:n("div",{ref:t=>this.stylingContainer=t},n("div",{class:"TutorialWrapper"},n("div",{class:"TutorialContent",ref:t=>this.slider=t},(this.showSliderArrows&&!this.isMobile||this.showSliderArrowsMobile&&this.isMobile)&&n("div",{class:0===this.activeIndex?"SliderNavButton DisabledArrow":"SliderNavButton",onClick:()=>this.move(-1)},n("svg",{fill:"none",stroke:"var(--emw--color-secondary, #FD2839)",viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg"},n("path",{"stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"2",d:"M15 19l-7-7 7-7"}))),n("main",null,n("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 n("div",{class:"TutorialItem",style:i},n("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)?n("div",{class:"ItemImage"},n("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)?n("div",{class:"ItemImage"},n("video",{controls:!0,loop:!0,autoplay:!0},n("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,n("div",{class:"ItemDescription",innerHTML:null==t?void 0:t.content}))})))),(this.showSliderArrows&&!this.isMobile||this.showSliderArrowsMobile&&this.isMobile)&&n("div",{class:this.activeIndex===this.tutorialData.length-1?" SliderNavButton DisabledArrow disabled":"SliderNavButton",onClick:()=>this.move(1)},n("svg",{fill:"none",stroke:"currentColor",viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg"},n("path",{"stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"2",d:"M9 5l7 7-7 7"}))),n("div",null)),this.showSliderDots&&n("div",{class:"DotsWrapper"},n("ul",{class:"Dots"},this.renderDots()))));var o}get el(){return i(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 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 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}
|