@progressive-development/pd-forms 0.1.16 → 0.1.19

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.16",
+  "version": "0.1.19",
   "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/PdFormRow.js

@@ -29,7 +29,8 @@ export class PdFormRow extends PdBaseUI {
       min-width: var(--my-row-width);        
       max-width: 100%;      
       gap: var(--my-gap);           
-      align-items: flex-start;           
+      align-items: flex-start;      
+      justify-content: var(--pd-form-row-align, left);     
       padding-top: var(--pd-form-row-padding-top, 10px);
     }
 

package/src/PdRange.js

@@ -224,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);
     }
 
 }