@everymatrix/blog-articles-grid 1.0.69

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

@@ -0,0 +1,623 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-fad8e671.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 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;
+}
+function getDeviceCustom() {
+    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';
+        }
+        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);
+        this.clientStylingContent = '';
+        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 = () => {
+            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;
+    }
+    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();
+        }
+    }
+    handleStylingChange(newValue, oldValue) {
+        if (newValue !== oldValue) {
+            this.fetchClientStyling().then(_ => this.setClientStyling());
+        }
+    }
+    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();
+    }
+    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);
+    }
+    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();
+    }
+    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))));
+        }
+        // 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 = BlogArticlesGridStyle0;
+
+/**
+ * @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 HelperPaginationStyle0 = helperPaginationCss;
+
+const HelperPagination = class {
+    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 (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" })));
+        }
+        /**
+         * 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));
+    }
+};
+HelperPagination.style = HelperPaginationStyle0;
+
+exports.blog_articles_grid = BlogArticlesGrid;
+exports.helper_pagination = HelperPagination;