@everymatrix/general-slider-navigation 1.0.69

package/dist/esm/carousel-component_2.entry.js

@@ -0,0 +1,426 @@
+import { r as registerInstance, h, g as getElement } from './index-c749968b.js';
+
+/**
+ * @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 SUPPORTED_LANGUAGES = ['ro', 'en', 'fr', 'ar', 'hu', 'hr'];
+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((item) => {
+                for (let key in data[item]) {
+                    TRANSLATIONS[item][key] = data[item][key];
+                }
+            });
+            resolve(true);
+        });
+    });
+};
+const translate = (key, customLang) => {
+    const lang = customLang;
+    return TRANSLATIONS[lang !== undefined && SUPPORTED_LANGUAGES.includes(lang) ? 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}.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}";
+const CarouselComponentStyle0 = carouselComponentCss;
+
+const CarouselComponent = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        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;
+        };
+        this.clientStyling = '';
+        this.clientStylingUrl = '';
+        this.sliderData = undefined;
+        this.bulletNavigation = true;
+        this.language = 'en';
+        this.slideTimer = undefined;
+        this.translationUrl = '';
+        this.currIndex = 0;
+        this.width = undefined;
+        this.height = undefined;
+        this.margin = undefined;
+        this.sliderElement = undefined;
+        this.totalWidth = undefined;
+        this.device = '';
+        this.stylingAppends = false;
+        this.innerWidth = undefined;
+    }
+    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.floor(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, 200);
+            this.height = window.innerHeight * 0.40;
+        }
+        else {
+            this.width = this.innerWidth > 1200 ? Math.max(this.innerWidth * 0.1, 300) : Math.max(this.innerWidth * 0.2, 200);
+            this.height = window.innerHeight * 0.55;
+        }
+        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", { key: '09a6305f1745c24ac709c50cdb18218c5dd616d1', ref: el => this.stylingContainer = el }, h("div", { key: '1b61677ab956428b710c16b7bf71d5919e9aadf5', class: "Carousel" }, h("div", { key: '8f0c4f36f45695ee7c15c2435a39ded15abd39bf', class: "CarouselBody" }, h("div", { key: '341403c4164c1c24f39f050f37cc42b1cefee512', 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' } : {};
+            const activeItemHeight = !isActive ? { height: `${this.height - 70}px` } : { height: `${this.height}px` };
+            return (h("div", { class: {
+                    'CarouselSliderItem': true,
+                    'CarouselSliderItemActive': isActive,
+                }, onClick: this.changeSlider.bind(this, index), style: activeItemHeight }, 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 getElement(this); }
+    static get watchers() { return {
+        "translationUrl": ["handleNewTranslations"]
+    }; }
+};
+CarouselComponent.style = CarouselComponentStyle0;
+
+const generalSliderNavigationCss = "";
+const GeneralSliderNavigationStyle0 = generalSliderNavigationCss;
+
+const GeneralSliderNavigation = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.clientStyling = '';
+        this.clientStylingUrl = '';
+        this.cmsEndpoint = undefined;
+        this.cmsEnv = 'stage';
+        this.language = 'en';
+        this.userRoles = 'everyone';
+        this.bulletNavigation = true;
+        this.slideTimer = undefined;
+        this.sliderMobileWidth = 200;
+        this.sliderDesktopWidth = 300;
+        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", { "slider-data": this.sliderData, language: this.language, "client-styling": this.clientStyling, "client-styling-url": this.clientStylingUrl, "bullet-navigation": this.bulletNavigation, "slide-timer": this.slideTimer, "translation-url": this.translationUrl, "slider-mobile-width": this.sliderMobileWidth, "slider-desktop-width": this.sliderDesktopWidth })));
+        }
+    }
+    static get watchers() { return {
+        "translationUrl": ["handleNewTranslations"],
+        "cmsEndpoint": ["watchEndpoint"],
+        "language": ["watchEndpoint"]
+    }; }
+};
+GeneralSliderNavigation.style = GeneralSliderNavigationStyle0;
+
+export { CarouselComponent as carousel_component, GeneralSliderNavigation as general_slider_navigation };

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

@@ -0,0 +1,20 @@
+import { p as promiseResolve, b as bootstrapLazy } from './index-c749968b.js';
+export { s as setNonce } from './index-c749968b.js';
+import { g as globalScripts } from './app-globals-0f993ce5.js';
+
+/*
+ Stencil Client Patch Browser v4.20.0 | MIT Licensed | https://stenciljs.com
+ */
+var patchBrowser = () => {
+  const importMeta = import.meta.url;
+  const opts = {};
+  if (importMeta !== "") {
+    opts.resourcesUrl = new URL(".", importMeta).href;
+  }
+  return promiseResolve(opts);
+};
+
+patchBrowser().then(async (options) => {
+  await globalScripts();
+  return bootstrapLazy([["carousel-component_2",[[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]},null,{"translationUrl":["handleNewTranslations"],"cmsEndpoint":["watchEndpoint"],"language":["watchEndpoint"]}],[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"],"currIndex":[32],"width":[32],"height":[32],"margin":[32],"sliderElement":[32],"totalWidth":[32],"device":[32],"stylingAppends":[32],"innerWidth":[32]},null,{"translationUrl":["handleNewTranslations"]}]]]], options);
+});