@progressive-development/pd-forms 0.5.6 → 0.6.0

package/dist/src/PdCheckbox.js

@@ -1,230 +0,0 @@
-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.
- */
-class PdCheckbox extends PdBaseUIInput {
-  static get properties() {
-    return {
-      isSwitch: { type: Boolean },
-      _hasInner: { type: Boolean, state: true }
-    };
-  }
-  constructor() {
-    super();
-    this._inputType = INPUT_TYPE_CHECK;
-  }
-  static get styles() {
-    return [
-      PdBaseUIInput.styles,
-      css`
-      :host {
-        display: inline-block;
-
-        /* Style for active checkbox => use defaults from pd-icon if no custom properties set */
-        --pd-icon-col-active: var(--pd-cb-col);
-        --pd-icon-col-active-hover: var(--pd-cb-col-hover);
-        --pd-icon-bg-col-active: var(--pd-cb-bg-col);
-        --pd-icon-stroke-col-active: var(--pd-cb-stroke-col);
-        --pd-icon-stroke-col-active-hover: var(--pd-cb-stroke-col-hover);
-
-        /* Style for inactive checkbox */
-        --pd-icon-col: var(--pd-cb-unset-col);
-        --pd-icon-col-hover: var(--pd-cb-unset-col-hover);
-        --pd-icon-bg-col: var(--pd-cb-unset-bg-col);
-        --pd-icon-stroke-col: var(--pd-cb-unset-stroke-col);
-        --pd-icon-stroke-col-hover: var(--pd-cb-unset-stroke-col-hover);
-      }
-
-      /* Switch pd-icon => Prüfen, bei mir musste ich reflect setzten, wird das verwendet? */
-      :host([isSwitch]) {
-        /* derzeit keine Angaben */
-      }
-
-      .div-container {
-        display: flex;
-        align-items: center;
-        cursor: pointer;
-      }
-
-      .div-container.disabled {
-        opacity: 0.5;
-        cursor: auto;
-      }
-
-      .div-container.readonly {
-        cursor: auto;
-      }
-
-      /*
-       * Class checkbox for icon and a element (checkbox case)
-       */
-      .checkbox {
-        display: flex;
-        border-radius: 4px;
-        line-height: 0;
-        align-items: center;
-        justify-content: center;
-        /*
-        Wurde das hier für Border verwendet? Aktuell border in folgendem Element gesetzt
-        background-color: var(--pd-cb-border-col, var(--pd-primary-col, #067394));
-        */
-
-      }
-
-      .checkbox pd-icon {
-        margin-right: .2rem;
-        margin-bottom: .2rem;
-        border: 2px solid var(--pd-cb-border-col, var(--pd-default-col));
-        border-radius: var(--pd-cb-border-radius, 3px);
-      }
-
-      .label {
-        margin-left: 0.1rem;
-        color: var(--pd-cb-font-col, var(--pd-default-font-input-col));
-        font-family: var(--pd-default-font-input-family);
-        text-align: left;
-        font-size: var(--pd-default-font-input-size);
-      }
-
-      .readonly .label {
-        color: var(--pd-cb-font-col-readonly, #4d4d4d);
-      }
-
-      .readonly .checkbox pd-icon {
-        border-color: var(--pd-cb-border-col-readonly, transparent);
-      }
-
-      /* Switch styles */
-      .switch {
-        height: var(--pd-cb-switch-height);
-        position: relative;
-        outline: 0;
-        -webkit-user-select: none;
-        -moz-user-select: none;
-        -ms-user-select: none;
-        user-select: none;
-      }
-
-      .switch .label {
-        margin-left: 0.5rem;
-      }
-
-      .switch-paddle {
-        display: inline-block;
-        vertical-align: baseline;
-        margin: 0;
-        position: relative;
-        min-width: 4rem;
-        max-width: 4rem;
-        height: 2rem;
-        border-radius: 0;
-        background: var(--pd-cb-switch-paddle-col, var(--pd-default-col));
-        font-weight: inherit;
-        color: inherit;
-        cursor: pointer;
-      }
-
-      .switch-paddle pd-icon {
-        position: absolute;
-        top: 0;
-        left: 0;
-        display: block;
-        width: 1.5rem;
-        height: 1.5rem;
-        -webkit-transform: translate3d(0, 0, 0);
-        transform: translate3d(0, 0, 0);
-        border: 2px solid var(--pd-cb-border-col, var(--pd-default-col));
-        box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
-        border-radius: var(--pd-cb-border-radius, 4px);
-        -webkit-transition: all 0.25s ease-out;
-        transition: all 0.25s ease-out;
-        content: '';
-      }
-
-      .disabled .switch-paddle {
-        cursor: auto;
-      }
-
-      .readonly .switch-paddle {
-        cursor: auto;
-        max-width: 2rem;
-        min-width: 2rem;
-        background: none;
-
-        /* Prüfen TODO
-        --pd-icon-bg: transparent;
-        --pd-icon-fill: var(--card-dark-red);
-        --pd-icon-fill-hover: var(--pd-icon-fill);
-        --pd-icon-fill-active: var(--card-medium-green);
-        */
-      }
-
-      .readonly .switch-paddle pd-icon {
-        border-color: var(--pd-cb-border-col-readonly, transparent);
-      }
-
-      .readonly .isChecked.switch-paddle pd-icon {
-        transform: translate3d(0, 0, 0);
-        left: 0rem;
-      }
-
-      .isChecked.switch-paddle pd-icon {
-          left: 2.25rem;
-      }
-
-      @media (min-width: 580px) {
-        :host {
-          font-size: 1rem;
-        }
-      }
-    `
-    ];
-  }
-  render() {
-    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 inputId = `${this.id}Check`;
-    return html`
-      ${this._renderLabel(inputId)}
-      <div @click="${this.onClick}" class="${classMap(classMapVal)}">
-        <a href="#" @click="${this.linkClick}" @keypress="${this.onKeyPress}" class="${classMap(aClassMap)}">
-          <pd-icon icon="${this.isSwitch ? "checkBox" : "checkBoxOnlyCheck"}" class="small" ?activeIcon="${checked}"></pd-icon>
-        </a>
-        ${this._hasInner ? html`
-          <span class="label">
-            <slot></slot>
-          </span>` : ""}
-      </div>
-      ${this._renderErrorMsg()}
-    `;
-  }
-  onClick(e) {
-    if (this.disabled || this.readonly) {
-      return;
-    }
-    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/dist/src/PdFormContainer.js

@@ -1,167 +0,0 @@
-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.
- * 
- * Lit element container for pd input elements.
- * 
- * Used to:
- * - Automatically validation of form content
- * - Success/NotReady information for form-container
- */
-class PdFormContainer extends PdBaseUI {
-  static get styles() {
-    return [
-      PdBaseUI.styles,
-      css`
-      :host {
-        display: flex;
-        flex-direction: column;
-        align-items: left;
-        gap: 20px;
-      }
-
-      .validation-info-container {
-        padding-top: var(--pd-form-row-padding-top, 10px);
-      }
-
-      .validation-info {
-        font-family: var(--pd-default-font-content-family);
-        font-size: var(--pd-form-info-font-size, 0.8em);
-        padding: 0.5em;
-        color:#58585a;
-        border-radius: var(--pd-border-radius, 0);
-        -moz-border-radius: var(--pd-border-radius, 0);
-        width:70%;
-        max-width:780px;
-        min-width:200px;
-      }
-
-      .filled {                
-        border-left: 4px solid var(--pd-default-success-col);
-        border-right: 4px solid var(--pd-default-success-col);
-        border-top: 1px solid var(--pd-default-success-col);
-        border-bottom: 1px solid var(--pd-default-success-col);
-        background-color: var(--pd-default-success-light-col);
-      }
-
-      .unfilled {                
-        border-left: 4px solid var(--pd-default-error-col);
-        border-right: 4px solid var(--pd-default-error-col);
-        border-top: 1px solid var(--pd-default-error-col);
-        border-bottom: 1px solid var(--pd-default-error-col);
-        background-color: var(--pd-default-error-light-col);
-      }
-
-    `
-    ];
-  }
-  static get properties() {
-    return {
-      requiredFieldInfo: { type: Boolean },
-      commonError: { type: String },
-      _requiredFieldsValid: { type: Boolean, state: true }
-    };
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    this.addEventListener("validate-form", this._validateForm);
-  }
-  disconnectedCallback() {
-    super.connectedCallback();
-    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", { id: "pd.form.required.valid" }) : msg("* Pflichtfeld", { id: "pd.form.required.info" }))}
-          </p>
-        </div>` : ""}
-      </form>
-    `;
-  }
-  _validateForm(e) {
-    const reqEl = this.querySelectorAll("[required]");
-    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", { 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 = "";
-      }
-    });
-    this._requiredFieldsValid = e.detail.errorMap.size === 0;
-    const validateByType = (fieldType, validFunc, invalidMsgTxt) => {
-      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 tmpEl = el;
-        if (!e.detail.errorMap.has(el.id) && el.value && el.value.length > 0) {
-          if (validFunc(el.value)) {
-            tmpEl.errorMsg = "";
-          } else {
-            tmpEl.errorMsg = invalidMsgTxt || `Invalid format for ${fieldType}`;
-            e.detail.errorMap.set(el.id, tmpEl.errorMsg);
-          }
-        }
-      });
-    };
-    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.replaceAll(",", ".")),
-      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) {
-    const mValid = /^\+?[0-9 ]{7,15}$/.test(nr);
-    return mValid;
-  }
-}
-export {
-  PdFormContainer
-};

package/dist/src/PdFormRow.js

@@ -1,92 +0,0 @@
-import { css, html } from "lit";
-import { PdBaseUI } from "./PdBaseUi.js";
-/**
- * @license
- * Copyright (c) 2021 PD Progressive Development UG. All rights reserved.
- */
-class PdFormRow extends PdBaseUI {
-  static get styles() {
-    return css`
-    :host {
-      
-      /* Define size for row, depends on media queries */
-      --my-row-width: var(--pd-form-row-base-width, 800px);
-      --my-gap: var(--pd-form-row-gap, 20px);
-      display: flex;
-      flex: 1 1 100%;      
-      /*margin: 0 0 .5rem 0;*/
-      box-sizing: border-box;
-      width: 100%;      
-      gap: var(--my-gap);           
-      align-items: var(--pd-form-row-align-item, flex-start);
-      padding-top: var(--pd-form-row-padding-top, 10px);      
-    }
-
-    ::slotted(.full-size) {
-      --pd-input-field-width: 100%;
-    }
-
-    ::slotted(.quarter1) {      
-      --pd-input-field-width: calc(var(--my-row-width) * 0.25  - (var(--my-gap) * 0.75));
-      
-    }
-    
-    ::slotted(.quarter1-area) {      
-      --pd-input-field-width: calc((var(--my-row-width) - 5px) * 0.25  - (var(--my-gap) * 0.75));
-      
-    }
-
-    ::slotted(.quarter2) {      
-      --pd-input-field-width: calc((var(--my-row-width) * 0.5) - (var(--my-gap) / 2));          
-      
-    }
-
-    ::slotted(.quarter2-area) {      
-      --pd-input-field-width: calc(((var(--my-row-width) - 8px) * 0.5) - (var(--my-gap) / 2));
-    }
-
-    ::slotted(.quarter3) {      
-      --pd-input-field-width: calc(var(--my-row-width) * 0.75  - (var(--my-gap) * 0.25));          
-    }    
-    /* Area is longer? Scrollbar? */
-    ::slotted(.quarter3-area) {
-      --pd-input-field-width: calc((var(--my-row-width) - 10px) * 0.75  - (var(--my-gap) * 0.25));          
-    }
-
-    ::slotted(.quarter4) {
-      --pd-input-field-width: var(--my-row-width);                
-    }   
-    /* Area is longer? Scrollbar? */
-    ::slotted(.quarter4-area) {
-      --pd-input-field-width: calc(var(--my-row-width) - 15px);
-    }
-
-    @media (max-width: 930px) {            
-      :host {
-        --my-row-width: 600px;        
-      }      
-    }
-    @media (max-width: 650px) {            
-      :host {
-        --my-row-width: 400px;        
-        --my-gap: 10px;
-      }
-    }
-    @media (max-width: 450px) {
-      :host {
-        --my-row-width: 300px;        
-        --my-gap: 8px;
-      }
-    }
-
-    `;
-  }
-  render() {
-    return html`      
-        <slot></slot>      
-    `;
-  }
-}
-export {
-  PdFormRow
-};

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
-};