@everymatrix/blog-articles-grid 1.94.9 → 1.94.16

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/dist/blog-articles-grid/blog-articles-grid_2.entry.js +1 -1
  2. package/dist/cjs/blog-articles-grid_2.cjs.entry.js +115 -75
  3. package/dist/collection/components/blog-articles-grid/blog-articles-grid.js +46 -46
  4. package/dist/esm/blog-articles-grid_2.entry.js +115 -75
  5. package/dist/types/builds/emfe-widgets/widgets-monorepo/packages/stencil/blog-articles-grid/.stencil/libs/common/src/device/index.d.ts +21 -0
  6. package/dist/types/components/blog-articles-grid/blog-articles-grid.d.ts +20 -19
  7. package/dist/types/components.d.ts +5 -5
  8. package/package.json +1 -1
  9. package/dist/collection/utils/utils.js +0 -67
  10. package/dist/types/utils/utils.d.ts +0 -4
package/dist/blog-articles-grid/blog-articles-grid_2.entry.js CHANGED
@@ -1 +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 a(t,i){if(t){const n=document.createElement("style");n.innerHTML=i,t.appendChild(n)}}function r(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 a=s[i]&&s[i].sheet;a?s[i].refCount=s[i].refCount+1:(a=new CSSStyleSheet,a.replaceSync(n),s[i]={sheet:a,refCount:1});const r=e.adoptedStyleSheets||[];r.includes(a)||(e.adoptedStyleSheets=[...r,a])}))}(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}const d=class{constructor(e){t(this,e),this.articleActionButton=i(this,"articleActionButton",7),this.clientStylingContent="",this.isInitialized=!1,this.defaultStyling="\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=>{if(t)return-1!==t.indexOf("<bannermatrix-banner")?this.bannerMatrixReady?n("div",{class:"BlogContent",innerHTML:t}):null:n("div",{class:"BlogContent",innerHTML:t})},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.usePostmessage=void 0,this.postMessageEvent="",this.blogsLimit="0",this.paginationActive=void 0,this.arrowsActive=void 0,this.secondaryArrowsActive=void 0,this.numberedNavActive=void 0,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="",this.displayedBlogResponse=void 0,this.paginationBlogResponse=void 0,this.allBlogResponse=void 0,this.totalBlogs=0}getArticleId(t,i,n){this.usePostmessage?window.postMessage({type:this.postMessageEvent,postId:t.toString(),slug:i,customPath:n}):this.articleActionButton.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&&a(this.stylingContainer,this.clientStyling)}handleClientStylingChangeURL(t,i){t!=i&&this.clientStylingUrl&&r(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){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)return"PC"===t?"dk":"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,a,r,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),a=o.items.filter((({eventIds:t})=>t.includes(this.eventId)));a.length?(d=Object.assign(Object.assign({},o),{items:a,total:Math.min(parseInt(this.blogsLimit),a.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===(a=null===(o=this.paginationBlogResponse)||void 0===o?void 0:o.items)||void 0===a?void 0:a.length)&&!t?this.paginationBlogResponse:await this.fetchBlogPosts(i);this.displayedBlogResponse=d,this.totalBlogs=d.total,this.lastPage=+(null===(h=null===(r=d.pages.last)||void 0===r?void 0:r.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())}componentDidLoad(){this.stylingContainer&&(null!=window.emMessageBus?h(this.stylingContainer,`${this.mbSource}.Style`,this.stylingSubscription):(this.clientStyling&&a(this.stylingContainer,this.clientStyling),this.clientStylingUrl&&r(this.stylingContainer,this.clientStylingUrl))),this.isInitialized=!0,window.postMessage({type:"BlogArticlesGridLoaded"},window.location.href),this.device=function(){const t=navigator.userAgent.toLowerCase();let i="";return i=t.includes("android")||t.includes("iphone")||function(){const t=navigator.userAgent.toLowerCase();return!!t.includes("ipad")||t.indexOf("macintosh")>-1&&navigator.maxTouchPoints&&navigator.maxTouchPoints>2}()?function(){const t=screen.availWidth;return t<600?"mobile":t>=600&&t<1100?"tablet":void 0}():"desktop",i}()}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"},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"})))));return n("div",{ref:t=>this.stylingContainer=t},n("div",{class:"BlogPageContainer"},n("div",{class:"BlogGridPaginationWrapper"},1==this.paginationActive&&this.totalBlogs>+this.blogsLimit&&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,"md-source":this.mbSource,"client-styling":this.clientStyling||this.defaultStyling,"client-styling-url":this.clientStylingUrl,"arrows-active":this.arrowsActive||!0,"secondary-arrows-active":this.secondaryArrowsActive||!1,"numbered-nav-active":this.numberedNavActive||!1})),!this.isLoading&&n("div",{class:`GridContainerWrapper BlogPage-${this.currentPage}`},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 l=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)),c={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"}},g=(t,i)=>c[void 0!==i&&i in c?i:"en"][t],p=class{constructor(n){t(this,n),this.hpPageChange=i(this,"hpPageChange",7),this.userAgent=window.navigator.userAgent,this.currentPage=1,this.navigateTo=t=>{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,this.hpPageChange.emit({offset:this.offsetInt,limit:this.limitInt,total:this.totalInt})},this.paginationNavigation=(t,i)=>{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,this.hpPageChange.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=void 0,this.secondaryArrowsActive=void 0,this.numberedNavActive=void 0,this.offsetInt=void 0,this.lastPage=!1,this.previousPage=!1,this.limitInt=void 0,this.totalInt=void 0,this.pagesArray=[],this.endInt=0}handleClientStylingChange(t,i){t!=i&&a(this.stylingContainer,this.clientStyling)}handleClientStylingChangeURL(t,i){t!=i&&this.clientStylingUrl&&r(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("..."))}componentDidLoad(){this.stylingContainer&&(null!=window.emMessageBus?h(this.stylingContainer,`${this.mbSource}.Style`,this.stylingSubscription):(this.clientStyling&&a(this.stylingContainer,this.clientStyling),this.clientStylingUrl&&r(this.stylingContainer,this.clientStylingUrl)))}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":" ")+" "+(l(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"},g("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"},g("previousPage",this.language)),n("span",{class:"NavigationIcon"})));l(this.userAgent)&&(e=n("div",{class:"LeftItems"},n("button",{disabled:!this.prevPage,onClick:this.navigateTo.bind(this,"previousPage")},n("span",{class:"NavigationButton"},g("previousPage",this.language)),n("span",{class:"NavigationIcon"}))));let s=n("button",{disabled:!this.nextPage,onClick:this.navigateTo.bind(this,"lastPage")},n("span",{class:"NavigationButton"},g("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"},g("nextPage",this.language)),n("span",{class:"NavigationIcon"})),this.secondaryArrowsActive&&s);return l(this.userAgent)&&(o=n("div",{class:"RightItems"},n("button",{disabled:!this.nextPage,onClick:this.navigateTo.bind(this,"nextPage")},n("span",{class:"NavigationButton"},g("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"]}}};p.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,p as helper_pagination}
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.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"},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}
package/dist/cjs/blog-articles-grid_2.cjs.entry.js CHANGED
@@ -162,29 +162,67 @@ function getAdoptStyleSubscription(stylingContainer, domain) {
162
162
  });
163
163
  }
164
164
 
165
- function checkCustomDeviceWidth() {
166
- const width = screen.availWidth;
167
- if (width < 600) {
168
- return 'mobile';
169
- }
170
- else if (width >= 600 && width < 1100) {
171
- return 'tablet';
172
- }
173
- }
174
- function isIpad() {
175
- const userAgent = navigator.userAgent.toLowerCase();
176
- // Traditional iPad user agent
177
- if (userAgent.includes('ipad')) {
165
+ const MOBILE_MAX = 599;
166
+ const TABLET_MAX = 1099;
167
+ function isIPad(ua) {
168
+ // Classic iPad UA
169
+ if (ua.includes('ipad'))
178
170
  return true;
179
- }
180
- return userAgent.indexOf('macintosh') > -1 && navigator.maxTouchPoints && navigator.maxTouchPoints > 2;
171
+ // iPadOS 13+ Safari pretending to be macOS
172
+ return ua.includes('macintosh') && navigator.maxTouchPoints > 0;
173
+ }
174
+ function isIPhone(ua) {
175
+ return ua.includes('iphone') || ua.includes('ipod');
176
+ }
177
+ function isAndroid(ua) {
178
+ return ua.includes('android');
181
179
  }
182
- function getDeviceCustom() {
183
- const userAgent = navigator.userAgent.toLowerCase();
184
- let source = '';
185
- source = (userAgent.includes('android') || userAgent.includes('iphone') || isIpad()) ? checkCustomDeviceWidth() : 'desktop';
186
- return source;
180
+ function isAndroidMobile(ua, width) {
181
+ return isAndroid(ua) && (ua.includes('mobile') || ua.includes('mobi') || width <= MOBILE_MAX);
187
182
  }
183
+ function isAndroidTablet(ua, width) {
184
+ return isAndroid(ua) && !ua.includes('mobile') && !ua.includes('mobi') && width > MOBILE_MAX;
185
+ }
186
+ /**
187
+ * Detects the current device type using user agent and viewport width.
188
+ *
189
+ * By default, this function focuses on actual device/platform detection.
190
+ * Responsive width fallback is optional and mainly intended for
191
+ * responsive layout testing or browser emulation.
192
+ *
193
+ * Supports:
194
+ * - iPhone / iPad
195
+ * - Android mobile / tablet
196
+ *
197
+ * @param enableResponsiveFallback
198
+ * When enabled, classify unknown devices by viewport width.
199
+ *
200
+ * @returns `'mobile' | 'tablet' | 'desktop'`
201
+ */
202
+ const getDeviceType = (enableResponsiveFallback = false) => {
203
+ if (typeof window === 'undefined' || typeof navigator === 'undefined') {
204
+ return 'desktop';
205
+ }
206
+ const ua = navigator.userAgent.toLowerCase();
207
+ const width = window.innerWidth;
208
+ // Apple devices
209
+ if (isIPad(ua))
210
+ return 'tablet';
211
+ if (isIPhone(ua))
212
+ return 'mobile';
213
+ // Android devices
214
+ if (isAndroidMobile(ua, width))
215
+ return 'mobile';
216
+ if (isAndroidTablet(ua, width))
217
+ return 'tablet';
218
+ if (enableResponsiveFallback) {
219
+ if (width <= MOBILE_MAX)
220
+ return 'mobile';
221
+ if (width <= TABLET_MAX)
222
+ return 'tablet';
223
+ }
224
+ return 'desktop';
225
+ };
188
226
  const getDevice = () => {
189
227
  let userAgent = window.navigator.userAgent;
190
228
  if (userAgent.toLowerCase().match(/android/i)) {
@@ -207,10 +245,8 @@ const getDevicePlatform = () => {
207
245
  else if (device === 'iPad' || device === 'iPhone') {
208
246
  return 'mtWeb';
209
247
  }
210
- else {
211
- return 'mtWeb';
212
- }
213
248
  }
249
+ return 'mtWeb';
214
250
  };
215
251
 
216
252
  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}";
@@ -220,9 +256,9 @@ const BlogArticlesGrid = class {
220
256
  constructor(hostRef) {
221
257
  index.registerInstance(this, hostRef);
222
258
  this.articleActionButton = index.createEvent(this, "articleActionButton", 7);
223
- this.clientStylingContent = '';
259
+ this.lastPage = 1;
224
260
  this.isInitialized = false;
225
- this.defaultStyling = `
261
+ this.paginationDefaultStyling = `
226
262
  div#PaginationContainer {
227
263
  justify-content: right;
228
264
  }
@@ -288,12 +324,9 @@ const BlogArticlesGrid = class {
288
324
  };
289
325
  this.renderContentConditionally = (content) => {
290
326
  if (!content)
291
- return;
292
- const hasBanner = content.indexOf('<bannermatrix-banner') !== -1;
293
- if (!hasBanner) {
294
- return index.h("div", { class: "BlogContent", innerHTML: content });
295
- }
296
- if (this.bannerMatrixReady) {
327
+ return null;
328
+ const hasBanner = content.includes('<bannermatrix-banner');
329
+ if (!hasBanner || this.bannerMatrixReady) {
297
330
  return index.h("div", { class: "BlogContent", innerHTML: content });
298
331
  }
299
332
  return null;
@@ -314,9 +347,9 @@ const BlogArticlesGrid = class {
314
347
  this.postMessageEvent = '';
315
348
  this.blogsLimit = '0';
316
349
  this.paginationActive = undefined;
317
- this.arrowsActive = undefined;
318
- this.secondaryArrowsActive = undefined;
319
- this.numberedNavActive = undefined;
350
+ this.arrowsActive = true;
351
+ this.secondaryArrowsActive = false;
352
+ this.numberedNavActive = false;
320
353
  this.intlDateTimeFormat = '';
321
354
  this.page = '1';
322
355
  this.eventId = undefined;
@@ -329,18 +362,19 @@ const BlogArticlesGrid = class {
329
362
  this.bannerMatrixReady = false;
330
363
  this.nextPage = '';
331
364
  this.previousPage = '';
332
- this.device = '';
365
+ this.device = 'mobile';
333
366
  this.displayedBlogResponse = undefined;
334
367
  this.paginationBlogResponse = undefined;
335
368
  this.allBlogResponse = undefined;
336
369
  this.totalBlogs = 0;
337
370
  }
338
371
  getArticleId(postId, slug, customPath) {
372
+ var _a;
339
373
  if (this.usePostmessage) {
340
374
  window.postMessage({ type: this.postMessageEvent, postId: postId.toString(), slug, customPath });
341
375
  }
342
376
  else {
343
- this.articleActionButton.emit({ postId: postId.toString(), slug, customPath });
377
+ (_a = this.articleActionButton) === null || _a === void 0 ? void 0 : _a.emit({ postId: postId.toString(), slug, customPath });
344
378
  }
345
379
  }
346
380
  // Rerender when bannermatrix has finished loaded. Issue when bannermatrix passed as content from CMS.
@@ -357,12 +391,12 @@ const BlogArticlesGrid = class {
357
391
  }
358
392
  }
359
393
  handleClientStylingChange(newValue, oldValue) {
360
- if (newValue != oldValue) {
394
+ if (newValue !== oldValue) {
361
395
  setClientStyling(this.stylingContainer, this.clientStyling);
362
396
  }
363
397
  }
364
398
  handleClientStylingChangeURL(newValue, oldValue) {
365
- if (newValue != oldValue) {
399
+ if (newValue !== oldValue) {
366
400
  if (this.clientStylingUrl)
367
401
  setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
368
402
  }
@@ -404,6 +438,8 @@ const BlogArticlesGrid = class {
404
438
  return featuredItems[0];
405
439
  }
406
440
  moveLatestFeatureToStart(blogItems, latestFeatured) {
441
+ if (!latestFeatured)
442
+ return blogItems;
407
443
  const index = blogItems.indexOf(latestFeatured);
408
444
  if (index !== -1) {
409
445
  blogItems.splice(index, 1);
@@ -459,7 +495,7 @@ const BlogArticlesGrid = class {
459
495
  // TODO: this is a temporary solution for filter blogPost by eventId from all blog posts.
460
496
  // apijson should have functionality to filter in backend side in future.
461
497
  const allBlogData = ((_a = this.allBlogResponse) === null || _a === void 0 ? void 0 : _a.items) ? this.allBlogResponse : await this.fetchBlogPosts(1, true);
462
- const filteredItems = allBlogData.items.filter(({ eventIds }) => eventIds.includes(this.eventId));
498
+ const filteredItems = allBlogData.items.filter(({ eventIds }) => { var _a; return eventIds.includes((_a = this.eventId) !== null && _a !== void 0 ? _a : '-'); });
463
499
  if (filteredItems.length) {
464
500
  blogResponse = Object.assign(Object.assign({}, allBlogData), { items: filteredItems, total: Math.min(parseInt(this.blogsLimit), filteredItems.length) });
465
501
  window.postMessage({
@@ -487,7 +523,7 @@ const BlogArticlesGrid = class {
487
523
  }
488
524
  this.displayedBlogResponse = blogResponse;
489
525
  this.totalBlogs = blogResponse.total;
490
- this.lastPage = +((_g = (_f = blogResponse.pages.last) === null || _f === void 0 ? void 0 : _f.match(/&page=(\d+)/)) === null || _g === void 0 ? void 0 : _g[1]) || 1;
526
+ this.lastPage = +(((_g = (_f = blogResponse.pages.last) === null || _f === void 0 ? void 0 : _f.match(/&page=(\d+)/)) === null || _g === void 0 ? void 0 : _g[1]) || 1);
491
527
  this.nextPage = blogResponse.pages.next;
492
528
  this.previousPage = blogResponse.pages.previous;
493
529
  this.isLoading = false;
@@ -509,21 +545,21 @@ const BlogArticlesGrid = class {
509
545
  }
510
546
  }
511
547
  }
512
- componentDidLoad() {
513
- if (this.stylingContainer) {
514
- if (window.emMessageBus != undefined) {
515
- setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`, this.stylingSubscription);
516
- }
517
- else {
518
- if (this.clientStyling)
519
- setClientStyling(this.stylingContainer, this.clientStyling);
520
- if (this.clientStylingUrl)
521
- setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
522
- }
548
+ handleClientStyling() {
549
+ if (window.emMessageBus !== undefined) {
550
+ this.stylingSubscription = setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`, this.stylingSubscription, true);
551
+ return;
523
552
  }
553
+ if (this.clientStyling)
554
+ setClientStyling(this.stylingContainer, this.clientStyling);
555
+ if (this.clientStylingUrl)
556
+ setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
557
+ }
558
+ componentDidLoad() {
559
+ this.handleClientStyling();
524
560
  this.isInitialized = true;
525
561
  window.postMessage({ type: 'BlogArticlesGridLoaded' }, window.location.href);
526
- this.device = getDeviceCustom();
562
+ this.device = getDeviceType();
527
563
  }
528
564
  disconnectedCallback() {
529
565
  this.stylingSubscription && this.stylingSubscription.unsubscribe();
@@ -551,8 +587,10 @@ const BlogArticlesGrid = class {
551
587
  for (let i = 0; i < parseInt(this.blogsLimit); i++) {
552
588
  placeholderCards.push(index.h("div", { class: "GridContainer FeaturedPost Skeleton" }, index.h("div", { class: "GridWrapper" }, index.h("div", { class: "GridSector" }, index.h("div", { class: "VisualContent LoadingImage" })), index.h("div", { class: "GridSector" }, index.h("div", { class: "BlogTitle LoadingStripe LoadingSmallStripe" }), index.h("div", { class: "BlogDetails LoadingStripe LoadingMediumStripe" }), index.h("div", { class: "BlogLink LoadingStripe LoadingLongStripe" })))));
553
589
  }
554
- return (index.h("div", { ref: el => this.stylingContainer = el }, index.h("div", { class: "BlogPageContainer" }, index.h("div", { class: "BlogGridPaginationWrapper" }, this.paginationActive == true && this.totalBlogs > +this.blogsLimit && index.h("helper-pagination", { "next-page": this.nextPage, "prev-page": this.previousPage, offset: this.paginationBlogList.offset, limit: parseInt(this.blogsLimit, 10), total: this.totalBlogs, language: this.language, "md-source": this.mbSource, "client-styling": this.clientStyling || this.defaultStyling, "client-styling-url": this.clientStylingUrl, "arrows-active": this.arrowsActive || true, "secondary-arrows-active": this.secondaryArrowsActive || false, "numbered-nav-active": this.numberedNavActive || false })), (!this.isLoading) &&
555
- index.h("div", { class: `GridContainerWrapper BlogPage-${this.currentPage}` }, this.displayedBlogResponse && this.displayedBlogResponse.items.map((data) => {
590
+ const showPagination = Boolean(this.paginationActive) && this.totalBlogs > +this.blogsLimit;
591
+ const paginationClientStyling = !this.mbSource ? (this.clientStyling || this.paginationDefaultStyling) : undefined;
592
+ 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) &&
593
+ index.h("div", { class: `GridContainerWrapper BlogPage-${this.currentPage} ${this.device}` }, this.displayedBlogResponse && this.displayedBlogResponse.items.map((data) => {
556
594
  var _a, _b;
557
595
  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 &&
558
596
  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 &&
@@ -647,6 +685,7 @@ const HelperPagination = class {
647
685
  * Navigation logic
648
686
  */
649
687
  this.navigateTo = (navigationPage) => {
688
+ var _a;
650
689
  switch (navigationPage) {
651
690
  case 'firstPage':
652
691
  this.offsetInt = 0;
@@ -670,12 +709,13 @@ const HelperPagination = class {
670
709
  break;
671
710
  }
672
711
  this.previousPage = !this.offsetInt ? false : true;
673
- this.hpPageChange.emit({ offset: this.offsetInt, limit: this.limitInt, total: this.totalInt });
712
+ (_a = this.hpPageChange) === null || _a === void 0 ? void 0 : _a.emit({ offset: this.offsetInt, limit: this.limitInt, total: this.totalInt });
674
713
  };
675
714
  /**
676
715
  * Handle navigation from here
677
716
  */
678
717
  this.paginationNavigation = (pageNumber, index) => {
718
+ var _a;
679
719
  this.previousPage = true;
680
720
  if (!isNaN(pageNumber)) {
681
721
  if (pageNumber === 1) {
@@ -697,7 +737,7 @@ const HelperPagination = class {
697
737
  this.navigateTo('fivePagesForward');
698
738
  }
699
739
  }
700
- this.hpPageChange.emit({ offset: this.offsetInt, limit: this.limitInt, total: this.totalInt });
740
+ (_a = this.hpPageChange) === null || _a === void 0 ? void 0 : _a.emit({ offset: this.offsetInt, limit: this.limitInt, total: this.totalInt });
701
741
  };
702
742
  this.nextPage = '';
703
743
  this.prevPage = '';
@@ -708,24 +748,24 @@ const HelperPagination = class {
708
748
  this.mbSource = undefined;
709
749
  this.clientStyling = '';
710
750
  this.clientStylingUrl = '';
711
- this.arrowsActive = undefined;
712
- this.secondaryArrowsActive = undefined;
713
- this.numberedNavActive = undefined;
714
- this.offsetInt = undefined;
751
+ this.arrowsActive = true;
752
+ this.secondaryArrowsActive = false;
753
+ this.numberedNavActive = false;
754
+ this.offsetInt = 0;
715
755
  this.lastPage = false;
716
756
  this.previousPage = false;
717
- this.limitInt = undefined;
718
- this.totalInt = undefined;
757
+ this.limitInt = 0;
758
+ this.totalInt = 0;
719
759
  this.pagesArray = [];
720
760
  this.endInt = 0;
721
761
  }
722
762
  handleClientStylingChange(newValue, oldValue) {
723
- if (newValue != oldValue) {
763
+ if (newValue !== oldValue) {
724
764
  setClientStyling(this.stylingContainer, this.clientStyling);
725
765
  }
726
766
  }
727
767
  handleClientStylingChangeURL(newValue, oldValue) {
728
- if (newValue != oldValue) {
768
+ if (newValue !== oldValue) {
729
769
  if (this.clientStylingUrl)
730
770
  setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
731
771
  }
@@ -755,18 +795,18 @@ const HelperPagination = class {
755
795
  this.pagesArray.unshift('...');
756
796
  }
757
797
  }
758
- componentDidLoad() {
759
- if (this.stylingContainer) {
760
- if (window.emMessageBus != undefined) {
761
- setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`, this.stylingSubscription);
762
- }
763
- else {
764
- if (this.clientStyling)
765
- setClientStyling(this.stylingContainer, this.clientStyling);
766
- if (this.clientStylingUrl)
767
- setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
768
- }
798
+ handleClientStyling() {
799
+ if (window.emMessageBus !== undefined) {
800
+ this.stylingSubscription = setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`, this.stylingSubscription, true);
801
+ return;
769
802
  }
803
+ if (this.clientStyling)
804
+ setClientStyling(this.stylingContainer, this.clientStyling);
805
+ if (this.clientStylingUrl)
806
+ setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
807
+ }
808
+ componentDidLoad() {
809
+ this.handleClientStyling();
770
810
  }
771
811
  disconnectedCallback() {
772
812
  this.stylingSubscription && this.stylingSubscription.unsubscribe();