@everymatrix/general-tutorial-slider 1.16.1

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

@@ -0,0 +1,365 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+
+const DEFAULT_LANGUAGE = 'en';
+const SUPPORTED_LANGUAGES = ['ro', 'en', 'fr', 'ar', 'hu'];
+const TRANSLATIONS = {
+  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 ...',
+  }
+};
+const translate = (key, customLang) => {
+  const lang = customLang;
+  return TRANSLATIONS[lang !== undefined && SUPPORTED_LANGUAGES.includes(lang) ? lang : DEFAULT_LANGUAGE][key];
+};
+
+/**
+ * @name isMobile
+ * @description A method that returns if the browser used to access the app is from a mobile device or not
+ * @param {String} userAgent window.navigator.userAgent
+ * @returns {Boolean} true or false
+ */
+const isMobile = (userAgent) => {
+  return !!(userAgent.toLowerCase().match(/android/i) ||
+    userAgent.toLowerCase().match(/blackberry|bb/i) ||
+    userAgent.toLowerCase().match(/iphone|ipad|ipod/i) ||
+    userAgent.toLowerCase().match(/windows phone|windows mobile|iemobile|wpdesktop/i));
+};
+const getDevice = () => {
+  let userAgent = window.navigator.userAgent;
+  if (userAgent.toLowerCase().match(/android/i)) {
+    return 'Android';
+  }
+  if (userAgent.toLowerCase().match(/iphone/i)) {
+    return 'iPhone';
+  }
+  if (userAgent.toLowerCase().match(/ipad|ipod/i)) {
+    return 'iPad';
+  }
+  return 'PC';
+};
+const getDevicePlatform = () => {
+  const device = getDevice();
+  if (device) {
+    if (device === 'PC') {
+      return 'dk';
+    }
+    else if (device === 'iPad' || device === 'iPhone') {
+      return 'ios';
+    }
+    else {
+      return 'mtWeb';
+    }
+  }
+};
+
+const generalTutorialSliderCss = ":host {\n  display: block;\n}\n\n.GeneralTutorialSliderError {\n  display: flex;\n  justify-content: center;\n  flex-direction: column;\n}\n.GeneralTutorialSliderError.TitleError {\n  color: red;\n}\n\nmain {\n  width: 100%;\n  overflow: hidden;\n}\n\n.TutorialWrapper {\n  width: 100%;\n  display: flex;\n  flex: 0 0 auto;\n  justify-content: center;\n  flex-direction: column;\n  overflow: auto;\n}\n\n.TutorialContent {\n  display: flex;\n  justify-content: center;\n  flex-direction: row;\n}\n\n.TutorialItems {\n  display: flex;\n  transition: transform 0.4s ease-in-out;\n  transform: translateX(0px);\n}\n\n.TutorialItem {\n  flex: 0 0 auto;\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-start;\n  align-items: center;\n  color: #000;\n  background-color: #f5f5f5;\n  border-radius: 5px;\n  user-select: none;\n}\n.TutorialItem .ItemTitle {\n  padding: 25px 15px;\n  font-size: 18px;\n  font-weight: 600;\n  color: var(--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}";
+
+const GeneralTutorialSlider$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    /**
+     * Client custom styling via inline style
+     */
+    this.clientStyling = '';
+    /**
+     * Client custom styling via url
+     */
+    this.clientStylingUrl = '';
+    /**
+     * Language of the widget
+     */
+    this.language = 'en';
+    /**
+     * User roles
+     */
+    this.userRoles = 'everyone';
+    /**
+     * CMS Endpoint stage
+     */
+    this.cmsEnv = 'stage';
+    /**
+     * Show slider dots
+     */
+    this.showSliderDots = true;
+    /**
+     * Show slider navigate arrows
+     */
+    this.showSliderArrows = true;
+    /**
+     * Show slider navigate arrows on mobile
+     */
+    this.showSliderArrowsMobile = false;
+    /**
+     * Auto-scroll will only function if it is set to true, and otherwise it will be ignored.
+     */
+    this.enableAutoScroll = false;
+    /**
+     * Set interval period for slider
+     */
+    this.intervalPeriod = 5000;
+    /**
+     * Set the number of slides you wish to display.
+     */
+    this.scrollItems = 1;
+    /**
+     * Set the number of slides you wish to display.
+     */
+    this.itemsPerPage = 1;
+    this.hasErrors = false;
+    this.limitStylingAppends = false;
+    this.isLoading = true;
+    this.activeIndex = 0;
+    this.tutorialElementWidth = 0;
+    this.userAgent = window.navigator.userAgent;
+    this.isMobile = isMobile(this.userAgent);
+    this.allElementsWidth = 0;
+    this.xDown = null;
+    this.yDown = null;
+    this.resizeHandler = () => {
+      this.recalculateItemsPerPage();
+    };
+    this.orientationChangeHandler = () => {
+      setTimeout(() => {
+        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) {
+      this.getGeneralTutorialSlider().then((tutorialContent) => {
+        this.tutorialData = tutorialContent;
+      });
+    }
+  }
+  connectedCallback() {
+    window.screen.orientation.addEventListener('change', this.orientationChangeHandler);
+  }
+  componentWillLoad() {
+    if (this.cmsEndpoint && this.language) {
+      return this.getGeneralTutorialSlider().then((tutorialContent) => {
+        this.tutorialData = tutorialContent;
+      });
+    }
+  }
+  componentDidLoad() {
+    window.addEventListener('resize', this.resizeHandler);
+  }
+  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();
+  }
+  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 url = new URL(`${this.cmsEndpoint}/${this.language}/slider-onboarding`);
+    url.searchParams.append('env', this.cmsEnv);
+    url.searchParams.append('userRoles', this.userRoles);
+    url.searchParams.append('device', getDevicePlatform());
+    return new Promise((resolve, reject) => {
+      this.isLoading = true;
+      fetch(url.href)
+        .then((res) => res.json())
+        .then((tutorialContent) => {
+        resolve(tutorialContent);
+      }).catch((err) => {
+        console.error(err);
+        this.hasErrors = true;
+        reject(err);
+      }).finally(() => {
+        this.isLoading = false;
+      });
+    });
+  }
+  move(direction) {
+    this.setActive(this.activeIndex + direction);
+  }
+  ;
+  //calculate itemsperpage by tutorials length to avoid empty in the tutorials end
+  recalculateItemsPerPage() {
+    if (!this.tutorialsElement)
+      return;
+    this.tutorialElementWidth = this.tutorialsElement.clientWidth;
+    this.allElementsWidth = (this.tutorialData.length - 1) * this.tutorialElementWidth;
+  }
+  ;
+  goTo(index) {
+    let diff = this.activeIndex - index;
+    if (diff > 0) {
+      for (let i = 0; i < diff; i++) {
+        this.move(-1);
+      }
+    }
+    else {
+      for (let i = 0; i > diff; i--) {
+        this.move(1);
+      }
+    }
+  }
+  handleTouchStart(evt) {
+    const firstTouch = this.getTouches(evt)[0];
+    this.xDown = firstTouch.clientX;
+    this.yDown = firstTouch.clientY;
+  }
+  getTouches(evt) {
+    return evt.touches || evt.originalEvent.touches;
+  }
+  handleTouchMove(evt) {
+    if (!this.xDown || !this.yDown)
+      return;
+    let xUp = evt.touches[0].clientX;
+    let yUp = evt.touches[0].clientY;
+    let xDiff = this.xDown - xUp;
+    let yDiff = this.yDown - yUp;
+    if (Math.abs(xDiff) > Math.abs(yDiff)) {
+      if (xDiff > 0) {
+        this.move(1);
+      }
+      else {
+        this.move(-1);
+      }
+    }
+    this.xDown = null;
+    this.yDown = null;
+  }
+  ;
+  setActive(index) {
+    const maxLength = this.tutorialData.length;
+    if (index >= 0) {
+      if (index >= maxLength - 1) {
+        this.activeIndex = maxLength - 1;
+      }
+      else {
+        this.activeIndex = index;
+      }
+    }
+    else {
+      this.activeIndex = 0;
+    }
+  }
+  renderDots() {
+    const dots = [];
+    for (let index = 0; index < this.tutorialData.length / this.itemsPerPage; index++) {
+      dots.push(h("li", { class: index == this.activeIndex ? 'active' : 'default', onClick: () => { this.goTo(index); this.setActive(index); } }));
+    }
+    return dots;
+  }
+  render() {
+    const styles = {
+      transform: `translate(${(this.allElementsWidth / (this.tutorialData.length - 1) * this.activeIndex) * -1}px, 0px)`
+    };
+    const itemStyle = {
+      width: `${this.tutorialElementWidth / this.itemsPerPage}px`
+    };
+    if (this.hasErrors) {
+      return (h("div", { class: "GeneralTutorialSliderError" }, h("div", { class: "TitleError" }, translate('error', this.language))));
+    }
+    if (!this.isLoading) {
+      return (h("div", { ref: el => this.stylingContainer = el }, h("div", { class: "TutorialWrapper" }, h("div", { class: "TutorialContent", ref: (el) => this.slider = el }, ((this.showSliderArrows && !this.isMobile) ||
+        (this.showSliderArrowsMobile && this.isMobile)) &&
+        h("div", { class: this.activeIndex === 0 ? 'SliderNavButton DisabledArrow' : 'SliderNavButton', onClick: () => this.move(-1) }, h("svg", { fill: "none", stroke: "var(--emfe-w-color-secondary, #FD2839)", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, h("path", { "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", d: "M15 19l-7-7 7-7" }))), h("main", null, h("div", { style: styles, ref: (el) => this.tutorialsElement = el, class: "TutorialItems" }, this.tutorialData.map((data) => {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
+        return h("div", { class: "TutorialItem", style: itemStyle }, h("div", { class: "ItemTitle", innerHTML: data === null || data === void 0 ? void 0 : data.title }), ((_a = data === null || data === void 0 ? void 0 : data.media) === null || _a === void 0 ? void 0 : _a.images) ? (h("div", { class: "ItemImage" }, this.isMobile ? (h("img", { src: (_e = (_d = (_c = (_b = data === null || data === void 0 ? void 0 : data.media) === null || _b === void 0 ? void 0 : _b.images[0]) === null || _c === void 0 ? void 0 : _c.sources) === null || _d === void 0 ? void 0 : _d.find((source) => source.media === 'mobile')) === null || _e === void 0 ? void 0 : _e.src, alt: data === null || data === void 0 ? void 0 : data.slug })) : (h("img", { src: (_j = (_h = (_g = (_f = data === null || data === void 0 ? void 0 : data.media) === null || _f === void 0 ? void 0 : _f.images[0]) === null || _g === void 0 ? void 0 : _g.sources) === null || _h === void 0 ? void 0 : _h.find((source) => source.media === 'desktop')) === null || _j === void 0 ? void 0 : _j.src, alt: data === null || data === void 0 ? void 0 : data.slug })))) : ((_k = data === null || data === void 0 ? void 0 : data.media) === null || _k === void 0 ? void 0 : _k.video) ? (h("div", { class: "ItemImage" }, this.isMobile ? (h("video", { controls: true, loop: true, autoplay: true }, h("source", { src: (_p = (_o = (_m = (_l = data === null || data === void 0 ? void 0 : data.media) === null || _l === void 0 ? void 0 : _l.video[0]) === null || _m === void 0 ? void 0 : _m.sources) === null || _o === void 0 ? void 0 : _o.find((source) => source.media === 'mobile')) === null || _p === void 0 ? void 0 : _p.src, type: "video/mp4" }))) : (h("video", { controls: true, loop: true, autoplay: true }, h("source", { src: (_t = (_s = (_r = (_q = data === null || data === void 0 ? void 0 : data.media) === null || _q === void 0 ? void 0 : _q.video[0]) === null || _r === void 0 ? void 0 : _r.sources) === null || _s === void 0 ? void 0 : _s.find((source) => source.media === 'desktop')) === null || _t === void 0 ? void 0 : _t.src, type: "video/mp4" }))))) : null, h("div", { class: "ItemDescription", innerHTML: data === null || data === void 0 ? void 0 : data.content }));
+      }))), ((this.showSliderArrows && !this.isMobile) ||
+        (this.showSliderArrowsMobile && this.isMobile)) &&
+        h("div", { class: this.activeIndex === this.tutorialData.length - 1 ? ' SliderNavButton DisabledArrow disabled' : 'SliderNavButton', onClick: () => this.move(1) }, h("svg", { fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, h("path", { "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", d: "M9 5l7 7-7 7" }))), h("div", null)), this.showSliderDots &&
+        h("div", { class: "DotsWrapper" }, h("ul", { class: "Dots" }, this.renderDots())))));
+    }
+  }
+  get el() { return this; }
+  static get watchers() { return {
+    "cmsEndpoint": ["watchEndpoint"],
+    "language": ["watchEndpoint"]
+  }; }
+  static get style() { return generalTutorialSliderCss; }
+}, [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]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["general-tutorial-slider"];
+  components.forEach(tagName => { switch (tagName) {
+    case "general-tutorial-slider":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, GeneralTutorialSlider$1);
+      }
+      break;
+  } });
+}
+
+const GeneralTutorialSlider = GeneralTutorialSlider$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { GeneralTutorialSlider, defineCustomElement };

package/dist/components/index.d.ts

@@ -0,0 +1,26 @@
+/* GeneralTutorialSlider custom elements */
+
+import type { Components, JSX } from "../types/components";
+
+/**
+ * Used to manually set the base path where assets can be found.
+ * If the script is used as "module", it's recommended to use "import.meta.url",
+ * such as "setAssetPath(import.meta.url)". Other options include
+ * "setAssetPath(document.currentScript.src)", or using a bundler's replace plugin to
+ * dynamically set the path at build time, such as "setAssetPath(process.env.ASSET_PATH)".
+ * But do note that this configuration depends on how your script is bundled, or lack of
+ * bundling, and where your assets can be loaded from. Additionally custom bundling
+ * will have to ensure the static assets are copied to its build directory.
+ */
+export declare const setAssetPath: (path: string) => void;
+
+export interface SetPlatformOptions {
+  raf?: (c: FrameRequestCallback) => number;
+  ael?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
+  rel?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
+}
+export declare const setPlatformOptions: (opts: SetPlatformOptions) => void;
+
+export type { Components, JSX };
+
+export * from '../types';

package/dist/components/index.js

@@ -0,0 +1 @@
+export { setAssetPath, setPlatformOptions } from '@stencil/core/internal/client';