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

Comparing version 1.13.10 to 1.13.11

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-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)));
+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-5154b3df",[[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],device:[32]},[[8,"BannerMatrixReady","handleBannerReady"],[0,"hpPageChange","hpPageChange"]]],[1,"helper-pagination",{nextPage:[1537,"next-page"],prevPage:[1537,"prev-page"],offset:[1538],limit:[1538],total:[1538],language:[1537],clientStyling:[1537,"client-styling"],clientStylingUrlContent:[1537,"client-styling-url-content"],arrowsActive:[1540,"arrows-active"],secondaryArrowsActive:[1540,"secondary-arrows-active"],numberedNavActive:[1540,"numbered-nav-active"],offsetInt:[32],lastPage:[32],previousPage:[32],limitInt:[32],totalInt:[32],pagesArray:[32],endInt:[32],limitStylingAppends:[32]}]]]],e)));

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

@@ -5,3 +5,3 @@ 'use strict';
 
-const index = require('./index-a19b0ad2.js');
+const index = require('./index-c17538b7.js');
 
@@ -33,2 +33,20 @@ const DEFAULT_LANGUAGE$1 = 'en';
 
+function checkDeviceType() {
+  const userAgent = navigator.userAgent.toLowerCase();
+  const width = screen.availWidth;
+  const height = screen.availHeight;
+  if (userAgent.includes('iphone')) {
+    return 'mobile';
+  }
+  if (userAgent.includes('android')) {
+    if (height > width && width < 800) {
+      return 'mobile';
+    }
+    if (width > height && height < 800) {
+      return 'tablet';
+    }
+  }
+  return 'desktop';
+}
+
 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}";
@@ -86,2 +104,3 @@
     this.previousPage = '';
+    this.device = '';
     this.defaultStyling = `
@@ -159,6 +178,6 @@ div#PaginationContainer {
       if (!hasBanner) {
-        return index.h("div", { class: "BlogContent", innerHTML: this.blogData.content });
+        return index.h("div", { class: "BlogContent", innerHTML: content });
       }
       if (this.bannerMatrixReady) {
-        return index.h("div", { class: "BlogContent", innerHTML: this.blogData.content });
+        return index.h("div", { class: "BlogContent", innerHTML: content });
       }
@@ -187,2 +206,4 @@ return null;
     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));
+    if (this.currentPage + 1 > this.lastPage)
+      return;
     this.getBlogArticleGrid();
@@ -200,3 +221,7 @@ }
     window.postMessage({ type: 'BlogArticlesGridLoaded' }, window.location.href);
+    this.detectAndAlertDeviceType();
   }
+  detectAndAlertDeviceType() {
+    this.device = checkDeviceType();
+  }
   sortArticlesByDate(arr) {
@@ -242,2 +267,3 @@ arr.sort((a, b) => {
       .then((blogContent) => {
+      this.lastPage = +blogContent.pages.last.slice(blogContent.pages.last.lastIndexOf('=') + 1);
       let blogItems = blogContent.items;
@@ -271,2 +297,9 @@ this.nextPage = blogContent.pages.next;
   }
+  formatDateToYearMonthDay(dateString) {
+    let date = new Date(dateString);
+    let year = date.getFullYear();
+    let month = String(date.getMonth() + 1).padStart(2, '0');
+    let day = String(date.getDate()).padStart(2, '0');
+    return `${day}-${month}-${year}`;
+  }
   render() {
@@ -279,6 +312,5 @@ var _a, _b;
       index.h("div", { class: "GridContainerWrapper" }, this.blogData.map((data) => {
-        var _a;
+        var _a, _b;
         return index.h("div", { class: "GridContainer" }, this.showPublishingDate &&
-          index.h("div", { class: "BlogDate" }, data === null || data === void 0 ? void 0 : data.publishingDate), this.showImage &&
-          index.h("div", { class: "BlogBanner" }, index.h("img", { src: (_a = data === null || data === void 0 ? void 0 : data.image) === null || _a === void 0 ? void 0 : _a.src, alt: data === null || data === void 0 ? void 0 : data.title })), this.showTitle &&
+          index.h("div", { class: "BlogDate" }, this.formatDateToYearMonthDay(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: data.image.src, alt: data.image.src })) : (((_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 &&
           index.h("div", { class: "BlogTitle" }, data === null || data === void 0 ? void 0 : data.title), this.showContent &&
@@ -285,0 +317,0 @@ this.renderContentConditionally(data === null || data === void 0 ? void 0 : data.content), this.showButton &&

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

 'use strict';
 
-const index = require('./index-a19b0ad2.js');
+const index = require('./index-c17538b7.js');
 
@@ -18,3 +18,3 @@ /*
 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],"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);
+  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],"device":[32]},[[8,"BannerMatrixReady","handleBannerReady"],[0,"hpPageChange","hpPageChange"]]],[1,"helper-pagination",{"nextPage":[1537,"next-page"],"prevPage":[1537,"prev-page"],"offset":[1538],"limit":[1538],"total":[1538],"language":[1537],"clientStyling":[1537,"client-styling"],"clientStylingUrlContent":[1537,"client-styling-url-content"],"arrowsActive":[1540,"arrows-active"],"secondaryArrowsActive":[1540,"secondary-arrows-active"],"numberedNavActive":[1540,"numbered-nav-active"],"offsetInt":[32],"lastPage":[32],"previousPage":[32],"limitInt":[32],"totalInt":[32],"pagesArray":[32],"endInt":[32],"limitStylingAppends":[32]}]]]], options);
 });

dist/cjs/loader.cjs.js

@@ -5,3 +5,3 @@ 'use strict';
 
-const index = require('./index-a19b0ad2.js');
+const index = require('./index-c17538b7.js');
 
@@ -18,3 +18,3 @@ /*
   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],"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);
+  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],"device":[32]},[[8,"BannerMatrixReady","handleBannerReady"],[0,"hpPageChange","hpPageChange"]]],[1,"helper-pagination",{"nextPage":[1537,"next-page"],"prevPage":[1537,"prev-page"],"offset":[1538],"limit":[1538],"total":[1538],"language":[1537],"clientStyling":[1537,"client-styling"],"clientStylingUrlContent":[1537,"client-styling-url-content"],"arrowsActive":[1540,"arrows-active"],"secondaryArrowsActive":[1540,"secondary-arrows-active"],"numberedNavActive":[1540,"numbered-nav-active"],"offsetInt":[32],"lastPage":[32],"previousPage":[32],"limitInt":[32],"totalInt":[32],"pagesArray":[32],"endInt":[32],"limitStylingAppends":[32]}]]]], options);
   });
@@ -21,0 +21,0 @@ };

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

 import { Component, Prop, State, Event, Watch, h, Listen } from '@stencil/core';
 import { translate } from '../../utils/locale.utils';
+import { checkDeviceType } from '../../utils/utils';
 import '@everymatrix/helper-pagination';
@@ -52,2 +53,3 @@ export class BlogArticlesGrid {
     this.previousPage = '';
+    this.device = '';
     this.defaultStyling = `
@@ -125,6 +127,6 @@ div#PaginationContainer {
       if (!hasBanner) {
-        return h("div", { class: "BlogContent", innerHTML: this.blogData.content });
+        return h("div", { class: "BlogContent", innerHTML: content });
       }
       if (this.bannerMatrixReady) {
-        return h("div", { class: "BlogContent", innerHTML: this.blogData.content });
+        return h("div", { class: "BlogContent", innerHTML: content });
       }
@@ -153,2 +155,4 @@ return null;
     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));
+    if (this.currentPage + 1 > this.lastPage)
+      return;
     this.getBlogArticleGrid();
@@ -166,3 +170,7 @@ }
     window.postMessage({ type: 'BlogArticlesGridLoaded' }, window.location.href);
+    this.detectAndAlertDeviceType();
   }
+  detectAndAlertDeviceType() {
+    this.device = checkDeviceType();
+  }
   sortArticlesByDate(arr) {
@@ -208,2 +216,3 @@ arr.sort((a, b) => {
       .then((blogContent) => {
+      this.lastPage = +blogContent.pages.last.slice(blogContent.pages.last.lastIndexOf('=') + 1);
       let blogItems = blogContent.items;
@@ -237,2 +246,9 @@ this.nextPage = blogContent.pages.next;
   }
+  formatDateToYearMonthDay(dateString) {
+    let date = new Date(dateString);
+    let year = date.getFullYear();
+    let month = String(date.getMonth() + 1).padStart(2, '0');
+    let day = String(date.getDate()).padStart(2, '0');
+    return `${day}-${month}-${year}`;
+  }
   render() {
@@ -248,9 +264,7 @@ var _a, _b;
         h("div", { class: "GridContainerWrapper" }, this.blogData.map((data) => {
-          var _a;
+          var _a, _b;
           return h("div", { class: "GridContainer" },
             this.showPublishingDate &&
-              h("div", { class: "BlogDate" }, data === null || data === void 0 ? void 0 : data.publishingDate),
-            this.showImage &&
-              h("div", { class: "BlogBanner" },
-                h("img", { src: (_a = data === null || data === void 0 ? void 0 : data.image) === null || _a === void 0 ? void 0 : _a.src, alt: data === null || data === void 0 ? void 0 : data.title })),
+              h("div", { class: "BlogDate" }, this.formatDateToYearMonthDay(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: data.image.src, alt: data.image.src })) : (((_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 &&
@@ -581,3 +595,4 @@ h("div", { class: "BlogTitle" }, data === null || data === void 0 ? void 0 : data.title),
     "nextPage": {},
-    "previousPage": {}
+    "previousPage": {},
+    "device": {}
   }; }
@@ -612,3 +627,3 @@ static get events() { return [{
   static get listeners() { return [{
-      "name": "WebComponentsReady",
+      "name": "BannerMatrixReady",
       "method": "handleBannerReady",
@@ -615,0 +630,0 @@ "target": "window",

dist/components/blog-articles-grid.js

@@ -29,2 +29,20 @@ import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
 
+function checkDeviceType() {
+  const userAgent = navigator.userAgent.toLowerCase();
+  const width = screen.availWidth;
+  const height = screen.availHeight;
+  if (userAgent.includes('iphone')) {
+    return 'mobile';
+  }
+  if (userAgent.includes('android')) {
+    if (height > width && width < 800) {
+      return 'mobile';
+    }
+    if (width > height && height < 800) {
+      return 'tablet';
+    }
+  }
+  return 'desktop';
+}
+
 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}";
@@ -84,2 +102,3 @@
     this.previousPage = '';
+    this.device = '';
     this.defaultStyling = `
@@ -157,6 +176,6 @@ div#PaginationContainer {
       if (!hasBanner) {
-        return h("div", { class: "BlogContent", innerHTML: this.blogData.content });
+        return h("div", { class: "BlogContent", innerHTML: content });
       }
       if (this.bannerMatrixReady) {
-        return h("div", { class: "BlogContent", innerHTML: this.blogData.content });
+        return h("div", { class: "BlogContent", innerHTML: content });
       }
@@ -185,2 +204,4 @@ return null;
     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));
+    if (this.currentPage + 1 > this.lastPage)
+      return;
     this.getBlogArticleGrid();
@@ -198,3 +219,7 @@ }
     window.postMessage({ type: 'BlogArticlesGridLoaded' }, window.location.href);
+    this.detectAndAlertDeviceType();
   }
+  detectAndAlertDeviceType() {
+    this.device = checkDeviceType();
+  }
   sortArticlesByDate(arr) {
@@ -240,2 +265,3 @@ arr.sort((a, b) => {
       .then((blogContent) => {
+      this.lastPage = +blogContent.pages.last.slice(blogContent.pages.last.lastIndexOf('=') + 1);
       let blogItems = blogContent.items;
@@ -269,2 +295,9 @@ this.nextPage = blogContent.pages.next;
   }
+  formatDateToYearMonthDay(dateString) {
+    let date = new Date(dateString);
+    let year = date.getFullYear();
+    let month = String(date.getMonth() + 1).padStart(2, '0');
+    let day = String(date.getDate()).padStart(2, '0');
+    return `${day}-${month}-${year}`;
+  }
   render() {
@@ -277,6 +310,5 @@ var _a, _b;
       h("div", { class: "GridContainerWrapper" }, this.blogData.map((data) => {
-        var _a;
+        var _a, _b;
         return h("div", { class: "GridContainer" }, this.showPublishingDate &&
-          h("div", { class: "BlogDate" }, data === null || data === void 0 ? void 0 : data.publishingDate), this.showImage &&
-          h("div", { class: "BlogBanner" }, h("img", { src: (_a = data === null || data === void 0 ? void 0 : data.image) === null || _a === void 0 ? void 0 : _a.src, alt: data === null || data === void 0 ? void 0 : data.title })), this.showTitle &&
+          h("div", { class: "BlogDate" }, this.formatDateToYearMonthDay(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: data.image.src, alt: data.image.src })) : (((_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 &&
@@ -317,4 +349,5 @@ this.renderContentConditionally(data === null || data === void 0 ? void 0 : data.content), this.showButton &&
     "nextPage": [32],
-    "previousPage": [32]
-  }, [[8, "WebComponentsReady", "handleBannerReady"], [0, "hpPageChange", "hpPageChange"]]]);
+    "previousPage": [32],
+    "device": [32]
+  }, [[8, "BannerMatrixReady", "handleBannerReady"], [0, "hpPageChange", "hpPageChange"]]]);
 function defineCustomElement$1() {
@@ -321,0 +354,0 @@ if (typeof customElements === "undefined") {

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

@@ -1,2 +0,2 @@
-import { r as registerInstance, c as createEvent, h } from './index-04850975.js';
+import { r as registerInstance, c as createEvent, h } from './index-c02b7464.js';
 
@@ -28,2 +28,20 @@ const DEFAULT_LANGUAGE$1 = 'en';
 
+function checkDeviceType() {
+  const userAgent = navigator.userAgent.toLowerCase();
+  const width = screen.availWidth;
+  const height = screen.availHeight;
+  if (userAgent.includes('iphone')) {
+    return 'mobile';
+  }
+  if (userAgent.includes('android')) {
+    if (height > width && width < 800) {
+      return 'mobile';
+    }
+    if (width > height && height < 800) {
+      return 'tablet';
+    }
+  }
+  return 'desktop';
+}
+
 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}";
@@ -81,2 +99,3 @@
     this.previousPage = '';
+    this.device = '';
     this.defaultStyling = `
@@ -154,6 +173,6 @@ div#PaginationContainer {
       if (!hasBanner) {
-        return h("div", { class: "BlogContent", innerHTML: this.blogData.content });
+        return h("div", { class: "BlogContent", innerHTML: content });
       }
       if (this.bannerMatrixReady) {
-        return h("div", { class: "BlogContent", innerHTML: this.blogData.content });
+        return h("div", { class: "BlogContent", innerHTML: content });
       }
@@ -182,2 +201,4 @@ return null;
     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));
+    if (this.currentPage + 1 > this.lastPage)
+      return;
     this.getBlogArticleGrid();
@@ -195,3 +216,7 @@ }
     window.postMessage({ type: 'BlogArticlesGridLoaded' }, window.location.href);
+    this.detectAndAlertDeviceType();
   }
+  detectAndAlertDeviceType() {
+    this.device = checkDeviceType();
+  }
   sortArticlesByDate(arr) {
@@ -237,2 +262,3 @@ arr.sort((a, b) => {
       .then((blogContent) => {
+      this.lastPage = +blogContent.pages.last.slice(blogContent.pages.last.lastIndexOf('=') + 1);
       let blogItems = blogContent.items;
@@ -266,2 +292,9 @@ this.nextPage = blogContent.pages.next;
   }
+  formatDateToYearMonthDay(dateString) {
+    let date = new Date(dateString);
+    let year = date.getFullYear();
+    let month = String(date.getMonth() + 1).padStart(2, '0');
+    let day = String(date.getDate()).padStart(2, '0');
+    return `${day}-${month}-${year}`;
+  }
   render() {
@@ -274,6 +307,5 @@ var _a, _b;
       h("div", { class: "GridContainerWrapper" }, this.blogData.map((data) => {
-        var _a;
+        var _a, _b;
         return h("div", { class: "GridContainer" }, this.showPublishingDate &&
-          h("div", { class: "BlogDate" }, data === null || data === void 0 ? void 0 : data.publishingDate), this.showImage &&
-          h("div", { class: "BlogBanner" }, h("img", { src: (_a = data === null || data === void 0 ? void 0 : data.image) === null || _a === void 0 ? void 0 : _a.src, alt: data === null || data === void 0 ? void 0 : data.title })), this.showTitle &&
+          h("div", { class: "BlogDate" }, this.formatDateToYearMonthDay(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: data.image.src, alt: data.image.src })) : (((_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 &&
@@ -280,0 +312,0 @@ this.renderContentConditionally(data === null || data === void 0 ? void 0 : data.content), this.showButton &&

dist/esm/blog-articles-grid.js

@@ -1,2 +0,2 @@
-import { p as promiseResolve, b as bootstrapLazy } from './index-04850975.js';
+import { p as promiseResolve, b as bootstrapLazy } from './index-c02b7464.js';
 
@@ -16,3 +16,3 @@ /*
 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],"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);
+  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],"device":[32]},[[8,"BannerMatrixReady","handleBannerReady"],[0,"hpPageChange","hpPageChange"]]],[1,"helper-pagination",{"nextPage":[1537,"next-page"],"prevPage":[1537,"prev-page"],"offset":[1538],"limit":[1538],"total":[1538],"language":[1537],"clientStyling":[1537,"client-styling"],"clientStylingUrlContent":[1537,"client-styling-url-content"],"arrowsActive":[1540,"arrows-active"],"secondaryArrowsActive":[1540,"secondary-arrows-active"],"numberedNavActive":[1540,"numbered-nav-active"],"offsetInt":[32],"lastPage":[32],"previousPage":[32],"limitInt":[32],"totalInt":[32],"pagesArray":[32],"endInt":[32],"limitStylingAppends":[32]}]]]], options);
 });

dist/esm/loader.js

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

@@ -82,2 +82,4 @@ import { EventEmitter } from '../../stencil-public-runtime';
   previousPage: string;
+  device: string;
+  lastPage: number;
   handleBannerReady(): void;
@@ -92,2 +94,3 @@ watchEndpoint(newValue: string, oldValue: string): void;
   componentDidLoad(): void;
+  detectAndAlertDeviceType(): void;
   sortArticlesByDate(arr: any): any;
@@ -100,4 +103,5 @@ findLatestFeatured(array: any): any;
   setClientStylingURL: () => void;
+  formatDateToYearMonthDay(dateString: any): string;
   renderContentConditionally: (content: string) => HTMLElement;
   render(): void;
 }

package.json

 {
   "name": "@everymatrix/blog-articles-grid",
-  "version": "1.13.10",
+  "version": "1.13.11",
   "main": "./dist/index.cjs.js",
@@ -20,5 +20,5 @@ "module": "./dist/index.js",
   "dependencies": {
-    "@everymatrix/helper-modal": "*",
+    "@everymatrix/helper-pagination": "*",
     "@stencil/core": "2.17.4"
   }
 }

New alerts

Wildcard dependency

Quality

Package has a dependency with a floating version range. This can cause issues if the dependency publishes a new major version.

Found 1 instance in 1 package

Fixed alerts

Wildcard dependency

Quality

Package has a dependency with a floating version range. This can cause issues if the dependency publishes a new major version.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

443083

increased by1.77%

Lines of code

7759

increased by2.44%

Dependency changes

• + Added@everymatrix/helper-pagination@*

• + Added@everymatrix/helper-pagination@1.50.0(transitive)

• - Removed@everymatrix/helper-modal@*

• - Removed@everymatrix/helper-modal@1.50.0(transitive)