@progressive-development/pd-contact 0.5.0 → 0.5.2

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

@@ -1,72 +0,0 @@
-import { css, html } from "lit";
-import { classMap as o } from "../../../lit-html/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 ${o({ "error": this.errorMsg.length > 0 })}">      
-        <slot></slot>        
-      </div>      
-      ${this._renderErrorMsg()}
-    `;
-  }
-}
-export {
-  PdRadioGroup
-};

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