@progressive-development/pd-forms 0.0.43 → 0.0.45

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

package/src/PdBaseUiInput.js

@@ -3,72 +3,81 @@
  * Copyright (c) 2021 PD Progressive Development UG. All rights reserved.
  */
 
-import { PdBaseUI } from './PdBaseUi.js';
+ import { PdBaseUI } from './PdBaseUi.js';
 
-export const INPUT_TYPE_TEXT = 1;
-export const INPUT_TYPE_SELECT = 2;
-export const INPUT_TYPE_CHECK = 3;
-export const INPUT_TYPE_RANGE = 4;
-export const INPUT_TYPE_AREA = 5;
-
-export class PdBaseUIInput extends PdBaseUI {
-
-    static get properties() {
-        return {            
-            gradient: { type: Boolean },        // true for gradient background
-            disabled: { type: Boolean },        // disabled flag for element
-            readonly: { type: Boolean },        // readonly flag for element
-            required: { type: Boolean },        // required flag for element
-            requiredMsg: { type: String },      // specific error msg for required field
-            valueName: { type: String },            
-            defaultRequiredChar: { type: String },            
-            defaultValue: { type: String },     // default value for input element (used for reset) TODO: Das hier ggf. automatisch mit erstem gesetzten Wert füllen?
-            label: { type: String },            // label text for input
-            value: {type: String},              // current value (set from outside) TODO: Typ (Object, Number, Txt, Bool...)
-            errorMsg: {type: String},           // errorMsg (could set fronm outside for busines validation, internal validation=> todo)
-            _inputType: {type: Number},         // number value for type (text, select, range....), set constructor of sub-class
-            _input: { type: Object }            // reference for input html element            
-        };
-    }
-
-    constructor() {
-        super();        
-        this.gradient = false;
-        this.disabled = false;
-        this.readonly = false;
-        this.defaultValue = '';
-        this.label = '';
-        this.value = '';
-        this.errorMsg = '';        
-        this._inputType = -1;
-        this._input = {};
-        this.valueName = '';
-
-        this.defaultRequiredChar = '*';
-    }    
-
-    // Test: Clear input with value => Dann in BasisKlasse und alle leiten von Basis UI Element ab
-    clear() {
-        this.value = '';
-        this._input.value = this.value;
-    }
-
-    // Test: Reset input with value
-    reset() {        
-        this.value = this.defaultValue || '';
-        this._input.value = this.value;
-    }
-    
-    /*
-    get value() {
-        return this._value;
-    }
-
-    set value(newValue) {
-        console.info("Meine Werte vor Set _value, input.value, newValue: ", this._value,  this._input.value, newValue);
-        this._value = newValue;
-        this._input.value = newValue;        
-        console.info("Meine Werte nach Set: ", this._value,  this._input.value, newValue);
-    }
-    */
-}
+ export const INPUT_TYPE_TEXT = 1;
+ export const INPUT_TYPE_SELECT = 2;
+ export const INPUT_TYPE_CHECK = 3;
+ export const INPUT_TYPE_RANGE = 4;
+ export const INPUT_TYPE_AREA = 5;
+ 
+ export class PdBaseUIInput extends PdBaseUI {
+ 
+     static get properties() {
+         return {            
+             gradient: { type: Boolean },        // true for gradient background
+             disabled: { type: Boolean },        // disabled flag for element
+             readonly: { type: Boolean },        // readonly flag for element
+             required: { type: Boolean },        // required flag for element
+             requiredMsg: { type: String },      // specific error msg for required field
+             valueName: { type: String },            
+             defaultRequiredChar: { type: String },            
+             defaultValue: { type: String },     // default value for input element (used for reset) TODO: Das hier ggf. automatisch mit erstem gesetzten Wert füllen?
+             label: { type: String },            // label text for input
+             value: {type: String},              // current value (set from outside) TODO: Typ (Object, Number, Txt, Bool...)
+             _errorMsg: {type: String, state: true},           // errorMsg (could set fronm outside for busines validation, internal validation=> todo)
+             _inputType: {type: Number},         // number value for type (text, select, range....), set constructor of sub-class
+             _input: { type: Object }            // reference for input html element            
+         };
+     }
+ 
+     constructor() {
+         super();        
+         this.gradient = false;
+         this.disabled = false;
+         this.readonly = false;
+         this.defaultValue = '';
+         this.label = '';
+         this.value = '';
+         this._errorMsg = '';        
+         this._inputType = -1;
+         this._input = {};
+         this.valueName = '';
+ 
+         this.defaultRequiredChar = '*';
+     }    
+ 
+     // Test: Clear input with value => Dann in BasisKlasse und alle leiten von Basis UI Element ab
+     clear() {
+         this.value = '';
+         this._input.value = this.value;
+     }
+ 
+     // Test: Reset input with value
+     reset() {        
+         this.value = this.defaultValue || '';
+         this._input.value = this.value;
+     }
+ 
+     get errorMsg() {
+         return this._errorMsg;
+     }
+ 
+     set errorMsg(msg) {
+         this._errorMsg = msg;
+     }
+     
+     /*
+     get value() {
+         return this._value;
+     }
+ 
+     set value(newValue) {
+         console.info("Meine Werte vor Set _value, input.value, newValue: ", this._value,  this._input.value, newValue);
+         this._value = newValue;
+         this._input.value = newValue;        
+         console.info("Meine Werte nach Set: ", this._value,  this._input.value, newValue);
+     }
+     */
+ }
+ 

package/src/PdInput.js

@@ -108,7 +108,7 @@ export class PdInput extends PdBaseUIInput {
 
   render() {
     return html`
-      <label for="${this.id}Input">${this.label}${this.required ? this.defaultRequiredChar : ''}</label>
+      <label for="${this.id}Input">${this.label}${this.required && this.label ? this.defaultRequiredChar : ''}</label>
       <div class="input ${classMap({ error: this.errorMsg.length > 0 })}">
         <pd-icon
           icon="toggleCollapse"
@@ -171,7 +171,11 @@ export class PdInput extends PdBaseUIInput {
       } 
 
       Aufrund der gennanten Problematik auskommentiert, ein evenlistener sorgt nun dafür
+
+      Nachtrag: Nun auf interne propertie umgestellt, im Test...
       */
+      this._errorMsg = '';
+
       this.dispatchEvent(
         new CustomEvent('key-pressed', {
           detail: {

package/src/PdInputArea.js

@@ -111,10 +111,10 @@ export class PdInputArea extends PdBaseUIInput {
     this.rows = 2;    
     this.value = '';
   }
-  
+
   render() {
     return html`
-    <label for="${this.id}InputArea">${this.label}</label>
+    <label for="${this.id}InputArea">${this.label}${this.required && this.label ? this.defaultRequiredChar : ''}</label>
     <div class="input ${classMap({'error': this.errorMsg.length > 0})}">
       <pd-icon icon="toggleCollapse" 
         @click="${this._onIconClick}"></pd-icon>
@@ -156,7 +156,7 @@ export class PdInputArea extends PdBaseUIInput {
       event.preventDefault();
     } else {
       // If any other key, fire 'key-pressed'
-      // this.errorMsg = ''; change with handler now...
+      this._errorMsg = '';
       this.dispatchEvent(new CustomEvent('key-pressed', {
         detail: {
           value: this._input.value,

package/src/PdRadioGroup.js

@@ -75,9 +75,8 @@ export class PdRadioGroup extends LitElement {
         if (elCollection[keyValue] !== e.target) {
           elCollection[keyValue].value = false;          
         }
-        elCollection[keyValue].readonly = (elCollection[keyValue].value === 'true');
-        // do with event handler, change from outside...
-        // this.errorMsg = '';
+        elCollection[keyValue].readonly = (elCollection[keyValue].value === 'true');        
+        this._errorMsg = '';
       });
     });
 
@@ -91,7 +90,7 @@ export class PdRadioGroup extends LitElement {
 
   render() {
     return html`
-      <label>${this.label}${this.required ? this.defaultRequiredChar : ''}</label>
+      <label>${this.label}${this.required && this.label ? this.defaultRequiredChar : ''}</label>
       <div class="group-style input ${classMap({'error': this.errorMsg.length > 0})}">      
         <slot></slot>        
       </div>      

package/src/PdSelect.js

@@ -199,8 +199,8 @@ export class PdSelect extends PdBaseUIInput {
   }
 
   render() {
-    return html`      
-      <label for="${this.id}Select">${this.label}${this.required ? this.defaultRequiredChar : ''}</label>
+    return html`
+      <label for="${this.id}Select">${this.label}${this.required && this.label ? this.defaultRequiredChar : ''}</label>
       <div class="input ${classMap({ error: this.errorMsg.length > 0 })}">
         <pd-icon
           icon="toggleCollapse"
@@ -274,7 +274,7 @@ export class PdSelect extends PdBaseUIInput {
 
   _onChange() {
     this.value = this._input.value;
-    // this.errorMsg = ''; do not change public attribute inside component => progress, handle with event handler at the moment
+    this._errorMsg = '';
     this.dispatchEvent(
       new CustomEvent('change-value', {
         detail: {