@wizishop/wizi-block 4.2.31-beta → 4.2.34-beta

package/bundles/wizishop-wizi-block.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('rxjs'), require('@ngx-translate/core'), require('uuid'), require('@angular/cdk/drag-drop'), require('@angular/animations'), require('@angular/common/http'), require('rxjs/operators'), require('@angular/common'), require('@angular/forms'), require('@angular/platform-browser'), require('@ctrl/tinycolor'), require('quill'), require('monaco-editor'), require('ngx-quill'), require('@fortawesome/fontawesome-svg-core'), require('@fortawesome/free-solid-svg-icons'), require('@fortawesome/free-regular-svg-icons'), require('@fortawesome/free-brands-svg-icons'), require('@wizishop/ng-wizi-bulma'), require('ngx-scrollbar'), require('@editorjs/editorjs'), require('@jaames/iro'), require('ngx-monaco-editor'), require('leaflet'), require('places.js'), require('@asymmetrik/ngx-leaflet'), require('ngx-color-picker')) :
-    typeof define === 'function' && define.amd ? define('@wizishop/wizi-block', ['exports', '@angular/core', 'rxjs', '@ngx-translate/core', 'uuid', '@angular/cdk/drag-drop', '@angular/animations', '@angular/common/http', 'rxjs/operators', '@angular/common', '@angular/forms', '@angular/platform-browser', '@ctrl/tinycolor', 'quill', 'monaco-editor', 'ngx-quill', '@fortawesome/fontawesome-svg-core', '@fortawesome/free-solid-svg-icons', '@fortawesome/free-regular-svg-icons', '@fortawesome/free-brands-svg-icons', '@wizishop/ng-wizi-bulma', 'ngx-scrollbar', '@editorjs/editorjs', '@jaames/iro', 'ngx-monaco-editor', 'leaflet', 'places.js', '@asymmetrik/ngx-leaflet', 'ngx-color-picker'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.wizishop = global.wizishop || {}, global.wizishop['wizi-block'] = {}), global.ng.core, global.rxjs, global.i1, global['^3']['3']['2'], global.ng.cdk.dragDrop, global.ng.animations, global.ng.common.http, global.rxjs.operators, global.ng.common, global.ng.forms, global.ng.platformBrowser, global['^2']['5']['2'], global['^1']['3']['6'], global.monaco, global['^5']['0']['0'], global['^1']['2']['27'], global['^5']['12']['1'], global['^5']['12']['1'], global['^5']['12']['1'], global['^7']['0']['11'], global['^7']['2']['1-beta']['0'], global.EditorJS, global.iro, global['^8']['1']['1'], global['^1']['5']['1'], global['^1']['16']['4'], global['^5']['0']['2'], global['^9']['0']['0']));
-}(this, (function (exports, i0, rxjs, i1, uuid, dragDrop, animations, i1$1, operators, common, forms, platformBrowser, tinycolor, QuillNamespace, monaco, ngxQuill, fontawesomeSvgCore, freeSolidSvgIcons, freeRegularSvgIcons, freeBrandsSvgIcons, ngWiziBulma, ngxScrollbar, EditorJS, iro, ngxMonacoEditor, leaflet, places, ngxLeaflet, ngxColorPicker) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('rxjs'), require('@ngx-translate/core'), require('uuid'), require('@angular/cdk/drag-drop'), require('@angular/animations'), require('@angular/common/http'), require('rxjs/operators'), require('@angular/common'), require('@angular/forms'), require('@angular/platform-browser'), require('@ctrl/tinycolor'), require('quill'), require('monaco-editor'), require('ngx-quill'), require('@fortawesome/fontawesome-svg-core'), require('@fortawesome/free-solid-svg-icons'), require('@fortawesome/free-regular-svg-icons'), require('@fortawesome/free-brands-svg-icons'), require('@wizishop/ng-wizi-bulma'), require('ngx-scrollbar'), require('@editorjs/editorjs'), require('@jaames/iro'), require('codemirror'), require('@codemirror/state'), require('@codemirror/lang-html'), require('ngx-monaco-editor'), require('leaflet'), require('@asymmetrik/ngx-leaflet'), require('ngx-google-places-autocomplete'), require('ngx-color-picker')) :
+    typeof define === 'function' && define.amd ? define('@wizishop/wizi-block', ['exports', '@angular/core', 'rxjs', '@ngx-translate/core', 'uuid', '@angular/cdk/drag-drop', '@angular/animations', '@angular/common/http', 'rxjs/operators', '@angular/common', '@angular/forms', '@angular/platform-browser', '@ctrl/tinycolor', 'quill', 'monaco-editor', 'ngx-quill', '@fortawesome/fontawesome-svg-core', '@fortawesome/free-solid-svg-icons', '@fortawesome/free-regular-svg-icons', '@fortawesome/free-brands-svg-icons', '@wizishop/ng-wizi-bulma', 'ngx-scrollbar', '@editorjs/editorjs', '@jaames/iro', 'codemirror', '@codemirror/state', '@codemirror/lang-html', 'ngx-monaco-editor', 'leaflet', '@asymmetrik/ngx-leaflet', 'ngx-google-places-autocomplete', 'ngx-color-picker'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.wizishop = global.wizishop || {}, global.wizishop['wizi-block'] = {}), global.ng.core, global.rxjs, global.i1, global['^3']['3']['2'], global.ng.cdk.dragDrop, global.ng.animations, global.ng.common.http, global.rxjs.operators, global.ng.common, global.ng.forms, global.ng.platformBrowser, global['^2']['5']['2'], global['^1']['3']['6'], global.monaco, global['^5']['0']['0'], global['^1']['2']['27'], global['^5']['12']['1'], global['^5']['12']['1'], global['^5']['12']['1'], global['^7']['0']['11'], global['^7']['2']['1-beta']['0'], global.EditorJS, global.iro, global.codemirror, global.state, global.langHtml, global['^8']['1']['1'], global['^1']['5']['1'], global['^5']['0']['2'], global.ngxGooglePlacesAutocomplete, global['^9']['0']['0']));
+}(this, (function (exports, i0, rxjs, i1, uuid, dragDrop, animations, i1$1, operators, common, forms, platformBrowser, tinycolor, QuillNamespace, monaco, ngxQuill, fontawesomeSvgCore, freeSolidSvgIcons, freeRegularSvgIcons, freeBrandsSvgIcons, ngWiziBulma, ngxScrollbar, EditorJS, iro, codemirror, state, langHtml, ngxMonacoEditor, leaflet, ngxLeaflet, ngxGooglePlacesAutocomplete, ngxColorPicker) { 'use strict';
 
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -31,7 +31,6 @@
     var QuillNamespace__namespace = /*#__PURE__*/_interopNamespace(QuillNamespace);
     var EditorJS__default = /*#__PURE__*/_interopDefaultLegacy(EditorJS);
     var iro__default = /*#__PURE__*/_interopDefaultLegacy(iro);
-    var places__default = /*#__PURE__*/_interopDefaultLegacy(places);
 
     var MediaConnectorService = /** @class */ (function () {
         function MediaConnectorService() {
@@ -3921,7 +3920,7 @@
                 'wb.blocks.FormContentDto.117',
             ], ['0', '0.25', '0.5', '1']);
             imgSimpleFormDto.forms.push(parallaxSpeedImgSimpleContentDto);
-            var parallaxInvertedImgSimpleContentDto = new FormsContentDto(FORM_NAME_PARALLAX_INVERTED, 'wb.forms.FormsContentDto.27', FORM_TYPE_CHECKBOX, content[FORM_NAME_PARALLAX_INVERTED], '', '', [], [], [true, false], false, 'wb.forms.FormsContentDto.28');
+            var parallaxInvertedImgSimpleContentDto = new FormsContentDto(FORM_NAME_PARALLAX_INVERTED, 'wb.blocks.FormContentDto.114', FORM_TYPE_CHECKBOX, content[FORM_NAME_PARALLAX_INVERTED], '', '', [], [], [true, false], false, 'wb.forms.FormsContentDto.28');
             imgSimpleFormDto.forms.push(parallaxInvertedImgSimpleContentDto);
             return imgSimpleFormDto;
         };
@@ -5082,7 +5081,7 @@
                 'wb.blocks.FormContentDto.117',
             ], ['0', '0.25', '0.5', '1']);
             TextBackgroundsSimpleFormDto.forms.push(parallaxSpeedImgSimpleContentDto);
-            var parallaxInvertedImgSimpleContentDto = new FormsContentDto(FORM_NAME_PARALLAX_INVERTED, 'wb.forms.FormsContentDto.27', FORM_TYPE_CHECKBOX, content[FORM_NAME_PARALLAX_INVERTED], '', '', [], [], [true, false], false, 'wb.forms.FormsContentDto.28');
+            var parallaxInvertedImgSimpleContentDto = new FormsContentDto(FORM_NAME_PARALLAX_INVERTED, 'wb.blocks.FormContentDto.114', FORM_TYPE_CHECKBOX, content[FORM_NAME_PARALLAX_INVERTED], '', '', [], [], [true, false], false, 'wb.forms.FormsContentDto.28');
             TextBackgroundsSimpleFormDto.forms.push(parallaxInvertedImgSimpleContentDto);
             return TextBackgroundsSimpleFormDto;
         };
@@ -5166,7 +5165,7 @@
                 'wb.blocks.FormContentDto.117',
             ], ['0', '0.25', '0.5', '1']);
             formsDto.forms.push(parallaxSpeedImgSimpleContentDto);
-            var parallaxInvertedImgSimpleContentDto = new FormsContentDto(FORM_NAME_PARALLAX_INVERTED, 'wb.forms.FormsContentDto.27', FORM_TYPE_CHECKBOX, content[FORM_NAME_PARALLAX_INVERTED], '', '', [], [], [true, false], false, 'wb.forms.FormsContentDto.28');
+            var parallaxInvertedImgSimpleContentDto = new FormsContentDto(FORM_NAME_PARALLAX_INVERTED, 'wb.blocks.FormContentDto.114', FORM_TYPE_CHECKBOX, content[FORM_NAME_PARALLAX_INVERTED], '', '', [], [], [true, false], false, 'wb.forms.FormsContentDto.28');
             formsDto.forms.push(parallaxInvertedImgSimpleContentDto);
             return formsDto;
         };
@@ -5250,7 +5249,7 @@
                 'wb.blocks.FormContentDto.117',
             ], ['0', '0.25', '0.5', '1']);
             formsDto.forms.push(parallaxSpeedImgSimpleContentDto);
-            var parallaxInvertedImgSimpleContentDto = new FormsContentDto(FORM_NAME_PARALLAX_INVERTED, 'wb.forms.FormsContentDto.27', FORM_TYPE_CHECKBOX, content[FORM_NAME_PARALLAX_INVERTED], '', '', [], [], [true, false], false, 'wb.forms.FormsContentDto.28');
+            var parallaxInvertedImgSimpleContentDto = new FormsContentDto(FORM_NAME_PARALLAX_INVERTED, 'wb.blocks.FormContentDto.114', FORM_TYPE_CHECKBOX, content[FORM_NAME_PARALLAX_INVERTED], '', '', [], [], [true, false], false, 'wb.forms.FormsContentDto.28');
             formsDto.forms.push(parallaxInvertedImgSimpleContentDto);
             var colorContentDto = new FormsContentDto(FORM_NAME_COLOR, 'wb.blocks.FormContentDto.112', FORM_TYPE_COLOR, content[FORM_NAME_COLOR], '#122231', '');
             formsDto.forms.push(colorContentDto);
@@ -6921,7 +6920,7 @@
                 'wb.blocks.FormContentDto.117',
             ], ['0', '0.25', '0.5', '1']);
             imgBannerFormDto.forms.push(parallaxSpeedImgSimpleContentDto);
-            var parallaxInvertedImgSimpleContentDto = new FormsContentDto(FORM_NAME_PARALLAX_INVERTED, 'wb.forms.FormsContentDto.27', FORM_TYPE_CHECKBOX, content[FORM_NAME_PARALLAX_INVERTED], '', '', [], [], [true, false], false, 'wb.forms.FormsContentDto.28');
+            var parallaxInvertedImgSimpleContentDto = new FormsContentDto(FORM_NAME_PARALLAX_INVERTED, 'wb.blocks.FormContentDto.114', FORM_TYPE_CHECKBOX, content[FORM_NAME_PARALLAX_INVERTED], '', '', [], [], [true, false], false, 'wb.forms.FormsContentDto.28');
             imgBannerFormDto.forms.push(parallaxInvertedImgSimpleContentDto);
             return imgBannerFormDto;
         };
@@ -11236,6 +11235,7 @@
                 },
                 clipboard: {
                     matchers: [['BR', this.lineBreakMatcher]],
+                    matchVisual: false,
                 },
                 keyboard: {
                     bindings: {
@@ -20355,6 +20355,13 @@
             var selection = this.currentSelection ? this.currentSelection : this.getSelection();
             return selection.anchorNode.parentElement.closest('.editorJs');
         };
+        EditorJSTool.prototype.findParentModifier = function () {
+            if (!this.parentEditor) {
+                this.parentEditor = this.findParentEditor();
+            }
+            return (this.parentEditor.querySelectorAll('.ce-block')[this.api.blocks.getCurrentBlockIndex()].querySelector('.ce-paragraph')
+                .children[0]);
+        };
         EditorJSTool.prototype.clear = function () {
             resetBlockFocus(this.parentEditor);
         };
@@ -20422,7 +20429,7 @@
         }
         InlineStyleTool.prototype.execCommandStyle = function (action) {
             return __awaiter(this, void 0, void 0, function () {
-                var selection, anchorNode, container, sameSelection, error_1;
+                var selection, anchorNode, container, sameSelection;
                 return __generator(this, function (_c) {
                     switch (_c.label) {
                         case 0:
@@ -20444,41 +20451,38 @@
                             return [4 /*yield*/, this.saveInlineSelection(container, true)];
                         case 1:
                             _c.sent();
-                            _c.label = 2;
-                        case 2:
-                            _c.trys.push([2, 12, , 13]);
-                            if (!this.linkDeletion) return [3 /*break*/, 4];
+                            console.log('=== inline tool execCommandStyle method ===');
+                            console.log(this.hasStyle(container));
+                            if (!this.linkDeletion) return [3 /*break*/, 3];
                             return [4 /*yield*/, this.replaceLink(selection, this.hasStyle(container))];
-                        case 3:
+                        case 2:
                             _c.sent();
-                            return [3 /*break*/, 8];
-                        case 4:
+                            return [3 /*break*/, 7];
+                        case 3:
                             if (!(sameSelection &&
                                 !this.isContainer(this.textContainers, container) &&
                                 this.hasStyle(container) &&
-                                selection.toString() === this.hasStyle(container).innerText)) return [3 /*break*/, 6];
+                                selection.toString() === this.hasStyle(container).innerText)) return [3 /*break*/, 5];
+                            console.log('-> update selection');
                             return [4 /*yield*/, this.updateSelection(selection, this.hasStyle(container), action, this.textContainers)];
-                        case 5:
+                        case 4:
                             _c.sent();
-                            return [3 /*break*/, 8];
-                        case 6: return [4 /*yield*/, this.replaceSelection(this.getMostDescendantChild(container), action, selection, this.textContainers)];
-                        case 7:
+                            return [3 /*break*/, 7];
+                        case 5:
+                            console.log('-> replace selection');
+                            return [4 /*yield*/, this.replaceSelection(this.getMostDescendantChild(container), action, selection, this.textContainers)];
+                        case 6:
                             _c.sent();
-                            _c.label = 8;
-                        case 8: return [4 /*yield*/, this.cleanupContainer(selection, container, true)];
-                        case 9:
+                            _c.label = 7;
+                        case 7: return [4 /*yield*/, this.cleanupContainer(selection, container, true)];
+                        case 8:
                             _c.sent();
-                            if (!this.modifiedContent) return [3 /*break*/, 11];
+                            if (!this.modifiedContent) return [3 /*break*/, 10];
                             return [4 /*yield*/, this.resetInlineSelection(container, true)];
-                        case 10:
+                        case 9:
                             _c.sent();
-                            _c.label = 11;
-                        case 11: return [3 /*break*/, 13];
-                        case 12:
-                            error_1 = _c.sent();
-                            console.warn('Inline Tool Error : ' + error_1);
-                            return [3 /*break*/, 13];
-                        case 13: return [2 /*return*/];
+                            _c.label = 10;
+                        case 10: return [2 /*return*/];
                     }
                 });
             });
@@ -20535,20 +20539,21 @@
         InlineStyleTool.prototype.replaceSelection = function (container, action, selection, containers) {
             var _a;
             return __awaiter(this, void 0, void 0, function () {
-                var parentContainer, focusNode, offsetContainer, offsetParentContainer, range, currentFragment, currentElement_1, currentElementToAppend, currentParentElement, tmpElement, isLTR, selectionFocusOffset, selectionFocusNode, newSelection, preRange, preFragment, newElement, range, fragment, fragmentElement, newElement_2, elementToAppend;
+                var focusNode, offsetContainer, parentContainer, offsetParentContainer, range, currentFragment, currentElement_1, currentElementToAppend, currentParentElement, tmpElement, isLTR, selectionFocusOffset, selectionFocusNode, newSelection, preRange, preFragment, newElement, range, fragment, fragmentElement, newElement_2, elementToAppend;
                 return __generator(this, function (_c) {
                     switch (_c.label) {
                         case 0:
-                            parentContainer = this.hasStyle(container);
                             focusNode = selection.focusNode;
                             offsetContainer = focusNode.nodeType !== Node.TEXT_NODE && focusNode.nodeType !== Node.COMMENT_NODE
                                 ? focusNode
                                 : focusNode.parentElement;
+                            parentContainer = this.hasStyle(container);
                             offsetParentContainer = this.hasStyle(offsetContainer);
                             if (!(parentContainer &&
                                 parentContainer === offsetParentContainer &&
                                 ((parentContainer.children.length > 0 && parentContainer.innerText !== parentContainer.children[0].textContent) ||
                                     parentContainer.innerText !== selection.toString()))) return [3 /*break*/, 3];
+                            console.log('if');
                             range = this.getRangeObject(selection);
                             currentFragment = range.extractContents();
                             currentElement_1 = document.createElement('span');
@@ -20593,9 +20598,13 @@
                             newElement.appendChild(preFragment);
                             parentContainer.parentElement.insertBefore(currentElementToAppend, parentContainer);
                             parentContainer.parentElement.insertBefore(newElement, currentElementToAppend);
+                            if (!parentContainer.textContent || parentContainer.textContent.length === 0) {
+                                parentContainer.parentElement.removeChild(parentContainer);
+                            }
                             selection.selectAllChildren(currentElementToAppend);
                             return [3 /*break*/, 7];
                         case 3:
+                            console.log('else');
                             range = this.getRangeObject(selection);
                             fragment = range.extractContents();
                             fragmentElement = document.createElement('div');
@@ -20603,6 +20612,7 @@
                         case 4:
                             newElement_2 = _c.sent();
                             elementToAppend = newElement_2;
+                            console.log(newElement_2);
                             fragmentElement.append(fragment);
                             if (((_a = fragmentElement.children) === null || _a === void 0 ? void 0 : _a.length) === 1 &&
                                 this.textContainers.split(',').indexOf(fragmentElement.children[0].tagName.toLowerCase()) > -1) {
@@ -20822,10 +20832,30 @@
                 });
             });
         };
+        InlineStyleTool.prototype.parentHasStyle = function (currentElement, referenceElement) {
+            // Link exception
+            if (!currentElement || referenceElement.tagName.toLowerCase() === 'a' || referenceElement.tagName.toLowerCase() === 'div') {
+                return false;
+            }
+            if (referenceElement.tagName.toLowerCase() !== 'span' &&
+                referenceElement.tagName.toLowerCase() === currentElement.tagName.toLowerCase()) {
+                return true;
+            }
+            if (Object.keys(this.getInlineStyle(currentElement)).length > 0 && this.identicalInlineStyle(currentElement, referenceElement)) {
+                return true;
+            }
+            if (currentElement.classList.length > 0 && this.identicalClassList(currentElement, referenceElement)) {
+                return true;
+            }
+            if (currentElement.parentElement && currentElement.parentElement.tagName.toLowerCase() !== 'div') {
+                return this.parentHasStyle(currentElement.parentElement, referenceElement);
+            }
+            return false;
+        };
         InlineStyleTool.prototype.cleanupContainer = function (selection, container, firstTimeCall) {
-            var _a, _b;
+            var _a;
             return __awaiter(this, void 0, void 0, function () {
-                var parentContainer, parentFound, children, currentNode, identicalElements, currentElement, nextElement, currentNodeFirstChild;
+                var parentContainer, parentFound, children, currentNode, previousSibling, currentNodeFirstChild, nextCurrentElement, identicalElements, currentElement, nextElement, currentNodeFirstChild;
                 return __generator(this, function (_c) {
                     switch (_c.label) {
                         case 0:
@@ -20849,25 +20879,29 @@
                             }
                             parentContainer.normalize();
                             children = Array.from(parentContainer.childNodes);
-                            if (!((children === null || children === void 0 ? void 0 : children.length) > 0)) return [3 /*break*/, 6];
+                            if (!((children === null || children === void 0 ? void 0 : children.length) > 0)) return [3 /*break*/, 4];
                             currentNode = children[0];
                             _c.label = 1;
                         case 1:
-                            if (!currentNode) return [3 /*break*/, 6];
-                            console.log('currentNode');
-                            console.log(currentNode);
-                            console.log(currentNode.textContent);
-                            console.log((_b = currentNode.textContent) === null || _b === void 0 ? void 0 : _b.length);
-                            if (!(!currentNode.textContent || currentNode.textContent.length === 0)) return [3 /*break*/, 2];
-                            parentContainer.removeChild(currentNode);
-                            return [3 /*break*/, 5];
-                        case 2:
-                            if (!(currentNode.childNodes.length > 0)) return [3 /*break*/, 4];
-                            return [4 /*yield*/, this.cleanupContainer(selection, currentNode, false)];
-                        case 3:
-                            _c.sent();
-                            _c.label = 4;
-                        case 4:
+                            if (!currentNode) return [3 /*break*/, 4];
+                            if (!currentNode.textContent ||
+                                currentNode.textContent.length === 0 ||
+                                (currentNode.nodeType === Node.ELEMENT_NODE && currentNode.innerText.length === 0)) {
+                                previousSibling = currentNode.previousSibling;
+                                parentContainer.removeChild(currentNode);
+                                currentNode = previousSibling;
+                            }
+                            if (currentNode.nodeType === Node.ELEMENT_NODE &&
+                                this.parentHasStyle(currentNode.parentElement, currentNode)) {
+                                currentNodeFirstChild = currentNode;
+                                nextCurrentElement = currentNode.firstChild;
+                                while (currentNode.firstChild) {
+                                    parentContainer.insertBefore(currentNode.firstChild, currentNodeFirstChild.nextSibling);
+                                    currentNodeFirstChild = currentNodeFirstChild.nextSibling;
+                                }
+                                parentContainer.removeChild(currentNode);
+                                currentNode = nextCurrentElement;
+                            }
                             identicalElements = true;
                             while (identicalElements &&
                                 currentNode.nextSibling &&
@@ -20878,8 +20912,7 @@
                                 if (this.identicalInlineStyle(currentElement, nextElement) &&
                                     currentElement.tagName.toLowerCase() === nextElement.tagName.toLowerCase() &&
                                     this.identicalClassList(currentElement, nextElement) &&
-                                    !currentElement.hasAttributes() &&
-                                    !nextElement.hasAttributes()) {
+                                    this.identicalAttributes(currentElement, nextElement)) {
                                     currentElement.innerHTML += nextElement.innerHTML;
                                     nextElement.remove();
                                     this.modifiedContent = true;
@@ -20902,11 +20935,15 @@
                                 this.modifiedContent = true;
                             }
                             currentNode.normalize();
-                            _c.label = 5;
-                        case 5:
+                            if (!(currentNode.childNodes.length > 0)) return [3 /*break*/, 3];
+                            return [4 /*yield*/, this.cleanupContainer(selection, currentNode, false)];
+                        case 2:
+                            _c.sent();
+                            _c.label = 3;
+                        case 3:
                             currentNode = currentNode.nextSibling;
                             return [3 /*break*/, 1];
-                        case 6: return [2 /*return*/];
+                        case 4: return [2 /*return*/];
                     }
                 });
             });
@@ -20926,6 +20963,18 @@
             return (__spread(currentElement.classList).every(function (classList) { return nextElement.classList.contains(classList); }) &&
                 __spread(nextElement.classList).every(function (classList) { return currentElement.classList.contains(classList); }));
         };
+        InlineStyleTool.prototype.identicalAttributes = function (currentElement, nextElement) {
+            var currentElementAttributes = currentElement.getAttributeNames();
+            currentElementAttributes.forEach(function (attribute) {
+                if (attribute !== 'style') {
+                    if (!nextElement.getAttribute(attribute) ||
+                        nextElement.getAttribute(attribute) !== currentElement.getAttribute(attribute)) {
+                        return false;
+                    }
+                }
+            });
+            return true;
+        };
         InlineStyleTool.prototype.identicalInlineStyle = function (currentElement, nextElement) {
             var currentElementInlineStyle = this.getInlineStyle(currentElement);
             var nextElementInlineStyle = this.getInlineStyle(nextElement);
@@ -20971,7 +21020,7 @@
         InlineStyleTool.prototype.saveInlineSelection = function (container, firstTimeCall) {
             if (firstTimeCall === void 0) { firstTimeCall = false; }
             return __awaiter(this, void 0, void 0, function () {
-                var nextNode, selection, range, currentFragment, currentElement;
+                var nextNode, selection, isLTR, range, currentFragment, currentElement;
                 return __generator(this, function (_c) {
                     switch (_c.label) {
                         case 0:
@@ -20994,9 +21043,10 @@
                         case 1:
                             if (!(nextNode && (!this.foundAnchorNode || !this.foundFocusNode))) return [3 /*break*/, 4];
                             if (nextNode === this.selectedAnchorNode) {
-                                this.foundAnchorNode = true;
-                                this.foundAnchorOffset += this.anchorOffset;
                                 selection = this.getSelection();
+                                isLTR = this.isAnchorBeforeFocus(selection.anchorNode, selection.anchorOffset, selection.focusNode, selection.focusOffset);
+                                this.foundAnchorNode = true;
+                                this.foundAnchorOffset += isLTR ? this.anchorOffset : this.focusOffset;
                                 range = this.getRangeObject(selection);
                                 currentFragment = range.cloneContents();
                                 currentElement = document.createElement('span');
@@ -22667,7 +22717,7 @@
                     if (!anchorNode) {
                         return [2 /*return*/];
                     }
-                    parentModifier = this.findParentModifier(anchorNode.parentElement);
+                    parentModifier = this.findParentModifier();
                     try {
                         if (this.tag.toLowerCase() !== 'span') {
                             this.changeContainerTag(parentModifier, selection);
@@ -22804,22 +22854,6 @@
                 container.className += (container.className.length > 0 ? ' ' : '') + this.classToApply;
             }
         };
-        ParagraphStyleTool.prototype.findParentModifier = function (element) {
-            var currentElement = element;
-            if (currentElement.tagName.toLowerCase() === 'div') {
-                if (currentElement.classList.contains('ce-paragraph')) {
-                    return currentElement.children[0];
-                }
-                return currentElement.closest('.codex-editor__redactor').querySelector('.ce-paragraph').children[0];
-            }
-            while (this.modifiers.split(',').indexOf(currentElement.tagName.toLowerCase()) === -1) {
-                if (currentElement.tagName.toLowerCase() === 'div') {
-                    return null;
-                }
-                currentElement = currentElement.parentElement;
-            }
-            return currentElement;
-        };
         return ParagraphStyleTool;
     }(EditorJSTool));
     var listApi = null;
@@ -23158,7 +23192,7 @@
             if (!isBlockFocused) {
                 setBlockFocus(this.parentEditor);
             }
-            var parentModifier = this.findParentModifier(selection.anchorNode.parentElement);
+            var parentModifier = this.findParentModifier();
             if (!parentModifier) {
                 return false;
             }
@@ -23469,7 +23503,7 @@
             if (!isBlockFocused) {
                 setBlockFocus(this.parentEditor);
             }
-            var parentModifier = this.findParentModifier(selection.anchorNode.parentElement);
+            var parentModifier = this.findParentModifier();
             if (!parentModifier) {
                 return false;
             }
@@ -23605,7 +23639,7 @@
             if (!isBlockFocused) {
                 setBlockFocus(this.parentEditor);
             }
-            var parentModifier = this.findParentModifier(selection.anchorNode.parentElement);
+            var parentModifier = this.findParentModifier();
             if (!parentModifier) {
                 return false;
             }
@@ -23693,7 +23727,7 @@
             if (!isBlockFocused) {
                 setBlockFocus(this.parentEditor);
             }
-            var parentModifier = this.findParentModifier(selection.anchorNode.parentElement);
+            var parentModifier = this.findParentModifier();
             if (!parentModifier) {
                 return false;
             }
@@ -23781,7 +23815,7 @@
             if (!isBlockFocused) {
                 setBlockFocus(this.parentEditor);
             }
-            var parentModifier = this.findParentModifier(selection.anchorNode.parentElement);
+            var parentModifier = this.findParentModifier();
             if (!parentModifier) {
                 return false;
             }
@@ -24419,23 +24453,6 @@
                 return true;
             }
         };
-        InlineTextTool.prototype.findParentModifier = function (element) {
-            var modifiers = 'h1,h2,h3,h4,h5,h6,p,ul,ol,blockquote';
-            var currentElement = element;
-            if (currentElement.tagName.toLowerCase() === 'div') {
-                if (currentElement.classList.contains('ce-paragraph')) {
-                    return currentElement.firstElementChild;
-                }
-                return currentElement.querySelector('.ce-paragraph').children[0];
-            }
-            while (modifiers.split(',').indexOf(currentElement.tagName.toLowerCase()) === -1) {
-                if (currentElement.tagName.toLowerCase() === 'div') {
-                    return null;
-                }
-                currentElement = currentElement.parentElement;
-            }
-            return currentElement;
-        };
         return InlineTextTool;
     }(InlineStyleTool));
 
@@ -24674,21 +24691,17 @@
             modal.appendChild(editorContainer);
             modal.appendChild(buttonContainer);
             container.appendChild(modal);
-            document.querySelector('body').appendChild(container);
-            setTimeout(function () {
-                console.log('monacoeditor init');
-                console.log(modal);
-                var monacoEditor = monaco.editor.create(editorContainer, {
-                    value: content,
-                    language: 'html',
-                    ariaContainerElement: modal
-                });
-                saveButton.addEventListener('click', function () {
-                    var content = monacoEditor.getValue();
-                    saveCodeEditModal(content);
-                }, true);
-                buttonContainer.appendChild(saveButton);
-            }, 200);
+            document.body.appendChild(container);
+            var state$1 = state.EditorState.create({
+                doc: content,
+                extensions: [codemirror.basicSetup, langHtml.html()],
+            });
+            var view = new codemirror.EditorView({
+                state: state$1,
+                parent: editorContainer,
+            });
+            saveButton.addEventListener('click', function () { return saveCodeEditModal(view.state.doc.toString()); }, true);
+            buttonContainer.appendChild(saveButton);
         };
         TextEditionTool.prototype.getSavedEditorContent = function (name) {
             return localStorage.getItem(name);
@@ -25272,6 +25285,7 @@
             this.timeoutHandle = null;
             this.timeoutTextEditionHandle = null;
             this.onChangeTimeoutHandle = null;
+            this.editorInitialized = false;
             this.wrapperTags = 'h1,h2,h3,h4,h5,h6,p,ul,ol,blockquote';
         }
         EditorJsComponent.prototype.ngOnInit = function () {
@@ -25338,7 +25352,7 @@
                                     clearTimeout(_this.onChangeTimeoutHandle);
                                     _this.onChangeTimeoutHandle = setTimeout(function () {
                                         _this.contentChanged(api, event);
-                                    }, 300);
+                                    }, 200);
                                 },
                                 i18n: this.getI18nDictionnary(),
                             });
@@ -25353,12 +25367,10 @@
                                 _this.content = content;
                                 _this.applyContent();
                                 _this.checkSingleChild();
-                                setTimeout(function () {
-                                    var editorElement = document.getElementById('editorJs-' + _this.uuid);
-                                    editorElement.addEventListener('focusin', function () {
-                                        setlistApiEditor(_this.editor, editorElement);
-                                    });
-                                }, 0);
+                                var editorElement = document.getElementById('editorJs-' + _this.uuid);
+                                editorElement.addEventListener('focusin', function () {
+                                    setlistApiEditor(_this.editor, editorElement);
+                                });
                             });
                             return [3 /*break*/, 4];
                         case 3:
@@ -25373,7 +25385,6 @@
         EditorJsComponent.prototype.ngOnDestroy = function () {
             var editorName = 'editorJs-' + this.uuid;
             this.deleteSavedEditorContent(editorName);
-            this.deleteSavedEditorContent(editorName);
             this.editor.destroy();
         };
         EditorJsComponent.prototype.handleDefaultContentTranslation = function () {
@@ -25391,7 +25402,13 @@
                         .save()
                         .then(function () {
                         _this.content = _this.getEditorContent();
-                        _this.saveEditorContent(_this.content, _this.uuid);
+                        if (!_this.editorInitialized) {
+                            _this.handleSaveEditor(_this.content, _this.uuid);
+                            _this.editorInitialized = true;
+                        }
+                        else {
+                            _this.saveEditorContent(_this.content);
+                        }
                         _this.contentChange.emit(_this.content);
                     })
                         .catch(function (error) {
@@ -25534,12 +25551,12 @@
             }
             return null;
         };
-        EditorJsComponent.prototype.saveEditorContent = function (data, uuid) {
+        EditorJsComponent.prototype.saveEditorContent = function (data) {
             var _this = this;
             if (!isTextEditionTool) {
                 clearTimeout(this.timeoutHandle);
                 this.timeoutHandle = setTimeout(function () {
-                    _this.handleSaveEditor(data, uuid);
+                    _this.handleSaveEditor(data, _this.uuid);
                 }, 2000);
             }
             else {
@@ -25555,6 +25572,10 @@
             var savedDataIndex = this.getSavedEditorContent(editorName + '-index')
                 ? parseInt(this.getSavedEditorContent(editorName + '-index'))
                 : -1;
+            if (!this.editorInitialized) {
+                savedData = null;
+                savedDataIndex = -1;
+            }
             var parsedSavedData = [];
             if (savedData) {
                 parsedSavedData = JSON.parse(savedData);
@@ -25576,6 +25597,7 @@
         };
         EditorJsComponent.prototype.deleteSavedEditorContent = function (name) {
             localStorage.removeItem(name);
+            localStorage.removeItem(name + '-index');
         };
         return EditorJsComponent;
     }());
@@ -29355,19 +29377,15 @@
     ];
     QuotesSimpleBackgroundComponent.ctorParameters = function () { return []; };
 
-    var OpenMapDto = /** @class */ (function () {
-        function OpenMapDto() {
-        }
-        return OpenMapDto;
-    }());
-
     var MapFullpageComponent = /** @class */ (function (_super) {
         __extends(MapFullpageComponent, _super);
         function MapFullpageComponent(externalConfigService) {
             var _this = _super.call(this) || this;
             _this.externalConfigService = externalConfigService;
             _this.address = '';
+            _this.triggerAddress = '';
             _this.editPlaceMap = null;
+            _this.firstTimeTrigger = false;
             _this.options = {};
             _this.layers = [];
             _this.showMap = false;
@@ -29377,41 +29395,29 @@
         MapFullpageComponent.prototype.ngOnInit = function () {
             _super.prototype.ngOnInit.call(this);
             if (this.contentBlock[this.FORM_NAME_COORDINATE_Y] && this.contentBlock[this.FORM_NAME_COORDINATE_X]) {
-                var algolia = new OpenMapDto();
-                algolia.suggestion = {
-                    latlng: {
-                        lat: this.contentBlock[this.FORM_NAME_COORDINATE_Y],
-                        lng: this.contentBlock[this.FORM_NAME_COORDINATE_X],
+                this.googleMapReturnElement = {
+                    suggestion: {
+                        latlng: {
+                            lat: this.contentBlock[this.FORM_NAME_COORDINATE_Y],
+                            lng: this.contentBlock[this.FORM_NAME_COORDINATE_X],
+                        },
+                        value: '',
                     },
-                    value: '',
                 };
-                this.setCoordinateOnPlaces(algolia);
-            }
-        };
-        MapFullpageComponent.prototype.ngAfterViewInit = function () {
-            var _this = this;
-            if (!this.showMap) {
-                var placesAutocomplete = places__default['default']({
-                    appId: this.externalConfigService.getAlgoliaAppId(),
-                    apiKey: this.externalConfigService.getAlgoliaApiKey(),
-                    container: this.input.nativeElement,
-                });
-                placesAutocomplete.on('change', function (algoliaReturnElement) {
-                    _this.setCoordinateOnPlaces(algoliaReturnElement);
-                });
+                this.setCoordinateOnPlaces(this.googleMapReturnElement);
             }
         };
-        MapFullpageComponent.prototype.setCoordinateOnPlaces = function (algoliaReturnElement) {
+        MapFullpageComponent.prototype.setCoordinateOnPlaces = function (googleResults) {
             this.showMap = false;
             this.options = {
                 layers: [leaflet.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 18, attribution: 'WiziShop' })],
                 zoom: 18,
                 zoomControl: false,
-                center: leaflet.latLng(algoliaReturnElement.suggestion.latlng.lat, algoliaReturnElement.suggestion.latlng.lng),
+                center: leaflet.latLng(googleResults.suggestion.latlng.lat, googleResults.suggestion.latlng.lng),
             };
-            this.center = leaflet.latLng(algoliaReturnElement.suggestion.latlng.lat, algoliaReturnElement.suggestion.latlng.lng);
+            this.center = leaflet.latLng(googleResults.suggestion.latlng.lat, googleResults.suggestion.latlng.lng);
             this.layers = [
-                leaflet.marker([algoliaReturnElement.suggestion.latlng.lat, algoliaReturnElement.suggestion.latlng.lng], {
+                leaflet.marker([googleResults.suggestion.latlng.lat, googleResults.suggestion.latlng.lng], {
                     icon: leaflet.icon({
                         iconSize: [25, 41],
                         iconAnchor: [13, 41],
@@ -29420,24 +29426,23 @@
                     }),
                 }),
             ];
-            this.contentBlock[this.FORM_NAME_COORDINATE_Y] = algoliaReturnElement.suggestion.latlng.lat;
-            this.contentBlock[this.FORM_NAME_COORDINATE_X] = algoliaReturnElement.suggestion.latlng.lng;
-            this.address = algoliaReturnElement.suggestion.value;
+            this.contentBlock[this.FORM_NAME_COORDINATE_Y] = googleResults.suggestion.latlng.lat;
+            this.contentBlock[this.FORM_NAME_COORDINATE_X] = googleResults.suggestion.latlng.lng;
+            this.address = googleResults.suggestion.value;
             this.showMap = true;
             this.persist();
         };
-        MapFullpageComponent.prototype.createEditAlgoliaInput = function () {
-            var _this = this;
-            if (this.editPlaceMap === null) {
-                this.editPlaceMap = places__default['default']({
-                    appId: this.externalConfigService.getAlgoliaAppId(),
-                    apiKey: this.externalConfigService.getAlgoliaApiKey(),
-                    container: document.querySelector('#address-input-edit' + this.uuid),
-                });
-                this.editPlaceMap.on('change', function (algoliaReturnElement) {
-                    _this.setCoordinateOnPlaces(algoliaReturnElement);
-                });
-            }
+        MapFullpageComponent.prototype.handleAddressChange = function (event) {
+            this.googleMapReturnElement = {
+                suggestion: {
+                    latlng: {
+                        lat: event.geometry.location.lat(),
+                        lng: event.geometry.location.lng(),
+                    },
+                    value: event.name,
+                },
+            };
+            this.setCoordinateOnPlaces(this.googleMapReturnElement);
         };
         /**
          * Avoid partial map loaded at the initialization
@@ -29453,7 +29458,7 @@
     MapFullpageComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: MapFullpageService.selector(),
-                    template: "<div class=\"wb-map-fullpage\">\n    <div class=\"wb-map-fullpage__container\">\n        <div *ngIf=\"showMap\">\n            <div class=\"wb-map-fullpage__container__config\">\n                <wb-structure-config [blockUUID]=\"uuid\" [position]=\"TYPE_CONFIG_POSITION_LEFT_TOP\" (click)=\"createEditAlgoliaInput()\">\n                    <p>{{ 'wb.structures.template.19' | translate }}</p>\n                    <input\n                        id=\"address-input-edit{{ uuid }}\"\n                        type=\"text\"\n                        [(ngModel)]=\"address\"\n                        #myInputEdit\n                        (click)=\"myInputEdit.select()\"\n                    />\n                </wb-structure-config>\n            </div>\n            <div class=\"wb-map-fullpage__cover\"></div>\n            <div\n                class=\"wb-map-fullpage__container__map\"\n                leaflet\n                [leafletOptions]=\"options\"\n                [leafletLayers]=\"layers\"\n                [(leafletCenter)]=\"center\"\n                (leafletMapReady)=\"onMapReady($event)\"\n            ></div>\n        </div>\n    </div>\n    <div class=\"wb-map-fullpage__selector\" *ngIf=\"!showMap\">\n        <p>{{ 'wb.structures.template.19' | translate }}</p>\n        <input id=\"address-input{{ uuid }}\" type=\"text\" [(ngModel)]=\"address\" #myInput (click)=\"myInput.select()\" />\n    </div>\n</div>\n"
+                    template: "<div class=\"wb-map-fullpage\">\n    <div class=\"wb-map-fullpage__container\">\n        <div *ngIf=\"showMap\">\n            <div class=\"wb-map-fullpage__container__config\">\n                <wb-structure-config [blockUUID]=\"uuid\" [position]=\"TYPE_CONFIG_POSITION_LEFT_TOP\">\n                    <p>{{ 'wb.structures.template.19' | translate }}</p>\n                    <input\n                        id=\"address-input-edit{{ uuid }}\"\n                        type=\"text\"\n                        [(ngModel)]=\"address\"\n                        #myInputEdit\n                        (click)=\"myInputEdit.select()\"\n                        ngx-google-places-autocomplete\n                        (onAddressChange)=\"handleAddressChange($event)\"\n                    />\n                </wb-structure-config>\n            </div>\n            <div class=\"wb-map-fullpage__cover\"></div>\n            <div\n                class=\"wb-map-fullpage__container__map\"\n                leaflet\n                [leafletOptions]=\"options\"\n                [leafletLayers]=\"layers\"\n                [(leafletCenter)]=\"center\"\n                (leafletMapReady)=\"onMapReady($event)\"\n            ></div>\n        </div>\n    </div>\n    <div class=\"wb-map-fullpage__selector\" *ngIf=\"!showMap\">\n        <p>{{ 'wb.structures.template.19' | translate }}</p>\n        <input\n            id=\"address-input{{ uuid }}\"\n            type=\"text\"\n            [(ngModel)]=\"address\"\n            #myInput\n            (click)=\"myInput.select()\"\n            ngx-google-places-autocomplete\n            (onAddressChange)=\"handleAddressChange($event)\"\n        />\n    </div>\n</div>\n"
                 },] }
     ];
     MapFullpageComponent.ctorParameters = function () { return [
@@ -29469,7 +29474,9 @@
             var _this = _super.call(this) || this;
             _this.externalConfigService = externalConfigService;
             _this.address = '';
+            _this.triggerAddress = '';
             _this.editPlaceMap = null;
+            _this.firstTimeTrigger = false;
             _this.options = {};
             _this.layers = [];
             _this.showMap = false;
@@ -29479,41 +29486,29 @@
         MapLeftTextComponent.prototype.ngOnInit = function () {
             _super.prototype.ngOnInit.call(this);
             if (this.contentBlock[this.FORM_NAME_COORDINATE_Y] && this.contentBlock[this.FORM_NAME_COORDINATE_X]) {
-                var algolia = new OpenMapDto();
-                algolia.suggestion = {
-                    latlng: {
-                        lat: this.contentBlock[this.FORM_NAME_COORDINATE_Y],
-                        lng: this.contentBlock[this.FORM_NAME_COORDINATE_X],
+                this.googleMapReturnElement = {
+                    suggestion: {
+                        latlng: {
+                            lat: this.contentBlock[this.FORM_NAME_COORDINATE_Y],
+                            lng: this.contentBlock[this.FORM_NAME_COORDINATE_X],
+                        },
+                        value: '',
                     },
-                    value: '',
                 };
-                this.setCoordinateOnPlaces(algolia);
-            }
-        };
-        MapLeftTextComponent.prototype.ngAfterViewInit = function () {
-            var _this = this;
-            if (!this.showMap) {
-                var placesAutocomplete = places__default['default']({
-                    appId: this.externalConfigService.getAlgoliaAppId(),
-                    apiKey: this.externalConfigService.getAlgoliaApiKey(),
-                    container: this.input.nativeElement,
-                });
-                placesAutocomplete.on('change', function (algoliaReturnElement) {
-                    _this.setCoordinateOnPlaces(algoliaReturnElement);
-                });
+                this.setCoordinateOnPlaces(this.googleMapReturnElement);
             }
         };
-        MapLeftTextComponent.prototype.setCoordinateOnPlaces = function (algoliaReturnElement) {
+        MapLeftTextComponent.prototype.setCoordinateOnPlaces = function (googleResults) {
             this.showMap = false;
             this.options = {
                 layers: [leaflet.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 18, attribution: 'WiziShop' })],
                 zoom: 18,
                 zoomControl: false,
-                center: leaflet.latLng(algoliaReturnElement.suggestion.latlng.lat, algoliaReturnElement.suggestion.latlng.lng),
+                center: leaflet.latLng(googleResults.suggestion.latlng.lat, googleResults.suggestion.latlng.lng),
             };
-            this.center = leaflet.latLng(algoliaReturnElement.suggestion.latlng.lat, algoliaReturnElement.suggestion.latlng.lng);
+            this.center = leaflet.latLng(googleResults.suggestion.latlng.lat, googleResults.suggestion.latlng.lng);
             this.layers = [
-                leaflet.marker([algoliaReturnElement.suggestion.latlng.lat, algoliaReturnElement.suggestion.latlng.lng], {
+                leaflet.marker([googleResults.suggestion.latlng.lat, googleResults.suggestion.latlng.lng], {
                     icon: leaflet.icon({
                         iconSize: [25, 41],
                         iconAnchor: [13, 41],
@@ -29522,24 +29517,23 @@
                     }),
                 }),
             ];
-            this.contentBlock[this.FORM_NAME_COORDINATE_Y] = algoliaReturnElement.suggestion.latlng.lat;
-            this.contentBlock[this.FORM_NAME_COORDINATE_X] = algoliaReturnElement.suggestion.latlng.lng;
-            this.address = algoliaReturnElement.suggestion.value;
+            this.contentBlock[this.FORM_NAME_COORDINATE_Y] = googleResults.suggestion.latlng.lat;
+            this.contentBlock[this.FORM_NAME_COORDINATE_X] = googleResults.suggestion.latlng.lng;
+            this.address = googleResults.suggestion.value;
             this.showMap = true;
             this.persist();
         };
-        MapLeftTextComponent.prototype.createEditAlgoliaInput = function () {
-            var _this = this;
-            if (this.editPlaceMap === null) {
-                this.editPlaceMap = places__default['default']({
-                    appId: this.externalConfigService.getAlgoliaAppId(),
-                    apiKey: this.externalConfigService.getAlgoliaApiKey(),
-                    container: document.querySelector('#address-input-edit' + this.uuid),
-                });
-                this.editPlaceMap.on('change', function (algoliaReturnElement) {
-                    _this.setCoordinateOnPlaces(algoliaReturnElement);
-                });
-            }
+        MapLeftTextComponent.prototype.handleAddressChange = function (event) {
+            this.googleMapReturnElement = {
+                suggestion: {
+                    latlng: {
+                        lat: event.geometry.location.lat(),
+                        lng: event.geometry.location.lng(),
+                    },
+                    value: event.name,
+                },
+            };
+            this.setCoordinateOnPlaces(this.googleMapReturnElement);
         };
         /**
          * Avoid partial map loaded at the initialization
@@ -29555,7 +29549,7 @@
     MapLeftTextComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: MapLeftTextService.selector(),
-                    template: "<div class=\"wb-map-left-text\">\n    <div class=\"columns is-gapless\">\n        <div class=\"column\">\n            <div class=\"wb-map-left-text__addresses\">\n                <div class=\"wb-map-left-text__address\">\n                    <wb-editorjs\n                        [(content)]=\"contents[BASE_BLOCK_CONTENT][FORM_NAME_TITLE]\"\n                        (contentChange)=\"persist()\"\n                        [placeholder]=\"'wb.shared.components.quill.1' | translate\"\n                    >\n                    </wb-editorjs>\n                </div>\n                <div class=\"columns is-gapless\">\n                    <div class=\"column is-1\">\n                        <wb-structure-config-font\n                            [(value)]=\"contents[BASE_BLOCK_CONTENT][FORM_NAME_ICON_ADDRESS]\"\n                            [white]=\"false\"\n                            [isSmall]=\"true\"\n                            [withImage]=\"false\"\n                            (valueChange)=\"contents[BASE_BLOCK_CONTENT][FORM_NAME_ICON_ADDRESS] = $event; persist()\"\n                        ></wb-structure-config-font>\n                    </div>\n                    <div class=\"column\">\n                        <div class=\"wb-map-left-text__address\">\n                            <wb-editorjs\n                                [(content)]=\"contents[BASE_BLOCK_CONTENT][FORM_NAME_ADDRESS]\"\n                                (contentChange)=\"persist()\"\n                                [placeholder]=\"'wb.shared.components.quill.1' | translate\"\n                            >\n                            </wb-editorjs>\n                        </div>\n                    </div>\n                </div>\n                <div class=\"columns is-gapless\">\n                    <div class=\"column is-1\">\n                        <wb-structure-config-font\n                            [(value)]=\"contents[BASE_BLOCK_CONTENT][FORM_NAME_ICON_PHONE]\"\n                            [white]=\"false\"\n                            [isSmall]=\"true\"\n                            [withImage]=\"false\"\n                            (valueChange)=\"contents[BASE_BLOCK_CONTENT][FORM_NAME_ICON_PHONE] = $event; persist()\"\n                        ></wb-structure-config-font>\n                    </div>\n                    <div class=\"column\">\n                        <div class=\"wb-map-left-text__address\">\n                            <wb-editorjs\n                                [(content)]=\"contents[BASE_BLOCK_CONTENT][FORM_NAME_PHONE]\"\n                                (contentChange)=\"persist()\"\n                                [placeholder]=\"'wb.shared.components.quill.1' | translate\"\n                            >\n                            </wb-editorjs>\n                        </div>\n                    </div>\n                </div>\n                <div class=\"columns is-gapless\">\n                    <div class=\"column is-1\">\n                        <wb-structure-config-font\n                            [(value)]=\"contents[BASE_BLOCK_CONTENT][FORM_NAME_ICON_EMAIL]\"\n                            [white]=\"false\"\n                            [isSmall]=\"true\"\n                            [withImage]=\"false\"\n                            (valueChange)=\"contents[BASE_BLOCK_CONTENT][FORM_NAME_ICON_EMAIL] = $event; persist()\"\n                        ></wb-structure-config-font>\n                    </div>\n                    <div class=\"column\">\n                        <div class=\"wb-map-left-text__address\">\n                            <wb-editorjs\n                                [(content)]=\"contents[BASE_BLOCK_CONTENT][FORM_NAME_EMAIL]\"\n                                (contentChange)=\"persist()\"\n                                [placeholder]=\"'wb.shared.components.quill.1' | translate\"\n                            >\n                            </wb-editorjs>\n                        </div>\n                    </div>\n                </div>\n            </div>\n            <div\n                class=\"wb-map-left-text__social\"\n                *ngIf=\"\n                    contents[BASE_BLOCK_CONTENT][FORM_NAME_FACEBOOK] ||\n                    contents[BASE_BLOCK_CONTENT][FORM_NAME_TWITTER] ||\n                    contents[BASE_BLOCK_CONTENT][FORM_NAME_PINTEREST] ||\n                    contents[BASE_BLOCK_CONTENT][FORM_NAME_INSTAGRAM]\n                \"\n            >\n                <div class=\"wb-map-left-text__social__facebook\" *ngIf=\"contents[BASE_BLOCK_CONTENT][FORM_NAME_FACEBOOK]\">\n                    <i class=\"fab fa-facebook-f\"></i>\n                </div>\n                <div class=\"wb-map-left-text__social__twitter\" *ngIf=\"contents[BASE_BLOCK_CONTENT][FORM_NAME_TWITTER]\">\n                    <i class=\"fab fa-twitter\"></i>\n                </div>\n                <div class=\"wb-map-left-text__social__pinterest\" *ngIf=\"contents[BASE_BLOCK_CONTENT][FORM_NAME_PINTEREST]\">\n                    <i class=\"fab fa-pinterest-p\"></i>\n                </div>\n                <div class=\"wb-map-left-text__social__instagram\" *ngIf=\"contents[BASE_BLOCK_CONTENT][FORM_NAME_INSTAGRAM]\">\n                    <i class=\"fab fa-instagram\"></i>\n                </div>\n            </div>\n        </div>\n        <div class=\"column\">\n            <div class=\"wb-map-left-text__container\">\n                <div *ngIf=\"showMap\">\n                    <div class=\"wb-map-left-text__container__config\">\n                        <wb-structure-config\n                            [blockUUID]=\"uuid\"\n                            [position]=\"TYPE_CONFIG_POSITION_RIGHT_TOP\"\n                            (click)=\"createEditAlgoliaInput()\"\n                            [isFullwidth]=\"true\"\n                        >\n                            <p>{{ 'wb.structures.template.19' | translate }}</p>\n                            <input\n                                id=\"address-input-edit{{ uuid }}\"\n                                type=\"text\"\n                                [(ngModel)]=\"address\"\n                                #myInputEdit\n                                (click)=\"myInputEdit.select()\"\n                            />\n                        </wb-structure-config>\n                    </div>\n                    <div class=\"wb-map-left-text__cover\"></div>\n                    <div\n                        class=\"wb-map-left-text__container__map\"\n                        leaflet\n                        [leafletOptions]=\"options\"\n                        [leafletLayers]=\"layers\"\n                        [(leafletCenter)]=\"center\"\n                        (leafletMapReady)=\"onMapReady($event)\"\n                    ></div>\n                </div>\n            </div>\n            <div class=\"wb-map-left-text__selector\" *ngIf=\"!showMap\">\n                <p>{{ 'wb.structures.template.19' | translate }}</p>\n                <input id=\"address-input{{ uuid }}\" type=\"text\" [(ngModel)]=\"address\" #myInput (click)=\"myInput.select()\" />\n            </div>\n        </div>\n    </div>\n</div>\n"
+                    template: "<div class=\"wb-map-left-text\">\n    <div class=\"columns is-gapless\">\n        <div class=\"column\">\n            <div class=\"wb-map-left-text__addresses\">\n                <div class=\"wb-map-left-text__address\">\n                    <wb-editorjs\n                        [(content)]=\"contents[BASE_BLOCK_CONTENT][FORM_NAME_TITLE]\"\n                        (contentChange)=\"persist()\"\n                        [placeholder]=\"'wb.shared.components.quill.1' | translate\"\n                    >\n                    </wb-editorjs>\n                </div>\n                <div class=\"columns is-gapless\">\n                    <div class=\"column is-1\">\n                        <wb-structure-config-font\n                            [(value)]=\"contents[BASE_BLOCK_CONTENT][FORM_NAME_ICON_ADDRESS]\"\n                            [white]=\"false\"\n                            [isSmall]=\"true\"\n                            [withImage]=\"false\"\n                            (valueChange)=\"contents[BASE_BLOCK_CONTENT][FORM_NAME_ICON_ADDRESS] = $event; persist()\"\n                        ></wb-structure-config-font>\n                    </div>\n                    <div class=\"column\">\n                        <div class=\"wb-map-left-text__address\">\n                            <wb-editorjs\n                                [(content)]=\"contents[BASE_BLOCK_CONTENT][FORM_NAME_ADDRESS]\"\n                                (contentChange)=\"persist()\"\n                                [placeholder]=\"'wb.shared.components.quill.1' | translate\"\n                            >\n                            </wb-editorjs>\n                        </div>\n                    </div>\n                </div>\n                <div class=\"columns is-gapless\">\n                    <div class=\"column is-1\">\n                        <wb-structure-config-font\n                            [(value)]=\"contents[BASE_BLOCK_CONTENT][FORM_NAME_ICON_PHONE]\"\n                            [white]=\"false\"\n                            [isSmall]=\"true\"\n                            [withImage]=\"false\"\n                            (valueChange)=\"contents[BASE_BLOCK_CONTENT][FORM_NAME_ICON_PHONE] = $event; persist()\"\n                        ></wb-structure-config-font>\n                    </div>\n                    <div class=\"column\">\n                        <div class=\"wb-map-left-text__address\">\n                            <wb-editorjs\n                                [(content)]=\"contents[BASE_BLOCK_CONTENT][FORM_NAME_PHONE]\"\n                                (contentChange)=\"persist()\"\n                                [placeholder]=\"'wb.shared.components.quill.1' | translate\"\n                            >\n                            </wb-editorjs>\n                        </div>\n                    </div>\n                </div>\n                <div class=\"columns is-gapless\">\n                    <div class=\"column is-1\">\n                        <wb-structure-config-font\n                            [(value)]=\"contents[BASE_BLOCK_CONTENT][FORM_NAME_ICON_EMAIL]\"\n                            [white]=\"false\"\n                            [isSmall]=\"true\"\n                            [withImage]=\"false\"\n                            (valueChange)=\"contents[BASE_BLOCK_CONTENT][FORM_NAME_ICON_EMAIL] = $event; persist()\"\n                        ></wb-structure-config-font>\n                    </div>\n                    <div class=\"column\">\n                        <div class=\"wb-map-left-text__address\">\n                            <wb-editorjs\n                                [(content)]=\"contents[BASE_BLOCK_CONTENT][FORM_NAME_EMAIL]\"\n                                (contentChange)=\"persist()\"\n                                [placeholder]=\"'wb.shared.components.quill.1' | translate\"\n                            >\n                            </wb-editorjs>\n                        </div>\n                    </div>\n                </div>\n            </div>\n            <div\n                class=\"wb-map-left-text__social\"\n                *ngIf=\"\n                    contents[BASE_BLOCK_CONTENT][FORM_NAME_FACEBOOK] ||\n                    contents[BASE_BLOCK_CONTENT][FORM_NAME_TWITTER] ||\n                    contents[BASE_BLOCK_CONTENT][FORM_NAME_PINTEREST] ||\n                    contents[BASE_BLOCK_CONTENT][FORM_NAME_INSTAGRAM]\n                \"\n            >\n                <div class=\"wb-map-left-text__social__facebook\" *ngIf=\"contents[BASE_BLOCK_CONTENT][FORM_NAME_FACEBOOK]\">\n                    <i class=\"fab fa-facebook-f\"></i>\n                </div>\n                <div class=\"wb-map-left-text__social__twitter\" *ngIf=\"contents[BASE_BLOCK_CONTENT][FORM_NAME_TWITTER]\">\n                    <i class=\"fab fa-twitter\"></i>\n                </div>\n                <div class=\"wb-map-left-text__social__pinterest\" *ngIf=\"contents[BASE_BLOCK_CONTENT][FORM_NAME_PINTEREST]\">\n                    <i class=\"fab fa-pinterest-p\"></i>\n                </div>\n                <div class=\"wb-map-left-text__social__instagram\" *ngIf=\"contents[BASE_BLOCK_CONTENT][FORM_NAME_INSTAGRAM]\">\n                    <i class=\"fab fa-instagram\"></i>\n                </div>\n            </div>\n        </div>\n        <div class=\"column\">\n            <div class=\"wb-map-left-text__container\">\n                <div *ngIf=\"showMap\">\n                    <div class=\"wb-map-left-text__container__config\">\n                        <wb-structure-config [blockUUID]=\"uuid\" [position]=\"TYPE_CONFIG_POSITION_RIGHT_TOP\" [isFullwidth]=\"true\">\n                            <p>{{ 'wb.structures.template.19' | translate }}</p>\n                            <input\n                                id=\"address-input-edit{{ uuid }}\"\n                                type=\"text\"\n                                [(ngModel)]=\"address\"\n                                #myInputEdit\n                                (click)=\"myInputEdit.select()\"\n                                ngx-google-places-autocomplete\n                                (onAddressChange)=\"handleAddressChange($event)\"\n                            />\n                        </wb-structure-config>\n                    </div>\n                    <div class=\"wb-map-left-text__cover\"></div>\n                    <div\n                        class=\"wb-map-left-text__container__map\"\n                        leaflet\n                        [leafletOptions]=\"options\"\n                        [leafletLayers]=\"layers\"\n                        [(leafletCenter)]=\"center\"\n                        (leafletMapReady)=\"onMapReady($event)\"\n                    ></div>\n                </div>\n            </div>\n            <div class=\"wb-map-left-text__selector\" *ngIf=\"!showMap\">\n                <p>{{ 'wb.structures.template.19' | translate }}</p>\n                <input\n                    id=\"address-input{{ uuid }}\"\n                    type=\"text\"\n                    [(ngModel)]=\"address\"\n                    #myInput\n                    (click)=\"myInput.select()\"\n                    ngx-google-places-autocomplete\n                    (onAddressChange)=\"handleAddressChange($event)\"\n                />\n            </div>\n        </div>\n    </div>\n</div>\n"
                 },] }
     ];
     MapLeftTextComponent.ctorParameters = function () { return [
@@ -29571,7 +29565,9 @@
             var _this = _super.call(this) || this;
             _this.externalConfigService = externalConfigService;
             _this.address = '';
+            _this.triggerAddress = '';
             _this.editPlaceMap = null;
+            _this.firstTimeTrigger = false;
             _this.options = {};
             _this.layers = [];
             _this.showMap = false;
@@ -29581,41 +29577,29 @@
         MapRightTextComponent.prototype.ngOnInit = function () {
             _super.prototype.ngOnInit.call(this);
             if (this.contentBlock[this.FORM_NAME_COORDINATE_Y] && this.contentBlock[this.FORM_NAME_COORDINATE_X]) {
-                var algolia = new OpenMapDto();
-                algolia.suggestion = {
-                    latlng: {
-                        lat: this.contentBlock[this.FORM_NAME_COORDINATE_Y],
-                        lng: this.contentBlock[this.FORM_NAME_COORDINATE_X],
+                this.googleMapReturnElement = {
+                    suggestion: {
+                        latlng: {
+                            lat: this.contentBlock[this.FORM_NAME_COORDINATE_Y],
+                            lng: this.contentBlock[this.FORM_NAME_COORDINATE_X],
+                        },
+                        value: '',
                     },
-                    value: '',
                 };
-                this.setCoordinateOnPlaces(algolia);
-            }
-        };
-        MapRightTextComponent.prototype.ngAfterViewInit = function () {
-            var _this = this;
-            if (!this.showMap) {
-                var placesAutocomplete = places__default['default']({
-                    appId: this.externalConfigService.getAlgoliaAppId(),
-                    apiKey: this.externalConfigService.getAlgoliaApiKey(),
-                    container: this.input.nativeElement,
-                });
-                placesAutocomplete.on('change', function (algoliaReturnElement) {
-                    _this.setCoordinateOnPlaces(algoliaReturnElement);
-                });
+                this.setCoordinateOnPlaces(this.googleMapReturnElement);
             }
         };
-        MapRightTextComponent.prototype.setCoordinateOnPlaces = function (algoliaReturnElement) {
+        MapRightTextComponent.prototype.setCoordinateOnPlaces = function (googleResults) {
             this.showMap = false;
             this.options = {
                 layers: [leaflet.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 18, attribution: 'WiziShop' })],
                 zoom: 18,
                 zoomControl: false,
-                center: leaflet.latLng(algoliaReturnElement.suggestion.latlng.lat, algoliaReturnElement.suggestion.latlng.lng),
+                center: leaflet.latLng(googleResults.suggestion.latlng.lat, googleResults.suggestion.latlng.lng),
             };
-            this.center = leaflet.latLng(algoliaReturnElement.suggestion.latlng.lat, algoliaReturnElement.suggestion.latlng.lng);
+            this.center = leaflet.latLng(googleResults.suggestion.latlng.lat, googleResults.suggestion.latlng.lng);
             this.layers = [
-                leaflet.marker([algoliaReturnElement.suggestion.latlng.lat, algoliaReturnElement.suggestion.latlng.lng], {
+                leaflet.marker([googleResults.suggestion.latlng.lat, googleResults.suggestion.latlng.lng], {
                     icon: leaflet.icon({
                         iconSize: [25, 41],
                         iconAnchor: [13, 41],
@@ -29624,24 +29608,23 @@
                     }),
                 }),
             ];
-            this.contentBlock[this.FORM_NAME_COORDINATE_Y] = algoliaReturnElement.suggestion.latlng.lat;
-            this.contentBlock[this.FORM_NAME_COORDINATE_X] = algoliaReturnElement.suggestion.latlng.lng;
-            this.address = algoliaReturnElement.suggestion.value;
+            this.contentBlock[this.FORM_NAME_COORDINATE_Y] = googleResults.suggestion.latlng.lat;
+            this.contentBlock[this.FORM_NAME_COORDINATE_X] = googleResults.suggestion.latlng.lng;
+            this.address = googleResults.suggestion.value;
             this.showMap = true;
             this.persist();
         };
-        MapRightTextComponent.prototype.createEditAlgoliaInput = function () {
-            var _this = this;
-            if (this.editPlaceMap === null) {
-                this.editPlaceMap = places__default['default']({
-                    appId: this.externalConfigService.getAlgoliaAppId(),
-                    apiKey: this.externalConfigService.getAlgoliaApiKey(),
-                    container: document.querySelector('#address-input-edit' + this.uuid),
-                });
-                this.editPlaceMap.on('change', function (algoliaReturnElement) {
-                    _this.setCoordinateOnPlaces(algoliaReturnElement);
-                });
-            }
+        MapRightTextComponent.prototype.handleAddressChange = function (event) {
+            this.googleMapReturnElement = {
+                suggestion: {
+                    latlng: {
+                        lat: event.geometry.location.lat(),
+                        lng: event.geometry.location.lng(),
+                    },
+                    value: event.name,
+                },
+            };
+            this.setCoordinateOnPlaces(this.googleMapReturnElement);
         };
         /**
          * Avoid partial map loaded at the initialization
@@ -29657,7 +29640,7 @@
     MapRightTextComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: MapRightTextService.selector(),
-                    template: "<div class=\"wb-map-right-text\">\n    <div class=\"columns is-gapless\">\n        <div class=\"column\">\n            <div class=\"wb-map-right-text__container\">\n                <div *ngIf=\"showMap\">\n                    <div class=\"wb-map-right-text__container__config\">\n                        <wb-structure-config\n                            [blockUUID]=\"uuid\"\n                            [position]=\"TYPE_CONFIG_POSITION_RIGHT_TOP\"\n                            (click)=\"createEditAlgoliaInput()\"\n                            [isFullwidth]=\"true\"\n                        >\n                            <p>{{ 'wb.structures.template.19' | translate }}</p>\n                            <input\n                                id=\"address-input-edit{{ uuid }}\"\n                                type=\"text\"\n                                [(ngModel)]=\"address\"\n                                #myInputEdit\n                                (click)=\"myInputEdit.select()\"\n                            />\n                        </wb-structure-config>\n                    </div>\n                    <div class=\"wb-map-right-text__cover\"></div>\n                    <div\n                        class=\"wb-map-right-text__container__map\"\n                        leaflet\n                        [leafletOptions]=\"options\"\n                        [leafletLayers]=\"layers\"\n                        [(leafletCenter)]=\"center\"\n                        (leafletMapReady)=\"onMapReady($event)\"\n                    ></div>\n                </div>\n            </div>\n            <div class=\"wb-map-right-text__selector\" *ngIf=\"!showMap\">\n                <p>{{ 'wb.structures.template.19' | translate }}</p>\n                <input id=\"address-input{{ uuid }}\" type=\"text\" [(ngModel)]=\"address\" #myInput (click)=\"myInput.select()\" />\n            </div>\n        </div>\n        <div class=\"column\">\n            <div class=\"wb-map-right-text__addresses\">\n                <div class=\"wb-map-right-text__address\">\n                    <wb-editorjs\n                        [(content)]=\"contents[BASE_BLOCK_CONTENT][FORM_NAME_TITLE]\"\n                        (contentChange)=\"persist()\"\n                        [placeholder]=\"'wb.shared.components.quill.1' | translate\"\n                    >\n                    </wb-editorjs>\n                </div>\n                <div class=\"columns is-gapless\">\n                    <div class=\"column is-1\">\n                        <wb-structure-config-font\n                            [(value)]=\"contents[BASE_BLOCK_CONTENT][FORM_NAME_ICON_ADDRESS]\"\n                            [white]=\"false\"\n                            [isSmall]=\"true\"\n                            [withImage]=\"false\"\n                            (valueChange)=\"contents[BASE_BLOCK_CONTENT][FORM_NAME_ICON_ADDRESS] = $event; persist()\"\n                        ></wb-structure-config-font>\n                    </div>\n                    <div class=\"column\">\n                        <div class=\"wb-map-right-text__address\">\n                            <wb-editorjs\n                                [(content)]=\"contents[BASE_BLOCK_CONTENT][FORM_NAME_ADDRESS]\"\n                                (contentChange)=\"persist()\"\n                                [placeholder]=\"'wb.shared.components.quill.1' | translate\"\n                            >\n                            </wb-editorjs>\n                        </div>\n                    </div>\n                </div>\n                <div class=\"columns is-gapless\">\n                    <div class=\"column is-1\">\n                        <wb-structure-config-font\n                            [(value)]=\"contents[BASE_BLOCK_CONTENT][FORM_NAME_ICON_PHONE]\"\n                            [white]=\"false\"\n                            [isSmall]=\"true\"\n                            [withImage]=\"false\"\n                            (valueChange)=\"contents[BASE_BLOCK_CONTENT][FORM_NAME_ICON_PHONE] = $event; persist()\"\n                        ></wb-structure-config-font>\n                    </div>\n                    <div class=\"column\">\n                        <div class=\"wb-map-right-text__address\">\n                            <wb-editorjs\n                                [(content)]=\"contents[BASE_BLOCK_CONTENT][FORM_NAME_PHONE]\"\n                                (contentChange)=\"persist()\"\n                                [placeholder]=\"'wb.shared.components.quill.1' | translate\"\n                            >\n                            </wb-editorjs>\n                        </div>\n                    </div>\n                </div>\n                <div class=\"columns is-gapless\">\n                    <div class=\"column is-1\">\n                        <wb-structure-config-font\n                            [(value)]=\"contents[BASE_BLOCK_CONTENT][FORM_NAME_ICON_EMAIL]\"\n                            [white]=\"false\"\n                            [isSmall]=\"true\"\n                            [withImage]=\"false\"\n                            (valueChange)=\"contents[BASE_BLOCK_CONTENT][FORM_NAME_ICON_EMAIL] = $event; persist()\"\n                        ></wb-structure-config-font>\n                    </div>\n                    <div class=\"column\">\n                        <div class=\"wb-map-right-text__address\">\n                            <wb-editorjs\n                                [(content)]=\"contents[BASE_BLOCK_CONTENT][FORM_NAME_EMAIL]\"\n                                (contentChange)=\"persist()\"\n                                [placeholder]=\"'wb.shared.components.quill.1' | translate\"\n                            >\n                            </wb-editorjs>\n                        </div>\n                    </div>\n                </div>\n            </div>\n            <div\n                class=\"wb-map-right-text__social\"\n                *ngIf=\"\n                    contents[BASE_BLOCK_CONTENT][FORM_NAME_FACEBOOK] ||\n                    contents[BASE_BLOCK_CONTENT][FORM_NAME_TWITTER] ||\n                    contents[BASE_BLOCK_CONTENT][FORM_NAME_PINTEREST] ||\n                    contents[BASE_BLOCK_CONTENT][FORM_NAME_INSTAGRAM]\n                \"\n            >\n                <div class=\"wb-map-right-text__social__facebook\" *ngIf=\"contents[BASE_BLOCK_CONTENT][FORM_NAME_FACEBOOK]\">\n                    <i class=\"fab fa-facebook-f\"></i>\n                </div>\n                <div class=\"wb-map-right-text__social__twitter\" *ngIf=\"contents[BASE_BLOCK_CONTENT][FORM_NAME_TWITTER]\">\n                    <i class=\"fab fa-twitter\"></i>\n                </div>\n                <div class=\"wb-map-right-text__social__pinterest\" *ngIf=\"contents[BASE_BLOCK_CONTENT][FORM_NAME_PINTEREST]\">\n                    <i class=\"fab fa-pinterest-p\"></i>\n                </div>\n                <div class=\"wb-map-right-text__social__instagram\" *ngIf=\"contents[BASE_BLOCK_CONTENT][FORM_NAME_INSTAGRAM]\">\n                    <i class=\"fab fa-instagram\"></i>\n                </div>\n            </div>\n        </div>\n    </div>\n</div>\n"
+                    template: "<div class=\"wb-map-right-text\">\n    <div class=\"columns is-gapless\">\n        <div class=\"column\">\n            <div class=\"wb-map-right-text__container\">\n                <div *ngIf=\"showMap\">\n                    <div class=\"wb-map-right-text__container__config\">\n                        <wb-structure-config [blockUUID]=\"uuid\" [position]=\"TYPE_CONFIG_POSITION_RIGHT_TOP\" [isFullwidth]=\"true\">\n                            <p>{{ 'wb.structures.template.19' | translate }}</p>\n                            <input\n                                id=\"address-input-edit{{ uuid }}\"\n                                type=\"text\"\n                                [(ngModel)]=\"address\"\n                                #myInputEdit\n                                (click)=\"myInputEdit.select()\"\n                                ngx-google-places-autocomplete\n                                (onAddressChange)=\"handleAddressChange($event)\"\n                            />\n                        </wb-structure-config>\n                    </div>\n                    <div class=\"wb-map-right-text__cover\"></div>\n                    <div\n                        class=\"wb-map-right-text__container__map\"\n                        leaflet\n                        [leafletOptions]=\"options\"\n                        [leafletLayers]=\"layers\"\n                        [(leafletCenter)]=\"center\"\n                        (leafletMapReady)=\"onMapReady($event)\"\n                    ></div>\n                </div>\n            </div>\n            <div class=\"wb-map-right-text__selector\" *ngIf=\"!showMap\">\n                <p>{{ 'wb.structures.template.19' | translate }}</p>\n                <input\n                    id=\"address-input{{ uuid }}\"\n                    type=\"text\"\n                    [(ngModel)]=\"address\"\n                    #myInput\n                    (click)=\"myInput.select()\"\n                    ngx-google-places-autocomplete\n                    (onAddressChange)=\"handleAddressChange($event)\"\n                />\n            </div>\n        </div>\n        <div class=\"column\">\n            <div class=\"wb-map-right-text__addresses\">\n                <div class=\"wb-map-right-text__address\">\n                    <wb-editorjs\n                        [(content)]=\"contents[BASE_BLOCK_CONTENT][FORM_NAME_TITLE]\"\n                        (contentChange)=\"persist()\"\n                        [placeholder]=\"'wb.shared.components.quill.1' | translate\"\n                    >\n                    </wb-editorjs>\n                </div>\n                <div class=\"columns is-gapless\">\n                    <div class=\"column is-1\">\n                        <wb-structure-config-font\n                            [(value)]=\"contents[BASE_BLOCK_CONTENT][FORM_NAME_ICON_ADDRESS]\"\n                            [white]=\"false\"\n                            [isSmall]=\"true\"\n                            [withImage]=\"false\"\n                            (valueChange)=\"contents[BASE_BLOCK_CONTENT][FORM_NAME_ICON_ADDRESS] = $event; persist()\"\n                        ></wb-structure-config-font>\n                    </div>\n                    <div class=\"column\">\n                        <div class=\"wb-map-right-text__address\">\n                            <wb-editorjs\n                                [(content)]=\"contents[BASE_BLOCK_CONTENT][FORM_NAME_ADDRESS]\"\n                                (contentChange)=\"persist()\"\n                                [placeholder]=\"'wb.shared.components.quill.1' | translate\"\n                            >\n                            </wb-editorjs>\n                        </div>\n                    </div>\n                </div>\n                <div class=\"columns is-gapless\">\n                    <div class=\"column is-1\">\n                        <wb-structure-config-font\n                            [(value)]=\"contents[BASE_BLOCK_CONTENT][FORM_NAME_ICON_PHONE]\"\n                            [white]=\"false\"\n                            [isSmall]=\"true\"\n                            [withImage]=\"false\"\n                            (valueChange)=\"contents[BASE_BLOCK_CONTENT][FORM_NAME_ICON_PHONE] = $event; persist()\"\n                        ></wb-structure-config-font>\n                    </div>\n                    <div class=\"column\">\n                        <div class=\"wb-map-right-text__address\">\n                            <wb-editorjs\n                                [(content)]=\"contents[BASE_BLOCK_CONTENT][FORM_NAME_PHONE]\"\n                                (contentChange)=\"persist()\"\n                                [placeholder]=\"'wb.shared.components.quill.1' | translate\"\n                            >\n                            </wb-editorjs>\n                        </div>\n                    </div>\n                </div>\n                <div class=\"columns is-gapless\">\n                    <div class=\"column is-1\">\n                        <wb-structure-config-font\n                            [(value)]=\"contents[BASE_BLOCK_CONTENT][FORM_NAME_ICON_EMAIL]\"\n                            [white]=\"false\"\n                            [isSmall]=\"true\"\n                            [withImage]=\"false\"\n                            (valueChange)=\"contents[BASE_BLOCK_CONTENT][FORM_NAME_ICON_EMAIL] = $event; persist()\"\n                        ></wb-structure-config-font>\n                    </div>\n                    <div class=\"column\">\n                        <div class=\"wb-map-right-text__address\">\n                            <wb-editorjs\n                                [(content)]=\"contents[BASE_BLOCK_CONTENT][FORM_NAME_EMAIL]\"\n                                (contentChange)=\"persist()\"\n                                [placeholder]=\"'wb.shared.components.quill.1' | translate\"\n                            >\n                            </wb-editorjs>\n                        </div>\n                    </div>\n                </div>\n            </div>\n            <div\n                class=\"wb-map-right-text__social\"\n                *ngIf=\"\n                    contents[BASE_BLOCK_CONTENT][FORM_NAME_FACEBOOK] ||\n                    contents[BASE_BLOCK_CONTENT][FORM_NAME_TWITTER] ||\n                    contents[BASE_BLOCK_CONTENT][FORM_NAME_PINTEREST] ||\n                    contents[BASE_BLOCK_CONTENT][FORM_NAME_INSTAGRAM]\n                \"\n            >\n                <div class=\"wb-map-right-text__social__facebook\" *ngIf=\"contents[BASE_BLOCK_CONTENT][FORM_NAME_FACEBOOK]\">\n                    <i class=\"fab fa-facebook-f\"></i>\n                </div>\n                <div class=\"wb-map-right-text__social__twitter\" *ngIf=\"contents[BASE_BLOCK_CONTENT][FORM_NAME_TWITTER]\">\n                    <i class=\"fab fa-twitter\"></i>\n                </div>\n                <div class=\"wb-map-right-text__social__pinterest\" *ngIf=\"contents[BASE_BLOCK_CONTENT][FORM_NAME_PINTEREST]\">\n                    <i class=\"fab fa-pinterest-p\"></i>\n                </div>\n                <div class=\"wb-map-right-text__social__instagram\" *ngIf=\"contents[BASE_BLOCK_CONTENT][FORM_NAME_INSTAGRAM]\">\n                    <i class=\"fab fa-instagram\"></i>\n                </div>\n            </div>\n        </div>\n    </div>\n</div>\n"
                 },] }
     ];
     MapRightTextComponent.ctorParameters = function () { return [
@@ -29667,6 +29650,12 @@
         input: [{ type: i0.ViewChild, args: ['myInput',] }]
     };
 
+    var OpenMapDto = /** @class */ (function () {
+        function OpenMapDto() {
+        }
+        return OpenMapDto;
+    }());
+
     var MapTextFormComponent = /** @class */ (function (_super) {
         __extends(MapTextFormComponent, _super);
         function MapTextFormComponent(apiService, externalConfigService) {
@@ -29674,7 +29663,9 @@
             _this.apiService = apiService;
             _this.externalConfigService = externalConfigService;
             _this.address = '';
+            _this.triggerAddress = '';
             _this.editPlaceMap = null;
+            _this.firstTimeTrigger = false;
             _this.options = {};
             _this.layers = [];
             _this.showMap = false;
@@ -29710,30 +29701,17 @@
                 }
             });
         };
-        MapTextFormComponent.prototype.ngAfterViewInit = function () {
-            var _this = this;
-            if (!this.showMap) {
-                var placesAutocomplete = places__default['default']({
-                    appId: this.externalConfigService.getAlgoliaAppId(),
-                    apiKey: this.externalConfigService.getAlgoliaApiKey(),
-                    container: this.input.nativeElement,
-                });
-                placesAutocomplete.on('change', function (algoliaReturnElement) {
-                    _this.setCoordinateOnPlaces(algoliaReturnElement);
-                });
-            }
-        };
-        MapTextFormComponent.prototype.setCoordinateOnPlaces = function (algoliaReturnElement) {
+        MapTextFormComponent.prototype.setCoordinateOnPlaces = function (googleResults) {
             this.showMap = false;
             this.options = {
-                layers: [leaflet.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 16, attribution: 'WiziShop' })],
+                layers: [leaflet.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 18, attribution: 'WiziShop' })],
                 zoom: 18,
                 zoomControl: false,
-                center: leaflet.latLng(algoliaReturnElement.suggestion.latlng.lat, algoliaReturnElement.suggestion.latlng.lng),
+                center: leaflet.latLng(googleResults.suggestion.latlng.lat, googleResults.suggestion.latlng.lng),
             };
-            this.center = leaflet.latLng(algoliaReturnElement.suggestion.latlng.lat, algoliaReturnElement.suggestion.latlng.lng);
+            this.center = leaflet.latLng(googleResults.suggestion.latlng.lat, googleResults.suggestion.latlng.lng);
             this.layers = [
-                leaflet.marker([algoliaReturnElement.suggestion.latlng.lat, algoliaReturnElement.suggestion.latlng.lng], {
+                leaflet.marker([googleResults.suggestion.latlng.lat, googleResults.suggestion.latlng.lng], {
                     icon: leaflet.icon({
                         iconSize: [25, 41],
                         iconAnchor: [13, 41],
@@ -29742,24 +29720,32 @@
                     }),
                 }),
             ];
-            this.contentBlock[this.FORM_NAME_COORDINATE_Y] = algoliaReturnElement.suggestion.latlng.lat;
-            this.contentBlock[this.FORM_NAME_COORDINATE_X] = algoliaReturnElement.suggestion.latlng.lng;
-            this.address = algoliaReturnElement.suggestion.value;
+            this.contentBlock[this.FORM_NAME_COORDINATE_Y] = googleResults.suggestion.latlng.lat;
+            this.contentBlock[this.FORM_NAME_COORDINATE_X] = googleResults.suggestion.latlng.lng;
+            this.address = googleResults.suggestion.value;
             this.showMap = true;
             this.persist();
         };
-        MapTextFormComponent.prototype.createEditAlgoliaInput = function () {
-            var _this = this;
-            if (this.editPlaceMap === null) {
-                this.editPlaceMap = places__default['default']({
-                    appId: this.externalConfigService.getAlgoliaAppId(),
-                    apiKey: this.externalConfigService.getAlgoliaApiKey(),
-                    container: document.querySelector('#address-input-edit' + this.uuid),
-                });
-                this.editPlaceMap.on('change', function (algoliaReturnElement) {
-                    _this.setCoordinateOnPlaces(algoliaReturnElement);
-                });
-            }
+        MapTextFormComponent.prototype.handleAddressChange = function (event) {
+            this.googleMapReturnElement = {
+                suggestion: {
+                    latlng: {
+                        lat: event.geometry.location.lat(),
+                        lng: event.geometry.location.lng(),
+                    },
+                    value: event.name,
+                },
+            };
+            this.setCoordinateOnPlaces(this.googleMapReturnElement);
+        };
+        /**
+         * Avoid partial map loaded at the initialization
+         * @param map
+         */
+        MapTextFormComponent.prototype.onMapReady = function (map) {
+            setTimeout(function () {
+                map.invalidateSize();
+            }, 0);
         };
         MapTextFormComponent.prototype.selectThisForm = function () {
             var _this = this;
@@ -29772,21 +29758,12 @@
             this.contentBlock[FORM_NAME_ID_FORM] = this.selectedValue.id;
             this.persist();
         };
-        /**
-         * Avoid partial map loaded at the initialization
-         * @param map
-         */
-        MapTextFormComponent.prototype.onMapReady = function (map) {
-            setTimeout(function () {
-                map.invalidateSize();
-            }, 0);
-        };
         return MapTextFormComponent;
     }(StructuresComponent));
     MapTextFormComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: MapTextFormService.selector(),
-                    template: "<div class=\"wb-map-text-form\">\n    <div class=\"wb-map-text-form__container__config\" *ngIf=\"showMap\">\n        <wb-structure-config\n            [blockUUID]=\"uuid\"\n            [position]=\"TYPE_CONFIG_POSITION_LEFT_TOP\"\n            (click)=\"createEditAlgoliaInput()\"\n            [isFullwidth]=\"true\"\n        >\n            <p>{{ 'wb.structures.template.19' | translate }}</p>\n            <input id=\"address-input-edit{{ uuid }}\" type=\"text\" [(ngModel)]=\"address\" #myInputEdit (click)=\"myInputEdit.select()\" />\n        </wb-structure-config>\n    </div>\n    <div class=\"wb-map-text-form__selector\" *ngIf=\"!showMap\">\n        <p>{{ 'wb.structures.template.19' | translate }}</p>\n        <input id=\"address-input{{ uuid }}\" type=\"text\" [(ngModel)]=\"address\" #myInput (click)=\"myInput.select()\" />\n    </div>\n    <div class=\"columns is-gapless\" *ngIf=\"showMap\">\n        <div class=\"column\">\n            <div class=\"wb-map-text-form__addresses\">\n                <div class=\"columns is-gapless\">\n                    <div class=\"column is-1\">\n                        <wb-structure-config-font\n                            [(value)]=\"contents[BASE_BLOCK_CONTENT][FORM_NAME_ICON_ADDRESS]\"\n                            [white]=\"false\"\n                            [isSmall]=\"true\"\n                            [withImage]=\"false\"\n                            (valueChange)=\"contents[BASE_BLOCK_CONTENT][FORM_NAME_ICON_ADDRESS] = $event; persist()\"\n                        ></wb-structure-config-font>\n                    </div>\n                    <div class=\"column\">\n                        <div class=\"wb-map-text-form__address\">\n                            <wb-editorjs\n                                [(content)]=\"contents[BASE_BLOCK_CONTENT][FORM_NAME_ADDRESS]\"\n                                (contentChange)=\"persist()\"\n                                [placeholder]=\"'wb.shared.components.quill.1' | translate\"\n                            >\n                            </wb-editorjs>\n                        </div>\n                    </div>\n                </div>\n                <div class=\"columns is-gapless\">\n                    <div class=\"column is-1\">\n                        <wb-structure-config-font\n                            [(value)]=\"contents[BASE_BLOCK_CONTENT][FORM_NAME_ICON_PHONE]\"\n                            [white]=\"false\"\n                            [isSmall]=\"true\"\n                            [withImage]=\"false\"\n                            (valueChange)=\"contents[BASE_BLOCK_CONTENT][FORM_NAME_ICON_PHONE] = $event; persist()\"\n                        ></wb-structure-config-font>\n                    </div>\n                    <div class=\"column\">\n                        <div class=\"wb-map-text-form__address\">\n                            <wb-editorjs\n                                [(content)]=\"contents[BASE_BLOCK_CONTENT][FORM_NAME_PHONE]\"\n                                (contentChange)=\"persist()\"\n                                [placeholder]=\"'wb.shared.components.quill.1' | translate\"\n                            >\n                            </wb-editorjs>\n                        </div>\n                    </div>\n                </div>\n                <div class=\"columns is-gapless\">\n                    <div class=\"column is-1\">\n                        <wb-structure-config-font\n                            [(value)]=\"contents[BASE_BLOCK_CONTENT][FORM_NAME_ICON_EMAIL]\"\n                            [white]=\"false\"\n                            [isSmall]=\"true\"\n                            [withImage]=\"false\"\n                            (valueChange)=\"contents[BASE_BLOCK_CONTENT][FORM_NAME_ICON_EMAIL] = $event; persist()\"\n                        ></wb-structure-config-font>\n                    </div>\n                    <div class=\"column\">\n                        <div class=\"wb-map-text-form__address\">\n                            <wb-editorjs\n                                [(content)]=\"contents[BASE_BLOCK_CONTENT][FORM_NAME_EMAIL]\"\n                                (contentChange)=\"persist()\"\n                                [placeholder]=\"'wb.shared.components.quill.1' | translate\"\n                            >\n                            </wb-editorjs>\n                        </div>\n                    </div>\n                </div>\n            </div>\n            <div\n                class=\"wb-map-text-form__social\"\n                *ngIf=\"\n                    contents[BASE_BLOCK_CONTENT][FORM_NAME_FACEBOOK] ||\n                    contents[BASE_BLOCK_CONTENT][FORM_NAME_TWITTER] ||\n                    contents[BASE_BLOCK_CONTENT][FORM_NAME_PINTEREST] ||\n                    contents[BASE_BLOCK_CONTENT][FORM_NAME_INSTAGRAM]\n                \"\n            >\n                <div class=\"wb-map-text-form__social__facebook\" *ngIf=\"contents[BASE_BLOCK_CONTENT][FORM_NAME_FACEBOOK]\">\n                    <i class=\"fab fa-facebook-f\"></i>\n                </div>\n                <div class=\"wb-map-text-form__social__twitter\" *ngIf=\"contents[BASE_BLOCK_CONTENT][FORM_NAME_TWITTER]\">\n                    <i class=\"fab fa-twitter\"></i>\n                </div>\n                <div class=\"wb-map-text-form__social__pinterest\" *ngIf=\"contents[BASE_BLOCK_CONTENT][FORM_NAME_PINTEREST]\">\n                    <i class=\"fab fa-pinterest-p\"></i>\n                </div>\n                <div class=\"wb-map-text-form__social__instagram\" *ngIf=\"contents[BASE_BLOCK_CONTENT][FORM_NAME_INSTAGRAM]\">\n                    <i class=\"fab fa-instagram\"></i>\n                </div>\n            </div>\n            <div class=\"wb-map-text-form__container\">\n                <div *ngIf=\"showMap\">\n                    <div class=\"wb-map-text-form__cover\"></div>\n                    <div\n                        class=\"wb-map-text-form__container__map\"\n                        leaflet\n                        [leafletOptions]=\"options\"\n                        [leafletLayers]=\"layers\"\n                        [(leafletCenter)]=\"center\"\n                        (leafletMapReady)=\"onMapReady($event)\"\n                    ></div>\n                </div>\n            </div>\n        </div>\n        <div class=\"column\">\n            <div *ngIf=\"selectedDetailForm.length === 0\">\n                <div *ngIf=\"forms.length === 0\" class=\"wb-map-text-form__loader\">\n                    <wb-loader></wb-loader>\n                </div>\n                <div class=\"wb-map-text-form__selector\" *ngIf=\"forms.length > 0\">\n                    <wb-structure-select\n                        [selectedValue]=\"selectedValue\"\n                        [forms]=\"forms\"\n                        (changed)=\"selectedValue = $event; selectThisForm()\"\n                    ></wb-structure-select>\n                </div>\n            </div>\n            <div *ngIf=\"selectedDetailForm.length > 0\" class=\"wb-map-text-form__container-form\">\n                <div class=\"wb-map-text-form__container-form__editor\">\n                    <div>\n                        <wb-editorjs\n                            [(content)]=\"contents[BASE_BLOCK_CONTENT][FORM_NAME_TITLE]\"\n                            (contentChange)=\"persist()\"\n                            [placeholder]=\"'wb.shared.components.quill.1' | translate\"\n                        >\n                        </wb-editorjs>\n                    </div>\n                    <div>\n                        <wb-editorjs\n                            [(content)]=\"contents[BASE_BLOCK_CONTENT][FORM_NAME_CONTENT]\"\n                            (contentChange)=\"persist()\"\n                            [placeholder]=\"'wb.shared.components.quill.1' | translate\"\n                        >\n                        </wb-editorjs>\n                    </div>\n                </div>\n                <div class=\"wb-map-text-form__container-form__content\">\n                    <div *ngFor=\"let select of selectedDetailForm\">\n                        <p [innerHTML]=\"select.title\"></p>\n                        <p>{{ select.type | answerPipe | translate }}</p>\n                    </div>\n                    <div>\n                        <wb-structure-select\n                            [selectedValue]=\"selectedValue\"\n                            [forms]=\"forms\"\n                            (changed)=\"selectedValue = $event; selectThisForm()\"\n                        ></wb-structure-select>\n                        &nbsp;&nbsp;&nbsp;\n                        <button>{{ selectedValue.submit_label }}</button>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n</div>\n"
+                    template: "<div class=\"wb-map-text-form\">\n    <div class=\"wb-map-text-form__container__config\" *ngIf=\"showMap\">\n        <wb-structure-config [blockUUID]=\"uuid\" [position]=\"TYPE_CONFIG_POSITION_LEFT_TOP\" [isFullwidth]=\"true\">\n            <p>{{ 'wb.structures.template.19' | translate }}</p>\n            <input\n                id=\"address-input-edit{{ uuid }}\"\n                type=\"text\"\n                [(ngModel)]=\"address\"\n                #myInputEdit\n                (click)=\"myInputEdit.select()\"\n                ngx-google-places-autocomplete\n                (onAddressChange)=\"handleAddressChange($event)\"\n            />\n        </wb-structure-config>\n    </div>\n    <div class=\"wb-map-text-form__selector\" *ngIf=\"!showMap\">\n        <p>{{ 'wb.structures.template.19' | translate }}</p>\n        <input\n            id=\"address-input{{ uuid }}\"\n            type=\"text\"\n            [(ngModel)]=\"address\"\n            #myInput\n            (click)=\"myInput.select()\"\n            ngx-google-places-autocomplete\n            (onAddressChange)=\"handleAddressChange($event)\"\n        />\n    </div>\n    <div class=\"columns is-gapless\" *ngIf=\"showMap\">\n        <div class=\"column\">\n            <div class=\"wb-map-text-form__addresses\">\n                <div class=\"columns is-gapless\">\n                    <div class=\"column is-1\">\n                        <wb-structure-config-font\n                            [(value)]=\"contents[BASE_BLOCK_CONTENT][FORM_NAME_ICON_ADDRESS]\"\n                            [white]=\"false\"\n                            [isSmall]=\"true\"\n                            [withImage]=\"false\"\n                            (valueChange)=\"contents[BASE_BLOCK_CONTENT][FORM_NAME_ICON_ADDRESS] = $event; persist()\"\n                        ></wb-structure-config-font>\n                    </div>\n                    <div class=\"column\">\n                        <div class=\"wb-map-text-form__address\">\n                            <wb-editorjs\n                                [(content)]=\"contents[BASE_BLOCK_CONTENT][FORM_NAME_ADDRESS]\"\n                                (contentChange)=\"persist()\"\n                                [placeholder]=\"'wb.shared.components.quill.1' | translate\"\n                            >\n                            </wb-editorjs>\n                        </div>\n                    </div>\n                </div>\n                <div class=\"columns is-gapless\">\n                    <div class=\"column is-1\">\n                        <wb-structure-config-font\n                            [(value)]=\"contents[BASE_BLOCK_CONTENT][FORM_NAME_ICON_PHONE]\"\n                            [white]=\"false\"\n                            [isSmall]=\"true\"\n                            [withImage]=\"false\"\n                            (valueChange)=\"contents[BASE_BLOCK_CONTENT][FORM_NAME_ICON_PHONE] = $event; persist()\"\n                        ></wb-structure-config-font>\n                    </div>\n                    <div class=\"column\">\n                        <div class=\"wb-map-text-form__address\">\n                            <wb-editorjs\n                                [(content)]=\"contents[BASE_BLOCK_CONTENT][FORM_NAME_PHONE]\"\n                                (contentChange)=\"persist()\"\n                                [placeholder]=\"'wb.shared.components.quill.1' | translate\"\n                            >\n                            </wb-editorjs>\n                        </div>\n                    </div>\n                </div>\n                <div class=\"columns is-gapless\">\n                    <div class=\"column is-1\">\n                        <wb-structure-config-font\n                            [(value)]=\"contents[BASE_BLOCK_CONTENT][FORM_NAME_ICON_EMAIL]\"\n                            [white]=\"false\"\n                            [isSmall]=\"true\"\n                            [withImage]=\"false\"\n                            (valueChange)=\"contents[BASE_BLOCK_CONTENT][FORM_NAME_ICON_EMAIL] = $event; persist()\"\n                        ></wb-structure-config-font>\n                    </div>\n                    <div class=\"column\">\n                        <div class=\"wb-map-text-form__address\">\n                            <wb-editorjs\n                                [(content)]=\"contents[BASE_BLOCK_CONTENT][FORM_NAME_EMAIL]\"\n                                (contentChange)=\"persist()\"\n                                [placeholder]=\"'wb.shared.components.quill.1' | translate\"\n                            >\n                            </wb-editorjs>\n                        </div>\n                    </div>\n                </div>\n            </div>\n            <div\n                class=\"wb-map-text-form__social\"\n                *ngIf=\"\n                    contents[BASE_BLOCK_CONTENT][FORM_NAME_FACEBOOK] ||\n                    contents[BASE_BLOCK_CONTENT][FORM_NAME_TWITTER] ||\n                    contents[BASE_BLOCK_CONTENT][FORM_NAME_PINTEREST] ||\n                    contents[BASE_BLOCK_CONTENT][FORM_NAME_INSTAGRAM]\n                \"\n            >\n                <div class=\"wb-map-text-form__social__facebook\" *ngIf=\"contents[BASE_BLOCK_CONTENT][FORM_NAME_FACEBOOK]\">\n                    <i class=\"fab fa-facebook-f\"></i>\n                </div>\n                <div class=\"wb-map-text-form__social__twitter\" *ngIf=\"contents[BASE_BLOCK_CONTENT][FORM_NAME_TWITTER]\">\n                    <i class=\"fab fa-twitter\"></i>\n                </div>\n                <div class=\"wb-map-text-form__social__pinterest\" *ngIf=\"contents[BASE_BLOCK_CONTENT][FORM_NAME_PINTEREST]\">\n                    <i class=\"fab fa-pinterest-p\"></i>\n                </div>\n                <div class=\"wb-map-text-form__social__instagram\" *ngIf=\"contents[BASE_BLOCK_CONTENT][FORM_NAME_INSTAGRAM]\">\n                    <i class=\"fab fa-instagram\"></i>\n                </div>\n            </div>\n            <div class=\"wb-map-text-form__container\">\n                <div *ngIf=\"showMap\">\n                    <div class=\"wb-map-text-form__cover\"></div>\n                    <div\n                        class=\"wb-map-text-form__container__map\"\n                        leaflet\n                        [leafletOptions]=\"options\"\n                        [leafletLayers]=\"layers\"\n                        [(leafletCenter)]=\"center\"\n                        (leafletMapReady)=\"onMapReady($event)\"\n                    ></div>\n                </div>\n            </div>\n        </div>\n        <div class=\"column\">\n            <div *ngIf=\"selectedDetailForm.length === 0\">\n                <div *ngIf=\"forms.length === 0\" class=\"wb-map-text-form__loader\">\n                    <wb-loader></wb-loader>\n                </div>\n                <div class=\"wb-map-text-form__selector\" *ngIf=\"forms.length > 0\">\n                    <wb-structure-select\n                        [selectedValue]=\"selectedValue\"\n                        [forms]=\"forms\"\n                        (changed)=\"selectedValue = $event; selectThisForm()\"\n                    ></wb-structure-select>\n                </div>\n            </div>\n            <div *ngIf=\"selectedDetailForm.length > 0\" class=\"wb-map-text-form__container-form\">\n                <div class=\"wb-map-text-form__container-form__editor\">\n                    <div>\n                        <wb-editorjs\n                            [(content)]=\"contents[BASE_BLOCK_CONTENT][FORM_NAME_TITLE]\"\n                            (contentChange)=\"persist()\"\n                            [placeholder]=\"'wb.shared.components.quill.1' | translate\"\n                        >\n                        </wb-editorjs>\n                    </div>\n                    <div>\n                        <wb-editorjs\n                            [(content)]=\"contents[BASE_BLOCK_CONTENT][FORM_NAME_CONTENT]\"\n                            (contentChange)=\"persist()\"\n                            [placeholder]=\"'wb.shared.components.quill.1' | translate\"\n                        >\n                        </wb-editorjs>\n                    </div>\n                </div>\n                <div class=\"wb-map-text-form__container-form__content\">\n                    <div *ngFor=\"let select of selectedDetailForm\">\n                        <p [innerHTML]=\"select.title\"></p>\n                        <p>{{ select.type | answerPipe | translate }}</p>\n                    </div>\n                    <div>\n                        <wb-structure-select\n                            [selectedValue]=\"selectedValue\"\n                            [forms]=\"forms\"\n                            (changed)=\"selectedValue = $event; selectThisForm()\"\n                        ></wb-structure-select>\n                        &nbsp;&nbsp;&nbsp;\n                        <button>{{ selectedValue.submit_label }}</button>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n</div>\n"
                 },] }
     ];
     MapTextFormComponent.ctorParameters = function () { return [
@@ -29803,7 +29780,9 @@
             var _this = _super.call(this) || this;
             _this.apiService = apiService;
             _this.address = '';
+            _this.triggerAddress = '';
             _this.editPlaceMap = null;
+            _this.firstTimeTrigger = false;
             _this.options = {};
             _this.layers = [];
             _this.showMap = false;
@@ -29828,28 +29807,17 @@
                 }
             });
         };
-        MapBackgroundFormLeftComponent.prototype.ngAfterViewInit = function () {
-            var _this = this;
-            var placesAutocomplete = places__default['default']({
-                appId: 'pl9OI1NPY62Y',
-                apiKey: '290e5a0e33e751c85c36690d502991fc',
-                container: this.input.nativeElement,
-            });
-            placesAutocomplete.on('change', function (algoliaReturnElement) {
-                _this.setCoordinateOnPlaces(algoliaReturnElement);
-            });
-        };
-        MapBackgroundFormLeftComponent.prototype.setCoordinateOnPlaces = function (algoliaReturnElement) {
+        MapBackgroundFormLeftComponent.prototype.setCoordinateOnPlaces = function (googleResults) {
             this.showMap = false;
             this.options = {
-                layers: [leaflet.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 16, attribution: 'WiziShop' })],
+                layers: [leaflet.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 18, attribution: 'WiziShop' })],
                 zoom: 18,
                 zoomControl: false,
-                center: leaflet.latLng(algoliaReturnElement.suggestion.latlng.lat, algoliaReturnElement.suggestion.latlng.lng),
+                center: leaflet.latLng(googleResults.suggestion.latlng.lat, googleResults.suggestion.latlng.lng),
             };
-            this.center = leaflet.latLng(algoliaReturnElement.suggestion.latlng.lat, algoliaReturnElement.suggestion.latlng.lng);
+            this.center = leaflet.latLng(googleResults.suggestion.latlng.lat, googleResults.suggestion.latlng.lng);
             this.layers = [
-                leaflet.marker([algoliaReturnElement.suggestion.latlng.lat, algoliaReturnElement.suggestion.latlng.lng], {
+                leaflet.marker([googleResults.suggestion.latlng.lat, googleResults.suggestion.latlng.lng], {
                     icon: leaflet.icon({
                         iconSize: [25, 41],
                         iconAnchor: [13, 41],
@@ -29858,24 +29826,32 @@
                     }),
                 }),
             ];
-            this.contentBlock[this.FORM_NAME_COORDINATE_Y] = algoliaReturnElement.suggestion.latlng.lat;
-            this.contentBlock[this.FORM_NAME_COORDINATE_X] = algoliaReturnElement.suggestion.latlng.lng;
-            this.address = algoliaReturnElement.suggestion.value;
+            this.contentBlock[this.FORM_NAME_COORDINATE_Y] = googleResults.suggestion.latlng.lat;
+            this.contentBlock[this.FORM_NAME_COORDINATE_X] = googleResults.suggestion.latlng.lng;
+            this.address = googleResults.suggestion.value;
             this.showMap = true;
             this.persist();
         };
-        MapBackgroundFormLeftComponent.prototype.createEditAlgoliaInput = function () {
-            var _this = this;
-            if (this.editPlaceMap === null) {
-                this.editPlaceMap = places__default['default']({
-                    appId: 'pl9OI1NPY62Y',
-                    apiKey: '290e5a0e33e751c85c36690d502991fc',
-                    container: document.querySelector('#address-input-edit' + this.uuid),
-                });
-                this.editPlaceMap.on('change', function (algoliaReturnElement) {
-                    _this.setCoordinateOnPlaces(algoliaReturnElement);
-                });
-            }
+        MapBackgroundFormLeftComponent.prototype.handleAddressChange = function (event) {
+            this.googleMapReturnElement = {
+                suggestion: {
+                    latlng: {
+                        lat: event.geometry.location.lat(),
+                        lng: event.geometry.location.lng(),
+                    },
+                    value: event.name,
+                },
+            };
+            this.setCoordinateOnPlaces(this.googleMapReturnElement);
+        };
+        /**
+         * Avoid partial map loaded at the initialization
+         * @param map
+         */
+        MapBackgroundFormLeftComponent.prototype.onMapReady = function (map) {
+            setTimeout(function () {
+                map.invalidateSize();
+            }, 0);
         };
         MapBackgroundFormLeftComponent.prototype.selectThisForm = function () {
             var _this = this;
@@ -29888,21 +29864,12 @@
             this.contentBlock[FORM_NAME_ID_FORM] = this.selectedValue.id;
             this.persist();
         };
-        /**
-         * Avoid partial map loaded at the initialization
-         * @param map
-         */
-        MapBackgroundFormLeftComponent.prototype.onMapReady = function (map) {
-            setTimeout(function () {
-                map.invalidateSize();
-            }, 0);
-        };
         return MapBackgroundFormLeftComponent;
     }(StructuresComponent));
     MapBackgroundFormLeftComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: MapBackgroundFormLeftService.selector(),
-                    template: "<div class=\"wb-map-background-form-left\">\n    <div class=\"wb-map-background-form-left__container__config\" *ngIf=\"showMap\">\n        <wb-structure-config\n            [blockUUID]=\"uuid\"\n            [position]=\"TYPE_CONFIG_POSITION_RIGHT_TOP\"\n            (click)=\"createEditAlgoliaInput()\"\n            [isFullwidth]=\"true\"\n        >\n            <p>{{ 'wb.structures.template.19' | translate }}</p>\n            <input id=\"address-input-edit{{ uuid }}\" type=\"text\" [(ngModel)]=\"address\" #myInputEdit (click)=\"myInputEdit.select()\" />\n        </wb-structure-config>\n    </div>\n    <div class=\"wb-map-background-form-left__selector\" *ngIf=\"!showMap\">\n        <p>{{ 'wb.structures.template.19' | translate }}</p>\n        <input id=\"address-input{{ uuid }}\" type=\"text\" [(ngModel)]=\"address\" #myInput (click)=\"myInput.select()\" />\n    </div>\n    <div class=\"columns is-gapless\" *ngIf=\"showMap\">\n        <div class=\"column\">\n            <div *ngIf=\"selectedDetailForm.length === 0\">\n                <div *ngIf=\"forms.length === 0\" class=\"wb-map-background-form-left__loader\">\n                    <wb-loader></wb-loader>\n                </div>\n                <div class=\"wb-map-background-form-left__selector-form\" *ngIf=\"forms.length > 0\">\n                    <wb-structure-select\n                        [selectedValue]=\"selectedValue\"\n                        [forms]=\"forms\"\n                        (changed)=\"selectedValue = $event; selectThisForm()\"\n                    ></wb-structure-select>\n                </div>\n            </div>\n            <div *ngIf=\"selectedDetailForm.length > 0\" class=\"wb-map-background-form-left__container-form\">\n                <div class=\"wb-map-background-form-left__container-form__editor\">\n                    <div>\n                        <wb-editorjs\n                            [(content)]=\"contents[BASE_BLOCK_CONTENT][FORM_NAME_TITLE]\"\n                            (contentChange)=\"persist()\"\n                            [placeholder]=\"'wb.shared.components.quill.1' | translate\"\n                        >\n                        </wb-editorjs>\n                    </div>\n                    <div>\n                        <wb-editorjs\n                            [(content)]=\"contents[BASE_BLOCK_CONTENT][FORM_NAME_CONTENT]\"\n                            (contentChange)=\"persist()\"\n                            [placeholder]=\"'wb.shared.components.quill.1' | translate\"\n                        >\n                        </wb-editorjs>\n                    </div>\n                </div>\n                <div class=\"wb-map-background-form-left__container-form__content\">\n                    <div *ngFor=\"let select of selectedDetailForm\">\n                        <p [innerHTML]=\"select.title\"></p>\n                        <p>{{ select.type | answerPipe | translate }}</p>\n                    </div>\n                    <div>\n                        <wb-structure-select\n                            [selectedValue]=\"selectedValue\"\n                            [forms]=\"forms\"\n                            (changed)=\"selectedValue = $event; selectThisForm()\"\n                        ></wb-structure-select>\n                        &nbsp;&nbsp;&nbsp;\n                        <button>{{ selectedValue.submit_label }}</button>\n                    </div>\n                </div>\n            </div>\n            <div class=\"wb-map-background-form-left__container\">\n                <div>\n                    <div class=\"wb-map-background-form-left__cover\"></div>\n                    <div\n                        class=\"wb-map-background-form-left__container__map\"\n                        leaflet\n                        [leafletOptions]=\"options\"\n                        [leafletLayers]=\"layers\"\n                        [(leafletCenter)]=\"center\"\n                        (leafletMapReady)=\"onMapReady($event)\"\n                    ></div>\n                </div>\n            </div>\n        </div>\n    </div>\n</div>\n"
+                    template: "<div class=\"wb-map-background-form-left\">\n    <div class=\"wb-map-background-form-left__container__config\" *ngIf=\"showMap\">\n        <wb-structure-config [blockUUID]=\"uuid\" [position]=\"TYPE_CONFIG_POSITION_RIGHT_TOP\" [isFullwidth]=\"true\">\n            <p>{{ 'wb.structures.template.19' | translate }}</p>\n            <input\n                id=\"address-input-edit{{ uuid }}\"\n                type=\"text\"\n                [(ngModel)]=\"address\"\n                #myInputEdit\n                (click)=\"myInputEdit.select()\"\n                ngx-google-places-autocomplete\n                (onAddressChange)=\"handleAddressChange($event)\"\n            />\n        </wb-structure-config>\n    </div>\n    <div class=\"wb-map-background-form-left__selector\" *ngIf=\"!showMap\">\n        <p>{{ 'wb.structures.template.19' | translate }}</p>\n        <input\n            id=\"address-input{{ uuid }}\"\n            type=\"text\"\n            [(ngModel)]=\"address\"\n            #myInput\n            (click)=\"myInput.select()\"\n            ngx-google-places-autocomplete\n            (onAddressChange)=\"handleAddressChange($event)\"\n        />\n    </div>\n    <div class=\"columns is-gapless\" *ngIf=\"showMap\">\n        <div class=\"column\">\n            <div *ngIf=\"selectedDetailForm.length === 0\">\n                <div *ngIf=\"forms.length === 0\" class=\"wb-map-background-form-left__loader\">\n                    <wb-loader></wb-loader>\n                </div>\n                <div class=\"wb-map-background-form-left__selector-form\" *ngIf=\"forms.length > 0\">\n                    <wb-structure-select\n                        [selectedValue]=\"selectedValue\"\n                        [forms]=\"forms\"\n                        (changed)=\"selectedValue = $event; selectThisForm()\"\n                    ></wb-structure-select>\n                </div>\n            </div>\n            <div *ngIf=\"selectedDetailForm.length > 0\" class=\"wb-map-background-form-left__container-form\">\n                <div class=\"wb-map-background-form-left__container-form__editor\">\n                    <div>\n                        <wb-editorjs\n                            [(content)]=\"contents[BASE_BLOCK_CONTENT][FORM_NAME_TITLE]\"\n                            (contentChange)=\"persist()\"\n                            [placeholder]=\"'wb.shared.components.quill.1' | translate\"\n                        >\n                        </wb-editorjs>\n                    </div>\n                    <div>\n                        <wb-editorjs\n                            [(content)]=\"contents[BASE_BLOCK_CONTENT][FORM_NAME_CONTENT]\"\n                            (contentChange)=\"persist()\"\n                            [placeholder]=\"'wb.shared.components.quill.1' | translate\"\n                        >\n                        </wb-editorjs>\n                    </div>\n                </div>\n                <div class=\"wb-map-background-form-left__container-form__content\">\n                    <div *ngFor=\"let select of selectedDetailForm\">\n                        <p [innerHTML]=\"select.title\"></p>\n                        <p>{{ select.type | answerPipe | translate }}</p>\n                    </div>\n                    <div>\n                        <wb-structure-select\n                            [selectedValue]=\"selectedValue\"\n                            [forms]=\"forms\"\n                            (changed)=\"selectedValue = $event; selectThisForm()\"\n                        ></wb-structure-select>\n                        &nbsp;&nbsp;&nbsp;\n                        <button>{{ selectedValue.submit_label }}</button>\n                    </div>\n                </div>\n            </div>\n            <div class=\"wb-map-background-form-left__container\">\n                <div>\n                    <div class=\"wb-map-background-form-left__cover\"></div>\n                    <div\n                        class=\"wb-map-background-form-left__container__map\"\n                        leaflet\n                        [leafletOptions]=\"options\"\n                        [leafletLayers]=\"layers\"\n                        [(leafletCenter)]=\"center\"\n                        (leafletMapReady)=\"onMapReady($event)\"\n                    ></div>\n                </div>\n            </div>\n        </div>\n    </div>\n</div>\n"
                 },] }
     ];
     MapBackgroundFormLeftComponent.ctorParameters = function () { return [
@@ -29918,7 +29885,9 @@
             var _this = _super.call(this) || this;
             _this.apiService = apiService;
             _this.address = '';
+            _this.triggerAddress = '';
             _this.editPlaceMap = null;
+            _this.firstTimeTrigger = false;
             _this.options = {};
             _this.layers = [];
             _this.showMap = false;
@@ -29943,28 +29912,17 @@
                 }
             });
         };
-        MapBackgroundFormRightComponent.prototype.ngAfterViewInit = function () {
-            var _this = this;
-            var placesAutocomplete = places__default['default']({
-                appId: 'pl9OI1NPY62Y',
-                apiKey: '290e5a0e33e751c85c36690d502991fc',
-                container: this.input.nativeElement,
-            });
-            placesAutocomplete.on('change', function (algoliaReturnElement) {
-                _this.setCoordinateOnPlaces(algoliaReturnElement);
-            });
-        };
-        MapBackgroundFormRightComponent.prototype.setCoordinateOnPlaces = function (algoliaReturnElement) {
+        MapBackgroundFormRightComponent.prototype.setCoordinateOnPlaces = function (googleResults) {
             this.showMap = false;
             this.options = {
-                layers: [leaflet.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 16, attribution: 'WiziShop' })],
+                layers: [leaflet.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 18, attribution: 'WiziShop' })],
                 zoom: 18,
                 zoomControl: false,
-                center: leaflet.latLng(algoliaReturnElement.suggestion.latlng.lat, algoliaReturnElement.suggestion.latlng.lng),
+                center: leaflet.latLng(googleResults.suggestion.latlng.lat, googleResults.suggestion.latlng.lng),
             };
-            this.center = leaflet.latLng(algoliaReturnElement.suggestion.latlng.lat, algoliaReturnElement.suggestion.latlng.lng);
+            this.center = leaflet.latLng(googleResults.suggestion.latlng.lat, googleResults.suggestion.latlng.lng);
             this.layers = [
-                leaflet.marker([algoliaReturnElement.suggestion.latlng.lat, algoliaReturnElement.suggestion.latlng.lng], {
+                leaflet.marker([googleResults.suggestion.latlng.lat, googleResults.suggestion.latlng.lng], {
                     icon: leaflet.icon({
                         iconSize: [25, 41],
                         iconAnchor: [13, 41],
@@ -29973,24 +29931,32 @@
                     }),
                 }),
             ];
-            this.contentBlock[this.FORM_NAME_COORDINATE_Y] = algoliaReturnElement.suggestion.latlng.lat;
-            this.contentBlock[this.FORM_NAME_COORDINATE_X] = algoliaReturnElement.suggestion.latlng.lng;
-            this.address = algoliaReturnElement.suggestion.value;
+            this.contentBlock[this.FORM_NAME_COORDINATE_Y] = googleResults.suggestion.latlng.lat;
+            this.contentBlock[this.FORM_NAME_COORDINATE_X] = googleResults.suggestion.latlng.lng;
+            this.address = googleResults.suggestion.value;
             this.showMap = true;
             this.persist();
         };
-        MapBackgroundFormRightComponent.prototype.createEditAlgoliaInput = function () {
-            var _this = this;
-            if (this.editPlaceMap === null) {
-                this.editPlaceMap = places__default['default']({
-                    appId: 'pl9OI1NPY62Y',
-                    apiKey: '290e5a0e33e751c85c36690d502991fc',
-                    container: document.querySelector('#address-input-edit' + this.uuid),
-                });
-                this.editPlaceMap.on('change', function (algoliaReturnElement) {
-                    _this.setCoordinateOnPlaces(algoliaReturnElement);
-                });
-            }
+        MapBackgroundFormRightComponent.prototype.handleAddressChange = function (event) {
+            this.googleMapReturnElement = {
+                suggestion: {
+                    latlng: {
+                        lat: event.geometry.location.lat(),
+                        lng: event.geometry.location.lng(),
+                    },
+                    value: event.name,
+                },
+            };
+            this.setCoordinateOnPlaces(this.googleMapReturnElement);
+        };
+        /**
+         * Avoid partial map loaded at the initialization
+         * @param map
+         */
+        MapBackgroundFormRightComponent.prototype.onMapReady = function (map) {
+            setTimeout(function () {
+                map.invalidateSize();
+            }, 0);
         };
         MapBackgroundFormRightComponent.prototype.selectThisForm = function () {
             var _this = this;
@@ -30003,21 +29969,12 @@
             this.contentBlock[FORM_NAME_ID_FORM] = this.selectedValue.id;
             this.persist();
         };
-        /**
-         * Avoid partial map loaded at the initialization
-         * @param map
-         */
-        MapBackgroundFormRightComponent.prototype.onMapReady = function (map) {
-            setTimeout(function () {
-                map.invalidateSize();
-            }, 0);
-        };
         return MapBackgroundFormRightComponent;
     }(StructuresComponent));
     MapBackgroundFormRightComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: MapBackgroundFormRightService.selector(),
-                    template: "<div class=\"wb-map-background-form-right\">\n    <div class=\"wb-map-background-form-right__container__config\" *ngIf=\"showMap\">\n        <wb-structure-config\n            [blockUUID]=\"uuid\"\n            [position]=\"TYPE_CONFIG_POSITION_LEFT_TOP\"\n            (click)=\"createEditAlgoliaInput()\"\n            [isFullwidth]=\"true\"\n        >\n            <p>{{ 'wb.structures.template.19' | translate }}</p>\n            <input id=\"address-input-edit{{ uuid }}\" type=\"text\" [(ngModel)]=\"address\" #myInputEdit (click)=\"myInputEdit.select()\" />\n        </wb-structure-config>\n    </div>\n    <div class=\"wb-map-background-form-right__selector\" *ngIf=\"!showMap\">\n        <p>{{ 'wb.structures.template.19' | translate }}</p>\n        <input id=\"address-input{{ uuid }}\" type=\"text\" [(ngModel)]=\"address\" #myInput (click)=\"myInput.select()\" />\n    </div>\n    <div class=\"columns is-gapless\" *ngIf=\"showMap\">\n        <div class=\"column\">\n            <div class=\"wb-map-background-form-right__container\">\n                <div *ngIf=\"showMap\">\n                    <div class=\"wb-map-background-form-right__cover\"></div>\n                    <div\n                        class=\"wb-map-background-form-right__container__map\"\n                        leaflet\n                        [leafletOptions]=\"options\"\n                        [leafletLayers]=\"layers\"\n                        [(leafletCenter)]=\"center\"\n                        (leafletMapReady)=\"onMapReady($event)\"\n                    ></div>\n                </div>\n            </div>\n        </div>\n        <div class=\"column\">\n            <div *ngIf=\"selectedDetailForm.length === 0\">\n                <div *ngIf=\"forms.length === 0\" class=\"wb-map-background-form-right__loader\">\n                    <wb-loader></wb-loader>\n                </div>\n                <div class=\"wb-map-background-form-right__selector\" *ngIf=\"forms.length > 0\">\n                    <wb-structure-select\n                        [selectedValue]=\"selectedValue\"\n                        [forms]=\"forms\"\n                        (changed)=\"selectedValue = $event; selectThisForm()\"\n                    ></wb-structure-select>\n                </div>\n            </div>\n            <div *ngIf=\"selectedDetailForm.length > 0\" class=\"wb-map-background-form-right__container-form\">\n                <div class=\"wb-map-background-form-right__container-form__editor\">\n                    <div>\n                        <wb-editorjs\n                            [(content)]=\"contents[BASE_BLOCK_CONTENT][FORM_NAME_TITLE]\"\n                            (contentChange)=\"persist()\"\n                            [placeholder]=\"'wb.shared.components.quill.1' | translate\"\n                        >\n                        </wb-editorjs>\n                    </div>\n                    <div>\n                        <wb-editorjs\n                            [(content)]=\"contents[BASE_BLOCK_CONTENT][FORM_NAME_CONTENT]\"\n                            (contentChange)=\"persist()\"\n                            [placeholder]=\"'wb.shared.components.quill.1' | translate\"\n                        >\n                        </wb-editorjs>\n                    </div>\n                </div>\n                <div class=\"wb-map-background-form-right__container-form__content\">\n                    <div *ngFor=\"let select of selectedDetailForm\">\n                        <p [innerHTML]=\"select.title\"></p>\n                        <p>{{ select.type | answerPipe | translate }}</p>\n                    </div>\n                    <div>\n                        <wb-structure-select\n                            [selectedValue]=\"selectedValue\"\n                            [forms]=\"forms\"\n                            (changed)=\"selectedValue = $event; selectThisForm()\"\n                        ></wb-structure-select>\n                        &nbsp;&nbsp;&nbsp;\n                        <button>{{ selectedValue.submit_label }}</button>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n</div>\n"
+                    template: "<div class=\"wb-map-background-form-right\">\n    <div class=\"wb-map-background-form-right__container__config\" *ngIf=\"showMap\">\n        <wb-structure-config [blockUUID]=\"uuid\" [position]=\"TYPE_CONFIG_POSITION_LEFT_TOP\" [isFullwidth]=\"true\">\n            <p>{{ 'wb.structures.template.19' | translate }}</p>\n            <input\n                id=\"address-input-edit{{ uuid }}\"\n                type=\"text\"\n                [(ngModel)]=\"address\"\n                #myInputEdit\n                (click)=\"myInputEdit.select()\"\n                ngx-google-places-autocomplete\n                (onAddressChange)=\"handleAddressChange($event)\"\n            />\n        </wb-structure-config>\n    </div>\n    <div class=\"wb-map-background-form-right__selector\" *ngIf=\"!showMap\">\n        <p>{{ 'wb.structures.template.19' | translate }}</p>\n        <input\n            id=\"address-input{{ uuid }}\"\n            type=\"text\"\n            [(ngModel)]=\"address\"\n            #myInput\n            (click)=\"myInput.select()\"\n            ngx-google-places-autocomplete\n            (onAddressChange)=\"handleAddressChange($event)\"\n        />\n    </div>\n    <div class=\"columns is-gapless\" *ngIf=\"showMap\">\n        <div class=\"column\">\n            <div class=\"wb-map-background-form-right__container\">\n                <div *ngIf=\"showMap\">\n                    <div class=\"wb-map-background-form-right__cover\"></div>\n                    <div\n                        class=\"wb-map-background-form-right__container__map\"\n                        leaflet\n                        [leafletOptions]=\"options\"\n                        [leafletLayers]=\"layers\"\n                        [(leafletCenter)]=\"center\"\n                        (leafletMapReady)=\"onMapReady($event)\"\n                    ></div>\n                </div>\n            </div>\n        </div>\n        <div class=\"column\">\n            <div *ngIf=\"selectedDetailForm.length === 0\">\n                <div *ngIf=\"forms.length === 0\" class=\"wb-map-background-form-right__loader\">\n                    <wb-loader></wb-loader>\n                </div>\n                <div class=\"wb-map-background-form-right__selector\" *ngIf=\"forms.length > 0\">\n                    <wb-structure-select\n                        [selectedValue]=\"selectedValue\"\n                        [forms]=\"forms\"\n                        (changed)=\"selectedValue = $event; selectThisForm()\"\n                    ></wb-structure-select>\n                </div>\n            </div>\n            <div *ngIf=\"selectedDetailForm.length > 0\" class=\"wb-map-background-form-right__container-form\">\n                <div class=\"wb-map-background-form-right__container-form__editor\">\n                    <div>\n                        <wb-editorjs\n                            [(content)]=\"contents[BASE_BLOCK_CONTENT][FORM_NAME_TITLE]\"\n                            (contentChange)=\"persist()\"\n                            [placeholder]=\"'wb.shared.components.quill.1' | translate\"\n                        >\n                        </wb-editorjs>\n                    </div>\n                    <div>\n                        <wb-editorjs\n                            [(content)]=\"contents[BASE_BLOCK_CONTENT][FORM_NAME_CONTENT]\"\n                            (contentChange)=\"persist()\"\n                            [placeholder]=\"'wb.shared.components.quill.1' | translate\"\n                        >\n                        </wb-editorjs>\n                    </div>\n                </div>\n                <div class=\"wb-map-background-form-right__container-form__content\">\n                    <div *ngFor=\"let select of selectedDetailForm\">\n                        <p [innerHTML]=\"select.title\"></p>\n                        <p>{{ select.type | answerPipe | translate }}</p>\n                    </div>\n                    <div>\n                        <wb-structure-select\n                            [selectedValue]=\"selectedValue\"\n                            [forms]=\"forms\"\n                            (changed)=\"selectedValue = $event; selectThisForm()\"\n                        ></wb-structure-select>\n                        &nbsp;&nbsp;&nbsp;\n                        <button>{{ selectedValue.submit_label }}</button>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n</div>\n"
                 },] }
     ];
     MapBackgroundFormRightComponent.ctorParameters = function () { return [
@@ -33183,6 +33140,7 @@
                     imports: [
                         SharedModule,
                         ngxMonacoEditor.MonacoEditorModule,
+                        ngxGooglePlacesAutocomplete.GooglePlaceModule,
                         ngxQuill.QuillModule,
                         ngxLeaflet.LeafletModule,
                         ngWiziBulma.NwbCommonModule,