Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@everymatrix/blog-article-details

Package Overview
Dependencies
Maintainers
0
Versions
156
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@everymatrix/blog-article-details - npm Package Compare versions

Comparing version 1.44.0 to 1.45.0

dist/blog-article-details/p-0783b0ba.js

2

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

@@ -1,1 +0,1 @@

import{p as t,b as e}from"./p-68e0210a.js";(()=>{const e=import.meta.url,s={};return""!==e&&(s.resourcesUrl=new URL(".",e).href),t(s)})().then((t=>e([["p-b8c9de45",[[1,"blog-article-details",{cmsEndpoint:[513,"cms-endpoint"],language:[513],userRoles:[513,"user-roles"],cmsEnv:[513,"cms-env"],clientStyling:[513,"client-styling"],clientStylingUrl:[513,"client-styling-url"],showPublishingDate:[516,"show-publishing-date"],showImage:[516,"show-image"],showTitle:[516,"show-title"],showContent:[516,"show-content"],postId:[514,"post-id"],postSlug:[513,"post-slug"],postCustomPath:[513,"post-custom-path"],intlDateTimeFormat:[1,"intl-date-time-format"],hasErrors:[32],limitStylingAppends:[32],isLoading:[32],bannerMatrixReady:[32],device:[32]},[[8,"BannerMatrixReady","handleBannerReady"]]]]]],t)));
import{p as t,b as n}from"./p-0783b0ba.js";export{s as setNonce}from"./p-0783b0ba.js";import{g as e}from"./p-e1255160.js";(()=>{const n=import.meta.url,s={};return""!==n&&(s.resourcesUrl=new URL(".",n).href),t(s)})().then((async t=>(await e(),n([["p-f02359f3",[[1,"blog-article-details",{cmsEndpoint:[513,"cms-endpoint"],language:[513],userRoles:[513,"user-roles"],cmsEnv:[513,"cms-env"],clientStyling:[513,"client-styling"],clientStylingUrl:[513,"client-styling-url"],showPublishingDate:[516,"show-publishing-date"],showImage:[516,"show-image"],showTitle:[516,"show-title"],showContent:[516,"show-content"],postId:[514,"post-id"],postSlug:[513,"post-slug"],postCustomPath:[513,"post-custom-path"],intlDateTimeFormat:[1,"intl-date-time-format"],hasErrors:[32],limitStylingAppends:[32],isLoading:[32],bannerMatrixReady:[32],device:[32]},[[8,"BannerMatrixReady","handleBannerReady"]],{postId:["watchEndpoint"],postSlug:["watchEndpoint"],postCustomPath:["watchEndpoint"],cmsEndpoint:["watchEndpoint"],language:["watchEndpoint"],clientStyling:["handleStylingChange"],clientStylingUrl:["handleStylingUrlChange"]}]]]],t))));

@@ -5,280 +5,255 @@ 'use strict';

const index = require('./index-d983d0f8.js');
const index = require('./index-ade27b33.js');
const DEFAULT_LANGUAGE = 'en';
const TRANSLATIONS = {
en: {
error: 'Error',
},
ro: {
error: 'Eroare',
},
fr: {
error: 'Error',
},
ar: {
error: 'خطأ',
},
hr: {
error: 'Greška',
},
'pt-br': {
error: 'Erro'
},
'es-mx': {
error: 'Error'
}
en: {
error: 'Error',
},
ro: {
error: 'Eroare',
},
fr: {
error: 'Error',
},
ar: {
error: 'خطأ',
},
hr: {
error: 'Greška',
},
'pt-br': {
error: 'Erro'
},
'es-mx': {
error: 'Error'
}
};
const translate = (key, customLang) => {
const lang = customLang;
return TRANSLATIONS[(lang !== undefined) && (lang in TRANSLATIONS) ? lang : DEFAULT_LANGUAGE][key];
const lang = customLang;
return TRANSLATIONS[(lang !== undefined) && (lang in TRANSLATIONS) ? lang : DEFAULT_LANGUAGE][key];
};
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';
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';
};
function checkCustomDeviceWidth() {
const width = screen.availWidth;
if (width < 600) {
return 'mobile';
}
else if (width >= 600 && width < 1100) {
return 'tablet';
}
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 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) {
if (device === 'PC') {
return 'dk';
const device = getDevice();
if (device) {
if (device === 'PC') {
return 'dk';
}
else if (device === 'iPad' || device === 'iPhone') {
return 'mtWeb';
}
else {
return 'mtWeb';
}
}
else if (device === 'iPad' || device === 'iPhone') {
return 'mtWeb';
}
else {
return 'mtWeb';
}
}
};
const blogArticleDetailsCss = ":host {\n display: block;\n}\n\n.DetailsContainer {\n background-color: #07072A;\n color: #fff;\n display: flex;\n flex-direction: column;\n}\n.DetailsContainer .BlogBanner div {\n height: 400px;\n}\n.DetailsContainer .DetailsHeadWrapper {\n position: relative;\n}\n.DetailsContainer .DetailsBodyWrapper {\n padding: 30px;\n}\n.DetailsContainer .BlogDate {\n font-size: 12px;\n border-radius: 5px 5px 0 0;\n padding: 10px;\n width: fit-content;\n text-align: center;\n background-color: #0D0D4D;\n z-index: 1;\n text-wrap: nowrap;\n position: absolute;\n bottom: 0;\n left: 30px;\n}\n.DetailsContainer .BlogTitle {\n font-size: 24px;\n}\n.DetailsContainer .BlogContent {\n font-size: 14px;\n}\n.DetailsContainer .BlogContent p:last-child {\n margin-bottom: 0;\n}\n\n@container (max-width: 475px) {\n .DetailsContainer {\n font-size: 12px;\n }\n}";
const BlogArticleDetailsStyle0 = blogArticleDetailsCss;
const BlogArticleDetails = class {
constructor(hostRef) {
index.registerInstance(this, hostRef);
/**
* Language of the widget
*/
this.language = 'en';
/**
* User roles
*/
this.userRoles = 'everyone';
/**
* CMS Endpoint stage
*/
this.cmsEnv = 'stage';
/**
* Client custom styling via string
*/
this.clientStyling = '';
/**
* Client custom styling via url
*/
this.clientStylingUrl = '';
/**
* Property used to display the publishing date
*/
this.showPublishingDate = true;
/**
* Property used to display the image
*/
this.showImage = true;
/**
* Property used to display the image
*/
this.showTitle = true;
/**
* Property used to display the description
*/
this.showContent = true;
/**
* Intl date format
*/
this.intlDateTimeFormat = '';
this.hasErrors = false;
this.limitStylingAppends = false;
this.isLoading = true;
this.bannerMatrixReady = false;
this.device = '';
this.setClientStyling = () => {
let sheet = document.createElement('style');
sheet.innerHTML = this.clientStyling;
this.stylingContainer.prepend(sheet);
};
this.setClientStylingURL = () => {
let url = new URL(this.clientStylingUrl);
let cssFile = document.createElement('style');
fetch(url.href)
.then((res) => res.text())
.then((data) => {
cssFile.innerHTML = data;
setTimeout(() => { this.stylingContainer.prepend(cssFile); }, 1);
})
.catch((err) => {
console.log('Error ', err);
});
};
this.renderContentConditionally = (content) => {
const hasBanner = (content === null || content === void 0 ? void 0 : content.indexOf('<bannermatrix-banner')) !== -1;
if (!hasBanner) {
return index.h("div", { class: "BlogContent", innerHTML: content });
}
if (this.bannerMatrixReady) {
return index.h("div", { class: "BlogContent", innerHTML: content });
}
return null;
};
this.setImage = (image) => {
let source = '';
switch (this.device) {
case 'mobile':
source = image.sources[0].pictureSource;
break;
case 'tablet':
source = image.sources[1].pictureSource;
break;
case 'desktop':
source = image.sources[2].pictureSource;
break;
}
return source;
};
}
// Rerender when bannermatrix has finished loaded. Issue when bannermatrix passed as content from CMS.
handleBannerReady() {
this.bannerMatrixReady = true;
}
watchEndpoint(newValue, oldValue) {
if (newValue && newValue != oldValue && this.cmsEndpoint && this.language && (this.postCustomPath || this.postSlug || this.postId)) {
this.getBlogArticleDetails();
constructor(hostRef) {
index.registerInstance(this, hostRef);
this.setClientStyling = () => {
let sheet = document.createElement('style');
sheet.innerHTML = this.clientStyling;
this.stylingContainer.prepend(sheet);
};
this.setClientStylingURL = () => {
let url = new URL(this.clientStylingUrl);
let cssFile = document.createElement('style');
fetch(url.href)
.then((res) => res.text())
.then((data) => {
cssFile.innerHTML = data;
setTimeout(() => { this.stylingContainer.prepend(cssFile); }, 1);
})
.catch((err) => {
console.log('Error ', err);
});
};
this.renderContentConditionally = (content) => {
const hasBanner = (content === null || content === void 0 ? void 0 : content.indexOf('<bannermatrix-banner')) !== -1;
if (!hasBanner) {
return index.h("div", { class: "BlogContent", innerHTML: content });
}
if (this.bannerMatrixReady) {
return index.h("div", { class: "BlogContent", innerHTML: content });
}
return null;
};
this.setImage = (image) => {
let source = '';
switch (this.device) {
case 'mobile':
source = image.sources[0].pictureSource;
break;
case 'tablet':
source = image.sources[1].pictureSource;
break;
case 'desktop':
source = image.sources[2].pictureSource;
break;
}
return source;
};
this.cmsEndpoint = undefined;
this.language = 'en';
this.userRoles = 'everyone';
this.cmsEnv = 'stage';
this.clientStyling = '';
this.clientStylingUrl = '';
this.showPublishingDate = true;
this.showImage = true;
this.showTitle = true;
this.showContent = true;
this.postId = undefined;
this.postSlug = undefined;
this.postCustomPath = undefined;
this.intlDateTimeFormat = '';
this.hasErrors = false;
this.limitStylingAppends = false;
this.isLoading = true;
this.bannerMatrixReady = false;
this.device = '';
}
}
handleStylingChange(newValue, oldValue) {
if (newValue !== oldValue)
this.setClientStyling();
}
handleStylingUrlChange(newValue, oldValue) {
if (newValue !== oldValue)
this.setClientStylingURL();
}
connectedCallback() {
if (this.cmsEndpoint && this.language && (this.postCustomPath || this.postSlug || this.postId)) {
this.getBlogArticleDetails();
// Rerender when bannermatrix has finished loaded. Issue when bannermatrix passed as content from CMS.
handleBannerReady() {
this.bannerMatrixReady = true;
}
}
getBlogArticleDetails() {
if (!this.postId && !this.postSlug && !this.postCustomPath) {
this.hasErrors = true;
throw new Error('postId, postSlug or postCustomPath parameter has to be provided!');
watchEndpoint(newValue, oldValue) {
if (newValue && newValue != oldValue && this.cmsEndpoint && this.language && (this.postCustomPath || this.postSlug || this.postId)) {
this.getBlogArticleDetails();
}
}
this.isLoading = true;
let url = new URL(`${this.cmsEndpoint}/${this.language}/blog-posts${this.postCustomPath ? '' : '/' + this.postSlug || '/' + this.postId}`);
url.searchParams.append('env', this.cmsEnv);
url.searchParams.append('userRoles', this.userRoles);
url.searchParams.append('device', getDevicePlatform());
if (this.postCustomPath) {
url.searchParams.append('customURL', this.postCustomPath);
handleStylingChange(newValue, oldValue) {
if (newValue !== oldValue)
this.setClientStyling();
}
fetch(url.href)
.then((res) => {
if (res.status >= 300) {
this.hasErrors = true;
throw new Error('There was an error while fetching the data');
}
return res.json();
})
.then((blogContent) => {
if (blogContent.count >= 1 && this.postCustomPath) {
let firstBlogPublishDate = new Date(blogContent.items[0].publishingDate);
let indexOfLatestPublished = 0;
for (let i = 1; i < blogContent.items.length; i++) {
const blogDate = new Date(blogContent.items[i].publishingDate);
if (firstBlogPublishDate.getTime() < blogDate.getTime()) {
firstBlogPublishDate = blogDate;
indexOfLatestPublished = i;
}
handleStylingUrlChange(newValue, oldValue) {
if (newValue !== oldValue)
this.setClientStylingURL();
}
connectedCallback() {
if (this.cmsEndpoint && this.language && (this.postCustomPath || this.postSlug || this.postId)) {
this.getBlogArticleDetails();
}
this.blogData = blogContent.items[indexOfLatestPublished];
}
else {
this.blogData = blogContent;
}
this.isLoading = false;
})
.catch((err) => {
this.hasErrors = true;
console.log('Error', err);
})
.finally(() => this.isLoading = false);
}
componentDidRender() {
// start custom styling area
if (!this.limitStylingAppends && this.stylingContainer) {
if (this.clientStyling)
this.setClientStyling();
if (this.clientStylingUrl)
this.setClientStylingURL();
this.limitStylingAppends = true;
}
// end custom styling area
}
componentDidLoad() {
this.detectAndAlertDeviceType();
}
detectAndAlertDeviceType() {
this.device = getDeviceCustom();
}
formatDate(dateString) {
return new Intl.DateTimeFormat(this.intlDateTimeFormat || 'en-GB').format(new Date(dateString));
}
render() {
var _a, _b, _c, _d, _e;
if (this.hasErrors) {
return (index.h("div", { class: "BlogArticleDetails" }, index.h("div", { class: "Title" }, translate('error', this.language))));
getBlogArticleDetails() {
if (!this.postId && !this.postSlug && !this.postCustomPath) {
this.hasErrors = true;
throw new Error('postId, postSlug or postCustomPath parameter has to be provided!');
}
this.isLoading = true;
let url = new URL(`${this.cmsEndpoint}/${this.language}/blog-posts${this.postCustomPath ? '' : '/' + this.postSlug || '/' + this.postId}`);
url.searchParams.append('env', this.cmsEnv);
url.searchParams.append('userRoles', this.userRoles);
url.searchParams.append('device', getDevicePlatform());
if (this.postCustomPath) {
url.searchParams.append('customURL', this.postCustomPath);
}
fetch(url.href)
.then((res) => {
if (res.status >= 300) {
this.hasErrors = true;
throw new Error('There was an error while fetching the data');
}
return res.json();
})
.then((blogContent) => {
if (blogContent.count >= 1 && this.postCustomPath) {
let firstBlogPublishDate = new Date(blogContent.items[0].publishingDate);
let indexOfLatestPublished = 0;
for (let i = 1; i < blogContent.items.length; i++) {
const blogDate = new Date(blogContent.items[i].publishingDate);
if (firstBlogPublishDate.getTime() < blogDate.getTime()) {
firstBlogPublishDate = blogDate;
indexOfLatestPublished = i;
}
}
this.blogData = blogContent.items[indexOfLatestPublished];
}
else {
this.blogData = blogContent;
}
this.isLoading = false;
})
.catch((err) => {
this.hasErrors = true;
console.log('Error', err);
})
.finally(() => this.isLoading = false);
}
if (!this.isLoading) {
return (index.h("div", { ref: el => this.stylingContainer = el }, index.h("div", { class: "DetailsContainer" }, index.h("div", { class: "DetailsHeadWrapper" }, this.showPublishingDate && this.blogData.publishingDate &&
index.h("div", { class: "BlogDate" }, this.formatDate((_a = this.blogData) === null || _a === void 0 ? void 0 : _a.publishingDate)), this.showImage && (index.h("div", { class: "BlogBanner" }, ((_b = this.blogData.image) === null || _b === void 0 ? void 0 : _b.src) ? (index.h("div", { style: { background: `url(${this.setImage(this.blogData.image)}) no-repeat center center / cover` } })) : (((_c = this.blogData.video) === null || _c === void 0 ? void 0 : _c.sources[this.device]) ? (index.h("video", { src: this.blogData.video.sources[this.device], controls: true })) : (index.h("h1", { style: { color: "white" } }, "No Image")))))), index.h("div", { class: "DetailsBodyWrapper" }, this.showTitle &&
index.h("div", { class: "BlogTitle" }, (_d = this.blogData) === null || _d === void 0 ? void 0 : _d.title), this.showContent && this.renderContentConditionally((_e = this.blogData) === null || _e === void 0 ? void 0 : _e.content)))));
componentDidRender() {
// start custom styling area
if (!this.limitStylingAppends && this.stylingContainer) {
if (this.clientStyling)
this.setClientStyling();
if (this.clientStylingUrl)
this.setClientStylingURL();
this.limitStylingAppends = true;
}
// end custom styling area
}
}
static get watchers() { return {
"postId": ["watchEndpoint"],
"postSlug": ["watchEndpoint"],
"postCustomPath": ["watchEndpoint"],
"cmsEndpoint": ["watchEndpoint"],
"language": ["watchEndpoint"],
"clientStyling": ["handleStylingChange"],
"clientStylingUrl": ["handleStylingUrlChange"]
}; }
componentDidLoad() {
this.detectAndAlertDeviceType();
}
detectAndAlertDeviceType() {
this.device = getDeviceCustom();
}
formatDate(dateString) {
return new Intl.DateTimeFormat(this.intlDateTimeFormat || 'en-GB').format(new Date(dateString));
}
render() {
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: "DetailsContainer" }, index.h("div", { class: "DetailsHeadWrapper" }, this.showPublishingDate && this.blogData.publishingDate &&
index.h("div", { class: "BlogDate" }, this.formatDate((_a = this.blogData) === null || _a === void 0 ? void 0 : _a.publishingDate)), this.showImage && (index.h("div", { class: "BlogBanner" }, ((_b = this.blogData.image) === null || _b === void 0 ? void 0 : _b.src) ? (index.h("div", { style: { background: `url(${this.setImage(this.blogData.image)}) no-repeat center center / cover` } })) : (((_c = this.blogData.video) === null || _c === void 0 ? void 0 : _c.sources[this.device]) ? (index.h("video", { src: this.blogData.video.sources[this.device], controls: true })) : (index.h("h1", { style: { color: "white" } }, "No Image")))))), index.h("div", { class: "DetailsBodyWrapper" }, this.showTitle &&
index.h("div", { class: "BlogTitle" }, (_d = this.blogData) === null || _d === void 0 ? void 0 : _d.title), this.showContent && this.renderContentConditionally((_e = this.blogData) === null || _e === void 0 ? void 0 : _e.content)))));
}
}
static get watchers() { return {
"postId": ["watchEndpoint"],
"postSlug": ["watchEndpoint"],
"postCustomPath": ["watchEndpoint"],
"cmsEndpoint": ["watchEndpoint"],
"language": ["watchEndpoint"],
"clientStyling": ["handleStylingChange"],
"clientStylingUrl": ["handleStylingUrlChange"]
}; }
};
BlogArticleDetails.style = blogArticleDetailsCss;
BlogArticleDetails.style = BlogArticleDetailsStyle0;
exports.blog_article_details = BlogArticleDetails;
'use strict';
const index = require('./index-d983d0f8.js');
Object.defineProperty(exports, '__esModule', { value: true });
const index = require('./index-ade27b33.js');
const appGlobals = require('./app-globals-3a1e7e63.js');
/*
Stencil Client Patch Browser v2.15.2 | MIT Licensed | https://stenciljs.com
Stencil Client Patch Browser v4.20.0 | MIT Licensed | https://stenciljs.com
*/
const patchBrowser = () => {
const importMeta = (typeof document === 'undefined' ? new (require('u' + 'rl').URL)('file:' + __filename).href : (document.currentScript && document.currentScript.src || new URL('blog-article-details.cjs.js', document.baseURI).href));
const opts = {};
if (importMeta !== '') {
opts.resourcesUrl = new URL('.', importMeta).href;
}
return index.promiseResolve(opts);
var patchBrowser = () => {
const importMeta = (typeof document === 'undefined' ? new (require('u' + 'rl').URL)('file:' + __filename).href : (document.currentScript && document.currentScript.src || new URL('blog-article-details.cjs.js', document.baseURI).href));
const opts = {};
if (importMeta !== "") {
opts.resourcesUrl = new URL(".", importMeta).href;
}
return index.promiseResolve(opts);
};
patchBrowser().then(options => {
return index.bootstrapLazy([["blog-article-details.cjs",[[1,"blog-article-details",{"cmsEndpoint":[513,"cms-endpoint"],"language":[513],"userRoles":[513,"user-roles"],"cmsEnv":[513,"cms-env"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"showPublishingDate":[516,"show-publishing-date"],"showImage":[516,"show-image"],"showTitle":[516,"show-title"],"showContent":[516,"show-content"],"postId":[514,"post-id"],"postSlug":[513,"post-slug"],"postCustomPath":[513,"post-custom-path"],"intlDateTimeFormat":[1,"intl-date-time-format"],"hasErrors":[32],"limitStylingAppends":[32],"isLoading":[32],"bannerMatrixReady":[32],"device":[32]},[[8,"BannerMatrixReady","handleBannerReady"]]]]]], options);
patchBrowser().then(async (options) => {
await appGlobals.globalScripts();
return index.bootstrapLazy([["blog-article-details.cjs",[[1,"blog-article-details",{"cmsEndpoint":[513,"cms-endpoint"],"language":[513],"userRoles":[513,"user-roles"],"cmsEnv":[513,"cms-env"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"showPublishingDate":[516,"show-publishing-date"],"showImage":[516,"show-image"],"showTitle":[516,"show-title"],"showContent":[516,"show-content"],"postId":[514,"post-id"],"postSlug":[513,"post-slug"],"postCustomPath":[513,"post-custom-path"],"intlDateTimeFormat":[1,"intl-date-time-format"],"hasErrors":[32],"limitStylingAppends":[32],"isLoading":[32],"bannerMatrixReady":[32],"device":[32]},[[8,"BannerMatrixReady","handleBannerReady"]],{"postId":["watchEndpoint"],"postSlug":["watchEndpoint"],"postCustomPath":["watchEndpoint"],"cmsEndpoint":["watchEndpoint"],"language":["watchEndpoint"],"clientStyling":["handleStylingChange"],"clientStylingUrl":["handleStylingUrlChange"]}]]]], options);
});
exports.setNonce = index.setNonce;

@@ -5,18 +5,12 @@ 'use strict';

const index = require('./index-d983d0f8.js');
const index = require('./index-ade27b33.js');
const appGlobals = require('./app-globals-3a1e7e63.js');
/*
Stencil Client Patch Esm v2.15.2 | MIT Licensed | https://stenciljs.com
*/
const patchEsm = () => {
return index.promiseResolve();
const defineCustomElements = async (win, options) => {
if (typeof window === 'undefined') return undefined;
await appGlobals.globalScripts();
return index.bootstrapLazy([["blog-article-details.cjs",[[1,"blog-article-details",{"cmsEndpoint":[513,"cms-endpoint"],"language":[513],"userRoles":[513,"user-roles"],"cmsEnv":[513,"cms-env"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"showPublishingDate":[516,"show-publishing-date"],"showImage":[516,"show-image"],"showTitle":[516,"show-title"],"showContent":[516,"show-content"],"postId":[514,"post-id"],"postSlug":[513,"post-slug"],"postCustomPath":[513,"post-custom-path"],"intlDateTimeFormat":[1,"intl-date-time-format"],"hasErrors":[32],"limitStylingAppends":[32],"isLoading":[32],"bannerMatrixReady":[32],"device":[32]},[[8,"BannerMatrixReady","handleBannerReady"]],{"postId":["watchEndpoint"],"postSlug":["watchEndpoint"],"postCustomPath":["watchEndpoint"],"cmsEndpoint":["watchEndpoint"],"language":["watchEndpoint"],"clientStyling":["handleStylingChange"],"clientStylingUrl":["handleStylingUrlChange"]}]]]], options);
};
const defineCustomElements = (win, options) => {
if (typeof window === 'undefined') return Promise.resolve();
return patchEsm().then(() => {
return index.bootstrapLazy([["blog-article-details.cjs",[[1,"blog-article-details",{"cmsEndpoint":[513,"cms-endpoint"],"language":[513],"userRoles":[513,"user-roles"],"cmsEnv":[513,"cms-env"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"showPublishingDate":[516,"show-publishing-date"],"showImage":[516,"show-image"],"showTitle":[516,"show-title"],"showContent":[516,"show-content"],"postId":[514,"post-id"],"postSlug":[513,"post-slug"],"postCustomPath":[513,"post-custom-path"],"intlDateTimeFormat":[1,"intl-date-time-format"],"hasErrors":[32],"limitStylingAppends":[32],"isLoading":[32],"bannerMatrixReady":[32],"device":[32]},[[8,"BannerMatrixReady","handleBannerReady"]]]]]], options);
});
};
exports.setNonce = index.setNonce;
exports.defineCustomElements = defineCustomElements;
{
"entries": [
"./components/blog-article-details/blog-article-details.js"
"components/blog-article-details/blog-article-details.js"
],
"compiler": {
"name": "@stencil/core",
"version": "2.15.2",
"typescriptVersion": "4.5.4"
"version": "4.20.0",
"typescriptVersion": "5.5.3"
},

@@ -10,0 +10,0 @@ "collections": [],

@@ -1,496 +0,474 @@

import { Component, Prop, State, Watch, h, Listen } from '@stencil/core';
import { translate } from '../../utils/locale.utils';
import { getDevicePlatform, getDeviceCustom } from '../../utils/utils';
import { h } from "@stencil/core";
import { translate } from "../../utils/locale.utils";
import { getDevicePlatform, getDeviceCustom } 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
*/
this.clientStyling = '';
/**
* Client custom styling via url
*/
this.clientStylingUrl = '';
/**
* Property used to display the publishing date
*/
this.showPublishingDate = true;
/**
* Property used to display the image
*/
this.showImage = true;
/**
* Property used to display the image
*/
this.showTitle = true;
/**
* Property used to display the description
*/
this.showContent = true;
/**
* Intl date format
*/
this.intlDateTimeFormat = '';
this.hasErrors = false;
this.limitStylingAppends = false;
this.isLoading = true;
this.bannerMatrixReady = false;
this.device = '';
this.setClientStyling = () => {
let sheet = document.createElement('style');
sheet.innerHTML = this.clientStyling;
this.stylingContainer.prepend(sheet);
};
this.setClientStylingURL = () => {
let url = new URL(this.clientStylingUrl);
let cssFile = document.createElement('style');
fetch(url.href)
.then((res) => res.text())
.then((data) => {
cssFile.innerHTML = data;
setTimeout(() => { this.stylingContainer.prepend(cssFile); }, 1);
})
.catch((err) => {
console.log('Error ', err);
});
};
this.renderContentConditionally = (content) => {
const hasBanner = (content === null || content === void 0 ? void 0 : content.indexOf('<bannermatrix-banner')) !== -1;
if (!hasBanner) {
return h("div", { class: "BlogContent", innerHTML: content });
}
if (this.bannerMatrixReady) {
return h("div", { class: "BlogContent", innerHTML: content });
}
return null;
};
this.setImage = (image) => {
let source = '';
switch (this.device) {
case 'mobile':
source = image.sources[0].pictureSource;
break;
case 'tablet':
source = image.sources[1].pictureSource;
break;
case 'desktop':
source = image.sources[2].pictureSource;
break;
}
return source;
};
}
// Rerender when bannermatrix has finished loaded. Issue when bannermatrix passed as content from CMS.
handleBannerReady() {
this.bannerMatrixReady = true;
}
watchEndpoint(newValue, oldValue) {
if (newValue && newValue != oldValue && this.cmsEndpoint && this.language && (this.postCustomPath || this.postSlug || this.postId)) {
this.getBlogArticleDetails();
constructor() {
this.setClientStyling = () => {
let sheet = document.createElement('style');
sheet.innerHTML = this.clientStyling;
this.stylingContainer.prepend(sheet);
};
this.setClientStylingURL = () => {
let url = new URL(this.clientStylingUrl);
let cssFile = document.createElement('style');
fetch(url.href)
.then((res) => res.text())
.then((data) => {
cssFile.innerHTML = data;
setTimeout(() => { this.stylingContainer.prepend(cssFile); }, 1);
})
.catch((err) => {
console.log('Error ', err);
});
};
this.renderContentConditionally = (content) => {
const hasBanner = (content === null || content === void 0 ? void 0 : content.indexOf('<bannermatrix-banner')) !== -1;
if (!hasBanner) {
return h("div", { class: "BlogContent", innerHTML: content });
}
if (this.bannerMatrixReady) {
return h("div", { class: "BlogContent", innerHTML: content });
}
return null;
};
this.setImage = (image) => {
let source = '';
switch (this.device) {
case 'mobile':
source = image.sources[0].pictureSource;
break;
case 'tablet':
source = image.sources[1].pictureSource;
break;
case 'desktop':
source = image.sources[2].pictureSource;
break;
}
return source;
};
this.cmsEndpoint = undefined;
this.language = 'en';
this.userRoles = 'everyone';
this.cmsEnv = 'stage';
this.clientStyling = '';
this.clientStylingUrl = '';
this.showPublishingDate = true;
this.showImage = true;
this.showTitle = true;
this.showContent = true;
this.postId = undefined;
this.postSlug = undefined;
this.postCustomPath = undefined;
this.intlDateTimeFormat = '';
this.hasErrors = false;
this.limitStylingAppends = false;
this.isLoading = true;
this.bannerMatrixReady = false;
this.device = '';
}
}
handleStylingChange(newValue, oldValue) {
if (newValue !== oldValue)
this.setClientStyling();
}
handleStylingUrlChange(newValue, oldValue) {
if (newValue !== oldValue)
this.setClientStylingURL();
}
connectedCallback() {
if (this.cmsEndpoint && this.language && (this.postCustomPath || this.postSlug || this.postId)) {
this.getBlogArticleDetails();
// Rerender when bannermatrix has finished loaded. Issue when bannermatrix passed as content from CMS.
handleBannerReady() {
this.bannerMatrixReady = true;
}
}
getBlogArticleDetails() {
if (!this.postId && !this.postSlug && !this.postCustomPath) {
this.hasErrors = true;
throw new Error('postId, postSlug or postCustomPath parameter has to be provided!');
watchEndpoint(newValue, oldValue) {
if (newValue && newValue != oldValue && this.cmsEndpoint && this.language && (this.postCustomPath || this.postSlug || this.postId)) {
this.getBlogArticleDetails();
}
}
this.isLoading = true;
let url = new URL(`${this.cmsEndpoint}/${this.language}/blog-posts${this.postCustomPath ? '' : '/' + this.postSlug || '/' + this.postId}`);
url.searchParams.append('env', this.cmsEnv);
url.searchParams.append('userRoles', this.userRoles);
url.searchParams.append('device', getDevicePlatform());
if (this.postCustomPath) {
url.searchParams.append('customURL', this.postCustomPath);
handleStylingChange(newValue, oldValue) {
if (newValue !== oldValue)
this.setClientStyling();
}
fetch(url.href)
.then((res) => {
if (res.status >= 300) {
this.hasErrors = true;
throw new Error('There was an error while fetching the data');
}
return res.json();
})
.then((blogContent) => {
if (blogContent.count >= 1 && this.postCustomPath) {
let firstBlogPublishDate = new Date(blogContent.items[0].publishingDate);
let indexOfLatestPublished = 0;
for (let i = 1; i < blogContent.items.length; i++) {
const blogDate = new Date(blogContent.items[i].publishingDate);
if (firstBlogPublishDate.getTime() < blogDate.getTime()) {
firstBlogPublishDate = blogDate;
indexOfLatestPublished = i;
}
handleStylingUrlChange(newValue, oldValue) {
if (newValue !== oldValue)
this.setClientStylingURL();
}
connectedCallback() {
if (this.cmsEndpoint && this.language && (this.postCustomPath || this.postSlug || this.postId)) {
this.getBlogArticleDetails();
}
this.blogData = blogContent.items[indexOfLatestPublished];
}
else {
this.blogData = blogContent;
}
;
this.isLoading = false;
})
.catch((err) => {
this.hasErrors = true;
console.log('Error', err);
})
.finally(() => this.isLoading = false);
}
componentDidRender() {
// start custom styling area
if (!this.limitStylingAppends && this.stylingContainer) {
if (this.clientStyling)
this.setClientStyling();
if (this.clientStylingUrl)
this.setClientStylingURL();
this.limitStylingAppends = true;
}
// end custom styling area
}
componentDidLoad() {
this.detectAndAlertDeviceType();
}
detectAndAlertDeviceType() {
this.device = getDeviceCustom();
}
formatDate(dateString) {
return new Intl.DateTimeFormat(this.intlDateTimeFormat || 'en-GB').format(new Date(dateString));
}
render() {
var _a, _b, _c, _d, _e;
if (this.hasErrors) {
return (h("div", { class: "BlogArticleDetails" },
h("div", { class: "Title" }, translate('error', this.language))));
getBlogArticleDetails() {
if (!this.postId && !this.postSlug && !this.postCustomPath) {
this.hasErrors = true;
throw new Error('postId, postSlug or postCustomPath parameter has to be provided!');
}
this.isLoading = true;
let url = new URL(`${this.cmsEndpoint}/${this.language}/blog-posts${this.postCustomPath ? '' : '/' + this.postSlug || '/' + this.postId}`);
url.searchParams.append('env', this.cmsEnv);
url.searchParams.append('userRoles', this.userRoles);
url.searchParams.append('device', getDevicePlatform());
if (this.postCustomPath) {
url.searchParams.append('customURL', this.postCustomPath);
}
fetch(url.href)
.then((res) => {
if (res.status >= 300) {
this.hasErrors = true;
throw new Error('There was an error while fetching the data');
}
return res.json();
})
.then((blogContent) => {
if (blogContent.count >= 1 && this.postCustomPath) {
let firstBlogPublishDate = new Date(blogContent.items[0].publishingDate);
let indexOfLatestPublished = 0;
for (let i = 1; i < blogContent.items.length; i++) {
const blogDate = new Date(blogContent.items[i].publishingDate);
if (firstBlogPublishDate.getTime() < blogDate.getTime()) {
firstBlogPublishDate = blogDate;
indexOfLatestPublished = i;
}
}
this.blogData = blogContent.items[indexOfLatestPublished];
}
else {
this.blogData = blogContent;
}
;
this.isLoading = false;
})
.catch((err) => {
this.hasErrors = true;
console.log('Error', err);
})
.finally(() => this.isLoading = false);
}
if (!this.isLoading) {
return (h("div", { ref: el => this.stylingContainer = el },
h("div", { class: "DetailsContainer" },
h("div", { class: "DetailsHeadWrapper" },
this.showPublishingDate && this.blogData.publishingDate &&
h("div", { class: "BlogDate" }, this.formatDate((_a = this.blogData) === null || _a === void 0 ? void 0 : _a.publishingDate)),
this.showImage && (h("div", { class: "BlogBanner" }, ((_b = this.blogData.image) === null || _b === void 0 ? void 0 : _b.src) ? (h("div", { style: { background: `url(${this.setImage(this.blogData.image)}) no-repeat center center / cover` } })) : (((_c = this.blogData.video) === null || _c === void 0 ? void 0 : _c.sources[this.device]) ? (h("video", { src: this.blogData.video.sources[this.device], controls: true })) : (h("h1", { style: { color: "white" } }, "No Image")))))),
h("div", { class: "DetailsBodyWrapper" },
this.showTitle &&
h("div", { class: "BlogTitle" }, (_d = this.blogData) === null || _d === void 0 ? void 0 : _d.title),
this.showContent && this.renderContentConditionally((_e = this.blogData) === null || _e === void 0 ? void 0 : _e.content)))));
componentDidRender() {
// start custom styling area
if (!this.limitStylingAppends && this.stylingContainer) {
if (this.clientStyling)
this.setClientStyling();
if (this.clientStylingUrl)
this.setClientStylingURL();
this.limitStylingAppends = true;
}
// end custom styling area
}
}
static get is() { return "blog-article-details"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() { return {
"$": ["blog-article-details.scss"]
}; }
static get styleUrls() { return {
"$": ["blog-article-details.css"]
}; }
static get properties() { return {
"cmsEndpoint": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Endpoint URL for the source of data"
},
"attribute": "cms-endpoint",
"reflect": true
},
"language": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Language of the widget"
},
"attribute": "language",
"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'"
},
"clientStyling": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Client custom styling via string"
},
"attribute": "client-styling",
"reflect": true,
"defaultValue": "''"
},
"clientStylingUrl": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Client custom styling via url"
},
"attribute": "client-styling-url",
"reflect": true,
"defaultValue": "''"
},
"showPublishingDate": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Property used to display the publishing date"
},
"attribute": "show-publishing-date",
"reflect": true,
"defaultValue": "true"
},
"showImage": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Property used to display the image"
},
"attribute": "show-image",
"reflect": true,
"defaultValue": "true"
},
"showTitle": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Property used to display the image"
},
"attribute": "show-title",
"reflect": true,
"defaultValue": "true"
},
"showContent": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Property used to display the description"
},
"attribute": "show-content",
"reflect": true,
"defaultValue": "true"
},
"postId": {
"type": "number",
"mutable": false,
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Showing post ID parameter"
},
"attribute": "post-id",
"reflect": true
},
"postSlug": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Slug of post"
},
"attribute": "post-slug",
"reflect": true
},
"postCustomPath": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Custom Path of post"
},
"attribute": "post-custom-path",
"reflect": true
},
"intlDateTimeFormat": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Intl date format"
},
"attribute": "intl-date-time-format",
"reflect": false,
"defaultValue": "''"
componentDidLoad() {
this.detectAndAlertDeviceType();
}
}; }
static get states() { return {
"hasErrors": {},
"limitStylingAppends": {},
"isLoading": {},
"bannerMatrixReady": {},
"device": {}
}; }
static get watchers() { return [{
"propName": "postId",
"methodName": "watchEndpoint"
}, {
"propName": "postSlug",
"methodName": "watchEndpoint"
}, {
"propName": "postCustomPath",
"methodName": "watchEndpoint"
}, {
"propName": "cmsEndpoint",
"methodName": "watchEndpoint"
}, {
"propName": "language",
"methodName": "watchEndpoint"
}, {
"propName": "clientStyling",
"methodName": "handleStylingChange"
}, {
"propName": "clientStylingUrl",
"methodName": "handleStylingUrlChange"
}]; }
static get listeners() { return [{
"name": "BannerMatrixReady",
"method": "handleBannerReady",
"target": "window",
"capture": false,
"passive": false
}]; }
detectAndAlertDeviceType() {
this.device = getDeviceCustom();
}
formatDate(dateString) {
return new Intl.DateTimeFormat(this.intlDateTimeFormat || 'en-GB').format(new Date(dateString));
}
render() {
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: "DetailsContainer" }, h("div", { class: "DetailsHeadWrapper" }, this.showPublishingDate && this.blogData.publishingDate &&
h("div", { class: "BlogDate" }, this.formatDate((_a = this.blogData) === null || _a === void 0 ? void 0 : _a.publishingDate)), this.showImage && (h("div", { class: "BlogBanner" }, ((_b = this.blogData.image) === null || _b === void 0 ? void 0 : _b.src) ? (h("div", { style: { background: `url(${this.setImage(this.blogData.image)}) no-repeat center center / cover` } })) : (((_c = this.blogData.video) === null || _c === void 0 ? void 0 : _c.sources[this.device]) ? (h("video", { src: this.blogData.video.sources[this.device], controls: true })) : (h("h1", { style: { color: "white" } }, "No Image")))))), h("div", { class: "DetailsBodyWrapper" }, this.showTitle &&
h("div", { class: "BlogTitle" }, (_d = this.blogData) === null || _d === void 0 ? void 0 : _d.title), this.showContent && this.renderContentConditionally((_e = this.blogData) === null || _e === void 0 ? void 0 : _e.content)))));
}
}
static get is() { return "blog-article-details"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["blog-article-details.scss"]
};
}
static get styleUrls() {
return {
"$": ["blog-article-details.css"]
};
}
static get properties() {
return {
"cmsEndpoint": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Endpoint URL for the source of data"
},
"attribute": "cms-endpoint",
"reflect": true
},
"language": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Language of the widget"
},
"attribute": "language",
"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'"
},
"clientStyling": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Client custom styling via string"
},
"attribute": "client-styling",
"reflect": true,
"defaultValue": "''"
},
"clientStylingUrl": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Client custom styling via url"
},
"attribute": "client-styling-url",
"reflect": true,
"defaultValue": "''"
},
"showPublishingDate": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Property used to display the publishing date"
},
"attribute": "show-publishing-date",
"reflect": true,
"defaultValue": "true"
},
"showImage": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Property used to display the image"
},
"attribute": "show-image",
"reflect": true,
"defaultValue": "true"
},
"showTitle": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Property used to display the image"
},
"attribute": "show-title",
"reflect": true,
"defaultValue": "true"
},
"showContent": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Property used to display the description"
},
"attribute": "show-content",
"reflect": true,
"defaultValue": "true"
},
"postId": {
"type": "number",
"mutable": false,
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Showing post ID parameter"
},
"attribute": "post-id",
"reflect": true
},
"postSlug": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Slug of post"
},
"attribute": "post-slug",
"reflect": true
},
"postCustomPath": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Custom Path of post"
},
"attribute": "post-custom-path",
"reflect": true
},
"intlDateTimeFormat": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Intl date format"
},
"attribute": "intl-date-time-format",
"reflect": false,
"defaultValue": "''"
}
};
}
static get states() {
return {
"hasErrors": {},
"limitStylingAppends": {},
"isLoading": {},
"bannerMatrixReady": {},
"device": {}
};
}
static get watchers() {
return [{
"propName": "postId",
"methodName": "watchEndpoint"
}, {
"propName": "postSlug",
"methodName": "watchEndpoint"
}, {
"propName": "postCustomPath",
"methodName": "watchEndpoint"
}, {
"propName": "cmsEndpoint",
"methodName": "watchEndpoint"
}, {
"propName": "language",
"methodName": "watchEndpoint"
}, {
"propName": "clientStyling",
"methodName": "handleStylingChange"
}, {
"propName": "clientStylingUrl",
"methodName": "handleStylingUrlChange"
}];
}
static get listeners() {
return [{
"name": "BannerMatrixReady",
"method": "handleBannerReady",
"target": "window",
"capture": false,
"passive": false
}];
}
}
const DEFAULT_LANGUAGE = 'en';
const TRANSLATIONS = {
en: {
error: 'Error',
},
ro: {
error: 'Eroare',
},
fr: {
error: 'Error',
},
ar: {
error: 'خطأ',
},
hr: {
error: 'Greška',
},
'pt-br': {
error: 'Erro'
},
'es-mx': {
error: 'Error'
}
en: {
error: 'Error',
},
ro: {
error: 'Eroare',
},
fr: {
error: 'Error',
},
ar: {
error: 'خطأ',
},
hr: {
error: 'Greška',
},
'pt-br': {
error: 'Erro'
},
'es-mx': {
error: 'Error'
}
};
export const translate = (key, customLang) => {
const lang = customLang;
return TRANSLATIONS[(lang !== undefined) && (lang in TRANSLATIONS) ? lang : DEFAULT_LANGUAGE][key];
const lang = customLang;
return TRANSLATIONS[(lang !== undefined) && (lang in TRANSLATIONS) ? lang : DEFAULT_LANGUAGE][key];
};
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';
const userAgent = navigator.userAgent.toLowerCase();
const width = screen.availWidth;
const height = screen.availHeight;
if (userAgent.includes('iphone')) {
return 'mobile';
}
if (width > height && height < 800) {
return 'tablet';
if (userAgent.includes('android')) {
if (height > width && width < 800) {
return 'mobile';
}
if (width > height && height < 800) {
return 'tablet';
}
}
}
return 'desktop';
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';
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';
};
function checkCustomDeviceWidth() {
const width = screen.availWidth;
if (width < 600) {
return 'mobile';
}
else if (width >= 600 && width < 1100) {
return 'tablet';
}
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;
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) {
if (device === 'PC') {
return 'dk';
const device = getDevice();
if (device) {
if (device === 'PC') {
return 'dk';
}
else if (device === 'iPad' || device === 'iPhone') {
return 'mtWeb';
}
else {
return 'mtWeb';
}
}
else if (device === 'iPad' || device === 'iPhone') {
return 'mtWeb';
}
else {
return 'mtWeb';
}
}
};

@@ -1,279 +0,254 @@

import { r as registerInstance, h } from './index-a6d43dfd.js';
import { r as registerInstance, h } from './index-9d94198d.js';
const DEFAULT_LANGUAGE = 'en';
const TRANSLATIONS = {
en: {
error: 'Error',
},
ro: {
error: 'Eroare',
},
fr: {
error: 'Error',
},
ar: {
error: 'خطأ',
},
hr: {
error: 'Greška',
},
'pt-br': {
error: 'Erro'
},
'es-mx': {
error: 'Error'
}
en: {
error: 'Error',
},
ro: {
error: 'Eroare',
},
fr: {
error: 'Error',
},
ar: {
error: 'خطأ',
},
hr: {
error: 'Greška',
},
'pt-br': {
error: 'Erro'
},
'es-mx': {
error: 'Error'
}
};
const translate = (key, customLang) => {
const lang = customLang;
return TRANSLATIONS[(lang !== undefined) && (lang in TRANSLATIONS) ? lang : DEFAULT_LANGUAGE][key];
const lang = customLang;
return TRANSLATIONS[(lang !== undefined) && (lang in TRANSLATIONS) ? lang : DEFAULT_LANGUAGE][key];
};
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';
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';
};
function checkCustomDeviceWidth() {
const width = screen.availWidth;
if (width < 600) {
return 'mobile';
}
else if (width >= 600 && width < 1100) {
return 'tablet';
}
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 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) {
if (device === 'PC') {
return 'dk';
const device = getDevice();
if (device) {
if (device === 'PC') {
return 'dk';
}
else if (device === 'iPad' || device === 'iPhone') {
return 'mtWeb';
}
else {
return 'mtWeb';
}
}
else if (device === 'iPad' || device === 'iPhone') {
return 'mtWeb';
}
else {
return 'mtWeb';
}
}
};
const blogArticleDetailsCss = ":host {\n display: block;\n}\n\n.DetailsContainer {\n background-color: #07072A;\n color: #fff;\n display: flex;\n flex-direction: column;\n}\n.DetailsContainer .BlogBanner div {\n height: 400px;\n}\n.DetailsContainer .DetailsHeadWrapper {\n position: relative;\n}\n.DetailsContainer .DetailsBodyWrapper {\n padding: 30px;\n}\n.DetailsContainer .BlogDate {\n font-size: 12px;\n border-radius: 5px 5px 0 0;\n padding: 10px;\n width: fit-content;\n text-align: center;\n background-color: #0D0D4D;\n z-index: 1;\n text-wrap: nowrap;\n position: absolute;\n bottom: 0;\n left: 30px;\n}\n.DetailsContainer .BlogTitle {\n font-size: 24px;\n}\n.DetailsContainer .BlogContent {\n font-size: 14px;\n}\n.DetailsContainer .BlogContent p:last-child {\n margin-bottom: 0;\n}\n\n@container (max-width: 475px) {\n .DetailsContainer {\n font-size: 12px;\n }\n}";
const BlogArticleDetailsStyle0 = blogArticleDetailsCss;
const BlogArticleDetails = class {
constructor(hostRef) {
registerInstance(this, hostRef);
/**
* Language of the widget
*/
this.language = 'en';
/**
* User roles
*/
this.userRoles = 'everyone';
/**
* CMS Endpoint stage
*/
this.cmsEnv = 'stage';
/**
* Client custom styling via string
*/
this.clientStyling = '';
/**
* Client custom styling via url
*/
this.clientStylingUrl = '';
/**
* Property used to display the publishing date
*/
this.showPublishingDate = true;
/**
* Property used to display the image
*/
this.showImage = true;
/**
* Property used to display the image
*/
this.showTitle = true;
/**
* Property used to display the description
*/
this.showContent = true;
/**
* Intl date format
*/
this.intlDateTimeFormat = '';
this.hasErrors = false;
this.limitStylingAppends = false;
this.isLoading = true;
this.bannerMatrixReady = false;
this.device = '';
this.setClientStyling = () => {
let sheet = document.createElement('style');
sheet.innerHTML = this.clientStyling;
this.stylingContainer.prepend(sheet);
};
this.setClientStylingURL = () => {
let url = new URL(this.clientStylingUrl);
let cssFile = document.createElement('style');
fetch(url.href)
.then((res) => res.text())
.then((data) => {
cssFile.innerHTML = data;
setTimeout(() => { this.stylingContainer.prepend(cssFile); }, 1);
})
.catch((err) => {
console.log('Error ', err);
});
};
this.renderContentConditionally = (content) => {
const hasBanner = (content === null || content === void 0 ? void 0 : content.indexOf('<bannermatrix-banner')) !== -1;
if (!hasBanner) {
return h("div", { class: "BlogContent", innerHTML: content });
}
if (this.bannerMatrixReady) {
return h("div", { class: "BlogContent", innerHTML: content });
}
return null;
};
this.setImage = (image) => {
let source = '';
switch (this.device) {
case 'mobile':
source = image.sources[0].pictureSource;
break;
case 'tablet':
source = image.sources[1].pictureSource;
break;
case 'desktop':
source = image.sources[2].pictureSource;
break;
}
return source;
};
}
// Rerender when bannermatrix has finished loaded. Issue when bannermatrix passed as content from CMS.
handleBannerReady() {
this.bannerMatrixReady = true;
}
watchEndpoint(newValue, oldValue) {
if (newValue && newValue != oldValue && this.cmsEndpoint && this.language && (this.postCustomPath || this.postSlug || this.postId)) {
this.getBlogArticleDetails();
constructor(hostRef) {
registerInstance(this, hostRef);
this.setClientStyling = () => {
let sheet = document.createElement('style');
sheet.innerHTML = this.clientStyling;
this.stylingContainer.prepend(sheet);
};
this.setClientStylingURL = () => {
let url = new URL(this.clientStylingUrl);
let cssFile = document.createElement('style');
fetch(url.href)
.then((res) => res.text())
.then((data) => {
cssFile.innerHTML = data;
setTimeout(() => { this.stylingContainer.prepend(cssFile); }, 1);
})
.catch((err) => {
console.log('Error ', err);
});
};
this.renderContentConditionally = (content) => {
const hasBanner = (content === null || content === void 0 ? void 0 : content.indexOf('<bannermatrix-banner')) !== -1;
if (!hasBanner) {
return h("div", { class: "BlogContent", innerHTML: content });
}
if (this.bannerMatrixReady) {
return h("div", { class: "BlogContent", innerHTML: content });
}
return null;
};
this.setImage = (image) => {
let source = '';
switch (this.device) {
case 'mobile':
source = image.sources[0].pictureSource;
break;
case 'tablet':
source = image.sources[1].pictureSource;
break;
case 'desktop':
source = image.sources[2].pictureSource;
break;
}
return source;
};
this.cmsEndpoint = undefined;
this.language = 'en';
this.userRoles = 'everyone';
this.cmsEnv = 'stage';
this.clientStyling = '';
this.clientStylingUrl = '';
this.showPublishingDate = true;
this.showImage = true;
this.showTitle = true;
this.showContent = true;
this.postId = undefined;
this.postSlug = undefined;
this.postCustomPath = undefined;
this.intlDateTimeFormat = '';
this.hasErrors = false;
this.limitStylingAppends = false;
this.isLoading = true;
this.bannerMatrixReady = false;
this.device = '';
}
}
handleStylingChange(newValue, oldValue) {
if (newValue !== oldValue)
this.setClientStyling();
}
handleStylingUrlChange(newValue, oldValue) {
if (newValue !== oldValue)
this.setClientStylingURL();
}
connectedCallback() {
if (this.cmsEndpoint && this.language && (this.postCustomPath || this.postSlug || this.postId)) {
this.getBlogArticleDetails();
// Rerender when bannermatrix has finished loaded. Issue when bannermatrix passed as content from CMS.
handleBannerReady() {
this.bannerMatrixReady = true;
}
}
getBlogArticleDetails() {
if (!this.postId && !this.postSlug && !this.postCustomPath) {
this.hasErrors = true;
throw new Error('postId, postSlug or postCustomPath parameter has to be provided!');
watchEndpoint(newValue, oldValue) {
if (newValue && newValue != oldValue && this.cmsEndpoint && this.language && (this.postCustomPath || this.postSlug || this.postId)) {
this.getBlogArticleDetails();
}
}
this.isLoading = true;
let url = new URL(`${this.cmsEndpoint}/${this.language}/blog-posts${this.postCustomPath ? '' : '/' + this.postSlug || '/' + this.postId}`);
url.searchParams.append('env', this.cmsEnv);
url.searchParams.append('userRoles', this.userRoles);
url.searchParams.append('device', getDevicePlatform());
if (this.postCustomPath) {
url.searchParams.append('customURL', this.postCustomPath);
handleStylingChange(newValue, oldValue) {
if (newValue !== oldValue)
this.setClientStyling();
}
fetch(url.href)
.then((res) => {
if (res.status >= 300) {
this.hasErrors = true;
throw new Error('There was an error while fetching the data');
}
return res.json();
})
.then((blogContent) => {
if (blogContent.count >= 1 && this.postCustomPath) {
let firstBlogPublishDate = new Date(blogContent.items[0].publishingDate);
let indexOfLatestPublished = 0;
for (let i = 1; i < blogContent.items.length; i++) {
const blogDate = new Date(blogContent.items[i].publishingDate);
if (firstBlogPublishDate.getTime() < blogDate.getTime()) {
firstBlogPublishDate = blogDate;
indexOfLatestPublished = i;
}
handleStylingUrlChange(newValue, oldValue) {
if (newValue !== oldValue)
this.setClientStylingURL();
}
connectedCallback() {
if (this.cmsEndpoint && this.language && (this.postCustomPath || this.postSlug || this.postId)) {
this.getBlogArticleDetails();
}
this.blogData = blogContent.items[indexOfLatestPublished];
}
else {
this.blogData = blogContent;
}
this.isLoading = false;
})
.catch((err) => {
this.hasErrors = true;
console.log('Error', err);
})
.finally(() => this.isLoading = false);
}
componentDidRender() {
// start custom styling area
if (!this.limitStylingAppends && this.stylingContainer) {
if (this.clientStyling)
this.setClientStyling();
if (this.clientStylingUrl)
this.setClientStylingURL();
this.limitStylingAppends = true;
}
// end custom styling area
}
componentDidLoad() {
this.detectAndAlertDeviceType();
}
detectAndAlertDeviceType() {
this.device = getDeviceCustom();
}
formatDate(dateString) {
return new Intl.DateTimeFormat(this.intlDateTimeFormat || 'en-GB').format(new Date(dateString));
}
render() {
var _a, _b, _c, _d, _e;
if (this.hasErrors) {
return (h("div", { class: "BlogArticleDetails" }, h("div", { class: "Title" }, translate('error', this.language))));
getBlogArticleDetails() {
if (!this.postId && !this.postSlug && !this.postCustomPath) {
this.hasErrors = true;
throw new Error('postId, postSlug or postCustomPath parameter has to be provided!');
}
this.isLoading = true;
let url = new URL(`${this.cmsEndpoint}/${this.language}/blog-posts${this.postCustomPath ? '' : '/' + this.postSlug || '/' + this.postId}`);
url.searchParams.append('env', this.cmsEnv);
url.searchParams.append('userRoles', this.userRoles);
url.searchParams.append('device', getDevicePlatform());
if (this.postCustomPath) {
url.searchParams.append('customURL', this.postCustomPath);
}
fetch(url.href)
.then((res) => {
if (res.status >= 300) {
this.hasErrors = true;
throw new Error('There was an error while fetching the data');
}
return res.json();
})
.then((blogContent) => {
if (blogContent.count >= 1 && this.postCustomPath) {
let firstBlogPublishDate = new Date(blogContent.items[0].publishingDate);
let indexOfLatestPublished = 0;
for (let i = 1; i < blogContent.items.length; i++) {
const blogDate = new Date(blogContent.items[i].publishingDate);
if (firstBlogPublishDate.getTime() < blogDate.getTime()) {
firstBlogPublishDate = blogDate;
indexOfLatestPublished = i;
}
}
this.blogData = blogContent.items[indexOfLatestPublished];
}
else {
this.blogData = blogContent;
}
this.isLoading = false;
})
.catch((err) => {
this.hasErrors = true;
console.log('Error', err);
})
.finally(() => this.isLoading = false);
}
if (!this.isLoading) {
return (h("div", { ref: el => this.stylingContainer = el }, h("div", { class: "DetailsContainer" }, h("div", { class: "DetailsHeadWrapper" }, this.showPublishingDate && this.blogData.publishingDate &&
h("div", { class: "BlogDate" }, this.formatDate((_a = this.blogData) === null || _a === void 0 ? void 0 : _a.publishingDate)), this.showImage && (h("div", { class: "BlogBanner" }, ((_b = this.blogData.image) === null || _b === void 0 ? void 0 : _b.src) ? (h("div", { style: { background: `url(${this.setImage(this.blogData.image)}) no-repeat center center / cover` } })) : (((_c = this.blogData.video) === null || _c === void 0 ? void 0 : _c.sources[this.device]) ? (h("video", { src: this.blogData.video.sources[this.device], controls: true })) : (h("h1", { style: { color: "white" } }, "No Image")))))), h("div", { class: "DetailsBodyWrapper" }, this.showTitle &&
h("div", { class: "BlogTitle" }, (_d = this.blogData) === null || _d === void 0 ? void 0 : _d.title), this.showContent && this.renderContentConditionally((_e = this.blogData) === null || _e === void 0 ? void 0 : _e.content)))));
componentDidRender() {
// start custom styling area
if (!this.limitStylingAppends && this.stylingContainer) {
if (this.clientStyling)
this.setClientStyling();
if (this.clientStylingUrl)
this.setClientStylingURL();
this.limitStylingAppends = true;
}
// end custom styling area
}
}
static get watchers() { return {
"postId": ["watchEndpoint"],
"postSlug": ["watchEndpoint"],
"postCustomPath": ["watchEndpoint"],
"cmsEndpoint": ["watchEndpoint"],
"language": ["watchEndpoint"],
"clientStyling": ["handleStylingChange"],
"clientStylingUrl": ["handleStylingUrlChange"]
}; }
componentDidLoad() {
this.detectAndAlertDeviceType();
}
detectAndAlertDeviceType() {
this.device = getDeviceCustom();
}
formatDate(dateString) {
return new Intl.DateTimeFormat(this.intlDateTimeFormat || 'en-GB').format(new Date(dateString));
}
render() {
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: "DetailsContainer" }, h("div", { class: "DetailsHeadWrapper" }, this.showPublishingDate && this.blogData.publishingDate &&
h("div", { class: "BlogDate" }, this.formatDate((_a = this.blogData) === null || _a === void 0 ? void 0 : _a.publishingDate)), this.showImage && (h("div", { class: "BlogBanner" }, ((_b = this.blogData.image) === null || _b === void 0 ? void 0 : _b.src) ? (h("div", { style: { background: `url(${this.setImage(this.blogData.image)}) no-repeat center center / cover` } })) : (((_c = this.blogData.video) === null || _c === void 0 ? void 0 : _c.sources[this.device]) ? (h("video", { src: this.blogData.video.sources[this.device], controls: true })) : (h("h1", { style: { color: "white" } }, "No Image")))))), h("div", { class: "DetailsBodyWrapper" }, this.showTitle &&
h("div", { class: "BlogTitle" }, (_d = this.blogData) === null || _d === void 0 ? void 0 : _d.title), this.showContent && this.renderContentConditionally((_e = this.blogData) === null || _e === void 0 ? void 0 : _e.content)))));
}
}
static get watchers() { return {
"postId": ["watchEndpoint"],
"postSlug": ["watchEndpoint"],
"postCustomPath": ["watchEndpoint"],
"cmsEndpoint": ["watchEndpoint"],
"language": ["watchEndpoint"],
"clientStyling": ["handleStylingChange"],
"clientStylingUrl": ["handleStylingUrlChange"]
}; }
};
BlogArticleDetails.style = blogArticleDetailsCss;
BlogArticleDetails.style = BlogArticleDetailsStyle0;
export { BlogArticleDetails as blog_article_details };

@@ -1,17 +0,20 @@

import { p as promiseResolve, b as bootstrapLazy } from './index-a6d43dfd.js';
import { p as promiseResolve, b as bootstrapLazy } from './index-9d94198d.js';
export { s as setNonce } from './index-9d94198d.js';
import { g as globalScripts } from './app-globals-0f993ce5.js';
/*
Stencil Client Patch Browser v2.15.2 | MIT Licensed | https://stenciljs.com
Stencil Client Patch Browser v4.20.0 | MIT Licensed | https://stenciljs.com
*/
const patchBrowser = () => {
const importMeta = import.meta.url;
const opts = {};
if (importMeta !== '') {
opts.resourcesUrl = new URL('.', importMeta).href;
}
return promiseResolve(opts);
var patchBrowser = () => {
const importMeta = import.meta.url;
const opts = {};
if (importMeta !== "") {
opts.resourcesUrl = new URL(".", importMeta).href;
}
return promiseResolve(opts);
};
patchBrowser().then(options => {
return bootstrapLazy([["blog-article-details",[[1,"blog-article-details",{"cmsEndpoint":[513,"cms-endpoint"],"language":[513],"userRoles":[513,"user-roles"],"cmsEnv":[513,"cms-env"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"showPublishingDate":[516,"show-publishing-date"],"showImage":[516,"show-image"],"showTitle":[516,"show-title"],"showContent":[516,"show-content"],"postId":[514,"post-id"],"postSlug":[513,"post-slug"],"postCustomPath":[513,"post-custom-path"],"intlDateTimeFormat":[1,"intl-date-time-format"],"hasErrors":[32],"limitStylingAppends":[32],"isLoading":[32],"bannerMatrixReady":[32],"device":[32]},[[8,"BannerMatrixReady","handleBannerReady"]]]]]], options);
patchBrowser().then(async (options) => {
await globalScripts();
return bootstrapLazy([["blog-article-details",[[1,"blog-article-details",{"cmsEndpoint":[513,"cms-endpoint"],"language":[513],"userRoles":[513,"user-roles"],"cmsEnv":[513,"cms-env"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"showPublishingDate":[516,"show-publishing-date"],"showImage":[516,"show-image"],"showTitle":[516,"show-title"],"showContent":[516,"show-content"],"postId":[514,"post-id"],"postSlug":[513,"post-slug"],"postCustomPath":[513,"post-custom-path"],"intlDateTimeFormat":[1,"intl-date-time-format"],"hasErrors":[32],"limitStylingAppends":[32],"isLoading":[32],"bannerMatrixReady":[32],"device":[32]},[[8,"BannerMatrixReady","handleBannerReady"]],{"postId":["watchEndpoint"],"postSlug":["watchEndpoint"],"postCustomPath":["watchEndpoint"],"cmsEndpoint":["watchEndpoint"],"language":["watchEndpoint"],"clientStyling":["handleStylingChange"],"clientStylingUrl":["handleStylingUrlChange"]}]]]], options);
});

@@ -1,17 +0,11 @@

import { p as promiseResolve, b as bootstrapLazy } from './index-a6d43dfd.js';
import { b as bootstrapLazy } from './index-9d94198d.js';
export { s as setNonce } from './index-9d94198d.js';
import { g as globalScripts } from './app-globals-0f993ce5.js';
/*
Stencil Client Patch Esm v2.15.2 | MIT Licensed | https://stenciljs.com
*/
const patchEsm = () => {
return promiseResolve();
const defineCustomElements = async (win, options) => {
if (typeof window === 'undefined') return undefined;
await globalScripts();
return bootstrapLazy([["blog-article-details",[[1,"blog-article-details",{"cmsEndpoint":[513,"cms-endpoint"],"language":[513],"userRoles":[513,"user-roles"],"cmsEnv":[513,"cms-env"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"showPublishingDate":[516,"show-publishing-date"],"showImage":[516,"show-image"],"showTitle":[516,"show-title"],"showContent":[516,"show-content"],"postId":[514,"post-id"],"postSlug":[513,"post-slug"],"postCustomPath":[513,"post-custom-path"],"intlDateTimeFormat":[1,"intl-date-time-format"],"hasErrors":[32],"limitStylingAppends":[32],"isLoading":[32],"bannerMatrixReady":[32],"device":[32]},[[8,"BannerMatrixReady","handleBannerReady"]],{"postId":["watchEndpoint"],"postSlug":["watchEndpoint"],"postCustomPath":["watchEndpoint"],"cmsEndpoint":["watchEndpoint"],"language":["watchEndpoint"],"clientStyling":["handleStylingChange"],"clientStylingUrl":["handleStylingUrlChange"]}]]]], options);
};
const defineCustomElements = (win, options) => {
if (typeof window === 'undefined') return Promise.resolve();
return patchEsm().then(() => {
return bootstrapLazy([["blog-article-details",[[1,"blog-article-details",{"cmsEndpoint":[513,"cms-endpoint"],"language":[513],"userRoles":[513,"user-roles"],"cmsEnv":[513,"cms-env"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"showPublishingDate":[516,"show-publishing-date"],"showImage":[516,"show-image"],"showTitle":[516,"show-title"],"showContent":[516,"show-content"],"postId":[514,"post-id"],"postSlug":[513,"post-slug"],"postCustomPath":[513,"post-custom-path"],"intlDateTimeFormat":[1,"intl-date-time-format"],"hasErrors":[32],"limitStylingAppends":[32],"isLoading":[32],"bannerMatrixReady":[32],"device":[32]},[[8,"BannerMatrixReady","handleBannerReady"]]]]]], options);
});
};
export { defineCustomElements };

@@ -1,22 +0,17 @@

import { sass } from '@stencil/sass';
import { sass } from "@stencil/sass";
export const config = {
namespace: 'blog-article-details',
taskQueue: 'async',
plugins: [sass()],
outputTargets: [
{
type: 'dist',
esmLoaderPath: '../loader',
namespace: 'blog-article-details',
taskQueue: 'async',
sourceMap: false,
minifyJs: true,
extras: {
experimentalImportInjection: true
},
{
type: 'dist-custom-elements',
},
{
type: 'docs-readme',
},
{
type: 'www',
serviceWorker: null, // disable service workers
},
],
plugins: [sass()],
outputTargets: [
{
type: 'dist',
esmLoaderPath: '../loader'
}
]
};
export declare class BlogArticleDetails {
/**
* Endpoint URL for the source of data
*/
cmsEndpoint: string;
/**
* Language of the widget
*/
language: string;
/**
* User roles
*/
userRoles: string;
/**
* CMS Endpoint stage
*/
cmsEnv: string;
/**
* Client custom styling via string
*/
clientStyling: string;
/**
* Client custom styling via url
*/
clientStylingUrl: string;
/**
* Property used to display the publishing date
*/
showPublishingDate: boolean;
/**
* Property used to display the image
*/
showImage: boolean;
/**
* Property used to display the image
*/
showTitle: boolean;
/**
* Property used to display the description
*/
showContent: boolean;
/**
* Showing post ID parameter
*/
postId: number;
/**
* Slug of post
*/
postSlug: string;
/**
* Custom Path of post
*/
postCustomPath: string;
/**
* Intl date format
*/
intlDateTimeFormat: string;
private hasErrors;
private limitStylingAppends;
private isLoading;
bannerMatrixReady: boolean;
device: string;
handleBannerReady(): void;
watchEndpoint(newValue: string, oldValue: string): void;
handleStylingChange(newValue: string, oldValue: string): void;
handleStylingUrlChange(newValue: string, oldValue: string): void;
private stylingContainer;
private blogData;
connectedCallback(): void;
getBlogArticleDetails(): void;
componentDidRender(): void;
componentDidLoad(): void;
detectAndAlertDeviceType(): void;
setClientStyling: () => void;
setClientStylingURL: () => void;
formatDate(dateString: any): string;
renderContentConditionally: (content: string) => HTMLElement;
setImage: (image: any) => string;
render(): void;
/**
* Endpoint URL for the source of data
*/
cmsEndpoint: string;
/**
* Language of the widget
*/
language: string;
/**
* User roles
*/
userRoles: string;
/**
* CMS Endpoint stage
*/
cmsEnv: string;
/**
* Client custom styling via string
*/
clientStyling: string;
/**
* Client custom styling via url
*/
clientStylingUrl: string;
/**
* Property used to display the publishing date
*/
showPublishingDate: boolean;
/**
* Property used to display the image
*/
showImage: boolean;
/**
* Property used to display the image
*/
showTitle: boolean;
/**
* Property used to display the description
*/
showContent: boolean;
/**
* Showing post ID parameter
*/
postId: number;
/**
* Slug of post
*/
postSlug: string;
/**
* Custom Path of post
*/
postCustomPath: string;
/**
* Intl date format
*/
intlDateTimeFormat: string;
private hasErrors;
private limitStylingAppends;
private isLoading;
bannerMatrixReady: boolean;
device: string;
handleBannerReady(): void;
watchEndpoint(newValue: string, oldValue: string): void;
handleStylingChange(newValue: string, oldValue: string): void;
handleStylingUrlChange(newValue: string, oldValue: string): void;
private stylingContainer;
private blogData;
connectedCallback(): void;
getBlogArticleDetails(): void;
componentDidRender(): void;
componentDidLoad(): void;
detectAndAlertDeviceType(): void;
setClientStyling: () => void;
setClientStylingURL: () => void;
formatDate(dateString: any): string;
renderContentConditionally: (content: string) => HTMLElement;
setImage: (image: any) => string;
render(): void;
}

@@ -7,2 +7,12 @@ declare type CustomMethodDecorator<T> = (target: Object, propertyKey: string | symbol, descriptor: TypedPropertyDescriptor<T>) => TypedPropertyDescriptor<T> | void;

/**
* When set to `true` this component will be form-associated. See
* https://stenciljs.com/docs/next/form-associated documentation on how to
* build form-associated Stencil components that integrate into forms like
* native browser elements such as `<input>` and `<textarea>`.
*
* The {@link AttachInternals} decorator allows for access to the
* `ElementInternals` object to modify the associated form.
*/
formAssociated?: boolean;
/**
* Tag name of the web component. Ideally, the tag name must be globally unique,

@@ -66,3 +76,3 @@ * so it's recommended to choose an unique prefix for all your components within the same collection.

* Stencil uses different heuristics to determine the default name of the attribute,
* but using this property, you can override the default behaviour.
* but using this property, you can override the default behavior.
*/

@@ -112,2 +122,5 @@ attribute?: string | null;

}
export interface AttachInternalsDecorator {
(): PropertyDecorator;
}
export interface ListenDecorator {

@@ -134,3 +147,3 @@ (eventName: string, opts?: ListenOptions): CustomMethodDecorator<any>;

*
* Using the `passive` option can be used to change the default behaviour.
* Using the `passive` option can be used to change the default behavior.
* Please see https://developers.google.com/web/updates/2016/06/passive-event-listeners for further information.

@@ -140,3 +153,3 @@ */

}
export declare type ListenTargetOptions = 'body' | 'document' | 'window';
export type ListenTargetOptions = 'body' | 'document' | 'window';
export interface StateDecorator {

@@ -184,2 +197,8 @@ (): PropertyDecorator;

/**
* If the `formAssociated` option is set in options passed to the
* `@Component()` decorator then this decorator may be used to get access to the
* `ElementInternals` instance associated with the component.
*/
export declare const AttachInternals: AttachInternalsDecorator;
/**
* The `Listen()` decorator is for listening DOM events, including the ones

@@ -223,4 +242,4 @@ * dispatched from `@Events()`.

export declare const Watch: WatchDecorator;
export declare type ResolutionHandler = (elm: HTMLElement) => string | undefined | null;
export declare type ErrorHandler = (err: any, element?: HTMLElement) => void;
export type ResolutionHandler = (elm: HTMLElement) => string | undefined | null;
export type ErrorHandler = (err: any, element?: HTMLElement) => void;
/**

@@ -231,3 +250,5 @@ * `setMode()` is used for libraries which provide multiple "modes" for styles.

/**
* getMode
* `getMode()` is used for libraries which provide multiple "modes" for styles.
* @param ref a reference to the node to get styles for
* @returns the current mode or undefined, if not found
*/

@@ -245,2 +266,5 @@ export declare function getMode<T = string | undefined>(ref: any): T;

* if the path needs to be customized.
* @param path the path to use in calculating the asset path. this value will be
* used in conjunction with the base asset path
* @returns the base path
*/

@@ -258,9 +282,22 @@ export declare function getAssetPath(path: string): string;

* But do note that this configuration depends on how your script is bundled, or lack of
* bunding, and where your assets can be loaded from. Additionally custom bundling
* bundling, and where your assets can be loaded from. Additionally custom bundling
* will have to ensure the static assets are copied to its build directory.
* @param path the asset path to set
* @returns the set path
*/
export declare function setAssetPath(path: string): string;
/**
* getElement
* Used to specify a nonce value that corresponds with an application's
* [Content Security Policy (CSP)](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP).
* When set, the nonce will be added to all dynamically created script and style tags at runtime.
* Alternatively, the nonce value can be set on a `meta` tag in the DOM head
* (<meta name="csp-nonce" content="{ nonce value here }" />) and will result in the same behavior.
* @param nonce The value to be used for the nonce attribute.
*/
export declare function setNonce(nonce: string): void;
/**
* Retrieve a Stencil element for a given reference
* @param ref the ref to get the Stencil element for
* @returns a reference to the element
*/
export declare function getElement(ref: any): HTMLStencilElement;

@@ -270,3 +307,5 @@ /**

*
* Notice `forceUpdate()` is not syncronous and might perform the DOM render in the next frame.
* Notice `forceUpdate()` is not synchronous and might perform the DOM render in the next frame.
*
* @param ref the node/element to force the re-render of
*/

@@ -276,2 +315,3 @@ export declare function forceUpdate(ref: any): void;

* getRenderingRef
* @returns the rendering ref
*/

@@ -287,2 +327,4 @@ export declare function getRenderingRef(): any;

* For further information: https://developers.google.com/web/fundamentals/performance/rendering/avoid-large-complex-layouts-and-layout-thrashing
*
* @param task the DOM-write to schedule
*/

@@ -295,2 +337,4 @@ export declare function writeTask(task: RafCallback): void;

* For further information: https://developers.google.com/web/fundamentals/performance/rendering/avoid-large-complex-layouts-and-layout-thrashing
*
* @param task the DOM-read to schedule
*/

@@ -424,3 +468,3 @@ export declare function readTask(task: RafCallback): void;

*/
interface HostAttributes {
export interface HostAttributes {
class?: string | {

@@ -435,4 +479,40 @@ [className: string]: boolean;

}
/**
* Utilities for working with functional Stencil components. An object
* conforming to this interface is passed by the Stencil runtime as the third
* argument to a functional component, allowing component authors to work with
* features like children.
*
* The children of a functional component will be passed as the second
* argument, so a functional component which uses these utils to transform its
* children might look like the following:
*
* ```ts
* export const AddClass: FunctionalComponent = (_, children, utils) => (
* utils.map(children, child => ({
* ...child,
* vattrs: {
* ...child.vattrs,
* class: `${child.vattrs.class} add-class`
* }
* }))
* );
* ```
*
* For more see the Stencil documentation, here:
* https://stenciljs.com/docs/functional-components
*/
export interface FunctionalUtilities {
/**
* Utility for reading the children of a functional component at runtime.
* Since the Stencil runtime uses a different interface for children it is
* not recommended to read the children directly, and is preferable to use
* this utility to, for instance, perform a side effect for each child.
*/
forEach: (children: VNode[], cb: (vnode: ChildNode, index: number, array: ChildNode[]) => void) => void;
/**
* Utility for transforming the children of a functional component. Given an
* array of children and a callback this will return a list of the results of
* passing each child to the supplied callback.
*/
map: (children: VNode[], cb: (vnode: ChildNode, index: number, array: ChildNode[]) => ChildNode) => VNode[];

@@ -443,2 +523,10 @@ }

}
/**
* A Child VDOM node
*
* This has most of the same properties as {@link VNode} but friendlier names
* (i.e. `vtag` instead of `$tag$`, `vchildren` instead of `$children$`) in
* order to provide a friendlier public interface for users of the
* {@link FunctionalUtilities}).
*/
export interface ChildNode {

@@ -490,2 +578,5 @@ vtag?: string | number | Function;

export declare function h(sel: any, data: VNodeData | null, children: VNode): VNode;
/**
* A virtual DOM node
*/
export interface VNode {

@@ -698,2 +789,3 @@ $flags$: number;

media?: string;
ping?: string;
rel?: string;

@@ -725,3 +817,2 @@ target?: string;

interface ButtonHTMLAttributes<T> extends HTMLAttributes<T> {
autoFocus?: boolean;
disabled?: boolean;

@@ -742,2 +833,5 @@ form?: string;

value?: string | string[] | number;
popoverTargetAction?: string;
popoverTargetElement?: Element | null;
popoverTarget?: string;
}

@@ -764,2 +858,3 @@ interface CanvasHTMLAttributes<T> extends HTMLAttributes<T> {

interface DialogHTMLAttributes<T> extends HTMLAttributes<T> {
onCancel?: (event: Event) => void;
onClose?: (event: Event) => void;

@@ -824,2 +919,4 @@ open?: boolean;

alt?: string;
crossOrigin?: string;
crossorigin?: string;
decoding?: 'async' | 'auto' | 'sync';

@@ -846,8 +943,6 @@ importance?: 'low' | 'auto' | 'high';

alt?: string;
autoCapitalize?: any;
autocapitalize?: any;
autoCapitalize?: string;
autocapitalize?: string;
autoComplete?: string;
autocomplete?: string;
autoFocus?: boolean;
autofocus?: boolean | string;
capture?: string;

@@ -884,2 +979,4 @@ checked?: boolean;

name?: string;
onSelect?: (event: Event) => void;
onselect?: (event: Event) => void;
pattern?: string;

@@ -903,6 +1000,7 @@ placeholder?: string;

width?: number | string;
popoverTargetAction?: string;
popoverTargetElement?: Element | null;
popoverTarget?: string;
}
interface KeygenHTMLAttributes<T> extends HTMLAttributes<T> {
autoFocus?: boolean;
autofocus?: boolean | string;
challenge?: string;

@@ -920,3 +1018,2 @@ disabled?: boolean;

htmlFor?: string;
htmlfor?: string;
}

@@ -1032,3 +1129,2 @@ interface LiHTMLAttributes<T> extends HTMLAttributes<T> {

htmlFor?: string;
htmlfor?: string;
name?: string;

@@ -1058,3 +1154,2 @@ }

interface SelectHTMLAttributes<T> extends HTMLAttributes<T> {
autoFocus?: boolean;
disabled?: boolean;

@@ -1070,2 +1165,3 @@ form?: string;

interface SourceHTMLAttributes<T> extends HTMLAttributes<T> {
height?: number;
media?: string;

@@ -1076,2 +1172,3 @@ sizes?: string;

type?: string;
width?: number;
}

@@ -1092,4 +1189,4 @@ interface StyleHTMLAttributes<T> extends HTMLAttributes<T> {

interface TextareaHTMLAttributes<T> extends HTMLAttributes<T> {
autoFocus?: boolean;
autofocus?: boolean | string;
autoComplete?: string;
autocomplete?: string;
cols?: number;

@@ -1103,2 +1200,4 @@ disabled?: boolean;

name?: string;
onSelect?: (event: Event) => void;
onselect?: (event: Event) => void;
placeholder?: string;

@@ -1146,2 +1245,4 @@ readOnly?: boolean;

accessKey?: string;
autoFocus?: boolean;
autofocus?: boolean | string;
class?: string | {

@@ -1158,2 +1259,3 @@ [className: string]: boolean;

id?: string;
inert?: boolean;
lang?: string;

@@ -1167,2 +1269,3 @@ spellcheck?: 'true' | 'false' | any;

title?: string;
popover?: string | null;
inputMode?: string;

@@ -1184,4 +1287,4 @@ inputmode?: string;

vocab?: string;
autoCapitalize?: any;
autocapitalize?: any;
autoCapitalize?: string;
autocapitalize?: string;
autoCorrect?: string;

@@ -1254,3 +1357,3 @@ autocorrect?: string;

'color-interpolation'?: number | string;
'color-interpolation-filters'?: 'auto' | 's-rGB' | 'linear-rGB' | 'inherit';
'color-interpolation-filters'?: 'auto' | 'sRGB' | 'linearRGB';
'color-profile'?: number | string;

@@ -1478,8 +1581,8 @@ 'color-rendering'?: number | string;

onPasteCapture?: (event: ClipboardEvent) => void;
onCompositionEnd?: (event: CompositionEvent) => void;
onCompositionEndCapture?: (event: CompositionEvent) => void;
onCompositionStart?: (event: CompositionEvent) => void;
onCompositionStartCapture?: (event: CompositionEvent) => void;
onCompositionUpdate?: (event: CompositionEvent) => void;
onCompositionUpdateCapture?: (event: CompositionEvent) => void;
onCompositionend?: (event: CompositionEvent) => void;
onCompositionendCapture?: (event: CompositionEvent) => void;
onCompositionstart?: (event: CompositionEvent) => void;
onCompositionstartCapture?: (event: CompositionEvent) => void;
onCompositionupdate?: (event: CompositionEvent) => void;
onCompositionupdateCapture?: (event: CompositionEvent) => void;
onFocus?: (event: FocusEvent) => void;

@@ -1495,4 +1598,4 @@ onFocusCapture?: (event: FocusEvent) => void;

onChangeCapture?: (event: Event) => void;
onInput?: (event: Event) => void;
onInputCapture?: (event: Event) => void;
onInput?: (event: InputEvent) => void;
onInputCapture?: (event: InputEvent) => void;
onReset?: (event: Event) => void;

@@ -1587,4 +1690,10 @@ onResetCapture?: (event: Event) => void;

onAnimationIterationCapture?: (event: AnimationEvent) => void;
onTransitionCancel?: (event: TransitionEvent) => void;
onTransitionCancelCapture?: (event: TransitionEvent) => void;
onTransitionEnd?: (event: TransitionEvent) => void;
onTransitionEndCapture?: (event: TransitionEvent) => void;
onTransitionRun?: (event: TransitionEvent) => void;
onTransitionRunCapture?: (event: TransitionEvent) => void;
onTransitionStart?: (event: TransitionEvent) => void;
onTransitionStartCapture?: (event: TransitionEvent) => void;
}

@@ -1591,0 +1700,0 @@ }

@@ -1,3 +0,1 @@

module.exports = require('../dist/cjs/loader.cjs.js');
module.exports.applyPolyfills = function() { return Promise.resolve() };
module.exports = require('../dist/cjs/loader.cjs.js');

@@ -1,3 +0,1 @@

module.exports = require('../dist/cjs/loader.cjs.js');
module.exports.applyPolyfills = function() { return Promise.resolve() };
module.exports = require('../dist/cjs/loader.cjs.js');

@@ -11,3 +11,15 @@ export * from '../dist/types/components';

}
export declare function defineCustomElements(win?: Window, opts?: CustomElementsDefineOptions): Promise<void>;
export declare function defineCustomElements(win?: Window, opts?: CustomElementsDefineOptions): void;
/**
* @deprecated
*/
export declare function applyPolyfills(): Promise<void>;
/**
* Used to specify a nonce value that corresponds with an application's CSP.
* When set, the nonce will be added to all dynamically created script and style tags at runtime.
* Alternatively, the nonce value can be set on a meta tag in the DOM head
* (<meta name="csp-nonce" content="{ nonce value here }" />) which
* will result in the same behavior.
*/
export declare function setNonce(nonce: string): void;

@@ -1,3 +0,1 @@

export * from '../dist/esm/polyfills/index.js';
export * from '../dist/esm/loader.js';
export * from '../dist/esm/loader.js';

@@ -1,4 +0,2 @@

(function(){if("undefined"!==typeof window&&void 0!==window.Reflect&&void 0!==window.customElements){var a=HTMLElement;window.HTMLElement=function(){return Reflect.construct(a,[],this.constructor)};HTMLElement.prototype=a.prototype;HTMLElement.prototype.constructor=HTMLElement;Object.setPrototypeOf(HTMLElement,a)}})();
export * from '../dist/esm/polyfills/index.js';
export * from '../dist/esm/loader.js';
export * from '../dist/esm/loader.js';
{
"name": "blog-article-details-loader",
"private": true,
"typings": "./index.d.ts",

@@ -4,0 +5,0 @@ "module": "./index.js",

{
"name": "@everymatrix/blog-article-details",
"version": "1.44.0",
"version": "1.45.0",
"main": "./dist/index.cjs.js",

@@ -12,2 +12,9 @@ "module": "./dist/index.js",

"unpkg": "./dist/blog-article-details/blog-article-details.esm.js",
"exports": {
".": {
"import": "./dist/esm/blog-article-details.js",
"require": "./dist/cjs/blog-article-details.cjs"
},
"./dist/cjs/blog-article-details.cjs.js": "./dist/cjs/blog-article-details.cjs.js"
},
"files": [

@@ -19,8 +26,3 @@ "dist/",

"access": "public"
},
"dependencies": {
"@everymatrix/helper-modal": "^1.32.4",
"@stencil/core": "2.17.4"
}
}
SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc