@dereekb/dbx-form 9.1.2 → 9.2.0

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

@@ -0,0 +1,214 @@
+import { formlyField, propsForFieldConfig, DEFAULT_LAT_LNG_TEXT_FIELD_PLACEHOLDER, validatorsForFieldConfig, DEFAULT_LAT_LNG_TEXT_FIELD_PATTERN_MESSAGE, styleWrapper } from '@dereekb/dbx-form';
+import { LAT_LNG_PATTERN, latLngPoint, latLngStringFunction } from '@dereekb/util';
+import * as i1 from '@dereekb/dbx-web';
+import { mapCompactModeObs, DbxTextModule } from '@dereekb/dbx-web';
+import * as i0 from '@angular/core';
+import { Component, Optional, NgModule } from '@angular/core';
+import { FieldType } from '@ngx-formly/material';
+import { BehaviorSubject, switchMap, startWith, shareReplay, map, filter, first } from 'rxjs';
+import { SubscriptionObject, filterMaybe } from '@dereekb/rxjs';
+import * as i2 from '@ng-web-apis/geolocation';
+import * as i3 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i4 from '@angular/material/icon';
+import { MatIconModule } from '@angular/material/icon';
+import * as i5 from '@angular/material/button';
+import { MatButtonModule } from '@angular/material/button';
+import * as i6 from '@angular/forms';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import * as i7 from '@angular/material/form-field';
+import * as i8 from '@angular/material/input';
+import { MatInputModule } from '@angular/material/input';
+import * as i9 from 'ngx-mapbox-gl';
+import { NgxMapboxGLModule } from 'ngx-mapbox-gl';
+import * as i1$1 from '@ngx-formly/core';
+import { FormlyModule } from '@ngx-formly/core';
+
+function mapboxLatLngField(config = {}) {
+    var _a;
+    const { key = 'latLng' } = config;
+    const fieldConfig = Object.assign(Object.assign({}, formlyField(Object.assign({ key, type: 'mapbox-latlng-picker' }, propsForFieldConfig(config, {
+        label: (_a = config.label) !== null && _a !== void 0 ? _a : 'Location Picker',
+        placeholder: DEFAULT_LAT_LNG_TEXT_FIELD_PLACEHOLDER,
+        pattern: LAT_LNG_PATTERN,
+        autocomplete: false
+    })))), validatorsForFieldConfig({
+        messages: {
+            pattern: DEFAULT_LAT_LNG_TEXT_FIELD_PATTERN_MESSAGE
+        }
+    }));
+    return styleWrapper(fieldConfig, {
+        classGetter: 'dbx-mat-form-field-disable-underline'
+    });
+}
+
+class DbxFormMapboxLatLngFieldComponent extends FieldType {
+    constructor(compact, geolocation$) {
+        var _a;
+        super();
+        this.compact = compact;
+        this.geolocation$ = geolocation$;
+        this.compactClass$ = mapCompactModeObs((_a = this.compact) === null || _a === void 0 ? void 0 : _a.mode$, {
+            compact: 'dbx-texteditor-field-compact'
+        });
+        this._sub = new SubscriptionObject();
+        this._zoom = new BehaviorSubject([12]);
+        this._formControlObs = new BehaviorSubject(undefined);
+        this.formControl$ = this._formControlObs.pipe(filterMaybe());
+        this.value$ = this.formControl$.pipe(switchMap((control) => control.valueChanges.pipe(startWith(control.value))), shareReplay(1));
+        this.latLng$ = this.value$.pipe(filterMaybe(), map((x) => latLngPoint(x)), filter((x) => x.lat !== 0 && x.lng !== 0), shareReplay(1));
+        this.center$ = this.latLng$;
+        this.zoom$ = this._zoom.asObservable();
+    }
+    get zoom() {
+        return [Math.min(this.field.props.zoom || 12, 18)];
+    }
+    get formGroupName() {
+        return this.field.key;
+    }
+    get formGroup() {
+        return this.form;
+    }
+    get label() {
+        var _a;
+        return (_a = this.field.props) === null || _a === void 0 ? void 0 : _a.label;
+    }
+    get description() {
+        return this.props.description;
+    }
+    get isReadonlyOrDisabled() {
+        return this.props.readonly || this.disabled;
+    }
+    ngOnInit() {
+        this._latLngStringFunction = latLngStringFunction(this.field.props.latLngConfig);
+        this._formControlObs.next(this.formControl);
+        this._zoom.next(this.zoom);
+        if (this.props.readonly) {
+            this.formControl.disable();
+        }
+    }
+    ngOnDestroy() {
+        super.ngOnDestroy();
+        this._formControlObs.complete();
+        this._zoom.complete();
+        this._sub.destroy();
+    }
+    useCurrentLocation() {
+        this._sub.subscription = this.geolocation$.pipe(first()).subscribe((position) => {
+            if (position) {
+                const { latitude: lat, longitude: lng } = position.coords;
+                this.setValue({ lat, lng });
+            }
+        });
+    }
+    onDragEnd(marker) {
+        this.setValue(marker.getLngLat());
+    }
+    setValue(latLng) {
+        this.formControl.setValue(latLng ? this._latLngStringFunction(latLng) : latLng);
+    }
+}
+DbxFormMapboxLatLngFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: DbxFormMapboxLatLngFieldComponent, deps: [{ token: i1.CompactContextStore, optional: true }, { token: i2.GeolocationService }], target: i0.ɵɵFactoryTarget.Component });
+DbxFormMapboxLatLngFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.2", type: DbxFormMapboxLatLngFieldComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
+    <div class="dbx-mapbox-latlng-field" [ngClass]="(compactClass$ | async) ?? ''" [formGroup]="formGroup">
+      <div class="dbx-mapbox-latlng-field-map">
+        <mgl-map [style]="'mapbox://styles/mapbox/streets-v9'" [zoom]="(zoom$ | async) || [8]" [center]="(center$ | async) || [0, 0]">
+          <mgl-marker [lngLat]="(latLng$ | async) || [0, 0]" [draggable]="!isReadonlyOrDisabled" (markerDragEnd)="onDragEnd($event)"></mgl-marker>
+        </mgl-map>
+      </div>
+      <div class="dbx-mapbox-latlng-field-input">
+        <button mat-icon-button (click)="useCurrentLocation()" [disabled]="isReadonlyOrDisabled">
+          <mat-icon>my_location</mat-icon>
+        </button>
+        <mat-form-field class="dbx-mapbox-latlng-field-input-field">
+          <mat-label>Coordinates</mat-label>
+          <input type="text" matInput [placeholder]="placeholder" [formControl]="formControl" />
+        </mat-form-field>
+      </div>
+    </div>
+  `, isInline: true, styles: [".dbx-mapbox-latlng-field .dbx-mapbox-latlng-field-map{height:220px;width:100%}.dbx-mapbox-latlng-field .dbx-mapbox-latlng-field-map mgl-map{height:100%;width:100%}.dbx-mapbox-latlng-field .dbx-mapbox-latlng-field-input{display:flex;align-items:center}.dbx-mapbox-latlng-field .dbx-mapbox-latlng-field-input .dbx-mapbox-latlng-field-input-field{width:calc(100% - 40px)}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i6.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: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i6.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i6.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i7.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i7.MatLabel, selector: "mat-label" }, { kind: "directive", type: i8.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i9.MapComponent, selector: "mgl-map", inputs: ["accessToken", "collectResourceTiming", "crossSourceCollisions", "customMapboxApiUrl", "fadeDuration", "hash", "refreshExpiredTiles", "failIfMajorPerformanceCaveat", "bearingSnap", "interactive", "pitchWithRotate", "clickTolerance", "attributionControl", "logoPosition", "maxTileCacheSize", "localIdeographFontFamily", "preserveDrawingBuffer", "trackResize", "transformRequest", "bounds", "antialias", "locale", "minZoom", "maxZoom", "minPitch", "maxPitch", "scrollZoom", "dragRotate", "touchPitch", "touchZoomRotate", "doubleClickZoom", "keyboard", "dragPan", "boxZoom", "style", "center", "maxBounds", "zoom", "bearing", "pitch", "fitBoundsOptions", "renderWorldCopies", "projection", "movingMethod", "movingOptions", "fitBounds", "fitScreenCoordinates", "centerWithPanTo", "panToOptions", "cursorStyle"], outputs: ["mapResize", "mapRemove", "mapMouseDown", "mapMouseUp", "mapMouseMove", "mapClick", "mapDblClick", "mapMouseOver", "mapMouseOut", "mapContextMenu", "mapTouchStart", "mapTouchEnd", "mapTouchMove", "mapTouchCancel", "mapWheel", "moveStart", "move", "moveEnd", "mapDragStart", "mapDrag", "mapDragEnd", "zoomStart", "zoomEvt", "zoomEnd", "rotateStart", "rotate", "rotateEnd", "pitchStart", "pitchEvt", "pitchEnd", "boxZoomStart", "boxZoomEnd", "boxZoomCancel", "webGlContextLost", "webGlContextRestored", "mapLoad", "idle", "render", "mapError", "data", "styleData", "sourceData", "dataLoading", "styleDataLoading", "sourceDataLoading", "styleImageMissing", "resize", "remove", "mouseDown", "mouseUp", "mouseMove", "click", "dblClick", "mouseOver", "mouseOut", "contextMenu", "touchStart", "touchEnd", "touchMove", "touchCancel", "wheel", "dragStart", "drag", "dragEnd", "load", "error"] }, { kind: "component", type: i9.MarkerComponent, selector: "mgl-marker", inputs: ["offset", "anchor", "clickTolerance", "feature", "lngLat", "draggable", "popupShown", "className", "pitchAlignment", "rotationAlignment"], outputs: ["markerDragStart", "markerDragEnd", "markerDrag", "dragStart", "dragEnd", "drag"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: DbxFormMapboxLatLngFieldComponent, decorators: [{
+            type: Component,
+            args: [{ template: `
+    <div class="dbx-mapbox-latlng-field" [ngClass]="(compactClass$ | async) ?? ''" [formGroup]="formGroup">
+      <div class="dbx-mapbox-latlng-field-map">
+        <mgl-map [style]="'mapbox://styles/mapbox/streets-v9'" [zoom]="(zoom$ | async) || [8]" [center]="(center$ | async) || [0, 0]">
+          <mgl-marker [lngLat]="(latLng$ | async) || [0, 0]" [draggable]="!isReadonlyOrDisabled" (markerDragEnd)="onDragEnd($event)"></mgl-marker>
+        </mgl-map>
+      </div>
+      <div class="dbx-mapbox-latlng-field-input">
+        <button mat-icon-button (click)="useCurrentLocation()" [disabled]="isReadonlyOrDisabled">
+          <mat-icon>my_location</mat-icon>
+        </button>
+        <mat-form-field class="dbx-mapbox-latlng-field-input-field">
+          <mat-label>Coordinates</mat-label>
+          <input type="text" matInput [placeholder]="placeholder" [formControl]="formControl" />
+        </mat-form-field>
+      </div>
+    </div>
+  `, styles: [".dbx-mapbox-latlng-field .dbx-mapbox-latlng-field-map{height:220px;width:100%}.dbx-mapbox-latlng-field .dbx-mapbox-latlng-field-map mgl-map{height:100%;width:100%}.dbx-mapbox-latlng-field .dbx-mapbox-latlng-field-input{display:flex;align-items:center}.dbx-mapbox-latlng-field .dbx-mapbox-latlng-field-input .dbx-mapbox-latlng-field-input-field{width:calc(100% - 40px)}\n"] }]
+        }], ctorParameters: function () {
+        return [{ type: i1.CompactContextStore, decorators: [{
+                        type: Optional
+                    }] }, { type: i2.GeolocationService }];
+    } });
+
+class DbxFormMapboxLatLngModule {
+}
+DbxFormMapboxLatLngModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: DbxFormMapboxLatLngModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+DbxFormMapboxLatLngModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.1.2", ngImport: i0, type: DbxFormMapboxLatLngModule, declarations: [DbxFormMapboxLatLngFieldComponent], imports: [CommonModule,
+        MatIconModule,
+        MatButtonModule,
+        DbxTextModule,
+        FormsModule,
+        ReactiveFormsModule,
+        MatInputModule, i1$1.FormlyModule, NgxMapboxGLModule] });
+DbxFormMapboxLatLngModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: DbxFormMapboxLatLngModule, imports: [CommonModule,
+        MatIconModule,
+        MatButtonModule,
+        DbxTextModule,
+        FormsModule,
+        ReactiveFormsModule,
+        MatInputModule,
+        FormlyModule.forChild({
+            types: [{ name: 'mapbox-latlng-picker', component: DbxFormMapboxLatLngFieldComponent, wrappers: ['style', 'form-field'] }]
+        }),
+        NgxMapboxGLModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: DbxFormMapboxLatLngModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        MatIconModule,
+                        MatButtonModule,
+                        DbxTextModule,
+                        FormsModule,
+                        ReactiveFormsModule,
+                        MatInputModule,
+                        FormlyModule.forChild({
+                            types: [{ name: 'mapbox-latlng-picker', component: DbxFormMapboxLatLngFieldComponent, wrappers: ['style', 'form-field'] }]
+                        }),
+                        NgxMapboxGLModule
+                    ],
+                    declarations: [DbxFormMapboxLatLngFieldComponent]
+                }]
+        }] });
+
+class DbxFormMapboxModule {
+}
+DbxFormMapboxModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: DbxFormMapboxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+DbxFormMapboxModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.1.2", ngImport: i0, type: DbxFormMapboxModule, exports: [DbxFormMapboxLatLngModule] });
+DbxFormMapboxModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: DbxFormMapboxModule, imports: [DbxFormMapboxLatLngModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: DbxFormMapboxModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    exports: [DbxFormMapboxLatLngModule]
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { DbxFormMapboxLatLngFieldComponent, DbxFormMapboxLatLngModule, DbxFormMapboxModule, mapboxLatLngField };
+//# sourceMappingURL=dereekb-dbx-form-mapbox.mjs.map

package/fesm2015/dereekb-dbx-form-mapbox.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"dereekb-dbx-form-mapbox.mjs","sources":["../../../../packages/dbx-form/mapbox/src/lib/field/latlng/latlng.field.ts","../../../../packages/dbx-form/mapbox/src/lib/field/latlng/latlng.field.component.ts","../../../../packages/dbx-form/mapbox/src/lib/field/latlng/latlng.module.ts","../../../../packages/dbx-form/mapbox/src/lib/mapbox.module.ts","../../../../packages/dbx-form/mapbox/src/dereekb-dbx-form-mapbox.ts"],"sourcesContent":["import { DEFAULT_LAT_LNG_TEXT_FIELD_PATTERN_MESSAGE, DEFAULT_LAT_LNG_TEXT_FIELD_PLACEHOLDER, DescriptionFieldConfig, FieldConfig, formlyField, LabeledFieldConfig, propsForFieldConfig, styleWrapper, validatorsForFieldConfig } from '@dereekb/dbx-form';\nimport { LAT_LNG_PATTERN } from '@dereekb/util';\nimport { FormlyFieldConfig } from '@ngx-formly/core';\n\nexport interface MapboxLatLngFieldConfig extends Omit<LabeledFieldConfig, 'key'>, DescriptionFieldConfig, Partial<FieldConfig> {}\n\nexport function mapboxLatLngField(config: MapboxLatLngFieldConfig = {}): FormlyFieldConfig {\n  const { key = 'latLng' } = config;\n  const fieldConfig: FormlyFieldConfig = {\n    ...formlyField({\n      key,\n      type: 'mapbox-latlng-picker',\n      ...propsForFieldConfig(config, {\n        label: config.label ?? 'Location Picker',\n        placeholder: DEFAULT_LAT_LNG_TEXT_FIELD_PLACEHOLDER,\n        pattern: LAT_LNG_PATTERN,\n        autocomplete: false\n      })\n    }),\n    ...validatorsForFieldConfig({\n      messages: {\n        pattern: DEFAULT_LAT_LNG_TEXT_FIELD_PATTERN_MESSAGE\n      }\n    })\n  };\n\n  return styleWrapper(fieldConfig, {\n    classGetter: 'dbx-mat-form-field-disable-underline'\n  });\n}\n","import { AbstractControl, FormControl, FormGroup } from '@angular/forms';\nimport { CompactContextStore, mapCompactModeObs } from '@dereekb/dbx-web';\nimport { Component, OnDestroy, OnInit, Optional } from '@angular/core';\nimport { FieldTypeConfig, FormlyFieldProps } from '@ngx-formly/core';\nimport { FieldType } from '@ngx-formly/material';\nimport { Editor, Validators } from 'ngx-editor';\nimport { first, BehaviorSubject, debounceTime, distinctUntilChanged, filter, shareReplay, startWith, switchMap, map, Observable, combineLatest, of } from 'rxjs';\nimport { filterMaybe, SubscriptionObject } from '@dereekb/rxjs';\nimport { Maybe, latLngString, LatLngString, LatLngPoint, LatLngPointFunctionConfig, latLngPoint, LatLngStringFunction, latLngStringFunction } from '@dereekb/util';\nimport { isSameMinute } from 'date-fns';\nimport { GeolocationService } from '@ng-web-apis/geolocation';\nimport { Marker } from 'mapbox-gl';\n\nexport interface DbxFormMapboxLatLngComponentFieldProps extends FormlyFieldProps {\n  zoom?: number;\n  latLngConfig?: LatLngPointFunctionConfig;\n}\n\n@Component({\n  template: `\n    <div class=\"dbx-mapbox-latlng-field\" [ngClass]=\"(compactClass$ | async) ?? ''\" [formGroup]=\"formGroup\">\n      <div class=\"dbx-mapbox-latlng-field-map\">\n        <mgl-map [style]=\"'mapbox://styles/mapbox/streets-v9'\" [zoom]=\"(zoom$ | async) || [8]\" [center]=\"(center$ | async) || [0, 0]\">\n          <mgl-marker [lngLat]=\"(latLng$ | async) || [0, 0]\" [draggable]=\"!isReadonlyOrDisabled\" (markerDragEnd)=\"onDragEnd($event)\"></mgl-marker>\n        </mgl-map>\n      </div>\n      <div class=\"dbx-mapbox-latlng-field-input\">\n        <button mat-icon-button (click)=\"useCurrentLocation()\" [disabled]=\"isReadonlyOrDisabled\">\n          <mat-icon>my_location</mat-icon>\n        </button>\n        <mat-form-field class=\"dbx-mapbox-latlng-field-input-field\">\n          <mat-label>Coordinates</mat-label>\n          <input type=\"text\" matInput [placeholder]=\"placeholder\" [formControl]=\"formControl\" />\n        </mat-form-field>\n      </div>\n    </div>\n  `,\n  styleUrls: ['./latlng.field.component.scss']\n})\nexport class DbxFormMapboxLatLngFieldComponent<T extends DbxFormMapboxLatLngComponentFieldProps = DbxFormMapboxLatLngComponentFieldProps> extends FieldType<FieldTypeConfig<T>> implements OnInit, OnDestroy {\n  private _latLngStringFunction!: LatLngStringFunction;\n\n  readonly compactClass$ = mapCompactModeObs(this.compact?.mode$, {\n    compact: 'dbx-texteditor-field-compact'\n  });\n\n  private _sub = new SubscriptionObject();\n  private _zoom = new BehaviorSubject<[number]>([12]);\n\n  private _formControlObs = new BehaviorSubject<Maybe<AbstractControl>>(undefined);\n  readonly formControl$ = this._formControlObs.pipe(filterMaybe());\n\n  readonly value$ = this.formControl$.pipe(\n    switchMap((control) => control.valueChanges.pipe(startWith(control.value))),\n    shareReplay(1)\n  );\n\n  readonly latLng$: Observable<LatLngPoint> = this.value$.pipe(\n    filterMaybe(),\n    map((x) => latLngPoint(x)),\n    filter((x) => x.lat !== 0 && x.lng !== 0),\n    shareReplay(1)\n  );\n\n  readonly center$ = this.latLng$;\n  readonly zoom$ = this._zoom.asObservable();\n\n  constructor(@Optional() readonly compact: CompactContextStore, private readonly geolocation$: GeolocationService) {\n    super();\n  }\n\n  get zoom(): [number] {\n    return [Math.min(this.field.props.zoom || 12, 18)];\n  }\n\n  get formGroupName(): string {\n    return this.field.key as string;\n  }\n\n  get formGroup(): FormGroup {\n    return this.form as FormGroup;\n  }\n\n  get label(): Maybe<string> {\n    return this.field.props?.label;\n  }\n\n  get description(): Maybe<string> {\n    return this.props.description;\n  }\n\n  get isReadonlyOrDisabled() {\n    return this.props.readonly || this.disabled;\n  }\n\n  ngOnInit(): void {\n    this._latLngStringFunction = latLngStringFunction(this.field.props.latLngConfig);\n    this._formControlObs.next(this.formControl);\n    this._zoom.next(this.zoom);\n\n    if (this.props.readonly) {\n      this.formControl.disable();\n    }\n  }\n\n  override ngOnDestroy(): void {\n    super.ngOnDestroy();\n    this._formControlObs.complete();\n    this._zoom.complete();\n    this._sub.destroy();\n  }\n\n  useCurrentLocation() {\n    this._sub.subscription = this.geolocation$.pipe(first()).subscribe((position) => {\n      if (position) {\n        const { latitude: lat, longitude: lng } = position.coords;\n        this.setValue({ lat, lng });\n      }\n    });\n  }\n\n  onDragEnd(marker: Marker) {\n    this.setValue(marker.getLngLat());\n  }\n\n  setValue(latLng?: Maybe<LatLngPoint>) {\n    this.formControl.setValue(latLng ? this._latLngStringFunction(latLng) : latLng);\n  }\n}\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { DbxFormMapboxLatLngFieldComponent } from './latlng.field.component';\nimport { FormlyModule } from '@ngx-formly/core';\nimport { FormsModule, ReactiveFormsModule } from '@angular/forms';\nimport { MatInputModule } from '@angular/material/input';\nimport { DbxTextModule } from '@dereekb/dbx-web';\nimport { NgxMapboxGLModule } from 'ngx-mapbox-gl';\nimport { MatIconModule } from '@angular/material/icon';\nimport { MatButtonModule } from '@angular/material/button';\n\n@NgModule({\n  imports: [\n    CommonModule,\n    MatIconModule,\n    MatButtonModule,\n    DbxTextModule,\n    FormsModule,\n    ReactiveFormsModule,\n    MatInputModule,\n    FormlyModule.forChild({\n      types: [{ name: 'mapbox-latlng-picker', component: DbxFormMapboxLatLngFieldComponent, wrappers: ['style', 'form-field'] }]\n    }),\n    NgxMapboxGLModule\n  ],\n  declarations: [DbxFormMapboxLatLngFieldComponent]\n})\nexport class DbxFormMapboxLatLngModule {}\n","import { NgModule } from '@angular/core';\nimport { DbxFormMapboxLatLngModule } from './field/latlng/latlng.module';\n\n@NgModule({\n  exports: [DbxFormMapboxLatLngModule]\n})\nexport class DbxFormMapboxModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2015/dereekb-dbx-form.mjs

@@ -26,7 +26,7 @@ import * as i1$2 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
 import * as i3$3 from '@angular/flex-layout/flex';
 import { FlexLayoutModule } from '@angular/flex-layout';
-import { objectIsEmpty, mergeObjectsFunction, filterFromPOJOFunction, mergeObjects, filterFromPOJO, asArray, objectHasNoKeys, addPlusPrefixToNumber, convertMaybeToArray, makeValuesGroupMap, findUnique, searchStringFilterFunction, caseInsensitiveFilterByIndexOfDecisionFactory, mergeIntoArray, lastValue, separateValues, arrayToMap, getValueFromGetter, dateFromLogicalDate, WEBSITE_DOMAIN_NAME_REGEX, KeyValueTypleValueFilter, valuesFromPOJO, allObjectsAreEqual, isNumberDivisibleBy, nearestDivisibleValues, capitalizeFirstLetter, BooleanStringKeyArrayUtilityInstance } from '@dereekb/util';
+import { objectIsEmpty, mergeObjectsFunction, filterFromPOJOFunction, mergeObjects, filterFromPOJO, asArray, objectHasNoKeys, addPlusPrefixToNumber, convertMaybeToArray, makeValuesGroupMap, findUnique, searchStringFilterFunction, caseInsensitiveFilterByIndexOfDecisionFactory, mergeIntoArray, lastValue, separateValues, arrayToMap, getValueFromGetter, dateFromLogicalDate, WEBSITE_DOMAIN_NAME_REGEX, KeyValueTypleValueFilter, valuesFromPOJO, allObjectsAreEqual, isNumberDivisibleBy, nearestDivisibleValues, LAT_LNG_PATTERN, capitalizeFirstLetter, BooleanStringKeyArrayUtilityInstance } from '@dereekb/util';
 import * as i2$1 from '@angular/material/slide-toggle';
 import { MatSlideToggleModule } from '@angular/material/slide-toggle';
 import * as i2$2 from '@angular/flex-layout/extended';
@@ -44,7 +44,7 @@ import { MatListModule } from '@angular/material/list';
 import * as i3$4 from '@angular/material/form-field';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { ENTER, COMMA } from '@angular/cdk/keycodes';
-import { skipUntilTimeElapsedAfterLastEmission, guessCurrentTimezone, toReadableTimeString, utcDayForDate, readableTimeStringToDate, DateTimeMinuteInstance, toLocalReadableTimeString } from '@dereekb/date';
+import { skipUntilTimeElapsedAfterLastEmission, guessCurrentTimezone, toReadableTimeString, utcDayForDate, readableTimeStringToDate, DateTimeMinuteInstance, toLocalReadableTimeString, allTimezoneInfos, timezoneInfoForSystem, searchTimezoneInfos } from '@dereekb/date';
 import * as i4$4 from 'ngx-editor';
 import { Editor, NgxEditorModule } from 'ngx-editor';
 import * as i4$5 from '@angular/cdk/drag-drop';
@@ -903,29 +903,40 @@ class DbxFormStyleWrapperComponent extends FieldWrapper {
     constructor() {
         super(...arguments);
         this._style = new BehaviorSubject(undefined);
-        this.style$ = this._style.pipe(switchMapMaybeDefault(''), shareReplay(1));
+        this._class = new BehaviorSubject(undefined);
+        this.style$ = this._style.pipe(switchMapMaybeDefault({}), shareReplay(1));
+        this.class$ = this._class.pipe(switchMapMaybeDefault(''), shareReplay(1));
     }
     get styleGetter() {
-        return this.props.style;
+        return this.props.styleGetter;
+    }
+    get classGetter() {
+        return this.props.classGetter;
     }
     ngOnInit() {
-        this._style.next(asObservable(this.styleGetter));
+        if (this.styleGetter) {
+            this._style.next(asObservable(this.styleGetter));
+        }
+        if (this.classGetter) {
+            this._class.next(asObservable(this.classGetter));
+        }
     }
     ngOnDestroy() {
         this._style.complete();
+        this._class.complete();
     }
 }
 DbxFormStyleWrapperComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: DbxFormStyleWrapperComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
 DbxFormStyleWrapperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.2", type: DbxFormStyleWrapperComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
-    <div [ngClass]="(style$ | async) ?? ''">
+    <div class="dbx-form-style-wrapper" [ngClass]="(class$ | async) ?? ''" [ngStyle]="(style$ | async) ?? {}">
       <ng-container #fieldComponent></ng-container>
     </div>
-  `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$2.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] });
+  `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2$2.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { kind: "directive", type: i2$2.DefaultStyleDirective, selector: "  [ngStyle],  [ngStyle.xs], [ngStyle.sm], [ngStyle.md], [ngStyle.lg], [ngStyle.xl],  [ngStyle.lt-sm], [ngStyle.lt-md], [ngStyle.lt-lg], [ngStyle.lt-xl],  [ngStyle.gt-xs], [ngStyle.gt-sm], [ngStyle.gt-md], [ngStyle.gt-lg]", inputs: ["ngStyle", "ngStyle.xs", "ngStyle.sm", "ngStyle.md", "ngStyle.lg", "ngStyle.xl", "ngStyle.lt-sm", "ngStyle.lt-md", "ngStyle.lt-lg", "ngStyle.lt-xl", "ngStyle.gt-xs", "ngStyle.gt-sm", "ngStyle.gt-md", "ngStyle.gt-lg"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: DbxFormStyleWrapperComponent, decorators: [{
             type: Component,
             args: [{
                     template: `
-    <div [ngClass]="(style$ | async) ?? ''">
+    <div class="dbx-form-style-wrapper" [ngClass]="(class$ | async) ?? ''" [ngStyle]="(style$ | async) ?? {}">
       <ng-container #fieldComponent></ng-container>
     </div>
   `
@@ -3095,15 +3106,15 @@ function timeOnlyField(config = {}) {
 }
 function dateTimeField(config = {}) {
     const { key = 'date', timeMode = DbxDateTimeFieldTimeMode.REQUIRED, fullDayFieldName, getConfigObs, timeOnly = false } = config;
-    const fieldConfig = formlyField(Object.assign(Object.assign({ key, type: 'datetime' }, propsForFieldConfig(config, {
+    const fieldConfig = formlyField(Object.assign({ key, type: 'datetime' }, propsForFieldConfig(config, {
         timeMode: timeOnly ? DbxDateTimeFieldTimeMode.REQUIRED : timeMode,
         fullDayFieldName,
         getConfigObs,
         timeOnly
-    })), { styleWrapper: {
-            style: 'dbx-datetime-parent-form-field'
-        } }));
-    return fieldConfig;
+    })));
+    return styleWrapper(fieldConfig, {
+        classGetter: 'dbx-mat-form-field-disable-underline'
+    });
 }
 
 function isTruthy() {
@@ -3454,6 +3465,22 @@ function zipCodeField({ key = 'zip', required = false } = {}) {
         maxLength: ADDRESS_ZIP_MAX_LENGTH
     });
 }
+const DEFAULT_LAT_LNG_TEXT_FIELD_PLACEHOLDER = '12.345,-67.8910';
+const DEFAULT_LAT_LNG_TEXT_FIELD_PATTERN_MESSAGE = `Invalid/unknown coordinates`;
+function latLngTextField({ key = 'latLng' } = {}) {
+    const field = Object.assign(Object.assign({}, textField({
+        key,
+        label: 'Coordinates',
+        placeholder: DEFAULT_LAT_LNG_TEXT_FIELD_PLACEHOLDER,
+        pattern: LAT_LNG_PATTERN,
+        autocomplete: false
+    })), validatorsForFieldConfig({
+        messages: {
+            pattern: DEFAULT_LAT_LNG_TEXT_FIELD_PATTERN_MESSAGE
+        }
+    }));
+    return field;
+}
 
 const ADDRESS_LINE_MAX_LENGTH = 100;
 function addressFormlyFields() {
@@ -3645,6 +3672,34 @@ function textIsAvailableField(config) {
     return workingWrapper(field, {});
 }
 
+function timezoneStringSearchFunction() {
+    const timezoneInfos = allTimezoneInfos();
+    return (search) => {
+        let searchResults;
+        if (search.length === 0) {
+            searchResults = [timezoneInfoForSystem()].concat(timezoneInfos);
+        }
+        else {
+            searchResults = searchTimezoneInfos(search, timezoneInfos);
+        }
+        return of(searchResults.map((meta) => ({ value: meta.timezone, meta })));
+    };
+}
+const DISPLAY_FOR_TIMEZONE_STRING_VALUE = (values) => {
+    const displayValues = values.map((x) => { var _a, _b; return (Object.assign(Object.assign({}, x), { label: x.value, sublabel: (_b = (_a = x.meta) === null || _a === void 0 ? void 0 : _a.abbreviation) !== null && _b !== void 0 ? _b : 'Unknown' })); });
+    const obs = of(displayValues);
+    return obs;
+};
+/**
+ * Template for login field that takes in a username and password.
+ *
+ * @param param0
+ * @returns
+ */
+function timezoneStringField(config = {}) {
+    return searchableTextField(Object.assign(Object.assign({ key: 'timezone', label: 'Timezone' }, config), { searchOnEmptyText: true, search: timezoneStringSearchFunction(), displayForValue: DISPLAY_FOR_TIMEZONE_STRING_VALUE }));
+}
+
 /**
  * Allows a directive to provide a formly context and form.
  */
@@ -4127,5 +4182,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.2", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { ADDRESS_CITY_MAX_LENGTH, ADDRESS_COUNTRY_MAX_LENGTH, ADDRESS_LINE_MAX_LENGTH, ADDRESS_STATE_MAX_LENGTH, ADDRESS_ZIP_MAX_LENGTH, APP_ACTION_FORM_DISABLED_KEY, AUTO_TOUCH_WRAPPER_KEY, AbstractAsyncFormlyFormDirective, AbstractConfigAsyncFormlyFormDirective, AbstractDbxPickableItemFieldDirective, AbstractDbxSearchableFieldDisplayDirective, AbstractDbxSearchableValueFieldDirective, AbstractFormExpandableSectionWrapperDirective, AbstractFormlyFormDirective, AbstractSyncFormlyFormDirective, AutoTouchFieldWrapperComponent, ChecklistItemFieldDataSetBuilder, DBX_SEARCHABLE_FIELD_COMPONENT_DATA_TOKEN, DEFAULT_FORM_DISABLED_KEY, DEFAULT_HAS_VALUE_FN, DEFAULT_PREFERRED_COUNTRIES, DbxActionFormDirective, DbxActionFormSafetyDirective, DbxChecklistItemContentComponent, DbxChecklistItemFieldComponent, DbxDateTimeFieldComponent, DbxDateTimeFieldTimeMode, DbxDefaultChecklistItemFieldDisplayComponent, DbxDefaultSearchableFieldDisplayComponent, DbxForm, DbxFormActionModule, DbxFormActionTransitionModule, DbxFormComponentFieldComponent, DbxFormExpandWrapperComponent, DbxFormExtensionModule, DbxFormFlexWrapperComponent, DbxFormFormlyArrayFieldModule, DbxFormFormlyBooleanFieldModule, DbxFormFormlyChecklistItemFieldModule, DbxFormFormlyComponentFieldModule, DbxFormFormlyDateFieldModule, DbxFormFormlyFieldModule, DbxFormFormlyNumberFieldModule, DbxFormFormlyPhoneFieldModule, DbxFormFormlyPickableFieldModule, DbxFormFormlySearchableFieldModule, DbxFormFormlySelectionModule, DbxFormFormlyTextEditorFieldModule, DbxFormFormlyTextFieldModule, DbxFormFormlyValueModule, DbxFormFormlyWrapperModule, DbxFormInfoWrapperComponent, DbxFormIoModule, DbxFormLayoutModule, DbxFormLoadingSourceDirective, DbxFormModule, DbxFormRepeatArrayTypeComponent, DbxFormSectionWrapperComponent, DbxFormSourceDirective, DbxFormSpacerComponent, DbxFormState, DbxFormSubsectionWrapperComponent, DbxFormToggleWrapperComponent, DbxFormValueChangesDirective, DbxFormWorkingWrapperComponent, DbxFormlyContext, DbxFormlyFieldsContextDirective, DbxFormlyFormComponent, DbxFormlyModule, DbxMutableForm, DbxPhoneFieldComponent, DbxPickableChipListFieldComponent, DbxPickableListFieldComponent, DbxPickableListFieldItemListComponent, DbxPickableListFieldItemListViewComponent, DbxPickableListFieldItemListViewItemComponent, DbxSearchableChipFieldComponent, DbxSearchableFieldAutocompleteItemComponent, DbxSearchableTextFieldComponent, DbxTextEditorFieldComponent, EXPANDABLE_WRAPPER_KEY, FIELD_VALUES_ARE_EQUAL_VALIDATION_KEY, FIELD_VALUE_IS_AVAILABLE_ERROR_VALIDATION_KEY, FIELD_VALUE_IS_AVAILABLE_VALIDATION_KEY, FLEX_WRAPPER_KEY, INFO_WRAPPER_KEY, INVALID_PHONE_NUMBER_MESSAGE, IS_DIVISIBLE_BY_VALIDATION_KEY, LABEL_STRING_MAX_LENGTH, MAX_LENGTH_VALIDATION_MESSAGE, MAX_VALIDATION_MESSAGE, MIN_LENGTH_VALIDATION_MESSAGE, MIN_VALIDATION_MESSAGE, PHONE_LABEL_MAX_LENGTH, REQUIRED_VALIDATION_MESSAGE, SEARCH_STRING_MAX_LENGTH, SECTION_WRAPPER_KEY, STYLE_WRAPPER_KEY, SUBSECTION_WRAPPER_KEY, TAKE_NEXT_UPCOMING_TIME_CONFIG_OBS, TOGGLE_WRAPPER_KEY, WORKING_WRAPPER_KEY, addWrapperToFormlyFieldConfig, addressField, addressFormlyFields, addressListField, autoTouchWrapper, checkIsFieldFlexLayoutGroupFieldConfig, checkboxField, checklistItemField, chipTextField, cityField, componentField, countryField, dateTimeField, dbxFormSourceObservable, defaultValidationMessages, disableFormlyFieldAutofillAttributes, emailField, expandWrapper, fieldValueIsAvailableValidator, fieldValuesAreEqualValidator, filterPartialPotentialFieldConfigValuesFromObject, filterPickableItemFieldValuesByLabel, filterPickableItemFieldValuesByLabelFilterFunction, flexLayoutWrapper, formlyField, hiddenField, infoWrapper, isDivisibleBy, isDomain, isInRange, isTruthy, makeMetaFilterSearchableFieldValueDisplayFn, maxLengthValidationMessage, maxValidationMessage, mergePropsValueObjects, minLengthValidationMessage, minValidationMessage, nameField, numberField, partialPotentialFieldConfigKeys, partialPotentialFieldConfigKeysFilter, phoneAndLabelSectionField, phoneField, phoneListField, pickableItemChipField, pickableItemListField, propsForFieldConfig, propsValueForFieldConfig, provideDbxForm, provideDbxMutableForm, provideFormlyContext, repeatArrayField, searchableChipField, searchableStringChipField, searchableTextField, sectionWrapper, sortPickableItemsByLabel, stateField, styleWrapper, subsectionWrapper, textAreaField, textEditorField, textField, textIsAvailableField, textPasswordField, textPasswordWithVerifyFieldGroup, textVerifyPasswordField, timeOnlyField, toggleField, toggleWrapper, usernamePasswordLoginFields, validatorsForFieldConfig, valueSelectionField, workingWrapper, wrappedPhoneAndLabelField, zipCodeField };
+export { ADDRESS_CITY_MAX_LENGTH, ADDRESS_COUNTRY_MAX_LENGTH, ADDRESS_LINE_MAX_LENGTH, ADDRESS_STATE_MAX_LENGTH, ADDRESS_ZIP_MAX_LENGTH, APP_ACTION_FORM_DISABLED_KEY, AUTO_TOUCH_WRAPPER_KEY, AbstractAsyncFormlyFormDirective, AbstractConfigAsyncFormlyFormDirective, AbstractDbxPickableItemFieldDirective, AbstractDbxSearchableFieldDisplayDirective, AbstractDbxSearchableValueFieldDirective, AbstractFormExpandableSectionWrapperDirective, AbstractFormlyFormDirective, AbstractSyncFormlyFormDirective, AutoTouchFieldWrapperComponent, ChecklistItemFieldDataSetBuilder, DBX_SEARCHABLE_FIELD_COMPONENT_DATA_TOKEN, DEFAULT_FORM_DISABLED_KEY, DEFAULT_HAS_VALUE_FN, DEFAULT_LAT_LNG_TEXT_FIELD_PATTERN_MESSAGE, DEFAULT_LAT_LNG_TEXT_FIELD_PLACEHOLDER, DEFAULT_PREFERRED_COUNTRIES, DISPLAY_FOR_TIMEZONE_STRING_VALUE, DbxActionFormDirective, DbxActionFormSafetyDirective, DbxChecklistItemContentComponent, DbxChecklistItemFieldComponent, DbxDateTimeFieldComponent, DbxDateTimeFieldTimeMode, DbxDefaultChecklistItemFieldDisplayComponent, DbxDefaultSearchableFieldDisplayComponent, DbxForm, DbxFormActionModule, DbxFormActionTransitionModule, DbxFormComponentFieldComponent, DbxFormExpandWrapperComponent, DbxFormExtensionModule, DbxFormFlexWrapperComponent, DbxFormFormlyArrayFieldModule, DbxFormFormlyBooleanFieldModule, DbxFormFormlyChecklistItemFieldModule, DbxFormFormlyComponentFieldModule, DbxFormFormlyDateFieldModule, DbxFormFormlyFieldModule, DbxFormFormlyNumberFieldModule, DbxFormFormlyPhoneFieldModule, DbxFormFormlyPickableFieldModule, DbxFormFormlySearchableFieldModule, DbxFormFormlySelectionModule, DbxFormFormlyTextEditorFieldModule, DbxFormFormlyTextFieldModule, DbxFormFormlyValueModule, DbxFormFormlyWrapperModule, DbxFormInfoWrapperComponent, DbxFormIoModule, DbxFormLayoutModule, DbxFormLoadingSourceDirective, DbxFormModule, DbxFormRepeatArrayTypeComponent, DbxFormSectionWrapperComponent, DbxFormSourceDirective, DbxFormSpacerComponent, DbxFormState, DbxFormSubsectionWrapperComponent, DbxFormToggleWrapperComponent, DbxFormValueChangesDirective, DbxFormWorkingWrapperComponent, DbxFormlyContext, DbxFormlyFieldsContextDirective, DbxFormlyFormComponent, DbxFormlyModule, DbxMutableForm, DbxPhoneFieldComponent, DbxPickableChipListFieldComponent, DbxPickableListFieldComponent, DbxPickableListFieldItemListComponent, DbxPickableListFieldItemListViewComponent, DbxPickableListFieldItemListViewItemComponent, DbxSearchableChipFieldComponent, DbxSearchableFieldAutocompleteItemComponent, DbxSearchableTextFieldComponent, DbxTextEditorFieldComponent, EXPANDABLE_WRAPPER_KEY, FIELD_VALUES_ARE_EQUAL_VALIDATION_KEY, FIELD_VALUE_IS_AVAILABLE_ERROR_VALIDATION_KEY, FIELD_VALUE_IS_AVAILABLE_VALIDATION_KEY, FLEX_WRAPPER_KEY, INFO_WRAPPER_KEY, INVALID_PHONE_NUMBER_MESSAGE, IS_DIVISIBLE_BY_VALIDATION_KEY, LABEL_STRING_MAX_LENGTH, MAX_LENGTH_VALIDATION_MESSAGE, MAX_VALIDATION_MESSAGE, MIN_LENGTH_VALIDATION_MESSAGE, MIN_VALIDATION_MESSAGE, PHONE_LABEL_MAX_LENGTH, REQUIRED_VALIDATION_MESSAGE, SEARCH_STRING_MAX_LENGTH, SECTION_WRAPPER_KEY, STYLE_WRAPPER_KEY, SUBSECTION_WRAPPER_KEY, TAKE_NEXT_UPCOMING_TIME_CONFIG_OBS, TOGGLE_WRAPPER_KEY, WORKING_WRAPPER_KEY, addWrapperToFormlyFieldConfig, addressField, addressFormlyFields, addressListField, autoTouchWrapper, checkIsFieldFlexLayoutGroupFieldConfig, checkboxField, checklistItemField, chipTextField, cityField, componentField, countryField, dateTimeField, dbxFormSourceObservable, defaultValidationMessages, disableFormlyFieldAutofillAttributes, emailField, expandWrapper, fieldValueIsAvailableValidator, fieldValuesAreEqualValidator, filterPartialPotentialFieldConfigValuesFromObject, filterPickableItemFieldValuesByLabel, filterPickableItemFieldValuesByLabelFilterFunction, flexLayoutWrapper, formlyField, hiddenField, infoWrapper, isDivisibleBy, isDomain, isInRange, isTruthy, latLngTextField, makeMetaFilterSearchableFieldValueDisplayFn, maxLengthValidationMessage, maxValidationMessage, mergePropsValueObjects, minLengthValidationMessage, minValidationMessage, nameField, numberField, partialPotentialFieldConfigKeys, partialPotentialFieldConfigKeysFilter, phoneAndLabelSectionField, phoneField, phoneListField, pickableItemChipField, pickableItemListField, propsForFieldConfig, propsValueForFieldConfig, provideDbxForm, provideDbxMutableForm, provideFormlyContext, repeatArrayField, searchableChipField, searchableStringChipField, searchableTextField, sectionWrapper, sortPickableItemsByLabel, stateField, styleWrapper, subsectionWrapper, textAreaField, textEditorField, textField, textIsAvailableField, textPasswordField, textPasswordWithVerifyFieldGroup, textVerifyPasswordField, timeOnlyField, timezoneStringField, timezoneStringSearchFunction, toggleField, toggleWrapper, usernamePasswordLoginFields, validatorsForFieldConfig, valueSelectionField, workingWrapper, wrappedPhoneAndLabelField, zipCodeField };
 //# sourceMappingURL=dereekb-dbx-form.mjs.map