@ptcwebops/ptcw-design 2.7.7 → 2.7.8

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

@@ -1,351 +1,351 @@
-import { h, Host } from '@stencil/core';
-import { MDCTextField } from '@material/textfield';
-import intlTelInput from 'intl-tel-input';
-export class PtcTextfield {
-  constructor() {
-    this.phoneValidity = 'validating';
-    this.fieldId = undefined;
-    this.type = 'text';
-    this.required = true;
-    this.ptcMaxLength = undefined;
-    this.labelText = 'Email';
-    this.helpertext = 'Please enter a value';
-    this.disabled = false;
-    this.name = 'email';
-    this.ptcDataEloquaName = undefined;
-    this.inputValue = '';
-  }
-  handleInput(event) {
-    this.inputValue = event.target.value;
-    this.setHelperText();
-  }
-  inputBlurHandler() {
-    // console.log(event.target)
-    // this.getPhoneValidation();
-    this.setErrorBackground();
-    setTimeout(() => {
-      this.getPhoneValidation();
-    }, 100);
-  }
-  componentDidLoad() {
-    this.mdcTextfieldComponent = MDCTextField.attachTo(this.mdcTextfield);
-    if (this.fieldId === 'contact-phone' && this.name === 'phone') {
-      this.iti = intlTelInput(this.customInput, {
-        separateDialCode: true,
-        initialCountry: 'us',
-        nationalMode: true,
-        utilsScript: 'https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/18.2.1/js/utils.min.js', // Required for formatting/validation
-      });
-    }
-  }
-  getPhoneValidation() {
-    if (this.fieldId === 'contact-phone' && this.name === 'phone') {
-      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');
-        }
-        // console.log("text field class list: " + this.mdcTextfield.className)
-      }
-      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');
-        }
-        // console.log("text field class list: " + this.mdcTextfield.className);
-        // console.log("this class list: " + this.el.className)
-      }
-      // console.log('hello!');
-    }
-  }
-  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.name === '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.name === 'firstname' || this.name === 'lastname') {
-      validationPattern = '[A-Za-z ]+';
-    }
-    return validationPattern;
-  }
-  setHelperText() {
-    if (this.type === 'email' && this.name === 'email') {
-      if (this.customInput.validity.valueMissing) {
-        this.helpertext = 'Email is required.';
-      }
-      else if (this.customInput.validity.typeMismatch) {
-        this.helpertext = 'Please enter a valid email.';
-      }
-    }
-    else if (this.name === 'firstname') {
-      if (this.customInput.validity.valueMissing) {
-        this.helpertext = 'Please enter your first name.';
-      }
-      else if (this.customInput.validity.patternMismatch) {
-        this.helpertext = 'Please check your first name';
-      }
-    }
-    else if (this.name === 'lastname') {
-      if (this.customInput.validity.valueMissing) {
-        this.helpertext = 'Please enter your last name.';
-      }
-      else if (this.customInput.validity.patternMismatch) {
-        this.helpertext = 'Please check your last name';
-      }
-    }
-    else if (this.fieldId === 'contact-phone') {
-      if (this.iti) {
-        if (this.inputValue === '') {
-          this.helpertext = 'Phone number is required';
-        }
-        else if (!this.iti.isValidNumber()) {
-          this.helpertext = 'Phone number is invalid';
-        }
-      }
-    }
-  }
-  render() {
-    return (h(Host, { class: `ptc-text-field 
-        ${this.fieldId === 'contact-phone' ? 'phone-field-style' : ''}` }, 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;
-      } }, (this.getInputClassName() ? { class: this.getInputClassName() } : null), { type: this.type }, (this.required ? { required: true } : null), (this.ptcMaxLength ? { maxlength: this.ptcMaxLength } : null), { "aria-controls": this.name, "aria-describedby": this.name, "data-eloqua-name": this.ptcDataEloquaName, value: this.inputValue }, (this.getValidationPattern() ? { pattern: this.getValidationPattern() } : 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.name }, 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.ptcMaxLength ? (h("div", { class: "mdc-text-field-character-counter" }, this.inputValue.length, " / ", this.ptcMaxLength)) : null)));
-  }
-  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": "'Please enter a value'"
-      },
-      "disabled": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "disabled",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "name": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "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
-      },
-      "inputValue": {
-        "type": "string",
-        "mutable": true,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "input-value",
-        "reflect": false,
-        "defaultValue": "''"
-      }
-    };
-  }
-  static get elementRef() { return "el"; }
-  static get listeners() {
-    return [{
-        "name": "input",
-        "method": "handleInput",
-        "target": undefined,
-        "capture": false,
-        "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';
+export class PtcTextfield {
+  constructor() {
+    this.phoneValidity = 'validating';
+    this.fieldId = undefined;
+    this.type = 'text';
+    this.required = true;
+    this.ptcMaxLength = undefined;
+    this.labelText = 'Email';
+    this.helpertext = 'Please enter a value';
+    this.disabled = false;
+    this.name = 'email';
+    this.ptcDataEloquaName = undefined;
+    this.inputValue = '';
+  }
+  handleInput(event) {
+    this.inputValue = event.target.value;
+    this.setHelperText();
+  }
+  inputBlurHandler() {
+    // console.log(event.target)
+    // this.getPhoneValidation();
+    this.setErrorBackground();
+    setTimeout(() => {
+      this.getPhoneValidation();
+    }, 100);
+  }
+  componentDidLoad() {
+    this.mdcTextfieldComponent = MDCTextField.attachTo(this.mdcTextfield);
+    if (this.fieldId === 'contact-phone' && this.name === 'phone') {
+      this.iti = intlTelInput(this.customInput, {
+        separateDialCode: true,
+        initialCountry: 'us',
+        nationalMode: true,
+        utilsScript: 'https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/18.2.1/js/utils.min.js', // Required for formatting/validation
+      });
+    }
+  }
+  getPhoneValidation() {
+    if (this.fieldId === 'contact-phone' && this.name === 'phone') {
+      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');
+        }
+        // console.log("text field class list: " + this.mdcTextfield.className)
+      }
+      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');
+        }
+        // console.log("text field class list: " + this.mdcTextfield.className);
+        // console.log("this class list: " + this.el.className)
+      }
+      // console.log('hello!');
+    }
+  }
+  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.name === '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.name === 'firstname' || this.name === 'lastname') {
+      validationPattern = '[A-Za-z ]+';
+    }
+    return validationPattern;
+  }
+  setHelperText() {
+    if (this.type === 'email' && this.name === 'email') {
+      if (this.customInput.validity.valueMissing) {
+        this.helpertext = 'Email is required.';
+      }
+      else if (this.customInput.validity.typeMismatch) {
+        this.helpertext = 'Please enter a valid email.';
+      }
+    }
+    else if (this.name === 'firstname') {
+      if (this.customInput.validity.valueMissing) {
+        this.helpertext = 'Please enter your first name.';
+      }
+      else if (this.customInput.validity.patternMismatch) {
+        this.helpertext = 'Please check your first name';
+      }
+    }
+    else if (this.name === 'lastname') {
+      if (this.customInput.validity.valueMissing) {
+        this.helpertext = 'Please enter your last name.';
+      }
+      else if (this.customInput.validity.patternMismatch) {
+        this.helpertext = 'Please check your last name';
+      }
+    }
+    else if (this.fieldId === 'contact-phone') {
+      if (this.iti) {
+        if (this.inputValue === '') {
+          this.helpertext = 'Phone number is required';
+        }
+        else if (!this.iti.isValidNumber()) {
+          this.helpertext = 'Phone number is invalid';
+        }
+      }
+    }
+  }
+  render() {
+    return (h(Host, { class: `ptc-text-field 
+        ${this.fieldId === 'contact-phone' ? 'phone-field-style' : ''}` }, 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;
+      } }, (this.getInputClassName() ? { class: this.getInputClassName() } : null), { type: this.type }, (this.required ? { required: true } : null), (this.ptcMaxLength ? { maxlength: this.ptcMaxLength } : null), { "aria-controls": this.name, "aria-describedby": this.name, "data-eloqua-name": this.ptcDataEloquaName, value: this.inputValue }, (this.getValidationPattern() ? { pattern: this.getValidationPattern() } : 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.name }, 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.ptcMaxLength ? (h("div", { class: "mdc-text-field-character-counter" }, this.inputValue.length, " / ", this.ptcMaxLength)) : null)));
+  }
+  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": "'Please enter a value'"
+      },
+      "disabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "disabled",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "name": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "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
+      },
+      "inputValue": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "input-value",
+        "reflect": false,
+        "defaultValue": "''"
+      }
+    };
+  }
+  static get elementRef() { return "el"; }
+  static get listeners() {
+    return [{
+        "name": "input",
+        "method": "handleInput",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "blur",
+        "method": "inputBlurHandler",
+        "target": undefined,
+        "capture": true,
+        "passive": false
+      }];
+  }
+}