@dereekb/dbx-form 11.1.8 → 12.0.0

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

@@ -1,28 +1,29 @@
 import { formlyField, propsAndConfigForFieldConfig, DEFAULT_LAT_LNG_TEXT_FIELD_PLACEHOLDER, validatorsForFieldConfig, DEFAULT_LAT_LNG_TEXT_FIELD_PATTERN_MESSAGE } from '@dereekb/dbx-form';
-import { LAT_LNG_PATTERN, isSameLatLngPoint, isDefaultLatLngPoint, isValidLatLngPoint, latLngStringFunction, latLngPointFunction, latLngPoint } from '@dereekb/util';
-import { CompactContextStore, mapCompactModeObs, DbxTextModule } from '@dereekb/dbx-web';
+import { LAT_LNG_PATTERN, isSameLatLngPoint, isDefaultLatLngPoint, isValidLatLngPoint, defaultLatLngPoint, latLngStringFunction, latLngPointFunction, latLngPoint } from '@dereekb/util';
+import * as i3 from '@angular/forms';
+import { ReactiveFormsModule, FormsModule } from '@angular/forms';
+import { CompactContextStore, mapCompactModeObs } from '@dereekb/dbx-web';
 import * as i0 from '@angular/core';
-import { inject, Component, ChangeDetectionStrategy, NgZone, Injector, NgModule } from '@angular/core';
+import { inject, Component, ChangeDetectionStrategy, Injector, NgModule } from '@angular/core';
 import { FieldType } from '@ngx-formly/material';
 import { combineLatest, map, shareReplay, BehaviorSubject, of, switchMap, startWith, distinctUntilChanged, skipWhile, filter, skip, throttleTime, first } from 'rxjs';
 import { SubscriptionObject, filterMaybe, asObservableFromGetter } from '@dereekb/rxjs';
 import { GeolocationService } from '@ng-web-apis/geolocation';
-import * as i1 from '@dereekb/dbx-web/mapbox';
-import { DbxMapboxInjectionStore, DbxMapboxMapStore, provideMapboxStoreIfParentIsUnavailable, DbxMapboxModule, DbxMapboxService, mapboxZoomLevel, MAPBOX_MIN_ZOOM_LEVEL, MAPBOX_MAX_ZOOM_LEVEL } from '@dereekb/dbx-web/mapbox';
-import * as i1$1 from '@angular/common';
-import { CommonModule } from '@angular/common';
+import * as i3$1 from '@dereekb/dbx-web/mapbox';
+import { DbxMapboxMarkerComponent, DbxMapboxInjectionStore, DbxMapboxMapStore, provideMapboxStoreIfParentIsUnavailable, DbxMapboxModule, DbxMapboxService, mapboxZoomLevel, MAPBOX_MIN_ZOOM_LEVEL, MAPBOX_MAX_ZOOM_LEVEL } from '@dereekb/dbx-web/mapbox';
+import { toSignal } from '@angular/core/rxjs-interop';
+import { NgClass } from '@angular/common';
+import * as i5 from '@angular/material/button';
+import { MatButtonModule } from '@angular/material/button';
+import * as i6 from '@angular/material/form-field';
+import { MatFormFieldModule } from '@angular/material/form-field';
 import * as i2 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
-import * as i3 from '@angular/material/button';
-import { MatButtonModule } from '@angular/material/button';
-import * as i3$1 from '@angular/forms';
-import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import * as i6 from '@angular/material/input';
+import * as i7 from '@angular/material/input';
 import { MatInputModule } from '@angular/material/input';
-import * as i7 from '@angular/material/form-field';
-import * as i8 from 'ngx-mapbox-gl';
+import * as i4 from 'ngx-mapbox-gl';
 import { NgxMapboxGLModule } from 'ngx-mapbox-gl';
-import * as i1$2 from '@ngx-formly/core';
+import * as i1 from '@ngx-formly/core';
 import { FormlyModule } from '@ngx-formly/core';
 
 function mapboxLatLngField(config = {}) {
@@ -68,18 +69,21 @@ class DbxFormMapboxLatLngFieldMarkerComponent {
             return undefined;
         }
     }), shareReplay(1));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormMapboxLatLngFieldMarkerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.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: i1.DbxMapboxMarkerComponent, selector: "dbx-mapbox-marker", inputs: ["marker"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    markerSignal = toSignal(this.marker$);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxFormMapboxLatLngFieldMarkerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: DbxFormMapboxLatLngFieldMarkerComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: `
+    <dbx-mapbox-marker [marker]="markerSignal()"></dbx-mapbox-marker>
+  `, isInline: true, dependencies: [{ kind: "component", type: DbxMapboxMarkerComponent, selector: "dbx-mapbox-marker", inputs: ["marker"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormMapboxLatLngFieldMarkerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxFormMapboxLatLngFieldMarkerComponent, decorators: [{
             type: Component,
             args: [{
                     template: `
-    <dbx-mapbox-marker [marker]="marker$ | async"></dbx-mapbox-marker>
+    <dbx-mapbox-marker [marker]="markerSignal()"></dbx-mapbox-marker>
   `,
-                    changeDetection: ChangeDetectionStrategy.OnPush
+                    imports: [DbxMapboxMarkerComponent],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    standalone: true
                 }]
         }] });
 
@@ -98,15 +102,7 @@ class DbxFormMapboxLatLngFieldComponent extends FieldType {
     compact = inject(CompactContextStore, { optional: true });
     dbxMapboxInjectionStore = inject(DbxMapboxInjectionStore, { optional: true });
     dbxMapboxMapStore = inject(DbxMapboxMapStore);
-    ngZone = inject(NgZone);
     injector = inject(Injector);
-    _latLngStringFunction;
-    _latLngPointFunction;
-    compactClass$ = mapCompactModeObs(this.compact?.mode$, {
-        compact: 'dbx-mapbox-input-field-compact'
-    });
-    _useCurrentLocationDisabled = new BehaviorSubject(false);
-    useCurrentLocationDisabled$ = this._useCurrentLocationDisabled.asObservable();
     _sub = new SubscriptionObject();
     _geoSub = new SubscriptionObject();
     _centerSub = new SubscriptionObject();
@@ -114,6 +110,13 @@ class DbxFormMapboxLatLngFieldComponent extends FieldType {
     _clickSub = new SubscriptionObject();
     _zoom = new BehaviorSubject(12);
     _markerConfig = new BehaviorSubject(of(DEFAULT_DBX_FORM_MAPBOX_LAT_LNG_MARKER_CONFIG));
+    _latLngStringFunction;
+    _latLngPointFunction;
+    compactClass$ = mapCompactModeObs(this.compact?.mode$, {
+        compact: 'dbx-mapbox-input-field-compact'
+    }).pipe(filterMaybe());
+    _useCurrentLocationDisabled = new BehaviorSubject(false);
+    useCurrentLocationDisabled$ = this._useCurrentLocationDisabled.asObservable();
     _formControlObs = new BehaviorSubject(undefined);
     formControl$ = this._formControlObs.pipe(filterMaybe());
     value$ = this.formControl$.pipe(switchMap((control) => control.valueChanges.pipe(startWith(control.value))), shareReplay(1));
@@ -127,6 +130,9 @@ class DbxFormMapboxLatLngFieldComponent extends FieldType {
     skipWhile(isDefaultLatLngPoint), filter(isValidLatLngPoint));
     zoom$ = this._zoom.asObservable();
     markerConfig$ = this._markerConfig.asObservable().pipe(switchMap((x) => x), shareReplay(1));
+    useCurrentLocationDisabledSignal = toSignal(this._useCurrentLocationDisabled, { initialValue: false });
+    compactClassSignal = toSignal(this.compactClass$, { initialValue: '' });
+    latLngSignal = toSignal(this.latLng$, { initialValue: defaultLatLngPoint() });
     get zoom() {
         return Math.min(this.field.props.zoom || 12, 18);
     }
@@ -197,9 +203,7 @@ class DbxFormMapboxLatLngFieldComponent extends FieldType {
                 this._sub.subscription = this.dbxMapboxMapStore.center$.subscribe((center) => {
                     this.dbxMapboxMapStore.centerGivenMargin$.pipe(first()).subscribe(() => {
                         if (!this.isReadonlyOrDisabled) {
-                            this.ngZone.run(() => {
-                                this.setValue(center);
-                            });
+                            this.setValue(center);
                         }
                     });
                 });
@@ -265,92 +269,80 @@ class DbxFormMapboxLatLngFieldComponent extends FieldType {
         this.formControl.markAsTouched();
         this.formControl.markAsDirty();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormMapboxLatLngFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.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">
-        <mgl-map dbxMapboxMap>
-          <mgl-marker [lngLat]="(latLng$ | async) || [0, 0]" [draggable]="!isReadonlyOrDisabled" (markerDragEnd)="onMarkerDragEnd($event)"></mgl-marker>
-        </mgl-map>
-      </div>
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxFormMapboxLatLngFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: DbxFormMapboxLatLngFieldComponent, isStandalone: true, selector: "ng-component", providers: [provideMapboxStoreIfParentIsUnavailable()], usesInheritance: true, ngImport: i0, template: `
+    <div class="dbx-mapbox-input-field" [ngClass]="compactClassSignal()" [formGroup]="formGroup">
+      @if (showMap) {
+        <div class="dbx-mapbox-input-field-map">
+          <mgl-map dbxMapboxMap>
+            <mgl-marker [lngLat]="latLngSignal()" [draggable]="!isReadonlyOrDisabled" (markerDragEnd)="onMarkerDragEnd($event)"></mgl-marker>
+          </mgl-map>
+        </div>
+      }
       <div class="dbx-mapbox-input-field-input">
-        <button *ngIf="showCenterButton" mat-icon-button (click)="flyToMarker()">
-          <mat-icon>my_location</mat-icon>
-        </button>
+        @if (showCenterButton) {
+          <button mat-icon-button (click)="flyToMarker()">
+            <mat-icon>my_location</mat-icon>
+          </button>
+        }
         <mat-form-field class="dbx-mapbox-input-field-input-field">
           <mat-label>Coordinates</mat-label>
           <input type="text" matInput [placeholder]="placeholder" [formControl]="formControl" />
-          <mat-hint class="dbx-hint dbx-warn" *ngIf="useCurrentLocationDisabled$ | async">Could not access your current location.</mat-hint>
+          @if (useCurrentLocationDisabledSignal()) {
+            <mat-hint class="dbx-hint dbx-warn">Could not access your current location.</mat-hint>
+          }
         </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: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i1.DbxMapboxMapDirective, selector: "[dbxMapboxMap]" }, { kind: "directive", type: i3$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: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i6.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: i7.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i7.MatLabel, selector: "mat-label" }, { kind: "directive", type: i7.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "component", type: i8.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", "cooperativeGestures", "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", "mapCreate", "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: i8.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: i1$1.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: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: DbxMapboxModule }, { kind: "directive", type: i3$1.DbxMapboxMapDirective, selector: "[dbxMapboxMap]" }, { kind: "component", type: i4.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", "cooperativeGestures", "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", "mapCreate", "idle", "render", "mapError", "data", "styleData", "sourceData", "dataLoading", "styleDataLoading", "sourceDataLoading", "styleImageMissing", "load"] }, { kind: "component", type: i4.MarkerComponent, selector: "mgl-marker", inputs: ["offset", "anchor", "clickTolerance", "feature", "lngLat", "draggable", "popupShown", "className", "pitchAlignment", "rotationAlignment"], outputs: ["markerDragStart", "markerDragEnd", "markerDrag"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i5.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i7.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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormMapboxLatLngFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxFormMapboxLatLngFieldComponent, decorators: [{
             type: Component,
             args: [{ template: `
-    <div class="dbx-mapbox-input-field" [ngClass]="(compactClass$ | async) ?? ''" [formGroup]="formGroup">
-      <div *ngIf="showMap" class="dbx-mapbox-input-field-map">
-        <mgl-map dbxMapboxMap>
-          <mgl-marker [lngLat]="(latLng$ | async) || [0, 0]" [draggable]="!isReadonlyOrDisabled" (markerDragEnd)="onMarkerDragEnd($event)"></mgl-marker>
-        </mgl-map>
-      </div>
+    <div class="dbx-mapbox-input-field" [ngClass]="compactClassSignal()" [formGroup]="formGroup">
+      @if (showMap) {
+        <div class="dbx-mapbox-input-field-map">
+          <mgl-map dbxMapboxMap>
+            <mgl-marker [lngLat]="latLngSignal()" [draggable]="!isReadonlyOrDisabled" (markerDragEnd)="onMarkerDragEnd($event)"></mgl-marker>
+          </mgl-map>
+        </div>
+      }
       <div class="dbx-mapbox-input-field-input">
-        <button *ngIf="showCenterButton" mat-icon-button (click)="flyToMarker()">
-          <mat-icon>my_location</mat-icon>
-        </button>
+        @if (showCenterButton) {
+          <button mat-icon-button (click)="flyToMarker()">
+            <mat-icon>my_location</mat-icon>
+          </button>
+        }
         <mat-form-field class="dbx-mapbox-input-field-input-field">
           <mat-label>Coordinates</mat-label>
           <input type="text" matInput [placeholder]="placeholder" [formControl]="formControl" />
-          <mat-hint class="dbx-hint dbx-warn" *ngIf="useCurrentLocationDisabled$ | async">Could not access your current location.</mat-hint>
+          @if (useCurrentLocationDisabledSignal()) {
+            <mat-hint class="dbx-hint dbx-warn">Could not access your current location.</mat-hint>
+          }
         </mat-form-field>
       </div>
     </div>
-  `, 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"] }]
+  `, providers: [provideMapboxStoreIfParentIsUnavailable()], imports: [NgClass, ReactiveFormsModule, MatIconModule, DbxMapboxModule, MatButtonModule, MatFormFieldModule, MatInputModule], changeDetection: ChangeDetectionStrategy.OnPush, standalone: 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"] }]
         }] });
 
+const importsAndExports$1 = [DbxFormMapboxLatLngFieldComponent];
 class DbxFormMapboxLatLngModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormMapboxLatLngModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: DbxFormMapboxLatLngModule, declarations: [DbxFormMapboxLatLngFieldComponent, DbxFormMapboxLatLngFieldMarkerComponent], imports: [CommonModule,
-            MatIconModule,
-            MatButtonModule,
-            DbxTextModule,
-            DbxMapboxModule,
-            FormsModule,
-            ReactiveFormsModule,
-            MatInputModule, i1$2.FormlyModule, NgxMapboxGLModule], exports: [DbxFormMapboxLatLngFieldMarkerComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormMapboxLatLngModule, imports: [CommonModule,
-            MatIconModule,
-            MatButtonModule,
-            DbxTextModule,
-            DbxMapboxModule,
-            FormsModule,
-            ReactiveFormsModule,
-            MatInputModule,
-            FormlyModule.forChild({
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxFormMapboxLatLngModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: DbxFormMapboxLatLngModule, imports: [DbxFormMapboxLatLngFieldComponent, i1.FormlyModule], exports: [DbxFormMapboxLatLngFieldComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxFormMapboxLatLngModule, imports: [importsAndExports$1, FormlyModule.forChild({
                 types: [{ name: 'mapbox-latlng-picker', component: DbxFormMapboxLatLngFieldComponent, wrappers: ['style', 'form-field'] }]
-            }),
-            NgxMapboxGLModule] });
+            })] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormMapboxLatLngModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxFormMapboxLatLngModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
-                        CommonModule,
-                        MatIconModule,
-                        MatButtonModule,
-                        DbxTextModule,
-                        DbxMapboxModule,
-                        FormsModule,
-                        ReactiveFormsModule,
-                        MatInputModule,
+                        ...importsAndExports$1,
                         FormlyModule.forChild({
                             types: [{ name: 'mapbox-latlng-picker', component: DbxFormMapboxLatLngFieldComponent, wrappers: ['style', 'form-field'] }]
-                        }),
-                        NgxMapboxGLModule
+                        })
                     ],
-                    declarations: [DbxFormMapboxLatLngFieldComponent, DbxFormMapboxLatLngFieldMarkerComponent],
-                    exports: [DbxFormMapboxLatLngFieldMarkerComponent]
+                    exports: importsAndExports$1
                 }]
         }] });
 
@@ -380,11 +372,11 @@ class DbxFormMapboxZoomFieldComponent extends FieldType {
     compact = inject(CompactContextStore, { optional: true });
     dbxMapboxService = inject(DbxMapboxService);
     dbxMapboxMapStore = inject(DbxMapboxMapStore);
-    ngZone = inject(NgZone);
     _undoZoomLimit = false;
     compactClass$ = mapCompactModeObs(this.compact?.mode$, {
         compact: 'dbx-mapbox-input-field-compact'
-    });
+    }).pipe(filterMaybe());
+    compactClassSignal = toSignal(this.compactClass$, { initialValue: '' });
     _sub = new SubscriptionObject();
     _center = new BehaviorSubject(undefined);
     _formControlObs = new BehaviorSubject(undefined);
@@ -450,9 +442,7 @@ class DbxFormMapboxZoomFieldComponent extends FieldType {
         }
         this._sub.subscription = this.dbxMapboxMapStore.zoom$.subscribe((zoom) => {
             if (!this.isReadonlyOrDisabled) {
-                this.ngZone.run(() => {
-                    this.setValue(zoom);
-                });
+                this.setValue(zoom);
             }
         });
     }
@@ -470,12 +460,14 @@ class DbxFormMapboxZoomFieldComponent extends FieldType {
         this.formControl.markAsTouched();
         this.formControl.markAsDirty();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormMapboxZoomFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.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">
-        <mgl-map dbxMapboxMap></mgl-map>
-      </div>
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxFormMapboxZoomFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: DbxFormMapboxZoomFieldComponent, isStandalone: true, selector: "ng-component", providers: [provideMapboxStoreIfParentIsUnavailable()], usesInheritance: true, ngImport: i0, template: `
+    <div class="dbx-mapbox-input-field" [ngClass]="compactClassSignal()" [formGroup]="formGroup">
+      @if (showMap) {
+        <div class="dbx-mapbox-input-field-map">
+          <mgl-map dbxMapboxMap></mgl-map>
+        </div>
+      }
       <div class="dbx-mapbox-input-field-input">
         <mat-form-field class="dbx-mapbox-input-field-input-field">
           <mat-label>Zoom Level</mat-label>
@@ -483,15 +475,17 @@ class DbxFormMapboxZoomFieldComponent extends FieldType {
         </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: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.DbxMapboxMapDirective, selector: "[dbxMapboxMap]" }, { kind: "directive", type: i3$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: i3$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i3$1.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i3$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i6.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: i7.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i7.MatLabel, selector: "mat-label" }, { kind: "component", type: i8.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", "cooperativeGestures", "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", "mapCreate", "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: i1$1.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: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: DbxMapboxModule }, { kind: "directive", type: i3$1.DbxMapboxMapDirective, selector: "[dbxMapboxMap]" }, { kind: "component", type: i4.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", "cooperativeGestures", "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", "mapCreate", "idle", "render", "mapError", "data", "styleData", "sourceData", "dataLoading", "styleDataLoading", "sourceDataLoading", "styleImageMissing", "load"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.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: i3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i3.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i7.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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormMapboxZoomFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxFormMapboxZoomFieldComponent, decorators: [{
             type: Component,
             args: [{ template: `
-    <div class="dbx-mapbox-input-field" [ngClass]="(compactClass$ | async) ?? ''" [formGroup]="formGroup">
-      <div *ngIf="showMap" class="dbx-mapbox-input-field-map">
-        <mgl-map dbxMapboxMap></mgl-map>
-      </div>
+    <div class="dbx-mapbox-input-field" [ngClass]="compactClassSignal()" [formGroup]="formGroup">
+      @if (showMap) {
+        <div class="dbx-mapbox-input-field-map">
+          <mgl-map dbxMapboxMap></mgl-map>
+        </div>
+      }
       <div class="dbx-mapbox-input-field-input">
         <mat-form-field class="dbx-mapbox-input-field-input-field">
           <mat-label>Zoom Level</mat-label>
@@ -499,59 +493,38 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
         </mat-form-field>
       </div>
     </div>
-  `, 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"] }]
+  `, providers: [provideMapboxStoreIfParentIsUnavailable()], imports: [NgClass, DbxMapboxModule, FormsModule, ReactiveFormsModule, MatFormFieldModule, MatInputModule], changeDetection: ChangeDetectionStrategy.OnPush, standalone: 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"] }]
         }] });
 
+const importsAndExports = [DbxFormMapboxZoomFieldComponent];
 class DbxFormMapboxZoomModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormMapboxZoomModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: DbxFormMapboxZoomModule, declarations: [DbxFormMapboxZoomFieldComponent], imports: [CommonModule,
-            MatIconModule,
-            MatButtonModule,
-            DbxTextModule,
-            DbxMapboxModule,
-            FormsModule,
-            ReactiveFormsModule,
-            MatInputModule, i1$2.FormlyModule, NgxMapboxGLModule] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormMapboxZoomModule, imports: [CommonModule,
-            MatIconModule,
-            MatButtonModule,
-            DbxTextModule,
-            DbxMapboxModule,
-            FormsModule,
-            ReactiveFormsModule,
-            MatInputModule,
-            FormlyModule.forChild({
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxFormMapboxZoomModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: DbxFormMapboxZoomModule, imports: [DbxFormMapboxZoomFieldComponent, i1.FormlyModule, NgxMapboxGLModule], exports: [DbxFormMapboxZoomFieldComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxFormMapboxZoomModule, imports: [importsAndExports, FormlyModule.forChild({
                 types: [{ name: 'mapbox-zoom-picker', component: DbxFormMapboxZoomFieldComponent, wrappers: ['style', 'form-field'] }]
             }),
             NgxMapboxGLModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormMapboxZoomModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxFormMapboxZoomModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
-                        CommonModule,
-                        MatIconModule,
-                        MatButtonModule,
-                        DbxTextModule,
-                        DbxMapboxModule,
-                        FormsModule,
-                        ReactiveFormsModule,
-                        MatInputModule,
+                        ...importsAndExports,
                         FormlyModule.forChild({
                             types: [{ name: 'mapbox-zoom-picker', component: DbxFormMapboxZoomFieldComponent, wrappers: ['style', 'form-field'] }]
                         }),
                         NgxMapboxGLModule
                     ],
-                    declarations: [DbxFormMapboxZoomFieldComponent]
+                    exports: importsAndExports
                 }]
         }] });
 
 class DbxFormMapboxModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormMapboxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: DbxFormMapboxModule, exports: [DbxFormMapboxLatLngModule, DbxFormMapboxZoomModule] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormMapboxModule, imports: [DbxFormMapboxLatLngModule, DbxFormMapboxZoomModule] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxFormMapboxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: DbxFormMapboxModule, exports: [DbxFormMapboxLatLngModule, DbxFormMapboxZoomModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxFormMapboxModule, imports: [DbxFormMapboxLatLngModule, DbxFormMapboxZoomModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormMapboxModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxFormMapboxModule, decorators: [{
             type: NgModule,
             args: [{
                     exports: [DbxFormMapboxLatLngModule, DbxFormMapboxZoomModule]