@progressive-development/pd-forms 0.1.24 → 0.1.26

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

package/src/PdCheckbox.js

@@ -236,8 +236,10 @@ export class PdCheckbox extends PdBaseUIInput {
     const checked = (this.value === 'true');
     const classMapVal = {'disabled': this.disabled, 'switch': this.isSwitch, 'readonly': this.readonly, 'div-container': true};
     const aClassMap = {'switch-paddle': this.isSwitch, 'checkbox': !this.isSwitch, 'isChecked': checked, 'isUnchecked': !checked};    
+    const inputId = `${this.id}Check`;
 
     return html`
+      ${this._renderLabel(inputId)}
       <div @click="${this.onClick}" class="${classMap(classMapVal)}">
         <a href="#" @click="${this.linkClick}" @keypress="${this.onKeyPress}" class="${classMap(aClassMap)}">
           <pd-icon icon="checkBox" class="small" ?activeIcon="${checked}"></pd-icon>
@@ -259,7 +261,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, false, true);
+    this._handleChangedValue(checked ? 'false' : 'true', e);
 
     // TODO: Idee, alle input elemente haben gleichen event!
     /*

package/src/PdFormContainer.js

@@ -73,7 +73,9 @@ export class PdFormContainer extends PdBaseUI {
   static get properties() {
     return {
       requiredFieldInfo: { type: Boolean},
+      commonError: { type: String},
       _requiredFieldsValid: { type: Boolean, state: true},
+
     };
   }
 
@@ -88,8 +90,9 @@ export class PdFormContainer extends PdBaseUI {
         <slot></slot>
         ${this.requiredFieldInfo ? html`
         <div class="validation-info-container">
-          <p class="validation-info ${this._requiredFieldsValid ? 'filled' : 'unfilled'}">
-            ${msg('* Pflichtfeld',{desc: '#pd.form.required.info#'})}
+          <p class="validation-info ${(this._requiredFieldsValid && (!this.commonError || this.commonError === "")) ? 'filled' : 'unfilled'}">
+            ${this.commonError || (this._requiredFieldsValid ? msg('* Pflichtfelder ausgefüllt',{desc: '#pd.form.required.valid#'}) 
+              : msg('* Pflichtfeld',{desc: '#pd.form.required.info#'}))}
           </p>
         </div>` : ''}
       </form>
@@ -149,6 +152,7 @@ export class PdFormContainer extends PdBaseUI {
       msg("Format +49123 123456 verwenden",{desc: '#pd.form.field.invalid.phone#'}));
     validateByType("vat", PdFormContainer._vatIsValid,  
       msg("Format DE0123456789 verwenden",{desc: '#pd.form.field.invalid.vat#'}));
+    // eslint-disable-next-line no-restricted-globals
     validateByType("number", (val) => !isNaN(val),   
       msg("Nur Zahlen erlaubt",{desc: '#pd.form.field.invalid.number#'}));
 
@@ -173,4 +177,4 @@ export class PdFormContainer extends PdBaseUI {
     return mValid;
   }
 
-}
+}

package/src/PdFormRow.js

@@ -23,61 +23,53 @@ export class PdFormRow extends PdBaseUI {
       --my-row-width: 800px;
       --my-gap: 20px;
       display: flex;
-      flex: 1 1 100%;
+      flex: 1 1 100%;      
       /*margin: 0 0 .5rem 0;*/
       box-sizing: border-box;
       min-width: var(--my-row-width);        
       max-width: 100%;      
       gap: var(--my-gap);           
-      align-items: flex-start;           
-      justify-content: var(--pd-form-row-allign, left);
-      padding-top: var(--pd-form-row-padding-top, 10px);
+      align-items: flex-start;                 
+      padding-top: var(--pd-form-row-padding-top, 10px);      
     }
 
     ::slotted(.full-size) {
       --pd-input-field-width: 100%;
-      --pd-button-width: var(--pd-input-field-width);
     }
 
     ::slotted(.quarter1) {      
       --pd-input-field-width: calc(var(--my-row-width) * 0.25  - (var(--my-gap) * 0.75));
-      --pd-button-width: var(--pd-input-field-width);
+      
     }
     
     ::slotted(.quarter1-area) {      
       --pd-input-field-width: calc((var(--my-row-width) - 5px) * 0.25  - (var(--my-gap) * 0.75));
-      --pd-button-width: var(--pd-input-field-width);
       
     }
 
     ::slotted(.quarter2) {      
-      --pd-input-field-width: calc((var(--my-row-width) * 0.5) - (var(--my-gap) / 2));     
-      --pd-button-width: var(--pd-input-field-width);      
+      --pd-input-field-width: calc((var(--my-row-width) * 0.5) - (var(--my-gap) / 2));          
+      
     }
 
     ::slotted(.quarter2-area) {      
       --pd-input-field-width: calc(((var(--my-row-width) - 8px) * 0.5) - (var(--my-gap) / 2));
-      --pd-button-width: var(--pd-input-field-width);      
     }
 
     ::slotted(.quarter3) {      
       --pd-input-field-width: calc(var(--my-row-width) * 0.75  - (var(--my-gap) * 0.25));          
-      --pd-button-width: var(--pd-input-field-width);      
     }    
     /* Area is longer? Scrollbar? */
     ::slotted(.quarter3-area) {
       --pd-input-field-width: calc((var(--my-row-width) - 10px) * 0.75  - (var(--my-gap) * 0.25));          
-      --pd-button-width: var(--pd-input-field-width);      
     }
 
     ::slotted(.quarter4) {
-      --pd-input-field-width: var(--my-row-width);         
-      --pd-button-width: var(--pd-input-field-width);             
+      --pd-input-field-width: var(--my-row-width);                
     }   
     /* Area is longer? Scrollbar? */
     ::slotted(.quarter4-area) {
       --pd-input-field-width: calc(var(--my-row-width) - 15px);
-      --pd-button-width: var(--pd-input-field-width);      
     }
 
     @media (max-width: 930px) {            

package/src/PdRange.js

@@ -42,6 +42,11 @@ export class PdRange extends PdBaseUIInput {
            * Style for SLIDER                                 *           
            ****************************************************/
 
+          :host([disabled]) {
+            --pd-range-bg-col: grey;
+            --pd-range-thumb-col: lightgrey;            
+          }
+          
           input[type=range] {
             -webkit-appearance: none; /* Hides the slider so that custom slider can be made */
             width: var(--pd-input-field-width, 250px); /* Specific width is required for Firefox. */
@@ -49,7 +54,7 @@ export class PdRange extends PdBaseUIInput {
 
             background-color: var(--pd-range-bg-col, var(--pd-default-col));
             padding: 0.5rem;
-            height: var(--pd-input-field-height, 2.2rem);
+            height: var(--pd-input-field-range-height, 1.7rem);
             box-sizing: border-box;
 
             border-radius: 0.75rem;
@@ -82,7 +87,7 @@ export class PdRange extends PdBaseUIInput {
 
             /* redundant, check if it is possible to extract common definitions */
             cursor: pointer;
-            height: 20px;
+            height: 15px;
             width: 39px;
             background: var(--pd-range-thumb-col, var(--pd-default-hover-col));
             border: 1px solid var(--pd-default-dark-col);
@@ -96,7 +101,7 @@ export class PdRange extends PdBaseUIInput {
           input[type=range]::-moz-range-thumb {
             /* redundant, check if it is possible to extract common definitions */
             cursor: pointer;
-            height: 20px;
+            height: 15px;
             width: 39px;
             background: var(--pd-range-thumb-col, var(--pd-default-hover-col));
             border: 1px solid var(--pd-default-dark-col);
@@ -110,7 +115,7 @@ export class PdRange extends PdBaseUIInput {
           input[type=range]::-ms-thumb {
             /* redundant, check if it is possible to extract common definitions */
             cursor: pointer;
-            height: 20px;
+            height: 15px;
             width: 39px;
             background: var(--pd-range-thumb-col, var(--pd-default-hover-col));
             border: 1px solid var(--pd-default-dark-col);
@@ -209,7 +214,7 @@ export class PdRange extends PdBaseUIInput {
             .value="${this.value}"
             ?readonly="${this.readonly}"
             ?disabled="${this.disabled}"
-            min="0" max="${this.max}" step="1"
+            min="${this.min}" max="${this.max}" step="1"
             @change="${this._onChange}"
             @input="${this._onChange}"
           />
@@ -224,7 +229,7 @@ export class PdRange extends PdBaseUIInput {
     }
 
     _onChange(e) {
-      this._handleChangedValue(this._input.value, e, false, true);
+      this._handleChangedValue(this._input.value, e, false);
     }
 
 }