@everymatrix/blog-article-details 1.13.6 → 1.13.17

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

@@ -1 +1 @@
-import{p as e,b as n}from"./p-b3ab7cf8.js";(()=>{const n=import.meta.url,t={};return""!==n&&(t.resourcesUrl=new URL(".",n).href),e(t)})().then((e=>n([["p-493d4f13",[[1,"blog-article-details",{cmsEndpoint:[1,"cms-endpoint"],language:[1],handleClick:[1,"handle-click"],clientStyling:[1,"client-styling"],clientStylingUrl:[1,"client-styling-url"],showPublishingDate:[4,"show-publishing-date"],showImage:[4,"show-image"],showTitle:[4,"show-title"],showContent:[4,"show-content"],postMessageEvent:[1,"post-message-event"],postId:[2,"post-id"],hasErrors:[32],limitStylingAppends:[32],isLoading:[32],bannerMatrixReady:[32]},[[8,"WebComponentsReady","handleBannerReady"]]]]]],e)));
+import{p as e,b as n}from"./p-68e0210a.js";(()=>{const n=import.meta.url,s={};return""!==n&&(s.resourcesUrl=new URL(".",n).href),e(s)})().then((e=>n([["p-d34c740d",[[1,"blog-article-details",{cmsEndpoint:[513,"cms-endpoint"],language:[513],userRoles:[513,"user-roles"],cmsEnv:[513,"cms-env"],handleClick:[513,"handle-click"],clientStyling:[513,"client-styling"],clientStylingUrl:[513,"client-styling-url"],showPublishingDate:[516,"show-publishing-date"],showImage:[516,"show-image"],showTitle:[516,"show-title"],showContent:[516,"show-content"],postMessageEvent:[513,"post-message-event"],postId:[514,"post-id"],hasErrors:[32],limitStylingAppends:[32],isLoading:[32],bannerMatrixReady:[32],device:[32]},[[8,"BannerMatrixReady","handleBannerReady"]]]]]],e)));

package/dist/blog-article-details/p-68e0210a.js

@@ -0,0 +1 @@
+let e,t,n=!1;const l="undefined"!=typeof window?window:{},s=l.document||{head:{}},o={t:0,l:"",jmp:e=>e(),raf:e=>requestAnimationFrame(e),ael:(e,t,n,l)=>e.addEventListener(t,n,l),rel:(e,t,n,l)=>e.removeEventListener(t,n,l),ce:(e,t)=>new CustomEvent(e,t)},c=e=>Promise.resolve(e),i=(()=>{try{return new CSSStyleSheet,"function"==typeof(new CSSStyleSheet).replace}catch(e){}return!1})(),r=(e,t,n)=>{n&&n.map((([n,l,s])=>{const c=a(e,n),i=u(t,s),r=f(n);o.ael(c,l,i,r),(t.o=t.o||[]).push((()=>o.rel(c,l,i,r)))}))},u=(e,t)=>n=>{try{256&e.t?e.i[t](n):(e.u=e.u||[]).push([t,n])}catch(e){I(e)}},a=(e,t)=>8&t?l:e,f=e=>0!=(2&e),d=new WeakMap,h=e=>"sc-"+e.h,y={},$=e=>"object"==(e=typeof e)||"function"===e,p=(e,t,...n)=>{let l=null,s=!1,o=!1,c=[];const i=t=>{for(let n=0;n<t.length;n++)l=t[n],Array.isArray(l)?i(l):null!=l&&"boolean"!=typeof l&&((s="function"!=typeof e&&!$(l))&&(l+=""),s&&o?c[c.length-1].$+=l:c.push(s?m(null,l):l),o=s)};if(i(n),t){const e=t.className||t.class;e&&(t.class="object"!=typeof e?e:Object.keys(e).filter((t=>e[t])).join(" "))}const r=m(e,null);return r.p=t,c.length>0&&(r.m=c),r},m=(e,t)=>({t:0,S:e,$:t,g:null,m:null,p:null}),b={},w=(e,t,n,l,s,o)=>{if(n!==l){let c=G(e,t);if(t.toLowerCase(),"class"===t){const t=e.classList,s=g(n),o=g(l);t.remove(...s.filter((e=>e&&!o.includes(e)))),t.add(...o.filter((e=>e&&!s.includes(e))))}else if("style"===t){for(const t in n)l&&null!=l[t]||(t.includes("-")?e.style.removeProperty(t):e.style[t]="");for(const t in l)n&&l[t]===n[t]||(t.includes("-")?e.style.setProperty(t,l[t]):e.style[t]=l[t])}else if("ref"===t)l&&l(e);else{const i=$(l);if((c||i&&null!==l)&&!s)try{if(e.tagName.includes("-"))e[t]=l;else{let s=null==l?"":l;"list"===t?c=!1:null!=n&&e[t]==s||(e[t]=s)}}catch(e){}null==l||!1===l?!1===l&&""!==e.getAttribute(t)||e.removeAttribute(t):(!c||4&o||s)&&!i&&e.setAttribute(t,l=!0===l?"":l)}}},S=/\s/,g=e=>e?e.split(S):[],j=(e,t,n,l)=>{const s=11===t.g.nodeType&&t.g.host?t.g.host:t.g,o=e&&e.p||y,c=t.p||y;for(l in o)l in c||w(s,l,o[l],void 0,n,t.t);for(l in c)w(s,l,o[l],c[l],n,t.t)},v=(t,n,l)=>{let o,c,i=n.m[l],r=0;if(null!==i.$)o=i.g=s.createTextNode(i.$);else if(o=i.g=s.createElement(i.S),j(null,i,!1),null!=e&&o["s-si"]!==e&&o.classList.add(o["s-si"]=e),i.m)for(r=0;r<i.m.length;++r)c=v(t,i,r),c&&o.appendChild(c);return o},M=(e,n,l,s,o,c)=>{let i,r=e;for(r.shadowRoot&&r.tagName===t&&(r=r.shadowRoot);o<=c;++o)s[o]&&(i=v(null,l,o),i&&(s[o].g=i,r.insertBefore(i,n)))},k=(e,t,n,l,s)=>{for(;t<=n;++t)(l=e[t])&&(s=l.g,P(l),s.remove())},C=(e,t)=>e.S===t.S,O=(e,t)=>{const n=t.g=e.g,l=e.m,s=t.m,o=t.$;null===o?(j(e,t,!1),null!==l&&null!==s?((e,t,n,l)=>{let s,o=0,c=0,i=t.length-1,r=t[0],u=t[i],a=l.length-1,f=l[0],d=l[a];for(;o<=i&&c<=a;)null==r?r=t[++o]:null==u?u=t[--i]:null==f?f=l[++c]:null==d?d=l[--a]:C(r,f)?(O(r,f),r=t[++o],f=l[++c]):C(u,d)?(O(u,d),u=t[--i],d=l[--a]):C(r,d)?(O(r,d),e.insertBefore(r.g,u.g.nextSibling),r=t[++o],d=l[--a]):C(u,f)?(O(u,f),e.insertBefore(u.g,r.g),u=t[--i],f=l[++c]):(s=v(t&&t[c],n,c),f=l[++c],s&&r.g.parentNode.insertBefore(s,r.g));o>i?M(e,null==l[a+1]?null:l[a+1].g,n,l,c,a):c>a&&k(t,o,i)})(n,l,t,s):null!==s?(null!==e.$&&(n.textContent=""),M(n,null,t,s,0,s.length-1)):null!==l&&k(l,0,l.length-1)):e.$!==o&&(n.data=o)},P=e=>{e.p&&e.p.ref&&e.p.ref(null),e.m&&e.m.map(P)},x=(e,t)=>{t&&!e.j&&t["s-p"]&&t["s-p"].push(new Promise((t=>e.j=t)))},E=(e,t)=>{if(e.t|=16,!(4&e.t))return x(e,e.v),le((()=>L(e,t)));e.t|=512},L=(e,t)=>{const n=e.i;return t&&(e.t|=256,e.u&&(e.u.map((([e,t])=>D(n,e,t))),e.u=null)),F(void 0,(()=>N(e,n,t)))},N=async(e,t,n)=>{const l=e.M,o=l["s-rc"];n&&(e=>{const t=e.k,n=e.M,l=t.t,o=((e,t)=>{let n=h(t),l=Q.get(n);if(e=11===e.nodeType?e:s,l)if("string"==typeof l){let t,o=d.get(e=e.head||e);o||d.set(e,o=new Set),o.has(n)||(t=s.createElement("style"),t.innerHTML=l,e.insertBefore(t,e.querySelector("link")),o&&o.add(n))}else e.adoptedStyleSheets.includes(l)||(e.adoptedStyleSheets=[...e.adoptedStyleSheets,l]);return n})(n.shadowRoot?n.shadowRoot:n.getRootNode(),t);10&l&&(n["s-sc"]=o,n.classList.add(o+"-h"))})(e);R(e,t),o&&(o.map((e=>e())),l["s-rc"]=void 0);{const t=l["s-p"],n=()=>T(e);0===t.length?n():(Promise.all(t).then(n),e.t|=4,t.length=0)}},R=(n,l)=>{try{l=l.render(),n.t&=-17,n.t|=2,((n,l)=>{const s=n.M,o=n.k,c=n.C||m(null,null),i=(e=>e&&e.S===b)(l)?l:p(null,null,l);t=s.tagName,o.O&&(i.p=i.p||{},o.O.map((([e,t])=>i.p[t]=s[e]))),i.S=null,i.t|=4,n.C=i,i.g=c.g=s.shadowRoot||s,e=s["s-sc"],O(c,i)})(n,l)}catch(e){I(e,n.M)}return null},T=e=>{const t=e.M,n=e.i,l=e.v;D(n,"componentDidRender"),64&e.t||(e.t|=64,U(t),D(n,"componentDidLoad"),e.P(t),l||A()),e.j&&(e.j(),e.j=void 0),512&e.t&&ne((()=>E(e,!1))),e.t&=-517},A=()=>{U(s.documentElement),ne((()=>(e=>{const t=o.ce("appload",{detail:{namespace:"blog-article-details"}});return e.dispatchEvent(t),t})(l)))},D=(e,t,n)=>{if(e&&e[t])try{return e[t](n)}catch(e){I(e)}},F=(e,t)=>e&&e.then?e.then(t):t(),U=e=>e.classList.add("hydrated"),W=(e,t,n)=>{if(t.L){e.watchers&&(t.N=e.watchers);const l=Object.entries(t.L),s=e.prototype;if(l.map((([e,[l]])=>{(31&l||2&n&&32&l)&&Object.defineProperty(s,e,{get(){return((e,t)=>_(this).R.get(t))(0,e)},set(n){((e,t,n,l)=>{const s=_(e),o=s.M,c=s.R.get(t),i=s.t,r=s.i;if(n=((e,t)=>null==e||$(e)?e:4&t?"false"!==e&&(""===e||!!e):2&t?parseFloat(e):1&t?e+"":e)(n,l.L[t][0]),(!(8&i)||void 0===c)&&n!==c&&(!Number.isNaN(c)||!Number.isNaN(n))&&(s.R.set(t,n),r)){if(l.N&&128&i){const e=l.N[t];e&&e.map((e=>{try{r[e](n,c,t)}catch(e){I(e,o)}}))}2==(18&i)&&E(s,!1)}})(this,e,n,t)},configurable:!0,enumerable:!0})})),1&n){const n=new Map;s.attributeChangedCallback=function(e,t,l){o.jmp((()=>{const t=n.get(e);if(this.hasOwnProperty(t))l=this[t],delete this[t];else if(s.hasOwnProperty(t)&&"number"==typeof this[t]&&this[t]==l)return;this[t]=(null!==l||"boolean"!=typeof this[t])&&l}))},e.observedAttributes=l.filter((([e,t])=>15&t[0])).map((([e,l])=>{const s=l[1]||e;return n.set(s,e),512&l[0]&&t.O.push([e,s]),s}))}}return e},q=e=>{D(e,"connectedCallback")},H=(e,t={})=>{const n=[],c=t.exclude||[],u=l.customElements,a=s.head,f=a.querySelector("meta[charset]"),d=s.createElement("style"),y=[];let $,p=!0;Object.assign(o,t),o.l=new URL(t.resourcesUrl||"./",s.baseURI).href,e.map((e=>{e[1].map((t=>{const l={t:t[0],h:t[1],L:t[2],T:t[3]};l.L=t[2],l.T=t[3],l.O=[],l.N={};const s=l.h,a=class extends HTMLElement{constructor(e){super(e),B(e=this,l),1&l.t&&e.attachShadow({mode:"open"})}connectedCallback(){$&&(clearTimeout($),$=null),p?y.push(this):o.jmp((()=>(e=>{if(0==(1&o.t)){const t=_(e),n=t.k,l=()=>{};if(1&t.t)r(e,t,n.T),q(t.i);else{t.t|=1;{let n=e;for(;n=n.parentNode||n.host;)if(n["s-p"]){x(t,t.v=n);break}}n.L&&Object.entries(n.L).map((([t,[n]])=>{if(31&n&&e.hasOwnProperty(t)){const n=e[t];delete e[t],e[t]=n}})),(async(e,t,n,l,s)=>{if(0==(32&t.t)){{if(t.t|=32,(s=K(n)).then){const e=()=>{};s=await s,e()}s.isProxied||(n.N=s.watchers,W(s,n,2),s.isProxied=!0);const e=()=>{};t.t|=8;try{new s(t)}catch(e){I(e)}t.t&=-9,t.t|=128,e(),q(t.i)}if(s.style){let e=s.style;const t=h(n);if(!Q.has(t)){const l=()=>{};((e,t,n)=>{let l=Q.get(e);i&&n?(l=l||new CSSStyleSheet,l.replace(t)):l=t,Q.set(e,l)})(t,e,!!(1&n.t)),l()}}}const o=t.v,c=()=>E(t,!0);o&&o["s-rc"]?o["s-rc"].push(c):c()})(0,t,n)}l()}})(this)))}disconnectedCallback(){o.jmp((()=>(()=>{if(0==(1&o.t)){const e=_(this);e.o&&(e.o.map((e=>e())),e.o=void 0)}})()))}componentOnReady(){return _(this).A}};l.D=e[0],c.includes(s)||u.get(s)||(n.push(s),u.define(s,W(a,l,1)))}))})),d.innerHTML=n+"{visibility:hidden}.hydrated{visibility:inherit}",d.setAttribute("data-styles",""),a.insertBefore(d,f?f.nextSibling:a.firstChild),p=!1,y.length?y.map((e=>e.connectedCallback())):o.jmp((()=>$=setTimeout(A,30)))},V=new WeakMap,_=e=>V.get(e),z=(e,t)=>V.set(t.i=e,t),B=(e,t)=>{const n={t:0,M:e,k:t,R:new Map};return n.A=new Promise((e=>n.P=e)),e["s-p"]=[],e["s-rc"]=[],r(e,n,t.T),V.set(e,n)},G=(e,t)=>t in e,I=(e,t)=>(0,console.error)(e,t),J=new Map,K=e=>{const t=e.h.replace(/-/g,"_"),n=e.D,l=J.get(n);return l?l[t]:import(`./${n}.entry.js`).then((e=>(J.set(n,e),e[t])),I)},Q=new Map,X=[],Y=[],Z=(e,t)=>l=>{e.push(l),n||(n=!0,t&&4&o.t?ne(te):o.raf(te))},ee=e=>{for(let t=0;t<e.length;t++)try{e[t](performance.now())}catch(e){I(e)}e.length=0},te=()=>{ee(X),ee(Y),(n=X.length>0)&&o.raf(te)},ne=e=>c().then(e),le=Z(Y,!0);export{H as b,p as h,c as p,z as r}

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

@@ -0,0 +1 @@
+import{r as t,h as i}from"./p-68e0210a.js";const n=["ro","en","fr","ar"],r={en:{error:"Error"},ro:{error:"Eroare"},fr:{error:"Error"},ar:{error:"خطأ"}},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.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})}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&&isNaN(this.postId))throw this.hasErrors=!0,new Error("The postId parameter is missing!");this.isLoading=!0;let t=new URL(`${this.cmsEndpoint}/${this.language}/blog-posts/${this.postId}`);t.searchParams.append("env",this.cmsEnv),t.searchParams.append("userRoles",this.userRoles),t.searchParams.append("platform",(()=>{const t=(()=>{let t=window.navigator.userAgent;return t.toLowerCase().match(/android/i)?"Android":t.toLowerCase().match(/iphone/i)?"iPhone":t.toLowerCase().match(/ipad|ipod/i)?"iPad":"PC"})();if(t)return"PC"===t?"dk":"mtWeb"})()),fetch(t.href).then((t=>{if(t.status>=300)throw this.hasErrors=!0,new Error("There was an error while fetching the data");return t.json()})).then((t=>{this.blogData=t,this.blogData.publishingDate=new Date(this.blogData.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)}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"}()}render(){var t,o,e,s,h;return this.hasErrors?i("div",{class:"BlogArticleDetails"},i("div",{class:"Title"},(()=>{const t=this.language;return r[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"},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.blogData.image.src,alt:this.blogData.image.src}):(null===(e=this.blogData.video)||void 0===e?void 0:e.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}\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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-045ab4cd.js');
+const index = require('./index-d983d0f8.js');
 
 const DEFAULT_LANGUAGE = 'en';
 const SUPPORTED_LANGUAGES = ['ro', 'en', 'fr', 'ar'];
@@ -25,6 +25,51 @@ 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)) {
+    return 'Android';
+  }
+  if (userAgent.toLowerCase().match(/iphone/i)) {
+    return 'iPhone';
+  }
+  if (userAgent.toLowerCase().match(/ipad|ipod/i)) {
+    return 'iPad';
+  }
+  return 'PC';
+};
+const getDevicePlatform = () => {
+  const device = getDevice();
+  if (device) {
+    if (device === 'PC') {
+      return 'dk';
+    }
+    else if (device === 'iPad' || device === 'iPhone') {
+      return 'mtWeb';
+    }
+    else {
+      return 'mtWeb';
+    }
+  }
+};
+
 const 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}\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 BlogArticleDetails = class {
@@ -34,6 +79,14 @@ const BlogArticleDetails = class {
      * Language of the widget
      */
     this.language = 'en';
+    /**
+     * User roles
+     */
+    this.userRoles = 'everyone';
+    /**
+     * CMS Endpoint stage
+     */
+    this.cmsEnv = 'stage';
     /**
     * Client custom styling via string
     */
@@ -47,8 +100,8 @@ const BlogArticleDetails = class {
      */
     this.showPublishingDate = true;
     /**
-   * Property used to display the image
-   */
+     * Property used to display the image
+     */
     this.showImage = true;
     /**
     * Property used to display the image
@@ -66,6 +119,7 @@ const BlogArticleDetails = class {
     this.limitStylingAppends = false;
     this.isLoading = true;
     this.bannerMatrixReady = false;
+    this.device = '';
     this.setClientStyling = () => {
       let sheet = document.createElement('style');
       sheet.innerHTML = this.clientStyling;
@@ -85,13 +139,12 @@ const BlogArticleDetails = class {
       });
     };
     this.renderContentConditionally = (content) => {
-      var _a, _b;
       const hasBanner = (content === null || content === void 0 ? void 0 : content.indexOf('<bannermatrix-banner')) !== -1;
       if (!hasBanner) {
-        return index.h("div", { class: "BlogContent", innerHTML: (_a = this.blogData) === null || _a === void 0 ? void 0 : _a.content });
+        return index.h("div", { class: "BlogContent", innerHTML: content });
       }
       if (this.bannerMatrixReady) {
-        return index.h("div", { class: "BlogContent", innerHTML: (_b = this.blogData) === null || _b === void 0 ? void 0 : _b.content });
+        return index.h("div", { class: "BlogContent", innerHTML: content });
       }
       return null;
     };
@@ -117,6 +170,9 @@ const BlogArticleDetails = class {
     }
     this.isLoading = true;
     let url = new URL(`${this.cmsEndpoint}/${this.language}/blog-posts/${this.postId}`);
+    url.searchParams.append('env', this.cmsEnv);
+    url.searchParams.append('userRoles', this.userRoles);
+    url.searchParams.append('platform', getDevicePlatform());
     fetch(url.href)
       .then((res) => {
       if (res.status >= 300) {
@@ -147,16 +203,21 @@ const BlogArticleDetails = class {
     }
     // end custom styling area
   }
+  componentDidLoad() {
+    this.detectAndAlertDeviceType();
+  }
+  detectAndAlertDeviceType() {
+    this.device = checkDeviceType();
+  }
   render() {
-    var _a, _b, _c, _d;
+    var _a, _b, _c, _d, _e;
     if (this.hasErrors) {
       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" }, (_a = this.blogData) === null || _a === void 0 ? void 0 : _a.publishingDate), this.showImage &&
-        index.h("div", { class: "BlogBanner" }, index.h("img", { src: this.blogData.image.src, alt: (_b = this.blogData) === null || _b === void 0 ? void 0 : _b.title })), this.showTitle &&
-        index.h("div", { class: "BlogTitle" }, (_c = this.blogData) === null || _c === void 0 ? void 0 : _c.title), this.showContent && this.renderContentConditionally((_d = this.blogData) === null || _d === void 0 ? void 0 : _d.content))));
+        index.h("div", { class: "BlogDate" }, (_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.blogData.image.src, alt: this.blogData.image.src })) : (((_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))));
     }
   }
   static get watchers() { return {

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

@@ -1,6 +1,6 @@
 'use strict';
 
-const index = require('./index-045ab4cd.js');
+const index = require('./index-d983d0f8.js');
 
 /*
  Stencil Client Patch Browser v2.15.2 | MIT Licensed | https://stenciljs.com
@@ -15,5 +15,5 @@ const patchBrowser = () => {
 };
 
 patchBrowser().then(options => {
-  return index.bootstrapLazy([["blog-article-details.cjs",[[1,"blog-article-details",{"cmsEndpoint":[1,"cms-endpoint"],"language":[1],"handleClick":[1,"handle-click"],"clientStyling":[1,"client-styling"],"clientStylingUrl":[1,"client-styling-url"],"showPublishingDate":[4,"show-publishing-date"],"showImage":[4,"show-image"],"showTitle":[4,"show-title"],"showContent":[4,"show-content"],"postMessageEvent":[1,"post-message-event"],"postId":[2,"post-id"],"hasErrors":[32],"limitStylingAppends":[32],"isLoading":[32],"bannerMatrixReady":[32]},[[8,"WebComponentsReady","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"],"handleClick":[513,"handle-click"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"showPublishingDate":[516,"show-publishing-date"],"showImage":[516,"show-image"],"showTitle":[516,"show-title"],"showContent":[516,"show-content"],"postMessageEvent":[513,"post-message-event"],"postId":[514,"post-id"],"hasErrors":[32],"limitStylingAppends":[32],"isLoading":[32],"bannerMatrixReady":[32],"device":[32]},[[8,"BannerMatrixReady","handleBannerReady"]]]]]], options);
 });

package/dist/cjs/{index-045ab4cd.js → index-d983d0f8.js}

@@ -268,6 +268,31 @@ const setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags) => {
             classList.remove(...oldClasses.filter((c) => c && !newClasses.includes(c)));
             classList.add(...newClasses.filter((c) => c && !oldClasses.includes(c)));
         }
+        else if (memberName === 'style') {
+            // update style attribute, css properties and values
+            {
+                for (const prop in oldValue) {
+                    if (!newValue || newValue[prop] == null) {
+                        if (prop.includes('-')) {
+                            elm.style.removeProperty(prop);
+                        }
+                        else {
+                            elm.style[prop] = '';
+                        }
+                    }
+                }
+            }
+            for (const prop in newValue) {
+                if (!oldValue || newValue[prop] !== oldValue[prop]) {
+                    if (prop.includes('-')) {
+                        elm.style.setProperty(prop, newValue[prop]);
+                    }
+                    else {
+                        elm.style[prop] = newValue[prop];
+                    }
+                }
+            }
+        }
         else if (memberName === 'ref') {
             // minifier will clean this up
             if (newValue) {
@@ -518,9 +543,14 @@ const callNodeRefs = (vNode) => {
 };
 const renderVdom = (hostRef, renderFnResults) => {
     const hostElm = hostRef.$hostElement$;
+    const cmpMeta = hostRef.$cmpMeta$;
     const oldVNode = hostRef.$vnode$ || newVNode(null, null);
     const rootVnode = isHost(renderFnResults) ? renderFnResults : h(null, null, renderFnResults);
     hostTagName = hostElm.tagName;
+    if (cmpMeta.$attrsToReflect$) {
+        rootVnode.$attrs$ = rootVnode.$attrs$ || {};
+        cmpMeta.$attrsToReflect$.map(([propName, attribute]) => (rootVnode.$attrs$[attribute] = hostElm[propName]));
+    }
     rootVnode.$tag$ = null;
     rootVnode.$flags$ |= 4 /* isHost */;
     hostRef.$vnode$ = rootVnode;
@@ -654,6 +684,9 @@ const postUpdateComponent = (hostRef) => {
             // DOM WRITE!
             addHydratedFlag(elm);
         }
+        {
+            safeCall(instance, 'componentDidLoad');
+        }
         endPostUpdate();
         {
             hostRef.$onReadyResolve$(elm);
@@ -881,6 +914,9 @@ const proxyComponent = (Cstr, cmpMeta, flags) => {
                 .map(([propName, m]) => {
                 const attrName = m[1] || propName;
                 attrNameToPropName.set(attrName, propName);
+                if (m[0] & 512 /* ReflectAttr */) {
+                    cmpMeta.$attrsToReflect$.push([propName, attrName]);
+                }
                 return attrName;
             });
         }
@@ -1058,6 +1094,9 @@ const bootstrapLazy = (lazyBundles, options = {}) => {
             {
                 cmpMeta.$listeners$ = compactMeta[3];
             }
+            {
+                cmpMeta.$attrsToReflect$ = [];
+            }
             {
                 cmpMeta.$watchers$ = {};
             }

package/dist/cjs/loader.cjs.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-045ab4cd.js');
+const index = require('./index-d983d0f8.js');
 
 /*
  Stencil Client Patch Esm v2.15.2 | MIT Licensed | https://stenciljs.com
@@ -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":[1,"cms-endpoint"],"language":[1],"handleClick":[1,"handle-click"],"clientStyling":[1,"client-styling"],"clientStylingUrl":[1,"client-styling-url"],"showPublishingDate":[4,"show-publishing-date"],"showImage":[4,"show-image"],"showTitle":[4,"show-title"],"showContent":[4,"show-content"],"postMessageEvent":[1,"post-message-event"],"postId":[2,"post-id"],"hasErrors":[32],"limitStylingAppends":[32],"isLoading":[32],"bannerMatrixReady":[32]},[[8,"WebComponentsReady","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"],"handleClick":[513,"handle-click"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"showPublishingDate":[516,"show-publishing-date"],"showImage":[516,"show-image"],"showTitle":[516,"show-title"],"showContent":[516,"show-content"],"postMessageEvent":[513,"post-message-event"],"postId":[514,"post-id"],"hasErrors":[32],"limitStylingAppends":[32],"isLoading":[32],"bannerMatrixReady":[32],"device":[32]},[[8,"BannerMatrixReady","handleBannerReady"]]]]]], options);
   });
 };
 

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

@@ -1,11 +1,20 @@
 import { Component, Prop, State, Watch, h, Listen } from '@stencil/core';
 import { translate } from '../../utils/locale.utils';
+import { checkDeviceType, getDevicePlatform } from '../../utils/utils';
 export class BlogArticleDetails {
   constructor() {
     /**
      * Language of the widget
      */
     this.language = 'en';
+    /**
+     * User roles
+     */
+    this.userRoles = 'everyone';
+    /**
+     * CMS Endpoint stage
+     */
+    this.cmsEnv = 'stage';
     /**
     * Client custom styling via string
     */
@@ -19,8 +28,8 @@ export class BlogArticleDetails {
      */
     this.showPublishingDate = true;
     /**
-   * Property used to display the image
-   */
+     * Property used to display the image
+     */
     this.showImage = true;
     /**
     * Property used to display the image
@@ -38,6 +47,7 @@ export class BlogArticleDetails {
     this.limitStylingAppends = false;
     this.isLoading = true;
     this.bannerMatrixReady = false;
+    this.device = '';
     this.setClientStyling = () => {
       let sheet = document.createElement('style');
       sheet.innerHTML = this.clientStyling;
@@ -57,13 +67,12 @@ export class BlogArticleDetails {
       });
     };
     this.renderContentConditionally = (content) => {
-      var _a, _b;
       const hasBanner = (content === null || content === void 0 ? void 0 : content.indexOf('<bannermatrix-banner')) !== -1;
       if (!hasBanner) {
-        return h("div", { class: "BlogContent", innerHTML: (_a = this.blogData) === null || _a === void 0 ? void 0 : _a.content });
+        return h("div", { class: "BlogContent", innerHTML: content });
       }
       if (this.bannerMatrixReady) {
-        return h("div", { class: "BlogContent", innerHTML: (_b = this.blogData) === null || _b === void 0 ? void 0 : _b.content });
+        return h("div", { class: "BlogContent", innerHTML: content });
       }
       return null;
     };
@@ -89,6 +98,9 @@ export class BlogArticleDetails {
     }
     this.isLoading = true;
     let url = new URL(`${this.cmsEndpoint}/${this.language}/blog-posts/${this.postId}`);
+    url.searchParams.append('env', this.cmsEnv);
+    url.searchParams.append('userRoles', this.userRoles);
+    url.searchParams.append('platform', getDevicePlatform());
     fetch(url.href)
       .then((res) => {
       if (res.status >= 300) {
@@ -119,8 +131,14 @@ export class BlogArticleDetails {
     }
     // end custom styling area
   }
+  componentDidLoad() {
+    this.detectAndAlertDeviceType();
+  }
+  detectAndAlertDeviceType() {
+    this.device = checkDeviceType();
+  }
   render() {
-    var _a, _b, _c, _d;
+    var _a, _b, _c, _d, _e;
     if (this.hasErrors) {
       return (h("div", { class: "BlogArticleDetails" },
         h("div", { class: "Title" }, translate('error', this.language))));
@@ -130,12 +148,10 @@ export class BlogArticleDetails {
         h("div", { class: "GridContainer" },
           this.showPublishingDate &&
             h("div", { class: "BlogDate" }, (_a = this.blogData) === null || _a === void 0 ? void 0 : _a.publishingDate),
-          this.showImage &&
-            h("div", { class: "BlogBanner" },
-              h("img", { src: this.blogData.image.src, alt: (_b = this.blogData) === null || _b === void 0 ? void 0 : _b.title })),
+          this.showImage && (h("div", { class: "BlogBanner" }, ((_b = this.blogData.image) === null || _b === void 0 ? void 0 : _b.src) ? (h("img", { src: this.blogData.image.src, alt: this.blogData.image.src })) : (((_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" }, (_c = this.blogData) === null || _c === void 0 ? void 0 : _c.title),
-          this.showContent && this.renderContentConditionally((_d = this.blogData) === null || _d === void 0 ? void 0 : _d.content))));
+            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"; }
@@ -162,7 +178,7 @@ export class BlogArticleDetails {
         "text": "Endpoint URL for the source of data"
       },
       "attribute": "cms-endpoint",
-      "reflect": false
+      "reflect": true
     },
     "language": {
       "type": "string",
@@ -179,9 +195,45 @@ export class BlogArticleDetails {
         "text": "Language of the widget"
       },
       "attribute": "language",
-      "reflect": false,
+      "reflect": true,
       "defaultValue": "'en'"
     },
+    "userRoles": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "User roles"
+      },
+      "attribute": "user-roles",
+      "reflect": true,
+      "defaultValue": "'everyone'"
+    },
+    "cmsEnv": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "CMS Endpoint stage"
+      },
+      "attribute": "cms-env",
+      "reflect": true,
+      "defaultValue": "'stage'"
+    },
     "handleClick": {
       "type": "string",
       "mutable": false,
@@ -197,7 +249,7 @@ export class BlogArticleDetails {
         "text": "Handle when you click on show more button"
       },
       "attribute": "handle-click",
-      "reflect": false
+      "reflect": true
     },
     "clientStyling": {
       "type": "string",
@@ -214,7 +266,7 @@ export class BlogArticleDetails {
         "text": "Client custom styling via string"
       },
       "attribute": "client-styling",
-      "reflect": false,
+      "reflect": true,
       "defaultValue": "''"
     },
     "clientStylingUrl": {
@@ -232,7 +284,7 @@ export class BlogArticleDetails {
         "text": "Client custom styling via url"
       },
       "attribute": "client-styling-url",
-      "reflect": false,
+      "reflect": true,
       "defaultValue": "''"
     },
     "showPublishingDate": {
@@ -250,7 +302,7 @@ export class BlogArticleDetails {
         "text": "Property used to display the publishing date"
       },
       "attribute": "show-publishing-date",
-      "reflect": false,
+      "reflect": true,
       "defaultValue": "true"
     },
     "showImage": {
@@ -268,7 +320,7 @@ export class BlogArticleDetails {
         "text": "Property used to display the image"
       },
       "attribute": "show-image",
-      "reflect": false,
+      "reflect": true,
       "defaultValue": "true"
     },
     "showTitle": {
@@ -286,7 +338,7 @@ export class BlogArticleDetails {
         "text": "Property used to display the image"
       },
       "attribute": "show-title",
-      "reflect": false,
+      "reflect": true,
       "defaultValue": "true"
     },
     "showContent": {
@@ -304,7 +356,7 @@ export class BlogArticleDetails {
         "text": "Property used to display the description"
       },
       "attribute": "show-content",
-      "reflect": false,
+      "reflect": true,
       "defaultValue": "true"
     },
     "postMessageEvent": {
@@ -322,7 +374,7 @@ export class BlogArticleDetails {
         "text": "Event name to be sent when the button is clicked"
       },
       "attribute": "post-message-event",
-      "reflect": false,
+      "reflect": true,
       "defaultValue": "'articleActionButton'"
     },
     "postId": {
@@ -340,14 +392,15 @@ export class BlogArticleDetails {
         "text": "Showing post ID parameter"
       },
       "attribute": "post-id",
-      "reflect": false
+      "reflect": true
     }
   }; }
   static get states() { return {
     "hasErrors": {},
     "limitStylingAppends": {},
     "isLoading": {},
-    "bannerMatrixReady": {}
+    "bannerMatrixReady": {},
+    "device": {}
   }; }
   static get watchers() { return [{
       "propName": "cmsEndpoint",
@@ -357,7 +410,7 @@ export class BlogArticleDetails {
       "methodName": "watchEndpoint"
     }]; }
   static get listeners() { return [{
-      "name": "WebComponentsReady",
+      "name": "BannerMatrixReady",
       "method": "handleBannerReady",
       "target": "window",
       "capture": false,

package/dist/collection/utils/utils.js

@@ -0,0 +1,44 @@
+export 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';
+}
+export const getDevice = () => {
+  let userAgent = window.navigator.userAgent;
+  if (userAgent.toLowerCase().match(/android/i)) {
+    return 'Android';
+  }
+  if (userAgent.toLowerCase().match(/iphone/i)) {
+    return 'iPhone';
+  }
+  if (userAgent.toLowerCase().match(/ipad|ipod/i)) {
+    return 'iPad';
+  }
+  return 'PC';
+};
+export const getDevicePlatform = () => {
+  const device = getDevice();
+  if (device) {
+    if (device === 'PC') {
+      return 'dk';
+    }
+    else if (device === 'iPad' || device === 'iPhone') {
+      return 'mtWeb';
+    }
+    else {
+      return 'mtWeb';
+    }
+  }
+};

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

@@ -21,6 +21,51 @@ 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)) {
+    return 'Android';
+  }
+  if (userAgent.toLowerCase().match(/iphone/i)) {
+    return 'iPhone';
+  }
+  if (userAgent.toLowerCase().match(/ipad|ipod/i)) {
+    return 'iPad';
+  }
+  return 'PC';
+};
+const getDevicePlatform = () => {
+  const device = getDevice();
+  if (device) {
+    if (device === 'PC') {
+      return 'dk';
+    }
+    else if (device === 'iPad' || device === 'iPhone') {
+      return 'mtWeb';
+    }
+    else {
+      return 'mtWeb';
+    }
+  }
+};
+
 const 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}\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 BlogArticleDetails$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
@@ -32,6 +77,14 @@ const BlogArticleDetails$1 = /*@__PURE__*/ proxyCustomElement(class extends HTML
      * Language of the widget
      */
     this.language = 'en';
+    /**
+     * User roles
+     */
+    this.userRoles = 'everyone';
+    /**
+     * CMS Endpoint stage
+     */
+    this.cmsEnv = 'stage';
     /**
     * Client custom styling via string
     */
@@ -45,8 +98,8 @@ const BlogArticleDetails$1 = /*@__PURE__*/ proxyCustomElement(class extends HTML
      */
     this.showPublishingDate = true;
     /**
-   * Property used to display the image
-   */
+     * Property used to display the image
+     */
     this.showImage = true;
     /**
     * Property used to display the image
@@ -64,6 +117,7 @@ const BlogArticleDetails$1 = /*@__PURE__*/ proxyCustomElement(class extends HTML
     this.limitStylingAppends = false;
     this.isLoading = true;
     this.bannerMatrixReady = false;
+    this.device = '';
     this.setClientStyling = () => {
       let sheet = document.createElement('style');
       sheet.innerHTML = this.clientStyling;
@@ -83,13 +137,12 @@ const BlogArticleDetails$1 = /*@__PURE__*/ proxyCustomElement(class extends HTML
       });
     };
     this.renderContentConditionally = (content) => {
-      var _a, _b;
       const hasBanner = (content === null || content === void 0 ? void 0 : content.indexOf('<bannermatrix-banner')) !== -1;
       if (!hasBanner) {
-        return h("div", { class: "BlogContent", innerHTML: (_a = this.blogData) === null || _a === void 0 ? void 0 : _a.content });
+        return h("div", { class: "BlogContent", innerHTML: content });
       }
       if (this.bannerMatrixReady) {
-        return h("div", { class: "BlogContent", innerHTML: (_b = this.blogData) === null || _b === void 0 ? void 0 : _b.content });
+        return h("div", { class: "BlogContent", innerHTML: content });
       }
       return null;
     };
@@ -115,6 +168,9 @@ const BlogArticleDetails$1 = /*@__PURE__*/ proxyCustomElement(class extends HTML
     }
     this.isLoading = true;
     let url = new URL(`${this.cmsEndpoint}/${this.language}/blog-posts/${this.postId}`);
+    url.searchParams.append('env', this.cmsEnv);
+    url.searchParams.append('userRoles', this.userRoles);
+    url.searchParams.append('platform', getDevicePlatform());
     fetch(url.href)
       .then((res) => {
       if (res.status >= 300) {
@@ -145,16 +201,21 @@ const BlogArticleDetails$1 = /*@__PURE__*/ proxyCustomElement(class extends HTML
     }
     // end custom styling area
   }
+  componentDidLoad() {
+    this.detectAndAlertDeviceType();
+  }
+  detectAndAlertDeviceType() {
+    this.device = checkDeviceType();
+  }
   render() {
-    var _a, _b, _c, _d;
+    var _a, _b, _c, _d, _e;
     if (this.hasErrors) {
       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" }, (_a = this.blogData) === null || _a === void 0 ? void 0 : _a.publishingDate), this.showImage &&
-        h("div", { class: "BlogBanner" }, h("img", { src: this.blogData.image.src, alt: (_b = this.blogData) === null || _b === void 0 ? void 0 : _b.title })), this.showTitle &&
-        h("div", { class: "BlogTitle" }, (_c = this.blogData) === null || _c === void 0 ? void 0 : _c.title), this.showContent && this.renderContentConditionally((_d = this.blogData) === null || _d === void 0 ? void 0 : _d.content))));
+        h("div", { class: "BlogDate" }, (_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.blogData.image.src, alt: this.blogData.image.src })) : (((_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))));
     }
   }
   static get watchers() { return {
@@ -163,22 +224,25 @@ const BlogArticleDetails$1 = /*@__PURE__*/ proxyCustomElement(class extends HTML
   }; }
   static get style() { return blogArticleDetailsCss; }
 }, [1, "blog-article-details", {
-    "cmsEndpoint": [1, "cms-endpoint"],
-    "language": [1],
-    "handleClick": [1, "handle-click"],
-    "clientStyling": [1, "client-styling"],
-    "clientStylingUrl": [1, "client-styling-url"],
-    "showPublishingDate": [4, "show-publishing-date"],
-    "showImage": [4, "show-image"],
-    "showTitle": [4, "show-title"],
-    "showContent": [4, "show-content"],
-    "postMessageEvent": [1, "post-message-event"],
-    "postId": [2, "post-id"],
+    "cmsEndpoint": [513, "cms-endpoint"],
+    "language": [513],
+    "userRoles": [513, "user-roles"],
+    "cmsEnv": [513, "cms-env"],
+    "handleClick": [513, "handle-click"],
+    "clientStyling": [513, "client-styling"],
+    "clientStylingUrl": [513, "client-styling-url"],
+    "showPublishingDate": [516, "show-publishing-date"],
+    "showImage": [516, "show-image"],
+    "showTitle": [516, "show-title"],
+    "showContent": [516, "show-content"],
+    "postMessageEvent": [513, "post-message-event"],
+    "postId": [514, "post-id"],
     "hasErrors": [32],
     "limitStylingAppends": [32],
     "isLoading": [32],
-    "bannerMatrixReady": [32]
-  }, [[8, "WebComponentsReady", "handleBannerReady"]]]);
+    "bannerMatrixReady": [32],
+    "device": [32]
+  }, [[8, "BannerMatrixReady", "handleBannerReady"]]]);
 function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
     return;

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, h } from './index-26083270.js';
+import { r as registerInstance, h } from './index-a6d43dfd.js';
 
 const DEFAULT_LANGUAGE = 'en';
 const SUPPORTED_LANGUAGES = ['ro', 'en', 'fr', 'ar'];
@@ -21,6 +21,51 @@ 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)) {
+    return 'Android';
+  }
+  if (userAgent.toLowerCase().match(/iphone/i)) {
+    return 'iPhone';
+  }
+  if (userAgent.toLowerCase().match(/ipad|ipod/i)) {
+    return 'iPad';
+  }
+  return 'PC';
+};
+const getDevicePlatform = () => {
+  const device = getDevice();
+  if (device) {
+    if (device === 'PC') {
+      return 'dk';
+    }
+    else if (device === 'iPad' || device === 'iPhone') {
+      return 'mtWeb';
+    }
+    else {
+      return 'mtWeb';
+    }
+  }
+};
+
 const 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}\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 BlogArticleDetails = class {
@@ -30,6 +75,14 @@ const BlogArticleDetails = class {
      * Language of the widget
      */
     this.language = 'en';
+    /**
+     * User roles
+     */
+    this.userRoles = 'everyone';
+    /**
+     * CMS Endpoint stage
+     */
+    this.cmsEnv = 'stage';
     /**
     * Client custom styling via string
     */
@@ -43,8 +96,8 @@ const BlogArticleDetails = class {
      */
     this.showPublishingDate = true;
     /**
-   * Property used to display the image
-   */
+     * Property used to display the image
+     */
     this.showImage = true;
     /**
     * Property used to display the image
@@ -62,6 +115,7 @@ const BlogArticleDetails = class {
     this.limitStylingAppends = false;
     this.isLoading = true;
     this.bannerMatrixReady = false;
+    this.device = '';
     this.setClientStyling = () => {
       let sheet = document.createElement('style');
       sheet.innerHTML = this.clientStyling;
@@ -81,13 +135,12 @@ const BlogArticleDetails = class {
       });
     };
     this.renderContentConditionally = (content) => {
-      var _a, _b;
       const hasBanner = (content === null || content === void 0 ? void 0 : content.indexOf('<bannermatrix-banner')) !== -1;
       if (!hasBanner) {
-        return h("div", { class: "BlogContent", innerHTML: (_a = this.blogData) === null || _a === void 0 ? void 0 : _a.content });
+        return h("div", { class: "BlogContent", innerHTML: content });
       }
       if (this.bannerMatrixReady) {
-        return h("div", { class: "BlogContent", innerHTML: (_b = this.blogData) === null || _b === void 0 ? void 0 : _b.content });
+        return h("div", { class: "BlogContent", innerHTML: content });
       }
       return null;
     };
@@ -113,6 +166,9 @@ const BlogArticleDetails = class {
     }
     this.isLoading = true;
     let url = new URL(`${this.cmsEndpoint}/${this.language}/blog-posts/${this.postId}`);
+    url.searchParams.append('env', this.cmsEnv);
+    url.searchParams.append('userRoles', this.userRoles);
+    url.searchParams.append('platform', getDevicePlatform());
     fetch(url.href)
       .then((res) => {
       if (res.status >= 300) {
@@ -143,16 +199,21 @@ const BlogArticleDetails = class {
     }
     // end custom styling area
   }
+  componentDidLoad() {
+    this.detectAndAlertDeviceType();
+  }
+  detectAndAlertDeviceType() {
+    this.device = checkDeviceType();
+  }
   render() {
-    var _a, _b, _c, _d;
+    var _a, _b, _c, _d, _e;
     if (this.hasErrors) {
       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" }, (_a = this.blogData) === null || _a === void 0 ? void 0 : _a.publishingDate), this.showImage &&
-        h("div", { class: "BlogBanner" }, h("img", { src: this.blogData.image.src, alt: (_b = this.blogData) === null || _b === void 0 ? void 0 : _b.title })), this.showTitle &&
-        h("div", { class: "BlogTitle" }, (_c = this.blogData) === null || _c === void 0 ? void 0 : _c.title), this.showContent && this.renderContentConditionally((_d = this.blogData) === null || _d === void 0 ? void 0 : _d.content))));
+        h("div", { class: "BlogDate" }, (_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.blogData.image.src, alt: this.blogData.image.src })) : (((_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))));
     }
   }
   static get watchers() { return {

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

@@ -1,4 +1,4 @@
-import { p as promiseResolve, b as bootstrapLazy } from './index-26083270.js';
+import { p as promiseResolve, b as bootstrapLazy } from './index-a6d43dfd.js';
 
 /*
  Stencil Client Patch Browser v2.15.2 | MIT Licensed | https://stenciljs.com
@@ -13,5 +13,5 @@ const patchBrowser = () => {
 };
 
 patchBrowser().then(options => {
-  return bootstrapLazy([["blog-article-details",[[1,"blog-article-details",{"cmsEndpoint":[1,"cms-endpoint"],"language":[1],"handleClick":[1,"handle-click"],"clientStyling":[1,"client-styling"],"clientStylingUrl":[1,"client-styling-url"],"showPublishingDate":[4,"show-publishing-date"],"showImage":[4,"show-image"],"showTitle":[4,"show-title"],"showContent":[4,"show-content"],"postMessageEvent":[1,"post-message-event"],"postId":[2,"post-id"],"hasErrors":[32],"limitStylingAppends":[32],"isLoading":[32],"bannerMatrixReady":[32]},[[8,"WebComponentsReady","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"],"handleClick":[513,"handle-click"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"showPublishingDate":[516,"show-publishing-date"],"showImage":[516,"show-image"],"showTitle":[516,"show-title"],"showContent":[516,"show-content"],"postMessageEvent":[513,"post-message-event"],"postId":[514,"post-id"],"hasErrors":[32],"limitStylingAppends":[32],"isLoading":[32],"bannerMatrixReady":[32],"device":[32]},[[8,"BannerMatrixReady","handleBannerReady"]]]]]], options);
 });

package/dist/esm/{index-26083270.js → index-a6d43dfd.js}

@@ -246,6 +246,31 @@ const setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags) => {
             classList.remove(...oldClasses.filter((c) => c && !newClasses.includes(c)));
             classList.add(...newClasses.filter((c) => c && !oldClasses.includes(c)));
         }
+        else if (memberName === 'style') {
+            // update style attribute, css properties and values
+            {
+                for (const prop in oldValue) {
+                    if (!newValue || newValue[prop] == null) {
+                        if (prop.includes('-')) {
+                            elm.style.removeProperty(prop);
+                        }
+                        else {
+                            elm.style[prop] = '';
+                        }
+                    }
+                }
+            }
+            for (const prop in newValue) {
+                if (!oldValue || newValue[prop] !== oldValue[prop]) {
+                    if (prop.includes('-')) {
+                        elm.style.setProperty(prop, newValue[prop]);
+                    }
+                    else {
+                        elm.style[prop] = newValue[prop];
+                    }
+                }
+            }
+        }
         else if (memberName === 'ref') {
             // minifier will clean this up
             if (newValue) {
@@ -496,9 +521,14 @@ const callNodeRefs = (vNode) => {
 };
 const renderVdom = (hostRef, renderFnResults) => {
     const hostElm = hostRef.$hostElement$;
+    const cmpMeta = hostRef.$cmpMeta$;
     const oldVNode = hostRef.$vnode$ || newVNode(null, null);
     const rootVnode = isHost(renderFnResults) ? renderFnResults : h(null, null, renderFnResults);
     hostTagName = hostElm.tagName;
+    if (cmpMeta.$attrsToReflect$) {
+        rootVnode.$attrs$ = rootVnode.$attrs$ || {};
+        cmpMeta.$attrsToReflect$.map(([propName, attribute]) => (rootVnode.$attrs$[attribute] = hostElm[propName]));
+    }
     rootVnode.$tag$ = null;
     rootVnode.$flags$ |= 4 /* isHost */;
     hostRef.$vnode$ = rootVnode;
@@ -632,6 +662,9 @@ const postUpdateComponent = (hostRef) => {
             // DOM WRITE!
             addHydratedFlag(elm);
         }
+        {
+            safeCall(instance, 'componentDidLoad');
+        }
         endPostUpdate();
         {
             hostRef.$onReadyResolve$(elm);
@@ -859,6 +892,9 @@ const proxyComponent = (Cstr, cmpMeta, flags) => {
                 .map(([propName, m]) => {
                 const attrName = m[1] || propName;
                 attrNameToPropName.set(attrName, propName);
+                if (m[0] & 512 /* ReflectAttr */) {
+                    cmpMeta.$attrsToReflect$.push([propName, attrName]);
+                }
                 return attrName;
             });
         }
@@ -1036,6 +1072,9 @@ const bootstrapLazy = (lazyBundles, options = {}) => {
             {
                 cmpMeta.$listeners$ = compactMeta[3];
             }
+            {
+                cmpMeta.$attrsToReflect$ = [];
+            }
             {
                 cmpMeta.$watchers$ = {};
             }

package/dist/esm/loader.js

@@ -1,4 +1,4 @@
-import { p as promiseResolve, b as bootstrapLazy } from './index-26083270.js';
+import { p as promiseResolve, b as bootstrapLazy } from './index-a6d43dfd.js';
 
 /*
  Stencil Client Patch Esm v2.15.2 | MIT Licensed | https://stenciljs.com
@@ -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":[1,"cms-endpoint"],"language":[1],"handleClick":[1,"handle-click"],"clientStyling":[1,"client-styling"],"clientStylingUrl":[1,"client-styling-url"],"showPublishingDate":[4,"show-publishing-date"],"showImage":[4,"show-image"],"showTitle":[4,"show-title"],"showContent":[4,"show-content"],"postMessageEvent":[1,"post-message-event"],"postId":[2,"post-id"],"hasErrors":[32],"limitStylingAppends":[32],"isLoading":[32],"bannerMatrixReady":[32]},[[8,"WebComponentsReady","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"],"handleClick":[513,"handle-click"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"showPublishingDate":[516,"show-publishing-date"],"showImage":[516,"show-image"],"showTitle":[516,"show-title"],"showContent":[516,"show-content"],"postMessageEvent":[513,"post-message-event"],"postId":[514,"post-id"],"hasErrors":[32],"limitStylingAppends":[32],"isLoading":[32],"bannerMatrixReady":[32],"device":[32]},[[8,"BannerMatrixReady","handleBannerReady"]]]]]], options);
   });
 };
 

package/dist/types/Users/user/workspace/everymatrix/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

@@ -7,6 +7,14 @@ export declare class BlogArticleDetails {
    * Language of the widget
    */
   language: string;
+  /**
+   * User roles
+   */
+  userRoles: string;
+  /**
+   * CMS Endpoint stage
+   */
+  cmsEnv: string;
   /**
    * Handle when you click on show more button
    */
@@ -24,8 +32,8 @@ export declare class BlogArticleDetails {
    */
   showPublishingDate: boolean;
   /**
- * Property used to display the image
- */
+   * Property used to display the image
+   */
   showImage: boolean;
   /**
   * Property used to display the image
@@ -47,6 +55,7 @@ export declare class BlogArticleDetails {
   private limitStylingAppends;
   private isLoading;
   bannerMatrixReady: boolean;
+  device: string;
   handleBannerReady(): void;
   watchEndpoint(newValue: string, oldValue: string): void;
   private stylingContainer;
@@ -54,6 +63,8 @@ export declare class BlogArticleDetails {
   connectedCallback(): void;
   getBlogArticleDetails(): void;
   componentDidRender(): void;
+  componentDidLoad(): void;
+  detectAndAlertDeviceType(): void;
   setClientStyling: () => void;
   setClientStylingURL: () => void;
   renderContentConditionally: (content: string) => HTMLElement;

package/dist/types/components.d.ts

@@ -19,6 +19,10 @@ export namespace Components {
           * Endpoint URL for the source of data
          */
         "cmsEndpoint": string;
+        /**
+          * CMS Endpoint stage
+         */
+        "cmsEnv": string;
         /**
           * Handle when you click on show more button
          */
@@ -51,6 +55,10 @@ export namespace Components {
           * Property used to display the image
          */
         "showTitle": boolean;
+        /**
+          * User roles
+         */
+        "userRoles": string;
     }
 }
 declare global {
@@ -78,6 +86,10 @@ declare namespace LocalJSX {
           * Endpoint URL for the source of data
          */
         "cmsEndpoint"?: string;
+        /**
+          * CMS Endpoint stage
+         */
+        "cmsEnv"?: string;
         /**
           * Handle when you click on show more button
          */
@@ -110,6 +122,10 @@ declare namespace LocalJSX {
           * Property used to display the image
          */
         "showTitle"?: boolean;
+        /**
+          * User roles
+         */
+        "userRoles"?: string;
     }
     interface IntrinsicElements {
         "blog-article-details": BlogArticleDetails;

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

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

package/package.json

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

package/dist/blog-article-details/p-493d4f13.entry.js

@@ -1 +0,0 @@
-import{r as t,h as i}from"./p-b3ab7cf8.js";const n=["ro","en","fr","ar"],r={en:{error:"Error"},ro:{error:"Eroare"},fr:{error:"Error"},ar:{error:"خطأ"}},o=class{constructor(n){t(this,n),this.language="en",this.clientStyling="",this.clientStylingUrl="",this.showPublishingDate=!0,this.showImage=!0,this.showTitle=!0,this.showContent=!0,this.postMessageEvent="articleActionButton",this.hasErrors=!1,this.limitStylingAppends=!1,this.isLoading=!0,this.bannerMatrixReady=!1,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=>{var n,r;return-1!==(null==t?void 0:t.indexOf("<bannermatrix-banner"))?this.bannerMatrixReady?i("div",{class:"BlogContent",innerHTML:null===(r=this.blogData)||void 0===r?void 0:r.content}):null:i("div",{class:"BlogContent",innerHTML:null===(n=this.blogData)||void 0===n?void 0:n.content})}}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&&isNaN(this.postId))throw this.hasErrors=!0,new Error("The postId parameter is missing!");this.isLoading=!0;let t=new URL(`${this.cmsEndpoint}/${this.language}/blog-posts/${this.postId}`);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.blogData.publishingDate=new Date(this.blogData.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)}render(){var t,o,s,e;return this.hasErrors?i("div",{class:"BlogArticleDetails"},i("div",{class:"Title"},(()=>{const t=this.language;return r[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"},null===(t=this.blogData)||void 0===t?void 0:t.publishingDate),this.showImage&&i("div",{class:"BlogBanner"},i("img",{src:this.blogData.image.src,alt:null===(o=this.blogData)||void 0===o?void 0:o.title})),this.showTitle&&i("div",{class:"BlogTitle"},null===(s=this.blogData)||void 0===s?void 0:s.title),this.showContent&&this.renderContentConditionally(null===(e=this.blogData)||void 0===e?void 0:e.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}\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/blog-article-details/p-b3ab7cf8.js

@@ -1 +0,0 @@
-let e,t,n=!1;const l="undefined"!=typeof window?window:{},s=l.document||{head:{}},o={t:0,l:"",jmp:e=>e(),raf:e=>requestAnimationFrame(e),ael:(e,t,n,l)=>e.addEventListener(t,n,l),rel:(e,t,n,l)=>e.removeEventListener(t,n,l),ce:(e,t)=>new CustomEvent(e,t)},r=e=>Promise.resolve(e),c=(()=>{try{return new CSSStyleSheet,"function"==typeof(new CSSStyleSheet).replace}catch(e){}return!1})(),i=(e,t,n)=>{n&&n.map((([n,l,s])=>{const r=a(e,n),c=u(t,s),i=f(n);o.ael(r,l,c,i),(t.o=t.o||[]).push((()=>o.rel(r,l,c,i)))}))},u=(e,t)=>n=>{try{256&e.t?e.i[t](n):(e.u=e.u||[]).push([t,n])}catch(e){I(e)}},a=(e,t)=>8&t?l:e,f=e=>0!=(2&e),h=new WeakMap,d=e=>"sc-"+e.h,$={},y=e=>"object"==(e=typeof e)||"function"===e,p=(e,t,...n)=>{let l=null,s=!1,o=!1,r=[];const c=t=>{for(let n=0;n<t.length;n++)l=t[n],Array.isArray(l)?c(l):null!=l&&"boolean"!=typeof l&&((s="function"!=typeof e&&!y(l))&&(l+=""),s&&o?r[r.length-1].$+=l:r.push(s?m(null,l):l),o=s)};if(c(n),t){const e=t.className||t.class;e&&(t.class="object"!=typeof e?e:Object.keys(e).filter((t=>e[t])).join(" "))}const i=m(e,null);return i.p=t,r.length>0&&(i.m=r),i},m=(e,t)=>({t:0,S:e,$:t,g:null,m:null,p:null}),b={},w=(e,t,n,l,s,o)=>{if(n!==l){let r=G(e,t);if(t.toLowerCase(),"class"===t){const t=e.classList,s=g(n),o=g(l);t.remove(...s.filter((e=>e&&!o.includes(e)))),t.add(...o.filter((e=>e&&!s.includes(e))))}else if("ref"===t)l&&l(e);else{const c=y(l);if((r||c&&null!==l)&&!s)try{if(e.tagName.includes("-"))e[t]=l;else{let s=null==l?"":l;"list"===t?r=!1:null!=n&&e[t]==s||(e[t]=s)}}catch(e){}null==l||!1===l?!1===l&&""!==e.getAttribute(t)||e.removeAttribute(t):(!r||4&o||s)&&!c&&e.setAttribute(t,l=!0===l?"":l)}}},S=/\s/,g=e=>e?e.split(S):[],j=(e,t,n,l)=>{const s=11===t.g.nodeType&&t.g.host?t.g.host:t.g,o=e&&e.p||$,r=t.p||$;for(l in o)l in r||w(s,l,o[l],void 0,n,t.t);for(l in r)w(s,l,o[l],r[l],n,t.t)},v=(t,n,l)=>{let o,r,c=n.m[l],i=0;if(null!==c.$)o=c.g=s.createTextNode(c.$);else if(o=c.g=s.createElement(c.S),j(null,c,!1),null!=e&&o["s-si"]!==e&&o.classList.add(o["s-si"]=e),c.m)for(i=0;i<c.m.length;++i)r=v(t,c,i),r&&o.appendChild(r);return o},M=(e,n,l,s,o,r)=>{let c,i=e;for(i.shadowRoot&&i.tagName===t&&(i=i.shadowRoot);o<=r;++o)s[o]&&(c=v(null,l,o),c&&(s[o].g=c,i.insertBefore(c,n)))},k=(e,t,n,l,s)=>{for(;t<=n;++t)(l=e[t])&&(s=l.g,P(l),s.remove())},C=(e,t)=>e.S===t.S,O=(e,t)=>{const n=t.g=e.g,l=e.m,s=t.m,o=t.$;null===o?(j(e,t,!1),null!==l&&null!==s?((e,t,n,l)=>{let s,o=0,r=0,c=t.length-1,i=t[0],u=t[c],a=l.length-1,f=l[0],h=l[a];for(;o<=c&&r<=a;)null==i?i=t[++o]:null==u?u=t[--c]:null==f?f=l[++r]:null==h?h=l[--a]:C(i,f)?(O(i,f),i=t[++o],f=l[++r]):C(u,h)?(O(u,h),u=t[--c],h=l[--a]):C(i,h)?(O(i,h),e.insertBefore(i.g,u.g.nextSibling),i=t[++o],h=l[--a]):C(u,f)?(O(u,f),e.insertBefore(u.g,i.g),u=t[--c],f=l[++r]):(s=v(t&&t[r],n,r),f=l[++r],s&&i.g.parentNode.insertBefore(s,i.g));o>c?M(e,null==l[a+1]?null:l[a+1].g,n,l,r,a):r>a&&k(t,o,c)})(n,l,t,s):null!==s?(null!==e.$&&(n.textContent=""),M(n,null,t,s,0,s.length-1)):null!==l&&k(l,0,l.length-1)):e.$!==o&&(n.data=o)},P=e=>{e.p&&e.p.ref&&e.p.ref(null),e.m&&e.m.map(P)},x=(e,t)=>{t&&!e.j&&t["s-p"]&&t["s-p"].push(new Promise((t=>e.j=t)))},E=(e,t)=>{if(e.t|=16,!(4&e.t))return x(e,e.v),le((()=>N(e,t)));e.t|=512},N=(e,t)=>{const n=e.i;return t&&(e.t|=256,e.u&&(e.u.map((([e,t])=>L(n,e,t))),e.u=null)),U(void 0,(()=>R(e,n,t)))},R=async(e,t,n)=>{const l=e.M,o=l["s-rc"];n&&(e=>{const t=e.k,n=e.M,l=t.t,o=((e,t)=>{let n=d(t),l=Q.get(n);if(e=11===e.nodeType?e:s,l)if("string"==typeof l){let t,o=h.get(e=e.head||e);o||h.set(e,o=new Set),o.has(n)||(t=s.createElement("style"),t.innerHTML=l,e.insertBefore(t,e.querySelector("link")),o&&o.add(n))}else e.adoptedStyleSheets.includes(l)||(e.adoptedStyleSheets=[...e.adoptedStyleSheets,l]);return n})(n.shadowRoot?n.shadowRoot:n.getRootNode(),t);10&l&&(n["s-sc"]=o,n.classList.add(o+"-h"))})(e);T(e,t),o&&(o.map((e=>e())),l["s-rc"]=void 0);{const t=l["s-p"],n=()=>A(e);0===t.length?n():(Promise.all(t).then(n),e.t|=4,t.length=0)}},T=(n,l)=>{try{l=l.render(),n.t&=-17,n.t|=2,((n,l)=>{const s=n.M,o=n.C||m(null,null),r=(e=>e&&e.S===b)(l)?l:p(null,null,l);t=s.tagName,r.S=null,r.t|=4,n.C=r,r.g=o.g=s.shadowRoot||s,e=s["s-sc"],O(o,r)})(n,l)}catch(e){I(e,n.M)}return null},A=e=>{const t=e.M,n=e.v;L(e.i,"componentDidRender"),64&e.t||(e.t|=64,W(t),e.O(t),n||F()),e.j&&(e.j(),e.j=void 0),512&e.t&&ne((()=>E(e,!1))),e.t&=-517},F=()=>{W(s.documentElement),ne((()=>(e=>{const t=o.ce("appload",{detail:{namespace:"blog-article-details"}});return e.dispatchEvent(t),t})(l)))},L=(e,t,n)=>{if(e&&e[t])try{return e[t](n)}catch(e){I(e)}},U=(e,t)=>e&&e.then?e.then(t):t(),W=e=>e.classList.add("hydrated"),q=(e,t,n)=>{if(t.P){e.watchers&&(t.N=e.watchers);const l=Object.entries(t.P),s=e.prototype;if(l.map((([e,[l]])=>{(31&l||2&n&&32&l)&&Object.defineProperty(s,e,{get(){return((e,t)=>_(this).R.get(t))(0,e)},set(n){((e,t,n,l)=>{const s=_(e),o=s.M,r=s.R.get(t),c=s.t,i=s.i;if(n=((e,t)=>null==e||y(e)?e:4&t?"false"!==e&&(""===e||!!e):2&t?parseFloat(e):1&t?e+"":e)(n,l.P[t][0]),(!(8&c)||void 0===r)&&n!==r&&(!Number.isNaN(r)||!Number.isNaN(n))&&(s.R.set(t,n),i)){if(l.N&&128&c){const e=l.N[t];e&&e.map((e=>{try{i[e](n,r,t)}catch(e){I(e,o)}}))}2==(18&c)&&E(s,!1)}})(this,e,n,t)},configurable:!0,enumerable:!0})})),1&n){const t=new Map;s.attributeChangedCallback=function(e,n,l){o.jmp((()=>{const n=t.get(e);if(this.hasOwnProperty(n))l=this[n],delete this[n];else if(s.hasOwnProperty(n)&&"number"==typeof this[n]&&this[n]==l)return;this[n]=(null!==l||"boolean"!=typeof this[n])&&l}))},e.observedAttributes=l.filter((([e,t])=>15&t[0])).map((([e,n])=>{const l=n[1]||e;return t.set(l,e),l}))}}return e},D=e=>{L(e,"connectedCallback")},H=(e,t={})=>{const n=[],r=t.exclude||[],u=l.customElements,a=s.head,f=a.querySelector("meta[charset]"),h=s.createElement("style"),$=[];let y,p=!0;Object.assign(o,t),o.l=new URL(t.resourcesUrl||"./",s.baseURI).href,e.map((e=>{e[1].map((t=>{const l={t:t[0],h:t[1],P:t[2],T:t[3]};l.P=t[2],l.T=t[3],l.N={};const s=l.h,a=class extends HTMLElement{constructor(e){super(e),B(e=this,l),1&l.t&&e.attachShadow({mode:"open"})}connectedCallback(){y&&(clearTimeout(y),y=null),p?$.push(this):o.jmp((()=>(e=>{if(0==(1&o.t)){const t=_(e),n=t.k,l=()=>{};if(1&t.t)i(e,t,n.T),D(t.i);else{t.t|=1;{let n=e;for(;n=n.parentNode||n.host;)if(n["s-p"]){x(t,t.v=n);break}}n.P&&Object.entries(n.P).map((([t,[n]])=>{if(31&n&&e.hasOwnProperty(t)){const n=e[t];delete e[t],e[t]=n}})),(async(e,t,n,l,s)=>{if(0==(32&t.t)){{if(t.t|=32,(s=K(n)).then){const e=()=>{};s=await s,e()}s.isProxied||(n.N=s.watchers,q(s,n,2),s.isProxied=!0);const e=()=>{};t.t|=8;try{new s(t)}catch(e){I(e)}t.t&=-9,t.t|=128,e(),D(t.i)}if(s.style){let e=s.style;const t=d(n);if(!Q.has(t)){const l=()=>{};((e,t,n)=>{let l=Q.get(e);c&&n?(l=l||new CSSStyleSheet,l.replace(t)):l=t,Q.set(e,l)})(t,e,!!(1&n.t)),l()}}}const o=t.v,r=()=>E(t,!0);o&&o["s-rc"]?o["s-rc"].push(r):r()})(0,t,n)}l()}})(this)))}disconnectedCallback(){o.jmp((()=>(()=>{if(0==(1&o.t)){const e=_(this);e.o&&(e.o.map((e=>e())),e.o=void 0)}})()))}componentOnReady(){return _(this).A}};l.F=e[0],r.includes(s)||u.get(s)||(n.push(s),u.define(s,q(a,l,1)))}))})),h.innerHTML=n+"{visibility:hidden}.hydrated{visibility:inherit}",h.setAttribute("data-styles",""),a.insertBefore(h,f?f.nextSibling:a.firstChild),p=!1,$.length?$.map((e=>e.connectedCallback())):o.jmp((()=>y=setTimeout(F,30)))},V=new WeakMap,_=e=>V.get(e),z=(e,t)=>V.set(t.i=e,t),B=(e,t)=>{const n={t:0,M:e,k:t,R:new Map};return n.A=new Promise((e=>n.O=e)),e["s-p"]=[],e["s-rc"]=[],i(e,n,t.T),V.set(e,n)},G=(e,t)=>t in e,I=(e,t)=>(0,console.error)(e,t),J=new Map,K=e=>{const t=e.h.replace(/-/g,"_"),n=e.F,l=J.get(n);return l?l[t]:import(`./${n}.entry.js`).then((e=>(J.set(n,e),e[t])),I)},Q=new Map,X=[],Y=[],Z=(e,t)=>l=>{e.push(l),n||(n=!0,t&&4&o.t?ne(te):o.raf(te))},ee=e=>{for(let t=0;t<e.length;t++)try{e[t](performance.now())}catch(e){I(e)}e.length=0},te=()=>{ee(X),ee(Y),(n=X.length>0)&&o.raf(te)},ne=e=>r().then(e),le=Z(Y,!0);export{H as b,p as h,r as p,z as r}

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;