@progressive-development/pd-contact 0.1.27 → 0.1.29

package/package.json

@@ -3,7 +3,7 @@
   "description": "Progressive Development Contact component",
   "license": "SEE LICENSE IN LICENSE",
   "author": "PD Progressive Development",
-  "version": "0.1.27",
+  "version": "0.1.29",
   "main": "index.js",
   "module": "index.js",
   "scripts": {
@@ -17,7 +17,7 @@
     "storybook:build": "npm run analyze -- --exclude dist && build-storybook"
   },
   "dependencies": {
-    "@progressive-development/pd-forms": "^0.1.32",
+    "@progressive-development/pd-forms": "^0.1.34",
     "@progressive-development/pd-shared-styles": "^0.1.1",
     "lit": "^2.2.0"
   },

package/src/PdContact.js

@@ -12,57 +12,52 @@
  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';
+
  
- /**
-  * An example element.
-  *
-  * @slot - This element has a slot
-  * @csspart button - The button
-  */
  export class PdContact extends LitElement {
    static get styles() {
      return [
       PDFontStyles,
       css`
        :host {
-         display: block; 
+         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;
        }
- 
+
        .contact-form {
          --row-padding-top: 10px;
        }
      `];
    }
- 
+
    static get properties() {
      return {
        addressTitle: { type: String },
@@ -80,7 +75,7 @@
        _errorMap: { type: Object },
      };
    }
- 
+
    constructor() {
      super();
      this.addressTitle = 'Adres';
@@ -89,7 +84,7 @@
      this.match = {};
      this._errorMap = new Map();
    }
- 
+
    firstUpdated() {
      this.addEventListener('key-pressed', e => {
        this._errorMap.set(e.detail.name, '');
@@ -97,7 +92,7 @@
      });
      this.addEventListener('validate-form', this._validateForm);
    }
- 
+
    render() {
      return html`
        <div class="contact">
@@ -105,7 +100,7 @@
        </div>
      `;
    }
- 
+
    _renderEditContact() {
      return html`
        <pd-form-container id="contactContainerId" requiredFieldInfo>
@@ -123,7 +118,7 @@
              <pd-checkbox valueName="business">Onderneming</pd-checkbox>
            </pd-radio-group>
          </pd-form-row>
- 
+
          ${this.business
            ? html`
                <pd-form-row class="contact-form">
@@ -197,7 +192,7 @@
                    readonly
                    id="zipId"
                    class="quarter2"
-                   label="Postcode"                   
+                   label="Postcode"
                    valueName="zip"
                    value="${this.match ? this.match.zip || '' : ''}"
                    required
@@ -207,7 +202,7 @@
                  <pd-input
                    id="zipId"
                    class="quarter2"
-                   label="Postcode"                   
+                   label="Postcode"
                    field-type="number"
                    valueName="zip"
                    autoCompleteName="postal-code"
@@ -218,7 +213,7 @@
              id="cityId"
              class="quarter2"
              label="Plaats"
-             valueName="city"             
+             valueName="city"
              autoCompleteName="locality"
              required
            ></pd-input>
@@ -227,7 +222,7 @@
            <pd-input
              id="phoneId"
              class="quarter2"
-             label="Telefoon"             
+             label="Telefoon"
              name="phone"
              valueName="phone1"
              field-type="phone"
@@ -247,7 +242,7 @@
        </pd-form-container>
      `;
    }
- 
+
    _renderViewContact() {
      return html`
        <address>
@@ -263,7 +258,7 @@
                  <dd>${this.contact.country}</dd>
                  <dd>${this.contact.phone1}</dd>
                  <dd>${this.contact.email}</dd>
- 
+
                  ${this.contact.btw
                    ? html`<dt>BTW</dt>
                        <dd>${this.contact.btw}</dd>`
@@ -279,15 +274,15 @@
        </address>
      `;
    }
- 
+
    _switchAddressType(e) {
      this.business = e.detail.name === 'business';
    }
- 
+
    /*
    validateInput() {
      const matchForValidate = this.match || {};
- 
+
      const companyName = this.business
        ? this.shadowRoot.getElementById('compNameId').value
        : undefined;
@@ -308,9 +303,9 @@
      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(
@@ -353,7 +348,7 @@
          }
        }
      };
- 
+
      if (this.business) {
        reqFieldFunc(companyName, 'companyName');
        reqFieldFunc(vatNr, 'vatNr', 'vat');
@@ -368,7 +363,7 @@
      reqFieldFunc(phone1, 'phone1', 'phone');
      reqFieldFunc(email, 'email', 'mail');
      this._errorMap = newErrorMap;
- 
+
      return new Promise((resolve, reject) => {
        if (newErrorMap.size > 0) {
          reject();
@@ -447,19 +442,19 @@
 
     return {...this.contact};
   }
-  
+
    _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) {