@progressive-development/pd-spa-helper 0.4.0 → 0.5.0

package/dist/node_modules/@progressive-development/pd-forms/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/node_modules/@progressive-development/pd-forms/src/PdInput.js

@@ -1,79 +0,0 @@
-import { css, html } from "lit";
-import "../../pd-icon/pd-icon.js";
-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/node_modules/@progressive-development/pd-forms/src/generated/locale/be.js

@@ -1,11 +0,0 @@
-const templates = {
-  "s369cb9ac30f626a2": `* Verplichte in te vullen`,
-  "s441bc7f34cdb5af3": `Vul dit veld in`,
-  "s570d46ddb2a278ce": `Ongeldig VAT, gebruik BE0123456789`,
-  "s5b7e33463603827f": `Ongeldig telefoonnummer, gebruik +32 494 667085`,
-  "s82000595de0f83d0": `Ongeldig e-mailadres, gebruik mail@test.be`,
-  "s8716290d3f8456dd": `Alleen nummers toegestaan`
-};
-export {
-  templates
-};

package/dist/node_modules/@progressive-development/pd-forms/src/generated/locale/en.js

@@ -1,11 +0,0 @@
-const templates = {
-  "s369cb9ac30f626a2": `* Pflichtfeld`,
-  "s441bc7f34cdb5af3": `Eingabe erforderlich`,
-  "s82000595de0f83d0": `Format mail@test.de verwenden`,
-  "s5b7e33463603827f": `Format +49123 123456 verwenden`,
-  "s570d46ddb2a278ce": `Format DE0123456789 verwenden`,
-  "s8716290d3f8456dd": `Nur Zahlen erlaubt`
-};
-export {
-  templates
-};

package/dist/node_modules/@progressive-development/pd-forms/src/shared-input-field-styles.js

@@ -1,152 +0,0 @@
-import { css } from "lit";
-/**
- * @license
- * Copyright (c) 2021 PD Progressive Development UG. All rights reserved.
- */
-const SharedInputFieldStyles = css`
-
-  /* Describe input div (with icon) around input/select/area element */  
-  .input {
-    display: inline-block;
-    /*position: relative; Prüfen: Wenn das an ist, felder über scroll-menu?
-    position: relative;    
-    */
-    /* pd-icon smaller than input 
-    --pd-icon-computed-size: calc(var(--my-input-height) * 0.75); /* calc */
-
-    /* Hack um eine Form Row (input mit Button => Booking) zu bekommen*/
-    /*padding-top: var(--squi-input-padding, 0.5rem); */
-  }
-
-
-  :host([text-right]) .input > input {
-    text-align: right;
-  }
-  :host([text-left]) .input > input {
-    text-align: left;
-  }
-
-  :host([icon-left]) .input pd-icon {
-    display: inline-block;
-    left: 5px;
-  }
-
-  :host([icon-left]) .input > input {
-    padding-left: calc(var(--pd-input-field-height, 2rem) + 5px);
-  }
-
-  :host([icon-right]) .input pd-icon {
-    display: inline-block;
-    right: 5px;
-  }
-
-  :host([icon-right]) .input > input {    
-    padding-right: calc(var(--pd-input-field-height, 2rem) + 5px);
-  }
-
-  /* relative hack => see comment above in .input class, do it only for icon fiels relative for the moment*/  
-  :host([icon-right]) .input {    
-    position: relative;    
-  }
-  :host([icon-left]) .input {    
-    position: relative;    
-  }  
-
-  pd-icon {    
-    display: none;
-    position: absolute;
-    --pd-icon-size: var(--pd-input-icon-size, calc(var(--pd-input-field-height, 2rem) * 0.9));
-    --pd-icon-col-active: var(--pd-input-icon-color, #edf7fd);
-    --pd-icon-stroke-col-active: var(--pd-input-icon-stroke-color, var(--pd-default-color));
-    top: 2px;
-  }
-
-  pd-icon:hover {
-    cursor: pointer;
-  }
-
-  /* 
-   * Class input style used for input, select and text-area element.
-   * Not use iput here => because of own select css... => Nachtrag: Aber ein paar allgemeine Angaben rausziehen
-   */
-  .input-style {
-    width: var(--pd-input-field-width, 250px);
-    padding: var(--pd-input-field-padding, 0.25rem);
-    background-color: var(--pd-input-field-bg-col, var(--pd-default-bg-col));
-    /*opacity: 80%;*/
-    color: var(--pd-default-font-input-col);
-    /*font-size: var(--squi-input-font-size, calc(var(--squi-input-height) / 1.8));*/
-    font-size: var(--pd-default-font-input-size);
-    font-family: var(--pd-default-font-input-family);
-    
-    border: var(--pd-input-field-border, 1px solid var(--pd-default-light-col));
-    box-shadow: inset 0 1px 2px rgba(50, 48, 49, 0.1);
-    border-bottom: var(--pd-input-field-border-bottom, 
-      2px solid var(--pd-default-col));
-    border-radius: var(--pd-border-radius, 0);
-  }
-
-  /* Hover for input, area, select */
-  .input-style:hover {
-    border-color: var(--pd-input-field-border-col-hover, var(--pd-default-hover-col));
-  }
-
-  /* Fokus for input, area => select with own css.? */
-  .input-style:focus {
-    border: var(--pd-input-field-border-focus, 2px solid var(--pd-default-col));
-    outline: 0;
-  }
-
-  /* Höhe soll nicht für Text Area gelten, daher ausgelagert (überschreibt sonst rows) */
-  input.input-style,
-  select.input-style {
-    height: var(--pd-input-field-height, 2.2rem);
-  }
-
-  /* Disabled for input, area => select with own css.? */
-  .input-style[disabled] {
-    opacity: 0.5;
-    cursor: auto;    
-    background-color: var(--pd-input-field-bg-col-disabled, #e9e9e9);
-    border-bottom: var(--pd-input-field-border-bottom-disabled, 
-      2px solid var(--pd-default-disabled-col));
-  }
-
-  .input-style[readonly]:hover,
-  .input-style[disabled]:hover {
-    border-color: var(--pd-default-disabled-col);
-  }
-
-  /* Disabled for input, area => select with own css.? */
-  .input-style[readonly] {
-    border-bottom: var(--pd-input-field-border-bottom-disabled, 
-      2px solid var(--pd-default-disabled-col));
-  }
-  
-  /* error element style for input, area => select has own css.? */
-  .error .input-style {
-    border: 1px solid var(--pd-default-error-col);
-    color: var(--pd-default-error-col);
-    background-color: var(--pd-default-error-light-col);
-  }
-
-  /* Error Focus for input, area, select */
-  .error .input-style:focus {
-    border: 2px solid var(--pd-default-error-col);
-  }
-
-  /* Placeholder color for input and input-area */
-  ::placeholder {
-    color: var(--pd-input-placeholder-color, #474747e4);
-  }
-  :-ms-input-placeholder {
-    color: var(--pd-input-placeholder-color, #474747e4);
-  }
-  ::-ms-input-placeholder {
-    color: var(--pd-input-placeholder-color, #474747e4);
-  } 
-
-`;
-export {
-  SharedInputFieldStyles
-};

package/dist/node_modules/@progressive-development/pd-forms/src/shared-input-styles.js

@@ -1,64 +0,0 @@
-import { css } from "lit";
-/**
- * @license
- * Copyright (c) 2021 PD Progressive Development UG. All rights reserved.
- */
-const SharedInputStyles = css`
-  
-  /**
-   * Label used for input, select, input-area, range and radio-group.
-   * Not used in button, button-group, checkbox (may have a label...?), form-row, form-container 
-   */   
-  label {
-    display: block;
-    padding: var(--pd-input-label-padding, 0);
-    color: var(--pd-input-lable-col, var(--pd-default-dark-col));
-    text-align: var(--pd-input-label-align, left);
-    font-size: var(--pd-input-lable-font-size, 0.9em);
-    font-family: var(--pd-input-lable-font-family, var(--pd-default-font-title-family));
-    max-width: var(--pd-input-field-width, 250px);
-  }
-
-  /**
-   * Error box for input elements. Used for checkbox, radio-group, input, input-area, select, range
-   */
-  .error-box {
-    display: block;
-    color: var(--pd-default-error-col);
-    background: var(--pd-default-error-light-col);
-    border: 1px solid var(--pd-default-error-col);
-    border-radius: var(--pd-border-radius, 0);
-    max-width: var(--pd-input-field-width, 350px);
-  }
-  .error-box p {
-    margin: 0;
-    padding: 0.25rem 0.25rem 0.25rem 0.5rem;
-    font-size: .8rem;          
-  }
-
-  /* gradient noch aufräumen */
-  
-  .gradient {
-    background: linear-gradient(
-      to bottom,
-      var(--my-background-gradient-color) 0%,
-      var(--my-background-color) 100%
-    );
-  }
-
-  .error .gradient {
-    background: linear-gradient(
-      to bottom,
-      var(--my-background-gradient-color) 10%,
-      #f5979b 100%
-    );
-  }
-
-  .gradient[disabled] {
-    background: linear-gradient(to bottom, #ebebeb 0%, #999 100%);
-  }
-
-`;
-export {
-  SharedInputStyles
-};

package/dist/node_modules/@progressive-development/pd-icon/pd-icon.js

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