@dereekb/dbx-form 0.0.1 → 1.0.0

package/fesm2020/dereekb-dbx-form.mjs

@@ -1,54 +1,62 @@
-import { MatDialogModule } from '@angular/material/dialog';
 import * as i0 from '@angular/core';
-import { forwardRef, Directive, Host, Input, NgModule, EventEmitter, Output, Component, ViewContainerRef, ViewChild } from '@angular/core';
+import { forwardRef, Directive, Host, Input, NgModule, EventEmitter, Output, Component, ViewChild, InjectionToken, Inject, Optional } from '@angular/core';
 import * as i5 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import { isPast, addSeconds, isSameMinute, isSameDay, startOfDay, addMinutes } from 'date-fns';
-import { of, combineLatest, BehaviorSubject, mergeMap, shareReplay as shareReplay$1, switchMap as switchMap$1, startWith, map as map$1, debounceTime as debounceTime$1, distinctUntilChanged as distinctUntilChanged$1, filter as filter$1, first as first$1, Subject, interval, merge } from 'rxjs';
-import { switchMap, first, catchError, filter, map, distinctUntilChanged, shareReplay, delay, startWith as startWith$1, debounceTime, mergeMap as mergeMap$1, tap, throttleTime } from 'rxjs/operators';
+import * as i4 from '@angular/material/dialog';
+import { MatDialogModule } from '@angular/material/dialog';
+import * as i3 from '@uirouter/core';
 import * as i2 from '@dereekb/dbx-core';
-import { AbstractSubscriptionDirective, DbxInjectedComponentModule, DbxDatePipeModule } from '@dereekb/dbx-core';
-import { LockSet, SubscriptionObject, switchMapMaybeObs, filterMaybe, beginLoading, mapLoadingStateResults, successResult, LoadingStateContextInstance } from '@dereekb/rxjs';
+import { AbstractSubscriptionDirective, safeDetectChanges, DbxInjectedComponentModule, DbxDatePipeModule, mergeDbxInjectedComponentConfigs, tapDetectChanges } from '@dereekb/dbx-core';
+import * as i1$1 from '@dereekb/dbx-web';
+import { DbxActionTransitionSafetyDirective, DbxTextModule, DbxFlexLayoutModule, DbxSectionLayoutModule, DbxAnchorModule, AbstractDbxSelectionListWrapperDirective, DEFAULT_LIST_WRAPPER_DIRECTIVE_TEMPLATE, AbstractSelectionValueListViewDirective, mapItemValuesToValueListItemConfig, ProvideDbxListView, AbstractDbxSelectionValueListViewItemComponent, DbxLoadingModule, DbxButtonModule, DbxListLayoutModule, mapCompactModeObs, DbxBarLayoutModule } from '@dereekb/dbx-web';
+import { isPast, addSeconds, isSameMinute, startOfDay, isSameDay, addMinutes } from 'date-fns';
+import { exhaustMap, of, combineLatest, filter as filter$1, mergeMap, first as first$1, delay, BehaviorSubject, switchMap as switchMap$1, shareReplay as shareReplay$1, startWith, map as map$1, debounceTime, distinctUntilChanged as distinctUntilChanged$1, Subject, skipWhile, interval, merge, throttleTime as throttleTime$1 } from 'rxjs';
+import { switchMap, first, catchError, filter, map, distinctUntilChanged, shareReplay, delay as delay$1, debounceTime as debounceTime$1, startWith as startWith$1, tap, throttleTime } from 'rxjs/operators';
+import { LockSet, SubscriptionObject, switchMapMaybeObs, filterMaybe, switchMapMaybeDefault, asObservable, beginLoading, mapLoadingStateResults, successResult, ListLoadingStateContextInstance, isListLoadingStateEmpty, LoadingStateContextInstance, skipFirstMaybe, scanCount } from '@dereekb/rxjs';
 import * as i1$4 from '@ngx-formly/core';
 import { FieldType, FieldWrapper, FormlyModule, FieldArrayType } from '@ngx-formly/core';
 import * as i1 from '@angular/material/checkbox';
 import { MatCheckboxModule } from '@angular/material/checkbox';
-import * as i1$1 from '@dereekb/dbx-web';
-import { DbxTextModule, DbxAnchorModule, DbxLoadingModule, DbxButtonModule } from '@dereekb/dbx-web';
 import * as i2$1 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
-import * as i3 from '@angular/forms';
+import * as i4$1 from '@angular/forms';
 import { FormsModule, ReactiveFormsModule, FormControl, Validators, FormGroup } from '@angular/forms';
-import * as i2$2 from '@angular/material/core';
+import * as i6 from '@angular/material/core';
 import { MatRippleModule, MatNativeDateModule } from '@angular/material/core';
 import * as i1$2 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
 import * as i3$1 from '@angular/flex-layout/flex';
 import { FlexLayoutModule } from '@angular/flex-layout';
-import { hasValueOrNotEmpty, addPlusPrefixToNumber, convertMaybeToArray, makeValuesGroupMap, findUnique, separateValues, arrayToMap, concatArraysUnique } from '@dereekb/util';
+import { objectIsEmpty, mergeObjects, filterFromPOJO, addPlusPrefixToNumber, convertMaybeToArray, makeValuesGroupMap, findUnique, mergeIntoArray, lastValue, separateValues, arrayToMap, getValueFromObjectOrGetter } from '@dereekb/util';
 import * as i1$3 from '@angular/material/slide-toggle';
 import { MatSlideToggleModule } from '@angular/material/slide-toggle';
-import * as i6 from '@angular/material/input';
-import { MatInputModule } from '@angular/material/input';
-import * as i5$1 from '@angular/material/chips';
+import * as i2$2 from '@angular/flex-layout/extended';
+import * as i6$1 from '@angular/material/input';
+import { MatInputModule, MatInput } from '@angular/material/input';
+import { FieldType as FieldType$1, FormlyMaterialModule } from '@ngx-formly/material';
+import { camelCase } from 'change-case';
+import * as i1$5 from '@angular/material/chips';
 import { MatChipsModule } from '@angular/material/chips';
-import * as i4 from '@angular/material/form-field';
-import { MatFormFieldModule } from '@angular/material/form-field';
-import * as i1$5 from '@angular/material/autocomplete';
+import * as i4$2 from '@angular/material/divider';
+import { MatDividerModule } from '@angular/material/divider';
+import * as i4$3 from '@angular/material/autocomplete';
 import { MatAutocompleteModule } from '@angular/material/autocomplete';
-import * as i2$3 from '@angular/material/list';
 import { MatListModule } from '@angular/material/list';
-import { camelCase } from 'change-case';
+import * as i3$2 from '@angular/material/form-field';
+import { MatFormFieldModule } from '@angular/material/form-field';
 import { ENTER, COMMA } from '@angular/cdk/keycodes';
-import * as i3$2 from '@angular/material/divider';
-import { MatDividerModule } from '@angular/material/divider';
-import { guessCurrentTimezone, toReadableTimeString, utcDayForDate, readableTimeStringToDate, DateTimeMinuteInstance } from '@dereekb/date';
-import * as i4$1 from '@angular/material/datepicker';
+import { skipUntilTimeElapsedAfterLastEmission, guessCurrentTimezone, toReadableTimeString, utcDayForDate, readableTimeStringToDate, DateTimeMinuteInstance } from '@dereekb/date';
+import * as i2$3 from 'ngx-editor';
+import { Editor, NgxEditorModule } from 'ngx-editor';
+import * as i5$1 from '@angular/cdk/drag-drop';
+import { DragDropModule } from '@angular/cdk/drag-drop';
+import * as i4$4 from '@angular/material/datepicker';
 import { MatDatepickerModule } from '@angular/material/datepicker';
 import * as i5$2 from '@angular/material/menu';
 import { MatMenuModule } from '@angular/material/menu';
-import * as i2$4 from 'ngx-mat-intl-tel-input';
+import * as i1$6 from 'ngx-mat-intl-tel-input';
 import { NgxMatIntlTelInputModule } from 'ngx-mat-intl-tel-input';
+import { FormlyMatFormFieldModule } from '@ngx-formly/material/form-field';
 import { cloneDeep } from 'lodash';
 import { FormlyMatToggleModule } from '@ngx-formly/material/toggle';
 
@@ -58,18 +66,25 @@ import { FormlyMatToggleModule } from '@ngx-formly/material/toggle';
 var DbxFormState;
 (function (DbxFormState) {
     DbxFormState[DbxFormState["INITIALIZING"] = -1] = "INITIALIZING";
-    DbxFormState[DbxFormState["INCOMPLETE"] = 0] = "INCOMPLETE";
-    DbxFormState[DbxFormState["COMPLETE"] = 1] = "COMPLETE";
-    DbxFormState[DbxFormState["RESET"] = 2] = "RESET";
+    DbxFormState[DbxFormState["RESET"] = 0] = "RESET";
+    DbxFormState[DbxFormState["USED"] = 1] = "USED";
 })(DbxFormState || (DbxFormState = {}));
 /**
  * Form that has an event stream, value, and state items.
  */
 class DbxForm {
 }
+class DbxMutableForm extends DbxForm {
+}
 function ProvideDbxForm(sourceType) {
     return [{ provide: DbxForm, useExisting: forwardRef(() => sourceType) }];
 }
+function ProvideDbxMutableForm(sourceType) {
+    return [
+        ...ProvideDbxForm(sourceType),
+        { provide: DbxMutableForm, useExisting: forwardRef(() => sourceType) }
+    ];
+}
 
 const APP_ACTION_FORM_DISABLED_KEY = 'actionForm';
 /**
@@ -93,23 +108,24 @@ class DbxActionFormDirective {
     }
     ngOnInit() {
         // Pass data from the form to the source when triggered.
-        this._triggeredSub.subscription = this.source.triggered$.pipe(switchMap(() => {
+        this._triggeredSub.subscription = this.source.triggered$.pipe(switchMap(() => this.form.stream$.pipe(first(), exhaustMap(({ isComplete }) => {
             const doNothing = {}; // nothing, form not complete
-            if (this.form.isComplete) {
-                const value = this.form.value;
-                return this.preCheckReadyValue(value).pipe(first(), switchMap((canContinue) => {
+            let obs;
+            if (isComplete) {
+                obs = this.form.getValue().pipe(first(), exhaustMap((value) => this.preCheckReadyValue(value).pipe(first(), switchMap((canContinue) => {
                     if (canContinue) {
                         return this.readyValue(value).pipe(first());
                     }
                     else {
                         return of(doNothing);
                     }
-                }), catchError((error) => of({ error })));
+                }), catchError((error) => of({ error })))));
             }
             else {
-                return of(doNothing);
+                obs = of(doNothing);
             }
-        })).subscribe((result) => {
+            return obs;
+        })))).subscribe((result) => {
             if (result.reject) {
                 this.source.reject(result.reject);
             }
@@ -122,34 +138,35 @@ class DbxActionFormDirective {
         });
         // Update the enabled/disabled state
         this._isCompleteSub.subscription = this.form.stream$.pipe(filter((x) => x.state !== DbxFormState.INITIALIZING), switchMap((event) => {
-            // Use both changes count and whether or not something was in the past to guage whether or not the item has been touched.
-            // Angular Form's untouched is whether or not focus has been lost but we can still recieve value updates.
-            // More than a certain amount of updates implies that it is being typed into.
-            const isProbablyTouched = !event.untouched ||
-                ((event.changesCount ?? 0) > 3 && isPast(addSeconds(event.lastResetAt ?? new Date(), 2)));
-            // console.log('Event: ', event, isProbablyTouched);
-            const value = this.form.value;
-            let validatorObs;
-            const initialIsValidCheck = event.isComplete;
-            if (initialIsValidCheck) {
-                validatorObs = (this.appActionFormValidator) ? this.appActionFormValidator(value) : of(true);
-            }
-            else {
-                validatorObs = of(false);
-            }
-            let modifiedObs;
-            const isConsideredModified = (event.pristine === false && isProbablyTouched);
-            if (isConsideredModified) {
-                modifiedObs = (this.appActionFormModified) ? this.appActionFormModified(value) : of(true);
-            }
-            else {
-                modifiedObs = of(false);
-            }
-            return combineLatest([
-                validatorObs,
-                modifiedObs
-            ]).pipe(first(), map(([valid, modified]) => ({ valid, modified, event })));
-        })).subscribe(({ valid, modified, event }) => {
+            return this.form.getValue().pipe(first(), exhaustMap((value) => {
+                // Use both changes count and whether or not something was in the past to guage whether or not the item has been touched.
+                // Angular Form's untouched is whether or not focus has been lost but we can still recieve value updates.
+                // More than a certain amount of updates implies that it is being typed into.
+                const isProbablyTouched = !event.untouched ||
+                    ((event.changesCount ?? 0) > 3 && isPast(addSeconds(event.lastResetAt ?? new Date(), 2)));
+                let validatorObs;
+                const initialIsValidCheck = event.isComplete;
+                if (initialIsValidCheck) {
+                    validatorObs = (this.appActionFormValidator) ? this.appActionFormValidator(value) : of(true);
+                }
+                else {
+                    validatorObs = of(false);
+                }
+                let modifiedObs;
+                const isConsideredModified = (event.pristine === false && isProbablyTouched);
+                if (isConsideredModified) {
+                    modifiedObs = (this.appActionFormModified) ? this.appActionFormModified(value) : of(true);
+                }
+                else {
+                    modifiedObs = of(false);
+                }
+                return combineLatest([
+                    validatorObs,
+                    modifiedObs
+                ]).pipe(first(), map(([valid, modified]) => ({ valid, modified, value, event })));
+            }));
+        })).subscribe(({ valid, modified, value, event }) => {
+            // console.log('x: ', value, event, valid, modified);
             // Update Modified State
             this.source.setIsModified(modified);
             // Disable if the form is not yet complete/valid.
@@ -177,14 +194,14 @@ class DbxActionFormDirective {
         return of({ value });
     }
 }
-DbxActionFormDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxActionFormDirective, deps: [{ token: DbxForm, host: true }, { token: i2.ActionContextStoreSourceInstance }], target: i0.ɵɵFactoryTarget.Directive });
+DbxActionFormDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxActionFormDirective, deps: [{ token: DbxMutableForm, host: true }, { token: i2.ActionContextStoreSourceInstance }], target: i0.ɵɵFactoryTarget.Directive });
 DbxActionFormDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.0", type: DbxActionFormDirective, selector: "[dbxActionForm]", inputs: { appActionFormValidator: "appActionFormValidator", appActionFormModified: "appActionFormModified" }, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxActionFormDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[dbxActionForm]'
                 }]
-        }], ctorParameters: function () { return [{ type: DbxForm, decorators: [{
+        }], ctorParameters: function () { return [{ type: DbxMutableForm, decorators: [{
                     type: Host
                 }] }, { type: i2.ActionContextStoreSourceInstance }]; }, propDecorators: { appActionFormValidator: [{
                 type: Input
@@ -192,16 +209,67 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImpor
                 type: Input
             }] } });
 
-class DbxFormlyActionModule {
+/**
+ * Extension of DbxActionTransitionSafetyDirective that forces the form to update first.
+ *
+ * NOTE: Only works with UIRouter
+ */
+class DbxActionFormSafetyDirective extends DbxActionTransitionSafetyDirective {
+    constructor(appActionForm, source, transitionService, viewContainerRef, dialog) {
+        super(source, transitionService, viewContainerRef, dialog);
+        this.appActionForm = appActionForm;
+    }
+    _handleOnBeforeTransition(transition) {
+        this.appActionForm.form.forceFormUpdate();
+        return super._handleOnBeforeTransition(transition);
+    }
+}
+DbxActionFormSafetyDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxActionFormSafetyDirective, deps: [{ token: DbxActionFormDirective, host: true }, { token: i2.ActionContextStoreSourceInstance }, { token: i3.TransitionService }, { token: i0.ViewContainerRef }, { token: i4.MatDialog }], target: i0.ɵɵFactoryTarget.Directive });
+DbxActionFormSafetyDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.0", type: DbxActionFormSafetyDirective, selector: "[dbxActionFormSafety]", inputs: { inputSafetyType: ["dbxActionFormSafety", "inputSafetyType"] }, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxActionFormSafetyDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[dbxActionFormSafety]',
+                }]
+        }], ctorParameters: function () { return [{ type: DbxActionFormDirective, decorators: [{
+                    type: Host
+                }] }, { type: i2.ActionContextStoreSourceInstance }, { type: i3.TransitionService }, { type: i0.ViewContainerRef }, { type: i4.MatDialog }]; }, propDecorators: { inputSafetyType: [{
+                type: Input,
+                args: ['dbxActionFormSafety']
+            }] } });
+
+class DbxFormActionTransitionModule {
+}
+DbxFormActionTransitionModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxFormActionTransitionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+DbxFormActionTransitionModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxFormActionTransitionModule, declarations: [DbxActionFormSafetyDirective], imports: [CommonModule], exports: [DbxActionFormSafetyDirective] });
+DbxFormActionTransitionModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxFormActionTransitionModule, imports: [[
+            CommonModule
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxFormActionTransitionModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule
+                    ],
+                    declarations: [
+                        DbxActionFormSafetyDirective
+                    ],
+                    exports: [
+                        DbxActionFormSafetyDirective
+                    ]
+                }]
+        }] });
+
+class DbxFormActionModule {
 }
-DbxFormlyActionModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxFormlyActionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-DbxFormlyActionModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxFormlyActionModule, declarations: [DbxActionFormDirective], imports: [CommonModule,
+DbxFormActionModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxFormActionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+DbxFormActionModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxFormActionModule, declarations: [DbxActionFormDirective], imports: [CommonModule,
         MatDialogModule], exports: [DbxActionFormDirective] });
-DbxFormlyActionModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxFormlyActionModule, imports: [[
+DbxFormActionModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxFormActionModule, imports: [[
             CommonModule,
             MatDialogModule
         ]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxFormlyActionModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxFormActionModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -220,7 +288,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImpor
 /**
  * Used with a FormComponent to set the value from a LoadingState when the value is available.
  */
-class DbxFormLoadingPairSourceDirective extends AbstractSubscriptionDirective {
+class DbxFormLoadingSourceDirective extends AbstractSubscriptionDirective {
     constructor(form) {
         super();
         this.form = form;
@@ -248,18 +316,18 @@ class DbxFormLoadingPairSourceDirective extends AbstractSubscriptionDirective {
         this.sub = subscription;
     }
 }
-DbxFormLoadingPairSourceDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxFormLoadingPairSourceDirective, deps: [{ token: DbxForm, host: true }], target: i0.ɵɵFactoryTarget.Directive });
-DbxFormLoadingPairSourceDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.0", type: DbxFormLoadingPairSourceDirective, selector: "[dbxFormLoadingPairSource]", inputs: { obs: ["dbxFormLoadingPairSource", "obs"] }, usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxFormLoadingPairSourceDirective, decorators: [{
+DbxFormLoadingSourceDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxFormLoadingSourceDirective, deps: [{ token: DbxMutableForm, host: true }], target: i0.ɵɵFactoryTarget.Directive });
+DbxFormLoadingSourceDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.0", type: DbxFormLoadingSourceDirective, selector: "[dbxFormLoadingSource]", inputs: { obs: ["dbxFormLoadingSource", "obs"] }, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxFormLoadingSourceDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[dbxFormLoadingPairSource]'
+                    selector: '[dbxFormLoadingSource]'
                 }]
-        }], ctorParameters: function () { return [{ type: DbxForm, decorators: [{
+        }], ctorParameters: function () { return [{ type: DbxMutableForm, decorators: [{
                     type: Host
                 }] }]; }, propDecorators: { obs: [{
                 type: Input,
-                args: ['dbxFormLoadingPairSource']
+                args: ['dbxFormLoadingSource']
             }] } });
 
 /**
@@ -272,8 +340,8 @@ class DbxFormValueChangesDirective extends AbstractSubscriptionDirective {
         this.dbxFormValueChange = new EventEmitter();
     }
     ngOnInit() {
-        this.sub = this.form.stream$.subscribe((x) => {
-            this.dbxFormValueChange.next(this.form.value);
+        this.sub = this.form.stream$.pipe(filter$1(x => x.isComplete), mergeMap(() => this.form.getValue().pipe(first$1())), delay(0)).subscribe((value) => {
+            this.dbxFormValueChange.next(value);
         });
     }
 }
@@ -318,32 +386,32 @@ class DbxFormSourceDirective extends AbstractSubscriptionDirective {
         this.sub = subscription;
     }
 }
-DbxFormSourceDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxFormSourceDirective, deps: [{ token: DbxForm, host: true }], target: i0.ɵɵFactoryTarget.Directive });
+DbxFormSourceDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxFormSourceDirective, deps: [{ token: DbxMutableForm, host: true }], target: i0.ɵɵFactoryTarget.Directive });
 DbxFormSourceDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.0", type: DbxFormSourceDirective, selector: "[dbxFormSource]", inputs: { obs: ["dbxFormSource", "obs"] }, usesInheritance: true, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxFormSourceDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[dbxFormSource]'
                 }]
-        }], ctorParameters: function () { return [{ type: DbxForm, decorators: [{
+        }], ctorParameters: function () { return [{ type: DbxMutableForm, decorators: [{
                     type: Host
                 }] }]; }, propDecorators: { obs: [{
                 type: Input,
                 args: ['dbxFormSource']
             }] } });
 
-class DbxFormModule {
+class DbxFormIoModule {
 }
-DbxFormModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxFormModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-DbxFormModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxFormModule, declarations: [DbxFormSourceDirective,
+DbxFormIoModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxFormIoModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+DbxFormIoModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxFormIoModule, declarations: [DbxFormSourceDirective,
         DbxFormValueChangesDirective,
-        DbxFormLoadingPairSourceDirective], imports: [CommonModule], exports: [DbxFormSourceDirective,
+        DbxFormLoadingSourceDirective], imports: [CommonModule], exports: [DbxFormSourceDirective,
         DbxFormValueChangesDirective,
-        DbxFormLoadingPairSourceDirective] });
-DbxFormModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxFormModule, imports: [[
+        DbxFormLoadingSourceDirective] });
+DbxFormIoModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxFormIoModule, imports: [[
             CommonModule
         ]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxFormModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxFormIoModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -352,16 +420,58 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImpor
                     declarations: [
                         DbxFormSourceDirective,
                         DbxFormValueChangesDirective,
-                        DbxFormLoadingPairSourceDirective
+                        DbxFormLoadingSourceDirective
                     ],
                     exports: [
                         DbxFormSourceDirective,
                         DbxFormValueChangesDirective,
-                        DbxFormLoadingPairSourceDirective
+                        DbxFormLoadingSourceDirective
+                    ]
+                }]
+        }] });
+
+class DbxFormModule {
+}
+DbxFormModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxFormModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+DbxFormModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxFormModule, exports: [DbxFormActionTransitionModule,
+        DbxFormActionModule,
+        DbxFormIoModule] });
+DbxFormModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxFormModule, imports: [DbxFormActionTransitionModule,
+        DbxFormActionModule,
+        DbxFormIoModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxFormModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    exports: [
+                        DbxFormActionTransitionModule,
+                        DbxFormActionModule,
+                        DbxFormIoModule
                     ]
                 }]
         }] });
 
+function minLengthValidationMessage(err, field) {
+    return `Should have atleast ${field.templateOptions.minLength} characters`;
+}
+function maxLengthValidationMessage(err, field) {
+    return `This value should be less than ${field.templateOptions.maxLength} characters`;
+}
+function minValidationMessage(err, field) {
+    return `This value should be more than ${field.templateOptions.min}`;
+}
+function maxValidationMessage(err, field) {
+    return `This value should be less than ${field.templateOptions.max}`;
+}
+const REQUIRED_VALIDATION_MESSAGE = { name: 'required', message: 'This field is required' };
+const MIN_LENGTH_VALIDATION_MESSAGE = { name: 'minlength', message: minLengthValidationMessage };
+const MAX_LENGTH_VALIDATION_MESSAGE = { name: 'maxlength', message: maxLengthValidationMessage };
+const MIN_VALIDATION_MESSAGE = { name: 'min', message: minValidationMessage };
+const MAX_VALIDATION_MESSAGE = { name: 'max', message: maxValidationMessage };
+const INVALID_PHONE_NUMBER_MESSAGE = { name: 'validatePhoneNumber', message: 'This is not a valid phone number.' };
+function defaultValidationMessages() {
+    return [REQUIRED_VALIDATION_MESSAGE, MIN_LENGTH_VALIDATION_MESSAGE, MAX_LENGTH_VALIDATION_MESSAGE, MIN_VALIDATION_MESSAGE, MAX_VALIDATION_MESSAGE, INVALID_PHONE_NUMBER_MESSAGE];
+}
+
 // MARK: Default
 class DbxDefaultChecklistItemFieldDisplayComponent {
     get label() {
@@ -408,7 +518,7 @@ class DbxChecklistItemFieldComponent extends FieldType {
     get formGroup() {
         return this.form;
     }
-    get checkboxFieldKey() {
+    get formControlName() {
         return this.key;
     }
     get label() {
@@ -420,92 +530,88 @@ class DbxChecklistItemFieldComponent extends FieldType {
     get required() {
         return this.field.templateOptions?.required;
     }
+    get checklistField() {
+        return this.field.checklistField;
+    }
     get errors() {
         return this.field.formControl?.errors;
     }
     get componentClass() {
-        return this.field.componentClass ?? DbxDefaultChecklistItemFieldDisplayComponent;
+        return this.checklistField.componentClass ?? DbxDefaultChecklistItemFieldDisplayComponent;
     }
     ngOnInit() {
-        this._displayContent.next(this.field.displayContentObs);
+        this._displayContent.next(this.checklistField.displayContentObs);
     }
     ngOnDestroy() {
         this._displayContent.complete();
     }
 }
 DbxChecklistItemFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxChecklistItemFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-DbxChecklistItemFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.0", type: DbxChecklistItemFieldComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<div class=\"dbx-checklist-item-wrapper\" [formGroup]=\"formGroup\">\n  <div *ngIf=\"label\" class=\"dbx-checklist-item-label\">{{ label }}</div>\n  <div class=\"dbx-checklist-item\">\n    <div class=\"dbx-checklist-item-check\">\n      <mat-checkbox [formControlName]=\"checkboxFieldKey\"></mat-checkbox>\n    </div>\n    <div class=\"dbx-checklist-item-content-wrapper\">\n      <dbx-anchor [block]=\"true\" [anchor]=\"anchor$ | async\">\n        <div class=\"dbx-checklist-item-content\" matRipple [matRippleDisabled]=\"(rippleDisabled$ | async) ?? false\">\n          <dbx-checklist-item-content-component></dbx-checklist-item-content-component>\n          <span class=\"spacer\"></span>\n          <mat-icon>navigate_next</mat-icon>\n        </div>\n      </dbx-anchor>\n    </div>\n  </div>\n  <div *ngIf=\"description\" class=\"dbx-hint\">{{ description }}</div>\n</div>\n", components: [{ type: i0.forwardRef(function () { return i1.MatCheckbox; }), selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { type: i0.forwardRef(function () { return i1$1.DbxAnchorComponent; }), selector: "dbx-anchor, [dbx-anchor]", inputs: ["block"] }, { type: i0.forwardRef(function () { return DbxChecklistItemContentComponent; }), selector: "dbx-checklist-item-content-component" }, { type: i0.forwardRef(function () { return i2$1.MatIcon; }), selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i0.forwardRef(function () { return i3.NgControlStatusGroup; }), selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i0.forwardRef(function () { return i3.FormGroupDirective; }), selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i0.forwardRef(function () { return i5.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i0.forwardRef(function () { return i3.NgControlStatus; }), selector: "[formControlName],[ngModel],[formControl]" }, { type: i0.forwardRef(function () { return i3.FormControlName; }), selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i0.forwardRef(function () { return i2$2.MatRipple; }), selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }], pipes: { "async": i0.forwardRef(function () { return i5.AsyncPipe; }) } });
+DbxChecklistItemFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.0", type: DbxChecklistItemFieldComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<div class=\"dbx-checklist-item-wrapper\" [formGroup]=\"formGroup\">\n  <div *ngIf=\"label\" class=\"dbx-checklist-item-label\">{{ label }}</div>\n  <div class=\"dbx-checklist-item\">\n    <div class=\"dbx-checklist-item-check\">\n      <mat-checkbox [formControlName]=\"formControlName\"></mat-checkbox>\n    </div>\n    <div class=\"dbx-checklist-item-content-wrapper\">\n      <dbx-anchor [block]=\"true\" [anchor]=\"anchor$ | async\">\n        <div class=\"dbx-checklist-item-content\" matRipple [matRippleDisabled]=\"(rippleDisabled$ | async) ?? false\">\n          <dbx-checklist-item-content-component></dbx-checklist-item-content-component>\n          <span class=\"spacer\"></span>\n          <mat-icon *ngIf=\"!(rippleDisabled$ | async)\">navigate_next</mat-icon>\n        </div>\n      </dbx-anchor>\n    </div>\n  </div>\n  <div *ngIf=\"description\" class=\"dbx-hint\">{{ description }}</div>\n</div>\n", components: [{ type: i0.forwardRef(function () { return i1.MatCheckbox; }), selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { type: i0.forwardRef(function () { return i1$1.DbxAnchorComponent; }), selector: "dbx-anchor, [dbx-anchor]", inputs: ["block"] }, { type: i0.forwardRef(function () { return DbxChecklistItemContentComponent; }), selector: "dbx-checklist-item-content-component" }, { type: i0.forwardRef(function () { return i2$1.MatIcon; }), selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i0.forwardRef(function () { return i4$1.NgControlStatusGroup; }), selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i0.forwardRef(function () { return i4$1.FormGroupDirective; }), selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i0.forwardRef(function () { return i5.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i0.forwardRef(function () { return i4$1.NgControlStatus; }), selector: "[formControlName],[ngModel],[formControl]" }, { type: i0.forwardRef(function () { return i4$1.FormControlName; }), selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i0.forwardRef(function () { return i6.MatRipple; }), selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }], pipes: { "async": i0.forwardRef(function () { return i5.AsyncPipe; }) } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxChecklistItemFieldComponent, decorators: [{
             type: Component,
-            args: [{ template: "<div class=\"dbx-checklist-item-wrapper\" [formGroup]=\"formGroup\">\n  <div *ngIf=\"label\" class=\"dbx-checklist-item-label\">{{ label }}</div>\n  <div class=\"dbx-checklist-item\">\n    <div class=\"dbx-checklist-item-check\">\n      <mat-checkbox [formControlName]=\"checkboxFieldKey\"></mat-checkbox>\n    </div>\n    <div class=\"dbx-checklist-item-content-wrapper\">\n      <dbx-anchor [block]=\"true\" [anchor]=\"anchor$ | async\">\n        <div class=\"dbx-checklist-item-content\" matRipple [matRippleDisabled]=\"(rippleDisabled$ | async) ?? false\">\n          <dbx-checklist-item-content-component></dbx-checklist-item-content-component>\n          <span class=\"spacer\"></span>\n          <mat-icon>navigate_next</mat-icon>\n        </div>\n      </dbx-anchor>\n    </div>\n  </div>\n  <div *ngIf=\"description\" class=\"dbx-hint\">{{ description }}</div>\n</div>\n" }]
+            args: [{ template: "<div class=\"dbx-checklist-item-wrapper\" [formGroup]=\"formGroup\">\n  <div *ngIf=\"label\" class=\"dbx-checklist-item-label\">{{ label }}</div>\n  <div class=\"dbx-checklist-item\">\n    <div class=\"dbx-checklist-item-check\">\n      <mat-checkbox [formControlName]=\"formControlName\"></mat-checkbox>\n    </div>\n    <div class=\"dbx-checklist-item-content-wrapper\">\n      <dbx-anchor [block]=\"true\" [anchor]=\"anchor$ | async\">\n        <div class=\"dbx-checklist-item-content\" matRipple [matRippleDisabled]=\"(rippleDisabled$ | async) ?? false\">\n          <dbx-checklist-item-content-component></dbx-checklist-item-content-component>\n          <span class=\"spacer\"></span>\n          <mat-icon *ngIf=\"!(rippleDisabled$ | async)\">navigate_next</mat-icon>\n        </div>\n      </dbx-anchor>\n    </div>\n  </div>\n  <div *ngIf=\"description\" class=\"dbx-hint\">{{ description }}</div>\n</div>\n" }]
         }] });
 class DbxChecklistItemContentComponent extends AbstractSubscriptionDirective {
-    constructor(checklistItemFieldComponent, resolver, ngZone) {
+    constructor(checklistItemFieldComponent, cdRef) {
         super();
         this.checklistItemFieldComponent = checklistItemFieldComponent;
-        this.resolver = resolver;
-        this.ngZone = ngZone;
-        this.displayContent$ = this.checklistItemFieldComponent.displayContent$;
-        this.isLoading$ = this.checklistItemFieldComponent.displayContent$;
+        this.cdRef = cdRef;
     }
     ngOnInit() {
-        this.contentRef.clear();
-        const componentClass = this.checklistItemFieldComponent.componentClass;
-        const componentRef = this.contentRef.createComponent(componentClass);
-        this.sub = this.checklistItemFieldComponent.displayContent$.subscribe((x) => {
-            this.ngZone.run(() => componentRef.instance.displayContent = x);
-        });
+        this.config = {
+            componentClass: this.checklistItemFieldComponent.componentClass,
+            init: (instance) => {
+                this.checklistItemFieldComponent.displayContent$.subscribe((x) => {
+                    instance.displayContent = x;
+                    safeDetectChanges(this.cdRef);
+                });
+            }
+        };
     }
 }
-DbxChecklistItemContentComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxChecklistItemContentComponent, deps: [{ token: DbxChecklistItemFieldComponent }, { token: i0.ComponentFactoryResolver }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-DbxChecklistItemContentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.0", type: DbxChecklistItemContentComponent, selector: "dbx-checklist-item-content-component", viewQueries: [{ propertyName: "contentRef", first: true, predicate: ["content"], descendants: true, read: ViewContainerRef, static: true }], usesInheritance: true, ngImport: i0, template: `
-    <ng-template #content></ng-template>
-  `, isInline: true });
+DbxChecklistItemContentComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxChecklistItemContentComponent, deps: [{ token: DbxChecklistItemFieldComponent }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+DbxChecklistItemContentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.0", type: DbxChecklistItemContentComponent, selector: "dbx-checklist-item-content-component", usesInheritance: true, ngImport: i0, template: `<dbx-injected-content [config]="config"></dbx-injected-content>`, isInline: true, components: [{ type: i2.DbxInjectedComponent, selector: "dbx-injected-content, [dbx-injected-content]", inputs: ["config", "template"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxChecklistItemContentComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'dbx-checklist-item-content-component',
-                    template: `
-    <ng-template #content></ng-template>
-  `
+                    template: `<dbx-injected-content [config]="config"></dbx-injected-content>`
                 }]
-        }], ctorParameters: function () { return [{ type: DbxChecklistItemFieldComponent }, { type: i0.ComponentFactoryResolver }, { type: i0.NgZone }]; }, propDecorators: { contentRef: [{
-                type: ViewChild,
-                args: ['content', { static: true, read: ViewContainerRef }]
-            }] } });
+        }], ctorParameters: function () { return [{ type: DbxChecklistItemFieldComponent }, { type: i0.ChangeDetectorRef }]; } });
 
-class FormInfoSectionWrapperComponent extends FieldWrapper {
-    get infoSection() {
-        return this.to.infoSection;
+class DbxFormInfoWrapperComponent extends FieldWrapper {
+    get infoWrapper() {
+        return this.to.infoWrapper;
     }
     onInfoClick() {
-        this.infoSection.onInfoClick();
+        this.infoWrapper.onInfoClick();
     }
 }
-FormInfoSectionWrapperComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: FormInfoSectionWrapperComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-FormInfoSectionWrapperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.0", type: FormInfoSectionWrapperComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
-    <div class="form-info-section" fxLayout="row">
-      <div class="form-info-section-content" fxFlex="grow">
+DbxFormInfoWrapperComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxFormInfoWrapperComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+DbxFormInfoWrapperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.0", type: DbxFormInfoWrapperComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
+    <div class="dbx-form-info-wrapper" fxLayout="row">
+      <div class="dbx-form-info-wrapper-content" fxFlex="grow">
         <ng-container #fieldComponent></ng-container>
       </div>
-      <div class="form-info-section-info" fxFlex="noshrink" fxLayout="column" fxLayoutAlign="center center">
-        <button mat-icon-button [attr.aria-label]="'show info button for ' + to.label || 'section'"
+      <div class="dbx-form-info-wrapper-info" fxFlex="noshrink" fxLayout="column" fxLayoutAlign="center center">
+        <button mat-icon-button [attr.aria-label]="'show info button for ' + (to.label || 'section')"
           (click)="onInfoClick()">
           <mat-icon>info</mat-icon>
         </button>
       </div>
     </div>
   `, isInline: true, components: [{ type: i1$2.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i3$1.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i3$1.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { type: i3$1.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: FormInfoSectionWrapperComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxFormInfoWrapperComponent, decorators: [{
             type: Component,
             args: [{
                     template: `
-    <div class="form-info-section" fxLayout="row">
-      <div class="form-info-section-content" fxFlex="grow">
+    <div class="dbx-form-info-wrapper" fxLayout="row">
+      <div class="dbx-form-info-wrapper-content" fxFlex="grow">
         <ng-container #fieldComponent></ng-container>
       </div>
-      <div class="form-info-section-info" fxFlex="noshrink" fxLayout="column" fxLayoutAlign="center center">
-        <button mat-icon-button [attr.aria-label]="'show info button for ' + to.label || 'section'"
+      <div class="dbx-form-info-wrapper-info" fxFlex="noshrink" fxLayout="column" fxLayoutAlign="center center">
+        <button mat-icon-button [attr.aria-label]="'show info button for ' + (to.label || 'section')"
           (click)="onInfoClick()">
           <mat-icon>info</mat-icon>
         </button>
@@ -515,93 +621,92 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImpor
                 }]
         }] });
 
-class FormSectionWrapperComponent extends FieldWrapper {
-    get description() {
-        return this.to.description;
+class DbxFormSectionWrapperComponent extends FieldWrapper {
+    get header() {
+        return this.to.sectionWrapper?.header;
+    }
+    get hint() {
+        return this.to.sectionWrapper?.hint;
     }
 }
-FormSectionWrapperComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: FormSectionWrapperComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-FormSectionWrapperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.0", type: FormSectionWrapperComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
-    <div class="form-section">
-      <h3>{{ to.label }}</h3>
-      <div class="form-section-content">
-        <ng-container #fieldComponent></ng-container>
-      </div>
-      <dbx-hint *ngIf="description">{{ description }}</dbx-hint>
-    </div>
-  `, isInline: true, components: [{ type: i1$1.DbxHintComponent, selector: "dbx-hint" }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: FormSectionWrapperComponent, decorators: [{
+DbxFormSectionWrapperComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxFormSectionWrapperComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+DbxFormSectionWrapperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.0", type: DbxFormSectionWrapperComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
+    <dbx-section [header]="header" [hint]="hint">
+      <ng-container #fieldComponent></ng-container>
+    </dbx-section>
+  `, isInline: true, components: [{ type: i1$1.DbxSectionComponent, selector: "dbx-section", inputs: ["elevated"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxFormSectionWrapperComponent, decorators: [{
             type: Component,
             args: [{
                     template: `
-    <div class="form-section">
-      <h3>{{ to.label }}</h3>
-      <div class="form-section-content">
-        <ng-container #fieldComponent></ng-container>
-      </div>
-      <dbx-hint *ngIf="description">{{ description }}</dbx-hint>
-    </div>
+    <dbx-section [header]="header" [hint]="hint">
+      <ng-container #fieldComponent></ng-container>
+    </dbx-section>
   `
                 }]
         }] });
 
-class FormFlexWrapperComponent extends FieldWrapper {
+class DbxFormFlexWrapperComponent extends FieldWrapper {
+    get flexWrapper() {
+        return this.to.flexWrapper;
+    }
+    get breakpoint() {
+        return this.flexWrapper?.breakpoint;
+    }
+    get relative() {
+        return this.flexWrapper?.relative ?? false;
+    }
 }
-FormFlexWrapperComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: FormFlexWrapperComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-FormFlexWrapperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.0", type: FormFlexWrapperComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
-    <div class="form-flex-section">
+DbxFormFlexWrapperComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxFormFlexWrapperComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+DbxFormFlexWrapperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.0", type: DbxFormFlexWrapperComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
+    <div class="dbx-form-flex-section" dbxFlexGroup [content]="false" [relative]="relative" [breakpoint]="breakpoint">
       <ng-container #fieldComponent></ng-container>
     </div>
-  `, isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: FormFlexWrapperComponent, decorators: [{
+  `, isInline: true, directives: [{ type: i1$1.DbxFlexGroupDirective, selector: "[dbxFlexGroup]", inputs: ["content", "relative", "breakpoint"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxFormFlexWrapperComponent, decorators: [{
             type: Component,
             args: [{
                     template: `
-    <div class="form-flex-section">
+    <div class="dbx-form-flex-section" dbxFlexGroup [content]="false" [relative]="relative" [breakpoint]="breakpoint">
       <ng-container #fieldComponent></ng-container>
     </div>
   `
                 }]
         }] });
 
-class FormSubsectionWrapperComponent extends FieldWrapper {
-    get description() {
-        return this.to.description;
+class DbxFormSubsectionWrapperComponent extends FieldWrapper {
+    get header() {
+        return this.to.subsectionWrapper?.header;
+    }
+    get hint() {
+        return this.to.subsectionWrapper?.hint;
     }
 }
-FormSubsectionWrapperComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: FormSubsectionWrapperComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-FormSubsectionWrapperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.0", type: FormSubsectionWrapperComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
-    <div class="form-section form-subsection">
-      <h4>{{ to.label }}</h4>
-      <div class="form-section-content">
-        <ng-container #fieldComponent></ng-container>
-      </div>
-      <dbx-hint *ngIf="description"><small>{{ description }}</small></dbx-hint>
-    </div>
-  `, isInline: true, components: [{ type: i1$1.DbxHintComponent, selector: "dbx-hint" }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: FormSubsectionWrapperComponent, decorators: [{
+DbxFormSubsectionWrapperComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxFormSubsectionWrapperComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+DbxFormSubsectionWrapperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.0", type: DbxFormSubsectionWrapperComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
+  <dbx-subsection [header]="header" [hint]="hint">
+    <ng-container #fieldComponent></ng-container>
+  </dbx-subsection>
+  `, isInline: true, components: [{ type: i1$1.DbxSubSectionComponent, selector: "dbx-subsection" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxFormSubsectionWrapperComponent, decorators: [{
             type: Component,
             args: [{
                     template: `
-    <div class="form-section form-subsection">
-      <h4>{{ to.label }}</h4>
-      <div class="form-section-content">
-        <ng-container #fieldComponent></ng-container>
-      </div>
-      <dbx-hint *ngIf="description"><small>{{ description }}</small></dbx-hint>
-    </div>
+  <dbx-subsection [header]="header" [hint]="hint">
+    <ng-container #fieldComponent></ng-container>
+  </dbx-subsection>
   `
                 }]
         }] });
 
-const DEFAULT_HAS_VALUE_FN = hasValueOrNotEmpty;
+const DEFAULT_HAS_VALUE_FN = (x) => !objectIsEmpty(x);
 class AbstractFormExpandableSectionWrapperDirective extends FieldWrapper {
     constructor() {
         super(...arguments);
         this._formControlObs = new BehaviorSubject(undefined);
         this.formControl$ = this._formControlObs.pipe(filterMaybe());
         this._toggleOpen = new BehaviorSubject(undefined);
-        this.show$ = this._toggleOpen.pipe(mergeMap((toggleOpen) => {
+        this.show$ = this._toggleOpen.pipe(switchMap$1((toggleOpen) => {
             if (toggleOpen != null) {
                 return of(toggleOpen);
             }
@@ -614,13 +719,20 @@ class AbstractFormExpandableSectionWrapperDirective extends FieldWrapper {
         }), shareReplay$1(1))));
     }
     get expandableSection() {
-        return this.to.expandableSection;
+        return this.to.expandWrapper;
     }
     get hasValueFn() {
         return this.expandableSection?.hasValueFn ?? DEFAULT_HAS_VALUE_FN;
     }
     get expandLabel() {
-        return this.expandableSection?.expandLabel ?? this.field?.templateOptions?.label ?? String(this.field?.key);
+        let label = this.expandableSection?.expandLabel ?? this.field?.templateOptions?.label;
+        if (label == null) {
+            const firstFieldGroup = this.field.fieldGroup?.[0];
+            if (firstFieldGroup) {
+                label = firstFieldGroup.templateOptions?.label ?? firstFieldGroup.key;
+            }
+        }
+        return label;
     }
     open() {
         this._toggleOpen.next(true);
@@ -638,23 +750,27 @@ AbstractFormExpandableSectionWrapperDirective.ɵdir = i0.ɵɵngDeclareDirective(
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: AbstractFormExpandableSectionWrapperDirective, decorators: [{
             type: Directive
         }] });
+
 /**
  * Section that is expandable by a button until a value is set, or the button is pressed.
  */
-class FormExpandableSectionWrapperComponent extends AbstractFormExpandableSectionWrapperDirective {
+class DbxFormExpandWrapperComponent extends AbstractFormExpandableSectionWrapperDirective {
+    get buttonType() {
+        return this.expandableSection?.buttonType ?? 'button';
+    }
 }
-FormExpandableSectionWrapperComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: FormExpandableSectionWrapperComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-FormExpandableSectionWrapperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.0", type: FormExpandableSectionWrapperComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
+DbxFormExpandWrapperComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxFormExpandWrapperComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+DbxFormExpandWrapperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.0", type: DbxFormExpandWrapperComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
   <ng-container [ngSwitch]="show$ | async">
     <ng-container *ngSwitchCase="true">
       <ng-container #fieldComponent></ng-container>
     </ng-container>
     <ng-container *ngSwitchCase="false">
-      <span class="form-expandable-section-button" (click)="open()">{{ expandLabel }}</span>
+      <span class="dbx-form-expandable-section-button" (click)="open()">{{ expandLabel }}</span>
     </ng-container>
   </ng-container>
   `, isInline: true, directives: [{ type: i5.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i5.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }], pipes: { "async": i5.AsyncPipe } });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: FormExpandableSectionWrapperComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxFormExpandWrapperComponent, decorators: [{
             type: Component,
             args: [{
                     template: `
@@ -663,7 +779,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImpor
       <ng-container #fieldComponent></ng-container>
     </ng-container>
     <ng-container *ngSwitchCase="false">
-      <span class="form-expandable-section-button" (click)="open()">{{ expandLabel }}</span>
+      <span class="dbx-form-expandable-section-button" (click)="open()">{{ expandLabel }}</span>
     </ng-container>
   </ng-container>
   `
@@ -675,7 +791,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImpor
  */
 class AutoTouchFieldWrapperComponent extends FieldWrapper {
     ngOnInit() {
-        this.formControl.valueChanges.pipe(delay(200)).subscribe(() => {
+        this.formControl.valueChanges.pipe(delay$1(200)).subscribe(() => {
             if (!this.formControl.pristine && this.formControl.untouched) {
                 this.formControl.markAsTouched();
                 this.formControl.updateValueAndValidity();
@@ -695,45 +811,42 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImpor
 /**
  * Section that is expandable by a button until a value is set, or the button is pressed.
  */
-class FormToggleSectionWrapperComponent extends AbstractFormExpandableSectionWrapperDirective {
+class DbxFormToggleWrapperComponent extends AbstractFormExpandableSectionWrapperDirective {
     constructor() {
         super(...arguments);
-        this.$slideLabel = this._toggleOpen.pipe(switchMap(x => {
-            if (this.toggleSection?.toggleLabelObs) {
-                return this.toggleSection?.toggleLabelObs(x);
+        this.slideLabel$ = this._toggleOpen.pipe(switchMap$1(x => {
+            if (this.expandableSection?.toggleLabelObs) {
+                return this.expandableSection?.toggleLabelObs(x);
             }
             else {
                 return of(this.expandLabel);
             }
-        }), shareReplay(1));
-    }
-    get toggleSection() {
-        return this.to.toggleSection;
+        }), shareReplay$1(1));
     }
     onToggleChange() {
-        this.show$.pipe(first()).subscribe((show) => {
+        this.show$.pipe(first$1()).subscribe((show) => {
             this._toggleOpen.next(!show);
         });
     }
 }
-FormToggleSectionWrapperComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: FormToggleSectionWrapperComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-FormToggleSectionWrapperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.0", type: FormToggleSectionWrapperComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
-  <div class="form-toggle-wrapper" [ngSwitch]="show$ | async">
-    <div class="form-toggle-wrapper-toggle">
-      <mat-slide-toggle [checked]="show$ | async" (toggleChange)="onToggleChange()">{{ $slideLabel | async }}</mat-slide-toggle>
+DbxFormToggleWrapperComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxFormToggleWrapperComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+DbxFormToggleWrapperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.0", type: DbxFormToggleWrapperComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
+  <div class="dbx-form-toggle-wrapper" [ngSwitch]="show$ | async">
+    <div class="dbx-form-toggle-wrapper-toggle">
+      <mat-slide-toggle [checked]="show$ | async" (toggleChange)="onToggleChange()">{{ slideLabel$ | async }}</mat-slide-toggle>
     </div>
     <ng-container *ngSwitchCase="true">
       <ng-container #fieldComponent></ng-container>
     </ng-container>
   </div>
   `, isInline: true, components: [{ type: i1$3.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex", "name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "checked"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }], directives: [{ type: i5.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i5.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }], pipes: { "async": i5.AsyncPipe } });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: FormToggleSectionWrapperComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxFormToggleWrapperComponent, decorators: [{
             type: Component,
             args: [{
                     template: `
-  <div class="form-toggle-wrapper" [ngSwitch]="show$ | async">
-    <div class="form-toggle-wrapper-toggle">
-      <mat-slide-toggle [checked]="show$ | async" (toggleChange)="onToggleChange()">{{ $slideLabel | async }}</mat-slide-toggle>
+  <div class="dbx-form-toggle-wrapper" [ngSwitch]="show$ | async">
+    <div class="dbx-form-toggle-wrapper-toggle">
+      <mat-slide-toggle [checked]="show$ | async" (toggleChange)="onToggleChange()">{{ slideLabel$ | async }}</mat-slide-toggle>
     </div>
     <ng-container *ngSwitchCase="true">
       <ng-container #fieldComponent></ng-container>
@@ -743,16 +856,56 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImpor
                 }]
         }] });
 
+class DbxFormStyleWrapperComponent extends FieldWrapper {
+    constructor() {
+        super(...arguments);
+        this._style = new BehaviorSubject(undefined);
+        this.style$ = this._style.pipe(switchMapMaybeDefault(''), shareReplay$1(1));
+    }
+    get styleWrapper() {
+        return this.field.styleWrapper;
+    }
+    get styleGetter() {
+        return this.styleWrapper.style;
+    }
+    ngOnInit() {
+        this._style.next(asObservable(this.styleGetter));
+    }
+    ngOnDestroy() {
+        this._style.complete();
+    }
+}
+DbxFormStyleWrapperComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxFormStyleWrapperComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+DbxFormStyleWrapperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.0", type: DbxFormStyleWrapperComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
+    <div [ngClass]="(style$ | async) ?? ''">
+      <ng-container #fieldComponent></ng-container>
+    </div>
+  `, isInline: true, directives: [{ type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2$2.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }], pipes: { "async": i5.AsyncPipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxFormStyleWrapperComponent, decorators: [{
+            type: Component,
+            args: [{
+                    template: `
+    <div [ngClass]="(style$ | async) ?? ''">
+      <ng-container #fieldComponent></ng-container>
+    </div>
+  `
+                }]
+        }] });
+
 class DbxFormFormlyWrapperModule {
 }
 DbxFormFormlyWrapperModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxFormFormlyWrapperModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
 DbxFormFormlyWrapperModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxFormFormlyWrapperModule, declarations: [AutoTouchFieldWrapperComponent,
-        FormSectionWrapperComponent,
-        FormSubsectionWrapperComponent,
-        FormInfoSectionWrapperComponent,
-        FormExpandableSectionWrapperComponent,
-        FormToggleSectionWrapperComponent], imports: [CommonModule,
+        DbxFormSectionWrapperComponent,
+        DbxFormSubsectionWrapperComponent,
+        DbxFormInfoWrapperComponent,
+        DbxFormExpandWrapperComponent,
+        DbxFormToggleWrapperComponent,
+        DbxFormFlexWrapperComponent,
+        DbxFormStyleWrapperComponent], imports: [CommonModule,
         DbxTextModule,
+        DbxFlexLayoutModule,
+        DbxSectionLayoutModule,
         MatButtonModule,
         MatSlideToggleModule,
         MatIconModule,
@@ -760,6 +913,8 @@ DbxFormFormlyWrapperModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.
 DbxFormFormlyWrapperModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxFormFormlyWrapperModule, imports: [[
             CommonModule,
             DbxTextModule,
+            DbxFlexLayoutModule,
+            DbxSectionLayoutModule,
             MatButtonModule,
             MatSlideToggleModule,
             MatIconModule,
@@ -767,12 +922,13 @@ DbxFormFormlyWrapperModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.
             FormlyModule.forChild({
                 wrappers: [
                     { name: 'autotouch', component: AutoTouchFieldWrapperComponent },
-                    { name: 'expandable', component: FormExpandableSectionWrapperComponent },
-                    { name: 'toggle', component: FormToggleSectionWrapperComponent },
-                    { name: 'section', component: FormSectionWrapperComponent },
-                    { name: 'subsection', component: FormSubsectionWrapperComponent },
-                    { name: 'info', component: FormInfoSectionWrapperComponent },
-                    { name: 'flex', component: FormFlexWrapperComponent }
+                    { name: 'expandable', component: DbxFormExpandWrapperComponent },
+                    { name: 'toggle', component: DbxFormToggleWrapperComponent },
+                    { name: 'section', component: DbxFormSectionWrapperComponent },
+                    { name: 'subsection', component: DbxFormSubsectionWrapperComponent },
+                    { name: 'info', component: DbxFormInfoWrapperComponent },
+                    { name: 'flex', component: DbxFormFlexWrapperComponent },
+                    { name: 'style', component: DbxFormStyleWrapperComponent }
                 ]
             })
         ]] });
@@ -782,6 +938,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImpor
                     imports: [
                         CommonModule,
                         DbxTextModule,
+                        DbxFlexLayoutModule,
+                        DbxSectionLayoutModule,
                         MatButtonModule,
                         MatSlideToggleModule,
                         MatIconModule,
@@ -789,22 +947,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImpor
                         FormlyModule.forChild({
                             wrappers: [
                                 { name: 'autotouch', component: AutoTouchFieldWrapperComponent },
-                                { name: 'expandable', component: FormExpandableSectionWrapperComponent },
-                                { name: 'toggle', component: FormToggleSectionWrapperComponent },
-                                { name: 'section', component: FormSectionWrapperComponent },
-                                { name: 'subsection', component: FormSubsectionWrapperComponent },
-                                { name: 'info', component: FormInfoSectionWrapperComponent },
-                                { name: 'flex', component: FormFlexWrapperComponent }
+                                { name: 'expandable', component: DbxFormExpandWrapperComponent },
+                                { name: 'toggle', component: DbxFormToggleWrapperComponent },
+                                { name: 'section', component: DbxFormSectionWrapperComponent },
+                                { name: 'subsection', component: DbxFormSubsectionWrapperComponent },
+                                { name: 'info', component: DbxFormInfoWrapperComponent },
+                                { name: 'flex', component: DbxFormFlexWrapperComponent },
+                                { name: 'style', component: DbxFormStyleWrapperComponent }
                             ]
                         })
                     ],
                     declarations: [
                         AutoTouchFieldWrapperComponent,
-                        FormSectionWrapperComponent,
-                        FormSubsectionWrapperComponent,
-                        FormInfoSectionWrapperComponent,
-                        FormExpandableSectionWrapperComponent,
-                        FormToggleSectionWrapperComponent
+                        DbxFormSectionWrapperComponent,
+                        DbxFormSubsectionWrapperComponent,
+                        DbxFormInfoWrapperComponent,
+                        DbxFormExpandWrapperComponent,
+                        DbxFormToggleWrapperComponent,
+                        DbxFormFlexWrapperComponent,
+                        DbxFormStyleWrapperComponent
                     ],
                     exports: []
                 }]
@@ -886,10 +1047,42 @@ function formlyField(fieldConfig) {
     }
     return fieldConfig;
 }
+function templateOptionsForFieldConfig(fieldConfig, override) {
+    const templateOptions = templateOptionsValueForFieldConfig(fieldConfig, override);
+    return {
+        templateOptions
+    };
+}
+function templateOptionsValueForFieldConfig(fieldConfig, override) {
+    const { label, placeholder, required, readonly, description, autocomplete } = mergeObjects([fieldConfig, override], { keysFilter: ['label', 'placeholder', 'required', 'readonly', 'description', 'autocomplete'] });
+    const attributes = mergeObjects([fieldConfig.attributes, override?.attributes]);
+    const result = filterFromPOJO({
+        ...override,
+        label,
+        placeholder,
+        required,
+        readonly,
+        description,
+        attributes
+    });
+    // Apply autocomplete
+    if (autocomplete != null) {
+        if (autocomplete === false) {
+            result.attributes = {
+                ...result.attributes,
+                ...disableFormlyFieldAutofillAttributes()
+            };
+        }
+        else {
+            result.attributes['autocomplete'] = autocomplete;
+        }
+    }
+    return result;
+}
 /**
  * Returns configuration for a formlyField that will disable autofill/autocomplete for a field.
  */
-function disableFormlyFieldAutofill() {
+function disableFormlyFieldAutofillAttributes() {
     // https://stackoverflow.com/questions/15738259/disabling-chrome-autofill
     return {
         name: 'password',
@@ -897,20 +1090,20 @@ function disableFormlyFieldAutofill() {
     };
 }
 
-function checklistItemField({ key, label = '', placeholder = '', displayContentObs, componentClass, required = false }) {
+function checklistItemField(config) {
+    const { key, displayContentObs, componentClass } = config;
     const fieldConfig = formlyField({
         key,
         type: 'checklistitem',
-        templateOptions: {
-            label,
-            placeholder,
-            required
+        checklistField: {
+            displayContentObs,
+            componentClass
         },
-        displayContentObs,
-        componentClass
+        ...templateOptionsForFieldConfig(config)
     });
     return fieldConfig;
 }
+
 /**
  * Used for building a set of configurations for a data-type object that has as second object that is used as a checklist.
  */
@@ -1015,22 +1208,22 @@ class ChecklistItemFieldDataSetBuilder {
 class AbstractFormComponentFieldWrappedComponent {
 }
 class FormComponentFieldComponent extends FieldType {
-    constructor() {
-        super();
-    }
     get config() {
         return this._config;
     }
+    get componentField() {
+        return this.field.componentField;
+    }
     ngOnInit() {
         this._config = {
-            componentClass: this.field.componentClass,
+            componentClass: this.componentField.componentClass,
             init: (instance) => {
                 instance.field = this;
             }
         };
     }
 }
-FormComponentFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: FormComponentFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+FormComponentFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: FormComponentFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
 FormComponentFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.0", type: FormComponentFieldComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
     <div class="form-wrapped-component" dbx-injected-content [config]="config"></div>
   `, isInline: true, components: [{ type: i2.DbxInjectedComponent, selector: "dbx-injected-content, [dbx-injected-content]", inputs: ["config", "template"] }] });
@@ -1041,7 +1234,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImpor
     <div class="form-wrapped-component" dbx-injected-content [config]="config"></div>
   `
                 }]
-        }], ctorParameters: function () { return []; } });
+        }] });
 
 class DbxFormFormlyComponentFieldModule {
 }
@@ -1081,33 +1274,35 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImpor
 function componentField({ componentClass }) {
     return {
         type: 'component',
-        componentClass
+        componentField: {
+            componentClass
+        }
     };
 }
 
 /**
  * Used for picking pre-set values using items as the presentation.
  */
-class AbstractDbxPickableItemFieldDirective extends FieldType {
+class AbstractDbxPickableItemFieldDirective extends FieldType$1 {
     constructor() {
         super(...arguments);
         this.inputCtrl = new FormControl('');
         this._formControlObs = new BehaviorSubject(undefined);
         this.formControl$ = this._formControlObs.pipe(filterMaybe());
         this._displayHashMap = new BehaviorSubject(new Map());
-        this.filterInputValue$ = this.inputCtrl.valueChanges.pipe(startWith$1(undefined));
-        this.filterInputValueString$ = this.filterInputValue$.pipe(debounceTime(200), distinctUntilChanged(), shareReplay(1));
-        this.loadResultsDisplayValuesState$ = this.formControl$.pipe(first(), switchMap(() => this.loadValuesFn().pipe(switchMap((x) => this.loadDisplayValuesForFieldValues(x)), startWith$1(beginLoading()))), shareReplay(1));
-        this._formControlValue = this.formControl$.pipe(switchMap(control => control.valueChanges.pipe(startWith$1(control.value), shareReplay(1))));
-        this.loadResultsDisplayValues$ = this.loadResultsDisplayValuesState$.pipe(map(x => x?.value ?? []));
+        this.filterInputValue$ = this.inputCtrl.valueChanges.pipe(startWith(undefined));
+        this.filterInputValueString$ = this.filterInputValue$.pipe(debounceTime(200), distinctUntilChanged$1(), shareReplay$1(1));
+        this.loadResultsDisplayValuesState$ = this.formControl$.pipe(first$1(), switchMap$1(() => this.loadValuesFn().pipe(switchMap$1((x) => this.loadDisplayValuesForFieldValues(x)), startWith(beginLoading()))), shareReplay$1(1));
+        this._formControlValue = this.formControl$.pipe(switchMap$1(control => control.valueChanges.pipe(startWith(control.value), shareReplay$1(1))));
+        this.loadResultsDisplayValues$ = this.loadResultsDisplayValuesState$.pipe(map$1(x => x?.value ?? []));
         /**
          * Current values in the form control.
          */
-        this.values$ = this._formControlValue.pipe(map(convertMaybeToArray), shareReplay(1));
+        this.values$ = this._formControlValue.pipe(map$1(convertMaybeToArray), shareReplay$1(1));
         /**
          * Current values with their display value.
          */
-        this.displayValuesState$ = combineLatest([this.loadResultsDisplayValues$, this.values$]).pipe(switchMap(([displayValues, currentValues]) => {
+        this.displayValuesState$ = combineLatest([this.loadResultsDisplayValues$, this.values$]).pipe(switchMap$1(([displayValues, currentValues]) => {
             const displayValuesMap = makeValuesGroupMap(displayValues, (x) => this.hashForValue(x.value));
             const valuesNotInDisplayMap = [];
             currentValues.forEach((x) => {
@@ -1118,7 +1313,7 @@ class AbstractDbxPickableItemFieldDirective extends FieldType {
                 }
             });
             if (valuesNotInDisplayMap.length) {
-                return this.loadDisplayValuesForValues(valuesNotInDisplayMap).pipe(map(x => mapLoadingStateResults(x, {
+                return this.loadDisplayValuesForValues(valuesNotInDisplayMap).pipe(map$1(x => mapLoadingStateResults(x, {
                     mapValue: (loadedValues) => {
                         loadedValues.forEach(x => x.isUnknown = x.isUnknown ?? true); // Assign unknown flag.
                         return ([...displayValues, ...loadedValues]);
@@ -1132,70 +1327,77 @@ class AbstractDbxPickableItemFieldDirective extends FieldType {
         /**
          * Results to be displayed if filtered.
          */
-        this.filteredSearchResultsState$ = this.loadResultsDisplayValues$.pipe(switchMap((values) => this.filterInputValueString$.pipe(switchMap(text => combineLatest([this._filterValues(text, values), this.displayValuesState$]).pipe(map(([values, displayState]) => mapLoadingStateResults(displayState, {
+        this.filteredSearchResultsState$ = this.loadResultsDisplayValues$.pipe(switchMap$1((values) => this.filterInputValueString$.pipe(switchMap$1(text => combineLatest([this._filterValues(text, values), this.displayValuesState$]).pipe(map$1(([values, displayState]) => mapLoadingStateResults(displayState, {
             mapValue: (displayValues) => {
                 const valueHashSet = new Set(values.map(x => this.hashForValue(x)));
                 return displayValues.filter(x => !x.isUnknown && valueHashSet.has(x._hash));
             }
-        })))))), shareReplay(1));
-        this.filteredSearchResults$ = this.filteredSearchResultsState$.pipe(map(x => x?.value), filterMaybe(), shareReplay(1));
-        this.items$ = combineLatest([this.filteredSearchResults$, this.values$]).pipe(map(([displayValues, values]) => {
+        })), startWith(beginLoading()))))), shareReplay$1(1));
+        this.filteredSearchResults$ = this.filteredSearchResultsState$.pipe(map$1(x => x?.value), filterMaybe(), shareReplay$1(1));
+        this.items$ = combineLatest([this.filteredSearchResults$, this.values$]).pipe(map$1(([displayValues, values]) => {
             const selectedHashValuesSet = new Set(values.map(x => this.hashForValue(x)));
-            let items = displayValues.map((x) => ({ display: x, selected: selectedHashValuesSet.has(x._hash) }));
+            let items = displayValues.map((x) => ({ value: x, selected: selectedHashValuesSet.has(x._hash) }));
             if (this.sortItems) {
                 items = this.sortItems(items);
             }
             return items;
-        }), shareReplay(1));
-        this.itemsLoadingState$ = this.loadResultsDisplayValues$.pipe(switchMap(x => this.items$.pipe(first(), map(x => successResult(x)), startWith$1(beginLoading()), shareReplay(1))));
+        }), shareReplay$1(1));
+        this.itemsLoadingState$ = this.loadResultsDisplayValues$.pipe(switchMap$1(x => this.items$.pipe(first$1(), map$1(x => successResult(x)), startWith(beginLoading()), shareReplay$1(1))));
         /**
          * Context used for managing the loading of items, or when the current results change.
          */
-        this.context = new LoadingStateContextInstance({ obs: this.itemsLoadingState$, showLoadingOnNoValue: false });
-        this.filterItemsLoadingState$ = this.items$.pipe(map(x => successResult(x)), startWith$1(beginLoading()), shareReplay(1));
+        this.context = new ListLoadingStateContextInstance({ obs: this.itemsLoadingState$, showLoadingOnNoValue: false });
+        this.filterItemsLoadingState$ = this.items$.pipe(map$1(x => successResult(x)), startWith(beginLoading()), shareReplay$1(1));
         /**
          * Context used for searching/filtering.
          */
-        this.filterResultsContext = new LoadingStateContextInstance({ obs: this.loadResultsDisplayValuesState$, showLoadingOnNoValue: true });
+        this.filterResultsContext = new ListLoadingStateContextInstance({ obs: this.filteredSearchResultsState$, showLoadingOnNoValue: true });
+        this.noItemsAvailable$ = this.filterItemsLoadingState$.pipe(isListLoadingStateEmpty(), distinctUntilChanged$1());
+    }
+    get readonly() {
+        return this.field.templateOptions?.readonly;
+    }
+    get isReadonlyOrDisabled() {
+        return this.readonly || this.disabled;
+    }
+    get pickableField() {
+        return this.field.pickableField;
     }
     get multiSelect() {
-        return this.field.multiSelect ?? true;
+        return this.pickableField.multiSelect ?? true;
     }
     get asArrayValue() {
-        return this.field.asArrayValue ?? true;
+        return this.pickableField.asArrayValue ?? true;
     }
     get filterLabel() {
-        return this.field.filterLabel;
-    }
-    get readonly() {
-        return this.field.templateOptions?.readonly;
+        return this.pickableField.filterLabel;
     }
-    get required() {
-        return this.field.templateOptions?.required;
+    get name() {
+        return this.field.name ?? (camelCase(this.label ?? this.key));
     }
-    get placeholder() {
-        return this.field.templateOptions?.placeholder ?? '';
+    get label() {
+        return this.field.templateOptions?.label;
     }
-    get description() {
-        return this.field.templateOptions?.description;
+    get autocomplete() {
+        return this.field.templateOptions?.attributes?.['autocomplete'] ?? this.key;
     }
     get sortItems() {
-        return this.field.sortItems;
+        return this.pickableField.sortItems;
     }
     get hashForValue() {
-        return this.field.hashForValue ?? ((x) => x);
+        return this.pickableField.hashForValue ?? ((x) => x);
     }
     get displayForValue() {
-        return this.field.displayForValue;
+        return this.pickableField.displayForValue;
     }
     get showFilterInput() {
-        return Boolean(this.field.filterValues);
+        return Boolean(this.pickableField.filterValues);
     }
     get filterValuesFn() {
-        return this.field.filterValues ?? ((_, x) => of(x.map(y => y.value)));
+        return this.pickableField.filterValues ?? ((_, x) => of(x.map(y => y.value)));
     }
     get skipFilterFnOnEmpty() {
-        return this.field.skipFilterFnOnEmpty ?? true;
+        return this.pickableField.skipFilterFnOnEmpty ?? true;
     }
     get _filterValues() {
         let fn;
@@ -1217,25 +1419,25 @@ class AbstractDbxPickableItemFieldDirective extends FieldType {
         return fn;
     }
     get showTextFilter() {
-        return this.field.showTextFilter ?? Boolean(this.field.filterValues);
+        return this.pickableField.showTextFilter ?? Boolean(this.pickableField.filterValues);
     }
     get loadValuesFn() {
-        return this.field.loadValues;
+        return this.pickableField.loadValues;
     }
     get values() {
         return this._getValueOnFormControl(this.formControl.value) ?? [];
     }
     get footerConfig() {
-        return this.field.footerConfig;
+        return this.pickableField.footerConfig;
     }
     loadDisplayValuesForValues(values) {
         return this.loadDisplayValuesForFieldValues(values.map((value) => ({ value })));
     }
     loadDisplayValuesForFieldValues(values) {
-        return this.getDisplayValuesForFieldValues(values).pipe(map((displayValues) => ({ loading: false, model: displayValues })), startWith$1({ loading: true }), shareReplay(1));
+        return this.getDisplayValuesForFieldValues(values).pipe(map$1((displayValues) => successResult(displayValues)), startWith(beginLoading()), shareReplay$1(1));
     }
     getDisplayValuesForFieldValues(values) {
-        return this._displayHashMap.pipe(mergeMap$1((displayMap) => {
+        return this._displayHashMap.pipe(mergeMap((displayMap) => {
             const mappingResult = values
                 .map(x => [x, this.hashForValue(x.value)])
                 .map(([x, hash], i) => [i, hash, x, displayMap.get(hash)]);
@@ -1244,7 +1446,7 @@ class AbstractDbxPickableItemFieldDirective extends FieldType {
             if (needsDisplay.length > 0) {
                 // Go get the display value.
                 const displayValuesObs = this.displayForValue(needsDisplay.map(x => x[2]));
-                return displayValuesObs.pipe(first(), map((displayResults) => {
+                return displayValuesObs.pipe(first$1(), map$1((displayResults) => {
                     const displayResultsWithHash = displayResults.map((x) => {
                         x._hash = this.hashForValue(x.value);
                         return x;
@@ -1267,13 +1469,15 @@ class AbstractDbxPickableItemFieldDirective extends FieldType {
         }));
     }
     ngOnInit() {
+        super.ngOnInit();
         this._formControlObs.next(this.formControl);
         // Focus after finished loading for the first time.
-        this.context.loading$.pipe(delay(10), filter(x => x), first()).subscribe(() => {
+        this.context.loading$.pipe(delay(10), filter$1(x => x), first$1()).subscribe(() => {
             this.filterMatInput?.focus();
         });
     }
     ngOnDestroy() {
+        super.ngOnDestroy();
         this._displayHashMap.complete();
         this._formControlObs.complete();
         this.filterResultsContext.destroy();
@@ -1323,48 +1527,111 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImpor
 /**
  * Used for picking pre-set values using chips as the presentation.
  */
-class DbxPickableChipFieldComponent extends AbstractDbxPickableItemFieldDirective {
+class DbxPickableChipListFieldComponent extends AbstractDbxPickableItemFieldDirective {
     itemClicked(item) {
-        if (item.selected) {
-            this.removeValue(item.display.value);
-        }
-        else {
-            this.addValue(item.display.value);
+        if (!item.disabled && !this.isReadonlyOrDisabled) {
+            if (item.selected) {
+                this.removeValue(item.value.value);
+            }
+            else {
+                this.addValue(item.value.value);
+            }
         }
     }
 }
-DbxPickableChipFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxPickableChipFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-DbxPickableChipFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.0", type: DbxPickableChipFieldComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<div class=\"dbx-pickable-item-field\">\n  <dbx-loading [context]=\"context\">\n    <ng-container *ngIf=\"showFilterInput\">\n      <ng-container *ngTemplateOutlet=\"filterTemplate\"></ng-container>\n    </ng-container>\n    <div class=\"dbx-pickable-item-field-chips\">\n      <!-- TODO: Add back aria-label  [attr.aria-label]=\"'email ' + emailParticipantsType\" -->\n      <mat-chip-list [selectable]=\"!readonly\" [disabled]=\"readonly\" #chipList>\n        <mat-chip *ngFor=\"let item of items$ | async\" (click)=\"itemClicked(item)\" [selected]=\"item.selected\">\n          <span class=\"s-chip-label\">{{ item.display.label }}</span>\n        </mat-chip>\n      </mat-chip-list>\n      <dbx-injected-content [config]=\"footerConfig\"></dbx-injected-content>\n    </div>\n  </dbx-loading>\n</div>\n\n<!-- Filter Input -->\n<ng-template #filterTemplate>\n  <div class=\"dbx-pickable-item-field-filter\">\n    <mat-form-field class=\"dbx-pickable-item-field-filter-field\" appearance=\"fill\">\n      <mat-label>{{ filterLabel }}</mat-label>\n      <input name=\"filter items\" #filterMatInput=\"matInput\" matInput [placeholder]=\"placeholder\"\n        [formControl]=\"inputCtrl\">\n    </mat-form-field>\n    <div class=\"searchable-field-form-loading\">\n      <dbx-loading [linear]=\"true\" [context]=\"filterResultsContext\"></dbx-loading>\n    </div>\n  </div>\n</ng-template>\n", components: [{ type: i1$1.DbxLoadingComponent, selector: "dbx-loading", inputs: ["show", "text", "mode", "color", "diameter", "linear", "context", "loading", "error"] }, { type: i5$1.MatChipList, selector: "mat-chip-list", inputs: ["errorStateMatcher", "multiple", "compareWith", "value", "required", "placeholder", "disabled", "aria-orientation", "selectable", "tabIndex"], outputs: ["change", "valueChange"], exportAs: ["matChipList"] }, { type: i2.DbxInjectedComponent, selector: "dbx-injected-content, [dbx-injected-content]", inputs: ["config", "template"] }, { type: i4.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5$1.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disableRipple", "tabIndex", "selected", "value", "selectable", "disabled", "removable"], outputs: ["selectionChange", "destroyed", "removed"], exportAs: ["matChip"] }, { type: i4.MatLabel, selector: "mat-label" }, { type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], pipes: { "async": i5.AsyncPipe } });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxPickableChipFieldComponent, decorators: [{
+DbxPickableChipListFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxPickableChipListFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+DbxPickableChipListFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.0", type: DbxPickableChipListFieldComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<div class=\"dbx-pickable-item-field\">\n  <dbx-loading [context]=\"context\" [linear]=\"true\">\n    <ng-container *ngIf=\"showFilterInput\">\n      <ng-container *ngTemplateOutlet=\"filterTemplate\"></ng-container>\n    </ng-container>\n    <!-- Content -->\n    <div class=\"dbx-pickable-item-field-chips\">\n      <mat-chip-list [required]=\"required\" [selectable]=\"!isReadonlyOrDisabled\" #chipList>\n        <mat-chip *ngFor=\"let item of items$ | async\" (click)=\"itemClicked(item)\" [selected]=\"item.selected\"\n          [disabled]=\"isReadonlyOrDisabled || item.disabled\">\n          <span class=\"dbx-chip-label\">{{ item.value.label }}</span>\n          <span class=\"dbx-chip-sublabel\" *ngIf=\"item.value.sublabel\">{{ item.value.sublabel }}</span>\n        </mat-chip>\n      </mat-chip-list>\n      <dbx-injected-content [config]=\"footerConfig\"></dbx-injected-content>\n    </div>\n  </dbx-loading>\n</div>\n\n<!-- Filter Input -->\n<ng-template #filterTemplate>\n  <div class=\"dbx-pickable-item-field-filter\">\n    <div class=\"dbx-label\">{{ filterLabel }}</div>\n    <input [name]=\"name\" autocomplete=\"{{ autocomplete }}\" #filterMatInput=\"matInput\" matInput\n      [placeholder]=\"placeholder\" [formControl]=\"inputCtrl\">\n    <mat-divider></mat-divider>\n    <dbx-loading [linear]=\"true\" [context]=\"filterResultsContext\"></dbx-loading>\n    <!-- No items found. -->\n    <p *ngIf=\"noItemsAvailable$ | async\" class=\"dbx-label\">No items match this filter.</p>\n  </div>\n</ng-template>\n", components: [{ type: i1$1.DbxLoadingComponent, selector: "dbx-loading", inputs: ["show", "text", "mode", "color", "diameter", "linear", "context", "loading", "error"] }, { type: i1$5.MatChipList, selector: "mat-chip-list", inputs: ["errorStateMatcher", "multiple", "compareWith", "value", "required", "placeholder", "disabled", "aria-orientation", "selectable", "tabIndex"], outputs: ["change", "valueChange"], exportAs: ["matChipList"] }, { type: i2.DbxInjectedComponent, selector: "dbx-injected-content, [dbx-injected-content]", inputs: ["config", "template"] }, { type: i4$2.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$5.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disableRipple", "tabIndex", "selected", "value", "selectable", "disabled", "removable"], outputs: ["selectionChange", "destroyed", "removed"], exportAs: ["matChip"] }, { type: i6$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i4$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i4$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], pipes: { "async": i5.AsyncPipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxPickableChipListFieldComponent, decorators: [{
             type: Component,
-            args: [{ template: "<div class=\"dbx-pickable-item-field\">\n  <dbx-loading [context]=\"context\">\n    <ng-container *ngIf=\"showFilterInput\">\n      <ng-container *ngTemplateOutlet=\"filterTemplate\"></ng-container>\n    </ng-container>\n    <div class=\"dbx-pickable-item-field-chips\">\n      <!-- TODO: Add back aria-label  [attr.aria-label]=\"'email ' + emailParticipantsType\" -->\n      <mat-chip-list [selectable]=\"!readonly\" [disabled]=\"readonly\" #chipList>\n        <mat-chip *ngFor=\"let item of items$ | async\" (click)=\"itemClicked(item)\" [selected]=\"item.selected\">\n          <span class=\"s-chip-label\">{{ item.display.label }}</span>\n        </mat-chip>\n      </mat-chip-list>\n      <dbx-injected-content [config]=\"footerConfig\"></dbx-injected-content>\n    </div>\n  </dbx-loading>\n</div>\n\n<!-- Filter Input -->\n<ng-template #filterTemplate>\n  <div class=\"dbx-pickable-item-field-filter\">\n    <mat-form-field class=\"dbx-pickable-item-field-filter-field\" appearance=\"fill\">\n      <mat-label>{{ filterLabel }}</mat-label>\n      <input name=\"filter items\" #filterMatInput=\"matInput\" matInput [placeholder]=\"placeholder\"\n        [formControl]=\"inputCtrl\">\n    </mat-form-field>\n    <div class=\"searchable-field-form-loading\">\n      <dbx-loading [linear]=\"true\" [context]=\"filterResultsContext\"></dbx-loading>\n    </div>\n  </div>\n</ng-template>\n" }]
+            args: [{ template: "<div class=\"dbx-pickable-item-field\">\n  <dbx-loading [context]=\"context\" [linear]=\"true\">\n    <ng-container *ngIf=\"showFilterInput\">\n      <ng-container *ngTemplateOutlet=\"filterTemplate\"></ng-container>\n    </ng-container>\n    <!-- Content -->\n    <div class=\"dbx-pickable-item-field-chips\">\n      <mat-chip-list [required]=\"required\" [selectable]=\"!isReadonlyOrDisabled\" #chipList>\n        <mat-chip *ngFor=\"let item of items$ | async\" (click)=\"itemClicked(item)\" [selected]=\"item.selected\"\n          [disabled]=\"isReadonlyOrDisabled || item.disabled\">\n          <span class=\"dbx-chip-label\">{{ item.value.label }}</span>\n          <span class=\"dbx-chip-sublabel\" *ngIf=\"item.value.sublabel\">{{ item.value.sublabel }}</span>\n        </mat-chip>\n      </mat-chip-list>\n      <dbx-injected-content [config]=\"footerConfig\"></dbx-injected-content>\n    </div>\n  </dbx-loading>\n</div>\n\n<!-- Filter Input -->\n<ng-template #filterTemplate>\n  <div class=\"dbx-pickable-item-field-filter\">\n    <div class=\"dbx-label\">{{ filterLabel }}</div>\n    <input [name]=\"name\" autocomplete=\"{{ autocomplete }}\" #filterMatInput=\"matInput\" matInput\n      [placeholder]=\"placeholder\" [formControl]=\"inputCtrl\">\n    <mat-divider></mat-divider>\n    <dbx-loading [linear]=\"true\" [context]=\"filterResultsContext\"></dbx-loading>\n    <!-- No items found. -->\n    <p *ngIf=\"noItemsAvailable$ | async\" class=\"dbx-label\">No items match this filter.</p>\n  </div>\n</ng-template>\n" }]
         }] });
 
 /**
  * Used for picking pre-set values using a selection list as the presentation.
  */
 class DbxPickableListFieldComponent extends AbstractDbxPickableItemFieldDirective {
-    matSelectionChanged(selection) {
-        const options = selection.source.selectedOptions.selected;
-        const items = options.map(x => {
-            const { value, selected, disabled } = x;
-            return ({ item: value, selected, disabled });
-        });
-        this.setValues(items.map(x => x.item.display.value));
+    onSelectionChange(event) {
+        const items = event.items;
+        const values = items.map(x => x.value.value);
+        this.setValues(values);
     }
 }
 DbxPickableListFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxPickableListFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-DbxPickableListFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.0", type: DbxPickableListFieldComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<div class=\"dbx-pickable-item-field\">\n  <dbx-loading [context]=\"context\">\n    <ng-container *ngIf=\"showFilterInput\">\n      <ng-container *ngTemplateOutlet=\"filterTemplate\"></ng-container>\n    </ng-container>\n    <div class=\"dbx-model-list dbx-pickable-item-field-list\">\n      <mat-selection-list [multiple]=\"multiSelect\" (selectionChange)=\"matSelectionChanged($event)\">\n        <mat-list-option *ngFor=\"let item of items$ | async\" [selected]=\"item.selected\" [value]=\"item\">\n          <p>{{ item.display.label }}</p>\n        </mat-list-option>\n      </mat-selection-list>\n      <dbx-injected-content [config]=\"footerConfig\"></dbx-injected-content>\n    </div>\n  </dbx-loading>\n</div>\n\n<!-- Filter Input -->\n<ng-template #filterTemplate>\n  <div class=\"dbx-pickable-item-field-filter\">\n    <mat-form-field class=\"dbx-pickable-item-field-filter-field\" appearance=\"fill\">\n      <mat-label>{{ filterLabel }}</mat-label>\n      <input name=\"filter items\" #filterMatInput=\"matInput\" matInput [placeholder]=\"placeholder\"\n        [formControl]=\"inputCtrl\">\n    </mat-form-field>\n    <div class=\"searchable-field-form-loading\">\n      <dbx-loading [linear]=\"true\" [context]=\"filterResultsContext\"></dbx-loading>\n    </div>\n  </div>\n</ng-template>\n", components: [{ type: i1$1.DbxLoadingComponent, selector: "dbx-loading", inputs: ["show", "text", "mode", "color", "diameter", "linear", "context", "loading", "error"] }, { type: i2$3.MatSelectionList, selector: "mat-selection-list", inputs: ["disableRipple", "tabIndex", "color", "compareWith", "disabled", "multiple"], outputs: ["selectionChange"], exportAs: ["matSelectionList"] }, { type: i2$3.MatListOption, selector: "mat-list-option", inputs: ["disableRipple", "checkboxPosition", "color", "value", "disabled", "selected"], outputs: ["selectedChange"], exportAs: ["matListOption"] }, { type: i2.DbxInjectedComponent, selector: "dbx-injected-content, [dbx-injected-content]", inputs: ["config", "template"] }, { type: i4.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.MatLabel, selector: "mat-label" }, { type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], pipes: { "async": i5.AsyncPipe } });
+DbxPickableListFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.0", type: DbxPickableListFieldComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<div class=\"dbx-pickable-item-field\">\n  <dbx-loading [context]=\"context\">\n    <ng-container *ngIf=\"showFilterInput\">\n      <ng-container *ngTemplateOutlet=\"filterTemplate\"></ng-container>\n    </ng-container>\n    <!-- Content -->\n    <div class=\"dbx-pickable-item-field-list\">\n      <div class=\"dbx-pickable-item-field-list-content\">\n        <dbx-form-pickable-item-field-item-list [disabled]=\"isReadonlyOrDisabled\" [state$]=\"filterItemsLoadingState$\"\n          (selectionChange)=\"onSelectionChange($event)\">\n        </dbx-form-pickable-item-field-item-list>\n      </div>\n      <dbx-injected-content [config]=\"footerConfig\"></dbx-injected-content>\n    </div>\n  </dbx-loading>\n</div>\n\n<!-- Filter Input -->\n<ng-template #filterTemplate>\n  <div class=\"dbx-pickable-item-field-filter\">\n    <div class=\"dbx-label\">{{ filterLabel }}</div>\n    <input [name]=\"name\" autocomplete=\"{{ autocomplete }}\" #filterMatInput=\"matInput\" matInput\n      [placeholder]=\"placeholder\" [formControl]=\"inputCtrl\">\n    <mat-divider></mat-divider>\n    <dbx-loading [linear]=\"true\" [context]=\"filterResultsContext\"></dbx-loading>\n    <!-- No items found. -->\n    <p *ngIf=\"noItemsAvailable$ | async\" class=\"dbx-label\">No items match this filter.</p>\n  </div>\n</ng-template>\n", components: [{ type: i0.forwardRef(function () { return i1$1.DbxLoadingComponent; }), selector: "dbx-loading", inputs: ["show", "text", "mode", "color", "diameter", "linear", "context", "loading", "error"] }, { type: i0.forwardRef(function () { return DbxPickableListFieldItemListComponent; }), selector: "dbx-form-pickable-item-field-item-list" }, { type: i0.forwardRef(function () { return i2.DbxInjectedComponent; }), selector: "dbx-injected-content, [dbx-injected-content]", inputs: ["config", "template"] }, { type: i0.forwardRef(function () { return i4$2.MatDivider; }), selector: "mat-divider", inputs: ["vertical", "inset"] }], directives: [{ type: i0.forwardRef(function () { return i5.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i0.forwardRef(function () { return i5.NgTemplateOutlet; }), selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i0.forwardRef(function () { return i6$1.MatInput; }), selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i0.forwardRef(function () { return i4$1.DefaultValueAccessor; }), selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i0.forwardRef(function () { return i4$1.NgControlStatus; }), selector: "[formControlName],[ngModel],[formControl]" }, { type: i0.forwardRef(function () { return i4$1.FormControlDirective; }), selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], pipes: { "async": i0.forwardRef(function () { return i5.AsyncPipe; }) } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxPickableListFieldComponent, decorators: [{
             type: Component,
-            args: [{ template: "<div class=\"dbx-pickable-item-field\">\n  <dbx-loading [context]=\"context\">\n    <ng-container *ngIf=\"showFilterInput\">\n      <ng-container *ngTemplateOutlet=\"filterTemplate\"></ng-container>\n    </ng-container>\n    <div class=\"dbx-model-list dbx-pickable-item-field-list\">\n      <mat-selection-list [multiple]=\"multiSelect\" (selectionChange)=\"matSelectionChanged($event)\">\n        <mat-list-option *ngFor=\"let item of items$ | async\" [selected]=\"item.selected\" [value]=\"item\">\n          <p>{{ item.display.label }}</p>\n        </mat-list-option>\n      </mat-selection-list>\n      <dbx-injected-content [config]=\"footerConfig\"></dbx-injected-content>\n    </div>\n  </dbx-loading>\n</div>\n\n<!-- Filter Input -->\n<ng-template #filterTemplate>\n  <div class=\"dbx-pickable-item-field-filter\">\n    <mat-form-field class=\"dbx-pickable-item-field-filter-field\" appearance=\"fill\">\n      <mat-label>{{ filterLabel }}</mat-label>\n      <input name=\"filter items\" #filterMatInput=\"matInput\" matInput [placeholder]=\"placeholder\"\n        [formControl]=\"inputCtrl\">\n    </mat-form-field>\n    <div class=\"searchable-field-form-loading\">\n      <dbx-loading [linear]=\"true\" [context]=\"filterResultsContext\"></dbx-loading>\n    </div>\n  </div>\n</ng-template>\n" }]
+            args: [{ template: "<div class=\"dbx-pickable-item-field\">\n  <dbx-loading [context]=\"context\">\n    <ng-container *ngIf=\"showFilterInput\">\n      <ng-container *ngTemplateOutlet=\"filterTemplate\"></ng-container>\n    </ng-container>\n    <!-- Content -->\n    <div class=\"dbx-pickable-item-field-list\">\n      <div class=\"dbx-pickable-item-field-list-content\">\n        <dbx-form-pickable-item-field-item-list [disabled]=\"isReadonlyOrDisabled\" [state$]=\"filterItemsLoadingState$\"\n          (selectionChange)=\"onSelectionChange($event)\">\n        </dbx-form-pickable-item-field-item-list>\n      </div>\n      <dbx-injected-content [config]=\"footerConfig\"></dbx-injected-content>\n    </div>\n  </dbx-loading>\n</div>\n\n<!-- Filter Input -->\n<ng-template #filterTemplate>\n  <div class=\"dbx-pickable-item-field-filter\">\n    <div class=\"dbx-label\">{{ filterLabel }}</div>\n    <input [name]=\"name\" autocomplete=\"{{ autocomplete }}\" #filterMatInput=\"matInput\" matInput\n      [placeholder]=\"placeholder\" [formControl]=\"inputCtrl\">\n    <mat-divider></mat-divider>\n    <dbx-loading [linear]=\"true\" [context]=\"filterResultsContext\"></dbx-loading>\n    <!-- No items found. -->\n    <p *ngIf=\"noItemsAvailable$ | async\" class=\"dbx-label\">No items match this filter.</p>\n  </div>\n</ng-template>\n" }]
+        }] });
+// MARK: Selection List
+class DbxPickableListFieldItemListComponent extends AbstractDbxSelectionListWrapperDirective {
+    constructor() {
+        super({
+            componentClass: DbxPickableListFieldItemListViewComponent
+        });
+    }
+}
+DbxPickableListFieldItemListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxPickableListFieldItemListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+DbxPickableListFieldItemListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.0", type: DbxPickableListFieldItemListComponent, selector: "dbx-form-pickable-item-field-item-list", usesInheritance: true, ngImport: i0, template: "\n<dbx-list [state$]=\"state$\" [config]=\"config$ | async\" [disabled]=\"disabled\">\n  <ng-content top select=\"[top]\"></ng-content>\n  <ng-content bottom select=\"[bottom]\"></ng-content>\n  <ng-content empty select=\"[empty]\"></ng-content>\n</dbx-list>\n", isInline: true, components: [{ type: i1$1.DbxListComponent, selector: "dbx-list", inputs: ["padded", "state$", "config", "disabled"], outputs: ["contentScrolled"] }], pipes: { "async": i5.AsyncPipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxPickableListFieldItemListComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'dbx-form-pickable-item-field-item-list',
+                    template: DEFAULT_LIST_WRAPPER_DIRECTIVE_TEMPLATE
+                }]
+        }], ctorParameters: function () { return []; } });
+/**
+ * NOTE: Values input are PickableItemFieldItem<T>, but output values are PickableValueFieldDisplayValue<T>.
+ */
+class DbxPickableListFieldItemListViewComponent extends AbstractSelectionValueListViewDirective {
+    constructor(dbxPickableListFieldComponent) {
+        super();
+        this.dbxPickableListFieldComponent = dbxPickableListFieldComponent;
+        this.config = {
+            componentClass: DbxPickableListFieldItemListViewItemComponent
+        };
+        this.items$ = this.values$.pipe(
+        // NOTE: This causes the "value" to be a PickableValueFieldDisplayValue<T>, which means we emit PickableValueFieldDisplayValue<T> to DbxPickableListFieldComponent.
+        map$1(x => mapItemValuesToValueListItemConfig(this.config, x)), shareReplay$1(1));
+    }
+    get multiple() {
+        return this.dbxPickableListFieldComponent.multiSelect;
+    }
+}
+DbxPickableListFieldItemListViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxPickableListFieldItemListViewComponent, deps: [{ token: DbxPickableListFieldComponent }], target: i0.ɵɵFactoryTarget.Component });
+DbxPickableListFieldItemListViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.0", type: DbxPickableListFieldItemListViewComponent, selector: "ng-component", providers: ProvideDbxListView(DbxPickableListFieldItemListViewComponent), usesInheritance: true, ngImport: i0, template: `<dbx-selection-list-view-content [multiple]="multiple" [items]="items$ | async"></dbx-selection-list-view-content>`, isInline: true, components: [{ type: i1$1.DbxSelectionValueListItemViewComponent, selector: "dbx-selection-list-view-content", inputs: ["multiple", "items"] }], pipes: { "async": i5.AsyncPipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxPickableListFieldItemListViewComponent, decorators: [{
+            type: Component,
+            args: [{
+                    template: `<dbx-selection-list-view-content [multiple]="multiple" [items]="items$ | async"></dbx-selection-list-view-content>`,
+                    providers: ProvideDbxListView(DbxPickableListFieldItemListViewComponent)
+                }]
+        }], ctorParameters: function () { return [{ type: DbxPickableListFieldComponent }]; } });
+class DbxPickableListFieldItemListViewItemComponent extends AbstractDbxSelectionValueListViewItemComponent {
+    get label() {
+        return this.value.label;
+    }
+}
+DbxPickableListFieldItemListViewItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxPickableListFieldItemListViewItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+DbxPickableListFieldItemListViewItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.0", type: DbxPickableListFieldItemListViewItemComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
+    <p>{{ label }}</p>
+  `, isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxPickableListFieldItemListViewItemComponent, decorators: [{
+            type: Component,
+            args: [{
+                    template: `
+    <p>{{ label }}</p>
+  `
+                }]
         }] });
 
 class DbxFormFormlyPickableFieldModule {
 }
 DbxFormFormlyPickableFieldModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxFormFormlyPickableFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-DbxFormFormlyPickableFieldModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxFormFormlyPickableFieldModule, declarations: [DbxPickableChipFieldComponent,
-        DbxPickableListFieldComponent], imports: [CommonModule,
+DbxFormFormlyPickableFieldModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxFormFormlyPickableFieldModule, declarations: [DbxPickableChipListFieldComponent,
+        DbxPickableListFieldComponent,
+        DbxPickableListFieldItemListComponent,
+        DbxPickableListFieldItemListViewComponent,
+        DbxPickableListFieldItemListViewItemComponent], imports: [CommonModule,
         DbxTextModule,
         DbxLoadingModule,
         DbxButtonModule,
@@ -1379,7 +1646,8 @@ DbxFormFormlyPickableFieldModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion:
         DbxAnchorModule,
         MatChipsModule,
         MatIconModule,
-        DbxInjectedComponentModule, i1$4.FormlyModule] });
+        DbxInjectedComponentModule,
+        DbxListLayoutModule, i1$4.FormlyModule] });
 DbxFormFormlyPickableFieldModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxFormFormlyPickableFieldModule, imports: [[
             CommonModule,
             DbxTextModule,
@@ -1397,10 +1665,11 @@ DbxFormFormlyPickableFieldModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion:
             MatChipsModule,
             MatIconModule,
             DbxInjectedComponentModule,
+            DbxListLayoutModule,
             FormlyModule.forChild({
                 types: [
-                    { name: 'pickablechipfield', component: DbxPickableChipFieldComponent },
-                    { name: 'pickablelistfield', component: DbxPickableListFieldComponent },
+                    { name: 'pickablechipfield', component: DbxPickableChipListFieldComponent, wrappers: ['form-field'] },
+                    { name: 'pickablelistfield', component: DbxPickableListFieldComponent, wrappers: ['form-field'] },
                 ]
             })
         ]] });
@@ -1424,98 +1693,150 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImpor
                         MatChipsModule,
                         MatIconModule,
                         DbxInjectedComponentModule,
+                        DbxListLayoutModule,
                         FormlyModule.forChild({
                             types: [
-                                { name: 'pickablechipfield', component: DbxPickableChipFieldComponent },
-                                { name: 'pickablelistfield', component: DbxPickableListFieldComponent },
+                                { name: 'pickablechipfield', component: DbxPickableChipListFieldComponent, wrappers: ['form-field'] },
+                                { name: 'pickablelistfield', component: DbxPickableListFieldComponent, wrappers: ['form-field'] },
                             ]
                         })
                     ],
                     declarations: [
-                        DbxPickableChipFieldComponent,
-                        DbxPickableListFieldComponent
+                        DbxPickableChipListFieldComponent,
+                        DbxPickableListFieldComponent,
+                        DbxPickableListFieldItemListComponent,
+                        DbxPickableListFieldItemListViewComponent,
+                        DbxPickableListFieldItemListViewItemComponent
                     ],
                     exports: []
                 }]
         }] });
 
+function filterPickableItemFieldValuesByLabel(filterText, values) {
+    let filteredValues;
+    if (filterText) {
+        const searchString = filterText.toLocaleLowerCase();
+        filteredValues = values.filter(x => x.label.toLocaleLowerCase().indexOf(searchString) !== -1);
+    }
+    else {
+        filteredValues = values;
+    }
+    return of(filteredValues.map(x => x.value));
+}
+function sortPickableItemsByLabel(chips) {
+    return chips.sort((a, b) => a.value.label.localeCompare(b.value.label));
+}
+function pickableItemChipField(config) {
+    const { key } = config;
+    return formlyField({
+        key,
+        type: 'pickablechipfield',
+        ...templateOptionsForFieldConfig(config, {
+            autocomplete: false
+        }),
+        pickableField: config
+    });
+}
+function pickableItemListField(config) {
+    const { key } = config;
+    return formlyField({
+        key,
+        type: 'pickablelistfield',
+        ...templateOptionsForFieldConfig(config, {
+            autocomplete: false
+        }),
+        pickableField: config
+    });
+}
+
+const DBX_SEARCHABLE_FIELD_COMPONENT_DATA = new InjectionToken('DbxSearchableField');
 class DbxSearchableFieldAutocompleteItemComponent {
-    ngOnInit() {
-        this.content.clear();
-        const componentClass = this.displayValue?.componentClass;
-        if (componentClass) {
-            const componentRef = this.content.createComponent(componentClass);
-            componentRef.instance.displayValue = this.displayValue;
-        }
+    constructor() {
+        this._displayValue = new BehaviorSubject(undefined);
+        this.displayValue$ = this._displayValue.pipe(filterMaybe(), shareReplay$1(1));
+        this.config$ = this.displayValue$.pipe(map$1(x => {
+            const config = {
+                ...x.display,
+                providers: mergeIntoArray([{
+                        provide: DBX_SEARCHABLE_FIELD_COMPONENT_DATA,
+                        useValue: x
+                    }], x.display.providers)
+            };
+            return config;
+        }));
+        this.anchor$ = this.displayValue$.pipe(map$1(x => x.anchor));
+    }
+    set displayValue(displayValue) {
+        this._displayValue.next(displayValue);
+    }
+    ngOnDestroy() {
+        this._displayValue.complete();
     }
 }
 DbxSearchableFieldAutocompleteItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxSearchableFieldAutocompleteItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-DbxSearchableFieldAutocompleteItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.0", type: DbxSearchableFieldAutocompleteItemComponent, selector: "dbx-searchable-field-autocomplete-item", inputs: { displayValue: "displayValue" }, viewQueries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: `
-    <ng-template #content></ng-template>
-  `, isInline: true });
+DbxSearchableFieldAutocompleteItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.0", type: DbxSearchableFieldAutocompleteItemComponent, selector: "dbx-searchable-field-autocomplete-item", inputs: { displayValue: "displayValue" }, ngImport: i0, template: `
+    <dbx-anchor [block]="true" [anchor]="anchor$ | async">
+      <dbx-injected-content [config]="config$ | async"></dbx-injected-content>
+    </dbx-anchor>
+  `, isInline: true, components: [{ type: i1$1.DbxAnchorComponent, selector: "dbx-anchor, [dbx-anchor]", inputs: ["block"] }, { type: i2.DbxInjectedComponent, selector: "dbx-injected-content, [dbx-injected-content]", inputs: ["config", "template"] }], pipes: { "async": i5.AsyncPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxSearchableFieldAutocompleteItemComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'dbx-searchable-field-autocomplete-item',
                     template: `
-    <ng-template #content></ng-template>
+    <dbx-anchor [block]="true" [anchor]="anchor$ | async">
+      <dbx-injected-content [config]="config$ | async"></dbx-injected-content>
+    </dbx-anchor>
   `
                 }]
-        }], propDecorators: { content: [{
-                type: ViewChild,
-                args: ['content', { static: true, read: ViewContainerRef }]
-            }], displayValue: [{
+        }], propDecorators: { displayValue: [{
                 type: Input
             }] } });
 // MARK: Default
-class DbxDefaultSearchableFieldDisplayComponent {
+class AbstractDbxSearchableFieldDisplayDirective {
+    constructor(displayValue) {
+        this.displayValue = displayValue;
+    }
 }
-DbxDefaultSearchableFieldDisplayComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxDefaultSearchableFieldDisplayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-DbxDefaultSearchableFieldDisplayComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.0", type: DbxDefaultSearchableFieldDisplayComponent, selector: "dbx-default-searchable-field-display", inputs: { displayValue: "displayValue" }, ngImport: i0, template: `
-    <span class="s-chip-label">{{ displayValue.label }}</span>
-    <span class="s-chip-sublabel" *ngIf="displayValue.sublabel">({{ displayValue.sublabel }})</span>
-  `, isInline: true, directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+AbstractDbxSearchableFieldDisplayDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: AbstractDbxSearchableFieldDisplayDirective, deps: [{ token: DBX_SEARCHABLE_FIELD_COMPONENT_DATA }], target: i0.ɵɵFactoryTarget.Directive });
+AbstractDbxSearchableFieldDisplayDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.0", type: AbstractDbxSearchableFieldDisplayDirective, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: AbstractDbxSearchableFieldDisplayDirective, decorators: [{
+            type: Directive
+        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [DBX_SEARCHABLE_FIELD_COMPONENT_DATA]
+                }] }]; } });
+class DbxDefaultSearchableFieldDisplayComponent extends AbstractDbxSearchableFieldDisplayDirective {
+}
+DbxDefaultSearchableFieldDisplayComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxDefaultSearchableFieldDisplayComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+DbxDefaultSearchableFieldDisplayComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.0", type: DbxDefaultSearchableFieldDisplayComponent, selector: "dbx-default-searchable-field-display", usesInheritance: true, ngImport: i0, template: `
+  <div class="dbx-default-searchable-field-display">
+    <span class="dbx-chip-label">{{ displayValue.label }}</span>
+    <span class="dbx-chip-sublabel" *ngIf="displayValue.sublabel">({{ displayValue.sublabel }})</span>
+  </div>
+  `, isInline: true, directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxDefaultSearchableFieldDisplayComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'dbx-default-searchable-field-display',
                     template: `
-    <span class="s-chip-label">{{ displayValue.label }}</span>
-    <span class="s-chip-sublabel" *ngIf="displayValue.sublabel">({{ displayValue.sublabel }})</span>
-  `
-                }]
-        }], propDecorators: { displayValue: [{
-                type: Input
-            }] } });
-class DbxDefaultSearchableAnchorFieldDisplayComponent {
-}
-DbxDefaultSearchableAnchorFieldDisplayComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxDefaultSearchableAnchorFieldDisplayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-DbxDefaultSearchableAnchorFieldDisplayComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.0", type: DbxDefaultSearchableAnchorFieldDisplayComponent, selector: "ng-component", inputs: { displayValue: "displayValue" }, ngImport: i0, template: `
-    <dbx-anchor [block]="true" [anchor]="displayValue?.anchor">
-      <dbx-default-searchable-field-display [displayValue]="displayValue"></dbx-default-searchable-field-display>
-    </dbx-anchor>
-  `, isInline: true, components: [{ type: i1$1.DbxAnchorComponent, selector: "dbx-anchor, [dbx-anchor]", inputs: ["block"] }, { type: DbxDefaultSearchableFieldDisplayComponent, selector: "dbx-default-searchable-field-display", inputs: ["displayValue"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxDefaultSearchableAnchorFieldDisplayComponent, decorators: [{
-            type: Component,
-            args: [{
-                    template: `
-    <dbx-anchor [block]="true" [anchor]="displayValue?.anchor">
-      <dbx-default-searchable-field-display [displayValue]="displayValue"></dbx-default-searchable-field-display>
-    </dbx-anchor>
+  <div class="dbx-default-searchable-field-display">
+    <span class="dbx-chip-label">{{ displayValue.label }}</span>
+    <span class="dbx-chip-sublabel" *ngIf="displayValue.sublabel">({{ displayValue.sublabel }})</span>
+  </div>
   `
                 }]
-        }], propDecorators: { displayValue: [{
-                type: Input
-            }] } });
+        }] });
 
 /**
  * Abstract searchable field that provides a feature for searching for values, and for displaying values using Observables.
  *
  * Display values are cached for performance.
  */
-class AbstractDbxSearchableValueFieldDirective extends FieldType {
-    constructor() {
-        super(...arguments);
+class AbstractDbxSearchableValueFieldDirective extends FieldType$1 {
+    constructor(cdRef) {
+        super();
+        this.cdRef = cdRef;
         /**
          * Whether or not to set/get values as an array.
          */
@@ -1524,15 +1845,13 @@ class AbstractDbxSearchableValueFieldDirective extends FieldType {
         this._formControlObs = new BehaviorSubject(undefined);
         this.formControl$ = this._formControlObs.pipe(filterMaybe());
         this._displayHashMap = new BehaviorSubject(new Map());
-        this.inputValue$ = this.inputCtrl.valueChanges.pipe();
-        this.inputValueString$ = this.inputValue$.pipe(debounceTime$1(200), distinctUntilChanged$1());
-        this.searchResultsState$ = this.inputValueString$.pipe(filter$1((text) => Boolean(text || this.searchOnEmptyText) && Boolean(this.search)), 
-        // TODO: Consider caching search text/results.
-        switchMap$1((text) => this.search(text).pipe(switchMap$1((x) => this.loadDisplayValuesForFieldValues(x)), 
+        this.inputValue$ = this.inputCtrl.valueChanges.pipe(startWith(this.inputCtrl.value));
+        this.inputValueString$ = this.inputValue$.pipe(debounceTime(200), distinctUntilChanged$1());
+        this.searchResultsState$ = this.inputValueString$.pipe(switchMap$1((text) => ((text || this.searchOnEmptyText) ? this.search(text ?? '') : of([])).pipe(switchMap$1((x) => this.loadDisplayValuesForFieldValues(x)), 
         // Return begin loading to setup the loading state.
         startWith(beginLoading()))), shareReplay$1(1));
         this.singleValueSyncSubscription = new SubscriptionObject();
-        this.searchContext = new LoadingStateContextInstance({ obs: this.searchResultsState$, showLoadingOnNoValue: true });
+        this.searchContext = new LoadingStateContextInstance({ obs: this.searchResultsState$, showLoadingOnNoValue: false });
         this.searchResults$ = this.searchResultsState$.pipe(map$1(x => x?.value ?? []));
         this._formControlValue = this.formControl$.pipe(switchMap$1(control => control.valueChanges.pipe(startWith(control.value), shareReplay$1(1))));
         this.values$ = this._formControlValue.pipe(map$1(convertMaybeToArray), shareReplay$1(1));
@@ -1548,53 +1867,50 @@ class AbstractDbxSearchableValueFieldDirective extends FieldType {
     get readonly() {
         return this.field.templateOptions?.readonly;
     }
-    get searchOnEmptyText() {
-        return this.field.searchOnEmptyText ?? false;
+    get searchableField() {
+        return this.field.searchableField;
     }
-    get required() {
-        return this.field.templateOptions?.required;
+    get searchOnEmptyText() {
+        return this.searchableField.searchOnEmptyText ?? false;
     }
     get autocomplete() {
         return this.field.templateOptions?.attributes?.['autocomplete'] ?? this.key;
     }
-    get placeholder() {
-        return this.field.templateOptions?.placeholder ?? '';
-    }
-    get description() {
-        return this.field.description ?? this.field.templateOptions?.description;
-    }
     get hashForValue() {
-        return this.field.hashForValue ?? ((x) => x);
+        return this.searchableField.hashForValue ?? ((x) => x);
     }
     get displayForValue() {
-        return this.field.displayForValue;
+        return this.searchableField.displayForValue;
     }
     get useAnchor() {
-        return this.field.useAnchor;
+        return this.searchableField.useAnchor;
     }
     get anchorForValue() {
-        return this.field.anchorForValue;
+        return this.searchableField.anchorForValue;
     }
-    get componentClass() {
-        return this.field.componentClass;
+    get display() {
+        return this.searchableField.display;
     }
     get search() {
-        return this.field.search;
+        return this.searchableField.search;
     }
     get values() {
         return this._getValueOnFormControl(this.formControl.value) ?? [];
     }
     get allowStringValues() {
-        return this.allowStringValues ?? Boolean(this.convertStringValue);
+        return this.searchableField.allowStringValues ?? Boolean(this.convertStringValue);
     }
     get convertStringValue() {
-        return this.field.convertStringValue;
+        return this.searchableField.convertStringValue;
+    }
+    get showClearValue() {
+        return this.searchableField.showClearValue ?? true;
     }
     loadDisplayValuesForValues(values) {
         return this.loadDisplayValuesForFieldValues(values.map((value) => ({ value })));
     }
     loadDisplayValuesForFieldValues(values) {
-        return this.getDisplayValuesForFieldValues(values).pipe(map$1((displayValues) => ({ loading: false, model: displayValues })), startWith({ loading: true }), shareReplay$1(1));
+        return this.getDisplayValuesForFieldValues(values).pipe(map$1((displayValues) => successResult(displayValues)), startWith(beginLoading()), shareReplay$1(1));
     }
     getDisplayValuesForFieldValues(values) {
         return this._displayHashMap.pipe(mergeMap((displayMap) => {
@@ -1603,16 +1919,20 @@ class AbstractDbxSearchableValueFieldDirective extends FieldType {
                 .map(([x, hash], i) => [i, hash, x, displayMap.get(hash)]);
             const hasDisplay = mappingResult.filter(x => Boolean(x[3]));
             const needsDisplay = mappingResult.filter(x => !x[3]);
+            let obs;
             if (needsDisplay.length > 0) {
                 // Go get the display value.
                 const displayValuesObs = this.displayForValue(needsDisplay.map(x => x[2]));
-                const componentClass = this.componentClass ?? this.defaultComponentClass;
+                const defaultDisplay = mergeDbxInjectedComponentConfigs([this.defaultDisplay, this.display]);
                 const anchorForValue = this.useAnchor && this.anchorForValue;
-                return displayValuesObs.pipe(first$1(), map$1((displayResults) => {
-                    // Assign the default component classes.
+                obs = displayValuesObs.pipe(first$1(), map$1((displayResults) => {
+                    // Assign the default component classes to complete configuration.
                     displayResults.forEach(x => {
-                        if (!x.componentClass) {
-                            x.componentClass = componentClass;
+                        if (!x.display) {
+                            x.display = defaultDisplay;
+                        }
+                        else {
+                            x.display = mergeDbxInjectedComponentConfigs([defaultDisplay, x.display]);
                         }
                         if (!x.anchor && anchorForValue) {
                             x.anchor = anchorForValue(x);
@@ -1631,22 +1951,22 @@ class AbstractDbxSearchableValueFieldDirective extends FieldType {
             }
             else {
                 // If all display values are hashed return that.
-                return of(hasDisplay.map(x => x[3]));
+                obs = of(hasDisplay.map(x => x[3]));
             }
+            return obs;
         }));
     }
     ngOnInit() {
+        super.ngOnInit();
         this._formControlObs.next(this.formControl);
-        if (this.field.textInputValidator) {
-            this.inputCtrl.setValidators(this.field.textInputValidator);
+        if (this.searchableField.textInputValidator) {
+            this.inputCtrl.setValidators(this.searchableField.textInputValidator);
         }
-        if (!this.defaultComponentClass) {
-            if (this.useAnchor) {
-                this.defaultComponentClass = DbxDefaultSearchableAnchorFieldDisplayComponent;
-            }
-            else {
-                this.defaultComponentClass = DbxDefaultSearchableFieldDisplayComponent;
-            }
+        if (!this.defaultDisplay?.componentClass) {
+            this.defaultDisplay = {
+                ...this.defaultDisplay,
+                componentClass: DbxDefaultSearchableFieldDisplayComponent
+            };
         }
         if (this.multiSelect === false) {
             this.singleValueSyncSubscription.subscription = this.displayValues$.subscribe((x) => {
@@ -1657,6 +1977,7 @@ class AbstractDbxSearchableValueFieldDirective extends FieldType {
         }
     }
     ngOnDestroy() {
+        super.ngOnDestroy();
         this._displayHashMap.complete();
         this._formControlObs.complete();
         this.searchContext.destroy();
@@ -1670,7 +1991,7 @@ class AbstractDbxSearchableValueFieldDirective extends FieldType {
         this.inputCtrl.setValue(value.label);
     }
     _addWithTextValue(text) {
-        if (!this.field.allowStringValues) {
+        if (!this.searchableField.allowStringValues) {
             return;
         }
         if (text) {
@@ -1692,6 +2013,17 @@ class AbstractDbxSearchableValueFieldDirective extends FieldType {
     removeWithDisplayValue(displayValue) {
         this.removeValue(displayValue.value);
     }
+    _tryAddCurrentInputValue() {
+        let addedValue = false;
+        if (this.allowStringValues) {
+            const value = this.inputCtrl.value;
+            if ((value || '').trim()) {
+                this._addWithTextValue(value);
+                addedValue = true;
+            }
+        }
+        return addedValue;
+    }
     addValue(value) {
         this.textInput.nativeElement.value = '';
         this.inputCtrl.setValue(null);
@@ -1708,6 +2040,9 @@ class AbstractDbxSearchableValueFieldDirective extends FieldType {
         }
         this.setValues(values);
     }
+    clearValues() {
+        this.setValues([]);
+    }
     setValues(values) {
         // Use to filter non-unique values.
         if (this.hashForValue) {
@@ -1721,17 +2056,17 @@ class AbstractDbxSearchableValueFieldDirective extends FieldType {
         return value;
     }
     _setValueOnFormControl(values) {
-        const value = (this.multiSelect) ? values : values?.[0];
+        const value = (this.multiSelect) ? values : lastValue(values); // pick last value, as the last value added is the newest value.
         this.formControl.setValue(value);
         this.formControl.markAsDirty();
         this.formControl.markAsTouched();
     }
 }
-AbstractDbxSearchableValueFieldDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: AbstractDbxSearchableValueFieldDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+AbstractDbxSearchableValueFieldDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: AbstractDbxSearchableValueFieldDirective, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
 AbstractDbxSearchableValueFieldDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.0", type: AbstractDbxSearchableValueFieldDirective, viewQueries: [{ propertyName: "textInput", first: true, predicate: ["textInput"], descendants: true }], usesInheritance: true, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: AbstractDbxSearchableValueFieldDirective, decorators: [{
             type: Directive
-        }], propDecorators: { textInput: [{
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { textInput: [{
                 type: ViewChild,
                 args: ['textInput']
             }] } });
@@ -1739,6 +2074,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImpor
 class DbxSearchableChipFieldComponent extends AbstractDbxSearchableValueFieldDirective {
     constructor() {
         super(...arguments);
+        this._blur = new Subject();
+        this._blurSub = new SubscriptionObject();
         this.separatorKeysCodes = [ENTER, COMMA];
     }
     selected(event) {
@@ -1746,9 +2083,7 @@ class DbxSearchableChipFieldComponent extends AbstractDbxSearchableValueFieldDir
     }
     tabPressedOnInput(event) {
         if (event?.key?.toLowerCase() === 'tab') {
-            const value = this.inputCtrl.value;
-            if ((value || '').trim()) {
-                this._addWithTextValue(value);
+            if (this._tryAddCurrentInputValue()) {
                 event.preventDefault();
                 event.stopImmediatePropagation();
                 return false;
@@ -1760,15 +2095,36 @@ class DbxSearchableChipFieldComponent extends AbstractDbxSearchableValueFieldDir
         const text = event.value ?? this.inputCtrl.value;
         return this._addWithTextValue(text);
     }
+    ngOnInit() {
+        super.ngOnInit();
+        // Only try and add the text item as a value if a value wasn't just added (for example, clicking a value).
+        this._blurSub.subscription = this._blur.pipe(skipUntilTimeElapsedAfterLastEmission(this.values$, 100)).subscribe(() => {
+            this._tryAddCurrentInputValue();
+        });
+    }
+    ngOnDestroy() {
+        super.ngOnDestroy();
+        this._blur.complete();
+        this._blurSub.destroy();
+    }
+    onBlur() {
+        this._blur.next();
+    }
 }
 DbxSearchableChipFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxSearchableChipFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-DbxSearchableChipFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.0", type: DbxSearchableChipFieldComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<div class=\"dbx-searchable-field\">\n  <!-- Autocomplete -->\n  <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"selected($event)\">\n    <mat-option *ngFor=\"let displayValue of (searchResults$ | async)\" [value]=\"displayValue\">\n      <dbx-searchable-field-autocomplete-item [displayValue]=\"displayValue\">\n      </dbx-searchable-field-autocomplete-item>\n    </mat-option>\n  </mat-autocomplete>\n  <!-- Template -->\n  <ng-template #content>\n    <mat-form-field class=\"dbx-searchable-field-form-field\">\n      <mat-label>{{ label }}</mat-label>\n      <!-- TODO: Add back aria-label  [attr.aria-label]=\"'email ' + emailParticipantsType\" -->\n      <mat-chip-list [required]=\"required\" [disabled]=\"readonly\" #chipList>\n        <mat-chip *ngFor=\"let displayValue of displayValues$ | async\" [removable]=\"true\"\n          (removed)=\"removeWithDisplayValue(displayValue)\">\n          <span class=\"s-chip-label\">{{ displayValue.label }}</span>\n          <span class=\"s-chip-sublabel\" *ngIf=\"displayValue.sublabel\">({{ displayValue.sublabel }})</span>\n          <mat-icon *ngIf=\"!readonly\" matChipRemove>cancel</mat-icon>\n        </mat-chip>\n        <input #textInput [name]=\"name\" [placeholder]=\"placeholder\" [formControl]=\"inputCtrl\" [matAutocomplete]=\"auto\"\n          autocomplete=\"{{ autocomplete }}\" [matChipInputFor]=\"chipList\" (keydown)=\"tabPressedOnInput($event)\"\n          [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\" (matChipInputTokenEnd)=\"addChip($event)\">\n      </mat-chip-list>\n      <mat-hint *ngIf=\"description\">{{ description }}</mat-hint>\n    </mat-form-field>\n    <div class=\"searchable-field-form-loading\">\n      <dbx-loading [linear]=\"true\" [context]=\"searchContext\"></dbx-loading>\n    </div>\n  </ng-template>\n  <!-- View -->\n  <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n</div>\n", components: [{ type: i1$5.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { type: i2$2.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { type: DbxSearchableFieldAutocompleteItemComponent, selector: "dbx-searchable-field-autocomplete-item", inputs: ["displayValue"] }, { type: i4.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i5$1.MatChipList, selector: "mat-chip-list", inputs: ["errorStateMatcher", "multiple", "compareWith", "value", "required", "placeholder", "disabled", "aria-orientation", "selectable", "tabIndex"], outputs: ["change", "valueChange"], exportAs: ["matChipList"] }, { type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i1$1.DbxLoadingComponent, selector: "dbx-loading", inputs: ["show", "text", "mode", "color", "diameter", "linear", "context", "loading", "error"] }], directives: [{ type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.MatLabel, selector: "mat-label" }, { type: i5$1.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disableRipple", "tabIndex", "selected", "value", "selectable", "disabled", "removable"], outputs: ["selectionChange", "destroyed", "removed"], exportAs: ["matChip"] }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5$1.MatChipRemove, selector: "[matChipRemove]" }, { type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1$5.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { type: i5$1.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i4.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "async": i5.AsyncPipe } });
+DbxSearchableChipFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.0", type: DbxSearchableChipFieldComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<div class=\"dbx-searchable-field\">\n  <!-- View -->\n  <mat-chip-list [selectable]=\"!readonly\" [required]=\"required\" [disabled]=\"readonly\" #chipList>\n    <mat-chip *ngFor=\"let displayValue of displayValues$ | async\" [removable]=\"true\"\n      (removed)=\"removeWithDisplayValue(displayValue)\">\n      <span class=\"dbx-chip-label\">{{ displayValue.label }}</span>\n      <span class=\"dbx-chip-sublabel\" *ngIf=\"displayValue.sublabel\">{{ displayValue.sublabel }}</span>\n      <mat-icon *ngIf=\"!readonly\" matChipRemove>cancel</mat-icon>\n    </mat-chip>\n    <input #textInput [name]=\"name\" [placeholder]=\"placeholder\" [formControl]=\"inputCtrl\" [matAutocomplete]=\"auto\"\n      autocomplete=\"{{ autocomplete }}\" [matAutocompleteDisabled]=\"readonly\" [matChipInputFor]=\"chipList\" (keydown)=\"tabPressedOnInput($event)\"\n      [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\" (matChipInputTokenEnd)=\"addChip($event)\" (blur)=\"onBlur()\">\n  </mat-chip-list>\n  <div class=\"searchable-field-form-loading\">\n    <dbx-loading [linear]=\"true\" [context]=\"searchContext\"></dbx-loading>\n  </div>\n</div>\n\n<!-- Autocomplete -->\n<mat-autocomplete class=\"dbx-searchable-text-field-autocomplete\" #auto=\"matAutocomplete\"\n  (optionSelected)=\"selected($event)\">\n  <mat-option *ngFor=\"let displayValue of (searchResults$ | async)\" [value]=\"displayValue\">\n    <dbx-searchable-field-autocomplete-item [displayValue]=\"displayValue\">\n    </dbx-searchable-field-autocomplete-item>\n  </mat-option>\n</mat-autocomplete>\n", components: [{ type: i1$5.MatChipList, selector: "mat-chip-list", inputs: ["errorStateMatcher", "multiple", "compareWith", "value", "required", "placeholder", "disabled", "aria-orientation", "selectable", "tabIndex"], outputs: ["change", "valueChange"], exportAs: ["matChipList"] }, { type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i1$1.DbxLoadingComponent, selector: "dbx-loading", inputs: ["show", "text", "mode", "color", "diameter", "linear", "context", "loading", "error"] }, { type: i4$3.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { type: i6.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { type: DbxSearchableFieldAutocompleteItemComponent, selector: "dbx-searchable-field-autocomplete-item", inputs: ["displayValue"] }], directives: [{ type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$5.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disableRipple", "tabIndex", "selected", "value", "selectable", "disabled", "removable"], outputs: ["selectionChange", "destroyed", "removed"], exportAs: ["matChip"] }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$5.MatChipRemove, selector: "[matChipRemove]" }, { type: i4$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i4$3.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { type: i1$5.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { type: i4$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], pipes: { "async": i5.AsyncPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxSearchableChipFieldComponent, decorators: [{
             type: Component,
-            args: [{ template: "<div class=\"dbx-searchable-field\">\n  <!-- Autocomplete -->\n  <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"selected($event)\">\n    <mat-option *ngFor=\"let displayValue of (searchResults$ | async)\" [value]=\"displayValue\">\n      <dbx-searchable-field-autocomplete-item [displayValue]=\"displayValue\">\n      </dbx-searchable-field-autocomplete-item>\n    </mat-option>\n  </mat-autocomplete>\n  <!-- Template -->\n  <ng-template #content>\n    <mat-form-field class=\"dbx-searchable-field-form-field\">\n      <mat-label>{{ label }}</mat-label>\n      <!-- TODO: Add back aria-label  [attr.aria-label]=\"'email ' + emailParticipantsType\" -->\n      <mat-chip-list [required]=\"required\" [disabled]=\"readonly\" #chipList>\n        <mat-chip *ngFor=\"let displayValue of displayValues$ | async\" [removable]=\"true\"\n          (removed)=\"removeWithDisplayValue(displayValue)\">\n          <span class=\"s-chip-label\">{{ displayValue.label }}</span>\n          <span class=\"s-chip-sublabel\" *ngIf=\"displayValue.sublabel\">({{ displayValue.sublabel }})</span>\n          <mat-icon *ngIf=\"!readonly\" matChipRemove>cancel</mat-icon>\n        </mat-chip>\n        <input #textInput [name]=\"name\" [placeholder]=\"placeholder\" [formControl]=\"inputCtrl\" [matAutocomplete]=\"auto\"\n          autocomplete=\"{{ autocomplete }}\" [matChipInputFor]=\"chipList\" (keydown)=\"tabPressedOnInput($event)\"\n          [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\" (matChipInputTokenEnd)=\"addChip($event)\">\n      </mat-chip-list>\n      <mat-hint *ngIf=\"description\">{{ description }}</mat-hint>\n    </mat-form-field>\n    <div class=\"searchable-field-form-loading\">\n      <dbx-loading [linear]=\"true\" [context]=\"searchContext\"></dbx-loading>\n    </div>\n  </ng-template>\n  <!-- View -->\n  <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n</div>\n" }]
+            args: [{ template: "<div class=\"dbx-searchable-field\">\n  <!-- View -->\n  <mat-chip-list [selectable]=\"!readonly\" [required]=\"required\" [disabled]=\"readonly\" #chipList>\n    <mat-chip *ngFor=\"let displayValue of displayValues$ | async\" [removable]=\"true\"\n      (removed)=\"removeWithDisplayValue(displayValue)\">\n      <span class=\"dbx-chip-label\">{{ displayValue.label }}</span>\n      <span class=\"dbx-chip-sublabel\" *ngIf=\"displayValue.sublabel\">{{ displayValue.sublabel }}</span>\n      <mat-icon *ngIf=\"!readonly\" matChipRemove>cancel</mat-icon>\n    </mat-chip>\n    <input #textInput [name]=\"name\" [placeholder]=\"placeholder\" [formControl]=\"inputCtrl\" [matAutocomplete]=\"auto\"\n      autocomplete=\"{{ autocomplete }}\" [matAutocompleteDisabled]=\"readonly\" [matChipInputFor]=\"chipList\" (keydown)=\"tabPressedOnInput($event)\"\n      [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\" (matChipInputTokenEnd)=\"addChip($event)\" (blur)=\"onBlur()\">\n  </mat-chip-list>\n  <div class=\"searchable-field-form-loading\">\n    <dbx-loading [linear]=\"true\" [context]=\"searchContext\"></dbx-loading>\n  </div>\n</div>\n\n<!-- Autocomplete -->\n<mat-autocomplete class=\"dbx-searchable-text-field-autocomplete\" #auto=\"matAutocomplete\"\n  (optionSelected)=\"selected($event)\">\n  <mat-option *ngFor=\"let displayValue of (searchResults$ | async)\" [value]=\"displayValue\">\n    <dbx-searchable-field-autocomplete-item [displayValue]=\"displayValue\">\n    </dbx-searchable-field-autocomplete-item>\n  </mat-option>\n</mat-autocomplete>\n" }]
         }] });
 
-function makeMetaFilterSearchableFieldValueDisplayFn(loadMetaForValues, makeDisplayForValues) {
+/**
+ * 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
+ */
+function makeMetaFilterSearchableFieldValueDisplayFn({ loadMetaForValues, makeDisplayForValues }) {
     return (values) => {
         const { included: loaded, excluded: needLoading } = separateValues(values, (x) => Boolean(x.meta));
         let allValues;
@@ -1793,19 +2149,36 @@ function makeMetaFilterSearchableFieldValueDisplayFn(loadMetaForValues, makeDisp
         else {
             allValues = of(loaded);
         }
-        return allValues.pipe(map((x) => makeDisplayForValues(x)));
+        return allValues.pipe(switchMap$1((x) => makeDisplayForValues(x)));
     };
 }
+function searchableStringChipField(config) {
+    return searchableChipField({
+        ...config,
+        allowStringValues: true
+    });
+}
 function searchableChipField(config) {
+    const { key, placeholder } = config;
     return formlyField({
+        key,
         type: 'searchablechipfield',
-        ...config
+        ...templateOptionsForFieldConfig(config, {
+            placeholder: placeholder ?? 'Add...',
+            autocomplete: false
+        }),
+        searchableField: config
     });
 }
 function searchableTextField(config) {
+    const { key } = config;
     return formlyField({
+        key,
         type: 'searchabletextfield',
-        ...config
+        ...templateOptionsForFieldConfig(config, {
+            autocomplete: false
+        }),
+        searchableField: config
     });
 }
 
@@ -1815,7 +2188,29 @@ function searchableTextField(config) {
 class DbxSearchableTextFieldComponent extends AbstractDbxSearchableValueFieldDirective {
     constructor() {
         super(...arguments);
+        this.selectedDisplayValue$ = this.displayValues$.pipe(map$1(x => x[0]), shareReplay$1(1), tapDetectChanges(this.cdRef));
+        this.hasValue$ = this.selectedDisplayValue$.pipe(map$1(x => Boolean(x)));
+        this.showSelectedDisplayValue$ = this.selectedDisplayValue$.pipe(map$1(x => this.showSelectedValue && Boolean(x)), distinctUntilChanged$1(), shareReplay$1(1), tapDetectChanges(this.cdRef));
         this.multiSelect = false;
+        this._clearInputSub = new SubscriptionObject();
+    }
+    get searchableField() {
+        return this.field.searchableField;
+    }
+    get showSelectedValue() {
+        return this.searchableField.showSelectedValue ?? !this.allowStringValues; // Show the selected value only if string values are allowed.
+    }
+    ngOnInit() {
+        super.ngOnInit();
+        this._clearInputSub.subscription = this.inputValue$.pipe(skipWhile((x) => !x)).subscribe((x) => {
+            if (!x) {
+                // this.clearValues();
+            }
+        });
+    }
+    ngOnDestroy() {
+        super.ngOnDestroy();
+        this._clearInputSub.destroy();
     }
     selected(event) {
         const e = event;
@@ -1823,10 +2218,10 @@ class DbxSearchableTextFieldComponent extends AbstractDbxSearchableValueFieldDir
     }
 }
 DbxSearchableTextFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxSearchableTextFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-DbxSearchableTextFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.0", type: DbxSearchableTextFieldComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<div class=\"dbx-searchable-text-field\">\n  <!-- Autocomplete -->\n  <mat-autocomplete #auto (optionSelected)=\"selected($event)\">\n    <mat-option *ngFor=\"let displayValue of (searchResults$ | async)\" [value]=\"displayValue\">\n      <dbx-searchable-field-autocomplete-item [displayValue]=\"displayValue\">\n      </dbx-searchable-field-autocomplete-item>\n    </mat-option>\n  </mat-autocomplete>\n  <!-- Template -->\n  <ng-template #content>\n    <mat-form-field class=\"dbx-searchable-field-form-field\">\n      <mat-label>{{ label }}</mat-label>\n      <input type=\"search\" [name]=\"name\" matInput #textInput [placeholder]=\"placeholder\" [formControl]=\"inputCtrl\" [matAutocomplete]=\"auto\"\n        autocomplete=\"{{ autocomplete }}\">\n      <mat-hint *ngIf=\"description\">{{ description }}</mat-hint>\n    </mat-form-field>\n    <div class=\"searchable-field-form-loading\">\n      <dbx-loading [linear]=\"true\" [context]=\"searchContext\"></dbx-loading>\n    </div>\n  </ng-template>\n  <!-- View -->\n  <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n</div>\n", components: [{ type: i1$5.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { type: i2$2.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { type: DbxSearchableFieldAutocompleteItemComponent, selector: "dbx-searchable-field-autocomplete-item", inputs: ["displayValue"] }, { type: i4.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i1$1.DbxLoadingComponent, selector: "dbx-loading", inputs: ["show", "text", "mode", "color", "diameter", "linear", "context", "loading", "error"] }], directives: [{ type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.MatLabel, selector: "mat-label" }, { type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1$5.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "async": i5.AsyncPipe } });
+DbxSearchableTextFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.0", type: DbxSearchableTextFieldComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<div class=\"dbx-searchable-text-field\"\n  [ngClass]=\"{ 'dbx-searchable-text-field-has-value': (hasValue$ | async), 'dbx-searchable-text-field-show-value': showSelectedValue }\">\n  <!-- Result View -->\n  <div class=\"dbx-searchable-text-field-value mat-option mat-option-text\" *ngIf=\"showSelectedDisplayValue$ | async\">\n    <dbx-searchable-field-autocomplete-item [displayValue]=\"(selectedDisplayValue$ | async)!\">\n    </dbx-searchable-field-autocomplete-item>\n  </div>\n  <div class=\"dbx-searchable-text-field-input\">\n    <div class=\"dbx-label\">Search</div>\n    <!-- View -->\n    <input type=\"search\" [name]=\"name\" matInput #textInput [placeholder]=\"placeholder\" [formControl]=\"inputCtrl\"\n      [matAutocomplete]=\"auto\" [matAutocompleteDisabled]=\"readonly\" autocomplete=\"{{ autocomplete }}\">\n    <div class=\"searchable-field-form-loading\">\n      <dbx-loading [linear]=\"true\" [context]=\"searchContext\"></dbx-loading>\n    </div>\n  </div>\n</div>\n\n<!-- Autocomplete -->\n<mat-autocomplete class=\"dbx-searchable-text-field-autocomplete\" #auto (optionSelected)=\"selected($event)\">\n  <mat-option *ngFor=\"let displayValue of (searchResults$ | async)\" [value]=\"displayValue\">\n    <dbx-searchable-field-autocomplete-item [displayValue]=\"displayValue\">\n    </dbx-searchable-field-autocomplete-item>\n  </mat-option>\n  <!-- Add/Pick String Value -->\n  <mat-option *ngIf=\"allowStringValues && (inputValue$ | async)\" [value]=\"{ value: (inputValue$ | async) }\">\n    <p class=\"dbx-clear-hint text-center\">\"{{ inputValue$ | async }}\"</p>\n  </mat-option>\n  <!-- Show clear value -->\n  <mat-option *ngIf=\"showClearValue && (hasValue$ | async)\" value=\"\">\n    <p class=\"dbx-clear-hint text-center\">Clear</p>\n  </mat-option>\n</mat-autocomplete>\n", components: [{ type: DbxSearchableFieldAutocompleteItemComponent, selector: "dbx-searchable-field-autocomplete-item", inputs: ["displayValue"] }, { type: i1$1.DbxLoadingComponent, selector: "dbx-loading", inputs: ["show", "text", "mode", "color", "diameter", "linear", "context", "loading", "error"] }, { type: i4$3.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { type: i6.MatOption, selector: "mat-option", exportAs: ["matOption"] }], directives: [{ type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i4$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i4$3.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { type: i4$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "async": i5.AsyncPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxSearchableTextFieldComponent, decorators: [{
             type: Component,
-            args: [{ template: "<div class=\"dbx-searchable-text-field\">\n  <!-- Autocomplete -->\n  <mat-autocomplete #auto (optionSelected)=\"selected($event)\">\n    <mat-option *ngFor=\"let displayValue of (searchResults$ | async)\" [value]=\"displayValue\">\n      <dbx-searchable-field-autocomplete-item [displayValue]=\"displayValue\">\n      </dbx-searchable-field-autocomplete-item>\n    </mat-option>\n  </mat-autocomplete>\n  <!-- Template -->\n  <ng-template #content>\n    <mat-form-field class=\"dbx-searchable-field-form-field\">\n      <mat-label>{{ label }}</mat-label>\n      <input type=\"search\" [name]=\"name\" matInput #textInput [placeholder]=\"placeholder\" [formControl]=\"inputCtrl\" [matAutocomplete]=\"auto\"\n        autocomplete=\"{{ autocomplete }}\">\n      <mat-hint *ngIf=\"description\">{{ description }}</mat-hint>\n    </mat-form-field>\n    <div class=\"searchable-field-form-loading\">\n      <dbx-loading [linear]=\"true\" [context]=\"searchContext\"></dbx-loading>\n    </div>\n  </ng-template>\n  <!-- View -->\n  <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n</div>\n" }]
+            args: [{ template: "<div class=\"dbx-searchable-text-field\"\n  [ngClass]=\"{ 'dbx-searchable-text-field-has-value': (hasValue$ | async), 'dbx-searchable-text-field-show-value': showSelectedValue }\">\n  <!-- Result View -->\n  <div class=\"dbx-searchable-text-field-value mat-option mat-option-text\" *ngIf=\"showSelectedDisplayValue$ | async\">\n    <dbx-searchable-field-autocomplete-item [displayValue]=\"(selectedDisplayValue$ | async)!\">\n    </dbx-searchable-field-autocomplete-item>\n  </div>\n  <div class=\"dbx-searchable-text-field-input\">\n    <div class=\"dbx-label\">Search</div>\n    <!-- View -->\n    <input type=\"search\" [name]=\"name\" matInput #textInput [placeholder]=\"placeholder\" [formControl]=\"inputCtrl\"\n      [matAutocomplete]=\"auto\" [matAutocompleteDisabled]=\"readonly\" autocomplete=\"{{ autocomplete }}\">\n    <div class=\"searchable-field-form-loading\">\n      <dbx-loading [linear]=\"true\" [context]=\"searchContext\"></dbx-loading>\n    </div>\n  </div>\n</div>\n\n<!-- Autocomplete -->\n<mat-autocomplete class=\"dbx-searchable-text-field-autocomplete\" #auto (optionSelected)=\"selected($event)\">\n  <mat-option *ngFor=\"let displayValue of (searchResults$ | async)\" [value]=\"displayValue\">\n    <dbx-searchable-field-autocomplete-item [displayValue]=\"displayValue\">\n    </dbx-searchable-field-autocomplete-item>\n  </mat-option>\n  <!-- Add/Pick String Value -->\n  <mat-option *ngIf=\"allowStringValues && (inputValue$ | async)\" [value]=\"{ value: (inputValue$ | async) }\">\n    <p class=\"dbx-clear-hint text-center\">\"{{ inputValue$ | async }}\"</p>\n  </mat-option>\n  <!-- Show clear value -->\n  <mat-option *ngIf=\"showClearValue && (hasValue$ | async)\" value=\"\">\n    <p class=\"dbx-clear-hint text-center\">Clear</p>\n  </mat-option>\n</mat-autocomplete>\n" }]
         }] });
 
 class DbxFormFormlySearchableFieldModule {
@@ -1835,8 +2230,7 @@ DbxFormFormlySearchableFieldModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion:
 DbxFormFormlySearchableFieldModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxFormFormlySearchableFieldModule, declarations: [DbxSearchableChipFieldComponent,
         DbxSearchableTextFieldComponent,
         DbxSearchableFieldAutocompleteItemComponent,
-        DbxDefaultSearchableFieldDisplayComponent,
-        DbxDefaultSearchableAnchorFieldDisplayComponent], imports: [CommonModule,
+        DbxDefaultSearchableFieldDisplayComponent], imports: [CommonModule,
         DbxTextModule,
         DbxLoadingModule,
         DbxButtonModule,
@@ -1872,8 +2266,8 @@ DbxFormFormlySearchableFieldModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion
             DbxInjectedComponentModule,
             FormlyModule.forChild({
                 types: [
-                    { name: 'searchablechipfield', component: DbxSearchableChipFieldComponent },
-                    { name: 'searchabletextfield', component: DbxSearchableTextFieldComponent }
+                    { name: 'searchablechipfield', component: DbxSearchableChipFieldComponent, wrappers: ['form-field'] },
+                    { name: 'searchabletextfield', component: DbxSearchableTextFieldComponent, wrappers: ['form-field'] },
                 ]
             })
         ]] });
@@ -1899,8 +2293,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImpor
                         DbxInjectedComponentModule,
                         FormlyModule.forChild({
                             types: [
-                                { name: 'searchablechipfield', component: DbxSearchableChipFieldComponent },
-                                { name: 'searchabletextfield', component: DbxSearchableTextFieldComponent }
+                                { name: 'searchablechipfield', component: DbxSearchableChipFieldComponent, wrappers: ['form-field'] },
+                                { name: 'searchabletextfield', component: DbxSearchableTextFieldComponent, wrappers: ['form-field'] },
                             ]
                         })
                     ],
@@ -1908,8 +2302,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImpor
                         DbxSearchableChipFieldComponent,
                         DbxSearchableTextFieldComponent,
                         DbxSearchableFieldAutocompleteItemComponent,
-                        DbxDefaultSearchableFieldDisplayComponent,
-                        DbxDefaultSearchableAnchorFieldDisplayComponent
+                        DbxDefaultSearchableFieldDisplayComponent
                     ],
                     exports: [
                         DbxSearchableChipFieldComponent,
@@ -1931,18 +2324,187 @@ function chipTextField(config) {
     });
 }
 
-class DbxFormRepeatTypeComponent extends FieldArrayType {
-    get repeatSection() {
-        return this.to.repeatSection ?? {};
+class DbxFormFormlySelectionModule {
+}
+DbxFormFormlySelectionModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxFormFormlySelectionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+DbxFormFormlySelectionModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxFormFormlySelectionModule, imports: [CommonModule], exports: [DbxFormFormlyPickableFieldModule,
+        DbxFormFormlySearchableFieldModule] });
+DbxFormFormlySelectionModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxFormFormlySelectionModule, imports: [[
+            CommonModule
+        ], DbxFormFormlyPickableFieldModule,
+        DbxFormFormlySearchableFieldModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxFormFormlySelectionModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule
+                    ],
+                    declarations: [],
+                    exports: [
+                        DbxFormFormlyPickableFieldModule,
+                        DbxFormFormlySearchableFieldModule
+                    ]
+                }]
+        }] });
+
+class DbxTextEditorFieldComponent extends FieldType$1 {
+    constructor(compact) {
+        super();
+        this.compact = compact;
+        this._sub = new SubscriptionObject();
+        this.compactClass$ = mapCompactModeObs(this.compact?.mode$, {
+            compact: 'dbx-texteditor-field-compact'
+        });
+    }
+    get formGroupName() {
+        return this.field.key;
+    }
+    get formGroup() {
+        return this.form;
+    }
+    get editor() {
+        return this._editor;
+    }
+    get label() {
+        return this.field.templateOptions?.label;
+    }
+    get description() {
+        return this.to.description;
+    }
+    ngOnInit() {
+        super.ngOnInit();
+        this._editor = new Editor({});
+        // Watch for value changes every second and update the pristine level.
+        this._sub.subscription = this.editor.valueChanges.pipe(debounceTime$1(100), filter(_ => this.editor.view.hasFocus())).subscribe(() => {
+            this.formControl.updateValueAndValidity();
+            this.formControl.markAsDirty();
+        });
+    }
+    ngOnDestroy() {
+        super.ngOnDestroy();
+        if (this.editor) {
+            this.editor.destroy();
+            delete this._editor;
+        }
+        this._sub.destroy();
+    }
+}
+DbxTextEditorFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxTextEditorFieldComponent, deps: [{ token: i1$1.CompactContextStore, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+DbxTextEditorFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.0", type: DbxTextEditorFieldComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
+    <div class="dbx-texteditor-field" [ngClass]="(compactClass$ | async) ?? ''" [formGroup]="formGroup">
+      <dbx-label *ngIf="label">{{ label }}</dbx-label>
+      <div class="dbx-texteditor-field-input">
+        <ngx-editor [editor]="editor" outputFormat="html" [placeholder]="placeholder" [formControlName]="formGroupName"></ngx-editor>
+      </div>
+      <div class="dbx-texteditor-field-menu">
+        <ngx-editor-menu [editor]="editor"></ngx-editor-menu>
+      </div>
+      <div>
+        <dbx-hint *ngIf="description">{{ description }}</dbx-hint>
+      </div>
+    </div>
+  `, isInline: true, components: [{ type: i1$1.DbxLabelComponent, selector: "dbx-label" }, { type: i2$3.NgxEditorComponent, selector: "ngx-editor", inputs: ["editor", "outputFormat", "placeholder"], outputs: ["focusOut", "focusIn"] }, { type: i2$3.MenuComponent, selector: "ngx-editor-menu", inputs: ["toolbar", "colorPresets", "disabled", "editor", "customMenuRef", "dropdownPlacement"] }, { type: i1$1.DbxHintComponent, selector: "dbx-hint" }], directives: [{ type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i4$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }], pipes: { "async": i5.AsyncPipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxTextEditorFieldComponent, decorators: [{
+            type: Component,
+            args: [{
+                    template: `
+    <div class="dbx-texteditor-field" [ngClass]="(compactClass$ | async) ?? ''" [formGroup]="formGroup">
+      <dbx-label *ngIf="label">{{ label }}</dbx-label>
+      <div class="dbx-texteditor-field-input">
+        <ngx-editor [editor]="editor" outputFormat="html" [placeholder]="placeholder" [formControlName]="formGroupName"></ngx-editor>
+      </div>
+      <div class="dbx-texteditor-field-menu">
+        <ngx-editor-menu [editor]="editor"></ngx-editor-menu>
+      </div>
+      <div>
+        <dbx-hint *ngIf="description">{{ description }}</dbx-hint>
+      </div>
+    </div>
+  `
+                }]
+        }], ctorParameters: function () { return [{ type: i1$1.CompactContextStore, decorators: [{
+                    type: Optional
+                }] }]; } });
+
+class DbxFormFormlyTextEditorFieldModule {
+}
+DbxFormFormlyTextEditorFieldModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxFormFormlyTextEditorFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+DbxFormFormlyTextEditorFieldModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxFormFormlyTextEditorFieldModule, declarations: [DbxTextEditorFieldComponent], imports: [CommonModule,
+        DbxTextModule,
+        FormsModule,
+        ReactiveFormsModule,
+        NgxEditorModule,
+        MatFormFieldModule,
+        MatInputModule, i1$4.FormlyModule] });
+DbxFormFormlyTextEditorFieldModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxFormFormlyTextEditorFieldModule, imports: [[
+            CommonModule,
+            DbxTextModule,
+            FormsModule,
+            ReactiveFormsModule,
+            NgxEditorModule,
+            MatFormFieldModule,
+            MatInputModule,
+            FormlyModule.forChild({
+                types: [
+                    { name: 'texteditor', component: DbxTextEditorFieldComponent }
+                ]
+            })
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxFormFormlyTextEditorFieldModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        DbxTextModule,
+                        FormsModule,
+                        ReactiveFormsModule,
+                        NgxEditorModule,
+                        MatFormFieldModule,
+                        MatInputModule,
+                        FormlyModule.forChild({
+                            types: [
+                                { name: 'texteditor', component: DbxTextEditorFieldComponent }
+                            ]
+                        })
+                    ],
+                    declarations: [
+                        DbxTextEditorFieldComponent
+                    ],
+                    exports: []
+                }]
+        }] });
+
+function textEditorField(config) {
+    const { key, minLength, maxLength } = config;
+    const fieldConfig = formlyField({
+        key,
+        type: 'texteditor',
+        defaultValue: '',
+        modelOptions: {
+            // https://formly.dev/examples/validation/async-validation-update-on
+            // Set to trigger value update on blurs with the form. However, the value is set internally too.
+            updateOn: 'blur'
+        },
+        ...templateOptionsForFieldConfig(config, {
+            minLength,
+            maxLength
+        })
+    });
+    return fieldConfig;
+}
+
+class DbxFormRepeatArrayTypeComponent extends FieldArrayType {
+    get repeatArrayField() {
+        return this.field.repeatArrayField;
     }
-    get itemLabel() {
-        return this.repeatSection.itemLabel ?? '#';
+    get label() {
+        return this.field.templateOptions.label ?? this.field.key;
     }
     get addText() {
-        return this.repeatSection.addText ?? 'Add';
+        return this.repeatArrayField.addText ?? 'Add';
     }
     get removeText() {
-        return this.repeatSection.removeText ?? 'Remove';
+        return this.repeatArrayField.removeText ?? 'Remove';
     }
     get max() {
         return this.field.templateOptions?.maxLength;
@@ -1959,53 +2521,86 @@ class DbxFormRepeatTypeComponent extends FieldArrayType {
             return (this.count < max);
         }
     }
-}
-DbxFormRepeatTypeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxFormRepeatTypeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-DbxFormRepeatTypeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.0", type: DbxFormRepeatTypeComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
-    <div class="form-repeat-section">
-      <!-- Fields -->
-      <div class="form-repeat-section-fields">
-        <ng-container *ngFor="let field of field.fieldGroup; let i = index; let last = last;">
-          <div class="form-repeat-section-field">
-            <div>
-              <h4><span>{{ itemLabel }}</span><span>{{ i + 1 }}</span></h4>
-              <dbx-button-spacer></dbx-button-spacer>
-              <button mat-button color="warn" (click)="remove(i)">{{ removeText }}</button>
+    /**
+     * Moves the target index up one value.
+     *
+     * @param index
+     */
+    moveUp(index) {
+        if (index === 0) {
+            return;
+        }
+        this.swapIndexes(index, index - 1);
+    }
+    moveDown(index) {
+        this.swapIndexes(index, index + 1);
+    }
+    swapIndexes(currentIndex, targetIndex) {
+        const array = this.model;
+        const targetValue = array[currentIndex];
+        if (!targetValue) {
+            return;
+        }
+        this.remove(currentIndex);
+        this.add(targetIndex, targetValue);
+    }
+    drop(event) {
+        this.swapIndexes(event.previousIndex, event.currentIndex);
+    }
+    labelForItem(field) {
+        return getValueFromObjectOrGetter(this.repeatArrayField.labelForField ?? '', field);
+    }
+}
+DbxFormRepeatArrayTypeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxFormRepeatArrayTypeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+DbxFormRepeatArrayTypeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.0", type: DbxFormRepeatArrayTypeComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
+    <div class="dbx-form-repeat-array">
+      <dbx-subsection [header]="label">
+        <!-- Fields -->
+        <div class="dbx-form-repeat-array-fields" cdkDropList (cdkDropListDropped)="drop($event)">
+            <div class="dbx-form-repeat-array-field" cdkDrag cdkDragLockAxis="y" *ngFor="let field of field.fieldGroup; let i = index; let last = last;">
+              <div class="example-custom-placeholder" *cdkDragPlaceholder></div>
+              <dbx-bar>
+                <button cdkDragHandle mat-flat-button><mat-icon>drag_handle</mat-icon></button>
+                <dbx-button-spacer></dbx-button-spacer>
+                <h4><span class="repeat-array-number">{{ i + 1 }}</span><span>{{ labelForItem(field) }}</span></h4>
+                <span class="dbx-spacer"></span>
+                <button mat-flat-button color="warn" (click)="remove(i)">{{ removeText }}</button>
+              </dbx-bar>
+              <formly-field class="dbx-form-repeat-array-field-content" [field]="field"></formly-field>
             </div>
-            <formly-field [field]="field"></formly-field>
-          </div>
-          <mat-divider [inset]="true" *ngIf="!last"></mat-divider>
-        </ng-container>
-      </div>
-      <!-- Add Button -->
-      <div class="form-repeat-section-footer">
-        <button *ngIf="canAdd" mat-button (click)="add()">{{ addText }}</button>
-      </div>
+        </div>
+        <!-- Add Button -->
+        <div class="dbx-form-repeat-array-footer">
+          <button *ngIf="canAdd" mat-raised-button (click)="add()">{{ addText }}</button>
+        </div>
+      </dbx-subsection>
     </div>
-  `, isInline: true, components: [{ type: i1$1.DbxButtonSpacerComponent, selector: "dbx-button-spacer" }, { type: i1$4.FormlyField, selector: "formly-field", inputs: ["field"] }, { type: i3$2.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }], directives: [{ type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxFormRepeatTypeComponent, decorators: [{
+  `, isInline: true, components: [{ type: i1$1.DbxSubSectionComponent, selector: "dbx-subsection" }, { type: i1$2.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i1$1.DbxButtonSpacerComponent, selector: "dbx-button-spacer" }, { type: i1$4.FormlyField, selector: "formly-field", inputs: ["field"] }], directives: [{ type: i5$1.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { type: i5$1.CdkDragPlaceholder, selector: "ng-template[cdkDragPlaceholder]", inputs: ["data"] }, { type: i1$1.DbxBarDirective, selector: "dbx-bar", inputs: ["color"] }, { type: i5$1.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxFormRepeatArrayTypeComponent, decorators: [{
             type: Component,
             args: [{
                     template: `
-    <div class="form-repeat-section">
-      <!-- Fields -->
-      <div class="form-repeat-section-fields">
-        <ng-container *ngFor="let field of field.fieldGroup; let i = index; let last = last;">
-          <div class="form-repeat-section-field">
-            <div>
-              <h4><span>{{ itemLabel }}</span><span>{{ i + 1 }}</span></h4>
-              <dbx-button-spacer></dbx-button-spacer>
-              <button mat-button color="warn" (click)="remove(i)">{{ removeText }}</button>
+    <div class="dbx-form-repeat-array">
+      <dbx-subsection [header]="label">
+        <!-- Fields -->
+        <div class="dbx-form-repeat-array-fields" cdkDropList (cdkDropListDropped)="drop($event)">
+            <div class="dbx-form-repeat-array-field" cdkDrag cdkDragLockAxis="y" *ngFor="let field of field.fieldGroup; let i = index; let last = last;">
+              <div class="example-custom-placeholder" *cdkDragPlaceholder></div>
+              <dbx-bar>
+                <button cdkDragHandle mat-flat-button><mat-icon>drag_handle</mat-icon></button>
+                <dbx-button-spacer></dbx-button-spacer>
+                <h4><span class="repeat-array-number">{{ i + 1 }}</span><span>{{ labelForItem(field) }}</span></h4>
+                <span class="dbx-spacer"></span>
+                <button mat-flat-button color="warn" (click)="remove(i)">{{ removeText }}</button>
+              </dbx-bar>
+              <formly-field class="dbx-form-repeat-array-field-content" [field]="field"></formly-field>
             </div>
-            <formly-field [field]="field"></formly-field>
-          </div>
-          <mat-divider [inset]="true" *ngIf="!last"></mat-divider>
-        </ng-container>
-      </div>
-      <!-- Add Button -->
-      <div class="form-repeat-section-footer">
-        <button *ngIf="canAdd" mat-button (click)="add()">{{ addText }}</button>
-      </div>
+        </div>
+        <!-- Add Button -->
+        <div class="dbx-form-repeat-array-footer">
+          <button *ngIf="canAdd" mat-raised-button (click)="add()">{{ addText }}</button>
+        </div>
+      </dbx-subsection>
     </div>
   `
                 }]
@@ -2014,20 +2609,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImpor
 class DbxFormFormlyArrayFieldModule {
 }
 DbxFormFormlyArrayFieldModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxFormFormlyArrayFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-DbxFormFormlyArrayFieldModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxFormFormlyArrayFieldModule, declarations: [DbxFormRepeatTypeComponent], imports: [CommonModule,
+DbxFormFormlyArrayFieldModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxFormFormlyArrayFieldModule, declarations: [DbxFormRepeatArrayTypeComponent], imports: [CommonModule,
         MatFormFieldModule,
         ReactiveFormsModule,
         MatDividerModule,
+        MatButtonModule,
+        MatIconModule,
+        DragDropModule,
+        DbxSectionLayoutModule,
+        DbxBarLayoutModule,
         DbxButtonModule, i1$4.FormlyModule] });
 DbxFormFormlyArrayFieldModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxFormFormlyArrayFieldModule, imports: [[
             CommonModule,
             MatFormFieldModule,
             ReactiveFormsModule,
             MatDividerModule,
+            MatButtonModule,
+            MatIconModule,
+            DragDropModule,
+            DbxSectionLayoutModule,
+            DbxBarLayoutModule,
             DbxButtonModule,
             FormlyModule.forChild({
                 types: [
-                    { name: 'repeat', component: DbxFormRepeatTypeComponent }
+                    { name: 'repeatarray', component: DbxFormRepeatArrayTypeComponent }
                 ]
             })
         ]] });
@@ -2039,20 +2644,44 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImpor
                         MatFormFieldModule,
                         ReactiveFormsModule,
                         MatDividerModule,
+                        MatButtonModule,
+                        MatIconModule,
+                        DragDropModule,
+                        DbxSectionLayoutModule,
+                        DbxBarLayoutModule,
                         DbxButtonModule,
                         FormlyModule.forChild({
                             types: [
-                                { name: 'repeat', component: DbxFormRepeatTypeComponent }
+                                { name: 'repeatarray', component: DbxFormRepeatArrayTypeComponent }
                             ]
                         })
                     ],
                     declarations: [
-                        DbxFormRepeatTypeComponent
+                        DbxFormRepeatArrayTypeComponent
                     ],
                     exports: []
                 }]
         }] });
 
+function repeatArrayField(config) {
+    const { key, repeatFieldGroup, maxLength, addText, removeText, labelForField } = config;
+    return formlyField({
+        key,
+        type: 'repeatarray',
+        repeatArrayField: {
+            labelForField,
+            addText,
+            removeText,
+        },
+        ...templateOptionsForFieldConfig(config, {
+            maxLength
+        }),
+        fieldArray: {
+            fieldGroup: repeatFieldGroup
+        }
+    });
+}
+
 class DbxFormFormlyBooleanFieldModule {
 }
 DbxFormFormlyBooleanFieldModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxFormFormlyBooleanFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
@@ -2067,33 +2696,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImpor
                 }]
         }] });
 
-function toggleField({ key, label, description, defaultValue, required, readonly }) {
+function toggleField(config) {
+    const { key, defaultValue } = config;
     return formlyField({
         key,
         type: 'toggle',
         wrappers: ['autotouch', 'form-field'],
         defaultValue: defaultValue ?? false,
-        templateOptions: {
-            label,
-            description,
-            required,
-            readonly
-        }
+        ...templateOptionsForFieldConfig(config)
     });
 }
-function checkboxField({ key, label = '', placeholder = '', defaultValue, required, readonly, autocomplete }) {
-    return {
+function checkboxField(config) {
+    const { key, defaultValue } = config;
+    return formlyField({
         key,
         type: 'checkbox',
-        defaultValue,
-        templateOptions: {
-            label,
-            placeholder,
-            required,
-            readonly,
-            autocomplete
-        },
-    };
+        defaultValue: defaultValue ?? false,
+        ...templateOptionsForFieldConfig(config)
+    });
 }
 /*
 export function acceptTermsField({ key = 'accept', label = 'Accept Terms', description = 'In order to proceed, please accept terms', required = true }
@@ -2131,7 +2751,7 @@ var DateTimeFieldTimeMode;
      */
     DateTimeFieldTimeMode["NONE"] = "none";
 })(DateTimeFieldTimeMode || (DateTimeFieldTimeMode = {}));
-class DbxDateTimeFieldComponent extends FieldType {
+class DbxDateTimeFieldComponent extends FieldType$1 {
     constructor(cdRef) {
         super();
         this.cdRef = cdRef;
@@ -2148,7 +2768,7 @@ class DbxDateTimeFieldComponent extends FieldType {
          * Used to trigger/display visual updates (specifically on timeDistance, etc.).
          */
         this.displayValue$ = interval(10 * 1000).pipe(startWith$1(0), map(_ => new Date().getMinutes()), distinctUntilChanged(), tap((_) => this.cdRef.markForCheck()), switchMap(_ => this.value$), shareReplay(1));
-        this.timeString$ = this.value$.pipe(filter(x => Boolean(x)), map((x) => {
+        this.timeString$ = this.value$.pipe(filterMaybe(), map((x) => {
             const timezone = guessCurrentTimezone();
             const timeString = toReadableTimeString(x, timezone);
             return timeString;
@@ -2163,72 +2783,90 @@ class DbxDateTimeFieldComponent extends FieldType {
         this.fullDay$ = this.fullDayControl$.pipe(switchMap(control => control.valueChanges.pipe(startWith$1(control.value))));
         this.showTimeInput$ = this.fullDay$.pipe(map(x => !x && this.timeMode !== DateTimeFieldTimeMode.NONE));
         this.showAddTime$ = this.showTimeInput$.pipe(map(x => !x && this.timeMode === DateTimeFieldTimeMode.OPTIONAL), shareReplay(1));
-        this.date$ = this._date.pipe(distinctUntilChanged((a, b) => isSameDay(a, b)));
-        this.dateValue$ = merge(this.value$.pipe(startWith$1(undefined)), this.date$).pipe(filterMaybe(), map((x) => startOfDay(x)), distinctUntilChanged((a, b) => isSameDay(a, b)), shareReplay(1));
-        this.timeInput$ = this._updateTime.pipe(debounceTime(5), map(x => this.timeInputCtrl.value), distinctUntilChanged());
-        this.config$ = this._config.pipe(switchMapMaybeObs(), shareReplay(1));
+        this.date$ = this._date.asObservable();
+        this.dateValue$ = merge(this.value$.pipe(startWith$1(undefined)), this.date$).pipe(map((x) => (x) ? startOfDay(x) : x), distinctUntilChanged((a, b) => Boolean(a && b) && isSameDay(a, b)), shareReplay(1));
+        this.timeInput$ = this._updateTime.pipe(debounceTime$1(5), map(_ => this.timeInputCtrl.value), distinctUntilChanged());
+        this.config$ = this._config.pipe(switchMapMaybeDefault(), shareReplay(1));
         this.rawDateTime$ = combineLatest([
-            this.dateValue$.pipe(filterMaybe()),
+            this.dateValue$,
             this.timeInput$.pipe(startWith$1(null)),
             this.fullDay$
         ]).pipe(map(([date, timeString, fullDay]) => {
             let result;
-            if (fullDay) {
-                if (this.field.fullDayInUTC) {
-                    result = utcDayForDate(date);
+            if (date) {
+                if (fullDay) {
+                    if (this.dateTimeField.fullDayInUTC) {
+                        result = utcDayForDate(date);
+                    }
+                    else {
+                        result = startOfDay(date);
+                    }
+                }
+                else if (timeString) {
+                    result = readableTimeStringToDate(timeString, {
+                        date,
+                        useSystemTimezone: true
+                    }) ?? date;
                 }
                 else {
-                    result = startOfDay(date);
+                    result = date;
                 }
             }
-            else if (timeString) {
-                result = readableTimeStringToDate(timeString, {
-                    date,
-                    useSystemTimezone: true
-                });
-            }
             return result;
-        }), filterMaybe(), distinctUntilChanged((a, b) => isSameMinute(a, b)), shareReplay(1));
+        }), distinctUntilChanged((a, b) => Boolean(a && b) && isSameMinute(a, b)), shareReplay(1));
         this.timeOutput$ = combineLatest([
             this.rawDateTime$,
             this._offset,
             this.config$.pipe(distinctUntilChanged()),
-        ]).pipe(throttleTime(10, undefined, { leading: false, trailing: true }), distinctUntilChanged((current, next) => current[0] === next[0] && next[1] === 0), tap(([_, stepsOffset]) => (stepsOffset) ? this._offset.next(0) : 0), map(([date, stepsOffset, config]) => {
-            const instance = new DateTimeMinuteInstance({
-                date,
-                ...config,
-                roundDownToMinute: true
-            });
-            date = instance.limit(date);
-            const minutes = stepsOffset * 5;
-            date = addMinutes(date, minutes);
+        ]).pipe(throttleTime(40, undefined, { leading: false, trailing: true }), distinctUntilChanged((current, next) => current[0] === next[0] && next[1] === 0), tap(([_, stepsOffset]) => (stepsOffset) ? this._offset.next(0) : 0), map(([date, stepsOffset, config]) => {
+            if (date != null) {
+                const instance = new DateTimeMinuteInstance({
+                    date,
+                    ...config,
+                    roundDownToMinute: true
+                });
+                date = instance.limit(date);
+                const minutes = stepsOffset * 5;
+                date = addMinutes(date, minutes);
+            }
             return date;
-        }), distinctUntilChanged((a, b) => a && b && isSameMinute(a, b)));
+        }), distinctUntilChanged((a, b) => Boolean(a && b) && isSameMinute(a, b)), shareReplay(1));
+    }
+    get dateOnly() {
+        return this.timeMode === DateTimeFieldTimeMode.NONE;
+    }
+    get dateTimeField() {
+        return this.field.dateTimeField;
     }
     get timeOnly() {
-        return this.field.timeOnly;
+        return this.dateTimeField.timeOnly;
     }
     get showDateInput() {
         return !this.timeOnly;
     }
     get timeMode() {
-        return (this.timeOnly) ? DateTimeFieldTimeMode.REQUIRED : (this.field.timeMode ?? DateTimeFieldTimeMode.REQUIRED);
+        return (this.timeOnly) ? DateTimeFieldTimeMode.REQUIRED : (this.dateTimeField.timeMode ?? DateTimeFieldTimeMode.REQUIRED);
     }
     get description() {
         return this.field.templateOptions?.description;
     }
     ngOnInit() {
+        super.ngOnInit();
         this._formControlObs.next(this.formControl);
-        this._config.next(this.field.getConfigObs?.());
-        this._sub.subscription = this.timeOutput$.subscribe((value) => {
+        this._config.next(this.dateTimeField.getConfigObs?.());
+        this._sub.subscription = this.timeOutput$.pipe(skipFirstMaybe()).subscribe((value) => {
             this.formControl.setValue(value);
             this.formControl.markAsDirty();
             this.formControl.markAsTouched();
         });
         this._valueSub.subscription = this.timeString$.subscribe((x) => {
+            // Skip events where the timeInput value is cleared.
+            if (!this.timeInputCtrl.value && x === '12:00AM') {
+                return;
+            }
             this.timeInputCtrl.setValue(x);
         });
-        const isFullDayField = this.field.fullDayFieldName;
+        const isFullDayField = this.dateTimeField.fullDayFieldName;
         let fullDayFieldCtrl;
         if (isFullDayField) {
             fullDayFieldCtrl = this.form.get(isFullDayField);
@@ -2242,7 +2880,7 @@ class DbxDateTimeFieldComponent extends FieldType {
             fullDayFieldCtrl = this._fullDayInputCtrl;
         }
         this._fullDayControlObs.next(fullDayFieldCtrl);
-        switch (this.field.timeMode) {
+        switch (this.dateTimeField.timeMode) {
             case DateTimeFieldTimeMode.OPTIONAL:
                 break;
             case DateTimeFieldTimeMode.NONE:
@@ -2254,6 +2892,7 @@ class DbxDateTimeFieldComponent extends FieldType {
         }
     }
     ngOnDestroy() {
+        super.ngOnDestroy();
         this._formControlObs.complete();
         this._date.complete();
         this._updateTime.complete();
@@ -2261,6 +2900,12 @@ class DbxDateTimeFieldComponent extends FieldType {
         this._sub.destroy();
         this._valueSub.destroy();
     }
+    dateTextChanged(e) {
+        const value = this.dateInput.value;
+        if (value == null) {
+            this._date.next(undefined);
+        }
+    }
     datePicked(event) {
         const date = event.value;
         if (date) {
@@ -2316,11 +2961,14 @@ class DbxDateTimeFieldComponent extends FieldType {
     }
 }
 DbxDateTimeFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxDateTimeFieldComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-DbxDateTimeFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.0", type: DbxDateTimeFieldComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<div class=\"dbx-datetime-field\" fxLayout=\"row wrap\" fxLayout.xs=\"column wrap\" fxLayoutAlign=\"space-evenly stretch\">\n  <!-- Date -->\n  <div class=\"dbx-datetime-row\" fxFlex.lt-sm=\"100\" fxFlex=\"50\" *ngIf=\"showDateInput\">\n    <ng-container *ngTemplateOutlet=\"dateInputTemplate\"></ng-container>\n  </div>\n  <!-- Time -->\n  <div class=\"dbx-datetime-row\" fxFlex.lt-sm=\"100\" [fxFlex]=\"showDateInput ? 50 : 100\">\n    <ng-container *ngIf=\"showTimeInput$ | async\">\n      <ng-container *ngTemplateOutlet=\"timeMenuAndInputTemplate\"></ng-container>\n    </ng-container>\n    <div class=\"add-time-button-wrapper\" *ngIf=\"showAddTime$ | async\">\n      <button mat-button class=\"add-time-button\" (click)=\"addTime()\">\n        <mat-icon>timer</mat-icon> Add Time\n      </button>\n    </div>\n  </div>\n  <div class=\"dbx-datetime-row dbx-datetime-hint-row\" fxFlex=\"100\">\n    <div class=\"dbx-hint\" [ngSwitch]=\"fullDay$ | async\">\n      <small *ngSwitchCase=\"true\"><b class=\"dbx-ok\">All Day</b> {{ dateValue$ | async | date:'fullDate' }}\n        ({{ dateValue$ | async | dateDistance }})</small>\n      <small *ngSwitchCase=\"false\">\n        <ng-container *ngIf=\"value$ | async\"><b class=\"dbx-ok\">At</b> {{ displayValue$ | async | date:'medium' }}\n          ({{ displayValue$ | async | timeDistance }})</ng-container>\n      </small>\n    </div>\n    <div class=\"dbx-small dbx-label\" *ngIf=\"description\">\n      {{ description }}\n    </div>\n  </div>\n</div>\n\n<!-- Date Input Template -->\n<ng-template #dateInputTemplate>\n  <button mat-icon-button (click)=\"picker.open()\">\n    <mat-icon>calendar_today</mat-icon>\n  </button>\n  <mat-form-field class=\"dbx-datetime-row-field\">\n    <mat-label>Date</mat-label>\n    <input matInput [matDatepicker]=\"picker\" (dateChange)=\"datePicked($event)\" [value]=\"dateValue$ | async\">\n    <mat-datepicker #picker></mat-datepicker>\n  </mat-form-field>\n</ng-template>\n\n<!-- Time Menu/Input Template -->\n<ng-template #timeMenuAndInputTemplate>\n  <button mat-icon-button [matMenuTriggerFor]=\"timemenu\" aria-label=\"opens the time menu\">\n    <mat-icon>timer</mat-icon>\n  </button>\n  <mat-menu #timemenu=\"matMenu\">\n    <ng-container *ngIf=\"timeMode === 'optional'\">\n      <button mat-menu-item (click)=\"removeTime()\">\n        <span>Remove Time</span>\n      </button>\n      <mat-divider></mat-divider>\n    </ng-container>\n    <button mat-menu-item (click)=\"setTime('12:00AM')\">\n      <span>Midnight</span>\n    </button>\n    <button mat-menu-item (click)=\"setTime('6:00AM')\">\n      <span>6:00AM</span>\n    </button>\n    <button mat-menu-item (click)=\"setTime('8:00AM')\">\n      <span>8:00AM</span>\n    </button>\n    <button mat-menu-item (click)=\"setTime('10:00AM')\">\n      <span>10:00AM</span>\n    </button>\n    <button mat-menu-item (click)=\"setTime('12:00PM')\">\n      <span>Noon</span>\n    </button>\n    <button mat-menu-item (click)=\"setTime('2:00PM')\">\n      <span>2:00PM</span>\n    </button>\n    <button mat-menu-item (click)=\"setTime('5:00PM')\">\n      <span>5:00PM</span>\n    </button>\n  </mat-menu>\n  <mat-form-field class=\"dbx-datetime-row-field\">\n    <mat-label>Time</mat-label>\n    <input #timeInput matInput [formControl]=\"timeInputCtrl\" (focus)=\"focusTime()\" (focusout)=\"focusOutTime()\"\n      (keydown)=\"keydownOnInput($event)\">\n  </mat-form-field>\n</ng-template>\n", components: [{ type: i1$2.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i4.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i4$1.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { type: i5$2.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i5$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { type: i3$2.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }], directives: [{ type: i3$1.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i3$1.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$1.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i5.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i5.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i4.MatLabel, selector: "mat-label" }, { type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i4$1.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { type: i5$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], pipes: { "async": i5.AsyncPipe, "date": i5.DatePipe, "dateDistance": i2.DateDistancePipe, "timeDistance": i2.TimeDistancePipe } });
+DbxDateTimeFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.0", type: DbxDateTimeFieldComponent, selector: "ng-component", viewQueries: [{ propertyName: "dateInput", first: true, predicate: ["dateInput"], descendants: true, read: MatInput }], usesInheritance: true, ngImport: i0, template: "<div class=\"dbx-datetime-field\" fxLayout=\"row wrap\" fxLayout.xs=\"column wrap\" fxLayoutAlign=\"space-evenly stretch\">\n  <!-- Date -->\n  <div class=\"dbx-datetime-row\" fxFlex.lt-sm=\"100\" [fxFlex]=\"dateOnly ? '100' : '50'\" *ngIf=\"showDateInput\">\n    <ng-container *ngTemplateOutlet=\"dateInputTemplate\"></ng-container>\n  </div>\n  <!-- Time -->\n  <div class=\"dbx-datetime-row\" fxFlex.lt-sm=\"100\" [fxFlex]=\"showDateInput ? '50' : '100'\">\n    <ng-container *ngIf=\"showTimeInput$ | async\">\n      <ng-container *ngTemplateOutlet=\"timeMenuAndInputTemplate\"></ng-container>\n    </ng-container>\n    <div class=\"add-time-button-wrapper\" *ngIf=\"showAddTime$ | async\">\n      <button mat-button class=\"add-time-button\" ngClass.lt-sm=\"add-time-button-full\" (click)=\"addTime()\">\n        <mat-icon>timer</mat-icon> Add Time\n      </button>\n    </div>\n  </div>\n  <div class=\"dbx-datetime-row dbx-datetime-hint-row\" fxFlex=\"100\">\n    <div class=\"dbx-hint\" [ngSwitch]=\"fullDay$ | async\">\n      <small *ngSwitchCase=\"true\"><b class=\"dbx-ok\">All Day</b> {{ dateValue$ | async | date:'fullDate' }}\n        ({{ dateValue$ | async | dateDistance }})</small>\n      <small *ngSwitchCase=\"false\">\n        <ng-container *ngIf=\"value$ | async\"><b class=\"dbx-ok\">At</b> {{ displayValue$ | async | date:'medium' }}\n          ({{ displayValue$ | async | timeDistance }})</ng-container>\n      </small>\n    </div>\n  </div>\n</div>\n\n<!-- Date Input Template -->\n<ng-template #dateInputTemplate>\n  <button mat-icon-button (click)=\"picker.open()\">\n    <mat-icon>calendar_today</mat-icon>\n  </button>\n  <mat-form-field class=\"dbx-datetime-row-field\">\n    <mat-label>Date</mat-label>\n    <input #dateInput matInput [matDatepicker]=\"picker\" (change)=\"dateTextChanged($event)\"\n      (dateChange)=\"datePicked($event)\" [value]=\"dateValue$ | async\">\n    <mat-datepicker #picker></mat-datepicker>\n  </mat-form-field>\n</ng-template>\n\n<!-- Time Menu/Input Template -->\n<ng-template #timeMenuAndInputTemplate>\n  <button mat-icon-button [matMenuTriggerFor]=\"timemenu\" aria-label=\"opens the time menu\">\n    <mat-icon>timer</mat-icon>\n  </button>\n  <mat-menu #timemenu=\"matMenu\">\n    <ng-container *ngIf=\"timeMode === 'optional'\">\n      <button mat-menu-item (click)=\"removeTime()\">\n        <span>Remove Time</span>\n      </button>\n      <mat-divider></mat-divider>\n    </ng-container>\n    <button mat-menu-item (click)=\"setTime('12:00AM')\">\n      <span>Midnight</span>\n    </button>\n    <button mat-menu-item (click)=\"setTime('6:00AM')\">\n      <span>6:00AM</span>\n    </button>\n    <button mat-menu-item (click)=\"setTime('8:00AM')\">\n      <span>8:00AM</span>\n    </button>\n    <button mat-menu-item (click)=\"setTime('10:00AM')\">\n      <span>10:00AM</span>\n    </button>\n    <button mat-menu-item (click)=\"setTime('12:00PM')\">\n      <span>Noon</span>\n    </button>\n    <button mat-menu-item (click)=\"setTime('2:00PM')\">\n      <span>2:00PM</span>\n    </button>\n    <button mat-menu-item (click)=\"setTime('5:00PM')\">\n      <span>5:00PM</span>\n    </button>\n  </mat-menu>\n  <mat-form-field class=\"dbx-datetime-row-field\">\n    <mat-label>Time</mat-label>\n    <input #timeInput matInput [formControl]=\"timeInputCtrl\" (focus)=\"focusTime()\" (focusout)=\"focusOutTime()\"\n      (keydown)=\"keydownOnInput($event)\">\n  </mat-form-field>\n</ng-template>\n", components: [{ type: i1$2.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i3$2.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i4$4.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { type: i5$2.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i5$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { type: i4$2.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }], directives: [{ type: i3$1.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i3$1.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$1.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i2$2.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { type: i5.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i5.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i3$2.MatLabel, selector: "mat-label" }, { type: i6$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i4$4.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { type: i5$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { type: i4$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i4$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], pipes: { "async": i5.AsyncPipe, "date": i5.DatePipe, "dateDistance": i2.DateDistancePipe, "timeDistance": i2.TimeDistancePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxDateTimeFieldComponent, decorators: [{
             type: Component,
-            args: [{ template: "<div class=\"dbx-datetime-field\" fxLayout=\"row wrap\" fxLayout.xs=\"column wrap\" fxLayoutAlign=\"space-evenly stretch\">\n  <!-- Date -->\n  <div class=\"dbx-datetime-row\" fxFlex.lt-sm=\"100\" fxFlex=\"50\" *ngIf=\"showDateInput\">\n    <ng-container *ngTemplateOutlet=\"dateInputTemplate\"></ng-container>\n  </div>\n  <!-- Time -->\n  <div class=\"dbx-datetime-row\" fxFlex.lt-sm=\"100\" [fxFlex]=\"showDateInput ? 50 : 100\">\n    <ng-container *ngIf=\"showTimeInput$ | async\">\n      <ng-container *ngTemplateOutlet=\"timeMenuAndInputTemplate\"></ng-container>\n    </ng-container>\n    <div class=\"add-time-button-wrapper\" *ngIf=\"showAddTime$ | async\">\n      <button mat-button class=\"add-time-button\" (click)=\"addTime()\">\n        <mat-icon>timer</mat-icon> Add Time\n      </button>\n    </div>\n  </div>\n  <div class=\"dbx-datetime-row dbx-datetime-hint-row\" fxFlex=\"100\">\n    <div class=\"dbx-hint\" [ngSwitch]=\"fullDay$ | async\">\n      <small *ngSwitchCase=\"true\"><b class=\"dbx-ok\">All Day</b> {{ dateValue$ | async | date:'fullDate' }}\n        ({{ dateValue$ | async | dateDistance }})</small>\n      <small *ngSwitchCase=\"false\">\n        <ng-container *ngIf=\"value$ | async\"><b class=\"dbx-ok\">At</b> {{ displayValue$ | async | date:'medium' }}\n          ({{ displayValue$ | async | timeDistance }})</ng-container>\n      </small>\n    </div>\n    <div class=\"dbx-small dbx-label\" *ngIf=\"description\">\n      {{ description }}\n    </div>\n  </div>\n</div>\n\n<!-- Date Input Template -->\n<ng-template #dateInputTemplate>\n  <button mat-icon-button (click)=\"picker.open()\">\n    <mat-icon>calendar_today</mat-icon>\n  </button>\n  <mat-form-field class=\"dbx-datetime-row-field\">\n    <mat-label>Date</mat-label>\n    <input matInput [matDatepicker]=\"picker\" (dateChange)=\"datePicked($event)\" [value]=\"dateValue$ | async\">\n    <mat-datepicker #picker></mat-datepicker>\n  </mat-form-field>\n</ng-template>\n\n<!-- Time Menu/Input Template -->\n<ng-template #timeMenuAndInputTemplate>\n  <button mat-icon-button [matMenuTriggerFor]=\"timemenu\" aria-label=\"opens the time menu\">\n    <mat-icon>timer</mat-icon>\n  </button>\n  <mat-menu #timemenu=\"matMenu\">\n    <ng-container *ngIf=\"timeMode === 'optional'\">\n      <button mat-menu-item (click)=\"removeTime()\">\n        <span>Remove Time</span>\n      </button>\n      <mat-divider></mat-divider>\n    </ng-container>\n    <button mat-menu-item (click)=\"setTime('12:00AM')\">\n      <span>Midnight</span>\n    </button>\n    <button mat-menu-item (click)=\"setTime('6:00AM')\">\n      <span>6:00AM</span>\n    </button>\n    <button mat-menu-item (click)=\"setTime('8:00AM')\">\n      <span>8:00AM</span>\n    </button>\n    <button mat-menu-item (click)=\"setTime('10:00AM')\">\n      <span>10:00AM</span>\n    </button>\n    <button mat-menu-item (click)=\"setTime('12:00PM')\">\n      <span>Noon</span>\n    </button>\n    <button mat-menu-item (click)=\"setTime('2:00PM')\">\n      <span>2:00PM</span>\n    </button>\n    <button mat-menu-item (click)=\"setTime('5:00PM')\">\n      <span>5:00PM</span>\n    </button>\n  </mat-menu>\n  <mat-form-field class=\"dbx-datetime-row-field\">\n    <mat-label>Time</mat-label>\n    <input #timeInput matInput [formControl]=\"timeInputCtrl\" (focus)=\"focusTime()\" (focusout)=\"focusOutTime()\"\n      (keydown)=\"keydownOnInput($event)\">\n  </mat-form-field>\n</ng-template>\n" }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; } });
+            args: [{ template: "<div class=\"dbx-datetime-field\" fxLayout=\"row wrap\" fxLayout.xs=\"column wrap\" fxLayoutAlign=\"space-evenly stretch\">\n  <!-- Date -->\n  <div class=\"dbx-datetime-row\" fxFlex.lt-sm=\"100\" [fxFlex]=\"dateOnly ? '100' : '50'\" *ngIf=\"showDateInput\">\n    <ng-container *ngTemplateOutlet=\"dateInputTemplate\"></ng-container>\n  </div>\n  <!-- Time -->\n  <div class=\"dbx-datetime-row\" fxFlex.lt-sm=\"100\" [fxFlex]=\"showDateInput ? '50' : '100'\">\n    <ng-container *ngIf=\"showTimeInput$ | async\">\n      <ng-container *ngTemplateOutlet=\"timeMenuAndInputTemplate\"></ng-container>\n    </ng-container>\n    <div class=\"add-time-button-wrapper\" *ngIf=\"showAddTime$ | async\">\n      <button mat-button class=\"add-time-button\" ngClass.lt-sm=\"add-time-button-full\" (click)=\"addTime()\">\n        <mat-icon>timer</mat-icon> Add Time\n      </button>\n    </div>\n  </div>\n  <div class=\"dbx-datetime-row dbx-datetime-hint-row\" fxFlex=\"100\">\n    <div class=\"dbx-hint\" [ngSwitch]=\"fullDay$ | async\">\n      <small *ngSwitchCase=\"true\"><b class=\"dbx-ok\">All Day</b> {{ dateValue$ | async | date:'fullDate' }}\n        ({{ dateValue$ | async | dateDistance }})</small>\n      <small *ngSwitchCase=\"false\">\n        <ng-container *ngIf=\"value$ | async\"><b class=\"dbx-ok\">At</b> {{ displayValue$ | async | date:'medium' }}\n          ({{ displayValue$ | async | timeDistance }})</ng-container>\n      </small>\n    </div>\n  </div>\n</div>\n\n<!-- Date Input Template -->\n<ng-template #dateInputTemplate>\n  <button mat-icon-button (click)=\"picker.open()\">\n    <mat-icon>calendar_today</mat-icon>\n  </button>\n  <mat-form-field class=\"dbx-datetime-row-field\">\n    <mat-label>Date</mat-label>\n    <input #dateInput matInput [matDatepicker]=\"picker\" (change)=\"dateTextChanged($event)\"\n      (dateChange)=\"datePicked($event)\" [value]=\"dateValue$ | async\">\n    <mat-datepicker #picker></mat-datepicker>\n  </mat-form-field>\n</ng-template>\n\n<!-- Time Menu/Input Template -->\n<ng-template #timeMenuAndInputTemplate>\n  <button mat-icon-button [matMenuTriggerFor]=\"timemenu\" aria-label=\"opens the time menu\">\n    <mat-icon>timer</mat-icon>\n  </button>\n  <mat-menu #timemenu=\"matMenu\">\n    <ng-container *ngIf=\"timeMode === 'optional'\">\n      <button mat-menu-item (click)=\"removeTime()\">\n        <span>Remove Time</span>\n      </button>\n      <mat-divider></mat-divider>\n    </ng-container>\n    <button mat-menu-item (click)=\"setTime('12:00AM')\">\n      <span>Midnight</span>\n    </button>\n    <button mat-menu-item (click)=\"setTime('6:00AM')\">\n      <span>6:00AM</span>\n    </button>\n    <button mat-menu-item (click)=\"setTime('8:00AM')\">\n      <span>8:00AM</span>\n    </button>\n    <button mat-menu-item (click)=\"setTime('10:00AM')\">\n      <span>10:00AM</span>\n    </button>\n    <button mat-menu-item (click)=\"setTime('12:00PM')\">\n      <span>Noon</span>\n    </button>\n    <button mat-menu-item (click)=\"setTime('2:00PM')\">\n      <span>2:00PM</span>\n    </button>\n    <button mat-menu-item (click)=\"setTime('5:00PM')\">\n      <span>5:00PM</span>\n    </button>\n  </mat-menu>\n  <mat-form-field class=\"dbx-datetime-row-field\">\n    <mat-label>Time</mat-label>\n    <input #timeInput matInput [formControl]=\"timeInputCtrl\" (focus)=\"focusTime()\" (focusout)=\"focusOutTime()\"\n      (keydown)=\"keydownOnInput($event)\">\n  </mat-form-field>\n</ng-template>\n" }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { dateInput: [{
+                type: ViewChild,
+                args: ['dateInput', { read: MatInput }]
+            }] } });
 
 class DbxFormFormlyDateFieldModule {
 }
@@ -2338,7 +2986,7 @@ DbxFormFormlyDateFieldModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.
         DbxDatePipeModule,
         MatChipsModule,
         MatIconModule,
-        FlexLayoutModule, i1$4.FormlyModule] });
+        FlexLayoutModule, i1$4.FormlyModule], exports: [DbxFormFormlyWrapperModule] });
 DbxFormFormlyDateFieldModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxFormFormlyDateFieldModule, imports: [[
             CommonModule,
             FormsModule,
@@ -2356,10 +3004,10 @@ DbxFormFormlyDateFieldModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.
             FlexLayoutModule,
             FormlyModule.forChild({
                 types: [
-                    { name: 'datetime', component: DbxDateTimeFieldComponent }
+                    { name: 'datetime', component: DbxDateTimeFieldComponent, wrappers: ['style', 'form-field'] }
                 ]
             })
-        ]] });
+        ], DbxFormFormlyWrapperModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxFormFormlyDateFieldModule, decorators: [{
             type: NgModule,
             args: [{
@@ -2380,14 +3028,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImpor
                         FlexLayoutModule,
                         FormlyModule.forChild({
                             types: [
-                                { name: 'datetime', component: DbxDateTimeFieldComponent }
+                                { name: 'datetime', component: DbxDateTimeFieldComponent, wrappers: ['style', 'form-field'] }
                             ]
                         })
                     ],
                     declarations: [
                         DbxDateTimeFieldComponent
                     ],
-                    exports: []
+                    exports: [
+                        DbxFormFormlyWrapperModule
+                    ]
                 }]
         }] });
 
@@ -2405,22 +3055,22 @@ function timeOnlyField(config) {
         timeOnly: true
     });
 }
-function dateTimeField({ key, label = '', placeholder = '', description = '', timeMode = DateTimeFieldTimeMode.REQUIRED, fullDayFieldName, getConfigObs, timeOnly = false, required = false }) {
+function dateTimeField(config) {
+    const { key = 'date', timeMode = DateTimeFieldTimeMode.REQUIRED, fullDayFieldName, getConfigObs, timeOnly = false } = config;
     const fieldConfig = formlyField({
         key,
         type: 'datetime',
-        timeMode: (timeOnly) ? DateTimeFieldTimeMode.REQUIRED : timeMode,
-        fullDayFieldName,
-        getConfigObs,
-        timeOnly,
-        templateOptions: {
-            label,
-            placeholder,
-            required,
-            description
+        dateTimeField: {
+            timeMode: (timeOnly) ? DateTimeFieldTimeMode.REQUIRED : timeMode,
+            fullDayFieldName,
+            getConfigObs,
+            timeOnly,
         },
+        ...templateOptionsForFieldConfig(config),
+        styleWrapper: {
+            style: 'dbx-datetime-parent-form-field'
+        }
     });
-    // TODO: Add configuration...
     return fieldConfig;
 }
 
@@ -2441,60 +3091,59 @@ function staticEnumField({ key, label = '', placeholder = '', description, multi
     return fieldConfig;
 }
 
-// TODO: Finish dynamic.enum before adding in
-
-const DEFAULT_PREFERRED_COUNTRIES = ['us'];
-class DbxInternationalPhoneFieldComponent extends FieldType {
-    get fieldInputKey() {
-        return this.key;
-    }
-    get fieldFormGroup() {
-        return this.form;
-    }
-    get label() {
-        return this.field.templateOptions.label;
-    }
-    get placeholder() {
-        return this.field.templateOptions.placeholder;
-    }
-    get description() {
-        return this.field.templateOptions.description;
+class DbxFormFormlyEnumFieldModule {
+}
+DbxFormFormlyEnumFieldModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxFormFormlyEnumFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+DbxFormFormlyEnumFieldModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxFormFormlyEnumFieldModule });
+DbxFormFormlyEnumFieldModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxFormFormlyEnumFieldModule, imports: [[]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxFormFormlyEnumFieldModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [],
+                    declarations: [],
+                    exports: []
+                }]
+        }] });
+
+// TODO: Finish dynamic.enum before adding in
+
+const DEFAULT_PREFERRED_COUNTRIES = ['us'];
+class DbxPhoneFieldComponent extends FieldType$1 {
+    get phoneField() {
+        return this.field.phoneField;
     }
     get preferredCountries() {
-        return this.field.preferredCountries ?? DEFAULT_PREFERRED_COUNTRIES;
+        return this.phoneField.preferredCountries ?? DEFAULT_PREFERRED_COUNTRIES;
     }
     get onlyCountries() {
-        return this.field.onlyCountries ?? [];
-    }
-    get required() {
-        return this.field.templateOptions.required ?? false;
-    }
-    get errors() {
-        return this.field.formControl?.errors;
+        return this.phoneField.onlyCountries ?? [];
     }
 }
-DbxInternationalPhoneFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxInternationalPhoneFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-DbxInternationalPhoneFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.0", type: DbxInternationalPhoneFieldComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<div class=\"dbx-international-phone-field\" [formGroup]=\"fieldFormGroup\">\n  <mat-form-field class=\"dbx-international-phone-form-field\">\n    <ngx-mat-intl-tel-input [required]=\"required\" [preferredCountries]=\"preferredCountries\" [enablePlaceholder]=\"false\"\n      name=\"phone\" [formControlName]=\"fieldInputKey\">\n    </ngx-mat-intl-tel-input>\n    <mat-error *ngIf=\"errors?.['required']\">Required Field</mat-error>\n    <mat-error *ngIf=\"errors?.['validatePhoneNumber']\">Invalid Number</mat-error>\n    <mat-hint>{{ description }}</mat-hint>\n  </mat-form-field>\n</div>\n", components: [{ type: i4.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i2$4.NgxMatIntlTelInputComponent, selector: "ngx-mat-intl-tel-input", inputs: ["preferredCountries", "enablePlaceholder", "inputPlaceholder", "cssClass", "name", "onlyCountries", "errorStateMatcher", "enableSearch", "searchPlaceholder", "describedBy", "format", "placeholder", "required", "disabled"], outputs: ["countryChanged"] }], directives: [{ type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.MatError, selector: "mat-error", inputs: ["id"] }, { type: i4.MatHint, selector: "mat-hint", inputs: ["align", "id"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxInternationalPhoneFieldComponent, decorators: [{
+DbxPhoneFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxPhoneFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+DbxPhoneFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.0", type: DbxPhoneFieldComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<ngx-mat-intl-tel-input class=\"dbx-form-phone-field\" [required]=\"required\" [preferredCountries]=\"preferredCountries\"\n  [enablePlaceholder]=\"false\" name=\"phone\" [formControl]=\"formControl\">\n</ngx-mat-intl-tel-input>\n", components: [{ type: i1$6.NgxMatIntlTelInputComponent, selector: "ngx-mat-intl-tel-input", inputs: ["preferredCountries", "enablePlaceholder", "inputPlaceholder", "cssClass", "name", "onlyCountries", "errorStateMatcher", "enableSearch", "searchPlaceholder", "describedBy", "format", "placeholder", "required", "disabled"], outputs: ["countryChanged"] }], directives: [{ type: i4$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i4$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxPhoneFieldComponent, decorators: [{
             type: Component,
-            args: [{ template: "<div class=\"dbx-international-phone-field\" [formGroup]=\"fieldFormGroup\">\n  <mat-form-field class=\"dbx-international-phone-form-field\">\n    <ngx-mat-intl-tel-input [required]=\"required\" [preferredCountries]=\"preferredCountries\" [enablePlaceholder]=\"false\"\n      name=\"phone\" [formControlName]=\"fieldInputKey\">\n    </ngx-mat-intl-tel-input>\n    <mat-error *ngIf=\"errors?.['required']\">Required Field</mat-error>\n    <mat-error *ngIf=\"errors?.['validatePhoneNumber']\">Invalid Number</mat-error>\n    <mat-hint>{{ description }}</mat-hint>\n  </mat-form-field>\n</div>\n" }]
+            args: [{ template: "<ngx-mat-intl-tel-input class=\"dbx-form-phone-field\" [required]=\"required\" [preferredCountries]=\"preferredCountries\"\n  [enablePlaceholder]=\"false\" name=\"phone\" [formControl]=\"formControl\">\n</ngx-mat-intl-tel-input>\n" }]
         }] });
 
 class DbxFormFormlyPhoneFieldModule {
 }
 DbxFormFormlyPhoneFieldModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxFormFormlyPhoneFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-DbxFormFormlyPhoneFieldModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxFormFormlyPhoneFieldModule, declarations: [DbxInternationalPhoneFieldComponent], imports: [CommonModule,
+DbxFormFormlyPhoneFieldModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxFormFormlyPhoneFieldModule, declarations: [DbxPhoneFieldComponent], imports: [CommonModule,
         MatInputModule,
+        MatFormFieldModule,
         FormsModule,
         NgxMatIntlTelInputModule,
         ReactiveFormsModule,
         MatAutocompleteModule,
         MatChipsModule,
         MatIconModule,
-        FlexLayoutModule, i1$4.FormlyModule] });
+        FlexLayoutModule,
+        FormlyMatFormFieldModule, i1$4.FormlyModule] });
 DbxFormFormlyPhoneFieldModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxFormFormlyPhoneFieldModule, imports: [[
             CommonModule,
             MatInputModule,
+            MatFormFieldModule,
             FormsModule,
             NgxMatIntlTelInputModule,
             ReactiveFormsModule,
@@ -2502,9 +3151,10 @@ DbxFormFormlyPhoneFieldModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12
             MatChipsModule,
             MatIconModule,
             FlexLayoutModule,
+            FormlyMatFormFieldModule,
             FormlyModule.forChild({
                 types: [
-                    { name: 'intphone', component: DbxInternationalPhoneFieldComponent }
+                    { name: 'intphone', component: DbxPhoneFieldComponent, wrappers: ['form-field'] }
                 ]
             })
         ]] });
@@ -2514,6 +3164,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImpor
                     imports: [
                         CommonModule,
                         MatInputModule,
+                        MatFormFieldModule,
                         FormsModule,
                         NgxMatIntlTelInputModule,
                         ReactiveFormsModule,
@@ -2521,60 +3172,190 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImpor
                         MatChipsModule,
                         MatIconModule,
                         FlexLayoutModule,
+                        FormlyMatFormFieldModule,
                         FormlyModule.forChild({
                             types: [
-                                { name: 'intphone', component: DbxInternationalPhoneFieldComponent }
+                                { name: 'intphone', component: DbxPhoneFieldComponent, wrappers: ['form-field'] }
                             ]
                         })
                     ],
                     declarations: [
-                        DbxInternationalPhoneFieldComponent
+                        DbxPhoneFieldComponent
                     ],
                     exports: []
                 }]
         }] });
 
-const PHONE_LABEL_MAX_LENGTH = 100;
-const ADDRESS_COUNTRY_MAX_LENGTH = 80;
-const ADDRESS_CITY_MAX_LENGTH = 80;
-const ADDRESS_STATE_MAX_LENGTH = 80;
-const ADDRESS_ZIP_MAX_LENGTH = 20;
-const LABEL_STRING_MAX_LENGTH = 100;
-const SEARCH_STRING_MAX_LENGTH = 100;
-function textField({ key, label = '', placeholder = '', required = false, attributes, readonly, autocomplete, minLength, maxLength, pattern }) {
+const EXPANDABLE_WRAPPER_KEY = 'expandable';
+const TOGGLE_WRAPPER_KEY = 'toggle';
+const SECTION_WRAPPER_KEY = 'section';
+const SUBSECTION_WRAPPER_KEY = 'subsection';
+const INFO_WRAPPER_KEY = 'info';
+const FLEX_WRAPPER_KEY = 'flex';
+const STYLE_WRAPPER_KEY = 'style';
+function addWrapperToFormlyFieldConfig(fieldConfig, wrapperKey, wrapperTemplateOptionsConfig) {
+    fieldConfig.templateOptions = {
+        ...fieldConfig.templateOptions,
+        ...wrapperTemplateOptionsConfig
+    };
+    return {
+        wrappers: [wrapperKey],
+        templateOptions: wrapperTemplateOptionsConfig,
+        fieldGroup: [fieldConfig]
+    };
+}
+function expandWrapper(fieldConfig, expandWrapper) {
+    return addWrapperToFormlyFieldConfig(fieldConfig, EXPANDABLE_WRAPPER_KEY, {
+        expandWrapper
+    });
+}
+function toggleWrapper(fieldConfig, expandWrapper) {
+    return addWrapperToFormlyFieldConfig(fieldConfig, TOGGLE_WRAPPER_KEY, {
+        expandWrapper
+    });
+}
+function sectionWrapper(fieldConfig, sectionWrapper) {
+    return addWrapperToFormlyFieldConfig(fieldConfig, SECTION_WRAPPER_KEY, {
+        sectionWrapper
+    });
+}
+function subsectionWrapper(fieldConfig, subsectionWrapper) {
+    return addWrapperToFormlyFieldConfig(fieldConfig, SUBSECTION_WRAPPER_KEY, {
+        subsectionWrapper
+    });
+}
+function infoWrapper(fieldConfig, infoWrapper) {
+    return addWrapperToFormlyFieldConfig(fieldConfig, INFO_WRAPPER_KEY, {
+        infoWrapper
+    });
+}
+function styleWrapper(fieldConfig, styleWrapper) {
+    return addWrapperToFormlyFieldConfig(fieldConfig, STYLE_WRAPPER_KEY, {
+        styleWrapper
+    });
+}
+function checkIsFieldFlexLayoutGroupFieldConfig(input) {
+    if (input.field != null) {
+        return true;
+    }
+    else {
+        return false;
+    }
+}
+function flexLayoutWrapper(fieldConfigs, { relative, breakpoint, size: defaultSize = 2 } = {}) {
+    return {
+        wrappers: ['flex'],
+        fieldGroupClassName: 'dbx-flex-group',
+        // fieldGroupClassName: 'field-layout-group',
+        templateOptions: {
+            flexWrapper: {
+                breakpoint,
+                relative
+            }
+        },
+        fieldGroup: fieldConfigs.map((inputConfig) => {
+            const fieldConfig = checkIsFieldFlexLayoutGroupFieldConfig(inputConfig) ? inputConfig : {
+                field: inputConfig
+            };
+            const { field, size = defaultSize } = fieldConfig;
+            const className = `dbx-flex-${size}`;
+            return {
+                ...field,
+                className
+            };
+        })
+    };
+}
+
+function textField(config) {
+    const { key, pattern, minLength, maxLength = 1000 } = config;
     return formlyField({
         key,
         type: 'input',
-        templateOptions: {
-            label,
-            placeholder,
-            required,
+        ...templateOptionsForFieldConfig(config, {
             minLength,
             maxLength,
-            pattern,
-            readonly,
-            attributes: {
-                ...attributes,
-                ...(autocomplete) ? { autocomplete } : undefined
-            }
-        }
+            pattern
+        })
     });
 }
-function textAreaField({ key, label = '', placeholder = '', rows = 3, required = false, minLength, maxLength = 1000, attributes }) {
+function textAreaField(config) {
+    const { key, rows = 3, minLength, maxLength = 1000 } = config;
     return formlyField({
         key,
         type: 'textarea',
-        templateOptions: {
-            label,
-            placeholder,
-            required,
+        ...templateOptionsForFieldConfig(config, {
             rows,
             minLength,
             maxLength,
-            attributes
+        })
+    });
+}
+
+function phoneField(config = {}) {
+    const { key = 'phone', preferredCountries, onlyCountries } = config;
+    const fieldConfig = formlyField({
+        key,
+        type: 'intphone',
+        phoneField: {
+            preferredCountries,
+            onlyCountries
+        },
+        ...templateOptionsForFieldConfig(config)
+    });
+    return fieldConfig;
+}
+/**
+ * Puts a phone and
+ * @param param0
+ * @returns
+ */
+function wrappedPhoneAndLabelField({ phoneField: phone, labelField: label } = {}) {
+    return flexLayoutWrapper([
+        {
+            field: phoneField(phone),
+            size: 2
+        },
+        {
+            field: textField({
+                key: 'label',
+                label: 'Label',
+                autocomplete: 'phone-label',
+                ...label
+            }),
+            size: 4
         }
+    ], { relative: true });
+}
+function phoneAndLabelSectionField({ key, header = 'Phone Number', hint, phoneField, labelField } = {}) {
+    return sectionWrapper({
+        key,
+        fieldGroup: [wrappedPhoneAndLabelField({ phoneField, labelField })]
+    }, {
+        header,
+        hint
+    });
+}
+function phoneListField(repeatConfig = {}) {
+    const { key = 'phones', label = 'Phone Numbers', addText = 'Add Phone Number', removeText = 'Remove Phone Number', repeatFieldGroup, phoneAndLabel } = repeatConfig;
+    return repeatArrayField({
+        ...repeatConfig,
+        key,
+        label,
+        addText,
+        removeText,
+        repeatFieldGroup: repeatFieldGroup ?? [wrappedPhoneAndLabelField(phoneAndLabel)]
     });
 }
+;
+
+const PHONE_LABEL_MAX_LENGTH = 100;
+const ADDRESS_COUNTRY_MAX_LENGTH = 80;
+const ADDRESS_CITY_MAX_LENGTH = 80;
+const ADDRESS_STATE_MAX_LENGTH = 80;
+const ADDRESS_ZIP_MAX_LENGTH = 20;
+const LABEL_STRING_MAX_LENGTH = 100;
+const SEARCH_STRING_MAX_LENGTH = 100;
 function nameField({ key = 'name', label = 'Name', placeholder = 'John Doe', required = false, minLength, maxLength, attributes } = {}) {
     return textField({
         key,
@@ -2586,7 +3367,7 @@ function nameField({ key = 'name', label = 'Name', placeholder = 'John Doe', req
         attributes
     });
 }
-function emailField({ key = 'email', label = 'Email Address', placeholder = 'person@email.com', description = '', required = false, readonly = false }) {
+function emailField({ key = 'email', label = 'Email Address', placeholder = 'person@email.com', description = '', required = false, readonly = false } = {}) {
     return formlyField({
         key,
         type: 'input',
@@ -2597,11 +3378,6 @@ function emailField({ key = 'email', label = 'Email Address', placeholder = 'per
             required,
             readonly
         },
-        validation: {
-            messages: {
-                required: `Email is required.`
-            }
-        },
         validators: {
             email: {
                 expression: (c) => !Validators.email(c),
@@ -2610,7 +3386,7 @@ function emailField({ key = 'email', label = 'Email Address', placeholder = 'per
         },
     });
 }
-function cityField({ key = 'city', required = false }) {
+function cityField({ key = 'city', required = false } = {}) {
     return textField({
         key,
         label: 'City',
@@ -2620,124 +3396,37 @@ function cityField({ key = 'city', required = false }) {
         maxLength: ADDRESS_CITY_MAX_LENGTH
     });
 }
-function stateField({ key = 'state', required = false }) {
+function stateField({ key = 'state', required = false } = {}) {
     return textField({
         key,
         label: 'State',
         placeholder: '',
         required,
-        attributes: {
-            autocomplete: 'state'
-        },
+        autocomplete: 'state',
         maxLength: ADDRESS_STATE_MAX_LENGTH
     });
 }
-function countryField({ key = 'country', required = false }) {
+function countryField({ key = 'country', required = false } = {}) {
     return textField({
         key,
         label: 'Country',
         placeholder: '',
         required,
-        attributes: {
-            autocomplete: 'country'
-        },
+        autocomplete: 'country',
         maxLength: ADDRESS_COUNTRY_MAX_LENGTH
     });
 }
-function zipCodeField({ key = 'zip', required = false }) {
+function zipCodeField({ key = 'zip', required = false } = {}) {
     return textField({
         key,
         label: 'Zip Code',
         placeholder: '',
         required,
-        attributes: {
-            autocomplete: 'postal-code'
-        },
+        autocomplete: 'postal-code',
         maxLength: ADDRESS_ZIP_MAX_LENGTH
     });
 }
 
-function flexLayoutWrapper(fieldConfigs, { size: defaultSize = 2, retainSizeOnSmallScreen } = {}) {
-    const defaultRetainSizeOnSmallScreen = retainSizeOnSmallScreen;
-    return {
-        wrappers: ['flex'],
-        fieldGroupClassName: 'form-flex-section-group',
-        // fieldGroupClassName: 'field-layout-group',
-        fieldGroup: fieldConfigs.map((config) => {
-            const { field, size = defaultSize, retainSizeOnSmallScreen = defaultRetainSizeOnSmallScreen } = config;
-            let className = `form-flex-${size}`;
-            if (retainSizeOnSmallScreen != false) {
-                className = className + ' form-flex-responsive';
-            }
-            return {
-                ...field,
-                className
-            };
-        })
-    };
-}
-
-function internationalPhoneField({ key, label = '', placeholder = '', required = false }) {
-    const fieldConfig = formlyField({
-        key,
-        type: 'intphone',
-        templateOptions: {
-            label,
-            placeholder,
-            required
-        }
-    });
-    // TODO: Add configuration...
-    return fieldConfig;
-}
-function phoneAndLabelFields({ phoneField: phone, labelField: label }) {
-    return [
-        flexLayoutWrapper([
-            {
-                field: internationalPhoneField({ key: 'phone', ...phone })
-            },
-            {
-                field: textField({
-                    key: 'label',
-                    label: 'Label',
-                    autocomplete: 'phone-label',
-                    ...label
-                })
-            }
-        ])
-    ];
-}
-function phoneAndLabelFieldGroup({ key = 'phone', label = 'Phone Number', required, phoneField, labelField }) {
-    return {
-        key,
-        wrappers: ['section'],
-        templateOptions: {
-            label,
-            required
-        },
-        fieldGroup: phoneAndLabelFields({ phoneField, labelField })
-    };
-}
-function phoneListField({ key = 'phones', label = 'Phone Numbers', repeatSection, required = false, maxPhones = 6, phoneField, labelField }) {
-    return {
-        key,
-        type: 'repeat',
-        wrappers: ['section'],
-        templateOptions: {
-            label,
-            required,
-            repeatSection: repeatSection ?? {
-                addText: 'Add Phone Number',
-                removeText: 'Remove Phone Number'
-            },
-            maxLength: maxPhones
-        },
-        fieldArray: {
-            fieldGroup: phoneAndLabelFields({ phoneField, labelField })
-        }
-    };
-}
-
 const ADDRESS_LINE_MAX_LENGTH = 100;
 function addressFormlyFields() {
     return [
@@ -2765,10 +3454,10 @@ function addressFormlyFields() {
                 field: zipCodeField({})
             }, {
                 field: countryField({})
-            }])
+            }], { size: 1, relative: true })
     ];
 }
-function addressField({ key = 'address', required = false }) {
+function addressField({ key = 'address', required = false } = {}) {
     return {
         key,
         wrappers: ['section'],
@@ -2780,36 +3469,31 @@ function addressField({ key = 'address', required = false }) {
         fieldGroup: addressFormlyFields()
     };
 }
-function addressListField({ key = 'addresses', required = false, maxAddresses = 6 }) {
-    return {
+function addressListField({ key = 'addresses', required = false, maxAddresses = 6 } = {}) {
+    return repeatArrayField({
         key,
-        type: 'repeat',
-        wrappers: ['section'],
-        templateOptions: {
-            label: 'Addresses',
-            placeholder: '',
-            required,
-            repeatSection: {
-                addText: 'Add Address',
-                removeText: 'Remove Address'
-            },
-            maxLength: maxAddresses
-        },
-        fieldArray: {
-            fieldGroup: addressFormlyFields()
-        }
-    };
+        label: 'Addresses',
+        labelForField: 'Address',
+        addText: 'Add Address',
+        removeText: 'Remove Address',
+        maxLength: maxAddresses,
+        repeatFieldGroup: addressFormlyFields()
+    });
 }
 
 class DbxFormFormlyTextFieldModule {
 }
 DbxFormFormlyTextFieldModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxFormFormlyTextFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-DbxFormFormlyTextFieldModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxFormFormlyTextFieldModule, exports: [DbxFormFormlyWrapperModule] });
-DbxFormFormlyTextFieldModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxFormFormlyTextFieldModule, imports: [[], DbxFormFormlyWrapperModule] });
+DbxFormFormlyTextFieldModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxFormFormlyTextFieldModule, imports: [FormlyMaterialModule], exports: [DbxFormFormlyWrapperModule] });
+DbxFormFormlyTextFieldModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxFormFormlyTextFieldModule, imports: [[
+            FormlyMaterialModule
+        ], DbxFormFormlyWrapperModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxFormFormlyTextFieldModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [],
+                    imports: [
+                        FormlyMaterialModule
+                    ],
                     declarations: [],
                     exports: [
                         DbxFormFormlyWrapperModule
@@ -2824,14 +3508,75 @@ function hiddenField({ key, required = false }) {
     });
 }
 
-function addToggleWrapperToField({ fieldConfig, toggleSection = {} }) {
-    fieldConfig.wrappers = concatArraysUnique(fieldConfig.wrappers, ['toggle']);
-    fieldConfig.templateOptions = {
-        ...fieldConfig.templateOptions,
-        toggleSection
-    };
-    return fieldConfig;
-}
+class DbxFormFormlyValueModule {
+}
+DbxFormFormlyValueModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxFormFormlyValueModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+DbxFormFormlyValueModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxFormFormlyValueModule, imports: [CommonModule], exports: [DbxFormFormlyArrayFieldModule,
+        DbxFormFormlyBooleanFieldModule,
+        DbxFormFormlyDateFieldModule,
+        DbxFormFormlyEnumFieldModule,
+        DbxFormFormlyPhoneFieldModule,
+        DbxFormFormlyTextFieldModule] });
+DbxFormFormlyValueModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxFormFormlyValueModule, imports: [[
+            CommonModule
+        ], DbxFormFormlyArrayFieldModule,
+        DbxFormFormlyBooleanFieldModule,
+        DbxFormFormlyDateFieldModule,
+        DbxFormFormlyEnumFieldModule,
+        DbxFormFormlyPhoneFieldModule,
+        DbxFormFormlyTextFieldModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxFormFormlyValueModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule
+                    ],
+                    declarations: [],
+                    exports: [
+                        DbxFormFormlyArrayFieldModule,
+                        DbxFormFormlyBooleanFieldModule,
+                        DbxFormFormlyDateFieldModule,
+                        DbxFormFormlyEnumFieldModule,
+                        DbxFormFormlyPhoneFieldModule,
+                        DbxFormFormlyTextFieldModule
+                    ]
+                }]
+        }] });
+
+class DbxFormFormlyFieldModule {
+}
+DbxFormFormlyFieldModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxFormFormlyFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+DbxFormFormlyFieldModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxFormFormlyFieldModule, imports: [CommonModule], exports: [DbxFormFormlyChecklistItemFieldModule,
+        DbxFormFormlyComponentFieldModule,
+        DbxFormFormlySelectionModule,
+        DbxFormFormlyTextEditorFieldModule,
+        DbxFormFormlyValueModule,
+        DbxFormFormlyWrapperModule] });
+DbxFormFormlyFieldModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxFormFormlyFieldModule, imports: [[
+            CommonModule
+        ], DbxFormFormlyChecklistItemFieldModule,
+        DbxFormFormlyComponentFieldModule,
+        DbxFormFormlySelectionModule,
+        DbxFormFormlyTextEditorFieldModule,
+        DbxFormFormlyValueModule,
+        DbxFormFormlyWrapperModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxFormFormlyFieldModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule
+                    ],
+                    declarations: [],
+                    exports: [
+                        DbxFormFormlyChecklistItemFieldModule,
+                        DbxFormFormlyComponentFieldModule,
+                        DbxFormFormlySelectionModule,
+                        DbxFormFormlyTextEditorFieldModule,
+                        DbxFormFormlyValueModule,
+                        DbxFormFormlyWrapperModule
+                    ]
+                }]
+        }] });
 
 /**
  * Allows a directive to provide a formly context and form.
@@ -2840,10 +3585,8 @@ function ProvideFormlyContext() {
     return [{
             provide: DbxFormlyContext,
             useClass: DbxFormlyContext
-        }, {
-            provide: DbxForm,
-            useExisting: DbxFormlyContext
-        }];
+        },
+        ...ProvideDbxMutableForm(DbxFormlyContext)];
 }
 /**
  * DbxForm Instance that registers a delegate and manages the state of that form/delegate.
@@ -2851,94 +3594,72 @@ function ProvideFormlyContext() {
 class DbxFormlyContext {
     constructor() {
         this.lockSet = new LockSet();
-        this._disabled = false;
-        this._delegate = DbxFormlyContext.EMPTY_DELEGATE;
-        this._streamSubject = new BehaviorSubject(of(DbxFormlyContext.INITIAL_STATE));
-        this._stream$ = this._streamSubject.pipe(mergeMap$1((stream) => stream));
+        this._fields = new BehaviorSubject(undefined);
+        this._initialValue = new BehaviorSubject(undefined);
+        this._disabled = new BehaviorSubject(false);
+        this._delegate = new BehaviorSubject(undefined);
+        this.fields$ = this._fields.pipe(filterMaybe());
+        this.stream$ = this._delegate.pipe(distinctUntilChanged$1(), switchMap$1(x => (x) ? x.stream$ : of(DbxFormlyContext.INITIAL_STATE)), shareReplay$1(1));
     }
     destroy() {
-        this._streamSubject.complete();
-    }
-    get isDestroyed() {
-        return this._streamSubject.isStopped;
+        this.lockSet.destroyOnNextUnlock(() => {
+            this._fields.complete();
+            this._initialValue.complete();
+            this._disabled.complete();
+            this._delegate.complete();
+        });
     }
     setDelegate(delegate) {
-        this._delegate = delegate ?? DbxFormlyContext.EMPTY_DELEGATE;
-        this._streamSubject.next(this._delegate.stream$);
-        this._delegate.setFields(this._fields);
-        this._delegate.setValue(this._initialValue);
-        this._delegate.setDisabled(this._disabled);
+        if (delegate !== this._delegate.value) {
+            if (delegate != null) {
+                delegate.init({
+                    fields: this.fields$,
+                    initialValue: this._initialValue.value,
+                    initialDisabled: this._disabled.value
+                });
+            }
+            this._delegate.next(delegate);
+        }
     }
     clearDelegate(delegate) {
-        if (this._delegate === delegate && !this.isDestroyed) {
+        if (delegate === this._delegate.value) {
             this.setDelegate(undefined);
         }
     }
     get fields() {
-        return this._fields;
+        return this._fields.value;
     }
     set fields(fields) {
-        this._fields = fields;
-        this._delegate.setFields(this._fields);
+        this._fields.next(fields);
     }
     // MARK: FormComponent
-    get isComplete() {
-        return this._delegate.isComplete;
-    }
-    get state() {
-        return this._delegate.state;
-    }
-    get stream$() {
-        return this._stream$;
-    }
-    get value() {
-        return this._delegate.getValue();
+    getValue() {
+        return this._delegate.pipe(filterMaybe(), switchMap$1(x => x.getValue()), shareReplay$1(1));
     }
     setValue(value) {
-        this._initialValue = value;
-        this._delegate.setValue(value);
+        this._initialValue.next(value);
+        if (this._delegate.value) {
+            this._delegate.value.setValue(value);
+        }
     }
     isDisabled() {
-        return this._delegate.isDisabled();
+        return this._disabled.value;
     }
     setDisabled(disabled = true) {
-        this._disabled = disabled;
-        this._delegate.setDisabled(disabled);
+        this._disabled.next(disabled);
     }
     resetForm() {
-        this._delegate.resetForm();
+        if (this._delegate.value) {
+            this._delegate.value.resetForm();
+        }
     }
     forceFormUpdate() {
-        this._delegate.forceFormUpdate();
+        if (this._delegate.value) {
+            this._delegate.value.forceFormUpdate();
+        }
     }
 }
 DbxFormlyContext.INITIAL_STATE = { isComplete: false, state: DbxFormState.INITIALIZING };
-DbxFormlyContext.EMPTY_DELEGATE = {
-    isComplete: false,
-    state: DbxFormState.INITIALIZING,
-    stream$: of(DbxFormlyContext.INITIAL_STATE),
-    setFields(fields) {
-        // Do nothing.
-    },
-    getValue() {
-        return undefined;
-    },
-    setValue(value) {
-        // Do nothing.
-    },
-    resetForm() {
-        // Do nothing.
-    },
-    forceFormUpdate() {
-        // Do nothing.
-    },
-    isDisabled() {
-        return false;
-    },
-    setDisabled(disabled) {
-        // Do nothing.
-    }
-};
 
 /**
  * Abstract component for wrapping a form.
@@ -2958,11 +3679,14 @@ class AbstractFormlyFormDirective {
     }
     // Utility Functions
     getValue() {
-        return this.context.value;
+        return this.context.getValue();
     }
     setValue(value) {
         this.context.setValue(value);
     }
+    resetForm() {
+        this.context.resetForm();
+    }
     clearValue() {
         this.setValue({});
     }
@@ -2996,7 +3720,7 @@ class AbstractAsyncFormlyFormDirective extends AbstractFormlyFormDirective {
         this._fieldsSub = new SubscriptionObject();
     }
     ngOnInit() {
-        this._fieldsSub.subscription = this.fields$.subscribe((fields) => {
+        this._fieldsSub.subscription = this.fields$.pipe(distinctUntilChanged$1()).subscribe((fields) => {
             this.context.fields = fields;
         });
     }
@@ -3014,7 +3738,7 @@ class AbstractConfigAsyncFormlyFormDirective extends AbstractAsyncFormlyFormDire
     constructor() {
         super(...arguments);
         this._config = new BehaviorSubject(undefined);
-        this.config$ = this._config.asObservable();
+        this.config$ = this._config.pipe(filterMaybe(), shareReplay$1(1));
     }
     get config() {
         return this._config.value;
@@ -3035,54 +3759,91 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImpor
                 type: Input
             }] } });
 
-class DbxFormlyComponent extends AbstractSubscriptionDirective {
-    constructor(context, ngZone) {
+/**
+ * Provides an DbxFormlyContext and has an input for fields.
+ */
+class DbxFormlyFieldsContextDirective extends AbstractAsyncFormlyFormDirective {
+    constructor() {
+        super(...arguments);
+        this._fields = new BehaviorSubject(undefined);
+        this.fields$ = this._fields.asObservable();
+    }
+    get fields() {
+        return this._fields.value;
+    }
+    set fields(fields) {
+        this._fields.next(fields);
+    }
+    ngOnDestroy() {
+        super.ngOnDestroy();
+        this._fields.complete();
+    }
+}
+DbxFormlyFieldsContextDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxFormlyFieldsContextDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+DbxFormlyFieldsContextDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.0", type: DbxFormlyFieldsContextDirective, selector: "[dbxFormlyFields]", inputs: { fields: ["dbxFormlyFields", "fields"] }, providers: ProvideFormlyContext(), usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxFormlyFieldsContextDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[dbxFormlyFields]',
+                    providers: ProvideFormlyContext()
+                }]
+        }], propDecorators: { fields: [{
+                type: Input,
+                args: ['dbxFormlyFields']
+            }] } });
+
+/**
+ * Used for rending a form from a DbxFormlyContext.
+ */
+class DbxFormlyFormComponent extends AbstractSubscriptionDirective {
+    constructor(context) {
         super();
         this.context = context;
-        this.ngZone = ngZone;
-        this._changesCount = 0;
-        this._fields = [];
+        this._fields = new BehaviorSubject(undefined);
         this._events = new BehaviorSubject({ isComplete: false, state: DbxFormState.INITIALIZING });
+        this._reset = new BehaviorSubject(new Date());
+        this._forceUpdate = new Subject();
         this.form = new FormGroup({});
         this.model = {};
         this.options = {};
+        this.fields$ = this._fields.pipe(switchMapMaybeObs(), distinctUntilChanged$1(), shareReplay$1(1));
+        this.stream$ = this._reset.pipe(switchMap$1((lastResetAt) => this.form.valueChanges.pipe(startWith(0), distinctUntilChanged$1(), throttleTime$1(50, undefined, { leading: true, trailing: true }), scanCount(), map$1((changesSinceLastResetCount) => {
+            const isReset = changesSinceLastResetCount === 1;
+            const complete = this.form.valid;
+            const nextState = {
+                isComplete: complete,
+                state: (isReset) ? DbxFormState.RESET : DbxFormState.USED,
+                untouched: this.form.untouched,
+                pristine: this.form.pristine,
+                changesCount: changesSinceLastResetCount,
+                lastResetAt,
+                isDisabled: this.disabled
+            };
+            return nextState;
+        }))), shareReplay$1(1));
     }
     ngOnInit() {
         this.context.setDelegate(this);
-        this.sub = this.form.valueChanges.pipe(startWith$1(this.form.value), distinctUntilChanged(), debounceTime(50)).subscribe((_) => this._updateForChange());
     }
     ngOnDestroy() {
         this.context.lockSet.onNextUnlock(() => {
             super.ngOnDestroy();
             this.context.clearDelegate(this);
             this._events.complete();
+            this._fields.complete();
+            this._reset.complete();
+            this._forceUpdate.complete();
         });
     }
-    get fields() {
-        return this._fields;
-    }
     // MARK: Delegate
-    get isComplete() {
-        return this._events.value.isComplete;
-    }
-    get state() {
-        return this._events.value.state;
-    }
-    get stream$() {
-        return this._events.asObservable();
-    }
-    setFields(fields) {
-        this._fields = fields;
+    init(initialize) {
+        this._fields.next(initialize.fields);
     }
     getValue() {
-        return this.form.value; // this.model
+        return of(this.form.value);
     }
     setValue(value) {
-        /*
-        if (value === this.model) {
-          return; // Ignore the same value being set.
-        }
-        */
+        // console.log('set value: ', value);
         this.model = cloneDeep(value);
         if (this.options.updateInitialValue) {
             this.options.updateInitialValue();
@@ -3091,8 +3852,6 @@ class DbxFormlyComponent extends AbstractSubscriptionDirective {
         // Re-mark as untouched and pristine.
         this.form.markAsUntouched();
         this.form.markAsPristine();
-        this._lastResetAt = new Date();
-        this._changesCount = 0;
         // After updating the value, if the form is still untouched mark it as pristine again.
         // Sometimes the values get marked as changed and break pristine before a user has time to interact.
         setTimeout(() => {
@@ -3106,60 +3865,52 @@ class DbxFormlyComponent extends AbstractSubscriptionDirective {
             this.options.resetModel();
         }
     }
-    isDisabled() {
+    get disabled() {
         return this.form.disabled;
     }
     setDisabled(disabled = true) {
-        // console.log('setting disabled: ', disabled);
-        if (disabled) {
-            this.form.disable();
-        }
-        else {
-            this.form.enable();
+        if (disabled !== this.disabled) {
+            if (disabled) {
+                this.form.disable({ emitEvent: true });
+            }
+            else {
+                this.form.enable({ emitEvent: true });
+            }
         }
     }
     // MARK: Update
     forceFormUpdate() {
-        this._updateForChange();
-    }
-    _updateForChange() {
-        const complete = this.form.valid;
-        this._changesCount += 1;
-        const nextState = {
-            isComplete: complete,
-            state: (complete) ? DbxFormState.COMPLETE : DbxFormState.INCOMPLETE,
-            untouched: this.form.untouched,
-            pristine: this.form.pristine,
-            changesCount: this._changesCount,
-            lastResetAt: this._lastResetAt
-        };
-        this._events.next(nextState);
+        this._forceUpdate.next();
     }
 }
-DbxFormlyComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxFormlyComponent, deps: [{ token: DbxFormlyContext }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-DbxFormlyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.0", type: DbxFormlyComponent, selector: "dbx-formly", exportAs: ["formly"], usesInheritance: true, ngImport: i0, template: `
+DbxFormlyFormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxFormlyFormComponent, deps: [{ token: DbxFormlyContext }], target: i0.ɵɵFactoryTarget.Component });
+DbxFormlyFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.0", type: DbxFormlyFormComponent, selector: "dbx-formly", host: { classAttribute: "dbx-formly" }, providers: ProvideDbxMutableForm(DbxFormlyFormComponent), exportAs: ["formly"], usesInheritance: true, ngImport: i0, template: `
     <form [formGroup]="form" class="dbx-formly">
-      <formly-form [form]="form" [fields]="fields" [model]="model"></formly-form>
+      <formly-form [form]="form" [fields]="(fields$ | async) ?? []" [model]="model"></formly-form>
     </form>
-  `, isInline: true, components: [{ type: i1$4.FormlyForm, selector: "formly-form", inputs: ["form", "model", "fields", "options"], outputs: ["modelChange"] }], directives: [{ type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxFormlyComponent, decorators: [{
+  `, isInline: true, components: [{ type: i1$4.FormlyForm, selector: "formly-form", inputs: ["form", "model", "fields", "options"], outputs: ["modelChange"] }], directives: [{ type: i4$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i4$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i4$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }], pipes: { "async": i5.AsyncPipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxFormlyFormComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'dbx-formly',
                     exportAs: 'formly',
                     template: `
     <form [formGroup]="form" class="dbx-formly">
-      <formly-form [form]="form" [fields]="fields" [model]="model"></formly-form>
+      <formly-form [form]="form" [fields]="(fields$ | async) ?? []" [model]="model"></formly-form>
     </form>
   `,
-                    // TODO: styleUrls: ['./form.scss'],
+                    providers: ProvideDbxMutableForm(DbxFormlyFormComponent),
+                    host: {
+                        'class': 'dbx-formly'
+                    }
                 }]
-        }], ctorParameters: function () { return [{ type: DbxFormlyContext }, { type: i0.NgZone }]; } });
+        }], ctorParameters: function () { return [{ type: DbxFormlyContext }]; } });
 
 class DbxFormlyModule {
 }
 DbxFormlyModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxFormlyModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-DbxFormlyModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxFormlyModule, declarations: [DbxFormlyComponent], imports: [CommonModule,
+DbxFormlyModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxFormlyModule, declarations: [DbxFormlyFormComponent,
+        DbxFormlyFieldsContextDirective], imports: [CommonModule,
         FormsModule,
         ReactiveFormsModule,
         FormlyModule,
@@ -3167,9 +3918,9 @@ DbxFormlyModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version
         // Modules (?)
         FormsModule,
         ReactiveFormsModule,
-        // DbxFormWrapperModule, // todo!
         // Directives
-        DbxFormlyComponent] });
+        DbxFormlyFormComponent,
+        DbxFormlyFieldsContextDirective] });
 DbxFormlyModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxFormlyModule, imports: [[
             CommonModule,
             FormsModule,
@@ -3191,17 +3942,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImpor
                         FormlyMatToggleModule
                     ],
                     declarations: [
-                        DbxFormlyComponent,
-                        // FormComponentFieldComponent
+                        DbxFormlyFormComponent,
+                        DbxFormlyFieldsContextDirective
                     ],
                     exports: [
                         // Modules (?)
                         FormsModule,
                         ReactiveFormsModule,
-                        // DbxFormWrapperModule, // todo!
                         // Directives
-                        DbxFormlyComponent,
-                        // FormComponentFieldComponent
+                        DbxFormlyFormComponent,
+                        DbxFormlyFieldsContextDirective
                     ]
                 }]
         }] });
@@ -3281,9 +4031,29 @@ function IsInRange(min = Number.MIN_SAFE_INTEGER, max = Number.MAX_SAFE_INTEGER)
     };
 }
 
+class DbxFormExtensionModule {
+}
+DbxFormExtensionModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxFormExtensionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+DbxFormExtensionModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxFormExtensionModule, exports: [DbxFormModule,
+        DbxFormlyModule,
+        DbxFormFormlyFieldModule] });
+DbxFormExtensionModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxFormExtensionModule, imports: [DbxFormModule,
+        DbxFormlyModule,
+        DbxFormFormlyFieldModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxFormExtensionModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    exports: [
+                        DbxFormModule,
+                        DbxFormlyModule,
+                        DbxFormFormlyFieldModule
+                    ]
+                }]
+        }] });
+
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { ADDRESS_CITY_MAX_LENGTH, ADDRESS_COUNTRY_MAX_LENGTH, ADDRESS_LINE_MAX_LENGTH, ADDRESS_STATE_MAX_LENGTH, ADDRESS_ZIP_MAX_LENGTH, APP_ACTION_FORM_DISABLED_KEY, AbstractAsyncFormlyFormDirective, AbstractConfigAsyncFormlyFormDirective, AbstractDbxPickableItemFieldDirective, AbstractDbxSearchableValueFieldDirective, AbstractFormComponentFieldWrappedComponent, AbstractFormExpandableSectionWrapperDirective, AbstractFormlyFormDirective, AbstractSyncFormlyFormDirective, AutoTouchFieldWrapperComponent, ChecklistItemFieldDataSetBuilder, DEFAULT_HAS_VALUE_FN, DEFAULT_PREFERRED_COUNTRIES, DOMAIN_NAME_REGEX, DateTimeFieldTimeMode, DbxActionFormDirective, DbxChecklistItemContentComponent, DbxChecklistItemFieldComponent, DbxDateTimeFieldComponent, DbxDefaultChecklistItemFieldDisplayComponent, DbxDefaultSearchableAnchorFieldDisplayComponent, DbxDefaultSearchableFieldDisplayComponent, DbxForm, DbxFormFormlyArrayFieldModule, DbxFormFormlyBooleanFieldModule, DbxFormFormlyChecklistItemFieldModule, DbxFormFormlyComponentFieldModule, DbxFormFormlyDateFieldModule, DbxFormFormlyPhoneFieldModule, DbxFormFormlyPickableFieldModule, DbxFormFormlySearchableFieldModule, DbxFormFormlyTextFieldModule, DbxFormFormlyWrapperModule, DbxFormLayoutModule, DbxFormLoadingPairSourceDirective, DbxFormModule, DbxFormRepeatTypeComponent, DbxFormSourceDirective, DbxFormSpacerComponent, DbxFormState, DbxFormValueChangesDirective, DbxFormlyActionModule, DbxFormlyComponent, DbxFormlyContext, DbxFormlyModule, DbxInternationalPhoneFieldComponent, DbxPickableChipFieldComponent, DbxPickableListFieldComponent, DbxSearchableChipFieldComponent, DbxSearchableFieldAutocompleteItemComponent, DbxSearchableTextFieldComponent, FormComponentFieldComponent, FormExpandableSectionWrapperComponent, FormFlexWrapperComponent, FormInfoSectionWrapperComponent, FormSectionWrapperComponent, FormSubsectionWrapperComponent, FormToggleSectionWrapperComponent, IsDomain, IsInRange, IsTruthy, LABEL_STRING_MAX_LENGTH, PHONE_LABEL_MAX_LENGTH, ProvideDbxForm, ProvideFormlyContext, SEARCH_STRING_MAX_LENGTH, TAKE_NEXT_UPCOMING_TIME_CONFIG_OBS, addToggleWrapperToField, addressField, addressFormlyFields, addressListField, checkboxField, checklistItemField, chipTextField, cityField, componentField, countryField, dateTimeField, disableFormlyFieldAutofill, emailField, flexLayoutWrapper, formlyField, hiddenField, internationalPhoneField, makeMetaFilterSearchableFieldValueDisplayFn, nameField, phoneAndLabelFieldGroup, phoneAndLabelFields, phoneListField, searchableChipField, searchableTextField, stateField, staticEnumField, textAreaField, textField, timeOnlyField, toggleField, zipCodeField };
+export { ADDRESS_CITY_MAX_LENGTH, ADDRESS_COUNTRY_MAX_LENGTH, ADDRESS_LINE_MAX_LENGTH, ADDRESS_STATE_MAX_LENGTH, ADDRESS_ZIP_MAX_LENGTH, APP_ACTION_FORM_DISABLED_KEY, AbstractAsyncFormlyFormDirective, AbstractConfigAsyncFormlyFormDirective, AbstractDbxPickableItemFieldDirective, AbstractDbxSearchableFieldDisplayDirective, AbstractDbxSearchableValueFieldDirective, AbstractFormComponentFieldWrappedComponent, AbstractFormExpandableSectionWrapperDirective, AbstractFormlyFormDirective, AbstractSyncFormlyFormDirective, AutoTouchFieldWrapperComponent, ChecklistItemFieldDataSetBuilder, DBX_SEARCHABLE_FIELD_COMPONENT_DATA, DEFAULT_HAS_VALUE_FN, DEFAULT_PREFERRED_COUNTRIES, DOMAIN_NAME_REGEX, DateTimeFieldTimeMode, DbxActionFormDirective, DbxActionFormSafetyDirective, DbxChecklistItemContentComponent, DbxChecklistItemFieldComponent, DbxDateTimeFieldComponent, DbxDefaultChecklistItemFieldDisplayComponent, DbxDefaultSearchableFieldDisplayComponent, DbxForm, DbxFormActionModule, DbxFormActionTransitionModule, DbxFormExpandWrapperComponent, DbxFormExtensionModule, DbxFormFlexWrapperComponent, DbxFormFormlyArrayFieldModule, DbxFormFormlyBooleanFieldModule, DbxFormFormlyChecklistItemFieldModule, DbxFormFormlyComponentFieldModule, DbxFormFormlyDateFieldModule, DbxFormFormlyEnumFieldModule, DbxFormFormlyFieldModule, DbxFormFormlyPhoneFieldModule, DbxFormFormlyPickableFieldModule, DbxFormFormlySearchableFieldModule, DbxFormFormlySelectionModule, DbxFormFormlyTextEditorFieldModule, DbxFormFormlyTextFieldModule, DbxFormFormlyValueModule, DbxFormFormlyWrapperModule, DbxFormInfoWrapperComponent, DbxFormIoModule, DbxFormLayoutModule, DbxFormLoadingSourceDirective, DbxFormModule, DbxFormRepeatArrayTypeComponent, DbxFormSectionWrapperComponent, DbxFormSourceDirective, DbxFormSpacerComponent, DbxFormState, DbxFormSubsectionWrapperComponent, DbxFormToggleWrapperComponent, DbxFormValueChangesDirective, DbxFormlyContext, DbxFormlyFieldsContextDirective, DbxFormlyFormComponent, DbxFormlyModule, DbxMutableForm, DbxPhoneFieldComponent, DbxPickableChipListFieldComponent, DbxPickableListFieldComponent, DbxPickableListFieldItemListComponent, DbxPickableListFieldItemListViewComponent, DbxPickableListFieldItemListViewItemComponent, DbxSearchableChipFieldComponent, DbxSearchableFieldAutocompleteItemComponent, DbxSearchableTextFieldComponent, DbxTextEditorFieldComponent, EXPANDABLE_WRAPPER_KEY, FLEX_WRAPPER_KEY, FormComponentFieldComponent, INFO_WRAPPER_KEY, INVALID_PHONE_NUMBER_MESSAGE, IsDomain, IsInRange, IsTruthy, LABEL_STRING_MAX_LENGTH, MAX_LENGTH_VALIDATION_MESSAGE, MAX_VALIDATION_MESSAGE, MIN_LENGTH_VALIDATION_MESSAGE, MIN_VALIDATION_MESSAGE, PHONE_LABEL_MAX_LENGTH, ProvideDbxForm, ProvideDbxMutableForm, ProvideFormlyContext, REQUIRED_VALIDATION_MESSAGE, SEARCH_STRING_MAX_LENGTH, SECTION_WRAPPER_KEY, STYLE_WRAPPER_KEY, SUBSECTION_WRAPPER_KEY, TAKE_NEXT_UPCOMING_TIME_CONFIG_OBS, TOGGLE_WRAPPER_KEY, addWrapperToFormlyFieldConfig, addressField, addressFormlyFields, addressListField, checkIsFieldFlexLayoutGroupFieldConfig, checkboxField, checklistItemField, chipTextField, cityField, componentField, countryField, dateTimeField, defaultValidationMessages, disableFormlyFieldAutofillAttributes, emailField, expandWrapper, filterPickableItemFieldValuesByLabel, flexLayoutWrapper, formlyField, hiddenField, infoWrapper, makeMetaFilterSearchableFieldValueDisplayFn, maxLengthValidationMessage, maxValidationMessage, minLengthValidationMessage, minValidationMessage, nameField, phoneAndLabelSectionField, phoneField, phoneListField, pickableItemChipField, pickableItemListField, repeatArrayField, searchableChipField, searchableStringChipField, searchableTextField, sectionWrapper, sortPickableItemsByLabel, stateField, staticEnumField, styleWrapper, subsectionWrapper, templateOptionsForFieldConfig, templateOptionsValueForFieldConfig, textAreaField, textEditorField, textField, timeOnlyField, toggleField, toggleWrapper, wrappedPhoneAndLabelField, zipCodeField };
 //# sourceMappingURL=dereekb-dbx-form.mjs.map