@everymatrix/blog-articles-grid 1.13.15 → 1.13.16

package/dist/blog-articles-grid/blog-articles-grid.esm.js

@@ -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-341b0ae5",[[1,"blog-articles-grid",{cmsEndpoint:[1,"cms-endpoint"],language:[1],handleClick:[1,"handle-click"],clientStyling:[1,"client-styling"],clientStylingUrl:[1,"client-styling-url"],showPublishingDate:[4,"show-publishing-date"],showImage:[4,"show-image"],showTitle:[4,"show-title"],showContent:[4,"show-content"],showButton:[4,"show-button"],usePostmessage:[4,"use-postmessage"],postMessageEvent:[1,"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"],paginationBlogList:[32],currentPage:[32],hasErrors:[32],limitStylingAppends:[32],isLoading:[32],bannerMatrixReady:[32],nextPage:[32],previousPage:[32],device:[32]},[[8,"BannerMatrixReady","handleBannerReady"],[0,"hpPageChange","hpPageChange"]]],[1,"helper-pagination",{nextPage:[1537,"next-page"],prevPage:[1537,"prev-page"],offset:[1538],limit:[1538],total:[1538],language:[1537],clientStyling:[1537,"client-styling"],clientStylingUrlContent:[1537,"client-styling-url-content"],arrowsActive:[1540,"arrows-active"],secondaryArrowsActive:[1540,"secondary-arrows-active"],numberedNavActive:[1540,"numbered-nav-active"],offsetInt:[32],lastPage:[32],previousPage:[32],limitInt:[32],totalInt:[32],pagesArray:[32],endInt:[32],limitStylingAppends:[32]}]]]],e)));
+import{p as e,b as t}from"./p-ed2f13d0.js";(()=>{const t=import.meta.url,n={};return""!==t&&(n.resourcesUrl=new URL(".",t).href),e(n)})().then((e=>t([["p-ce775053",[[1,"blog-articles-grid",{cmsEndpoint:[513,"cms-endpoint"],language:[513],handleClick:[513,"handle-click"],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"],userRoles:[513,"user-roles"],cmsStage:[513,"cms-stage"],paginationBlogList:[32],currentPage:[32],hasErrors:[32],limitStylingAppends:[32],isLoading:[32],bannerMatrixReady:[32],nextPage:[32],previousPage:[32],device:[32]},[[8,"BannerMatrixReady","handleBannerReady"],[0,"hpPageChange","hpPageChange"]]],[1,"helper-pagination",{firstPage:[1540,"first-page"],previousPage:[1540,"previous-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],limitInt:[32],totalInt:[32],pagesArray:[32],endInt:[32],limitStylingAppends:[32]}]]]],e)));

package/dist/blog-articles-grid/p-ce775053.entry.js

@@ -0,0 +1 @@
+import{r as t,c as i,h as n}from"./p-ed2f13d0.js";const e=["ro","en","fr","ar","hu"],s={en:{error:"Error",readmore:"Read more"},ro:{error:"Eroare",readmore:"Read more"},fr:{error:"Error",readmore:"Read more"},ar:{error:"خطأ",readmore:"Read more"},hu:{error:"خطأ",readmore:"Read more"}},o=(t,i)=>{const n=i;return s[void 0!==n&&e.includes(n)?n:"en"][t]},r=class{constructor(e){t(this,e),this.articleActionButton=i(this,"articleActionButton",7),this.language="en",this.clientStyling="",this.clientStylingUrl="",this.showPublishingDate=!0,this.showImage=!0,this.showTitle=!0,this.showContent=!0,this.showButton=!0,this.postMessageEvent="articleActionButton",this.userRoles="everyone",this.cmsStage="stage",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.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){this.articleActionButton.emit({postId:t}),this.usePostmessage&&window.postMessage({type:this.postMessageEvent,postId:t})}handleBannerReady(){this.bannerMatrixReady=!0}watchEndpoint(t,i){t&&t!=i&&this.cmsEndpoint&&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.currentPage+1>this.lastPage?this.nextPage=null:this.currentPage<0?this.previousPage=null:this.getBlogArticleGrid()}handleAction(t){this.getArticleId(t)}connectedCallback(){this.cmsEndpoint&&this.language&&this.getBlogArticleGrid()}componentDidLoad(){window.postMessage({type:"BlogArticlesGridLoaded"},window.location.href),this.device=function(){const t=navigator.userAgent.toLowerCase(),i=screen.availWidth,n=screen.availHeight;if(t.includes("iphone"))return"mobile";if(t.includes("android")){if(n>i&&i<800)return"mobile";if(i>n&&n<800)return"tablet"}return"desktop"}()}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(){this.isLoading=!0;let t=new URL(`${this.cmsEndpoint}/${this.language}/blog-posts`);t.searchParams.append("per_page",JSON.stringify(this.blogsLimit)),t.searchParams.append("page",JSON.stringify(this.currentPage+1)),t.searchParams.append("env",this.cmsStage),t.searchParams.append("userRoles",this.userRoles),t.searchParams.append("platform",(()=>{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(t.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.slice(t.pages.last.lastIndexOf("=")+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)}formatDateToYearMonthDay(t){let i=new Date(t),n=i.getFullYear(),e=String(i.getMonth()+1).padStart(2,"0");return`${String(i.getDate()).padStart(2,"0")}-${e}-${n}`}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.map((t=>{var i,e;return n("div",{class:"GridContainer"},this.showPublishingDate&&n("div",{class:"BlogDate"},this.formatDateToYearMonthDay(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:t.image.src,alt:t.image.src}):(null===(e=t.video)||void 0===e?void 0:e.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.content),this.showButton&&n("div",{class:"BlogLink"},n("button",{onClick:()=>this.handleAction(null==t?void 0:t.postID)},o("readmore",this.language))))}))))}static get watchers(){return{cmsEndpoint:["watchEndpoint"],language:["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"],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"}},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.firstPage=!1,this.previousPage=!1,this.offset=0,this.limit=1,this.total=1,this.language="en",this.clientStyling="",this.clientStylingUrlContent="",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.previousPage,onClick:this.navigateTo.bind(this,"firstPage")},n("span",{class:"NavigationButton"},d("firstPage",this.language)),n("span",{class:"NavigationIcon"})),e=n("div",{class:"LeftItems"},this.secondaryArrowsActive&&i,n("button",{disabled:!this.previousPage,onClick:this.navigateTo.bind(this,"previousPage")},n("span",{class:"NavigationButton"},d("previousPage",this.language)),n("span",{class:"NavigationIcon"})));a(this.userAgent)&&(e=n("div",{class:"LeftItems"},n("button",{disabled:!this.previousPage,onClick:this.navigateTo.bind(this,"previousPage")},n("span",{class:"NavigationButton"},d("previousPage",this.language)),n("span",{class:"NavigationIcon"}))));let s=n("button",{disabled:!this.lastPage,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.lastPage,onClick:this.navigateTo.bind(this,"nextPage")},n("span",{class:"NavigationButton"},d("nextPage",this.language)),n("span",{class:"NavigationIcon"})),this.secondaryArrowsActive&&s);return a(this.userAgent)&&(o=n("div",{class:"RightItems"},n("button",{disabled:!this.lastPage,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&&e,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}

package/dist/cjs/blog-articles-grid.cjs.js

@@ -15,5 +15,5 @@ const patchBrowser = () => {
 };
 
 patchBrowser().then(options => {
-  return index.bootstrapLazy([["blog-articles-grid_2.cjs",[[1,"blog-articles-grid",{"cmsEndpoint":[1,"cms-endpoint"],"language":[1],"handleClick":[1,"handle-click"],"clientStyling":[1,"client-styling"],"clientStylingUrl":[1,"client-styling-url"],"showPublishingDate":[4,"show-publishing-date"],"showImage":[4,"show-image"],"showTitle":[4,"show-title"],"showContent":[4,"show-content"],"showButton":[4,"show-button"],"usePostmessage":[4,"use-postmessage"],"postMessageEvent":[1,"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"],"paginationBlogList":[32],"currentPage":[32],"hasErrors":[32],"limitStylingAppends":[32],"isLoading":[32],"bannerMatrixReady":[32],"nextPage":[32],"previousPage":[32],"device":[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);
+  return index.bootstrapLazy([["blog-articles-grid_2.cjs",[[1,"blog-articles-grid",{"cmsEndpoint":[513,"cms-endpoint"],"language":[513],"handleClick":[513,"handle-click"],"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"],"userRoles":[513,"user-roles"],"cmsStage":[513,"cms-stage"],"paginationBlogList":[32],"currentPage":[32],"hasErrors":[32],"limitStylingAppends":[32],"isLoading":[32],"bannerMatrixReady":[32],"nextPage":[32],"previousPage":[32],"device":[32]},[[8,"BannerMatrixReady","handleBannerReady"],[0,"hpPageChange","hpPageChange"]]],[1,"helper-pagination",{"firstPage":[1540,"first-page"],"previousPage":[1540,"previous-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],"limitInt":[32],"totalInt":[32],"pagesArray":[32],"endInt":[32],"limitStylingAppends":[32]}]]]], options);
 });

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

@@ -24,7 +24,7 @@ const TRANSLATIONS$1 = {
     readmore: 'Read more',
   },
   hu: {
-    error: 'Error',
+    error: 'خطأ',
     readmore: 'Read more',
   }
 };
@@ -50,6 +50,33 @@ function checkDeviceType() {
   }
   return 'desktop';
 }
+const getDevice = () => {
+  let userAgent = window.navigator.userAgent;
+  if (userAgent.toLowerCase().match(/android/i)) {
+    return 'Android';
+  }
+  if (userAgent.toLowerCase().match(/iphone/i)) {
+    return 'iPhone';
+  }
+  if (userAgent.toLowerCase().match(/ipad|ipod/i)) {
+    return 'iPad';
+  }
+  return 'PC';
+};
+const getDevicePlatform = () => {
+  const device = getDevice();
+  if (device) {
+    if (device === 'PC') {
+      return 'dk';
+    }
+    else if (device === 'iPad' || device === 'iPhone') {
+      return 'mtWeb';
+    }
+    else {
+      return 'mtWeb';
+    }
+  }
+};
 
 const blogArticlesGridCss = ":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}";
 
@@ -74,25 +101,33 @@ const BlogArticlesGrid = class {
      */
     this.showPublishingDate = true;
     /**
-   * Property used to display the image
-   */
+    * Property used to display the image
+    */
     this.showImage = true;
     /**
-   * Property used to display the image
-   */
+    * Property used to display the image
+    */
     this.showTitle = true;
     /**
-   * Property used to display the description
-   */
+    * Property used to display the description
+    */
     this.showContent = true;
     /**
-   * Property used to display the button
-   */
+    * Property used to display the button
+    */
     this.showButton = true;
     /**
-     * Event name to be sent when the button is clicked
-     */
+    * Event name to be sent when the button is clicked
+    */
     this.postMessageEvent = 'articleActionButton';
+    /**
+     * User roles
+     */
+    this.userRoles = 'everyone';
+    /**
+     * CMS Endpoint stage
+     */
+    this.cmsStage = 'stage';
     this.paginationBlogList = {
       offset: 0
     };
@@ -256,6 +291,9 @@ const BlogArticlesGrid = class {
     let url = new URL(`${this.cmsEndpoint}/${this.language}/blog-posts`);
     url.searchParams.append('per_page', JSON.stringify(this.blogsLimit));
     url.searchParams.append('page', JSON.stringify(this.currentPage + 1));
+    url.searchParams.append('env', this.cmsStage);
+    url.searchParams.append('userRoles', this.userRoles);
+    url.searchParams.append('platform', getDevicePlatform());
     fetch(url.href)
       .then((res) => {
       if (res.status >= 300) {
@@ -337,7 +375,7 @@ const isMobile = (userAgent) => {
 };
 
 const DEFAULT_LANGUAGE = 'en';
-const SUPPORTED_LANGUAGES = ['ro', 'en', 'hu'];
+const SUPPORTED_LANGUAGES = ['ro', 'en'];
 const TRANSLATIONS = {
   en: {
     firstPage: 'First',
@@ -362,12 +400,6 @@ const TRANSLATIONS = {
     previousPage: 'Previous',
     nextPage: 'Next',
     lastPage: 'Last'
-  },
-  hu: {
-    firstPage: 'First',
-    previousPage: 'Previous',
-    nextPage: 'Következő',
-    lastPage: 'Last'
   }
 };
 const translate = (key, customLang) => {
@@ -382,13 +414,13 @@ const HelperPagination = class {
     index.registerInstance(this, hostRef);
     this.hpPageChange = index.createEvent(this, "hpPageChange", 7);
     /**
-     * Next page string value - determines if the next page is disabled or active
+     * First page boolean value - determines if the page is disabled or active
      */
-    this.nextPage = '';
+    this.firstPage = false;
     /**
-     * Previous page string value - determines if the previous page is disabled or active
+     * Previous page boolean value - determines if the page is disabled or active
      */
-    this.prevPage = '';
+    this.previousPage = false;
     /**
      * The received offset
      */
@@ -413,14 +445,6 @@ const HelperPagination = class {
      * Client custom styling via url content
      */
     this.clientStylingUrlContent = '';
-    /**
-     * Component working variable for last page
-     */
-    this.lastPage = false;
-    /**
-     * Component working variable for prvious page
-     */
-    this.previousPage = false;
     /**
      * In component working variable for the array of pages
      */
@@ -547,20 +571,20 @@ const HelperPagination = class {
     /**
      * Left navigation area
      */
-    let buttonSecondaryLeftSide = index.h("button", { disabled: this.prevPage ? false : true, onClick: this.navigateTo.bind(this, 'firstPage') }, index.h("span", { class: "NavigationButton" }, translate('firstPage', this.language)), index.h("span", { class: "NavigationIcon" }));
-    let buttonsLeftSide = index.h("div", { class: "LeftItems" }, this.secondaryArrowsActive && buttonSecondaryLeftSide, index.h("button", { disabled: this.prevPage ? false : true, onClick: this.navigateTo.bind(this, 'previousPage') }, index.h("span", { class: "NavigationButton" }, translate('previousPage', this.language)), index.h("span", { class: "NavigationIcon" })));
+    let buttonSecondaryLeftSide = index.h("button", { disabled: !this.previousPage, onClick: this.navigateTo.bind(this, 'firstPage') }, index.h("span", { class: "NavigationButton" }, translate('firstPage', this.language)), index.h("span", { class: "NavigationIcon" }));
+    let buttonsLeftSide = index.h("div", { class: "LeftItems" }, this.secondaryArrowsActive && buttonSecondaryLeftSide, index.h("button", { disabled: !this.previousPage ? true : false, onClick: this.navigateTo.bind(this, 'previousPage') }, index.h("span", { class: "NavigationButton" }, translate('previousPage', this.language)), index.h("span", { class: "NavigationIcon" })));
     if (isMobile(this.userAgent)) {
       buttonsLeftSide =
-        index.h("div", { class: "LeftItems" }, index.h("button", { disabled: this.prevPage ? false : true, onClick: this.navigateTo.bind(this, 'previousPage') }, index.h("span", { class: "NavigationButton" }, translate('previousPage', this.language)), index.h("span", { class: "NavigationIcon" })));
+        index.h("div", { class: "LeftItems" }, index.h("button", { disabled: !this.previousPage ? true : false, onClick: this.navigateTo.bind(this, 'previousPage') }, index.h("span", { class: "NavigationButton" }, translate('previousPage', this.language)), index.h("span", { class: "NavigationIcon" })));
     }
     /**
      * Right navigation area
      */
-    let buttonSecondaryRightSide = index.h("button", { disabled: this.nextPage ? false : true, onClick: this.navigateTo.bind(this, 'lastPage') }, index.h("span", { class: "NavigationButton" }, translate('lastPage', this.language)), index.h("span", { class: "NavigationIcon" }));
-    let buttonsRightSide = index.h("div", { class: "RightItems" }, index.h("button", { disabled: this.nextPage ? false : true, onClick: this.navigateTo.bind(this, 'nextPage') }, index.h("span", { class: "NavigationButton" }, translate('nextPage', this.language)), index.h("span", { class: "NavigationIcon" })), this.secondaryArrowsActive && buttonSecondaryRightSide);
+    let buttonSecondaryRightSide = index.h("button", { disabled: !this.lastPage ? true : false, onClick: this.navigateTo.bind(this, 'lastPage') }, index.h("span", { class: "NavigationButton" }, translate('lastPage', this.language)), index.h("span", { class: "NavigationIcon" }));
+    let buttonsRightSide = index.h("div", { class: "RightItems" }, index.h("button", { disabled: !this.lastPage ? true : false, onClick: this.navigateTo.bind(this, 'nextPage') }, index.h("span", { class: "NavigationButton" }, translate('nextPage', this.language)), index.h("span", { class: "NavigationIcon" })), this.secondaryArrowsActive && buttonSecondaryRightSide);
     if (isMobile(this.userAgent)) {
       buttonsRightSide =
-        index.h("div", { class: "RightItems" }, index.h("button", { disabled: this.nextPage ? false : true, onClick: this.navigateTo.bind(this, 'nextPage') }, index.h("span", { class: "NavigationButton" }, translate('nextPage', this.language)), index.h("span", { class: "NavigationIcon" })));
+        index.h("div", { class: "RightItems" }, index.h("button", { disabled: !this.lastPage ? true : false, onClick: this.navigateTo.bind(this, 'nextPage') }, index.h("span", { class: "NavigationButton" }, translate('nextPage', this.language)), index.h("span", { class: "NavigationIcon" })));
     }
     return (index.h("div", { id: "PaginationContainer", ref: el => this.stylingContainer = el }, this.arrowsActive && buttonsLeftSide, this.numberedNavActive && navigationArea, this.arrowsActive && buttonsRightSide));
   }

package/dist/cjs/loader.cjs.js

@@ -14,7 +14,7 @@ const patchEsm = () => {
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
   return patchEsm().then(() => {
-  return index.bootstrapLazy([["blog-articles-grid_2.cjs",[[1,"blog-articles-grid",{"cmsEndpoint":[1,"cms-endpoint"],"language":[1],"handleClick":[1,"handle-click"],"clientStyling":[1,"client-styling"],"clientStylingUrl":[1,"client-styling-url"],"showPublishingDate":[4,"show-publishing-date"],"showImage":[4,"show-image"],"showTitle":[4,"show-title"],"showContent":[4,"show-content"],"showButton":[4,"show-button"],"usePostmessage":[4,"use-postmessage"],"postMessageEvent":[1,"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"],"paginationBlogList":[32],"currentPage":[32],"hasErrors":[32],"limitStylingAppends":[32],"isLoading":[32],"bannerMatrixReady":[32],"nextPage":[32],"previousPage":[32],"device":[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);
+  return index.bootstrapLazy([["blog-articles-grid_2.cjs",[[1,"blog-articles-grid",{"cmsEndpoint":[513,"cms-endpoint"],"language":[513],"handleClick":[513,"handle-click"],"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"],"userRoles":[513,"user-roles"],"cmsStage":[513,"cms-stage"],"paginationBlogList":[32],"currentPage":[32],"hasErrors":[32],"limitStylingAppends":[32],"isLoading":[32],"bannerMatrixReady":[32],"nextPage":[32],"previousPage":[32],"device":[32]},[[8,"BannerMatrixReady","handleBannerReady"],[0,"hpPageChange","hpPageChange"]]],[1,"helper-pagination",{"firstPage":[1540,"first-page"],"previousPage":[1540,"previous-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],"limitInt":[32],"totalInt":[32],"pagesArray":[32],"endInt":[32],"limitStylingAppends":[32]}]]]], options);
   });
 };
 

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

@@ -1,6 +1,6 @@
 import { Component, Prop, State, Event, Watch, h, Listen } from '@stencil/core';
 import { translate } from '../../utils/locale.utils';
-import { checkDeviceType } from '../../utils/utils';
+import { checkDeviceType, getDevicePlatform } from '../../utils/utils';
 import '@everymatrix/helper-pagination';
 export class BlogArticlesGrid {
   constructor() {
@@ -21,25 +21,33 @@ export class BlogArticlesGrid {
      */
     this.showPublishingDate = true;
     /**
-   * Property used to display the image
-   */
+    * Property used to display the image
+    */
     this.showImage = true;
     /**
-   * Property used to display the image
-   */
+    * Property used to display the image
+    */
     this.showTitle = true;
     /**
-   * Property used to display the description
-   */
+    * Property used to display the description
+    */
     this.showContent = true;
     /**
-   * Property used to display the button
-   */
+    * Property used to display the button
+    */
     this.showButton = true;
     /**
-     * Event name to be sent when the button is clicked
-     */
+    * Event name to be sent when the button is clicked
+    */
     this.postMessageEvent = 'articleActionButton';
+    /**
+     * User roles
+     */
+    this.userRoles = 'everyone';
+    /**
+     * CMS Endpoint stage
+     */
+    this.cmsStage = 'stage';
     this.paginationBlogList = {
       offset: 0
     };
@@ -203,6 +211,9 @@ export class BlogArticlesGrid {
     let url = new URL(`${this.cmsEndpoint}/${this.language}/blog-posts`);
     url.searchParams.append('per_page', JSON.stringify(this.blogsLimit));
     url.searchParams.append('page', JSON.stringify(this.currentPage + 1));
+    url.searchParams.append('env', this.cmsStage);
+    url.searchParams.append('userRoles', this.userRoles);
+    url.searchParams.append('platform', getDevicePlatform());
     fetch(url.href)
       .then((res) => {
       if (res.status >= 300) {
@@ -296,7 +307,7 @@ export class BlogArticlesGrid {
         "text": "Endpoint URL for the source of data"
       },
       "attribute": "cms-endpoint",
-      "reflect": false
+      "reflect": true
     },
     "language": {
       "type": "string",
@@ -313,7 +324,7 @@ export class BlogArticlesGrid {
         "text": "Language of the widget"
       },
       "attribute": "language",
-      "reflect": false,
+      "reflect": true,
       "defaultValue": "'en'"
     },
     "handleClick": {
@@ -331,7 +342,7 @@ export class BlogArticlesGrid {
         "text": "Handle when you click on shome more button"
       },
       "attribute": "handle-click",
-      "reflect": false
+      "reflect": true
     },
     "clientStyling": {
       "type": "string",
@@ -348,7 +359,7 @@ export class BlogArticlesGrid {
         "text": "Client custom styling via string"
       },
       "attribute": "client-styling",
-      "reflect": false,
+      "reflect": true,
       "defaultValue": "''"
     },
     "clientStylingUrl": {
@@ -366,7 +377,7 @@ export class BlogArticlesGrid {
         "text": "Client custom styling via url"
       },
       "attribute": "client-styling-url",
-      "reflect": false,
+      "reflect": true,
       "defaultValue": "''"
     },
     "showPublishingDate": {
@@ -384,7 +395,7 @@ export class BlogArticlesGrid {
         "text": "Property used to display the publishing date"
       },
       "attribute": "show-publishing-date",
-      "reflect": false,
+      "reflect": true,
       "defaultValue": "true"
     },
     "showImage": {
@@ -402,7 +413,7 @@ export class BlogArticlesGrid {
         "text": "Property used to display the image"
       },
       "attribute": "show-image",
-      "reflect": false,
+      "reflect": true,
       "defaultValue": "true"
     },
     "showTitle": {
@@ -420,7 +431,7 @@ export class BlogArticlesGrid {
         "text": "Property used to display the image"
       },
       "attribute": "show-title",
-      "reflect": false,
+      "reflect": true,
       "defaultValue": "true"
     },
     "showContent": {
@@ -438,7 +449,7 @@ export class BlogArticlesGrid {
         "text": "Property used to display the description"
       },
       "attribute": "show-content",
-      "reflect": false,
+      "reflect": true,
       "defaultValue": "true"
     },
     "showButton": {
@@ -456,7 +467,7 @@ export class BlogArticlesGrid {
         "text": "Property used to display the button"
       },
       "attribute": "show-button",
-      "reflect": false,
+      "reflect": true,
       "defaultValue": "true"
     },
     "usePostmessage": {
@@ -474,7 +485,7 @@ export class BlogArticlesGrid {
         "text": "Use postMessage event to communicate"
       },
       "attribute": "use-postmessage",
-      "reflect": false
+      "reflect": true
     },
     "postMessageEvent": {
       "type": "string",
@@ -491,7 +502,7 @@ export class BlogArticlesGrid {
         "text": "Event name to be sent when the button is clicked"
       },
       "attribute": "post-message-event",
-      "reflect": false,
+      "reflect": true,
       "defaultValue": "'articleActionButton'"
     },
     "blogsLimit": {
@@ -578,6 +589,42 @@ export class BlogArticlesGrid {
       },
       "attribute": "numbered-nav-active",
       "reflect": true
+    },
+    "userRoles": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "User roles"
+      },
+      "attribute": "user-roles",
+      "reflect": true,
+      "defaultValue": "'everyone'"
+    },
+    "cmsStage": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "CMS Endpoint stage"
+      },
+      "attribute": "cms-stage",
+      "reflect": true,
+      "defaultValue": "'stage'"
     }
   }; }
   static get states() { return {

package/dist/collection/utils/locale.utils.js

@@ -18,7 +18,7 @@ const TRANSLATIONS = {
     readmore: 'Read more',
   },
   hu: {
-    error: 'Error',
+    error: 'خطأ',
     readmore: 'Read more',
   }
 };

package/dist/collection/utils/utils.js

@@ -15,3 +15,30 @@ export function checkDeviceType() {
   }
   return 'desktop';
 }
+export const getDevice = () => {
+  let userAgent = window.navigator.userAgent;
+  if (userAgent.toLowerCase().match(/android/i)) {
+    return 'Android';
+  }
+  if (userAgent.toLowerCase().match(/iphone/i)) {
+    return 'iPhone';
+  }
+  if (userAgent.toLowerCase().match(/ipad|ipod/i)) {
+    return 'iPad';
+  }
+  return 'PC';
+};
+export const getDevicePlatform = () => {
+  const device = getDevice();
+  if (device) {
+    if (device === 'PC') {
+      return 'dk';
+    }
+    else if (device === 'iPad' || device === 'iPhone') {
+      return 'mtWeb';
+    }
+    else {
+      return 'mtWeb';
+    }
+  }
+};

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

@@ -21,7 +21,7 @@ const TRANSLATIONS = {
     readmore: 'Read more',
   },
   hu: {
-    error: 'Error',
+    error: 'خطأ',
     readmore: 'Read more',
   }
 };
@@ -47,6 +47,33 @@ function checkDeviceType() {
   }
   return 'desktop';
 }
+const getDevice = () => {
+  let userAgent = window.navigator.userAgent;
+  if (userAgent.toLowerCase().match(/android/i)) {
+    return 'Android';
+  }
+  if (userAgent.toLowerCase().match(/iphone/i)) {
+    return 'iPhone';
+  }
+  if (userAgent.toLowerCase().match(/ipad|ipod/i)) {
+    return 'iPad';
+  }
+  return 'PC';
+};
+const getDevicePlatform = () => {
+  const device = getDevice();
+  if (device) {
+    if (device === 'PC') {
+      return 'dk';
+    }
+    else if (device === 'iPad' || device === 'iPhone') {
+      return 'mtWeb';
+    }
+    else {
+      return 'mtWeb';
+    }
+  }
+};
 
 const blogArticlesGridCss = ":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}";
 
@@ -73,25 +100,33 @@ const BlogArticlesGrid$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEl
      */
     this.showPublishingDate = true;
     /**
-   * Property used to display the image
-   */
+    * Property used to display the image
+    */
     this.showImage = true;
     /**
-   * Property used to display the image
-   */
+    * Property used to display the image
+    */
     this.showTitle = true;
     /**
-   * Property used to display the description
-   */
+    * Property used to display the description
+    */
     this.showContent = true;
     /**
-   * Property used to display the button
-   */
+    * Property used to display the button
+    */
     this.showButton = true;
     /**
-     * Event name to be sent when the button is clicked
-     */
+    * Event name to be sent when the button is clicked
+    */
     this.postMessageEvent = 'articleActionButton';
+    /**
+     * User roles
+     */
+    this.userRoles = 'everyone';
+    /**
+     * CMS Endpoint stage
+     */
+    this.cmsStage = 'stage';
     this.paginationBlogList = {
       offset: 0
     };
@@ -255,6 +290,9 @@ const BlogArticlesGrid$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEl
     let url = new URL(`${this.cmsEndpoint}/${this.language}/blog-posts`);
     url.searchParams.append('per_page', JSON.stringify(this.blogsLimit));
     url.searchParams.append('page', JSON.stringify(this.currentPage + 1));
+    url.searchParams.append('env', this.cmsStage);
+    url.searchParams.append('userRoles', this.userRoles);
+    url.searchParams.append('platform', getDevicePlatform());
     fetch(url.href)
       .then((res) => {
       if (res.status >= 300) {
@@ -321,23 +359,25 @@ const BlogArticlesGrid$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEl
   }; }
   static get style() { return blogArticlesGridCss; }
 }, [1, "blog-articles-grid", {
-    "cmsEndpoint": [1, "cms-endpoint"],
-    "language": [1],
-    "handleClick": [1, "handle-click"],
-    "clientStyling": [1, "client-styling"],
-    "clientStylingUrl": [1, "client-styling-url"],
-    "showPublishingDate": [4, "show-publishing-date"],
-    "showImage": [4, "show-image"],
-    "showTitle": [4, "show-title"],
-    "showContent": [4, "show-content"],
-    "showButton": [4, "show-button"],
-    "usePostmessage": [4, "use-postmessage"],
-    "postMessageEvent": [1, "post-message-event"],
+    "cmsEndpoint": [513, "cms-endpoint"],
+    "language": [513],
+    "handleClick": [513, "handle-click"],
+    "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"],
+    "userRoles": [513, "user-roles"],
+    "cmsStage": [513, "cms-stage"],
     "paginationBlogList": [32],
     "currentPage": [32],
     "hasErrors": [32],

package/dist/components/helper-pagination2.js

@@ -14,7 +14,7 @@ const isMobile = (userAgent) => {
 };
 
 const DEFAULT_LANGUAGE = 'en';
-const SUPPORTED_LANGUAGES = ['ro', 'en', 'hu'];
+const SUPPORTED_LANGUAGES = ['ro', 'en'];
 const TRANSLATIONS = {
   en: {
     firstPage: 'First',
@@ -39,12 +39,6 @@ const TRANSLATIONS = {
     previousPage: 'Previous',
     nextPage: 'Next',
     lastPage: 'Last'
-  },
-  hu: {
-    firstPage: 'First',
-    previousPage: 'Previous',
-    nextPage: 'Következő',
-    lastPage: 'Last'
   }
 };
 const translate = (key, customLang) => {
@@ -61,13 +55,13 @@ const HelperPagination = /*@__PURE__*/ proxyCustomElement(class extends HTMLElem
     this.__attachShadow();
     this.hpPageChange = createEvent(this, "hpPageChange", 7);
     /**
-     * Next page string value - determines if the next page is disabled or active
+     * First page boolean value - determines if the page is disabled or active
      */
-    this.nextPage = '';
+    this.firstPage = false;
     /**
-     * Previous page string value - determines if the previous page is disabled or active
+     * Previous page boolean value - determines if the page is disabled or active
      */
-    this.prevPage = '';
+    this.previousPage = false;
     /**
      * The received offset
      */
@@ -92,14 +86,6 @@ const HelperPagination = /*@__PURE__*/ proxyCustomElement(class extends HTMLElem
      * Client custom styling via url content
      */
     this.clientStylingUrlContent = '';
-    /**
-     * Component working variable for last page
-     */
-    this.lastPage = false;
-    /**
-     * Component working variable for prvious page
-     */
-    this.previousPage = false;
     /**
      * In component working variable for the array of pages
      */
@@ -226,27 +212,27 @@ const HelperPagination = /*@__PURE__*/ proxyCustomElement(class extends HTMLElem
     /**
      * Left navigation area
      */
-    let buttonSecondaryLeftSide = h("button", { disabled: this.prevPage ? false : true, onClick: this.navigateTo.bind(this, 'firstPage') }, h("span", { class: "NavigationButton" }, translate('firstPage', this.language)), h("span", { class: "NavigationIcon" }));
-    let buttonsLeftSide = h("div", { class: "LeftItems" }, this.secondaryArrowsActive && buttonSecondaryLeftSide, h("button", { disabled: this.prevPage ? false : true, onClick: this.navigateTo.bind(this, 'previousPage') }, h("span", { class: "NavigationButton" }, translate('previousPage', this.language)), h("span", { class: "NavigationIcon" })));
+    let buttonSecondaryLeftSide = h("button", { disabled: !this.previousPage, onClick: this.navigateTo.bind(this, 'firstPage') }, h("span", { class: "NavigationButton" }, translate('firstPage', this.language)), h("span", { class: "NavigationIcon" }));
+    let buttonsLeftSide = h("div", { class: "LeftItems" }, this.secondaryArrowsActive && buttonSecondaryLeftSide, h("button", { disabled: !this.previousPage ? true : false, onClick: this.navigateTo.bind(this, 'previousPage') }, h("span", { class: "NavigationButton" }, translate('previousPage', this.language)), h("span", { class: "NavigationIcon" })));
     if (isMobile(this.userAgent)) {
       buttonsLeftSide =
-        h("div", { class: "LeftItems" }, h("button", { disabled: this.prevPage ? false : true, onClick: this.navigateTo.bind(this, 'previousPage') }, h("span", { class: "NavigationButton" }, translate('previousPage', this.language)), h("span", { class: "NavigationIcon" })));
+        h("div", { class: "LeftItems" }, h("button", { disabled: !this.previousPage ? true : false, onClick: this.navigateTo.bind(this, 'previousPage') }, h("span", { class: "NavigationButton" }, translate('previousPage', this.language)), h("span", { class: "NavigationIcon" })));
     }
     /**
      * Right navigation area
      */
-    let buttonSecondaryRightSide = h("button", { disabled: this.nextPage ? false : true, onClick: this.navigateTo.bind(this, 'lastPage') }, h("span", { class: "NavigationButton" }, translate('lastPage', this.language)), h("span", { class: "NavigationIcon" }));
-    let buttonsRightSide = h("div", { class: "RightItems" }, h("button", { disabled: this.nextPage ? false : true, onClick: this.navigateTo.bind(this, 'nextPage') }, h("span", { class: "NavigationButton" }, translate('nextPage', this.language)), h("span", { class: "NavigationIcon" })), this.secondaryArrowsActive && buttonSecondaryRightSide);
+    let buttonSecondaryRightSide = h("button", { disabled: !this.lastPage ? true : false, onClick: this.navigateTo.bind(this, 'lastPage') }, h("span", { class: "NavigationButton" }, translate('lastPage', this.language)), h("span", { class: "NavigationIcon" }));
+    let buttonsRightSide = h("div", { class: "RightItems" }, h("button", { disabled: !this.lastPage ? true : false, onClick: this.navigateTo.bind(this, 'nextPage') }, h("span", { class: "NavigationButton" }, translate('nextPage', this.language)), h("span", { class: "NavigationIcon" })), this.secondaryArrowsActive && buttonSecondaryRightSide);
     if (isMobile(this.userAgent)) {
       buttonsRightSide =
-        h("div", { class: "RightItems" }, h("button", { disabled: this.nextPage ? false : true, onClick: this.navigateTo.bind(this, 'nextPage') }, h("span", { class: "NavigationButton" }, translate('nextPage', this.language)), h("span", { class: "NavigationIcon" })));
+        h("div", { class: "RightItems" }, h("button", { disabled: !this.lastPage ? true : false, onClick: this.navigateTo.bind(this, 'nextPage') }, h("span", { class: "NavigationButton" }, translate('nextPage', this.language)), h("span", { class: "NavigationIcon" })));
     }
     return (h("div", { id: "PaginationContainer", ref: el => this.stylingContainer = el }, this.arrowsActive && buttonsLeftSide, this.numberedNavActive && navigationArea, this.arrowsActive && buttonsRightSide));
   }
   static get style() { return helperPaginationCss; }
 }, [1, "helper-pagination", {
-    "nextPage": [1537, "next-page"],
-    "prevPage": [1537, "prev-page"],
+    "firstPage": [1540, "first-page"],
+    "previousPage": [1540, "previous-page"],
     "offset": [1538],
     "limit": [1538],
     "total": [1538],
@@ -258,7 +244,6 @@ const HelperPagination = /*@__PURE__*/ proxyCustomElement(class extends HTMLElem
     "numberedNavActive": [1540, "numbered-nav-active"],
     "offsetInt": [32],
     "lastPage": [32],
-    "previousPage": [32],
     "limitInt": [32],
     "totalInt": [32],
     "pagesArray": [32],

package/dist/esm/blog-articles-grid.js

@@ -13,5 +13,5 @@ const patchBrowser = () => {
 };
 
 patchBrowser().then(options => {
-  return bootstrapLazy([["blog-articles-grid_2",[[1,"blog-articles-grid",{"cmsEndpoint":[1,"cms-endpoint"],"language":[1],"handleClick":[1,"handle-click"],"clientStyling":[1,"client-styling"],"clientStylingUrl":[1,"client-styling-url"],"showPublishingDate":[4,"show-publishing-date"],"showImage":[4,"show-image"],"showTitle":[4,"show-title"],"showContent":[4,"show-content"],"showButton":[4,"show-button"],"usePostmessage":[4,"use-postmessage"],"postMessageEvent":[1,"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"],"paginationBlogList":[32],"currentPage":[32],"hasErrors":[32],"limitStylingAppends":[32],"isLoading":[32],"bannerMatrixReady":[32],"nextPage":[32],"previousPage":[32],"device":[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);
+  return bootstrapLazy([["blog-articles-grid_2",[[1,"blog-articles-grid",{"cmsEndpoint":[513,"cms-endpoint"],"language":[513],"handleClick":[513,"handle-click"],"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"],"userRoles":[513,"user-roles"],"cmsStage":[513,"cms-stage"],"paginationBlogList":[32],"currentPage":[32],"hasErrors":[32],"limitStylingAppends":[32],"isLoading":[32],"bannerMatrixReady":[32],"nextPage":[32],"previousPage":[32],"device":[32]},[[8,"BannerMatrixReady","handleBannerReady"],[0,"hpPageChange","hpPageChange"]]],[1,"helper-pagination",{"firstPage":[1540,"first-page"],"previousPage":[1540,"previous-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],"limitInt":[32],"totalInt":[32],"pagesArray":[32],"endInt":[32],"limitStylingAppends":[32]}]]]], options);
 });

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

@@ -20,7 +20,7 @@ const TRANSLATIONS$1 = {
     readmore: 'Read more',
   },
   hu: {
-    error: 'Error',
+    error: 'خطأ',
     readmore: 'Read more',
   }
 };
@@ -46,6 +46,33 @@ function checkDeviceType() {
   }
   return 'desktop';
 }
+const getDevice = () => {
+  let userAgent = window.navigator.userAgent;
+  if (userAgent.toLowerCase().match(/android/i)) {
+    return 'Android';
+  }
+  if (userAgent.toLowerCase().match(/iphone/i)) {
+    return 'iPhone';
+  }
+  if (userAgent.toLowerCase().match(/ipad|ipod/i)) {
+    return 'iPad';
+  }
+  return 'PC';
+};
+const getDevicePlatform = () => {
+  const device = getDevice();
+  if (device) {
+    if (device === 'PC') {
+      return 'dk';
+    }
+    else if (device === 'iPad' || device === 'iPhone') {
+      return 'mtWeb';
+    }
+    else {
+      return 'mtWeb';
+    }
+  }
+};
 
 const blogArticlesGridCss = ":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}";
 
@@ -70,25 +97,33 @@ const BlogArticlesGrid = class {
      */
     this.showPublishingDate = true;
     /**
-   * Property used to display the image
-   */
+    * Property used to display the image
+    */
     this.showImage = true;
     /**
-   * Property used to display the image
-   */
+    * Property used to display the image
+    */
     this.showTitle = true;
     /**
-   * Property used to display the description
-   */
+    * Property used to display the description
+    */
     this.showContent = true;
     /**
-   * Property used to display the button
-   */
+    * Property used to display the button
+    */
     this.showButton = true;
     /**
-     * Event name to be sent when the button is clicked
-     */
+    * Event name to be sent when the button is clicked
+    */
     this.postMessageEvent = 'articleActionButton';
+    /**
+     * User roles
+     */
+    this.userRoles = 'everyone';
+    /**
+     * CMS Endpoint stage
+     */
+    this.cmsStage = 'stage';
     this.paginationBlogList = {
       offset: 0
     };
@@ -252,6 +287,9 @@ const BlogArticlesGrid = class {
     let url = new URL(`${this.cmsEndpoint}/${this.language}/blog-posts`);
     url.searchParams.append('per_page', JSON.stringify(this.blogsLimit));
     url.searchParams.append('page', JSON.stringify(this.currentPage + 1));
+    url.searchParams.append('env', this.cmsStage);
+    url.searchParams.append('userRoles', this.userRoles);
+    url.searchParams.append('platform', getDevicePlatform());
     fetch(url.href)
       .then((res) => {
       if (res.status >= 300) {
@@ -333,7 +371,7 @@ const isMobile = (userAgent) => {
 };
 
 const DEFAULT_LANGUAGE = 'en';
-const SUPPORTED_LANGUAGES = ['ro', 'en', 'hu'];
+const SUPPORTED_LANGUAGES = ['ro', 'en'];
 const TRANSLATIONS = {
   en: {
     firstPage: 'First',
@@ -358,12 +396,6 @@ const TRANSLATIONS = {
     previousPage: 'Previous',
     nextPage: 'Next',
     lastPage: 'Last'
-  },
-  hu: {
-    firstPage: 'First',
-    previousPage: 'Previous',
-    nextPage: 'Következő',
-    lastPage: 'Last'
   }
 };
 const translate = (key, customLang) => {
@@ -378,13 +410,13 @@ const HelperPagination = class {
     registerInstance(this, hostRef);
     this.hpPageChange = createEvent(this, "hpPageChange", 7);
     /**
-     * Next page string value - determines if the next page is disabled or active
+     * First page boolean value - determines if the page is disabled or active
      */
-    this.nextPage = '';
+    this.firstPage = false;
     /**
-     * Previous page string value - determines if the previous page is disabled or active
+     * Previous page boolean value - determines if the page is disabled or active
      */
-    this.prevPage = '';
+    this.previousPage = false;
     /**
      * The received offset
      */
@@ -409,14 +441,6 @@ const HelperPagination = class {
      * Client custom styling via url content
      */
     this.clientStylingUrlContent = '';
-    /**
-     * Component working variable for last page
-     */
-    this.lastPage = false;
-    /**
-     * Component working variable for prvious page
-     */
-    this.previousPage = false;
     /**
      * In component working variable for the array of pages
      */
@@ -543,20 +567,20 @@ const HelperPagination = class {
     /**
      * Left navigation area
      */
-    let buttonSecondaryLeftSide = h("button", { disabled: this.prevPage ? false : true, onClick: this.navigateTo.bind(this, 'firstPage') }, h("span", { class: "NavigationButton" }, translate('firstPage', this.language)), h("span", { class: "NavigationIcon" }));
-    let buttonsLeftSide = h("div", { class: "LeftItems" }, this.secondaryArrowsActive && buttonSecondaryLeftSide, h("button", { disabled: this.prevPage ? false : true, onClick: this.navigateTo.bind(this, 'previousPage') }, h("span", { class: "NavigationButton" }, translate('previousPage', this.language)), h("span", { class: "NavigationIcon" })));
+    let buttonSecondaryLeftSide = h("button", { disabled: !this.previousPage, onClick: this.navigateTo.bind(this, 'firstPage') }, h("span", { class: "NavigationButton" }, translate('firstPage', this.language)), h("span", { class: "NavigationIcon" }));
+    let buttonsLeftSide = h("div", { class: "LeftItems" }, this.secondaryArrowsActive && buttonSecondaryLeftSide, h("button", { disabled: !this.previousPage ? true : false, onClick: this.navigateTo.bind(this, 'previousPage') }, h("span", { class: "NavigationButton" }, translate('previousPage', this.language)), h("span", { class: "NavigationIcon" })));
     if (isMobile(this.userAgent)) {
       buttonsLeftSide =
-        h("div", { class: "LeftItems" }, h("button", { disabled: this.prevPage ? false : true, onClick: this.navigateTo.bind(this, 'previousPage') }, h("span", { class: "NavigationButton" }, translate('previousPage', this.language)), h("span", { class: "NavigationIcon" })));
+        h("div", { class: "LeftItems" }, h("button", { disabled: !this.previousPage ? true : false, onClick: this.navigateTo.bind(this, 'previousPage') }, h("span", { class: "NavigationButton" }, translate('previousPage', this.language)), h("span", { class: "NavigationIcon" })));
     }
     /**
      * Right navigation area
      */
-    let buttonSecondaryRightSide = h("button", { disabled: this.nextPage ? false : true, onClick: this.navigateTo.bind(this, 'lastPage') }, h("span", { class: "NavigationButton" }, translate('lastPage', this.language)), h("span", { class: "NavigationIcon" }));
-    let buttonsRightSide = h("div", { class: "RightItems" }, h("button", { disabled: this.nextPage ? false : true, onClick: this.navigateTo.bind(this, 'nextPage') }, h("span", { class: "NavigationButton" }, translate('nextPage', this.language)), h("span", { class: "NavigationIcon" })), this.secondaryArrowsActive && buttonSecondaryRightSide);
+    let buttonSecondaryRightSide = h("button", { disabled: !this.lastPage ? true : false, onClick: this.navigateTo.bind(this, 'lastPage') }, h("span", { class: "NavigationButton" }, translate('lastPage', this.language)), h("span", { class: "NavigationIcon" }));
+    let buttonsRightSide = h("div", { class: "RightItems" }, h("button", { disabled: !this.lastPage ? true : false, onClick: this.navigateTo.bind(this, 'nextPage') }, h("span", { class: "NavigationButton" }, translate('nextPage', this.language)), h("span", { class: "NavigationIcon" })), this.secondaryArrowsActive && buttonSecondaryRightSide);
     if (isMobile(this.userAgent)) {
       buttonsRightSide =
-        h("div", { class: "RightItems" }, h("button", { disabled: this.nextPage ? false : true, onClick: this.navigateTo.bind(this, 'nextPage') }, h("span", { class: "NavigationButton" }, translate('nextPage', this.language)), h("span", { class: "NavigationIcon" })));
+        h("div", { class: "RightItems" }, h("button", { disabled: !this.lastPage ? true : false, onClick: this.navigateTo.bind(this, 'nextPage') }, h("span", { class: "NavigationButton" }, translate('nextPage', this.language)), h("span", { class: "NavigationIcon" })));
     }
     return (h("div", { id: "PaginationContainer", ref: el => this.stylingContainer = el }, this.arrowsActive && buttonsLeftSide, this.numberedNavActive && navigationArea, this.arrowsActive && buttonsRightSide));
   }

package/dist/esm/loader.js

@@ -10,7 +10,7 @@ const patchEsm = () => {
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
   return patchEsm().then(() => {
-  return bootstrapLazy([["blog-articles-grid_2",[[1,"blog-articles-grid",{"cmsEndpoint":[1,"cms-endpoint"],"language":[1],"handleClick":[1,"handle-click"],"clientStyling":[1,"client-styling"],"clientStylingUrl":[1,"client-styling-url"],"showPublishingDate":[4,"show-publishing-date"],"showImage":[4,"show-image"],"showTitle":[4,"show-title"],"showContent":[4,"show-content"],"showButton":[4,"show-button"],"usePostmessage":[4,"use-postmessage"],"postMessageEvent":[1,"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"],"paginationBlogList":[32],"currentPage":[32],"hasErrors":[32],"limitStylingAppends":[32],"isLoading":[32],"bannerMatrixReady":[32],"nextPage":[32],"previousPage":[32],"device":[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);
+  return bootstrapLazy([["blog-articles-grid_2",[[1,"blog-articles-grid",{"cmsEndpoint":[513,"cms-endpoint"],"language":[513],"handleClick":[513,"handle-click"],"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"],"userRoles":[513,"user-roles"],"cmsStage":[513,"cms-stage"],"paginationBlogList":[32],"currentPage":[32],"hasErrors":[32],"limitStylingAppends":[32],"isLoading":[32],"bannerMatrixReady":[32],"nextPage":[32],"previousPage":[32],"device":[32]},[[8,"BannerMatrixReady","handleBannerReady"],[0,"hpPageChange","hpPageChange"]]],[1,"helper-pagination",{"firstPage":[1540,"first-page"],"previousPage":[1540,"previous-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],"limitInt":[32],"totalInt":[32],"pagesArray":[32],"endInt":[32],"limitStylingAppends":[32]}]]]], options);
   });
 };
 

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

@@ -2,8 +2,8 @@ import { EventEmitter } from '../../stencil-public-runtime';
 import '@everymatrix/helper-pagination';
 export declare class BlogArticlesGrid {
   /**
- * Endpoint URL for the source of data
- */
+   * Endpoint URL for the source of data
+   */
   cmsEndpoint: string;
   /**
   * Language of the widget
@@ -26,32 +26,32 @@ export declare class BlogArticlesGrid {
    */
   showPublishingDate: boolean;
   /**
- * Property used to display the image
- */
+  * Property used to display the image
+  */
   showImage: boolean;
   /**
- * Property used to display the image
- */
+  * Property used to display the image
+  */
   showTitle: boolean;
   /**
- * Property used to display the description
- */
+  * Property used to display the description
+  */
   showContent: boolean;
   /**
- * Property used to display the button
- */
+  * Property used to display the button
+  */
   showButton: boolean;
   /**
-   * Use postMessage event to communicate
-   */
+  * Use postMessage event to communicate
+  */
   usePostmessage: boolean;
   /**
-   * Event name to be sent when the button is clicked
-   */
+  * Event name to be sent when the button is clicked
+  */
   postMessageEvent: string;
   /**
-   * Customize pagination: Activate pagination numbered navigation
-   */
+  * Customize pagination: Activate pagination numbered navigation
+  */
   blogsLimit: number;
   /**
    * Customize pagination: Activate pagination
@@ -69,6 +69,14 @@ export declare class BlogArticlesGrid {
    * Customize pagination: Activate pagination numbered navigation
    */
   numberedNavActive: boolean;
+  /**
+   * User roles
+   */
+  userRoles: string;
+  /**
+   * CMS Endpoint stage
+   */
+  cmsStage: string;
   articleActionButton: EventEmitter<Object>;
   getArticleId(postId: number): void;
   paginationBlogList: any;

package/dist/types/components.d.ts

@@ -27,6 +27,10 @@ export namespace Components {
           * Endpoint URL for the source of data
          */
         "cmsEndpoint": string;
+        /**
+          * CMS Endpoint stage
+         */
+        "cmsStage": string;
         /**
           * Handle when you click on shome more button
          */
@@ -75,6 +79,10 @@ export namespace Components {
           * Use postMessage event to communicate
          */
         "usePostmessage": boolean;
+        /**
+          * User roles
+         */
+        "userRoles": string;
     }
 }
 declare global {
@@ -110,6 +118,10 @@ declare namespace LocalJSX {
           * Endpoint URL for the source of data
          */
         "cmsEndpoint"?: string;
+        /**
+          * CMS Endpoint stage
+         */
+        "cmsStage"?: string;
         /**
           * Handle when you click on shome more button
          */
@@ -159,6 +171,10 @@ declare namespace LocalJSX {
           * Use postMessage event to communicate
          */
         "usePostmessage": boolean;
+        /**
+          * User roles
+         */
+        "userRoles"?: string;
     }
     interface IntrinsicElements {
         "blog-articles-grid": BlogArticlesGrid;

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

@@ -1 +1,3 @@
 export declare function checkDeviceType(): 'mobile' | 'tablet' | 'desktop';
+export declare const getDevice: () => "Android" | "iPhone" | "iPad" | "PC";
+export declare const getDevicePlatform: () => "dk" | "mtWeb";

package/package.json

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

package/dist/blog-articles-grid/p-341b0ae5.entry.js

@@ -1 +0,0 @@
-import{r as t,c as i,h as n}from"./p-ed2f13d0.js";const e=["ro","en","fr","ar","hu"],s={en:{error:"Error",readmore:"Read more"},ro:{error:"Eroare",readmore:"Read more"},fr:{error:"Error",readmore:"Read more"},ar:{error:"خطأ",readmore:"Read more"},hu:{error:"Error",readmore:"Read more"}},o=(t,i)=>{const n=i;return s[void 0!==n&&e.includes(n)?n:"en"][t]},r=class{constructor(e){t(this,e),this.articleActionButton=i(this,"articleActionButton",7),this.language="en",this.clientStyling="",this.clientStylingUrl="",this.showPublishingDate=!0,this.showImage=!0,this.showTitle=!0,this.showContent=!0,this.showButton=!0,this.postMessageEvent="articleActionButton",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.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){this.articleActionButton.emit({postId:t}),this.usePostmessage&&window.postMessage({type:this.postMessageEvent,postId:t})}handleBannerReady(){this.bannerMatrixReady=!0}watchEndpoint(t,i){t&&t!=i&&this.cmsEndpoint&&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.currentPage+1>this.lastPage?this.nextPage=null:this.currentPage<0?this.previousPage=null:this.getBlogArticleGrid()}handleAction(t){this.getArticleId(t)}connectedCallback(){this.cmsEndpoint&&this.language&&this.getBlogArticleGrid()}componentDidLoad(){window.postMessage({type:"BlogArticlesGridLoaded"},window.location.href),this.device=function(){const t=navigator.userAgent.toLowerCase(),i=screen.availWidth,n=screen.availHeight;if(t.includes("iphone"))return"mobile";if(t.includes("android")){if(n>i&&i<800)return"mobile";if(i>n&&n<800)return"tablet"}return"desktop"}()}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(){this.isLoading=!0;let t=new URL(`${this.cmsEndpoint}/${this.language}/blog-posts`);t.searchParams.append("per_page",JSON.stringify(this.blogsLimit)),t.searchParams.append("page",JSON.stringify(this.currentPage+1)),fetch(t.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.slice(t.pages.last.lastIndexOf("=")+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)}formatDateToYearMonthDay(t){let i=new Date(t),n=i.getFullYear(),e=String(i.getMonth()+1).padStart(2,"0");return`${String(i.getDate()).padStart(2,"0")}-${e}-${n}`}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.map((t=>{var i,e;return n("div",{class:"GridContainer"},this.showPublishingDate&&n("div",{class:"BlogDate"},this.formatDateToYearMonthDay(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:t.image.src,alt:t.image.src}):(null===(e=t.video)||void 0===e?void 0:e.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.content),this.showButton&&n("div",{class:"BlogLink"},n("button",{onClick:()=>this.handleAction(null==t?void 0:t.postID)},o("readmore",this.language))))}))))}static get watchers(){return{cmsEndpoint:["watchEndpoint"],language:["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"})),e=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)&&(e=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 s=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&&s);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&&e,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}