@everymatrix/blog-articles-grid 1.0.69

package/dist/cjs/index.cjs.js

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

package/dist/cjs/loader.cjs.js

@@ -0,0 +1,15 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-fad8e671.js');
+const appGlobals = require('./app-globals-3a1e7e63.js');
+
+const defineCustomElements = async (win, options) => {
+  if (typeof window === 'undefined') return undefined;
+  await appGlobals.globalScripts();
+  return index.bootstrapLazy([["blog-articles-grid_2.cjs",[[1,"blog-articles-grid",{"cmsEndpoint":[513,"cms-endpoint"],"language":[513],"userRoles":[513,"user-roles"],"cmsEnv":[513,"cms-env"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"showPublishingDate":[516,"show-publishing-date"],"showImage":[516,"show-image"],"showTitle":[516,"show-title"],"showContent":[516,"show-content"],"showButton":[516,"show-button"],"usePostmessage":[516,"use-postmessage"],"postMessageEvent":[513,"post-message-event"],"blogsLimit":[513,"blogs-limit"],"paginationActive":[516,"pagination-active"],"arrowsActive":[516,"arrows-active"],"secondaryArrowsActive":[516,"secondary-arrows-active"],"numberedNavActive":[516,"numbered-nav-active"],"intlDateTimeFormat":[513,"intl-date-time-format"],"page":[513],"paginationBlogList":[32],"currentPage":[32],"hasErrors":[32],"isLoading":[32],"bannerMatrixReady":[32],"nextPage":[32],"previousPage":[32],"device":[32],"blogData":[32],"totalBlogs":[32]},[[8,"BannerMatrixReady","handleBannerReady"],[0,"hpPageChange","hpPageChange"]],{"page":["watchEndpoint"],"hasErrors":["watchEndpoint"],"cmsEndpoint":["watchEndpoint"],"language":["watchEndpoint"],"cmsEnv":["watchEndpoint"],"userRoles":["watchEndpoint"],"blogsLimit":["watchEndpoint"],"clientStyling":["handleStylingChange"],"clientStylingUrl":["handleStylingChange"]}],[1,"helper-pagination",{"nextPage":[1537,"next-page"],"prevPage":[1537,"prev-page"],"offset":[1538],"limit":[1538],"total":[1538],"language":[1537],"clientStyling":[1537,"client-styling"],"clientStylingUrlContent":[1537,"client-styling-url-content"],"arrowsActive":[1540,"arrows-active"],"secondaryArrowsActive":[1540,"secondary-arrows-active"],"numberedNavActive":[1540,"numbered-nav-active"],"offsetInt":[32],"lastPage":[32],"previousPage":[32],"limitInt":[32],"totalInt":[32],"pagesArray":[32],"endInt":[32],"limitStylingAppends":[32]}]]]], options);
+};
+
+exports.setNonce = index.setNonce;
+exports.defineCustomElements = defineCustomElements;

package/dist/collection/collection-manifest.json

@@ -0,0 +1,19 @@
+{
+  "entries": [
+    "components/blog-articles-grid/blog-articles-grid.js"
+  ],
+  "compiler": {
+    "name": "@stencil/core",
+    "version": "4.20.0",
+    "typescriptVersion": "5.5.3"
+  },
+  "collections": [
+    {
+      "name": "@everymatrix/helper-pagination",
+      "tags": [
+        "helper-pagination"
+      ]
+    }
+  ],
+  "bundles": []
+}

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

@@ -0,0 +1,167 @@
+:host {
+  display: block;
+}
+
+.BlogPageContainer {
+  background: #0A0A17;
+  padding: 20px;
+}
+
+.GridContainerWrapper {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 20px;
+}
+
+.BlogPage-0 .GridContainer.FeaturedPost:first-child {
+  width: 100%;
+  flex-basis: auto;
+}
+
+.GridContainer {
+  container-type: inline-size;
+  container-name: article;
+  border-radius: 15px;
+  color: #000;
+  overflow: hidden;
+}
+.GridContainer.FeaturedPost:first-child {
+  grid-column: 1/-1;
+  width: 100%;
+}
+.GridContainer .GridWrapper {
+  display: flex;
+  flex-direction: row;
+  height: 280px;
+  background: var(--emfe-w-color-white, #FFFFFF);
+}
+.GridContainer .GridSector {
+  flex-basis: 50%;
+  position: relative;
+}
+.GridContainer .GridSector:first-of-type {
+  height: 280px;
+  display: flex;
+}
+.GridContainer .GridSector:last-of-type {
+  padding: 20px 40px;
+  display: flex;
+  flex-direction: column;
+}
+.GridContainer .VisualContent {
+  width: 100%;
+}
+.GridContainer .BlogDate {
+  position: absolute;
+  bottom: 0px;
+  left: 30px;
+  font-size: 12px;
+  border-radius: 5px 5px 0 0;
+  padding: 10px;
+  width: fit-content;
+  text-align: center;
+  color: var(--emfe-w-color-white, #FFFFFF);
+  background-color: #CD0B5E;
+  z-index: 1;
+}
+.GridContainer .BlogTitle {
+  font-size: 24px;
+  color: #000;
+  padding-bottom: 10px;
+}
+.GridContainer .BlogContent {
+  display: -webkit-box;
+  font-size: 14px;
+  line-height: 1.2em;
+  -webkit-line-clamp: 6;
+  color: #000;
+  -webkit-box-orient: vertical;
+  box-sizing: border-box;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+.GridContainer .BlogLink {
+  color: #000;
+  position: absolute;
+  bottom: 16px;
+}
+.GridContainer .BlogLink button {
+  font-size: 14px;
+  border: none;
+  padding: 0;
+  background: none;
+  color: #D0046C;
+  cursor: pointer;
+}
+
+@container article (max-width: 550px) {
+  .GridContainer .GridWrapper {
+    height: 380px;
+    flex-direction: column;
+  }
+  .GridContainer .GridWrapper .GridSector:first-of-type {
+    height: 120px;
+    flex-shrink: 0;
+    flex-basis: 150px;
+  }
+  .GridContainer .GridWrapper .GridSector:last-of-type {
+    padding: 20px 20px 40px;
+  }
+}
+.LoadingImage {
+  width: 100%;
+  height: 100%;
+  background-color: var(--emfe-w-color-gray-100, #E6E6E6);
+}
+
+.LoadingStripe {
+  border: 1px solid var(--emfe-w-color-white, #FFFFFF);
+  height: 20%;
+  background-color: var(--emfe-w-color-gray-100, #E6E6E6);
+  margin-bottom: 5px;
+}
+
+.LoadingSmallStripe {
+  width: 40%;
+}
+
+.LoadingMediumStripe {
+  width: 70%;
+}
+
+.BlogLink.LoadingLongStripe {
+  position: static;
+  width: 100%;
+}
+
+.GridContainerWrapper.LoadingGrid .GridSector {
+  justify-content: space-around;
+}
+
+.GridContainerWrapper.LoadingGrid .LoadingImage, .GridContainerWrapper.LoadingGrid .LoadingStripe {
+  animation: pulsatingLoader 2s ease-in-out 0s infinite reverse;
+  -webkit-animation: pulsatingLoader 2s ease-in-out 0s infinite reverse;
+}
+
+@keyframes pulsatingLoader {
+  0% {
+    opacity: 0.5;
+  }
+  50% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0.5;
+  }
+}
+@-webkit-keyframes pulsatingLoader {
+  0% {
+    opacity: 0.5;
+  }
+  50% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0.5;
+  }
+}