@everymatrix/general-preview-social-posts 1.54.12 → 1.56.0

package/dist/cjs/general-preview-social-posts.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-f916180d.js');
+const index = require('./index-7a4ff06e.js');
 
 const DEFAULT_LANGUAGE = 'en';
 let TRANSLATIONS = {
@@ -105,6 +105,63 @@ const getDevicePlatform = () => {
     }
 };
 
+/**
+ * @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 generalPreviewSocialPostsCss = ":host {\n  font-family: \"Roboto\", sans-serif;\n  display: block;\n}\n\n.ModalContainer {\n  container-type: inline-size;\n}\n\n.sliderWidget {\n  display: block;\n  max-width: 780px;\n  margin: 0 auto;\n  padding: 16px;\n  max-height: 500px;\n}\n.sliderWidget h2 {\n  font-size: 20px;\n}\n.sliderWidget .headerHontainer {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n}\n.sliderWidget .headerHontainer .viewAllButton {\n  cursor: pointer;\n  font-weight: bold;\n  color: rgb(142, 142, 142);\n}\n.sliderWidget .postSlider {\n  display: flex;\n  overflow-x: auto;\n  scroll-snap-type: x mandatory;\n  gap: 24px;\n}\n.sliderWidget .postSlider .postCard {\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  scroll-snap-align: start;\n  padding: 20px;\n  border-radius: 6px;\n  min-width: 360px;\n  background-color: rgb(244, 244, 244);\n}\n.sliderWidget .postSlider .postCard .Description {\n  display: -webkit-box;\n  -webkit-line-clamp: 5;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n  margin-bottom: 14px;\n}\n.sliderWidget .postSlider .postCard .imageTitle {\n  display: flex;\n  justify-content: flex-start;\n  gap: 20px;\n}\n.sliderWidget .postSlider .postCard .imageTitle img {\n  height: 120px;\n  width: 120px;\n  border-radius: 6px;\n}\n.sliderWidget .postSlider .postCard .imageTitle .titleSubtitle {\n  display: flex;\n  flex-direction: column;\n}\n.sliderWidget .postSlider .postCard .buttons {\n  display: flex;\n  justify-content: center;\n  gap: 12px;\n}\n.sliderWidget .postSlider .postCard .buttons .moreInfoButton, .sliderWidget .postSlider .postCard .buttons .playNowButton {\n  width: 172px;\n  display: block;\n  padding: 8px 16px;\n  border: 3px solid #63B250;\n  border-radius: 6px;\n  cursor: pointer;\n  font-weight: bold;\n}\n.sliderWidget .postSlider .postCard .buttons .moreInfoButton {\n  background-color: rgb(244, 244, 244);\n  color: #63B250;\n}\n.sliderWidget .postSlider .postCard .buttons .playNowButton {\n  background-color: #63B250;\n  color: #fff;\n}\n\nh3, h4 {\n  font-size: 18px;\n}\n\np {\n  font-size: 14px;\n  color: rgb(91, 91, 91);\n}\n\n@container (max-width: 480px) {\n  .sliderWidget h2 {\n    font-size: 18px;\n  }\n  .sliderWidget .postSlider .postCard {\n    min-width: 250px;\n  }\n  h3, h4 {\n    font-size: 16px;\n  }\n  p {\n    font-size: 12px;\n  }\n}";
 const GeneralPreviewSocialPostsStyle0 = generalPreviewSocialPostsCss;
 
@@ -155,8 +212,8 @@ const GeneralPreviewSocialPosts = class {
          */
         this.translationUrl = '';
         /**
-       * Client custom styling via string
-       */
+         * Client custom styling via string
+         */
         this.clientStyling = '';
         /**
          * Client custom styling via url content
@@ -171,30 +228,11 @@ const GeneralPreviewSocialPosts = class {
          */
         this.pageName = 'casino';
         this.posts = []; // State to store fetched posts
-        this.stylingAppends = false;
         this.isLoading = false;
         this.isLoggedIn = false;
         this.dataImages = []; // State to store fetched images
         this.gameIds = ''; // State to store fetched images
         this.platform = getDevicePlatform();
-        this.setClientStyling = () => {
-            let sheet = document.createElement('style');
-            sheet.innerHTML = this.clientStyling;
-            this.stylingContainer.prepend(sheet);
-        };
-        this.setClientStylingURL = () => {
-            let url = new URL(this.clientStylingUrl);
-            let cssFile = document.createElement('style');
-            fetch(url.href)
-                .then((res) => res.text())
-                .then((data) => {
-                cssFile.innerHTML = data;
-                setTimeout(() => { this.stylingContainer.prepend(cssFile); }, 1);
-            })
-                .catch((err) => {
-                console.log('error ', err);
-            });
-        };
     }
     handleNewTranslations() {
         this.isLoading = true;
@@ -202,6 +240,17 @@ const GeneralPreviewSocialPosts = class {
             this.isLoading = false;
         });
     }
+    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);
+        }
+    }
     async componentWillLoad() {
         if (this.translationUrl.length > 2) {
             await getTranslations(this.translationUrl);
@@ -217,17 +266,6 @@ const GeneralPreviewSocialPosts = class {
             this.isLoggedIn = true;
         }
     }
-    componentDidRender() {
-        // start custom styling area
-        if (!this.stylingAppends && this.stylingContainer) {
-            if (this.clientStyling)
-                this.setClientStyling();
-            if (this.clientStylingUrl)
-                this.setClientStylingURL();
-            this.stylingAppends = true;
-        }
-        // end custom styling area
-    }
     getDataImage(ids) {
         try {
             let url = new URL(`${this.endpoint}/v2/casino/groups/${this.datasource}`);
@@ -271,6 +309,17 @@ const GeneralPreviewSocialPosts = class {
         }
     }
     async componentDidLoad() {
+        if (this.stylingContainer) {
+            if (window.emMessageBus != undefined) {
+                setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`);
+            }
+            else {
+                if (this.clientStyling)
+                    setClientStyling(this.stylingContainer, this.clientStyling);
+                if (this.clientStylingUrl)
+                    setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
+            }
+        }
         try {
             let url = new URL(`${this.cmsEndpoint}/${this.language}/content/social-posts`);
             url.searchParams.append("device", this.platform);
@@ -317,6 +366,9 @@ const GeneralPreviewSocialPosts = class {
             console.error('Error fetching verification types:', error);
         }
     }
+    disconnectedCallback() {
+        this.stylingSubscription && this.stylingSubscription.unsubscribe();
+    }
     hasUndefinedValues(obj) {
         return Object.values(obj).some((value) => value === undefined);
     }
@@ -350,6 +402,8 @@ const GeneralPreviewSocialPosts = class {
     }
     static get watchers() { return {
         "translationUrl": ["handleNewTranslations"],
+        "clientStyling": ["handleClientStylingChange"],
+        "clientStylingUrl": ["handleClientStylingChangeURL"],
         "session": ["watchSession"]
     }; }
 };

package/dist/cjs/general-preview-social-posts.cjs.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-f916180d.js');
+const index = require('./index-7a4ff06e.js');
 const appGlobals = require('./app-globals-3a1e7e63.js');
 
 /*
@@ -19,7 +19,7 @@ var patchBrowser = () => {
 
 patchBrowser().then(async (options) => {
   await appGlobals.globalScripts();
-  return index.bootstrapLazy([["general-preview-social-posts.cjs",[[1,"general-preview-social-posts",{"userId":[513,"user-id"],"session":[513],"postsTitle":[513,"posts-title"],"maxCards":[513,"max-cards"],"language":[513],"datasource":[513],"endpoint":[513],"cmsEndpoint":[513,"cms-endpoint"],"userRoles":[513,"user-roles"],"translationUrl":[513,"translation-url"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"cmsEnv":[513,"cms-env"],"pageName":[513,"page-name"],"posts":[32],"stylingAppends":[32],"isLoading":[32],"isLoggedIn":[32],"dataImages":[32],"gameIds":[32]},null,{"translationUrl":["handleNewTranslations"],"session":["watchSession"]}]]]], options);
+  return index.bootstrapLazy([["general-preview-social-posts.cjs",[[1,"general-preview-social-posts",{"userId":[513,"user-id"],"session":[513],"postsTitle":[513,"posts-title"],"maxCards":[513,"max-cards"],"language":[513],"datasource":[513],"endpoint":[513],"cmsEndpoint":[513,"cms-endpoint"],"userRoles":[513,"user-roles"],"translationUrl":[513,"translation-url"],"mbSource":[1,"mb-source"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"cmsEnv":[513,"cms-env"],"pageName":[513,"page-name"],"posts":[32],"isLoading":[32],"isLoggedIn":[32],"dataImages":[32],"gameIds":[32]},null,{"translationUrl":["handleNewTranslations"],"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingChangeURL"],"session":["watchSession"]}]]]], options);
 });
 
 exports.setNonce = index.setNonce;

package/dist/cjs/{index-f916180d.js → index-7a4ff06e.js}

@@ -21,7 +21,7 @@ function _interopNamespace(e) {
 }
 
 const NAMESPACE = 'general-preview-social-posts';
-const BUILD = /* general-preview-social-posts */ { 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: true, constructableCSS: true, cssAnnotations: true, devTools: false, disconnectedCallback: false, element: false, event: true, 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, modernPropertyDecls: false, observeAttribute: true, profile: false, prop: true, propBoolean: false, propMutable: false, propNumber: false, 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: false, taskQueue: true, transformTagName: false, updatable: true, vdomAttribute: true, vdomClass: true, vdomFunctional: false, vdomKey: false, vdomListener: true, vdomPropOrAttr: true, vdomRef: true, vdomRender: true, vdomStyle: false, vdomText: true, vdomXlink: false, watchCallback: true };
+const BUILD = /* general-preview-social-posts */ { 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: true, constructableCSS: true, cssAnnotations: true, devTools: false, disconnectedCallback: true, element: false, event: true, 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, modernPropertyDecls: false, observeAttribute: true, profile: false, prop: true, propBoolean: false, propMutable: false, propNumber: false, 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: false, taskQueue: true, transformTagName: false, updatable: true, vdomAttribute: true, vdomClass: true, vdomFunctional: false, vdomKey: false, vdomListener: true, vdomPropOrAttr: true, vdomRef: true, vdomRender: true, vdomStyle: false, vdomText: true, vdomXlink: false, watchCallback: true };
 
 /*
  Stencil Client Platform v4.26.0 | MIT Licensed | https://stenciljs.com
@@ -830,9 +830,6 @@ var postUpdateComponent = (hostRef) => {
   const endPostUpdate = createTime("postUpdate", tagName);
   const instance = hostRef.$lazyInstance$ ;
   const ancestorComponent = hostRef.$ancestorComponent$;
-  {
-    safeCall(instance, "componentDidRender", void 0, elm);
-  }
   if (!(hostRef.$flags$ & 64 /* hasLoadedComponent */)) {
     hostRef.$flags$ |= 64 /* hasLoadedComponent */;
     {
@@ -1160,12 +1157,17 @@ var connectedCallback = (elm) => {
   }
 };
 var disconnectInstance = (instance, elm) => {
+  {
+    safeCall(instance, "disconnectedCallback", void 0, elm || instance);
+  }
 };
 var disconnectedCallback = async (elm) => {
   if ((plt.$flags$ & 1 /* isTmpDisconnected */) === 0) {
     const hostRef = getHostRef(elm);
-    if (hostRef == null ? void 0 : hostRef.$lazyInstance$) ; else if (hostRef == null ? void 0 : hostRef.$onReadyPromise$) {
-      hostRef.$onReadyPromise$.then(() => disconnectInstance());
+    if (hostRef == null ? void 0 : hostRef.$lazyInstance$) {
+      disconnectInstance(hostRef.$lazyInstance$, elm);
+    } else if (hostRef == null ? void 0 : hostRef.$onReadyPromise$) {
+      hostRef.$onReadyPromise$.then(() => disconnectInstance(hostRef.$lazyInstance$, elm));
     }
   }
   if (rootAppliedStyles.has(elm)) {

package/dist/cjs/loader.cjs.js

@@ -2,13 +2,13 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-f916180d.js');
+const index = require('./index-7a4ff06e.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([["general-preview-social-posts.cjs",[[1,"general-preview-social-posts",{"userId":[513,"user-id"],"session":[513],"postsTitle":[513,"posts-title"],"maxCards":[513,"max-cards"],"language":[513],"datasource":[513],"endpoint":[513],"cmsEndpoint":[513,"cms-endpoint"],"userRoles":[513,"user-roles"],"translationUrl":[513,"translation-url"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"cmsEnv":[513,"cms-env"],"pageName":[513,"page-name"],"posts":[32],"stylingAppends":[32],"isLoading":[32],"isLoggedIn":[32],"dataImages":[32],"gameIds":[32]},null,{"translationUrl":["handleNewTranslations"],"session":["watchSession"]}]]]], options);
+  return index.bootstrapLazy([["general-preview-social-posts.cjs",[[1,"general-preview-social-posts",{"userId":[513,"user-id"],"session":[513],"postsTitle":[513,"posts-title"],"maxCards":[513,"max-cards"],"language":[513],"datasource":[513],"endpoint":[513],"cmsEndpoint":[513,"cms-endpoint"],"userRoles":[513,"user-roles"],"translationUrl":[513,"translation-url"],"mbSource":[1,"mb-source"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"cmsEnv":[513,"cms-env"],"pageName":[513,"page-name"],"posts":[32],"isLoading":[32],"isLoggedIn":[32],"dataImages":[32],"gameIds":[32]},null,{"translationUrl":["handleNewTranslations"],"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingChangeURL"],"session":["watchSession"]}]]]], options);
 };
 
 exports.setNonce = index.setNonce;

package/dist/collection/components/general-preview-social-posts/general-preview-social-posts.js

@@ -1,6 +1,7 @@
 import { h } from "@stencil/core";
 import { getTranslations, translate } from "../../utils/locale.utils";
 import { getDevicePlatform } from "../../utils/utils";
+import { setClientStyling, setClientStylingURL, setStreamStyling } from "../../../../../../../../libs/common/src/styling/index";
 export class GeneralPreviewSocialPosts {
     constructor() {
         /**
@@ -44,8 +45,8 @@ export class GeneralPreviewSocialPosts {
          */
         this.translationUrl = '';
         /**
-       * Client custom styling via string
-       */
+         * Client custom styling via string
+         */
         this.clientStyling = '';
         /**
          * Client custom styling via url content
@@ -60,30 +61,11 @@ export class GeneralPreviewSocialPosts {
          */
         this.pageName = 'casino';
         this.posts = []; // State to store fetched posts
-        this.stylingAppends = false;
         this.isLoading = false;
         this.isLoggedIn = false;
         this.dataImages = []; // State to store fetched images
         this.gameIds = ''; // State to store fetched images
         this.platform = getDevicePlatform();
-        this.setClientStyling = () => {
-            let sheet = document.createElement('style');
-            sheet.innerHTML = this.clientStyling;
-            this.stylingContainer.prepend(sheet);
-        };
-        this.setClientStylingURL = () => {
-            let url = new URL(this.clientStylingUrl);
-            let cssFile = document.createElement('style');
-            fetch(url.href)
-                .then((res) => res.text())
-                .then((data) => {
-                cssFile.innerHTML = data;
-                setTimeout(() => { this.stylingContainer.prepend(cssFile); }, 1);
-            })
-                .catch((err) => {
-                console.log('error ', err);
-            });
-        };
     }
     handleNewTranslations() {
         this.isLoading = true;
@@ -91,6 +73,17 @@ export class GeneralPreviewSocialPosts {
             this.isLoading = false;
         });
     }
+    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);
+        }
+    }
     async componentWillLoad() {
         if (this.translationUrl.length > 2) {
             await getTranslations(this.translationUrl);
@@ -106,17 +99,6 @@ export class GeneralPreviewSocialPosts {
             this.isLoggedIn = true;
         }
     }
-    componentDidRender() {
-        // start custom styling area
-        if (!this.stylingAppends && this.stylingContainer) {
-            if (this.clientStyling)
-                this.setClientStyling();
-            if (this.clientStylingUrl)
-                this.setClientStylingURL();
-            this.stylingAppends = true;
-        }
-        // end custom styling area
-    }
     getDataImage(ids) {
         try {
             let url = new URL(`${this.endpoint}/v2/casino/groups/${this.datasource}`);
@@ -160,6 +142,17 @@ export class GeneralPreviewSocialPosts {
         }
     }
     async componentDidLoad() {
+        if (this.stylingContainer) {
+            if (window.emMessageBus != undefined) {
+                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);
+            }
+        }
         try {
             let url = new URL(`${this.cmsEndpoint}/${this.language}/content/social-posts`);
             url.searchParams.append("device", this.platform);
@@ -206,6 +199,9 @@ export class GeneralPreviewSocialPosts {
             console.error('Error fetching verification types:', error);
         }
     }
+    disconnectedCallback() {
+        this.stylingSubscription && this.stylingSubscription.unsubscribe();
+    }
     hasUndefinedValues(obj) {
         return Object.values(obj).some((value) => value === undefined);
     }
@@ -451,6 +447,25 @@ export class GeneralPreviewSocialPosts {
                 "reflect": true,
                 "defaultValue": "''"
             },
+            "mbSource": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Client custom styling via streamStyling"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "mb-source",
+                "reflect": false
+            },
             "clientStyling": {
                 "type": "string",
                 "mutable": false,
@@ -536,7 +551,6 @@ export class GeneralPreviewSocialPosts {
     static get states() {
         return {
             "posts": {},
-            "stylingAppends": {},
             "isLoading": {},
             "isLoggedIn": {},
             "dataImages": {},
@@ -595,6 +609,12 @@ export class GeneralPreviewSocialPosts {
         return [{
                 "propName": "translationUrl",
                 "methodName": "handleNewTranslations"
+            }, {
+                "propName": "clientStyling",
+                "methodName": "handleClientStylingChange"
+            }, {
+                "propName": "clientStylingUrl",
+                "methodName": "handleClientStylingChangeURL"
             }, {
                 "propName": "session",
                 "methodName": "watchSession"

package/dist/esm/general-preview-social-posts.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h } from './index-a43ff883.js';
+import { r as registerInstance, c as createEvent, h } from './index-64bce880.js';
 
 const DEFAULT_LANGUAGE = 'en';
 let TRANSLATIONS = {
@@ -101,6 +101,63 @@ const getDevicePlatform = () => {
     }
 };
 
+/**
+ * @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 generalPreviewSocialPostsCss = ":host {\n  font-family: \"Roboto\", sans-serif;\n  display: block;\n}\n\n.ModalContainer {\n  container-type: inline-size;\n}\n\n.sliderWidget {\n  display: block;\n  max-width: 780px;\n  margin: 0 auto;\n  padding: 16px;\n  max-height: 500px;\n}\n.sliderWidget h2 {\n  font-size: 20px;\n}\n.sliderWidget .headerHontainer {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n}\n.sliderWidget .headerHontainer .viewAllButton {\n  cursor: pointer;\n  font-weight: bold;\n  color: rgb(142, 142, 142);\n}\n.sliderWidget .postSlider {\n  display: flex;\n  overflow-x: auto;\n  scroll-snap-type: x mandatory;\n  gap: 24px;\n}\n.sliderWidget .postSlider .postCard {\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  scroll-snap-align: start;\n  padding: 20px;\n  border-radius: 6px;\n  min-width: 360px;\n  background-color: rgb(244, 244, 244);\n}\n.sliderWidget .postSlider .postCard .Description {\n  display: -webkit-box;\n  -webkit-line-clamp: 5;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n  margin-bottom: 14px;\n}\n.sliderWidget .postSlider .postCard .imageTitle {\n  display: flex;\n  justify-content: flex-start;\n  gap: 20px;\n}\n.sliderWidget .postSlider .postCard .imageTitle img {\n  height: 120px;\n  width: 120px;\n  border-radius: 6px;\n}\n.sliderWidget .postSlider .postCard .imageTitle .titleSubtitle {\n  display: flex;\n  flex-direction: column;\n}\n.sliderWidget .postSlider .postCard .buttons {\n  display: flex;\n  justify-content: center;\n  gap: 12px;\n}\n.sliderWidget .postSlider .postCard .buttons .moreInfoButton, .sliderWidget .postSlider .postCard .buttons .playNowButton {\n  width: 172px;\n  display: block;\n  padding: 8px 16px;\n  border: 3px solid #63B250;\n  border-radius: 6px;\n  cursor: pointer;\n  font-weight: bold;\n}\n.sliderWidget .postSlider .postCard .buttons .moreInfoButton {\n  background-color: rgb(244, 244, 244);\n  color: #63B250;\n}\n.sliderWidget .postSlider .postCard .buttons .playNowButton {\n  background-color: #63B250;\n  color: #fff;\n}\n\nh3, h4 {\n  font-size: 18px;\n}\n\np {\n  font-size: 14px;\n  color: rgb(91, 91, 91);\n}\n\n@container (max-width: 480px) {\n  .sliderWidget h2 {\n    font-size: 18px;\n  }\n  .sliderWidget .postSlider .postCard {\n    min-width: 250px;\n  }\n  h3, h4 {\n    font-size: 16px;\n  }\n  p {\n    font-size: 12px;\n  }\n}";
 const GeneralPreviewSocialPostsStyle0 = generalPreviewSocialPostsCss;
 
@@ -151,8 +208,8 @@ const GeneralPreviewSocialPosts = class {
          */
         this.translationUrl = '';
         /**
-       * Client custom styling via string
-       */
+         * Client custom styling via string
+         */
         this.clientStyling = '';
         /**
          * Client custom styling via url content
@@ -167,30 +224,11 @@ const GeneralPreviewSocialPosts = class {
          */
         this.pageName = 'casino';
         this.posts = []; // State to store fetched posts
-        this.stylingAppends = false;
         this.isLoading = false;
         this.isLoggedIn = false;
         this.dataImages = []; // State to store fetched images
         this.gameIds = ''; // State to store fetched images
         this.platform = getDevicePlatform();
-        this.setClientStyling = () => {
-            let sheet = document.createElement('style');
-            sheet.innerHTML = this.clientStyling;
-            this.stylingContainer.prepend(sheet);
-        };
-        this.setClientStylingURL = () => {
-            let url = new URL(this.clientStylingUrl);
-            let cssFile = document.createElement('style');
-            fetch(url.href)
-                .then((res) => res.text())
-                .then((data) => {
-                cssFile.innerHTML = data;
-                setTimeout(() => { this.stylingContainer.prepend(cssFile); }, 1);
-            })
-                .catch((err) => {
-                console.log('error ', err);
-            });
-        };
     }
     handleNewTranslations() {
         this.isLoading = true;
@@ -198,6 +236,17 @@ const GeneralPreviewSocialPosts = class {
             this.isLoading = false;
         });
     }
+    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);
+        }
+    }
     async componentWillLoad() {
         if (this.translationUrl.length > 2) {
             await getTranslations(this.translationUrl);
@@ -213,17 +262,6 @@ const GeneralPreviewSocialPosts = class {
             this.isLoggedIn = true;
         }
     }
-    componentDidRender() {
-        // start custom styling area
-        if (!this.stylingAppends && this.stylingContainer) {
-            if (this.clientStyling)
-                this.setClientStyling();
-            if (this.clientStylingUrl)
-                this.setClientStylingURL();
-            this.stylingAppends = true;
-        }
-        // end custom styling area
-    }
     getDataImage(ids) {
         try {
             let url = new URL(`${this.endpoint}/v2/casino/groups/${this.datasource}`);
@@ -267,6 +305,17 @@ const GeneralPreviewSocialPosts = class {
         }
     }
     async componentDidLoad() {
+        if (this.stylingContainer) {
+            if (window.emMessageBus != undefined) {
+                setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`);
+            }
+            else {
+                if (this.clientStyling)
+                    setClientStyling(this.stylingContainer, this.clientStyling);
+                if (this.clientStylingUrl)
+                    setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
+            }
+        }
         try {
             let url = new URL(`${this.cmsEndpoint}/${this.language}/content/social-posts`);
             url.searchParams.append("device", this.platform);
@@ -313,6 +362,9 @@ const GeneralPreviewSocialPosts = class {
             console.error('Error fetching verification types:', error);
         }
     }
+    disconnectedCallback() {
+        this.stylingSubscription && this.stylingSubscription.unsubscribe();
+    }
     hasUndefinedValues(obj) {
         return Object.values(obj).some((value) => value === undefined);
     }
@@ -346,6 +398,8 @@ const GeneralPreviewSocialPosts = class {
     }
     static get watchers() { return {
         "translationUrl": ["handleNewTranslations"],
+        "clientStyling": ["handleClientStylingChange"],
+        "clientStylingUrl": ["handleClientStylingChangeURL"],
         "session": ["watchSession"]
     }; }
 };

package/dist/esm/general-preview-social-posts.js

@@ -1,5 +1,5 @@
-import { p as promiseResolve, b as bootstrapLazy } from './index-a43ff883.js';
-export { s as setNonce } from './index-a43ff883.js';
+import { p as promiseResolve, b as bootstrapLazy } from './index-64bce880.js';
+export { s as setNonce } from './index-64bce880.js';
 import { g as globalScripts } from './app-globals-0f993ce5.js';
 
 /*
@@ -16,5 +16,5 @@ var patchBrowser = () => {
 
 patchBrowser().then(async (options) => {
   await globalScripts();
-  return bootstrapLazy([["general-preview-social-posts",[[1,"general-preview-social-posts",{"userId":[513,"user-id"],"session":[513],"postsTitle":[513,"posts-title"],"maxCards":[513,"max-cards"],"language":[513],"datasource":[513],"endpoint":[513],"cmsEndpoint":[513,"cms-endpoint"],"userRoles":[513,"user-roles"],"translationUrl":[513,"translation-url"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"cmsEnv":[513,"cms-env"],"pageName":[513,"page-name"],"posts":[32],"stylingAppends":[32],"isLoading":[32],"isLoggedIn":[32],"dataImages":[32],"gameIds":[32]},null,{"translationUrl":["handleNewTranslations"],"session":["watchSession"]}]]]], options);
+  return bootstrapLazy([["general-preview-social-posts",[[1,"general-preview-social-posts",{"userId":[513,"user-id"],"session":[513],"postsTitle":[513,"posts-title"],"maxCards":[513,"max-cards"],"language":[513],"datasource":[513],"endpoint":[513],"cmsEndpoint":[513,"cms-endpoint"],"userRoles":[513,"user-roles"],"translationUrl":[513,"translation-url"],"mbSource":[1,"mb-source"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"cmsEnv":[513,"cms-env"],"pageName":[513,"page-name"],"posts":[32],"isLoading":[32],"isLoggedIn":[32],"dataImages":[32],"gameIds":[32]},null,{"translationUrl":["handleNewTranslations"],"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingChangeURL"],"session":["watchSession"]}]]]], options);
 });

package/dist/esm/{index-a43ff883.js → index-64bce880.js}

@@ -1,5 +1,5 @@
 const NAMESPACE = 'general-preview-social-posts';
-const BUILD = /* general-preview-social-posts */ { 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: true, constructableCSS: true, cssAnnotations: true, devTools: false, disconnectedCallback: false, element: false, event: true, 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, modernPropertyDecls: false, observeAttribute: true, profile: false, prop: true, propBoolean: false, propMutable: false, propNumber: false, 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: false, taskQueue: true, transformTagName: false, updatable: true, vdomAttribute: true, vdomClass: true, vdomFunctional: false, vdomKey: false, vdomListener: true, vdomPropOrAttr: true, vdomRef: true, vdomRender: true, vdomStyle: false, vdomText: true, vdomXlink: false, watchCallback: true };
+const BUILD = /* general-preview-social-posts */ { 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: true, constructableCSS: true, cssAnnotations: true, devTools: false, disconnectedCallback: true, element: false, event: true, 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, modernPropertyDecls: false, observeAttribute: true, profile: false, prop: true, propBoolean: false, propMutable: false, propNumber: false, 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: false, taskQueue: true, transformTagName: false, updatable: true, vdomAttribute: true, vdomClass: true, vdomFunctional: false, vdomKey: false, vdomListener: true, vdomPropOrAttr: true, vdomRef: true, vdomRender: true, vdomStyle: false, vdomText: true, vdomXlink: false, watchCallback: true };
 
 /*
  Stencil Client Platform v4.26.0 | MIT Licensed | https://stenciljs.com
@@ -808,9 +808,6 @@ var postUpdateComponent = (hostRef) => {
   const endPostUpdate = createTime("postUpdate", tagName);
   const instance = hostRef.$lazyInstance$ ;
   const ancestorComponent = hostRef.$ancestorComponent$;
-  {
-    safeCall(instance, "componentDidRender", void 0, elm);
-  }
   if (!(hostRef.$flags$ & 64 /* hasLoadedComponent */)) {
     hostRef.$flags$ |= 64 /* hasLoadedComponent */;
     {
@@ -1138,12 +1135,17 @@ var connectedCallback = (elm) => {
   }
 };
 var disconnectInstance = (instance, elm) => {
+  {
+    safeCall(instance, "disconnectedCallback", void 0, elm || instance);
+  }
 };
 var disconnectedCallback = async (elm) => {
   if ((plt.$flags$ & 1 /* isTmpDisconnected */) === 0) {
     const hostRef = getHostRef(elm);
-    if (hostRef == null ? void 0 : hostRef.$lazyInstance$) ; else if (hostRef == null ? void 0 : hostRef.$onReadyPromise$) {
-      hostRef.$onReadyPromise$.then(() => disconnectInstance());
+    if (hostRef == null ? void 0 : hostRef.$lazyInstance$) {
+      disconnectInstance(hostRef.$lazyInstance$, elm);
+    } else if (hostRef == null ? void 0 : hostRef.$onReadyPromise$) {
+      hostRef.$onReadyPromise$.then(() => disconnectInstance(hostRef.$lazyInstance$, elm));
     }
   }
   if (rootAppliedStyles.has(elm)) {

package/dist/esm/loader.js

@@ -1,11 +1,11 @@
-import { b as bootstrapLazy } from './index-a43ff883.js';
-export { s as setNonce } from './index-a43ff883.js';
+import { b as bootstrapLazy } from './index-64bce880.js';
+export { s as setNonce } from './index-64bce880.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([["general-preview-social-posts",[[1,"general-preview-social-posts",{"userId":[513,"user-id"],"session":[513],"postsTitle":[513,"posts-title"],"maxCards":[513,"max-cards"],"language":[513],"datasource":[513],"endpoint":[513],"cmsEndpoint":[513,"cms-endpoint"],"userRoles":[513,"user-roles"],"translationUrl":[513,"translation-url"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"cmsEnv":[513,"cms-env"],"pageName":[513,"page-name"],"posts":[32],"stylingAppends":[32],"isLoading":[32],"isLoggedIn":[32],"dataImages":[32],"gameIds":[32]},null,{"translationUrl":["handleNewTranslations"],"session":["watchSession"]}]]]], options);
+  return bootstrapLazy([["general-preview-social-posts",[[1,"general-preview-social-posts",{"userId":[513,"user-id"],"session":[513],"postsTitle":[513,"posts-title"],"maxCards":[513,"max-cards"],"language":[513],"datasource":[513],"endpoint":[513],"cmsEndpoint":[513,"cms-endpoint"],"userRoles":[513,"user-roles"],"translationUrl":[513,"translation-url"],"mbSource":[1,"mb-source"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"cmsEnv":[513,"cms-env"],"pageName":[513,"page-name"],"posts":[32],"isLoading":[32],"isLoggedIn":[32],"dataImages":[32],"gameIds":[32]},null,{"translationUrl":["handleNewTranslations"],"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingChangeURL"],"session":["watchSession"]}]]]], options);
 };
 
 export { defineCustomElements };

package/dist/general-preview-social-posts/general-preview-social-posts.esm.js

@@ -1 +1 @@
-import{p as e,b as n}from"./p-1544c041.js";export{s as setNonce}from"./p-1544c041.js";import{g as t}from"./p-e1255160.js";(()=>{const s=import.meta.url,n={};return""!==s&&(n.resourcesUrl=new URL(".",s).href),e(n)})().then((async s=>(await t(),n([["p-beeb9ed6",[[1,"general-preview-social-posts",{userId:[513,"user-id"],session:[513],postsTitle:[513,"posts-title"],maxCards:[513,"max-cards"],language:[513],datasource:[513],endpoint:[513],cmsEndpoint:[513,"cms-endpoint"],userRoles:[513,"user-roles"],translationUrl:[513,"translation-url"],clientStyling:[513,"client-styling"],clientStylingUrl:[513,"client-styling-url"],cmsEnv:[513,"cms-env"],pageName:[513,"page-name"],posts:[32],stylingAppends:[32],isLoading:[32],isLoggedIn:[32],dataImages:[32],gameIds:[32]},null,{translationUrl:["handleNewTranslations"],session:["watchSession"]}]]]],s))));
+import{p as e,b as n}from"./p-2ffe61b5.js";export{s as setNonce}from"./p-2ffe61b5.js";import{g as t}from"./p-e1255160.js";(()=>{const s=import.meta.url,n={};return""!==s&&(n.resourcesUrl=new URL(".",s).href),e(n)})().then((async e=>(await t(),n([["p-e0ee3f2f",[[1,"general-preview-social-posts",{userId:[513,"user-id"],session:[513],postsTitle:[513,"posts-title"],maxCards:[513,"max-cards"],language:[513],datasource:[513],endpoint:[513],cmsEndpoint:[513,"cms-endpoint"],userRoles:[513,"user-roles"],translationUrl:[513,"translation-url"],mbSource:[1,"mb-source"],clientStyling:[513,"client-styling"],clientStylingUrl:[513,"client-styling-url"],cmsEnv:[513,"cms-env"],pageName:[513,"page-name"],posts:[32],isLoading:[32],isLoggedIn:[32],dataImages:[32],gameIds:[32]},null,{translationUrl:["handleNewTranslations"],clientStyling:["handleClientStylingChange"],clientStylingUrl:["handleClientStylingChangeURL"],session:["watchSession"]}]]]],e))));

package/dist/general-preview-social-posts/{p-1544c041.js → p-2ffe61b5.js}

@@ -1,2 +1,2 @@
-var t=Object.defineProperty,e=new WeakMap,n=t=>e.get(t),o=(t,n)=>{e.set(n.t=t,n)},l=(t,e)=>e in t,s=(t,e)=>(0,console.error)(t,e),i=new Map,r=new Map,c="slot-fb{display:contents}slot-fb[hidden]{display:none}",u="undefined"!=typeof window?window:{},a=u.document||{head:{}},f={o:0,l:"",jmp:t=>t(),raf:t=>requestAnimationFrame(t),ael:(t,e,n,o)=>t.addEventListener(e,n,o),rel:(t,e,n,o)=>t.removeEventListener(e,n,o),ce:(t,e)=>new CustomEvent(t,e)},h=t=>Promise.resolve(t),d=(()=>{try{return new CSSStyleSheet,"function"==typeof(new CSSStyleSheet).replaceSync}catch(t){}return!1})(),p=!1,m=[],y=[],v=(t,e)=>n=>{t.push(n),p||(p=!0,e&&4&f.o?w($):f.raf($))},b=t=>{for(let e=0;e<t.length;e++)try{t[e](performance.now())}catch(t){s(t)}t.length=0},$=()=>{b(m),b(y),(p=m.length>0)&&f.raf($)},w=t=>h().then(t),S=v(y,!0),g=t=>"object"==(t=typeof t)||"function"===t;function j(t){var e,n,o;return null!=(o=null==(n=null==(e=t.head)?void 0:e.querySelector('meta[name="csp-nonce"]'))?void 0:n.getAttribute("content"))?o:void 0}((e,n)=>{for(var o in n)t(e,o,{get:n[o],enumerable:!0})})({},{err:()=>k,map:()=>E,ok:()=>O,unwrap:()=>M,unwrapErr:()=>x});var O=t=>({isOk:!0,isErr:!1,value:t}),k=t=>({isOk:!1,isErr:!0,value:t});function E(t,e){if(t.isOk){const n=e(t.value);return n instanceof Promise?n.then((t=>O(t))):O(n)}if(t.isErr)return k(t.value);throw"should never get here"}var C,M=t=>{if(t.isOk)return t.value;throw t.value},x=t=>{if(t.isErr)return t.value;throw t.value},P=(t,e,...n)=>{let o=null,l=!1,s=!1;const i=[],r=e=>{for(let n=0;n<e.length;n++)o=e[n],Array.isArray(o)?r(o):null!=o&&"boolean"!=typeof o&&((l="function"!=typeof t&&!g(o))&&(o+=""),l&&s?i[i.length-1].i+=o:i.push(l?R(null,o):o),s=l)};if(r(n),e){const t=e.className||e.class;t&&(e.class="object"!=typeof t?t:Object.keys(t).filter((e=>t[e])).join(" "))}const c=R(t,null);return c.u=e,i.length>0&&(c.h=i),c},R=(t,e)=>({o:0,p:t,i:e,m:null,h:null,u:null}),A={},D=(t,e)=>null==t||g(t)?t:1&e?t+"":t,L=(t,e,o)=>{const l=(t=>n(t).$hostElement$)(t);return{emit:t=>N(l,e,{bubbles:!!(4&o),composed:!!(2&o),cancelable:!!(1&o),detail:t})}},N=(t,e,n)=>{const o=f.ce(e,n);return t.dispatchEvent(o),o},T=new WeakMap,H=t=>"sc-"+t.v,U=(t,e,n,o,s,i)=>{if(n!==o){let r=l(t,e),c=e.toLowerCase();if("class"===e){const e=t.classList,l=F(n);let s=F(o);e.remove(...l.filter((t=>t&&!s.includes(t)))),e.add(...s.filter((t=>t&&!l.includes(t))))}else if("ref"===e)o&&o(t);else if(r||"o"!==e[0]||"n"!==e[1]){const l=g(o);if((r||l&&null!==o)&&!s)try{if(t.tagName.includes("-"))t[e]!==o&&(t[e]=o);else{const l=null==o?"":o;"list"===e?r=!1:null!=n&&t[e]==l||("function"==typeof t.__lookupSetter__(e)?t[e]=l:t.setAttribute(e,l))}}catch(t){}null==o||!1===o?!1===o&&""!==t.getAttribute(e)||t.removeAttribute(e):(!r||4&i||s)&&!l&&t.setAttribute(e,o=!0===o?"":o)}else if(e="-"===e[2]?e.slice(3):l(u,c)?c.slice(2):c[2]+e.slice(3),n||o){const l=e.endsWith(V);e=e.replace(q,""),n&&f.rel(t,e,n,l),o&&f.ael(t,e,o,l)}}},W=/\s/,F=t=>("object"==typeof t&&t&&"baseVal"in t&&(t=t.baseVal),t&&"string"==typeof t?t.split(W):[]),V="Capture",q=RegExp(V+"$"),G=(t,e,n)=>{const o=11===e.m.nodeType&&e.m.host?e.m.host:e.m,l=t&&t.u||{},s=e.u||{};for(const t of _(Object.keys(l)))t in s||U(o,t,l[t],void 0,n,e.o);for(const t of _(Object.keys(s)))U(o,t,l[t],s[t],n,e.o)};function _(t){return t.includes("ref")?[...t.filter((t=>"ref"!==t)),"ref"]:t}var z=!1,B=(t,e,n)=>{const o=e.h[n];let l,s,i=0;if(null!==o.i)l=o.m=a.createTextNode(o.i);else if(l=o.m=a.createElement(o.p),G(null,o,z),o.h)for(i=0;i<o.h.length;++i)s=B(t,o,i),s&&l.appendChild(s);return l["s-hn"]=C,l},I=(t,e,n,o,l,s)=>{let i,r=t;for(r.shadowRoot&&r.tagName===C&&(r=r.shadowRoot);l<=s;++l)o[l]&&(i=B(null,n,l),i&&(o[l].m=i,Y(r,i,e)))},J=(t,e,n)=>{for(let o=e;o<=n;++o){const e=t[o];if(e){const t=e.m;X(e),t&&t.remove()}}},K=(t,e,n=!1)=>t.p===e.p&&(n&&!t.$&&e.$&&(t.$=e.$),!0),Q=(t,e,n=!1)=>{const o=e.m=t.m,l=t.h,s=e.h,i=e.i;null===i?(G(t,e,z),null!==l&&null!==s?((t,e,n,o,l=!1)=>{let s,i=0,r=0,c=e.length-1,u=e[0],a=e[c],f=o.length-1,h=o[0],d=o[f];for(;i<=c&&r<=f;)null==u?u=e[++i]:null==a?a=e[--c]:null==h?h=o[++r]:null==d?d=o[--f]:K(u,h,l)?(Q(u,h,l),u=e[++i],h=o[++r]):K(a,d,l)?(Q(a,d,l),a=e[--c],d=o[--f]):K(u,d,l)?(Q(u,d,l),Y(t,u.m,a.m.nextSibling),u=e[++i],d=o[--f]):K(a,h,l)?(Q(a,h,l),Y(t,a.m,u.m),a=e[--c],h=o[++r]):(s=B(e&&e[r],n,r),h=o[++r],s&&Y(u.m.parentNode,s,u.m));i>c?I(t,null==o[f+1]?null:o[f+1].m,n,o,r,f):r>f&&J(e,i,c)})(o,l,e,s,n):null!==s?(null!==t.i&&(o.textContent=""),I(o,null,e,s,0,s.length-1)):!n&&null!==l&&J(l,0,l.length-1)):t.i!==i&&(o.data=i)},X=t=>{t.u&&t.u.ref&&t.u.ref(null),t.h&&t.h.map(X)},Y=(t,e,n)=>null==t?void 0:t.insertBefore(e,n),Z=(t,e)=>{if(e&&!t.S&&e["s-p"]){const n=e["s-p"].push(new Promise((o=>t.S=()=>{e["s-p"].splice(n-1,1),o()})))}},tt=(t,e)=>{if(t.o|=16,!(4&t.o))return Z(t,t.j),S((()=>et(t,e)));t.o|=512},et=(t,e)=>{const n=t.$hostElement$,o=t.t;if(!o)throw Error(`Can't render component <${n.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 e&&(l=ct(o,"componentWillLoad",void 0,n)),nt(l,(()=>lt(t,o,e)))},nt=(t,e)=>ot(t)?t.then(e).catch((t=>{console.error(t),e()})):e(),ot=t=>t instanceof Promise||t&&t.then&&"function"==typeof t.then,lt=async(t,e,n)=>{var o;const l=t.$hostElement$,s=l["s-rc"];n&&(t=>{const e=t.O,n=t.$hostElement$,o=e.o,l=((t,e)=>{var n;const o=H(e),l=r.get(o);if(t=11===t.nodeType?t:a,l)if("string"==typeof l){let s,i=T.get(t=t.head||t);if(i||T.set(t,i=new Set),!i.has(o)){{s=document.querySelector(`[sty-id="${o}"]`)||a.createElement("style"),s.innerHTML=l;const i=null!=(n=f.k)?n:j(a);if(null!=i&&s.setAttribute("nonce",i),!(1&e.o))if("HEAD"===t.nodeName){const e=t.querySelectorAll("link[rel=preconnect]"),n=e.length>0?e[e.length-1].nextSibling:t.querySelector("style");t.insertBefore(s,(null==n?void 0:n.parentNode)===t?n:null)}else if("host"in t)if(d){const e=new CSSStyleSheet;e.replaceSync(l),t.adoptedStyleSheets=[e,...t.adoptedStyleSheets]}else{const e=t.querySelector("style");e?e.innerHTML=l+e.innerHTML:t.prepend(s)}else t.append(s);1&e.o&&t.insertBefore(s,null)}4&e.o&&(s.innerHTML+=c),i&&i.add(o)}}else t.adoptedStyleSheets.includes(l)||(t.adoptedStyleSheets=[...t.adoptedStyleSheets,l]);return o})(n.shadowRoot?n.shadowRoot:n.getRootNode(),e);(10&o&&2&o||128&o)&&(n["s-sc"]=l,n.classList.add(l+"-h"))})(t);st(t,e,l,n),s&&(s.map((t=>t())),l["s-rc"]=void 0);{const e=null!=(o=l["s-p"])?o:[],n=()=>it(t);0===e.length?n():(Promise.all(e).then(n),t.o|=4,e.length=0)}},st=(t,e,n,o)=>{try{e=e.render(),t.o&=-17,t.o|=2,((t,e,n=!1)=>{const o=t.$hostElement$,l=t.O,s=t.C||R(null,null),i=(t=>t&&t.p===A)(e)?e:P(null,null,e);if(C=o.tagName,l.M&&(i.u=i.u||{},l.M.map((([t,e])=>i.u[e]=o[t]))),n&&i.u)for(const t of Object.keys(i.u))o.hasAttribute(t)&&!["key","ref","style","class"].includes(t)&&(i.u[t]=o[t]);i.p=null,i.o|=4,t.C=i,i.m=s.m=o.shadowRoot||o,Q(s,i,n)})(t,e,o)}catch(e){s(e,t.$hostElement$)}return null},it=t=>{const e=t.$hostElement$,n=t.t,o=t.j;ct(n,"componentDidRender",void 0,e),64&t.o||(t.o|=64,ut(e),ct(n,"componentDidLoad",void 0,e),t.P(e),o||rt()),t.S&&(t.S(),t.S=void 0),512&t.o&&w((()=>tt(t,!1))),t.o&=-517},rt=()=>{w((()=>N(u,"appload",{detail:{namespace:"general-preview-social-posts"}})))},ct=(t,e,n,o)=>{if(t&&t[e])try{return t[e](n)}catch(t){s(t,o)}},ut=t=>t.classList.add("hydrated"),at=(t,e,o,l)=>{const i=n(t);if(!i)throw Error(`Couldn't find host element for "${l.v}" 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 r=i.$hostElement$,c=i.R.get(e),u=i.o,a=i.t;if(o=D(o,l.A[e][0]),(!(8&u)||void 0===c)&&o!==c&&(!Number.isNaN(c)||!Number.isNaN(o))&&(i.R.set(e,o),a)){if(l.D&&128&u){const t=l.D[e];t&&t.map((t=>{try{a[t](o,c,e)}catch(t){s(t,r)}}))}2==(18&u)&&tt(i,!1)}},ft=(t,e,o)=>{var l,s;const i=t.prototype;if(e.A||e.D||t.watchers){t.watchers&&!e.D&&(e.D=t.watchers);const r=Object.entries(null!=(l=e.A)?l:{});if(r.map((([t,[l]])=>{if(31&l||2&o&&32&l){const{get:s,set:r}=Object.getOwnPropertyDescriptor(i,t)||{};s&&(e.A[t][0]|=2048),r&&(e.A[t][0]|=4096),(1&o||!s)&&Object.defineProperty(i,t,{get(){{if(!(2048&e.A[t][0]))return((t,e)=>n(this).R.get(e))(0,t);const o=n(this),l=o?o.t:i;if(!l)return;return l[t]}},configurable:!0,enumerable:!0}),Object.defineProperty(i,t,{set(s){const i=n(this);if(r){const n=32&l?this[t]:i.$hostElement$[t];return void 0===n&&i.R.get(t)?s=i.R.get(t):!i.R.get(t)&&n&&i.R.set(t,n),r.call(this,D(s,l)),void at(this,t,s=32&l?this[t]:i.$hostElement$[t],e)}{if(!(1&o&&4096&e.A[t][0]))return at(this,t,s,e),void(1&o&&!i.t&&i.L.then((()=>{4096&e.A[t][0]&&i.t[t]!==i.R.get(t)&&(i.t[t]=s)})));const n=()=>{const n=i.t[t];!i.R.get(t)&&n&&i.R.set(t,n),i.t[t]=D(s,l),at(this,t,i.t[t],e)};i.t?n():i.L.then((()=>n()))}}})}})),1&o){const o=new Map;i.attributeChangedCallback=function(t,l,s){f.jmp((()=>{var r;const c=o.get(t);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 o=n(this),i=null==o?void 0:o.o;if(i&&!(8&i)&&128&i&&s!==l){const n=o.t,i=null==(r=e.D)?void 0:r[t];null==i||i.forEach((e=>{null!=n[e]&&n[e].call(n,s,l,t)}))}return}}const u=Object.getOwnPropertyDescriptor(i,c);(s=(null!==s||"boolean"!=typeof this[c])&&s)===this[c]||u.get&&!u.set||(this[c]=s)}))},t.observedAttributes=Array.from(new Set([...Object.keys(null!=(s=e.D)?s:{}),...r.filter((([t,e])=>15&e[0])).map((([t,n])=>{var l;const s=n[1]||t;return o.set(s,t),512&n[0]&&(null==(l=e.M)||l.push([t,s])),s}))]))}}return t},ht=(t,e)=>{ct(t,"connectedCallback",void 0,e)},dt=(t,o={})=>{var l;const h=[],p=o.exclude||[],m=u.customElements,y=a.head,v=y.querySelector("meta[charset]"),b=a.createElement("style"),$=[];let w,S=!0;Object.assign(f,o),f.l=new URL(o.resourcesUrl||"./",a.baseURI).href;let g=!1;if(t.map((t=>{t[1].map((o=>{var l;const c={o:o[0],v:o[1],A:o[2],N:o[3]};4&c.o&&(g=!0),c.A=o[2],c.M=[],c.D=null!=(l=o[4])?l:{};const u=c.v,a=class extends HTMLElement{constructor(t){if(super(t),this.hasRegisteredEventListeners=!1,((t,n)=>{const o={o:0,$hostElement$:t,O:n,R:new Map};o.L=new Promise((t=>o.P=t)),t["s-p"]=[],t["s-rc"]=[],e.set(t,o)})(t=this,c),1&c.o)if(t.shadowRoot){if("open"!==t.shadowRoot.mode)throw Error(`Unable to re-use existing shadow root for ${c.v}! Mode is set to ${t.shadowRoot.mode} but Stencil only supports open shadow roots.`)}else t.attachShadow({mode:"open"})}connectedCallback(){this.hasRegisteredEventListeners||(this.hasRegisteredEventListeners=!0),w&&(clearTimeout(w),w=null),S?$.push(this):f.jmp((()=>(t=>{if(!(1&f.o)){const e=n(t),o=e.O,l=()=>{};if(1&e.o)(null==e?void 0:e.t)?ht(e.t,t):(null==e?void 0:e.L)&&e.L.then((()=>ht(e.t,t)));else{e.o|=1;{let n=t;for(;n=n.parentNode||n.host;)if(n["s-p"]){Z(e,e.j=n);break}}o.A&&Object.entries(o.A).map((([e,[n]])=>{if(31&n&&t.hasOwnProperty(e)){const n=t[e];delete t[e],t[e]=n}})),(async(t,e,n)=>{let o;if(!(32&e.o)){if(e.o|=32,n.T){const l=((t,e)=>{const n=t.v.replace(/-/g,"_"),o=t.T;if(!o)return;const l=i.get(o);return l?l[n]:import(`./${o}.entry.js`).then((t=>(i.set(o,t),t[n])),(t=>{s(t,e.$hostElement$)}))
-/*!__STENCIL_STATIC_IMPORT_SWITCH__*/})(n,e);if(l&&"then"in l){const t=()=>{};o=await l,t()}else o=l;if(!o)throw Error(`Constructor for "${n.v}#${e.H}" was not found`);o.isProxied||(n.D=o.watchers,ft(o,n,2),o.isProxied=!0);const r=()=>{};e.o|=8;try{new o(e)}catch(e){s(e,t)}e.o&=-9,e.o|=128,r(),ht(e.t,t)}else o=t.constructor,customElements.whenDefined(t.localName).then((()=>e.o|=128));if(o&&o.style){let t;"string"==typeof o.style&&(t=o.style);const e=H(n);if(!r.has(e)){const o=()=>{};((t,e,n)=>{let o=r.get(t);d&&n?(o=o||new CSSStyleSheet,"string"==typeof o?o=e:o.replaceSync(e)):o=e,r.set(t,o)})(e,t,!!(1&n.o)),o()}}}const l=e.j,c=()=>tt(e,!0);l&&l["s-rc"]?l["s-rc"].push(c):c()})(t,e,o)}l()}})(this)))}disconnectedCallback(){f.jmp((()=>(async t=>{if(!(1&f.o)){const e=n(t);(null==e?void 0:e.t)||(null==e?void 0:e.L)&&e.L.then((()=>{}))}T.has(t)&&T.delete(t),t.shadowRoot&&T.has(t.shadowRoot)&&T.delete(t.shadowRoot)})(this))),f.raf((()=>{var t;const e=n(this),o=$.findIndex((t=>t===this));o>-1&&$.splice(o,1),(null==(t=null==e?void 0:e.C)?void 0:t.m)instanceof Node&&!e.C.m.isConnected&&delete e.C.m}))}componentOnReady(){return n(this).L}};c.T=t[0],p.includes(u)||m.get(u)||(h.push(u),m.define(u,ft(a,c,1)))}))})),h.length>0&&(g&&(b.textContent+=c),b.textContent+=h.sort()+"{visibility:hidden}.hydrated{visibility:inherit}",b.innerHTML.length)){b.setAttribute("data-styles","");const t=null!=(l=f.k)?l:j(a);null!=t&&b.setAttribute("nonce",t),y.insertBefore(b,v?v.nextSibling:y.firstChild)}S=!1,$.length?$.map((t=>t.connectedCallback())):f.jmp((()=>w=setTimeout(rt,30)))},pt=t=>f.k=t;export{dt as b,L as c,P as h,h as p,o as r,pt as s}
+var t=Object.defineProperty,e=new WeakMap,n=t=>e.get(t),o=(t,n)=>{e.set(n.t=t,n)},l=(t,e)=>e in t,s=(t,e)=>(0,console.error)(t,e),i=new Map,r=new Map,c="slot-fb{display:contents}slot-fb[hidden]{display:none}",u="undefined"!=typeof window?window:{},a=u.document||{head:{}},f={o:0,l:"",jmp:t=>t(),raf:t=>requestAnimationFrame(t),ael:(t,e,n,o)=>t.addEventListener(e,n,o),rel:(t,e,n,o)=>t.removeEventListener(e,n,o),ce:(t,e)=>new CustomEvent(t,e)},h=t=>Promise.resolve(t),d=(()=>{try{return new CSSStyleSheet,"function"==typeof(new CSSStyleSheet).replaceSync}catch(t){}return!1})(),p=!1,m=[],y=[],v=(t,e)=>n=>{t.push(n),p||(p=!0,e&&4&f.o?w($):f.raf($))},b=t=>{for(let e=0;e<t.length;e++)try{t[e](performance.now())}catch(t){s(t)}t.length=0},$=()=>{b(m),b(y),(p=m.length>0)&&f.raf($)},w=t=>h().then(t),S=v(y,!0),g=t=>"object"==(t=typeof t)||"function"===t;function j(t){var e,n,o;return null!=(o=null==(n=null==(e=t.head)?void 0:e.querySelector('meta[name="csp-nonce"]'))?void 0:n.getAttribute("content"))?o:void 0}((e,n)=>{for(var o in n)t(e,o,{get:n[o],enumerable:!0})})({},{err:()=>k,map:()=>C,ok:()=>O,unwrap:()=>M,unwrapErr:()=>x});var O=t=>({isOk:!0,isErr:!1,value:t}),k=t=>({isOk:!1,isErr:!0,value:t});function C(t,e){if(t.isOk){const n=e(t.value);return n instanceof Promise?n.then((t=>O(t))):O(n)}if(t.isErr)return k(t.value);throw"should never get here"}var E,M=t=>{if(t.isOk)return t.value;throw t.value},x=t=>{if(t.isErr)return t.value;throw t.value},P=(t,e,...n)=>{let o=null,l=!1,s=!1;const i=[],r=e=>{for(let n=0;n<e.length;n++)o=e[n],Array.isArray(o)?r(o):null!=o&&"boolean"!=typeof o&&((l="function"!=typeof t&&!g(o))&&(o+=""),l&&s?i[i.length-1].i+=o:i.push(l?A(null,o):o),s=l)};if(r(n),e){const t=e.className||e.class;t&&(e.class="object"!=typeof t?t:Object.keys(t).filter((e=>t[e])).join(" "))}const c=A(t,null);return c.u=e,i.length>0&&(c.h=i),c},A=(t,e)=>({o:0,p:t,i:e,m:null,h:null,u:null}),L={},N=(t,e)=>null==t||g(t)?t:1&e?t+"":t,R=(t,e,o)=>{const l=(t=>n(t).$hostElement$)(t);return{emit:t=>T(l,e,{bubbles:!!(4&o),composed:!!(2&o),cancelable:!!(1&o),detail:t})}},T=(t,e,n)=>{const o=f.ce(e,n);return t.dispatchEvent(o),o},D=new WeakMap,H=t=>"sc-"+t.v,U=(t,e,n,o,s,i)=>{if(n!==o){let r=l(t,e),c=e.toLowerCase();if("class"===e){const e=t.classList,l=F(n);let s=F(o);e.remove(...l.filter((t=>t&&!s.includes(t)))),e.add(...s.filter((t=>t&&!l.includes(t))))}else if("ref"===e)o&&o(t);else if(r||"o"!==e[0]||"n"!==e[1]){const l=g(o);if((r||l&&null!==o)&&!s)try{if(t.tagName.includes("-"))t[e]!==o&&(t[e]=o);else{const l=null==o?"":o;"list"===e?r=!1:null!=n&&t[e]==l||("function"==typeof t.__lookupSetter__(e)?t[e]=l:t.setAttribute(e,l))}}catch(t){}null==o||!1===o?!1===o&&""!==t.getAttribute(e)||t.removeAttribute(e):(!r||4&i||s)&&!l&&t.setAttribute(e,o=!0===o?"":o)}else if(e="-"===e[2]?e.slice(3):l(u,c)?c.slice(2):c[2]+e.slice(3),n||o){const l=e.endsWith(V);e=e.replace(q,""),n&&f.rel(t,e,n,l),o&&f.ael(t,e,o,l)}}},W=/\s/,F=t=>("object"==typeof t&&t&&"baseVal"in t&&(t=t.baseVal),t&&"string"==typeof t?t.split(W):[]),V="Capture",q=RegExp(V+"$"),G=(t,e,n)=>{const o=11===e.m.nodeType&&e.m.host?e.m.host:e.m,l=t&&t.u||{},s=e.u||{};for(const t of _(Object.keys(l)))t in s||U(o,t,l[t],void 0,n,e.o);for(const t of _(Object.keys(s)))U(o,t,l[t],s[t],n,e.o)};function _(t){return t.includes("ref")?[...t.filter((t=>"ref"!==t)),"ref"]:t}var z=!1,B=(t,e,n)=>{const o=e.h[n];let l,s,i=0;if(null!==o.i)l=o.m=a.createTextNode(o.i);else if(l=o.m=a.createElement(o.p),G(null,o,z),o.h)for(i=0;i<o.h.length;++i)s=B(t,o,i),s&&l.appendChild(s);return l["s-hn"]=E,l},I=(t,e,n,o,l,s)=>{let i,r=t;for(r.shadowRoot&&r.tagName===E&&(r=r.shadowRoot);l<=s;++l)o[l]&&(i=B(null,n,l),i&&(o[l].m=i,Y(r,i,e)))},J=(t,e,n)=>{for(let o=e;o<=n;++o){const e=t[o];if(e){const t=e.m;X(e),t&&t.remove()}}},K=(t,e,n=!1)=>t.p===e.p&&(n&&!t.$&&e.$&&(t.$=e.$),!0),Q=(t,e,n=!1)=>{const o=e.m=t.m,l=t.h,s=e.h,i=e.i;null===i?(G(t,e,z),null!==l&&null!==s?((t,e,n,o,l=!1)=>{let s,i=0,r=0,c=e.length-1,u=e[0],a=e[c],f=o.length-1,h=o[0],d=o[f];for(;i<=c&&r<=f;)null==u?u=e[++i]:null==a?a=e[--c]:null==h?h=o[++r]:null==d?d=o[--f]:K(u,h,l)?(Q(u,h,l),u=e[++i],h=o[++r]):K(a,d,l)?(Q(a,d,l),a=e[--c],d=o[--f]):K(u,d,l)?(Q(u,d,l),Y(t,u.m,a.m.nextSibling),u=e[++i],d=o[--f]):K(a,h,l)?(Q(a,h,l),Y(t,a.m,u.m),a=e[--c],h=o[++r]):(s=B(e&&e[r],n,r),h=o[++r],s&&Y(u.m.parentNode,s,u.m));i>c?I(t,null==o[f+1]?null:o[f+1].m,n,o,r,f):r>f&&J(e,i,c)})(o,l,e,s,n):null!==s?(null!==t.i&&(o.textContent=""),I(o,null,e,s,0,s.length-1)):!n&&null!==l&&J(l,0,l.length-1)):t.i!==i&&(o.data=i)},X=t=>{t.u&&t.u.ref&&t.u.ref(null),t.h&&t.h.map(X)},Y=(t,e,n)=>null==t?void 0:t.insertBefore(e,n),Z=(t,e)=>{if(e&&!t.S&&e["s-p"]){const n=e["s-p"].push(new Promise((o=>t.S=()=>{e["s-p"].splice(n-1,1),o()})))}},tt=(t,e)=>{if(t.o|=16,!(4&t.o))return Z(t,t.j),S((()=>et(t,e)));t.o|=512},et=(t,e)=>{const n=t.$hostElement$,o=t.t;if(!o)throw Error(`Can't render component <${n.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 e&&(l=ct(o,"componentWillLoad",void 0,n)),nt(l,(()=>lt(t,o,e)))},nt=(t,e)=>ot(t)?t.then(e).catch((t=>{console.error(t),e()})):e(),ot=t=>t instanceof Promise||t&&t.then&&"function"==typeof t.then,lt=async(t,e,n)=>{var o;const l=t.$hostElement$,s=l["s-rc"];n&&(t=>{const e=t.O,n=t.$hostElement$,o=e.o,l=((t,e)=>{var n;const o=H(e),l=r.get(o);if(t=11===t.nodeType?t:a,l)if("string"==typeof l){let s,i=D.get(t=t.head||t);if(i||D.set(t,i=new Set),!i.has(o)){{s=document.querySelector(`[sty-id="${o}"]`)||a.createElement("style"),s.innerHTML=l;const i=null!=(n=f.k)?n:j(a);if(null!=i&&s.setAttribute("nonce",i),!(1&e.o))if("HEAD"===t.nodeName){const e=t.querySelectorAll("link[rel=preconnect]"),n=e.length>0?e[e.length-1].nextSibling:t.querySelector("style");t.insertBefore(s,(null==n?void 0:n.parentNode)===t?n:null)}else if("host"in t)if(d){const e=new CSSStyleSheet;e.replaceSync(l),t.adoptedStyleSheets=[e,...t.adoptedStyleSheets]}else{const e=t.querySelector("style");e?e.innerHTML=l+e.innerHTML:t.prepend(s)}else t.append(s);1&e.o&&t.insertBefore(s,null)}4&e.o&&(s.innerHTML+=c),i&&i.add(o)}}else t.adoptedStyleSheets.includes(l)||(t.adoptedStyleSheets=[...t.adoptedStyleSheets,l]);return o})(n.shadowRoot?n.shadowRoot:n.getRootNode(),e);(10&o&&2&o||128&o)&&(n["s-sc"]=l,n.classList.add(l+"-h"))})(t);st(t,e,l,n),s&&(s.map((t=>t())),l["s-rc"]=void 0);{const e=null!=(o=l["s-p"])?o:[],n=()=>it(t);0===e.length?n():(Promise.all(e).then(n),t.o|=4,e.length=0)}},st=(t,e,n,o)=>{try{e=e.render(),t.o&=-17,t.o|=2,((t,e,n=!1)=>{const o=t.$hostElement$,l=t.O,s=t.C||A(null,null),i=(t=>t&&t.p===L)(e)?e:P(null,null,e);if(E=o.tagName,l.M&&(i.u=i.u||{},l.M.map((([t,e])=>i.u[e]=o[t]))),n&&i.u)for(const t of Object.keys(i.u))o.hasAttribute(t)&&!["key","ref","style","class"].includes(t)&&(i.u[t]=o[t]);i.p=null,i.o|=4,t.C=i,i.m=s.m=o.shadowRoot||o,Q(s,i,n)})(t,e,o)}catch(e){s(e,t.$hostElement$)}return null},it=t=>{const e=t.$hostElement$,n=t.t,o=t.j;64&t.o||(t.o|=64,ut(e),ct(n,"componentDidLoad",void 0,e),t.P(e),o||rt()),t.S&&(t.S(),t.S=void 0),512&t.o&&w((()=>tt(t,!1))),t.o&=-517},rt=()=>{w((()=>T(u,"appload",{detail:{namespace:"general-preview-social-posts"}})))},ct=(t,e,n,o)=>{if(t&&t[e])try{return t[e](n)}catch(t){s(t,o)}},ut=t=>t.classList.add("hydrated"),at=(t,e,o,l)=>{const i=n(t);if(!i)throw Error(`Couldn't find host element for "${l.v}" 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 r=i.$hostElement$,c=i.A.get(e),u=i.o,a=i.t;if(o=N(o,l.L[e][0]),(!(8&u)||void 0===c)&&o!==c&&(!Number.isNaN(c)||!Number.isNaN(o))&&(i.A.set(e,o),a)){if(l.N&&128&u){const t=l.N[e];t&&t.map((t=>{try{a[t](o,c,e)}catch(t){s(t,r)}}))}2==(18&u)&&tt(i,!1)}},ft=(t,e,o)=>{var l,s;const i=t.prototype;if(e.L||e.N||t.watchers){t.watchers&&!e.N&&(e.N=t.watchers);const r=Object.entries(null!=(l=e.L)?l:{});if(r.map((([t,[l]])=>{if(31&l||2&o&&32&l){const{get:s,set:r}=Object.getOwnPropertyDescriptor(i,t)||{};s&&(e.L[t][0]|=2048),r&&(e.L[t][0]|=4096),(1&o||!s)&&Object.defineProperty(i,t,{get(){{if(!(2048&e.L[t][0]))return((t,e)=>n(this).A.get(e))(0,t);const o=n(this),l=o?o.t:i;if(!l)return;return l[t]}},configurable:!0,enumerable:!0}),Object.defineProperty(i,t,{set(s){const i=n(this);if(r){const n=32&l?this[t]:i.$hostElement$[t];return void 0===n&&i.A.get(t)?s=i.A.get(t):!i.A.get(t)&&n&&i.A.set(t,n),r.call(this,N(s,l)),void at(this,t,s=32&l?this[t]:i.$hostElement$[t],e)}{if(!(1&o&&4096&e.L[t][0]))return at(this,t,s,e),void(1&o&&!i.t&&i.R.then((()=>{4096&e.L[t][0]&&i.t[t]!==i.A.get(t)&&(i.t[t]=s)})));const n=()=>{const n=i.t[t];!i.A.get(t)&&n&&i.A.set(t,n),i.t[t]=N(s,l),at(this,t,i.t[t],e)};i.t?n():i.R.then((()=>n()))}}})}})),1&o){const o=new Map;i.attributeChangedCallback=function(t,l,s){f.jmp((()=>{var r;const c=o.get(t);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 o=n(this),i=null==o?void 0:o.o;if(i&&!(8&i)&&128&i&&s!==l){const n=o.t,i=null==(r=e.N)?void 0:r[t];null==i||i.forEach((e=>{null!=n[e]&&n[e].call(n,s,l,t)}))}return}}const u=Object.getOwnPropertyDescriptor(i,c);(s=(null!==s||"boolean"!=typeof this[c])&&s)===this[c]||u.get&&!u.set||(this[c]=s)}))},t.observedAttributes=Array.from(new Set([...Object.keys(null!=(s=e.N)?s:{}),...r.filter((([t,e])=>15&e[0])).map((([t,n])=>{var l;const s=n[1]||t;return o.set(s,t),512&n[0]&&(null==(l=e.M)||l.push([t,s])),s}))]))}}return t},ht=(t,e)=>{ct(t,"connectedCallback",void 0,e)},dt=(t,e)=>{ct(t,"disconnectedCallback",void 0,e||t)},pt=(t,o={})=>{var l;const h=[],p=o.exclude||[],m=u.customElements,y=a.head,v=y.querySelector("meta[charset]"),b=a.createElement("style"),$=[];let w,S=!0;Object.assign(f,o),f.l=new URL(o.resourcesUrl||"./",a.baseURI).href;let g=!1;if(t.map((t=>{t[1].map((o=>{var l;const c={o:o[0],v:o[1],L:o[2],T:o[3]};4&c.o&&(g=!0),c.L=o[2],c.M=[],c.N=null!=(l=o[4])?l:{};const u=c.v,a=class extends HTMLElement{constructor(t){if(super(t),this.hasRegisteredEventListeners=!1,((t,n)=>{const o={o:0,$hostElement$:t,O:n,A:new Map};o.R=new Promise((t=>o.P=t)),t["s-p"]=[],t["s-rc"]=[],e.set(t,o)})(t=this,c),1&c.o)if(t.shadowRoot){if("open"!==t.shadowRoot.mode)throw Error(`Unable to re-use existing shadow root for ${c.v}! Mode is set to ${t.shadowRoot.mode} but Stencil only supports open shadow roots.`)}else t.attachShadow({mode:"open"})}connectedCallback(){this.hasRegisteredEventListeners||(this.hasRegisteredEventListeners=!0),w&&(clearTimeout(w),w=null),S?$.push(this):f.jmp((()=>(t=>{if(!(1&f.o)){const e=n(t),o=e.O,l=()=>{};if(1&e.o)(null==e?void 0:e.t)?ht(e.t,t):(null==e?void 0:e.R)&&e.R.then((()=>ht(e.t,t)));else{e.o|=1;{let n=t;for(;n=n.parentNode||n.host;)if(n["s-p"]){Z(e,e.j=n);break}}o.L&&Object.entries(o.L).map((([e,[n]])=>{if(31&n&&t.hasOwnProperty(e)){const n=t[e];delete t[e],t[e]=n}})),(async(t,e,n)=>{let o;if(!(32&e.o)){if(e.o|=32,n.D){const l=((t,e)=>{const n=t.v.replace(/-/g,"_"),o=t.D;if(!o)return;const l=i.get(o);return l?l[n]:import(`./${o}.entry.js`).then((t=>(i.set(o,t),t[n])),(t=>{s(t,e.$hostElement$)}))
+/*!__STENCIL_STATIC_IMPORT_SWITCH__*/})(n,e);if(l&&"then"in l){const t=()=>{};o=await l,t()}else o=l;if(!o)throw Error(`Constructor for "${n.v}#${e.H}" was not found`);o.isProxied||(n.N=o.watchers,ft(o,n,2),o.isProxied=!0);const r=()=>{};e.o|=8;try{new o(e)}catch(e){s(e,t)}e.o&=-9,e.o|=128,r(),ht(e.t,t)}else o=t.constructor,customElements.whenDefined(t.localName).then((()=>e.o|=128));if(o&&o.style){let t;"string"==typeof o.style&&(t=o.style);const e=H(n);if(!r.has(e)){const o=()=>{};((t,e,n)=>{let o=r.get(t);d&&n?(o=o||new CSSStyleSheet,"string"==typeof o?o=e:o.replaceSync(e)):o=e,r.set(t,o)})(e,t,!!(1&n.o)),o()}}}const l=e.j,c=()=>tt(e,!0);l&&l["s-rc"]?l["s-rc"].push(c):c()})(t,e,o)}l()}})(this)))}disconnectedCallback(){f.jmp((()=>(async t=>{if(!(1&f.o)){const e=n(t);(null==e?void 0:e.t)?dt(e.t,t):(null==e?void 0:e.R)&&e.R.then((()=>dt(e.t,t)))}D.has(t)&&D.delete(t),t.shadowRoot&&D.has(t.shadowRoot)&&D.delete(t.shadowRoot)})(this))),f.raf((()=>{var t;const e=n(this),o=$.findIndex((t=>t===this));o>-1&&$.splice(o,1),(null==(t=null==e?void 0:e.C)?void 0:t.m)instanceof Node&&!e.C.m.isConnected&&delete e.C.m}))}componentOnReady(){return n(this).R}};c.D=t[0],p.includes(u)||m.get(u)||(h.push(u),m.define(u,ft(a,c,1)))}))})),h.length>0&&(g&&(b.textContent+=c),b.textContent+=h.sort()+"{visibility:hidden}.hydrated{visibility:inherit}",b.innerHTML.length)){b.setAttribute("data-styles","");const t=null!=(l=f.k)?l:j(a);null!=t&&b.setAttribute("nonce",t),y.insertBefore(b,v?v.nextSibling:y.firstChild)}S=!1,$.length?$.map((t=>t.connectedCallback())):f.jmp((()=>w=setTimeout(rt,30)))},mt=t=>f.k=t;export{pt as b,R as c,P as h,h as p,o as r,mt as s}

package/dist/general-preview-social-posts/p-e0ee3f2f.entry.js

@@ -0,0 +1 @@
+import{r as i,c as t,h as n}from"./p-2ffe61b5.js";let e={en:{loading:"loading...",viewAll:"View All ...",moreInfo:"MORE INFO",playNow:"PLAY NOW"},de:{loading:"loading...",viewAll:"View All ...",moreInfo:"MORE INFO",playNow:"PLAY NOW"},ro:{loading:"loading...",viewAll:"View All ...",moreInfo:"MORE INFO",playNow:"PLAY NOW"},fr:{loading:"loading...",viewAll:"View All ...",moreInfo:"MORE INFO",playNow:"PLAY NOW"},ar:{loading:"loading...",viewAll:"View All ...",moreInfo:"MORE INFO",playNow:"PLAY NOW"},hr:{loading:"Učitavanje…",viewAll:"Pogledaj sve …",moreInfo:"VIŠE INFORMACIJA",playNow:"IGRAJ SADA"}};const o=i=>new Promise((t=>{fetch(i).then((i=>i.json())).then((i=>{Object.keys(i).forEach((t=>{e[t]||(e[t]={});for(let n in i[t])e[t][n]=i[t][n]})),t(!0)}))})),s=(i,t)=>e[void 0!==t&&t in e?t:"en"][i];function l(i,t){if(i){const n=document.createElement("style");n.innerHTML=t,i.appendChild(n)}}function a(i,t){const n=new URL(t);fetch(n.href).then((i=>i.text())).then((t=>{const n=document.createElement("style");n.innerHTML=t,i&&i.appendChild(n)})).catch((i=>{console.error("There was an error while trying to load client styling from URL",i)}))}const r=class{constructor(n){i(this,n),this.moreInfo=t(this,"moreInfo",7),this.playNow=t(this,"playNow",7),this.viewAll=t(this,"viewAll",7),this.userId="",this.session="",this.postsTitle="",this.maxCards="",this.language="en",this.datasource="",this.endpoint="",this.cmsEndpoint="",this.userRoles="",this.translationUrl="",this.clientStyling="",this.clientStylingUrl="",this.cmsEnv="stage",this.pageName="casino",this.posts=[],this.isLoading=!1,this.isLoggedIn=!1,this.dataImages=[],this.gameIds="",this.platform=(()=>{const i=(()=>{let i=window.navigator.userAgent;return i.toLowerCase().match(/android/i)?"Android":i.toLocaleLowerCase().match(/customnative:ios/)?"nativeIOS":i.toLowerCase().match(/iphone/i)?"iPhone":i.toLowerCase().match(/ipad|ipod/i)?"iPad":"PC"})();if(i)return"PC"===i?"dk":"nativeIOS"==i?"ios":"mtWeb"})()}handleNewTranslations(){this.isLoading=!0,o(this.translationUrl).then((()=>{this.isLoading=!1}))}handleClientStylingChange(i,t){i!=t&&l(this.stylingContainer,this.clientStyling)}handleClientStylingChangeURL(i,t){i!=t&&this.clientStylingUrl&&a(this.stylingContainer,this.clientStylingUrl)}async componentWillLoad(){this.translationUrl.length>2&&await o(this.translationUrl)}watchSession(i,t){i!==t&&(this.isLoggedIn=""!==i)}connectedCallback(){this.session&&(this.isLoggedIn=!0)}getDataImage(i){try{let t=new URL(`${this.endpoint}/v2/casino/groups/${this.datasource}`);t.searchParams.append("language",this.language),t.searchParams.append("expand","games"),t.searchParams.append("fields","games(id,thumbnail,launchUrl)"),t.searchParams.append("filter",i),t.searchParams.append("device",this.platform),fetch(t.href,{method:"GET","Content-Type":"application/json"}).then((i=>{if(200===i.status)return i.json();throw new Error("HTTP status "+i.status)})).then((i=>{i.items.forEach((i=>{i.games.items.forEach((i=>{let{id:t,launchUrl:n,thumbnail:e}=i;this.dataImages=[{id:t,launchUrl:n,thumbnail:e}];let o=this.posts.findIndex((i=>i.gameId===t));-1!==o&&(this.posts[o].images=this.dataImages)}))}))})).catch((i=>{console.error(i)}))}catch(i){console.error("Error fetching verification types:",i)}}async componentDidLoad(){this.stylingContainer&&(null!=window.emMessageBus?function(i,t){if(window.emMessageBus){const n=document.createElement("style");window.emMessageBus.subscribe(t,(t=>{n.innerHTML=t,i&&i.appendChild(n)}))}}(this.stylingContainer,`${this.mbSource}.Style`):(this.clientStyling&&l(this.stylingContainer,this.clientStyling),this.clientStylingUrl&&a(this.stylingContainer,this.clientStylingUrl)));try{let i=new URL(`${this.cmsEndpoint}/${this.language}/content/social-posts`);i.searchParams.append("device",this.platform),i.searchParams.append("page",this.pageName),i.searchParams.append("language",this.language),i.searchParams.append("userRoles",this.userRoles),i.searchParams.append("env",this.cmsEnv),fetch(i.href,{method:"GET","Content-Type":"application/json"}).then((i=>{if(200===i.status)return i.json();throw new Error("HTTP status "+i.status)})).then((i=>{i.forEach((i=>{var t;const n=i.slug,e=i.id,{gameId:o,title:s,description:l,subtitle:a}=null!==(t=i.previewCard)&&void 0!==t?t:{};o&&(this.gameIds+=`games(id=${o}),`),this.posts.push({postId:e,gameId:o,title:s,description:l,subtitle:a,slug:n})})),this.gameIds.length>0&&(this.gameIds=this.gameIds.slice(0,-1),this.gameIds="$or("+this.gameIds+")"),this.getDataImage(this.gameIds)})).catch((i=>{console.error(i)}))}catch(i){console.error("Error fetching verification types:",i)}}disconnectedCallback(){this.stylingSubscription&&this.stylingSubscription.unsubscribe()}hasUndefinedValues(i){return Object.values(i).some((i=>void 0===i))}render(){return this.isLoading?n("div",null,n("p",null,s("loading",this.language))):n("div",{class:"ModalContainer",ref:i=>this.stylingContainer=i},n("div",{class:"sliderWidget"},n("div",{class:"headerHontainer"},this.postsTitle&&n("h2",null,this.postsTitle),n("div",{class:"viewAllButton",onClick:()=>this.onViewAllClick()},s("viewAll",this.language))),n("div",{class:"postSlider"},this.posts.filter((i=>!this.hasUndefinedValues(i))).slice(0,+(this.maxCards||this.posts.length)).map((i=>{var t,e,o,l;return n("div",{class:"postCard"},n("div",{class:"imageTitle"},(null==i?void 0:i.images)?n("a",{href:(null===(e=null===(t=i.images)||void 0===t?void 0:t[0])||void 0===e?void 0:e.launchUrl)||"",target:"_blank",rel:"noopener noreferrer"},n("img",{src:(null===(l=null===(o=i.images)||void 0===o?void 0:o[0])||void 0===l?void 0:l.thumbnail)||"",alt:"Game Image"})):null,n("div",{class:"titleSubtitle"},i.title&&n("h3",null,i.title),i.subtitle&&n("p",{innerHTML:i.subtitle}))),i.description&&n("div",{class:"Description"},n("p",{innerHTML:i.description})),n("div",{class:"buttons"},n("button",{class:"moreInfoButton",onClick:()=>this.onMoreInfoClick(i.gameId,i.postId,i.title,i.slug)},s("moreInfo",this.language)),this.isLoggedIn&&i.gameId&&n("button",{class:"playNowButton",onClick:()=>this.onPlayNowClick(i.gameId)},s("playNow",this.language))))})))))}onViewAllClick(){this.viewAll.emit(),window.postMessage({type:"viewAllSocialPosts"},window.location.href)}onMoreInfoClick(i,t,n,e){this.moreInfo.emit(),window.postMessage({type:"moreInfoSocialPost",gameId:i,postId:t,postTitle:n,slug:e},window.location.href)}onPlayNowClick(i){this.playNow.emit(i),window.postMessage({type:"playNowSocialPost",gameId:i},window.location.href)}static get watchers(){return{translationUrl:["handleNewTranslations"],clientStyling:["handleClientStylingChange"],clientStylingUrl:["handleClientStylingChangeURL"],session:["watchSession"]}}};r.style=':host {\n  font-family: "Roboto", sans-serif;\n  display: block;\n}\n\n.ModalContainer {\n  container-type: inline-size;\n}\n\n.sliderWidget {\n  display: block;\n  max-width: 780px;\n  margin: 0 auto;\n  padding: 16px;\n  max-height: 500px;\n}\n.sliderWidget h2 {\n  font-size: 20px;\n}\n.sliderWidget .headerHontainer {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n}\n.sliderWidget .headerHontainer .viewAllButton {\n  cursor: pointer;\n  font-weight: bold;\n  color: rgb(142, 142, 142);\n}\n.sliderWidget .postSlider {\n  display: flex;\n  overflow-x: auto;\n  scroll-snap-type: x mandatory;\n  gap: 24px;\n}\n.sliderWidget .postSlider .postCard {\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  scroll-snap-align: start;\n  padding: 20px;\n  border-radius: 6px;\n  min-width: 360px;\n  background-color: rgb(244, 244, 244);\n}\n.sliderWidget .postSlider .postCard .Description {\n  display: -webkit-box;\n  -webkit-line-clamp: 5;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n  margin-bottom: 14px;\n}\n.sliderWidget .postSlider .postCard .imageTitle {\n  display: flex;\n  justify-content: flex-start;\n  gap: 20px;\n}\n.sliderWidget .postSlider .postCard .imageTitle img {\n  height: 120px;\n  width: 120px;\n  border-radius: 6px;\n}\n.sliderWidget .postSlider .postCard .imageTitle .titleSubtitle {\n  display: flex;\n  flex-direction: column;\n}\n.sliderWidget .postSlider .postCard .buttons {\n  display: flex;\n  justify-content: center;\n  gap: 12px;\n}\n.sliderWidget .postSlider .postCard .buttons .moreInfoButton, .sliderWidget .postSlider .postCard .buttons .playNowButton {\n  width: 172px;\n  display: block;\n  padding: 8px 16px;\n  border: 3px solid #63B250;\n  border-radius: 6px;\n  cursor: pointer;\n  font-weight: bold;\n}\n.sliderWidget .postSlider .postCard .buttons .moreInfoButton {\n  background-color: rgb(244, 244, 244);\n  color: #63B250;\n}\n.sliderWidget .postSlider .postCard .buttons .playNowButton {\n  background-color: #63B250;\n  color: #fff;\n}\n\nh3, h4 {\n  font-size: 18px;\n}\n\np {\n  font-size: 14px;\n  color: rgb(91, 91, 91);\n}\n\n@container (max-width: 480px) {\n  .sliderWidget h2 {\n    font-size: 18px;\n  }\n  .sliderWidget .postSlider .postCard {\n    min-width: 250px;\n  }\n  h3, h4 {\n    font-size: 16px;\n  }\n  p {\n    font-size: 12px;\n  }\n}';export{r as general_preview_social_posts}

package/dist/types/components/general-preview-social-posts/general-preview-social-posts.d.ts

@@ -41,8 +41,12 @@ export declare class GeneralPreviewSocialPosts {
      */
     translationUrl: string;
     /**
-   * Client custom styling via string
-   */
+     * Client custom styling via streamStyling
+     */
+    mbSource: string;
+    /**
+     * Client custom styling via string
+     */
     clientStyling: string;
     /**
      * Client custom styling via url content
@@ -57,25 +61,25 @@ export declare class GeneralPreviewSocialPosts {
      */
     pageName: string;
     posts: Array<any>;
-    private stylingAppends;
     private isLoading;
     private isLoggedIn;
     dataImages: Array<any>;
     gameIds: string;
     private platform;
     private stylingContainer;
+    private stylingSubscription;
     moreInfo: EventEmitter;
     playNow: EventEmitter;
     viewAll: EventEmitter;
     handleNewTranslations(): void;
+    handleClientStylingChange(newValue: any, oldValue: any): void;
+    handleClientStylingChangeURL(newValue: any, oldValue: any): void;
     componentWillLoad(): Promise<void>;
     watchSession(newValue: string, oldValue: string): void;
     connectedCallback(): void;
-    componentDidRender(): void;
-    setClientStyling: () => void;
-    setClientStylingURL: () => void;
     getDataImage(ids: string): void;
     componentDidLoad(): Promise<void>;
+    disconnectedCallback(): void;
     hasUndefinedValues(obj: object): boolean;
     render(): any;
     onViewAllClick(): void;

package/dist/types/components.d.ts

@@ -39,6 +39,10 @@ export namespace Components {
           * The max cards displayed
          */
         "maxCards": string;
+        /**
+          * Client custom styling via streamStyling
+         */
+        "mbSource": string;
         /**
           * The page parameter for the cms call
          */
@@ -127,6 +131,10 @@ declare namespace LocalJSX {
           * The max cards displayed
          */
         "maxCards"?: string;
+        /**
+          * Client custom styling via streamStyling
+         */
+        "mbSource"?: string;
         "onMoreInfo"?: (event: GeneralPreviewSocialPostsCustomEvent<any>) => void;
         "onPlayNow"?: (event: GeneralPreviewSocialPostsCustomEvent<any>) => void;
         "onViewAll"?: (event: GeneralPreviewSocialPostsCustomEvent<any>) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@everymatrix/general-preview-social-posts",
-  "version": "1.54.12",
+  "version": "1.56.0",
   "main": "./dist/index.cjs.js",
   "module": "./dist/index.js",
   "es2015": "./dist/esm/index.mjs",

package/dist/general-preview-social-posts/p-beeb9ed6.entry.js

@@ -1 +0,0 @@
-import{r as i,c as t,h as n}from"./p-1544c041.js";let e={en:{loading:"loading...",viewAll:"View All ...",moreInfo:"MORE INFO",playNow:"PLAY NOW"},de:{loading:"loading...",viewAll:"View All ...",moreInfo:"MORE INFO",playNow:"PLAY NOW"},ro:{loading:"loading...",viewAll:"View All ...",moreInfo:"MORE INFO",playNow:"PLAY NOW"},fr:{loading:"loading...",viewAll:"View All ...",moreInfo:"MORE INFO",playNow:"PLAY NOW"},ar:{loading:"loading...",viewAll:"View All ...",moreInfo:"MORE INFO",playNow:"PLAY NOW"},hr:{loading:"Učitavanje…",viewAll:"Pogledaj sve …",moreInfo:"VIŠE INFORMACIJA",playNow:"IGRAJ SADA"}};const s=i=>new Promise((t=>{fetch(i).then((i=>i.json())).then((i=>{Object.keys(i).forEach((t=>{e[t]||(e[t]={});for(let n in i[t])e[t][n]=i[t][n]})),t(!0)}))})),o=(i,t)=>e[void 0!==t&&t in e?t:"en"][i],l=class{constructor(n){i(this,n),this.moreInfo=t(this,"moreInfo",7),this.playNow=t(this,"playNow",7),this.viewAll=t(this,"viewAll",7),this.userId="",this.session="",this.postsTitle="",this.maxCards="",this.language="en",this.datasource="",this.endpoint="",this.cmsEndpoint="",this.userRoles="",this.translationUrl="",this.clientStyling="",this.clientStylingUrl="",this.cmsEnv="stage",this.pageName="casino",this.posts=[],this.stylingAppends=!1,this.isLoading=!1,this.isLoggedIn=!1,this.dataImages=[],this.gameIds="",this.platform=(()=>{const i=(()=>{let i=window.navigator.userAgent;return i.toLowerCase().match(/android/i)?"Android":i.toLocaleLowerCase().match(/customnative:ios/)?"nativeIOS":i.toLowerCase().match(/iphone/i)?"iPhone":i.toLowerCase().match(/ipad|ipod/i)?"iPad":"PC"})();if(i)return"PC"===i?"dk":"nativeIOS"==i?"ios":"mtWeb"})(),this.setClientStyling=()=>{let i=document.createElement("style");i.innerHTML=this.clientStyling,this.stylingContainer.prepend(i)},this.setClientStylingURL=()=>{let i=new URL(this.clientStylingUrl),t=document.createElement("style");fetch(i.href).then((i=>i.text())).then((i=>{t.innerHTML=i,setTimeout((()=>{this.stylingContainer.prepend(t)}),1)})).catch((i=>{console.log("error ",i)}))}}handleNewTranslations(){this.isLoading=!0,s(this.translationUrl).then((()=>{this.isLoading=!1}))}async componentWillLoad(){this.translationUrl.length>2&&await s(this.translationUrl)}watchSession(i,t){i!==t&&(this.isLoggedIn=""!==i)}connectedCallback(){this.session&&(this.isLoggedIn=!0)}componentDidRender(){!this.stylingAppends&&this.stylingContainer&&(this.clientStyling&&this.setClientStyling(),this.clientStylingUrl&&this.setClientStylingURL(),this.stylingAppends=!0)}getDataImage(i){try{let t=new URL(`${this.endpoint}/v2/casino/groups/${this.datasource}`);t.searchParams.append("language",this.language),t.searchParams.append("expand","games"),t.searchParams.append("fields","games(id,thumbnail,launchUrl)"),t.searchParams.append("filter",i),t.searchParams.append("device",this.platform),fetch(t.href,{method:"GET","Content-Type":"application/json"}).then((i=>{if(200===i.status)return i.json();throw new Error("HTTP status "+i.status)})).then((i=>{i.items.forEach((i=>{i.games.items.forEach((i=>{let{id:t,launchUrl:n,thumbnail:e}=i;this.dataImages=[{id:t,launchUrl:n,thumbnail:e}];let s=this.posts.findIndex((i=>i.gameId===t));-1!==s&&(this.posts[s].images=this.dataImages)}))}))})).catch((i=>{console.error(i)}))}catch(i){console.error("Error fetching verification types:",i)}}async componentDidLoad(){try{let i=new URL(`${this.cmsEndpoint}/${this.language}/content/social-posts`);i.searchParams.append("device",this.platform),i.searchParams.append("page",this.pageName),i.searchParams.append("language",this.language),i.searchParams.append("userRoles",this.userRoles),i.searchParams.append("env",this.cmsEnv),fetch(i.href,{method:"GET","Content-Type":"application/json"}).then((i=>{if(200===i.status)return i.json();throw new Error("HTTP status "+i.status)})).then((i=>{i.forEach((i=>{var t;const n=i.slug,e=i.id,{gameId:s,title:o,description:l,subtitle:r}=null!==(t=i.previewCard)&&void 0!==t?t:{};s&&(this.gameIds+=`games(id=${s}),`),this.posts.push({postId:e,gameId:s,title:o,description:l,subtitle:r,slug:n})})),this.gameIds.length>0&&(this.gameIds=this.gameIds.slice(0,-1),this.gameIds="$or("+this.gameIds+")"),this.getDataImage(this.gameIds)})).catch((i=>{console.error(i)}))}catch(i){console.error("Error fetching verification types:",i)}}hasUndefinedValues(i){return Object.values(i).some((i=>void 0===i))}render(){return this.isLoading?n("div",null,n("p",null,o("loading",this.language))):n("div",{class:"ModalContainer",ref:i=>this.stylingContainer=i},n("div",{class:"sliderWidget"},n("div",{class:"headerHontainer"},this.postsTitle&&n("h2",null,this.postsTitle),n("div",{class:"viewAllButton",onClick:()=>this.onViewAllClick()},o("viewAll",this.language))),n("div",{class:"postSlider"},this.posts.filter((i=>!this.hasUndefinedValues(i))).slice(0,+(this.maxCards||this.posts.length)).map((i=>{var t,e,s,l;return n("div",{class:"postCard"},n("div",{class:"imageTitle"},(null==i?void 0:i.images)?n("a",{href:(null===(e=null===(t=i.images)||void 0===t?void 0:t[0])||void 0===e?void 0:e.launchUrl)||"",target:"_blank",rel:"noopener noreferrer"},n("img",{src:(null===(l=null===(s=i.images)||void 0===s?void 0:s[0])||void 0===l?void 0:l.thumbnail)||"",alt:"Game Image"})):null,n("div",{class:"titleSubtitle"},i.title&&n("h3",null,i.title),i.subtitle&&n("p",{innerHTML:i.subtitle}))),i.description&&n("div",{class:"Description"},n("p",{innerHTML:i.description})),n("div",{class:"buttons"},n("button",{class:"moreInfoButton",onClick:()=>this.onMoreInfoClick(i.gameId,i.postId,i.title,i.slug)},o("moreInfo",this.language)),this.isLoggedIn&&i.gameId&&n("button",{class:"playNowButton",onClick:()=>this.onPlayNowClick(i.gameId)},o("playNow",this.language))))})))))}onViewAllClick(){this.viewAll.emit(),window.postMessage({type:"viewAllSocialPosts"},window.location.href)}onMoreInfoClick(i,t,n,e){this.moreInfo.emit(),window.postMessage({type:"moreInfoSocialPost",gameId:i,postId:t,postTitle:n,slug:e},window.location.href)}onPlayNowClick(i){this.playNow.emit(i),window.postMessage({type:"playNowSocialPost",gameId:i},window.location.href)}static get watchers(){return{translationUrl:["handleNewTranslations"],session:["watchSession"]}}};l.style=':host {\n  font-family: "Roboto", sans-serif;\n  display: block;\n}\n\n.ModalContainer {\n  container-type: inline-size;\n}\n\n.sliderWidget {\n  display: block;\n  max-width: 780px;\n  margin: 0 auto;\n  padding: 16px;\n  max-height: 500px;\n}\n.sliderWidget h2 {\n  font-size: 20px;\n}\n.sliderWidget .headerHontainer {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n}\n.sliderWidget .headerHontainer .viewAllButton {\n  cursor: pointer;\n  font-weight: bold;\n  color: rgb(142, 142, 142);\n}\n.sliderWidget .postSlider {\n  display: flex;\n  overflow-x: auto;\n  scroll-snap-type: x mandatory;\n  gap: 24px;\n}\n.sliderWidget .postSlider .postCard {\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  scroll-snap-align: start;\n  padding: 20px;\n  border-radius: 6px;\n  min-width: 360px;\n  background-color: rgb(244, 244, 244);\n}\n.sliderWidget .postSlider .postCard .Description {\n  display: -webkit-box;\n  -webkit-line-clamp: 5;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n  margin-bottom: 14px;\n}\n.sliderWidget .postSlider .postCard .imageTitle {\n  display: flex;\n  justify-content: flex-start;\n  gap: 20px;\n}\n.sliderWidget .postSlider .postCard .imageTitle img {\n  height: 120px;\n  width: 120px;\n  border-radius: 6px;\n}\n.sliderWidget .postSlider .postCard .imageTitle .titleSubtitle {\n  display: flex;\n  flex-direction: column;\n}\n.sliderWidget .postSlider .postCard .buttons {\n  display: flex;\n  justify-content: center;\n  gap: 12px;\n}\n.sliderWidget .postSlider .postCard .buttons .moreInfoButton, .sliderWidget .postSlider .postCard .buttons .playNowButton {\n  width: 172px;\n  display: block;\n  padding: 8px 16px;\n  border: 3px solid #63B250;\n  border-radius: 6px;\n  cursor: pointer;\n  font-weight: bold;\n}\n.sliderWidget .postSlider .postCard .buttons .moreInfoButton {\n  background-color: rgb(244, 244, 244);\n  color: #63B250;\n}\n.sliderWidget .postSlider .postCard .buttons .playNowButton {\n  background-color: #63B250;\n  color: #fff;\n}\n\nh3, h4 {\n  font-size: 18px;\n}\n\np {\n  font-size: 14px;\n  color: rgb(91, 91, 91);\n}\n\n@container (max-width: 480px) {\n  .sliderWidget h2 {\n    font-size: 18px;\n  }\n  .sliderWidget .postSlider .postCard {\n    min-width: 250px;\n  }\n  h3, h4 {\n    font-size: 16px;\n  }\n  p {\n    font-size: 12px;\n  }\n}';export{l as general_preview_social_posts}