@everymatrix/blog-article-details 1.27.2 → 1.27.4

package/dist/blog-article-details/blog-article-details.esm.js

@@ -1 +1 @@
-import{p as t,b as e}from"./p-68e0210a.js";(()=>{const e=import.meta.url,s={};return""!==e&&(s.resourcesUrl=new URL(".",e).href),t(s)})().then((t=>e([["p-9d4b45aa",[[1,"blog-article-details",{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"],postMessageEvent:[513,"post-message-event"],postId:[514,"post-id"],postSlug:[513,"post-slug"],postCustomPath:[513,"post-custom-path"],intlDateTimeFormat:[1,"intl-date-time-format"],hasErrors:[32],limitStylingAppends:[32],isLoading:[32],bannerMatrixReady:[32],device:[32]},[[8,"BannerMatrixReady","handleBannerReady"]]]]]],t)));
+import{p as t,b as e}from"./p-68e0210a.js";(()=>{const e=import.meta.url,s={};return""!==e&&(s.resourcesUrl=new URL(".",e).href),t(s)})().then((t=>e([["p-df1f1274",[[1,"blog-article-details",{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"],postId:[514,"post-id"],postSlug:[513,"post-slug"],postCustomPath:[513,"post-custom-path"],intlDateTimeFormat:[1,"intl-date-time-format"],hasErrors:[32],limitStylingAppends:[32],isLoading:[32],bannerMatrixReady:[32],device:[32]},[[8,"BannerMatrixReady","handleBannerReady"]]]]]],t)));

package/dist/blog-article-details/p-df1f1274.entry.js

@@ -0,0 +1 @@
+import{r as t,h as i}from"./p-68e0210a.js";const n=["ro","en","fr","ar","hr"],e={en:{error:"Error"},ro:{error:"Eroare"},fr:{error:"Error"},ar:{error:"خطأ"},hr:{error:"Greška"}};const s=class{constructor(n){t(this,n),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.intlDateTimeFormat="",this.hasErrors=!1,this.limitStylingAppends=!1,this.isLoading=!0,this.bannerMatrixReady=!1,this.device="",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=>-1!==(null==t?void 0:t.indexOf("<bannermatrix-banner"))?this.bannerMatrixReady?i("div",{class:"BlogContent",innerHTML:t}):null:i("div",{class:"BlogContent",innerHTML: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}}handleBannerReady(){this.bannerMatrixReady=!0}watchEndpoint(t,i){t&&t!=i&&this.cmsEndpoint&&this.getBlogArticleDetails()}connectedCallback(){this.cmsEndpoint&&this.language&&(this.postCustomPath||this.postSlug||this.postId)&&this.getBlogArticleDetails()}getBlogArticleDetails(){if(!this.postId&&!this.postSlug&&!this.postCustomPath)throw this.hasErrors=!0,new Error("postId, postSlug or postCustomPath parameter has to be provided!");this.isLoading=!0;let t=new URL(`${this.cmsEndpoint}/${this.language}/blog-posts${this.postCustomPath?"":"/"+this.postSlug||"/"+this.postId}`);t.searchParams.append("env",this.cmsEnv),t.searchParams.append("userRoles",this.userRoles),t.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"})()),this.postCustomPath&&t.searchParams.append("customURL",this.postCustomPath),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=>{if(t.count>1&&this.postCustomPath){let i=new Date(t.items[0].publishingDate),n=0;for(let e=1;e<t.items.length;e++){const s=new Date(t.items[e].publishingDate);i.getTime()<s.getTime()&&(i=s,n=e)}this.blogData=t.items[n]}else this.blogData=this.postCustomPath?t.items[0]:t;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)}componentDidLoad(){this.detectAndAlertDeviceType()}detectAndAlertDeviceType(){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}()}formatDate(t){return new Intl.DateTimeFormat(this.intlDateTimeFormat||"en-GB").format(new Date(t))}render(){var t,s,o,r,a;return this.hasErrors?i("div",{class:"BlogArticleDetails"},i("div",{class:"Title"},(()=>{const t=this.language;return e[void 0!==t&&n.includes(t)?t:"en"].error})())):this.isLoading?void 0:i("div",{ref:t=>this.stylingContainer=t},i("div",{class:"DetailsContainer"},i("div",{class:"DetailsHeadWrapper"},this.showPublishingDate&&i("div",{class:"BlogDate"},this.formatDate(null===(t=this.blogData)||void 0===t?void 0:t.publishingDate)),this.showImage&&i("div",{class:"BlogBanner"},(null===(s=this.blogData.image)||void 0===s?void 0:s.src)?i("div",{style:{background:`url(${this.setImage(this.blogData.image)}) no-repeat center center / cover`}}):(null===(o=this.blogData.video)||void 0===o?void 0:o.sources[this.device])?i("video",{src:this.blogData.video.sources[this.device],controls:!0}):i("h1",{style:{color:"white"}},"No Image"))),i("div",{class:"DetailsBodyWrapper"},this.showTitle&&i("div",{class:"BlogTitle"},null===(r=this.blogData)||void 0===r?void 0:r.title),this.showContent&&this.renderContentConditionally(null===(a=this.blogData)||void 0===a?void 0:a.content))))}static get watchers(){return{postId:["watchEndpoint"],postSlug:["watchEndpoint"],postCustomPath:["watchEndpoint"],cmsEndpoint:["watchEndpoint"],language:["watchEndpoint"]}}};s.style=":host {\n  display: block;\n}\n\n.DetailsContainer {\n  background-color: #07072A;\n  color: #fff;\n  display: flex;\n  flex-direction: column;\n}\n.DetailsContainer .BlogBanner div {\n  height: 400px;\n}\n.DetailsContainer .DetailsHeadWrapper {\n  position: relative;\n}\n.DetailsContainer .DetailsBodyWrapper {\n  padding: 30px;\n}\n.DetailsContainer .BlogDate {\n  font-size: 12px;\n  border-radius: 5px 5px 0 0;\n  padding: 10px;\n  width: fit-content;\n  text-align: center;\n  background-color: #0D0D4D;\n  z-index: 1;\n  text-wrap: nowrap;\n  position: absolute;\n  bottom: 0;\n  left: 30px;\n}\n.DetailsContainer .BlogTitle {\n  font-size: 24px;\n}\n.DetailsContainer .BlogContent {\n  font-size: 14px;\n}\n.DetailsContainer .BlogContent p:last-child {\n  margin-bottom: 0;\n}\n\n@container (max-width: 475px) {\n  .DetailsContainer {\n    font-size: 12px;\n  }\n}";export{s as blog_article_details}

package/dist/cjs/blog-article-details.cjs.entry.js

@@ -71,7 +71,7 @@ const getDevicePlatform = () => {
   }
 };
 
-const blogArticleDetailsCss = ":host {\n  display: block;\n}\n\n.GridContainer {\n  overflow: auto;\n  margin: auto;\n  width: 100%;\n  padding-bottom: 30px;\n  background-color: #07072A;\n  display: grid;\n  grid-template-rows: auto;\n  grid-template-columns: 30px 60px 1fr 30px;\n  gap: 10px;\n}\n.GridContainer .BlogBanner {\n  grid-column: 1/5;\n  grid-row: 1/3;\n}\n.GridContainer .BlogBanner img {\n  width: 100%;\n  height: auto;\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: #FFF;\n  background-color: #0D0D4D;\n  z-index: 1;\n  text-wrap: nowrap;\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\n@container (max-width: 475px) {\n  .GridContainer {\n    font-size: 12px;\n  }\n}";
+const blogArticleDetailsCss = ":host {\n  display: block;\n}\n\n.DetailsContainer {\n  background-color: #07072A;\n  color: #fff;\n  display: flex;\n  flex-direction: column;\n}\n.DetailsContainer .BlogBanner div {\n  height: 400px;\n}\n.DetailsContainer .DetailsHeadWrapper {\n  position: relative;\n}\n.DetailsContainer .DetailsBodyWrapper {\n  padding: 30px;\n}\n.DetailsContainer .BlogDate {\n  font-size: 12px;\n  border-radius: 5px 5px 0 0;\n  padding: 10px;\n  width: fit-content;\n  text-align: center;\n  background-color: #0D0D4D;\n  z-index: 1;\n  text-wrap: nowrap;\n  position: absolute;\n  bottom: 0;\n  left: 30px;\n}\n.DetailsContainer .BlogTitle {\n  font-size: 24px;\n}\n.DetailsContainer .BlogContent {\n  font-size: 14px;\n}\n.DetailsContainer .BlogContent p:last-child {\n  margin-bottom: 0;\n}\n\n@container (max-width: 475px) {\n  .DetailsContainer {\n    font-size: 12px;\n  }\n}";
 
 const BlogArticleDetails = class {
   constructor(hostRef) {
@@ -112,10 +112,6 @@ const BlogArticleDetails = class {
     * Property used to display the description
     */
     this.showContent = true;
-    /**
-     * Event name to be sent when the button is clicked
-     */
-    this.postMessageEvent = 'articleActionButton';
     /**
      * Intl date format
      */
@@ -179,7 +175,7 @@ const BlogArticleDetails = class {
     }
   }
   connectedCallback() {
-    if (this.cmsEndpoint && this.language) {
+    if (this.cmsEndpoint && this.language && (this.postCustomPath || this.postSlug || this.postId)) {
       this.getBlogArticleDetails();
     }
   }
@@ -189,7 +185,7 @@ const BlogArticleDetails = class {
       throw new Error('postId, postSlug or postCustomPath parameter has to be provided!');
     }
     this.isLoading = true;
-    let url = new URL(`${this.cmsEndpoint}/${this.language}/blog-posts${this.postCustomPath ? '' : this.postSlug || this.postId}`);
+    let url = new URL(`${this.cmsEndpoint}/${this.language}/blog-posts${this.postCustomPath ? '' : '/' + this.postSlug || '/' + this.postId}`);
     url.searchParams.append('env', this.cmsEnv);
     url.searchParams.append('userRoles', this.userRoles);
     url.searchParams.append('device', getDevicePlatform());
@@ -257,12 +253,15 @@ const BlogArticleDetails = class {
       return (index.h("div", { class: "BlogArticleDetails" }, index.h("div", { class: "Title" }, translate('error', this.language))));
     }
     if (!this.isLoading) {
-      return (index.h("div", { ref: el => this.stylingContainer = el }, index.h("div", { class: "GridContainer" }, this.showPublishingDate &&
-        index.h("div", { class: "BlogDate" }, this.formatDate((_a = this.blogData) === null || _a === void 0 ? void 0 : _a.publishingDate)), this.showImage && (index.h("div", { class: "BlogBanner" }, ((_b = this.blogData.image) === null || _b === void 0 ? void 0 : _b.src) ? (index.h("img", { src: this.setImage(this.blogData.image), alt: this.blogData.image.slug })) : (((_c = this.blogData.video) === null || _c === void 0 ? void 0 : _c.sources[this.device]) ? (index.h("video", { src: this.blogData.video.sources[this.device], controls: true })) : (index.h("h1", { style: { color: "white" } }, "No Image"))))), this.showTitle &&
-        index.h("div", { class: "BlogTitle" }, (_d = this.blogData) === null || _d === void 0 ? void 0 : _d.title), this.showContent && this.renderContentConditionally((_e = this.blogData) === null || _e === void 0 ? void 0 : _e.content))));
+      return (index.h("div", { ref: el => this.stylingContainer = el }, index.h("div", { class: "DetailsContainer" }, index.h("div", { class: "DetailsHeadWrapper" }, this.showPublishingDate &&
+        index.h("div", { class: "BlogDate" }, this.formatDate((_a = this.blogData) === null || _a === void 0 ? void 0 : _a.publishingDate)), this.showImage && (index.h("div", { class: "BlogBanner" }, ((_b = this.blogData.image) === null || _b === void 0 ? void 0 : _b.src) ? (index.h("div", { style: { background: `url(${this.setImage(this.blogData.image)}) no-repeat center center / cover` } })) : (((_c = this.blogData.video) === null || _c === void 0 ? void 0 : _c.sources[this.device]) ? (index.h("video", { src: this.blogData.video.sources[this.device], controls: true })) : (index.h("h1", { style: { color: "white" } }, "No Image")))))), index.h("div", { class: "DetailsBodyWrapper" }, this.showTitle &&
+        index.h("div", { class: "BlogTitle" }, (_d = this.blogData) === null || _d === void 0 ? void 0 : _d.title), this.showContent && this.renderContentConditionally((_e = this.blogData) === null || _e === void 0 ? void 0 : _e.content)))));
     }
   }
   static get watchers() { return {
+    "postId": ["watchEndpoint"],
+    "postSlug": ["watchEndpoint"],
+    "postCustomPath": ["watchEndpoint"],
     "cmsEndpoint": ["watchEndpoint"],
     "language": ["watchEndpoint"]
   }; }

package/dist/cjs/blog-article-details.cjs.js

@@ -15,5 +15,5 @@ const patchBrowser = () => {
 };
 
 patchBrowser().then(options => {
-  return index.bootstrapLazy([["blog-article-details.cjs",[[1,"blog-article-details",{"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"],"postMessageEvent":[513,"post-message-event"],"postId":[514,"post-id"],"postSlug":[513,"post-slug"],"postCustomPath":[513,"post-custom-path"],"intlDateTimeFormat":[1,"intl-date-time-format"],"hasErrors":[32],"limitStylingAppends":[32],"isLoading":[32],"bannerMatrixReady":[32],"device":[32]},[[8,"BannerMatrixReady","handleBannerReady"]]]]]], options);
+  return index.bootstrapLazy([["blog-article-details.cjs",[[1,"blog-article-details",{"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"],"postId":[514,"post-id"],"postSlug":[513,"post-slug"],"postCustomPath":[513,"post-custom-path"],"intlDateTimeFormat":[1,"intl-date-time-format"],"hasErrors":[32],"limitStylingAppends":[32],"isLoading":[32],"bannerMatrixReady":[32],"device":[32]},[[8,"BannerMatrixReady","handleBannerReady"]]]]]], options);
 });

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-article-details.cjs",[[1,"blog-article-details",{"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"],"postMessageEvent":[513,"post-message-event"],"postId":[514,"post-id"],"postSlug":[513,"post-slug"],"postCustomPath":[513,"post-custom-path"],"intlDateTimeFormat":[1,"intl-date-time-format"],"hasErrors":[32],"limitStylingAppends":[32],"isLoading":[32],"bannerMatrixReady":[32],"device":[32]},[[8,"BannerMatrixReady","handleBannerReady"]]]]]], options);
+  return index.bootstrapLazy([["blog-article-details.cjs",[[1,"blog-article-details",{"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"],"postId":[514,"post-id"],"postSlug":[513,"post-slug"],"postCustomPath":[513,"post-custom-path"],"intlDateTimeFormat":[1,"intl-date-time-format"],"hasErrors":[32],"limitStylingAppends":[32],"isLoading":[32],"bannerMatrixReady":[32],"device":[32]},[[8,"BannerMatrixReady","handleBannerReady"]]]]]], options);
   });
 };
 

package/dist/collection/components/blog-article-details/blog-article-details.css

@@ -2,51 +2,46 @@
   display: block;
 }
 
-.GridContainer {
-  overflow: auto;
-  margin: auto;
-  width: 100%;
-  padding-bottom: 30px;
+.DetailsContainer {
   background-color: #07072A;
-  display: grid;
-  grid-template-rows: auto;
-  grid-template-columns: 30px 60px 1fr 30px;
-  gap: 10px;
-}
-.GridContainer .BlogBanner {
-  grid-column: 1/5;
-  grid-row: 1/3;
-}
-.GridContainer .BlogBanner img {
-  width: 100%;
-  height: auto;
-}
-.GridContainer .BlogDate {
-  grid-column: 2/3;
-  grid-row: 2/3;
+  color: #fff;
+  display: flex;
+  flex-direction: column;
+}
+.DetailsContainer .BlogBanner div {
+  height: 400px;
+}
+.DetailsContainer .DetailsHeadWrapper {
+  position: relative;
+}
+.DetailsContainer .DetailsBodyWrapper {
+  padding: 30px;
+}
+.DetailsContainer .BlogDate {
   font-size: 12px;
   border-radius: 5px 5px 0 0;
   padding: 10px;
   width: fit-content;
   text-align: center;
-  color: #FFF;
   background-color: #0D0D4D;
   z-index: 1;
   text-wrap: nowrap;
+  position: absolute;
+  bottom: 0;
+  left: 30px;
 }
-.GridContainer .BlogTitle {
-  grid-column: 2/4;
+.DetailsContainer .BlogTitle {
   font-size: 24px;
-  color: #FFF;
 }
-.GridContainer .BlogContent {
-  grid-column: 2/4;
+.DetailsContainer .BlogContent {
   font-size: 14px;
-  color: #FFF;
+}
+.DetailsContainer .BlogContent p:last-child {
+  margin-bottom: 0;
 }
 
 @container (max-width: 475px) {
-  .GridContainer {
+  .DetailsContainer {
     font-size: 12px;
   }
 }

package/dist/collection/components/blog-article-details/blog-article-details.js

@@ -39,10 +39,6 @@ export class BlogArticleDetails {
     * Property used to display the description
     */
     this.showContent = true;
-    /**
-     * Event name to be sent when the button is clicked
-     */
-    this.postMessageEvent = 'articleActionButton';
     /**
      * Intl date format
      */
@@ -106,7 +102,7 @@ export class BlogArticleDetails {
     }
   }
   connectedCallback() {
-    if (this.cmsEndpoint && this.language) {
+    if (this.cmsEndpoint && this.language && (this.postCustomPath || this.postSlug || this.postId)) {
       this.getBlogArticleDetails();
     }
   }
@@ -116,7 +112,7 @@ export class BlogArticleDetails {
       throw new Error('postId, postSlug or postCustomPath parameter has to be provided!');
     }
     this.isLoading = true;
-    let url = new URL(`${this.cmsEndpoint}/${this.language}/blog-posts${this.postCustomPath ? '' : this.postSlug || this.postId}`);
+    let url = new URL(`${this.cmsEndpoint}/${this.language}/blog-posts${this.postCustomPath ? '' : '/' + this.postSlug || '/' + this.postId}`);
     url.searchParams.append('env', this.cmsEnv);
     url.searchParams.append('userRoles', this.userRoles);
     url.searchParams.append('device', getDevicePlatform());
@@ -187,13 +183,15 @@ export class BlogArticleDetails {
     }
     if (!this.isLoading) {
       return (h("div", { ref: el => this.stylingContainer = el },
-        h("div", { class: "GridContainer" },
-          this.showPublishingDate &&
-            h("div", { class: "BlogDate" }, this.formatDate((_a = this.blogData) === null || _a === void 0 ? void 0 : _a.publishingDate)),
-          this.showImage && (h("div", { class: "BlogBanner" }, ((_b = this.blogData.image) === null || _b === void 0 ? void 0 : _b.src) ? (h("img", { src: this.setImage(this.blogData.image), alt: this.blogData.image.slug })) : (((_c = this.blogData.video) === null || _c === void 0 ? void 0 : _c.sources[this.device]) ? (h("video", { src: this.blogData.video.sources[this.device], controls: true })) : (h("h1", { style: { color: "white" } }, "No Image"))))),
-          this.showTitle &&
-            h("div", { class: "BlogTitle" }, (_d = this.blogData) === null || _d === void 0 ? void 0 : _d.title),
-          this.showContent && this.renderContentConditionally((_e = this.blogData) === null || _e === void 0 ? void 0 : _e.content))));
+        h("div", { class: "DetailsContainer" },
+          h("div", { class: "DetailsHeadWrapper" },
+            this.showPublishingDate &&
+              h("div", { class: "BlogDate" }, this.formatDate((_a = this.blogData) === null || _a === void 0 ? void 0 : _a.publishingDate)),
+            this.showImage && (h("div", { class: "BlogBanner" }, ((_b = this.blogData.image) === null || _b === void 0 ? void 0 : _b.src) ? (h("div", { style: { background: `url(${this.setImage(this.blogData.image)}) no-repeat center center / cover` } })) : (((_c = this.blogData.video) === null || _c === void 0 ? void 0 : _c.sources[this.device]) ? (h("video", { src: this.blogData.video.sources[this.device], controls: true })) : (h("h1", { style: { color: "white" } }, "No Image")))))),
+          h("div", { class: "DetailsBodyWrapper" },
+            this.showTitle &&
+              h("div", { class: "BlogTitle" }, (_d = this.blogData) === null || _d === void 0 ? void 0 : _d.title),
+            this.showContent && this.renderContentConditionally((_e = this.blogData) === null || _e === void 0 ? void 0 : _e.content)))));
     }
   }
   static get is() { return "blog-article-details"; }
@@ -384,24 +382,6 @@ export class BlogArticleDetails {
       "reflect": true,
       "defaultValue": "true"
     },
-    "postMessageEvent": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Event name to be sent when the button is clicked"
-      },
-      "attribute": "post-message-event",
-      "reflect": true,
-      "defaultValue": "'articleActionButton'"
-    },
     "postId": {
       "type": "number",
       "mutable": false,
@@ -480,6 +460,15 @@ export class BlogArticleDetails {
     "device": {}
   }; }
   static get watchers() { return [{
+      "propName": "postId",
+      "methodName": "watchEndpoint"
+    }, {
+      "propName": "postSlug",
+      "methodName": "watchEndpoint"
+    }, {
+      "propName": "postCustomPath",
+      "methodName": "watchEndpoint"
+    }, {
       "propName": "cmsEndpoint",
       "methodName": "watchEndpoint"
     }, {

package/dist/components/blog-article-details.js

@@ -67,7 +67,7 @@ const getDevicePlatform = () => {
   }
 };
 
-const blogArticleDetailsCss = ":host {\n  display: block;\n}\n\n.GridContainer {\n  overflow: auto;\n  margin: auto;\n  width: 100%;\n  padding-bottom: 30px;\n  background-color: #07072A;\n  display: grid;\n  grid-template-rows: auto;\n  grid-template-columns: 30px 60px 1fr 30px;\n  gap: 10px;\n}\n.GridContainer .BlogBanner {\n  grid-column: 1/5;\n  grid-row: 1/3;\n}\n.GridContainer .BlogBanner img {\n  width: 100%;\n  height: auto;\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: #FFF;\n  background-color: #0D0D4D;\n  z-index: 1;\n  text-wrap: nowrap;\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\n@container (max-width: 475px) {\n  .GridContainer {\n    font-size: 12px;\n  }\n}";
+const blogArticleDetailsCss = ":host {\n  display: block;\n}\n\n.DetailsContainer {\n  background-color: #07072A;\n  color: #fff;\n  display: flex;\n  flex-direction: column;\n}\n.DetailsContainer .BlogBanner div {\n  height: 400px;\n}\n.DetailsContainer .DetailsHeadWrapper {\n  position: relative;\n}\n.DetailsContainer .DetailsBodyWrapper {\n  padding: 30px;\n}\n.DetailsContainer .BlogDate {\n  font-size: 12px;\n  border-radius: 5px 5px 0 0;\n  padding: 10px;\n  width: fit-content;\n  text-align: center;\n  background-color: #0D0D4D;\n  z-index: 1;\n  text-wrap: nowrap;\n  position: absolute;\n  bottom: 0;\n  left: 30px;\n}\n.DetailsContainer .BlogTitle {\n  font-size: 24px;\n}\n.DetailsContainer .BlogContent {\n  font-size: 14px;\n}\n.DetailsContainer .BlogContent p:last-child {\n  margin-bottom: 0;\n}\n\n@container (max-width: 475px) {\n  .DetailsContainer {\n    font-size: 12px;\n  }\n}";
 
 const BlogArticleDetails$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -110,10 +110,6 @@ const BlogArticleDetails$1 = /*@__PURE__*/ proxyCustomElement(class extends HTML
     * Property used to display the description
     */
     this.showContent = true;
-    /**
-     * Event name to be sent when the button is clicked
-     */
-    this.postMessageEvent = 'articleActionButton';
     /**
      * Intl date format
      */
@@ -177,7 +173,7 @@ const BlogArticleDetails$1 = /*@__PURE__*/ proxyCustomElement(class extends HTML
     }
   }
   connectedCallback() {
-    if (this.cmsEndpoint && this.language) {
+    if (this.cmsEndpoint && this.language && (this.postCustomPath || this.postSlug || this.postId)) {
       this.getBlogArticleDetails();
     }
   }
@@ -187,7 +183,7 @@ const BlogArticleDetails$1 = /*@__PURE__*/ proxyCustomElement(class extends HTML
       throw new Error('postId, postSlug or postCustomPath parameter has to be provided!');
     }
     this.isLoading = true;
-    let url = new URL(`${this.cmsEndpoint}/${this.language}/blog-posts${this.postCustomPath ? '' : this.postSlug || this.postId}`);
+    let url = new URL(`${this.cmsEndpoint}/${this.language}/blog-posts${this.postCustomPath ? '' : '/' + this.postSlug || '/' + this.postId}`);
     url.searchParams.append('env', this.cmsEnv);
     url.searchParams.append('userRoles', this.userRoles);
     url.searchParams.append('device', getDevicePlatform());
@@ -255,12 +251,15 @@ const BlogArticleDetails$1 = /*@__PURE__*/ proxyCustomElement(class extends HTML
       return (h("div", { class: "BlogArticleDetails" }, h("div", { class: "Title" }, translate('error', this.language))));
     }
     if (!this.isLoading) {
-      return (h("div", { ref: el => this.stylingContainer = el }, h("div", { class: "GridContainer" }, this.showPublishingDate &&
-        h("div", { class: "BlogDate" }, this.formatDate((_a = this.blogData) === null || _a === void 0 ? void 0 : _a.publishingDate)), this.showImage && (h("div", { class: "BlogBanner" }, ((_b = this.blogData.image) === null || _b === void 0 ? void 0 : _b.src) ? (h("img", { src: this.setImage(this.blogData.image), alt: this.blogData.image.slug })) : (((_c = this.blogData.video) === null || _c === void 0 ? void 0 : _c.sources[this.device]) ? (h("video", { src: this.blogData.video.sources[this.device], controls: true })) : (h("h1", { style: { color: "white" } }, "No Image"))))), this.showTitle &&
-        h("div", { class: "BlogTitle" }, (_d = this.blogData) === null || _d === void 0 ? void 0 : _d.title), this.showContent && this.renderContentConditionally((_e = this.blogData) === null || _e === void 0 ? void 0 : _e.content))));
+      return (h("div", { ref: el => this.stylingContainer = el }, h("div", { class: "DetailsContainer" }, h("div", { class: "DetailsHeadWrapper" }, this.showPublishingDate &&
+        h("div", { class: "BlogDate" }, this.formatDate((_a = this.blogData) === null || _a === void 0 ? void 0 : _a.publishingDate)), this.showImage && (h("div", { class: "BlogBanner" }, ((_b = this.blogData.image) === null || _b === void 0 ? void 0 : _b.src) ? (h("div", { style: { background: `url(${this.setImage(this.blogData.image)}) no-repeat center center / cover` } })) : (((_c = this.blogData.video) === null || _c === void 0 ? void 0 : _c.sources[this.device]) ? (h("video", { src: this.blogData.video.sources[this.device], controls: true })) : (h("h1", { style: { color: "white" } }, "No Image")))))), h("div", { class: "DetailsBodyWrapper" }, this.showTitle &&
+        h("div", { class: "BlogTitle" }, (_d = this.blogData) === null || _d === void 0 ? void 0 : _d.title), this.showContent && this.renderContentConditionally((_e = this.blogData) === null || _e === void 0 ? void 0 : _e.content)))));
     }
   }
   static get watchers() { return {
+    "postId": ["watchEndpoint"],
+    "postSlug": ["watchEndpoint"],
+    "postCustomPath": ["watchEndpoint"],
     "cmsEndpoint": ["watchEndpoint"],
     "language": ["watchEndpoint"]
   }; }
@@ -276,7 +275,6 @@ const BlogArticleDetails$1 = /*@__PURE__*/ proxyCustomElement(class extends HTML
     "showImage": [516, "show-image"],
     "showTitle": [516, "show-title"],
     "showContent": [516, "show-content"],
-    "postMessageEvent": [513, "post-message-event"],
     "postId": [514, "post-id"],
     "postSlug": [513, "post-slug"],
     "postCustomPath": [513, "post-custom-path"],

package/dist/esm/blog-article-details.entry.js

@@ -67,7 +67,7 @@ const getDevicePlatform = () => {
   }
 };
 
-const blogArticleDetailsCss = ":host {\n  display: block;\n}\n\n.GridContainer {\n  overflow: auto;\n  margin: auto;\n  width: 100%;\n  padding-bottom: 30px;\n  background-color: #07072A;\n  display: grid;\n  grid-template-rows: auto;\n  grid-template-columns: 30px 60px 1fr 30px;\n  gap: 10px;\n}\n.GridContainer .BlogBanner {\n  grid-column: 1/5;\n  grid-row: 1/3;\n}\n.GridContainer .BlogBanner img {\n  width: 100%;\n  height: auto;\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: #FFF;\n  background-color: #0D0D4D;\n  z-index: 1;\n  text-wrap: nowrap;\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\n@container (max-width: 475px) {\n  .GridContainer {\n    font-size: 12px;\n  }\n}";
+const blogArticleDetailsCss = ":host {\n  display: block;\n}\n\n.DetailsContainer {\n  background-color: #07072A;\n  color: #fff;\n  display: flex;\n  flex-direction: column;\n}\n.DetailsContainer .BlogBanner div {\n  height: 400px;\n}\n.DetailsContainer .DetailsHeadWrapper {\n  position: relative;\n}\n.DetailsContainer .DetailsBodyWrapper {\n  padding: 30px;\n}\n.DetailsContainer .BlogDate {\n  font-size: 12px;\n  border-radius: 5px 5px 0 0;\n  padding: 10px;\n  width: fit-content;\n  text-align: center;\n  background-color: #0D0D4D;\n  z-index: 1;\n  text-wrap: nowrap;\n  position: absolute;\n  bottom: 0;\n  left: 30px;\n}\n.DetailsContainer .BlogTitle {\n  font-size: 24px;\n}\n.DetailsContainer .BlogContent {\n  font-size: 14px;\n}\n.DetailsContainer .BlogContent p:last-child {\n  margin-bottom: 0;\n}\n\n@container (max-width: 475px) {\n  .DetailsContainer {\n    font-size: 12px;\n  }\n}";
 
 const BlogArticleDetails = class {
   constructor(hostRef) {
@@ -108,10 +108,6 @@ const BlogArticleDetails = class {
     * Property used to display the description
     */
     this.showContent = true;
-    /**
-     * Event name to be sent when the button is clicked
-     */
-    this.postMessageEvent = 'articleActionButton';
     /**
      * Intl date format
      */
@@ -175,7 +171,7 @@ const BlogArticleDetails = class {
     }
   }
   connectedCallback() {
-    if (this.cmsEndpoint && this.language) {
+    if (this.cmsEndpoint && this.language && (this.postCustomPath || this.postSlug || this.postId)) {
       this.getBlogArticleDetails();
     }
   }
@@ -185,7 +181,7 @@ const BlogArticleDetails = class {
       throw new Error('postId, postSlug or postCustomPath parameter has to be provided!');
     }
     this.isLoading = true;
-    let url = new URL(`${this.cmsEndpoint}/${this.language}/blog-posts${this.postCustomPath ? '' : this.postSlug || this.postId}`);
+    let url = new URL(`${this.cmsEndpoint}/${this.language}/blog-posts${this.postCustomPath ? '' : '/' + this.postSlug || '/' + this.postId}`);
     url.searchParams.append('env', this.cmsEnv);
     url.searchParams.append('userRoles', this.userRoles);
     url.searchParams.append('device', getDevicePlatform());
@@ -253,12 +249,15 @@ const BlogArticleDetails = class {
       return (h("div", { class: "BlogArticleDetails" }, h("div", { class: "Title" }, translate('error', this.language))));
     }
     if (!this.isLoading) {
-      return (h("div", { ref: el => this.stylingContainer = el }, h("div", { class: "GridContainer" }, this.showPublishingDate &&
-        h("div", { class: "BlogDate" }, this.formatDate((_a = this.blogData) === null || _a === void 0 ? void 0 : _a.publishingDate)), this.showImage && (h("div", { class: "BlogBanner" }, ((_b = this.blogData.image) === null || _b === void 0 ? void 0 : _b.src) ? (h("img", { src: this.setImage(this.blogData.image), alt: this.blogData.image.slug })) : (((_c = this.blogData.video) === null || _c === void 0 ? void 0 : _c.sources[this.device]) ? (h("video", { src: this.blogData.video.sources[this.device], controls: true })) : (h("h1", { style: { color: "white" } }, "No Image"))))), this.showTitle &&
-        h("div", { class: "BlogTitle" }, (_d = this.blogData) === null || _d === void 0 ? void 0 : _d.title), this.showContent && this.renderContentConditionally((_e = this.blogData) === null || _e === void 0 ? void 0 : _e.content))));
+      return (h("div", { ref: el => this.stylingContainer = el }, h("div", { class: "DetailsContainer" }, h("div", { class: "DetailsHeadWrapper" }, this.showPublishingDate &&
+        h("div", { class: "BlogDate" }, this.formatDate((_a = this.blogData) === null || _a === void 0 ? void 0 : _a.publishingDate)), this.showImage && (h("div", { class: "BlogBanner" }, ((_b = this.blogData.image) === null || _b === void 0 ? void 0 : _b.src) ? (h("div", { style: { background: `url(${this.setImage(this.blogData.image)}) no-repeat center center / cover` } })) : (((_c = this.blogData.video) === null || _c === void 0 ? void 0 : _c.sources[this.device]) ? (h("video", { src: this.blogData.video.sources[this.device], controls: true })) : (h("h1", { style: { color: "white" } }, "No Image")))))), h("div", { class: "DetailsBodyWrapper" }, this.showTitle &&
+        h("div", { class: "BlogTitle" }, (_d = this.blogData) === null || _d === void 0 ? void 0 : _d.title), this.showContent && this.renderContentConditionally((_e = this.blogData) === null || _e === void 0 ? void 0 : _e.content)))));
     }
   }
   static get watchers() { return {
+    "postId": ["watchEndpoint"],
+    "postSlug": ["watchEndpoint"],
+    "postCustomPath": ["watchEndpoint"],
     "cmsEndpoint": ["watchEndpoint"],
     "language": ["watchEndpoint"]
   }; }

package/dist/esm/blog-article-details.js

@@ -13,5 +13,5 @@ const patchBrowser = () => {
 };
 
 patchBrowser().then(options => {
-  return bootstrapLazy([["blog-article-details",[[1,"blog-article-details",{"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"],"postMessageEvent":[513,"post-message-event"],"postId":[514,"post-id"],"postSlug":[513,"post-slug"],"postCustomPath":[513,"post-custom-path"],"intlDateTimeFormat":[1,"intl-date-time-format"],"hasErrors":[32],"limitStylingAppends":[32],"isLoading":[32],"bannerMatrixReady":[32],"device":[32]},[[8,"BannerMatrixReady","handleBannerReady"]]]]]], options);
+  return bootstrapLazy([["blog-article-details",[[1,"blog-article-details",{"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"],"postId":[514,"post-id"],"postSlug":[513,"post-slug"],"postCustomPath":[513,"post-custom-path"],"intlDateTimeFormat":[1,"intl-date-time-format"],"hasErrors":[32],"limitStylingAppends":[32],"isLoading":[32],"bannerMatrixReady":[32],"device":[32]},[[8,"BannerMatrixReady","handleBannerReady"]]]]]], options);
 });

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-article-details",[[1,"blog-article-details",{"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"],"postMessageEvent":[513,"post-message-event"],"postId":[514,"post-id"],"postSlug":[513,"post-slug"],"postCustomPath":[513,"post-custom-path"],"intlDateTimeFormat":[1,"intl-date-time-format"],"hasErrors":[32],"limitStylingAppends":[32],"isLoading":[32],"bannerMatrixReady":[32],"device":[32]},[[8,"BannerMatrixReady","handleBannerReady"]]]]]], options);
+  return bootstrapLazy([["blog-article-details",[[1,"blog-article-details",{"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"],"postId":[514,"post-id"],"postSlug":[513,"post-slug"],"postCustomPath":[513,"post-custom-path"],"intlDateTimeFormat":[1,"intl-date-time-format"],"hasErrors":[32],"limitStylingAppends":[32],"isLoading":[32],"bannerMatrixReady":[32],"device":[32]},[[8,"BannerMatrixReady","handleBannerReady"]]]]]], options);
   });
 };
 

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

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

package/dist/types/components/blog-article-details/blog-article-details.d.ts

@@ -39,10 +39,6 @@ export declare class BlogArticleDetails {
   * Property used to display the description
   */
   showContent: boolean;
-  /**
-   * Event name to be sent when the button is clicked
-   */
-  postMessageEvent: string;
   /**
    * Showing post ID parameter
    */

package/dist/types/components.d.ts

@@ -39,10 +39,6 @@ export namespace Components {
           * Showing post ID parameter
          */
         "postId": number;
-        /**
-          * Event name to be sent when the button is clicked
-         */
-        "postMessageEvent": string;
         /**
           * Slug of post
          */
@@ -114,10 +110,6 @@ declare namespace LocalJSX {
           * Showing post ID parameter
          */
         "postId"?: number;
-        /**
-          * Event name to be sent when the button is clicked
-         */
-        "postMessageEvent"?: string;
         /**
           * Slug of post
          */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@everymatrix/blog-article-details",
-  "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-article-details/p-9d4b45aa.entry.js

@@ -1 +0,0 @@
-import{r as t,h as i}from"./p-68e0210a.js";const n=["ro","en","fr","ar","hr"],e={en:{error:"Error"},ro:{error:"Eroare"},fr:{error:"Error"},ar:{error:"خطأ"},hr:{error:"Greška"}};const r=class{constructor(n){t(this,n),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.postMessageEvent="articleActionButton",this.intlDateTimeFormat="",this.hasErrors=!1,this.limitStylingAppends=!1,this.isLoading=!0,this.bannerMatrixReady=!1,this.device="",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=>-1!==(null==t?void 0:t.indexOf("<bannermatrix-banner"))?this.bannerMatrixReady?i("div",{class:"BlogContent",innerHTML:t}):null:i("div",{class:"BlogContent",innerHTML: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}}handleBannerReady(){this.bannerMatrixReady=!0}watchEndpoint(t,i){t&&t!=i&&this.cmsEndpoint&&this.getBlogArticleDetails()}connectedCallback(){this.cmsEndpoint&&this.language&&this.getBlogArticleDetails()}getBlogArticleDetails(){if(!this.postId&&!this.postSlug&&!this.postCustomPath)throw this.hasErrors=!0,new Error("postId, postSlug or postCustomPath parameter has to be provided!");this.isLoading=!0;let t=new URL(`${this.cmsEndpoint}/${this.language}/blog-posts${this.postCustomPath?"":this.postSlug||this.postId}`);t.searchParams.append("env",this.cmsEnv),t.searchParams.append("userRoles",this.userRoles),t.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"})()),this.postCustomPath&&t.searchParams.append("customURL",this.postCustomPath),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=>{if(t.count>1&&this.postCustomPath){let i=new Date(t.items[0].publishingDate),n=0;for(let e=1;e<t.items.length;e++){const r=new Date(t.items[e].publishingDate);i.getTime()<r.getTime()&&(i=r,n=e)}this.blogData=t.items[n]}else this.blogData=this.postCustomPath?t.items[0]:t;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)}componentDidLoad(){this.detectAndAlertDeviceType()}detectAndAlertDeviceType(){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}()}formatDate(t){return new Intl.DateTimeFormat(this.intlDateTimeFormat||"en-GB").format(new Date(t))}render(){var t,r,s,o,h;return this.hasErrors?i("div",{class:"BlogArticleDetails"},i("div",{class:"Title"},(()=>{const t=this.language;return e[void 0!==t&&n.includes(t)?t:"en"].error})())):this.isLoading?void 0:i("div",{ref:t=>this.stylingContainer=t},i("div",{class:"GridContainer"},this.showPublishingDate&&i("div",{class:"BlogDate"},this.formatDate(null===(t=this.blogData)||void 0===t?void 0:t.publishingDate)),this.showImage&&i("div",{class:"BlogBanner"},(null===(r=this.blogData.image)||void 0===r?void 0:r.src)?i("img",{src:this.setImage(this.blogData.image),alt:this.blogData.image.slug}):(null===(s=this.blogData.video)||void 0===s?void 0:s.sources[this.device])?i("video",{src:this.blogData.video.sources[this.device],controls:!0}):i("h1",{style:{color:"white"}},"No Image")),this.showTitle&&i("div",{class:"BlogTitle"},null===(o=this.blogData)||void 0===o?void 0:o.title),this.showContent&&this.renderContentConditionally(null===(h=this.blogData)||void 0===h?void 0:h.content)))}static get watchers(){return{cmsEndpoint:["watchEndpoint"],language:["watchEndpoint"]}}};r.style=":host {\n  display: block;\n}\n\n.GridContainer {\n  overflow: auto;\n  margin: auto;\n  width: 100%;\n  padding-bottom: 30px;\n  background-color: #07072A;\n  display: grid;\n  grid-template-rows: auto;\n  grid-template-columns: 30px 60px 1fr 30px;\n  gap: 10px;\n}\n.GridContainer .BlogBanner {\n  grid-column: 1/5;\n  grid-row: 1/3;\n}\n.GridContainer .BlogBanner img {\n  width: 100%;\n  height: auto;\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: #FFF;\n  background-color: #0D0D4D;\n  z-index: 1;\n  text-wrap: nowrap;\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\n@container (max-width: 475px) {\n  .GridContainer {\n    font-size: 12px;\n  }\n}";export{r as blog_article_details}

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

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