@everymatrix/blog-articles-grid 1.98.29 → 1.98.31

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

@@ -8,43 +8,43 @@ export class BlogArticlesGrid {
         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;
@@ -52,7 +52,7 @@ export class BlogArticlesGrid {
     border-radius: 0 20px 20px 0;
     text-transform: none;
   }
-  .RightItems button .NavigationButton {
+  .RightItems a .NavigationButton {
     padding: 12px 0 12px 12px;
     font-weight: 700;
   }`;
@@ -67,6 +67,7 @@ export class BlogArticlesGrid {
         };
         this.cmsEndpoint = undefined;
         this.language = 'en';
+        this.translationUrl = '';
         this.userRoles = 'everyone';
         this.cmsEnv = 'stage';
         this.mbSource = undefined;
@@ -75,6 +76,8 @@ export class BlogArticlesGrid {
         this.showPublishingDate = true;
         this.showImage = true;
         this.showTitle = true;
+        this.showPageTitle = false;
+        this.showBreadcrumb = false;
         this.showContent = true;
         this.showButton = true;
         this.hideError = false;
@@ -87,6 +90,7 @@ export class BlogArticlesGrid {
         this.numberedNavActive = false;
         this.intlDateTimeFormat = '';
         this.page = '1';
+        this.pageQueryParam = undefined;
         this.eventId = undefined;
         this.paginationBlogList = {
             offset: 0
@@ -102,6 +106,7 @@ export class BlogArticlesGrid {
         this.paginationBlogResponse = undefined;
         this.allBlogResponse = undefined;
         this.totalBlogs = 0;
+        this.customTranslations = {};
     }
     getArticleId(event, post) {
         var _a;
@@ -140,6 +145,21 @@ export class BlogArticlesGrid {
                 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;
@@ -280,6 +300,7 @@ export class BlogArticlesGrid {
                 this.getBlogArticleGrid();
             }
         }
+        return this.loadTranslations();
     }
     handleClientStyling() {
         if (window.emMessageBus !== undefined) {
@@ -320,7 +341,7 @@ export class BlogArticlesGrid {
     }
     render() {
         if (this.hasErrors) {
-            return (h("div", { class: "BlogsContainer" }, !this.hideError && (h("div", { class: "ErrorMessage" }, translate('error', this.language)))));
+            return (h("div", { class: "BlogsContainer" }, !this.hideError && (h("div", { class: "ErrorMessage" }, translate('error', this.language, this.customTranslations)))));
         }
         // Create an array to store the placeholder elements for each card
         const placeholderCards = [];
@@ -330,14 +351,14 @@ export class BlogArticlesGrid {
         }
         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('home', this.language, this.customTranslations)), h("span", { "aria-hidden": "true" }, "\u203A"), h("span", { "aria-current": "page" }, translate('blog', this.language, this.customTranslations)))), this.showPageTitle && h("h1", { class: "BlogPageTitle" }, translate('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('readmore', this.language)))));
+                    h("span", { class: "BlogLink" }, translate('readmore', this.language, this.customTranslations)))));
             })), (this.isLoading) &&
             h("div", { class: "GridContainerWrapper LoadingGrid" }, placeholderCards))));
     }
@@ -390,6 +411,24 @@ export class BlogArticlesGrid {
                 "reflect": true,
                 "defaultValue": "'en'"
             },
+            "translationUrl": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Override translations using a language-keyed JSON file"
+                },
+                "attribute": "translation-url",
+                "reflect": true,
+                "defaultValue": "''"
+            },
             "userRoles": {
                 "type": "string",
                 "mutable": false,
@@ -533,6 +572,42 @@ export class BlogArticlesGrid {
                 "reflect": true,
                 "defaultValue": "true"
             },
+            "showPageTitle": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Display the blog page heading independently of card titles"
+                },
+                "attribute": "show-page-title",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "showBreadcrumb": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Display breadcrumb navigation"
+                },
+                "attribute": "show-breadcrumb",
+                "reflect": true,
+                "defaultValue": "false"
+            },
             "showContent": {
                 "type": "boolean",
                 "mutable": false,
@@ -747,6 +822,23 @@ export class BlogArticlesGrid {
                 "reflect": true,
                 "defaultValue": "'1'"
             },
+            "pageQueryParam": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "page-query-param",
+                "reflect": false
+            },
             "eventId": {
                 "type": "string",
                 "mutable": false,
@@ -779,7 +871,8 @@ export class BlogArticlesGrid {
             "displayedBlogResponse": {},
             "paginationBlogResponse": {},
             "allBlogResponse": {},
-            "totalBlogs": {}
+            "totalBlogs": {},
+            "customTranslations": {}
         };
     }
     static get events() {
@@ -836,6 +929,9 @@ export class BlogArticlesGrid {
             }, {
                 "propName": "clientStylingUrl",
                 "methodName": "handleClientStylingChangeURL"
+            }, {
+                "propName": "translationUrl",
+                "methodName": "loadTranslations"
             }];
     }
     static get listeners() {

package/dist/collection/utils/locale.utils.js

@@ -3,37 +3,63 @@ const TRANSLATIONS = {
     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',
     }
 };
-export const translate = (key, customLang) => {
-    const lang = customLang;
-    return TRANSLATIONS[(lang !== undefined) && (lang in TRANSLATIONS) ? lang : DEFAULT_LANGUAGE][key];
+export const translate = (key, customLang, customTranslations) => {
+    var _a;
+    const lang = customLang !== null && customLang !== void 0 ? customLang : DEFAULT_LANGUAGE;
+    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[lang in TRANSLATIONS ? lang : DEFAULT_LANGUAGE][key];
 };

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

@@ -16,5 +16,5 @@ var patchBrowser = () => {
 
 patchBrowser().then(async (options) => {
   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);
 });