@ptcwebops/ptcw-design 0.4.9 → 0.5.1

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

@@ -1,118 +1,118 @@
-import { Component, h, Element, State } from '@stencil/core';
-import './validation/FormValidation.full.min.js';
-export class PtcForm {
-  handleChange(event) {
-    this.inputValue = event.target.value;
-    // if (event.target.validity.typeMismatch) {
-    //   console.log('this element is not valid')
-    // };
-    console.log(this.inputValue);
-  }
-  handleSelect(event) {
-    this.selectValue = event.target.value;
-    console.log(this.selectValue);
-  }
-  componentDidLoad() {
-    // const countryValue = (this.el.shadowRoot.getElementById("contact-country") as HTMLInputElement).value;
-    // console.log(countryValue);
-    //console.log(this.el.shadowRoot.querySelector('form'));
-    window.FormValidation.formValidation(this.el.querySelector('form'), {
-      fields: {
-        firstname: {
-          validators: {
-            notEmpty: {
-              message: '* The first name is required',
-            },
-            regexp: {
-              regexp: /^[a-zA-Z0-9_]+$/,
-              message: '* The username can only consist of alphabetical, number and underscore',
-            },
-          },
-        },
-        lastname: {
-          validators: {
-            notEmpty: {
-              message: '* The last name is required',
-            },
-            regexp: {
-              regexp: /^[a-zA-Z0-9_]+$/,
-              message: '* The username can only consist of alphabetical, number and underscore',
-            },
-          },
-        },
-        email: {
-          validators: {
-            notEmpty: {
-              message: '* Please enter your email',
-            },
-            emailAddress: {
-              message: '* The value is not a valid email address',
-            },
-          },
-        },
-        required: {
-          validators: {
-            notEmpty: {
-              message: '* This field is required',
-            },
-          },
-        },
-        phoneNumber: {
-          validators: {
-            // phone: {
-            //   country: function () {
-            //     return countryValue;
-            //   },
-            //   message: 'The value is not a valid phone number',
-            // },
-            notEmpty: {
-              message: '* phone number is required',
-            },
-          },
-        },
-        postalCode: {
-          validators: {
-            // zipCode: {
-            //     country: function () {
-            //         return countryValue;
-            //     },
-            //     message: 'The value is not a valid postal code',
-            // },
-            notEmpty: {
-              message: '* zipcode is required',
-            },
-          },
-        },
-      },
-      plugins: {
-        message: new FormValidation.plugins.Message({
-          clazz: '...',
-        }),
-        trigger: new FormValidation.plugins.Trigger(),
-        submitButton: new FormValidation.plugins.SubmitButton(),
-        defaultSubmit: new FormValidation.plugins.DefaultSubmit(),
-      },
-    });
-    //fv.revalidateField('phoneNumber')
-  }
-  render() {
-    return (h("form", { id: "loginForm", method: "POST", class: "loginForm" },
-      h("slot", null),
-      h("button", { type: "submit", class: "btn btn-primary" }, "Login")));
-  }
-  static get is() { return "ptc-form"; }
-  static get encapsulation() { return "scoped"; }
-  static get originalStyleUrls() { return {
-    "$": ["ptc-form.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["ptc-form.css"]
-  }; }
-  static get assetsDirs() { return ["validation"]; }
-  static get states() { return {
-    "value": {},
-    "inputValue": {},
-    "selectValue": {}
-  }; }
-  static get elementRef() { return "el"; }
-}
+import { Component, h, Element, State } from '@stencil/core';
+import './validation/FormValidation.full.min.js';
+export class PtcForm {
+  handleChange(event) {
+    this.inputValue = event.target.value;
+    // if (event.target.validity.typeMismatch) {
+    //   console.log('this element is not valid')
+    // };
+    console.log(this.inputValue);
+  }
+  handleSelect(event) {
+    this.selectValue = event.target.value;
+    console.log(this.selectValue);
+  }
+  componentDidLoad() {
+    // const countryValue = (this.el.shadowRoot.getElementById("contact-country") as HTMLInputElement).value;
+    // console.log(countryValue);
+    //console.log(this.el.shadowRoot.querySelector('form'));
+    window.FormValidation.formValidation(this.el.querySelector('form'), {
+      fields: {
+        firstname: {
+          validators: {
+            notEmpty: {
+              message: '* The first name is required',
+            },
+            regexp: {
+              regexp: /^[a-zA-Z0-9_]+$/,
+              message: '* The username can only consist of alphabetical, number and underscore',
+            },
+          },
+        },
+        lastname: {
+          validators: {
+            notEmpty: {
+              message: '* The last name is required',
+            },
+            regexp: {
+              regexp: /^[a-zA-Z0-9_]+$/,
+              message: '* The username can only consist of alphabetical, number and underscore',
+            },
+          },
+        },
+        email: {
+          validators: {
+            notEmpty: {
+              message: '* Please enter your email',
+            },
+            emailAddress: {
+              message: '* The value is not a valid email address',
+            },
+          },
+        },
+        required: {
+          validators: {
+            notEmpty: {
+              message: '* This field is required',
+            },
+          },
+        },
+        phoneNumber: {
+          validators: {
+            // phone: {
+            //   country: function () {
+            //     return countryValue;
+            //   },
+            //   message: 'The value is not a valid phone number',
+            // },
+            notEmpty: {
+              message: '* phone number is required',
+            },
+          },
+        },
+        postalCode: {
+          validators: {
+            // zipCode: {
+            //     country: function () {
+            //         return countryValue;
+            //     },
+            //     message: 'The value is not a valid postal code',
+            // },
+            notEmpty: {
+              message: '* zipcode is required',
+            },
+          },
+        },
+      },
+      plugins: {
+        message: new FormValidation.plugins.Message({
+          clazz: '...',
+        }),
+        trigger: new FormValidation.plugins.Trigger(),
+        submitButton: new FormValidation.plugins.SubmitButton(),
+        defaultSubmit: new FormValidation.plugins.DefaultSubmit(),
+      },
+    });
+    //fv.revalidateField('phoneNumber')
+  }
+  render() {
+    return (h("form", { id: "loginForm", method: "POST", class: "loginForm" },
+      h("slot", null),
+      h("button", { type: "submit", class: "btn btn-primary" }, "Login")));
+  }
+  static get is() { return "ptc-form"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() { return {
+    "$": ["ptc-form.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["ptc-form.css"]
+  }; }
+  static get assetsDirs() { return ["validation"]; }
+  static get states() { return {
+    "value": {},
+    "inputValue": {},
+    "selectValue": {}
+  }; }
+  static get elementRef() { return "el"; }
+}