@everymatrix/blog-article-details 1.14.0 → 1.15.0

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

@@ -1 +1 @@
-import{p as e,b as t}from"./p-68e0210a.js";(()=>{const t=import.meta.url,s={};return""!==t&&(s.resourcesUrl=new URL(".",t).href),e(s)})().then((e=>t([["p-dff3451f",[[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"],intlDateTimeFormat:[1,"intl-date-time-format"],hasErrors:[32],limitStylingAppends:[32],isLoading:[32],bannerMatrixReady:[32],device:[32]},[[8,"BannerMatrixReady","handleBannerReady"]]]]]],e)));
+import{p as e,b as t}from"./p-68e0210a.js";(()=>{const t=import.meta.url,s={};return""!==t&&(s.resourcesUrl=new URL(".",t).href),e(s)})().then((e=>t([["p-f2e32398",[[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"],intlDateTimeFormat:[1,"intl-date-time-format"],hasErrors:[32],limitStylingAppends:[32],isLoading:[32],bannerMatrixReady:[32],device:[32]},[[8,"BannerMatrixReady","handleBannerReady"]]]]]],e)));

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

@@ -0,0 +1 @@
+import{r as t,h as i}from"./p-68e0210a.js";const n=["ro","en","fr","ar"],e={en:{error:"Error"},ro:{error:"Eroare"},fr:{error:"Error"},ar:{error:"خطأ"}};const o=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)throw this.hasErrors=!0,new Error("postId or postSlug parameter has to be provided!");this.isLoading=!0;let t=new URL(`${this.cmsEndpoint}/${this.language}/blog-posts/${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"})()),fetch(t.href).then((t=>{if(t.status>=300)throw this.hasErrors=!0,new Error("There was an error while fetching the data");return t.json()})).then((t=>{this.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,o,r,s,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===(o=this.blogData.image)||void 0===o?void 0:o.src)?i("img",{src:this.setImage(this.blogData.image),alt:this.blogData.image.slug}):(null===(r=this.blogData.video)||void 0===r?void 0:r.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===(s=this.blogData)||void 0===s?void 0:s.title),this.showContent&&this.renderContentConditionally(null===(h=this.blogData)||void 0===h?void 0:h.content)))}static get watchers(){return{cmsEndpoint:["watchEndpoint"],language:["watchEndpoint"]}}};o.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{o as blog_article_details}

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

@@ -25,23 +25,6 @@ const translate = (key, customLang) => {
   return TRANSLATIONS[lang !== undefined && SUPPORTED_LANGUAGES.includes(lang) ? lang : DEFAULT_LANGUAGE][key];
 };
 
-function checkDeviceType() {
-  const userAgent = navigator.userAgent.toLowerCase();
-  const width = screen.availWidth;
-  const height = screen.availHeight;
-  if (userAgent.includes('iphone')) {
-    return 'mobile';
-  }
-  if (userAgent.includes('android')) {
-    if (height > width && width < 800) {
-      return 'mobile';
-    }
-    if (width > height && height < 800) {
-      return 'tablet';
-    }
-  }
-  return 'desktop';
-}
 const getDevice = () => {
   let userAgent = window.navigator.userAgent;
   if (userAgent.toLowerCase().match(/android/i)) {
@@ -55,6 +38,21 @@ const getDevice = () => {
   }
   return 'PC';
 };
+function checkCustomDeviceWidth() {
+  const width = screen.availWidth;
+  if (width < 600) {
+    return 'mobile';
+  }
+  else if (width >= 600 && width < 1100) {
+    return 'tablet';
+  }
+}
+function getDeviceCustom() {
+  const userAgent = navigator.userAgent.toLowerCase();
+  let source = '';
+  source = (userAgent.includes('android') || userAgent.includes('iphone') || userAgent.includes('ipad')) ? checkCustomDeviceWidth() : 'desktop';
+  return source;
+}
 const getDevicePlatform = () => {
   const device = getDevice();
   if (device) {
@@ -225,7 +223,7 @@ const BlogArticleDetails = class {
     this.detectAndAlertDeviceType();
   }
   detectAndAlertDeviceType() {
-    this.device = checkDeviceType();
+    this.device = getDeviceCustom();
   }
   formatDate(dateString) {
     return new Intl.DateTimeFormat(this.intlDateTimeFormat || 'en-GB').format(new Date(dateString));

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

@@ -1,6 +1,6 @@
 import { Component, Prop, State, Watch, h, Listen } from '@stencil/core';
 import { translate } from '../../utils/locale.utils';
-import { checkDeviceType, getDevicePlatform } from '../../utils/utils';
+import { getDevicePlatform, getDeviceCustom } from '../../utils/utils';
 export class BlogArticleDetails {
   constructor() {
     /**
@@ -153,7 +153,7 @@ export class BlogArticleDetails {
     this.detectAndAlertDeviceType();
   }
   detectAndAlertDeviceType() {
-    this.device = checkDeviceType();
+    this.device = getDeviceCustom();
   }
   formatDate(dateString) {
     return new Intl.DateTimeFormat(this.intlDateTimeFormat || 'en-GB').format(new Date(dateString));

package/dist/collection/utils/utils.js

@@ -28,6 +28,21 @@ export const getDevice = () => {
   }
   return 'PC';
 };
+function checkCustomDeviceWidth() {
+  const width = screen.availWidth;
+  if (width < 600) {
+    return 'mobile';
+  }
+  else if (width >= 600 && width < 1100) {
+    return 'tablet';
+  }
+}
+export function getDeviceCustom() {
+  const userAgent = navigator.userAgent.toLowerCase();
+  let source = '';
+  source = (userAgent.includes('android') || userAgent.includes('iphone') || userAgent.includes('ipad')) ? checkCustomDeviceWidth() : 'desktop';
+  return source;
+}
 export const getDevicePlatform = () => {
   const device = getDevice();
   if (device) {

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

@@ -21,23 +21,6 @@ const translate = (key, customLang) => {
   return TRANSLATIONS[lang !== undefined && SUPPORTED_LANGUAGES.includes(lang) ? lang : DEFAULT_LANGUAGE][key];
 };
 
-function checkDeviceType() {
-  const userAgent = navigator.userAgent.toLowerCase();
-  const width = screen.availWidth;
-  const height = screen.availHeight;
-  if (userAgent.includes('iphone')) {
-    return 'mobile';
-  }
-  if (userAgent.includes('android')) {
-    if (height > width && width < 800) {
-      return 'mobile';
-    }
-    if (width > height && height < 800) {
-      return 'tablet';
-    }
-  }
-  return 'desktop';
-}
 const getDevice = () => {
   let userAgent = window.navigator.userAgent;
   if (userAgent.toLowerCase().match(/android/i)) {
@@ -51,6 +34,21 @@ const getDevice = () => {
   }
   return 'PC';
 };
+function checkCustomDeviceWidth() {
+  const width = screen.availWidth;
+  if (width < 600) {
+    return 'mobile';
+  }
+  else if (width >= 600 && width < 1100) {
+    return 'tablet';
+  }
+}
+function getDeviceCustom() {
+  const userAgent = navigator.userAgent.toLowerCase();
+  let source = '';
+  source = (userAgent.includes('android') || userAgent.includes('iphone') || userAgent.includes('ipad')) ? checkCustomDeviceWidth() : 'desktop';
+  return source;
+}
 const getDevicePlatform = () => {
   const device = getDevice();
   if (device) {
@@ -223,7 +221,7 @@ const BlogArticleDetails$1 = /*@__PURE__*/ proxyCustomElement(class extends HTML
     this.detectAndAlertDeviceType();
   }
   detectAndAlertDeviceType() {
-    this.device = checkDeviceType();
+    this.device = getDeviceCustom();
   }
   formatDate(dateString) {
     return new Intl.DateTimeFormat(this.intlDateTimeFormat || 'en-GB').format(new Date(dateString));

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

@@ -21,23 +21,6 @@ const translate = (key, customLang) => {
   return TRANSLATIONS[lang !== undefined && SUPPORTED_LANGUAGES.includes(lang) ? lang : DEFAULT_LANGUAGE][key];
 };
 
-function checkDeviceType() {
-  const userAgent = navigator.userAgent.toLowerCase();
-  const width = screen.availWidth;
-  const height = screen.availHeight;
-  if (userAgent.includes('iphone')) {
-    return 'mobile';
-  }
-  if (userAgent.includes('android')) {
-    if (height > width && width < 800) {
-      return 'mobile';
-    }
-    if (width > height && height < 800) {
-      return 'tablet';
-    }
-  }
-  return 'desktop';
-}
 const getDevice = () => {
   let userAgent = window.navigator.userAgent;
   if (userAgent.toLowerCase().match(/android/i)) {
@@ -51,6 +34,21 @@ const getDevice = () => {
   }
   return 'PC';
 };
+function checkCustomDeviceWidth() {
+  const width = screen.availWidth;
+  if (width < 600) {
+    return 'mobile';
+  }
+  else if (width >= 600 && width < 1100) {
+    return 'tablet';
+  }
+}
+function getDeviceCustom() {
+  const userAgent = navigator.userAgent.toLowerCase();
+  let source = '';
+  source = (userAgent.includes('android') || userAgent.includes('iphone') || userAgent.includes('ipad')) ? checkCustomDeviceWidth() : 'desktop';
+  return source;
+}
 const getDevicePlatform = () => {
   const device = getDevice();
   if (device) {
@@ -221,7 +219,7 @@ const BlogArticleDetails = class {
     this.detectAndAlertDeviceType();
   }
   detectAndAlertDeviceType() {
-    this.device = checkDeviceType();
+    this.device = getDeviceCustom();
   }
   formatDate(dateString) {
     return new Intl.DateTimeFormat(this.intlDateTimeFormat || 'en-GB').format(new Date(dateString));

package/dist/types/Users/adrian.pripon/Documents/Work/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/utils/utils.d.ts

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@everymatrix/blog-article-details",
-  "version": "1.14.0",
+  "version": "1.15.0",
   "main": "./dist/index.cjs.js",
   "module": "./dist/index.js",
   "es2015": "./dist/esm/index.mjs",

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

@@ -1 +0,0 @@
-import{r as t,h as i}from"./p-68e0210a.js";const n=["ro","en","fr","ar"],e={en:{error:"Error"},ro:{error:"Eroare"},fr:{error:"Error"},ar:{error:"خطأ"}},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)throw this.hasErrors=!0,new Error("postId or postSlug parameter has to be provided!");this.isLoading=!0;let t=new URL(`${this.cmsEndpoint}/${this.language}/blog-posts/${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"})()),fetch(t.href).then((t=>{if(t.status>=300)throw this.hasErrors=!0,new Error("There was an error while fetching the data");return t.json()})).then((t=>{this.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(),i=screen.availWidth,n=screen.availHeight;if(t.includes("iphone"))return"mobile";if(t.includes("android")){if(n>i&&i<800)return"mobile";if(i>n&&n<800)return"tablet"}return"desktop"}()}formatDate(t){return new Intl.DateTimeFormat(this.intlDateTimeFormat||"en-GB").format(new Date(t))}render(){var t,r,o,s,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===(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")),this.showTitle&&i("div",{class:"BlogTitle"},null===(s=this.blogData)||void 0===s?void 0:s.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/stencil/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;