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

Comparing version 1.13.8 to 1.13.10

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

@@ -1,1 +0,1 @@
-import{p as e,b as t}from"./p-f0d2badc.js";(()=>{const t=import.meta.url,n={};return""!==t&&(n.resourcesUrl=new URL(".",t).href),e(n)})().then((e=>t([["p-bb849e0f",[[1,"blog-articles-grid",{cmsEndpoint:[1,"cms-endpoint"],language:[1],handleClick:[1,"handle-click"],clientStyling:[1,"client-styling"],clientStylingUrl:[1,"client-styling-url"],showPublishingDate:[4,"show-publishing-date"],showImage:[4,"show-image"],showTitle:[4,"show-title"],showContent:[4,"show-content"],showButton:[4,"show-button"],usePostmessage:[4,"use-postmessage"],postMessageEvent:[1,"post-message-event"],blogsLimit:[514,"blogs-limit"],paginationActive:[516,"pagination-active"],arrowsActive:[516,"arrows-active"],secondaryArrowsActive:[516,"secondary-arrows-active"],numberedNavActive:[516,"numbered-nav-active"],paginationBlogList:[32],currentPage:[32],hasErrors:[32],limitStylingAppends:[32],isLoading:[32],bannerMatrixReady:[32]},[[8,"WebComponentsReady","handleBannerReady"],[0,"hpPageChange","hpPageChange"]]],[1,"helper-pagination",{firstPage:[1540,"first-page"],previousPage:[1540,"previous-page"],offset:[1538],limit:[1538],total:[1538],language:[513],clientStyling:[513,"client-styling"],clientStylingUrlContent:[513,"client-styling-url-content"],offsetInt:[32],lastPage:[32],limitInt:[32],totalInt:[32],pagesArray:[32],endInt:[32],limitStylingAppends:[32]}]]]],e)));
+import{p as e,b as t}from"./p-f0d2badc.js";(()=>{const t=import.meta.url,n={};return""!==t&&(n.resourcesUrl=new URL(".",t).href),e(n)})().then((e=>t([["p-d93771be",[[1,"blog-articles-grid",{cmsEndpoint:[1,"cms-endpoint"],language:[1],handleClick:[1,"handle-click"],clientStyling:[1,"client-styling"],clientStylingUrl:[1,"client-styling-url"],showPublishingDate:[4,"show-publishing-date"],showImage:[4,"show-image"],showTitle:[4,"show-title"],showContent:[4,"show-content"],showButton:[4,"show-button"],usePostmessage:[4,"use-postmessage"],postMessageEvent:[1,"post-message-event"],blogsLimit:[514,"blogs-limit"],paginationActive:[516,"pagination-active"],arrowsActive:[516,"arrows-active"],secondaryArrowsActive:[516,"secondary-arrows-active"],numberedNavActive:[516,"numbered-nav-active"],paginationBlogList:[32],currentPage:[32],hasErrors:[32],limitStylingAppends:[32],isLoading:[32],bannerMatrixReady:[32],nextPage:[32],previousPage:[32]},[[8,"WebComponentsReady","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

@@ -82,3 +82,4 @@ 'use strict';
     this.bannerMatrixReady = false;
-    this.blogsLists = [];
+    this.nextPage = '';
+    this.previousPage = '';
     this.defaultStyling = `
@@ -183,2 +184,3 @@ div#PaginationContainer {
     this.currentPage = Math.floor(((_a = this.paginationBlogList) === null || _a === void 0 ? void 0 : _a.offset) / ((_b = this.paginationBlogList) === null || _b === void 0 ? void 0 : _b.limit));
+    this.getBlogArticleGrid();
   }
@@ -225,2 +227,4 @@ handleAction(postId) {
     let url = new URL(`${this.cmsEndpoint}/${this.language}/blog-posts`);
+    url.searchParams.append('per_page', JSON.stringify(this.blogsLimit));
+    url.searchParams.append('page', JSON.stringify(this.currentPage + 1));
     fetch(url.href)
@@ -235,19 +239,11 @@ .then((res) => {
       .then((blogContent) => {
-      const latestFeatured = this.findLatestFeatured(blogContent);
-      this.blogData = this.sortArticlesByDate(blogContent);
-      this.blogData = this.moveLatestFeatureToStart(this.blogData, latestFeatured);
-      this.blogData = this.blogData.map((item) => {
+      let blogItems = blogContent.items;
+      this.nextPage = blogContent.pages.next;
+      this.previousPage = blogContent.pages.previous;
+      const latestFeatured = this.findLatestFeatured(blogItems);
+      this.blogData = this.sortArticlesByDate(blogItems);
+      this.blogData = this.moveLatestFeatureToStart(blogItems, latestFeatured);
+      this.blogData.items = blogItems.map((item) => {
         return Object.assign(Object.assign({}, item), { publishingDate: new Date(item.publishingDate).toLocaleDateString() });
       });
-      if (this.paginationActive == true) {
-        // start api call mock structure for pagination
-        const newArray = this.blogData.map(a => (Object.assign({}, a)));
-        newArray.forEach((_) => {
-          this.blogsLists.push(newArray.splice(0, this.blogsLimit));
-        });
-        if (newArray.length) {
-          this.blogsLists.push(newArray.splice(0, this.blogsLimit)); // add the rest of the remaining elements in order to simulate the last blog page
-        }
-        // end api call mock structure for pagination
-      }
       this.isLoading = false;
@@ -273,7 +269,8 @@ })
   render() {
+    var _a, _b;
     if (this.hasErrors) {
       return (index.h("div", { class: "BlogArticleDetails" }, index.h("div", { class: "Title" }, translate$1('error', this.language))));
     }
-    if (!this.isLoading) {
-      return (index.h("div", { ref: el => this.stylingContainer = el }, index.h("div", { class: "TicketsHistoryPaginationWrapper" }, (this.blogData.length > this.blogsLimit - 1) && this.paginationActive == true && index.h("helper-pagination", { "first-page": false, "previous-page": false, offset: this.paginationBlogList.offset, limit: this.blogsLimit, total: this.blogData.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 })), index.h("div", { class: "GridContainerWrapper" }, (this.paginationActive ? this.blogsLists[this.currentPage] : this.blogData).map((data) => {
+    return (index.h("div", { ref: el => this.stylingContainer = el }, index.h("div", { class: "BlogGridPaginationWrapper" }, this.paginationActive == true && 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 || false, "secondary-arrows-active": this.secondaryArrowsActive || false, "numbered-nav-active": this.numberedNavActive || false })), (!this.isLoading) &&
+      index.h("div", { class: "GridContainerWrapper" }, this.blogData.map((data) => {
         var _a;
@@ -287,3 +284,2 @@ return index.h("div", { class: "GridContainer" }, this.showPublishingDate &&
       }))));
-    }
   }
@@ -343,3 +339,3 @@ static get watchers() { return {
 
-const helperPaginationCss = "@import url(\"https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap\");:host{display:block;font-family:\"Roboto\", sans-serif}#PaginationContainer{width:100%;margin-top:20px;display:inline-flex;justify-content:space-between;align-items:center}.LeftItems button:not(:first-child),.RightItems button:not(:last-child){margin:0 10px}.LeftItems button,.RightItems button{padding:0;background-color:#009993;border-color:#009993}.PaginationArea{display:inline-flex;gap:10px;list-style:none}.PaginationArea li{margin:0;padding:0}.PaginationArea li button{width:24px;height:24px;display:flex;border:0;padding:0;justify-content:center;align-items:center;background-color:transparent;color:#000;cursor:pointer;pointer-events:all}.PaginationItem.ActiveItem button{background:#009993;border-color:#009993;color:#fff}.PaginationItem.ActiveItem button:disabled{pointer-events:none;cursor:not-allowed}.PaginationItem button:hover,.PaginationItem button:active{background:#009993;border-color:#009993;color:#fff;opacity:0.8}button{width:100px;height:32px;border:1px solid #524e52;border-radius:5px;background:#524e52;color:#fff;font-size:14px;font:inherit;cursor:pointer;transition:all 0.1s linear;text-transform:uppercase;text-align:center;letter-spacing:0}button:hover,button:active{background:#004D4A;border-color:#004D4A}button:disabled{background-color:#ccc;border-color:#ccc;color:#fff;cursor:not-allowed}@media screen and (max-width: 720px){button{width:90px;font-size:12px}}@media screen and (max-width: 480px){button{width:70px;font-size:10px}.paginationArea{padding:5px}}@media screen and (max-width: 320px){button{width:58px;font-size:10px}.paginationArea{padding:5px;gap:5px}}@media (hover: none){.paginationItem button:hover{background:inherit;border-color:inherit;color:inherit;opacity:1}.paginationItem.activeItem button:hover{background:#009993;border-color:#009993;color:#fff}}";
+const helperPaginationCss = "@import url(\"https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap\");:host{display:block;font-family:\"Roboto\", sans-serif}#PaginationContainer{width:100%;margin:20px 0;display:inline-flex;justify-content:space-between;align-items:center}.LeftItems button:not(:first-child),.RightItems button:not(:last-child){margin:0 10px}.LeftItems button,.RightItems button{padding:0;background-color:#009993;border-color:#009993}.PaginationArea{display:inline-flex;gap:10px;list-style:none}.PaginationArea li{margin:0;padding:0}.PaginationArea li button{width:24px;height:24px;display:flex;border:0;padding:0;justify-content:center;align-items:center;background-color:transparent;color:#000;cursor:pointer;pointer-events:all}.PaginationItem.ActiveItem button{background:#009993;border-color:#009993;color:#fff}.PaginationItem.ActiveItem button:disabled{pointer-events:none;cursor:not-allowed}.PaginationItem button:hover,.PaginationItem button:active{background:#009993;border-color:#009993;color:#fff;opacity:0.8}button{width:100px;height:32px;border:1px solid #524e52;border-radius:5px;background:#524e52;color:#fff;font-size:14px;font:inherit;cursor:pointer;transition:all 0.1s linear;text-transform:uppercase;text-align:center;letter-spacing:0}button:hover,button:active{background:#004D4A;border-color:#004D4A}button:disabled{background-color:#ccc;border-color:#ccc;color:#fff;cursor:not-allowed}@media screen and (max-width: 720px){button{width:90px;font-size:14px}}@media screen and (max-width: 480px){button{width:70px;font-size:14px}.paginationArea{padding:5px}}@media screen and (max-width: 320px){button{width:58px;font-size:12px}.paginationArea{padding:5px;gap:5px}}@media (hover: none){.paginationItem button:hover{background:inherit;border-color:inherit;color:inherit;opacity:1}.paginationItem.activeItem button:hover{background:#009993;border-color:#009993;color:#fff}}";
 
@@ -351,9 +347,9 @@ const HelperPagination = class {
     /**
-     * First page boolean value - determines if the page is disabled or active
+     * Next page string value - determines if the next page is disabled or active
      */
-    this.firstPage = false;
+    this.nextPage = '';
     /**
-     * Previous page boolean value - determines if the page is disabled or active
+     * Previous page string value - determines if the previous page is disabled or active
      */
-    this.previousPage = false;
+    this.prevPage = '';
     /**
@@ -376,4 +372,4 @@ * The received offset
     /**
-   * Client custom styling via string
-   */
+     * Client custom styling via string
+     */
     this.clientStyling = '';
@@ -385,2 +381,10 @@ /**
     /**
+     * Component working variable for last page
+     */
+    this.lastPage = false;
+    /**
+     * Component working variable for prvious page
+     */
+    this.previousPage = false;
+    /**
      * In component working variable for the array of pages
@@ -408,16 +412,17 @@ */
         case 'previousPage':
-          this.offsetInt -= 10;
+          this.offsetInt -= this.limitInt;
           break;
         case 'nextPage':
-          this.offsetInt += 10;
+          this.offsetInt += this.limitInt;
           break;
         case 'fivePagesBack':
-          this.offsetInt -= 30;
-          this.offsetInt = this.offsetInt < 0 ? 0 : this.offsetInt;
+          this.offsetInt -= this.limitInt * 5;
+          this.offsetInt = this.offsetInt <= 0 ? 0 : this.offsetInt;
           break;
         case 'fivePagesForward':
-          this.offsetInt += 30;
-          this.offsetInt = this.offsetInt / 10 >= this.endInt ? this.endInt * 10 : this.offsetInt;
+          this.offsetInt += this.limitInt * 5;
+          this.offsetInt = this.offsetInt / this.limitInt >= this.endInt ? this.endInt * this.limitInt : this.offsetInt;
           break;
       }
+      this.previousPage = !this.offsetInt ? false : true;
       this.hpPageChange.emit({ offset: this.offsetInt, limit: this.limitInt, total: this.totalInt });
@@ -429,8 +434,10 @@ };
     this.paginationNavigation = (pageNumber, index) => {
+      this.previousPage = true;
       if (!isNaN(pageNumber)) {
         if (pageNumber === 1) {
           this.offsetInt = pageNumber - 1;
+          this.previousPage = false;
         }
         else {
-          this.offsetInt = (pageNumber - 1) * 10;
+          this.offsetInt = (pageNumber - 1) * this.limitInt;
         }
@@ -449,3 +456,2 @@ }
       }
-      this.currentPage = this.offsetInt;
       this.hpPageChange.emit({ offset: this.offsetInt, limit: this.limitInt, total: this.totalInt });
@@ -468,4 +474,5 @@ };
     this.offsetInt = this.offset;
-    this.currentPage = this.offsetInt / this.limitInt + 1;
     this.limitInt = this.limit;
+    this.currentPage = (this.offsetInt / this.limitInt) + 1;
+    this.limitInt = this.limit;
     this.totalInt = this.total;
@@ -477,3 +484,3 @@ this.endInt = (Math.ceil(this.totalInt / this.limitInt) - 1);
      */
-    if (this.currentPage === 1 || this.currentPage === 2) {
+    if (this.currentPage == 1 || this.currentPage == 2) {
       this.pagesArray = Array.from({ length: 4 }, (_, i) => i + 1);
@@ -513,6 +520,7 @@ this.pagesArray.push('...');
      */
-    let buttonsLeftSide = index.h("div", { class: "LeftItems" }, index.h("button", { disabled: !this.previousPage, onClick: this.navigateTo.bind(this, 'firstPage') }, translate('firstPage', this.language)), index.h("button", { disabled: !this.previousPage ? true : false, onClick: this.navigateTo.bind(this, 'previousPage') }, translate('previousPage', this.language)));
+    let buttonSecondaryLeftSide = index.h("button", { disabled: this.prevPage ? false : true, onClick: this.navigateTo.bind(this, 'firstPage') }, index.h("span", { class: "NavigationButton" }, translate('firstPage', this.language)), index.h("span", { class: "NavigationIcon" }));
+    let buttonsLeftSide = index.h("div", { class: "LeftItems" }, this.secondaryArrowsActive && buttonSecondaryLeftSide, index.h("button", { disabled: this.prevPage ? false : true, onClick: this.navigateTo.bind(this, 'previousPage') }, index.h("span", { class: "NavigationButton" }, translate('previousPage', this.language)), index.h("span", { class: "NavigationIcon" })));
     if (isMobile(this.userAgent)) {
       buttonsLeftSide =
-        index.h("div", { class: "LeftItems" }, index.h("button", { disabled: !this.previousPage ? true : false, onClick: this.navigateTo.bind(this, 'previousPage') }, translate('previousPage', this.language)));
+        index.h("div", { class: "LeftItems" }, index.h("button", { disabled: this.prevPage ? false : true, onClick: this.navigateTo.bind(this, 'previousPage') }, index.h("span", { class: "NavigationButton" }, translate('previousPage', this.language)), index.h("span", { class: "NavigationIcon" })));
     }
@@ -522,8 +530,9 @@ /**
      */
-    let buttonsRightSide = index.h("div", { class: "RightItems" }, index.h("button", { disabled: !this.lastPage ? true : false, onClick: this.navigateTo.bind(this, 'nextPage') }, translate('nextPage', this.language)), index.h("button", { disabled: !this.lastPage ? true : false, onClick: this.navigateTo.bind(this, 'lastPage') }, translate('lastPage', this.language)));
+    let buttonSecondaryRightSide = index.h("button", { disabled: this.nextPage ? false : true, onClick: this.navigateTo.bind(this, 'lastPage') }, index.h("span", { class: "NavigationButton" }, translate('lastPage', this.language)), index.h("span", { class: "NavigationIcon" }));
+    let buttonsRightSide = index.h("div", { class: "RightItems" }, index.h("button", { disabled: this.nextPage ? false : true, onClick: this.navigateTo.bind(this, 'nextPage') }, index.h("span", { class: "NavigationButton" }, translate('nextPage', this.language)), index.h("span", { class: "NavigationIcon" })), this.secondaryArrowsActive && buttonSecondaryRightSide);
     if (isMobile(this.userAgent)) {
       buttonsRightSide =
-        index.h("div", { class: "RightItems" }, index.h("button", { disabled: !this.lastPage ? true : false, onClick: this.navigateTo.bind(this, 'nextPage') }, translate('nextPage', this.language)));
+        index.h("div", { class: "RightItems" }, index.h("button", { disabled: this.nextPage ? false : true, onClick: this.navigateTo.bind(this, 'nextPage') }, index.h("span", { class: "NavigationButton" }, translate('nextPage', this.language)), index.h("span", { class: "NavigationIcon" })));
     }
-    return (index.h("div", { id: "PaginationContainer" }, buttonsLeftSide, navigationArea, buttonsRightSide));
+    return (index.h("div", { id: "PaginationContainer", ref: el => this.stylingContainer = el }, this.arrowsActive && buttonsLeftSide, this.numberedNavActive && navigationArea, this.arrowsActive && buttonsRightSide));
   }
@@ -530,0 +539,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":[1,"cms-endpoint"],"language":[1],"handleClick":[1,"handle-click"],"clientStyling":[1,"client-styling"],"clientStylingUrl":[1,"client-styling-url"],"showPublishingDate":[4,"show-publishing-date"],"showImage":[4,"show-image"],"showTitle":[4,"show-title"],"showContent":[4,"show-content"],"showButton":[4,"show-button"],"usePostmessage":[4,"use-postmessage"],"postMessageEvent":[1,"post-message-event"],"blogsLimit":[514,"blogs-limit"],"paginationActive":[516,"pagination-active"],"arrowsActive":[516,"arrows-active"],"secondaryArrowsActive":[516,"secondary-arrows-active"],"numberedNavActive":[516,"numbered-nav-active"],"paginationBlogList":[32],"currentPage":[32],"hasErrors":[32],"limitStylingAppends":[32],"isLoading":[32],"bannerMatrixReady":[32]},[[8,"WebComponentsReady","handleBannerReady"],[0,"hpPageChange","hpPageChange"]]],[1,"helper-pagination",{"firstPage":[1540,"first-page"],"previousPage":[1540,"previous-page"],"offset":[1538],"limit":[1538],"total":[1538],"language":[513],"clientStyling":[513,"client-styling"],"clientStylingUrlContent":[513,"client-styling-url-content"],"offsetInt":[32],"lastPage":[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":[1,"cms-endpoint"],"language":[1],"handleClick":[1,"handle-click"],"clientStyling":[1,"client-styling"],"clientStylingUrl":[1,"client-styling-url"],"showPublishingDate":[4,"show-publishing-date"],"showImage":[4,"show-image"],"showTitle":[4,"show-title"],"showContent":[4,"show-content"],"showButton":[4,"show-button"],"usePostmessage":[4,"use-postmessage"],"postMessageEvent":[1,"post-message-event"],"blogsLimit":[514,"blogs-limit"],"paginationActive":[516,"pagination-active"],"arrowsActive":[516,"arrows-active"],"secondaryArrowsActive":[516,"secondary-arrows-active"],"numberedNavActive":[516,"numbered-nav-active"],"paginationBlogList":[32],"currentPage":[32],"hasErrors":[32],"limitStylingAppends":[32],"isLoading":[32],"bannerMatrixReady":[32],"nextPage":[32],"previousPage":[32]},[[8,"WebComponentsReady","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":[1,"cms-endpoint"],"language":[1],"handleClick":[1,"handle-click"],"clientStyling":[1,"client-styling"],"clientStylingUrl":[1,"client-styling-url"],"showPublishingDate":[4,"show-publishing-date"],"showImage":[4,"show-image"],"showTitle":[4,"show-title"],"showContent":[4,"show-content"],"showButton":[4,"show-button"],"usePostmessage":[4,"use-postmessage"],"postMessageEvent":[1,"post-message-event"],"blogsLimit":[514,"blogs-limit"],"paginationActive":[516,"pagination-active"],"arrowsActive":[516,"arrows-active"],"secondaryArrowsActive":[516,"secondary-arrows-active"],"numberedNavActive":[516,"numbered-nav-active"],"paginationBlogList":[32],"currentPage":[32],"hasErrors":[32],"limitStylingAppends":[32],"isLoading":[32],"bannerMatrixReady":[32]},[[8,"WebComponentsReady","handleBannerReady"],[0,"hpPageChange","hpPageChange"]]],[1,"helper-pagination",{"firstPage":[1540,"first-page"],"previousPage":[1540,"previous-page"],"offset":[1538],"limit":[1538],"total":[1538],"language":[513],"clientStyling":[513,"client-styling"],"clientStylingUrlContent":[513,"client-styling-url-content"],"offsetInt":[32],"lastPage":[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":[1,"cms-endpoint"],"language":[1],"handleClick":[1,"handle-click"],"clientStyling":[1,"client-styling"],"clientStylingUrl":[1,"client-styling-url"],"showPublishingDate":[4,"show-publishing-date"],"showImage":[4,"show-image"],"showTitle":[4,"show-title"],"showContent":[4,"show-content"],"showButton":[4,"show-button"],"usePostmessage":[4,"use-postmessage"],"postMessageEvent":[1,"post-message-event"],"blogsLimit":[514,"blogs-limit"],"paginationActive":[516,"pagination-active"],"arrowsActive":[516,"arrows-active"],"secondaryArrowsActive":[516,"secondary-arrows-active"],"numberedNavActive":[516,"numbered-nav-active"],"paginationBlogList":[32],"currentPage":[32],"hasErrors":[32],"limitStylingAppends":[32],"isLoading":[32],"bannerMatrixReady":[32],"nextPage":[32],"previousPage":[32]},[[8,"WebComponentsReady","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

@@ -50,3 +50,4 @@ import { Component, Prop, State, Event, Watch, h, Listen } from '@stencil/core';
     this.bannerMatrixReady = false;
-    this.blogsLists = [];
+    this.nextPage = '';
+    this.previousPage = '';
     this.defaultStyling = `
@@ -151,2 +152,3 @@ div#PaginationContainer {
     this.currentPage = Math.floor(((_a = this.paginationBlogList) === null || _a === void 0 ? void 0 : _a.offset) / ((_b = this.paginationBlogList) === null || _b === void 0 ? void 0 : _b.limit));
+    this.getBlogArticleGrid();
   }
@@ -193,2 +195,4 @@ handleAction(postId) {
     let url = new URL(`${this.cmsEndpoint}/${this.language}/blog-posts`);
+    url.searchParams.append('per_page', JSON.stringify(this.blogsLimit));
+    url.searchParams.append('page', JSON.stringify(this.currentPage + 1));
     fetch(url.href)
@@ -203,19 +207,11 @@ .then((res) => {
       .then((blogContent) => {
-      const latestFeatured = this.findLatestFeatured(blogContent);
-      this.blogData = this.sortArticlesByDate(blogContent);
-      this.blogData = this.moveLatestFeatureToStart(this.blogData, latestFeatured);
-      this.blogData = this.blogData.map((item) => {
+      let blogItems = blogContent.items;
+      this.nextPage = blogContent.pages.next;
+      this.previousPage = blogContent.pages.previous;
+      const latestFeatured = this.findLatestFeatured(blogItems);
+      this.blogData = this.sortArticlesByDate(blogItems);
+      this.blogData = this.moveLatestFeatureToStart(blogItems, latestFeatured);
+      this.blogData.items = blogItems.map((item) => {
         return Object.assign(Object.assign({}, item), { publishingDate: new Date(item.publishingDate).toLocaleDateString() });
       });
-      if (this.paginationActive == true) {
-        // start api call mock structure for pagination
-        const newArray = this.blogData.map(a => (Object.assign({}, a)));
-        newArray.forEach((_) => {
-          this.blogsLists.push(newArray.splice(0, this.blogsLimit));
-        });
-        if (newArray.length) {
-          this.blogsLists.push(newArray.splice(0, this.blogsLimit)); // add the rest of the remaining elements in order to simulate the last blog page
-        }
-        // end api call mock structure for pagination
-      }
       this.isLoading = false;
@@ -241,2 +237,3 @@ })
   render() {
+    var _a, _b;
     if (this.hasErrors) {
@@ -246,6 +243,6 @@ return (h("div", { class: "BlogArticleDetails" },
     }
-    if (!this.isLoading) {
-      return (h("div", { ref: el => this.stylingContainer = el },
-        h("div", { class: "TicketsHistoryPaginationWrapper" }, (this.blogData.length > this.blogsLimit - 1) && this.paginationActive == true && h("helper-pagination", { "first-page": false, "previous-page": false, offset: this.paginationBlogList.offset, limit: this.blogsLimit, total: this.blogData.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: "GridContainerWrapper" }, (this.paginationActive ? this.blogsLists[this.currentPage] : this.blogData).map((data) => {
+    return (h("div", { ref: el => this.stylingContainer = el },
+      h("div", { class: "BlogGridPaginationWrapper" }, this.paginationActive == true && 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 || false, "secondary-arrows-active": this.secondaryArrowsActive || false, "numbered-nav-active": this.numberedNavActive || false })),
+      (!this.isLoading) &&
+        h("div", { class: "GridContainerWrapper" }, this.blogData.map((data) => {
           var _a;
@@ -266,3 +263,2 @@ return h("div", { class: "GridContainer" },
         }))));
-    }
   }
@@ -583,3 +579,5 @@ static get is() { return "blog-articles-grid"; }
     "isLoading": {},
-    "bannerMatrixReady": {}
+    "bannerMatrixReady": {},
+    "nextPage": {},
+    "previousPage": {}
   }; }
@@ -586,0 +584,0 @@ static get events() { return [{

dist/components/blog-articles-grid.js

@@ -81,3 +81,4 @@ import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
     this.bannerMatrixReady = false;
-    this.blogsLists = [];
+    this.nextPage = '';
+    this.previousPage = '';
     this.defaultStyling = `
@@ -182,2 +183,3 @@ div#PaginationContainer {
     this.currentPage = Math.floor(((_a = this.paginationBlogList) === null || _a === void 0 ? void 0 : _a.offset) / ((_b = this.paginationBlogList) === null || _b === void 0 ? void 0 : _b.limit));
+    this.getBlogArticleGrid();
   }
@@ -224,2 +226,4 @@ handleAction(postId) {
     let url = new URL(`${this.cmsEndpoint}/${this.language}/blog-posts`);
+    url.searchParams.append('per_page', JSON.stringify(this.blogsLimit));
+    url.searchParams.append('page', JSON.stringify(this.currentPage + 1));
     fetch(url.href)
@@ -234,19 +238,11 @@ .then((res) => {
       .then((blogContent) => {
-      const latestFeatured = this.findLatestFeatured(blogContent);
-      this.blogData = this.sortArticlesByDate(blogContent);
-      this.blogData = this.moveLatestFeatureToStart(this.blogData, latestFeatured);
-      this.blogData = this.blogData.map((item) => {
+      let blogItems = blogContent.items;
+      this.nextPage = blogContent.pages.next;
+      this.previousPage = blogContent.pages.previous;
+      const latestFeatured = this.findLatestFeatured(blogItems);
+      this.blogData = this.sortArticlesByDate(blogItems);
+      this.blogData = this.moveLatestFeatureToStart(blogItems, latestFeatured);
+      this.blogData.items = blogItems.map((item) => {
         return Object.assign(Object.assign({}, item), { publishingDate: new Date(item.publishingDate).toLocaleDateString() });
       });
-      if (this.paginationActive == true) {
-        // start api call mock structure for pagination
-        const newArray = this.blogData.map(a => (Object.assign({}, a)));
-        newArray.forEach((_) => {
-          this.blogsLists.push(newArray.splice(0, this.blogsLimit));
-        });
-        if (newArray.length) {
-          this.blogsLists.push(newArray.splice(0, this.blogsLimit)); // add the rest of the remaining elements in order to simulate the last blog page
-        }
-        // end api call mock structure for pagination
-      }
       this.isLoading = false;
@@ -272,7 +268,8 @@ })
   render() {
+    var _a, _b;
     if (this.hasErrors) {
       return (h("div", { class: "BlogArticleDetails" }, h("div", { class: "Title" }, translate('error', this.language))));
     }
-    if (!this.isLoading) {
-      return (h("div", { ref: el => this.stylingContainer = el }, h("div", { class: "TicketsHistoryPaginationWrapper" }, (this.blogData.length > this.blogsLimit - 1) && this.paginationActive == true && h("helper-pagination", { "first-page": false, "previous-page": false, offset: this.paginationBlogList.offset, limit: this.blogsLimit, total: this.blogData.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: "GridContainerWrapper" }, (this.paginationActive ? this.blogsLists[this.currentPage] : this.blogData).map((data) => {
+    return (h("div", { ref: el => this.stylingContainer = el }, h("div", { class: "BlogGridPaginationWrapper" }, this.paginationActive == true && 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 || false, "secondary-arrows-active": this.secondaryArrowsActive || false, "numbered-nav-active": this.numberedNavActive || false })), (!this.isLoading) &&
+      h("div", { class: "GridContainerWrapper" }, this.blogData.map((data) => {
         var _a;
@@ -286,3 +283,2 @@ return h("div", { class: "GridContainer" }, this.showPublishingDate &&
       }))));
-    }
   }
@@ -317,3 +313,5 @@ static get watchers() { return {
     "isLoading": [32],
-    "bannerMatrixReady": [32]
+    "bannerMatrixReady": [32],
+    "nextPage": [32],
+    "previousPage": [32]
   }, [[8, "WebComponentsReady", "handleBannerReady"], [0, "hpPageChange", "hpPageChange"]]]);
@@ -320,0 +318,0 @@ function defineCustomElement$1() {

dist/components/helper-pagination2.js

@@ -49,3 +49,3 @@ import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
 
-const helperPaginationCss = "@import url(\"https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap\");:host{display:block;font-family:\"Roboto\", sans-serif}#PaginationContainer{width:100%;margin-top:20px;display:inline-flex;justify-content:space-between;align-items:center}.LeftItems button:not(:first-child),.RightItems button:not(:last-child){margin:0 10px}.LeftItems button,.RightItems button{padding:0;background-color:#009993;border-color:#009993}.PaginationArea{display:inline-flex;gap:10px;list-style:none}.PaginationArea li{margin:0;padding:0}.PaginationArea li button{width:24px;height:24px;display:flex;border:0;padding:0;justify-content:center;align-items:center;background-color:transparent;color:#000;cursor:pointer;pointer-events:all}.PaginationItem.ActiveItem button{background:#009993;border-color:#009993;color:#fff}.PaginationItem.ActiveItem button:disabled{pointer-events:none;cursor:not-allowed}.PaginationItem button:hover,.PaginationItem button:active{background:#009993;border-color:#009993;color:#fff;opacity:0.8}button{width:100px;height:32px;border:1px solid #524e52;border-radius:5px;background:#524e52;color:#fff;font-size:14px;font:inherit;cursor:pointer;transition:all 0.1s linear;text-transform:uppercase;text-align:center;letter-spacing:0}button:hover,button:active{background:#004D4A;border-color:#004D4A}button:disabled{background-color:#ccc;border-color:#ccc;color:#fff;cursor:not-allowed}@media screen and (max-width: 720px){button{width:90px;font-size:12px}}@media screen and (max-width: 480px){button{width:70px;font-size:10px}.paginationArea{padding:5px}}@media screen and (max-width: 320px){button{width:58px;font-size:10px}.paginationArea{padding:5px;gap:5px}}@media (hover: none){.paginationItem button:hover{background:inherit;border-color:inherit;color:inherit;opacity:1}.paginationItem.activeItem button:hover{background:#009993;border-color:#009993;color:#fff}}";
+const helperPaginationCss = "@import url(\"https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap\");:host{display:block;font-family:\"Roboto\", sans-serif}#PaginationContainer{width:100%;margin:20px 0;display:inline-flex;justify-content:space-between;align-items:center}.LeftItems button:not(:first-child),.RightItems button:not(:last-child){margin:0 10px}.LeftItems button,.RightItems button{padding:0;background-color:#009993;border-color:#009993}.PaginationArea{display:inline-flex;gap:10px;list-style:none}.PaginationArea li{margin:0;padding:0}.PaginationArea li button{width:24px;height:24px;display:flex;border:0;padding:0;justify-content:center;align-items:center;background-color:transparent;color:#000;cursor:pointer;pointer-events:all}.PaginationItem.ActiveItem button{background:#009993;border-color:#009993;color:#fff}.PaginationItem.ActiveItem button:disabled{pointer-events:none;cursor:not-allowed}.PaginationItem button:hover,.PaginationItem button:active{background:#009993;border-color:#009993;color:#fff;opacity:0.8}button{width:100px;height:32px;border:1px solid #524e52;border-radius:5px;background:#524e52;color:#fff;font-size:14px;font:inherit;cursor:pointer;transition:all 0.1s linear;text-transform:uppercase;text-align:center;letter-spacing:0}button:hover,button:active{background:#004D4A;border-color:#004D4A}button:disabled{background-color:#ccc;border-color:#ccc;color:#fff;cursor:not-allowed}@media screen and (max-width: 720px){button{width:90px;font-size:14px}}@media screen and (max-width: 480px){button{width:70px;font-size:14px}.paginationArea{padding:5px}}@media screen and (max-width: 320px){button{width:58px;font-size:12px}.paginationArea{padding:5px;gap:5px}}@media (hover: none){.paginationItem button:hover{background:inherit;border-color:inherit;color:inherit;opacity:1}.paginationItem.activeItem button:hover{background:#009993;border-color:#009993;color:#fff}}";
 
@@ -59,9 +59,9 @@ const HelperPagination = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     /**
-     * First page boolean value - determines if the page is disabled or active
+     * Next page string value - determines if the next page is disabled or active
      */
-    this.firstPage = false;
+    this.nextPage = '';
     /**
-     * Previous page boolean value - determines if the page is disabled or active
+     * Previous page string value - determines if the previous page is disabled or active
      */
-    this.previousPage = false;
+    this.prevPage = '';
     /**
@@ -84,4 +84,4 @@ * The received offset
     /**
-   * Client custom styling via string
-   */
+     * Client custom styling via string
+     */
     this.clientStyling = '';
@@ -93,2 +93,10 @@ /**
     /**
+     * Component working variable for last page
+     */
+    this.lastPage = false;
+    /**
+     * Component working variable for prvious page
+     */
+    this.previousPage = false;
+    /**
      * In component working variable for the array of pages
@@ -116,16 +124,17 @@ */
         case 'previousPage':
-          this.offsetInt -= 10;
+          this.offsetInt -= this.limitInt;
           break;
         case 'nextPage':
-          this.offsetInt += 10;
+          this.offsetInt += this.limitInt;
           break;
         case 'fivePagesBack':
-          this.offsetInt -= 30;
-          this.offsetInt = this.offsetInt < 0 ? 0 : this.offsetInt;
+          this.offsetInt -= this.limitInt * 5;
+          this.offsetInt = this.offsetInt <= 0 ? 0 : this.offsetInt;
           break;
         case 'fivePagesForward':
-          this.offsetInt += 30;
-          this.offsetInt = this.offsetInt / 10 >= this.endInt ? this.endInt * 10 : this.offsetInt;
+          this.offsetInt += this.limitInt * 5;
+          this.offsetInt = this.offsetInt / this.limitInt >= this.endInt ? this.endInt * this.limitInt : this.offsetInt;
           break;
       }
+      this.previousPage = !this.offsetInt ? false : true;
       this.hpPageChange.emit({ offset: this.offsetInt, limit: this.limitInt, total: this.totalInt });
@@ -137,8 +146,10 @@ };
     this.paginationNavigation = (pageNumber, index) => {
+      this.previousPage = true;
       if (!isNaN(pageNumber)) {
         if (pageNumber === 1) {
           this.offsetInt = pageNumber - 1;
+          this.previousPage = false;
         }
         else {
-          this.offsetInt = (pageNumber - 1) * 10;
+          this.offsetInt = (pageNumber - 1) * this.limitInt;
         }
@@ -157,3 +168,2 @@ }
       }
-      this.currentPage = this.offsetInt;
       this.hpPageChange.emit({ offset: this.offsetInt, limit: this.limitInt, total: this.totalInt });
@@ -176,4 +186,5 @@ };
     this.offsetInt = this.offset;
-    this.currentPage = this.offsetInt / this.limitInt + 1;
     this.limitInt = this.limit;
+    this.currentPage = (this.offsetInt / this.limitInt) + 1;
+    this.limitInt = this.limit;
     this.totalInt = this.total;
@@ -185,3 +196,3 @@ this.endInt = (Math.ceil(this.totalInt / this.limitInt) - 1);
      */
-    if (this.currentPage === 1 || this.currentPage === 2) {
+    if (this.currentPage == 1 || this.currentPage == 2) {
       this.pagesArray = Array.from({ length: 4 }, (_, i) => i + 1);
@@ -221,6 +232,7 @@ this.pagesArray.push('...');
      */
-    let buttonsLeftSide = h("div", { class: "LeftItems" }, h("button", { disabled: !this.previousPage, onClick: this.navigateTo.bind(this, 'firstPage') }, translate('firstPage', this.language)), h("button", { disabled: !this.previousPage ? true : false, onClick: this.navigateTo.bind(this, 'previousPage') }, translate('previousPage', this.language)));
+    let buttonSecondaryLeftSide = h("button", { disabled: this.prevPage ? false : true, onClick: this.navigateTo.bind(this, 'firstPage') }, h("span", { class: "NavigationButton" }, translate('firstPage', this.language)), h("span", { class: "NavigationIcon" }));
+    let buttonsLeftSide = h("div", { class: "LeftItems" }, this.secondaryArrowsActive && buttonSecondaryLeftSide, h("button", { disabled: this.prevPage ? false : true, onClick: this.navigateTo.bind(this, 'previousPage') }, h("span", { class: "NavigationButton" }, translate('previousPage', this.language)), h("span", { class: "NavigationIcon" })));
     if (isMobile(this.userAgent)) {
       buttonsLeftSide =
-        h("div", { class: "LeftItems" }, h("button", { disabled: !this.previousPage ? true : false, onClick: this.navigateTo.bind(this, 'previousPage') }, translate('previousPage', this.language)));
+        h("div", { class: "LeftItems" }, h("button", { disabled: this.prevPage ? false : true, onClick: this.navigateTo.bind(this, 'previousPage') }, h("span", { class: "NavigationButton" }, translate('previousPage', this.language)), h("span", { class: "NavigationIcon" })));
     }
@@ -230,21 +242,26 @@ /**
      */
-    let buttonsRightSide = h("div", { class: "RightItems" }, h("button", { disabled: !this.lastPage ? true : false, onClick: this.navigateTo.bind(this, 'nextPage') }, translate('nextPage', this.language)), h("button", { disabled: !this.lastPage ? true : false, onClick: this.navigateTo.bind(this, 'lastPage') }, translate('lastPage', this.language)));
+    let buttonSecondaryRightSide = h("button", { disabled: this.nextPage ? false : true, onClick: this.navigateTo.bind(this, 'lastPage') }, h("span", { class: "NavigationButton" }, translate('lastPage', this.language)), h("span", { class: "NavigationIcon" }));
+    let buttonsRightSide = h("div", { class: "RightItems" }, h("button", { disabled: this.nextPage ? false : true, onClick: this.navigateTo.bind(this, 'nextPage') }, h("span", { class: "NavigationButton" }, translate('nextPage', this.language)), h("span", { class: "NavigationIcon" })), this.secondaryArrowsActive && buttonSecondaryRightSide);
     if (isMobile(this.userAgent)) {
       buttonsRightSide =
-        h("div", { class: "RightItems" }, h("button", { disabled: !this.lastPage ? true : false, onClick: this.navigateTo.bind(this, 'nextPage') }, translate('nextPage', this.language)));
+        h("div", { class: "RightItems" }, h("button", { disabled: this.nextPage ? false : true, onClick: this.navigateTo.bind(this, 'nextPage') }, h("span", { class: "NavigationButton" }, translate('nextPage', this.language)), h("span", { class: "NavigationIcon" })));
     }
-    return (h("div", { id: "PaginationContainer" }, buttonsLeftSide, navigationArea, buttonsRightSide));
+    return (h("div", { id: "PaginationContainer", ref: el => this.stylingContainer = el }, this.arrowsActive && buttonsLeftSide, this.numberedNavActive && navigationArea, this.arrowsActive && buttonsRightSide));
   }
   static get style() { return helperPaginationCss; }
 }, [1, "helper-pagination", {
-    "firstPage": [1540, "first-page"],
-    "previousPage": [1540, "previous-page"],
+    "nextPage": [1537, "next-page"],
+    "prevPage": [1537, "prev-page"],
     "offset": [1538],
     "limit": [1538],
     "total": [1538],
-    "language": [513],
-    "clientStyling": [513, "client-styling"],
-    "clientStylingUrlContent": [513, "client-styling-url-content"],
+    "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],
@@ -251,0 +268,0 @@ "totalInt": [32],

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

@@ -78,3 +78,4 @@ import { r as registerInstance, c as createEvent, h } from './index-04850975.js';
     this.bannerMatrixReady = false;
-    this.blogsLists = [];
+    this.nextPage = '';
+    this.previousPage = '';
     this.defaultStyling = `
@@ -179,2 +180,3 @@ div#PaginationContainer {
     this.currentPage = Math.floor(((_a = this.paginationBlogList) === null || _a === void 0 ? void 0 : _a.offset) / ((_b = this.paginationBlogList) === null || _b === void 0 ? void 0 : _b.limit));
+    this.getBlogArticleGrid();
   }
@@ -221,2 +223,4 @@ handleAction(postId) {
     let url = new URL(`${this.cmsEndpoint}/${this.language}/blog-posts`);
+    url.searchParams.append('per_page', JSON.stringify(this.blogsLimit));
+    url.searchParams.append('page', JSON.stringify(this.currentPage + 1));
     fetch(url.href)
@@ -231,19 +235,11 @@ .then((res) => {
       .then((blogContent) => {
-      const latestFeatured = this.findLatestFeatured(blogContent);
-      this.blogData = this.sortArticlesByDate(blogContent);
-      this.blogData = this.moveLatestFeatureToStart(this.blogData, latestFeatured);
-      this.blogData = this.blogData.map((item) => {
+      let blogItems = blogContent.items;
+      this.nextPage = blogContent.pages.next;
+      this.previousPage = blogContent.pages.previous;
+      const latestFeatured = this.findLatestFeatured(blogItems);
+      this.blogData = this.sortArticlesByDate(blogItems);
+      this.blogData = this.moveLatestFeatureToStart(blogItems, latestFeatured);
+      this.blogData.items = blogItems.map((item) => {
         return Object.assign(Object.assign({}, item), { publishingDate: new Date(item.publishingDate).toLocaleDateString() });
       });
-      if (this.paginationActive == true) {
-        // start api call mock structure for pagination
-        const newArray = this.blogData.map(a => (Object.assign({}, a)));
-        newArray.forEach((_) => {
-          this.blogsLists.push(newArray.splice(0, this.blogsLimit));
-        });
-        if (newArray.length) {
-          this.blogsLists.push(newArray.splice(0, this.blogsLimit)); // add the rest of the remaining elements in order to simulate the last blog page
-        }
-        // end api call mock structure for pagination
-      }
       this.isLoading = false;
@@ -269,7 +265,8 @@ })
   render() {
+    var _a, _b;
     if (this.hasErrors) {
       return (h("div", { class: "BlogArticleDetails" }, h("div", { class: "Title" }, translate$1('error', this.language))));
     }
-    if (!this.isLoading) {
-      return (h("div", { ref: el => this.stylingContainer = el }, h("div", { class: "TicketsHistoryPaginationWrapper" }, (this.blogData.length > this.blogsLimit - 1) && this.paginationActive == true && h("helper-pagination", { "first-page": false, "previous-page": false, offset: this.paginationBlogList.offset, limit: this.blogsLimit, total: this.blogData.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: "GridContainerWrapper" }, (this.paginationActive ? this.blogsLists[this.currentPage] : this.blogData).map((data) => {
+    return (h("div", { ref: el => this.stylingContainer = el }, h("div", { class: "BlogGridPaginationWrapper" }, this.paginationActive == true && 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 || false, "secondary-arrows-active": this.secondaryArrowsActive || false, "numbered-nav-active": this.numberedNavActive || false })), (!this.isLoading) &&
+      h("div", { class: "GridContainerWrapper" }, this.blogData.map((data) => {
         var _a;
@@ -283,3 +280,2 @@ return h("div", { class: "GridContainer" }, this.showPublishingDate &&
       }))));
-    }
   }
@@ -339,3 +335,3 @@ static get watchers() { return {
 
-const helperPaginationCss = "@import url(\"https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap\");:host{display:block;font-family:\"Roboto\", sans-serif}#PaginationContainer{width:100%;margin-top:20px;display:inline-flex;justify-content:space-between;align-items:center}.LeftItems button:not(:first-child),.RightItems button:not(:last-child){margin:0 10px}.LeftItems button,.RightItems button{padding:0;background-color:#009993;border-color:#009993}.PaginationArea{display:inline-flex;gap:10px;list-style:none}.PaginationArea li{margin:0;padding:0}.PaginationArea li button{width:24px;height:24px;display:flex;border:0;padding:0;justify-content:center;align-items:center;background-color:transparent;color:#000;cursor:pointer;pointer-events:all}.PaginationItem.ActiveItem button{background:#009993;border-color:#009993;color:#fff}.PaginationItem.ActiveItem button:disabled{pointer-events:none;cursor:not-allowed}.PaginationItem button:hover,.PaginationItem button:active{background:#009993;border-color:#009993;color:#fff;opacity:0.8}button{width:100px;height:32px;border:1px solid #524e52;border-radius:5px;background:#524e52;color:#fff;font-size:14px;font:inherit;cursor:pointer;transition:all 0.1s linear;text-transform:uppercase;text-align:center;letter-spacing:0}button:hover,button:active{background:#004D4A;border-color:#004D4A}button:disabled{background-color:#ccc;border-color:#ccc;color:#fff;cursor:not-allowed}@media screen and (max-width: 720px){button{width:90px;font-size:12px}}@media screen and (max-width: 480px){button{width:70px;font-size:10px}.paginationArea{padding:5px}}@media screen and (max-width: 320px){button{width:58px;font-size:10px}.paginationArea{padding:5px;gap:5px}}@media (hover: none){.paginationItem button:hover{background:inherit;border-color:inherit;color:inherit;opacity:1}.paginationItem.activeItem button:hover{background:#009993;border-color:#009993;color:#fff}}";
+const helperPaginationCss = "@import url(\"https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap\");:host{display:block;font-family:\"Roboto\", sans-serif}#PaginationContainer{width:100%;margin:20px 0;display:inline-flex;justify-content:space-between;align-items:center}.LeftItems button:not(:first-child),.RightItems button:not(:last-child){margin:0 10px}.LeftItems button,.RightItems button{padding:0;background-color:#009993;border-color:#009993}.PaginationArea{display:inline-flex;gap:10px;list-style:none}.PaginationArea li{margin:0;padding:0}.PaginationArea li button{width:24px;height:24px;display:flex;border:0;padding:0;justify-content:center;align-items:center;background-color:transparent;color:#000;cursor:pointer;pointer-events:all}.PaginationItem.ActiveItem button{background:#009993;border-color:#009993;color:#fff}.PaginationItem.ActiveItem button:disabled{pointer-events:none;cursor:not-allowed}.PaginationItem button:hover,.PaginationItem button:active{background:#009993;border-color:#009993;color:#fff;opacity:0.8}button{width:100px;height:32px;border:1px solid #524e52;border-radius:5px;background:#524e52;color:#fff;font-size:14px;font:inherit;cursor:pointer;transition:all 0.1s linear;text-transform:uppercase;text-align:center;letter-spacing:0}button:hover,button:active{background:#004D4A;border-color:#004D4A}button:disabled{background-color:#ccc;border-color:#ccc;color:#fff;cursor:not-allowed}@media screen and (max-width: 720px){button{width:90px;font-size:14px}}@media screen and (max-width: 480px){button{width:70px;font-size:14px}.paginationArea{padding:5px}}@media screen and (max-width: 320px){button{width:58px;font-size:12px}.paginationArea{padding:5px;gap:5px}}@media (hover: none){.paginationItem button:hover{background:inherit;border-color:inherit;color:inherit;opacity:1}.paginationItem.activeItem button:hover{background:#009993;border-color:#009993;color:#fff}}";
 
@@ -347,9 +343,9 @@ const HelperPagination = class {
     /**
-     * First page boolean value - determines if the page is disabled or active
+     * Next page string value - determines if the next page is disabled or active
      */
-    this.firstPage = false;
+    this.nextPage = '';
     /**
-     * Previous page boolean value - determines if the page is disabled or active
+     * Previous page string value - determines if the previous page is disabled or active
      */
-    this.previousPage = false;
+    this.prevPage = '';
     /**
@@ -372,4 +368,4 @@ * The received offset
     /**
-   * Client custom styling via string
-   */
+     * Client custom styling via string
+     */
     this.clientStyling = '';
@@ -381,2 +377,10 @@ /**
     /**
+     * Component working variable for last page
+     */
+    this.lastPage = false;
+    /**
+     * Component working variable for prvious page
+     */
+    this.previousPage = false;
+    /**
      * In component working variable for the array of pages
@@ -404,16 +408,17 @@ */
         case 'previousPage':
-          this.offsetInt -= 10;
+          this.offsetInt -= this.limitInt;
           break;
         case 'nextPage':
-          this.offsetInt += 10;
+          this.offsetInt += this.limitInt;
           break;
         case 'fivePagesBack':
-          this.offsetInt -= 30;
-          this.offsetInt = this.offsetInt < 0 ? 0 : this.offsetInt;
+          this.offsetInt -= this.limitInt * 5;
+          this.offsetInt = this.offsetInt <= 0 ? 0 : this.offsetInt;
           break;
         case 'fivePagesForward':
-          this.offsetInt += 30;
-          this.offsetInt = this.offsetInt / 10 >= this.endInt ? this.endInt * 10 : this.offsetInt;
+          this.offsetInt += this.limitInt * 5;
+          this.offsetInt = this.offsetInt / this.limitInt >= this.endInt ? this.endInt * this.limitInt : this.offsetInt;
           break;
       }
+      this.previousPage = !this.offsetInt ? false : true;
       this.hpPageChange.emit({ offset: this.offsetInt, limit: this.limitInt, total: this.totalInt });
@@ -425,8 +430,10 @@ };
     this.paginationNavigation = (pageNumber, index) => {
+      this.previousPage = true;
       if (!isNaN(pageNumber)) {
         if (pageNumber === 1) {
           this.offsetInt = pageNumber - 1;
+          this.previousPage = false;
         }
         else {
-          this.offsetInt = (pageNumber - 1) * 10;
+          this.offsetInt = (pageNumber - 1) * this.limitInt;
         }
@@ -445,3 +452,2 @@ }
       }
-      this.currentPage = this.offsetInt;
       this.hpPageChange.emit({ offset: this.offsetInt, limit: this.limitInt, total: this.totalInt });
@@ -464,4 +470,5 @@ };
     this.offsetInt = this.offset;
-    this.currentPage = this.offsetInt / this.limitInt + 1;
     this.limitInt = this.limit;
+    this.currentPage = (this.offsetInt / this.limitInt) + 1;
+    this.limitInt = this.limit;
     this.totalInt = this.total;
@@ -473,3 +480,3 @@ this.endInt = (Math.ceil(this.totalInt / this.limitInt) - 1);
      */
-    if (this.currentPage === 1 || this.currentPage === 2) {
+    if (this.currentPage == 1 || this.currentPage == 2) {
       this.pagesArray = Array.from({ length: 4 }, (_, i) => i + 1);
@@ -509,6 +516,7 @@ this.pagesArray.push('...');
      */
-    let buttonsLeftSide = h("div", { class: "LeftItems" }, h("button", { disabled: !this.previousPage, onClick: this.navigateTo.bind(this, 'firstPage') }, translate('firstPage', this.language)), h("button", { disabled: !this.previousPage ? true : false, onClick: this.navigateTo.bind(this, 'previousPage') }, translate('previousPage', this.language)));
+    let buttonSecondaryLeftSide = h("button", { disabled: this.prevPage ? false : true, onClick: this.navigateTo.bind(this, 'firstPage') }, h("span", { class: "NavigationButton" }, translate('firstPage', this.language)), h("span", { class: "NavigationIcon" }));
+    let buttonsLeftSide = h("div", { class: "LeftItems" }, this.secondaryArrowsActive && buttonSecondaryLeftSide, h("button", { disabled: this.prevPage ? false : true, onClick: this.navigateTo.bind(this, 'previousPage') }, h("span", { class: "NavigationButton" }, translate('previousPage', this.language)), h("span", { class: "NavigationIcon" })));
     if (isMobile(this.userAgent)) {
       buttonsLeftSide =
-        h("div", { class: "LeftItems" }, h("button", { disabled: !this.previousPage ? true : false, onClick: this.navigateTo.bind(this, 'previousPage') }, translate('previousPage', this.language)));
+        h("div", { class: "LeftItems" }, h("button", { disabled: this.prevPage ? false : true, onClick: this.navigateTo.bind(this, 'previousPage') }, h("span", { class: "NavigationButton" }, translate('previousPage', this.language)), h("span", { class: "NavigationIcon" })));
     }
@@ -518,8 +526,9 @@ /**
      */
-    let buttonsRightSide = h("div", { class: "RightItems" }, h("button", { disabled: !this.lastPage ? true : false, onClick: this.navigateTo.bind(this, 'nextPage') }, translate('nextPage', this.language)), h("button", { disabled: !this.lastPage ? true : false, onClick: this.navigateTo.bind(this, 'lastPage') }, translate('lastPage', this.language)));
+    let buttonSecondaryRightSide = h("button", { disabled: this.nextPage ? false : true, onClick: this.navigateTo.bind(this, 'lastPage') }, h("span", { class: "NavigationButton" }, translate('lastPage', this.language)), h("span", { class: "NavigationIcon" }));
+    let buttonsRightSide = h("div", { class: "RightItems" }, h("button", { disabled: this.nextPage ? false : true, onClick: this.navigateTo.bind(this, 'nextPage') }, h("span", { class: "NavigationButton" }, translate('nextPage', this.language)), h("span", { class: "NavigationIcon" })), this.secondaryArrowsActive && buttonSecondaryRightSide);
     if (isMobile(this.userAgent)) {
       buttonsRightSide =
-        h("div", { class: "RightItems" }, h("button", { disabled: !this.lastPage ? true : false, onClick: this.navigateTo.bind(this, 'nextPage') }, translate('nextPage', this.language)));
+        h("div", { class: "RightItems" }, h("button", { disabled: this.nextPage ? false : true, onClick: this.navigateTo.bind(this, 'nextPage') }, h("span", { class: "NavigationButton" }, translate('nextPage', this.language)), h("span", { class: "NavigationIcon" })));
     }
-    return (h("div", { id: "PaginationContainer" }, buttonsLeftSide, navigationArea, buttonsRightSide));
+    return (h("div", { id: "PaginationContainer", ref: el => this.stylingContainer = el }, this.arrowsActive && buttonsLeftSide, this.numberedNavActive && navigationArea, this.arrowsActive && buttonsRightSide));
   }
@@ -526,0 +535,0 @@ };

dist/esm/blog-articles-grid.js

@@ -16,3 +16,3 @@ import { p as promiseResolve, b as bootstrapLazy } from './index-04850975.js';
 patchBrowser().then(options => {
-  return bootstrapLazy([["blog-articles-grid_2",[[1,"blog-articles-grid",{"cmsEndpoint":[1,"cms-endpoint"],"language":[1],"handleClick":[1,"handle-click"],"clientStyling":[1,"client-styling"],"clientStylingUrl":[1,"client-styling-url"],"showPublishingDate":[4,"show-publishing-date"],"showImage":[4,"show-image"],"showTitle":[4,"show-title"],"showContent":[4,"show-content"],"showButton":[4,"show-button"],"usePostmessage":[4,"use-postmessage"],"postMessageEvent":[1,"post-message-event"],"blogsLimit":[514,"blogs-limit"],"paginationActive":[516,"pagination-active"],"arrowsActive":[516,"arrows-active"],"secondaryArrowsActive":[516,"secondary-arrows-active"],"numberedNavActive":[516,"numbered-nav-active"],"paginationBlogList":[32],"currentPage":[32],"hasErrors":[32],"limitStylingAppends":[32],"isLoading":[32],"bannerMatrixReady":[32]},[[8,"WebComponentsReady","handleBannerReady"],[0,"hpPageChange","hpPageChange"]]],[1,"helper-pagination",{"firstPage":[1540,"first-page"],"previousPage":[1540,"previous-page"],"offset":[1538],"limit":[1538],"total":[1538],"language":[513],"clientStyling":[513,"client-styling"],"clientStylingUrlContent":[513,"client-styling-url-content"],"offsetInt":[32],"lastPage":[32],"limitInt":[32],"totalInt":[32],"pagesArray":[32],"endInt":[32],"limitStylingAppends":[32]}]]]], options);
+  return bootstrapLazy([["blog-articles-grid_2",[[1,"blog-articles-grid",{"cmsEndpoint":[1,"cms-endpoint"],"language":[1],"handleClick":[1,"handle-click"],"clientStyling":[1,"client-styling"],"clientStylingUrl":[1,"client-styling-url"],"showPublishingDate":[4,"show-publishing-date"],"showImage":[4,"show-image"],"showTitle":[4,"show-title"],"showContent":[4,"show-content"],"showButton":[4,"show-button"],"usePostmessage":[4,"use-postmessage"],"postMessageEvent":[1,"post-message-event"],"blogsLimit":[514,"blogs-limit"],"paginationActive":[516,"pagination-active"],"arrowsActive":[516,"arrows-active"],"secondaryArrowsActive":[516,"secondary-arrows-active"],"numberedNavActive":[516,"numbered-nav-active"],"paginationBlogList":[32],"currentPage":[32],"hasErrors":[32],"limitStylingAppends":[32],"isLoading":[32],"bannerMatrixReady":[32],"nextPage":[32],"previousPage":[32]},[[8,"WebComponentsReady","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-04850975.js';
   return patchEsm().then(() => {
-  return bootstrapLazy([["blog-articles-grid_2",[[1,"blog-articles-grid",{"cmsEndpoint":[1,"cms-endpoint"],"language":[1],"handleClick":[1,"handle-click"],"clientStyling":[1,"client-styling"],"clientStylingUrl":[1,"client-styling-url"],"showPublishingDate":[4,"show-publishing-date"],"showImage":[4,"show-image"],"showTitle":[4,"show-title"],"showContent":[4,"show-content"],"showButton":[4,"show-button"],"usePostmessage":[4,"use-postmessage"],"postMessageEvent":[1,"post-message-event"],"blogsLimit":[514,"blogs-limit"],"paginationActive":[516,"pagination-active"],"arrowsActive":[516,"arrows-active"],"secondaryArrowsActive":[516,"secondary-arrows-active"],"numberedNavActive":[516,"numbered-nav-active"],"paginationBlogList":[32],"currentPage":[32],"hasErrors":[32],"limitStylingAppends":[32],"isLoading":[32],"bannerMatrixReady":[32]},[[8,"WebComponentsReady","handleBannerReady"],[0,"hpPageChange","hpPageChange"]]],[1,"helper-pagination",{"firstPage":[1540,"first-page"],"previousPage":[1540,"previous-page"],"offset":[1538],"limit":[1538],"total":[1538],"language":[513],"clientStyling":[513,"client-styling"],"clientStylingUrlContent":[513,"client-styling-url-content"],"offsetInt":[32],"lastPage":[32],"limitInt":[32],"totalInt":[32],"pagesArray":[32],"endInt":[32],"limitStylingAppends":[32]}]]]], options);
+  return bootstrapLazy([["blog-articles-grid_2",[[1,"blog-articles-grid",{"cmsEndpoint":[1,"cms-endpoint"],"language":[1],"handleClick":[1,"handle-click"],"clientStyling":[1,"client-styling"],"clientStylingUrl":[1,"client-styling-url"],"showPublishingDate":[4,"show-publishing-date"],"showImage":[4,"show-image"],"showTitle":[4,"show-title"],"showContent":[4,"show-content"],"showButton":[4,"show-button"],"usePostmessage":[4,"use-postmessage"],"postMessageEvent":[1,"post-message-event"],"blogsLimit":[514,"blogs-limit"],"paginationActive":[516,"pagination-active"],"arrowsActive":[516,"arrows-active"],"secondaryArrowsActive":[516,"secondary-arrows-active"],"numberedNavActive":[516,"numbered-nav-active"],"paginationBlogList":[32],"currentPage":[32],"hasErrors":[32],"limitStylingAppends":[32],"isLoading":[32],"bannerMatrixReady":[32],"nextPage":[32],"previousPage":[32]},[[8,"WebComponentsReady","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

@@ -80,5 +80,6 @@ import { EventEmitter } from '../../stencil-public-runtime';
   bannerMatrixReady: boolean;
+  nextPage: string;
+  previousPage: string;
   handleBannerReady(): void;
   watchEndpoint(newValue: string, oldValue: string): void;
-  private blogsLists;
   private stylingContainer;
@@ -85,0 +86,0 @@ private blogData;

package.json

 {
   "name": "@everymatrix/blog-articles-grid",
-  "version": "1.13.8",
+  "version": "1.13.10",
   "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

Total package byte prevSize

435389

increased by1.13%

Lines of code

7574

increased by0.45%

No dependency changes