@progressive-development/pd-forms 0.2.16 → 0.5.0

package/dist/index.js

@@ -0,0 +1,26 @@
+import { PdButton } from "./src/PdButton.js";
+import { PdCheckbox } from "./src/PdCheckbox.js";
+import { PdFormContainer } from "./src/PdFormContainer.js";
+import { PdFormRow } from "./src/PdFormRow.js";
+import { PdHoverBox } from "./src/PdHoverBox.js";
+import { PdInput } from "./src/PdInput.js";
+import { PdInputArea } from "./src/PdInputArea.js";
+import { PdInputFile } from "./src/PdInputFile.js";
+import { PdRadioGroup } from "./src/PdRadioGroup.js";
+import { templates } from "./locales/be.js";
+import { templates as templates2 } from "./locales/de.js";
+import { templates as templates3 } from "./locales/en.js";
+export {
+  PdButton,
+  PdCheckbox,
+  PdFormContainer,
+  PdFormRow,
+  PdHoverBox,
+  PdInput,
+  PdInputArea,
+  PdInputFile,
+  PdRadioGroup,
+  templates as beTemplates,
+  templates2 as deTemplates,
+  templates3 as enTemplates
+};

package/dist/locales/be.js

@@ -0,0 +1,12 @@
+const templates = {
+  "pd.form.field.invalid.mail": `Ongeldig e-mailadres, gebruik mail@test.be`,
+  "pd.form.field.invalid.number": `Alleen nummers toegestaan`,
+  "pd.form.field.invalid.phone": `Ongeldig telefoonnummer, gebruik +32 494 667085`,
+  "pd.form.field.invalid.vat": `Ongeldig VAT, gebruik BE0123456789`,
+  "pd.form.field.required": `Vul dit veld in`,
+  "pd.form.required.info": `* Verplichte in te vullen`,
+  "pd.form.required.valid": `* Verplichte velden ingevuld`
+};
+export {
+  templates
+};

package/dist/locales/de.js

@@ -0,0 +1,12 @@
+const templates = {
+  "pd.form.required.valid": `* Pflichtfelder ausgefüllt`,
+  "pd.form.required.info": `* Pflichtfeld`,
+  "pd.form.field.required": `Eingabe erforderlich`,
+  "pd.form.field.invalid.mail": `Format mail@test.de verwenden`,
+  "pd.form.field.invalid.phone": `Format +49123 123456 verwenden`,
+  "pd.form.field.invalid.vat": `Format DE0123456789 verwenden`,
+  "pd.form.field.invalid.number": `Nur Zahlen erlaubt`
+};
+export {
+  templates
+};

package/dist/locales/en.js

@@ -0,0 +1,12 @@
+const templates = {
+  "pd.form.field.invalid.mail": `Use format mail@test.de`,
+  "pd.form.field.invalid.number": `Numbers only allowed`,
+  "pd.form.field.invalid.phone": `Use format +49123 123456`,
+  "pd.form.field.invalid.vat": `Use format DE0123456789`,
+  "pd.form.field.required": `Input required`,
+  "pd.form.required.info": `* Required field`,
+  "pd.form.required.valid": `* Required fields filled`
+};
+export {
+  templates
+};

package/dist/pd-button.js

@@ -0,0 +1,4 @@
+import { PdButton } from "./src/PdButton.js";
+if (!customElements.get("pd-button")) {
+  window.customElements.define("pd-button", PdButton);
+}

package/dist/pd-checkbox.js

@@ -0,0 +1,4 @@
+import { PdCheckbox } from "./src/PdCheckbox.js";
+if (!customElements.get("pd-checkbox")) {
+  window.customElements.define("pd-checkbox", PdCheckbox);
+}

package/dist/pd-form-container.js

@@ -0,0 +1,4 @@
+import { PdFormContainer } from "./src/PdFormContainer.js";
+if (!customElements.get("pd-form-container")) {
+  window.customElements.define("pd-form-container", PdFormContainer);
+}

package/dist/pd-form-row.js

@@ -0,0 +1,4 @@
+import { PdFormRow } from "./src/PdFormRow.js";
+if (!customElements.get("pd-form-row")) {
+  window.customElements.define("pd-form-row", PdFormRow);
+}

package/dist/pd-hover-box.js

@@ -0,0 +1,4 @@
+import { PdHoverBox } from "./src/PdHoverBox.js";
+if (!customElements.get("pd-hover-box")) {
+  window.customElements.define("pd-hover-box", PdHoverBox);
+}

package/dist/pd-input-area.js

@@ -0,0 +1,4 @@
+import { PdInputArea } from "./src/PdInputArea.js";
+if (!customElements.get("pd-input-area")) {
+  window.customElements.define("pd-input-area", PdInputArea);
+}

package/dist/pd-input-file.js

@@ -0,0 +1,4 @@
+import { PdInputFile } from "./src/PdInputFile.js";
+if (!customElements.get("pd-input-file")) {
+  window.customElements.define("pd-input-file", PdInputFile);
+}

package/dist/pd-input.js

@@ -0,0 +1,4 @@
+import { PdInput } from "./src/PdInput.js";
+if (!customElements.get("pd-input")) {
+  window.customElements.define("pd-input", PdInput);
+}

package/dist/pd-radio-group.js

@@ -0,0 +1,4 @@
+import { PdRadioGroup } from "./src/PdRadioGroup.js";
+if (!customElements.get("pd-radio-group")) {
+  window.customElements.define("pd-radio-group", PdRadioGroup);
+}

package/dist/pd-range.js

@@ -0,0 +1,4 @@
+import { PdRange } from "./src/PdRange.js";
+if (!customElements.get("pd-range")) {
+  window.customElements.define("pd-range", PdRange);
+}

package/dist/pd-select.js

@@ -0,0 +1,4 @@
+import { PdSelect } from "./src/PdSelect.js";
+if (!customElements.get("pd-select")) {
+  window.customElements.define("pd-select", PdSelect);
+}

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

@@ -1,3 +1,5 @@
+import { PdBaseUIInput, INPUT_TYPE_DATE, INPUT_TYPE_TEXT, INPUT_TYPE_FILE, INPUT_TYPE_SELECT, INPUT_TYPE_AREA } from "./PdBaseUiInput.js";
+import { SharedInputFieldStyles } from "./shared-input-field-styles.js";
 /**
  * @license
  * Copyright (c) 2021 PD Progressive Development UG. All rights reserved.
@@ -20,86 +22,65 @@
  * ... TODO
  *
  */
-import {
-  PdBaseUIInput,
-  INPUT_TYPE_AREA,
-  INPUT_TYPE_SELECT,
-  INPUT_TYPE_TEXT,
-  INPUT_TYPE_DATE,
-  INPUT_TYPE_FILE
-} from './PdBaseUiInput.js';
-
-import { SharedInputFieldStyles } from './shared-input-field-styles.js';
-
-export class PdBaseInputElement extends PdBaseUIInput {
-
+class PdBaseInputElement extends PdBaseUIInput {
   /**
    * Fire when the `pd-input` loses focus.
    * @event focus-lost
    */
-
   static get styles() {
     return [PdBaseUIInput.styles, SharedInputFieldStyles];
   }
-
   static get properties() {
     return {
-        placeHolder: { type: String },
-        /* not used at the moment */
-        name: { type: String },
-        autoCompleteName: { type: String },
+      placeHolder: { type: String },
+      /* not used at the moment */
+      name: { type: String },
+      autoCompleteName: { type: String }
     };
   }
-
   constructor() {
-    super();    
-    this.placeHolder = '';
-    this.name = '';
+    super();
+    this.placeHolder = "";
+    this.name = "";
     this._input = {};
   }
-
   firstUpdated() {
-    // Save input reference for performance (bind html element to class property)
     this._input = this.shadowRoot.querySelector(this._getElementName());
   }
-
-  focus() {        
-    this._input.focus();    
+  focus() {
+    this._input.focus();
   }
-
   _onBlur(event) {
     this.dispatchEvent(
-      new CustomEvent('focus-lost', {
+      new CustomEvent("focus-lost", {
         detail: {
-          value: this._input.value,
+          value: this._input.value
         },
         composed: true,
-        bubbles: true,
+        bubbles: true
       })
     );
-
     this._handleChangedValue(this._input.value, event, true, true);
   }
-
   _onKeyUp(event) {
-    // set changed value and generate events (key-pressed, enter-pressed, validateForm)
-    // if neccessary
     this._handleChangedValue(this._input.value, event, true);
   }
-
   _getElementName() {
     switch (this._inputType) {
       case INPUT_TYPE_AREA:
-        return 'textarea';
+        return "textarea";
       case INPUT_TYPE_SELECT:
-        return 'select';
+        return "select";
       case INPUT_TYPE_FILE:
       case INPUT_TYPE_TEXT:
-        return 'input';
+        return "input";
       case INPUT_TYPE_DATE:
-        return 'pd-input';
+        return "pd-input";
       default:
-        return '';
+        return "";
     }
   }
 }
+export {
+  PdBaseInputElement
+};

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

@@ -1,3 +1,6 @@
+import { LitElement } from "lit";
+import { updateWhenLocaleChanges } from "@lit/localize";
+import { PDColorStyles, PDFontStyles } from "@progressive-development/pd-shared-styles";
 /**
  * @license
  * Copyright (c) 2021 PD Progressive Development UG. All rights reserved.
@@ -16,20 +19,15 @@
  * Custom Properties (shared-global-styles):
  * ... TODO
  */
- 
-import { LitElement } from 'lit';
-import { updateWhenLocaleChanges } from '@lit/localize';
-
-import { PDColorStyles, PDFontStyles } from '@progressive-development/pd-shared-styles';
-
-export class PdBaseUI extends LitElement {
-
-    static get styles() {
-        return [PDColorStyles, PDFontStyles];
-    }    
-
+class PdBaseUI extends LitElement {
+  static get styles() {
+    return [PDColorStyles, PDFontStyles];
+  }
   constructor() {
     super();
     updateWhenLocaleChanges(this);
-  }  
+  }
 }
+export {
+  PdBaseUI
+};

package/dist/src/PdBaseUiInput.js

@@ -0,0 +1,229 @@
+import { css, html } from "lit";
+import "@progressive-development/pd-icon/pd-icon";
+import { PdBaseUI } from "./PdBaseUi.js";
+import { SharedInputStyles } from "./shared-input-styles.js";
+import "../pd-hover-box.js";
+/**
+ * @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
+ * - pd-input-area
+ * - 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
+ *
+ */
+const INPUT_TYPE_TEXT = 1;
+const INPUT_TYPE_SELECT = 2;
+const INPUT_TYPE_CHECK = 3;
+const INPUT_TYPE_RANGE = 4;
+const INPUT_TYPE_AREA = 5;
+const INPUT_TYPE_DATE = 7;
+const INPUT_TYPE_FILE = 8;
+const KEY_RETURN = 13;
+let delayTimer = 0;
+const DELAY_WAIT_TIME_MS = 400;
+class PdBaseUIInput extends PdBaseUI {
+  /**
+   * Fired when an input element change its values.
+   * @event validate-form
+   */
+  /**
+   * Fired when enter was pressend during focus on input element.
+   * @event enter-pressed
+   */
+  /**
+   * Fired when field-value changed.
+   * @event field-change
+   */
+  static get styles() {
+    return [
+      PdBaseUI.styles,
+      SharedInputStyles,
+      css`
+            .label-header {
+              display: flex;
+              align-items: end;
+              justify-content: space-between;
+            }
+
+            .label-header pd-icon {
+              --pd-icon-size: 1.25rem;
+              --pd-icon-col-active: var(--pd-default-col);
+              --pd-icon-col-active-hover: var(--pd-default-hover-col);
+              --pd-icon-stroke-width: 0;
+              padding-right: 5px;
+              cursor: help;
+            }
+          `
+    ];
+  }
+  static get properties() {
+    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
+      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...)
+      _errorMsg: { type: String, state: true },
+      // errorMsg (could set fronm outside for busines validation, internal validation=> todo)
+      _inputType: { type: Number, state: true }
+      // number value for type (text, select, range....), set constructor of sub-class
+    };
+  }
+  constructor() {
+    super();
+    this.gradient = false;
+    this.disabled = false;
+    this.readonly = false;
+    this.defaultValue = "";
+    this.label = "";
+    this.value = "";
+    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 = "";
+  }
+  // Test: Reset input with value
+  reset() {
+    this.value = this.defaultValue || "";
+  }
+  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;
+           console.info("Meine Werte nach Set: ", this._value,  this._input.value, newValue);
+       }
+       */
+  _generateValidateEvent() {
+    this.dispatchEvent(
+      new CustomEvent("validate-form", {
+        detail: {
+          singleElement: this,
+          errorMap: /* @__PURE__ */ new Map()
+        },
+        composed: true,
+        bubbles: true
+      })
+    );
+  }
+  _handleChangedValue(newValue, event, checkReturn, showValidateMsg) {
+    const changed = this.value !== newValue;
+    this.value = newValue;
+    const keyCode = event.keyCode ? Number(event.keyCode) : -1;
+    const eventDetail = {
+      value: newValue,
+      name: this.valueName,
+      keyCode,
+      changed
+    };
+    const handleReturn = checkReturn && keyCode === KEY_RETURN;
+    if (handleReturn) {
+      this.dispatchEvent(
+        new CustomEvent("enter-pressed", {
+          detail: eventDetail,
+          composed: true,
+          bubbles: true
+        })
+      );
+      event.preventDefault();
+    }
+    if (changed) {
+      this.dispatchEvent(
+        new CustomEvent("field-change", {
+          detail: eventDetail,
+          composed: true,
+          bubbles: true
+        })
+      );
+    }
+    if (showValidateMsg) {
+      clearTimeout(delayTimer);
+      delayTimer = setTimeout(
+        this._generateValidateEvent.bind(this),
+        DELAY_WAIT_TIME_MS
+      );
+    }
+  }
+  _renderErrorMsg() {
+    return this.errorMsg && this.errorMsg.length > 0 ? html`
+        <div class="error-box error">
+          <p class="error-msg">${this.errorMsg}</p>
+        </div>
+      ` : "";
+  }
+  _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-hover-box>
+                    <pd-icon slot="normal-view" icon="helpIcon" activeIcon></pd-icon>                    
+                    <p slot="info-view">${this.helperTxt}</p>
+                </pd-hover-box>
+                
+                ` : ""}
+          </div>
+        `;
+  }
+}
+export {
+  INPUT_TYPE_AREA,
+  INPUT_TYPE_CHECK,
+  INPUT_TYPE_DATE,
+  INPUT_TYPE_FILE,
+  INPUT_TYPE_RANGE,
+  INPUT_TYPE_SELECT,
+  INPUT_TYPE_TEXT,
+  PdBaseUIInput
+};

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

@@ -1,23 +1,17 @@
-/* eslint-disable lit-a11y/click-events-have-key-events */
-/* eslint-disable lit-a11y/anchor-is-valid */
+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';
- 
- export class PdButton extends PdBaseUI {
- 
-   /**
-    * @event button-clicked
-    */
- 
-   static get styles() {
-     return [
-       PdBaseUI.styles,
-       css`
+class PdButton extends PdBaseUI {
+  /**
+   * @event button-clicked
+   */
+  static get styles() {
+    return [
+      PdBaseUI.styles,
+      css`
        :host {        
          
          font-family: var(--pd-default-font-title-family);
@@ -162,39 +156,39 @@
          }
        }
  
-     `];
-   }
- 
-   static get properties() {
-     return {                  
-       primary: {type: Boolean},
-       gradient: {type: Boolean},
-       disabled: {type: Boolean},
-       text: {type: String},
-       value: {type: String}
-     };
-   }
- 
-   constructor() {
-     super();    
-     this.primary = false;
-     this.gradient = false;
-     this.disabled = false;
-     this.text = 'Ok';
-   }
- 
-   render() {
-     return html`
+     `
+    ];
+  }
+  static get properties() {
+    return {
+      primary: { type: Boolean },
+      gradient: { type: Boolean },
+      disabled: { type: Boolean },
+      text: { type: String },
+      value: { type: String }
+    };
+  }
+  constructor() {
+    super();
+    this.primary = false;
+    this.gradient = false;
+    this.disabled = false;
+    this.text = "Ok";
+  }
+  render() {
+    return html`
      <div @click="${this._handleClick}" class="button-div">
        <a ?disabled="${this.disabled}">${this.text}</a>
      </div>`;
-   }
- 
-   _handleClick() {
-     if (!this.disabled) {
-       this.dispatchEvent(new CustomEvent("button-clicked", {
+  }
+  _handleClick() {
+    if (!this.disabled) {
+      this.dispatchEvent(new CustomEvent("button-clicked", {
         detail: this.value
-       }));
-     }
-   }
- }
+      }));
+    }
+  }
+}
+export {
+  PdButton
+};