@progressive-development/pd-forms 0.0.21 → 0.0.23

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

package/src/PdBaseUiInput.js

@@ -20,6 +20,7 @@ export class PdBaseUIInput extends PdBaseUI {
             readonly: { type: Boolean },        // readonly flag for element
             required: { type: Boolean },        // required flag for element
             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...)
@@ -41,6 +42,8 @@ export class PdBaseUIInput extends PdBaseUI {
         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

package/src/PdInput.js

@@ -104,13 +104,11 @@ export class PdInput extends PdBaseUIInput {
     this.icon = 'toggleCollapse';
     this.secret = false;
     this.key = '';
-
-    this._defaultRequiredChar = '*';
   }
 
   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.defaultRequiredChar : ''}</label>
       <div class="input ${classMap({ error: this.errorMsg.length > 0 })}">
         <pd-icon
           icon="toggleCollapse"

package/src/PdRadioGroup.js

@@ -39,6 +39,8 @@ export class PdRadioGroup extends LitElement {
   static get properties() {
     return {
       label: {type: String},
+      required: {type: Boolean},
+      defaultRequiredChar: { type: String },
       valueName: { type: String },
       errorMsg: {type: String}  // errorMsg (could set fronm outside for busines validation, internal validation=> todo)
     };
@@ -49,6 +51,8 @@ export class PdRadioGroup extends LitElement {
     this.label = '';
     this.valueName = '';
     this.errorMsg = '';
+
+    this.defaultRequiredChar = '*';
   }
 
   get value() {
@@ -87,7 +91,7 @@ export class PdRadioGroup extends LitElement {
 
   render() {
     return html`
-      <label>${this.label}</label>
+      <label>${this.label}${this.required ? this.defaultRequiredChar : ''}</label>
       <div class="group-style input ${classMap({'error': this.errorMsg.length > 0})}">      
         <slot></slot>        
       </div>      

package/src/PdSelect.js

@@ -199,15 +199,15 @@ export class PdSelect extends PdBaseUIInput {
   }
 
   render() {
-    return html`
-      <label for="${this.id}Select">${this.label}</label>
+    return html`      
+      <label for="${this.id}Select">${this.label}${this.required ? this._defaultRequiredChar : ''}</label>
       <div class="input ${classMap({ error: this.errorMsg.length > 0 })}">
         <pd-icon
           icon="toggleCollapse"
           @click="${this._onIconClick}"
         ></pd-icon>
         <select
-          id="${this.id}Input"
+          id="${this.id}Select"
           class="select-css input-style ${this.gradient ? 'gradient' : ''}"
           ?disabled="${this.disabled}"
           @change="${this._onChange}"