Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
@everymatrix/blog-articles-grid
Advanced tools
@everymatrix/blog-articles-grid - npm Package Compare versions
Comparing version 1.44.0 to 1.45.0
@@ -1,1 +0,1 @@ | ||
| import{p as e,b as t}from"./p-cb7acb6b.js";(()=>{const t=import.meta.url,a={};return""!==t&&(a.resourcesUrl=new URL(".",t).href),e(a)})().then((e=>t([["p-cbc63da6",[[1,"blog-articles-grid",{cmsEndpoint:[513,"cms-endpoint"],language:[513],userRoles:[513,"user-roles"],cmsEnv:[513,"cms-env"],clientStyling:[513,"client-styling"],clientStylingUrl:[513,"client-styling-url"],showPublishingDate:[516,"show-publishing-date"],showImage:[516,"show-image"],showTitle:[516,"show-title"],showContent:[516,"show-content"],showButton:[516,"show-button"],usePostmessage:[516,"use-postmessage"],postMessageEvent:[513,"post-message-event"],blogsLimit:[513,"blogs-limit"],paginationActive:[516,"pagination-active"],arrowsActive:[516,"arrows-active"],secondaryArrowsActive:[516,"secondary-arrows-active"],numberedNavActive:[516,"numbered-nav-active"],intlDateTimeFormat:[513,"intl-date-time-format"],page:[513],paginationBlogList:[32],currentPage:[32],hasErrors:[32],isLoading:[32],bannerMatrixReady:[32],nextPage:[32],previousPage:[32],device:[32],blogData:[32],totalBlogs:[32]},[[8,"BannerMatrixReady","handleBannerReady"],[0,"hpPageChange","hpPageChange"]]],[1,"helper-pagination",{nextPage:[1537,"next-page"],prevPage:[1537,"prev-page"],offset:[1538],limit:[1538],total:[1538],language:[1537],clientStyling:[1537,"client-styling"],clientStylingUrlContent:[1537,"client-styling-url-content"],arrowsActive:[1540,"arrows-active"],secondaryArrowsActive:[1540,"secondary-arrows-active"],numberedNavActive:[1540,"numbered-nav-active"],offsetInt:[32],lastPage:[32],previousPage:[32],limitInt:[32],totalInt:[32],pagesArray:[32],endInt:[32],limitStylingAppends:[32]}]]]],e))); | ||
| import{p as e,b as t}from"./p-786304d4.js";export{s as setNonce}from"./p-786304d4.js";import{g as n}from"./p-e1255160.js";(()=>{const t=import.meta.url,n={};return""!==t&&(n.resourcesUrl=new URL(".",t).href),e(n)})().then((async e=>(await n(),t([["p-dde0107e",[[1,"blog-articles-grid",{cmsEndpoint:[513,"cms-endpoint"],language:[513],userRoles:[513,"user-roles"],cmsEnv:[513,"cms-env"],clientStyling:[513,"client-styling"],clientStylingUrl:[513,"client-styling-url"],showPublishingDate:[516,"show-publishing-date"],showImage:[516,"show-image"],showTitle:[516,"show-title"],showContent:[516,"show-content"],showButton:[516,"show-button"],usePostmessage:[516,"use-postmessage"],postMessageEvent:[513,"post-message-event"],blogsLimit:[513,"blogs-limit"],paginationActive:[516,"pagination-active"],arrowsActive:[516,"arrows-active"],secondaryArrowsActive:[516,"secondary-arrows-active"],numberedNavActive:[516,"numbered-nav-active"],intlDateTimeFormat:[513,"intl-date-time-format"],page:[513],paginationBlogList:[32],currentPage:[32],hasErrors:[32],isLoading:[32],bannerMatrixReady:[32],nextPage:[32],previousPage:[32],device:[32],blogData:[32],totalBlogs:[32]},[[8,"BannerMatrixReady","handleBannerReady"],[0,"hpPageChange","hpPageChange"]],{page:["watchEndpoint"],hasErrors:["watchEndpoint"],cmsEndpoint:["watchEndpoint"],language:["watchEndpoint"],cmsEnv:["watchEndpoint"],userRoles:["watchEndpoint"],blogsLimit:["watchEndpoint"],clientStyling:["handleStylingChange"],clientStylingUrl:["handleStylingChange"]}],[1,"helper-pagination",{nextPage:[1537,"next-page"],prevPage:[1537,"prev-page"],offset:[1538],limit:[1538],total:[1538],language:[1537],clientStyling:[1537,"client-styling"],clientStylingUrlContent:[1537,"client-styling-url-content"],arrowsActive:[1540,"arrows-active"],secondaryArrowsActive:[1540,"secondary-arrows-active"],numberedNavActive:[1540,"numbered-nav-active"],offsetInt:[32],lastPage:[32],previousPage:[32],limitInt:[32],totalInt:[32],pagesArray:[32],endInt:[32],limitStylingAppends:[32]}]]]],e)))); |
@@ -5,170 +5,104 @@ 'use strict'; | ||
| 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 { | ||
@@ -222,214 +156,246 @@ justify-content: right; | ||
| }`; | ||
| 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(); | ||
| } | ||
| } | ||
| } | ||
| // 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" }))))); | ||
| componentWillLoad() { | ||
| if (this.clientStylingUrl) | ||
| return this.fetchClientStyling(); | ||
| } | ||
| 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) => { | ||
| 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; | ||
| 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; | ||
@@ -443,6 +409,6 @@ /** | ||
| 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)); | ||
| }; | ||
@@ -452,237 +418,208 @@ | ||
| 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; | ||
| 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 { | ||
| this.offsetInt = (pageNumber - 1) * this.limitInt; | ||
| 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 === 0 && this.currentPage <= 4) { | ||
| this.navigateTo('firstPage'); | ||
| else if ((this.endInt - this.currentPage) < 3) { | ||
| this.pagesArray = Array.from({ length: 4 }, (_, i) => this.endInt - 2 + i); | ||
| this.pagesArray.unshift('...'); | ||
| } | ||
| else if (index === 0 && this.currentPage > 4) { | ||
| this.navigateTo('fivePagesBack'); | ||
| } | ||
| componentDidRender() { | ||
| // start custom styling area | ||
| if (!this.limitStylingAppends && this.stylingContainer) { | ||
| if (this.clientStyling) | ||
| this.setClientStyling(); | ||
| if (this.clientStylingUrlContent) | ||
| this.setClientStylingURL(); | ||
| this.limitStylingAppends = true; | ||
| } | ||
| else if (index === 4 && this.endInt - this.currentPage >= 2) { | ||
| this.navigateTo('fivePagesForward'); | ||
| // 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" }))); | ||
| } | ||
| } | ||
| 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('...'); | ||
| /** | ||
| * 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)); | ||
| } | ||
| 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 = helperPaginationCss; | ||
| HelperPagination.style = HelperPaginationStyle0; | ||
| exports.blog_articles_grid = BlogArticlesGrid; | ||
| exports.helper_pagination = HelperPagination; |
| 'use strict'; | ||
| const index = require('./index-159efcd2.js'); | ||
| Object.defineProperty(exports, '__esModule', { value: true }); | ||
| const index = require('./index-fad8e671.js'); | ||
| const appGlobals = require('./app-globals-3a1e7e63.js'); | ||
| /* | ||
| Stencil Client Patch Browser v2.15.2 | MIT Licensed | https://stenciljs.com | ||
| Stencil Client Patch Browser v4.20.0 | MIT Licensed | https://stenciljs.com | ||
| */ | ||
| const patchBrowser = () => { | ||
| const importMeta = (typeof document === 'undefined' ? new (require('u' + 'rl').URL)('file:' + __filename).href : (document.currentScript && document.currentScript.src || new URL('blog-articles-grid.cjs.js', document.baseURI).href)); | ||
| const opts = {}; | ||
| if (importMeta !== '') { | ||
| opts.resourcesUrl = new URL('.', importMeta).href; | ||
| } | ||
| return index.promiseResolve(opts); | ||
| var patchBrowser = () => { | ||
| const importMeta = (typeof document === 'undefined' ? new (require('u' + 'rl').URL)('file:' + __filename).href : (document.currentScript && document.currentScript.src || new URL('blog-articles-grid.cjs.js', document.baseURI).href)); | ||
| const opts = {}; | ||
| if (importMeta !== "") { | ||
| opts.resourcesUrl = new URL(".", importMeta).href; | ||
| } | ||
| return index.promiseResolve(opts); | ||
| }; | ||
| patchBrowser().then(options => { | ||
| return index.bootstrapLazy([["blog-articles-grid_2.cjs",[[1,"blog-articles-grid",{"cmsEndpoint":[513,"cms-endpoint"],"language":[513],"userRoles":[513,"user-roles"],"cmsEnv":[513,"cms-env"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"showPublishingDate":[516,"show-publishing-date"],"showImage":[516,"show-image"],"showTitle":[516,"show-title"],"showContent":[516,"show-content"],"showButton":[516,"show-button"],"usePostmessage":[516,"use-postmessage"],"postMessageEvent":[513,"post-message-event"],"blogsLimit":[513,"blogs-limit"],"paginationActive":[516,"pagination-active"],"arrowsActive":[516,"arrows-active"],"secondaryArrowsActive":[516,"secondary-arrows-active"],"numberedNavActive":[516,"numbered-nav-active"],"intlDateTimeFormat":[513,"intl-date-time-format"],"page":[513],"paginationBlogList":[32],"currentPage":[32],"hasErrors":[32],"isLoading":[32],"bannerMatrixReady":[32],"nextPage":[32],"previousPage":[32],"device":[32],"blogData":[32],"totalBlogs":[32]},[[8,"BannerMatrixReady","handleBannerReady"],[0,"hpPageChange","hpPageChange"]]],[1,"helper-pagination",{"nextPage":[1537,"next-page"],"prevPage":[1537,"prev-page"],"offset":[1538],"limit":[1538],"total":[1538],"language":[1537],"clientStyling":[1537,"client-styling"],"clientStylingUrlContent":[1537,"client-styling-url-content"],"arrowsActive":[1540,"arrows-active"],"secondaryArrowsActive":[1540,"secondary-arrows-active"],"numberedNavActive":[1540,"numbered-nav-active"],"offsetInt":[32],"lastPage":[32],"previousPage":[32],"limitInt":[32],"totalInt":[32],"pagesArray":[32],"endInt":[32],"limitStylingAppends":[32]}]]]], options); | ||
| patchBrowser().then(async (options) => { | ||
| await appGlobals.globalScripts(); | ||
| return index.bootstrapLazy([["blog-articles-grid_2.cjs",[[1,"blog-articles-grid",{"cmsEndpoint":[513,"cms-endpoint"],"language":[513],"userRoles":[513,"user-roles"],"cmsEnv":[513,"cms-env"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"showPublishingDate":[516,"show-publishing-date"],"showImage":[516,"show-image"],"showTitle":[516,"show-title"],"showContent":[516,"show-content"],"showButton":[516,"show-button"],"usePostmessage":[516,"use-postmessage"],"postMessageEvent":[513,"post-message-event"],"blogsLimit":[513,"blogs-limit"],"paginationActive":[516,"pagination-active"],"arrowsActive":[516,"arrows-active"],"secondaryArrowsActive":[516,"secondary-arrows-active"],"numberedNavActive":[516,"numbered-nav-active"],"intlDateTimeFormat":[513,"intl-date-time-format"],"page":[513],"paginationBlogList":[32],"currentPage":[32],"hasErrors":[32],"isLoading":[32],"bannerMatrixReady":[32],"nextPage":[32],"previousPage":[32],"device":[32],"blogData":[32],"totalBlogs":[32]},[[8,"BannerMatrixReady","handleBannerReady"],[0,"hpPageChange","hpPageChange"]],{"page":["watchEndpoint"],"hasErrors":["watchEndpoint"],"cmsEndpoint":["watchEndpoint"],"language":["watchEndpoint"],"cmsEnv":["watchEndpoint"],"userRoles":["watchEndpoint"],"blogsLimit":["watchEndpoint"],"clientStyling":["handleStylingChange"],"clientStylingUrl":["handleStylingChange"]}],[1,"helper-pagination",{"nextPage":[1537,"next-page"],"prevPage":[1537,"prev-page"],"offset":[1538],"limit":[1538],"total":[1538],"language":[1537],"clientStyling":[1537,"client-styling"],"clientStylingUrlContent":[1537,"client-styling-url-content"],"arrowsActive":[1540,"arrows-active"],"secondaryArrowsActive":[1540,"secondary-arrows-active"],"numberedNavActive":[1540,"numbered-nav-active"],"offsetInt":[32],"lastPage":[32],"previousPage":[32],"limitInt":[32],"totalInt":[32],"pagesArray":[32],"endInt":[32],"limitStylingAppends":[32]}]]]], options); | ||
| }); | ||
| exports.setNonce = index.setNonce; |
@@ -5,18 +5,12 @@ 'use strict'; | ||
| const index = require('./index-159efcd2.js'); | ||
| const index = require('./index-fad8e671.js'); | ||
| const appGlobals = require('./app-globals-3a1e7e63.js'); | ||
| /* | ||
| Stencil Client Patch Esm v2.15.2 | MIT Licensed | https://stenciljs.com | ||
| */ | ||
| const patchEsm = () => { | ||
| return index.promiseResolve(); | ||
| const defineCustomElements = async (win, options) => { | ||
| if (typeof window === 'undefined') return undefined; | ||
| await appGlobals.globalScripts(); | ||
| return index.bootstrapLazy([["blog-articles-grid_2.cjs",[[1,"blog-articles-grid",{"cmsEndpoint":[513,"cms-endpoint"],"language":[513],"userRoles":[513,"user-roles"],"cmsEnv":[513,"cms-env"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"showPublishingDate":[516,"show-publishing-date"],"showImage":[516,"show-image"],"showTitle":[516,"show-title"],"showContent":[516,"show-content"],"showButton":[516,"show-button"],"usePostmessage":[516,"use-postmessage"],"postMessageEvent":[513,"post-message-event"],"blogsLimit":[513,"blogs-limit"],"paginationActive":[516,"pagination-active"],"arrowsActive":[516,"arrows-active"],"secondaryArrowsActive":[516,"secondary-arrows-active"],"numberedNavActive":[516,"numbered-nav-active"],"intlDateTimeFormat":[513,"intl-date-time-format"],"page":[513],"paginationBlogList":[32],"currentPage":[32],"hasErrors":[32],"isLoading":[32],"bannerMatrixReady":[32],"nextPage":[32],"previousPage":[32],"device":[32],"blogData":[32],"totalBlogs":[32]},[[8,"BannerMatrixReady","handleBannerReady"],[0,"hpPageChange","hpPageChange"]],{"page":["watchEndpoint"],"hasErrors":["watchEndpoint"],"cmsEndpoint":["watchEndpoint"],"language":["watchEndpoint"],"cmsEnv":["watchEndpoint"],"userRoles":["watchEndpoint"],"blogsLimit":["watchEndpoint"],"clientStyling":["handleStylingChange"],"clientStylingUrl":["handleStylingChange"]}],[1,"helper-pagination",{"nextPage":[1537,"next-page"],"prevPage":[1537,"prev-page"],"offset":[1538],"limit":[1538],"total":[1538],"language":[1537],"clientStyling":[1537,"client-styling"],"clientStylingUrlContent":[1537,"client-styling-url-content"],"arrowsActive":[1540,"arrows-active"],"secondaryArrowsActive":[1540,"secondary-arrows-active"],"numberedNavActive":[1540,"numbered-nav-active"],"offsetInt":[32],"lastPage":[32],"previousPage":[32],"limitInt":[32],"totalInt":[32],"pagesArray":[32],"endInt":[32],"limitStylingAppends":[32]}]]]], options); | ||
| }; | ||
| const defineCustomElements = (win, options) => { | ||
| if (typeof window === 'undefined') return Promise.resolve(); | ||
| return patchEsm().then(() => { | ||
| return index.bootstrapLazy([["blog-articles-grid_2.cjs",[[1,"blog-articles-grid",{"cmsEndpoint":[513,"cms-endpoint"],"language":[513],"userRoles":[513,"user-roles"],"cmsEnv":[513,"cms-env"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"showPublishingDate":[516,"show-publishing-date"],"showImage":[516,"show-image"],"showTitle":[516,"show-title"],"showContent":[516,"show-content"],"showButton":[516,"show-button"],"usePostmessage":[516,"use-postmessage"],"postMessageEvent":[513,"post-message-event"],"blogsLimit":[513,"blogs-limit"],"paginationActive":[516,"pagination-active"],"arrowsActive":[516,"arrows-active"],"secondaryArrowsActive":[516,"secondary-arrows-active"],"numberedNavActive":[516,"numbered-nav-active"],"intlDateTimeFormat":[513,"intl-date-time-format"],"page":[513],"paginationBlogList":[32],"currentPage":[32],"hasErrors":[32],"isLoading":[32],"bannerMatrixReady":[32],"nextPage":[32],"previousPage":[32],"device":[32],"blogData":[32],"totalBlogs":[32]},[[8,"BannerMatrixReady","handleBannerReady"],[0,"hpPageChange","hpPageChange"]]],[1,"helper-pagination",{"nextPage":[1537,"next-page"],"prevPage":[1537,"prev-page"],"offset":[1538],"limit":[1538],"total":[1538],"language":[1537],"clientStyling":[1537,"client-styling"],"clientStylingUrlContent":[1537,"client-styling-url-content"],"arrowsActive":[1540,"arrows-active"],"secondaryArrowsActive":[1540,"secondary-arrows-active"],"numberedNavActive":[1540,"numbered-nav-active"],"offsetInt":[32],"lastPage":[32],"previousPage":[32],"limitInt":[32],"totalInt":[32],"pagesArray":[32],"endInt":[32],"limitStylingAppends":[32]}]]]], options); | ||
| }); | ||
| }; | ||
| exports.setNonce = index.setNonce; | ||
| exports.defineCustomElements = defineCustomElements; |
| { | ||
| "entries": [ | ||
| "./components/blog-articles-grid/blog-articles-grid.js" | ||
| "components/blog-articles-grid/blog-articles-grid.js" | ||
| ], | ||
| "compiler": { | ||
| "name": "@stencil/core", | ||
| "version": "2.15.2", | ||
| "typescriptVersion": "4.5.4" | ||
| "version": "4.20.0", | ||
| "typescriptVersion": "5.5.3" | ||
| }, | ||
@@ -10,0 +10,0 @@ "collections": [ |
@@ -1,76 +0,9 @@ | ||
| import { Component, Prop, State, Event, Watch, h, Listen } from '@stencil/core'; | ||
| import { translate } from '../../utils/locale.utils'; | ||
| import { getDevicePlatform, getDeviceCustom } from '../../utils/utils'; | ||
| import '@everymatrix/helper-pagination'; | ||
| import { h } from "@stencil/core"; | ||
| import { translate } from "../../utils/locale.utils"; | ||
| import { getDevicePlatform, getDeviceCustom } from "../../utils/utils"; | ||
| import "../../../../../helper-pagination/dist/types/index"; | ||
| export class BlogArticlesGrid { | ||
| constructor() { | ||
| /** | ||
| * 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() { | ||
| this.clientStylingContent = ''; | ||
| this.defaultStyling = ` | ||
| div#PaginationContainer { | ||
@@ -124,659 +57,685 @@ justify-content: right; | ||
| }`; | ||
| 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 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 }); | ||
| 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 h("div", { class: "BlogContent", innerHTML: content }); | ||
| } | ||
| if (this.bannerMatrixReady) { | ||
| return 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 (h("div", { class: "BlogsContainer" }, | ||
| h("div", { class: "ErrorMessage" }, translate('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(); | ||
| } | ||
| } | ||
| } | ||
| // 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 Skeleton" }, | ||
| h("div", { class: "GridWrapper" }, | ||
| h("div", { class: "GridSector" }, | ||
| h("div", { class: "VisualContent LoadingImage" })), | ||
| h("div", { class: "GridSector" }, | ||
| h("div", { class: "BlogTitle LoadingStripe LoadingSmallStripe" }), | ||
| h("div", { class: "BlogDetails LoadingStripe LoadingMediumStripe" }), | ||
| h("div", { class: "BlogLink LoadingStripe LoadingLongStripe" }))))); | ||
| componentWillLoad() { | ||
| if (this.clientStylingUrl) | ||
| return this.fetchClientStyling(); | ||
| } | ||
| 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('readmore', this.language)))))); | ||
| })), | ||
| (this.isLoading) && | ||
| h("div", { class: "GridContainerWrapper LoadingGrid" }, placeholderCards)))); | ||
| } | ||
| static get is() { return "blog-articles-grid"; } | ||
| static get encapsulation() { return "shadow"; } | ||
| static get originalStyleUrls() { return { | ||
| "$": ["blog-articles-grid.scss"] | ||
| }; } | ||
| static get styleUrls() { return { | ||
| "$": ["blog-articles-grid.css"] | ||
| }; } | ||
| static get properties() { return { | ||
| "cmsEndpoint": { | ||
| "type": "string", | ||
| "mutable": false, | ||
| "complexType": { | ||
| "original": "string", | ||
| "resolved": "string", | ||
| "references": {} | ||
| }, | ||
| "required": false, | ||
| "optional": false, | ||
| "docs": { | ||
| "tags": [], | ||
| "text": "Endpoint URL for the source of data" | ||
| }, | ||
| "attribute": "cms-endpoint", | ||
| "reflect": true | ||
| }, | ||
| "language": { | ||
| "type": "string", | ||
| "mutable": false, | ||
| "complexType": { | ||
| "original": "string", | ||
| "resolved": "string", | ||
| "references": {} | ||
| }, | ||
| "required": false, | ||
| "optional": false, | ||
| "docs": { | ||
| "tags": [], | ||
| "text": "Language of the widget" | ||
| }, | ||
| "attribute": "language", | ||
| "reflect": true, | ||
| "defaultValue": "'en'" | ||
| }, | ||
| "userRoles": { | ||
| "type": "string", | ||
| "mutable": false, | ||
| "complexType": { | ||
| "original": "string", | ||
| "resolved": "string", | ||
| "references": {} | ||
| }, | ||
| "required": false, | ||
| "optional": false, | ||
| "docs": { | ||
| "tags": [], | ||
| "text": "User roles" | ||
| }, | ||
| "attribute": "user-roles", | ||
| "reflect": true, | ||
| "defaultValue": "'everyone'" | ||
| }, | ||
| "cmsEnv": { | ||
| "type": "string", | ||
| "mutable": false, | ||
| "complexType": { | ||
| "original": "string", | ||
| "resolved": "string", | ||
| "references": {} | ||
| }, | ||
| "required": false, | ||
| "optional": false, | ||
| "docs": { | ||
| "tags": [], | ||
| "text": "CMS Endpoint stage" | ||
| }, | ||
| "attribute": "cms-env", | ||
| "reflect": true, | ||
| "defaultValue": "'stage'" | ||
| }, | ||
| "clientStyling": { | ||
| "type": "string", | ||
| "mutable": false, | ||
| "complexType": { | ||
| "original": "string", | ||
| "resolved": "string", | ||
| "references": {} | ||
| }, | ||
| "required": false, | ||
| "optional": false, | ||
| "docs": { | ||
| "tags": [], | ||
| "text": "Client custom styling via string" | ||
| }, | ||
| "attribute": "client-styling", | ||
| "reflect": true, | ||
| "defaultValue": "''" | ||
| }, | ||
| "clientStylingUrl": { | ||
| "type": "string", | ||
| "mutable": false, | ||
| "complexType": { | ||
| "original": "string", | ||
| "resolved": "string", | ||
| "references": {} | ||
| }, | ||
| "required": false, | ||
| "optional": false, | ||
| "docs": { | ||
| "tags": [], | ||
| "text": "Client custom styling via url" | ||
| }, | ||
| "attribute": "client-styling-url", | ||
| "reflect": true, | ||
| "defaultValue": "''" | ||
| }, | ||
| "showPublishingDate": { | ||
| "type": "boolean", | ||
| "mutable": false, | ||
| "complexType": { | ||
| "original": "boolean", | ||
| "resolved": "boolean", | ||
| "references": {} | ||
| }, | ||
| "required": false, | ||
| "optional": false, | ||
| "docs": { | ||
| "tags": [], | ||
| "text": "Property used to display the publishing date" | ||
| }, | ||
| "attribute": "show-publishing-date", | ||
| "reflect": true, | ||
| "defaultValue": "true" | ||
| }, | ||
| "showImage": { | ||
| "type": "boolean", | ||
| "mutable": false, | ||
| "complexType": { | ||
| "original": "boolean", | ||
| "resolved": "boolean", | ||
| "references": {} | ||
| }, | ||
| "required": false, | ||
| "optional": false, | ||
| "docs": { | ||
| "tags": [], | ||
| "text": "Property used to display the image" | ||
| }, | ||
| "attribute": "show-image", | ||
| "reflect": true, | ||
| "defaultValue": "true" | ||
| }, | ||
| "showTitle": { | ||
| "type": "boolean", | ||
| "mutable": false, | ||
| "complexType": { | ||
| "original": "boolean", | ||
| "resolved": "boolean", | ||
| "references": {} | ||
| }, | ||
| "required": false, | ||
| "optional": false, | ||
| "docs": { | ||
| "tags": [], | ||
| "text": "Property used to display the image" | ||
| }, | ||
| "attribute": "show-title", | ||
| "reflect": true, | ||
| "defaultValue": "true" | ||
| }, | ||
| "showContent": { | ||
| "type": "boolean", | ||
| "mutable": false, | ||
| "complexType": { | ||
| "original": "boolean", | ||
| "resolved": "boolean", | ||
| "references": {} | ||
| }, | ||
| "required": false, | ||
| "optional": false, | ||
| "docs": { | ||
| "tags": [], | ||
| "text": "Property used to display the description" | ||
| }, | ||
| "attribute": "show-content", | ||
| "reflect": true, | ||
| "defaultValue": "true" | ||
| }, | ||
| "showButton": { | ||
| "type": "boolean", | ||
| "mutable": false, | ||
| "complexType": { | ||
| "original": "boolean", | ||
| "resolved": "boolean", | ||
| "references": {} | ||
| }, | ||
| "required": false, | ||
| "optional": false, | ||
| "docs": { | ||
| "tags": [], | ||
| "text": "Property used to display the button" | ||
| }, | ||
| "attribute": "show-button", | ||
| "reflect": true, | ||
| "defaultValue": "true" | ||
| }, | ||
| "usePostmessage": { | ||
| "type": "boolean", | ||
| "mutable": false, | ||
| "complexType": { | ||
| "original": "boolean", | ||
| "resolved": "boolean", | ||
| "references": {} | ||
| }, | ||
| "required": true, | ||
| "optional": false, | ||
| "docs": { | ||
| "tags": [], | ||
| "text": "Use postMessage event to communicate" | ||
| }, | ||
| "attribute": "use-postmessage", | ||
| "reflect": true | ||
| }, | ||
| "postMessageEvent": { | ||
| "type": "string", | ||
| "mutable": false, | ||
| "complexType": { | ||
| "original": "string", | ||
| "resolved": "string", | ||
| "references": {} | ||
| }, | ||
| "required": false, | ||
| "optional": false, | ||
| "docs": { | ||
| "tags": [], | ||
| "text": "Event name to be sent when the button is clicked" | ||
| }, | ||
| "attribute": "post-message-event", | ||
| "reflect": true, | ||
| "defaultValue": "''" | ||
| }, | ||
| "blogsLimit": { | ||
| "type": "string", | ||
| "mutable": false, | ||
| "complexType": { | ||
| "original": "string", | ||
| "resolved": "string", | ||
| "references": {} | ||
| }, | ||
| "required": false, | ||
| "optional": false, | ||
| "docs": { | ||
| "tags": [], | ||
| "text": "Customize pagination: Activate pagination numbered navigation" | ||
| }, | ||
| "attribute": "blogs-limit", | ||
| "reflect": true, | ||
| "defaultValue": "'0'" | ||
| }, | ||
| "paginationActive": { | ||
| "type": "boolean", | ||
| "mutable": false, | ||
| "complexType": { | ||
| "original": "boolean", | ||
| "resolved": "boolean", | ||
| "references": {} | ||
| }, | ||
| "required": false, | ||
| "optional": false, | ||
| "docs": { | ||
| "tags": [], | ||
| "text": "Customize pagination: Activate pagination" | ||
| }, | ||
| "attribute": "pagination-active", | ||
| "reflect": true | ||
| }, | ||
| "arrowsActive": { | ||
| "type": "boolean", | ||
| "mutable": false, | ||
| "complexType": { | ||
| "original": "boolean", | ||
| "resolved": "boolean", | ||
| "references": {} | ||
| }, | ||
| "required": false, | ||
| "optional": false, | ||
| "docs": { | ||
| "tags": [], | ||
| "text": "Customize pagination: Activate pagination arrows" | ||
| }, | ||
| "attribute": "arrows-active", | ||
| "reflect": true | ||
| }, | ||
| "secondaryArrowsActive": { | ||
| "type": "boolean", | ||
| "mutable": false, | ||
| "complexType": { | ||
| "original": "boolean", | ||
| "resolved": "boolean", | ||
| "references": {} | ||
| }, | ||
| "required": false, | ||
| "optional": false, | ||
| "docs": { | ||
| "tags": [], | ||
| "text": "Customize pagination: Activate pagination secondary arrows" | ||
| }, | ||
| "attribute": "secondary-arrows-active", | ||
| "reflect": true | ||
| }, | ||
| "numberedNavActive": { | ||
| "type": "boolean", | ||
| "mutable": false, | ||
| "complexType": { | ||
| "original": "boolean", | ||
| "resolved": "boolean", | ||
| "references": {} | ||
| }, | ||
| "required": false, | ||
| "optional": false, | ||
| "docs": { | ||
| "tags": [], | ||
| "text": "Customize pagination: Activate pagination numbered navigation" | ||
| }, | ||
| "attribute": "numbered-nav-active", | ||
| "reflect": true | ||
| }, | ||
| "intlDateTimeFormat": { | ||
| "type": "string", | ||
| "mutable": false, | ||
| "complexType": { | ||
| "original": "string", | ||
| "resolved": "string", | ||
| "references": {} | ||
| }, | ||
| "required": false, | ||
| "optional": false, | ||
| "docs": { | ||
| "tags": [], | ||
| "text": "Intl date format" | ||
| }, | ||
| "attribute": "intl-date-time-format", | ||
| "reflect": true, | ||
| "defaultValue": "''" | ||
| }, | ||
| "page": { | ||
| "type": "string", | ||
| "mutable": false, | ||
| "complexType": { | ||
| "original": "string", | ||
| "resolved": "string", | ||
| "references": {} | ||
| }, | ||
| "required": false, | ||
| "optional": false, | ||
| "docs": { | ||
| "tags": [], | ||
| "text": "Page to particularly be opened on start" | ||
| }, | ||
| "attribute": "page", | ||
| "reflect": true, | ||
| "defaultValue": "'1'" | ||
| componentDidLoad() { | ||
| if (this.clientStyling || this.clientStylingUrl) | ||
| this.setClientStyling(); | ||
| window.postMessage({ type: 'BlogArticlesGridLoaded' }, window.location.href); | ||
| this.device = getDeviceCustom(); | ||
| } | ||
| }; } | ||
| static get states() { return { | ||
| "paginationBlogList": {}, | ||
| "currentPage": {}, | ||
| "hasErrors": {}, | ||
| "isLoading": {}, | ||
| "bannerMatrixReady": {}, | ||
| "nextPage": {}, | ||
| "previousPage": {}, | ||
| "device": {}, | ||
| "blogData": {}, | ||
| "totalBlogs": {} | ||
| }; } | ||
| static get events() { return [{ | ||
| "method": "ArticleActionButton", | ||
| "name": "ArticleActionButton", | ||
| "bubbles": true, | ||
| "cancelable": true, | ||
| "composed": true, | ||
| "docs": { | ||
| "tags": [], | ||
| "text": "" | ||
| }, | ||
| "complexType": { | ||
| "original": "Object", | ||
| "resolved": "Object", | ||
| "references": { | ||
| "Object": { | ||
| "location": "global" | ||
| } | ||
| 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 (h("div", { class: "BlogsContainer" }, h("div", { class: "ErrorMessage" }, translate('error', this.language)))); | ||
| } | ||
| } | ||
| }]; } | ||
| static get watchers() { return [{ | ||
| "propName": "page", | ||
| "methodName": "watchEndpoint" | ||
| }, { | ||
| "propName": "hasErrors", | ||
| "methodName": "watchEndpoint" | ||
| }, { | ||
| "propName": "cmsEndpoint", | ||
| "methodName": "watchEndpoint" | ||
| }, { | ||
| "propName": "language", | ||
| "methodName": "watchEndpoint" | ||
| }, { | ||
| "propName": "cmsEnv", | ||
| "methodName": "watchEndpoint" | ||
| }, { | ||
| "propName": "userRoles", | ||
| "methodName": "watchEndpoint" | ||
| }, { | ||
| "propName": "blogsLimit", | ||
| "methodName": "watchEndpoint" | ||
| }, { | ||
| "propName": "clientStyling", | ||
| "methodName": "handleStylingChange" | ||
| }, { | ||
| "propName": "clientStylingUrl", | ||
| "methodName": "handleStylingChange" | ||
| }]; } | ||
| static get listeners() { return [{ | ||
| "name": "BannerMatrixReady", | ||
| "method": "handleBannerReady", | ||
| "target": "window", | ||
| "capture": false, | ||
| "passive": false | ||
| }, { | ||
| "name": "hpPageChange", | ||
| "method": "hpPageChange", | ||
| "target": undefined, | ||
| "capture": false, | ||
| "passive": false | ||
| }]; } | ||
| // 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 Skeleton" }, h("div", { class: "GridWrapper" }, h("div", { class: "GridSector" }, h("div", { class: "VisualContent LoadingImage" })), h("div", { class: "GridSector" }, h("div", { class: "BlogTitle LoadingStripe LoadingSmallStripe" }), h("div", { class: "BlogDetails LoadingStripe LoadingMediumStripe" }), h("div", { class: "BlogLink LoadingStripe LoadingLongStripe" }))))); | ||
| } | ||
| return (h("div", { ref: el => this.stylingContainer = el }, h("div", { class: "BlogPageContainer" }, h("div", { class: "BlogGridPaginationWrapper" }, this.paginationActive == true && this.totalBlogs > +this.blogsLimit && h("helper-pagination", { "next-page": this.nextPage, "prev-page": this.previousPage, offset: this.paginationBlogList.offset, limit: parseInt(this.blogsLimit, 10), total: (_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('readmore', this.language)))))); | ||
| })), (this.isLoading) && | ||
| h("div", { class: "GridContainerWrapper LoadingGrid" }, placeholderCards)))); | ||
| } | ||
| static get is() { return "blog-articles-grid"; } | ||
| static get encapsulation() { return "shadow"; } | ||
| static get originalStyleUrls() { | ||
| return { | ||
| "$": ["blog-articles-grid.scss"] | ||
| }; | ||
| } | ||
| static get styleUrls() { | ||
| return { | ||
| "$": ["blog-articles-grid.css"] | ||
| }; | ||
| } | ||
| static get properties() { | ||
| return { | ||
| "cmsEndpoint": { | ||
| "type": "string", | ||
| "mutable": false, | ||
| "complexType": { | ||
| "original": "string", | ||
| "resolved": "string", | ||
| "references": {} | ||
| }, | ||
| "required": false, | ||
| "optional": false, | ||
| "docs": { | ||
| "tags": [], | ||
| "text": "Endpoint URL for the source of data" | ||
| }, | ||
| "attribute": "cms-endpoint", | ||
| "reflect": true | ||
| }, | ||
| "language": { | ||
| "type": "string", | ||
| "mutable": false, | ||
| "complexType": { | ||
| "original": "string", | ||
| "resolved": "string", | ||
| "references": {} | ||
| }, | ||
| "required": false, | ||
| "optional": false, | ||
| "docs": { | ||
| "tags": [], | ||
| "text": "Language of the widget" | ||
| }, | ||
| "attribute": "language", | ||
| "reflect": true, | ||
| "defaultValue": "'en'" | ||
| }, | ||
| "userRoles": { | ||
| "type": "string", | ||
| "mutable": false, | ||
| "complexType": { | ||
| "original": "string", | ||
| "resolved": "string", | ||
| "references": {} | ||
| }, | ||
| "required": false, | ||
| "optional": false, | ||
| "docs": { | ||
| "tags": [], | ||
| "text": "User roles" | ||
| }, | ||
| "attribute": "user-roles", | ||
| "reflect": true, | ||
| "defaultValue": "'everyone'" | ||
| }, | ||
| "cmsEnv": { | ||
| "type": "string", | ||
| "mutable": false, | ||
| "complexType": { | ||
| "original": "string", | ||
| "resolved": "string", | ||
| "references": {} | ||
| }, | ||
| "required": false, | ||
| "optional": false, | ||
| "docs": { | ||
| "tags": [], | ||
| "text": "CMS Endpoint stage" | ||
| }, | ||
| "attribute": "cms-env", | ||
| "reflect": true, | ||
| "defaultValue": "'stage'" | ||
| }, | ||
| "clientStyling": { | ||
| "type": "string", | ||
| "mutable": false, | ||
| "complexType": { | ||
| "original": "string", | ||
| "resolved": "string", | ||
| "references": {} | ||
| }, | ||
| "required": false, | ||
| "optional": false, | ||
| "docs": { | ||
| "tags": [], | ||
| "text": "Client custom styling via string" | ||
| }, | ||
| "attribute": "client-styling", | ||
| "reflect": true, | ||
| "defaultValue": "''" | ||
| }, | ||
| "clientStylingUrl": { | ||
| "type": "string", | ||
| "mutable": false, | ||
| "complexType": { | ||
| "original": "string", | ||
| "resolved": "string", | ||
| "references": {} | ||
| }, | ||
| "required": false, | ||
| "optional": false, | ||
| "docs": { | ||
| "tags": [], | ||
| "text": "Client custom styling via url" | ||
| }, | ||
| "attribute": "client-styling-url", | ||
| "reflect": true, | ||
| "defaultValue": "''" | ||
| }, | ||
| "showPublishingDate": { | ||
| "type": "boolean", | ||
| "mutable": false, | ||
| "complexType": { | ||
| "original": "boolean", | ||
| "resolved": "boolean", | ||
| "references": {} | ||
| }, | ||
| "required": false, | ||
| "optional": false, | ||
| "docs": { | ||
| "tags": [], | ||
| "text": "Property used to display the publishing date" | ||
| }, | ||
| "attribute": "show-publishing-date", | ||
| "reflect": true, | ||
| "defaultValue": "true" | ||
| }, | ||
| "showImage": { | ||
| "type": "boolean", | ||
| "mutable": false, | ||
| "complexType": { | ||
| "original": "boolean", | ||
| "resolved": "boolean", | ||
| "references": {} | ||
| }, | ||
| "required": false, | ||
| "optional": false, | ||
| "docs": { | ||
| "tags": [], | ||
| "text": "Property used to display the image" | ||
| }, | ||
| "attribute": "show-image", | ||
| "reflect": true, | ||
| "defaultValue": "true" | ||
| }, | ||
| "showTitle": { | ||
| "type": "boolean", | ||
| "mutable": false, | ||
| "complexType": { | ||
| "original": "boolean", | ||
| "resolved": "boolean", | ||
| "references": {} | ||
| }, | ||
| "required": false, | ||
| "optional": false, | ||
| "docs": { | ||
| "tags": [], | ||
| "text": "Property used to display the image" | ||
| }, | ||
| "attribute": "show-title", | ||
| "reflect": true, | ||
| "defaultValue": "true" | ||
| }, | ||
| "showContent": { | ||
| "type": "boolean", | ||
| "mutable": false, | ||
| "complexType": { | ||
| "original": "boolean", | ||
| "resolved": "boolean", | ||
| "references": {} | ||
| }, | ||
| "required": false, | ||
| "optional": false, | ||
| "docs": { | ||
| "tags": [], | ||
| "text": "Property used to display the description" | ||
| }, | ||
| "attribute": "show-content", | ||
| "reflect": true, | ||
| "defaultValue": "true" | ||
| }, | ||
| "showButton": { | ||
| "type": "boolean", | ||
| "mutable": false, | ||
| "complexType": { | ||
| "original": "boolean", | ||
| "resolved": "boolean", | ||
| "references": {} | ||
| }, | ||
| "required": false, | ||
| "optional": false, | ||
| "docs": { | ||
| "tags": [], | ||
| "text": "Property used to display the button" | ||
| }, | ||
| "attribute": "show-button", | ||
| "reflect": true, | ||
| "defaultValue": "true" | ||
| }, | ||
| "usePostmessage": { | ||
| "type": "boolean", | ||
| "mutable": false, | ||
| "complexType": { | ||
| "original": "boolean", | ||
| "resolved": "boolean", | ||
| "references": {} | ||
| }, | ||
| "required": true, | ||
| "optional": false, | ||
| "docs": { | ||
| "tags": [], | ||
| "text": "Use postMessage event to communicate" | ||
| }, | ||
| "attribute": "use-postmessage", | ||
| "reflect": true | ||
| }, | ||
| "postMessageEvent": { | ||
| "type": "string", | ||
| "mutable": false, | ||
| "complexType": { | ||
| "original": "string", | ||
| "resolved": "string", | ||
| "references": {} | ||
| }, | ||
| "required": false, | ||
| "optional": false, | ||
| "docs": { | ||
| "tags": [], | ||
| "text": "Event name to be sent when the button is clicked" | ||
| }, | ||
| "attribute": "post-message-event", | ||
| "reflect": true, | ||
| "defaultValue": "''" | ||
| }, | ||
| "blogsLimit": { | ||
| "type": "string", | ||
| "mutable": false, | ||
| "complexType": { | ||
| "original": "string", | ||
| "resolved": "string", | ||
| "references": {} | ||
| }, | ||
| "required": false, | ||
| "optional": false, | ||
| "docs": { | ||
| "tags": [], | ||
| "text": "Customize pagination: Activate pagination numbered navigation" | ||
| }, | ||
| "attribute": "blogs-limit", | ||
| "reflect": true, | ||
| "defaultValue": "'0'" | ||
| }, | ||
| "paginationActive": { | ||
| "type": "boolean", | ||
| "mutable": false, | ||
| "complexType": { | ||
| "original": "boolean", | ||
| "resolved": "boolean", | ||
| "references": {} | ||
| }, | ||
| "required": false, | ||
| "optional": false, | ||
| "docs": { | ||
| "tags": [], | ||
| "text": "Customize pagination: Activate pagination" | ||
| }, | ||
| "attribute": "pagination-active", | ||
| "reflect": true | ||
| }, | ||
| "arrowsActive": { | ||
| "type": "boolean", | ||
| "mutable": false, | ||
| "complexType": { | ||
| "original": "boolean", | ||
| "resolved": "boolean", | ||
| "references": {} | ||
| }, | ||
| "required": false, | ||
| "optional": false, | ||
| "docs": { | ||
| "tags": [], | ||
| "text": "Customize pagination: Activate pagination arrows" | ||
| }, | ||
| "attribute": "arrows-active", | ||
| "reflect": true | ||
| }, | ||
| "secondaryArrowsActive": { | ||
| "type": "boolean", | ||
| "mutable": false, | ||
| "complexType": { | ||
| "original": "boolean", | ||
| "resolved": "boolean", | ||
| "references": {} | ||
| }, | ||
| "required": false, | ||
| "optional": false, | ||
| "docs": { | ||
| "tags": [], | ||
| "text": "Customize pagination: Activate pagination secondary arrows" | ||
| }, | ||
| "attribute": "secondary-arrows-active", | ||
| "reflect": true | ||
| }, | ||
| "numberedNavActive": { | ||
| "type": "boolean", | ||
| "mutable": false, | ||
| "complexType": { | ||
| "original": "boolean", | ||
| "resolved": "boolean", | ||
| "references": {} | ||
| }, | ||
| "required": false, | ||
| "optional": false, | ||
| "docs": { | ||
| "tags": [], | ||
| "text": "Customize pagination: Activate pagination numbered navigation" | ||
| }, | ||
| "attribute": "numbered-nav-active", | ||
| "reflect": true | ||
| }, | ||
| "intlDateTimeFormat": { | ||
| "type": "string", | ||
| "mutable": false, | ||
| "complexType": { | ||
| "original": "string", | ||
| "resolved": "string", | ||
| "references": {} | ||
| }, | ||
| "required": false, | ||
| "optional": false, | ||
| "docs": { | ||
| "tags": [], | ||
| "text": "Intl date format" | ||
| }, | ||
| "attribute": "intl-date-time-format", | ||
| "reflect": true, | ||
| "defaultValue": "''" | ||
| }, | ||
| "page": { | ||
| "type": "string", | ||
| "mutable": false, | ||
| "complexType": { | ||
| "original": "string", | ||
| "resolved": "string", | ||
| "references": {} | ||
| }, | ||
| "required": false, | ||
| "optional": false, | ||
| "docs": { | ||
| "tags": [], | ||
| "text": "Page to particularly be opened on start" | ||
| }, | ||
| "attribute": "page", | ||
| "reflect": true, | ||
| "defaultValue": "'1'" | ||
| } | ||
| }; | ||
| } | ||
| static get states() { | ||
| return { | ||
| "paginationBlogList": {}, | ||
| "currentPage": {}, | ||
| "hasErrors": {}, | ||
| "isLoading": {}, | ||
| "bannerMatrixReady": {}, | ||
| "nextPage": {}, | ||
| "previousPage": {}, | ||
| "device": {}, | ||
| "blogData": {}, | ||
| "totalBlogs": {} | ||
| }; | ||
| } | ||
| static get events() { | ||
| return [{ | ||
| "method": "articleActionButton", | ||
| "name": "articleActionButton", | ||
| "bubbles": true, | ||
| "cancelable": true, | ||
| "composed": true, | ||
| "docs": { | ||
| "tags": [], | ||
| "text": "" | ||
| }, | ||
| "complexType": { | ||
| "original": "Object", | ||
| "resolved": "Object", | ||
| "references": { | ||
| "Object": { | ||
| "location": "global", | ||
| "id": "global::Object" | ||
| } | ||
| } | ||
| } | ||
| }]; | ||
| } | ||
| static get watchers() { | ||
| return [{ | ||
| "propName": "page", | ||
| "methodName": "watchEndpoint" | ||
| }, { | ||
| "propName": "hasErrors", | ||
| "methodName": "watchEndpoint" | ||
| }, { | ||
| "propName": "cmsEndpoint", | ||
| "methodName": "watchEndpoint" | ||
| }, { | ||
| "propName": "language", | ||
| "methodName": "watchEndpoint" | ||
| }, { | ||
| "propName": "cmsEnv", | ||
| "methodName": "watchEndpoint" | ||
| }, { | ||
| "propName": "userRoles", | ||
| "methodName": "watchEndpoint" | ||
| }, { | ||
| "propName": "blogsLimit", | ||
| "methodName": "watchEndpoint" | ||
| }, { | ||
| "propName": "clientStyling", | ||
| "methodName": "handleStylingChange" | ||
| }, { | ||
| "propName": "clientStylingUrl", | ||
| "methodName": "handleStylingChange" | ||
| }]; | ||
| } | ||
| static get listeners() { | ||
| return [{ | ||
| "name": "BannerMatrixReady", | ||
| "method": "handleBannerReady", | ||
| "target": "window", | ||
| "capture": false, | ||
| "passive": false | ||
| }, { | ||
| "name": "hpPageChange", | ||
| "method": "hpPageChange", | ||
| "target": undefined, | ||
| "capture": false, | ||
| "passive": false | ||
| }]; | ||
| } | ||
| } |
| const DEFAULT_LANGUAGE = 'en'; | ||
| const TRANSLATIONS = { | ||
| 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' | ||
| } | ||
| }; | ||
| export 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]; | ||
| }; |
| export function checkDeviceType() { | ||
| const userAgent = navigator.userAgent.toLowerCase(); | ||
| const width = screen.availWidth; | ||
| const height = screen.availHeight; | ||
| if (userAgent.includes('iphone')) { | ||
| return 'mobile'; | ||
| } | ||
| if (userAgent.includes('android')) { | ||
| if (height > width && width < 800) { | ||
| return 'mobile'; | ||
| const userAgent = navigator.userAgent.toLowerCase(); | ||
| const width = screen.availWidth; | ||
| const height = screen.availHeight; | ||
| if (userAgent.includes('iphone')) { | ||
| return 'mobile'; | ||
| } | ||
| if (width > height && height < 800) { | ||
| return 'tablet'; | ||
| if (userAgent.includes('android')) { | ||
| if (height > width && width < 800) { | ||
| return 'mobile'; | ||
| } | ||
| if (width > height && height < 800) { | ||
| return 'tablet'; | ||
| } | ||
| } | ||
| } | ||
| return 'desktop'; | ||
| return 'desktop'; | ||
| } | ||
| 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; | ||
| } | ||
| export 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; | ||
| } | ||
| export 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'; | ||
| }; | ||
| export 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'; | ||
| }; | ||
| export const getDevicePlatform = () => { | ||
| const device = getDevice(); | ||
| if (device) { | ||
| if (device === 'PC') { | ||
| return 'dk'; | ||
| } | ||
| else if (device === 'iPad' || device === 'iPhone') { | ||
| return 'mtWeb'; | ||
| } | ||
| else { | ||
| return 'mtWeb'; | ||
| } | ||
| } | ||
| }; |
@@ -1,169 +0,103 @@ | ||
| import { r as registerInstance, c as createEvent, h } from './index-6c1af2f1.js'; | ||
| import { r as registerInstance, c as createEvent, h } from './index-2c19cd94.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) { | ||
| 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.isLoading = true; | ||
| this.bannerMatrixReady = false; | ||
| this.nextPage = ''; | ||
| this.previousPage = ''; | ||
| this.device = ''; | ||
| this.totalBlogs = 0; | ||
| this.clientStylingContent = ''; | ||
| this.defaultStyling = ` | ||
| constructor(hostRef) { | ||
| registerInstance(this, hostRef); | ||
| this.articleActionButton = createEvent(this, "articleActionButton", 7); | ||
| this.clientStylingContent = ''; | ||
| this.defaultStyling = ` | ||
| div#PaginationContainer { | ||
@@ -217,214 +151,246 @@ justify-content: right; | ||
| }`; | ||
| 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 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 }); | ||
| 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 h("div", { class: "BlogContent", innerHTML: content }); | ||
| } | ||
| if (this.bannerMatrixReady) { | ||
| return 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 (h("div", { class: "BlogsContainer" }, 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(); | ||
| } | ||
| } | ||
| } | ||
| // 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 Skeleton" }, h("div", { class: "GridWrapper" }, h("div", { class: "GridSector" }, h("div", { class: "VisualContent LoadingImage" })), h("div", { class: "GridSector" }, h("div", { class: "BlogTitle LoadingStripe LoadingSmallStripe" }), h("div", { class: "BlogDetails LoadingStripe LoadingMediumStripe" }), h("div", { class: "BlogLink LoadingStripe LoadingLongStripe" }))))); | ||
| componentWillLoad() { | ||
| if (this.clientStylingUrl) | ||
| return this.fetchClientStyling(); | ||
| } | ||
| 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) => { | ||
| 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; | ||
| 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"], | ||
| "clientStyling": ["handleStylingChange"], | ||
| "clientStylingUrl": ["handleStylingChange"] | ||
| }; } | ||
| 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 Skeleton" }, h("div", { class: "GridWrapper" }, h("div", { class: "GridSector" }, h("div", { class: "VisualContent LoadingImage" })), h("div", { class: "GridSector" }, h("div", { class: "BlogTitle LoadingStripe LoadingSmallStripe" }), h("div", { class: "BlogDetails LoadingStripe LoadingMediumStripe" }), h("div", { class: "BlogLink LoadingStripe LoadingLongStripe" }))))); | ||
| } | ||
| return (h("div", { ref: el => this.stylingContainer = el }, h("div", { class: "BlogPageContainer" }, h("div", { class: "BlogGridPaginationWrapper" }, this.paginationActive == true && this.totalBlogs > +this.blogsLimit && h("helper-pagination", { "next-page": this.nextPage, "prev-page": this.previousPage, offset: this.paginationBlogList.offset, limit: parseInt(this.blogsLimit, 10), total: (_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"], | ||
| "clientStyling": ["handleStylingChange"], | ||
| "clientStylingUrl": ["handleStylingChange"] | ||
| }; } | ||
| }; | ||
| BlogArticlesGrid.style = blogArticlesGridCss; | ||
| BlogArticlesGrid.style = BlogArticlesGridStyle0; | ||
@@ -438,6 +404,6 @@ /** | ||
| 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)); | ||
| }; | ||
@@ -447,236 +413,207 @@ | ||
| 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) { | ||
| 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; | ||
| constructor(hostRef) { | ||
| registerInstance(this, hostRef); | ||
| this.hpPageChange = 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 { | ||
| this.offsetInt = (pageNumber - 1) * this.limitInt; | ||
| 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 === 0 && this.currentPage <= 4) { | ||
| this.navigateTo('firstPage'); | ||
| else if ((this.endInt - this.currentPage) < 3) { | ||
| this.pagesArray = Array.from({ length: 4 }, (_, i) => this.endInt - 2 + i); | ||
| this.pagesArray.unshift('...'); | ||
| } | ||
| else if (index === 0 && this.currentPage > 4) { | ||
| this.navigateTo('fivePagesBack'); | ||
| } | ||
| componentDidRender() { | ||
| // start custom styling area | ||
| if (!this.limitStylingAppends && this.stylingContainer) { | ||
| if (this.clientStyling) | ||
| this.setClientStyling(); | ||
| if (this.clientStylingUrlContent) | ||
| this.setClientStylingURL(); | ||
| this.limitStylingAppends = true; | ||
| } | ||
| else if (index === 4 && this.endInt - this.currentPage >= 2) { | ||
| this.navigateTo('fivePagesForward'); | ||
| // 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" }))); | ||
| } | ||
| } | ||
| 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('...'); | ||
| /** | ||
| * 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)); | ||
| } | ||
| 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; | ||
| HelperPagination.style = HelperPaginationStyle0; | ||
| export { BlogArticlesGrid as blog_articles_grid, HelperPagination as helper_pagination }; |
@@ -1,17 +0,20 @@ | ||
| import { p as promiseResolve, b as bootstrapLazy } from './index-6c1af2f1.js'; | ||
| import { p as promiseResolve, b as bootstrapLazy } from './index-2c19cd94.js'; | ||
| export { s as setNonce } from './index-2c19cd94.js'; | ||
| import { g as globalScripts } from './app-globals-0f993ce5.js'; | ||
| /* | ||
| Stencil Client Patch Browser v2.15.2 | MIT Licensed | https://stenciljs.com | ||
| Stencil Client Patch Browser v4.20.0 | MIT Licensed | https://stenciljs.com | ||
| */ | ||
| const patchBrowser = () => { | ||
| const importMeta = import.meta.url; | ||
| const opts = {}; | ||
| if (importMeta !== '') { | ||
| opts.resourcesUrl = new URL('.', importMeta).href; | ||
| } | ||
| return promiseResolve(opts); | ||
| var patchBrowser = () => { | ||
| const importMeta = import.meta.url; | ||
| const opts = {}; | ||
| if (importMeta !== "") { | ||
| opts.resourcesUrl = new URL(".", importMeta).href; | ||
| } | ||
| return promiseResolve(opts); | ||
| }; | ||
| patchBrowser().then(options => { | ||
| return bootstrapLazy([["blog-articles-grid_2",[[1,"blog-articles-grid",{"cmsEndpoint":[513,"cms-endpoint"],"language":[513],"userRoles":[513,"user-roles"],"cmsEnv":[513,"cms-env"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"showPublishingDate":[516,"show-publishing-date"],"showImage":[516,"show-image"],"showTitle":[516,"show-title"],"showContent":[516,"show-content"],"showButton":[516,"show-button"],"usePostmessage":[516,"use-postmessage"],"postMessageEvent":[513,"post-message-event"],"blogsLimit":[513,"blogs-limit"],"paginationActive":[516,"pagination-active"],"arrowsActive":[516,"arrows-active"],"secondaryArrowsActive":[516,"secondary-arrows-active"],"numberedNavActive":[516,"numbered-nav-active"],"intlDateTimeFormat":[513,"intl-date-time-format"],"page":[513],"paginationBlogList":[32],"currentPage":[32],"hasErrors":[32],"isLoading":[32],"bannerMatrixReady":[32],"nextPage":[32],"previousPage":[32],"device":[32],"blogData":[32],"totalBlogs":[32]},[[8,"BannerMatrixReady","handleBannerReady"],[0,"hpPageChange","hpPageChange"]]],[1,"helper-pagination",{"nextPage":[1537,"next-page"],"prevPage":[1537,"prev-page"],"offset":[1538],"limit":[1538],"total":[1538],"language":[1537],"clientStyling":[1537,"client-styling"],"clientStylingUrlContent":[1537,"client-styling-url-content"],"arrowsActive":[1540,"arrows-active"],"secondaryArrowsActive":[1540,"secondary-arrows-active"],"numberedNavActive":[1540,"numbered-nav-active"],"offsetInt":[32],"lastPage":[32],"previousPage":[32],"limitInt":[32],"totalInt":[32],"pagesArray":[32],"endInt":[32],"limitStylingAppends":[32]}]]]], options); | ||
| patchBrowser().then(async (options) => { | ||
| await globalScripts(); | ||
| return bootstrapLazy([["blog-articles-grid_2",[[1,"blog-articles-grid",{"cmsEndpoint":[513,"cms-endpoint"],"language":[513],"userRoles":[513,"user-roles"],"cmsEnv":[513,"cms-env"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"showPublishingDate":[516,"show-publishing-date"],"showImage":[516,"show-image"],"showTitle":[516,"show-title"],"showContent":[516,"show-content"],"showButton":[516,"show-button"],"usePostmessage":[516,"use-postmessage"],"postMessageEvent":[513,"post-message-event"],"blogsLimit":[513,"blogs-limit"],"paginationActive":[516,"pagination-active"],"arrowsActive":[516,"arrows-active"],"secondaryArrowsActive":[516,"secondary-arrows-active"],"numberedNavActive":[516,"numbered-nav-active"],"intlDateTimeFormat":[513,"intl-date-time-format"],"page":[513],"paginationBlogList":[32],"currentPage":[32],"hasErrors":[32],"isLoading":[32],"bannerMatrixReady":[32],"nextPage":[32],"previousPage":[32],"device":[32],"blogData":[32],"totalBlogs":[32]},[[8,"BannerMatrixReady","handleBannerReady"],[0,"hpPageChange","hpPageChange"]],{"page":["watchEndpoint"],"hasErrors":["watchEndpoint"],"cmsEndpoint":["watchEndpoint"],"language":["watchEndpoint"],"cmsEnv":["watchEndpoint"],"userRoles":["watchEndpoint"],"blogsLimit":["watchEndpoint"],"clientStyling":["handleStylingChange"],"clientStylingUrl":["handleStylingChange"]}],[1,"helper-pagination",{"nextPage":[1537,"next-page"],"prevPage":[1537,"prev-page"],"offset":[1538],"limit":[1538],"total":[1538],"language":[1537],"clientStyling":[1537,"client-styling"],"clientStylingUrlContent":[1537,"client-styling-url-content"],"arrowsActive":[1540,"arrows-active"],"secondaryArrowsActive":[1540,"secondary-arrows-active"],"numberedNavActive":[1540,"numbered-nav-active"],"offsetInt":[32],"lastPage":[32],"previousPage":[32],"limitInt":[32],"totalInt":[32],"pagesArray":[32],"endInt":[32],"limitStylingAppends":[32]}]]]], options); | ||
| }); |
@@ -1,17 +0,11 @@ | ||
| import { p as promiseResolve, b as bootstrapLazy } from './index-6c1af2f1.js'; | ||
| import { b as bootstrapLazy } from './index-2c19cd94.js'; | ||
| export { s as setNonce } from './index-2c19cd94.js'; | ||
| import { g as globalScripts } from './app-globals-0f993ce5.js'; | ||
| /* | ||
| Stencil Client Patch Esm v2.15.2 | MIT Licensed | https://stenciljs.com | ||
| */ | ||
| const patchEsm = () => { | ||
| return promiseResolve(); | ||
| const defineCustomElements = async (win, options) => { | ||
| if (typeof window === 'undefined') return undefined; | ||
| await globalScripts(); | ||
| return bootstrapLazy([["blog-articles-grid_2",[[1,"blog-articles-grid",{"cmsEndpoint":[513,"cms-endpoint"],"language":[513],"userRoles":[513,"user-roles"],"cmsEnv":[513,"cms-env"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"showPublishingDate":[516,"show-publishing-date"],"showImage":[516,"show-image"],"showTitle":[516,"show-title"],"showContent":[516,"show-content"],"showButton":[516,"show-button"],"usePostmessage":[516,"use-postmessage"],"postMessageEvent":[513,"post-message-event"],"blogsLimit":[513,"blogs-limit"],"paginationActive":[516,"pagination-active"],"arrowsActive":[516,"arrows-active"],"secondaryArrowsActive":[516,"secondary-arrows-active"],"numberedNavActive":[516,"numbered-nav-active"],"intlDateTimeFormat":[513,"intl-date-time-format"],"page":[513],"paginationBlogList":[32],"currentPage":[32],"hasErrors":[32],"isLoading":[32],"bannerMatrixReady":[32],"nextPage":[32],"previousPage":[32],"device":[32],"blogData":[32],"totalBlogs":[32]},[[8,"BannerMatrixReady","handleBannerReady"],[0,"hpPageChange","hpPageChange"]],{"page":["watchEndpoint"],"hasErrors":["watchEndpoint"],"cmsEndpoint":["watchEndpoint"],"language":["watchEndpoint"],"cmsEnv":["watchEndpoint"],"userRoles":["watchEndpoint"],"blogsLimit":["watchEndpoint"],"clientStyling":["handleStylingChange"],"clientStylingUrl":["handleStylingChange"]}],[1,"helper-pagination",{"nextPage":[1537,"next-page"],"prevPage":[1537,"prev-page"],"offset":[1538],"limit":[1538],"total":[1538],"language":[1537],"clientStyling":[1537,"client-styling"],"clientStylingUrlContent":[1537,"client-styling-url-content"],"arrowsActive":[1540,"arrows-active"],"secondaryArrowsActive":[1540,"secondary-arrows-active"],"numberedNavActive":[1540,"numbered-nav-active"],"offsetInt":[32],"lastPage":[32],"previousPage":[32],"limitInt":[32],"totalInt":[32],"pagesArray":[32],"endInt":[32],"limitStylingAppends":[32]}]]]], options); | ||
| }; | ||
| const defineCustomElements = (win, options) => { | ||
| if (typeof window === 'undefined') return Promise.resolve(); | ||
| return patchEsm().then(() => { | ||
| return bootstrapLazy([["blog-articles-grid_2",[[1,"blog-articles-grid",{"cmsEndpoint":[513,"cms-endpoint"],"language":[513],"userRoles":[513,"user-roles"],"cmsEnv":[513,"cms-env"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"showPublishingDate":[516,"show-publishing-date"],"showImage":[516,"show-image"],"showTitle":[516,"show-title"],"showContent":[516,"show-content"],"showButton":[516,"show-button"],"usePostmessage":[516,"use-postmessage"],"postMessageEvent":[513,"post-message-event"],"blogsLimit":[513,"blogs-limit"],"paginationActive":[516,"pagination-active"],"arrowsActive":[516,"arrows-active"],"secondaryArrowsActive":[516,"secondary-arrows-active"],"numberedNavActive":[516,"numbered-nav-active"],"intlDateTimeFormat":[513,"intl-date-time-format"],"page":[513],"paginationBlogList":[32],"currentPage":[32],"hasErrors":[32],"isLoading":[32],"bannerMatrixReady":[32],"nextPage":[32],"previousPage":[32],"device":[32],"blogData":[32],"totalBlogs":[32]},[[8,"BannerMatrixReady","handleBannerReady"],[0,"hpPageChange","hpPageChange"]]],[1,"helper-pagination",{"nextPage":[1537,"next-page"],"prevPage":[1537,"prev-page"],"offset":[1538],"limit":[1538],"total":[1538],"language":[1537],"clientStyling":[1537,"client-styling"],"clientStylingUrlContent":[1537,"client-styling-url-content"],"arrowsActive":[1540,"arrows-active"],"secondaryArrowsActive":[1540,"secondary-arrows-active"],"numberedNavActive":[1540,"numbered-nav-active"],"offsetInt":[32],"lastPage":[32],"previousPage":[32],"limitInt":[32],"totalInt":[32],"pagesArray":[32],"endInt":[32],"limitStylingAppends":[32]}]]]], options); | ||
| }); | ||
| }; | ||
| export { defineCustomElements }; |
@@ -1,22 +0,17 @@ | ||
| import { sass } from '@stencil/sass'; | ||
| import { sass } from "@stencil/sass"; | ||
| export const config = { | ||
| namespace: 'blog-articles-grid', | ||
| taskQueue: 'async', | ||
| plugins: [sass()], | ||
| outputTargets: [ | ||
| { | ||
| type: 'dist', | ||
| esmLoaderPath: '../loader', | ||
| namespace: 'blog-articles-grid', | ||
| taskQueue: 'async', | ||
| sourceMap: false, | ||
| minifyJs: true, | ||
| extras: { | ||
| experimentalImportInjection: true | ||
| }, | ||
| { | ||
| type: 'dist-custom-elements', | ||
| }, | ||
| { | ||
| type: 'docs-readme', | ||
| }, | ||
| { | ||
| type: 'www', | ||
| serviceWorker: null, // disable service workers | ||
| }, | ||
| ], | ||
| plugins: [sass()], | ||
| outputTargets: [ | ||
| { | ||
| type: 'dist', | ||
| esmLoaderPath: '../loader' | ||
| } | ||
| ] | ||
| }; |
@@ -92,4 +92,19 @@ /* eslint-disable */ | ||
| } | ||
| export interface BlogArticlesGridCustomEvent<T> extends CustomEvent<T> { | ||
| detail: T; | ||
| target: HTMLBlogArticlesGridElement; | ||
| } | ||
| declare global { | ||
| interface HTMLBlogArticlesGridElementEventMap { | ||
| "articleActionButton": Object; | ||
| } | ||
| interface HTMLBlogArticlesGridElement extends Components.BlogArticlesGrid, HTMLStencilElement { | ||
| addEventListener<K extends keyof HTMLBlogArticlesGridElementEventMap>(type: K, listener: (this: HTMLBlogArticlesGridElement, ev: BlogArticlesGridCustomEvent<HTMLBlogArticlesGridElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void; | ||
| addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; | ||
| addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; | ||
| addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; | ||
| removeEventListener<K extends keyof HTMLBlogArticlesGridElementEventMap>(type: K, listener: (this: HTMLBlogArticlesGridElement, ev: BlogArticlesGridCustomEvent<HTMLBlogArticlesGridElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void; | ||
| removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; | ||
| removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; | ||
| removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; | ||
| } | ||
@@ -142,3 +157,3 @@ var HTMLBlogArticlesGridElement: { | ||
| "numberedNavActive"?: boolean; | ||
| "onArticleActionButton"?: (event: CustomEvent<Object>) => void; | ||
| "onArticleActionButton"?: (event: BlogArticlesGridCustomEvent<Object>) => void; | ||
| /** | ||
@@ -145,0 +160,0 @@ * Page to particularly be opened on start |
| import { EventEmitter } from '../../stencil-public-runtime'; | ||
| import '@everymatrix/helper-pagination'; | ||
| import "../../../../../../dist/packages/stencil/helper-pagination/dist/types/index"; | ||
| export declare class BlogArticlesGrid { | ||
| /** | ||
| * Endpoint URL for the source of data | ||
| */ | ||
| cmsEndpoint: string; | ||
| /** | ||
| * Language of the widget | ||
| */ | ||
| language: string; | ||
| /** | ||
| * User roles | ||
| */ | ||
| userRoles: string; | ||
| /** | ||
| * CMS Endpoint stage | ||
| */ | ||
| cmsEnv: string; | ||
| /** | ||
| * Client custom styling via string | ||
| */ | ||
| clientStyling: string; | ||
| /** | ||
| * Client custom styling via url | ||
| */ | ||
| clientStylingUrl: string; | ||
| /** | ||
| * Property used to display the publishing date | ||
| */ | ||
| showPublishingDate: boolean; | ||
| /** | ||
| * Property used to display the image | ||
| */ | ||
| showImage: boolean; | ||
| /** | ||
| * Property used to display the image | ||
| */ | ||
| showTitle: boolean; | ||
| /** | ||
| * Property used to display the description | ||
| */ | ||
| showContent: boolean; | ||
| /** | ||
| * Property used to display the button | ||
| */ | ||
| showButton: boolean; | ||
| /** | ||
| * Use postMessage event to communicate | ||
| */ | ||
| usePostmessage: boolean; | ||
| /** | ||
| * Event name to be sent when the button is clicked | ||
| */ | ||
| postMessageEvent: string; | ||
| /** | ||
| * Customize pagination: Activate pagination numbered navigation | ||
| */ | ||
| blogsLimit: string; | ||
| /** | ||
| * Customize pagination: Activate pagination | ||
| */ | ||
| paginationActive: boolean; | ||
| /** | ||
| * Customize pagination: Activate pagination arrows | ||
| */ | ||
| arrowsActive: boolean; | ||
| /** | ||
| * Customize pagination: Activate pagination secondary arrows | ||
| */ | ||
| secondaryArrowsActive: boolean; | ||
| /** | ||
| * Customize pagination: Activate pagination numbered navigation | ||
| */ | ||
| numberedNavActive: boolean; | ||
| /** | ||
| * Intl date format | ||
| */ | ||
| intlDateTimeFormat: string; | ||
| /** | ||
| * Page to particularly be opened on start | ||
| */ | ||
| page: string; | ||
| ArticleActionButton: EventEmitter<Object>; | ||
| getArticleId(postId: number, slug: string, customPath: string): void; | ||
| paginationBlogList: any; | ||
| currentPage: number; | ||
| hasErrors: boolean; | ||
| private isLoading; | ||
| bannerMatrixReady: boolean; | ||
| nextPage: string; | ||
| previousPage: string; | ||
| device: string; | ||
| blogData: any; | ||
| totalBlogs: number; | ||
| lastPage: number; | ||
| clientStylingContent: string; | ||
| handleBannerReady(): void; | ||
| watchEndpoint(newValue: string, oldValue: string): void; | ||
| handleStylingChange(newValue: string, oldValue: string): void; | ||
| private stylingContainer; | ||
| private defaultStyling; | ||
| hpPageChange(event: CustomEvent<BlogArticlesGrid>): void; | ||
| sortArticlesByDate(arr: any): any; | ||
| findLatestFeatured(array: any): any; | ||
| moveLatestFeatureToStart(articlesArray: any, latestFeatured: any): any; | ||
| getBlogArticleGrid(page?: number): void; | ||
| connectedCallback(): void; | ||
| componentWillLoad(): Promise<string>; | ||
| componentDidLoad(): void; | ||
| setClientStyling: () => void; | ||
| fetchClientStyling(): Promise<string>; | ||
| setImage: (image: any) => string; | ||
| formatDate(dateString: any): string; | ||
| renderContentConditionally: (content: string) => HTMLElement; | ||
| render(): void; | ||
| /** | ||
| * Endpoint URL for the source of data | ||
| */ | ||
| cmsEndpoint: string; | ||
| /** | ||
| * Language of the widget | ||
| */ | ||
| language: string; | ||
| /** | ||
| * User roles | ||
| */ | ||
| userRoles: string; | ||
| /** | ||
| * CMS Endpoint stage | ||
| */ | ||
| cmsEnv: string; | ||
| /** | ||
| * Client custom styling via string | ||
| */ | ||
| clientStyling: string; | ||
| /** | ||
| * Client custom styling via url | ||
| */ | ||
| clientStylingUrl: string; | ||
| /** | ||
| * Property used to display the publishing date | ||
| */ | ||
| showPublishingDate: boolean; | ||
| /** | ||
| * Property used to display the image | ||
| */ | ||
| showImage: boolean; | ||
| /** | ||
| * Property used to display the image | ||
| */ | ||
| showTitle: boolean; | ||
| /** | ||
| * Property used to display the description | ||
| */ | ||
| showContent: boolean; | ||
| /** | ||
| * Property used to display the button | ||
| */ | ||
| showButton: boolean; | ||
| /** | ||
| * Use postMessage event to communicate | ||
| */ | ||
| usePostmessage: boolean; | ||
| /** | ||
| * Event name to be sent when the button is clicked | ||
| */ | ||
| postMessageEvent: string; | ||
| /** | ||
| * Customize pagination: Activate pagination numbered navigation | ||
| */ | ||
| blogsLimit: string; | ||
| /** | ||
| * Customize pagination: Activate pagination | ||
| */ | ||
| paginationActive: boolean; | ||
| /** | ||
| * Customize pagination: Activate pagination arrows | ||
| */ | ||
| arrowsActive: boolean; | ||
| /** | ||
| * Customize pagination: Activate pagination secondary arrows | ||
| */ | ||
| secondaryArrowsActive: boolean; | ||
| /** | ||
| * Customize pagination: Activate pagination numbered navigation | ||
| */ | ||
| numberedNavActive: boolean; | ||
| /** | ||
| * Intl date format | ||
| */ | ||
| intlDateTimeFormat: string; | ||
| /** | ||
| * Page to particularly be opened on start | ||
| */ | ||
| page: string; | ||
| articleActionButton: EventEmitter<Object>; | ||
| getArticleId(postId: number, slug: string, customPath: string): void; | ||
| paginationBlogList: any; | ||
| currentPage: number; | ||
| hasErrors: boolean; | ||
| private isLoading; | ||
| bannerMatrixReady: boolean; | ||
| nextPage: string; | ||
| previousPage: string; | ||
| device: string; | ||
| blogData: any; | ||
| totalBlogs: number; | ||
| lastPage: number; | ||
| clientStylingContent: string; | ||
| handleBannerReady(): void; | ||
| watchEndpoint(newValue: string, oldValue: string): void; | ||
| handleStylingChange(newValue: string, oldValue: string): void; | ||
| private stylingContainer; | ||
| private defaultStyling; | ||
| hpPageChange(event: CustomEvent<BlogArticlesGrid>): void; | ||
| sortArticlesByDate(arr: any): any; | ||
| findLatestFeatured(array: any): any; | ||
| moveLatestFeatureToStart(articlesArray: any, latestFeatured: any): any; | ||
| getBlogArticleGrid(page?: number): void; | ||
| connectedCallback(): void; | ||
| componentWillLoad(): Promise<string>; | ||
| componentDidLoad(): void; | ||
| setClientStyling: () => void; | ||
| fetchClientStyling(): Promise<string>; | ||
| setImage: (image: any) => string; | ||
| formatDate(dateString: any): string; | ||
| renderContentConditionally: (content: string) => HTMLElement; | ||
| render(): void; | ||
| } |
@@ -7,2 +7,12 @@ declare type CustomMethodDecorator<T> = (target: Object, propertyKey: string | symbol, descriptor: TypedPropertyDescriptor<T>) => TypedPropertyDescriptor<T> | void; | ||
| /** | ||
| * When set to `true` this component will be form-associated. See | ||
| * https://stenciljs.com/docs/next/form-associated documentation on how to | ||
| * build form-associated Stencil components that integrate into forms like | ||
| * native browser elements such as `<input>` and `<textarea>`. | ||
| * | ||
| * The {@link AttachInternals} decorator allows for access to the | ||
| * `ElementInternals` object to modify the associated form. | ||
| */ | ||
| formAssociated?: boolean; | ||
| /** | ||
| * Tag name of the web component. Ideally, the tag name must be globally unique, | ||
@@ -66,3 +76,3 @@ * so it's recommended to choose an unique prefix for all your components within the same collection. | ||
| * Stencil uses different heuristics to determine the default name of the attribute, | ||
| * but using this property, you can override the default behaviour. | ||
| * but using this property, you can override the default behavior. | ||
| */ | ||
@@ -112,2 +122,5 @@ attribute?: string | null; | ||
| } | ||
| export interface AttachInternalsDecorator { | ||
| (): PropertyDecorator; | ||
| } | ||
| export interface ListenDecorator { | ||
@@ -134,3 +147,3 @@ (eventName: string, opts?: ListenOptions): CustomMethodDecorator<any>; | ||
| * | ||
| * Using the `passive` option can be used to change the default behaviour. | ||
| * Using the `passive` option can be used to change the default behavior. | ||
| * Please see https://developers.google.com/web/updates/2016/06/passive-event-listeners for further information. | ||
@@ -140,3 +153,3 @@ */ | ||
| } | ||
| export declare type ListenTargetOptions = 'body' | 'document' | 'window'; | ||
| export type ListenTargetOptions = 'body' | 'document' | 'window'; | ||
| export interface StateDecorator { | ||
@@ -184,2 +197,8 @@ (): PropertyDecorator; | ||
| /** | ||
| * If the `formAssociated` option is set in options passed to the | ||
| * `@Component()` decorator then this decorator may be used to get access to the | ||
| * `ElementInternals` instance associated with the component. | ||
| */ | ||
| export declare const AttachInternals: AttachInternalsDecorator; | ||
| /** | ||
| * The `Listen()` decorator is for listening DOM events, including the ones | ||
@@ -223,4 +242,4 @@ * dispatched from `@Events()`. | ||
| export declare const Watch: WatchDecorator; | ||
| export declare type ResolutionHandler = (elm: HTMLElement) => string | undefined | null; | ||
| export declare type ErrorHandler = (err: any, element?: HTMLElement) => void; | ||
| export type ResolutionHandler = (elm: HTMLElement) => string | undefined | null; | ||
| export type ErrorHandler = (err: any, element?: HTMLElement) => void; | ||
| /** | ||
@@ -231,3 +250,5 @@ * `setMode()` is used for libraries which provide multiple "modes" for styles. | ||
| /** | ||
| * getMode | ||
| * `getMode()` is used for libraries which provide multiple "modes" for styles. | ||
| * @param ref a reference to the node to get styles for | ||
| * @returns the current mode or undefined, if not found | ||
| */ | ||
@@ -245,2 +266,5 @@ export declare function getMode<T = string | undefined>(ref: any): T; | ||
| * if the path needs to be customized. | ||
| * @param path the path to use in calculating the asset path. this value will be | ||
| * used in conjunction with the base asset path | ||
| * @returns the base path | ||
| */ | ||
@@ -258,9 +282,22 @@ export declare function getAssetPath(path: string): string; | ||
| * But do note that this configuration depends on how your script is bundled, or lack of | ||
| * bunding, and where your assets can be loaded from. Additionally custom bundling | ||
| * bundling, and where your assets can be loaded from. Additionally custom bundling | ||
| * will have to ensure the static assets are copied to its build directory. | ||
| * @param path the asset path to set | ||
| * @returns the set path | ||
| */ | ||
| export declare function setAssetPath(path: string): string; | ||
| /** | ||
| * getElement | ||
| * Used to specify a nonce value that corresponds with an application's | ||
| * [Content Security Policy (CSP)](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP). | ||
| * When set, the nonce will be added to all dynamically created script and style tags at runtime. | ||
| * Alternatively, the nonce value can be set on a `meta` tag in the DOM head | ||
| * (<meta name="csp-nonce" content="{ nonce value here }" />) and will result in the same behavior. | ||
| * @param nonce The value to be used for the nonce attribute. | ||
| */ | ||
| export declare function setNonce(nonce: string): void; | ||
| /** | ||
| * Retrieve a Stencil element for a given reference | ||
| * @param ref the ref to get the Stencil element for | ||
| * @returns a reference to the element | ||
| */ | ||
| export declare function getElement(ref: any): HTMLStencilElement; | ||
@@ -270,3 +307,5 @@ /** | ||
| * | ||
| * Notice `forceUpdate()` is not syncronous and might perform the DOM render in the next frame. | ||
| * Notice `forceUpdate()` is not synchronous and might perform the DOM render in the next frame. | ||
| * | ||
| * @param ref the node/element to force the re-render of | ||
| */ | ||
@@ -276,2 +315,3 @@ export declare function forceUpdate(ref: any): void; | ||
| * getRenderingRef | ||
| * @returns the rendering ref | ||
| */ | ||
@@ -287,2 +327,4 @@ export declare function getRenderingRef(): any; | ||
| * For further information: https://developers.google.com/web/fundamentals/performance/rendering/avoid-large-complex-layouts-and-layout-thrashing | ||
| * | ||
| * @param task the DOM-write to schedule | ||
| */ | ||
@@ -295,2 +337,4 @@ export declare function writeTask(task: RafCallback): void; | ||
| * For further information: https://developers.google.com/web/fundamentals/performance/rendering/avoid-large-complex-layouts-and-layout-thrashing | ||
| * | ||
| * @param task the DOM-read to schedule | ||
| */ | ||
@@ -424,3 +468,3 @@ export declare function readTask(task: RafCallback): void; | ||
| */ | ||
| interface HostAttributes { | ||
| export interface HostAttributes { | ||
| class?: string | { | ||
@@ -435,4 +479,40 @@ [className: string]: boolean; | ||
| } | ||
| /** | ||
| * Utilities for working with functional Stencil components. An object | ||
| * conforming to this interface is passed by the Stencil runtime as the third | ||
| * argument to a functional component, allowing component authors to work with | ||
| * features like children. | ||
| * | ||
| * The children of a functional component will be passed as the second | ||
| * argument, so a functional component which uses these utils to transform its | ||
| * children might look like the following: | ||
| * | ||
| * ```ts | ||
| * export const AddClass: FunctionalComponent = (_, children, utils) => ( | ||
| * utils.map(children, child => ({ | ||
| * ...child, | ||
| * vattrs: { | ||
| * ...child.vattrs, | ||
| * class: `${child.vattrs.class} add-class` | ||
| * } | ||
| * })) | ||
| * ); | ||
| * ``` | ||
| * | ||
| * For more see the Stencil documentation, here: | ||
| * https://stenciljs.com/docs/functional-components | ||
| */ | ||
| export interface FunctionalUtilities { | ||
| /** | ||
| * Utility for reading the children of a functional component at runtime. | ||
| * Since the Stencil runtime uses a different interface for children it is | ||
| * not recommended to read the children directly, and is preferable to use | ||
| * this utility to, for instance, perform a side effect for each child. | ||
| */ | ||
| forEach: (children: VNode[], cb: (vnode: ChildNode, index: number, array: ChildNode[]) => void) => void; | ||
| /** | ||
| * Utility for transforming the children of a functional component. Given an | ||
| * array of children and a callback this will return a list of the results of | ||
| * passing each child to the supplied callback. | ||
| */ | ||
| map: (children: VNode[], cb: (vnode: ChildNode, index: number, array: ChildNode[]) => ChildNode) => VNode[]; | ||
@@ -443,2 +523,10 @@ } | ||
| } | ||
| /** | ||
| * A Child VDOM node | ||
| * | ||
| * This has most of the same properties as {@link VNode} but friendlier names | ||
| * (i.e. `vtag` instead of `$tag$`, `vchildren` instead of `$children$`) in | ||
| * order to provide a friendlier public interface for users of the | ||
| * {@link FunctionalUtilities}). | ||
| */ | ||
| export interface ChildNode { | ||
@@ -490,2 +578,5 @@ vtag?: string | number | Function; | ||
| export declare function h(sel: any, data: VNodeData | null, children: VNode): VNode; | ||
| /** | ||
| * A virtual DOM node | ||
| */ | ||
| export interface VNode { | ||
@@ -698,2 +789,3 @@ $flags$: number; | ||
| media?: string; | ||
| ping?: string; | ||
| rel?: string; | ||
@@ -725,3 +817,2 @@ target?: string; | ||
| interface ButtonHTMLAttributes<T> extends HTMLAttributes<T> { | ||
| autoFocus?: boolean; | ||
| disabled?: boolean; | ||
@@ -742,2 +833,5 @@ form?: string; | ||
| value?: string | string[] | number; | ||
| popoverTargetAction?: string; | ||
| popoverTargetElement?: Element | null; | ||
| popoverTarget?: string; | ||
| } | ||
@@ -764,2 +858,3 @@ interface CanvasHTMLAttributes<T> extends HTMLAttributes<T> { | ||
| interface DialogHTMLAttributes<T> extends HTMLAttributes<T> { | ||
| onCancel?: (event: Event) => void; | ||
| onClose?: (event: Event) => void; | ||
@@ -824,2 +919,4 @@ open?: boolean; | ||
| alt?: string; | ||
| crossOrigin?: string; | ||
| crossorigin?: string; | ||
| decoding?: 'async' | 'auto' | 'sync'; | ||
@@ -846,8 +943,6 @@ importance?: 'low' | 'auto' | 'high'; | ||
| alt?: string; | ||
| autoCapitalize?: any; | ||
| autocapitalize?: any; | ||
| autoCapitalize?: string; | ||
| autocapitalize?: string; | ||
| autoComplete?: string; | ||
| autocomplete?: string; | ||
| autoFocus?: boolean; | ||
| autofocus?: boolean | string; | ||
| capture?: string; | ||
@@ -884,2 +979,4 @@ checked?: boolean; | ||
| name?: string; | ||
| onSelect?: (event: Event) => void; | ||
| onselect?: (event: Event) => void; | ||
| pattern?: string; | ||
@@ -903,6 +1000,7 @@ placeholder?: string; | ||
| width?: number | string; | ||
| popoverTargetAction?: string; | ||
| popoverTargetElement?: Element | null; | ||
| popoverTarget?: string; | ||
| } | ||
| interface KeygenHTMLAttributes<T> extends HTMLAttributes<T> { | ||
| autoFocus?: boolean; | ||
| autofocus?: boolean | string; | ||
| challenge?: string; | ||
@@ -920,3 +1018,2 @@ disabled?: boolean; | ||
| htmlFor?: string; | ||
| htmlfor?: string; | ||
| } | ||
@@ -1032,3 +1129,2 @@ interface LiHTMLAttributes<T> extends HTMLAttributes<T> { | ||
| htmlFor?: string; | ||
| htmlfor?: string; | ||
| name?: string; | ||
@@ -1058,3 +1154,2 @@ } | ||
| interface SelectHTMLAttributes<T> extends HTMLAttributes<T> { | ||
| autoFocus?: boolean; | ||
| disabled?: boolean; | ||
@@ -1070,2 +1165,3 @@ form?: string; | ||
| interface SourceHTMLAttributes<T> extends HTMLAttributes<T> { | ||
| height?: number; | ||
| media?: string; | ||
@@ -1076,2 +1172,3 @@ sizes?: string; | ||
| type?: string; | ||
| width?: number; | ||
| } | ||
@@ -1092,4 +1189,4 @@ interface StyleHTMLAttributes<T> extends HTMLAttributes<T> { | ||
| interface TextareaHTMLAttributes<T> extends HTMLAttributes<T> { | ||
| autoFocus?: boolean; | ||
| autofocus?: boolean | string; | ||
| autoComplete?: string; | ||
| autocomplete?: string; | ||
| cols?: number; | ||
@@ -1103,2 +1200,4 @@ disabled?: boolean; | ||
| name?: string; | ||
| onSelect?: (event: Event) => void; | ||
| onselect?: (event: Event) => void; | ||
| placeholder?: string; | ||
@@ -1146,2 +1245,4 @@ readOnly?: boolean; | ||
| accessKey?: string; | ||
| autoFocus?: boolean; | ||
| autofocus?: boolean | string; | ||
| class?: string | { | ||
@@ -1158,2 +1259,3 @@ [className: string]: boolean; | ||
| id?: string; | ||
| inert?: boolean; | ||
| lang?: string; | ||
@@ -1167,2 +1269,3 @@ spellcheck?: 'true' | 'false' | any; | ||
| title?: string; | ||
| popover?: string | null; | ||
| inputMode?: string; | ||
@@ -1184,4 +1287,4 @@ inputmode?: string; | ||
| vocab?: string; | ||
| autoCapitalize?: any; | ||
| autocapitalize?: any; | ||
| autoCapitalize?: string; | ||
| autocapitalize?: string; | ||
| autoCorrect?: string; | ||
@@ -1254,3 +1357,3 @@ autocorrect?: string; | ||
| 'color-interpolation'?: number | string; | ||
| 'color-interpolation-filters'?: 'auto' | 's-rGB' | 'linear-rGB' | 'inherit'; | ||
| 'color-interpolation-filters'?: 'auto' | 'sRGB' | 'linearRGB'; | ||
| 'color-profile'?: number | string; | ||
@@ -1478,8 +1581,8 @@ 'color-rendering'?: number | string; | ||
| onPasteCapture?: (event: ClipboardEvent) => void; | ||
| onCompositionEnd?: (event: CompositionEvent) => void; | ||
| onCompositionEndCapture?: (event: CompositionEvent) => void; | ||
| onCompositionStart?: (event: CompositionEvent) => void; | ||
| onCompositionStartCapture?: (event: CompositionEvent) => void; | ||
| onCompositionUpdate?: (event: CompositionEvent) => void; | ||
| onCompositionUpdateCapture?: (event: CompositionEvent) => void; | ||
| onCompositionend?: (event: CompositionEvent) => void; | ||
| onCompositionendCapture?: (event: CompositionEvent) => void; | ||
| onCompositionstart?: (event: CompositionEvent) => void; | ||
| onCompositionstartCapture?: (event: CompositionEvent) => void; | ||
| onCompositionupdate?: (event: CompositionEvent) => void; | ||
| onCompositionupdateCapture?: (event: CompositionEvent) => void; | ||
| onFocus?: (event: FocusEvent) => void; | ||
@@ -1495,4 +1598,4 @@ onFocusCapture?: (event: FocusEvent) => void; | ||
| onChangeCapture?: (event: Event) => void; | ||
| onInput?: (event: Event) => void; | ||
| onInputCapture?: (event: Event) => void; | ||
| onInput?: (event: InputEvent) => void; | ||
| onInputCapture?: (event: InputEvent) => void; | ||
| onReset?: (event: Event) => void; | ||
@@ -1587,4 +1690,10 @@ onResetCapture?: (event: Event) => void; | ||
| onAnimationIterationCapture?: (event: AnimationEvent) => void; | ||
| onTransitionCancel?: (event: TransitionEvent) => void; | ||
| onTransitionCancelCapture?: (event: TransitionEvent) => void; | ||
| onTransitionEnd?: (event: TransitionEvent) => void; | ||
| onTransitionEndCapture?: (event: TransitionEvent) => void; | ||
| onTransitionRun?: (event: TransitionEvent) => void; | ||
| onTransitionRunCapture?: (event: TransitionEvent) => void; | ||
| onTransitionStart?: (event: TransitionEvent) => void; | ||
| onTransitionStartCapture?: (event: TransitionEvent) => void; | ||
| } | ||
@@ -1591,0 +1700,0 @@ } |
@@ -1,3 +0,1 @@ | ||
| module.exports = require('../dist/cjs/loader.cjs.js'); | ||
| module.exports.applyPolyfills = function() { return Promise.resolve() }; | ||
| module.exports = require('../dist/cjs/loader.cjs.js'); |
@@ -1,3 +0,1 @@ | ||
| module.exports = require('../dist/cjs/loader.cjs.js'); | ||
| module.exports.applyPolyfills = function() { return Promise.resolve() }; | ||
| module.exports = require('../dist/cjs/loader.cjs.js'); |
@@ -11,3 +11,15 @@ export * from '../dist/types/components'; | ||
| } | ||
| export declare function defineCustomElements(win?: Window, opts?: CustomElementsDefineOptions): Promise<void>; | ||
| export declare function defineCustomElements(win?: Window, opts?: CustomElementsDefineOptions): void; | ||
| /** | ||
| * @deprecated | ||
| */ | ||
| export declare function applyPolyfills(): Promise<void>; | ||
| /** | ||
| * Used to specify a nonce value that corresponds with an application's CSP. | ||
| * When set, the nonce will be added to all dynamically created script and style tags at runtime. | ||
| * Alternatively, the nonce value can be set on a meta tag in the DOM head | ||
| * (<meta name="csp-nonce" content="{ nonce value here }" />) which | ||
| * will result in the same behavior. | ||
| */ | ||
| export declare function setNonce(nonce: string): void; |
@@ -1,3 +0,1 @@ | ||
| export * from '../dist/esm/polyfills/index.js'; | ||
| export * from '../dist/esm/loader.js'; | ||
| export * from '../dist/esm/loader.js'; |
@@ -1,4 +0,2 @@ | ||
| (function(){if("undefined"!==typeof window&&void 0!==window.Reflect&&void 0!==window.customElements){var a=HTMLElement;window.HTMLElement=function(){return Reflect.construct(a,[],this.constructor)};HTMLElement.prototype=a.prototype;HTMLElement.prototype.constructor=HTMLElement;Object.setPrototypeOf(HTMLElement,a)}})(); | ||
| export * from '../dist/esm/polyfills/index.js'; | ||
| export * from '../dist/esm/loader.js'; | ||
| export * from '../dist/esm/loader.js'; |
| { | ||
| "name": "blog-articles-grid-loader", | ||
| "private": true, | ||
| "typings": "./index.d.ts", | ||
@@ -4,0 +5,0 @@ "module": "./index.js", |
| { | ||
| "name": "@everymatrix/blog-articles-grid", | ||
| "version": "1.44.0", | ||
| "version": "1.45.0", | ||
| "main": "./dist/index.cjs.js", | ||
@@ -12,2 +12,9 @@ "module": "./dist/index.js", | ||
| "unpkg": "./dist/blog-articles-grid/blog-articles-grid.esm.js", | ||
| "exports": { | ||
| ".": { | ||
| "import": "./dist/esm/blog-articles-grid.js", | ||
| "require": "./dist/cjs/blog-articles-grid.cjs" | ||
| }, | ||
| "./dist/cjs/blog-articles-grid.cjs.js": "./dist/cjs/blog-articles-grid.cjs.js" | ||
| }, | ||
| "files": [ | ||
@@ -21,5 +28,4 @@ "dist/", | ||
| "dependencies": { | ||
| "@everymatrix/helper-pagination": "^1.32.4", | ||
| "@stencil/core": "2.17.4" | ||
| "@everymatrix/helper-pagination": "1.0.72" | ||
| } | ||
| } |
New alerts
Dynamic require
Supply chain riskDynamic require can indicate the package is performing dangerous or unsafe dynamic code execution.
Found 1 instance in 1 package
Improved metrics
- Dependency count
- decreased by-50%
1
- Number of low supply chain risk alerts
- decreased by-9.09%
10
- Number of medium supply chain risk alerts
- decreased by-33.33%
8
Worsened metrics
- Total package byte prevSize
- decreased by-33.92%
312019
- Number of package files
- decreased by-10.2%
44
- Lines of code
- decreased by-16.51%
7119
Dependency changes
+ Added@everymatrix/helper-pagination@1.0.72(transitive)
- Removed@stencil/core@2.17.4
- Removed@everymatrix/helper-pagination@1.51.0(transitive)
- Removed@stencil/core@2.17.4(transitive)