@everymatrix/general-tutorial-slider 1.54.12 → 1.56.0

package/dist/cjs/general-tutorial-slider.cjs.entry.js

@@ -44,6 +44,63 @@ const translate = (key, customLang) => {
     return TRANSLATIONS[(lang !== undefined) && (lang in TRANSLATIONS) ? lang : DEFAULT_LANGUAGE][key];
 };
 
+/**
+ * @name setClientStyling
+ * @description Method used to create and append to the passed element of the widget a style element with the content received
+ * @param {HTMLElement} stylingContainer The reference element of the widget
+ * @param {string} clientStyling The style content
+ */
+function setClientStyling(stylingContainer, clientStyling) {
+  if (stylingContainer) {
+    const sheet = document.createElement('style');
+    sheet.innerHTML = clientStyling;
+    stylingContainer.appendChild(sheet);
+  }
+}
+
+/**
+ * @name setClientStylingURL
+ * @description Method used to create and append to the passed element of the widget a style element with the content fetched from a given URL
+ * @param {HTMLElement} stylingContainer The reference element of the widget
+ * @param {string} clientStylingUrl The URL of the style content
+ */
+function setClientStylingURL(stylingContainer, clientStylingUrl) {
+  const url = new URL(clientStylingUrl);
+
+  fetch(url.href)
+    .then((res) => res.text())
+    .then((data) => {
+      const cssFile = document.createElement('style');
+      cssFile.innerHTML = data;
+      if (stylingContainer) {
+        stylingContainer.appendChild(cssFile);
+      }
+    })
+    .catch((err) => {
+      console.error('There was an error while trying to load client styling from URL', err);
+    });
+}
+
+/**
+ * @name setStreamLibrary
+ * @description Method used to create and append to the passed element of the widget a style element with content fetched from the MessageBus
+ * @param {HTMLElement} stylingContainer The highest element of the widget
+ * @param {string} domain The domain from where the content should be fetched (e.g. 'Casino.Style', 'App.Style', 'casino-footer.style', etc.)
+ * @param {ref} subscription A reference to a variable where the subscription should be saved for unsubscribing when no longer needed
+ */
+function setStreamStyling(stylingContainer, domain, subscription) {
+  if (window.emMessageBus) {
+    const sheet = document.createElement('style');
+
+    window.emMessageBus.subscribe(domain, (data) => {
+      sheet.innerHTML = data;
+      if (stylingContainer) {
+        stylingContainer.appendChild(sheet);
+      }
+    });
+  }
+}
+
 /**
  * @name isMobile
  * @description A method that returns if the browser used to access the app is from a mobile device or not
@@ -139,7 +196,6 @@ const GeneralTutorialSlider = class {
          */
         this.itemsPerPage = 1;
         this.hasErrors = false;
-        this.limitStylingAppends = false;
         this.isLoading = true;
         this.activeIndex = 0;
         this.tutorialElementWidth = 0;
@@ -156,24 +212,6 @@ const GeneralTutorialSlider = class {
                 this.recalculateItemsPerPage();
             }, 10);
         };
-        this.setClientStyling = () => {
-            let sheet = document.createElement('style');
-            sheet.innerHTML = this.clientStyling;
-            this.stylingContainer.prepend(sheet);
-        };
-        this.setClientStylingURL = () => {
-            let url = new URL(this.clientStylingUrl);
-            let cssFile = document.createElement('style');
-            fetch(url.href)
-                .then((res) => res.text())
-                .then((data) => {
-                cssFile.innerHTML = data;
-                setTimeout(() => { this.stylingContainer.prepend(cssFile); }, 1);
-            })
-                .catch((err) => {
-                console.log('error ', err);
-            });
-        };
     }
     watchEndpoint(newValue, oldValue) {
         if (newValue && newValue != oldValue && this.cmsEndpoint) {
@@ -182,6 +220,17 @@ const GeneralTutorialSlider = class {
             });
         }
     }
+    handleClientStylingChange(newValue, oldValue) {
+        if (newValue != oldValue) {
+            setClientStyling(this.stylingContainer, this.clientStyling);
+        }
+    }
+    handleClientStylingChangeURL(newValue, oldValue) {
+        if (newValue != oldValue) {
+            if (this.clientStylingUrl)
+                setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
+        }
+    }
     connectedCallback() {
         window.screen.orientation.addEventListener('change', this.orientationChangeHandler);
     }
@@ -194,20 +243,22 @@ const GeneralTutorialSlider = class {
     }
     componentDidLoad() {
         window.addEventListener('resize', this.resizeHandler);
+        if (this.stylingContainer) {
+            if (window.emMessageBus != undefined) {
+                setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`);
+            }
+            else {
+                if (this.clientStyling)
+                    setClientStyling(this.stylingContainer, this.clientStyling);
+                if (this.clientStylingUrl)
+                    setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
+            }
+        }
     }
     componentDidRender() {
         this.el.addEventListener('touchstart', this.handleTouchStart.bind(this), { passive: true });
         this.el.addEventListener('touchmove', this.handleTouchMove.bind(this), { passive: true });
         this.recalculateItemsPerPage();
-        // start custom styling area
-        if (!this.limitStylingAppends && this.stylingContainer) {
-            if (this.clientStyling)
-                this.setClientStyling();
-            if (this.clientStylingUrl)
-                this.setClientStylingURL();
-            this.limitStylingAppends = true;
-        }
-        // end custom styling area
     }
     componentDidUpdate() {
         this.recalculateItemsPerPage();
@@ -217,6 +268,7 @@ const GeneralTutorialSlider = class {
         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 url = new URL(`${this.cmsEndpoint}/${this.language}/slider-onboarding`);
@@ -336,7 +388,9 @@ const GeneralTutorialSlider = class {
     get el() { return index.getElement(this); }
     static get watchers() { return {
         "cmsEndpoint": ["watchEndpoint"],
-        "language": ["watchEndpoint"]
+        "language": ["watchEndpoint"],
+        "clientStyling": ["handleClientStylingChange"],
+        "clientStylingUrl": ["handleClientStylingChangeURL"]
     }; }
 };
 GeneralTutorialSlider.style = GeneralTutorialSliderStyle0;

package/dist/cjs/general-tutorial-slider.cjs.js

@@ -19,7 +19,7 @@ var patchBrowser = () => {
 
 patchBrowser().then(async (options) => {
   await appGlobals.globalScripts();
-  return index.bootstrapLazy([["general-tutorial-slider.cjs",[[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"]}]]]], options);
+  return index.bootstrapLazy([["general-tutorial-slider.cjs",[[1,"general-tutorial-slider",{"mbSource":[1,"mb-source"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"language":[513],"cmsEndpoint":[513,"cms-endpoint"],"userRoles":[513,"user-roles"],"cmsEnv":[513,"cms-env"],"showSliderDots":[516,"show-slider-dots"],"showSliderArrows":[516,"show-slider-arrows"],"showSliderArrowsMobile":[516,"show-slider-arrows-mobile"],"enableAutoScroll":[516,"enable-auto-scroll"],"intervalPeriod":[514,"interval-period"],"scrollItems":[520,"scroll-items"],"itemsPerPage":[514,"items-per-page"],"hasErrors":[32],"isLoading":[32],"activeIndex":[32],"tutorialElementWidth":[32]},null,{"cmsEndpoint":["watchEndpoint"],"language":["watchEndpoint"],"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingChangeURL"]}]]]], options);
 });
 
 exports.setNonce = index.setNonce;

package/dist/cjs/loader.cjs.js

@@ -8,7 +8,7 @@ const appGlobals = require('./app-globals-3a1e7e63.js');
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;
   await appGlobals.globalScripts();
-  return index.bootstrapLazy([["general-tutorial-slider.cjs",[[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"]}]]]], options);
+  return index.bootstrapLazy([["general-tutorial-slider.cjs",[[1,"general-tutorial-slider",{"mbSource":[1,"mb-source"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"language":[513],"cmsEndpoint":[513,"cms-endpoint"],"userRoles":[513,"user-roles"],"cmsEnv":[513,"cms-env"],"showSliderDots":[516,"show-slider-dots"],"showSliderArrows":[516,"show-slider-arrows"],"showSliderArrowsMobile":[516,"show-slider-arrows-mobile"],"enableAutoScroll":[516,"enable-auto-scroll"],"intervalPeriod":[514,"interval-period"],"scrollItems":[520,"scroll-items"],"itemsPerPage":[514,"items-per-page"],"hasErrors":[32],"isLoading":[32],"activeIndex":[32],"tutorialElementWidth":[32]},null,{"cmsEndpoint":["watchEndpoint"],"language":["watchEndpoint"],"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingChangeURL"]}]]]], options);
 };
 
 exports.setNonce = index.setNonce;

package/dist/collection/components/general-tutorial-slider/general-tutorial-slider.js

@@ -1,5 +1,6 @@
 import { h } from "@stencil/core";
 import { translate } from "../../utils/locale.utils";
+import { setClientStyling, setClientStylingURL, setStreamStyling } from "../../../../../../../../libs/common/src/styling/index";
 import { isMobile, getDevicePlatform } from "../../utils/utils";
 export class GeneralTutorialSlider {
     constructor() {
@@ -52,7 +53,6 @@ export class GeneralTutorialSlider {
          */
         this.itemsPerPage = 1;
         this.hasErrors = false;
-        this.limitStylingAppends = false;
         this.isLoading = true;
         this.activeIndex = 0;
         this.tutorialElementWidth = 0;
@@ -69,24 +69,6 @@ export class GeneralTutorialSlider {
                 this.recalculateItemsPerPage();
             }, 10);
         };
-        this.setClientStyling = () => {
-            let sheet = document.createElement('style');
-            sheet.innerHTML = this.clientStyling;
-            this.stylingContainer.prepend(sheet);
-        };
-        this.setClientStylingURL = () => {
-            let url = new URL(this.clientStylingUrl);
-            let cssFile = document.createElement('style');
-            fetch(url.href)
-                .then((res) => res.text())
-                .then((data) => {
-                cssFile.innerHTML = data;
-                setTimeout(() => { this.stylingContainer.prepend(cssFile); }, 1);
-            })
-                .catch((err) => {
-                console.log('error ', err);
-            });
-        };
     }
     watchEndpoint(newValue, oldValue) {
         if (newValue && newValue != oldValue && this.cmsEndpoint) {
@@ -95,6 +77,17 @@ export class GeneralTutorialSlider {
             });
         }
     }
+    handleClientStylingChange(newValue, oldValue) {
+        if (newValue != oldValue) {
+            setClientStyling(this.stylingContainer, this.clientStyling);
+        }
+    }
+    handleClientStylingChangeURL(newValue, oldValue) {
+        if (newValue != oldValue) {
+            if (this.clientStylingUrl)
+                setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
+        }
+    }
     connectedCallback() {
         window.screen.orientation.addEventListener('change', this.orientationChangeHandler);
     }
@@ -107,20 +100,22 @@ export class GeneralTutorialSlider {
     }
     componentDidLoad() {
         window.addEventListener('resize', this.resizeHandler);
+        if (this.stylingContainer) {
+            if (window.emMessageBus != undefined) {
+                setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`, this.stylingSubscription);
+            }
+            else {
+                if (this.clientStyling)
+                    setClientStyling(this.stylingContainer, this.clientStyling);
+                if (this.clientStylingUrl)
+                    setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
+            }
+        }
     }
     componentDidRender() {
         this.el.addEventListener('touchstart', this.handleTouchStart.bind(this), { passive: true });
         this.el.addEventListener('touchmove', this.handleTouchMove.bind(this), { passive: true });
         this.recalculateItemsPerPage();
-        // start custom styling area
-        if (!this.limitStylingAppends && this.stylingContainer) {
-            if (this.clientStyling)
-                this.setClientStyling();
-            if (this.clientStylingUrl)
-                this.setClientStylingURL();
-            this.limitStylingAppends = true;
-        }
-        // end custom styling area
     }
     componentDidUpdate() {
         this.recalculateItemsPerPage();
@@ -130,6 +125,7 @@ export class GeneralTutorialSlider {
         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 url = new URL(`${this.cmsEndpoint}/${this.language}/slider-onboarding`);
@@ -260,6 +256,25 @@ export class GeneralTutorialSlider {
     }
     static get properties() {
         return {
+            "mbSource": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Client custom styling via streamStyling"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "mb-source",
+                "reflect": false
+            },
             "clientStyling": {
                 "type": "string",
                 "mutable": false,
@@ -524,7 +539,6 @@ export class GeneralTutorialSlider {
     static get states() {
         return {
             "hasErrors": {},
-            "limitStylingAppends": {},
             "isLoading": {},
             "activeIndex": {},
             "tutorialElementWidth": {}
@@ -538,6 +552,12 @@ export class GeneralTutorialSlider {
             }, {
                 "propName": "language",
                 "methodName": "watchEndpoint"
+            }, {
+                "propName": "clientStyling",
+                "methodName": "handleClientStylingChange"
+            }, {
+                "propName": "clientStylingUrl",
+                "methodName": "handleClientStylingChangeURL"
             }];
     }
 }

package/dist/esm/general-tutorial-slider.entry.js

@@ -40,6 +40,63 @@ const translate = (key, customLang) => {
     return TRANSLATIONS[(lang !== undefined) && (lang in TRANSLATIONS) ? lang : DEFAULT_LANGUAGE][key];
 };
 
+/**
+ * @name setClientStyling
+ * @description Method used to create and append to the passed element of the widget a style element with the content received
+ * @param {HTMLElement} stylingContainer The reference element of the widget
+ * @param {string} clientStyling The style content
+ */
+function setClientStyling(stylingContainer, clientStyling) {
+  if (stylingContainer) {
+    const sheet = document.createElement('style');
+    sheet.innerHTML = clientStyling;
+    stylingContainer.appendChild(sheet);
+  }
+}
+
+/**
+ * @name setClientStylingURL
+ * @description Method used to create and append to the passed element of the widget a style element with the content fetched from a given URL
+ * @param {HTMLElement} stylingContainer The reference element of the widget
+ * @param {string} clientStylingUrl The URL of the style content
+ */
+function setClientStylingURL(stylingContainer, clientStylingUrl) {
+  const url = new URL(clientStylingUrl);
+
+  fetch(url.href)
+    .then((res) => res.text())
+    .then((data) => {
+      const cssFile = document.createElement('style');
+      cssFile.innerHTML = data;
+      if (stylingContainer) {
+        stylingContainer.appendChild(cssFile);
+      }
+    })
+    .catch((err) => {
+      console.error('There was an error while trying to load client styling from URL', err);
+    });
+}
+
+/**
+ * @name setStreamLibrary
+ * @description Method used to create and append to the passed element of the widget a style element with content fetched from the MessageBus
+ * @param {HTMLElement} stylingContainer The highest element of the widget
+ * @param {string} domain The domain from where the content should be fetched (e.g. 'Casino.Style', 'App.Style', 'casino-footer.style', etc.)
+ * @param {ref} subscription A reference to a variable where the subscription should be saved for unsubscribing when no longer needed
+ */
+function setStreamStyling(stylingContainer, domain, subscription) {
+  if (window.emMessageBus) {
+    const sheet = document.createElement('style');
+
+    window.emMessageBus.subscribe(domain, (data) => {
+      sheet.innerHTML = data;
+      if (stylingContainer) {
+        stylingContainer.appendChild(sheet);
+      }
+    });
+  }
+}
+
 /**
  * @name isMobile
  * @description A method that returns if the browser used to access the app is from a mobile device or not
@@ -135,7 +192,6 @@ const GeneralTutorialSlider = class {
          */
         this.itemsPerPage = 1;
         this.hasErrors = false;
-        this.limitStylingAppends = false;
         this.isLoading = true;
         this.activeIndex = 0;
         this.tutorialElementWidth = 0;
@@ -152,24 +208,6 @@ const GeneralTutorialSlider = class {
                 this.recalculateItemsPerPage();
             }, 10);
         };
-        this.setClientStyling = () => {
-            let sheet = document.createElement('style');
-            sheet.innerHTML = this.clientStyling;
-            this.stylingContainer.prepend(sheet);
-        };
-        this.setClientStylingURL = () => {
-            let url = new URL(this.clientStylingUrl);
-            let cssFile = document.createElement('style');
-            fetch(url.href)
-                .then((res) => res.text())
-                .then((data) => {
-                cssFile.innerHTML = data;
-                setTimeout(() => { this.stylingContainer.prepend(cssFile); }, 1);
-            })
-                .catch((err) => {
-                console.log('error ', err);
-            });
-        };
     }
     watchEndpoint(newValue, oldValue) {
         if (newValue && newValue != oldValue && this.cmsEndpoint) {
@@ -178,6 +216,17 @@ const GeneralTutorialSlider = class {
             });
         }
     }
+    handleClientStylingChange(newValue, oldValue) {
+        if (newValue != oldValue) {
+            setClientStyling(this.stylingContainer, this.clientStyling);
+        }
+    }
+    handleClientStylingChangeURL(newValue, oldValue) {
+        if (newValue != oldValue) {
+            if (this.clientStylingUrl)
+                setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
+        }
+    }
     connectedCallback() {
         window.screen.orientation.addEventListener('change', this.orientationChangeHandler);
     }
@@ -190,20 +239,22 @@ const GeneralTutorialSlider = class {
     }
     componentDidLoad() {
         window.addEventListener('resize', this.resizeHandler);
+        if (this.stylingContainer) {
+            if (window.emMessageBus != undefined) {
+                setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`);
+            }
+            else {
+                if (this.clientStyling)
+                    setClientStyling(this.stylingContainer, this.clientStyling);
+                if (this.clientStylingUrl)
+                    setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
+            }
+        }
     }
     componentDidRender() {
         this.el.addEventListener('touchstart', this.handleTouchStart.bind(this), { passive: true });
         this.el.addEventListener('touchmove', this.handleTouchMove.bind(this), { passive: true });
         this.recalculateItemsPerPage();
-        // start custom styling area
-        if (!this.limitStylingAppends && this.stylingContainer) {
-            if (this.clientStyling)
-                this.setClientStyling();
-            if (this.clientStylingUrl)
-                this.setClientStylingURL();
-            this.limitStylingAppends = true;
-        }
-        // end custom styling area
     }
     componentDidUpdate() {
         this.recalculateItemsPerPage();
@@ -213,6 +264,7 @@ const GeneralTutorialSlider = class {
         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 url = new URL(`${this.cmsEndpoint}/${this.language}/slider-onboarding`);
@@ -332,7 +384,9 @@ const GeneralTutorialSlider = class {
     get el() { return getElement(this); }
     static get watchers() { return {
         "cmsEndpoint": ["watchEndpoint"],
-        "language": ["watchEndpoint"]
+        "language": ["watchEndpoint"],
+        "clientStyling": ["handleClientStylingChange"],
+        "clientStylingUrl": ["handleClientStylingChangeURL"]
     }; }
 };
 GeneralTutorialSlider.style = GeneralTutorialSliderStyle0;

package/dist/esm/general-tutorial-slider.js

@@ -16,5 +16,5 @@ var patchBrowser = () => {
 
 patchBrowser().then(async (options) => {
   await globalScripts();
-  return bootstrapLazy([["general-tutorial-slider",[[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"]}]]]], options);
+  return bootstrapLazy([["general-tutorial-slider",[[1,"general-tutorial-slider",{"mbSource":[1,"mb-source"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"language":[513],"cmsEndpoint":[513,"cms-endpoint"],"userRoles":[513,"user-roles"],"cmsEnv":[513,"cms-env"],"showSliderDots":[516,"show-slider-dots"],"showSliderArrows":[516,"show-slider-arrows"],"showSliderArrowsMobile":[516,"show-slider-arrows-mobile"],"enableAutoScroll":[516,"enable-auto-scroll"],"intervalPeriod":[514,"interval-period"],"scrollItems":[520,"scroll-items"],"itemsPerPage":[514,"items-per-page"],"hasErrors":[32],"isLoading":[32],"activeIndex":[32],"tutorialElementWidth":[32]},null,{"cmsEndpoint":["watchEndpoint"],"language":["watchEndpoint"],"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingChangeURL"]}]]]], options);
 });

package/dist/esm/loader.js

@@ -5,7 +5,7 @@ import { g as globalScripts } from './app-globals-0f993ce5.js';
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;
   await globalScripts();
-  return bootstrapLazy([["general-tutorial-slider",[[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"]}]]]], options);
+  return bootstrapLazy([["general-tutorial-slider",[[1,"general-tutorial-slider",{"mbSource":[1,"mb-source"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"language":[513],"cmsEndpoint":[513,"cms-endpoint"],"userRoles":[513,"user-roles"],"cmsEnv":[513,"cms-env"],"showSliderDots":[516,"show-slider-dots"],"showSliderArrows":[516,"show-slider-arrows"],"showSliderArrowsMobile":[516,"show-slider-arrows-mobile"],"enableAutoScroll":[516,"enable-auto-scroll"],"intervalPeriod":[514,"interval-period"],"scrollItems":[520,"scroll-items"],"itemsPerPage":[514,"items-per-page"],"hasErrors":[32],"isLoading":[32],"activeIndex":[32],"tutorialElementWidth":[32]},null,{"cmsEndpoint":["watchEndpoint"],"language":["watchEndpoint"],"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingChangeURL"]}]]]], options);
 };
 
 export { defineCustomElements };

package/dist/general-tutorial-slider/general-tutorial-slider.esm.js

@@ -1 +1 @@
-import{p as e,b as r}from"./p-e2d02089.js";export{s as setNonce}from"./p-e2d02089.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-a5407119",[[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))));
+import{p as e,b as l}from"./p-e2d02089.js";export{s as setNonce}from"./p-e2d02089.js";import{g as t}from"./p-e1255160.js";(()=>{const l=import.meta.url,s={};return""!==l&&(s.resourcesUrl=new URL(".",l).href),e(s)})().then((async e=>(await t(),l([["p-d3024419",[[1,"general-tutorial-slider",{mbSource:[1,"mb-source"],clientStyling:[513,"client-styling"],clientStylingUrl:[513,"client-styling-url"],language:[513],cmsEndpoint:[513,"cms-endpoint"],userRoles:[513,"user-roles"],cmsEnv:[513,"cms-env"],showSliderDots:[516,"show-slider-dots"],showSliderArrows:[516,"show-slider-arrows"],showSliderArrowsMobile:[516,"show-slider-arrows-mobile"],enableAutoScroll:[516,"enable-auto-scroll"],intervalPeriod:[514,"interval-period"],scrollItems:[520,"scroll-items"],itemsPerPage:[514,"items-per-page"],hasErrors:[32],isLoading:[32],activeIndex:[32],tutorialElementWidth:[32]},null,{cmsEndpoint:["watchEndpoint"],language:["watchEndpoint"],clientStyling:["handleClientStylingChange"],clientStylingUrl:["handleClientStylingChangeURL"]}]]]],e))));

package/dist/general-tutorial-slider/p-d3024419.entry.js

@@ -0,0 +1 @@
+import{r as t,h as n,g as i}from"./p-e2d02089.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.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.isLoading=!0,this.activeIndex=0,this.tutorialElementWidth=0,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)}}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,g,w,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===(g=null===(m=null===(v=null===(p=null==t?void 0:t.media)||void 0===p?void 0:p.video[0])||void 0===v?void 0:v.sources)||void 0===m?void 0:m.find((t=>"mobile"===t.media)))||void 0===g?void 0:g.src,type:"video/mp4"}:{src:null===(y=null===(x=null===(f=null===(w=null==t?void 0:t.media)||void 0===w?void 0:w.video[0])||void 0===f?void 0:f.sources)||void 0===x?void 0:x.find((t=>"desktop"===t.media)))||void 0===y?void 0:y.src,type:"video/mp4"}))):null,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 img, .TutorialItem .ItemImage video {\n  height: auto;\n  width: 450px;\n}\n.TutorialItem .ItemDescription {\n  font-size: 14px;\n  padding: 25px 15px;\n  font-weight: 400;\n  color: #000;\n}\n\n.SliderNavButton {\n  border: 0px;\n  width: 25px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.SliderNavButton svg {\n  width: 20px;\n  stroke: var(--emw--color-secondary, #FD2839);\n}\n\n.DisabledArrow svg {\n  opacity: 0.2;\n  stroke: var(--emw--color-secondary, #FD2839);\n  pointer-events: none;\n}\n\n.DotsWrapper {\n  width: 100%;\n  margin: 0 auto;\n  margin-top: 20px;\n  height: 30px;\n}\n.DotsWrapper ul.Dots {\n  display: flex;\n  justify-content: center;\n  padding: 0;\n}\n.DotsWrapper ul.Dots li {\n  height: 10px;\n  width: 10px;\n  background: #ccc;\n  border-radius: 50%;\n  margin-left: 3px;\n  margin-right: 3px;\n  list-style: none;\n  cursor: pointer;\n}\n.DotsWrapper ul.Dots li:hover {\n  background: #bbb;\n}\n.DotsWrapper ul.Dots li.active {\n  border: solid 1px var(--emw--color-secondary, #FD2839);\n  background: var(--emw--color-secondary, #FD2839);\n}\n.DotsWrapper ul.Dots li.default {\n  border: solid 1px var(--emw--color-secondary, #FD2839);\n  background-color: #FFF;\n}\n\n@container (max-width: 475px) {\n  @media screen and (orientation: landscape) {\n    .TutorialItem {\n      width: 100%;\n    }\n  }\n  main {\n    height: 90cqh;\n  }\n  .TutorialItems {\n    height: inherit;\n  }\n  .TutorialItem {\n    min-width: 100%;\n    max-height: 800px;\n    overflow: auto;\n    display: flex;\n    flex-direction: column;\n    justify-content: flex-start;\n    align-items: center;\n    color: #000;\n    background-color: #f5f5f5;\n    border-radius: 5px;\n    user-select: none;\n  }\n  .TutorialItem .ItemTitle {\n    padding: 25px 15px;\n    font-size: 18px;\n    font-weight: 600;\n    color: var(--emw--color-secondary, #FD2839);\n  }\n  .TutorialItem .ItemImage {\n    min-height: 200px;\n  }\n  .TutorialItem .ItemImage img, .TutorialItem .ItemImage video {\n    height: auto;\n    width: 100%;\n  }\n  .TutorialItem .ItemDescription {\n    font-size: 14px;\n    padding: 25px 15px;\n    font-weight: 400;\n    color: #000;\n  }\n}";export{r as general_tutorial_slider}

package/dist/types/components/general-tutorial-slider/general-tutorial-slider.d.ts

@@ -1,4 +1,8 @@
 export declare class GeneralTutorialSlider {
+    /**
+     * Client custom styling via streamStyling
+     */
+    mbSource: string;
     /**
      * Client custom styling via inline style
      */
@@ -53,12 +57,12 @@ export declare class GeneralTutorialSlider {
     itemsPerPage: number;
     el: HTMLElement;
     hasErrors: boolean;
-    private limitStylingAppends;
     private isLoading;
     activeIndex: number;
     tutorialElementWidth: number;
     private userAgent;
     private stylingContainer;
+    private stylingSubscription;
     private tutorialData;
     isMobile: boolean;
     allElementsWidth: number;
@@ -67,6 +71,8 @@ export declare class GeneralTutorialSlider {
     xDown: any;
     yDown: any;
     watchEndpoint(newValue: string, oldValue: string): void;
+    handleClientStylingChange(newValue: any, oldValue: any): void;
+    handleClientStylingChangeURL(newValue: any, oldValue: any): void;
     connectedCallback(): void;
     componentWillLoad(): Promise<void>;
     componentDidLoad(): void;
@@ -83,8 +89,6 @@ export declare class GeneralTutorialSlider {
     handleTouchMove(evt: any): void;
     setActive(index: number): void;
     orientationChangeHandler: () => void;
-    setClientStyling: () => void;
-    setClientStylingURL: () => void;
     renderDots(): Array<HTMLElement>;
     render(): void;
 }

package/dist/types/components.d.ts

@@ -39,6 +39,10 @@ export namespace Components {
           * Language of the widget
          */
         "language": string;
+        /**
+          * Client custom styling via streamStyling
+         */
+        "mbSource": string;
         /**
           * Set the number of slides you wish to display.
          */
@@ -106,6 +110,10 @@ declare namespace LocalJSX {
           * Language of the widget
          */
         "language"?: string;
+        /**
+          * Client custom styling via streamStyling
+         */
+        "mbSource"?: string;
         /**
           * Set the number of slides you wish to display.
          */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@everymatrix/general-tutorial-slider",
-  "version": "1.54.12",
+  "version": "1.56.0",
   "main": "./dist/index.cjs.js",
   "module": "./dist/index.js",
   "es2015": "./dist/esm/index.mjs",

package/dist/general-tutorial-slider/p-a5407119.entry.js

@@ -1 +0,0 @@
-import{r as t,h as i,g as n}from"./p-e2d02089.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(--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}