add last changes

build.html

@@ -73,5 +73,3 @@ <h2>Example form</h2>
     </div>
   </div>
 </div>
-
-<script src="https://api.fliplet.test/v1/apps/565/maps" ></script>

css/builder.css

@@ -1410,3 +1410,18 @@ form hr {
   background-color: #474a74;
   color: #fff;
 }
+.google-autocomplete {
+  display: none;
+}
+
+.gmnoprint:not(:first-child) {
+  display: none;
+}
+
+.gm-style-cc {
+  display: none;
+}
+
+.maps {
+  height: 220px;
+}

css/form.css

@@ -1657,7 +1657,7 @@ form hr {
   font-weight: bold;
 }
 
-.gmnoprint {
+.gmnoprint:not(:first-child) {
   display: none;
 }
 

js/components/map.js

@@ -2,10 +2,6 @@ Fliplet.FormBuilder.field('map', {
   name: 'Map',
   category: 'Location & Map',
   props: {
-    enablePin: {
-      type: Boolean,
-      default: true
-    },
     description: {
       type: String
     },
@@ -43,26 +39,59 @@ Fliplet.FormBuilder.field('map', {
       lastChosenAutocompleteValue: ''
     };
   },
+  created: function() {
+    Fliplet.FormBuilder.on('reset', this.onReset);
+  },
+  destroyed: function() {
+    Fliplet.FormBuilder.off('reset', this.onReset);
+  },
   mounted: function() {
     this.initAutocomplete('', []);
-    this.$emit('_input', this.name, this.value.address, false, true);
+    if(this.value.latLong) {
+      this.$emit('_input', this.name, this.value, false, true);
+    }
     this.initMap();
     this.value = {
       address: this.value.address || '',
       latLong: this.value.latLong || null
     };
+    document.addEventListener('click', this.handleClickOutside);
+
+    setTimeout(() => {
+      if (!this.value.address && (this.autoCollectUserLocation || this.readonly)) {
+        this.mapField.handleLocationPermissions();
+      }
+    }, 3000);
+
+    this.updateValue();
   },
   methods: {
-    handleKeyDown: function(event) {
+    handleInput: function(e) {
+      const value = {
+        address: e.target.value,
+        latLong: null
+      }
+      this.$emit('_input', this.name, value);
+      this.mapField.clear();
+    },
+    handleClickOutside: function(e) {
+      const suggestionsList = this.$el.querySelector('.google-autocomplete');
+
+      if (suggestionsList && !suggestionsList.contains(e.target)) {
+        this.addressSuggestions = [];
+        this.suggestionSelected = false;
+      }
+    },
+    handleKeyDown: function(e) {
       const suggestionsCount = this.addressSuggestions.length;
 
       if (!suggestionsCount) {
         return;
       }
 
-      switch (event.key) {
+      switch (e.key) {
         case 'ArrowDown':
-          event.preventDefault();
+          e.preventDefault();
 
           if (this.activeSuggestionIndex < suggestionsCount - 1) {
             this.activeSuggestionIndex += 1;
@@ -71,7 +100,7 @@ Fliplet.FormBuilder.field('map', {
           break;
 
         case 'ArrowUp':
-          event.preventDefault();
+          e.preventDefault();
 
           if (this.activeSuggestionIndex > 0) {
             this.activeSuggestionIndex -= 1;
@@ -80,7 +109,7 @@ Fliplet.FormBuilder.field('map', {
           break;
 
         case 'Enter':
-          event.preventDefault();
+          e.preventDefault();
 
           if (this.activeSuggestionIndex >= 0) {
             const selectedSuggestion = this.addressSuggestions[this.activeSuggestionIndex];
@@ -116,7 +145,7 @@ Fliplet.FormBuilder.field('map', {
     },
     selectSuggestion: function(option) {
       if (option.label === 'Select location on map') {
-        this.getAddressFromMap();
+        this.clearAddressAndMapValues();
         Fliplet.UI.Toast.dismiss();
         this.hasSelectOnMapOption = true;
         return;
@@ -130,98 +159,127 @@ Fliplet.FormBuilder.field('map', {
       this.mapAddressField.set(option.label);
       this.lastChosenAutocompleteValue = option.label;
       this.mapField.set(option.label);
-      this.updateValue();
     },
-    getAddressFromMap: function() {
+    clearAddressAndMapValues: function() {
       this.addressSuggestions = [];
       this.mapAddressField.clear();
       this.mapField.clear();
     },
-    displayAddressNotFoundToast: function() {
-      Fliplet.UI.Toast({
-        type: 'minimal',
-        message: "We couldn't find the address. Please double-check and re-enter the correct details.",
-        actions: [{
-          label: 'Dismiss',
-          action: () => {
-            Fliplet.UI.Toast.dismiss();
-          }
-        }],
-        duration: false,
-        tapToDismiss: false
-      });
-    },
     initMap: function() {
       this.mapField = Fliplet.UI.MapField(this.$refs.mapField, this.$refs.mapAddressLookUp, {
-        enablePin: this.enablePin,
         readonly: this.readonly,
         mapType: this.mapType,
-        autoCollectUserLocation: this.autoCollectUserLocation,
-        placeholder: this.placeholder,
-        address: this.value.address
+        value: this.value,
+        zoomControl: true,
+        disableDefaultUI: true,
+        zoomLevel: 8
       });
     },
     initAutocomplete: async function() {
       this.mapAddressField = Fliplet.UI.AddressField(this.$refs.mapAddressLookUp);
 
       this.mapAddressField.change(this.onChange);
     },
-    handleLocationPermissions: function() {
-      this.mapField.handleLocationPermissions();
-    },
     onChange: function(value) {
+      if(!value) {
+        this.mapField.clear()
+        return
+      }
+
       this.mapAddressField.getAutocompleteSuggestions(value, [])
         .then((suggestions) => {
+
           if (suggestions[0]?.label !== 'Select location on map') {
             suggestions.unshift({ id: null, label: 'Select location on map' });
           }
 
-          if (value === this.lastChosenAutocompleteValue) {
+          if (value.length > 1 && value === this.lastChosenAutocompleteValue) {
             this.suggestionSelected = true;
+          }else {
+            this.suggestionSelected = false;
           }
 
           if (this.suggestionSelected && this.lastChosenAutocompleteValue === value.trim()) {
             this.value = this.mapField.getTotalAddress();
             this.updateAddressSuggestions();
-          } else if (this.mapField.getAddressChangedByDrag()) {
+          } else if (this.mapField.checkIfAddressChangedByDragging()) {
             this.updateAddressSuggestions();
-            this.mapField.getAddressChangedByDrag(false);
+            this.mapField.checkIfAddressChangedByDragging(false);
             this.value = this.mapField.getTotalAddress();
             this.suggestionSelected = false;
           } else {
             if (suggestions.length === 1 && value.trim() !== '') {
-              this.addressSuggestions.unshift({ id: null, label: 'Select location on map' });
-              this.displayAddressNotFoundToast();
-            } else {
-              Fliplet.UI.Toast.dismiss();
-            }
-
-            this.addressSuggestions = suggestions;
-            this.suggestionSelected = false;
+              if(this.addressSuggestions.length && this.addressSuggestions[0].label === 'Select location on map') {
+                this.addressSuggestions.unshift({ id: null, label: 'Select location on map' });
+              }
+              this.mapField.displayToastMessage("We couldn't find the address. Please double-check and re-enter the correct details.");
+          } else {
+            Fliplet.UI.Toast.dismiss();
           }
-        });
+          this.addressSuggestions = suggestions;
+          this.suggestionSelected = false;
+        };
+      });
+    },
+    onReset: function() {
+      this.mapField.clear();
+      this.mapAddressField.clear();
+    },
+  },
+  validations: function() {
+    var $vm = this;
+    var rules = {
+      value: {}
+    };
+
+    if (this.required && !this.readonly) {
+      rules.value.required = function() {
+        return $vm.value.address;
+      };
     }
+
+    return rules;
   },
   watch: {
     value: {
       deep: true,
       handler: function(val) {
-        if (!val.address) {
-          val = {
-            address: val
-          };
-        } else if (val.address && val.address.label) {
+        if(!val) {
+          return
+        }
+
+        if (val.address && val.address.label) {
           val = {
             address: val.address.label
           };
         }
 
+        if(val.address && !this.suggestionSelected && !this.lastChosenAutocompleteValue && !this.readonly) {
+          if(val.latLong) {
+            this.mapAddressField.set(val.address)
+            this.mapField.set(val.address)
+          }else {
+            this.mapAddressField.set(val.address)
+          }
+          this.suggestionSelected = true
+          this.lastChosenAutocompleteValue = val.address
+          this.addressSuggestions = []
+          this.hasSelectOnMapOption = true
+          return
+        }
 
-        if (this.suggestionSelected && !this.lastChosenAutocompleteValue && !this.mapField.getAddressChangedByDrag()) {
+        if(val.address === '' && !this.readonly && !this.autoCollectUserLocation){
+          this.mapAddressField.clear()
+          this.mapField.clear();
+        }
+
+        if (this.suggestionSelected && !this.lastChosenAutocompleteValue && !this.mapField.checkIfAddressChangedByDragging()) {
           this.suggestionSelected = false;
         }
 
-        this.$emit('_input', this.name, val);
+        debugger
+
+        this.$emit('_input', this.name, val, false, true);
       }
     },
     addressSuggestions: function(newSuggestions) {

js/libs/core.js

@@ -528,7 +528,7 @@ Fliplet.FormBuilder = (function() {
 
       component.props._flexibleWidthComponents = {
         type: Array,
-        default: ['flInput', 'flCheckbox', 'flRadio', 'flEmail', 'flNumber', 'flTelephone', 'flUrl', 'flTextarea', 'flWysiwyg', 'flSelect', 'flDate', 'flTime', 'flDateRange', 'flTimeRange', 'flTimer', 'flStarRating', 'flSignature', 'flImage', 'flFile', 'flSlider', 'flMatrix', 'flTypeahead', 'flGeolocation', 'flPassword', 'flCodeScanner', 'flCustomButton']
+        default: ['flInput', 'flCheckbox', 'flRadio', 'flEmail', 'flNumber', 'flTelephone', 'flUrl', 'flTextarea', 'flWysiwyg', 'flSelect', 'flDate', 'flTime', 'flDateRange', 'flTimeRange', 'flTimer', 'flStarRating', 'flSignature', 'flImage', 'flFile', 'flSlider', 'flMatrix', 'flTypeahead', 'flGeolocation', 'flPassword', 'flCodeScanner', 'flCustomButton', 'flAddress', 'flMap']
       };
 
       component.props._idx = {

js/libs/form.js

@@ -404,6 +404,13 @@ Fliplet().then(function() {
               case 'flGeolocation':
                 fieldData = [entry.data[`${fieldKey}`], entry.data[`${fieldKey} (accuracy)`]];
                 break;
+              case 'flMap':
+                fieldData = {
+                  address: entry.data['Address'],
+                  latLong: entry.data['Lat/Long']
+                };
+                break;
+
               default:
                 fieldData = entry.data[fieldKey];
 
@@ -578,6 +585,13 @@ Fliplet().then(function() {
             }
           }
 
+          if (field._type === 'flMap') {
+            field.value = progress[field.name] || {
+              address: '',
+              latLong: null
+            };
+          }
+
           setTimeout(function() {
             if (progress && !isEditMode) {
               var savedValue = progress[field.name];
@@ -673,7 +687,7 @@ Fliplet().then(function() {
             var value;
             var fieldSettings = data.fields[index];
 
-            if (field.isHidden || field.readonly) {
+            if (field.isHidden || (field.readonly && field._type !== 'flMap')) {
               return;
             }