@dereekb/dbx-form 2.0.0 → 4.0.0

package/lib/form/action/form.action.directive.d.ts

@@ -1,14 +1,9 @@
 import { OnInit, OnDestroy } from '@angular/core';
 import { Observable } from 'rxjs';
-import { DbxActionContextStoreSourceInstance } from '@dereekb/dbx-core';
-import { ReadableError } from '@dereekb/util';
-import { LockSet, IsModifiedFn, IsValidFn } from '@dereekb/rxjs';
+import { DbxActionContextStoreSourceInstance, DbxActionValueOnTriggerResult } from '@dereekb/dbx-core';
+import { LockSet, IsModifiedFunction, IsValidFunction } from '@dereekb/rxjs';
 import { DbxMutableForm } from '../../form/form';
 import * as i0 from "@angular/core";
-export interface DbxActionFormTriggerResult {
-    value?: any;
-    reject?: ReadableError;
-}
 export declare const APP_ACTION_FORM_DISABLED_KEY = "dbx_action_form";
 /**
  * Used with an action to bind a form to an action as it's value source.
@@ -25,22 +20,22 @@ export declare class DbxActionFormDirective<T = any> implements OnInit, OnDestro
      * Optional validator that checks whether or not the value is
      * ready to send before the context store is marked enabled.
      */
-    dbxActionFormValidator?: IsValidFn<T>;
+    dbxActionFormValidator?: IsValidFunction<T>;
     /**
      * Optional function that checks whether or not the value has been modified.
      */
-    dbxActionFormModified?: IsModifiedFn<T>;
+    dbxActionFormModified?: IsModifiedFunction<T>;
     private _formDisabledWhileWorking;
     private _triggeredSub;
     private _isCompleteSub;
     private _isWorkingSub;
     constructor(form: DbxMutableForm, source: DbxActionContextStoreSourceInstance<object, any>);
-    get dbxActionFormDisabledWhileWorking(): boolean;
-    set dbxActionFormDisabledWhileWorking(dbxActionFormDisabledWhileWorking: boolean);
+    get formDisabledOnWorking(): boolean;
+    set formDisabledOnWorking(formDisabledOnWorking: boolean);
     ngOnInit(): void;
     ngOnDestroy(): void;
     protected preCheckReadyValue(value: T): Observable<boolean>;
-    protected readyValue(value: T): Observable<DbxActionFormTriggerResult>;
+    protected readyValue(value: T): Observable<DbxActionValueOnTriggerResult>;
     static ɵfac: i0.ɵɵFactoryDeclaration<DbxActionFormDirective<any>, [{ host: true; }, null]>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<DbxActionFormDirective<any>, "[dbxActionForm]", never, { "dbxActionFormValidator": "dbxActionFormValidator"; "dbxActionFormModified": "dbxActionFormModified"; "dbxActionFormDisabledWhileWorking": "dbxActionFormDisabledWhileWorking"; }, {}, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DbxActionFormDirective<any>, "[dbxActionForm]", never, { "dbxActionFormValidator": "dbxActionFormValidator"; "dbxActionFormModified": "dbxActionFormModified"; "formDisabledOnWorking": "formDisabledOnWorking"; }, {}, never>;
 }

package/lib/form/form.d.ts

@@ -2,12 +2,22 @@ import { Provider, Type } from '@angular/core';
 import { Observable } from 'rxjs';
 import { LockSet } from '@dereekb/rxjs';
 import { BooleanStringKeyArray, Maybe } from '@dereekb/util';
+import { FormControlStatus } from '@angular/forms';
 /**
  * Current state of a DbxForm
  */
 export declare enum DbxFormState {
+    /**
+     * Form is not finished initializing.
+     */
     INITIALIZING = -1,
+    /**
+     * Form is initialized but has not yet used.
+     */
     RESET = 0,
+    /**
+     * Form has been used.
+     */
     USED = 1
 }
 /**
@@ -21,6 +31,7 @@ export declare const DEFAULT_FORM_DISABLED_KEY = "dbx_form_disabled";
 export interface DbxFormEvent {
     readonly isComplete: boolean;
     readonly state: DbxFormState;
+    readonly status: FormControlStatus;
     readonly pristine?: boolean;
     readonly untouched?: boolean;
     readonly lastResetAt?: Date;

package/lib/form/io/form.changes.directive.d.ts

@@ -1,15 +1,19 @@
-import { EventEmitter, OnInit } from '@angular/core';
+import { EventEmitter, OnInit, OnDestroy } from '@angular/core';
 import { AbstractSubscriptionDirective } from '@dereekb/dbx-core';
+import { Maybe } from '@dereekb/util';
 import { DbxForm } from '../form';
 import * as i0 from "@angular/core";
 /**
  * Used to see form value changes.
+ *
+ * Emits undefined when the form is incomplete, and the value when the form is complete.
  */
-export declare class DbxFormValueChangesDirective<T extends object = any> extends AbstractSubscriptionDirective implements OnInit {
+export declare class DbxFormValueChangesDirective<T extends object = any> extends AbstractSubscriptionDirective implements OnInit, OnDestroy {
     readonly form: DbxForm;
-    readonly dbxFormValueChange: EventEmitter<T>;
+    readonly dbxFormValueChange: EventEmitter<Maybe<T>>;
     constructor(form: DbxForm);
     ngOnInit(): void;
+    ngOnDestroy(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<DbxFormValueChangesDirective<any>, [{ host: true; }]>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<DbxFormValueChangesDirective<any>, "[dbxFormValueChange]", never, {}, { "dbxFormValueChange": "dbxFormValueChange"; }, never>;
 }

package/lib/form/io/form.input.directive.d.ts

@@ -1,19 +1,30 @@
 import { Observable } from 'rxjs';
+import { OnDestroy } from '@angular/core';
 import { AbstractSubscriptionDirective } from '@dereekb/dbx-core';
 import { DbxMutableForm } from '../form';
 import { Maybe } from '@dereekb/util';
+import { ObservableOrValue } from '@dereekb/rxjs';
 import * as i0 from "@angular/core";
+export declare function dbxFormSourceObservable<T>(form: DbxMutableForm, inputObs: ObservableOrValue<T>, mode$: Observable<DbxFormSourceDirectiveMode>): Observable<T>;
+/**
+ * DbxFormSourceDirective modes that define when to copy data from the source.
+ *
+ * - reset: only copy data when the form is reset.
+ * - always: always copy data when the data observable emits a value.
+ */
+export declare type DbxFormSourceDirectiveMode = 'reset' | 'always';
 /**
  * Used with a FormComponent to set the value based on the input value.
  */
-export declare class DbxFormSourceDirective<T extends object = any> extends AbstractSubscriptionDirective {
+export declare class DbxFormSourceDirective<T extends object = any> extends AbstractSubscriptionDirective implements OnDestroy {
     readonly form: DbxMutableForm;
+    private _mode;
     constructor(form: DbxMutableForm);
-    /**
-     * Sets a LoadingContext that is watched for the loading state.
-     */
-    set obs(obs: Observable<Maybe<Partial<T>>>);
-    private _setObs;
+    get mode(): DbxFormSourceDirectiveMode;
+    set mode(mode: DbxFormSourceDirectiveMode);
+    set obs(obs: Maybe<ObservableOrValue<Maybe<Partial<T>>>>);
+    private setObs;
+    ngOnDestroy(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<DbxFormSourceDirective<any>, [{ host: true; }]>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<DbxFormSourceDirective<any>, "[dbxFormSource]", never, { "obs": "dbxFormSource"; }, {}, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DbxFormSourceDirective<any>, "[dbxFormSource]", never, { "mode": "dbxFormSourceMode"; "obs": "dbxFormSource"; }, {}, never>;
 }

package/lib/form/io/form.loading.directive.d.ts

@@ -1,19 +1,25 @@
 import { Observable } from 'rxjs';
+import { OnDestroy } from '@angular/core';
 import { AbstractSubscriptionDirective } from '@dereekb/dbx-core';
 import { DbxMutableForm } from '../../form/form';
 import { LoadingState } from '@dereekb/rxjs';
+import { DbxFormSourceDirectiveMode } from './form.input.directive';
 import * as i0 from "@angular/core";
 /**
  * Used with a FormComponent to set the value from a LoadingState when the value is available.
  */
-export declare class DbxFormLoadingSourceDirective<T extends object = any> extends AbstractSubscriptionDirective {
+export declare class DbxFormLoadingSourceDirective<T extends object = any> extends AbstractSubscriptionDirective implements OnDestroy {
     readonly form: DbxMutableForm;
+    private _mode;
     constructor(form: DbxMutableForm);
+    get mode(): DbxFormSourceDirectiveMode;
+    set mode(mode: DbxFormSourceDirectiveMode);
     /**
      * Sets a LoadingContext that is watched for the loading state.
      */
     set obs(obs: Observable<LoadingState<T>>);
     private _setObs;
+    ngOnDestroy(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<DbxFormLoadingSourceDirective<any>, [{ host: true; }]>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<DbxFormLoadingSourceDirective<any>, "[dbxFormLoadingSource]", never, { "obs": "dbxFormLoadingSource"; }, {}, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DbxFormLoadingSourceDirective<any>, "[dbxFormLoadingSource]", never, { "mode": "dbxFormLoadingSourceMode"; "obs": "dbxFormLoadingSource"; }, {}, never>;
 }

package/lib/formly/field/checklist/checklist.item.field.component.d.ts

@@ -1,5 +1,5 @@
 import { ChangeDetectorRef } from '@angular/core';
-import { DbxInjectedComponentConfig } from '@dereekb/dbx-core';
+import { DbxInjectionComponentConfig } from '@dereekb/dbx-core';
 import { OnDestroy, OnInit, Type } from '@angular/core';
 import { ValidationErrors, FormGroup } from '@angular/forms';
 import { FieldType, FieldTypeConfig, FormlyFieldConfig } from '@ngx-formly/core';
@@ -41,7 +41,7 @@ export declare class DbxChecklistItemFieldComponent<T = any> extends FieldType<C
 export declare class DbxChecklistItemContentComponent<T = any> extends AbstractSubscriptionDirective {
     readonly checklistItemFieldComponent: DbxChecklistItemFieldComponent<T>;
     readonly cdRef: ChangeDetectorRef;
-    config?: DbxInjectedComponentConfig;
+    config?: DbxInjectionComponentConfig;
     constructor(checklistItemFieldComponent: DbxChecklistItemFieldComponent<T>, cdRef: ChangeDetectorRef);
     ngOnInit(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<DbxChecklistItemContentComponent<any>, never>;

package/lib/formly/field/checklist/checklist.item.field.module.d.ts

@@ -13,6 +13,6 @@ import * as i11 from "../wrapper/form.wrapper.module";
 import * as i12 from "@ngx-formly/core";
 export declare class DbxFormFormlyChecklistItemFieldModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<DbxFormFormlyChecklistItemFieldModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<DbxFormFormlyChecklistItemFieldModule, [typeof i1.DbxChecklistItemFieldComponent, typeof i1.DbxChecklistItemContentComponent, typeof i2.DbxDefaultChecklistItemFieldDisplayComponent], [typeof i3.CommonModule, typeof i4.DbxTextModule, typeof i5.FormsModule, typeof i5.ReactiveFormsModule, typeof i6.MatRippleModule, typeof i7.MatCheckboxModule, typeof i8.MatButtonModule, typeof i9.MatIconModule, typeof i4.DbxAnchorModule, typeof i10.DbxInjectedComponentModule, typeof i11.DbxFormFormlyWrapperModule, typeof i12.FormlyModule], [typeof i11.DbxFormFormlyWrapperModule]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<DbxFormFormlyChecklistItemFieldModule, [typeof i1.DbxChecklistItemFieldComponent, typeof i1.DbxChecklistItemContentComponent, typeof i2.DbxDefaultChecklistItemFieldDisplayComponent], [typeof i3.CommonModule, typeof i4.DbxTextModule, typeof i5.FormsModule, typeof i5.ReactiveFormsModule, typeof i6.MatRippleModule, typeof i7.MatCheckboxModule, typeof i8.MatButtonModule, typeof i9.MatIconModule, typeof i4.DbxRouterAnchorModule, typeof i10.DbxInjectionComponentModule, typeof i11.DbxFormFormlyWrapperModule, typeof i12.FormlyModule], [typeof i11.DbxFormFormlyWrapperModule]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<DbxFormFormlyChecklistItemFieldModule>;
 }

package/lib/formly/field/component/component.field.component.d.ts

@@ -1,13 +1,13 @@
-import { DbxInjectedComponentConfig } from '@dereekb/dbx-core';
+import { DbxInjectionComponentConfig } from '@dereekb/dbx-core';
 import { FieldType, FormlyFieldConfig } from '@ngx-formly/core';
 import * as i0 from "@angular/core";
-export interface DbxFormComponentFieldConfig<T> extends DbxInjectedComponentConfig<T> {
+export interface DbxFormComponentFieldConfig<T> extends DbxInjectionComponentConfig<T> {
 }
 export interface DbxFormComponentFormlyFieldConfig<T = any> extends FormlyFieldConfig {
     componentField: DbxFormComponentFieldConfig<T>;
 }
 export declare class DbxFormComponentFieldComponent<T = any> extends FieldType<DbxFormComponentFormlyFieldConfig<T>> {
-    get config(): DbxInjectedComponentConfig<T>;
+    get config(): DbxInjectionComponentConfig<T>;
     static ɵfac: i0.ɵɵFactoryDeclaration<DbxFormComponentFieldComponent<any>, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<DbxFormComponentFieldComponent<any>, "ng-component", never, {}, {}, never, never>;
 }

package/lib/formly/field/component/component.field.module.d.ts

@@ -5,6 +5,6 @@ import * as i3 from "@dereekb/dbx-core";
 import * as i4 from "@ngx-formly/core";
 export declare class DbxFormFormlyComponentFieldModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<DbxFormFormlyComponentFieldModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<DbxFormFormlyComponentFieldModule, [typeof i1.DbxFormComponentFieldComponent], [typeof i2.CommonModule, typeof i3.DbxInjectedComponentModule, typeof i4.FormlyModule], [typeof i1.DbxFormComponentFieldComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<DbxFormFormlyComponentFieldModule, [typeof i1.DbxFormComponentFieldComponent], [typeof i2.CommonModule, typeof i3.DbxInjectionComponentModule, typeof i4.FormlyModule], [typeof i1.DbxFormComponentFieldComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<DbxFormFormlyComponentFieldModule>;
 }

package/lib/formly/field/selection/pickable/pickable.field.directive.d.ts

@@ -1,4 +1,4 @@
-import { DbxInjectedComponentConfig } from "@dereekb/dbx-core";
+import { DbxInjectionComponentConfig } from "@dereekb/dbx-core";
 import { LoadingState, ListLoadingStateContextInstance } from "@dereekb/rxjs";
 import { Maybe } from "@dereekb/util";
 import { OnDestroy, OnInit } from "@angular/core";
@@ -74,7 +74,11 @@ export interface PickableValueFieldsFieldConfig<T> {
     /**
      * Footer Display
      */
-    footerConfig?: DbxInjectedComponentConfig;
+    footerConfig?: DbxInjectionComponentConfig;
+    /**
+     * Changes the selection mode of the list to "view" mode on disabled, hiding the selection boxes.
+     */
+    changeSelectionModeToViewOnDisabled?: boolean;
 }
 export interface PickableValueFieldsFormlyFieldConfig<T> extends FormlyFieldConfig {
     pickableField: PickableValueFieldsFieldConfig<T>;
@@ -133,6 +137,7 @@ export declare class AbstractDbxPickableItemFieldDirective<T> extends FieldType<
     get name(): string;
     get label(): Maybe<string>;
     get autocomplete(): string;
+    get changeSelectionModeToViewOnDisabled(): boolean;
     get sortItems(): Maybe<PickableItemFieldItemSortFn<T>>;
     get hashForValue(): PickableValueFieldHashFn<T>;
     get displayForValue(): PickableValueFieldDisplayFn<T>;
@@ -143,7 +148,7 @@ export declare class AbstractDbxPickableItemFieldDirective<T> extends FieldType<
     get showTextFilter(): boolean;
     get loadValuesFn(): PickableValueFieldLoadValuesFn<T>;
     get values(): T[];
-    get footerConfig(): Maybe<DbxInjectedComponentConfig>;
+    get footerConfig(): Maybe<DbxInjectionComponentConfig>;
     loadDisplayValuesForValues(values: T[]): Observable<LoadingState<PickableValueFieldDisplayValueWithHash<T>[]>>;
     loadDisplayValuesForFieldValues(values: PickableValueFieldValue<T>[]): Observable<LoadingState<PickableValueFieldDisplayValueWithHash<T>[]>>;
     getDisplayValuesForFieldValues(values: PickableValueFieldValue<T>[]): Observable<PickableValueFieldDisplayValueWithHash<T>[]>;

package/lib/formly/field/selection/pickable/pickable.field.module.d.ts

@@ -15,6 +15,6 @@ import * as i13 from "@angular/material/icon";
 import * as i14 from "@ngx-formly/core";
 export declare class DbxFormFormlyPickableFieldModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<DbxFormFormlyPickableFieldModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<DbxFormFormlyPickableFieldModule, [typeof i1.DbxPickableChipListFieldComponent, typeof i2.DbxPickableListFieldComponent, typeof i2.DbxPickableListFieldItemListComponent, typeof i2.DbxPickableListFieldItemListViewComponent, typeof i2.DbxPickableListFieldItemListViewItemComponent], [typeof i3.CommonModule, typeof i4.DbxTextModule, typeof i4.DbxLoadingModule, typeof i4.DbxButtonModule, typeof i5.FormsModule, typeof i6.MatButtonModule, typeof i7.MatInputModule, typeof i8.MatFormFieldModule, typeof i5.ReactiveFormsModule, typeof i9.MatAutocompleteModule, typeof i10.MatListModule, typeof i11.DbxDatePipeModule, typeof i4.DbxAnchorModule, typeof i12.MatChipsModule, typeof i13.MatIconModule, typeof i11.DbxInjectedComponentModule, typeof i4.DbxListLayoutModule, typeof i14.FormlyModule], never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<DbxFormFormlyPickableFieldModule, [typeof i1.DbxPickableChipListFieldComponent, typeof i2.DbxPickableListFieldComponent, typeof i2.DbxPickableListFieldItemListComponent, typeof i2.DbxPickableListFieldItemListViewComponent, typeof i2.DbxPickableListFieldItemListViewItemComponent], [typeof i3.CommonModule, typeof i4.DbxTextModule, typeof i4.DbxLoadingModule, typeof i4.DbxButtonModule, typeof i5.FormsModule, typeof i6.MatButtonModule, typeof i7.MatInputModule, typeof i8.MatFormFieldModule, typeof i5.ReactiveFormsModule, typeof i9.MatAutocompleteModule, typeof i10.MatListModule, typeof i11.DbxDatePipeModule, typeof i4.DbxRouterAnchorModule, typeof i12.MatChipsModule, typeof i13.MatIconModule, typeof i11.DbxInjectionComponentModule, typeof i4.DbxListLayoutModule, typeof i14.FormlyModule], never>;
     static ɵinj: i0.ɵɵInjectorDeclaration<DbxFormFormlyPickableFieldModule>;
 }

package/lib/formly/field/selection/pickable/pickable.list.field.component.d.ts

@@ -1,5 +1,6 @@
-import { DbxInjectedComponentConfig } from "@dereekb/dbx-core";
-import { AbstractDbxSelectionListWrapperDirective, AbstractSelectionValueListViewDirective, AbstractDbxSelectionValueListViewItemComponent } from "@dereekb/dbx-web";
+import { DbxInjectionComponentConfig } from "@dereekb/dbx-core";
+import { AbstractDbxSelectionListWrapperDirective, AbstractDbxSelectionListViewDirective, AbstractDbxValueListViewItemComponent, DbxListSelectionMode } from "@dereekb/dbx-web";
+import { Maybe } from "@dereekb/util";
 import { PickableValueFieldDisplayValue } from "./pickable";
 import { AbstractDbxPickableItemFieldDirective, PickableItemFieldItem } from "./pickable.field.directive";
 import * as i0 from "@angular/core";
@@ -19,16 +20,17 @@ export declare class DbxPickableListFieldItemListComponent<T> extends AbstractDb
 /**
  * NOTE: Values input are PickableItemFieldItem<T>, but output values are PickableValueFieldDisplayValue<T>.
  */
-export declare class DbxPickableListFieldItemListViewComponent<T> extends AbstractSelectionValueListViewDirective<PickableItemFieldItem<T>> {
+export declare class DbxPickableListFieldItemListViewComponent<T> extends AbstractDbxSelectionListViewDirective<PickableItemFieldItem<T>> {
     readonly dbxPickableListFieldComponent: DbxPickableListFieldComponent<T>;
-    readonly config: DbxInjectedComponentConfig;
+    readonly config: DbxInjectionComponentConfig;
     get multiple(): boolean;
-    readonly items$: import("rxjs").Observable<import("@dereekb/dbx-web").DbxValueListItemConfig<PickableValueFieldDisplayValue<T, any>>[]>;
+    get selectionMode(): Maybe<DbxListSelectionMode>;
+    readonly items$: import("rxjs").Observable<import("@dereekb/dbx-web").DbxValueListItemConfig<unknown, PickableItemFieldItem<T>>[]>;
     constructor(dbxPickableListFieldComponent: DbxPickableListFieldComponent<T>);
     static ɵfac: i0.ɵɵFactoryDeclaration<DbxPickableListFieldItemListViewComponent<any>, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<DbxPickableListFieldItemListViewComponent<any>, "ng-component", never, {}, {}, never, never>;
 }
-export declare class DbxPickableListFieldItemListViewItemComponent<T> extends AbstractDbxSelectionValueListViewItemComponent<PickableValueFieldDisplayValue<T>> {
+export declare class DbxPickableListFieldItemListViewItemComponent<T> extends AbstractDbxValueListViewItemComponent<PickableValueFieldDisplayValue<T>> {
     get label(): string;
     static ɵfac: i0.ɵɵFactoryDeclaration<DbxPickableListFieldItemListViewItemComponent<any>, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<DbxPickableListFieldItemListViewItemComponent<any>, "ng-component", never, {}, {}, never, never>;

package/lib/formly/field/selection/searchable/searchable.chip.field.component.d.ts

@@ -1,3 +1,4 @@
+import { OnDestroy } from '@angular/core';
 import { MatAutocompleteSelectedEvent } from '@angular/material/autocomplete';
 import { MatChipInputEvent } from '@angular/material/chips';
 import { AbstractDbxSearchableValueFieldDirective, SearchableValueFieldsFieldConfig, SearchableValueFieldsFormlyFieldConfig } from './searchable.field.directive';
@@ -7,7 +8,7 @@ export interface SearchableChipValueFieldsFieldConfig<T> extends SearchableValue
 export interface SearchableChipValueFieldsFormlyFieldConfig<T> extends SearchableValueFieldsFormlyFieldConfig<T> {
     searchableField: SearchableChipValueFieldsFieldConfig<T>;
 }
-export declare class DbxSearchableChipFieldComponent<T> extends AbstractDbxSearchableValueFieldDirective<T, SearchableChipValueFieldsFormlyFieldConfig<T>> {
+export declare class DbxSearchableChipFieldComponent<T> extends AbstractDbxSearchableValueFieldDirective<T, SearchableChipValueFieldsFormlyFieldConfig<T>> implements OnDestroy {
     private _blur;
     private _blurSub;
     readonly separatorKeysCodes: number[];

package/lib/formly/field/selection/searchable/searchable.d.ts

@@ -1,4 +1,4 @@
-import { DbxInjectedComponentConfig, ClickableAnchor } from '@dereekb/dbx-core';
+import { DbxInjectionComponentConfig, ClickableAnchor } from '@dereekb/dbx-core';
 import { Observable } from 'rxjs';
 import { SelectionDisplayValue, SelectionValue, SelectionValueHashFn } from '../selection';
 export interface SearchableValueFieldValue<T, M = any> extends SelectionValue<T, M> {
@@ -14,10 +14,10 @@ export interface SearchableValueFieldDisplayValue<T, M = any> extends SelectionD
     /**
      * Display override configuration
      */
-    display?: Partial<DbxInjectedComponentConfig>;
+    display?: Partial<DbxInjectionComponentConfig>;
 }
 export interface ConfiguredSearchableValueFieldDisplayValue<T, M = any> extends Omit<SearchableValueFieldDisplayValue<T, M>, 'display'> {
-    display: DbxInjectedComponentConfig;
+    display: DbxInjectionComponentConfig;
 }
 /**
  * SearchableValueField function for searching values.

package/lib/formly/field/selection/searchable/searchable.field.autocomplete.item.component.d.ts

@@ -1,13 +1,13 @@
 import { Observable } from 'rxjs';
 import { InjectionToken, OnDestroy } from '@angular/core';
 import { ConfiguredSearchableValueFieldDisplayValue } from './searchable';
-import { DbxInjectedComponentConfig } from '@dereekb/dbx-core';
+import { DbxInjectionComponentConfig } from '@dereekb/dbx-core';
 import * as i0 from "@angular/core";
 export declare const DBX_SEARCHABLE_FIELD_COMPONENT_DATA_TOKEN: InjectionToken<unknown>;
 export declare class DbxSearchableFieldAutocompleteItemComponent<T> implements OnDestroy {
     private _displayValue;
     readonly displayValue$: Observable<ConfiguredSearchableValueFieldDisplayValue<T, any>>;
-    readonly config$: Observable<DbxInjectedComponentConfig>;
+    readonly config$: Observable<DbxInjectionComponentConfig>;
     readonly anchor$: Observable<import("@dereekb/dbx-core").ClickableAnchor | undefined>;
     set displayValue(displayValue: ConfiguredSearchableValueFieldDisplayValue<T>);
     ngOnDestroy(): void;

package/lib/formly/field/selection/searchable/searchable.field.directive.d.ts

@@ -1,4 +1,4 @@
-import { DbxInjectedComponentConfig } from '@dereekb/dbx-core';
+import { DbxInjectionComponentConfig } from '@dereekb/dbx-core';
 import { SubscriptionObject, LoadingState, LoadingStateContextInstance } from '@dereekb/rxjs';
 import { ChangeDetectorRef, ElementRef, OnDestroy, OnInit } from '@angular/core';
 import { AbstractControl, FormControl, ValidatorFn } from '@angular/forms';
@@ -42,7 +42,7 @@ export interface SearchableValueFieldsFieldConfig<T> extends StringValueFieldsFi
     /**
      * Default injected config to use for display values.
      */
-    display?: Partial<DbxInjectedComponentConfig>;
+    display?: Partial<DbxInjectionComponentConfig>;
     /**
      * Used for building a display value given the input.
      */
@@ -81,7 +81,7 @@ export declare abstract class AbstractDbxSearchableValueFieldDirective<T, C exte
     /**
      * Optional override set by the parent class for picking a default display for this directive.
      */
-    defaultDisplay?: DbxInjectedComponentConfig;
+    defaultDisplay?: DbxInjectionComponentConfig;
     textInput: ElementRef<HTMLInputElement>;
     readonly inputCtrl: FormControl;
     private _formControlObs;
@@ -107,7 +107,7 @@ export declare abstract class AbstractDbxSearchableValueFieldDirective<T, C exte
     get displayForValue(): SearchableValueFieldDisplayFn<T>;
     get useAnchor(): Maybe<boolean>;
     get anchorForValue(): Maybe<SearchableValueFieldAnchorFn<T>>;
-    get display(): Maybe<Partial<DbxInjectedComponentConfig>>;
+    get display(): Maybe<Partial<DbxInjectionComponentConfig>>;
     get search(): SearchableValueFieldStringSearchFn<T>;
     get values(): T[];
     get allowStringValues(): boolean;

package/lib/formly/field/selection/searchable/searchable.field.module.d.ts

@@ -16,6 +16,6 @@ import * as i14 from "@angular/material/icon";
 import * as i15 from "@ngx-formly/core";
 export declare class DbxFormFormlySearchableFieldModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<DbxFormFormlySearchableFieldModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<DbxFormFormlySearchableFieldModule, [typeof i1.DbxSearchableChipFieldComponent, typeof i2.DbxSearchableTextFieldComponent, typeof i3.DbxSearchableFieldAutocompleteItemComponent, typeof i3.DbxDefaultSearchableFieldDisplayComponent], [typeof i4.CommonModule, typeof i5.DbxTextModule, typeof i5.DbxLoadingModule, typeof i5.DbxButtonModule, typeof i6.FormsModule, typeof i7.MatButtonModule, typeof i8.MatInputModule, typeof i9.MatFormFieldModule, typeof i6.ReactiveFormsModule, typeof i10.MatAutocompleteModule, typeof i11.MatListModule, typeof i12.DbxDatePipeModule, typeof i5.DbxAnchorModule, typeof i13.MatChipsModule, typeof i14.MatIconModule, typeof i12.DbxInjectedComponentModule, typeof i15.FormlyModule], [typeof i1.DbxSearchableChipFieldComponent, typeof i2.DbxSearchableTextFieldComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<DbxFormFormlySearchableFieldModule, [typeof i1.DbxSearchableChipFieldComponent, typeof i2.DbxSearchableTextFieldComponent, typeof i3.DbxSearchableFieldAutocompleteItemComponent, typeof i3.DbxDefaultSearchableFieldDisplayComponent], [typeof i4.CommonModule, typeof i5.DbxTextModule, typeof i5.DbxLoadingModule, typeof i5.DbxButtonModule, typeof i6.FormsModule, typeof i7.MatButtonModule, typeof i8.MatInputModule, typeof i9.MatFormFieldModule, typeof i6.ReactiveFormsModule, typeof i10.MatAutocompleteModule, typeof i11.MatListModule, typeof i12.DbxDatePipeModule, typeof i5.DbxRouterAnchorModule, typeof i13.MatChipsModule, typeof i14.MatIconModule, typeof i12.DbxInjectionComponentModule, typeof i15.FormlyModule], [typeof i1.DbxSearchableChipFieldComponent, typeof i2.DbxSearchableTextFieldComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<DbxFormFormlySearchableFieldModule>;
 }

package/lib/formly/field/value/array/array.field.component.d.ts

@@ -1,9 +1,9 @@
 import { CdkDragDrop } from '@angular/cdk/drag-drop';
-import { GetterWithInput, Maybe } from '@dereekb/util';
+import { FactoryWithInput, Maybe } from '@dereekb/util';
 import { FieldArrayTypeConfig, FieldArrayType, FormlyFieldConfig } from '@ngx-formly/core';
 import * as i0 from "@angular/core";
 export interface DbxFormRepeatArrayConfig {
-    labelForField?: string | GetterWithInput<string, FormlyFieldConfig>;
+    labelForField?: string | FactoryWithInput<string, FormlyFieldConfig>;
     addText?: string;
     removeText?: string;
 }

package/lib/formly/field/value/date/datetime.field.component.d.ts

@@ -7,7 +7,7 @@ import { FieldTypeConfig, FormlyFieldConfig } from '@ngx-formly/core';
 import { Observable } from 'rxjs';
 import { MatDatepickerInputEvent } from '@angular/material/datepicker';
 import * as i0 from "@angular/core";
-export declare enum DateTimeFieldTimeMode {
+export declare enum DbxDateTimeFieldTimeMode {
     /**
      * Time is required.
      */
@@ -33,7 +33,7 @@ export interface DbxDateTimeFieldConfig {
      *
      * This is ignored if timeOnly is specified.
      */
-    timeMode?: DateTimeFieldTimeMode;
+    timeMode?: DbxDateTimeFieldTimeMode;
     /**
      * Other form control for enabling/disabling whether or not it is a full day.
      *
@@ -78,13 +78,13 @@ export declare class DbxDateTimeFieldComponent extends FieldType<DateTimeFormlyF
     get dateTimeField(): DbxDateTimeFieldConfig;
     get timeOnly(): Maybe<boolean>;
     get showDateInput(): boolean;
-    get timeMode(): DateTimeFieldTimeMode;
+    get timeMode(): DbxDateTimeFieldTimeMode;
     get description(): Maybe<string>;
     readonly fullDay$: Observable<boolean>;
     readonly showTimeInput$: Observable<boolean>;
     readonly showAddTime$: Observable<boolean>;
     readonly date$: Observable<any>;
-    readonly dateValue$: Observable<Date | null | undefined>;
+    readonly dateValue$: Observable<Date | import("@dereekb/util").MaybeNot>;
     readonly timeInput$: Observable<ReadableTimeString>;
     readonly config$: Observable<Maybe<DateTimePickerConfiguration>>;
     readonly rawDateTime$: Observable<Maybe<Date>>;

package/lib/formly/field/value/phone/_phone.scss

@@ -23,6 +23,10 @@
     }
   }
 
+  .dbx-form-phone-field .ngx-mat-tel-input-container input:not(.country-search) {
+    padding: 0 6px 0 110px;
+  }
+
 }
 
 @mixin color($theme-config) {

package/lib/formly/field/value/text/text.additional.field.d.ts

@@ -12,7 +12,7 @@ export declare function nameField({ key, label, placeholder, required, minLength
 export interface EmailFieldConfig extends Partial<LabeledFieldConfig>, DescriptionFieldConfig {
     rows?: number;
 }
-export declare function emailField({ key, label, placeholder, description, required, readonly }?: EmailFieldConfig): FormlyFieldConfig;
+export declare function emailField(config?: EmailFieldConfig): FormlyFieldConfig;
 export declare function cityField({ key, required }?: Partial<TextFieldConfig>): FormlyFieldConfig;
 export declare function stateField({ key, required }?: Partial<TextFieldConfig>): FormlyFieldConfig;
 export declare function countryField({ key, required }?: Partial<TextFieldConfig>): FormlyFieldConfig;

package/lib/formly/field/value/text/text.field.d.ts

@@ -4,7 +4,9 @@ export interface TextFieldLengthConfig {
     minLength?: number;
     maxLength?: number;
 }
+export declare type TextFieldInputType = 'text' | 'password' | 'email';
 export interface TextFieldConfig extends LabeledFieldConfig, TextFieldLengthConfig, AttributesFieldConfig {
+    inputType?: TextFieldInputType;
     pattern?: string | RegExp;
 }
 export declare function textField(config: TextFieldConfig): FormlyFieldConfig;

package/lib/formly/field/wrapper/form.wrapper.module.d.ts

@@ -7,15 +7,16 @@ import * as i5 from "./expandable.wrapper.component";
 import * as i6 from "./toggle.wrapper.component";
 import * as i7 from "./flex.wrapper.component";
 import * as i8 from "./style.wrapper.component";
-import * as i9 from "@angular/common";
-import * as i10 from "@dereekb/dbx-web";
-import * as i11 from "@angular/material/button";
-import * as i12 from "@angular/material/slide-toggle";
-import * as i13 from "@angular/material/icon";
-import * as i14 from "@angular/flex-layout";
-import * as i15 from "@ngx-formly/core";
+import * as i9 from "./working.wrapper.component";
+import * as i10 from "@angular/common";
+import * as i11 from "@dereekb/dbx-web";
+import * as i12 from "@angular/material/button";
+import * as i13 from "@angular/material/slide-toggle";
+import * as i14 from "@angular/material/icon";
+import * as i15 from "@angular/flex-layout";
+import * as i16 from "@ngx-formly/core";
 export declare class DbxFormFormlyWrapperModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<DbxFormFormlyWrapperModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<DbxFormFormlyWrapperModule, [typeof i1.AutoTouchFieldWrapperComponent, typeof i2.DbxFormSectionWrapperComponent, typeof i3.DbxFormSubsectionWrapperComponent, typeof i4.DbxFormInfoWrapperComponent, typeof i5.DbxFormExpandWrapperComponent, typeof i6.DbxFormToggleWrapperComponent, typeof i7.DbxFormFlexWrapperComponent, typeof i8.DbxFormStyleWrapperComponent], [typeof i9.CommonModule, typeof i10.DbxTextModule, typeof i10.DbxFlexLayoutModule, typeof i10.DbxSectionLayoutModule, typeof i11.MatButtonModule, typeof i12.MatSlideToggleModule, typeof i13.MatIconModule, typeof i14.FlexLayoutModule, typeof i15.FormlyModule], never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<DbxFormFormlyWrapperModule, [typeof i1.AutoTouchFieldWrapperComponent, typeof i2.DbxFormSectionWrapperComponent, typeof i3.DbxFormSubsectionWrapperComponent, typeof i4.DbxFormInfoWrapperComponent, typeof i5.DbxFormExpandWrapperComponent, typeof i6.DbxFormToggleWrapperComponent, typeof i7.DbxFormFlexWrapperComponent, typeof i8.DbxFormStyleWrapperComponent, typeof i9.DbxFormWorkingWrapperComponent], [typeof i10.CommonModule, typeof i11.DbxTextModule, typeof i11.DbxLoadingModule, typeof i11.DbxFlexLayoutModule, typeof i11.DbxSectionLayoutModule, typeof i12.MatButtonModule, typeof i13.MatSlideToggleModule, typeof i14.MatIconModule, typeof i15.FlexLayoutModule, typeof i16.FormlyModule], never>;
     static ɵinj: i0.ɵɵInjectorDeclaration<DbxFormFormlyWrapperModule>;
 }

package/lib/formly/field/wrapper/index.d.ts

@@ -7,4 +7,5 @@ export * from './info.wrapper.component';
 export * from './section.wrapper.component';
 export * from './subsection.wrapper.component';
 export * from './toggle.wrapper.component';
+export * from './working.wrapper.component';
 export * from './wrapper';

package/lib/formly/field/wrapper/style.wrapper.component.d.ts

@@ -1,11 +1,11 @@
 import { OnInit, OnDestroy } from '@angular/core';
-import { ObservableGetter } from '@dereekb/rxjs';
+import { ObservableOrValue } from '@dereekb/rxjs';
 import { Maybe } from '@dereekb/util';
 import { FieldWrapper, FormlyFieldConfig } from '@ngx-formly/core';
 import { Observable } from 'rxjs';
 import * as i0 from "@angular/core";
 export interface DbxFormStyleWrapperConfig {
-    style: ObservableGetter<string>;
+    style: ObservableOrValue<string>;
 }
 export interface DbxFormStyleWrapperFormlyConfig extends FormlyFieldConfig {
     styleWrapper: DbxFormStyleWrapperConfig;
@@ -14,7 +14,7 @@ export declare class DbxFormStyleWrapperComponent extends FieldWrapper<DbxFormSt
     private _style;
     readonly style$: Observable<Maybe<string>>;
     get styleWrapper(): DbxFormStyleWrapperConfig;
-    get styleGetter(): ObservableGetter<string>;
+    get styleGetter(): ObservableOrValue<string>;
     ngOnInit(): void;
     ngOnDestroy(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<DbxFormStyleWrapperComponent, never>;

package/lib/formly/field/wrapper/working.wrapper.component.d.ts

@@ -0,0 +1,22 @@
+import { OnInit, OnDestroy } from '@angular/core';
+import { SimpleLoadingContext, SubscriptionObject } from '@dereekb/rxjs';
+import { FieldWrapper, FormlyFieldConfig } from '@ngx-formly/core';
+import * as i0 from "@angular/core";
+export interface DbxFormWorkingWrapperConfig {
+}
+export interface DbxFormWorkingWrapperFormlyConfig extends FormlyFieldConfig {
+    styleWrapper: DbxFormWorkingWrapperConfig;
+}
+/**
+ * Adds a loading bar to help signify asynchronos work is occuring.
+ *
+ * By default shows loading during asynchronous validation of a field (FormControl status is "PENDING")
+ */
+export declare class DbxFormWorkingWrapperComponent extends FieldWrapper<DbxFormWorkingWrapperFormlyConfig> implements OnInit, OnDestroy {
+    readonly sub: SubscriptionObject;
+    readonly workingContext: SimpleLoadingContext;
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DbxFormWorkingWrapperComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DbxFormWorkingWrapperComponent, "ng-component", never, {}, {}, never, never>;
+}

package/lib/formly/field/wrapper/wrapper.d.ts

@@ -7,6 +7,7 @@ import { DbxFormSubsectionConfig } from './subsection.wrapper.component';
 import { DbxFormInfoConfig } from './info.wrapper.component';
 import { DbxFormExpandWrapperConfig } from './expandable.wrapper.component';
 import { DbxFlexSize } from '@dereekb/dbx-web';
+import { DbxFormWorkingWrapperConfig } from './working.wrapper.component';
 export declare const EXPANDABLE_WRAPPER_KEY = "expandable";
 export declare const TOGGLE_WRAPPER_KEY = "toggle";
 export declare const SECTION_WRAPPER_KEY = "section";
@@ -14,6 +15,7 @@ export declare const SUBSECTION_WRAPPER_KEY = "subsection";
 export declare const INFO_WRAPPER_KEY = "info";
 export declare const FLEX_WRAPPER_KEY = "flex";
 export declare const STYLE_WRAPPER_KEY = "style";
+export declare const WORKING_WRAPPER_KEY = "working";
 export declare function addWrapperToFormlyFieldConfig<T extends object>(fieldConfig: FormlyFieldConfig, wrapperKey: string, wrapperTemplateOptionsConfig: T): FormlyFieldConfig;
 export declare function expandWrapper(fieldConfig: FormlyFieldConfig, expandWrapper?: DbxFormExpandWrapperConfig): FormlyFieldConfig;
 export declare function toggleWrapper(fieldConfig: FormlyFieldConfig, expandWrapper?: DbxFormToggleWrapperConfig): FormlyFieldConfig;
@@ -21,6 +23,7 @@ export declare function sectionWrapper(fieldConfig: FormlyFieldConfig, sectionWr
 export declare function subsectionWrapper(fieldConfig: FormlyFieldConfig, subsectionWrapper?: DbxFormSubsectionConfig): FormlyFieldConfig;
 export declare function infoWrapper(fieldConfig: FormlyFieldConfig, infoWrapper: DbxFormInfoConfig): FormlyFieldConfig;
 export declare function styleWrapper(fieldConfig: FormlyFieldConfig, styleWrapper: DbxFormStyleWrapperConfig): FormlyFieldConfig;
+export declare function workingWrapper(fieldConfig: FormlyFieldConfig, workingWrapper: DbxFormWorkingWrapperConfig): FormlyFieldConfig;
 export interface DbxFlexLayoutWrapperGroupFieldConfig {
     field: FormlyFieldConfig;
     /**

package/lib/formly/formly.context.d.ts

@@ -25,7 +25,7 @@ export declare function ProvideFormlyContext(): Provider[];
 /**
  * DbxForm Instance that registers a delegate and manages the state of that form/delegate.
  */
-export declare class DbxFormlyContext<T> implements DbxForm<T> {
+export declare class DbxFormlyContext<T = any> implements DbxForm<T> {
     readonly lockSet: LockSet;
     private static INITIAL_STATE;
     private _fields;

package/lib/formly/index.d.ts

@@ -1,5 +1,6 @@
 export * from './config';
 export * from './field';
+export * from './template';
 export * from './formly.context';
 export * from './formly.context.directive';
 export * from './formly.directive';

package/lib/formly/template/available.d.ts

@@ -0,0 +1,7 @@
+import { FormlyFieldConfig } from '@ngx-formly/core/lib/core';
+import { FieldValueIsAvailableValidatorConfig } from '../../validator/available';
+import { TextFieldConfig } from '../field/value/text/text.field';
+export interface TextAvailableFieldConfig extends TextFieldConfig, Omit<FieldValueIsAvailableValidatorConfig<string>, 'message'> {
+    isNotAvailableErrorMessage?: string;
+}
+export declare function textIsAvailableField(config: TextAvailableFieldConfig): FormlyFieldConfig;