@progressive-development/pd-forms 0.0.58 → 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.58",
+  "version": "0.0.60",
   "main": "index.js",
   "module": "index.js",
   "scripts": {

package/src/PdFormContainer.js

@@ -25,20 +25,40 @@ export class PdFormContainer extends PdBaseUI {
         gap: 20px;
       }
       .hinweis {
-        background-color:#ffaa71;
+        font-family: var(--pd-font-content);
+        font-size:0.95rem;
+        
         padding:10px;
         color:#58585a;
-        border-radius: 1rem;
-        -moz-border-radius: 1rem;
+        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;
+      }
+
     `;
   }
 
   static get properties() {
     return {
       requiredFieldInfo: { type: Boolean},
+      _requiredFieldsValid: { type: Boolean, state: true},
     };
   }
 
@@ -52,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 />
@@ -62,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

@@ -88,6 +88,7 @@ export class PdSelect extends PdBaseUIInput {
           -moz-appearance: none;
           -webkit-appearance: none;
           appearance: none;
+          color: var(--my-input-placeholder-color);
 
           /* Define color */
           background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E');
@@ -120,10 +121,13 @@ export class PdSelect extends PdBaseUIInput {
         .select-css:focus {
           border-color: var(--my-border-color-focus);
           /* It'd be nice to use -webkit-focus-ring-color here but it doesn't work on box-shadow */
+          
+          /* Angaben nach MF DJK Umstellung entfernt
           box-shadow: 0 0 1px 3px rgba(59, 153, 252, 0.7);
           box-shadow: 0 0 0 3px -moz-mac-focusring;
           color: #222;
           outline: none;
+          */
         }
 
         .error .select-css {
@@ -274,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: {

package/src/shared-input-styles.js

@@ -30,19 +30,20 @@ export const SharedInputStyles = css`
     --my-lighter-background-color: var(--squi-lighter-color, #8caed8a1);
     --my-darker-background-color: var(--squi-darker-color, #012e649f);
     --my-background-gradient-color: var(--squi-third-color, #8caed8a1);
-    --my-error-background-color: var(--squi-error-background-color, #f6d4d4a1);
+    --my-error-background-color: var(--squi-error-background-color, #ffe8e8);
 
     /* Error colors for Elements Select, Input, Input Area */
-    --my-error-color: var(--squi-error-color, #d6242d);
+    --my-error-color: var(--squi-error-color, #cc2029);
 
     /* Text color input Elements Select, Input, Input Area */
     --my-text-color: var(--squi-text-color, #000000);
     --my-label-color: var(--squi-text-lable-color, #58585a);
+    --my-input-placeholder-color: var(--squi-input-placeholder-color:#474747);
+
     --my-font-family: var(--squi-display-font, 'Montserrat');
     --my-font-size: var(--squi-font-size, 1rem);
 
     --my-input-height: var(--squi-input-height, 2.4rem);
-
   }
 
   /* Describe input div (with icon) around input/select/area element */
@@ -167,7 +168,7 @@ export const SharedInputStyles = css`
 
   /* Fokus for input, area => select with own css.? */
   .input-style:focus {
-    border: var(--my-border-color-focus) 2px solid;
+    border: var(--my-border-color-focus) 3px solid;
     outline: 0;
   }