@ptcwebops/ptcw-design 2.9.0 → 2.9.1

package/dist/cjs/{ptc-form-checkbox_3.cjs.entry.js → embedded-form_9.cjs.entry.js}

@@ -4,6 +4,625 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-cd9a1b1a.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{width:433px;display:flex;border-radius:3px;background:#FFF;box-shadow:0px 2px 6px 0px rgba(0, 0, 0, 0.16);flex-direction:column;align-items:center;padding:24px 0px;justify-content:center}@keyframes rollUp{from{height:auto;opacity:1}to{height:0;opacity:0}}.ptc-form-roll-up{animation:rollUp 1s forwards;}";
+
+const EmbeddedForm = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.formData = {
+      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));
+    //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-select[field-id="contact-inquiry"]');
+    this.howhearselfreport = this.el.querySelector('ptc-textfield[field-id="self-reporting"]');
+    this.policy1 = this.el.querySelector('ptc-form-checkbox[checkbox-id="policy1"]');
+  }
+  //handle dataLookup
+  onDataLookup() {
+    const dataLookupElement = this.el.closest('ptc-data-lookup');
+    if (dataLookupElement) {
+      console.log('Perform Data Lookup...');
+      dataLookupElement.performDataLookup();
+    }
+    else {
+      console.log('No Data Lookup...');
+    }
+  }
+  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.selectedValue;
+    this.formData.inquiryReason = this.inquiryreasonEle.selectedValue;
+    this.formData.howhearselfreport = this.howhearselfreport.inputValue;
+    this.formData.policyChecked = this.policy1.isChecked;
+    //what if the checkbox is not required, I need to hide the checkbox in this case
+    if (this.formData.policyChecked) {
+      if (this.isValid()) {
+        const formSubmitEvent = new CustomEvent('formSubmit', {
+          detail: this.formData,
+          bubbles: true,
+        });
+        this.el.dispatchEvent(formSubmitEvent);
+        this.isSubmitted = true;
+        console.log('Form Submitted: ' + this.formData.email, this.formData.firstName, this.formData.lastName, this.formData.company, this.formData.phone, this.formData.country, this.formData.inquiryReason, this.formData.howhearselfreport, this.formData.policyChecked);
+      }
+      else {
+        console.log('Form validation failed');
+      }
+    }
+    else {
+      this.policy1.validateCheckbox();
+      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;
+    // console.log('invalid fields length: ' + invalidLength), check the select field
+    return (email !== '' &&
+      phone !== '' &&
+      firstName !== '' &&
+      lastName !== '' &&
+      company !== '' &&
+      country !== '' &&
+      inquiryReason !== '' &&
+      howhearselfreport != '' &&
+      policyChecked &&
+      invalidLength === 0);
+  }
+  render() {
+    const formClass = this.isSubmitted ? "ptc-form-roll-up" : "";
+    return (index.h(index.Host, null, index.h("div", { class: "ptc-container ptc-section-standard flex-adjustments" }, index.h("div", { class: "form-wrapper ptc-embedded-form" }, index.h("max-width-container", { "max-width": "277", breakpoint: 480 }, index.h("ptc-title", { type: "h2", "text-align": "center", "title-size": "x-small", "title-color": "gray", upperline: "no-upperline", "title-display": "inline-block", "title-height": "densest", "title-margin": "margin-flush", "title-weight": "w-6", "is-plm-hub": "false" }, "Please fill out the form and a PTC sales representative will be in touch."), index.h("ptc-spacer", { breakpoint: "x-small", size: "medium" }), index.h("ptc-spacer", { breakpoint: "x-small", size: "medium" }), index.h("ptc-spacer", { breakpoint: "small", size: "small" }), index.h("ptc-spacer", { breakpoint: "small", size: "small" })), index.h("form", { onSubmit: event => this.handleSubmit(event), class: formClass }, index.h("ptc-textfield", { "field-id": "contact-firstname", "label-text": "First Name*", type: "text", "ptc-data-eloqua-name": "C_FirstName", name: "firstname" }), index.h("ptc-textfield", { "field-id": "contact-lastname", "label-text": "Last Name*", type: "text", "ptc-data-eloqua-name": "C_LastName", name: "lastname" }), index.h("ptc-textfield", { "field-id": "company", "label-text": "Company*", type: "text", "ptc-data-eloqua-name": "C_Company", name: "company-field" }), index.h("ptc-textfield", { "field-id": "contact-email", "label-text": "Email*", type: "email", "ptc-data-eloqua-name": "C_EmailAddress", name: "email" }), index.h("ptc-select", { "field-id": "contact-country", label: "Country*", "ptc-data-eloqua-name": "C_Country", name: "country" }, index.h("ul", { class: "mdc-list" }, index.h("li", { class: "mdc-list-item", "data-value": "" }, index.h("span", { class: "mdc-list-item__ripple" })), index.h("li", { class: "mdc-list-item", "data-value": "USA" }, index.h("span", { class: "mdc-list-item__ripple" }), index.h("span", { class: "mdc-list-item__text" }, "USA")), index.h("li", { class: "mdc-list-item", "data-value": "Canada" }, index.h("span", { class: "mdc-list-item__ripple" }), index.h("span", { class: "mdc-list-item__text" }, "Canada")), index.h("li", { class: "mdc-list-item", "data-value": "China" }, index.h("span", { class: "mdc-list-item__ripple" }), index.h("span", { class: "mdc-list-item__text" }, "China")))), index.h("ptc-textfield", { "field-id": "contact-phone", "label-text": "Phone*", type: "tel", "ptc-data-eloqua-name": "C_BusPhone", name: "phone" }), index.h("ptc-select", { label: "What information are you interested in?*", "ptc-data-eloqua-name": "Inquiry_Reason", name: "inquiryreason", "field-id": "contact-inquiry" }, index.h("ul", { class: "mdc-list" }, index.h("li", { class: "mdc-list-item", "data-value": "" }, index.h("span", { class: "mdc-list-item__ripple" })), index.h("li", { class: "mdc-list-item", "data-value": "Augmented Reality (AR)" }, index.h("span", { class: "mdc-list-item__ripple" }), index.h("span", { class: "mdc-list-item__text" }, "Augmented Reality (AR)")), index.h("li", { class: "mdc-list-item", "data-value": "CAD" }, index.h("span", { class: "mdc-list-item__ripple" }), index.h("span", { class: "mdc-list-item__text" }, "Computer Aided Design")), index.h("li", { class: "mdc-list-item", "data-value": "Retail(FlexPLM)" }, index.h("span", { class: "mdc-list-item__ripple" }), index.h("span", { class: "mdc-list-item__text" }, "Fashion and Retail Product Lifecycle Management")))), index.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", name: "howhearselfreport" }), index.h("ptc-textfield", { type: "hidden", "ptc-data-eloqua-name": "test", "input-value": "test" }), index.h("ptc-form-checkbox", { label: "I agree to the policy", "checkbox-id": "policy1" }), index.h("ptc-button", { class: "form-submit", color: "ptc-quaternary", type: "submit", styles: ":host{align-self:flex-end; margin-top: 48px; display:block; text-align:right;}" }, "Submit"))))));
+  }
+  get el() { return index.getElement(this); }
+};
+EmbeddedForm.style = embeddedFormCss;
+
+const maxWidthContainerCss = ":host{display:block}:host(.left){margin:auto auto auto 0}:host(.right){margin:auto 0 auto auto}:host(.center){margin:0 auto}";
+
+const MaxWidthContainer = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.maxWidthP = undefined;
+    this.maxWidth = undefined;
+    this.breakpoint = 768;
+    this.contentAlign = 'center';
+    this.styles = undefined;
+  }
+  componentDidLoad() {
+    this.handleResize();
+    window.addEventListener('resize', this.handleResize.bind(this));
+  }
+  disconnectedCallback() {
+    window.removeEventListener('resize', this.handleResize);
+  }
+  render() {
+    const classMap = this.getCssClassMap();
+    return (index.h(index.Host, { class: classMap }, this.styles && index.h("style", null, this.styles), index.h("slot", null)));
+  }
+  getCssClassMap() {
+    return {
+      [this.contentAlign]: true,
+    };
+  }
+  handleResize() {
+    // const selectedContainer = this.el.querySelector('.max-width-container');
+    if (this.el) {
+      if (window.innerWidth >= this.breakpoint) {
+        if (this.maxWidthP) {
+          this.el.style.maxWidth = `${this.maxWidthP}%`;
+        }
+        else {
+          this.el.style.maxWidth = `${this.maxWidth}px`;
+        }
+      }
+      else {
+        this.el.style.maxWidth = 'initial';
+      }
+    }
+  }
+  get el() { return index.getElement(this); }
+};
+MaxWidthContainer.style = maxWidthContainerCss;
+
+const ptcButtonCss = "button.disabled{pointer-events:none;opacity:0.6}button{background-color:var(--color-gray-10);display:inline-block;border-style:solid;border-width:1px;white-space:normal;position:relative;text-decoration:none;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;cursor:pointer;padding:9.4px 17.5px;border-radius:var(--ptc-border-radius-standard)}button.reveal-down .content{transition:opacity var(--ptc-transition-medium) var(--ptc-ease-out);opacity:0;font-size:var(--ptc-font-size-xx-small)}button.reveal-down .icon-wrapper{position:relative;display:flex;align-items:center;justify-content:center;align-content:center;height:16px}button.reveal-down .icon-wrapper .icon{transition:top var(--ptc-transition-fast) var(--ptc-ease-out);position:absolute;display:inline-block;top:-12px}button:hover.reveal-down .content{opacity:1}button:hover.reveal-down .icon-wrapper .icon{top:4px}button.animation-right ::slotted([slot=slot-after-text]),button.animation-right ::slotted([slot=slot-before-text]),button.animation-down ::slotted([slot=slot-after-text]),button.animation-down ::slotted([slot=slot-before-text]){transition:transform var(--ptc-transition-medium) var(--ptc-ease-inout);position:relative;display:inline-block}button:hover.animation-right ::slotted([slot=slot-after-text]),button:hover.animation-right ::slotted([slot=slot-before-text]){transform:translateX(var(--ptc-element-spacing-02))}button:hover.animation-down ::slotted([slot=slot-after-text]),button:hover.animation-down ::slotted([slot=slot-before-text]){transform:translateY(var(--ptc-element-spacing-02))}button span{font-family:var(--ptc-font-latin);font-size:var(--ptc-font-size-small);font-weight:bold;line-height:var(--ptc-line-height-densest)}button.left{text-align:left}button.right{text-align:right}button.center{text-align:center}.icon-left ::slotted([slot=slot-before-text]){margin-right:var(--ptc-element-spacing-01)}.icon-right ::slotted([slot=slot-after-text]){margin-left:var(--ptc-element-spacing-01)}.blackgrey{box-shadow:var(--ptc-shadow-x-small);border:solid 1px var(--color-gray-10);background-image:linear-gradient(285deg, var(--color-gray-10) 155%, var(--color-gray-07) 62%)}.blackgrey:hover{box-shadow:var(--ptc-shadow-x-large)}.blackgrey span{color:var(--color-white)}.turtlegreen{box-shadow:var(--ptc-shadow-x-small);border:solid 1px var(--color-green-07);background-image:linear-gradient(285deg, var(--color-green-07) 155%, var(--color-green-07) 62%)}.turtlegreen:hover{box-shadow:var(--ptc-shadow-x-large)}.turtlegreen span{color:var(--color-white)}.offwhite{box-shadow:var(--ptc-shadow-x-small);border:solid 1px var(--color-gray-10);background-image:linear-gradient(to right, var(--color-white), var(--color-gray-02), var(--color-gray-01))}.offwhite:hover{box-shadow:var(--ptc-shadow-x-large)}.offwhite span{color:var(--color-gray-10)}.legacy-green{margin-left:10px;padding:10px 20px;margin-bottom:var(--ptc-element-spacing-01);margin-top:var(--ptc-element-spacing-01);box-shadow:var(--ptc-shadow-large);border:solid 2.5px var(--color-green-08);background-image:linear-gradient(to right, var(--color-green-06), var(--color-green-08))}.legacy-green:after{position:absolute;content:\"\";top:-1px;left:0;bottom:0;right:0;width:100%;height:103%;background-image:linear-gradient(to right, var(--color-green-08), var(--color-green-06));opacity:0;transition:opacity var(--ptc-transition-x-slow) var(--ptc-ease-inout);border-radius:2px}.legacy-green:hover{box-shadow:var(--ptc-shadow-x-large)}.legacy-green:hover span{color:var(--color-white)}.legacy-green:hover:after{opacity:1}.legacy-green span{font-family:var(--ptc-font-secondary-latin);color:var(--color-white);z-index:100;position:relative;text-transform:uppercase;font-weight:var(--ptc-font-weight-bold);letter-spacing:var(--ptc-letter-spacing-normal);font-size:var(--ptc-font-size-x-small)}@media only screen and (min-width: 768px){.legacy-green span{font-size:var(--ptc-font-size-small);letter-spacing:var(--ptc-letter-spacing-loose)}}.legacy-green icon-asset{display:inline}a{border-style:solid;border-width:1px;position:relative;text-decoration:none;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;padding:9.4px 17.5px;border-radius:var(--ptc-border-radius-standard);display:inline-block;position:relative}a.animation-right ::slotted([slot=slot-after-text]),a.animation-right ::slotted([slot=slot-before-text]),a.animation-down ::slotted([slot=slot-after-text]),a.animation-down ::slotted([slot=slot-before-text]){transition:all var(--ptc-ease-inout) var(--ptc-transition-medium);position:relative;display:inline-block;margin-left:5px}a:hover.animation-right ::slotted([slot=slot-after-text]),a:hover.animation-right ::slotted([slot=slot-before-text]){transform:translateX(var(--ptc-element-spacing-02))}a:hover.animation-down ::slotted([slot=slot-after-text]),a:hover.animation-down ::slotted([slot=slot-before-text]){transform:translateY(var(--ptc-element-spacing-02))}a.left{text-align:left}a.right{text-align:right}a.center{text-align:center}.nav{font-family:var(--ptc-font-latin);background-color:var(--color-gray-10);border-radius:var(--ptc-border-radius-standard);border:1px solid var(--color-white);border-bottom-style:solid;border-bottom-width:1px;box-sizing:border-box;color:var(--color-white);display:inline-block;font-size:var(--ptc-font-size-xx-small);font-stretch:100%;font-weight:var(--ptc-font-weight-bold);line-height:var(--ptc-line-height-loose);list-style:none;padding:3px var(--ptc-element-spacing-04);position:relative;text-align:center;text-decoration:none;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;transition:background-color var(--ptc-transition-medium) var(--ptc-ease-inout)}.nav:focus{outline:3px solid var(--color-blue-07);outline-offset:2px}.nav:hover{background-color:var(--color-gray-12)}.ptc-primary,.ptc-quaternary,.ptc-secondary,.ptc-tertiary,.icon-toggle{padding:var(--ptc-font-size-xx-small) var(--ptc-font-size-medium);transition:background-color var(--ptc-ease-inout) var(--ptc-transition-medium);line-height:20px}.ptc-primary.disabled,.ptc-quaternary.disabled,.ptc-secondary.disabled,.ptc-tertiary.disabled,.icon-toggle.disabled{pointer-events:none;border-color:var(--color-gray-03);background:var(--color-gray-02)}.ptc-primary.disabled span,.ptc-quaternary.disabled span,.ptc-secondary.disabled span,.ptc-tertiary.disabled span,.icon-toggle.disabled span{color:var(--color-gray-03)}.ptc-primary.disabled ::slotted([slot=slot-after-text]),.ptc-quaternary.disabled ::slotted([slot=slot-after-text]),.ptc-secondary.disabled ::slotted([slot=slot-after-text]),.ptc-tertiary.disabled ::slotted([slot=slot-after-text]),.icon-toggle.disabled ::slotted([slot=slot-after-text]){fill:var(--color-gray-03) !important}.ptc-primary:focus,.ptc-quaternary:focus,.ptc-secondary:focus,.ptc-tertiary:focus,.icon-toggle:focus{outline:3px solid var(--color-blue-07);outline-offset:2px}.ptc-primary span,.ptc-quaternary span,.ptc-secondary span,.ptc-tertiary span,.icon-toggle span{font-family:var(--ptc-font-latin);font-weight:var(--ptc-font-weight-bold);font-size:var(--ptc-font-size-small);line-height:var(--ptc-line-height-densest);letter-spacing:normal}.ptc-primary{background:var(--color-gray-12);border:2px solid var(--color-green-07);border-radius:var(--ptc-border-radius-standard)}.ptc-primary:hover{background-color:var(--color-gray-10)}.ptc-primary:active{background-color:var(--color-black)}.ptc-primary span{color:var(--color-white)}.ptc-primary ::slotted([slot=slot-after-text]){fill:var(--color-white) !important}.ptc-secondary{background:var(--color-gray-12);border:2px solid var(--color-gray-08);border-radius:var(--ptc-border-radius-standard)}.ptc-secondary:hover{background-color:var(--color-gray-10)}.ptc-secondary:active{background-color:var(--color-black)}.ptc-secondary span{color:var(--color-white)}.ptc-secondary ::slotted([slot=slot-after-text]){fill:var(--color-white) !important}.ptc-tertiary{background:var(--color-white);border:2px solid var(--color-gray-10);border-radius:var(--ptc-border-radius-standard)}.ptc-tertiary:hover{background-color:var(--color-gray-02)}.ptc-tertiary:active{background-color:var(--color-gray-03)}.ptc-tertiary span{color:var(--color-gray-10)}.ptc-tertiary ::slotted([slot=slot-after-text]){fill:var(--color-gray-10) !important}.ptc-quaternary{background:var(--color-green-07);border:2px solid var(--color-green-07);border-radius:var(--ptc-border-radius-standard)}.ptc-quaternary:hover{background-color:var(--color-green-08)}.ptc-quaternary:active{background-color:var(--color-green-09)}.ptc-quaternary span{color:var(--color-white)}.ptc-quaternary ::slotted([slot=slot-after-text]){fill:var(--color-white) !important}.icon-toggle{background:var(--color-white);border:1px solid var(--color-gray-10);border-radius:var(--ptc-border-radius-standard);padding:0;height:2.125rem;width:2.125rem;box-shadow:var(--ptc-shadow-medium)}.icon-toggle:hover{background-color:var(--color-gray-02)}.icon-toggle:active{background-color:var(--color-gray-03)}.icon-toggle.active{background-color:var(--color-gray-04)}.icon-toggle.active:hover{background-color:var(--color-gray-05)}.icon-toggle.active:active{background-color:var(--color-gray-03)}.icon-toggle:focus{outline:2px solid var(--color-blue-07);outline-offset:1px}.icon-toggle span{color:var(--color-gray-10);padding:0}.icon-toggle ::slotted([slot=slot-after-text]){fill:var(--color-gray-10) !important}.icon-toggle ::slotted(icon-asset){display:block;margin:auto;height:18px;width:18px}.clear-search{border:none;padding:0px;line-height:var(----ptc-line-height-densest);background-color:transparent}.clear-search:hover{text-decoration:underline;text-decoration-color:var(--color-white)}.clear-search span{color:var(--color-white);font-weight:var(--ptc-font-weight-semibold);font-size:var(--ptc-font-size-x-small);-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}";
+
+const PtcButton = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.clickEvent = index.createEvent(this, "clickEvent", 7);
+    this.disabled = false;
+    this.active = false;
+    this.type = 'button';
+    this.color = 'ptc-primary';
+    this.iconAnimation = '';
+    this.iconPosition = 'icon-right';
+    this.linkHref = undefined;
+    this.linkTitle = undefined;
+    this.target = '_self';
+    this.rel = undefined;
+    this.tabNav = 0;
+    this.styles = undefined;
+    this.textAlign = undefined;
+  }
+  clickEventHandler() {
+    this.clickEvent.emit();
+  }
+  render() {
+    const classMap = this.getCssClassMap();
+    const Tag = !!this.linkHref ? 'a' : 'button';
+    return (index.h(index.Host, null, this.styles && index.h("style", null, this.styles), index.h(Tag, Object.assign({ class: classMap, onClick: this.clickEventHandler.bind(this) }, (!!this.linkHref ? { href: this.linkHref } : {}), (!this.linkHref ? { type: this.type } : {}), (!!this.target && !!this.linkHref ? { target: this.target } : {}), (!!this.rel && !!this.linkHref ? { rel: this.rel } : {}), (!!this.linkHref ? { title: this.linkTitle ? this.linkTitle : this.linkHref } : {}), (!!this.tabNav ? { tabindex: -1 } : { tabindex: 0 })), this.iconAnimation == 'reveal-down' ?
+      index.h("span", null, index.h("div", { class: "content" }, index.h("slot", null)), index.h("div", { class: "icon-wrapper" }, index.h("div", { class: "icon" }, index.h("slot", { name: "slot-after-text" })))) :
+      index.h("span", null, index.h("slot", { name: "slot-before-text" }), index.h("slot", null), index.h("slot", { name: "slot-after-text" })))));
+  }
+  getCssClassMap() {
+    return {
+      [this.color]: true,
+      [this.iconAnimation]: true,
+      [this.iconPosition]: true,
+      ['disabled']: this.disabled ? true : false,
+      ['active']: this.active ? true : false,
+      [this.textAlign]: true
+    };
+  }
+};
+PtcButton.style = ptcButtonCss;
+
+// Define the ElqLib class
+class ElqLib {
+  constructor(params) {
+    this.params = params;
+    this.url_vars = {};
+    this.visitor_elq_id = null;
+    this.field_mappings = [];
+    this.callback_queue = [];
+    //private fields_populated: boolean = false;
+    this.user_elq_email = '';
+    this.user_elq_firstname = '';
+    this.user_elq_lastname = '';
+    // Merge defaults with params
+    const defaults = {
+      elq_site_id: '',
+      elq_visitor_lookup_key: '',
+      elq_recipient_id_lookup_key: '',
+      elq_contact_lookup_key: '',
+      elq_field_email_rec_id: 'V_EmailRecipientID',
+      elq_field_contact_email: 'C_EmailAddress',
+      elq_field_visitor_email: 'V_Email_Address',
+      elq_field_visitor_firstname: 'V_First_Name',
+      elq_field_visitor_lastname: 'V_Last_Name',
+      notme_link_id: null,
+      notme_fields_class: null,
+      notme_message: 'Not {name}? Click here.',
+      notme_message_noname: 'Not your details below? Click here.',
+    };
+    this.params = Object.assign(Object.assign({}, defaults), this.params);
+    this.init();
+  }
+  init() {
+    // Merge defaults with user-provided params if not already done in the constructor
+    // ...
+    // Set Eloqua site ID
+    this.setEloquaSiteId();
+    // Load Eloqua scripts
+    this.async_load();
+    // Store URL variables
+    this.store_url_vars();
+    // Store visitor's Eloqua IDgit
+    this.store_visitor_elq_id();
+    // Set the global Eloqua callback function
+    window.SetElqContent = this.eloqua_callback.bind(this);
+  }
+  setEloquaSiteId() {
+    if (this.params.elq_site_id) {
+      ElqLib._elqQ.push(['elqSetSiteId', this.params.elq_site_id]);
+      ElqLib._elqQ.push(['elqUseFirstPartyCookie', 'tracking.ptc.com']);
+      ElqLib._elqQ.push(['elqTrackPageView', window.location.href]);
+    }
+  }
+  fire_pageview(url) {
+    try {
+      if (typeof url === 'undefined') {
+        ElqLib._elqQ.push(['elqTrackPageView']);
+      }
+      else {
+        ElqLib._elqQ.push(['elqTrackPageView', url]);
+      }
+      console.log('TRACKING: Eloqua pageview fired for URL: ' + (url || 'current page'));
+    }
+    catch (e) {
+      console.log('TRACKING: Could not fire Eloqua pageview: ', e);
+    }
+  }
+  find_eloqua_contact() {
+    console.log('CONTACT LOOKUP: Attempting to find Eloqua contact...');
+    // Queue callback action for the return of lookup
+    this.callback_queue.push(this.handle_visitor_lookup.bind(this));
+    // Start with a recipient lookup if ID was supplied in URL
+    if (this.visitor_elq_id !== null) {
+      this.lookup_visitor_by_recipient_id();
+    }
+    else {
+      // If no visitor ID, attempt to do a visitor lookup with an Eloqua cookie
+      this.lookup_visitor_by_cookie(); //preference center
+      this.lookup_contact_by_email();
+    }
+  }
+  add_field_mapping(mapping) {
+    this.field_mappings.push(mapping);
+  }
+  add_queue_action(action) {
+    this.callback_queue.push(action);
+  }
+  store_url_vars() {
+    // Clear the current url_vars
+    this.url_vars = {};
+    // Split the URL by the '?' to get the query string part
+    const queryString = window.location.search.substring(1);
+    // Split the query string by '&' to get each key-value pair
+    queryString.split('&').forEach(paramString => {
+      // Split the key-value pairs by '=' to separate keys and values
+      let [key, value] = paramString.split('=');
+      // Decode URI components to handle URL encoding
+      key = decodeURIComponent(key);
+      value = decodeURIComponent(value);
+      // Store the key-value pair in the url_vars object
+      this.url_vars[key] = value;
+    });
+    // Optionally, log the stored URL variables
+    console.log('URL variables stored:', this.url_vars);
+  }
+  store_visitor_elq_id() {
+    console.log("INIT: Looking for visitor's Eloqua ID in URL...");
+    const elqIdParam = this.url_vars['elq'];
+    if (elqIdParam) {
+      const elqId = elqIdParam.toUpperCase().replace(/(.{8})(.{4})(.{4})(.{4})(.{12})/, '$1-$2-$3-$4-$5');
+      this.visitor_elq_id = elqId;
+      console.log(`INIT: ...visitor Eloqua ID found in URL: ${elqId}`);
+    }
+    else {
+      this.visitor_elq_id = null;
+      console.log('INIT: ...no visitor Eloqua ID found in URL');
+    }
+  }
+  //   private merge(root: any, ...sources: any[]): any {
+  //     sources.forEach(source => {
+  //       for (const key in source) {
+  //         if (source.hasOwnProperty(key)) {
+  //           root[key] = source[key];
+  //         }
+  //       }
+  //     });
+  //     return root;
+  //   }
+  eloqua_callback() {
+    console.log('LOOKUP: Eloqua lookup finished');
+    // Process each action in the callback queue
+    let actionSucceeded = true;
+    while (actionSucceeded && this.callback_queue.length > 0) {
+      const action = this.callback_queue.shift();
+      if (action) {
+        console.log(`QUEUE: Executing action`);
+        actionSucceeded = action(); // Execute the action. It must return a boolean indicating success.
+        if (actionSucceeded) {
+          console.log('QUEUE: Action executed successfully, removed from queue');
+        }
+        else {
+          console.log('QUEUE: Action failed, re-adding to queue');
+          this.callback_queue.unshift(action); // Re-add the action to the front of the queue
+          break; // Break out of the loop if an action fails
+        }
+      }
+    }
+    // After processing the queue, update user details or perform other operations
+    if (actionSucceeded) {
+      this.update_user_details();
+    }
+    //this.populate_mapped_fields();
+    // ...additional code to handle the aftermath of callback processing...
+  }
+  lookup_visitor_by_cookie() {
+    if (this.params.elq_visitor_lookup_key != '') {
+      ElqLib._elqQ.push(['elqDataLookup', escape(this.params.elq_visitor_lookup_key), '']);
+      console.log('LOOKUP: Visitor lookup sent using Eloqua cookie');
+    }
+    else {
+      console.log('LOOKUP: A visitor lookup cannot be performed as no lookup key was defined');
+    }
+  }
+  lookup_visitor_by_recipient_id() {
+    if (this.params.elq_recipient_id_lookup_key != '') {
+      ElqLib._elqQ.push([
+        'elqDataLookup',
+        escape(this.params.elq_recipient_id_lookup_key),
+        '<' + this.params.elq_field_email_rec_id + '>' + this.visitor_elq_id + '</' + this.params.elq_field_email_rec_id + '>',
+      ]);
+      console.log('LOOKUP: Visitor lookup sent using email recipient id: ' + this.visitor_elq_id);
+    }
+    else {
+      console.log('LOOKUP: A visitor lookup cannot be performed as no lookup key was defined');
+    }
+  }
+  lookup_contact_by_email() {
+    if (this.params.elq_contact_lookup_key != '') {
+      ElqLib._elqQ.push([
+        'elqDataLookup',
+        escape(this.params.elq_contact_lookup_key),
+        '<' + this.params.elq_field_contact_email + '>' + this.user_elq_email + '</' + this.params.elq_field_contact_email + '>',
+      ]);
+      console.log('LOOKUP: Contact lookup sent using email address: ' + this.user_elq_email);
+    }
+    else {
+      console.log('LOOKUP: A visitor lookup cannot be performed as no lookup key was defined');
+    }
+  }
+  handle_visitor_lookup() {
+    //console.log('Contact Email: ' + this.params.elq_field_contact_email)
+    const email = window.GetElqContentPersonalizationValue(this.params.elq_field_contact_email); //it was elq_field_visitor_email ( V_Email_Address)
+    if (email) {
+      console.log(`LOOKUP: Found contact email address: ${email}`);
+      this.user_elq_email = email.trim();
+      this.lookup_contact_by_email();
+      this.callback_queue.push(this.handle_contact_lookup.bind(this));
+      return true;
+    }
+    else {
+      return false;
+    }
+  }
+  handle_contact_lookup() {
+    if (window.GetElqContentPersonalizationValue(this.params.elq_field_contact_email) != '') {
+      console.log('LOOKUP: Found contact email address: ' + window.GetElqContentPersonalizationValue(this.params.elq_field_contact_email));
+      return true;
+    }
+    else {
+      return false;
+    }
+  }
+  //   private populate_mapped_fields(): void {
+  //     console.log("MAPPING: Starting field mapping");
+  // 		// Loop through all mappings
+  // 		for (mapping_set in field_mappings) {
+  // 			for (mapping_element in field_mappings[mapping_set]) {
+  // 				var mapping_elq_field = field_mappings[mapping_set][mapping_element];
+  // 				var element = document.getElementById(mapping_element);
+  // 				var field_value = GetElqContentPersonalizationValue(mapping_elq_field);
+  // 				// Check that field exists
+  // 				if (element == null) {
+  // 					log("MAPPING: Could not populate element '" + mapping_element + "' as it does not exist");
+  // 				}
+  // 				else if (element.value != '') {
+  // 					log("MAPPING: Could not populate element '" + mapping_element + "' as it already contained a value");
+  // 				}
+  // 				else if (field_value == '') {
+  // 					log("MAPPING: Could not populate element '" + mapping_element + "' as the Eloqua field '" + mapping_elq_field + "' contained no data");
+  // 				}
+  // 				else {
+  // 					fields_populated = true;
+  // 					element.value = field_value;
+  // 					log("MAPPING: Mapped element '" + mapping_element + "' with Eloqua field '" + mapping_elq_field + "'");
+  // 				}
+  // 			}
+  // 		}
+  // 		console.log("MAPPING: Finished field mapping");
+  // 		// Update notme link
+  // 		//update_notme_link ();
+  //   }
+  update_user_details() {
+    console.log('displaying user info...');
+    if (window.GetElqContentPersonalizationValue(this.params.elq_field_contact_email) !== '') {
+      document.querySelectorAll('input[type=text], input[type=tel], input[name="phonenumber"], input[name="phonenumbertwo"], input[type=email], select, textarea, span.mdc-select__selected-text')
+        .forEach((element) => {
+        if (element.tagName === 'SPAN') {
+          const spanText = element;
+          const spanEloquaName = spanText.getAttribute('data-eloqua-name');
+          if (spanEloquaName !== null) {
+            const spanElqValue = window.GetElqContentPersonalizationValue(spanEloquaName);
+            if (spanElqValue !== '' && spanElqValue.length > 0) {
+              spanText.textContent = spanElqValue;
+            }
+          }
+        }
+        else if (element.className.includes('intl-tel-input')) {
+          const telInput = element;
+          const eloquaName = telInput.getAttribute('data-eloqua-name');
+          if (eloquaName !== null) {
+            const elqValue = window.GetElqContentPersonalizationValue(eloquaName);
+            if (elqValue !== '' && elqValue.length > 0) {
+              setTimeout(() => {
+                telInput.placeholder = elqValue;
+              }, 1000);
+            }
+          }
+        }
+        else {
+          const input = element;
+          const eloquaName = input.getAttribute('data-eloqua-name');
+          if (eloquaName !== null) {
+            const elqValue = window.GetElqContentPersonalizationValue(eloquaName);
+            if (elqValue !== '' && elqValue.length > 0) {
+              input.value = elqValue;
+            }
+          }
+        }
+      });
+    }
+    if (this.user_elq_email == '' && window.GetElqContentPersonalizationValue(this.params.elq_field_visitor_email) != '') {
+      this.user_elq_email = window.GetElqContentPersonalizationValue(this.params.elq_field_visitor_email);
+    }
+    if (this.user_elq_firstname == '' && window.GetElqContentPersonalizationValue(this.params.elq_field_visitor_firstname) != '') {
+      this.user_elq_firstname = window.GetElqContentPersonalizationValue(this.params.elq_field_visitor_firstname);
+    }
+    if (this.user_elq_lastname == '' && window.GetElqContentPersonalizationValue(this.params.elq_field_visitor_lastname) != '') {
+      this.user_elq_lastname = window.GetElqContentPersonalizationValue(this.params.elq_field_visitor_lastname);
+    }
+  }
+  //   private update_notme_link(): void {
+  //     // Get link element
+  // 		var notme_link_element = $('#' + this.params.notme_link_id);
+  // 		// Get Eloqua vars
+  // 		var first_name = this.user_elq_firstname;
+  // 		var last_name = this.user_elq_lastname;
+  // 		var email = this.user_elq_email;
+  // 		// Check if we have both first name and last name
+  // 		if (first_name != '' && last_name !='') {
+  // 			name = first_name + ' ' + last_name;
+  // 			display_link = true;
+  // 		}
+  // 		// Check if we have first name
+  // 		else if (first_name != '') {
+  // 			name = first_name;
+  // 		}
+  // 		// Other use a generic message
+  // 		else {
+  // 			name = '';
+  // 		}
+  // 		// Check if some fields have been populated
+  // 		if (this.fields_populated && this.params.notme_link_id != null && this.params.notme_fields_class != null) {
+  // 			if (name != '') {
+  // 				var message = this.params.notme_message.replace("{name}", name);
+  // 			}
+  // 			else {
+  // 				var message = this.params.notme_message_noname;
+  // 			}
+  // 			console.log("MAPPING: Updating not me link");
+  // 			notme_link_element.find('*').remove();
+  // 			var link = $('<a href="">' + message + '</a>').appendTo(notme_link_element).click(this.remove_user_details);
+  // 		}
+  //   }
+  //   private remove_user_details(): void {
+  //     this.user_elq_email = '';
+  //     this.user_elq_firstname = '';
+  //     this.user_elq_lastname = '';
+  //     $('.' + this.params.notme_fields_class).val('');
+  //     $('#' + this.params.notme_link_id)
+  //       .find('a')
+  //       .remove();
+  //     //Flush out old user cookie
+  //     ElqLib._elqQ.push(['elqVisitorGuid', ' ']);
+  //     ElqLib._elqQ.push(['elqTrackPageView']);
+  //     //return false;
+  //   }
+  // Private Method to load Eloqua Scripts
+  async_load() {
+    const scriptUrl = 'https://img.en25.com/i/elqCfg.min.js';
+    const scriptElement = document.createElement('script');
+    scriptElement.type = 'text/javascript';
+    scriptElement.async = true;
+    scriptElement.src = scriptUrl;
+    // Error handling for script loading
+    scriptElement.onerror = errorEvent => {
+      console.log(`Error loading script: ${errorEvent}`);
+    };
+    // Append the script element to the head of the document, or before the first script tag found
+    const firstScriptTag = document.getElementsByTagName('script')[0];
+    if (firstScriptTag && firstScriptTag.parentNode) {
+      firstScriptTag.parentNode.insertBefore(scriptElement, firstScriptTag);
+    }
+    else {
+      document.head.appendChild(scriptElement);
+    }
+    console.log(`Async loading of script ${scriptUrl} initiated.`);
+  }
+}
+ElqLib._elqQ = window['_elqQ'] || [];
+// Static member initialization
+//ElqLib._elqQ = window['_elqQ'] || [];
+
+const ptcDataLookupCss = ":host{display:block}";
+
+const PtcDataLookup = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.elqSiteId = undefined;
+    this.elqVisitorLookupKey = undefined;
+    this.elqRecipientIdLookupKey = undefined;
+    this.elqContactLookupKey = undefined;
+    this.elqFieldEmailRecId = "V_EmailRecipientID";
+    this.elqFieldContactEmail = "C_EmailAddress";
+    this.elqFieldVisitorEmail = 'V_Email_Address';
+    this.elqFieldVisitorFirstname = 'C_FirstName';
+    this.elqFieldVisitorLastname = 'C_LastName';
+    this.notmeLinkId = undefined;
+    this.notmeFieldsClass = undefined;
+    this.notmeMessage = undefined;
+    this.notmeMessageNoname = undefined;
+    this.isInitialized = false;
+  }
+  componentWillLoad() {
+    this.initializeElqLib();
+  }
+  initializeElqLib() {
+    this.elqLib = new ElqLib({
+      elq_site_id: this.elqSiteId,
+      elq_visitor_lookup_key: this.elqVisitorLookupKey,
+      elq_recipient_id_lookup_key: this.elqRecipientIdLookupKey,
+      elq_contact_lookup_key: this.elqContactLookupKey,
+      elq_field_email_rec_id: this.elqFieldEmailRecId,
+      elq_field_contact_email: this.elqFieldContactEmail,
+      elq_field_visitor_email: this.elqFieldVisitorEmail,
+      elq_field_visitor_firstname: this.elqFieldVisitorFirstname,
+      elq_field_visitor_lastname: this.elqFieldVisitorLastname,
+      notme_link_id: this.notmeLinkId,
+      notme_fields_class: this.notmeFieldsClass,
+      notme_message: this.notmeMessage,
+      notme_message_noname: this.notmeMessageNoname,
+    });
+    this.isInitialized = true;
+  }
+  getCookie(name) {
+    let cookieValue = null;
+    if (document.cookie) {
+      const cookies = document.cookie.split(';');
+      for (let cookie of cookies) {
+        const [key, value] = cookie.trim().split('=');
+        if (key === name) {
+          cookieValue = decodeURIComponent(value);
+          break;
+        }
+      }
+    }
+    return cookieValue;
+  }
+  async performDataLookup() {
+    if (this.isInitialized) {
+      this.elqLib.user_elq_email = this.getCookie('elq-uid');
+      this.elqLib.find_eloqua_contact();
+    }
+  }
+  render() {
+    return (index.h("slot", null));
+  }
+};
+PtcDataLookup.style = ptcDataLookupCss;
+
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
 
@@ -7178,6 +7797,37 @@ const PtcSelect = class {
 };
 PtcSelect.style = ptcSelectCss;
 
+const ptcSpacerCss = ":host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;position:relative;display:block;width:12px;min-width:12px;height:12px}@media (min-width: 36em){:host{width:16px;min-width:16px;height:16px}}:host(.ptc-spacer-horizontal){display:inline-block;height:100% !important}:host(.ptc-spacer-horizontal.xx-small){width:4px;min-width:4px;height:100%}@media (min-width: 36em){:host(.ptc-spacer-horizontal.xx-small){width:4px;min-width:4px}}:host(.ptc-spacer-horizontal.x-small){width:4px;min-width:4px;height:100%}@media (min-width: 36em){:host(.ptc-spacer-horizontal.x-small){width:8px;min-width:8px}}:host(.ptc-spacer-horizontal.small){width:8px;min-width:8px;height:100%}@media (min-width: 36em){:host(.ptc-spacer-horizontal.small){width:12px;min-width:12px}}:host(.ptc-spacer-horizontal.medium){height:100%}:host(.ptc-spacer-horizontal.large){width:16px;min-width:16px;height:100%}@media (min-width: 36em){:host(.ptc-spacer-horizontal.large){width:20px;min-width:20px}}:host(.ptc-spacer-horizontal.x-large){width:20px;min-width:20px;height:100%}@media (min-width: 36em){:host(.ptc-spacer-horizontal.x-large){width:28px;min-width:28px}}:host(.ptc-spacer-horizontal.xx-large){width:28px;min-width:28px;height:100%}@media (min-width: 36em){:host(.ptc-spacer-horizontal.xx-large){width:36px;min-width:36px}}:host(.ptc-spacer-horizontal.xxx-large){width:36px;min-width:36px;height:100%}@media (min-width: 36em){:host(.ptc-spacer-horizontal.xxx-large){width:48px;min-width:48px}}:host(.ptc-spacer-horizontal.xxxx-large){width:48px;min-width:48px;height:100%}@media (min-width: 36em){:host(.ptc-spacer-horizontal.xxxx-large){width:72px;min-width:72px}}:host(.ptc-spacer-vertical.xx-small){width:100%;height:4px;min-height:4px}:host(.ptc-spacer-vertical.x-small){width:100%;height:4px;min-height:4px}@media (min-width: 36em){:host(.ptc-spacer-vertical.x-small){height:8px;min-height:8px}}:host(.ptc-spacer-vertical.small){width:100%;height:8px;min-height:8px}@media (min-width: 36em){:host(.ptc-spacer-vertical.small){height:12px;min-height:12px}}:host(.ptc-spacer-vertical.medium){width:100%}:host(.ptc-spacer-vertical.large){width:100%;height:16px;min-height:16px}@media (min-width: 36em){:host(.ptc-spacer-vertical.large){height:20px;min-height:20px}}:host(.ptc-spacer-vertical.x-large){width:100%;height:20px;min-height:20px}@media (min-width: 36em){:host(.ptc-spacer-vertical.x-large){height:28px;min-height:28px}}:host(.ptc-spacer-vertical.xx-large){width:100%;height:28px;min-height:28px}@media (min-width: 36em){:host(.ptc-spacer-vertical.xx-large){height:36px;min-height:36px}}:host(.ptc-spacer-vertical.xxx-large){width:100%;height:36px;min-height:36px}@media (min-width: 36em){:host(.ptc-spacer-vertical.xxx-large){height:48px;min-height:48px}}:host(.ptc-spacer-vertical.xxxx-large){width:100%;height:48px;min-height:48px}@media (min-width: 36em){:host(.ptc-spacer-vertical.xxxx-large){height:72px;min-height:72px}}:host(.ptc-spacer-vertical.space-144){width:100%;height:144px;min-height:144px}:host(.ptc-spacer-vertical.space-120){width:100%;height:120px;min-height:120px}:host(.ptc-spacer-vertical.space-128){width:100%;height:128px;min-height:128px}:host(.ptc-spacer-xx-small){display:none}@media (max-width: 22.5em){:host(.ptc-spacer-xx-small){display:block}}:host(.ptc-spacer-x-small){display:none}@media (max-width: 35.99em){:host(.ptc-spacer-x-small){display:block}}:host(.ptc-spacer-small){display:none}@media (min-width: 36em){:host(.ptc-spacer-small){display:block}}:host(.ptc-spacer-medium){display:none}@media (min-width: 48em){:host(.ptc-spacer-medium){display:block}}:host(.ptc-spacer-large){display:none}@media (min-width: 62em){:host(.ptc-spacer-large){display:block}}:host(.ptc-spacer-x-large){display:none}@media (min-width: 64.0625em){:host(.ptc-spacer-x-large){display:block}}:host(.ptc-spacer-xx-large){display:none}@media (min-width: 75em){:host(.ptc-spacer-xx-large){display:block}}:host(.ptc-spacer-xxx-large){display:none}@media (min-width: 90em){:host(.ptc-spacer-xxx-large){display:block}}";
+
+const PtcSpacer = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.breakpoint = '';
+    this.size = 'medium';
+    this.direction = 'vertical';
+  }
+  render() {
+    const classMap = this.getCssClassMap();
+    return (index.h(index.Host, { class: classMap }));
+  }
+  getCssClassMap() {
+    return {
+      [this.size]: true,
+      ['ptc-spacer-horizontal']: this.direction === 'horizontal',
+      ['ptc-spacer-vertical']: this.direction === 'vertical',
+      ['ptc-spacer-xx-small']: this.breakpoint === 'xx-small',
+      ['ptc-spacer-x-small']: this.breakpoint === 'x-small',
+      ['ptc-spacer-small']: this.breakpoint === 'small',
+      ['ptc-spacer-medium']: this.breakpoint === 'medium',
+      ['ptc-spacer-large']: this.breakpoint === 'large',
+      ['ptc-spacer-x-large']: this.breakpoint === 'x-large',
+      ['ptc-spacer-xx-large']: this.breakpoint === 'xx-large',
+      ['ptc-spacer-xxx-large']: this.breakpoint === 'xxx-large',
+    };
+  }
+};
+PtcSpacer.style = ptcSpacerCss;
+
 /**
  * @license
  * Copyright 2019 Google Inc.
@@ -10672,6 +11322,83 @@ const PtcTextfield = class {
 };
 PtcTextfield.style = ptcTextfieldCss;
 
+const ptcTitleCss = "div.center.sc-ptc-title{text-align:center}div.center.dotted.sc-ptc-title h1.sc-ptc-title::before,div.center.dotted.sc-ptc-title h2.sc-ptc-title::before,div.center.dotted.sc-ptc-title h3.sc-ptc-title::before,div.center.dotted.sc-ptc-title h4.sc-ptc-title::before,div.center.dotted.sc-ptc-title h5.sc-ptc-title::before,div.center.dotted.sc-ptc-title h6.sc-ptc-title::before{left:50%;transform:translateX(-50%)}div.left.sc-ptc-title{text-align:left}div.left.dotted.sc-ptc-title h1.sc-ptc-title::before,div.left.dotted.sc-ptc-title h2.sc-ptc-title::before,div.left.dotted.sc-ptc-title h3.sc-ptc-title::before,div.left.dotted.sc-ptc-title h4.sc-ptc-title::before,div.left.dotted.sc-ptc-title h5.sc-ptc-title::before,div.left.dotted.sc-ptc-title h6.sc-ptc-title::before{left:0%}div.right.sc-ptc-title{text-align:right}div.right.dotted.sc-ptc-title h1.sc-ptc-title::before,div.right.dotted.sc-ptc-title h2.sc-ptc-title::before,div.right.dotted.sc-ptc-title h3.sc-ptc-title::before,div.right.dotted.sc-ptc-title h4.sc-ptc-title::before,div.right.dotted.sc-ptc-title h5.sc-ptc-title::before,div.right.dotted.sc-ptc-title h6.sc-ptc-title::before{right:0%}div.inherit.sc-ptc-title{text-align:inherit}div.dotted.sc-ptc-title h1.sc-ptc-title::before,div.dotted.sc-ptc-title h2.sc-ptc-title::before,div.dotted.sc-ptc-title h3.sc-ptc-title::before,div.dotted.sc-ptc-title h4.sc-ptc-title::before,div.dotted.sc-ptc-title h5.sc-ptc-title::before,div.dotted.sc-ptc-title h6.sc-ptc-title::before{content:\"\";position:absolute;top:-6px;width:30%;display:block;border-top:3px dashed var(--color-green-07)}div.solid.sc-ptc-title h1.sc-ptc-title,div.solid.sc-ptc-title h2.sc-ptc-title,div.solid.sc-ptc-title h3.sc-ptc-title,div.solid.sc-ptc-title h4.sc-ptc-title,div.solid.sc-ptc-title h5.sc-ptc-title,div.solid.sc-ptc-title h6.sc-ptc-title{padding-top:12px}div.solid.sc-ptc-title h1.sc-ptc-title::before,div.solid.sc-ptc-title h2.sc-ptc-title::before,div.solid.sc-ptc-title h3.sc-ptc-title::before,div.solid.sc-ptc-title h4.sc-ptc-title::before,div.solid.sc-ptc-title h5.sc-ptc-title::before,div.solid.sc-ptc-title h6.sc-ptc-title::before{content:\"\";position:absolute;width:100%;height:0.7px;background-color:var(--color-gray-03);opacity:0.9;left:0px;top:0}div.solid.sc-ptc-title h1.sc-ptc-title::after,div.solid.sc-ptc-title h2.sc-ptc-title::after,div.solid.sc-ptc-title h3.sc-ptc-title::after,div.solid.sc-ptc-title h4.sc-ptc-title::after,div.solid.sc-ptc-title h5.sc-ptc-title::after,div.solid.sc-ptc-title h6.sc-ptc-title::after{content:\"\";position:absolute;width:56px;height:2px;background-color:var(--color-green-07);top:-2px;left:0px}div.is-standard.sc-ptc-title h1.sc-ptc-title,div.is-standard.sc-ptc-title h2.sc-ptc-title,div.is-standard.sc-ptc-title h3.sc-ptc-title,div.is-standard.sc-ptc-title h4.sc-ptc-title,div.is-standard.sc-ptc-title h5.sc-ptc-title,div.is-standard.sc-ptc-title h6.sc-ptc-title{display:inline-block;position:relative}div.is-standard.sc-ptc-title h1.sc-ptc-title{font-size:var(--ptc-font-size-xxx-large);line-height:var(--ptc-line-height-densest);font-weight:var(--ptc-font-weight-extrabold);letter-spacing:0px;color:var(--color-gray-10)}@media only screen and (min-width: 768px){div.is-standard.sc-ptc-title h1.sc-ptc-title{font-size:var(--ptc-font-size-xxxx-large)}}div.is-standard.sc-ptc-title h2.sc-ptc-title{font-size:var(--ptc-font-size-x-large);line-height:var(--ptc-line-height-densest);font-weight:var(--ptc-font-weight-extrabold);color:var(--color-gray-10)}@media only screen and (min-width: 768px){div.is-standard.sc-ptc-title h2.sc-ptc-title{font-size:var(--ptc-font-size-xx-large)}}div.is-plm-hub.sc-ptc-title h1.sc-ptc-title,div.is-plm-hub.sc-ptc-title h2.sc-ptc-title,div.is-plm-hub.sc-ptc-title h3.sc-ptc-title,div.is-plm-hub.sc-ptc-title h4.sc-ptc-title,div.is-plm-hub.sc-ptc-title h5.sc-ptc-title,div.is-plm-hub.sc-ptc-title h6.sc-ptc-title{display:inline-block;position:relative;margin-block-start:0em;margin-block-end:0em;margin-inline-start:0px;margin-inline-end:0px;color:var(--color-white) !important}div.margin-flush.sc-ptc-title{margin-top:0;margin-bottom:0}div.margin-flush.sc-ptc-title h1.sc-ptc-title,div.margin-flush.sc-ptc-title h2.sc-ptc-title,div.margin-flush.sc-ptc-title h3.sc-ptc-title,div.margin-flush.sc-ptc-title h4.sc-ptc-title,div.margin-flush.sc-ptc-title h5.sc-ptc-title{margin-top:0;margin-bottom:0}div.margin-top-2.sc-ptc-title{margin-top:var(--ptc-element-spacing-02);margin-bottom:0}div.margin-top-3.sc-ptc-title{margin-top:var(--ptc-element-spacing-03);margin-bottom:0}div.margin-top-4.sc-ptc-title{margin-top:var(--ptc-element-spacing-04);margin-bottom:0}div.margin-top-5.sc-ptc-title{margin-top:var(--ptc-element-spacing-05);margin-bottom:0}div.margin-top-6.sc-ptc-title{margin-top:var(--ptc-element-spacing-06);margin-bottom:0}div.margin-bottom-2.sc-ptc-title{margin-bottom:var(--ptc-element-spacing-02);margin-top:0}div.margin-bottom-3.sc-ptc-title{margin-bottom:var(--ptc-element-spacing-03);margin-top:0}div.margin-bottom-4.sc-ptc-title{margin-bottom:var(--ptc-element-spacing-04);margin-top:0}div.margin-bottom-5.sc-ptc-title{margin-bottom:var(--ptc-element-spacing-05);margin-top:0}div.margin-bottom-6.sc-ptc-title{margin-bottom:var(--ptc-element-spacing-06);margin-top:0}div.margin-2.sc-ptc-title{margin-top:var(--ptc-element-spacing-02);margin-bottom:var(--ptc-element-spacing-02)}div.margin-3.sc-ptc-title{margin-top:var(--ptc-element-spacing-03);margin-bottom:var(--ptc-element-spacing-03)}div.margin-4.sc-ptc-title{margin-top:var(--ptc-element-spacing-04);margin-bottom:var(--ptc-element-spacing-04)}div.margin-5.sc-ptc-title{margin-top:var(--ptc-element-spacing-05);margin-bottom:var(--ptc-element-spacing-05)}div.margin-5.sc-ptc-title h4.sc-ptc-title{margin-top:0;margin-bottom:0}div.margin-6.sc-ptc-title{margin-top:var(--ptc-element-spacing-06);margin-bottom:var(--ptc-element-spacing-06)}div.margin-9.sc-ptc-title{margin-top:var(--ptc-element-spacing-09);margin-bottom:var(--ptc-element-spacing-09)}div.green.sc-ptc-title h1.sc-ptc-title,div.green.sc-ptc-title h2.sc-ptc-title,div.green.sc-ptc-title h3.sc-ptc-title,div.green.sc-ptc-title h4.sc-ptc-title,div.green.sc-ptc-title h5.sc-ptc-title,div.green.sc-ptc-title h6.sc-ptc-title{text-shadow:0px 0px var(--ptc-element-spacing-03) var(--color-green-07)}div.blue.sc-ptc-title h1.sc-ptc-title,div.blue.sc-ptc-title h2.sc-ptc-title,div.blue.sc-ptc-title h3.sc-ptc-title,div.blue.sc-ptc-title h4.sc-ptc-title,div.blue.sc-ptc-title h5.sc-ptc-title,div.blue.sc-ptc-title h6.sc-ptc-title{text-shadow:0px 0px var(--ptc-element-spacing-03) var(--color-blue-07)}div.red.sc-ptc-title h1.sc-ptc-title,div.red.sc-ptc-title h2.sc-ptc-title,div.red.sc-ptc-title h3.sc-ptc-title,div.red.sc-ptc-title h4.sc-ptc-title,div.red.sc-ptc-title h5.sc-ptc-title,div.red.sc-ptc-title h6.sc-ptc-title{text-shadow:0px 0px var(--ptc-element-spacing-03) var(--color-red-07)}div.orange.sc-ptc-title h1.sc-ptc-title,div.orange.sc-ptc-title h2.sc-ptc-title,div.orange.sc-ptc-title h3.sc-ptc-title,div.orange.sc-ptc-title h4.sc-ptc-title,div.orange.sc-ptc-title h5.sc-ptc-title,div.orange.sc-ptc-title h6.sc-ptc-title{text-shadow:0px 0px var(--ptc-element-spacing-03) var(--color-orange-07)}div.slate-grey.sc-ptc-title h1.sc-ptc-title,div.slate-grey.sc-ptc-title h2.sc-ptc-title,div.slate-grey.sc-ptc-title h3.sc-ptc-title,div.slate-grey.sc-ptc-title h4.sc-ptc-title,div.slate-grey.sc-ptc-title h5.sc-ptc-title,div.slate-grey.sc-ptc-title h6.sc-ptc-title{text-shadow:0px 0px var(--ptc-element-spacing-03) var(--color-gray-07)}div.w-3.sc-ptc-title h1.sc-ptc-title,div.w-3.sc-ptc-title h2.sc-ptc-title,div.w-3.sc-ptc-title h3.sc-ptc-title,div.w-3.sc-ptc-title h4.sc-ptc-title,div.w-3.sc-ptc-title h5.sc-ptc-title,div.w-3.sc-ptc-title h6.sc-ptc-title{font-weight:var(--ptc-font-weight-thin)}div.w-4.sc-ptc-title h1.sc-ptc-title,div.w-4.sc-ptc-title h2.sc-ptc-title,div.w-4.sc-ptc-title h3.sc-ptc-title,div.w-4.sc-ptc-title h4.sc-ptc-title,div.w-4.sc-ptc-title h5.sc-ptc-title,div.w-4.sc-ptc-title h6.sc-ptc-title{font-weight:var(--ptc-font-weight-regular)}div.w-5.sc-ptc-title h1.sc-ptc-title,div.w-5.sc-ptc-title h2.sc-ptc-title,div.w-5.sc-ptc-title h3.sc-ptc-title,div.w-5.sc-ptc-title h4.sc-ptc-title,div.w-5.sc-ptc-title h5.sc-ptc-title,div.w-5.sc-ptc-title h6.sc-ptc-title{font-weight:var(--ptc-font-weight-medium)}div.w-6.sc-ptc-title h1.sc-ptc-title,div.w-6.sc-ptc-title h2.sc-ptc-title,div.w-6.sc-ptc-title h3.sc-ptc-title,div.w-6.sc-ptc-title h4.sc-ptc-title,div.w-6.sc-ptc-title h5.sc-ptc-title,div.w-6.sc-ptc-title h6.sc-ptc-title{font-weight:var(--ptc-font-weight-semibold)}div.w-7.sc-ptc-title h1.sc-ptc-title,div.w-7.sc-ptc-title h2.sc-ptc-title,div.w-7.sc-ptc-title h3.sc-ptc-title,div.w-7.sc-ptc-title h4.sc-ptc-title,div.w-7.sc-ptc-title h5.sc-ptc-title,div.w-7.sc-ptc-title h6.sc-ptc-title{font-weight:var(--ptc-font-weight-bold)}div.w-8.sc-ptc-title h1.sc-ptc-title,div.w-8.sc-ptc-title h2.sc-ptc-title,div.w-8.sc-ptc-title h3.sc-ptc-title,div.w-8.sc-ptc-title h4.sc-ptc-title,div.w-8.sc-ptc-title h5.sc-ptc-title,div.w-8.sc-ptc-title h6.sc-ptc-title{font-weight:var(--ptc-font-weight-extrabold)}div.w-9.sc-ptc-title h1.sc-ptc-title,div.w-9.sc-ptc-title h2.sc-ptc-title,div.w-9.sc-ptc-title h3.sc-ptc-title,div.w-9.sc-ptc-title h4.sc-ptc-title,div.w-9.sc-ptc-title h5.sc-ptc-title,div.w-9.sc-ptc-title h6.sc-ptc-title{font-weight:var(--ptc-font-weight-black)}div.xx-small.sc-ptc-title h1.sc-ptc-title,div.xx-small.sc-ptc-title h2.sc-ptc-title,div.xx-small.sc-ptc-title h3.sc-ptc-title,div.xx-small.sc-ptc-title h4.sc-ptc-title,div.xx-small.sc-ptc-title h5.sc-ptc-title,div.xx-small.sc-ptc-title h6.sc-ptc-title{font-size:var(--ptc-font-size-xx-small)}div.x-small.sc-ptc-title h1.sc-ptc-title,div.x-small.sc-ptc-title h2.sc-ptc-title,div.x-small.sc-ptc-title h3.sc-ptc-title,div.x-small.sc-ptc-title h4.sc-ptc-title,div.x-small.sc-ptc-title h5.sc-ptc-title,div.x-small.sc-ptc-title h6.sc-ptc-title{font-size:var(--ptc-font-size-x-small)}div.small.sc-ptc-title h1.sc-ptc-title,div.small.sc-ptc-title h2.sc-ptc-title,div.small.sc-ptc-title h3.sc-ptc-title,div.small.sc-ptc-title h4.sc-ptc-title,div.small.sc-ptc-title h5.sc-ptc-title,div.small.sc-ptc-title h6.sc-ptc-title{font-size:var(--ptc-font-size-small)}div.medium.sc-ptc-title h1.sc-ptc-title,div.medium.sc-ptc-title h2.sc-ptc-title,div.medium.sc-ptc-title h3.sc-ptc-title,div.medium.sc-ptc-title h4.sc-ptc-title,div.medium.sc-ptc-title h5.sc-ptc-title,div.medium.sc-ptc-title h6.sc-ptc-title{font-size:var(--ptc-font-size-medium)}div.large.sc-ptc-title h1.sc-ptc-title,div.large.sc-ptc-title h2.sc-ptc-title,div.large.sc-ptc-title h3.sc-ptc-title,div.large.sc-ptc-title h4.sc-ptc-title,div.large.sc-ptc-title h5.sc-ptc-title,div.large.sc-ptc-title h6.sc-ptc-title{font-size:var(--ptc-font-size-large)}div.large.sc-ptc-title h3.sc-ptc-title{font-size:var(--ptc-font-size-medium)}@media only screen and (min-width: 768px){div.large.sc-ptc-title h3.sc-ptc-title{font-size:var(--ptc-font-size-large)}}div.x-large.sc-ptc-title h1.sc-ptc-title,div.x-large.sc-ptc-title h2.sc-ptc-title,div.x-large.sc-ptc-title h3.sc-ptc-title,div.x-large.sc-ptc-title h4.sc-ptc-title,div.x-large.sc-ptc-title h5.sc-ptc-title,div.x-large.sc-ptc-title h6.sc-ptc-title{font-size:var(--ptc-font-size-x-large)}div.xx-large.sc-ptc-title h1.sc-ptc-title,div.xx-large.sc-ptc-title h2.sc-ptc-title,div.xx-large.sc-ptc-title h3.sc-ptc-title,div.xx-large.sc-ptc-title h4.sc-ptc-title{font-size:var(--ptc-font-size-x-large)}@media only screen and (min-width: 768px){div.xx-large.sc-ptc-title h1.sc-ptc-title,div.xx-large.sc-ptc-title h2.sc-ptc-title,div.xx-large.sc-ptc-title h3.sc-ptc-title,div.xx-large.sc-ptc-title h4.sc-ptc-title{font-size:var(--ptc-font-size-xx-large)}}div.xxx-large.sc-ptc-title h1.sc-ptc-title,div.xxx-large.sc-ptc-title h2.sc-ptc-title,div.xxx-large.sc-ptc-title h3.sc-ptc-title,div.xxx-large.sc-ptc-title h4.sc-ptc-title,div.xxx-large.sc-ptc-title h5.sc-ptc-title,div.xxx-large.sc-ptc-title h6.sc-ptc-title{font-size:var(--ptc-font-size-xx-large)}@media only screen and (min-width: 768px){div.xxx-large.sc-ptc-title h1.sc-ptc-title,div.xxx-large.sc-ptc-title h2.sc-ptc-title,div.xxx-large.sc-ptc-title h3.sc-ptc-title,div.xxx-large.sc-ptc-title h4.sc-ptc-title,div.xxx-large.sc-ptc-title h5.sc-ptc-title,div.xxx-large.sc-ptc-title h6.sc-ptc-title{font-size:var(--ptc-font-size-xxx-large)}}div.xxxx-large.sc-ptc-title h1.sc-ptc-title,div.xxxx-large.sc-ptc-title h2.sc-ptc-title,div.xxxx-large.sc-ptc-title h3.sc-ptc-title,div.xxxx-large.sc-ptc-title h4.sc-ptc-title,div.xxxx-large.sc-ptc-title h5.sc-ptc-title,div.xxxx-large.sc-ptc-title h6.sc-ptc-title{font-size:var(--ptc-font-size-xxx-large)}@media screen and (min-width: 769px){div.xxxx-large.sc-ptc-title h1.sc-ptc-title,div.xxxx-large.sc-ptc-title h2.sc-ptc-title,div.xxxx-large.sc-ptc-title h3.sc-ptc-title,div.xxxx-large.sc-ptc-title h4.sc-ptc-title,div.xxxx-large.sc-ptc-title h5.sc-ptc-title,div.xxxx-large.sc-ptc-title h6.sc-ptc-title{font-size:var(--ptc-font-size-xxxx-large)}}div.xx-large-allbp.sc-ptc-title h1.sc-ptc-title,div.xx-large-allbp.sc-ptc-title h2.sc-ptc-title,div.xx-large-allbp.sc-ptc-title h3.sc-ptc-title,div.xx-large-allbp.sc-ptc-title h4.sc-ptc-title,div.xx-large-allbp.sc-ptc-title h5.sc-ptc-title,div.xx-large-allbp.sc-ptc-title h6.sc-ptc-title{font-size:var(--ptc-font-size-xx-large)}div.xxxx-large-allbp.sc-ptc-title h1.sc-ptc-title,div.xxxx-large-allbp.sc-ptc-title h2.sc-ptc-title,div.xxxx-large-allbp.sc-ptc-title h3.sc-ptc-title,div.xxxx-large-allbp.sc-ptc-title h4.sc-ptc-title,div.xxxx-large-allbp.sc-ptc-title h5.sc-ptc-title,div.xxxx-large-allbp.sc-ptc-title h6.sc-ptc-title{font-size:var(--ptc-font-size-xxxx-large)}div.xxxx-large-desktop.sc-ptc-title h1.sc-ptc-title,div.xxxx-large-desktop.sc-ptc-title h2.sc-ptc-title,div.xxxx-large-desktop.sc-ptc-title h3.sc-ptc-title,div.xxxx-large-desktop.sc-ptc-title h4.sc-ptc-title,div.xxxx-large-desktop.sc-ptc-title h5.sc-ptc-title,div.xxxx-large-desktop.sc-ptc-title h6.sc-ptc-title{font-size:var(--ptc-font-size-xxx-large)}@media only screen and (min-width: 992px){div.xxxx-large-desktop.sc-ptc-title h1.sc-ptc-title,div.xxxx-large-desktop.sc-ptc-title h2.sc-ptc-title,div.xxxx-large-desktop.sc-ptc-title h3.sc-ptc-title,div.xxxx-large-desktop.sc-ptc-title h4.sc-ptc-title,div.xxxx-large-desktop.sc-ptc-title h5.sc-ptc-title,div.xxxx-large-desktop.sc-ptc-title h6.sc-ptc-title{font-size:var(--ptc-font-size-xxxx-large)}}div.xxxx-large-store.sc-ptc-title h1.sc-ptc-title,div.xxxx-large-store.sc-ptc-title h2.sc-ptc-title,div.xxxx-large-store.sc-ptc-title h3.sc-ptc-title,div.xxxx-large-store.sc-ptc-title h4.sc-ptc-title,div.xxxx-large-store.sc-ptc-title h5.sc-ptc-title,div.xxxx-large-store.sc-ptc-title h6.sc-ptc-title{font-size:var(--ptc-font-size-xxx-large)}@media only screen and (min-width: 992px){div.xxxx-large-store.sc-ptc-title h1.sc-ptc-title,div.xxxx-large-store.sc-ptc-title h2.sc-ptc-title,div.xxxx-large-store.sc-ptc-title h3.sc-ptc-title,div.xxxx-large-store.sc-ptc-title h4.sc-ptc-title,div.xxxx-large-store.sc-ptc-title h5.sc-ptc-title,div.xxxx-large-store.sc-ptc-title h6.sc-ptc-title{font-size:var(--ptc-font-size-xxxx-large)}}div.densest.sc-ptc-title h1.sc-ptc-title,div.densest.sc-ptc-title h2.sc-ptc-title,div.densest.sc-ptc-title h3.sc-ptc-title,div.densest.sc-ptc-title h4.sc-ptc-title,div.densest.sc-ptc-title h5.sc-ptc-title,div.densest.sc-ptc-title h6.sc-ptc-title{line-height:var(--ptc-line-height-densest)}div.denser.sc-ptc-title h1.sc-ptc-title,div.denser.sc-ptc-title h2.sc-ptc-title,div.denser.sc-ptc-title h3.sc-ptc-title,div.denser.sc-ptc-title h4.sc-ptc-title,div.denser.sc-ptc-title h5.sc-ptc-title,div.denser.sc-ptc-title h6.sc-ptc-title{line-height:var(--ptc-line-height-denser)}div.dense.sc-ptc-title h1.sc-ptc-title,div.dense.sc-ptc-title h2.sc-ptc-title,div.dense.sc-ptc-title h3.sc-ptc-title,div.dense.sc-ptc-title h4.sc-ptc-title,div.dense.sc-ptc-title h5.sc-ptc-title,div.dense.sc-ptc-title h6.sc-ptc-title{line-height:var(--ptc-line-height-dense)}div.normal.sc-ptc-title h1.sc-ptc-title,div.normal.sc-ptc-title h2.sc-ptc-title,div.normal.sc-ptc-title h3.sc-ptc-title,div.normal.sc-ptc-title h4.sc-ptc-title,div.normal.sc-ptc-title h5.sc-ptc-title,div.normal.sc-ptc-title h6.sc-ptc-title{line-height:var(--ptc-line-height-normal)}div.loose.sc-ptc-title h1.sc-ptc-title,div.loose.sc-ptc-title h2.sc-ptc-title,div.loose.sc-ptc-title h3.sc-ptc-title,div.loose.sc-ptc-title h4.sc-ptc-title,div.loose.sc-ptc-title h5.sc-ptc-title,div.loose.sc-ptc-title h6.sc-ptc-title{line-height:var(--ptc-line-height-loose)}div.looser.sc-ptc-title h1.sc-ptc-title,div.looser.sc-ptc-title h2.sc-ptc-title,div.looser.sc-ptc-title h3.sc-ptc-title,div.looser.sc-ptc-title h4.sc-ptc-title,div.looser.sc-ptc-title h5.sc-ptc-title,div.looser.sc-ptc-title h6.sc-ptc-title{line-height:var(--ptc-line-height-looser)}div.paragraph.sc-ptc-title h1.sc-ptc-title,div.paragraph.sc-ptc-title h2.sc-ptc-title,div.paragraph.sc-ptc-title h3.sc-ptc-title,div.paragraph.sc-ptc-title h4.sc-ptc-title,div.paragraph.sc-ptc-title h5.sc-ptc-title,div.paragraph.sc-ptc-title h6.sc-ptc-title{line-height:var(--ptc-line-height-paragraph)}div.black.sc-ptc-title h1.sc-ptc-title,div.black.sc-ptc-title h2.sc-ptc-title,div.black.sc-ptc-title h3.sc-ptc-title,div.black.sc-ptc-title h4.sc-ptc-title,div.black.sc-ptc-title h5.sc-ptc-title,div.black.sc-ptc-title h6.sc-ptc-title{color:var(--color-black)}div.white.sc-ptc-title h1.sc-ptc-title,div.white.sc-ptc-title h2.sc-ptc-title,div.white.sc-ptc-title h3.sc-ptc-title,div.white.sc-ptc-title h4.sc-ptc-title,div.white.sc-ptc-title h5.sc-ptc-title,div.white.sc-ptc-title h6.sc-ptc-title{color:var(--color-white)}div.gray-1.sc-ptc-title h1.sc-ptc-title,div.gray-1.sc-ptc-title h2.sc-ptc-title,div.gray-1.sc-ptc-title h3.sc-ptc-title,div.gray-1.sc-ptc-title h4.sc-ptc-title,div.gray-1.sc-ptc-title h5.sc-ptc-title,div.gray-1.sc-ptc-title h6.sc-ptc-title{color:var(--color-gray-01)}div.gray.sc-ptc-title h1.sc-ptc-title,div.gray.sc-ptc-title h2.sc-ptc-title,div.gray.sc-ptc-title h3.sc-ptc-title,div.gray.sc-ptc-title h4.sc-ptc-title,div.gray.sc-ptc-title h5.sc-ptc-title,div.gray.sc-ptc-title h6.sc-ptc-title{color:var(--color-gray-10)}div.gray-darker.sc-ptc-title h1.sc-ptc-title,div.gray-darker.sc-ptc-title h2.sc-ptc-title,div.gray-darker.sc-ptc-title h3.sc-ptc-title,div.gray-darker.sc-ptc-title h4.sc-ptc-title,div.gray-darker.sc-ptc-title h5.sc-ptc-title,div.gray-darker.sc-ptc-title h6.sc-ptc-title{color:var(--color-gray-11)}div.ellipsis-boxing.sc-ptc-title h1.sc-ptc-title,div.ellipsis-boxing.sc-ptc-title h2.sc-ptc-title,div.ellipsis-boxing.sc-ptc-title h3.sc-ptc-title,div.ellipsis-boxing.sc-ptc-title h4.sc-ptc-title,div.ellipsis-boxing.sc-ptc-title h5.sc-ptc-title,div.ellipsis-boxing.sc-ptc-title h6.sc-ptc-title{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;overflow-wrap:break-word;padding-bottom:0}div.block.sc-ptc-title h1.sc-ptc-title,div.block.sc-ptc-title h2.sc-ptc-title,div.block.sc-ptc-title h3.sc-ptc-title,div.block.sc-ptc-title h4.sc-ptc-title,div.block.sc-ptc-title h5.sc-ptc-title,div.block.sc-ptc-title h6.sc-ptc-title{display:block}";
+
+const PtcTitle = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.isPlmHub = false;
+    this.type = 'h2';
+    this.textAlign = undefined;
+    this.upperline = 'dotted';
+    this.titleShadow = undefined;
+    this.titleColor = 'gray';
+    this.titleMargin = undefined;
+    this.titleWeight = undefined;
+    this.titleSize = undefined;
+    this.titleHeight = 'densest';
+    this.styles = undefined;
+    this.ellipsisLineCutoff = undefined;
+    this.titleDisplay = 'inline-block';
+  }
+  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 (index.h(index.Host, null, this.styles && index.h("style", null, this.styles), index.h("div", { class: classMap }, index.h(TagType, { style: cutOff }, index.h("slot", null)))));
+  }
+  getCssClassMap() {
+    return {
+      [this.textAlign]: !!this.textAlign ? true : false,
+      [this.upperline]: true,
+      [this.isPlmHub ? 'is-plm-hub' : 'is-standard']: true,
+      [this.titleMargin]: !!this.titleMargin ? true : false,
+      [this.titleShadow]: !!this.titleShadow ? true : false,
+      [this.titleWeight]: !!this.titleWeight ? true : false,
+      [this.titleSize]: !!this.titleSize ? true : false,
+      [this.titleHeight]: !!this.titleHeight ? true : false,
+      [this.titleColor]: !!this.titleColor ? true : false,
+      ['ellipsis-boxing']: this.ellipsisLineCutoff && this.ellipsisLineCutoff > 0,
+      [this.titleDisplay]: !!this.titleDisplay ? true : false,
+    };
+  }
+  getLineCuttoff() {
+    let result;
+    if (this.ellipsisLineCutoff && this.ellipsisLineCutoff > 0) {
+      result = {
+        ['-webkit-line-clamp']: `${this.ellipsisLineCutoff}`,
+      };
+    }
+    return result;
+  }
+};
+PtcTitle.style = ptcTitleCss;
+
+exports.embedded_form = EmbeddedForm;
+exports.max_width_container = MaxWidthContainer;
+exports.ptc_button = PtcButton;
+exports.ptc_data_lookup = PtcDataLookup;
 exports.ptc_form_checkbox = PtcFormCheckbox;
 exports.ptc_select = PtcSelect;
+exports.ptc_spacer = PtcSpacer;
 exports.ptc_textfield = PtcTextfield;
+exports.ptc_title = PtcTitle;