@dereekb/dbx-form 0.0.1 → 1.2.0

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

@@ -1,3 +1,4 @@
 export * from './pickable';
 export * from './searchable';
 export * from './selection';
+export * from './selection.module';

package/{src/lib → lib}/formly/field/selection/pickable/_pickable.scss

@@ -4,7 +4,16 @@
 
 
 // MARK: Mixin
-@mixin core() {}
+@mixin core() {
+  .dbx-pickable-item-field-filter {
+    margin-bottom: 4px;
+  }
+
+  .dbx-pickable-item-field-list-content {
+    max-height: 400px;
+    overflow: auto;
+  }
+}
 
 @mixin color($theme-config) {}
 

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

@@ -2,4 +2,5 @@ export * from './pickable.chip.field.component';
 export * from './pickable.field.directive';
 export * from './pickable.field.module';
 export * from './pickable.list.field.component';
+export * from './pickable.field';
 export * from './pickable';

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

@@ -3,8 +3,8 @@ import * as i0 from "@angular/core";
 /**
  * Used for picking pre-set values using chips as the presentation.
  */
-export declare class DbxPickableChipFieldComponent<T> extends AbstractDbxPickableItemFieldDirective<T> {
+export declare class DbxPickableChipListFieldComponent<T> extends AbstractDbxPickableItemFieldDirective<T> {
     itemClicked(item: PickableItemFieldItem<T>): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<DbxPickableChipFieldComponent<any>, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DbxPickableChipFieldComponent<any>, "ng-component", never, {}, {}, never, never>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DbxPickableChipListFieldComponent<any>, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DbxPickableChipListFieldComponent<any>, "ng-component", never, {}, {}, never, never>;
 }

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

@@ -0,0 +1,13 @@
+import { FormlyFieldConfig } from '@ngx-formly/core';
+import { Maybe } from '@dereekb/util';
+import { Observable } from 'rxjs';
+import { LabeledFieldConfig } from '../../field';
+import { PickableValueFieldDisplayValue } from './pickable';
+import { PickableItemFieldItem, PickableValueFieldsFieldConfig } from './pickable.field.directive';
+export { PickableItemFieldItem };
+export declare function filterPickableItemFieldValuesByLabel<T>(filterText: Maybe<string>, values: PickableValueFieldDisplayValue<T>[]): Observable<T[]>;
+export declare function sortPickableItemsByLabel<T>(chips: PickableItemFieldItem<T>[]): PickableItemFieldItem<T>[];
+export interface PickableItemFieldConfig<T = any> extends LabeledFieldConfig, PickableValueFieldsFieldConfig<T> {
+}
+export declare function pickableItemChipField<T = any>(config: PickableItemFieldConfig<T>): FormlyFieldConfig;
+export declare function pickableItemListField<T = any>(config: PickableItemFieldConfig<T>): FormlyFieldConfig;

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

@@ -1,19 +1,19 @@
 import { DbxInjectedComponentConfig } from "@dereekb/dbx-core";
-import { LoadingStateContextInstance, LoadingState } from "@dereekb/rxjs";
+import { LoadingState, ListLoadingStateContextInstance } from "@dereekb/rxjs";
 import { Maybe } from "@dereekb/util";
 import { OnDestroy, OnInit } from "@angular/core";
 import { FormControl, AbstractControl } from "@angular/forms";
 import { MatInput } from "@angular/material/input";
-import { FieldType, FormlyFieldConfig } from "@ngx-formly/core";
+import { FieldTypeConfig, FormlyFieldConfig } from "@ngx-formly/core";
+import { FieldType } from "@ngx-formly/material";
 import { Observable } from "rxjs";
 import { PickableValueFieldDisplayFn, PickableValueFieldDisplayValue, PickableValueFieldFilterFn, PickableValueFieldHashFn, PickableValueFieldLoadValuesFn, PickableValueFieldValue } from "./pickable";
+import { DbxValueListItem } from "@dereekb/dbx-web";
 import * as i0 from "@angular/core";
 /**
  * Wraps the selected state with the items.
  */
-export interface PickableItemFieldItem<T> {
-    display: PickableValueFieldDisplayValue<T>;
-    selected?: boolean;
+export interface PickableItemFieldItem<T> extends DbxValueListItem<PickableValueFieldDisplayValue<T>> {
 }
 export declare type PickableItemFieldItemSortFn<T> = (items: PickableItemFieldItem<T>[]) => PickableItemFieldItem<T>[];
 export interface PickableValueFieldsFieldConfig<T> {
@@ -76,7 +76,8 @@ export interface PickableValueFieldsFieldConfig<T> {
      */
     footerConfig?: DbxInjectedComponentConfig;
 }
-export interface PickableValueFieldsFormlyFieldConfig<T> extends PickableValueFieldsFieldConfig<T>, FormlyFieldConfig {
+export interface PickableValueFieldsFormlyFieldConfig<T> extends FormlyFieldConfig {
+    pickableField: PickableValueFieldsFieldConfig<T>;
 }
 /**
  * Displayed value with the computed hash.
@@ -87,7 +88,7 @@ export interface PickableValueFieldDisplayValueWithHash<T, M = any> extends Pick
 /**
  * Used for picking pre-set values using items as the presentation.
  */
-export declare class AbstractDbxPickableItemFieldDirective<T> extends FieldType<PickableValueFieldsFormlyFieldConfig<T>> implements OnInit, OnDestroy {
+export declare class AbstractDbxPickableItemFieldDirective<T> extends FieldType<PickableValueFieldsFormlyFieldConfig<T> & FieldTypeConfig> implements OnInit, OnDestroy {
     filterMatInput: MatInput;
     readonly inputCtrl: FormControl;
     private _formControlObs;
@@ -116,19 +117,22 @@ export declare class AbstractDbxPickableItemFieldDirective<T> extends FieldType<
     /**
      * Context used for managing the loading of items, or when the current results change.
      */
-    readonly context: LoadingStateContextInstance<any, LoadingState<any>>;
+    readonly context: ListLoadingStateContextInstance<any, LoadingState<any>>;
     readonly filterItemsLoadingState$: Observable<LoadingState>;
     /**
      * Context used for searching/filtering.
      */
-    readonly filterResultsContext: LoadingStateContextInstance<any, LoadingState<PickableValueFieldDisplayValueWithHash<T, any>[]>>;
+    readonly filterResultsContext: ListLoadingStateContextInstance<any, LoadingState<PickableValueFieldDisplayValueWithHash<T, any>[]>>;
+    readonly noItemsAvailable$: Observable<boolean>;
+    get readonly(): Maybe<boolean>;
+    get isReadonlyOrDisabled(): boolean;
+    get pickableField(): PickableValueFieldsFieldConfig<T>;
     get multiSelect(): boolean;
     get asArrayValue(): boolean;
     get filterLabel(): Maybe<string>;
-    get readonly(): Maybe<boolean>;
-    get required(): Maybe<boolean>;
-    get placeholder(): string;
-    get description(): Maybe<string>;
+    get name(): string;
+    get label(): Maybe<string>;
+    get autocomplete(): string;
     get sortItems(): Maybe<PickableItemFieldItemSortFn<T>>;
     get hashForValue(): PickableValueFieldHashFn<T>;
     get displayForValue(): PickableValueFieldDisplayFn<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.DbxPickableChipFieldComponent, typeof i2.DbxPickableListFieldComponent], [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 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.DbxAnchorModule, typeof i12.MatChipsModule, typeof i13.MatIconModule, typeof i11.DbxInjectedComponentModule, 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,11 +1,35 @@
-import { MatSelectionListChange } from "@angular/material/list";
-import { AbstractDbxPickableItemFieldDirective } from "./pickable.field.directive";
+import { DbxInjectedComponentConfig } from "@dereekb/dbx-core";
+import { AbstractDbxSelectionListWrapperDirective, AbstractSelectionValueListViewDirective, AbstractDbxSelectionValueListViewItemComponent } from "@dereekb/dbx-web";
+import { PickableValueFieldDisplayValue } from "./pickable";
+import { AbstractDbxPickableItemFieldDirective, PickableItemFieldItem } from "./pickable.field.directive";
 import * as i0 from "@angular/core";
 /**
  * Used for picking pre-set values using a selection list as the presentation.
  */
 export declare class DbxPickableListFieldComponent<T> extends AbstractDbxPickableItemFieldDirective<T> {
-    matSelectionChanged(selection: MatSelectionListChange): void;
+    onSelectionChange(event: unknown): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<DbxPickableListFieldComponent<any>, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<DbxPickableListFieldComponent<any>, "ng-component", never, {}, {}, never, never>;
 }
+export declare class DbxPickableListFieldItemListComponent<T> extends AbstractDbxSelectionListWrapperDirective<PickableItemFieldItem<T>> {
+    constructor();
+    static ɵfac: i0.ɵɵFactoryDeclaration<DbxPickableListFieldItemListComponent<any>, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DbxPickableListFieldItemListComponent<any>, "dbx-form-pickable-item-field-item-list", never, {}, {}, never, ["[top]", "[bottom]", "[empty]"]>;
+}
+/**
+ * NOTE: Values input are PickableItemFieldItem<T>, but output values are PickableValueFieldDisplayValue<T>.
+ */
+export declare class DbxPickableListFieldItemListViewComponent<T> extends AbstractSelectionValueListViewDirective<PickableItemFieldItem<T>> {
+    readonly dbxPickableListFieldComponent: DbxPickableListFieldComponent<T>;
+    readonly config: DbxInjectedComponentConfig;
+    get multiple(): boolean;
+    readonly items$: import("rxjs").Observable<import("@dereekb/dbx-web").DbxValueListItemConfig<PickableValueFieldDisplayValue<T, any>>[]>;
+    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>> {
+    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.scss

@@ -0,0 +1,59 @@
+@use '../../../../style/theming';
+
+// MARK: Variables
+
+
+// MARK: Mixin
+@mixin core() {
+
+  .dbx-searchable-text-field-value {
+    width: 100%;
+  }
+
+  .dbx-searchable-text-field-value.mat-option,
+  .dbx-searchable-text-field-autocomplete .mat-option {
+    padding: 0;
+  }
+
+  .dbx-default-searchable-field-display {
+    padding: 0 16px;
+  }
+
+  .dbx-searchable-text-field-has-value.dbx-searchable-text-field-show-value {
+
+    .dbx-searchable-text-field-value {
+      margin-bottom: -6px;
+    }
+
+    // hide without clearing display, which will prevent the input from being clickable.
+    .dbx-searchable-text-field-input {
+      height: 0;
+      opacity: 0;
+    }
+  }
+
+  .mat-focused .dbx-searchable-text-field-has-value.dbx-searchable-text-field-show-value .dbx-searchable-text-field-input {
+    opacity: unset;
+    height: unset;
+  }
+
+}
+
+@mixin color($theme-config) {}
+
+@mixin typography($typography-config) {}
+
+@mixin theme($theme-config) {
+  @include theming.private-check-duplicate-theme-styles($theme-config, 'dbx-form-field-selection-searchable') {
+    $color: theming.get-color-config($theme-config);
+    $typography: theming.get-typography-config($theme-config);
+
+    @if $color !=null {
+      @include color($theme-config);
+    }
+
+    @if $typography !=null {
+      @include typography($typography);
+    }
+  }
+}

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

@@ -4,13 +4,19 @@ import { AbstractDbxSearchableValueFieldDirective, SearchableValueFieldsFieldCon
 import * as i0 from "@angular/core";
 export interface SearchableChipValueFieldsFieldConfig<T> extends SearchableValueFieldsFieldConfig<T> {
 }
-export interface SearchableChipValueFieldsFormlyFieldConfig<T> extends SearchableChipValueFieldsFieldConfig<T>, SearchableValueFieldsFormlyFieldConfig<T> {
+export interface SearchableChipValueFieldsFormlyFieldConfig<T> extends SearchableValueFieldsFormlyFieldConfig<T> {
+    searchableField: SearchableChipValueFieldsFieldConfig<T>;
 }
 export declare class DbxSearchableChipFieldComponent<T> extends AbstractDbxSearchableValueFieldDirective<T, SearchableChipValueFieldsFormlyFieldConfig<T>> {
+    private _blur;
+    private _blurSub;
     readonly separatorKeysCodes: number[];
     selected(event: MatAutocompleteSelectedEvent): void;
     tabPressedOnInput(event: KeyboardEvent): boolean;
     addChip(event: MatChipInputEvent): void;
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    onBlur(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<DbxSearchableChipFieldComponent<any>, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<DbxSearchableChipFieldComponent<any>, "ng-component", never, {}, {}, never, never>;
 }

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

@@ -1,10 +1,6 @@
-import { ClickableAnchor } from '@dereekb/dbx-core';
-import { Type } from '@angular/core';
+import { DbxInjectedComponentConfig, ClickableAnchor } from '@dereekb/dbx-core';
 import { Observable } from 'rxjs';
 import { SelectionDisplayValue, SelectionValue, SelectionValueHashFn } from '../selection';
-export interface SearchableFieldDisplayComponent<T> {
-    displayValue?: SearchableValueFieldDisplayValue<T>;
-}
 export interface SearchableValueFieldValue<T, M = any> extends SelectionValue<T, M> {
     /**
      * Optional anchor metadata on the field.
@@ -15,11 +11,13 @@ export interface SearchableValueFieldValue<T, M = any> extends SelectionValue<T,
  * Displayed value.
  */
 export interface SearchableValueFieldDisplayValue<T, M = any> extends SelectionDisplayValue<T, M>, SearchableValueFieldValue<T, M> {
-    sublabel?: string;
     /**
-     * Custom component class to use.
+     * Display override configuration
      */
-    componentClass?: Type<SearchableFieldDisplayComponent<T>>;
+    display?: Partial<DbxInjectedComponentConfig>;
+}
+export interface ConfiguredSearchableValueFieldDisplayValue<T, M = any> extends Omit<SearchableValueFieldDisplayValue<T, M>, 'display'> {
+    display: DbxInjectedComponentConfig;
 }
 /**
  * SearchableValueField function for searching values.

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

@@ -1,20 +1,26 @@
-import { OnInit, ViewContainerRef } from '@angular/core';
-import { SearchableFieldDisplayComponent, SearchableValueFieldDisplayValue } from './searchable';
+import { Observable } from 'rxjs';
+import { InjectionToken, OnDestroy } from '@angular/core';
+import { ConfiguredSearchableValueFieldDisplayValue } from './searchable';
+import { DbxInjectedComponentConfig } from '@dereekb/dbx-core';
 import * as i0 from "@angular/core";
-export declare class DbxSearchableFieldAutocompleteItemComponent<T> implements OnInit {
-    content: ViewContainerRef;
-    displayValue?: SearchableValueFieldDisplayValue<T>;
-    ngOnInit(): void;
+export declare const DBX_SEARCHABLE_FIELD_COMPONENT_DATA: InjectionToken<unknown>;
+export declare class DbxSearchableFieldAutocompleteItemComponent<T> implements OnDestroy {
+    private _displayValue;
+    readonly displayValue$: Observable<ConfiguredSearchableValueFieldDisplayValue<T, any>>;
+    readonly config$: Observable<DbxInjectedComponentConfig>;
+    readonly anchor$: Observable<import("@dereekb/dbx-core").ClickableAnchor | undefined>;
+    set displayValue(displayValue: ConfiguredSearchableValueFieldDisplayValue<T>);
+    ngOnDestroy(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<DbxSearchableFieldAutocompleteItemComponent<any>, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<DbxSearchableFieldAutocompleteItemComponent<any>, "dbx-searchable-field-autocomplete-item", never, { "displayValue": "displayValue"; }, {}, never, never>;
 }
-export declare class DbxDefaultSearchableFieldDisplayComponent<T> implements SearchableFieldDisplayComponent<T> {
-    displayValue: SearchableValueFieldDisplayValue<T>;
-    static ɵfac: i0.ɵɵFactoryDeclaration<DbxDefaultSearchableFieldDisplayComponent<any>, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DbxDefaultSearchableFieldDisplayComponent<any>, "dbx-default-searchable-field-display", never, { "displayValue": "displayValue"; }, {}, never, never>;
+export declare abstract class AbstractDbxSearchableFieldDisplayDirective<T> {
+    readonly displayValue: ConfiguredSearchableValueFieldDisplayValue<T>;
+    constructor(displayValue: ConfiguredSearchableValueFieldDisplayValue<T>);
+    static ɵfac: i0.ɵɵFactoryDeclaration<AbstractDbxSearchableFieldDisplayDirective<any>, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<AbstractDbxSearchableFieldDisplayDirective<any>, never, never, {}, {}, never>;
 }
-export declare class DbxDefaultSearchableAnchorFieldDisplayComponent<T> implements SearchableFieldDisplayComponent<T> {
-    displayValue: SearchableValueFieldDisplayValue<T>;
-    static ɵfac: i0.ɵɵFactoryDeclaration<DbxDefaultSearchableAnchorFieldDisplayComponent<any>, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DbxDefaultSearchableAnchorFieldDisplayComponent<any>, "ng-component", never, { "displayValue": "displayValue"; }, {}, never, never>;
+export declare class DbxDefaultSearchableFieldDisplayComponent<T> extends AbstractDbxSearchableFieldDisplayDirective<T> {
+    static ɵfac: i0.ɵɵFactoryDeclaration<DbxDefaultSearchableFieldDisplayComponent<any>, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DbxDefaultSearchableFieldDisplayComponent<any>, "dbx-default-searchable-field-display", never, {}, {}, never, never>;
 }

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

@@ -1,16 +1,25 @@
+import { FormlyFieldConfig } from '@ngx-formly/core';
 import { Observable } from 'rxjs';
-import { FieldConfig } from '../../field';
+import { LabeledFieldConfig, DescriptionFieldConfig } from '../../field';
 import { SearchableValueFieldDisplayFn, SearchableValueFieldDisplayValue, SearchableValueFieldValue } from './searchable';
-import { SearchableChipValueFieldsFieldConfig, SearchableChipValueFieldsFormlyFieldConfig } from './searchable.chip.field.component';
-import { SearchableTextValueFieldsFieldConfig, SearchableTextValueFieldsFormlyFieldConfig } from './searchable.text.field.component';
-export declare function makeMetaFilterSearchableFieldValueDisplayFn<T = string | number>(loadMetaForValues: (values: SearchableValueFieldValue<T>[]) => Observable<SearchableValueFieldValue<T>[]>, makeDisplayForValues: (values: SearchableValueFieldValue<T>[]) => SearchableValueFieldDisplayValue<T>[]): SearchableValueFieldDisplayFn<T>;
-export interface SearchableChipFieldConfig<T = any> extends FieldConfig, SearchableChipValueFieldsFieldConfig<T> {
+import { SearchableChipValueFieldsFieldConfig } from './searchable.chip.field.component';
+import { SearchableTextValueFieldsFieldConfig } from './searchable.text.field.component';
+/**
+ * Used to create a SearchableValueFieldDisplayFn function that will retrieve the metadata for items that are missing their metadata so they can be displayed properly.
+ *
+ * @param param0
+ * @returns
+ */
+export declare function makeMetaFilterSearchableFieldValueDisplayFn<T = string | number, M = any>({ loadMetaForValues, makeDisplayForValues }: {
+    loadMetaForValues: (values: SearchableValueFieldValue<T, M>[]) => Observable<SearchableValueFieldValue<T, M>[]>;
+    makeDisplayForValues: (values: SearchableValueFieldValue<T, M>[]) => Observable<SearchableValueFieldDisplayValue<T, M>[]>;
+}): SearchableValueFieldDisplayFn<T>;
+export interface StringSearchableChipFieldConfig extends Omit<SearchableChipFieldConfig<string>, 'allowStringValues'> {
 }
-export interface SearchableChipFieldFormlyConfig<T = any> extends Omit<SearchableChipValueFieldsFormlyFieldConfig<T>, 'type'> {
+export declare function searchableStringChipField(config: StringSearchableChipFieldConfig): FormlyFieldConfig;
+export interface SearchableChipFieldConfig<T = any> extends LabeledFieldConfig, DescriptionFieldConfig, SearchableChipValueFieldsFieldConfig<T> {
 }
-export declare function searchableChipField<C extends SearchableChipFieldFormlyConfig<any>>(config: C): C;
-export interface SearchableTextFieldConfig<T = any> extends FieldConfig, SearchableTextValueFieldsFieldConfig<T> {
+export declare function searchableChipField<T>(config: SearchableChipFieldConfig<T>): FormlyFieldConfig;
+export interface SearchableTextFieldConfig<T = any> extends LabeledFieldConfig, DescriptionFieldConfig, SearchableTextValueFieldsFieldConfig<T> {
 }
-export interface SearchableTextFieldFormlyConfig<T = any> extends Omit<SearchableTextValueFieldsFormlyFieldConfig<T>, 'type'> {
-}
-export declare function searchableTextField<C extends SearchableTextFieldFormlyConfig<any>>(config: C): C;
+export declare function searchableTextField<T>(config: SearchableTextFieldConfig<T>): FormlyFieldConfig;

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

@@ -1,9 +1,11 @@
+import { DbxInjectedComponentConfig } from '@dereekb/dbx-core';
 import { SubscriptionObject, LoadingState, LoadingStateContextInstance } from '@dereekb/rxjs';
-import { ElementRef, OnDestroy, OnInit, Type } from '@angular/core';
+import { ChangeDetectorRef, ElementRef, OnDestroy, OnInit } from '@angular/core';
 import { AbstractControl, FormControl, ValidatorFn } from '@angular/forms';
-import { FieldType, FormlyFieldConfig } from '@ngx-formly/core';
+import { FieldTypeConfig, FormlyFieldConfig } from '@ngx-formly/core';
+import { FieldType } from '@ngx-formly/material';
 import { Observable } from 'rxjs';
-import { SearchableValueFieldHashFn, SearchableValueFieldStringSearchFn, SearchableValueFieldDisplayFn, SearchableValueFieldDisplayValue, SearchableValueFieldValue, SearchableFieldDisplayComponent, SearchableValueFieldAnchorFn } from './searchable';
+import { SearchableValueFieldHashFn, SearchableValueFieldStringSearchFn, SearchableValueFieldDisplayFn, SearchableValueFieldDisplayValue, SearchableValueFieldValue, SearchableValueFieldAnchorFn, ConfiguredSearchableValueFieldDisplayValue } from './searchable';
 import { Maybe } from '@dereekb/util';
 import * as i0 from "@angular/core";
 export interface StringValueFieldsFieldConfig {
@@ -11,10 +13,6 @@ export interface StringValueFieldsFieldConfig {
      * Custom input validators.
      */
     textInputValidator?: ValidatorFn | ValidatorFn[];
-    /**
-     * Optional description/hint to display.
-     */
-    description?: string;
 }
 export interface StringValueFieldsFormlyFieldConfig extends StringValueFieldsFieldConfig, FormlyFieldConfig {
 }
@@ -42,9 +40,9 @@ export interface SearchableValueFieldsFieldConfig<T> extends StringValueFieldsFi
      */
     searchOnEmptyText?: boolean;
     /**
-     * Custom component class to use by default.
+     * Default injected config to use for display values.
      */
-    componentClass?: Type<SearchableFieldDisplayComponent<T>>;
+    display?: Partial<DbxInjectedComponentConfig>;
     /**
      * Used for building a display value given the input.
      */
@@ -61,20 +59,29 @@ export interface SearchableValueFieldsFieldConfig<T> extends StringValueFieldsFi
      * Only used when useAnchor is true.
      */
     anchorForValue?: SearchableValueFieldAnchorFn<T>;
+    /**
+     * Whether or not to show "Clear" in the autcomplete list.
+     */
+    showClearValue?: boolean;
 }
-export interface SearchableValueFieldsFormlyFieldConfig<T> extends SearchableValueFieldsFieldConfig<T>, FormlyFieldConfig {
+export interface SearchableValueFieldsFormlyFieldConfig<T> extends FormlyFieldConfig {
+    searchableField: SearchableValueFieldsFieldConfig<T>;
 }
 /**
  * Abstract searchable field that provides a feature for searching for values, and for displaying values using Observables.
  *
  * Display values are cached for performance.
  */
-export declare abstract class AbstractDbxSearchableValueFieldDirective<T, C extends SearchableValueFieldsFormlyFieldConfig<T>> extends FieldType<C> implements OnInit, OnDestroy {
+export declare abstract class AbstractDbxSearchableValueFieldDirective<T, C extends SearchableValueFieldsFormlyFieldConfig<T>> extends FieldType<C & FieldTypeConfig> implements OnInit, OnDestroy {
+    readonly cdRef: ChangeDetectorRef;
     /**
      * Whether or not to set/get values as an array.
      */
     multiSelect: boolean;
-    defaultComponentClass?: Type<SearchableFieldDisplayComponent<T>>;
+    /**
+     * Optional override set by the parent class for picking a default display for this directive.
+     */
+    defaultDisplay?: DbxInjectedComponentConfig;
     textInput: ElementRef<HTMLInputElement>;
     readonly inputCtrl: FormControl;
     private _formControlObs;
@@ -82,34 +89,34 @@ export declare abstract class AbstractDbxSearchableValueFieldDirective<T, C exte
     private _displayHashMap;
     readonly inputValue$: Observable<string>;
     readonly inputValueString$: Observable<string>;
-    readonly searchResultsState$: Observable<LoadingState<any> | LoadingState<SearchableValueFieldDisplayValue<T, any>[]>>;
+    readonly searchResultsState$: Observable<LoadingState<any> | LoadingState<ConfiguredSearchableValueFieldDisplayValue<T, any>[]>>;
     readonly singleValueSyncSubscription: SubscriptionObject;
-    readonly searchContext: LoadingStateContextInstance<any, LoadingState<any> | LoadingState<SearchableValueFieldDisplayValue<T, any>[]>>;
-    readonly searchResults$: Observable<SearchableValueFieldDisplayValue<T>[]>;
+    readonly searchContext: LoadingStateContextInstance<any, LoadingState<any> | LoadingState<ConfiguredSearchableValueFieldDisplayValue<T, any>[]>>;
+    readonly searchResults$: Observable<ConfiguredSearchableValueFieldDisplayValue<T>[]>;
     readonly _formControlValue: Observable<T | T[]>;
     readonly values$: Observable<T[]>;
-    readonly displayValuesState$: Observable<LoadingState<SearchableValueFieldDisplayValue<T>[]>>;
-    readonly displayValues$: Observable<SearchableValueFieldDisplayValue<T>[]>;
+    readonly displayValuesState$: Observable<LoadingState<ConfiguredSearchableValueFieldDisplayValue<T>[]>>;
+    readonly displayValues$: Observable<ConfiguredSearchableValueFieldDisplayValue<T>[]>;
     get name(): string;
     get label(): Maybe<string>;
     get readonly(): Maybe<boolean>;
+    get searchableField(): SearchableValueFieldsFieldConfig<T>;
     get searchOnEmptyText(): boolean;
-    get required(): Maybe<boolean>;
     get autocomplete(): string;
-    get placeholder(): string;
-    get description(): Maybe<string>;
     get hashForValue(): SearchableValueFieldHashFn<T>;
     get displayForValue(): SearchableValueFieldDisplayFn<T>;
     get useAnchor(): Maybe<boolean>;
     get anchorForValue(): Maybe<SearchableValueFieldAnchorFn<T>>;
-    get componentClass(): Maybe<Type<SearchableFieldDisplayComponent<T>>>;
+    get display(): Maybe<Partial<DbxInjectedComponentConfig>>;
     get search(): SearchableValueFieldStringSearchFn<T>;
     get values(): T[];
     get allowStringValues(): boolean;
     get convertStringValue(): Maybe<(text: string) => T>;
-    loadDisplayValuesForValues(values: T[]): Observable<LoadingState<SearchableValueFieldDisplayValue<T>[]>>;
-    loadDisplayValuesForFieldValues(values: SearchableValueFieldValue<T>[]): Observable<LoadingState<SearchableValueFieldDisplayValue<T>[]>>;
-    getDisplayValuesForFieldValues(values: SearchableValueFieldValue<T>[]): Observable<SearchableValueFieldDisplayValue<T>[]>;
+    get showClearValue(): boolean;
+    loadDisplayValuesForValues(values: T[]): Observable<LoadingState<ConfiguredSearchableValueFieldDisplayValue<T>[]>>;
+    loadDisplayValuesForFieldValues(values: SearchableValueFieldValue<T>[]): Observable<LoadingState<ConfiguredSearchableValueFieldDisplayValue<T>[]>>;
+    getDisplayValuesForFieldValues(values: SearchableValueFieldValue<T>[]): Observable<ConfiguredSearchableValueFieldDisplayValue<T>[]>;
+    constructor(cdRef: ChangeDetectorRef);
     ngOnInit(): void;
     ngOnDestroy(): void;
     /**
@@ -121,8 +128,10 @@ export declare abstract class AbstractDbxSearchableValueFieldDirective<T, C exte
     protected _addWithTextValue(text: string): void;
     addWithDisplayValue(displayValue: SearchableValueFieldDisplayValue<T>): void;
     removeWithDisplayValue(displayValue: SearchableValueFieldDisplayValue<T>): void;
+    _tryAddCurrentInputValue(): boolean;
     addValue(value: T): void;
     removeValue(value: T): void;
+    clearValues(): void;
     setValues(values: T[]): void;
     protected _getValueOnFormControl(valueOnFormControl: any): T[];
     protected _setValueOnFormControl(values: T[]): void;

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 i3.DbxDefaultSearchableAnchorFieldDisplayComponent], [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.DbxAnchorModule, typeof i13.MatChipsModule, typeof i14.MatIconModule, typeof i12.DbxInjectedComponentModule, typeof i15.FormlyModule], [typeof i1.DbxSearchableChipFieldComponent, typeof i2.DbxSearchableTextFieldComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<DbxFormFormlySearchableFieldModule>;
 }

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

@@ -1,14 +1,24 @@
 import { AbstractDbxSearchableValueFieldDirective, SearchableValueFieldsFieldConfig, SearchableValueFieldsFormlyFieldConfig } from './searchable.field.directive';
 import * as i0 from "@angular/core";
 export interface SearchableTextValueFieldsFieldConfig<T> extends SearchableValueFieldsFieldConfig<T> {
+    showSelectedValue?: boolean;
 }
-export interface SearchableTextValueFieldsFormlyFieldConfig<T> extends SearchableTextValueFieldsFieldConfig<T>, SearchableValueFieldsFormlyFieldConfig<T> {
+export interface SearchableTextValueFieldsFormlyFieldConfig<T> extends SearchableValueFieldsFormlyFieldConfig<T> {
+    searchableField: SearchableTextValueFieldsFieldConfig<T>;
 }
 /**
  * Display component for selecting a single item/value.
  */
 export declare class DbxSearchableTextFieldComponent<T> extends AbstractDbxSearchableValueFieldDirective<T, SearchableTextValueFieldsFormlyFieldConfig<T>> {
+    readonly selectedDisplayValue$: import("rxjs").Observable<import("@dereekb/dbx-form").ConfiguredSearchableValueFieldDisplayValue<T, any>>;
+    readonly hasValue$: import("rxjs").Observable<boolean>;
+    readonly showSelectedDisplayValue$: import("rxjs").Observable<boolean>;
+    get searchableField(): SearchableTextValueFieldsFieldConfig<T>;
+    get showSelectedValue(): boolean;
     readonly multiSelect = false;
+    private _clearInputSub;
+    ngOnInit(): void;
+    ngOnDestroy(): void;
     selected(event: any): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<DbxSearchableTextFieldComponent<any>, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<DbxSearchableTextFieldComponent<any>, "ng-component", never, {}, {}, never, never>;

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

@@ -1,7 +1,7 @@
 import { FormlyFieldConfig } from "@ngx-formly/core";
-import { FieldConfig } from "../../field";
+import { LabeledFieldConfig } from "../../field";
 import { StringValueFieldsFieldConfig, StringValueFieldsFormlyFieldConfig } from "./searchable.field.directive";
-export interface ChipTextFieldConfig extends FieldConfig, StringValueFieldsFieldConfig {
+export interface ChipTextFieldConfig extends LabeledFieldConfig, StringValueFieldsFieldConfig {
 }
 export interface ChipTextFieldFormlyConfig extends StringValueFieldsFormlyFieldConfig, FormlyFieldConfig {
     caseSensitive?: boolean;

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

@@ -14,6 +14,7 @@ export interface SelectionValue<T, M = any> {
  */
 export interface SelectionDisplayValue<T, M = any> extends SelectionValue<T, M> {
     label: string;
+    sublabel?: string;
     /**
      * Whether or not the value is known.
      */

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

@@ -0,0 +1,9 @@
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/common";
+import * as i2 from "./pickable/pickable.field.module";
+import * as i3 from "./searchable/searchable.field.module";
+export declare class DbxFormFormlySelectionModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<DbxFormFormlySelectionModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<DbxFormFormlySelectionModule, never, [typeof i1.CommonModule], [typeof i2.DbxFormFormlyPickableFieldModule, typeof i3.DbxFormFormlySearchableFieldModule]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<DbxFormFormlySelectionModule>;
+}