@dereekb/dbx-form 9.21.0 → 9.22.1

package/lib/formly/_formly.scss

@@ -4,6 +4,10 @@
 
 // MARK: Mixin
 @mixin core() {
+  // MARK: Material Fixes
+  .mat-form-field-appearance-standard .mat-form-field-appearance-outline .mat-form-field-flex {
+    padding-top: unset;
+  }
 }
 
 @mixin color($theme-config) {

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

@@ -2,6 +2,7 @@ import { AsyncValidatorFn, ValidatorFn } from '@angular/forms';
 import { FilterKeyValueTuplesInput, GeneralFilterFromPOJOFunction, ArrayOrValue, Maybe, MapFunction } from '@dereekb/util';
 import { FormlyFieldConfig, FormlyFieldProps } from '@ngx-formly/core';
 import { ValidationMessageOption } from '@ngx-formly/core/lib/models';
+import { FormlyFieldProps as MaterialFormlyFormFieldProps } from '@ngx-formly/material/form-field';
 export declare type FormlyValueParser<I = any, O = any> = MapFunction<I, O>;
 export interface FieldConfigParsersRef {
     parsers: FormlyValueParser[];
@@ -90,6 +91,9 @@ export declare type ValidatorsForFieldConfig = {
     };
 };
 export declare function validatorsForFieldConfig(input: ValidatorsForFieldConfigInput): Maybe<ValidatorsForFieldConfig>;
+export interface MaterialFormFieldConfig {
+    materialFormField?: Pick<MaterialFormlyFormFieldProps, 'prefix' | 'suffix' | 'hideLabel' | 'hideRequiredMarker' | 'hideFieldUnderline' | 'floatLabel' | 'appearance' | 'color' | 'hintStart' | 'hintEnd'>;
+}
 /**
  * MARK: Compat
  *

package/lib/formly/field/selection/_selection.scss

@@ -1,21 +1,25 @@
 @use './list/list';
 @use './pickable/pickable';
 @use './searchable/searchable';
+@use './sourceselect/sourceselect';
 
 @mixin all-selection-core() {
   @include list.core();
   @include pickable.core();
   @include searchable.core();
+  @include sourceselect.core();
 }
 
 @mixin all-selection-typography($typography-config) {
   @include list.typography($typography-config);
   @include pickable.typography($typography-config);
   @include searchable.typography($typography-config);
+  @include sourceselect.typography($typography-config);
 }
 
 @mixin all-selection-theme($theme-config) {
   @include list.theme($theme-config);
   @include pickable.theme($theme-config);
   @include searchable.theme($theme-config);
+  @include sourceselect.theme($theme-config);
 }

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

@@ -1,6 +1,7 @@
 export * from './list';
 export * from './pickable';
 export * from './searchable';
+export * from './sourceselect';
 export * from './selection';
 export * from './selection.field';
 export * from './selection.module';

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

@@ -9,7 +9,7 @@ import { Observable } from 'rxjs';
 import * as i0 from "@angular/core";
 export interface DbxItemListFieldProps<T = unknown, C extends AbstractDbxSelectionListWrapperDirective<T> = AbstractDbxSelectionListWrapperDirective<T>, K extends PrimativeKey = PrimativeKey> extends Pick<FormlyFieldProps, 'label' | 'description'> {
     /**
-     * list to load/initialize
+     * List to render components from
      */
     readonly listComponentClass: Observable<Type<C>>;
     /**

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

@@ -1,7 +1,7 @@
 import { FormlyFieldConfig } from '@ngx-formly/core';
 import { Maybe, SearchStringFilterFunction } from '@dereekb/util';
 import { Observable } from 'rxjs';
-import { LabeledFieldConfig } from '../../field';
+import { LabeledFieldConfig, MaterialFormFieldConfig } from '../../field';
 import { PickableValueFieldDisplayValue } from './pickable';
 import { PickableItemFieldItem, PickableValueFieldsFieldProps } from './pickable.field.directive';
 export { PickableItemFieldItem };
@@ -9,7 +9,7 @@ export declare const filterPickableItemFieldValuesByLabelFilterFunction: SearchS
 export declare function filterPickableItemFieldValuesByLabel<T>(filterText: Maybe<string>, values: PickableValueFieldDisplayValue<T>[]): Observable<T[]>;
 export declare const sortPickableItemsByLabelStringFunction: import("@dereekb/util").SortByStringFunction<PickableItemFieldItem<any, unknown>>;
 export declare function sortPickableItemsByLabel<T>(chips: PickableItemFieldItem<T>[]): PickableItemFieldItem<T>[];
-export interface PickableItemFieldConfig<T = unknown, M = unknown> extends LabeledFieldConfig, PickableValueFieldsFieldProps<T, M> {
+export interface PickableItemFieldConfig<T = unknown, M = unknown> extends LabeledFieldConfig, PickableValueFieldsFieldProps<T, M>, MaterialFormFieldConfig {
 }
 export declare function pickableItemChipField<T = unknown, M = unknown>(config: PickableItemFieldConfig<T, M>): FormlyFieldConfig;
 export declare function pickableItemListField<T = unknown, M = unknown>(config: PickableItemFieldConfig<T, M>): FormlyFieldConfig;

package/lib/formly/field/selection/searchable/_searchable.scss

@@ -24,12 +24,14 @@
 
     // hide without clearing display, which will prevent the input from being clickable.
     .dbx-searchable-text-field-input {
+      margin-top: 0;
       height: 0;
       opacity: 0;
     }
   }
 
   .mat-focused .dbx-searchable-text-field-has-value.dbx-searchable-text-field-show-value .dbx-searchable-text-field-input {
+    margin-top: 8px;
     opacity: unset;
     height: unset;
   }

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

@@ -1,4 +1,4 @@
-import { PrimativeKey } from '@dereekb/util';
+import { MapFunction, PrimativeKey } from '@dereekb/util';
 import { DbxInjectionComponentConfig, ClickableAnchor } from '@dereekb/dbx-core';
 import { Observable } from 'rxjs';
 import { SelectionDisplayValue, SelectionValue, SelectionValueHashFn } from '../selection';
@@ -23,7 +23,7 @@ export interface ConfiguredSearchableValueFieldDisplayValue<T, M = unknown> exte
 /**
  * SearchableValueField function for searching values.
  */
-export declare type SearchableValueFieldStringSearchFn<T, M = unknown> = (search: string) => Observable<SearchableValueFieldValue<T, M>[]>;
+export declare type SearchableValueFieldStringSearchFn<T, M = unknown> = MapFunction<string, Observable<SearchableValueFieldValue<T, M>[]>>;
 /**
  * SearchableValueField function that allows the values a chance to go through another observable for unknown changes.
  *
@@ -31,9 +31,9 @@ export declare type SearchableValueFieldStringSearchFn<T, M = unknown> = (search
  *
  * The value itself should not change. All other fields on the value may change, however.
  */
-export declare type SearchableValueFieldDisplayFn<T, M = unknown> = (values: SearchableValueFieldValue<T, M>[]) => Observable<SearchableValueFieldDisplayValue<T, M>[]>;
+export declare type SearchableValueFieldDisplayFn<T, M = unknown> = MapFunction<SearchableValueFieldValue<T, M>[], Observable<SearchableValueFieldDisplayValue<T, M>[]>>;
 /**
  * SearchableValueField function for setting anchor values on a field value.
  */
-export declare type SearchableValueFieldAnchorFn<T, M = unknown> = (value: SearchableValueFieldValue<T, M>) => ClickableAnchor;
+export declare type SearchableValueFieldAnchorFn<T, M = unknown> = MapFunction<SearchableValueFieldValue<T, M>, ClickableAnchor>;
 export declare type SearchableValueFieldHashFn<T, H extends PrimativeKey = PrimativeKey> = SelectionValueHashFn<T, H>;

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

@@ -1,7 +1,7 @@
 import { PrimativeKey } from '@dereekb/util';
 import { FormlyFieldConfig } from '@ngx-formly/core';
 import { Observable } from 'rxjs';
-import { LabeledFieldConfig, DescriptionFieldConfig } from '../../field';
+import { LabeledFieldConfig, DescriptionFieldConfig, MaterialFormFieldConfig } from '../../field';
 import { SearchableValueFieldDisplayFn, SearchableValueFieldDisplayValue, SearchableValueFieldValue } from './searchable';
 import { SearchableChipValueFieldsFieldProps } from './searchable.chip.field.component';
 import { SearchableTextValueFieldsFieldProps } from './searchable.text.field.component';
@@ -17,9 +17,9 @@ export declare function makeMetaFilterSearchableFieldValueDisplayFn<T extends st
 }): SearchableValueFieldDisplayFn<T, M>;
 export declare type StringSearchableChipFieldConfig<M = unknown> = Omit<SearchableChipFieldConfig<string, M>, 'allowStringValues'>;
 export declare function searchableStringChipField<M = unknown>(config: StringSearchableChipFieldConfig<M>): FormlyFieldConfig;
-export interface SearchableChipFieldConfig<T = unknown, M = unknown, H extends PrimativeKey = PrimativeKey> extends LabeledFieldConfig, DescriptionFieldConfig, SearchableChipValueFieldsFieldProps<T, M, H> {
+export interface SearchableChipFieldConfig<T = unknown, M = unknown, H extends PrimativeKey = PrimativeKey> extends LabeledFieldConfig, DescriptionFieldConfig, MaterialFormFieldConfig, SearchableChipValueFieldsFieldProps<T, M, H> {
 }
 export declare function searchableChipField<T, M = unknown, H extends PrimativeKey = PrimativeKey>(config: SearchableChipFieldConfig<T, M, H>): FormlyFieldConfig;
-export interface SearchableTextFieldConfig<T = unknown, M = unknown, H extends PrimativeKey = PrimativeKey> extends LabeledFieldConfig, DescriptionFieldConfig, SearchableTextValueFieldsFieldProps<T, M, H> {
+export interface SearchableTextFieldConfig<T = unknown, M = unknown, H extends PrimativeKey = PrimativeKey> extends LabeledFieldConfig, DescriptionFieldConfig, MaterialFormFieldConfig, SearchableTextValueFieldsFieldProps<T, M, H> {
 }
 export declare function searchableTextField<T, M = unknown, H extends PrimativeKey = PrimativeKey>(config: SearchableTextFieldConfig<T, M, H>): FormlyFieldConfig;

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

@@ -99,7 +99,7 @@ export declare abstract class AbstractDbxSearchableValueFieldDirective<T, M = un
     readonly singleValueSyncSubscription: SubscriptionObject;
     readonly searchContext: LoadingStateContextInstance<unknown, LoadingState<ConfiguredSearchableValueFieldDisplayValue<T, M>[]>>;
     readonly searchResults$: Observable<ConfiguredSearchableValueFieldDisplayValue<T, M>[]>;
-    readonly _formControlValue$: Observable<T | T[]>;
+    readonly currentFormControlValue$: Observable<T | T[]>;
     readonly values$: Observable<T[]>;
     readonly displayValuesState$: Observable<LoadingState<ConfiguredSearchableValueFieldDisplayValue<T, M>[]>>;
     readonly displayValues$: Observable<ConfiguredSearchableValueFieldDisplayValue<T, M>[]>;

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

@@ -1,6 +1,6 @@
 import { ObservableOrValue } from '@dereekb/rxjs';
 import { FormlyFieldConfig } from '@ngx-formly/core';
-import { DescriptionFieldConfig, LabeledFieldConfig } from '../field';
+import { DescriptionFieldConfig, LabeledFieldConfig, MaterialFormFieldConfig } from '../field';
 export interface ValueSelectionOptionWithValue<T> {
     value: T;
     label: string;
@@ -11,7 +11,7 @@ export interface ValueSelectionOptionClear {
     clear: true;
 }
 export declare type ValueSelectionOption<T> = ValueSelectionOptionWithValue<T> | ValueSelectionOptionClear;
-export interface ValueSelectionFieldConfig<T> extends LabeledFieldConfig, DescriptionFieldConfig {
+export interface ValueSelectionFieldConfig<T> extends LabeledFieldConfig, DescriptionFieldConfig, MaterialFormFieldConfig {
     /**
      * Whether or not to use the native select.
      *
@@ -22,8 +22,17 @@ export interface ValueSelectionFieldConfig<T> extends LabeledFieldConfig, Descri
      * Whether or not to add a clear option to the input values. If using an observable, this
      */
     addClearOption?: string | boolean;
+    /**
+     * Values to select from.
+     */
     options: ObservableOrValue<ValueSelectionOption<T>[]>;
+    /**
+     * Allow selecting multiple values and return an array.
+     */
     multiple?: boolean;
+    /**
+     * The select all option configuration.
+     */
     selectAllOption?: true | string;
 }
 export declare function valueSelectionField<T>(config: ValueSelectionFieldConfig<T>): FormlyFieldConfig;

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

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

package/lib/formly/field/selection/sourceselect/_sourceselect.scss

@@ -0,0 +1,54 @@
+@use '../../../../style/theming';
+
+// MARK: Variables
+
+// MARK: Mixin
+@mixin core() {
+  .dbx-source-select-field-loading {
+    /*
+    position: absolute;
+    bottom: 4px;
+    left: 0;
+    right: 0;
+    */
+
+    position: absolute;
+    bottom: 0px;
+    left: -12px;
+    right: -12px;
+  }
+
+  .dbx-source-select-field-content {
+    display: flex;
+
+    .dbx-source-select-field-select {
+    }
+
+    .dbx-source-select-field-button {
+      margin-top: -16px;
+      height: 10px;
+      overflow: visible;
+    }
+  }
+}
+
+@mixin color($theme-config) {
+}
+
+@mixin typography($typography-config) {
+}
+
+@mixin theme($theme-config) {
+  @include theming.private-check-duplicate-theme-styles($theme-config, 'dbx-form-field-source-select') {
+    $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/sourceselect/index.d.ts

@@ -0,0 +1,4 @@
+export * from './sourceselect.field.component';
+export * from './sourceselect.field';
+export * from './sourceselect.field.module';
+export * from './sourceselect';

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

@@ -0,0 +1,97 @@
+import { SelectionDisplayValue } from './../selection';
+import { LoadingState } from '@dereekb/rxjs';
+import { Factory, FactoryWithRequiredInput, MapFunction, Maybe, PrimativeKey } from '@dereekb/util';
+import { Observable } from 'rxjs';
+export interface SourceSelectValue<T extends PrimativeKey = PrimativeKey, M = unknown> {
+    value: T;
+    meta: M;
+}
+/**
+ * Group of SourceSelectValues with a label.
+ */
+export interface SourceSelectValueGroup<T extends PrimativeKey = PrimativeKey, M = unknown> {
+    /**
+     * Label for this source.
+     */
+    readonly label: string;
+    /**
+     * Values
+     */
+    readonly values: SourceSelectValue<T, M>[];
+}
+/**
+ * Display value configuration for a SourceSelectValue.
+ */
+export declare type SourceSelectDisplayValue<T extends PrimativeKey = PrimativeKey, M = unknown> = Omit<SelectionDisplayValue<T, M>, 'meta'> & Pick<SourceSelectValue<T, M>, 'meta'>;
+/**
+ * Display value configuration for a SourceSelectValue.
+ */
+export interface SourceSelectDisplayValueGroup<T extends PrimativeKey = PrimativeKey, M = unknown> {
+    /**
+     * Label for this source.
+     */
+    readonly label: string;
+    /**
+     * Values
+     */
+    readonly values: SourceSelectDisplayValue<T, M>[];
+}
+/**
+ * Options for a SourceSelect input.
+ */
+export interface SourceSelectOptions<T extends PrimativeKey = PrimativeKey, M = unknown> {
+    readonly nonGroupedValues: SourceSelectDisplayValue<T, M>[];
+    readonly groupedValues: SourceSelectDisplayValueGroup<T, M>[];
+}
+/**
+ * Returns an observable that loads all the display info for the input values.
+ */
+export declare type SourceSelectDisplayFunction<T extends PrimativeKey = PrimativeKey, M = unknown> = MapFunction<SourceSelectValue<T, M>[], Observable<SourceSelectDisplayValue<T, M>[]>>;
+/**
+ * Reads the value from the input meta value. Should always return the same value.
+ */
+export declare type SourceSelectMetaValueReader<T extends PrimativeKey = PrimativeKey, M = unknown> = MapFunction<M, T>;
+/**
+ * Returns an observable that loads the metadata of the input values.
+ */
+export declare type SourceSelectValueMetaLoader<T extends PrimativeKey = PrimativeKey, M = unknown> = FactoryWithRequiredInput<Observable<M[]>, T[]>;
+/**
+ * Returns an observable that returns an array of meta values to be added to the selection.
+ */
+export declare type SourceSelectOpenFunction<M = unknown> = Factory<Observable<SourceSelectOpenSourceResult<M>>>;
+/**
+ * Returns an observable that returns an array of meta values to be added to the selection.
+ */
+export interface SourceSelectOpenSourceResult<M = unknown> {
+    /**
+     * New values to select, if applicable.
+     */
+    readonly select?: Maybe<M[]>;
+    /**
+     * New options to make available.
+     */
+    readonly options?: Maybe<M[]>;
+}
+/**
+ * Function used to return an observable for an array of SourceSelectLoadSource values.
+ */
+export declare type SourceSelectLoadSourcesFunction<M = unknown> = Factory<Observable<SourceSelectLoadSource<M>[]>>;
+/**
+ * Source that has a label and an observable of meta values.
+ */
+export interface SourceSelectLoadSource<M = unknown> {
+    /**
+     * Label for this source.
+     */
+    readonly label: string;
+    /**
+     * Metadata loaded from this source.
+     */
+    readonly meta: Observable<LoadingState<M[]>>;
+}
+export interface SourceSelectLoadSourceLoadingState<M = unknown> extends LoadingState<M[]> {
+    /**
+     * Label for this source.
+     */
+    readonly label: string;
+}

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

@@ -0,0 +1,92 @@
+import { LoadingState, LoadingStateWithMaybeSoValue } from '@dereekb/rxjs';
+import { OnDestroy, OnInit } from '@angular/core';
+import { Observable } from 'rxjs';
+import { HandleActionWithContext } from '@dereekb/dbx-core';
+import { PrimativeKey } from '@dereekb/util';
+import { FieldType, FormlyFieldProps } from '@ngx-formly/material/form-field';
+import { FieldTypeConfig } from '@ngx-formly/core';
+import { SourceSelectValueMetaLoader, SourceSelectMetaValueReader, SourceSelectOpenFunction, SourceSelectLoadSourcesFunction, SourceSelectDisplayValue, SourceSelectValue, SourceSelectDisplayFunction, SourceSelectDisplayValueGroup, SourceSelectValueGroup, SourceSelectOptions } from './sourceselect';
+import { AbstractControl } from '@angular/forms';
+import * as i0 from "@angular/core";
+export interface SourceSelectFieldProps<T extends PrimativeKey = PrimativeKey, M = unknown> extends FormlyFieldProps {
+    /**
+     * Function to open the source and request values.
+     */
+    readonly openSource?: SourceSelectOpenFunction<M>;
+    /**
+     * Loads the sources to display entries from.
+     */
+    readonly loadSources?: SourceSelectLoadSourcesFunction<M>;
+    /**
+     * Reads the value from a meta value.
+     */
+    readonly valueReader: SourceSelectMetaValueReader<T, M>;
+    /**
+     * Loads metadata for the input values.
+     */
+    readonly metaLoader: SourceSelectValueMetaLoader<T, M>;
+    /**
+     * Used for building a display value given the input.
+     */
+    readonly displayForValue: SourceSelectDisplayFunction<T, M>;
+    /**
+     * Select button icon
+     */
+    readonly selectButtonIcon?: string;
+    /**
+     * Whether or not the selection is as an array.
+     */
+    readonly multiple?: boolean;
+    /**
+     * (Optional) observable that will trigger the clearing of all cached display values.
+     */
+    readonly refreshDisplayValues$?: Observable<unknown>;
+}
+/**
+ * Component that displays a select view (multi or not)
+ */
+export declare class DbxFormSourceSelectFieldComponent<T extends PrimativeKey = PrimativeKey, M = unknown> extends FieldType<FieldTypeConfig<SourceSelectFieldProps<T, M>>> implements OnInit, OnDestroy {
+    private _cacheMetaSub;
+    private _clearDisplayHashMapSub;
+    private _valueMetaHashMap;
+    private _displayHashMap;
+    private _formControlObs;
+    private _fromOpenSource;
+    private _loadSources;
+    readonly formControl$: Observable<AbstractControl<T[], T[]>>;
+    readonly currentFormControlValue$: Observable<T[]>;
+    readonly values$: Observable<T[]>;
+    readonly allValuesEverSelected$: Observable<T[]>;
+    readonly sourceSelectValuesFromValuesState$: Observable<LoadingState<SourceSelectValue<T, M>[]>>;
+    readonly loadSources$: Observable<LoadingState<SourceSelectValueGroup<T, M>[]>>;
+    readonly fromOpenSource$: Observable<SourceSelectValueGroup<T, M>>;
+    readonly valueGroupsFromSourcesState$: Observable<LoadingStateWithMaybeSoValue<SourceSelectValueGroup<T, M>[]>>;
+    readonly allValueGroupsState$: Observable<LoadingState<SourceSelectValueGroup<T, M>[]>>;
+    readonly allOptionGroupsState$: Observable<LoadingState<SourceSelectDisplayValueGroup<T, M>[]>>;
+    readonly allOptionGroups$: Observable<SourceSelectDisplayValueGroup<T, M>[]>;
+    readonly options$: Observable<SourceSelectOptions<T, M>>;
+    readonly nonGroupedValues$: Observable<SourceSelectDisplayValue<T, M>[]>;
+    readonly groupedOptions$: Observable<SourceSelectDisplayValueGroup<T, M>[]>;
+    get sourceSelectField(): SourceSelectFieldProps<T, M>;
+    get openSource(): SourceSelectOpenFunction<M> | undefined;
+    get showOpenSourceButton(): boolean;
+    get loadSources(): SourceSelectLoadSourcesFunction<M> | undefined;
+    get valueReader(): SourceSelectMetaValueReader<T, M>;
+    get metaLoader(): SourceSelectValueMetaLoader<T, M>;
+    get displayForValue(): SourceSelectDisplayFunction<T, M>;
+    get selectButtonIcon(): string;
+    get multiple(): boolean;
+    get refreshDisplayValues$(): Observable<unknown> | undefined;
+    loadSourceSelectValueForValues(values: T[]): Observable<LoadingState<SourceSelectValue<T, M>[]>>;
+    getSourceSelectValueForValues(values: T[]): Observable<SourceSelectValue<T, M>[]>;
+    loadDisplayValuesForSelectValues(values: SourceSelectValue<T, M>[]): Observable<LoadingState<SourceSelectDisplayValue<T, M>[]>>;
+    getDisplayValuesForSelectValues(values: SourceSelectValue<T, M>[]): Observable<SourceSelectDisplayValue<T, M>[]>;
+    readonly context: import("@dereekb/rxjs").LoadingStateContextInstance<unknown, LoadingState<SourceSelectDisplayValueGroup<T, M>[]>>;
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    readonly handleSelectOptions: HandleActionWithContext<unknown>;
+    private addToOpenSourceMap;
+    private addToCurrentValue;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DbxFormSourceSelectFieldComponent<any, any>, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DbxFormSourceSelectFieldComponent<any, any>, "ng-component", never, {}, {}, never, never, false>;
+}

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

@@ -0,0 +1,7 @@
+import { PrimativeKey } from '@dereekb/util';
+import { FormlyFieldConfig } from '@ngx-formly/core';
+import { LabeledFieldConfig, DescriptionFieldConfig, MaterialFormFieldConfig } from '../../field';
+import { SourceSelectFieldProps } from './sourceselect.field.component';
+export interface SourceSelectFieldConfig<T extends PrimativeKey = PrimativeKey, M = unknown> extends LabeledFieldConfig, DescriptionFieldConfig, MaterialFormFieldConfig, SourceSelectFieldProps<T, M> {
+}
+export declare function sourceSelectField<T extends PrimativeKey = PrimativeKey, M = unknown>(config: SourceSelectFieldConfig<T, M>): FormlyFieldConfig;

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

@@ -0,0 +1,23 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./sourceselect.field.component";
+import * as i2 from "@angular/common";
+import * as i3 from "@angular/forms";
+import * as i4 from "@angular/material/input";
+import * as i5 from "@angular/material/divider";
+import * as i6 from "@angular/material/form-field";
+import * as i7 from "@angular/material/select";
+import * as i8 from "@angular/material/button";
+import * as i9 from "@angular/material/datepicker";
+import * as i10 from "@angular/material/core";
+import * as i11 from "@angular/material/menu";
+import * as i12 from "@dereekb/dbx-core";
+import * as i13 from "@dereekb/dbx-web";
+import * as i14 from "@angular/material/chips";
+import * as i15 from "@angular/material/icon";
+import * as i16 from "@angular/flex-layout";
+import * as i17 from "@ngx-formly/core";
+export declare class DbxFormFormlySourceSelectModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<DbxFormFormlySourceSelectModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<DbxFormFormlySourceSelectModule, [typeof i1.DbxFormSourceSelectFieldComponent], [typeof i2.CommonModule, typeof i3.FormsModule, typeof i4.MatInputModule, typeof i5.MatDividerModule, typeof i6.MatFormFieldModule, typeof i7.MatSelectModule, typeof i8.MatButtonModule, typeof i9.MatDatepickerModule, typeof i10.MatNativeDateModule, typeof i11.MatMenuModule, typeof i3.ReactiveFormsModule, typeof i12.DbxDatePipeModule, typeof i13.DbxLoadingModule, typeof i13.DbxButtonModule, typeof i13.DbxActionModule, typeof i14.MatChipsModule, typeof i15.MatIconModule, typeof i16.FlexLayoutModule, typeof i17.FormlyModule], [typeof i1.DbxFormSourceSelectFieldComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<DbxFormFormlySourceSelectModule>;
+}

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

@@ -1,7 +1,7 @@
-import { DescriptionFieldConfig } from './../field';
+import { DescriptionFieldConfig, MaterialFormFieldConfig } from './../field';
 import { FormlyFieldConfig } from '@ngx-formly/core';
 import { LabeledFieldConfig } from '../field';
 import { TextFieldLengthConfig } from '../value/text/text.field';
-export interface TextEditorFieldConfig extends LabeledFieldConfig, DescriptionFieldConfig, TextFieldLengthConfig {
+export interface TextEditorFieldConfig extends LabeledFieldConfig, DescriptionFieldConfig, TextFieldLengthConfig, MaterialFormFieldConfig {
 }
 export declare function textEditorField(config: TextEditorFieldConfig): FormlyFieldConfig;

package/lib/formly/field/value/array/_array.scss

@@ -29,8 +29,8 @@
       }
 
       padding: 0;
-      margin-bottom: 2px;
-      // border: 1px solid rgba(0, 0, 0, 0.04);
+      margin-bottom: 4px;
+      border-radius: 4px;
 
       .dbx-form-repeat-array-field-content {
         display: block;
@@ -54,6 +54,10 @@
     background: $form-repeat-array-field-bg;
     border: 4px solid $form-repeat-array-field-bg;
   }
+
+  .dbx-form-repeat-array-bar {
+    background: none;
+  }
 }
 
 @mixin typography($typography-config) {

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

@@ -1,8 +1,8 @@
 import { FormlyFieldConfig } from '@ngx-formly/core';
-import { LabeledFieldConfig, DefaultValueFieldConfig, DescriptionFieldConfig } from '../../field';
-export interface ToggleFieldConfig extends Omit<LabeledFieldConfig, 'placeholder' | 'autocomplete'>, DefaultValueFieldConfig<boolean>, DescriptionFieldConfig {
+import { LabeledFieldConfig, DefaultValueFieldConfig, DescriptionFieldConfig, MaterialFormFieldConfig } from '../../field';
+export interface ToggleFieldConfig extends Omit<LabeledFieldConfig, 'placeholder' | 'autocomplete'>, DefaultValueFieldConfig<boolean>, DescriptionFieldConfig, MaterialFormFieldConfig {
 }
 export declare function toggleField(config: ToggleFieldConfig): FormlyFieldConfig;
-export interface CheckboxFieldConfig extends LabeledFieldConfig, DefaultValueFieldConfig<boolean>, DescriptionFieldConfig {
+export interface CheckboxFieldConfig extends LabeledFieldConfig, DefaultValueFieldConfig<boolean>, DescriptionFieldConfig, MaterialFormFieldConfig {
 }
 export declare function checkboxField(config: CheckboxFieldConfig): FormlyFieldConfig;

package/lib/formly/field/value/date/_date.scss

@@ -1,6 +1,10 @@
 @use '../../../../style/theming';
 
 // MARK: Variables
+$dbx-datetime-button-spacing: 6px;
+$dbx-datetime-date-and-time-spacing: 6px;
+$dbx-datetime-button-width: 40px + ($dbx-datetime-button-spacing * 2); // times 2 for the spacing between the date and time inputs
+$dbx-datetime-row-width: 40px + ($dbx-datetime-button-spacing * 2); // times 2 for the spacing between the date and time inputs
 
 // MARK: Mixin
 @mixin core() {
@@ -8,13 +12,15 @@
     width: 100%;
   }
 
-  $dbx-datetime-button-width: 40px;
-
   .dbx-datetime-row {
     .dbx-datetime-row-field {
       width: calc(100% - #{$dbx-datetime-button-width});
     }
 
+    .dbx-datetime-row-field.dbx-datetime-row-field-full-width {
+      width: 100%;
+    }
+
     &.dbx-datetime-hint-row {
       margin-top: -6px;
     }

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

@@ -5,18 +5,19 @@ import * as i3 from "@angular/forms";
 import * as i4 from "@angular/material/input";
 import * as i5 from "@angular/material/divider";
 import * as i6 from "@angular/material/form-field";
-import * as i7 from "@angular/material/button";
-import * as i8 from "@angular/material/datepicker";
-import * as i9 from "@angular/material/core";
-import * as i10 from "@angular/material/menu";
-import * as i11 from "@dereekb/dbx-core";
-import * as i12 from "@angular/material/chips";
-import * as i13 from "@angular/material/icon";
-import * as i14 from "@angular/flex-layout";
-import * as i15 from "@ngx-formly/core";
-import * as i16 from "../../wrapper/form.wrapper.module";
+import * as i7 from "@dereekb/dbx-web";
+import * as i8 from "@angular/material/button";
+import * as i9 from "@angular/material/datepicker";
+import * as i10 from "@angular/material/core";
+import * as i11 from "@angular/material/menu";
+import * as i12 from "@dereekb/dbx-core";
+import * as i13 from "@angular/material/chips";
+import * as i14 from "@angular/material/icon";
+import * as i15 from "@angular/flex-layout";
+import * as i16 from "@ngx-formly/core";
+import * as i17 from "../../wrapper/form.wrapper.module";
 export declare class DbxFormFormlyDateFieldModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<DbxFormFormlyDateFieldModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<DbxFormFormlyDateFieldModule, [typeof i1.DbxDateTimeFieldComponent], [typeof i2.CommonModule, typeof i3.FormsModule, typeof i4.MatInputModule, typeof i5.MatDividerModule, typeof i6.MatFormFieldModule, typeof i7.MatButtonModule, typeof i8.MatDatepickerModule, typeof i9.MatNativeDateModule, typeof i10.MatMenuModule, typeof i3.ReactiveFormsModule, typeof i11.DbxDatePipeModule, typeof i12.MatChipsModule, typeof i13.MatIconModule, typeof i14.FlexLayoutModule, typeof i15.FormlyModule], [typeof i16.DbxFormFormlyWrapperModule]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<DbxFormFormlyDateFieldModule, [typeof i1.DbxDateTimeFieldComponent], [typeof i2.CommonModule, typeof i3.FormsModule, typeof i4.MatInputModule, typeof i5.MatDividerModule, typeof i6.MatFormFieldModule, typeof i7.DbxButtonModule, typeof i8.MatButtonModule, typeof i9.MatDatepickerModule, typeof i10.MatNativeDateModule, typeof i11.MatMenuModule, typeof i3.ReactiveFormsModule, typeof i12.DbxDatePipeModule, typeof i13.MatChipsModule, typeof i14.MatIconModule, typeof i15.FlexLayoutModule, typeof i16.FormlyModule], [typeof i17.DbxFormFormlyWrapperModule]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<DbxFormFormlyDateFieldModule>;
 }

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

@@ -1,8 +1,8 @@
 import { Observable } from 'rxjs';
 import { FormlyFieldConfig } from '@ngx-formly/core';
-import { LabeledFieldConfig, DescriptionFieldConfig } from '../../field';
+import { LabeledFieldConfig, DescriptionFieldConfig, MaterialFormFieldConfig } from '../../field';
 import { DbxDateTimeFieldProps, DateTimePickerConfiguration } from './datetime.field.component';
-export interface DateTimeFieldConfig extends LabeledFieldConfig, DescriptionFieldConfig, DbxDateTimeFieldProps {
+export interface DateTimeFieldConfig extends LabeledFieldConfig, DescriptionFieldConfig, DbxDateTimeFieldProps, MaterialFormFieldConfig {
 }
 export declare type TimeFieldConfig = Omit<DateTimeFieldConfig, 'showDate'>;
 export declare const TAKE_NEXT_UPCOMING_TIME_CONFIG_OBS: () => Observable<DateTimePickerConfiguration>;