@everymatrix/blog-articles-grid 1.98.29 → 1.98.31

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

@@ -5,39 +5,65 @@ const TRANSLATIONS$1 = {
     en: {
         error: 'Error',
         readmore: 'Read more',
+        home: 'Home',
+        blog: 'Blog',
+        blogPageTitle: 'Blog',
     },
     ro: {
         error: 'Eroare',
         readmore: 'Read more',
+        home: 'Acasă',
+        blog: 'Blog',
+        blogPageTitle: 'Blog',
     },
     fr: {
         error: 'Error',
         readmore: 'Read more',
+        home: 'Accueil',
+        blog: 'Blog',
+        blogPageTitle: 'Blog',
     },
     ar: {
         error: 'خطأ',
         readmore: 'Read more',
+        home: 'الرئيسية',
+        blog: 'المدونة',
+        blogPageTitle: 'المدونة',
     },
     hu: {
         error: 'خطأ',
         readmore: 'Tovább olvasom',
+        home: 'Kezdőlap',
+        blog: 'Blog',
+        blogPageTitle: 'Blog',
     },
     hr: {
         error: 'Greška',
-        readmore: 'Pročitaj više'
+        readmore: 'Pročitaj više',
+        home: 'Početna',
+        blog: 'Blog',
+        blogPageTitle: 'Blog',
     },
     'pt-br': {
         error: 'Erro',
-        readmore: 'Ler mais'
+        readmore: 'Ler mais',
+        home: 'Início',
+        blog: 'Blog',
+        blogPageTitle: 'Blog',
     },
     'es-mx': {
         error: 'Error',
-        readmore: 'Leer más'
+        readmore: 'Leer más',
+        home: 'Inicio',
+        blog: 'Blog',
+        blogPageTitle: 'Blog',
     }
 };
-const translate$1 = (key, customLang) => {
-    const lang = customLang;
-    return TRANSLATIONS$1[(lang !== undefined) && (lang in TRANSLATIONS$1) ? lang : DEFAULT_LANGUAGE$1][key];
+const translate$1 = (key, customLang, customTranslations) => {
+    var _a;
+    const lang = customLang !== null && customLang !== void 0 ? customLang : DEFAULT_LANGUAGE$1;
+    const override = (_a = customTranslations === null || customTranslations === void 0 ? void 0 : customTranslations[lang]) === null || _a === void 0 ? void 0 : _a[key];
+    return typeof override === 'string' ? override : TRANSLATIONS$1[lang in TRANSLATIONS$1 ? lang : DEFAULT_LANGUAGE$1][key];
 };
 
 const StyleCacheKey = '__WIDGET_GLOBAL_STYLE_CACHE__';
@@ -245,7 +271,7 @@ const getDevicePlatform = () => {
     return 'mtWeb';
 };
 
-const blogArticlesGridCss = ":host {\n  display: block;\n}\n\n.BlogPageContainer {\n  background: #0A0A17;\n  padding: 20px;\n}\n\n.GridContainerWrapper {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: 20px;\n}\n\n.BlogPage-0 .GridContainer.FeaturedPost:first-child {\n  width: 100%;\n  flex-basis: auto;\n}\n\n.GridContainer {\n  position: relative;\n  container-type: inline-size;\n  container-name: article;\n  border-radius: 15px;\n  color: #000;\n  overflow: hidden;\n}\n.GridContainer.FeaturedPost:first-child {\n  grid-column: 1/-1;\n  width: 100%;\n}\n.GridContainer .GridWrapper {\n  display: flex;\n  flex-direction: row;\n  height: 280px;\n  background: var(--emw--color-white, #FFFFFF);\n}\n.GridContainer .GridSector {\n  flex-basis: 50%;\n  position: relative;\n}\n.GridContainer .GridSector:first-of-type {\n  height: 280px;\n  display: flex;\n}\n.GridContainer .GridSector:last-of-type {\n  position: static;\n  padding: 20px 40px;\n  display: flex;\n  flex-direction: column;\n}\n.GridContainer .VisualContent {\n  display: block;\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}\n.GridContainer .BlogDate {\n  position: absolute;\n  bottom: 0px;\n  left: 30px;\n  font-size: 12px;\n  border-radius: 5px 5px 0 0;\n  padding: 10px;\n  width: fit-content;\n  text-align: center;\n  color: var(--emw--color-white, #FFFFFF);\n  background-color: #CD0B5E;\n  z-index: 1;\n  pointer-events: none;\n}\n.GridContainer .BlogTitle {\n  margin: 0;\n  font-size: 24px;\n  font-weight: 400;\n  color: #000;\n  padding-bottom: 10px;\n}\n.GridContainer .BlogTitle .BlogCardLink {\n  display: block;\n  color: inherit;\n  text-decoration: none;\n  cursor: pointer;\n}\n.GridContainer .BlogTitle .BlogCardLink::after {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  z-index: 2;\n}\n.GridContainer .BlogContent {\n  margin: 0;\n  display: -webkit-box;\n  font-size: 14px;\n  line-height: 1.2em;\n  -webkit-line-clamp: 6;\n  color: #000;\n  -webkit-box-orient: vertical;\n  box-sizing: border-box;\n  text-overflow: ellipsis;\n  overflow: hidden;\n}\n.GridContainer .BlogLink {\n  color: #22B04E;\n  font-size: 14px;\n  position: absolute;\n  bottom: 16px;\n  padding-top: 2.5px;\n}\n\n@container article (max-width: 550px) {\n  .GridContainer .GridWrapper {\n    height: 380px;\n    flex-direction: column;\n  }\n  .GridContainer .GridWrapper .GridSector:first-of-type {\n    height: 120px;\n    flex-shrink: 0;\n    flex-basis: 150px;\n  }\n  .GridContainer .GridWrapper .GridSector:last-of-type {\n    padding: 20px 20px 40px;\n  }\n}\n.LoadingImage {\n  width: 100%;\n  height: 100%;\n  background-color: var(--emw--color-gray-100, #E6E6E6);\n}\n\n.LoadingStripe {\n  border: 1px solid var(--emw--color-white, #FFFFFF);\n  height: 20%;\n  background-color: var(--emw--color-gray-100, #E6E6E6);\n  margin-bottom: 5px;\n}\n\n.LoadingSmallStripe {\n  width: 40%;\n}\n\n.LoadingMediumStripe {\n  width: 70%;\n}\n\n.BlogLink.LoadingLongStripe {\n  position: static;\n  width: 100%;\n}\n\n.GridContainerWrapper.LoadingGrid .GridSector {\n  justify-content: space-around;\n}\n\n.GridContainerWrapper.LoadingGrid .LoadingImage, .GridContainerWrapper.LoadingGrid .LoadingStripe {\n  animation: pulsatingLoader 2s ease-in-out 0s infinite reverse;\n  -webkit-animation: pulsatingLoader 2s ease-in-out 0s infinite reverse;\n}\n\n@keyframes pulsatingLoader {\n  0% {\n    opacity: 0.5;\n  }\n  50% {\n    opacity: 1;\n  }\n  100% {\n    opacity: 0.5;\n  }\n}\n@-webkit-keyframes pulsatingLoader {\n  0% {\n    opacity: 0.5;\n  }\n  50% {\n    opacity: 1;\n  }\n  100% {\n    opacity: 0.5;\n  }\n}";
+const blogArticlesGridCss = ":host {\n  display: block;\n}\n\n.breadcrumb {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: 0.5rem;\n  max-width: 1300px;\n  padding: 0 20px;\n  margin: 40px auto 20px;\n  color: var(--emw--color-white, #FFFFFF);\n}\n.breadcrumb a {\n  color: inherit;\n}\n\n.BlogPageTitle {\n  max-width: 1300px;\n  padding: 0 20px;\n  margin: 0 auto;\n  color: var(--emw--color-primary);\n  font-size: 22px;\n  font-weight: 600;\n  line-height: 1.2;\n}\n\n.BlogPageContainer {\n  background: #0A0A17;\n  padding: 20px;\n}\n\n.GridContainerWrapper {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: 20px;\n}\n\n.BlogPage-0 .GridContainer.FeaturedPost:first-child {\n  width: 100%;\n  flex-basis: auto;\n}\n\n.GridContainer {\n  position: relative;\n  container-type: inline-size;\n  container-name: article;\n  border-radius: 15px;\n  color: #000;\n  overflow: hidden;\n}\n.GridContainer.FeaturedPost:first-child {\n  grid-column: 1/-1;\n  width: 100%;\n}\n.GridContainer .GridWrapper {\n  display: flex;\n  flex-direction: row;\n  height: 280px;\n  background: var(--emw--color-white, #FFFFFF);\n}\n.GridContainer .GridSector {\n  flex-basis: 50%;\n  position: relative;\n}\n.GridContainer .GridSector:first-of-type {\n  height: 280px;\n  display: flex;\n}\n.GridContainer .GridSector:last-of-type {\n  position: static;\n  padding: 20px 40px;\n  display: flex;\n  flex-direction: column;\n}\n.GridContainer .VisualContent {\n  display: block;\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}\n.GridContainer .BlogDate {\n  position: absolute;\n  bottom: 0px;\n  left: 30px;\n  font-size: 12px;\n  border-radius: 5px 5px 0 0;\n  padding: 10px;\n  width: fit-content;\n  text-align: center;\n  color: var(--emw--color-white, #FFFFFF);\n  background-color: #CD0B5E;\n  z-index: 1;\n  pointer-events: none;\n}\n.GridContainer .BlogTitle {\n  margin: 0;\n  font-size: 24px;\n  font-weight: 400;\n  color: #000;\n  padding-bottom: 10px;\n}\n.GridContainer .BlogTitle .BlogCardLink {\n  display: block;\n  color: inherit;\n  text-decoration: none;\n  cursor: pointer;\n}\n.GridContainer .BlogTitle .BlogCardLink::after {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  z-index: 2;\n}\n.GridContainer .BlogContent {\n  margin: 0;\n  display: -webkit-box;\n  font-size: 14px;\n  line-height: 1.2em;\n  -webkit-line-clamp: 6;\n  color: #000;\n  -webkit-box-orient: vertical;\n  box-sizing: border-box;\n  text-overflow: ellipsis;\n  overflow: hidden;\n}\n.GridContainer .BlogLink {\n  color: #22B04E;\n  font-size: 14px;\n  position: absolute;\n  bottom: 16px;\n  padding-top: 2.5px;\n}\n\n@container article (max-width: 550px) {\n  .GridContainer .GridWrapper {\n    height: 380px;\n    flex-direction: column;\n  }\n  .GridContainer .GridWrapper .GridSector:first-of-type {\n    height: 120px;\n    flex-shrink: 0;\n    flex-basis: 150px;\n  }\n  .GridContainer .GridWrapper .GridSector:last-of-type {\n    padding: 20px 20px 40px;\n  }\n}\n.LoadingImage {\n  width: 100%;\n  height: 100%;\n  background-color: var(--emw--color-gray-100, #E6E6E6);\n}\n\n.LoadingStripe {\n  border: 1px solid var(--emw--color-white, #FFFFFF);\n  height: 20%;\n  background-color: var(--emw--color-gray-100, #E6E6E6);\n  margin-bottom: 5px;\n}\n\n.LoadingSmallStripe {\n  width: 40%;\n}\n\n.LoadingMediumStripe {\n  width: 70%;\n}\n\n.BlogLink.LoadingLongStripe {\n  position: static;\n  width: 100%;\n}\n\n.GridContainerWrapper.LoadingGrid .GridSector {\n  justify-content: space-around;\n}\n\n.GridContainerWrapper.LoadingGrid .LoadingImage, .GridContainerWrapper.LoadingGrid .LoadingStripe {\n  animation: pulsatingLoader 2s ease-in-out 0s infinite reverse;\n  -webkit-animation: pulsatingLoader 2s ease-in-out 0s infinite reverse;\n}\n\n@keyframes pulsatingLoader {\n  0% {\n    opacity: 0.5;\n  }\n  50% {\n    opacity: 1;\n  }\n  100% {\n    opacity: 0.5;\n  }\n}\n@-webkit-keyframes pulsatingLoader {\n  0% {\n    opacity: 0.5;\n  }\n  50% {\n    opacity: 1;\n  }\n  100% {\n    opacity: 0.5;\n  }\n}";
 const BlogArticlesGridStyle0 = blogArticlesGridCss;
 
 const BlogArticlesGrid = class {
@@ -255,43 +281,43 @@ const BlogArticlesGrid = class {
         this.lastPage = 1;
         this.isInitialized = false;
         this.paginationDefaultStyling = `
-  div#PaginationContainer {
+  nav#PaginationContainer {
     justify-content: right;
   }
-  .LeftItems button .NavigationButton {
+  .LeftItems a .NavigationButton {
     display: none;
   }
-  .LeftItems button:after, .RightItems button:after {
+  .LeftItems a:after, .RightItems a:after {
     padding: 7px 12px;
     font-size: 18px;
     font-weight: 700;
     line-height: 46px;
   }
-  .LeftItems button:after {
+  .LeftItems a:after {
     content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1.2em' viewBox='0 0 320 512'%3E%3C!--! Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --%3E%3Cpath d='M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l192 192c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256 246.6 86.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-192 192z'/%3E%3C/svg%3E");
   }
-  .RightItems button:after {
+  .RightItems a:after {
     content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1.2em' viewBox='0 0 320 512'%3E%3C!--! Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --%3E%3Cpath d='M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z'/%3E%3C/svg%3E");
     display: block;
     height: 38px;
   }
-  div.LeftItems button, div.RightItems button {
+  div.LeftItems a, div.RightItems a {
     width: unset;
     height: 40px;
     background-color: #fff;
     color: #000;
     border: 1px solid #000;
     overflow: hidden;
-    &:disabled {
+    &[aria-disabled="true"] {
       background-color: #989898;
     }
   }
-  div.LeftItems button {
+  div.LeftItems a {
     min-width: 60px;
     border-radius: 20px 0 0 20px;
     border-right: 0;
   }
-  div.RightItems button {
+  div.RightItems a {
     display: flex;
     min-width: 100px;
     justify-content: space-evenly;
@@ -299,7 +325,7 @@ const BlogArticlesGrid = class {
     border-radius: 0 20px 20px 0;
     text-transform: none;
   }
-  .RightItems button .NavigationButton {
+  .RightItems a .NavigationButton {
     padding: 12px 0 12px 12px;
     font-weight: 700;
   }`;
@@ -314,6 +340,7 @@ const BlogArticlesGrid = class {
         };
         this.cmsEndpoint = undefined;
         this.language = 'en';
+        this.translationUrl = '';
         this.userRoles = 'everyone';
         this.cmsEnv = 'stage';
         this.mbSource = undefined;
@@ -322,6 +349,8 @@ const BlogArticlesGrid = class {
         this.showPublishingDate = true;
         this.showImage = true;
         this.showTitle = true;
+        this.showPageTitle = false;
+        this.showBreadcrumb = false;
         this.showContent = true;
         this.showButton = true;
         this.hideError = false;
@@ -334,6 +363,7 @@ const BlogArticlesGrid = class {
         this.numberedNavActive = false;
         this.intlDateTimeFormat = '';
         this.page = '1';
+        this.pageQueryParam = undefined;
         this.eventId = undefined;
         this.paginationBlogList = {
             offset: 0
@@ -349,6 +379,7 @@ const BlogArticlesGrid = class {
         this.paginationBlogResponse = undefined;
         this.allBlogResponse = undefined;
         this.totalBlogs = 0;
+        this.customTranslations = {};
     }
     getArticleId(event, post) {
         var _a;
@@ -387,6 +418,21 @@ const BlogArticlesGrid = class {
                 setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
         }
     }
+    async loadTranslations() {
+        if (!this.translationUrl) {
+            this.customTranslations = {};
+            return;
+        }
+        try {
+            const response = await fetch(this.translationUrl);
+            if (!response.ok)
+                throw new Error(`HTTP error! status: ${response.status}`);
+            this.customTranslations = await response.json();
+        }
+        catch (error) {
+            console.error('Failed to fetch or parse translations from URL:', error);
+        }
+    }
     hpPageChange(event) {
         var _a, _b;
         this.paginationBlogList = event.detail;
@@ -527,6 +573,7 @@ const BlogArticlesGrid = class {
                 this.getBlogArticleGrid();
             }
         }
+        return this.loadTranslations();
     }
     handleClientStyling() {
         if (window.emMessageBus !== undefined) {
@@ -567,7 +614,7 @@ const BlogArticlesGrid = class {
     }
     render() {
         if (this.hasErrors) {
-            return (h("div", { class: "BlogsContainer" }, !this.hideError && (h("div", { class: "ErrorMessage" }, translate$1('error', this.language)))));
+            return (h("div", { class: "BlogsContainer" }, !this.hideError && (h("div", { class: "ErrorMessage" }, translate$1('error', this.language, this.customTranslations)))));
         }
         // Create an array to store the placeholder elements for each card
         const placeholderCards = [];
@@ -577,14 +624,14 @@ const BlogArticlesGrid = class {
         }
         const showPagination = Boolean(this.paginationActive) && this.totalBlogs > +this.blogsLimit;
         const paginationClientStyling = !this.mbSource ? (this.clientStyling || this.paginationDefaultStyling) : undefined;
-        return (h("div", { ref: el => this.stylingContainer = el }, h("div", { class: "BlogPageContainer" }, h("div", { class: "BlogGridPaginationWrapper" }, showPagination && h("helper-pagination", { "next-page": this.nextPage, "prev-page": this.previousPage, offset: this.paginationBlogList.offset, limit: parseInt(this.blogsLimit, 10), total: this.totalBlogs, language: this.language, "mb-source": this.mbSource, "client-styling": paginationClientStyling, "client-styling-url": this.clientStylingUrl, "arrows-active": this.arrowsActive, "secondary-arrows-active": this.secondaryArrowsActive, "numbered-nav-active": this.numberedNavActive })), (!this.isLoading) &&
+        return (h("div", { ref: el => this.stylingContainer = el }, this.showBreadcrumb && (h("nav", { class: "breadcrumb", "aria-label": "Breadcrumb" }, h("a", { href: `/${encodeURIComponent(this.language)}` }, translate$1('home', this.language, this.customTranslations)), h("span", { "aria-hidden": "true" }, "\u203A"), h("span", { "aria-current": "page" }, translate$1('blog', this.language, this.customTranslations)))), this.showPageTitle && h("h1", { class: "BlogPageTitle" }, translate$1('blogPageTitle', this.language, this.customTranslations)), h("div", { class: "BlogPageContainer" }, h("div", { class: "BlogGridPaginationWrapper" }, showPagination && h("helper-pagination", { "next-page": this.nextPage, "prev-page": this.previousPage, offset: this.paginationBlogList.offset, limit: parseInt(this.blogsLimit, 10), total: this.totalBlogs, language: this.language, "mb-source": this.mbSource, "client-styling": paginationClientStyling, "client-styling-url": this.clientStylingUrl, "arrows-active": this.arrowsActive, "secondary-arrows-active": this.secondaryArrowsActive, "numbered-nav-active": this.numberedNavActive, "page-query-param": this.pageQueryParam, page: +this.page || 1 })), (!this.isLoading) &&
             h("div", { class: `GridContainerWrapper BlogPage-${this.currentPage} ${this.device}` }, this.displayedBlogResponse && this.displayedBlogResponse.items.map((data) => {
                 var _a, _b;
                 return h("div", { key: data.postID, class: data.isFeaturedPost ? 'GridContainer FeaturedPost' : 'GridContainer' }, h("div", { class: "GridWrapper" }, h("div", { class: "GridSector" }, this.showPublishingDate &&
                     h("div", { class: "BlogDate" }, h("time", { dateTime: data.publishingDate }, this.formatDate(data.publishingDate))), this.showImage && ((_a = data.image) === null || _a === void 0 ? void 0 : _a.src) ? (h("img", { class: "VisualContent", src: this.setImage(data.image), alt: data.image.alt || data.title, width: "400", height: "225", loading: "lazy" })) : (((_b = data.video) === null || _b === void 0 ? void 0 : _b.sources[this.device]) ? (h("video", { class: "VisualContent", src: data.video.sources[this.device] })) : (h("span", { class: "VisualContent", style: { color: "#fff" } }, "No Image")))), h("div", { class: "GridSector" }, this.showTitle &&
                     h("h2", { class: "BlogTitle" }, h("a", { class: "BlogCardLink", href: `/${encodeURIComponent(this.language)}/blog/${encodeURIComponent(data.customPath || data.slug)}`, onClick: event => this.getArticleId(event, data) }, data.title)), this.showContent &&
                     this.renderContentConditionally(data.descriptionPreview), this.showButton &&
-                    h("span", { class: "BlogLink" }, translate$1('readmore', this.language)))));
+                    h("span", { class: "BlogLink" }, translate$1('readmore', this.language, this.customTranslations)))));
             })), (this.isLoading) &&
             h("div", { class: "GridContainerWrapper LoadingGrid" }, placeholderCards))));
     }
@@ -598,7 +645,8 @@ const BlogArticlesGrid = class {
         "blogsLimit": ["watchEndpoint"],
         "eventId": ["watchEndpoint"],
         "clientStyling": ["handleClientStylingChange"],
-        "clientStylingUrl": ["handleClientStylingChangeURL"]
+        "clientStylingUrl": ["handleClientStylingChangeURL"],
+        "translationUrl": ["loadTranslations"]
     }; }
 };
 BlogArticlesGrid.style = BlogArticlesGridStyle0;
@@ -660,7 +708,7 @@ const translate = (key, customLang) => {
     return TRANSLATIONS[(lang !== undefined) && (lang in TRANSLATIONS) ? lang : DEFAULT_LANGUAGE][key];
 };
 
-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}}";
+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 a:not(:first-child),.RightItems a:not(:last-child){margin:0 10px}.LeftItems a,.RightItems a{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 a{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 a{background:#009993;border-color:#009993;color:#fff}.PaginationItem.ActiveItem a[aria-disabled=true]{pointer-events:none;cursor:not-allowed}.PaginationItem a:hover,.PaginationItem a:active{background:#009993;border-color:#009993;color:#fff;opacity:0.8}a{display:inline-flex;justify-content:center;align-items:center;box-sizing:border-box;text-decoration:none;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}a:hover,a:active{background:#004D4A;border-color:#004D4A}a[aria-disabled=true]{background-color:#ccc;border-color:#ccc;color:#fff;cursor:not-allowed}@media screen and (max-width: 720px){a{width:90px;font-size:14px}}@media screen and (max-width: 480px){a{width:70px;font-size:14px}.paginationArea{padding:5px}}@media screen and (max-width: 320px){a{width:58px;font-size:12px}.paginationArea{padding:5px;gap:5px}}@media (hover: none){.paginationItem a:hover{background:inherit;border-color:inherit;color:inherit;opacity:1}.paginationItem.activeItem a:hover{background:#009993;border-color:#009993;color:#fff}}";
 const HelperPaginationStyle0 = helperPaginationCss;
 
 const HelperPagination = class {
@@ -739,6 +787,8 @@ const HelperPagination = class {
         this.arrowsActive = true;
         this.secondaryArrowsActive = false;
         this.numberedNavActive = false;
+        this.pageQueryParam = undefined;
+        this.page = 1;
         this.offsetInt = 0;
         this.lastPage = false;
         this.previousPage = false;
@@ -799,32 +849,70 @@ const HelperPagination = class {
     disconnectedCallback() {
         this.stylingSubscription && this.stylingSubscription.unsubscribe();
     }
+    pageHref(page) {
+        if (!this.pageQueryParam)
+            return '#';
+        const url = new URL(window.location.href);
+        url.searchParams.set(this.pageQueryParam, String(page + this.page - 1));
+        return `${url.search}${url.hash}`;
+    }
     render() {
         /**
          * Center navigation area
          */
         let navigationArea = h("ul", { class: "PaginationArea" }, this.pagesArray.map((item, index) => {
-            return (h("li", { class: 'PaginationItem' + (item === this.currentPage ? ' ActiveItem' : ' ') + ' ' + (isMobile(this.userAgent) ? 'MobileButtons' : '') }, h("button", { disabled: item === this.currentPage ? true : false, onClick: this.paginationNavigation.bind(this, item, index) }, h("span", null, item))));
+            const page = typeof item === 'number' ? item : index === 0
+                ? Math.max(1, this.currentPage - 5)
+                : Math.min(this.endInt + 1, this.currentPage + 5);
+            return (h("li", { class: 'PaginationItem' + (item === this.currentPage ? ' ActiveItem' : ' ') + ' ' + (isMobile(this.userAgent) ? 'MobileButtons' : '') }, h("a", { href: this.pageHref(page), "aria-current": item === this.currentPage ? 'page' : undefined, "aria-disabled": item === this.currentPage ? 'true' : undefined, tabIndex: item === this.currentPage ? -1 : undefined, onClick: event => {
+                    event.preventDefault();
+                    if (item !== this.currentPage)
+                        this.paginationNavigation(item, index);
+                } }, h("span", null, item))));
         }));
         /**
          * Left navigation area
          */
-        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" })));
+        let buttonSecondaryLeftSide = h("a", { href: this.prevPage ? this.pageHref(1) : '#', "aria-disabled": !this.prevPage ? 'true' : undefined, tabIndex: !this.prevPage ? -1 : undefined, onClick: event => {
+                event.preventDefault();
+                if (this.prevPage)
+                    this.navigateTo('firstPage');
+            } }, h("span", { class: "NavigationButton" }, translate('firstPage', this.language)), h("span", { class: "NavigationIcon" }));
+        let buttonsLeftSide = h("div", { class: "LeftItems" }, this.secondaryArrowsActive && buttonSecondaryLeftSide, h("a", { href: this.prevPage ? this.pageHref(this.currentPage - 1) : '#', rel: "prev", "aria-label": translate('previousPage', this.language), "aria-disabled": !this.prevPage ? 'true' : undefined, tabIndex: !this.prevPage ? -1 : undefined, onClick: event => {
+                event.preventDefault();
+                if (this.prevPage)
+                    this.navigateTo('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.prevPage ? false : true, onClick: this.navigateTo.bind(this, 'previousPage') }, h("span", { class: "NavigationButton" }, translate('previousPage', this.language)), h("span", { class: "NavigationIcon" })));
+                h("div", { class: "LeftItems" }, h("a", { href: this.prevPage ? this.pageHref(this.currentPage - 1) : '#', rel: "prev", "aria-label": translate('previousPage', this.language), "aria-disabled": !this.prevPage ? 'true' : undefined, tabIndex: !this.prevPage ? -1 : undefined, onClick: event => {
+                        event.preventDefault();
+                        if (this.prevPage)
+                            this.navigateTo('previousPage');
+                    } }, h("span", { class: "NavigationButton" }, translate('previousPage', this.language)), h("span", { class: "NavigationIcon" })));
         }
         /**
          * Right navigation area
          */
-        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);
+        let buttonSecondaryRightSide = h("a", { href: this.nextPage ? this.pageHref(this.endInt + 1) : '#', "aria-disabled": !this.nextPage ? 'true' : undefined, tabIndex: !this.nextPage ? -1 : undefined, onClick: event => {
+                event.preventDefault();
+                if (this.nextPage)
+                    this.navigateTo('lastPage');
+            } }, h("span", { class: "NavigationButton" }, translate('lastPage', this.language)), h("span", { class: "NavigationIcon" }));
+        let buttonsRightSide = h("div", { class: "RightItems" }, h("a", { href: this.nextPage ? this.pageHref(this.currentPage + 1) : '#', rel: "next", "aria-label": translate('nextPage', this.language), "aria-disabled": !this.nextPage ? 'true' : undefined, tabIndex: !this.nextPage ? -1 : undefined, onClick: event => {
+                event.preventDefault();
+                if (this.nextPage)
+                    this.navigateTo('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.nextPage ? false : true, onClick: this.navigateTo.bind(this, 'nextPage') }, h("span", { class: "NavigationButton" }, translate('nextPage', this.language)), h("span", { class: "NavigationIcon" })));
+                h("div", { class: "RightItems" }, h("a", { href: this.nextPage ? this.pageHref(this.currentPage + 1) : '#', rel: "next", "aria-label": translate('nextPage', this.language), "aria-disabled": !this.nextPage ? 'true' : undefined, tabIndex: !this.nextPage ? -1 : undefined, onClick: event => {
+                        event.preventDefault();
+                        if (this.nextPage)
+                            this.navigateTo('nextPage');
+                    } }, h("span", { class: "NavigationButton" }, translate('nextPage', this.language)), h("span", { class: "NavigationIcon" })));
         }
-        return (h("div", { id: "PaginationContainer", ref: el => this.stylingContainer = el }, this.arrowsActive && buttonsLeftSide, this.numberedNavActive && navigationArea, this.arrowsActive && buttonsRightSide));
+        return (h("nav", { id: "PaginationContainer", class: "PaginationContainer", "aria-label": "Blog pagination", ref: el => this.stylingContainer = el }, this.arrowsActive && buttonsLeftSide, this.numberedNavActive && navigationArea, this.arrowsActive && buttonsRightSide));
     }
     static get watchers() { return {
         "clientStyling": ["handleClientStylingChange"],

package/dist/esm/loader.js

@@ -5,7 +5,7 @@ import { g as globalScripts } from './app-globals-0f993ce5.js';
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;
   await globalScripts();
-  return bootstrapLazy([["blog-articles-grid_2",[[1,"blog-articles-grid",{"cmsEndpoint":[513,"cms-endpoint"],"language":[513],"userRoles":[513,"user-roles"],"cmsEnv":[513,"cms-env"],"mbSource":[1,"mb-source"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"showPublishingDate":[516,"show-publishing-date"],"showImage":[516,"show-image"],"showTitle":[516,"show-title"],"showContent":[516,"show-content"],"showButton":[516,"show-button"],"hideError":[516,"hide-error"],"usePostmessage":[516,"use-postmessage"],"postMessageEvent":[513,"post-message-event"],"blogsLimit":[513,"blogs-limit"],"paginationActive":[516,"pagination-active"],"arrowsActive":[516,"arrows-active"],"secondaryArrowsActive":[516,"secondary-arrows-active"],"numberedNavActive":[516,"numbered-nav-active"],"intlDateTimeFormat":[513,"intl-date-time-format"],"page":[513],"eventId":[513,"event-id"],"paginationBlogList":[32],"currentPage":[32],"hasErrors":[32],"isLoading":[32],"bannerMatrixReady":[32],"nextPage":[32],"previousPage":[32],"device":[32],"displayedBlogResponse":[32],"paginationBlogResponse":[32],"allBlogResponse":[32],"totalBlogs":[32]},[[8,"BannerMatrixReady","handleBannerReady"],[0,"hpPageChange","hpPageChange"]],{"page":["watchEndpoint"],"hasErrors":["watchEndpoint"],"cmsEndpoint":["watchEndpoint"],"language":["watchEndpoint"],"cmsEnv":["watchEndpoint"],"userRoles":["watchEndpoint"],"blogsLimit":["watchEndpoint"],"eventId":["watchEndpoint"],"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingChangeURL"]}],[1,"helper-pagination",{"nextPage":[1537,"next-page"],"prevPage":[1537,"prev-page"],"offset":[1538],"limit":[1538],"total":[1538],"language":[1537],"mbSource":[1,"mb-source"],"clientStyling":[1537,"client-styling"],"clientStylingUrl":[1537,"client-styling-url"],"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]},null,{"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingChangeURL"]}]]]], options);
+  return bootstrapLazy([["blog-articles-grid_2",[[1,"blog-articles-grid",{"cmsEndpoint":[513,"cms-endpoint"],"language":[513],"translationUrl":[513,"translation-url"],"userRoles":[513,"user-roles"],"cmsEnv":[513,"cms-env"],"mbSource":[1,"mb-source"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"showPublishingDate":[516,"show-publishing-date"],"showImage":[516,"show-image"],"showTitle":[516,"show-title"],"showPageTitle":[516,"show-page-title"],"showBreadcrumb":[516,"show-breadcrumb"],"showContent":[516,"show-content"],"showButton":[516,"show-button"],"hideError":[516,"hide-error"],"usePostmessage":[516,"use-postmessage"],"postMessageEvent":[513,"post-message-event"],"blogsLimit":[513,"blogs-limit"],"paginationActive":[516,"pagination-active"],"arrowsActive":[516,"arrows-active"],"secondaryArrowsActive":[516,"secondary-arrows-active"],"numberedNavActive":[516,"numbered-nav-active"],"intlDateTimeFormat":[513,"intl-date-time-format"],"page":[513],"pageQueryParam":[1,"page-query-param"],"eventId":[513,"event-id"],"paginationBlogList":[32],"currentPage":[32],"hasErrors":[32],"isLoading":[32],"bannerMatrixReady":[32],"nextPage":[32],"previousPage":[32],"device":[32],"displayedBlogResponse":[32],"paginationBlogResponse":[32],"allBlogResponse":[32],"totalBlogs":[32],"customTranslations":[32]},[[8,"BannerMatrixReady","handleBannerReady"],[0,"hpPageChange","hpPageChange"]],{"page":["watchEndpoint"],"hasErrors":["watchEndpoint"],"cmsEndpoint":["watchEndpoint"],"language":["watchEndpoint"],"cmsEnv":["watchEndpoint"],"userRoles":["watchEndpoint"],"blogsLimit":["watchEndpoint"],"eventId":["watchEndpoint"],"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingChangeURL"],"translationUrl":["loadTranslations"]}],[1,"helper-pagination",{"nextPage":[1537,"next-page"],"prevPage":[1537,"prev-page"],"offset":[1538],"limit":[1538],"total":[1538],"language":[1537],"mbSource":[1,"mb-source"],"clientStyling":[1537,"client-styling"],"clientStylingUrl":[1537,"client-styling-url"],"arrowsActive":[1540,"arrows-active"],"secondaryArrowsActive":[1540,"secondary-arrows-active"],"numberedNavActive":[1540,"numbered-nav-active"],"pageQueryParam":[1,"page-query-param"],"page":[2],"offsetInt":[32],"lastPage":[32],"previousPage":[32],"limitInt":[32],"totalInt":[32],"pagesArray":[32],"endInt":[32]},null,{"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingChangeURL"]}]]]], options);
 };
 
 export { defineCustomElements };

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

@@ -11,6 +11,10 @@ export declare class BlogArticlesGrid {
     * Language of the widget
     */
     language: string;
+    /**
+     * Override translations using a language-keyed JSON file
+     */
+    translationUrl: string;
     /**
      * User roles
      */
@@ -43,6 +47,14 @@ export declare class BlogArticlesGrid {
     * Property used to display the image
     */
     showTitle: boolean;
+    /**
+     * Display the blog page heading independently of card titles
+     */
+    showPageTitle: boolean;
+    /**
+     * Display breadcrumb navigation
+     */
+    showBreadcrumb: boolean;
     /**
     * Property used to display the description
     */
@@ -91,6 +103,7 @@ export declare class BlogArticlesGrid {
      * Page to particularly be opened on start
      */
     page: string;
+    pageQueryParam?: string;
     /**
      * Filter blog post list using eventId from Sport page
     */
@@ -109,12 +122,14 @@ export declare class BlogArticlesGrid {
     paginationBlogResponse?: BlogPostResponse;
     allBlogResponse?: BlogPostResponse;
     totalBlogs: number;
+    private customTranslations;
     lastPage: number;
     private isInitialized;
     handleBannerReady(): void;
     watchEndpoint(newValue: string, oldValue: string): void;
     handleClientStylingChange(newValue: string, oldValue: string): void;
     handleClientStylingChangeURL(newValue: string, oldValue: string): void;
+    loadTranslations(): Promise<void>;
     private stylingContainer?;
     private stylingSubscription;
     private paginationDefaultStyling;
@@ -124,7 +139,7 @@ export declare class BlogArticlesGrid {
     moveLatestFeatureToStart(blogItems: BlogPost[], latestFeatured: BlogPost | null): BlogPost[];
     fetchBlogPosts(page?: number, allPosts?: boolean): Promise<BlogPostResponse>;
     getBlogArticleGrid(forceFetch?: boolean, page?: number): Promise<void>;
-    componentWillLoad(): void;
+    componentWillLoad(): Promise<void>;
     handleClientStyling(): void;
     componentDidLoad(): void;
     disconnectedCallback(): void;

package/dist/types/components.d.ts

@@ -59,6 +59,7 @@ export namespace Components {
           * Page to particularly be opened on start
          */
         "page": string;
+        "pageQueryParam"?: string;
         /**
           * Customize pagination: Activate pagination
          */
@@ -71,6 +72,10 @@ export namespace Components {
           * Customize pagination: Activate pagination secondary arrows
          */
         "secondaryArrowsActive": boolean;
+        /**
+          * Display breadcrumb navigation
+         */
+        "showBreadcrumb": boolean;
         /**
           * Property used to display the read-more label
          */
@@ -83,6 +88,10 @@ export namespace Components {
           * Property used to display the image
          */
         "showImage": boolean;
+        /**
+          * Display the blog page heading independently of card titles
+         */
+        "showPageTitle": boolean;
         /**
           * Property used to display the publishing date
          */
@@ -91,6 +100,10 @@ export namespace Components {
           * Property used to display the image
          */
         "showTitle": boolean;
+        /**
+          * Override translations using a language-keyed JSON file
+         */
+        "translationUrl": string;
         /**
           * Keep the host app's SPA navigation when enabled.
          */
@@ -182,6 +195,7 @@ declare namespace LocalJSX {
           * Page to particularly be opened on start
          */
         "page"?: string;
+        "pageQueryParam"?: string;
         /**
           * Customize pagination: Activate pagination
          */
@@ -194,6 +208,10 @@ declare namespace LocalJSX {
           * Customize pagination: Activate pagination secondary arrows
          */
         "secondaryArrowsActive"?: boolean;
+        /**
+          * Display breadcrumb navigation
+         */
+        "showBreadcrumb"?: boolean;
         /**
           * Property used to display the read-more label
          */
@@ -206,6 +224,10 @@ declare namespace LocalJSX {
           * Property used to display the image
          */
         "showImage"?: boolean;
+        /**
+          * Display the blog page heading independently of card titles
+         */
+        "showPageTitle"?: boolean;
         /**
           * Property used to display the publishing date
          */
@@ -214,6 +236,10 @@ declare namespace LocalJSX {
           * Property used to display the image
          */
         "showTitle"?: boolean;
+        /**
+          * Override translations using a language-keyed JSON file
+         */
+        "translationUrl"?: string;
         /**
           * Keep the host app's SPA navigation when enabled.
          */

package/dist/types/utils/locale.utils.d.ts

@@ -1 +1 @@
-export declare const translate: (key: string, customLang?: any) => string;
+export declare const translate: (key: string, customLang?: any, customTranslations?: Record<string, Record<string, string>>) => string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@everymatrix/blog-articles-grid",
-  "version": "1.98.29",
+  "version": "1.98.31",
   "main": "./dist/index.cjs.js",
   "module": "./dist/index.js",
   "es2015": "./dist/esm/index.mjs",