@everymatrix/blog-articles-grid 1.27.2 → 1.27.4

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

@@ -1 +1 @@
-import{p as e,b as t}from"./p-13642dde.js";(()=>{const t=import.meta.url,n={};return""!==t&&(n.resourcesUrl=new URL(".",t).href),e(n)})().then((e=>t([["p-e850d485",[[1,"blog-articles-grid",{cmsEndpoint:[513,"cms-endpoint"],language:[513],userRoles:[513,"user-roles"],cmsEnv:[513,"cms-env"],clientStyling:[513,"client-styling"],clientStylingUrl:[513,"client-styling-url"],showPublishingDate:[516,"show-publishing-date"],showImage:[516,"show-image"],showTitle:[516,"show-title"],showContent:[516,"show-content"],showButton:[516,"show-button"],usePostmessage:[516,"use-postmessage"],postMessageEvent:[513,"post-message-event"],blogsLimit:[513,"blogs-limit"],paginationActive:[516,"pagination-active"],arrowsActive:[516,"arrows-active"],secondaryArrowsActive:[516,"secondary-arrows-active"],numberedNavActive:[516,"numbered-nav-active"],intlDateTimeFormat:[513,"intl-date-time-format"],page:[513],paginationBlogList:[32],currentPage:[32],hasErrors:[32],limitStylingAppends:[32],isLoading:[32],bannerMatrixReady:[32],nextPage:[32],previousPage:[32],device:[32],blogData:[32],totalBlogs:[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-13642dde.js";(()=>{const t=import.meta.url,n={};return""!==t&&(n.resourcesUrl=new URL(".",t).href),e(n)})().then((e=>t([["p-9b993759",[[1,"blog-articles-grid",{cmsEndpoint:[513,"cms-endpoint"],language:[513],userRoles:[513,"user-roles"],cmsEnv:[513,"cms-env"],clientStyling:[513,"client-styling"],clientStylingUrl:[513,"client-styling-url"],showPublishingDate:[516,"show-publishing-date"],showImage:[516,"show-image"],showTitle:[516,"show-title"],showContent:[516,"show-content"],showButton:[516,"show-button"],usePostmessage:[516,"use-postmessage"],postMessageEvent:[513,"post-message-event"],blogsLimit:[513,"blogs-limit"],paginationActive:[516,"pagination-active"],arrowsActive:[516,"arrows-active"],secondaryArrowsActive:[516,"secondary-arrows-active"],numberedNavActive:[516,"numbered-nav-active"],intlDateTimeFormat:[513,"intl-date-time-format"],page:[513],paginationBlogList:[32],currentPage:[32],hasErrors:[32],limitStylingAppends:[32],isLoading:[32],bannerMatrixReady:[32],nextPage:[32],previousPage:[32],device:[32],blogData:[32],totalBlogs:[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)));

package/dist/blog-articles-grid/p-9b993759.entry.js

@@ -0,0 +1 @@
+import{r as t,c as i,h as n}from"./p-13642dde.js";const e=["ro","en","fr","ar","hu","hr"],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:"Tovább olvasom"},hr:{error:"Greška",readmore:"Pročitaj više"}},o=(t,i)=>{const n=i;return s[void 0!==n&&e.includes(n)?n:"en"][t]};const a=class{constructor(e){t(this,e),this.ArticleActionButton=i(this,"ArticleActionButton",7),this.language="en",this.userRoles="everyone",this.cmsEnv="stage",this.clientStyling="",this.clientStylingUrl="",this.showPublishingDate=!0,this.showImage=!0,this.showTitle=!0,this.showContent=!0,this.showButton=!0,this.postMessageEvent="",this.blogsLimit="0",this.intlDateTimeFormat="",this.page="",this.paginationBlogList={offset:0},this.currentPage=0,this.hasErrors=!1,this.limitStylingAppends=!1,this.isLoading=!0,this.bannerMatrixReady=!1,this.nextPage="",this.previousPage="",this.device="",this.totalBlogs=0,this.defaultStyling="\n  div#PaginationContainer {\n    justify-content: right;\n  }\n  .LeftItems button .NavigationButton {\n    display: none;\n  }\n  .LeftItems button:after, .RightItems button:after {\n    padding: 7px 12px;\n    font-size: 18px;\n    font-weight: 700;\n    line-height: 46px;\n  }\n  .LeftItems button:after {\n    content: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1.2em' viewBox='0 0 320 512'%3E%3C!--! Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --%3E%3Cpath d='M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l192 192c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256 246.6 86.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-192 192z'/%3E%3C/svg%3E\");\n  }\n  .RightItems button:after {\n    content: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1.2em' viewBox='0 0 320 512'%3E%3C!--! Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --%3E%3Cpath d='M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z'/%3E%3C/svg%3E\");\n    display: block;\n    height: 38px;\n  }\n  div.LeftItems button, div.RightItems button {\n    width: unset;\n    height: 40px;\n    background-color: #fff;\n    color: #000;\n    border: 1px solid #000;\n    overflow: hidden;\n    &:disabled {\n      background-color: #989898;\n    }\n  }\n  div.LeftItems button {\n    min-width: 60px;\n    border-radius: 20px 0 0 20px;\n    border-right: 0;\n  }\n  div.RightItems button {\n    display: flex;\n    min-width: 100px;\n    justify-content: space-evenly;\n    align-items: center;\n    border-radius: 0 20px 20px 0;\n    text-transform: none;\n  }\n  .RightItems button .NavigationButton {\n    padding: 12px 0 12px 12px;\n    font-weight: 700;\n  }",this.setClientStyling=()=>{let t=document.createElement("style");t.innerHTML=this.clientStyling,this.stylingContainer.prepend(t)},this.setClientStylingURL=()=>{let t=new URL(this.clientStylingUrl),i=document.createElement("style");fetch(t.href).then((t=>t.text())).then((t=>{i.innerHTML=t,setTimeout((()=>{this.stylingContainer.prepend(i)}),1)})).catch((t=>{console.log("Error ",t)}))},this.setImage=t=>{let i="";switch(this.device){case"mobile":i=t.sources[0].pictureSource;break;case"tablet":i=t.sources[1].pictureSource;break;case"desktop":i=t.sources[2].pictureSource}return i},this.renderContentConditionally=t=>{if(t)return-1!==t.indexOf("<bannermatrix-banner")?this.bannerMatrixReady?n("div",{class:"BlogContent",innerHTML:t}):null:n("div",{class:"BlogContent",innerHTML:t})}}getArticleId(t,i,n){this.usePostmessage?window.postMessage({type:this.postMessageEvent,postId:t,slug:i,customPath:n}):this.ArticleActionButton.emit({postId:t,slug:i,customPath:n}),this.usePostmessage&&window.postMessage({type:this.postMessageEvent,postId:t,slug:i,customPath:n})}handleBannerReady(){this.bannerMatrixReady=!0}watchEndpoint(t,i){t&&t!=i&&this.cmsEndpoint&&this.language&&this.getBlogArticleGrid()}hpPageChange(t){var i,n;this.paginationBlogList=t.detail,this.currentPage=Math.floor((null===(i=this.paginationBlogList)||void 0===i?void 0:i.offset)/(null===(n=this.paginationBlogList)||void 0===n?void 0:n.limit)),this.page&&(this.currentPage=this.currentPage+ +this.page-1),this.currentPage+1>this.lastPage?this.nextPage=null:this.currentPage<0?this.previousPage=null:(window.postMessage({type:"BlogArticlesGridActivePagination",currentPage:this.currentPage},window.location.href),this.getBlogArticleGrid())}connectedCallback(){this.cmsEndpoint&&this.language&&this.blogsLimit&&(this.page?(this.currentPage=this.currentPage+ +this.page-1,this.getBlogArticleGrid(+this.page)):this.getBlogArticleGrid())}componentDidLoad(){window.postMessage({type:"BlogArticlesGridLoaded"},window.location.href),this.device=function(){const t=navigator.userAgent.toLowerCase();let i="";return i=t.includes("android")||t.includes("iphone")||t.includes("ipad")?function(){const t=screen.availWidth;return t<600?"mobile":t>=600&&t<1100?"tablet":void 0}():"desktop",i}()}sortArticlesByDate(t){return t.sort(((t,i)=>t.publishingDate>i.publishingDate?-1:t.publishingDate<i.publishingDate?1:0)),t}findLatestFeatured(t){let i=t.filter((t=>t.isFeaturedPost));return 0===i.length?null:(i=this.sortArticlesByDate(i),i[0])}moveLatestFeatureToStart(t,i){const n=t.indexOf(i);return-1!==n&&(t.splice(n,1),t.unshift(i)),t}getBlogArticleGrid(t){this.isLoading=!0;let i=new URL(`${this.cmsEndpoint}/${this.language}/blog-posts`);i.searchParams.append("per_page",this.blogsLimit),i.searchParams.append("page",JSON.stringify(t||this.currentPage+1)),i.searchParams.append("env",this.cmsEnv),i.searchParams.append("userRoles",this.userRoles),i.searchParams.append("device",(()=>{const t=(()=>{let t=window.navigator.userAgent;return t.toLowerCase().match(/android/i)?"Android":t.toLowerCase().match(/iphone/i)?"iPhone":t.toLowerCase().match(/ipad|ipod/i)?"iPad":"PC"})();if(t)return"PC"===t?"dk":"mtWeb"})()),fetch(i.href).then((t=>{if(t.status>=300)throw this.hasErrors=!0,new Error("There was an error while fetching the data");return t.json()})).then((t=>{this.lastPage=+t.pages.last.match(/&page=(\d+)/)[1];let i=t.items;this.nextPage=t.pages.next,this.previousPage=t.pages.previous,this.totalBlogs=t.total;const n=this.findLatestFeatured(i);this.blogData=this.sortArticlesByDate(i),this.blogData=this.moveLatestFeatureToStart(i,n),this.blogData.items=i.map((t=>Object.assign(Object.assign({},t),{publishingDate:new Date(t.publishingDate).toLocaleDateString()}))),this.isLoading=!1})).catch((t=>{this.hasErrors=!0,console.log("Error",t)})).finally((()=>this.isLoading=!1))}componentDidRender(){!this.limitStylingAppends&&this.stylingContainer&&(this.clientStyling&&this.setClientStyling(),this.clientStylingUrl&&this.setClientStylingURL(),this.limitStylingAppends=!0)}formatDate(t){return new Intl.DateTimeFormat(this.intlDateTimeFormat).format(new Date(t))}render(){var t,i;return this.hasErrors?n("div",{class:"BlogsContainer"},n("div",{class:"ErrorMessage"},o("error",this.language))):n("div",{ref:t=>this.stylingContainer=t},n("div",{class:"BlogPageContainer"},n("div",{class:"BlogGridPaginationWrapper"},1==this.paginationActive&&this.totalBlogs>+this.blogsLimit&&n("helper-pagination",{"next-page":this.nextPage,"prev-page":this.previousPage,offset:this.paginationBlogList.offset,limit: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||!0,"secondary-arrows-active":this.secondaryArrowsActive||!1,"numbered-nav-active":this.numberedNavActive||!1})),!this.isLoading&&n("div",{class:`GridContainerWrapper BlogPage-${this.currentPage}`},this.blogData&&this.blogData.map((t=>{var i,e;return n("div",{key:t.postID,class:t.isFeaturedPost?"GridContainer FeaturedPost":"GridContainer"},n("div",{class:"GridWrapper"},n("div",{class:"GridSector"},this.showPublishingDate&&n("div",{class:"BlogDate"},this.formatDate(null==t?void 0:t.publishingDate)),this.showImage&&(null===(i=t.image)||void 0===i?void 0:i.src)?n("div",{class:"VisualContent",style:{background:`url(${this.setImage(t.image)}) no-repeat center center / cover`}}):(null===(e=t.video)||void 0===e?void 0:e.sources[this.device])?n("video",{class:"VisualContent",src:t.video.sources[this.device],controls:!0}):n("h1",{class:"VisualContent",style:{color:"#fff"}},"No Image")),n("div",{class:"GridSector"},this.showTitle&&n("div",{class:"BlogTitle"},null==t?void 0:t.title),this.showContent&&this.renderContentConditionally(null==t?void 0:t.descriptionPreview),this.showButton&&n("div",{class:"BlogLink"},n("button",{onClick:()=>this.getArticleId(null==t?void 0:t.postID,null==t?void 0:t.slug,null==t?void 0:t.customPath)},o("readmore",this.language))))))})))))}static get watchers(){return{cmsEndpoint:["watchEndpoint"],language:["watchEndpoint"],cmsEnv:["watchEndpoint"],userRoles:["watchEndpoint"],blogsLimit:["watchEndpoint"]}}};a.style=":host {\n  display: block;\n}\n\n.BlogPageContainer {\n  background: #0A0A17;\n  padding: 20px;\n}\n\n.GridContainerWrapper {\n  display: flex;\n  flex-flow: row wrap;\n  gap: 20px;\n}\n\n.GridContainer {\n  container-type: inline-size;\n  container-name: article;\n  border-radius: 15px;\n  color: #000;\n  flex: 1 1 550px;\n  overflow: hidden;\n}\n.GridContainer.FeaturedPost:first-child {\n  width: 100%;\n  flex-basis: auto;\n}\n.GridContainer .GridWrapper {\n  display: flex;\n  flex-direction: row;\n  height: 280px;\n  background: #fff;\n}\n.GridContainer .GridSector {\n  flex-basis: 50%;\n  position: relative;\n}\n.GridContainer .GridSector:first-of-type {\n  height: 280px;\n  display: flex;\n}\n.GridContainer .GridSector:last-of-type {\n  padding: 20px 40px;\n  display: flex;\n  flex-direction: column;\n}\n.GridContainer .VisualContent {\n  width: 100%;\n}\n.GridContainer .BlogDate {\n  position: absolute;\n  bottom: 0px;\n  left: 30px;\n  font-size: 12px;\n  border-radius: 5px 5px 0 0;\n  padding: 10px;\n  width: fit-content;\n  text-align: center;\n  color: #FFF;\n  background-color: #CD0B5E;\n  z-index: 1;\n}\n.GridContainer .BlogTitle {\n  font-size: 24px;\n  color: #000;\n  padding-bottom: 10px;\n}\n.GridContainer .BlogContent {\n  display: -webkit-box;\n  font-size: 14px;\n  line-height: 1.2em;\n  -webkit-line-clamp: 6;\n  color: #000;\n  -webkit-box-orient: vertical;\n  box-sizing: border-box;\n  text-overflow: ellipsis;\n  overflow: hidden;\n}\n.GridContainer .BlogLink {\n  color: #000;\n  position: absolute;\n  bottom: 16px;\n}\n.GridContainer .BlogLink button {\n  font-size: 14px;\n  border: none;\n  padding: 0;\n  background: none;\n  color: #D0046C;\n  cursor: pointer;\n}\n\n@container article (max-width: 550px) {\n  .GridContainer .GridWrapper {\n    height: 380px;\n    flex-direction: column;\n  }\n  .GridContainer .GridWrapper .GridSector:first-of-type {\n    height: 120px;\n    flex-shrink: 0;\n    flex-basis: 150px;\n  }\n  .GridContainer .GridWrapper .GridSector:last-of-type {\n    padding: 20px 20px 40px;\n  }\n}";const r=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","hr"],l={en:{firstPage:"First",previousPage:"Previous",nextPage:"Next",lastPage:"Last"},ro:{firstPage:"Prima",previousPage:"Anterior",nextPage:"Urmatoarea",lastPage:"Ultima"},fr:{firstPage:"First",previousPage:"Previous",nextPage:"Next",lastPage:"Last"},ar:{firstPage:"First",previousPage:"Previous",nextPage:"Next",lastPage:"Last"},hu:{firstPage:"First",previousPage:"Previous",nextPage:"Következő",lastPage:"Last"},hr:{firstPage:"Prva",previousPage:"Prethodna",nextPage:"Slijedeća",lastPage:"Zadnja"}},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":" ")+" "+(r(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"})));r(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 r(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{a as blog_articles_grid,c as helper_pagination}

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

@@ -85,7 +85,7 @@ const blogArticlesGridCss = ":host {\n  display: block;\n}\n\n.BlogPageContainer
 const BlogArticlesGrid = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
-    this.articleActionButton = index.createEvent(this, "articleActionButton", 7);
+    this.ArticleActionButton = index.createEvent(this, "ArticleActionButton", 7);
     /**
     * Language of the widget
     */
@@ -129,7 +129,7 @@ const BlogArticlesGrid = class {
     /**
     * Event name to be sent when the button is clicked
     */
-    this.postMessageEvent = 'articleActionButton';
+    this.postMessageEvent = '';
     /**
     * Customize pagination: Activate pagination numbered navigation
     */
@@ -218,7 +218,7 @@ const BlogArticlesGrid = class {
         setTimeout(() => { this.stylingContainer.prepend(cssFile); }, 1);
       })
         .catch((err) => {
-        console.log('error ', err);
+        console.log('Error ', err);
       });
     };
     this.setImage = (image) => {
@@ -250,7 +250,12 @@ const BlogArticlesGrid = class {
     };
   }
   getArticleId(postId, slug, customPath) {
-    this.articleActionButton.emit({ postId, slug, customPath });
+    if (this.usePostmessage) {
+      window.postMessage({ type: this.postMessageEvent, postId, slug, customPath });
+    }
+    else {
+      this.ArticleActionButton.emit({ postId, slug, customPath });
+    }
     if (this.usePostmessage) {
       window.postMessage({ type: this.postMessageEvent, postId, slug, customPath });
     }
@@ -283,7 +288,7 @@ const BlogArticlesGrid = class {
     this.getBlogArticleGrid();
   }
   connectedCallback() {
-    if (this.cmsEndpoint && this.language) {
+    if (this.cmsEndpoint && this.language && this.blogsLimit) {
       if (this.page) {
         this.currentPage = this.currentPage + +this.page - 1;
         this.getBlogArticleGrid(+this.page);
@@ -392,7 +397,8 @@ const BlogArticlesGrid = class {
     "cmsEndpoint": ["watchEndpoint"],
     "language": ["watchEndpoint"],
     "cmsEnv": ["watchEndpoint"],
-    "userRoles": ["watchEndpoint"]
+    "userRoles": ["watchEndpoint"],
+    "blogsLimit": ["watchEndpoint"]
   }; }
 };
 BlogArticlesGrid.style = blogArticlesGridCss;

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

@@ -47,7 +47,7 @@ export class BlogArticlesGrid {
     /**
     * Event name to be sent when the button is clicked
     */
-    this.postMessageEvent = 'articleActionButton';
+    this.postMessageEvent = '';
     /**
     * Customize pagination: Activate pagination numbered navigation
     */
@@ -136,7 +136,7 @@ export class BlogArticlesGrid {
         setTimeout(() => { this.stylingContainer.prepend(cssFile); }, 1);
       })
         .catch((err) => {
-        console.log('error ', err);
+        console.log('Error ', err);
       });
     };
     this.setImage = (image) => {
@@ -168,7 +168,12 @@ export class BlogArticlesGrid {
     };
   }
   getArticleId(postId, slug, customPath) {
-    this.articleActionButton.emit({ postId, slug, customPath });
+    if (this.usePostmessage) {
+      window.postMessage({ type: this.postMessageEvent, postId, slug, customPath });
+    }
+    else {
+      this.ArticleActionButton.emit({ postId, slug, customPath });
+    }
     if (this.usePostmessage) {
       window.postMessage({ type: this.postMessageEvent, postId, slug, customPath });
     }
@@ -201,7 +206,7 @@ export class BlogArticlesGrid {
     this.getBlogArticleGrid();
   }
   connectedCallback() {
-    if (this.cmsEndpoint && this.language) {
+    if (this.cmsEndpoint && this.language && this.blogsLimit) {
       if (this.page) {
         this.currentPage = this.currentPage + +this.page - 1;
         this.getBlogArticleGrid(+this.page);
@@ -558,7 +563,7 @@ export class BlogArticlesGrid {
       },
       "attribute": "post-message-event",
       "reflect": true,
-      "defaultValue": "'articleActionButton'"
+      "defaultValue": "''"
     },
     "blogsLimit": {
       "type": "string",
@@ -697,8 +702,8 @@ export class BlogArticlesGrid {
     "totalBlogs": {}
   }; }
   static get events() { return [{
-      "method": "articleActionButton",
-      "name": "articleActionButton",
+      "method": "ArticleActionButton",
+      "name": "ArticleActionButton",
       "bubbles": true,
       "cancelable": true,
       "composed": true,
@@ -728,6 +733,9 @@ export class BlogArticlesGrid {
     }, {
       "propName": "userRoles",
       "methodName": "watchEndpoint"
+    }, {
+      "propName": "blogsLimit",
+      "methodName": "watchEndpoint"
     }]; }
   static get listeners() { return [{
       "name": "BannerMatrixReady",

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

@@ -84,7 +84,7 @@ const BlogArticlesGrid$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEl
     super();
     this.__registerHost();
     this.__attachShadow();
-    this.articleActionButton = createEvent(this, "articleActionButton", 7);
+    this.ArticleActionButton = createEvent(this, "ArticleActionButton", 7);
     /**
     * Language of the widget
     */
@@ -128,7 +128,7 @@ const BlogArticlesGrid$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEl
     /**
     * Event name to be sent when the button is clicked
     */
-    this.postMessageEvent = 'articleActionButton';
+    this.postMessageEvent = '';
     /**
     * Customize pagination: Activate pagination numbered navigation
     */
@@ -217,7 +217,7 @@ const BlogArticlesGrid$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEl
         setTimeout(() => { this.stylingContainer.prepend(cssFile); }, 1);
       })
         .catch((err) => {
-        console.log('error ', err);
+        console.log('Error ', err);
       });
     };
     this.setImage = (image) => {
@@ -249,7 +249,12 @@ const BlogArticlesGrid$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEl
     };
   }
   getArticleId(postId, slug, customPath) {
-    this.articleActionButton.emit({ postId, slug, customPath });
+    if (this.usePostmessage) {
+      window.postMessage({ type: this.postMessageEvent, postId, slug, customPath });
+    }
+    else {
+      this.ArticleActionButton.emit({ postId, slug, customPath });
+    }
     if (this.usePostmessage) {
       window.postMessage({ type: this.postMessageEvent, postId, slug, customPath });
     }
@@ -282,7 +287,7 @@ const BlogArticlesGrid$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEl
     this.getBlogArticleGrid();
   }
   connectedCallback() {
-    if (this.cmsEndpoint && this.language) {
+    if (this.cmsEndpoint && this.language && this.blogsLimit) {
       if (this.page) {
         this.currentPage = this.currentPage + +this.page - 1;
         this.getBlogArticleGrid(+this.page);
@@ -391,7 +396,8 @@ const BlogArticlesGrid$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEl
     "cmsEndpoint": ["watchEndpoint"],
     "language": ["watchEndpoint"],
     "cmsEnv": ["watchEndpoint"],
-    "userRoles": ["watchEndpoint"]
+    "userRoles": ["watchEndpoint"],
+    "blogsLimit": ["watchEndpoint"]
   }; }
   static get style() { return blogArticlesGridCss; }
 }, [1, "blog-articles-grid", {

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

@@ -81,7 +81,7 @@ const blogArticlesGridCss = ":host {\n  display: block;\n}\n\n.BlogPageContainer
 const BlogArticlesGrid = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
-    this.articleActionButton = createEvent(this, "articleActionButton", 7);
+    this.ArticleActionButton = createEvent(this, "ArticleActionButton", 7);
     /**
     * Language of the widget
     */
@@ -125,7 +125,7 @@ const BlogArticlesGrid = class {
     /**
     * Event name to be sent when the button is clicked
     */
-    this.postMessageEvent = 'articleActionButton';
+    this.postMessageEvent = '';
     /**
     * Customize pagination: Activate pagination numbered navigation
     */
@@ -214,7 +214,7 @@ const BlogArticlesGrid = class {
         setTimeout(() => { this.stylingContainer.prepend(cssFile); }, 1);
       })
         .catch((err) => {
-        console.log('error ', err);
+        console.log('Error ', err);
       });
     };
     this.setImage = (image) => {
@@ -246,7 +246,12 @@ const BlogArticlesGrid = class {
     };
   }
   getArticleId(postId, slug, customPath) {
-    this.articleActionButton.emit({ postId, slug, customPath });
+    if (this.usePostmessage) {
+      window.postMessage({ type: this.postMessageEvent, postId, slug, customPath });
+    }
+    else {
+      this.ArticleActionButton.emit({ postId, slug, customPath });
+    }
     if (this.usePostmessage) {
       window.postMessage({ type: this.postMessageEvent, postId, slug, customPath });
     }
@@ -279,7 +284,7 @@ const BlogArticlesGrid = class {
     this.getBlogArticleGrid();
   }
   connectedCallback() {
-    if (this.cmsEndpoint && this.language) {
+    if (this.cmsEndpoint && this.language && this.blogsLimit) {
       if (this.page) {
         this.currentPage = this.currentPage + +this.page - 1;
         this.getBlogArticleGrid(+this.page);
@@ -388,7 +393,8 @@ const BlogArticlesGrid = class {
     "cmsEndpoint": ["watchEndpoint"],
     "language": ["watchEndpoint"],
     "cmsEnv": ["watchEndpoint"],
-    "userRoles": ["watchEndpoint"]
+    "userRoles": ["watchEndpoint"],
+    "blogsLimit": ["watchEndpoint"]
   }; }
 };
 BlogArticlesGrid.style = blogArticlesGridCss;

package/dist/types/Users/dragos.bodea/Documents/everymatrix-prjs/emfe-widgets/widgets-stencil/packages/blog-articles-grid/.stencil/packages/blog-articles-grid/stencil.config.d.ts

@@ -0,0 +1,2 @@
+import { Config } from '../../../../../../../../../../../stencil-public-runtime';
+export declare const config: Config;

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

@@ -81,7 +81,7 @@ export declare class BlogArticlesGrid {
    * Page to particularly be opened on start
    */
   page: string;
-  articleActionButton: EventEmitter<Object>;
+  ArticleActionButton: EventEmitter<Object>;
   getArticleId(postId: number, slug: string, customPath: string): void;
   paginationBlogList: any;
   currentPage: number;

package/package.json

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

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

@@ -1 +0,0 @@
-import{r as t,c as i,h as n}from"./p-13642dde.js";const e=["ro","en","fr","ar","hu","hr"],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:"Tovább olvasom"},hr:{error:"Greška",readmore:"Pročitaj više"}},o=(t,i)=>{const n=i;return s[void 0!==n&&e.includes(n)?n:"en"][t]};const a=class{constructor(e){t(this,e),this.articleActionButton=i(this,"articleActionButton",7),this.language="en",this.userRoles="everyone",this.cmsEnv="stage",this.clientStyling="",this.clientStylingUrl="",this.showPublishingDate=!0,this.showImage=!0,this.showTitle=!0,this.showContent=!0,this.showButton=!0,this.postMessageEvent="articleActionButton",this.blogsLimit="0",this.intlDateTimeFormat="",this.page="",this.paginationBlogList={offset:0},this.currentPage=0,this.hasErrors=!1,this.limitStylingAppends=!1,this.isLoading=!0,this.bannerMatrixReady=!1,this.nextPage="",this.previousPage="",this.device="",this.totalBlogs=0,this.defaultStyling="\n  div#PaginationContainer {\n    justify-content: right;\n  }\n  .LeftItems button .NavigationButton {\n    display: none;\n  }\n  .LeftItems button:after, .RightItems button:after {\n    padding: 7px 12px;\n    font-size: 18px;\n    font-weight: 700;\n    line-height: 46px;\n  }\n  .LeftItems button:after {\n    content: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1.2em' viewBox='0 0 320 512'%3E%3C!--! Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --%3E%3Cpath d='M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l192 192c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256 246.6 86.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-192 192z'/%3E%3C/svg%3E\");\n  }\n  .RightItems button:after {\n    content: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1.2em' viewBox='0 0 320 512'%3E%3C!--! Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --%3E%3Cpath d='M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z'/%3E%3C/svg%3E\");\n    display: block;\n    height: 38px;\n  }\n  div.LeftItems button, div.RightItems button {\n    width: unset;\n    height: 40px;\n    background-color: #fff;\n    color: #000;\n    border: 1px solid #000;\n    overflow: hidden;\n    &:disabled {\n      background-color: #989898;\n    }\n  }\n  div.LeftItems button {\n    min-width: 60px;\n    border-radius: 20px 0 0 20px;\n    border-right: 0;\n  }\n  div.RightItems button {\n    display: flex;\n    min-width: 100px;\n    justify-content: space-evenly;\n    align-items: center;\n    border-radius: 0 20px 20px 0;\n    text-transform: none;\n  }\n  .RightItems button .NavigationButton {\n    padding: 12px 0 12px 12px;\n    font-weight: 700;\n  }",this.setClientStyling=()=>{let t=document.createElement("style");t.innerHTML=this.clientStyling,this.stylingContainer.prepend(t)},this.setClientStylingURL=()=>{let t=new URL(this.clientStylingUrl),i=document.createElement("style");fetch(t.href).then((t=>t.text())).then((t=>{i.innerHTML=t,setTimeout((()=>{this.stylingContainer.prepend(i)}),1)})).catch((t=>{console.log("error ",t)}))},this.setImage=t=>{let i="";switch(this.device){case"mobile":i=t.sources[0].pictureSource;break;case"tablet":i=t.sources[1].pictureSource;break;case"desktop":i=t.sources[2].pictureSource}return i},this.renderContentConditionally=t=>{if(t)return-1!==t.indexOf("<bannermatrix-banner")?this.bannerMatrixReady?n("div",{class:"BlogContent",innerHTML:t}):null:n("div",{class:"BlogContent",innerHTML:t})}}getArticleId(t,i,n){this.articleActionButton.emit({postId:t,slug:i,customPath:n}),this.usePostmessage&&window.postMessage({type:this.postMessageEvent,postId:t,slug:i,customPath:n})}handleBannerReady(){this.bannerMatrixReady=!0}watchEndpoint(t,i){t&&t!=i&&this.cmsEndpoint&&this.language&&this.getBlogArticleGrid()}hpPageChange(t){var i,n;this.paginationBlogList=t.detail,this.currentPage=Math.floor((null===(i=this.paginationBlogList)||void 0===i?void 0:i.offset)/(null===(n=this.paginationBlogList)||void 0===n?void 0:n.limit)),this.page&&(this.currentPage=this.currentPage+ +this.page-1),this.currentPage+1>this.lastPage?this.nextPage=null:this.currentPage<0?this.previousPage=null:(window.postMessage({type:"BlogArticlesGridActivePagination",currentPage:this.currentPage},window.location.href),this.getBlogArticleGrid())}connectedCallback(){this.cmsEndpoint&&this.language&&(this.page?(this.currentPage=this.currentPage+ +this.page-1,this.getBlogArticleGrid(+this.page)):this.getBlogArticleGrid())}componentDidLoad(){window.postMessage({type:"BlogArticlesGridLoaded"},window.location.href),this.device=function(){const t=navigator.userAgent.toLowerCase();let i="";return i=t.includes("android")||t.includes("iphone")||t.includes("ipad")?function(){const t=screen.availWidth;return t<600?"mobile":t>=600&&t<1100?"tablet":void 0}():"desktop",i}()}sortArticlesByDate(t){return t.sort(((t,i)=>t.publishingDate>i.publishingDate?-1:t.publishingDate<i.publishingDate?1:0)),t}findLatestFeatured(t){let i=t.filter((t=>t.isFeaturedPost));return 0===i.length?null:(i=this.sortArticlesByDate(i),i[0])}moveLatestFeatureToStart(t,i){const n=t.indexOf(i);return-1!==n&&(t.splice(n,1),t.unshift(i)),t}getBlogArticleGrid(t){this.isLoading=!0;let i=new URL(`${this.cmsEndpoint}/${this.language}/blog-posts`);i.searchParams.append("per_page",this.blogsLimit),i.searchParams.append("page",JSON.stringify(t||this.currentPage+1)),i.searchParams.append("env",this.cmsEnv),i.searchParams.append("userRoles",this.userRoles),i.searchParams.append("device",(()=>{const t=(()=>{let t=window.navigator.userAgent;return t.toLowerCase().match(/android/i)?"Android":t.toLowerCase().match(/iphone/i)?"iPhone":t.toLowerCase().match(/ipad|ipod/i)?"iPad":"PC"})();if(t)return"PC"===t?"dk":"mtWeb"})()),fetch(i.href).then((t=>{if(t.status>=300)throw this.hasErrors=!0,new Error("There was an error while fetching the data");return t.json()})).then((t=>{this.lastPage=+t.pages.last.match(/&page=(\d+)/)[1];let i=t.items;this.nextPage=t.pages.next,this.previousPage=t.pages.previous,this.totalBlogs=t.total;const n=this.findLatestFeatured(i);this.blogData=this.sortArticlesByDate(i),this.blogData=this.moveLatestFeatureToStart(i,n),this.blogData.items=i.map((t=>Object.assign(Object.assign({},t),{publishingDate:new Date(t.publishingDate).toLocaleDateString()}))),this.isLoading=!1})).catch((t=>{this.hasErrors=!0,console.log("Error",t)})).finally((()=>this.isLoading=!1))}componentDidRender(){!this.limitStylingAppends&&this.stylingContainer&&(this.clientStyling&&this.setClientStyling(),this.clientStylingUrl&&this.setClientStylingURL(),this.limitStylingAppends=!0)}formatDate(t){return new Intl.DateTimeFormat(this.intlDateTimeFormat).format(new Date(t))}render(){var t,i;return this.hasErrors?n("div",{class:"BlogsContainer"},n("div",{class:"ErrorMessage"},o("error",this.language))):n("div",{ref:t=>this.stylingContainer=t},n("div",{class:"BlogPageContainer"},n("div",{class:"BlogGridPaginationWrapper"},1==this.paginationActive&&this.totalBlogs>+this.blogsLimit&&n("helper-pagination",{"next-page":this.nextPage,"prev-page":this.previousPage,offset:this.paginationBlogList.offset,limit: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||!0,"secondary-arrows-active":this.secondaryArrowsActive||!1,"numbered-nav-active":this.numberedNavActive||!1})),!this.isLoading&&n("div",{class:`GridContainerWrapper BlogPage-${this.currentPage}`},this.blogData&&this.blogData.map((t=>{var i,e;return n("div",{key:t.postID,class:t.isFeaturedPost?"GridContainer FeaturedPost":"GridContainer"},n("div",{class:"GridWrapper"},n("div",{class:"GridSector"},this.showPublishingDate&&n("div",{class:"BlogDate"},this.formatDate(null==t?void 0:t.publishingDate)),this.showImage&&(null===(i=t.image)||void 0===i?void 0:i.src)?n("div",{class:"VisualContent",style:{background:`url(${this.setImage(t.image)}) no-repeat center center / cover`}}):(null===(e=t.video)||void 0===e?void 0:e.sources[this.device])?n("video",{class:"VisualContent",src:t.video.sources[this.device],controls:!0}):n("h1",{class:"VisualContent",style:{color:"#fff"}},"No Image")),n("div",{class:"GridSector"},this.showTitle&&n("div",{class:"BlogTitle"},null==t?void 0:t.title),this.showContent&&this.renderContentConditionally(null==t?void 0:t.descriptionPreview),this.showButton&&n("div",{class:"BlogLink"},n("button",{onClick:()=>this.getArticleId(null==t?void 0:t.postID,null==t?void 0:t.slug,null==t?void 0:t.customPath)},o("readmore",this.language))))))})))))}static get watchers(){return{cmsEndpoint:["watchEndpoint"],language:["watchEndpoint"],cmsEnv:["watchEndpoint"],userRoles:["watchEndpoint"]}}};a.style=":host {\n  display: block;\n}\n\n.BlogPageContainer {\n  background: #0A0A17;\n  padding: 20px;\n}\n\n.GridContainerWrapper {\n  display: flex;\n  flex-flow: row wrap;\n  gap: 20px;\n}\n\n.GridContainer {\n  container-type: inline-size;\n  container-name: article;\n  border-radius: 15px;\n  color: #000;\n  flex: 1 1 550px;\n  overflow: hidden;\n}\n.GridContainer.FeaturedPost:first-child {\n  width: 100%;\n  flex-basis: auto;\n}\n.GridContainer .GridWrapper {\n  display: flex;\n  flex-direction: row;\n  height: 280px;\n  background: #fff;\n}\n.GridContainer .GridSector {\n  flex-basis: 50%;\n  position: relative;\n}\n.GridContainer .GridSector:first-of-type {\n  height: 280px;\n  display: flex;\n}\n.GridContainer .GridSector:last-of-type {\n  padding: 20px 40px;\n  display: flex;\n  flex-direction: column;\n}\n.GridContainer .VisualContent {\n  width: 100%;\n}\n.GridContainer .BlogDate {\n  position: absolute;\n  bottom: 0px;\n  left: 30px;\n  font-size: 12px;\n  border-radius: 5px 5px 0 0;\n  padding: 10px;\n  width: fit-content;\n  text-align: center;\n  color: #FFF;\n  background-color: #CD0B5E;\n  z-index: 1;\n}\n.GridContainer .BlogTitle {\n  font-size: 24px;\n  color: #000;\n  padding-bottom: 10px;\n}\n.GridContainer .BlogContent {\n  display: -webkit-box;\n  font-size: 14px;\n  line-height: 1.2em;\n  -webkit-line-clamp: 6;\n  color: #000;\n  -webkit-box-orient: vertical;\n  box-sizing: border-box;\n  text-overflow: ellipsis;\n  overflow: hidden;\n}\n.GridContainer .BlogLink {\n  color: #000;\n  position: absolute;\n  bottom: 16px;\n}\n.GridContainer .BlogLink button {\n  font-size: 14px;\n  border: none;\n  padding: 0;\n  background: none;\n  color: #D0046C;\n  cursor: pointer;\n}\n\n@container article (max-width: 550px) {\n  .GridContainer .GridWrapper {\n    height: 380px;\n    flex-direction: column;\n  }\n  .GridContainer .GridWrapper .GridSector:first-of-type {\n    height: 120px;\n    flex-shrink: 0;\n    flex-basis: 150px;\n  }\n  .GridContainer .GridWrapper .GridSector:last-of-type {\n    padding: 20px 20px 40px;\n  }\n}";const r=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","hr"],l={en:{firstPage:"First",previousPage:"Previous",nextPage:"Next",lastPage:"Last"},ro:{firstPage:"Prima",previousPage:"Anterior",nextPage:"Urmatoarea",lastPage:"Ultima"},fr:{firstPage:"First",previousPage:"Previous",nextPage:"Next",lastPage:"Last"},ar:{firstPage:"First",previousPage:"Previous",nextPage:"Next",lastPage:"Last"},hu:{firstPage:"First",previousPage:"Previous",nextPage:"Következő",lastPage:"Last"},hr:{firstPage:"Prva",previousPage:"Prethodna",nextPage:"Slijedeća",lastPage:"Zadnja"}},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":" ")+" "+(r(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"})));r(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 r(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{a as blog_articles_grid,c as helper_pagination}

package/dist/types/Users/adrian.pripon/Documents/Work/widgets-stencil/packages/blog-articles-grid/.stencil/packages/blog-articles-grid/stencil.config.d.ts

@@ -1,2 +0,0 @@
-import { Config } from '../../../../../../../../../../stencil-public-runtime';
-export declare const config: Config;