@ptcwebops/ptcw-design 6.3.37 → 6.3.38

package/dist/cjs/academic-form-test.cjs.entry.js

@@ -4,20 +4,20 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-63ddc79c.js');
 
-const academicFormTestCss = "h1,h2,h3,h4,h5,h6,p,ul,li,ptc-subnav,ptc-tab-list,ptc-link,ptc-square-card,.hyphenate-text,ptc-footer{word-break:break-word;hyphens:manual;-webkit-hyphens:manual;-moz-hyphens:manual;-ms-hyphens:manual}@supports (hyphenate-limit-chars: 12 3 3){h1,h2,h3,h4,h5,h6,p,ul,li,ptc-subnav,ptc-tab-list,ptc-link,ptc-square-card,.hyphenate-text,ptc-footer{hyphens:auto;-webkit-hyphenate-limit-before:3;-webkit-hyphenate-limit-after:3;hyphenate-limit-chars:12 3 3;hyphenate-limit-lines:2;hyphenate-limit-last:always;hyphenate-limit-zone:6%;-webkit-hyphens:auto;-webkit-hyphenate-limit-before:3;-webkit-hyphenate-limit-after:3;-webkit-hyphenate-limit-chars:12 3 3;-webkit-hyphenate-limit-lines:2;-moz-hyphens:auto;-moz-hyphenate-limit-chars:12 3 3;-moz-hyphenate-limit-lines:2;-ms-hyphens:auto;-ms-hyphenate-limit-chars:12 3 3;-ms-hyphenate-limit-lines:2}}:host{display:block}.form-wrapper{width:433px;display:flex;border-radius:3px;background:#FFF;box-shadow:0px 2px 6px 0px rgba(0, 0, 0, 0.16);flex-direction:column;align-items:center;padding:24px 0px}.form-wrapper>form{max-width:277px}.form-wrapper>ptc-button{align-items:center}.form-wrapper .ptc-label{display:block;font-size:var(--ptc-font-size-x-small);font-weight:var(--ptc-font-weight-bold);line-height:normal;margin-bottom:var(--ptc-element-spacing-04);position:relative;z-index:1;color:var(--color-gray-13)}";
+const academicFormTestCss = "h1,h2,h3,h4,h5,h6,p,ul,li,ptc-subnav,ptc-tab-list,ptc-link,ptc-square-card,.hyphenate-text,ptc-footer{word-break:break-word;hyphens:manual;-webkit-hyphens:manual;-moz-hyphens:manual;-ms-hyphens:manual}@supports (hyphenate-limit-chars: 12 3 3){h1,h2,h3,h4,h5,h6,p,ul,li,ptc-subnav,ptc-tab-list,ptc-link,ptc-square-card,.hyphenate-text,ptc-footer{hyphens:auto;-webkit-hyphenate-limit-before:3;-webkit-hyphenate-limit-after:3;hyphenate-limit-chars:12 3 3;hyphenate-limit-lines:2;hyphenate-limit-last:always;hyphenate-limit-zone:6%;-webkit-hyphens:auto;-webkit-hyphenate-limit-before:3;-webkit-hyphenate-limit-after:3;-webkit-hyphenate-limit-chars:12 3 3;-webkit-hyphenate-limit-lines:2;-moz-hyphens:auto;-moz-hyphenate-limit-chars:12 3 3;-moz-hyphenate-limit-lines:2;-ms-hyphens:auto;-ms-hyphenate-limit-chars:12 3 3;-ms-hyphenate-limit-lines:2}}:host{display:block}.form-wrapper{width:433px;display:flex;border-radius:3px;background:#fff;box-shadow:0px 2px 6px 0px rgba(0, 0, 0, 0.16);flex-direction:column;align-items:center;padding:24px 0px}.form-wrapper>form{max-width:277px}.form-wrapper>ptc-button{align-items:center}.form-wrapper .ptc-label{display:block;font-size:var(--ptc-font-size-x-small);font-weight:var(--ptc-font-weight-bold);line-height:normal;margin-bottom:var(--ptc-element-spacing-04);position:relative;z-index:1;color:var(--color-gray-13)}";
 
 const AcademicForm = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.formData = {
-      email: '',
-      firstName: '',
-      lastName: '',
-      company: '',
-      country: '',
-      phone: '',
-      inquiryReason: '',
-      howhearselfreport: '',
+      email: "",
+      firstName: "",
+      lastName: "",
+      company: "",
+      country: "",
+      phone: "",
+      inquiryReason: "",
+      howhearselfreport: "",
       policyChecked: false,
     };
   }
@@ -25,8 +25,8 @@ const AcademicForm = class {
   // private inquiryreasonEle: HTMLPtcTextfieldElement;
   // private howhearselfreport: HTMLPtcTextfieldElement;
   componentDidLoad() {
-    this.formButton = this.el.querySelector('.form-submit');
-    this.formButton.addEventListener('click', this.handleSubmit.bind(this));
+    this.formButton = this.el.querySelector(".form-submit");
+    this.formButton.addEventListener("click", this.handleSubmit.bind(this));
     //get Email
     this.emailEle = this.el.querySelector('ptc-textfield[field-id="contact-email"]');
     this.firstNameEle = this.el.querySelector('ptc-textfield[field-id="contact-firstname"]');
@@ -48,32 +48,32 @@ const AcademicForm = class {
     this.formData.company = this.companyEle.inputValue;
     this.formData.phone = this.phoneEle.inputValue;
     if (this.isValid()) {
-      const formSubmitEvent = new CustomEvent('formSubmit', {
+      const formSubmitEvent = new CustomEvent("formSubmit", {
         detail: this.formData,
         bubbles: true,
       });
       this.el.dispatchEvent(formSubmitEvent);
     }
     else {
-      console.log('Form validation failed');
+      console.log("Form validation failed");
     }
   }
   isValid() {
-    const { email, firstName, lastName, company, country, phone, inquiryReason, howhearselfreport, policyChecked } = this.formData;
-    const invalidLength = document.querySelectorAll('.invalid-field').length;
-    return (email !== '' &&
-      phone !== '' &&
-      firstName !== '' &&
-      lastName !== '' &&
-      company !== '' &&
-      country !== '' &&
-      inquiryReason !== '' &&
-      howhearselfreport != '' &&
+    const { email, firstName, lastName, company, country, phone, inquiryReason, howhearselfreport, policyChecked, } = this.formData;
+    const invalidLength = document.querySelectorAll(".invalid-field").length;
+    return (email !== "" &&
+      phone !== "" &&
+      firstName !== "" &&
+      lastName !== "" &&
+      company !== "" &&
+      country !== "" &&
+      inquiryReason !== "" &&
+      howhearselfreport != "" &&
       policyChecked &&
       invalidLength === 0);
   }
   render() {
-    return (index.h(index.Host, null, index.h("div", { class: "ptc-container ptc-section-standard u-flex u-flex-justify-center" }, index.h("div", { class: "form-wrapper" }, index.h("max-width-container", { "max-width": "277", breakpoint: 480 }, index.h("ptc-title", { type: "h2", "text-align": "center", "title-size": "x-small", "title-color": "gray", upperline: "no-upperline", "title-display": "inline-block", "title-height": "densest", "title-margin": "margin-flush", "title-weight": "w-6", "is-plm-hub": "false" }, "Please fill out the form and a PTC sales representative will be in touch."), index.h("ptc-spacer", { breakpoint: "x-small", size: "medium" }), index.h("ptc-spacer", { breakpoint: "x-small", size: "medium" }), index.h("ptc-spacer", { breakpoint: "small", size: "small" }), index.h("ptc-spacer", { breakpoint: "small", size: "small" })), index.h("form", { onSubmit: event => this.handleSubmit(event) }, index.h("ptc-label", { class: "ptc-label" }, "Your Information"), index.h("ptc-textfield", { "field-id": "contact-firstname", "label-text": "First Name*", type: "text", "ptc-data-eloqua-name": "C_FirstName", "field-name": "firstname" }), index.h("ptc-textfield", { "field-id": "contact-lastname", "label-text": "Last Name*", type: "text", "ptc-data-eloqua-name": "C_LastName", "field-name": "lastname" }), index.h("ptc-textfield", { "field-id": "contact-email", "label-text": "Email*", type: "email", "alert-text": "Minimum Age Required", "alert-text-content": "If you are under the age of 14 years old, you must use your parent/guardian email address.", "ptc-data-eloqua-name": "C_EmailAddress", "field-name": "email" }), index.h("ptc-textfield", { "field-id": "confirm-email", "label-text": "Confirm your Email*", type: "email", "ptc-data-eloqua-name": "emailconfirmation", "field-name": "confirm-email", "custom-validation": "Email addresses must match." }), index.h("ptc-textfield", { "field-id": "contact-phone", "label-text": "Phone*", type: "tel", "ptc-data-eloqua-name": "C_BusPhone", "field-name": "phone" }), index.h("ptc-textfield", { "field-id": "contact-city", "label-text": "City*", type: "text", "ptc-data-eloqua-name": "C_City", "field-name": "contact-city" }), index.h("ptc-textfield", { "field-id": "contact-zipcode", "label-text": "Zip Code*", type: "text", "ptc-data-eloqua-name": "C_Zip_Postal", "field-name": "zipcode-field" }), index.h("ptc-select", { "field-id": "contact-country", label: "Country*", "ptc-data-eloqua-name": "C_Country", "field-name": "country" }, index.h("ul", { class: "mdc-list" }, index.h("li", { class: "mdc-list-item", "data-value": "" }, index.h("span", { class: "mdc-list-item__ripple" })), index.h("li", { class: "mdc-list-item", "data-value": "USA" }, index.h("span", { class: "mdc-list-item__ripple" }), index.h("span", { class: "mdc-list-item__text" }, "USA")), index.h("li", { class: "mdc-list-item", "data-value": "Canada" }, index.h("span", { class: "mdc-list-item__ripple" }), index.h("span", { class: "mdc-list-item__text" }, "Canada")), index.h("li", { class: "mdc-list-item", "data-value": "China" }, index.h("span", { class: "mdc-list-item__ripple" }), index.h("span", { class: "mdc-list-item__text" }, "China")))), index.h("ptc-label", { class: "ptc-label" }, "School Information"), index.h("ptc-textfield", { "field-id": "institution", "label-text": "School/Institution Name*", type: "text", "ptc-data-eloqua-name": "C_Company", "field-name": "institution" }), index.h("ptc-textfield", { "field-id": "contact-email", "label-text": "School Level*", type: "email", "ptc-data-eloqua-name": "C_EmailAddress", "field-name": "email" }), index.h("ptc-textfield", { "field-id": "contact-email", "label-text": "Student Level*", type: "email", "ptc-data-eloqua-name": "gradeLevel1", "field-name": "email" }), index.h("ptc-select", { "field-id": "academic-description", label: "Role of User*", "ptc-data-eloqua-name": "description1", "field-name": "academic-description" }, index.h("ul", { class: "mdc-list" }, index.h("li", { class: "mdc-list-item", "data-value": "" }, index.h("span", { class: "mdc-list-item__ripple" })), index.h("li", { class: "mdc-list-item", "data-value": "USA" }, index.h("span", { class: "mdc-list-item__ripple" }), index.h("span", { class: "mdc-list-item__text" }, "K-12 educator")), index.h("li", { class: "mdc-list-item", "data-value": "Canada" }, index.h("span", { class: "mdc-list-item__ripple" }), index.h("span", { class: "mdc-list-item__text" }, "Professor")), index.h("li", { class: "mdc-list-item", "data-value": "China" }, index.h("span", { class: "mdc-list-item__ripple" }), index.h("span", { class: "mdc-list-item__text" }, "K-12 student")))), index.h("ptc-textfield", { "field-id": "contact-city", "label-text": "Purpose of use*", type: "text", "ptc-data-eloqua-name": "C_City", "field-name": "contact-city" }), index.h("ptc-textfield", { "field-id": "academic-ofComputers", "label-text": "How many computers are you planning to install this software on?*", type: "text", "ptc-data-eloqua-name": "ofComputers1", "field-name": "academic-ofComputers" }), index.h("ptc-form-checkbox", { label: "I acknowledge that my personal details will be processed in accordance with PTC\u2019s privacy policy and that they may be shared with PTC Inc\u2019s subsidiaries for\r\n               the promotion of PTC\u2019s products and associated services. ", "checkbox-id": "test" }), index.h("ptc-button", { class: "form-submit", color: "ptc-quaternary", type: "submit", styles: ":host{align-self:flex-end; margin-top: 48px; display:block; float: right; width: fit-content;}" }, "Submit"))))));
+    return (index.h(index.Host, null, index.h("div", { class: "ptc-container ptc-section-standard u-flex u-flex-justify-center" }, index.h("div", { class: "form-wrapper" }, index.h("max-width-container", { "max-width": "277", breakpoint: 480 }, index.h("ptc-title", { type: "h2", "text-align": "center", "title-size": "x-small", "title-color": "gray", upperline: "no-upperline", "title-display": "inline-block", "title-height": "densest", "title-margin": "margin-flush", "title-weight": "w-6", "is-plm-hub": "false" }, "Please fill out the form and a PTC sales representative will be in touch."), index.h("ptc-spacer", { breakpoint: "x-small", size: "medium" }), index.h("ptc-spacer", { breakpoint: "x-small", size: "medium" }), index.h("ptc-spacer", { breakpoint: "small", size: "small" }), index.h("ptc-spacer", { breakpoint: "small", size: "small" })), index.h("form", { onSubmit: (event) => this.handleSubmit(event) }, index.h("ptc-label", { class: "ptc-label" }, "Your Information"), index.h("ptc-textfield", { "field-id": "contact-firstname", "label-text": "First Name*", type: "text", "ptc-data-eloqua-name": "C_FirstName", "field-name": "firstname" }), index.h("ptc-textfield", { "field-id": "contact-lastname", "label-text": "Last Name*", type: "text", "ptc-data-eloqua-name": "C_LastName", "field-name": "lastname" }), index.h("ptc-textfield", { "field-id": "contact-email", "label-text": "Email*", type: "email", "alert-text": "Minimum Age Required", "alert-text-content": "If you are under the age of 14 years old, you must use your parent/guardian email address.", "ptc-data-eloqua-name": "C_EmailAddress", "field-name": "email" }), index.h("ptc-textfield", { "field-id": "confirm-email", "label-text": "Confirm your Email*", type: "email", "ptc-data-eloqua-name": "emailconfirmation", "field-name": "confirm-email", "custom-validation": "Email addresses must match." }), index.h("ptc-textfield", { "field-id": "contact-phone", "label-text": "Phone*", type: "tel", "ptc-data-eloqua-name": "C_BusPhone", "field-name": "phone" }), index.h("ptc-textfield", { "field-id": "contact-city", "label-text": "City*", type: "text", "ptc-data-eloqua-name": "C_City", "field-name": "contact-city" }), index.h("ptc-textfield", { "field-id": "contact-zipcode", "label-text": "Zip Code*", type: "text", "ptc-data-eloqua-name": "C_Zip_Postal", "field-name": "zipcode-field" }), index.h("ptc-select", { "field-id": "contact-country", label: "Country*", "ptc-data-eloqua-name": "C_Country", "field-name": "country" }, index.h("ul", { class: "mdc-list" }, index.h("li", { class: "mdc-list-item", "data-value": "" }, index.h("span", { class: "mdc-list-item__ripple" })), index.h("li", { class: "mdc-list-item", "data-value": "USA" }, index.h("span", { class: "mdc-list-item__ripple" }), index.h("span", { class: "mdc-list-item__text" }, "USA")), index.h("li", { class: "mdc-list-item", "data-value": "Canada" }, index.h("span", { class: "mdc-list-item__ripple" }), index.h("span", { class: "mdc-list-item__text" }, "Canada")), index.h("li", { class: "mdc-list-item", "data-value": "China" }, index.h("span", { class: "mdc-list-item__ripple" }), index.h("span", { class: "mdc-list-item__text" }, "China")))), index.h("ptc-label", { class: "ptc-label" }, "School Information"), index.h("ptc-textfield", { "field-id": "institution", "label-text": "School/Institution Name*", type: "text", "ptc-data-eloqua-name": "C_Company", "field-name": "institution" }), index.h("ptc-textfield", { "field-id": "contact-email", "label-text": "School Level*", type: "email", "ptc-data-eloqua-name": "C_EmailAddress", "field-name": "email" }), index.h("ptc-textfield", { "field-id": "contact-email", "label-text": "Student Level*", type: "email", "ptc-data-eloqua-name": "gradeLevel1", "field-name": "email" }), index.h("ptc-select", { "field-id": "academic-description", label: "Role of User*", "ptc-data-eloqua-name": "description1", "field-name": "academic-description" }, index.h("ul", { class: "mdc-list" }, index.h("li", { class: "mdc-list-item", "data-value": "" }, index.h("span", { class: "mdc-list-item__ripple" })), index.h("li", { class: "mdc-list-item", "data-value": "USA" }, index.h("span", { class: "mdc-list-item__ripple" }), index.h("span", { class: "mdc-list-item__text" }, "K-12 educator")), index.h("li", { class: "mdc-list-item", "data-value": "Canada" }, index.h("span", { class: "mdc-list-item__ripple" }), index.h("span", { class: "mdc-list-item__text" }, "Professor")), index.h("li", { class: "mdc-list-item", "data-value": "China" }, index.h("span", { class: "mdc-list-item__ripple" }), index.h("span", { class: "mdc-list-item__text" }, "K-12 student")))), index.h("ptc-textfield", { "field-id": "contact-city", "label-text": "Purpose of use*", type: "text", "ptc-data-eloqua-name": "C_City", "field-name": "contact-city" }), index.h("ptc-textfield", { "field-id": "academic-ofComputers", "label-text": "How many computers are you planning to install this software on?*", type: "text", "ptc-data-eloqua-name": "ofComputers1", "field-name": "academic-ofComputers" }), index.h("ptc-form-checkbox", { label: "I acknowledge that my personal details will be processed in accordance with PTC\u2019s privacy policy and that they may be shared with PTC Inc\u2019s subsidiaries for\r\n               the promotion of PTC\u2019s products and associated services. ", "checkbox-id": "test" }), index.h("ptc-button", { class: "form-submit", color: "ptc-quaternary", type: "submit", styles: ":host{align-self:flex-end; margin-top: 48px; display:block; float: right; width: fit-content;}" }, "Submit"))))));
   }
   get el() { return index.getElement(this); }
 };

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

@@ -19,180 +19,182 @@ const AuthorListingExample = class {
         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",
       },
     ];
   }
@@ -234,7 +236,7 @@ const AuthorListingExample = class {
   }
   render() {
     const visibleCards = this.cardData.slice(0, this.loadedCardCount);
-    return (index.h("div", null, index.h("div", { class: "author-grid" }, visibleCards.map((card, index$1) => (index.h("div", { class: "author-col", key: index$1 }, index.h("ptc-card", { "has-image": "true", "card-type": "related-card", "card-href": card.DetailPagelink, heading: card.authorName }, index.h("ptc-img", { slot: "slot-image", "img-url": card.imageUrl, "image-type": "smart-img", "load-mode": "lazy-bg" }), index.h("div", { slot: "slot-description" }, index.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" }, index.h("ptc-tooltip", { description: card.description, "text-lines": "4", "z-index": "z-auto" })))))))), this.isLoading && index.h("div", { class: "loader" }, index.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" }, index.h("title", null, "list-loading"), index.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" }), index.h("g", null, index.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" }), index.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" }), index.h("animate", { attributeName: "fill-opacity", begin: "100ms", dur: "1s", values: "1;.2;1", calcMode: "linear", repeatCount: "indefinite" })), index.h("g", null, index.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" }), index.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" }), index.h("animate", { attributeName: "fill-opacity", begin: "300ms", dur: "1s", values: "1;.2;1", calcMode: "linear", repeatCount: "indefinite" })), index.h("g", null, index.h("polygon", { points: "154,70.2 154,70.2 154,142.7 122.9,160.5 122.9,158.5 122.9,65.8" }), index.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" }), index.h("animate", { attributeName: "fill-opacity", begin: "500ms", dur: "1s", values: "1;.2;1", calcMode: "linear", repeatCount: "indefinite" }))))));
+    return (index.h("div", null, index.h("div", { class: "author-grid" }, visibleCards.map((card, index$1) => (index.h("div", { class: "author-col", key: index$1 }, index.h("ptc-card", { "has-image": "true", "card-type": "related-card", "card-href": card.DetailPagelink, heading: card.authorName }, index.h("ptc-img", { slot: "slot-image", "img-url": card.imageUrl, "image-type": "smart-img", "load-mode": "lazy-bg" }), index.h("div", { slot: "slot-description" }, index.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" }, index.h("ptc-tooltip", { description: card.description, "text-lines": "4", "z-index": "z-auto" })))))))), this.isLoading && (index.h("div", { class: "loader" }, index.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" }, index.h("title", null, "list-loading"), index.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" }), index.h("g", null, index.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" }), index.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" }), index.h("animate", { attributeName: "fill-opacity", begin: "100ms", dur: "1s", values: "1;.2;1", calcMode: "linear", repeatCount: "indefinite" })), index.h("g", null, index.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" }), index.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" }), index.h("animate", { attributeName: "fill-opacity", begin: "300ms", dur: "1s", values: "1;.2;1", calcMode: "linear", repeatCount: "indefinite" })), index.h("g", null, index.h("polygon", { points: "154,70.2 154,70.2 154,142.7 122.9,160.5 122.9,158.5 122.9,65.8" }), index.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" }), index.h("animate", { attributeName: "fill-opacity", begin: "500ms", dur: "1s", values: "1;.2;1", calcMode: "linear", repeatCount: "indefinite" })))))));
   }
   get el() { return index.getElement(this); }
 };