@dereekb/dbx-form 4.1.0 → 5.1.0

package/fesm2015/dereekb-dbx-form.mjs

@@ -3,16 +3,15 @@ import { forwardRef, Directive, Host, Input, NgModule, EventEmitter, Output, Com
 import * as i5 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i1$1 from '@dereekb/dbx-web';
-import { DbxActionTransitionSafetyDirective, DbxTextModule, DbxLoadingModule, DbxFlexLayoutModule, DbxSectionLayoutModule, DbxRouterAnchorModule, AbstractDbxSelectionListWrapperDirective, DEFAULT_LIST_WRAPPER_DIRECTIVE_TEMPLATE, AbstractDbxSelectionListViewDirective, addConfigToValueListItems, ProvideDbxListView, AbstractDbxValueListViewItemComponent, DbxButtonModule, DbxListLayoutModule, mapCompactModeObs, DbxBarLayoutModule } from '@dereekb/dbx-web';
+import { DbxActionTransitionSafetyDirective, DbxTextModule, DbxLoadingModule, DbxFlexLayoutModule, DbxSectionLayoutModule, DbxRouterAnchorModule, AbstractDbxSelectionListWrapperDirective, DEFAULT_LIST_WRAPPER_DIRECTIVE_TEMPLATE, AbstractDbxSelectionListViewDirective, addConfigToValueListItems, provideDbxListView, AbstractDbxValueListViewItemComponent, DbxButtonModule, DbxListLayoutModule, mapCompactModeObs, DbxBarLayoutModule } from '@dereekb/dbx-web';
 import { isPast, addSeconds, isSameMinute, startOfDay, isSameDay, addMinutes } from 'date-fns';
-import { BehaviorSubject, switchMap, first, exhaustMap, of, catchError, delay, filter, combineLatest, map, distinctUntilChanged, mergeMap, shareReplay as shareReplay$1, startWith, debounceTime, Subject, skipWhile, interval, merge, throttleTime as throttleTime$1, scan } from 'rxjs';
-import { LockSet, SubscriptionObject, asObservable, loadingStateHasFinishedLoading, switchMapMaybeObs, filterMaybe, switchMapMaybeDefault, SimpleLoadingContext, beginLoading, mapLoadingStateResults, successResult, ListLoadingStateContextInstance, isListLoadingStateEmpty, LoadingStateContextInstance, skipFirstMaybe, asyncPusherCache, scanCount } from '@dereekb/rxjs';
+import { BehaviorSubject, switchMap, first, exhaustMap, of, catchError, delay, filter, combineLatest, map, distinctUntilChanged, mergeMap, shareReplay, startWith, debounceTime, Subject, skipWhile, interval, tap, merge, throttleTime, scan } from 'rxjs';
+import { LockSet, SubscriptionObject, asObservable, loadingStateHasFinishedLoading, switchMapMaybeObs, filterMaybe, switchMapMaybeDefault, SimpleLoadingContext, startWithBeginLoading, mapLoadingStateResults, successResult, ListLoadingStateContextInstance, isListLoadingStateEmpty, LoadingStateContextInstance, skipFirstMaybe, asyncPusherCache, scanCount } from '@dereekb/rxjs';
 import * as i2 from '@dereekb/dbx-core';
 import { AbstractSubscriptionDirective, safeDetectChanges, DbxInjectionComponentModule, DbxDatePipeModule, mergeDbxInjectionComponentConfigs, tapDetectChanges } from '@dereekb/dbx-core';
 import * as i3 from '@uirouter/core';
 import * as i4 from '@angular/material/dialog';
 import { MatDialogModule } from '@angular/material/dialog';
-import { distinctUntilChanged as distinctUntilChanged$1, shareReplay, map as map$1, delay as delay$1, debounceTime as debounceTime$1, filter as filter$1, switchMap as switchMap$1, startWith as startWith$1, tap, throttleTime, first as first$1 } from 'rxjs/operators';
 import * as i1$4 from '@ngx-formly/core';
 import { FieldType, FieldWrapper, FormlyModule, FieldArrayType } from '@ngx-formly/core';
 import * as i1 from '@angular/material/checkbox';
@@ -86,14 +85,11 @@ class DbxForm {
 }
 class DbxMutableForm extends DbxForm {
 }
-function ProvideDbxForm(sourceType) {
+function provideDbxForm(sourceType) {
     return [{ provide: DbxForm, useExisting: forwardRef(() => sourceType) }];
 }
-function ProvideDbxMutableForm(sourceType) {
-    return [
-        ...ProvideDbxForm(sourceType),
-        { provide: DbxMutableForm, useExisting: forwardRef(() => sourceType) }
-    ];
+function provideDbxMutableForm(sourceType) {
+    return [...provideDbxForm(sourceType), { provide: DbxMutableForm, useExisting: forwardRef(() => sourceType) }];
 }
 
 const APP_ACTION_FORM_DISABLED_KEY = 'dbx_action_form';
@@ -126,7 +122,8 @@ class DbxActionFormDirective {
     }
     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((stream) => {
+        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;
@@ -144,7 +141,8 @@ class DbxActionFormDirective {
                 obs = of(doNothing);
             }
             return obs;
-        })))).subscribe((result) => {
+        }))))
+            .subscribe((result) => {
             if (result.reject) {
                 this.source.reject(result.reject);
             }
@@ -156,36 +154,34 @@ class DbxActionFormDirective {
             }
         });
         // Update the enabled/disabled state
-        this._isCompleteSub.subscription = this.form.stream$.pipe(delay(0), filter((x) => x.state !== DbxFormState.INITIALIZING), switchMap((event) => {
+        this._isCompleteSub.subscription = this.form.stream$
+            .pipe(delay(0), filter((x) => x.state !== DbxFormState.INITIALIZING), switchMap((event) => {
             return this.form.getValue().pipe(first(), exhaustMap((value) => {
                 var _a, _b;
                 // Use both changes count and whether or not something was in the past to guage whether or not the item has been touched.
                 // Angular Form's untouched is whether or not focus has been lost but we can still recieve value updates.
                 // More than a certain amount of updates implies that it is being typed into.
-                const isProbablyTouched = !event.untouched ||
-                    (((_a = event.changesCount) !== null && _a !== void 0 ? _a : 0) > 3 && isPast(addSeconds((_b = event.lastResetAt) !== null && _b !== void 0 ? _b : new Date(), 2)));
+                const isProbablyTouched = !event.untouched || (((_a = event.changesCount) !== null && _a !== void 0 ? _a : 0) > 3 && isPast(addSeconds((_b = event.lastResetAt) !== null && _b !== void 0 ? _b : new Date(), 2)));
                 let validatorObs;
                 const initialIsValidCheck = event.isComplete;
                 if (initialIsValidCheck) {
-                    validatorObs = (this.dbxActionFormValidator) ? this.dbxActionFormValidator(value) : of(true);
+                    validatorObs = this.dbxActionFormValidator ? this.dbxActionFormValidator(value) : of(true);
                 }
                 else {
                     validatorObs = of(false);
                 }
                 let modifiedObs;
-                const isConsideredModified = (event.pristine === false && isProbablyTouched);
+                const isConsideredModified = event.pristine === false && isProbablyTouched;
                 if (isConsideredModified) {
-                    modifiedObs = (this.dbxActionFormModified) ? this.dbxActionFormModified(value) : of(true);
+                    modifiedObs = this.dbxActionFormModified ? this.dbxActionFormModified(value) : of(true);
                 }
                 else {
                     modifiedObs = of(false);
                 }
-                return combineLatest([
-                    validatorObs,
-                    modifiedObs
-                ]).pipe(first(), map(([valid, modified]) => ({ valid, modified, value, event })));
+                return combineLatest([validatorObs, modifiedObs]).pipe(first(), map(([valid, modified]) => ({ valid, modified, value, event })));
             }));
-        })).subscribe(({ valid, modified, value, event }) => {
+        }))
+            .subscribe(({ valid, modified /*, value, event */ }) => {
             // console.log('x: ', value, event, valid, modified);
             // Update Modified State
             this.source.setIsModified(modified);
@@ -193,7 +189,9 @@ class DbxActionFormDirective {
             this.source.enable(APP_ACTION_FORM_DISABLED_KEY, valid);
         });
         // 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._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);
         });
     }
@@ -208,12 +206,9 @@ class DbxActionFormDirective {
         });
     }
     preCheckReadyValue(value) {
-        let validatorObs = (this.dbxActionFormValidator) ? this.dbxActionFormValidator(value) : of(true);
-        let modifiedObs = (this.dbxActionFormModified) ? this.dbxActionFormModified(value) : of(true);
-        return combineLatest([
-            validatorObs,
-            modifiedObs
-        ]).pipe(first(), map(([valid, modified]) => valid && modified));
+        const validatorObs = this.dbxActionFormValidator ? this.dbxActionFormValidator(value) : of(true);
+        const modifiedObs = this.dbxActionFormModified ? this.dbxActionFormModified(value) : of(true);
+        return combineLatest([validatorObs, modifiedObs]).pipe(first(), map(([valid, modified]) => valid && modified));
     }
     readyValue(value) {
         return of({ value });
@@ -258,7 +253,7 @@ DbxActionFormSafetyDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxActionFormSafetyDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[dbxActionFormSafety]',
+                    selector: '[dbxActionFormSafety]'
                 }]
         }], ctorParameters: function () {
         return [{ type: DbxActionFormDirective, decorators: [{
@@ -273,59 +268,37 @@ class DbxFormActionTransitionModule {
 }
 DbxFormActionTransitionModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxFormActionTransitionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
 DbxFormActionTransitionModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxFormActionTransitionModule, declarations: [DbxActionFormSafetyDirective], imports: [CommonModule], exports: [DbxActionFormSafetyDirective] });
-DbxFormActionTransitionModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxFormActionTransitionModule, imports: [[
-            CommonModule
-        ]] });
+DbxFormActionTransitionModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxFormActionTransitionModule, imports: [[CommonModule]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxFormActionTransitionModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [
-                        CommonModule
-                    ],
-                    declarations: [
-                        DbxActionFormSafetyDirective
-                    ],
-                    exports: [
-                        DbxActionFormSafetyDirective
-                    ]
+                    imports: [CommonModule],
+                    declarations: [DbxActionFormSafetyDirective],
+                    exports: [DbxActionFormSafetyDirective]
                 }]
         }] });
 
 class DbxFormActionModule {
 }
 DbxFormActionModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxFormActionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-DbxFormActionModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxFormActionModule, declarations: [DbxActionFormDirective], imports: [CommonModule,
-        MatDialogModule], exports: [DbxActionFormDirective] });
-DbxFormActionModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxFormActionModule, imports: [[
-            CommonModule,
-            MatDialogModule
-        ]] });
+DbxFormActionModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxFormActionModule, declarations: [DbxActionFormDirective], imports: [CommonModule, MatDialogModule], exports: [DbxActionFormDirective] });
+DbxFormActionModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxFormActionModule, imports: [[CommonModule, MatDialogModule]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxFormActionModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [
-                        CommonModule,
-                        MatDialogModule
-                    ],
-                    declarations: [
-                        DbxActionFormDirective
-                    ],
-                    exports: [
-                        DbxActionFormDirective
-                    ]
+                    imports: [CommonModule, MatDialogModule],
+                    declarations: [DbxActionFormDirective],
+                    exports: [DbxActionFormDirective]
                 }]
         }] });
 
 function dbxFormSourceObservable(form, inputObs, mode$) {
     const observable = asObservable(inputObs);
-    return combineLatest([
-        observable.pipe(distinctUntilChanged()),
-        mode$.pipe(distinctUntilChanged())
-    ]).pipe(switchMap(([value, mode]) => form.stream$.pipe(
+    return combineLatest([observable.pipe(distinctUntilChanged()), mode$.pipe(distinctUntilChanged())]).pipe(switchMap(([value, mode]) => form.stream$.pipe(
     // wait for the form to finish initializing.
     filter((x) => x.state !== DbxFormState.INITIALIZING), 
     // if mode is reset, then filter out changes until the form is reset again.
-    filter((x) => ((mode === 'reset') ? (x.state === DbxFormState.RESET) : true)), first(), map((_) => value))));
+    filter((x) => (mode === 'reset' ? x.state === DbxFormState.RESET : true)), first(), map(() => value))));
 }
 /**
  * Used with a FormComponent to set the value based on the input value.
@@ -446,7 +419,9 @@ class DbxFormValueChangesDirective extends AbstractSubscriptionDirective {
         this.dbxFormValueChange = new EventEmitter();
     }
     ngOnInit() {
-        this.sub = this.form.stream$.pipe(mergeMap((x) => this.form.getValue().pipe(first(), map((value) => ({ isComplete: x.isComplete, value })))), delay(0)).subscribe(({ isComplete, value }) => {
+        this.sub = this.form.stream$
+            .pipe(mergeMap((x) => this.form.getValue().pipe(first(), map((value) => ({ isComplete: x.isComplete, value })))), delay(0))
+            .subscribe(({ isComplete, value }) => {
             if (isComplete) {
                 this.dbxFormValueChange.next(value);
             }
@@ -478,50 +453,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImpor
 class DbxFormIoModule {
 }
 DbxFormIoModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxFormIoModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-DbxFormIoModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxFormIoModule, declarations: [DbxFormSourceDirective,
-        DbxFormValueChangesDirective,
-        DbxFormLoadingSourceDirective], imports: [CommonModule], exports: [DbxFormSourceDirective,
-        DbxFormValueChangesDirective,
-        DbxFormLoadingSourceDirective] });
-DbxFormIoModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxFormIoModule, imports: [[
-            CommonModule
-        ]] });
+DbxFormIoModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxFormIoModule, declarations: [DbxFormSourceDirective, DbxFormValueChangesDirective, DbxFormLoadingSourceDirective], imports: [CommonModule], exports: [DbxFormSourceDirective, DbxFormValueChangesDirective, DbxFormLoadingSourceDirective] });
+DbxFormIoModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxFormIoModule, imports: [[CommonModule]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxFormIoModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [
-                        CommonModule
-                    ],
-                    declarations: [
-                        DbxFormSourceDirective,
-                        DbxFormValueChangesDirective,
-                        DbxFormLoadingSourceDirective
-                    ],
-                    exports: [
-                        DbxFormSourceDirective,
-                        DbxFormValueChangesDirective,
-                        DbxFormLoadingSourceDirective
-                    ]
+                    imports: [CommonModule],
+                    declarations: [DbxFormSourceDirective, DbxFormValueChangesDirective, DbxFormLoadingSourceDirective],
+                    exports: [DbxFormSourceDirective, DbxFormValueChangesDirective, DbxFormLoadingSourceDirective]
                 }]
         }] });
 
 class DbxFormModule {
 }
 DbxFormModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxFormModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-DbxFormModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxFormModule, exports: [DbxFormActionTransitionModule,
-        DbxFormActionModule,
-        DbxFormIoModule] });
-DbxFormModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxFormModule, imports: [DbxFormActionTransitionModule,
-        DbxFormActionModule,
-        DbxFormIoModule] });
+DbxFormModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxFormModule, exports: [DbxFormActionTransitionModule, DbxFormActionModule, DbxFormIoModule] });
+DbxFormModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxFormModule, imports: [DbxFormActionTransitionModule, DbxFormActionModule, DbxFormIoModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxFormModule, decorators: [{
             type: NgModule,
             args: [{
-                    exports: [
-                        DbxFormActionTransitionModule,
-                        DbxFormActionModule,
-                        DbxFormIoModule
-                    ]
+                    exports: [DbxFormActionTransitionModule, DbxFormActionModule, DbxFormIoModule]
                 }]
         }] });
 
@@ -589,9 +540,9 @@ class DbxChecklistItemFieldComponent extends FieldType {
     constructor() {
         super(...arguments);
         this._displayContent = new BehaviorSubject(undefined);
-        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));
+        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));
     }
     get formGroup() {
         return this.form;
@@ -630,10 +581,10 @@ class DbxChecklistItemFieldComponent extends FieldType {
     }
 }
 DbxChecklistItemFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxChecklistItemFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-DbxChecklistItemFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: DbxChecklistItemFieldComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<div class=\"dbx-checklist-item-wrapper\" [formGroup]=\"formGroup\">\n  <div *ngIf=\"label\" class=\"dbx-checklist-item-label\">{{ label }}</div>\n  <div class=\"dbx-checklist-item\">\n    <div class=\"dbx-checklist-item-check\">\n      <mat-checkbox [formControlName]=\"formControlName\"></mat-checkbox>\n    </div>\n    <div class=\"dbx-checklist-item-content-wrapper\">\n      <dbx-anchor [block]=\"true\" [anchor]=\"anchor$ | async\">\n        <div class=\"dbx-checklist-item-content\" matRipple [matRippleDisabled]=\"(rippleDisabled$ | async) ?? false\">\n          <dbx-checklist-item-content-component></dbx-checklist-item-content-component>\n          <span class=\"spacer\"></span>\n          <mat-icon *ngIf=\"!(rippleDisabled$ | async)\">navigate_next</mat-icon>\n        </div>\n      </dbx-anchor>\n    </div>\n  </div>\n  <div *ngIf=\"description\" class=\"dbx-hint\">{{ description }}</div>\n</div>\n", components: [{ type: i0.forwardRef(function () { return i1.MatCheckbox; }), selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { type: i0.forwardRef(function () { return i1$1.DbxAnchorComponent; }), selector: "dbx-anchor, [dbx-anchor]", inputs: ["block"] }, { type: i0.forwardRef(function () { return DbxChecklistItemContentComponent; }), selector: "dbx-checklist-item-content-component" }, { type: i0.forwardRef(function () { return i2$1.MatIcon; }), selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i0.forwardRef(function () { return i4$1.NgControlStatusGroup; }), selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i0.forwardRef(function () { return i4$1.FormGroupDirective; }), selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i0.forwardRef(function () { return i5.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i0.forwardRef(function () { return i4$1.NgControlStatus; }), selector: "[formControlName],[ngModel],[formControl]" }, { type: i0.forwardRef(function () { return i4$1.FormControlName; }), selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i0.forwardRef(function () { return i6.MatRipple; }), selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }], pipes: { "async": i0.forwardRef(function () { return i5.AsyncPipe; }) } });
+DbxChecklistItemFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: DbxChecklistItemFieldComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<div class=\"dbx-checklist-item-wrapper\" [formGroup]=\"formGroup\">\n  <div *ngIf=\"label\" class=\"dbx-checklist-item-label\">{{ label }}</div>\n  <div class=\"dbx-checklist-item\">\n    <div class=\"dbx-checklist-item-check\">\n      <mat-checkbox [formControlName]=\"formControlName\"></mat-checkbox>\n    </div>\n    <div class=\"dbx-checklist-item-content-wrapper\">\n      <dbx-anchor [block]=\"true\" [anchor]=\"anchor$ | async\">\n        <div class=\"dbx-checklist-item-content\" matRipple [matRippleDisabled]=\"(rippleDisabled$ | async) ?? false\">\n          <dbx-checklist-item-content-component></dbx-checklist-item-content-component>\n          <span class=\"spacer\"></span>\n          <mat-icon *ngIf=\"(rippleDisabled$ | async) !== true\">navigate_next</mat-icon>\n        </div>\n      </dbx-anchor>\n    </div>\n  </div>\n  <div *ngIf=\"description\" class=\"dbx-hint\">{{ description }}</div>\n</div>\n", components: [{ type: i0.forwardRef(function () { return i1.MatCheckbox; }), selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { type: i0.forwardRef(function () { return i1$1.DbxAnchorComponent; }), selector: "dbx-anchor, [dbx-anchor]", inputs: ["block"] }, { type: i0.forwardRef(function () { return DbxChecklistItemContentComponent; }), selector: "dbx-checklist-item-content-component" }, { type: i0.forwardRef(function () { return i2$1.MatIcon; }), selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i0.forwardRef(function () { return i4$1.NgControlStatusGroup; }), selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i0.forwardRef(function () { return i4$1.FormGroupDirective; }), selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i0.forwardRef(function () { return i5.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i0.forwardRef(function () { return i4$1.NgControlStatus; }), selector: "[formControlName],[ngModel],[formControl]" }, { type: i0.forwardRef(function () { return i4$1.FormControlName; }), selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i0.forwardRef(function () { return i6.MatRipple; }), selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }], pipes: { "async": i0.forwardRef(function () { return i5.AsyncPipe; }) } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxChecklistItemFieldComponent, decorators: [{
             type: Component,
-            args: [{ template: "<div class=\"dbx-checklist-item-wrapper\" [formGroup]=\"formGroup\">\n  <div *ngIf=\"label\" class=\"dbx-checklist-item-label\">{{ label }}</div>\n  <div class=\"dbx-checklist-item\">\n    <div class=\"dbx-checklist-item-check\">\n      <mat-checkbox [formControlName]=\"formControlName\"></mat-checkbox>\n    </div>\n    <div class=\"dbx-checklist-item-content-wrapper\">\n      <dbx-anchor [block]=\"true\" [anchor]=\"anchor$ | async\">\n        <div class=\"dbx-checklist-item-content\" matRipple [matRippleDisabled]=\"(rippleDisabled$ | async) ?? false\">\n          <dbx-checklist-item-content-component></dbx-checklist-item-content-component>\n          <span class=\"spacer\"></span>\n          <mat-icon *ngIf=\"!(rippleDisabled$ | async)\">navigate_next</mat-icon>\n        </div>\n      </dbx-anchor>\n    </div>\n  </div>\n  <div *ngIf=\"description\" class=\"dbx-hint\">{{ description }}</div>\n</div>\n" }]
+            args: [{ template: "<div class=\"dbx-checklist-item-wrapper\" [formGroup]=\"formGroup\">\n  <div *ngIf=\"label\" class=\"dbx-checklist-item-label\">{{ label }}</div>\n  <div class=\"dbx-checklist-item\">\n    <div class=\"dbx-checklist-item-check\">\n      <mat-checkbox [formControlName]=\"formControlName\"></mat-checkbox>\n    </div>\n    <div class=\"dbx-checklist-item-content-wrapper\">\n      <dbx-anchor [block]=\"true\" [anchor]=\"anchor$ | async\">\n        <div class=\"dbx-checklist-item-content\" matRipple [matRippleDisabled]=\"(rippleDisabled$ | async) ?? false\">\n          <dbx-checklist-item-content-component></dbx-checklist-item-content-component>\n          <span class=\"spacer\"></span>\n          <mat-icon *ngIf=\"(rippleDisabled$ | async) !== true\">navigate_next</mat-icon>\n        </div>\n      </dbx-anchor>\n    </div>\n  </div>\n  <div *ngIf=\"description\" class=\"dbx-hint\">{{ description }}</div>\n</div>\n" }]
         }] });
 class DbxChecklistItemContentComponent extends AbstractSubscriptionDirective {
     constructor(checklistItemFieldComponent, cdRef) {
@@ -654,12 +605,16 @@ class DbxChecklistItemContentComponent extends AbstractSubscriptionDirective {
     }
 }
 DbxChecklistItemContentComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxChecklistItemContentComponent, deps: [{ token: DbxChecklistItemFieldComponent }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-DbxChecklistItemContentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: DbxChecklistItemContentComponent, selector: "dbx-checklist-item-content-component", usesInheritance: true, ngImport: i0, template: `<dbx-injection [config]="config"></dbx-injection>`, isInline: true, components: [{ type: i2.DbxInjectionComponent, selector: "dbx-injection, [dbxInjection], [dbx-injection]", inputs: ["config", "template"] }] });
+DbxChecklistItemContentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: DbxChecklistItemContentComponent, selector: "dbx-checklist-item-content-component", usesInheritance: true, ngImport: i0, template: `
+    <dbx-injection [config]="config"></dbx-injection>
+  `, isInline: true, components: [{ type: i2.DbxInjectionComponent, selector: "dbx-injection, [dbxInjection], [dbx-injection]", inputs: ["config", "template"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxChecklistItemContentComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'dbx-checklist-item-content-component',
-                    template: `<dbx-injection [config]="config"></dbx-injection>`
+                    template: `
+    <dbx-injection [config]="config"></dbx-injection>
+  `
                 }]
         }], ctorParameters: function () { return [{ type: DbxChecklistItemFieldComponent }, { type: i0.ChangeDetectorRef }]; } });
 
@@ -678,8 +633,7 @@ DbxFormInfoWrapperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.
         <ng-container #fieldComponent></ng-container>
       </div>
       <div class="dbx-form-info-wrapper-info" fxFlex="noshrink" fxLayout="column" fxLayoutAlign="center center">
-        <button mat-icon-button [attr.aria-label]="'show info button for ' + (to.label || 'section')"
-          (click)="onInfoClick()">
+        <button mat-icon-button [attr.aria-label]="'show info button for ' + (to.label || 'section')" (click)="onInfoClick()">
           <mat-icon>info</mat-icon>
         </button>
       </div>
@@ -694,8 +648,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImpor
         <ng-container #fieldComponent></ng-container>
       </div>
       <div class="dbx-form-info-wrapper-info" fxFlex="noshrink" fxLayout="column" fxLayoutAlign="center center">
-        <button mat-icon-button [attr.aria-label]="'show info button for ' + (to.label || 'section')"
-          (click)="onInfoClick()">
+        <button mat-icon-button [attr.aria-label]="'show info button for ' + (to.label || 'section')" (click)="onInfoClick()">
           <mat-icon>info</mat-icon>
         </button>
       </div>
@@ -773,17 +726,17 @@ class DbxFormSubsectionWrapperComponent extends FieldWrapper {
 }
 DbxFormSubsectionWrapperComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxFormSubsectionWrapperComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
 DbxFormSubsectionWrapperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: DbxFormSubsectionWrapperComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
-  <dbx-subsection [header]="header" [hint]="hint">
-    <ng-container #fieldComponent></ng-container>
-  </dbx-subsection>
+    <dbx-subsection [header]="header" [hint]="hint">
+      <ng-container #fieldComponent></ng-container>
+    </dbx-subsection>
   `, isInline: true, components: [{ type: i1$1.DbxSubSectionComponent, selector: "dbx-subsection" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxFormSubsectionWrapperComponent, decorators: [{
             type: Component,
             args: [{
                     template: `
-  <dbx-subsection [header]="header" [hint]="hint">
-    <ng-container #fieldComponent></ng-container>
-  </dbx-subsection>
+    <dbx-subsection [header]="header" [hint]="hint">
+      <ng-container #fieldComponent></ng-container>
+    </dbx-subsection>
   `
                 }]
         }] });
@@ -802,10 +755,10 @@ class AbstractFormExpandableSectionWrapperDirective extends FieldWrapper {
             else {
                 return this.hasValue$;
             }
-        }), shareReplay$1(1));
+        }), shareReplay(1));
         this.hasValue$ = this.formControl$.pipe(switchMap((x) => x.valueChanges.pipe(startWith(x.value), map((value) => {
             return this.hasValueFn(value);
-        }), shareReplay$1(1))));
+        }), shareReplay(1))));
     }
     get expandableSection() {
         return this.to.expandWrapper;
@@ -853,27 +806,27 @@ class DbxFormExpandWrapperComponent extends AbstractFormExpandableSectionWrapper
 }
 DbxFormExpandWrapperComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxFormExpandWrapperComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
 DbxFormExpandWrapperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: DbxFormExpandWrapperComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
-  <ng-container [ngSwitch]="show$ | async">
-    <ng-container *ngSwitchCase="true">
-      <ng-container #fieldComponent></ng-container>
-    </ng-container>
-    <ng-container *ngSwitchCase="false">
-      <span class="dbx-form-expandable-section-button" (click)="open()">{{ expandLabel }}</span>
+    <ng-container [ngSwitch]="show$ | async">
+      <ng-container *ngSwitchCase="true">
+        <ng-container #fieldComponent></ng-container>
+      </ng-container>
+      <ng-container *ngSwitchCase="false">
+        <span class="dbx-form-expandable-section-button" (click)="open()">{{ expandLabel }}</span>
+      </ng-container>
     </ng-container>
-  </ng-container>
   `, isInline: true, directives: [{ type: i5.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i5.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }], pipes: { "async": i5.AsyncPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxFormExpandWrapperComponent, decorators: [{
             type: Component,
             args: [{
                     template: `
-  <ng-container [ngSwitch]="show$ | async">
-    <ng-container *ngSwitchCase="true">
-      <ng-container #fieldComponent></ng-container>
-    </ng-container>
-    <ng-container *ngSwitchCase="false">
-      <span class="dbx-form-expandable-section-button" (click)="open()">{{ expandLabel }}</span>
+    <ng-container [ngSwitch]="show$ | async">
+      <ng-container *ngSwitchCase="true">
+        <ng-container #fieldComponent></ng-container>
+      </ng-container>
+      <ng-container *ngSwitchCase="false">
+        <span class="dbx-form-expandable-section-button" (click)="open()">{{ expandLabel }}</span>
+      </ng-container>
     </ng-container>
-  </ng-container>
   `
                 }]
         }] });
@@ -883,7 +836,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImpor
  */
 class AutoTouchFieldWrapperComponent extends FieldWrapper {
     ngOnInit() {
-        this.formControl.valueChanges.pipe(delay$1(200)).subscribe(() => {
+        this.formControl.valueChanges.pipe(delay(200)).subscribe(() => {
             if (!this.formControl.pristine && this.formControl.untouched) {
                 this.formControl.markAsTouched();
                 this.formControl.updateValueAndValidity();
@@ -892,11 +845,15 @@ class AutoTouchFieldWrapperComponent extends FieldWrapper {
     }
 }
 AutoTouchFieldWrapperComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AutoTouchFieldWrapperComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-AutoTouchFieldWrapperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: AutoTouchFieldWrapperComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `<ng-container #fieldComponent></ng-container>`, isInline: true });
+AutoTouchFieldWrapperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: AutoTouchFieldWrapperComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
+    <ng-container #fieldComponent></ng-container>
+  `, isInline: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AutoTouchFieldWrapperComponent, decorators: [{
             type: Component,
             args: [{
-                    template: `<ng-container #fieldComponent></ng-container>`
+                    template: `
+    <ng-container #fieldComponent></ng-container>
+  `
                 }]
         }] });
 
@@ -906,7 +863,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImpor
 class DbxFormToggleWrapperComponent extends AbstractFormExpandableSectionWrapperDirective {
     constructor() {
         super(...arguments);
-        this.slideLabel$ = this._toggleOpen.pipe(switchMap(x => {
+        this.slideLabel$ = this._toggleOpen.pipe(switchMap((x) => {
             var _a, _b;
             if ((_a = this.expandableSection) === null || _a === void 0 ? void 0 : _a.toggleLabelObs) {
                 return (_b = this.expandableSection) === null || _b === void 0 ? void 0 : _b.toggleLabelObs(x);
@@ -914,7 +871,7 @@ class DbxFormToggleWrapperComponent extends AbstractFormExpandableSectionWrapper
             else {
                 return of(this.expandLabel);
             }
-        }), shareReplay$1(1));
+        }), shareReplay(1));
     }
     onToggleChange() {
         this.show$.pipe(first()).subscribe((show) => {
@@ -924,27 +881,27 @@ class DbxFormToggleWrapperComponent extends AbstractFormExpandableSectionWrapper
 }
 DbxFormToggleWrapperComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxFormToggleWrapperComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
 DbxFormToggleWrapperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: DbxFormToggleWrapperComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
-  <div class="dbx-form-toggle-wrapper" [ngSwitch]="show$ | async">
-    <div class="dbx-form-toggle-wrapper-toggle">
-      <mat-slide-toggle [checked]="show$ | async" (toggleChange)="onToggleChange()">{{ slideLabel$ | async }}</mat-slide-toggle>
+    <div class="dbx-form-toggle-wrapper" [ngSwitch]="show$ | async">
+      <div class="dbx-form-toggle-wrapper-toggle">
+        <mat-slide-toggle [checked]="show$ | async" (toggleChange)="onToggleChange()">{{ slideLabel$ | async }}</mat-slide-toggle>
+      </div>
+      <ng-container *ngSwitchCase="true">
+        <ng-container #fieldComponent></ng-container>
+      </ng-container>
     </div>
-    <ng-container *ngSwitchCase="true">
-      <ng-container #fieldComponent></ng-container>
-    </ng-container>
-  </div>
   `, isInline: true, components: [{ type: i1$3.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex", "name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "checked"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }], directives: [{ type: i5.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i5.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }], pipes: { "async": i5.AsyncPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxFormToggleWrapperComponent, decorators: [{
             type: Component,
             args: [{
                     template: `
-  <div class="dbx-form-toggle-wrapper" [ngSwitch]="show$ | async">
-    <div class="dbx-form-toggle-wrapper-toggle">
-      <mat-slide-toggle [checked]="show$ | async" (toggleChange)="onToggleChange()">{{ slideLabel$ | async }}</mat-slide-toggle>
+    <div class="dbx-form-toggle-wrapper" [ngSwitch]="show$ | async">
+      <div class="dbx-form-toggle-wrapper-toggle">
+        <mat-slide-toggle [checked]="show$ | async" (toggleChange)="onToggleChange()">{{ slideLabel$ | async }}</mat-slide-toggle>
+      </div>
+      <ng-container *ngSwitchCase="true">
+        <ng-container #fieldComponent></ng-container>
+      </ng-container>
     </div>
-    <ng-container *ngSwitchCase="true">
-      <ng-container #fieldComponent></ng-container>
-    </ng-container>
-  </div>
   `
                 }]
         }] });
@@ -953,7 +910,7 @@ class DbxFormStyleWrapperComponent extends FieldWrapper {
     constructor() {
         super(...arguments);
         this._style = new BehaviorSubject(undefined);
-        this.style$ = this._style.pipe(switchMapMaybeDefault(''), shareReplay$1(1));
+        this.style$ = this._style.pipe(switchMapMaybeDefault(''), shareReplay(1));
     }
     get styleWrapper() {
         return this.field.styleWrapper;
@@ -1029,15 +986,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImpor
 class DbxFormFormlyWrapperModule {
 }
 DbxFormFormlyWrapperModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxFormFormlyWrapperModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-DbxFormFormlyWrapperModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxFormFormlyWrapperModule, declarations: [AutoTouchFieldWrapperComponent,
-        DbxFormSectionWrapperComponent,
-        DbxFormSubsectionWrapperComponent,
-        DbxFormInfoWrapperComponent,
-        DbxFormExpandWrapperComponent,
-        DbxFormToggleWrapperComponent,
-        DbxFormFlexWrapperComponent,
-        DbxFormStyleWrapperComponent,
-        DbxFormWorkingWrapperComponent], imports: [CommonModule,
+DbxFormFormlyWrapperModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxFormFormlyWrapperModule, declarations: [AutoTouchFieldWrapperComponent, DbxFormSectionWrapperComponent, DbxFormSubsectionWrapperComponent, DbxFormInfoWrapperComponent, DbxFormExpandWrapperComponent, DbxFormToggleWrapperComponent, DbxFormFlexWrapperComponent, DbxFormStyleWrapperComponent, DbxFormWorkingWrapperComponent], imports: [CommonModule,
         DbxTextModule,
         DbxLoadingModule,
         DbxFlexLayoutModule,
@@ -1097,17 +1046,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImpor
                             ]
                         })
                     ],
-                    declarations: [
-                        AutoTouchFieldWrapperComponent,
-                        DbxFormSectionWrapperComponent,
-                        DbxFormSubsectionWrapperComponent,
-                        DbxFormInfoWrapperComponent,
-                        DbxFormExpandWrapperComponent,
-                        DbxFormToggleWrapperComponent,
-                        DbxFormFlexWrapperComponent,
-                        DbxFormStyleWrapperComponent,
-                        DbxFormWorkingWrapperComponent
-                    ],
+                    declarations: [AutoTouchFieldWrapperComponent, DbxFormSectionWrapperComponent, DbxFormSubsectionWrapperComponent, DbxFormInfoWrapperComponent, DbxFormExpandWrapperComponent, DbxFormToggleWrapperComponent, DbxFormFlexWrapperComponent, DbxFormStyleWrapperComponent, DbxFormWorkingWrapperComponent],
                     exports: []
                 }]
         }] });
@@ -1115,9 +1054,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImpor
 class DbxFormFormlyChecklistItemFieldModule {
 }
 DbxFormFormlyChecklistItemFieldModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxFormFormlyChecklistItemFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-DbxFormFormlyChecklistItemFieldModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxFormFormlyChecklistItemFieldModule, declarations: [DbxChecklistItemFieldComponent,
-        DbxChecklistItemContentComponent,
-        DbxDefaultChecklistItemFieldDisplayComponent], imports: [CommonModule,
+DbxFormFormlyChecklistItemFieldModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxFormFormlyChecklistItemFieldModule, declarations: [DbxChecklistItemFieldComponent, DbxChecklistItemContentComponent, DbxDefaultChecklistItemFieldDisplayComponent], imports: [CommonModule,
         DbxTextModule,
         FormsModule,
         ReactiveFormsModule,
@@ -1141,9 +1078,7 @@ DbxFormFormlyChecklistItemFieldModule.ɵinj = i0.ɵɵngDeclareInjector({ minVers
             DbxInjectionComponentModule,
             DbxFormFormlyWrapperModule,
             FormlyModule.forChild({
-                types: [
-                    { name: 'checklistitem', component: DbxChecklistItemFieldComponent }
-                ]
+                types: [{ name: 'checklistitem', component: DbxChecklistItemFieldComponent }]
             })
         ], DbxFormFormlyWrapperModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxFormFormlyChecklistItemFieldModule, decorators: [{
@@ -1162,19 +1097,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImpor
                         DbxInjectionComponentModule,
                         DbxFormFormlyWrapperModule,
                         FormlyModule.forChild({
-                            types: [
-                                { name: 'checklistitem', component: DbxChecklistItemFieldComponent }
-                            ]
+                            types: [{ name: 'checklistitem', component: DbxChecklistItemFieldComponent }]
                         })
                     ],
-                    declarations: [
-                        DbxChecklistItemFieldComponent,
-                        DbxChecklistItemContentComponent,
-                        DbxDefaultChecklistItemFieldDisplayComponent
-                    ],
-                    exports: [
-                        DbxFormFormlyWrapperModule
-                    ]
+                    declarations: [DbxChecklistItemFieldComponent, DbxChecklistItemContentComponent, DbxDefaultChecklistItemFieldDisplayComponent],
+                    exports: [DbxFormFormlyWrapperModule]
                 }]
         }] });
 
@@ -1195,7 +1122,9 @@ function templateOptionsForFieldConfig(fieldConfig, override) {
     };
 }
 function templateOptionsValueForFieldConfig(fieldConfig, override) {
-    const { label, placeholder, required, readonly, description, autocomplete } = mergeObjects([fieldConfig, override], { keysFilter: ['label', 'placeholder', 'required', 'readonly', 'description', 'autocomplete'] });
+    const { label, placeholder, required, readonly, description, autocomplete } = mergeObjects([fieldConfig, override], {
+        keysFilter: ['label', 'placeholder', 'required', 'readonly', 'description', 'autocomplete']
+    });
     const attributes = mergeObjects([fieldConfig.attributes, override === null || override === void 0 ? void 0 : override.attributes]);
     const result = filterFromPOJO(Object.assign(Object.assign({}, override), { label,
         placeholder,
@@ -1252,10 +1181,7 @@ class ChecklistItemFieldDataSetBuilder {
         const currentField = this._assertFieldExists(key).field;
         const mergedConfig = Object.assign(Object.assign(Object.assign({}, currentField), config), { key });
         if (currentField.displayContentObs && config.displayContentObs) {
-            mergedConfig.displayContentObs = combineLatest([
-                currentField.displayContentObs,
-                config.displayContentObs
-            ]).pipe(map$1(([a, b]) => {
+            mergedConfig.displayContentObs = combineLatest([currentField.displayContentObs, config.displayContentObs]).pipe(map(([a, b]) => {
                 const result = Object.assign(Object.assign({}, a), b);
                 // console.log('A and b: ', a, b, result);
                 return result;
@@ -1283,10 +1209,11 @@ class ChecklistItemFieldDataSetBuilder {
     }
     field(config) {
         const key = config.key;
-        this._fields.set(key, {
+        const field = {
             key,
             field: config
-        });
+        };
+        this._fields.set(key, field);
     }
     // MARK: Build/Finish
     build() {
@@ -1296,7 +1223,7 @@ class ChecklistItemFieldDataSetBuilder {
     }
     // MARK: Utility
     customContentFromData(mapFn) {
-        return this.dataObs$.pipe(map$1(mapFn));
+        return this.dataObs$.pipe(map(mapFn));
     }
     contentWithValueFromData(key, contentFn) {
         return this.customContentFromData((data) => {
@@ -1340,9 +1267,7 @@ DbxFormFormlyComponentFieldModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion:
             CommonModule,
             DbxInjectionComponentModule,
             FormlyModule.forChild({
-                types: [
-                    { name: 'component', component: DbxFormComponentFieldComponent }
-                ]
+                types: [{ name: 'component', component: DbxFormComponentFieldComponent }]
             })
         ]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxFormFormlyComponentFieldModule, decorators: [{
@@ -1352,17 +1277,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImpor
                         CommonModule,
                         DbxInjectionComponentModule,
                         FormlyModule.forChild({
-                            types: [
-                                { name: 'component', component: DbxFormComponentFieldComponent }
-                            ]
+                            types: [{ name: 'component', component: DbxFormComponentFieldComponent }]
                         })
                     ],
-                    declarations: [
-                        DbxFormComponentFieldComponent
-                    ],
-                    exports: [
-                        DbxFormComponentFieldComponent
-                    ]
+                    declarations: [DbxFormComponentFieldComponent],
+                    exports: [DbxFormComponentFieldComponent]
                 }]
         }] });
 
@@ -1384,14 +1303,14 @@ 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(), shareReplay$1(1));
-        this.loadResultsDisplayValuesState$ = this.formControl$.pipe(first(), switchMap(() => this.loadValuesFn().pipe(switchMap((x) => this.loadDisplayValuesForFieldValues(x)), startWith(beginLoading()))), shareReplay$1(1));
-        this._formControlValue = this.formControl$.pipe(switchMap(control => control.valueChanges.pipe(startWith(control.value), shareReplay$1(1))));
-        this.loadResultsDisplayValues$ = this.loadResultsDisplayValuesState$.pipe(map(x => { var _a; return (_a = x === null || x === void 0 ? void 0 : x.value) !== null && _a !== void 0 ? _a : []; }));
+        this.filterInputValueString$ = this.filterInputValue$.pipe(debounceTime(200), distinctUntilChanged(), shareReplay(1));
+        this.loadResultsDisplayValuesState$ = this.formControl$.pipe(first(), switchMap(() => this.loadValuesFn().pipe(switchMap((x) => this.loadDisplayValuesForFieldValues(x)), startWithBeginLoading())), shareReplay(1));
+        this._formControlValue = this.formControl$.pipe(switchMap((control) => control.valueChanges.pipe(startWith(control.value), shareReplay(1))));
+        this.loadResultsDisplayValues$ = this.loadResultsDisplayValuesState$.pipe(map((x) => { var _a; return (_a = x === null || x === void 0 ? void 0 : x.value) !== null && _a !== void 0 ? _a : []; }));
         /**
          * Current values in the form control.
          */
-        this.values$ = this._formControlValue.pipe(map(convertMaybeToArray), shareReplay$1(1));
+        this.values$ = this._formControlValue.pipe(map(convertMaybeToArray), shareReplay(1));
         /**
          * Current values with their display value.
          */
@@ -1401,16 +1320,16 @@ class AbstractDbxPickableItemFieldDirective extends FieldType$1 {
             currentValues.forEach((x) => {
                 var _a;
                 const key = this.hashForValue(x);
-                let displayValue = (_a = displayValuesMap.get(key)) === null || _a === void 0 ? void 0 : _a[0];
+                const displayValue = (_a = displayValuesMap.get(key)) === null || _a === void 0 ? void 0 : _a[0];
                 if (!displayValue) {
                     valuesNotInDisplayMap.push(x);
                 }
             });
             if (valuesNotInDisplayMap.length) {
-                return this.loadDisplayValuesForValues(valuesNotInDisplayMap).pipe(map(x => mapLoadingStateResults(x, {
+                return this.loadDisplayValuesForValues(valuesNotInDisplayMap).pipe(map((x) => mapLoadingStateResults(x, {
                     mapValue: (loadedValues) => {
-                        loadedValues.forEach(x => { var _a; return x.isUnknown = (_a = x.isUnknown) !== null && _a !== void 0 ? _a : true; }); // Assign unknown flag.
-                        return ([...displayValues, ...loadedValues]);
+                        loadedValues.forEach((x) => { var _a; return (x.isUnknown = (_a = x.isUnknown) !== null && _a !== void 0 ? _a : true); }); // Assign unknown flag.
+                        return [...displayValues, ...loadedValues];
                     }
                 })));
             }
@@ -1421,27 +1340,27 @@ class AbstractDbxPickableItemFieldDirective extends FieldType$1 {
         /**
          * Results to be displayed if filtered.
          */
-        this.filteredSearchResultsState$ = this.loadResultsDisplayValues$.pipe(switchMap((values) => this.filterInputValueString$.pipe(switchMap(text => combineLatest([this._filterValues(text, values), this.displayValuesState$]).pipe(map(([values, displayState]) => mapLoadingStateResults(displayState, {
+        this.filteredSearchResultsState$ = this.loadResultsDisplayValues$.pipe(switchMap((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));
+                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(x => x === null || x === void 0 ? void 0 : x.value), filterMaybe(), shareReplay$1(1));
+        })), startWithBeginLoading())))), shareReplay(1));
+        this.filteredSearchResults$ = this.filteredSearchResultsState$.pipe(map((x) => x === null || x === void 0 ? void 0 : x.value), filterMaybe(), shareReplay(1));
         this.items$ = combineLatest([this.filteredSearchResults$, this.values$]).pipe(map(([displayValues, values]) => {
-            const selectedHashValuesSet = new Set(values.map(x => this.hashForValue(x)));
+            const selectedHashValuesSet = new Set(values.map((x) => this.hashForValue(x)));
             let items = displayValues.map((x) => ({ itemValue: x, selected: selectedHashValuesSet.has(x._hash) }));
             if (this.sortItems) {
                 items = this.sortItems(items);
             }
             return items;
-        }), shareReplay$1(1));
-        this.itemsLoadingState$ = this.loadResultsDisplayValues$.pipe(switchMap(x => this.items$.pipe(first(), map(x => successResult(x)), startWith(beginLoading()), shareReplay$1(1))));
+        }), shareReplay(1));
+        this.itemsLoadingState$ = this.loadResultsDisplayValues$.pipe(switchMap(() => this.items$.pipe(first(), map((x) => successResult(x)), startWithBeginLoading(), shareReplay(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(x => successResult(x)), startWith(beginLoading()), shareReplay$1(1));
+        this.filterItemsLoadingState$ = this.items$.pipe(map((x) => successResult(x)), startWithBeginLoading(), shareReplay(1));
         /**
          * Context used for searching/filtering.
          */
@@ -1471,7 +1390,7 @@ class AbstractDbxPickableItemFieldDirective extends FieldType$1 {
     }
     get name() {
         var _a, _b;
-        return (_a = this.field.name) !== null && _a !== void 0 ? _a : (camelCase((_b = this.label) !== null && _b !== void 0 ? _b : this.key));
+        return (_a = this.field.name) !== null && _a !== void 0 ? _a : camelCase((_b = this.label) !== null && _b !== void 0 ? _b : this.key);
     }
     get label() {
         var _a;
@@ -1479,7 +1398,7 @@ class AbstractDbxPickableItemFieldDirective extends FieldType$1 {
     }
     get autocomplete() {
         var _a, _b, _c;
-        return (_c = (_b = (_a = this.field.templateOptions) === null || _a === void 0 ? void 0 : _a.attributes) === null || _b === void 0 ? void 0 : _b['autocomplete']) !== null && _c !== void 0 ? _c : this.key;
+        return ((_c = (_b = (_a = this.field.templateOptions) === null || _a === void 0 ? void 0 : _a.attributes) === null || _b === void 0 ? void 0 : _b['autocomplete']) !== null && _c !== void 0 ? _c : this.key);
     }
     get changeSelectionModeToViewOnDisabled() {
         var _a;
@@ -1500,7 +1419,7 @@ class AbstractDbxPickableItemFieldDirective extends FieldType$1 {
     }
     get filterValuesFn() {
         var _a;
-        return (_a = this.pickableField.filterValues) !== null && _a !== void 0 ? _a : ((_, x) => of(x.map(y => y.value)));
+        return (_a = this.pickableField.filterValues) !== null && _a !== void 0 ? _a : ((_, x) => of(x.map((y) => y.value)));
     }
     get skipFilterFnOnEmpty() {
         var _a;
@@ -1515,7 +1434,7 @@ class AbstractDbxPickableItemFieldDirective extends FieldType$1 {
                     result = this.filterValuesFn(filterText, values);
                 }
                 else {
-                    result = of(values.map(x => x.value));
+                    result = of(values.map((x) => x.value));
                 }
                 return result;
             };
@@ -1543,44 +1462,44 @@ class AbstractDbxPickableItemFieldDirective extends FieldType$1 {
         return this.loadDisplayValuesForFieldValues(values.map((value) => ({ value })));
     }
     loadDisplayValuesForFieldValues(values) {
-        return this.getDisplayValuesForFieldValues(values).pipe(map((displayValues) => successResult(displayValues)), startWith(beginLoading()), shareReplay$1(1));
+        return this.getDisplayValuesForFieldValues(values).pipe(map((displayValues) => successResult(displayValues)), startWithBeginLoading(), shareReplay(1));
     }
     getDisplayValuesForFieldValues(values) {
         return this._displayHashMap.pipe(mergeMap((displayMap) => {
-            const mappingResult = values
-                .map(x => [x, this.hashForValue(x.value)])
-                .map(([x, hash], i) => [i, hash, x, displayMap.get(hash)]);
-            const hasDisplay = mappingResult.filter(x => Boolean(x[3]));
-            const needsDisplay = mappingResult.filter(x => !x[3]);
+            const mappingResult = values.map((x) => [x, this.hashForValue(x.value)]).map(([x, hash], i) => [i, hash, x, displayMap.get(hash)]);
+            const hasDisplay = mappingResult.filter((x) => Boolean(x[3]));
+            const needsDisplay = mappingResult.filter((x) => !x[3]);
             if (needsDisplay.length > 0) {
                 // Go get the display value.
-                const displayValuesObs = this.displayForValue(needsDisplay.map(x => x[2]));
+                const displayValuesObs = this.displayForValue(needsDisplay.map((x) => x[2]));
                 return displayValuesObs.pipe(first(), map((displayResults) => {
                     const displayResultsWithHash = displayResults.map((x) => {
                         x._hash = this.hashForValue(x.value);
                         return x;
                     });
                     // Create a map to re-join values later.
-                    const displayResultsMapping = displayResultsWithHash.map(x => [x, x._hash]);
+                    const displayResultsMapping = displayResultsWithHash.map((x) => [x, x._hash]);
                     const valueIndexHashMap = new Map(displayResultsMapping.map(([x, hash]) => [hash, x]));
                     // Update displayMap. No need to push an update notification.
                     displayResultsMapping.forEach(([x, hash]) => displayMap.set(hash, x));
                     // Zip values back together.
-                    const newDisplayValues = mappingResult.map(x => { var _a; return (_a = x[3]) !== null && _a !== void 0 ? _a : valueIndexHashMap.get(x[1]); });
+                    const newDisplayValues = mappingResult.map((x) => { var _a; return (_a = x[3]) !== null && _a !== void 0 ? _a : valueIndexHashMap.get(x[1]); });
                     // Return display values.
                     return newDisplayValues;
                 }));
             }
             else {
                 // If all display values are hashed return that.
-                return of(hasDisplay.map(x => x[3]));
+                return of(hasDisplay.map((x) => x[3]));
             }
         }));
     }
     ngOnInit() {
         this._formControlObs.next(this.formControl);
         // Focus after finished loading for the first time.
-        this.context.loading$.pipe(delay(10), filter(x => x), first()).subscribe(() => {
+        this.context.loading$
+            .pipe(delay(10), filter((x) => x), first())
+            .subscribe(() => {
             var _a;
             (_a = this.filterMatInput) === null || _a === void 0 ? void 0 : _a.focus();
         });
@@ -1592,7 +1511,7 @@ class AbstractDbxPickableItemFieldDirective extends FieldType$1 {
         this.filterResultsContext.destroy();
     }
     _getValueOnFormControl(valueOnFormControl) {
-        const value = (valueOnFormControl != null) ? [].concat(valueOnFormControl) : []; // Always return an array.
+        const value = valueOnFormControl != null ? [].concat(valueOnFormControl) : []; // Always return an array.
         return value;
     }
     addValue(value) {
@@ -1600,7 +1519,7 @@ class AbstractDbxPickableItemFieldDirective extends FieldType$1 {
     }
     removeValue(value) {
         const hashToFilter = this.hashForValue(value);
-        const values = this.values.filter(x => this.hashForValue(x) !== hashToFilter);
+        const values = this.values.filter((x) => this.hashForValue(x) !== hashToFilter);
         this.setValues(values);
     }
     setValues(values) {
@@ -1609,7 +1528,7 @@ class AbstractDbxPickableItemFieldDirective extends FieldType$1 {
             values = findUnique(values, this.hashForValue);
         }
         if (!this.multiSelect) {
-            values = [values[0]].filter(x => x != null);
+            values = [values[0]].filter((x) => x != null);
         }
         this._setValueOnFormControl(values);
     }
@@ -1617,7 +1536,7 @@ class AbstractDbxPickableItemFieldDirective extends FieldType$1 {
     _setValueOnFormControl(values) {
         let newValue = values;
         if (!this.asArrayValue) {
-            newValue = [values[0]].filter(x => x != null)[0];
+            newValue = [values[0]].filter((x) => x != null)[0];
         }
         this.formControl.setValue(newValue);
         this.formControl.markAsTouched();
@@ -1649,10 +1568,10 @@ class DbxPickableChipListFieldComponent extends AbstractDbxPickableItemFieldDire
     }
 }
 DbxPickableChipListFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxPickableChipListFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-DbxPickableChipListFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: DbxPickableChipListFieldComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<div class=\"dbx-pickable-item-field\">\n  <dbx-loading [context]=\"context\" [linear]=\"true\">\n    <ng-container *ngIf=\"showFilterInput\">\n      <ng-container *ngTemplateOutlet=\"filterTemplate\"></ng-container>\n    </ng-container>\n    <!-- Content -->\n    <div class=\"dbx-pickable-item-field-chips\">\n      <mat-chip-list [required]=\"required\" [selectable]=\"!isReadonlyOrDisabled\" #chipList>\n        <mat-chip *ngFor=\"let item of items$ | async\" (click)=\"itemClicked(item)\" [selected]=\"item.selected\"\n          [disabled]=\"isReadonlyOrDisabled || item.disabled\">\n          <span class=\"dbx-chip-label\">{{ item.itemValue.label }}</span>\n          <span class=\"dbx-chip-sublabel\" *ngIf=\"item.itemValue.sublabel\">{{ item.itemValue.sublabel }}</span>\n        </mat-chip>\n      </mat-chip-list>\n      <dbx-injection [config]=\"footerConfig\"></dbx-injection>\n    </div>\n  </dbx-loading>\n</div>\n\n<!-- Filter Input -->\n<ng-template #filterTemplate>\n  <div class=\"dbx-pickable-item-field-filter\">\n    <div class=\"dbx-label\">{{ filterLabel }}</div>\n    <input [name]=\"name\" autocomplete=\"{{ autocomplete }}\" #filterMatInput=\"matInput\" matInput\n      [placeholder]=\"placeholder\" [formControl]=\"inputCtrl\">\n    <mat-divider></mat-divider>\n    <dbx-loading [linear]=\"true\" [context]=\"filterResultsContext\"></dbx-loading>\n    <!-- No items found. -->\n    <p *ngIf=\"noItemsAvailable$ | async\" class=\"dbx-label\">No items match this filter.</p>\n  </div>\n</ng-template>\n", components: [{ type: i1$1.DbxLoadingComponent, selector: "dbx-loading", inputs: ["show", "text", "mode", "color", "diameter", "linear", "context", "loading", "error"] }, { type: i1$5.MatChipList, selector: "mat-chip-list", inputs: ["errorStateMatcher", "multiple", "compareWith", "value", "required", "placeholder", "disabled", "aria-orientation", "selectable", "tabIndex"], outputs: ["change", "valueChange"], exportAs: ["matChipList"] }, { type: i2.DbxInjectionComponent, selector: "dbx-injection, [dbxInjection], [dbx-injection]", inputs: ["config", "template"] }, { type: i4$2.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$5.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disableRipple", "tabIndex", "selected", "value", "selectable", "disabled", "removable"], outputs: ["selectionChange", "destroyed", "removed"], exportAs: ["matChip"] }, { type: i6$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i4$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i4$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], pipes: { "async": i5.AsyncPipe } });
+DbxPickableChipListFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: DbxPickableChipListFieldComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<div class=\"dbx-pickable-item-field\">\n  <dbx-loading [context]=\"context\" [linear]=\"true\">\n    <ng-container *ngIf=\"showFilterInput\">\n      <ng-container *ngTemplateOutlet=\"filterTemplate\"></ng-container>\n    </ng-container>\n    <!-- Content -->\n    <div class=\"dbx-pickable-item-field-chips\">\n      <mat-chip-list [required]=\"required\" [selectable]=\"!isReadonlyOrDisabled\" #chipList>\n        <mat-chip *ngFor=\"let item of items$ | async\" (click)=\"itemClicked(item)\" [selected]=\"item.selected\" [disabled]=\"isReadonlyOrDisabled || item.disabled\">\n          <span class=\"dbx-chip-label\">{{ item.itemValue.label }}</span>\n          <span class=\"dbx-chip-sublabel\" *ngIf=\"item.itemValue.sublabel\">{{ item.itemValue.sublabel }}</span>\n        </mat-chip>\n      </mat-chip-list>\n      <dbx-injection [config]=\"footerConfig\"></dbx-injection>\n    </div>\n  </dbx-loading>\n</div>\n\n<!-- Filter Input -->\n<ng-template #filterTemplate>\n  <div class=\"dbx-pickable-item-field-filter\">\n    <div class=\"dbx-label\">{{ filterLabel }}</div>\n    <input [name]=\"name\" autocomplete=\"{{ autocomplete }}\" #filterMatInput=\"matInput\" matInput [placeholder]=\"placeholder\" [formControl]=\"inputCtrl\" />\n    <mat-divider></mat-divider>\n    <dbx-loading [linear]=\"true\" [context]=\"filterResultsContext\"></dbx-loading>\n    <!-- No items found. -->\n    <p *ngIf=\"noItemsAvailable$ | async\" class=\"dbx-label\">No items match this filter.</p>\n  </div>\n</ng-template>\n", components: [{ type: i1$1.DbxLoadingComponent, selector: "dbx-loading", inputs: ["show", "text", "mode", "color", "diameter", "linear", "context", "loading", "error"] }, { type: i1$5.MatChipList, selector: "mat-chip-list", inputs: ["errorStateMatcher", "multiple", "compareWith", "value", "required", "placeholder", "disabled", "aria-orientation", "selectable", "tabIndex"], outputs: ["change", "valueChange"], exportAs: ["matChipList"] }, { type: i2.DbxInjectionComponent, selector: "dbx-injection, [dbxInjection], [dbx-injection]", inputs: ["config", "template"] }, { type: i4$2.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$5.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disableRipple", "tabIndex", "selected", "value", "selectable", "disabled", "removable"], outputs: ["selectionChange", "destroyed", "removed"], exportAs: ["matChip"] }, { type: i6$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i4$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i4$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], pipes: { "async": i5.AsyncPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxPickableChipListFieldComponent, decorators: [{
             type: Component,
-            args: [{ template: "<div class=\"dbx-pickable-item-field\">\n  <dbx-loading [context]=\"context\" [linear]=\"true\">\n    <ng-container *ngIf=\"showFilterInput\">\n      <ng-container *ngTemplateOutlet=\"filterTemplate\"></ng-container>\n    </ng-container>\n    <!-- Content -->\n    <div class=\"dbx-pickable-item-field-chips\">\n      <mat-chip-list [required]=\"required\" [selectable]=\"!isReadonlyOrDisabled\" #chipList>\n        <mat-chip *ngFor=\"let item of items$ | async\" (click)=\"itemClicked(item)\" [selected]=\"item.selected\"\n          [disabled]=\"isReadonlyOrDisabled || item.disabled\">\n          <span class=\"dbx-chip-label\">{{ item.itemValue.label }}</span>\n          <span class=\"dbx-chip-sublabel\" *ngIf=\"item.itemValue.sublabel\">{{ item.itemValue.sublabel }}</span>\n        </mat-chip>\n      </mat-chip-list>\n      <dbx-injection [config]=\"footerConfig\"></dbx-injection>\n    </div>\n  </dbx-loading>\n</div>\n\n<!-- Filter Input -->\n<ng-template #filterTemplate>\n  <div class=\"dbx-pickable-item-field-filter\">\n    <div class=\"dbx-label\">{{ filterLabel }}</div>\n    <input [name]=\"name\" autocomplete=\"{{ autocomplete }}\" #filterMatInput=\"matInput\" matInput\n      [placeholder]=\"placeholder\" [formControl]=\"inputCtrl\">\n    <mat-divider></mat-divider>\n    <dbx-loading [linear]=\"true\" [context]=\"filterResultsContext\"></dbx-loading>\n    <!-- No items found. -->\n    <p *ngIf=\"noItemsAvailable$ | async\" class=\"dbx-label\">No items match this filter.</p>\n  </div>\n</ng-template>\n" }]
+            args: [{ template: "<div class=\"dbx-pickable-item-field\">\n  <dbx-loading [context]=\"context\" [linear]=\"true\">\n    <ng-container *ngIf=\"showFilterInput\">\n      <ng-container *ngTemplateOutlet=\"filterTemplate\"></ng-container>\n    </ng-container>\n    <!-- Content -->\n    <div class=\"dbx-pickable-item-field-chips\">\n      <mat-chip-list [required]=\"required\" [selectable]=\"!isReadonlyOrDisabled\" #chipList>\n        <mat-chip *ngFor=\"let item of items$ | async\" (click)=\"itemClicked(item)\" [selected]=\"item.selected\" [disabled]=\"isReadonlyOrDisabled || item.disabled\">\n          <span class=\"dbx-chip-label\">{{ item.itemValue.label }}</span>\n          <span class=\"dbx-chip-sublabel\" *ngIf=\"item.itemValue.sublabel\">{{ item.itemValue.sublabel }}</span>\n        </mat-chip>\n      </mat-chip-list>\n      <dbx-injection [config]=\"footerConfig\"></dbx-injection>\n    </div>\n  </dbx-loading>\n</div>\n\n<!-- Filter Input -->\n<ng-template #filterTemplate>\n  <div class=\"dbx-pickable-item-field-filter\">\n    <div class=\"dbx-label\">{{ filterLabel }}</div>\n    <input [name]=\"name\" autocomplete=\"{{ autocomplete }}\" #filterMatInput=\"matInput\" matInput [placeholder]=\"placeholder\" [formControl]=\"inputCtrl\" />\n    <mat-divider></mat-divider>\n    <dbx-loading [linear]=\"true\" [context]=\"filterResultsContext\"></dbx-loading>\n    <!-- No items found. -->\n    <p *ngIf=\"noItemsAvailable$ | async\" class=\"dbx-label\">No items match this filter.</p>\n  </div>\n</ng-template>\n" }]
         }] });
 
 /**
@@ -1661,15 +1580,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImpor
 class DbxPickableListFieldComponent extends AbstractDbxPickableItemFieldDirective {
     onSelectionChange(event) {
         const items = event.items;
-        const values = items.map(x => x.itemValue.value);
+        const values = items.map((x) => x.itemValue.value);
         this.setValues(values);
     }
 }
 DbxPickableListFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxPickableListFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-DbxPickableListFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: DbxPickableListFieldComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<div class=\"dbx-pickable-item-field\">\n  <dbx-loading [context]=\"context\">\n    <ng-container *ngIf=\"showFilterInput\">\n      <ng-container *ngTemplateOutlet=\"filterTemplate\"></ng-container>\n    </ng-container>\n    <!-- Content -->\n    <div class=\"dbx-pickable-item-field-list\">\n      <div class=\"dbx-pickable-item-field-list-content\">\n        <dbx-form-pickable-item-field-item-list [disabled]=\"isReadonlyOrDisabled\" [state$]=\"filterItemsLoadingState$\"\n          (selectionChange)=\"onSelectionChange($event)\">\n        </dbx-form-pickable-item-field-item-list>\n      </div>\n      <dbx-injection [config]=\"footerConfig\"></dbx-injection>\n    </div>\n  </dbx-loading>\n</div>\n\n<!-- Filter Input -->\n<ng-template #filterTemplate>\n  <div class=\"dbx-pickable-item-field-filter\">\n    <div class=\"dbx-label\">{{ filterLabel }}</div>\n    <input [name]=\"name\" autocomplete=\"{{ autocomplete }}\" #filterMatInput=\"matInput\" matInput\n      [placeholder]=\"placeholder\" [formControl]=\"inputCtrl\">\n    <mat-divider></mat-divider>\n    <dbx-loading [linear]=\"true\" [context]=\"filterResultsContext\"></dbx-loading>\n    <!-- No items found. -->\n    <p *ngIf=\"noItemsAvailable$ | async\" class=\"dbx-label\">No items match this filter.</p>\n  </div>\n</ng-template>\n", components: [{ type: i0.forwardRef(function () { return i1$1.DbxLoadingComponent; }), selector: "dbx-loading", inputs: ["show", "text", "mode", "color", "diameter", "linear", "context", "loading", "error"] }, { type: i0.forwardRef(function () { return DbxPickableListFieldItemListComponent; }), selector: "dbx-form-pickable-item-field-item-list" }, { type: i0.forwardRef(function () { return i2.DbxInjectionComponent; }), selector: "dbx-injection, [dbxInjection], [dbx-injection]", inputs: ["config", "template"] }, { type: i0.forwardRef(function () { return i4$2.MatDivider; }), selector: "mat-divider", inputs: ["vertical", "inset"] }], directives: [{ type: i0.forwardRef(function () { return i5.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i0.forwardRef(function () { return i5.NgTemplateOutlet; }), selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i0.forwardRef(function () { return i6$1.MatInput; }), selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i0.forwardRef(function () { return i4$1.DefaultValueAccessor; }), selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i0.forwardRef(function () { return i4$1.NgControlStatus; }), selector: "[formControlName],[ngModel],[formControl]" }, { type: i0.forwardRef(function () { return i4$1.FormControlDirective; }), selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], pipes: { "async": i0.forwardRef(function () { return i5.AsyncPipe; }) } });
+DbxPickableListFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: DbxPickableListFieldComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<div class=\"dbx-pickable-item-field\">\n  <dbx-loading [context]=\"context\">\n    <ng-container *ngIf=\"showFilterInput\">\n      <ng-container *ngTemplateOutlet=\"filterTemplate\"></ng-container>\n    </ng-container>\n    <!-- Content -->\n    <div class=\"dbx-pickable-item-field-list\">\n      <div class=\"dbx-pickable-item-field-list-content\">\n        <dbx-form-pickable-item-field-item-list [disabled]=\"isReadonlyOrDisabled\" [state$]=\"filterItemsLoadingState$\" (selectionChange)=\"onSelectionChange($event)\"></dbx-form-pickable-item-field-item-list>\n      </div>\n      <dbx-injection [config]=\"footerConfig\"></dbx-injection>\n    </div>\n  </dbx-loading>\n</div>\n\n<!-- Filter Input -->\n<ng-template #filterTemplate>\n  <div class=\"dbx-pickable-item-field-filter\">\n    <div class=\"dbx-label\">{{ filterLabel }}</div>\n    <input [name]=\"name\" autocomplete=\"{{ autocomplete }}\" #filterMatInput=\"matInput\" matInput [placeholder]=\"placeholder\" [formControl]=\"inputCtrl\" />\n    <mat-divider></mat-divider>\n    <dbx-loading [linear]=\"true\" [context]=\"filterResultsContext\"></dbx-loading>\n    <!-- No items found. -->\n    <p *ngIf=\"noItemsAvailable$ | async\" class=\"dbx-label\">No items match this filter.</p>\n  </div>\n</ng-template>\n", components: [{ type: i0.forwardRef(function () { return i1$1.DbxLoadingComponent; }), selector: "dbx-loading", inputs: ["show", "text", "mode", "color", "diameter", "linear", "context", "loading", "error"] }, { type: i0.forwardRef(function () { return DbxPickableListFieldItemListComponent; }), selector: "dbx-form-pickable-item-field-item-list" }, { type: i0.forwardRef(function () { return i2.DbxInjectionComponent; }), selector: "dbx-injection, [dbxInjection], [dbx-injection]", inputs: ["config", "template"] }, { type: i0.forwardRef(function () { return i4$2.MatDivider; }), selector: "mat-divider", inputs: ["vertical", "inset"] }], directives: [{ type: i0.forwardRef(function () { return i5.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i0.forwardRef(function () { return i5.NgTemplateOutlet; }), selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i0.forwardRef(function () { return i6$1.MatInput; }), selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i0.forwardRef(function () { return i4$1.DefaultValueAccessor; }), selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i0.forwardRef(function () { return i4$1.NgControlStatus; }), selector: "[formControlName],[ngModel],[formControl]" }, { type: i0.forwardRef(function () { return i4$1.FormControlDirective; }), selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], pipes: { "async": i0.forwardRef(function () { return i5.AsyncPipe; }) } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxPickableListFieldComponent, decorators: [{
             type: Component,
-            args: [{ template: "<div class=\"dbx-pickable-item-field\">\n  <dbx-loading [context]=\"context\">\n    <ng-container *ngIf=\"showFilterInput\">\n      <ng-container *ngTemplateOutlet=\"filterTemplate\"></ng-container>\n    </ng-container>\n    <!-- Content -->\n    <div class=\"dbx-pickable-item-field-list\">\n      <div class=\"dbx-pickable-item-field-list-content\">\n        <dbx-form-pickable-item-field-item-list [disabled]=\"isReadonlyOrDisabled\" [state$]=\"filterItemsLoadingState$\"\n          (selectionChange)=\"onSelectionChange($event)\">\n        </dbx-form-pickable-item-field-item-list>\n      </div>\n      <dbx-injection [config]=\"footerConfig\"></dbx-injection>\n    </div>\n  </dbx-loading>\n</div>\n\n<!-- Filter Input -->\n<ng-template #filterTemplate>\n  <div class=\"dbx-pickable-item-field-filter\">\n    <div class=\"dbx-label\">{{ filterLabel }}</div>\n    <input [name]=\"name\" autocomplete=\"{{ autocomplete }}\" #filterMatInput=\"matInput\" matInput\n      [placeholder]=\"placeholder\" [formControl]=\"inputCtrl\">\n    <mat-divider></mat-divider>\n    <dbx-loading [linear]=\"true\" [context]=\"filterResultsContext\"></dbx-loading>\n    <!-- No items found. -->\n    <p *ngIf=\"noItemsAvailable$ | async\" class=\"dbx-label\">No items match this filter.</p>\n  </div>\n</ng-template>\n" }]
+            args: [{ template: "<div class=\"dbx-pickable-item-field\">\n  <dbx-loading [context]=\"context\">\n    <ng-container *ngIf=\"showFilterInput\">\n      <ng-container *ngTemplateOutlet=\"filterTemplate\"></ng-container>\n    </ng-container>\n    <!-- Content -->\n    <div class=\"dbx-pickable-item-field-list\">\n      <div class=\"dbx-pickable-item-field-list-content\">\n        <dbx-form-pickable-item-field-item-list [disabled]=\"isReadonlyOrDisabled\" [state$]=\"filterItemsLoadingState$\" (selectionChange)=\"onSelectionChange($event)\"></dbx-form-pickable-item-field-item-list>\n      </div>\n      <dbx-injection [config]=\"footerConfig\"></dbx-injection>\n    </div>\n  </dbx-loading>\n</div>\n\n<!-- Filter Input -->\n<ng-template #filterTemplate>\n  <div class=\"dbx-pickable-item-field-filter\">\n    <div class=\"dbx-label\">{{ filterLabel }}</div>\n    <input [name]=\"name\" autocomplete=\"{{ autocomplete }}\" #filterMatInput=\"matInput\" matInput [placeholder]=\"placeholder\" [formControl]=\"inputCtrl\" />\n    <mat-divider></mat-divider>\n    <dbx-loading [linear]=\"true\" [context]=\"filterResultsContext\"></dbx-loading>\n    <!-- No items found. -->\n    <p *ngIf=\"noItemsAvailable$ | async\" class=\"dbx-label\">No items match this filter.</p>\n  </div>\n</ng-template>\n" }]
         }] });
 // MARK: Selection List
 class DbxPickableListFieldItemListComponent extends AbstractDbxSelectionListWrapperDirective {
@@ -1695,12 +1614,13 @@ class DbxPickableListFieldItemListViewComponent extends AbstractDbxSelectionList
     constructor(dbxPickableListFieldComponent) {
         super();
         this.dbxPickableListFieldComponent = dbxPickableListFieldComponent;
+        // TODO: any belongs here for now, but item list typings need to be updated.
         this.config = {
             componentClass: DbxPickableListFieldItemListViewItemComponent
         };
         this.items$ = this.values$.pipe(
         // NOTE: This causes the "value" to be a PickableValueFieldDisplayValue<T>, which means we emit PickableValueFieldDisplayValue<T> to DbxPickableListFieldComponent.
-        map(x => addConfigToValueListItems(this.config, x)), shareReplay$1(1));
+        map((x) => addConfigToValueListItems(this.config, x)), shareReplay(1));
     }
     get multiple() {
         return this.dbxPickableListFieldComponent.multiSelect;
@@ -1714,12 +1634,16 @@ class DbxPickableListFieldItemListViewComponent extends AbstractDbxSelectionList
     }
 }
 DbxPickableListFieldItemListViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxPickableListFieldItemListViewComponent, deps: [{ token: DbxPickableListFieldComponent }], target: i0.ɵɵFactoryTarget.Component });
-DbxPickableListFieldItemListViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: DbxPickableListFieldItemListViewComponent, selector: "ng-component", providers: ProvideDbxListView(DbxPickableListFieldItemListViewComponent), usesInheritance: true, ngImport: i0, template: `<dbx-selection-list-view-content [multiple]="multiple" [selectionMode]="selectionMode" [items]="items$ | async"></dbx-selection-list-view-content>`, isInline: true, components: [{ type: i1$1.DbxSelectionValueListItemViewComponent, selector: "dbx-selection-list-view-content", inputs: ["multiple", "selectionMode"] }], pipes: { "async": i5.AsyncPipe } });
+DbxPickableListFieldItemListViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: DbxPickableListFieldItemListViewComponent, selector: "ng-component", providers: provideDbxListView(DbxPickableListFieldItemListViewComponent), usesInheritance: true, ngImport: i0, template: `
+    <dbx-selection-list-view-content [multiple]="multiple" [selectionMode]="selectionMode" [items]="items$ | async"></dbx-selection-list-view-content>
+  `, isInline: true, components: [{ type: i1$1.DbxSelectionValueListItemViewComponent, selector: "dbx-selection-list-view-content", inputs: ["multiple", "selectionMode"] }], pipes: { "async": i5.AsyncPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxPickableListFieldItemListViewComponent, decorators: [{
             type: Component,
             args: [{
-                    template: `<dbx-selection-list-view-content [multiple]="multiple" [selectionMode]="selectionMode" [items]="items$ | async"></dbx-selection-list-view-content>`,
-                    providers: ProvideDbxListView(DbxPickableListFieldItemListViewComponent)
+                    template: `
+    <dbx-selection-list-view-content [multiple]="multiple" [selectionMode]="selectionMode" [items]="items$ | async"></dbx-selection-list-view-content>
+  `,
+                    providers: provideDbxListView(DbxPickableListFieldItemListViewComponent)
                 }]
         }], ctorParameters: function () { return [{ type: DbxPickableListFieldComponent }]; } });
 class DbxPickableListFieldItemListViewItemComponent extends AbstractDbxValueListViewItemComponent {
@@ -1743,11 +1667,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImpor
 class DbxFormFormlyPickableFieldModule {
 }
 DbxFormFormlyPickableFieldModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxFormFormlyPickableFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-DbxFormFormlyPickableFieldModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxFormFormlyPickableFieldModule, declarations: [DbxPickableChipListFieldComponent,
-        DbxPickableListFieldComponent,
-        DbxPickableListFieldItemListComponent,
-        DbxPickableListFieldItemListViewComponent,
-        DbxPickableListFieldItemListViewItemComponent], imports: [CommonModule,
+DbxFormFormlyPickableFieldModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxFormFormlyPickableFieldModule, declarations: [DbxPickableChipListFieldComponent, DbxPickableListFieldComponent, DbxPickableListFieldItemListComponent, DbxPickableListFieldItemListViewComponent, DbxPickableListFieldItemListViewItemComponent], imports: [CommonModule,
         DbxTextModule,
         DbxLoadingModule,
         DbxButtonModule,
@@ -1785,7 +1705,7 @@ DbxFormFormlyPickableFieldModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion:
             FormlyModule.forChild({
                 types: [
                     { name: 'pickablechipfield', component: DbxPickableChipListFieldComponent, wrappers: ['form-field'] },
-                    { name: 'pickablelistfield', component: DbxPickableListFieldComponent, wrappers: ['form-field'] },
+                    { name: 'pickablelistfield', component: DbxPickableListFieldComponent, wrappers: ['form-field'] }
                 ]
             })
         ]] });
@@ -1813,17 +1733,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImpor
                         FormlyModule.forChild({
                             types: [
                                 { name: 'pickablechipfield', component: DbxPickableChipListFieldComponent, wrappers: ['form-field'] },
-                                { name: 'pickablelistfield', component: DbxPickableListFieldComponent, wrappers: ['form-field'] },
+                                { name: 'pickablelistfield', component: DbxPickableListFieldComponent, wrappers: ['form-field'] }
                             ]
                         })
                     ],
-                    declarations: [
-                        DbxPickableChipListFieldComponent,
-                        DbxPickableListFieldComponent,
-                        DbxPickableListFieldItemListComponent,
-                        DbxPickableListFieldItemListViewComponent,
-                        DbxPickableListFieldItemListViewItemComponent
-                    ],
+                    declarations: [DbxPickableChipListFieldComponent, DbxPickableListFieldComponent, DbxPickableListFieldItemListComponent, DbxPickableListFieldItemListViewComponent, DbxPickableListFieldItemListViewItemComponent],
                     exports: []
                 }]
         }] });
@@ -1832,12 +1746,12 @@ function filterPickableItemFieldValuesByLabel(filterText, values) {
     let filteredValues;
     if (filterText) {
         const searchString = filterText.toLocaleLowerCase();
-        filteredValues = values.filter(x => x.label.toLocaleLowerCase().indexOf(searchString) !== -1);
+        filteredValues = values.filter((x) => x.label.toLocaleLowerCase().indexOf(searchString) !== -1);
     }
     else {
         filteredValues = values;
     }
-    return of(filteredValues.map(x => x.value));
+    return of(filteredValues.map((x) => x.value));
 }
 function sortPickableItemsByLabel(chips) {
     return chips.sort((a, b) => a.itemValue.label.localeCompare(b.itemValue.label));
@@ -1859,15 +1773,17 @@ const DBX_SEARCHABLE_FIELD_COMPONENT_DATA_TOKEN = new InjectionToken('DbxSearcha
 class DbxSearchableFieldAutocompleteItemComponent {
     constructor() {
         this._displayValue = new BehaviorSubject(undefined);
-        this.displayValue$ = this._displayValue.pipe(filterMaybe(), shareReplay$1(1));
-        this.config$ = this.displayValue$.pipe(map(x => {
-            const config = Object.assign(Object.assign({}, x.display), { providers: mergeIntoArray([{
+        this.displayValue$ = this._displayValue.pipe(filterMaybe(), shareReplay(1));
+        this.config$ = this.displayValue$.pipe(map((x) => {
+            const config = Object.assign(Object.assign({}, x.display), { providers: mergeIntoArray([
+                    {
                         provide: DBX_SEARCHABLE_FIELD_COMPONENT_DATA_TOKEN,
                         useValue: x
-                    }], x.display.providers) });
+                    }
+                ], x.display.providers) });
             return config;
         }));
-        this.anchor$ = this.displayValue$.pipe(map(x => x.anchor));
+        this.anchor$ = this.displayValue$.pipe(map((x) => x.anchor));
     }
     set displayValue(displayValue) {
         this._displayValue.next(displayValue);
@@ -1915,20 +1831,20 @@ class DbxDefaultSearchableFieldDisplayComponent extends AbstractDbxSearchableFie
 }
 DbxDefaultSearchableFieldDisplayComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxDefaultSearchableFieldDisplayComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
 DbxDefaultSearchableFieldDisplayComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: DbxDefaultSearchableFieldDisplayComponent, selector: "dbx-default-searchable-field-display", usesInheritance: true, ngImport: i0, template: `
-  <div class="dbx-default-searchable-field-display">
-    <span class="dbx-chip-label">{{ displayValue.label }}</span>
-    <span class="dbx-chip-sublabel" *ngIf="displayValue.sublabel">({{ displayValue.sublabel }})</span>
-  </div>
+    <div class="dbx-default-searchable-field-display">
+      <span class="dbx-chip-label">{{ displayValue.label }}</span>
+      <span class="dbx-chip-sublabel" *ngIf="displayValue.sublabel">({{ displayValue.sublabel }})</span>
+    </div>
   `, isInline: true, directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxDefaultSearchableFieldDisplayComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'dbx-default-searchable-field-display',
                     template: `
-  <div class="dbx-default-searchable-field-display">
-    <span class="dbx-chip-label">{{ displayValue.label }}</span>
-    <span class="dbx-chip-sublabel" *ngIf="displayValue.sublabel">({{ displayValue.sublabel }})</span>
-  </div>
+    <div class="dbx-default-searchable-field-display">
+      <span class="dbx-chip-label">{{ displayValue.label }}</span>
+      <span class="dbx-chip-sublabel" *ngIf="displayValue.sublabel">({{ displayValue.sublabel }})</span>
+    </div>
   `
                 }]
         }] });
@@ -1952,20 +1868,20 @@ class AbstractDbxSearchableValueFieldDirective extends FieldType$1 {
         this._displayHashMap = new BehaviorSubject(new Map());
         this.inputValue$ = this.inputCtrl.valueChanges.pipe(startWith(this.inputCtrl.value));
         this.inputValueString$ = this.inputValue$.pipe(debounceTime(200), distinctUntilChanged());
-        this.searchResultsState$ = this.inputValueString$.pipe(switchMap((text) => ((text || this.searchOnEmptyText) ? this.search(text !== null && text !== void 0 ? text : '') : of([])).pipe(switchMap((x) => this.loadDisplayValuesForFieldValues(x)), 
+        this.searchResultsState$ = this.inputValueString$.pipe(switchMap((text) => (text || this.searchOnEmptyText ? this.search(text !== null && text !== void 0 ? text : '') : of([])).pipe(switchMap((x) => this.loadDisplayValuesForFieldValues(x)), 
         // Return begin loading to setup the loading state.
-        startWith(beginLoading()))), shareReplay$1(1));
+        startWithBeginLoading())), shareReplay(1));
         this.singleValueSyncSubscription = new SubscriptionObject();
         this.searchContext = new LoadingStateContextInstance({ obs: this.searchResultsState$, showLoadingOnNoValue: false });
-        this.searchResults$ = this.searchResultsState$.pipe(map(x => { var _a; return (_a = x === null || x === void 0 ? void 0 : x.value) !== null && _a !== void 0 ? _a : []; }));
-        this._formControlValue = this.formControl$.pipe(switchMap(control => control.valueChanges.pipe(startWith(control.value), shareReplay$1(1))));
-        this.values$ = this._formControlValue.pipe(map(convertMaybeToArray), shareReplay$1(1));
-        this.displayValuesState$ = this.values$.pipe(distinctUntilChanged(), switchMap((values) => this.loadDisplayValuesForValues(values)), shareReplay$1(1));
-        this.displayValues$ = this.displayValuesState$.pipe(map(x => { var _a; return (_a = x === null || x === void 0 ? void 0 : x.value) !== null && _a !== void 0 ? _a : []; }));
+        this.searchResults$ = this.searchResultsState$.pipe(map((x) => { var _a; return (_a = x === null || x === void 0 ? void 0 : x.value) !== null && _a !== void 0 ? _a : []; }));
+        this._formControlValue = this.formControl$.pipe(switchMap((control) => control.valueChanges.pipe(startWith(control.value), shareReplay(1))));
+        this.values$ = this._formControlValue.pipe(map(convertMaybeToArray), shareReplay(1));
+        this.displayValuesState$ = this.values$.pipe(distinctUntilChanged(), switchMap((values) => this.loadDisplayValuesForValues(values)), shareReplay(1));
+        this.displayValues$ = this.displayValuesState$.pipe(map((x) => { var _a; return (_a = x === null || x === void 0 ? void 0 : x.value) !== null && _a !== void 0 ? _a : []; }));
     }
     get name() {
         var _a, _b;
-        return (_a = this.field.name) !== null && _a !== void 0 ? _a : (camelCase((_b = this.label) !== null && _b !== void 0 ? _b : this.key));
+        return (_a = this.field.name) !== null && _a !== void 0 ? _a : camelCase((_b = this.label) !== null && _b !== void 0 ? _b : this.key);
     }
     get label() {
         var _a;
@@ -1984,7 +1900,7 @@ class AbstractDbxSearchableValueFieldDirective extends FieldType$1 {
     }
     get autocomplete() {
         var _a, _b, _c;
-        return (_c = (_b = (_a = this.field.templateOptions) === null || _a === void 0 ? void 0 : _a.attributes) === null || _b === void 0 ? void 0 : _b['autocomplete']) !== null && _c !== void 0 ? _c : this.key;
+        return ((_c = (_b = (_a = this.field.templateOptions) === null || _a === void 0 ? void 0 : _a.attributes) === null || _b === void 0 ? void 0 : _b['autocomplete']) !== null && _c !== void 0 ? _c : this.key);
     }
     get hashForValue() {
         var _a;
@@ -2024,24 +1940,22 @@ class AbstractDbxSearchableValueFieldDirective extends FieldType$1 {
         return this.loadDisplayValuesForFieldValues(values.map((value) => ({ value })));
     }
     loadDisplayValuesForFieldValues(values) {
-        return this.getDisplayValuesForFieldValues(values).pipe(map((displayValues) => successResult(displayValues)), startWith(beginLoading()), shareReplay$1(1));
+        return this.getDisplayValuesForFieldValues(values).pipe(map((displayValues) => successResult(displayValues)), startWithBeginLoading(), shareReplay(1));
     }
     getDisplayValuesForFieldValues(values) {
         return this._displayHashMap.pipe(mergeMap((displayMap) => {
-            const mappingResult = values
-                .map(x => [x, this.hashForValue(x.value)])
-                .map(([x, hash], i) => [i, hash, x, displayMap.get(hash)]);
-            const hasDisplay = mappingResult.filter(x => Boolean(x[3]));
-            const needsDisplay = mappingResult.filter(x => !x[3]);
+            const mappingResult = values.map((x) => [x, this.hashForValue(x.value)]).map(([x, hash], i) => [i, hash, x, displayMap.get(hash)]);
+            const hasDisplay = mappingResult.filter((x) => Boolean(x[3]));
+            const needsDisplay = mappingResult.filter((x) => !x[3]);
             let obs;
             if (needsDisplay.length > 0) {
                 // Go get the display value.
-                const displayValuesObs = this.displayForValue(needsDisplay.map(x => x[2]));
+                const displayValuesObs = this.displayForValue(needsDisplay.map((x) => x[2]));
                 const defaultDisplay = mergeDbxInjectionComponentConfigs([this.defaultDisplay, this.display]);
                 const anchorForValue = this.useAnchor && this.anchorForValue;
                 obs = displayValuesObs.pipe(first(), map((displayResults) => {
                     // Assign the default component classes to complete configuration.
-                    displayResults.forEach(x => {
+                    displayResults.forEach((x) => {
                         if (!x.display) {
                             x.display = defaultDisplay;
                         }
@@ -2053,19 +1967,19 @@ class AbstractDbxSearchableValueFieldDirective extends FieldType$1 {
                         }
                     });
                     // Create a map to re-join values later.
-                    const displayResultsMapping = displayResults.map(x => [x, this.hashForValue(x.value)]);
+                    const displayResultsMapping = displayResults.map((x) => [x, this.hashForValue(x.value)]);
                     const valueIndexHashMap = new Map(displayResultsMapping.map(([x, hash]) => [hash, x]));
                     // Update displayMap. No need to push an update notification.
                     displayResultsMapping.forEach(([x, hash]) => displayMap.set(hash, x));
                     // Zip values back together.
-                    const newDisplayValues = mappingResult.map(x => { var _a; return (_a = x[3]) !== null && _a !== void 0 ? _a : valueIndexHashMap.get(x[1]); });
+                    const newDisplayValues = mappingResult.map((x) => { var _a; return (_a = x[3]) !== null && _a !== void 0 ? _a : valueIndexHashMap.get(x[1]); });
                     // Return display values.
                     return newDisplayValues;
                 }));
             }
             else {
                 // If all display values are hashed return that.
-                obs = of(hasDisplay.map(x => x[3]));
+                obs = of(hasDisplay.map((x) => x[3]));
             }
             return obs;
         }));
@@ -2114,7 +2028,7 @@ class AbstractDbxSearchableValueFieldDirective extends FieldType$1 {
             return;
         }
         if (text) {
-            const value = (this.convertStringValue) ? this.convertStringValue(text) : text;
+            const value = this.convertStringValue ? this.convertStringValue(text) : text;
             this.addValue(value);
         }
     }
@@ -2144,10 +2058,10 @@ class AbstractDbxSearchableValueFieldDirective extends FieldType$1 {
         let values;
         if (this.hashForValue) {
             const hashToFilter = this.hashForValue(value);
-            values = this.values.filter(x => this.hashForValue(x) !== hashToFilter);
+            values = this.values.filter((x) => this.hashForValue(x) !== hashToFilter);
         }
         else {
-            values = this.values.filter(x => x !== value);
+            values = this.values.filter((x) => x !== value);
         }
         this.setValues(values);
     }
@@ -2163,11 +2077,11 @@ class AbstractDbxSearchableValueFieldDirective extends FieldType$1 {
     }
     // MARK: Internal
     _getValueOnFormControl(valueOnFormControl) {
-        const value = (valueOnFormControl != null) ? [].concat(valueOnFormControl) : []; // Always return an array.
+        const value = valueOnFormControl != null ? [].concat(valueOnFormControl) : []; // Always return an array.
         return value;
     }
     _setValueOnFormControl(values) {
-        const value = (this.multiSelect) ? values : lastValue(values); // pick last value, as the last value added is the newest value.
+        const value = this.multiSelect ? values : lastValue(values); // pick last value, as the last value added is the newest value.
         this.formControl.setValue(value);
         this.formControl.markAsDirty();
         this.formControl.markAsTouched();
@@ -2225,10 +2139,10 @@ class DbxSearchableChipFieldComponent extends AbstractDbxSearchableValueFieldDir
     }
 }
 DbxSearchableChipFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxSearchableChipFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-DbxSearchableChipFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: DbxSearchableChipFieldComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<div class=\"dbx-searchable-field\">\n  <!-- View -->\n  <mat-chip-list [selectable]=\"!readonly\" [required]=\"required\" [disabled]=\"readonly\" #chipList>\n    <mat-chip *ngFor=\"let displayValue of displayValues$ | async\" [removable]=\"true\"\n      (removed)=\"removeWithDisplayValue(displayValue)\">\n      <span class=\"dbx-chip-label\">{{ displayValue.label }}</span>\n      <span class=\"dbx-chip-sublabel\" *ngIf=\"displayValue.sublabel\">{{ displayValue.sublabel }}</span>\n      <mat-icon *ngIf=\"!readonly\" matChipRemove>cancel</mat-icon>\n    </mat-chip>\n    <input #textInput [name]=\"name\" [placeholder]=\"placeholder\" [formControl]=\"inputCtrl\" [matAutocomplete]=\"auto\"\n      autocomplete=\"{{ autocomplete }}\" [matAutocompleteDisabled]=\"readonly\" [matChipInputFor]=\"chipList\" (keydown)=\"tabPressedOnInput($event)\"\n      [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\" (matChipInputTokenEnd)=\"addChip($event)\" (blur)=\"onBlur()\">\n  </mat-chip-list>\n  <div class=\"searchable-field-form-loading\">\n    <dbx-loading [linear]=\"true\" [context]=\"searchContext\"></dbx-loading>\n  </div>\n</div>\n\n<!-- Autocomplete -->\n<mat-autocomplete class=\"dbx-searchable-text-field-autocomplete\" #auto=\"matAutocomplete\"\n  (optionSelected)=\"selected($event)\">\n  <mat-option *ngFor=\"let displayValue of (searchResults$ | async)\" [value]=\"displayValue\">\n    <dbx-searchable-field-autocomplete-item [displayValue]=\"displayValue\">\n    </dbx-searchable-field-autocomplete-item>\n  </mat-option>\n</mat-autocomplete>\n", components: [{ type: i1$5.MatChipList, selector: "mat-chip-list", inputs: ["errorStateMatcher", "multiple", "compareWith", "value", "required", "placeholder", "disabled", "aria-orientation", "selectable", "tabIndex"], outputs: ["change", "valueChange"], exportAs: ["matChipList"] }, { type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i1$1.DbxLoadingComponent, selector: "dbx-loading", inputs: ["show", "text", "mode", "color", "diameter", "linear", "context", "loading", "error"] }, { type: i4$3.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { type: i6.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { type: DbxSearchableFieldAutocompleteItemComponent, selector: "dbx-searchable-field-autocomplete-item", inputs: ["displayValue"] }], directives: [{ type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$5.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disableRipple", "tabIndex", "selected", "value", "selectable", "disabled", "removable"], outputs: ["selectionChange", "destroyed", "removed"], exportAs: ["matChip"] }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$5.MatChipRemove, selector: "[matChipRemove]" }, { type: i4$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i4$3.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { type: i1$5.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { type: i4$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], pipes: { "async": i5.AsyncPipe } });
+DbxSearchableChipFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: DbxSearchableChipFieldComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<div class=\"dbx-searchable-field\">\n  <!-- View -->\n  <mat-chip-list [selectable]=\"!readonly\" [required]=\"required\" [disabled]=\"readonly\" #chipList>\n    <mat-chip *ngFor=\"let displayValue of displayValues$ | async\" [removable]=\"true\" (removed)=\"removeWithDisplayValue(displayValue)\">\n      <span class=\"dbx-chip-label\">{{ displayValue.label }}</span>\n      <span class=\"dbx-chip-sublabel\" *ngIf=\"displayValue.sublabel\">{{ displayValue.sublabel }}</span>\n      <mat-icon *ngIf=\"!readonly\" matChipRemove>cancel</mat-icon>\n    </mat-chip>\n    <input #textInput [name]=\"name\" [placeholder]=\"placeholder\" [formControl]=\"inputCtrl\" [matAutocomplete]=\"auto\" autocomplete=\"{{ autocomplete }}\" [matAutocompleteDisabled]=\"readonly\" [matChipInputFor]=\"chipList\" (keydown)=\"tabPressedOnInput($event)\" [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\" (matChipInputTokenEnd)=\"addChip($event)\" (blur)=\"onBlur()\" />\n  </mat-chip-list>\n  <div class=\"searchable-field-form-loading\">\n    <dbx-loading [linear]=\"true\" [context]=\"searchContext\"></dbx-loading>\n  </div>\n</div>\n\n<!-- Autocomplete -->\n<mat-autocomplete class=\"dbx-searchable-text-field-autocomplete\" #auto=\"matAutocomplete\" (optionSelected)=\"selected($event)\">\n  <mat-option *ngFor=\"let displayValue of searchResults$ | async\" [value]=\"displayValue\">\n    <dbx-searchable-field-autocomplete-item [displayValue]=\"displayValue\"></dbx-searchable-field-autocomplete-item>\n  </mat-option>\n</mat-autocomplete>\n", components: [{ type: i1$5.MatChipList, selector: "mat-chip-list", inputs: ["errorStateMatcher", "multiple", "compareWith", "value", "required", "placeholder", "disabled", "aria-orientation", "selectable", "tabIndex"], outputs: ["change", "valueChange"], exportAs: ["matChipList"] }, { type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i1$1.DbxLoadingComponent, selector: "dbx-loading", inputs: ["show", "text", "mode", "color", "diameter", "linear", "context", "loading", "error"] }, { type: i4$3.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { type: i6.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { type: DbxSearchableFieldAutocompleteItemComponent, selector: "dbx-searchable-field-autocomplete-item", inputs: ["displayValue"] }], directives: [{ type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$5.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disableRipple", "tabIndex", "selected", "value", "selectable", "disabled", "removable"], outputs: ["selectionChange", "destroyed", "removed"], exportAs: ["matChip"] }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$5.MatChipRemove, selector: "[matChipRemove]" }, { type: i4$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i4$3.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { type: i1$5.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { type: i4$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], pipes: { "async": i5.AsyncPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxSearchableChipFieldComponent, decorators: [{
             type: Component,
-            args: [{ template: "<div class=\"dbx-searchable-field\">\n  <!-- View -->\n  <mat-chip-list [selectable]=\"!readonly\" [required]=\"required\" [disabled]=\"readonly\" #chipList>\n    <mat-chip *ngFor=\"let displayValue of displayValues$ | async\" [removable]=\"true\"\n      (removed)=\"removeWithDisplayValue(displayValue)\">\n      <span class=\"dbx-chip-label\">{{ displayValue.label }}</span>\n      <span class=\"dbx-chip-sublabel\" *ngIf=\"displayValue.sublabel\">{{ displayValue.sublabel }}</span>\n      <mat-icon *ngIf=\"!readonly\" matChipRemove>cancel</mat-icon>\n    </mat-chip>\n    <input #textInput [name]=\"name\" [placeholder]=\"placeholder\" [formControl]=\"inputCtrl\" [matAutocomplete]=\"auto\"\n      autocomplete=\"{{ autocomplete }}\" [matAutocompleteDisabled]=\"readonly\" [matChipInputFor]=\"chipList\" (keydown)=\"tabPressedOnInput($event)\"\n      [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\" (matChipInputTokenEnd)=\"addChip($event)\" (blur)=\"onBlur()\">\n  </mat-chip-list>\n  <div class=\"searchable-field-form-loading\">\n    <dbx-loading [linear]=\"true\" [context]=\"searchContext\"></dbx-loading>\n  </div>\n</div>\n\n<!-- Autocomplete -->\n<mat-autocomplete class=\"dbx-searchable-text-field-autocomplete\" #auto=\"matAutocomplete\"\n  (optionSelected)=\"selected($event)\">\n  <mat-option *ngFor=\"let displayValue of (searchResults$ | async)\" [value]=\"displayValue\">\n    <dbx-searchable-field-autocomplete-item [displayValue]=\"displayValue\">\n    </dbx-searchable-field-autocomplete-item>\n  </mat-option>\n</mat-autocomplete>\n" }]
+            args: [{ template: "<div class=\"dbx-searchable-field\">\n  <!-- View -->\n  <mat-chip-list [selectable]=\"!readonly\" [required]=\"required\" [disabled]=\"readonly\" #chipList>\n    <mat-chip *ngFor=\"let displayValue of displayValues$ | async\" [removable]=\"true\" (removed)=\"removeWithDisplayValue(displayValue)\">\n      <span class=\"dbx-chip-label\">{{ displayValue.label }}</span>\n      <span class=\"dbx-chip-sublabel\" *ngIf=\"displayValue.sublabel\">{{ displayValue.sublabel }}</span>\n      <mat-icon *ngIf=\"!readonly\" matChipRemove>cancel</mat-icon>\n    </mat-chip>\n    <input #textInput [name]=\"name\" [placeholder]=\"placeholder\" [formControl]=\"inputCtrl\" [matAutocomplete]=\"auto\" autocomplete=\"{{ autocomplete }}\" [matAutocompleteDisabled]=\"readonly\" [matChipInputFor]=\"chipList\" (keydown)=\"tabPressedOnInput($event)\" [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\" (matChipInputTokenEnd)=\"addChip($event)\" (blur)=\"onBlur()\" />\n  </mat-chip-list>\n  <div class=\"searchable-field-form-loading\">\n    <dbx-loading [linear]=\"true\" [context]=\"searchContext\"></dbx-loading>\n  </div>\n</div>\n\n<!-- Autocomplete -->\n<mat-autocomplete class=\"dbx-searchable-text-field-autocomplete\" #auto=\"matAutocomplete\" (optionSelected)=\"selected($event)\">\n  <mat-option *ngFor=\"let displayValue of searchResults$ | async\" [value]=\"displayValue\">\n    <dbx-searchable-field-autocomplete-item [displayValue]=\"displayValue\"></dbx-searchable-field-autocomplete-item>\n  </mat-option>\n</mat-autocomplete>\n" }]
         }] });
 
 /**
@@ -2243,9 +2157,10 @@ function makeMetaFilterSearchableFieldValueDisplayFn({ loadMetaForValues, makeDi
         let allValues;
         if (needLoading.length > 0) {
             const loadingResult = loadMetaForValues(needLoading);
-            allValues = loadingResult.pipe(map$1((result) => {
+            allValues = loadingResult.pipe(map((result) => {
                 const resultMap = arrayToMap(result, (x) => x.value);
-                const mergedWithLoad = needLoading.map((x) => {
+                const mergedWithLoad = needLoading
+                    .map((x) => {
                     var _a;
                     const id = x.value;
                     const loadedItem = resultMap.get(id);
@@ -2253,9 +2168,10 @@ function makeMetaFilterSearchableFieldValueDisplayFn({ loadMetaForValues, makeDi
                     const meta = loadedItem === null || loadedItem === void 0 ? void 0 : loadedItem.meta;
                     return Object.assign(Object.assign({}, x), { anchor,
                         meta });
-                }).filter(x => !x.meta);
+                })
+                    .filter((x) => !x.meta);
                 return mergedWithLoad;
-            }), map$1((result) => [...loaded, ...result]));
+            }), map((result) => [...loaded, ...result]));
         }
         else {
             allValues = of(loaded);
@@ -2286,9 +2202,9 @@ function searchableTextField(config) {
 class DbxSearchableTextFieldComponent extends AbstractDbxSearchableValueFieldDirective {
     constructor() {
         super(...arguments);
-        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.selectedDisplayValue$ = this.displayValues$.pipe(map((x) => x[0]), shareReplay(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), tapDetectChanges(this.cdRef));
         this.multiSelect = false;
         this._clearInputSub = new SubscriptionObject();
     }
@@ -2312,24 +2228,20 @@ class DbxSearchableTextFieldComponent extends AbstractDbxSearchableValueFieldDir
         this._clearInputSub.destroy();
     }
     selected(event) {
-        const e = event;
-        this.addWithDisplayValue(e.option.value);
+        this.addWithDisplayValue(event.option.value);
     }
 }
 DbxSearchableTextFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxSearchableTextFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-DbxSearchableTextFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: DbxSearchableTextFieldComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<div class=\"dbx-searchable-text-field\"\n  [ngClass]=\"{ 'dbx-searchable-text-field-has-value': (hasValue$ | async), 'dbx-searchable-text-field-show-value': showSelectedValue }\">\n  <!-- Result View -->\n  <div class=\"dbx-searchable-text-field-value mat-option mat-option-text\" *ngIf=\"showSelectedDisplayValue$ | async\">\n    <dbx-searchable-field-autocomplete-item [displayValue]=\"(selectedDisplayValue$ | async)!\">\n    </dbx-searchable-field-autocomplete-item>\n  </div>\n  <div class=\"dbx-searchable-text-field-input\">\n    <div class=\"dbx-label\">Search</div>\n    <!-- View -->\n    <input type=\"search\" [name]=\"name\" matInput #textInput [placeholder]=\"placeholder\" [formControl]=\"inputCtrl\"\n      [matAutocomplete]=\"auto\" [matAutocompleteDisabled]=\"readonly\" autocomplete=\"{{ autocomplete }}\">\n    <div class=\"searchable-field-form-loading\">\n      <dbx-loading [linear]=\"true\" [context]=\"searchContext\"></dbx-loading>\n    </div>\n  </div>\n</div>\n\n<!-- Autocomplete -->\n<mat-autocomplete class=\"dbx-searchable-text-field-autocomplete\" #auto (optionSelected)=\"selected($event)\">\n  <mat-option *ngFor=\"let displayValue of (searchResults$ | async)\" [value]=\"displayValue\">\n    <dbx-searchable-field-autocomplete-item [displayValue]=\"displayValue\">\n    </dbx-searchable-field-autocomplete-item>\n  </mat-option>\n  <!-- Add/Pick String Value -->\n  <mat-option *ngIf=\"allowStringValues && (inputValue$ | async)\" [value]=\"{ value: (inputValue$ | async) }\">\n    <p class=\"dbx-clear-hint text-center\">\"{{ inputValue$ | async }}\"</p>\n  </mat-option>\n  <!-- Show clear value -->\n  <mat-option *ngIf=\"showClearValue && (hasValue$ | async)\" value=\"\">\n    <p class=\"dbx-clear-hint text-center\">Clear</p>\n  </mat-option>\n</mat-autocomplete>\n", components: [{ type: DbxSearchableFieldAutocompleteItemComponent, selector: "dbx-searchable-field-autocomplete-item", inputs: ["displayValue"] }, { type: i1$1.DbxLoadingComponent, selector: "dbx-loading", inputs: ["show", "text", "mode", "color", "diameter", "linear", "context", "loading", "error"] }, { type: i4$3.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { type: i6.MatOption, selector: "mat-option", exportAs: ["matOption"] }], directives: [{ type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i4$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i4$3.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { type: i4$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "async": i5.AsyncPipe } });
+DbxSearchableTextFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: DbxSearchableTextFieldComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<div class=\"dbx-searchable-text-field\" [ngClass]=\"{ 'dbx-searchable-text-field-has-value': (hasValue$ | async), 'dbx-searchable-text-field-show-value': showSelectedValue }\">\n  <!-- Result View -->\n  <div class=\"dbx-searchable-text-field-value mat-option mat-option-text\" *ngIf=\"showSelectedDisplayValue$ | async\">\n    <dbx-searchable-field-autocomplete-item [displayValue]=\"(selectedDisplayValue$ | async)!\"></dbx-searchable-field-autocomplete-item>\n  </div>\n  <div class=\"dbx-searchable-text-field-input\">\n    <div class=\"dbx-label\">Search</div>\n    <!-- View -->\n    <input type=\"search\" [name]=\"name\" matInput #textInput [placeholder]=\"placeholder\" [formControl]=\"inputCtrl\" [matAutocomplete]=\"auto\" [matAutocompleteDisabled]=\"readonly\" autocomplete=\"{{ autocomplete }}\" />\n    <div class=\"searchable-field-form-loading\">\n      <dbx-loading [linear]=\"true\" [context]=\"searchContext\"></dbx-loading>\n    </div>\n  </div>\n</div>\n\n<!-- Autocomplete -->\n<mat-autocomplete class=\"dbx-searchable-text-field-autocomplete\" #auto (optionSelected)=\"selected($event)\">\n  <mat-option *ngFor=\"let displayValue of searchResults$ | async\" [value]=\"displayValue\">\n    <dbx-searchable-field-autocomplete-item [displayValue]=\"displayValue\"></dbx-searchable-field-autocomplete-item>\n  </mat-option>\n  <!-- Add/Pick String Value -->\n  <mat-option *ngIf=\"allowStringValues && (inputValue$ | async)\" [value]=\"{ value: (inputValue$ | async) }\">\n    <p class=\"dbx-clear-hint text-center\">\"{{ inputValue$ | async }}\"</p>\n  </mat-option>\n  <!-- Show clear value -->\n  <mat-option *ngIf=\"showClearValue && (hasValue$ | async)\" value=\"\">\n    <p class=\"dbx-clear-hint text-center\">Clear</p>\n  </mat-option>\n</mat-autocomplete>\n", components: [{ type: DbxSearchableFieldAutocompleteItemComponent, selector: "dbx-searchable-field-autocomplete-item", inputs: ["displayValue"] }, { type: i1$1.DbxLoadingComponent, selector: "dbx-loading", inputs: ["show", "text", "mode", "color", "diameter", "linear", "context", "loading", "error"] }, { type: i4$3.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { type: i6.MatOption, selector: "mat-option", exportAs: ["matOption"] }], directives: [{ type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i4$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i4$3.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { type: i4$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "async": i5.AsyncPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxSearchableTextFieldComponent, decorators: [{
             type: Component,
-            args: [{ template: "<div class=\"dbx-searchable-text-field\"\n  [ngClass]=\"{ 'dbx-searchable-text-field-has-value': (hasValue$ | async), 'dbx-searchable-text-field-show-value': showSelectedValue }\">\n  <!-- Result View -->\n  <div class=\"dbx-searchable-text-field-value mat-option mat-option-text\" *ngIf=\"showSelectedDisplayValue$ | async\">\n    <dbx-searchable-field-autocomplete-item [displayValue]=\"(selectedDisplayValue$ | async)!\">\n    </dbx-searchable-field-autocomplete-item>\n  </div>\n  <div class=\"dbx-searchable-text-field-input\">\n    <div class=\"dbx-label\">Search</div>\n    <!-- View -->\n    <input type=\"search\" [name]=\"name\" matInput #textInput [placeholder]=\"placeholder\" [formControl]=\"inputCtrl\"\n      [matAutocomplete]=\"auto\" [matAutocompleteDisabled]=\"readonly\" autocomplete=\"{{ autocomplete }}\">\n    <div class=\"searchable-field-form-loading\">\n      <dbx-loading [linear]=\"true\" [context]=\"searchContext\"></dbx-loading>\n    </div>\n  </div>\n</div>\n\n<!-- Autocomplete -->\n<mat-autocomplete class=\"dbx-searchable-text-field-autocomplete\" #auto (optionSelected)=\"selected($event)\">\n  <mat-option *ngFor=\"let displayValue of (searchResults$ | async)\" [value]=\"displayValue\">\n    <dbx-searchable-field-autocomplete-item [displayValue]=\"displayValue\">\n    </dbx-searchable-field-autocomplete-item>\n  </mat-option>\n  <!-- Add/Pick String Value -->\n  <mat-option *ngIf=\"allowStringValues && (inputValue$ | async)\" [value]=\"{ value: (inputValue$ | async) }\">\n    <p class=\"dbx-clear-hint text-center\">\"{{ inputValue$ | async }}\"</p>\n  </mat-option>\n  <!-- Show clear value -->\n  <mat-option *ngIf=\"showClearValue && (hasValue$ | async)\" value=\"\">\n    <p class=\"dbx-clear-hint text-center\">Clear</p>\n  </mat-option>\n</mat-autocomplete>\n" }]
+            args: [{ template: "<div class=\"dbx-searchable-text-field\" [ngClass]=\"{ 'dbx-searchable-text-field-has-value': (hasValue$ | async), 'dbx-searchable-text-field-show-value': showSelectedValue }\">\n  <!-- Result View -->\n  <div class=\"dbx-searchable-text-field-value mat-option mat-option-text\" *ngIf=\"showSelectedDisplayValue$ | async\">\n    <dbx-searchable-field-autocomplete-item [displayValue]=\"(selectedDisplayValue$ | async)!\"></dbx-searchable-field-autocomplete-item>\n  </div>\n  <div class=\"dbx-searchable-text-field-input\">\n    <div class=\"dbx-label\">Search</div>\n    <!-- View -->\n    <input type=\"search\" [name]=\"name\" matInput #textInput [placeholder]=\"placeholder\" [formControl]=\"inputCtrl\" [matAutocomplete]=\"auto\" [matAutocompleteDisabled]=\"readonly\" autocomplete=\"{{ autocomplete }}\" />\n    <div class=\"searchable-field-form-loading\">\n      <dbx-loading [linear]=\"true\" [context]=\"searchContext\"></dbx-loading>\n    </div>\n  </div>\n</div>\n\n<!-- Autocomplete -->\n<mat-autocomplete class=\"dbx-searchable-text-field-autocomplete\" #auto (optionSelected)=\"selected($event)\">\n  <mat-option *ngFor=\"let displayValue of searchResults$ | async\" [value]=\"displayValue\">\n    <dbx-searchable-field-autocomplete-item [displayValue]=\"displayValue\"></dbx-searchable-field-autocomplete-item>\n  </mat-option>\n  <!-- Add/Pick String Value -->\n  <mat-option *ngIf=\"allowStringValues && (inputValue$ | async)\" [value]=\"{ value: (inputValue$ | async) }\">\n    <p class=\"dbx-clear-hint text-center\">\"{{ inputValue$ | async }}\"</p>\n  </mat-option>\n  <!-- Show clear value -->\n  <mat-option *ngIf=\"showClearValue && (hasValue$ | async)\" value=\"\">\n    <p class=\"dbx-clear-hint text-center\">Clear</p>\n  </mat-option>\n</mat-autocomplete>\n" }]
         }] });
 
 class DbxFormFormlySearchableFieldModule {
 }
 DbxFormFormlySearchableFieldModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxFormFormlySearchableFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-DbxFormFormlySearchableFieldModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxFormFormlySearchableFieldModule, declarations: [DbxSearchableChipFieldComponent,
-        DbxSearchableTextFieldComponent,
-        DbxSearchableFieldAutocompleteItemComponent,
-        DbxDefaultSearchableFieldDisplayComponent], imports: [CommonModule,
+DbxFormFormlySearchableFieldModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxFormFormlySearchableFieldModule, declarations: [DbxSearchableChipFieldComponent, DbxSearchableTextFieldComponent, DbxSearchableFieldAutocompleteItemComponent, DbxDefaultSearchableFieldDisplayComponent], imports: [CommonModule,
         DbxTextModule,
         DbxLoadingModule,
         DbxButtonModule,
@@ -2344,8 +2256,7 @@ DbxFormFormlySearchableFieldModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion
         DbxRouterAnchorModule,
         MatChipsModule,
         MatIconModule,
-        DbxInjectionComponentModule, i1$4.FormlyModule], exports: [DbxSearchableChipFieldComponent,
-        DbxSearchableTextFieldComponent] });
+        DbxInjectionComponentModule, i1$4.FormlyModule], exports: [DbxSearchableChipFieldComponent, DbxSearchableTextFieldComponent] });
 DbxFormFormlySearchableFieldModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxFormFormlySearchableFieldModule, imports: [[
             CommonModule,
             DbxTextModule,
@@ -2366,7 +2277,7 @@ DbxFormFormlySearchableFieldModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion
             FormlyModule.forChild({
                 types: [
                     { name: 'searchablechipfield', component: DbxSearchableChipFieldComponent, wrappers: ['form-field'] },
-                    { name: 'searchabletextfield', component: DbxSearchableTextFieldComponent, wrappers: ['form-field'] },
+                    { name: 'searchabletextfield', component: DbxSearchableTextFieldComponent, wrappers: ['form-field'] }
                 ]
             })
         ]] });
@@ -2393,50 +2304,33 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImpor
                         FormlyModule.forChild({
                             types: [
                                 { name: 'searchablechipfield', component: DbxSearchableChipFieldComponent, wrappers: ['form-field'] },
-                                { name: 'searchabletextfield', component: DbxSearchableTextFieldComponent, wrappers: ['form-field'] },
+                                { name: 'searchabletextfield', component: DbxSearchableTextFieldComponent, wrappers: ['form-field'] }
                             ]
                         })
                     ],
-                    declarations: [
-                        DbxSearchableChipFieldComponent,
-                        DbxSearchableTextFieldComponent,
-                        DbxSearchableFieldAutocompleteItemComponent,
-                        DbxDefaultSearchableFieldDisplayComponent
-                    ],
-                    exports: [
-                        DbxSearchableChipFieldComponent,
-                        DbxSearchableTextFieldComponent
-                    ]
+                    declarations: [DbxSearchableChipFieldComponent, DbxSearchableTextFieldComponent, DbxSearchableFieldAutocompleteItemComponent, DbxDefaultSearchableFieldDisplayComponent],
+                    exports: [DbxSearchableChipFieldComponent, DbxSearchableTextFieldComponent]
                 }]
         }] });
 
 function chipTextField(config) {
-    const convertStringValue = (config.caseSensitive) ? ((x) => x) : ((x) => x === null || x === void 0 ? void 0 : x.toLowerCase());
+    const convertStringValue = config.caseSensitive ? (x) => x : (x) => x === null || x === void 0 ? void 0 : x.toLowerCase();
     return formlyField(Object.assign(Object.assign({ type: 'searchablechipfield', allowStringValues: true, convertStringValue }, config), { displayForValue: (values) => {
-            return of(values.map(x => (Object.assign(Object.assign({}, x), { label: x.value }))));
+            return of(values.map((x) => (Object.assign(Object.assign({}, x), { label: x.value }))));
         } }));
 }
 
 class DbxFormFormlySelectionModule {
 }
 DbxFormFormlySelectionModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxFormFormlySelectionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-DbxFormFormlySelectionModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxFormFormlySelectionModule, imports: [CommonModule], exports: [DbxFormFormlyPickableFieldModule,
-        DbxFormFormlySearchableFieldModule] });
-DbxFormFormlySelectionModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxFormFormlySelectionModule, imports: [[
-            CommonModule
-        ], DbxFormFormlyPickableFieldModule,
-        DbxFormFormlySearchableFieldModule] });
+DbxFormFormlySelectionModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxFormFormlySelectionModule, imports: [CommonModule], exports: [DbxFormFormlyPickableFieldModule, DbxFormFormlySearchableFieldModule] });
+DbxFormFormlySelectionModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxFormFormlySelectionModule, imports: [[CommonModule], DbxFormFormlyPickableFieldModule, DbxFormFormlySearchableFieldModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxFormFormlySelectionModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [
-                        CommonModule
-                    ],
+                    imports: [CommonModule],
                     declarations: [],
-                    exports: [
-                        DbxFormFormlyPickableFieldModule,
-                        DbxFormFormlySearchableFieldModule
-                    ]
+                    exports: [DbxFormFormlyPickableFieldModule, DbxFormFormlySearchableFieldModule]
                 }]
         }] });
 
@@ -2469,7 +2363,9 @@ class DbxTextEditorFieldComponent extends FieldType$1 {
     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$1(_ => this.editor.view.hasFocus())).subscribe(() => {
+        this._sub.subscription = this.editor.valueChanges
+            .pipe(debounceTime(100), filter(() => this.editor.view.hasFocus()))
+            .subscribe(() => {
             this.formControl.updateValueAndValidity();
             this.formControl.markAsDirty();
         });
@@ -2541,9 +2437,7 @@ DbxFormFormlyTextEditorFieldModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion
             MatFormFieldModule,
             MatInputModule,
             FormlyModule.forChild({
-                types: [
-                    { name: 'texteditor', component: DbxTextEditorFieldComponent }
-                ]
+                types: [{ name: 'texteditor', component: DbxTextEditorFieldComponent }]
             })
         ]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxFormFormlyTextEditorFieldModule, decorators: [{
@@ -2558,14 +2452,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImpor
                         MatFormFieldModule,
                         MatInputModule,
                         FormlyModule.forChild({
-                            types: [
-                                { name: 'texteditor', component: DbxTextEditorFieldComponent }
-                            ]
+                            types: [{ name: 'texteditor', component: DbxTextEditorFieldComponent }]
                         })
                     ],
-                    declarations: [
-                        DbxTextEditorFieldComponent
-                    ],
+                    declarations: [DbxTextEditorFieldComponent],
                     exports: []
                 }]
         }] });
@@ -2613,7 +2503,7 @@ class DbxFormRepeatArrayTypeComponent extends FieldArrayType {
             return true;
         }
         else {
-            return (this.count < max);
+            return this.count < max;
         }
     }
     /**
@@ -2653,17 +2543,20 @@ DbxFormRepeatArrayTypeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion:
       <dbx-subsection [header]="label">
         <!-- Fields -->
         <div class="dbx-form-repeat-array-fields" cdkDropList (cdkDropListDropped)="drop($event)">
-            <div class="dbx-form-repeat-array-field" cdkDrag cdkDragLockAxis="y" *ngFor="let field of field.fieldGroup; let i = index; let last = last;">
-              <div class="example-custom-placeholder" *cdkDragPlaceholder></div>
-              <dbx-bar>
-                <button cdkDragHandle mat-flat-button><mat-icon>drag_handle</mat-icon></button>
-                <dbx-button-spacer></dbx-button-spacer>
-                <h4><span class="repeat-array-number">{{ i + 1 }}</span><span>{{ labelForItem(field) }}</span></h4>
-                <span class="dbx-spacer"></span>
-                <button mat-flat-button color="warn" (click)="remove(i)">{{ removeText }}</button>
-              </dbx-bar>
-              <formly-field class="dbx-form-repeat-array-field-content" [field]="field"></formly-field>
-            </div>
+          <div class="dbx-form-repeat-array-field" cdkDrag cdkDragLockAxis="y" *ngFor="let field of field.fieldGroup; let i = index; let last = last">
+            <div class="example-custom-placeholder" *cdkDragPlaceholder></div>
+            <dbx-bar>
+              <button cdkDragHandle mat-flat-button><mat-icon>drag_handle</mat-icon></button>
+              <dbx-button-spacer></dbx-button-spacer>
+              <h4>
+                <span class="repeat-array-number">{{ i + 1 }}</span>
+                <span>{{ labelForItem(field) }}</span>
+              </h4>
+              <span class="dbx-spacer"></span>
+              <button mat-flat-button color="warn" (click)="remove(i)">{{ removeText }}</button>
+            </dbx-bar>
+            <formly-field class="dbx-form-repeat-array-field-content" [field]="field"></formly-field>
+          </div>
         </div>
         <!-- Add Button -->
         <div class="dbx-form-repeat-array-footer">
@@ -2671,7 +2564,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$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"] }] });
+  `, 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,[dbxBar]", inputs: ["color"] }, { type: i5$1.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { type: i1$1.DbxButtonSpacerDirective, selector: "dbx-button-spacer,[dbxButtonSpacer]" }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxFormRepeatArrayTypeComponent, decorators: [{
             type: Component,
             args: [{
@@ -2680,17 +2573,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImpor
       <dbx-subsection [header]="label">
         <!-- Fields -->
         <div class="dbx-form-repeat-array-fields" cdkDropList (cdkDropListDropped)="drop($event)">
-            <div class="dbx-form-repeat-array-field" cdkDrag cdkDragLockAxis="y" *ngFor="let field of field.fieldGroup; let i = index; let last = last;">
-              <div class="example-custom-placeholder" *cdkDragPlaceholder></div>
-              <dbx-bar>
-                <button cdkDragHandle mat-flat-button><mat-icon>drag_handle</mat-icon></button>
-                <dbx-button-spacer></dbx-button-spacer>
-                <h4><span class="repeat-array-number">{{ i + 1 }}</span><span>{{ labelForItem(field) }}</span></h4>
-                <span class="dbx-spacer"></span>
-                <button mat-flat-button color="warn" (click)="remove(i)">{{ removeText }}</button>
-              </dbx-bar>
-              <formly-field class="dbx-form-repeat-array-field-content" [field]="field"></formly-field>
-            </div>
+          <div class="dbx-form-repeat-array-field" cdkDrag cdkDragLockAxis="y" *ngFor="let field of field.fieldGroup; let i = index; let last = last">
+            <div class="example-custom-placeholder" *cdkDragPlaceholder></div>
+            <dbx-bar>
+              <button cdkDragHandle mat-flat-button><mat-icon>drag_handle</mat-icon></button>
+              <dbx-button-spacer></dbx-button-spacer>
+              <h4>
+                <span class="repeat-array-number">{{ i + 1 }}</span>
+                <span>{{ labelForItem(field) }}</span>
+              </h4>
+              <span class="dbx-spacer"></span>
+              <button mat-flat-button color="warn" (click)="remove(i)">{{ removeText }}</button>
+            </dbx-bar>
+            <formly-field class="dbx-form-repeat-array-field-content" [field]="field"></formly-field>
+          </div>
         </div>
         <!-- Add Button -->
         <div class="dbx-form-repeat-array-footer">
@@ -2727,9 +2623,7 @@ DbxFormFormlyArrayFieldModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12
             DbxBarLayoutModule,
             DbxButtonModule,
             FormlyModule.forChild({
-                types: [
-                    { name: 'repeatarray', component: DbxFormRepeatArrayTypeComponent }
-                ]
+                types: [{ name: 'repeatarray', component: DbxFormRepeatArrayTypeComponent }]
             })
         ]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxFormFormlyArrayFieldModule, decorators: [{
@@ -2747,14 +2641,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImpor
                         DbxBarLayoutModule,
                         DbxButtonModule,
                         FormlyModule.forChild({
-                            types: [
-                                { name: 'repeatarray', component: DbxFormRepeatArrayTypeComponent }
-                            ]
+                            types: [{ name: 'repeatarray', component: DbxFormRepeatArrayTypeComponent }]
                         })
                     ],
-                    declarations: [
-                        DbxFormRepeatArrayTypeComponent
-                    ],
+                    declarations: [DbxFormRepeatArrayTypeComponent],
                     exports: []
                 }]
         }] });
@@ -2764,7 +2654,7 @@ function repeatArrayField(config) {
     return formlyField(Object.assign(Object.assign({ key, type: 'repeatarray', repeatArrayField: {
             labelForField,
             addText,
-            removeText,
+            removeText
         } }, templateOptionsForFieldConfig(config, {
         maxLength
     })), { fieldArray: {
@@ -2842,12 +2732,12 @@ 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$1(control => control.valueChanges.pipe(startWith$1(control.value))), distinctUntilChanged$1((a, b) => isSameMinute(a, b)), shareReplay(1));
+        this.value$ = this.formControl$.pipe(switchMap((control) => control.valueChanges.pipe(startWith(control.value))), distinctUntilChanged((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$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) => {
+        this.displayValue$ = interval(10 * 1000).pipe(startWith(0), map(() => new Date().getMinutes()), distinctUntilChanged(), tap(() => this.cdRef.markForCheck()), switchMap(() => this.value$), shareReplay(1));
+        this.timeString$ = this.value$.pipe(filterMaybe(), map((x) => {
             const timezone = guessCurrentTimezone();
             const timeString = toReadableTimeString(x, timezone);
             return timeString;
@@ -2856,23 +2746,17 @@ class DbxDateTimeFieldComponent extends FieldType$1 {
             validators: []
         });
         this.timeInputCtrl = new FormControl('', {
-            validators: [
-                Validators.pattern(/^(now)$|^([0-9]|(0[0-9])|(1[0-9])|(2[0-3]))(:)?([0-5][0-9])?(\s)?([apAP][Mm])?(\\s)*$/)
-            ]
+            validators: [Validators.pattern(/^(now)$|^([0-9]|(0[0-9])|(1[0-9])|(2[0-3]))(:)?([0-5][0-9])?(\s)?([apAP][Mm])?(\\s)*$/)]
         });
         this._config = new BehaviorSubject(undefined);
-        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.fullDay$ = this.fullDayControl$.pipe(switchMap((control) => control.valueChanges.pipe(startWith(control.value))));
+        this.showTimeInput$ = this.fullDay$.pipe(map((x) => !x && this.timeMode !== DbxDateTimeFieldTimeMode.NONE));
+        this.showAddTime$ = this.showTimeInput$.pipe(map((x) => !x && this.timeMode === DbxDateTimeFieldTimeMode.OPTIONAL), shareReplay(1));
+        this.date$ = this.dateInputCtrl.valueChanges.pipe(startWith(this.dateInputCtrl.value), filterMaybe(), shareReplay(1));
+        this.dateValue$ = merge(this.date$, this.value$.pipe(skipFirstMaybe())).pipe(map((x) => (x ? startOfDay(x) : x)), distinctUntilChanged((a, b) => a != null && b != null && isSameDay(a, b)), shareReplay(1));
+        this.timeInput$ = this._updateTime.pipe(debounceTime(5), map(() => this.timeInputCtrl.value), distinctUntilChanged());
         this.config$ = this._config.pipe(switchMapMaybeDefault(), shareReplay(1));
-        this.rawDateTime$ = combineLatest([
-            this.dateValue$,
-            this.timeInput$.pipe(startWith$1(null)),
-            this.fullDay$
-        ]).pipe(map$1(([date, timeString, fullDay]) => {
+        this.rawDateTime$ = combineLatest([this.dateValue$, this.timeInput$.pipe(startWith(null)), this.fullDay$]).pipe(map(([date, timeString, fullDay]) => {
             var _a;
             let result;
             if (date) {
@@ -2885,22 +2769,19 @@ class DbxDateTimeFieldComponent extends FieldType$1 {
                     }
                 }
                 else if (timeString) {
-                    result = (_a = readableTimeStringToDate(timeString, {
-                        date,
-                        useSystemTimezone: true
-                    })) !== null && _a !== void 0 ? _a : date;
+                    result =
+                        (_a = readableTimeStringToDate(timeString, {
+                            date,
+                            useSystemTimezone: true
+                        })) !== null && _a !== void 0 ? _a : date;
                 }
                 else {
                     result = date;
                 }
             }
             return result;
-        }), distinctUntilChanged$1((a, b) => Boolean(a && b) && isSameMinute(a, b)), shareReplay(1));
-        this.timeOutput$ = combineLatest([
-            this.rawDateTime$,
-            this._offset,
-            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]) => {
+        }), distinctUntilChanged((a, b) => a != null && b != null && 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]) => {
             if (date != null) {
                 const instance = new DateTimeMinuteInstance(Object.assign(Object.assign({ date }, config), { roundDownToMinute: true }));
                 date = instance.limit(date);
@@ -2908,7 +2789,7 @@ class DbxDateTimeFieldComponent extends FieldType$1 {
                 date = addMinutes(date, minutes);
             }
             return date;
-        }), distinctUntilChanged$1((a, b) => Boolean(a && b) && isSameMinute(a, b)), shareReplay(1));
+        }), distinctUntilChanged((a, b) => a != null && b != null && isSameMinute(a, b)), shareReplay(1));
     }
     get dateOnly() {
         return this.timeMode === DbxDateTimeFieldTimeMode.NONE;
@@ -2924,7 +2805,7 @@ class DbxDateTimeFieldComponent extends FieldType$1 {
     }
     get timeMode() {
         var _a;
-        return (this.timeOnly) ? DbxDateTimeFieldTimeMode.REQUIRED : ((_a = this.dateTimeField.timeMode) !== null && _a !== void 0 ? _a : DbxDateTimeFieldTimeMode.REQUIRED);
+        return this.timeOnly ? DbxDateTimeFieldTimeMode.REQUIRED : (_a = this.dateTimeField.timeMode) !== null && _a !== void 0 ? _a : DbxDateTimeFieldTimeMode.REQUIRED;
     }
     get description() {
         var _a;
@@ -3033,11 +2914,12 @@ class DbxDateTimeFieldComponent extends FieldType$1 {
             offset = 5;
         }
         if (direction !== 0) {
-            this._offset.next(this._offset.value + (offset * direction));
+            this._offset.next(this._offset.value + offset * direction);
             this._updateTime.next();
         }
     }
     focusTime() {
+        // do nothing
     }
     focusOutTime() {
         this._updateTime.next();
@@ -3049,16 +2931,16 @@ class DbxDateTimeFieldComponent extends FieldType$1 {
         this.setFullDay(true);
     }
     setFullDay(fullDay) {
-        this.fullDayControl$.pipe(first$1()).subscribe((x) => {
+        this.fullDayControl$.pipe(first()).subscribe((x) => {
             x.setValue(fullDay);
         });
     }
 }
 DbxDateTimeFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxDateTimeFieldComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-DbxDateTimeFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: DbxDateTimeFieldComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<div class=\"dbx-datetime-field\" fxLayout=\"row wrap\" fxLayout.xs=\"column wrap\" fxLayoutAlign=\"space-evenly stretch\">\n  <!-- Date -->\n  <div class=\"dbx-datetime-row\" fxFlex.lt-sm=\"100\" [fxFlex]=\"dateOnly ? '100' : '50'\" *ngIf=\"showDateInput\">\n    <ng-container *ngTemplateOutlet=\"dateInputTemplate\"></ng-container>\n  </div>\n  <!-- Time -->\n  <div class=\"dbx-datetime-row\" fxFlex.lt-sm=\"100\" [fxFlex]=\"showDateInput ? '50' : '100'\">\n    <ng-container *ngIf=\"showTimeInput$ | async\">\n      <ng-container *ngTemplateOutlet=\"timeMenuAndInputTemplate\"></ng-container>\n    </ng-container>\n    <div class=\"add-time-button-wrapper\" *ngIf=\"showAddTime$ | async\">\n      <button mat-button class=\"add-time-button\" ngClass.lt-sm=\"add-time-button-full\" (click)=\"addTime()\">\n        <mat-icon>timer</mat-icon> Add Time\n      </button>\n    </div>\n  </div>\n  <div class=\"dbx-datetime-row dbx-datetime-hint-row\" fxFlex=\"100\">\n    <div class=\"dbx-hint\" [ngSwitch]=\"fullDay$ | async\">\n      <small *ngSwitchCase=\"true\"><b class=\"dbx-ok\">All Day</b> {{ dateValue$ | async | date:'fullDate' }}\n        ({{ dateValue$ | async | dateDistance }})</small>\n      <small *ngSwitchCase=\"false\">\n        <ng-container *ngIf=\"value$ | async\"><b class=\"dbx-ok\">At</b> {{ displayValue$ | async | date:'medium' }}\n          ({{ displayValue$ | async | timeDistance }})</ng-container>\n      </small>\n    </div>\n  </div>\n</div>\n\n<!-- Date Input Template -->\n<ng-template #dateInputTemplate>\n  <button mat-icon-button (click)=\"picker.open()\" [disabled]=\"disabled\">\n    <mat-icon>calendar_today</mat-icon>\n  </button>\n  <mat-form-field class=\"dbx-datetime-row-field\">\n    <mat-label>Date</mat-label>\n    <input #dateInput matInput [formControl]=\"dateInputCtrl\" [matDatepicker]=\"picker\" (dateChange)=\"datePicked($event)\"\n      [value]=\"dateValue$ | async\">\n    <mat-datepicker #picker></mat-datepicker>\n  </mat-form-field>\n</ng-template>\n\n<!-- Time Menu/Input Template -->\n<ng-template #timeMenuAndInputTemplate>\n  <button mat-icon-button [matMenuTriggerFor]=\"timemenu\" aria-label=\"opens the time menu\" [disabled]=\"disabled\">\n    <mat-icon>timer</mat-icon>\n  </button>\n  <mat-menu #timemenu=\"matMenu\">\n    <ng-container *ngIf=\"timeMode === 'optional'\">\n      <button mat-menu-item (click)=\"removeTime()\">\n        <span>Remove Time</span>\n      </button>\n      <mat-divider></mat-divider>\n    </ng-container>\n    <button mat-menu-item (click)=\"setLogicalTime('now')\">\n      <span>Now</span>\n    </button>\n    <button mat-menu-item (click)=\"setTime('12:00AM')\">\n      <span>Midnight</span>\n    </button>\n    <button mat-menu-item (click)=\"setTime('6:00AM')\">\n      <span>6:00AM</span>\n    </button>\n    <button mat-menu-item (click)=\"setTime('8:00AM')\">\n      <span>8:00AM</span>\n    </button>\n    <button mat-menu-item (click)=\"setTime('10:00AM')\">\n      <span>10:00AM</span>\n    </button>\n    <button mat-menu-item (click)=\"setTime('12:00PM')\">\n      <span>Noon</span>\n    </button>\n    <button mat-menu-item (click)=\"setTime('2:00PM')\">\n      <span>2:00PM</span>\n    </button>\n    <button mat-menu-item (click)=\"setTime('5:00PM')\">\n      <span>5:00PM</span>\n    </button>\n  </mat-menu>\n  <mat-form-field class=\"dbx-datetime-row-field\">\n    <mat-label>Time</mat-label>\n    <input #timeInput matInput [formControl]=\"timeInputCtrl\" (focus)=\"focusTime()\" (focusout)=\"focusOutTime()\"\n      (keydown)=\"keydownOnInput($event)\">\n  </mat-form-field>\n</ng-template>\n", components: [{ type: i1$2.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i3$2.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i4$4.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { type: i5$2.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i5$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { type: i4$2.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }], directives: [{ type: i3$1.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i3$1.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$1.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i2$2.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { type: i5.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i5.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i3$2.MatLabel, selector: "mat-label" }, { type: i6$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i4$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i4$4.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { type: i4$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i5$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }], pipes: { "async": i5.AsyncPipe, "date": i5.DatePipe, "dateDistance": i2.DateDistancePipe, "timeDistance": i2.TimeDistancePipe } });
+DbxDateTimeFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: DbxDateTimeFieldComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<div class=\"dbx-datetime-field\" fxLayout=\"row wrap\" fxLayout.xs=\"column wrap\" fxLayoutAlign=\"space-evenly stretch\">\n  <!-- Date -->\n  <div class=\"dbx-datetime-row\" fxFlex.lt-sm=\"100\" [fxFlex]=\"dateOnly ? '100' : '50'\" *ngIf=\"showDateInput\">\n    <ng-container *ngTemplateOutlet=\"dateInputTemplate\"></ng-container>\n  </div>\n  <!-- Time -->\n  <div class=\"dbx-datetime-row\" fxFlex.lt-sm=\"100\" [fxFlex]=\"showDateInput ? '50' : '100'\">\n    <ng-container *ngIf=\"showTimeInput$ | async\">\n      <ng-container *ngTemplateOutlet=\"timeMenuAndInputTemplate\"></ng-container>\n    </ng-container>\n    <div class=\"add-time-button-wrapper\" *ngIf=\"showAddTime$ | async\">\n      <button mat-button class=\"add-time-button\" ngClass.lt-sm=\"add-time-button-full\" (click)=\"addTime()\">\n        <mat-icon>timer</mat-icon>\n        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\">\n        <b class=\"dbx-ok\">All Day</b>\n        {{ dateValue$ | async | date: 'fullDate' }} ({{ dateValue$ | async | dateDistance }})\n      </small>\n      <small *ngSwitchCase=\"false\">\n        <ng-container *ngIf=\"value$ | async\">\n          <b class=\"dbx-ok\">At</b>\n          {{ displayValue$ | async | date: 'medium' }} ({{ displayValue$ | async | timeDistance }})\n        </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)\" [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()\" (keydown)=\"keydownOnInput($event)\" />\n  </mat-form-field>\n</ng-template>\n", components: [{ type: i1$2.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i3$2.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i4$4.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { type: i5$2.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i5$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { type: i4$2.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }], directives: [{ type: i3$1.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i3$1.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$1.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i2$2.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { type: i5.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i5.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i3$2.MatLabel, selector: "mat-label" }, { type: i6$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i4$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i4$4.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { type: i4$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i5$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }], pipes: { "async": i5.AsyncPipe, "date": i5.DatePipe, "dateDistance": i2.DateDistancePipe, "timeDistance": i2.TimeDistancePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxDateTimeFieldComponent, decorators: [{
             type: Component,
-            args: [{ template: "<div class=\"dbx-datetime-field\" fxLayout=\"row wrap\" fxLayout.xs=\"column wrap\" fxLayoutAlign=\"space-evenly stretch\">\n  <!-- Date -->\n  <div class=\"dbx-datetime-row\" fxFlex.lt-sm=\"100\" [fxFlex]=\"dateOnly ? '100' : '50'\" *ngIf=\"showDateInput\">\n    <ng-container *ngTemplateOutlet=\"dateInputTemplate\"></ng-container>\n  </div>\n  <!-- Time -->\n  <div class=\"dbx-datetime-row\" fxFlex.lt-sm=\"100\" [fxFlex]=\"showDateInput ? '50' : '100'\">\n    <ng-container *ngIf=\"showTimeInput$ | async\">\n      <ng-container *ngTemplateOutlet=\"timeMenuAndInputTemplate\"></ng-container>\n    </ng-container>\n    <div class=\"add-time-button-wrapper\" *ngIf=\"showAddTime$ | async\">\n      <button mat-button class=\"add-time-button\" ngClass.lt-sm=\"add-time-button-full\" (click)=\"addTime()\">\n        <mat-icon>timer</mat-icon> Add Time\n      </button>\n    </div>\n  </div>\n  <div class=\"dbx-datetime-row dbx-datetime-hint-row\" fxFlex=\"100\">\n    <div class=\"dbx-hint\" [ngSwitch]=\"fullDay$ | async\">\n      <small *ngSwitchCase=\"true\"><b class=\"dbx-ok\">All Day</b> {{ dateValue$ | async | date:'fullDate' }}\n        ({{ dateValue$ | async | dateDistance }})</small>\n      <small *ngSwitchCase=\"false\">\n        <ng-container *ngIf=\"value$ | async\"><b class=\"dbx-ok\">At</b> {{ displayValue$ | async | date:'medium' }}\n          ({{ displayValue$ | async | timeDistance }})</ng-container>\n      </small>\n    </div>\n  </div>\n</div>\n\n<!-- Date Input Template -->\n<ng-template #dateInputTemplate>\n  <button mat-icon-button (click)=\"picker.open()\" [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" }]
+            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>\n        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\">\n        <b class=\"dbx-ok\">All Day</b>\n        {{ dateValue$ | async | date: 'fullDate' }} ({{ dateValue$ | async | dateDistance }})\n      </small>\n      <small *ngSwitchCase=\"false\">\n        <ng-container *ngIf=\"value$ | async\">\n          <b class=\"dbx-ok\">At</b>\n          {{ displayValue$ | async | date: 'medium' }} ({{ displayValue$ | async | timeDistance }})\n        </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)\" [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()\" (keydown)=\"keydownOnInput($event)\" />\n  </mat-form-field>\n</ng-template>\n" }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; } });
 
 class DbxFormFormlyDateFieldModule {
@@ -3094,9 +2976,7 @@ DbxFormFormlyDateFieldModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.
             MatIconModule,
             FlexLayoutModule,
             FormlyModule.forChild({
-                types: [
-                    { name: 'datetime', component: DbxDateTimeFieldComponent, wrappers: ['style', 'form-field'] }
-                ]
+                types: [{ name: 'datetime', component: DbxDateTimeFieldComponent, wrappers: ['style', 'form-field'] }]
             })
         ], DbxFormFormlyWrapperModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxFormFormlyDateFieldModule, decorators: [{
@@ -3118,17 +2998,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImpor
                         MatIconModule,
                         FlexLayoutModule,
                         FormlyModule.forChild({
-                            types: [
-                                { name: 'datetime', component: DbxDateTimeFieldComponent, wrappers: ['style', 'form-field'] }
-                            ]
+                            types: [{ name: 'datetime', component: DbxDateTimeFieldComponent, wrappers: ['style', 'form-field'] }]
                         })
                     ],
-                    declarations: [
-                        DbxDateTimeFieldComponent
-                    ],
-                    exports: [
-                        DbxFormFormlyWrapperModule
-                    ]
+                    declarations: [DbxDateTimeFieldComponent],
+                    exports: [DbxFormFormlyWrapperModule]
                 }]
         }] });
 
@@ -3145,10 +3019,10 @@ function timeOnlyField(config = {}) {
 function dateTimeField(config = {}) {
     const { key = 'date', timeMode = DbxDateTimeFieldTimeMode.REQUIRED, fullDayFieldName, getConfigObs, timeOnly = false } = config;
     const fieldConfig = formlyField(Object.assign(Object.assign({ key, type: 'datetime', dateTimeField: {
-            timeMode: (timeOnly) ? DbxDateTimeFieldTimeMode.REQUIRED : timeMode,
+            timeMode: timeOnly ? DbxDateTimeFieldTimeMode.REQUIRED : timeMode,
             fullDayFieldName,
             getConfigObs,
-            timeOnly,
+            timeOnly
         } }, templateOptionsForFieldConfig(config)), { styleWrapper: {
             style: 'dbx-datetime-parent-form-field'
         } }));
@@ -3167,7 +3041,7 @@ function staticEnumField({ key, label = '', placeholder = '', description, multi
             multiple,
             selectAllOption: 'Select All',
             options
-        },
+        }
     });
     return fieldConfig;
 }
@@ -3203,10 +3077,10 @@ class DbxPhoneFieldComponent extends FieldType$1 {
     }
 }
 DbxPhoneFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxPhoneFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-DbxPhoneFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: DbxPhoneFieldComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<ngx-mat-intl-tel-input class=\"dbx-form-phone-field\" [required]=\"required\" [preferredCountries]=\"preferredCountries\"\n  [enablePlaceholder]=\"false\" name=\"phone\" [formControl]=\"formControl\">\n</ngx-mat-intl-tel-input>\n", components: [{ type: i1$6.NgxMatIntlTelInputComponent, selector: "ngx-mat-intl-tel-input", inputs: ["preferredCountries", "enablePlaceholder", "inputPlaceholder", "cssClass", "name", "onlyCountries", "errorStateMatcher", "enableSearch", "searchPlaceholder", "describedBy", "format", "placeholder", "required", "disabled"], outputs: ["countryChanged"] }], directives: [{ type: i4$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i4$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
+DbxPhoneFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: DbxPhoneFieldComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<ngx-mat-intl-tel-input class=\"dbx-form-phone-field\" [required]=\"required\" [preferredCountries]=\"preferredCountries\" [enablePlaceholder]=\"false\" name=\"phone\" [formControl]=\"formControl\"></ngx-mat-intl-tel-input>\n", components: [{ type: i1$6.NgxMatIntlTelInputComponent, selector: "ngx-mat-intl-tel-input", inputs: ["preferredCountries", "enablePlaceholder", "inputPlaceholder", "cssClass", "name", "onlyCountries", "errorStateMatcher", "enableSearch", "searchPlaceholder", "describedBy", "format", "placeholder", "required", "disabled"], outputs: ["countryChanged"] }], directives: [{ type: i4$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i4$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxPhoneFieldComponent, decorators: [{
             type: Component,
-            args: [{ template: "<ngx-mat-intl-tel-input class=\"dbx-form-phone-field\" [required]=\"required\" [preferredCountries]=\"preferredCountries\"\n  [enablePlaceholder]=\"false\" name=\"phone\" [formControl]=\"formControl\">\n</ngx-mat-intl-tel-input>\n" }]
+            args: [{ template: "<ngx-mat-intl-tel-input class=\"dbx-form-phone-field\" [required]=\"required\" [preferredCountries]=\"preferredCountries\" [enablePlaceholder]=\"false\" name=\"phone\" [formControl]=\"formControl\"></ngx-mat-intl-tel-input>\n" }]
         }] });
 
 class DbxFormFormlyPhoneFieldModule {
@@ -3236,9 +3110,7 @@ DbxFormFormlyPhoneFieldModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12
             FlexLayoutModule,
             FormlyMatFormFieldModule,
             FormlyModule.forChild({
-                types: [
-                    { name: 'intphone', component: DbxPhoneFieldComponent, wrappers: ['form-field'] }
-                ]
+                types: [{ name: 'intphone', component: DbxPhoneFieldComponent, wrappers: ['form-field'] }]
             })
         ]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxFormFormlyPhoneFieldModule, decorators: [{
@@ -3257,14 +3129,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImpor
                         FlexLayoutModule,
                         FormlyMatFormFieldModule,
                         FormlyModule.forChild({
-                            types: [
-                                { name: 'intphone', component: DbxPhoneFieldComponent, wrappers: ['form-field'] }
-                            ]
+                            types: [{ name: 'intphone', component: DbxPhoneFieldComponent, wrappers: ['form-field'] }]
                         })
                     ],
-                    declarations: [
-                        DbxPhoneFieldComponent
-                    ],
+                    declarations: [DbxPhoneFieldComponent],
                     exports: []
                 }]
         }] });
@@ -3340,9 +3208,11 @@ function flexLayoutWrapper(fieldConfigs, { relative, breakpoint, size: defaultSi
             }
         },
         fieldGroup: fieldConfigs.map((inputConfig) => {
-            const fieldConfig = checkIsFieldFlexLayoutGroupFieldConfig(inputConfig) ? inputConfig : {
-                field: inputConfig
-            };
+            const fieldConfig = checkIsFieldFlexLayoutGroupFieldConfig(inputConfig)
+                ? inputConfig
+                : {
+                    field: inputConfig
+                };
             const { field, size = defaultSize } = fieldConfig;
             const className = `dbx-flex-${size}`;
             return Object.assign(Object.assign({}, field), { className });
@@ -3364,7 +3234,7 @@ function textAreaField(config) {
     return formlyField(Object.assign({ key, type: 'textarea' }, templateOptionsForFieldConfig(config, {
         rows,
         minLength,
-        maxLength,
+        maxLength
     })));
 }
 
@@ -3409,7 +3279,6 @@ function phoneListField(repeatConfig = {}) {
         addText,
         removeText, repeatFieldGroup: repeatFieldGroup !== null && repeatFieldGroup !== void 0 ? repeatFieldGroup : [wrappedPhoneAndLabelField(phoneAndLabel)] }));
 }
-;
 
 const PHONE_LABEL_MAX_LENGTH = 100;
 const ADDRESS_COUNTRY_MAX_LENGTH = 80;
@@ -3502,15 +3371,20 @@ function addressFormlyFields() {
             autocomplete: 'address-line2',
             maxLength: ADDRESS_LINE_MAX_LENGTH
         }),
-        flexLayoutWrapper([{
+        flexLayoutWrapper([
+            {
                 field: cityField({})
-            }, {
+            },
+            {
                 field: stateField({})
-            }, {
+            },
+            {
                 field: zipCodeField({})
-            }, {
+            },
+            {
                 field: countryField({})
-            }], { size: 1, relative: true })
+            }
+        ], { size: 1, relative: true })
     ];
 }
 function addressField({ key = 'address', required = false } = {}) {
@@ -3528,6 +3402,7 @@ function addressField({ key = 'address', required = false } = {}) {
 function addressListField({ key = 'addresses', required = false, maxAddresses = 6 } = {}) {
     return repeatArrayField({
         key,
+        required,
         label: 'Addresses',
         labelForField: 'Address',
         addText: 'Add Address',
@@ -3541,19 +3416,13 @@ class DbxFormFormlyTextFieldModule {
 }
 DbxFormFormlyTextFieldModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxFormFormlyTextFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
 DbxFormFormlyTextFieldModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxFormFormlyTextFieldModule, imports: [FormlyMaterialModule], exports: [DbxFormFormlyWrapperModule] });
-DbxFormFormlyTextFieldModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxFormFormlyTextFieldModule, imports: [[
-            FormlyMaterialModule
-        ], DbxFormFormlyWrapperModule] });
+DbxFormFormlyTextFieldModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxFormFormlyTextFieldModule, imports: [[FormlyMaterialModule], DbxFormFormlyWrapperModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxFormFormlyTextFieldModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [
-                        FormlyMaterialModule
-                    ],
+                    imports: [FormlyMaterialModule],
                     declarations: [],
-                    exports: [
-                        DbxFormFormlyWrapperModule
-                    ]
+                    exports: [DbxFormFormlyWrapperModule]
                 }]
         }] });
 
@@ -3567,70 +3436,28 @@ function hiddenField({ key, required = false }) {
 class DbxFormFormlyValueModule {
 }
 DbxFormFormlyValueModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxFormFormlyValueModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-DbxFormFormlyValueModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxFormFormlyValueModule, imports: [CommonModule], exports: [DbxFormFormlyArrayFieldModule,
-        DbxFormFormlyBooleanFieldModule,
-        DbxFormFormlyDateFieldModule,
-        DbxFormFormlyEnumFieldModule,
-        DbxFormFormlyPhoneFieldModule,
-        DbxFormFormlyTextFieldModule] });
-DbxFormFormlyValueModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxFormFormlyValueModule, imports: [[
-            CommonModule
-        ], DbxFormFormlyArrayFieldModule,
-        DbxFormFormlyBooleanFieldModule,
-        DbxFormFormlyDateFieldModule,
-        DbxFormFormlyEnumFieldModule,
-        DbxFormFormlyPhoneFieldModule,
-        DbxFormFormlyTextFieldModule] });
+DbxFormFormlyValueModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxFormFormlyValueModule, imports: [CommonModule], exports: [DbxFormFormlyArrayFieldModule, DbxFormFormlyBooleanFieldModule, DbxFormFormlyDateFieldModule, DbxFormFormlyEnumFieldModule, DbxFormFormlyPhoneFieldModule, DbxFormFormlyTextFieldModule] });
+DbxFormFormlyValueModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxFormFormlyValueModule, imports: [[CommonModule], DbxFormFormlyArrayFieldModule, DbxFormFormlyBooleanFieldModule, DbxFormFormlyDateFieldModule, DbxFormFormlyEnumFieldModule, DbxFormFormlyPhoneFieldModule, DbxFormFormlyTextFieldModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxFormFormlyValueModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [
-                        CommonModule
-                    ],
+                    imports: [CommonModule],
                     declarations: [],
-                    exports: [
-                        DbxFormFormlyArrayFieldModule,
-                        DbxFormFormlyBooleanFieldModule,
-                        DbxFormFormlyDateFieldModule,
-                        DbxFormFormlyEnumFieldModule,
-                        DbxFormFormlyPhoneFieldModule,
-                        DbxFormFormlyTextFieldModule
-                    ]
+                    exports: [DbxFormFormlyArrayFieldModule, DbxFormFormlyBooleanFieldModule, DbxFormFormlyDateFieldModule, DbxFormFormlyEnumFieldModule, DbxFormFormlyPhoneFieldModule, DbxFormFormlyTextFieldModule]
                 }]
         }] });
 
 class DbxFormFormlyFieldModule {
 }
 DbxFormFormlyFieldModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxFormFormlyFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-DbxFormFormlyFieldModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxFormFormlyFieldModule, imports: [CommonModule], exports: [DbxFormFormlyChecklistItemFieldModule,
-        DbxFormFormlyComponentFieldModule,
-        DbxFormFormlySelectionModule,
-        DbxFormFormlyTextEditorFieldModule,
-        DbxFormFormlyValueModule,
-        DbxFormFormlyWrapperModule] });
-DbxFormFormlyFieldModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxFormFormlyFieldModule, imports: [[
-            CommonModule
-        ], DbxFormFormlyChecklistItemFieldModule,
-        DbxFormFormlyComponentFieldModule,
-        DbxFormFormlySelectionModule,
-        DbxFormFormlyTextEditorFieldModule,
-        DbxFormFormlyValueModule,
-        DbxFormFormlyWrapperModule] });
+DbxFormFormlyFieldModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxFormFormlyFieldModule, imports: [CommonModule], exports: [DbxFormFormlyChecklistItemFieldModule, DbxFormFormlyComponentFieldModule, DbxFormFormlySelectionModule, DbxFormFormlyTextEditorFieldModule, DbxFormFormlyValueModule, DbxFormFormlyWrapperModule] });
+DbxFormFormlyFieldModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxFormFormlyFieldModule, imports: [[CommonModule], DbxFormFormlyChecklistItemFieldModule, DbxFormFormlyComponentFieldModule, DbxFormFormlySelectionModule, DbxFormFormlyTextEditorFieldModule, DbxFormFormlyValueModule, DbxFormFormlyWrapperModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxFormFormlyFieldModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [
-                        CommonModule
-                    ],
+                    imports: [CommonModule],
                     declarations: [],
-                    exports: [
-                        DbxFormFormlyChecklistItemFieldModule,
-                        DbxFormFormlyComponentFieldModule,
-                        DbxFormFormlySelectionModule,
-                        DbxFormFormlyTextEditorFieldModule,
-                        DbxFormFormlyValueModule,
-                        DbxFormFormlyWrapperModule
-                    ]
+                    exports: [DbxFormFormlyChecklistItemFieldModule, DbxFormFormlyComponentFieldModule, DbxFormFormlySelectionModule, DbxFormFormlyTextEditorFieldModule, DbxFormFormlyValueModule, DbxFormFormlyWrapperModule]
                 }]
         }] });
 
@@ -3644,7 +3471,7 @@ const FIELD_VALUES_ARE_EQUAL_VALIDATION_KEY = 'fieldValuesAreEqual';
  * @returns
  */
 function fieldValuesAreEqualValidator(config = {}) {
-    const { keysFilter, valuesFilter: inputValuesFilter, isEqual = ((a, b) => a === b), message = 'Field values are not equal.' } = config;
+    const { keysFilter, valuesFilter: inputValuesFilter, isEqual = (a, b) => a === b, message = 'Field values are not equal.' } = config;
     const valuesFilter = inputValuesFilter !== null && inputValuesFilter !== void 0 ? inputValuesFilter : {
         valueFilter: KeyValueTypleValueFilter.NONE,
         keysFilter
@@ -3664,7 +3491,6 @@ function fieldValuesAreEqualValidator(config = {}) {
     };
 }
 
-;
 /**
  * Configured simple text password field.
  *
@@ -3687,12 +3513,14 @@ function textPasswordWithVerifyFieldGroup(config) {
     var _a, _b, _c, _d, _e;
     const passwordFieldConfig = textPasswordField(config.password);
     const verifyPasswordFieldKey = (_b = (_a = config.verifyPassword) === null || _a === void 0 ? void 0 : _a.key) !== null && _b !== void 0 ? _b : `verify${capitalizeFirstLetter(String(passwordFieldConfig.key))}`;
-    const verifyPasswordField = textVerifyPasswordField(Object.assign(Object.assign(Object.assign({}, config.password), config.verifyPassword), { label: (_d = ((_c = config.verifyPassword) === null || _c === void 0 ? void 0 : _c.label)) !== null && _d !== void 0 ? _d : `Verify ${(_e = passwordFieldConfig.templateOptions) === null || _e === void 0 ? void 0 : _e.label}`, key: verifyPasswordFieldKey }));
+    const verifyPasswordField = textVerifyPasswordField(Object.assign(Object.assign(Object.assign({}, config.password), config.verifyPassword), { label: (_d = (_c = config.verifyPassword) === null || _c === void 0 ? void 0 : _c.label) !== null && _d !== void 0 ? _d : `Verify ${(_e = passwordFieldConfig.templateOptions) === null || _e === void 0 ? void 0 : _e.label}`, key: verifyPasswordFieldKey }));
     const validators = {
-        validation: [{
+        validation: [
+            {
                 errorPath: verifyPasswordFieldKey,
                 expression: fieldValuesAreEqualValidator({ keysFilter: [passwordFieldConfig.key, verifyPasswordField.key], message: 'The passwords do not match.' })
-            }]
+            }
+        ]
     };
     const groupFieldConfig = {
         validators,
@@ -3700,7 +3528,6 @@ function textPasswordWithVerifyFieldGroup(config) {
     };
     return groupFieldConfig;
 }
-;
 /**
  * Template for login field that takes in a username and password.
  *
@@ -3729,11 +3556,8 @@ function usernamePasswordLoginFields({ username, password, verifyPassword }) {
     else {
         usernameField = textField(Object.assign(Object.assign({}, usernameFieldConfig.username), defaultUsernameFieldConfig));
     }
-    const passwordField = (verifyPassword) ? (textPasswordWithVerifyFieldGroup({ password, verifyPassword: (verifyPassword === true) ? undefined : verifyPassword })) : textPasswordField(password);
-    return [
-        usernameField,
-        passwordField
-    ];
+    const passwordField = verifyPassword ? textPasswordWithVerifyFieldGroup({ password, verifyPassword: verifyPassword === true ? undefined : verifyPassword }) : textPasswordField(password);
+    return [usernameField, passwordField];
 }
 
 const FIELD_VALUE_IS_AVAILABLE_VALIDATION_KEY = 'fieldValueIsAvailable';
@@ -3751,7 +3575,7 @@ function fieldValueIsAvailableValidator(config) {
     const pusher = asyncPusherCache({
         throttle
     });
-    return (control) => pusher(control.valueChanges)(control.value).pipe(switchMap$1((x) => checkValueIsAvailable(x)), map((isAvailable) => {
+    return (control) => pusher(control.valueChanges)(control.value).pipe(switchMap((x) => checkValueIsAvailable(x)), map((isAvailable) => {
         if (isAvailable) {
             return null;
         }
@@ -3762,15 +3586,17 @@ function fieldValueIsAvailableValidator(config) {
         }
     }), catchError(() => of({
         [FIELD_VALUE_IS_AVAILABLE_ERROR_VALIDATION_KEY]: { message: 'An error occured.' }
-    })), first$1());
+    })), first());
 }
 
 function textIsAvailableField(config) {
     const field = textField(config);
     field.asyncValidators = {
-        validation: [{
-                expression: fieldValueIsAvailableValidator(Object.assign(Object.assign({}, config), { message: config === null || config === void 0 ? void 0 : config.isNotAvailableErrorMessage })),
-            }]
+        validation: [
+            {
+                expression: fieldValueIsAvailableValidator(Object.assign(Object.assign({}, config), { message: config === null || config === void 0 ? void 0 : config.isNotAvailableErrorMessage }))
+            }
+        ]
     };
     return workingWrapper(field, {});
 }
@@ -3778,12 +3604,14 @@ function textIsAvailableField(config) {
 /**
  * Allows a directive to provide a formly context and form.
  */
-function ProvideFormlyContext() {
-    return [{
+function provideFormlyContext() {
+    return [
+        {
             provide: DbxFormlyContext,
             useClass: DbxFormlyContext
         },
-        ...ProvideDbxMutableForm(DbxFormlyContext)];
+        ...provideDbxMutableForm(DbxFormlyContext)
+    ];
 }
 /**
  * DbxForm Instance that registers a delegate and manages the state of that form/delegate.
@@ -3797,7 +3625,7 @@ class DbxFormlyContext {
         this._delegate = new BehaviorSubject(undefined);
         this.fields$ = this._fields.pipe(filterMaybe());
         this.disabled$ = this._disabled.pipe(filterMaybe());
-        this.stream$ = this._delegate.pipe(distinctUntilChanged(), switchMap(x => (x) ? x.stream$ : of(DbxFormlyContext.INITIAL_STATE)), shareReplay$1(1));
+        this.stream$ = this._delegate.pipe(distinctUntilChanged(), switchMap((x) => (x ? x.stream$ : of(DbxFormlyContext.INITIAL_STATE))), shareReplay(1));
     }
     destroy() {
         this.lockSet.destroyOnNextUnlock(() => {
@@ -3832,7 +3660,7 @@ class DbxFormlyContext {
     }
     // MARK: FormComponent
     getValue() {
-        return this._delegate.pipe(filterMaybe(), switchMap(x => x.getValue()), shareReplay$1(1));
+        return this._delegate.pipe(filterMaybe(), switchMap((x) => x.getValue()), shareReplay(1));
     }
     setValue(value) {
         this._initialValue.next(value);
@@ -3948,7 +3776,7 @@ class AbstractConfigAsyncFormlyFormDirective extends AbstractAsyncFormlyFormDire
     constructor() {
         super(...arguments);
         this._config = new BehaviorSubject(undefined);
-        this.config$ = this._config.pipe(filterMaybe(), shareReplay$1(1));
+        this.config$ = this._config.pipe(filterMaybe(), shareReplay(1));
     }
     get config() {
         return this._config.value;
@@ -3990,12 +3818,12 @@ class DbxFormlyFieldsContextDirective extends AbstractAsyncFormlyFormDirective {
     }
 }
 DbxFormlyFieldsContextDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxFormlyFieldsContextDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-DbxFormlyFieldsContextDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.2", type: DbxFormlyFieldsContextDirective, selector: "[dbxFormlyFields]", inputs: { fields: ["dbxFormlyFields", "fields"] }, providers: ProvideFormlyContext(), usesInheritance: true, ngImport: i0 });
+DbxFormlyFieldsContextDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.2", type: DbxFormlyFieldsContextDirective, selector: "[dbxFormlyFields]", inputs: { fields: ["dbxFormlyFields", "fields"] }, providers: provideFormlyContext(), usesInheritance: true, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxFormlyFieldsContextDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[dbxFormlyFields]',
-                    providers: ProvideFormlyContext()
+                    providers: provideFormlyContext()
                 }]
         }], propDecorators: { fields: [{
                 type: Input,
@@ -4018,10 +3846,10 @@ class DbxFormlyFormComponent extends AbstractSubscriptionDirective {
         this.form = new FormGroup({});
         this.model = {};
         this.options = {};
-        this.fields$ = this._fields.pipe(switchMapMaybeObs(), distinctUntilChanged(), shareReplay$1(1));
-        this.stream$ = this._reset.pipe(switchMap((lastResetAt) => this.form.valueChanges.pipe(startWith(0), distinctUntilChanged(), throttleTime$1(50, undefined, { leading: true, trailing: true }), scanCount(-1), 
+        this.fields$ = this._fields.pipe(switchMapMaybeObs(), distinctUntilChanged(), shareReplay(1));
+        this.stream$ = this._reset.pipe(switchMap((lastResetAt) => this.form.valueChanges.pipe(startWith(0), distinctUntilChanged(), throttleTime(50, undefined, { leading: true, trailing: true }), scanCount(-1), 
         // update on validation changes too. Does not count towards changes since last reset.
-        switchMap(changesSinceLastReset => this.form.statusChanges.pipe(startWith(this.form.status), distinctUntilChanged()).pipe(map(_ => changesSinceLastReset))), map((changesSinceLastResetCount) => ({
+        switchMap((changesSinceLastReset) => this.form.statusChanges.pipe(startWith(this.form.status), distinctUntilChanged()).pipe(map(() => changesSinceLastReset))), map((changesSinceLastResetCount) => ({
             changesSinceLastResetCount,
             isFormValid: this.form.status !== 'PENDING' && this.form.valid,
             isFormDisabled: this.form.disabled
@@ -4043,7 +3871,7 @@ class DbxFormlyFormComponent extends AbstractSubscriptionDirective {
             const complete = isFormValid;
             const nextState = {
                 isComplete: complete,
-                state: (isReset) ? DbxFormState.RESET : DbxFormState.USED,
+                state: isReset ? DbxFormState.RESET : DbxFormState.USED,
                 status: this.form.status,
                 untouched: this.form.untouched,
                 pristine: this.form.pristine,
@@ -4054,7 +3882,7 @@ class DbxFormlyFormComponent extends AbstractSubscriptionDirective {
             };
             // console.log('Change: ', nextState);
             return nextState;
-        }))), shareReplay$1(1));
+        }))), shareReplay(1));
     }
     ngOnInit() {
         this.context.setDelegate(this);
@@ -4135,7 +3963,7 @@ class DbxFormlyFormComponent extends AbstractSubscriptionDirective {
     }
 }
 DbxFormlyFormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxFormlyFormComponent, deps: [{ token: DbxFormlyContext }], target: i0.ɵɵFactoryTarget.Component });
-DbxFormlyFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: DbxFormlyFormComponent, selector: "dbx-formly", host: { classAttribute: "dbx-formly" }, providers: ProvideDbxMutableForm(DbxFormlyFormComponent), exportAs: ["formly"], usesInheritance: true, ngImport: i0, template: `
+DbxFormlyFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: DbxFormlyFormComponent, selector: "dbx-formly", host: { classAttribute: "dbx-formly" }, providers: provideDbxMutableForm(DbxFormlyFormComponent), exportAs: ["formly"], usesInheritance: true, ngImport: i0, template: `
     <form [formGroup]="form" class="dbx-formly">
       <formly-form [form]="form" [fields]="(fields$ | async) ?? []" [model]="model"></formly-form>
     </form>
@@ -4150,9 +3978,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImpor
       <formly-form [form]="form" [fields]="(fields$ | async) ?? []" [model]="model"></formly-form>
     </form>
   `,
-                    providers: ProvideDbxMutableForm(DbxFormlyFormComponent),
+                    providers: provideDbxMutableForm(DbxFormlyFormComponent),
                     host: {
-                        'class': 'dbx-formly'
+                        class: 'dbx-formly'
                     }
                 }]
         }], ctorParameters: function () { return [{ type: DbxFormlyContext }]; } });
@@ -4160,12 +3988,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImpor
 class DbxFormlyModule {
 }
 DbxFormlyModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxFormlyModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-DbxFormlyModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxFormlyModule, declarations: [DbxFormlyFormComponent,
-        DbxFormlyFieldsContextDirective], imports: [CommonModule,
-        FormsModule,
-        ReactiveFormsModule,
-        FormlyModule,
-        FormlyMatToggleModule], exports: [
+DbxFormlyModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxFormlyModule, declarations: [DbxFormlyFormComponent, DbxFormlyFieldsContextDirective], imports: [CommonModule, FormsModule, ReactiveFormsModule, FormlyModule, FormlyMatToggleModule], exports: [
         // Modules (?)
         FormsModule,
         ReactiveFormsModule,
@@ -4174,30 +3997,15 @@ DbxFormlyModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version
         DbxFormlyFieldsContextDirective
         // Helper Modules
     ] });
-DbxFormlyModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxFormlyModule, imports: [[
-            CommonModule,
-            FormsModule,
-            ReactiveFormsModule,
-            FormlyModule,
-            FormlyMatToggleModule
-        ],
+DbxFormlyModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxFormlyModule, imports: [[CommonModule, FormsModule, ReactiveFormsModule, FormlyModule, FormlyMatToggleModule],
         // Modules (?)
         FormsModule,
         ReactiveFormsModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxFormlyModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [
-                        CommonModule,
-                        FormsModule,
-                        ReactiveFormsModule,
-                        FormlyModule,
-                        FormlyMatToggleModule
-                    ],
-                    declarations: [
-                        DbxFormlyFormComponent,
-                        DbxFormlyFieldsContextDirective
-                    ],
+                    imports: [CommonModule, FormsModule, ReactiveFormsModule, FormlyModule, FormlyMatToggleModule],
+                    declarations: [DbxFormlyFormComponent, DbxFormlyFieldsContextDirective],
                     exports: [
                         // Modules (?)
                         FormsModule,
@@ -4216,12 +4024,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImpor
 class DbxFormSpacerComponent {
 }
 DbxFormSpacerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxFormSpacerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-DbxFormSpacerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: DbxFormSpacerComponent, selector: "dbx-form-spacer", ngImport: i0, template: `<div class="dbx-form-spacer"></div>`, isInline: true });
+DbxFormSpacerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: DbxFormSpacerComponent, selector: "dbx-form-spacer", ngImport: i0, template: `
+    <div class="dbx-form-spacer"></div>
+  `, isInline: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxFormSpacerComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'dbx-form-spacer',
-                    template: `<div class="dbx-form-spacer"></div>`,
+                    template: `
+    <div class="dbx-form-spacer"></div>
+  `
                 }]
         }] });
 
@@ -4229,25 +4041,17 @@ class DbxFormLayoutModule {
 }
 DbxFormLayoutModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxFormLayoutModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
 DbxFormLayoutModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxFormLayoutModule, declarations: [DbxFormSpacerComponent], imports: [CommonModule], exports: [DbxFormSpacerComponent] });
-DbxFormLayoutModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxFormLayoutModule, imports: [[
-            CommonModule
-        ]] });
+DbxFormLayoutModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxFormLayoutModule, imports: [[CommonModule]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxFormLayoutModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [
-                        CommonModule
-                    ],
-                    declarations: [
-                        DbxFormSpacerComponent
-                    ],
-                    exports: [
-                        DbxFormSpacerComponent
-                    ]
+                    imports: [CommonModule],
+                    declarations: [DbxFormSpacerComponent],
+                    exports: [DbxFormSpacerComponent]
                 }]
         }] });
 
-function IsTruthy() {
+function isTruthy() {
     return (control) => {
         const value = control.value;
         if (!value) {
@@ -4260,26 +4064,26 @@ function IsTruthy() {
 }
 
 const DOMAIN_NAME_REGEX = /(.+)\.(.+)/;
-function IsDomain() {
+function isDomain() {
     return Validators.pattern(DOMAIN_NAME_REGEX);
 }
 
-function IsInRange(min = Number.MIN_SAFE_INTEGER, max = Number.MAX_SAFE_INTEGER) {
+/**
+ * Merges the use of the min and max validator.
+ *
+ * @param min
+ * @param max
+ * @returns
+ */
+function isInRange(min = Number.MIN_SAFE_INTEGER, max = Number.MAX_SAFE_INTEGER) {
+    const minFn = Validators.min(min);
+    const maxFn = Validators.max(max);
     return (control) => {
-        const numberString = control.value;
-        const errors = {};
-        if (numberString) {
-            const value = Number(numberString);
-            if (!isNaN(value)) {
-                const bigEnough = value >= min;
-                const smallEnough = value <= max;
-                if (!bigEnough) {
-                    errors.min = value;
-                }
-                if (!smallEnough) {
-                    errors.max = value;
-                }
-            }
+        const minError = minFn(control);
+        const maxError = maxFn(control);
+        let errors = null;
+        if (minError || maxError) {
+            errors = Object.assign(Object.assign({}, minError), maxError);
         }
         return errors;
     };
@@ -4288,20 +4092,12 @@ function IsInRange(min = Number.MIN_SAFE_INTEGER, max = Number.MAX_SAFE_INTEGER)
 class DbxFormExtensionModule {
 }
 DbxFormExtensionModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxFormExtensionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-DbxFormExtensionModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxFormExtensionModule, exports: [DbxFormModule,
-        DbxFormlyModule,
-        DbxFormFormlyFieldModule] });
-DbxFormExtensionModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxFormExtensionModule, imports: [DbxFormModule,
-        DbxFormlyModule,
-        DbxFormFormlyFieldModule] });
+DbxFormExtensionModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxFormExtensionModule, exports: [DbxFormModule, DbxFormlyModule, DbxFormFormlyFieldModule] });
+DbxFormExtensionModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxFormExtensionModule, imports: [DbxFormModule, DbxFormlyModule, DbxFormFormlyFieldModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxFormExtensionModule, decorators: [{
             type: NgModule,
             args: [{
-                    exports: [
-                        DbxFormModule,
-                        DbxFormlyModule,
-                        DbxFormFormlyFieldModule
-                    ]
+                    exports: [DbxFormModule, DbxFormlyModule, DbxFormFormlyFieldModule]
                 }]
         }] });
 
@@ -4309,5 +4105,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", 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, AbstractFormExpandableSectionWrapperDirective, AbstractFormlyFormDirective, AbstractSyncFormlyFormDirective, AutoTouchFieldWrapperComponent, ChecklistItemFieldDataSetBuilder, DBX_SEARCHABLE_FIELD_COMPONENT_DATA_TOKEN, DEFAULT_FORM_DISABLED_KEY, DEFAULT_HAS_VALUE_FN, DEFAULT_PREFERRED_COUNTRIES, DOMAIN_NAME_REGEX, DbxActionFormDirective, DbxActionFormSafetyDirective, DbxChecklistItemContentComponent, DbxChecklistItemFieldComponent, DbxDateTimeFieldComponent, DbxDateTimeFieldTimeMode, DbxDefaultChecklistItemFieldDisplayComponent, DbxDefaultSearchableFieldDisplayComponent, DbxForm, DbxFormActionModule, DbxFormActionTransitionModule, DbxFormComponentFieldComponent, DbxFormExpandWrapperComponent, DbxFormExtensionModule, DbxFormFlexWrapperComponent, DbxFormFormlyArrayFieldModule, DbxFormFormlyBooleanFieldModule, DbxFormFormlyChecklistItemFieldModule, DbxFormFormlyComponentFieldModule, DbxFormFormlyDateFieldModule, DbxFormFormlyEnumFieldModule, DbxFormFormlyFieldModule, DbxFormFormlyPhoneFieldModule, DbxFormFormlyPickableFieldModule, DbxFormFormlySearchableFieldModule, DbxFormFormlySelectionModule, DbxFormFormlyTextEditorFieldModule, DbxFormFormlyTextFieldModule, DbxFormFormlyValueModule, DbxFormFormlyWrapperModule, DbxFormInfoWrapperComponent, DbxFormIoModule, DbxFormLayoutModule, DbxFormLoadingSourceDirective, DbxFormModule, DbxFormRepeatArrayTypeComponent, DbxFormSectionWrapperComponent, DbxFormSourceDirective, DbxFormSpacerComponent, DbxFormState, DbxFormSubsectionWrapperComponent, DbxFormToggleWrapperComponent, DbxFormValueChangesDirective, DbxFormWorkingWrapperComponent, DbxFormlyContext, DbxFormlyFieldsContextDirective, DbxFormlyFormComponent, DbxFormlyModule, DbxMutableForm, DbxPhoneFieldComponent, DbxPickableChipListFieldComponent, DbxPickableListFieldComponent, DbxPickableListFieldItemListComponent, DbxPickableListFieldItemListViewComponent, DbxPickableListFieldItemListViewItemComponent, DbxSearchableChipFieldComponent, DbxSearchableFieldAutocompleteItemComponent, DbxSearchableTextFieldComponent, DbxTextEditorFieldComponent, EXPANDABLE_WRAPPER_KEY, FIELD_VALUES_ARE_EQUAL_VALIDATION_KEY, FIELD_VALUE_IS_AVAILABLE_ERROR_VALIDATION_KEY, FIELD_VALUE_IS_AVAILABLE_VALIDATION_KEY, FLEX_WRAPPER_KEY, INFO_WRAPPER_KEY, INVALID_PHONE_NUMBER_MESSAGE, IsDomain, IsInRange, IsTruthy, LABEL_STRING_MAX_LENGTH, MAX_LENGTH_VALIDATION_MESSAGE, MAX_VALIDATION_MESSAGE, MIN_LENGTH_VALIDATION_MESSAGE, MIN_VALIDATION_MESSAGE, PHONE_LABEL_MAX_LENGTH, ProvideDbxForm, ProvideDbxMutableForm, ProvideFormlyContext, REQUIRED_VALIDATION_MESSAGE, SEARCH_STRING_MAX_LENGTH, SECTION_WRAPPER_KEY, STYLE_WRAPPER_KEY, SUBSECTION_WRAPPER_KEY, TAKE_NEXT_UPCOMING_TIME_CONFIG_OBS, TOGGLE_WRAPPER_KEY, WORKING_WRAPPER_KEY, addWrapperToFormlyFieldConfig, addressField, addressFormlyFields, addressListField, checkIsFieldFlexLayoutGroupFieldConfig, checkboxField, checklistItemField, chipTextField, cityField, componentField, countryField, dateTimeField, dbxFormSourceObservable, defaultValidationMessages, disableFormlyFieldAutofillAttributes, emailField, expandWrapper, fieldValueIsAvailableValidator, fieldValuesAreEqualValidator, filterPickableItemFieldValuesByLabel, flexLayoutWrapper, formlyField, hiddenField, infoWrapper, makeMetaFilterSearchableFieldValueDisplayFn, maxLengthValidationMessage, maxValidationMessage, minLengthValidationMessage, minValidationMessage, nameField, phoneAndLabelSectionField, phoneField, phoneListField, pickableItemChipField, pickableItemListField, repeatArrayField, searchableChipField, searchableStringChipField, searchableTextField, sectionWrapper, sortPickableItemsByLabel, stateField, staticEnumField, styleWrapper, subsectionWrapper, templateOptionsForFieldConfig, templateOptionsValueForFieldConfig, textAreaField, textEditorField, textField, textIsAvailableField, textPasswordField, textPasswordWithVerifyFieldGroup, textVerifyPasswordField, timeOnlyField, toggleField, toggleWrapper, usernamePasswordLoginFields, workingWrapper, wrappedPhoneAndLabelField, zipCodeField };
+export { ADDRESS_CITY_MAX_LENGTH, ADDRESS_COUNTRY_MAX_LENGTH, ADDRESS_LINE_MAX_LENGTH, ADDRESS_STATE_MAX_LENGTH, ADDRESS_ZIP_MAX_LENGTH, APP_ACTION_FORM_DISABLED_KEY, AbstractAsyncFormlyFormDirective, AbstractConfigAsyncFormlyFormDirective, AbstractDbxPickableItemFieldDirective, AbstractDbxSearchableFieldDisplayDirective, AbstractDbxSearchableValueFieldDirective, AbstractFormExpandableSectionWrapperDirective, AbstractFormlyFormDirective, AbstractSyncFormlyFormDirective, AutoTouchFieldWrapperComponent, ChecklistItemFieldDataSetBuilder, DBX_SEARCHABLE_FIELD_COMPONENT_DATA_TOKEN, DEFAULT_FORM_DISABLED_KEY, DEFAULT_HAS_VALUE_FN, DEFAULT_PREFERRED_COUNTRIES, DOMAIN_NAME_REGEX, DbxActionFormDirective, DbxActionFormSafetyDirective, DbxChecklistItemContentComponent, DbxChecklistItemFieldComponent, DbxDateTimeFieldComponent, DbxDateTimeFieldTimeMode, DbxDefaultChecklistItemFieldDisplayComponent, DbxDefaultSearchableFieldDisplayComponent, DbxForm, DbxFormActionModule, DbxFormActionTransitionModule, DbxFormComponentFieldComponent, DbxFormExpandWrapperComponent, DbxFormExtensionModule, DbxFormFlexWrapperComponent, DbxFormFormlyArrayFieldModule, DbxFormFormlyBooleanFieldModule, DbxFormFormlyChecklistItemFieldModule, DbxFormFormlyComponentFieldModule, DbxFormFormlyDateFieldModule, DbxFormFormlyEnumFieldModule, DbxFormFormlyFieldModule, DbxFormFormlyPhoneFieldModule, DbxFormFormlyPickableFieldModule, DbxFormFormlySearchableFieldModule, DbxFormFormlySelectionModule, DbxFormFormlyTextEditorFieldModule, DbxFormFormlyTextFieldModule, DbxFormFormlyValueModule, DbxFormFormlyWrapperModule, DbxFormInfoWrapperComponent, DbxFormIoModule, DbxFormLayoutModule, DbxFormLoadingSourceDirective, DbxFormModule, DbxFormRepeatArrayTypeComponent, DbxFormSectionWrapperComponent, DbxFormSourceDirective, DbxFormSpacerComponent, DbxFormState, DbxFormSubsectionWrapperComponent, DbxFormToggleWrapperComponent, DbxFormValueChangesDirective, DbxFormWorkingWrapperComponent, DbxFormlyContext, DbxFormlyFieldsContextDirective, DbxFormlyFormComponent, DbxFormlyModule, DbxMutableForm, DbxPhoneFieldComponent, DbxPickableChipListFieldComponent, DbxPickableListFieldComponent, DbxPickableListFieldItemListComponent, DbxPickableListFieldItemListViewComponent, DbxPickableListFieldItemListViewItemComponent, DbxSearchableChipFieldComponent, DbxSearchableFieldAutocompleteItemComponent, DbxSearchableTextFieldComponent, DbxTextEditorFieldComponent, EXPANDABLE_WRAPPER_KEY, FIELD_VALUES_ARE_EQUAL_VALIDATION_KEY, FIELD_VALUE_IS_AVAILABLE_ERROR_VALIDATION_KEY, FIELD_VALUE_IS_AVAILABLE_VALIDATION_KEY, FLEX_WRAPPER_KEY, INFO_WRAPPER_KEY, INVALID_PHONE_NUMBER_MESSAGE, LABEL_STRING_MAX_LENGTH, MAX_LENGTH_VALIDATION_MESSAGE, MAX_VALIDATION_MESSAGE, MIN_LENGTH_VALIDATION_MESSAGE, MIN_VALIDATION_MESSAGE, PHONE_LABEL_MAX_LENGTH, REQUIRED_VALIDATION_MESSAGE, SEARCH_STRING_MAX_LENGTH, SECTION_WRAPPER_KEY, STYLE_WRAPPER_KEY, SUBSECTION_WRAPPER_KEY, TAKE_NEXT_UPCOMING_TIME_CONFIG_OBS, TOGGLE_WRAPPER_KEY, WORKING_WRAPPER_KEY, addWrapperToFormlyFieldConfig, addressField, addressFormlyFields, addressListField, checkIsFieldFlexLayoutGroupFieldConfig, checkboxField, checklistItemField, chipTextField, cityField, componentField, countryField, dateTimeField, dbxFormSourceObservable, defaultValidationMessages, disableFormlyFieldAutofillAttributes, emailField, expandWrapper, fieldValueIsAvailableValidator, fieldValuesAreEqualValidator, filterPickableItemFieldValuesByLabel, flexLayoutWrapper, formlyField, hiddenField, infoWrapper, isDomain, isInRange, isTruthy, makeMetaFilterSearchableFieldValueDisplayFn, maxLengthValidationMessage, maxValidationMessage, minLengthValidationMessage, minValidationMessage, nameField, phoneAndLabelSectionField, phoneField, phoneListField, pickableItemChipField, pickableItemListField, provideDbxForm, provideDbxMutableForm, provideFormlyContext, repeatArrayField, searchableChipField, searchableStringChipField, searchableTextField, sectionWrapper, sortPickableItemsByLabel, stateField, staticEnumField, styleWrapper, subsectionWrapper, templateOptionsForFieldConfig, templateOptionsValueForFieldConfig, textAreaField, textEditorField, textField, textIsAvailableField, textPasswordField, textPasswordWithVerifyFieldGroup, textVerifyPasswordField, timeOnlyField, toggleField, toggleWrapper, usernamePasswordLoginFields, workingWrapper, wrappedPhoneAndLabelField, zipCodeField };
 //# sourceMappingURL=dereekb-dbx-form.mjs.map