@progressive-development/pd-contact 0.1.69 → 0.5.0

package/src/PdContact.js

@@ -1,623 +0,0 @@
-/**
- * @license
- * Copyright (c) 2021 PD Progressive Development UG. All rights reserved.
- */
-
- import { LitElement, html, css } from 'lit';
-
- import { PDFontStyles } from '@progressive-development/pd-shared-styles';
-
- import '@progressive-development/pd-icon/pd-icon.js';
-
- import '@progressive-development/pd-forms/pd-checkbox.js';
- import '@progressive-development/pd-forms/pd-form-container.js';
- import '@progressive-development/pd-forms/pd-form-row.js';
- import '@progressive-development/pd-forms/pd-input.js';
- import '@progressive-development/pd-forms/pd-radio-group.js';
-
- 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 ""; // Ungültige Eingabe zurücksetzen
-  }
-
-  // Hol das Länderpräfix basierend auf dem übergebenen Land
-  const countryPrefix = countryPrefixes[country];
-  if (!countryPrefix) {
-    throw new Error(`Unbekanntes Land: ${country}`);
-  }
-
-  // Entferne alle Leerzeichen und Sonderzeichen (außer "+")
-  const cleanedPhone = phone.replace(/\s+/g, "").replace(/[^0-9+]/g, "");
-
-  // Prüfe, ob die Nummer mit "+" beginnt (internationale Nummer)
-  if (cleanedPhone.startsWith("+")) {
-    return cleanedPhone; // Nummer ist bereits international
-  }
-
-  // Prüfe, ob die Nummer mit "0" beginnt und füge das Ländercode-Präfix hinzu
-  if (cleanedPhone.startsWith("0")) {
-    return countryPrefix + cleanedPhone.slice(1); // "0" durch Präfix ersetzen
-  }
-
-  // Wenn die Nummer weder mit "+" noch "0" beginnt, ist sie ungültig
-  return "";
-}
-
-
- export 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 },
-       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 = 'Adres';     
-    this.requiredFields = [];
-    this.summary = false;    
-    this.match = {};
-    this._business = false;
-    this._errorMap = new Map();
-  }
-
-  update(changedProperties) {
-    if (changedProperties.has("contact") && this.contact) {
-      this._business = this.contact.business;
-    }
-    super.update(changedProperties);
-  }   
-
-  connectedCallback() {
-    super.connectedCallback();
-    // add validation event listener
-    this.addEventListener('validate-form', this._validateForm);
-  }
-
-  disconnectedCallback() {
-    super.connectedCallback();
-    // add validation event listener
-    this.removeEventListener('validate-form', this._validateForm);
-  }
-
-  firstUpdated() {
-    this.addEventListener('key-pressed', e => {
-      this._errorMap.set(e.detail.name, '');
-      super.requestUpdate();
-    });
-
-      // first validation if form is already filled (edit)
-    if (this.contact) {
-      const detail = {
-        errorMap: new Map()
-      }
-      this.shadowRoot?.getElementById("contactContainerId")?.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>
-         <pd-form-row id="testFormId">
-           <pd-radio-group
-             class="quarter3"
-             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"
-               >Particulier</pd-checkbox
-             >
-             <pd-checkbox valueName="business" value="${this.contact ? this.contact.business : false}">Onderneming</pd-checkbox>
-           </pd-radio-group>
-         </pd-form-row>
-
-         ${this._business
-           ? html`
-               <pd-form-row class="contact-form">
-                 <pd-input
-                   id="compNameId"
-                   class="quarter3"
-                   label="Naam onderneming"
-                   ?required="${this._isRequired("companyName")}"
-                   value="${this.contact ? this.contact.companyName : ""}"
-                   valueName="companyName"
-                   autoCompleteName="organization"
-                 ></pd-input>
-              </pd-form-row>
-              <pd-form-row class="contact-form">
-                 <pd-input
-                   id="vatId"
-                   class="quarter3"
-                   label="Ondernemingsnr"
-                   ?required="${this._isRequired("vatNr")}"
-                   field-type="vat"
-                   valueName="vatNr"
-                   value="${this.contact ? this.contact.vatNr : ""}"
-                   autoCompleteName="vat"
-                 ></pd-input>
-               </pd-form-row>
-             `
-           : html`
-               <pd-form-row class="contact-form">
-                 <pd-input
-                   id="firstNameId"
-                   class="quarter3"
-                   label="Voornaam"
-                   valueName="firstName"
-                   value="${this.contact ? this.contact.firstName : ""}"
-                   autoCompleteName="given-name"
-                   ?required="${this._isRequired("firstName")}"
-                 ></pd-input>
-               </pd-form-row>
-               <pd-form-row class="contact-form">
-                 <pd-input
-                   id="lastNameId"
-                   class="quarter3"
-                   label="Naam"
-                   valueName="lastName"
-                   value="${this.contact ? this.contact.lastName : ""}"
-                   autoCompleteName="family-name"
-                   ?required="${this._isRequired("lastName")}"
-                 ></pd-input>
-               </pd-form-row>
-             `}
-         <pd-form-row class="contact-form">
-           <pd-input
-             id="streetId"
-             class="quarter2"
-             label="Straat"
-             valueName="street"
-             value="${this.contact ? this.contact.street : ""}"
-             autoCompleteName="street-address"
-             ?required="${this._isRequired("street")}"
-           ></pd-input>
-           <pd-input
-             id="streetNrId"
-             class="quarter1"
-             label="Nr"
-             valueName="streetNr"
-             value="${this.contact ? this.contact.streetNr : ""}"
-             ?required="${this._isRequired("streetNr")}"
-           ></pd-input>
-         </pd-form-row>         
-         <pd-form-row class="contact-form">
-           ${this.match && this.match.zip
-             ? html`
-                 <pd-input
-                   readonly
-                   id="zipId"
-                   class="quarter1"
-                   label="Postcode"
-                   valueName="zip"
-                   value="${this.match ? this.match.zip || '' : ''}"
-                 ></pd-input>
-               `
-             : html`
-                 <pd-input
-                   id="zipId"
-                   class="quarter1"
-                   label="Postcode"
-                   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="Plaats"
-             valueName="city"
-             value="${this.contact ? this.contact.city : ""}"
-             autoCompleteName="locality"
-             ?required="${this._isRequired("city")}"
-           ></pd-input>
-         </pd-form-row>
-         <pd-form-row class="contact-form">
-           <pd-input
-             class="quarter3"
-             id="additionalHintId"
-             label="Extra informatie"
-             value="${this.contact ? this.contact.additionalHint : ""}"
-           ></pd-input>
-         </pd-form-row>
-         <pd-form-row class="contact-form">
-           <pd-input
-             id="phoneId"
-             class="quarter3"
-             label="Telefoon"
-             name="phone"
-             valueName="phone1"
-             value="${this.contact ? this.contact.phone1 : ""}"
-             field-type="phone"
-             autoCompleteName="tel"
-             ?required="${this._isRequired("phone1")}"
-           ></pd-input>
-          </pd-form-row>
-          <pd-form-row class="contact-form">
-           <pd-input
-             id="mailId"
-             class="quarter3"
-             label="E-mail"
-             field-type="mail"
-             valueName="email"
-             value="${this.contact ? this.contact.email : ""}"
-             autoCompleteName="email"
-             ?required="${this._isRequired("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;
-   }
-
-   /*
-   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
-        })
-      );
-
-      // set prepared form, if no validation error occured
-      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
-       : 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;     
-
-    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;
-   }
-}

package/stories/index.stories.js

@@ -1,78 +0,0 @@
-import { html } from 'lit';
-import '../pd-contact.js';
-
-export default {
-  title: 'PdContact/Contact',
-  component: 'pd-contact',
-  argTypes: {    
-  },
-};
-
-function Template() {
-  return html`
-    <h3>Edit Contact</h3>
-    <pd-contact></pd-contact>
-  `;
-}
-
-function TemplateView({summary, phoneMailLink}) {
-  console.log(summary);
-  return html`    
-    <h3>View Contact</h3>
-    <pd-contact ?summary="${summary}" ?phoneMailLink="${phoneMailLink}" .contact="${{
-                           firstName: 'Peter', 
-                           lastName: 'Musterman',
-                           street: 'Musterstrasse',
-                           streetNr: '23b',
-                           zip: '9040',
-                           city: 'Gent',
-                           phone1: '0221 992344234',
-                           mobil: '0175/9923443',
-                           email: 'peter@muster.be'
-                           }}"></pd-contact>`;
-}
-
-function TemplateViewBusiness({summary}) {
-  console.log(summary);
-  return html`    
-    <h3>View Contact</h3>
-    <pd-contact ?summary="${summary}" .contact="${{
-                           business: true,
-                           companyName: 'PD Progressive Develpoment', 
-                           vatNr: "DE0123456789",
-                           street: 'Musterstrasse',
-                           streetNr: '23b',
-                           zip: '9040',
-                           city: 'Gent',
-                           phone1: '0221 992344234',
-                           mobil: '0175/9923443',
-                           email: 'peter@muster.be'
-                           }}"></pd-contact>`;
-}
-
-export const ContactForm = Template.bind({});
-ContactForm.args = {  
-};
-
-export const ContactView = TemplateView.bind({});
-ContactView.args = {  
-  summary: "true"
-};
-
-export const ContactViewPhone = TemplateView.bind({});
-ContactViewPhone.args = {  
-  summary: "true",
-  phoneMailLink: "true"
-};
-
-export const ContactPreparedForm = TemplateView.bind({});
-ContactView.args = {  
-  summary: "false"
-};
-
-export const ContactPreparedFormCompany = TemplateViewBusiness.bind({});
-ContactView.args = {  
-  summary: "false",
-  phoneCallLink: "false"
-};
-