@progressive-development/pd-contact 0.1.68 → 0.5.0

package/dist/src/PdContact.js

@@ -0,0 +1,616 @@
+import { LitElement, css, html } from "lit";
+import { msg } from "@lit/localize";
+import { PDFontStyles } from "@progressive-development/pd-shared-styles";
+import "../node_modules/@progressive-development/pd-icon/pd-icon.js";
+import "../node_modules/@progressive-development/pd-forms/pd-checkbox.js";
+import "../node_modules/@progressive-development/pd-forms/pd-form-container.js";
+import "../node_modules/@progressive-development/pd-forms/pd-form-row.js";
+import "../node_modules/@progressive-development/pd-forms/pd-input.js";
+import "../node_modules/@progressive-development/pd-forms/pd-radio-group.js";
+/**
+ * @license
+ * Copyright (c) 2021 PD Progressive Development UG. All rights reserved.
+ */
+const countryPrefixes = {
+  de: "+49",
+  // Deutschland
+  be: "+32",
+  // Belgien
+  nl: "+31",
+  // Niederland
+  fr: "+33",
+  // Frankreich
+  es: "+34"
+  // Spanien
+};
+function transformPhone(phone, country) {
+  if (!phone || typeof phone !== "string") {
+    return "";
+  }
+  const countryPrefix = countryPrefixes[country];
+  if (!countryPrefix) {
+    throw new Error(`Unbekanntes Land: ${country}`);
+  }
+  const cleanedPhone = phone.replace(/\s+/g, "").replace(/[^0-9+]/g, "");
+  if (cleanedPhone.startsWith("+")) {
+    return cleanedPhone;
+  }
+  if (cleanedPhone.startsWith("0")) {
+    return countryPrefix + cleanedPhone.slice(1);
+  }
+  return "";
+}
+const C_TYPE = "type";
+const C_COMPANY = "companyName";
+const C_BTWNR = "vatNr";
+const C_FIRSTNAME = "firstName";
+const C_LASTNAME = "lastName";
+const C_STREET = "street";
+const C_CITY = "city";
+const C_ADDITIONAL = "additionalHint";
+const C_PHONE1 = "phone1";
+const C_EMAIL = "email";
+class PdContact extends LitElement {
+  static get styles() {
+    return [
+      PDFontStyles,
+      css`
+       :host {
+         display: block;
+       }
+
+       .contact {
+         display: flex;
+         flex-direction: column;
+       }
+
+       address {
+         color: var(--pd-contact-address-col, var(--pd-default-font-content-col));
+         line-height: 1.8;
+         font-style: normal;
+       }
+
+       dl {
+         margin: 0;
+         padding: 0;
+       }
+
+       dt {
+         font-weight: bold;
+         padding-top: 10px;
+         color: var(--pd-contact-address-title-col, var(--pd-default-font-title-col));
+       }
+
+       dd {
+         font-weight: 400;
+         font-size: 1em;
+         margin: 0;
+         padding: 0;
+       }
+
+       dd.larger {         
+        padding-top: 3px;
+        padding-bottom: 5px;
+       }
+
+       .contact-form {
+         --row-padding-top: 10px;
+       }
+
+       .link-icon {
+        --pd-icon-bg-col-active: #859900;
+        --pd-icon-bg-col-hover: #859900;
+        --pd-icon-size: 14px;
+        --pd-icon-stroke-col-active: white;
+        --pd-icon-col-active: white;
+       }
+
+       .link-item {
+          display: flex; 
+          align-items: center; 
+          text-decoration: none; 
+          color: var(--pd-default-font-link-col, inherit);
+       }
+
+       .link-item:hover {
+        color: var(--pd-default-font-link-col-hover, #451A46) ;
+       }
+
+     `
+    ];
+  }
+  static get properties() {
+    return {
+      addressTitle: { type: String },
+      addressRef: { type: String },
+      /**
+       * show (true) or not (false) tel number as link
+       */
+      phoneMailLink: { type: Boolean },
+      /**
+       * summary (true) or view (false) contact data
+       */
+      summary: { type: Boolean },
+      /**
+       * List with required contact fields, if not set use default (previous existing values to be consitent during update)
+       */
+      requiredFields: { type: Array },
+      /**
+       * List with showing input fields, if not set show all
+       */
+      inputFields: { type: Array },
+      contact: { type: Object },
+      match: { type: Object },
+      /**
+       * address type, business (true) or private (false), refactor, ist state internal? => _business, state:true
+       */
+      _business: { type: Boolean, state: true },
+      _errorMap: { type: Object }
+    };
+  }
+  constructor() {
+    super();
+    this.addressTitle = msg("Adresse", { id: "pd.contact.address.title" });
+    this.requiredFields = [];
+    this.inputFields = [];
+    this.summary = false;
+    this.match = {};
+    this._business = false;
+    this._errorMap = /* @__PURE__ */ new Map();
+  }
+  update(changedProperties) {
+    if (changedProperties.has("contact") && this.contact) {
+      this._business = this.contact.business;
+    }
+    super.update(changedProperties);
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.addEventListener("validate-form", this._validateForm);
+  }
+  disconnectedCallback() {
+    super.connectedCallback();
+    this.removeEventListener("validate-form", this._validateForm);
+  }
+  firstUpdated() {
+    var _a, _b;
+    this.addEventListener("key-pressed", (e) => {
+      this._errorMap.set(e.detail.name, "");
+      super.requestUpdate();
+    });
+    if (this.contact) {
+      const detail = {
+        errorMap: /* @__PURE__ */ new Map()
+      };
+      (_b = (_a = this.shadowRoot) == null ? void 0 : _a.getElementById("contactContainerId")) == null ? void 0 : _b.dispatchEvent(
+        new CustomEvent("validate-form", { detail })
+      );
+    }
+  }
+  render() {
+    return html`
+       <div class="contact">
+         ${this.summary ? this._renderViewContact() : this._renderEditContact()}
+       </div>
+     `;
+  }
+  _renderEditContact() {
+    return html`
+       <pd-form-container id="contactContainerId" requiredFieldInfo>
+        
+        ${this.inputFields.length === 0 || this._showInput(C_TYPE) ? html`
+          <pd-form-row id="testFormId">
+           <pd-radio-group
+             class="quarter3"
+             label="${msg("Typ", { id: "pd.contact.label.type" })}"
+             required
+             value="${this._getRadioValue()}"
+             @field-change="${this._switchAddressType}"
+             style="--group-gap: 20px;"
+           >
+             <pd-checkbox value="${this.contact ? !this.contact.business : true}" valueName="private"
+               >${msg("Privatperson", { id: "pd.contact.check.private" })}</pd-checkbox
+             >
+             <pd-checkbox valueName="business" value="${this.contact ? this.contact.business : false}">${msg("Unternehmen", { id: "pd.contact.check.company" })}</pd-checkbox>
+           </pd-radio-group>
+         </pd-form-row>
+        ` : ""}
+        
+         ${this._business ? html`
+               ${this.inputFields.length === 0 || this._showInput(C_COMPANY) ? html`
+               <pd-form-row class="contact-form">
+                 <pd-input
+                   id="compNameId"
+                   class="quarter3"
+                   label="${msg("Name des Unternehmen", { id: "pd.contact.label.company" })}"
+                   ?required="${this._isRequired(C_COMPANY)}"
+                   value="${this.contact ? this.contact.companyName : ""}"
+                   valueName="companyName"
+                   autoCompleteName="organization"
+                 ></pd-input>
+              </pd-form-row>
+              ` : ""}
+              ${this.inputFields.length === 0 || this._showInput(C_BTWNR) ? html`
+              <pd-form-row class="contact-form">
+                 <pd-input
+                   id="vatId"
+                   class="quarter3"
+                   label="${msg("USt-IdNr.", { id: "pd.contact.label.btw" })}"
+                   ?required="${this._isRequired(C_BTWNR)}"
+                   field-type="vat"
+                   valueName="vatNr"
+                   value="${this.contact ? this.contact.vatNr : ""}"
+                   autoCompleteName="vat"
+                 ></pd-input>
+               </pd-form-row>
+               ` : ""}
+             ` : html`
+               ${this.inputFields.length === 0 || this._showInput(C_FIRSTNAME) ? html`
+               <pd-form-row class="contact-form">
+                 <pd-input
+                   id="firstNameId"
+                   class="quarter3"
+                   label="${msg("Vorname", { id: "pd.contact.label.firstName" })}"
+                   valueName="firstName"
+                   value="${this.contact ? this.contact.firstName : ""}"
+                   autoCompleteName="given-name"
+                   ?required="${this._isRequired(C_FIRSTNAME)}"
+                 ></pd-input>
+               </pd-form-row>
+               ` : ""}
+               ${this.inputFields.length === 0 || this._showInput(C_LASTNAME) ? html`
+               <pd-form-row class="contact-form">
+                 <pd-input
+                   id="lastNameId"
+                   class="quarter3"
+                   label="${msg("Nachname", { id: "pd.contact.label.lastName" })}"
+                   valueName="lastName"
+                   value="${this.contact ? this.contact.lastName : ""}"
+                   autoCompleteName="family-name"
+                   ?required="${this._isRequired(C_LASTNAME)}"
+                 ></pd-input>
+               </pd-form-row>
+               ` : ""}
+             `}
+         ${this.inputFields.length === 0 || this._showInput(C_STREET) ? html`
+         <pd-form-row class="contact-form">
+           <pd-input
+             id="streetId"
+             class="quarter2"
+             label="${msg("Strasse", { id: "pd.contact.label.street" })}"
+             valueName="street"
+             value="${this.contact ? this.contact.street : ""}"
+             autoCompleteName="street-address"
+             ?required="${this._isRequired(C_STREET)}"
+           ></pd-input>
+           <pd-input
+             id="streetNrId"
+             class="quarter1"
+             label="${msg("Nr.", { id: "pd.contact.label.streetNr" })}"
+             valueName="streetNr"
+             value="${this.contact ? this.contact.streetNr : ""}"
+             ?required="${this._isRequired("streetNr")}"
+           ></pd-input>
+         </pd-form-row>    
+         ` : ""}     
+         ${this.inputFields.length === 0 || this._showInput(C_CITY) ? html`
+         <pd-form-row class="contact-form">
+           ${this.match && this.match.zip ? html`
+                 <pd-input
+                   readonly
+                   id="zipId"
+                   class="quarter1"
+                   label="${msg("PLZ", { id: "pd.contact.label.zip" })}"
+                   valueName="zip"
+                   value="${this.match ? this.match.zip || "" : ""}"
+                 ></pd-input>
+               ` : html`
+                 <pd-input
+                   id="zipId"
+                   class="quarter1"
+                   label="${msg("PLZ", { id: "pd.contact.label.zip" })}"
+                   field-type="number"
+                   valueName="zip"
+                   value="${this.contact ? this.contact.zip : ""}"
+                   autoCompleteName="postal-code"
+                   ?required="${this._isRequired("zip")}"
+                 ></pd-input>
+               `}
+           <pd-input
+             id="cityId"
+             class="quarter2"
+             label="${msg("Ort", { id: "pd.contact.label.city" })}"
+             valueName="city"
+             value="${this.contact ? this.contact.city : ""}"
+             autoCompleteName="locality"
+             ?required="${this._isRequired(C_CITY)}"
+           ></pd-input>
+         </pd-form-row>
+         ` : ""}     
+         ${this.inputFields.length === 0 || this._showInput(C_ADDITIONAL) ? html`
+         <pd-form-row class="contact-form">
+           <pd-input
+             class="quarter3"
+             id="additionalHintId"
+             label="${msg("Addresszusatz", { id: "pd.contact.label.additional" })}"
+             value="${this.contact ? this.contact.additionalHint : ""}"
+           ></pd-input>
+         </pd-form-row>
+         ` : ""}
+         ${this.inputFields.length === 0 || this._showInput(C_PHONE1) ? html`
+         <pd-form-row class="contact-form">
+           <pd-input
+             id="phoneId"
+             class="quarter3"
+             label="${msg("Telefon", { id: "pd.contact.label.phone" })}"
+             name="phone"
+             valueName="phone1"
+             value="${this.contact ? this.contact.phone1 : ""}"
+             field-type="phone"
+             autoCompleteName="tel"
+             ?required="${this._isRequired(C_PHONE1)}"
+           ></pd-input>
+          </pd-form-row>
+          ` : ""}
+          ${this.inputFields.length === 0 || this._showInput(C_EMAIL) ? html`
+          <pd-form-row class="contact-form">
+           <pd-input
+             id="mailId"
+             class="quarter3"
+             label="${msg("E-mail", { id: "pd.contact.label.email" })}"
+             field-type="mail"
+             valueName="email"
+             value="${this.contact ? this.contact.email : ""}"
+             autoCompleteName="email"
+             ?required="${this._isRequired(C_EMAIL)}"
+           ></pd-input>
+         </pd-form-row>
+         ` : ""}
+       </pd-form-container>
+     `;
+  }
+  _getRadioValue() {
+    if (this.contact) {
+      return this.contact.business ? "business" : "private";
+    }
+    return "private";
+  }
+  _renderViewContact() {
+    if (!this.contact) {
+      return html`<p>Contact undefined</p>`;
+    }
+    const trPhoneNr = transformPhone(this.contact.phone1, this.contact.country || "be");
+    return html`
+       <address>
+         <dl>
+           <dt>${this.addressTitle}</dt>
+           ${this.contact ? html`
+                 <dd>${this.contact.companyName}</dd>
+                 <dd>${this.contact.vatNr}</dd>
+                 <dd>${this._getFullName()}</dd>
+                 <dd>${this._getFullStreet()}</dd>
+                 <dd>${this._getFullLocation()}</dd>
+                 ${this.contact.additionalHint ? html`<dd>${this.contact.additionalHint}</dd>` : ""}
+                 <dd>${this.contact.country}</dd>
+                 
+                 ${this.contact.phone1 ? html`
+                 <dd class="larger">${this.phoneMailLink && trPhoneNr ? html`
+                  <a href="${`tel:${trPhoneNr}`}" 
+                    aria-label="${`Phone call: ${this.contact.phone1}`}" 
+                    class="link-item">
+                    <span style="margin-right: 8px;">${this.contact.phone1}</span>
+                    <pd-icon activeIcon icon="phoneIcon" class="round link-icon"></pd-icon>
+                  </a>
+                  ` : this.contact.phone1}</dd>
+                ` : ""}
+                
+                ${this.contact.email ? html`
+                <dd class="larger">${this.phoneMailLink ? html`
+                  <a href="${`mailto:${this.contact.email}`}" 
+                    aria-label="${`Send mail: ${this.contact.email}`}" 
+                    class="link-item">
+                    <span style="margin-right: 8px;">${this.contact.email}</span>
+                    <pd-icon activeIcon icon="mailIcon" class="round link-icon"></pd-icon>
+                  </a>
+                  ` : this.contact.email}</dd>
+                ` : ""}
+
+                 ${this.contact.btw ? html`<dt>BTW</dt>
+                       <dd>${this.contact.btw}</dd>` : ""}
+                 ${this.contact.kbc ? html`<dt>Bankgegevens</dt>
+                       <dd>${this.contact.kbc}</dd>
+                       <dd>${this.contact.bank}</dd>` : ""}
+               ` : html`${this.addressRef || "--"}`}
+         </dl>
+       </address>
+     `;
+  }
+  _switchAddressType(e) {
+    this._business = e.detail.name === "business";
+  }
+  _isRequired(field) {
+    return this.requiredFields && this.requiredFields.length > 0 ? this.requiredFields.includes(field) : false;
+  }
+  _showInput(field) {
+    return this.inputFields && this.inputFields.length > 0 ? this.inputFields.includes(field) : false;
+  }
+  /*
+     validateInput() {
+       const matchForValidate = this.match || {};
+  
+       const companyName = this.business
+         ? this.shadowRoot.getElementById('compNameId').value
+         : undefined;
+       const vatNr = this.business
+         ? this.shadowRoot.getElementById('vatId').value
+         : undefined;
+       const firstName = this.business
+         ? undefined
+         : this.shadowRoot.getElementById('firstNameId').value;
+       const lastName = this.business
+         ? undefined
+         : this.shadowRoot.getElementById('lastNameId').value;
+       const street = this.shadowRoot.getElementById('streetId').value;
+       const streetNr = this.shadowRoot.getElementById('streetNrId').value;
+       const additionalHint =
+         this.shadowRoot.getElementById('additionalHintId').value;
+       const zip = this.shadowRoot.getElementById('zipId').value;
+       const city = this.shadowRoot.getElementById('cityId').value;
+       const phone1 = this.shadowRoot.getElementById('phoneId').value;
+       const email = this.shadowRoot.getElementById('mailId').value;
+  
+       const newErrorMap = new Map();
+  
+       const reqFieldFunc = (field, key, type, mustMatch) => {
+         if (!field || field === '') {
+           newErrorMap.set(
+             key,
+             type !== 'phone'
+               ? 'Vul dit veld in.'
+               : 'Vul dit veld in. Gebruik +32 494 667085.'
+           );
+         } else if (mustMatch && field !== mustMatch) {
+           newErrorMap.set(key, `Not match ${mustMatch}`);
+         } else {
+           switch (type) {
+             case 'vat':
+               // eslint-disable-next-line no-restricted-globals
+               if (!newErrorMap.has(key) && !PdContact._vatIsValid(field)) {
+                 newErrorMap.set(key, 'Formaat BE0123456789 vereist');
+               }
+               break;
+             case 'number':
+               // eslint-disable-next-line no-restricted-globals
+               if (!newErrorMap.has(key) && isNaN(field)) {
+                 newErrorMap.set(key, 'Alleen nummers toegestaan');
+               }
+               break;
+             case 'mail':
+               if (!newErrorMap.has(key) && !PdContact._mailIsValid(field)) {
+                 newErrorMap.set(key, 'Ongeldig e-mailadres');
+               }
+               break;
+             case 'phone':
+               if (!newErrorMap.has(key) && !PdContact._phoneIsValid(field)) {
+                 newErrorMap.set(
+                   key,
+                   'Ongeldig telefoonnummer, gebruik +32 494 667085.'
+                 );
+               }
+               break;
+             default:
+               console.warn('Undefined field: ', type);
+           }
+         }
+       };
+  
+       if (this.business) {
+         reqFieldFunc(companyName, 'companyName');
+         reqFieldFunc(vatNr, 'vatNr', 'vat');
+       } else {
+         reqFieldFunc(firstName, 'firstName');
+         reqFieldFunc(lastName, 'lastName');
+       }
+       reqFieldFunc(street, 'street');
+       reqFieldFunc(streetNr, 'streetNr');
+       reqFieldFunc(zip, 'zip', 'number', matchForValidate.zip);
+       reqFieldFunc(city, 'city');
+       reqFieldFunc(phone1, 'phone1', 'phone');
+       reqFieldFunc(email, 'email', 'mail');
+       this._errorMap = newErrorMap;
+  
+       return new Promise((resolve, reject) => {
+         if (newErrorMap.size > 0) {
+           reject();
+         } else {
+           this.contact = {
+             business: this.business,
+             companyName,
+             vatNr,
+             firstName,
+             lastName,
+             street,
+             streetNr,
+             additionalHint,
+             zip,
+             city,
+             phone1,
+             email,
+           };
+           resolve(this.contact);
+         }
+       });
+     }
+     */
+  _validateForm(e) {
+    if (e.detail && !e.detail.singleElement) {
+      this.shadowRoot.getElementById("contactContainerId").dispatchEvent(
+        new CustomEvent("validate-form", {
+          detail: e.detail
+        })
+      );
+      if (e.detail.errorMap.size === 0 && e.detail.formData) {
+        e.detail.formData[this.id] = this._setFormData();
+      }
+    }
+  }
+  _setFormData() {
+    const companyName = this._business ? this.shadowRoot.getElementById("compNameId").value : void 0;
+    const vatNr = this._business ? this.shadowRoot.getElementById("vatId").value : void 0;
+    const firstName = this._business ? void 0 : this.shadowRoot.getElementById("firstNameId").value;
+    const lastName = this._business ? void 0 : this.shadowRoot.getElementById("lastNameId").value;
+    const street = this.shadowRoot.getElementById("streetId").value;
+    const streetNr = this.shadowRoot.getElementById("streetNrId").value;
+    const additionalHint = this.shadowRoot.getElementById("additionalHintId").value;
+    const zip = this.shadowRoot.getElementById("zipId").value;
+    const city = this.shadowRoot.getElementById("cityId").value;
+    const phone1 = this.shadowRoot.getElementById("phoneId").value;
+    const email = this.shadowRoot.getElementById("mailId").value;
+    return {
+      business: this._business,
+      companyName,
+      vatNr,
+      firstName,
+      lastName,
+      street,
+      streetNr,
+      additionalHint,
+      zip,
+      city,
+      phone1,
+      email
+    };
+  }
+  _getFullName() {
+    return PdContact._getFullVal(this.contact.firstName, this.contact.lastName);
+  }
+  _getFullStreet() {
+    return PdContact._getFullVal(this.contact.street, this.contact.streetNr);
+  }
+  _getFullLocation() {
+    return PdContact._getFullVal(this.contact.zip, this.contact.city);
+  }
+  static _getFullVal(val1, val2, elseStr) {
+    let fullVal = "";
+    if (val1) {
+      fullVal += val1;
+    }
+    if (val2) {
+      fullVal += ` ${val2}`;
+    }
+    return fullVal.length === 0 ? elseStr : fullVal;
+  }
+}
+export {
+  C_ADDITIONAL,
+  C_BTWNR,
+  C_CITY,
+  C_COMPANY,
+  C_EMAIL,
+  C_FIRSTNAME,
+  C_LASTNAME,
+  C_PHONE1,
+  C_STREET,
+  C_TYPE,
+  PdContact
+};