@everymatrix/blog-articles-grid 1.31.2 → 1.32.4

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

@@ -1,668 +0,0 @@
-import { r as registerInstance, c as createEvent, h } from './index-3600ba1b.js';
-
-const DEFAULT_LANGUAGE$1 = 'en';
-const SUPPORTED_LANGUAGES$1 = ['ro', 'en', 'fr', 'ar', 'hu', 'hr'];
-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'
-  }
-};
-const translate$1 = (key, customLang) => {
-  const lang = customLang;
-  return TRANSLATIONS$1[lang !== undefined && SUPPORTED_LANGUAGES$1.includes(lang) ? lang : DEFAULT_LANGUAGE$1][key];
-};
-
-function checkCustomDeviceWidth() {
-  const width = screen.availWidth;
-  if (width < 600) {
-    return 'mobile';
-  }
-  else if (width >= 600 && width < 1100) {
-    return 'tablet';
-  }
-}
-function getDeviceCustom() {
-  const userAgent = navigator.userAgent.toLowerCase();
-  let source = '';
-  source = (userAgent.includes('android') || userAgent.includes('iphone') || userAgent.includes('ipad')) ? 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';
-    }
-    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: flex;\n  flex-flow: row wrap;\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  flex: 1 1 550px;\n  overflow: hidden;\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 BlogArticlesGrid = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.ArticleActionButton = 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.limitStylingAppends = false;
-    this.isLoading = true;
-    this.bannerMatrixReady = false;
-    this.nextPage = '';
-    this.previousPage = '';
-    this.device = '';
-    this.totalBlogs = 0;
-    this.defaultStyling = `
-  div#PaginationContainer {
-    justify-content: right;
-  }
-  .LeftItems button .NavigationButton {
-    display: none;
-  }
-  .LeftItems button:after, .RightItems button:after {
-    padding: 7px 12px;
-    font-size: 18px;
-    font-weight: 700;
-    line-height: 46px;
-  }
-  .LeftItems button:after {
-    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1.2em' viewBox='0 0 320 512'%3E%3C!--! Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --%3E%3Cpath d='M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l192 192c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256 246.6 86.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-192 192z'/%3E%3C/svg%3E");
-  }
-  .RightItems button:after {
-    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1.2em' viewBox='0 0 320 512'%3E%3C!--! Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --%3E%3Cpath d='M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z'/%3E%3C/svg%3E");
-    display: block;
-    height: 38px;
-  }
-  div.LeftItems button, div.RightItems button {
-    width: unset;
-    height: 40px;
-    background-color: #fff;
-    color: #000;
-    border: 1px solid #000;
-    overflow: hidden;
-    &:disabled {
-      background-color: #989898;
-    }
-  }
-  div.LeftItems button {
-    min-width: 60px;
-    border-radius: 20px 0 0 20px;
-    border-right: 0;
-  }
-  div.RightItems button {
-    display: flex;
-    min-width: 100px;
-    justify-content: space-evenly;
-    align-items: center;
-    border-radius: 0 20px 20px 0;
-    text-transform: none;
-  }
-  .RightItems button .NavigationButton {
-    padding: 12px 0 12px 12px;
-    font-weight: 700;
-  }`;
-    this.setClientStyling = () => {
-      let sheet = document.createElement('style');
-      sheet.innerHTML = this.clientStyling;
-      this.stylingContainer.prepend(sheet);
-    };
-    this.setClientStylingURL = () => {
-      let url = new URL(this.clientStylingUrl);
-      let cssFile = document.createElement('style');
-      fetch(url.href)
-        .then((res) => res.text())
-        .then((data) => {
-        cssFile.innerHTML = data;
-        setTimeout(() => { this.stylingContainer.prepend(cssFile); }, 1);
-      })
-        .catch((err) => {
-        console.log('Error ', err);
-      });
-    };
-    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 h("div", { class: "BlogContent", innerHTML: content });
-      }
-      if (this.bannerMatrixReady) {
-        return h("div", { class: "BlogContent", innerHTML: content });
-      }
-      return null;
-    };
-  }
-  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();
-    }
-  }
-  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();
-  }
-  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();
-      }
-    }
-  }
-  componentDidLoad() {
-    window.postMessage({ type: 'BlogArticlesGridLoaded' }, window.location.href);
-    this.device = getDeviceCustom();
-  }
-  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;
-    }
-    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);
-    }
-    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);
-  }
-  componentDidRender() {
-    // start custom styling area
-    if (!this.limitStylingAppends && this.stylingContainer) {
-      if (this.clientStyling)
-        this.setClientStyling();
-      if (this.clientStylingUrl)
-        this.setClientStylingURL();
-      this.limitStylingAppends = true;
-    }
-    // end custom styling area
-  }
-  formatDate(dateString) {
-    return new Intl.DateTimeFormat(this.intlDateTimeFormat).format(new Date(dateString));
-  }
-  render() {
-    var _a, _b;
-    if (this.hasErrors) {
-      return (h("div", { class: "BlogsContainer" }, 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(h("div", { class: "GridContainer FeaturedPost" }, 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: 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) &&
-      h("div", { class: `GridContainerWrapper BlogPage-${this.currentPage}` }, this.blogData && this.blogData.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 &&
-          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 &&
-          h("div", { class: "BlogLink" }, 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) &&
-      h("div", { class: "GridContainerWrapper LoadingGrid" }, placeholderCards))));
-  }
-  static get watchers() { return {
-    "page": ["watchEndpoint"],
-    "hasErrors": ["watchEndpoint"],
-    "cmsEndpoint": ["watchEndpoint"],
-    "language": ["watchEndpoint"],
-    "cmsEnv": ["watchEndpoint"],
-    "userRoles": ["watchEndpoint"],
-    "blogsLimit": ["watchEndpoint"]
-  }; }
-};
-BlogArticlesGrid.style = blogArticlesGridCss;
-
-/**
- * @name isMobile
- * @description A method that returns if the browser used to access the app is from a mobile device or not
- * @param {String} userAgent window.navigator.userAgent
- * @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));
-};
-
-const DEFAULT_LANGUAGE = 'en';
-const SUPPORTED_LANGUAGES = ['ro', 'en', 'hu', 'hr'];
-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'
-  }
-};
-const translate = (key, customLang) => {
-  const lang = customLang;
-  return TRANSLATIONS[lang !== undefined && SUPPORTED_LANGUAGES.includes(lang) ? 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 HelperPagination = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.hpPageChange = 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');
-        }
-        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);
-    };
-  }
-  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 = h("ul", { class: "PaginationArea" }, this.pagesArray.map((item, index) => {
-      return (h("li", { class: 'PaginationItem' + (item === this.currentPage ? ' ActiveItem' : ' ') + ' ' + (isMobile(this.userAgent) ? 'MobileButtons' : '') }, h("button", { disabled: item === this.currentPage ? true : false, onClick: this.paginationNavigation.bind(this, item, index) }, h("span", null, item))));
-    }));
-    /**
-     * Left navigation area
-     */
-    let buttonSecondaryLeftSide = h("button", { disabled: this.prevPage ? false : true, onClick: this.navigateTo.bind(this, 'firstPage') }, h("span", { class: "NavigationButton" }, translate('firstPage', this.language)), h("span", { class: "NavigationIcon" }));
-    let buttonsLeftSide = h("div", { class: "LeftItems" }, this.secondaryArrowsActive && buttonSecondaryLeftSide, h("button", { disabled: this.prevPage ? false : true, onClick: this.navigateTo.bind(this, 'previousPage') }, h("span", { class: "NavigationButton" }, translate('previousPage', this.language)), h("span", { class: "NavigationIcon" })));
-    if (isMobile(this.userAgent)) {
-      buttonsLeftSide =
-        h("div", { class: "LeftItems" }, h("button", { disabled: this.prevPage ? false : true, onClick: this.navigateTo.bind(this, 'previousPage') }, h("span", { class: "NavigationButton" }, translate('previousPage', this.language)), h("span", { class: "NavigationIcon" })));
-    }
-    /**
-     * Right navigation area
-     */
-    let buttonSecondaryRightSide = h("button", { disabled: this.nextPage ? false : true, onClick: this.navigateTo.bind(this, 'lastPage') }, h("span", { class: "NavigationButton" }, translate('lastPage', this.language)), h("span", { class: "NavigationIcon" }));
-    let buttonsRightSide = h("div", { class: "RightItems" }, h("button", { disabled: this.nextPage ? false : true, onClick: this.navigateTo.bind(this, 'nextPage') }, h("span", { class: "NavigationButton" }, translate('nextPage', this.language)), h("span", { class: "NavigationIcon" })), this.secondaryArrowsActive && buttonSecondaryRightSide);
-    if (isMobile(this.userAgent)) {
-      buttonsRightSide =
-        h("div", { class: "RightItems" }, h("button", { disabled: this.nextPage ? false : true, onClick: this.navigateTo.bind(this, 'nextPage') }, h("span", { class: "NavigationButton" }, translate('nextPage', this.language)), h("span", { class: "NavigationIcon" })));
-    }
-    return (h("div", { id: "PaginationContainer", ref: el => this.stylingContainer = el }, this.arrowsActive && buttonsLeftSide, this.numberedNavActive && navigationArea, this.arrowsActive && buttonsRightSide));
-  }
-};
-HelperPagination.style = helperPaginationCss;
-
-export { BlogArticlesGrid as blog_articles_grid, HelperPagination as helper_pagination };