@everymatrix/general-preview-social-posts 1.60.2 → 1.61.0

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-e03f08c0.js');
+const index = require('./index-4a52799d.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"],"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);
+  return index.bootstrapLazy([["general-preview-social-posts_2.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"]}],[0,"ui-image",{"src":[1],"width":[1],"height":[1],"alt":[1],"imgClass":[1,"img-class"],"styles":[8],"detectDistance":[1,"detect-distance"],"imgLoaded":[32],"shouldLoad":[32]},null,{"src":["handleSrc"]}]]]], options);
 });
 
 exports.setNonce = index.setNonce;

package/dist/cjs/{general-preview-social-posts.cjs.entry.js → general-preview-social-posts_2.cjs.entry.js}

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-e03f08c0.js');
+const index = require('./index-4a52799d.js');
 
 const DEFAULT_LANGUAGE = 'en';
 let TRANSLATIONS = {
@@ -162,7 +162,7 @@ function setStreamStyling(stylingContainer, domain, subscription) {
   }
 }
 
-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 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 ui-image {\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;
 
 const GeneralPreviewSocialPosts = class {
@@ -341,7 +341,7 @@ const GeneralPreviewSocialPosts = class {
                 .slice(0, +(this.maxCards || this.posts.length))
                 .map((post) => {
                 var _a, _b, _c, _d;
-                return (index.h("div", { class: "postCard" }, index.h("div", { class: "imageTitle" }, (post === null || post === void 0 ? void 0 : post.images) ? (index.h("a", { href: ((_b = (_a = post.images) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.launchUrl) || '', target: "_blank", rel: "noopener noreferrer" }, index.h("img", { src: ((_d = (_c = post.images) === null || _c === void 0 ? void 0 : _c[0]) === null || _d === void 0 ? void 0 : _d.thumbnail) || '', alt: "Game Image" })))
+                return (index.h("div", { class: "postCard" }, index.h("div", { class: "imageTitle" }, (post === null || post === void 0 ? void 0 : post.images) ? (index.h("a", { href: ((_b = (_a = post.images) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.launchUrl) || '', target: "_blank", rel: "noopener noreferrer" }, index.h("ui-image", { src: ((_d = (_c = post.images) === null || _c === void 0 ? void 0 : _c[0]) === null || _d === void 0 ? void 0 : _d.thumbnail) || '', alt: "Game Image" })))
                     : null, index.h("div", { class: "titleSubtitle" }, post.title && index.h("h3", null, post.title), post.subtitle && index.h("p", { innerHTML: post.subtitle }))), post.description &&
                     index.h("div", { class: "Description" }, index.h("p", { innerHTML: post.description })), index.h("div", { class: "buttons" }, index.h("button", { class: "moreInfoButton", onClick: () => this.onMoreInfoClick(post.gameId, post.postId, post.title, post.slug) }, translate('moreInfo', this.language)), this.isLoggedIn && post.gameId && index.h("button", { class: "playNowButton", onClick: () => this.onPlayNowClick(post.gameId) }, translate('playNow', this.language)))));
             })))));
@@ -368,4 +368,69 @@ const GeneralPreviewSocialPosts = class {
 };
 GeneralPreviewSocialPosts.style = GeneralPreviewSocialPostsStyle0;
 
+const uiImageCss = ":host{display:block}.Hidden{opacity:0;transition:opacity 0.5s ease-in-out}.Visible{opacity:1;transition:opacity 0.5s ease-in-out}";
+const UiImageStyle0 = uiImageCss;
+
+const UiImage = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.src = undefined;
+        this.width = undefined;
+        this.height = undefined;
+        this.alt = undefined;
+        this.imgClass = '';
+        this.styles = undefined;
+        this.detectDistance = '200px';
+        this.imgLoaded = false;
+        this.shouldLoad = false;
+    }
+    handleSrc() {
+        if (!this.shouldLoad) {
+            return;
+        }
+        const tempImage = new Image();
+        tempImage.src = this.src;
+        tempImage.onload = () => {
+            if (this.image) {
+                this.image.src = this.src;
+                this.imgLoaded = true;
+                this.el.dispatchEvent(new CustomEvent('load', { bubbles: true }));
+            }
+        };
+    }
+    componentDidLoad() {
+        if ('IntersectionObserver' in window) {
+            this.el.__uxComponent = this;
+            if (!window.EMUxObserver) {
+                window.EMUxObserver = new IntersectionObserver((entries) => {
+                    entries.forEach(entry => {
+                        if (entry.isIntersecting) {
+                            const comp = entry.target.__uxComponent;
+                            if (comp) {
+                                comp.shouldLoad = true;
+                                comp.handleSrc();
+                            }
+                            window.EMUxObserver.unobserve(entry.target);
+                        }
+                    });
+                }, { rootMargin: this.detectDistance });
+            }
+            window.EMUxObserver.observe(this.el);
+        }
+        else {
+            this.shouldLoad = true;
+            this.handleSrc();
+        }
+    }
+    render() {
+        return (index.h("img", { key: '2bb4dc391fc2f753514103e91c0abf065de3236a', ref: el => (this.image = el), style: this.styles, class: `${this.imgClass} ${this.imgLoaded ? 'Visible' : 'Hidden'}`, alt: this.alt, width: this.width, height: this.height, loading: "lazy" }));
+    }
+    get el() { return index.getElement(this); }
+    static get watchers() { return {
+        "src": ["handleSrc"]
+    }; }
+};
+UiImage.style = UiImageStyle0;
+
 exports.general_preview_social_posts = GeneralPreviewSocialPosts;
+exports.ui_image = UiImage;

package/dist/cjs/{index-e03f08c0.js → index-4a52799d.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: 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, 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, 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: true, vdomListener: true, vdomPropOrAttr: true, vdomRef: true, vdomRender: true, vdomStyle: true, vdomText: true, vdomXlink: false, watchCallback: true };
 
 /*
  Stencil Client Platform v4.19.2 | MIT Licensed | https://stenciljs.com
@@ -71,10 +71,10 @@ var loadModule = (cmpMeta, hostRef, hmrVersionId) => {
           }
           switch(bundleId) {
               
-                case 'general-preview-social-posts.cjs':
+                case 'general-preview-social-posts_2.cjs':
                     return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
                         /* webpackMode: "lazy" */
-                        './general-preview-social-posts.cjs.entry.js')); }).then(processMod, consoleError);
+                        './general-preview-social-posts_2.cjs.entry.js')); }).then(processMod, consoleError);
           }
       }
   return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
@@ -231,6 +231,7 @@ var uniqueTime = (key, measureText) => {
 };
 var h = (nodeName, vnodeData, ...children) => {
   let child = null;
+  let key = null;
   let simple = false;
   let lastSimple = false;
   const vNodeChildren = [];
@@ -254,6 +255,9 @@ var h = (nodeName, vnodeData, ...children) => {
   };
   walk(children);
   if (vnodeData) {
+    if (vnodeData.key) {
+      key = vnodeData.key;
+    }
     {
       const classData = vnodeData.className || vnodeData.class;
       if (classData) {
@@ -266,6 +270,9 @@ var h = (nodeName, vnodeData, ...children) => {
   if (vNodeChildren.length > 0) {
     vnode.$children$ = vNodeChildren;
   }
+  {
+    vnode.$key$ = key;
+  }
   return vnode;
 };
 var newVNode = (tag, text) => {
@@ -279,6 +286,9 @@ var newVNode = (tag, text) => {
   {
     vnode.$attrs$ = null;
   }
+  {
+    vnode.$key$ = null;
+  }
   return vnode;
 };
 var Host = {};
@@ -389,7 +399,28 @@ var setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags) => {
       const newClasses = parseClassList(newValue);
       classList.remove(...oldClasses.filter((c) => c && !newClasses.includes(c)));
       classList.add(...newClasses.filter((c) => c && !oldClasses.includes(c)));
-    } else if (memberName === "ref") {
+    } else if (memberName === "style") {
+      {
+        for (const prop in oldValue) {
+          if (!newValue || newValue[prop] == null) {
+            if (prop.includes("-")) {
+              elm.style.removeProperty(prop);
+            } else {
+              elm.style[prop] = "";
+            }
+          }
+        }
+      }
+      for (const prop in newValue) {
+        if (!oldValue || newValue[prop] !== oldValue[prop]) {
+          if (prop.includes("-")) {
+            elm.style.setProperty(prop, newValue[prop]);
+          } else {
+            elm.style[prop] = newValue[prop];
+          }
+        }
+      }
+    } else if (memberName === "key") ; else if (memberName === "ref") {
       if (newValue) {
         newValue(elm);
       }
@@ -539,6 +570,8 @@ var removeVnodes = (vnodes, startIdx, endIdx) => {
 var updateChildren = (parentElm, oldCh, newVNode2, newCh, isInitialRender = false) => {
   let oldStartIdx = 0;
   let newStartIdx = 0;
+  let idxInOld = 0;
+  let i2 = 0;
   let oldEndIdx = oldCh.length - 1;
   let oldStartVnode = oldCh[0];
   let oldEndVnode = oldCh[oldEndIdx];
@@ -546,6 +579,7 @@ var updateChildren = (parentElm, oldCh, newVNode2, newCh, isInitialRender = fals
   let newStartVnode = newCh[0];
   let newEndVnode = newCh[newEndIdx];
   let node;
+  let elmToMove;
   while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {
     if (oldStartVnode == null) {
       oldStartVnode = oldCh[++oldStartIdx];
@@ -574,7 +608,26 @@ var updateChildren = (parentElm, oldCh, newVNode2, newCh, isInitialRender = fals
       oldEndVnode = oldCh[--oldEndIdx];
       newStartVnode = newCh[++newStartIdx];
     } else {
+      idxInOld = -1;
       {
+        for (i2 = oldStartIdx; i2 <= oldEndIdx; ++i2) {
+          if (oldCh[i2] && oldCh[i2].$key$ !== null && oldCh[i2].$key$ === newStartVnode.$key$) {
+            idxInOld = i2;
+            break;
+          }
+        }
+      }
+      if (idxInOld >= 0) {
+        elmToMove = oldCh[idxInOld];
+        if (elmToMove.$tag$ !== newStartVnode.$tag$) {
+          node = createElm(oldCh && oldCh[newStartIdx], newVNode2, idxInOld);
+        } else {
+          patch(elmToMove, newStartVnode, isInitialRender);
+          oldCh[idxInOld] = void 0;
+          node = elmToMove.$elm$;
+        }
+        newStartVnode = newCh[++newStartIdx];
+      } else {
         node = createElm(oldCh && oldCh[newStartIdx], newVNode2, newStartIdx);
         newStartVnode = newCh[++newStartIdx];
       }
@@ -600,6 +653,9 @@ var updateChildren = (parentElm, oldCh, newVNode2, newCh, isInitialRender = fals
 };
 var isSameVnode = (leftVNode, rightVNode, isInitialRender = false) => {
   if (leftVNode.$tag$ === rightVNode.$tag$) {
+    if (!isInitialRender) {
+      return leftVNode.$key$ === rightVNode.$key$;
+    }
     return true;
   }
   return false;
@@ -1179,6 +1235,7 @@ var setNonce = (nonce) => plt.$nonce$ = nonce;
 
 exports.bootstrapLazy = bootstrapLazy;
 exports.createEvent = createEvent;
+exports.getElement = getElement;
 exports.h = h;
 exports.promiseResolve = promiseResolve;
 exports.registerInstance = registerInstance;

package/dist/cjs/loader.cjs.js

@@ -2,13 +2,13 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-e03f08c0.js');
+const index = require('./index-4a52799d.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"],"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);
+  return index.bootstrapLazy([["general-preview-social-posts_2.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"]}],[0,"ui-image",{"src":[1],"width":[1],"height":[1],"alt":[1],"imgClass":[1,"img-class"],"styles":[8],"detectDistance":[1,"detect-distance"],"imgLoaded":[32],"shouldLoad":[32]},null,{"src":["handleSrc"]}]]]], options);
 };
 
 exports.setNonce = index.setNonce;

package/dist/collection/collection-manifest.json

@@ -7,6 +7,13 @@
     "version": "4.19.2",
     "typescriptVersion": "5.4.5"
   },
-  "collections": [],
+  "collections": [
+    {
+      "name": "@everymatrix/ui-image",
+      "tags": [
+        "ui-image"
+      ]
+    }
+  ],
   "bundles": []
 }

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

@@ -55,7 +55,7 @@
   justify-content: flex-start;
   gap: 20px;
 }
-.sliderWidget .postSlider .postCard .imageTitle img {
+.sliderWidget .postSlider .postCard .imageTitle ui-image {
   height: 120px;
   width: 120px;
   border-radius: 6px;

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 "../../../../../ui-image/dist/types/index";
 import { setClientStyling, setClientStylingURL, setStreamStyling } from "../../../../../../../../libs/common/src/styling/index";
 export class GeneralPreviewSocialPosts {
     constructor() {
@@ -174,7 +175,7 @@ export class GeneralPreviewSocialPosts {
                 .slice(0, +(this.maxCards || this.posts.length))
                 .map((post) => {
                 var _a, _b, _c, _d;
-                return (h("div", { class: "postCard" }, h("div", { class: "imageTitle" }, (post === null || post === void 0 ? void 0 : post.images) ? (h("a", { href: ((_b = (_a = post.images) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.launchUrl) || '', target: "_blank", rel: "noopener noreferrer" }, h("img", { src: ((_d = (_c = post.images) === null || _c === void 0 ? void 0 : _c[0]) === null || _d === void 0 ? void 0 : _d.thumbnail) || '', alt: "Game Image" })))
+                return (h("div", { class: "postCard" }, h("div", { class: "imageTitle" }, (post === null || post === void 0 ? void 0 : post.images) ? (h("a", { href: ((_b = (_a = post.images) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.launchUrl) || '', target: "_blank", rel: "noopener noreferrer" }, h("ui-image", { src: ((_d = (_c = post.images) === null || _c === void 0 ? void 0 : _c[0]) === null || _d === void 0 ? void 0 : _d.thumbnail) || '', alt: "Game Image" })))
                     : null, h("div", { class: "titleSubtitle" }, post.title && h("h3", null, post.title), post.subtitle && h("p", { innerHTML: post.subtitle }))), post.description &&
                     h("div", { class: "Description" }, h("p", { innerHTML: post.description })), h("div", { class: "buttons" }, h("button", { class: "moreInfoButton", onClick: () => this.onMoreInfoClick(post.gameId, post.postId, post.title, post.slug) }, translate('moreInfo', this.language)), this.isLoggedIn && post.gameId && h("button", { class: "playNowButton", onClick: () => this.onPlayNowClick(post.gameId) }, translate('playNow', this.language)))));
             })))));

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

@@ -1,5 +1,5 @@
-import { p as promiseResolve, b as bootstrapLazy } from './index-d101355b.js';
-export { s as setNonce } from './index-d101355b.js';
+import { p as promiseResolve, b as bootstrapLazy } from './index-2ce51c27.js';
+export { s as setNonce } from './index-2ce51c27.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"],"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);
+  return bootstrapLazy([["general-preview-social-posts_2",[[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"]}],[0,"ui-image",{"src":[1],"width":[1],"height":[1],"alt":[1],"imgClass":[1,"img-class"],"styles":[8],"detectDistance":[1,"detect-distance"],"imgLoaded":[32],"shouldLoad":[32]},null,{"src":["handleSrc"]}]]]], options);
 });

package/dist/esm/{general-preview-social-posts.entry.js → general-preview-social-posts_2.entry.js}

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h } from './index-d101355b.js';
+import { r as registerInstance, c as createEvent, h, g as getElement } from './index-2ce51c27.js';
 
 const DEFAULT_LANGUAGE = 'en';
 let TRANSLATIONS = {
@@ -158,7 +158,7 @@ function setStreamStyling(stylingContainer, domain, subscription) {
   }
 }
 
-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 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 ui-image {\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;
 
 const GeneralPreviewSocialPosts = class {
@@ -337,7 +337,7 @@ const GeneralPreviewSocialPosts = class {
                 .slice(0, +(this.maxCards || this.posts.length))
                 .map((post) => {
                 var _a, _b, _c, _d;
-                return (h("div", { class: "postCard" }, h("div", { class: "imageTitle" }, (post === null || post === void 0 ? void 0 : post.images) ? (h("a", { href: ((_b = (_a = post.images) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.launchUrl) || '', target: "_blank", rel: "noopener noreferrer" }, h("img", { src: ((_d = (_c = post.images) === null || _c === void 0 ? void 0 : _c[0]) === null || _d === void 0 ? void 0 : _d.thumbnail) || '', alt: "Game Image" })))
+                return (h("div", { class: "postCard" }, h("div", { class: "imageTitle" }, (post === null || post === void 0 ? void 0 : post.images) ? (h("a", { href: ((_b = (_a = post.images) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.launchUrl) || '', target: "_blank", rel: "noopener noreferrer" }, h("ui-image", { src: ((_d = (_c = post.images) === null || _c === void 0 ? void 0 : _c[0]) === null || _d === void 0 ? void 0 : _d.thumbnail) || '', alt: "Game Image" })))
                     : null, h("div", { class: "titleSubtitle" }, post.title && h("h3", null, post.title), post.subtitle && h("p", { innerHTML: post.subtitle }))), post.description &&
                     h("div", { class: "Description" }, h("p", { innerHTML: post.description })), h("div", { class: "buttons" }, h("button", { class: "moreInfoButton", onClick: () => this.onMoreInfoClick(post.gameId, post.postId, post.title, post.slug) }, translate('moreInfo', this.language)), this.isLoggedIn && post.gameId && h("button", { class: "playNowButton", onClick: () => this.onPlayNowClick(post.gameId) }, translate('playNow', this.language)))));
             })))));
@@ -364,4 +364,68 @@ const GeneralPreviewSocialPosts = class {
 };
 GeneralPreviewSocialPosts.style = GeneralPreviewSocialPostsStyle0;
 
-export { GeneralPreviewSocialPosts as general_preview_social_posts };
+const uiImageCss = ":host{display:block}.Hidden{opacity:0;transition:opacity 0.5s ease-in-out}.Visible{opacity:1;transition:opacity 0.5s ease-in-out}";
+const UiImageStyle0 = uiImageCss;
+
+const UiImage = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.src = undefined;
+        this.width = undefined;
+        this.height = undefined;
+        this.alt = undefined;
+        this.imgClass = '';
+        this.styles = undefined;
+        this.detectDistance = '200px';
+        this.imgLoaded = false;
+        this.shouldLoad = false;
+    }
+    handleSrc() {
+        if (!this.shouldLoad) {
+            return;
+        }
+        const tempImage = new Image();
+        tempImage.src = this.src;
+        tempImage.onload = () => {
+            if (this.image) {
+                this.image.src = this.src;
+                this.imgLoaded = true;
+                this.el.dispatchEvent(new CustomEvent('load', { bubbles: true }));
+            }
+        };
+    }
+    componentDidLoad() {
+        if ('IntersectionObserver' in window) {
+            this.el.__uxComponent = this;
+            if (!window.EMUxObserver) {
+                window.EMUxObserver = new IntersectionObserver((entries) => {
+                    entries.forEach(entry => {
+                        if (entry.isIntersecting) {
+                            const comp = entry.target.__uxComponent;
+                            if (comp) {
+                                comp.shouldLoad = true;
+                                comp.handleSrc();
+                            }
+                            window.EMUxObserver.unobserve(entry.target);
+                        }
+                    });
+                }, { rootMargin: this.detectDistance });
+            }
+            window.EMUxObserver.observe(this.el);
+        }
+        else {
+            this.shouldLoad = true;
+            this.handleSrc();
+        }
+    }
+    render() {
+        return (h("img", { key: '2bb4dc391fc2f753514103e91c0abf065de3236a', ref: el => (this.image = el), style: this.styles, class: `${this.imgClass} ${this.imgLoaded ? 'Visible' : 'Hidden'}`, alt: this.alt, width: this.width, height: this.height, loading: "lazy" }));
+    }
+    get el() { return getElement(this); }
+    static get watchers() { return {
+        "src": ["handleSrc"]
+    }; }
+};
+UiImage.style = UiImageStyle0;
+
+export { GeneralPreviewSocialPosts as general_preview_social_posts, UiImage as ui_image };

package/dist/esm/{index-d101355b.js → index-2ce51c27.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: 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, 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, 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: true, vdomListener: true, vdomPropOrAttr: true, vdomRef: true, vdomRender: true, vdomStyle: true, vdomText: true, vdomXlink: false, watchCallback: true };
 
 /*
  Stencil Client Platform v4.19.2 | MIT Licensed | https://stenciljs.com
@@ -49,10 +49,10 @@ var loadModule = (cmpMeta, hostRef, hmrVersionId) => {
           }
           switch(bundleId) {
               
-                case 'general-preview-social-posts':
+                case 'general-preview-social-posts_2':
                     return import(
                       /* webpackMode: "lazy" */
-                      './general-preview-social-posts.entry.js').then(processMod, consoleError);
+                      './general-preview-social-posts_2.entry.js').then(processMod, consoleError);
           }
       }
   return import(
@@ -209,6 +209,7 @@ var uniqueTime = (key, measureText) => {
 };
 var h = (nodeName, vnodeData, ...children) => {
   let child = null;
+  let key = null;
   let simple = false;
   let lastSimple = false;
   const vNodeChildren = [];
@@ -232,6 +233,9 @@ var h = (nodeName, vnodeData, ...children) => {
   };
   walk(children);
   if (vnodeData) {
+    if (vnodeData.key) {
+      key = vnodeData.key;
+    }
     {
       const classData = vnodeData.className || vnodeData.class;
       if (classData) {
@@ -244,6 +248,9 @@ var h = (nodeName, vnodeData, ...children) => {
   if (vNodeChildren.length > 0) {
     vnode.$children$ = vNodeChildren;
   }
+  {
+    vnode.$key$ = key;
+  }
   return vnode;
 };
 var newVNode = (tag, text) => {
@@ -257,6 +264,9 @@ var newVNode = (tag, text) => {
   {
     vnode.$attrs$ = null;
   }
+  {
+    vnode.$key$ = null;
+  }
   return vnode;
 };
 var Host = {};
@@ -367,7 +377,28 @@ var setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags) => {
       const newClasses = parseClassList(newValue);
       classList.remove(...oldClasses.filter((c) => c && !newClasses.includes(c)));
       classList.add(...newClasses.filter((c) => c && !oldClasses.includes(c)));
-    } else if (memberName === "ref") {
+    } else if (memberName === "style") {
+      {
+        for (const prop in oldValue) {
+          if (!newValue || newValue[prop] == null) {
+            if (prop.includes("-")) {
+              elm.style.removeProperty(prop);
+            } else {
+              elm.style[prop] = "";
+            }
+          }
+        }
+      }
+      for (const prop in newValue) {
+        if (!oldValue || newValue[prop] !== oldValue[prop]) {
+          if (prop.includes("-")) {
+            elm.style.setProperty(prop, newValue[prop]);
+          } else {
+            elm.style[prop] = newValue[prop];
+          }
+        }
+      }
+    } else if (memberName === "key") ; else if (memberName === "ref") {
       if (newValue) {
         newValue(elm);
       }
@@ -517,6 +548,8 @@ var removeVnodes = (vnodes, startIdx, endIdx) => {
 var updateChildren = (parentElm, oldCh, newVNode2, newCh, isInitialRender = false) => {
   let oldStartIdx = 0;
   let newStartIdx = 0;
+  let idxInOld = 0;
+  let i2 = 0;
   let oldEndIdx = oldCh.length - 1;
   let oldStartVnode = oldCh[0];
   let oldEndVnode = oldCh[oldEndIdx];
@@ -524,6 +557,7 @@ var updateChildren = (parentElm, oldCh, newVNode2, newCh, isInitialRender = fals
   let newStartVnode = newCh[0];
   let newEndVnode = newCh[newEndIdx];
   let node;
+  let elmToMove;
   while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {
     if (oldStartVnode == null) {
       oldStartVnode = oldCh[++oldStartIdx];
@@ -552,7 +586,26 @@ var updateChildren = (parentElm, oldCh, newVNode2, newCh, isInitialRender = fals
       oldEndVnode = oldCh[--oldEndIdx];
       newStartVnode = newCh[++newStartIdx];
     } else {
+      idxInOld = -1;
       {
+        for (i2 = oldStartIdx; i2 <= oldEndIdx; ++i2) {
+          if (oldCh[i2] && oldCh[i2].$key$ !== null && oldCh[i2].$key$ === newStartVnode.$key$) {
+            idxInOld = i2;
+            break;
+          }
+        }
+      }
+      if (idxInOld >= 0) {
+        elmToMove = oldCh[idxInOld];
+        if (elmToMove.$tag$ !== newStartVnode.$tag$) {
+          node = createElm(oldCh && oldCh[newStartIdx], newVNode2, idxInOld);
+        } else {
+          patch(elmToMove, newStartVnode, isInitialRender);
+          oldCh[idxInOld] = void 0;
+          node = elmToMove.$elm$;
+        }
+        newStartVnode = newCh[++newStartIdx];
+      } else {
         node = createElm(oldCh && oldCh[newStartIdx], newVNode2, newStartIdx);
         newStartVnode = newCh[++newStartIdx];
       }
@@ -578,6 +631,9 @@ var updateChildren = (parentElm, oldCh, newVNode2, newCh, isInitialRender = fals
 };
 var isSameVnode = (leftVNode, rightVNode, isInitialRender = false) => {
   if (leftVNode.$tag$ === rightVNode.$tag$) {
+    if (!isInitialRender) {
+      return leftVNode.$key$ === rightVNode.$key$;
+    }
     return true;
   }
   return false;
@@ -1155,4 +1211,4 @@ var bootstrapLazy = (lazyBundles, options = {}) => {
 // src/runtime/nonce.ts
 var setNonce = (nonce) => plt.$nonce$ = nonce;
 
-export { bootstrapLazy as b, createEvent as c, h, promiseResolve as p, registerInstance as r, setNonce as s };
+export { bootstrapLazy as b, createEvent as c, getElement as g, h, promiseResolve as p, registerInstance as r, setNonce as s };

package/dist/esm/loader.js

@@ -1,11 +1,11 @@
-import { b as bootstrapLazy } from './index-d101355b.js';
-export { s as setNonce } from './index-d101355b.js';
+import { b as bootstrapLazy } from './index-2ce51c27.js';
+export { s as setNonce } from './index-2ce51c27.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"],"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);
+  return bootstrapLazy([["general-preview-social-posts_2",[[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"]}],[0,"ui-image",{"src":[1],"width":[1],"height":[1],"alt":[1],"imgClass":[1,"img-class"],"styles":[8],"detectDistance":[1,"detect-distance"],"imgLoaded":[32],"shouldLoad":[32]},null,{"src":["handleSrc"]}]]]], 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-fe0126be.js";export{s as setNonce}from"./p-fe0126be.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-636881b7",[[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))));
+import{p as e,b as n}from"./p-0bfe4eb3.js";export{s as setNonce}from"./p-0bfe4eb3.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-96c595fe",[[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"]}],[0,"ui-image",{src:[1],width:[1],height:[1],alt:[1],imgClass:[1,"img-class"],styles:[8],detectDistance:[1,"detect-distance"],imgLoaded:[32],shouldLoad:[32]},null,{src:["handleSrc"]}]]]],e))));

package/dist/general-preview-social-posts/p-0bfe4eb3.js

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

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

@@ -0,0 +1 @@
+import{r as i,c as t,h as n,g as e}from"./p-0bfe4eb3.js";let s={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=>{s[t]||(s[t]={});for(let n in i[t])s[t][n]=i[t][n]})),t(!0)}))})),l=(i,t)=>s[void 0!==t&&t in s?t:"en"][i];function a(i,t){if(i){const n=document.createElement("style");n.innerHTML=t,i.appendChild(n)}}function r(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 d=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.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.userId="",this.session="",this.postsTitle="",this.maxCards="",this.language="en",this.datasource="",this.endpoint="",this.cmsEndpoint="",this.userRoles="",this.translationUrl="",this.mbSource=void 0,this.clientStyling="",this.clientStylingUrl="",this.cmsEnv="stage",this.pageName="casino",this.posts=[],this.isLoading=!1,this.isLoggedIn=!1,this.dataImages=[],this.gameIds=""}handleNewTranslations(){this.isLoading=!0,o(this.translationUrl).then((()=>{this.isLoading=!1}))}handleClientStylingChange(i,t){i!=t&&a(this.stylingContainer,this.clientStyling)}handleClientStylingChangeURL(i,t){i!=t&&this.clientStylingUrl&&r(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 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(){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&&a(this.stylingContainer,this.clientStyling),this.clientStylingUrl&&r(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:s,title:o,description:l,subtitle:a}=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: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,l("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()},l("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,o;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("ui-image",{src:(null===(o=null===(s=i.images)||void 0===s?void 0:s[0])||void 0===o?void 0:o.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)},l("moreInfo",this.language)),this.isLoggedIn&&i.gameId&&n("button",{class:"playNowButton",onClick:()=>this.onPlayNowClick(i.gameId)},l("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"]}}};d.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 ui-image {\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 h=class{constructor(t){i(this,t),this.src=void 0,this.width=void 0,this.height=void 0,this.alt=void 0,this.imgClass="",this.styles=void 0,this.detectDistance="200px",this.imgLoaded=!1,this.shouldLoad=!1}handleSrc(){if(!this.shouldLoad)return;const i=new Image;i.src=this.src,i.onload=()=>{this.image&&(this.image.src=this.src,this.imgLoaded=!0,this.el.dispatchEvent(new CustomEvent("load",{bubbles:!0})))}}componentDidLoad(){"IntersectionObserver"in window?(this.el.__uxComponent=this,window.EMUxObserver||(window.EMUxObserver=new IntersectionObserver((i=>{i.forEach((i=>{if(i.isIntersecting){const t=i.target.__uxComponent;t&&(t.shouldLoad=!0,t.handleSrc()),window.EMUxObserver.unobserve(i.target)}}))}),{rootMargin:this.detectDistance})),window.EMUxObserver.observe(this.el)):(this.shouldLoad=!0,this.handleSrc())}render(){return n("img",{key:"2bb4dc391fc2f753514103e91c0abf065de3236a",ref:i=>this.image=i,style:this.styles,class:`${this.imgClass} ${this.imgLoaded?"Visible":"Hidden"}`,alt:this.alt,width:this.width,height:this.height,loading:"lazy"})}get el(){return e(this)}static get watchers(){return{src:["handleSrc"]}}};h.style=":host{display:block}.Hidden{opacity:0;transition:opacity 0.5s ease-in-out}.Visible{opacity:1;transition:opacity 0.5s ease-in-out}";export{d as general_preview_social_posts,h as ui_image}

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

@@ -1,4 +1,5 @@
 import { EventEmitter } from '../../stencil-public-runtime';
+import "../../../../../../dist/packages/stencil/ui-image/dist/types/index";
 export declare class GeneralPreviewSocialPosts {
     /**
        * The userId

package/package.json

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

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

@@ -1 +0,0 @@
-import{r as i,c as t,h as n}from"./p-fe0126be.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.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.userId="",this.session="",this.postsTitle="",this.maxCards="",this.language="en",this.datasource="",this.endpoint="",this.cmsEndpoint="",this.userRoles="",this.translationUrl="",this.mbSource=void 0,this.clientStyling="",this.clientStylingUrl="",this.cmsEnv="stage",this.pageName="casino",this.posts=[],this.isLoading=!1,this.isLoggedIn=!1,this.dataImages=[],this.gameIds=""}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/general-preview-social-posts/p-fe0126be.js

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