@progressive-development/pd-forms 0.0.46 → 0.0.48

package/package.json

@@ -3,7 +3,7 @@
   "description": "Webcomponent pd-forms following open-wc recommendations",
   "license": "SEE LICENSE IN LICENSE",
   "author": "PD Progressive Development",
-  "version": "0.0.46",
+  "version": "0.0.48",
   "main": "index.js",
   "module": "index.js",
   "scripts": {

package/src/PdFormContainer.js

@@ -59,8 +59,11 @@ export class PdFormContainer extends LitElement {
 
   _validateForm(e) {
     
+    const reqEl = e.detail.singleElement ? [e.detail.singleElement] :
+      this.querySelectorAll("[required]");
+
     // validate required fields TODO: Auf PdInputxxx beschränken
-    this.querySelectorAll("[required]").forEach(el => {
+    reqEl.forEach(el => {
       const tmpEl = el;
       if (!el.value || el.value === "") {
         tmpEl.errorMsg = el.requiredMsg || "Field is required"; // TODO: msg required field local
@@ -72,7 +75,16 @@ export class PdFormContainer extends LitElement {
 
     // general validate method
     const validateByType = (fieldType, validFunc, example) => {
-      this.querySelectorAll(`[field-type=${fieldType}]`).forEach(el => {
+
+      if (e.detail.singleElement &&
+        e.detail.singleElement.getAttribute("field-type") !== fieldType) {
+          return;
+      }
+
+      const reqSpecEl = e.detail.singleElement ? [e.detail.singleElement] :
+        this.querySelectorAll(`[field-type=${fieldType}]`);      
+
+      reqSpecEl.forEach(el => {
         const tmpEl = el;
         // if not already added as required field
         if (!e.detail.errorMap.has(el.id) && el.value && el.value.length > 0) {
@@ -91,6 +103,10 @@ export class PdFormContainer extends LitElement {
     validateByType("phone", PdFormContainer._phoneIsValid, "+32 494 667085");
     validateByType("vat", PdFormContainer._vatIsValid, "BE0123456789");
     validateByType("number", (val) => !Number.isNaN(val), "only numbers");
+
+    if (e.detail.singleElement) {
+      e.stopPropagation();
+    }
   }
 
   static _mailIsValid(email) {

package/src/PdInput.js

@@ -145,7 +145,8 @@ export class PdInput extends PdBaseUIInput {
     this.value = this._input.value;
 
     // If Enter key pressed, fire 'enter-pressed'
-    if (Number(event.keyCode) === 13) {
+    const eventKeyCodeNumber = Number(event.keyCode);
+    if (eventKeyCodeNumber === 13) {
       this.dispatchEvent(
         new CustomEvent('enter-pressed', {
           detail: {
@@ -156,7 +157,7 @@ export class PdInput extends PdBaseUIInput {
         })
       );
       event.preventDefault();
-    } else {
+    } else if (eventKeyCodeNumber !== 9) {
       // If any other key, fire 'key-pressed'
 
       // Interessante Stelle, die error msg wird von außen gesetzt
@@ -174,7 +175,18 @@ export class PdInput extends PdBaseUIInput {
 
       Nachtrag: Nun auf interne propertie umgestellt, im Test...
       */
-      this.errorMsg = '';
+      if (this.errorMsg.length > 0) {
+        this.dispatchEvent(
+          new CustomEvent('validate-form', {
+            detail: {
+              singleElement: this,              
+              errorMap: new Map()
+            },
+            composed: true,
+            bubbles: true,
+          })
+        );
+      }       
 
       this.dispatchEvent(
         new CustomEvent('key-pressed', {