@everymatrix/blog-articles-grid 1.20.9 → 1.20.11
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.
- package/dist/blog-articles-grid/blog-articles-grid.esm.js +1 -1
- package/dist/blog-articles-grid/p-45b04720.entry.js +1 -0
- package/dist/cjs/blog-articles-grid.cjs.js +1 -1
- package/dist/cjs/blog-articles-grid_2.cjs.entry.js +4 -7
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/collection/components/blog-articles-grid/blog-articles-grid.js +20 -38
- package/dist/components/blog-articles-grid.js +6 -9
- package/dist/esm/blog-articles-grid.js +1 -1
- package/dist/esm/blog-articles-grid_2.entry.js +4 -7
- package/dist/esm/loader.js +1 -1
- package/dist/types/components/blog-articles-grid/blog-articles-grid.d.ts +1 -6
- package/dist/types/components.d.ts +0 -8
- package/package.json +1 -1
- package/dist/blog-articles-grid/p-29cc671d.entry.js +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
import{p as e,b as t}from"./p-ed2f13d0.js";(()=>{const t=import.meta.url,n={};return""!==t&&(n.resourcesUrl=new URL(".",t).href),e(n)})().then((e=>t([["p-
|
|
1
|
+
import{p as e,b as t}from"./p-ed2f13d0.js";(()=>{const t=import.meta.url,n={};return""!==t&&(n.resourcesUrl=new URL(".",t).href),e(n)})().then((e=>t([["p-45b04720",[[1,"blog-articles-grid",{cmsEndpoint:[513,"cms-endpoint"],language:[513],userRoles:[513,"user-roles"],cmsEnv:[513,"cms-env"],clientStyling:[513,"client-styling"],clientStylingUrl:[513,"client-styling-url"],showPublishingDate:[516,"show-publishing-date"],showImage:[516,"show-image"],showTitle:[516,"show-title"],showContent:[516,"show-content"],showButton:[516,"show-button"],usePostmessage:[516,"use-postmessage"],postMessageEvent:[513,"post-message-event"],blogsLimit:[514,"blogs-limit"],paginationActive:[516,"pagination-active"],arrowsActive:[516,"arrows-active"],secondaryArrowsActive:[516,"secondary-arrows-active"],numberedNavActive:[516,"numbered-nav-active"],intlDateTimeFormat:[513,"intl-date-time-format"],page:[513],paginationBlogList:[32],currentPage:[32],hasErrors:[32],limitStylingAppends:[32],isLoading:[32],bannerMatrixReady:[32],nextPage:[32],previousPage:[32],device:[32],blogData:[32]},[[8,"BannerMatrixReady","handleBannerReady"],[0,"hpPageChange","hpPageChange"]]],[1,"helper-pagination",{nextPage:[1537,"next-page"],prevPage:[1537,"prev-page"],offset:[1538],limit:[1538],total:[1538],language:[1537],clientStyling:[1537,"client-styling"],clientStylingUrlContent:[1537,"client-styling-url-content"],arrowsActive:[1540,"arrows-active"],secondaryArrowsActive:[1540,"secondary-arrows-active"],numberedNavActive:[1540,"numbered-nav-active"],offsetInt:[32],lastPage:[32],previousPage:[32],limitInt:[32],totalInt:[32],pagesArray:[32],endInt:[32],limitStylingAppends:[32]}]]]],e)));
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{r as t,c as i,h as n}from"./p-ed2f13d0.js";const s=["ro","en","fr","ar","hu"],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"}},o=(t,i)=>{const n=i;return e[void 0!==n&&s.includes(n)?n:"en"][t]};const r=class{constructor(s){t(this,s),this.articleActionButton=i(this,"articleActionButton",7),this.language="en",this.userRoles="everyone",this.cmsEnv="stage",this.clientStyling="",this.clientStylingUrl="",this.showPublishingDate=!0,this.showImage=!0,this.showTitle=!0,this.showContent=!0,this.showButton=!0,this.postMessageEvent="articleActionButton",this.intlDateTimeFormat="",this.page="",this.paginationBlogList={offset:0},this.currentPage=0,this.hasErrors=!1,this.limitStylingAppends=!1,this.isLoading=!0,this.bannerMatrixReady=!1,this.nextPage="",this.previousPage="",this.device="",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.setClientStyling=()=>{let t=document.createElement("style");t.innerHTML=this.clientStyling,this.stylingContainer.prepend(t)},this.setClientStylingURL=()=>{let t=new URL(this.clientStylingUrl),i=document.createElement("style");fetch(t.href).then((t=>t.text())).then((t=>{i.innerHTML=t,setTimeout((()=>{this.stylingContainer.prepend(i)}),1)})).catch((t=>{console.log("error ",t)}))},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})}}getArticleId(t,i,n){this.articleActionButton.emit({postId:t,slug:i,customPath:n}),this.usePostmessage&&window.postMessage({type:this.postMessageEvent,postId:t,slug:i,customPath:n})}handleBannerReady(){this.bannerMatrixReady=!0}watchEndpoint(t,i){t&&t!=i&&this.cmsEndpoint&&this.language&&this.getBlogArticleGrid()}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())}connectedCallback(){this.cmsEndpoint&&this.language&&(this.page?(this.currentPage=this.currentPage+ +this.page-1,this.getBlogArticleGrid(+this.page)):this.getBlogArticleGrid())}componentDidLoad(){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")||t.includes("ipad")?function(){const t=screen.availWidth;return t<600?"mobile":t>=600&&t<1100?"tablet":void 0}():"desktop",i}()}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}getBlogArticleGrid(t){this.isLoading=!0;let i=new URL(`${this.cmsEndpoint}/${this.language}/blog-posts`);i.searchParams.append("per_page",JSON.stringify(this.blogsLimit)),i.searchParams.append("page",JSON.stringify(t||this.currentPage+1)),i.searchParams.append("env",this.cmsEnv),i.searchParams.append("userRoles",this.userRoles),i.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(i.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=>{this.lastPage=+t.pages.last.match(/&page=(\d+)/)[1];let i=t.items;this.nextPage=t.pages.next,this.previousPage=t.pages.previous;const n=this.findLatestFeatured(i);this.blogData=this.sortArticlesByDate(i),this.blogData=this.moveLatestFeatureToStart(i,n),this.blogData.items=i.map((t=>Object.assign(Object.assign({},t),{publishingDate:new Date(t.publishingDate).toLocaleDateString()}))),this.isLoading=!1})).catch((t=>{this.hasErrors=!0,console.log("Error",t)})).finally((()=>this.isLoading=!1))}componentDidRender(){!this.limitStylingAppends&&this.stylingContainer&&(this.clientStyling&&this.setClientStyling(),this.clientStylingUrl&&this.setClientStylingURL(),this.limitStylingAppends=!0)}formatDate(t){return new Intl.DateTimeFormat(this.intlDateTimeFormat).format(new Date(t))}render(){var t,i,s;return this.hasErrors?n("div",{class:"BlogArticleDetails"},n("div",{class:"Title"},o("error",this.language))):n("div",{ref:t=>this.stylingContainer=t},n("div",{class:"BlogPageContainer"},n("div",{class:"BlogGridPaginationWrapper"},1==this.paginationActive&&(null===(t=this.blogData)||void 0===t?void 0:t.items.length)>this.blogsLimit&&n("helper-pagination",{"next-page":this.nextPage,"prev-page":this.previousPage,offset:this.paginationBlogList.offset,limit:this.blogsLimit,total:null===(s=null===(i=this.blogData)||void 0===i?void 0:i.items)||void 0===s?void 0:s.length,language:this.language,"client-styling":this.clientStyling||this.defaultStyling,"arrows-active":this.arrowsActive||!1,"secondary-arrows-active":this.secondaryArrowsActive||!1,"numbered-nav-active":this.numberedNavActive||!1})),!this.isLoading&&n("div",{class:`GridContainerWrapper BlogPage-${this.currentPage}`},this.blogData&&this.blogData.map((t=>{var i,s;return n("div",{class:"GridContainer"},this.showPublishingDate&&n("div",{class:"BlogDate"},this.formatDate(null==t?void 0:t.publishingDate)),this.showImage&&n("div",{class:"BlogBanner"},(null===(i=t.image)||void 0===i?void 0:i.src)?n("img",{src:this.setImage(t.image),alt:t.image.slug}):(null===(s=t.video)||void 0===s?void 0:s.sources[this.device])?n("video",{src:t.video.sources[this.device],controls:!0}):n("h1",{style:{color:"white"}},"No Image")),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)},o("readmore",this.language))))})))))}static get watchers(){return{cmsEndpoint:["watchEndpoint"],language:["watchEndpoint"],cmsEnv:["watchEndpoint"],userRoles:["watchEndpoint"]}}};r.style=":host {\n display: block;\n}\n\n.GridContainerWrapper {\n display: grid;\n}\n\n.GridContainer {\n margin: auto;\n width: 100%;\n height: 280px;\n border-radius: 15px;\n background-color: #07072A;\n margin-bottom: 20px;\n display: grid;\n gap: 30px;\n grid-template-rows: 1fr 4fr 1fr 1fr;\n grid-template-columns: 30px 1fr 1fr 30px;\n}\n.GridContainer .BlogBanner {\n grid-column: 1/3;\n grid-row: 1/5;\n}\n.GridContainer .BlogBanner img {\n border-radius: 5px 0 0 5px;\n width: 100%;\n height: 280px;\n}\n.GridContainer .BlogDate {\n font-size: 12px;\n border-radius: 5px 5px 0 0;\n padding: 10px;\n width: fit-content;\n text-align: center;\n color: #FFFFFF;\n background-color: #0D0D4D;\n grid-column: 2/2;\n grid-row: 4/4;\n z-index: 1;\n}\n.GridContainer .BlogTitle {\n font-size: 24px;\n color: #FFF;\n margin-top: 20px;\n grid-column: 3/5;\n}\n.GridContainer .BlogContent {\n font-size: 14px;\n color: #FFF;\n width: 90%;\n max-height: 80px;\n overflow: hidden;\n text-overflow: ellipsis;\n grid-column: 3/5;\n}\n.GridContainer .BlogLink {\n grid-column: 3/5;\n color: #FFF;\n}\n.GridContainer .BlogLink button {\n font-size: 14px;\n border: none;\n padding: 0;\n background: none;\n color: #D0046C;\n cursor: pointer;\n}\n\n@container (max-width: 475px) {\n .GridContainerWrapper {\n display: grid;\n }\n\n .GridContainer {\n margin: auto;\n width: 100%;\n min-height: 400px;\n gap: 10%;\n padding-bottom: 30px;\n border-radius: 5px;\n background-color: #07072A;\n margin-bottom: 20px;\n display: grid;\n grid-template-rows: repeat(auto-fit, minmax(50px, 1fr));\n grid-template-rows: auto auto auto 50px;\n grid-template-columns: 15px auto auto 15px;\n gap: 10px;\n }\n .GridContainer .BlogBanner {\n grid-column: 1/5;\n grid-row: 1/3;\n margin: 0;\n }\n .GridContainer .BlogBanner img {\n width: 100%;\n height: 232px;\n border-radius: 5px 5px 0 0;\n }\n .GridContainer .BlogDate {\n grid-column: 2/3;\n grid-row: 2/3;\n font-size: 12px;\n border-radius: 5px 5px 0 0;\n padding: 10px;\n width: fit-content;\n text-align: center;\n color: #FFFFFF;\n background-color: #0D0D4D;\n z-index: 1;\n }\n .GridContainer .BlogTitle {\n grid-column: 2/4;\n font-size: 24px;\n color: #FFF;\n }\n .GridContainer .BlogContent {\n grid-column: 2/4;\n font-size: 14px;\n color: #FFF;\n }\n .GridContainer .BlogLink {\n grid-column: 2/4;\n color: #FFF;\n cursor: pointer;\n }\n .GridContainer .BlogLink button {\n font-size: 14px;\n border: none;\n background: none;\n color: #D0046C;\n cursor: pointer;\n }\n}";const a=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)),h=["ro","en","hu"],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"}},d=(t,i)=>{const n=i;return l[void 0!==n&&h.includes(n)?n:"en"][t]},c=class{constructor(n){t(this,n),this.hpPageChange=i(this,"hpPageChange",7),this.nextPage="",this.prevPage="",this.offset=0,this.limit=1,this.total=1,this.language="en",this.clientStyling="",this.clientStylingUrlContent="",this.lastPage=!1,this.previousPage=!1,this.pagesArray=[],this.endInt=0,this.userAgent=window.navigator.userAgent,this.currentPage=1,this.limitStylingAppends=!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.setClientStyling=()=>{let t=document.createElement("style");t.innerHTML=this.clientStyling,this.stylingContainer.prepend(t)},this.setClientStylingURL=()=>{let t=document.createElement("style");setTimeout((()=>{t.innerHTML=this.clientStylingUrlContent,this.stylingContainer.prepend(t)}),1)}}componentWillRender(){this.offsetInt=this.offset,this.limitInt=this.limit,this.currentPage=this.offsetInt/this.limitInt+1,this.limitInt=this.limit,this.totalInt=this.total,this.endInt=Math.ceil(this.totalInt/this.limitInt)-1,this.lastPage=!(this.offsetInt>=this.endInt*this.limitInt),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("..."))}componentDidRender(){!this.limitStylingAppends&&this.stylingContainer&&(this.clientStyling&&this.setClientStyling(),this.clientStylingUrlContent&&this.setClientStylingURL(),this.limitStylingAppends=!0)}render(){let t=n("ul",{class:"PaginationArea"},this.pagesArray.map(((t,i)=>n("li",{class:"PaginationItem"+(t===this.currentPage?" ActiveItem":" ")+" "+(a(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"},d("firstPage",this.language)),n("span",{class:"NavigationIcon"})),s=n("div",{class:"LeftItems"},this.secondaryArrowsActive&&i,n("button",{disabled:!this.prevPage,onClick:this.navigateTo.bind(this,"previousPage")},n("span",{class:"NavigationButton"},d("previousPage",this.language)),n("span",{class:"NavigationIcon"})));a(this.userAgent)&&(s=n("div",{class:"LeftItems"},n("button",{disabled:!this.prevPage,onClick:this.navigateTo.bind(this,"previousPage")},n("span",{class:"NavigationButton"},d("previousPage",this.language)),n("span",{class:"NavigationIcon"}))));let e=n("button",{disabled:!this.nextPage,onClick:this.navigateTo.bind(this,"lastPage")},n("span",{class:"NavigationButton"},d("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"},d("nextPage",this.language)),n("span",{class:"NavigationIcon"})),this.secondaryArrowsActive&&e);return a(this.userAgent)&&(o=n("div",{class:"RightItems"},n("button",{disabled:!this.nextPage,onClick:this.navigateTo.bind(this,"nextPage")},n("span",{class:"NavigationButton"},d("nextPage",this.language)),n("span",{class:"NavigationIcon"})))),n("div",{id:"PaginationContainer",ref:t=>this.stylingContainer=t},this.arrowsActive&&s,this.numberedNavActive&&t,this.arrowsActive&&o)}};c.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{r as blog_articles_grid,c as helper_pagination}
|
|
@@ -15,5 +15,5 @@ const patchBrowser = () => {
|
|
|
15
15
|
};
|
|
16
16
|
|
|
17
17
|
patchBrowser().then(options => {
|
|
18
|
-
return index.bootstrapLazy([["blog-articles-grid_2.cjs",[[1,"blog-articles-grid",{"cmsEndpoint":[513,"cms-endpoint"],"language":[513],"userRoles":[513,"user-roles"],"cmsEnv":[513,"cms-env"],"
|
|
18
|
+
return index.bootstrapLazy([["blog-articles-grid_2.cjs",[[1,"blog-articles-grid",{"cmsEndpoint":[513,"cms-endpoint"],"language":[513],"userRoles":[513,"user-roles"],"cmsEnv":[513,"cms-env"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"showPublishingDate":[516,"show-publishing-date"],"showImage":[516,"show-image"],"showTitle":[516,"show-title"],"showContent":[516,"show-content"],"showButton":[516,"show-button"],"usePostmessage":[516,"use-postmessage"],"postMessageEvent":[513,"post-message-event"],"blogsLimit":[514,"blogs-limit"],"paginationActive":[516,"pagination-active"],"arrowsActive":[516,"arrows-active"],"secondaryArrowsActive":[516,"secondary-arrows-active"],"numberedNavActive":[516,"numbered-nav-active"],"intlDateTimeFormat":[513,"intl-date-time-format"],"page":[513],"paginationBlogList":[32],"currentPage":[32],"hasErrors":[32],"limitStylingAppends":[32],"isLoading":[32],"bannerMatrixReady":[32],"nextPage":[32],"previousPage":[32],"device":[32],"blogData":[32]},[[8,"BannerMatrixReady","handleBannerReady"],[0,"hpPageChange","hpPageChange"]]],[1,"helper-pagination",{"nextPage":[1537,"next-page"],"prevPage":[1537,"prev-page"],"offset":[1538],"limit":[1538],"total":[1538],"language":[1537],"clientStyling":[1537,"client-styling"],"clientStylingUrlContent":[1537,"client-styling-url-content"],"arrowsActive":[1540,"arrows-active"],"secondaryArrowsActive":[1540,"secondary-arrows-active"],"numberedNavActive":[1540,"numbered-nav-active"],"offsetInt":[32],"lastPage":[32],"previousPage":[32],"limitInt":[32],"totalInt":[32],"pagesArray":[32],"endInt":[32],"limitStylingAppends":[32]}]]]], options);
|
|
19
19
|
});
|
|
@@ -273,9 +273,6 @@ const BlogArticlesGrid = class {
|
|
|
273
273
|
window.postMessage({ type: 'BlogArticlesGridActivePagination', currentPage: this.currentPage }, window.location.href);
|
|
274
274
|
this.getBlogArticleGrid();
|
|
275
275
|
}
|
|
276
|
-
handleAction(postId, slug, customPath) {
|
|
277
|
-
this.getArticleId(postId, slug, customPath);
|
|
278
|
-
}
|
|
279
276
|
connectedCallback() {
|
|
280
277
|
if (this.cmsEndpoint && this.language) {
|
|
281
278
|
if (this.page) {
|
|
@@ -367,19 +364,19 @@ const BlogArticlesGrid = class {
|
|
|
367
364
|
return new Intl.DateTimeFormat(this.intlDateTimeFormat).format(new Date(dateString));
|
|
368
365
|
}
|
|
369
366
|
render() {
|
|
370
|
-
var _a, _b;
|
|
367
|
+
var _a, _b, _c;
|
|
371
368
|
if (this.hasErrors) {
|
|
372
369
|
return (index.h("div", { class: "BlogArticleDetails" }, index.h("div", { class: "Title" }, translate$1('error', this.language))));
|
|
373
370
|
}
|
|
374
|
-
return (index.h("div", { ref: el => this.stylingContainer = el }, index.h("div", { class: "BlogGridPaginationWrapper" }, this.paginationActive == true && index.h("helper-pagination", { "next-page": this.nextPage, "prev-page": this.previousPage, offset: this.paginationBlogList.offset, limit: this.blogsLimit, total: (
|
|
371
|
+
return (index.h("div", { ref: el => this.stylingContainer = el }, index.h("div", { class: "BlogPageContainer" }, index.h("div", { class: "BlogGridPaginationWrapper" }, this.paginationActive == true && (((_a = this.blogData) === null || _a === void 0 ? void 0 : _a.items.length) > this.blogsLimit) && index.h("helper-pagination", { "next-page": this.nextPage, "prev-page": this.previousPage, offset: this.paginationBlogList.offset, limit: this.blogsLimit, total: (_c = (_b = this.blogData) === null || _b === void 0 ? void 0 : _b.items) === null || _c === void 0 ? void 0 : _c.length, language: this.language, "client-styling": this.clientStyling || this.defaultStyling, "arrows-active": this.arrowsActive || false, "secondary-arrows-active": this.secondaryArrowsActive || false, "numbered-nav-active": this.numberedNavActive || false })), (!this.isLoading) &&
|
|
375
372
|
index.h("div", { class: `GridContainerWrapper BlogPage-${this.currentPage}` }, this.blogData && this.blogData.map((data) => {
|
|
376
373
|
var _a, _b;
|
|
377
374
|
return index.h("div", { class: "GridContainer" }, this.showPublishingDate &&
|
|
378
375
|
index.h("div", { class: "BlogDate" }, this.formatDate(data === null || data === void 0 ? void 0 : data.publishingDate)), this.showImage && (index.h("div", { class: "BlogBanner" }, ((_a = data.image) === null || _a === void 0 ? void 0 : _a.src) ? (index.h("img", { src: this.setImage(data.image), alt: data.image.slug })) : (((_b = data.video) === null || _b === void 0 ? void 0 : _b.sources[this.device]) ? (index.h("video", { src: data.video.sources[this.device], controls: true })) : (index.h("h1", { style: { color: "white" } }, "No Image"))))), this.showTitle &&
|
|
379
376
|
index.h("div", { class: "BlogTitle" }, data === null || data === void 0 ? void 0 : data.title), this.showContent &&
|
|
380
377
|
this.renderContentConditionally(data === null || data === void 0 ? void 0 : data.descriptionPreview), this.showButton &&
|
|
381
|
-
index.h("div", { class: "BlogLink" }, index.h("button", { onClick: () => this.
|
|
382
|
-
}))));
|
|
378
|
+
index.h("div", { class: "BlogLink" }, index.h("button", { onClick: () => this.getArticleId(data === null || data === void 0 ? void 0 : data.postID, data === null || data === void 0 ? void 0 : data.slug, data === null || data === void 0 ? void 0 : data.customPath) }, translate$1('readmore', this.language))));
|
|
379
|
+
})))));
|
|
383
380
|
}
|
|
384
381
|
static get watchers() { return {
|
|
385
382
|
"cmsEndpoint": ["watchEndpoint"],
|
package/dist/cjs/loader.cjs.js
CHANGED
|
@@ -14,7 +14,7 @@ const patchEsm = () => {
|
|
|
14
14
|
const defineCustomElements = (win, options) => {
|
|
15
15
|
if (typeof window === 'undefined') return Promise.resolve();
|
|
16
16
|
return patchEsm().then(() => {
|
|
17
|
-
return index.bootstrapLazy([["blog-articles-grid_2.cjs",[[1,"blog-articles-grid",{"cmsEndpoint":[513,"cms-endpoint"],"language":[513],"userRoles":[513,"user-roles"],"cmsEnv":[513,"cms-env"],"
|
|
17
|
+
return index.bootstrapLazy([["blog-articles-grid_2.cjs",[[1,"blog-articles-grid",{"cmsEndpoint":[513,"cms-endpoint"],"language":[513],"userRoles":[513,"user-roles"],"cmsEnv":[513,"cms-env"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"showPublishingDate":[516,"show-publishing-date"],"showImage":[516,"show-image"],"showTitle":[516,"show-title"],"showContent":[516,"show-content"],"showButton":[516,"show-button"],"usePostmessage":[516,"use-postmessage"],"postMessageEvent":[513,"post-message-event"],"blogsLimit":[514,"blogs-limit"],"paginationActive":[516,"pagination-active"],"arrowsActive":[516,"arrows-active"],"secondaryArrowsActive":[516,"secondary-arrows-active"],"numberedNavActive":[516,"numbered-nav-active"],"intlDateTimeFormat":[513,"intl-date-time-format"],"page":[513],"paginationBlogList":[32],"currentPage":[32],"hasErrors":[32],"limitStylingAppends":[32],"isLoading":[32],"bannerMatrixReady":[32],"nextPage":[32],"previousPage":[32],"device":[32],"blogData":[32]},[[8,"BannerMatrixReady","handleBannerReady"],[0,"hpPageChange","hpPageChange"]]],[1,"helper-pagination",{"nextPage":[1537,"next-page"],"prevPage":[1537,"prev-page"],"offset":[1538],"limit":[1538],"total":[1538],"language":[1537],"clientStyling":[1537,"client-styling"],"clientStylingUrlContent":[1537,"client-styling-url-content"],"arrowsActive":[1540,"arrows-active"],"secondaryArrowsActive":[1540,"secondary-arrows-active"],"numberedNavActive":[1540,"numbered-nav-active"],"offsetInt":[32],"lastPage":[32],"previousPage":[32],"limitInt":[32],"totalInt":[32],"pagesArray":[32],"endInt":[32],"limitStylingAppends":[32]}]]]], options);
|
|
18
18
|
});
|
|
19
19
|
};
|
|
20
20
|
|
|
@@ -195,9 +195,6 @@ export class BlogArticlesGrid {
|
|
|
195
195
|
window.postMessage({ type: 'BlogArticlesGridActivePagination', currentPage: this.currentPage }, window.location.href);
|
|
196
196
|
this.getBlogArticleGrid();
|
|
197
197
|
}
|
|
198
|
-
handleAction(postId, slug, customPath) {
|
|
199
|
-
this.getArticleId(postId, slug, customPath);
|
|
200
|
-
}
|
|
201
198
|
connectedCallback() {
|
|
202
199
|
if (this.cmsEndpoint && this.language) {
|
|
203
200
|
if (this.page) {
|
|
@@ -289,28 +286,29 @@ export class BlogArticlesGrid {
|
|
|
289
286
|
return new Intl.DateTimeFormat(this.intlDateTimeFormat).format(new Date(dateString));
|
|
290
287
|
}
|
|
291
288
|
render() {
|
|
292
|
-
var _a, _b;
|
|
289
|
+
var _a, _b, _c;
|
|
293
290
|
if (this.hasErrors) {
|
|
294
291
|
return (h("div", { class: "BlogArticleDetails" },
|
|
295
292
|
h("div", { class: "Title" }, translate('error', this.language))));
|
|
296
293
|
}
|
|
297
294
|
return (h("div", { ref: el => this.stylingContainer = el },
|
|
298
|
-
h("div", { class: "
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
this.
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
h("
|
|
313
|
-
|
|
295
|
+
h("div", { class: "BlogPageContainer" },
|
|
296
|
+
h("div", { class: "BlogGridPaginationWrapper" }, this.paginationActive == true && (((_a = this.blogData) === null || _a === void 0 ? void 0 : _a.items.length) > this.blogsLimit) && h("helper-pagination", { "next-page": this.nextPage, "prev-page": this.previousPage, offset: this.paginationBlogList.offset, limit: this.blogsLimit, total: (_c = (_b = this.blogData) === null || _b === void 0 ? void 0 : _b.items) === null || _c === void 0 ? void 0 : _c.length, language: this.language, "client-styling": this.clientStyling || this.defaultStyling, "arrows-active": this.arrowsActive || false, "secondary-arrows-active": this.secondaryArrowsActive || false, "numbered-nav-active": this.numberedNavActive || false })),
|
|
297
|
+
(!this.isLoading) &&
|
|
298
|
+
h("div", { class: `GridContainerWrapper BlogPage-${this.currentPage}` }, this.blogData && this.blogData.map((data) => {
|
|
299
|
+
var _a, _b;
|
|
300
|
+
return h("div", { class: "GridContainer" },
|
|
301
|
+
this.showPublishingDate &&
|
|
302
|
+
h("div", { class: "BlogDate" }, this.formatDate(data === null || data === void 0 ? void 0 : data.publishingDate)),
|
|
303
|
+
this.showImage && (h("div", { class: "BlogBanner" }, ((_a = data.image) === null || _a === void 0 ? void 0 : _a.src) ? (h("img", { src: this.setImage(data.image), alt: data.image.slug })) : (((_b = data.video) === null || _b === void 0 ? void 0 : _b.sources[this.device]) ? (h("video", { src: data.video.sources[this.device], controls: true })) : (h("h1", { style: { color: "white" } }, "No Image"))))),
|
|
304
|
+
this.showTitle &&
|
|
305
|
+
h("div", { class: "BlogTitle" }, data === null || data === void 0 ? void 0 : data.title),
|
|
306
|
+
this.showContent &&
|
|
307
|
+
this.renderContentConditionally(data === null || data === void 0 ? void 0 : data.descriptionPreview),
|
|
308
|
+
this.showButton &&
|
|
309
|
+
h("div", { class: "BlogLink" },
|
|
310
|
+
h("button", { onClick: () => this.getArticleId(data === null || data === void 0 ? void 0 : data.postID, data === null || data === void 0 ? void 0 : data.slug, data === null || data === void 0 ? void 0 : data.customPath) }, translate('readmore', this.language))));
|
|
311
|
+
})))));
|
|
314
312
|
}
|
|
315
313
|
static get is() { return "blog-articles-grid"; }
|
|
316
314
|
static get encapsulation() { return "shadow"; }
|
|
@@ -392,23 +390,6 @@ export class BlogArticlesGrid {
|
|
|
392
390
|
"reflect": true,
|
|
393
391
|
"defaultValue": "'stage'"
|
|
394
392
|
},
|
|
395
|
-
"handleClick": {
|
|
396
|
-
"type": "string",
|
|
397
|
-
"mutable": false,
|
|
398
|
-
"complexType": {
|
|
399
|
-
"original": "string",
|
|
400
|
-
"resolved": "string",
|
|
401
|
-
"references": {}
|
|
402
|
-
},
|
|
403
|
-
"required": false,
|
|
404
|
-
"optional": false,
|
|
405
|
-
"docs": {
|
|
406
|
-
"tags": [],
|
|
407
|
-
"text": "Handle when you click on shome more button"
|
|
408
|
-
},
|
|
409
|
-
"attribute": "handle-click",
|
|
410
|
-
"reflect": true
|
|
411
|
-
},
|
|
412
393
|
"clientStyling": {
|
|
413
394
|
"type": "string",
|
|
414
395
|
"mutable": false,
|
|
@@ -701,7 +682,8 @@ export class BlogArticlesGrid {
|
|
|
701
682
|
"bannerMatrixReady": {},
|
|
702
683
|
"nextPage": {},
|
|
703
684
|
"previousPage": {},
|
|
704
|
-
"device": {}
|
|
685
|
+
"device": {},
|
|
686
|
+
"blogData": {}
|
|
705
687
|
}; }
|
|
706
688
|
static get events() { return [{
|
|
707
689
|
"method": "articleActionButton",
|
|
@@ -272,9 +272,6 @@ const BlogArticlesGrid$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEl
|
|
|
272
272
|
window.postMessage({ type: 'BlogArticlesGridActivePagination', currentPage: this.currentPage }, window.location.href);
|
|
273
273
|
this.getBlogArticleGrid();
|
|
274
274
|
}
|
|
275
|
-
handleAction(postId, slug, customPath) {
|
|
276
|
-
this.getArticleId(postId, slug, customPath);
|
|
277
|
-
}
|
|
278
275
|
connectedCallback() {
|
|
279
276
|
if (this.cmsEndpoint && this.language) {
|
|
280
277
|
if (this.page) {
|
|
@@ -366,19 +363,19 @@ const BlogArticlesGrid$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEl
|
|
|
366
363
|
return new Intl.DateTimeFormat(this.intlDateTimeFormat).format(new Date(dateString));
|
|
367
364
|
}
|
|
368
365
|
render() {
|
|
369
|
-
var _a, _b;
|
|
366
|
+
var _a, _b, _c;
|
|
370
367
|
if (this.hasErrors) {
|
|
371
368
|
return (h("div", { class: "BlogArticleDetails" }, h("div", { class: "Title" }, translate('error', this.language))));
|
|
372
369
|
}
|
|
373
|
-
return (h("div", { ref: el => this.stylingContainer = el }, h("div", { class: "BlogGridPaginationWrapper" }, this.paginationActive == true && h("helper-pagination", { "next-page": this.nextPage, "prev-page": this.previousPage, offset: this.paginationBlogList.offset, limit: this.blogsLimit, total: (
|
|
370
|
+
return (h("div", { ref: el => this.stylingContainer = el }, h("div", { class: "BlogPageContainer" }, h("div", { class: "BlogGridPaginationWrapper" }, this.paginationActive == true && (((_a = this.blogData) === null || _a === void 0 ? void 0 : _a.items.length) > this.blogsLimit) && h("helper-pagination", { "next-page": this.nextPage, "prev-page": this.previousPage, offset: this.paginationBlogList.offset, limit: this.blogsLimit, total: (_c = (_b = this.blogData) === null || _b === void 0 ? void 0 : _b.items) === null || _c === void 0 ? void 0 : _c.length, language: this.language, "client-styling": this.clientStyling || this.defaultStyling, "arrows-active": this.arrowsActive || false, "secondary-arrows-active": this.secondaryArrowsActive || false, "numbered-nav-active": this.numberedNavActive || false })), (!this.isLoading) &&
|
|
374
371
|
h("div", { class: `GridContainerWrapper BlogPage-${this.currentPage}` }, this.blogData && this.blogData.map((data) => {
|
|
375
372
|
var _a, _b;
|
|
376
373
|
return h("div", { class: "GridContainer" }, this.showPublishingDate &&
|
|
377
374
|
h("div", { class: "BlogDate" }, this.formatDate(data === null || data === void 0 ? void 0 : data.publishingDate)), this.showImage && (h("div", { class: "BlogBanner" }, ((_a = data.image) === null || _a === void 0 ? void 0 : _a.src) ? (h("img", { src: this.setImage(data.image), alt: data.image.slug })) : (((_b = data.video) === null || _b === void 0 ? void 0 : _b.sources[this.device]) ? (h("video", { src: data.video.sources[this.device], controls: true })) : (h("h1", { style: { color: "white" } }, "No Image"))))), this.showTitle &&
|
|
378
375
|
h("div", { class: "BlogTitle" }, data === null || data === void 0 ? void 0 : data.title), this.showContent &&
|
|
379
376
|
this.renderContentConditionally(data === null || data === void 0 ? void 0 : data.descriptionPreview), this.showButton &&
|
|
380
|
-
h("div", { class: "BlogLink" }, h("button", { onClick: () => this.
|
|
381
|
-
}))));
|
|
377
|
+
h("div", { class: "BlogLink" }, h("button", { onClick: () => this.getArticleId(data === null || data === void 0 ? void 0 : data.postID, data === null || data === void 0 ? void 0 : data.slug, data === null || data === void 0 ? void 0 : data.customPath) }, translate('readmore', this.language))));
|
|
378
|
+
})))));
|
|
382
379
|
}
|
|
383
380
|
static get watchers() { return {
|
|
384
381
|
"cmsEndpoint": ["watchEndpoint"],
|
|
@@ -392,7 +389,6 @@ const BlogArticlesGrid$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEl
|
|
|
392
389
|
"language": [513],
|
|
393
390
|
"userRoles": [513, "user-roles"],
|
|
394
391
|
"cmsEnv": [513, "cms-env"],
|
|
395
|
-
"handleClick": [513, "handle-click"],
|
|
396
392
|
"clientStyling": [513, "client-styling"],
|
|
397
393
|
"clientStylingUrl": [513, "client-styling-url"],
|
|
398
394
|
"showPublishingDate": [516, "show-publishing-date"],
|
|
@@ -417,7 +413,8 @@ const BlogArticlesGrid$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEl
|
|
|
417
413
|
"bannerMatrixReady": [32],
|
|
418
414
|
"nextPage": [32],
|
|
419
415
|
"previousPage": [32],
|
|
420
|
-
"device": [32]
|
|
416
|
+
"device": [32],
|
|
417
|
+
"blogData": [32]
|
|
421
418
|
}, [[8, "BannerMatrixReady", "handleBannerReady"], [0, "hpPageChange", "hpPageChange"]]]);
|
|
422
419
|
function defineCustomElement$1() {
|
|
423
420
|
if (typeof customElements === "undefined") {
|
|
@@ -13,5 +13,5 @@ const patchBrowser = () => {
|
|
|
13
13
|
};
|
|
14
14
|
|
|
15
15
|
patchBrowser().then(options => {
|
|
16
|
-
return bootstrapLazy([["blog-articles-grid_2",[[1,"blog-articles-grid",{"cmsEndpoint":[513,"cms-endpoint"],"language":[513],"userRoles":[513,"user-roles"],"cmsEnv":[513,"cms-env"],"
|
|
16
|
+
return bootstrapLazy([["blog-articles-grid_2",[[1,"blog-articles-grid",{"cmsEndpoint":[513,"cms-endpoint"],"language":[513],"userRoles":[513,"user-roles"],"cmsEnv":[513,"cms-env"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"showPublishingDate":[516,"show-publishing-date"],"showImage":[516,"show-image"],"showTitle":[516,"show-title"],"showContent":[516,"show-content"],"showButton":[516,"show-button"],"usePostmessage":[516,"use-postmessage"],"postMessageEvent":[513,"post-message-event"],"blogsLimit":[514,"blogs-limit"],"paginationActive":[516,"pagination-active"],"arrowsActive":[516,"arrows-active"],"secondaryArrowsActive":[516,"secondary-arrows-active"],"numberedNavActive":[516,"numbered-nav-active"],"intlDateTimeFormat":[513,"intl-date-time-format"],"page":[513],"paginationBlogList":[32],"currentPage":[32],"hasErrors":[32],"limitStylingAppends":[32],"isLoading":[32],"bannerMatrixReady":[32],"nextPage":[32],"previousPage":[32],"device":[32],"blogData":[32]},[[8,"BannerMatrixReady","handleBannerReady"],[0,"hpPageChange","hpPageChange"]]],[1,"helper-pagination",{"nextPage":[1537,"next-page"],"prevPage":[1537,"prev-page"],"offset":[1538],"limit":[1538],"total":[1538],"language":[1537],"clientStyling":[1537,"client-styling"],"clientStylingUrlContent":[1537,"client-styling-url-content"],"arrowsActive":[1540,"arrows-active"],"secondaryArrowsActive":[1540,"secondary-arrows-active"],"numberedNavActive":[1540,"numbered-nav-active"],"offsetInt":[32],"lastPage":[32],"previousPage":[32],"limitInt":[32],"totalInt":[32],"pagesArray":[32],"endInt":[32],"limitStylingAppends":[32]}]]]], options);
|
|
17
17
|
});
|
|
@@ -269,9 +269,6 @@ const BlogArticlesGrid = class {
|
|
|
269
269
|
window.postMessage({ type: 'BlogArticlesGridActivePagination', currentPage: this.currentPage }, window.location.href);
|
|
270
270
|
this.getBlogArticleGrid();
|
|
271
271
|
}
|
|
272
|
-
handleAction(postId, slug, customPath) {
|
|
273
|
-
this.getArticleId(postId, slug, customPath);
|
|
274
|
-
}
|
|
275
272
|
connectedCallback() {
|
|
276
273
|
if (this.cmsEndpoint && this.language) {
|
|
277
274
|
if (this.page) {
|
|
@@ -363,19 +360,19 @@ const BlogArticlesGrid = class {
|
|
|
363
360
|
return new Intl.DateTimeFormat(this.intlDateTimeFormat).format(new Date(dateString));
|
|
364
361
|
}
|
|
365
362
|
render() {
|
|
366
|
-
var _a, _b;
|
|
363
|
+
var _a, _b, _c;
|
|
367
364
|
if (this.hasErrors) {
|
|
368
365
|
return (h("div", { class: "BlogArticleDetails" }, h("div", { class: "Title" }, translate$1('error', this.language))));
|
|
369
366
|
}
|
|
370
|
-
return (h("div", { ref: el => this.stylingContainer = el }, h("div", { class: "BlogGridPaginationWrapper" }, this.paginationActive == true && h("helper-pagination", { "next-page": this.nextPage, "prev-page": this.previousPage, offset: this.paginationBlogList.offset, limit: this.blogsLimit, total: (
|
|
367
|
+
return (h("div", { ref: el => this.stylingContainer = el }, h("div", { class: "BlogPageContainer" }, h("div", { class: "BlogGridPaginationWrapper" }, this.paginationActive == true && (((_a = this.blogData) === null || _a === void 0 ? void 0 : _a.items.length) > this.blogsLimit) && h("helper-pagination", { "next-page": this.nextPage, "prev-page": this.previousPage, offset: this.paginationBlogList.offset, limit: this.blogsLimit, total: (_c = (_b = this.blogData) === null || _b === void 0 ? void 0 : _b.items) === null || _c === void 0 ? void 0 : _c.length, language: this.language, "client-styling": this.clientStyling || this.defaultStyling, "arrows-active": this.arrowsActive || false, "secondary-arrows-active": this.secondaryArrowsActive || false, "numbered-nav-active": this.numberedNavActive || false })), (!this.isLoading) &&
|
|
371
368
|
h("div", { class: `GridContainerWrapper BlogPage-${this.currentPage}` }, this.blogData && this.blogData.map((data) => {
|
|
372
369
|
var _a, _b;
|
|
373
370
|
return h("div", { class: "GridContainer" }, this.showPublishingDate &&
|
|
374
371
|
h("div", { class: "BlogDate" }, this.formatDate(data === null || data === void 0 ? void 0 : data.publishingDate)), this.showImage && (h("div", { class: "BlogBanner" }, ((_a = data.image) === null || _a === void 0 ? void 0 : _a.src) ? (h("img", { src: this.setImage(data.image), alt: data.image.slug })) : (((_b = data.video) === null || _b === void 0 ? void 0 : _b.sources[this.device]) ? (h("video", { src: data.video.sources[this.device], controls: true })) : (h("h1", { style: { color: "white" } }, "No Image"))))), this.showTitle &&
|
|
375
372
|
h("div", { class: "BlogTitle" }, data === null || data === void 0 ? void 0 : data.title), this.showContent &&
|
|
376
373
|
this.renderContentConditionally(data === null || data === void 0 ? void 0 : data.descriptionPreview), this.showButton &&
|
|
377
|
-
h("div", { class: "BlogLink" }, h("button", { onClick: () => this.
|
|
378
|
-
}))));
|
|
374
|
+
h("div", { class: "BlogLink" }, h("button", { onClick: () => this.getArticleId(data === null || data === void 0 ? void 0 : data.postID, data === null || data === void 0 ? void 0 : data.slug, data === null || data === void 0 ? void 0 : data.customPath) }, translate$1('readmore', this.language))));
|
|
375
|
+
})))));
|
|
379
376
|
}
|
|
380
377
|
static get watchers() { return {
|
|
381
378
|
"cmsEndpoint": ["watchEndpoint"],
|
package/dist/esm/loader.js
CHANGED
|
@@ -10,7 +10,7 @@ const patchEsm = () => {
|
|
|
10
10
|
const defineCustomElements = (win, options) => {
|
|
11
11
|
if (typeof window === 'undefined') return Promise.resolve();
|
|
12
12
|
return patchEsm().then(() => {
|
|
13
|
-
return bootstrapLazy([["blog-articles-grid_2",[[1,"blog-articles-grid",{"cmsEndpoint":[513,"cms-endpoint"],"language":[513],"userRoles":[513,"user-roles"],"cmsEnv":[513,"cms-env"],"
|
|
13
|
+
return bootstrapLazy([["blog-articles-grid_2",[[1,"blog-articles-grid",{"cmsEndpoint":[513,"cms-endpoint"],"language":[513],"userRoles":[513,"user-roles"],"cmsEnv":[513,"cms-env"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"showPublishingDate":[516,"show-publishing-date"],"showImage":[516,"show-image"],"showTitle":[516,"show-title"],"showContent":[516,"show-content"],"showButton":[516,"show-button"],"usePostmessage":[516,"use-postmessage"],"postMessageEvent":[513,"post-message-event"],"blogsLimit":[514,"blogs-limit"],"paginationActive":[516,"pagination-active"],"arrowsActive":[516,"arrows-active"],"secondaryArrowsActive":[516,"secondary-arrows-active"],"numberedNavActive":[516,"numbered-nav-active"],"intlDateTimeFormat":[513,"intl-date-time-format"],"page":[513],"paginationBlogList":[32],"currentPage":[32],"hasErrors":[32],"limitStylingAppends":[32],"isLoading":[32],"bannerMatrixReady":[32],"nextPage":[32],"previousPage":[32],"device":[32],"blogData":[32]},[[8,"BannerMatrixReady","handleBannerReady"],[0,"hpPageChange","hpPageChange"]]],[1,"helper-pagination",{"nextPage":[1537,"next-page"],"prevPage":[1537,"prev-page"],"offset":[1538],"limit":[1538],"total":[1538],"language":[1537],"clientStyling":[1537,"client-styling"],"clientStylingUrlContent":[1537,"client-styling-url-content"],"arrowsActive":[1540,"arrows-active"],"secondaryArrowsActive":[1540,"secondary-arrows-active"],"numberedNavActive":[1540,"numbered-nav-active"],"offsetInt":[32],"lastPage":[32],"previousPage":[32],"limitInt":[32],"totalInt":[32],"pagesArray":[32],"endInt":[32],"limitStylingAppends":[32]}]]]], options);
|
|
14
14
|
});
|
|
15
15
|
};
|
|
16
16
|
|
|
@@ -17,10 +17,6 @@ export declare class BlogArticlesGrid {
|
|
|
17
17
|
* CMS Endpoint stage
|
|
18
18
|
*/
|
|
19
19
|
cmsEnv: string;
|
|
20
|
-
/**
|
|
21
|
-
* Handle when you click on shome more button
|
|
22
|
-
*/
|
|
23
|
-
handleClick: string;
|
|
24
20
|
/**
|
|
25
21
|
* Client custom styling via string
|
|
26
22
|
*/
|
|
@@ -96,14 +92,13 @@ export declare class BlogArticlesGrid {
|
|
|
96
92
|
nextPage: string;
|
|
97
93
|
previousPage: string;
|
|
98
94
|
device: string;
|
|
95
|
+
blogData: any;
|
|
99
96
|
lastPage: number;
|
|
100
97
|
handleBannerReady(): void;
|
|
101
98
|
watchEndpoint(newValue: string, oldValue: string): void;
|
|
102
99
|
private stylingContainer;
|
|
103
|
-
private blogData;
|
|
104
100
|
private defaultStyling;
|
|
105
101
|
hpPageChange(event: CustomEvent<BlogArticlesGrid>): void;
|
|
106
|
-
handleAction(postId: any, slug: string, customPath: string): void;
|
|
107
102
|
connectedCallback(): void;
|
|
108
103
|
componentDidLoad(): void;
|
|
109
104
|
sortArticlesByDate(arr: any): any;
|
|
@@ -31,10 +31,6 @@ export namespace Components {
|
|
|
31
31
|
* CMS Endpoint stage
|
|
32
32
|
*/
|
|
33
33
|
"cmsEnv": string;
|
|
34
|
-
/**
|
|
35
|
-
* Handle when you click on shome more button
|
|
36
|
-
*/
|
|
37
|
-
"handleClick": string;
|
|
38
34
|
/**
|
|
39
35
|
* Intl date format
|
|
40
36
|
*/
|
|
@@ -130,10 +126,6 @@ declare namespace LocalJSX {
|
|
|
130
126
|
* CMS Endpoint stage
|
|
131
127
|
*/
|
|
132
128
|
"cmsEnv"?: string;
|
|
133
|
-
/**
|
|
134
|
-
* Handle when you click on shome more button
|
|
135
|
-
*/
|
|
136
|
-
"handleClick"?: string;
|
|
137
129
|
/**
|
|
138
130
|
* Intl date format
|
|
139
131
|
*/
|
package/package.json
CHANGED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import{r as t,c as i,h as n}from"./p-ed2f13d0.js";const s=["ro","en","fr","ar","hu"],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"}},o=(t,i)=>{const n=i;return e[void 0!==n&&s.includes(n)?n:"en"][t]};const r=class{constructor(s){t(this,s),this.articleActionButton=i(this,"articleActionButton",7),this.language="en",this.userRoles="everyone",this.cmsEnv="stage",this.clientStyling="",this.clientStylingUrl="",this.showPublishingDate=!0,this.showImage=!0,this.showTitle=!0,this.showContent=!0,this.showButton=!0,this.postMessageEvent="articleActionButton",this.intlDateTimeFormat="",this.page="",this.paginationBlogList={offset:0},this.currentPage=0,this.hasErrors=!1,this.limitStylingAppends=!1,this.isLoading=!0,this.bannerMatrixReady=!1,this.nextPage="",this.previousPage="",this.device="",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.setClientStyling=()=>{let t=document.createElement("style");t.innerHTML=this.clientStyling,this.stylingContainer.prepend(t)},this.setClientStylingURL=()=>{let t=new URL(this.clientStylingUrl),i=document.createElement("style");fetch(t.href).then((t=>t.text())).then((t=>{i.innerHTML=t,setTimeout((()=>{this.stylingContainer.prepend(i)}),1)})).catch((t=>{console.log("error ",t)}))},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})}}getArticleId(t,i,n){this.articleActionButton.emit({postId:t,slug:i,customPath:n}),this.usePostmessage&&window.postMessage({type:this.postMessageEvent,postId:t,slug:i,customPath:n})}handleBannerReady(){this.bannerMatrixReady=!0}watchEndpoint(t,i){t&&t!=i&&this.cmsEndpoint&&this.language&&this.getBlogArticleGrid()}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())}handleAction(t,i,n){this.getArticleId(t,i,n)}connectedCallback(){this.cmsEndpoint&&this.language&&(this.page?(this.currentPage=this.currentPage+ +this.page-1,this.getBlogArticleGrid(+this.page)):this.getBlogArticleGrid())}componentDidLoad(){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")||t.includes("ipad")?function(){const t=screen.availWidth;return t<600?"mobile":t>=600&&t<1100?"tablet":void 0}():"desktop",i}()}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}getBlogArticleGrid(t){this.isLoading=!0;let i=new URL(`${this.cmsEndpoint}/${this.language}/blog-posts`);i.searchParams.append("per_page",JSON.stringify(this.blogsLimit)),i.searchParams.append("page",JSON.stringify(t||this.currentPage+1)),i.searchParams.append("env",this.cmsEnv),i.searchParams.append("userRoles",this.userRoles),i.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(i.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=>{this.lastPage=+t.pages.last.match(/&page=(\d+)/)[1];let i=t.items;this.nextPage=t.pages.next,this.previousPage=t.pages.previous;const n=this.findLatestFeatured(i);this.blogData=this.sortArticlesByDate(i),this.blogData=this.moveLatestFeatureToStart(i,n),this.blogData.items=i.map((t=>Object.assign(Object.assign({},t),{publishingDate:new Date(t.publishingDate).toLocaleDateString()}))),this.isLoading=!1})).catch((t=>{this.hasErrors=!0,console.log("Error",t)})).finally((()=>this.isLoading=!1))}componentDidRender(){!this.limitStylingAppends&&this.stylingContainer&&(this.clientStyling&&this.setClientStyling(),this.clientStylingUrl&&this.setClientStylingURL(),this.limitStylingAppends=!0)}formatDate(t){return new Intl.DateTimeFormat(this.intlDateTimeFormat).format(new Date(t))}render(){var t,i;return this.hasErrors?n("div",{class:"BlogArticleDetails"},n("div",{class:"Title"},o("error",this.language))):n("div",{ref:t=>this.stylingContainer=t},n("div",{class:"BlogGridPaginationWrapper"},1==this.paginationActive&&n("helper-pagination",{"next-page":this.nextPage,"prev-page":this.previousPage,offset:this.paginationBlogList.offset,limit:this.blogsLimit,total:null===(i=null===(t=this.blogData)||void 0===t?void 0:t.items)||void 0===i?void 0:i.length,language:this.language,"client-styling":this.clientStyling||this.defaultStyling,"arrows-active":this.arrowsActive||!1,"secondary-arrows-active":this.secondaryArrowsActive||!1,"numbered-nav-active":this.numberedNavActive||!1})),!this.isLoading&&n("div",{class:`GridContainerWrapper BlogPage-${this.currentPage}`},this.blogData&&this.blogData.map((t=>{var i,s;return n("div",{class:"GridContainer"},this.showPublishingDate&&n("div",{class:"BlogDate"},this.formatDate(null==t?void 0:t.publishingDate)),this.showImage&&n("div",{class:"BlogBanner"},(null===(i=t.image)||void 0===i?void 0:i.src)?n("img",{src:this.setImage(t.image),alt:t.image.slug}):(null===(s=t.video)||void 0===s?void 0:s.sources[this.device])?n("video",{src:t.video.sources[this.device],controls:!0}):n("h1",{style:{color:"white"}},"No Image")),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.handleAction(null==t?void 0:t.postID,null==t?void 0:t.slug,null==t?void 0:t.customPath)},o("readmore",this.language))))}))))}static get watchers(){return{cmsEndpoint:["watchEndpoint"],language:["watchEndpoint"],cmsEnv:["watchEndpoint"],userRoles:["watchEndpoint"]}}};r.style=":host {\n display: block;\n}\n\n.GridContainerWrapper {\n display: grid;\n}\n\n.GridContainer {\n margin: auto;\n width: 100%;\n height: 280px;\n border-radius: 15px;\n background-color: #07072A;\n margin-bottom: 20px;\n display: grid;\n gap: 30px;\n grid-template-rows: 1fr 4fr 1fr 1fr;\n grid-template-columns: 30px 1fr 1fr 30px;\n}\n.GridContainer .BlogBanner {\n grid-column: 1/3;\n grid-row: 1/5;\n}\n.GridContainer .BlogBanner img {\n border-radius: 5px 0 0 5px;\n width: 100%;\n height: 280px;\n}\n.GridContainer .BlogDate {\n font-size: 12px;\n border-radius: 5px 5px 0 0;\n padding: 10px;\n width: fit-content;\n text-align: center;\n color: #FFFFFF;\n background-color: #0D0D4D;\n grid-column: 2/2;\n grid-row: 4/4;\n z-index: 1;\n}\n.GridContainer .BlogTitle {\n font-size: 24px;\n color: #FFF;\n margin-top: 20px;\n grid-column: 3/5;\n}\n.GridContainer .BlogContent {\n font-size: 14px;\n color: #FFF;\n width: 90%;\n max-height: 80px;\n overflow: hidden;\n text-overflow: ellipsis;\n grid-column: 3/5;\n}\n.GridContainer .BlogLink {\n grid-column: 3/5;\n color: #FFF;\n}\n.GridContainer .BlogLink button {\n font-size: 14px;\n border: none;\n padding: 0;\n background: none;\n color: #D0046C;\n cursor: pointer;\n}\n\n@container (max-width: 475px) {\n .GridContainerWrapper {\n display: grid;\n }\n\n .GridContainer {\n margin: auto;\n width: 100%;\n min-height: 400px;\n gap: 10%;\n padding-bottom: 30px;\n border-radius: 5px;\n background-color: #07072A;\n margin-bottom: 20px;\n display: grid;\n grid-template-rows: repeat(auto-fit, minmax(50px, 1fr));\n grid-template-rows: auto auto auto 50px;\n grid-template-columns: 15px auto auto 15px;\n gap: 10px;\n }\n .GridContainer .BlogBanner {\n grid-column: 1/5;\n grid-row: 1/3;\n margin: 0;\n }\n .GridContainer .BlogBanner img {\n width: 100%;\n height: 232px;\n border-radius: 5px 5px 0 0;\n }\n .GridContainer .BlogDate {\n grid-column: 2/3;\n grid-row: 2/3;\n font-size: 12px;\n border-radius: 5px 5px 0 0;\n padding: 10px;\n width: fit-content;\n text-align: center;\n color: #FFFFFF;\n background-color: #0D0D4D;\n z-index: 1;\n }\n .GridContainer .BlogTitle {\n grid-column: 2/4;\n font-size: 24px;\n color: #FFF;\n }\n .GridContainer .BlogContent {\n grid-column: 2/4;\n font-size: 14px;\n color: #FFF;\n }\n .GridContainer .BlogLink {\n grid-column: 2/4;\n color: #FFF;\n cursor: pointer;\n }\n .GridContainer .BlogLink button {\n font-size: 14px;\n border: none;\n background: none;\n color: #D0046C;\n cursor: pointer;\n }\n}";const a=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)),h=["ro","en","hu"],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"}},d=(t,i)=>{const n=i;return l[void 0!==n&&h.includes(n)?n:"en"][t]},c=class{constructor(n){t(this,n),this.hpPageChange=i(this,"hpPageChange",7),this.nextPage="",this.prevPage="",this.offset=0,this.limit=1,this.total=1,this.language="en",this.clientStyling="",this.clientStylingUrlContent="",this.lastPage=!1,this.previousPage=!1,this.pagesArray=[],this.endInt=0,this.userAgent=window.navigator.userAgent,this.currentPage=1,this.limitStylingAppends=!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.setClientStyling=()=>{let t=document.createElement("style");t.innerHTML=this.clientStyling,this.stylingContainer.prepend(t)},this.setClientStylingURL=()=>{let t=document.createElement("style");setTimeout((()=>{t.innerHTML=this.clientStylingUrlContent,this.stylingContainer.prepend(t)}),1)}}componentWillRender(){this.offsetInt=this.offset,this.limitInt=this.limit,this.currentPage=this.offsetInt/this.limitInt+1,this.limitInt=this.limit,this.totalInt=this.total,this.endInt=Math.ceil(this.totalInt/this.limitInt)-1,this.lastPage=!(this.offsetInt>=this.endInt*this.limitInt),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("..."))}componentDidRender(){!this.limitStylingAppends&&this.stylingContainer&&(this.clientStyling&&this.setClientStyling(),this.clientStylingUrlContent&&this.setClientStylingURL(),this.limitStylingAppends=!0)}render(){let t=n("ul",{class:"PaginationArea"},this.pagesArray.map(((t,i)=>n("li",{class:"PaginationItem"+(t===this.currentPage?" ActiveItem":" ")+" "+(a(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"},d("firstPage",this.language)),n("span",{class:"NavigationIcon"})),s=n("div",{class:"LeftItems"},this.secondaryArrowsActive&&i,n("button",{disabled:!this.prevPage,onClick:this.navigateTo.bind(this,"previousPage")},n("span",{class:"NavigationButton"},d("previousPage",this.language)),n("span",{class:"NavigationIcon"})));a(this.userAgent)&&(s=n("div",{class:"LeftItems"},n("button",{disabled:!this.prevPage,onClick:this.navigateTo.bind(this,"previousPage")},n("span",{class:"NavigationButton"},d("previousPage",this.language)),n("span",{class:"NavigationIcon"}))));let e=n("button",{disabled:!this.nextPage,onClick:this.navigateTo.bind(this,"lastPage")},n("span",{class:"NavigationButton"},d("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"},d("nextPage",this.language)),n("span",{class:"NavigationIcon"})),this.secondaryArrowsActive&&e);return a(this.userAgent)&&(o=n("div",{class:"RightItems"},n("button",{disabled:!this.nextPage,onClick:this.navigateTo.bind(this,"nextPage")},n("span",{class:"NavigationButton"},d("nextPage",this.language)),n("span",{class:"NavigationIcon"})))),n("div",{id:"PaginationContainer",ref:t=>this.stylingContainer=t},this.arrowsActive&&s,this.numberedNavActive&&t,this.arrowsActive&&o)}};c.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{r as blog_articles_grid,c as helper_pagination}
|