@progressive-development/pd-forms 0.5.7 → 0.6.1

package/dist/src/PdHoverBox.js

@@ -1,108 +0,0 @@
-import { css, html } from "lit";
-import { PdBaseUI } from "./PdBaseUi.js";
-/**
- * @license
- * Copyright (c) 2021 PD Progressive Development UG. All rights reserved.
- * 
- * Lit element container for pd input elements.
- * 
- * Used to:
- * - Automatically validation of form content
- * - Success/NotReady information for form-container
- */
-class PdHoverBox extends PdBaseUI {
-  static get properties() {
-    return {
-      _visible: { type: Boolean, state: true },
-      _toBottom: { type: Boolean }
-    };
-  }
-  static get styles() {
-    return [
-      PdBaseUI.styles,
-      css`
-
-      :host {        
-        
-      }
-
-      .hover-box {
-        position: relative;
-      }
-
-      .info-view {
-        position: absolute;                
-        z-index: 100;        
-        background-color: var(--pd-hover-box-bg-col, var(--pd-default-dark-col));
-                
-        border: 1px solid var(--pd-hover-box-border-col, var(--pd-default-col));
-        
-        text-align: center;
-        padding: 10px;
-        width: 240px;                        
-
-        color: var(--pd-hover-box-font-col, white);
-        font-size: var(--pd-hover-box-font-size, 0.8em);  
-
-        transition: opacity 0.2s ease-in;
-      }
-
-      .visible {
-        visibility: visible;
-        opacity: 1;
-      }
-
-      .hidden {
-        visibility: hidden;
-        opacity: 0;
-      }
-
-      .to-bottom {
-        right: -3px;
-        top: -3px;
-      }
-
-      .to-top {
-        right: -3px;
-        bottom: -3px;
-      }
-
-      @media (max-width: 640px) {
-        .info-view-visible {        
-          width: 190px;          
-        }
-      }
-
-    `
-    ];
-  }
-  render() {
-    return html`  
-      <div class="hover-box">
-        
-          <div @click="${this._activateInfo}">
-            <slot name="normal-view"></slot>
-          </div>
-
-          <div id="infoViewId" @click="${this._closeInfo}" class="info-view ${this._visible ? "visible" : "hidden"} ${this._toBottom ? "to-bottom" : "to-top"}">
-            <slot name="info-view"></slot>
-          </div>
-
-      </div>
-    `;
-  }
-  // eslint-disable-next-line class-methods-use-this
-  _activateInfo(e) {
-    const modal = this.shadowRoot.getElementById("infoViewId");
-    const rect = modal.getBoundingClientRect();
-    this._toBottom = !(modal.offsetHeight + rect.top + rect.height > window.innerHeight);
-    this._visible = true;
-    e.stopPropagation();
-  }
-  _closeInfo() {
-    this._visible = false;
-  }
-}
-export {
-  PdHoverBox
-};

package/dist/src/PdInput.js

@@ -1,79 +0,0 @@
-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

@@ -1,61 +0,0 @@
-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
-};

package/dist/src/PdInputFile.js

@@ -1,73 +0,0 @@
-import { css, html } from "lit";
-import "@progressive-development/pd-icon/pd-icon";
-import { INPUT_TYPE_FILE } from "./PdBaseUiInput.js";
-import { PdBaseInputElement } from "./PdBaseInputElement.js";
-/**
- * @license
- * Copyright (c) 2021 PD Progressive Development UG. All rights reserved.
- */
-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) {
-    this.dispatchEvent(new CustomEvent("file-change"));
-  }
-  get files() {
-    const el = this.shadowRoot.getElementById(`${this.id}Input`);
-    return el ? el.files : void 0;
-  }
-}
-export {
-  PdInputFile
-};

package/dist/src/PdInputTime.js

@@ -1,59 +0,0 @@
-import { css, html } from "lit";
-import "@progressive-development/pd-icon/pd-icon";
-import { INPUT_TYPE_TIME } from "./PdBaseUiInput.js";
-import { PdBaseInputElement } from "./PdBaseInputElement.js";
-/**
- * @license
- * Copyright (c) 2021 PD Progressive Development UG. All rights reserved.
- */
-class PdInputTime 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 }
-    };
-  }
-  constructor() {
-    super();
-    this._inputType = INPUT_TYPE_TIME;
-  }
-  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="time"
-          .value="${this.value}"
-          ?readonly="${this.readonly}"
-          ?disabled="${this.disabled}"
-          @keyup="${this._onKeyUp}"
-          @blur="${this._onBlur}"
-        />
-      </div>
-      ${this._renderErrorMsg()}
-    `;
-  }
-  _iconClicked() {
-    this.dispatchEvent(new CustomEvent("input-icon-click"));
-  }
-}
-export {
-  PdInputTime
-};

package/dist/src/PdRadioGroup.js

@@ -1,72 +0,0 @@
-import { css, html } from "lit";
-import { classMap } from "lit/directives/class-map.js";
-import { PdBaseUIInput } from "./PdBaseUiInput.js";
-/**
- * @license
- * Copyright (c) 2021 PD Progressive Development UG. All rights reserved.
- */
-class PdRadioGroup extends PdBaseUIInput {
-  static get styles() {
-    return [
-      PdBaseUIInput.styles,
-      css`      
-
-      .group-style {
-        display: flex;
-        gap: var(--pd-cb-group-gap, 20px);
-        flex-direction: var(--pd-cb-group-direction, row);
-        flex-wrap: wrap;
-        padding: var(--pd-input-label-padding, 0);
-        padding-top: 5px;
-      }
-
-      ::slotted(pd-checkbox) {
-        --pd-cb-border-col-readonly: var(--pd-cb-border-col, var(--pd-default-col));
-      }
-
-    `
-    ];
-  }
-  firstUpdated() {
-    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";
-        } else {
-          this.value = elCollection[keyValue].valueName;
-        }
-        elCollection[keyValue].readonly = elCollection[keyValue].value === "true";
-      });
-      this.dispatchEvent(
-        new CustomEvent("validate-form", {
-          detail: {
-            singleElement: this,
-            errorMap: /* @__PURE__ */ new Map()
-          },
-          composed: true,
-          bubbles: true
-        })
-      );
-    });
-    const elColl = this.getElementsByTagName("pd-checkbox");
-    Object.keys(elColl).forEach((keyValue) => {
-      if (elColl[keyValue].value === "true") {
-        elColl[keyValue].readonly = true;
-        this.value = elColl[keyValue].valueName;
-      }
-    });
-  }
-  render() {
-    return html`
-      ${this._renderLabel()}
-      <div class="group-style input ${classMap({ "error": this.errorMsg.length > 0 })}">      
-        <slot></slot>        
-      </div>      
-      ${this._renderErrorMsg()}
-    `;
-  }
-}
-export {
-  PdRadioGroup
-};