@everymatrix/blog-articles-grid - npm Package Compare versions

Comparing version 1.36.0 to 1.36.1

dist/blog-articles-grid/blog-articles-grid.esm.js

@@ -1,1 +0,1 @@
-import{p as e,b as t}from"./p-13642dde.js";(()=>{const t=import.meta.url,n={};return""!==t&&(n.resourcesUrl=new URL(".",t).href),e(n)})().then((e=>t([["p-2f321159",[[1,"blog-articles-grid",{cmsEndpoint:[513,"cms-endpoint"],language:[513],userRoles:[513,"user-roles"],cmsEnv:[513,"cms-env"],clientStyling:[513,"client-styling"],clientStylingUrl:[513,"client-styling-url"],showPublishingDate:[516,"show-publishing-date"],showImage:[516,"show-image"],showTitle:[516,"show-title"],showContent:[516,"show-content"],showButton:[516,"show-button"],usePostmessage:[516,"use-postmessage"],postMessageEvent:[513,"post-message-event"],blogsLimit:[513,"blogs-limit"],paginationActive:[516,"pagination-active"],arrowsActive:[516,"arrows-active"],secondaryArrowsActive:[516,"secondary-arrows-active"],numberedNavActive:[516,"numbered-nav-active"],intlDateTimeFormat:[513,"intl-date-time-format"],page:[513],paginationBlogList:[32],currentPage:[32],hasErrors:[32],limitStylingAppends:[32],isLoading:[32],bannerMatrixReady:[32],nextPage:[32],previousPage:[32],device:[32],blogData:[32],totalBlogs:[32]},[[8,"BannerMatrixReady","handleBannerReady"],[0,"hpPageChange","hpPageChange"]]],[1,"helper-pagination",{nextPage:[1537,"next-page"],prevPage:[1537,"prev-page"],offset:[1538],limit:[1538],total:[1538],language:[1537],clientStyling:[1537,"client-styling"],clientStylingUrlContent:[1537,"client-styling-url-content"],arrowsActive:[1540,"arrows-active"],secondaryArrowsActive:[1540,"secondary-arrows-active"],numberedNavActive:[1540,"numbered-nav-active"],offsetInt:[32],lastPage:[32],previousPage:[32],limitInt:[32],totalInt:[32],pagesArray:[32],endInt:[32],limitStylingAppends:[32]}]]]],e)));
+import{p as e,b as t}from"./p-cb7acb6b.js";(()=>{const t=import.meta.url,a={};return""!==t&&(a.resourcesUrl=new URL(".",t).href),e(a)})().then((e=>t([["p-aa7d680a",[[1,"blog-articles-grid",{cmsEndpoint:[513,"cms-endpoint"],language:[513],userRoles:[513,"user-roles"],cmsEnv:[513,"cms-env"],clientStyling:[513,"client-styling"],clientStylingUrl:[513,"client-styling-url"],showPublishingDate:[516,"show-publishing-date"],showImage:[516,"show-image"],showTitle:[516,"show-title"],showContent:[516,"show-content"],showButton:[516,"show-button"],usePostmessage:[516,"use-postmessage"],postMessageEvent:[513,"post-message-event"],blogsLimit:[513,"blogs-limit"],paginationActive:[516,"pagination-active"],arrowsActive:[516,"arrows-active"],secondaryArrowsActive:[516,"secondary-arrows-active"],numberedNavActive:[516,"numbered-nav-active"],intlDateTimeFormat:[513,"intl-date-time-format"],page:[513],paginationBlogList:[32],currentPage:[32],hasErrors:[32],isLoading:[32],bannerMatrixReady:[32],nextPage:[32],previousPage:[32],device:[32],blogData:[32],totalBlogs:[32]},[[8,"BannerMatrixReady","handleBannerReady"],[0,"hpPageChange","hpPageChange"]]],[1,"helper-pagination",{nextPage:[1537,"next-page"],prevPage:[1537,"prev-page"],offset:[1538],limit:[1538],total:[1538],language:[1537],clientStyling:[1537,"client-styling"],clientStylingUrlContent:[1537,"client-styling-url-content"],arrowsActive:[1540,"arrows-active"],secondaryArrowsActive:[1540,"secondary-arrows-active"],numberedNavActive:[1540,"numbered-nav-active"],offsetInt:[32],lastPage:[32],previousPage:[32],limitInt:[32],totalInt:[32],pagesArray:[32],endInt:[32],limitStylingAppends:[32]}]]]],e)));

dist/cjs/blog-articles-grid_2.cjs.entry.js

@@ -5,3 +5,3 @@ 'use strict';
 
-const index = require('./index-a88a1a42.js');
+const index = require('./index-159efcd2.js');
 
@@ -167,3 +167,2 @@ const DEFAULT_LANGUAGE$1 = 'en';
     this.hasErrors = false;
-    this.limitStylingAppends = false;
     this.isLoading = true;
@@ -175,2 +174,3 @@ this.bannerMatrixReady = false;
     this.totalBlogs = 0;
+    this.clientStylingContent = '';
     this.defaultStyling = `
@@ -226,19 +226,7 @@ div#PaginationContainer {
     this.setClientStyling = () => {
-      let sheet = document.createElement('style');
-      sheet.innerHTML = this.clientStyling;
+      this.clientStylingContent += this.clientStyling;
+      const sheet = document.createElement('style');
+      sheet.innerHTML = this.clientStylingContent;
       this.stylingContainer.prepend(sheet);
     };
-    this.setClientStylingURL = () => {
-      let url = new URL(this.clientStylingUrl);
-      let cssFile = document.createElement('style');
-      fetch(url.href)
-        .then((res) => res.text())
-        .then((data) => {
-        cssFile.innerHTML = data;
-        setTimeout(() => { this.stylingContainer.prepend(cssFile); }, 1);
-      })
-        .catch((err) => {
-        console.log('Error ', err);
-      });
-    };
     this.setImage = (image) => {
@@ -291,9 +279,6 @@ let source = '';
   handleStylingChange(newValue, oldValue) {
-    if (newValue !== oldValue)
-      this.setClientStyling();
+    if (newValue !== oldValue) {
+      this.fetchClientStyling().then(_ => this.setClientStyling());
+    }
   }
-  handleStylingUrlChange(newValue, oldValue) {
-    if (newValue !== oldValue)
-      this.setClientStylingURL();
-  }
   hpPageChange(event) {
@@ -317,17 +302,2 @@ var _a, _b;
   }
-  connectedCallback() {
-    if (this.cmsEndpoint && this.language && this.blogsLimit) {
-      if (this.page) {
-        this.currentPage = this.currentPage + +this.page - 1;
-        this.getBlogArticleGrid(+this.page);
-      }
-      else {
-        this.getBlogArticleGrid();
-      }
-    }
-  }
-  componentDidLoad() {
-    window.postMessage({ type: 'BlogArticlesGridLoaded' }, window.location.href);
-    this.device = getDeviceCustom();
-  }
   sortArticlesByDate(arr) {
@@ -396,13 +366,38 @@ arr.sort((a, b) => {
   }
-  componentDidRender() {
-    // start custom styling area
-    if (!this.limitStylingAppends && this.stylingContainer) {
-      if (this.clientStyling)
-        this.setClientStyling();
-      if (this.clientStylingUrl)
-        this.setClientStylingURL();
-      this.limitStylingAppends = true;
+  connectedCallback() {
+    if (this.cmsEndpoint && this.language && this.blogsLimit) {
+      if (this.page) {
+        this.currentPage = this.currentPage + +this.page - 1;
+        this.getBlogArticleGrid(+this.page);
+      }
+      else {
+        this.getBlogArticleGrid();
+      }
     }
-    // end custom styling area
   }
+  componentWillLoad() {
+    if (this.clientStylingUrl)
+      return this.fetchClientStyling();
+  }
+  componentDidLoad() {
+    if (this.clientStyling || this.clientStylingUrl)
+      this.setClientStyling();
+    window.postMessage({ type: 'BlogArticlesGridLoaded' }, window.location.href);
+    this.device = getDeviceCustom();
+  }
+  fetchClientStyling() {
+    if (!this.clientStylingUrl)
+      return;
+    return new Promise(resolve => {
+      fetch(this.clientStylingUrl)
+        .then((res) => res.text())
+        .then((data) => {
+        resolve(data);
+        this.clientStylingContent += data;
+      })
+        .catch((err) => {
+        console.error('Error fetching Client Styling:', err);
+      });
+    });
+  }
   formatDate(dateString) {
@@ -420,3 +415,3 @@ return new Intl.DateTimeFormat(this.intlDateTimeFormat).format(new Date(dateString));
     for (let i = 0; i < parseInt(this.blogsLimit); i++) {
-      placeholderCards.push(index.h("div", { class: "GridContainer FeaturedPost" }, index.h("div", { class: "GridWrapper" }, index.h("div", { class: "GridSector" }, index.h("div", { class: "VisualContent LoadingImage" })), index.h("div", { class: "GridSector" }, index.h("div", { class: "BlogTitle LoadingStripe LoadingSmallStripe" }), index.h("div", { class: "BlogDetails LoadingStripe LoadingMediumStripe" }), index.h("div", { class: "BlogLink LoadingStripe LoadingLongStripe" })))));
+      placeholderCards.push(index.h("div", { class: "GridContainer FeaturedPost Skeleton" }, index.h("div", { class: "GridWrapper" }, index.h("div", { class: "GridSector" }, index.h("div", { class: "VisualContent LoadingImage" })), index.h("div", { class: "GridSector" }, index.h("div", { class: "BlogTitle LoadingStripe LoadingSmallStripe" }), index.h("div", { class: "BlogDetails LoadingStripe LoadingMediumStripe" }), index.h("div", { class: "BlogLink LoadingStripe LoadingLongStripe" })))));
     }
@@ -443,3 +438,3 @@ return (index.h("div", { ref: el => this.stylingContainer = el }, index.h("div", { class: "BlogPageContainer" }, index.h("div", { class: "BlogGridPaginationWrapper" }, this.paginationActive == true && this.totalBlogs > +this.blogsLimit && index.h("helper-pagination", { "next-page": this.nextPage, "prev-page": this.previousPage, offset: this.paginationBlogList.offset, limit: this.blogsLimit, total: (_b = (_a = this.blogData) === null || _a === void 0 ? void 0 : _a.items) === null || _b === void 0 ? void 0 : _b.length, language: this.language, "client-styling": this.clientStyling || this.defaultStyling, "arrows-active": this.arrowsActive || true, "secondary-arrows-active": this.secondaryArrowsActive || false, "numbered-nav-active": this.numberedNavActive || false })), (!this.isLoading) &&
     "clientStyling": ["handleStylingChange"],
-    "clientStylingUrl": ["handleStylingUrlChange"]
+    "clientStylingUrl": ["handleStylingChange"]
   }; }
@@ -446,0 +441,0 @@ };

dist/cjs/blog-articles-grid.cjs.js

 'use strict';
 
-const index = require('./index-a88a1a42.js');
+const index = require('./index-159efcd2.js');
 
@@ -18,3 +18,3 @@ /*
 patchBrowser().then(options => {
-  return index.bootstrapLazy([["blog-articles-grid_2.cjs",[[1,"blog-articles-grid",{"cmsEndpoint":[513,"cms-endpoint"],"language":[513],"userRoles":[513,"user-roles"],"cmsEnv":[513,"cms-env"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"showPublishingDate":[516,"show-publishing-date"],"showImage":[516,"show-image"],"showTitle":[516,"show-title"],"showContent":[516,"show-content"],"showButton":[516,"show-button"],"usePostmessage":[516,"use-postmessage"],"postMessageEvent":[513,"post-message-event"],"blogsLimit":[513,"blogs-limit"],"paginationActive":[516,"pagination-active"],"arrowsActive":[516,"arrows-active"],"secondaryArrowsActive":[516,"secondary-arrows-active"],"numberedNavActive":[516,"numbered-nav-active"],"intlDateTimeFormat":[513,"intl-date-time-format"],"page":[513],"paginationBlogList":[32],"currentPage":[32],"hasErrors":[32],"limitStylingAppends":[32],"isLoading":[32],"bannerMatrixReady":[32],"nextPage":[32],"previousPage":[32],"device":[32],"blogData":[32],"totalBlogs":[32]},[[8,"BannerMatrixReady","handleBannerReady"],[0,"hpPageChange","hpPageChange"]]],[1,"helper-pagination",{"nextPage":[1537,"next-page"],"prevPage":[1537,"prev-page"],"offset":[1538],"limit":[1538],"total":[1538],"language":[1537],"clientStyling":[1537,"client-styling"],"clientStylingUrlContent":[1537,"client-styling-url-content"],"arrowsActive":[1540,"arrows-active"],"secondaryArrowsActive":[1540,"secondary-arrows-active"],"numberedNavActive":[1540,"numbered-nav-active"],"offsetInt":[32],"lastPage":[32],"previousPage":[32],"limitInt":[32],"totalInt":[32],"pagesArray":[32],"endInt":[32],"limitStylingAppends":[32]}]]]], options);
+  return index.bootstrapLazy([["blog-articles-grid_2.cjs",[[1,"blog-articles-grid",{"cmsEndpoint":[513,"cms-endpoint"],"language":[513],"userRoles":[513,"user-roles"],"cmsEnv":[513,"cms-env"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"showPublishingDate":[516,"show-publishing-date"],"showImage":[516,"show-image"],"showTitle":[516,"show-title"],"showContent":[516,"show-content"],"showButton":[516,"show-button"],"usePostmessage":[516,"use-postmessage"],"postMessageEvent":[513,"post-message-event"],"blogsLimit":[513,"blogs-limit"],"paginationActive":[516,"pagination-active"],"arrowsActive":[516,"arrows-active"],"secondaryArrowsActive":[516,"secondary-arrows-active"],"numberedNavActive":[516,"numbered-nav-active"],"intlDateTimeFormat":[513,"intl-date-time-format"],"page":[513],"paginationBlogList":[32],"currentPage":[32],"hasErrors":[32],"isLoading":[32],"bannerMatrixReady":[32],"nextPage":[32],"previousPage":[32],"device":[32],"blogData":[32],"totalBlogs":[32]},[[8,"BannerMatrixReady","handleBannerReady"],[0,"hpPageChange","hpPageChange"]]],[1,"helper-pagination",{"nextPage":[1537,"next-page"],"prevPage":[1537,"prev-page"],"offset":[1538],"limit":[1538],"total":[1538],"language":[1537],"clientStyling":[1537,"client-styling"],"clientStylingUrlContent":[1537,"client-styling-url-content"],"arrowsActive":[1540,"arrows-active"],"secondaryArrowsActive":[1540,"secondary-arrows-active"],"numberedNavActive":[1540,"numbered-nav-active"],"offsetInt":[32],"lastPage":[32],"previousPage":[32],"limitInt":[32],"totalInt":[32],"pagesArray":[32],"endInt":[32],"limitStylingAppends":[32]}]]]], options);
 });

dist/cjs/loader.cjs.js

@@ -5,3 +5,3 @@ 'use strict';
 
-const index = require('./index-a88a1a42.js');
+const index = require('./index-159efcd2.js');
 
@@ -18,3 +18,3 @@ /*
   return patchEsm().then(() => {
-  return index.bootstrapLazy([["blog-articles-grid_2.cjs",[[1,"blog-articles-grid",{"cmsEndpoint":[513,"cms-endpoint"],"language":[513],"userRoles":[513,"user-roles"],"cmsEnv":[513,"cms-env"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"showPublishingDate":[516,"show-publishing-date"],"showImage":[516,"show-image"],"showTitle":[516,"show-title"],"showContent":[516,"show-content"],"showButton":[516,"show-button"],"usePostmessage":[516,"use-postmessage"],"postMessageEvent":[513,"post-message-event"],"blogsLimit":[513,"blogs-limit"],"paginationActive":[516,"pagination-active"],"arrowsActive":[516,"arrows-active"],"secondaryArrowsActive":[516,"secondary-arrows-active"],"numberedNavActive":[516,"numbered-nav-active"],"intlDateTimeFormat":[513,"intl-date-time-format"],"page":[513],"paginationBlogList":[32],"currentPage":[32],"hasErrors":[32],"limitStylingAppends":[32],"isLoading":[32],"bannerMatrixReady":[32],"nextPage":[32],"previousPage":[32],"device":[32],"blogData":[32],"totalBlogs":[32]},[[8,"BannerMatrixReady","handleBannerReady"],[0,"hpPageChange","hpPageChange"]]],[1,"helper-pagination",{"nextPage":[1537,"next-page"],"prevPage":[1537,"prev-page"],"offset":[1538],"limit":[1538],"total":[1538],"language":[1537],"clientStyling":[1537,"client-styling"],"clientStylingUrlContent":[1537,"client-styling-url-content"],"arrowsActive":[1540,"arrows-active"],"secondaryArrowsActive":[1540,"secondary-arrows-active"],"numberedNavActive":[1540,"numbered-nav-active"],"offsetInt":[32],"lastPage":[32],"previousPage":[32],"limitInt":[32],"totalInt":[32],"pagesArray":[32],"endInt":[32],"limitStylingAppends":[32]}]]]], options);
+  return index.bootstrapLazy([["blog-articles-grid_2.cjs",[[1,"blog-articles-grid",{"cmsEndpoint":[513,"cms-endpoint"],"language":[513],"userRoles":[513,"user-roles"],"cmsEnv":[513,"cms-env"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"showPublishingDate":[516,"show-publishing-date"],"showImage":[516,"show-image"],"showTitle":[516,"show-title"],"showContent":[516,"show-content"],"showButton":[516,"show-button"],"usePostmessage":[516,"use-postmessage"],"postMessageEvent":[513,"post-message-event"],"blogsLimit":[513,"blogs-limit"],"paginationActive":[516,"pagination-active"],"arrowsActive":[516,"arrows-active"],"secondaryArrowsActive":[516,"secondary-arrows-active"],"numberedNavActive":[516,"numbered-nav-active"],"intlDateTimeFormat":[513,"intl-date-time-format"],"page":[513],"paginationBlogList":[32],"currentPage":[32],"hasErrors":[32],"isLoading":[32],"bannerMatrixReady":[32],"nextPage":[32],"previousPage":[32],"device":[32],"blogData":[32],"totalBlogs":[32]},[[8,"BannerMatrixReady","handleBannerReady"],[0,"hpPageChange","hpPageChange"]]],[1,"helper-pagination",{"nextPage":[1537,"next-page"],"prevPage":[1537,"prev-page"],"offset":[1538],"limit":[1538],"total":[1538],"language":[1537],"clientStyling":[1537,"client-styling"],"clientStylingUrlContent":[1537,"client-styling-url-content"],"arrowsActive":[1540,"arrows-active"],"secondaryArrowsActive":[1540,"secondary-arrows-active"],"numberedNavActive":[1540,"numbered-nav-active"],"offsetInt":[32],"lastPage":[32],"previousPage":[32],"limitInt":[32],"totalInt":[32],"pagesArray":[32],"endInt":[32],"limitStylingAppends":[32]}]]]], options);
   });
@@ -21,0 +21,0 @@ };

dist/collection/components/blog-articles-grid/blog-articles-grid.js

@@ -68,3 +68,2 @@ import { Component, Prop, State, Event, Watch, h, Listen } from '@stencil/core';
     this.hasErrors = false;
-    this.limitStylingAppends = false;
     this.isLoading = true;
@@ -76,2 +75,3 @@ this.bannerMatrixReady = false;
     this.totalBlogs = 0;
+    this.clientStylingContent = '';
     this.defaultStyling = `
@@ -127,19 +127,7 @@ div#PaginationContainer {
     this.setClientStyling = () => {
-      let sheet = document.createElement('style');
-      sheet.innerHTML = this.clientStyling;
+      this.clientStylingContent += this.clientStyling;
+      const sheet = document.createElement('style');
+      sheet.innerHTML = this.clientStylingContent;
       this.stylingContainer.prepend(sheet);
     };
-    this.setClientStylingURL = () => {
-      let url = new URL(this.clientStylingUrl);
-      let cssFile = document.createElement('style');
-      fetch(url.href)
-        .then((res) => res.text())
-        .then((data) => {
-        cssFile.innerHTML = data;
-        setTimeout(() => { this.stylingContainer.prepend(cssFile); }, 1);
-      })
-        .catch((err) => {
-        console.log('Error ', err);
-      });
-    };
     this.setImage = (image) => {
@@ -192,9 +180,6 @@ let source = '';
   handleStylingChange(newValue, oldValue) {
-    if (newValue !== oldValue)
-      this.setClientStyling();
+    if (newValue !== oldValue) {
+      this.fetchClientStyling().then(_ => this.setClientStyling());
+    }
   }
-  handleStylingUrlChange(newValue, oldValue) {
-    if (newValue !== oldValue)
-      this.setClientStylingURL();
-  }
   hpPageChange(event) {
@@ -218,17 +203,2 @@ var _a, _b;
   }
-  connectedCallback() {
-    if (this.cmsEndpoint && this.language && this.blogsLimit) {
-      if (this.page) {
-        this.currentPage = this.currentPage + +this.page - 1;
-        this.getBlogArticleGrid(+this.page);
-      }
-      else {
-        this.getBlogArticleGrid();
-      }
-    }
-  }
-  componentDidLoad() {
-    window.postMessage({ type: 'BlogArticlesGridLoaded' }, window.location.href);
-    this.device = getDeviceCustom();
-  }
   sortArticlesByDate(arr) {
@@ -297,13 +267,38 @@ arr.sort((a, b) => {
   }
-  componentDidRender() {
-    // start custom styling area
-    if (!this.limitStylingAppends && this.stylingContainer) {
-      if (this.clientStyling)
-        this.setClientStyling();
-      if (this.clientStylingUrl)
-        this.setClientStylingURL();
-      this.limitStylingAppends = true;
+  connectedCallback() {
+    if (this.cmsEndpoint && this.language && this.blogsLimit) {
+      if (this.page) {
+        this.currentPage = this.currentPage + +this.page - 1;
+        this.getBlogArticleGrid(+this.page);
+      }
+      else {
+        this.getBlogArticleGrid();
+      }
     }
-    // end custom styling area
   }
+  componentWillLoad() {
+    if (this.clientStylingUrl)
+      return this.fetchClientStyling();
+  }
+  componentDidLoad() {
+    if (this.clientStyling || this.clientStylingUrl)
+      this.setClientStyling();
+    window.postMessage({ type: 'BlogArticlesGridLoaded' }, window.location.href);
+    this.device = getDeviceCustom();
+  }
+  fetchClientStyling() {
+    if (!this.clientStylingUrl)
+      return;
+    return new Promise(resolve => {
+      fetch(this.clientStylingUrl)
+        .then((res) => res.text())
+        .then((data) => {
+        resolve(data);
+        this.clientStylingContent += data;
+      })
+        .catch((err) => {
+        console.error('Error fetching Client Styling:', err);
+      });
+    });
+  }
   formatDate(dateString) {
@@ -322,3 +317,3 @@ return new Intl.DateTimeFormat(this.intlDateTimeFormat).format(new Date(dateString));
     for (let i = 0; i < parseInt(this.blogsLimit); i++) {
-      placeholderCards.push(h("div", { class: "GridContainer FeaturedPost" },
+      placeholderCards.push(h("div", { class: "GridContainer FeaturedPost Skeleton" },
         h("div", { class: "GridWrapper" },
@@ -724,3 +719,2 @@ h("div", { class: "GridSector" },
     "hasErrors": {},
-    "limitStylingAppends": {},
     "isLoading": {},
@@ -780,3 +774,3 @@ "bannerMatrixReady": {},
       "propName": "clientStylingUrl",
-      "methodName": "handleStylingUrlChange"
+      "methodName": "handleStylingChange"
     }]; }
@@ -783,0 +777,0 @@ static get listeners() { return [{

dist/components/blog-articles-grid.js

@@ -165,3 +165,2 @@ import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
     this.hasErrors = false;
-    this.limitStylingAppends = false;
     this.isLoading = true;
@@ -173,2 +172,3 @@ this.bannerMatrixReady = false;
     this.totalBlogs = 0;
+    this.clientStylingContent = '';
     this.defaultStyling = `
@@ -224,19 +224,7 @@ div#PaginationContainer {
     this.setClientStyling = () => {
-      let sheet = document.createElement('style');
-      sheet.innerHTML = this.clientStyling;
+      this.clientStylingContent += this.clientStyling;
+      const sheet = document.createElement('style');
+      sheet.innerHTML = this.clientStylingContent;
       this.stylingContainer.prepend(sheet);
     };
-    this.setClientStylingURL = () => {
-      let url = new URL(this.clientStylingUrl);
-      let cssFile = document.createElement('style');
-      fetch(url.href)
-        .then((res) => res.text())
-        .then((data) => {
-        cssFile.innerHTML = data;
-        setTimeout(() => { this.stylingContainer.prepend(cssFile); }, 1);
-      })
-        .catch((err) => {
-        console.log('Error ', err);
-      });
-    };
     this.setImage = (image) => {
@@ -289,9 +277,6 @@ let source = '';
   handleStylingChange(newValue, oldValue) {
-    if (newValue !== oldValue)
-      this.setClientStyling();
+    if (newValue !== oldValue) {
+      this.fetchClientStyling().then(_ => this.setClientStyling());
+    }
   }
-  handleStylingUrlChange(newValue, oldValue) {
-    if (newValue !== oldValue)
-      this.setClientStylingURL();
-  }
   hpPageChange(event) {
@@ -315,17 +300,2 @@ var _a, _b;
   }
-  connectedCallback() {
-    if (this.cmsEndpoint && this.language && this.blogsLimit) {
-      if (this.page) {
-        this.currentPage = this.currentPage + +this.page - 1;
-        this.getBlogArticleGrid(+this.page);
-      }
-      else {
-        this.getBlogArticleGrid();
-      }
-    }
-  }
-  componentDidLoad() {
-    window.postMessage({ type: 'BlogArticlesGridLoaded' }, window.location.href);
-    this.device = getDeviceCustom();
-  }
   sortArticlesByDate(arr) {
@@ -394,13 +364,38 @@ arr.sort((a, b) => {
   }
-  componentDidRender() {
-    // start custom styling area
-    if (!this.limitStylingAppends && this.stylingContainer) {
-      if (this.clientStyling)
-        this.setClientStyling();
-      if (this.clientStylingUrl)
-        this.setClientStylingURL();
-      this.limitStylingAppends = true;
+  connectedCallback() {
+    if (this.cmsEndpoint && this.language && this.blogsLimit) {
+      if (this.page) {
+        this.currentPage = this.currentPage + +this.page - 1;
+        this.getBlogArticleGrid(+this.page);
+      }
+      else {
+        this.getBlogArticleGrid();
+      }
     }
-    // end custom styling area
   }
+  componentWillLoad() {
+    if (this.clientStylingUrl)
+      return this.fetchClientStyling();
+  }
+  componentDidLoad() {
+    if (this.clientStyling || this.clientStylingUrl)
+      this.setClientStyling();
+    window.postMessage({ type: 'BlogArticlesGridLoaded' }, window.location.href);
+    this.device = getDeviceCustom();
+  }
+  fetchClientStyling() {
+    if (!this.clientStylingUrl)
+      return;
+    return new Promise(resolve => {
+      fetch(this.clientStylingUrl)
+        .then((res) => res.text())
+        .then((data) => {
+        resolve(data);
+        this.clientStylingContent += data;
+      })
+        .catch((err) => {
+        console.error('Error fetching Client Styling:', err);
+      });
+    });
+  }
   formatDate(dateString) {
@@ -418,3 +413,3 @@ return new Intl.DateTimeFormat(this.intlDateTimeFormat).format(new Date(dateString));
     for (let i = 0; i < parseInt(this.blogsLimit); i++) {
-      placeholderCards.push(h("div", { class: "GridContainer FeaturedPost" }, h("div", { class: "GridWrapper" }, h("div", { class: "GridSector" }, h("div", { class: "VisualContent LoadingImage" })), h("div", { class: "GridSector" }, h("div", { class: "BlogTitle LoadingStripe LoadingSmallStripe" }), h("div", { class: "BlogDetails LoadingStripe LoadingMediumStripe" }), h("div", { class: "BlogLink LoadingStripe LoadingLongStripe" })))));
+      placeholderCards.push(h("div", { class: "GridContainer FeaturedPost Skeleton" }, h("div", { class: "GridWrapper" }, h("div", { class: "GridSector" }, h("div", { class: "VisualContent LoadingImage" })), h("div", { class: "GridSector" }, h("div", { class: "BlogTitle LoadingStripe LoadingSmallStripe" }), h("div", { class: "BlogDetails LoadingStripe LoadingMediumStripe" }), h("div", { class: "BlogLink LoadingStripe LoadingLongStripe" })))));
     }
@@ -441,3 +436,3 @@ return (h("div", { ref: el => this.stylingContainer = el }, h("div", { class: "BlogPageContainer" }, h("div", { class: "BlogGridPaginationWrapper" }, this.paginationActive == true && this.totalBlogs > +this.blogsLimit && h("helper-pagination", { "next-page": this.nextPage, "prev-page": this.previousPage, offset: this.paginationBlogList.offset, limit: this.blogsLimit, total: (_b = (_a = this.blogData) === null || _a === void 0 ? void 0 : _a.items) === null || _b === void 0 ? void 0 : _b.length, language: this.language, "client-styling": this.clientStyling || this.defaultStyling, "arrows-active": this.arrowsActive || true, "secondary-arrows-active": this.secondaryArrowsActive || false, "numbered-nav-active": this.numberedNavActive || false })), (!this.isLoading) &&
     "clientStyling": ["handleStylingChange"],
-    "clientStylingUrl": ["handleStylingUrlChange"]
+    "clientStylingUrl": ["handleStylingChange"]
   }; }
@@ -469,3 +464,2 @@ static get style() { return blogArticlesGridCss; }
     "hasErrors": [32],
-    "limitStylingAppends": [32],
     "isLoading": [32],
@@ -472,0 +466,0 @@ "bannerMatrixReady": [32],

dist/esm/blog-articles-grid_2.entry.js

@@ -1,2 +0,2 @@
-import { r as registerInstance, c as createEvent, h } from './index-3600ba1b.js';
+import { r as registerInstance, c as createEvent, h } from './index-6c1af2f1.js';
 
@@ -162,3 +162,2 @@ const DEFAULT_LANGUAGE$1 = 'en';
     this.hasErrors = false;
-    this.limitStylingAppends = false;
     this.isLoading = true;
@@ -170,2 +169,3 @@ this.bannerMatrixReady = false;
     this.totalBlogs = 0;
+    this.clientStylingContent = '';
     this.defaultStyling = `
@@ -221,19 +221,7 @@ div#PaginationContainer {
     this.setClientStyling = () => {
-      let sheet = document.createElement('style');
-      sheet.innerHTML = this.clientStyling;
+      this.clientStylingContent += this.clientStyling;
+      const sheet = document.createElement('style');
+      sheet.innerHTML = this.clientStylingContent;
       this.stylingContainer.prepend(sheet);
     };
-    this.setClientStylingURL = () => {
-      let url = new URL(this.clientStylingUrl);
-      let cssFile = document.createElement('style');
-      fetch(url.href)
-        .then((res) => res.text())
-        .then((data) => {
-        cssFile.innerHTML = data;
-        setTimeout(() => { this.stylingContainer.prepend(cssFile); }, 1);
-      })
-        .catch((err) => {
-        console.log('Error ', err);
-      });
-    };
     this.setImage = (image) => {
@@ -286,9 +274,6 @@ let source = '';
   handleStylingChange(newValue, oldValue) {
-    if (newValue !== oldValue)
-      this.setClientStyling();
+    if (newValue !== oldValue) {
+      this.fetchClientStyling().then(_ => this.setClientStyling());
+    }
   }
-  handleStylingUrlChange(newValue, oldValue) {
-    if (newValue !== oldValue)
-      this.setClientStylingURL();
-  }
   hpPageChange(event) {
@@ -312,17 +297,2 @@ var _a, _b;
   }
-  connectedCallback() {
-    if (this.cmsEndpoint && this.language && this.blogsLimit) {
-      if (this.page) {
-        this.currentPage = this.currentPage + +this.page - 1;
-        this.getBlogArticleGrid(+this.page);
-      }
-      else {
-        this.getBlogArticleGrid();
-      }
-    }
-  }
-  componentDidLoad() {
-    window.postMessage({ type: 'BlogArticlesGridLoaded' }, window.location.href);
-    this.device = getDeviceCustom();
-  }
   sortArticlesByDate(arr) {
@@ -391,13 +361,38 @@ arr.sort((a, b) => {
   }
-  componentDidRender() {
-    // start custom styling area
-    if (!this.limitStylingAppends && this.stylingContainer) {
-      if (this.clientStyling)
-        this.setClientStyling();
-      if (this.clientStylingUrl)
-        this.setClientStylingURL();
-      this.limitStylingAppends = true;
+  connectedCallback() {
+    if (this.cmsEndpoint && this.language && this.blogsLimit) {
+      if (this.page) {
+        this.currentPage = this.currentPage + +this.page - 1;
+        this.getBlogArticleGrid(+this.page);
+      }
+      else {
+        this.getBlogArticleGrid();
+      }
     }
-    // end custom styling area
   }
+  componentWillLoad() {
+    if (this.clientStylingUrl)
+      return this.fetchClientStyling();
+  }
+  componentDidLoad() {
+    if (this.clientStyling || this.clientStylingUrl)
+      this.setClientStyling();
+    window.postMessage({ type: 'BlogArticlesGridLoaded' }, window.location.href);
+    this.device = getDeviceCustom();
+  }
+  fetchClientStyling() {
+    if (!this.clientStylingUrl)
+      return;
+    return new Promise(resolve => {
+      fetch(this.clientStylingUrl)
+        .then((res) => res.text())
+        .then((data) => {
+        resolve(data);
+        this.clientStylingContent += data;
+      })
+        .catch((err) => {
+        console.error('Error fetching Client Styling:', err);
+      });
+    });
+  }
   formatDate(dateString) {
@@ -415,3 +410,3 @@ return new Intl.DateTimeFormat(this.intlDateTimeFormat).format(new Date(dateString));
     for (let i = 0; i < parseInt(this.blogsLimit); i++) {
-      placeholderCards.push(h("div", { class: "GridContainer FeaturedPost" }, h("div", { class: "GridWrapper" }, h("div", { class: "GridSector" }, h("div", { class: "VisualContent LoadingImage" })), h("div", { class: "GridSector" }, h("div", { class: "BlogTitle LoadingStripe LoadingSmallStripe" }), h("div", { class: "BlogDetails LoadingStripe LoadingMediumStripe" }), h("div", { class: "BlogLink LoadingStripe LoadingLongStripe" })))));
+      placeholderCards.push(h("div", { class: "GridContainer FeaturedPost Skeleton" }, h("div", { class: "GridWrapper" }, h("div", { class: "GridSector" }, h("div", { class: "VisualContent LoadingImage" })), h("div", { class: "GridSector" }, h("div", { class: "BlogTitle LoadingStripe LoadingSmallStripe" }), h("div", { class: "BlogDetails LoadingStripe LoadingMediumStripe" }), h("div", { class: "BlogLink LoadingStripe LoadingLongStripe" })))));
     }
@@ -438,3 +433,3 @@ return (h("div", { ref: el => this.stylingContainer = el }, h("div", { class: "BlogPageContainer" }, h("div", { class: "BlogGridPaginationWrapper" }, this.paginationActive == true && this.totalBlogs > +this.blogsLimit && h("helper-pagination", { "next-page": this.nextPage, "prev-page": this.previousPage, offset: this.paginationBlogList.offset, limit: this.blogsLimit, total: (_b = (_a = this.blogData) === null || _a === void 0 ? void 0 : _a.items) === null || _b === void 0 ? void 0 : _b.length, language: this.language, "client-styling": this.clientStyling || this.defaultStyling, "arrows-active": this.arrowsActive || true, "secondary-arrows-active": this.secondaryArrowsActive || false, "numbered-nav-active": this.numberedNavActive || false })), (!this.isLoading) &&
     "clientStyling": ["handleStylingChange"],
-    "clientStylingUrl": ["handleStylingUrlChange"]
+    "clientStylingUrl": ["handleStylingChange"]
   }; }
@@ -441,0 +436,0 @@ };

dist/esm/blog-articles-grid.js

@@ -1,2 +0,2 @@
-import { p as promiseResolve, b as bootstrapLazy } from './index-3600ba1b.js';
+import { p as promiseResolve, b as bootstrapLazy } from './index-6c1af2f1.js';
 
@@ -16,3 +16,3 @@ /*
 patchBrowser().then(options => {
-  return bootstrapLazy([["blog-articles-grid_2",[[1,"blog-articles-grid",{"cmsEndpoint":[513,"cms-endpoint"],"language":[513],"userRoles":[513,"user-roles"],"cmsEnv":[513,"cms-env"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"showPublishingDate":[516,"show-publishing-date"],"showImage":[516,"show-image"],"showTitle":[516,"show-title"],"showContent":[516,"show-content"],"showButton":[516,"show-button"],"usePostmessage":[516,"use-postmessage"],"postMessageEvent":[513,"post-message-event"],"blogsLimit":[513,"blogs-limit"],"paginationActive":[516,"pagination-active"],"arrowsActive":[516,"arrows-active"],"secondaryArrowsActive":[516,"secondary-arrows-active"],"numberedNavActive":[516,"numbered-nav-active"],"intlDateTimeFormat":[513,"intl-date-time-format"],"page":[513],"paginationBlogList":[32],"currentPage":[32],"hasErrors":[32],"limitStylingAppends":[32],"isLoading":[32],"bannerMatrixReady":[32],"nextPage":[32],"previousPage":[32],"device":[32],"blogData":[32],"totalBlogs":[32]},[[8,"BannerMatrixReady","handleBannerReady"],[0,"hpPageChange","hpPageChange"]]],[1,"helper-pagination",{"nextPage":[1537,"next-page"],"prevPage":[1537,"prev-page"],"offset":[1538],"limit":[1538],"total":[1538],"language":[1537],"clientStyling":[1537,"client-styling"],"clientStylingUrlContent":[1537,"client-styling-url-content"],"arrowsActive":[1540,"arrows-active"],"secondaryArrowsActive":[1540,"secondary-arrows-active"],"numberedNavActive":[1540,"numbered-nav-active"],"offsetInt":[32],"lastPage":[32],"previousPage":[32],"limitInt":[32],"totalInt":[32],"pagesArray":[32],"endInt":[32],"limitStylingAppends":[32]}]]]], options);
+  return bootstrapLazy([["blog-articles-grid_2",[[1,"blog-articles-grid",{"cmsEndpoint":[513,"cms-endpoint"],"language":[513],"userRoles":[513,"user-roles"],"cmsEnv":[513,"cms-env"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"showPublishingDate":[516,"show-publishing-date"],"showImage":[516,"show-image"],"showTitle":[516,"show-title"],"showContent":[516,"show-content"],"showButton":[516,"show-button"],"usePostmessage":[516,"use-postmessage"],"postMessageEvent":[513,"post-message-event"],"blogsLimit":[513,"blogs-limit"],"paginationActive":[516,"pagination-active"],"arrowsActive":[516,"arrows-active"],"secondaryArrowsActive":[516,"secondary-arrows-active"],"numberedNavActive":[516,"numbered-nav-active"],"intlDateTimeFormat":[513,"intl-date-time-format"],"page":[513],"paginationBlogList":[32],"currentPage":[32],"hasErrors":[32],"isLoading":[32],"bannerMatrixReady":[32],"nextPage":[32],"previousPage":[32],"device":[32],"blogData":[32],"totalBlogs":[32]},[[8,"BannerMatrixReady","handleBannerReady"],[0,"hpPageChange","hpPageChange"]]],[1,"helper-pagination",{"nextPage":[1537,"next-page"],"prevPage":[1537,"prev-page"],"offset":[1538],"limit":[1538],"total":[1538],"language":[1537],"clientStyling":[1537,"client-styling"],"clientStylingUrlContent":[1537,"client-styling-url-content"],"arrowsActive":[1540,"arrows-active"],"secondaryArrowsActive":[1540,"secondary-arrows-active"],"numberedNavActive":[1540,"numbered-nav-active"],"offsetInt":[32],"lastPage":[32],"previousPage":[32],"limitInt":[32],"totalInt":[32],"pagesArray":[32],"endInt":[32],"limitStylingAppends":[32]}]]]], options);
 });

dist/esm/loader.js

@@ -1,2 +0,2 @@
-import { p as promiseResolve, b as bootstrapLazy } from './index-3600ba1b.js';
+import { p as promiseResolve, b as bootstrapLazy } from './index-6c1af2f1.js';
 
@@ -13,3 +13,3 @@ /*
   return patchEsm().then(() => {
-  return bootstrapLazy([["blog-articles-grid_2",[[1,"blog-articles-grid",{"cmsEndpoint":[513,"cms-endpoint"],"language":[513],"userRoles":[513,"user-roles"],"cmsEnv":[513,"cms-env"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"showPublishingDate":[516,"show-publishing-date"],"showImage":[516,"show-image"],"showTitle":[516,"show-title"],"showContent":[516,"show-content"],"showButton":[516,"show-button"],"usePostmessage":[516,"use-postmessage"],"postMessageEvent":[513,"post-message-event"],"blogsLimit":[513,"blogs-limit"],"paginationActive":[516,"pagination-active"],"arrowsActive":[516,"arrows-active"],"secondaryArrowsActive":[516,"secondary-arrows-active"],"numberedNavActive":[516,"numbered-nav-active"],"intlDateTimeFormat":[513,"intl-date-time-format"],"page":[513],"paginationBlogList":[32],"currentPage":[32],"hasErrors":[32],"limitStylingAppends":[32],"isLoading":[32],"bannerMatrixReady":[32],"nextPage":[32],"previousPage":[32],"device":[32],"blogData":[32],"totalBlogs":[32]},[[8,"BannerMatrixReady","handleBannerReady"],[0,"hpPageChange","hpPageChange"]]],[1,"helper-pagination",{"nextPage":[1537,"next-page"],"prevPage":[1537,"prev-page"],"offset":[1538],"limit":[1538],"total":[1538],"language":[1537],"clientStyling":[1537,"client-styling"],"clientStylingUrlContent":[1537,"client-styling-url-content"],"arrowsActive":[1540,"arrows-active"],"secondaryArrowsActive":[1540,"secondary-arrows-active"],"numberedNavActive":[1540,"numbered-nav-active"],"offsetInt":[32],"lastPage":[32],"previousPage":[32],"limitInt":[32],"totalInt":[32],"pagesArray":[32],"endInt":[32],"limitStylingAppends":[32]}]]]], options);
+  return bootstrapLazy([["blog-articles-grid_2",[[1,"blog-articles-grid",{"cmsEndpoint":[513,"cms-endpoint"],"language":[513],"userRoles":[513,"user-roles"],"cmsEnv":[513,"cms-env"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"showPublishingDate":[516,"show-publishing-date"],"showImage":[516,"show-image"],"showTitle":[516,"show-title"],"showContent":[516,"show-content"],"showButton":[516,"show-button"],"usePostmessage":[516,"use-postmessage"],"postMessageEvent":[513,"post-message-event"],"blogsLimit":[513,"blogs-limit"],"paginationActive":[516,"pagination-active"],"arrowsActive":[516,"arrows-active"],"secondaryArrowsActive":[516,"secondary-arrows-active"],"numberedNavActive":[516,"numbered-nav-active"],"intlDateTimeFormat":[513,"intl-date-time-format"],"page":[513],"paginationBlogList":[32],"currentPage":[32],"hasErrors":[32],"isLoading":[32],"bannerMatrixReady":[32],"nextPage":[32],"previousPage":[32],"device":[32],"blogData":[32],"totalBlogs":[32]},[[8,"BannerMatrixReady","handleBannerReady"],[0,"hpPageChange","hpPageChange"]]],[1,"helper-pagination",{"nextPage":[1537,"next-page"],"prevPage":[1537,"prev-page"],"offset":[1538],"limit":[1538],"total":[1538],"language":[1537],"clientStyling":[1537,"client-styling"],"clientStylingUrlContent":[1537,"client-styling-url-content"],"arrowsActive":[1540,"arrows-active"],"secondaryArrowsActive":[1540,"secondary-arrows-active"],"numberedNavActive":[1540,"numbered-nav-active"],"offsetInt":[32],"lastPage":[32],"previousPage":[32],"limitInt":[32],"totalInt":[32],"pagesArray":[32],"endInt":[32],"limitStylingAppends":[32]}]]]], options);
   });
@@ -16,0 +16,0 @@ };

dist/types/components/blog-articles-grid/blog-articles-grid.d.ts

@@ -89,3 +89,2 @@ import { EventEmitter } from '../../stencil-public-runtime';
   hasErrors: boolean;
-  private limitStylingAppends;
   private isLoading;
@@ -99,11 +98,9 @@ bannerMatrixReady: boolean;
   lastPage: number;
+  clientStylingContent: string;
   handleBannerReady(): void;
   watchEndpoint(newValue: string, oldValue: string): void;
   handleStylingChange(newValue: string, oldValue: string): void;
-  handleStylingUrlChange(newValue: string, oldValue: string): void;
   private stylingContainer;
   private defaultStyling;
   hpPageChange(event: CustomEvent<BlogArticlesGrid>): void;
-  connectedCallback(): void;
-  componentDidLoad(): void;
   sortArticlesByDate(arr: any): any;
@@ -113,5 +110,7 @@ findLatestFeatured(array: any): any;
   getBlogArticleGrid(page?: number): void;
-  componentDidRender(): void;
+  connectedCallback(): void;
+  componentWillLoad(): Promise<string>;
+  componentDidLoad(): void;
   setClientStyling: () => void;
-  setClientStylingURL: () => void;
+  fetchClientStyling(): Promise<string>;
   setImage: (image: any) => string;
@@ -118,0 +117,0 @@ formatDate(dateString: any): string;

package.json

 {
   "name": "@everymatrix/blog-articles-grid",
-  "version": "1.36.0",
+  "version": "1.36.1",
   "main": "./dist/index.cjs.js",
@@ -5,0 +5,0 @@ "module": "./dist/index.js",

No alert changes

Worsened metrics

Total package byte prevSize

472829

decreased by-0.17%

Lines of code

8534

decreased by-0.2%

No dependency changes