@everymatrix/blog-articles-grid 1.99.27 → 1.99.28

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

@@ -3,6 +3,7 @@ import { translate } from "../../utils/locale.utils";
 import { setClientStyling, setClientStylingURL, setStreamStyling } from "../../../../../../../../libs/common/src/styling/index";
 import { getDevicePlatform, getDeviceType } from "../../../../../../../../libs/common/src/device/index";
 import "../../../../../helper-pagination/dist/types/index";
+const ALL_CATEGORY_ID = 'all';
 export class BlogArticlesGrid {
     constructor() {
         this.lastPage = 1;
@@ -11,24 +12,24 @@ export class BlogArticlesGrid {
   nav#PaginationContainer {
     justify-content: right;
   }
-  .LeftItems a .NavigationButton {
+  .LeftItems .PaginationControl .NavigationButton {
     display: none;
   }
-  .LeftItems a:after, .RightItems a:after {
+  .LeftItems .PaginationControl:after, .RightItems .PaginationControl:after {
     padding: 7px 12px;
     font-size: 18px;
     font-weight: 700;
     line-height: 46px;
   }
-  .LeftItems a:after {
+  .LeftItems .PaginationControl: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 a:after {
+  .RightItems .PaginationControl: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 a, div.RightItems a {
+  div.LeftItems .PaginationControl, div.RightItems .PaginationControl {
     width: unset;
     height: 40px;
     background-color: #fff;
@@ -39,12 +40,12 @@ export class BlogArticlesGrid {
       background-color: #989898;
     }
   }
-  div.LeftItems a {
+  div.LeftItems .PaginationControl {
     min-width: 60px;
     border-radius: 20px 0 0 20px;
     border-right: 0;
   }
-  div.RightItems a {
+  div.RightItems .PaginationControl {
     display: flex;
     min-width: 100px;
     justify-content: space-evenly;
@@ -52,7 +53,7 @@ export class BlogArticlesGrid {
     border-radius: 0 20px 20px 0;
     text-transform: none;
   }
-  .RightItems a .NavigationButton {
+  .RightItems .PaginationControl .NavigationButton {
     padding: 12px 0 12px 12px;
     font-weight: 700;
   }`;
@@ -110,7 +111,7 @@ export class BlogArticlesGrid {
         this.allBlogResponse = undefined;
         this.totalBlogs = 0;
         this.customTranslations = {};
-        this.selectedCategory = 'all';
+        this.selectedCategory = ALL_CATEGORY_ID;
         this.categories = [];
     }
     getArticleId(event, post) {
@@ -176,7 +177,12 @@ export class BlogArticlesGrid {
         if (!this.pageQueryParam)
             return;
         const url = new URL(window.location.href);
-        url.searchParams.set(this.pageQueryParam, String(pageNumber));
+        if (pageNumber === 1) {
+            url.searchParams.delete(this.pageQueryParam);
+        }
+        else {
+            url.searchParams.set(this.pageQueryParam, String(pageNumber));
+        }
         window.history.pushState(null, '', `${url.pathname}${url.search}${url.hash}`);
     }
     handleClientStylingChange(newValue, oldValue) {
@@ -220,6 +226,13 @@ export class BlogArticlesGrid {
     getActiveCategory() {
         return this.categories.find(category => category.id === this.selectedCategory);
     }
+    getCategorySlug(category) {
+        return category.slug || category.name.toLowerCase().replace(/\s+/g, '-');
+    }
+    getCategoryHref(category) {
+        const blogPath = `/${encodeURIComponent(this.language)}/blog`;
+        return category.id === ALL_CATEGORY_ID ? blogPath : `${blogPath}/category/${encodeURIComponent(this.getCategorySlug(category))}`;
+    }
     sortArticlesByDate(blogItems) {
         blogItems.sort((a, b) => {
             if (a.publishingDate > b.publishingDate)
@@ -250,12 +263,11 @@ export class BlogArticlesGrid {
     }
     async fetchBlogPosts(page, allPosts = false) {
         const url = new URL(`${this.cmsEndpoint}/${this.language}/blog-posts`);
-        if (this.showBlogSubcategories &&
-            this.selectedCategory &&
-            this.selectedCategory !== 'all') {
+        if (this.selectedCategory &&
+            this.selectedCategory !== ALL_CATEGORY_ID) {
             const category = this.categories.find(cat => cat.id == this.selectedCategory);
-            if (category === null || category === void 0 ? void 0 : category.slug) {
-                url.searchParams.append('category', category.slug);
+            if (category) {
+                url.searchParams.append('category', this.getCategorySlug(category));
             }
         }
         url.searchParams.append('per_page', allPosts ? '300' : this.blogsLimit);
@@ -306,7 +318,7 @@ export class BlogArticlesGrid {
             const visibleCategories = categories.filter(category => { var _a; return !hiddenCategories.includes((_a = category.name) === null || _a === void 0 ? void 0 : _a.toLowerCase()); });
             this.categories = [
                 {
-                    id: 'all',
+                    id: ALL_CATEGORY_ID,
                     name: 'All',
                 },
                 ...visibleCategories,
@@ -367,13 +379,10 @@ export class BlogArticlesGrid {
     }
     async componentWillLoad() {
         var _a;
-        if (this.showBlogSubcategories) {
+        if (this.cmsEndpoint && this.language) {
             await this.fetchCategories();
             if (this.category) {
-                const category = this.categories.find(cat => {
-                    var _a;
-                    return ((_a = cat.name) === null || _a === void 0 ? void 0 : _a.toLowerCase().replace(/\s+/g, '-')) === this.category;
-                });
+                const category = this.categories.find(cat => cat.id !== ALL_CATEGORY_ID && this.getCategorySlug(cat) === this.category);
                 if (category) {
                     this.selectedCategory = category.id;
                     this.emitActiveCategory();
@@ -398,14 +407,21 @@ export class BlogArticlesGrid {
         const category = this.categories.find(cat => cat.id === this.selectedCategory);
         window.postMessage({
             type: 'BlogArticlesActiveCategory',
-            category: this.selectedCategory === 'all'
+            category: this.selectedCategory === ALL_CATEGORY_ID
                 ? null
                 : category === null || category === void 0 ? void 0 : category.name,
-            metadata: this.selectedCategory === 'all'
+            categorySlug: category && this.selectedCategory !== ALL_CATEGORY_ID ? this.getCategorySlug(category) : null,
+            metadata: this.selectedCategory === ALL_CATEGORY_ID
                 ? null
                 : (_a = category === null || category === void 0 ? void 0 : category.metadata) !== null && _a !== void 0 ? _a : null,
         }, window.location.href);
     }
+    handleCategoryClick(event, categoryId) {
+        if (!this.usePostmessage || event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey)
+            return;
+        event.preventDefault();
+        this.handleCategoryChange(categoryId);
+    }
     async handleCategoryChange(categoryId) {
         if (this.isLoading || this.selectedCategory === categoryId) {
             return;
@@ -453,7 +469,7 @@ export class BlogArticlesGrid {
     }
     formatDate(dateString) {
         const date = this.parseDate(dateString);
-        return new Intl.DateTimeFormat(this.intlDateTimeFormat).format(date);
+        return new Intl.DateTimeFormat(this.intlDateTimeFormat || 'en-GB', { day: 'numeric', month: 'short', year: 'numeric' }).format(date);
     }
     render() {
         var _a;
@@ -469,21 +485,28 @@ export class BlogArticlesGrid {
         const showPagination = Boolean(this.paginationActive) && this.totalBlogs > +this.blogsLimit;
         const paginationClientStyling = !this.mbSource ? (this.clientStyling || this.paginationDefaultStyling) : undefined;
         const activeCategory = this.getActiveCategory();
-        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" }, " ", this.selectedCategory !== 'all' ? activeCategory === null || activeCategory === void 0 ? void 0 : activeCategory.name : translate('blogPageTitle', this.language, this.customTranslations), " "), this.selectedCategory !== 'all' &&
+        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"), activeCategory && this.selectedCategory !== ALL_CATEGORY_ID ? [
+            h("a", { href: `/${encodeURIComponent(this.language)}/blog` }, translate('blog', this.language, this.customTranslations)),
+            h("span", { "aria-hidden": "true" }, "\u203A"),
+            h("span", { "aria-current": "page" }, activeCategory.name),
+        ] : h("span", { "aria-current": "page" }, translate('blog', this.language, this.customTranslations)))), this.showPageTitle && h("h1", { class: "BlogPageTitle" }, " ", this.selectedCategory !== ALL_CATEGORY_ID ? activeCategory === null || activeCategory === void 0 ? void 0 : activeCategory.name : translate('blogPageTitle', this.language, this.customTranslations), " "), this.selectedCategory !== ALL_CATEGORY_ID &&
             (activeCategory === null || activeCategory === void 0 ? void 0 : activeCategory.description) && (h("div", { class: "BlogPageDescription", innerHTML: activeCategory.description })), h("div", { class: "BlogPageContainer" }, this.showBlogSubcategories &&
-            h("div", { class: "BlogCategoriesSliderWrapper" }, h("div", { class: "CarouselWrapper" }, h("div", { class: "CarouselContainer" }, h("div", { class: "BlogCategoriesWrapper" }, h("div", { class: "CategoryButtons" }, this.categories.map(category => (h("button", { disabled: this.isLoading || this.selectedCategory === category.id, key: category.id, class: {
+            h("div", { class: "BlogCategoriesSliderWrapper" }, h("div", { class: "CarouselWrapper" }, h("div", { class: "CarouselContainer" }, h("div", { class: "BlogCategoriesWrapper" }, h("div", { class: "CategoryButtons" }, this.categories.map(category => (h("a", { href: this.getCategoryHref(category), "aria-current": this.selectedCategory === category.id ? 'page' : undefined, key: category.id, class: {
                     CategoryButton: true,
                     active: this.selectedCategory === category.id,
-                }, onClick: () => {
-                    this.handleCategoryChange(category.id);
-                } }, category.name)))))))), 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 })), !this.isLoading && ((_a = this.displayedBlogResponse) === null || _a === void 0 ? void 0 : _a.items.length) === 0 && (h("p", { class: "EmptyState", role: "status" }, translate(this.selectedCategory === 'all' ? 'emptyState' : 'emptyCategoryState', this.language, this.customTranslations))), (!this.isLoading) &&
+                }, onClick: event => this.handleCategoryClick(event, category.id) }, category.name)))))))), 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 })), !this.isLoading && ((_a = this.displayedBlogResponse) === null || _a === void 0 ? void 0 : _a.items.length) === 0 && (h("p", { class: "EmptyState", role: "status" }, translate(this.selectedCategory === ALL_CATEGORY_ID ? 'emptyState' : 'emptyCategoryState', this.language, this.customTranslations))), (!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 &&
+                const cardCategories = this.categories.filter(category => {
+                    var _a;
+                    return category.id !== ALL_CATEGORY_ID
+                        && ((_a = data.blogCategory) === null || _a === void 0 ? void 0 : _a.includes(this.getCategorySlug(category)));
+                });
+                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" }, cardCategories.length > 0 && h("div", { class: "CategoryButtons BlogCardCategories" }, cardCategories.map(category => (h("a", { class: "CategoryButton", href: this.getCategoryHref(category), onClick: event => this.handleCategoryClick(event, category.id) }, category.name)))), 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, this.customTranslations)))));
+                    h("span", { class: "BlogLink" }, translate('readmore', this.language, this.customTranslations))))));
             })), (this.isLoading) &&
             h("div", { class: "GridContainerWrapper LoadingGrid" }, placeholderCards))));
     }

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

@@ -10,9 +10,9 @@ const TRANSLATIONS = {
         emptyCategoryState: 'We haven’t published any posts in this category. Check back soon, or browse all our articles.',
     },
     ro: {
-        error: 'Eroare',
+        error: 'Error',
         readmore: 'Read more',
-        home: 'Acasă',
+        home: 'Home',
         blog: 'Blog',
         blogPageTitle: 'Blog',
         emptyState: 'We haven’t published any posts yet. Check back soon.',
@@ -21,43 +21,43 @@ const TRANSLATIONS = {
     fr: {
         error: 'Error',
         readmore: 'Read more',
-        home: 'Accueil',
+        home: 'Home',
         blog: 'Blog',
         blogPageTitle: 'Blog',
         emptyState: 'We haven’t published any posts yet. Check back soon.',
         emptyCategoryState: 'We haven’t published any posts in this category. Check back soon, or browse all our articles.',
     },
     ar: {
-        error: 'خطأ',
+        error: 'Error',
         readmore: 'Read more',
-        home: 'الرئيسية',
-        blog: 'المدونة',
-        blogPageTitle: 'المدونة',
+        home: 'Home',
+        blog: 'Blog',
+        blogPageTitle: 'Blog',
         emptyState: 'We haven’t published any posts yet. Check back soon.',
         emptyCategoryState: 'We haven’t published any posts in this category. Check back soon, or browse all our articles.',
     },
     hu: {
-        error: 'خطأ',
-        readmore: 'Tovább olvasom',
-        home: 'Kezdőlap',
+        error: 'Error',
+        readmore: 'Read more',
+        home: 'Home',
         blog: 'Blog',
         blogPageTitle: 'Blog',
         emptyState: 'We haven’t published any posts yet. Check back soon.',
         emptyCategoryState: 'We haven’t published any posts in this category. Check back soon, or browse all our articles.',
     },
     hr: {
-        error: 'Greška',
-        readmore: 'Pročitaj više',
-        home: 'Početna',
+        error: 'Error',
+        readmore: 'Read more',
+        home: 'Home',
         blog: 'Blog',
         blogPageTitle: 'Blog',
         emptyState: 'We haven’t published any posts yet. Check back soon.',
         emptyCategoryState: 'We haven’t published any posts in this category. Check back soon, or browse all our articles.',
     },
     'pt-br': {
-        error: 'Erro',
-        readmore: 'Ler mais',
-        home: 'Início',
+        error: 'Error',
+        readmore: 'Read more',
+        home: 'Home',
         blog: 'Blog',
         blogPageTitle: 'Blog',
         emptyState: 'We haven’t published any posts yet. Check back soon.',
@@ -65,8 +65,8 @@ const TRANSLATIONS = {
     },
     'es-mx': {
         error: 'Error',
-        readmore: 'Leer más',
-        home: 'Inicio',
+        readmore: 'Read more',
+        home: 'Home',
         blog: 'Blog',
         blogPageTitle: 'Blog',
         emptyState: 'We haven’t published any posts yet. Check back soon.',

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

@@ -1,5 +1,5 @@
-import { p as promiseResolve, b as bootstrapLazy } from './index-4af8e775.js';
-export { s as setNonce } from './index-4af8e775.js';
+import { p as promiseResolve, b as bootstrapLazy } from './index-6b3cf3ac.js';
+export { s as setNonce } from './index-6b3cf3ac.js';
 import { g as globalScripts } from './app-globals-0f993ce5.js';
 
 /*