@everymatrix/blog-articles-grid 1.10.6

package/dist/components/blog-articles-grid.js

@@ -0,0 +1,200 @@
+import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+
+const DEFAULT_LANGUAGE = 'en';
+const SUPPORTED_LANGUAGES = ['ro', 'en', 'fr', 'ar'];
+const TRANSLATIONS = {
+  en: {
+    error: 'Error',
+    readmore: 'Read more',
+  },
+  ro: {
+    error: 'Eroare',
+    readmore: 'Read more',
+  },
+  fr: {
+    error: 'Error',
+    readmore: 'Read more',
+  },
+  ar: {
+    error: 'خطأ',
+    readmore: 'Read more',
+  }
+};
+const translate = (key, customLang) => {
+  const lang = customLang;
+  return TRANSLATIONS[lang !== undefined && SUPPORTED_LANGUAGES.includes(lang) ? lang : DEFAULT_LANGUAGE][key];
+};
+
+const blogArticlesGridCss = ":host {\n  display: block;\n}\n\n.GridContainer {\n  margin: auto;\n  width: 100%;\n  height: 280px;\n  border-radius: 15px;\n  background-color: #07072A;\n  margin-bottom: 20px;\n  display: grid;\n  gap: 30px;\n  grid-template-rows: 1fr 4fr 1fr 1fr;\n  grid-template-columns: 30px 1fr 1fr 30px;\n}\n.GridContainer .BlogBanner {\n  grid-column: 1/3;\n  grid-row: 1/5;\n}\n.GridContainer .BlogBanner img {\n  border-radius: 5px 0 0 5px;\n  width: 100%;\n  height: 280px;\n}\n.GridContainer .BlogDate {\n  font-size: 12px;\n  border-radius: 5px 5px 0 0;\n  padding: 10px;\n  width: fit-content;\n  text-align: center;\n  color: #FFFFFF;\n  background-color: #0D0D4D;\n  grid-column: 2/2;\n  grid-row: 4/4;\n  z-index: 1;\n}\n.GridContainer .BlogTitle {\n  font-size: 24px;\n  color: #FFF;\n  margin-top: 20px;\n  grid-column: 3/5;\n}\n.GridContainer .BlogContent {\n  font-size: 14px;\n  color: #FFF;\n  width: 90%;\n  max-height: 80px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  grid-column: 3/5;\n}\n.GridContainer .BlogLink {\n  grid-column: 3/5;\n  color: #FFF;\n}\n.GridContainer .BlogLink button {\n  font-size: 14px;\n  border: none;\n  padding: 0;\n  background: none;\n  color: #D0046C;\n  cursor: pointer;\n}\n\n@container (max-width: 475px) {\n  .GridContainer {\n    margin: auto;\n    width: 100%;\n    min-height: 400px;\n    gap: 10%;\n    padding-bottom: 30px;\n    border-radius: 5px;\n    background-color: #07072A;\n    margin-bottom: 20px;\n    display: grid;\n    grid-template-rows: repeat(auto-fit, minmax(50px, 1fr));\n    grid-template-rows: auto auto auto 50px;\n    grid-template-columns: 15px auto auto 15px;\n    gap: 10px;\n  }\n  .GridContainer .BlogBanner {\n    grid-column: 1/5;\n    grid-row: 1/3;\n    margin: 0;\n  }\n  .GridContainer .BlogBanner img {\n    width: 100%;\n    height: 232px;\n    border-radius: 5px 5px 0 0;\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: #FFFFFF;\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  .GridContainer .BlogLink {\n    grid-column: 2/4;\n    color: #FFF;\n    cursor: pointer;\n  }\n  .GridContainer .BlogLink button {\n    font-size: 14px;\n    border: none;\n    background: none;\n    color: #D0046C;\n    cursor: pointer;\n  }\n}";
+
+const BlogArticlesGrid$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.articleActionButton = createEvent(this, "articleActionButton", 7);
+    /**
+    * 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;
+    /**
+    * Property used to display the button
+    */
+    this.showButton = true;
+    /**
+     * Property used to display the button
+     */
+    this.showVerticalGrid = false;
+    /**
+     * 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);
+      });
+    };
+  }
+  getArticleId(postId) {
+    this.articleActionButton.emit({ postId });
+    if (this.usePostmessage) {
+      window.postMessage({ type: this.postMessageEvent, postId });
+    }
+  }
+  connectedCallback() {
+    this.getBlogArticleDetails();
+  }
+  toggleClass() {
+    this.showVerticalGrid = !this.showVerticalGrid;
+  }
+  handleAction(postId) {
+    this.getArticleId(postId);
+  }
+  getBlogArticleDetails() {
+    this.isLoading = true;
+    let url = new URL(`${this.cmsEndpoint}/${this.language}/blog-posts`);
+    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
+  }
+  render() {
+    if (this.hasErrors) {
+      return (h("div", { class: "BlogArticleDetails" }, h("div", { class: "Title" }, translate('error', this.language))));
+    }
+    if (!this.isLoading) {
+      return (h("div", null, h("div", { ref: el => this.stylingContainer = el }, this.blogData.map((data) => h("div", { class: "GridContainer" }, this.showPublishingDate &&
+        h("div", { class: "BlogDate" }, data.publishingDate), this.showImage &&
+        h("div", { class: "BlogBanner" }, h("img", { src: data.image, alt: data.title })), this.showTitle &&
+        h("div", { class: "BlogTitle" }, data.title), this.showContent &&
+        h("div", { class: "BlogContent", innerHTML: data.content }), this.showButton &&
+        h("div", { class: "BlogLink" }, h("button", { onClick: () => this.handleAction(data.postID) }, translate('readmore', this.language))))))));
+    }
+  }
+  static get style() { return blogArticlesGridCss; }
+}, [1, "blog-articles-grid", {
+    "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"],
+    "showButton": [4, "show-button"],
+    "showVerticalGrid": [4, "show-vertical-grid"],
+    "usePostmessage": [4, "use-postmessage"],
+    "postMessageEvent": [1, "post-message-event"],
+    "hasErrors": [32],
+    "limitStylingAppends": [32],
+    "isLoading": [32]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["blog-articles-grid"];
+  components.forEach(tagName => { switch (tagName) {
+    case "blog-articles-grid":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, BlogArticlesGrid$1);
+      }
+      break;
+  } });
+}
+
+const BlogArticlesGrid = BlogArticlesGrid$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { BlogArticlesGrid, defineCustomElement };

package/dist/components/index.d.ts

@@ -0,0 +1,26 @@
+/* BlogArticlesGrid 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';

package/dist/esm/blog-articles-grid.entry.js

@@ -0,0 +1,164 @@
+import { r as registerInstance, c as createEvent, h } from './index-3cf2add0.js';
+
+const DEFAULT_LANGUAGE = 'en';
+const SUPPORTED_LANGUAGES = ['ro', 'en', 'fr', 'ar'];
+const TRANSLATIONS = {
+  en: {
+    error: 'Error',
+    readmore: 'Read more',
+  },
+  ro: {
+    error: 'Eroare',
+    readmore: 'Read more',
+  },
+  fr: {
+    error: 'Error',
+    readmore: 'Read more',
+  },
+  ar: {
+    error: 'خطأ',
+    readmore: 'Read more',
+  }
+};
+const translate = (key, customLang) => {
+  const lang = customLang;
+  return TRANSLATIONS[lang !== undefined && SUPPORTED_LANGUAGES.includes(lang) ? lang : DEFAULT_LANGUAGE][key];
+};
+
+const blogArticlesGridCss = ":host {\n  display: block;\n}\n\n.GridContainer {\n  margin: auto;\n  width: 100%;\n  height: 280px;\n  border-radius: 15px;\n  background-color: #07072A;\n  margin-bottom: 20px;\n  display: grid;\n  gap: 30px;\n  grid-template-rows: 1fr 4fr 1fr 1fr;\n  grid-template-columns: 30px 1fr 1fr 30px;\n}\n.GridContainer .BlogBanner {\n  grid-column: 1/3;\n  grid-row: 1/5;\n}\n.GridContainer .BlogBanner img {\n  border-radius: 5px 0 0 5px;\n  width: 100%;\n  height: 280px;\n}\n.GridContainer .BlogDate {\n  font-size: 12px;\n  border-radius: 5px 5px 0 0;\n  padding: 10px;\n  width: fit-content;\n  text-align: center;\n  color: #FFFFFF;\n  background-color: #0D0D4D;\n  grid-column: 2/2;\n  grid-row: 4/4;\n  z-index: 1;\n}\n.GridContainer .BlogTitle {\n  font-size: 24px;\n  color: #FFF;\n  margin-top: 20px;\n  grid-column: 3/5;\n}\n.GridContainer .BlogContent {\n  font-size: 14px;\n  color: #FFF;\n  width: 90%;\n  max-height: 80px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  grid-column: 3/5;\n}\n.GridContainer .BlogLink {\n  grid-column: 3/5;\n  color: #FFF;\n}\n.GridContainer .BlogLink button {\n  font-size: 14px;\n  border: none;\n  padding: 0;\n  background: none;\n  color: #D0046C;\n  cursor: pointer;\n}\n\n@container (max-width: 475px) {\n  .GridContainer {\n    margin: auto;\n    width: 100%;\n    min-height: 400px;\n    gap: 10%;\n    padding-bottom: 30px;\n    border-radius: 5px;\n    background-color: #07072A;\n    margin-bottom: 20px;\n    display: grid;\n    grid-template-rows: repeat(auto-fit, minmax(50px, 1fr));\n    grid-template-rows: auto auto auto 50px;\n    grid-template-columns: 15px auto auto 15px;\n    gap: 10px;\n  }\n  .GridContainer .BlogBanner {\n    grid-column: 1/5;\n    grid-row: 1/3;\n    margin: 0;\n  }\n  .GridContainer .BlogBanner img {\n    width: 100%;\n    height: 232px;\n    border-radius: 5px 5px 0 0;\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: #FFFFFF;\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  .GridContainer .BlogLink {\n    grid-column: 2/4;\n    color: #FFF;\n    cursor: pointer;\n  }\n  .GridContainer .BlogLink button {\n    font-size: 14px;\n    border: none;\n    background: none;\n    color: #D0046C;\n    cursor: pointer;\n  }\n}";
+
+const BlogArticlesGrid = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.articleActionButton = createEvent(this, "articleActionButton", 7);
+    /**
+    * 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;
+    /**
+    * Property used to display the button
+    */
+    this.showButton = true;
+    /**
+     * Property used to display the button
+     */
+    this.showVerticalGrid = false;
+    /**
+     * 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);
+      });
+    };
+  }
+  getArticleId(postId) {
+    this.articleActionButton.emit({ postId });
+    if (this.usePostmessage) {
+      window.postMessage({ type: this.postMessageEvent, postId });
+    }
+  }
+  connectedCallback() {
+    this.getBlogArticleDetails();
+  }
+  toggleClass() {
+    this.showVerticalGrid = !this.showVerticalGrid;
+  }
+  handleAction(postId) {
+    this.getArticleId(postId);
+  }
+  getBlogArticleDetails() {
+    this.isLoading = true;
+    let url = new URL(`${this.cmsEndpoint}/${this.language}/blog-posts`);
+    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
+  }
+  render() {
+    if (this.hasErrors) {
+      return (h("div", { class: "BlogArticleDetails" }, h("div", { class: "Title" }, translate('error', this.language))));
+    }
+    if (!this.isLoading) {
+      return (h("div", null, h("div", { ref: el => this.stylingContainer = el }, this.blogData.map((data) => h("div", { class: "GridContainer" }, this.showPublishingDate &&
+        h("div", { class: "BlogDate" }, data.publishingDate), this.showImage &&
+        h("div", { class: "BlogBanner" }, h("img", { src: data.image, alt: data.title })), this.showTitle &&
+        h("div", { class: "BlogTitle" }, data.title), this.showContent &&
+        h("div", { class: "BlogContent", innerHTML: data.content }), this.showButton &&
+        h("div", { class: "BlogLink" }, h("button", { onClick: () => this.handleAction(data.postID) }, translate('readmore', this.language))))))));
+    }
+  }
+};
+BlogArticlesGrid.style = blogArticlesGridCss;
+
+export { BlogArticlesGrid as blog_articles_grid };

package/dist/esm/blog-articles-grid.js

@@ -0,0 +1,17 @@
+import { p as promiseResolve, b as bootstrapLazy } from './index-3cf2add0.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-articles-grid",[[1,"blog-articles-grid",{"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"],"showButton":[4,"show-button"],"showVerticalGrid":[4,"show-vertical-grid"],"usePostmessage":[4,"use-postmessage"],"postMessageEvent":[1,"post-message-event"],"hasErrors":[32],"limitStylingAppends":[32],"isLoading":[32]}]]]], options);
+});