@progressive-development/pd-forms 0.1.31 → 0.1.33

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.31",
+  "version": "0.1.33",
   "main": "index.js",
   "module": "index.js",
   "scripts": {
@@ -21,7 +21,7 @@
   "dependencies": {
     "@lit-labs/motion": "^1.0.2",
     "@lit/localize": "^0.11.2",
-    "@progressive-development/pd-icon": "^0.1.13",
+    "@progressive-development/pd-icon": "^0.1.14",
     "@progressive-development/pd-shared-styles": "0.1.1",
     "lit": "^2.2.0"
   },

package/src/PdBaseUiInput.js

@@ -1,9 +1,9 @@
 /**
  * @license
  * Copyright (c) 2021 PD Progressive Development UG. All rights reserved.
- * 
+ *
  * Abstract base lit class for pd-input elements.
- * 
+ *
  * Used from:
  * - pd-checkbox
  * - pd-input
@@ -11,31 +11,33 @@
  * - pd-radio-group
  * - pd-range
  * - pd-select
- * 
+ *
  * Used to:
  * - define css (import additional shared-input-styles.js)
  * - define common properties (detailieren, aktuell zu viele bzw. nicht für alle sub-elemente gültig)
  * - handle error msg (getter/setter)
  * - helpers for validation event after change and render label/error elements.
- * 
+ *
  * Events:
  *  - validate-form => fired when input element changed its value.
  *  - enter-pressed => fired when enter pressed.
  *  - field-change => fired when input element changed its value.
- * 
+ *
  * Custom Properties (shared-input-styles):
- * ... TODO 
- * 
+ * ... TODO
+ *
  */
- import { html } from 'lit';
- import { PdBaseUI } from './PdBaseUi.js';
+import {css, html} from 'lit';
+import '@progressive-development/pd-icon/pd-icon.js';
+
+import { PdBaseUI } from './PdBaseUi.js';
 
 import { SharedInputStyles } from './shared-input-styles.js';
 
 /**
  * Available input types.
  * Each input elemt set it's own type during constructor call.
- * 
+ *
  * Comment: Not really needed/used at the moment.
  */
  export const INPUT_TYPE_TEXT = 1;
@@ -45,7 +47,7 @@ import { SharedInputStyles } from './shared-input-styles.js';
  export const INPUT_TYPE_AREA = 5;
  export const INPUT_TYPE_CHECK_GROUP = 6;
  export const INPUT_TYPE_DATE = 7;
- 
+
  /**
   * Specific key codes for input events.
   */
@@ -59,7 +61,7 @@ import { SharedInputStyles } from './shared-input-styles.js';
 
     /**
      * Fired when an input element change its values.
-     * @event validate-form 
+     * @event validate-form
      */
 
     /**
@@ -75,19 +77,33 @@ import { SharedInputStyles } from './shared-input-styles.js';
     static get styles() {
         return [
           PdBaseUI.styles,
-          SharedInputStyles
+          SharedInputStyles,
+          css`
+            .label-header {
+              display: flex;
+              align-items: end;
+              justify-content: space-between;
+            }
+
+            .label-header pd-icon {
+              --pd-icon-size: 1rem;
+              padding-right: 5px;
+              cursor: help;
+            }
+          `
         ];
       }
 
      static get properties() {
-         return {            
+         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 },            
+             helperTxt: { type: String },        // helper text
+             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...)
@@ -95,51 +111,51 @@ import { SharedInputStyles } from './shared-input-styles.js';
              _inputType: {type: Number, state: true},         // number value for type (text, select, range....), set constructor of sub-class
          };
      }
- 
+
      constructor() {
-         super();        
+         super();
          this.gradient = false;
          this.disabled = false;
          this.readonly = false;
          this.defaultValue = '';
          this.label = '';
          this.value = '';
-         this._errorMsg = '';        
+         this._errorMsg = '';
          this._inputType = -1;
          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() {        
+     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;        
+         this._input.value = newValue;
          console.info("Meine Werte nach Set: ", this._value,  this._input.value, newValue);
      }
      */
@@ -148,7 +164,7 @@ import { SharedInputStyles } from './shared-input-styles.js';
         this.dispatchEvent(
             new CustomEvent('validate-form', {
                 detail: {
-                singleElement: this,              
+                singleElement: this,
                 errorMap: new Map()
                 },
                 composed: true,
@@ -167,7 +183,7 @@ import { SharedInputStyles } from './shared-input-styles.js';
             name: this.valueName,
             keyCode, changed
         }
-        const handleReturn = checkReturn && keyCode === KEY_RETURN;        
+        const handleReturn = checkReturn && keyCode === KEY_RETURN;
         if (handleReturn) {
             this.dispatchEvent(
                 new CustomEvent('enter-pressed', {
@@ -178,7 +194,7 @@ import { SharedInputStyles } from './shared-input-styles.js';
             );
             event.preventDefault();
 
-        } 
+        }
 
         if (changed) {
             // generate changed event
@@ -188,7 +204,7 @@ import { SharedInputStyles } from './shared-input-styles.js';
                     composed: true,
                     bubbles: true,
                 })
-            );         
+            );
         }
 
         if (showValidateMsg) {
@@ -209,7 +225,10 @@ import { SharedInputStyles } from './shared-input-styles.js';
 
     _renderLabel(forParam, additionalValue) {
         return html`
+          <div class="label-header">
             <label for="${forParam}">${this.label}${this.required && this.label ? this.defaultRequiredChar : ''}${additionalValue ? html` - <b>${additionalValue}</b>` : ''}</label>
+            ${this.helperTxt ? html`<pd-icon title="${this.helperTxt}" icon="userIcon" class="" activeIcon></pd-icon>` : ""}
+          </div>
         `;
     }
 

package/src/PdCheckbox.js

@@ -14,26 +14,26 @@ import { PdBaseUIInput, INPUT_TYPE_CHECK } from "./PdBaseUiInput.js";
 /**
  * Lit Checkbox Element.
  * Could displayed as switch (set isSwitch to true) or checkbox implementation.
- * 
- * Styling is wrapped inside the checkbox element, which uses the styling properties from 
+ *
+ * Styling is wrapped inside the checkbox element, which uses the styling properties from
  * pd-icon (detailed).
- * 
+ *
 ### Custom Properties: #######################################
 # Style for checked checkbox:       Default values           #
-############################################################## 
+##############################################################
  * --pd-cb-col                      unset, pd-icon default
  * --pd-cb-col-hover                unset, pd-icon default
  * --pd-cb-bg-col                   unset, pd-icon default
  * --pd-cb-stroke-col               unset, pd-icon default
  * --pd-cb-stroke-col-hover         unset, pd-icon default
- * 
- * Style for unchecked checkbox:  
+ *
+ * Style for unchecked checkbox:
  * --pd-cb-unset-col                unset, pd-icon default
  * --pd-cb-unset-col-hover          unset, pd-icon default
  * --pd-cb-unset-bg-col             unset, pd-icon default
  * --pd-cb-unset-stroke-col         unset, pd-icon default
  * --pd-cb-unset-stroke-col-hover   unset, pd-icon default
- * 
+ *
  * --pd-cb-border-col               --pd-default-col
  * --pd-cb-border-radius            4px (not border for rounded elements, cb specific)
  * --pd-cb-font-col                 --pd-default-font-input-col
@@ -42,12 +42,12 @@ import { PdBaseUIInput, INPUT_TYPE_CHECK } from "./PdBaseUiInput.js";
  * --pd-cb-txt-col-readonly         #4d4d4d
  * --pd-cb-switch-height            not set
  * --pd-cb-switch-paddle-col        --pd-default-col
- * 
+ *
  */
 export class PdCheckbox extends PdBaseUIInput {
-  
+
   static get properties() {
-    return {            
+    return {
       isSwitch: { type: Boolean },
       _hasInner: { type: Boolean, state: true },
     };
@@ -55,7 +55,7 @@ export class PdCheckbox extends PdBaseUIInput {
 
   constructor() {
     super();
-    this._inputType = INPUT_TYPE_CHECK;    
+    this._inputType = INPUT_TYPE_CHECK;
   }
 
   static get styles() {
@@ -63,14 +63,14 @@ export class PdCheckbox extends PdBaseUIInput {
       PdBaseUIInput.styles,
       css`
       :host {
-        display: inline-block;        
+        display: inline-block;
 
         /* Style for active checkbox => use defaults from pd-icon if no custom properties set */
         --pd-icon-col-active: var(--pd-cb-col);
         --pd-icon-col-active-hover: var(--pd-cb-col-hover);
         --pd-icon-bg-col-active: var(--pd-cb-bg-col);
         --pd-icon-stroke-col-active: var(--pd-cb-stroke-col);
-        --pd-icon-stroke-col-active-hover: var(--pd-cb-stroke-col-hover);                        
+        --pd-icon-stroke-col-active-hover: var(--pd-cb-stroke-col-hover);
 
         /* Style for inactive checkbox */
         --pd-icon-col: var(--pd-cb-unset-col);
@@ -81,7 +81,7 @@ export class PdCheckbox extends PdBaseUIInput {
       }
 
       /* Switch pd-icon => Prüfen, bei mir musste ich reflect setzten, wird das verwendet? */
-      :host([isSwitch]) {          
+      :host([isSwitch]) {
         /* derzeit keine Angaben */
       }
 
@@ -100,8 +100,8 @@ export class PdCheckbox extends PdBaseUIInput {
         cursor: auto;
       }
 
-      /* 
-       * Class checkbox for icon and a element (checkbox case)       
+      /*
+       * Class checkbox for icon and a element (checkbox case)
        */
       .checkbox {
         display: flex;
@@ -109,12 +109,12 @@ export class PdCheckbox extends PdBaseUIInput {
         line-height: 0;
         align-items: center;
         justify-content: center;
-        /* 
+        /*
         Wurde das hier für Border verwendet? Aktuell border in folgendem Element gesetzt
-        background-color: var(--pd-cb-border-col, var(--pd-primary-col, #067394)); 
-        */ 
+        background-color: var(--pd-cb-border-col, var(--pd-primary-col, #067394));
+        */
 
-      }    
+      }
 
       .checkbox pd-icon {
         margin-right: .2rem;
@@ -125,7 +125,7 @@ export class PdCheckbox extends PdBaseUIInput {
 
       .label {
         margin-left: 0.1rem;
-        color: var(--pd-cb-font-col, var(--pd-default-font-input-col)); 
+        color: var(--pd-cb-font-col, var(--pd-default-font-input-col));
         font-family: var(--pd-default-font-input-family);
         text-align: left;
         font-size: var(--pd-default-font-input-size);
@@ -180,11 +180,11 @@ export class PdCheckbox extends PdBaseUIInput {
         transform: translate3d(0, 0, 0);
         border: 2px solid var(--pd-cb-border-col, var(--pd-default-col));
         box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
-        border-radius: var(--pd-cb-border-radius, 4px);        
+        border-radius: var(--pd-cb-border-radius, 4px);
         -webkit-transition: all 0.25s ease-out;
         transition: all 0.25s ease-out;
         content: '';
-      }      
+      }
 
       .disabled .switch-paddle {
         cursor: auto;
@@ -204,7 +204,7 @@ export class PdCheckbox extends PdBaseUIInput {
         */
       }
 
-      .readonly .switch-paddle pd-icon {        
+      .readonly .switch-paddle pd-icon {
         border-color: var(--pd-cb-border-col-readonly, transparent);
       }
 
@@ -212,11 +212,11 @@ export class PdCheckbox extends PdBaseUIInput {
         transform: translate3d(0, 0, 0);
         left: 0rem;
       }
-  
+
       .isChecked.switch-paddle pd-icon {
           left: 2.25rem;
       }
-    
+
       @media (min-width: 580px) {
         :host {
           font-size: 1rem;
@@ -232,10 +232,10 @@ export class PdCheckbox extends PdBaseUIInput {
       this._hasInnerSet = true;
       this._hasInner = !!this.innerHTML.trim().length;
     }
-    
+
     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 aClassMap = {'switch-paddle': this.isSwitch, 'checkbox': !this.isSwitch, 'isChecked': checked, 'isUnchecked': !checked};
     const inputId = `${this.id}Check`;
 
     return html`
@@ -257,9 +257,9 @@ export class PdCheckbox extends PdBaseUIInput {
     if (this.disabled || this.readonly) {
       return;
     }
-    const checked = (this.value === 'true');    
-    
-    // set changed value and generate events (key-pressed, enter-pressed, validateForm) 
+    const checked = (this.value === 'true');
+
+    // set changed value and generate events (key-pressed, enter-pressed, validateForm)
     // if neccessary
     this._handleChangedValue(checked ? 'false' : 'true', e);
 
@@ -275,15 +275,15 @@ export class PdCheckbox extends PdBaseUIInput {
     */
   }
 
-  onKeyPress(e) {    
+  onKeyPress(e) {
     e.preventDefault();
     if (e.keyCode === 32 || e.code === "Space") {
       this.onClick(e);
     }
   }
-  
+
   // eslint-disable-next-line class-methods-use-this
   linkClick(e) {
     e.preventDefault();
   }
-}
+}

package/src/PdRange.js

@@ -223,6 +223,12 @@ export class PdRange extends PdBaseUIInput {
             color: var(--pd-default-col);
           }
 
+          @media (max-width: 650px) {
+            label {
+            font-size: 12px;
+            }
+          }
+
           `
         ];
     }

package/stories/form-container.stories.js

@@ -43,22 +43,22 @@ function Template() {
         <pd-input class="quarter1" id="test10Id" label="Label 6"></pd-input>
       </pd-form-row>
       <pd-form-row>
-        <pd-input-area class="quarter3-area" id="test19Id" label="Label Area" required></pd-input-area>          
+        <pd-input-area class="quarter3-area" id="test19Id" label="Label Area" required></pd-input-area>
         <pd-input-area class="quarter1-area" id="test20Id" label="Label Area" required
           requiredMsg="Das ist eine richtig lange Fehlermeldung. Diese kann per Parameter für spezielle Felder wie die AGB Checkbox gesetzt werden.">
-        </pd-input-area>        
+        </pd-input-area>
       </pd-form-row>
       <pd-form-row>
         <pd-input class="quarter1" id="test11Id" label="Label 5"></pd-input>
         <pd-input class="quarter3" id="test12Id" label="Label 6"></pd-input>
-      </pd-form-row>      
+      </pd-form-row>
       <pd-form-row>
         <pd-input class="quarter1" id="test13Id" label="Label 5"></pd-input>
         <pd-input class="quarter1" id="test14Id" label="Label 5"></pd-input>
         <pd-input class="quarter2" id="test15Id" label="Label 6"></pd-input>
       </pd-form-row>
       <pd-form-row>
-        <pd-input-area class="quarter4-area" id="test16Id" label="Label Area" required></pd-input-area>        
+        <pd-input-area class="quarter4-area" id="test16Id" label="Label Area" required></pd-input-area>
       </pd-form-row>
       <pd-form-row>
         <pd-input-area class="quarter2-area" id="test17Id" label="Label Area" required></pd-input-area>
@@ -67,11 +67,19 @@ function Template() {
       </pd-form-row>
       <pd-form-row>
         <pd-range id="testRangeId"
-          label="Range Label" 
+          label="Range Label"
           max="12"
           value="0" .optionValueMapper="${OPTIONS_GENRE}" required>
         </pd-range>
       </pd-form-row>
+      <pd-form-row>
+        <pd-range id="testRangeId"
+                  label="Mit Helper"
+                  max="12"
+                  helperTxt="Hier kommt dann kluges hin"
+                  value="0" .optionValueMapper="${OPTIONS_GENRE}" required>
+        </pd-range>
+      </pd-form-row>
     </pd-form-container>
 
     <h2>Test Validation</h2>