@everymatrix/general-slider-navigation 1.0.69

package/dist/cjs/index.cjs.js

@@ -0,0 +1,2 @@
+'use strict';
+

package/dist/cjs/loader.cjs.js

@@ -0,0 +1,15 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-88d9137e.js');
+const appGlobals = require('./app-globals-3a1e7e63.js');
+
+const defineCustomElements = async (win, options) => {
+  if (typeof window === 'undefined') return undefined;
+  await appGlobals.globalScripts();
+  return index.bootstrapLazy([["carousel-component_2.cjs",[[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);
+};
+
+exports.setNonce = index.setNonce;
+exports.defineCustomElements = defineCustomElements;

package/dist/collection/collection-manifest.json

@@ -0,0 +1,13 @@
+{
+  "entries": [
+    "components/general-slider-navigation/general-slider-navigation.js",
+    "components/carousel-component/carousel-component.js"
+  ],
+  "compiler": {
+    "name": "@stencil/core",
+    "version": "4.20.0",
+    "typescriptVersion": "5.5.3"
+  },
+  "collections": [],
+  "bundles": []
+}

package/dist/collection/components/carousel-component/carousel-component.css

@@ -0,0 +1,167 @@
+: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;
+}

package/dist/collection/components/carousel-component/carousel-component.js

@@ -0,0 +1,381 @@
+import { h } from "@stencil/core";
+import { checkDeviceType, isMobile } from "../../utils/utils";
+import { getTranslations, translate } from "../../utils/locale.utils";
+export class CarouselComponent {
+    constructor() {
+        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)));
+    }
+    static get is() { return "carousel-component"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["carousel-component.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["carousel-component.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "clientStyling": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Client custom styling via inline style"
+                },
+                "attribute": "client-styling",
+                "reflect": true,
+                "defaultValue": "''"
+            },
+            "clientStylingUrl": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Client custom styling via url"
+                },
+                "attribute": "client-styling-url",
+                "reflect": true,
+                "defaultValue": "''"
+            },
+            "sliderData": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "Array<any>",
+                    "resolved": "any[]",
+                    "references": {
+                        "Array": {
+                            "location": "global",
+                            "id": "global::Array"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Endpoint URL for the source of data"
+                }
+            },
+            "bulletNavigation": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show bullet navigation under slides"
+                },
+                "attribute": "bullet-navigation",
+                "reflect": true,
+                "defaultValue": "true"
+            },
+            "language": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Language of the widget"
+                },
+                "attribute": "language",
+                "reflect": true,
+                "defaultValue": "'en'"
+            },
+            "slideTimer": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Timer for auto sliding"
+                },
+                "attribute": "slide-timer",
+                "reflect": true
+            },
+            "translationUrl": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Translation via url"
+                },
+                "attribute": "translation-url",
+                "reflect": true,
+                "defaultValue": "''"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "currIndex": {},
+            "width": {},
+            "height": {},
+            "margin": {},
+            "sliderElement": {},
+            "totalWidth": {},
+            "device": {},
+            "stylingAppends": {},
+            "innerWidth": {}
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "translationUrl",
+                "methodName": "handleNewTranslations"
+            }];
+    }
+}