@dereekb/dbx-form 1.2.0 → 3.0.0

package/fesm2015/dereekb-dbx-form.mjs

@@ -3,16 +3,16 @@ import { forwardRef, Directive, Host, Input, NgModule, EventEmitter, Output, Com
 import * as i5 from '@angular/common';
 import { CommonModule } from '@angular/common';
 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 { DbxActionTransitionSafetyDirective, DbxTextModule, DbxLoadingModule, DbxFlexLayoutModule, DbxSectionLayoutModule, DbxRouterAnchorModule, AbstractDbxSelectionListWrapperDirective, DEFAULT_LIST_WRAPPER_DIRECTIVE_TEMPLATE, AbstractDbxSelectionListViewDirective, addConfigToValueListItems, ProvideDbxListView, AbstractDbxValueListViewItemComponent, 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 { BehaviorSubject, switchMap, first, exhaustMap, of, catchError, delay, filter, combineLatest, map, distinctUntilChanged, mergeMap, shareReplay as shareReplay$1, startWith, debounceTime, Subject, skipWhile, interval, merge, throttleTime as throttleTime$1, scan } from 'rxjs';
+import { LockSet, SubscriptionObject, asObservable, loadingStateHasFinishedLoading, switchMapMaybeObs, filterMaybe, switchMapMaybeDefault, SimpleLoadingContext, beginLoading, mapLoadingStateResults, successResult, ListLoadingStateContextInstance, isListLoadingStateEmpty, LoadingStateContextInstance, skipFirstMaybe, asyncPusherCache, scanCount } from '@dereekb/rxjs';
 import * as i2 from '@dereekb/dbx-core';
-import { AbstractSubscriptionDirective, safeDetectChanges, DbxInjectedComponentModule, DbxDatePipeModule, mergeDbxInjectedComponentConfigs, tapDetectChanges } from '@dereekb/dbx-core';
+import { AbstractSubscriptionDirective, safeDetectChanges, DbxInjectionComponentModule, DbxDatePipeModule, mergeDbxInjectionComponentConfigs, tapDetectChanges } from '@dereekb/dbx-core';
 import * as i3 from '@uirouter/core';
 import * as i4 from '@angular/material/dialog';
 import { MatDialogModule } from '@angular/material/dialog';
+import { distinctUntilChanged as distinctUntilChanged$1, shareReplay, map as map$1, delay as delay$1, debounceTime as debounceTime$1, filter as filter$1, switchMap as switchMap$1, startWith as startWith$1, tap, throttleTime, first as first$1 } from 'rxjs/operators';
 import * as i1$4 from '@ngx-formly/core';
 import { FieldType, FieldWrapper, FormlyModule, FieldArrayType } from '@ngx-formly/core';
 import * as i1 from '@angular/material/checkbox';
@@ -27,7 +27,7 @@ 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 { objectIsEmpty, mergeObjects, filterFromPOJO, addPlusPrefixToNumber, convertMaybeToArray, makeValuesGroupMap, findUnique, mergeIntoArray, lastValue, separateValues, arrayToMap, getValueFromObjectOrGetter } from '@dereekb/util';
+import { objectIsEmpty, mergeObjects, filterFromPOJO, addPlusPrefixToNumber, convertMaybeToArray, makeValuesGroupMap, findUnique, mergeIntoArray, lastValue, separateValues, arrayToMap, getValueFromGetter, dateFromLogicalDate, KeyValueTypleValueFilter, valuesFromPOJO, allObjectsAreEqual, capitalizeFirstLetter, BooleanStringKeyArrayUtilityInstance } from '@dereekb/util';
 import * as i1$3 from '@angular/material/slide-toggle';
 import { MatSlideToggleModule } from '@angular/material/slide-toggle';
 import * as i2$2 from '@angular/flex-layout/extended';
@@ -38,14 +38,14 @@ import { MatChipsModule } from '@angular/material/chips';
 import * as i4$2 from '@angular/material/divider';
 import { MatDividerModule } from '@angular/material/divider';
 import * as i6$1 from '@angular/material/input';
-import { MatInputModule, MatInput } from '@angular/material/input';
+import { MatInputModule } from '@angular/material/input';
 import * as i4$3 from '@angular/material/autocomplete';
 import { MatAutocompleteModule } from '@angular/material/autocomplete';
 import { MatListModule } from '@angular/material/list';
 import * as i3$2 from '@angular/material/form-field';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { ENTER, COMMA } from '@angular/cdk/keycodes';
-import { skipUntilTimeElapsedAfterLastEmission, guessCurrentTimezone, toReadableTimeString, utcDayForDate, readableTimeStringToDate, DateTimeMinuteInstance } from '@dereekb/date';
+import { skipUntilTimeElapsedAfterLastEmission, guessCurrentTimezone, toReadableTimeString, utcDayForDate, readableTimeStringToDate, DateTimeMinuteInstance, toLocalReadableTimeString } 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';
@@ -65,10 +65,20 @@ import { FormlyMatToggleModule } from '@ngx-formly/material/toggle';
  */
 var DbxFormState;
 (function (DbxFormState) {
+    /**
+     * Form is not finished initializing.
+     */
     DbxFormState[DbxFormState["INITIALIZING"] = -1] = "INITIALIZING";
+    /**
+     * Form is initialized but has not yet used.
+     */
     DbxFormState[DbxFormState["RESET"] = 0] = "RESET";
+    /**
+     * Form has been used.
+     */
     DbxFormState[DbxFormState["USED"] = 1] = "USED";
 })(DbxFormState || (DbxFormState = {}));
+const DEFAULT_FORM_DISABLED_KEY = 'dbx_form_disabled';
 /**
  * Form that has an event stream, value, and state items.
  */
@@ -86,7 +96,7 @@ function ProvideDbxMutableForm(sourceType) {
     ];
 }
 
-const APP_ACTION_FORM_DISABLED_KEY = 'actionForm';
+const APP_ACTION_FORM_DISABLED_KEY = 'dbx_action_form';
 /**
  * Used with an action to bind a form to an action as it's value source.
  *
@@ -99,16 +109,25 @@ class DbxActionFormDirective {
         this.form = form;
         this.source = source;
         this.lockSet = new LockSet();
+        this._formDisabledWhileWorking = new BehaviorSubject(true);
         this._triggeredSub = new SubscriptionObject();
         this._isCompleteSub = new SubscriptionObject();
+        this._isWorkingSub = new SubscriptionObject();
         if (form.lockSet) {
             this.lockSet.addChildLockSet(form.lockSet, 'form');
         }
         this.lockSet.addChildLockSet(source.lockSet, 'source');
     }
+    get formDisabledOnWorking() {
+        return this._formDisabledWhileWorking.value;
+    }
+    set formDisabledOnWorking(formDisabledOnWorking) {
+        this._formDisabledWhileWorking.next(Boolean(formDisabledOnWorking !== null && formDisabledOnWorking !== void 0 ? formDisabledOnWorking : true));
+    }
     ngOnInit() {
         // Pass data from the form to the source when triggered.
-        this._triggeredSub.subscription = this.source.triggered$.pipe(switchMap(() => this.form.stream$.pipe(first(), exhaustMap(({ isComplete }) => {
+        this._triggeredSub.subscription = this.source.triggered$.pipe(switchMap(() => this.form.stream$.pipe(first(), exhaustMap((stream) => {
+            const { isComplete } = stream;
             const doNothing = {}; // nothing, form not complete
             let obs;
             if (isComplete) {
@@ -119,7 +138,7 @@ class DbxActionFormDirective {
                     else {
                         return of(doNothing);
                     }
-                }), catchError((error) => of({ error })))));
+                }), catchError((error) => of({ reject: error })))));
             }
             else {
                 obs = of(doNothing);
@@ -137,7 +156,7 @@ class DbxActionFormDirective {
             }
         });
         // Update the enabled/disabled state
-        this._isCompleteSub.subscription = this.form.stream$.pipe(filter((x) => x.state !== DbxFormState.INITIALIZING), switchMap((event) => {
+        this._isCompleteSub.subscription = this.form.stream$.pipe(delay(0), filter((x) => x.state !== DbxFormState.INITIALIZING), switchMap((event) => {
             return this.form.getValue().pipe(first(), exhaustMap((value) => {
                 var _a, _b;
                 // Use both changes count and whether or not something was in the past to guage whether or not the item has been touched.
@@ -148,7 +167,7 @@ class DbxActionFormDirective {
                 let validatorObs;
                 const initialIsValidCheck = event.isComplete;
                 if (initialIsValidCheck) {
-                    validatorObs = (this.appActionFormValidator) ? this.appActionFormValidator(value) : of(true);
+                    validatorObs = (this.dbxActionFormValidator) ? this.dbxActionFormValidator(value) : of(true);
                 }
                 else {
                     validatorObs = of(false);
@@ -156,7 +175,7 @@ class DbxActionFormDirective {
                 let modifiedObs;
                 const isConsideredModified = (event.pristine === false && isProbablyTouched);
                 if (isConsideredModified) {
-                    modifiedObs = (this.appActionFormModified) ? this.appActionFormModified(value) : of(true);
+                    modifiedObs = (this.dbxActionFormModified) ? this.dbxActionFormModified(value) : of(true);
                 }
                 else {
                     modifiedObs = of(false);
@@ -173,19 +192,24 @@ class DbxActionFormDirective {
             // Disable if the form is not yet complete/valid.
             this.source.enable(APP_ACTION_FORM_DISABLED_KEY, valid);
         });
-        // TODO: Watch the working state and stop allowing input on working..?
-        // TODO: Watch the disabled state for when another disabled key disables this form.
+        // Watch the working state and disable form while working
+        this._isWorkingSub.subscription = combineLatest([this.source.isWorking$, this._formDisabledWhileWorking]).pipe(map(([isWorking, lockOnWorking]) => lockOnWorking && isWorking), distinctUntilChanged()).subscribe((disable) => {
+            this.form.setDisabled(APP_ACTION_FORM_DISABLED_KEY, disable);
+        });
     }
     ngOnDestroy() {
         this.source.enable(APP_ACTION_FORM_DISABLED_KEY);
         this.lockSet.destroyOnNextUnlock(() => {
             this._triggeredSub.destroy();
             this._isCompleteSub.destroy();
+            this._isWorkingSub.destroy();
+            this._formDisabledWhileWorking.complete();
+            this.form.setDisabled(APP_ACTION_FORM_DISABLED_KEY, false);
         });
     }
     preCheckReadyValue(value) {
-        let validatorObs = (this.appActionFormValidator) ? this.appActionFormValidator(value) : of(true);
-        let modifiedObs = (this.appActionFormModified) ? this.appActionFormModified(value) : of(true);
+        let validatorObs = (this.dbxActionFormValidator) ? this.dbxActionFormValidator(value) : of(true);
+        let modifiedObs = (this.dbxActionFormModified) ? this.dbxActionFormModified(value) : of(true);
         return combineLatest([
             validatorObs,
             modifiedObs
@@ -195,9 +219,9 @@ class DbxActionFormDirective {
         return of({ value });
     }
 }
-DbxActionFormDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", 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.4", type: DbxActionFormDirective, selector: "[dbxActionForm]", inputs: { appActionFormValidator: "appActionFormValidator", appActionFormModified: "appActionFormModified" }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxActionFormDirective, decorators: [{
+DbxActionFormDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxActionFormDirective, deps: [{ token: DbxMutableForm, host: true }, { token: i2.DbxActionContextStoreSourceInstance }], target: i0.ɵɵFactoryTarget.Directive });
+DbxActionFormDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.2", type: DbxActionFormDirective, selector: "[dbxActionForm]", inputs: { dbxActionFormValidator: "dbxActionFormValidator", dbxActionFormModified: "dbxActionFormModified", formDisabledOnWorking: "formDisabledOnWorking" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxActionFormDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[dbxActionForm]'
@@ -205,10 +229,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImpor
         }], ctorParameters: function () {
         return [{ type: DbxMutableForm, decorators: [{
                         type: Host
-                    }] }, { type: i2.ActionContextStoreSourceInstance }];
-    }, propDecorators: { appActionFormValidator: [{
+                    }] }, { type: i2.DbxActionContextStoreSourceInstance }];
+    }, propDecorators: { dbxActionFormValidator: [{
+                type: Input
+            }], dbxActionFormModified: [{
                 type: Input
-            }], appActionFormModified: [{
+            }], formDisabledOnWorking: [{
                 type: Input
             }] } });
 
@@ -218,18 +244,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImpor
  * NOTE: Only works with UIRouter
  */
 class DbxActionFormSafetyDirective extends DbxActionTransitionSafetyDirective {
-    constructor(appActionForm, source, transitionService, viewContainerRef, dialog) {
+    constructor(dbxActionForm, source, transitionService, viewContainerRef, dialog) {
         super(source, transitionService, viewContainerRef, dialog);
-        this.appActionForm = appActionForm;
+        this.dbxActionForm = dbxActionForm;
     }
     _handleOnBeforeTransition(transition) {
-        this.appActionForm.form.forceFormUpdate();
+        this.dbxActionForm.form.forceFormUpdate();
         return super._handleOnBeforeTransition(transition);
     }
 }
-DbxActionFormSafetyDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", 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.4", type: DbxActionFormSafetyDirective, selector: "[dbxActionFormSafety]", inputs: { inputSafetyType: ["dbxActionFormSafety", "inputSafetyType"] }, usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxActionFormSafetyDirective, decorators: [{
+DbxActionFormSafetyDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxActionFormSafetyDirective, deps: [{ token: DbxActionFormDirective, host: true }, { token: i2.DbxActionContextStoreSourceInstance }, { token: i3.TransitionService }, { token: i0.ViewContainerRef }, { token: i4.MatDialog }], target: i0.ɵɵFactoryTarget.Directive });
+DbxActionFormSafetyDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.2", type: DbxActionFormSafetyDirective, selector: "[dbxActionFormSafety]", inputs: { inputSafetyType: ["dbxActionFormSafety", "inputSafetyType"] }, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxActionFormSafetyDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[dbxActionFormSafety]',
@@ -237,7 +263,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImpor
         }], ctorParameters: function () {
         return [{ type: DbxActionFormDirective, decorators: [{
                         type: Host
-                    }] }, { type: i2.ActionContextStoreSourceInstance }, { type: i3.TransitionService }, { type: i0.ViewContainerRef }, { type: i4.MatDialog }];
+                    }] }, { type: i2.DbxActionContextStoreSourceInstance }, { type: i3.TransitionService }, { type: i0.ViewContainerRef }, { type: i4.MatDialog }];
     }, propDecorators: { inputSafetyType: [{
                 type: Input,
                 args: ['dbxActionFormSafety']
@@ -245,12 +271,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImpor
 
 class DbxFormActionTransitionModule {
 }
-DbxFormActionTransitionModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxFormActionTransitionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-DbxFormActionTransitionModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxFormActionTransitionModule, declarations: [DbxActionFormSafetyDirective], imports: [CommonModule], exports: [DbxActionFormSafetyDirective] });
-DbxFormActionTransitionModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxFormActionTransitionModule, imports: [[
+DbxFormActionTransitionModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxFormActionTransitionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+DbxFormActionTransitionModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxFormActionTransitionModule, declarations: [DbxActionFormSafetyDirective], imports: [CommonModule], exports: [DbxActionFormSafetyDirective] });
+DbxFormActionTransitionModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxFormActionTransitionModule, imports: [[
             CommonModule
         ]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxFormActionTransitionModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxFormActionTransitionModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -267,14 +293,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImpor
 
 class DbxFormActionModule {
 }
-DbxFormActionModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxFormActionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-DbxFormActionModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxFormActionModule, declarations: [DbxActionFormDirective], imports: [CommonModule,
+DbxFormActionModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxFormActionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+DbxFormActionModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxFormActionModule, declarations: [DbxActionFormDirective], imports: [CommonModule,
         MatDialogModule], exports: [DbxActionFormDirective] });
-DbxFormActionModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxFormActionModule, imports: [[
+DbxFormActionModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxFormActionModule, imports: [[
             CommonModule,
             MatDialogModule
         ]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxFormActionModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxFormActionModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -290,6 +316,68 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImpor
                 }]
         }] });
 
+function dbxFormSourceObservable(form, inputObs, mode$) {
+    const observable = asObservable(inputObs);
+    return combineLatest([
+        observable.pipe(distinctUntilChanged()),
+        mode$.pipe(distinctUntilChanged())
+    ]).pipe(switchMap(([value, mode]) => form.stream$.pipe(
+    // wait for the form to finish initializing.
+    filter((x) => x.state !== DbxFormState.INITIALIZING), 
+    // if mode is reset, then filter out changes until the form is reset again.
+    filter((x) => ((mode === 'reset') ? (x.state === DbxFormState.RESET) : true)), first(), map((_) => value))));
+}
+/**
+ * Used with a FormComponent to set the value based on the input value.
+ */
+class DbxFormSourceDirective extends AbstractSubscriptionDirective {
+    constructor(form) {
+        super();
+        this.form = form;
+        this._mode = new BehaviorSubject('reset');
+    }
+    get mode() {
+        return this._mode.value;
+    }
+    set mode(mode) {
+        this._mode.next(mode);
+    }
+    set obs(obs) {
+        this.setObs(obs);
+    }
+    setObs(inputObs) {
+        let subscription;
+        if (inputObs) {
+            subscription = dbxFormSourceObservable(this.form, inputObs, this._mode).subscribe((x) => {
+                this.form.setValue(x);
+            });
+        }
+        this.sub = subscription;
+    }
+    ngOnDestroy() {
+        super.ngOnDestroy();
+        this._mode.complete();
+    }
+}
+DbxFormSourceDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxFormSourceDirective, deps: [{ token: DbxMutableForm, host: true }], target: i0.ɵɵFactoryTarget.Directive });
+DbxFormSourceDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.2", type: DbxFormSourceDirective, selector: "[dbxFormSource]", inputs: { mode: ["dbxFormSourceMode", "mode"], obs: ["dbxFormSource", "obs"] }, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxFormSourceDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[dbxFormSource]'
+                }]
+        }], ctorParameters: function () {
+        return [{ type: DbxMutableForm, decorators: [{
+                        type: Host
+                    }] }];
+    }, propDecorators: { mode: [{
+                type: Input,
+                args: ['dbxFormSourceMode']
+            }], obs: [{
+                type: Input,
+                args: ['dbxFormSource']
+            }] } });
+
 /**
  * Used with a FormComponent to set the value from a LoadingState when the value is available.
  */
@@ -297,6 +385,13 @@ class DbxFormLoadingSourceDirective extends AbstractSubscriptionDirective {
     constructor(form) {
         super();
         this.form = form;
+        this._mode = new BehaviorSubject('reset');
+    }
+    get mode() {
+        return this._mode.value;
+    }
+    set mode(mode) {
+        this._mode.next(mode);
     }
     /**
      * Sets a LoadingContext that is watched for the loading state.
@@ -304,26 +399,25 @@ class DbxFormLoadingSourceDirective extends AbstractSubscriptionDirective {
     set obs(obs) {
         this._setObs(obs);
     }
-    _setObs(obs) {
+    _setObs(inputObs) {
         let subscription;
-        if (obs) {
-            subscription = combineLatest([
-                // Emit the first time initializing isn't there.
-                this.form.stream$.pipe(filter((x) => x.state !== DbxFormState.INITIALIZING), first()),
-                obs
-            ]).pipe(map((x) => x[1]), filter((x) => Boolean(x)), distinctUntilChanged((x, y) => x.value === y.value)).subscribe((x) => {
-                if (!x.error && !x.loading) {
-                    // console.log('Setting value: ', x.model);
+        if (inputObs) {
+            subscription = dbxFormSourceObservable(this.form, inputObs, this._mode).subscribe((x) => {
+                if (loadingStateHasFinishedLoading(x)) {
                     this.form.setValue(x.value);
                 }
             });
         }
         this.sub = subscription;
     }
+    ngOnDestroy() {
+        super.ngOnDestroy();
+        this._mode.complete();
+    }
 }
-DbxFormLoadingSourceDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxFormLoadingSourceDirective, deps: [{ token: DbxMutableForm, host: true }], target: i0.ɵɵFactoryTarget.Directive });
-DbxFormLoadingSourceDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.4", type: DbxFormLoadingSourceDirective, selector: "[dbxFormLoadingSource]", inputs: { obs: ["dbxFormLoadingSource", "obs"] }, usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxFormLoadingSourceDirective, decorators: [{
+DbxFormLoadingSourceDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxFormLoadingSourceDirective, deps: [{ token: DbxMutableForm, host: true }], target: i0.ɵɵFactoryTarget.Directive });
+DbxFormLoadingSourceDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.2", type: DbxFormLoadingSourceDirective, selector: "[dbxFormLoadingSource]", inputs: { mode: ["dbxFormLoadingSourceMode", "mode"], obs: ["dbxFormLoadingSource", "obs"] }, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxFormLoadingSourceDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[dbxFormLoadingSource]'
@@ -332,13 +426,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImpor
         return [{ type: DbxMutableForm, decorators: [{
                         type: Host
                     }] }];
-    }, propDecorators: { obs: [{
+    }, propDecorators: { mode: [{
+                type: Input,
+                args: ['dbxFormLoadingSourceMode']
+            }], obs: [{
                 type: Input,
                 args: ['dbxFormLoadingSource']
             }] } });
 
 /**
  * Used to see form value changes.
+ *
+ * Emits undefined when the form is incomplete, and the value when the form is complete.
  */
 class DbxFormValueChangesDirective extends AbstractSubscriptionDirective {
     constructor(form) {
@@ -347,14 +446,23 @@ class DbxFormValueChangesDirective extends AbstractSubscriptionDirective {
         this.dbxFormValueChange = new EventEmitter();
     }
     ngOnInit() {
-        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);
+        this.sub = this.form.stream$.pipe(mergeMap((x) => this.form.getValue().pipe(first(), map((value) => ({ isComplete: x.isComplete, value })))), delay(0)).subscribe(({ isComplete, value }) => {
+            if (isComplete) {
+                this.dbxFormValueChange.next(value);
+            }
+            else {
+                this.dbxFormValueChange.next(undefined);
+            }
         });
     }
+    ngOnDestroy() {
+        super.ngOnDestroy();
+        this.dbxFormValueChange.complete();
+    }
 }
-DbxFormValueChangesDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxFormValueChangesDirective, deps: [{ token: DbxForm, host: true }], target: i0.ɵɵFactoryTarget.Directive });
-DbxFormValueChangesDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.4", type: DbxFormValueChangesDirective, selector: "[dbxFormValueChange]", outputs: { dbxFormValueChange: "dbxFormValueChange" }, usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxFormValueChangesDirective, decorators: [{
+DbxFormValueChangesDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxFormValueChangesDirective, deps: [{ token: DbxForm, host: true }], target: i0.ɵɵFactoryTarget.Directive });
+DbxFormValueChangesDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.2", type: DbxFormValueChangesDirective, selector: "[dbxFormValueChange]", outputs: { dbxFormValueChange: "dbxFormValueChange" }, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxFormValueChangesDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[dbxFormValueChange]'
@@ -367,62 +475,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImpor
                 type: Output
             }] } });
 
-/**
- * Used with a FormComponent to set the value based on the input value.
- */
-class DbxFormSourceDirective extends AbstractSubscriptionDirective {
-    constructor(form) {
-        super();
-        this.form = form;
-    }
-    /**
-     * Sets a LoadingContext that is watched for the loading state.
-     */
-    set obs(obs) {
-        this._setObs(obs);
-    }
-    _setObs(obs) {
-        let subscription;
-        if (obs) {
-            subscription = combineLatest([
-                // Emit the first time initializing isn't there.
-                this.form.stream$.pipe(filter((x) => x.state !== DbxFormState.INITIALIZING), first()),
-                obs
-            ]).pipe(map((x) => x[1]), distinctUntilChanged((x, y) => x === y)).subscribe((x) => {
-                this.form.setValue(x);
-            });
-        }
-        this.sub = subscription;
-    }
-}
-DbxFormSourceDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxFormSourceDirective, deps: [{ token: DbxMutableForm, host: true }], target: i0.ɵɵFactoryTarget.Directive });
-DbxFormSourceDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.4", type: DbxFormSourceDirective, selector: "[dbxFormSource]", inputs: { obs: ["dbxFormSource", "obs"] }, usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxFormSourceDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[dbxFormSource]'
-                }]
-        }], ctorParameters: function () {
-        return [{ type: DbxMutableForm, decorators: [{
-                        type: Host
-                    }] }];
-    }, propDecorators: { obs: [{
-                type: Input,
-                args: ['dbxFormSource']
-            }] } });
-
 class DbxFormIoModule {
 }
-DbxFormIoModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxFormIoModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-DbxFormIoModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxFormIoModule, declarations: [DbxFormSourceDirective,
+DbxFormIoModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxFormIoModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+DbxFormIoModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxFormIoModule, declarations: [DbxFormSourceDirective,
         DbxFormValueChangesDirective,
         DbxFormLoadingSourceDirective], imports: [CommonModule], exports: [DbxFormSourceDirective,
         DbxFormValueChangesDirective,
         DbxFormLoadingSourceDirective] });
-DbxFormIoModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxFormIoModule, imports: [[
+DbxFormIoModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxFormIoModule, imports: [[
             CommonModule
         ]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxFormIoModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxFormIoModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -443,14 +507,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImpor
 
 class DbxFormModule {
 }
-DbxFormModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxFormModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-DbxFormModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxFormModule, exports: [DbxFormActionTransitionModule,
+DbxFormModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxFormModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+DbxFormModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxFormModule, exports: [DbxFormActionTransitionModule,
         DbxFormActionModule,
         DbxFormIoModule] });
-DbxFormModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxFormModule, imports: [DbxFormActionTransitionModule,
+DbxFormModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxFormModule, imports: [DbxFormActionTransitionModule,
         DbxFormActionModule,
         DbxFormIoModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxFormModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxFormModule, decorators: [{
             type: NgModule,
             args: [{
                     exports: [
@@ -474,8 +538,8 @@ 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_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.' };
@@ -498,15 +562,15 @@ class DbxDefaultChecklistItemFieldDisplayComponent {
         return (_a = this.displayContent) === null || _a === void 0 ? void 0 : _a.description;
     }
 }
-DbxDefaultChecklistItemFieldDisplayComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxDefaultChecklistItemFieldDisplayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-DbxDefaultChecklistItemFieldDisplayComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.4", type: DbxDefaultChecklistItemFieldDisplayComponent, selector: "ng-component", inputs: { displayContent: "displayContent" }, ngImport: i0, template: `
+DbxDefaultChecklistItemFieldDisplayComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxDefaultChecklistItemFieldDisplayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+DbxDefaultChecklistItemFieldDisplayComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: DbxDefaultChecklistItemFieldDisplayComponent, selector: "ng-component", inputs: { displayContent: "displayContent" }, ngImport: i0, template: `
     <div *ngIf="displayContent" class="dbx-default-checklist-item-field">
       <div *ngIf="label" class="item-label">{{ label }}</div>
       <div *ngIf="sublabel" class="item-sublabel">{{ sublabel }}</div>
       <div *ngIf="description" class="dbx-hint item-description">{{ description }}</div>
     </div>
   `, isInline: true, directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxDefaultChecklistItemFieldDisplayComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxDefaultChecklistItemFieldDisplayComponent, decorators: [{
             type: Component,
             args: [{
                     template: `
@@ -525,9 +589,9 @@ class DbxChecklistItemFieldComponent extends FieldType {
     constructor() {
         super(...arguments);
         this._displayContent = new BehaviorSubject(undefined);
-        this.displayContent$ = this._displayContent.pipe(switchMapMaybeObs(), distinctUntilChanged(), shareReplay(1));
-        this.anchor$ = this.displayContent$.pipe(map(x => x.anchor), shareReplay(1));
-        this.rippleDisabled$ = this.displayContent$.pipe(map(x => x.ripple === false || (x.ripple !== true && !x.anchor)), distinctUntilChanged(), shareReplay(1));
+        this.displayContent$ = this._displayContent.pipe(switchMapMaybeObs(), distinctUntilChanged$1(), shareReplay(1));
+        this.anchor$ = this.displayContent$.pipe(map$1(x => x.anchor), shareReplay(1));
+        this.rippleDisabled$ = this.displayContent$.pipe(map$1(x => x.ripple === false || (x.ripple !== true && !x.anchor)), distinctUntilChanged$1(), shareReplay(1));
     }
     get formGroup() {
         return this.form;
@@ -565,9 +629,9 @@ class DbxChecklistItemFieldComponent extends FieldType {
         this._displayContent.complete();
     }
 }
-DbxChecklistItemFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxChecklistItemFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-DbxChecklistItemFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.4", 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.4", ngImport: i0, type: DbxChecklistItemFieldComponent, decorators: [{
+DbxChecklistItemFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxChecklistItemFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+DbxChecklistItemFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", 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.3.2", 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]=\"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" }]
         }] });
@@ -589,13 +653,13 @@ class DbxChecklistItemContentComponent extends AbstractSubscriptionDirective {
         };
     }
 }
-DbxChecklistItemContentComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", 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.4", 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.4", ngImport: i0, type: DbxChecklistItemContentComponent, decorators: [{
+DbxChecklistItemContentComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxChecklistItemContentComponent, deps: [{ token: DbxChecklistItemFieldComponent }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+DbxChecklistItemContentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: DbxChecklistItemContentComponent, selector: "dbx-checklist-item-content-component", usesInheritance: true, ngImport: i0, template: `<dbx-injection [config]="config"></dbx-injection>`, isInline: true, components: [{ type: i2.DbxInjectionComponent, selector: "dbx-injection, [dbxInjection], [dbx-injection]", inputs: ["config", "template"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxChecklistItemContentComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'dbx-checklist-item-content-component',
-                    template: `<dbx-injected-content [config]="config"></dbx-injected-content>`
+                    template: `<dbx-injection [config]="config"></dbx-injection>`
                 }]
         }], ctorParameters: function () { return [{ type: DbxChecklistItemFieldComponent }, { type: i0.ChangeDetectorRef }]; } });
 
@@ -607,8 +671,8 @@ class DbxFormInfoWrapperComponent extends FieldWrapper {
         this.infoWrapper.onInfoClick();
     }
 }
-DbxFormInfoWrapperComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxFormInfoWrapperComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-DbxFormInfoWrapperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.4", type: DbxFormInfoWrapperComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
+DbxFormInfoWrapperComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxFormInfoWrapperComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+DbxFormInfoWrapperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", 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>
@@ -621,7 +685,7 @@ DbxFormInfoWrapperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.
       </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.4", ngImport: i0, type: DbxFormInfoWrapperComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxFormInfoWrapperComponent, decorators: [{
             type: Component,
             args: [{
                     template: `
@@ -650,13 +714,13 @@ class DbxFormSectionWrapperComponent extends FieldWrapper {
         return (_a = this.to.sectionWrapper) === null || _a === void 0 ? void 0 : _a.hint;
     }
 }
-DbxFormSectionWrapperComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxFormSectionWrapperComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-DbxFormSectionWrapperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.4", type: DbxFormSectionWrapperComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
+DbxFormSectionWrapperComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxFormSectionWrapperComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+DbxFormSectionWrapperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", 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.4", ngImport: i0, type: DbxFormSectionWrapperComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxFormSectionWrapperComponent, decorators: [{
             type: Component,
             args: [{
                     template: `
@@ -680,13 +744,13 @@ class DbxFormFlexWrapperComponent extends FieldWrapper {
         return (_b = (_a = this.flexWrapper) === null || _a === void 0 ? void 0 : _a.relative) !== null && _b !== void 0 ? _b : false;
     }
 }
-DbxFormFlexWrapperComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxFormFlexWrapperComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-DbxFormFlexWrapperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.4", type: DbxFormFlexWrapperComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
+DbxFormFlexWrapperComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxFormFlexWrapperComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+DbxFormFlexWrapperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", 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, directives: [{ type: i1$1.DbxFlexGroupDirective, selector: "[dbxFlexGroup]", inputs: ["content", "relative", "breakpoint"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxFormFlexWrapperComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxFormFlexWrapperComponent, decorators: [{
             type: Component,
             args: [{
                     template: `
@@ -707,13 +771,13 @@ class DbxFormSubsectionWrapperComponent extends FieldWrapper {
         return (_a = this.to.subsectionWrapper) === null || _a === void 0 ? void 0 : _a.hint;
     }
 }
-DbxFormSubsectionWrapperComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxFormSubsectionWrapperComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-DbxFormSubsectionWrapperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.4", type: DbxFormSubsectionWrapperComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
+DbxFormSubsectionWrapperComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxFormSubsectionWrapperComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+DbxFormSubsectionWrapperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", 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.4", ngImport: i0, type: DbxFormSubsectionWrapperComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxFormSubsectionWrapperComponent, decorators: [{
             type: Component,
             args: [{
                     template: `
@@ -731,7 +795,7 @@ class AbstractFormExpandableSectionWrapperDirective extends FieldWrapper {
         this._formControlObs = new BehaviorSubject(undefined);
         this.formControl$ = this._formControlObs.pipe(filterMaybe());
         this._toggleOpen = new BehaviorSubject(undefined);
-        this.show$ = this._toggleOpen.pipe(switchMap$1((toggleOpen) => {
+        this.show$ = this._toggleOpen.pipe(switchMap((toggleOpen) => {
             if (toggleOpen != null) {
                 return of(toggleOpen);
             }
@@ -739,7 +803,7 @@ class AbstractFormExpandableSectionWrapperDirective extends FieldWrapper {
                 return this.hasValue$;
             }
         }), shareReplay$1(1));
-        this.hasValue$ = this.formControl$.pipe(switchMap$1((x) => x.valueChanges.pipe(startWith(x.value), map$1((value) => {
+        this.hasValue$ = this.formControl$.pipe(switchMap((x) => x.valueChanges.pipe(startWith(x.value), map((value) => {
             return this.hasValueFn(value);
         }), shareReplay$1(1))));
     }
@@ -772,9 +836,9 @@ class AbstractFormExpandableSectionWrapperDirective extends FieldWrapper {
         this._formControlObs.complete();
     }
 }
-AbstractFormExpandableSectionWrapperDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: AbstractFormExpandableSectionWrapperDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-AbstractFormExpandableSectionWrapperDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.4", type: AbstractFormExpandableSectionWrapperDirective, usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: AbstractFormExpandableSectionWrapperDirective, decorators: [{
+AbstractFormExpandableSectionWrapperDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AbstractFormExpandableSectionWrapperDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+AbstractFormExpandableSectionWrapperDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.2", type: AbstractFormExpandableSectionWrapperDirective, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AbstractFormExpandableSectionWrapperDirective, decorators: [{
             type: Directive
         }] });
 
@@ -787,8 +851,8 @@ class DbxFormExpandWrapperComponent extends AbstractFormExpandableSectionWrapper
         return (_b = (_a = this.expandableSection) === null || _a === void 0 ? void 0 : _a.buttonType) !== null && _b !== void 0 ? _b : 'button';
     }
 }
-DbxFormExpandWrapperComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxFormExpandWrapperComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-DbxFormExpandWrapperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.4", type: DbxFormExpandWrapperComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
+DbxFormExpandWrapperComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxFormExpandWrapperComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+DbxFormExpandWrapperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: DbxFormExpandWrapperComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
   <ng-container [ngSwitch]="show$ | async">
     <ng-container *ngSwitchCase="true">
       <ng-container #fieldComponent></ng-container>
@@ -798,7 +862,7 @@ DbxFormExpandWrapperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "1
     </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.4", ngImport: i0, type: DbxFormExpandWrapperComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxFormExpandWrapperComponent, decorators: [{
             type: Component,
             args: [{
                     template: `
@@ -827,9 +891,9 @@ class AutoTouchFieldWrapperComponent extends FieldWrapper {
         });
     }
 }
-AutoTouchFieldWrapperComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: AutoTouchFieldWrapperComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-AutoTouchFieldWrapperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.4", type: AutoTouchFieldWrapperComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `<ng-container #fieldComponent></ng-container>`, isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: AutoTouchFieldWrapperComponent, decorators: [{
+AutoTouchFieldWrapperComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AutoTouchFieldWrapperComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+AutoTouchFieldWrapperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: AutoTouchFieldWrapperComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `<ng-container #fieldComponent></ng-container>`, isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AutoTouchFieldWrapperComponent, decorators: [{
             type: Component,
             args: [{
                     template: `<ng-container #fieldComponent></ng-container>`
@@ -842,7 +906,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImpor
 class DbxFormToggleWrapperComponent extends AbstractFormExpandableSectionWrapperDirective {
     constructor() {
         super(...arguments);
-        this.slideLabel$ = this._toggleOpen.pipe(switchMap$1(x => {
+        this.slideLabel$ = this._toggleOpen.pipe(switchMap(x => {
             var _a, _b;
             if ((_a = this.expandableSection) === null || _a === void 0 ? void 0 : _a.toggleLabelObs) {
                 return (_b = this.expandableSection) === null || _b === void 0 ? void 0 : _b.toggleLabelObs(x);
@@ -853,13 +917,13 @@ class DbxFormToggleWrapperComponent extends AbstractFormExpandableSectionWrapper
         }), shareReplay$1(1));
     }
     onToggleChange() {
-        this.show$.pipe(first$1()).subscribe((show) => {
+        this.show$.pipe(first()).subscribe((show) => {
             this._toggleOpen.next(!show);
         });
     }
 }
-DbxFormToggleWrapperComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxFormToggleWrapperComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-DbxFormToggleWrapperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.4", type: DbxFormToggleWrapperComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
+DbxFormToggleWrapperComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxFormToggleWrapperComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+DbxFormToggleWrapperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", 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>
@@ -869,7 +933,7 @@ DbxFormToggleWrapperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "1
     </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.4", ngImport: i0, type: DbxFormToggleWrapperComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxFormToggleWrapperComponent, decorators: [{
             type: Component,
             args: [{
                     template: `
@@ -904,13 +968,13 @@ class DbxFormStyleWrapperComponent extends FieldWrapper {
         this._style.complete();
     }
 }
-DbxFormStyleWrapperComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxFormStyleWrapperComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-DbxFormStyleWrapperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.4", type: DbxFormStyleWrapperComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
+DbxFormStyleWrapperComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxFormStyleWrapperComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+DbxFormStyleWrapperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", 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.4", ngImport: i0, type: DbxFormStyleWrapperComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxFormStyleWrapperComponent, decorators: [{
             type: Component,
             args: [{
                     template: `
@@ -921,27 +985,71 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImpor
                 }]
         }] });
 
+/**
+ * Adds a loading bar to help signify asynchronos work is occuring.
+ *
+ * By default shows loading during asynchronous validation of a field (FormControl status is "PENDING")
+ */
+class DbxFormWorkingWrapperComponent extends FieldWrapper {
+    constructor() {
+        super(...arguments);
+        this.sub = new SubscriptionObject();
+        this.workingContext = new SimpleLoadingContext(false);
+    }
+    ngOnInit() {
+        var _a;
+        this.sub.subscription = (_a = this.formControl) === null || _a === void 0 ? void 0 : _a.statusChanges.subscribe({
+            next: (x) => this.workingContext.setLoading(x === 'PENDING')
+        });
+    }
+    ngOnDestroy() {
+        this.workingContext.destroy();
+        this.sub.destroy();
+    }
+}
+DbxFormWorkingWrapperComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxFormWorkingWrapperComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+DbxFormWorkingWrapperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: DbxFormWorkingWrapperComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
+    <div class="dbx-form-working-wrapper">
+      <ng-container #fieldComponent></ng-container>
+      <dbx-loading [linear]="true" [context]="workingContext"></dbx-loading>
+    </div>
+  `, isInline: true, components: [{ type: i1$1.DbxLoadingComponent, selector: "dbx-loading", inputs: ["show", "text", "mode", "color", "diameter", "linear", "context", "loading", "error"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxFormWorkingWrapperComponent, decorators: [{
+            type: Component,
+            args: [{
+                    template: `
+    <div class="dbx-form-working-wrapper">
+      <ng-container #fieldComponent></ng-container>
+      <dbx-loading [linear]="true" [context]="workingContext"></dbx-loading>
+    </div>
+  `
+                }]
+        }] });
+
 class DbxFormFormlyWrapperModule {
 }
-DbxFormFormlyWrapperModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxFormFormlyWrapperModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-DbxFormFormlyWrapperModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxFormFormlyWrapperModule, declarations: [AutoTouchFieldWrapperComponent,
+DbxFormFormlyWrapperModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxFormFormlyWrapperModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+DbxFormFormlyWrapperModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxFormFormlyWrapperModule, declarations: [AutoTouchFieldWrapperComponent,
         DbxFormSectionWrapperComponent,
         DbxFormSubsectionWrapperComponent,
         DbxFormInfoWrapperComponent,
         DbxFormExpandWrapperComponent,
         DbxFormToggleWrapperComponent,
         DbxFormFlexWrapperComponent,
-        DbxFormStyleWrapperComponent], imports: [CommonModule,
+        DbxFormStyleWrapperComponent,
+        DbxFormWorkingWrapperComponent], imports: [CommonModule,
         DbxTextModule,
+        DbxLoadingModule,
         DbxFlexLayoutModule,
         DbxSectionLayoutModule,
         MatButtonModule,
         MatSlideToggleModule,
         MatIconModule,
         FlexLayoutModule, i1$4.FormlyModule] });
-DbxFormFormlyWrapperModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxFormFormlyWrapperModule, imports: [[
+DbxFormFormlyWrapperModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxFormFormlyWrapperModule, imports: [[
             CommonModule,
             DbxTextModule,
+            DbxLoadingModule,
             DbxFlexLayoutModule,
             DbxSectionLayoutModule,
             MatButtonModule,
@@ -957,16 +1065,18 @@ DbxFormFormlyWrapperModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.
                     { name: 'subsection', component: DbxFormSubsectionWrapperComponent },
                     { name: 'info', component: DbxFormInfoWrapperComponent },
                     { name: 'flex', component: DbxFormFlexWrapperComponent },
-                    { name: 'style', component: DbxFormStyleWrapperComponent }
+                    { name: 'style', component: DbxFormStyleWrapperComponent },
+                    { name: 'working', component: DbxFormWorkingWrapperComponent }
                 ]
             })
         ]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxFormFormlyWrapperModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxFormFormlyWrapperModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
                         CommonModule,
                         DbxTextModule,
+                        DbxLoadingModule,
                         DbxFlexLayoutModule,
                         DbxSectionLayoutModule,
                         MatButtonModule,
@@ -982,7 +1092,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImpor
                                 { name: 'subsection', component: DbxFormSubsectionWrapperComponent },
                                 { name: 'info', component: DbxFormInfoWrapperComponent },
                                 { name: 'flex', component: DbxFormFlexWrapperComponent },
-                                { name: 'style', component: DbxFormStyleWrapperComponent }
+                                { name: 'style', component: DbxFormStyleWrapperComponent },
+                                { name: 'working', component: DbxFormWorkingWrapperComponent }
                             ]
                         })
                     ],
@@ -994,7 +1105,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImpor
                         DbxFormExpandWrapperComponent,
                         DbxFormToggleWrapperComponent,
                         DbxFormFlexWrapperComponent,
-                        DbxFormStyleWrapperComponent
+                        DbxFormStyleWrapperComponent,
+                        DbxFormWorkingWrapperComponent
                     ],
                     exports: []
                 }]
@@ -1002,8 +1114,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImpor
 
 class DbxFormFormlyChecklistItemFieldModule {
 }
-DbxFormFormlyChecklistItemFieldModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxFormFormlyChecklistItemFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-DbxFormFormlyChecklistItemFieldModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxFormFormlyChecklistItemFieldModule, declarations: [DbxChecklistItemFieldComponent,
+DbxFormFormlyChecklistItemFieldModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxFormFormlyChecklistItemFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+DbxFormFormlyChecklistItemFieldModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxFormFormlyChecklistItemFieldModule, declarations: [DbxChecklistItemFieldComponent,
         DbxChecklistItemContentComponent,
         DbxDefaultChecklistItemFieldDisplayComponent], imports: [CommonModule,
         DbxTextModule,
@@ -1013,10 +1125,10 @@ DbxFormFormlyChecklistItemFieldModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVers
         MatCheckboxModule,
         MatButtonModule,
         MatIconModule,
-        DbxAnchorModule,
-        DbxInjectedComponentModule,
+        DbxRouterAnchorModule,
+        DbxInjectionComponentModule,
         DbxFormFormlyWrapperModule, i1$4.FormlyModule], exports: [DbxFormFormlyWrapperModule] });
-DbxFormFormlyChecklistItemFieldModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxFormFormlyChecklistItemFieldModule, imports: [[
+DbxFormFormlyChecklistItemFieldModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxFormFormlyChecklistItemFieldModule, imports: [[
             CommonModule,
             DbxTextModule,
             FormsModule,
@@ -1025,8 +1137,8 @@ DbxFormFormlyChecklistItemFieldModule.ɵinj = i0.ɵɵngDeclareInjector({ minVers
             MatCheckboxModule,
             MatButtonModule,
             MatIconModule,
-            DbxAnchorModule,
-            DbxInjectedComponentModule,
+            DbxRouterAnchorModule,
+            DbxInjectionComponentModule,
             DbxFormFormlyWrapperModule,
             FormlyModule.forChild({
                 types: [
@@ -1034,7 +1146,7 @@ DbxFormFormlyChecklistItemFieldModule.ɵinj = i0.ɵɵngDeclareInjector({ minVers
                 ]
             })
         ], DbxFormFormlyWrapperModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxFormFormlyChecklistItemFieldModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxFormFormlyChecklistItemFieldModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -1046,8 +1158,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImpor
                         MatCheckboxModule,
                         MatButtonModule,
                         MatIconModule,
-                        DbxAnchorModule,
-                        DbxInjectedComponentModule,
+                        DbxRouterAnchorModule,
+                        DbxInjectionComponentModule,
                         DbxFormFormlyWrapperModule,
                         FormlyModule.forChild({
                             types: [
@@ -1143,7 +1255,7 @@ class ChecklistItemFieldDataSetBuilder {
             mergedConfig.displayContentObs = combineLatest([
                 currentField.displayContentObs,
                 config.displayContentObs
-            ]).pipe(map(([a, b]) => {
+            ]).pipe(map$1(([a, b]) => {
                 const result = Object.assign(Object.assign({}, a), b);
                 // console.log('A and b: ', a, b, result);
                 return result;
@@ -1184,7 +1296,7 @@ class ChecklistItemFieldDataSetBuilder {
     }
     // MARK: Utility
     customContentFromData(mapFn) {
-        return this.dataObs$.pipe(map(mapFn));
+        return this.dataObs$.pipe(map$1(mapFn));
     }
     contentWithValueFromData(key, contentFn) {
         return this.customContentFromData((data) => {
@@ -1201,78 +1313,63 @@ class ChecklistItemFieldDataSetBuilder {
     }
 }
 
-class AbstractFormComponentFieldWrappedComponent {
-}
-class FormComponentFieldComponent extends FieldType {
+class DbxFormComponentFieldComponent extends FieldType {
     get config() {
-        return this._config;
-    }
-    get componentField() {
         return this.field.componentField;
     }
-    ngOnInit() {
-        this._config = {
-            componentClass: this.componentField.componentClass,
-            init: (instance) => {
-                instance.field = this;
-            }
-        };
-    }
 }
-FormComponentFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: FormComponentFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-FormComponentFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.4", 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"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: FormComponentFieldComponent, decorators: [{
+DbxFormComponentFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxFormComponentFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+DbxFormComponentFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: DbxFormComponentFieldComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
+    <div class="dbx-form-component" dbx-injection [config]="config"></div>
+  `, isInline: true, components: [{ type: i2.DbxInjectionComponent, selector: "dbx-injection, [dbxInjection], [dbx-injection]", inputs: ["config", "template"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxFormComponentFieldComponent, decorators: [{
             type: Component,
             args: [{
                     template: `
-    <div class="form-wrapped-component" dbx-injected-content [config]="config"></div>
+    <div class="dbx-form-component" dbx-injection [config]="config"></div>
   `
                 }]
         }] });
 
 class DbxFormFormlyComponentFieldModule {
 }
-DbxFormFormlyComponentFieldModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxFormFormlyComponentFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-DbxFormFormlyComponentFieldModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxFormFormlyComponentFieldModule, declarations: [FormComponentFieldComponent], imports: [CommonModule,
-        DbxInjectedComponentModule, i1$4.FormlyModule], exports: [FormComponentFieldComponent] });
-DbxFormFormlyComponentFieldModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxFormFormlyComponentFieldModule, imports: [[
+DbxFormFormlyComponentFieldModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxFormFormlyComponentFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+DbxFormFormlyComponentFieldModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxFormFormlyComponentFieldModule, declarations: [DbxFormComponentFieldComponent], imports: [CommonModule,
+        DbxInjectionComponentModule, i1$4.FormlyModule], exports: [DbxFormComponentFieldComponent] });
+DbxFormFormlyComponentFieldModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxFormFormlyComponentFieldModule, imports: [[
             CommonModule,
-            DbxInjectedComponentModule,
+            DbxInjectionComponentModule,
             FormlyModule.forChild({
                 types: [
-                    { name: 'component', component: FormComponentFieldComponent }
+                    { name: 'component', component: DbxFormComponentFieldComponent }
                 ]
             })
         ]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxFormFormlyComponentFieldModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxFormFormlyComponentFieldModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
                         CommonModule,
-                        DbxInjectedComponentModule,
+                        DbxInjectionComponentModule,
                         FormlyModule.forChild({
                             types: [
-                                { name: 'component', component: FormComponentFieldComponent }
+                                { name: 'component', component: DbxFormComponentFieldComponent }
                             ]
                         })
                     ],
                     declarations: [
-                        FormComponentFieldComponent
+                        DbxFormComponentFieldComponent
                     ],
                     exports: [
-                        FormComponentFieldComponent
+                        DbxFormComponentFieldComponent
                     ]
                 }]
         }] });
 
-function componentField({ componentClass }) {
+function componentField(config) {
     return {
         type: 'component',
-        componentField: {
-            componentClass
-        }
+        componentField: config
     };
 }
 
@@ -1287,18 +1384,18 @@ class AbstractDbxPickableItemFieldDirective extends FieldType$1 {
         this.formControl$ = this._formControlObs.pipe(filterMaybe());
         this._displayHashMap = new BehaviorSubject(new Map());
         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 => { var _a; return (_a = x === null || x === void 0 ? void 0 : x.value) !== null && _a !== void 0 ? _a : []; }));
+        this.filterInputValueString$ = this.filterInputValue$.pipe(debounceTime(200), distinctUntilChanged(), shareReplay$1(1));
+        this.loadResultsDisplayValuesState$ = this.formControl$.pipe(first(), switchMap(() => this.loadValuesFn().pipe(switchMap((x) => this.loadDisplayValuesForFieldValues(x)), startWith(beginLoading()))), shareReplay$1(1));
+        this._formControlValue = this.formControl$.pipe(switchMap(control => control.valueChanges.pipe(startWith(control.value), shareReplay$1(1))));
+        this.loadResultsDisplayValues$ = this.loadResultsDisplayValuesState$.pipe(map(x => { var _a; return (_a = x === null || x === void 0 ? void 0 : x.value) !== null && _a !== void 0 ? _a : []; }));
         /**
          * Current values in the form control.
          */
-        this.values$ = this._formControlValue.pipe(map$1(convertMaybeToArray), shareReplay$1(1));
+        this.values$ = this._formControlValue.pipe(map(convertMaybeToArray), shareReplay$1(1));
         /**
          * Current values with their display value.
          */
-        this.displayValuesState$ = combineLatest([this.loadResultsDisplayValues$, this.values$]).pipe(switchMap$1(([displayValues, currentValues]) => {
+        this.displayValuesState$ = combineLatest([this.loadResultsDisplayValues$, this.values$]).pipe(switchMap(([displayValues, currentValues]) => {
             const displayValuesMap = makeValuesGroupMap(displayValues, (x) => this.hashForValue(x.value));
             const valuesNotInDisplayMap = [];
             currentValues.forEach((x) => {
@@ -1310,7 +1407,7 @@ class AbstractDbxPickableItemFieldDirective extends FieldType$1 {
                 }
             });
             if (valuesNotInDisplayMap.length) {
-                return this.loadDisplayValuesForValues(valuesNotInDisplayMap).pipe(map$1(x => mapLoadingStateResults(x, {
+                return this.loadDisplayValuesForValues(valuesNotInDisplayMap).pipe(map(x => mapLoadingStateResults(x, {
                     mapValue: (loadedValues) => {
                         loadedValues.forEach(x => { var _a; return x.isUnknown = (_a = x.isUnknown) !== null && _a !== void 0 ? _a : true; }); // Assign unknown flag.
                         return ([...displayValues, ...loadedValues]);
@@ -1324,32 +1421,32 @@ class AbstractDbxPickableItemFieldDirective extends FieldType$1 {
         /**
          * Results to be displayed if filtered.
          */
-        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, {
+        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, {
             mapValue: (displayValues) => {
                 const valueHashSet = new Set(values.map(x => this.hashForValue(x)));
                 return displayValues.filter(x => !x.isUnknown && valueHashSet.has(x._hash));
             }
         })), startWith(beginLoading()))))), shareReplay$1(1));
-        this.filteredSearchResults$ = this.filteredSearchResultsState$.pipe(map$1(x => x === null || x === void 0 ? void 0 : x.value), filterMaybe(), shareReplay$1(1));
-        this.items$ = combineLatest([this.filteredSearchResults$, this.values$]).pipe(map$1(([displayValues, values]) => {
+        this.filteredSearchResults$ = this.filteredSearchResultsState$.pipe(map(x => x === null || x === void 0 ? void 0 : x.value), filterMaybe(), shareReplay$1(1));
+        this.items$ = combineLatest([this.filteredSearchResults$, this.values$]).pipe(map(([displayValues, values]) => {
             const selectedHashValuesSet = new Set(values.map(x => this.hashForValue(x)));
-            let items = displayValues.map((x) => ({ value: x, selected: selectedHashValuesSet.has(x._hash) }));
+            let items = displayValues.map((x) => ({ itemValue: x, selected: selectedHashValuesSet.has(x._hash) }));
             if (this.sortItems) {
                 items = this.sortItems(items);
             }
             return items;
         }), 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))));
+        this.itemsLoadingState$ = this.loadResultsDisplayValues$.pipe(switchMap(x => this.items$.pipe(first(), map(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 ListLoadingStateContextInstance({ obs: this.itemsLoadingState$, showLoadingOnNoValue: false });
-        this.filterItemsLoadingState$ = this.items$.pipe(map$1(x => successResult(x)), startWith(beginLoading()), shareReplay$1(1));
+        this.filterItemsLoadingState$ = this.items$.pipe(map(x => successResult(x)), startWith(beginLoading()), shareReplay$1(1));
         /**
          * Context used for searching/filtering.
          */
         this.filterResultsContext = new ListLoadingStateContextInstance({ obs: this.filteredSearchResultsState$, showLoadingOnNoValue: true });
-        this.noItemsAvailable$ = this.filterItemsLoadingState$.pipe(isListLoadingStateEmpty(), distinctUntilChanged$1());
+        this.noItemsAvailable$ = this.filterItemsLoadingState$.pipe(isListLoadingStateEmpty(), distinctUntilChanged());
     }
     get readonly() {
         var _a;
@@ -1384,6 +1481,10 @@ class AbstractDbxPickableItemFieldDirective extends FieldType$1 {
         var _a, _b, _c;
         return (_c = (_b = (_a = this.field.templateOptions) === null || _a === void 0 ? void 0 : _a.attributes) === null || _b === void 0 ? void 0 : _b['autocomplete']) !== null && _c !== void 0 ? _c : this.key;
     }
+    get changeSelectionModeToViewOnDisabled() {
+        var _a;
+        return (_a = this.pickableField.changeSelectionModeToViewOnDisabled) !== null && _a !== void 0 ? _a : false;
+    }
     get sortItems() {
         return this.pickableField.sortItems;
     }
@@ -1442,7 +1543,7 @@ class AbstractDbxPickableItemFieldDirective extends FieldType$1 {
         return this.loadDisplayValuesForFieldValues(values.map((value) => ({ value })));
     }
     loadDisplayValuesForFieldValues(values) {
-        return this.getDisplayValuesForFieldValues(values).pipe(map$1((displayValues) => successResult(displayValues)), startWith(beginLoading()), shareReplay$1(1));
+        return this.getDisplayValuesForFieldValues(values).pipe(map((displayValues) => successResult(displayValues)), startWith(beginLoading()), shareReplay$1(1));
     }
     getDisplayValuesForFieldValues(values) {
         return this._displayHashMap.pipe(mergeMap((displayMap) => {
@@ -1454,7 +1555,7 @@ class AbstractDbxPickableItemFieldDirective extends FieldType$1 {
             if (needsDisplay.length > 0) {
                 // Go get the display value.
                 const displayValuesObs = this.displayForValue(needsDisplay.map(x => x[2]));
-                return displayValuesObs.pipe(first$1(), map$1((displayResults) => {
+                return displayValuesObs.pipe(first(), map((displayResults) => {
                     const displayResultsWithHash = displayResults.map((x) => {
                         x._hash = this.hashForValue(x.value);
                         return x;
@@ -1477,10 +1578,9 @@ class AbstractDbxPickableItemFieldDirective extends FieldType$1 {
         }));
     }
     ngOnInit() {
-        super.ngOnInit();
         this._formControlObs.next(this.formControl);
         // Focus after finished loading for the first time.
-        this.context.loading$.pipe(delay(10), filter$1(x => x), first$1()).subscribe(() => {
+        this.context.loading$.pipe(delay(10), filter(x => x), first()).subscribe(() => {
             var _a;
             (_a = this.filterMatInput) === null || _a === void 0 ? void 0 : _a.focus();
         });
@@ -1524,9 +1624,9 @@ class AbstractDbxPickableItemFieldDirective extends FieldType$1 {
         this.formControl.markAsDirty();
     }
 }
-AbstractDbxPickableItemFieldDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: AbstractDbxPickableItemFieldDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-AbstractDbxPickableItemFieldDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.4", type: AbstractDbxPickableItemFieldDirective, viewQueries: [{ propertyName: "filterMatInput", first: true, predicate: ["filterMatInput"], descendants: true, static: true }], usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: AbstractDbxPickableItemFieldDirective, decorators: [{
+AbstractDbxPickableItemFieldDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AbstractDbxPickableItemFieldDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+AbstractDbxPickableItemFieldDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.2", type: AbstractDbxPickableItemFieldDirective, viewQueries: [{ propertyName: "filterMatInput", first: true, predicate: ["filterMatInput"], descendants: true, static: true }], usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AbstractDbxPickableItemFieldDirective, decorators: [{
             type: Directive
         }], propDecorators: { filterMatInput: [{
                 type: ViewChild,
@@ -1540,19 +1640,19 @@ class DbxPickableChipListFieldComponent extends AbstractDbxPickableItemFieldDire
     itemClicked(item) {
         if (!item.disabled && !this.isReadonlyOrDisabled) {
             if (item.selected) {
-                this.removeValue(item.value.value);
+                this.removeValue(item.itemValue.value);
             }
             else {
-                this.addValue(item.value.value);
+                this.addValue(item.itemValue.value);
             }
         }
     }
 }
-DbxPickableChipListFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxPickableChipListFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-DbxPickableChipListFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.4", 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.4", ngImport: i0, type: DbxPickableChipListFieldComponent, decorators: [{
+DbxPickableChipListFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxPickableChipListFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+DbxPickableChipListFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", 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.itemValue.label }}</span>\n          <span class=\"dbx-chip-sublabel\" *ngIf=\"item.itemValue.sublabel\">{{ item.itemValue.sublabel }}</span>\n        </mat-chip>\n      </mat-chip-list>\n      <dbx-injection [config]=\"footerConfig\"></dbx-injection>\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.DbxInjectionComponent, selector: "dbx-injection, [dbxInjection], [dbx-injection]", 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.3.2", ngImport: i0, type: DbxPickableChipListFieldComponent, decorators: [{
             type: Component,
-            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" }]
+            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.itemValue.label }}</span>\n          <span class=\"dbx-chip-sublabel\" *ngIf=\"item.itemValue.sublabel\">{{ item.itemValue.sublabel }}</span>\n        </mat-chip>\n      </mat-chip-list>\n      <dbx-injection [config]=\"footerConfig\"></dbx-injection>\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" }]
         }] });
 
 /**
@@ -1561,15 +1661,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImpor
 class DbxPickableListFieldComponent extends AbstractDbxPickableItemFieldDirective {
     onSelectionChange(event) {
         const items = event.items;
-        const values = items.map(x => x.value.value);
+        const values = items.map(x => x.itemValue.value);
         this.setValues(values);
     }
 }
-DbxPickableListFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxPickableListFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-DbxPickableListFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.4", 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.4", ngImport: i0, type: DbxPickableListFieldComponent, decorators: [{
+DbxPickableListFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxPickableListFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+DbxPickableListFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", 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-injection [config]=\"footerConfig\"></dbx-injection>\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.DbxInjectionComponent; }), selector: "dbx-injection, [dbxInjection], [dbx-injection]", 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.3.2", 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    <!-- 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" }]
+            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-injection [config]=\"footerConfig\"></dbx-injection>\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 {
@@ -1579,9 +1679,9 @@ class DbxPickableListFieldItemListComponent extends AbstractDbxSelectionListWrap
         });
     }
 }
-DbxPickableListFieldItemListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxPickableListFieldItemListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-DbxPickableListFieldItemListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.4", 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.4", ngImport: i0, type: DbxPickableListFieldItemListComponent, decorators: [{
+DbxPickableListFieldItemListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxPickableListFieldItemListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+DbxPickableListFieldItemListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", 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\" [selectionMode]=\"selectionMode\">\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", "selectionMode"], outputs: ["contentScrolled"] }], pipes: { "async": i5.AsyncPipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxPickableListFieldItemListComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'dbx-form-pickable-item-field-item-list',
@@ -1591,7 +1691,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImpor
 /**
  * NOTE: Values input are PickableItemFieldItem<T>, but output values are PickableValueFieldDisplayValue<T>.
  */
-class DbxPickableListFieldItemListViewComponent extends AbstractSelectionValueListViewDirective {
+class DbxPickableListFieldItemListViewComponent extends AbstractDbxSelectionListViewDirective {
     constructor(dbxPickableListFieldComponent) {
         super();
         this.dbxPickableListFieldComponent = dbxPickableListFieldComponent;
@@ -1600,31 +1700,38 @@ class DbxPickableListFieldItemListViewComponent extends AbstractSelectionValueLi
         };
         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));
+        map(x => addConfigToValueListItems(this.config, x)), shareReplay$1(1));
     }
     get multiple() {
         return this.dbxPickableListFieldComponent.multiSelect;
     }
+    get selectionMode() {
+        let selectionMode = 'select';
+        if (this.dbxPickableListFieldComponent.disabled && this.dbxPickableListFieldComponent.changeSelectionModeToViewOnDisabled) {
+            selectionMode = 'view';
+        }
+        return selectionMode;
+    }
 }
-DbxPickableListFieldItemListViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxPickableListFieldItemListViewComponent, deps: [{ token: DbxPickableListFieldComponent }], target: i0.ɵɵFactoryTarget.Component });
-DbxPickableListFieldItemListViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.4", 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.4", ngImport: i0, type: DbxPickableListFieldItemListViewComponent, decorators: [{
+DbxPickableListFieldItemListViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxPickableListFieldItemListViewComponent, deps: [{ token: DbxPickableListFieldComponent }], target: i0.ɵɵFactoryTarget.Component });
+DbxPickableListFieldItemListViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: DbxPickableListFieldItemListViewComponent, selector: "ng-component", providers: ProvideDbxListView(DbxPickableListFieldItemListViewComponent), usesInheritance: true, ngImport: i0, template: `<dbx-selection-list-view-content [multiple]="multiple" [selectionMode]="selectionMode" [items]="items$ | async"></dbx-selection-list-view-content>`, isInline: true, components: [{ type: i1$1.DbxSelectionValueListItemViewComponent, selector: "dbx-selection-list-view-content", inputs: ["multiple", "selectionMode"] }], pipes: { "async": i5.AsyncPipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxPickableListFieldItemListViewComponent, decorators: [{
             type: Component,
             args: [{
-                    template: `<dbx-selection-list-view-content [multiple]="multiple" [items]="items$ | async"></dbx-selection-list-view-content>`,
+                    template: `<dbx-selection-list-view-content [multiple]="multiple" [selectionMode]="selectionMode" [items]="items$ | async"></dbx-selection-list-view-content>`,
                     providers: ProvideDbxListView(DbxPickableListFieldItemListViewComponent)
                 }]
         }], ctorParameters: function () { return [{ type: DbxPickableListFieldComponent }]; } });
-class DbxPickableListFieldItemListViewItemComponent extends AbstractDbxSelectionValueListViewItemComponent {
+class DbxPickableListFieldItemListViewItemComponent extends AbstractDbxValueListViewItemComponent {
     get label() {
-        return this.value.label;
+        return this.itemValue.label;
     }
 }
-DbxPickableListFieldItemListViewItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxPickableListFieldItemListViewItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-DbxPickableListFieldItemListViewItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.4", type: DbxPickableListFieldItemListViewItemComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
+DbxPickableListFieldItemListViewItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxPickableListFieldItemListViewItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+DbxPickableListFieldItemListViewItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: DbxPickableListFieldItemListViewItemComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
     <p>{{ label }}</p>
   `, isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxPickableListFieldItemListViewItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxPickableListFieldItemListViewItemComponent, decorators: [{
             type: Component,
             args: [{
                     template: `
@@ -1635,8 +1742,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImpor
 
 class DbxFormFormlyPickableFieldModule {
 }
-DbxFormFormlyPickableFieldModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxFormFormlyPickableFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-DbxFormFormlyPickableFieldModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxFormFormlyPickableFieldModule, declarations: [DbxPickableChipListFieldComponent,
+DbxFormFormlyPickableFieldModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxFormFormlyPickableFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+DbxFormFormlyPickableFieldModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxFormFormlyPickableFieldModule, declarations: [DbxPickableChipListFieldComponent,
         DbxPickableListFieldComponent,
         DbxPickableListFieldItemListComponent,
         DbxPickableListFieldItemListViewComponent,
@@ -1652,12 +1759,12 @@ DbxFormFormlyPickableFieldModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion:
         MatAutocompleteModule,
         MatListModule,
         DbxDatePipeModule,
-        DbxAnchorModule,
+        DbxRouterAnchorModule,
         MatChipsModule,
         MatIconModule,
-        DbxInjectedComponentModule,
+        DbxInjectionComponentModule,
         DbxListLayoutModule, i1$4.FormlyModule] });
-DbxFormFormlyPickableFieldModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxFormFormlyPickableFieldModule, imports: [[
+DbxFormFormlyPickableFieldModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxFormFormlyPickableFieldModule, imports: [[
             CommonModule,
             DbxTextModule,
             DbxLoadingModule,
@@ -1670,10 +1777,10 @@ DbxFormFormlyPickableFieldModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion:
             MatAutocompleteModule,
             MatListModule,
             DbxDatePipeModule,
-            DbxAnchorModule,
+            DbxRouterAnchorModule,
             MatChipsModule,
             MatIconModule,
-            DbxInjectedComponentModule,
+            DbxInjectionComponentModule,
             DbxListLayoutModule,
             FormlyModule.forChild({
                 types: [
@@ -1682,7 +1789,7 @@ DbxFormFormlyPickableFieldModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion:
                 ]
             })
         ]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxFormFormlyPickableFieldModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxFormFormlyPickableFieldModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -1698,10 +1805,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImpor
                         MatAutocompleteModule,
                         MatListModule,
                         DbxDatePipeModule,
-                        DbxAnchorModule,
+                        DbxRouterAnchorModule,
                         MatChipsModule,
                         MatIconModule,
-                        DbxInjectedComponentModule,
+                        DbxInjectionComponentModule,
                         DbxListLayoutModule,
                         FormlyModule.forChild({
                             types: [
@@ -1733,7 +1840,7 @@ function filterPickableItemFieldValuesByLabel(filterText, values) {
     return of(filteredValues.map(x => x.value));
 }
 function sortPickableItemsByLabel(chips) {
-    return chips.sort((a, b) => a.value.label.localeCompare(b.value.label));
+    return chips.sort((a, b) => a.itemValue.label.localeCompare(b.itemValue.label));
 }
 function pickableItemChipField(config) {
     const { key } = config;
@@ -1748,19 +1855,19 @@ function pickableItemListField(config) {
     })), { pickableField: config }));
 }
 
-const DBX_SEARCHABLE_FIELD_COMPONENT_DATA = new InjectionToken('DbxSearchableField');
+const DBX_SEARCHABLE_FIELD_COMPONENT_DATA_TOKEN = new InjectionToken('DbxSearchableField');
 class DbxSearchableFieldAutocompleteItemComponent {
     constructor() {
         this._displayValue = new BehaviorSubject(undefined);
         this.displayValue$ = this._displayValue.pipe(filterMaybe(), shareReplay$1(1));
-        this.config$ = this.displayValue$.pipe(map$1(x => {
+        this.config$ = this.displayValue$.pipe(map(x => {
             const config = Object.assign(Object.assign({}, x.display), { providers: mergeIntoArray([{
-                        provide: DBX_SEARCHABLE_FIELD_COMPONENT_DATA,
+                        provide: DBX_SEARCHABLE_FIELD_COMPONENT_DATA_TOKEN,
                         useValue: x
                     }], x.display.providers) });
             return config;
         }));
-        this.anchor$ = this.displayValue$.pipe(map$1(x => x.anchor));
+        this.anchor$ = this.displayValue$.pipe(map(x => x.anchor));
     }
     set displayValue(displayValue) {
         this._displayValue.next(displayValue);
@@ -1769,19 +1876,19 @@ class DbxSearchableFieldAutocompleteItemComponent {
         this._displayValue.complete();
     }
 }
-DbxSearchableFieldAutocompleteItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxSearchableFieldAutocompleteItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-DbxSearchableFieldAutocompleteItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.4", type: DbxSearchableFieldAutocompleteItemComponent, selector: "dbx-searchable-field-autocomplete-item", inputs: { displayValue: "displayValue" }, ngImport: i0, template: `
+DbxSearchableFieldAutocompleteItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxSearchableFieldAutocompleteItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+DbxSearchableFieldAutocompleteItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", 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-injection [config]="config$ | async"></dbx-injection>
     </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.4", ngImport: i0, type: DbxSearchableFieldAutocompleteItemComponent, decorators: [{
+  `, isInline: true, components: [{ type: i1$1.DbxAnchorComponent, selector: "dbx-anchor, [dbx-anchor]", inputs: ["block"] }, { type: i2.DbxInjectionComponent, selector: "dbx-injection, [dbxInjection], [dbx-injection]", inputs: ["config", "template"] }], pipes: { "async": i5.AsyncPipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxSearchableFieldAutocompleteItemComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'dbx-searchable-field-autocomplete-item',
                     template: `
     <dbx-anchor [block]="true" [anchor]="anchor$ | async">
-      <dbx-injected-content [config]="config$ | async"></dbx-injected-content>
+      <dbx-injection [config]="config$ | async"></dbx-injection>
     </dbx-anchor>
   `
                 }]
@@ -1794,26 +1901,26 @@ class AbstractDbxSearchableFieldDisplayDirective {
         this.displayValue = displayValue;
     }
 }
-AbstractDbxSearchableFieldDisplayDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", 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.4", type: AbstractDbxSearchableFieldDisplayDirective, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: AbstractDbxSearchableFieldDisplayDirective, decorators: [{
+AbstractDbxSearchableFieldDisplayDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AbstractDbxSearchableFieldDisplayDirective, deps: [{ token: DBX_SEARCHABLE_FIELD_COMPONENT_DATA_TOKEN }], target: i0.ɵɵFactoryTarget.Directive });
+AbstractDbxSearchableFieldDisplayDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.2", type: AbstractDbxSearchableFieldDisplayDirective, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AbstractDbxSearchableFieldDisplayDirective, decorators: [{
             type: Directive
         }], ctorParameters: function () {
         return [{ type: undefined, decorators: [{
                         type: Inject,
-                        args: [DBX_SEARCHABLE_FIELD_COMPONENT_DATA]
+                        args: [DBX_SEARCHABLE_FIELD_COMPONENT_DATA_TOKEN]
                     }] }];
     } });
 class DbxDefaultSearchableFieldDisplayComponent extends AbstractDbxSearchableFieldDisplayDirective {
 }
-DbxDefaultSearchableFieldDisplayComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxDefaultSearchableFieldDisplayComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-DbxDefaultSearchableFieldDisplayComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.4", type: DbxDefaultSearchableFieldDisplayComponent, selector: "dbx-default-searchable-field-display", usesInheritance: true, ngImport: i0, template: `
+DbxDefaultSearchableFieldDisplayComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxDefaultSearchableFieldDisplayComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+DbxDefaultSearchableFieldDisplayComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", 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.4", ngImport: i0, type: DbxDefaultSearchableFieldDisplayComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxDefaultSearchableFieldDisplayComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'dbx-default-searchable-field-display',
@@ -1844,17 +1951,17 @@ class AbstractDbxSearchableValueFieldDirective extends FieldType$1 {
         this.formControl$ = this._formControlObs.pipe(filterMaybe());
         this._displayHashMap = new BehaviorSubject(new Map());
         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 !== null && text !== void 0 ? text : '') : of([])).pipe(switchMap$1((x) => this.loadDisplayValuesForFieldValues(x)), 
+        this.inputValueString$ = this.inputValue$.pipe(debounceTime(200), distinctUntilChanged());
+        this.searchResultsState$ = this.inputValueString$.pipe(switchMap((text) => ((text || this.searchOnEmptyText) ? this.search(text !== null && text !== void 0 ? text : '') : of([])).pipe(switchMap((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: false });
-        this.searchResults$ = this.searchResultsState$.pipe(map$1(x => { var _a; return (_a = x === null || x === void 0 ? void 0 : x.value) !== null && _a !== void 0 ? _a : []; }));
-        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));
-        this.displayValuesState$ = this.values$.pipe(distinctUntilChanged$1(), switchMap$1((values) => this.loadDisplayValuesForValues(values)), shareReplay$1(1));
-        this.displayValues$ = this.displayValuesState$.pipe(map$1(x => { var _a; return (_a = x === null || x === void 0 ? void 0 : x.value) !== null && _a !== void 0 ? _a : []; }));
+        this.searchResults$ = this.searchResultsState$.pipe(map(x => { var _a; return (_a = x === null || x === void 0 ? void 0 : x.value) !== null && _a !== void 0 ? _a : []; }));
+        this._formControlValue = this.formControl$.pipe(switchMap(control => control.valueChanges.pipe(startWith(control.value), shareReplay$1(1))));
+        this.values$ = this._formControlValue.pipe(map(convertMaybeToArray), shareReplay$1(1));
+        this.displayValuesState$ = this.values$.pipe(distinctUntilChanged(), switchMap((values) => this.loadDisplayValuesForValues(values)), shareReplay$1(1));
+        this.displayValues$ = this.displayValuesState$.pipe(map(x => { var _a; return (_a = x === null || x === void 0 ? void 0 : x.value) !== null && _a !== void 0 ? _a : []; }));
     }
     get name() {
         var _a, _b;
@@ -1917,7 +2024,7 @@ class AbstractDbxSearchableValueFieldDirective extends FieldType$1 {
         return this.loadDisplayValuesForFieldValues(values.map((value) => ({ value })));
     }
     loadDisplayValuesForFieldValues(values) {
-        return this.getDisplayValuesForFieldValues(values).pipe(map$1((displayValues) => successResult(displayValues)), startWith(beginLoading()), shareReplay$1(1));
+        return this.getDisplayValuesForFieldValues(values).pipe(map((displayValues) => successResult(displayValues)), startWith(beginLoading()), shareReplay$1(1));
     }
     getDisplayValuesForFieldValues(values) {
         return this._displayHashMap.pipe(mergeMap((displayMap) => {
@@ -1930,16 +2037,16 @@ class AbstractDbxSearchableValueFieldDirective extends FieldType$1 {
             if (needsDisplay.length > 0) {
                 // Go get the display value.
                 const displayValuesObs = this.displayForValue(needsDisplay.map(x => x[2]));
-                const defaultDisplay = mergeDbxInjectedComponentConfigs([this.defaultDisplay, this.display]);
+                const defaultDisplay = mergeDbxInjectionComponentConfigs([this.defaultDisplay, this.display]);
                 const anchorForValue = this.useAnchor && this.anchorForValue;
-                obs = displayValuesObs.pipe(first$1(), map$1((displayResults) => {
+                obs = displayValuesObs.pipe(first(), map((displayResults) => {
                     // Assign the default component classes to complete configuration.
                     displayResults.forEach(x => {
                         if (!x.display) {
                             x.display = defaultDisplay;
                         }
                         else {
-                            x.display = mergeDbxInjectedComponentConfigs([defaultDisplay, x.display]);
+                            x.display = mergeDbxInjectionComponentConfigs([defaultDisplay, x.display]);
                         }
                         if (!x.anchor && anchorForValue) {
                             x.anchor = anchorForValue(x);
@@ -1965,7 +2072,6 @@ class AbstractDbxSearchableValueFieldDirective extends FieldType$1 {
     }
     ngOnInit() {
         var _a;
-        super.ngOnInit();
         this._formControlObs.next(this.formControl);
         if (this.searchableField.textInputValidator) {
             this.inputCtrl.setValidators(this.searchableField.textInputValidator);
@@ -2067,9 +2173,9 @@ class AbstractDbxSearchableValueFieldDirective extends FieldType$1 {
         this.formControl.markAsTouched();
     }
 }
-AbstractDbxSearchableValueFieldDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: AbstractDbxSearchableValueFieldDirective, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
-AbstractDbxSearchableValueFieldDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.4", type: AbstractDbxSearchableValueFieldDirective, viewQueries: [{ propertyName: "textInput", first: true, predicate: ["textInput"], descendants: true }], usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: AbstractDbxSearchableValueFieldDirective, decorators: [{
+AbstractDbxSearchableValueFieldDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AbstractDbxSearchableValueFieldDirective, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
+AbstractDbxSearchableValueFieldDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.2", type: AbstractDbxSearchableValueFieldDirective, viewQueries: [{ propertyName: "textInput", first: true, predicate: ["textInput"], descendants: true }], usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AbstractDbxSearchableValueFieldDirective, decorators: [{
             type: Directive
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { textInput: [{
                 type: ViewChild,
@@ -2118,9 +2224,9 @@ class DbxSearchableChipFieldComponent extends AbstractDbxSearchableValueFieldDir
         this._blur.next();
     }
 }
-DbxSearchableChipFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxSearchableChipFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-DbxSearchableChipFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.4", 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.4", ngImport: i0, type: DbxSearchableChipFieldComponent, decorators: [{
+DbxSearchableChipFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxSearchableChipFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+DbxSearchableChipFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", 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.3.2", ngImport: i0, type: DbxSearchableChipFieldComponent, decorators: [{
             type: Component,
             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" }]
         }] });
@@ -2137,7 +2243,7 @@ function makeMetaFilterSearchableFieldValueDisplayFn({ loadMetaForValues, makeDi
         let allValues;
         if (needLoading.length > 0) {
             const loadingResult = loadMetaForValues(needLoading);
-            allValues = loadingResult.pipe(map((result) => {
+            allValues = loadingResult.pipe(map$1((result) => {
                 const resultMap = arrayToMap(result, (x) => x.value);
                 const mergedWithLoad = needLoading.map((x) => {
                     var _a;
@@ -2149,12 +2255,12 @@ function makeMetaFilterSearchableFieldValueDisplayFn({ loadMetaForValues, makeDi
                         meta });
                 }).filter(x => !x.meta);
                 return mergedWithLoad;
-            }), map((result) => [...loaded, ...result]));
+            }), map$1((result) => [...loaded, ...result]));
         }
         else {
             allValues = of(loaded);
         }
-        return allValues.pipe(switchMap$1((x) => makeDisplayForValues(x)));
+        return allValues.pipe(switchMap((x) => makeDisplayForValues(x)));
     };
 }
 function searchableStringChipField(config) {
@@ -2180,9 +2286,9 @@ 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.selectedDisplayValue$ = this.displayValues$.pipe(map(x => x[0]), shareReplay$1(1), tapDetectChanges(this.cdRef));
+        this.hasValue$ = this.selectedDisplayValue$.pipe(map(x => Boolean(x)));
+        this.showSelectedDisplayValue$ = this.selectedDisplayValue$.pipe(map(x => this.showSelectedValue && Boolean(x)), distinctUntilChanged(), shareReplay$1(1), tapDetectChanges(this.cdRef));
         this.multiSelect = false;
         this._clearInputSub = new SubscriptionObject();
     }
@@ -2210,17 +2316,17 @@ class DbxSearchableTextFieldComponent extends AbstractDbxSearchableValueFieldDir
         this.addWithDisplayValue(e.option.value);
     }
 }
-DbxSearchableTextFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxSearchableTextFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-DbxSearchableTextFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.4", 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.4", ngImport: i0, type: DbxSearchableTextFieldComponent, decorators: [{
+DbxSearchableTextFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxSearchableTextFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+DbxSearchableTextFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", 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.3.2", ngImport: i0, type: DbxSearchableTextFieldComponent, decorators: [{
             type: Component,
             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 {
 }
-DbxFormFormlySearchableFieldModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxFormFormlySearchableFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-DbxFormFormlySearchableFieldModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxFormFormlySearchableFieldModule, declarations: [DbxSearchableChipFieldComponent,
+DbxFormFormlySearchableFieldModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxFormFormlySearchableFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+DbxFormFormlySearchableFieldModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxFormFormlySearchableFieldModule, declarations: [DbxSearchableChipFieldComponent,
         DbxSearchableTextFieldComponent,
         DbxSearchableFieldAutocompleteItemComponent,
         DbxDefaultSearchableFieldDisplayComponent], imports: [CommonModule,
@@ -2235,12 +2341,12 @@ DbxFormFormlySearchableFieldModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion
         MatAutocompleteModule,
         MatListModule,
         DbxDatePipeModule,
-        DbxAnchorModule,
+        DbxRouterAnchorModule,
         MatChipsModule,
         MatIconModule,
-        DbxInjectedComponentModule, i1$4.FormlyModule], exports: [DbxSearchableChipFieldComponent,
+        DbxInjectionComponentModule, i1$4.FormlyModule], exports: [DbxSearchableChipFieldComponent,
         DbxSearchableTextFieldComponent] });
-DbxFormFormlySearchableFieldModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxFormFormlySearchableFieldModule, imports: [[
+DbxFormFormlySearchableFieldModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxFormFormlySearchableFieldModule, imports: [[
             CommonModule,
             DbxTextModule,
             DbxLoadingModule,
@@ -2253,10 +2359,10 @@ DbxFormFormlySearchableFieldModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion
             MatAutocompleteModule,
             MatListModule,
             DbxDatePipeModule,
-            DbxAnchorModule,
+            DbxRouterAnchorModule,
             MatChipsModule,
             MatIconModule,
-            DbxInjectedComponentModule,
+            DbxInjectionComponentModule,
             FormlyModule.forChild({
                 types: [
                     { name: 'searchablechipfield', component: DbxSearchableChipFieldComponent, wrappers: ['form-field'] },
@@ -2264,7 +2370,7 @@ DbxFormFormlySearchableFieldModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion
                 ]
             })
         ]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxFormFormlySearchableFieldModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxFormFormlySearchableFieldModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -2280,10 +2386,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImpor
                         MatAutocompleteModule,
                         MatListModule,
                         DbxDatePipeModule,
-                        DbxAnchorModule,
+                        DbxRouterAnchorModule,
                         MatChipsModule,
                         MatIconModule,
-                        DbxInjectedComponentModule,
+                        DbxInjectionComponentModule,
                         FormlyModule.forChild({
                             types: [
                                 { name: 'searchablechipfield', component: DbxSearchableChipFieldComponent, wrappers: ['form-field'] },
@@ -2313,14 +2419,14 @@ function chipTextField(config) {
 
 class DbxFormFormlySelectionModule {
 }
-DbxFormFormlySelectionModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxFormFormlySelectionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-DbxFormFormlySelectionModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxFormFormlySelectionModule, imports: [CommonModule], exports: [DbxFormFormlyPickableFieldModule,
+DbxFormFormlySelectionModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxFormFormlySelectionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+DbxFormFormlySelectionModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxFormFormlySelectionModule, imports: [CommonModule], exports: [DbxFormFormlyPickableFieldModule,
         DbxFormFormlySearchableFieldModule] });
-DbxFormFormlySelectionModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxFormFormlySelectionModule, imports: [[
+DbxFormFormlySelectionModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxFormFormlySelectionModule, imports: [[
             CommonModule
         ], DbxFormFormlyPickableFieldModule,
         DbxFormFormlySearchableFieldModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxFormFormlySelectionModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxFormFormlySelectionModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -2361,10 +2467,9 @@ class DbxTextEditorFieldComponent extends FieldType$1 {
         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._sub.subscription = this.editor.valueChanges.pipe(debounceTime$1(100), filter$1(_ => this.editor.view.hasFocus())).subscribe(() => {
             this.formControl.updateValueAndValidity();
             this.formControl.markAsDirty();
         });
@@ -2378,8 +2483,8 @@ class DbxTextEditorFieldComponent extends FieldType$1 {
         this._sub.destroy();
     }
 }
-DbxTextEditorFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", 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.4", type: DbxTextEditorFieldComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
+DbxTextEditorFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", 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.3.2", 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">
@@ -2393,7 +2498,7 @@ DbxTextEditorFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.
       </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.4", ngImport: i0, type: DbxTextEditorFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxTextEditorFieldComponent, decorators: [{
             type: Component,
             args: [{
                     template: `
@@ -2419,15 +2524,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImpor
 
 class DbxFormFormlyTextEditorFieldModule {
 }
-DbxFormFormlyTextEditorFieldModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxFormFormlyTextEditorFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-DbxFormFormlyTextEditorFieldModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxFormFormlyTextEditorFieldModule, declarations: [DbxTextEditorFieldComponent], imports: [CommonModule,
+DbxFormFormlyTextEditorFieldModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxFormFormlyTextEditorFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+DbxFormFormlyTextEditorFieldModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.2", 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.4", ngImport: i0, type: DbxFormFormlyTextEditorFieldModule, imports: [[
+DbxFormFormlyTextEditorFieldModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxFormFormlyTextEditorFieldModule, imports: [[
             CommonModule,
             DbxTextModule,
             FormsModule,
@@ -2441,7 +2546,7 @@ DbxFormFormlyTextEditorFieldModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion
                 ]
             })
         ]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxFormFormlyTextEditorFieldModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxFormFormlyTextEditorFieldModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -2539,11 +2644,11 @@ class DbxFormRepeatArrayTypeComponent extends FieldArrayType {
     }
     labelForItem(field) {
         var _a;
-        return getValueFromObjectOrGetter((_a = this.repeatArrayField.labelForField) !== null && _a !== void 0 ? _a : '', field);
+        return getValueFromGetter((_a = this.repeatArrayField.labelForField) !== null && _a !== void 0 ? _a : '', field);
     }
 }
-DbxFormRepeatArrayTypeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxFormRepeatArrayTypeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-DbxFormRepeatArrayTypeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.4", type: DbxFormRepeatArrayTypeComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
+DbxFormRepeatArrayTypeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxFormRepeatArrayTypeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+DbxFormRepeatArrayTypeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: DbxFormRepeatArrayTypeComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
     <div class="dbx-form-repeat-array">
       <dbx-subsection [header]="label">
         <!-- Fields -->
@@ -2566,8 +2671,8 @@ DbxFormRepeatArrayTypeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion:
         </div>
       </dbx-subsection>
     </div>
-  `, 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.4", ngImport: i0, type: DbxFormRepeatArrayTypeComponent, 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$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: i1$1.DbxButtonSpacerDirective, selector: "dbx-button-spacer,dbxButtonSpacer" }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxFormRepeatArrayTypeComponent, decorators: [{
             type: Component,
             args: [{
                     template: `
@@ -2599,8 +2704,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImpor
 
 class DbxFormFormlyArrayFieldModule {
 }
-DbxFormFormlyArrayFieldModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxFormFormlyArrayFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-DbxFormFormlyArrayFieldModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxFormFormlyArrayFieldModule, declarations: [DbxFormRepeatArrayTypeComponent], imports: [CommonModule,
+DbxFormFormlyArrayFieldModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxFormFormlyArrayFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+DbxFormFormlyArrayFieldModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxFormFormlyArrayFieldModule, declarations: [DbxFormRepeatArrayTypeComponent], imports: [CommonModule,
         MatFormFieldModule,
         ReactiveFormsModule,
         MatDividerModule,
@@ -2610,7 +2715,7 @@ DbxFormFormlyArrayFieldModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12
         DbxSectionLayoutModule,
         DbxBarLayoutModule,
         DbxButtonModule, i1$4.FormlyModule] });
-DbxFormFormlyArrayFieldModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxFormFormlyArrayFieldModule, imports: [[
+DbxFormFormlyArrayFieldModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxFormFormlyArrayFieldModule, imports: [[
             CommonModule,
             MatFormFieldModule,
             ReactiveFormsModule,
@@ -2627,7 +2732,7 @@ DbxFormFormlyArrayFieldModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12
                 ]
             })
         ]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxFormFormlyArrayFieldModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxFormFormlyArrayFieldModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -2669,10 +2774,10 @@ function repeatArrayField(config) {
 
 class DbxFormFormlyBooleanFieldModule {
 }
-DbxFormFormlyBooleanFieldModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxFormFormlyBooleanFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-DbxFormFormlyBooleanFieldModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxFormFormlyBooleanFieldModule });
-DbxFormFormlyBooleanFieldModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxFormFormlyBooleanFieldModule, imports: [[]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxFormFormlyBooleanFieldModule, decorators: [{
+DbxFormFormlyBooleanFieldModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxFormFormlyBooleanFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+DbxFormFormlyBooleanFieldModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxFormFormlyBooleanFieldModule });
+DbxFormFormlyBooleanFieldModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxFormFormlyBooleanFieldModule, imports: [[]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxFormFormlyBooleanFieldModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [],
@@ -2710,21 +2815,21 @@ export function acceptTermsField({ key = 'accept', label = 'Accept Terms', descr
 }
 */
 
-var DateTimeFieldTimeMode;
-(function (DateTimeFieldTimeMode) {
+var DbxDateTimeFieldTimeMode;
+(function (DbxDateTimeFieldTimeMode) {
     /**
      * Time is required.
      */
-    DateTimeFieldTimeMode["REQUIRED"] = "required";
+    DbxDateTimeFieldTimeMode["REQUIRED"] = "required";
     /**
      * Time is optional.
      */
-    DateTimeFieldTimeMode["OPTIONAL"] = "optional";
+    DbxDateTimeFieldTimeMode["OPTIONAL"] = "optional";
     /**
      * Time is permenantly off.
      */
-    DateTimeFieldTimeMode["NONE"] = "none";
-})(DateTimeFieldTimeMode || (DateTimeFieldTimeMode = {}));
+    DbxDateTimeFieldTimeMode["NONE"] = "none";
+})(DbxDateTimeFieldTimeMode || (DbxDateTimeFieldTimeMode = {}));
 class DbxDateTimeFieldComponent extends FieldType$1 {
     constructor(cdRef) {
         super();
@@ -2737,35 +2842,37 @@ class DbxDateTimeFieldComponent extends FieldType$1 {
         this._formControlObs = new BehaviorSubject(undefined);
         this.formControl$ = this._formControlObs.pipe(filterMaybe());
         this._updateTime = new Subject();
-        this.value$ = this.formControl$.pipe(switchMap(control => control.valueChanges.pipe(startWith$1(control.value))), distinctUntilChanged((a, b) => isSameMinute(a, b)), shareReplay(1));
+        this.value$ = this.formControl$.pipe(switchMap$1(control => control.valueChanges.pipe(startWith$1(control.value))), distinctUntilChanged$1((a, b) => isSameMinute(a, b)), shareReplay(1));
         /**
          * 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(filterMaybe(), map((x) => {
+        this.displayValue$ = interval(10 * 1000).pipe(startWith$1(0), map$1(_ => new Date().getMinutes()), distinctUntilChanged$1(), tap((_) => this.cdRef.markForCheck()), switchMap$1(_ => this.value$), shareReplay(1));
+        this.timeString$ = this.value$.pipe(filterMaybe(), map$1((x) => {
             const timezone = guessCurrentTimezone();
             const timeString = toReadableTimeString(x, timezone);
             return timeString;
         }));
+        this.dateInputCtrl = new FormControl(new Date(), {
+            validators: []
+        });
         this.timeInputCtrl = new FormControl('', {
             validators: [
-                Validators.pattern(/^([0-9]|(0[0-9])|(1[0-9])|(2[0-3]))(:)?([0-5][0-9])?(\s)?([apAP][Mm])?(\\s)*$/)
+                Validators.pattern(/^(now)$|^([0-9]|(0[0-9])|(1[0-9])|(2[0-3]))(:)?([0-5][0-9])?(\s)?([apAP][Mm])?(\\s)*$/)
             ]
         });
-        this._date = new BehaviorSubject(new Date());
         this._config = new BehaviorSubject(undefined);
-        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.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.fullDay$ = this.fullDayControl$.pipe(switchMap$1(control => control.valueChanges.pipe(startWith$1(control.value))));
+        this.showTimeInput$ = this.fullDay$.pipe(map$1(x => !x && this.timeMode !== DbxDateTimeFieldTimeMode.NONE));
+        this.showAddTime$ = this.showTimeInput$.pipe(map$1(x => !x && this.timeMode === DbxDateTimeFieldTimeMode.OPTIONAL), shareReplay(1));
+        this.date$ = this.dateInputCtrl.valueChanges.pipe(startWith$1(this.dateInputCtrl.value), filterMaybe(), shareReplay(1));
+        this.dateValue$ = merge(this.date$, this.value$.pipe(skipFirstMaybe())).pipe(map$1((x) => (x) ? startOfDay(x) : x), distinctUntilChanged$1((a, b) => Boolean(a && b) && isSameDay(a, b)), shareReplay(1));
+        this.timeInput$ = this._updateTime.pipe(debounceTime$1(5), map$1(_ => this.timeInputCtrl.value), distinctUntilChanged$1());
         this.config$ = this._config.pipe(switchMapMaybeDefault(), shareReplay(1));
         this.rawDateTime$ = combineLatest([
             this.dateValue$,
             this.timeInput$.pipe(startWith$1(null)),
             this.fullDay$
-        ]).pipe(map(([date, timeString, fullDay]) => {
+        ]).pipe(map$1(([date, timeString, fullDay]) => {
             var _a;
             let result;
             if (date) {
@@ -2788,12 +2895,12 @@ class DbxDateTimeFieldComponent extends FieldType$1 {
                 }
             }
             return result;
-        }), distinctUntilChanged((a, b) => Boolean(a && b) && isSameMinute(a, b)), shareReplay(1));
+        }), distinctUntilChanged$1((a, b) => Boolean(a && b) && isSameMinute(a, b)), shareReplay(1));
         this.timeOutput$ = combineLatest([
             this.rawDateTime$,
             this._offset,
-            this.config$.pipe(distinctUntilChanged()),
-        ]).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]) => {
+            this.config$.pipe(distinctUntilChanged$1()),
+        ]).pipe(throttleTime(40, undefined, { leading: false, trailing: true }), distinctUntilChanged$1((current, next) => current[0] === next[0] && next[1] === 0), tap(([_, stepsOffset]) => (stepsOffset) ? this._offset.next(0) : 0), map$1(([date, stepsOffset, config]) => {
             if (date != null) {
                 const instance = new DateTimeMinuteInstance(Object.assign(Object.assign({ date }, config), { roundDownToMinute: true }));
                 date = instance.limit(date);
@@ -2801,10 +2908,10 @@ class DbxDateTimeFieldComponent extends FieldType$1 {
                 date = addMinutes(date, minutes);
             }
             return date;
-        }), distinctUntilChanged((a, b) => Boolean(a && b) && isSameMinute(a, b)), shareReplay(1));
+        }), distinctUntilChanged$1((a, b) => Boolean(a && b) && isSameMinute(a, b)), shareReplay(1));
     }
     get dateOnly() {
-        return this.timeMode === DateTimeFieldTimeMode.NONE;
+        return this.timeMode === DbxDateTimeFieldTimeMode.NONE;
     }
     get dateTimeField() {
         return this.field.dateTimeField;
@@ -2817,7 +2924,7 @@ class DbxDateTimeFieldComponent extends FieldType$1 {
     }
     get timeMode() {
         var _a;
-        return (this.timeOnly) ? DateTimeFieldTimeMode.REQUIRED : ((_a = this.dateTimeField.timeMode) !== null && _a !== void 0 ? _a : DateTimeFieldTimeMode.REQUIRED);
+        return (this.timeOnly) ? DbxDateTimeFieldTimeMode.REQUIRED : ((_a = this.dateTimeField.timeMode) !== null && _a !== void 0 ? _a : DbxDateTimeFieldTimeMode.REQUIRED);
     }
     get description() {
         var _a;
@@ -2825,7 +2932,6 @@ class DbxDateTimeFieldComponent extends FieldType$1 {
     }
     ngOnInit() {
         var _a, _b;
-        super.ngOnInit();
         this._formControlObs.next(this.formControl);
         this._config.next((_b = (_a = this.dateTimeField).getConfigObs) === null || _b === void 0 ? void 0 : _b.call(_a));
         this._sub.subscription = this.timeOutput$.pipe(skipFirstMaybe()).subscribe((value) => {
@@ -2838,7 +2944,18 @@ class DbxDateTimeFieldComponent extends FieldType$1 {
             if (!this.timeInputCtrl.value && x === '12:00AM') {
                 return;
             }
-            this.timeInputCtrl.setValue(x);
+            this.setTime(x);
+        });
+        // Watch for disabled changes so we can propogate them properly.
+        this.formControl.registerOnDisabledChange((disabled) => {
+            if (disabled) {
+                this.dateInputCtrl.disable({ emitEvent: false });
+                this.timeInputCtrl.disable({ emitEvent: false });
+            }
+            else {
+                this.dateInputCtrl.enable({ emitEvent: false });
+                this.timeInputCtrl.enable({ emitEvent: false });
+            }
         });
         const isFullDayField = this.dateTimeField.fullDayFieldName;
         let fullDayFieldCtrl;
@@ -2855,38 +2972,40 @@ class DbxDateTimeFieldComponent extends FieldType$1 {
         }
         this._fullDayControlObs.next(fullDayFieldCtrl);
         switch (this.dateTimeField.timeMode) {
-            case DateTimeFieldTimeMode.OPTIONAL:
+            case DbxDateTimeFieldTimeMode.OPTIONAL:
                 break;
-            case DateTimeFieldTimeMode.NONE:
+            case DbxDateTimeFieldTimeMode.NONE:
                 this.removeTime();
                 break;
-            case DateTimeFieldTimeMode.REQUIRED:
+            case DbxDateTimeFieldTimeMode.REQUIRED:
                 this.addTime();
                 break;
         }
     }
     ngOnDestroy() {
         super.ngOnDestroy();
+        this._fullDayControlObs.complete();
+        this._offset.complete();
         this._formControlObs.complete();
-        this._date.complete();
-        this._updateTime.complete();
         this._config.complete();
+        this._updateTime.complete();
         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) {
-            this._date.next(date);
+            this.dateInputCtrl.setValue(date);
             this._updateTime.next();
         }
     }
+    setLogicalTime(time) {
+        const date = dateFromLogicalDate(time);
+        if (date) {
+            const timeString = toLocalReadableTimeString(date);
+            this.setTime(timeString);
+        }
+    }
     setTime(time) {
         this.timeInputCtrl.setValue(time);
         this._offset.next(0);
@@ -2930,25 +3049,22 @@ class DbxDateTimeFieldComponent extends FieldType$1 {
         this.setFullDay(true);
     }
     setFullDay(fullDay) {
-        this.fullDayControl$.pipe(first()).subscribe((x) => {
+        this.fullDayControl$.pipe(first$1()).subscribe((x) => {
             x.setValue(fullDay);
         });
     }
 }
-DbxDateTimeFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxDateTimeFieldComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-DbxDateTimeFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.4", 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.4", ngImport: i0, type: DbxDateTimeFieldComponent, decorators: [{
+DbxDateTimeFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxDateTimeFieldComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+DbxDateTimeFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", 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]=\"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()\" [disabled]=\"disabled\">\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 [formControl]=\"dateInputCtrl\" [matDatepicker]=\"picker\" (dateChange)=\"datePicked($event)\"\n      [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\" [disabled]=\"disabled\">\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)=\"setLogicalTime('now')\">\n      <span>Now</span>\n    </button>\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$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$4.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { type: i4$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i5$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }], pipes: { "async": i5.AsyncPipe, "date": i5.DatePipe, "dateDistance": i2.DateDistancePipe, "timeDistance": i2.TimeDistancePipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", 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]=\"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 }]
-            }] } });
+            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()\" [disabled]=\"disabled\">\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 [formControl]=\"dateInputCtrl\" [matDatepicker]=\"picker\" (dateChange)=\"datePicked($event)\"\n      [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\" [disabled]=\"disabled\">\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)=\"setLogicalTime('now')\">\n      <span>Now</span>\n    </button>\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 }]; } });
 
 class DbxFormFormlyDateFieldModule {
 }
-DbxFormFormlyDateFieldModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxFormFormlyDateFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-DbxFormFormlyDateFieldModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxFormFormlyDateFieldModule, declarations: [DbxDateTimeFieldComponent], imports: [CommonModule,
+DbxFormFormlyDateFieldModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxFormFormlyDateFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+DbxFormFormlyDateFieldModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxFormFormlyDateFieldModule, declarations: [DbxDateTimeFieldComponent], imports: [CommonModule,
         FormsModule,
         MatInputModule,
         MatDividerModule,
@@ -2962,7 +3078,7 @@ DbxFormFormlyDateFieldModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.
         MatChipsModule,
         MatIconModule,
         FlexLayoutModule, i1$4.FormlyModule], exports: [DbxFormFormlyWrapperModule] });
-DbxFormFormlyDateFieldModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxFormFormlyDateFieldModule, imports: [[
+DbxFormFormlyDateFieldModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxFormFormlyDateFieldModule, imports: [[
             CommonModule,
             FormsModule,
             MatInputModule,
@@ -2983,7 +3099,7 @@ DbxFormFormlyDateFieldModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.
                 ]
             })
         ], DbxFormFormlyWrapperModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxFormFormlyDateFieldModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxFormFormlyDateFieldModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -3023,13 +3139,13 @@ const TAKE_NEXT_UPCOMING_TIME_CONFIG_OBS = () => of({
 /**
  * Same as DateTime field but with the Date input hidden by default.
  */
-function timeOnlyField(config) {
-    return dateTimeField(Object.assign(Object.assign({}, config), { timeMode: DateTimeFieldTimeMode.REQUIRED, timeOnly: true }));
+function timeOnlyField(config = {}) {
+    return dateTimeField(Object.assign(Object.assign({}, config), { timeMode: DbxDateTimeFieldTimeMode.REQUIRED, timeOnly: true }));
 }
-function dateTimeField(config) {
-    const { key = 'date', timeMode = DateTimeFieldTimeMode.REQUIRED, fullDayFieldName, getConfigObs, timeOnly = false } = config;
+function dateTimeField(config = {}) {
+    const { key = 'date', timeMode = DbxDateTimeFieldTimeMode.REQUIRED, fullDayFieldName, getConfigObs, timeOnly = false } = config;
     const fieldConfig = formlyField(Object.assign(Object.assign({ key, type: 'datetime', dateTimeField: {
-            timeMode: (timeOnly) ? DateTimeFieldTimeMode.REQUIRED : timeMode,
+            timeMode: (timeOnly) ? DbxDateTimeFieldTimeMode.REQUIRED : timeMode,
             fullDayFieldName,
             getConfigObs,
             timeOnly,
@@ -3058,10 +3174,10 @@ function staticEnumField({ key, label = '', placeholder = '', description, multi
 
 class DbxFormFormlyEnumFieldModule {
 }
-DbxFormFormlyEnumFieldModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxFormFormlyEnumFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-DbxFormFormlyEnumFieldModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxFormFormlyEnumFieldModule });
-DbxFormFormlyEnumFieldModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxFormFormlyEnumFieldModule, imports: [[]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxFormFormlyEnumFieldModule, decorators: [{
+DbxFormFormlyEnumFieldModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxFormFormlyEnumFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+DbxFormFormlyEnumFieldModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxFormFormlyEnumFieldModule });
+DbxFormFormlyEnumFieldModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxFormFormlyEnumFieldModule, imports: [[]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxFormFormlyEnumFieldModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [],
@@ -3086,17 +3202,17 @@ class DbxPhoneFieldComponent extends FieldType$1 {
         return (_a = this.phoneField.onlyCountries) !== null && _a !== void 0 ? _a : [];
     }
 }
-DbxPhoneFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxPhoneFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-DbxPhoneFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.4", 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.4", ngImport: i0, type: DbxPhoneFieldComponent, decorators: [{
+DbxPhoneFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxPhoneFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+DbxPhoneFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", 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.3.2", ngImport: i0, type: DbxPhoneFieldComponent, decorators: [{
             type: Component,
             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.4", ngImport: i0, type: DbxFormFormlyPhoneFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-DbxFormFormlyPhoneFieldModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxFormFormlyPhoneFieldModule, declarations: [DbxPhoneFieldComponent], imports: [CommonModule,
+DbxFormFormlyPhoneFieldModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxFormFormlyPhoneFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+DbxFormFormlyPhoneFieldModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxFormFormlyPhoneFieldModule, declarations: [DbxPhoneFieldComponent], imports: [CommonModule,
         MatInputModule,
         MatFormFieldModule,
         FormsModule,
@@ -3107,7 +3223,7 @@ DbxFormFormlyPhoneFieldModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12
         MatIconModule,
         FlexLayoutModule,
         FormlyMatFormFieldModule, i1$4.FormlyModule] });
-DbxFormFormlyPhoneFieldModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxFormFormlyPhoneFieldModule, imports: [[
+DbxFormFormlyPhoneFieldModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxFormFormlyPhoneFieldModule, imports: [[
             CommonModule,
             MatInputModule,
             MatFormFieldModule,
@@ -3125,7 +3241,7 @@ DbxFormFormlyPhoneFieldModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12
                 ]
             })
         ]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxFormFormlyPhoneFieldModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxFormFormlyPhoneFieldModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -3160,6 +3276,7 @@ const SUBSECTION_WRAPPER_KEY = 'subsection';
 const INFO_WRAPPER_KEY = 'info';
 const FLEX_WRAPPER_KEY = 'flex';
 const STYLE_WRAPPER_KEY = 'style';
+const WORKING_WRAPPER_KEY = 'working';
 function addWrapperToFormlyFieldConfig(fieldConfig, wrapperKey, wrapperTemplateOptionsConfig) {
     fieldConfig.templateOptions = Object.assign(Object.assign({}, fieldConfig.templateOptions), wrapperTemplateOptionsConfig);
     return {
@@ -3198,6 +3315,11 @@ function styleWrapper(fieldConfig, styleWrapper) {
         styleWrapper
     });
 }
+function workingWrapper(fieldConfig, workingWrapper) {
+    return addWrapperToFormlyFieldConfig(fieldConfig, WORKING_WRAPPER_KEY, {
+        workingWrapper
+    });
+}
 function checkIsFieldFlexLayoutGroupFieldConfig(input) {
     if (input.field != null) {
         return true;
@@ -3229,8 +3351,9 @@ function flexLayoutWrapper(fieldConfigs, { relative, breakpoint, size: defaultSi
 }
 
 function textField(config) {
-    const { key, pattern, minLength, maxLength = 1000 } = config;
+    const { key, pattern, minLength, maxLength = 1000, inputType: type = 'text' } = config;
     return formlyField(Object.assign({ key, type: 'input' }, templateOptionsForFieldConfig(config, {
+        type,
         minLength,
         maxLength,
         pattern
@@ -3306,24 +3429,18 @@ 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 } = {}) {
-    return formlyField({
-        key,
-        type: 'input',
-        templateOptions: {
-            label,
-            placeholder,
-            description,
-            required,
-            readonly
-        },
-        validators: {
-            email: {
-                expression: (c) => !Validators.email(c),
-                message: () => `Not a valid email address.`
-            }
-        },
-    });
+function emailField(config = {}) {
+    const { key = 'email', label = 'Email Address', placeholder = 'you@example.com' } = config;
+    const emailFieldConfig = textField(Object.assign(Object.assign({}, config), { key,
+        label,
+        placeholder, inputType: 'email' }));
+    emailFieldConfig.validators = {
+        email: {
+            expression: (c) => !Validators.email(c),
+            message: () => `Not a valid email address.`
+        }
+    };
+    return emailFieldConfig;
 }
 function cityField({ key = 'city', required = false } = {}) {
     return textField({
@@ -3422,12 +3539,12 @@ function addressListField({ key = 'addresses', required = false, maxAddresses =
 
 class DbxFormFormlyTextFieldModule {
 }
-DbxFormFormlyTextFieldModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxFormFormlyTextFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-DbxFormFormlyTextFieldModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxFormFormlyTextFieldModule, imports: [FormlyMaterialModule], exports: [DbxFormFormlyWrapperModule] });
-DbxFormFormlyTextFieldModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxFormFormlyTextFieldModule, imports: [[
+DbxFormFormlyTextFieldModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxFormFormlyTextFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+DbxFormFormlyTextFieldModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxFormFormlyTextFieldModule, imports: [FormlyMaterialModule], exports: [DbxFormFormlyWrapperModule] });
+DbxFormFormlyTextFieldModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxFormFormlyTextFieldModule, imports: [[
             FormlyMaterialModule
         ], DbxFormFormlyWrapperModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxFormFormlyTextFieldModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxFormFormlyTextFieldModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -3449,14 +3566,14 @@ function hiddenField({ key, required = false }) {
 
 class DbxFormFormlyValueModule {
 }
-DbxFormFormlyValueModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxFormFormlyValueModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-DbxFormFormlyValueModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxFormFormlyValueModule, imports: [CommonModule], exports: [DbxFormFormlyArrayFieldModule,
+DbxFormFormlyValueModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxFormFormlyValueModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+DbxFormFormlyValueModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxFormFormlyValueModule, imports: [CommonModule], exports: [DbxFormFormlyArrayFieldModule,
         DbxFormFormlyBooleanFieldModule,
         DbxFormFormlyDateFieldModule,
         DbxFormFormlyEnumFieldModule,
         DbxFormFormlyPhoneFieldModule,
         DbxFormFormlyTextFieldModule] });
-DbxFormFormlyValueModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxFormFormlyValueModule, imports: [[
+DbxFormFormlyValueModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxFormFormlyValueModule, imports: [[
             CommonModule
         ], DbxFormFormlyArrayFieldModule,
         DbxFormFormlyBooleanFieldModule,
@@ -3464,7 +3581,7 @@ DbxFormFormlyValueModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0"
         DbxFormFormlyEnumFieldModule,
         DbxFormFormlyPhoneFieldModule,
         DbxFormFormlyTextFieldModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxFormFormlyValueModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxFormFormlyValueModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -3484,14 +3601,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImpor
 
 class DbxFormFormlyFieldModule {
 }
-DbxFormFormlyFieldModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxFormFormlyFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-DbxFormFormlyFieldModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxFormFormlyFieldModule, imports: [CommonModule], exports: [DbxFormFormlyChecklistItemFieldModule,
+DbxFormFormlyFieldModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxFormFormlyFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+DbxFormFormlyFieldModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxFormFormlyFieldModule, imports: [CommonModule], exports: [DbxFormFormlyChecklistItemFieldModule,
         DbxFormFormlyComponentFieldModule,
         DbxFormFormlySelectionModule,
         DbxFormFormlyTextEditorFieldModule,
         DbxFormFormlyValueModule,
         DbxFormFormlyWrapperModule] });
-DbxFormFormlyFieldModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxFormFormlyFieldModule, imports: [[
+DbxFormFormlyFieldModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxFormFormlyFieldModule, imports: [[
             CommonModule
         ], DbxFormFormlyChecklistItemFieldModule,
         DbxFormFormlyComponentFieldModule,
@@ -3499,7 +3616,7 @@ DbxFormFormlyFieldModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0"
         DbxFormFormlyTextEditorFieldModule,
         DbxFormFormlyValueModule,
         DbxFormFormlyWrapperModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxFormFormlyFieldModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxFormFormlyFieldModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -3517,6 +3634,147 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImpor
                 }]
         }] });
 
+const FIELD_VALUES_ARE_EQUAL_VALIDATION_KEY = 'fieldValuesAreEqual';
+/**
+ * Validator for validating all values within an object.
+ *
+ * This is useful for validating a control group where two or more values are expected to be the same, such as a password and a password verification field.
+ *
+ * @param config
+ * @returns
+ */
+function fieldValuesAreEqualValidator(config = {}) {
+    const { keysFilter, valuesFilter: inputValuesFilter, isEqual = ((a, b) => a === b), message = 'Field values are not equal.' } = config;
+    const valuesFilter = inputValuesFilter !== null && inputValuesFilter !== void 0 ? inputValuesFilter : {
+        valueFilter: KeyValueTypleValueFilter.NONE,
+        keysFilter
+    };
+    return (control) => {
+        const object = control.value;
+        const values = valuesFromPOJO(object, valuesFilter);
+        const isValid = allObjectsAreEqual(values, isEqual);
+        if (isValid) {
+            return null;
+        }
+        else {
+            return {
+                [FIELD_VALUES_ARE_EQUAL_VALIDATION_KEY]: { message }
+            };
+        }
+    };
+}
+
+;
+/**
+ * Configured simple text password field.
+ *
+ * @param config
+ * @returns
+ */
+function textPasswordField(config) {
+    var _a;
+    return textField(Object.assign(Object.assign({ key: 'password' }, config), { label: (_a = config === null || config === void 0 ? void 0 : config.label) !== null && _a !== void 0 ? _a : 'Password', inputType: 'password', required: true }));
+}
+/**
+ * Configured verify field for a password.
+ * @param config
+ * @returns
+ */
+function textVerifyPasswordField(config) {
+    return textPasswordField(Object.assign(Object.assign({ key: 'verifyPassword', label: 'Verify Password' }, config), { required: true }));
+}
+function textPasswordWithVerifyFieldGroup(config) {
+    var _a, _b, _c, _d, _e;
+    const passwordFieldConfig = textPasswordField(config.password);
+    const verifyPasswordFieldKey = (_b = (_a = config.verifyPassword) === null || _a === void 0 ? void 0 : _a.key) !== null && _b !== void 0 ? _b : `verify${capitalizeFirstLetter(String(passwordFieldConfig.key))}`;
+    const verifyPasswordField = textVerifyPasswordField(Object.assign(Object.assign(Object.assign({}, config.password), config.verifyPassword), { label: (_d = ((_c = config.verifyPassword) === null || _c === void 0 ? void 0 : _c.label)) !== null && _d !== void 0 ? _d : `Verify ${(_e = passwordFieldConfig.templateOptions) === null || _e === void 0 ? void 0 : _e.label}`, key: verifyPasswordFieldKey }));
+    const validators = {
+        validation: [{
+                errorPath: verifyPasswordFieldKey,
+                expression: fieldValuesAreEqualValidator({ keysFilter: [passwordFieldConfig.key, verifyPasswordField.key], message: 'The passwords do not match.' })
+            }]
+    };
+    const groupFieldConfig = {
+        validators,
+        fieldGroup: [passwordFieldConfig, verifyPasswordField]
+    };
+    return groupFieldConfig;
+}
+;
+/**
+ * Template for login field that takes in a username and password.
+ *
+ * @param param0
+ * @returns
+ */
+function usernamePasswordLoginFields({ username, password, verifyPassword }) {
+    let usernameField;
+    let usernameFieldConfig = username;
+    const defaultUsernameFieldConfig = { key: 'username', required: true };
+    if (typeof username === 'string') {
+        if (username === 'email') {
+            usernameFieldConfig = {
+                email: defaultUsernameFieldConfig
+            };
+        }
+        else {
+            usernameFieldConfig = {
+                username: defaultUsernameFieldConfig
+            };
+        }
+    }
+    if (usernameFieldConfig.email) {
+        usernameField = emailField(Object.assign(Object.assign({}, usernameFieldConfig.username), defaultUsernameFieldConfig));
+    }
+    else {
+        usernameField = textField(Object.assign(Object.assign({}, usernameFieldConfig.username), defaultUsernameFieldConfig));
+    }
+    const passwordField = (verifyPassword) ? (textPasswordWithVerifyFieldGroup({ password, verifyPassword: (verifyPassword === true) ? undefined : verifyPassword })) : textPasswordField(password);
+    return [
+        usernameField,
+        passwordField
+    ];
+}
+
+const FIELD_VALUE_IS_AVAILABLE_VALIDATION_KEY = 'fieldValueIsAvailable';
+const FIELD_VALUE_IS_AVAILABLE_ERROR_VALIDATION_KEY = 'fieldValueIsAvailableError';
+/**
+ * Validator for validating all values within an object.
+ *
+ * This is useful for validating a control group where two or more values are expected to be the same, such as a password and a password verification field.
+ *
+ * @param config
+ * @returns
+ */
+function fieldValueIsAvailableValidator(config) {
+    const { throttle = 400, checkValueIsAvailable, message = 'This value is not available.' } = config;
+    const pusher = asyncPusherCache({
+        throttle
+    });
+    return (control) => pusher(control.valueChanges)(control.value).pipe(switchMap$1((x) => checkValueIsAvailable(x)), map((isAvailable) => {
+        if (isAvailable) {
+            return null;
+        }
+        else {
+            return {
+                [FIELD_VALUE_IS_AVAILABLE_VALIDATION_KEY]: { message }
+            };
+        }
+    }), catchError(() => of({
+        [FIELD_VALUE_IS_AVAILABLE_ERROR_VALIDATION_KEY]: { message: 'An error occured.' }
+    })), first$1());
+}
+
+function textIsAvailableField(config) {
+    const field = textField(config);
+    field.asyncValidators = {
+        validation: [{
+                expression: fieldValueIsAvailableValidator(Object.assign(Object.assign({}, config), { message: config === null || config === void 0 ? void 0 : config.isNotAvailableErrorMessage })),
+            }]
+    };
+    return workingWrapper(field, {});
+}
+
 /**
  * Allows a directive to provide a formly context and form.
  */
@@ -3535,10 +3793,11 @@ class DbxFormlyContext {
         this.lockSet = new LockSet();
         this._fields = new BehaviorSubject(undefined);
         this._initialValue = new BehaviorSubject(undefined);
-        this._disabled = new BehaviorSubject(false);
+        this._disabled = new BehaviorSubject(undefined);
         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));
+        this.disabled$ = this._disabled.pipe(filterMaybe());
+        this.stream$ = this._delegate.pipe(distinctUntilChanged(), switchMap(x => (x) ? x.stream$ : of(DbxFormlyContext.INITIAL_STATE)), shareReplay$1(1));
     }
     destroy() {
         this.lockSet.destroyOnNextUnlock(() => {
@@ -3553,8 +3812,8 @@ class DbxFormlyContext {
             if (delegate != null) {
                 delegate.init({
                     fields: this.fields$,
-                    initialValue: this._initialValue.value,
-                    initialDisabled: this._disabled.value
+                    initialDisabled: this._disabled.value,
+                    initialValue: this._initialValue.value
                 });
             }
             this._delegate.next(delegate);
@@ -3573,7 +3832,7 @@ class DbxFormlyContext {
     }
     // MARK: FormComponent
     getValue() {
-        return this._delegate.pipe(filterMaybe(), switchMap$1(x => x.getValue()), shareReplay$1(1));
+        return this._delegate.pipe(filterMaybe(), switchMap(x => x.getValue()), shareReplay$1(1));
     }
     setValue(value) {
         this._initialValue.next(value);
@@ -3582,10 +3841,19 @@ class DbxFormlyContext {
         }
     }
     isDisabled() {
+        return BooleanStringKeyArrayUtilityInstance.isTrue(this.disabled);
+    }
+    get disabled() {
         return this._disabled.value;
     }
-    setDisabled(disabled = true) {
-        this._disabled.next(disabled);
+    getDisabled() {
+        return this._disabled.asObservable();
+    }
+    setDisabled(key, disabled = true) {
+        this._disabled.next(BooleanStringKeyArrayUtilityInstance.set(this.disabled, key !== null && key !== void 0 ? key : DEFAULT_FORM_DISABLED_KEY, disabled));
+        if (this._delegate.value) {
+            this._delegate.value.setDisabled(key, disabled);
+        }
     }
     resetForm() {
         if (this._delegate.value) {
@@ -3598,7 +3866,7 @@ class DbxFormlyContext {
         }
     }
 }
-DbxFormlyContext.INITIAL_STATE = { isComplete: false, state: DbxFormState.INITIALIZING };
+DbxFormlyContext.INITIAL_STATE = { isComplete: false, state: DbxFormState.INITIALIZING, status: 'PENDING' };
 
 /**
  * Abstract component for wrapping a form.
@@ -3611,7 +3879,7 @@ class AbstractFormlyFormDirective {
         return this.context.isDisabled();
     }
     set disabled(disabled) {
-        this.context.setDisabled(disabled);
+        this.context.setDisabled(undefined, disabled);
     }
     ngOnDestroy() {
         this.context.destroy();
@@ -3629,10 +3897,13 @@ class AbstractFormlyFormDirective {
     clearValue() {
         this.setValue({});
     }
+    setDisabled(key, disabled) {
+        this.context.setDisabled(key, disabled);
+    }
 }
-AbstractFormlyFormDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: AbstractFormlyFormDirective, deps: [{ token: DbxFormlyContext }], target: i0.ɵɵFactoryTarget.Directive });
-AbstractFormlyFormDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.4", type: AbstractFormlyFormDirective, inputs: { disabled: "disabled" }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: AbstractFormlyFormDirective, decorators: [{
+AbstractFormlyFormDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AbstractFormlyFormDirective, deps: [{ token: DbxFormlyContext }], target: i0.ɵɵFactoryTarget.Directive });
+AbstractFormlyFormDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.2", type: AbstractFormlyFormDirective, inputs: { disabled: "disabled" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AbstractFormlyFormDirective, decorators: [{
             type: Directive
         }], ctorParameters: function () { return [{ type: DbxFormlyContext }]; }, propDecorators: { disabled: [{
                 type: Input
@@ -3645,9 +3916,9 @@ class AbstractSyncFormlyFormDirective extends AbstractFormlyFormDirective {
         this.context.fields = this.fields;
     }
 }
-AbstractSyncFormlyFormDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: AbstractSyncFormlyFormDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-AbstractSyncFormlyFormDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.4", type: AbstractSyncFormlyFormDirective, usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: AbstractSyncFormlyFormDirective, decorators: [{
+AbstractSyncFormlyFormDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AbstractSyncFormlyFormDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+AbstractSyncFormlyFormDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.2", type: AbstractSyncFormlyFormDirective, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AbstractSyncFormlyFormDirective, decorators: [{
             type: Directive
         }] });
 /**
@@ -3659,7 +3930,7 @@ class AbstractAsyncFormlyFormDirective extends AbstractFormlyFormDirective {
         this._fieldsSub = new SubscriptionObject();
     }
     ngOnInit() {
-        this._fieldsSub.subscription = this.fields$.pipe(distinctUntilChanged$1()).subscribe((fields) => {
+        this._fieldsSub.subscription = this.fields$.pipe(distinctUntilChanged()).subscribe((fields) => {
             this.context.fields = fields;
         });
     }
@@ -3668,9 +3939,9 @@ class AbstractAsyncFormlyFormDirective extends AbstractFormlyFormDirective {
         this._fieldsSub.destroy();
     }
 }
-AbstractAsyncFormlyFormDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: AbstractAsyncFormlyFormDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-AbstractAsyncFormlyFormDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.4", type: AbstractAsyncFormlyFormDirective, usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: AbstractAsyncFormlyFormDirective, decorators: [{
+AbstractAsyncFormlyFormDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AbstractAsyncFormlyFormDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+AbstractAsyncFormlyFormDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.2", type: AbstractAsyncFormlyFormDirective, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AbstractAsyncFormlyFormDirective, decorators: [{
             type: Directive
         }] });
 class AbstractConfigAsyncFormlyFormDirective extends AbstractAsyncFormlyFormDirective {
@@ -3690,9 +3961,9 @@ class AbstractConfigAsyncFormlyFormDirective extends AbstractAsyncFormlyFormDire
         this._config.complete();
     }
 }
-AbstractConfigAsyncFormlyFormDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: AbstractConfigAsyncFormlyFormDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-AbstractConfigAsyncFormlyFormDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.4", type: AbstractConfigAsyncFormlyFormDirective, inputs: { config: "config" }, usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: AbstractConfigAsyncFormlyFormDirective, decorators: [{
+AbstractConfigAsyncFormlyFormDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AbstractConfigAsyncFormlyFormDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+AbstractConfigAsyncFormlyFormDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.2", type: AbstractConfigAsyncFormlyFormDirective, inputs: { config: "config" }, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AbstractConfigAsyncFormlyFormDirective, decorators: [{
             type: Directive
         }], propDecorators: { config: [{
                 type: Input
@@ -3718,9 +3989,9 @@ class DbxFormlyFieldsContextDirective extends AbstractAsyncFormlyFormDirective {
         this._fields.complete();
     }
 }
-DbxFormlyFieldsContextDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxFormlyFieldsContextDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-DbxFormlyFieldsContextDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.4", type: DbxFormlyFieldsContextDirective, selector: "[dbxFormlyFields]", inputs: { fields: ["dbxFormlyFields", "fields"] }, providers: ProvideFormlyContext(), usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxFormlyFieldsContextDirective, decorators: [{
+DbxFormlyFieldsContextDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxFormlyFieldsContextDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+DbxFormlyFieldsContextDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.2", type: DbxFormlyFieldsContextDirective, selector: "[dbxFormlyFields]", inputs: { fields: ["dbxFormlyFields", "fields"] }, providers: ProvideFormlyContext(), usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxFormlyFieldsContextDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[dbxFormlyFields]',
@@ -3739,30 +4010,65 @@ class DbxFormlyFormComponent extends AbstractSubscriptionDirective {
         super();
         this.context = context;
         this._fields = new BehaviorSubject(undefined);
-        this._events = new BehaviorSubject({ isComplete: false, state: DbxFormState.INITIALIZING });
+        this._events = new BehaviorSubject({ isComplete: false, state: DbxFormState.INITIALIZING, status: 'PENDING' });
+        this._disabled = new BehaviorSubject(undefined);
         this._reset = new BehaviorSubject(new Date());
         this._forceUpdate = new Subject();
+        this._disabledSub = new SubscriptionObject();
         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;
+        this.fields$ = this._fields.pipe(switchMapMaybeObs(), distinctUntilChanged(), shareReplay$1(1));
+        this.stream$ = this._reset.pipe(switchMap((lastResetAt) => this.form.valueChanges.pipe(startWith(0), distinctUntilChanged(), throttleTime$1(50, undefined, { leading: true, trailing: true }), scanCount(-1), 
+        // update on validation changes too. Does not count towards changes since last reset.
+        switchMap(changesSinceLastReset => this.form.statusChanges.pipe(startWith(this.form.status), distinctUntilChanged()).pipe(map(_ => changesSinceLastReset))), map((changesSinceLastResetCount) => ({
+            changesSinceLastResetCount,
+            isFormValid: this.form.status !== 'PENDING' && this.form.valid,
+            isFormDisabled: this.form.disabled
+        })), scan((acc, next) => {
+            // Pass forward valid if next was a disabled change/check, which changes angular form's isValid value.
+            // If it was valid prior, then it should be valid now, unless we just reset, in which case it might not be valid.
+            const valid = next.isFormValid || (next.isFormDisabled && acc.isFormValid && acc.changesSinceLastResetCount > 0);
+            return {
+                changesSinceLastResetCount: next.changesSinceLastResetCount,
+                isFormValid: valid,
+                isFormDisabled: next.isFormDisabled
+            };
+        }, {
+            changesSinceLastResetCount: 0,
+            isFormValid: false,
+            isFormDisabled: false
+        }), map(({ changesSinceLastResetCount, isFormValid, isFormDisabled }) => {
+            const isReset = changesSinceLastResetCount <= 1; // first emission after reset is the first value.
+            const complete = isFormValid;
             const nextState = {
                 isComplete: complete,
                 state: (isReset) ? DbxFormState.RESET : DbxFormState.USED,
+                status: this.form.status,
                 untouched: this.form.untouched,
                 pristine: this.form.pristine,
                 changesCount: changesSinceLastResetCount,
                 lastResetAt,
-                isDisabled: this.disabled
+                disabled: this.disabled,
+                isDisabled: isFormDisabled
             };
+            // console.log('Change: ', nextState);
             return nextState;
         }))), shareReplay$1(1));
     }
     ngOnInit() {
         this.context.setDelegate(this);
+        this._disabledSub.subscription = this._disabled.pipe(distinctUntilChanged()).subscribe((disabled) => {
+            const isDisabled = BooleanStringKeyArrayUtilityInstance.isTrue(disabled);
+            if (this.form.disabled !== isDisabled) {
+                if (isDisabled) {
+                    this.form.disable({ emitEvent: true });
+                }
+                else {
+                    this.form.enable({ emitEvent: true });
+                }
+            }
+        });
     }
     ngOnDestroy() {
         this.context.lockSet.onNextUnlock(() => {
@@ -3772,11 +4078,14 @@ class DbxFormlyFormComponent extends AbstractSubscriptionDirective {
             this._fields.complete();
             this._reset.complete();
             this._forceUpdate.complete();
+            this._disabled.complete();
+            this._disabledSub.destroy();
         });
     }
     // MARK: Delegate
     init(initialize) {
         this._fields.next(initialize.fields);
+        this._disabled.next(initialize.initialDisabled);
     }
     getValue() {
         return of(this.form.value);
@@ -3799,37 +4108,39 @@ class DbxFormlyFormComponent extends AbstractSubscriptionDirective {
                 this.form.markAsPristine();
             }
         }, 500);
+        // ping reset
+        this.resetForm();
     }
     resetForm() {
         if (this.options.resetModel) {
             this.options.resetModel();
         }
+        this._reset.next(new Date());
+    }
+    get isDisabled() {
+        return BooleanStringKeyArrayUtilityInstance.isTrue(this.disabled);
     }
     get disabled() {
-        return this.form.disabled;
+        return this._disabled.value;
     }
-    setDisabled(disabled = true) {
-        if (disabled !== this.disabled) {
-            if (disabled) {
-                this.form.disable({ emitEvent: true });
-            }
-            else {
-                this.form.enable({ emitEvent: true });
-            }
-        }
+    getDisabled() {
+        return this._disabled.asObservable();
+    }
+    setDisabled(key, disabled = true) {
+        this._disabled.next(BooleanStringKeyArrayUtilityInstance.set(this.disabled, key !== null && key !== void 0 ? key : DEFAULT_FORM_DISABLED_KEY, disabled));
     }
     // MARK: Update
     forceFormUpdate() {
         this._forceUpdate.next();
     }
 }
-DbxFormlyFormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxFormlyFormComponent, deps: [{ token: DbxFormlyContext }], target: i0.ɵɵFactoryTarget.Component });
-DbxFormlyFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.4", type: DbxFormlyFormComponent, selector: "dbx-formly", host: { classAttribute: "dbx-formly" }, providers: ProvideDbxMutableForm(DbxFormlyFormComponent), exportAs: ["formly"], usesInheritance: true, ngImport: i0, template: `
+DbxFormlyFormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxFormlyFormComponent, deps: [{ token: DbxFormlyContext }], target: i0.ɵɵFactoryTarget.Component });
+DbxFormlyFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", 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$ | 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: 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.4", ngImport: i0, type: DbxFormlyFormComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxFormlyFormComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'dbx-formly',
@@ -3848,8 +4159,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImpor
 
 class DbxFormlyModule {
 }
-DbxFormlyModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxFormlyModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-DbxFormlyModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxFormlyModule, declarations: [DbxFormlyFormComponent,
+DbxFormlyModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxFormlyModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+DbxFormlyModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxFormlyModule, declarations: [DbxFormlyFormComponent,
         DbxFormlyFieldsContextDirective], imports: [CommonModule,
         FormsModule,
         ReactiveFormsModule,
@@ -3861,8 +4172,9 @@ DbxFormlyModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version
         // Directives
         DbxFormlyFormComponent,
         DbxFormlyFieldsContextDirective
+        // Helper Modules
     ] });
-DbxFormlyModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxFormlyModule, imports: [[
+DbxFormlyModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxFormlyModule, imports: [[
             CommonModule,
             FormsModule,
             ReactiveFormsModule,
@@ -3872,7 +4184,7 @@ DbxFormlyModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version
         // Modules (?)
         FormsModule,
         ReactiveFormsModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxFormlyModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxFormlyModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -3893,6 +4205,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImpor
                         // Directives
                         DbxFormlyFormComponent,
                         DbxFormlyFieldsContextDirective
+                        // Helper Modules
                     ]
                 }]
         }] });
@@ -3902,9 +4215,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImpor
  */
 class DbxFormSpacerComponent {
 }
-DbxFormSpacerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxFormSpacerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-DbxFormSpacerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.4", type: DbxFormSpacerComponent, selector: "dbx-form-spacer", ngImport: i0, template: `<div class="dbx-form-spacer"></div>`, isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxFormSpacerComponent, decorators: [{
+DbxFormSpacerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxFormSpacerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+DbxFormSpacerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: DbxFormSpacerComponent, selector: "dbx-form-spacer", ngImport: i0, template: `<div class="dbx-form-spacer"></div>`, isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxFormSpacerComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'dbx-form-spacer',
@@ -3914,12 +4227,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImpor
 
 class DbxFormLayoutModule {
 }
-DbxFormLayoutModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxFormLayoutModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-DbxFormLayoutModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxFormLayoutModule, declarations: [DbxFormSpacerComponent], imports: [CommonModule], exports: [DbxFormSpacerComponent] });
-DbxFormLayoutModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxFormLayoutModule, imports: [[
+DbxFormLayoutModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxFormLayoutModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+DbxFormLayoutModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxFormLayoutModule, declarations: [DbxFormSpacerComponent], imports: [CommonModule], exports: [DbxFormSpacerComponent] });
+DbxFormLayoutModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxFormLayoutModule, imports: [[
             CommonModule
         ]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxFormLayoutModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxFormLayoutModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -3974,14 +4287,14 @@ 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.4", ngImport: i0, type: DbxFormExtensionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-DbxFormExtensionModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxFormExtensionModule, exports: [DbxFormModule,
+DbxFormExtensionModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxFormExtensionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+DbxFormExtensionModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxFormExtensionModule, exports: [DbxFormModule,
         DbxFormlyModule,
         DbxFormFormlyFieldModule] });
-DbxFormExtensionModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxFormExtensionModule, imports: [DbxFormModule,
+DbxFormExtensionModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxFormExtensionModule, imports: [DbxFormModule,
         DbxFormlyModule,
         DbxFormFormlyFieldModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxFormExtensionModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxFormExtensionModule, decorators: [{
             type: NgModule,
             args: [{
                     exports: [
@@ -3996,5 +4309,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImpor
  * 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, 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 };
+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, AbstractFormExpandableSectionWrapperDirective, AbstractFormlyFormDirective, AbstractSyncFormlyFormDirective, AutoTouchFieldWrapperComponent, ChecklistItemFieldDataSetBuilder, DBX_SEARCHABLE_FIELD_COMPONENT_DATA_TOKEN, DEFAULT_FORM_DISABLED_KEY, DEFAULT_HAS_VALUE_FN, DEFAULT_PREFERRED_COUNTRIES, DOMAIN_NAME_REGEX, DbxActionFormDirective, DbxActionFormSafetyDirective, DbxChecklistItemContentComponent, DbxChecklistItemFieldComponent, DbxDateTimeFieldComponent, DbxDateTimeFieldTimeMode, DbxDefaultChecklistItemFieldDisplayComponent, DbxDefaultSearchableFieldDisplayComponent, DbxForm, DbxFormActionModule, DbxFormActionTransitionModule, DbxFormComponentFieldComponent, 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, DbxFormWorkingWrapperComponent, DbxFormlyContext, DbxFormlyFieldsContextDirective, DbxFormlyFormComponent, DbxFormlyModule, DbxMutableForm, DbxPhoneFieldComponent, DbxPickableChipListFieldComponent, DbxPickableListFieldComponent, DbxPickableListFieldItemListComponent, DbxPickableListFieldItemListViewComponent, DbxPickableListFieldItemListViewItemComponent, DbxSearchableChipFieldComponent, DbxSearchableFieldAutocompleteItemComponent, DbxSearchableTextFieldComponent, DbxTextEditorFieldComponent, EXPANDABLE_WRAPPER_KEY, FIELD_VALUES_ARE_EQUAL_VALIDATION_KEY, FIELD_VALUE_IS_AVAILABLE_ERROR_VALIDATION_KEY, FIELD_VALUE_IS_AVAILABLE_VALIDATION_KEY, FLEX_WRAPPER_KEY, 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, WORKING_WRAPPER_KEY, addWrapperToFormlyFieldConfig, addressField, addressFormlyFields, addressListField, checkIsFieldFlexLayoutGroupFieldConfig, checkboxField, checklistItemField, chipTextField, cityField, componentField, countryField, dateTimeField, dbxFormSourceObservable, defaultValidationMessages, disableFormlyFieldAutofillAttributes, emailField, expandWrapper, fieldValueIsAvailableValidator, fieldValuesAreEqualValidator, 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, textIsAvailableField, textPasswordField, textPasswordWithVerifyFieldGroup, textVerifyPasswordField, timeOnlyField, toggleField, toggleWrapper, usernamePasswordLoginFields, workingWrapper, wrappedPhoneAndLabelField, zipCodeField };
 //# sourceMappingURL=dereekb-dbx-form.mjs.map