@everymatrix/general-slider-navigation 1.74.1 → 1.74.3

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-7d6bdd9d.js');
+const index = require('./index-4cb07659.js');
 
 /**
  * @name isMobile
@@ -126,6 +126,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);
+      }
+    });
+  }
+}
+
 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(--emw--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;
 
@@ -136,24 +193,6 @@ const CarouselComponent = class {
         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.content.length;
@@ -198,6 +237,7 @@ const CarouselComponent = class {
             }
             return source;
         };
+        this.mbSource = undefined;
         this.clientStyling = '';
         this.clientStylingUrl = '';
         this.content = undefined;
@@ -212,9 +252,19 @@ const CarouselComponent = class {
         this.sliderElement = undefined;
         this.totalWidth = undefined;
         this.device = '';
-        this.stylingAppends = false;
         this.innerWidth = undefined;
     }
+    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);
+        }
+    }
     handleNewTranslations() {
         getTranslations(this.translationUrl);
     }
@@ -226,14 +276,16 @@ const CarouselComponent = class {
     componentDidLoad() {
         this.init();
         this.calcInnerWidth();
-    }
-    componentDidRender() {
-        if (!this.stylingAppends && this.stylingContainer) {
-            if (this.clientStyling)
-                this.setClientStyling();
-            if (this.clientStylingUrl)
-                this.setClientStylingURL();
-            this.stylingAppends = true;
+        if (this.stylingContainer) {
+            if (this.mbSource) {
+                setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`);
+            }
+            else {
+                if (this.clientStyling)
+                    setClientStyling(this.stylingContainer, this.clientStyling);
+                if (this.clientStylingUrl)
+                    setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
+            }
         }
     }
     init() {
@@ -257,7 +309,7 @@ const CarouselComponent = class {
     resize() {
         if (this.isMobile) {
             this.width = Math.max(innerWidth * 0.3, 200);
-            this.height = window.innerHeight * 0.40;
+            this.height = window.innerHeight * 0.4;
         }
         else {
             this.width = this.innerWidth > 1200 ? Math.max(this.innerWidth * 0.1, 300) : Math.max(this.innerWidth * 0.2, 200);
@@ -270,7 +322,7 @@ const CarouselComponent = class {
         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`;
+            item.style.width = `${this.width - this.margin * 2}px`;
         }
         if (this.sliderElement) {
             this.sliderElement.style.transform = this.getSliderTransformStyle();
@@ -318,26 +370,35 @@ const CarouselComponent = class {
     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})`;
+        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)`;
+        return `translate3d(${this.currIndex * -this.width + this.width / 2 + this.innerWidth / 2}px, 0, 0)`;
     }
     renderNavigation() {
         return (index.h("div", { class: "CarouselNavigation" }, this.content.map((_item, index$1) => (index.h("div", { class: {
-                'CarouselNavigationBullet': true,
-                'CarouselNavigationBulletActive': index$1 === this.currIndex - 1,
+                CarouselNavigationBullet: true,
+                CarouselNavigationBulletActive: index$1 === this.currIndex - 1
             }, onClick: this.moveSliderIndex.bind(this, index$1 + 1) })))));
     }
     render() {
-        return (index.h("div", { key: '025fa83d4d1b2f4eb70d7839ec0be1870826d96e', ref: el => this.stylingContainer = el }, index.h("div", { key: '17be001fa53f941f0ad05b737bac81bc816374f9', class: "Carousel" }, index.h("div", { key: '33203417852817afef17bb557e74eb767b91662d', class: "CarouselBody" }, index.h("div", { key: '10c2c465bd6b1a3a061db784c163ada7749e838f', class: "CarouselSlider", ref: el => this.sliderElement = el, style: { width: `${this.totalWidth}px`, transform: this.getSliderTransformStyle() } }, this.content.map((item, index$1) => {
+        return (index.h("div", { key: 'a8ac2effba14d03c1c65a025b3cfb1f4463d09c6', ref: (el) => (this.stylingContainer = el) }, index.h("div", { key: '6666154623b874dc94c9a5c45cda9e698b0c7047', class: "Carousel" }, index.h("div", { key: '80a991072e2c964648ba2a51c49e8e3e75a5b732', class: "CarouselBody" }, index.h("div", { key: '2a0005eaf91ba079b05e238092af50778864d8d2', class: "CarouselSlider", ref: (el) => (this.sliderElement = el), style: { width: `${this.totalWidth}px`, transform: this.getSliderTransformStyle() } }, this.content.map((item, index$1) => {
             const isActive = index$1 === this.currIndex - 1;
             const buttonStyle = !isActive ? { cursor: 'unset' } : {};
-            const activeItemHeight = !isActive ? { height: `${this.height - 70}px` } : { height: `${this.height}px` };
+            const activeItemHeight = !isActive
+                ? { height: `${this.height - 70}px` }
+                : { height: `${this.height}px` };
             return (index.h("div", { class: {
-                    'CarouselSliderItem': true,
-                    'CarouselSliderItemActive': isActive,
-                }, onClick: this.changeSlider.bind(this, index$1), style: activeItemHeight }, index.h("div", { class: "Item3dFrame", style: { backgroundSize: 'cover', backgroundPosition: 'center', backgroundImage: `url(${this.setImage(item.image)})`, transform: this.getTransformStyle(index$1) } }, index.h("div", { class: "ItemSection" }, index.h("div", { class: "TopSection" }, index.h("button", { onClick: () => {
+                    CarouselSliderItem: true,
+                    CarouselSliderItemActive: isActive
+                }, onClick: this.changeSlider.bind(this, index$1), style: activeItemHeight }, index.h("div", { class: "Item3dFrame", style: {
+                    backgroundSize: 'cover',
+                    backgroundPosition: 'center',
+                    backgroundImage: `url(${this.setImage(item.image)})`,
+                    transform: this.getTransformStyle(index$1)
+                } }, index.h("div", { class: "ItemSection" }, index.h("div", { class: "TopSection" }, index.h("button", { onClick: () => {
                     if (isActive) {
                         this.navigationTo(item.url, item.targetType, item.externalLink);
                     }
@@ -346,68 +407,13 @@ const CarouselComponent = class {
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
+        "clientStyling": ["handleClientStylingChange"],
+        "clientStylingUrl": ["handleClientStylingChangeURL"],
         "translationUrl": ["handleNewTranslations"]
     }; }
 };
 CarouselComponent.style = CarouselComponentStyle0;
 
-/**
- * @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);
-      }
-    });
-  }
-}
-
 const generalSliderNavigationCss = "";
 const GeneralSliderNavigationStyle0 = generalSliderNavigationCss;
 
@@ -463,7 +469,7 @@ const GeneralSliderNavigation = class {
     }
     componentDidLoad() {
         if (this.stylingContainer) {
-            if (window.emMessageBus != undefined) {
+            if (this.mbSource) {
                 setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`);
             }
             else {

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-7d6bdd9d.js');
+const index = require('./index-4cb07659.js');
 const appGlobals = require('./app-globals-3a1e7e63.js');
 
 /*
@@ -19,7 +19,7 @@ var patchBrowser = () => {
 
 patchBrowser().then(async (options) => {
   await appGlobals.globalScripts();
-  return index.bootstrapLazy([["carousel-component_2.cjs",[[1,"general-slider-navigation",{"mbSource":[1,"mb-source"],"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,{"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingChangeURL"],"translationUrl":["handleNewTranslations"],"cmsEndpoint":["watchEndpoint"],"language":["watchEndpoint"]}],[1,"carousel-component",{"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"content":[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);
+  return index.bootstrapLazy([["carousel-component_2.cjs",[[1,"general-slider-navigation",{"mbSource":[1,"mb-source"],"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,{"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingChangeURL"],"translationUrl":["handleNewTranslations"],"cmsEndpoint":["watchEndpoint"],"language":["watchEndpoint"]}],[1,"carousel-component",{"mbSource":[1,"mb-source"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"content":[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],"innerWidth":[32]},null,{"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingChangeURL"],"translationUrl":["handleNewTranslations"]}]]]], options);
 });
 
 exports.setNonce = index.setNonce;

package/dist/cjs/{index-7d6bdd9d.js → index-4cb07659.js}

@@ -21,7 +21,7 @@ function _interopNamespace(e) {
 }
 
 const NAMESPACE = 'general-slider-navigation';
-const BUILD = /* general-slider-navigation */ { allRenderFn: true, appendChildSlotFix: false, asyncLoading: true, asyncQueue: false, attachStyles: true, cloneNodeFix: false, cmpDidLoad: true, cmpDidRender: true, cmpDidUnload: false, cmpDidUpdate: false, cmpShouldUpdate: false, cmpWillLoad: true, cmpWillRender: false, cmpWillUpdate: false, connectedCallback: false, constructableCSS: true, cssAnnotations: true, devTools: false, disconnectedCallback: true, element: false, event: false, experimentalScopedSlotChanges: false, experimentalSlotFixes: false, formAssociated: false, hasRenderFn: true, hostListener: false, hostListenerTarget: false, hostListenerTargetBody: false, hostListenerTargetDocument: false, hostListenerTargetParent: false, hostListenerTargetWindow: false, hotModuleReplacement: false, hydrateClientSide: false, hydrateServerSide: false, hydratedAttribute: false, hydratedClass: true, hydratedSelectorName: "hydrated", initializeNextTick: false, invisiblePrehydration: true, isDebug: false, isDev: false, isTesting: false, lazyLoad: true, lifecycle: true, lifecycleDOMEvents: false, member: true, method: false, mode: false, observeAttribute: true, profile: false, prop: true, propBoolean: true, propMutable: false, propNumber: true, propString: true, reflect: true, scoped: false, scopedSlotTextContentFix: false, scriptDataOpts: false, shadowDelegatesFocus: false, shadowDom: true, slot: false, slotChildNodesFix: false, slotRelocation: false, state: true, style: true, svg: true, taskQueue: true, transformTagName: false, updatable: true, vdomAttribute: true, vdomClass: true, vdomFunctional: false, vdomKey: true, vdomListener: true, vdomPropOrAttr: true, vdomRef: true, vdomRender: true, vdomStyle: true, vdomText: true, vdomXlink: false, watchCallback: true };
+const BUILD = /* general-slider-navigation */ { allRenderFn: true, appendChildSlotFix: false, asyncLoading: true, asyncQueue: false, attachStyles: true, cloneNodeFix: false, cmpDidLoad: true, cmpDidRender: false, cmpDidUnload: false, cmpDidUpdate: false, cmpShouldUpdate: false, cmpWillLoad: true, cmpWillRender: false, cmpWillUpdate: false, connectedCallback: false, constructableCSS: true, cssAnnotations: true, devTools: false, disconnectedCallback: true, element: false, event: false, experimentalScopedSlotChanges: false, experimentalSlotFixes: false, formAssociated: false, hasRenderFn: true, hostListener: false, hostListenerTarget: false, hostListenerTargetBody: false, hostListenerTargetDocument: false, hostListenerTargetParent: false, hostListenerTargetWindow: false, hotModuleReplacement: false, hydrateClientSide: false, hydrateServerSide: false, hydratedAttribute: false, hydratedClass: true, hydratedSelectorName: "hydrated", initializeNextTick: false, invisiblePrehydration: true, isDebug: false, isDev: false, isTesting: false, lazyLoad: true, lifecycle: true, lifecycleDOMEvents: false, member: true, method: false, mode: false, observeAttribute: true, profile: false, prop: true, propBoolean: true, propMutable: false, propNumber: true, propString: true, reflect: true, scoped: false, scopedSlotTextContentFix: false, scriptDataOpts: false, shadowDelegatesFocus: false, shadowDom: true, slot: false, slotChildNodesFix: false, slotRelocation: false, state: true, style: true, svg: true, taskQueue: true, transformTagName: false, updatable: true, vdomAttribute: true, vdomClass: true, vdomFunctional: false, vdomKey: true, vdomListener: true, vdomPropOrAttr: true, vdomRef: true, vdomRender: true, vdomStyle: true, vdomText: true, vdomXlink: false, watchCallback: true };
 
 /*
  Stencil Client Platform v4.19.2 | MIT Licensed | https://stenciljs.com
@@ -837,9 +837,6 @@ var postUpdateComponent = (hostRef) => {
   const endPostUpdate = createTime("postUpdate", tagName);
   const instance = hostRef.$lazyInstance$ ;
   const ancestorComponent = hostRef.$ancestorComponent$;
-  {
-    safeCall(instance, "componentDidRender");
-  }
   if (!(hostRef.$flags$ & 64 /* hasLoadedComponent */)) {
     hostRef.$flags$ |= 64 /* hasLoadedComponent */;
     {

package/dist/cjs/loader.cjs.js

@@ -2,13 +2,13 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-7d6bdd9d.js');
+const index = require('./index-4cb07659.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",{"mbSource":[1,"mb-source"],"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,{"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingChangeURL"],"translationUrl":["handleNewTranslations"],"cmsEndpoint":["watchEndpoint"],"language":["watchEndpoint"]}],[1,"carousel-component",{"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"content":[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);
+  return index.bootstrapLazy([["carousel-component_2.cjs",[[1,"general-slider-navigation",{"mbSource":[1,"mb-source"],"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,{"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingChangeURL"],"translationUrl":["handleNewTranslations"],"cmsEndpoint":["watchEndpoint"],"language":["watchEndpoint"]}],[1,"carousel-component",{"mbSource":[1,"mb-source"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"content":[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],"innerWidth":[32]},null,{"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingChangeURL"],"translationUrl":["handleNewTranslations"]}]]]], options);
 };
 
 exports.setNonce = index.setNonce;

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

@@ -1,30 +1,13 @@
 import { h } from "@stencil/core";
 import { checkDeviceType, isMobile } from "../../utils/utils";
 import { getTranslations, translate } from "../../utils/locale.utils";
+import { setClientStyling, setClientStylingURL, setStreamStyling } from "../../../../../../../../libs/common/src/styling/index";
 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.content.length;
@@ -69,6 +52,7 @@ export class CarouselComponent {
             }
             return source;
         };
+        this.mbSource = undefined;
         this.clientStyling = '';
         this.clientStylingUrl = '';
         this.content = undefined;
@@ -83,9 +67,19 @@ export class CarouselComponent {
         this.sliderElement = undefined;
         this.totalWidth = undefined;
         this.device = '';
-        this.stylingAppends = false;
         this.innerWidth = undefined;
     }
+    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);
+        }
+    }
     handleNewTranslations() {
         getTranslations(this.translationUrl);
     }
@@ -97,14 +91,16 @@ export class CarouselComponent {
     componentDidLoad() {
         this.init();
         this.calcInnerWidth();
-    }
-    componentDidRender() {
-        if (!this.stylingAppends && this.stylingContainer) {
-            if (this.clientStyling)
-                this.setClientStyling();
-            if (this.clientStylingUrl)
-                this.setClientStylingURL();
-            this.stylingAppends = true;
+        if (this.stylingContainer) {
+            if (this.mbSource) {
+                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);
+            }
         }
     }
     init() {
@@ -128,7 +124,7 @@ export class CarouselComponent {
     resize() {
         if (this.isMobile) {
             this.width = Math.max(innerWidth * 0.3, 200);
-            this.height = window.innerHeight * 0.40;
+            this.height = window.innerHeight * 0.4;
         }
         else {
             this.width = this.innerWidth > 1200 ? Math.max(this.innerWidth * 0.1, 300) : Math.max(this.innerWidth * 0.2, 200);
@@ -141,7 +137,7 @@ export class CarouselComponent {
         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`;
+            item.style.width = `${this.width - this.margin * 2}px`;
         }
         if (this.sliderElement) {
             this.sliderElement.style.transform = this.getSliderTransformStyle();
@@ -189,26 +185,35 @@ export class CarouselComponent {
     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})`;
+        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)`;
+        return `translate3d(${this.currIndex * -this.width + this.width / 2 + this.innerWidth / 2}px, 0, 0)`;
     }
     renderNavigation() {
         return (h("div", { class: "CarouselNavigation" }, this.content.map((_item, index) => (h("div", { class: {
-                'CarouselNavigationBullet': true,
-                'CarouselNavigationBulletActive': index === this.currIndex - 1,
+                CarouselNavigationBullet: true,
+                CarouselNavigationBulletActive: index === this.currIndex - 1
             }, onClick: this.moveSliderIndex.bind(this, index + 1) })))));
     }
     render() {
-        return (h("div", { key: '025fa83d4d1b2f4eb70d7839ec0be1870826d96e', ref: el => this.stylingContainer = el }, h("div", { key: '17be001fa53f941f0ad05b737bac81bc816374f9', class: "Carousel" }, h("div", { key: '33203417852817afef17bb557e74eb767b91662d', class: "CarouselBody" }, h("div", { key: '10c2c465bd6b1a3a061db784c163ada7749e838f', class: "CarouselSlider", ref: el => this.sliderElement = el, style: { width: `${this.totalWidth}px`, transform: this.getSliderTransformStyle() } }, this.content.map((item, index) => {
+        return (h("div", { key: 'a8ac2effba14d03c1c65a025b3cfb1f4463d09c6', ref: (el) => (this.stylingContainer = el) }, h("div", { key: '6666154623b874dc94c9a5c45cda9e698b0c7047', class: "Carousel" }, h("div", { key: '80a991072e2c964648ba2a51c49e8e3e75a5b732', class: "CarouselBody" }, h("div", { key: '2a0005eaf91ba079b05e238092af50778864d8d2', class: "CarouselSlider", ref: (el) => (this.sliderElement = el), style: { width: `${this.totalWidth}px`, transform: this.getSliderTransformStyle() } }, this.content.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` };
+            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: () => {
+                    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);
                     }
@@ -229,6 +234,23 @@ export class CarouselComponent {
     }
     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"
+                },
+                "attribute": "mb-source",
+                "reflect": false
+            },
             "clientStyling": {
                 "type": "string",
                 "mutable": false,
@@ -367,13 +389,18 @@ export class CarouselComponent {
             "sliderElement": {},
             "totalWidth": {},
             "device": {},
-            "stylingAppends": {},
             "innerWidth": {}
         };
     }
     static get elementRef() { return "el"; }
     static get watchers() {
         return [{
+                "propName": "clientStyling",
+                "methodName": "handleClientStylingChange"
+            }, {
+                "propName": "clientStylingUrl",
+                "methodName": "handleClientStylingChangeURL"
+            }, {
                 "propName": "translationUrl",
                 "methodName": "handleNewTranslations"
             }];

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

@@ -53,7 +53,7 @@ export class GeneralSliderNavigation {
     }
     componentDidLoad() {
         if (this.stylingContainer) {
-            if (window.emMessageBus != undefined) {
+            if (this.mbSource) {
                 setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`, this.stylingSubscription);
             }
             else {

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, g as getElement } from './index-0133b6d8.js';
+import { r as registerInstance, h, g as getElement } from './index-1af267c3.js';
 
 /**
  * @name isMobile
@@ -122,6 +122,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);
+      }
+    });
+  }
+}
+
 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(--emw--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;
 
@@ -132,24 +189,6 @@ const CarouselComponent = class {
         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.content.length;
@@ -194,6 +233,7 @@ const CarouselComponent = class {
             }
             return source;
         };
+        this.mbSource = undefined;
         this.clientStyling = '';
         this.clientStylingUrl = '';
         this.content = undefined;
@@ -208,9 +248,19 @@ const CarouselComponent = class {
         this.sliderElement = undefined;
         this.totalWidth = undefined;
         this.device = '';
-        this.stylingAppends = false;
         this.innerWidth = undefined;
     }
+    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);
+        }
+    }
     handleNewTranslations() {
         getTranslations(this.translationUrl);
     }
@@ -222,14 +272,16 @@ const CarouselComponent = class {
     componentDidLoad() {
         this.init();
         this.calcInnerWidth();
-    }
-    componentDidRender() {
-        if (!this.stylingAppends && this.stylingContainer) {
-            if (this.clientStyling)
-                this.setClientStyling();
-            if (this.clientStylingUrl)
-                this.setClientStylingURL();
-            this.stylingAppends = true;
+        if (this.stylingContainer) {
+            if (this.mbSource) {
+                setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`);
+            }
+            else {
+                if (this.clientStyling)
+                    setClientStyling(this.stylingContainer, this.clientStyling);
+                if (this.clientStylingUrl)
+                    setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
+            }
         }
     }
     init() {
@@ -253,7 +305,7 @@ const CarouselComponent = class {
     resize() {
         if (this.isMobile) {
             this.width = Math.max(innerWidth * 0.3, 200);
-            this.height = window.innerHeight * 0.40;
+            this.height = window.innerHeight * 0.4;
         }
         else {
             this.width = this.innerWidth > 1200 ? Math.max(this.innerWidth * 0.1, 300) : Math.max(this.innerWidth * 0.2, 200);
@@ -266,7 +318,7 @@ const CarouselComponent = class {
         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`;
+            item.style.width = `${this.width - this.margin * 2}px`;
         }
         if (this.sliderElement) {
             this.sliderElement.style.transform = this.getSliderTransformStyle();
@@ -314,26 +366,35 @@ const CarouselComponent = class {
     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})`;
+        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)`;
+        return `translate3d(${this.currIndex * -this.width + this.width / 2 + this.innerWidth / 2}px, 0, 0)`;
     }
     renderNavigation() {
         return (h("div", { class: "CarouselNavigation" }, this.content.map((_item, index) => (h("div", { class: {
-                'CarouselNavigationBullet': true,
-                'CarouselNavigationBulletActive': index === this.currIndex - 1,
+                CarouselNavigationBullet: true,
+                CarouselNavigationBulletActive: index === this.currIndex - 1
             }, onClick: this.moveSliderIndex.bind(this, index + 1) })))));
     }
     render() {
-        return (h("div", { key: '025fa83d4d1b2f4eb70d7839ec0be1870826d96e', ref: el => this.stylingContainer = el }, h("div", { key: '17be001fa53f941f0ad05b737bac81bc816374f9', class: "Carousel" }, h("div", { key: '33203417852817afef17bb557e74eb767b91662d', class: "CarouselBody" }, h("div", { key: '10c2c465bd6b1a3a061db784c163ada7749e838f', class: "CarouselSlider", ref: el => this.sliderElement = el, style: { width: `${this.totalWidth}px`, transform: this.getSliderTransformStyle() } }, this.content.map((item, index) => {
+        return (h("div", { key: 'a8ac2effba14d03c1c65a025b3cfb1f4463d09c6', ref: (el) => (this.stylingContainer = el) }, h("div", { key: '6666154623b874dc94c9a5c45cda9e698b0c7047', class: "Carousel" }, h("div", { key: '80a991072e2c964648ba2a51c49e8e3e75a5b732', class: "CarouselBody" }, h("div", { key: '2a0005eaf91ba079b05e238092af50778864d8d2', class: "CarouselSlider", ref: (el) => (this.sliderElement = el), style: { width: `${this.totalWidth}px`, transform: this.getSliderTransformStyle() } }, this.content.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` };
+            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: () => {
+                    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);
                     }
@@ -342,68 +403,13 @@ const CarouselComponent = class {
     }
     get el() { return getElement(this); }
     static get watchers() { return {
+        "clientStyling": ["handleClientStylingChange"],
+        "clientStylingUrl": ["handleClientStylingChangeURL"],
         "translationUrl": ["handleNewTranslations"]
     }; }
 };
 CarouselComponent.style = CarouselComponentStyle0;
 
-/**
- * @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);
-      }
-    });
-  }
-}
-
 const generalSliderNavigationCss = "";
 const GeneralSliderNavigationStyle0 = generalSliderNavigationCss;
 
@@ -459,7 +465,7 @@ const GeneralSliderNavigation = class {
     }
     componentDidLoad() {
         if (this.stylingContainer) {
-            if (window.emMessageBus != undefined) {
+            if (this.mbSource) {
                 setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`);
             }
             else {

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

@@ -1,5 +1,5 @@
-import { p as promiseResolve, b as bootstrapLazy } from './index-0133b6d8.js';
-export { s as setNonce } from './index-0133b6d8.js';
+import { p as promiseResolve, b as bootstrapLazy } from './index-1af267c3.js';
+export { s as setNonce } from './index-1af267c3.js';
 import { g as globalScripts } from './app-globals-0f993ce5.js';
 
 /*
@@ -16,5 +16,5 @@ var patchBrowser = () => {
 
 patchBrowser().then(async (options) => {
   await globalScripts();
-  return bootstrapLazy([["carousel-component_2",[[1,"general-slider-navigation",{"mbSource":[1,"mb-source"],"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,{"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingChangeURL"],"translationUrl":["handleNewTranslations"],"cmsEndpoint":["watchEndpoint"],"language":["watchEndpoint"]}],[1,"carousel-component",{"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"content":[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);
+  return bootstrapLazy([["carousel-component_2",[[1,"general-slider-navigation",{"mbSource":[1,"mb-source"],"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,{"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingChangeURL"],"translationUrl":["handleNewTranslations"],"cmsEndpoint":["watchEndpoint"],"language":["watchEndpoint"]}],[1,"carousel-component",{"mbSource":[1,"mb-source"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"content":[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],"innerWidth":[32]},null,{"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingChangeURL"],"translationUrl":["handleNewTranslations"]}]]]], options);
 });

package/dist/esm/{index-0133b6d8.js → index-1af267c3.js}

@@ -1,5 +1,5 @@
 const NAMESPACE = 'general-slider-navigation';
-const BUILD = /* general-slider-navigation */ { allRenderFn: true, appendChildSlotFix: false, asyncLoading: true, asyncQueue: false, attachStyles: true, cloneNodeFix: false, cmpDidLoad: true, cmpDidRender: true, cmpDidUnload: false, cmpDidUpdate: false, cmpShouldUpdate: false, cmpWillLoad: true, cmpWillRender: false, cmpWillUpdate: false, connectedCallback: false, constructableCSS: true, cssAnnotations: true, devTools: false, disconnectedCallback: true, element: false, event: false, experimentalScopedSlotChanges: false, experimentalSlotFixes: false, formAssociated: false, hasRenderFn: true, hostListener: false, hostListenerTarget: false, hostListenerTargetBody: false, hostListenerTargetDocument: false, hostListenerTargetParent: false, hostListenerTargetWindow: false, hotModuleReplacement: false, hydrateClientSide: false, hydrateServerSide: false, hydratedAttribute: false, hydratedClass: true, hydratedSelectorName: "hydrated", initializeNextTick: false, invisiblePrehydration: true, isDebug: false, isDev: false, isTesting: false, lazyLoad: true, lifecycle: true, lifecycleDOMEvents: false, member: true, method: false, mode: false, observeAttribute: true, profile: false, prop: true, propBoolean: true, propMutable: false, propNumber: true, propString: true, reflect: true, scoped: false, scopedSlotTextContentFix: false, scriptDataOpts: false, shadowDelegatesFocus: false, shadowDom: true, slot: false, slotChildNodesFix: false, slotRelocation: false, state: true, style: true, svg: true, taskQueue: true, transformTagName: false, updatable: true, vdomAttribute: true, vdomClass: true, vdomFunctional: false, vdomKey: true, vdomListener: true, vdomPropOrAttr: true, vdomRef: true, vdomRender: true, vdomStyle: true, vdomText: true, vdomXlink: false, watchCallback: true };
+const BUILD = /* general-slider-navigation */ { allRenderFn: true, appendChildSlotFix: false, asyncLoading: true, asyncQueue: false, attachStyles: true, cloneNodeFix: false, cmpDidLoad: true, cmpDidRender: false, cmpDidUnload: false, cmpDidUpdate: false, cmpShouldUpdate: false, cmpWillLoad: true, cmpWillRender: false, cmpWillUpdate: false, connectedCallback: false, constructableCSS: true, cssAnnotations: true, devTools: false, disconnectedCallback: true, element: false, event: false, experimentalScopedSlotChanges: false, experimentalSlotFixes: false, formAssociated: false, hasRenderFn: true, hostListener: false, hostListenerTarget: false, hostListenerTargetBody: false, hostListenerTargetDocument: false, hostListenerTargetParent: false, hostListenerTargetWindow: false, hotModuleReplacement: false, hydrateClientSide: false, hydrateServerSide: false, hydratedAttribute: false, hydratedClass: true, hydratedSelectorName: "hydrated", initializeNextTick: false, invisiblePrehydration: true, isDebug: false, isDev: false, isTesting: false, lazyLoad: true, lifecycle: true, lifecycleDOMEvents: false, member: true, method: false, mode: false, observeAttribute: true, profile: false, prop: true, propBoolean: true, propMutable: false, propNumber: true, propString: true, reflect: true, scoped: false, scopedSlotTextContentFix: false, scriptDataOpts: false, shadowDelegatesFocus: false, shadowDom: true, slot: false, slotChildNodesFix: false, slotRelocation: false, state: true, style: true, svg: true, taskQueue: true, transformTagName: false, updatable: true, vdomAttribute: true, vdomClass: true, vdomFunctional: false, vdomKey: true, vdomListener: true, vdomPropOrAttr: true, vdomRef: true, vdomRender: true, vdomStyle: true, vdomText: true, vdomXlink: false, watchCallback: true };
 
 /*
  Stencil Client Platform v4.19.2 | MIT Licensed | https://stenciljs.com
@@ -815,9 +815,6 @@ var postUpdateComponent = (hostRef) => {
   const endPostUpdate = createTime("postUpdate", tagName);
   const instance = hostRef.$lazyInstance$ ;
   const ancestorComponent = hostRef.$ancestorComponent$;
-  {
-    safeCall(instance, "componentDidRender");
-  }
   if (!(hostRef.$flags$ & 64 /* hasLoadedComponent */)) {
     hostRef.$flags$ |= 64 /* hasLoadedComponent */;
     {

package/dist/esm/loader.js

@@ -1,11 +1,11 @@
-import { b as bootstrapLazy } from './index-0133b6d8.js';
-export { s as setNonce } from './index-0133b6d8.js';
+import { b as bootstrapLazy } from './index-1af267c3.js';
+export { s as setNonce } from './index-1af267c3.js';
 import { g as globalScripts } from './app-globals-0f993ce5.js';
 
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;
   await globalScripts();
-  return bootstrapLazy([["carousel-component_2",[[1,"general-slider-navigation",{"mbSource":[1,"mb-source"],"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,{"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingChangeURL"],"translationUrl":["handleNewTranslations"],"cmsEndpoint":["watchEndpoint"],"language":["watchEndpoint"]}],[1,"carousel-component",{"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"content":[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);
+  return bootstrapLazy([["carousel-component_2",[[1,"general-slider-navigation",{"mbSource":[1,"mb-source"],"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,{"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingChangeURL"],"translationUrl":["handleNewTranslations"],"cmsEndpoint":["watchEndpoint"],"language":["watchEndpoint"]}],[1,"carousel-component",{"mbSource":[1,"mb-source"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"content":[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],"innerWidth":[32]},null,{"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingChangeURL"],"translationUrl":["handleNewTranslations"]}]]]], options);
 };
 
 export { defineCustomElements };

package/dist/general-slider-navigation/carousel-component_2.entry.js

@@ -1 +1 @@
-import{r as t,h as i,g as e}from"./index-0133b6d8.js";const s={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"}},o=t=>new Promise((i=>{fetch(t).then((t=>t.json())).then((t=>{Object.keys(t).forEach((i=>{s[i]||(s[i]={});for(let e in t[i])s[i][e]=t[i][e]})),i(!0)}))})),r=(t,i)=>s[void 0!==i&&i in s?i:"en"][t],n=class{constructor(i){var e;t(this,i),this.userAgent=window.navigator.userAgent,this.isMobile=!!((e=this.userAgent).toLowerCase().match(/android/i)||e.toLowerCase().match(/blackberry|bb/i)||e.toLowerCase().match(/iphone|ipad|ipod/i)||e.toLowerCase().match(/windows phone|windows mobile|iemobile|wpdesktop/i)),this.touchStartX=0,this.touchEndX=0,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)}))},this.setClientStyling=()=>{let t=document.createElement("style");t.innerHTML=this.clientStyling,this.stylingContainer.prepend(t)},this.moveSliderIndex=t=>{t<1&&(t=this.content.length),t>this.content.length&&(t=1),this.currIndex=t,this.sliderElement&&(this.sliderElement.style.transform=this.getSliderTransformStyle())},this.handleTouchStart=t=>{this.touchStartX=t.changedTouches[0].screenX},this.handleTouchEnd=t=>{this.touchEndX=t.changedTouches[0].screenX,this.handleSwipe()},this.navigationTo=(t,i,e)=>{window.postMessage({type:"NavigateTo",path:t,target:i||null,externalLink:e||!1},window.location.href)},this.changeSlider=t=>{t>this.currIndex-1?this.next():t<this.currIndex-1&&this.prev()},this.setImage=t=>{let i="";switch(this.device=function(){const t=navigator.userAgent.toLowerCase(),i=screen.availWidth,e=screen.availHeight;if(t.includes("iphone"))return"mobile";if(t.includes("android")){if(e>i&&i<800)return"mobile";if(i>e&&e<800)return"tablet"}return"desktop"}(),this.device){case"mobile":i=t.srcMobile;break;case"tablet":i=t.srcTablet;break;case"desktop":i=t.srcDesktop}return i},this.clientStyling="",this.clientStylingUrl="",this.content=void 0,this.bulletNavigation=!0,this.language="en",this.slideTimer=void 0,this.translationUrl="",this.currIndex=0,this.width=void 0,this.height=void 0,this.margin=void 0,this.sliderElement=void 0,this.totalWidth=void 0,this.device="",this.stylingAppends=!1,this.innerWidth=void 0}handleNewTranslations(){o(this.translationUrl)}async componentWillLoad(){this.translationUrl.length>2&&await o(this.translationUrl)}componentDidLoad(){this.init(),this.calcInnerWidth()}componentDidRender(){!this.stylingAppends&&this.stylingContainer&&(this.clientStyling&&this.setClientStyling(),this.clientStylingUrl&&this.setClientStylingURL(),this.stylingAppends=!0)}init(){this.moveSliderIndex(Math.floor(this.content.length/2)),this.bindEvents(),this.slideTimer>0&&this.timer()}calcInnerWidth(){const t=this.el.parentElement;this.innerWidth=t?t.offsetWidth:window.innerWidth,this.resize()}resize(){this.isMobile?(this.width=Math.max(.3*innerWidth,200),this.height=.4*window.innerHeight):(this.width=this.innerWidth>1200?Math.max(.1*this.innerWidth,300):Math.max(.2*this.innerWidth,200),this.height=.55*window.innerHeight),this.totalWidth=this.width*this.content.length,this.margin=-5;const t=this.sliderElement.children;for(let i=0;i<t.length;i++){const e=t[i];e.style.margin=`0 ${this.margin}px`,e.style.width=this.width-2*this.margin+"px"}this.sliderElement&&(this.sliderElement.style.transform=this.getSliderTransformStyle())}timer(){this.clearTimer(),this.interval=setInterval((()=>{this.moveSliderIndex(++this.currIndex)}),1e3*this.slideTimer)}disconnectedCallback(){this.clearTimer()}clearTimer(){this.interval&&clearInterval(this.interval)}prev(){this.moveSliderIndex(--this.currIndex),this.slideTimer>0&&this.timer()}next(){this.moveSliderIndex(++this.currIndex),this.slideTimer>0&&this.timer()}bindEvents(){window.onresize=()=>this.resize(),this.el.addEventListener("touchstart",this.handleTouchStart,!1),this.el.addEventListener("touchend",this.handleTouchEnd,!1)}handleSwipe(){this.touchEndX<this.touchStartX&&this.next(),this.touchEndX>this.touchStartX&&this.prev()}getTransformStyle(t){const i=t===this.currIndex-1?"1200px":"900px";return t===this.currIndex-1?`perspective(${i})`:`perspective(${i}) rotateY(${t<this.currIndex-1?"20deg":"-20deg"})`}getSliderTransformStyle(){return`translate3d(${this.currIndex*-this.width+this.width/2+this.innerWidth/2}px, 0, 0)`}renderNavigation(){return i("div",{class:"CarouselNavigation"},this.content.map(((t,e)=>i("div",{class:{CarouselNavigationBullet:!0,CarouselNavigationBulletActive:e===this.currIndex-1},onClick:this.moveSliderIndex.bind(this,e+1)}))))}render(){return i("div",{key:"025fa83d4d1b2f4eb70d7839ec0be1870826d96e",ref:t=>this.stylingContainer=t},i("div",{key:"17be001fa53f941f0ad05b737bac81bc816374f9",class:"Carousel"},i("div",{key:"33203417852817afef17bb557e74eb767b91662d",class:"CarouselBody"},i("div",{key:"10c2c465bd6b1a3a061db784c163ada7749e838f",class:"CarouselSlider",ref:t=>this.sliderElement=t,style:{width:`${this.totalWidth}px`,transform:this.getSliderTransformStyle()}},this.content.map(((t,e)=>{const s=e===this.currIndex-1,o=s?{}:{cursor:"unset"},n=s?{height:`${this.height}px`}:{height:this.height-70+"px"};return i("div",{class:{CarouselSliderItem:!0,CarouselSliderItemActive:s},onClick:this.changeSlider.bind(this,e),style:n},i("div",{class:"Item3dFrame",style:{backgroundSize:"cover",backgroundPosition:"center",backgroundImage:`url(${this.setImage(t.image)})`,transform:this.getTransformStyle(e)}},i("div",{class:"ItemSection"},i("div",{class:"TopSection"},i("button",{onClick:()=>{s&&this.navigationTo(t.url,t.targetType,t.externalLink)},style:o,class:"JoinButton"},i("span",null,r("joinNow",this.language)),i("svg",{width:"12",height:"12",viewBox:"0 0 16 16",fill:"none",xmlns:"http://www.w3.org/2000/svg"},i("path",{d:"M5 3L10 8L5 13",stroke:"white","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round"})))),i("hr",{class:"Divider"}),i("div",{class:"BottomSection"},i("h3",null,t.title.toUpperCase())))))})))),this.bulletNavigation?this.renderNavigation():null))}get el(){return e(this)}static get watchers(){return{translationUrl:["handleNewTranslations"]}}};function a(t,i){if(t){const e=document.createElement("style");e.innerHTML=i,t.appendChild(e)}}function h(t,i){const e=new URL(i);fetch(e.href).then((t=>t.text())).then((i=>{const e=document.createElement("style");e.innerHTML=i,t&&t.appendChild(e)})).catch((t=>{console.error("There was an error while trying to load client styling from URL",t)}))}n.style=':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(--emw--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 l=class{constructor(i){t(this,i),this.mbSource=void 0,this.clientStyling="",this.clientStylingUrl="",this.cmsEndpoint=void 0,this.cmsEnv="stage",this.language="en",this.userRoles="everyone",this.bulletNavigation=!0,this.slideTimer=void 0,this.sliderMobileWidth=200,this.sliderDesktopWidth=300,this.translationUrl="",this.isLoading=!0,this.hasErrors=!1,this.device=""}handleClientStylingChange(t,i){t!=i&&a(this.stylingContainer,this.clientStyling)}handleClientStylingChangeURL(t,i){t!=i&&this.clientStylingUrl&&h(this.stylingContainer,this.clientStylingUrl)}handleNewTranslations(){o(this.translationUrl)}watchEndpoint(t,i){t&&t!=i&&this.cmsEndpoint&&this.getGeneralSliderNavigation().then((t=>{this.sliderData=t}))}async componentWillLoad(){if(this.translationUrl.length>2&&await o(this.translationUrl),this.cmsEndpoint&&this.language)return this.getGeneralSliderNavigation().then((t=>{this.sliderData=t}))}componentDidLoad(){this.stylingContainer&&(null!=window.emMessageBus?function(t,i){if(window.emMessageBus){const e=document.createElement("style");window.emMessageBus.subscribe(i,(i=>{e.innerHTML=i,t&&t.appendChild(e)}))}}(this.stylingContainer,`${this.mbSource}.Style`):(this.clientStyling&&a(this.stylingContainer,this.clientStyling),this.clientStylingUrl&&h(this.stylingContainer,this.clientStylingUrl)))}disconnectedCallback(){this.stylingSubscription&&this.stylingSubscription.unsubscribe()}getGeneralSliderNavigation(){let t=new URL(`${this.cmsEndpoint}/${this.language}/homepage`);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,e)=>{this.isLoading=!0,fetch(t.href).then((t=>t.json())).then((t=>{i(t.banners)})).catch((t=>{console.error(t),this.hasErrors=!0,e(t)})).finally((()=>{this.isLoading=!1}))}))}render(){return this.hasErrors?i("div",{class:"PageError"},i("div",{class:"TitleError"},r("error",this.language))):this.isLoading?void 0:i("div",{ref:t=>this.stylingContainer=t},i("carousel-component",{content:this.sliderData,language:this.language,"mb-source":this.mbSource,"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{clientStyling:["handleClientStylingChange"],clientStylingUrl:["handleClientStylingChangeURL"],translationUrl:["handleNewTranslations"],cmsEndpoint:["watchEndpoint"],language:["watchEndpoint"]}}};l.style="";export{n as carousel_component,l as general_slider_navigation}
+import{r as t,h as i,g as e}from"./index-1af267c3.js";const s={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"}},o=t=>new Promise((i=>{fetch(t).then((t=>t.json())).then((t=>{Object.keys(t).forEach((i=>{s[i]||(s[i]={});for(let e in t[i])s[i][e]=t[i][e]})),i(!0)}))})),r=(t,i)=>s[void 0!==i&&i in s?i:"en"][t];function n(t,i){if(t){const e=document.createElement("style");e.innerHTML=i,t.appendChild(e)}}function a(t,i){const e=new URL(i);fetch(e.href).then((t=>t.text())).then((i=>{const e=document.createElement("style");e.innerHTML=i,t&&t.appendChild(e)})).catch((t=>{console.error("There was an error while trying to load client styling from URL",t)}))}function h(t,i){if(window.emMessageBus){const e=document.createElement("style");window.emMessageBus.subscribe(i,(i=>{e.innerHTML=i,t&&t.appendChild(e)}))}}const l=class{constructor(i){var e;t(this,i),this.userAgent=window.navigator.userAgent,this.isMobile=!!((e=this.userAgent).toLowerCase().match(/android/i)||e.toLowerCase().match(/blackberry|bb/i)||e.toLowerCase().match(/iphone|ipad|ipod/i)||e.toLowerCase().match(/windows phone|windows mobile|iemobile|wpdesktop/i)),this.touchStartX=0,this.touchEndX=0,this.moveSliderIndex=t=>{t<1&&(t=this.content.length),t>this.content.length&&(t=1),this.currIndex=t,this.sliderElement&&(this.sliderElement.style.transform=this.getSliderTransformStyle())},this.handleTouchStart=t=>{this.touchStartX=t.changedTouches[0].screenX},this.handleTouchEnd=t=>{this.touchEndX=t.changedTouches[0].screenX,this.handleSwipe()},this.navigationTo=(t,i,e)=>{window.postMessage({type:"NavigateTo",path:t,target:i||null,externalLink:e||!1},window.location.href)},this.changeSlider=t=>{t>this.currIndex-1?this.next():t<this.currIndex-1&&this.prev()},this.setImage=t=>{let i="";switch(this.device=function(){const t=navigator.userAgent.toLowerCase(),i=screen.availWidth,e=screen.availHeight;if(t.includes("iphone"))return"mobile";if(t.includes("android")){if(e>i&&i<800)return"mobile";if(i>e&&e<800)return"tablet"}return"desktop"}(),this.device){case"mobile":i=t.srcMobile;break;case"tablet":i=t.srcTablet;break;case"desktop":i=t.srcDesktop}return i},this.mbSource=void 0,this.clientStyling="",this.clientStylingUrl="",this.content=void 0,this.bulletNavigation=!0,this.language="en",this.slideTimer=void 0,this.translationUrl="",this.currIndex=0,this.width=void 0,this.height=void 0,this.margin=void 0,this.sliderElement=void 0,this.totalWidth=void 0,this.device="",this.innerWidth=void 0}handleClientStylingChange(t,i){t!=i&&n(this.stylingContainer,this.clientStyling)}handleClientStylingChangeURL(t,i){t!=i&&this.clientStylingUrl&&a(this.stylingContainer,this.clientStylingUrl)}handleNewTranslations(){o(this.translationUrl)}async componentWillLoad(){this.translationUrl.length>2&&await o(this.translationUrl)}componentDidLoad(){this.init(),this.calcInnerWidth(),this.stylingContainer&&(this.mbSource?h(this.stylingContainer,`${this.mbSource}.Style`):(this.clientStyling&&n(this.stylingContainer,this.clientStyling),this.clientStylingUrl&&a(this.stylingContainer,this.clientStylingUrl)))}init(){this.moveSliderIndex(Math.floor(this.content.length/2)),this.bindEvents(),this.slideTimer>0&&this.timer()}calcInnerWidth(){const t=this.el.parentElement;this.innerWidth=t?t.offsetWidth:window.innerWidth,this.resize()}resize(){this.isMobile?(this.width=Math.max(.3*innerWidth,200),this.height=.4*window.innerHeight):(this.width=this.innerWidth>1200?Math.max(.1*this.innerWidth,300):Math.max(.2*this.innerWidth,200),this.height=.55*window.innerHeight),this.totalWidth=this.width*this.content.length,this.margin=-5;const t=this.sliderElement.children;for(let i=0;i<t.length;i++){const e=t[i];e.style.margin=`0 ${this.margin}px`,e.style.width=this.width-2*this.margin+"px"}this.sliderElement&&(this.sliderElement.style.transform=this.getSliderTransformStyle())}timer(){this.clearTimer(),this.interval=setInterval((()=>{this.moveSliderIndex(++this.currIndex)}),1e3*this.slideTimer)}disconnectedCallback(){this.clearTimer()}clearTimer(){this.interval&&clearInterval(this.interval)}prev(){this.moveSliderIndex(--this.currIndex),this.slideTimer>0&&this.timer()}next(){this.moveSliderIndex(++this.currIndex),this.slideTimer>0&&this.timer()}bindEvents(){window.onresize=()=>this.resize(),this.el.addEventListener("touchstart",this.handleTouchStart,!1),this.el.addEventListener("touchend",this.handleTouchEnd,!1)}handleSwipe(){this.touchEndX<this.touchStartX&&this.next(),this.touchEndX>this.touchStartX&&this.prev()}getTransformStyle(t){const i=t===this.currIndex-1?"1200px":"900px";return t===this.currIndex-1?`perspective(${i})`:`perspective(${i}) rotateY(${t<this.currIndex-1?"20deg":"-20deg"})`}getSliderTransformStyle(){return`translate3d(${this.currIndex*-this.width+this.width/2+this.innerWidth/2}px, 0, 0)`}renderNavigation(){return i("div",{class:"CarouselNavigation"},this.content.map(((t,e)=>i("div",{class:{CarouselNavigationBullet:!0,CarouselNavigationBulletActive:e===this.currIndex-1},onClick:this.moveSliderIndex.bind(this,e+1)}))))}render(){return i("div",{key:"a8ac2effba14d03c1c65a025b3cfb1f4463d09c6",ref:t=>this.stylingContainer=t},i("div",{key:"6666154623b874dc94c9a5c45cda9e698b0c7047",class:"Carousel"},i("div",{key:"80a991072e2c964648ba2a51c49e8e3e75a5b732",class:"CarouselBody"},i("div",{key:"2a0005eaf91ba079b05e238092af50778864d8d2",class:"CarouselSlider",ref:t=>this.sliderElement=t,style:{width:`${this.totalWidth}px`,transform:this.getSliderTransformStyle()}},this.content.map(((t,e)=>{const s=e===this.currIndex-1,o=s?{}:{cursor:"unset"},n=s?{height:`${this.height}px`}:{height:this.height-70+"px"};return i("div",{class:{CarouselSliderItem:!0,CarouselSliderItemActive:s},onClick:this.changeSlider.bind(this,e),style:n},i("div",{class:"Item3dFrame",style:{backgroundSize:"cover",backgroundPosition:"center",backgroundImage:`url(${this.setImage(t.image)})`,transform:this.getTransformStyle(e)}},i("div",{class:"ItemSection"},i("div",{class:"TopSection"},i("button",{onClick:()=>{s&&this.navigationTo(t.url,t.targetType,t.externalLink)},style:o,class:"JoinButton"},i("span",null,r("joinNow",this.language)),i("svg",{width:"12",height:"12",viewBox:"0 0 16 16",fill:"none",xmlns:"http://www.w3.org/2000/svg"},i("path",{d:"M5 3L10 8L5 13",stroke:"white","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round"})))),i("hr",{class:"Divider"}),i("div",{class:"BottomSection"},i("h3",null,t.title.toUpperCase())))))})))),this.bulletNavigation?this.renderNavigation():null))}get el(){return e(this)}static get watchers(){return{clientStyling:["handleClientStylingChange"],clientStylingUrl:["handleClientStylingChangeURL"],translationUrl:["handleNewTranslations"]}}};l.style=':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(--emw--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 d=class{constructor(i){t(this,i),this.mbSource=void 0,this.clientStyling="",this.clientStylingUrl="",this.cmsEndpoint=void 0,this.cmsEnv="stage",this.language="en",this.userRoles="everyone",this.bulletNavigation=!0,this.slideTimer=void 0,this.sliderMobileWidth=200,this.sliderDesktopWidth=300,this.translationUrl="",this.isLoading=!0,this.hasErrors=!1,this.device=""}handleClientStylingChange(t,i){t!=i&&n(this.stylingContainer,this.clientStyling)}handleClientStylingChangeURL(t,i){t!=i&&this.clientStylingUrl&&a(this.stylingContainer,this.clientStylingUrl)}handleNewTranslations(){o(this.translationUrl)}watchEndpoint(t,i){t&&t!=i&&this.cmsEndpoint&&this.getGeneralSliderNavigation().then((t=>{this.sliderData=t}))}async componentWillLoad(){if(this.translationUrl.length>2&&await o(this.translationUrl),this.cmsEndpoint&&this.language)return this.getGeneralSliderNavigation().then((t=>{this.sliderData=t}))}componentDidLoad(){this.stylingContainer&&(this.mbSource?h(this.stylingContainer,`${this.mbSource}.Style`):(this.clientStyling&&n(this.stylingContainer,this.clientStyling),this.clientStylingUrl&&a(this.stylingContainer,this.clientStylingUrl)))}disconnectedCallback(){this.stylingSubscription&&this.stylingSubscription.unsubscribe()}getGeneralSliderNavigation(){let t=new URL(`${this.cmsEndpoint}/${this.language}/homepage`);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,e)=>{this.isLoading=!0,fetch(t.href).then((t=>t.json())).then((t=>{i(t.banners)})).catch((t=>{console.error(t),this.hasErrors=!0,e(t)})).finally((()=>{this.isLoading=!1}))}))}render(){return this.hasErrors?i("div",{class:"PageError"},i("div",{class:"TitleError"},r("error",this.language))):this.isLoading?void 0:i("div",{ref:t=>this.stylingContainer=t},i("carousel-component",{content:this.sliderData,language:this.language,"mb-source":this.mbSource,"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{clientStyling:["handleClientStylingChange"],clientStylingUrl:["handleClientStylingChangeURL"],translationUrl:["handleNewTranslations"],cmsEndpoint:["watchEndpoint"],language:["watchEndpoint"]}}};d.style="";export{l as carousel_component,d as general_slider_navigation}

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

@@ -1 +1 @@
-import{p as n,b as i}from"./index-0133b6d8.js";export{s as setNonce}from"./index-0133b6d8.js";import{g as l}from"./app-globals-0f993ce5.js";(()=>{const i=import.meta.url,l={};return""!==i&&(l.resourcesUrl=new URL(".",i).href),n(l)})().then((async n=>(await l(),i([["carousel-component_2",[[1,"general-slider-navigation",{mbSource:[1,"mb-source"],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,{clientStyling:["handleClientStylingChange"],clientStylingUrl:["handleClientStylingChangeURL"],translationUrl:["handleNewTranslations"],cmsEndpoint:["watchEndpoint"],language:["watchEndpoint"]}],[1,"carousel-component",{clientStyling:[513,"client-styling"],clientStylingUrl:[513,"client-styling-url"],content:[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"]}]]]],n))));
+import{p as n,b as l}from"./index-1af267c3.js";export{s as setNonce}from"./index-1af267c3.js";import{g as i}from"./app-globals-0f993ce5.js";(()=>{const l=import.meta.url,i={};return""!==l&&(i.resourcesUrl=new URL(".",l).href),n(i)})().then((async n=>(await i(),l([["carousel-component_2",[[1,"general-slider-navigation",{mbSource:[1,"mb-source"],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,{clientStyling:["handleClientStylingChange"],clientStylingUrl:["handleClientStylingChangeURL"],translationUrl:["handleNewTranslations"],cmsEndpoint:["watchEndpoint"],language:["watchEndpoint"]}],[1,"carousel-component",{mbSource:[1,"mb-source"],clientStyling:[513,"client-styling"],clientStylingUrl:[513,"client-styling-url"],content:[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],innerWidth:[32]},null,{clientStyling:["handleClientStylingChange"],clientStylingUrl:["handleClientStylingChangeURL"],translationUrl:["handleNewTranslations"]}]]]],n))));

package/dist/general-slider-navigation/{index-0133b6d8.js → index-1af267c3.js}

@@ -1,2 +1,2 @@
-var e=Object.defineProperty,t=new WeakMap,n=e=>t.get(e),l=(e,n)=>t.set(n.t=e,n),o=(e,t)=>t in e,s=(e,t)=>(0,console.error)(e,t),r=new Map,i=new Map,c="slot-fb{display:contents}slot-fb[hidden]{display:none}",u="undefined"!=typeof window?window:{},a=u.document||{head:{}},f={l:0,o:"",jmp:e=>e(),raf:e=>requestAnimationFrame(e),ael:(e,t,n,l)=>e.addEventListener(t,n,l),rel:(e,t,n,l)=>e.removeEventListener(t,n,l),ce:(e,t)=>new CustomEvent(e,t)},h=e=>Promise.resolve(e),p=(()=>{try{return new CSSStyleSheet,"function"==typeof(new CSSStyleSheet).replaceSync}catch(e){}return!1})(),d=!1,m=[],y=[],w=(e,t)=>n=>{e.push(n),d||(d=!0,t&&4&f.l?b($):f.raf($))},v=e=>{for(let t=0;t<e.length;t++)try{e[t](performance.now())}catch(e){s(e)}e.length=0},$=()=>{v(m),v(y),(d=m.length>0)&&f.raf($)},b=e=>h().then(e),g=w(y,!0),S={},j=e=>"object"==(e=typeof e)||"function"===e;function k(e){var t,n,l;return null!=(l=null==(n=null==(t=e.head)?void 0:t.querySelector('meta[name="csp-nonce"]'))?void 0:n.getAttribute("content"))?l:void 0}((t,n)=>{for(var l in n)e(t,l,{get:n[l],enumerable:!0})})({},{err:()=>E,map:()=>C,ok:()=>O,unwrap:()=>P,unwrapErr:()=>R});var O=e=>({isOk:!0,isErr:!1,value:e}),E=e=>({isOk:!1,isErr:!0,value:e});function C(e,t){if(e.isOk){const n=t(e.value);return n instanceof Promise?n.then((e=>O(e))):O(n)}if(e.isErr)return E(e.value);throw"should never get here"}var M,x,P=e=>{if(e.isOk)return e.value;throw e.value},R=e=>{if(e.isErr)return e.value;throw e.value},L=(e,t,...n)=>{let l=null,o=null,s=!1,r=!1;const i=[],c=t=>{for(let n=0;n<t.length;n++)l=t[n],Array.isArray(l)?c(l):null!=l&&"boolean"!=typeof l&&((s="function"!=typeof e&&!j(l))&&(l+=""),s&&r?i[i.length-1].i+=l:i.push(s?T(null,l):l),r=s)};if(c(n),t){t.key&&(o=t.key);{const e=t.className||t.class;e&&(t.class="object"!=typeof e?e:Object.keys(e).filter((t=>e[t])).join(" "))}}const u=T(e,null);return u.u=t,i.length>0&&(u.h=i),u.p=o,u},T=(e,t)=>({l:0,m:e,i:t,v:null,h:null,u:null,p:null}),A={},D=e=>n(e).$hostElement$,F=new WeakMap,N=e=>"sc-"+e.$,U=(e,t,n,l,s,r)=>{if(n!==l){let i=o(e,t),c=t.toLowerCase();if("class"===t){const t=e.classList,o=H(n),s=H(l);t.remove(...o.filter((e=>e&&!s.includes(e)))),t.add(...s.filter((e=>e&&!o.includes(e))))}else if("style"===t){for(const t in n)l&&null!=l[t]||(t.includes("-")?e.style.removeProperty(t):e.style[t]="");for(const t in l)n&&l[t]===n[t]||(t.includes("-")?e.style.setProperty(t,l[t]):e.style[t]=l[t])}else if("key"===t);else if("ref"===t)l&&l(e);else if(i||"o"!==t[0]||"n"!==t[1]){const o=j(l);if((i||o&&null!==l)&&!s)try{if(e.tagName.includes("-"))e[t]=l;else{const o=null==l?"":l;"list"===t?i=!1:null!=n&&e[t]==o||(e[t]=o)}}catch(e){}null==l||!1===l?!1===l&&""!==e.getAttribute(t)||e.removeAttribute(t):(!i||4&r||s)&&!o&&e.setAttribute(t,l=!0===l?"":l)}else if(t="-"===t[2]?t.slice(3):o(u,c)?c.slice(2):c[2]+t.slice(3),n||l){const o=t.endsWith(q);t=t.replace(G,""),n&&f.rel(e,t,n,o),l&&f.ael(e,t,l,o)}}},W=/\s/,H=e=>e?e.split(W):[],q="Capture",G=RegExp(q+"$"),V=(e,t,n)=>{const l=11===t.v.nodeType&&t.v.host?t.v.host:t.v,o=e&&e.u||S,s=t.u||S;for(const e of _(Object.keys(o)))e in s||U(l,e,o[e],void 0,n,t.l);for(const e of _(Object.keys(s)))U(l,e,o[e],s[e],n,t.l)};function _(e){return e.includes("ref")?[...e.filter((e=>"ref"!==e)),"ref"]:e}var z=!1,B=(e,t,n)=>{const l=t.h[n];let o,s,r=0;if(null!==l.i)o=l.v=a.createTextNode(l.i);else{if(z||(z="svg"===l.m),o=l.v=a.createElementNS(z?"http://www.w3.org/2000/svg":"http://www.w3.org/1999/xhtml",l.m),z&&"foreignObject"===l.m&&(z=!1),V(null,l,z),null!=M&&o["s-si"]!==M&&o.classList.add(o["s-si"]=M),l.h)for(r=0;r<l.h.length;++r)s=B(e,l,r),s&&o.appendChild(s);"svg"===l.m?z=!1:"foreignObject"===o.tagName&&(z=!0)}return o["s-hn"]=x,o},I=(e,t,n,l,o,s)=>{let r,i=e;for(i.shadowRoot&&i.tagName===x&&(i=i.shadowRoot);o<=s;++o)l[o]&&(r=B(null,n,o),r&&(l[o].v=r,Y(i,r,t)))},J=(e,t,n)=>{for(let l=t;l<=n;++l){const t=e[l];if(t){const e=t.v;X(t),e&&e.remove()}}},K=(e,t,n=!1)=>e.m===t.m&&(!!n||e.p===t.p),Q=(e,t,n=!1)=>{const l=t.v=e.v,o=e.h,s=t.h,r=t.m,i=t.i;null===i?(V(e,t,z="svg"===r||"foreignObject"!==r&&z),null!==o&&null!==s?((e,t,n,l,o=!1)=>{let s,r,i=0,c=0,u=0,a=0,f=t.length-1,h=t[0],p=t[f],d=l.length-1,m=l[0],y=l[d];for(;i<=f&&c<=d;)if(null==h)h=t[++i];else if(null==p)p=t[--f];else if(null==m)m=l[++c];else if(null==y)y=l[--d];else if(K(h,m,o))Q(h,m,o),h=t[++i],m=l[++c];else if(K(p,y,o))Q(p,y,o),p=t[--f],y=l[--d];else if(K(h,y,o))Q(h,y,o),Y(e,h.v,p.v.nextSibling),h=t[++i],y=l[--d];else if(K(p,m,o))Q(p,m,o),Y(e,p.v,h.v),p=t[--f],m=l[++c];else{for(u=-1,a=i;a<=f;++a)if(t[a]&&null!==t[a].p&&t[a].p===m.p){u=a;break}u>=0?(r=t[u],r.m!==m.m?s=B(t&&t[c],n,u):(Q(r,m,o),t[u]=void 0,s=r.v),m=l[++c]):(s=B(t&&t[c],n,c),m=l[++c]),s&&Y(h.v.parentNode,s,h.v)}i>f?I(e,null==l[d+1]?null:l[d+1].v,n,l,c,d):c>d&&J(t,i,f)})(l,o,t,s,n):null!==s?(null!==e.i&&(l.textContent=""),I(l,null,t,s,0,s.length-1)):null!==o&&J(o,0,o.length-1),z&&"svg"===r&&(z=!1)):e.i!==i&&(l.data=i)},X=e=>{e.u&&e.u.ref&&e.u.ref(null),e.h&&e.h.map(X)},Y=(e,t,n)=>null==e?void 0:e.insertBefore(t,n),Z=(e,t)=>{t&&!e.S&&t["s-p"]&&t["s-p"].push(new Promise((t=>e.S=t)))},ee=(e,t)=>{if(e.l|=16,!(4&e.l))return Z(e,e.j),g((()=>te(e,t)));e.l|=512},te=(e,t)=>{const n=e.t;if(!n)throw Error(`Can't render component <${e.$hostElement$.tagName.toLowerCase()} /> with invalid Stencil runtime! Make sure this imported component is compiled with a \`externalRuntime: true\` flag. For more information, please refer to https://stenciljs.com/docs/custom-elements#externalruntime`);let l;return t&&(l=ce(n,"componentWillLoad")),ne(l,(()=>oe(e,n,t)))},ne=(e,t)=>le(e)?e.then(t).catch((e=>{console.error(e),t()})):t(),le=e=>e instanceof Promise||e&&e.then&&"function"==typeof e.then,oe=async(e,t,n)=>{var l;const o=e.$hostElement$,s=o["s-rc"];n&&(e=>{const t=e.k,n=e.$hostElement$,l=t.l,o=((e,t)=>{var n;const l=N(t),o=i.get(l);if(e=11===e.nodeType?e:a,o)if("string"==typeof o){let s,r=F.get(e=e.head||e);if(r||F.set(e,r=new Set),!r.has(l)){{s=a.createElement("style"),s.innerHTML=o;const t=null!=(n=f.O)?n:k(a);null!=t&&s.setAttribute("nonce",t),e.insertBefore(s,e.querySelector("link"))}4&t.l&&(s.innerHTML+=c),r&&r.add(l)}}else e.adoptedStyleSheets.includes(o)||(e.adoptedStyleSheets=[...e.adoptedStyleSheets,o]);return l})(n.shadowRoot?n.shadowRoot:n.getRootNode(),t);10&l&&(n["s-sc"]=o,n.classList.add(o+"-h"))})(e);se(e,t,o,n),s&&(s.map((e=>e())),o["s-rc"]=void 0);{const t=null!=(l=o["s-p"])?l:[],n=()=>re(e);0===t.length?n():(Promise.all(t).then(n),e.l|=4,t.length=0)}},se=(e,t,n,l)=>{try{t=t.render(),e.l&=-17,e.l|=2,((e,t,n=!1)=>{const l=e.$hostElement$,o=e.k,s=e.C||T(null,null),r=(e=>e&&e.m===A)(t)?t:L(null,null,t);if(x=l.tagName,o.M&&(r.u=r.u||{},o.M.map((([e,t])=>r.u[t]=l[e]))),n&&r.u)for(const e of Object.keys(r.u))l.hasAttribute(e)&&!["key","ref","style","class"].includes(e)&&(r.u[e]=l[e]);r.m=null,r.l|=4,e.C=r,r.v=s.v=l.shadowRoot||l,M=l["s-sc"],Q(s,r,n)})(e,t,l)}catch(t){s(t,e.$hostElement$)}return null},re=e=>{const t=e.$hostElement$,n=e.t,l=e.j;ce(n,"componentDidRender"),64&e.l||(e.l|=64,ue(t),ce(n,"componentDidLoad"),e.P(t),l||ie()),e.S&&(e.S(),e.S=void 0),512&e.l&&b((()=>ee(e,!1))),e.l&=-517},ie=()=>{ue(a.documentElement),b((()=>(e=>{const t=f.ce("appload",{detail:{namespace:"general-slider-navigation"}});return e.dispatchEvent(t),t})(u)))},ce=(e,t,n)=>{if(e&&e[t])try{return e[t](n)}catch(e){s(e)}},ue=e=>e.classList.add("hydrated"),ae=(e,t,l)=>{var o,r;const i=e.prototype;if(t.R||t.L||e.watchers){e.watchers&&!t.L&&(t.L=e.watchers);const c=Object.entries(null!=(o=t.R)?o:{});if(c.map((([e,[o]])=>{(31&o||2&l&&32&o)&&Object.defineProperty(i,e,{get(){return((e,t)=>n(this).T.get(t))(0,e)},set(l){((e,t,l,o)=>{const r=n(e);if(!r)throw Error(`Couldn't find host element for "${o.$}" as it is unknown to this Stencil runtime. This usually happens when integrating a 3rd party Stencil component with another Stencil component or application. Please reach out to the maintainers of the 3rd party Stencil component or report this on the Stencil Discord server (https://chat.stenciljs.com) or comment on this similar [GitHub issue](https://github.com/ionic-team/stencil/issues/5457).`);const i=r.$hostElement$,c=r.T.get(t),u=r.l,a=r.t;if(l=((e,t)=>null==e||j(e)?e:4&t?"false"!==e&&(""===e||!!e):2&t?parseFloat(e):1&t?e+"":e)(l,o.R[t][0]),(!(8&u)||void 0===c)&&l!==c&&(!Number.isNaN(c)||!Number.isNaN(l))&&(r.T.set(t,l),a)){if(o.L&&128&u){const e=o.L[t];e&&e.map((e=>{try{a[e](l,c,t)}catch(e){s(e,i)}}))}2==(18&u)&&ee(r,!1)}})(this,e,l,t)},configurable:!0,enumerable:!0})})),1&l){const l=new Map;i.attributeChangedCallback=function(e,o,s){f.jmp((()=>{var r;const c=l.get(e);if(this.hasOwnProperty(c))s=this[c],delete this[c];else{if(i.hasOwnProperty(c)&&"number"==typeof this[c]&&this[c]==s)return;if(null==c){const l=n(this),i=null==l?void 0:l.l;if(i&&!(8&i)&&128&i&&s!==o){const n=l.t,i=null==(r=t.L)?void 0:r[e];null==i||i.forEach((t=>{null!=n[t]&&n[t].call(n,s,o,e)}))}return}}this[c]=(null!==s||"boolean"!=typeof this[c])&&s}))},e.observedAttributes=Array.from(new Set([...Object.keys(null!=(r=t.L)?r:{}),...c.filter((([e,t])=>15&t[0])).map((([e,n])=>{var o;const s=n[1]||e;return l.set(s,e),512&n[0]&&(null==(o=t.M)||o.push([e,s])),s}))]))}}return e},fe=e=>{ce(e,"disconnectedCallback")},he=(e,l={})=>{var o;const h=[],d=l.exclude||[],m=u.customElements,y=a.head,w=y.querySelector("meta[charset]"),v=a.createElement("style"),$=[];let b,g=!0;Object.assign(f,l),f.o=new URL(l.resourcesUrl||"./",a.baseURI).href;let S=!1;if(e.map((e=>{e[1].map((l=>{var o;const c={l:l[0],$:l[1],R:l[2],A:l[3]};4&c.l&&(S=!0),c.R=l[2],c.M=[],c.L=null!=(o=l[4])?o:{};const u=c.$,a=class extends HTMLElement{constructor(e){if(super(e),this.hasRegisteredEventListeners=!1,((e,n)=>{const l={l:0,$hostElement$:e,k:n,T:new Map};l.D=new Promise((e=>l.P=e)),e["s-p"]=[],e["s-rc"]=[],t.set(e,l)})(e=this,c),1&c.l)if(e.shadowRoot){if("open"!==e.shadowRoot.mode)throw Error(`Unable to re-use existing shadow root for ${c.$}! Mode is set to ${e.shadowRoot.mode} but Stencil only supports open shadow roots.`)}else e.attachShadow({mode:"open"})}connectedCallback(){this.hasRegisteredEventListeners||(this.hasRegisteredEventListeners=!0),b&&(clearTimeout(b),b=null),g?$.push(this):f.jmp((()=>(e=>{if(!(1&f.l)){const t=n(e),l=t.k,o=()=>{};if(1&t.l)(null==t?void 0:t.t)||(null==t?void 0:t.D)&&t.D.then((()=>{}));else{t.l|=1;{let n=e;for(;n=n.parentNode||n.host;)if(n["s-p"]){Z(t,t.j=n);break}}l.R&&Object.entries(l.R).map((([t,[n]])=>{if(31&n&&e.hasOwnProperty(t)){const n=e[t];delete e[t],e[t]=n}})),(async(e,t,n)=>{let l;if(!(32&t.l)){if(t.l|=32,n.F){const e=(e=>{const t=e.$.replace(/-/g,"_"),n=e.F;if(!n)return;const l=r.get(n);return l?l[t]:import(`./${n}.entry.js`).then((e=>(r.set(n,e),e[t])),s)
-/*!__STENCIL_STATIC_IMPORT_SWITCH__*/})(n);if(e&&"then"in e){const t=()=>{};l=await e,t()}else l=e;if(!l)throw Error(`Constructor for "${n.$}#${t.N}" was not found`);l.isProxied||(n.L=l.watchers,ae(l,n,2),l.isProxied=!0);const o=()=>{};t.l|=8;try{new l(t)}catch(e){s(e)}t.l&=-9,t.l|=128,o()}else l=e.constructor,customElements.whenDefined(e.localName).then((()=>t.l|=128));if(l&&l.style){let e;"string"==typeof l.style&&(e=l.style);const t=N(n);if(!i.has(t)){const l=()=>{};((e,t,n)=>{let l=i.get(e);p&&n?(l=l||new CSSStyleSheet,"string"==typeof l?l=t:l.replaceSync(t)):l=t,i.set(e,l)})(t,e,!!(1&n.l)),l()}}}const o=t.j,c=()=>ee(t,!0);o&&o["s-rc"]?o["s-rc"].push(c):c()})(e,t,l)}o()}})(this)))}disconnectedCallback(){f.jmp((()=>(async()=>{if(!(1&f.l)){const e=n(this);(null==e?void 0:e.t)?fe(e.t):(null==e?void 0:e.D)&&e.D.then((()=>fe(e.t)))}})()))}componentOnReady(){return n(this).D}};c.F=e[0],d.includes(u)||m.get(u)||(h.push(u),m.define(u,ae(a,c,1)))}))})),h.length>0&&(S&&(v.textContent+=c),v.textContent+=h.sort()+"{visibility:hidden}.hydrated{visibility:inherit}",v.innerHTML.length)){v.setAttribute("data-styles","");const e=null!=(o=f.O)?o:k(a);null!=e&&v.setAttribute("nonce",e),y.insertBefore(v,w?w.nextSibling:y.firstChild)}g=!1,$.length?$.map((e=>e.connectedCallback())):f.jmp((()=>b=setTimeout(ie,30)))},pe=e=>f.O=e;export{he as b,D as g,L as h,h as p,l as r,pe as s}
+var e=Object.defineProperty,t=new WeakMap,n=e=>t.get(e),l=(e,n)=>t.set(n.t=e,n),o=(e,t)=>t in e,s=(e,t)=>(0,console.error)(e,t),r=new Map,i=new Map,c="slot-fb{display:contents}slot-fb[hidden]{display:none}",u="undefined"!=typeof window?window:{},a=u.document||{head:{}},f={l:0,o:"",jmp:e=>e(),raf:e=>requestAnimationFrame(e),ael:(e,t,n,l)=>e.addEventListener(t,n,l),rel:(e,t,n,l)=>e.removeEventListener(t,n,l),ce:(e,t)=>new CustomEvent(e,t)},h=e=>Promise.resolve(e),p=(()=>{try{return new CSSStyleSheet,"function"==typeof(new CSSStyleSheet).replaceSync}catch(e){}return!1})(),d=!1,m=[],y=[],w=(e,t)=>n=>{e.push(n),d||(d=!0,t&&4&f.l?b($):f.raf($))},v=e=>{for(let t=0;t<e.length;t++)try{e[t](performance.now())}catch(e){s(e)}e.length=0},$=()=>{v(m),v(y),(d=m.length>0)&&f.raf($)},b=e=>h().then(e),g=w(y,!0),S={},j=e=>"object"==(e=typeof e)||"function"===e;function k(e){var t,n,l;return null!=(l=null==(n=null==(t=e.head)?void 0:t.querySelector('meta[name="csp-nonce"]'))?void 0:n.getAttribute("content"))?l:void 0}((t,n)=>{for(var l in n)e(t,l,{get:n[l],enumerable:!0})})({},{err:()=>E,map:()=>C,ok:()=>O,unwrap:()=>P,unwrapErr:()=>L});var O=e=>({isOk:!0,isErr:!1,value:e}),E=e=>({isOk:!1,isErr:!0,value:e});function C(e,t){if(e.isOk){const n=t(e.value);return n instanceof Promise?n.then((e=>O(e))):O(n)}if(e.isErr)return E(e.value);throw"should never get here"}var M,x,P=e=>{if(e.isOk)return e.value;throw e.value},L=e=>{if(e.isErr)return e.value;throw e.value},R=(e,t,...n)=>{let l=null,o=null,s=!1,r=!1;const i=[],c=t=>{for(let n=0;n<t.length;n++)l=t[n],Array.isArray(l)?c(l):null!=l&&"boolean"!=typeof l&&((s="function"!=typeof e&&!j(l))&&(l+=""),s&&r?i[i.length-1].i+=l:i.push(s?T(null,l):l),r=s)};if(c(n),t){t.key&&(o=t.key);{const e=t.className||t.class;e&&(t.class="object"!=typeof e?e:Object.keys(e).filter((t=>e[t])).join(" "))}}const u=T(e,null);return u.u=t,i.length>0&&(u.h=i),u.p=o,u},T=(e,t)=>({l:0,m:e,i:t,v:null,h:null,u:null,p:null}),A={},F=e=>n(e).$hostElement$,N=new WeakMap,U=e=>"sc-"+e.$,W=(e,t,n,l,s,r)=>{if(n!==l){let i=o(e,t),c=t.toLowerCase();if("class"===t){const t=e.classList,o=H(n),s=H(l);t.remove(...o.filter((e=>e&&!s.includes(e)))),t.add(...s.filter((e=>e&&!o.includes(e))))}else if("style"===t){for(const t in n)l&&null!=l[t]||(t.includes("-")?e.style.removeProperty(t):e.style[t]="");for(const t in l)n&&l[t]===n[t]||(t.includes("-")?e.style.setProperty(t,l[t]):e.style[t]=l[t])}else if("key"===t);else if("ref"===t)l&&l(e);else if(i||"o"!==t[0]||"n"!==t[1]){const o=j(l);if((i||o&&null!==l)&&!s)try{if(e.tagName.includes("-"))e[t]=l;else{const o=null==l?"":l;"list"===t?i=!1:null!=n&&e[t]==o||(e[t]=o)}}catch(e){}null==l||!1===l?!1===l&&""!==e.getAttribute(t)||e.removeAttribute(t):(!i||4&r||s)&&!o&&e.setAttribute(t,l=!0===l?"":l)}else if(t="-"===t[2]?t.slice(3):o(u,c)?c.slice(2):c[2]+t.slice(3),n||l){const o=t.endsWith(q);t=t.replace(G,""),n&&f.rel(e,t,n,o),l&&f.ael(e,t,l,o)}}},D=/\s/,H=e=>e?e.split(D):[],q="Capture",G=RegExp(q+"$"),V=(e,t,n)=>{const l=11===t.v.nodeType&&t.v.host?t.v.host:t.v,o=e&&e.u||S,s=t.u||S;for(const e of _(Object.keys(o)))e in s||W(l,e,o[e],void 0,n,t.l);for(const e of _(Object.keys(s)))W(l,e,o[e],s[e],n,t.l)};function _(e){return e.includes("ref")?[...e.filter((e=>"ref"!==e)),"ref"]:e}var z=!1,B=(e,t,n)=>{const l=t.h[n];let o,s,r=0;if(null!==l.i)o=l.v=a.createTextNode(l.i);else{if(z||(z="svg"===l.m),o=l.v=a.createElementNS(z?"http://www.w3.org/2000/svg":"http://www.w3.org/1999/xhtml",l.m),z&&"foreignObject"===l.m&&(z=!1),V(null,l,z),null!=M&&o["s-si"]!==M&&o.classList.add(o["s-si"]=M),l.h)for(r=0;r<l.h.length;++r)s=B(e,l,r),s&&o.appendChild(s);"svg"===l.m?z=!1:"foreignObject"===o.tagName&&(z=!0)}return o["s-hn"]=x,o},I=(e,t,n,l,o,s)=>{let r,i=e;for(i.shadowRoot&&i.tagName===x&&(i=i.shadowRoot);o<=s;++o)l[o]&&(r=B(null,n,o),r&&(l[o].v=r,Y(i,r,t)))},J=(e,t,n)=>{for(let l=t;l<=n;++l){const t=e[l];if(t){const e=t.v;X(t),e&&e.remove()}}},K=(e,t,n=!1)=>e.m===t.m&&(!!n||e.p===t.p),Q=(e,t,n=!1)=>{const l=t.v=e.v,o=e.h,s=t.h,r=t.m,i=t.i;null===i?(V(e,t,z="svg"===r||"foreignObject"!==r&&z),null!==o&&null!==s?((e,t,n,l,o=!1)=>{let s,r,i=0,c=0,u=0,a=0,f=t.length-1,h=t[0],p=t[f],d=l.length-1,m=l[0],y=l[d];for(;i<=f&&c<=d;)if(null==h)h=t[++i];else if(null==p)p=t[--f];else if(null==m)m=l[++c];else if(null==y)y=l[--d];else if(K(h,m,o))Q(h,m,o),h=t[++i],m=l[++c];else if(K(p,y,o))Q(p,y,o),p=t[--f],y=l[--d];else if(K(h,y,o))Q(h,y,o),Y(e,h.v,p.v.nextSibling),h=t[++i],y=l[--d];else if(K(p,m,o))Q(p,m,o),Y(e,p.v,h.v),p=t[--f],m=l[++c];else{for(u=-1,a=i;a<=f;++a)if(t[a]&&null!==t[a].p&&t[a].p===m.p){u=a;break}u>=0?(r=t[u],r.m!==m.m?s=B(t&&t[c],n,u):(Q(r,m,o),t[u]=void 0,s=r.v),m=l[++c]):(s=B(t&&t[c],n,c),m=l[++c]),s&&Y(h.v.parentNode,s,h.v)}i>f?I(e,null==l[d+1]?null:l[d+1].v,n,l,c,d):c>d&&J(t,i,f)})(l,o,t,s,n):null!==s?(null!==e.i&&(l.textContent=""),I(l,null,t,s,0,s.length-1)):null!==o&&J(o,0,o.length-1),z&&"svg"===r&&(z=!1)):e.i!==i&&(l.data=i)},X=e=>{e.u&&e.u.ref&&e.u.ref(null),e.h&&e.h.map(X)},Y=(e,t,n)=>null==e?void 0:e.insertBefore(t,n),Z=(e,t)=>{t&&!e.S&&t["s-p"]&&t["s-p"].push(new Promise((t=>e.S=t)))},ee=(e,t)=>{if(e.l|=16,!(4&e.l))return Z(e,e.j),g((()=>te(e,t)));e.l|=512},te=(e,t)=>{const n=e.t;if(!n)throw Error(`Can't render component <${e.$hostElement$.tagName.toLowerCase()} /> with invalid Stencil runtime! Make sure this imported component is compiled with a \`externalRuntime: true\` flag. For more information, please refer to https://stenciljs.com/docs/custom-elements#externalruntime`);let l;return t&&(l=ce(n,"componentWillLoad")),ne(l,(()=>oe(e,n,t)))},ne=(e,t)=>le(e)?e.then(t).catch((e=>{console.error(e),t()})):t(),le=e=>e instanceof Promise||e&&e.then&&"function"==typeof e.then,oe=async(e,t,n)=>{var l;const o=e.$hostElement$,s=o["s-rc"];n&&(e=>{const t=e.k,n=e.$hostElement$,l=t.l,o=((e,t)=>{var n;const l=U(t),o=i.get(l);if(e=11===e.nodeType?e:a,o)if("string"==typeof o){let s,r=N.get(e=e.head||e);if(r||N.set(e,r=new Set),!r.has(l)){{s=a.createElement("style"),s.innerHTML=o;const t=null!=(n=f.O)?n:k(a);null!=t&&s.setAttribute("nonce",t),e.insertBefore(s,e.querySelector("link"))}4&t.l&&(s.innerHTML+=c),r&&r.add(l)}}else e.adoptedStyleSheets.includes(o)||(e.adoptedStyleSheets=[...e.adoptedStyleSheets,o]);return l})(n.shadowRoot?n.shadowRoot:n.getRootNode(),t);10&l&&(n["s-sc"]=o,n.classList.add(o+"-h"))})(e);se(e,t,o,n),s&&(s.map((e=>e())),o["s-rc"]=void 0);{const t=null!=(l=o["s-p"])?l:[],n=()=>re(e);0===t.length?n():(Promise.all(t).then(n),e.l|=4,t.length=0)}},se=(e,t,n,l)=>{try{t=t.render(),e.l&=-17,e.l|=2,((e,t,n=!1)=>{const l=e.$hostElement$,o=e.k,s=e.C||T(null,null),r=(e=>e&&e.m===A)(t)?t:R(null,null,t);if(x=l.tagName,o.M&&(r.u=r.u||{},o.M.map((([e,t])=>r.u[t]=l[e]))),n&&r.u)for(const e of Object.keys(r.u))l.hasAttribute(e)&&!["key","ref","style","class"].includes(e)&&(r.u[e]=l[e]);r.m=null,r.l|=4,e.C=r,r.v=s.v=l.shadowRoot||l,M=l["s-sc"],Q(s,r,n)})(e,t,l)}catch(t){s(t,e.$hostElement$)}return null},re=e=>{const t=e.$hostElement$,n=e.t,l=e.j;64&e.l||(e.l|=64,ue(t),ce(n,"componentDidLoad"),e.P(t),l||ie()),e.S&&(e.S(),e.S=void 0),512&e.l&&b((()=>ee(e,!1))),e.l&=-517},ie=()=>{ue(a.documentElement),b((()=>(e=>{const t=f.ce("appload",{detail:{namespace:"general-slider-navigation"}});return e.dispatchEvent(t),t})(u)))},ce=(e,t,n)=>{if(e&&e[t])try{return e[t](n)}catch(e){s(e)}},ue=e=>e.classList.add("hydrated"),ae=(e,t,l)=>{var o,r;const i=e.prototype;if(t.L||t.R||e.watchers){e.watchers&&!t.R&&(t.R=e.watchers);const c=Object.entries(null!=(o=t.L)?o:{});if(c.map((([e,[o]])=>{(31&o||2&l&&32&o)&&Object.defineProperty(i,e,{get(){return((e,t)=>n(this).T.get(t))(0,e)},set(l){((e,t,l,o)=>{const r=n(e);if(!r)throw Error(`Couldn't find host element for "${o.$}" as it is unknown to this Stencil runtime. This usually happens when integrating a 3rd party Stencil component with another Stencil component or application. Please reach out to the maintainers of the 3rd party Stencil component or report this on the Stencil Discord server (https://chat.stenciljs.com) or comment on this similar [GitHub issue](https://github.com/ionic-team/stencil/issues/5457).`);const i=r.$hostElement$,c=r.T.get(t),u=r.l,a=r.t;if(l=((e,t)=>null==e||j(e)?e:4&t?"false"!==e&&(""===e||!!e):2&t?parseFloat(e):1&t?e+"":e)(l,o.L[t][0]),(!(8&u)||void 0===c)&&l!==c&&(!Number.isNaN(c)||!Number.isNaN(l))&&(r.T.set(t,l),a)){if(o.R&&128&u){const e=o.R[t];e&&e.map((e=>{try{a[e](l,c,t)}catch(e){s(e,i)}}))}2==(18&u)&&ee(r,!1)}})(this,e,l,t)},configurable:!0,enumerable:!0})})),1&l){const l=new Map;i.attributeChangedCallback=function(e,o,s){f.jmp((()=>{var r;const c=l.get(e);if(this.hasOwnProperty(c))s=this[c],delete this[c];else{if(i.hasOwnProperty(c)&&"number"==typeof this[c]&&this[c]==s)return;if(null==c){const l=n(this),i=null==l?void 0:l.l;if(i&&!(8&i)&&128&i&&s!==o){const n=l.t,i=null==(r=t.R)?void 0:r[e];null==i||i.forEach((t=>{null!=n[t]&&n[t].call(n,s,o,e)}))}return}}this[c]=(null!==s||"boolean"!=typeof this[c])&&s}))},e.observedAttributes=Array.from(new Set([...Object.keys(null!=(r=t.R)?r:{}),...c.filter((([e,t])=>15&t[0])).map((([e,n])=>{var o;const s=n[1]||e;return l.set(s,e),512&n[0]&&(null==(o=t.M)||o.push([e,s])),s}))]))}}return e},fe=e=>{ce(e,"disconnectedCallback")},he=(e,l={})=>{var o;const h=[],d=l.exclude||[],m=u.customElements,y=a.head,w=y.querySelector("meta[charset]"),v=a.createElement("style"),$=[];let b,g=!0;Object.assign(f,l),f.o=new URL(l.resourcesUrl||"./",a.baseURI).href;let S=!1;if(e.map((e=>{e[1].map((l=>{var o;const c={l:l[0],$:l[1],L:l[2],A:l[3]};4&c.l&&(S=!0),c.L=l[2],c.M=[],c.R=null!=(o=l[4])?o:{};const u=c.$,a=class extends HTMLElement{constructor(e){if(super(e),this.hasRegisteredEventListeners=!1,((e,n)=>{const l={l:0,$hostElement$:e,k:n,T:new Map};l.F=new Promise((e=>l.P=e)),e["s-p"]=[],e["s-rc"]=[],t.set(e,l)})(e=this,c),1&c.l)if(e.shadowRoot){if("open"!==e.shadowRoot.mode)throw Error(`Unable to re-use existing shadow root for ${c.$}! Mode is set to ${e.shadowRoot.mode} but Stencil only supports open shadow roots.`)}else e.attachShadow({mode:"open"})}connectedCallback(){this.hasRegisteredEventListeners||(this.hasRegisteredEventListeners=!0),b&&(clearTimeout(b),b=null),g?$.push(this):f.jmp((()=>(e=>{if(!(1&f.l)){const t=n(e),l=t.k,o=()=>{};if(1&t.l)(null==t?void 0:t.t)||(null==t?void 0:t.F)&&t.F.then((()=>{}));else{t.l|=1;{let n=e;for(;n=n.parentNode||n.host;)if(n["s-p"]){Z(t,t.j=n);break}}l.L&&Object.entries(l.L).map((([t,[n]])=>{if(31&n&&e.hasOwnProperty(t)){const n=e[t];delete e[t],e[t]=n}})),(async(e,t,n)=>{let l;if(!(32&t.l)){if(t.l|=32,n.N){const e=(e=>{const t=e.$.replace(/-/g,"_"),n=e.N;if(!n)return;const l=r.get(n);return l?l[t]:import(`./${n}.entry.js`).then((e=>(r.set(n,e),e[t])),s)
+/*!__STENCIL_STATIC_IMPORT_SWITCH__*/})(n);if(e&&"then"in e){const t=()=>{};l=await e,t()}else l=e;if(!l)throw Error(`Constructor for "${n.$}#${t.U}" was not found`);l.isProxied||(n.R=l.watchers,ae(l,n,2),l.isProxied=!0);const o=()=>{};t.l|=8;try{new l(t)}catch(e){s(e)}t.l&=-9,t.l|=128,o()}else l=e.constructor,customElements.whenDefined(e.localName).then((()=>t.l|=128));if(l&&l.style){let e;"string"==typeof l.style&&(e=l.style);const t=U(n);if(!i.has(t)){const l=()=>{};((e,t,n)=>{let l=i.get(e);p&&n?(l=l||new CSSStyleSheet,"string"==typeof l?l=t:l.replaceSync(t)):l=t,i.set(e,l)})(t,e,!!(1&n.l)),l()}}}const o=t.j,c=()=>ee(t,!0);o&&o["s-rc"]?o["s-rc"].push(c):c()})(e,t,l)}o()}})(this)))}disconnectedCallback(){f.jmp((()=>(async()=>{if(!(1&f.l)){const e=n(this);(null==e?void 0:e.t)?fe(e.t):(null==e?void 0:e.F)&&e.F.then((()=>fe(e.t)))}})()))}componentOnReady(){return n(this).F}};c.N=e[0],d.includes(u)||m.get(u)||(h.push(u),m.define(u,ae(a,c,1)))}))})),h.length>0&&(S&&(v.textContent+=c),v.textContent+=h.sort()+"{visibility:hidden}.hydrated{visibility:inherit}",v.innerHTML.length)){v.setAttribute("data-styles","");const e=null!=(o=f.O)?o:k(a);null!=e&&v.setAttribute("nonce",e),y.insertBefore(v,w?w.nextSibling:y.firstChild)}g=!1,$.length?$.map((e=>e.connectedCallback())):f.jmp((()=>b=setTimeout(ie,30)))},pe=e=>f.O=e;export{he as b,F as g,R as h,h as p,l as r,pe as s}

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

@@ -1,4 +1,8 @@
 export declare class CarouselComponent {
+    /**
+     * Client custom styling via streamStyling
+     */
+    mbSource: string;
     /**
      * Client custom styling via inline style
      */
@@ -8,16 +12,16 @@ export declare class CarouselComponent {
      */
     clientStylingUrl: string;
     /**
-    * Endpoint URL for the source of data
-    */
+     * Endpoint URL for the source of data
+     */
     content: Array<any>;
     /**
-    * Show bullet navigation under slides
-    */
+     * Show bullet navigation under slides
+     */
     bulletNavigation: boolean;
     /**
-    * Language of the widget
-    */
+     * Language of the widget
+     */
     language: string;
     /**
      * Timer for auto sliding
@@ -34,21 +38,20 @@ export declare class CarouselComponent {
     sliderElement: HTMLElement;
     totalWidth: number;
     device: string;
-    private stylingAppends;
     private innerWidth;
     el: HTMLElement;
     private userAgent;
     private isMobile;
     private stylingContainer;
+    private stylingSubscription;
     private interval;
     private touchStartX;
     private touchEndX;
+    handleClientStylingChange(newValue: any, oldValue: any): void;
+    handleClientStylingChangeURL(newValue: any, oldValue: any): void;
     handleNewTranslations(): void;
     componentWillLoad(): Promise<void>;
     componentDidLoad(): void;
-    componentDidRender(): void;
-    setClientStylingURL: () => void;
-    setClientStyling: () => void;
     private init;
     private calcInnerWidth;
     private resize;

package/dist/types/components.d.ts

@@ -27,6 +27,10 @@ export namespace Components {
           * Language of the widget
          */
         "language": string;
+        /**
+          * Client custom styling via streamStyling
+         */
+        "mbSource": string;
         /**
           * Timer for auto sliding
          */
@@ -127,6 +131,10 @@ declare namespace LocalJSX {
           * Language of the widget
          */
         "language"?: string;
+        /**
+          * Client custom styling via streamStyling
+         */
+        "mbSource"?: string;
         /**
           * Timer for auto sliding
          */

package/package.json

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