@everymatrix/blog-article-details
Advanced tools
Comparing version 1.44.0 to 1.45.0
@@ -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" | ||
} | ||
} |
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
Dynamic require
Supply chain riskDynamic require can indicate the package is performing dangerous or unsafe dynamic code execution.
Found 1 instance in 1 package
0
9
225534
44
5675
3
- Removed@everymatrix/helper-modal@^1.32.4
- Removed@stencil/core@2.17.4
- Removed@everymatrix/helper-modal@1.50.1(transitive)
- Removed@stencil/core@2.17.4(transitive)