@dereekb/dbx-form 9.23.18 → 9.23.20

package/fesm2020/dereekb-dbx-form-mapbox.mjs

@@ -1,22 +1,22 @@
 import { formlyField, propsAndConfigForFieldConfig, DEFAULT_LAT_LNG_TEXT_FIELD_PLACEHOLDER, validatorsForFieldConfig, DEFAULT_LAT_LNG_TEXT_FIELD_PATTERN_MESSAGE, styleWrapper } from '@dereekb/dbx-form';
-import { LAT_LNG_PATTERN, isDefaultLatLngPoint, isValidLatLngPoint, latLngStringFunction, latLngPointFunction, latLngPoint } from '@dereekb/util';
+import { LAT_LNG_PATTERN, isSameLatLngPoint, isDefaultLatLngPoint, isValidLatLngPoint, latLngStringFunction, latLngPointFunction, latLngPoint } from '@dereekb/util';
 import * as i1 from '@dereekb/dbx-web';
 import { mapCompactModeObs, DbxTextModule } from '@dereekb/dbx-web';
 import * as i0 from '@angular/core';
-import { Component, Optional, NgModule } from '@angular/core';
+import { Component, ChangeDetectionStrategy, Optional, NgModule } from '@angular/core';
 import { FieldType } from '@ngx-formly/material';
-import { BehaviorSubject, switchMap, startWith, shareReplay, map, skipWhile, filter, skip, throttleTime, first } from 'rxjs';
-import { SubscriptionObject, filterMaybe } from '@dereekb/rxjs';
-import * as i2 from '@ng-web-apis/geolocation';
-import * as i2$1 from '@dereekb/dbx-web/mapbox';
+import { combineLatest, map, shareReplay, BehaviorSubject, of, switchMap, startWith, distinctUntilChanged, skipWhile, filter, skip, throttleTime, first } from 'rxjs';
+import { SubscriptionObject, filterMaybe, asObservableFromGetter } from '@dereekb/rxjs';
+import * as i3$1 from '@ng-web-apis/geolocation';
+import * as i2 from '@dereekb/dbx-web/mapbox';
 import { provideMapboxStoreIfParentIsUnavailable, DbxMapboxModule, mapboxZoomLevel, MAPBOX_MIN_ZOOM_LEVEL, MAPBOX_MAX_ZOOM_LEVEL } from '@dereekb/dbx-web/mapbox';
-import * as i4 from '@angular/common';
+import * as i3 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i5 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
 import * as i6 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
-import * as i4$1 from '@angular/forms';
+import * as i4 from '@angular/forms';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import * as i8 from '@angular/material/form-field';
 import * as i9 from '@angular/material/input';
@@ -27,7 +27,7 @@ import * as i1$1 from '@ngx-formly/core';
 import { FormlyModule } from '@ngx-formly/core';
 
 function mapboxLatLngField(config = {}) {
-    const { key = 'latLng', latLngConfig, showMap, zoom, recenterTime, selectLocationOnMapClick } = config;
+    const { key = 'latLng', latLngConfig, showMap, zoom, recenterTime, showCenterButton, setCenterOnLocationSet, selectLocationOnMapDrag, selectLocationOnMapClick } = config;
     const fieldConfig = {
         ...formlyField({
             key,
@@ -41,7 +41,10 @@ function mapboxLatLngField(config = {}) {
                 zoom,
                 latLngConfig,
                 recenterTime,
-                selectLocationOnMapClick
+                selectLocationOnMapDrag,
+                selectLocationOnMapClick,
+                showCenterButton,
+                setCenterOnLocationSet
             })
         }),
         ...validatorsForFieldConfig({
@@ -55,13 +58,54 @@ function mapboxLatLngField(config = {}) {
     });
 }
 
+class DbxFormMapboxLatLngFieldMarkerComponent {
+    constructor(fieldComponent) {
+        this.fieldComponent = fieldComponent;
+        this.marker$ = combineLatest([this.fieldComponent.latLng$, this.fieldComponent.markerConfig$]).pipe(map(([latLng, markerConfig]) => {
+            if (markerConfig !== false) {
+                return { latLng, ...markerConfig };
+            }
+            else {
+                return undefined;
+            }
+        }), shareReplay(1));
+    }
+}
+DbxFormMapboxLatLngFieldMarkerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxFormMapboxLatLngFieldMarkerComponent, deps: [{ token: DbxFormMapboxLatLngFieldComponent }], target: i0.ɵɵFactoryTarget.Component });
+DbxFormMapboxLatLngFieldMarkerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: DbxFormMapboxLatLngFieldMarkerComponent, selector: "ng-component", ngImport: i0, template: `
+    <dbx-mapbox-marker [marker]="marker$ | async"></dbx-mapbox-marker>
+  `, isInline: true, dependencies: [{ kind: "component", type: i2.DbxMapboxMarkerComponent, selector: "dbx-mapbox-marker", inputs: ["marker"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxFormMapboxLatLngFieldMarkerComponent, decorators: [{
+            type: Component,
+            args: [{
+                    template: `
+    <dbx-mapbox-marker [marker]="marker$ | async"></dbx-mapbox-marker>
+  `,
+                    changeDetection: ChangeDetectionStrategy.OnPush
+                }]
+        }], ctorParameters: function () { return [{ type: DbxFormMapboxLatLngFieldComponent }]; } });
+
+const DEFAULT_DBX_FORM_MAPBOX_LAT_LNG_FIELD_INJECTION_KEY = 'DbxFormMapboxLatLngFieldComponent';
+const DEFAULT_DBX_FORM_MAPBOX_LAT_LNG_MARKER_CONFIG = {
+    icon: 'pin_drop'
+};
+/*
+  TODO: Re-add menu for picking a new location, including using the current location.
+ <button mat-icon-button (click)="useCurrentLocation()" [disabled]="isReadonlyOrDisabled || (useCurrentLocationDisabled$ | async)">
+          <mat-icon>my_location</mat-icon>
+        </button>
+ */
 class DbxFormMapboxLatLngFieldComponent extends FieldType {
-    constructor(compact, geolocation$, dbxMapboxMapStore, ngZone) {
+    constructor(
+    //
+    compact, dbxMapboxInjectionStore, geolocation$, dbxMapboxMapStore, ngZone, injector) {
         super();
         this.compact = compact;
+        this.dbxMapboxInjectionStore = dbxMapboxInjectionStore;
         this.geolocation$ = geolocation$;
         this.dbxMapboxMapStore = dbxMapboxMapStore;
         this.ngZone = ngZone;
+        this.injector = injector;
         this.compactClass$ = mapCompactModeObs(this.compact?.mode$, {
             compact: 'dbx-mapbox-input-field-compact'
         });
@@ -70,13 +114,15 @@ class DbxFormMapboxLatLngFieldComponent extends FieldType {
         this._sub = new SubscriptionObject();
         this._geoSub = new SubscriptionObject();
         this._centerSub = new SubscriptionObject();
+        this._flyToCenterSub = new SubscriptionObject();
         this._clickSub = new SubscriptionObject();
         this._zoom = new BehaviorSubject(12);
+        this._markerConfig = new BehaviorSubject(of(DEFAULT_DBX_FORM_MAPBOX_LAT_LNG_MARKER_CONFIG));
         this._formControlObs = new BehaviorSubject(undefined);
         this.formControl$ = this._formControlObs.pipe(filterMaybe());
         this.value$ = this.formControl$.pipe(switchMap((control) => control.valueChanges.pipe(startWith(control.value))), shareReplay(1));
-        this.latLng$ = this.value$.pipe(filterMaybe(), map((x) => this._latLngPointFunction(x)), shareReplay(1));
-        this.center$ = this.latLng$.pipe(
+        this.latLng$ = this.value$.pipe(filterMaybe(), map((x) => this._latLngPointFunction(x)), distinctUntilChanged(isSameLatLngPoint), shareReplay(1));
+        this.nonZeroLatLng$ = this.latLng$.pipe(
         /**
          * Center observable passed to the store. Do not pass invalid points.
          *
@@ -84,6 +130,7 @@ class DbxFormMapboxLatLngFieldComponent extends FieldType {
          */
         skipWhile(isDefaultLatLngPoint), filter(isValidLatLngPoint));
         this.zoom$ = this._zoom.asObservable();
+        this.markerConfig$ = this._markerConfig.asObservable().pipe(switchMap((x) => x), shareReplay(1));
     }
     get zoom() {
         return Math.min(this.field.props.zoom || 12, 18);
@@ -106,43 +153,63 @@ class DbxFormMapboxLatLngFieldComponent extends FieldType {
     get showMap() {
         return this.field.props.showMap ?? true;
     }
+    get selectLocationOnMapDrag() {
+        return this.field.props.selectLocationOnMapDrag ?? true;
+    }
     get selectLocationOnMapClick() {
         return this.field.props.selectLocationOnMapClick ?? false;
     }
+    get setCenterOnLocationSet() {
+        return this.field.props.setCenterOnLocationSet ?? true;
+    }
+    get showCenterButton() {
+        return !this.selectLocationOnMapDrag && this.props.showCenterButton !== false;
+    }
     get recenterTime() {
         return this.field.props.recenterTime || 10 * 1000;
     }
     get useCurrentLocationDisabled() {
         return this._useCurrentLocationDisabled;
     }
+    get mapInjectionKey() {
+        return this.field.props.mapInjectionKey;
+    }
+    get markerConfig() {
+        return this.field.props.markerConfig;
+    }
     ngOnInit() {
         const latLngPointConfig = { ...this.field.props.latLngConfig, wrap: this.field.props.latLngConfig?.wrap || false, validate: this.field.props.latLngConfig?.validate || false, precisionRounding: this.field.props.latLngConfig?.precisionRounding ?? 'round' };
         this._latLngStringFunction = latLngStringFunction(latLngPointConfig);
         this._latLngPointFunction = latLngPointFunction(latLngPointConfig);
         this._formControlObs.next(this.formControl);
         this._zoom.next(this.zoom);
-        this.dbxMapboxMapStore.setCenter(this.center$);
+        if (this.setCenterOnLocationSet) {
+            this._centerSub.subscription = this.dbxMapboxMapStore.setCenter(this.nonZeroLatLng$);
+        }
         if (this.showMap) {
             // Set zoom only if showMap is true
             this.dbxMapboxMapStore.setZoom(this.zoom$);
             // recenter periodically
             if (this.recenterTime > 0) {
-                this._centerSub.subscription = this.dbxMapboxMapStore.center$.pipe(skip(1), throttleTime(this.recenterTime, undefined, { leading: false, trailing: true })).subscribe(() => {
-                    this.dbxMapboxMapStore.easeTo(this.center$.pipe(first(), map((x) => ({ center: x }))));
+                this._flyToCenterSub.subscription = this.dbxMapboxMapStore.center$.pipe(skip(1), throttleTime(this.recenterTime, undefined, { leading: false, trailing: true })).subscribe(() => {
+                    this.flyToMarker();
                 });
             }
         }
         else {
             // use the center of the map to set locations
-            this._sub.subscription = this.dbxMapboxMapStore.center$.subscribe((center) => {
-                this.dbxMapboxMapStore.centerGivenMargin$.pipe(first()).subscribe(() => {
-                    if (!this.isReadonlyOrDisabled) {
-                        this.ngZone.run(() => {
-                            this.setValue(center);
-                        });
-                    }
+            if (this.selectLocationOnMapDrag) {
+                this._sub.subscription = this.dbxMapboxMapStore.center$.subscribe((center) => {
+                    this.dbxMapboxMapStore.centerGivenMargin$.pipe(first()).subscribe(() => {
+                        if (!this.isReadonlyOrDisabled) {
+                            this.ngZone.run(() => {
+                                this.setValue(center);
+                            });
+                        }
+                    });
                 });
-            });
+            }
+            // enable selecting the location on a map click
             if (this.selectLocationOnMapClick) {
                 this._clickSub.subscription = this.dbxMapboxMapStore.clickEvent$.subscribe((x) => {
                     if (x?.type === 'click') {
@@ -154,16 +221,34 @@ class DbxFormMapboxLatLngFieldComponent extends FieldType {
         if (this.props.readonly) {
             this.formControl.disable();
         }
+        // Add the marker to the injection store for display
+        if (this.dbxMapboxInjectionStore) {
+            if (this.markerConfig) {
+                this._markerConfig.next(asObservableFromGetter(this.markerConfig, this));
+            }
+            this.dbxMapboxInjectionStore.addInjectionConfig({
+                key: this.mapInjectionKey || DEFAULT_DBX_FORM_MAPBOX_LAT_LNG_FIELD_INJECTION_KEY,
+                injectionConfig: {
+                    componentClass: DbxFormMapboxLatLngFieldMarkerComponent,
+                    providers: [{ provide: DbxFormMapboxLatLngFieldComponent, useValue: this }]
+                }
+            });
+        }
     }
     ngOnDestroy() {
         super.ngOnDestroy();
-        this._sub.destroy();
-        this._geoSub.destroy();
         this._zoom.complete();
+        this._markerConfig.complete();
         this._formControlObs.complete();
+        this._sub.destroy();
+        this._geoSub.destroy();
         this._centerSub.destroy();
+        this._flyToCenterSub.destroy();
         this._clickSub.destroy();
     }
+    flyToMarker() {
+        this.dbxMapboxMapStore.easeTo(this.nonZeroLatLng$.pipe(first(), map((x) => ({ center: x }))));
+    }
     useCurrentLocation() {
         this._geoSub.subscription = this.geolocation$.pipe(first()).subscribe({
             next: (position) => {
@@ -186,7 +271,7 @@ class DbxFormMapboxLatLngFieldComponent extends FieldType {
         this.formControl.markAsDirty();
     }
 }
-DbxFormMapboxLatLngFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxFormMapboxLatLngFieldComponent, deps: [{ token: i1.CompactContextStore, optional: true }, { token: i2.GeolocationService }, { token: i2$1.DbxMapboxMapStore }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+DbxFormMapboxLatLngFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxFormMapboxLatLngFieldComponent, deps: [{ token: i1.CompactContextStore, optional: true }, { token: i2.DbxMapboxInjectionStore, optional: true }, { token: i3$1.GeolocationService }, { token: i2.DbxMapboxMapStore }, { token: i0.NgZone }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
 DbxFormMapboxLatLngFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: DbxFormMapboxLatLngFieldComponent, selector: "ng-component", providers: [provideMapboxStoreIfParentIsUnavailable()], usesInheritance: true, ngImport: i0, template: `
     <div class="dbx-mapbox-input-field" [ngClass]="(compactClass$ | async) ?? ''" [formGroup]="formGroup">
       <div *ngIf="showMap" class="dbx-mapbox-input-field-map">
@@ -195,7 +280,7 @@ DbxFormMapboxLatLngFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion
         </mgl-map>
       </div>
       <div class="dbx-mapbox-input-field-input">
-        <button mat-icon-button (click)="useCurrentLocation()" [disabled]="isReadonlyOrDisabled || (useCurrentLocationDisabled$ | async)">
+        <button *ngIf="showCenterButton" mat-icon-button (click)="flyToMarker()">
           <mat-icon>my_location</mat-icon>
         </button>
         <mat-form-field class="dbx-mapbox-input-field-input-field" appearance="standard">
@@ -205,7 +290,7 @@ DbxFormMapboxLatLngFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion
         </mat-form-field>
       </div>
     </div>
-  `, isInline: true, styles: [".dbx-mapbox-input-field .dbx-mapbox-input-field-map{height:220px;width:100%}.dbx-mapbox-input-field .dbx-mapbox-input-field-map mgl-map{height:100%;width:100%}.dbx-mapbox-input-field .dbx-mapbox-input-field-input{display:flex;align-items:center}.dbx-mapbox-input-field .dbx-mapbox-input-field-input .dbx-mapbox-input-field-input-field{width:calc(100% - 40px)}.dbx-mapbox-input-field-compact .dbx-latlng-field-input{min-height:120px;height:300px;max-height:calc(var(--vh100) * .5)}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i6.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i2$1.DbxMapboxMapDirective, selector: "[dbxMapboxMap]" }, { kind: "directive", type: i4$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i4$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i8.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i8.MatLabel, selector: "mat-label" }, { kind: "directive", type: i9.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i10.MapComponent, selector: "mgl-map", inputs: ["accessToken", "collectResourceTiming", "crossSourceCollisions", "customMapboxApiUrl", "fadeDuration", "hash", "refreshExpiredTiles", "failIfMajorPerformanceCaveat", "bearingSnap", "interactive", "pitchWithRotate", "clickTolerance", "attributionControl", "logoPosition", "maxTileCacheSize", "localIdeographFontFamily", "preserveDrawingBuffer", "trackResize", "transformRequest", "bounds", "antialias", "locale", "minZoom", "maxZoom", "minPitch", "maxPitch", "scrollZoom", "dragRotate", "touchPitch", "touchZoomRotate", "doubleClickZoom", "keyboard", "dragPan", "boxZoom", "style", "center", "maxBounds", "zoom", "bearing", "pitch", "fitBoundsOptions", "renderWorldCopies", "projection", "movingMethod", "movingOptions", "fitBounds", "fitScreenCoordinates", "centerWithPanTo", "panToOptions", "cursorStyle"], outputs: ["mapResize", "mapRemove", "mapMouseDown", "mapMouseUp", "mapMouseMove", "mapClick", "mapDblClick", "mapMouseOver", "mapMouseOut", "mapContextMenu", "mapTouchStart", "mapTouchEnd", "mapTouchMove", "mapTouchCancel", "mapWheel", "moveStart", "move", "moveEnd", "mapDragStart", "mapDrag", "mapDragEnd", "zoomStart", "zoomEvt", "zoomEnd", "rotateStart", "rotate", "rotateEnd", "pitchStart", "pitchEvt", "pitchEnd", "boxZoomStart", "boxZoomEnd", "boxZoomCancel", "webGlContextLost", "webGlContextRestored", "mapLoad", "idle", "render", "mapError", "data", "styleData", "sourceData", "dataLoading", "styleDataLoading", "sourceDataLoading", "styleImageMissing", "resize", "remove", "mouseDown", "mouseUp", "mouseMove", "click", "dblClick", "mouseOver", "mouseOut", "contextMenu", "touchStart", "touchEnd", "touchMove", "touchCancel", "wheel", "dragStart", "drag", "dragEnd", "load", "error"] }, { kind: "component", type: i10.MarkerComponent, selector: "mgl-marker", inputs: ["offset", "anchor", "clickTolerance", "feature", "lngLat", "draggable", "popupShown", "className", "pitchAlignment", "rotationAlignment"], outputs: ["markerDragStart", "markerDragEnd", "markerDrag", "dragStart", "dragEnd", "drag"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }] });
+  `, isInline: true, styles: [".dbx-mapbox-input-field .dbx-mapbox-input-field-map{height:220px;width:100%}.dbx-mapbox-input-field .dbx-mapbox-input-field-map mgl-map{height:100%;width:100%}.dbx-mapbox-input-field .dbx-mapbox-input-field-input{display:flex;align-items:center}.dbx-mapbox-input-field .dbx-mapbox-input-field-input .dbx-mapbox-input-field-input-field{width:calc(100% - 40px)}.dbx-mapbox-input-field-compact .dbx-latlng-field-input{min-height:120px;height:300px;max-height:calc(var(--vh100) * .5)}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i6.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i2.DbxMapboxMapDirective, selector: "[dbxMapboxMap]" }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i8.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i8.MatLabel, selector: "mat-label" }, { kind: "directive", type: i9.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i10.MapComponent, selector: "mgl-map", inputs: ["accessToken", "collectResourceTiming", "crossSourceCollisions", "customMapboxApiUrl", "fadeDuration", "hash", "refreshExpiredTiles", "failIfMajorPerformanceCaveat", "bearingSnap", "interactive", "pitchWithRotate", "clickTolerance", "attributionControl", "logoPosition", "maxTileCacheSize", "localIdeographFontFamily", "preserveDrawingBuffer", "trackResize", "transformRequest", "bounds", "antialias", "locale", "minZoom", "maxZoom", "minPitch", "maxPitch", "scrollZoom", "dragRotate", "touchPitch", "touchZoomRotate", "doubleClickZoom", "keyboard", "dragPan", "boxZoom", "style", "center", "maxBounds", "zoom", "bearing", "pitch", "fitBoundsOptions", "renderWorldCopies", "projection", "movingMethod", "movingOptions", "fitBounds", "fitScreenCoordinates", "centerWithPanTo", "panToOptions", "cursorStyle"], outputs: ["mapResize", "mapRemove", "mapMouseDown", "mapMouseUp", "mapMouseMove", "mapClick", "mapDblClick", "mapMouseOver", "mapMouseOut", "mapContextMenu", "mapTouchStart", "mapTouchEnd", "mapTouchMove", "mapTouchCancel", "mapWheel", "moveStart", "move", "moveEnd", "mapDragStart", "mapDrag", "mapDragEnd", "zoomStart", "zoomEvt", "zoomEnd", "rotateStart", "rotate", "rotateEnd", "pitchStart", "pitchEvt", "pitchEnd", "boxZoomStart", "boxZoomEnd", "boxZoomCancel", "webGlContextLost", "webGlContextRestored", "mapLoad", "idle", "render", "mapError", "data", "styleData", "sourceData", "dataLoading", "styleDataLoading", "sourceDataLoading", "styleImageMissing", "resize", "remove", "mouseDown", "mouseUp", "mouseMove", "click", "dblClick", "mouseOver", "mouseOut", "contextMenu", "touchStart", "touchEnd", "touchMove", "touchCancel", "wheel", "dragStart", "drag", "dragEnd", "load", "error"] }, { kind: "component", type: i10.MarkerComponent, selector: "mgl-marker", inputs: ["offset", "anchor", "clickTolerance", "feature", "lngLat", "draggable", "popupShown", "className", "pitchAlignment", "rotationAlignment"], outputs: ["markerDragStart", "markerDragEnd", "markerDrag", "dragStart", "dragEnd", "drag"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxFormMapboxLatLngFieldComponent, decorators: [{
             type: Component,
             args: [{ template: `
@@ -216,7 +301,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
         </mgl-map>
       </div>
       <div class="dbx-mapbox-input-field-input">
-        <button mat-icon-button (click)="useCurrentLocation()" [disabled]="isReadonlyOrDisabled || (useCurrentLocationDisabled$ | async)">
+        <button *ngIf="showCenterButton" mat-icon-button (click)="flyToMarker()">
           <mat-icon>my_location</mat-icon>
         </button>
         <mat-form-field class="dbx-mapbox-input-field-input-field" appearance="standard">
@@ -229,19 +314,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
   `, providers: [provideMapboxStoreIfParentIsUnavailable()], styles: [".dbx-mapbox-input-field .dbx-mapbox-input-field-map{height:220px;width:100%}.dbx-mapbox-input-field .dbx-mapbox-input-field-map mgl-map{height:100%;width:100%}.dbx-mapbox-input-field .dbx-mapbox-input-field-input{display:flex;align-items:center}.dbx-mapbox-input-field .dbx-mapbox-input-field-input .dbx-mapbox-input-field-input-field{width:calc(100% - 40px)}.dbx-mapbox-input-field-compact .dbx-latlng-field-input{min-height:120px;height:300px;max-height:calc(var(--vh100) * .5)}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.CompactContextStore, decorators: [{
                     type: Optional
-                }] }, { type: i2.GeolocationService }, { type: i2$1.DbxMapboxMapStore }, { type: i0.NgZone }]; } });
+                }] }, { type: i2.DbxMapboxInjectionStore, decorators: [{
+                    type: Optional
+                }] }, { type: i3$1.GeolocationService }, { type: i2.DbxMapboxMapStore }, { type: i0.NgZone }, { type: i0.Injector }]; } });
 
 class DbxFormMapboxLatLngModule {
 }
 DbxFormMapboxLatLngModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxFormMapboxLatLngModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-DbxFormMapboxLatLngModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: DbxFormMapboxLatLngModule, declarations: [DbxFormMapboxLatLngFieldComponent], imports: [CommonModule,
+DbxFormMapboxLatLngModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: DbxFormMapboxLatLngModule, declarations: [DbxFormMapboxLatLngFieldComponent, DbxFormMapboxLatLngFieldMarkerComponent], imports: [CommonModule,
         MatIconModule,
         MatButtonModule,
         DbxTextModule,
         DbxMapboxModule,
         FormsModule,
         ReactiveFormsModule,
-        MatInputModule, i1$1.FormlyModule, NgxMapboxGLModule] });
+        MatInputModule, i1$1.FormlyModule, NgxMapboxGLModule], exports: [DbxFormMapboxLatLngFieldMarkerComponent] });
 DbxFormMapboxLatLngModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxFormMapboxLatLngModule, imports: [CommonModule,
         MatIconModule,
         MatButtonModule,
@@ -271,7 +358,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
                         }),
                         NgxMapboxGLModule
                     ],
-                    declarations: [DbxFormMapboxLatLngFieldComponent]
+                    declarations: [DbxFormMapboxLatLngFieldComponent, DbxFormMapboxLatLngFieldMarkerComponent],
+                    exports: [DbxFormMapboxLatLngFieldMarkerComponent]
                 }]
         }] });
 
@@ -395,7 +483,7 @@ class DbxFormMapboxZoomFieldComponent extends FieldType {
         this.formControl.markAsDirty();
     }
 }
-DbxFormMapboxZoomFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxFormMapboxZoomFieldComponent, deps: [{ token: i1.CompactContextStore, optional: true }, { token: i2$1.DbxMapboxService }, { token: i2$1.DbxMapboxMapStore }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+DbxFormMapboxZoomFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxFormMapboxZoomFieldComponent, deps: [{ token: i1.CompactContextStore, optional: true }, { token: i2.DbxMapboxService }, { token: i2.DbxMapboxMapStore }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
 DbxFormMapboxZoomFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: DbxFormMapboxZoomFieldComponent, selector: "ng-component", providers: [provideMapboxStoreIfParentIsUnavailable()], usesInheritance: true, ngImport: i0, template: `
     <div class="dbx-mapbox-input-field" [ngClass]="(compactClass$ | async) ?? ''" [formGroup]="formGroup">
       <div *ngIf="showMap" class="dbx-mapbox-input-field-map">
@@ -408,7 +496,7 @@ DbxFormMapboxZoomFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion:
         </mat-form-field>
       </div>
     </div>
-  `, isInline: true, styles: [".dbx-mapbox-input-field .dbx-mapbox-input-field-map{height:220px;width:100%}.dbx-mapbox-input-field .dbx-mapbox-input-field-map mgl-map{height:100%;width:100%}.dbx-mapbox-input-field .dbx-mapbox-input-field-input{display:flex;align-items:center}.dbx-mapbox-input-field .dbx-mapbox-input-field-input .dbx-mapbox-input-field-input-field{width:calc(100% - 40px)}.dbx-mapbox-input-field-compact .dbx-latlng-field-input{min-height:120px;height:300px;max-height:calc(var(--vh100) * .5)}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.DbxMapboxMapDirective, selector: "[dbxMapboxMap]" }, { kind: "directive", type: i4$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i4$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4$1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i4$1.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i4$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i4$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i8.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8.MatLabel, selector: "mat-label" }, { kind: "directive", type: i9.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i10.MapComponent, selector: "mgl-map", inputs: ["accessToken", "collectResourceTiming", "crossSourceCollisions", "customMapboxApiUrl", "fadeDuration", "hash", "refreshExpiredTiles", "failIfMajorPerformanceCaveat", "bearingSnap", "interactive", "pitchWithRotate", "clickTolerance", "attributionControl", "logoPosition", "maxTileCacheSize", "localIdeographFontFamily", "preserveDrawingBuffer", "trackResize", "transformRequest", "bounds", "antialias", "locale", "minZoom", "maxZoom", "minPitch", "maxPitch", "scrollZoom", "dragRotate", "touchPitch", "touchZoomRotate", "doubleClickZoom", "keyboard", "dragPan", "boxZoom", "style", "center", "maxBounds", "zoom", "bearing", "pitch", "fitBoundsOptions", "renderWorldCopies", "projection", "movingMethod", "movingOptions", "fitBounds", "fitScreenCoordinates", "centerWithPanTo", "panToOptions", "cursorStyle"], outputs: ["mapResize", "mapRemove", "mapMouseDown", "mapMouseUp", "mapMouseMove", "mapClick", "mapDblClick", "mapMouseOver", "mapMouseOut", "mapContextMenu", "mapTouchStart", "mapTouchEnd", "mapTouchMove", "mapTouchCancel", "mapWheel", "moveStart", "move", "moveEnd", "mapDragStart", "mapDrag", "mapDragEnd", "zoomStart", "zoomEvt", "zoomEnd", "rotateStart", "rotate", "rotateEnd", "pitchStart", "pitchEvt", "pitchEnd", "boxZoomStart", "boxZoomEnd", "boxZoomCancel", "webGlContextLost", "webGlContextRestored", "mapLoad", "idle", "render", "mapError", "data", "styleData", "sourceData", "dataLoading", "styleDataLoading", "sourceDataLoading", "styleImageMissing", "resize", "remove", "mouseDown", "mouseUp", "mouseMove", "click", "dblClick", "mouseOver", "mouseOut", "contextMenu", "touchStart", "touchEnd", "touchMove", "touchCancel", "wheel", "dragStart", "drag", "dragEnd", "load", "error"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }] });
+  `, isInline: true, styles: [".dbx-mapbox-input-field .dbx-mapbox-input-field-map{height:220px;width:100%}.dbx-mapbox-input-field .dbx-mapbox-input-field-map mgl-map{height:100%;width:100%}.dbx-mapbox-input-field .dbx-mapbox-input-field-input{display:flex;align-items:center}.dbx-mapbox-input-field .dbx-mapbox-input-field-input .dbx-mapbox-input-field-input-field{width:calc(100% - 40px)}.dbx-mapbox-input-field-compact .dbx-latlng-field-input{min-height:120px;height:300px;max-height:calc(var(--vh100) * .5)}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DbxMapboxMapDirective, selector: "[dbxMapboxMap]" }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i4.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i8.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8.MatLabel, selector: "mat-label" }, { kind: "directive", type: i9.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i10.MapComponent, selector: "mgl-map", inputs: ["accessToken", "collectResourceTiming", "crossSourceCollisions", "customMapboxApiUrl", "fadeDuration", "hash", "refreshExpiredTiles", "failIfMajorPerformanceCaveat", "bearingSnap", "interactive", "pitchWithRotate", "clickTolerance", "attributionControl", "logoPosition", "maxTileCacheSize", "localIdeographFontFamily", "preserveDrawingBuffer", "trackResize", "transformRequest", "bounds", "antialias", "locale", "minZoom", "maxZoom", "minPitch", "maxPitch", "scrollZoom", "dragRotate", "touchPitch", "touchZoomRotate", "doubleClickZoom", "keyboard", "dragPan", "boxZoom", "style", "center", "maxBounds", "zoom", "bearing", "pitch", "fitBoundsOptions", "renderWorldCopies", "projection", "movingMethod", "movingOptions", "fitBounds", "fitScreenCoordinates", "centerWithPanTo", "panToOptions", "cursorStyle"], outputs: ["mapResize", "mapRemove", "mapMouseDown", "mapMouseUp", "mapMouseMove", "mapClick", "mapDblClick", "mapMouseOver", "mapMouseOut", "mapContextMenu", "mapTouchStart", "mapTouchEnd", "mapTouchMove", "mapTouchCancel", "mapWheel", "moveStart", "move", "moveEnd", "mapDragStart", "mapDrag", "mapDragEnd", "zoomStart", "zoomEvt", "zoomEnd", "rotateStart", "rotate", "rotateEnd", "pitchStart", "pitchEvt", "pitchEnd", "boxZoomStart", "boxZoomEnd", "boxZoomCancel", "webGlContextLost", "webGlContextRestored", "mapLoad", "idle", "render", "mapError", "data", "styleData", "sourceData", "dataLoading", "styleDataLoading", "sourceDataLoading", "styleImageMissing", "resize", "remove", "mouseDown", "mouseUp", "mouseMove", "click", "dblClick", "mouseOver", "mouseOut", "contextMenu", "touchStart", "touchEnd", "touchMove", "touchCancel", "wheel", "dragStart", "drag", "dragEnd", "load", "error"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxFormMapboxZoomFieldComponent, decorators: [{
             type: Component,
             args: [{ template: `
@@ -426,7 +514,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
   `, providers: [provideMapboxStoreIfParentIsUnavailable()], styles: [".dbx-mapbox-input-field .dbx-mapbox-input-field-map{height:220px;width:100%}.dbx-mapbox-input-field .dbx-mapbox-input-field-map mgl-map{height:100%;width:100%}.dbx-mapbox-input-field .dbx-mapbox-input-field-input{display:flex;align-items:center}.dbx-mapbox-input-field .dbx-mapbox-input-field-input .dbx-mapbox-input-field-input-field{width:calc(100% - 40px)}.dbx-mapbox-input-field-compact .dbx-latlng-field-input{min-height:120px;height:300px;max-height:calc(var(--vh100) * .5)}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.CompactContextStore, decorators: [{
                     type: Optional
-                }] }, { type: i2$1.DbxMapboxService }, { type: i2$1.DbxMapboxMapStore }, { type: i0.NgZone }]; } });
+                }] }, { type: i2.DbxMapboxService }, { type: i2.DbxMapboxMapStore }, { type: i0.NgZone }]; } });
 
 class DbxFormMapboxZoomModule {
 }
@@ -488,5 +576,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { DbxFormMapboxLatLngFieldComponent, DbxFormMapboxLatLngModule, DbxFormMapboxModule, DbxFormMapboxZoomFieldComponent, DbxFormMapboxZoomModule, mapboxLatLngField, mapboxZoomField };
+export { DEFAULT_DBX_FORM_MAPBOX_LAT_LNG_FIELD_INJECTION_KEY, DEFAULT_DBX_FORM_MAPBOX_LAT_LNG_MARKER_CONFIG, DbxFormMapboxLatLngFieldComponent, DbxFormMapboxLatLngFieldMarkerComponent, DbxFormMapboxLatLngModule, DbxFormMapboxModule, DbxFormMapboxZoomFieldComponent, DbxFormMapboxZoomModule, mapboxLatLngField, mapboxZoomField };
 //# sourceMappingURL=dereekb-dbx-form-mapbox.mjs.map