@dereekb/dbx-form 13.7.0 → 13.9.0

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

@@ -1,17 +1,17 @@
 import { validatorsForFieldConfig, DEFAULT_LAT_LNG_TEXT_FIELD_PATTERN_MESSAGE, formlyField, propsAndConfigForFieldConfig, DEFAULT_LAT_LNG_TEXT_FIELD_PLACEHOLDER } from '@dereekb/dbx-form';
-import { LAT_LNG_PATTERN, isSameLatLngPoint, isDefaultLatLngPoint, isValidLatLngPoint, defaultLatLngPoint, latLngStringFunction, latLngPointFunction, latLngPoint } from '@dereekb/util';
+import { LAT_LNG_PATTERN, isSameLatLngPoint, isDefaultLatLngPoint, isValidLatLngPoint, defaultLatLngPoint, latLngStringFunction, latLngPointFunction, filterFromPOJO, latLngPoint } from '@dereekb/util';
 import * as i3 from '@angular/forms';
-import { ReactiveFormsModule, FormsModule } from '@angular/forms';
+import { ReactiveFormsModule, FormControl, FormsModule } from '@angular/forms';
 import { CompactContextStore, mapCompactModeObs } from '@dereekb/dbx-web';
 import * as i0 from '@angular/core';
-import { inject, ChangeDetectionStrategy, Component, Injector, NgModule } from '@angular/core';
+import { inject, ChangeDetectionStrategy, Component, Injector, NgModule, ElementRef, input, computed, effect } 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 { WaGeolocationService } from '@ng-web-apis/geolocation';
 import * as i3$1 from '@dereekb/dbx-web/mapbox';
 import { DbxMapboxMarkerComponent, DbxMapboxInjectionStore, DbxMapboxMapStore, DbxMapboxModule, provideMapboxStoreIfParentIsUnavailable, DbxMapboxService, mapboxZoomLevel, MAPBOX_MIN_ZOOM_LEVEL, MAPBOX_MAX_ZOOM_LEVEL } from '@dereekb/dbx-web/mapbox';
-import { toSignal } from '@angular/core/rxjs-interop';
+import { toSignal, toObservable } from '@angular/core/rxjs-interop';
 import { NgClass } from '@angular/common';
 import * as i4 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
@@ -25,10 +25,13 @@ import * as i2$1 from 'ngx-mapbox-gl';
 import { MapComponent, MarkerComponent } from 'ngx-mapbox-gl';
 import * as i1 from '@ngx-formly/core';
 import { FormlyModule } from '@ngx-formly/core';
+import { DEFAULT_PROPS, DEFAULT_VALIDATION_MESSAGES, provideDynamicForm } from '@ng-forge/dynamic-forms';
+import { setupMetaTracking, resolveValueFieldContext, buildValueFieldInputs } from '@ng-forge/dynamic-forms/integration';
 
 /**
  * Creates a Formly field configuration for a Mapbox-powered latitude/longitude picker with optional map display.
  *
+ * @deprecated Use dbxForgeMapboxLatLngField() from the forge API instead.
  * @param config - Optional field configuration overrides
  * @returns A validated Formly field configuration for the Mapbox lat/lng picker
  */
@@ -68,20 +71,15 @@ function mapboxLatLngField(config = {}) {
 class DbxFormMapboxLatLngFieldMarkerComponent {
     fieldComponent = inject(DbxFormMapboxLatLngFieldComponent);
     marker$ = combineLatest([this.fieldComponent.latLng$, this.fieldComponent.markerConfig$]).pipe(map(([latLng, markerConfig]) => {
-        if (markerConfig !== false) {
-            return { latLng, ...markerConfig };
-        }
-        else {
-            return undefined;
-        }
+        return markerConfig !== false ? { latLng, ...markerConfig } : undefined;
     }), shareReplay(1));
     markerSignal = toSignal(this.marker$);
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DbxFormMapboxLatLngFieldMarkerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.3", type: DbxFormMapboxLatLngFieldMarkerComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxFormMapboxLatLngFieldMarkerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", 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: "21.2.3", ngImport: i0, type: DbxFormMapboxLatLngFieldMarkerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxFormMapboxLatLngFieldMarkerComponent, decorators: [{
             type: Component,
             args: [{
                     template: `
@@ -103,6 +101,9 @@ const DEFAULT_DBX_FORM_MAPBOX_LAT_LNG_MARKER_CONFIG = {
           <mat-icon>my_location</mat-icon>
         </button>
  */
+/**
+ * @deprecated Use DbxForgeMapboxLatLngFieldComponent instead.
+ */
 class DbxFormMapboxLatLngFieldComponent extends FieldType {
     _geolocationService = inject(WaGeolocationService);
     compact = inject(CompactContextStore, { optional: true });
@@ -275,8 +276,8 @@ class DbxFormMapboxLatLngFieldComponent extends FieldType {
         this.formControl.markAsTouched();
         this.formControl.markAsDirty();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DbxFormMapboxLatLngFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.3", type: DbxFormMapboxLatLngFieldComponent, isStandalone: true, selector: "ng-component", providers: [provideMapboxStoreIfParentIsUnavailable()], usesInheritance: true, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxFormMapboxLatLngFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", 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">
@@ -302,7 +303,7 @@ class DbxFormMapboxLatLngFieldComponent extends FieldType {
     </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: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MapComponent, selector: "mgl-map", inputs: ["accessToken", "collectResourceTiming", "crossSourceCollisions", "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"] }, { kind: "component", type: MarkerComponent, selector: "mgl-marker", inputs: ["offset", "anchor", "clickTolerance", "feature", "lngLat", "draggable", "popupShown", "className", "zIndex", "pitchAlignment", "rotationAlignment"], outputs: ["markerDragStart", "markerDragEnd", "markerDrag"] }, { 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],[formArray],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: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "ngmodule", type: MatInputModule }, { 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", "disabledInteractive"], exportAs: ["matInput"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DbxFormMapboxLatLngFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxFormMapboxLatLngFieldComponent, decorators: [{
             type: Component,
             args: [{ template: `
     <div class="dbx-mapbox-input-field" [ngClass]="compactClassSignal()" [formGroup]="formGroup">
@@ -332,14 +333,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImpor
         }] });
 
 const importsAndExports$1 = [DbxFormMapboxLatLngFieldComponent];
+/**
+ * @deprecated Use provideDbxForgeMapboxFieldDeclarations() instead.
+ */
 class DbxFormMapboxLatLngModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DbxFormMapboxLatLngModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.3", ngImport: i0, type: DbxFormMapboxLatLngModule, imports: [DbxFormMapboxLatLngFieldComponent, i1.FormlyModule], exports: [DbxFormMapboxLatLngFieldComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DbxFormMapboxLatLngModule, imports: [importsAndExports$1, FormlyModule.forChild({
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxFormMapboxLatLngModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.4", ngImport: i0, type: DbxFormMapboxLatLngModule, imports: [DbxFormMapboxLatLngFieldComponent, i1.FormlyModule], exports: [DbxFormMapboxLatLngFieldComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxFormMapboxLatLngModule, imports: [importsAndExports$1, FormlyModule.forChild({
                 types: [{ name: 'mapbox-latlng-picker', component: DbxFormMapboxLatLngFieldComponent, wrappers: ['style', 'form-field'] }]
             })] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DbxFormMapboxLatLngModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxFormMapboxLatLngModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -352,9 +356,355 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImpor
                 }]
         }] });
 
+/**
+ * The custom forge field type name for the mapbox lat/lng field.
+ */
+const FORGE_MAPBOX_LATLNG_FIELD_TYPE = 'dbx-forge-mapbox-latlng';
+/**
+ * Creates a forge field definition for a Mapbox-powered latitude/longitude picker.
+ *
+ * This is the forge equivalent of {@link mapboxLatLngField}.
+ *
+ * @param config - Optional field configuration overrides
+ * @returns A validated forge field definition for the Mapbox lat/lng picker
+ */
+function dbxForgeMapboxLatLngField(config = {}) {
+    const { key = 'latLng', label, description, required, readonly: isReadonly, showMap, zoom, latLngConfig, recenterTime, showCenterButton, setCenterOnLocationSet, selectLocationOnMapDrag, selectLocationOnMapClick, markerConfig } = config;
+    const props = filterFromPOJO({
+        label: label ?? 'Location',
+        description,
+        placeholder: DEFAULT_LAT_LNG_TEXT_FIELD_PLACEHOLDER,
+        pattern: LAT_LNG_PATTERN,
+        patternMessage: DEFAULT_LAT_LNG_TEXT_FIELD_PATTERN_MESSAGE,
+        showMap,
+        zoom,
+        latLngConfig,
+        recenterTime,
+        selectLocationOnMapDrag,
+        selectLocationOnMapClick,
+        showCenterButton,
+        setCenterOnLocationSet,
+        markerConfig
+    });
+    return filterFromPOJO({
+        key,
+        type: FORGE_MAPBOX_LATLNG_FIELD_TYPE,
+        label: label ?? 'Location',
+        value: undefined,
+        required,
+        readonly: isReadonly,
+        props: Object.keys(props).length > 0 ? props : undefined
+    });
+}
+
+class DbxForgeMapboxLatLngFieldMarkerComponent {
+    fieldComponent = inject(DbxForgeMapboxLatLngFieldComponent);
+    marker$ = combineLatest([this.fieldComponent.latLng$, this.fieldComponent.markerConfig$]).pipe(map(([latLng, markerConfig]) => {
+        return markerConfig !== false ? { latLng, ...markerConfig } : undefined;
+    }), shareReplay(1));
+    markerSignal = toSignal(this.marker$);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxForgeMapboxLatLngFieldMarkerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: DbxForgeMapboxLatLngFieldMarkerComponent, 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: "21.2.4", ngImport: i0, type: DbxForgeMapboxLatLngFieldMarkerComponent, decorators: [{
+            type: Component,
+            args: [{
+                    template: `
+    <dbx-mapbox-marker [marker]="markerSignal()"></dbx-mapbox-marker>
+  `,
+                    imports: [DbxMapboxMarkerComponent],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    standalone: true
+                }]
+        }] });
+
+const DEFAULT_DBX_FORGE_MAPBOX_LAT_LNG_FIELD_INJECTION_KEY = 'DbxForgeMapboxLatLngFieldComponent';
+const DEFAULT_DBX_FORGE_MAPBOX_LAT_LNG_MARKER_CONFIG = {
+    icon: 'pin_drop'
+};
+/**
+ * Forge custom field component for Mapbox latitude/longitude picking.
+ *
+ * This is the forge equivalent of {@link DbxFormMapboxLatLngFieldComponent}.
+ * It bridges ng-forge Signal Forms with the Mapbox map store.
+ *
+ * Registered as ng-forge type 'dbx-forge-mapbox-latlng'.
+ */
+class DbxForgeMapboxLatLngFieldComponent {
+    _geolocationService = inject(WaGeolocationService);
+    compact = inject(CompactContextStore, { optional: true });
+    dbxMapboxInjectionStore = inject(DbxMapboxInjectionStore, { optional: true });
+    dbxMapboxMapStore = inject(DbxMapboxMapStore);
+    elementRef = inject((ElementRef));
+    // Standard ng-forge value field inputs
+    field = input.required(...(ngDevMode ? [{ debugName: "field" }] : /* istanbul ignore next */ []));
+    key = input.required(...(ngDevMode ? [{ debugName: "key" }] : /* istanbul ignore next */ []));
+    label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : /* istanbul ignore next */ []));
+    placeholder = input(...(ngDevMode ? [undefined, { debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    className = input('', ...(ngDevMode ? [{ debugName: "className" }] : /* istanbul ignore next */ []));
+    tabIndex = input(...(ngDevMode ? [undefined, { debugName: "tabIndex" }] : /* istanbul ignore next */ []));
+    props = input(...(ngDevMode ? [undefined, { debugName: "props" }] : /* istanbul ignore next */ []));
+    meta = input(...(ngDevMode ? [undefined, { debugName: "meta" }] : /* istanbul ignore next */ []));
+    validationMessages = input(...(ngDevMode ? [undefined, { debugName: "validationMessages" }] : /* istanbul ignore next */ []));
+    defaultValidationMessages = input(...(ngDevMode ? [undefined, { debugName: "defaultValidationMessages" }] : /* istanbul ignore next */ []));
+    // Internal text form control for the coordinate input
+    textCtrl = new FormControl('');
+    // Subscription management
+    _sub = new SubscriptionObject();
+    _geoSub = new SubscriptionObject();
+    _centerSub = new SubscriptionObject();
+    _flyToCenterSub = new SubscriptionObject();
+    _clickSub = new SubscriptionObject();
+    _zoom = new BehaviorSubject(12);
+    _markerConfig = new BehaviorSubject(of(DEFAULT_DBX_FORGE_MAPBOX_LAT_LNG_MARKER_CONFIG));
+    // Reactive lat/lng conversion functions derived from props so latLng$ recomputes when props arrive.
+    latLngPointConfigSignal = computed(() => {
+        const p = this.props();
+        return { ...p?.latLngConfig, wrap: p?.latLngConfig?.wrap || false, validate: p?.latLngConfig?.validate || false, precisionRounding: p?.latLngConfig?.precisionRounding ?? 'round' };
+    }, ...(ngDevMode ? [{ debugName: "latLngPointConfigSignal" }] : /* istanbul ignore next */ []));
+    latLngPointFunctionSignal = computed(() => latLngPointFunction(this.latLngPointConfigSignal()), ...(ngDevMode ? [{ debugName: "latLngPointFunctionSignal" }] : /* istanbul ignore next */ []));
+    latLngStringFunctionSignal = computed(() => latLngStringFunction(this.latLngPointConfigSignal()), ...(ngDevMode ? [{ debugName: "latLngStringFunctionSignal" }] : /* istanbul ignore next */ []));
+    compactClass$ = mapCompactModeObs(this.compact?.mode$, {
+        compact: 'dbx-mapbox-input-field-compact'
+    }).pipe(filterMaybe());
+    _useCurrentLocationDisabled = new BehaviorSubject(false);
+    useCurrentLocationDisabled$ = this._useCurrentLocationDisabled.asObservable();
+    // Field value signal (double-call pattern)
+    fieldValue = computed(() => {
+        const state = this.field()?.();
+        return state?.value?.();
+    }, ...(ngDevMode ? [{ debugName: "fieldValue" }] : /* istanbul ignore next */ []));
+    isDisabled = computed(() => {
+        const state = this.field()?.();
+        return state?.disabled?.() ?? false;
+    }, ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
+    isReadonlyOrDisabledSignal = computed(() => this.props()?.readonly || this.isDisabled(), ...(ngDevMode ? [{ debugName: "isReadonlyOrDisabledSignal" }] : /* istanbul ignore next */ []));
+    // Computed props from field definition
+    showMapSignal = computed(() => this.props()?.showMap ?? true, ...(ngDevMode ? [{ debugName: "showMapSignal" }] : /* istanbul ignore next */ []));
+    selectLocationOnMapDragSignal = computed(() => this.props()?.selectLocationOnMapDrag ?? true, ...(ngDevMode ? [{ debugName: "selectLocationOnMapDragSignal" }] : /* istanbul ignore next */ []));
+    selectLocationOnMapClickSignal = computed(() => this.props()?.selectLocationOnMapClick ?? false, ...(ngDevMode ? [{ debugName: "selectLocationOnMapClickSignal" }] : /* istanbul ignore next */ []));
+    setCenterOnLocationSetSignal = computed(() => this.props()?.setCenterOnLocationSet ?? true, ...(ngDevMode ? [{ debugName: "setCenterOnLocationSetSignal" }] : /* istanbul ignore next */ []));
+    showCenterButtonSignal = computed(() => !this.selectLocationOnMapDragSignal() && this.props()?.showCenterButton !== false, ...(ngDevMode ? [{ debugName: "showCenterButtonSignal" }] : /* istanbul ignore next */ []));
+    recenterTimeSignal = computed(() => this.props()?.recenterTime || 10 * 1000, ...(ngDevMode ? [{ debugName: "recenterTimeSignal" }] : /* istanbul ignore next */ []));
+    placeholderTextSignal = computed(() => this.props()?.placeholder, ...(ngDevMode ? [{ debugName: "placeholderTextSignal" }] : /* istanbul ignore next */ []));
+    // Observables for map store sync
+    latLngValueSignal = computed(() => {
+        const value = this.fieldValue();
+        const fn = this.latLngPointFunctionSignal();
+        return value != null ? fn(value) : defaultLatLngPoint();
+    }, ...(ngDevMode ? [{ debugName: "latLngValueSignal" }] : /* istanbul ignore next */ []));
+    latLng$ = toObservable(this.latLngValueSignal).pipe(distinctUntilChanged(isSameLatLngPoint), shareReplay(1));
+    nonZeroLatLng$ = this.latLng$.pipe(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 = this.latLngValueSignal;
+    _syncing = false;
+    _setFieldValue(value) {
+        const state = this.field()?.();
+        if (state?.value?.set) {
+            state.value.set(value);
+            state.markAsTouched?.();
+            state.markAsDirty?.();
+        }
+    }
+    constructor() {
+        setupMetaTracking(this.elementRef, this.meta, { selector: 'input' });
+        // Initialize on first props emission
+        effect(() => {
+            const p = this.props();
+            if (!p) {
+                return;
+            }
+            const zoom = Math.min(p.zoom || 12, 18);
+            this._zoom.next(zoom);
+            if (p.setCenterOnLocationSet !== false) {
+                this._centerSub.subscription = this.dbxMapboxMapStore.setCenter(this.nonZeroLatLng$);
+            }
+            if (p.showMap ?? true) {
+                this.dbxMapboxMapStore.setZoom(this.zoom$);
+                const recenterTime = p.recenterTime || 10 * 1000;
+                if (recenterTime > 0) {
+                    this._flyToCenterSub.subscription = this.dbxMapboxMapStore.center$.pipe(skip(1), throttleTime(recenterTime, undefined, { leading: false, trailing: true })).subscribe(() => {
+                        this.flyToMarker();
+                    });
+                }
+            }
+            else {
+                if (p.selectLocationOnMapDrag ?? true) {
+                    this._sub.subscription = this.dbxMapboxMapStore.center$.subscribe((center) => {
+                        this.dbxMapboxMapStore.centerGivenMargin$.pipe(first()).subscribe(() => {
+                            if (!this.isReadonlyOrDisabledSignal()) {
+                                this.setValue(center);
+                            }
+                        });
+                    });
+                }
+                if (p.selectLocationOnMapClick) {
+                    this._clickSub.subscription = this.dbxMapboxMapStore.clickEvent$.subscribe((x) => {
+                        if (x?.type === 'click') {
+                            this.setValue(x.lngLat);
+                        }
+                    });
+                }
+            }
+            if (p.readonly) {
+                this.textCtrl.disable();
+            }
+            // Add the marker to the injection store for display
+            if (this.dbxMapboxInjectionStore) {
+                if (p.markerConfig != null) {
+                    this._markerConfig.next(p.markerConfig === false ? of(false) : asObservableFromGetter(p.markerConfig, this));
+                }
+                this.dbxMapboxInjectionStore.addInjectionConfig({
+                    key: p.mapInjectionKey || DEFAULT_DBX_FORGE_MAPBOX_LAT_LNG_FIELD_INJECTION_KEY,
+                    injectionConfig: {
+                        componentClass: DbxForgeMapboxLatLngFieldMarkerComponent,
+                        providers: [{ provide: DbxForgeMapboxLatLngFieldComponent, useValue: this }]
+                    }
+                });
+            }
+        });
+        // Sync field value → text control (inbound)
+        effect(() => {
+            const value = this.fieldValue();
+            if (!this._syncing) {
+                this._syncing = true;
+                this.textCtrl.setValue(value ?? '', { emitEvent: false });
+                this._syncing = false;
+            }
+        });
+        // Sync text control → field value (outbound)
+        this.textCtrl.valueChanges.subscribe((textValue) => {
+            if (!this._syncing) {
+                this._syncing = true;
+                this._setFieldValue(textValue || null);
+                this._syncing = false;
+            }
+        });
+    }
+    ngOnDestroy() {
+        this._zoom.complete();
+        this._markerConfig.complete();
+        this._useCurrentLocationDisabled.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._geolocationService.pipe(first()).subscribe({
+            next: (position) => {
+                if (position) {
+                    const { latitude: lat, longitude: lng } = position.coords;
+                    this.setValue({ lat, lng });
+                }
+            },
+            error: () => {
+                this._useCurrentLocationDisabled.next(true);
+            }
+        });
+    }
+    onMarkerDragEnd(marker) {
+        this.setValue(marker.getLngLat());
+    }
+    setValue(latLng) {
+        const stringValue = latLng ? this.latLngStringFunctionSignal()(latLng) : null;
+        this._syncing = true;
+        this.textCtrl.setValue(stringValue, { emitEvent: false });
+        this._setFieldValue(stringValue);
+        this._syncing = false;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxForgeMapboxLatLngFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: DbxForgeMapboxLatLngFieldComponent, isStandalone: true, selector: "dbx-forge-mapbox-latlng-field", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, key: { classPropertyName: "key", publicName: "key", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: true, isRequired: false, transformFunction: null }, props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null }, meta: { classPropertyName: "meta", publicName: "meta", isSignal: true, isRequired: false, transformFunction: null }, validationMessages: { classPropertyName: "validationMessages", publicName: "validationMessages", isSignal: true, isRequired: false, transformFunction: null }, defaultValidationMessages: { classPropertyName: "defaultValidationMessages", publicName: "defaultValidationMessages", isSignal: true, isRequired: false, transformFunction: null } }, providers: [provideMapboxStoreIfParentIsUnavailable()], ngImport: i0, template: `
+    <div class="dbx-mapbox-input-field" [ngClass]="compactClassSignal()">
+      @if (showMapSignal()) {
+        <div class="dbx-mapbox-input-field-map">
+          <mgl-map dbxMapboxMap>
+            <mgl-marker [lngLat]="latLngSignal()" [draggable]="!isReadonlyOrDisabledSignal()" (markerDragEnd)="onMarkerDragEnd($event)"></mgl-marker>
+          </mgl-map>
+        </div>
+      }
+      <div class="dbx-mapbox-input-field-input">
+        @if (showCenterButtonSignal()) {
+          <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]="placeholderTextSignal() ?? ''" [formControl]="textCtrl" />
+          @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: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MapComponent, selector: "mgl-map", inputs: ["accessToken", "collectResourceTiming", "crossSourceCollisions", "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"] }, { kind: "component", type: MarkerComponent, selector: "mgl-marker", inputs: ["offset", "anchor", "clickTolerance", "feature", "lngLat", "draggable", "popupShown", "className", "zIndex", "pitchAlignment", "rotationAlignment"], outputs: ["markerDragStart", "markerDragEnd", "markerDrag"] }, { 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.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], 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: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "ngmodule", type: MatInputModule }, { 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", "disabledInteractive"], exportAs: ["matInput"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxForgeMapboxLatLngFieldComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'dbx-forge-mapbox-latlng-field', template: `
+    <div class="dbx-mapbox-input-field" [ngClass]="compactClassSignal()">
+      @if (showMapSignal()) {
+        <div class="dbx-mapbox-input-field-map">
+          <mgl-map dbxMapboxMap>
+            <mgl-marker [lngLat]="latLngSignal()" [draggable]="!isReadonlyOrDisabledSignal()" (markerDragEnd)="onMarkerDragEnd($event)"></mgl-marker>
+          </mgl-map>
+        </div>
+      }
+      <div class="dbx-mapbox-input-field-input">
+        @if (showCenterButtonSignal()) {
+          <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]="placeholderTextSignal() ?? ''" [formControl]="textCtrl" />
+          @if (useCurrentLocationDisabledSignal()) {
+            <mat-hint class="dbx-hint dbx-warn">Could not access your current location.</mat-hint>
+          }
+        </mat-form-field>
+      </div>
+    </div>
+  `, providers: [provideMapboxStoreIfParentIsUnavailable()], imports: [NgClass, MapComponent, MarkerComponent, 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"] }]
+        }], ctorParameters: () => [], propDecorators: { field: [{ type: i0.Input, args: [{ isSignal: true, alias: "field", required: true }] }], key: [{ type: i0.Input, args: [{ isSignal: true, alias: "key", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], tabIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabIndex", required: false }] }], props: [{ type: i0.Input, args: [{ isSignal: true, alias: "props", required: false }] }], meta: [{ type: i0.Input, args: [{ isSignal: true, alias: "meta", required: false }] }], validationMessages: [{ type: i0.Input, args: [{ isSignal: true, alias: "validationMessages", required: false }] }], defaultValidationMessages: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultValidationMessages", required: false }] }] } });
+/**
+ * Custom mapper for the forge mapbox lat/lng field.
+ *
+ * @param fieldDef - Field definition configuration
+ * @param fieldDef.key - Form model key for the field
+ * @returns Signal containing a Record of input names to values for ngComponentOutlet
+ */
+function mapboxLatLngFieldMapper(fieldDef) {
+    const ctx = resolveValueFieldContext();
+    const defaultProps = inject(DEFAULT_PROPS);
+    const defaultValidationMessages = inject(DEFAULT_VALIDATION_MESSAGES);
+    return computed(() => {
+        return buildValueFieldInputs(fieldDef, ctx, defaultProps?.(), defaultValidationMessages?.());
+    });
+}
+
+var latlng_forge_field_component = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    DEFAULT_DBX_FORGE_MAPBOX_LAT_LNG_FIELD_INJECTION_KEY: DEFAULT_DBX_FORGE_MAPBOX_LAT_LNG_FIELD_INJECTION_KEY,
+    DEFAULT_DBX_FORGE_MAPBOX_LAT_LNG_MARKER_CONFIG: DEFAULT_DBX_FORGE_MAPBOX_LAT_LNG_MARKER_CONFIG,
+    DbxForgeMapboxLatLngFieldComponent: DbxForgeMapboxLatLngFieldComponent,
+    mapboxLatLngFieldMapper: mapboxLatLngFieldMapper
+});
+
 /**
  * Creates a Formly field configuration for a Mapbox-powered zoom level picker with optional map preview.
  *
+ * @deprecated Use dbxForgeMapboxZoomField() from the forge API instead.
  * @param config - Optional field configuration overrides
  * @returns A validated Formly field configuration for the Mapbox zoom picker
  */
@@ -380,6 +730,9 @@ function mapboxZoomField(config = {}) {
     return fieldConfig;
 }
 
+/**
+ * @deprecated Use DbxForgeMapboxZoomFieldComponent instead.
+ */
 class DbxFormMapboxZoomFieldComponent extends FieldType {
     compact = inject(CompactContextStore, { optional: true });
     dbxMapboxService = inject(DbxMapboxService);
@@ -472,8 +825,8 @@ class DbxFormMapboxZoomFieldComponent extends FieldType {
         this.formControl.markAsTouched();
         this.formControl.markAsDirty();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DbxFormMapboxZoomFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.3", type: DbxFormMapboxZoomFieldComponent, isStandalone: true, selector: "ng-component", providers: [provideMapboxStoreIfParentIsUnavailable()], usesInheritance: true, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxFormMapboxZoomFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", 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">
@@ -489,7 +842,7 @@ class DbxFormMapboxZoomFieldComponent extends FieldType {
     </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: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: DbxMapboxModule }, { kind: "directive", type: i3$1.DbxMapboxMapDirective, selector: "[dbxMapboxMap]" }, { kind: "component", type: i2$1.MapComponent, selector: "mgl-map", inputs: ["accessToken", "collectResourceTiming", "crossSourceCollisions", "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"] }, { 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],[formArray],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: i5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { 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", "disabledInteractive"], exportAs: ["matInput"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DbxFormMapboxZoomFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxFormMapboxZoomFieldComponent, decorators: [{
             type: Component,
             args: [{ template: `
     <div class="dbx-mapbox-input-field" [ngClass]="compactClassSignal()" [formGroup]="formGroup">
@@ -509,14 +862,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImpor
         }] });
 
 const importsAndExports = [DbxFormMapboxZoomFieldComponent];
+/**
+ * @deprecated Use provideDbxForgeMapboxFieldDeclarations() instead.
+ */
 class DbxFormMapboxZoomModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DbxFormMapboxZoomModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.3", ngImport: i0, type: DbxFormMapboxZoomModule, imports: [DbxFormMapboxZoomFieldComponent, i1.FormlyModule], exports: [DbxFormMapboxZoomFieldComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DbxFormMapboxZoomModule, imports: [importsAndExports, FormlyModule.forChild({
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxFormMapboxZoomModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.4", ngImport: i0, type: DbxFormMapboxZoomModule, imports: [DbxFormMapboxZoomFieldComponent, i1.FormlyModule], exports: [DbxFormMapboxZoomFieldComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxFormMapboxZoomModule, imports: [importsAndExports, FormlyModule.forChild({
                 types: [{ name: 'mapbox-zoom-picker', component: DbxFormMapboxZoomFieldComponent, wrappers: ['style', 'form-field'] }]
             })] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DbxFormMapboxZoomModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxFormMapboxZoomModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -529,21 +885,272 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImpor
                 }]
         }] });
 
+/**
+ * The custom forge field type name for the mapbox zoom field.
+ */
+const FORGE_MAPBOX_ZOOM_FIELD_TYPE = 'dbx-forge-mapbox-zoom';
+/**
+ * Creates a forge field definition for a Mapbox-powered zoom level picker.
+ *
+ * This is the forge equivalent of {@link mapboxZoomField}.
+ *
+ * @param config - Optional field configuration overrides
+ * @returns A validated forge field definition for the Mapbox zoom picker
+ */
+function dbxForgeMapboxZoomField(config = {}) {
+    const { key = 'zoom', label, description, required, readonly: isReadonly, showMap, center, minZoom, maxZoom, zoomStep } = config;
+    const props = filterFromPOJO({
+        label: label ?? 'Zoom',
+        description,
+        showMap,
+        center,
+        minZoom,
+        maxZoom,
+        zoomStep
+    });
+    return filterFromPOJO({
+        key,
+        type: FORGE_MAPBOX_ZOOM_FIELD_TYPE,
+        label: label ?? 'Zoom',
+        value: undefined,
+        required,
+        readonly: isReadonly,
+        props: Object.keys(props).length > 0 ? props : undefined
+    });
+}
+
+/**
+ * Forge custom field component for Mapbox zoom level picking.
+ *
+ * This is the forge equivalent of {@link DbxFormMapboxZoomFieldComponent}.
+ * It bridges ng-forge Signal Forms with the Mapbox map store.
+ *
+ * Registered as ng-forge type 'dbx-forge-mapbox-zoom'.
+ */
+class DbxForgeMapboxZoomFieldComponent {
+    compact = inject(CompactContextStore, { optional: true });
+    dbxMapboxService = inject(DbxMapboxService);
+    dbxMapboxMapStore = inject(DbxMapboxMapStore);
+    elementRef = inject((ElementRef));
+    // Standard ng-forge value field inputs
+    field = input.required(...(ngDevMode ? [{ debugName: "field" }] : /* istanbul ignore next */ []));
+    key = input.required(...(ngDevMode ? [{ debugName: "key" }] : /* istanbul ignore next */ []));
+    label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : /* istanbul ignore next */ []));
+    placeholder = input(...(ngDevMode ? [undefined, { debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    className = input('', ...(ngDevMode ? [{ debugName: "className" }] : /* istanbul ignore next */ []));
+    tabIndex = input(...(ngDevMode ? [undefined, { debugName: "tabIndex" }] : /* istanbul ignore next */ []));
+    props = input(...(ngDevMode ? [undefined, { debugName: "props" }] : /* istanbul ignore next */ []));
+    meta = input(...(ngDevMode ? [undefined, { debugName: "meta" }] : /* istanbul ignore next */ []));
+    validationMessages = input(...(ngDevMode ? [undefined, { debugName: "validationMessages" }] : /* istanbul ignore next */ []));
+    defaultValidationMessages = input(...(ngDevMode ? [undefined, { debugName: "defaultValidationMessages" }] : /* istanbul ignore next */ []));
+    // Internal number form control for the zoom input
+    numberCtrl = new FormControl(null);
+    placeholderText = '';
+    _undoZoomLimit = false;
+    compactClass$ = mapCompactModeObs(this.compact?.mode$, {
+        compact: 'dbx-mapbox-input-field-compact'
+    }).pipe(filterMaybe());
+    compactClassSignal = toSignal(this.compactClass$, { initialValue: '' });
+    // Subscription management
+    _sub = new SubscriptionObject();
+    _center = new BehaviorSubject(undefined);
+    // Field value signal (double-call pattern)
+    fieldValue = computed(() => {
+        const state = this.field()?.();
+        return state?.value?.();
+    }, ...(ngDevMode ? [{ debugName: "fieldValue" }] : /* istanbul ignore next */ []));
+    isDisabled = computed(() => {
+        const state = this.field()?.();
+        return state?.disabled?.() ?? false;
+    }, ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
+    isReadonlyOrDisabledSignal = computed(() => this.props()?.readonly || this.isDisabled(), ...(ngDevMode ? [{ debugName: "isReadonlyOrDisabledSignal" }] : /* istanbul ignore next */ []));
+    // Computed props
+    showMapSignal = computed(() => this.props()?.showMap ?? true, ...(ngDevMode ? [{ debugName: "showMapSignal" }] : /* istanbul ignore next */ []));
+    lockMapToZoomLevelsSignal = computed(() => this.props()?.lockMapToZoomLevels ?? false, ...(ngDevMode ? [{ debugName: "lockMapToZoomLevelsSignal" }] : /* istanbul ignore next */ []));
+    minZoomSignal = computed(() => mapboxZoomLevel(this.props()?.minZoom || MAPBOX_MIN_ZOOM_LEVEL), ...(ngDevMode ? [{ debugName: "minZoomSignal" }] : /* istanbul ignore next */ []));
+    maxZoomSignal = computed(() => mapboxZoomLevel(this.props()?.maxZoom || MAPBOX_MAX_ZOOM_LEVEL), ...(ngDevMode ? [{ debugName: "maxZoomSignal" }] : /* istanbul ignore next */ []));
+    zoomStepSignal = computed(() => mapboxZoomLevel(this.props()?.zoomStep || 1), ...(ngDevMode ? [{ debugName: "zoomStepSignal" }] : /* istanbul ignore next */ []));
+    fieldValue$ = toObservable(this.fieldValue);
+    zoom$ = this.fieldValue$.pipe(filterMaybe(), shareReplay(1));
+    center$ = this._center.pipe(filterMaybe());
+    _syncing = false;
+    _setFieldValue(value) {
+        const state = this.field()?.();
+        if (state?.value?.set) {
+            state.value.set(value);
+            state.markAsTouched?.();
+            state.markAsDirty?.();
+        }
+    }
+    constructor() {
+        setupMetaTracking(this.elementRef, this.meta, { selector: 'input' });
+        // Initialize on first props emission
+        effect(() => {
+            const p = this.props();
+            if (!p) {
+                return;
+            }
+            const center = p.center || latLngPoint(this.dbxMapboxService.defaultCenter);
+            this._center.next(center);
+            this.dbxMapboxMapStore.setZoom(this.zoom$);
+            if (p.showMap ?? true) {
+                this.dbxMapboxMapStore.setCenter(this.center$);
+            }
+            if (p?.readonly) {
+                this.numberCtrl.disable();
+                if (p.showMap ?? true) {
+                    this.dbxMapboxMapStore.setZoomDisabled();
+                }
+            }
+            else if (p.lockMapToZoomLevels) {
+                const min = mapboxZoomLevel(p.minZoom || MAPBOX_MIN_ZOOM_LEVEL);
+                const max = mapboxZoomLevel(p.maxZoom || MAPBOX_MAX_ZOOM_LEVEL);
+                this.dbxMapboxMapStore.setZoomRange({ min, max });
+                this._undoZoomLimit = !(p.showMap ?? true);
+            }
+            this._sub.subscription = this.dbxMapboxMapStore.zoom$.subscribe((zoom) => {
+                if (!this.isReadonlyOrDisabledSignal()) {
+                    this.setZoomValue(zoom);
+                }
+            });
+        });
+        // Sync field value → number control (inbound)
+        effect(() => {
+            const value = this.fieldValue();
+            if (!this._syncing) {
+                this._syncing = true;
+                this.numberCtrl.setValue(value ?? null, { emitEvent: false });
+                this._syncing = false;
+            }
+        });
+        // Sync number control → field value (outbound)
+        this.numberCtrl.valueChanges.subscribe((numValue) => {
+            if (!this._syncing) {
+                this._syncing = true;
+                this._setFieldValue(numValue ?? null);
+                this._syncing = false;
+            }
+        });
+    }
+    ngOnDestroy() {
+        this._center.complete();
+        this._sub.destroy();
+        if (!this._undoZoomLimit) {
+            this.dbxMapboxMapStore.setZoomRange({});
+        }
+    }
+    setZoomValue(zoom) {
+        this._syncing = true;
+        this.numberCtrl.setValue(zoom ?? null, { emitEvent: false });
+        this._setFieldValue(zoom ?? null);
+        this._syncing = false;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxForgeMapboxZoomFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: DbxForgeMapboxZoomFieldComponent, isStandalone: true, selector: "dbx-forge-mapbox-zoom-field", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, key: { classPropertyName: "key", publicName: "key", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: true, isRequired: false, transformFunction: null }, props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null }, meta: { classPropertyName: "meta", publicName: "meta", isSignal: true, isRequired: false, transformFunction: null }, validationMessages: { classPropertyName: "validationMessages", publicName: "validationMessages", isSignal: true, isRequired: false, transformFunction: null }, defaultValidationMessages: { classPropertyName: "defaultValidationMessages", publicName: "defaultValidationMessages", isSignal: true, isRequired: false, transformFunction: null } }, providers: [provideMapboxStoreIfParentIsUnavailable()], ngImport: i0, template: `
+    <div class="dbx-mapbox-input-field" [ngClass]="compactClassSignal()">
+      @if (showMapSignal()) {
+        <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>
+          <input type="number" matInput [min]="minZoomSignal()" [max]="maxZoomSignal()" [step]="zoomStepSignal()" [placeholder]="placeholderText" [formControl]="numberCtrl" />
+        </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: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: DbxMapboxModule }, { kind: "directive", type: i3$1.DbxMapboxMapDirective, selector: "[dbxMapboxMap]" }, { kind: "component", type: i2$1.MapComponent, selector: "mgl-map", inputs: ["accessToken", "collectResourceTiming", "crossSourceCollisions", "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"] }, { 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.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.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: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { 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", "disabledInteractive"], exportAs: ["matInput"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxForgeMapboxZoomFieldComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'dbx-forge-mapbox-zoom-field', template: `
+    <div class="dbx-mapbox-input-field" [ngClass]="compactClassSignal()">
+      @if (showMapSignal()) {
+        <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>
+          <input type="number" matInput [min]="minZoomSignal()" [max]="maxZoomSignal()" [step]="zoomStepSignal()" [placeholder]="placeholderText" [formControl]="numberCtrl" />
+        </mat-form-field>
+      </div>
+    </div>
+  `, providers: [provideMapboxStoreIfParentIsUnavailable()], imports: [NgClass, DbxMapboxModule, 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"] }]
+        }], ctorParameters: () => [], propDecorators: { field: [{ type: i0.Input, args: [{ isSignal: true, alias: "field", required: true }] }], key: [{ type: i0.Input, args: [{ isSignal: true, alias: "key", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], tabIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabIndex", required: false }] }], props: [{ type: i0.Input, args: [{ isSignal: true, alias: "props", required: false }] }], meta: [{ type: i0.Input, args: [{ isSignal: true, alias: "meta", required: false }] }], validationMessages: [{ type: i0.Input, args: [{ isSignal: true, alias: "validationMessages", required: false }] }], defaultValidationMessages: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultValidationMessages", required: false }] }] } });
+/**
+ * Custom mapper for the forge mapbox zoom field.
+ *
+ * @param fieldDef - Field definition configuration
+ * @param fieldDef.key - Form model key for the field
+ * @returns Signal containing a Record of input names to values for ngComponentOutlet
+ */
+function mapboxZoomFieldMapper(fieldDef) {
+    const ctx = resolveValueFieldContext();
+    const defaultProps = inject(DEFAULT_PROPS);
+    const defaultValidationMessages = inject(DEFAULT_VALIDATION_MESSAGES);
+    return computed(() => {
+        return buildValueFieldInputs(fieldDef, ctx, defaultProps?.(), defaultValidationMessages?.());
+    });
+}
+
+var zoom_forge_field_component = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    DbxForgeMapboxZoomFieldComponent: DbxForgeMapboxZoomFieldComponent,
+    mapboxZoomFieldMapper: mapboxZoomFieldMapper
+});
+
+/**
+ * @deprecated Use provideDbxForgeMapboxFieldDeclarations() instead.
+ */
 class DbxFormMapboxModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DbxFormMapboxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.3", ngImport: i0, type: DbxFormMapboxModule, exports: [DbxFormMapboxLatLngModule, DbxFormMapboxZoomModule] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DbxFormMapboxModule, imports: [DbxFormMapboxLatLngModule, DbxFormMapboxZoomModule] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxFormMapboxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.4", ngImport: i0, type: DbxFormMapboxModule, exports: [DbxFormMapboxLatLngModule, DbxFormMapboxZoomModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxFormMapboxModule, imports: [DbxFormMapboxLatLngModule, DbxFormMapboxZoomModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DbxFormMapboxModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxFormMapboxModule, decorators: [{
             type: NgModule,
             args: [{
                     exports: [DbxFormMapboxLatLngModule, DbxFormMapboxZoomModule]
                 }]
         }] });
 
+/**
+ * Forge mapbox lat/lng field type definition.
+ */
+const DbxForgeMapboxLatLngFieldType = {
+    name: FORGE_MAPBOX_LATLNG_FIELD_TYPE,
+    loadComponent: () => Promise.resolve().then(function () { return latlng_forge_field_component; }).then((m) => m.DbxForgeMapboxLatLngFieldComponent),
+    mapper: mapboxLatLngFieldMapper
+};
+/**
+ * Forge mapbox zoom field type definition.
+ */
+const DbxForgeMapboxZoomFieldType = {
+    name: FORGE_MAPBOX_ZOOM_FIELD_TYPE,
+    loadComponent: () => Promise.resolve().then(function () { return zoom_forge_field_component; }).then((m) => m.DbxForgeMapboxZoomFieldComponent),
+    mapper: mapboxZoomFieldMapper
+};
+/**
+ * All custom dbx-form/mapbox forge field type definitions.
+ */
+const DBX_FORGE_MAPBOX_FIELD_TYPES = [DbxForgeMapboxLatLngFieldType, DbxForgeMapboxZoomFieldType];
+/**
+ * Registers ng-forge dynamic form field declarations for the mapbox package.
+ *
+ * Add this to your app's providers alongside provideDbxForgeFormFieldDeclarations().
+ *
+ * @returns An array of providers that register the mapbox forge field types with ng-forge
+ */
+function provideDbxForgeMapboxFieldDeclarations() {
+    return provideDynamicForm(...DBX_FORGE_MAPBOX_FIELD_TYPES);
+}
+
 /**
  * Generated bundle index. Do not edit.
  */
 
-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 };
+export { DBX_FORGE_MAPBOX_FIELD_TYPES, DEFAULT_DBX_FORGE_MAPBOX_LAT_LNG_FIELD_INJECTION_KEY, DEFAULT_DBX_FORGE_MAPBOX_LAT_LNG_MARKER_CONFIG, DEFAULT_DBX_FORM_MAPBOX_LAT_LNG_FIELD_INJECTION_KEY, DEFAULT_DBX_FORM_MAPBOX_LAT_LNG_MARKER_CONFIG, DbxForgeMapboxLatLngFieldComponent, DbxForgeMapboxLatLngFieldMarkerComponent, DbxForgeMapboxZoomFieldComponent, DbxFormMapboxLatLngFieldComponent, DbxFormMapboxLatLngFieldMarkerComponent, DbxFormMapboxLatLngModule, DbxFormMapboxModule, DbxFormMapboxZoomFieldComponent, DbxFormMapboxZoomModule, FORGE_MAPBOX_LATLNG_FIELD_TYPE, FORGE_MAPBOX_ZOOM_FIELD_TYPE, dbxForgeMapboxLatLngField, dbxForgeMapboxZoomField, mapboxLatLngField, mapboxLatLngFieldMapper, mapboxZoomField, mapboxZoomFieldMapper, provideDbxForgeMapboxFieldDeclarations };
 //# sourceMappingURL=dereekb-dbx-form-mapbox.mjs.map