@ptcwebops/ptcw-design 6.3.10 → 6.3.11-beta

package/dist/collection/components/organism-bundles/bundle-featured-list/featured-list.css

@@ -34,7 +34,7 @@ a {
 }
 
 .light-links,.background-grey-10,.background-plm-grey  {
-    a:not(.hero-footer-form-wrapper a,  ptc-modal inline-form a, .vjs-social-share-links a), a.light-link {
+    a:not(.hero-footer-form-wrapper a,  ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a), a.light-link {
         color: var(--color-blue-04);
         margin: -2px;
         border: 2px solid transparent;
@@ -61,7 +61,7 @@ a {
         }
 
         &:focus-visible {
-            border-radius: var(--ptc-border-radius-standard); 
+            border-radius: var(--ptc-border-radius-standard);
             border: 2px solid rgb(255, 255, 255);
             outline: 5px solid var(--keyboard-nav-outline);
         }
@@ -71,7 +71,7 @@ a {
         border: 2px solid transparent;
 
         &:focus-visible {
-            border-radius: var(--ptc-border-radius-standard); 
+            border-radius: var(--ptc-border-radius-standard);
             border: 2px solid rgb(255, 255, 255);
             outline: 5px solid var(--keyboard-nav-outline);
         }

package/dist/collection/components/organism-bundles/event-jumbotron-example/event-jumbotron-example.css

@@ -60,14 +60,9 @@ ptc-link, ptc-square-card,
 }
 
 .event-jumbotron {
-  margin-bottom: calc(3rem - 5px);
+  margin-bottom: 3rem;
   width: 100%;
 }
-@media only screen and (min-width: 992px) {
-  .event-jumbotron {
-    margin-bottom: 3rem;
-  }
-}
 
 .white-placeholder {
   position: absolute;
@@ -89,7 +84,7 @@ ptc-link, ptc-square-card,
   display: flex;
   gap: 24px;
   overflow-x: auto;
-  padding: 5px 24px;
+  padding: 0 24px;
   scroll-snap-type: x mandatory;
   -webkit-overflow-scrolling: touch;
   cursor: grab;
@@ -213,7 +208,8 @@ ptc-link, ptc-square-card,
     cursor: auto;
     transition: transform 0.3s ease-in-out;
     width: 100%;
-    padding: 0px;
+    padding-left: 0px;
+    padding-right: 0px;
   }
 
   .card {

package/dist/collection/components/organism-bundles/event-jumbotron-example/event-jumbotron-example.js

@@ -75,7 +75,6 @@ export class EventJumbotronExample {
             },
           });
           this.trap.activate();
-          this.setupTabNavigation(panel); //set up special navigation to no-content panel, skip tabindex=-1 container and focus on the A inside a shdow dom.
         }, 500);
       }
       else {
@@ -87,43 +86,11 @@ export class EventJumbotronExample {
     else if (!this.isDesktop) {
       if (!this.isDragging) {
         const modal = document.getElementById(`modal-${cardIndex}`);
-        // console.log('open: ' + modal.id);
+        console.log('open: ' + modal.id);
         modal.show = true;
       }
     }
   }
-  //Focus the ptc-button directly in the no content panel (tab navigation).
-  setupTabNavigation(panel) {
-    var _a;
-    if (panel.querySelector('.no-content-card')) {
-      const shadowButton = panel.querySelector('ptc-close-icon');
-      const closeButton = (_a = shadowButton.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.close-icon');
-      if (closeButton) {
-        closeButton.addEventListener('keydown', (event) => {
-          if (event.key === 'Tab' && !event.shiftKey) {
-            event.preventDefault();
-            this.focusShadowDomElement(panel);
-          }
-        });
-      }
-    }
-    else {
-      return;
-    }
-  }
-  focusShadowDomElement(panel) {
-    const card = panel.querySelector('.no-content-card');
-    if (card) {
-      const button = card.querySelector('ptc-button');
-      // console.log('button: ' + button.innerHTML);
-      if (button) {
-        const link = button.shadowRoot.querySelector('a');
-        if (link) {
-          link.focus();
-        }
-      }
-    }
-  }
   showPanel(card, panel) {
     if (this.activePanel)
       return;
@@ -192,7 +159,7 @@ export class EventJumbotronExample {
     document.addEventListener('keydown', event => {
       if (event.key === 'Tab' || event.key === 'Enter' || event.key === ' ') {
         this.openedWithKeyboard = true;
-        // console.log('keyboard status: ' + this.openedWithKeyboard);
+        console.log('keyboard status: ' + this.openedWithKeyboard);
       }
     });
     document.addEventListener('mousedown', () => {

package/dist/collection/components/organism-bundles/form/modal-from-example/modal-form-example.css

@@ -0,0 +1,26 @@
+:host {
+  display: block;
+}
+
+.form-wrapper {
+  width: 371px;
+  display: flex;
+  border-radius: 3px;
+  background: #FFF;
+  flex-direction: column;
+  align-items: center;
+  padding: 0px 32px;
+
+  @media only screen and (min-width: 360px) and (max-width: 479.55px) {
+    max-width: 360px;
+    width: 360px;
+  }
+
+  .button-wrapper {
+    display: flex;
+    justify-content: flex-end;
+    gap: 20px;
+    margin-top: 48px;
+    flex-wrap: wrap;
+  }
+}

package/dist/collection/components/organism-bundles/form/modal-from-example/modal-form-example.js

@@ -0,0 +1,99 @@
+import { Host, h } from '@stencil/core';
+export class PtcForm {
+  constructor() {
+    this.formData = {
+      email: '',
+      firstName: '',
+      lastName: '',
+      company: '',
+      country: '',
+      phone: '',
+      inquiryReason: '',
+      howhearselfreport: '',
+      policyChecked: false,
+    };
+  }
+  // private countryEle: HTMLPtcSelectElement;
+  // private inquiryreasonEle: HTMLPtcTextfieldElement;
+  // private howhearselfreport: HTMLPtcTextfieldElement;
+  componentDidLoad() {
+    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"]');
+    this.lastNameEle = this.el.querySelector('ptc-textfield[field-id="contact-lastname"]');
+    this.companyEle = this.el.querySelector('ptc-textfield[field-id="company"]');
+    this.phoneEle = this.el.querySelector('ptc-textfield[field-id="contact-phone"]');
+    // this.countryEle = this.el.querySelector('ptc-select[field-id="contact-country"]')
+    // this.inquiryreasonEle = this.el.querySelector('ptc-textfield[field-id="contact-inquiry"]')
+    // this.howhearselfreport = this.el.querySelector('ptc-textfield[field-id="self-reporting"]')
+  }
+  handleInputChange(field, value) {
+    this.formData = Object.assign(Object.assign({}, this.formData), { [field]: value });
+  }
+  handleSubmit(event) {
+    event.preventDefault();
+    this.formData.email = this.emailEle.inputValue;
+    this.formData.firstName = this.firstNameEle.inputValue;
+    this.formData.lastName = this.lastNameEle.inputValue;
+    this.formData.company = this.companyEle.inputValue;
+    this.formData.phone = this.phoneEle.inputValue;
+    // this.formData.country = this.countryEle.inputValue;
+    // this.formData.inquiryReason= this.inquiryreasonEle.inputValue;
+    // this.formData.howhearselfreport = this.howhearselfreport.inputValue;
+    // console.log("get form Data: " + this.formData.email)
+    if (this.isValid()) {
+      const formSubmitEvent = new CustomEvent('formSubmit', {
+        detail: this.formData,
+        bubbles: true,
+      });
+      this.el.dispatchEvent(formSubmitEvent);
+      console.log('Form Submitted: ' + this.formData);
+    }
+    else {
+      console.log('Form validation failed');
+      console.log('Form Submitted: ' + this.formData.email, this.formData.firstName, this.formData.lastName, this.formData.company, this.formData.phone);
+    }
+  }
+  isValid() {
+    const { email, firstName, lastName, company, country, phone, inquiryReason, howhearselfreport, policyChecked } = this.formData;
+    const invalidLength = document.querySelectorAll('.invalid-field').length;
+    // console.log('invalid fields length: ' + invalidLength), check the select field
+    return (email !== '' &&
+      phone !== '' &&
+      firstName !== '' &&
+      lastName !== '' &&
+      company !== '' &&
+      country !== '' &&
+      inquiryReason !== '' &&
+      howhearselfreport != '' &&
+      policyChecked &&
+      invalidLength === 0);
+  }
+  render() {
+    const multiSelectItems = [
+      { text: 'Item 1', selected: false, ptcDataEloquaName: 'item_1', ptcDataTargetEloquaName: 'item_target-1' },
+      { text: 'Item 2', selected: false, ptcDataEloquaName: 'item_2', ptcDataTargetEloquaName: 'item_target-2' },
+      { text: 'Item 3', selected: false, ptcDataEloquaName: 'item_3', ptcDataTargetEloquaName: 'item_target-3' }
+    ];
+    return (h(Host, null, h("div", { class: "ptc-container u-flex u-flex-justify-center" }, h("div", { class: "form-wrapper" }, h("ptc-title", { "seo-compatibility-mode": true, "text-align": "left", "title-color": "gray", upperline: "no-upperline", "title-display": "inline-block", "title-height": "densest", "title-margin": "margin-flush", "title-weight": "w-7", "is-plm-hub": "false", "title-size": "medium" }, h("h2", null, "PTC\u2019s PLM application suite combines the power of Windchill, the industry\u2019s #1 PLM software with Thingworx")), h("ptc-spacer", { size: "x-small", breakpoint: "small" }), h("ptc-spacer", { size: "small", breakpoint: "x-small" }), h("ptc-para", { "seo-compatibility-mode": true, "font-size": "x-small", "font-weight": "w-4", "para-margin": "margin-flush", "para-style": "main", "para-line-h": "line-height-densest" }, "PTC\u2019s market-leading, purpose-built IIoT platform. The suite offers a mix of Packages, Add-Ons, and Apps to best suit your business needs:"), h("ptc-spacer", { size: "x-small", breakpoint: "small" }), h("ptc-spacer", { size: "small", breakpoint: "x-small" }), h("max-width-container", { "max-width": "277", breakpoint: 480 }, h("ptc-title", { type: "h2", "text-align": "", "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."), h("ptc-spacer", { breakpoint: "x-small", size: "medium" }), h("ptc-spacer", { breakpoint: "x-small", size: "medium" }), h("ptc-spacer", { breakpoint: "small", size: "small" }), h("ptc-spacer", { breakpoint: "small", size: "small" })), h("form", { onSubmit: event => this.handleSubmit(event) }, h("ptc-textfield", { "field-id": "contact-firstname", "label-text": "First Name*", type: "text", "ptc-data-eloqua-name": "C_FirstName", "field-name": "firstname" }), h("ptc-textfield", { "field-id": "contact-lastname", "label-text": "Last Name*", type: "text", "ptc-data-eloqua-name": "C_LastName", "field-name": "lastname" }), h("ptc-textfield", { "field-id": "company", "label-text": "Company*", type: "text", "ptc-data-eloqua-name": "C_Company", "field-name": "company" }), h("ptc-textfield", { "field-id": "contact-email", "label-text": "Email*", type: "email", "ptc-data-eloqua-name": "C_EmailAddress", "field-name": "email" }), h("ptc-textfield", { "field-id": "company-email", "label-text": "Company Email*", type: "email", "ptc-data-eloqua-name": "C_EmailAddress", "field-name": "companyemail" }), h("ptc-select", { "field-id": "contact-country", label: "Country*", "ptc-data-eloqua-name": "C_Country", "field-name": "country" }, h("ul", { class: "mdc-list" }, h("li", { class: "mdc-list-item placehoder-li", "data-value": "" }, h("span", { class: "mdc-list-item__ripple" }), h("span", { class: "mdc-list-item__text" }, "Select a country")), h("li", { class: "mdc-list-item", "data-value": "USA" }, h("span", { class: "mdc-list-item__ripple" }), h("span", { class: "mdc-list-item__text" }, "USA")), h("li", { class: "mdc-list-item", "data-value": "Canada" }, h("span", { class: "mdc-list-item__ripple" }), h("span", { class: "mdc-list-item__text" }, "Canada")), h("li", { class: "mdc-list-item", "data-value": "China" }, h("span", { class: "mdc-list-item__ripple" }), h("span", { class: "mdc-list-item__text" }, "China")))), h("ptc-textfield", { "field-id": "contact-phone", "label-text": "Phone*", type: "tel", "ptc-data-eloqua-name": "C_BusPhone", "field-name": "phone" }), h("ptc-select", { label: "What information are you interested in?*", "ptc-data-eloqua-name": "Inquiry_Reason", "field-name": "inquiryreason", "field-id": "contact-inquiry" }, h("ul", { class: "mdc-list" }, h("li", { class: "mdc-list-item", "data-value": "Please select a value" }, h("span", { class: "mdc-list-item__ripple" })), h("li", { class: "mdc-list-item", "data-value": "Augmented Reality (AR)" }, h("span", { class: "mdc-list-item__ripple" }), h("span", { class: "mdc-list-item__text" }, "Augmented Reality (AR)")), h("li", { class: "mdc-list-item", "data-value": "CAD" }, h("span", { class: "mdc-list-item__ripple" }), h("span", { class: "mdc-list-item__text" }, "Computer Aided Design")), h("li", { class: "mdc-list-item", "data-value": "Retail(FlexPLM)" }, h("span", { class: "mdc-list-item__ripple" }), h("span", { class: "mdc-list-item__text" }, "Fashion and Retail Product Lifecycle Management")))), h("ptc-multi-select", { items: multiSelectItems, "is-required": 'true' }), h("ptc-textfield", { "field-id": "Self-Reporting", "label-text": "How can we help you?*", type: "text", "ptc-data-eloqua-name": "HowHearSelfReport", "ptc-max-length": "100", "field-name": "howhearselfreport" }), h("ptc-form-checkbox", { label: "I agree to the policy", "checkbox-id": "test" }), h("div", { class: "button-wrapper" }, h("ptc-button", { class: "form-submit", color: "ptc-quaternary", type: "submit", styles: ":host{align-self:flex-end; display:block; float: left; width: fit-content;}" }, "Submit"), h("ptc-button", { class: "form-close", color: "ptc-tertiary", type: "button", styles: ":host{align-self:flex-end; display:block; float: left; width: fit-content;}" }, "Cancel")))))));
+  }
+  static get is() { return "modal-form-example"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["modal-form-example.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["modal-form-example.css"]
+    };
+  }
+  static get states() {
+    return {
+      "formData": {}
+    };
+  }
+  static get elementRef() { return "el"; }
+}

package/dist/collection/components/organism-bundles/{ptc-icon-card-slider-example/ptc-icon-card-slider-example.css → storefront-enhanced-product-list-example/storefront-enhanced-product-list-example.css}

@@ -995,56 +995,30 @@ swiper-container:not(.swiper-watch-progress) .swiper-lazy-preloader,
     transform: rotate(360deg);
   }
 }
-:host {
-  position: relative;
-}
-
-.ptc-icon-card-slider-wrapper {
-  margin-top: 1rem;
-}
-.ptc-icon-card-slider-wrapper .ptc-icon-slider-cards {
-  margin-top: 1rem;
-}
-.ptc-icon-card-slider-wrapper .swiper-horizontal {
-  display: block;
-  padding-bottom: 4.104rem;
-  padding-top: 5px;
-  scrollbar-width: none;
-  position: relative;
-}
-.ptc-icon-card-slider-wrapper .swiper-horizontal .icon-card {
-  padding: 2rem 1.5rem;
-  box-shadow: var(--ptc-shadow-small);
-  border-radius: var(--ptc-border-radius-standard);
+storefront-enhanced-product-list-example .swiper {
+  width: 100%;
   height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  text-align: center;
 }
-.ptc-icon-card-slider-wrapper .swiper-horizontal .swiper-slide {
-  height: auto;
-  width: 284px;
-}
-.ptc-icon-card-slider-wrapper .swiper-horizontal .swiper-slide::-webkit-scrollbar {
-  display: none;
+storefront-enhanced-product-list-example .swiper-container {
+  padding-left: 24px;
+  padding-right: 24px;
+  margin-left: -24px;
+  margin-right: -24px;
+  overflow-x: clip;
 }
-@media only screen and (min-width: 992px) {
-  .ptc-icon-card-slider-wrapper .swiper-horizontal .swiper-slide {
-    width: 216px;
-  }
+storefront-enhanced-product-list-example .swiper-wrapper {
+  max-width: 1200px;
 }
-@media only screen and (min-width: 1200px) {
-  .ptc-icon-card-slider-wrapper .swiper-horizontal .swiper-slide {
-    width: 260px;
-  }
+storefront-enhanced-product-list-example .swiper-slide {
+  width: max-content;
+  height: auto;
 }
-@media only screen and (min-width: 1440px) {
-  .ptc-icon-card-slider-wrapper .swiper-horizontal .swiper-slide {
-    width: 270px;
-  }
+storefront-enhanced-product-list-example .swiper-horizontal {
+  position: relative;
+  display: block;
+  padding-bottom: 4.104rem;
 }
-.ptc-icon-card-slider-wrapper .swiper-horizontal .swiper-scrollbar {
+storefront-enhanced-product-list-example .swiper-horizontal .swiper-scrollbar {
   position: absolute;
   left: 50%;
   transform: translate(-50%, -13px);
@@ -1054,22 +1028,25 @@ swiper-container:not(.swiper-watch-progress) .swiper-lazy-preloader,
   border-radius: 999px;
   background: #E4E7E9;
 }
-.ptc-icon-card-slider-wrapper .swiper-horizontal .swiper-scrollbar .swiper-scrollbar-drag {
+storefront-enhanced-product-list-example .swiper-horizontal .swiper-scrollbar .swiper-scrollbar-drag {
   height: 8px;
   border-radius: 999px;
   background: #323B42;
   transform: translateX(-16px);
 }
-.ptc-icon-card-slider-wrapper .swiper-button-prev:after,
-.ptc-icon-card-slider-wrapper .swiper-button-next:after {
+storefront-enhanced-product-list-example .swiper-horizontal:has(.swiper-scrollbar[style*="display: none"]) {
+  padding-bottom: 0;
+}
+storefront-enhanced-product-list-example .swiper-button-prev:after,
+storefront-enhanced-product-list-example .swiper-button-next:after {
   content: none;
 }
-.ptc-icon-card-slider-wrapper .swiper-button-prev img,
-.ptc-icon-card-slider-wrapper .swiper-button-next img {
-  background-color: var(--color-white);
+storefront-enhanced-product-list-example .swiper-button-prev img,
+storefront-enhanced-product-list-example .swiper-button-next img {
+  background-color: #ffffff;
 }
-.ptc-icon-card-slider-wrapper .swiper-button-prev,
-.ptc-icon-card-slider-wrapper .swiper-rtl .swiper-button-next {
+storefront-enhanced-product-list-example .swiper-button-prev,
+storefront-enhanced-product-list-example .swiper-rtl .swiper-button-next {
   top: auto;
   bottom: 0px;
   left: auto;
@@ -1078,29 +1055,29 @@ swiper-container:not(.swiper-watch-progress) .swiper-lazy-preloader,
   width: 40px;
   border-radius: 4px;
 }
-.ptc-icon-card-slider-wrapper .swiper-button-prev:hover,
-.ptc-icon-card-slider-wrapper .swiper-rtl .swiper-button-next:hover {
+storefront-enhanced-product-list-example .swiper-button-prev:hover,
+storefront-enhanced-product-list-example .swiper-rtl .swiper-button-next:hover {
   outline: none;
   outline-offset: 0;
   text-decoration: none;
-  background-color: var(--color-gray-02);
+  background-color: #E4E7E9;
   transition: var(--ptc-transition-slow) linear;
 }
-.ptc-icon-card-slider-wrapper .swiper-button-prev:focus, .ptc-icon-card-slider-wrapper .swiper-button-prev:active,
-.ptc-icon-card-slider-wrapper .swiper-rtl .swiper-button-next:focus,
-.ptc-icon-card-slider-wrapper .swiper-rtl .swiper-button-next:active {
+storefront-enhanced-product-list-example .swiper-button-prev:focus, storefront-enhanced-product-list-example .swiper-button-prev:active,
+storefront-enhanced-product-list-example .swiper-rtl .swiper-button-next:focus,
+storefront-enhanced-product-list-example .swiper-rtl .swiper-button-next:active {
   outline: none;
   outline-offset: 0;
   text-decoration: none;
-  background-color: var(--color-gray-03);
+  background-color: #BEC6CA;
 }
-.ptc-icon-card-slider-wrapper .swiper-button-prev svg,
-.ptc-icon-card-slider-wrapper .swiper-rtl .swiper-button-next svg {
+storefront-enhanced-product-list-example .swiper-button-prev svg,
+storefront-enhanced-product-list-example .swiper-rtl .swiper-button-next svg {
   height: 14px;
   width: 9px;
 }
-.ptc-icon-card-slider-wrapper .swiper-button-next,
-.ptc-icon-card-slider-wrapper .swiper-rtl .swiper-button-prev {
+storefront-enhanced-product-list-example .swiper-button-next,
+storefront-enhanced-product-list-example .swiper-rtl .swiper-button-prev {
   top: auto;
   bottom: 0px;
   right: auto;
@@ -1109,35 +1086,33 @@ swiper-container:not(.swiper-watch-progress) .swiper-lazy-preloader,
   width: 40px;
   border-radius: 4px;
 }
-.ptc-icon-card-slider-wrapper .swiper-button-next:hover,
-.ptc-icon-card-slider-wrapper .swiper-rtl .swiper-button-prev:hover {
+storefront-enhanced-product-list-example .swiper-button-next:hover,
+storefront-enhanced-product-list-example .swiper-rtl .swiper-button-prev:hover {
   outline: none;
   outline-offset: 0;
   text-decoration: none;
-  background-color: var(--color-gray-02);
+  background-color: #E4E7E9;
   transition: var(--ptc-transition-slow) linear;
 }
-.ptc-icon-card-slider-wrapper .swiper-button-next:focus, .ptc-icon-card-slider-wrapper .swiper-button-next:active,
-.ptc-icon-card-slider-wrapper .swiper-rtl .swiper-button-prev:focus,
-.ptc-icon-card-slider-wrapper .swiper-rtl .swiper-button-prev:active {
+storefront-enhanced-product-list-example .swiper-button-next:focus, storefront-enhanced-product-list-example .swiper-button-next:active,
+storefront-enhanced-product-list-example .swiper-rtl .swiper-button-prev:focus,
+storefront-enhanced-product-list-example .swiper-rtl .swiper-button-prev:active {
   outline: none;
   outline-offset: 0;
   text-decoration: none;
-  background-color: var(--color-gray-03);
+  background-color: #BEC6CA;
 }
-.ptc-icon-card-slider-wrapper .swiper-button-next svg,
-.ptc-icon-card-slider-wrapper .swiper-rtl .swiper-button-prev svg {
+storefront-enhanced-product-list-example .swiper-button-next svg,
+storefront-enhanced-product-list-example .swiper-rtl .swiper-button-prev svg {
   height: 14px;
   width: 9px;
 }
-.ptc-icon-card-slider-wrapper .swiper {
-  width: 100%;
-  height: 100%;
-}
-.ptc-icon-card-slider-wrapper .swiper-container {
-  clip-path: inset(0px -10px 0px -10px);
-  padding-left: 24px;
-  padding-right: 24px;
-  margin-left: -24px;
-  margin-right: -24px;
+@media only screen and (min-width: 768px) {
+  storefront-enhanced-product-list-example .swiper-container {
+    padding-left: 4px;
+    padding-right: 4px;
+    margin-left: -4px;
+    margin-right: -4px;
+    overflow-x: clip;
+  }
 }

package/dist/collection/components/organism-bundles/storefront-enhanced-product-list-example/storefront-enhanced-product-list-example.js

@@ -0,0 +1,63 @@
+import { Host, h } from '@stencil/core';
+import Swiper, { Navigation, Pagination, Scrollbar, Mousewheel } from 'swiper';
+export class StorefrontEnhancedProductListExample {
+  constructor() {
+    this.componentDidLoad = () => {
+      setTimeout(() => {
+        let swiperContainer = this.el.querySelector('.enhanced-product-listing-cards');
+        this.swiper = new Swiper(swiperContainer, {
+          modules: [Navigation, Pagination, Scrollbar, Mousewheel],
+          slidesPerView: 'auto',
+          spaceBetween: 24,
+          initialSlide: 0,
+          centerInsufficientSlides: false,
+          scrollbar: {
+            el: this.swiperPaginationRef,
+            draggable: false,
+          },
+          navigation: {
+            nextEl: this.swiperButtonNextRef,
+            prevEl: this.swiperButtonPrevRef,
+          },
+          mousewheel: {
+            forceToAxis: true,
+            sensitivity: 100,
+          },
+          breakpoints: {
+            768: {
+              slidesPerView: 2,
+              spaceBetween: 24,
+            },
+            1200: {
+              slidesPerView: 2,
+              spaceBetween: 32,
+            },
+            1440: {
+              slidesPerView: 2,
+              spaceBetween: 40,
+            },
+          },
+        });
+        swiperContainer.addEventListener('ctaFocussed', (e) => {
+          let focusIndex = e.detail['card-index'];
+          this.swiper.slideTo(focusIndex);
+        });
+      }, 100);
+    };
+  }
+  render() {
+    return (h(Host, null, h("div", { class: "swiper-container enhanced-product-listing-cards" }, h("div", { class: "swiper-wrapper" }, h("slot", null)), h("div", { class: "swiper-scrollbar", ref: el => (this.swiperPaginationRef = el) }), h("div", { class: "swiper-button-next", ref: el => (this.swiperButtonNextRef = el) }, h("svg", { width: "14", height: "20", viewBox: "0 0 14 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M0.75 17.25L8 10L0.75 2.75L3.375 0.125L13.25 10L3.375 19.875L0.75 17.25Z", fill: "#323B42" }))), h("div", { class: "swiper-button-prev", ref: el => (this.swiperButtonPrevRef = el) }, h("svg", { width: "14", height: "20", viewBox: "0 0 14 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M13.25 2.75L6 10L13.25 17.25L10.625 19.875L0.749999 10L10.625 0.125L13.25 2.75Z", fill: "#323B42" }))))));
+  }
+  static get is() { return "storefront-enhanced-product-list-example"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["storefront-enhanced-product-list-example.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["storefront-enhanced-product-list-example.css"]
+    };
+  }
+  static get elementRef() { return "el"; }
+}

package/dist/collection/components/ptc-bio-card/ptc-bio-card.css

@@ -82,26 +82,26 @@ a:focus-visible {
   border-radius: var(--ptc-border-radius-standard);
 }
 
-.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a), .light-links a.light-link, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a), .background-grey-10 a.light-link, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a), .background-plm-grey a.light-link {
+.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a), .light-links a.light-link, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a), .background-grey-10 a.light-link, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a), .background-plm-grey a.light-link {
   color: var(--color-blue-04);
   margin: -2px;
   border: 2px solid transparent;
 }
-.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):visited, .light-links a.light-link:visited, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):visited, .background-grey-10 a.light-link:visited, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):visited, .background-plm-grey a.light-link:visited {
+.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a):visited, .light-links a.light-link:visited, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a):visited, .background-grey-10 a.light-link:visited, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a):visited, .background-plm-grey a.light-link:visited {
   color: var(--color-blue-06);
 }
-.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):active, .light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):visited:active, .light-links a.light-link:active, .light-links a.light-link:visited:active, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):active, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):visited:active, .background-grey-10 a.light-link:active, .background-grey-10 a.light-link:visited:active, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):active, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):visited:active, .background-plm-grey a.light-link:active, .background-plm-grey a.light-link:visited:active {
+.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a):active, .light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a):visited:active, .light-links a.light-link:active, .light-links a.light-link:visited:active, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a):active, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a):visited:active, .background-grey-10 a.light-link:active, .background-grey-10 a.light-link:visited:active, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a):active, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a):visited:active, .background-plm-grey a.light-link:active, .background-plm-grey a.light-link:visited:active {
   transition: none;
   color: var(--color-blue-07);
 }
-.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):hover, .light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):visited:hover, .light-links a.light-link:hover, .light-links a.light-link:visited:hover, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):hover, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):visited:hover, .background-grey-10 a.light-link:hover, .background-grey-10 a.light-link:visited:hover, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):hover, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):visited:hover, .background-plm-grey a.light-link:hover, .background-plm-grey a.light-link:visited:hover {
+.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a):hover, .light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a):visited:hover, .light-links a.light-link:hover, .light-links a.light-link:visited:hover, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a):hover, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a):visited:hover, .background-grey-10 a.light-link:hover, .background-grey-10 a.light-link:visited:hover, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a):hover, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a):visited:hover, .background-plm-grey a.light-link:hover, .background-plm-grey a.light-link:visited:hover {
   color: var(--color-blue-05);
 }
-.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a).disabled, .light-links a.light-link.disabled, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a).disabled, .background-grey-10 a.light-link.disabled, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a).disabled, .background-plm-grey a.light-link.disabled {
+.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a).disabled, .light-links a.light-link.disabled, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a).disabled, .background-grey-10 a.light-link.disabled, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a).disabled, .background-plm-grey a.light-link.disabled {
   color: var(--color-gray-04) !important;
   cursor: not-allowed;
 }
-.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):focus-visible, .light-links a.light-link:focus-visible, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):focus-visible, .background-grey-10 a.light-link:focus-visible, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):focus-visible, .background-plm-grey a.light-link:focus-visible {
+.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a):focus-visible, .light-links a.light-link:focus-visible, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a):focus-visible, .background-grey-10 a.light-link:focus-visible, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a):focus-visible, .background-plm-grey a.light-link:focus-visible {
   border-radius: var(--ptc-border-radius-standard);
   border: 2px solid white;
   outline: 5px solid var(--keyboard-nav-outline);

package/dist/collection/components/ptc-bio-card/ptc-bio-card.js

@@ -23,7 +23,9 @@ export class PtcBioCard {
     }
   }
   render() {
-    return (h(Host, { type: "button", class: this.isModal ? 'card-with-modal' : '' }, h("div", { class: "bio-card", onClick: () => { this.openModal(); } }, h("slot", { name: "seo-content" }), h("div", { class: "bio-card__image" }, h("img", { src: this.image, alt: `${this.name} profile image` })), h("div", { class: "bio-card__content" }, h("div", null, h("h3", { class: "bio-card__name" }, this.name), h("p", { class: "bio-card__job-title" }, this.jobTitle)), (this.linkedin || this.twitter) && (h("div", { class: "bio-card__social-links" }, this.linkedin && (h("a", { href: this.linkedin, target: "_blank", class: "tw social-icon", "aria-label": "linkedin", title: "linkedin" }, h("style", null, `.social-icon .cls-1 {  fill: url(#linear-gradient1-in);  } `), h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "32", height: "36.794", viewBox: "0 0 32 36.794" }, h("defs", null, h("linearGradient", { id: "linear-gradient1-in", x1: ".5", x2: ".5", y2: "1", gradientUnits: "objectBoundingBox" }, h("stop", { offset: "0", "stop-color": "#fff" }), h("stop", { offset: "1", "stop-color": "#e5e5e5" }))), h("g", { class: "cls-1", "data-name": "Path 4255" }, h("path", { d: "M27.307 31.495H9.487L.578 15.998 9.487.5h17.82l8.91 15.498-8.91 15.497z", class: "cls-3", transform: "rotate(90 15.998 15.998)" }), h("path", { d: "M9.777 1L1.154 15.998l8.623 14.997h17.24l8.624-14.997L27.017 1H9.777M9.2 0h18.397l9.198 15.998-9.198 15.997H9.199L0 15.998 9.199 0z", class: "cls-4", transform: "rotate(90 15.998 15.998)" })), h("path", { d: "M-416.964 153.563h-2.487v-7.987h2.487zm-1.311-8.985h-.018a1.385 1.385 0 0 1-1.485-1.279v-.107a1.4 1.4 0 0 1 1.524-1.385 1.393 1.393 0 0 1 1.5 1.278v.107a1.4 1.4 0 0 1-1.521 1.386zm11.283 8.985h-2.842v-4.132c0-1.066-.441-1.819-1.421-1.819a1.422 1.422 0 0 0-1.35.977 1.82 1.82 0 0 0-.06.65v4.324h-2.778s.036-7.319 0-7.983h2.8v1.265a2.563 2.563 0 0 1 2.487-1.329c1.776 0 3.165 1.147 3.165 3.62z", class: "cls-2", "data-name": "Path 8769", transform: "translate(429.342 -128.977)" })))), this.twitter && (h("a", { href: this.twitter, target: "_blank", class: "tw social-icon", "aria-label": "X", title: "X" }, h("style", null, `.social-icon .cls-1 {  fill: url(#linear-gradient0-tw);  } `), h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "32", height: "36.794", viewBox: "0 0 32 36.794" }, h("defs", null, h("linearGradient", { id: "linear-gradient0-tw", x1: ".5", x2: ".5", y2: "1", gradientUnits: "objectBoundingBox" }, h("stop", { offset: "0", "stop-color": "#fff" }), h("stop", { offset: "1", "stop-color": "#e5e5e5" }))), h("g", { class: "cls-1", "data-name": "Path 4255" }, h("path", { d: "M27.307 31.495H9.487L.578 15.998 9.487.5h17.82l8.91 15.498-8.91 15.497z", class: "cls-3", transform: "rotate(90 15.998 15.998)" }), h("path", { d: "M9.777 1L1.154 15.998l8.623 14.997h17.24l8.624-14.997L27.017 1H9.777M9.2 0h18.397l9.198 15.998-9.198 15.997H9.199L0 15.998 9.199 0z", class: "cls-4", transform: "rotate(90 15.998 15.998)" })), h("g", { transform: "translate(9.205 13.034) scale(0.13)", "data-name": "Group 3004" }, h("path", { class: "cls-x-1", d: "M57.95,42.55L88.66,6.86h-7.28l-26.67,31L33.42,6.86H8.86l32.21,46.87L8.86,91.16h7.28l28.16-32.73,22.49,32.73h24.56l-33.4-48.61h0ZM47.98,54.14l-3.26-4.67L18.76,12.33h11.18l20.95,29.97,3.26,4.67,27.24,38.96h-11.18l-22.23-31.79h0Z", width: "15", height: "15" }), h("rect", { class: "cls-x-2" }))))))))), this.isModal && (h("ptc-modal", { id: "bio-modal", show: this.showModal, size: "lg", "border-radius": 'large', "is-bio-modal": true, fixed: true }, h("div", { class: "modal-wrap" }, h("div", { class: "bio-modal-left" }, h("div", { class: "bio-modal__image" }, h("img", { src: this.image, alt: `${this.name} profile image` })), (this.linkedin || this.twitter) && (h("div", { class: "bio-card__social-links" }, this.linkedin && (h("a", { href: this.linkedin, target: "_blank", class: "tw social-icon", "aria-label": "linkedin" }, h("style", null, `.social-icon .cls-1 {  fill: url(#linear-gradient1-in);  } `), h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "32", height: "36.794", viewBox: "0 0 32 36.794" }, h("defs", null, h("linearGradient", { id: "linear-gradient1-in", x1: ".5", x2: ".5", y2: "1", gradientUnits: "objectBoundingBox" }, h("stop", { offset: "0", "stop-color": "#fff" }), h("stop", { offset: "1", "stop-color": "#e5e5e5" }))), h("g", { class: "cls-1", "data-name": "Path 4255" }, h("path", { d: "M27.307 31.495H9.487L.578 15.998 9.487.5h17.82l8.91 15.498-8.91 15.497z", class: "cls-3", transform: "rotate(90 15.998 15.998)" }), h("path", { d: "M9.777 1L1.154 15.998l8.623 14.997h17.24l8.624-14.997L27.017 1H9.777M9.2 0h18.397l9.198 15.998-9.198 15.997H9.199L0 15.998 9.199 0z", class: "cls-4", transform: "rotate(90 15.998 15.998)" })), h("path", { d: "M-416.964 153.563h-2.487v-7.987h2.487zm-1.311-8.985h-.018a1.385 1.385 0 0 1-1.485-1.279v-.107a1.4 1.4 0 0 1 1.524-1.385 1.393 1.393 0 0 1 1.5 1.278v.107a1.4 1.4 0 0 1-1.521 1.386zm11.283 8.985h-2.842v-4.132c0-1.066-.441-1.819-1.421-1.819a1.422 1.422 0 0 0-1.35.977 1.82 1.82 0 0 0-.06.65v4.324h-2.778s.036-7.319 0-7.983h2.8v1.265a2.563 2.563 0 0 1 2.487-1.329c1.776 0 3.165 1.147 3.165 3.62z", class: "cls-2", "data-name": "Path 8769", transform: "translate(429.342 -128.977)" })))), this.twitter && (h("a", { href: this.twitter, target: "_blank", class: "tw social-icon", "aria-label": "twitter" }, h("style", null, `.social-icon .cls-1 {  fill: url(#linear-gradient0-tw);  } `), h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "32", height: "36.794", viewBox: "0 0 32 36.794" }, h("defs", null, h("linearGradient", { id: "linear-gradient0-tw", x1: ".5", x2: ".5", y2: "1", gradientUnits: "objectBoundingBox" }, h("stop", { offset: "0", "stop-color": "#fff" }), h("stop", { offset: "1", "stop-color": "#e5e5e5" }))), h("g", { class: "cls-1", "data-name": "Path 4255" }, h("path", { d: "M27.307 31.495H9.487L.578 15.998 9.487.5h17.82l8.91 15.498-8.91 15.497z", class: "cls-3", transform: "rotate(90 15.998 15.998)" }), h("path", { d: "M9.777 1L1.154 15.998l8.623 14.997h17.24l8.624-14.997L27.017 1H9.777M9.2 0h18.397l9.198 15.998-9.198 15.997H9.199L0 15.998 9.199 0z", class: "cls-4", transform: "rotate(90 15.998 15.998)" })), h("g", { transform: "translate(9.205 13.034) scale(0.13)", "data-name": "Group 3004" }, h("path", { class: "cls-x-1", d: "M57.95,42.55L88.66,6.86h-7.28l-26.67,31L33.42,6.86H8.86l32.21,46.87L8.86,91.16h7.28l28.16-32.73,22.49,32.73h24.56l-33.4-48.61h0ZM47.98,54.14l-3.26-4.67L18.76,12.33h11.18l20.95,29.97,3.26,4.67,27.24,38.96h-11.18l-22.23-31.79h0Z", width: "15", height: "15" }), h("rect", { class: "cls-x-2" })))))))), h("div", { class: "bio-modal-right" }, h("div", { class: "bio-modal-header" }, h("h2", { class: "bio-card__name" }, this.name), h("p", { class: "bio-card__job-title" }, this.jobTitle)), h("div", { class: "bio-modal-description" }, h("slot", null))))))));
+    return (h(Host, { onClick: () => {
+        this.openModal();
+      }, type: "button", class: this.isModal ? 'card-with-modal' : '' }, h("div", { class: "bio-card" }, h("slot", { name: "seo-content" }), h("div", { class: "bio-card__image" }, h("img", { src: this.image, alt: `${this.name} profile image` })), h("div", { class: "bio-card__content" }, h("div", null, h("h3", { class: "bio-card__name" }, this.name), h("p", { class: "bio-card__job-title" }, this.jobTitle)), (this.linkedin || this.twitter) && (h("div", { class: "bio-card__social-links" }, this.linkedin && (h("a", { href: this.linkedin, target: "_blank", class: "tw social-icon", "aria-label": "linkedin", title: "linkedin" }, h("style", null, `.social-icon .cls-1 {  fill: url(#linear-gradient1-in);  } `), h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "32", height: "36.794", viewBox: "0 0 32 36.794" }, h("defs", null, h("linearGradient", { id: "linear-gradient1-in", x1: ".5", x2: ".5", y2: "1", gradientUnits: "objectBoundingBox" }, h("stop", { offset: "0", "stop-color": "#fff" }), h("stop", { offset: "1", "stop-color": "#e5e5e5" }))), h("g", { class: "cls-1", "data-name": "Path 4255" }, h("path", { d: "M27.307 31.495H9.487L.578 15.998 9.487.5h17.82l8.91 15.498-8.91 15.497z", class: "cls-3", transform: "rotate(90 15.998 15.998)" }), h("path", { d: "M9.777 1L1.154 15.998l8.623 14.997h17.24l8.624-14.997L27.017 1H9.777M9.2 0h18.397l9.198 15.998-9.198 15.997H9.199L0 15.998 9.199 0z", class: "cls-4", transform: "rotate(90 15.998 15.998)" })), h("path", { d: "M-416.964 153.563h-2.487v-7.987h2.487zm-1.311-8.985h-.018a1.385 1.385 0 0 1-1.485-1.279v-.107a1.4 1.4 0 0 1 1.524-1.385 1.393 1.393 0 0 1 1.5 1.278v.107a1.4 1.4 0 0 1-1.521 1.386zm11.283 8.985h-2.842v-4.132c0-1.066-.441-1.819-1.421-1.819a1.422 1.422 0 0 0-1.35.977 1.82 1.82 0 0 0-.06.65v4.324h-2.778s.036-7.319 0-7.983h2.8v1.265a2.563 2.563 0 0 1 2.487-1.329c1.776 0 3.165 1.147 3.165 3.62z", class: "cls-2", "data-name": "Path 8769", transform: "translate(429.342 -128.977)" })))), this.twitter && (h("a", { href: this.twitter, target: "_blank", class: "tw social-icon", "aria-label": "X", title: "X" }, h("style", null, `.social-icon .cls-1 {  fill: url(#linear-gradient0-tw);  } `), h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "32", height: "36.794", viewBox: "0 0 32 36.794" }, h("defs", null, h("linearGradient", { id: "linear-gradient0-tw", x1: ".5", x2: ".5", y2: "1", gradientUnits: "objectBoundingBox" }, h("stop", { offset: "0", "stop-color": "#fff" }), h("stop", { offset: "1", "stop-color": "#e5e5e5" }))), h("g", { class: "cls-1", "data-name": "Path 4255" }, h("path", { d: "M27.307 31.495H9.487L.578 15.998 9.487.5h17.82l8.91 15.498-8.91 15.497z", class: "cls-3", transform: "rotate(90 15.998 15.998)" }), h("path", { d: "M9.777 1L1.154 15.998l8.623 14.997h17.24l8.624-14.997L27.017 1H9.777M9.2 0h18.397l9.198 15.998-9.198 15.997H9.199L0 15.998 9.199 0z", class: "cls-4", transform: "rotate(90 15.998 15.998)" })), h("g", { transform: "translate(9.205 13.034) scale(0.13)", "data-name": "Group 3004" }, h("path", { class: "cls-x-1", d: "M57.95,42.55L88.66,6.86h-7.28l-26.67,31L33.42,6.86H8.86l32.21,46.87L8.86,91.16h7.28l28.16-32.73,22.49,32.73h24.56l-33.4-48.61h0ZM47.98,54.14l-3.26-4.67L18.76,12.33h11.18l20.95,29.97,3.26,4.67,27.24,38.96h-11.18l-22.23-31.79h0Z", width: "15", height: "15" }), h("rect", { class: "cls-x-2" }))))))))), this.isModal && (h("ptc-modal", { id: "bio-modal", show: this.showModal, size: "lg", "border-radius": 'large', "is-bio-modal": true, fixed: true }, h("div", { class: "modal-wrap" }, h("div", { class: "bio-modal-left" }, h("div", { class: "bio-modal__image" }, h("img", { src: this.image, alt: `${this.name} profile image` })), (this.linkedin || this.twitter) && (h("div", { class: "bio-card__social-links" }, this.linkedin && (h("a", { href: this.linkedin, target: "_blank", class: "tw social-icon", "aria-label": "linkedin" }, h("style", null, `.social-icon .cls-1 {  fill: url(#linear-gradient1-in);  } `), h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "32", height: "36.794", viewBox: "0 0 32 36.794" }, h("defs", null, h("linearGradient", { id: "linear-gradient1-in", x1: ".5", x2: ".5", y2: "1", gradientUnits: "objectBoundingBox" }, h("stop", { offset: "0", "stop-color": "#fff" }), h("stop", { offset: "1", "stop-color": "#e5e5e5" }))), h("g", { class: "cls-1", "data-name": "Path 4255" }, h("path", { d: "M27.307 31.495H9.487L.578 15.998 9.487.5h17.82l8.91 15.498-8.91 15.497z", class: "cls-3", transform: "rotate(90 15.998 15.998)" }), h("path", { d: "M9.777 1L1.154 15.998l8.623 14.997h17.24l8.624-14.997L27.017 1H9.777M9.2 0h18.397l9.198 15.998-9.198 15.997H9.199L0 15.998 9.199 0z", class: "cls-4", transform: "rotate(90 15.998 15.998)" })), h("path", { d: "M-416.964 153.563h-2.487v-7.987h2.487zm-1.311-8.985h-.018a1.385 1.385 0 0 1-1.485-1.279v-.107a1.4 1.4 0 0 1 1.524-1.385 1.393 1.393 0 0 1 1.5 1.278v.107a1.4 1.4 0 0 1-1.521 1.386zm11.283 8.985h-2.842v-4.132c0-1.066-.441-1.819-1.421-1.819a1.422 1.422 0 0 0-1.35.977 1.82 1.82 0 0 0-.06.65v4.324h-2.778s.036-7.319 0-7.983h2.8v1.265a2.563 2.563 0 0 1 2.487-1.329c1.776 0 3.165 1.147 3.165 3.62z", class: "cls-2", "data-name": "Path 8769", transform: "translate(429.342 -128.977)" })))), this.twitter && (h("a", { href: this.twitter, target: "_blank", class: "tw social-icon", "aria-label": "twitter" }, h("style", null, `.social-icon .cls-1 {  fill: url(#linear-gradient0-tw);  } `), h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "32", height: "36.794", viewBox: "0 0 32 36.794" }, h("defs", null, h("linearGradient", { id: "linear-gradient0-tw", x1: ".5", x2: ".5", y2: "1", gradientUnits: "objectBoundingBox" }, h("stop", { offset: "0", "stop-color": "#fff" }), h("stop", { offset: "1", "stop-color": "#e5e5e5" }))), h("g", { class: "cls-1", "data-name": "Path 4255" }, h("path", { d: "M27.307 31.495H9.487L.578 15.998 9.487.5h17.82l8.91 15.498-8.91 15.497z", class: "cls-3", transform: "rotate(90 15.998 15.998)" }), h("path", { d: "M9.777 1L1.154 15.998l8.623 14.997h17.24l8.624-14.997L27.017 1H9.777M9.2 0h18.397l9.198 15.998-9.198 15.997H9.199L0 15.998 9.199 0z", class: "cls-4", transform: "rotate(90 15.998 15.998)" })), h("g", { transform: "translate(9.205 13.034) scale(0.13)", "data-name": "Group 3004" }, h("path", { class: "cls-x-1", d: "M57.95,42.55L88.66,6.86h-7.28l-26.67,31L33.42,6.86H8.86l32.21,46.87L8.86,91.16h7.28l28.16-32.73,22.49,32.73h24.56l-33.4-48.61h0ZM47.98,54.14l-3.26-4.67L18.76,12.33h11.18l20.95,29.97,3.26,4.67,27.24,38.96h-11.18l-22.23-31.79h0Z", width: "15", height: "15" }), h("rect", { class: "cls-x-2" })))))))), h("div", { class: "bio-modal-right" }, h("div", { class: "bio-modal-header" }, h("h2", { class: "bio-card__name" }, this.name), h("p", { class: "bio-card__job-title" }, this.jobTitle)), h("div", { class: "bio-modal-description" }, h("slot", null))))))));
   }
   static get is() { return "ptc-bio-card"; }
   static get encapsulation() { return "shadow"; }