@everymatrix/blog-articles-grid 1.94.9 → 1.94.16

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

@@ -1,13 +1,13 @@
 import { h } from "@stencil/core";
 import { translate } from "../../utils/locale.utils";
 import { setClientStyling, setClientStylingURL, setStreamStyling } from "../../../../../../../../libs/common/src/styling/index";
-import { getDevicePlatform, getDeviceCustom } from "../../utils/utils";
+import { getDevicePlatform, getDeviceType } from "../../../../../../../../libs/common/src/device/index";
 import "../../../../../helper-pagination/dist/types/index";
 export class BlogArticlesGrid {
     constructor() {
-        this.clientStylingContent = '';
+        this.lastPage = 1;
         this.isInitialized = false;
-        this.defaultStyling = `
+        this.paginationDefaultStyling = `
   div#PaginationContainer {
     justify-content: right;
   }
@@ -73,12 +73,9 @@ export class BlogArticlesGrid {
         };
         this.renderContentConditionally = (content) => {
             if (!content)
-                return;
-            const hasBanner = content.indexOf('<bannermatrix-banner') !== -1;
-            if (!hasBanner) {
-                return h("div", { class: "BlogContent", innerHTML: content });
-            }
-            if (this.bannerMatrixReady) {
+                return null;
+            const hasBanner = content.includes('<bannermatrix-banner');
+            if (!hasBanner || this.bannerMatrixReady) {
                 return h("div", { class: "BlogContent", innerHTML: content });
             }
             return null;
@@ -99,9 +96,9 @@ export class BlogArticlesGrid {
         this.postMessageEvent = '';
         this.blogsLimit = '0';
         this.paginationActive = undefined;
-        this.arrowsActive = undefined;
-        this.secondaryArrowsActive = undefined;
-        this.numberedNavActive = undefined;
+        this.arrowsActive = true;
+        this.secondaryArrowsActive = false;
+        this.numberedNavActive = false;
         this.intlDateTimeFormat = '';
         this.page = '1';
         this.eventId = undefined;
@@ -114,18 +111,19 @@ export class BlogArticlesGrid {
         this.bannerMatrixReady = false;
         this.nextPage = '';
         this.previousPage = '';
-        this.device = '';
+        this.device = 'mobile';
         this.displayedBlogResponse = undefined;
         this.paginationBlogResponse = undefined;
         this.allBlogResponse = undefined;
         this.totalBlogs = 0;
     }
     getArticleId(postId, slug, customPath) {
+        var _a;
         if (this.usePostmessage) {
             window.postMessage({ type: this.postMessageEvent, postId: postId.toString(), slug, customPath });
         }
         else {
-            this.articleActionButton.emit({ postId: postId.toString(), slug, customPath });
+            (_a = this.articleActionButton) === null || _a === void 0 ? void 0 : _a.emit({ postId: postId.toString(), slug, customPath });
         }
     }
     // Rerender when bannermatrix has finished loaded. Issue when bannermatrix passed as content from CMS.
@@ -142,12 +140,12 @@ export class BlogArticlesGrid {
         }
     }
     handleClientStylingChange(newValue, oldValue) {
-        if (newValue != oldValue) {
+        if (newValue !== oldValue) {
             setClientStyling(this.stylingContainer, this.clientStyling);
         }
     }
     handleClientStylingChangeURL(newValue, oldValue) {
-        if (newValue != oldValue) {
+        if (newValue !== oldValue) {
             if (this.clientStylingUrl)
                 setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
         }
@@ -189,6 +187,8 @@ export class BlogArticlesGrid {
         return featuredItems[0];
     }
     moveLatestFeatureToStart(blogItems, latestFeatured) {
+        if (!latestFeatured)
+            return blogItems;
         const index = blogItems.indexOf(latestFeatured);
         if (index !== -1) {
             blogItems.splice(index, 1);
@@ -244,7 +244,7 @@ export class BlogArticlesGrid {
                 // TODO: this is a temporary solution for filter blogPost by eventId from all blog posts.
                 // apijson should have functionality to filter in backend side in future.
                 const allBlogData = ((_a = this.allBlogResponse) === null || _a === void 0 ? void 0 : _a.items) ? this.allBlogResponse : await this.fetchBlogPosts(1, true);
-                const filteredItems = allBlogData.items.filter(({ eventIds }) => eventIds.includes(this.eventId));
+                const filteredItems = allBlogData.items.filter(({ eventIds }) => { var _a; return eventIds.includes((_a = this.eventId) !== null && _a !== void 0 ? _a : '-'); });
                 if (filteredItems.length) {
                     blogResponse = Object.assign(Object.assign({}, allBlogData), { items: filteredItems, total: Math.min(parseInt(this.blogsLimit), filteredItems.length) });
                     window.postMessage({
@@ -272,7 +272,7 @@ export class BlogArticlesGrid {
             }
             this.displayedBlogResponse = blogResponse;
             this.totalBlogs = blogResponse.total;
-            this.lastPage = +((_g = (_f = blogResponse.pages.last) === null || _f === void 0 ? void 0 : _f.match(/&page=(\d+)/)) === null || _g === void 0 ? void 0 : _g[1]) || 1;
+            this.lastPage = +(((_g = (_f = blogResponse.pages.last) === null || _f === void 0 ? void 0 : _f.match(/&page=(\d+)/)) === null || _g === void 0 ? void 0 : _g[1]) || 1);
             this.nextPage = blogResponse.pages.next;
             this.previousPage = blogResponse.pages.previous;
             this.isLoading = false;
@@ -294,21 +294,21 @@ export class BlogArticlesGrid {
             }
         }
     }
-    componentDidLoad() {
-        if (this.stylingContainer) {
-            if (window.emMessageBus != undefined) {
-                setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`, this.stylingSubscription);
-            }
-            else {
-                if (this.clientStyling)
-                    setClientStyling(this.stylingContainer, this.clientStyling);
-                if (this.clientStylingUrl)
-                    setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
-            }
+    handleClientStyling() {
+        if (window.emMessageBus !== undefined) {
+            this.stylingSubscription = setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`, this.stylingSubscription, true);
+            return;
         }
+        if (this.clientStyling)
+            setClientStyling(this.stylingContainer, this.clientStyling);
+        if (this.clientStylingUrl)
+            setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
+    }
+    componentDidLoad() {
+        this.handleClientStyling();
         this.isInitialized = true;
         window.postMessage({ type: 'BlogArticlesGridLoaded' }, window.location.href);
-        this.device = getDeviceCustom();
+        this.device = getDeviceType();
     }
     disconnectedCallback() {
         this.stylingSubscription && this.stylingSubscription.unsubscribe();
@@ -336,8 +336,10 @@ export class BlogArticlesGrid {
         for (let i = 0; i < parseInt(this.blogsLimit); i++) {
             placeholderCards.push(h("div", { class: "GridContainer FeaturedPost Skeleton" }, h("div", { class: "GridWrapper" }, h("div", { class: "GridSector" }, h("div", { class: "VisualContent LoadingImage" })), h("div", { class: "GridSector" }, h("div", { class: "BlogTitle LoadingStripe LoadingSmallStripe" }), h("div", { class: "BlogDetails LoadingStripe LoadingMediumStripe" }), h("div", { class: "BlogLink LoadingStripe LoadingLongStripe" })))));
         }
-        return (h("div", { ref: el => this.stylingContainer = el }, h("div", { class: "BlogPageContainer" }, h("div", { class: "BlogGridPaginationWrapper" }, this.paginationActive == true && this.totalBlogs > +this.blogsLimit && 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, "md-source": this.mbSource, "client-styling": this.clientStyling || this.defaultStyling, "client-styling-url": this.clientStylingUrl, "arrows-active": this.arrowsActive || true, "secondary-arrows-active": this.secondaryArrowsActive || false, "numbered-nav-active": this.numberedNavActive || false })), (!this.isLoading) &&
-            h("div", { class: `GridContainerWrapper BlogPage-${this.currentPage}` }, this.displayedBlogResponse && this.displayedBlogResponse.items.map((data) => {
+        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) &&
+            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" }, this.formatDate(data === null || data === void 0 ? void 0 : data.publishingDate)), this.showImage && ((_a = data.image) === null || _a === void 0 ? void 0 : _a.src) ? (h("div", { class: "VisualContent", style: { background: `url(${this.setImage(data.image)}) no-repeat center center / cover` } })) : (((_b = data.video) === null || _b === void 0 ? void 0 : _b.sources[this.device]) ? (h("video", { class: "VisualContent", src: data.video.sources[this.device], controls: true })) : (h("h1", { class: "VisualContent", style: { color: "#fff" } }, "No Image")))), h("div", { class: "GridSector" }, this.showTitle &&
@@ -370,7 +372,7 @@ export class BlogArticlesGrid {
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "Endpoint URL for the source of data"
@@ -441,7 +443,7 @@ export class BlogArticlesGrid {
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "Client custom styling via streamStyling"
@@ -637,7 +639,7 @@ export class BlogArticlesGrid {
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "Customize pagination: Activate pagination"
@@ -660,7 +662,8 @@ export class BlogArticlesGrid {
                     "text": "Customize pagination: Activate pagination arrows"
                 },
                 "attribute": "arrows-active",
-                "reflect": true
+                "reflect": true,
+                "defaultValue": "true"
             },
             "secondaryArrowsActive": {
                 "type": "boolean",
@@ -677,7 +680,8 @@ export class BlogArticlesGrid {
                     "text": "Customize pagination: Activate pagination secondary arrows"
                 },
                 "attribute": "secondary-arrows-active",
-                "reflect": true
+                "reflect": true,
+                "defaultValue": "false"
             },
             "numberedNavActive": {
                 "type": "boolean",
@@ -694,7 +698,8 @@ export class BlogArticlesGrid {
                     "text": "Customize pagination: Activate pagination numbered navigation"
                 },
                 "attribute": "numbered-nav-active",
-                "reflect": true
+                "reflect": true,
+                "defaultValue": "false"
             },
             "intlDateTimeFormat": {
                 "type": "string",
@@ -779,14 +784,9 @@ export class BlogArticlesGrid {
                     "text": ""
                 },
                 "complexType": {
-                    "original": "Object",
-                    "resolved": "Object",
-                    "references": {
-                        "Object": {
-                            "location": "global",
-                            "id": "global::Object"
-                        }
-                    }
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
                 }
             }];
     }

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

@@ -158,29 +158,67 @@ function getAdoptStyleSubscription(stylingContainer, domain) {
   });
 }
 
-function checkCustomDeviceWidth() {
-    const width = screen.availWidth;
-    if (width < 600) {
-        return 'mobile';
-    }
-    else if (width >= 600 && width < 1100) {
-        return 'tablet';
-    }
-}
-function isIpad() {
-    const userAgent = navigator.userAgent.toLowerCase();
-    // Traditional iPad user agent
-    if (userAgent.includes('ipad')) {
+const MOBILE_MAX = 599;
+const TABLET_MAX = 1099;
+function isIPad(ua) {
+    // Classic iPad UA
+    if (ua.includes('ipad'))
         return true;
-    }
-    return userAgent.indexOf('macintosh') > -1 && navigator.maxTouchPoints && navigator.maxTouchPoints > 2;
+    // iPadOS 13+ Safari pretending to be macOS
+    return ua.includes('macintosh') && navigator.maxTouchPoints > 0;
+}
+function isIPhone(ua) {
+    return ua.includes('iphone') || ua.includes('ipod');
+}
+function isAndroid(ua) {
+    return ua.includes('android');
 }
-function getDeviceCustom() {
-    const userAgent = navigator.userAgent.toLowerCase();
-    let source = '';
-    source = (userAgent.includes('android') || userAgent.includes('iphone') || isIpad()) ? checkCustomDeviceWidth() : 'desktop';
-    return source;
+function isAndroidMobile(ua, width) {
+    return isAndroid(ua) && (ua.includes('mobile') || ua.includes('mobi') || width <= MOBILE_MAX);
 }
+function isAndroidTablet(ua, width) {
+    return isAndroid(ua) && !ua.includes('mobile') && !ua.includes('mobi') && width > MOBILE_MAX;
+}
+/**
+ * Detects the current device type using user agent and viewport width.
+ *
+ * By default, this function focuses on actual device/platform detection.
+ * Responsive width fallback is optional and mainly intended for
+ * responsive layout testing or browser emulation.
+ *
+ * Supports:
+ * - iPhone / iPad
+ * - Android mobile / tablet
+ *
+ * @param enableResponsiveFallback
+ * When enabled, classify unknown devices by viewport width.
+ *
+ * @returns `'mobile' | 'tablet' | 'desktop'`
+ */
+const getDeviceType = (enableResponsiveFallback = false) => {
+    if (typeof window === 'undefined' || typeof navigator === 'undefined') {
+        return 'desktop';
+    }
+    const ua = navigator.userAgent.toLowerCase();
+    const width = window.innerWidth;
+    // Apple devices
+    if (isIPad(ua))
+        return 'tablet';
+    if (isIPhone(ua))
+        return 'mobile';
+    // Android devices
+    if (isAndroidMobile(ua, width))
+        return 'mobile';
+    if (isAndroidTablet(ua, width))
+        return 'tablet';
+    if (enableResponsiveFallback) {
+        if (width <= MOBILE_MAX)
+            return 'mobile';
+        if (width <= TABLET_MAX)
+            return 'tablet';
+    }
+    return 'desktop';
+};
 const getDevice = () => {
     let userAgent = window.navigator.userAgent;
     if (userAgent.toLowerCase().match(/android/i)) {
@@ -203,10 +241,8 @@ const getDevicePlatform = () => {
         else if (device === 'iPad' || device === 'iPhone') {
             return 'mtWeb';
         }
-        else {
-            return 'mtWeb';
-        }
     }
+    return 'mtWeb';
 };
 
 const blogArticlesGridCss = ":host {\n  display: block;\n}\n\n.BlogPageContainer {\n  background: #0A0A17;\n  padding: 20px;\n}\n\n.GridContainerWrapper {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: 20px;\n}\n\n.BlogPage-0 .GridContainer.FeaturedPost:first-child {\n  width: 100%;\n  flex-basis: auto;\n}\n\n.GridContainer {\n  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  padding: 20px 40px;\n  display: flex;\n  flex-direction: column;\n}\n.GridContainer .VisualContent {\n  width: 100%;\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}\n.GridContainer .BlogTitle {\n  font-size: 24px;\n  color: #000;\n  padding-bottom: 10px;\n}\n.GridContainer .BlogContent {\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: #000;\n  position: absolute;\n  bottom: 16px;\n}\n.GridContainer .BlogLink button {\n  font-size: 14px;\n  border: none;\n  padding: 0;\n  background: none;\n  color: #22B04E;\n  cursor: pointer;\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}";
@@ -216,9 +252,9 @@ const BlogArticlesGrid = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.articleActionButton = createEvent(this, "articleActionButton", 7);
-        this.clientStylingContent = '';
+        this.lastPage = 1;
         this.isInitialized = false;
-        this.defaultStyling = `
+        this.paginationDefaultStyling = `
   div#PaginationContainer {
     justify-content: right;
   }
@@ -284,12 +320,9 @@ const BlogArticlesGrid = class {
         };
         this.renderContentConditionally = (content) => {
             if (!content)
-                return;
-            const hasBanner = content.indexOf('<bannermatrix-banner') !== -1;
-            if (!hasBanner) {
-                return h("div", { class: "BlogContent", innerHTML: content });
-            }
-            if (this.bannerMatrixReady) {
+                return null;
+            const hasBanner = content.includes('<bannermatrix-banner');
+            if (!hasBanner || this.bannerMatrixReady) {
                 return h("div", { class: "BlogContent", innerHTML: content });
             }
             return null;
@@ -310,9 +343,9 @@ const BlogArticlesGrid = class {
         this.postMessageEvent = '';
         this.blogsLimit = '0';
         this.paginationActive = undefined;
-        this.arrowsActive = undefined;
-        this.secondaryArrowsActive = undefined;
-        this.numberedNavActive = undefined;
+        this.arrowsActive = true;
+        this.secondaryArrowsActive = false;
+        this.numberedNavActive = false;
         this.intlDateTimeFormat = '';
         this.page = '1';
         this.eventId = undefined;
@@ -325,18 +358,19 @@ const BlogArticlesGrid = class {
         this.bannerMatrixReady = false;
         this.nextPage = '';
         this.previousPage = '';
-        this.device = '';
+        this.device = 'mobile';
         this.displayedBlogResponse = undefined;
         this.paginationBlogResponse = undefined;
         this.allBlogResponse = undefined;
         this.totalBlogs = 0;
     }
     getArticleId(postId, slug, customPath) {
+        var _a;
         if (this.usePostmessage) {
             window.postMessage({ type: this.postMessageEvent, postId: postId.toString(), slug, customPath });
         }
         else {
-            this.articleActionButton.emit({ postId: postId.toString(), slug, customPath });
+            (_a = this.articleActionButton) === null || _a === void 0 ? void 0 : _a.emit({ postId: postId.toString(), slug, customPath });
         }
     }
     // Rerender when bannermatrix has finished loaded. Issue when bannermatrix passed as content from CMS.
@@ -353,12 +387,12 @@ const BlogArticlesGrid = class {
         }
     }
     handleClientStylingChange(newValue, oldValue) {
-        if (newValue != oldValue) {
+        if (newValue !== oldValue) {
             setClientStyling(this.stylingContainer, this.clientStyling);
         }
     }
     handleClientStylingChangeURL(newValue, oldValue) {
-        if (newValue != oldValue) {
+        if (newValue !== oldValue) {
             if (this.clientStylingUrl)
                 setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
         }
@@ -400,6 +434,8 @@ const BlogArticlesGrid = class {
         return featuredItems[0];
     }
     moveLatestFeatureToStart(blogItems, latestFeatured) {
+        if (!latestFeatured)
+            return blogItems;
         const index = blogItems.indexOf(latestFeatured);
         if (index !== -1) {
             blogItems.splice(index, 1);
@@ -455,7 +491,7 @@ const BlogArticlesGrid = class {
                 // TODO: this is a temporary solution for filter blogPost by eventId from all blog posts.
                 // apijson should have functionality to filter in backend side in future.
                 const allBlogData = ((_a = this.allBlogResponse) === null || _a === void 0 ? void 0 : _a.items) ? this.allBlogResponse : await this.fetchBlogPosts(1, true);
-                const filteredItems = allBlogData.items.filter(({ eventIds }) => eventIds.includes(this.eventId));
+                const filteredItems = allBlogData.items.filter(({ eventIds }) => { var _a; return eventIds.includes((_a = this.eventId) !== null && _a !== void 0 ? _a : '-'); });
                 if (filteredItems.length) {
                     blogResponse = Object.assign(Object.assign({}, allBlogData), { items: filteredItems, total: Math.min(parseInt(this.blogsLimit), filteredItems.length) });
                     window.postMessage({
@@ -483,7 +519,7 @@ const BlogArticlesGrid = class {
             }
             this.displayedBlogResponse = blogResponse;
             this.totalBlogs = blogResponse.total;
-            this.lastPage = +((_g = (_f = blogResponse.pages.last) === null || _f === void 0 ? void 0 : _f.match(/&page=(\d+)/)) === null || _g === void 0 ? void 0 : _g[1]) || 1;
+            this.lastPage = +(((_g = (_f = blogResponse.pages.last) === null || _f === void 0 ? void 0 : _f.match(/&page=(\d+)/)) === null || _g === void 0 ? void 0 : _g[1]) || 1);
             this.nextPage = blogResponse.pages.next;
             this.previousPage = blogResponse.pages.previous;
             this.isLoading = false;
@@ -505,21 +541,21 @@ const BlogArticlesGrid = class {
             }
         }
     }
-    componentDidLoad() {
-        if (this.stylingContainer) {
-            if (window.emMessageBus != undefined) {
-                setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`, this.stylingSubscription);
-            }
-            else {
-                if (this.clientStyling)
-                    setClientStyling(this.stylingContainer, this.clientStyling);
-                if (this.clientStylingUrl)
-                    setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
-            }
+    handleClientStyling() {
+        if (window.emMessageBus !== undefined) {
+            this.stylingSubscription = setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`, this.stylingSubscription, true);
+            return;
         }
+        if (this.clientStyling)
+            setClientStyling(this.stylingContainer, this.clientStyling);
+        if (this.clientStylingUrl)
+            setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
+    }
+    componentDidLoad() {
+        this.handleClientStyling();
         this.isInitialized = true;
         window.postMessage({ type: 'BlogArticlesGridLoaded' }, window.location.href);
-        this.device = getDeviceCustom();
+        this.device = getDeviceType();
     }
     disconnectedCallback() {
         this.stylingSubscription && this.stylingSubscription.unsubscribe();
@@ -547,8 +583,10 @@ const BlogArticlesGrid = class {
         for (let i = 0; i < parseInt(this.blogsLimit); i++) {
             placeholderCards.push(h("div", { class: "GridContainer FeaturedPost Skeleton" }, h("div", { class: "GridWrapper" }, h("div", { class: "GridSector" }, h("div", { class: "VisualContent LoadingImage" })), h("div", { class: "GridSector" }, h("div", { class: "BlogTitle LoadingStripe LoadingSmallStripe" }), h("div", { class: "BlogDetails LoadingStripe LoadingMediumStripe" }), h("div", { class: "BlogLink LoadingStripe LoadingLongStripe" })))));
         }
-        return (h("div", { ref: el => this.stylingContainer = el }, h("div", { class: "BlogPageContainer" }, h("div", { class: "BlogGridPaginationWrapper" }, this.paginationActive == true && this.totalBlogs > +this.blogsLimit && 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, "md-source": this.mbSource, "client-styling": this.clientStyling || this.defaultStyling, "client-styling-url": this.clientStylingUrl, "arrows-active": this.arrowsActive || true, "secondary-arrows-active": this.secondaryArrowsActive || false, "numbered-nav-active": this.numberedNavActive || false })), (!this.isLoading) &&
-            h("div", { class: `GridContainerWrapper BlogPage-${this.currentPage}` }, this.displayedBlogResponse && this.displayedBlogResponse.items.map((data) => {
+        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) &&
+            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" }, this.formatDate(data === null || data === void 0 ? void 0 : data.publishingDate)), this.showImage && ((_a = data.image) === null || _a === void 0 ? void 0 : _a.src) ? (h("div", { class: "VisualContent", style: { background: `url(${this.setImage(data.image)}) no-repeat center center / cover` } })) : (((_b = data.video) === null || _b === void 0 ? void 0 : _b.sources[this.device]) ? (h("video", { class: "VisualContent", src: data.video.sources[this.device], controls: true })) : (h("h1", { class: "VisualContent", style: { color: "#fff" } }, "No Image")))), h("div", { class: "GridSector" }, this.showTitle &&
@@ -643,6 +681,7 @@ const HelperPagination = class {
          * Navigation logic
          */
         this.navigateTo = (navigationPage) => {
+            var _a;
             switch (navigationPage) {
                 case 'firstPage':
                     this.offsetInt = 0;
@@ -666,12 +705,13 @@ const HelperPagination = class {
                     break;
             }
             this.previousPage = !this.offsetInt ? false : true;
-            this.hpPageChange.emit({ offset: this.offsetInt, limit: this.limitInt, total: this.totalInt });
+            (_a = this.hpPageChange) === null || _a === void 0 ? void 0 : _a.emit({ offset: this.offsetInt, limit: this.limitInt, total: this.totalInt });
         };
         /**
          * Handle navigation from here
          */
         this.paginationNavigation = (pageNumber, index) => {
+            var _a;
             this.previousPage = true;
             if (!isNaN(pageNumber)) {
                 if (pageNumber === 1) {
@@ -693,7 +733,7 @@ const HelperPagination = class {
                     this.navigateTo('fivePagesForward');
                 }
             }
-            this.hpPageChange.emit({ offset: this.offsetInt, limit: this.limitInt, total: this.totalInt });
+            (_a = this.hpPageChange) === null || _a === void 0 ? void 0 : _a.emit({ offset: this.offsetInt, limit: this.limitInt, total: this.totalInt });
         };
         this.nextPage = '';
         this.prevPage = '';
@@ -704,24 +744,24 @@ const HelperPagination = class {
         this.mbSource = undefined;
         this.clientStyling = '';
         this.clientStylingUrl = '';
-        this.arrowsActive = undefined;
-        this.secondaryArrowsActive = undefined;
-        this.numberedNavActive = undefined;
-        this.offsetInt = undefined;
+        this.arrowsActive = true;
+        this.secondaryArrowsActive = false;
+        this.numberedNavActive = false;
+        this.offsetInt = 0;
         this.lastPage = false;
         this.previousPage = false;
-        this.limitInt = undefined;
-        this.totalInt = undefined;
+        this.limitInt = 0;
+        this.totalInt = 0;
         this.pagesArray = [];
         this.endInt = 0;
     }
     handleClientStylingChange(newValue, oldValue) {
-        if (newValue != oldValue) {
+        if (newValue !== oldValue) {
             setClientStyling(this.stylingContainer, this.clientStyling);
         }
     }
     handleClientStylingChangeURL(newValue, oldValue) {
-        if (newValue != oldValue) {
+        if (newValue !== oldValue) {
             if (this.clientStylingUrl)
                 setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
         }
@@ -751,18 +791,18 @@ const HelperPagination = class {
             this.pagesArray.unshift('...');
         }
     }
-    componentDidLoad() {
-        if (this.stylingContainer) {
-            if (window.emMessageBus != undefined) {
-                setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`, this.stylingSubscription);
-            }
-            else {
-                if (this.clientStyling)
-                    setClientStyling(this.stylingContainer, this.clientStyling);
-                if (this.clientStylingUrl)
-                    setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
-            }
+    handleClientStyling() {
+        if (window.emMessageBus !== undefined) {
+            this.stylingSubscription = setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`, this.stylingSubscription, true);
+            return;
         }
+        if (this.clientStyling)
+            setClientStyling(this.stylingContainer, this.clientStyling);
+        if (this.clientStylingUrl)
+            setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
+    }
+    componentDidLoad() {
+        this.handleClientStyling();
     }
     disconnectedCallback() {
         this.stylingSubscription && this.stylingSubscription.unsubscribe();

package/dist/types/builds/emfe-widgets/widgets-monorepo/packages/stencil/blog-articles-grid/.stencil/libs/common/src/device/index.d.ts

@@ -0,0 +1,21 @@
+export type DevicePlatform = 'dk' | 'mtWeb';
+export type Device = 'mobile' | 'tablet' | 'desktop';
+/**
+ * Detects the current device type using user agent and viewport width.
+ *
+ * By default, this function focuses on actual device/platform detection.
+ * Responsive width fallback is optional and mainly intended for
+ * responsive layout testing or browser emulation.
+ *
+ * Supports:
+ * - iPhone / iPad
+ * - Android mobile / tablet
+ *
+ * @param enableResponsiveFallback
+ * When enabled, classify unknown devices by viewport width.
+ *
+ * @returns `'mobile' | 'tablet' | 'desktop'`
+ */
+export declare const getDeviceType: (enableResponsiveFallback?: boolean) => Device;
+export declare const getDevice: () => "Android" | "iPhone" | "iPad" | "PC";
+export declare const getDevicePlatform: () => DevicePlatform;