@ptcwebops/ptcw-design 6.4.12 → 6.4.13-beta

package/dist/collection/components/innovator-toggle-container/innovator-toggle-container.css

@@ -88,14 +88,17 @@ a: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),
 .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);
@@ -104,38 +107,47 @@ ptc-modal inline-form a,
 }
 .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,
+.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 {
@@ -144,24 +156,30 @@ ptc-modal inline-form a,
 }
 .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 {
@@ -169,14 +187,17 @@ ptc-modal inline-form a,
 }
 .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;
@@ -184,14 +205,17 @@ ptc-modal inline-form a,
 }
 .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);
@@ -295,12 +319,14 @@ ptc-modal inline-form a,
   transform: scaleX(-1) translateY(5px);
 }
 :host .backdrop-blur {
-  backdrop-filter: blur(7px);
+  -webkit-backdrop-filter: blur(7px);
+          backdrop-filter: blur(7px);
   padding: var(--ptc-layout-spacing-05) 0;
 }
 :host .content-box {
   padding: var(--ptc-element-spacing-05);
-  backdrop-filter: blur(13.7px);
+  -webkit-backdrop-filter: blur(13.7px);
+          backdrop-filter: blur(13.7px);
   border: 1px solid rgba(255, 255, 255, 0.54);
   border-radius: 10px;
   position: relative;

package/dist/collection/components/organism-bundles/blogs-search-section/blogs-search-section.js

@@ -193,7 +193,10 @@ export class BlogsSearchSection {
         return (h("div", { class: "is-col-12 is-col-6-md is-col-4-xl" }, h("ptc-card", { "card-href": "http://www.google.com", "card-type": "case-studies-card", "has-image": "true", heading: "2022 SoCal RUG Event", "heading-transform": "none", target: "_blank" }, h("ptc-img", { slot: "slot-image", "img-url": "http://s7d1.scene7.com/is/image/ptcinc/cs-boeing-planes-runway", "image-type": "smart-img", "load-mode": "lazy-bg" }), h("div", { slot: "slot-description" }, h("ptc-para", { "font-size": "medium", "font-weight": "w-4", "para-line-h": "line-height-19" }, "Join us for live presentations and hear about the latest updates for Creo, Windchill PLM, and Thingworx IOT and Augmented Reality.")))));
       }))));
     };
-    return (h(Host, null, h("div", { class: "blogs-serach-section" }, h("slot", { name: "mobile-search-and-filter" }), h("div", { class: "is-grid has-col-gap-lg" }, h("div", { class: "is-col-4-lg is-col-3-xl" }, h("slot", { name: "blogs-desktop-filters" })), h("div", { class: "is-col-12 is-col-8-lg is-col-9-xl" }, h("ptc-preloader-section", { id: "preload", "auto-show": "false", "section-type": "blogs-listing", "number-of-cards": "9" }, h("div", null, h("div", { class: `search-results-and-tags ${this.search || this.filters.length > 0 ? "show" : ""}` }, h("div", null, h("div", { class: "results-label" }, h("ptc-para", { "font-size": "x-small", "font-weight": "w-4", "para-margin": "margin-flush", "para-style": "main" }, this.data.length, " Results")), h("div", { class: "results-divider is-desktop" }), h("div", { class: "filter-list is-desktop" }, this.search && (h("ptc-filter-tag", { theme: "bubble", onClicked: this
+    return (h(Host, null, h("div", { class: "blogs-serach-section" }, h("slot", { name: "mobile-search-and-filter" }), h("div", { class: "is-grid has-col-gap-lg" }, h("div", { class: "is-col-4-lg is-col-3-xl" }, h("slot", { name: "blogs-desktop-filters" })), h("div", { class: "is-col-12 is-col-8-lg is-col-9-xl" }, h("ptc-preloader-section", { id: "preload", "auto-show": "false", "section-type": "blogs-listing", "number-of-cards": "9" }, h("div", null, h("div", { class: `search-results-and-tags ${this.search ||
+        this.filters.length > 0
+        ? "show"
+        : ""}` }, h("div", null, h("div", { class: "results-label" }, h("ptc-para", { "font-size": "x-small", "font-weight": "w-4", "para-margin": "margin-flush", "para-style": "main" }, this.data.length, " Results")), h("div", { class: "results-divider is-desktop" }), h("div", { class: "filter-list is-desktop" }, this.search && (h("ptc-filter-tag", { theme: "bubble", onClicked: this
         .handleRemoveSearchTag, "data-type": FilterTagTypes.FILTER, "data-value": this.search }, `Search: "${this.search}"`)), this.filters.map((filter) => {
       return (h("ptc-filter-tag", { theme: "bubble", onClicked: this
           .handleRemoveFilterTag, "data-type": FilterTagTypes.SEARCH, "data-value": filter }, filter));

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

@@ -88,14 +88,17 @@ a: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),
 .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);
@@ -104,38 +107,47 @@ ptc-modal inline-form a,
 }
 .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,
+.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 {
@@ -144,24 +156,30 @@ ptc-modal inline-form a,
 }
 .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 {
@@ -169,14 +187,17 @@ ptc-modal inline-form a,
 }
 .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;
@@ -184,14 +205,17 @@ ptc-modal inline-form a,
 }
 .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);

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,114 @@
+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/homepage-toggled-content/homepage-toggled-content.js

@@ -118,7 +118,9 @@ export class HomepageToggledContent {
     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" })));
     const tabs = this.getTabs();
-    return (h("div", { class: "wrapper" }, h("div", { class: "header" }, h("h2", null, h("slot", { name: "title" })), h("p", null, h("slot", { name: "description" }))), h("div", { class: "tabs" }, h("div", { class: "tabs-desktop" }, tabs.map((tab) => (h("homepage-clickable-tab", { label: tab.label, active: this.activeTab === tab.index, activeColor: this.colors[tab.index], onClick: () => this.handleTabSelected(tab.index) })))), h("div", { class: "tabs-mobile" }, h("button", { class: `dropdown-button ${this.colors[this.activeTab]} ${this.dropdownOpen ? "opened" : ""}`, onClick: () => this.toggleDropdown() }, tabs[this.activeTab].label, h("span", { class: "arrow" }, this.dropdownOpen ? upArrow : downArrow)), this.dropdownOpen && (h("div", { class: "dropdown-menu" }, tabs.map((tab) => (h("div", { class: `dropdown-item ${tab.index === this.activeTab ? "active-tab" : ""}`, onClick: () => this.handleTabSelected(tab.index) }, h("slot", { name: `tab-label-${tab.index}` })))))))), h("div", { class: "content" }, tabs.map((tab, index) => (h("div", { class: `tab-content ${this.activeTab === index ? "active-tab" : ""}` }, h("slot", { name: `tab-image-${index}` }), h("div", { class: "content-detail" }, h("div", { hidden: true }, tab.label), h("h2", null, h("slot", { name: `tab-title-${index}` })), h("p", null, h("slot", { name: `tab-content-${index}` })), h("slot", { name: `tab-button-${index}` }), this.activeTab === index &&
+    return (h("div", { class: "wrapper" }, h("div", { class: "header" }, h("h2", null, h("slot", { name: "title" })), h("p", null, h("slot", { name: "description" }))), h("div", { class: "tabs" }, h("div", { class: "tabs-desktop" }, tabs.map((tab) => (h("homepage-clickable-tab", { label: tab.label, active: this.activeTab === tab.index, activeColor: this.colors[tab.index], onClick: () => this.handleTabSelected(tab.index) })))), h("div", { class: "tabs-mobile" }, h("button", { class: `dropdown-button ${this.colors[this.activeTab]} ${this.dropdownOpen ? "opened" : ""}`, onClick: () => this.toggleDropdown() }, tabs[this.activeTab].label, h("span", { class: "arrow" }, this.dropdownOpen ? upArrow : downArrow)), this.dropdownOpen && (h("div", { class: "dropdown-menu" }, tabs.map((tab) => (h("div", { class: `dropdown-item ${tab.index === this.activeTab
+        ? "active-tab"
+        : ""}`, onClick: () => this.handleTabSelected(tab.index) }, h("slot", { name: `tab-label-${tab.index}` })))))))), h("div", { class: "content" }, tabs.map((tab, index) => (h("div", { class: `tab-content ${this.activeTab === index ? "active-tab" : ""}` }, h("slot", { name: `tab-image-${index}` }), h("div", { class: "content-detail" }, h("div", { hidden: true }, tab.label), h("h2", null, h("slot", { name: `tab-title-${index}` })), h("p", null, h("slot", { name: `tab-content-${index}` })), h("slot", { name: `tab-button-${index}` }), this.activeTab === index &&
       this.tileElements.length > 0 ? (h("div", Object.assign({ class: "info-card-wrapper card-section" }, this.getSliderBindings()), this.tileElements.map((tile, index) => (h("div", { class: `swiper-slide card-link card-link-${index + 1}`, "tab-index": index + 1, key: index, innerHTML: tile.outerHTML, onMouseDown: (e) => this.onCardMouseDown(e), onMouseUp: (e) => this.onCardMouseUp(e), onMouseLeave: (e) => this.onCardMouseUp(e), onTouchEnd: (e) => {
         this.onCardMouseUp(e);
       } }))))) : null)))))));

package/dist/collection/components/ptc-announcement/ptc-announcement.js

@@ -48,7 +48,8 @@ export class PtcAnnouncement {
     // <ptc-tooltip text-display="inline" max-length="60" z-index="z-2" description={this.barTitle} position="bottom"></ptc-tooltip>
     h("ptc-tooltip-v2", { "max-length": "60", "z-index": "2" }, this.barTitle)))) : null, this.windowSize === "mobile" ? ( //mobile view
     Object.assign({}, (!!this.description || !!this.linkUrl ? (h("ptc-readmore", { "visible-lines-custom": this.customMaxLines, "z-index": "z-3", "more-text": this.moreText }, h("div", { style: { display: "inline" } }, !!this.description
-      ? `${this.description + " "}`
+      ? `${this.description +
+        " "}`
       : null, !!this.linkText ? (h("a", { class: "cta-link mf-listen", href: this.linkUrl, title: (_a = this.linkTitle) !== null && _a !== void 0 ? _a : this.linkText, target: this.target, tabIndex: 0, id: "announcement-bar-cta" }, this.linkText)) : null))) : null))) : (
     //desktop view
     h("div", { class: "description" }, !!this.description ? (

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

@@ -88,14 +88,17 @@ a: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),
 .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);
@@ -104,38 +107,47 @@ ptc-modal inline-form a,
 }
 .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,
+.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 {
@@ -144,24 +156,30 @@ ptc-modal inline-form a,
 }
 .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 {
@@ -169,14 +187,17 @@ ptc-modal inline-form a,
 }
 .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;
@@ -184,14 +205,17 @@ ptc-modal inline-form a,
 }
 .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);

package/dist/collection/components/ptc-button/ptc-button.css

@@ -617,7 +617,6 @@ a.center {
   display: flex;
   justify-content: center;
   align-items: center;
-  text-align: center;
 }
 .secondary-cta-light .cta-content-wrap icon-asset, .secondary-cta-dark .cta-content-wrap icon-asset, .primary-cta .cta-content-wrap icon-asset {
   margin-right: 8px;
@@ -630,7 +629,6 @@ a.center {
 .primary-cta {
   background-color: var(--color-green-07);
   border-color: var(--color-green-07);
-  transition: all 0.2s ease;
 }
 .primary-cta:hover {
   background-color: var(--color-green-08);