@everymatrix/blog-articles-grid 1.44.0 → 1.45.2

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

@@ -2,174 +2,108 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-159efcd2.js');
+const index = require('./index-fad8e671.js');
 
 const DEFAULT_LANGUAGE$1 = 'en';
 const TRANSLATIONS$1 = {
-  en: {
-    error: 'Error',
-    readmore: 'Read more',
-  },
-  ro: {
-    error: 'Eroare',
-    readmore: 'Read more',
-  },
-  fr: {
-    error: 'Error',
-    readmore: 'Read more',
-  },
-  ar: {
-    error: 'خطأ',
-    readmore: 'Read more',
-  },
-  hu: {
-    error: 'خطأ',
-    readmore: 'Tovább olvasom',
-  },
-  hr: {
-    error: 'Greška',
-    readmore: 'Pročitaj više'
-  },
-  'pt-br': {
-    error: 'Erro',
-    readmore: 'Ler mais'
-  },
-  'es-mx': {
-    error: 'Error',
-    readmore: 'Leer más'
-  }
+    en: {
+        error: 'Error',
+        readmore: 'Read more',
+    },
+    ro: {
+        error: 'Eroare',
+        readmore: 'Read more',
+    },
+    fr: {
+        error: 'Error',
+        readmore: 'Read more',
+    },
+    ar: {
+        error: 'خطأ',
+        readmore: 'Read more',
+    },
+    hu: {
+        error: 'خطأ',
+        readmore: 'Tovább olvasom',
+    },
+    hr: {
+        error: 'Greška',
+        readmore: 'Pročitaj više'
+    },
+    'pt-br': {
+        error: 'Erro',
+        readmore: 'Ler mais'
+    },
+    'es-mx': {
+        error: 'Error',
+        readmore: 'Leer más'
+    }
 };
 const translate$1 = (key, customLang) => {
-  const lang = customLang;
-  return TRANSLATIONS$1[(lang !== undefined) && (lang in TRANSLATIONS$1) ? lang : DEFAULT_LANGUAGE$1][key];
+    const lang = customLang;
+    return TRANSLATIONS$1[(lang !== undefined) && (lang in TRANSLATIONS$1) ? lang : DEFAULT_LANGUAGE$1][key];
 };
 
 function checkCustomDeviceWidth() {
-  const width = screen.availWidth;
-  if (width < 600) {
-    return 'mobile';
-  }
-  else if (width >= 600 && width < 1100) {
-    return 'tablet';
-  }
+    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')) {
-    return true;
-  }
-  return userAgent.indexOf('macintosh') > -1 && navigator.maxTouchPoints && navigator.maxTouchPoints > 2;
+    const userAgent = navigator.userAgent.toLowerCase();
+    // Traditional iPad user agent
+    if (userAgent.includes('ipad')) {
+        return true;
+    }
+    return userAgent.indexOf('macintosh') > -1 && navigator.maxTouchPoints && navigator.maxTouchPoints > 2;
 }
 function getDeviceCustom() {
-  const userAgent = navigator.userAgent.toLowerCase();
-  let source = '';
-  source = (userAgent.includes('android') || userAgent.includes('iphone') || isIpad()) ? checkCustomDeviceWidth() : 'desktop';
-  return source;
+    const userAgent = navigator.userAgent.toLowerCase();
+    let source = '';
+    source = (userAgent.includes('android') || userAgent.includes('iphone') || isIpad()) ? checkCustomDeviceWidth() : 'desktop';
+    return source;
 }
 const getDevice = () => {
-  let userAgent = window.navigator.userAgent;
-  if (userAgent.toLowerCase().match(/android/i)) {
-    return 'Android';
-  }
-  if (userAgent.toLowerCase().match(/iphone/i)) {
-    return 'iPhone';
-  }
-  if (userAgent.toLowerCase().match(/ipad|ipod/i)) {
-    return 'iPad';
-  }
-  return 'PC';
-};
-const getDevicePlatform = () => {
-  const device = getDevice();
-  if (device) {
-    if (device === 'PC') {
-      return 'dk';
+    let userAgent = window.navigator.userAgent;
+    if (userAgent.toLowerCase().match(/android/i)) {
+        return 'Android';
     }
-    else if (device === 'iPad' || device === 'iPhone') {
-      return 'mtWeb';
+    if (userAgent.toLowerCase().match(/iphone/i)) {
+        return 'iPhone';
     }
-    else {
-      return 'mtWeb';
+    if (userAgent.toLowerCase().match(/ipad|ipod/i)) {
+        return 'iPad';
+    }
+    return 'PC';
+};
+const getDevicePlatform = () => {
+    const device = getDevice();
+    if (device) {
+        if (device === 'PC') {
+            return 'dk';
+        }
+        else if (device === 'iPad' || device === 'iPhone') {
+            return 'mtWeb';
+        }
+        else {
+            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(--emfe-w-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(--emfe-w-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: #D0046C;\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(--emfe-w-color-gray-100, #E6E6E6);\n}\n\n.LoadingStripe {\n  border: 1px solid var(--emfe-w-color-white, #FFFFFF);\n  height: 20%;\n  background-color: var(--emfe-w-color-gray-100, #E6E6E6);\n  margin-bottom: 5px;\n}\n\n.LoadingSmallStripe {\n  width: 40%;\n}\n\n.LoadingMediumStripe {\n  width: 70%;\n}\n\n.BlogLink.LoadingLongStripe {\n  position: static;\n  width: 100%;\n}\n\n.GridContainerWrapper.LoadingGrid .GridSector {\n  justify-content: space-around;\n}\n\n.GridContainerWrapper.LoadingGrid .LoadingImage, .GridContainerWrapper.LoadingGrid .LoadingStripe {\n  animation: pulsatingLoader 2s ease-in-out 0s infinite reverse;\n  -webkit-animation: pulsatingLoader 2s ease-in-out 0s infinite reverse;\n}\n\n@keyframes pulsatingLoader {\n  0% {\n    opacity: 0.5;\n  }\n  50% {\n    opacity: 1;\n  }\n  100% {\n    opacity: 0.5;\n  }\n}\n@-webkit-keyframes pulsatingLoader {\n  0% {\n    opacity: 0.5;\n  }\n  50% {\n    opacity: 1;\n  }\n  100% {\n    opacity: 0.5;\n  }\n}";
+const BlogArticlesGridStyle0 = blogArticlesGridCss;
 
 const BlogArticlesGrid = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.ArticleActionButton = index.createEvent(this, "ArticleActionButton", 7);
-    /**
-    * Language of the widget
-    */
-    this.language = 'en';
-    /**
-     * User roles
-     */
-    this.userRoles = 'everyone';
-    /**
-     * CMS Endpoint stage
-     */
-    this.cmsEnv = 'stage';
-    /**
-    * Client custom styling via string
-    */
-    this.clientStyling = '';
-    /**
-    * Client custom styling via url
-    */
-    this.clientStylingUrl = '';
-    /**
-     * Property used to display the publishing date
-     */
-    this.showPublishingDate = true;
-    /**
-    * Property used to display the image
-    */
-    this.showImage = true;
-    /**
-    * Property used to display the image
-    */
-    this.showTitle = true;
-    /**
-    * Property used to display the description
-    */
-    this.showContent = true;
-    /**
-    * Property used to display the button
-    */
-    this.showButton = true;
-    /**
-    * Event name to be sent when the button is clicked
-    */
-    this.postMessageEvent = '';
-    /**
-    * Customize pagination: Activate pagination numbered navigation
-    */
-    this.blogsLimit = '0';
-    /**
-     * Intl date format
-     */
-    this.intlDateTimeFormat = '';
-    /**
-     * Page to particularly be opened on start
-     */
-    this.page = '1';
-    this.paginationBlogList = {
-      offset: 0
-    };
-    this.currentPage = 0;
-    this.hasErrors = false;
-    this.isLoading = true;
-    this.bannerMatrixReady = false;
-    this.nextPage = '';
-    this.previousPage = '';
-    this.device = '';
-    this.totalBlogs = 0;
-    this.clientStylingContent = '';
-    this.defaultStyling = `
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.articleActionButton = index.createEvent(this, "articleActionButton", 7);
+        this.clientStylingContent = '';
+        this.defaultStyling = `
   div#PaginationContainer {
     justify-content: right;
   }
@@ -218,218 +152,250 @@ const BlogArticlesGrid = class {
     padding: 12px 0 12px 12px;
     font-weight: 700;
   }`;
-    this.setClientStyling = () => {
-      this.clientStylingContent += this.clientStyling;
-      const sheet = document.createElement('style');
-      sheet.innerHTML = this.clientStylingContent;
-      this.stylingContainer.prepend(sheet);
-    };
-    this.setImage = (image) => {
-      let source = '';
-      switch (this.device) {
-        case 'mobile':
-          source = image.sources[0].pictureSource;
-          break;
-        case 'tablet':
-          source = image.sources[1].pictureSource;
-          break;
-        case 'desktop':
-          source = image.sources[2].pictureSource;
-          break;
-      }
-      return source;
-    };
-    this.renderContentConditionally = (content) => {
-      if (!content)
-        return;
-      const hasBanner = content.indexOf('<bannermatrix-banner') !== -1;
-      if (!hasBanner) {
-        return index.h("div", { class: "BlogContent", innerHTML: content });
-      }
-      if (this.bannerMatrixReady) {
-        return index.h("div", { class: "BlogContent", innerHTML: content });
-      }
-      return null;
-    };
-  }
-  getArticleId(postId, slug, customPath) {
-    if (this.usePostmessage) {
-      window.postMessage({ type: this.postMessageEvent, postId, slug, customPath });
+        this.setClientStyling = () => {
+            this.clientStylingContent += this.clientStyling;
+            const sheet = document.createElement('style');
+            sheet.innerHTML = this.clientStylingContent;
+            this.stylingContainer.prepend(sheet);
+        };
+        this.setImage = (image) => {
+            let source = '';
+            switch (this.device) {
+                case 'mobile':
+                    source = image.sources[0].pictureSource;
+                    break;
+                case 'tablet':
+                    source = image.sources[1].pictureSource;
+                    break;
+                case 'desktop':
+                    source = image.sources[2].pictureSource;
+                    break;
+            }
+            return source;
+        };
+        this.renderContentConditionally = (content) => {
+            if (!content)
+                return;
+            const hasBanner = content.indexOf('<bannermatrix-banner') !== -1;
+            if (!hasBanner) {
+                return index.h("div", { class: "BlogContent", innerHTML: content });
+            }
+            if (this.bannerMatrixReady) {
+                return index.h("div", { class: "BlogContent", innerHTML: content });
+            }
+            return null;
+        };
+        this.cmsEndpoint = undefined;
+        this.language = 'en';
+        this.userRoles = 'everyone';
+        this.cmsEnv = 'stage';
+        this.clientStyling = '';
+        this.clientStylingUrl = '';
+        this.showPublishingDate = true;
+        this.showImage = true;
+        this.showTitle = true;
+        this.showContent = true;
+        this.showButton = true;
+        this.usePostmessage = undefined;
+        this.postMessageEvent = '';
+        this.blogsLimit = '0';
+        this.paginationActive = undefined;
+        this.arrowsActive = undefined;
+        this.secondaryArrowsActive = undefined;
+        this.numberedNavActive = undefined;
+        this.intlDateTimeFormat = '';
+        this.page = '1';
+        this.paginationBlogList = {
+            offset: 0
+        };
+        this.currentPage = 0;
+        this.hasErrors = false;
+        this.isLoading = true;
+        this.bannerMatrixReady = false;
+        this.nextPage = '';
+        this.previousPage = '';
+        this.device = '';
+        this.blogData = undefined;
+        this.totalBlogs = 0;
     }
-    else {
-      this.ArticleActionButton.emit({ postId, slug, customPath });
+    getArticleId(postId, slug, customPath) {
+        if (this.usePostmessage) {
+            window.postMessage({ type: this.postMessageEvent, postId, slug, customPath });
+        }
+        else {
+            this.articleActionButton.emit({ postId, slug, customPath });
+        }
     }
-  }
-  // Rerender when bannermatrix has finished loaded. Issue when bannermatrix passed as content from CMS.
-  handleBannerReady() {
-    this.bannerMatrixReady = true;
-  }
-  watchEndpoint(newValue, oldValue) {
-    this.currentPage = parseInt(this.page) - 1;
-    if (newValue && newValue != oldValue && this.cmsEndpoint && this.language) {
-      this.getBlogArticleGrid();
+    // Rerender when bannermatrix has finished loaded. Issue when bannermatrix passed as content from CMS.
+    handleBannerReady() {
+        this.bannerMatrixReady = true;
     }
-  }
-  handleStylingChange(newValue, oldValue) {
-    if (newValue !== oldValue) {
-      this.fetchClientStyling().then(_ => this.setClientStyling());
+    watchEndpoint(newValue, oldValue) {
+        this.currentPage = parseInt(this.page) - 1;
+        if (newValue && newValue != oldValue && this.cmsEndpoint && this.language) {
+            this.getBlogArticleGrid();
+        }
     }
-  }
-  hpPageChange(event) {
-    var _a, _b;
-    this.paginationBlogList = event.detail;
-    this.currentPage = Math.floor(((_a = this.paginationBlogList) === null || _a === void 0 ? void 0 : _a.offset) / ((_b = this.paginationBlogList) === null || _b === void 0 ? void 0 : _b.limit));
-    if (this.page) {
-      this.currentPage = this.currentPage + +this.page - 1;
+    handleStylingChange(newValue, oldValue) {
+        if (newValue !== oldValue) {
+            this.fetchClientStyling().then(_ => this.setClientStyling());
+        }
     }
-    if (this.currentPage + 1 > this.lastPage) {
-      this.nextPage = null;
-      return;
+    hpPageChange(event) {
+        var _a, _b;
+        this.paginationBlogList = event.detail;
+        this.currentPage = Math.floor(((_a = this.paginationBlogList) === null || _a === void 0 ? void 0 : _a.offset) / ((_b = this.paginationBlogList) === null || _b === void 0 ? void 0 : _b.limit));
+        if (this.page) {
+            this.currentPage = this.currentPage + +this.page - 1;
+        }
+        if (this.currentPage + 1 > this.lastPage) {
+            this.nextPage = null;
+            return;
+        }
+        if (this.currentPage < 0) {
+            this.previousPage = null;
+            return;
+        }
+        window.postMessage({ type: 'BlogArticlesGridActivePagination', currentPage: this.currentPage }, window.location.href);
+        this.getBlogArticleGrid();
     }
-    if (this.currentPage < 0) {
-      this.previousPage = null;
-      return;
+    sortArticlesByDate(arr) {
+        arr.sort((a, b) => {
+            if (a.publishingDate > b.publishingDate)
+                return -1;
+            if (a.publishingDate < b.publishingDate)
+                return 1;
+            return 0;
+        });
+        return arr;
     }
-    window.postMessage({ type: 'BlogArticlesGridActivePagination', currentPage: this.currentPage }, window.location.href);
-    this.getBlogArticleGrid();
-  }
-  sortArticlesByDate(arr) {
-    arr.sort((a, b) => {
-      if (a.publishingDate > b.publishingDate)
-        return -1;
-      if (a.publishingDate < b.publishingDate)
-        return 1;
-      return 0;
-    });
-    return arr;
-  }
-  findLatestFeatured(array) {
-    let featuredItems = array.filter(item => item.isFeaturedPost);
-    if (featuredItems.length === 0) {
-      return null;
+    findLatestFeatured(array) {
+        let featuredItems = array.filter(item => item.isFeaturedPost);
+        if (featuredItems.length === 0) {
+            return null;
+        }
+        featuredItems = this.sortArticlesByDate(featuredItems);
+        return featuredItems[0];
     }
-    featuredItems = this.sortArticlesByDate(featuredItems);
-    return featuredItems[0];
-  }
-  moveLatestFeatureToStart(articlesArray, latestFeatured) {
-    const index = articlesArray.indexOf(latestFeatured);
-    if (index !== -1) {
-      articlesArray.splice(index, 1);
-      articlesArray.unshift(latestFeatured);
+    moveLatestFeatureToStart(articlesArray, latestFeatured) {
+        const index = articlesArray.indexOf(latestFeatured);
+        if (index !== -1) {
+            articlesArray.splice(index, 1);
+            articlesArray.unshift(latestFeatured);
+        }
+        return articlesArray;
     }
-    return articlesArray;
-  }
-  getBlogArticleGrid(page) {
-    this.isLoading = true;
-    let url = new URL(`${this.cmsEndpoint}/${this.language}/blog-posts`);
-    url.searchParams.append('per_page', this.blogsLimit);
-    url.searchParams.append('page', JSON.stringify(page ? page : this.currentPage + 1));
-    url.searchParams.append('env', this.cmsEnv);
-    url.searchParams.append('userRoles', this.userRoles);
-    url.searchParams.append('device', getDevicePlatform());
-    fetch(url.href)
-      .then((res) => {
-      if (res.status >= 300) {
-        this.hasErrors = true;
-        throw new Error('There was an error while fetching the data');
-      }
-      return res.json();
-    })
-      .then((blogContent) => {
-      this.lastPage = +blogContent.pages.last.match(/&page=(\d+)/)[1];
-      let blogItems = blogContent.items;
-      this.nextPage = blogContent.pages.next;
-      this.previousPage = blogContent.pages.previous;
-      this.totalBlogs = blogContent.total;
-      const latestFeatured = this.findLatestFeatured(blogItems);
-      this.blogData = this.sortArticlesByDate(blogItems);
-      this.blogData = this.moveLatestFeatureToStart(blogItems, latestFeatured);
-      this.blogData.items = blogItems.map((item) => {
-        return Object.assign(Object.assign({}, item), { publishingDate: new Date(item.publishingDate).toLocaleDateString() });
-      });
-      this.isLoading = false;
-      this.hasErrors = false;
-    })
-      .catch((err) => {
-      this.hasErrors = true;
-      console.log('Error', err);
-    })
-      .finally(() => this.isLoading = false);
-  }
-  connectedCallback() {
-    if (this.cmsEndpoint && this.language && this.blogsLimit) {
-      if (this.page) {
-        this.currentPage = this.currentPage + +this.page - 1;
-        this.getBlogArticleGrid(+this.page);
-      }
-      else {
-        this.getBlogArticleGrid();
-      }
+    getBlogArticleGrid(page) {
+        this.isLoading = true;
+        let url = new URL(`${this.cmsEndpoint}/${this.language}/blog-posts`);
+        url.searchParams.append('per_page', this.blogsLimit);
+        url.searchParams.append('page', JSON.stringify(page ? page : this.currentPage + 1));
+        url.searchParams.append('env', this.cmsEnv);
+        url.searchParams.append('userRoles', this.userRoles);
+        url.searchParams.append('device', getDevicePlatform());
+        fetch(url.href)
+            .then((res) => {
+            if (res.status >= 300) {
+                this.hasErrors = true;
+                throw new Error('There was an error while fetching the data');
+            }
+            return res.json();
+        })
+            .then((blogContent) => {
+            this.lastPage = +blogContent.pages.last.match(/&page=(\d+)/)[1];
+            let blogItems = blogContent.items;
+            this.nextPage = blogContent.pages.next;
+            this.previousPage = blogContent.pages.previous;
+            this.totalBlogs = blogContent.total;
+            const latestFeatured = this.findLatestFeatured(blogItems);
+            this.blogData = this.sortArticlesByDate(blogItems);
+            this.blogData = this.moveLatestFeatureToStart(blogItems, latestFeatured);
+            this.blogData.items = blogItems.map((item) => {
+                return Object.assign(Object.assign({}, item), { publishingDate: new Date(item.publishingDate).toLocaleDateString() });
+            });
+            this.isLoading = false;
+            this.hasErrors = false;
+        })
+            .catch((err) => {
+            this.hasErrors = true;
+            console.log('Error', err);
+        })
+            .finally(() => this.isLoading = false);
     }
-  }
-  componentWillLoad() {
-    if (this.clientStylingUrl)
-      return this.fetchClientStyling();
-  }
-  componentDidLoad() {
-    if (this.clientStyling || this.clientStylingUrl)
-      this.setClientStyling();
-    window.postMessage({ type: 'BlogArticlesGridLoaded' }, window.location.href);
-    this.device = getDeviceCustom();
-  }
-  fetchClientStyling() {
-    if (!this.clientStylingUrl)
-      return;
-    return new Promise(resolve => {
-      fetch(this.clientStylingUrl)
-        .then((res) => res.text())
-        .then((data) => {
-        resolve(data);
-        this.clientStylingContent += data;
-      })
-        .catch((err) => {
-        console.error('Error fetching Client Styling:', err);
-      });
-    });
-  }
-  formatDate(dateString) {
-    return new Intl.DateTimeFormat(this.intlDateTimeFormat).format(new Date(dateString));
-  }
-  render() {
-    var _a, _b;
-    if (this.hasErrors) {
-      return (index.h("div", { class: "BlogsContainer" }, index.h("div", { class: "ErrorMessage" }, translate$1('error', this.language))));
+    connectedCallback() {
+        if (this.cmsEndpoint && this.language && this.blogsLimit) {
+            if (this.page) {
+                this.currentPage = this.currentPage + +this.page - 1;
+                this.getBlogArticleGrid(+this.page);
+            }
+            else {
+                this.getBlogArticleGrid();
+            }
+        }
+    }
+    componentWillLoad() {
+        if (this.clientStylingUrl)
+            return this.fetchClientStyling();
     }
-    // Create an array to store the placeholder elements for each card
-    const placeholderCards = [];
-    // Loop through the blogsLimit in order to generate the desired number of cards
-    for (let i = 0; i < parseInt(this.blogsLimit); i++) {
-      placeholderCards.push(index.h("div", { class: "GridContainer FeaturedPost Skeleton" }, index.h("div", { class: "GridWrapper" }, index.h("div", { class: "GridSector" }, index.h("div", { class: "VisualContent LoadingImage" })), index.h("div", { class: "GridSector" }, index.h("div", { class: "BlogTitle LoadingStripe LoadingSmallStripe" }), index.h("div", { class: "BlogDetails LoadingStripe LoadingMediumStripe" }), index.h("div", { class: "BlogLink LoadingStripe LoadingLongStripe" })))));
+    componentDidLoad() {
+        if (this.clientStyling || this.clientStylingUrl)
+            this.setClientStyling();
+        window.postMessage({ type: 'BlogArticlesGridLoaded' }, window.location.href);
+        this.device = getDeviceCustom();
     }
-    return (index.h("div", { ref: el => this.stylingContainer = el }, index.h("div", { class: "BlogPageContainer" }, index.h("div", { class: "BlogGridPaginationWrapper" }, this.paginationActive == true && this.totalBlogs > +this.blogsLimit && index.h("helper-pagination", { "next-page": this.nextPage, "prev-page": this.previousPage, offset: this.paginationBlogList.offset, limit: this.blogsLimit, total: (_b = (_a = this.blogData) === null || _a === void 0 ? void 0 : _a.items) === null || _b === void 0 ? void 0 : _b.length, language: this.language, "client-styling": this.clientStyling || this.defaultStyling, "arrows-active": this.arrowsActive || true, "secondary-arrows-active": this.secondaryArrowsActive || false, "numbered-nav-active": this.numberedNavActive || false })), (!this.isLoading) &&
-      index.h("div", { class: `GridContainerWrapper BlogPage-${this.currentPage}` }, this.blogData && this.blogData.map((data) => {
+    fetchClientStyling() {
+        if (!this.clientStylingUrl)
+            return;
+        return new Promise(resolve => {
+            fetch(this.clientStylingUrl)
+                .then((res) => res.text())
+                .then((data) => {
+                resolve(data);
+                this.clientStylingContent += data;
+            })
+                .catch((err) => {
+                console.error('Error fetching Client Styling:', err);
+            });
+        });
+    }
+    formatDate(dateString) {
+        return new Intl.DateTimeFormat(this.intlDateTimeFormat).format(new Date(dateString));
+    }
+    render() {
         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" }, this.formatDate(data === null || data === void 0 ? void 0 : data.publishingDate)), this.showImage && ((_a = data.image) === null || _a === void 0 ? void 0 : _a.src) ? (index.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]) ? (index.h("video", { class: "VisualContent", src: data.video.sources[this.device], controls: true })) : (index.h("h1", { class: "VisualContent", style: { color: "#fff" } }, "No Image")))), index.h("div", { class: "GridSector" }, this.showTitle &&
-          index.h("div", { class: "BlogTitle" }, data === null || data === void 0 ? void 0 : data.title), this.showContent &&
-          this.renderContentConditionally(data === null || data === void 0 ? void 0 : data.descriptionPreview), this.showButton &&
-          index.h("div", { class: "BlogLink" }, index.h("button", { onClick: () => this.getArticleId(data === null || data === void 0 ? void 0 : data.postID, data === null || data === void 0 ? void 0 : data.slug, data === null || data === void 0 ? void 0 : data.customPath) }, translate$1('readmore', this.language))))));
-      })), (this.isLoading) &&
-      index.h("div", { class: "GridContainerWrapper LoadingGrid" }, placeholderCards))));
-  }
-  static get watchers() { return {
-    "page": ["watchEndpoint"],
-    "hasErrors": ["watchEndpoint"],
-    "cmsEndpoint": ["watchEndpoint"],
-    "language": ["watchEndpoint"],
-    "cmsEnv": ["watchEndpoint"],
-    "userRoles": ["watchEndpoint"],
-    "blogsLimit": ["watchEndpoint"],
-    "clientStyling": ["handleStylingChange"],
-    "clientStylingUrl": ["handleStylingChange"]
-  }; }
+        if (this.hasErrors) {
+            return (index.h("div", { class: "BlogsContainer" }, index.h("div", { class: "ErrorMessage" }, translate$1('error', this.language))));
+        }
+        // Create an array to store the placeholder elements for each card
+        const placeholderCards = [];
+        // Loop through the blogsLimit in order to generate the desired number of cards
+        for (let i = 0; i < parseInt(this.blogsLimit); i++) {
+            placeholderCards.push(index.h("div", { class: "GridContainer FeaturedPost Skeleton" }, index.h("div", { class: "GridWrapper" }, index.h("div", { class: "GridSector" }, index.h("div", { class: "VisualContent LoadingImage" })), index.h("div", { class: "GridSector" }, index.h("div", { class: "BlogTitle LoadingStripe LoadingSmallStripe" }), index.h("div", { class: "BlogDetails LoadingStripe LoadingMediumStripe" }), index.h("div", { class: "BlogLink LoadingStripe LoadingLongStripe" })))));
+        }
+        return (index.h("div", { ref: el => this.stylingContainer = el }, index.h("div", { class: "BlogPageContainer" }, index.h("div", { class: "BlogGridPaginationWrapper" }, this.paginationActive == true && this.totalBlogs > +this.blogsLimit && index.h("helper-pagination", { "next-page": this.nextPage, "prev-page": this.previousPage, offset: this.paginationBlogList.offset, limit: parseInt(this.blogsLimit, 10), total: (_b = (_a = this.blogData) === null || _a === void 0 ? void 0 : _a.items) === null || _b === void 0 ? void 0 : _b.length, language: this.language, "client-styling": this.clientStyling || this.defaultStyling, "arrows-active": this.arrowsActive || true, "secondary-arrows-active": this.secondaryArrowsActive || false, "numbered-nav-active": this.numberedNavActive || false })), (!this.isLoading) &&
+            index.h("div", { class: `GridContainerWrapper BlogPage-${this.currentPage}` }, this.blogData && this.blogData.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" }, this.formatDate(data === null || data === void 0 ? void 0 : data.publishingDate)), this.showImage && ((_a = data.image) === null || _a === void 0 ? void 0 : _a.src) ? (index.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]) ? (index.h("video", { class: "VisualContent", src: data.video.sources[this.device], controls: true })) : (index.h("h1", { class: "VisualContent", style: { color: "#fff" } }, "No Image")))), index.h("div", { class: "GridSector" }, this.showTitle &&
+                    index.h("div", { class: "BlogTitle" }, data === null || data === void 0 ? void 0 : data.title), this.showContent &&
+                    this.renderContentConditionally(data === null || data === void 0 ? void 0 : data.descriptionPreview), this.showButton &&
+                    index.h("div", { class: "BlogLink" }, index.h("button", { onClick: () => this.getArticleId(data === null || data === void 0 ? void 0 : data.postID, data === null || data === void 0 ? void 0 : data.slug, data === null || data === void 0 ? void 0 : data.customPath) }, translate$1('readmore', this.language))))));
+            })), (this.isLoading) &&
+            index.h("div", { class: "GridContainerWrapper LoadingGrid" }, placeholderCards))));
+    }
+    static get watchers() { return {
+        "page": ["watchEndpoint"],
+        "hasErrors": ["watchEndpoint"],
+        "cmsEndpoint": ["watchEndpoint"],
+        "language": ["watchEndpoint"],
+        "cmsEnv": ["watchEndpoint"],
+        "userRoles": ["watchEndpoint"],
+        "blogsLimit": ["watchEndpoint"],
+        "clientStyling": ["handleStylingChange"],
+        "clientStylingUrl": ["handleStylingChange"]
+    }; }
 };
-BlogArticlesGrid.style = blogArticlesGridCss;
+BlogArticlesGrid.style = BlogArticlesGridStyle0;
 
 /**
  * @name isMobile
@@ -438,247 +404,218 @@ BlogArticlesGrid.style = blogArticlesGridCss;
  * @returns {Boolean} true or false
  */
 const isMobile = (userAgent) => {
-  return !!(userAgent.toLowerCase().match(/android/i) ||
-    userAgent.toLowerCase().match(/blackberry|bb/i) ||
-    userAgent.toLowerCase().match(/iphone|ipad|ipod/i) ||
-    userAgent.toLowerCase().match(/windows phone|windows mobile|iemobile|wpdesktop/i));
+    return !!(userAgent.toLowerCase().match(/android/i) ||
+        userAgent.toLowerCase().match(/blackberry|bb/i) ||
+        userAgent.toLowerCase().match(/iphone|ipad|ipod/i) ||
+        userAgent.toLowerCase().match(/windows phone|windows mobile|iemobile|wpdesktop/i));
 };
 
 const DEFAULT_LANGUAGE = 'en';
 const TRANSLATIONS = {
-  en: {
-    firstPage: 'First',
-    previousPage: 'Previous',
-    nextPage: 'Next',
-    lastPage: 'Last'
-  },
-  ro: {
-    firstPage: 'Prima',
-    previousPage: 'Anterior',
-    nextPage: 'Urmatoarea',
-    lastPage: 'Ultima'
-  },
-  fr: {
-    firstPage: 'First',
-    previousPage: 'Previous',
-    nextPage: 'Next',
-    lastPage: 'Last'
-  },
-  ar: {
-    firstPage: 'First',
-    previousPage: 'Previous',
-    nextPage: 'Next',
-    lastPage: 'Last'
-  },
-  hu: {
-    firstPage: 'First',
-    previousPage: 'Previous',
-    nextPage: 'Következő',
-    lastPage: 'Last'
-  },
-  hr: {
-    firstPage: 'Prva',
-    previousPage: 'Prethodna',
-    nextPage: 'Slijedeća',
-    lastPage: 'Zadnja'
-  }
+    en: {
+        firstPage: 'First',
+        previousPage: 'Previous',
+        nextPage: 'Next',
+        lastPage: 'Last'
+    },
+    ro: {
+        firstPage: 'Prima',
+        previousPage: 'Anterior',
+        nextPage: 'Urmatoarea',
+        lastPage: 'Ultima'
+    },
+    fr: {
+        firstPage: 'First',
+        previousPage: 'Previous',
+        nextPage: 'Next',
+        lastPage: 'Last'
+    },
+    ar: {
+        firstPage: 'First',
+        previousPage: 'Previous',
+        nextPage: 'Next',
+        lastPage: 'Last'
+    },
+    hu: {
+        firstPage: 'First',
+        previousPage: 'Previous',
+        nextPage: 'Következő',
+        lastPage: 'Last'
+    },
+    hr: {
+        firstPage: 'Prva',
+        previousPage: 'Prethodna',
+        nextPage: 'Slijedeća',
+        lastPage: 'Zadnja'
+    }
 };
 const translate = (key, customLang) => {
-  const lang = customLang;
-  return TRANSLATIONS[(lang !== undefined) && (lang in TRANSLATIONS) ? lang : DEFAULT_LANGUAGE][key];
+    const lang = customLang;
+    return TRANSLATIONS[(lang !== undefined) && (lang in TRANSLATIONS) ? lang : DEFAULT_LANGUAGE][key];
 };
 
 const helperPaginationCss = "@import url(\"https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap\");:host{display:block;font-family:\"Roboto\", sans-serif}#PaginationContainer{width:100%;margin:20px 0;display:inline-flex;justify-content:space-between;align-items:center}.LeftItems button:not(:first-child),.RightItems button:not(:last-child){margin:0 10px}.LeftItems button,.RightItems button{padding:0;background-color:#009993;border-color:#009993}.PaginationArea{display:inline-flex;gap:10px;list-style:none}.PaginationArea li{margin:0;padding:0}.PaginationArea li button{width:24px;height:24px;display:flex;border:0;padding:0;justify-content:center;align-items:center;background-color:transparent;color:#000;cursor:pointer;pointer-events:all}.PaginationItem.ActiveItem button{background:#009993;border-color:#009993;color:#fff}.PaginationItem.ActiveItem button:disabled{pointer-events:none;cursor:not-allowed}.PaginationItem button:hover,.PaginationItem button:active{background:#009993;border-color:#009993;color:#fff;opacity:0.8}button{width:100px;height:32px;border:1px solid #524e52;border-radius:5px;background:#524e52;color:#fff;font-size:14px;font:inherit;cursor:pointer;transition:all 0.1s linear;text-transform:uppercase;text-align:center;letter-spacing:0}button:hover,button:active{background:#004D4A;border-color:#004D4A}button:disabled{background-color:#ccc;border-color:#ccc;color:#fff;cursor:not-allowed}@media screen and (max-width: 720px){button{width:90px;font-size:14px}}@media screen and (max-width: 480px){button{width:70px;font-size:14px}.paginationArea{padding:5px}}@media screen and (max-width: 320px){button{width:58px;font-size:12px}.paginationArea{padding:5px;gap:5px}}@media (hover: none){.paginationItem button:hover{background:inherit;border-color:inherit;color:inherit;opacity:1}.paginationItem.activeItem button:hover{background:#009993;border-color:#009993;color:#fff}}";
+const HelperPaginationStyle0 = helperPaginationCss;
 
 const HelperPagination = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.hpPageChange = index.createEvent(this, "hpPageChange", 7);
-    /**
-     * Next page string value - determines if the next page is disabled or active
-     */
-    this.nextPage = '';
-    /**
-     * Previous page string value - determines if the previous page is disabled or active
-     */
-    this.prevPage = '';
-    /**
-     * The received offset
-     */
-    this.offset = 0;
-    /**
-     * The received limit for the number of pages
-     */
-    this.limit = 1;
-    /**
-     * The received total number of pages
-     */
-    this.total = 1;
-    /**
-     * Language
-     */
-    this.language = 'en';
-    /**
-     * Client custom styling via string
-     */
-    this.clientStyling = '';
-    /**
-     * Client custom styling via url content
-     */
-    this.clientStylingUrlContent = '';
-    /**
-     * Component working variable for last page
-     */
-    this.lastPage = false;
-    /**
-     * Component working variable for prvious page
-     */
-    this.previousPage = false;
-    /**
-     * In component working variable for the array of pages
-     */
-    this.pagesArray = [];
-    /**
-     * In component working variable for last page
-     */
-    this.endInt = 0;
-    this.userAgent = window.navigator.userAgent;
-    this.currentPage = 1;
-    this.limitStylingAppends = false;
-    /**
-     * Navigation logic
-     */
-    this.navigateTo = (navigationPage) => {
-      switch (navigationPage) {
-        case 'firstPage':
-          this.offsetInt = 0;
-          break;
-        case 'lastPage':
-          this.offsetInt = this.endInt * this.limitInt;
-          break;
-        case 'previousPage':
-          this.offsetInt -= this.limitInt;
-          break;
-        case 'nextPage':
-          this.offsetInt += this.limitInt;
-          break;
-        case 'fivePagesBack':
-          this.offsetInt -= this.limitInt * 5;
-          this.offsetInt = this.offsetInt <= 0 ? 0 : this.offsetInt;
-          break;
-        case 'fivePagesForward':
-          this.offsetInt += this.limitInt * 5;
-          this.offsetInt = this.offsetInt / this.limitInt >= this.endInt ? this.endInt * this.limitInt : this.offsetInt;
-          break;
-      }
-      this.previousPage = !this.offsetInt ? false : true;
-      this.hpPageChange.emit({ offset: this.offsetInt, limit: this.limitInt, total: this.totalInt });
-    };
-    /**
-     * Handle navigation from here
-     */
-    this.paginationNavigation = (pageNumber, index) => {
-      this.previousPage = true;
-      if (!isNaN(pageNumber)) {
-        if (pageNumber === 1) {
-          this.offsetInt = pageNumber - 1;
-          this.previousPage = false;
-        }
-        else {
-          this.offsetInt = (pageNumber - 1) * this.limitInt;
-        }
-      }
-      else {
-        if (index === 0 && this.currentPage <= 4) {
-          this.navigateTo('firstPage');
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.hpPageChange = index.createEvent(this, "hpPageChange", 7);
+        this.userAgent = window.navigator.userAgent;
+        this.currentPage = 1;
+        /**
+         * Navigation logic
+         */
+        this.navigateTo = (navigationPage) => {
+            switch (navigationPage) {
+                case 'firstPage':
+                    this.offsetInt = 0;
+                    break;
+                case 'lastPage':
+                    this.offsetInt = this.endInt * this.limitInt;
+                    break;
+                case 'previousPage':
+                    this.offsetInt -= this.limitInt;
+                    break;
+                case 'nextPage':
+                    this.offsetInt += this.limitInt;
+                    break;
+                case 'fivePagesBack':
+                    this.offsetInt -= this.limitInt * 5;
+                    this.offsetInt = this.offsetInt <= 0 ? 0 : this.offsetInt;
+                    break;
+                case 'fivePagesForward':
+                    this.offsetInt += this.limitInt * 5;
+                    this.offsetInt = this.offsetInt / this.limitInt >= this.endInt ? this.endInt * this.limitInt : this.offsetInt;
+                    break;
+            }
+            this.previousPage = !this.offsetInt ? false : true;
+            this.hpPageChange.emit({ offset: this.offsetInt, limit: this.limitInt, total: this.totalInt });
+        };
+        /**
+         * Handle navigation from here
+         */
+        this.paginationNavigation = (pageNumber, index) => {
+            this.previousPage = true;
+            if (!isNaN(pageNumber)) {
+                if (pageNumber === 1) {
+                    this.offsetInt = pageNumber - 1;
+                    this.previousPage = false;
+                }
+                else {
+                    this.offsetInt = (pageNumber - 1) * this.limitInt;
+                }
+            }
+            else {
+                if (index === 0 && this.currentPage <= 4) {
+                    this.navigateTo('firstPage');
+                }
+                else if (index === 0 && this.currentPage > 4) {
+                    this.navigateTo('fivePagesBack');
+                }
+                else if (index === 4 && this.endInt - this.currentPage >= 2) {
+                    this.navigateTo('fivePagesForward');
+                }
+            }
+            this.hpPageChange.emit({ offset: this.offsetInt, limit: this.limitInt, total: this.totalInt });
+        };
+        this.setClientStyling = () => {
+            let sheet = document.createElement('style');
+            sheet.innerHTML = this.clientStyling;
+            this.stylingContainer.prepend(sheet);
+        };
+        this.setClientStylingURL = () => {
+            let cssFile = document.createElement('style');
+            setTimeout(() => {
+                cssFile.innerHTML = this.clientStylingUrlContent;
+                this.stylingContainer.prepend(cssFile);
+            }, 1);
+        };
+        this.nextPage = '';
+        this.prevPage = '';
+        this.offset = 0;
+        this.limit = 1;
+        this.total = 1;
+        this.language = 'en';
+        this.clientStyling = '';
+        this.clientStylingUrlContent = '';
+        this.arrowsActive = undefined;
+        this.secondaryArrowsActive = undefined;
+        this.numberedNavActive = undefined;
+        this.offsetInt = undefined;
+        this.lastPage = false;
+        this.previousPage = false;
+        this.limitInt = undefined;
+        this.totalInt = undefined;
+        this.pagesArray = [];
+        this.endInt = 0;
+        this.limitStylingAppends = false;
+    }
+    componentWillRender() {
+        this.offsetInt = this.offset;
+        this.limitInt = this.limit;
+        this.currentPage = (this.offsetInt / this.limitInt) + 1;
+        this.limitInt = this.limit;
+        this.totalInt = this.total;
+        this.endInt = (Math.ceil(this.totalInt / this.limitInt) - 1);
+        this.lastPage = (this.offsetInt >= this.endInt * this.limitInt) ? false : true;
+        /**
+         * Construct numbered navigation area based on current page position
+         */
+        if (this.currentPage == 1 || this.currentPage == 2) {
+            this.pagesArray = Array.from({ length: 4 }, (_, i) => i + 1);
+            this.pagesArray.push('...');
         }
-        else if (index === 0 && this.currentPage > 4) {
-          this.navigateTo('fivePagesBack');
+        else if (this.currentPage >= 3 && ((this.endInt - this.currentPage) >= 2)) {
+            this.pagesArray = Array.from({ length: 3 }, (_, i) => this.currentPage + i - 1);
+            this.pagesArray.push('...');
+            this.pagesArray.unshift('...');
         }
-        else if (index === 4 && this.endInt - this.currentPage >= 2) {
-          this.navigateTo('fivePagesForward');
+        else if ((this.endInt - this.currentPage) < 3) {
+            this.pagesArray = Array.from({ length: 4 }, (_, i) => this.endInt - 2 + i);
+            this.pagesArray.unshift('...');
         }
-      }
-      this.hpPageChange.emit({ offset: this.offsetInt, limit: this.limitInt, total: this.totalInt });
-    };
-    this.setClientStyling = () => {
-      let sheet = document.createElement('style');
-      sheet.innerHTML = this.clientStyling;
-      this.stylingContainer.prepend(sheet);
-    };
-    this.setClientStylingURL = () => {
-      let cssFile = document.createElement('style');
-      setTimeout(() => {
-        cssFile.innerHTML = this.clientStylingUrlContent;
-        this.stylingContainer.prepend(cssFile);
-      }, 1);
-    };
-  }
-  componentWillRender() {
-    this.offsetInt = this.offset;
-    this.limitInt = this.limit;
-    this.currentPage = (this.offsetInt / this.limitInt) + 1;
-    this.limitInt = this.limit;
-    this.totalInt = this.total;
-    this.endInt = (Math.ceil(this.totalInt / this.limitInt) - 1);
-    this.lastPage = (this.offsetInt >= this.endInt * this.limitInt) ? false : true;
-    /**
-     * Construct numbered navigation area based on current page position
-     */
-    if (this.currentPage == 1 || this.currentPage == 2) {
-      this.pagesArray = Array.from({ length: 4 }, (_, i) => i + 1);
-      this.pagesArray.push('...');
     }
-    else if (this.currentPage >= 3 && ((this.endInt - this.currentPage) >= 2)) {
-      this.pagesArray = Array.from({ length: 3 }, (_, i) => this.currentPage + i - 1);
-      this.pagesArray.push('...');
-      this.pagesArray.unshift('...');
-    }
-    else if ((this.endInt - this.currentPage) < 3) {
-      this.pagesArray = Array.from({ length: 4 }, (_, i) => this.endInt - 2 + i);
-      this.pagesArray.unshift('...');
-    }
-  }
-  componentDidRender() {
-    // start custom styling area
-    if (!this.limitStylingAppends && this.stylingContainer) {
-      if (this.clientStyling)
-        this.setClientStyling();
-      if (this.clientStylingUrlContent)
-        this.setClientStylingURL();
-      this.limitStylingAppends = true;
-    }
-    // end custom styling area
-  }
-  render() {
-    /**
-     * Center navigation area
-     */
-    let navigationArea = index.h("ul", { class: "PaginationArea" }, this.pagesArray.map((item, index$1) => {
-      return (index.h("li", { class: 'PaginationItem' + (item === this.currentPage ? ' ActiveItem' : ' ') + ' ' + (isMobile(this.userAgent) ? 'MobileButtons' : '') }, index.h("button", { disabled: item === this.currentPage ? true : false, onClick: this.paginationNavigation.bind(this, item, index$1) }, index.h("span", null, item))));
-    }));
-    /**
-     * Left navigation area
-     */
-    let buttonSecondaryLeftSide = index.h("button", { disabled: this.prevPage ? false : true, onClick: this.navigateTo.bind(this, '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("button", { disabled: this.prevPage ? false : true, onClick: this.navigateTo.bind(this, '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("button", { disabled: this.prevPage ? false : true, onClick: this.navigateTo.bind(this, 'previousPage') }, index.h("span", { class: "NavigationButton" }, translate('previousPage', this.language)), index.h("span", { class: "NavigationIcon" })));
+    componentDidRender() {
+        // start custom styling area
+        if (!this.limitStylingAppends && this.stylingContainer) {
+            if (this.clientStyling)
+                this.setClientStyling();
+            if (this.clientStylingUrlContent)
+                this.setClientStylingURL();
+            this.limitStylingAppends = true;
+        }
+        // end custom styling area
     }
-    /**
-     * Right navigation area
-     */
-    let buttonSecondaryRightSide = index.h("button", { disabled: this.nextPage ? false : true, onClick: this.navigateTo.bind(this, 'lastPage') }, index.h("span", { class: "NavigationButton" }, translate('lastPage', this.language)), index.h("span", { class: "NavigationIcon" }));
-    let buttonsRightSide = index.h("div", { class: "RightItems" }, index.h("button", { disabled: this.nextPage ? false : true, onClick: this.navigateTo.bind(this, '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("button", { disabled: this.nextPage ? false : true, onClick: this.navigateTo.bind(this, 'nextPage') }, index.h("span", { class: "NavigationButton" }, translate('nextPage', this.language)), index.h("span", { class: "NavigationIcon" })));
+    render() {
+        /**
+         * Center navigation area
+         */
+        let navigationArea = index.h("ul", { class: "PaginationArea" }, this.pagesArray.map((item, index$1) => {
+            return (index.h("li", { class: 'PaginationItem' + (item === this.currentPage ? ' ActiveItem' : ' ') + ' ' + (isMobile(this.userAgent) ? 'MobileButtons' : '') }, index.h("button", { disabled: item === this.currentPage ? true : false, onClick: this.paginationNavigation.bind(this, item, index$1) }, index.h("span", null, item))));
+        }));
+        /**
+         * Left navigation area
+         */
+        let buttonSecondaryLeftSide = index.h("button", { disabled: this.prevPage ? false : true, onClick: this.navigateTo.bind(this, '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("button", { disabled: this.prevPage ? false : true, onClick: this.navigateTo.bind(this, '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("button", { disabled: this.prevPage ? false : true, onClick: this.navigateTo.bind(this, 'previousPage') }, index.h("span", { class: "NavigationButton" }, translate('previousPage', this.language)), index.h("span", { class: "NavigationIcon" })));
+        }
+        /**
+         * Right navigation area
+         */
+        let buttonSecondaryRightSide = index.h("button", { disabled: this.nextPage ? false : true, onClick: this.navigateTo.bind(this, 'lastPage') }, index.h("span", { class: "NavigationButton" }, translate('lastPage', this.language)), index.h("span", { class: "NavigationIcon" }));
+        let buttonsRightSide = index.h("div", { class: "RightItems" }, index.h("button", { disabled: this.nextPage ? false : true, onClick: this.navigateTo.bind(this, '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("button", { disabled: this.nextPage ? false : true, onClick: this.navigateTo.bind(this, 'nextPage') }, index.h("span", { class: "NavigationButton" }, translate('nextPage', this.language)), index.h("span", { class: "NavigationIcon" })));
+        }
+        return (index.h("div", { id: "PaginationContainer", ref: el => this.stylingContainer = el }, this.arrowsActive && buttonsLeftSide, this.numberedNavActive && navigationArea, this.arrowsActive && buttonsRightSide));
     }
-    return (index.h("div", { id: "PaginationContainer", ref: el => this.stylingContainer = el }, this.arrowsActive && buttonsLeftSide, this.numberedNavActive && navigationArea, this.arrowsActive && buttonsRightSide));
-  }
 };
-HelperPagination.style = helperPaginationCss;
+HelperPagination.style = HelperPaginationStyle0;
 
 exports.blog_articles_grid = BlogArticlesGrid;
 exports.helper_pagination = HelperPagination;