@ptcwebops/ptcw-design 3.7.0 → 3.7.2

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

@@ -1,602 +1,602 @@
-import { h, Host } from '@stencil/core';
-import { MDCTextField } from '@material/textfield';
-import intlTelInput from 'intl-tel-input';
-import { ValidationMessages } from '../../utils/validation-messages';
-import { getLanguageFromURL } from '../../utils/utils';
-export class PtcTextfield {
-  constructor() {
-    this.phoneValidity = 'validating';
-    this.matchStatus = true;
-    this.fieldId = undefined;
-    this.type = 'text';
-    this.required = true;
-    this.ptcMaxLength = undefined;
-    this.labelText = 'Email';
-    this.helpertext = '';
-    this.infoText = undefined;
-    this.alertText = undefined;
-    this.alertTextContent = undefined;
-    this.disabled = false;
-    this.fieldName = 'email';
-    this.ptcDataEloquaName = undefined;
-    this.ptcDataTargetEloquaName = undefined;
-    this.inputValue = '';
-    this.customValidation = undefined;
-    this.language = 'en';
-    this.ignoreBlindSubmit = false;
-  }
-  handleInput(event) {
-    this.inputValue = event.target.value;
-    if (this.customInput.id === 'confirm-email') {
-      //console.log("this field is confirm email field!");
-      const emailInput = document.getElementById('contact-email');
-      if (emailInput.value === this.customInput.value) {
-        this.customInput.setCustomValidity('');
-        this.matchStatus = true;
-      }
-      else if (this.customInput.value && emailInput.value !== this.customInput.value) {
-        this.customInput.setCustomValidity('Email addresses must match.');
-        this.matchStatus = false;
-        //this.helpertext = "Email addresses must match."
-      }
-      //this.customInput.reportValidity();
-    }
-    this.setHelperText();
-  }
-  handleFocus(event) {
-    const target = event.target;
-    if (target.tagName === 'INPUT') {
-      this.inputValue = event.target.value;
-      this.setHelperText();
-    }
-  }
-  inputBlurHandler() {
-    // console.log(event.target)
-    // this.getPhoneValidation();
-    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();
-  }
-  componentDidLoad() {
-    if (this.type !== 'hidden') {
-      this.mdcTextfieldComponent = MDCTextField.attachTo(this.mdcTextfield);
-    }
-    // try{
-    //   // debugger;
-    //   this.mdcTextfieldComponent = MDCTextField.attachTo(this.mdcTextfield);
-    // }catch(error){
-    //   debugger;
-    //   console.error('An error found here!', error.message);
-    // }
-    if (this.fieldId === 'contact-phone' && this.fieldName === 'phone') {
-      this.iti = intlTelInput(this.customInput, {
-        separateDialCode: true,
-        initialCountry: 'auto',
-        nationalMode: true,
-        geoIpLookup: callback => {
-          fetch('https://ipapi.co/json')
-            .then(res => res.json())
-            .then(data => callback(data.country_code))
-            .catch(() => callback('us'));
-        },
-        utilsScript: 'https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/18.2.1/js/utils.min.js', // Required for formatting/validation
-      });
-    }
-  }
-  getValidationMessage(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.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');
-        }
-      }
-      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);
-        }
-        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');
-          }
-        }
-      }
-    }
-  }
-  setErrorBackground() {
-    if (this.customInput.checkValidity()) {
-      if (this.el.classList.contains('invalid-field')) {
-        this.el.classList.remove('invalid-field');
-      }
-    }
-    else if (!this.customInput.checkValidity()) {
-      if (!this.el.classList.contains('invalid-field')) {
-        this.el.classList.add('invalid-field');
-      }
-    }
-  }
-  getInputClassName() {
-    let className = 'mdc-text-field__input';
-    if (this.type === 'tel' && this.fieldName === 'phone') {
-      className = `${className}  intl-tel-input`;
-    }
-    else if (this.type === 'text' && this.ptcMaxLength) {
-      className = `${className}  mdc-text-field--with-internal-counter`;
-    }
-    return className;
-  }
-  getValidationPattern() {
-    let validationPattern = '';
-    // if (this.type === 'email' && this.name === 'email') {
-    //   validationPattern = '[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+.[a-zA-Z]{2,}';
-    // }
-    if (this.fieldName === 'firstname' || this.fieldName === 'lastname') {
-      validationPattern = '^[^!*@&$¥£€>#^~+=<>%]+$';
-    }
-    return validationPattern;
-  }
-  setHelperText() {
-    this.helpertext = this.getValidationMessage('required');
-    //console.log('default: ' + this.getValidationMessage('required'));
-    if (this.type === 'email' && this.fieldName === 'email') {
-      if (this.customInput.validity.valueMissing) {
-        this.helpertext = this.getValidationMessage('email');
-      }
-      else if (this.customInput.validity.typeMismatch) {
-        this.helpertext = this.getValidationMessage('validemail');
-      }
-    }
-    else if (this.fieldName === 'firstname') {
-      if (this.customInput.validity.valueMissing) {
-        this.helpertext = this.getValidationMessage('required');
-      }
-      else if (this.customInput.validity.patternMismatch) {
-        this.helpertext = this.getValidationMessage('firstname');
-      }
-    }
-    else if (this.fieldName === 'lastname') {
-      if (this.customInput.validity.valueMissing) {
-        this.helpertext = this.getValidationMessage('required');
-      }
-      else if (this.customInput.validity.patternMismatch) {
-        this.helpertext = this.getValidationMessage('lastname');
-      }
-    }
-    else if (this.fieldId === 'contact-phone') {
-      if (this.iti) {
-        if (this.inputValue === '' && this.required) {
-          this.helpertext = this.getValidationMessage('tel');
-        }
-        else if (!this.iti.isValidNumber()) {
-          this.helpertext = this.getValidationMessage('validtel');
-        }
-      }
-    }
-    else if (this.fieldId === "confirm-email") {
-      if (!this.matchStatus && !!this.customInput.value) {
-        this.helpertext = this.getValidationMessage('confirmemail');
-      }
-    }
-  }
-  render() {
-    return (h(Host, { class: `ptc-text-field 
-        ${this.fieldId === 'contact-phone' ? 'phone-field-style' : ''}
-        ${this.type === 'hidden' ? 'textfield-hidden' : ''}` }, this.type !== 'hidden' ? ([
-      h("label", { class: "ptc-label" }, this.labelText),
-      h("div", { class: `mdc-text-field mdc-text-field--outlined mdc-text-field--no-label
-          ${this.fieldId === 'contact-phone' ? 'intl-phone-adjustments' : ''}`, ref: mdcTextfield => {
-          this.mdcTextfield = mdcTextfield;
-        } }, h("span", { class: "mdc-notched-outline ptc-textfield-outline" }, h("span", { class: "mdc-notched-outline__leading" }), h("span", { class: "mdc-notched-outline__trailing" })), h("input", Object.assign({ ref: customInput => {
-          this.customInput = customInput;
-        }, id: this.fieldId }, (this.getInputClassName() ? { class: this.getInputClassName() } : null), { type: this.type }, (this.required ? { required: true } : null), (this.ptcMaxLength ? { maxlength: this.ptcMaxLength } : null), { "aria-controls": this.fieldName, "aria-describedby": this.fieldName, "data-eloqua-name": this.ptcDataEloquaName, "data-target-eloqua-name": this.ptcDataTargetEloquaName, value: this.inputValue, name: this.fieldName }, (this.getValidationPattern() ? { pattern: this.getValidationPattern() } : null), (this.ignoreBlindSubmit ? { ignoreBlindSubmit: true } : null)))),
-      h("div", { class: `mdc-text-field-helper-line
-                   ${!!this.ptcMaxLength ? 'field-with-counter' : ''}` }, h("div", { class: "mdc-text-field-helper-text mdc-text-field-helper-text--validation-msg", id: this.fieldName }, h("svg", { class: "input-error-svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("g", { "clip-path": "url(#clip0_12_1424)" }, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M11.3156 0L16 4.68444V11.3156L11.3156 16H4.68444L0 11.3156V4.68444L4.68444 0H11.3156ZM8 10.4C7.36 10.4 6.84444 10.9156 6.84444 11.5556C6.84444 12.1956 7.36 12.7111 8 12.7111C8.64 12.7111 9.15556 12.1956 9.15556 11.5556C9.15556 10.9156 8.64 10.4 8 10.4ZM8.88889 3.55556H7.11111V8.88889H8.88889V3.55556Z", fill: "#AF3231" })), h("defs", null, h("clipPath", { id: "clip0_12_1424" }, h("rect", { width: "16", height: "16", fill: "white" })))), this.helpertext), this.infoText ? h("div", { class: "mdc-text-field-helper-text mdc-text-field-helper-text--info-msg" }, this.infoText) : null, this.ptcMaxLength ? (h("div", { class: "mdc-text-field-character-counter" }, this.inputValue.length, " / ", this.ptcMaxLength)) : null),
-      /* Alert message */
-      h("div", { class: "ptc-text-field-alert-line" }, !!this.alertText ? (h("div", { class: "mdc-text-field-helper-text--alert-msg" }, h("svg", { class: "alert-msg-svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("g", { id: "Info", "clip-path": "url(#clip0_227_7670)" }, h("path", { id: "Vector", "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M16 8C16 12.4183 12.4183 16 8 16C3.58172 16 0 12.4183 0 8C0 3.58172 3.58172 0 8 0C12.4183 0 16 3.58172 16 8ZM9 6V13H7V6H9ZM8 5C8.55229 5 9 4.55228 9 4C9 3.44772 8.55229 3 8 3C7.44772 3 7 3.44772 7 4C7 4.55228 7.44772 5 8 5Z", fill: "#197BC0" })), h("defs", null, h("clipPath", { id: "clip0_227_7670" }, h("rect", { width: "16", height: "16", fill: "white" })))), this.alertText)) : null, !!this.alertText && this.alertTextContent ? h("div", { class: "mdc-text-field-helper-text--alert-content-msg" }, this.alertTextContent) : null),
-    ]) : (h("input", { type: "hidden", "data-eloqua-name": this.ptcDataEloquaName, value: this.inputValue }))));
-  }
-  static get is() { return "ptc-textfield"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["ptc-textfield.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["ptc-textfield.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "fieldId": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "field-id",
-        "reflect": false
-      },
-      "type": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "type",
-        "reflect": false,
-        "defaultValue": "'text'"
-      },
-      "required": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "required",
-        "reflect": false,
-        "defaultValue": "true"
-      },
-      "ptcMaxLength": {
-        "type": "number",
-        "mutable": false,
-        "complexType": {
-          "original": "number",
-          "resolved": "number",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "ptc-max-length",
-        "reflect": false
-      },
-      "labelText": {
-        "type": "string",
-        "mutable": true,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "label-text",
-        "reflect": false,
-        "defaultValue": "'Email'"
-      },
-      "helpertext": {
-        "type": "string",
-        "mutable": true,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "helpertext",
-        "reflect": false,
-        "defaultValue": "''"
-      },
-      "infoText": {
-        "type": "string",
-        "mutable": true,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "info-text",
-        "reflect": false
-      },
-      "alertText": {
-        "type": "string",
-        "mutable": true,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "alert-text",
-        "reflect": false
-      },
-      "alertTextContent": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "alert-text-content",
-        "reflect": false
-      },
-      "disabled": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "disabled",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "fieldName": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "field-name",
-        "reflect": false,
-        "defaultValue": "'email'"
-      },
-      "ptcDataEloquaName": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "ptc-data-eloqua-name",
-        "reflect": false
-      },
-      "ptcDataTargetEloquaName": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "ptc-data-target-eloqua-name",
-        "reflect": false
-      },
-      "inputValue": {
-        "type": "string",
-        "mutable": true,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "input-value",
-        "reflect": false,
-        "defaultValue": "''"
-      },
-      "customValidation": {
-        "type": "unknown",
-        "mutable": false,
-        "complexType": {
-          "original": "(input: HTMLInputElement) => string",
-          "resolved": "(input: HTMLInputElement) => string",
-          "references": {
-            "HTMLInputElement": {
-              "location": "global"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        }
-      },
-      "ignoreBlindSubmit": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "ignore-blind-submit",
-        "reflect": false,
-        "defaultValue": "false"
-      }
-    };
-  }
-  static get states() {
-    return {
-      "language": {}
-    };
-  }
-  static get methods() {
-    return {
-      "syncCountry": {
-        "complexType": {
-          "signature": "(countryCode: string) => Promise<void>",
-          "parameters": [{
-              "tags": [],
-              "text": ""
-            }],
-          "references": {
-            "Promise": {
-              "location": "global"
-            }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "",
-          "tags": []
-        }
-      },
-      "validateTextField": {
-        "complexType": {
-          "signature": "() => Promise<void>",
-          "parameters": [],
-          "references": {
-            "Promise": {
-              "location": "global"
-            }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "",
-          "tags": []
-        }
-      }
-    };
-  }
-  static get elementRef() { return "el"; }
-  static get listeners() {
-    return [{
-        "name": "input",
-        "method": "handleInput",
-        "target": undefined,
-        "capture": true,
-        "passive": false
-      }, {
-        "name": "focus",
-        "method": "handleFocus",
-        "target": undefined,
-        "capture": true,
-        "passive": false
-      }, {
-        "name": "blur",
-        "method": "inputBlurHandler",
-        "target": undefined,
-        "capture": true,
-        "passive": false
-      }];
-  }
-}
+import { h, Host } from '@stencil/core';
+import { MDCTextField } from '@material/textfield';
+import intlTelInput from 'intl-tel-input';
+import { ValidationMessages } from '../../utils/validation-messages';
+import { getLanguageFromURL } from '../../utils/utils';
+export class PtcTextfield {
+  constructor() {
+    this.phoneValidity = 'validating';
+    this.matchStatus = true;
+    this.fieldId = undefined;
+    this.type = 'text';
+    this.required = true;
+    this.ptcMaxLength = undefined;
+    this.labelText = 'Email';
+    this.helpertext = '';
+    this.infoText = undefined;
+    this.alertText = undefined;
+    this.alertTextContent = undefined;
+    this.disabled = false;
+    this.fieldName = 'email';
+    this.ptcDataEloquaName = undefined;
+    this.ptcDataTargetEloquaName = undefined;
+    this.inputValue = '';
+    this.customValidation = undefined;
+    this.language = 'en';
+    this.ignoreBlindSubmit = false;
+  }
+  handleInput(event) {
+    this.inputValue = event.target.value;
+    if (this.customInput.id === 'confirm-email') {
+      //console.log("this field is confirm email field!");
+      const emailInput = document.getElementById('contact-email');
+      if (emailInput.value === this.customInput.value) {
+        this.customInput.setCustomValidity('');
+        this.matchStatus = true;
+      }
+      else if (this.customInput.value && emailInput.value !== this.customInput.value) {
+        this.customInput.setCustomValidity('Email addresses must match.');
+        this.matchStatus = false;
+        //this.helpertext = "Email addresses must match."
+      }
+      //this.customInput.reportValidity();
+    }
+    this.setHelperText();
+  }
+  handleFocus(event) {
+    const target = event.target;
+    if (target.tagName === 'INPUT') {
+      this.inputValue = event.target.value;
+      this.setHelperText();
+    }
+  }
+  inputBlurHandler() {
+    // console.log(event.target)
+    // this.getPhoneValidation();
+    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();
+  }
+  componentDidLoad() {
+    if (this.type !== 'hidden') {
+      this.mdcTextfieldComponent = MDCTextField.attachTo(this.mdcTextfield);
+    }
+    // try{
+    //   // debugger;
+    //   this.mdcTextfieldComponent = MDCTextField.attachTo(this.mdcTextfield);
+    // }catch(error){
+    //   debugger;
+    //   console.error('An error found here!', error.message);
+    // }
+    if (this.fieldId === 'contact-phone' && this.fieldName === 'phone') {
+      this.iti = intlTelInput(this.customInput, {
+        separateDialCode: true,
+        initialCountry: 'auto',
+        nationalMode: true,
+        geoIpLookup: callback => {
+          fetch('https://ipapi.co/json')
+            .then(res => res.json())
+            .then(data => callback(data.country_code))
+            .catch(() => callback('us'));
+        },
+        utilsScript: 'https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/18.2.1/js/utils.min.js', // Required for formatting/validation
+      });
+    }
+  }
+  getValidationMessage(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.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');
+        }
+      }
+      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);
+        }
+        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');
+          }
+        }
+      }
+    }
+  }
+  setErrorBackground() {
+    if (this.customInput.checkValidity()) {
+      if (this.el.classList.contains('invalid-field')) {
+        this.el.classList.remove('invalid-field');
+      }
+    }
+    else if (!this.customInput.checkValidity()) {
+      if (!this.el.classList.contains('invalid-field')) {
+        this.el.classList.add('invalid-field');
+      }
+    }
+  }
+  getInputClassName() {
+    let className = 'mdc-text-field__input';
+    if (this.type === 'tel' && this.fieldName === 'phone') {
+      className = `${className}  intl-tel-input`;
+    }
+    else if (this.type === 'text' && this.ptcMaxLength) {
+      className = `${className}  mdc-text-field--with-internal-counter`;
+    }
+    return className;
+  }
+  getValidationPattern() {
+    let validationPattern = '';
+    // if (this.type === 'email' && this.name === 'email') {
+    //   validationPattern = '[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+.[a-zA-Z]{2,}';
+    // }
+    if (this.fieldName === 'firstname' || this.fieldName === 'lastname') {
+      validationPattern = '^[^!*@&$¥£€>#^~+=<>%]+$';
+    }
+    return validationPattern;
+  }
+  setHelperText() {
+    this.helpertext = this.getValidationMessage('required');
+    //console.log('default: ' + this.getValidationMessage('required'));
+    if (this.type === 'email' && this.fieldName === 'email') {
+      if (this.customInput.validity.valueMissing) {
+        this.helpertext = this.getValidationMessage('email');
+      }
+      else if (this.customInput.validity.typeMismatch) {
+        this.helpertext = this.getValidationMessage('validemail');
+      }
+    }
+    else if (this.fieldName === 'firstname') {
+      if (this.customInput.validity.valueMissing) {
+        this.helpertext = this.getValidationMessage('required');
+      }
+      else if (this.customInput.validity.patternMismatch) {
+        this.helpertext = this.getValidationMessage('firstname');
+      }
+    }
+    else if (this.fieldName === 'lastname') {
+      if (this.customInput.validity.valueMissing) {
+        this.helpertext = this.getValidationMessage('required');
+      }
+      else if (this.customInput.validity.patternMismatch) {
+        this.helpertext = this.getValidationMessage('lastname');
+      }
+    }
+    else if (this.fieldId === 'contact-phone') {
+      if (this.iti) {
+        if (this.inputValue === '' && this.required) {
+          this.helpertext = this.getValidationMessage('tel');
+        }
+        else if (!this.iti.isValidNumber()) {
+          this.helpertext = this.getValidationMessage('validtel');
+        }
+      }
+    }
+    else if (this.fieldId === "confirm-email") {
+      if (!this.matchStatus && !!this.customInput.value) {
+        this.helpertext = this.getValidationMessage('confirmemail');
+      }
+    }
+  }
+  render() {
+    return (h(Host, { class: `ptc-text-field 
+        ${this.fieldId === 'contact-phone' ? 'phone-field-style' : ''}
+        ${this.type === 'hidden' ? 'textfield-hidden' : ''}` }, this.type !== 'hidden' ? ([
+      h("label", { class: "ptc-label" }, this.labelText),
+      h("div", { class: `mdc-text-field mdc-text-field--outlined mdc-text-field--no-label
+          ${this.fieldId === 'contact-phone' ? 'intl-phone-adjustments' : ''}`, ref: mdcTextfield => {
+          this.mdcTextfield = mdcTextfield;
+        } }, h("span", { class: "mdc-notched-outline ptc-textfield-outline" }, h("span", { class: "mdc-notched-outline__leading" }), h("span", { class: "mdc-notched-outline__trailing" })), h("input", Object.assign({ ref: customInput => {
+          this.customInput = customInput;
+        }, id: this.fieldId }, (this.getInputClassName() ? { class: this.getInputClassName() } : null), { type: this.type }, (this.required ? { required: true } : null), (this.ptcMaxLength ? { maxlength: this.ptcMaxLength } : null), { "aria-controls": this.fieldName, "aria-describedby": this.fieldName, "data-eloqua-name": this.ptcDataEloquaName, "data-target-eloqua-name": this.ptcDataTargetEloquaName, value: this.inputValue, name: this.fieldName }, (this.getValidationPattern() ? { pattern: this.getValidationPattern() } : null), (this.ignoreBlindSubmit ? { ignoreBlindSubmit: true } : null)))),
+      h("div", { class: `mdc-text-field-helper-line
+                   ${!!this.ptcMaxLength ? 'field-with-counter' : ''}` }, h("div", { class: "mdc-text-field-helper-text mdc-text-field-helper-text--validation-msg", id: this.fieldName }, h("svg", { class: "input-error-svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("g", { "clip-path": "url(#clip0_12_1424)" }, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M11.3156 0L16 4.68444V11.3156L11.3156 16H4.68444L0 11.3156V4.68444L4.68444 0H11.3156ZM8 10.4C7.36 10.4 6.84444 10.9156 6.84444 11.5556C6.84444 12.1956 7.36 12.7111 8 12.7111C8.64 12.7111 9.15556 12.1956 9.15556 11.5556C9.15556 10.9156 8.64 10.4 8 10.4ZM8.88889 3.55556H7.11111V8.88889H8.88889V3.55556Z", fill: "#AF3231" })), h("defs", null, h("clipPath", { id: "clip0_12_1424" }, h("rect", { width: "16", height: "16", fill: "white" })))), this.helpertext), this.infoText ? h("div", { class: "mdc-text-field-helper-text mdc-text-field-helper-text--info-msg" }, this.infoText) : null, this.ptcMaxLength ? (h("div", { class: "mdc-text-field-character-counter" }, this.inputValue.length, " / ", this.ptcMaxLength)) : null),
+      /* Alert message */
+      h("div", { class: "ptc-text-field-alert-line" }, !!this.alertText ? (h("div", { class: "mdc-text-field-helper-text--alert-msg" }, h("svg", { class: "alert-msg-svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("g", { id: "Info", "clip-path": "url(#clip0_227_7670)" }, h("path", { id: "Vector", "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M16 8C16 12.4183 12.4183 16 8 16C3.58172 16 0 12.4183 0 8C0 3.58172 3.58172 0 8 0C12.4183 0 16 3.58172 16 8ZM9 6V13H7V6H9ZM8 5C8.55229 5 9 4.55228 9 4C9 3.44772 8.55229 3 8 3C7.44772 3 7 3.44772 7 4C7 4.55228 7.44772 5 8 5Z", fill: "#197BC0" })), h("defs", null, h("clipPath", { id: "clip0_227_7670" }, h("rect", { width: "16", height: "16", fill: "white" })))), this.alertText)) : null, !!this.alertText && this.alertTextContent ? h("div", { class: "mdc-text-field-helper-text--alert-content-msg" }, this.alertTextContent) : null),
+    ]) : (h("input", { type: "hidden", "data-eloqua-name": this.ptcDataEloquaName, value: this.inputValue }))));
+  }
+  static get is() { return "ptc-textfield"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["ptc-textfield.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["ptc-textfield.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "fieldId": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "field-id",
+        "reflect": false
+      },
+      "type": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "type",
+        "reflect": false,
+        "defaultValue": "'text'"
+      },
+      "required": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "required",
+        "reflect": false,
+        "defaultValue": "true"
+      },
+      "ptcMaxLength": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "ptc-max-length",
+        "reflect": false
+      },
+      "labelText": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "label-text",
+        "reflect": false,
+        "defaultValue": "'Email'"
+      },
+      "helpertext": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "helpertext",
+        "reflect": false,
+        "defaultValue": "''"
+      },
+      "infoText": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "info-text",
+        "reflect": false
+      },
+      "alertText": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "alert-text",
+        "reflect": false
+      },
+      "alertTextContent": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "alert-text-content",
+        "reflect": false
+      },
+      "disabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "disabled",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "fieldName": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "field-name",
+        "reflect": false,
+        "defaultValue": "'email'"
+      },
+      "ptcDataEloquaName": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "ptc-data-eloqua-name",
+        "reflect": false
+      },
+      "ptcDataTargetEloquaName": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "ptc-data-target-eloqua-name",
+        "reflect": false
+      },
+      "inputValue": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "input-value",
+        "reflect": false,
+        "defaultValue": "''"
+      },
+      "customValidation": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "(input: HTMLInputElement) => string",
+          "resolved": "(input: HTMLInputElement) => string",
+          "references": {
+            "HTMLInputElement": {
+              "location": "global"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        }
+      },
+      "ignoreBlindSubmit": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "ignore-blind-submit",
+        "reflect": false,
+        "defaultValue": "false"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "language": {}
+    };
+  }
+  static get methods() {
+    return {
+      "syncCountry": {
+        "complexType": {
+          "signature": "(countryCode: string) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
+      },
+      "validateTextField": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
+      }
+    };
+  }
+  static get elementRef() { return "el"; }
+  static get listeners() {
+    return [{
+        "name": "input",
+        "method": "handleInput",
+        "target": undefined,
+        "capture": true,
+        "passive": false
+      }, {
+        "name": "focus",
+        "method": "handleFocus",
+        "target": undefined,
+        "capture": true,
+        "passive": false
+      }, {
+        "name": "blur",
+        "method": "inputBlurHandler",
+        "target": undefined,
+        "capture": true,
+        "passive": false
+      }];
+  }
+}