@theseam/ui-common 0.4.14 → 0.4.17

package/fesm2020/theseam-ui-common-google-maps.mjs

@@ -486,6 +486,9 @@ class GoogleMapsService {
     setBaseLatLng(lat, lng) {
         this._baseLatLng = { lat, lng };
     }
+    setPadding(padding) {
+        this._padding = padding;
+    }
     // TODO: Refactor out of the service meant to just wrap the google maps api.
     setFeatureContextMenu(menu) {
         this.closeContextMenu();
@@ -597,7 +600,7 @@ class GoogleMapsService {
         this._assertInitialized();
         removeAllFeatures(this.googleMap.data);
         this.googleMap.data.addGeoJson(data);
-        this.googleMap.fitBounds(getBoundsWithAllFeatures(this.googleMap.data));
+        this.googleMap.fitBounds(getBoundsWithAllFeatures(this.googleMap.data), this._padding);
     }
     // TODO: Refactor out of the service meant to just wrap the google maps api.
     reCenterOnFeatures() {
@@ -609,7 +612,7 @@ class GoogleMapsService {
             this.googleMap.panTo(this._baseLatLng);
             return;
         }
-        this.googleMap.fitBounds(getBoundsWithAllFeatures(this.googleMap.data));
+        this.googleMap.fitBounds(getBoundsWithAllFeatures(this.googleMap.data), this._padding);
         // TODO: Fix to pan to center. Currently fitBounds results in the expected
         // result, but pantToBounds animates.
         // this.googleMap.panToBounds(getBoundsWithAllFeatures(this.googleMap.data))
@@ -1279,6 +1282,7 @@ class TheSeamGoogleMapsComponent extends _TheSeamGoogleMapsMixinBase {
         this.zoom = 14;
         this.longitude = -98.570209;
         this.latitude = 37.633814;
+        this.padding = 0;
         this.mapReady = new EventEmitter();
         this._options = {
             mapTypeControl: true,
@@ -1314,6 +1318,7 @@ class TheSeamGoogleMapsComponent extends _TheSeamGoogleMapsMixinBase {
             }
         }));
         this._googleMaps.setBaseLatLng(this.latitude, this.longitude);
+        this._googleMaps.setPadding(this.padding);
         this._gmApiLoaded = this._googleMapsApiLoader.load().pipe(map(() => true), catchError(() => of(false)));
     }
     ngOnInit() {
@@ -1372,6 +1377,9 @@ class TheSeamGoogleMapsComponent extends _TheSeamGoogleMapsMixinBase {
         if (Object.prototype.hasOwnProperty.call(changes, 'editingEnabled')) {
             this._googleMaps.setEditingEnabled(this.editingEnabled);
         }
+        if (Object.prototype.hasOwnProperty.call(changes, 'padding')) {
+            this._googleMaps.setPadding(this.padding);
+        }
     }
     writeValue(value) {
         this.value = value;
@@ -1404,20 +1412,24 @@ class TheSeamGoogleMapsComponent extends _TheSeamGoogleMapsMixinBase {
     _onMapReady(theMap) {
         this._googleMaps.setMap(theMap);
         this._googleMaps.setData(this._mapValueManager.value);
-        // NOTE: AgmMap has a race condition problem that causes the input latitude,
-        // longitude, and zoom to get ignored, before googlemaps emits
-        // 'center_changed'. This should avoid the issue, until we stop using AgmMap
-        // or upgrade to a more recent version that may not have the issue anymore.
-        // TODO: Check if the switch to '@angular/google-maps' fixed this problem.
-        this._googleMaps.reCenterOnFeatures();
-        this._googleMaps.googleMap?.setZoom(this.zoom);
+        // NOTE: The input zoom level was getting reset after this function ran,
+        // so putting in this idle listener to wait until the map is fully rendered
+        // to set the zoom.
+        // Calling reCenterOnFeatures() after setZoom() ensures that maps with pre-drawn shapes
+        // will display correctly
+        this.idleListener = this._googleMaps.googleMap?.addListener('idle', () => {
+            this._googleMaps.googleMap?.setZoom(this.zoom);
+            this._googleMaps.reCenterOnFeatures();
+            this.mapReady.emit(this._googleMaps.googleMap);
+            this.idleListener?.remove();
+        });
     }
     _onClickDeleteFeature() {
         this._googleMaps.deleteSelection();
     }
 }
 TheSeamGoogleMapsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: TheSeamGoogleMapsComponent, deps: [{ token: i0.ElementRef }, { token: i1.FocusMonitor }, { token: GoogleMapsService }, { token: MapValueManagerService }, { token: TheSeamGoogleMapsApiLoader }], target: i0.ɵɵFactoryTarget.Component });
-TheSeamGoogleMapsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: TheSeamGoogleMapsComponent, selector: "seam-google-maps", inputs: { disabled: "disabled", value: "value", tabIndex: "tabIndex", fileDropEnabled: "fileDropEnabled", fileUploadControlEnabled: "fileUploadControlEnabled", fullscreenControlEnabled: "fullscreenControlEnabled", reCenterControlEnabled: "reCenterControlEnabled", mapTypeControlEnabled: "mapTypeControlEnabled", streetViewControlEnabled: "streetViewControlEnabled", allowDrawingHoleInPolygon: "allowDrawingHoleInPolygon", editingEnabled: "editingEnabled", fileImportHandler: "fileImportHandler", zoom: "zoom", longitude: "longitude", latitude: "latitude" }, outputs: { mapReady: "mapReady" }, host: { properties: { "attr.disabled": "this._attrDisabled", "attr.tabindex": "this._attrTabIndex" } }, providers: [
+TheSeamGoogleMapsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: TheSeamGoogleMapsComponent, selector: "seam-google-maps", inputs: { disabled: "disabled", value: "value", tabIndex: "tabIndex", fileDropEnabled: "fileDropEnabled", fileUploadControlEnabled: "fileUploadControlEnabled", fullscreenControlEnabled: "fullscreenControlEnabled", reCenterControlEnabled: "reCenterControlEnabled", mapTypeControlEnabled: "mapTypeControlEnabled", streetViewControlEnabled: "streetViewControlEnabled", allowDrawingHoleInPolygon: "allowDrawingHoleInPolygon", editingEnabled: "editingEnabled", fileImportHandler: "fileImportHandler", zoom: "zoom", longitude: "longitude", latitude: "latitude", padding: "padding" }, outputs: { mapReady: "mapReady" }, host: { properties: { "attr.disabled": "this._attrDisabled", "attr.tabindex": "this._attrTabIndex" } }, providers: [
         MapValueManagerService,
         GoogleMapsService,
         { provide: MAP_CONTROLS_SERVICE, useClass: GoogleMapsControlsService },
@@ -1510,6 +1522,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImpor
                 type: Input
             }], latitude: [{
                 type: Input
+            }], padding: [{
+                type: Input
             }], mapReady: [{
                 type: Output
             }], featureContextMenu: [{
@@ -1831,13 +1845,13 @@ class TheSeamGoogleMapsPlacesAutoCompleteComponent {
     }
 }
 TheSeamGoogleMapsPlacesAutoCompleteComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: TheSeamGoogleMapsPlacesAutoCompleteComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-TheSeamGoogleMapsPlacesAutoCompleteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: TheSeamGoogleMapsPlacesAutoCompleteComponent, selector: "seam-google-maps-places-autocomplete", inputs: { label: "label", icon: "icon", disabled: "disabled", placeholder: "placeholder", autocorrect: "autocorrect", autocapitalize: "autocapitalize", tabIndex: "tabIndex", options: "options" }, outputs: { placeChanged: "placeChanged" }, host: { listeners: { "click": "_onClick(event)", "focus": "_onFocus($event)" }, properties: { "attr.tabindex": "this._attrTabIndex" } }, viewQueries: [{ propertyName: "_inputDirective", first: true, predicate: ["inp"], descendants: true, read: InputDirective, static: true }, { propertyName: "__autocompleteDirective", first: true, predicate: TheSeamGoogleMapsPlacesAutocompleteDirective, descendants: true, static: true }], exportAs: ["seamGoogleMapsPlacesAutoComplete"], ngImport: i0, template: "<div *ngIf=\"icon\" class=\"search-container--icon-wrapper\">\r\n  <seam-icon [icon]=\"icon\" class=\"text-muted\" size=\"lg\"></seam-icon>\r\n</div>\r\n<label *ngIf=\"label || placeholder\" [attr.for]=\"inp.id\" class=\"sr-only\">{{ label || placeholder }}</label>\r\n<input #inp=\"seamInput\"\r\n  seamInput\r\n  seamGoogleMapsPlacesAutocomplete\r\n  [disabled]=\"disabled\"\r\n  [attr.placeholder]=\"placeholder\"\r\n  [attr.autocorrect]=\"autocorrect\"\r\n  [attr.autocapitalize]=\"autocapitalize\"\r\n  [options]=\"_options\"\r\n/>\r\n", styles: [":host{position:relative;width:100%}:host>input{padding-left:40px}:host .search-container--icon-wrapper{position:absolute;top:6px;left:10px;bottom:0}:host .search-container--icon-wrapper ::ng-deep .svg-inline--fa{vertical-align:middle}\n"], dependencies: [{ kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.IconComponent, selector: "seam-icon", inputs: ["grayscaleOnDisable", "disabled", "iconClass", "icon", "size", "showDefaultOnError", "defaultIcon", "iconType"] }, { kind: "directive", type: i3.InputDirective, selector: "input[seamInput], textarea[seamInput], ng-select[seamInput], seam-checkbox[seamInput] [ngbRadioGroup], seam-tel-input[seamInput], quill-editor[seamInput], seam-google-maps[seamInput]", inputs: ["seamInputSize", "id", "type", "placeholder", "required", "disabled", "readonly"], exportAs: ["seamInput"] }, { kind: "directive", type: TheSeamGoogleMapsPlacesAutocompleteDirective, selector: "input[seamGoogleMapsPlacesAutocomplete]", inputs: ["options"], outputs: ["placeChanged"], exportAs: ["seamGoogleMapsPlacesAutocomplete"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+TheSeamGoogleMapsPlacesAutoCompleteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: TheSeamGoogleMapsPlacesAutoCompleteComponent, selector: "seam-google-maps-places-autocomplete", inputs: { label: "label", icon: "icon", disabled: "disabled", placeholder: "placeholder", autocorrect: "autocorrect", autocapitalize: "autocapitalize", tabIndex: "tabIndex", options: "options" }, outputs: { placeChanged: "placeChanged" }, host: { listeners: { "click": "_onClick(event)", "focus": "_onFocus($event)" }, properties: { "attr.tabindex": "this._attrTabIndex" } }, viewQueries: [{ propertyName: "_inputDirective", first: true, predicate: ["inp"], descendants: true, read: InputDirective, static: true }, { propertyName: "__autocompleteDirective", first: true, predicate: TheSeamGoogleMapsPlacesAutocompleteDirective, descendants: true, static: true }], exportAs: ["seamGoogleMapsPlacesAutoComplete"], ngImport: i0, template: "<div *ngIf=\"icon\" class=\"search-container--icon-wrapper\">\n  <seam-icon [icon]=\"icon\" class=\"text-muted\" size=\"lg\"></seam-icon>\n</div>\n<label *ngIf=\"label || placeholder\" [attr.for]=\"inp.id\" class=\"sr-only\">{{ label || placeholder }}</label>\n<input #inp=\"seamInput\"\n  seamInput\n  seamGoogleMapsPlacesAutocomplete\n  [disabled]=\"disabled\"\n  [attr.placeholder]=\"placeholder\"\n  [attr.autocorrect]=\"autocorrect\"\n  [attr.autocapitalize]=\"autocapitalize\"\n  [options]=\"_options\"\n/>\n", styles: [":host{position:relative;width:100%}:host>input{padding-left:40px}:host .search-container--icon-wrapper{position:absolute;top:6px;left:10px;bottom:0}:host .search-container--icon-wrapper ::ng-deep .svg-inline--fa{vertical-align:middle}\n"], dependencies: [{ kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.IconComponent, selector: "seam-icon", inputs: ["grayscaleOnDisable", "disabled", "iconClass", "icon", "size", "showDefaultOnError", "defaultIcon", "iconType"] }, { kind: "directive", type: i3.InputDirective, selector: "input[seamInput], textarea[seamInput], ng-select[seamInput], seam-checkbox[seamInput] [ngbRadioGroup], seam-tel-input[seamInput], quill-editor[seamInput], seam-google-maps[seamInput]", inputs: ["seamInputSize", "id", "type", "placeholder", "required", "disabled", "readonly"], exportAs: ["seamInput"] }, { kind: "directive", type: TheSeamGoogleMapsPlacesAutocompleteDirective, selector: "input[seamGoogleMapsPlacesAutocomplete]", inputs: ["options"], outputs: ["placeChanged"], exportAs: ["seamGoogleMapsPlacesAutocomplete"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 __decorate([
     InputBoolean()
 ], TheSeamGoogleMapsPlacesAutoCompleteComponent.prototype, "disabled", void 0);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: TheSeamGoogleMapsPlacesAutoCompleteComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'seam-google-maps-places-autocomplete', changeDetection: ChangeDetectionStrategy.OnPush, exportAs: 'seamGoogleMapsPlacesAutoComplete', template: "<div *ngIf=\"icon\" class=\"search-container--icon-wrapper\">\r\n  <seam-icon [icon]=\"icon\" class=\"text-muted\" size=\"lg\"></seam-icon>\r\n</div>\r\n<label *ngIf=\"label || placeholder\" [attr.for]=\"inp.id\" class=\"sr-only\">{{ label || placeholder }}</label>\r\n<input #inp=\"seamInput\"\r\n  seamInput\r\n  seamGoogleMapsPlacesAutocomplete\r\n  [disabled]=\"disabled\"\r\n  [attr.placeholder]=\"placeholder\"\r\n  [attr.autocorrect]=\"autocorrect\"\r\n  [attr.autocapitalize]=\"autocapitalize\"\r\n  [options]=\"_options\"\r\n/>\r\n", styles: [":host{position:relative;width:100%}:host>input{padding-left:40px}:host .search-container--icon-wrapper{position:absolute;top:6px;left:10px;bottom:0}:host .search-container--icon-wrapper ::ng-deep .svg-inline--fa{vertical-align:middle}\n"] }]
+            args: [{ selector: 'seam-google-maps-places-autocomplete', changeDetection: ChangeDetectionStrategy.OnPush, exportAs: 'seamGoogleMapsPlacesAutoComplete', template: "<div *ngIf=\"icon\" class=\"search-container--icon-wrapper\">\n  <seam-icon [icon]=\"icon\" class=\"text-muted\" size=\"lg\"></seam-icon>\n</div>\n<label *ngIf=\"label || placeholder\" [attr.for]=\"inp.id\" class=\"sr-only\">{{ label || placeholder }}</label>\n<input #inp=\"seamInput\"\n  seamInput\n  seamGoogleMapsPlacesAutocomplete\n  [disabled]=\"disabled\"\n  [attr.placeholder]=\"placeholder\"\n  [attr.autocorrect]=\"autocorrect\"\n  [attr.autocapitalize]=\"autocapitalize\"\n  [options]=\"_options\"\n/>\n", styles: [":host{position:relative;width:100%}:host>input{padding-left:40px}:host .search-container--icon-wrapper{position:absolute;top:6px;left:10px;bottom:0}:host .search-container--icon-wrapper ::ng-deep .svg-inline--fa{vertical-align:middle}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { label: [{
                 type: Input
             }], icon: [{
@@ -1993,6 +2007,7 @@ class TheSeamLazyMapsApiLoader extends TheSeamGoogleMapsApiLoader {
             libraries: this._config.libraries,
             region: this._config.region,
             language: this._config.language || (this._localeId !== 'en-US' ? this._localeId : null),
+            loading: this._config.loading || 'async'
         };
         const params = Object.keys(queryParams)
             // Remove undefined or null params.