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

Comparing version 1.26.0 to 1.26.1

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

@@ -1,1 +0,1 @@
-import{p as e,b as t}from"./p-ed2f13d0.js";(()=>{const t=import.meta.url,n={};return""!==t&&(n.resourcesUrl=new URL(".",t).href),e(n)})().then((e=>t([["p-8e2011ea",[[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]},[[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-ed2f13d0.js";(()=>{const t=import.meta.url,n={};return""!==t&&(n.resourcesUrl=new URL(".",t).href),e(n)})().then((e=>t([["p-0a6f9f6f",[[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)));

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

@@ -83,3 +83,3 @@ 'use strict';
 
-const blogArticlesGridCss = ":host {\n  display: block;\n}\n\n.GridContainerWrapper {\n  display: grid;\n}\n\n.GridContainer {\n  margin: auto;\n  width: 100%;\n  height: 280px;\n  border-radius: 15px;\n  background-color: #07072A;\n  margin-bottom: 20px;\n  display: grid;\n  gap: 30px;\n  grid-template-rows: 1fr 4fr 1fr 1fr;\n  grid-template-columns: 30px 1fr 1fr 30px;\n}\n.GridContainer .BlogBanner {\n  grid-column: 1/3;\n  grid-row: 1/5;\n}\n.GridContainer .BlogBanner img {\n  border-radius: 5px 0 0 5px;\n  width: 100%;\n  height: 280px;\n}\n.GridContainer .BlogDate {\n  font-size: 12px;\n  border-radius: 5px 5px 0 0;\n  padding: 10px;\n  width: fit-content;\n  text-align: center;\n  color: #FFFFFF;\n  background-color: #0D0D4D;\n  grid-column: 2/2;\n  grid-row: 4/4;\n  z-index: 1;\n}\n.GridContainer .BlogTitle {\n  font-size: 24px;\n  color: #FFF;\n  margin-top: 20px;\n  grid-column: 3/5;\n}\n.GridContainer .BlogContent {\n  font-size: 14px;\n  color: #FFF;\n  width: 90%;\n  max-height: 80px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  grid-column: 3/5;\n}\n.GridContainer .BlogLink {\n  grid-column: 3/5;\n  color: #FFF;\n}\n.GridContainer .BlogLink button {\n  font-size: 14px;\n  border: none;\n  padding: 0;\n  background: none;\n  color: #D0046C;\n  cursor: pointer;\n}\n\n@container (max-width: 475px) {\n  .GridContainerWrapper {\n    display: grid;\n  }\n\n  .GridContainer {\n    margin: auto;\n    width: 100%;\n    min-height: 400px;\n    gap: 10%;\n    padding-bottom: 30px;\n    border-radius: 5px;\n    background-color: #07072A;\n    margin-bottom: 20px;\n    display: grid;\n    grid-template-rows: repeat(auto-fit, minmax(50px, 1fr));\n    grid-template-rows: auto auto auto 50px;\n    grid-template-columns: 15px auto auto 15px;\n    gap: 10px;\n  }\n  .GridContainer .BlogBanner {\n    grid-column: 1/5;\n    grid-row: 1/3;\n    margin: 0;\n  }\n  .GridContainer .BlogBanner img {\n    width: 100%;\n    height: 232px;\n    border-radius: 5px 5px 0 0;\n  }\n  .GridContainer .BlogDate {\n    grid-column: 2/3;\n    grid-row: 2/3;\n    font-size: 12px;\n    border-radius: 5px 5px 0 0;\n    padding: 10px;\n    width: fit-content;\n    text-align: center;\n    color: #FFFFFF;\n    background-color: #0D0D4D;\n    z-index: 1;\n  }\n  .GridContainer .BlogTitle {\n    grid-column: 2/4;\n    font-size: 24px;\n    color: #FFF;\n  }\n  .GridContainer .BlogContent {\n    grid-column: 2/4;\n    font-size: 14px;\n    color: #FFF;\n  }\n  .GridContainer .BlogLink {\n    grid-column: 2/4;\n    color: #FFF;\n    cursor: pointer;\n  }\n  .GridContainer .BlogLink button {\n    font-size: 14px;\n    border: none;\n    background: none;\n    color: #D0046C;\n    cursor: pointer;\n  }\n}";
+const blogArticlesGridCss = ":host {\n  display: block;\n}\n\n.BlogPageContainer {\n  background: #0A0A17;\n  padding: 20px;\n}\n\n.GridContainerWrapper {\n  display: flex;\n  flex-flow: row wrap;\n  gap: 20px;\n}\n\n.GridContainer {\n  container-type: inline-size;\n  container-name: article;\n  border-radius: 15px;\n  color: #000;\n  flex: 1 1 400px;\n  overflow: hidden;\n}\n.GridContainer:first-child {\n  width: 100%;\n  flex-basis: auto;\n}\n.GridContainer .GridWrapper {\n  display: flex;\n  flex-direction: row;\n  height: 280px;\n  background: #fff;\n}\n.GridContainer .GridSector {\n  flex-basis: 50%;\n  position: relative;\n}\n.GridContainer .GridSector:first-of-type {\n  height: 280px;\n  display: flex;\n}\n.GridContainer .GridSector:last-of-type {\n  padding: 20px 40px;\n  display: flex;\n  flex-direction: column;\n}\n.GridContainer .VisualContent {\n  width: 100%;\n}\n.GridContainer .BlogDate {\n  position: absolute;\n  bottom: 0px;\n  left: 30px;\n  font-size: 12px;\n  border-radius: 5px 5px 0 0;\n  padding: 10px;\n  width: fit-content;\n  text-align: center;\n  color: #FFF;\n  background-color: #CD0B5E;\n  z-index: 1;\n}\n.GridContainer .BlogTitle {\n  font-size: 24px;\n  color: #000;\n  padding-bottom: 10px;\n}\n.GridContainer .BlogContent {\n  display: -webkit-box;\n  font-size: 14px;\n  line-height: 1.2em;\n  -webkit-line-clamp: 6;\n  color: #000;\n  -webkit-box-orient: vertical;\n  box-sizing: border-box;\n  text-overflow: ellipsis;\n  overflow: hidden;\n}\n.GridContainer .BlogLink {\n  color: #000;\n  position: absolute;\n  bottom: 16px;\n}\n.GridContainer .BlogLink button {\n  font-size: 14px;\n  border: none;\n  padding: 0;\n  background: none;\n  color: #D0046C;\n  cursor: pointer;\n}\n\n@container article (max-width: 550px) {\n  .GridContainer .GridWrapper {\n    height: 380px;\n    flex-direction: column;\n  }\n  .GridContainer .GridWrapper .GridSector:first-of-type {\n    height: 120px;\n    flex-shrink: 0;\n    flex-basis: 150px;\n  }\n  .GridContainer .GridWrapper .GridSector:last-of-type {\n    padding: 20px 20px 40px;\n  }\n}";
 
@@ -135,2 +135,6 @@ const BlogArticlesGrid = class {
     /**
+    * Customize pagination: Activate pagination numbered navigation
+    */
+    this.blogsLimit = '0';
+    /**
      * Intl date format
@@ -154,2 +158,3 @@ */
     this.device = '';
+    this.totalBlogs = 0;
     this.defaultStyling = `
@@ -345,2 +350,3 @@ div#PaginationContainer {
       this.previousPage = blogContent.pages.previous;
+      this.totalBlogs = blogContent.total;
       const latestFeatured = this.findLatestFeatured(blogItems);
@@ -375,14 +381,14 @@ this.blogData = this.sortArticlesByDate(blogItems);
   render() {
-    var _a, _b, _c;
+    var _a, _b;
     if (this.hasErrors) {
       return (index.h("div", { class: "BlogArticleDetails" }, index.h("div", { class: "Title" }, translate$1('error', this.language))));
     }
-    return (index.h("div", { ref: el => this.stylingContainer = el }, index.h("div", { class: "BlogPageContainer" }, index.h("div", { class: "BlogGridPaginationWrapper" }, this.paginationActive == true && (((_a = this.blogData) === null || _a === void 0 ? void 0 : _a.items.length) > this.blogsLimit) && index.h("helper-pagination", { "next-page": this.nextPage, "prev-page": this.previousPage, offset: this.paginationBlogList.offset, limit: this.blogsLimit, total: (_c = (_b = this.blogData) === null || _b === void 0 ? void 0 : _b.items) === null || _c === void 0 ? void 0 : _c.length, language: this.language, "client-styling": this.clientStyling || this.defaultStyling, "arrows-active": this.arrowsActive || false, "secondary-arrows-active": this.secondaryArrowsActive || false, "numbered-nav-active": this.numberedNavActive || false })), (!this.isLoading) &&
+    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) &&
       index.h("div", { class: `GridContainerWrapper BlogPage-${this.currentPage}` }, this.blogData && this.blogData.map((data) => {
         var _a, _b;
-        return index.h("div", { class: "GridContainer" }, this.showPublishingDate &&
-          index.h("div", { class: "BlogDate" }, this.formatDate(data === null || data === void 0 ? void 0 : data.publishingDate)), this.showImage && (index.h("div", { class: "BlogBanner" }, ((_a = data.image) === null || _a === void 0 ? void 0 : _a.src) ? (index.h("img", { src: this.setImage(data.image), alt: data.image.slug })) : (((_b = data.video) === null || _b === void 0 ? void 0 : _b.sources[this.device]) ? (index.h("video", { src: data.video.sources[this.device], controls: true })) : (index.h("h1", { style: { color: "white" } }, "No Image"))))), this.showTitle &&
+        return index.h("div", { class: "GridContainer" }, index.h("div", { class: "GridWrapper" }, index.h("div", { class: "GridSector" }, this.showPublishingDate &&
+          index.h("div", { class: "BlogDate" }, this.formatDate(data === null || data === void 0 ? void 0 : data.publishingDate)), this.showImage && ((_a = data.image) === null || _a === void 0 ? void 0 : _a.src) ? (index.h("div", { class: "VisualContent", style: { background: `url(${this.setImage(data.image)}) no-repeat center center / cover` } })) : (((_b = data.video) === null || _b === void 0 ? void 0 : _b.sources[this.device]) ? (index.h("video", { class: "VisualContent", src: data.video.sources[this.device], controls: true })) : (index.h("h1", { class: "VisualContent", style: { color: "#fff" } }, "No Image")))), index.h("div", { class: "GridSector" }, this.showTitle &&
           index.h("div", { class: "BlogTitle" }, data === null || data === void 0 ? void 0 : data.title), this.showContent &&
           this.renderContentConditionally(data === null || data === void 0 ? void 0 : data.descriptionPreview), this.showButton &&
-          index.h("div", { class: "BlogLink" }, index.h("button", { onClick: () => this.getArticleId(data === null || data === void 0 ? void 0 : data.postID, data === null || data === void 0 ? void 0 : data.slug, data === null || data === void 0 ? void 0 : data.customPath) }, translate$1('readmore', this.language))));
+          index.h("div", { class: "BlogLink" }, index.h("button", { onClick: () => this.getArticleId(data === null || data === void 0 ? void 0 : data.postID, data === null || data === void 0 ? void 0 : data.slug, data === null || data === void 0 ? void 0 : data.customPath) }, translate$1('readmore', this.language))))));
       })))));
@@ -389,0 +395,0 @@ }

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

@@ -18,3 +18,3 @@ 'use strict';
 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]},[[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],"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);
 });

dist/cjs/loader.cjs.js

@@ -17,3 +17,3 @@ 'use strict';
   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]},[[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],"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);
   });
@@ -20,0 +20,0 @@ };

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

@@ -52,2 +52,6 @@ import { Component, Prop, State, Event, Watch, h, Listen } from '@stencil/core';
     /**
+    * Customize pagination: Activate pagination numbered navigation
+    */
+    this.blogsLimit = '0';
+    /**
      * Intl date format
@@ -71,2 +75,3 @@ */
     this.device = '';
+    this.totalBlogs = 0;
     this.defaultStyling = `
@@ -262,2 +267,3 @@ div#PaginationContainer {
       this.previousPage = blogContent.pages.previous;
+      this.totalBlogs = blogContent.total;
       const latestFeatured = this.findLatestFeatured(blogItems);
@@ -292,3 +298,3 @@ this.blogData = this.sortArticlesByDate(blogItems);
   render() {
-    var _a, _b, _c;
+    var _a, _b;
     if (this.hasErrors) {
@@ -300,3 +306,3 @@ return (h("div", { class: "BlogArticleDetails" },
       h("div", { class: "BlogPageContainer" },
-        h("div", { class: "BlogGridPaginationWrapper" }, this.paginationActive == true && (((_a = this.blogData) === null || _a === void 0 ? void 0 : _a.items.length) > this.blogsLimit) && h("helper-pagination", { "next-page": this.nextPage, "prev-page": this.previousPage, offset: this.paginationBlogList.offset, limit: this.blogsLimit, total: (_c = (_b = this.blogData) === null || _b === void 0 ? void 0 : _b.items) === null || _c === void 0 ? void 0 : _c.length, language: this.language, "client-styling": this.clientStyling || this.defaultStyling, "arrows-active": this.arrowsActive || false, "secondary-arrows-active": this.secondaryArrowsActive || false, "numbered-nav-active": this.numberedNavActive || false })),
+        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) &&
@@ -306,12 +312,15 @@ h("div", { class: `GridContainerWrapper BlogPage-${this.currentPage}` }, this.blogData && this.blogData.map((data) => {
             return h("div", { class: "GridContainer" },
-              this.showPublishingDate &&
-                h("div", { class: "BlogDate" }, this.formatDate(data === null || data === void 0 ? void 0 : data.publishingDate)),
-              this.showImage && (h("div", { class: "BlogBanner" }, ((_a = data.image) === null || _a === void 0 ? void 0 : _a.src) ? (h("img", { src: this.setImage(data.image), alt: data.image.slug })) : (((_b = data.video) === null || _b === void 0 ? void 0 : _b.sources[this.device]) ? (h("video", { src: data.video.sources[this.device], controls: true })) : (h("h1", { style: { color: "white" } }, "No Image"))))),
-              this.showTitle &&
-                h("div", { class: "BlogTitle" }, data === null || data === void 0 ? void 0 : data.title),
-              this.showContent &&
-                this.renderContentConditionally(data === null || data === void 0 ? void 0 : data.descriptionPreview),
-              this.showButton &&
-                h("div", { class: "BlogLink" },
-                  h("button", { onClick: () => this.getArticleId(data === null || data === void 0 ? void 0 : data.postID, data === null || data === void 0 ? void 0 : data.slug, data === null || data === void 0 ? void 0 : data.customPath) }, translate('readmore', this.language))));
+              h("div", { class: "GridWrapper" },
+                h("div", { class: "GridSector" },
+                  this.showPublishingDate &&
+                    h("div", { class: "BlogDate" }, this.formatDate(data === null || data === void 0 ? void 0 : data.publishingDate)),
+                  this.showImage && ((_a = data.image) === null || _a === void 0 ? void 0 : _a.src) ? (h("div", { class: "VisualContent", style: { background: `url(${this.setImage(data.image)}) no-repeat center center / cover` } })) : (((_b = data.video) === null || _b === void 0 ? void 0 : _b.sources[this.device]) ? (h("video", { class: "VisualContent", src: data.video.sources[this.device], controls: true })) : (h("h1", { class: "VisualContent", style: { color: "#fff" } }, "No Image")))),
+                h("div", { class: "GridSector" },
+                  this.showTitle &&
+                    h("div", { class: "BlogTitle" }, data === null || data === void 0 ? void 0 : data.title),
+                  this.showContent &&
+                    this.renderContentConditionally(data === null || data === void 0 ? void 0 : data.descriptionPreview),
+                  this.showButton &&
+                    h("div", { class: "BlogLink" },
+                      h("button", { onClick: () => this.getArticleId(data === null || data === void 0 ? void 0 : data.postID, data === null || data === void 0 ? void 0 : data.slug, data === null || data === void 0 ? void 0 : data.customPath) }, translate('readmore', this.language))))));
           })))));
@@ -575,3 +584,4 @@ }
       "attribute": "blogs-limit",
-      "reflect": true
+      "reflect": true,
+      "defaultValue": "'0'"
     },
@@ -693,3 +703,4 @@ "paginationActive": {
     "device": {},
-    "blogData": {}
+    "blogData": {},
+    "totalBlogs": {}
   }; }
@@ -696,0 +707,0 @@ static get events() { return [{

dist/components/blog-articles-grid.js

@@ -80,3 +80,3 @@ import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
 
-const blogArticlesGridCss = ":host {\n  display: block;\n}\n\n.GridContainerWrapper {\n  display: grid;\n}\n\n.GridContainer {\n  margin: auto;\n  width: 100%;\n  height: 280px;\n  border-radius: 15px;\n  background-color: #07072A;\n  margin-bottom: 20px;\n  display: grid;\n  gap: 30px;\n  grid-template-rows: 1fr 4fr 1fr 1fr;\n  grid-template-columns: 30px 1fr 1fr 30px;\n}\n.GridContainer .BlogBanner {\n  grid-column: 1/3;\n  grid-row: 1/5;\n}\n.GridContainer .BlogBanner img {\n  border-radius: 5px 0 0 5px;\n  width: 100%;\n  height: 280px;\n}\n.GridContainer .BlogDate {\n  font-size: 12px;\n  border-radius: 5px 5px 0 0;\n  padding: 10px;\n  width: fit-content;\n  text-align: center;\n  color: #FFFFFF;\n  background-color: #0D0D4D;\n  grid-column: 2/2;\n  grid-row: 4/4;\n  z-index: 1;\n}\n.GridContainer .BlogTitle {\n  font-size: 24px;\n  color: #FFF;\n  margin-top: 20px;\n  grid-column: 3/5;\n}\n.GridContainer .BlogContent {\n  font-size: 14px;\n  color: #FFF;\n  width: 90%;\n  max-height: 80px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  grid-column: 3/5;\n}\n.GridContainer .BlogLink {\n  grid-column: 3/5;\n  color: #FFF;\n}\n.GridContainer .BlogLink button {\n  font-size: 14px;\n  border: none;\n  padding: 0;\n  background: none;\n  color: #D0046C;\n  cursor: pointer;\n}\n\n@container (max-width: 475px) {\n  .GridContainerWrapper {\n    display: grid;\n  }\n\n  .GridContainer {\n    margin: auto;\n    width: 100%;\n    min-height: 400px;\n    gap: 10%;\n    padding-bottom: 30px;\n    border-radius: 5px;\n    background-color: #07072A;\n    margin-bottom: 20px;\n    display: grid;\n    grid-template-rows: repeat(auto-fit, minmax(50px, 1fr));\n    grid-template-rows: auto auto auto 50px;\n    grid-template-columns: 15px auto auto 15px;\n    gap: 10px;\n  }\n  .GridContainer .BlogBanner {\n    grid-column: 1/5;\n    grid-row: 1/3;\n    margin: 0;\n  }\n  .GridContainer .BlogBanner img {\n    width: 100%;\n    height: 232px;\n    border-radius: 5px 5px 0 0;\n  }\n  .GridContainer .BlogDate {\n    grid-column: 2/3;\n    grid-row: 2/3;\n    font-size: 12px;\n    border-radius: 5px 5px 0 0;\n    padding: 10px;\n    width: fit-content;\n    text-align: center;\n    color: #FFFFFF;\n    background-color: #0D0D4D;\n    z-index: 1;\n  }\n  .GridContainer .BlogTitle {\n    grid-column: 2/4;\n    font-size: 24px;\n    color: #FFF;\n  }\n  .GridContainer .BlogContent {\n    grid-column: 2/4;\n    font-size: 14px;\n    color: #FFF;\n  }\n  .GridContainer .BlogLink {\n    grid-column: 2/4;\n    color: #FFF;\n    cursor: pointer;\n  }\n  .GridContainer .BlogLink button {\n    font-size: 14px;\n    border: none;\n    background: none;\n    color: #D0046C;\n    cursor: pointer;\n  }\n}";
+const blogArticlesGridCss = ":host {\n  display: block;\n}\n\n.BlogPageContainer {\n  background: #0A0A17;\n  padding: 20px;\n}\n\n.GridContainerWrapper {\n  display: flex;\n  flex-flow: row wrap;\n  gap: 20px;\n}\n\n.GridContainer {\n  container-type: inline-size;\n  container-name: article;\n  border-radius: 15px;\n  color: #000;\n  flex: 1 1 400px;\n  overflow: hidden;\n}\n.GridContainer:first-child {\n  width: 100%;\n  flex-basis: auto;\n}\n.GridContainer .GridWrapper {\n  display: flex;\n  flex-direction: row;\n  height: 280px;\n  background: #fff;\n}\n.GridContainer .GridSector {\n  flex-basis: 50%;\n  position: relative;\n}\n.GridContainer .GridSector:first-of-type {\n  height: 280px;\n  display: flex;\n}\n.GridContainer .GridSector:last-of-type {\n  padding: 20px 40px;\n  display: flex;\n  flex-direction: column;\n}\n.GridContainer .VisualContent {\n  width: 100%;\n}\n.GridContainer .BlogDate {\n  position: absolute;\n  bottom: 0px;\n  left: 30px;\n  font-size: 12px;\n  border-radius: 5px 5px 0 0;\n  padding: 10px;\n  width: fit-content;\n  text-align: center;\n  color: #FFF;\n  background-color: #CD0B5E;\n  z-index: 1;\n}\n.GridContainer .BlogTitle {\n  font-size: 24px;\n  color: #000;\n  padding-bottom: 10px;\n}\n.GridContainer .BlogContent {\n  display: -webkit-box;\n  font-size: 14px;\n  line-height: 1.2em;\n  -webkit-line-clamp: 6;\n  color: #000;\n  -webkit-box-orient: vertical;\n  box-sizing: border-box;\n  text-overflow: ellipsis;\n  overflow: hidden;\n}\n.GridContainer .BlogLink {\n  color: #000;\n  position: absolute;\n  bottom: 16px;\n}\n.GridContainer .BlogLink button {\n  font-size: 14px;\n  border: none;\n  padding: 0;\n  background: none;\n  color: #D0046C;\n  cursor: pointer;\n}\n\n@container article (max-width: 550px) {\n  .GridContainer .GridWrapper {\n    height: 380px;\n    flex-direction: column;\n  }\n  .GridContainer .GridWrapper .GridSector:first-of-type {\n    height: 120px;\n    flex-shrink: 0;\n    flex-basis: 150px;\n  }\n  .GridContainer .GridWrapper .GridSector:last-of-type {\n    padding: 20px 20px 40px;\n  }\n}";
 
@@ -134,2 +134,6 @@ const BlogArticlesGrid$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     /**
+    * Customize pagination: Activate pagination numbered navigation
+    */
+    this.blogsLimit = '0';
+    /**
      * Intl date format
@@ -153,2 +157,3 @@ */
     this.device = '';
+    this.totalBlogs = 0;
     this.defaultStyling = `
@@ -344,2 +349,3 @@ div#PaginationContainer {
       this.previousPage = blogContent.pages.previous;
+      this.totalBlogs = blogContent.total;
       const latestFeatured = this.findLatestFeatured(blogItems);
@@ -374,14 +380,14 @@ this.blogData = this.sortArticlesByDate(blogItems);
   render() {
-    var _a, _b, _c;
+    var _a, _b;
     if (this.hasErrors) {
       return (h("div", { class: "BlogArticleDetails" }, h("div", { class: "Title" }, translate('error', this.language))));
     }
-    return (h("div", { ref: el => this.stylingContainer = el }, h("div", { class: "BlogPageContainer" }, h("div", { class: "BlogGridPaginationWrapper" }, this.paginationActive == true && (((_a = this.blogData) === null || _a === void 0 ? void 0 : _a.items.length) > this.blogsLimit) && h("helper-pagination", { "next-page": this.nextPage, "prev-page": this.previousPage, offset: this.paginationBlogList.offset, limit: this.blogsLimit, total: (_c = (_b = this.blogData) === null || _b === void 0 ? void 0 : _b.items) === null || _c === void 0 ? void 0 : _c.length, language: this.language, "client-styling": this.clientStyling || this.defaultStyling, "arrows-active": this.arrowsActive || false, "secondary-arrows-active": this.secondaryArrowsActive || false, "numbered-nav-active": this.numberedNavActive || false })), (!this.isLoading) &&
+    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) &&
       h("div", { class: `GridContainerWrapper BlogPage-${this.currentPage}` }, this.blogData && this.blogData.map((data) => {
         var _a, _b;
-        return h("div", { class: "GridContainer" }, this.showPublishingDate &&
-          h("div", { class: "BlogDate" }, this.formatDate(data === null || data === void 0 ? void 0 : data.publishingDate)), this.showImage && (h("div", { class: "BlogBanner" }, ((_a = data.image) === null || _a === void 0 ? void 0 : _a.src) ? (h("img", { src: this.setImage(data.image), alt: data.image.slug })) : (((_b = data.video) === null || _b === void 0 ? void 0 : _b.sources[this.device]) ? (h("video", { src: data.video.sources[this.device], controls: true })) : (h("h1", { style: { color: "white" } }, "No Image"))))), this.showTitle &&
+        return h("div", { class: "GridContainer" }, h("div", { class: "GridWrapper" }, h("div", { class: "GridSector" }, this.showPublishingDate &&
+          h("div", { class: "BlogDate" }, this.formatDate(data === null || data === void 0 ? void 0 : data.publishingDate)), this.showImage && ((_a = data.image) === null || _a === void 0 ? void 0 : _a.src) ? (h("div", { class: "VisualContent", style: { background: `url(${this.setImage(data.image)}) no-repeat center center / cover` } })) : (((_b = data.video) === null || _b === void 0 ? void 0 : _b.sources[this.device]) ? (h("video", { class: "VisualContent", src: data.video.sources[this.device], controls: true })) : (h("h1", { class: "VisualContent", style: { color: "#fff" } }, "No Image")))), h("div", { class: "GridSector" }, this.showTitle &&
           h("div", { class: "BlogTitle" }, data === null || data === void 0 ? void 0 : data.title), this.showContent &&
           this.renderContentConditionally(data === null || data === void 0 ? void 0 : data.descriptionPreview), this.showButton &&
-          h("div", { class: "BlogLink" }, h("button", { onClick: () => this.getArticleId(data === null || data === void 0 ? void 0 : data.postID, data === null || data === void 0 ? void 0 : data.slug, data === null || data === void 0 ? void 0 : data.customPath) }, translate('readmore', this.language))));
+          h("div", { class: "BlogLink" }, h("button", { onClick: () => this.getArticleId(data === null || data === void 0 ? void 0 : data.postID, data === null || data === void 0 ? void 0 : data.slug, data === null || data === void 0 ? void 0 : data.customPath) }, translate('readmore', this.language))))));
       })))));
@@ -426,3 +432,4 @@ }
     "device": [32],
-    "blogData": [32]
+    "blogData": [32],
+    "totalBlogs": [32]
   }, [[8, "BannerMatrixReady", "handleBannerReady"], [0, "hpPageChange", "hpPageChange"]]]);
@@ -429,0 +436,0 @@ function defineCustomElement$1() {

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

@@ -79,3 +79,3 @@ import { r as registerInstance, c as createEvent, h } from './index-c02b7464.js';
 
-const blogArticlesGridCss = ":host {\n  display: block;\n}\n\n.GridContainerWrapper {\n  display: grid;\n}\n\n.GridContainer {\n  margin: auto;\n  width: 100%;\n  height: 280px;\n  border-radius: 15px;\n  background-color: #07072A;\n  margin-bottom: 20px;\n  display: grid;\n  gap: 30px;\n  grid-template-rows: 1fr 4fr 1fr 1fr;\n  grid-template-columns: 30px 1fr 1fr 30px;\n}\n.GridContainer .BlogBanner {\n  grid-column: 1/3;\n  grid-row: 1/5;\n}\n.GridContainer .BlogBanner img {\n  border-radius: 5px 0 0 5px;\n  width: 100%;\n  height: 280px;\n}\n.GridContainer .BlogDate {\n  font-size: 12px;\n  border-radius: 5px 5px 0 0;\n  padding: 10px;\n  width: fit-content;\n  text-align: center;\n  color: #FFFFFF;\n  background-color: #0D0D4D;\n  grid-column: 2/2;\n  grid-row: 4/4;\n  z-index: 1;\n}\n.GridContainer .BlogTitle {\n  font-size: 24px;\n  color: #FFF;\n  margin-top: 20px;\n  grid-column: 3/5;\n}\n.GridContainer .BlogContent {\n  font-size: 14px;\n  color: #FFF;\n  width: 90%;\n  max-height: 80px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  grid-column: 3/5;\n}\n.GridContainer .BlogLink {\n  grid-column: 3/5;\n  color: #FFF;\n}\n.GridContainer .BlogLink button {\n  font-size: 14px;\n  border: none;\n  padding: 0;\n  background: none;\n  color: #D0046C;\n  cursor: pointer;\n}\n\n@container (max-width: 475px) {\n  .GridContainerWrapper {\n    display: grid;\n  }\n\n  .GridContainer {\n    margin: auto;\n    width: 100%;\n    min-height: 400px;\n    gap: 10%;\n    padding-bottom: 30px;\n    border-radius: 5px;\n    background-color: #07072A;\n    margin-bottom: 20px;\n    display: grid;\n    grid-template-rows: repeat(auto-fit, minmax(50px, 1fr));\n    grid-template-rows: auto auto auto 50px;\n    grid-template-columns: 15px auto auto 15px;\n    gap: 10px;\n  }\n  .GridContainer .BlogBanner {\n    grid-column: 1/5;\n    grid-row: 1/3;\n    margin: 0;\n  }\n  .GridContainer .BlogBanner img {\n    width: 100%;\n    height: 232px;\n    border-radius: 5px 5px 0 0;\n  }\n  .GridContainer .BlogDate {\n    grid-column: 2/3;\n    grid-row: 2/3;\n    font-size: 12px;\n    border-radius: 5px 5px 0 0;\n    padding: 10px;\n    width: fit-content;\n    text-align: center;\n    color: #FFFFFF;\n    background-color: #0D0D4D;\n    z-index: 1;\n  }\n  .GridContainer .BlogTitle {\n    grid-column: 2/4;\n    font-size: 24px;\n    color: #FFF;\n  }\n  .GridContainer .BlogContent {\n    grid-column: 2/4;\n    font-size: 14px;\n    color: #FFF;\n  }\n  .GridContainer .BlogLink {\n    grid-column: 2/4;\n    color: #FFF;\n    cursor: pointer;\n  }\n  .GridContainer .BlogLink button {\n    font-size: 14px;\n    border: none;\n    background: none;\n    color: #D0046C;\n    cursor: pointer;\n  }\n}";
+const blogArticlesGridCss = ":host {\n  display: block;\n}\n\n.BlogPageContainer {\n  background: #0A0A17;\n  padding: 20px;\n}\n\n.GridContainerWrapper {\n  display: flex;\n  flex-flow: row wrap;\n  gap: 20px;\n}\n\n.GridContainer {\n  container-type: inline-size;\n  container-name: article;\n  border-radius: 15px;\n  color: #000;\n  flex: 1 1 400px;\n  overflow: hidden;\n}\n.GridContainer:first-child {\n  width: 100%;\n  flex-basis: auto;\n}\n.GridContainer .GridWrapper {\n  display: flex;\n  flex-direction: row;\n  height: 280px;\n  background: #fff;\n}\n.GridContainer .GridSector {\n  flex-basis: 50%;\n  position: relative;\n}\n.GridContainer .GridSector:first-of-type {\n  height: 280px;\n  display: flex;\n}\n.GridContainer .GridSector:last-of-type {\n  padding: 20px 40px;\n  display: flex;\n  flex-direction: column;\n}\n.GridContainer .VisualContent {\n  width: 100%;\n}\n.GridContainer .BlogDate {\n  position: absolute;\n  bottom: 0px;\n  left: 30px;\n  font-size: 12px;\n  border-radius: 5px 5px 0 0;\n  padding: 10px;\n  width: fit-content;\n  text-align: center;\n  color: #FFF;\n  background-color: #CD0B5E;\n  z-index: 1;\n}\n.GridContainer .BlogTitle {\n  font-size: 24px;\n  color: #000;\n  padding-bottom: 10px;\n}\n.GridContainer .BlogContent {\n  display: -webkit-box;\n  font-size: 14px;\n  line-height: 1.2em;\n  -webkit-line-clamp: 6;\n  color: #000;\n  -webkit-box-orient: vertical;\n  box-sizing: border-box;\n  text-overflow: ellipsis;\n  overflow: hidden;\n}\n.GridContainer .BlogLink {\n  color: #000;\n  position: absolute;\n  bottom: 16px;\n}\n.GridContainer .BlogLink button {\n  font-size: 14px;\n  border: none;\n  padding: 0;\n  background: none;\n  color: #D0046C;\n  cursor: pointer;\n}\n\n@container article (max-width: 550px) {\n  .GridContainer .GridWrapper {\n    height: 380px;\n    flex-direction: column;\n  }\n  .GridContainer .GridWrapper .GridSector:first-of-type {\n    height: 120px;\n    flex-shrink: 0;\n    flex-basis: 150px;\n  }\n  .GridContainer .GridWrapper .GridSector:last-of-type {\n    padding: 20px 20px 40px;\n  }\n}";
 
@@ -131,2 +131,6 @@ const BlogArticlesGrid = class {
     /**
+    * Customize pagination: Activate pagination numbered navigation
+    */
+    this.blogsLimit = '0';
+    /**
      * Intl date format
@@ -150,2 +154,3 @@ */
     this.device = '';
+    this.totalBlogs = 0;
     this.defaultStyling = `
@@ -341,2 +346,3 @@ div#PaginationContainer {
       this.previousPage = blogContent.pages.previous;
+      this.totalBlogs = blogContent.total;
       const latestFeatured = this.findLatestFeatured(blogItems);
@@ -371,14 +377,14 @@ this.blogData = this.sortArticlesByDate(blogItems);
   render() {
-    var _a, _b, _c;
+    var _a, _b;
     if (this.hasErrors) {
       return (h("div", { class: "BlogArticleDetails" }, h("div", { class: "Title" }, translate$1('error', this.language))));
     }
-    return (h("div", { ref: el => this.stylingContainer = el }, h("div", { class: "BlogPageContainer" }, h("div", { class: "BlogGridPaginationWrapper" }, this.paginationActive == true && (((_a = this.blogData) === null || _a === void 0 ? void 0 : _a.items.length) > this.blogsLimit) && h("helper-pagination", { "next-page": this.nextPage, "prev-page": this.previousPage, offset: this.paginationBlogList.offset, limit: this.blogsLimit, total: (_c = (_b = this.blogData) === null || _b === void 0 ? void 0 : _b.items) === null || _c === void 0 ? void 0 : _c.length, language: this.language, "client-styling": this.clientStyling || this.defaultStyling, "arrows-active": this.arrowsActive || false, "secondary-arrows-active": this.secondaryArrowsActive || false, "numbered-nav-active": this.numberedNavActive || false })), (!this.isLoading) &&
+    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) &&
       h("div", { class: `GridContainerWrapper BlogPage-${this.currentPage}` }, this.blogData && this.blogData.map((data) => {
         var _a, _b;
-        return h("div", { class: "GridContainer" }, this.showPublishingDate &&
-          h("div", { class: "BlogDate" }, this.formatDate(data === null || data === void 0 ? void 0 : data.publishingDate)), this.showImage && (h("div", { class: "BlogBanner" }, ((_a = data.image) === null || _a === void 0 ? void 0 : _a.src) ? (h("img", { src: this.setImage(data.image), alt: data.image.slug })) : (((_b = data.video) === null || _b === void 0 ? void 0 : _b.sources[this.device]) ? (h("video", { src: data.video.sources[this.device], controls: true })) : (h("h1", { style: { color: "white" } }, "No Image"))))), this.showTitle &&
+        return h("div", { class: "GridContainer" }, h("div", { class: "GridWrapper" }, h("div", { class: "GridSector" }, this.showPublishingDate &&
+          h("div", { class: "BlogDate" }, this.formatDate(data === null || data === void 0 ? void 0 : data.publishingDate)), this.showImage && ((_a = data.image) === null || _a === void 0 ? void 0 : _a.src) ? (h("div", { class: "VisualContent", style: { background: `url(${this.setImage(data.image)}) no-repeat center center / cover` } })) : (((_b = data.video) === null || _b === void 0 ? void 0 : _b.sources[this.device]) ? (h("video", { class: "VisualContent", src: data.video.sources[this.device], controls: true })) : (h("h1", { class: "VisualContent", style: { color: "#fff" } }, "No Image")))), h("div", { class: "GridSector" }, this.showTitle &&
           h("div", { class: "BlogTitle" }, data === null || data === void 0 ? void 0 : data.title), this.showContent &&
           this.renderContentConditionally(data === null || data === void 0 ? void 0 : data.descriptionPreview), this.showButton &&
-          h("div", { class: "BlogLink" }, h("button", { onClick: () => this.getArticleId(data === null || data === void 0 ? void 0 : data.postID, data === null || data === void 0 ? void 0 : data.slug, data === null || data === void 0 ? void 0 : data.customPath) }, translate$1('readmore', this.language))));
+          h("div", { class: "BlogLink" }, h("button", { onClick: () => this.getArticleId(data === null || data === void 0 ? void 0 : data.postID, data === null || data === void 0 ? void 0 : data.slug, data === null || data === void 0 ? void 0 : data.customPath) }, translate$1('readmore', this.language))))));
       })))));
@@ -385,0 +391,0 @@ }

dist/esm/blog-articles-grid.js

@@ -16,3 +16,3 @@ import { p as promiseResolve, b as bootstrapLazy } from './index-c02b7464.js';
 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]},[[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],"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);
 });

dist/esm/loader.js

@@ -13,3 +13,3 @@ import { p as promiseResolve, b as bootstrapLazy } from './index-c02b7464.js';
   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]},[[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],"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);
   });
@@ -16,0 +16,0 @@ };

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

@@ -96,2 +96,3 @@ import { EventEmitter } from '../../stencil-public-runtime';
   blogData: any;
+  totalBlogs: number;
   lastPage: number;
@@ -98,0 +99,0 @@ handleBannerReady(): void;

package.json

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

New alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Lines of code

8223

increased by0.04%

Worsened metrics

Total package byte prevSize

456144

decreased by-0.34%

No dependency changes