@everymatrix/blog-articles-grid 1.99.27 → 1.99.28

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-d9577f9e.js');
+const index = require('./index-96fb13fd.js');
 
 const DEFAULT_LANGUAGE$1 = 'en';
 const TRANSLATIONS$1 = {
@@ -16,9 +16,9 @@ const TRANSLATIONS$1 = {
         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.',
@@ -27,43 +27,43 @@ const TRANSLATIONS$1 = {
     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.',
@@ -71,8 +71,8 @@ const TRANSLATIONS$1 = {
     },
     '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.',
@@ -291,9 +291,10 @@ const getDevicePlatform = () => {
     return 'mtWeb';
 };
 
-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.BlogPageDescription {\n  max-width: 1300px;\n  padding: 0 20px;\n  margin: 0 auto;\n  color: var(--emw--color-typography);\n  line-height: 1.2;\n}\n\n.BlogPageContainer {\n  background: #0A0A17;\n  padding: 20px;\n}\n\n.EmptyState {\n  color: var(--emw--color-white, #FFFFFF);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 325px;\n  margin: 0;\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}\n.BlogCategoriesWrapper {\n  margin-bottom: 24px;\n}\n\n.FilterLabel {\n  margin-bottom: 12px;\n  color: var(--emw--color-white, #fff);\n  font-weight: 600;\n}\n\n.CategoryButtons {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 12px;\n}\n\n.CategoryButton {\n  padding: 10px 20px;\n  border-radius: 999px;\n  border: 1px solid currentColor;\n  background: transparent;\n  color: var(--emw--color-white, #fff);\n  cursor: pointer;\n  transition: all 0.2s ease;\n}\n\n.CategoryButton.active {\n  background: var(--emw--casino-color-primary, var(--emw--color-primary, #22B04E));\n  color: var(--emw--color-background, #fff);\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-typography);\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.BlogPageDescription {\n  max-width: 1300px;\n  padding: 0 20px;\n  margin: 0 auto;\n  color: var(--emw--color-typography);\n  line-height: 1.2;\n}\n\n.BlogPageContainer {\n  background: #0A0A17;\n  padding: 20px;\n}\n\n.EmptyState {\n  color: var(--emw--color-typography);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 325px;\n  margin: 0;\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:not(.Skeleton):hover .GridWrapper {\n  background: color-mix(in srgb, var(--emw--color-white, #FFFFFF) 90%, #000);\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:focus-visible {\n  outline: none;\n}\n.GridContainer .BlogTitle .BlogCardLink:focus-visible::after {\n  border-radius: 15px;\n  outline: 3px solid var(--emw--color-primary, #CD0B5E);\n  outline-offset: -3px;\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}\n.BlogCategoriesWrapper {\n  margin-bottom: 24px;\n}\n\n.FilterLabel {\n  margin-bottom: 12px;\n  color: var(--emw--color-white, #fff);\n  font-weight: 600;\n}\n\n.CategoryButtons {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 12px;\n}\n\n.CategoryButton {\n  padding: 10px 20px;\n  border-radius: 999px;\n  border: 1px solid currentColor;\n  text-decoration: none;\n  background: transparent;\n  color: var(--emw--color-white, #fff);\n  cursor: pointer;\n  transition: all 0.2s ease;\n}\n\n.CategoryButton.active {\n  background: var(--emw--casino-color-primary, var(--emw--color-primary, #22B04E));\n  color: var(--emw--color-background, #fff);\n}\n\n.BlogCardCategories {\n  margin-bottom: 10px;\n}\n.BlogCardCategories .CategoryButton {\n  position: relative;\n  z-index: 3;\n  padding: 4px 10px;\n  color: inherit;\n  font-size: 12px;\n}";
 const BlogArticlesGridStyle0 = blogArticlesGridCss;
 
+const ALL_CATEGORY_ID = 'all';
 const BlogArticlesGrid = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
@@ -304,24 +305,24 @@ const BlogArticlesGrid = class {
   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;
@@ -332,12 +333,12 @@ const BlogArticlesGrid = class {
       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;
@@ -345,7 +346,7 @@ const BlogArticlesGrid = class {
     border-radius: 0 20px 20px 0;
     text-transform: none;
   }
-  .RightItems a .NavigationButton {
+  .RightItems .PaginationControl .NavigationButton {
     padding: 12px 0 12px 12px;
     font-weight: 700;
   }`;
@@ -403,7 +404,7 @@ const BlogArticlesGrid = class {
         this.allBlogResponse = undefined;
         this.totalBlogs = 0;
         this.customTranslations = {};
-        this.selectedCategory = 'all';
+        this.selectedCategory = ALL_CATEGORY_ID;
         this.categories = [];
     }
     getArticleId(event, post) {
@@ -469,7 +470,12 @@ const BlogArticlesGrid = class {
         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) {
@@ -513,6 +519,13 @@ const BlogArticlesGrid = class {
     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)
@@ -543,12 +556,11 @@ const BlogArticlesGrid = class {
     }
     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);
@@ -599,7 +611,7 @@ const BlogArticlesGrid = class {
             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,
@@ -660,13 +672,10 @@ const BlogArticlesGrid = class {
     }
     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();
@@ -691,14 +700,21 @@ const BlogArticlesGrid = class {
         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;
@@ -746,7 +762,7 @@ const BlogArticlesGrid = class {
     }
     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;
@@ -762,21 +778,28 @@ const BlogArticlesGrid = class {
         const showPagination = Boolean(this.paginationActive) && this.totalBlogs > +this.blogsLimit;
         const paginationClientStyling = !this.mbSource ? (this.clientStyling || this.paginationDefaultStyling) : undefined;
         const activeCategory = this.getActiveCategory();
-        return (index.h("div", { ref: el => this.stylingContainer = el }, this.showBreadcrumb && (index.h("nav", { class: "breadcrumb", "aria-label": "Breadcrumb" }, index.h("a", { href: `/${encodeURIComponent(this.language)}` }, translate$1('home', this.language, this.customTranslations)), index.h("span", { "aria-hidden": "true" }, "\u203A"), index.h("span", { "aria-current": "page" }, translate$1('blog', this.language, this.customTranslations)))), this.showPageTitle && index.h("h1", { class: "BlogPageTitle" }, " ", this.selectedCategory !== 'all' ? activeCategory === null || activeCategory === void 0 ? void 0 : activeCategory.name : translate$1('blogPageTitle', this.language, this.customTranslations), " "), this.selectedCategory !== 'all' &&
+        return (index.h("div", { ref: el => this.stylingContainer = el }, this.showBreadcrumb && (index.h("nav", { class: "breadcrumb", "aria-label": "Breadcrumb" }, index.h("a", { href: `/${encodeURIComponent(this.language)}` }, translate$1('home', this.language, this.customTranslations)), index.h("span", { "aria-hidden": "true" }, "\u203A"), activeCategory && this.selectedCategory !== ALL_CATEGORY_ID ? [
+            index.h("a", { href: `/${encodeURIComponent(this.language)}/blog` }, translate$1('blog', this.language, this.customTranslations)),
+            index.h("span", { "aria-hidden": "true" }, "\u203A"),
+            index.h("span", { "aria-current": "page" }, activeCategory.name),
+        ] : index.h("span", { "aria-current": "page" }, translate$1('blog', this.language, this.customTranslations)))), this.showPageTitle && index.h("h1", { class: "BlogPageTitle" }, " ", this.selectedCategory !== ALL_CATEGORY_ID ? activeCategory === null || activeCategory === void 0 ? void 0 : activeCategory.name : translate$1('blogPageTitle', this.language, this.customTranslations), " "), this.selectedCategory !== ALL_CATEGORY_ID &&
             (activeCategory === null || activeCategory === void 0 ? void 0 : activeCategory.description) && (index.h("div", { class: "BlogPageDescription", innerHTML: activeCategory.description })), index.h("div", { class: "BlogPageContainer" }, this.showBlogSubcategories &&
-            index.h("div", { class: "BlogCategoriesSliderWrapper" }, index.h("div", { class: "CarouselWrapper" }, index.h("div", { class: "CarouselContainer" }, index.h("div", { class: "BlogCategoriesWrapper" }, index.h("div", { class: "CategoryButtons" }, this.categories.map(category => (index.h("button", { disabled: this.isLoading || this.selectedCategory === category.id, key: category.id, class: {
+            index.h("div", { class: "BlogCategoriesSliderWrapper" }, index.h("div", { class: "CarouselWrapper" }, index.h("div", { class: "CarouselContainer" }, index.h("div", { class: "BlogCategoriesWrapper" }, index.h("div", { class: "CategoryButtons" }, this.categories.map(category => (index.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)))))))), index.h("div", { class: "BlogGridPaginationWrapper" }, showPagination && index.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 && (index.h("p", { class: "EmptyState", role: "status" }, translate$1(this.selectedCategory === 'all' ? 'emptyState' : 'emptyCategoryState', this.language, this.customTranslations))), (!this.isLoading) &&
+                }, onClick: event => this.handleCategoryClick(event, category.id) }, category.name)))))))), index.h("div", { class: "BlogGridPaginationWrapper" }, showPagination && index.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 && (index.h("p", { class: "EmptyState", role: "status" }, translate$1(this.selectedCategory === ALL_CATEGORY_ID ? 'emptyState' : 'emptyCategoryState', this.language, this.customTranslations))), (!this.isLoading) &&
             index.h("div", { class: `GridContainerWrapper BlogPage-${this.currentPage} ${this.device}` }, this.displayedBlogResponse && this.displayedBlogResponse.items.map((data) => {
                 var _a, _b;
-                return index.h("div", { key: data.postID, class: data.isFeaturedPost ? 'GridContainer FeaturedPost' : 'GridContainer' }, index.h("div", { class: "GridWrapper" }, index.h("div", { class: "GridSector" }, this.showPublishingDate &&
-                    index.h("div", { class: "BlogDate" }, index.h("time", { dateTime: data.publishingDate }, this.formatDate(data.publishingDate))), this.showImage && ((_a = data.image) === null || _a === void 0 ? void 0 : _a.src) ? (index.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]) ? (index.h("video", { class: "VisualContent", src: data.video.sources[this.device] })) : (index.h("span", { class: "VisualContent", style: { color: "#fff" } }, "No Image")))), index.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 (index.h("div", { key: data.postID, class: data.isFeaturedPost ? 'GridContainer FeaturedPost' : 'GridContainer' }, index.h("div", { class: "GridWrapper" }, index.h("div", { class: "GridSector" }, this.showPublishingDate &&
+                    index.h("div", { class: "BlogDate" }, index.h("time", { dateTime: data.publishingDate }, this.formatDate(data.publishingDate))), this.showImage && ((_a = data.image) === null || _a === void 0 ? void 0 : _a.src) ? (index.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]) ? (index.h("video", { class: "VisualContent", src: data.video.sources[this.device] })) : (index.h("span", { class: "VisualContent", style: { color: "#fff" } }, "No Image")))), index.h("div", { class: "GridSector" }, cardCategories.length > 0 && index.h("div", { class: "CategoryButtons BlogCardCategories" }, cardCategories.map(category => (index.h("a", { class: "CategoryButton", href: this.getCategoryHref(category), onClick: event => this.handleCategoryClick(event, category.id) }, category.name)))), this.showTitle &&
                     index.h("h2", { class: "BlogTitle" }, index.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 &&
-                    index.h("span", { class: "BlogLink" }, translate$1('readmore', this.language, this.customTranslations)))));
+                    index.h("span", { class: "BlogLink" }, translate$1('readmore', this.language, this.customTranslations))))));
             })), (this.isLoading) &&
             index.h("div", { class: "GridContainerWrapper LoadingGrid" }, placeholderCards))));
     }
@@ -818,10 +841,10 @@ const TRANSLATIONS = {
         lastPage: 'Last'
     },
     ro: {
-        firstPage: 'Prima',
-        previousPage: 'Anterior',
-        nextPage: 'Urmatoarea',
-        lastPage: 'Ultima'
+        firstPage: 'First',
+        previousPage: 'Previous',
+        nextPage: 'Next',
+        lastPage: 'Last'
     },
     fr: {
         firstPage: 'First',
@@ -838,14 +861,14 @@ const TRANSLATIONS = {
     hu: {
         firstPage: 'First',
         previousPage: 'Previous',
-        nextPage: 'Következő',
+        nextPage: 'Next',
         lastPage: 'Last'
     },
     hr: {
-        firstPage: 'Prva',
-        previousPage: 'Prethodna',
-        nextPage: 'Slijedeća',
-        lastPage: 'Zadnja'
+        firstPage: 'First',
+        previousPage: 'Previous',
+        nextPage: 'Next',
+        lastPage: 'Last'
     }
 };
 const translate = (key, customLang) => {
@@ -853,7 +876,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 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 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 .PaginationControl:not(:first-child),.RightItems .PaginationControl:not(:last-child){margin:0 10px}.LeftItems .PaginationControl,.RightItems .PaginationControl{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,.PaginationControl{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:background-color 0.1s linear, border-color 0.1s linear, color 0.1s linear, opacity 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],.PaginationControl[aria-disabled=true]{background-color:#ccc;border-color:#ccc;color:#fff;cursor:not-allowed}@media screen and (max-width: 720px){#PaginationContainer{flex-wrap:wrap;row-gap:10px}#PaginationContainer .LeftItems,#PaginationContainer .RightItems{display:flex;flex-direction:column;gap:10px}#PaginationContainer .RightItems{flex-direction:column-reverse}#PaginationContainer .PaginationControl{margin:0}#PaginationContainer .PaginationArea{order:1;flex-basis:100%;justify-content:center;margin:0;padding:0}a,.PaginationControl{width:90px;font-size:14px}}@media screen and (max-width: 480px){a,.PaginationControl{width:70px;font-size:14px}.paginationArea{padding:5px}}@media screen and (max-width: 320px){a,.PaginationControl{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 {
@@ -964,7 +987,10 @@ const HelperPagination = class {
         /**
          * Construct numbered navigation area based on current page position
          */
-        if (this.currentPage == 1 || this.currentPage == 2) {
+        if (this.endInt < 4) {
+            this.pagesArray = Array.from({ length: this.endInt + 1 }, (_, i) => i + 1);
+        }
+        else if (this.currentPage == 1 || this.currentPage == 2) {
             this.pagesArray = Array.from({ length: 4 }, (_, i) => i + 1);
             this.pagesArray.push('...');
         }
@@ -998,8 +1024,24 @@ const HelperPagination = class {
         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}`;
+        const pageNumber = page + this.page - 1;
+        if (pageNumber === 1) {
+            url.searchParams.delete(this.pageQueryParam);
+        }
+        else {
+            url.searchParams.set(this.pageQueryParam, String(pageNumber));
+        }
+        return `${url.pathname}${url.search}${url.hash}`;
+    }
+    renderNavigationButton(page, navigation, enabled, rel) {
+        const Tag = enabled ? 'a' : 'span';
+        const label = translate(navigation, this.language);
+        return (index.h(Tag, { class: "PaginationControl", href: enabled ? this.pageHref(page) : undefined, rel: enabled ? rel : undefined, "aria-label": label, "aria-disabled": !enabled ? 'true' : undefined, onClick: enabled ? event => {
+                if (event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey)
+                    return;
+                event.preventDefault();
+                this.navigateTo(navigation);
+            } : undefined }, index.h("span", { class: "NavigationButton" }, label), index.h("span", { class: "NavigationIcon" })));
     }
     render() {
         /**
@@ -1010,6 +1052,8 @@ const HelperPagination = class {
                 ? Math.max(1, this.currentPage - 5)
                 : Math.min(this.endInt + 1, this.currentPage + 5);
             return (index.h("li", { class: 'PaginationItem' + (item === this.currentPage ? ' ActiveItem' : ' ') + ' ' + (isMobile(this.userAgent) ? 'MobileButtons' : '') }, index.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 => {
+                    if (event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey)
+                        return;
                     event.preventDefault();
                     if (item !== this.currentPage)
                         this.paginationNavigation(item, index$1);
@@ -1018,45 +1062,11 @@ const HelperPagination = class {
         /**
          * Left navigation area
          */
-        let buttonSecondaryLeftSide = index.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');
-            } }, index.h("span", { class: "NavigationButton" }, translate('firstPage', this.language)), index.h("span", { class: "NavigationIcon" }));
-        let buttonsLeftSide = index.h("div", { class: "LeftItems" }, this.secondaryArrowsActive && buttonSecondaryLeftSide, index.h("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');
-            } }, index.h("span", { class: "NavigationButton" }, translate('previousPage', this.language)), index.h("span", { class: "NavigationIcon" })));
-        if (isMobile(this.userAgent)) {
-            buttonsLeftSide =
-                index.h("div", { class: "LeftItems" }, index.h("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');
-                    } }, index.h("span", { class: "NavigationButton" }, translate('previousPage', this.language)), index.h("span", { class: "NavigationIcon" })));
-        }
+        const buttonsLeftSide = index.h("div", { class: "LeftItems" }, this.secondaryArrowsActive && this.renderNavigationButton(1, 'firstPage', Boolean(this.prevPage)), this.renderNavigationButton(this.currentPage - 1, 'previousPage', Boolean(this.prevPage), 'prev'));
         /**
          * Right navigation area
          */
-        let buttonSecondaryRightSide = index.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');
-            } }, index.h("span", { class: "NavigationButton" }, translate('lastPage', this.language)), index.h("span", { class: "NavigationIcon" }));
-        let buttonsRightSide = index.h("div", { class: "RightItems" }, index.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');
-            } }, index.h("span", { class: "NavigationButton" }, translate('nextPage', this.language)), index.h("span", { class: "NavigationIcon" })), this.secondaryArrowsActive && buttonSecondaryRightSide);
-        if (isMobile(this.userAgent)) {
-            buttonsRightSide =
-                index.h("div", { class: "RightItems" }, index.h("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');
-                    } }, index.h("span", { class: "NavigationButton" }, translate('nextPage', this.language)), index.h("span", { class: "NavigationIcon" })));
-        }
+        const buttonsRightSide = index.h("div", { class: "RightItems" }, this.renderNavigationButton(this.currentPage + 1, 'nextPage', Boolean(this.nextPage), 'next'), this.secondaryArrowsActive && this.renderNavigationButton(this.endInt + 1, 'lastPage', Boolean(this.nextPage)));
         return (index.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 {

package/dist/cjs/{index-d9577f9e.js → index-96fb13fd.js}

@@ -21,7 +21,7 @@ function _interopNamespace(e) {
 }
 
 const NAMESPACE = 'blog-articles-grid';
-const BUILD = /* blog-articles-grid */ { allRenderFn: true, appendChildSlotFix: false, asyncLoading: true, asyncQueue: false, attachStyles: true, cloneNodeFix: false, cmpDidLoad: true, cmpDidRender: false, cmpDidUnload: false, cmpDidUpdate: false, cmpShouldUpdate: false, cmpWillLoad: true, cmpWillRender: true, cmpWillUpdate: false, connectedCallback: false, constructableCSS: true, cssAnnotations: true, devTools: false, disconnectedCallback: true, element: false, event: true, experimentalScopedSlotChanges: false, experimentalSlotFixes: false, formAssociated: false, hasRenderFn: true, hostListener: true, hostListenerTarget: true, hostListenerTargetBody: false, hostListenerTargetDocument: false, hostListenerTargetParent: false, hostListenerTargetWindow: true, hotModuleReplacement: false, hydrateClientSide: false, hydrateServerSide: false, hydratedAttribute: false, hydratedClass: true, hydratedSelectorName: "hydrated", initializeNextTick: false, invisiblePrehydration: true, isDebug: false, isDev: false, isTesting: false, lazyLoad: true, lifecycle: true, lifecycleDOMEvents: false, member: true, method: false, mode: false, observeAttribute: true, profile: false, prop: true, propBoolean: true, propMutable: true, propNumber: true, propString: true, reflect: true, scoped: false, scopedSlotTextContentFix: false, scriptDataOpts: false, shadowDelegatesFocus: false, shadowDom: true, slot: false, slotChildNodesFix: false, slotRelocation: false, state: true, style: true, svg: false, taskQueue: true, transformTagName: false, updatable: true, vdomAttribute: true, vdomClass: true, vdomFunctional: false, vdomKey: true, vdomListener: true, vdomPropOrAttr: true, vdomRef: true, vdomRender: true, vdomStyle: true, vdomText: true, vdomXlink: false, watchCallback: true };
+const BUILD = /* blog-articles-grid */ { allRenderFn: true, appendChildSlotFix: false, asyncLoading: true, asyncQueue: false, attachStyles: true, cloneNodeFix: false, cmpDidLoad: true, cmpDidRender: false, cmpDidUnload: false, cmpDidUpdate: false, cmpShouldUpdate: false, cmpWillLoad: true, cmpWillRender: true, cmpWillUpdate: false, connectedCallback: false, constructableCSS: true, cssAnnotations: true, devTools: false, disconnectedCallback: true, element: false, event: true, experimentalScopedSlotChanges: false, experimentalSlotFixes: false, formAssociated: false, hasRenderFn: true, hostListener: true, hostListenerTarget: true, hostListenerTargetBody: false, hostListenerTargetDocument: false, hostListenerTargetParent: false, hostListenerTargetWindow: true, hotModuleReplacement: false, hydrateClientSide: false, hydrateServerSide: false, hydratedAttribute: false, hydratedClass: true, hydratedSelectorName: "hydrated", initializeNextTick: false, invisiblePrehydration: true, isDebug: false, isDev: false, isTesting: false, lazyLoad: true, lifecycle: true, lifecycleDOMEvents: false, member: true, method: false, mode: false, observeAttribute: true, profile: false, prop: true, propBoolean: true, propMutable: true, propNumber: true, propString: true, reflect: true, scoped: false, scopedSlotTextContentFix: false, scriptDataOpts: false, shadowDelegatesFocus: false, shadowDom: true, slot: false, slotChildNodesFix: false, slotRelocation: false, state: true, style: true, svg: false, taskQueue: true, transformTagName: false, updatable: true, vdomAttribute: true, vdomClass: true, vdomFunctional: true, vdomKey: true, vdomListener: true, vdomPropOrAttr: true, vdomRef: true, vdomRender: true, vdomStyle: true, vdomText: true, vdomXlink: false, watchCallback: true };
 
 /*
  Stencil Client Platform v4.19.2 | MIT Licensed | https://stenciljs.com
@@ -281,6 +281,13 @@ var h = (nodeName, vnodeData, ...children) => {
       }
     }
   }
+  if (typeof nodeName === "function") {
+    return nodeName(
+      vnodeData === null ? {} : vnodeData,
+      vNodeChildren,
+      vdomFnUtils
+    );
+  }
   const vnode = newVNode(nodeName, null);
   vnode.$attrs$ = vnodeData;
   if (vNodeChildren.length > 0) {
@@ -309,6 +316,36 @@ var newVNode = (tag, text) => {
 };
 var Host = {};
 var isHost = (node) => node && node.$tag$ === Host;
+var vdomFnUtils = {
+  forEach: (children, cb) => children.map(convertToPublic).forEach(cb),
+  map: (children, cb) => children.map(convertToPublic).map(cb).map(convertToPrivate)
+};
+var convertToPublic = (node) => ({
+  vattrs: node.$attrs$,
+  vchildren: node.$children$,
+  vkey: node.$key$,
+  vname: node.$name$,
+  vtag: node.$tag$,
+  vtext: node.$text$
+});
+var convertToPrivate = (node) => {
+  if (typeof node.vtag === "function") {
+    const vnodeData = { ...node.vattrs };
+    if (node.vkey) {
+      vnodeData.key = node.vkey;
+    }
+    if (node.vname) {
+      vnodeData.name = node.vname;
+    }
+    return h(node.vtag, vnodeData, ...node.vchildren || []);
+  }
+  const vnode = newVNode(node.vtag, node.vtext);
+  vnode.$attrs$ = node.vattrs;
+  vnode.$children$ = node.vchildren;
+  vnode.$key$ = node.vkey;
+  vnode.$name$ = node.vname;
+  return vnode;
+};
 var parsePropertyValue = (propValue, propType) => {
   if (propValue != null && !isComplexType(propValue)) {
     if (propType & 4 /* Boolean */) {

package/dist/cjs/loader.cjs.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-d9577f9e.js');
+const index = require('./index-96fb13fd.js');
 const appGlobals = require('./app-globals-3a1e7e63.js');
 
 const defineCustomElements = async (win, options) => {

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

@@ -10,7 +10,7 @@
   max-width: 1300px;
   padding: 0 20px;
   margin: 40px auto 20px;
-  color: var(--emw--color-white, #FFFFFF);
+  color: var(--emw--color-typography);
 }
 .breadcrumb a {
   color: inherit;
@@ -40,7 +40,7 @@
 }
 
 .EmptyState {
-  color: var(--emw--color-white, #FFFFFF);
+  color: var(--emw--color-typography);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -77,6 +77,9 @@
   height: 280px;
   background: var(--emw--color-white, #FFFFFF);
 }
+.GridContainer:not(.Skeleton):hover .GridWrapper {
+  background: color-mix(in srgb, var(--emw--color-white, #FFFFFF) 90%, #000);
+}
 .GridContainer .GridSector {
   flex-basis: 50%;
   position: relative;
@@ -124,6 +127,14 @@
   text-decoration: none;
   cursor: pointer;
 }
+.GridContainer .BlogTitle .BlogCardLink:focus-visible {
+  outline: none;
+}
+.GridContainer .BlogTitle .BlogCardLink:focus-visible::after {
+  border-radius: 15px;
+  outline: 3px solid var(--emw--color-primary, #CD0B5E);
+  outline-offset: -3px;
+}
 .GridContainer .BlogTitle .BlogCardLink::after {
   content: "";
   position: absolute;
@@ -241,6 +252,7 @@
   padding: 10px 20px;
   border-radius: 999px;
   border: 1px solid currentColor;
+  text-decoration: none;
   background: transparent;
   color: var(--emw--color-white, #fff);
   cursor: pointer;
@@ -250,4 +262,15 @@
 .CategoryButton.active {
   background: var(--emw--casino-color-primary, var(--emw--color-primary, #22B04E));
   color: var(--emw--color-background, #fff);
+}
+
+.BlogCardCategories {
+  margin-bottom: 10px;
+}
+.BlogCardCategories .CategoryButton {
+  position: relative;
+  z-index: 3;
+  padding: 4px 10px;
+  color: inherit;
+  font-size: 12px;
 }