@dereekb/dbx-form 1.1.0 → 2.1.0

package/fesm2020/dereekb-dbx-form.mjs

@@ -10,9 +10,9 @@ import { AbstractSubscriptionDirective, safeDetectChanges, DbxInjectedComponentM
 import * as i1$1 from '@dereekb/dbx-web';
 import { DbxActionTransitionSafetyDirective, DbxTextModule, DbxFlexLayoutModule, DbxSectionLayoutModule, DbxAnchorModule, AbstractDbxSelectionListWrapperDirective, DEFAULT_LIST_WRAPPER_DIRECTIVE_TEMPLATE, AbstractSelectionValueListViewDirective, mapItemValuesToValueListItemConfig, ProvideDbxListView, AbstractDbxSelectionValueListViewItemComponent, DbxLoadingModule, DbxButtonModule, DbxListLayoutModule, mapCompactModeObs, DbxBarLayoutModule } from '@dereekb/dbx-web';
 import { isPast, addSeconds, isSameMinute, startOfDay, isSameDay, addMinutes } from 'date-fns';
-import { exhaustMap, of, combineLatest, filter as filter$1, mergeMap, first as first$1, delay, BehaviorSubject, switchMap as switchMap$1, shareReplay as shareReplay$1, startWith, map as map$1, debounceTime, distinctUntilChanged as distinctUntilChanged$1, Subject, skipWhile, interval, merge, throttleTime as throttleTime$1 } from 'rxjs';
-import { switchMap, first, catchError, filter, map, distinctUntilChanged, shareReplay, delay as delay$1, debounceTime as debounceTime$1, startWith as startWith$1, tap, throttleTime } from 'rxjs/operators';
+import { 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, switchMapMaybeObs, filterMaybe, switchMapMaybeDefault, asObservable, beginLoading, mapLoadingStateResults, successResult, ListLoadingStateContextInstance, isListLoadingStateEmpty, LoadingStateContextInstance, skipFirstMaybe, scanCount } from '@dereekb/rxjs';
+import { filter as filter$1, first as first$1, map as map$1, distinctUntilChanged as distinctUntilChanged$1, shareReplay, delay as delay$1, debounceTime as debounceTime$1, switchMap as switchMap$1, startWith as startWith$1, tap, throttleTime } 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,12 +27,12 @@ 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, getValueFromObjectOrGetter, dateFromLogicalDate, 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';
 import * as i6$1 from '@angular/material/input';
-import { MatInputModule, MatInput } from '@angular/material/input';
+import { MatInputModule } from '@angular/material/input';
 import { FieldType as FieldType$1, FormlyMaterialModule } from '@ngx-formly/material';
 import { camelCase } from 'change-case';
 import * as i1$5 from '@angular/material/chips';
@@ -45,7 +45,7 @@ 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';
@@ -69,6 +69,7 @@ var DbxFormState;
     DbxFormState[DbxFormState["RESET"] = 0] = "RESET";
     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 +87,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 +100,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 dbxActionFormDisabledWhileWorking() {
+        return this._formDisabledWhileWorking.value;
+    }
+    set dbxActionFormDisabledWhileWorking(dbxActionFormDisabledWhileWorking) {
+        this._formDisabledWhileWorking.next(Boolean(dbxActionFormDisabledWhileWorking ?? 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 +129,7 @@ class DbxActionFormDirective {
                     else {
                         return of(doNothing);
                     }
-                }), catchError((error) => of({ error })))));
+                }), catchError((error) => of({ reject: error })))));
             }
             else {
                 obs = of(doNothing);
@@ -137,7 +147,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) => {
                 // Use both changes count and whether or not something was in the past to guage whether or not the item has been touched.
                 // Angular Form's untouched is whether or not focus has been lost but we can still recieve value updates.
@@ -147,7 +157,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);
@@ -155,7 +165,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);
@@ -172,19 +182,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
@@ -194,8 +209,8 @@ 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 });
+DbxActionFormDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", 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.2.4", type: DbxActionFormDirective, selector: "[dbxActionForm]", inputs: { dbxActionFormValidator: "dbxActionFormValidator", dbxActionFormModified: "dbxActionFormModified", dbxActionFormDisabledWhileWorking: "dbxActionFormDisabledWhileWorking" }, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxActionFormDirective, decorators: [{
             type: Directive,
             args: [{
@@ -203,9 +218,11 @@ 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
-            }], appActionFormModified: [{
+            }], dbxActionFormModified: [{
+                type: Input
+            }], dbxActionFormDisabledWhileWorking: [{
                 type: Input
             }] } });
 
@@ -215,16 +232,16 @@ 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.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", 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.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: [{
             type: Directive,
@@ -233,7 +250,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 }]; }, propDecorators: { inputSafetyType: [{
+                }] }, { type: i2.DbxActionContextStoreSourceInstance }, { type: i3.TransitionService }, { type: i0.ViewContainerRef }, { type: i4.MatDialog }]; }, propDecorators: { inputSafetyType: [{
                 type: Input,
                 args: ['dbxActionFormSafety']
             }] } });
@@ -304,9 +321,9 @@ class DbxFormLoadingSourceDirective extends AbstractSubscriptionDirective {
         if (obs) {
             subscription = combineLatest([
                 // Emit the first time initializing isn't there.
-                this.form.stream$.pipe(filter((x) => x.state !== DbxFormState.INITIALIZING), first()),
+                this.form.stream$.pipe(filter$1((x) => x.state !== DbxFormState.INITIALIZING), first$1()),
                 obs
-            ]).pipe(map((x) => x[1]), filter((x) => Boolean(x)), distinctUntilChanged((x, y) => x.value === y.value)).subscribe((x) => {
+            ]).pipe(map$1((x) => x[1]), filter$1((x) => Boolean(x)), distinctUntilChanged$1((x, y) => x.value === y.value)).subscribe((x) => {
                 if (!x.error && !x.loading) {
                     // console.log('Setting value: ', x.model);
                     this.form.setValue(x.value);
@@ -340,7 +357,7 @@ 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.sub = this.form.stream$.pipe(filter(x => x.isComplete), mergeMap(() => this.form.getValue().pipe(first())), delay(0)).subscribe((value) => {
             this.dbxFormValueChange.next(value);
         });
     }
@@ -377,9 +394,9 @@ class DbxFormSourceDirective extends AbstractSubscriptionDirective {
         if (obs) {
             subscription = combineLatest([
                 // Emit the first time initializing isn't there.
-                this.form.stream$.pipe(filter((x) => x.state !== DbxFormState.INITIALIZING), first()),
+                this.form.stream$.pipe(filter$1((x) => x.state !== DbxFormState.INITIALIZING), first$1()),
                 obs
-            ]).pipe(map((x) => x[1]), distinctUntilChanged((x, y) => x === y)).subscribe((x) => {
+            ]).pipe(map$1((x) => x[1]), distinctUntilChanged$1((x, y) => x === y)).subscribe((x) => {
                 this.form.setValue(x);
             });
         }
@@ -511,9 +528,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;
@@ -706,7 +723,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);
             }
@@ -714,7 +731,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))));
     }
@@ -814,7 +831,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 => {
             if (this.expandableSection?.toggleLabelObs) {
                 return this.expandableSection?.toggleLabelObs(x);
             }
@@ -824,7 +841,7 @@ 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);
         });
     }
@@ -1129,7 +1146,7 @@ class ChecklistItemFieldDataSetBuilder {
             mergedConfig.displayContentObs = combineLatest([
                 currentField.displayContentObs,
                 config.displayContentObs
-            ]).pipe(map(([a, b]) => {
+            ]).pipe(map$1(([a, b]) => {
                 const result = {
                     ...a,
                     ...b
@@ -1185,7 +1202,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) => {
@@ -1205,33 +1222,20 @@ 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>
+DbxFormComponentFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxFormComponentFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+DbxFormComponentFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.4", type: DbxFormComponentFieldComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
+    <div class="dbx-form-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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", 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-injected-content [config]="config"></div>
   `
                 }]
         }] });
@@ -1239,14 +1243,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImpor
 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.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxFormFormlyComponentFieldModule, declarations: [DbxFormComponentFieldComponent], imports: [CommonModule,
+        DbxInjectedComponentModule, i1$4.FormlyModule], exports: [DbxFormComponentFieldComponent] });
 DbxFormFormlyComponentFieldModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxFormFormlyComponentFieldModule, imports: [[
             CommonModule,
             DbxInjectedComponentModule,
             FormlyModule.forChild({
                 types: [
-                    { name: 'component', component: FormComponentFieldComponent }
+                    { name: 'component', component: DbxFormComponentFieldComponent }
                 ]
             })
         ]] });
@@ -1258,25 +1262,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImpor
                         DbxInjectedComponentModule,
                         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
     };
 }
 
@@ -1291,18 +1293,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 => x?.value ?? []));
+        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 => x?.value ?? []));
         /**
          * 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) => {
@@ -1313,7 +1315,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 => x.isUnknown = x.isUnknown ?? true); // Assign unknown flag.
                         return ([...displayValues, ...loadedValues]);
@@ -1327,14 +1329,14 @@ 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?.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?.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) }));
             if (this.sortItems) {
@@ -1342,17 +1344,17 @@ class AbstractDbxPickableItemFieldDirective extends FieldType$1 {
             }
             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() {
         return this.field.templateOptions?.readonly;
@@ -1434,7 +1436,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) => {
@@ -1446,7 +1448,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;
@@ -1472,7 +1474,7 @@ class AbstractDbxPickableItemFieldDirective extends FieldType$1 {
         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(() => {
             this.filterMatInput?.focus();
         });
     }
@@ -1591,7 +1593,7 @@ 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 => mapItemValuesToValueListItemConfig(this.config, x)), shareReplay$1(1));
     }
     get multiple() {
         return this.dbxPickableListFieldComponent.multiSelect;
@@ -1749,22 +1751,22 @@ function pickableItemListField(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 = {
                 ...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);
@@ -1798,13 +1800,13 @@ 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.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", 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.2.4", type: AbstractDbxSearchableFieldDisplayDirective, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", 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 {
 }
@@ -1846,17 +1848,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 ?? '') : 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 ?? '') : 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 => x?.value ?? []));
-        this._formControlValue = this.formControl$.pipe(switchMap$1(control => control.valueChanges.pipe(startWith(control.value), shareReplay$1(1))));
-        this.values$ = this._formControlValue.pipe(map$1(convertMaybeToArray), shareReplay$1(1));
-        this.displayValuesState$ = this.values$.pipe(distinctUntilChanged$1(), switchMap$1((values) => this.loadDisplayValuesForValues(values)), shareReplay$1(1));
-        this.displayValues$ = this.displayValuesState$.pipe(map$1(x => x?.value ?? []));
+        this.searchResults$ = this.searchResultsState$.pipe(map(x => x?.value ?? []));
+        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 => x?.value ?? []));
     }
     get name() {
         return this.field.name ?? (camelCase(this.label ?? this.key));
@@ -1910,7 +1912,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) => {
@@ -1925,7 +1927,7 @@ class AbstractDbxSearchableValueFieldDirective extends FieldType$1 {
                 const displayValuesObs = this.displayForValue(needsDisplay.map(x => x[2]));
                 const defaultDisplay = mergeDbxInjectedComponentConfigs([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) {
@@ -2130,7 +2132,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) => {
                     const id = x.value;
@@ -2144,12 +2146,12 @@ function makeMetaFilterSearchableFieldValueDisplayFn({ loadMetaForValues, makeDi
                     };
                 }).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) {
@@ -2188,9 +2190,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();
     }
@@ -2375,7 +2377,7 @@ class DbxTextEditorFieldComponent extends FieldType$1 {
         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();
         });
@@ -2575,7 +2577,7 @@ 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"] }] });
+  `, 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.2.4", ngImport: i0, type: DbxFormRepeatArrayTypeComponent, decorators: [{
             type: Component,
             args: [{
@@ -2736,21 +2738,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();
@@ -2763,35 +2765,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]) => {
             let result;
             if (date) {
                 if (fullDay) {
@@ -2813,12 +2817,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({
                     date,
@@ -2830,10 +2834,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;
@@ -2845,7 +2849,7 @@ class DbxDateTimeFieldComponent extends FieldType$1 {
         return !this.timeOnly;
     }
     get timeMode() {
-        return (this.timeOnly) ? DateTimeFieldTimeMode.REQUIRED : (this.dateTimeField.timeMode ?? DateTimeFieldTimeMode.REQUIRED);
+        return (this.timeOnly) ? DbxDateTimeFieldTimeMode.REQUIRED : (this.dateTimeField.timeMode ?? DbxDateTimeFieldTimeMode.REQUIRED);
     }
     get description() {
         return this.field.templateOptions?.description;
@@ -2864,7 +2868,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;
@@ -2881,12 +2896,12 @@ 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;
         }
@@ -2894,25 +2909,25 @@ class DbxDateTimeFieldComponent extends FieldType$1 {
     ngOnDestroy() {
         super.ngOnDestroy();
         this._formControlObs.complete();
-        this._date.complete();
         this._updateTime.complete();
         this._config.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);
@@ -2955,20 +2970,17 @@ 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 } });
+DbxDateTimeFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.4", 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.2.4", 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 {
 }
@@ -3048,20 +3060,20 @@ const TAKE_NEXT_UPCOMING_TIME_CONFIG_OBS = () => of({
 /**
  * Same as DateTime field but with the Date input hidden by default.
  */
-function timeOnlyField(config) {
+function timeOnlyField(config = {}) {
     return dateTimeField({
         ...config,
-        timeMode: DateTimeFieldTimeMode.REQUIRED,
+        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({
         key,
         type: 'datetime',
         dateTimeField: {
-            timeMode: (timeOnly) ? DateTimeFieldTimeMode.REQUIRED : timeMode,
+            timeMode: (timeOnly) ? DbxDateTimeFieldTimeMode.REQUIRED : timeMode,
             fullDayFieldName,
             getConfigObs,
             timeOnly,
@@ -3596,10 +3608,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(() => {
@@ -3614,8 +3627,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);
@@ -3634,7 +3647,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);
@@ -3643,10 +3656,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 ?? DEFAULT_FORM_DISABLED_KEY, disabled));
+        if (this._delegate.value) {
+            this._delegate.value.setDisabled(key, disabled);
+        }
     }
     resetForm() {
         if (this._delegate.value) {
@@ -3672,7 +3694,7 @@ class AbstractFormlyFormDirective {
         return this.context.isDisabled();
     }
     set disabled(disabled) {
-        this.context.setDisabled(disabled);
+        this.context.setDisabled(undefined, disabled);
     }
     ngOnDestroy() {
         this.context.destroy();
@@ -3690,6 +3712,9 @@ 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 });
@@ -3720,7 +3745,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;
         });
     }
@@ -3801,15 +3826,34 @@ class DbxFormlyFormComponent extends AbstractSubscriptionDirective {
         this.context = context;
         this._fields = new BehaviorSubject(undefined);
         this._events = new BehaviorSubject({ isComplete: false, state: DbxFormState.INITIALIZING });
+        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) => {
+        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(), map((changesSinceLastResetCount) => ({
+            changesSinceLastResetCount,
+            isFormValid: 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;
-            const complete = this.form.valid;
+            const complete = isFormValid;
             const nextState = {
                 isComplete: complete,
                 state: (isReset) ? DbxFormState.RESET : DbxFormState.USED,
@@ -3817,13 +3861,25 @@ class DbxFormlyFormComponent extends AbstractSubscriptionDirective {
                 pristine: this.form.pristine,
                 changesCount: changesSinceLastResetCount,
                 lastResetAt,
-                isDisabled: this.disabled
+                disabled: this.disabled,
+                isDisabled: isFormDisabled
             };
             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(() => {
@@ -3833,11 +3889,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);
@@ -3865,18 +3924,17 @@ class DbxFormlyFormComponent extends AbstractSubscriptionDirective {
             this.options.resetModel();
         }
     }
+    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 ?? DEFAULT_FORM_DISABLED_KEY, disabled));
     }
     // MARK: Update
     forceFormUpdate() {
@@ -4055,5 +4113,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, DbxFormlyContext, DbxFormlyFieldsContextDirective, DbxFormlyFormComponent, DbxFormlyModule, DbxMutableForm, DbxPhoneFieldComponent, DbxPickableChipListFieldComponent, DbxPickableListFieldComponent, DbxPickableListFieldItemListComponent, DbxPickableListFieldItemListViewComponent, DbxPickableListFieldItemListViewItemComponent, DbxSearchableChipFieldComponent, DbxSearchableFieldAutocompleteItemComponent, DbxSearchableTextFieldComponent, DbxTextEditorFieldComponent, EXPANDABLE_WRAPPER_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, addWrapperToFormlyFieldConfig, addressField, addressFormlyFields, addressListField, checkIsFieldFlexLayoutGroupFieldConfig, checkboxField, checklistItemField, chipTextField, cityField, componentField, countryField, dateTimeField, defaultValidationMessages, disableFormlyFieldAutofillAttributes, emailField, expandWrapper, filterPickableItemFieldValuesByLabel, flexLayoutWrapper, formlyField, hiddenField, infoWrapper, makeMetaFilterSearchableFieldValueDisplayFn, maxLengthValidationMessage, maxValidationMessage, minLengthValidationMessage, minValidationMessage, nameField, phoneAndLabelSectionField, phoneField, phoneListField, pickableItemChipField, pickableItemListField, repeatArrayField, searchableChipField, searchableStringChipField, searchableTextField, sectionWrapper, sortPickableItemsByLabel, stateField, staticEnumField, styleWrapper, subsectionWrapper, templateOptionsForFieldConfig, templateOptionsValueForFieldConfig, textAreaField, textEditorField, textField, timeOnlyField, toggleField, toggleWrapper, wrappedPhoneAndLabelField, zipCodeField };
 //# sourceMappingURL=dereekb-dbx-form.mjs.map