@everymatrix/blog-article-details 1.34.2 → 1.34.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (48) hide show
  1. package/LICENSE +21 -0
  2. package/package.json +1 -1
  3. package/dist/blog-article-details/blog-article-details.esm.js +0 -1
  4. package/dist/blog-article-details/index.esm.js +0 -0
  5. package/dist/blog-article-details/p-68e0210a.js +0 -1
  6. package/dist/blog-article-details/p-6ad174c5.entry.js +0 -1
  7. package/dist/cjs/blog-article-details.cjs.entry.js +0 -274
  8. package/dist/cjs/blog-article-details.cjs.js +0 -19
  9. package/dist/cjs/index-d983d0f8.js +0 -1255
  10. package/dist/cjs/index.cjs.js +0 -2
  11. package/dist/cjs/loader.cjs.js +0 -21
  12. package/dist/collection/collection-manifest.json +0 -12
  13. package/dist/collection/components/blog-article-details/blog-article-details.css +0 -47
  14. package/dist/collection/components/blog-article-details/blog-article-details.js +0 -482
  15. package/dist/collection/index.js +0 -1
  16. package/dist/collection/utils/locale.utils.js +0 -29
  17. package/dist/collection/utils/utils.js +0 -59
  18. package/dist/components/blog-article-details.d.ts +0 -11
  19. package/dist/components/blog-article-details.js +0 -308
  20. package/dist/components/index.d.ts +0 -26
  21. package/dist/components/index.js +0 -1
  22. package/dist/esm/blog-article-details.entry.js +0 -270
  23. package/dist/esm/blog-article-details.js +0 -17
  24. package/dist/esm/index-a6d43dfd.js +0 -1230
  25. package/dist/esm/index.js +0 -1
  26. package/dist/esm/loader.js +0 -17
  27. package/dist/esm/polyfills/core-js.js +0 -11
  28. package/dist/esm/polyfills/css-shim.js +0 -1
  29. package/dist/esm/polyfills/dom.js +0 -79
  30. package/dist/esm/polyfills/es5-html-element.js +0 -1
  31. package/dist/esm/polyfills/index.js +0 -34
  32. package/dist/esm/polyfills/system.js +0 -6
  33. package/dist/index.cjs.js +0 -1
  34. package/dist/index.js +0 -1
  35. package/dist/stencil.config.js +0 -22
  36. package/dist/types/Users/dragos.bodea/Documents/everymatrix-prjs/emfe-widgets/widgets-stencil/packages/blog-article-details/.stencil/packages/blog-article-details/stencil.config.d.ts +0 -2
  37. package/dist/types/components/blog-article-details/blog-article-details.d.ts +0 -78
  38. package/dist/types/components.d.ts +0 -149
  39. package/dist/types/index.d.ts +0 -1
  40. package/dist/types/stencil-public-runtime.d.ts +0 -1565
  41. package/dist/types/utils/locale.utils.d.ts +0 -1
  42. package/dist/types/utils/utils.d.ts +0 -4
  43. package/loader/cdn.js +0 -3
  44. package/loader/index.cjs.js +0 -3
  45. package/loader/index.d.ts +0 -12
  46. package/loader/index.es2017.js +0 -3
  47. package/loader/index.js +0 -4
  48. package/loader/package.json +0 -10
@@ -1,308 +0,0 @@
1
- import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
2
-
3
- const DEFAULT_LANGUAGE = 'en';
4
- const SUPPORTED_LANGUAGES = ['ro', 'en', 'fr', 'ar', 'hr'];
5
- const TRANSLATIONS = {
6
- en: {
7
- error: 'Error',
8
- },
9
- ro: {
10
- error: 'Eroare',
11
- },
12
- fr: {
13
- error: 'Error',
14
- },
15
- ar: {
16
- error: 'خطأ',
17
- },
18
- hr: {
19
- error: 'Greška',
20
- },
21
- 'pt-br': {
22
- error: 'Erro'
23
- },
24
- 'es-mx': {
25
- error: 'Error'
26
- }
27
- };
28
- const translate = (key, customLang) => {
29
- const lang = customLang;
30
- return TRANSLATIONS[lang !== undefined && SUPPORTED_LANGUAGES.includes(lang) ? lang : DEFAULT_LANGUAGE][key];
31
- };
32
-
33
- const getDevice = () => {
34
- let userAgent = window.navigator.userAgent;
35
- if (userAgent.toLowerCase().match(/android/i)) {
36
- return 'Android';
37
- }
38
- if (userAgent.toLowerCase().match(/iphone/i)) {
39
- return 'iPhone';
40
- }
41
- if (userAgent.toLowerCase().match(/ipad|ipod/i)) {
42
- return 'iPad';
43
- }
44
- return 'PC';
45
- };
46
- function checkCustomDeviceWidth() {
47
- const width = screen.availWidth;
48
- if (width < 600) {
49
- return 'mobile';
50
- }
51
- else if (width >= 600 && width < 1100) {
52
- return 'tablet';
53
- }
54
- }
55
- function getDeviceCustom() {
56
- const userAgent = navigator.userAgent.toLowerCase();
57
- let source = '';
58
- source = (userAgent.includes('android') || userAgent.includes('iphone') || userAgent.includes('ipad')) ? checkCustomDeviceWidth() : 'desktop';
59
- return source;
60
- }
61
- const getDevicePlatform = () => {
62
- const device = getDevice();
63
- if (device) {
64
- if (device === 'PC') {
65
- return 'dk';
66
- }
67
- else if (device === 'iPad' || device === 'iPhone') {
68
- return 'mtWeb';
69
- }
70
- else {
71
- return 'mtWeb';
72
- }
73
- }
74
- };
75
-
76
- 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}";
77
-
78
- const BlogArticleDetails$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
79
- constructor() {
80
- super();
81
- this.__registerHost();
82
- this.__attachShadow();
83
- /**
84
- * Language of the widget
85
- */
86
- this.language = 'en';
87
- /**
88
- * User roles
89
- */
90
- this.userRoles = 'everyone';
91
- /**
92
- * CMS Endpoint stage
93
- */
94
- this.cmsEnv = 'stage';
95
- /**
96
- * Client custom styling via string
97
- */
98
- this.clientStyling = '';
99
- /**
100
- * Client custom styling via url
101
- */
102
- this.clientStylingUrl = '';
103
- /**
104
- * Property used to display the publishing date
105
- */
106
- this.showPublishingDate = true;
107
- /**
108
- * Property used to display the image
109
- */
110
- this.showImage = true;
111
- /**
112
- * Property used to display the image
113
- */
114
- this.showTitle = true;
115
- /**
116
- * Property used to display the description
117
- */
118
- this.showContent = true;
119
- /**
120
- * Intl date format
121
- */
122
- this.intlDateTimeFormat = '';
123
- this.hasErrors = false;
124
- this.limitStylingAppends = false;
125
- this.isLoading = true;
126
- this.bannerMatrixReady = false;
127
- this.device = '';
128
- this.setClientStyling = () => {
129
- let sheet = document.createElement('style');
130
- sheet.innerHTML = this.clientStyling;
131
- this.stylingContainer.prepend(sheet);
132
- };
133
- this.setClientStylingURL = () => {
134
- let url = new URL(this.clientStylingUrl);
135
- let cssFile = document.createElement('style');
136
- fetch(url.href)
137
- .then((res) => res.text())
138
- .then((data) => {
139
- cssFile.innerHTML = data;
140
- setTimeout(() => { this.stylingContainer.prepend(cssFile); }, 1);
141
- })
142
- .catch((err) => {
143
- console.log('Error ', err);
144
- });
145
- };
146
- this.renderContentConditionally = (content) => {
147
- const hasBanner = (content === null || content === void 0 ? void 0 : content.indexOf('<bannermatrix-banner')) !== -1;
148
- if (!hasBanner) {
149
- return h("div", { class: "BlogContent", innerHTML: content });
150
- }
151
- if (this.bannerMatrixReady) {
152
- return h("div", { class: "BlogContent", innerHTML: content });
153
- }
154
- return null;
155
- };
156
- this.setImage = (image) => {
157
- let source = '';
158
- switch (this.device) {
159
- case 'mobile':
160
- source = image.sources[0].pictureSource;
161
- break;
162
- case 'tablet':
163
- source = image.sources[1].pictureSource;
164
- break;
165
- case 'desktop':
166
- source = image.sources[2].pictureSource;
167
- break;
168
- }
169
- return source;
170
- };
171
- }
172
- // Rerender when bannermatrix has finished loaded. Issue when bannermatrix passed as content from CMS.
173
- handleBannerReady() {
174
- this.bannerMatrixReady = true;
175
- }
176
- watchEndpoint(newValue, oldValue) {
177
- if (newValue && newValue != oldValue && this.cmsEndpoint && this.language && (this.postCustomPath || this.postSlug || this.postId)) {
178
- this.getBlogArticleDetails();
179
- }
180
- }
181
- connectedCallback() {
182
- if (this.cmsEndpoint && this.language && (this.postCustomPath || this.postSlug || this.postId)) {
183
- this.getBlogArticleDetails();
184
- }
185
- }
186
- getBlogArticleDetails() {
187
- if (!this.postId && !this.postSlug && !this.postCustomPath) {
188
- this.hasErrors = true;
189
- throw new Error('postId, postSlug or postCustomPath parameter has to be provided!');
190
- }
191
- this.isLoading = true;
192
- let url = new URL(`${this.cmsEndpoint}/${this.language}/blog-posts${this.postCustomPath ? '' : '/' + this.postSlug || '/' + this.postId}`);
193
- url.searchParams.append('env', this.cmsEnv);
194
- url.searchParams.append('userRoles', this.userRoles);
195
- url.searchParams.append('device', getDevicePlatform());
196
- if (this.postCustomPath) {
197
- url.searchParams.append('customURL', this.postCustomPath);
198
- }
199
- fetch(url.href)
200
- .then((res) => {
201
- if (res.status >= 300) {
202
- this.hasErrors = true;
203
- throw new Error('There was an error while fetching the data');
204
- }
205
- return res.json();
206
- })
207
- .then((blogContent) => {
208
- if (blogContent.count >= 1 && this.postCustomPath) {
209
- let firstBlogPublishDate = new Date(blogContent.items[0].publishingDate);
210
- let indexOfLatestPublished = 0;
211
- for (let i = 1; i < blogContent.items.length; i++) {
212
- const blogDate = new Date(blogContent.items[i].publishingDate);
213
- if (firstBlogPublishDate.getTime() < blogDate.getTime()) {
214
- firstBlogPublishDate = blogDate;
215
- indexOfLatestPublished = i;
216
- }
217
- }
218
- this.blogData = blogContent.items[indexOfLatestPublished];
219
- }
220
- else {
221
- this.blogData = blogContent;
222
- }
223
- this.isLoading = false;
224
- })
225
- .catch((err) => {
226
- this.hasErrors = true;
227
- console.log('Error', err);
228
- })
229
- .finally(() => this.isLoading = false);
230
- }
231
- componentDidRender() {
232
- // start custom styling area
233
- if (!this.limitStylingAppends && this.stylingContainer) {
234
- if (this.clientStyling)
235
- this.setClientStyling();
236
- if (this.clientStylingUrl)
237
- this.setClientStylingURL();
238
- this.limitStylingAppends = true;
239
- }
240
- // end custom styling area
241
- }
242
- componentDidLoad() {
243
- this.detectAndAlertDeviceType();
244
- }
245
- detectAndAlertDeviceType() {
246
- this.device = getDeviceCustom();
247
- }
248
- formatDate(dateString) {
249
- return new Intl.DateTimeFormat(this.intlDateTimeFormat || 'en-GB').format(new Date(dateString));
250
- }
251
- render() {
252
- var _a, _b, _c, _d, _e;
253
- if (this.hasErrors) {
254
- return (h("div", { class: "BlogArticleDetails" }, h("div", { class: "Title" }, translate('error', this.language))));
255
- }
256
- if (!this.isLoading) {
257
- return (h("div", { ref: el => this.stylingContainer = el }, h("div", { class: "DetailsContainer" }, h("div", { class: "DetailsHeadWrapper" }, this.showPublishingDate && this.blogData.publishingDate &&
258
- 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 &&
259
- 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)))));
260
- }
261
- }
262
- static get watchers() { return {
263
- "postId": ["watchEndpoint"],
264
- "postSlug": ["watchEndpoint"],
265
- "postCustomPath": ["watchEndpoint"],
266
- "cmsEndpoint": ["watchEndpoint"],
267
- "language": ["watchEndpoint"]
268
- }; }
269
- static get style() { return blogArticleDetailsCss; }
270
- }, [1, "blog-article-details", {
271
- "cmsEndpoint": [513, "cms-endpoint"],
272
- "language": [513],
273
- "userRoles": [513, "user-roles"],
274
- "cmsEnv": [513, "cms-env"],
275
- "clientStyling": [513, "client-styling"],
276
- "clientStylingUrl": [513, "client-styling-url"],
277
- "showPublishingDate": [516, "show-publishing-date"],
278
- "showImage": [516, "show-image"],
279
- "showTitle": [516, "show-title"],
280
- "showContent": [516, "show-content"],
281
- "postId": [514, "post-id"],
282
- "postSlug": [513, "post-slug"],
283
- "postCustomPath": [513, "post-custom-path"],
284
- "intlDateTimeFormat": [1, "intl-date-time-format"],
285
- "hasErrors": [32],
286
- "limitStylingAppends": [32],
287
- "isLoading": [32],
288
- "bannerMatrixReady": [32],
289
- "device": [32]
290
- }, [[8, "BannerMatrixReady", "handleBannerReady"]]]);
291
- function defineCustomElement$1() {
292
- if (typeof customElements === "undefined") {
293
- return;
294
- }
295
- const components = ["blog-article-details"];
296
- components.forEach(tagName => { switch (tagName) {
297
- case "blog-article-details":
298
- if (!customElements.get(tagName)) {
299
- customElements.define(tagName, BlogArticleDetails$1);
300
- }
301
- break;
302
- } });
303
- }
304
-
305
- const BlogArticleDetails = BlogArticleDetails$1;
306
- const defineCustomElement = defineCustomElement$1;
307
-
308
- export { BlogArticleDetails, defineCustomElement };
@@ -1,26 +0,0 @@
1
- /* BlogArticleDetails custom elements */
2
-
3
- import type { Components, JSX } from "../types/components";
4
-
5
- /**
6
- * Used to manually set the base path where assets can be found.
7
- * If the script is used as "module", it's recommended to use "import.meta.url",
8
- * such as "setAssetPath(import.meta.url)". Other options include
9
- * "setAssetPath(document.currentScript.src)", or using a bundler's replace plugin to
10
- * dynamically set the path at build time, such as "setAssetPath(process.env.ASSET_PATH)".
11
- * But do note that this configuration depends on how your script is bundled, or lack of
12
- * bundling, and where your assets can be loaded from. Additionally custom bundling
13
- * will have to ensure the static assets are copied to its build directory.
14
- */
15
- export declare const setAssetPath: (path: string) => void;
16
-
17
- export interface SetPlatformOptions {
18
- raf?: (c: FrameRequestCallback) => number;
19
- ael?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
20
- rel?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
21
- }
22
- export declare const setPlatformOptions: (opts: SetPlatformOptions) => void;
23
-
24
- export type { Components, JSX };
25
-
26
- export * from '../types';
@@ -1 +0,0 @@
1
- export { setAssetPath, setPlatformOptions } from '@stencil/core/internal/client';
@@ -1,270 +0,0 @@
1
- import { r as registerInstance, h } from './index-a6d43dfd.js';
2
-
3
- const DEFAULT_LANGUAGE = 'en';
4
- const SUPPORTED_LANGUAGES = ['ro', 'en', 'fr', 'ar', 'hr'];
5
- const TRANSLATIONS = {
6
- en: {
7
- error: 'Error',
8
- },
9
- ro: {
10
- error: 'Eroare',
11
- },
12
- fr: {
13
- error: 'Error',
14
- },
15
- ar: {
16
- error: 'خطأ',
17
- },
18
- hr: {
19
- error: 'Greška',
20
- },
21
- 'pt-br': {
22
- error: 'Erro'
23
- },
24
- 'es-mx': {
25
- error: 'Error'
26
- }
27
- };
28
- const translate = (key, customLang) => {
29
- const lang = customLang;
30
- return TRANSLATIONS[lang !== undefined && SUPPORTED_LANGUAGES.includes(lang) ? lang : DEFAULT_LANGUAGE][key];
31
- };
32
-
33
- const getDevice = () => {
34
- let userAgent = window.navigator.userAgent;
35
- if (userAgent.toLowerCase().match(/android/i)) {
36
- return 'Android';
37
- }
38
- if (userAgent.toLowerCase().match(/iphone/i)) {
39
- return 'iPhone';
40
- }
41
- if (userAgent.toLowerCase().match(/ipad|ipod/i)) {
42
- return 'iPad';
43
- }
44
- return 'PC';
45
- };
46
- function checkCustomDeviceWidth() {
47
- const width = screen.availWidth;
48
- if (width < 600) {
49
- return 'mobile';
50
- }
51
- else if (width >= 600 && width < 1100) {
52
- return 'tablet';
53
- }
54
- }
55
- function getDeviceCustom() {
56
- const userAgent = navigator.userAgent.toLowerCase();
57
- let source = '';
58
- source = (userAgent.includes('android') || userAgent.includes('iphone') || userAgent.includes('ipad')) ? checkCustomDeviceWidth() : 'desktop';
59
- return source;
60
- }
61
- const getDevicePlatform = () => {
62
- const device = getDevice();
63
- if (device) {
64
- if (device === 'PC') {
65
- return 'dk';
66
- }
67
- else if (device === 'iPad' || device === 'iPhone') {
68
- return 'mtWeb';
69
- }
70
- else {
71
- return 'mtWeb';
72
- }
73
- }
74
- };
75
-
76
- 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}";
77
-
78
- const BlogArticleDetails = class {
79
- constructor(hostRef) {
80
- registerInstance(this, hostRef);
81
- /**
82
- * Language of the widget
83
- */
84
- this.language = 'en';
85
- /**
86
- * User roles
87
- */
88
- this.userRoles = 'everyone';
89
- /**
90
- * CMS Endpoint stage
91
- */
92
- this.cmsEnv = 'stage';
93
- /**
94
- * Client custom styling via string
95
- */
96
- this.clientStyling = '';
97
- /**
98
- * Client custom styling via url
99
- */
100
- this.clientStylingUrl = '';
101
- /**
102
- * Property used to display the publishing date
103
- */
104
- this.showPublishingDate = true;
105
- /**
106
- * Property used to display the image
107
- */
108
- this.showImage = true;
109
- /**
110
- * Property used to display the image
111
- */
112
- this.showTitle = true;
113
- /**
114
- * Property used to display the description
115
- */
116
- this.showContent = true;
117
- /**
118
- * Intl date format
119
- */
120
- this.intlDateTimeFormat = '';
121
- this.hasErrors = false;
122
- this.limitStylingAppends = false;
123
- this.isLoading = true;
124
- this.bannerMatrixReady = false;
125
- this.device = '';
126
- this.setClientStyling = () => {
127
- let sheet = document.createElement('style');
128
- sheet.innerHTML = this.clientStyling;
129
- this.stylingContainer.prepend(sheet);
130
- };
131
- this.setClientStylingURL = () => {
132
- let url = new URL(this.clientStylingUrl);
133
- let cssFile = document.createElement('style');
134
- fetch(url.href)
135
- .then((res) => res.text())
136
- .then((data) => {
137
- cssFile.innerHTML = data;
138
- setTimeout(() => { this.stylingContainer.prepend(cssFile); }, 1);
139
- })
140
- .catch((err) => {
141
- console.log('Error ', err);
142
- });
143
- };
144
- this.renderContentConditionally = (content) => {
145
- const hasBanner = (content === null || content === void 0 ? void 0 : content.indexOf('<bannermatrix-banner')) !== -1;
146
- if (!hasBanner) {
147
- return h("div", { class: "BlogContent", innerHTML: content });
148
- }
149
- if (this.bannerMatrixReady) {
150
- return h("div", { class: "BlogContent", innerHTML: content });
151
- }
152
- return null;
153
- };
154
- this.setImage = (image) => {
155
- let source = '';
156
- switch (this.device) {
157
- case 'mobile':
158
- source = image.sources[0].pictureSource;
159
- break;
160
- case 'tablet':
161
- source = image.sources[1].pictureSource;
162
- break;
163
- case 'desktop':
164
- source = image.sources[2].pictureSource;
165
- break;
166
- }
167
- return source;
168
- };
169
- }
170
- // Rerender when bannermatrix has finished loaded. Issue when bannermatrix passed as content from CMS.
171
- handleBannerReady() {
172
- this.bannerMatrixReady = true;
173
- }
174
- watchEndpoint(newValue, oldValue) {
175
- if (newValue && newValue != oldValue && this.cmsEndpoint && this.language && (this.postCustomPath || this.postSlug || this.postId)) {
176
- this.getBlogArticleDetails();
177
- }
178
- }
179
- connectedCallback() {
180
- if (this.cmsEndpoint && this.language && (this.postCustomPath || this.postSlug || this.postId)) {
181
- this.getBlogArticleDetails();
182
- }
183
- }
184
- getBlogArticleDetails() {
185
- if (!this.postId && !this.postSlug && !this.postCustomPath) {
186
- this.hasErrors = true;
187
- throw new Error('postId, postSlug or postCustomPath parameter has to be provided!');
188
- }
189
- this.isLoading = true;
190
- let url = new URL(`${this.cmsEndpoint}/${this.language}/blog-posts${this.postCustomPath ? '' : '/' + this.postSlug || '/' + this.postId}`);
191
- url.searchParams.append('env', this.cmsEnv);
192
- url.searchParams.append('userRoles', this.userRoles);
193
- url.searchParams.append('device', getDevicePlatform());
194
- if (this.postCustomPath) {
195
- url.searchParams.append('customURL', this.postCustomPath);
196
- }
197
- fetch(url.href)
198
- .then((res) => {
199
- if (res.status >= 300) {
200
- this.hasErrors = true;
201
- throw new Error('There was an error while fetching the data');
202
- }
203
- return res.json();
204
- })
205
- .then((blogContent) => {
206
- if (blogContent.count >= 1 && this.postCustomPath) {
207
- let firstBlogPublishDate = new Date(blogContent.items[0].publishingDate);
208
- let indexOfLatestPublished = 0;
209
- for (let i = 1; i < blogContent.items.length; i++) {
210
- const blogDate = new Date(blogContent.items[i].publishingDate);
211
- if (firstBlogPublishDate.getTime() < blogDate.getTime()) {
212
- firstBlogPublishDate = blogDate;
213
- indexOfLatestPublished = i;
214
- }
215
- }
216
- this.blogData = blogContent.items[indexOfLatestPublished];
217
- }
218
- else {
219
- this.blogData = blogContent;
220
- }
221
- this.isLoading = false;
222
- })
223
- .catch((err) => {
224
- this.hasErrors = true;
225
- console.log('Error', err);
226
- })
227
- .finally(() => this.isLoading = false);
228
- }
229
- componentDidRender() {
230
- // start custom styling area
231
- if (!this.limitStylingAppends && this.stylingContainer) {
232
- if (this.clientStyling)
233
- this.setClientStyling();
234
- if (this.clientStylingUrl)
235
- this.setClientStylingURL();
236
- this.limitStylingAppends = true;
237
- }
238
- // end custom styling area
239
- }
240
- componentDidLoad() {
241
- this.detectAndAlertDeviceType();
242
- }
243
- detectAndAlertDeviceType() {
244
- this.device = getDeviceCustom();
245
- }
246
- formatDate(dateString) {
247
- return new Intl.DateTimeFormat(this.intlDateTimeFormat || 'en-GB').format(new Date(dateString));
248
- }
249
- render() {
250
- var _a, _b, _c, _d, _e;
251
- if (this.hasErrors) {
252
- return (h("div", { class: "BlogArticleDetails" }, h("div", { class: "Title" }, translate('error', this.language))));
253
- }
254
- if (!this.isLoading) {
255
- return (h("div", { ref: el => this.stylingContainer = el }, h("div", { class: "DetailsContainer" }, h("div", { class: "DetailsHeadWrapper" }, this.showPublishingDate && this.blogData.publishingDate &&
256
- 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 &&
257
- 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)))));
258
- }
259
- }
260
- static get watchers() { return {
261
- "postId": ["watchEndpoint"],
262
- "postSlug": ["watchEndpoint"],
263
- "postCustomPath": ["watchEndpoint"],
264
- "cmsEndpoint": ["watchEndpoint"],
265
- "language": ["watchEndpoint"]
266
- }; }
267
- };
268
- BlogArticleDetails.style = blogArticleDetailsCss;
269
-
270
- export { BlogArticleDetails as blog_article_details };
@@ -1,17 +0,0 @@
1
- import { p as promiseResolve, b as bootstrapLazy } from './index-a6d43dfd.js';
2
-
3
- /*
4
- Stencil Client Patch Browser v2.15.2 | MIT Licensed | https://stenciljs.com
5
- */
6
- const patchBrowser = () => {
7
- const importMeta = import.meta.url;
8
- const opts = {};
9
- if (importMeta !== '') {
10
- opts.resourcesUrl = new URL('.', importMeta).href;
11
- }
12
- return promiseResolve(opts);
13
- };
14
-
15
- patchBrowser().then(options => {
16
- 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);
17
- });