@progressive-development/pd-contact 0.1.60 → 0.1.62

package/package.json

@@ -3,7 +3,7 @@
   "description": "Progressive Development Contact component",
   "license": "SEE LICENSE IN LICENSE",
   "author": "PD Progressive Development",
-  "version": "0.1.60",
+  "version": "0.1.62",
   "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.2.12",
+    "@progressive-development/pd-forms": "^0.2.13",
     "@progressive-development/pd-shared-styles": "^0.1.1",
     "lit": "^2.2.0"
   },

package/src/PdContact.js

@@ -62,11 +62,7 @@
      return {
        
        addressTitle: { type: String },
-       addressRef: { type: String },
-       /**
-        * address type, business (true) or private (false), refactor, ist state internal? => _business, state:true
-        */
-       business: { type: Boolean },
+       addressRef: { type: String },       
        /**
         * summary (true) or view (false) contact data
         */
@@ -77,6 +73,10 @@
        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 },
      };
    }
@@ -85,15 +85,15 @@
     super();
     this.addressTitle = 'Adres';     
     this.requiredFields = [];
-    this.summary = false;
-    this.business = false;
+    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;
+      this._business = this.contact.business;
     }
     super.update(changedProperties);
   }   
@@ -154,7 +154,7 @@
            </pd-radio-group>
          </pd-form-row>
 
-         ${this.business
+         ${this._business
            ? html`
                <pd-form-row class="contact-form">
                  <pd-input
@@ -162,6 +162,7 @@
                    class="quarter2"
                    label="Naam onderneming"
                    ?required="${this._isRequired("companyName")}"
+                   value="${this.contact ? this.contact.companyName : ""}"
                    valueName="companyName"
                    autoCompleteName="organization"
                  ></pd-input>
@@ -172,6 +173,7 @@
                    ?required="${this._isRequired("vatNr")}"
                    field-type="vat"
                    valueName="vatNr"
+                   value="${this.contact ? this.contact.vatNr : ""}"
                    autoCompleteName="vat"
                  ></pd-input>
                </pd-form-row>
@@ -326,7 +328,7 @@
    }
 
    _switchAddressType(e) {
-     this.business = e.detail.name === 'business';
+     this._business = e.detail.name === 'business';
    }
 
    _isRequired(field) {
@@ -459,16 +461,16 @@
   }
 
   _setFormData() {
-    const companyName = this.business
+    const companyName = this._business
        ? this.shadowRoot.getElementById('compNameId').value
        : undefined;
-     const vatNr = this.business
+     const vatNr = this._business
        ? this.shadowRoot.getElementById('vatId').value
        : undefined;
-     const firstName = this.business
+     const firstName = this._business
        ? undefined
        : this.shadowRoot.getElementById('firstNameId').value;
-     const lastName = this.business
+     const lastName = this._business
        ? undefined
        : this.shadowRoot.getElementById('lastNameId').value;
      const street = this.shadowRoot.getElementById('streetId').value;
@@ -478,10 +480,10 @@
      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 email = this.shadowRoot.getElementById('mailId').value;     
 
-     this.contact = {
-      business: this.business,
+    return {
+      business: this._business,
       companyName,
       vatNr,
       firstName,
@@ -494,8 +496,6 @@
       phone1,
       email,
     };
-
-    return {...this.contact};
   }
 
    _getFullName() {

package/stories/index.stories.js

@@ -32,6 +32,24 @@ function TemplateView({summary}) {
                            }}"></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 = {  
 };
@@ -45,3 +63,8 @@ export const ContactPreparedForm = TemplateView.bind({});
 ContactView.args = {  
   summary: "false"
 };
+
+export const ContactPreparedFormCompany = TemplateViewBusiness.bind({});
+ContactView.args = {  
+  summary: "false"
+};