@ptcwebops/ptcw-design 6.3.65-beta → 6.3.68-beta

package/dist/collection/components/jumbotron-sub-mune/jumbotron-sub-mune.css

@@ -9,8 +9,10 @@ ul,
 li,
 ptc-subnav,
 ptc-tab-list,
-ptc-link, ptc-square-card,
-.hyphenate-text, ptc-footer {
+ptc-link,
+ptc-square-card,
+.hyphenate-text,
+ptc-footer {
   word-break: break-word;
   hyphens: manual;
   -webkit-hyphens: manual;
@@ -29,8 +31,10 @@ ul,
 li,
 ptc-subnav,
 ptc-tab-list,
-ptc-link, ptc-square-card,
-.hyphenate-text, ptc-footer {
+ptc-link,
+ptc-square-card,
+.hyphenate-text,
+ptc-footer {
     hyphens: auto;
     -webkit-hyphenate-limit-before: 3;
     /* For Safari */
@@ -80,7 +84,8 @@ ptc-link, ptc-square-card,
   margin: 0;
 }
 
-.menu-list a, .menu-list button {
+.menu-list a,
+.menu-list button {
   color: white;
   text-decoration: none;
   border: none;
@@ -93,7 +98,8 @@ ptc-link, ptc-square-card,
   white-space: nowrap;
 }
 
-.menu-list a::after, .menu-list button::after {
+.menu-list a::after,
+.menu-list button::after {
   content: "";
   display: block;
   width: 100%;
@@ -104,8 +110,10 @@ ptc-link, ptc-square-card,
   transform-origin: bottom;
 }
 
-.menu-list a:hover::after, .menu-list a:focus::after,
-.menu-list button:hover::after, .menu-list button:focus::after {
+.menu-list a:hover::after,
+.menu-list a:focus::after,
+.menu-list button:hover::after,
+.menu-list button:focus::after {
   transform: scaleX(1);
   transform-origin: left;
 }

package/dist/collection/components/jumbotron-sub-mune/jumbotron-sub-mune.js

@@ -1,16 +1,16 @@
-import { h } from '@stencil/core';
+import { h } from "@stencil/core";
 export class JumbotronSubMune {
   constructor() {
     this.items = undefined;
     this.isOpen = false;
-    this.activeItem = '';
+    this.activeItem = "";
   }
   getItems() {
     try {
       return JSON.parse(this.items);
     }
     catch (e) {
-      console.error('Invalid Json format for items prop', e);
+      console.error("Invalid Json format for items prop", e);
       return [];
     }
   }
@@ -30,7 +30,7 @@ export class JumbotronSubMune {
     const menuItems = this.getItems();
     const upArrow = (h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "15", height: "11", viewBox: "0 0 15 11", fill: "none" }, h("path", { d: "M13 8.5L7.34315 2.71178L1.68629 8.5", stroke: "white", "stroke-width": "3", "stroke-linecap": "round" })));
     const downArrow = (h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "15", height: "11", viewBox: "0 0 15 11", fill: "none" }, h("path", { d: "M13 2.5L7.34315 8.28822L1.68629 2.5", stroke: "white", "stroke-width": "3", "stroke-linecap": "round" })));
-    return (h("nav", { class: "menu" }, h("div", { class: "mobile-menu-icon", onClick: () => this.toggleMenu() }, this.activeItem, h("span", null, this.isOpen ? upArrow : downArrow)), h("ul", { class: `menu-list ${this.isOpen ? 'open' : ''}` }, menuItems.map(item => (h("li", null, item.isButton ? (h("button", { onClick: () => {
+    return (h("nav", { class: "menu" }, h("div", { class: "mobile-menu-icon", onClick: () => this.toggleMenu() }, this.activeItem, h("span", null, this.isOpen ? upArrow : downArrow)), h("ul", { class: `menu-list ${this.isOpen ? "open" : ""}` }, menuItems.map((item) => (h("li", null, item.isButton ? (h("button", { onClick: () => {
         this.selectItem(item);
       } }, item.text)) : (h("a", { href: item.link }, item.text))))))));
   }

package/dist/collection/components/list-item/list-item.css

@@ -9,8 +9,10 @@ ul,
 li,
 ptc-subnav,
 ptc-tab-list,
-ptc-link, ptc-square-card,
-.hyphenate-text, ptc-footer {
+ptc-link,
+ptc-square-card,
+.hyphenate-text,
+ptc-footer {
   word-break: break-word;
   hyphens: manual;
   -webkit-hyphens: manual;
@@ -29,8 +31,10 @@ ul,
 li,
 ptc-subnav,
 ptc-tab-list,
-ptc-link, ptc-square-card,
-.hyphenate-text, ptc-footer {
+ptc-link,
+ptc-square-card,
+.hyphenate-text,
+ptc-footer {
     hyphens: auto;
     -webkit-hyphenate-limit-before: 3;
     /* For Safari */

package/dist/collection/components/list-item/list-item.js

@@ -1,25 +1,29 @@
-import { Host, h } from '@stencil/core';
+import { Host, h } from "@stencil/core";
 export class ListItem {
   constructor() {
-    this.listType = 'list-primary';
+    this.listType = "list-primary";
     this.linkHref = undefined;
     this.flushBefore = false;
-    this.linkTarget = '_self';
+    this.linkTarget = "_self";
     this.hasBeforeHomeIcon = false;
     this.trackerId = undefined;
     this.color = undefined;
     this.styles = undefined;
-    this.ariaLabel = '';
+    this.ariaLabel = "";
   }
   render() {
     const classMap = this.getCssClassMap();
-    return (h(Host, { class: classMap }, this.styles && h("style", null, this.styles), h("li", { id: this.trackerId }, this.linkHref ? (h("a", Object.assign({ class: "item-link", target: this.linkTarget }, (this.linkHref ? { href: this.linkHref } : {}), (this.ariaLabel !== '' ? { 'aria-label': this.ariaLabel } : {}), { tabindex: "0" }), h("slot", null))) : (h("slot", null)))));
+    return (h(Host, { class: classMap }, this.styles && h("style", null, this.styles), h("li", { id: this.trackerId }, this.linkHref ? (h("a", Object.assign({ class: "item-link", target: this.linkTarget }, (this.linkHref ? { href: this.linkHref } : {}), (this.ariaLabel !== ""
+      ? { "aria-label": this.ariaLabel }
+      : {}), { tabindex: "0" }), h("slot", null))) : (h("slot", null)))));
   }
   getCssClassMap() {
     let bcEnable = false;
     if (this.hostElement && this.hostElement.parentElement) {
       try {
-        bcEnable = (this.hostElement.parentElement.classList.contains('center') && this.hostElement.parentElement.tagName === 'PTC-BREADCRUMB');
+        bcEnable =
+          this.hostElement.parentElement.classList.contains("center") &&
+            this.hostElement.parentElement.tagName === "PTC-BREADCRUMB";
       }
       catch (err) {
         console.log(err);
@@ -27,10 +31,10 @@ export class ListItem {
     }
     return {
       [this.listType]: true,
-      ['flush-before']: this.flushBefore ? true : false,
+      ["flush-before"]: this.flushBefore ? true : false,
       [this.color]: !!this.color ? true : false,
-      ['breadcrumb-center']: bcEnable,
-      ['mf-listen']: true
+      ["breadcrumb-center"]: bcEnable,
+      ["mf-listen"]: true,
     };
   }
   static get is() { return "list-item"; }
@@ -51,7 +55,7 @@ export class ListItem {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "'list-primary' | 'list-footer' | 'breadcrumb' | 'list-green' | 'list-underline'",
+          "original": "| \"list-primary\"\r\n\t\t| \"list-footer\"\r\n\t\t| \"breadcrumb\"\r\n\t\t| \"list-green\"\r\n\t\t| \"list-underline\"",
           "resolved": "\"breadcrumb\" | \"list-footer\" | \"list-green\" | \"list-primary\" | \"list-underline\"",
           "references": {}
         },
@@ -63,7 +67,7 @@ export class ListItem {
         },
         "attribute": "list-type",
         "reflect": false,
-        "defaultValue": "'list-primary'"
+        "defaultValue": "\"list-primary\""
       },
       "linkHref": {
         "type": "string",
@@ -117,7 +121,7 @@ export class ListItem {
         },
         "attribute": "link-target",
         "reflect": false,
-        "defaultValue": "'_self'"
+        "defaultValue": "\"_self\""
       },
       "hasBeforeHomeIcon": {
         "type": "boolean",
@@ -158,7 +162,7 @@ export class ListItem {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "'white' | 'primary-gray' | 'light-gray'",
+          "original": "\"white\" | \"primary-gray\" | \"light-gray\"",
           "resolved": "\"light-gray\" | \"primary-gray\" | \"white\"",
           "references": {}
         },
@@ -204,7 +208,7 @@ export class ListItem {
         },
         "attribute": "aria-label",
         "reflect": false,
-        "defaultValue": "''"
+        "defaultValue": "\"\""
       }
     };
   }

package/dist/collection/components/max-width-container/max-width-container.js

@@ -1,18 +1,18 @@
-import { h, Host } from '@stencil/core';
+import { h, Host } from "@stencil/core";
 export class MaxWidthContainer {
   constructor() {
     this.maxWidthP = undefined;
     this.maxWidth = undefined;
     this.breakpoint = 768;
-    this.contentAlign = 'center';
+    this.contentAlign = "center";
     this.styles = undefined;
   }
   componentDidLoad() {
     this.handleResize();
-    window.addEventListener('resize', this.handleResize.bind(this));
+    window.addEventListener("resize", this.handleResize.bind(this));
   }
   disconnectedCallback() {
-    window.removeEventListener('resize', this.handleResize);
+    window.removeEventListener("resize", this.handleResize);
   }
   render() {
     const classMap = this.getCssClassMap();
@@ -35,7 +35,7 @@ export class MaxWidthContainer {
         }
       }
       else {
-        this.el.style.maxWidth = 'initial';
+        this.el.style.maxWidth = "initial";
       }
     }
   }
@@ -109,7 +109,7 @@ export class MaxWidthContainer {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "'left' | 'center' | 'right'",
+          "original": "\"left\" | \"center\" | \"right\"",
           "resolved": "\"center\" | \"left\" | \"right\"",
           "references": {}
         },
@@ -121,7 +121,7 @@ export class MaxWidthContainer {
         },
         "attribute": "content-align",
         "reflect": false,
-        "defaultValue": "'center'"
+        "defaultValue": "\"center\""
       },
       "styles": {
         "type": "string",

package/dist/collection/components/my-component/my-component.js

@@ -1,5 +1,5 @@
-import { h } from '@stencil/core';
-import { format } from '../../utils/utils';
+import { h } from "@stencil/core";
+import { format } from "../../utils/utils";
 export class MyComponent {
   constructor() {
     this.first = undefined;

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

@@ -1,4 +1,4 @@
-import { h } from '@stencil/core';
+import { h } from "@stencil/core";
 export class AuthorListingExample {
   constructor() {
     this.defaultAuthorImage = undefined;
@@ -11,180 +11,182 @@ export class AuthorListingExample {
         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"
+        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 "
+        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"
+        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"
+        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"
+        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"
+        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 "
+        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"
+        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"
+        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"
-      }, {
+        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"
+        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 "
+        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"
+        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"
+        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"
-      }, {
+        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"
+        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 "
+        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"
+        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"
+        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"
+        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"
+        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 "
+        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"
+        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"
+        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"
+        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"
+        description: "Catherine is EVP and Chief Strategy and Marketing Officer at PTC, responsible for positioning the company for success",
       },
     ];
   }
@@ -226,7 +228,7 @@ export class AuthorListingExample {
   }
   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" }))))));
+    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"; }

package/dist/collection/components/organism-bundles/blog-detail-content/blog-detail-content.css

@@ -11,8 +11,10 @@ ul,
 li,
 ptc-subnav,
 ptc-tab-list,
-ptc-link, ptc-square-card,
-.hyphenate-text, ptc-footer {
+ptc-link,
+ptc-square-card,
+.hyphenate-text,
+ptc-footer {
   word-break: break-word;
   hyphens: manual;
   -webkit-hyphens: manual;
@@ -31,8 +33,10 @@ ul,
 li,
 ptc-subnav,
 ptc-tab-list,
-ptc-link, ptc-square-card,
-.hyphenate-text, ptc-footer {
+ptc-link,
+ptc-square-card,
+.hyphenate-text,
+ptc-footer {
     hyphens: auto;
     -webkit-hyphenate-limit-before: 3;
     /* For Safari */
@@ -202,7 +206,7 @@ ptc-link, ptc-square-card,
   :host .stoc-desktop-sticky .stoc-desktop-list-container.scroll {
     overflow-y: scroll;
     scrollbar-width: thin;
-    scrollbar-color: #D9D9D9;
+    scrollbar-color: #d9d9d9;
   }
   :host .stoc-desktop-sticky #stoc-desktop-scroll-gradient {
     position: absolute;
@@ -210,7 +214,7 @@ ptc-link, ptc-square-card,
     width: calc(100% - 15px);
     height: 160px;
     z-index: 0;
-    background: linear-gradient(180deg, rgba(243, 243, 243, 0) 0%, #F3F3F3 100%);
+    background: linear-gradient(180deg, rgba(243, 243, 243, 0) 0%, #f3f3f3 100%);
     pointer-events: none;
   }
   :host .stoc-desktop-sticky .stoc-desktop-list {