@progressive-development/pd-contact 0.5.10 → 0.6.1

package/dist/src/PdContact.js

@@ -1,666 +0,0 @@
-import { LitElement, css, html } from "lit";
-import { msg, str } from "@lit/localize";
-import { PDFontStyles } from "@progressive-development/pd-shared-styles";
-import "@progressive-development/pd-icon/pd-icon";
-import "@progressive-development/pd-forms/pd-checkbox";
-import "@progressive-development/pd-forms/pd-form-container";
-import "@progressive-development/pd-forms/pd-form-row";
-import "@progressive-development/pd-forms/pd-input";
-import "@progressive-development/pd-forms/pd-select";
-import "@progressive-development/pd-forms/pd-radio-group";
-/**
- * @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_PROPERTY_DATE = "propertyDate";
-const C_PHONE1 = "phone1";
-const C_EMAIL = "email";
-const yearSelection = [
-  { value: "UNDEF", name: msg("Baujahr auswählen", { id: "pd.contact.property.year.selection" }) },
-  { value: "<2014", name: "< 2014" },
-  { value: "2014", name: "2014" },
-  { value: "2015", name: "2015" },
-  { value: "2016", name: "2016" },
-  { value: "2017", name: "2017" },
-  { value: "2018", name: "2018" },
-  { value: "2019", name: "2019" },
-  { value: "2020", name: "2020" },
-  { value: "2021", name: "2021" },
-  { value: "2022", name: "2022" },
-  { value: "2023", name: "2023" },
-  { value: "2024", name: "2024" },
-  { value: "2025", name: "2025" }
-];
-class PdContact extends LitElement {
-  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 },
-      /**
-       * withPropertyDate (true) input for property date
-       */
-      withPropertyDate: { 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 }
-    };
-  }
-  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) ;
-      }
-
-    `
-    ];
-  }
-  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.withPropertyDate ? html`
-         <pd-form-row class="contact-form">
-           <pd-select
-             class="quarter3"
-             id="propertyDateId"
-             label="${msg("Datum der Immobilie", { id: "pd.contact.label.propertyDate" })}"
-             value="${this.contact ? this.contact.propertyDate : ""}"
-             .values="${yearSelection}"
-             ?required="${this._isRequired(C_PROPERTY_DATE)}"
-           ></pd-select>
-         </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>` : ""}
-                 ${this.contact.propertyDate ? html`<dd>${msg(str`Baujahr: ${this.contact.propertyDate}`, { id: "pd.contact.label.summary.propertyDate" })}</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 elCompanyName = this._business ? this.shadowRoot.getElementById("compNameId") : void 0;
-    const companyName = elCompanyName ? elCompanyName.value : void 0;
-    const elVatNr = this._business ? this.shadowRoot.getElementById("vatId") : void 0;
-    const vatNr = elVatNr ? elVatNr.value : void 0;
-    const elFirstName = this._business ? void 0 : this.shadowRoot.getElementById("firstNameId");
-    const firstName = elFirstName ? elFirstName.value : void 0;
-    const elLastName = this._business ? void 0 : this.shadowRoot.getElementById("lastNameId");
-    const lastName = elLastName ? elLastName.value : void 0;
-    const elStreet = this.shadowRoot.getElementById("streetId");
-    const street = elStreet ? elStreet.value : void 0;
-    const elStreetNr = this.shadowRoot.getElementById("streetNrId");
-    const streetNr = elStreetNr ? elStreetNr.value : void 0;
-    const elAdditionalHint = this.shadowRoot.getElementById("additionalHintId");
-    const additionalHint = elAdditionalHint ? elAdditionalHint.value : void 0;
-    const elPropertyDate = this.withPropertyDate ? this.shadowRoot.getElementById("propertyDateId") : void 0;
-    const propertyDate = elPropertyDate ? elPropertyDate.value : void 0;
-    const elZip = this.shadowRoot.getElementById("zipId");
-    const zip = elZip ? elZip.value : void 0;
-    const elCity = this.shadowRoot.getElementById("cityId");
-    const city = elCity ? elCity.value : void 0;
-    const elPhone1 = this.shadowRoot.getElementById("phoneId");
-    const phone1 = elPhone1 ? elPhone1.value : void 0;
-    const elEmail = this.shadowRoot.getElementById("mailId");
-    const email = elEmail ? elEmail.value : void 0;
-    return {
-      business: this._business,
-      companyName,
-      vatNr,
-      firstName,
-      lastName,
-      street,
-      streetNr,
-      additionalHint,
-      propertyDate,
-      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_PROPERTY_DATE,
-  C_STREET,
-  C_TYPE,
-  PdContact
-};