@progressive-development/pd-spa-helper 0.3.101 → 0.3.103

package/dist/node_modules/@progressive-development/pd-order/dist/node_modules/@progressive-development/pd-forms/src/PdFormRow.js

@@ -0,0 +1,92 @@
+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-order/dist/node_modules/@progressive-development/pd-forms/src/PdHoverBox.js

@@ -0,0 +1,108 @@
+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-order/dist/node_modules/@progressive-development/pd-forms/src/PdInput.js

@@ -0,0 +1,79 @@
+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-order/dist/node_modules/@progressive-development/pd-forms/src/PdRadioGroup.js

@@ -0,0 +1,72 @@
+import { css, html } from "lit";
+import { classMap as o } from "../../../lit/node_modules/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-order/dist/node_modules/@progressive-development/pd-forms/src/shared-input-field-styles.js

@@ -0,0 +1,152 @@
+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-order/dist/node_modules/@progressive-development/pd-forms/src/shared-input-styles.js

@@ -0,0 +1,64 @@
+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-order/dist/node_modules/@progressive-development/pd-icon/pd-icon.js

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