@everymatrix/blog-article-details 1.34.2 → 1.34.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1 +1 @@
1
- import{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-6ad174c5",[[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)));
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-570ab4f1",[[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)));
@@ -0,0 +1 @@
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"},"pt-br":{error:"Erro"},"es-mx":{error:"Error"}};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.language&&(this.postCustomPath||this.postSlug||this.postId)&&this.getBlogArticleDetails()}handleStylingChange(t,i){t!==i&&this.setClientStyling()}handleStylingUrlChange(t,i){t!==i&&this.setClientStylingURL()}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=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,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:"DetailsContainer"},i("div",{class:"DetailsHeadWrapper"},this.showPublishingDate&&this.blogData.publishingDate&&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===(h=this.blogData)||void 0===h?void 0:h.content))))}static get watchers(){return{postId:["watchEndpoint"],postSlug:["watchEndpoint"],postCustomPath:["watchEndpoint"],cmsEndpoint:["watchEndpoint"],language:["watchEndpoint"],clientStyling:["handleStylingChange"],clientStylingUrl:["handleStylingUrlChange"]}}};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}
@@ -180,6 +180,14 @@ const BlogArticleDetails = class {
180
180
  this.getBlogArticleDetails();
181
181
  }
182
182
  }
183
+ handleStylingChange(newValue, oldValue) {
184
+ if (newValue !== oldValue)
185
+ this.setClientStyling();
186
+ }
187
+ handleStylingUrlChange(newValue, oldValue) {
188
+ if (newValue !== oldValue)
189
+ this.setClientStylingURL();
190
+ }
183
191
  connectedCallback() {
184
192
  if (this.cmsEndpoint && this.language && (this.postCustomPath || this.postSlug || this.postId)) {
185
193
  this.getBlogArticleDetails();
@@ -266,7 +274,9 @@ const BlogArticleDetails = class {
266
274
  "postSlug": ["watchEndpoint"],
267
275
  "postCustomPath": ["watchEndpoint"],
268
276
  "cmsEndpoint": ["watchEndpoint"],
269
- "language": ["watchEndpoint"]
277
+ "language": ["watchEndpoint"],
278
+ "clientStyling": ["handleStylingChange"],
279
+ "clientStylingUrl": ["handleStylingUrlChange"]
270
280
  }; }
271
281
  };
272
282
  BlogArticleDetails.style = blogArticleDetailsCss;
@@ -101,6 +101,14 @@ export class BlogArticleDetails {
101
101
  this.getBlogArticleDetails();
102
102
  }
103
103
  }
104
+ handleStylingChange(newValue, oldValue) {
105
+ if (newValue !== oldValue)
106
+ this.setClientStyling();
107
+ }
108
+ handleStylingUrlChange(newValue, oldValue) {
109
+ if (newValue !== oldValue)
110
+ this.setClientStylingURL();
111
+ }
104
112
  connectedCallback() {
105
113
  if (this.cmsEndpoint && this.language && (this.postCustomPath || this.postSlug || this.postId)) {
106
114
  this.getBlogArticleDetails();
@@ -471,6 +479,12 @@ export class BlogArticleDetails {
471
479
  }, {
472
480
  "propName": "language",
473
481
  "methodName": "watchEndpoint"
482
+ }, {
483
+ "propName": "clientStyling",
484
+ "methodName": "handleStylingChange"
485
+ }, {
486
+ "propName": "clientStylingUrl",
487
+ "methodName": "handleStylingUrlChange"
474
488
  }]; }
475
489
  static get listeners() { return [{
476
490
  "name": "BannerMatrixReady",
@@ -178,6 +178,14 @@ const BlogArticleDetails$1 = /*@__PURE__*/ proxyCustomElement(class extends HTML
178
178
  this.getBlogArticleDetails();
179
179
  }
180
180
  }
181
+ handleStylingChange(newValue, oldValue) {
182
+ if (newValue !== oldValue)
183
+ this.setClientStyling();
184
+ }
185
+ handleStylingUrlChange(newValue, oldValue) {
186
+ if (newValue !== oldValue)
187
+ this.setClientStylingURL();
188
+ }
181
189
  connectedCallback() {
182
190
  if (this.cmsEndpoint && this.language && (this.postCustomPath || this.postSlug || this.postId)) {
183
191
  this.getBlogArticleDetails();
@@ -264,7 +272,9 @@ const BlogArticleDetails$1 = /*@__PURE__*/ proxyCustomElement(class extends HTML
264
272
  "postSlug": ["watchEndpoint"],
265
273
  "postCustomPath": ["watchEndpoint"],
266
274
  "cmsEndpoint": ["watchEndpoint"],
267
- "language": ["watchEndpoint"]
275
+ "language": ["watchEndpoint"],
276
+ "clientStyling": ["handleStylingChange"],
277
+ "clientStylingUrl": ["handleStylingUrlChange"]
268
278
  }; }
269
279
  static get style() { return blogArticleDetailsCss; }
270
280
  }, [1, "blog-article-details", {
@@ -176,6 +176,14 @@ const BlogArticleDetails = class {
176
176
  this.getBlogArticleDetails();
177
177
  }
178
178
  }
179
+ handleStylingChange(newValue, oldValue) {
180
+ if (newValue !== oldValue)
181
+ this.setClientStyling();
182
+ }
183
+ handleStylingUrlChange(newValue, oldValue) {
184
+ if (newValue !== oldValue)
185
+ this.setClientStylingURL();
186
+ }
179
187
  connectedCallback() {
180
188
  if (this.cmsEndpoint && this.language && (this.postCustomPath || this.postSlug || this.postId)) {
181
189
  this.getBlogArticleDetails();
@@ -262,7 +270,9 @@ const BlogArticleDetails = class {
262
270
  "postSlug": ["watchEndpoint"],
263
271
  "postCustomPath": ["watchEndpoint"],
264
272
  "cmsEndpoint": ["watchEndpoint"],
265
- "language": ["watchEndpoint"]
273
+ "language": ["watchEndpoint"],
274
+ "clientStyling": ["handleStylingChange"],
275
+ "clientStylingUrl": ["handleStylingUrlChange"]
266
276
  }; }
267
277
  };
268
278
  BlogArticleDetails.style = blogArticleDetailsCss;
@@ -0,0 +1,2 @@
1
+ import { Config } from '../../../../../../../../../../stencil-public-runtime';
2
+ export declare const config: Config;
@@ -62,6 +62,8 @@ export declare class BlogArticleDetails {
62
62
  device: string;
63
63
  handleBannerReady(): void;
64
64
  watchEndpoint(newValue: string, oldValue: string): void;
65
+ handleStylingChange(newValue: string, oldValue: string): void;
66
+ handleStylingUrlChange(newValue: string, oldValue: string): void;
65
67
  private stylingContainer;
66
68
  private blogData;
67
69
  connectedCallback(): void;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@everymatrix/blog-article-details",
3
- "version": "1.34.2",
3
+ "version": "1.34.4",
4
4
  "main": "./dist/index.cjs.js",
5
5
  "module": "./dist/index.js",
6
6
  "es2015": "./dist/esm/index.mjs",
@@ -1 +0,0 @@
1
- import{r as t,h as i}from"./p-68e0210a.js";const e=["ro","en","fr","ar","hr"],n={en:{error:"Error"},ro:{error:"Eroare"},fr:{error:"Error"},ar:{error:"خطأ"},hr:{error:"Greška"},"pt-br":{error:"Erro"},"es-mx":{error:"Error"}};const s=class{constructor(e){t(this,e),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.language&&(this.postCustomPath||this.postSlug||this.postId)&&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),e=0;for(let n=1;n<t.items.length;n++){const s=new Date(t.items[n].publishingDate);i.getTime()<s.getTime()&&(i=s,e=n)}this.blogData=t.items[e]}else this.blogData=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 n[void 0!==t&&e.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&&this.blogData.publishingDate&&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}
@@ -1,2 +0,0 @@
1
- import { Config } from '../../../../../../../../../../../stencil-public-runtime';
2
- export declare const config: Config;