@progressive-development/pd-page 0.0.41 → 0.0.42

package/package.json

@@ -3,7 +3,7 @@
   "description": "Progressive development page helper, teaser, menu, footer.",
   "license": "SEE LICENSE IN LICENSE",
   "author": "PD Progressive Development",
-  "version": "0.0.41",
+  "version": "0.0.42",
   "main": "index.js",
   "module": "index.js",
   "scripts": {
@@ -17,9 +17,9 @@
     "storybook:build": "npm run analyze -- --exclude dist && build-storybook"
   },
   "dependencies": {
-    "@progressive-development/pd-contact": "0.0.15",
-    "@progressive-development/pd-dialog": "0.0.27",
-    "@progressive-development/pd-forms": "0.0.43",
+    "@progressive-development/pd-contact": "0.0.16",
+    "@progressive-development/pd-dialog": "0.0.28",
+    "@progressive-development/pd-forms": "0.0.44",
     "@progressive-development/pd-icon": "^0.0.9",
     "lit": "^2.0.2"
   },

package/src/PdContactUs.js

@@ -117,22 +117,12 @@ export class PdContactUs extends LitElement {
   static get properties() {
     return {
       contact: { type: Object },
-      _errorMap: { type: Object },
     };
   }
 
   constructor() {
     super();
-
-    this.contact = {};
-    this._errorMap = new Map();
-  }
-
-  firstUpdated() {
-    this.addEventListener('key-pressed', e => {
-      this._errorMap.set(e.detail.name, '');
-      super.requestUpdate();
-    });
+    this.contact = {};    
   }
 
   render() {
@@ -150,14 +140,14 @@ export class PdContactUs extends LitElement {
           </div>
 
           <div class="right-content">
-            <pd-form-container>
+            <pd-form-container id="contactFormId">
               <pd-form-row>
                 <pd-input
                   id="nameInputId"
                   class="quarter3"
                   placeHolder="Naam"
                   valueName="name"
-                  errorMsg="${this._getErrorMsg('name')}"
+                  required
                 ></pd-input>
               </pd-form-row>
 
@@ -167,7 +157,8 @@ export class PdContactUs extends LitElement {
                   class="quarter3"
                   placeHolder="Email"
                   valueName="mail"
-                  errorMsg="${this._getErrorMsg('mail')}"
+                  field-type="mail"
+                  required
                 ></pd-input>
               </pd-form-row>
 
@@ -177,7 +168,8 @@ export class PdContactUs extends LitElement {
                   class="quarter3"
                   placeHolder="Telefoon Nummer"
                   valueName="phone"
-                  errorMsg="${this._getErrorMsg('phone')}"
+                  field-type="phone"
+                  required
                 ></pd-input>
               </pd-form-row>
 
@@ -187,8 +179,8 @@ export class PdContactUs extends LitElement {
                   class="quarter3-area"
                   placeHolder="Type uw bericht hier"
                   rows="15"
+                  required
                   valueName="msg"
-                  errorMsg="${this._getErrorMsg('msg')}"
                 ></pd-input-area>
               </pd-form-row>
             </pd-form-container>
@@ -207,33 +199,22 @@ export class PdContactUs extends LitElement {
     this.shadowRoot.getElementById('msgInputId').clear();
   }
 
-  _sendMail() {
-    // get inpus
-    const name = this.shadowRoot.getElementById('nameInputId').value;
-    const email = this.shadowRoot.getElementById('mailInputId').value;
-    const phone = this.shadowRoot.getElementById('phoneInputId').value;
-    const msg = this.shadowRoot.getElementById('msgInputId').value;
+  _sendMail() {    
 
-    const newErrorMap = new Map();
-    if (!name || name === '') {
-      newErrorMap.set('name', 'Verplicht veld');
-    }
-    if (!email || email === '') {
-      newErrorMap.set('mail', 'Verplicht veld');
-    } else if (!PdContactUs._mailIsValid(email)) {
-      newErrorMap.set('mail', 'Invalid address');
-    }
-    if (!phone || phone === '') {
-      newErrorMap.set('phone', 'Verplicht veld');
-    } else if (!PdContactUs._phoneIsValid(phone)) {
-      newErrorMap.set('phone', 'Invalid phone number');
-    }
-    if (!msg || msg === '') {
-      newErrorMap.set('msg', 'Verplicht veld');
-    }
+    const detail = {
+      errorMap: new Map()
+    };
 
-    this._errorMap = newErrorMap;
-    if (newErrorMap.size === 0) {
+    // current wizard element
+    const curentStepEl = this.shadowRoot.getElementById("contactFormId");
+    curentStepEl.dispatchEvent(new CustomEvent('validate-form', { detail }));
+
+    if (detail.errorMap.size === 0) {
+
+      const name = this.shadowRoot.getElementById('nameInputId').value;
+      const email = this.shadowRoot.getElementById('mailInputId').value;
+      const phone = this.shadowRoot.getElementById('phoneInputId').value;
+      const msg = this.shadowRoot.getElementById('msgInputId').value;
       this.dispatchEvent(
         new CustomEvent('send-contact-request', {
           detail: {
@@ -244,18 +225,4 @@ export class PdContactUs extends LitElement {
     }
   }
 
-  _getErrorMsg(itemId) {
-    return this._errorMap.get(itemId) || '';
-  }
-
-  static _mailIsValid(email) {
-    const mValid = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
-    return mValid;
-  }
-
-  static _phoneIsValid(phone) {
-    // Valid +49 830 9001 | 49 221 123 | 08912379
-    const mValid = /^\+?[0-9 ]{7,15}$/.test(phone);
-    return mValid;
-  }
 }