@progressive-development/pd-forms 0.0.59 → 0.0.61

package/src/PdInput.js

@@ -4,12 +4,11 @@
  */
 
 import { html, css } from 'lit';
-import { classMap } from 'lit/directives/class-map.js';
-import { SharedInputStyles } from './shared-input-styles.js';
+import '@progressive-development/pd-icon/pd-icon.js';
 
-import { PdBaseUIInput, INPUT_TYPE_TEXT } from './PdBaseUiInput.js';
+import { INPUT_TYPE_TEXT } from './PdBaseUiInput.js';
+import { PdBaseInputElement } from './PdBaseInputElement.js';
 
-import '@progressive-development/pd-icon/pd-icon.js';
 
 // https://github.com/Victor-Bernabe/lit-input
 // https://levelup.gitconnected.com/build-a-material-like-input-web-component-using-litelement-20e9e0d203b6
@@ -24,7 +23,7 @@ import '@progressive-development/pd-icon/pd-icon.js';
  *
  * Custom property | Description | Default
  * ----------------|-------------|--------
- * `--squi-input-width` | Width | `250px`
+ * `--pd-input-field-width` | Width | `250px`
  * `--my-input-height` | Height | `30px`
  * `--squi-input-border` | Border | `1px solid black`
  * `--squi-input-border-focus` | Border when focused | `1px solid #4d90fe`
@@ -49,30 +48,11 @@ import '@progressive-development/pd-icon/pd-icon.js';
  *     <pd-input text-right></pd-input>
  *     <pd-input text-left></pd-input>
  */
-export class PdInput extends PdBaseUIInput {
-  /**
-   * Fired when `pd-input` has focus and the user press `Enter` key.
-   * @event enter-pressed
-   */
-
-  /**
-   * Fired when `pd-input` has focus and the user press any key except `Enter`.
-   * @event key-pressed
-   */
-
-  /**
-   * Fire when the `pd-input` loses focus.
-   * @event focus-lost
-   */
-
-  /**
-   * Fire when the icon inside `pd-input` is clicked.
-   * @event icon-clicked
-   */
+export class PdInput extends PdBaseInputElement {
 
   static get styles() {
     return [
-      SharedInputStyles,
+      PdBaseInputElement.styles,
       css`
         * {
           box-sizing: border-box;
@@ -82,11 +62,7 @@ export class PdInput extends PdBaseUIInput {
   }
 
   static get properties() {
-    return {
-      key: { type: String }, // Test, wird für das setzten der Error Msg benötigt
-
-      /** Placeholder for `pd-input` initial text. */
-      placeHolder: { type: String },
+    return {      
       /**
        * Icon to be shown inside `pd-input`.
        */
@@ -100,128 +76,56 @@ export class PdInput extends PdBaseUIInput {
   constructor() {
     super();
     this._inputType = INPUT_TYPE_TEXT;
-    this.placeHolder = '';
-    this.icon = 'toggleCollapse';
-    this.secret = false;
-    this.key = '';
   }
 
   render() {
+    const inputId = `${this.id}Input`;
     return html`
-      <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"
-          @click="${this._onIconClick}"
-        ></pd-icon>
+      ${this._renderLabel(inputId)}
+      <div class="input ${this.errorMsg.length > 0 ? 'error' : ''}">
         <input
-          id="${this.id}Input"
+          id="${inputId}"
+          name="${this.autoCompleteName}"
+          autocomplete=${this.autoCompleteName}
           class="input-style ${this.gradient ? 'gradient' : ''}"
           type="${this.secret ? 'password' : 'text'}"
-          placeholder="${this.disabled ? '---' : this.placeHolder}"
-          .value="${this.value}"
-          ?readonly="${this.readonly}"
+          placeholder="${this.placeHolder}"
+          .value="${this.value}"          
           minlength="${this.minlength}"
           maxlength="${this.maxlength}"
+          ?readonly="${this.readonly}"
           ?disabled="${this.disabled}"
           @keyup="${this._onKeyUp}"
           @blur="${this._onBlur}"
+          
         />
-        <!-- Sollte erst Clientseitig im Input validiert werden. Meldung verschwindet erst beim Submit nicht mehr zeitgemäß-->
-        ${this.errorMsg.length > 0
-          ? html`<span class="error-msg">${this.errorMsg}</span>`
-          : ''}
       </div>
+      ${this._renderErrorMsg()}
     `;
   }
 
-  firstUpdated() {
-    // Save input reference for performance (bind html element to class property)
-    this._input = this.shadowRoot.querySelector('input');
-  }
-
-  _onKeyUp(event) {
-    // set value (tbd überdenken)
-    this.value = this._input.value;
-
-    // If Enter key pressed, fire 'enter-pressed'
-    const eventKeyCodeNumber = Number(event.keyCode);
-    if (eventKeyCodeNumber === 13) {
-      this.dispatchEvent(
-        new CustomEvent('enter-pressed', {
-          detail: {
-            value: this._input.value,
-          },
-          composed: true,
-          bubbles: true,
-        })
-      );
-      event.preventDefault();
-    } else if (eventKeyCodeNumber !== 9) {
-      // If any other key, fire 'key-pressed'
-
-      // Interessante Stelle, die error msg wird von außen gesetzt
-      // wenn die error msg hier gesetzt wird, danach nicht mehr für änderungen von außen für den gleichen typ gültig
-      // da der wert außen nicht verändert wurde, und daher nicht neu gesetzt wird...
-      // => Die eigentliche NAchricht ist nochgesetzt...
-      // Hack bevor das Thema richtig nachgezogen wird (recherche), es wird nicht für felder von bestimmten typ durchgeführt
-      // d.h. für zip und mail nicht
-      /*
-      if (this.key != 'mail' && this.key != 'zip' && this.key != 'phone') {
-        this.errorMsg = '';
-      } 
-
-      Aufrund der gennanten Problematik auskommentiert, ein evenlistener sorgt nun dafür
-
-      Nachtrag: Nun auf interne propertie umgestellt, im Test...
-      */
-      if (this.errorMsg.length > 0) {
-        this.dispatchEvent(
-          new CustomEvent('validate-form', {
-            detail: {
-              singleElement: this,              
-              errorMap: new Map()
-            },
-            composed: true,
-            bubbles: true,
-          })
-        );
-      }       
-
-      this.dispatchEvent(
-        new CustomEvent('key-pressed', {
-          detail: {
-            value: this._input.value,
-            name: this.valueName,
-          },
-          composed: true,
-          bubbles: true,
-        })
-      );
-    }
-  }
+}
 
-  _onBlur() {
-    this.dispatchEvent(
-      new CustomEvent('focus-lost', {
-        detail: {
-          value: this._input.value,
-        },
-        composed: true,
-        bubbles: true,
-      })
-    );
-  }
 
-  _onIconClick() {
-    this.dispatchEvent(
-      new CustomEvent('icon-clicked', {
-        detail: {
-          value: this._input.value,
-        },
-        composed: true,
-        bubbles: true,
-      })
-    );
-  }
-}
+/**
+ * Aus Historien Doku noch stehen gelassen... => Dokumentieren und entfernen
+ * 
+     // If any other key, fire 'key-pressed'
+
+    // Interessante Stelle, die error msg wird von außen gesetzt
+    // wenn die error msg hier gesetzt wird, danach nicht mehr für änderungen von außen für den gleichen typ gültig
+    // da der wert außen nicht verändert wurde, und daher nicht neu gesetzt wird...
+    // => Die eigentliche NAchricht ist nochgesetzt...
+    // Hack bevor das Thema richtig nachgezogen wird (recherche), es wird nicht für felder von bestimmten typ durchgeführt
+    // d.h. für zip und mail nicht
+    /*
+    if (this.key != 'mail' && this.key != 'zip' && this.key != 'phone') {
+      this.errorMsg = '';
+    } 
+
+    Aufrund der gennanten Problematik auskommentiert, ein evenlistener sorgt nun dafür
+
+    Nachtrag: Nun auf interne propertie umgestellt, im Test...
+    */
+    // if (this.errorMsg.length > 0) {        
+    // }    

package/src/PdInputArea.js

@@ -4,14 +4,11 @@
  */
 
 import { html, css } from 'lit';
-import { classMap } from 'lit/directives/class-map.js';
-import { SharedInputStyles } from './shared-input-styles.js';
-
-import { PdBaseUIInput, INPUT_TYPE_AREA } from './PdBaseUiInput.js';
-
-
 import '@progressive-development/pd-icon/pd-icon.js';
 
+import { INPUT_TYPE_AREA } from './PdBaseUiInput.js';
+import { PdBaseInputElement } from './PdBaseInputElement.js';
+
 // https://github.com/Victor-Bernabe/lit-input
 // https://levelup.gitconnected.com/build-a-material-like-input-web-component-using-litelement-20e9e0d203b6
 /**
@@ -25,7 +22,7 @@ import '@progressive-development/pd-icon/pd-icon.js';
  *
  * Custom property | Description | Default
  * ----------------|-------------|--------
- * `--squi-input-width` | Width | `250px`
+ * `--pd-input-field-width` | Width | `250px`
  * `--my-input-height` | Height | `30px`
  * `--squi-input-border` | Border | `1px solid black`
  * `--squi-input-border-focus` | Border when focused | `1px solid #4d90fe`
@@ -50,141 +47,57 @@ import '@progressive-development/pd-icon/pd-icon.js';
  *     <pd-input text-right></pd-input>
  *     <pd-input text-left></pd-input>
  */
-export class PdInputArea extends PdBaseUIInput {
-
-  /**
-   * Fired when `pd-input-area` has focus and the user press `Enter` key.
-   * @event enter-pressed
-   */
-
-  /**
-   * Fired when `pd-input-area` has focus and the user press any key except `Enter`.
-   * @event key-pressed
-   */
-
-  /**
-   * Fire when the `pd-input-area` loses focus.
-   * @event focus-lost
-   */
-
-  /**
-   * Fire when the icon inside `pd-input-area` is clicked.
-   * @event icon-clicked
-   */
+export class PdInputArea extends PdBaseInputElement {
 
   static get styles() {
-    return [      
-      SharedInputStyles,
-      css`      
-        /* 10 py scroll border rigth? => overwrite*/
+    return [
+      PdBaseInputElement.styles,
+      css`
+        /* overwrite default (250px), area contains 10px scroll bar */
         .input-style {
-            width: var(--squi-input-width-area, 240px);
+          width: var(--pd-input-field-width, 240px);
         }
-            
-    `];
+      `,
+    ];
   }
 
   static get properties() {
     return {
-      /** Placeholder for `squi-input` initial text. */
-      placeHolder: { type: String },
-      /**
-       * Icon to be shown inside `squi-input`.
-       */
-      icon: { type: String },      
-      name: { type: String },      
-      rows: { type: Number },      
-      cols: { type: Number },      
-      minlength: { type: String },      
-      maxlength: { type: String }       // max length for field
+      rows: { type: Number },
+      cols: { type: Number },
+      minlength: { type: String },
+      maxlength: { type: String }, // max length for field
     };
   }
 
   constructor() {
     super();
     this._inputType = INPUT_TYPE_AREA;
-    this.placeHolder = '';
-    this.icon = 'toggleCollapse';    
-
-    this.maxlength = 500;
-    this.name = '';
-    this.rows = 2;    
-    this.value = '';
+    this.maxlength = 500;    
+    this.rows = 2;
   }
 
   render() {
+    const inputAreaId = `${this.id}InputArea`;
     return html`
-    <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>
-      <textarea
-        id="${this.id}InputArea"        
-        class="input-style ${this.gradient ? 'gradient' : ''}"
-        rows="${this.rows}"
-        cols="${this.cols}"                
-        placeholder="${this.placeHolder}"
-        ?disabled="${this.disabled}"
-        ?readonly="${this.readonly}"        
-        @keyup="${this._onKeyUp}"
-        @blur="${this._onBlur}">${this.value}</textarea>
-        <!-- Sollte erst Clientseitig im Input validiert werden. Meldung verschwindet erst beim Submit nicht mehr zeitgemäß-->
-       ${this.errorMsg.length > 0 ? html`<span class="error-msg">${this.errorMsg}</span>` : ''}
-    </div>
+      ${this._renderLabel(inputAreaId)}
+      <div class="input ${this.errorMsg.length > 0 ? 'error' : ''}">
+        <textarea
+          id="${inputAreaId}"
+          name="${this.autoCompleteName}"
+          autocomplete=${this.autoCompleteName}
+          class="input-style ${this.gradient ? 'gradient' : ''}"
+          rows="${this.rows}"
+          cols="${this.cols}"
+          placeholder="${this.placeHolder}"
+          ?disabled="${this.disabled}"
+          ?readonly="${this.readonly}"
+          @keyup="${this._onKeyUp}"
+          @blur="${this._onBlur}"
+        >${this.value}</textarea>
+      </div>
+      ${this._renderErrorMsg()}
     `;
   }
 
-  firstUpdated() {
-    // Save input reference for performance (bind html element to class property)
-    this._input = this.shadowRoot.querySelector('textarea');
-  }
-
-  _onKeyUp(event) {
-
-    // set value (tbd überdenken)
-    this.value = this._input.value;
-
-    // If Enter key pressed, fire 'enter-pressed'
-    if(event.keyCode === 13) {   
-      this.dispatchEvent(new CustomEvent('enter-pressed', {
-        detail: {
-          value: this._input.value
-        },
-        composed: true,
-        bubbles: true
-      }));
-      event.preventDefault();
-    } else {
-      // If any other key, fire 'key-pressed'
-      this.errorMsg = '';
-      this.dispatchEvent(new CustomEvent('key-pressed', {
-        detail: {
-          value: this._input.value,
-          name: this.valueName
-        },
-        composed: true,
-        bubbles: true
-      }));
-    }
-  }
-
-  _onBlur() {
-    this.dispatchEvent(new CustomEvent('focus-lost', {
-      detail: {
-        value: this._input.value
-      },
-      composed: true,
-      bubbles: true
-    }));
-  }
-
-  _onIconClick() {
-    this.dispatchEvent(new CustomEvent('icon-clicked', {
-      detail: {
-        value: this._input.value
-      },
-      composed: true,
-      bubbles: true
-    }));
-  }
-}
+}

package/src/PdRadioGroup.js

@@ -3,9 +3,10 @@
  * Copyright (c) 2021 PD Progressive Development UG. All rights reserved.
  */
 
-import { LitElement, html, css } from 'lit';
+import { html, css } from 'lit';
 import { classMap } from 'lit/directives/class-map.js';
-import { SharedInputStyles } from './shared-input-styles.js';
+
+import { PdBaseUIInput } from './PdBaseUiInput.js'; 
 
 /**
  * An example element.
@@ -13,71 +14,52 @@ import { SharedInputStyles } from './shared-input-styles.js';
  * @slot - This element has a slot
  * @csspart button - The button
  */
-export class PdRadioGroup extends LitElement {
+export class PdRadioGroup extends PdBaseUIInput {
 
   static get styles() {
     return [
-      SharedInputStyles,
-      css`
-      :host {        
-        /* define direction of checkboxes*/
-        --my-direction: var(--group-direction, row);
-        
-        /* ToDo: Auf die schnelle, anders lösen (vertikal / horizontal als eigenschaft mit entsprechenden klassen)*/
-        --my-gap: var(--group-gap, 5px);
-      }
+      PdBaseUIInput.styles,
+      css`      
 
       .group-style {
         display: flex;
-        gap: var(--my-gap);
-        flex-direction: var(--my-direction);        
+        gap: var(--pd-cb-group-gap, 20px);
+        flex-direction: var(--pd-cb-group-direction, row);
       }
 
-    `];
-  }
-
-  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)
-    };
-  }
-
-  constructor() {
-    super();
-    this.label = '';
-    this.valueName = '';
-    this.errorMsg = '';
-
-    this.defaultRequiredChar = '*';
-  }
-
-  get value() {
-    const elColl = this.getElementsByTagName('pd-checkbox');          
-    let returnVal;
-    Object.keys(elColl).forEach(keyValue => {              
-      if (elColl[keyValue].value === 'true') {        
-        returnVal = elColl[keyValue];
+      /* Overwrite width for radio group */
+      .error-box {      
+        max-width: var(--pd-input-field-width, 500px);
       }
-    });    
-    return returnVal ? returnVal.valueName : undefined;
+
+    `];
   }
 
   firstUpdated() {
 
     // add event listener
-    this.addEventListener('checkbox-changed', (e) => {
+    this.addEventListener('field-change', (e) => {
       const elCollection = this.getElementsByTagName('pd-checkbox');      
       Object.keys(elCollection).forEach(keyValue => {                
         if (elCollection[keyValue] !== e.target) {
-          elCollection[keyValue].value = false;          
+          elCollection[keyValue].value = "false";
+        } else {
+          this.value = elCollection[keyValue].valueName;
         }
-        elCollection[keyValue].readonly = (elCollection[keyValue].value === 'true');        
-        this.errorMsg = '';
+        elCollection[keyValue].readonly = (elCollection[keyValue].value === 'true');
       });
+
+      // validate radio-group after change
+      this.dispatchEvent(
+        new CustomEvent('validate-form', {
+          detail: {
+            singleElement: this,
+            errorMap: new Map()
+          },
+          composed: true,
+          bubbles: true,
+        })
+      );
     });
 
     // set default
@@ -90,15 +72,11 @@ export class PdRadioGroup extends LitElement {
 
   render() {
     return html`
-      <label>${this.label}${this.required && this.label ? this.defaultRequiredChar : ''}</label>
+      ${this._renderLabel()}
       <div class="group-style input ${classMap({'error': this.errorMsg.length > 0})}">      
         <slot></slot>        
       </div>      
-      ${this.errorMsg.length > 0 ? html`
-        <div class="error-box error">
-          <span class="error-msg">${this.errorMsg}</span>
-        </div>
-      ` : ''}
+      ${this._renderErrorMsg()}
     `;
   }
  

package/src/PdRange.js

@@ -5,7 +5,6 @@
 
 import { html, css } from 'lit';
 
-import { SharedInputStyles } from './shared-input-styles.js';
 import { PdBaseUIInput, INPUT_TYPE_RANGE } from './PdBaseUiInput.js';
 
 
@@ -29,7 +28,6 @@ export class PdRange extends PdBaseUIInput {
 
     static get styles() {
         return [
-          SharedInputStyles,
           css`
           input[type=range] {
             -webkit-appearance: none;