@dereekb/dbx-form 13.8.0 → 13.10.0

package/fesm2022/dereekb-dbx-form-flex.wrapper.component-CpOHCk87.mjs

@@ -0,0 +1,39 @@
+import * as i0 from '@angular/core';
+import { viewChild, ViewContainerRef, input, ChangeDetectionStrategy, Component } from '@angular/core';
+import { DbxFlexGroupDirective } from '@dereekb/dbx-web';
+
+/**
+ * Forge wrapper component that arranges child fields in a responsive flex layout
+ * using the `dbxFlexGroup` directive.
+ *
+ * Registered as forge wrapper `'dbx-forge-flex'`.
+ */
+class DbxForgeFlexWrapperComponent {
+    fieldComponent = viewChild.required('fieldComponent', { read: ViewContainerRef });
+    breakpoint = input(...(ngDevMode ? [undefined, { debugName: "breakpoint" }] : /* istanbul ignore next */ []));
+    relative = input(false, ...(ngDevMode ? [{ debugName: "relative" }] : /* istanbul ignore next */ []));
+    breakToColumn = input(false, ...(ngDevMode ? [{ debugName: "breakToColumn" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxForgeFlexWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.4", type: DbxForgeFlexWrapperComponent, isStandalone: true, selector: "dbx-forge-flex-wrapper", inputs: { breakpoint: { classPropertyName: "breakpoint", publicName: "breakpoint", isSignal: true, isRequired: false, transformFunction: null }, relative: { classPropertyName: "relative", publicName: "relative", isSignal: true, isRequired: false, transformFunction: null }, breakToColumn: { classPropertyName: "breakToColumn", publicName: "breakToColumn", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "fieldComponent", first: true, predicate: ["fieldComponent"], descendants: true, read: ViewContainerRef, isSignal: true }], ngImport: i0, template: `
+    <div class="dbx-form-flex-section" dbxFlexGroup [content]="false" [relative]="relative()" [breakpoint]="breakpoint()" [breakToColumn]="breakToColumn()">
+      <ng-container #fieldComponent></ng-container>
+    </div>
+  `, isInline: true, dependencies: [{ kind: "directive", type: DbxFlexGroupDirective, selector: "[dbxFlexGroup]", inputs: ["content", "breakToColumn", "relative", "breakpoint"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxForgeFlexWrapperComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'dbx-forge-flex-wrapper',
+                    template: `
+    <div class="dbx-form-flex-section" dbxFlexGroup [content]="false" [relative]="relative()" [breakpoint]="breakpoint()" [breakToColumn]="breakToColumn()">
+      <ng-container #fieldComponent></ng-container>
+    </div>
+  `,
+                    imports: [DbxFlexGroupDirective],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    standalone: true
+                }]
+        }], propDecorators: { fieldComponent: [{ type: i0.ViewChild, args: ['fieldComponent', { ...{ read: ViewContainerRef }, isSignal: true }] }], breakpoint: [{ type: i0.Input, args: [{ isSignal: true, alias: "breakpoint", required: false }] }], relative: [{ type: i0.Input, args: [{ isSignal: true, alias: "relative", required: false }] }], breakToColumn: [{ type: i0.Input, args: [{ isSignal: true, alias: "breakToColumn", required: false }] }] } });
+
+export { DbxForgeFlexWrapperComponent };
+//# sourceMappingURL=dereekb-dbx-form-flex.wrapper.component-CpOHCk87.mjs.map

package/fesm2022/dereekb-dbx-form-flex.wrapper.component-CpOHCk87.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"dereekb-dbx-form-flex.wrapper.component-CpOHCk87.mjs","sources":["../../../../packages/dbx-form/src/lib/forge/field/wrapper/flex/flex.wrapper.component.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, input, viewChild, ViewContainerRef } from '@angular/core';\nimport { DbxFlexGroupDirective, type ScreenMediaWidthType } from '@dereekb/dbx-web';\nimport { type FieldWrapperContract } from '@ng-forge/dynamic-forms';\n\n/**\n * Forge wrapper component that arranges child fields in a responsive flex layout\n * using the `dbxFlexGroup` directive.\n *\n * Registered as forge wrapper `'dbx-forge-flex'`.\n */\n@Component({\n  selector: 'dbx-forge-flex-wrapper',\n  template: `\n    <div class=\"dbx-form-flex-section\" dbxFlexGroup [content]=\"false\" [relative]=\"relative()\" [breakpoint]=\"breakpoint()\" [breakToColumn]=\"breakToColumn()\">\n      <ng-container #fieldComponent></ng-container>\n    </div>\n  `,\n  imports: [DbxFlexGroupDirective],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  standalone: true\n})\nexport class DbxForgeFlexWrapperComponent implements FieldWrapperContract {\n  readonly fieldComponent = viewChild.required('fieldComponent', { read: ViewContainerRef });\n\n  readonly breakpoint = input<ScreenMediaWidthType | undefined>();\n  readonly relative = input<boolean>(false);\n  readonly breakToColumn = input<boolean>(false);\n}\n"],"names":[],"mappings":"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"}

package/fesm2022/dereekb-dbx-form-info.wrapper.component-18n632L-.mjs

@@ -0,0 +1,61 @@
+import * as i0 from '@angular/core';
+import { viewChild, ViewContainerRef, input, computed, ChangeDetectionStrategy, Component } from '@angular/core';
+import { MatIconButton } from '@angular/material/button';
+import * as i1 from '@angular/material/icon';
+import { MatIconModule } from '@angular/material/icon';
+
+/**
+ * Forge wrapper component that renders child fields inside a flex layout
+ * with an info icon button beside them.
+ *
+ * Implements {@link FieldWrapperContract} and receives configuration
+ * via component inputs.
+ */
+class DbxForgeInfoWrapperComponent {
+    fieldComponent = viewChild.required('fieldComponent', { read: ViewContainerRef });
+    onInfoClick = input(...(ngDevMode ? [undefined, { debugName: "onInfoClick" }] : /* istanbul ignore next */ []));
+    ariaLabel = input(...(ngDevMode ? [undefined, { debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    ariaLabelValue = computed(() => {
+        return this.ariaLabel() ?? 'More information';
+    }, ...(ngDevMode ? [{ debugName: "ariaLabelValue" }] : /* istanbul ignore next */ []));
+    onClick() {
+        this.onInfoClick()?.();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxForgeInfoWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.4", type: DbxForgeInfoWrapperComponent, isStandalone: true, selector: "dbx-forge-info-wrapper", inputs: { onInfoClick: { classPropertyName: "onInfoClick", publicName: "onInfoClick", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "fieldComponent", first: true, predicate: ["fieldComponent"], descendants: true, read: ViewContainerRef, isSignal: true }], ngImport: i0, template: `
+    <div class="dbx-form-info-wrapper dbx-flex-bar">
+      <div class="dbx-form-info-wrapper-content dbx-flex-grow">
+        <ng-container #fieldComponent></ng-container>
+      </div>
+      <div class="dbx-form-info-wrapper-info dbx-flex-noshrink dbx-flex-column dbx-flex-center">
+        <button mat-icon-button type="button" (click)="onClick()" [attr.aria-label]="ariaLabelValue()">
+          <mat-icon>info</mat-icon>
+        </button>
+      </div>
+    </div>
+  `, isInline: true, dependencies: [{ kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxForgeInfoWrapperComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'dbx-forge-info-wrapper',
+                    template: `
+    <div class="dbx-form-info-wrapper dbx-flex-bar">
+      <div class="dbx-form-info-wrapper-content dbx-flex-grow">
+        <ng-container #fieldComponent></ng-container>
+      </div>
+      <div class="dbx-form-info-wrapper-info dbx-flex-noshrink dbx-flex-column dbx-flex-center">
+        <button mat-icon-button type="button" (click)="onClick()" [attr.aria-label]="ariaLabelValue()">
+          <mat-icon>info</mat-icon>
+        </button>
+      </div>
+    </div>
+  `,
+                    imports: [MatIconButton, MatIconModule],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    standalone: true
+                }]
+        }], propDecorators: { fieldComponent: [{ type: i0.ViewChild, args: ['fieldComponent', { ...{ read: ViewContainerRef }, isSignal: true }] }], onInfoClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "onInfoClick", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }] } });
+
+export { DbxForgeInfoWrapperComponent };
+//# sourceMappingURL=dereekb-dbx-form-info.wrapper.component-18n632L-.mjs.map

package/fesm2022/dereekb-dbx-form-info.wrapper.component-18n632L-.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"dereekb-dbx-form-info.wrapper.component-18n632L-.mjs","sources":["../../../../packages/dbx-form/src/lib/forge/field/wrapper/info/info.wrapper.component.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, computed, input, viewChild, ViewContainerRef } from '@angular/core';\nimport { MatIconButton } from '@angular/material/button';\nimport { MatIconModule } from '@angular/material/icon';\nimport { type FieldWrapperContract } from '@ng-forge/dynamic-forms';\n\n/**\n * Forge wrapper component that renders child fields inside a flex layout\n * with an info icon button beside them.\n *\n * Implements {@link FieldWrapperContract} and receives configuration\n * via component inputs.\n */\n@Component({\n  selector: 'dbx-forge-info-wrapper',\n  template: `\n    <div class=\"dbx-form-info-wrapper dbx-flex-bar\">\n      <div class=\"dbx-form-info-wrapper-content dbx-flex-grow\">\n        <ng-container #fieldComponent></ng-container>\n      </div>\n      <div class=\"dbx-form-info-wrapper-info dbx-flex-noshrink dbx-flex-column dbx-flex-center\">\n        <button mat-icon-button type=\"button\" (click)=\"onClick()\" [attr.aria-label]=\"ariaLabelValue()\">\n          <mat-icon>info</mat-icon>\n        </button>\n      </div>\n    </div>\n  `,\n  imports: [MatIconButton, MatIconModule],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  standalone: true\n})\nexport class DbxForgeInfoWrapperComponent implements FieldWrapperContract {\n  readonly fieldComponent = viewChild.required('fieldComponent', { read: ViewContainerRef });\n\n  readonly onInfoClick = input<() => void>();\n  readonly ariaLabel = input<string>();\n\n  readonly ariaLabelValue = computed(() => {\n    return this.ariaLabel() ?? 'More information';\n  });\n\n  onClick(): void {\n    this.onInfoClick()?.();\n  }\n}\n"],"names":[],"mappings":"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"}

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

@@ -4,7 +4,7 @@ import * as i3 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, input, computed, effect } 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';
@@ -26,12 +26,12 @@ 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 { resolveValueFieldContext, buildValueFieldInputs } from '@ng-forge/dynamic-forms/integration';
+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 forgeMapboxLatLngField() from the forge API instead.
+ * @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
  */
@@ -368,7 +368,7 @@ const FORGE_MAPBOX_LATLNG_FIELD_TYPE = 'dbx-forge-mapbox-latlng';
  * @param config - Optional field configuration overrides
  * @returns A validated forge field definition for the Mapbox lat/lng picker
  */
-function forgeMapboxLatLngField(config = {}) {
+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',
@@ -437,6 +437,7 @@ class DbxForgeMapboxLatLngFieldComponent {
     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 */ []));
@@ -458,8 +459,13 @@ class DbxForgeMapboxLatLngFieldComponent {
     _clickSub = new SubscriptionObject();
     _zoom = new BehaviorSubject(12);
     _markerConfig = new BehaviorSubject(of(DEFAULT_DBX_FORGE_MAPBOX_LAT_LNG_MARKER_CONFIG));
-    _latLngStringFunction;
-    _latLngPointFunction;
+    // 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());
@@ -484,14 +490,18 @@ class DbxForgeMapboxLatLngFieldComponent {
     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
-    fieldValue$ = toObservable(this.fieldValue);
-    latLng$ = this.fieldValue$.pipe(filterMaybe(), map((x) => this._latLngPointFunction?.(x) ?? defaultLatLngPoint()), distinctUntilChanged(isSameLatLngPoint), shareReplay(1));
+    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 = toSignal(this.latLng$, { initialValue: defaultLatLngPoint() });
+    latLngSignal = this.latLngValueSignal;
     _syncing = false;
     _setFieldValue(value) {
         const state = this.field()?.();
@@ -502,15 +512,13 @@ class DbxForgeMapboxLatLngFieldComponent {
         }
     }
     constructor() {
+        setupMetaTracking(this.elementRef, this.meta, { selector: 'input' });
         // Initialize on first props emission
         effect(() => {
             const p = this.props();
             if (!p) {
                 return;
             }
-            const latLngPointConfig = { ...p.latLngConfig, wrap: p.latLngConfig?.wrap || false, validate: p.latLngConfig?.validate || false, precisionRounding: p.latLngConfig?.precisionRounding ?? 'round' };
-            this._latLngStringFunction = latLngStringFunction(latLngPointConfig);
-            this._latLngPointFunction = latLngPointFunction(latLngPointConfig);
             const zoom = Math.min(p.zoom || 12, 18);
             this._zoom.next(zoom);
             if (p.setCenterOnLocationSet !== false) {
@@ -608,7 +616,7 @@ class DbxForgeMapboxLatLngFieldComponent {
         this.setValue(marker.getLngLat());
     }
     setValue(latLng) {
-        const stringValue = latLng ? this._latLngStringFunction(latLng) : null;
+        const stringValue = latLng ? this.latLngStringFunctionSignal()(latLng) : null;
         this._syncing = true;
         this.textCtrl.setValue(stringValue, { emitEvent: false });
         this._setFieldValue(stringValue);
@@ -696,7 +704,7 @@ var latlng_forge_field_component = /*#__PURE__*/Object.freeze({
 /**
  * Creates a Formly field configuration for a Mapbox-powered zoom level picker with optional map preview.
  *
- * @deprecated Use forgeMapboxZoomField() from the forge API instead.
+ * @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
  */
@@ -889,7 +897,7 @@ const FORGE_MAPBOX_ZOOM_FIELD_TYPE = 'dbx-forge-mapbox-zoom';
  * @param config - Optional field configuration overrides
  * @returns A validated forge field definition for the Mapbox zoom picker
  */
-function forgeMapboxZoomField(config = {}) {
+function dbxForgeMapboxZoomField(config = {}) {
     const { key = 'zoom', label, description, required, readonly: isReadonly, showMap, center, minZoom, maxZoom, zoomStep } = config;
     const props = filterFromPOJO({
         label: label ?? 'Zoom',
@@ -923,6 +931,7 @@ 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 */ []));
@@ -974,6 +983,7 @@ class DbxForgeMapboxZoomFieldComponent {
         }
     }
     constructor() {
+        setupMetaTracking(this.elementRef, this.meta, { selector: 'input' });
         // Initialize on first props emission
         effect(() => {
             const p = this.props();
@@ -1142,5 +1152,5 @@ function provideDbxForgeMapboxFieldDeclarations() {
  * Generated bundle index. Do not edit.
  */
 
-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, forgeMapboxLatLngField, forgeMapboxZoomField, mapboxLatLngField, mapboxLatLngFieldMapper, mapboxZoomField, mapboxZoomFieldMapper, provideDbxForgeMapboxFieldDeclarations };
+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