@dereekb/dbx-form 1.2.0 → 3.0.0

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

@@ -1,17 +1,10 @@
 import { OnInit, OnDestroy } from '@angular/core';
 import { Observable } from 'rxjs';
-import { ActionContextStoreSourceInstance } from '@dereekb/dbx-core';
-import { ReadableError } from '@dereekb/util';
-import { LockSet } 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 type DbxActionFormValidateFn<T = any> = (value: T) => Observable<boolean>;
-export declare type DbxActionFormModifiedFn<T = any> = (value: T) => Observable<boolean>;
-export declare const APP_ACTION_FORM_DISABLED_KEY = "actionForm";
+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.
  *
@@ -21,24 +14,28 @@ export declare const APP_ACTION_FORM_DISABLED_KEY = "actionForm";
  */
 export declare class DbxActionFormDirective<T = any> implements OnInit, OnDestroy {
     readonly form: DbxMutableForm;
-    readonly source: ActionContextStoreSourceInstance<object, any>;
+    readonly source: DbxActionContextStoreSourceInstance<object, any>;
     readonly lockSet: LockSet;
     /**
      * Optional validator that checks whether or not the value is
      * ready to send before the context store is marked enabled.
      */
-    appActionFormValidator?: DbxActionFormValidateFn<T>;
+    dbxActionFormValidator?: IsValidFunction<T>;
     /**
      * Optional function that checks whether or not the value has been modified.
      */
-    appActionFormModified?: DbxActionFormModifiedFn<T>;
+    dbxActionFormModified?: IsModifiedFunction<T>;
+    private _formDisabledWhileWorking;
     private _triggeredSub;
     private _isCompleteSub;
-    constructor(form: DbxMutableForm, source: ActionContextStoreSourceInstance<object, any>);
+    private _isWorkingSub;
+    constructor(form: DbxMutableForm, source: DbxActionContextStoreSourceInstance<object, any>);
+    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, { "appActionFormValidator": "appActionFormValidator"; "appActionFormModified": "appActionFormModified"; }, {}, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DbxActionFormDirective<any>, "[dbxActionForm]", never, { "dbxActionFormValidator": "dbxActionFormValidator"; "dbxActionFormModified": "dbxActionFormModified"; "formDisabledOnWorking": "formDisabledOnWorking"; }, {}, never>;
 }

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

@@ -1,7 +1,7 @@
 import { ViewContainerRef } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
 import { HookResult, Transition, TransitionService } from '@uirouter/core';
-import { ActionContextStoreSourceInstance } from '@dereekb/dbx-core';
+import { DbxActionContextStoreSourceInstance } from '@dereekb/dbx-core';
 import { DbxActionTransitionSafetyType, DbxActionTransitionSafetyDirective } from '@dereekb/dbx-web';
 import { DbxActionFormDirective } from '../form.action.directive';
 import * as i0 from "@angular/core";
@@ -11,9 +11,9 @@ import * as i0 from "@angular/core";
  * NOTE: Only works with UIRouter
  */
 export declare class DbxActionFormSafetyDirective<T, O> extends DbxActionTransitionSafetyDirective<T, O> {
-    readonly appActionForm: DbxActionFormDirective<T>;
+    readonly dbxActionForm: DbxActionFormDirective<T>;
     inputSafetyType?: DbxActionTransitionSafetyType;
-    constructor(appActionForm: DbxActionFormDirective<T>, source: ActionContextStoreSourceInstance<T, O>, transitionService: TransitionService, viewContainerRef: ViewContainerRef, dialog: MatDialog);
+    constructor(dbxActionForm: DbxActionFormDirective<T>, source: DbxActionContextStoreSourceInstance<T, O>, transitionService: TransitionService, viewContainerRef: ViewContainerRef, dialog: MatDialog);
     protected _handleOnBeforeTransition(transition: Transition): HookResult;
     static ɵfac: i0.ɵɵFactoryDeclaration<DbxActionFormSafetyDirective<any, any>, [{ host: true; }, null, null, null, null]>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<DbxActionFormSafetyDirective<any, any>, "[dbxActionFormSafety]", never, { "inputSafetyType": "dbxActionFormSafety"; }, {}, never>;

package/lib/form/form.d.ts

@@ -1,26 +1,49 @@
 import { Provider, Type } from '@angular/core';
 import { Observable } from 'rxjs';
 import { LockSet } from '@dereekb/rxjs';
-import { Maybe } from '@dereekb/util';
+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
 }
+/**
+ * Unique key for disabling/enabling.
+ */
+export declare type DbxFormDisabledKey = string;
+export declare const DEFAULT_FORM_DISABLED_KEY = "dbx_form_disabled";
 /**
  * DbxForm stream event
  */
 export interface DbxFormEvent {
     readonly isComplete: boolean;
     readonly state: DbxFormState;
+    readonly status: FormControlStatus;
     readonly pristine?: boolean;
     readonly untouched?: boolean;
     readonly lastResetAt?: Date;
     readonly changesCount?: number;
+    /**
+     * Whether or not the form is disabled.
+     */
     readonly isDisabled?: boolean;
+    /**
+     * Current disabled state keys.
+     */
+    readonly disabled?: BooleanStringKeyArray;
 }
 /**
  * Form that has an event stream, value, and state items.
@@ -31,6 +54,10 @@ export declare abstract class DbxForm<T = any> {
      * Returns an observable that returns the current state of the form.
      */
     abstract getValue(): Observable<T>;
+    /**
+     * Returns an observable that returns the current disabled keys.
+     */
+    abstract getDisabled(): Observable<BooleanStringKeyArray>;
 }
 export declare abstract class DbxMutableForm<T = any> extends DbxForm<T> {
     /**
@@ -48,11 +75,11 @@ export declare abstract class DbxMutableForm<T = any> extends DbxForm<T> {
      */
     abstract resetForm(): void;
     /**
-     * Sets the form's disabled state.
+     * Disables the form
      *
      * @param disabled
      */
-    abstract setDisabled(disabled?: boolean): void;
+    abstract setDisabled(key?: DbxFormDisabledKey, disabled?: boolean): void;
     /**
      * Force the form to update itself as if it was changed.
      */

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,18 +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<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,26 +1,13 @@
-import { OnInit, Type } from '@angular/core';
-import { DbxInjectedComponentConfig } from '@dereekb/dbx-core';
+import { DbxInjectionComponentConfig } from '@dereekb/dbx-core';
 import { FieldType, FormlyFieldConfig } from '@ngx-formly/core';
-import { Maybe } from '@dereekb/util';
 import * as i0 from "@angular/core";
-export interface FormComponentFieldWrappedComponent {
-    field: FieldType<FormComponentFieldFieldConfig>;
+export interface DbxFormComponentFieldConfig<T> extends DbxInjectionComponentConfig<T> {
 }
-export declare abstract class AbstractFormComponentFieldWrappedComponent implements FormComponentFieldWrappedComponent {
-    abstract field: FieldType<FormComponentFieldFieldConfig>;
+export interface DbxFormComponentFormlyFieldConfig<T = any> extends FormlyFieldConfig {
+    componentField: DbxFormComponentFieldConfig<T>;
 }
-export interface FormComponentFieldFieldConfig<T extends FormComponentFieldWrappedComponent = any> extends FormlyFieldConfig {
-    componentField: {
-        componentClass: Type<T>;
-    };
-}
-export declare class FormComponentFieldComponent<T extends FormComponentFieldWrappedComponent = any> extends FieldType<FormComponentFieldFieldConfig<T>> implements OnInit {
-    private _config?;
-    get config(): Maybe<DbxInjectedComponentConfig>;
-    get componentField(): {
-        componentClass: Type<T>;
-    };
-    ngOnInit(): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<FormComponentFieldComponent<any>, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<FormComponentFieldComponent<any>, "ng-component", never, {}, {}, never, never>;
+export declare class DbxFormComponentFieldComponent<T = any> extends FieldType<DbxFormComponentFormlyFieldConfig<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.d.ts

@@ -1,6 +1,4 @@
-import { Type } from "@angular/core";
-import { FormComponentFieldWrappedComponent, FormComponentFieldFieldConfig } from "./component.field.component";
-export interface ComponentFieldConfig<T> {
-    componentClass: Type<T>;
+import { DbxFormComponentFieldConfig, DbxFormComponentFormlyFieldConfig } from "./component.field.component";
+export interface ComponentFieldConfig<T = any> extends DbxFormComponentFieldConfig<T> {
 }
-export declare function componentField<T extends FormComponentFieldWrappedComponent>({ componentClass }: ComponentFieldConfig<T>): FormComponentFieldFieldConfig<T>;
+export declare function componentField<T>(config: ComponentFieldConfig<T>): DbxFormComponentFormlyFieldConfig;

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.FormComponentFieldComponent], [typeof i2.CommonModule, typeof i3.DbxInjectedComponentModule, typeof i4.FormlyModule], [typeof i1.FormComponentFieldComponent]>;
+    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: InjectionToken<unknown>;
+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/texteditor/_texteditor.scss

@@ -34,8 +34,6 @@
   $border-color: theming.get-color-from-palette($foreground, 'divider');
   $text-color: theming.get-color-from-palette($foreground, 'text');
 
-  @debug $border-color;
-
   .dbx-texteditor-field {
 
     .NgxEditor {

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

@@ -1,14 +1,13 @@
-import { MatInput } from '@angular/material/input';
+import { LogicalDateStringCode, Maybe, ReadableTimeString } from '@dereekb/util';
 import { DateTimeMinuteConfig } from '@dereekb/date';
 import { ChangeDetectorRef, OnDestroy, OnInit } from '@angular/core';
 import { AbstractControl, FormControl } from '@angular/forms';
 import { FieldType } from '@ngx-formly/material';
 import { FieldTypeConfig, FormlyFieldConfig } from '@ngx-formly/core';
 import { Observable } from 'rxjs';
-import { Maybe, ReadableTimeString } from '@dereekb/util';
 import { MatDatepickerInputEvent } from '@angular/material/datepicker';
 import * as i0 from "@angular/core";
-export declare enum DateTimeFieldTimeMode {
+export declare enum DbxDateTimeFieldTimeMode {
     /**
      * Time is required.
      */
@@ -34,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.
      *
@@ -57,7 +56,6 @@ export interface DateTimeFormlyFieldConfig extends FormlyFieldConfig {
 }
 export declare class DbxDateTimeFieldComponent extends FieldType<DateTimeFormlyFieldConfig & FieldTypeConfig> implements OnInit, OnDestroy {
     private readonly cdRef;
-    dateInput: MatInput;
     private _sub;
     private _valueSub;
     private _fullDayInputCtrl?;
@@ -73,20 +71,20 @@ export declare class DbxDateTimeFieldComponent extends FieldType<DateTimeFormlyF
      */
     readonly displayValue$: Observable<any>;
     readonly timeString$: Observable<ReadableTimeString>;
+    readonly dateInputCtrl: FormControl;
     readonly timeInputCtrl: FormControl;
-    private _date;
     private _config;
     get dateOnly(): boolean;
     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<Maybe<Date>>;
-    readonly dateValue$: Observable<Date | null | undefined>;
+    readonly date$: Observable<any>;
+    readonly dateValue$: Observable<Date | import("@dereekb/util").MaybeNot>;
     readonly timeInput$: Observable<ReadableTimeString>;
     readonly config$: Observable<Maybe<DateTimePickerConfiguration>>;
     readonly rawDateTime$: Observable<Maybe<Date>>;
@@ -94,8 +92,8 @@ export declare class DbxDateTimeFieldComponent extends FieldType<DateTimeFormlyF
     constructor(cdRef: ChangeDetectorRef);
     ngOnInit(): void;
     ngOnDestroy(): void;
-    dateTextChanged(e: any): void;
     datePicked(event: MatDatepickerInputEvent<Date>): void;
+    setLogicalTime(time: LogicalDateStringCode): void;
     setTime(time: ReadableTimeString): void;
     keydownOnInput(event: KeyboardEvent): void;
     focusTime(): void;

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

@@ -10,5 +10,5 @@ export declare const TAKE_NEXT_UPCOMING_TIME_CONFIG_OBS: () => Observable<DateTi
 /**
  * Same as DateTime field but with the Date input hidden by default.
  */
-export declare function timeOnlyField(config: Partial<TimeFieldConfig>): FormlyFieldConfig;
-export declare function dateTimeField(config: Partial<DateTimeFieldConfig>): FormlyFieldConfig;
+export declare function timeOnlyField(config?: Partial<TimeFieldConfig>): FormlyFieldConfig;
+export declare function dateTimeField(config?: Partial<DateTimeFieldConfig>): FormlyFieldConfig;

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) {