@progressive-development/pd-contact 0.1.69 → 0.5.0

package/dist/index.js

@@ -0,0 +1,10 @@
+import { PdContact } from "./src/PdContact.js";
+import { templates } from "./locales/be.js";
+import { templates as templates2 } from "./locales/de.js";
+import { templates as templates3 } from "./locales/en.js";
+export {
+  PdContact,
+  templates as beTemplates,
+  templates2 as deTemplates,
+  templates3 as enTemplates
+};

package/dist/locales/be.js

@@ -0,0 +1,20 @@
+const templates = {
+  "pd.contact.address.title": `Adres`,
+  "pd.contact.check.company": `Bedrijf`,
+  "pd.contact.check.private": `Particulier`,
+  "pd.contact.label.additional": `Adres toevoeging`,
+  "pd.contact.label.btw": `BTW-nummer`,
+  "pd.contact.label.city": `Plaats`,
+  "pd.contact.label.company": `Bedrijfsnaam`,
+  "pd.contact.label.email": `E-mail`,
+  "pd.contact.label.firstName": `Voornaam`,
+  "pd.contact.label.lastName": `Achternaam`,
+  "pd.contact.label.phone": `Telefoon`,
+  "pd.contact.label.street": `Straat`,
+  "pd.contact.label.streetNr": `Nr.`,
+  "pd.contact.label.type": `Type`,
+  "pd.contact.label.zip": `Postcode`
+};
+export {
+  templates
+};

package/dist/locales/de.js

@@ -0,0 +1,20 @@
+const templates = {
+  "pd.contact.address.title": `Adresse`,
+  "pd.contact.label.type": `Typ`,
+  "pd.contact.check.private": `Privatperson`,
+  "pd.contact.check.company": `Unternehmen`,
+  "pd.contact.label.company": `Name des Unternehmen`,
+  "pd.contact.label.btw": `USt-IdNr.`,
+  "pd.contact.label.firstName": `Vorname`,
+  "pd.contact.label.lastName": `Nachname`,
+  "pd.contact.label.street": `Strasse`,
+  "pd.contact.label.streetNr": `Nr.`,
+  "pd.contact.label.zip": `PLZ`,
+  "pd.contact.label.city": `Ort`,
+  "pd.contact.label.additional": `Addresszusatz`,
+  "pd.contact.label.phone": `Telefon`,
+  "pd.contact.label.email": `E-mail`
+};
+export {
+  templates
+};

package/dist/locales/en.js

@@ -0,0 +1,20 @@
+const templates = {
+  "pd.contact.address.title": `Address`,
+  "pd.contact.check.company": `Company`,
+  "pd.contact.check.private": `Private Individual`,
+  "pd.contact.label.additional": `Address Additional Info`,
+  "pd.contact.label.btw": `VAT ID`,
+  "pd.contact.label.city": `City`,
+  "pd.contact.label.company": `Company Name`,
+  "pd.contact.label.email": `Email`,
+  "pd.contact.label.firstName": `First Name`,
+  "pd.contact.label.lastName": `Last Name`,
+  "pd.contact.label.phone": `Phone`,
+  "pd.contact.label.street": `Street`,
+  "pd.contact.label.streetNr": `No.`,
+  "pd.contact.label.type": `Type`,
+  "pd.contact.label.zip": `ZIP Code`
+};
+export {
+  templates
+};

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

@@ -0,0 +1,2 @@
+import { PdCheckbox } from "./src/PdCheckbox.js";
+window.customElements.define("pd-checkbox", PdCheckbox);

package/dist/node_modules/@progressive-development/pd-forms/pd-form-container.js

@@ -0,0 +1,2 @@
+import { PdFormContainer } from "./src/PdFormContainer.js";
+window.customElements.define("pd-form-container", PdFormContainer);

package/dist/node_modules/@progressive-development/pd-forms/pd-form-row.js

@@ -0,0 +1,2 @@
+import { PdFormRow } from "./src/PdFormRow.js";
+window.customElements.define("pd-form-row", PdFormRow);

package/dist/node_modules/@progressive-development/pd-forms/pd-hover-box.js

@@ -0,0 +1,2 @@
+import { PdHoverBox } from "./src/PdHoverBox.js";
+window.customElements.define("pd-hover-box", PdHoverBox);

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

@@ -0,0 +1,2 @@
+import { PdInput } from "./src/PdInput.js";
+window.customElements.define("pd-input", PdInput);

package/dist/node_modules/@progressive-development/pd-forms/pd-radio-group.js

@@ -0,0 +1,2 @@
+import { PdRadioGroup } from "./src/PdRadioGroup.js";
+window.customElements.define("pd-radio-group", PdRadioGroup);

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

@@ -0,0 +1,86 @@
+import { PdBaseUIInput, INPUT_TYPE_DATE, INPUT_TYPE_TEXT, INPUT_TYPE_FILE, INPUT_TYPE_SELECT, INPUT_TYPE_AREA } from "./PdBaseUiInput.js";
+import { SharedInputFieldStyles } from "./shared-input-field-styles.js";
+/**
+ * @license
+ * Copyright (c) 2021 PD Progressive Development UG. All rights reserved.
+ *
+ * Abstract base lit class for pd-input elements.
+ *
+ * Used from:
+ * - pd-input
+ * - pd-input-area
+ * - pd-select
+ *
+ * Used to:
+ * - define element specific css
+ * - handle auto completion
+ *
+ * Events:
+ * - TODO
+ *
+ * Custom Properties (shared-input-field-styles):
+ * ... TODO
+ *
+ */
+class PdBaseInputElement extends PdBaseUIInput {
+  /**
+   * Fire when the `pd-input` loses focus.
+   * @event focus-lost
+   */
+  static get styles() {
+    return [PdBaseUIInput.styles, SharedInputFieldStyles];
+  }
+  static get properties() {
+    return {
+      placeHolder: { type: String },
+      /* not used at the moment */
+      name: { type: String },
+      autoCompleteName: { type: String }
+    };
+  }
+  constructor() {
+    super();
+    this.placeHolder = "";
+    this.name = "";
+    this._input = {};
+  }
+  firstUpdated() {
+    this._input = this.shadowRoot.querySelector(this._getElementName());
+  }
+  focus() {
+    this._input.focus();
+  }
+  _onBlur(event) {
+    this.dispatchEvent(
+      new CustomEvent("focus-lost", {
+        detail: {
+          value: this._input.value
+        },
+        composed: true,
+        bubbles: true
+      })
+    );
+    this._handleChangedValue(this._input.value, event, true, true);
+  }
+  _onKeyUp(event) {
+    this._handleChangedValue(this._input.value, event, true);
+  }
+  _getElementName() {
+    switch (this._inputType) {
+      case INPUT_TYPE_AREA:
+        return "textarea";
+      case INPUT_TYPE_SELECT:
+        return "select";
+      case INPUT_TYPE_FILE:
+      case INPUT_TYPE_TEXT:
+        return "input";
+      case INPUT_TYPE_DATE:
+        return "pd-input";
+      default:
+        return "";
+    }
+  }
+}
+export {
+  PdBaseInputElement
+};

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

@@ -0,0 +1,33 @@
+import { LitElement } from "lit";
+import { updateWhenLocaleChanges } from "@lit/localize";
+import { PDColorStyles, PDFontStyles } from "@progressive-development/pd-shared-styles";
+/**
+ * @license
+ * Copyright (c) 2021 PD Progressive Development UG. All rights reserved.
+ *  
+ * Abstract base lit class for all pd-form elements.
+ * Import shared-global-style to make common custom properties available to all components.
+ * 
+ * Used from:
+ * - pd-base-ui-input
+ * 
+ * Used to:
+ * - define css (import shared-global-styles.js)
+ * - define common properties (detailieren, aktuell keine)
+ * - define updateWhenLocaleChanges for all pd-elements (check, aktuell nur für pd-form-container benötigt)
+ * 
+ * Custom Properties (shared-global-styles):
+ * ... TODO
+ */
+class PdBaseUI extends LitElement {
+  static get styles() {
+    return [PDColorStyles, PDFontStyles];
+  }
+  constructor() {
+    super();
+    updateWhenLocaleChanges(this);
+  }
+}
+export {
+  PdBaseUI
+};

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

@@ -0,0 +1,229 @@
+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_CHECK = 3;
+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_CHECK,
+  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/PdCheckbox.js

@@ -0,0 +1,230 @@
+import { css, html } from "lit";
+import { classMap as o } from "../../../lit-html/directives/class-map.js";
+import "../../pd-icon/pd-icon.js";
+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="${o(classMapVal)}">
+        <a href="#" @click="${this.linkClick}" @keypress="${this.onKeyPress}" class="${o(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
+};