@everymatrix/blog-article-details 1.10.6

package/dist/cjs/index.cjs.js

@@ -0,0 +1,2 @@
+'use strict';
+

package/dist/cjs/loader.cjs.js

@@ -0,0 +1,21 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-df694837.js');
+
+/*
+ Stencil Client Patch Esm v2.15.2 | MIT Licensed | https://stenciljs.com
+ */
+const patchEsm = () => {
+    return index.promiseResolve();
+};
+
+const defineCustomElements = (win, options) => {
+  if (typeof window === 'undefined') return Promise.resolve();
+  return patchEsm().then(() => {
+  return index.bootstrapLazy([["blog-article-details.cjs",[[1,"blog-article-details",{"cmsEndpoint":[1,"cms-endpoint"],"language":[1],"handleClick":[1,"handle-click"],"clientStyling":[1,"client-styling"],"clientStylingurl":[1,"client-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);
+  });
+};
+
+exports.defineCustomElements = defineCustomElements;

package/dist/collection/collection-manifest.json

@@ -0,0 +1,12 @@
+{
+  "entries": [
+    "./components/blog-article-details/blog-article-details.js"
+  ],
+  "compiler": {
+    "name": "@stencil/core",
+    "version": "2.15.2",
+    "typescriptVersion": "4.5.4"
+  },
+  "collections": [],
+  "bundles": []
+}

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

@@ -0,0 +1,51 @@
+:host {
+  display: block;
+}
+
+.GridContainer {
+  overflow: auto;
+  margin: auto;
+  width: 100%;
+  padding-bottom: 30px;
+  background-color: #07072A;
+  display: grid;
+  grid-template-rows: auto;
+  grid-template-columns: 30px 60px 1fr 30px;
+  gap: 10px;
+}
+.GridContainer .BlogBanner {
+  grid-column: 1/5;
+  grid-row: 1/3;
+}
+.GridContainer .BlogBanner img {
+  width: 100%;
+  height: auto;
+}
+.GridContainer .BlogDate {
+  grid-column: 2/3;
+  grid-row: 2/3;
+  font-size: 12px;
+  border-radius: 5px 5px 0 0;
+  padding: 10px;
+  width: fit-content;
+  text-align: center;
+  color: #FFF;
+  background-color: #0D0D4D;
+  z-index: 1;
+}
+.GridContainer .BlogTitle {
+  grid-column: 2/4;
+  font-size: 24px;
+  color: #FFF;
+}
+.GridContainer .BlogContent {
+  grid-column: 2/4;
+  font-size: 14px;
+  color: #FFF;
+}
+
+@container (max-width: 475px) {
+  .GridContainer {
+    font-size: 12px;
+  }
+}

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

@@ -0,0 +1,350 @@
+import { Component, Prop, State, h } from '@stencil/core';
+import { translate } from '../../utils/locale.utils';
+export class BlogArticleDetails {
+  constructor() {
+    /**
+     * 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 }))));
+    }
+  }
+  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": false
+    },
+    "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": false,
+      "defaultValue": "'en'"
+    },
+    "handleClick": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Handle when you click on show more button"
+      },
+      "attribute": "handle-click",
+      "reflect": false
+    },
+    "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": false,
+      "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-stylingurl",
+      "reflect": false,
+      "defaultValue": "''"
+    },
+    "clientStylingUrlContent": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Client custom styling via url content"
+      },
+      "attribute": "client-styling-url-content",
+      "reflect": false,
+      "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": false,
+      "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": false,
+      "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": false,
+      "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": false,
+      "defaultValue": "true"
+    },
+    "postMessageEvent": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Event name to be sent when the button is clicked"
+      },
+      "attribute": "post-message-event",
+      "reflect": false,
+      "defaultValue": "'articleActionButton'"
+    },
+    "postId": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": true,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Showing post ID parameter"
+      },
+      "attribute": "post-id",
+      "reflect": false
+    }
+  }; }
+  static get states() { return {
+    "hasErrors": {},
+    "limitStylingAppends": {},
+    "isLoading": {}
+  }; }
+}

package/dist/collection/index.js

@@ -0,0 +1 @@
+export * from './components';

package/dist/collection/utils/locale.utils.js

@@ -0,0 +1,20 @@
+const DEFAULT_LANGUAGE = 'en';
+const SUPPORTED_LANGUAGES = ['ro', 'en', 'fr', 'ar'];
+const TRANSLATIONS = {
+  en: {
+    error: 'Error',
+  },
+  ro: {
+    error: 'Eroare',
+  },
+  fr: {
+    error: 'Error',
+  },
+  ar: {
+    error: 'خطأ',
+  }
+};
+export const translate = (key, customLang) => {
+  const lang = customLang;
+  return TRANSLATIONS[lang !== undefined && SUPPORTED_LANGUAGES.includes(lang) ? lang : DEFAULT_LANGUAGE][key];
+};

package/dist/components/blog-article-details.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface BlogArticleDetails extends Components.BlogArticleDetails, HTMLElement {}
+export const BlogArticleDetails: {
+  prototype: BlogArticleDetails;
+  new (): BlogArticleDetails;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

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

@@ -0,0 +1,176 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+
+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$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    /**
+     * 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 }))));
+    }
+  }
+  static get style() { return blogArticleDetailsCss; }
+}, [1, "blog-article-details", {
+    "cmsEndpoint": [1, "cms-endpoint"],
+    "language": [1],
+    "handleClick": [1, "handle-click"],
+    "clientStyling": [1, "client-styling"],
+    "clientStylingurl": [1, "client-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]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["blog-article-details"];
+  components.forEach(tagName => { switch (tagName) {
+    case "blog-article-details":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, BlogArticleDetails$1);
+      }
+      break;
+  } });
+}
+
+const BlogArticleDetails = BlogArticleDetails$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { BlogArticleDetails, defineCustomElement };

package/dist/components/index.d.ts

@@ -0,0 +1,26 @@
+/* BlogArticleDetails custom elements */
+
+import type { Components, JSX } from "../types/components";
+
+/**
+ * Used to manually set the base path where assets can be found.
+ * If the script is used as "module", it's recommended to use "import.meta.url",
+ * such as "setAssetPath(import.meta.url)". Other options include
+ * "setAssetPath(document.currentScript.src)", or using a bundler's replace plugin to
+ * dynamically set the path at build time, such as "setAssetPath(process.env.ASSET_PATH)".
+ * But do note that this configuration depends on how your script is bundled, or lack of
+ * 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.
+ */
+export declare const setAssetPath: (path: string) => void;
+
+export interface SetPlatformOptions {
+  raf?: (c: FrameRequestCallback) => number;
+  ael?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
+  rel?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
+}
+export declare const setPlatformOptions: (opts: SetPlatformOptions) => void;
+
+export type { Components, JSX };
+
+export * from '../types';

package/dist/components/index.js

@@ -0,0 +1 @@
+export { setAssetPath, setPlatformOptions } from '@stencil/core/internal/client';