@progressive-development/pd-forms 0.2.16 → 0.5.0

package/pd-form-row.js

@@ -1,3 +0,0 @@
-import { PdFormRow } from './src/PdFormRow.js';
-
-window.customElements.define('pd-form-row', PdFormRow);

package/pd-hover-box.js

@@ -1,3 +0,0 @@
-import { PdHoverBox } from './src/PdHoverBox.js';
-
-window.customElements.define('pd-hover-box', PdHoverBox);

package/pd-input-area.js

@@ -1,3 +0,0 @@
-import { PdInputArea } from './src/PdInputArea.js';
-
-window.customElements.define('pd-input-area', PdInputArea);

package/pd-input-file.js

@@ -1,3 +0,0 @@
-import { PdInputFile } from './src/PdInputFile.js';
-
-window.customElements.define('pd-input-file', PdInputFile);

package/pd-input.js

@@ -1,3 +0,0 @@
-import { PdInput } from './src/PdInput.js';
-
-window.customElements.define('pd-input', PdInput);

package/pd-radio-group.js

@@ -1,3 +0,0 @@
-import { PdRadioGroup } from './src/PdRadioGroup.js';
-
-window.customElements.define('pd-radio-group', PdRadioGroup);

package/pd-range.js

@@ -1,3 +0,0 @@
-import { PdRange } from './src/PdRange.js';
-
-window.customElements.define('pd-range', PdRange);

package/pd-select.js

@@ -1,3 +0,0 @@
-import { PdSelect } from './src/PdSelect.js';
-
-window.customElements.define('pd-select', PdSelect);

package/src/PdBaseUiInput.js

@@ -1,248 +0,0 @@
-/**
- * @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
- *
- */
-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';
-
-import '../pd-hover-box.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;
- export const INPUT_TYPE_SELECT = 2;
- export const INPUT_TYPE_CHECK = 3;
- export const INPUT_TYPE_RANGE = 4;
- export const INPUT_TYPE_AREA = 5;
- export const INPUT_TYPE_CHECK_GROUP = 6;
- export const INPUT_TYPE_DATE = 7;
- export const INPUT_TYPE_FILE = 8;
-
- /**
-  * Specific key codes for input events.
-  */
- const KEY_RETURN = 13;
-
- // timer is used to delay validation event on user typing
- let delayTimer = 0;
- const DELAY_WAIT_TIME_MS = 400;
-
- export 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 = '';
-         // this._input.value = this.value;
-     }
-
-     // Test: Reset input with value
-     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;
-         console.info("Meine Werte nach Set: ", this._value,  this._input.value, newValue);
-     }
-     */
-
-    _generateValidateEvent () {
-        this.dispatchEvent(
-            new CustomEvent('validate-form', {
-                detail: {
-                singleElement: this,
-                errorMap: 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) {
-            // generate changed event
-            this.dispatchEvent(
-                new CustomEvent('field-change', {
-                    detail: eventDetail,
-                    composed: true,
-                    bubbles: true,
-                })
-            );
-        }
-
-        if (showValidateMsg) {
-            // generate validation event after delay
-            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>
-        `;
-    }
-
- } 

package/src/PdInput.js

@@ -1,146 +0,0 @@
-/**
- * @license
- * Copyright (c) 2021 PD Progressive Development UG. All rights reserved.
- */
-
-import { html, css } from 'lit';
-import '@progressive-development/pd-icon/pd-icon.js';
-
-import { INPUT_TYPE_TEXT } from './PdBaseUiInput.js';
-import { PdBaseInputElement } from './PdBaseInputElement.js';
-
-const onlyContainsNumbers = (str) => /^\d+$/.test(str);
-
-// https://github.com/Victor-Bernabe/lit-input
-// https://levelup.gitconnected.com/build-a-material-like-input-web-component-using-litelement-20e9e0d203b6
-/**
- * Web component to input text implemented with LitElement.
- *
- * ### Styling
- *
- * All custom properties should start with `--squi-input`.
- *
- * Font and icon size will scale automatically with `squi-input`'s height.
- *
- * Custom property | Description | Default
- * ----------------|-------------|--------
- * `--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`
- * `--squi-input-background-color` | Background color | `white`
- * `--squi-input-font-size` | Font size | `calc(var(--my-input-height) / 1.8)`
- * `--squi-input-text-color` | Text color | `inherit`
- * `--squi-input-placeholder-color` | Placeholder text color | `#a0a0a0`
- * `--squi-input-icon-fill-color` | Icon fill color | `currentcolor`
- * `--squi-input-icon-stroke-color` | Icon stroke color | `none`
- *
- * ### Icon and text alignment
- *
- * The icon inside `squi-input` is hidden by default. To show it, set the attribute `icon-right` or `icon-left`.
- *
- *     <pd-input icon-left></pd-input>
- *     <pd-input icon-right></pd-input>
- *
- *     <pd-input icon-left .icon="${'hardware:headset'}"></pd-input>
- *
- * Text can be left or right aligned. Default is left alignment.
- *
- *     <pd-input text-right></pd-input>
- *     <pd-input text-left></pd-input>
- */
-export 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"))
-  }
-
-}
-
-
-/**
- * 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

@@ -1,104 +0,0 @@
-/**
- * @license
- * Copyright (c) 2021 PD Progressive Development UG. All rights reserved.
- */
-
-import { html, css } from 'lit';
-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
-/**
- * Web component to input text implemented with LitElement.
- *
- * ### Styling
- *
- * All custom properties should start with `--squi-input`.
- *
- * Font and icon size will scale automatically with `squi-input`'s height.
- *
- * Custom property | Description | Default
- * ----------------|-------------|--------
- * `--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`
- * `--squi-input-background-color` | Background color | `white`
- * `--squi-input-font-size` | Font size | `calc(var(--my-input-height) / 1.8)`
- * `--squi-input-text-color` | Text color | `inherit`
- * `--squi-input-placeholder-color` | Placeholder text color | `#a0a0a0`
- * `--squi-input-icon-fill-color` | Icon fill color | `currentcolor`
- * `--squi-input-icon-stroke-color` | Icon stroke color | `none`
- *
- * ### Icon and text alignment
- *
- * The icon inside `squi-input` is hidden by default. To show it, set the attribute `icon-right` or `icon-left`.
- *
- *     <pd-input icon-left></pd-input>
- *     <pd-input icon-right></pd-input>
- *
- *     <pd-input icon-left .icon="${'hardware:headset'}"></pd-input>
- *
- * Text can be left or right aligned. Default is left alignment.
- *
- *     <pd-input text-right></pd-input>
- *     <pd-input text-left></pd-input>
- */
-export 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()}
-    `;
-  }
-
-}

package/src/PdInputFile.js

@@ -1,121 +0,0 @@
-/**
- * @license
- * Copyright (c) 2021 PD Progressive Development UG. All rights reserved.
- */
-
-import { html, css } from 'lit';
-import '@progressive-development/pd-icon/pd-icon.js';
-
-import { INPUT_TYPE_FILE } 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
-/**
- * Web component to input text implemented with LitElement.
- *
- * ### Styling
- *
- * All custom properties should start with `--squi-input`.
- *
- * Font and icon size will scale automatically with `squi-input`'s height.
- *
- * Custom property | Description | Default
- * ----------------|-------------|--------
- * `--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`
- * `--squi-input-background-color` | Background color | `white`
- * `--squi-input-font-size` | Font size | `calc(var(--my-input-height) / 1.8)`
- * `--squi-input-text-color` | Text color | `inherit`
- * `--squi-input-placeholder-color` | Placeholder text color | `#a0a0a0`
- * `--squi-input-icon-fill-color` | Icon fill color | `currentcolor`
- * `--squi-input-icon-stroke-color` | Icon stroke color | `none`
- *
- * ### Icon and text alignment
- *
- * The icon inside `squi-input` is hidden by default. To show it, set the attribute `icon-right` or `icon-left`.
- *
- *     <pd-input icon-left></pd-input>
- *     <pd-input icon-right></pd-input>
- *
- *     <pd-input icon-left .icon="${'hardware:headset'}"></pd-input>
- *
- * Text can be left or right aligned. Default is left alignment.
- *
- *     <pd-input text-right></pd-input>
- *     <pd-input text-left></pd-input>
- */
-export class PdInputFile 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 },      
-      accept: { type: String },      
-      maxlength: { type: String }, // max length for field,
-    };
-  }
-
-  constructor() {
-    super();
-    this._inputType = INPUT_TYPE_FILE;
-  }
-
-  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}"
-          class="input-style ${this.gradient ? 'gradient' : ''}"
-          type="file"
-          maxlength="${this.maxlength}"
-          accept="${this.accept}"
-          ?disabled="${this.disabled}"
-          @keyup="${this._onKeyUp}"
-          @blur="${this._onBlur}"
-          @change="${this._onChange}"
-        />
-      </div>
-      ${this._renderErrorMsg()}
-    `;
-  }
-
-  _onKeyUp(e) {
-    super._onKeyUp(e);
-  }
-
-  _iconClicked() {
-    this.dispatchEvent(new CustomEvent("input-icon-click"))
-  }
-
-  _onChange(e) {
-    // TODO
-    this.dispatchEvent(new CustomEvent("file-change"))
-  }
-
-  get files() {
-    const el = this.shadowRoot.getElementById(`${this.id}Input`);
-    return el ? el.files : undefined;
-  }
-
-}