@progressive-development/pd-forms 0.0.59 → 0.0.60

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.59",
+  "version": "0.0.60",
   "main": "index.js",
   "module": "index.js",
   "scripts": {

package/src/PdFormContainer.js

@@ -25,26 +25,40 @@ export class PdFormContainer extends PdBaseUI {
         gap: 20px;
       }
       .hinweis {
-        font-family: 'Poppins', serif;
+        font-family: var(--pd-font-content);
         font-size:0.95rem;
+        
+        padding:10px;
+        color:#58585a;
+        border-radius: var(--squi-border-radius, 0);
+        -moz-border-radius: var(--squi-border-radius, 0);
+        width:50%;
+        min-width:300px;
+      }
+
+      .filled {
+        border-left:4px solid #42a01c;
+        border-right:4px solid #42a01c;
+        border-top:1px solid #42a01c;
+        border-bottom:1px solid #42a01c;
+        background-color:#f5ffe8;
+      }
+
+      .unfilled {
         border-left:4px solid #cc2029;
         border-right:4px solid #cc2029;
         border-top:1px solid #cc2029;
         border-bottom:1px solid #cc2029;
         background-color:#ffe8e8;
-        padding:10px;
-        color:#58585a;
-        border-radius: 0.5rem;
-        -moz-border-radius: 0.5rem;
-        width:50%;
-        min-width:300px;
       }
+
     `;
   }
 
   static get properties() {
     return {
       requiredFieldInfo: { type: Boolean},
+      _requiredFieldsValid: { type: Boolean, state: true},
     };
   }
 
@@ -58,7 +72,7 @@ export class PdFormContainer extends PdBaseUI {
       <form>
         <slot></slot>
         ${this.requiredFieldInfo ? html` 
-        <p class="hinweis">
+        <p class="hinweis ${this._requiredFieldsValid ? 'filled' : 'unfilled'}">
           ${msg('* Pflichtfeld',{desc: '#pd.form.required.info#'})}
         </p>` : ''}
         <br />
@@ -68,21 +82,26 @@ export class PdFormContainer extends PdBaseUI {
 
   _validateForm(e) {
     
-    const reqEl = e.detail.singleElement ? [e.detail.singleElement] :
-      this.querySelectorAll("[required]");
+    const reqEl = this.querySelectorAll("[required]");
 
     // validate required fields TODO: Auf PdInputxxx beschränken
     reqEl.forEach(el => {
       const tmpEl = el;
-      if (!el.value || el.value === "") {
-        tmpEl.errorMsg = el.requiredMsg ||
-          msg('Eingabe erforderlich',{desc: '#pd.form.field.required#'});
-        e.detail.errorMap.set(el.id, tmpEl.errorMsg);
+      if (!el.value || el.value === "") {        
+        const erMsg = el.requiredMsg || msg('Eingabe erforderlich',{desc: '#pd.form.field.required#'});
+        if (!e.detail.singleElement || e.detail.singleElement === el) {
+          tmpEl.errorMsg = erMsg;
+        }
+        e.detail.errorMap.set(el.id, erMsg);
       } else {
-        tmpEl.errorMsg = "";
+        if (!e.detail.singleElement || e.detail.singleElement === el) {
+          tmpEl.errorMsg = "";
+        }
       }
     })
 
+    this._requiredFieldsValid = e.detail.errorMap.size === 0;
+
     // general validate method
     const validateByType = (fieldType, validFunc, invalidMsgTxt) => {
 

package/src/PdInput.js

@@ -175,7 +175,7 @@ export class PdInput extends PdBaseUIInput {
 
       Nachtrag: Nun auf interne propertie umgestellt, im Test...
       */
-      if (this.errorMsg.length > 0) {
+      // if (this.errorMsg.length > 0) {
         this.dispatchEvent(
           new CustomEvent('validate-form', {
             detail: {
@@ -186,7 +186,7 @@ export class PdInput extends PdBaseUIInput {
             bubbles: true,
           })
         );
-      }       
+      // }       
 
       this.dispatchEvent(
         new CustomEvent('key-pressed', {

package/src/PdInputArea.js

@@ -156,7 +156,17 @@ export class PdInputArea extends PdBaseUIInput {
       event.preventDefault();
     } else {
       // If any other key, fire 'key-pressed'
-      this.errorMsg = '';
+      this.dispatchEvent(
+        new CustomEvent('validate-form', {
+          detail: {
+            singleElement: this,              
+            errorMap: new Map()
+          },
+          composed: true,
+          bubbles: true,
+        })
+      );
+
       this.dispatchEvent(new CustomEvent('key-pressed', {
         detail: {
           value: this._input.value,

package/src/PdRadioGroup.js

@@ -76,7 +76,18 @@ export class PdRadioGroup extends LitElement {
           elCollection[keyValue].value = false;          
         }
         elCollection[keyValue].readonly = (elCollection[keyValue].value === 'true');        
-        this.errorMsg = '';
+        
+        this.dispatchEvent(
+          new CustomEvent('validate-form', {
+            detail: {
+              singleElement: this,              
+              errorMap: new Map()
+            },
+            composed: true,
+            bubbles: true,
+          })
+        );
+
       });
     });
 

package/src/PdSelect.js

@@ -278,7 +278,18 @@ export class PdSelect extends PdBaseUIInput {
 
   _onChange() {
     this.value = this._input.value;
-    this.errorMsg = '';
+    
+    this.dispatchEvent(
+      new CustomEvent('validate-form', {
+        detail: {
+          singleElement: this,              
+          errorMap: new Map()
+        },
+        composed: true,
+        bubbles: true,
+      })
+    );
+
     this.dispatchEvent(
       new CustomEvent('change-value', {
         detail: {