@ptcwebops/ptcw-design 3.2.5 → 3.2.6

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

@@ -35,23 +35,31 @@ export class PtcTextfield {
   inputBlurHandler() {
     // console.log(event.target)
     // this.getPhoneValidation();
-    if (this.customValidation) {
-      let message = this.customValidation(this.customInput);
-      this.customInput.setCustomValidity(message);
-      this.customInput.checkValidity();
-      this.infoText = message;
-      this.setErrorBackground();
-    }
-    else {
-      this.setErrorBackground();
-      setTimeout(() => {
-        this.getPhoneValidation();
-      }, 100);
-    }
+    this.validateTextField();
   }
   async syncCountry(countryCode) {
     this.iti.setCountry(countryCode);
   }
+  async validateTextField() {
+    if (this.customInput) {
+      if (this.customValidation) {
+        let message = this.customValidation(this.customInput);
+        this.customInput.setCustomValidity(message);
+        this.customInput.checkValidity();
+        this.infoText = message;
+        this.setErrorBackground();
+        this.setHelperText();
+      }
+      else {
+        this.setErrorBackground();
+        this.setHelperText();
+        setTimeout(() => {
+          this.getPhoneValidation();
+        }, 100);
+      }
+      this.mdcTextfieldComponent.valid = this.customInput.checkValidity();
+    }
+  }
   componentWillLoad() {
     this.language = getLanguageFromURL();
   }
@@ -82,27 +90,38 @@ export class PtcTextfield {
     }
   }
   getValidationMessage(type) {
-    // console.log("lang type: " + type);
+    // console.log("lang: " + this.language);
+    // console.log("type: " + type);
     return ValidationMessages[this.language][type];
   }
   getPhoneValidation() {
     if (this.fieldId === 'contact-phone' && this.fieldName === 'phone') {
-      if (this.iti.isValidNumber()) {
+      if (!this.required && this.inputValue === '') {
         if (this.mdcTextfield.classList.contains('mdc-text-field--invalid')) {
           this.mdcTextfield.classList.remove('mdc-text-field--invalid');
         }
         if (this.el.classList.contains('invalid-field')) {
           this.el.classList.remove('invalid-field');
         }
-        this.inputValue = this.iti.getNumber();
-        // console.log('sending phone number: ' + this.inputValue);
       }
-      else if (!this.iti.isValidNumber()) {
-        if (!this.mdcTextfield.classList.contains('mdc-text-field--invalid')) {
-          this.mdcTextfield.classList.add('mdc-text-field--invalid');
+      else {
+        if (this.iti.isValidNumber()) {
+          if (this.mdcTextfield.classList.contains('mdc-text-field--invalid')) {
+            this.mdcTextfield.classList.remove('mdc-text-field--invalid');
+          }
+          if (this.el.classList.contains('invalid-field')) {
+            this.el.classList.remove('invalid-field');
+          }
+          this.inputValue = this.iti.getNumber();
+          // console.log('sending phone number: ' + this.inputValue);
         }
-        if (!this.el.classList.contains('invalid-field')) {
-          this.el.classList.add('invalid-field');
+        else if (!this.iti.isValidNumber()) {
+          if (!this.mdcTextfield.classList.contains('mdc-text-field--invalid')) {
+            this.mdcTextfield.classList.add('mdc-text-field--invalid');
+          }
+          if (!this.el.classList.contains('invalid-field')) {
+            this.el.classList.add('invalid-field');
+          }
         }
       }
     }
@@ -168,7 +187,7 @@ export class PtcTextfield {
     }
     else if (this.fieldId === 'contact-phone') {
       if (this.iti) {
-        if (this.inputValue === '') {
+        if (this.inputValue === '' && this.required) {
           this.helpertext = this.getValidationMessage('tel');
         }
         else if (!this.iti.isValidNumber()) {
@@ -461,6 +480,22 @@ export class PtcTextfield {
           "text": "",
           "tags": []
         }
+      },
+      "validateTextField": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
       }
     };
   }

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

@@ -1,4 +1,5 @@
 import { Host, h } from '@stencil/core';
+import { getSeoTagType } from '../../utils/utils';
 export class PtcTitle {
   constructor() {
     this.isPlmHub = false;
@@ -18,27 +19,8 @@ export class PtcTitle {
   render() {
     const classMap = this.getCssClassMap();
     const cutOff = this.getLineCuttoff();
-    let TagType;
-    switch (this.type) {
-      case 'h1':
-        TagType = 'h1';
-        break;
-      case 'h3':
-        TagType = 'h3';
-        break;
-      case 'h4':
-        TagType = 'h4';
-        break;
-      case 'h5':
-        TagType = 'h5';
-        break;
-      case 'h6':
-        TagType = 'h6';
-        break;
-      default:
-        TagType = 'h2';
-    }
-    return (h(Host, null, this.styles && h("style", null, this.styles), h("div", { class: classMap }, h(TagType, { style: cutOff }, h("slot", null)))));
+    const [TagType, firstChild] = getSeoTagType(this.el);
+    return (h(Host, null, this.styles && h("style", null, this.styles), h("div", { class: classMap }, h(TagType, { innerHTML: firstChild.innerHTML, style: cutOff }, h("slot", null)))));
   }
   getCssClassMap() {
     return {
@@ -307,4 +289,5 @@ export class PtcTitle {
       }
     };
   }
+  static get elementRef() { return "el"; }
 }

package/dist/collection/utils/utils.js

@@ -89,6 +89,17 @@ export function getFileExtension(filePath) {
 }
 export function getLanguageFromURL() {
   const urlPath = window.location.pathname;
-  const languageCode = urlPath.split('/')[1];
-  return languageCode || 'en';
+  const parts = urlPath.split('/');
+  const supportedLanguages = ['en', 'cn', 'tw', 'fr', 'de', 'it', 'ja', 'ko', 'es', 'pt'];
+  const languageCode = parts[1];
+  if (supportedLanguages.includes(languageCode)) {
+    return languageCode;
+  }
+  return 'en';
+}
+export function getSeoTagType(element) {
+  let firstChild = element.children[0];
+  let TagType = firstChild.tagName.toLowerCase();
+  element.removeChild(firstChild);
+  return [TagType, firstChild];
 }

package/dist/custom-elements/index.js

@@ -481,7 +481,7 @@ const EmbeddedForm$1 = class extends HTMLElement$1 {
   }
   render() {
     const formClass = this.isSubmitted ? "ptc-form-roll-up" : "";
-    return (h$1(Host, null, h$1("div", { class: "ptc-container ptc-section-standard flex-adjustments" }, h$1("div", { class: "form-wrapper ptc-embedded-form" }, h$1("max-width-container", { "max-width": "277", breakpoint: 480 }, h$1("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$1("ptc-spacer", { breakpoint: "x-small", size: "medium" }), h$1("ptc-spacer", { breakpoint: "x-small", size: "medium" }), h$1("ptc-spacer", { breakpoint: "small", size: "small" }), h$1("ptc-spacer", { breakpoint: "small", size: "small" })), h$1("form", { onSubmit: event => this.handleSubmit(event), class: formClass }, h$1("div", { id: "not-me-link-id" }), h$1("div", { id: "not-me-additional-top", class: "not-me-additional-text" }), h$1("ptc-textfield", { "field-id": "contact-firstname", "label-text": "First Name*", type: "text", "ptc-data-eloqua-name": "C_FirstName", "field-name": "firstname" }), h$1("ptc-textfield", { "field-id": "contact-lastname", "label-text": "Last Name*", type: "text", "ptc-data-eloqua-name": "C_LastName", "field-name": "lastname" }), h$1("ptc-textfield", { "field-id": "company", "label-text": "Company*", type: "text", "ptc-data-eloqua-name": "C_Company", "field-name": "company" }), h$1("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$1("ptc-select", { "field-id": "contact-country", label: "Country*", "ptc-data-eloqua-name": "C_Country", "field-name": "country", "default-value": "USA" }, h$1("ul", { class: "mdc-list" }, h$1("li", { class: "mdc-list-item", "data-value": "" }, h$1("span", { class: "mdc-list-item__ripple" })), h$1("li", { class: "mdc-list-item", "data-value": "USA" }, h$1("span", { class: "mdc-list-item__ripple" }), h$1("span", { class: "mdc-list-item__text" }, "USA")), h$1("li", { class: "mdc-list-item", "data-value": "Canada" }, h$1("span", { class: "mdc-list-item__ripple" }), h$1("span", { class: "mdc-list-item__text" }, "Canada")), h$1("li", { class: "mdc-list-item", "data-value": "China" }, h$1("span", { class: "mdc-list-item__ripple" }), h$1("span", { class: "mdc-list-item__text" }, "China")))), h$1("ptc-textfield", { "field-id": "contact-phone", "label-text": "Phone*", type: "tel", "ptc-data-eloqua-name": "C_BusPhone", "field-name": "phone" }), h$1("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$1("ul", { class: "mdc-list" }, h$1("li", { class: "mdc-list-item", "data-value": "" }, h$1("span", { class: "mdc-list-item__ripple" })), h$1("li", { class: "mdc-list-item", "data-value": "Augmented Reality (AR)" }, h$1("span", { class: "mdc-list-item__ripple" }), h$1("span", { class: "mdc-list-item__text" }, "Augmented Reality (AR)")), h$1("li", { class: "mdc-list-item", "data-value": "CAD" }, h$1("span", { class: "mdc-list-item__ripple" }), h$1("span", { class: "mdc-list-item__text" }, "Computer Aided Design")), h$1("li", { class: "mdc-list-item", "data-value": "Retail(FlexPLM)" }, h$1("span", { class: "mdc-list-item__ripple" }), h$1("span", { class: "mdc-list-item__text" }, "Fashion and Retail Product Lifecycle Management")))), h$1("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$1("ptc-textfield", { type: "hidden", "ptc-data-eloqua-name": "test", "input-value": "test" }), h$1("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$1("div", { id: "not-me-additional-bottom", class: "not-me-additional-text" }), h$1("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$1(Host, null, h$1("div", { class: "ptc-container ptc-section-standard flex-adjustments" }, h$1("div", { class: "form-wrapper ptc-embedded-form" }, h$1("max-width-container", { "max-width": "277", breakpoint: 480 }, h$1("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" }, h$1("h2", null, "Please fill out the form and a PTC sales representative will be in touch.")), h$1("ptc-spacer", { breakpoint: "x-small", size: "medium" }), h$1("ptc-spacer", { breakpoint: "x-small", size: "medium" }), h$1("ptc-spacer", { breakpoint: "small", size: "small" }), h$1("ptc-spacer", { breakpoint: "small", size: "small" })), h$1("form", { onSubmit: event => this.handleSubmit(event), class: formClass }, h$1("div", { id: "not-me-link-id" }), h$1("div", { id: "not-me-additional-top", class: "not-me-additional-text" }), h$1("ptc-textfield", { "field-id": "contact-firstname", "label-text": "First Name*", type: "text", "ptc-data-eloqua-name": "C_FirstName", "field-name": "firstname" }), h$1("ptc-textfield", { "field-id": "contact-lastname", "label-text": "Last Name*", type: "text", "ptc-data-eloqua-name": "C_LastName", "field-name": "lastname" }), h$1("ptc-textfield", { "field-id": "company", "label-text": "Company*", type: "text", "ptc-data-eloqua-name": "C_Company", "field-name": "company" }), h$1("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$1("ptc-select", { "field-id": "contact-country", label: "Country*", "ptc-data-eloqua-name": "C_Country", "field-name": "country", "default-value": "USA" }, h$1("ul", { class: "mdc-list" }, h$1("li", { class: "mdc-list-item", "data-value": "" }, h$1("span", { class: "mdc-list-item__ripple" })), h$1("li", { class: "mdc-list-item", "data-value": "USA" }, h$1("span", { class: "mdc-list-item__ripple" }), h$1("span", { class: "mdc-list-item__text" }, "USA")), h$1("li", { class: "mdc-list-item", "data-value": "Canada" }, h$1("span", { class: "mdc-list-item__ripple" }), h$1("span", { class: "mdc-list-item__text" }, "Canada")), h$1("li", { class: "mdc-list-item", "data-value": "China" }, h$1("span", { class: "mdc-list-item__ripple" }), h$1("span", { class: "mdc-list-item__text" }, "China")))), h$1("ptc-textfield", { "field-id": "contact-phone", "label-text": "Phone*", type: "tel", "ptc-data-eloqua-name": "C_BusPhone", "field-name": "phone" }), h$1("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$1("ul", { class: "mdc-list" }, h$1("li", { class: "mdc-list-item", "data-value": "" }, h$1("span", { class: "mdc-list-item__ripple" })), h$1("li", { class: "mdc-list-item", "data-value": "Augmented Reality (AR)" }, h$1("span", { class: "mdc-list-item__ripple" }), h$1("span", { class: "mdc-list-item__text" }, "Augmented Reality (AR)")), h$1("li", { class: "mdc-list-item", "data-value": "CAD" }, h$1("span", { class: "mdc-list-item__ripple" }), h$1("span", { class: "mdc-list-item__text" }, "Computer Aided Design")), h$1("li", { class: "mdc-list-item", "data-value": "Retail(FlexPLM)" }, h$1("span", { class: "mdc-list-item__ripple" }), h$1("span", { class: "mdc-list-item__text" }, "Fashion and Retail Product Lifecycle Management")))), h$1("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$1("ptc-textfield", { type: "hidden", "ptc-data-eloqua-name": "test", "input-value": "test" }), h$1("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$1("div", { id: "not-me-additional-bottom", class: "not-me-additional-text" }), h$1("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"))))));
   }
   get el() { return this; }
   static get style() { return embeddedFormCss; }
@@ -947,8 +947,19 @@ function getFileExtension(filePath) {
 }
 function getLanguageFromURL() {
   const urlPath = window.location.pathname;
-  const languageCode = urlPath.split('/')[1];
-  return languageCode || 'en';
+  const parts = urlPath.split('/');
+  const supportedLanguages = ['en', 'cn', 'tw', 'fr', 'de', 'it', 'ja', 'ko', 'es', 'pt'];
+  const languageCode = parts[1];
+  if (supportedLanguages.includes(languageCode)) {
+    return languageCode;
+  }
+  return 'en';
+}
+function getSeoTagType(element) {
+  let firstChild = element.children[0];
+  let TagType = firstChild.tagName.toLowerCase();
+  element.removeChild(firstChild);
+  return [TagType, firstChild];
 }
 
 const myComponentCss = ":host{display:block}";
@@ -1036,6 +1047,7 @@ const PtcAccordionItem$1 = class extends HTMLElement$1 {
     this.autoHeight = false;
     this.active = false;
     this.theme = "standard";
+    this.styles = undefined;
     this.hasHeadingSlot = true;
     this.hasArrowSlot = true;
   }
@@ -1102,7 +1114,7 @@ const PtcAccordionItem$1 = class extends HTMLElement$1 {
   }
   render() {
     const { active, autoHeight, theme, headingTag: HeadingTag } = this;
-    return (h$1(Host, { class: { active, autoHeight } }, h$1("button", { class: { "heading": true, [theme]: true }, role: "button", onClick: () => this.toggle() }, h$1("span", { class: "arrow" }, this.hasArrowSlot ? (h$1("slot", { name: "arrow" })) : (h$1("svg", { focusable: "false", viewBox: "0 0 24 24", "aria-hidden": "true" }, h$1("path", { d: "M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z" })))), this.hasHeadingSlot ? (h$1("slot", { name: "heading" })) : (h$1(HeadingTag, { class: "heading-text" }, this.heading))), h$1("div", { class: "body-container", ref: el => (this.bodyEl = el) }, h$1("div", { class: "body" }, h$1("slot", null)))));
+    return (h$1(Host, { class: { active, autoHeight } }, this.styles && h$1("style", null, this.styles), h$1("button", { class: { "heading": true, [theme]: true }, role: "button", onClick: () => this.toggle() }, h$1("span", { class: "arrow" }, this.hasArrowSlot ? (h$1("slot", { name: "arrow" })) : (h$1("svg", { focusable: "false", viewBox: "0 0 24 24", "aria-hidden": "true" }, h$1("path", { d: "M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z" })))), this.hasHeadingSlot ? (h$1("slot", { name: "heading" })) : (h$1(HeadingTag, { class: "heading-text" }, this.heading))), h$1("div", { class: "body-container", ref: el => (this.bodyEl = el) }, h$1("div", { class: "body" }, h$1("slot", null)))));
   }
   get el() { return this; }
   static get style() { return ptcAccordionItemCss; }
@@ -13366,7 +13378,8 @@ const PtcPara$1 = class extends HTMLElement$1 {
     const classMap = this.getCssClassMap();
     const colorClass = this.addWhiteClass();
     const cutOff = this.getLineCuttoff();
-    return (h$1(Host, { class: `${colorClass} ${this.paraZIndex}` }, this.styles && h$1("style", null, this.styles), h$1("p", { class: classMap, part: "part-para", style: cutOff }, h$1("slot", null))));
+    const [TagType, firstChild] = getSeoTagType(this.el);
+    return (h$1(Host, { class: `${colorClass} ${this.paraZIndex}` }, this.styles && h$1("style", null, this.styles), h$1(TagType, { class: classMap, innerHTML: firstChild.innerHTML, part: "part-para", style: cutOff }, h$1("slot", null))));
   }
   getCssClassMap() {
     return {
@@ -24902,23 +24915,31 @@ const PtcTextfield$1 = class extends HTMLElement$1 {
   inputBlurHandler() {
     // console.log(event.target)
     // this.getPhoneValidation();
-    if (this.customValidation) {
-      let message = this.customValidation(this.customInput);
-      this.customInput.setCustomValidity(message);
-      this.customInput.checkValidity();
-      this.infoText = message;
-      this.setErrorBackground();
-    }
-    else {
-      this.setErrorBackground();
-      setTimeout(() => {
-        this.getPhoneValidation();
-      }, 100);
-    }
+    this.validateTextField();
   }
   async syncCountry(countryCode) {
     this.iti.setCountry(countryCode);
   }
+  async validateTextField() {
+    if (this.customInput) {
+      if (this.customValidation) {
+        let message = this.customValidation(this.customInput);
+        this.customInput.setCustomValidity(message);
+        this.customInput.checkValidity();
+        this.infoText = message;
+        this.setErrorBackground();
+        this.setHelperText();
+      }
+      else {
+        this.setErrorBackground();
+        this.setHelperText();
+        setTimeout(() => {
+          this.getPhoneValidation();
+        }, 100);
+      }
+      this.mdcTextfieldComponent.valid = this.customInput.checkValidity();
+    }
+  }
   componentWillLoad() {
     this.language = getLanguageFromURL();
   }
@@ -24949,27 +24970,38 @@ const PtcTextfield$1 = class extends HTMLElement$1 {
     }
   }
   getValidationMessage(type) {
-    // console.log("lang type: " + type);
+    // console.log("lang: " + this.language);
+    // console.log("type: " + type);
     return ValidationMessages[this.language][type];
   }
   getPhoneValidation() {
     if (this.fieldId === 'contact-phone' && this.fieldName === 'phone') {
-      if (this.iti.isValidNumber()) {
+      if (!this.required && this.inputValue === '') {
         if (this.mdcTextfield.classList.contains('mdc-text-field--invalid')) {
           this.mdcTextfield.classList.remove('mdc-text-field--invalid');
         }
         if (this.el.classList.contains('invalid-field')) {
           this.el.classList.remove('invalid-field');
         }
-        this.inputValue = this.iti.getNumber();
-        // console.log('sending phone number: ' + this.inputValue);
       }
-      else if (!this.iti.isValidNumber()) {
-        if (!this.mdcTextfield.classList.contains('mdc-text-field--invalid')) {
-          this.mdcTextfield.classList.add('mdc-text-field--invalid');
+      else {
+        if (this.iti.isValidNumber()) {
+          if (this.mdcTextfield.classList.contains('mdc-text-field--invalid')) {
+            this.mdcTextfield.classList.remove('mdc-text-field--invalid');
+          }
+          if (this.el.classList.contains('invalid-field')) {
+            this.el.classList.remove('invalid-field');
+          }
+          this.inputValue = this.iti.getNumber();
+          // console.log('sending phone number: ' + this.inputValue);
         }
-        if (!this.el.classList.contains('invalid-field')) {
-          this.el.classList.add('invalid-field');
+        else if (!this.iti.isValidNumber()) {
+          if (!this.mdcTextfield.classList.contains('mdc-text-field--invalid')) {
+            this.mdcTextfield.classList.add('mdc-text-field--invalid');
+          }
+          if (!this.el.classList.contains('invalid-field')) {
+            this.el.classList.add('invalid-field');
+          }
         }
       }
     }
@@ -25035,7 +25067,7 @@ const PtcTextfield$1 = class extends HTMLElement$1 {
     }
     else if (this.fieldId === 'contact-phone') {
       if (this.iti) {
-        if (this.inputValue === '') {
+        if (this.inputValue === '' && this.required) {
           this.helpertext = this.getValidationMessage('tel');
         }
         else if (!this.iti.isValidNumber()) {
@@ -25321,27 +25353,8 @@ const PtcTitle$1 = class extends HTMLElement$1 {
   render() {
     const classMap = this.getCssClassMap();
     const cutOff = this.getLineCuttoff();
-    let TagType;
-    switch (this.type) {
-      case 'h1':
-        TagType = 'h1';
-        break;
-      case 'h3':
-        TagType = 'h3';
-        break;
-      case 'h4':
-        TagType = 'h4';
-        break;
-      case 'h5':
-        TagType = 'h5';
-        break;
-      case 'h6':
-        TagType = 'h6';
-        break;
-      default:
-        TagType = 'h2';
-    }
-    return (h$1(Host, null, this.styles && h$1("style", null, this.styles), h$1("div", { class: classMap }, h$1(TagType, { style: cutOff }, h$1("slot", null)))));
+    const [TagType, firstChild] = getSeoTagType(this.el);
+    return (h$1(Host, null, this.styles && h$1("style", null, this.styles), h$1("div", { class: classMap }, h$1(TagType, { innerHTML: firstChild.innerHTML, style: cutOff }, h$1("slot", null)))));
   }
   getCssClassMap() {
     return {
@@ -25367,6 +25380,7 @@ const PtcTitle$1 = class extends HTMLElement$1 {
     }
     return result;
   }
+  get el() { return this; }
   static get style() { return ptcTitleCss; }
 };
 
@@ -26360,7 +26374,7 @@ const ListItem = /*@__PURE__*/proxyCustomElement(ListItem$2, [1,"list-item",{"li
 const MaxWidthContainer = /*@__PURE__*/proxyCustomElement(MaxWidthContainer$1, [1,"max-width-container",{"maxWidthP":[2,"max-width-p"],"maxWidth":[2,"max-width"],"breakpoint":[2],"contentAlign":[1,"content-align"],"styles":[1]}]);
 const MyComponent = /*@__PURE__*/proxyCustomElement(MyComponent$1, [1,"my-component",{"first":[1],"middle":[1],"last":[1]}]);
 const PtcAccordion = /*@__PURE__*/proxyCustomElement(PtcAccordion$1, [1,"ptc-accordion",{"multiple":[4],"theme":[1]},[[0,"opened","openHandler"]]]);
-const PtcAccordionItem = /*@__PURE__*/proxyCustomElement(PtcAccordionItem$1, [1,"ptc-accordion-item",{"heading":[1],"headingTag":[1,"heading-tag"],"autoHeight":[4,"auto-height"],"active":[1540],"theme":[1537],"hasHeadingSlot":[32],"hasArrowSlot":[32]}]);
+const PtcAccordionItem = /*@__PURE__*/proxyCustomElement(PtcAccordionItem$1, [1,"ptc-accordion-item",{"heading":[1],"headingTag":[1,"heading-tag"],"autoHeight":[4,"auto-height"],"active":[1540],"theme":[1537],"styles":[1],"hasHeadingSlot":[32],"hasArrowSlot":[32]}]);
 const PtcAnnouncement = /*@__PURE__*/proxyCustomElement(PtcAnnouncement$1, [1,"ptc-announcement",{"barTitle":[1025,"bar-title"],"description":[1025],"linkText":[513,"link-text"],"linkTitle":[513,"link-title"],"visible":[1540],"linkUrl":[1537,"link-url"],"insideContainer":[4,"inside-container"],"target":[1025],"customMaxLines":[2,"custom-max-lines"],"moreText":[1,"more-text"],"windowSize":[32]},[[9,"resize","handleResize"]]]);
 const PtcBackToTop = /*@__PURE__*/proxyCustomElement(PtcBackToTop$1, [1,"ptc-back-to-top",{"showButton":[32]},[[0,"click","handleClick"]]]);
 const PtcBackgroundVideo = /*@__PURE__*/proxyCustomElement(PtcBackgroundVideo$1, [1,"ptc-background-video",{"videoSrc":[1,"video-src"],"posterSrc":[1,"poster-src"],"overlay":[4],"playButtonTitle":[1,"play-button-title"],"pauseButtonTitle":[1,"pause-button-title"],"type":[1],"isIframe":[4,"is-iframe"],"paused":[32]}]);

package/dist/esm/embedded-form_9.entry.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, h, H as Host, g as getElement, c as createEvent } from './index-62587d0b.js';
-import { g as getLanguageFromURL } from './utils-ff66a908.js';
+import { g as getLanguageFromURL, a as getSeoTagType } from './utils-063d1a12.js';
 
 const embeddedFormCss = ":host{display:block}.flex-adjustments{display:flex;justify-content:center}@media only screen and (min-width: 768px){.flex-adjustments{justify-content:flex-end}}.embedded-form-container{background-color:#142D48}.ptc-embedded-form.form-wrapper{max-width:361px;display:flex;border-radius:3px;background:#FFF;box-shadow:0px 2px 6px 0px rgba(0, 0, 0, 0.16);flex-direction:column;align-items:center;padding:24px 0px;justify-content:center}@media only screen and (min-width: 480px){.ptc-embedded-form.form-wrapper{width:361px}}@keyframes rollUp{from{height:auto;opacity:1}to{height:0;opacity:0}}.ptc-form-roll-up{animation:rollUp 1s forwards;}";
 
@@ -102,7 +102,7 @@ const EmbeddedForm = class {
   }
   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-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-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" }, h("h2", null, "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-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-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"))))));
   }
   get el() { return getElement(this); }
 };
@@ -11699,23 +11699,31 @@ const PtcTextfield = class {
   inputBlurHandler() {
     // console.log(event.target)
     // this.getPhoneValidation();
-    if (this.customValidation) {
-      let message = this.customValidation(this.customInput);
-      this.customInput.setCustomValidity(message);
-      this.customInput.checkValidity();
-      this.infoText = message;
-      this.setErrorBackground();
-    }
-    else {
-      this.setErrorBackground();
-      setTimeout(() => {
-        this.getPhoneValidation();
-      }, 100);
-    }
+    this.validateTextField();
   }
   async syncCountry(countryCode) {
     this.iti.setCountry(countryCode);
   }
+  async validateTextField() {
+    if (this.customInput) {
+      if (this.customValidation) {
+        let message = this.customValidation(this.customInput);
+        this.customInput.setCustomValidity(message);
+        this.customInput.checkValidity();
+        this.infoText = message;
+        this.setErrorBackground();
+        this.setHelperText();
+      }
+      else {
+        this.setErrorBackground();
+        this.setHelperText();
+        setTimeout(() => {
+          this.getPhoneValidation();
+        }, 100);
+      }
+      this.mdcTextfieldComponent.valid = this.customInput.checkValidity();
+    }
+  }
   componentWillLoad() {
     this.language = getLanguageFromURL();
   }
@@ -11746,27 +11754,38 @@ const PtcTextfield = class {
     }
   }
   getValidationMessage(type) {
-    // console.log("lang type: " + type);
+    // console.log("lang: " + this.language);
+    // console.log("type: " + type);
     return ValidationMessages[this.language][type];
   }
   getPhoneValidation() {
     if (this.fieldId === 'contact-phone' && this.fieldName === 'phone') {
-      if (this.iti.isValidNumber()) {
+      if (!this.required && this.inputValue === '') {
         if (this.mdcTextfield.classList.contains('mdc-text-field--invalid')) {
           this.mdcTextfield.classList.remove('mdc-text-field--invalid');
         }
         if (this.el.classList.contains('invalid-field')) {
           this.el.classList.remove('invalid-field');
         }
-        this.inputValue = this.iti.getNumber();
-        // console.log('sending phone number: ' + this.inputValue);
       }
-      else if (!this.iti.isValidNumber()) {
-        if (!this.mdcTextfield.classList.contains('mdc-text-field--invalid')) {
-          this.mdcTextfield.classList.add('mdc-text-field--invalid');
+      else {
+        if (this.iti.isValidNumber()) {
+          if (this.mdcTextfield.classList.contains('mdc-text-field--invalid')) {
+            this.mdcTextfield.classList.remove('mdc-text-field--invalid');
+          }
+          if (this.el.classList.contains('invalid-field')) {
+            this.el.classList.remove('invalid-field');
+          }
+          this.inputValue = this.iti.getNumber();
+          // console.log('sending phone number: ' + this.inputValue);
         }
-        if (!this.el.classList.contains('invalid-field')) {
-          this.el.classList.add('invalid-field');
+        else if (!this.iti.isValidNumber()) {
+          if (!this.mdcTextfield.classList.contains('mdc-text-field--invalid')) {
+            this.mdcTextfield.classList.add('mdc-text-field--invalid');
+          }
+          if (!this.el.classList.contains('invalid-field')) {
+            this.el.classList.add('invalid-field');
+          }
         }
       }
     }
@@ -11832,7 +11851,7 @@ const PtcTextfield = class {
     }
     else if (this.fieldId === 'contact-phone') {
       if (this.iti) {
-        if (this.inputValue === '') {
+        if (this.inputValue === '' && this.required) {
           this.helpertext = this.getValidationMessage('tel');
         }
         else if (!this.iti.isValidNumber()) {
@@ -11881,27 +11900,8 @@ const PtcTitle = class {
   render() {
     const classMap = this.getCssClassMap();
     const cutOff = this.getLineCuttoff();
-    let TagType;
-    switch (this.type) {
-      case 'h1':
-        TagType = 'h1';
-        break;
-      case 'h3':
-        TagType = 'h3';
-        break;
-      case 'h4':
-        TagType = 'h4';
-        break;
-      case 'h5':
-        TagType = 'h5';
-        break;
-      case 'h6':
-        TagType = 'h6';
-        break;
-      default:
-        TagType = 'h2';
-    }
-    return (h(Host, null, this.styles && h("style", null, this.styles), h("div", { class: classMap }, h(TagType, { style: cutOff }, h("slot", null)))));
+    const [TagType, firstChild] = getSeoTagType(this.el);
+    return (h(Host, null, this.styles && h("style", null, this.styles), h("div", { class: classMap }, h(TagType, { innerHTML: firstChild.innerHTML, style: cutOff }, h("slot", null)))));
   }
   getCssClassMap() {
     return {
@@ -11927,6 +11927,7 @@ const PtcTitle = class {
     }
     return result;
   }
+  get el() { return getElement(this); }
 };
 PtcTitle.style = ptcTitleCss;