@progressive-development/pd-forms 0.2.16 → 0.5.1

package/{src → dist/src}/PdCheckbox.js

@@ -1,63 +1,22 @@
-/* eslint-disable lit-a11y/click-events-have-key-events */
+import { css, html } from "lit";
+import { classMap } from "lit/directives/class-map.js";
+import "@progressive-development/pd-icon/pd-icon";
+import { PdBaseUIInput, INPUT_TYPE_CHECK } from "./PdBaseUiInput.js";
 /**
  * @license
  * Copyright (c) 2021 PD Progressive Development UG. All rights reserved.
  */
-import { html, css } from "lit";
-import { classMap } from 'lit/directives/class-map.js';
-
-import '@progressive-development/pd-icon/pd-icon.js';
-
-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
- * 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:
- * --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
- * --pd-default-font-input-family
- * --pd-default-font-input-size
- * --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 {
-
+class PdCheckbox extends PdBaseUIInput {
   static get properties() {
     return {
       isSwitch: { type: Boolean },
-      _hasInner: { type: Boolean, state: true },
+      _hasInner: { type: Boolean, state: true }
     };
   }
-
   constructor() {
     super();
     this._inputType = INPUT_TYPE_CHECK;
   }
-
   static get styles() {
     return [
       PdBaseUIInput.styles,
@@ -222,22 +181,18 @@ export class PdCheckbox extends PdBaseUIInput {
           font-size: 1rem;
         }
       }
-    `];
+    `
+    ];
   }
-
   render() {
-
-    // set inner for the first time (avoid upddate cycle in firstupdated (in real avoid log here...))
     if (!this._hasInnerSet) {
       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 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)}">
@@ -252,38 +207,24 @@ export class PdCheckbox extends PdBaseUIInput {
       ${this._renderErrorMsg()}
     `;
   }
-
   onClick(e) {
     if (this.disabled || this.readonly) {
       return;
     }
-    const checked = (this.value === 'true');
-
-    // set changed value and generate events (key-pressed, enter-pressed, validateForm)
-    // if neccessary
-    this._handleChangedValue(checked ? 'false' : 'true', e);
-
-    // TODO: Idee, alle input elemente haben gleichen event!
-    /*
-    this.dispatchEvent(
-      new CustomEvent("checkbox-changed", {
-        bubbles: true,
-        composed: true,
-        detail: {check: !checked, name: this.valueName},
-      })
-    );
-    */
+    const checked = this.value === "true";
+    this._handleChangedValue(checked ? "false" : "true", 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();
   }
 }
+export {
+  PdCheckbox
+};

package/{src → dist/src}/PdFormContainer.js

@@ -1,3 +1,7 @@
+import { css, html } from "lit";
+import { msg } from "@lit/localize";
+import { INPUT_TYPE_RANGE, INPUT_TYPE_SELECT } from "./PdBaseUiInput.js";
+import { PdBaseUI } from "./PdBaseUi.js";
 /**
  * @license
  * Copyright (c) 2021 PD Progressive Development UG. All rights reserved.
@@ -8,26 +12,11 @@
  * - Automatically validation of form content
  * - Success/NotReady information for form-container
  */
-
-import { html, css } from 'lit';
-import { msg } from '@lit/localize';
-
-import { INPUT_TYPE_RANGE, INPUT_TYPE_SELECT } from './PdBaseUiInput.js';
-
-import { PdBaseUI } from './PdBaseUi.js';
-
-/**
- * An example element.
- *
- * @slot - This element has a slot
- * @csspart button - The button
- */
-export class PdFormContainer extends PdBaseUI {
-
+class PdFormContainer extends PdBaseUI {
   static get styles() {
     return [
-    PdBaseUI.styles,
-    css`
+      PdBaseUI.styles,
+      css`
       :host {
         display: flex;
         flex-direction: column;
@@ -67,91 +56,68 @@ export class PdFormContainer extends PdBaseUI {
         background-color: var(--pd-default-error-light-col);
       }
 
-    `];
+    `
+    ];
   }
-
   static get properties() {
     return {
-      requiredFieldInfo: { type: Boolean},
-      commonError: { type: String},
-      _requiredFieldsValid: { type: Boolean, state: true},
-
+      requiredFieldInfo: { type: Boolean },
+      commonError: { type: String },
+      _requiredFieldsValid: { type: Boolean, state: true }
     };
   }
-
   connectedCallback() {
     super.connectedCallback();
-    // add validation event listener
-    this.addEventListener('validate-form', this._validateForm);
+    this.addEventListener("validate-form", this._validateForm);
   }
-
   disconnectedCallback() {
     super.connectedCallback();
-    // add validation event listener
-    this.removeEventListener('validate-form', this._validateForm);
+    this.removeEventListener("validate-form", this._validateForm);
   }
-
   render() {
     return html`  
       <form>
         <slot></slot>
         ${this.requiredFieldInfo || this.commonError ? html`
         <div class="validation-info-container">
-          <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 class="validation-info ${this._requiredFieldsValid && (!this.commonError || this.commonError === "") ? "filled" : "unfilled"}">
+            ${this.commonError || (this._requiredFieldsValid ? msg("* Pflichtfelder ausgefüllt", { id: "pd.form.required.valid" }) : msg("* Pflichtfeld", { id: "pd.form.required.info" }))}
           </p>
-        </div>` : ''}
+        </div>` : ""}
       </form>
     `;
   }
-
-  _validateForm(e) {    
-    
+  _validateForm(e) {
     const reqEl = this.querySelectorAll("[required]");
-
-    // validate required fields TODO: Auf PdInputxxx beschränken
-    reqEl.forEach(el => {
+    reqEl.forEach((el) => {
       const tmpEl = el;
-      if (!el.value || el.value === "" || el.value === "false" || 
-          (el._inputType === INPUT_TYPE_RANGE && el.value === '0') || (el._inputType === INPUT_TYPE_SELECT && el.value === 'UNDEF')) {
-        const erMsg = el.requiredMsg || msg('Eingabe erforderlich',{desc: '#pd.form.field.required#'});
+      if (!el.value || el.value === "" || el.value === "false" || el._inputType === INPUT_TYPE_RANGE && el.value === "0" || el._inputType === INPUT_TYPE_SELECT && el.value === "UNDEF") {
+        const erMsg = el.requiredMsg || msg("Eingabe erforderlich", { id: "pd.form.field.required" });
         if (!e.detail.singleElement || e.detail.singleElement === el) {
           tmpEl.errorMsg = erMsg;
         }
         e.detail.errorMap.set(el.id, erMsg);
-
       } else if (el.validate && typeof el.validate === "function" && el.validate(e)) {
         const errMsg = el.validate(e);
         if (!e.detail.singleElement || e.detail.singleElement === el) {
           tmpEl.errorMsg = errMsg;
         }
         e.detail.errorMap.set(el.id, errMsg);
-
       } else if (!e.detail.singleElement || e.detail.singleElement === el) {
-          tmpEl.errorMsg = "";
+        tmpEl.errorMsg = "";
       }
     });
-
     this._requiredFieldsValid = e.detail.errorMap.size === 0;
-
-    // general validate method
     const validateByType = (fieldType, validFunc, invalidMsgTxt) => {
-
-      if (e.detail.singleElement &&
-        e.detail.singleElement.getAttribute("field-type") !== fieldType) {
-          return;
+      if (e.detail.singleElement && e.detail.singleElement.getAttribute("field-type") !== fieldType) {
+        return;
       }
-
-      const reqSpecEl = e.detail.singleElement ? [e.detail.singleElement] :
-        this.querySelectorAll(`[field-type=${fieldType}]`);      
-
-      reqSpecEl.forEach(el => {
+      const reqSpecEl = e.detail.singleElement ? [e.detail.singleElement] : this.querySelectorAll(`[field-type=${fieldType}]`);
+      reqSpecEl.forEach((el) => {
         const tmpEl = el;
-        // if not already added as required field
         if (!e.detail.errorMap.has(el.id) && el.value && el.value.length > 0) {
           if (validFunc(el.value)) {
-            tmpEl.errorMsg =  "";
+            tmpEl.errorMsg = "";
           } else {
             tmpEl.errorMsg = invalidMsgTxt || `Invalid format for ${fieldType}`;
             e.detail.errorMap.set(el.id, tmpEl.errorMsg);
@@ -159,37 +125,43 @@ export class PdFormContainer extends PdBaseUI {
         }
       });
     };
-
-    // validate mail and phone inputs
-    validateByType("mail", PdFormContainer._mailIsValid, 
-      msg('Format mail@test.de verwenden',{desc: '#pd.form.field.invalid.mail#'}));
-    validateByType("phone", PdFormContainer._phoneIsValid,
-      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#'}));
-
+    validateByType(
+      "mail",
+      PdFormContainer._mailIsValid,
+      msg("Format mail@test.de verwenden", { id: "pd.form.field.invalid.mail" })
+    );
+    validateByType(
+      "phone",
+      PdFormContainer._phoneIsValid,
+      msg("Format +49123 123456 verwenden", { id: "pd.form.field.invalid.phone" })
+    );
+    validateByType(
+      "vat",
+      PdFormContainer._vatIsValid,
+      msg("Format DE0123456789 verwenden", { id: "pd.form.field.invalid.vat" })
+    );
+    validateByType(
+      "number",
+      (val) => !isNaN(val),
+      msg("Nur Zahlen erlaubt", { id: "pd.form.field.invalid.number" })
+    );
     if (e.detail.singleElement) {
       e.stopPropagation();
     }
   }
-
   static _mailIsValid(email) {
     const mValid = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
     return mValid;
   }
-
   static _vatIsValid(vat) {
     const mValid = /^[A-Z]{2}[0-9]{8,12}$/.test(vat);
     return mValid;
   }
-
   static _phoneIsValid(nr) {
-    // Valid +49 830 9001 | 49 221 123 | 08912379
     const mValid = /^\+?[0-9 ]{7,15}$/.test(nr);
     return mValid;
   }
-
-}
+}
+export {
+  PdFormContainer
+};

package/{src → dist/src}/PdFormRow.js

@@ -1,26 +1,16 @@
+import { css, html } from "lit";
+import { PdBaseUI } from "./PdBaseUi.js";
 /**
  * @license
  * Copyright (c) 2021 PD Progressive Development UG. All rights reserved.
  */
-
-import { html, css } from 'lit';
-
-import { PdBaseUI } from './PdBaseUi.js';
-
-/**
- * An example element.
- *
- * @slot - This element has a slot
- * @csspart button - The button
- */
-export class PdFormRow extends PdBaseUI {
-
+class PdFormRow extends PdBaseUI {
   static get styles() {
     return css`
     :host {
       
       /* Define size for row, depends on media queries */
-      --my-row-width: 800px;
+      --my-row-width: var(--pd-form-row-base-width, 800px);
       --my-gap: var(--pd-form-row-gap, 20px);
       display: flex;
       flex: 1 1 100%;      
@@ -73,29 +63,30 @@ export class PdFormRow extends PdBaseUI {
 
     @media (max-width: 930px) {            
       :host {
-        --my-row-width: 600px;        
+        --my-row-width: calc(var(--my-row-width) * 0.75);        
       }      
     }
     @media (max-width: 650px) {            
       :host {
-        --my-row-width: 400px;        
+        --my-row-width: calc(var(--my-row-width) * 0.5);      
         --my-gap: 10px;
       }
     }
     @media (max-width: 450px) {
       :host {
-        --my-row-width: 300px;        
+        --my-row-width: calc(var(--my-row-width) * 0.25);            
         --my-gap: 8px;
       }
     }
 
     `;
   }
-
   render() {
     return html`      
         <slot></slot>      
     `;
   }
-
-}
+}
+export {
+  PdFormRow
+};

package/{src → dist/src}/PdHoverBox.js

@@ -1,4 +1,5 @@
-/* eslint-disable lit-a11y/click-events-have-key-events */
+import { css, html } from "lit";
+import { PdBaseUI } from "./PdBaseUi.js";
 /**
  * @license
  * Copyright (c) 2021 PD Progressive Development UG. All rights reserved.
@@ -9,29 +10,17 @@
  * - Automatically validation of form content
  * - Success/NotReady information for form-container
  */
-
-import { html, css } from 'lit';
-import { PdBaseUI } from './PdBaseUi.js';
-
-/**
- * An example element.
- *
- * @slot - This element has a slot
- * @csspart button - The button
- */
-export class PdHoverBox extends PdBaseUI {
-
+class PdHoverBox extends PdBaseUI {
   static get properties() {
-    return {      
-      _visible: { type: Boolean, state: true},
-      _toBottom: { type: Boolean},
+    return {
+      _visible: { type: Boolean, state: true },
+      _toBottom: { type: Boolean }
     };
   }
-
   static get styles() {
-    return [    
-    PdBaseUI.styles,  
-    css`
+    return [
+      PdBaseUI.styles,
+      css`
 
       :host {        
         
@@ -84,11 +73,10 @@ export class PdHoverBox extends PdBaseUI {
         }
       }
 
-    `];
-  }      
-
-  render() {    
-
+    `
+    ];
+  }
+  render() {
     return html`  
       <div class="hover-box">
         
@@ -103,28 +91,18 @@ export class PdHoverBox extends PdBaseUI {
       </div>
     `;
   }
-
   // eslint-disable-next-line class-methods-use-this
-  _activateInfo(e) {    
-
-    const modal = this.shadowRoot.getElementById('infoViewId');    
+  _activateInfo(e) {
+    const modal = this.shadowRoot.getElementById("infoViewId");
     const rect = modal.getBoundingClientRect();
-
-    this._toBottom = !((modal.offsetHeight + rect.top + rect.height) > window.innerHeight);    
+    this._toBottom = !(modal.offsetHeight + rect.top + rect.height > window.innerHeight);
     this._visible = true;
-
     e.stopPropagation();
-
-    // Nachteil: Wird immer bei jedem Click nach erstmaligem aktvieren ausgeführt. Der Code unten
-    // aber nur bei KLick auf das Fenster, daher zunächst so belassen.
-    // Nachtrag: Allerdings geht es nicht für mehrere Hilfetexte gleichzeitig. Zunächst zurückgenommen.
-    /* window.onclick = () => {      
-      modal.style.display = "none";      
-    }; */
   }
-
   _closeInfo() {
     this._visible = false;
   }
-
-}
+}
+export {
+  PdHoverBox
+};

package/dist/src/PdInput.js

@@ -0,0 +1,79 @@
+import { css, html } from "lit";
+import "@progressive-development/pd-icon/pd-icon";
+import { INPUT_TYPE_TEXT } from "./PdBaseUiInput.js";
+import { PdBaseInputElement } from "./PdBaseInputElement.js";
+/**
+ * @license
+ * Copyright (c) 2021 PD Progressive Development UG. All rights reserved.
+ */
+const onlyContainsNumbers = (str) => /^\d+$/.test(str);
+class PdInput extends PdBaseInputElement {
+  static get styles() {
+    return [
+      PdBaseInputElement.styles,
+      css`
+        * {
+          box-sizing: border-box;
+        }
+      `
+    ];
+  }
+  static get properties() {
+    return {
+      /**
+       * Icon to be shown inside `pd-input`.
+       */
+      icon: { type: String },
+      secret: { type: Boolean },
+      // True for type password
+      minlength: { type: String },
+      maxlength: { type: String },
+      // max length for field,
+      onlyNumbers: { type: Boolean }
+      // if only numbers allowed => Refactor => dafür war type number vorgesehen, dieses attribut wird entfernt und auf type=number umgestellt
+    };
+  }
+  constructor() {
+    super();
+    this._inputType = INPUT_TYPE_TEXT;
+  }
+  render() {
+    const inputId = `${this.id}Input`;
+    return html`
+      ${this._renderLabel(inputId)}
+      <div class="input ${this.errorMsg.length > 0 ? "error" : ""}">
+        ${this.icon ? html`<pd-icon icon="${this.icon}" activeIcon @click="${this._iconClicked}"></pd-icon>` : ""}
+        <input
+          id="${inputId}"
+          name="${this.name || this.valueName || this.autoCompleteName}"
+          autocomplete=${this.autoCompleteName}
+          class="input-style ${this.gradient ? "gradient" : ""}"
+          type="${this.secret ? "password" : "text"}"
+          placeholder="${this.placeHolder}"
+          .value="${this.value}"          
+          minlength="${this.minlength}"
+          maxlength="${this.maxlength}"
+          ?readonly="${this.readonly}"
+          ?disabled="${this.disabled}"
+          @keyup="${this._onKeyUp}"
+          @blur="${this._onBlur}"
+          
+        />
+      </div>
+      ${this._renderErrorMsg()}
+    `;
+  }
+  _onKeyUp(e) {
+    if (this.onlyNumbers && !onlyContainsNumbers(this._input.value)) {
+      this._input.value = this._input.value.replace(/\D/g, "");
+    } else {
+      super._onKeyUp(e);
+    }
+  }
+  _iconClicked() {
+    this.dispatchEvent(new CustomEvent("input-icon-click"));
+  }
+}
+export {
+  PdInput
+};

package/dist/src/PdInputArea.js

@@ -0,0 +1,61 @@
+import { css, html } from "lit";
+import { INPUT_TYPE_AREA } from "./PdBaseUiInput.js";
+import { PdBaseInputElement } from "./PdBaseInputElement.js";
+/**
+ * @license
+ * Copyright (c) 2021 PD Progressive Development UG. All rights reserved.
+ */
+class PdInputArea extends PdBaseInputElement {
+  static get styles() {
+    return [
+      PdBaseInputElement.styles,
+      css`
+        /* overwrite default (250px), area contains 10px scroll bar */
+        .input-style {
+          width: var(--pd-input-field-width, 240px);
+        }
+      `
+    ];
+  }
+  static get properties() {
+    return {
+      rows: { type: Number },
+      cols: { type: Number },
+      minlength: { type: String },
+      maxlength: { type: String }
+      // max length for field
+    };
+  }
+  constructor() {
+    super();
+    this._inputType = INPUT_TYPE_AREA;
+    this.maxlength = 500;
+    this.rows = 2;
+  }
+  render() {
+    const inputAreaId = `${this.id}InputArea`;
+    return html`
+      ${this._renderLabel(inputAreaId)}
+      <div class="input ${this.errorMsg.length > 0 ? "error" : ""}">
+        <textarea
+          id="${inputAreaId}"
+          name="${this.name || this.valueName || 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}"
+          .value="${this.value || ""}"
+          @keyup="${this._onKeyUp}"
+          @blur="${this._onBlur}"
+        ></textarea>
+      </div>
+      ${this._renderErrorMsg()}
+    `;
+  }
+}
+export {
+  PdInputArea
+};