@progressive-development/pd-spa-helper 0.3.102 → 0.3.104

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

@@ -0,0 +1,227 @@
+import { css, html } from "lit";
+import "../../pd-icon/pd-icon.js";
+import { PdBaseUI } from "./PdBaseUi.js";
+import { SharedInputStyles } from "./shared-input-styles.js";
+import "../pd-hover-box.js";
+/**
+ * @license
+ * Copyright (c) 2021 PD Progressive Development UG. All rights reserved.
+ *
+ * Abstract base lit class for pd-input elements.
+ *
+ * Used from:
+ * - pd-checkbox
+ * - pd-input
+ * - pd-input-area
+ * - pd-radio-group
+ * - pd-range
+ * - pd-select
+ *
+ * Used to:
+ * - define css (import additional shared-input-styles.js)
+ * - define common properties (detailieren, aktuell zu viele bzw. nicht für alle sub-elemente gültig)
+ * - handle error msg (getter/setter)
+ * - helpers for validation event after change and render label/error elements.
+ *
+ * Events:
+ *  - validate-form => fired when input element changed its value.
+ *  - enter-pressed => fired when enter pressed.
+ *  - field-change => fired when input element changed its value.
+ *
+ * Custom Properties (shared-input-styles):
+ * ... TODO
+ *
+ */
+const INPUT_TYPE_TEXT = 1;
+const INPUT_TYPE_SELECT = 2;
+const INPUT_TYPE_RANGE = 4;
+const INPUT_TYPE_AREA = 5;
+const INPUT_TYPE_DATE = 7;
+const INPUT_TYPE_FILE = 8;
+const KEY_RETURN = 13;
+let delayTimer = 0;
+const DELAY_WAIT_TIME_MS = 400;
+class PdBaseUIInput extends PdBaseUI {
+  /**
+   * Fired when an input element change its values.
+   * @event validate-form
+   */
+  /**
+   * Fired when enter was pressend during focus on input element.
+   * @event enter-pressed
+   */
+  /**
+   * Fired when field-value changed.
+   * @event field-change
+   */
+  static get styles() {
+    return [
+      PdBaseUI.styles,
+      SharedInputStyles,
+      css`
+            .label-header {
+              display: flex;
+              align-items: end;
+              justify-content: space-between;
+            }
+
+            .label-header pd-icon {
+              --pd-icon-size: 1.25rem;
+              --pd-icon-col-active: var(--pd-default-col);
+              --pd-icon-col-active-hover: var(--pd-default-hover-col);
+              --pd-icon-stroke-width: 0;
+              padding-right: 5px;
+              cursor: help;
+            }
+          `
+    ];
+  }
+  static get properties() {
+    return {
+      gradient: { type: Boolean },
+      // true for gradient background
+      disabled: { type: Boolean },
+      // disabled flag for element
+      readonly: { type: Boolean },
+      // readonly flag for element
+      required: { type: Boolean },
+      // required flag for element
+      requiredMsg: { type: String },
+      // specific error msg for required field
+      helperTxt: { type: String },
+      // helper text
+      valueName: { type: String },
+      defaultRequiredChar: { type: String },
+      defaultValue: { type: String },
+      // default value for input element (used for reset) TODO: Das hier ggf. automatisch mit erstem gesetzten Wert füllen?
+      label: { type: String },
+      // label text for input
+      value: { type: String },
+      // current value (set from outside) TODO: Typ (Object, Number, Txt, Bool...)
+      _errorMsg: { type: String, state: true },
+      // errorMsg (could set fronm outside for busines validation, internal validation=> todo)
+      _inputType: { type: Number, state: true }
+      // number value for type (text, select, range....), set constructor of sub-class
+    };
+  }
+  constructor() {
+    super();
+    this.gradient = false;
+    this.disabled = false;
+    this.readonly = false;
+    this.defaultValue = "";
+    this.label = "";
+    this.value = "";
+    this._errorMsg = "";
+    this._inputType = -1;
+    this.valueName = "";
+    this.defaultRequiredChar = "*";
+  }
+  // Test: Clear input with value => Dann in BasisKlasse und alle leiten von Basis UI Element ab
+  clear() {
+    this.value = "";
+  }
+  // Test: Reset input with value
+  reset() {
+    this.value = this.defaultValue || "";
+  }
+  get errorMsg() {
+    return this._errorMsg;
+  }
+  set errorMsg(msg) {
+    this._errorMsg = msg;
+  }
+  /*
+       get value() {
+           return this._value;
+       }
+  
+       set value(newValue) {
+           console.info("Meine Werte vor Set _value, input.value, newValue: ", this._value,  this._input.value, newValue);
+           this._value = newValue;
+           this._input.value = newValue;
+           console.info("Meine Werte nach Set: ", this._value,  this._input.value, newValue);
+       }
+       */
+  _generateValidateEvent() {
+    this.dispatchEvent(
+      new CustomEvent("validate-form", {
+        detail: {
+          singleElement: this,
+          errorMap: /* @__PURE__ */ new Map()
+        },
+        composed: true,
+        bubbles: true
+      })
+    );
+  }
+  _handleChangedValue(newValue, event, checkReturn, showValidateMsg) {
+    const changed = this.value !== newValue;
+    this.value = newValue;
+    const keyCode = event.keyCode ? Number(event.keyCode) : -1;
+    const eventDetail = {
+      value: newValue,
+      name: this.valueName,
+      keyCode,
+      changed
+    };
+    const handleReturn = checkReturn && keyCode === KEY_RETURN;
+    if (handleReturn) {
+      this.dispatchEvent(
+        new CustomEvent("enter-pressed", {
+          detail: eventDetail,
+          composed: true,
+          bubbles: true
+        })
+      );
+      event.preventDefault();
+    }
+    if (changed) {
+      this.dispatchEvent(
+        new CustomEvent("field-change", {
+          detail: eventDetail,
+          composed: true,
+          bubbles: true
+        })
+      );
+    }
+    if (showValidateMsg) {
+      clearTimeout(delayTimer);
+      delayTimer = setTimeout(
+        this._generateValidateEvent.bind(this),
+        DELAY_WAIT_TIME_MS
+      );
+    }
+  }
+  _renderErrorMsg() {
+    return this.errorMsg && this.errorMsg.length > 0 ? html`
+        <div class="error-box error">
+          <p class="error-msg">${this.errorMsg}</p>
+        </div>
+      ` : "";
+  }
+  _renderLabel(forParam, additionalValue) {
+    return html`
+          <div class="label-header">
+            <label for="${forParam}">${this.label}${this.required && this.label ? this.defaultRequiredChar : ""}${additionalValue ? html` - <b>${additionalValue}</b>` : ""}</label>
+            ${this.helperTxt ? html`
+                
+                <pd-hover-box>
+                    <pd-icon slot="normal-view" icon="helpIcon" activeIcon></pd-icon>                    
+                    <p slot="info-view">${this.helperTxt}</p>
+                </pd-hover-box>
+                
+                ` : ""}
+          </div>
+        `;
+  }
+}
+export {
+  INPUT_TYPE_AREA,
+  INPUT_TYPE_DATE,
+  INPUT_TYPE_FILE,
+  INPUT_TYPE_RANGE,
+  INPUT_TYPE_SELECT,
+  INPUT_TYPE_TEXT,
+  PdBaseUIInput
+};

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

@@ -0,0 +1,194 @@
+import { css, html } from "lit";
+import { PdBaseUI } from "./PdBaseUi.js";
+/**
+ * @license
+ * Copyright (c) 2021 PD Progressive Development UG. All rights reserved.
+ */
+class PdButton extends PdBaseUI {
+  /**
+   * @event button-clicked
+   */
+  static get styles() {
+    return [
+      PdBaseUI.styles,
+      css`
+       :host {        
+         
+         font-family: var(--pd-default-font-title-family);
+         font-size: var(--pd-button-font-size, 1em);
+         font-weight: var(--pd-button-font-weight, normal);
+         
+         /*        
+         height: 100%;         
+         width: 100%; => Ohne diese Angabe eht die % Angaben icht
+         */                    
+         margin: 0.5rem;
+         margin-left: 0; /* Um gleich zum input field zu sein */
+ 
+         pointer-events: none;
+       }
+ 
+       .button-div {
+ 
+         display: flex;      
+         justify-content: center;
+         align-items: center;
+         width: var(--pd-button-width, 140px);
+         height: var(--pd-button-height, 2rem);
+         
+         border-radius: var(--pd-border-radius, 1px);
+ 
+         background-color: var(--pd-button-bg-col, var(--pd-default-dark-col));
+         color: var(--pd-button-font-col, var(--pd-default-bg-col));
+         border: var(--pd-button-border, 0);
+         cursor: pointer;
+ 
+         box-shadow: var(--pd-button-box-shadow, none);
+ 
+         pointer-events: all;
+       }
+ 
+       :host(:not([disabled])) .button-div:hover {
+         box-shadow: var(--pd-button-box-shadow-hover, -1px 1px 2px var(--pd-default-dark-col)); 
+         background-color: var(--pd-button-bg-col-hover, var(--pd-default-hover-col));
+         color: var(--pd-button-font-col-hover, var(--pd-default-dark-col));
+         transition: background-color 0.4s ease 0s;        
+         --pd-button-border: var(--pd-button-border-hover);
+       }
+
+       :host(:not([disabled])):host([primary]) .button-div:hover {         
+         background-color: var(--pd-button-primary-bg-col-hover, var(--pd-default-hover-col));      
+         color: var(--pd-button-primary-font-col-hover, var(--pd-default-bg-col));   
+         --pd-button-border: var(--pd-button-border-hover);
+       }
+ 
+       :host([primary]) .button-div {
+         background-color: var(--pd-button-primary-bg-col, var(--pd-default-col));
+         color: var(--pd-button-primary-font-col, var(--pd-default-bg-col));
+       }
+ 
+       :host([gradient]) .button-div {
+         background: linear-gradient(to right, var(--my-background-gradient-color, red) 0%, var(--my-background-color, blue) 100%);      
+       }      
+ 
+       :host([disabled]) .button-div {
+         cursor: auto;            
+         border-color: var(--pd-default-disabled-col);
+         background-color: var(--pd-button-bg-col-disabled, var(--pd-default-disabled-col));
+         color: var(--pd-button-font-col-disabled, black);
+         --pd-button-border: var(--pd-button-border-disabled);
+       }
+ 
+       /* Style for Button */
+       a {
+         display: inline-block;
+         text-decoration: none;
+         border: none;        
+         white-space: nowrap;
+         margin: 0.5rem;
+         pointer-events: none;        
+ 
+         /*box-shadow:  -2px 2px 4px #999;/* TODO: From var */
+         /*border-bottom: 1px solid var(--my-border-color);*/
+         /*will-change: transform; Dann über Menu bei Scroll...*/
+ 
+         /*
+         transition-property: box-shadow, background;
+         transition: .2s ease-in;
+         box-sizing: border-box;
+         */
+         
+         /*overflow: hidden;
+         text-overflow: ellipsis;*/
+         
+         /*padding: var(--squi-input-padding, .5rem);*/
+       }
+             
+ 
+       /* button icon not integrated at the moment */
+       .button-icon {
+         display: flex;
+         align-items: center;
+         justify-content: center;
+         white-space: nowrap;
+         --pd-icon-fill: var(--icon-fill-light);
+         --pd-icon-fill-hover: var(--icon-fill-light);
+       }
+       
+       .button-icon:not([disabled]) {
+         --pd-icon-fill: var(--app-primary-color);
+         --pd-icon-fill-hover: var(--app-primary-color-dark);
+       }
+ 
+       .button-icon pd-icon {
+         max-width: 1.25rem;
+         height: 1.25rem;
+         width: 1.25rem;
+         margin: 0 .15rem;
+       }
+ 
+       .button-icon.small pd-icon {
+         max-width: 1.25rem;
+         height: 1.25rem;
+         width: 1.25rem;
+         padding-right: 0.15rem;
+       }
+ 
+       .button-icon svg {
+           max-width: 1rem;
+           height: 1rem;
+           width: 1rem;
+           padding-right: .5rem;
+           fill: var(--app-primary-color);
+       }
+       
+       .button-icon:hover pd-icon,    
+       .button-icon:hover svg {
+           fill: var(--app-primary-color);
+       }            
+ 
+       @media (min-width: 580px) {        
+         .button-icon pd-icon {
+             margin: 0 .5rem;
+         }        
+         .button-icon.small pd-icon {
+             padding-right: .5rem;
+         }
+       }
+ 
+     `
+    ];
+  }
+  static get properties() {
+    return {
+      primary: { type: Boolean },
+      gradient: { type: Boolean },
+      disabled: { type: Boolean },
+      text: { type: String },
+      value: { type: String }
+    };
+  }
+  constructor() {
+    super();
+    this.primary = false;
+    this.gradient = false;
+    this.disabled = false;
+    this.text = "Ok";
+  }
+  render() {
+    return html`
+     <div @click="${this._handleClick}" class="button-div">
+       <a ?disabled="${this.disabled}">${this.text}</a>
+     </div>`;
+  }
+  _handleClick() {
+    if (!this.disabled) {
+      this.dispatchEvent(new CustomEvent("button-clicked", {
+        detail: this.value
+      }));
+    }
+  }
+}
+export {
+  PdButton
+};

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

@@ -0,0 +1,167 @@
+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", { desc: "#pd.form.required.valid#" }) : msg("* Pflichtfeld", { desc: "#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", { desc: "#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", { desc: "#pd.form.field.invalid.mail#" })
+    );
+    validateByType(
+      "phone",
+      PdFormContainer._phoneIsValid,
+      msg("Format +49123 123456 verwenden", { desc: "#pd.form.field.invalid.phone#" })
+    );
+    validateByType(
+      "vat",
+      PdFormContainer._vatIsValid,
+      msg("Format DE0123456789 verwenden", { desc: "#pd.form.field.invalid.vat#" })
+    );
+    validateByType(
+      "number",
+      (val) => !isNaN(val),
+      msg("Nur Zahlen erlaubt", { desc: "#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/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
+};