@progressive-development/pd-contact 0.1.43 → 0.1.45

package/package.json

@@ -3,7 +3,7 @@
   "description": "Progressive Development Contact component",
   "license": "SEE LICENSE IN LICENSE",
   "author": "PD Progressive Development",
-  "version": "0.1.43",
+  "version": "0.1.45",
   "main": "index.js",
   "module": "index.js",
   "scripts": {

package/src/PdContact.js

@@ -85,12 +85,33 @@
      this._errorMap = new Map();
    }
 
+   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();
      });
-     this.addEventListener('validate-form', this._validateForm);
+
+     // 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() {
@@ -109,13 +130,14 @@
              class="quarter4"
              label="Type"
              required
+             value="${this._getRadioValue()}"
              @field-change="${this._switchAddressType}"
              style="--group-gap: 20px;"
            >
-             <pd-checkbox value="true" valueName="private"
+             <pd-checkbox value="${this.contact ? !this.contact.business : true}" valueName="private"
                >Particulier</pd-checkbox
              >
-             <pd-checkbox valueName="business">Onderneming</pd-checkbox>
+             <pd-checkbox valueName="business" value="${this.contact ? this.contact.business : false}">Onderneming</pd-checkbox>
            </pd-radio-group>
          </pd-form-row>
 
@@ -252,6 +274,13 @@
      `;
    }
 
+   _getRadioValue() {    
+    if (this.contact) {
+      return this.contact.business ? "business" : "private";
+    }
+    return "private";
+  }
+
    _renderViewContact() {
      return html`
        <address>
@@ -406,7 +435,7 @@
       );
 
       // set prepared form, if no validation error occured
-      if (e.detail.errorMap.size === 0) {
+      if (e.detail.errorMap.size === 0 && e.detail.formData) {
         e.detail.formData[this.id] = this._setFormData();
       }
     }

package/stories/index.stories.js

@@ -4,8 +4,7 @@ import '../pd-contact.js';
 export default {
   title: 'PdContact/Contact',
   component: 'pd-contact',
-  argTypes: {
-    
+  argTypes: {    
   },
 };
 
@@ -16,17 +15,18 @@ function Template() {
   `;
 }
 
-function TemplateView() {
+function TemplateView({summary}) {
+  console.log(summary);
   return html`    
     <h3>View Contact</h3>
-    <pd-contact summary .contact="${{
+    <pd-contact ?summary="${summary}" .contact="${{
                            firstName: 'Peter', 
                            lastName: 'Musterman',
                            street: 'Musterstrasse',
                            streetNr: '23b',
                            zip: '9040',
                            city: 'Gent',
-                           phone: '0221/9923443',
+                           phone1: '0221 992344234',
                            mobil: '0175/9923443',
                            email: 'peter@muster.be'
                            }}"></pd-contact>`;
@@ -38,4 +38,10 @@ ContactForm.args = {
 
 export const ContactView = TemplateView.bind({});
 ContactView.args = {  
+  summary: "true"
+};
+
+export const ContactPreparedForm = TemplateView.bind({});
+ContactView.args = {  
+  summary: "false"
 };