@everymatrix/blog-article-details 1.10.6

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

@@ -0,0 +1,142 @@
+import { r as registerInstance, h } from './index-c07b2186.js';
+
+const DEFAULT_LANGUAGE = 'en';
+const SUPPORTED_LANGUAGES = ['ro', 'en', 'fr', 'ar'];
+const TRANSLATIONS = {
+  en: {
+    error: 'Error',
+  },
+  ro: {
+    error: 'Eroare',
+  },
+  fr: {
+    error: 'Error',
+  },
+  ar: {
+    error: 'خطأ',
+  }
+};
+const translate = (key, customLang) => {
+  const lang = customLang;
+  return TRANSLATIONS[lang !== undefined && SUPPORTED_LANGUAGES.includes(lang) ? lang : DEFAULT_LANGUAGE][key];
+};
+
+const blogArticleDetailsCss = ":host {\n  display: block;\n}\n\n.GridContainer {\n  overflow: auto;\n  margin: auto;\n  width: 100%;\n  padding-bottom: 30px;\n  background-color: #07072A;\n  display: grid;\n  grid-template-rows: auto;\n  grid-template-columns: 30px 60px 1fr 30px;\n  gap: 10px;\n}\n.GridContainer .BlogBanner {\n  grid-column: 1/5;\n  grid-row: 1/3;\n}\n.GridContainer .BlogBanner img {\n  width: 100%;\n  height: auto;\n}\n.GridContainer .BlogDate {\n  grid-column: 2/3;\n  grid-row: 2/3;\n  font-size: 12px;\n  border-radius: 5px 5px 0 0;\n  padding: 10px;\n  width: fit-content;\n  text-align: center;\n  color: #FFF;\n  background-color: #0D0D4D;\n  z-index: 1;\n}\n.GridContainer .BlogTitle {\n  grid-column: 2/4;\n  font-size: 24px;\n  color: #FFF;\n}\n.GridContainer .BlogContent {\n  grid-column: 2/4;\n  font-size: 14px;\n  color: #FFF;\n}\n\n@container (max-width: 475px) {\n  .GridContainer {\n    font-size: 12px;\n  }\n}";
+
+const BlogArticleDetails = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    /**
+     * Language of the widget
+     */
+    this.language = 'en';
+    /**
+    * Client custom styling via string
+    */
+    this.clientStyling = '';
+    /**
+     * Client custom styling via url
+     */
+    this.clientStylingurl = '';
+    /**
+     * Client custom styling via url content
+     */
+    this.clientStylingUrlContent = '';
+    /**
+     * 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;
+    /**
+     * Event name to be sent when the button is clicked
+     */
+    this.postMessageEvent = 'articleActionButton';
+    this.hasErrors = false;
+    this.limitStylingAppends = false;
+    this.isLoading = true;
+    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) => {
+        this.clientStylingUrlContent = data;
+        cssFile.innerHTML = data;
+        setTimeout(() => { this.stylingContainer.prepend(cssFile); }, 1);
+      })
+        .catch((err) => {
+        console.log('error ', err);
+      });
+    };
+  }
+  getBlogArticleDetails() {
+    if (!this.postId && isNaN(this.postId)) {
+      this.hasErrors = true;
+      throw new Error('The postId parameter is missing!');
+    }
+    this.isLoading = true;
+    let url = new URL(`${this.cmsEndpoint}/${this.language}/blog-posts/${this.postId}`);
+    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) => {
+      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.clientStylingUrlContent)
+        this.setClientStylingURL();
+      this.limitStylingAppends = true;
+    }
+    // end custom styling area
+  }
+  componentWillLoad() {
+    this.getBlogArticleDetails();
+  }
+  render() {
+    if (this.hasErrors) {
+      return (h("div", { class: "BlogArticleDetails" }, h("div", { class: "Title" }, translate('error', this.language))));
+    }
+    if (!this.isLoading) {
+      return (h("div", { ref: el => this.stylingContainer = el }, h("div", { class: "GridContainer" }, this.showPublishingDate &&
+        h("div", { class: "BlogDate" }, this.blogData.publishingDate), this.showImage &&
+        h("div", { class: "BlogBanner" }, h("img", { src: this.blogData, alt: this.blogData.title })), this.showTitle &&
+        h("div", { class: "BlogTitle" }, this.blogData.title), this.showContent &&
+        h("div", { class: "BlogContent", innerHTML: this.blogData.content }))));
+    }
+  }
+};
+BlogArticleDetails.style = blogArticleDetailsCss;
+
+export { BlogArticleDetails as blog_article_details };

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

@@ -0,0 +1,17 @@
+import { p as promiseResolve, b as bootstrapLazy } from './index-c07b2186.js';
+
+/*
+ Stencil Client Patch Browser v2.15.2 | 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);
+};
+
+patchBrowser().then(options => {
+  return bootstrapLazy([["blog-article-details",[[1,"blog-article-details",{"cmsEndpoint":[1,"cms-endpoint"],"language":[1],"handleClick":[1,"handle-click"],"clientStyling":[1,"client-styling"],"clientStylingurl":[1,"client-stylingurl"],"clientStylingUrlContent":[1,"client-styling-url-content"],"showPublishingDate":[4,"show-publishing-date"],"showImage":[4,"show-image"],"showTitle":[4,"show-title"],"showContent":[4,"show-content"],"postMessageEvent":[1,"post-message-event"],"postId":[2,"post-id"],"hasErrors":[32],"limitStylingAppends":[32],"isLoading":[32]}]]]], options);
+});