@everymatrix/blog-articles-grid 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-2ef46f05.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-articles-grid.cjs",[[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);
+  });
+};
+
+exports.defineCustomElements = defineCustomElements;

package/dist/collection/collection-manifest.json

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

package/dist/collection/components/blog-articles-grid/blog-articles-grid.css

@@ -0,0 +1,126 @@
+:host {
+  display: block;
+}
+
+.GridContainer {
+  margin: auto;
+  width: 100%;
+  height: 280px;
+  border-radius: 15px;
+  background-color: #07072A;
+  margin-bottom: 20px;
+  display: grid;
+  gap: 30px;
+  grid-template-rows: 1fr 4fr 1fr 1fr;
+  grid-template-columns: 30px 1fr 1fr 30px;
+}
+.GridContainer .BlogBanner {
+  grid-column: 1/3;
+  grid-row: 1/5;
+}
+.GridContainer .BlogBanner img {
+  border-radius: 5px 0 0 5px;
+  width: 100%;
+  height: 280px;
+}
+.GridContainer .BlogDate {
+  font-size: 12px;
+  border-radius: 5px 5px 0 0;
+  padding: 10px;
+  width: fit-content;
+  text-align: center;
+  color: #FFFFFF;
+  background-color: #0D0D4D;
+  grid-column: 2/2;
+  grid-row: 4/4;
+  z-index: 1;
+}
+.GridContainer .BlogTitle {
+  font-size: 24px;
+  color: #FFF;
+  margin-top: 20px;
+  grid-column: 3/5;
+}
+.GridContainer .BlogContent {
+  font-size: 14px;
+  color: #FFF;
+  width: 90%;
+  max-height: 80px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  grid-column: 3/5;
+}
+.GridContainer .BlogLink {
+  grid-column: 3/5;
+  color: #FFF;
+}
+.GridContainer .BlogLink button {
+  font-size: 14px;
+  border: none;
+  padding: 0;
+  background: none;
+  color: #D0046C;
+  cursor: pointer;
+}
+
+@container (max-width: 475px) {
+  .GridContainer {
+    margin: auto;
+    width: 100%;
+    min-height: 400px;
+    gap: 10%;
+    padding-bottom: 30px;
+    border-radius: 5px;
+    background-color: #07072A;
+    margin-bottom: 20px;
+    display: grid;
+    grid-template-rows: repeat(auto-fit, minmax(50px, 1fr));
+    grid-template-rows: auto auto auto 50px;
+    grid-template-columns: 15px auto auto 15px;
+    gap: 10px;
+  }
+  .GridContainer .BlogBanner {
+    grid-column: 1/5;
+    grid-row: 1/3;
+    margin: 0;
+  }
+  .GridContainer .BlogBanner img {
+    width: 100%;
+    height: 232px;
+    border-radius: 5px 5px 0 0;
+  }
+  .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: #FFFFFF;
+    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;
+  }
+  .GridContainer .BlogLink {
+    grid-column: 2/4;
+    color: #FFF;
+    cursor: pointer;
+  }
+  .GridContainer .BlogLink button {
+    font-size: 14px;
+    border: none;
+    background: none;
+    color: #D0046C;
+    cursor: pointer;
+  }
+}

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

@@ -0,0 +1,425 @@
+import { Component, Prop, State, Event, h } from '@stencil/core';
+import { translate } from '../../utils/locale.utils';
+export class BlogArticlesGrid {
+  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;
+    /**
+    * 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 is() { return "blog-articles-grid"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["blog-articles-grid.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["blog-articles-grid.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 shome 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"
+    },
+    "showButton": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Property used to display the button"
+      },
+      "attribute": "show-button",
+      "reflect": false,
+      "defaultValue": "true"
+    },
+    "showVerticalGrid": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Property used to display the button"
+      },
+      "attribute": "show-vertical-grid",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "usePostmessage": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": true,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Use postMessage event to communicate"
+      },
+      "attribute": "use-postmessage",
+      "reflect": false
+    },
+    "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'"
+    }
+  }; }
+  static get states() { return {
+    "hasErrors": {},
+    "limitStylingAppends": {},
+    "isLoading": {}
+  }; }
+  static get events() { return [{
+      "method": "articleActionButton",
+      "name": "articleActionButton",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "Object",
+        "resolved": "Object",
+        "references": {
+          "Object": {
+            "location": "global"
+          }
+        }
+      }
+    }]; }
+}

package/dist/collection/index.js

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

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

@@ -0,0 +1,24 @@
+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',
+  }
+};
+export const translate = (key, customLang) => {
+  const lang = customLang;
+  return TRANSLATIONS[lang !== undefined && SUPPORTED_LANGUAGES.includes(lang) ? lang : DEFAULT_LANGUAGE][key];
+};

package/dist/components/blog-articles-grid.d.ts

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