@ptcwebops/ptcw-design 2.2.9 → 2.3.2

package/dist/collection/components/organism-bundles/author-listing-example/author-listing-example.js

@@ -1,281 +1,281 @@
-import { h } from '@stencil/core';
-export class AuthorListingExample {
-  constructor() {
-    this.defaultAuthorImage = undefined;
-    this.isLoading = false;
-    this.loadedCardCount = 0;
-    this.cardsPerLoad = 9;
-    this.cardData = [
-      {
-        id: 1,
-        authorName: "Aaron Shaw",
-        imageUrl: "https://www.ptc.com/-/media/Images/blog/Authors/Blog_AaronShaw_2.jpg",
-        DetailPagelink: "https://www.ptc.com/en/blog-authors/Aaron-Shaw",
-        description: "Aaron Shaw joined PTC in 2013, currently he is the Senior Manager, CAD Demand Generation. He is responsible for"
-      },
-      {
-        id: 2,
-        authorName: "Abby Eon",
-        imageUrl: "https://www.ptc.com/-/media/Images/new-org/399x200/abby-eon-400x200.jpg",
-        DetailPagelink: "https://www.ptc.com/en/blog-authors/Abby-Eon",
-        description: "Abby Eon is Senior Vice President and General Manager, Kepware. As part of her role, Abby looks after "
-      },
-      {
-        id: 3,
-        authorName: "Catherine Kniker",
-        imageUrl: "https://www.ptc.com/-/media/Images/blog/Authors/catherine-kniker.jpg",
-        DetailPagelink: "https://www.ptc.com/en/blog-authors/Catherine-Kniker",
-        description: "Catherine is EVP and Chief Strategy and Marketing Officer at PTC, responsible for positioning the company for success"
-      },
-      {
-        id: 4,
-        authorName: "Maria Lowry, Manager, Kalypso",
-        imageUrl: "https://www.ptc.com/-/media/Images/blog/Authors/blog-Maria-Lowry.jpg",
-        DetailPagelink: "https://www.ptc.com/en/blog-authors/Maria-Lowry",
-        description: "Maria brings seven years of professional experience to her clients. She is committed to improving product quality, safety, sustainability"
-      },
-      {
-        id: 5,
-        authorName: "Author name",
-        imageUrl: "",
-        DetailPagelink: "#",
-        description: "Author description text goes here Author description text goes here Author description text goes here Author description text goes here Author description text goes here"
-      },
-      {
-        id: 1,
-        authorName: "Aaron Shaw",
-        imageUrl: "https://www.ptc.com/-/media/Images/blog/Authors/Blog_AaronShaw_2.jpg",
-        DetailPagelink: "https://www.ptc.com/en/blog-authors/Aaron-Shaw",
-        description: "Aaron Shaw joined PTC in 2013, currently he is the Senior Manager, CAD Demand Generation. He is responsible for"
-      },
-      {
-        id: 2,
-        authorName: "Abby Eon",
-        imageUrl: "https://www.ptc.com/-/media/Images/new-org/399x200/abby-eon-400x200.jpg",
-        DetailPagelink: "https://www.ptc.com/en/blog-authors/Abby-Eon",
-        description: "Abby Eon is Senior Vice President and General Manager, Kepware. As part of her role, Abby looks after "
-      },
-      {
-        id: 3,
-        authorName: "Catherine Kniker",
-        imageUrl: "https://www.ptc.com/-/media/Images/blog/Authors/catherine-kniker.jpg",
-        DetailPagelink: "https://www.ptc.com/en/blog-authors/Catherine-Kniker",
-        description: "Catherine is EVP and Chief Strategy and Marketing Officer at PTC, responsible for positioning the company for success"
-      },
-      {
-        id: 4,
-        authorName: "Maria Lowry, Manager, Kalypso",
-        imageUrl: "https://www.ptc.com/-/media/Images/blog/Authors/blog-Maria-Lowry.jpg",
-        DetailPagelink: "https://www.ptc.com/en/blog-authors/Maria-Lowry",
-        description: "Maria brings seven years of professional experience to her clients. She is committed to improving product quality, safety, sustainability"
-      },
-      {
-        id: 5,
-        authorName: "Author name",
-        imageUrl: "",
-        DetailPagelink: "#",
-        description: "Author description text goes here Author description text goes here Author description text goes here Author description text goes here Author description text goes here"
-      }, {
-        id: 6,
-        authorName: "Aaron Shaw",
-        imageUrl: "https://www.ptc.com/-/media/Images/blog/Authors/Blog_AaronShaw_2.jpg",
-        DetailPagelink: "https://www.ptc.com/en/blog-authors/Aaron-Shaw",
-        description: "Aaron Shaw joined PTC in 2013, currently he is the Senior Manager, CAD Demand Generation. He is responsible for"
-      },
-      {
-        id: 7,
-        authorName: "Abby Eon",
-        imageUrl: "https://www.ptc.com/-/media/Images/new-org/399x200/abby-eon-400x200.jpg",
-        DetailPagelink: "https://www.ptc.com/en/blog-authors/Abby-Eon",
-        description: "Abby Eon is Senior Vice President and General Manager, Kepware. As part of her role, Abby looks after "
-      },
-      {
-        id: 8,
-        authorName: "Catherine Kniker",
-        imageUrl: "https://www.ptc.com/-/media/Images/blog/Authors/catherine-kniker.jpg",
-        DetailPagelink: "https://www.ptc.com/en/blog-authors/Catherine-Kniker",
-        description: "Catherine is EVP and Chief Strategy and Marketing Officer at PTC, responsible for positioning the company for success"
-      },
-      {
-        id: 9,
-        authorName: "Maria Lowry, Manager, Kalypso",
-        imageUrl: "https://www.ptc.com/-/media/Images/blog/Authors/blog-Maria-Lowry.jpg",
-        DetailPagelink: "https://www.ptc.com/en/blog-authors/Maria-Lowry",
-        description: "Maria brings seven years of professional experience to her clients. She is committed to improving product quality, safety, sustainability"
-      },
-      {
-        id: 10,
-        authorName: "Author name",
-        imageUrl: "",
-        DetailPagelink: "#",
-        description: "Author description text goes here Author description text goes here Author description text goes here Author description text goes here Author description text goes here"
-      }, {
-        id: 11,
-        authorName: "Aaron Shaw",
-        imageUrl: "https://www.ptc.com/-/media/Images/blog/Authors/Blog_AaronShaw_2.jpg",
-        DetailPagelink: "https://www.ptc.com/en/blog-authors/Aaron-Shaw",
-        description: "Aaron Shaw joined PTC in 2013, currently he is the Senior Manager, CAD Demand Generation. He is responsible for"
-      },
-      {
-        id: 12,
-        authorName: "Abby Eon",
-        imageUrl: "https://www.ptc.com/-/media/Images/new-org/399x200/abby-eon-400x200.jpg",
-        DetailPagelink: "https://www.ptc.com/en/blog-authors/Abby-Eon",
-        description: "Abby Eon is Senior Vice President and General Manager, Kepware. As part of her role, Abby looks after "
-      },
-      {
-        id: 13,
-        authorName: "Catherine Kniker",
-        imageUrl: "https://www.ptc.com/-/media/Images/blog/Authors/catherine-kniker.jpg",
-        DetailPagelink: "https://www.ptc.com/en/blog-authors/Catherine-Kniker",
-        description: "Catherine is EVP and Chief Strategy and Marketing Officer at PTC, responsible for positioning the company for success"
-      },
-      {
-        id: 14,
-        authorName: "Maria Lowry, Manager, Kalypso",
-        imageUrl: "https://www.ptc.com/-/media/Images/blog/Authors/blog-Maria-Lowry.jpg",
-        DetailPagelink: "https://www.ptc.com/en/blog-authors/Maria-Lowry",
-        description: "Maria brings seven years of professional experience to her clients. She is committed to improving product quality, safety, sustainability"
-      },
-      {
-        id: 15,
-        authorName: "Author name",
-        imageUrl: "",
-        DetailPagelink: "#",
-        description: "Author description text goes here Author description text goes here Author description text goes here Author description text goes here Author description text goes here"
-      },
-      {
-        id: 16,
-        authorName: "Aaron Shaw",
-        imageUrl: "https://www.ptc.com/-/media/Images/blog/Authors/Blog_AaronShaw_2.jpg",
-        DetailPagelink: "https://www.ptc.com/en/blog-authors/Aaron-Shaw",
-        description: "Aaron Shaw joined PTC in 2013, currently he is the Senior Manager, CAD Demand Generation. He is responsible for"
-      },
-      {
-        id: 17,
-        authorName: "Abby Eon",
-        imageUrl: "https://www.ptc.com/-/media/Images/new-org/399x200/abby-eon-400x200.jpg",
-        DetailPagelink: "https://www.ptc.com/en/blog-authors/Abby-Eon",
-        description: "Abby Eon is Senior Vice President and General Manager, Kepware. As part of her role, Abby looks after "
-      },
-      {
-        id: 18,
-        authorName: "Catherine Kniker",
-        imageUrl: "https://www.ptc.com/-/media/Images/blog/Authors/catherine-kniker.jpg",
-        DetailPagelink: "https://www.ptc.com/en/blog-authors/Catherine-Kniker",
-        description: "Catherine is EVP and Chief Strategy and Marketing Officer at PTC, responsible for positioning the company for success"
-      },
-      {
-        id: 19,
-        authorName: "Maria Lowry, Manager, Kalypso",
-        imageUrl: "https://www.ptc.com/-/media/Images/blog/Authors/blog-Maria-Lowry.jpg",
-        DetailPagelink: "https://www.ptc.com/en/blog-authors/Maria-Lowry",
-        description: "Maria brings seven years of professional experience to her clients. She is committed to improving product quality, safety, sustainability"
-      },
-      {
-        id: 20,
-        authorName: "Author name",
-        imageUrl: "",
-        DetailPagelink: "#",
-        description: "Author description text goes here Author description text goes here Author description text goes here Author description text goes here Author description text goes here"
-      },
-      {
-        id: 21,
-        authorName: "Catherine Kniker",
-        imageUrl: "https://www.ptc.com/-/media/Images/blog/Authors/catherine-kniker.jpg",
-        DetailPagelink: "https://www.ptc.com/en/blog-authors/Catherine-Kniker",
-        description: "Catherine is EVP and Chief Strategy and Marketing Officer at PTC, responsible for positioning the company for success"
-      },
-    ];
-  }
-  componentDidLoad() {
-    this.loadMoreCards();
-  }
-  handleScroll() {
-    const windowHeight = window.innerHeight;
-    const documentHeight = document.documentElement.scrollHeight;
-    const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
-    const scrollBottom = scrollTop + windowHeight;
-    if (!this.isLoading && scrollBottom >= documentHeight) {
-      this.loadMoreCards();
-    }
-  }
-  async loadMoreCards() {
-    if (this.loadedCardCount < this.cardData.length) {
-      this.isLoading = true;
-      const visibleCardData = this.cardData.slice(this.loadedCardCount, this.loadedCardCount + this.cardsPerLoad);
-      const promises = visibleCardData.map((card) => {
-        return new Promise((resolve) => {
-          const image = new Image();
-          image.src = card.imageUrl;
-          image.onload = () => {
-            resolve();
-          };
-          image.onerror = () => {
-            // Load a dummy image in case of error
-            card.imageUrl = this.defaultAuthorImage;
-            resolve();
-          };
-        });
-      });
-      await Promise.all(promises);
-      this.loadedCardCount += this.cardsPerLoad;
-      this.isLoading = false;
-    }
-  }
-  render() {
-    const visibleCards = this.cardData.slice(0, this.loadedCardCount);
-    return (h("div", null, h("div", { class: "author-grid" }, visibleCards.map((card, index) => (h("div", { class: "author-col", key: index }, h("ptc-card", { "has-image": "true", "card-type": "related-card", "card-href": card.DetailPagelink, heading: card.authorName }, h("ptc-img", { slot: "slot-image", "img-url": card.imageUrl, "image-type": "smart-img", "load-mode": "lazy-bg" }), h("div", { slot: "slot-description" }, h("ptc-para", { "font-size": "x-small", "font-weight": "w-4", "para-line-h": "line-height-densest", "para-margin": "margin-flush", "para-z-index": "z-auto" }, h("ptc-tooltip", { description: card.description, "text-lines": "4", "z-index": "z-auto" })))))))), this.isLoading && h("div", { class: "loader" }, h("svg", { preserveAspectRatio: "xMinYMin meet", fill: "#3CC73D", x: "0px", y: "0px", version: "1.1", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 182.1 210.2" }, h("title", null, "list-loading"), h("path", { d: "M91,21.2l72.6,41.9v83.9L91,189l-72.6-41.9V63.2L91,21.2 M91,0L0,52.6v105.1l91,52.6l91-52.6V52.6L91,0L91,0z" }), h("g", null, h("polygon", { points: "67.5,105.5 67.5,163.1 67.5,165.4 43.9,151.8 43.9,149.4 43.9,100" }), h("polygon", { opacity: "0.7", points: "43.6,100.1 43.8,100 43.9,100 43.9,149.4 43.9,149.4 43.9,151.8 30.3,144 30.3,141.6 30.3,106.6" }), h("animate", { attributeName: "fill-opacity", begin: "100ms", dur: "1s", values: "1;.2;1", calcMode: "linear", repeatCount: "indefinite" })), h("g", null, h("polygon", { points: "109.6,88.6 109.6,166.2 109.6,168.3 91,179 81.1,173.3 81.1,170.9 81.1,84.2" }), h("polygon", { opacity: "0.7", points: "81.1,84.2 81.1,170.9 81.1,173.3 67.5,165.4 67.5,163.1 67.5,105.5" }), h("animate", { attributeName: "fill-opacity", begin: "300ms", dur: "1s", values: "1;.2;1", calcMode: "linear", repeatCount: "indefinite" })), h("g", null, h("polygon", { points: "154,70.2 154,70.2 154,142.7 122.9,160.5 122.9,158.5 122.9,65.8" }), h("polygon", { opacity: "0.7", points: "122.9,65.8 122.9,158.5 122.9,160.5 109.6,168.3 109.6,168.3 109.6,166.2 109.6,88.6" }), h("animate", { attributeName: "fill-opacity", begin: "500ms", dur: "1s", values: "1;.2;1", calcMode: "linear", repeatCount: "indefinite" }))))));
-  }
-  static get is() { return "author-listing-example"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["author-listing-example.css"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["author-listing-example.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "defaultAuthorImage": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "default-author-image",
-        "reflect": false
-      }
-    };
-  }
-  static get states() {
-    return {
-      "isLoading": {},
-      "loadedCardCount": {},
-      "cardsPerLoad": {},
-      "cardData": {}
-    };
-  }
-  static get elementRef() { return "el"; }
-  static get listeners() {
-    return [{
-        "name": "scroll",
-        "method": "handleScroll",
-        "target": "window",
-        "capture": false,
-        "passive": true
-      }];
-  }
-}
+import { h } from '@stencil/core';
+export class AuthorListingExample {
+  constructor() {
+    this.defaultAuthorImage = undefined;
+    this.isLoading = false;
+    this.loadedCardCount = 0;
+    this.cardsPerLoad = 9;
+    this.cardData = [
+      {
+        id: 1,
+        authorName: "Aaron Shaw",
+        imageUrl: "https://www.ptc.com/-/media/Images/blog/Authors/Blog_AaronShaw_2.jpg",
+        DetailPagelink: "https://www.ptc.com/en/blog-authors/Aaron-Shaw",
+        description: "Aaron Shaw joined PTC in 2013, currently he is the Senior Manager, CAD Demand Generation. He is responsible for"
+      },
+      {
+        id: 2,
+        authorName: "Abby Eon",
+        imageUrl: "https://www.ptc.com/-/media/Images/new-org/399x200/abby-eon-400x200.jpg",
+        DetailPagelink: "https://www.ptc.com/en/blog-authors/Abby-Eon",
+        description: "Abby Eon is Senior Vice President and General Manager, Kepware. As part of her role, Abby looks after "
+      },
+      {
+        id: 3,
+        authorName: "Catherine Kniker",
+        imageUrl: "https://www.ptc.com/-/media/Images/blog/Authors/catherine-kniker.jpg",
+        DetailPagelink: "https://www.ptc.com/en/blog-authors/Catherine-Kniker",
+        description: "Catherine is EVP and Chief Strategy and Marketing Officer at PTC, responsible for positioning the company for success"
+      },
+      {
+        id: 4,
+        authorName: "Maria Lowry, Manager, Kalypso",
+        imageUrl: "https://www.ptc.com/-/media/Images/blog/Authors/blog-Maria-Lowry.jpg",
+        DetailPagelink: "https://www.ptc.com/en/blog-authors/Maria-Lowry",
+        description: "Maria brings seven years of professional experience to her clients. She is committed to improving product quality, safety, sustainability"
+      },
+      {
+        id: 5,
+        authorName: "Author name",
+        imageUrl: "",
+        DetailPagelink: "#",
+        description: "Author description text goes here Author description text goes here Author description text goes here Author description text goes here Author description text goes here"
+      },
+      {
+        id: 1,
+        authorName: "Aaron Shaw",
+        imageUrl: "https://www.ptc.com/-/media/Images/blog/Authors/Blog_AaronShaw_2.jpg",
+        DetailPagelink: "https://www.ptc.com/en/blog-authors/Aaron-Shaw",
+        description: "Aaron Shaw joined PTC in 2013, currently he is the Senior Manager, CAD Demand Generation. He is responsible for"
+      },
+      {
+        id: 2,
+        authorName: "Abby Eon",
+        imageUrl: "https://www.ptc.com/-/media/Images/new-org/399x200/abby-eon-400x200.jpg",
+        DetailPagelink: "https://www.ptc.com/en/blog-authors/Abby-Eon",
+        description: "Abby Eon is Senior Vice President and General Manager, Kepware. As part of her role, Abby looks after "
+      },
+      {
+        id: 3,
+        authorName: "Catherine Kniker",
+        imageUrl: "https://www.ptc.com/-/media/Images/blog/Authors/catherine-kniker.jpg",
+        DetailPagelink: "https://www.ptc.com/en/blog-authors/Catherine-Kniker",
+        description: "Catherine is EVP and Chief Strategy and Marketing Officer at PTC, responsible for positioning the company for success"
+      },
+      {
+        id: 4,
+        authorName: "Maria Lowry, Manager, Kalypso",
+        imageUrl: "https://www.ptc.com/-/media/Images/blog/Authors/blog-Maria-Lowry.jpg",
+        DetailPagelink: "https://www.ptc.com/en/blog-authors/Maria-Lowry",
+        description: "Maria brings seven years of professional experience to her clients. She is committed to improving product quality, safety, sustainability"
+      },
+      {
+        id: 5,
+        authorName: "Author name",
+        imageUrl: "",
+        DetailPagelink: "#",
+        description: "Author description text goes here Author description text goes here Author description text goes here Author description text goes here Author description text goes here"
+      }, {
+        id: 6,
+        authorName: "Aaron Shaw",
+        imageUrl: "https://www.ptc.com/-/media/Images/blog/Authors/Blog_AaronShaw_2.jpg",
+        DetailPagelink: "https://www.ptc.com/en/blog-authors/Aaron-Shaw",
+        description: "Aaron Shaw joined PTC in 2013, currently he is the Senior Manager, CAD Demand Generation. He is responsible for"
+      },
+      {
+        id: 7,
+        authorName: "Abby Eon",
+        imageUrl: "https://www.ptc.com/-/media/Images/new-org/399x200/abby-eon-400x200.jpg",
+        DetailPagelink: "https://www.ptc.com/en/blog-authors/Abby-Eon",
+        description: "Abby Eon is Senior Vice President and General Manager, Kepware. As part of her role, Abby looks after "
+      },
+      {
+        id: 8,
+        authorName: "Catherine Kniker",
+        imageUrl: "https://www.ptc.com/-/media/Images/blog/Authors/catherine-kniker.jpg",
+        DetailPagelink: "https://www.ptc.com/en/blog-authors/Catherine-Kniker",
+        description: "Catherine is EVP and Chief Strategy and Marketing Officer at PTC, responsible for positioning the company for success"
+      },
+      {
+        id: 9,
+        authorName: "Maria Lowry, Manager, Kalypso",
+        imageUrl: "https://www.ptc.com/-/media/Images/blog/Authors/blog-Maria-Lowry.jpg",
+        DetailPagelink: "https://www.ptc.com/en/blog-authors/Maria-Lowry",
+        description: "Maria brings seven years of professional experience to her clients. She is committed to improving product quality, safety, sustainability"
+      },
+      {
+        id: 10,
+        authorName: "Author name",
+        imageUrl: "",
+        DetailPagelink: "#",
+        description: "Author description text goes here Author description text goes here Author description text goes here Author description text goes here Author description text goes here"
+      }, {
+        id: 11,
+        authorName: "Aaron Shaw",
+        imageUrl: "https://www.ptc.com/-/media/Images/blog/Authors/Blog_AaronShaw_2.jpg",
+        DetailPagelink: "https://www.ptc.com/en/blog-authors/Aaron-Shaw",
+        description: "Aaron Shaw joined PTC in 2013, currently he is the Senior Manager, CAD Demand Generation. He is responsible for"
+      },
+      {
+        id: 12,
+        authorName: "Abby Eon",
+        imageUrl: "https://www.ptc.com/-/media/Images/new-org/399x200/abby-eon-400x200.jpg",
+        DetailPagelink: "https://www.ptc.com/en/blog-authors/Abby-Eon",
+        description: "Abby Eon is Senior Vice President and General Manager, Kepware. As part of her role, Abby looks after "
+      },
+      {
+        id: 13,
+        authorName: "Catherine Kniker",
+        imageUrl: "https://www.ptc.com/-/media/Images/blog/Authors/catherine-kniker.jpg",
+        DetailPagelink: "https://www.ptc.com/en/blog-authors/Catherine-Kniker",
+        description: "Catherine is EVP and Chief Strategy and Marketing Officer at PTC, responsible for positioning the company for success"
+      },
+      {
+        id: 14,
+        authorName: "Maria Lowry, Manager, Kalypso",
+        imageUrl: "https://www.ptc.com/-/media/Images/blog/Authors/blog-Maria-Lowry.jpg",
+        DetailPagelink: "https://www.ptc.com/en/blog-authors/Maria-Lowry",
+        description: "Maria brings seven years of professional experience to her clients. She is committed to improving product quality, safety, sustainability"
+      },
+      {
+        id: 15,
+        authorName: "Author name",
+        imageUrl: "",
+        DetailPagelink: "#",
+        description: "Author description text goes here Author description text goes here Author description text goes here Author description text goes here Author description text goes here"
+      },
+      {
+        id: 16,
+        authorName: "Aaron Shaw",
+        imageUrl: "https://www.ptc.com/-/media/Images/blog/Authors/Blog_AaronShaw_2.jpg",
+        DetailPagelink: "https://www.ptc.com/en/blog-authors/Aaron-Shaw",
+        description: "Aaron Shaw joined PTC in 2013, currently he is the Senior Manager, CAD Demand Generation. He is responsible for"
+      },
+      {
+        id: 17,
+        authorName: "Abby Eon",
+        imageUrl: "https://www.ptc.com/-/media/Images/new-org/399x200/abby-eon-400x200.jpg",
+        DetailPagelink: "https://www.ptc.com/en/blog-authors/Abby-Eon",
+        description: "Abby Eon is Senior Vice President and General Manager, Kepware. As part of her role, Abby looks after "
+      },
+      {
+        id: 18,
+        authorName: "Catherine Kniker",
+        imageUrl: "https://www.ptc.com/-/media/Images/blog/Authors/catherine-kniker.jpg",
+        DetailPagelink: "https://www.ptc.com/en/blog-authors/Catherine-Kniker",
+        description: "Catherine is EVP and Chief Strategy and Marketing Officer at PTC, responsible for positioning the company for success"
+      },
+      {
+        id: 19,
+        authorName: "Maria Lowry, Manager, Kalypso",
+        imageUrl: "https://www.ptc.com/-/media/Images/blog/Authors/blog-Maria-Lowry.jpg",
+        DetailPagelink: "https://www.ptc.com/en/blog-authors/Maria-Lowry",
+        description: "Maria brings seven years of professional experience to her clients. She is committed to improving product quality, safety, sustainability"
+      },
+      {
+        id: 20,
+        authorName: "Author name",
+        imageUrl: "",
+        DetailPagelink: "#",
+        description: "Author description text goes here Author description text goes here Author description text goes here Author description text goes here Author description text goes here"
+      },
+      {
+        id: 21,
+        authorName: "Catherine Kniker",
+        imageUrl: "https://www.ptc.com/-/media/Images/blog/Authors/catherine-kniker.jpg",
+        DetailPagelink: "https://www.ptc.com/en/blog-authors/Catherine-Kniker",
+        description: "Catherine is EVP and Chief Strategy and Marketing Officer at PTC, responsible for positioning the company for success"
+      },
+    ];
+  }
+  componentDidLoad() {
+    this.loadMoreCards();
+  }
+  handleScroll() {
+    const windowHeight = window.innerHeight;
+    const documentHeight = document.documentElement.scrollHeight;
+    const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
+    const scrollBottom = scrollTop + windowHeight;
+    if (!this.isLoading && scrollBottom >= documentHeight) {
+      this.loadMoreCards();
+    }
+  }
+  async loadMoreCards() {
+    if (this.loadedCardCount < this.cardData.length) {
+      this.isLoading = true;
+      const visibleCardData = this.cardData.slice(this.loadedCardCount, this.loadedCardCount + this.cardsPerLoad);
+      const promises = visibleCardData.map((card) => {
+        return new Promise((resolve) => {
+          const image = new Image();
+          image.src = card.imageUrl;
+          image.onload = () => {
+            resolve();
+          };
+          image.onerror = () => {
+            // Load a dummy image in case of error
+            card.imageUrl = this.defaultAuthorImage;
+            resolve();
+          };
+        });
+      });
+      await Promise.all(promises);
+      this.loadedCardCount += this.cardsPerLoad;
+      this.isLoading = false;
+    }
+  }
+  render() {
+    const visibleCards = this.cardData.slice(0, this.loadedCardCount);
+    return (h("div", null, h("div", { class: "author-grid" }, visibleCards.map((card, index) => (h("div", { class: "author-col", key: index }, h("ptc-card", { "has-image": "true", "card-type": "related-card", "card-href": card.DetailPagelink, heading: card.authorName }, h("ptc-img", { slot: "slot-image", "img-url": card.imageUrl, "image-type": "smart-img", "load-mode": "lazy-bg" }), h("div", { slot: "slot-description" }, h("ptc-para", { "font-size": "x-small", "font-weight": "w-4", "para-line-h": "line-height-densest", "para-margin": "margin-flush", "para-z-index": "z-auto" }, h("ptc-tooltip", { description: card.description, "text-lines": "4", "z-index": "z-auto" })))))))), this.isLoading && h("div", { class: "loader" }, h("svg", { preserveAspectRatio: "xMinYMin meet", fill: "#3CC73D", x: "0px", y: "0px", version: "1.1", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 182.1 210.2" }, h("title", null, "list-loading"), h("path", { d: "M91,21.2l72.6,41.9v83.9L91,189l-72.6-41.9V63.2L91,21.2 M91,0L0,52.6v105.1l91,52.6l91-52.6V52.6L91,0L91,0z" }), h("g", null, h("polygon", { points: "67.5,105.5 67.5,163.1 67.5,165.4 43.9,151.8 43.9,149.4 43.9,100" }), h("polygon", { opacity: "0.7", points: "43.6,100.1 43.8,100 43.9,100 43.9,149.4 43.9,149.4 43.9,151.8 30.3,144 30.3,141.6 30.3,106.6" }), h("animate", { attributeName: "fill-opacity", begin: "100ms", dur: "1s", values: "1;.2;1", calcMode: "linear", repeatCount: "indefinite" })), h("g", null, h("polygon", { points: "109.6,88.6 109.6,166.2 109.6,168.3 91,179 81.1,173.3 81.1,170.9 81.1,84.2" }), h("polygon", { opacity: "0.7", points: "81.1,84.2 81.1,170.9 81.1,173.3 67.5,165.4 67.5,163.1 67.5,105.5" }), h("animate", { attributeName: "fill-opacity", begin: "300ms", dur: "1s", values: "1;.2;1", calcMode: "linear", repeatCount: "indefinite" })), h("g", null, h("polygon", { points: "154,70.2 154,70.2 154,142.7 122.9,160.5 122.9,158.5 122.9,65.8" }), h("polygon", { opacity: "0.7", points: "122.9,65.8 122.9,158.5 122.9,160.5 109.6,168.3 109.6,168.3 109.6,166.2 109.6,88.6" }), h("animate", { attributeName: "fill-opacity", begin: "500ms", dur: "1s", values: "1;.2;1", calcMode: "linear", repeatCount: "indefinite" }))))));
+  }
+  static get is() { return "author-listing-example"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["author-listing-example.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["author-listing-example.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "defaultAuthorImage": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "default-author-image",
+        "reflect": false
+      }
+    };
+  }
+  static get states() {
+    return {
+      "isLoading": {},
+      "loadedCardCount": {},
+      "cardsPerLoad": {},
+      "cardData": {}
+    };
+  }
+  static get elementRef() { return "el"; }
+  static get listeners() {
+    return [{
+        "name": "scroll",
+        "method": "handleScroll",
+        "target": "window",
+        "capture": false,
+        "passive": true
+      }];
+  }
+}