@everymatrix/blog-articles-grid 1.85.17 → 1.85.18
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.
|
@@ -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];function o(t,i){if(t){const n=document.createElement("style");n.innerHTML=i,t.appendChild(n)}}function a(t,i){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 r(t,i){if(window.emMessageBus){const n=document.createElement("style");window.emMessageBus.subscribe(i,(i=>{n.innerHTML=i,t&&t.appendChild(n)}))}}const h=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&&o(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){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?r(this.stylingContainer,`${this.mbSource}.Style`):(this.clientStyling&&o(this.stylingContainer,this.clientStyling),this.clientStylingUrl&&a(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()}formatDate(t){return new Intl.DateTimeFormat(this.intlDateTimeFormat).format(new Date(t))}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"]}}};h.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 d=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)),l={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"}},c=(t,i)=>l[void 0!==i&&i in l?i:"en"][t],g=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&&o(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("..."))}componentDidLoad(){this.stylingContainer&&(null!=window.emMessageBus?r(this.stylingContainer,`${this.mbSource}.Style`):(this.clientStyling&&o(this.stylingContainer,this.clientStyling),this.clientStylingUrl&&a(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":" ")+" "+(d(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"},c("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"},c("previousPage",this.language)),n("span",{class:"NavigationIcon"})));d(this.userAgent)&&(e=n("div",{class:"LeftItems"},n("button",{disabled:!this.prevPage,onClick:this.navigateTo.bind(this,"previousPage")},n("span",{class:"NavigationButton"},c("previousPage",this.language)),n("span",{class:"NavigationIcon"}))));let s=n("button",{disabled:!this.nextPage,onClick:this.navigateTo.bind(this,"lastPage")},n("span",{class:"NavigationButton"},c("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"},c("nextPage",this.language)),n("span",{class:"NavigationIcon"})),this.secondaryArrowsActive&&s);return d(this.userAgent)&&(o=n("div",{class:"RightItems"},n("button",{disabled:!this.nextPage,onClick:this.navigateTo.bind(this,"nextPage")},n("span",{class:"NavigationButton"},c("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"]}}};g.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{h as blog_articles_grid,g 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];function o(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 r(t,i){if(window.emMessageBus){const n=document.createElement("style");window.emMessageBus.subscribe(i,(i=>{n.innerHTML=i,t&&t.appendChild(n)}))}}const h=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&&o(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){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?r(this.stylingContainer,`${this.mbSource}.Style`):(this.clientStyling&&o(this.stylingContainer,this.clientStyling),this.clientStylingUrl&&a(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()}formatDate(t){return new Intl.DateTimeFormat(this.intlDateTimeFormat).format(new Date(t))}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"]}}};h.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 d=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)),l={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"}},c=(t,i)=>l[void 0!==i&&i in l?i:"en"][t],g=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&&o(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("..."))}componentDidLoad(){this.stylingContainer&&(null!=window.emMessageBus?r(this.stylingContainer,`${this.mbSource}.Style`):(this.clientStyling&&o(this.stylingContainer,this.clientStyling),this.clientStylingUrl&&a(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":" ")+" "+(d(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"},c("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"},c("previousPage",this.language)),n("span",{class:"NavigationIcon"})));d(this.userAgent)&&(e=n("div",{class:"LeftItems"},n("button",{disabled:!this.prevPage,onClick:this.navigateTo.bind(this,"previousPage")},n("span",{class:"NavigationButton"},c("previousPage",this.language)),n("span",{class:"NavigationIcon"}))));let s=n("button",{disabled:!this.nextPage,onClick:this.navigateTo.bind(this,"lastPage")},n("span",{class:"NavigationButton"},c("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"},c("nextPage",this.language)),n("span",{class:"NavigationIcon"})),this.secondaryArrowsActive&&s);return d(this.userAgent)&&(o=n("div",{class:"RightItems"},n("button",{disabled:!this.nextPage,onClick:this.navigateTo.bind(this,"nextPage")},n("span",{class:"NavigationButton"},c("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"]}}};g.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{h as blog_articles_grid,g as helper_pagination}
|
|
@@ -65,6 +65,8 @@ function setClientStyling(stylingContainer, clientStyling) {
|
|
|
65
65
|
* @param {string} clientStylingUrl The URL of the style content
|
|
66
66
|
*/
|
|
67
67
|
function setClientStylingURL(stylingContainer, clientStylingUrl) {
|
|
68
|
+
if (!stylingContainer || !clientStylingUrl) return;
|
|
69
|
+
|
|
68
70
|
const url = new URL(clientStylingUrl);
|
|
69
71
|
|
|
70
72
|
fetch(url.href)
|
|
@@ -61,6 +61,8 @@ function setClientStyling(stylingContainer, clientStyling) {
|
|
|
61
61
|
* @param {string} clientStylingUrl The URL of the style content
|
|
62
62
|
*/
|
|
63
63
|
function setClientStylingURL(stylingContainer, clientStylingUrl) {
|
|
64
|
+
if (!stylingContainer || !clientStylingUrl) return;
|
|
65
|
+
|
|
64
66
|
const url = new URL(clientStylingUrl);
|
|
65
67
|
|
|
66
68
|
fetch(url.href)
|