@everymatrix/blog-articles-grid - npm Package Compare versions

Comparing version 1.10.10 to 1.10.11

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

@@ -1,1 +0,1 @@
-import{p as t,b as s}from"./p-c88aa418.js";(()=>{const s=import.meta.url,e={};return""!==s&&(e.resourcesUrl=new URL(".",s).href),t(e)})().then((t=>s([["p-4b02b5f1",[[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]}]]]],t)));
+import{p as s,b as t}from"./p-f20eb014.js";(()=>{const t=import.meta.url,e={};return""!==t&&(e.resourcesUrl=new URL(".",t).href),s(e)})().then((s=>t([["p-72a6c169",[[1,"blog-articles-grid",{cmsEndpoint:[1,"cms-endpoint"],language:[1],handleClick:[1,"handle-click"],clientStyling:[1,"client-styling"],clientStylingUrl:[1,"client-styling-url"],showPublishingDate:[4,"show-publishing-date"],showImage:[4,"show-image"],showTitle:[4,"show-title"],showContent:[4,"show-content"],showButton:[4,"show-button"],usePostmessage:[4,"use-postmessage"],postMessageEvent:[1,"post-message-event"],hasErrors:[32],limitStylingAppends:[32],isLoading:[32]}]]]],s)));

dist/cjs/blog-articles-grid.cjs.entry.js

@@ -5,3 +5,3 @@ 'use strict';
 
-const index = require('./index-3643d359.js');
+const index = require('./index-354d58ac.js');
 
@@ -33,3 +33,3 @@ const DEFAULT_LANGUAGE = 'en';
 
-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 blogArticlesGridCss = ":host {\n  display: block;\n}\n\n.GridContainerWrapper {\n  display: grid;\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  .GridContainerWrapper {\n    display: grid;\n  }\n\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}";
 
@@ -51,8 +51,4 @@ const BlogArticlesGrid = class {
     */
-    this.clientStylingurl = '';
+    this.clientStylingUrl = '';
     /**
-    * Client custom styling via url content
-    */
-    this.clientStylingUrlContent = '';
-    /**
      * Property used to display the publishing date
@@ -78,6 +74,2 @@ */
     /**
-     * Property used to display the button
-     */
-    this.showVerticalGrid = false;
-    /**
      * Event name to be sent when the button is clicked
@@ -95,3 +87,3 @@ */
     this.setClientStylingURL = () => {
-      let url = new URL(this.clientStylingurl);
+      let url = new URL(this.clientStylingUrl);
       let cssFile = document.createElement('style');
@@ -101,3 +93,2 @@ fetch(url.href)
         .then((data) => {
-        this.clientStylingUrlContent = data;
         cssFile.innerHTML = data;
@@ -122,5 +113,2 @@ setTimeout(() => { this.stylingContainer.prepend(cssFile); }, 1);
   }
-  toggleClass() {
-    this.showVerticalGrid = !this.showVerticalGrid;
-  }
   handleAction(postId) {
@@ -134,2 +122,5 @@ this.getArticleId(postId);
   }
+  componentDidLoad() {
+    window.postMessage({ type: 'BlogArticlesGridLoaded' }, window.location.href);
+  }
   getBlogArticleGrid() {
@@ -163,3 +154,3 @@ this.isLoading = true;
         this.setClientStyling();
-      if (this.clientStylingUrlContent)
+      if (this.clientStylingUrl)
         this.setClientStylingURL();
@@ -175,3 +166,3 @@ this.limitStylingAppends = true;
     if (!this.isLoading) {
-      return (index.h("div", null, index.h("div", { ref: el => this.stylingContainer = el }, this.blogData.map((data) => index.h("div", { class: "GridContainer" }, this.showPublishingDate &&
+      return (index.h("div", { ref: el => this.stylingContainer = el }, index.h("div", { class: "GridContainerWrapper" }, this.blogData.map((data) => index.h("div", { class: "GridContainer" }, this.showPublishingDate &&
         index.h("div", { class: "BlogDate" }, data.publishingDate), this.showImage &&
@@ -178,0 +169,0 @@ index.h("div", { class: "BlogBanner" }, index.h("img", { src: data.image.src, alt: data.title })), this.showTitle &&

dist/cjs/blog-articles-grid.cjs.js

 'use strict';
 
-const index = require('./index-3643d359.js');
+const index = require('./index-354d58ac.js');
 
@@ -18,3 +18,3 @@ /*
 patchBrowser().then(options => {
-  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);
+  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-styling-url"],"showPublishingDate":[4,"show-publishing-date"],"showImage":[4,"show-image"],"showTitle":[4,"show-title"],"showContent":[4,"show-content"],"showButton":[4,"show-button"],"usePostmessage":[4,"use-postmessage"],"postMessageEvent":[1,"post-message-event"],"hasErrors":[32],"limitStylingAppends":[32],"isLoading":[32]}]]]], options);
 });

dist/cjs/loader.cjs.js

@@ -5,3 +5,3 @@ 'use strict';
 
-const index = require('./index-3643d359.js');
+const index = require('./index-354d58ac.js');
 
@@ -18,3 +18,3 @@ /*
   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);
+  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-styling-url"],"showPublishingDate":[4,"show-publishing-date"],"showImage":[4,"show-image"],"showTitle":[4,"show-title"],"showContent":[4,"show-content"],"showButton":[4,"show-button"],"usePostmessage":[4,"use-postmessage"],"postMessageEvent":[1,"post-message-event"],"hasErrors":[32],"limitStylingAppends":[32],"isLoading":[32]}]]]], options);
   });
@@ -21,0 +21,0 @@ };

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

@@ -16,8 +16,4 @@ import { Component, Prop, State, Event, Watch, h } from '@stencil/core';
     */
-    this.clientStylingurl = '';
+    this.clientStylingUrl = '';
     /**
-    * Client custom styling via url content
-    */
-    this.clientStylingUrlContent = '';
-    /**
      * Property used to display the publishing date
@@ -43,6 +39,2 @@ */
     /**
-     * Property used to display the button
-     */
-    this.showVerticalGrid = false;
-    /**
      * Event name to be sent when the button is clicked
@@ -60,3 +52,3 @@ */
     this.setClientStylingURL = () => {
-      let url = new URL(this.clientStylingurl);
+      let url = new URL(this.clientStylingUrl);
       let cssFile = document.createElement('style');
@@ -66,3 +58,2 @@ fetch(url.href)
         .then((data) => {
-        this.clientStylingUrlContent = data;
         cssFile.innerHTML = data;
@@ -87,5 +78,2 @@ setTimeout(() => { this.stylingContainer.prepend(cssFile); }, 1);
   }
-  toggleClass() {
-    this.showVerticalGrid = !this.showVerticalGrid;
-  }
   handleAction(postId) {
@@ -99,2 +87,5 @@ this.getArticleId(postId);
   }
+  componentDidLoad() {
+    window.postMessage({ type: 'BlogArticlesGridLoaded' }, window.location.href);
+  }
   getBlogArticleGrid() {
@@ -128,3 +119,3 @@ this.isLoading = true;
         this.setClientStyling();
-      if (this.clientStylingUrlContent)
+      if (this.clientStylingUrl)
         this.setClientStylingURL();
@@ -141,4 +132,4 @@ this.limitStylingAppends = true;
     if (!this.isLoading) {
-      return (h("div", null,
-        h("div", { ref: el => this.stylingContainer = el }, this.blogData.map((data) => h("div", { class: "GridContainer" },
+      return (h("div", { ref: el => this.stylingContainer = el },
+        h("div", { class: "GridContainerWrapper" }, this.blogData.map((data) => h("div", { class: "GridContainer" },
           this.showPublishingDate &&
@@ -237,3 +228,3 @@ h("div", { class: "BlogDate" }, data.publishingDate),
     },
-    "clientStylingurl": {
+    "clientStylingUrl": {
       "type": "string",
@@ -252,24 +243,6 @@ "mutable": false,
       },
-      "attribute": "client-stylingurl",
+      "attribute": "client-styling-url",
       "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": {
@@ -365,20 +338,2 @@ "type": "boolean",
     },
-    "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": {
@@ -385,0 +340,0 @@ "type": "boolean",

dist/components/blog-articles-grid.js

@@ -28,3 +28,3 @@ import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
 
-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 blogArticlesGridCss = ":host {\n  display: block;\n}\n\n.GridContainerWrapper {\n  display: grid;\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  .GridContainerWrapper {\n    display: grid;\n  }\n\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}";
 
@@ -48,8 +48,4 @@ const BlogArticlesGrid$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     */
-    this.clientStylingurl = '';
+    this.clientStylingUrl = '';
     /**
-    * Client custom styling via url content
-    */
-    this.clientStylingUrlContent = '';
-    /**
      * Property used to display the publishing date
@@ -75,6 +71,2 @@ */
     /**
-     * Property used to display the button
-     */
-    this.showVerticalGrid = false;
-    /**
      * Event name to be sent when the button is clicked
@@ -92,3 +84,3 @@ */
     this.setClientStylingURL = () => {
-      let url = new URL(this.clientStylingurl);
+      let url = new URL(this.clientStylingUrl);
       let cssFile = document.createElement('style');
@@ -98,3 +90,2 @@ fetch(url.href)
         .then((data) => {
-        this.clientStylingUrlContent = data;
         cssFile.innerHTML = data;
@@ -119,5 +110,2 @@ setTimeout(() => { this.stylingContainer.prepend(cssFile); }, 1);
   }
-  toggleClass() {
-    this.showVerticalGrid = !this.showVerticalGrid;
-  }
   handleAction(postId) {
@@ -131,2 +119,5 @@ this.getArticleId(postId);
   }
+  componentDidLoad() {
+    window.postMessage({ type: 'BlogArticlesGridLoaded' }, window.location.href);
+  }
   getBlogArticleGrid() {
@@ -160,3 +151,3 @@ this.isLoading = true;
         this.setClientStyling();
-      if (this.clientStylingUrlContent)
+      if (this.clientStylingUrl)
         this.setClientStylingURL();
@@ -172,3 +163,3 @@ this.limitStylingAppends = true;
     if (!this.isLoading) {
-      return (h("div", null, h("div", { ref: el => this.stylingContainer = el }, this.blogData.map((data) => h("div", { class: "GridContainer" }, this.showPublishingDate &&
+      return (h("div", { ref: el => this.stylingContainer = el }, h("div", { class: "GridContainerWrapper" }, this.blogData.map((data) => h("div", { class: "GridContainer" }, this.showPublishingDate &&
         h("div", { class: "BlogDate" }, data.publishingDate), this.showImage &&
@@ -191,4 +182,3 @@ h("div", { class: "BlogBanner" }, h("img", { src: data.image.src, alt: data.title })), this.showTitle &&
     "clientStyling": [1, "client-styling"],
-    "clientStylingurl": [1, "client-stylingurl"],
-    "clientStylingUrlContent": [1, "client-styling-url-content"],
+    "clientStylingUrl": [1, "client-styling-url"],
     "showPublishingDate": [4, "show-publishing-date"],
@@ -199,3 +189,2 @@ "showImage": [4, "show-image"],
     "showButton": [4, "show-button"],
-    "showVerticalGrid": [4, "show-vertical-grid"],
     "usePostmessage": [4, "use-postmessage"],
@@ -202,0 +191,0 @@ "postMessageEvent": [1, "post-message-event"],

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

@@ -1,2 +0,2 @@
-import { r as registerInstance, c as createEvent, h } from './index-f169c118.js';
+import { r as registerInstance, c as createEvent, h } from './index-d61cebcb.js';
 
@@ -28,3 +28,3 @@ const DEFAULT_LANGUAGE = 'en';
 
-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 blogArticlesGridCss = ":host {\n  display: block;\n}\n\n.GridContainerWrapper {\n  display: grid;\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  .GridContainerWrapper {\n    display: grid;\n  }\n\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}";
 
@@ -46,8 +46,4 @@ const BlogArticlesGrid = class {
     */
-    this.clientStylingurl = '';
+    this.clientStylingUrl = '';
     /**
-    * Client custom styling via url content
-    */
-    this.clientStylingUrlContent = '';
-    /**
      * Property used to display the publishing date
@@ -73,6 +69,2 @@ */
     /**
-     * Property used to display the button
-     */
-    this.showVerticalGrid = false;
-    /**
      * Event name to be sent when the button is clicked
@@ -90,3 +82,3 @@ */
     this.setClientStylingURL = () => {
-      let url = new URL(this.clientStylingurl);
+      let url = new URL(this.clientStylingUrl);
       let cssFile = document.createElement('style');
@@ -96,3 +88,2 @@ fetch(url.href)
         .then((data) => {
-        this.clientStylingUrlContent = data;
         cssFile.innerHTML = data;
@@ -117,5 +108,2 @@ setTimeout(() => { this.stylingContainer.prepend(cssFile); }, 1);
   }
-  toggleClass() {
-    this.showVerticalGrid = !this.showVerticalGrid;
-  }
   handleAction(postId) {
@@ -129,2 +117,5 @@ this.getArticleId(postId);
   }
+  componentDidLoad() {
+    window.postMessage({ type: 'BlogArticlesGridLoaded' }, window.location.href);
+  }
   getBlogArticleGrid() {
@@ -158,3 +149,3 @@ this.isLoading = true;
         this.setClientStyling();
-      if (this.clientStylingUrlContent)
+      if (this.clientStylingUrl)
         this.setClientStylingURL();
@@ -170,3 +161,3 @@ this.limitStylingAppends = true;
     if (!this.isLoading) {
-      return (h("div", null, h("div", { ref: el => this.stylingContainer = el }, this.blogData.map((data) => h("div", { class: "GridContainer" }, this.showPublishingDate &&
+      return (h("div", { ref: el => this.stylingContainer = el }, h("div", { class: "GridContainerWrapper" }, this.blogData.map((data) => h("div", { class: "GridContainer" }, this.showPublishingDate &&
         h("div", { class: "BlogDate" }, data.publishingDate), this.showImage &&
@@ -173,0 +164,0 @@ h("div", { class: "BlogBanner" }, h("img", { src: data.image.src, alt: data.title })), this.showTitle &&

dist/esm/blog-articles-grid.js

@@ -1,2 +0,2 @@
-import { p as promiseResolve, b as bootstrapLazy } from './index-f169c118.js';
+import { p as promiseResolve, b as bootstrapLazy } from './index-d61cebcb.js';
 
@@ -16,3 +16,3 @@ /*
 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);
+  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-styling-url"],"showPublishingDate":[4,"show-publishing-date"],"showImage":[4,"show-image"],"showTitle":[4,"show-title"],"showContent":[4,"show-content"],"showButton":[4,"show-button"],"usePostmessage":[4,"use-postmessage"],"postMessageEvent":[1,"post-message-event"],"hasErrors":[32],"limitStylingAppends":[32],"isLoading":[32]}]]]], options);
 });

dist/esm/loader.js

@@ -1,2 +0,2 @@
-import { p as promiseResolve, b as bootstrapLazy } from './index-f169c118.js';
+import { p as promiseResolve, b as bootstrapLazy } from './index-d61cebcb.js';
 
@@ -13,3 +13,3 @@ /*
   return patchEsm().then(() => {
-  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);
+  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-styling-url"],"showPublishingDate":[4,"show-publishing-date"],"showImage":[4,"show-image"],"showTitle":[4,"show-title"],"showContent":[4,"show-content"],"showButton":[4,"show-button"],"usePostmessage":[4,"use-postmessage"],"postMessageEvent":[1,"post-message-event"],"hasErrors":[32],"limitStylingAppends":[32],"isLoading":[32]}]]]], options);
   });
@@ -16,0 +16,0 @@ };

dist/types/components.d.ts

@@ -15,9 +15,5 @@ /* eslint-disable */
         /**
-          * Client custom styling via url content
-         */
-        "clientStylingUrlContent": string;
-        /**
           * Client custom styling via url
          */
-        "clientStylingurl": string;
+        "clientStylingUrl": string;
         /**
@@ -60,6 +56,2 @@ * Endpoint URL for the source of data
         /**
-          * Property used to display the button
-         */
-        "showVerticalGrid": boolean;
-        /**
           * Use postMessage event to communicate
@@ -88,9 +80,5 @@ */
         /**
-          * Client custom styling via url content
-         */
-        "clientStylingUrlContent"?: string;
-        /**
           * Client custom styling via url
          */
-        "clientStylingurl"?: string;
+        "clientStylingUrl"?: string;
         /**
@@ -134,6 +122,2 @@ * Endpoint URL for the source of data
         /**
-          * Property used to display the button
-         */
-        "showVerticalGrid"?: boolean;
-        /**
           * Use postMessage event to communicate
@@ -140,0 +124,0 @@ */

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

@@ -22,8 +22,4 @@ import { EventEmitter } from '../../stencil-public-runtime';
   */
-  clientStylingurl: string;
+  clientStylingUrl: string;
   /**
-  * Client custom styling via url content
-  */
-  clientStylingUrlContent: string;
-  /**
    * Property used to display the publishing date
@@ -49,6 +45,2 @@ */
   /**
-   * Property used to display the button
-   */
-  showVerticalGrid: boolean;
-  /**
    * Use postMessage event to communicate
@@ -69,5 +61,5 @@ */
   private blogData;
-  toggleClass(): void;
   handleAction(postId: any): void;
   connectedCallback(): void;
+  componentDidLoad(): void;
   getBlogArticleGrid(): void;
@@ -74,0 +66,0 @@ componentDidRender(): void;

package.json

 {
   "name": "@everymatrix/blog-articles-grid",
-  "version": "1.10.10",
+  "version": "1.10.11",
   "main": "./dist/index.cjs.js",
@@ -18,3 +18,7 @@ "module": "./dist/index.js",
     "access": "public"
+  },
+  "dependencies": {
+    "@everymatrix/helper-modal": "*",
+    "@stencil/core": "2.17.4"
   }
 }

New alerts

Wildcard dependency

Quality

Package has a dependency with a floating version range. This can cause issues if the dependency publishes a new major version.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Number of medium supply chain risk alerts

12

decreased by-7.69%

Worsened metrics

Total package byte prevSize

351689

decreased by-0.6%

Dependency count

2

increased byInfinity%

Lines of code

5960

decreased by-1.42%

Number of medium quality alerts

3

increased by50%

Dependency changes

• + Added@everymatrix/helper-modal@*

• + Added@stencil/core@2.17.4

• + Added@everymatrix/helper-modal@1.50.0(transitive)

• + Added@stencil/core@2.17.4(transitive)