@everymatrix/blog-articles-grid 1.98.19 → 1.98.21

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

@@ -1 +1 @@
-import{r as t,c as i,h as n}from"./index-4af8e775.js";const e={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"}},s=(t,i)=>e[void 0!==i&&i in e?i:"en"][t],o="__WIDGET_GLOBAL_STYLE_CACHE__";function r(t,i){if(t){const n=document.createElement("style");n.innerHTML=i,t.appendChild(n)}}function a(t,i){if(!t||!i)return;const n=new URL(i);fetch(n.href).then((t=>t.text())).then((i=>{const n=document.createElement("style");n.innerHTML=i,t&&t.appendChild(n)})).catch((t=>{console.error("There was an error while trying to load client styling from URL",t)}))}function h(t,i,n,e=!1){if(!window.emMessageBus)return;if(!("adoptedStyleSheets"in Document.prototype)||!e)return n=function(t,i){const n=document.createElement("style");return window.emMessageBus.subscribe(i,(i=>{t&&(n.innerHTML=i,t.appendChild(n))}))}(t,i),n;window[o]||(window[o]={}),n=function(t,i){return window.emMessageBus.subscribe(i,(n=>{if(!t)return;const e=t.getRootNode(),s=window[o];let r=s[i]&&s[i].sheet;r?s[i].refCount=s[i].refCount+1:(r=new CSSStyleSheet,r.replaceSync(n),s[i]={sheet:r,refCount:1});const a=e.adoptedStyleSheets||[];a.includes(r)||(e.adoptedStyleSheets=[...a,r])}))}(t,i);const s=n.unsubscribe.bind(n);return n.unsubscribe=()=>{if(window[o][i]){const t=window[o][i];t.refCount>1?t.refCount=t.refCount-1:delete window[o][i]}s()},n}function l(t){return t.includes("android")}const d=class{constructor(e){t(this,e),this.articleActionButton=i(this,"articleActionButton",7),this.lastPage=1,this.isInitialized=!1,this.paginationDefaultStyling="\n  div#PaginationContainer {\n    justify-content: right;\n  }\n  .LeftItems button .NavigationButton {\n    display: none;\n  }\n  .LeftItems button:after, .RightItems button:after {\n    padding: 7px 12px;\n    font-size: 18px;\n    font-weight: 700;\n    line-height: 46px;\n  }\n  .LeftItems button:after {\n    content: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1.2em' viewBox='0 0 320 512'%3E%3C!--! Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --%3E%3Cpath d='M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l192 192c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256 246.6 86.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-192 192z'/%3E%3C/svg%3E\");\n  }\n  .RightItems button:after {\n    content: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1.2em' viewBox='0 0 320 512'%3E%3C!--! Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --%3E%3Cpath d='M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z'/%3E%3C/svg%3E\");\n    display: block;\n    height: 38px;\n  }\n  div.LeftItems button, div.RightItems button {\n    width: unset;\n    height: 40px;\n    background-color: #fff;\n    color: #000;\n    border: 1px solid #000;\n    overflow: hidden;\n    &:disabled {\n      background-color: #989898;\n    }\n  }\n  div.LeftItems button {\n    min-width: 60px;\n    border-radius: 20px 0 0 20px;\n    border-right: 0;\n  }\n  div.RightItems button {\n    display: flex;\n    min-width: 100px;\n    justify-content: space-evenly;\n    align-items: center;\n    border-radius: 0 20px 20px 0;\n    text-transform: none;\n  }\n  .RightItems button .NavigationButton {\n    padding: 12px 0 12px 12px;\n    font-weight: 700;\n  }",this.setImage=t=>{let i="";switch(this.device){case"mobile":i=t.sources[0].pictureSource;break;case"tablet":i=t.sources[1].pictureSource;break;case"desktop":i=t.sources[2].pictureSource}return i},this.renderContentConditionally=t=>t&&(!t.includes("<bannermatrix-banner")||this.bannerMatrixReady)?n("div",{class:"BlogContent",innerHTML:t}):null,this.cmsEndpoint=void 0,this.language="en",this.userRoles="everyone",this.cmsEnv="stage",this.mbSource=void 0,this.clientStyling="",this.clientStylingUrl="",this.showPublishingDate=!0,this.showImage=!0,this.showTitle=!0,this.showContent=!0,this.showButton=!0,this.hideError=!1,this.usePostmessage=void 0,this.postMessageEvent="",this.blogsLimit="0",this.paginationActive=void 0,this.arrowsActive=!0,this.secondaryArrowsActive=!1,this.numberedNavActive=!1,this.intlDateTimeFormat="",this.page="1",this.eventId=void 0,this.paginationBlogList={offset:0},this.currentPage=0,this.hasErrors=!1,this.isLoading=!0,this.bannerMatrixReady=!1,this.nextPage="",this.previousPage="",this.device="mobile",this.displayedBlogResponse=void 0,this.paginationBlogResponse=void 0,this.allBlogResponse=void 0,this.totalBlogs=0}getArticleId(t,i,n){var e;this.usePostmessage?window.postMessage({type:this.postMessageEvent,postId:t.toString(),slug:i,customPath:n}):null===(e=this.articleActionButton)||void 0===e||e.emit({postId:t.toString(),slug:i,customPath:n})}handleBannerReady(){this.bannerMatrixReady=!0}watchEndpoint(t,i){this.isInitialized&&(this.currentPage=parseInt(this.page)-1,(t||""===t)&&t!=i&&this.cmsEndpoint&&this.language&&this.getBlogArticleGrid())}handleClientStylingChange(t,i){t!==i&&r(this.stylingContainer,this.clientStyling)}handleClientStylingChangeURL(t,i){t!==i&&this.clientStylingUrl&&a(this.stylingContainer,this.clientStylingUrl)}hpPageChange(t){var i,n;this.paginationBlogList=t.detail,this.currentPage=Math.floor((null===(i=this.paginationBlogList)||void 0===i?void 0:i.offset)/(null===(n=this.paginationBlogList)||void 0===n?void 0:n.limit)),this.page&&(this.currentPage=this.currentPage+ +this.page-1),this.currentPage+1>this.lastPage?this.nextPage=null:this.currentPage<0?this.previousPage=null:(window.postMessage({type:"BlogArticlesGridActivePagination",currentPage:this.currentPage},window.location.href),this.getBlogArticleGrid(!0))}sortArticlesByDate(t){return t.sort(((t,i)=>t.publishingDate>i.publishingDate?-1:t.publishingDate<i.publishingDate?1:0)),t}findLatestFeatured(t){let i=t.filter((t=>t.isFeaturedPost));return 0===i.length?null:(i=this.sortArticlesByDate(i),i[0])}moveLatestFeatureToStart(t,i){if(!i)return t;const n=t.indexOf(i);return-1!==n&&(t.splice(n,1),t.unshift(i)),t}async fetchBlogPosts(t,i=!1){const n=new URL(`${this.cmsEndpoint}/${this.language}/blog-posts`);return n.searchParams.append("per_page",i?"300":this.blogsLimit),n.searchParams.append("page",`${t||this.currentPage+1}`),n.searchParams.append("env",this.cmsEnv),n.searchParams.append("userRoles",this.userRoles),n.searchParams.append("device",(()=>{const t=(()=>{let t=window.navigator.userAgent;return t.toLowerCase().match(/android/i)?"Android":t.toLowerCase().match(/iphone/i)?"iPhone":t.toLowerCase().match(/ipad|ipod/i)?"iPad":"PC"})();if(t){if("PC"===t)return"dk";if("iPad"===t||"iPhone"===t)return"mtWeb"}return"mtWeb"})()),fetch(n.href).then((t=>{if(t.status>=300)throw this.hasErrors=!0,new Error("There was an error while fetching the data");return t.json()})).then((t=>{let n=t.items;const e=this.findLatestFeatured(n);return n=this.sortArticlesByDate(n),n=this.moveLatestFeatureToStart(n,e),n=n.map((t=>Object.assign(Object.assign({},t),{publishingDate:new Date(t.publishingDate).toLocaleDateString()}))),t=Object.assign(Object.assign({},t),{items:n}),i?this.allBlogResponse=t:this.paginationBlogResponse=t,t})).catch((t=>(this.hasErrors=!0,console.log("Error",t),{})))}async getBlogArticleGrid(t=!1,i){var n,e,s,o,r,a,h;this.isLoading=!0;try{let l;if(this.eventId&&this.eventId.length>0){const o=(null===(n=this.allBlogResponse)||void 0===n?void 0:n.items)?this.allBlogResponse:await this.fetchBlogPosts(1,!0),r=o.items.filter((({eventIds:t})=>{var i;return t.includes(null!==(i=this.eventId)&&void 0!==i?i:"-")}));r.length?(l=Object.assign(Object.assign({},o),{items:r,total:Math.min(parseInt(this.blogsLimit),r.length)}),window.postMessage({type:"OP:blogReady",payload:{hasBlog:!0}},"*")):(window.postMessage({type:"OP:blogReady",payload:{hasBlog:!1}},"*"),l=(null===(s=null===(e=this.paginationBlogResponse)||void 0===e?void 0:e.items)||void 0===s?void 0:s.length)&&!t?this.paginationBlogResponse:await this.fetchBlogPosts(i))}else l=(null===(r=null===(o=this.paginationBlogResponse)||void 0===o?void 0:o.items)||void 0===r?void 0:r.length)&&!t?this.paginationBlogResponse:await this.fetchBlogPosts(i);this.displayedBlogResponse=l,this.totalBlogs=l.total,this.lastPage=+((null===(h=null===(a=l.pages.last)||void 0===a?void 0:a.match(/&page=(\d+)/))||void 0===h?void 0:h[1])||1),this.nextPage=l.pages.next,this.previousPage=l.pages.previous,this.isLoading=!1,this.hasErrors=!1}catch(t){this.hasErrors=!0,console.log("Error",t)}}componentWillLoad(){this.cmsEndpoint&&this.language&&this.blogsLimit&&(this.page?(this.currentPage=this.currentPage+ +this.page-1,this.getBlogArticleGrid(!1,+this.page)):this.getBlogArticleGrid())}handleClientStyling(){void 0===window.emMessageBus?(this.clientStyling&&r(this.stylingContainer,this.clientStyling),this.clientStylingUrl&&a(this.stylingContainer,this.clientStylingUrl)):this.stylingSubscription=h(this.stylingContainer,`${this.mbSource}.Style`,this.stylingSubscription,!0)}componentDidLoad(){this.handleClientStyling(),this.isInitialized=!0,window.postMessage({type:"BlogArticlesGridLoaded"},window.location.href),this.device=((t=!1)=>{if("undefined"==typeof window||"undefined"==typeof navigator)return"desktop";const i=navigator.userAgent.toLowerCase(),n=window.innerWidth;if(function(t){return!!t.includes("ipad")||t.includes("macintosh")&&navigator.maxTouchPoints>0}(i))return"tablet";if(function(t){return t.includes("iphone")||t.includes("ipod")}(i))return"mobile";if(function(t,i){return l(t)&&(t.includes("mobile")||t.includes("mobi")||i<=599)}(i,n))return"mobile";if(function(t,i){return l(t)&&!t.includes("mobile")&&!t.includes("mobi")&&i>599}(i,n))return"tablet";if(t){if(n<=599)return"mobile";if(n<=1099)return"tablet"}return"desktop"})()}disconnectedCallback(){this.stylingSubscription&&this.stylingSubscription.unsubscribe()}parseDate(t){const i=new Date(t);if(i instanceof Date&&!Number.isNaN(i.getTime()))return i;const[n,e,s]=t.trim().split("/").map(Number);return new Date(s,e-1,n)}formatDate(t){const i=this.parseDate(t);return new Intl.DateTimeFormat(this.intlDateTimeFormat).format(i)}render(){if(this.hasErrors)return n("div",{class:"BlogsContainer"},!this.hideError&&n("div",{class:"ErrorMessage"},s("error",this.language)));const t=[];for(let i=0;i<parseInt(this.blogsLimit);i++)t.push(n("div",{class:"GridContainer FeaturedPost Skeleton"},n("div",{class:"GridWrapper"},n("div",{class:"GridSector"},n("div",{class:"VisualContent LoadingImage"})),n("div",{class:"GridSector"},n("div",{class:"BlogTitle LoadingStripe LoadingSmallStripe"}),n("div",{class:"BlogDetails LoadingStripe LoadingMediumStripe"}),n("div",{class:"BlogLink LoadingStripe LoadingLongStripe"})))));const i=Boolean(this.paginationActive)&&this.totalBlogs>+this.blogsLimit,e=this.mbSource?void 0:this.clientStyling||this.paginationDefaultStyling;return n("div",{ref:t=>this.stylingContainer=t},n("div",{class:"BlogPageContainer"},n("div",{class:"BlogGridPaginationWrapper"},i&&n("helper-pagination",{"next-page":this.nextPage,"prev-page":this.previousPage,offset:this.paginationBlogList.offset,limit:parseInt(this.blogsLimit,10),total:this.totalBlogs,language:this.language,"mb-source":this.mbSource,"client-styling":e,"client-styling-url":this.clientStylingUrl,"arrows-active":this.arrowsActive,"secondary-arrows-active":this.secondaryArrowsActive,"numbered-nav-active":this.numberedNavActive})),!this.isLoading&&n("div",{class:`GridContainerWrapper BlogPage-${this.currentPage} ${this.device}`},this.displayedBlogResponse&&this.displayedBlogResponse.items.map((t=>{var i,e;return n("div",{key:t.postID,class:t.isFeaturedPost?"GridContainer FeaturedPost":"GridContainer"},n("div",{class:"GridWrapper"},n("div",{class:"GridSector"},this.showPublishingDate&&n("div",{class:"BlogDate"},this.formatDate(null==t?void 0:t.publishingDate)),this.showImage&&(null===(i=t.image)||void 0===i?void 0:i.src)?n("div",{class:"VisualContent",style:{background:`url(${this.setImage(t.image)}) no-repeat center center / cover`}}):(null===(e=t.video)||void 0===e?void 0:e.sources[this.device])?n("video",{class:"VisualContent",src:t.video.sources[this.device],controls:!0}):n("h1",{class:"VisualContent",style:{color:"#fff"}},"No Image")),n("div",{class:"GridSector"},this.showTitle&&n("div",{class:"BlogTitle"},null==t?void 0:t.title),this.showContent&&this.renderContentConditionally(null==t?void 0:t.descriptionPreview),this.showButton&&n("div",{class:"BlogLink"},n("button",{onClick:()=>this.getArticleId(null==t?void 0:t.postID,null==t?void 0:t.slug,null==t?void 0:t.customPath)},s("readmore",this.language))))))}))),this.isLoading&&n("div",{class:"GridContainerWrapper LoadingGrid"},t)))}static get watchers(){return{page:["watchEndpoint"],hasErrors:["watchEndpoint"],cmsEndpoint:["watchEndpoint"],language:["watchEndpoint"],cmsEnv:["watchEndpoint"],userRoles:["watchEndpoint"],blogsLimit:["watchEndpoint"],eventId:["watchEndpoint"],clientStyling:["handleClientStylingChange"],clientStylingUrl:["handleClientStylingChangeURL"]}}};d.style=":host {\n  display: block;\n}\n\n.BlogPageContainer {\n  background: #0A0A17;\n  padding: 20px;\n}\n\n.GridContainerWrapper {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: 20px;\n}\n\n.BlogPage-0 .GridContainer.FeaturedPost:first-child {\n  width: 100%;\n  flex-basis: auto;\n}\n\n.GridContainer {\n  container-type: inline-size;\n  container-name: article;\n  border-radius: 15px;\n  color: #000;\n  overflow: hidden;\n}\n.GridContainer.FeaturedPost:first-child {\n  grid-column: 1/-1;\n  width: 100%;\n}\n.GridContainer .GridWrapper {\n  display: flex;\n  flex-direction: row;\n  height: 280px;\n  background: var(--emw--color-white, #FFFFFF);\n}\n.GridContainer .GridSector {\n  flex-basis: 50%;\n  position: relative;\n}\n.GridContainer .GridSector:first-of-type {\n  height: 280px;\n  display: flex;\n}\n.GridContainer .GridSector:last-of-type {\n  padding: 20px 40px;\n  display: flex;\n  flex-direction: column;\n}\n.GridContainer .VisualContent {\n  width: 100%;\n}\n.GridContainer .BlogDate {\n  position: absolute;\n  bottom: 0px;\n  left: 30px;\n  font-size: 12px;\n  border-radius: 5px 5px 0 0;\n  padding: 10px;\n  width: fit-content;\n  text-align: center;\n  color: var(--emw--color-white, #FFFFFF);\n  background-color: #CD0B5E;\n  z-index: 1;\n}\n.GridContainer .BlogTitle {\n  font-size: 24px;\n  color: #000;\n  padding-bottom: 10px;\n}\n.GridContainer .BlogContent {\n  display: -webkit-box;\n  font-size: 14px;\n  line-height: 1.2em;\n  -webkit-line-clamp: 6;\n  color: #000;\n  -webkit-box-orient: vertical;\n  box-sizing: border-box;\n  text-overflow: ellipsis;\n  overflow: hidden;\n}\n.GridContainer .BlogLink {\n  color: #000;\n  position: absolute;\n  bottom: 16px;\n}\n.GridContainer .BlogLink button {\n  font-size: 14px;\n  border: none;\n  padding: 0;\n  background: none;\n  color: #22B04E;\n  cursor: pointer;\n}\n\n@container article (max-width: 550px) {\n  .GridContainer .GridWrapper {\n    height: 380px;\n    flex-direction: column;\n  }\n  .GridContainer .GridWrapper .GridSector:first-of-type {\n    height: 120px;\n    flex-shrink: 0;\n    flex-basis: 150px;\n  }\n  .GridContainer .GridWrapper .GridSector:last-of-type {\n    padding: 20px 20px 40px;\n  }\n}\n.LoadingImage {\n  width: 100%;\n  height: 100%;\n  background-color: var(--emw--color-gray-100, #E6E6E6);\n}\n\n.LoadingStripe {\n  border: 1px solid var(--emw--color-white, #FFFFFF);\n  height: 20%;\n  background-color: var(--emw--color-gray-100, #E6E6E6);\n  margin-bottom: 5px;\n}\n\n.LoadingSmallStripe {\n  width: 40%;\n}\n\n.LoadingMediumStripe {\n  width: 70%;\n}\n\n.BlogLink.LoadingLongStripe {\n  position: static;\n  width: 100%;\n}\n\n.GridContainerWrapper.LoadingGrid .GridSector {\n  justify-content: space-around;\n}\n\n.GridContainerWrapper.LoadingGrid .LoadingImage, .GridContainerWrapper.LoadingGrid .LoadingStripe {\n  animation: pulsatingLoader 2s ease-in-out 0s infinite reverse;\n  -webkit-animation: pulsatingLoader 2s ease-in-out 0s infinite reverse;\n}\n\n@keyframes pulsatingLoader {\n  0% {\n    opacity: 0.5;\n  }\n  50% {\n    opacity: 1;\n  }\n  100% {\n    opacity: 0.5;\n  }\n}\n@-webkit-keyframes pulsatingLoader {\n  0% {\n    opacity: 0.5;\n  }\n  50% {\n    opacity: 1;\n  }\n  100% {\n    opacity: 0.5;\n  }\n}";const c=t=>!!(t.toLowerCase().match(/android/i)||t.toLowerCase().match(/blackberry|bb/i)||t.toLowerCase().match(/iphone|ipad|ipod/i)||t.toLowerCase().match(/windows phone|windows mobile|iemobile|wpdesktop/i)),g={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"}},p=(t,i)=>g[void 0!==i&&i in g?i:"en"][t],u=class{constructor(n){t(this,n),this.hpPageChange=i(this,"hpPageChange",7),this.userAgent=window.navigator.userAgent,this.currentPage=1,this.navigateTo=t=>{var i;switch(t){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-=5*this.limitInt,this.offsetInt=this.offsetInt<=0?0:this.offsetInt;break;case"fivePagesForward":this.offsetInt+=5*this.limitInt,this.offsetInt=this.offsetInt/this.limitInt>=this.endInt?this.endInt*this.limitInt:this.offsetInt}this.previousPage=!!this.offsetInt,null===(i=this.hpPageChange)||void 0===i||i.emit({offset:this.offsetInt,limit:this.limitInt,total:this.totalInt})},this.paginationNavigation=(t,i)=>{var n;this.previousPage=!0,isNaN(t)?0===i&&this.currentPage<=4?this.navigateTo("firstPage"):0===i&&this.currentPage>4?this.navigateTo("fivePagesBack"):4===i&&this.endInt-this.currentPage>=2&&this.navigateTo("fivePagesForward"):1===t?(this.offsetInt=t-1,this.previousPage=!1):this.offsetInt=(t-1)*this.limitInt,null===(n=this.hpPageChange)||void 0===n||n.emit({offset:this.offsetInt,limit:this.limitInt,total:this.totalInt})},this.nextPage="",this.prevPage="",this.offset=0,this.limit=1,this.total=1,this.language="en",this.mbSource=void 0,this.clientStyling="",this.clientStylingUrl="",this.arrowsActive=!0,this.secondaryArrowsActive=!1,this.numberedNavActive=!1,this.offsetInt=0,this.lastPage=!1,this.previousPage=!1,this.limitInt=0,this.totalInt=0,this.pagesArray=[],this.endInt=0}handleClientStylingChange(t,i){t!==i&&r(this.stylingContainer,this.clientStyling)}handleClientStylingChangeURL(t,i){t!==i&&this.clientStylingUrl&&a(this.stylingContainer,this.clientStylingUrl)}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),1==this.currentPage||2==this.currentPage?(this.pagesArray=Array.from({length:4},((t,i)=>i+1)),this.pagesArray.push("...")):this.currentPage>=3&&this.endInt-this.currentPage>=2?(this.pagesArray=Array.from({length:3},((t,i)=>this.currentPage+i-1)),this.pagesArray.push("..."),this.pagesArray.unshift("...")):this.endInt-this.currentPage<3&&(this.pagesArray=Array.from({length:4},((t,i)=>this.endInt-2+i)),this.pagesArray.unshift("..."))}handleClientStyling(){void 0===window.emMessageBus?(this.clientStyling&&r(this.stylingContainer,this.clientStyling),this.clientStylingUrl&&a(this.stylingContainer,this.clientStylingUrl)):this.stylingSubscription=h(this.stylingContainer,`${this.mbSource}.Style`,this.stylingSubscription,!0)}componentDidLoad(){this.handleClientStyling()}disconnectedCallback(){this.stylingSubscription&&this.stylingSubscription.unsubscribe()}render(){let t=n("ul",{class:"PaginationArea"},this.pagesArray.map(((t,i)=>n("li",{class:"PaginationItem"+(t===this.currentPage?" ActiveItem":" ")+" "+(c(this.userAgent)?"MobileButtons":"")},n("button",{disabled:t===this.currentPage,onClick:this.paginationNavigation.bind(this,t,i)},n("span",null,t)))))),i=n("button",{disabled:!this.prevPage,onClick:this.navigateTo.bind(this,"firstPage")},n("span",{class:"NavigationButton"},p("firstPage",this.language)),n("span",{class:"NavigationIcon"})),e=n("div",{class:"LeftItems"},this.secondaryArrowsActive&&i,n("button",{disabled:!this.prevPage,onClick:this.navigateTo.bind(this,"previousPage")},n("span",{class:"NavigationButton"},p("previousPage",this.language)),n("span",{class:"NavigationIcon"})));c(this.userAgent)&&(e=n("div",{class:"LeftItems"},n("button",{disabled:!this.prevPage,onClick:this.navigateTo.bind(this,"previousPage")},n("span",{class:"NavigationButton"},p("previousPage",this.language)),n("span",{class:"NavigationIcon"}))));let s=n("button",{disabled:!this.nextPage,onClick:this.navigateTo.bind(this,"lastPage")},n("span",{class:"NavigationButton"},p("lastPage",this.language)),n("span",{class:"NavigationIcon"})),o=n("div",{class:"RightItems"},n("button",{disabled:!this.nextPage,onClick:this.navigateTo.bind(this,"nextPage")},n("span",{class:"NavigationButton"},p("nextPage",this.language)),n("span",{class:"NavigationIcon"})),this.secondaryArrowsActive&&s);return c(this.userAgent)&&(o=n("div",{class:"RightItems"},n("button",{disabled:!this.nextPage,onClick:this.navigateTo.bind(this,"nextPage")},n("span",{class:"NavigationButton"},p("nextPage",this.language)),n("span",{class:"NavigationIcon"})))),n("div",{id:"PaginationContainer",ref:t=>this.stylingContainer=t},this.arrowsActive&&e,this.numberedNavActive&&t,this.arrowsActive&&o)}static get watchers(){return{clientStyling:["handleClientStylingChange"],clientStylingUrl:["handleClientStylingChangeURL"]}}};u.style='@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}}';export{d as blog_articles_grid,u as helper_pagination}
+import{r as t,c as i,h as n}from"./index-4af8e775.js";const e={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"}},s=(t,i)=>e[void 0!==i&&i in e?i:"en"][t],o="__WIDGET_GLOBAL_STYLE_CACHE__";function r(t,i){if(t){const n=document.createElement("style");n.innerHTML=i,t.appendChild(n)}}function a(t,i){if(!t||!i)return;const n=new URL(i);fetch(n.href).then((t=>t.text())).then((i=>{const n=document.createElement("style");n.innerHTML=i,t&&t.appendChild(n)})).catch((t=>{console.error("There was an error while trying to load client styling from URL",t)}))}function h(t,i,n,e=!1){if(!window.emMessageBus)return;if(!("adoptedStyleSheets"in Document.prototype)||!e)return n=function(t,i){const n=document.createElement("style");return window.emMessageBus.subscribe(i,(i=>{t&&(n.innerHTML=i,t.appendChild(n))}))}(t,i),n;window[o]||(window[o]={}),n=function(t,i){return window.emMessageBus.subscribe(i,(n=>{if(!t)return;const e=t.getRootNode(),s=window[o];let r=s[i]&&s[i].sheet;r?s[i].refCount=s[i].refCount+1:(r=new CSSStyleSheet,r.replaceSync(n),s[i]={sheet:r,refCount:1});const a=e.adoptedStyleSheets||[];a.includes(r)||(e.adoptedStyleSheets=[...a,r])}))}(t,i);const s=n.unsubscribe.bind(n);return n.unsubscribe=()=>{if(window[o][i]){const t=window[o][i];t.refCount>1?t.refCount=t.refCount-1:delete window[o][i]}s()},n}function d(t){return t.includes("android")}const l=class{constructor(e){t(this,e),this.articleActionButton=i(this,"articleActionButton",7),this.lastPage=1,this.isInitialized=!1,this.paginationDefaultStyling="\n  div#PaginationContainer {\n    justify-content: right;\n  }\n  .LeftItems button .NavigationButton {\n    display: none;\n  }\n  .LeftItems button:after, .RightItems button:after {\n    padding: 7px 12px;\n    font-size: 18px;\n    font-weight: 700;\n    line-height: 46px;\n  }\n  .LeftItems button:after {\n    content: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1.2em' viewBox='0 0 320 512'%3E%3C!--! Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --%3E%3Cpath d='M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l192 192c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256 246.6 86.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-192 192z'/%3E%3C/svg%3E\");\n  }\n  .RightItems button:after {\n    content: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1.2em' viewBox='0 0 320 512'%3E%3C!--! Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --%3E%3Cpath d='M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z'/%3E%3C/svg%3E\");\n    display: block;\n    height: 38px;\n  }\n  div.LeftItems button, div.RightItems button {\n    width: unset;\n    height: 40px;\n    background-color: #fff;\n    color: #000;\n    border: 1px solid #000;\n    overflow: hidden;\n    &:disabled {\n      background-color: #989898;\n    }\n  }\n  div.LeftItems button {\n    min-width: 60px;\n    border-radius: 20px 0 0 20px;\n    border-right: 0;\n  }\n  div.RightItems button {\n    display: flex;\n    min-width: 100px;\n    justify-content: space-evenly;\n    align-items: center;\n    border-radius: 0 20px 20px 0;\n    text-transform: none;\n  }\n  .RightItems button .NavigationButton {\n    padding: 12px 0 12px 12px;\n    font-weight: 700;\n  }",this.renderContentConditionally=t=>t&&(!t.includes("<bannermatrix-banner")||this.bannerMatrixReady)?n("p",{class:"BlogContent",innerHTML:t}):null,this.cmsEndpoint=void 0,this.language="en",this.userRoles="everyone",this.cmsEnv="stage",this.mbSource=void 0,this.clientStyling="",this.clientStylingUrl="",this.showPublishingDate=!0,this.showImage=!0,this.showTitle=!0,this.showContent=!0,this.showButton=!0,this.hideError=!1,this.usePostmessage=void 0,this.postMessageEvent="",this.blogsLimit="0",this.paginationActive=void 0,this.arrowsActive=!0,this.secondaryArrowsActive=!1,this.numberedNavActive=!1,this.intlDateTimeFormat="",this.page="1",this.eventId=void 0,this.paginationBlogList={offset:0},this.currentPage=0,this.hasErrors=!1,this.isLoading=!0,this.bannerMatrixReady=!1,this.nextPage="",this.previousPage="",this.device="mobile",this.displayedBlogResponse=void 0,this.paginationBlogResponse=void 0,this.allBlogResponse=void 0,this.totalBlogs=0}getArticleId(t,i){var n;if(0!==t.button||t.metaKey||t.ctrlKey||t.shiftKey||t.altKey)return;const e={postId:i.postID.toString(),slug:i.slug,customPath:i.customPath};this.usePostmessage?(t.preventDefault(),window.postMessage(Object.assign({type:this.postMessageEvent},e))):null===(n=this.articleActionButton)||void 0===n||n.emit(e)}handleBannerReady(){this.bannerMatrixReady=!0}watchEndpoint(t,i){this.isInitialized&&(this.currentPage=parseInt(this.page)-1,(t||""===t)&&t!=i&&this.cmsEndpoint&&this.language&&this.getBlogArticleGrid())}handleClientStylingChange(t,i){t!==i&&r(this.stylingContainer,this.clientStyling)}handleClientStylingChangeURL(t,i){t!==i&&this.clientStylingUrl&&a(this.stylingContainer,this.clientStylingUrl)}hpPageChange(t){var i,n;this.paginationBlogList=t.detail,this.currentPage=Math.floor((null===(i=this.paginationBlogList)||void 0===i?void 0:i.offset)/(null===(n=this.paginationBlogList)||void 0===n?void 0:n.limit)),this.page&&(this.currentPage=this.currentPage+ +this.page-1),this.currentPage+1>this.lastPage?this.nextPage=null:this.currentPage<0?this.previousPage=null:(window.postMessage({type:"BlogArticlesGridActivePagination",currentPage:this.currentPage},window.location.href),this.getBlogArticleGrid(!0))}sortArticlesByDate(t){return t.sort(((t,i)=>t.publishingDate>i.publishingDate?-1:t.publishingDate<i.publishingDate?1:0)),t}findLatestFeatured(t){let i=t.filter((t=>t.isFeaturedPost));return 0===i.length?null:(i=this.sortArticlesByDate(i),i[0])}moveLatestFeatureToStart(t,i){if(!i)return t;const n=t.indexOf(i);return-1!==n&&(t.splice(n,1),t.unshift(i)),t}async fetchBlogPosts(t,i=!1){const n=new URL(`${this.cmsEndpoint}/${this.language}/blog-posts`);return n.searchParams.append("per_page",i?"300":this.blogsLimit),n.searchParams.append("page",`${t||this.currentPage+1}`),n.searchParams.append("env",this.cmsEnv),n.searchParams.append("userRoles",this.userRoles),n.searchParams.append("device",(()=>{const t=(()=>{let t=window.navigator.userAgent;return t.toLowerCase().match(/android/i)?"Android":t.toLowerCase().match(/iphone/i)?"iPhone":t.toLowerCase().match(/ipad|ipod/i)?"iPad":"PC"})();if(t){if("PC"===t)return"dk";if("iPad"===t||"iPhone"===t)return"mtWeb"}return"mtWeb"})()),fetch(n.href).then((t=>{if(t.status>=300)throw this.hasErrors=!0,new Error("There was an error while fetching the data");return t.json()})).then((t=>{let n=t.items;const e=this.findLatestFeatured(n);return n=this.sortArticlesByDate(n),n=this.moveLatestFeatureToStart(n,e),t=Object.assign(Object.assign({},t),{items:n}),i?this.allBlogResponse=t:this.paginationBlogResponse=t,t})).catch((t=>(this.hasErrors=!0,console.log("Error",t),{})))}async getBlogArticleGrid(t=!1,i){var n,e,s,o,r,a,h;this.isLoading=!0;try{let d;if(this.eventId&&this.eventId.length>0){const o=(null===(n=this.allBlogResponse)||void 0===n?void 0:n.items)?this.allBlogResponse:await this.fetchBlogPosts(1,!0),r=o.items.filter((({eventIds:t})=>{var i;return t.includes(null!==(i=this.eventId)&&void 0!==i?i:"-")}));r.length?(d=Object.assign(Object.assign({},o),{items:r,total:Math.min(parseInt(this.blogsLimit),r.length)}),window.postMessage({type:"OP:blogReady",payload:{hasBlog:!0}},"*")):(window.postMessage({type:"OP:blogReady",payload:{hasBlog:!1}},"*"),d=(null===(s=null===(e=this.paginationBlogResponse)||void 0===e?void 0:e.items)||void 0===s?void 0:s.length)&&!t?this.paginationBlogResponse:await this.fetchBlogPosts(i))}else d=(null===(r=null===(o=this.paginationBlogResponse)||void 0===o?void 0:o.items)||void 0===r?void 0:r.length)&&!t?this.paginationBlogResponse:await this.fetchBlogPosts(i);this.displayedBlogResponse=d,this.totalBlogs=d.total,this.lastPage=+((null===(h=null===(a=d.pages.last)||void 0===a?void 0:a.match(/&page=(\d+)/))||void 0===h?void 0:h[1])||1),this.nextPage=d.pages.next,this.previousPage=d.pages.previous,this.isLoading=!1,this.hasErrors=!1}catch(t){this.hasErrors=!0,console.log("Error",t)}}componentWillLoad(){this.cmsEndpoint&&this.language&&this.blogsLimit&&(this.page?(this.currentPage=this.currentPage+ +this.page-1,this.getBlogArticleGrid(!1,+this.page)):this.getBlogArticleGrid())}handleClientStyling(){void 0===window.emMessageBus?(this.clientStyling&&r(this.stylingContainer,this.clientStyling),this.clientStylingUrl&&a(this.stylingContainer,this.clientStylingUrl)):this.stylingSubscription=h(this.stylingContainer,`${this.mbSource}.Style`,this.stylingSubscription,!0)}componentDidLoad(){this.handleClientStyling(),this.isInitialized=!0,window.postMessage({type:"BlogArticlesGridLoaded"},window.location.href),this.device=((t=!1)=>{if("undefined"==typeof window||"undefined"==typeof navigator)return"desktop";const i=navigator.userAgent.toLowerCase(),n=window.innerWidth;if(function(t){return!!t.includes("ipad")||t.includes("macintosh")&&navigator.maxTouchPoints>0}(i))return"tablet";if(function(t){return t.includes("iphone")||t.includes("ipod")}(i))return"mobile";if(function(t,i){return d(t)&&(t.includes("mobile")||t.includes("mobi")||i<=599)}(i,n))return"mobile";if(function(t,i){return d(t)&&!t.includes("mobile")&&!t.includes("mobi")&&i>599}(i,n))return"tablet";if(t){if(n<=599)return"mobile";if(n<=1099)return"tablet"}return"desktop"})()}disconnectedCallback(){this.stylingSubscription&&this.stylingSubscription.unsubscribe()}setImage(t){var i,n;return(null===(n=null===(i=t.sources)||void 0===i?void 0:i["mobile"===this.device?0:"tablet"===this.device?1:2])||void 0===n?void 0:n.pictureSource)||t.src}parseDate(t){const i=new Date(t);if(i instanceof Date&&!Number.isNaN(i.getTime()))return i;const[n,e,s]=t.trim().split("/").map(Number);return new Date(s,e-1,n)}formatDate(t){const i=this.parseDate(t);return new Intl.DateTimeFormat(this.intlDateTimeFormat).format(i)}render(){if(this.hasErrors)return n("div",{class:"BlogsContainer"},!this.hideError&&n("div",{class:"ErrorMessage"},s("error",this.language)));const t=[];for(let i=0;i<parseInt(this.blogsLimit);i++)t.push(n("div",{class:"GridContainer FeaturedPost Skeleton"},n("div",{class:"GridWrapper"},n("div",{class:"GridSector"},n("div",{class:"VisualContent LoadingImage"})),n("div",{class:"GridSector"},n("div",{class:"BlogTitle LoadingStripe LoadingSmallStripe"}),n("div",{class:"BlogDetails LoadingStripe LoadingMediumStripe"}),n("div",{class:"BlogLink LoadingStripe LoadingLongStripe"})))));const i=Boolean(this.paginationActive)&&this.totalBlogs>+this.blogsLimit,e=this.mbSource?void 0:this.clientStyling||this.paginationDefaultStyling;return n("div",{ref:t=>this.stylingContainer=t},n("div",{class:"BlogPageContainer"},n("div",{class:"BlogGridPaginationWrapper"},i&&n("helper-pagination",{"next-page":this.nextPage,"prev-page":this.previousPage,offset:this.paginationBlogList.offset,limit:parseInt(this.blogsLimit,10),total:this.totalBlogs,language:this.language,"mb-source":this.mbSource,"client-styling":e,"client-styling-url":this.clientStylingUrl,"arrows-active":this.arrowsActive,"secondary-arrows-active":this.secondaryArrowsActive,"numbered-nav-active":this.numberedNavActive})),!this.isLoading&&n("div",{class:`GridContainerWrapper BlogPage-${this.currentPage} ${this.device}`},this.displayedBlogResponse&&this.displayedBlogResponse.items.map((t=>{var i,e;return n("a",{key:t.postID,class:t.isFeaturedPost?"BlogCardLink FeaturedPost":"BlogCardLink",href:`/${encodeURIComponent(this.language)}/blog/${encodeURIComponent(t.customPath||t.slug)}`,onClick:i=>this.getArticleId(i,t)},n("div",{class:t.isFeaturedPost?"GridContainer FeaturedPost":"GridContainer"},n("div",{class:"GridWrapper"},n("div",{class:"GridSector"},this.showPublishingDate&&n("div",{class:"BlogDate"},n("time",{dateTime:t.publishingDate},this.formatDate(t.publishingDate))),this.showImage&&(null===(i=t.image)||void 0===i?void 0:i.src)?n("img",{class:"VisualContent",src:this.setImage(t.image),alt:t.image.alt||t.title,width:"400",height:"225",loading:"lazy"}):(null===(e=t.video)||void 0===e?void 0:e.sources[this.device])?n("video",{class:"VisualContent",src:t.video.sources[this.device]}):n("span",{class:"VisualContent",style:{color:"#fff"}},"No Image")),n("div",{class:"GridSector"},this.showTitle&&n("h2",{class:"BlogTitle"},t.title),this.showContent&&this.renderContentConditionally(t.descriptionPreview),this.showButton&&n("span",{class:"BlogLink"},s("readmore",this.language))))))}))),this.isLoading&&n("div",{class:"GridContainerWrapper LoadingGrid"},t)))}static get watchers(){return{page:["watchEndpoint"],hasErrors:["watchEndpoint"],cmsEndpoint:["watchEndpoint"],language:["watchEndpoint"],cmsEnv:["watchEndpoint"],userRoles:["watchEndpoint"],blogsLimit:["watchEndpoint"],eventId:["watchEndpoint"],clientStyling:["handleClientStylingChange"],clientStylingUrl:["handleClientStylingChangeURL"]}}};l.style=":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.BlogCardLink {\n  display: block;\n  color: inherit;\n  text-decoration: none;\n  cursor: pointer;\n}\n.BlogCardLink .GridContainer {\n  height: 100%;\n}\n.BlogCardLink > .GridContainer > .GridWrapper {\n  height: 100%;\n}\n.BlogCardLink.FeaturedPost:first-child {\n  grid-column: 1/-1;\n}\n\n.BlogPage-0 .GridContainer.FeaturedPost:first-child {\n  width: 100%;\n  flex-basis: auto;\n}\n\n.GridContainer {\n  container-type: inline-size;\n  container-name: article;\n  border-radius: 15px;\n  color: #000;\n  overflow: hidden;\n}\n.GridContainer.FeaturedPost:first-child {\n  grid-column: 1/-1;\n  width: 100%;\n}\n.GridContainer .GridWrapper {\n  display: flex;\n  flex-direction: row;\n  height: 280px;\n  background: var(--emw--color-white, #FFFFFF);\n}\n.GridContainer .GridSector {\n  flex-basis: 50%;\n  position: relative;\n}\n.GridContainer .GridSector:first-of-type {\n  height: 280px;\n  display: flex;\n}\n.GridContainer .GridSector:last-of-type {\n  padding: 20px 40px;\n  display: flex;\n  flex-direction: column;\n}\n.GridContainer .VisualContent {\n  display: block;\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}\n.GridContainer .BlogDate {\n  position: absolute;\n  bottom: 0px;\n  left: 30px;\n  font-size: 12px;\n  border-radius: 5px 5px 0 0;\n  padding: 10px;\n  width: fit-content;\n  text-align: center;\n  color: var(--emw--color-white, #FFFFFF);\n  background-color: #CD0B5E;\n  z-index: 1;\n}\n.GridContainer .BlogTitle {\n  margin: 0;\n  font-size: 24px;\n  font-weight: 400;\n  color: #000;\n  padding-bottom: 10px;\n}\n.GridContainer .BlogContent {\n  margin: 0;\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: #22B04E;\n  font-size: 14px;\n  position: absolute;\n  bottom: 16px;\n  padding-top: 2.5px;\n}\n\n@container article (max-width: 550px) {\n  .GridContainer .GridWrapper {\n    height: 380px;\n    flex-direction: column;\n  }\n  .GridContainer .GridWrapper .GridSector:first-of-type {\n    height: 120px;\n    flex-shrink: 0;\n    flex-basis: 150px;\n  }\n  .GridContainer .GridWrapper .GridSector:last-of-type {\n    padding: 20px 20px 40px;\n  }\n}\n.LoadingImage {\n  width: 100%;\n  height: 100%;\n  background-color: var(--emw--color-gray-100, #E6E6E6);\n}\n\n.LoadingStripe {\n  border: 1px solid var(--emw--color-white, #FFFFFF);\n  height: 20%;\n  background-color: var(--emw--color-gray-100, #E6E6E6);\n  margin-bottom: 5px;\n}\n\n.LoadingSmallStripe {\n  width: 40%;\n}\n\n.LoadingMediumStripe {\n  width: 70%;\n}\n\n.BlogLink.LoadingLongStripe {\n  position: static;\n  width: 100%;\n}\n\n.GridContainerWrapper.LoadingGrid .GridSector {\n  justify-content: space-around;\n}\n\n.GridContainerWrapper.LoadingGrid .LoadingImage, .GridContainerWrapper.LoadingGrid .LoadingStripe {\n  animation: pulsatingLoader 2s ease-in-out 0s infinite reverse;\n  -webkit-animation: pulsatingLoader 2s ease-in-out 0s infinite reverse;\n}\n\n@keyframes pulsatingLoader {\n  0% {\n    opacity: 0.5;\n  }\n  50% {\n    opacity: 1;\n  }\n  100% {\n    opacity: 0.5;\n  }\n}\n@-webkit-keyframes pulsatingLoader {\n  0% {\n    opacity: 0.5;\n  }\n  50% {\n    opacity: 1;\n  }\n  100% {\n    opacity: 0.5;\n  }\n}";const c=t=>!!(t.toLowerCase().match(/android/i)||t.toLowerCase().match(/blackberry|bb/i)||t.toLowerCase().match(/iphone|ipad|ipod/i)||t.toLowerCase().match(/windows phone|windows mobile|iemobile|wpdesktop/i)),g={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"}},p=(t,i)=>g[void 0!==i&&i in g?i:"en"][t],u=class{constructor(n){t(this,n),this.hpPageChange=i(this,"hpPageChange",7),this.userAgent=window.navigator.userAgent,this.currentPage=1,this.navigateTo=t=>{var i;switch(t){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-=5*this.limitInt,this.offsetInt=this.offsetInt<=0?0:this.offsetInt;break;case"fivePagesForward":this.offsetInt+=5*this.limitInt,this.offsetInt=this.offsetInt/this.limitInt>=this.endInt?this.endInt*this.limitInt:this.offsetInt}this.previousPage=!!this.offsetInt,null===(i=this.hpPageChange)||void 0===i||i.emit({offset:this.offsetInt,limit:this.limitInt,total:this.totalInt})},this.paginationNavigation=(t,i)=>{var n;this.previousPage=!0,isNaN(t)?0===i&&this.currentPage<=4?this.navigateTo("firstPage"):0===i&&this.currentPage>4?this.navigateTo("fivePagesBack"):4===i&&this.endInt-this.currentPage>=2&&this.navigateTo("fivePagesForward"):1===t?(this.offsetInt=t-1,this.previousPage=!1):this.offsetInt=(t-1)*this.limitInt,null===(n=this.hpPageChange)||void 0===n||n.emit({offset:this.offsetInt,limit:this.limitInt,total:this.totalInt})},this.nextPage="",this.prevPage="",this.offset=0,this.limit=1,this.total=1,this.language="en",this.mbSource=void 0,this.clientStyling="",this.clientStylingUrl="",this.arrowsActive=!0,this.secondaryArrowsActive=!1,this.numberedNavActive=!1,this.offsetInt=0,this.lastPage=!1,this.previousPage=!1,this.limitInt=0,this.totalInt=0,this.pagesArray=[],this.endInt=0}handleClientStylingChange(t,i){t!==i&&r(this.stylingContainer,this.clientStyling)}handleClientStylingChangeURL(t,i){t!==i&&this.clientStylingUrl&&a(this.stylingContainer,this.clientStylingUrl)}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),1==this.currentPage||2==this.currentPage?(this.pagesArray=Array.from({length:4},((t,i)=>i+1)),this.pagesArray.push("...")):this.currentPage>=3&&this.endInt-this.currentPage>=2?(this.pagesArray=Array.from({length:3},((t,i)=>this.currentPage+i-1)),this.pagesArray.push("..."),this.pagesArray.unshift("...")):this.endInt-this.currentPage<3&&(this.pagesArray=Array.from({length:4},((t,i)=>this.endInt-2+i)),this.pagesArray.unshift("..."))}handleClientStyling(){void 0===window.emMessageBus?(this.clientStyling&&r(this.stylingContainer,this.clientStyling),this.clientStylingUrl&&a(this.stylingContainer,this.clientStylingUrl)):this.stylingSubscription=h(this.stylingContainer,`${this.mbSource}.Style`,this.stylingSubscription,!0)}componentDidLoad(){this.handleClientStyling()}disconnectedCallback(){this.stylingSubscription&&this.stylingSubscription.unsubscribe()}render(){let t=n("ul",{class:"PaginationArea"},this.pagesArray.map(((t,i)=>n("li",{class:"PaginationItem"+(t===this.currentPage?" ActiveItem":" ")+" "+(c(this.userAgent)?"MobileButtons":"")},n("button",{disabled:t===this.currentPage,onClick:this.paginationNavigation.bind(this,t,i)},n("span",null,t)))))),i=n("button",{disabled:!this.prevPage,onClick:this.navigateTo.bind(this,"firstPage")},n("span",{class:"NavigationButton"},p("firstPage",this.language)),n("span",{class:"NavigationIcon"})),e=n("div",{class:"LeftItems"},this.secondaryArrowsActive&&i,n("button",{disabled:!this.prevPage,onClick:this.navigateTo.bind(this,"previousPage")},n("span",{class:"NavigationButton"},p("previousPage",this.language)),n("span",{class:"NavigationIcon"})));c(this.userAgent)&&(e=n("div",{class:"LeftItems"},n("button",{disabled:!this.prevPage,onClick:this.navigateTo.bind(this,"previousPage")},n("span",{class:"NavigationButton"},p("previousPage",this.language)),n("span",{class:"NavigationIcon"}))));let s=n("button",{disabled:!this.nextPage,onClick:this.navigateTo.bind(this,"lastPage")},n("span",{class:"NavigationButton"},p("lastPage",this.language)),n("span",{class:"NavigationIcon"})),o=n("div",{class:"RightItems"},n("button",{disabled:!this.nextPage,onClick:this.navigateTo.bind(this,"nextPage")},n("span",{class:"NavigationButton"},p("nextPage",this.language)),n("span",{class:"NavigationIcon"})),this.secondaryArrowsActive&&s);return c(this.userAgent)&&(o=n("div",{class:"RightItems"},n("button",{disabled:!this.nextPage,onClick:this.navigateTo.bind(this,"nextPage")},n("span",{class:"NavigationButton"},p("nextPage",this.language)),n("span",{class:"NavigationIcon"})))),n("div",{id:"PaginationContainer",ref:t=>this.stylingContainer=t},this.arrowsActive&&e,this.numberedNavActive&&t,this.arrowsActive&&o)}static get watchers(){return{clientStyling:["handleClientStylingChange"],clientStylingUrl:["handleClientStylingChangeURL"]}}};u.style='@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}}';export{l as blog_articles_grid,u as helper_pagination}

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

@@ -249,7 +249,7 @@ const getDevicePlatform = () => {
     return 'mtWeb';
 };
 
-const blogArticlesGridCss = ":host {\n  display: block;\n}\n\n.BlogPageContainer {\n  background: #0A0A17;\n  padding: 20px;\n}\n\n.GridContainerWrapper {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: 20px;\n}\n\n.BlogPage-0 .GridContainer.FeaturedPost:first-child {\n  width: 100%;\n  flex-basis: auto;\n}\n\n.GridContainer {\n  container-type: inline-size;\n  container-name: article;\n  border-radius: 15px;\n  color: #000;\n  overflow: hidden;\n}\n.GridContainer.FeaturedPost:first-child {\n  grid-column: 1/-1;\n  width: 100%;\n}\n.GridContainer .GridWrapper {\n  display: flex;\n  flex-direction: row;\n  height: 280px;\n  background: var(--emw--color-white, #FFFFFF);\n}\n.GridContainer .GridSector {\n  flex-basis: 50%;\n  position: relative;\n}\n.GridContainer .GridSector:first-of-type {\n  height: 280px;\n  display: flex;\n}\n.GridContainer .GridSector:last-of-type {\n  padding: 20px 40px;\n  display: flex;\n  flex-direction: column;\n}\n.GridContainer .VisualContent {\n  width: 100%;\n}\n.GridContainer .BlogDate {\n  position: absolute;\n  bottom: 0px;\n  left: 30px;\n  font-size: 12px;\n  border-radius: 5px 5px 0 0;\n  padding: 10px;\n  width: fit-content;\n  text-align: center;\n  color: var(--emw--color-white, #FFFFFF);\n  background-color: #CD0B5E;\n  z-index: 1;\n}\n.GridContainer .BlogTitle {\n  font-size: 24px;\n  color: #000;\n  padding-bottom: 10px;\n}\n.GridContainer .BlogContent {\n  display: -webkit-box;\n  font-size: 14px;\n  line-height: 1.2em;\n  -webkit-line-clamp: 6;\n  color: #000;\n  -webkit-box-orient: vertical;\n  box-sizing: border-box;\n  text-overflow: ellipsis;\n  overflow: hidden;\n}\n.GridContainer .BlogLink {\n  color: #000;\n  position: absolute;\n  bottom: 16px;\n}\n.GridContainer .BlogLink button {\n  font-size: 14px;\n  border: none;\n  padding: 0;\n  background: none;\n  color: #22B04E;\n  cursor: pointer;\n}\n\n@container article (max-width: 550px) {\n  .GridContainer .GridWrapper {\n    height: 380px;\n    flex-direction: column;\n  }\n  .GridContainer .GridWrapper .GridSector:first-of-type {\n    height: 120px;\n    flex-shrink: 0;\n    flex-basis: 150px;\n  }\n  .GridContainer .GridWrapper .GridSector:last-of-type {\n    padding: 20px 20px 40px;\n  }\n}\n.LoadingImage {\n  width: 100%;\n  height: 100%;\n  background-color: var(--emw--color-gray-100, #E6E6E6);\n}\n\n.LoadingStripe {\n  border: 1px solid var(--emw--color-white, #FFFFFF);\n  height: 20%;\n  background-color: var(--emw--color-gray-100, #E6E6E6);\n  margin-bottom: 5px;\n}\n\n.LoadingSmallStripe {\n  width: 40%;\n}\n\n.LoadingMediumStripe {\n  width: 70%;\n}\n\n.BlogLink.LoadingLongStripe {\n  position: static;\n  width: 100%;\n}\n\n.GridContainerWrapper.LoadingGrid .GridSector {\n  justify-content: space-around;\n}\n\n.GridContainerWrapper.LoadingGrid .LoadingImage, .GridContainerWrapper.LoadingGrid .LoadingStripe {\n  animation: pulsatingLoader 2s ease-in-out 0s infinite reverse;\n  -webkit-animation: pulsatingLoader 2s ease-in-out 0s infinite reverse;\n}\n\n@keyframes pulsatingLoader {\n  0% {\n    opacity: 0.5;\n  }\n  50% {\n    opacity: 1;\n  }\n  100% {\n    opacity: 0.5;\n  }\n}\n@-webkit-keyframes pulsatingLoader {\n  0% {\n    opacity: 0.5;\n  }\n  50% {\n    opacity: 1;\n  }\n  100% {\n    opacity: 0.5;\n  }\n}";
+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.BlogCardLink {\n  display: block;\n  color: inherit;\n  text-decoration: none;\n  cursor: pointer;\n}\n.BlogCardLink .GridContainer {\n  height: 100%;\n}\n.BlogCardLink > .GridContainer > .GridWrapper {\n  height: 100%;\n}\n.BlogCardLink.FeaturedPost:first-child {\n  grid-column: 1/-1;\n}\n\n.BlogPage-0 .GridContainer.FeaturedPost:first-child {\n  width: 100%;\n  flex-basis: auto;\n}\n\n.GridContainer {\n  container-type: inline-size;\n  container-name: article;\n  border-radius: 15px;\n  color: #000;\n  overflow: hidden;\n}\n.GridContainer.FeaturedPost:first-child {\n  grid-column: 1/-1;\n  width: 100%;\n}\n.GridContainer .GridWrapper {\n  display: flex;\n  flex-direction: row;\n  height: 280px;\n  background: var(--emw--color-white, #FFFFFF);\n}\n.GridContainer .GridSector {\n  flex-basis: 50%;\n  position: relative;\n}\n.GridContainer .GridSector:first-of-type {\n  height: 280px;\n  display: flex;\n}\n.GridContainer .GridSector:last-of-type {\n  padding: 20px 40px;\n  display: flex;\n  flex-direction: column;\n}\n.GridContainer .VisualContent {\n  display: block;\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}\n.GridContainer .BlogDate {\n  position: absolute;\n  bottom: 0px;\n  left: 30px;\n  font-size: 12px;\n  border-radius: 5px 5px 0 0;\n  padding: 10px;\n  width: fit-content;\n  text-align: center;\n  color: var(--emw--color-white, #FFFFFF);\n  background-color: #CD0B5E;\n  z-index: 1;\n}\n.GridContainer .BlogTitle {\n  margin: 0;\n  font-size: 24px;\n  font-weight: 400;\n  color: #000;\n  padding-bottom: 10px;\n}\n.GridContainer .BlogContent {\n  margin: 0;\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: #22B04E;\n  font-size: 14px;\n  position: absolute;\n  bottom: 16px;\n  padding-top: 2.5px;\n}\n\n@container article (max-width: 550px) {\n  .GridContainer .GridWrapper {\n    height: 380px;\n    flex-direction: column;\n  }\n  .GridContainer .GridWrapper .GridSector:first-of-type {\n    height: 120px;\n    flex-shrink: 0;\n    flex-basis: 150px;\n  }\n  .GridContainer .GridWrapper .GridSector:last-of-type {\n    padding: 20px 20px 40px;\n  }\n}\n.LoadingImage {\n  width: 100%;\n  height: 100%;\n  background-color: var(--emw--color-gray-100, #E6E6E6);\n}\n\n.LoadingStripe {\n  border: 1px solid var(--emw--color-white, #FFFFFF);\n  height: 20%;\n  background-color: var(--emw--color-gray-100, #E6E6E6);\n  margin-bottom: 5px;\n}\n\n.LoadingSmallStripe {\n  width: 40%;\n}\n\n.LoadingMediumStripe {\n  width: 70%;\n}\n\n.BlogLink.LoadingLongStripe {\n  position: static;\n  width: 100%;\n}\n\n.GridContainerWrapper.LoadingGrid .GridSector {\n  justify-content: space-around;\n}\n\n.GridContainerWrapper.LoadingGrid .LoadingImage, .GridContainerWrapper.LoadingGrid .LoadingStripe {\n  animation: pulsatingLoader 2s ease-in-out 0s infinite reverse;\n  -webkit-animation: pulsatingLoader 2s ease-in-out 0s infinite reverse;\n}\n\n@keyframes pulsatingLoader {\n  0% {\n    opacity: 0.5;\n  }\n  50% {\n    opacity: 1;\n  }\n  100% {\n    opacity: 0.5;\n  }\n}\n@-webkit-keyframes pulsatingLoader {\n  0% {\n    opacity: 0.5;\n  }\n  50% {\n    opacity: 1;\n  }\n  100% {\n    opacity: 0.5;\n  }\n}";
 const BlogArticlesGridStyle0 = blogArticlesGridCss;
 
 const BlogArticlesGrid = class {
@@ -307,27 +307,12 @@ const BlogArticlesGrid = class {
     padding: 12px 0 12px 12px;
     font-weight: 700;
   }`;
-        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 null;
             const hasBanner = content.includes('<bannermatrix-banner');
             if (!hasBanner || this.bannerMatrixReady) {
-                return index.h("div", { class: "BlogContent", innerHTML: content });
+                return index.h("p", { class: "BlogContent", innerHTML: content });
             }
             return null;
         };
@@ -369,13 +354,17 @@ const BlogArticlesGrid = class {
         this.allBlogResponse = undefined;
         this.totalBlogs = 0;
     }
-    getArticleId(postId, slug, customPath) {
+    getArticleId(event, post) {
         var _a;
+        if (event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey)
+            return;
+        const detail = { postId: post.postID.toString(), slug: post.slug, customPath: post.customPath };
         if (this.usePostmessage) {
-            window.postMessage({ type: this.postMessageEvent, postId: postId.toString(), slug, customPath });
+            event.preventDefault();
+            window.postMessage(Object.assign({ type: this.postMessageEvent }, detail));
         }
         else {
-            (_a = this.articleActionButton) === null || _a === void 0 ? void 0 : _a.emit({ postId: postId.toString(), slug, customPath });
+            (_a = this.articleActionButton) === null || _a === void 0 ? void 0 : _a.emit(detail);
         }
     }
     // Rerender when bannermatrix has finished loaded. Issue when bannermatrix passed as content from CMS.
@@ -468,9 +457,6 @@ const BlogArticlesGrid = class {
             const latestFeatured = this.findLatestFeatured(items);
             items = this.sortArticlesByDate(items);
             items = this.moveLatestFeatureToStart(items, latestFeatured);
-            items = items.map((item) => {
-                return Object.assign(Object.assign({}, item), { publishingDate: new Date(item.publishingDate).toLocaleDateString() });
-            });
             blogResponse = Object.assign(Object.assign({}, blogResponse), { items });
             if (allPosts) {
                 this.allBlogResponse = blogResponse;
@@ -565,6 +551,11 @@ const BlogArticlesGrid = class {
     disconnectedCallback() {
         this.stylingSubscription && this.stylingSubscription.unsubscribe();
     }
+    setImage(image) {
+        var _a, _b;
+        const sourceIndex = this.device === 'mobile' ? 0 : this.device === 'tablet' ? 1 : 2;
+        return ((_b = (_a = image.sources) === null || _a === void 0 ? void 0 : _a[sourceIndex]) === null || _b === void 0 ? void 0 : _b.pictureSource) || image.src;
+    }
     parseDate(dateString) {
         const date = new Date(dateString);
         const isValidDate = date instanceof Date && !Number.isNaN(date.getTime());
@@ -593,11 +584,11 @@ const BlogArticlesGrid = class {
         return (index.h("div", { ref: el => this.stylingContainer = el }, index.h("div", { class: "BlogPageContainer" }, index.h("div", { class: "BlogGridPaginationWrapper" }, showPagination && index.h("helper-pagination", { "next-page": this.nextPage, "prev-page": this.previousPage, offset: this.paginationBlogList.offset, limit: parseInt(this.blogsLimit, 10), total: this.totalBlogs, language: this.language, "mb-source": this.mbSource, "client-styling": paginationClientStyling, "client-styling-url": this.clientStylingUrl, "arrows-active": this.arrowsActive, "secondary-arrows-active": this.secondaryArrowsActive, "numbered-nav-active": this.numberedNavActive })), (!this.isLoading) &&
             index.h("div", { class: `GridContainerWrapper BlogPage-${this.currentPage} ${this.device}` }, this.displayedBlogResponse && this.displayedBlogResponse.items.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))))));
+                return index.h("a", { key: data.postID, class: data.isFeaturedPost ? 'BlogCardLink FeaturedPost' : 'BlogCardLink', href: `/${encodeURIComponent(this.language)}/blog/${encodeURIComponent(data.customPath || data.slug)}`, onClick: event => this.getArticleId(event, data) }, index.h("div", { class: data.isFeaturedPost ? 'GridContainer FeaturedPost' : 'GridContainer' }, index.h("div", { class: "GridWrapper" }, index.h("div", { class: "GridSector" }, this.showPublishingDate &&
+                    index.h("div", { class: "BlogDate" }, index.h("time", { dateTime: data.publishingDate }, this.formatDate(data.publishingDate))), this.showImage && ((_a = data.image) === null || _a === void 0 ? void 0 : _a.src) ? (index.h("img", { class: "VisualContent", src: this.setImage(data.image), alt: data.image.alt || data.title, width: "400", height: "225", loading: "lazy" })) : (((_b = data.video) === null || _b === void 0 ? void 0 : _b.sources[this.device]) ? (index.h("video", { class: "VisualContent", src: data.video.sources[this.device] })) : (index.h("span", { class: "VisualContent", style: { color: "#fff" } }, "No Image")))), index.h("div", { class: "GridSector" }, this.showTitle &&
+                    index.h("h2", { class: "BlogTitle" }, data.title), this.showContent &&
+                    this.renderContentConditionally(data.descriptionPreview), this.showButton &&
+                    index.h("span", { class: "BlogLink" }, translate$1('readmore', this.language))))));
             })), (this.isLoading) &&
             index.h("div", { class: "GridContainerWrapper LoadingGrid" }, placeholderCards))));
     }

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

@@ -13,6 +13,22 @@
   gap: 20px;
 }
 
+.BlogCardLink {
+  display: block;
+  color: inherit;
+  text-decoration: none;
+  cursor: pointer;
+}
+.BlogCardLink .GridContainer {
+  height: 100%;
+}
+.BlogCardLink > .GridContainer > .GridWrapper {
+  height: 100%;
+}
+.BlogCardLink.FeaturedPost:first-child {
+  grid-column: 1/-1;
+}
+
 .BlogPage-0 .GridContainer.FeaturedPost:first-child {
   width: 100%;
   flex-basis: auto;
@@ -49,7 +65,10 @@
   flex-direction: column;
 }
 .GridContainer .VisualContent {
+  display: block;
   width: 100%;
+  height: 100%;
+  object-fit: cover;
 }
 .GridContainer .BlogDate {
   position: absolute;
@@ -65,11 +84,14 @@
   z-index: 1;
 }
 .GridContainer .BlogTitle {
+  margin: 0;
   font-size: 24px;
+  font-weight: 400;
   color: #000;
   padding-bottom: 10px;
 }
 .GridContainer .BlogContent {
+  margin: 0;
   display: -webkit-box;
   font-size: 14px;
   line-height: 1.2em;
@@ -81,17 +103,11 @@
   overflow: hidden;
 }
 .GridContainer .BlogLink {
-  color: #000;
+  color: #22B04E;
+  font-size: 14px;
   position: absolute;
   bottom: 16px;
-}
-.GridContainer .BlogLink button {
-  font-size: 14px;
-  border: none;
-  padding: 0;
-  background: none;
-  color: #22B04E;
-  cursor: pointer;
+  padding-top: 2.5px;
 }
 
 @container article (max-width: 550px) {

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

@@ -56,27 +56,12 @@ export class BlogArticlesGrid {
     padding: 12px 0 12px 12px;
     font-weight: 700;
   }`;
-        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 null;
             const hasBanner = content.includes('<bannermatrix-banner');
             if (!hasBanner || this.bannerMatrixReady) {
-                return h("div", { class: "BlogContent", innerHTML: content });
+                return h("p", { class: "BlogContent", innerHTML: content });
             }
             return null;
         };
@@ -118,13 +103,17 @@ export class BlogArticlesGrid {
         this.allBlogResponse = undefined;
         this.totalBlogs = 0;
     }
-    getArticleId(postId, slug, customPath) {
+    getArticleId(event, post) {
         var _a;
+        if (event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey)
+            return;
+        const detail = { postId: post.postID.toString(), slug: post.slug, customPath: post.customPath };
         if (this.usePostmessage) {
-            window.postMessage({ type: this.postMessageEvent, postId: postId.toString(), slug, customPath });
+            event.preventDefault();
+            window.postMessage(Object.assign({ type: this.postMessageEvent }, detail));
         }
         else {
-            (_a = this.articleActionButton) === null || _a === void 0 ? void 0 : _a.emit({ postId: postId.toString(), slug, customPath });
+            (_a = this.articleActionButton) === null || _a === void 0 ? void 0 : _a.emit(detail);
         }
     }
     // Rerender when bannermatrix has finished loaded. Issue when bannermatrix passed as content from CMS.
@@ -217,9 +206,6 @@ export class BlogArticlesGrid {
             const latestFeatured = this.findLatestFeatured(items);
             items = this.sortArticlesByDate(items);
             items = this.moveLatestFeatureToStart(items, latestFeatured);
-            items = items.map((item) => {
-                return Object.assign(Object.assign({}, item), { publishingDate: new Date(item.publishingDate).toLocaleDateString() });
-            });
             blogResponse = Object.assign(Object.assign({}, blogResponse), { items });
             if (allPosts) {
                 this.allBlogResponse = blogResponse;
@@ -314,6 +300,11 @@ export class BlogArticlesGrid {
     disconnectedCallback() {
         this.stylingSubscription && this.stylingSubscription.unsubscribe();
     }
+    setImage(image) {
+        var _a, _b;
+        const sourceIndex = this.device === 'mobile' ? 0 : this.device === 'tablet' ? 1 : 2;
+        return ((_b = (_a = image.sources) === null || _a === void 0 ? void 0 : _a[sourceIndex]) === null || _b === void 0 ? void 0 : _b.pictureSource) || image.src;
+    }
     parseDate(dateString) {
         const date = new Date(dateString);
         const isValidDate = date instanceof Date && !Number.isNaN(date.getTime());
@@ -342,11 +333,11 @@ export class BlogArticlesGrid {
         return (h("div", { ref: el => this.stylingContainer = el }, h("div", { class: "BlogPageContainer" }, h("div", { class: "BlogGridPaginationWrapper" }, showPagination && h("helper-pagination", { "next-page": this.nextPage, "prev-page": this.previousPage, offset: this.paginationBlogList.offset, limit: parseInt(this.blogsLimit, 10), total: this.totalBlogs, language: this.language, "mb-source": this.mbSource, "client-styling": paginationClientStyling, "client-styling-url": this.clientStylingUrl, "arrows-active": this.arrowsActive, "secondary-arrows-active": this.secondaryArrowsActive, "numbered-nav-active": this.numberedNavActive })), (!this.isLoading) &&
             h("div", { class: `GridContainerWrapper BlogPage-${this.currentPage} ${this.device}` }, this.displayedBlogResponse && this.displayedBlogResponse.items.map((data) => {
                 var _a, _b;
-                return h("div", { key: data.postID, class: data.isFeaturedPost ? 'GridContainer FeaturedPost' : 'GridContainer' }, h("div", { class: "GridWrapper" }, h("div", { class: "GridSector" }, this.showPublishingDate &&
-                    h("div", { class: "BlogDate" }, this.formatDate(data === null || data === void 0 ? void 0 : data.publishingDate)), this.showImage && ((_a = data.image) === null || _a === void 0 ? void 0 : _a.src) ? (h("div", { class: "VisualContent", style: { background: `url(${this.setImage(data.image)}) no-repeat center center / cover` } })) : (((_b = data.video) === null || _b === void 0 ? void 0 : _b.sources[this.device]) ? (h("video", { class: "VisualContent", src: data.video.sources[this.device], controls: true })) : (h("h1", { class: "VisualContent", style: { color: "#fff" } }, "No Image")))), h("div", { class: "GridSector" }, this.showTitle &&
-                    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))))));
+                return h("a", { key: data.postID, class: data.isFeaturedPost ? 'BlogCardLink FeaturedPost' : 'BlogCardLink', href: `/${encodeURIComponent(this.language)}/blog/${encodeURIComponent(data.customPath || data.slug)}`, onClick: event => this.getArticleId(event, data) }, h("div", { class: data.isFeaturedPost ? 'GridContainer FeaturedPost' : 'GridContainer' }, h("div", { class: "GridWrapper" }, h("div", { class: "GridSector" }, this.showPublishingDate &&
+                    h("div", { class: "BlogDate" }, h("time", { dateTime: data.publishingDate }, this.formatDate(data.publishingDate))), this.showImage && ((_a = data.image) === null || _a === void 0 ? void 0 : _a.src) ? (h("img", { class: "VisualContent", src: this.setImage(data.image), alt: data.image.alt || data.title, width: "400", height: "225", loading: "lazy" })) : (((_b = data.video) === null || _b === void 0 ? void 0 : _b.sources[this.device]) ? (h("video", { class: "VisualContent", src: data.video.sources[this.device] })) : (h("span", { class: "VisualContent", style: { color: "#fff" } }, "No Image")))), h("div", { class: "GridSector" }, this.showTitle &&
+                    h("h2", { class: "BlogTitle" }, data.title), this.showContent &&
+                    this.renderContentConditionally(data.descriptionPreview), this.showButton &&
+                    h("span", { class: "BlogLink" }, translate('readmore', this.language))))));
             })), (this.isLoading) &&
             h("div", { class: "GridContainerWrapper LoadingGrid" }, placeholderCards))));
     }
@@ -572,7 +563,7 @@ export class BlogArticlesGrid {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Property used to display the button"
+                    "text": "Property used to display the read-more label"
                 },
                 "attribute": "show-button",
                 "reflect": true,
@@ -608,7 +599,7 @@ export class BlogArticlesGrid {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Use postMessage event to communicate"
+                    "text": "Keep the host app's SPA navigation when enabled."
                 },
                 "attribute": "use-postmessage",
                 "reflect": true
@@ -625,7 +616,7 @@ export class BlogArticlesGrid {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Event name to be sent when the button is clicked"
+                    "text": "Event name sent to the host app on card activation"
                 },
                 "attribute": "post-message-event",
                 "reflect": true,
@@ -803,9 +794,14 @@ export class BlogArticlesGrid {
                     "text": ""
                 },
                 "complexType": {
-                    "original": "any",
-                    "resolved": "any",
-                    "references": {}
+                    "original": "Object",
+                    "resolved": "Object",
+                    "references": {
+                        "Object": {
+                            "location": "global",
+                            "id": "global::Object"
+                        }
+                    }
                 }
             }];
     }

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

@@ -245,7 +245,7 @@ const getDevicePlatform = () => {
     return 'mtWeb';
 };
 
-const blogArticlesGridCss = ":host {\n  display: block;\n}\n\n.BlogPageContainer {\n  background: #0A0A17;\n  padding: 20px;\n}\n\n.GridContainerWrapper {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: 20px;\n}\n\n.BlogPage-0 .GridContainer.FeaturedPost:first-child {\n  width: 100%;\n  flex-basis: auto;\n}\n\n.GridContainer {\n  container-type: inline-size;\n  container-name: article;\n  border-radius: 15px;\n  color: #000;\n  overflow: hidden;\n}\n.GridContainer.FeaturedPost:first-child {\n  grid-column: 1/-1;\n  width: 100%;\n}\n.GridContainer .GridWrapper {\n  display: flex;\n  flex-direction: row;\n  height: 280px;\n  background: var(--emw--color-white, #FFFFFF);\n}\n.GridContainer .GridSector {\n  flex-basis: 50%;\n  position: relative;\n}\n.GridContainer .GridSector:first-of-type {\n  height: 280px;\n  display: flex;\n}\n.GridContainer .GridSector:last-of-type {\n  padding: 20px 40px;\n  display: flex;\n  flex-direction: column;\n}\n.GridContainer .VisualContent {\n  width: 100%;\n}\n.GridContainer .BlogDate {\n  position: absolute;\n  bottom: 0px;\n  left: 30px;\n  font-size: 12px;\n  border-radius: 5px 5px 0 0;\n  padding: 10px;\n  width: fit-content;\n  text-align: center;\n  color: var(--emw--color-white, #FFFFFF);\n  background-color: #CD0B5E;\n  z-index: 1;\n}\n.GridContainer .BlogTitle {\n  font-size: 24px;\n  color: #000;\n  padding-bottom: 10px;\n}\n.GridContainer .BlogContent {\n  display: -webkit-box;\n  font-size: 14px;\n  line-height: 1.2em;\n  -webkit-line-clamp: 6;\n  color: #000;\n  -webkit-box-orient: vertical;\n  box-sizing: border-box;\n  text-overflow: ellipsis;\n  overflow: hidden;\n}\n.GridContainer .BlogLink {\n  color: #000;\n  position: absolute;\n  bottom: 16px;\n}\n.GridContainer .BlogLink button {\n  font-size: 14px;\n  border: none;\n  padding: 0;\n  background: none;\n  color: #22B04E;\n  cursor: pointer;\n}\n\n@container article (max-width: 550px) {\n  .GridContainer .GridWrapper {\n    height: 380px;\n    flex-direction: column;\n  }\n  .GridContainer .GridWrapper .GridSector:first-of-type {\n    height: 120px;\n    flex-shrink: 0;\n    flex-basis: 150px;\n  }\n  .GridContainer .GridWrapper .GridSector:last-of-type {\n    padding: 20px 20px 40px;\n  }\n}\n.LoadingImage {\n  width: 100%;\n  height: 100%;\n  background-color: var(--emw--color-gray-100, #E6E6E6);\n}\n\n.LoadingStripe {\n  border: 1px solid var(--emw--color-white, #FFFFFF);\n  height: 20%;\n  background-color: var(--emw--color-gray-100, #E6E6E6);\n  margin-bottom: 5px;\n}\n\n.LoadingSmallStripe {\n  width: 40%;\n}\n\n.LoadingMediumStripe {\n  width: 70%;\n}\n\n.BlogLink.LoadingLongStripe {\n  position: static;\n  width: 100%;\n}\n\n.GridContainerWrapper.LoadingGrid .GridSector {\n  justify-content: space-around;\n}\n\n.GridContainerWrapper.LoadingGrid .LoadingImage, .GridContainerWrapper.LoadingGrid .LoadingStripe {\n  animation: pulsatingLoader 2s ease-in-out 0s infinite reverse;\n  -webkit-animation: pulsatingLoader 2s ease-in-out 0s infinite reverse;\n}\n\n@keyframes pulsatingLoader {\n  0% {\n    opacity: 0.5;\n  }\n  50% {\n    opacity: 1;\n  }\n  100% {\n    opacity: 0.5;\n  }\n}\n@-webkit-keyframes pulsatingLoader {\n  0% {\n    opacity: 0.5;\n  }\n  50% {\n    opacity: 1;\n  }\n  100% {\n    opacity: 0.5;\n  }\n}";
+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.BlogCardLink {\n  display: block;\n  color: inherit;\n  text-decoration: none;\n  cursor: pointer;\n}\n.BlogCardLink .GridContainer {\n  height: 100%;\n}\n.BlogCardLink > .GridContainer > .GridWrapper {\n  height: 100%;\n}\n.BlogCardLink.FeaturedPost:first-child {\n  grid-column: 1/-1;\n}\n\n.BlogPage-0 .GridContainer.FeaturedPost:first-child {\n  width: 100%;\n  flex-basis: auto;\n}\n\n.GridContainer {\n  container-type: inline-size;\n  container-name: article;\n  border-radius: 15px;\n  color: #000;\n  overflow: hidden;\n}\n.GridContainer.FeaturedPost:first-child {\n  grid-column: 1/-1;\n  width: 100%;\n}\n.GridContainer .GridWrapper {\n  display: flex;\n  flex-direction: row;\n  height: 280px;\n  background: var(--emw--color-white, #FFFFFF);\n}\n.GridContainer .GridSector {\n  flex-basis: 50%;\n  position: relative;\n}\n.GridContainer .GridSector:first-of-type {\n  height: 280px;\n  display: flex;\n}\n.GridContainer .GridSector:last-of-type {\n  padding: 20px 40px;\n  display: flex;\n  flex-direction: column;\n}\n.GridContainer .VisualContent {\n  display: block;\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}\n.GridContainer .BlogDate {\n  position: absolute;\n  bottom: 0px;\n  left: 30px;\n  font-size: 12px;\n  border-radius: 5px 5px 0 0;\n  padding: 10px;\n  width: fit-content;\n  text-align: center;\n  color: var(--emw--color-white, #FFFFFF);\n  background-color: #CD0B5E;\n  z-index: 1;\n}\n.GridContainer .BlogTitle {\n  margin: 0;\n  font-size: 24px;\n  font-weight: 400;\n  color: #000;\n  padding-bottom: 10px;\n}\n.GridContainer .BlogContent {\n  margin: 0;\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: #22B04E;\n  font-size: 14px;\n  position: absolute;\n  bottom: 16px;\n  padding-top: 2.5px;\n}\n\n@container article (max-width: 550px) {\n  .GridContainer .GridWrapper {\n    height: 380px;\n    flex-direction: column;\n  }\n  .GridContainer .GridWrapper .GridSector:first-of-type {\n    height: 120px;\n    flex-shrink: 0;\n    flex-basis: 150px;\n  }\n  .GridContainer .GridWrapper .GridSector:last-of-type {\n    padding: 20px 20px 40px;\n  }\n}\n.LoadingImage {\n  width: 100%;\n  height: 100%;\n  background-color: var(--emw--color-gray-100, #E6E6E6);\n}\n\n.LoadingStripe {\n  border: 1px solid var(--emw--color-white, #FFFFFF);\n  height: 20%;\n  background-color: var(--emw--color-gray-100, #E6E6E6);\n  margin-bottom: 5px;\n}\n\n.LoadingSmallStripe {\n  width: 40%;\n}\n\n.LoadingMediumStripe {\n  width: 70%;\n}\n\n.BlogLink.LoadingLongStripe {\n  position: static;\n  width: 100%;\n}\n\n.GridContainerWrapper.LoadingGrid .GridSector {\n  justify-content: space-around;\n}\n\n.GridContainerWrapper.LoadingGrid .LoadingImage, .GridContainerWrapper.LoadingGrid .LoadingStripe {\n  animation: pulsatingLoader 2s ease-in-out 0s infinite reverse;\n  -webkit-animation: pulsatingLoader 2s ease-in-out 0s infinite reverse;\n}\n\n@keyframes pulsatingLoader {\n  0% {\n    opacity: 0.5;\n  }\n  50% {\n    opacity: 1;\n  }\n  100% {\n    opacity: 0.5;\n  }\n}\n@-webkit-keyframes pulsatingLoader {\n  0% {\n    opacity: 0.5;\n  }\n  50% {\n    opacity: 1;\n  }\n  100% {\n    opacity: 0.5;\n  }\n}";
 const BlogArticlesGridStyle0 = blogArticlesGridCss;
 
 const BlogArticlesGrid = class {
@@ -303,27 +303,12 @@ const BlogArticlesGrid = class {
     padding: 12px 0 12px 12px;
     font-weight: 700;
   }`;
-        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 null;
             const hasBanner = content.includes('<bannermatrix-banner');
             if (!hasBanner || this.bannerMatrixReady) {
-                return h("div", { class: "BlogContent", innerHTML: content });
+                return h("p", { class: "BlogContent", innerHTML: content });
             }
             return null;
         };
@@ -365,13 +350,17 @@ const BlogArticlesGrid = class {
         this.allBlogResponse = undefined;
         this.totalBlogs = 0;
     }
-    getArticleId(postId, slug, customPath) {
+    getArticleId(event, post) {
         var _a;
+        if (event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey)
+            return;
+        const detail = { postId: post.postID.toString(), slug: post.slug, customPath: post.customPath };
         if (this.usePostmessage) {
-            window.postMessage({ type: this.postMessageEvent, postId: postId.toString(), slug, customPath });
+            event.preventDefault();
+            window.postMessage(Object.assign({ type: this.postMessageEvent }, detail));
         }
         else {
-            (_a = this.articleActionButton) === null || _a === void 0 ? void 0 : _a.emit({ postId: postId.toString(), slug, customPath });
+            (_a = this.articleActionButton) === null || _a === void 0 ? void 0 : _a.emit(detail);
         }
     }
     // Rerender when bannermatrix has finished loaded. Issue when bannermatrix passed as content from CMS.
@@ -464,9 +453,6 @@ const BlogArticlesGrid = class {
             const latestFeatured = this.findLatestFeatured(items);
             items = this.sortArticlesByDate(items);
             items = this.moveLatestFeatureToStart(items, latestFeatured);
-            items = items.map((item) => {
-                return Object.assign(Object.assign({}, item), { publishingDate: new Date(item.publishingDate).toLocaleDateString() });
-            });
             blogResponse = Object.assign(Object.assign({}, blogResponse), { items });
             if (allPosts) {
                 this.allBlogResponse = blogResponse;
@@ -561,6 +547,11 @@ const BlogArticlesGrid = class {
     disconnectedCallback() {
         this.stylingSubscription && this.stylingSubscription.unsubscribe();
     }
+    setImage(image) {
+        var _a, _b;
+        const sourceIndex = this.device === 'mobile' ? 0 : this.device === 'tablet' ? 1 : 2;
+        return ((_b = (_a = image.sources) === null || _a === void 0 ? void 0 : _a[sourceIndex]) === null || _b === void 0 ? void 0 : _b.pictureSource) || image.src;
+    }
     parseDate(dateString) {
         const date = new Date(dateString);
         const isValidDate = date instanceof Date && !Number.isNaN(date.getTime());
@@ -589,11 +580,11 @@ const BlogArticlesGrid = class {
         return (h("div", { ref: el => this.stylingContainer = el }, h("div", { class: "BlogPageContainer" }, h("div", { class: "BlogGridPaginationWrapper" }, showPagination && h("helper-pagination", { "next-page": this.nextPage, "prev-page": this.previousPage, offset: this.paginationBlogList.offset, limit: parseInt(this.blogsLimit, 10), total: this.totalBlogs, language: this.language, "mb-source": this.mbSource, "client-styling": paginationClientStyling, "client-styling-url": this.clientStylingUrl, "arrows-active": this.arrowsActive, "secondary-arrows-active": this.secondaryArrowsActive, "numbered-nav-active": this.numberedNavActive })), (!this.isLoading) &&
             h("div", { class: `GridContainerWrapper BlogPage-${this.currentPage} ${this.device}` }, this.displayedBlogResponse && this.displayedBlogResponse.items.map((data) => {
                 var _a, _b;
-                return h("div", { key: data.postID, class: data.isFeaturedPost ? 'GridContainer FeaturedPost' : 'GridContainer' }, h("div", { class: "GridWrapper" }, h("div", { class: "GridSector" }, this.showPublishingDate &&
-                    h("div", { class: "BlogDate" }, this.formatDate(data === null || data === void 0 ? void 0 : data.publishingDate)), this.showImage && ((_a = data.image) === null || _a === void 0 ? void 0 : _a.src) ? (h("div", { class: "VisualContent", style: { background: `url(${this.setImage(data.image)}) no-repeat center center / cover` } })) : (((_b = data.video) === null || _b === void 0 ? void 0 : _b.sources[this.device]) ? (h("video", { class: "VisualContent", src: data.video.sources[this.device], controls: true })) : (h("h1", { class: "VisualContent", style: { color: "#fff" } }, "No Image")))), h("div", { class: "GridSector" }, this.showTitle &&
-                    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))))));
+                return h("a", { key: data.postID, class: data.isFeaturedPost ? 'BlogCardLink FeaturedPost' : 'BlogCardLink', href: `/${encodeURIComponent(this.language)}/blog/${encodeURIComponent(data.customPath || data.slug)}`, onClick: event => this.getArticleId(event, data) }, h("div", { class: data.isFeaturedPost ? 'GridContainer FeaturedPost' : 'GridContainer' }, h("div", { class: "GridWrapper" }, h("div", { class: "GridSector" }, this.showPublishingDate &&
+                    h("div", { class: "BlogDate" }, h("time", { dateTime: data.publishingDate }, this.formatDate(data.publishingDate))), this.showImage && ((_a = data.image) === null || _a === void 0 ? void 0 : _a.src) ? (h("img", { class: "VisualContent", src: this.setImage(data.image), alt: data.image.alt || data.title, width: "400", height: "225", loading: "lazy" })) : (((_b = data.video) === null || _b === void 0 ? void 0 : _b.sources[this.device]) ? (h("video", { class: "VisualContent", src: data.video.sources[this.device] })) : (h("span", { class: "VisualContent", style: { color: "#fff" } }, "No Image")))), h("div", { class: "GridSector" }, this.showTitle &&
+                    h("h2", { class: "BlogTitle" }, data.title), this.showContent &&
+                    this.renderContentConditionally(data.descriptionPreview), this.showButton &&
+                    h("span", { class: "BlogLink" }, translate$1('readmore', this.language))))));
             })), (this.isLoading) &&
             h("div", { class: "GridContainerWrapper LoadingGrid" }, placeholderCards))));
     }

package/dist/types/components/blog-articles-grid/blog-articles-grid.d.ts

@@ -48,20 +48,20 @@ export declare class BlogArticlesGrid {
     */
     showContent: boolean;
     /**
-    * Property used to display the button
-    */
+     * Property used to display the read-more label
+     */
     showButton: boolean;
     /**
     * Hide the error message when the request fails
     */
     hideError: boolean;
     /**
-    * Use postMessage event to communicate
-    */
+     * Keep the host app's SPA navigation when enabled.
+     */
     usePostmessage: boolean;
     /**
-    * Event name to be sent when the button is clicked
-    */
+     * Event name sent to the host app on card activation
+     */
     postMessageEvent: string;
     /**
     * Customize pagination: Activate pagination numbered navigation
@@ -95,8 +95,8 @@ export declare class BlogArticlesGrid {
      * Filter blog post list using eventId from Sport page
     */
     eventId?: string;
-    articleActionButton: EventEmitter<Object> | undefined;
-    getArticleId(postId: number, slug: string, customPath: string): void;
+    articleActionButton?: EventEmitter<Object>;
+    getArticleId(event: MouseEvent, post: BlogPost): void;
     paginationBlogList: any;
     currentPage: number;
     hasErrors: boolean;
@@ -128,7 +128,7 @@ export declare class BlogArticlesGrid {
     handleClientStyling(): void;
     componentDidLoad(): void;
     disconnectedCallback(): void;
-    setImage: (image: any) => string;
+    setImage(image: BlogPost['image']): string;
     parseDate(dateString: string): Date;
     formatDate(dateString: string): string;
     renderContentConditionally: (content: string) => HTMLElement | null;

package/dist/types/components.d.ts

@@ -64,7 +64,7 @@ export namespace Components {
          */
         "paginationActive"?: boolean;
         /**
-          * Event name to be sent when the button is clicked
+          * Event name sent to the host app on card activation
          */
         "postMessageEvent": string;
         /**
@@ -72,7 +72,7 @@ export namespace Components {
          */
         "secondaryArrowsActive": boolean;
         /**
-          * Property used to display the button
+          * Property used to display the read-more label
          */
         "showButton": boolean;
         /**
@@ -92,7 +92,7 @@ export namespace Components {
          */
         "showTitle": boolean;
         /**
-          * Use postMessage event to communicate
+          * Keep the host app's SPA navigation when enabled.
          */
         "usePostmessage": boolean;
         /**
@@ -107,7 +107,7 @@ export interface BlogArticlesGridCustomEvent<T> extends CustomEvent<T> {
 }
 declare global {
     interface HTMLBlogArticlesGridElementEventMap {
-        "articleActionButton": any;
+        "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;
@@ -177,7 +177,7 @@ declare namespace LocalJSX {
           * Customize pagination: Activate pagination numbered navigation
          */
         "numberedNavActive"?: boolean;
-        "onArticleActionButton"?: (event: BlogArticlesGridCustomEvent<any>) => void;
+        "onArticleActionButton"?: (event: BlogArticlesGridCustomEvent<Object>) => void;
         /**
           * Page to particularly be opened on start
          */
@@ -187,7 +187,7 @@ declare namespace LocalJSX {
          */
         "paginationActive"?: boolean;
         /**
-          * Event name to be sent when the button is clicked
+          * Event name sent to the host app on card activation
          */
         "postMessageEvent"?: string;
         /**
@@ -195,7 +195,7 @@ declare namespace LocalJSX {
          */
         "secondaryArrowsActive"?: boolean;
         /**
-          * Property used to display the button
+          * Property used to display the read-more label
          */
         "showButton"?: boolean;
         /**
@@ -215,7 +215,7 @@ declare namespace LocalJSX {
          */
         "showTitle"?: boolean;
         /**
-          * Use postMessage event to communicate
+          * Keep the host app's SPA navigation when enabled.
          */
         "usePostmessage": boolean;
         /**

package/dist/types/utils/type.d.ts

@@ -22,6 +22,7 @@ export type BlogPost = {
     eventIds: string[];
     image: {
         src: string;
+        alt?: string;
         width: string;
         height: string;
         sources: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@everymatrix/blog-articles-grid",
-  "version": "1.98.19",
+  "version": "1.98.21",
   "main": "./dist/index.cjs.js",
   "module": "./dist/index.js",
   "es2015": "./dist/esm/index.mjs",