@ptcwebops/ptcw-design 3.7.0 → 3.7.2

package/dist/esm/author-listing-example.entry.js

@@ -1,239 +1,239 @@
-import { r as registerInstance, h, a as getElement } from './index-4025d85a.js';
+import { r as registerInstance, h, a as getElement } from './index-3309fc22.js';
 
 const authorListingExampleCss = ":host{display:block}:host .loader{margin:5rem auto;max-width:45px;position:relative;width:100%}:host .author-grid{width:100%;display:flex;flex-wrap:wrap;grid-row-gap:2rem;grid-column-gap:2rem;justify-content:center}:host .author-grid .author-col{width:100%}@media (min-width: 768px){:host .author-grid .author-col{width:calc(50% - 21.3333333px)}}@media (min-width: 992px){:host .author-grid .author-col{width:calc(33.333333333333% - 21.3333333px)}}";
 
-const AuthorListingExample = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    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"
-      },
-    ];
-  }
-  componentWillLoad() {
-    this.loadMoreCards();
-  }
-  handleScroll() {
-    const windowHeight = window.innerHeight;
-    const documentHeight = document.documentElement.scrollHeight;
-    const scrollTop = window.scrollY || document.documentElement.scrollTop;
-    const scrollBottom = scrollTop + windowHeight;
-    const threshold = 5;
-    if (!this.isLoading && scrollBottom + threshold >= 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" }))))));
-  }
-  get el() { return getElement(this); }
-};
+const AuthorListingExample = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    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"
+      },
+    ];
+  }
+  componentWillLoad() {
+    this.loadMoreCards();
+  }
+  handleScroll() {
+    const windowHeight = window.innerHeight;
+    const documentHeight = document.documentElement.scrollHeight;
+    const scrollTop = window.scrollY || document.documentElement.scrollTop;
+    const scrollBottom = scrollTop + windowHeight;
+    const threshold = 5;
+    if (!this.isLoading && scrollBottom + threshold >= 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" }))))));
+  }
+  get el() { return getElement(this); }
+};
 AuthorListingExample.style = authorListingExampleCss;
 
 export { AuthorListingExample as author_listing_example };