@everymatrix/general-slider-navigation 1.44.0 → 1.45.0

package/dist/components/carousel-component.d.ts

@@ -1,11 +0,0 @@
-import type { Components, JSX } from "../types/components";
-
-interface CarouselComponent extends Components.CarouselComponent, HTMLElement {}
-export const CarouselComponent: {
-  prototype: CarouselComponent;
-  new (): CarouselComponent;
-};
-/**
- * Used to define this component and all nested components recursively.
- */
-export const defineCustomElement: () => void;

package/dist/components/carousel-component.js

@@ -1,6 +0,0 @@
-import { C as CarouselComponent$1, d as defineCustomElement$1 } from './carousel-component2.js';
-
-const CarouselComponent = CarouselComponent$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { CarouselComponent, defineCustomElement };

package/dist/components/carousel-component2.js

@@ -1,386 +0,0 @@
-import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
-
-/**
- * @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';
-    }
-  }
-};
-function checkDeviceType() {
-  const userAgent = navigator.userAgent.toLowerCase();
-  const width = screen.availWidth;
-  const height = screen.availHeight;
-  if (userAgent.includes('iphone')) {
-    return 'mobile';
-  }
-  if (userAgent.includes('android')) {
-    if (height > width && width < 800) {
-      return 'mobile';
-    }
-    if (width > height && height < 800) {
-      return 'tablet';
-    }
-  }
-  return 'desktop';
-}
-
-const DEFAULT_LANGUAGE = 'en';
-const TRANSLATIONS = {
-  en: {
-    error: 'Error',
-    noResults: 'Loading, please wait ...',
-    joinNow: 'Join now'
-  },
-  hu: {
-    error: 'Error',
-    noResults: 'Loading, please wait ...',
-    joinNow: 'Join now'
-  },
-  ro: {
-    error: 'Eroare',
-    noResults: 'Loading, please wait ...',
-    joinNow: 'Join now'
-  },
-  fr: {
-    error: 'Error',
-    noResults: 'Loading, please wait ...',
-    joinNow: 'Join now'
-  },
-  ar: {
-    error: 'خطأ',
-    noResults: 'Loading, please wait ...',
-    joinNow: 'Join now'
-  },
-  hr: {
-    error: 'Greška',
-    noResults: 'Učitavanje, molimo pričekajte ...',
-    joinNow: 'Join now'
-  },
-  'pt-br': {
-    'error': 'Erro',
-    'noResults': 'Carregando, espere por favor…',
-    'joinNow': 'Join now'
-  },
-  'es-mx': {
-    'error': 'Error',
-    'noResults': 'Cargando, espere por favor…',
-    'joinNow': 'Join now'
-  }
-};
-const getTranslations = (url) => {
-  return new Promise((resolve) => {
-    fetch(url)
-      .then((res) => res.json())
-      .then((data) => {
-      Object.keys(data).forEach((lang) => {
-        if (!TRANSLATIONS[lang]) {
-          TRANSLATIONS[lang] = {};
-        }
-        for (let key in data[lang]) {
-          TRANSLATIONS[lang][key] = data[lang][key];
-        }
-      });
-      resolve(true);
-    });
-  });
-};
-const translate = (key, customLang) => {
-  const lang = customLang;
-  return TRANSLATIONS[(lang !== undefined) && (lang in TRANSLATIONS) ? lang : DEFAULT_LANGUAGE][key];
-};
-
-const carouselComponentCss = ":host{display:block;font-family:\"Roboto\", sans-serif}html,body{padding:0;margin:0;width:100%;height:100%}.Carousel{position:relative;display:block;width:100%}.carousel__prev,.carousel__next{position:absolute;bottom:-15%;transition:transform 0.25s ease}.carousel__prev i,.carousel__next i{font-size:var(--emw--font-size-x-large, 60px);color:var(--emw-color-white, #FFFFFF);cursor:pointer}.carousel__prev:hover,.carousel__next:hover{transform:scale(1.25)}.carousel__prev{left:40%}.carousel__next{right:40%}.CarouselBody{width:100%;padding:80px 0px;overflow:hidden}.CarouselSlider{position:relative;transition:transform 1s ease-in-out;background:transparent;display:flex;align-items:center}.CarouselSliderItem{opacity:0.7;position:relative;display:block;float:left;box-sizing:border-box;height:400px}.Item3dFrame{position:relative;width:100%;height:100%;transition:transform 1s ease-in-out, box-shadow 0.5s ease-in-out;transform-style:preserve-3d;display:flex;flex-direction:column;justify-content:flex-end;border-radius:var(--emw--button-border-radius, 20px)}.CarouselSliderItemActive .Item3dFrame{animation:glow 4s linear infinite}@keyframes glow{0%{box-shadow:0 0 50px 5px var(--emw--color-primary, #22B04E)}50%{box-shadow:0 0 50px 5px var(--emfe-w-color-secondary, #F2711C)}100%{box-shadow:0 0 50px 5px var(--emw--color-primary, #22B04E)}}.TopSection{display:flex;justify-content:flex-start;align-items:center}.JoinButton{background-image:linear-gradient(to bottom, color-mix(in srgb, var(--emw--color-primary, #22B04E) 80%, black 20%), var(--emw--color-primary, #22B04E), color-mix(in srgb, var(--emw--color-primary, #22B04E) 80%, var(--emw-color-white, #FFFFFF) 30%));color:var(--emw--color-typography, #FFFFFF);height:42px;width:110px;border-radius:var(--emw--button-border-radius, 20px);cursor:pointer;font-size:var(--emw--size-small, 14px);border:2px solid var(--emw--button-border-color, #0E5924);display:flex;align-items:center;justify-content:center;gap:2px}.ItemSection{padding:12px 20px;display:flex;flex-direction:column;gap:2px}.Divider{border:none;border-top:2px solid var(--emw-color-white, #FFFFFF);width:100%;opacity:0.3}.BottomSection{display:flex;justify-content:flex-start;align-items:flex-start;width:50%;height:60px}.BottomSection h3{font-size:var(--emw--size-large, 24px);margin:0;color:var(--emw--color-typography, #FFFFFF)}.CarouselNavigation{display:flex;justify-content:center;align-items:center;position:absolute;bottom:20px;left:50%;transform:translateX(-50%)}.CarouselNavigationBullet{width:12px;height:12px;background-color:var(--emw-color-grey-100, rgba(255, 255, 255, 0.5));border-radius:50%;margin:0 5px;cursor:pointer;transition:background-color 0.3s}.CarouselNavigationBulletActive{background-color:var(--emw--color-primary, #22B04E)}.CarouselSliderItemActive{opacity:1;height:470px}";
-
-const CarouselComponent = /*@__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 = '';
-    /**
-    * Show bullet navigation under slides
-    */
-    this.bulletNavigation = true;
-    /**
-    * Language of the widget
-    */
-    this.language = 'en';
-    /**
-     * Translation via url
-     */
-    this.translationUrl = '';
-    this.currIndex = 0;
-    this.device = '';
-    this.stylingAppends = false;
-    this.userAgent = window.navigator.userAgent;
-    this.isMobile = isMobile(this.userAgent);
-    this.touchStartX = 0;
-    this.touchEndX = 0;
-    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);
-      });
-    };
-    this.setClientStyling = () => {
-      let sheet = document.createElement('style');
-      sheet.innerHTML = this.clientStyling;
-      this.stylingContainer.prepend(sheet);
-    };
-    this.moveSliderIndex = (index) => {
-      if (index < 1)
-        index = this.sliderData.length;
-      if (index > this.sliderData.length)
-        index = 1;
-      this.currIndex = index;
-      if (this.sliderElement) {
-        this.sliderElement.style.transform = this.getSliderTransformStyle();
-      }
-    };
-    this.handleTouchStart = (event) => {
-      this.touchStartX = event.changedTouches[0].screenX;
-    };
-    this.handleTouchEnd = (event) => {
-      this.touchEndX = event.changedTouches[0].screenX;
-      this.handleSwipe();
-    };
-    this.navigationTo = (url, target, isExternal) => {
-      window.postMessage({ type: 'NavigateTo', path: url, target: target || null, externalLink: isExternal || false }, window.location.href);
-    };
-    this.changeSlider = (index) => {
-      if (index > this.currIndex - 1) {
-        this.next();
-      }
-      else if (index < this.currIndex - 1) {
-        this.prev();
-      }
-    };
-    this.setImage = (image) => {
-      let source = '';
-      this.device = checkDeviceType();
-      switch (this.device) {
-        case 'mobile':
-          source = image.srcMobile;
-          break;
-        case 'tablet':
-          source = image.srcTablet;
-          break;
-        case 'desktop':
-          source = image.srcDesktop;
-          break;
-      }
-      return source;
-    };
-  }
-  handleNewTranslations() {
-    getTranslations(this.translationUrl);
-  }
-  async componentWillLoad() {
-    if (this.translationUrl.length > 2) {
-      await getTranslations(this.translationUrl);
-    }
-  }
-  componentDidLoad() {
-    this.init();
-    this.calcInnerWidth();
-  }
-  componentDidRender() {
-    if (!this.stylingAppends && this.stylingContainer) {
-      if (this.clientStyling)
-        this.setClientStyling();
-      if (this.clientStylingUrl)
-        this.setClientStylingURL();
-      this.stylingAppends = true;
-    }
-  }
-  init() {
-    this.moveSliderIndex(Math.ceil(this.sliderData.length / 2));
-    this.bindEvents();
-    if (this.slideTimer > 0) {
-      this.timer();
-    }
-  }
-  calcInnerWidth() {
-    const parent = this.el.parentElement;
-    // Check if the parent element exists and then get its width
-    if (parent) {
-      this.innerWidth = parent.offsetWidth;
-    }
-    else {
-      this.innerWidth = window.innerWidth;
-    }
-    this.resize();
-  }
-  resize() {
-    if (this.isMobile) {
-      this.width = Math.max(innerWidth * 0.3, this.sliderMobileWidth);
-    }
-    else {
-      this.width = Math.max(this.innerWidth * 0.1, this.sliderDesktopWidth);
-    }
-    this.totalWidth = this.width * this.sliderData.length;
-    //this is where the margin gap between slides is calculated with the animation
-    this.margin = -5;
-    const children = this.sliderElement.children;
-    for (let i = 0; i < children.length; i++) {
-      const item = children[i];
-      item.style.margin = `0 ${this.margin}px`;
-      item.style.width = `${this.width - (this.margin * 2)}px`;
-    }
-    if (this.sliderElement) {
-      this.sliderElement.style.transform = this.getSliderTransformStyle();
-    }
-  }
-  timer() {
-    this.clearTimer();
-    this.interval = setInterval(() => {
-      this.moveSliderIndex(++this.currIndex);
-    }, this.slideTimer * 1000);
-  }
-  disconnectedCallback() {
-    this.clearTimer();
-  }
-  clearTimer() {
-    if (this.interval) {
-      clearInterval(this.interval);
-    }
-  }
-  prev() {
-    this.moveSliderIndex(--this.currIndex);
-    if (this.slideTimer > 0) {
-      this.timer();
-    }
-  }
-  next() {
-    this.moveSliderIndex(++this.currIndex);
-    if (this.slideTimer > 0) {
-      this.timer();
-    }
-  }
-  bindEvents() {
-    window.onresize = () => this.resize();
-    this.el.addEventListener('touchstart', this.handleTouchStart, false);
-    this.el.addEventListener('touchend', this.handleTouchEnd, false);
-  }
-  handleSwipe() {
-    if (this.touchEndX < this.touchStartX) {
-      this.next();
-    }
-    if (this.touchEndX > this.touchStartX) {
-      this.prev();
-    }
-  }
-  getTransformStyle(index) {
-    const perspective = index === this.currIndex - 1 ? '1200px' : '900px';
-    const rotateY = index < this.currIndex - 1 ? '20deg' : '-20deg';
-    return index === this.currIndex - 1 ? `perspective(${perspective})` : `perspective(${perspective}) rotateY(${rotateY})`;
-  }
-  getSliderTransformStyle() {
-    return `translate3d(${((this.currIndex * -this.width) + (this.width / 2) + this.innerWidth / 2)}px, 0, 0)`;
-  }
-  renderNavigation() {
-    return (h("div", { class: "CarouselNavigation" }, this.sliderData.map((_item, index) => (h("div", { class: {
-        'CarouselNavigationBullet': true,
-        'CarouselNavigationBulletActive': index === this.currIndex - 1,
-      }, onClick: this.moveSliderIndex.bind(this, index + 1) })))));
-  }
-  render() {
-    return (h("div", { ref: el => this.stylingContainer = el }, h("div", { class: "Carousel" }, h("div", { class: "CarouselBody" }, h("div", { class: "CarouselSlider", ref: el => this.sliderElement = el, style: { width: `${this.totalWidth}px`, transform: this.getSliderTransformStyle() } }, this.sliderData.map((item, index) => {
-      const isActive = index === this.currIndex - 1;
-      const buttonStyle = !isActive ? { cursor: 'unset' } : {};
-      return (h("div", { class: {
-          'CarouselSliderItem': true,
-          'CarouselSliderItemActive': isActive,
-        }, onClick: this.changeSlider.bind(this, index) }, h("div", { class: "Item3dFrame", style: { backgroundSize: 'cover', backgroundPosition: 'center', backgroundImage: `url(${this.setImage(item.image)})`, transform: this.getTransformStyle(index) } }, h("div", { class: "ItemSection" }, h("div", { class: "TopSection" }, h("button", { onClick: () => {
-          if (isActive) {
-            this.navigationTo(item.url, item.targetType, item.externalLink);
-          }
-        }, style: buttonStyle, class: "JoinButton" }, h("span", null, translate('joinNow', this.language)), h("svg", { width: "12", height: "12", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M5 3L10 8L5 13", stroke: "white", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" })))), h("hr", { class: "Divider" }), h("div", { class: "BottomSection" }, h("h3", null, item.title.toUpperCase()))))));
-    }))), this.bulletNavigation ? this.renderNavigation() : null)));
-  }
-  get el() { return this; }
-  static get watchers() { return {
-    "translationUrl": ["handleNewTranslations"]
-  }; }
-  static get style() { return carouselComponentCss; }
-}, [1, "carousel-component", {
-    "clientStyling": [513, "client-styling"],
-    "clientStylingUrl": [513, "client-styling-url"],
-    "sliderData": [16],
-    "bulletNavigation": [516, "bullet-navigation"],
-    "language": [513],
-    "slideTimer": [514, "slide-timer"],
-    "translationUrl": [513, "translation-url"],
-    "sliderMobileWidth": [514, "slider-mobile-width"],
-    "sliderDesktopWidth": [514, "slider-desktop-width"],
-    "currIndex": [32],
-    "width": [32],
-    "margin": [32],
-    "sliderElement": [32],
-    "totalWidth": [32],
-    "device": [32],
-    "stylingAppends": [32],
-    "innerWidth": [32]
-  }]);
-function defineCustomElement() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["carousel-component"];
-  components.forEach(tagName => { switch (tagName) {
-    case "carousel-component":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, CarouselComponent);
-      }
-      break;
-  } });
-}
-
-export { CarouselComponent as C, getDevicePlatform as a, defineCustomElement as d, getTranslations as g, translate as t };

package/dist/components/general-slider-navigation.d.ts

@@ -1,11 +0,0 @@
-import type { Components, JSX } from "../types/components";
-
-interface GeneralSliderNavigation extends Components.GeneralSliderNavigation, HTMLElement {}
-export const GeneralSliderNavigation: {
-  prototype: GeneralSliderNavigation;
-  new (): GeneralSliderNavigation;
-};
-/**
- * Used to define this component and all nested components recursively.
- */
-export const defineCustomElement: () => void;

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

@@ -1,144 +0,0 @@
-import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
-import { g as getTranslations, a as getDevicePlatform, t as translate, d as defineCustomElement$2 } from './carousel-component2.js';
-
-const generalSliderNavigationCss = "";
-
-const GeneralSliderNavigation$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 = '';
-    /**
-     * CMS Endpoint stage
-     */
-    this.cmsEnv = 'stage';
-    /**
-     * Language of the widget
-     */
-    this.language = 'en';
-    /**
-     * User roles
-     */
-    this.userRoles = 'everyone';
-    /**
-     * Show bullet navigation under slides
-     */
-    this.bulletNavigation = true;
-    /**
-     * Mobile width for sliders
-     */
-    this.sliderMobileWidth = 200;
-    /**
-    * Desktop width for sliders
-    */
-    this.sliderDesktopWidth = 300;
-    /**
-     * Translation via url
-     */
-    this.translationUrl = '';
-    this.isLoading = true;
-    this.hasErrors = false;
-    this.device = '';
-  }
-  handleNewTranslations() {
-    getTranslations(this.translationUrl);
-  }
-  watchEndpoint(newValue, oldValue) {
-    if (newValue && newValue != oldValue && this.cmsEndpoint) {
-      this.getGeneralSliderNavigation().then((GeneralSliderNavigation) => {
-        this.sliderData = GeneralSliderNavigation;
-      });
-    }
-  }
-  async componentWillLoad() {
-    if (this.translationUrl.length > 2) {
-      await getTranslations(this.translationUrl);
-    }
-    if (this.cmsEndpoint && this.language) {
-      return this.getGeneralSliderNavigation().then((GeneralSliderNavigation) => {
-        this.sliderData = GeneralSliderNavigation;
-      });
-    }
-  }
-  getGeneralSliderNavigation() {
-    let url = new URL(`${this.cmsEndpoint}/${this.language}/homepage`);
-    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((menuSliderData) => {
-        resolve(menuSliderData.banners);
-      })
-        .catch((err) => {
-        console.error(err);
-        this.hasErrors = true;
-        reject(err);
-      }).finally(() => {
-        this.isLoading = false;
-      });
-    });
-  }
-  render() {
-    if (this.hasErrors) {
-      return (h("div", { class: "PageError" }, h("div", { class: "TitleError" }, translate('error', this.language))));
-    }
-    if (!this.isLoading) {
-      return (h("div", null, h("carousel-component", { sliderData: this.sliderData, language: this.language, clientStyling: this.clientStyling, clientStylingUrl: this.clientStylingUrl, bulletNavigation: this.bulletNavigation, slideTimer: this.slideTimer, translationUrl: this.translationUrl, sliderMobileWidth: this.sliderMobileWidth, sliderDesktopWidth: this.sliderDesktopWidth })));
-    }
-  }
-  static get watchers() { return {
-    "translationUrl": ["handleNewTranslations"],
-    "cmsEndpoint": ["watchEndpoint"],
-    "language": ["watchEndpoint"]
-  }; }
-  static get style() { return generalSliderNavigationCss; }
-}, [1, "general-slider-navigation", {
-    "clientStyling": [513, "client-styling"],
-    "clientStylingUrl": [513, "client-styling-url"],
-    "cmsEndpoint": [513, "cms-endpoint"],
-    "cmsEnv": [513, "cms-env"],
-    "language": [513],
-    "userRoles": [513, "user-roles"],
-    "bulletNavigation": [516, "bullet-navigation"],
-    "slideTimer": [514, "slide-timer"],
-    "sliderMobileWidth": [514, "slider-mobile-width"],
-    "sliderDesktopWidth": [514, "slider-desktop-width"],
-    "translationUrl": [513, "translation-url"],
-    "isLoading": [32],
-    "hasErrors": [32],
-    "device": [32]
-  }]);
-function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["general-slider-navigation", "carousel-component"];
-  components.forEach(tagName => { switch (tagName) {
-    case "general-slider-navigation":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, GeneralSliderNavigation$1);
-      }
-      break;
-    case "carousel-component":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$2();
-      }
-      break;
-  } });
-}
-
-const GeneralSliderNavigation = GeneralSliderNavigation$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { GeneralSliderNavigation, defineCustomElement };

package/dist/components/index.d.ts

@@ -1,26 +0,0 @@
-/* GeneralSliderNavigation 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

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