@ptcwebops/ptcw-design 6.3.37 → 6.3.38

package/dist/collection/components/organism-bundles/form/embedded-form/embedded-form.js

@@ -1,23 +1,23 @@
-import { Host, h } from '@stencil/core';
+import { Host, h } from "@stencil/core";
 export class EmbeddedForm {
   constructor() {
     this.formData = {
-      email: '',
-      firstName: '',
-      lastName: '',
-      company: '',
-      country: '',
-      phone: '',
-      inquiryReason: '',
-      howhearselfreport: '',
+      email: "",
+      firstName: "",
+      lastName: "",
+      company: "",
+      country: "",
+      phone: "",
+      inquiryReason: "",
+      howhearselfreport: "",
       policyChecked: false,
     };
     this.isSubmitted = false;
   }
   componentDidLoad() {
     this.onDataLookup();
-    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"]');
@@ -31,13 +31,13 @@ export class EmbeddedForm {
   }
   //handle dataLookup
   onDataLookup() {
-    const dataLookupElement = this.el.closest('ptc-data-lookup');
+    const dataLookupElement = this.el.closest("ptc-data-lookup");
     if (dataLookupElement) {
       // console.log('Perform Data Lookup...');
       dataLookupElement.performDataLookup();
     }
     else {
-      console.log('No Data Lookup...');
+      console.log("No Data Lookup...");
     }
   }
   handleInputChange(field, value) {
@@ -56,7 +56,7 @@ export class EmbeddedForm {
     this.formData.policyChecked = this.policy1.isChecked;
     if (this.formData.policyChecked) {
       if (this.isValid()) {
-        const formSubmitEvent = new CustomEvent('formSubmit', {
+        const formSubmitEvent = new CustomEvent("formSubmit", {
           detail: this.formData,
           bubbles: true,
         });
@@ -64,31 +64,31 @@ export class EmbeddedForm {
         this.isSubmitted = true;
       }
       else {
-        console.log('Form validation failed');
+        console.log("Form validation failed");
       }
     }
     else {
       this.policy1.validateCheckbox();
-      console.log('Warning: Checkbox is not checked. This field is required');
+      console.log("Warning: Checkbox is not checked. This field is required");
     }
   }
   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() {
     const formClass = this.isSubmitted ? "ptc-form-roll-up" : "";
-    return (h(Host, null, h("div", { class: "ptc-container ptc-section-standard flex-adjustments" }, h("div", { class: "form-wrapper ptc-embedded-form" }, h("max-width-container", { "max-width": "277", breakpoint: 480 }, 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."), 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), class: formClass }, h("div", { id: "not-me-link-id" }), h("div", { id: "not-me-additional-top", class: "not-me-additional-text" }), 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", "info-text": "Please include @ in the email address" }), h("ptc-select", { "field-id": "contact-country", label: "Country*", "ptc-data-eloqua-name": "C_Country", "field-name": "country", "default-value": "USA" }, h("ul", { class: "mdc-list" }, h("li", { class: "mdc-list-item", "data-value": "" }, h("span", { class: "mdc-list-item__ripple" })), 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", "info-text": "info text example." }, h("ul", { class: "mdc-list" }, h("li", { class: "mdc-list-item", "data-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", null), 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-textfield", { type: "hidden", "ptc-data-eloqua-name": "test", "input-value": "test" }), h("ptc-textfield", { "field-id": "description", "field-name": "description", "label-text": "Description", type: "textarea", "ptc-max-length": "700" }), h("ptc-form-checkbox", { label: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent nec ultricies risus. Praesent suscipit mauris vel augue facilisis, nec consequat ipsum placerat. Curabitur nisi elit, dignissim tincidunt tincidunt at, vehicula sit amet nisl. Maecenas sodales est vulputate ex feugiat tincidunt.", "checkbox-id": "policy1" }), h("div", { id: "not-me-additional-bottom", class: "not-me-additional-text" }), h("ptc-button", { class: "form-submit", color: "ptc-quaternary", type: "submit", styles: ":host{align-self:flex-end; margin-top: 12px; display:block; text-align:right;}" }, "Submit"))))));
+    return (h(Host, null, h("div", { class: "ptc-container ptc-section-standard flex-adjustments" }, h("div", { class: "form-wrapper ptc-embedded-form" }, h("max-width-container", { "max-width": "277", breakpoint: 480 }, 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."), 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), class: formClass }, h("div", { id: "not-me-link-id" }), h("div", { id: "not-me-additional-top", class: "not-me-additional-text" }), 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", "info-text": "Please include @ in the email address" }), h("ptc-select", { "field-id": "contact-country", label: "Country*", "ptc-data-eloqua-name": "C_Country", "field-name": "country", "default-value": "USA" }, h("ul", { class: "mdc-list" }, h("li", { class: "mdc-list-item", "data-value": "" }, h("span", { class: "mdc-list-item__ripple" })), 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", "info-text": "info text example." }, h("ul", { class: "mdc-list" }, h("li", { class: "mdc-list-item", "data-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", null), 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-textfield", { type: "hidden", "ptc-data-eloqua-name": "test", "input-value": "test" }), h("ptc-textfield", { "field-id": "description", "field-name": "description", "label-text": "Description", type: "textarea", "ptc-max-length": "700" }), h("ptc-form-checkbox", { label: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent nec ultricies risus. Praesent suscipit mauris vel augue facilisis, nec consequat ipsum placerat. Curabitur nisi elit, dignissim tincidunt tincidunt at, vehicula sit amet nisl. Maecenas sodales est vulputate ex feugiat tincidunt.", "checkbox-id": "policy1" }), h("div", { id: "not-me-additional-bottom", class: "not-me-additional-text" }), h("ptc-button", { class: "form-submit", color: "ptc-quaternary", type: "submit", styles: ":host{align-self:flex-end; margin-top: 12px; display:block; text-align:right;}" }, "Submit"))))));
   }
   static get is() { return "embedded-form"; }
   static get originalStyleUrls() {

package/dist/collection/components/organism-bundles/form/footer-form/footer-form.css

@@ -9,8 +9,10 @@ ul,
 li,
 ptc-subnav,
 ptc-tab-list,
-ptc-link, ptc-square-card,
-.hyphenate-text, ptc-footer {
+ptc-link,
+ptc-square-card,
+.hyphenate-text,
+ptc-footer {
   word-break: break-word;
   hyphens: manual;
   -webkit-hyphens: manual;
@@ -29,8 +31,10 @@ ul,
 li,
 ptc-subnav,
 ptc-tab-list,
-ptc-link, ptc-square-card,
-.hyphenate-text, ptc-footer {
+ptc-link,
+ptc-square-card,
+.hyphenate-text,
+ptc-footer {
     hyphens: auto;
     -webkit-hyphenate-limit-before: 3;
     /* For Safari */
@@ -69,14 +73,14 @@ ptc-link, ptc-square-card,
 }
 
 .embedded-form-container {
-  background-color: #142D48;
+  background-color: #142d48;
 }
 
 .form-wrapper {
   width: 433px;
   display: flex;
   border-radius: 3px;
-  background: #FFF;
+  background: #fff;
   box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.16);
   flex-direction: column;
   align-items: center;

package/dist/collection/components/organism-bundles/form/footer-form/footer-form.js

@@ -1,8 +1,8 @@
-import { Host, h } from '@stencil/core';
+import { Host, h } from "@stencil/core";
 export class FooterForm {
   constructor() {
     this.formData = {
-      email: '',
+      email: "",
       policyChecked: false,
     };
   }
@@ -11,8 +11,8 @@ export class FooterForm {
   // private companyEle: HTMLPtcTextfieldElement;
   // private phoneEle: 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"]')
@@ -31,23 +31,23 @@ export class FooterForm {
     // 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, policyChecked } = this.formData;
-    const invalidLength = document.querySelectorAll('.invalid-field').length;
-    return email !== '' && policyChecked && invalidLength === 0;
+    const invalidLength = document.querySelectorAll(".invalid-field").length;
+    return email !== "" && policyChecked && invalidLength === 0;
   }
   render() {
-    return (h(Host, null, h("div", { class: "ptc-container ptc-section-standard u-flex u-flex-justify-center" }, h("div", { class: "form-wrapper" }, h("form", { onSubmit: event => this.handleSubmit(event) }, h("ptc-textfield", { "field-id": "contact-email", "label-text": "Email*", type: "email", "ptc-data-eloqua-name": "C_EmailAddress", "field-name": "email" }), h("ptc-form-checkbox", { label: "I agree to the policy", "checkbox-id": "test" }), h("ptc-button", { class: "form-submit", color: "ptc-quaternary", type: "submit", styles: ":host{align-self:flex-end; margin-top: 48px; display:block;}" }, "Submit"))))));
+    return (h(Host, null, h("div", { class: "ptc-container ptc-section-standard u-flex u-flex-justify-center" }, h("div", { class: "form-wrapper" }, h("form", { onSubmit: (event) => this.handleSubmit(event) }, h("ptc-textfield", { "field-id": "contact-email", "label-text": "Email*", type: "email", "ptc-data-eloqua-name": "C_EmailAddress", "field-name": "email" }), h("ptc-form-checkbox", { label: "I agree to the policy", "checkbox-id": "test" }), h("ptc-button", { class: "form-submit", color: "ptc-quaternary", type: "submit", styles: ":host{align-self:flex-end; margin-top: 48px; display:block;}" }, "Submit"))))));
   }
   static get is() { return "footer-form"; }
   static get encapsulation() { return "shadow"; }

package/dist/collection/components/organism-bundles/form/ptc-form/ptc-form.js

@@ -1,15 +1,15 @@
-import { Host, h } from '@stencil/core';
+import { Host, h } from "@stencil/core";
 export class PtcForm {
   constructor() {
     this.formData = {
-      email: '',
-      firstName: '',
-      lastName: '',
-      company: '',
-      country: '',
-      phone: '',
-      inquiryReason: '',
-      howhearselfreport: '',
+      email: "",
+      firstName: "",
+      lastName: "",
+      company: "",
+      country: "",
+      phone: "",
+      inquiryReason: "",
+      howhearselfreport: "",
       policyChecked: false,
     };
   }
@@ -17,8 +17,8 @@ export class PtcForm {
   // 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"]');
@@ -40,46 +40,106 @@ export class PtcForm {
     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() {
     const multiSelectItems = [
-      { text: 'Item 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tortor metus, auctor id massa nec, tempor consectetur arcu. Ut et orci eget mauris tempor blandit vel et elit. Praesent congue.', 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' },
-      { text: 'Item 4', selected: false, ptcDataEloquaName: 'item_4', ptcDataTargetEloquaName: 'item_target-4' },
-      { text: 'Item 5', selected: false, ptcDataEloquaName: 'item_5', ptcDataTargetEloquaName: 'item_target-5' },
-      { text: 'Item 6', selected: false, ptcDataEloquaName: 'item_6', ptcDataTargetEloquaName: 'item_target-6' },
-      { text: 'Item 7', selected: false, ptcDataEloquaName: 'item_7', ptcDataTargetEloquaName: 'item_target-7' },
-      { text: 'Item 8', selected: false, ptcDataEloquaName: 'item_8', ptcDataTargetEloquaName: 'item_target-8' },
-      { text: 'Item 9', selected: false, ptcDataEloquaName: 'item_9', ptcDataTargetEloquaName: 'item_target-9' },
-      { text: 'Item 10', selected: false, ptcDataEloquaName: 'item_10', ptcDataTargetEloquaName: 'item_target-10' },
-      { text: 'Item 11', selected: false, ptcDataEloquaName: 'item_11', ptcDataTargetEloquaName: 'item_target-11' },
-      { text: 'Item 12', selected: false, ptcDataEloquaName: 'item_12', ptcDataTargetEloquaName: 'item_target-12' },
+      {
+        text: "Item 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tortor metus, auctor id massa nec, tempor consectetur arcu. Ut et orci eget mauris tempor blandit vel et elit. Praesent congue.",
+        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",
+      },
+      {
+        text: "Item 4",
+        selected: false,
+        ptcDataEloquaName: "item_4",
+        ptcDataTargetEloquaName: "item_target-4",
+      },
+      {
+        text: "Item 5",
+        selected: false,
+        ptcDataEloquaName: "item_5",
+        ptcDataTargetEloquaName: "item_target-5",
+      },
+      {
+        text: "Item 6",
+        selected: false,
+        ptcDataEloquaName: "item_6",
+        ptcDataTargetEloquaName: "item_target-6",
+      },
+      {
+        text: "Item 7",
+        selected: false,
+        ptcDataEloquaName: "item_7",
+        ptcDataTargetEloquaName: "item_target-7",
+      },
+      {
+        text: "Item 8",
+        selected: false,
+        ptcDataEloquaName: "item_8",
+        ptcDataTargetEloquaName: "item_target-8",
+      },
+      {
+        text: "Item 9",
+        selected: false,
+        ptcDataEloquaName: "item_9",
+        ptcDataTargetEloquaName: "item_target-9",
+      },
+      {
+        text: "Item 10",
+        selected: false,
+        ptcDataEloquaName: "item_10",
+        ptcDataTargetEloquaName: "item_target-10",
+      },
+      {
+        text: "Item 11",
+        selected: false,
+        ptcDataEloquaName: "item_11",
+        ptcDataTargetEloquaName: "item_target-11",
+      },
+      {
+        text: "Item 12",
+        selected: false,
+        ptcDataEloquaName: "item_12",
+        ptcDataTargetEloquaName: "item_target-12",
+      },
     ];
-    return (h(Host, null, h("div", { class: "ptc-container ptc-section-standard u-flex u-flex-justify-center" }, h("div", { class: "form-wrapper" }, h("max-width-container", { "max-width": "277", breakpoint: 480 }, 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."), 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("ptc-button", { class: "form-submit", color: "ptc-quaternary", type: "submit", styles: ":host{align-self:flex-end; margin-top: 48px; display:block;}" }, "Submit"))))));
+    return (h(Host, null, h("div", { class: "ptc-container ptc-section-standard u-flex u-flex-justify-center" }, h("div", { class: "form-wrapper" }, h("max-width-container", { "max-width": "277", breakpoint: 480 }, 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."), 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("ptc-button", { class: "form-submit", color: "ptc-quaternary", type: "submit", styles: ":host{align-self:flex-end; margin-top: 48px; display:block;}" }, "Submit"))))));
   }
   static get is() { return "ptc-form"; }
   static get originalStyleUrls() {

package/dist/collection/components/organism-bundles/homepage-jumbotron/homepage-jumbotron.css

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

package/dist/collection/components/organism-bundles/homepage-jumbotron/homepage-jumbotron.js

@@ -1,16 +1,16 @@
-import { h, Host } from '@stencil/core';
-import { equalizeHeights } from '../../../utils/utils';
-import Swiper from 'swiper';
-import 'swiper/swiper-bundle.css';
+import { h, Host, } from "@stencil/core";
+import { equalizeHeights } from "../../../utils/utils";
+import Swiper from "swiper";
+import "swiper/swiper-bundle.css";
 export class HomepageJumbotron {
   constructor() {
     this.tileCount = 0;
-    this.bgVideoSrc = '';
-    this.bgSrc = '';
-    this.jumbotron = 'dark';
+    this.bgVideoSrc = "";
+    this.bgSrc = "";
+    this.jumbotron = "dark";
     this.isIframe = false;
-    this.playBtnText = 'play';
-    this.pauseBtnText = 'pause';
+    this.playBtnText = "play";
+    this.pauseBtnText = "pause";
     this.activeTab = 0;
     this.activeBgVideoSrc = undefined;
     this.activeMainTitle = undefined;
@@ -18,10 +18,10 @@ export class HomepageJumbotron {
     this.activeButton = undefined;
     this.tileElements = [];
     this.isTransitioning = undefined;
-    this.mediaTag = 'VIDEO';
+    this.mediaTag = "VIDEO";
   }
   handleWindowResize() {
-    equalizeHeights('ptc-info-tile', this.el);
+    equalizeHeights("ptc-info-tile", this.el);
   }
   componentWillLoad() {
     this.updateDefaultContent();
@@ -30,23 +30,23 @@ export class HomepageJumbotron {
     this.initSlider();
   }
   componentDidRender() {
-    equalizeHeights('ptc-info-tile', this.el);
+    equalizeHeights("ptc-info-tile", this.el);
   }
   initSlider() {
     if (this.swiperContainerRef) {
       this.mySwiper = new Swiper(this.swiperContainerRef, {
-        slidesPerView: 'auto',
+        slidesPerView: "auto",
         initialSlide: 0,
         spaceBetween: 0,
         loop: false,
         pagination: {
-          el: '.swiper-pagination',
+          el: ".swiper-pagination",
           clickable: true,
         },
         breakpoints: {
           768: {
             initialSlide: 0,
-            slidesPerView: 'auto',
+            slidesPerView: "auto",
             spaceBetween: 0,
           },
           1200: {
@@ -81,10 +81,18 @@ export class HomepageJumbotron {
     const activeMainTitleElement = this.el.querySelector(`[slot="main-title-${this.activeTab}"]`);
     const activeSubTitleElement = this.el.querySelector(`[slot="sub-title-${this.activeTab}"]`);
     const activeButtonElement = this.el.querySelector(`[slot="j-cta-${this.activeTab}"]`);
-    this.activeBgVideoSrc = activeBgVideoElement ? activeBgVideoElement.getAttribute('src') : '';
-    this.activeMainTitle = activeMainTitleElement ? activeMainTitleElement.innerHTML : '';
-    this.activeSubTitle = activeSubTitleElement ? activeSubTitleElement.innerHTML : '';
-    this.activeButton = activeButtonElement ? activeButtonElement.innerHTML : '';
+    this.activeBgVideoSrc = activeBgVideoElement
+      ? activeBgVideoElement.getAttribute("src")
+      : "";
+    this.activeMainTitle = activeMainTitleElement
+      ? activeMainTitleElement.innerHTML
+      : "";
+    this.activeSubTitle = activeSubTitleElement
+      ? activeSubTitleElement.innerHTML
+      : "";
+    this.activeButton = activeButtonElement
+      ? activeButtonElement.innerHTML
+      : "";
     this.mediaTag = activeBgVideoElement.tagName;
   }
   updateTileElements() {
@@ -99,9 +107,12 @@ export class HomepageJumbotron {
     }, 250);
   }
   render() {
-    return (h(Host, null, h("ptc-jumbotron", Object.assign({ styles: ".parent{min-height:600px; max-height:850px;}", "jumbotron-type": this.mediaTag === 'VIDEO' ? 'dark-video' : 'dark' }, (!!this.activeBgVideoSrc && { bgVideoSrc: this.activeBgVideoSrc }), (!this.bgVideoSrc && !!this.bgSrc && { bgSrc: this.bgSrc }), { "is-iframe": this.isIframe, "is-homepage": "true", "is-transitioning": this.isTransitioning, "sub-title": "" //sub title is coming from slot here
+    return (h(Host, null, h("ptc-jumbotron", Object.assign({ styles: ".parent{min-height:600px; max-height:850px;}", "jumbotron-type": this.mediaTag === "VIDEO" ? "dark-video" : "dark" }, (!!this.activeBgVideoSrc && {
+      bgVideoSrc: this.activeBgVideoSrc,
+    }), (!this.bgVideoSrc &&
+      !!this.bgSrc && { bgSrc: this.bgSrc }), { "is-iframe": this.isIframe, "is-homepage": "true", "is-transitioning": this.isTransitioning, "sub-title": "" //sub title is coming from slot here
       ,
-      "play-button-title": this.playBtnText, "pause-button-title": this.pauseBtnText, "button-location": "allbp-bottom-right", "button-tab-index": "true" }), h("slot", { name: "breadcrumb" }), h("h1", { slot: "main-title", class: "hp-h1" }, this.activeMainTitle), h("p", { slot: "hp-sub-title", class: "hp-sub-title" }, this.activeSubTitle), h("div", { slot: "j-cta", innerHTML: this.activeButton })), h("div", { class: "swiper-container", ref: el => (this.swiperContainerRef = el) }, h("div", { class: "swiper-wrapper" }, this.tileElements.map((tile, index) => (h("div", { class: "swiper-slide", key: index, innerHTML: tile.outerHTML })))), h("div", { class: "swiper-pagination" }))));
+      "play-button-title": this.playBtnText, "pause-button-title": this.pauseBtnText, "button-location": "allbp-bottom-right", "button-tab-index": "true" }), h("slot", { name: "breadcrumb" }), h("h1", { slot: "main-title", class: "hp-h1" }, this.activeMainTitle), h("p", { slot: "hp-sub-title", class: "hp-sub-title" }, this.activeSubTitle), h("div", { slot: "j-cta", innerHTML: this.activeButton })), h("div", { class: "swiper-container", ref: (el) => (this.swiperContainerRef = el) }, h("div", { class: "swiper-wrapper" }, this.tileElements.map((tile, index) => (h("div", { class: "swiper-slide", key: index, innerHTML: tile.outerHTML })))), h("div", { class: "swiper-pagination" }))));
   }
   static get is() { return "homepage-jumbotron"; }
   static get encapsulation() { return "scoped"; }
@@ -133,7 +144,7 @@ export class HomepageJumbotron {
         },
         "attribute": "bg-video-src",
         "reflect": false,
-        "defaultValue": "''"
+        "defaultValue": "\"\""
       },
       "bgSrc": {
         "type": "string",
@@ -151,7 +162,7 @@ export class HomepageJumbotron {
         },
         "attribute": "bg-src",
         "reflect": false,
-        "defaultValue": "''"
+        "defaultValue": "\"\""
       },
       "jumbotron": {
         "type": "string",
@@ -169,7 +180,7 @@ export class HomepageJumbotron {
         },
         "attribute": "jumbotron",
         "reflect": false,
-        "defaultValue": "'dark'"
+        "defaultValue": "\"dark\""
       },
       "isIframe": {
         "type": "boolean",
@@ -205,7 +216,7 @@ export class HomepageJumbotron {
         },
         "attribute": "play-btn-text",
         "reflect": false,
-        "defaultValue": "'play'"
+        "defaultValue": "\"play\""
       },
       "pauseBtnText": {
         "type": "string",
@@ -223,7 +234,7 @@ export class HomepageJumbotron {
         },
         "attribute": "pause-btn-text",
         "reflect": false,
-        "defaultValue": "'pause'"
+        "defaultValue": "\"pause\""
       }
     };
   }

package/dist/collection/components/organism-bundles/homepage-toggled-content/homepage-toggled-content.css

@@ -9,8 +9,10 @@ ul,
 li,
 ptc-subnav,
 ptc-tab-list,
-ptc-link, ptc-square-card,
-.hyphenate-text, ptc-footer {
+ptc-link,
+ptc-square-card,
+.hyphenate-text,
+ptc-footer {
   word-break: break-word;
   hyphens: manual;
   -webkit-hyphens: manual;
@@ -29,8 +31,10 @@ ul,
 li,
 ptc-subnav,
 ptc-tab-list,
-ptc-link, ptc-square-card,
-.hyphenate-text, ptc-footer {
+ptc-link,
+ptc-square-card,
+.hyphenate-text,
+ptc-footer {
     hyphens: auto;
     -webkit-hyphenate-limit-before: 3;
     /* For Safari */
@@ -156,19 +160,19 @@ ptc-link, ptc-square-card,
   border-radius: var(--ptc-border-radius-standard) var(--ptc-border-radius-standard) 0px 0px;
 }
 .dropdown-button.hp-blue {
-  background: linear-gradient(180deg, #197BC0 0%, #4795CD 100%);
+  background: linear-gradient(180deg, #197bc0 0%, #4795cd 100%);
 }
 .dropdown-button.hp-green {
-  background: linear-gradient(180deg, #00890B 0%, #33A13C 100%);
+  background: linear-gradient(180deg, #00890b 0%, #33a13c 100%);
 }
 .dropdown-button.hp-red {
-  background: linear-gradient(180deg, #D33E3E 0%, #DC6565 100%);
+  background: linear-gradient(180deg, #d33e3e 0%, #dc6565 100%);
 }
 .dropdown-button.hp-gray {
   background: linear-gradient(180deg, #617480 0%, #819099 100%);
 }
 .dropdown-button.hp-orange {
-  background: linear-gradient(180deg, #C37729 0%, #CF9254 100%);
+  background: linear-gradient(180deg, #c37729 0%, #cf9254 100%);
 }
 
 .dropdown-button .arrow {