@progressive-development/pd-contact 0.1.53 → 0.1.55

package/package.json

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

package/src/PdContact.js

@@ -60,16 +60,21 @@
 
    static get properties() {
      return {
+       
        addressTitle: { type: String },
        addressRef: { type: String },
        /**
-        * address type, business (true) or private (false)
+        * address type, business (true) or private (false), refactor, ist state internal? => _business, state:true
         */
        business: { 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 },
        _errorMap: { type: Object },
@@ -78,7 +83,8 @@
 
    constructor() {
      super();
-     this.addressTitle = 'Adres';
+     this.addressTitle = 'Adres';     
+     this.requiredFields = [];
      this.summary = false;
      this.business = false;
      this.match = {};
@@ -148,7 +154,7 @@
                    id="compNameId"
                    class="quarter2"
                    label="Naam onderneming"
-                   required
+                   ?required="${this._isRequired("companyName")}"
                    valueName="companyName"
                    autoCompleteName="organization"
                  ></pd-input>
@@ -156,7 +162,7 @@
                    id="vatId"
                    class="quarter2"
                    label="Ondernemingsnr"
-                   required
+                   ?required="${this._isRequired("vatNr")}"
                    field-type="vat"
                    valueName="vatNr"
                    autoCompleteName="vat"
@@ -172,7 +178,7 @@
                    valueName="firstName"
                    value="${this.contact ? this.contact.firstName : ""}"
                    autoCompleteName="given-name"
-                   required
+                   ?required="${this._isRequired("firstName")}"
                  ></pd-input>
                  <pd-input
                    id="lastNameId"
@@ -181,7 +187,7 @@
                    valueName="lastName"
                    value="${this.contact ? this.contact.lastName : ""}"
                    autoCompleteName="family-name"
-                   required
+                   ?required="${this._isRequired("lastName")}"
                  ></pd-input>
                </pd-form-row>
              `}
@@ -193,7 +199,7 @@
              valueName="street"
              value="${this.contact ? this.contact.street : ""}"
              autoCompleteName="street-address"
-             required
+             ?required="${this._isRequired("street")}"
            ></pd-input>
            <pd-input
              id="streetNrId"
@@ -201,7 +207,7 @@
              label="Nr"
              valueName="streetNr"
              value="${this.contact ? this.contact.streetNr : ""}"
-             required
+             ?required="${this._isRequired("streetNr")}"
            ></pd-input>
          </pd-form-row>
          <pd-form-row class="contact-form">
@@ -222,7 +228,6 @@
                    label="Postcode"
                    valueName="zip"
                    value="${this.match ? this.match.zip || '' : ''}"
-                   required
                  ></pd-input>
                `
              : html`
@@ -234,7 +239,7 @@
                    valueName="zip"
                    value="${this.contact ? this.contact.zip : ""}"
                    autoCompleteName="postal-code"
-                   required
+                   ?required="${this._isRequired("zip")}"
                  ></pd-input>
                `}
            <pd-input
@@ -244,7 +249,7 @@
              valueName="city"
              value="${this.contact ? this.contact.city : ""}"
              autoCompleteName="locality"
-             required
+             ?required="${this._isRequired("city")}"
            ></pd-input>
          </pd-form-row>
          <pd-form-row class="contact-form">
@@ -257,7 +262,7 @@
              value="${this.contact ? this.contact.phone1 : ""}"
              field-type="phone"
              autoCompleteName="tel"
-             required
+             ?required="${this._isRequired("phone1")}"
            ></pd-input>
            <pd-input
              id="mailId"
@@ -267,7 +272,7 @@
              valueName="email"
              value="${this.contact ? this.contact.email : ""}"
              autoCompleteName="email"
-             required
+             ?required="${this._isRequired("email")}"
            ></pd-input>
          </pd-form-row>
        </pd-form-container>
@@ -317,6 +322,11 @@
      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 || {};