@progressive-development/pd-forms 0.1.15 → 0.1.17

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

package/src/PdBaseInputElement.js

@@ -61,7 +61,7 @@ export class PdBaseInputElement extends PdBaseUIInput {
     this._input = this.shadowRoot.querySelector(this._getElementName());
   }
 
-  _onBlur() {
+  _onBlur(event) {
     this.dispatchEvent(
       new CustomEvent('focus-lost', {
         detail: {
@@ -71,6 +71,8 @@ export class PdBaseInputElement extends PdBaseUIInput {
         bubbles: true,
       })
     );
+
+    this._handleChangedValue(this._input.value, event, true, true);
   }
 
   _onKeyUp(event) {

package/src/PdBaseUiInput.js

@@ -156,7 +156,7 @@ import { SharedInputStyles } from './shared-input-styles.js';
         );
     }
 
-    _handleChangedValue(newValue, event, checkReturn) {
+    _handleChangedValue(newValue, event, checkReturn, showValidateMsg) {
         const changed = this.value !== newValue;
 
         this.value = newValue;
@@ -188,10 +188,13 @@ import { SharedInputStyles } from './shared-input-styles.js';
                     bubbles: true,
                 })
             );
-            // generate validation event after delay
-            clearTimeout(delayTimer);
-            delayTimer = setTimeout(this._generateValidateEvent.bind(this),
-                DELAY_WAIT_TIME_MS);
+
+            if (showValidateMsg) {
+                // generate validation event after delay
+                clearTimeout(delayTimer);
+                delayTimer = setTimeout(this._generateValidateEvent.bind(this),
+                    DELAY_WAIT_TIME_MS);
+            }
         }
     }
 

package/src/PdButton.js

@@ -46,7 +46,7 @@
  
          background-color: var(--pd-button-bg-col, var(--pd-default-dark-col));
          color: var(--pd-button-font-col, var(--pd-default-bg-col));
- 
+         border: var(--pd-button-border, 0);
          cursor: pointer;
  
          box-shadow: var(--pd-button-box-shadow, none);
@@ -59,6 +59,7 @@
          background-color: var(--pd-button-bg-col-hover, var(--pd-default-hover-col));
          color: var(--pd-button-font-col-hover, var(--pd-default-dark-col));
          transition: background-color 0.4s ease 0s;        
+         --pd-button-border: var(--pd-button-border-hover);
        }
 
        :host(:not([disabled])):host([primary]) .button-div:hover {         
@@ -80,6 +81,7 @@
          border-color: var(--pd-default-disabled-col);
          background-color: var(--pd-button-bg-col-disabled, var(--pd-default-disabled-col));
          color: var(--pd-button-font-col-disabled, black);
+         --pd-button-border: var(--pd-button-border-disabled);
        }
  
        /* Style for Button */

package/src/PdCheckbox.js

@@ -259,7 +259,7 @@ export class PdCheckbox extends PdBaseUIInput {
     
     // set changed value and generate events (key-pressed, enter-pressed, validateForm) 
     // if neccessary
-    this._handleChangedValue(checked ? 'false' : 'true', e);
+    this._handleChangedValue(checked ? 'false' : 'true', e, false, true);
 
     // TODO: Idee, alle input elemente haben gleichen event!
     /*

package/src/PdFormContainer.js

@@ -103,9 +103,6 @@ export class PdFormContainer extends PdBaseUI {
     // validate required fields TODO: Auf PdInputxxx beschränken
     reqEl.forEach(el => {
       const tmpEl = el;
-
-      console.log("Check EL: ", el._inputType, el.value);
-
       if (!el.value || el.value === "" || el.value === "false" || 
           (el._inputType === INPUT_TYPE_RANGE && el.value === '0')) {
         const erMsg = el.requiredMsg || msg('Eingabe erforderlich',{desc: '#pd.form.field.required#'});

package/src/PdRange.js

@@ -211,6 +211,7 @@ export class PdRange extends PdBaseUIInput {
             ?disabled="${this.disabled}"
             min="0" max="${this.max}" step="1"
             @change="${this._onChange}"
+            @input="${this._onChange}"
           />
         </div>
         ${this._renderErrorMsg()}
@@ -223,7 +224,7 @@ export class PdRange extends PdBaseUIInput {
     }
 
     _onChange(e) {
-      this._handleChangedValue(this._input.value, e, false);
+      this._handleChangedValue(this._input.value, e, false, true);
     }
 
 }