@progressive-development/pd-contact 0.1.44 → 0.1.46

package/package.json

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

package/src/PdContact.js

@@ -102,6 +102,16 @@
        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() {
@@ -120,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>
 
@@ -263,6 +274,13 @@
      `;
    }
 
+   _getRadioValue() {    
+    if (this.contact) {
+      return this.contact.business ? "business" : "private";
+    }
+    return "private";
+  }
+
    _renderViewContact() {
      return html`
        <address>

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"
 };