@dereekb/dbx-form 0.0.1

package/fesm2015/dereekb-dbx-form.mjs

@@ -0,0 +1,3295 @@
+import { MatDialogModule } from '@angular/material/dialog';
+import * as i0 from '@angular/core';
+import { forwardRef, Directive, Host, Input, NgModule, EventEmitter, Output, Component, ViewContainerRef, ViewChild } from '@angular/core';
+import * as i5 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import { isPast, addSeconds, isSameMinute, isSameDay, startOfDay, addMinutes } from 'date-fns';
+import { of, combineLatest, BehaviorSubject, mergeMap, shareReplay as shareReplay$1, switchMap as switchMap$1, startWith, map as map$1, debounceTime as debounceTime$1, distinctUntilChanged as distinctUntilChanged$1, filter as filter$1, first as first$1, Subject, interval, merge } from 'rxjs';
+import { switchMap, first, catchError, filter, map, distinctUntilChanged, shareReplay, delay, startWith as startWith$1, debounceTime, mergeMap as mergeMap$1, tap, throttleTime } from 'rxjs/operators';
+import { LockSet, SubscriptionObject, switchMapMaybeObs, filterMaybe, beginLoading, mapLoadingStateResults, successResult, LoadingStateContextInstance } from '@dereekb/rxjs';
+import * as i2 from '@dereekb/dbx-core';
+import { AbstractSubscriptionDirective, DbxInjectedComponentModule, DbxDatePipeModule } from '@dereekb/dbx-core';
+import * as i1$4 from '@ngx-formly/core';
+import { FieldType, FieldWrapper, FormlyModule, FieldArrayType } from '@ngx-formly/core';
+import * as i1 from '@angular/material/checkbox';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import * as i1$1 from '@dereekb/dbx-web';
+import { DbxTextModule, DbxAnchorModule, DbxLoadingModule, DbxButtonModule } from '@dereekb/dbx-web';
+import * as i2$1 from '@angular/material/icon';
+import { MatIconModule } from '@angular/material/icon';
+import * as i3 from '@angular/forms';
+import { FormsModule, ReactiveFormsModule, FormControl, Validators, FormGroup } from '@angular/forms';
+import * as i2$2 from '@angular/material/core';
+import { MatRippleModule, MatNativeDateModule } from '@angular/material/core';
+import * as i1$2 from '@angular/material/button';
+import { MatButtonModule } from '@angular/material/button';
+import * as i3$1 from '@angular/flex-layout/flex';
+import { FlexLayoutModule } from '@angular/flex-layout';
+import { hasValueOrNotEmpty, addPlusPrefixToNumber, convertMaybeToArray, makeValuesGroupMap, findUnique, separateValues, arrayToMap, concatArraysUnique } from '@dereekb/util';
+import * as i1$3 from '@angular/material/slide-toggle';
+import { MatSlideToggleModule } from '@angular/material/slide-toggle';
+import * as i5$1 from '@angular/material/chips';
+import { MatChipsModule } from '@angular/material/chips';
+import * as i4 from '@angular/material/form-field';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import * as i6 from '@angular/material/input';
+import { MatInputModule } from '@angular/material/input';
+import * as i1$5 from '@angular/material/autocomplete';
+import { MatAutocompleteModule } from '@angular/material/autocomplete';
+import * as i2$3 from '@angular/material/list';
+import { MatListModule } from '@angular/material/list';
+import { camelCase } from 'change-case';
+import { ENTER, COMMA } from '@angular/cdk/keycodes';
+import * as i3$2 from '@angular/material/divider';
+import { MatDividerModule } from '@angular/material/divider';
+import { guessCurrentTimezone, toReadableTimeString, utcDayForDate, readableTimeStringToDate, DateTimeMinuteInstance } from '@dereekb/date';
+import * as i4$1 from '@angular/material/datepicker';
+import { MatDatepickerModule } from '@angular/material/datepicker';
+import * as i5$2 from '@angular/material/menu';
+import { MatMenuModule } from '@angular/material/menu';
+import * as i2$4 from 'ngx-mat-intl-tel-input';
+import { NgxMatIntlTelInputModule } from 'ngx-mat-intl-tel-input';
+import { cloneDeep } from 'lodash';
+import { FormlyMatToggleModule } from '@ngx-formly/material/toggle';
+
+/**
+ * Current state of a DbxForm
+ */
+var DbxFormState;
+(function (DbxFormState) {
+    DbxFormState[DbxFormState["INITIALIZING"] = -1] = "INITIALIZING";
+    DbxFormState[DbxFormState["INCOMPLETE"] = 0] = "INCOMPLETE";
+    DbxFormState[DbxFormState["COMPLETE"] = 1] = "COMPLETE";
+    DbxFormState[DbxFormState["RESET"] = 2] = "RESET";
+})(DbxFormState || (DbxFormState = {}));
+/**
+ * Form that has an event stream, value, and state items.
+ */
+class DbxForm {
+}
+function ProvideDbxForm(sourceType) {
+    return [{ provide: DbxForm, useExisting: forwardRef(() => sourceType) }];
+}
+
+const APP_ACTION_FORM_DISABLED_KEY = 'actionForm';
+/**
+ * Used with an action to bind a form to an action as it's value source.
+ *
+ * If the form has errors when the action is trigger, it will reject the action.
+ *
+ * If the source is not considered modified, the trigger will be ignored.
+ */
+class DbxActionFormDirective {
+    constructor(form, source) {
+        this.form = form;
+        this.source = source;
+        this.lockSet = new LockSet();
+        this._triggeredSub = new SubscriptionObject();
+        this._isCompleteSub = new SubscriptionObject();
+        if (form.lockSet) {
+            this.lockSet.addChildLockSet(form.lockSet, 'form');
+        }
+        this.lockSet.addChildLockSet(source.lockSet, 'source');
+    }
+    ngOnInit() {
+        // Pass data from the form to the source when triggered.
+        this._triggeredSub.subscription = this.source.triggered$.pipe(switchMap(() => {
+            const doNothing = {}; // nothing, form not complete
+            if (this.form.isComplete) {
+                const value = this.form.value;
+                return this.preCheckReadyValue(value).pipe(first(), switchMap((canContinue) => {
+                    if (canContinue) {
+                        return this.readyValue(value).pipe(first());
+                    }
+                    else {
+                        return of(doNothing);
+                    }
+                }), catchError((error) => of({ error })));
+            }
+            else {
+                return of(doNothing);
+            }
+        })).subscribe((result) => {
+            if (result.reject) {
+                this.source.reject(result.reject);
+            }
+            else if (result.value != null) {
+                this.source.readyValue(result.value);
+            }
+            else {
+                // value isn't ready
+            }
+        });
+        // Update the enabled/disabled state
+        this._isCompleteSub.subscription = this.form.stream$.pipe(filter((x) => x.state !== DbxFormState.INITIALIZING), switchMap((event) => {
+            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)));
+            // console.log('Event: ', event, isProbablyTouched);
+            const value = this.form.value;
+            let validatorObs;
+            const initialIsValidCheck = event.isComplete;
+            if (initialIsValidCheck) {
+                validatorObs = (this.appActionFormValidator) ? this.appActionFormValidator(value) : of(true);
+            }
+            else {
+                validatorObs = of(false);
+            }
+            let modifiedObs;
+            const isConsideredModified = (event.pristine === false && isProbablyTouched);
+            if (isConsideredModified) {
+                modifiedObs = (this.appActionFormModified) ? this.appActionFormModified(value) : of(true);
+            }
+            else {
+                modifiedObs = of(false);
+            }
+            return combineLatest([
+                validatorObs,
+                modifiedObs
+            ]).pipe(first(), map(([valid, modified]) => ({ valid, modified, event })));
+        })).subscribe(({ valid, modified, event }) => {
+            // Update Modified State
+            this.source.setIsModified(modified);
+            // Disable if the form is not yet complete/valid.
+            this.source.enable(APP_ACTION_FORM_DISABLED_KEY, valid);
+        });
+        // TODO: Watch the working state and stop allowing input on working..?
+        // TODO: Watch the disabled state for when another disabled key disables this form.
+    }
+    ngOnDestroy() {
+        this.source.enable(APP_ACTION_FORM_DISABLED_KEY);
+        this.lockSet.destroyOnNextUnlock(() => {
+            this._triggeredSub.destroy();
+            this._isCompleteSub.destroy();
+        });
+    }
+    preCheckReadyValue(value) {
+        let validatorObs = (this.appActionFormValidator) ? this.appActionFormValidator(value) : of(true);
+        let modifiedObs = (this.appActionFormModified) ? this.appActionFormModified(value) : of(true);
+        return combineLatest([
+            validatorObs,
+            modifiedObs
+        ]).pipe(first(), map(([valid, modified]) => valid && modified));
+    }
+    readyValue(value) {
+        return of({ value });
+    }
+}
+DbxActionFormDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxActionFormDirective, deps: [{ token: DbxForm, host: true }, { token: i2.ActionContextStoreSourceInstance }], target: i0.ɵɵFactoryTarget.Directive });
+DbxActionFormDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.0", type: DbxActionFormDirective, selector: "[dbxActionForm]", inputs: { appActionFormValidator: "appActionFormValidator", appActionFormModified: "appActionFormModified" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxActionFormDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[dbxActionForm]'
+                }]
+        }], ctorParameters: function () {
+        return [{ type: DbxForm, decorators: [{
+                        type: Host
+                    }] }, { type: i2.ActionContextStoreSourceInstance }];
+    }, propDecorators: { appActionFormValidator: [{
+                type: Input
+            }], appActionFormModified: [{
+                type: Input
+            }] } });
+
+class DbxFormlyActionModule {
+}
+DbxFormlyActionModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxFormlyActionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+DbxFormlyActionModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxFormlyActionModule, declarations: [DbxActionFormDirective], imports: [CommonModule,
+        MatDialogModule], exports: [DbxActionFormDirective] });
+DbxFormlyActionModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxFormlyActionModule, imports: [[
+            CommonModule,
+            MatDialogModule
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxFormlyActionModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        MatDialogModule
+                    ],
+                    declarations: [
+                        DbxActionFormDirective
+                    ],
+                    exports: [
+                        DbxActionFormDirective
+                    ]
+                }]
+        }] });
+
+/**
+ * Used with a FormComponent to set the value from a LoadingState when the value is available.
+ */
+class DbxFormLoadingPairSourceDirective extends AbstractSubscriptionDirective {
+    constructor(form) {
+        super();
+        this.form = form;
+    }
+    /**
+     * Sets a LoadingContext that is watched for the loading state.
+     */
+    set obs(obs) {
+        this._setObs(obs);
+    }
+    _setObs(obs) {
+        let subscription;
+        if (obs) {
+            subscription = combineLatest([
+                // Emit the first time initializing isn't there.
+                this.form.stream$.pipe(filter((x) => x.state !== DbxFormState.INITIALIZING), first()),
+                obs
+            ]).pipe(map((x) => x[1]), filter((x) => Boolean(x)), distinctUntilChanged((x, y) => x.value === y.value)).subscribe((x) => {
+                if (!x.error && !x.loading) {
+                    // console.log('Setting value: ', x.model);
+                    this.form.setValue(x.value);
+                }
+            });
+        }
+        this.sub = subscription;
+    }
+}
+DbxFormLoadingPairSourceDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxFormLoadingPairSourceDirective, deps: [{ token: DbxForm, host: true }], target: i0.ɵɵFactoryTarget.Directive });
+DbxFormLoadingPairSourceDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.0", type: DbxFormLoadingPairSourceDirective, selector: "[dbxFormLoadingPairSource]", inputs: { obs: ["dbxFormLoadingPairSource", "obs"] }, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxFormLoadingPairSourceDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[dbxFormLoadingPairSource]'
+                }]
+        }], ctorParameters: function () {
+        return [{ type: DbxForm, decorators: [{
+                        type: Host
+                    }] }];
+    }, propDecorators: { obs: [{
+                type: Input,
+                args: ['dbxFormLoadingPairSource']
+            }] } });
+
+/**
+ * Used to see form value changes.
+ */
+class DbxFormValueChangesDirective extends AbstractSubscriptionDirective {
+    constructor(form) {
+        super();
+        this.form = form;
+        this.dbxFormValueChange = new EventEmitter();
+    }
+    ngOnInit() {
+        this.sub = this.form.stream$.subscribe((x) => {
+            this.dbxFormValueChange.next(this.form.value);
+        });
+    }
+}
+DbxFormValueChangesDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxFormValueChangesDirective, deps: [{ token: DbxForm, host: true }], target: i0.ɵɵFactoryTarget.Directive });
+DbxFormValueChangesDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.0", type: DbxFormValueChangesDirective, selector: "[dbxFormValueChange]", outputs: { dbxFormValueChange: "dbxFormValueChange" }, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxFormValueChangesDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[dbxFormValueChange]'
+                }]
+        }], ctorParameters: function () {
+        return [{ type: DbxForm, decorators: [{
+                        type: Host
+                    }] }];
+    }, propDecorators: { dbxFormValueChange: [{
+                type: Output
+            }] } });
+
+/**
+ * Used with a FormComponent to set the value based on the input value.
+ */
+class DbxFormSourceDirective extends AbstractSubscriptionDirective {
+    constructor(form) {
+        super();
+        this.form = form;
+    }
+    /**
+     * Sets a LoadingContext that is watched for the loading state.
+     */
+    set obs(obs) {
+        this._setObs(obs);
+    }
+    _setObs(obs) {
+        let subscription;
+        if (obs) {
+            subscription = combineLatest([
+                // Emit the first time initializing isn't there.
+                this.form.stream$.pipe(filter((x) => x.state !== DbxFormState.INITIALIZING), first()),
+                obs
+            ]).pipe(map((x) => x[1]), distinctUntilChanged((x, y) => x === y)).subscribe((x) => {
+                this.form.setValue(x);
+            });
+        }
+        this.sub = subscription;
+    }
+}
+DbxFormSourceDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxFormSourceDirective, deps: [{ token: DbxForm, host: true }], target: i0.ɵɵFactoryTarget.Directive });
+DbxFormSourceDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.0", type: DbxFormSourceDirective, selector: "[dbxFormSource]", inputs: { obs: ["dbxFormSource", "obs"] }, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxFormSourceDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[dbxFormSource]'
+                }]
+        }], ctorParameters: function () {
+        return [{ type: DbxForm, decorators: [{
+                        type: Host
+                    }] }];
+    }, propDecorators: { obs: [{
+                type: Input,
+                args: ['dbxFormSource']
+            }] } });
+
+class DbxFormModule {
+}
+DbxFormModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxFormModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+DbxFormModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxFormModule, declarations: [DbxFormSourceDirective,
+        DbxFormValueChangesDirective,
+        DbxFormLoadingPairSourceDirective], imports: [CommonModule], exports: [DbxFormSourceDirective,
+        DbxFormValueChangesDirective,
+        DbxFormLoadingPairSourceDirective] });
+DbxFormModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxFormModule, imports: [[
+            CommonModule
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxFormModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule
+                    ],
+                    declarations: [
+                        DbxFormSourceDirective,
+                        DbxFormValueChangesDirective,
+                        DbxFormLoadingPairSourceDirective
+                    ],
+                    exports: [
+                        DbxFormSourceDirective,
+                        DbxFormValueChangesDirective,
+                        DbxFormLoadingPairSourceDirective
+                    ]
+                }]
+        }] });
+
+// MARK: Default
+class DbxDefaultChecklistItemFieldDisplayComponent {
+    get label() {
+        var _a;
+        return (_a = this.displayContent) === null || _a === void 0 ? void 0 : _a.label;
+    }
+    get sublabel() {
+        var _a;
+        return (_a = this.displayContent) === null || _a === void 0 ? void 0 : _a.sublabel;
+    }
+    get description() {
+        var _a;
+        return (_a = this.displayContent) === null || _a === void 0 ? void 0 : _a.description;
+    }
+}
+DbxDefaultChecklistItemFieldDisplayComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxDefaultChecklistItemFieldDisplayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+DbxDefaultChecklistItemFieldDisplayComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.0", type: DbxDefaultChecklistItemFieldDisplayComponent, selector: "ng-component", inputs: { displayContent: "displayContent" }, ngImport: i0, template: `
+    <div *ngIf="displayContent" class="dbx-default-checklist-item-field">
+      <div *ngIf="label" class="item-label">{{ label }}</div>
+      <div *ngIf="sublabel" class="item-sublabel">{{ sublabel }}</div>
+      <div *ngIf="description" class="dbx-hint item-description">{{ description }}</div>
+    </div>
+  `, isInline: true, directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxDefaultChecklistItemFieldDisplayComponent, decorators: [{
+            type: Component,
+            args: [{
+                    template: `
+    <div *ngIf="displayContent" class="dbx-default-checklist-item-field">
+      <div *ngIf="label" class="item-label">{{ label }}</div>
+      <div *ngIf="sublabel" class="item-sublabel">{{ sublabel }}</div>
+      <div *ngIf="description" class="dbx-hint item-description">{{ description }}</div>
+    </div>
+  `
+                }]
+        }], propDecorators: { displayContent: [{
+                type: Input
+            }] } });
+
+class DbxChecklistItemFieldComponent extends FieldType {
+    constructor() {
+        super(...arguments);
+        this._displayContent = new BehaviorSubject(undefined);
+        this.displayContent$ = this._displayContent.pipe(switchMapMaybeObs(), distinctUntilChanged(), shareReplay(1));
+        this.anchor$ = this.displayContent$.pipe(map(x => x.anchor), shareReplay(1));
+        this.rippleDisabled$ = this.displayContent$.pipe(map(x => x.ripple === false || (x.ripple !== true && !x.anchor)), distinctUntilChanged(), shareReplay(1));
+    }
+    get formGroup() {
+        return this.form;
+    }
+    get checkboxFieldKey() {
+        return this.key;
+    }
+    get label() {
+        var _a;
+        return (_a = this.field.templateOptions) === null || _a === void 0 ? void 0 : _a.label;
+    }
+    get description() {
+        var _a;
+        return (_a = this.field.templateOptions) === null || _a === void 0 ? void 0 : _a.description;
+    }
+    get required() {
+        var _a;
+        return (_a = this.field.templateOptions) === null || _a === void 0 ? void 0 : _a.required;
+    }
+    get errors() {
+        var _a;
+        return (_a = this.field.formControl) === null || _a === void 0 ? void 0 : _a.errors;
+    }
+    get componentClass() {
+        var _a;
+        return (_a = this.field.componentClass) !== null && _a !== void 0 ? _a : DbxDefaultChecklistItemFieldDisplayComponent;
+    }
+    ngOnInit() {
+        this._displayContent.next(this.field.displayContentObs);
+    }
+    ngOnDestroy() {
+        this._displayContent.complete();
+    }
+}
+DbxChecklistItemFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxChecklistItemFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+DbxChecklistItemFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.0", type: DbxChecklistItemFieldComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<div class=\"dbx-checklist-item-wrapper\" [formGroup]=\"formGroup\">\n  <div *ngIf=\"label\" class=\"dbx-checklist-item-label\">{{ label }}</div>\n  <div class=\"dbx-checklist-item\">\n    <div class=\"dbx-checklist-item-check\">\n      <mat-checkbox [formControlName]=\"checkboxFieldKey\"></mat-checkbox>\n    </div>\n    <div class=\"dbx-checklist-item-content-wrapper\">\n      <dbx-anchor [block]=\"true\" [anchor]=\"anchor$ | async\">\n        <div class=\"dbx-checklist-item-content\" matRipple [matRippleDisabled]=\"(rippleDisabled$ | async) ?? false\">\n          <dbx-checklist-item-content-component></dbx-checklist-item-content-component>\n          <span class=\"spacer\"></span>\n          <mat-icon>navigate_next</mat-icon>\n        </div>\n      </dbx-anchor>\n    </div>\n  </div>\n  <div *ngIf=\"description\" class=\"dbx-hint\">{{ description }}</div>\n</div>\n", components: [{ type: i0.forwardRef(function () { return i1.MatCheckbox; }), selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { type: i0.forwardRef(function () { return i1$1.DbxAnchorComponent; }), selector: "dbx-anchor, [dbx-anchor]", inputs: ["block"] }, { type: i0.forwardRef(function () { return DbxChecklistItemContentComponent; }), selector: "dbx-checklist-item-content-component" }, { type: i0.forwardRef(function () { return i2$1.MatIcon; }), selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i0.forwardRef(function () { return i3.NgControlStatusGroup; }), selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i0.forwardRef(function () { return i3.FormGroupDirective; }), selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i0.forwardRef(function () { return i5.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i0.forwardRef(function () { return i3.NgControlStatus; }), selector: "[formControlName],[ngModel],[formControl]" }, { type: i0.forwardRef(function () { return i3.FormControlName; }), selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i0.forwardRef(function () { return i2$2.MatRipple; }), selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }], pipes: { "async": i0.forwardRef(function () { return i5.AsyncPipe; }) } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxChecklistItemFieldComponent, decorators: [{
+            type: Component,
+            args: [{ template: "<div class=\"dbx-checklist-item-wrapper\" [formGroup]=\"formGroup\">\n  <div *ngIf=\"label\" class=\"dbx-checklist-item-label\">{{ label }}</div>\n  <div class=\"dbx-checklist-item\">\n    <div class=\"dbx-checklist-item-check\">\n      <mat-checkbox [formControlName]=\"checkboxFieldKey\"></mat-checkbox>\n    </div>\n    <div class=\"dbx-checklist-item-content-wrapper\">\n      <dbx-anchor [block]=\"true\" [anchor]=\"anchor$ | async\">\n        <div class=\"dbx-checklist-item-content\" matRipple [matRippleDisabled]=\"(rippleDisabled$ | async) ?? false\">\n          <dbx-checklist-item-content-component></dbx-checklist-item-content-component>\n          <span class=\"spacer\"></span>\n          <mat-icon>navigate_next</mat-icon>\n        </div>\n      </dbx-anchor>\n    </div>\n  </div>\n  <div *ngIf=\"description\" class=\"dbx-hint\">{{ description }}</div>\n</div>\n" }]
+        }] });
+class DbxChecklistItemContentComponent extends AbstractSubscriptionDirective {
+    constructor(checklistItemFieldComponent, resolver, ngZone) {
+        super();
+        this.checklistItemFieldComponent = checklistItemFieldComponent;
+        this.resolver = resolver;
+        this.ngZone = ngZone;
+        this.displayContent$ = this.checklistItemFieldComponent.displayContent$;
+        this.isLoading$ = this.checklistItemFieldComponent.displayContent$;
+    }
+    ngOnInit() {
+        this.contentRef.clear();
+        const componentClass = this.checklistItemFieldComponent.componentClass;
+        const componentRef = this.contentRef.createComponent(componentClass);
+        this.sub = this.checklistItemFieldComponent.displayContent$.subscribe((x) => {
+            this.ngZone.run(() => componentRef.instance.displayContent = x);
+        });
+    }
+}
+DbxChecklistItemContentComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxChecklistItemContentComponent, deps: [{ token: DbxChecklistItemFieldComponent }, { token: i0.ComponentFactoryResolver }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+DbxChecklistItemContentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.0", type: DbxChecklistItemContentComponent, selector: "dbx-checklist-item-content-component", viewQueries: [{ propertyName: "contentRef", first: true, predicate: ["content"], descendants: true, read: ViewContainerRef, static: true }], usesInheritance: true, ngImport: i0, template: `
+    <ng-template #content></ng-template>
+  `, isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxChecklistItemContentComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'dbx-checklist-item-content-component',
+                    template: `
+    <ng-template #content></ng-template>
+  `
+                }]
+        }], ctorParameters: function () { return [{ type: DbxChecklistItemFieldComponent }, { type: i0.ComponentFactoryResolver }, { type: i0.NgZone }]; }, propDecorators: { contentRef: [{
+                type: ViewChild,
+                args: ['content', { static: true, read: ViewContainerRef }]
+            }] } });
+
+class FormInfoSectionWrapperComponent extends FieldWrapper {
+    get infoSection() {
+        return this.to.infoSection;
+    }
+    onInfoClick() {
+        this.infoSection.onInfoClick();
+    }
+}
+FormInfoSectionWrapperComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: FormInfoSectionWrapperComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+FormInfoSectionWrapperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.0", type: FormInfoSectionWrapperComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
+    <div class="form-info-section" fxLayout="row">
+      <div class="form-info-section-content" fxFlex="grow">
+        <ng-container #fieldComponent></ng-container>
+      </div>
+      <div class="form-info-section-info" fxFlex="noshrink" fxLayout="column" fxLayoutAlign="center center">
+        <button mat-icon-button [attr.aria-label]="'show info button for ' + to.label || 'section'"
+          (click)="onInfoClick()">
+          <mat-icon>info</mat-icon>
+        </button>
+      </div>
+    </div>
+  `, isInline: true, components: [{ type: i1$2.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i3$1.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i3$1.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { type: i3$1.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: FormInfoSectionWrapperComponent, decorators: [{
+            type: Component,
+            args: [{
+                    template: `
+    <div class="form-info-section" fxLayout="row">
+      <div class="form-info-section-content" fxFlex="grow">
+        <ng-container #fieldComponent></ng-container>
+      </div>
+      <div class="form-info-section-info" fxFlex="noshrink" fxLayout="column" fxLayoutAlign="center center">
+        <button mat-icon-button [attr.aria-label]="'show info button for ' + to.label || 'section'"
+          (click)="onInfoClick()">
+          <mat-icon>info</mat-icon>
+        </button>
+      </div>
+    </div>
+  `
+                }]
+        }] });
+
+class FormSectionWrapperComponent extends FieldWrapper {
+    get description() {
+        return this.to.description;
+    }
+}
+FormSectionWrapperComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: FormSectionWrapperComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+FormSectionWrapperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.0", type: FormSectionWrapperComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
+    <div class="form-section">
+      <h3>{{ to.label }}</h3>
+      <div class="form-section-content">
+        <ng-container #fieldComponent></ng-container>
+      </div>
+      <dbx-hint *ngIf="description">{{ description }}</dbx-hint>
+    </div>
+  `, isInline: true, components: [{ type: i1$1.DbxHintComponent, selector: "dbx-hint" }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: FormSectionWrapperComponent, decorators: [{
+            type: Component,
+            args: [{
+                    template: `
+    <div class="form-section">
+      <h3>{{ to.label }}</h3>
+      <div class="form-section-content">
+        <ng-container #fieldComponent></ng-container>
+      </div>
+      <dbx-hint *ngIf="description">{{ description }}</dbx-hint>
+    </div>
+  `
+                }]
+        }] });
+
+class FormFlexWrapperComponent extends FieldWrapper {
+}
+FormFlexWrapperComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: FormFlexWrapperComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+FormFlexWrapperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.0", type: FormFlexWrapperComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
+    <div class="form-flex-section">
+      <ng-container #fieldComponent></ng-container>
+    </div>
+  `, isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: FormFlexWrapperComponent, decorators: [{
+            type: Component,
+            args: [{
+                    template: `
+    <div class="form-flex-section">
+      <ng-container #fieldComponent></ng-container>
+    </div>
+  `
+                }]
+        }] });
+
+class FormSubsectionWrapperComponent extends FieldWrapper {
+    get description() {
+        return this.to.description;
+    }
+}
+FormSubsectionWrapperComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: FormSubsectionWrapperComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+FormSubsectionWrapperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.0", type: FormSubsectionWrapperComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
+    <div class="form-section form-subsection">
+      <h4>{{ to.label }}</h4>
+      <div class="form-section-content">
+        <ng-container #fieldComponent></ng-container>
+      </div>
+      <dbx-hint *ngIf="description"><small>{{ description }}</small></dbx-hint>
+    </div>
+  `, isInline: true, components: [{ type: i1$1.DbxHintComponent, selector: "dbx-hint" }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: FormSubsectionWrapperComponent, decorators: [{
+            type: Component,
+            args: [{
+                    template: `
+    <div class="form-section form-subsection">
+      <h4>{{ to.label }}</h4>
+      <div class="form-section-content">
+        <ng-container #fieldComponent></ng-container>
+      </div>
+      <dbx-hint *ngIf="description"><small>{{ description }}</small></dbx-hint>
+    </div>
+  `
+                }]
+        }] });
+
+const DEFAULT_HAS_VALUE_FN = hasValueOrNotEmpty;
+class AbstractFormExpandableSectionWrapperDirective extends FieldWrapper {
+    constructor() {
+        super(...arguments);
+        this._formControlObs = new BehaviorSubject(undefined);
+        this.formControl$ = this._formControlObs.pipe(filterMaybe());
+        this._toggleOpen = new BehaviorSubject(undefined);
+        this.show$ = this._toggleOpen.pipe(mergeMap((toggleOpen) => {
+            if (toggleOpen != null) {
+                return of(toggleOpen);
+            }
+            else {
+                return this.hasValue$;
+            }
+        }), shareReplay$1(1));
+        this.hasValue$ = this.formControl$.pipe(switchMap$1((x) => x.valueChanges.pipe(startWith(x.value), map$1((value) => {
+            return this.hasValueFn(value);
+        }), shareReplay$1(1))));
+    }
+    get expandableSection() {
+        return this.to.expandableSection;
+    }
+    get hasValueFn() {
+        var _a, _b;
+        return (_b = (_a = this.expandableSection) === null || _a === void 0 ? void 0 : _a.hasValueFn) !== null && _b !== void 0 ? _b : DEFAULT_HAS_VALUE_FN;
+    }
+    get expandLabel() {
+        var _a, _b, _c, _d, _e, _f;
+        return (_e = (_b = (_a = this.expandableSection) === null || _a === void 0 ? void 0 : _a.expandLabel) !== null && _b !== void 0 ? _b : (_d = (_c = this.field) === null || _c === void 0 ? void 0 : _c.templateOptions) === null || _d === void 0 ? void 0 : _d.label) !== null && _e !== void 0 ? _e : String((_f = this.field) === null || _f === void 0 ? void 0 : _f.key);
+    }
+    open() {
+        this._toggleOpen.next(true);
+    }
+    ngOnInit() {
+        this._formControlObs.next(this.formControl);
+    }
+    ngOnDestroy() {
+        this._toggleOpen.complete();
+        this._formControlObs.complete();
+    }
+}
+AbstractFormExpandableSectionWrapperDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: AbstractFormExpandableSectionWrapperDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+AbstractFormExpandableSectionWrapperDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.0", type: AbstractFormExpandableSectionWrapperDirective, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: AbstractFormExpandableSectionWrapperDirective, decorators: [{
+            type: Directive
+        }] });
+/**
+ * Section that is expandable by a button until a value is set, or the button is pressed.
+ */
+class FormExpandableSectionWrapperComponent extends AbstractFormExpandableSectionWrapperDirective {
+}
+FormExpandableSectionWrapperComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: FormExpandableSectionWrapperComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+FormExpandableSectionWrapperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.0", type: FormExpandableSectionWrapperComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
+  <ng-container [ngSwitch]="show$ | async">
+    <ng-container *ngSwitchCase="true">
+      <ng-container #fieldComponent></ng-container>
+    </ng-container>
+    <ng-container *ngSwitchCase="false">
+      <span class="form-expandable-section-button" (click)="open()">{{ expandLabel }}</span>
+    </ng-container>
+  </ng-container>
+  `, isInline: true, directives: [{ type: i5.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i5.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }], pipes: { "async": i5.AsyncPipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: FormExpandableSectionWrapperComponent, decorators: [{
+            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="form-expandable-section-button" (click)="open()">{{ expandLabel }}</span>
+    </ng-container>
+  </ng-container>
+  `
+                }]
+        }] });
+
+/**
+ * Wrapper than sets the field to "touched" when the value changes and the field is not pristine.
+ */
+class AutoTouchFieldWrapperComponent extends FieldWrapper {
+    ngOnInit() {
+        this.formControl.valueChanges.pipe(delay(200)).subscribe(() => {
+            if (!this.formControl.pristine && this.formControl.untouched) {
+                this.formControl.markAsTouched();
+                this.formControl.updateValueAndValidity();
+            }
+        });
+    }
+}
+AutoTouchFieldWrapperComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: AutoTouchFieldWrapperComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+AutoTouchFieldWrapperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.0", type: AutoTouchFieldWrapperComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `<ng-container #fieldComponent></ng-container>`, isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: AutoTouchFieldWrapperComponent, decorators: [{
+            type: Component,
+            args: [{
+                    template: `<ng-container #fieldComponent></ng-container>`
+                }]
+        }] });
+
+/**
+ * Section that is expandable by a button until a value is set, or the button is pressed.
+ */
+class FormToggleSectionWrapperComponent extends AbstractFormExpandableSectionWrapperDirective {
+    constructor() {
+        super(...arguments);
+        this.$slideLabel = this._toggleOpen.pipe(switchMap(x => {
+            var _a, _b;
+            if ((_a = this.toggleSection) === null || _a === void 0 ? void 0 : _a.toggleLabelObs) {
+                return (_b = this.toggleSection) === null || _b === void 0 ? void 0 : _b.toggleLabelObs(x);
+            }
+            else {
+                return of(this.expandLabel);
+            }
+        }), shareReplay(1));
+    }
+    get toggleSection() {
+        return this.to.toggleSection;
+    }
+    onToggleChange() {
+        this.show$.pipe(first()).subscribe((show) => {
+            this._toggleOpen.next(!show);
+        });
+    }
+}
+FormToggleSectionWrapperComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: FormToggleSectionWrapperComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+FormToggleSectionWrapperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.0", type: FormToggleSectionWrapperComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
+  <div class="form-toggle-wrapper" [ngSwitch]="show$ | async">
+    <div class="form-toggle-wrapper-toggle">
+      <mat-slide-toggle [checked]="show$ | async" (toggleChange)="onToggleChange()">{{ $slideLabel | async }}</mat-slide-toggle>
+    </div>
+    <ng-container *ngSwitchCase="true">
+      <ng-container #fieldComponent></ng-container>
+    </ng-container>
+  </div>
+  `, isInline: true, components: [{ type: i1$3.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex", "name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "checked"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }], directives: [{ type: i5.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i5.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }], pipes: { "async": i5.AsyncPipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: FormToggleSectionWrapperComponent, decorators: [{
+            type: Component,
+            args: [{
+                    template: `
+  <div class="form-toggle-wrapper" [ngSwitch]="show$ | async">
+    <div class="form-toggle-wrapper-toggle">
+      <mat-slide-toggle [checked]="show$ | async" (toggleChange)="onToggleChange()">{{ $slideLabel | async }}</mat-slide-toggle>
+    </div>
+    <ng-container *ngSwitchCase="true">
+      <ng-container #fieldComponent></ng-container>
+    </ng-container>
+  </div>
+  `
+                }]
+        }] });
+
+class DbxFormFormlyWrapperModule {
+}
+DbxFormFormlyWrapperModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxFormFormlyWrapperModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+DbxFormFormlyWrapperModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxFormFormlyWrapperModule, declarations: [AutoTouchFieldWrapperComponent,
+        FormSectionWrapperComponent,
+        FormSubsectionWrapperComponent,
+        FormInfoSectionWrapperComponent,
+        FormExpandableSectionWrapperComponent,
+        FormToggleSectionWrapperComponent], imports: [CommonModule,
+        DbxTextModule,
+        MatButtonModule,
+        MatSlideToggleModule,
+        MatIconModule,
+        FlexLayoutModule, i1$4.FormlyModule] });
+DbxFormFormlyWrapperModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxFormFormlyWrapperModule, imports: [[
+            CommonModule,
+            DbxTextModule,
+            MatButtonModule,
+            MatSlideToggleModule,
+            MatIconModule,
+            FlexLayoutModule,
+            FormlyModule.forChild({
+                wrappers: [
+                    { name: 'autotouch', component: AutoTouchFieldWrapperComponent },
+                    { name: 'expandable', component: FormExpandableSectionWrapperComponent },
+                    { name: 'toggle', component: FormToggleSectionWrapperComponent },
+                    { name: 'section', component: FormSectionWrapperComponent },
+                    { name: 'subsection', component: FormSubsectionWrapperComponent },
+                    { name: 'info', component: FormInfoSectionWrapperComponent },
+                    { name: 'flex', component: FormFlexWrapperComponent }
+                ]
+            })
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxFormFormlyWrapperModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        DbxTextModule,
+                        MatButtonModule,
+                        MatSlideToggleModule,
+                        MatIconModule,
+                        FlexLayoutModule,
+                        FormlyModule.forChild({
+                            wrappers: [
+                                { name: 'autotouch', component: AutoTouchFieldWrapperComponent },
+                                { name: 'expandable', component: FormExpandableSectionWrapperComponent },
+                                { name: 'toggle', component: FormToggleSectionWrapperComponent },
+                                { name: 'section', component: FormSectionWrapperComponent },
+                                { name: 'subsection', component: FormSubsectionWrapperComponent },
+                                { name: 'info', component: FormInfoSectionWrapperComponent },
+                                { name: 'flex', component: FormFlexWrapperComponent }
+                            ]
+                        })
+                    ],
+                    declarations: [
+                        AutoTouchFieldWrapperComponent,
+                        FormSectionWrapperComponent,
+                        FormSubsectionWrapperComponent,
+                        FormInfoSectionWrapperComponent,
+                        FormExpandableSectionWrapperComponent,
+                        FormToggleSectionWrapperComponent
+                    ],
+                    exports: []
+                }]
+        }] });
+
+class DbxFormFormlyChecklistItemFieldModule {
+}
+DbxFormFormlyChecklistItemFieldModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxFormFormlyChecklistItemFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+DbxFormFormlyChecklistItemFieldModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxFormFormlyChecklistItemFieldModule, declarations: [DbxChecklistItemFieldComponent,
+        DbxChecklistItemContentComponent,
+        DbxDefaultChecklistItemFieldDisplayComponent], imports: [CommonModule,
+        DbxTextModule,
+        FormsModule,
+        ReactiveFormsModule,
+        MatRippleModule,
+        MatCheckboxModule,
+        MatButtonModule,
+        MatIconModule,
+        DbxAnchorModule,
+        DbxInjectedComponentModule,
+        DbxFormFormlyWrapperModule, i1$4.FormlyModule], exports: [DbxFormFormlyWrapperModule] });
+DbxFormFormlyChecklistItemFieldModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxFormFormlyChecklistItemFieldModule, imports: [[
+            CommonModule,
+            DbxTextModule,
+            FormsModule,
+            ReactiveFormsModule,
+            MatRippleModule,
+            MatCheckboxModule,
+            MatButtonModule,
+            MatIconModule,
+            DbxAnchorModule,
+            DbxInjectedComponentModule,
+            DbxFormFormlyWrapperModule,
+            FormlyModule.forChild({
+                types: [
+                    { name: 'checklistitem', component: DbxChecklistItemFieldComponent }
+                ]
+            })
+        ], DbxFormFormlyWrapperModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxFormFormlyChecklistItemFieldModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        DbxTextModule,
+                        FormsModule,
+                        ReactiveFormsModule,
+                        MatRippleModule,
+                        MatCheckboxModule,
+                        MatButtonModule,
+                        MatIconModule,
+                        DbxAnchorModule,
+                        DbxInjectedComponentModule,
+                        DbxFormFormlyWrapperModule,
+                        FormlyModule.forChild({
+                            types: [
+                                { name: 'checklistitem', component: DbxChecklistItemFieldComponent }
+                            ]
+                        })
+                    ],
+                    declarations: [
+                        DbxChecklistItemFieldComponent,
+                        DbxChecklistItemContentComponent,
+                        DbxDefaultChecklistItemFieldDisplayComponent
+                    ],
+                    exports: [
+                        DbxFormFormlyWrapperModule
+                    ]
+                }]
+        }] });
+
+/**
+ * Validates the configuration on the input field.
+ */
+function formlyField(fieldConfig) {
+    if (!fieldConfig.key) {
+        console.error(fieldConfig);
+        throw new Error(`Field had a null key.`);
+    }
+    return fieldConfig;
+}
+/**
+ * Returns configuration for a formlyField that will disable autofill/autocomplete for a field.
+ */
+function disableFormlyFieldAutofill() {
+    // https://stackoverflow.com/questions/15738259/disabling-chrome-autofill
+    return {
+        name: 'password',
+        autocomplete: 'off'
+    };
+}
+
+function checklistItemField({ key, label = '', placeholder = '', displayContentObs, componentClass, required = false }) {
+    const fieldConfig = formlyField({
+        key,
+        type: 'checklistitem',
+        templateOptions: {
+            label,
+            placeholder,
+            required
+        },
+        displayContentObs,
+        componentClass
+    });
+    return fieldConfig;
+}
+/**
+ * Used for building a set of configurations for a data-type object that has as second object that is used as a checklist.
+ */
+class ChecklistItemFieldDataSetBuilder {
+    constructor(dataObs) {
+        this.dataObs = dataObs;
+        this._fields = new Map();
+        this.dataObs$ = this.dataObs;
+    }
+    /**
+     * Merges the input config with existing configuration.
+     *
+     * The displayContentObs, if provided, will merge with the existing observable and the two objects merged.
+     */
+    merge(key, config) {
+        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(([a, b]) => {
+                const result = Object.assign(Object.assign({}, a), b);
+                // console.log('A and b: ', a, b, result);
+                return result;
+            }), shareReplay(1));
+        }
+        // console.log('Merged: ', mergedConfig);
+        this.field(mergedConfig);
+    }
+    override(key, config) {
+        const currentField = this._assertFieldExists(key);
+        this.field(Object.assign(Object.assign(Object.assign({}, currentField.field), config), { key }));
+    }
+    _assertFieldExists(key) {
+        const currentField = this._fields.get(key);
+        if (!currentField) {
+            throw new Error(`Expected field with key "${key}" for override() but was unavailable.`);
+        }
+        return currentField;
+    }
+    showValueFieldArrayCount(key, config) {
+        return this.field(Object.assign(Object.assign({ displayContentObs: this.contentWithDisplayValueFromData(key, (x) => addPlusPrefixToNumber(x === null || x === void 0 ? void 0 : x.length)) }, config), { key }));
+    }
+    showValueField(key, config, labelFn = (x) => x === null || x === void 0 ? void 0 : x.toString()) {
+        return this.field(Object.assign(Object.assign({ displayContentObs: this.contentWithDisplayValueFromData(key, labelFn) }, config), { key }));
+    }
+    field(config) {
+        const key = config.key;
+        this._fields.set(key, {
+            key,
+            field: config
+        });
+    }
+    // MARK: Build/Finish
+    build() {
+        return Array.from(this._fields.values()).map(({ field }) => {
+            return checklistItemField(field);
+        });
+    }
+    // MARK: Utility
+    customContentFromData(mapFn) {
+        return this.dataObs$.pipe(map(mapFn));
+    }
+    contentWithValueFromData(key, contentFn) {
+        return this.customContentFromData((data) => {
+            const meta = data[key];
+            const content = contentFn === null || contentFn === void 0 ? void 0 : contentFn(meta);
+            return Object.assign({ meta }, content);
+        });
+    }
+    contentWithDisplayValueFromData(key, labelFn = (x) => x === null || x === void 0 ? void 0 : x.toString()) {
+        function sanitizeLabel(label) {
+            return label !== null && label !== void 0 ? label : 'N/A';
+        }
+        return this.contentWithValueFromData(key, (value) => ({ label: sanitizeLabel(labelFn(value)) }));
+    }
+}
+
+class AbstractFormComponentFieldWrappedComponent {
+}
+class FormComponentFieldComponent extends FieldType {
+    constructor() {
+        super();
+    }
+    get config() {
+        return this._config;
+    }
+    ngOnInit() {
+        this._config = {
+            componentClass: this.field.componentClass,
+            init: (instance) => {
+                instance.field = this;
+            }
+        };
+    }
+}
+FormComponentFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: FormComponentFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+FormComponentFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.0", type: FormComponentFieldComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
+    <div class="form-wrapped-component" dbx-injected-content [config]="config"></div>
+  `, isInline: true, components: [{ type: i2.DbxInjectedComponent, selector: "dbx-injected-content, [dbx-injected-content]", inputs: ["config", "template"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: FormComponentFieldComponent, decorators: [{
+            type: Component,
+            args: [{
+                    template: `
+    <div class="form-wrapped-component" dbx-injected-content [config]="config"></div>
+  `
+                }]
+        }], ctorParameters: function () { return []; } });
+
+class DbxFormFormlyComponentFieldModule {
+}
+DbxFormFormlyComponentFieldModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxFormFormlyComponentFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+DbxFormFormlyComponentFieldModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxFormFormlyComponentFieldModule, declarations: [FormComponentFieldComponent], imports: [CommonModule,
+        DbxInjectedComponentModule, i1$4.FormlyModule], exports: [FormComponentFieldComponent] });
+DbxFormFormlyComponentFieldModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxFormFormlyComponentFieldModule, imports: [[
+            CommonModule,
+            DbxInjectedComponentModule,
+            FormlyModule.forChild({
+                types: [
+                    { name: 'component', component: FormComponentFieldComponent }
+                ]
+            })
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxFormFormlyComponentFieldModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        DbxInjectedComponentModule,
+                        FormlyModule.forChild({
+                            types: [
+                                { name: 'component', component: FormComponentFieldComponent }
+                            ]
+                        })
+                    ],
+                    declarations: [
+                        FormComponentFieldComponent
+                    ],
+                    exports: [
+                        FormComponentFieldComponent
+                    ]
+                }]
+        }] });
+
+function componentField({ componentClass }) {
+    return {
+        type: 'component',
+        componentClass
+    };
+}
+
+/**
+ * Used for picking pre-set values using items as the presentation.
+ */
+class AbstractDbxPickableItemFieldDirective extends FieldType {
+    constructor() {
+        super(...arguments);
+        this.inputCtrl = new FormControl('');
+        this._formControlObs = new BehaviorSubject(undefined);
+        this.formControl$ = this._formControlObs.pipe(filterMaybe());
+        this._displayHashMap = new BehaviorSubject(new Map());
+        this.filterInputValue$ = this.inputCtrl.valueChanges.pipe(startWith$1(undefined));
+        this.filterInputValueString$ = this.filterInputValue$.pipe(debounceTime(200), distinctUntilChanged(), shareReplay(1));
+        this.loadResultsDisplayValuesState$ = this.formControl$.pipe(first(), switchMap(() => this.loadValuesFn().pipe(switchMap((x) => this.loadDisplayValuesForFieldValues(x)), startWith$1(beginLoading()))), shareReplay(1));
+        this._formControlValue = this.formControl$.pipe(switchMap(control => control.valueChanges.pipe(startWith$1(control.value), shareReplay(1))));
+        this.loadResultsDisplayValues$ = this.loadResultsDisplayValuesState$.pipe(map(x => { 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));
+        /**
+         * Current values with their display value.
+         */
+        this.displayValuesState$ = combineLatest([this.loadResultsDisplayValues$, this.values$]).pipe(switchMap(([displayValues, currentValues]) => {
+            const displayValuesMap = makeValuesGroupMap(displayValues, (x) => this.hashForValue(x.value));
+            const valuesNotInDisplayMap = [];
+            currentValues.forEach((x) => {
+                var _a;
+                const key = this.hashForValue(x);
+                let 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, {
+                    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]);
+                    }
+                })));
+            }
+            else {
+                return of(successResult(displayValues));
+            }
+        }));
+        /**
+         * 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, {
+            mapValue: (displayValues) => {
+                const valueHashSet = new Set(values.map(x => this.hashForValue(x)));
+                return displayValues.filter(x => !x.isUnknown && valueHashSet.has(x._hash));
+            }
+        })))))), shareReplay(1));
+        this.filteredSearchResults$ = this.filteredSearchResultsState$.pipe(map(x => x === 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)));
+            let items = displayValues.map((x) => ({ display: x, selected: selectedHashValuesSet.has(x._hash) }));
+            if (this.sortItems) {
+                items = this.sortItems(items);
+            }
+            return items;
+        }), shareReplay(1));
+        this.itemsLoadingState$ = this.loadResultsDisplayValues$.pipe(switchMap(x => this.items$.pipe(first(), map(x => successResult(x)), startWith$1(beginLoading()), shareReplay(1))));
+        /**
+         * Context used for managing the loading of items, or when the current results change.
+         */
+        this.context = new LoadingStateContextInstance({ obs: this.itemsLoadingState$, showLoadingOnNoValue: false });
+        this.filterItemsLoadingState$ = this.items$.pipe(map(x => successResult(x)), startWith$1(beginLoading()), shareReplay(1));
+        /**
+         * Context used for searching/filtering.
+         */
+        this.filterResultsContext = new LoadingStateContextInstance({ obs: this.loadResultsDisplayValuesState$, showLoadingOnNoValue: true });
+    }
+    get multiSelect() {
+        var _a;
+        return (_a = this.field.multiSelect) !== null && _a !== void 0 ? _a : true;
+    }
+    get asArrayValue() {
+        var _a;
+        return (_a = this.field.asArrayValue) !== null && _a !== void 0 ? _a : true;
+    }
+    get filterLabel() {
+        return this.field.filterLabel;
+    }
+    get readonly() {
+        var _a;
+        return (_a = this.field.templateOptions) === null || _a === void 0 ? void 0 : _a.readonly;
+    }
+    get required() {
+        var _a;
+        return (_a = this.field.templateOptions) === null || _a === void 0 ? void 0 : _a.required;
+    }
+    get placeholder() {
+        var _a, _b;
+        return (_b = (_a = this.field.templateOptions) === null || _a === void 0 ? void 0 : _a.placeholder) !== null && _b !== void 0 ? _b : '';
+    }
+    get description() {
+        var _a;
+        return (_a = this.field.templateOptions) === null || _a === void 0 ? void 0 : _a.description;
+    }
+    get sortItems() {
+        return this.field.sortItems;
+    }
+    get hashForValue() {
+        var _a;
+        return (_a = this.field.hashForValue) !== null && _a !== void 0 ? _a : ((x) => x);
+    }
+    get displayForValue() {
+        return this.field.displayForValue;
+    }
+    get showFilterInput() {
+        return Boolean(this.field.filterValues);
+    }
+    get filterValuesFn() {
+        var _a;
+        return (_a = this.field.filterValues) !== null && _a !== void 0 ? _a : ((_, x) => of(x.map(y => y.value)));
+    }
+    get skipFilterFnOnEmpty() {
+        var _a;
+        return (_a = this.field.skipFilterFnOnEmpty) !== null && _a !== void 0 ? _a : true;
+    }
+    get _filterValues() {
+        let fn;
+        if (this.skipFilterFnOnEmpty) {
+            fn = (filterText, values) => {
+                let result;
+                if (filterText) {
+                    result = this.filterValuesFn(filterText, values);
+                }
+                else {
+                    result = of(values.map(x => x.value));
+                }
+                return result;
+            };
+        }
+        else {
+            fn = this.filterValuesFn;
+        }
+        return fn;
+    }
+    get showTextFilter() {
+        var _a;
+        return (_a = this.field.showTextFilter) !== null && _a !== void 0 ? _a : Boolean(this.field.filterValues);
+    }
+    get loadValuesFn() {
+        return this.field.loadValues;
+    }
+    get values() {
+        var _a;
+        return (_a = this._getValueOnFormControl(this.formControl.value)) !== null && _a !== void 0 ? _a : [];
+    }
+    get footerConfig() {
+        return this.field.footerConfig;
+    }
+    loadDisplayValuesForValues(values) {
+        return this.loadDisplayValuesForFieldValues(values.map((value) => ({ value })));
+    }
+    loadDisplayValuesForFieldValues(values) {
+        return this.getDisplayValuesForFieldValues(values).pipe(map((displayValues) => ({ loading: false, model: displayValues })), startWith$1({ loading: true }), shareReplay(1));
+    }
+    getDisplayValuesForFieldValues(values) {
+        return this._displayHashMap.pipe(mergeMap$1((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]);
+            if (needsDisplay.length > 0) {
+                // Go get the display value.
+                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 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]); });
+                    // Return display values.
+                    return newDisplayValues;
+                }));
+            }
+            else {
+                // If all display values are hashed return that.
+                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(() => {
+            var _a;
+            (_a = this.filterMatInput) === null || _a === void 0 ? void 0 : _a.focus();
+        });
+    }
+    ngOnDestroy() {
+        this._displayHashMap.complete();
+        this._formControlObs.complete();
+        this.filterResultsContext.destroy();
+    }
+    _getValueOnFormControl(valueOnFormControl) {
+        const value = (valueOnFormControl != null) ? [].concat(valueOnFormControl) : []; // Always return an array.
+        return value;
+    }
+    addValue(value) {
+        this.setValues([...this.values, value]);
+    }
+    removeValue(value) {
+        const hashToFilter = this.hashForValue(value);
+        const values = this.values.filter(x => this.hashForValue(x) !== hashToFilter);
+        this.setValues(values);
+    }
+    setValues(values) {
+        // Use to filter non-unique values.
+        if (this.hashForValue) {
+            values = findUnique(values, this.hashForValue);
+        }
+        if (!this.multiSelect) {
+            values = [values[0]].filter(x => x != null);
+        }
+        this._setValueOnFormControl(values);
+    }
+    // MARK: Internal
+    _setValueOnFormControl(values) {
+        let newValue = values;
+        if (!this.asArrayValue) {
+            newValue = [values[0]].filter(x => x != null)[0];
+        }
+        this.formControl.setValue(newValue);
+        this.formControl.markAsTouched();
+        this.formControl.markAsDirty();
+    }
+}
+AbstractDbxPickableItemFieldDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: AbstractDbxPickableItemFieldDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+AbstractDbxPickableItemFieldDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.0", type: AbstractDbxPickableItemFieldDirective, viewQueries: [{ propertyName: "filterMatInput", first: true, predicate: ["filterMatInput"], descendants: true, static: true }], usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: AbstractDbxPickableItemFieldDirective, decorators: [{
+            type: Directive
+        }], propDecorators: { filterMatInput: [{
+                type: ViewChild,
+                args: ['filterMatInput', { static: true }]
+            }] } });
+
+/**
+ * Used for picking pre-set values using chips as the presentation.
+ */
+class DbxPickableChipFieldComponent extends AbstractDbxPickableItemFieldDirective {
+    itemClicked(item) {
+        if (item.selected) {
+            this.removeValue(item.display.value);
+        }
+        else {
+            this.addValue(item.display.value);
+        }
+    }
+}
+DbxPickableChipFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxPickableChipFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+DbxPickableChipFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.0", type: DbxPickableChipFieldComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<div class=\"dbx-pickable-item-field\">\n  <dbx-loading [context]=\"context\">\n    <ng-container *ngIf=\"showFilterInput\">\n      <ng-container *ngTemplateOutlet=\"filterTemplate\"></ng-container>\n    </ng-container>\n    <div class=\"dbx-pickable-item-field-chips\">\n      <!-- TODO: Add back aria-label  [attr.aria-label]=\"'email ' + emailParticipantsType\" -->\n      <mat-chip-list [selectable]=\"!readonly\" [disabled]=\"readonly\" #chipList>\n        <mat-chip *ngFor=\"let item of items$ | async\" (click)=\"itemClicked(item)\" [selected]=\"item.selected\">\n          <span class=\"s-chip-label\">{{ item.display.label }}</span>\n        </mat-chip>\n      </mat-chip-list>\n      <dbx-injected-content [config]=\"footerConfig\"></dbx-injected-content>\n    </div>\n  </dbx-loading>\n</div>\n\n<!-- Filter Input -->\n<ng-template #filterTemplate>\n  <div class=\"dbx-pickable-item-field-filter\">\n    <mat-form-field class=\"dbx-pickable-item-field-filter-field\" appearance=\"fill\">\n      <mat-label>{{ filterLabel }}</mat-label>\n      <input name=\"filter items\" #filterMatInput=\"matInput\" matInput [placeholder]=\"placeholder\"\n        [formControl]=\"inputCtrl\">\n    </mat-form-field>\n    <div class=\"searchable-field-form-loading\">\n      <dbx-loading [linear]=\"true\" [context]=\"filterResultsContext\"></dbx-loading>\n    </div>\n  </div>\n</ng-template>\n", components: [{ type: i1$1.DbxLoadingComponent, selector: "dbx-loading", inputs: ["show", "text", "mode", "color", "diameter", "linear", "context", "loading", "error"] }, { type: i5$1.MatChipList, selector: "mat-chip-list", inputs: ["errorStateMatcher", "multiple", "compareWith", "value", "required", "placeholder", "disabled", "aria-orientation", "selectable", "tabIndex"], outputs: ["change", "valueChange"], exportAs: ["matChipList"] }, { type: i2.DbxInjectedComponent, selector: "dbx-injected-content, [dbx-injected-content]", inputs: ["config", "template"] }, { type: i4.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5$1.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disableRipple", "tabIndex", "selected", "value", "selectable", "disabled", "removable"], outputs: ["selectionChange", "destroyed", "removed"], exportAs: ["matChip"] }, { type: i4.MatLabel, selector: "mat-label" }, { type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], pipes: { "async": i5.AsyncPipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxPickableChipFieldComponent, decorators: [{
+            type: Component,
+            args: [{ template: "<div class=\"dbx-pickable-item-field\">\n  <dbx-loading [context]=\"context\">\n    <ng-container *ngIf=\"showFilterInput\">\n      <ng-container *ngTemplateOutlet=\"filterTemplate\"></ng-container>\n    </ng-container>\n    <div class=\"dbx-pickable-item-field-chips\">\n      <!-- TODO: Add back aria-label  [attr.aria-label]=\"'email ' + emailParticipantsType\" -->\n      <mat-chip-list [selectable]=\"!readonly\" [disabled]=\"readonly\" #chipList>\n        <mat-chip *ngFor=\"let item of items$ | async\" (click)=\"itemClicked(item)\" [selected]=\"item.selected\">\n          <span class=\"s-chip-label\">{{ item.display.label }}</span>\n        </mat-chip>\n      </mat-chip-list>\n      <dbx-injected-content [config]=\"footerConfig\"></dbx-injected-content>\n    </div>\n  </dbx-loading>\n</div>\n\n<!-- Filter Input -->\n<ng-template #filterTemplate>\n  <div class=\"dbx-pickable-item-field-filter\">\n    <mat-form-field class=\"dbx-pickable-item-field-filter-field\" appearance=\"fill\">\n      <mat-label>{{ filterLabel }}</mat-label>\n      <input name=\"filter items\" #filterMatInput=\"matInput\" matInput [placeholder]=\"placeholder\"\n        [formControl]=\"inputCtrl\">\n    </mat-form-field>\n    <div class=\"searchable-field-form-loading\">\n      <dbx-loading [linear]=\"true\" [context]=\"filterResultsContext\"></dbx-loading>\n    </div>\n  </div>\n</ng-template>\n" }]
+        }] });
+
+/**
+ * Used for picking pre-set values using a selection list as the presentation.
+ */
+class DbxPickableListFieldComponent extends AbstractDbxPickableItemFieldDirective {
+    matSelectionChanged(selection) {
+        const options = selection.source.selectedOptions.selected;
+        const items = options.map(x => {
+            const { value, selected, disabled } = x;
+            return ({ item: value, selected, disabled });
+        });
+        this.setValues(items.map(x => x.item.display.value));
+    }
+}
+DbxPickableListFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxPickableListFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+DbxPickableListFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.0", type: DbxPickableListFieldComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<div class=\"dbx-pickable-item-field\">\n  <dbx-loading [context]=\"context\">\n    <ng-container *ngIf=\"showFilterInput\">\n      <ng-container *ngTemplateOutlet=\"filterTemplate\"></ng-container>\n    </ng-container>\n    <div class=\"dbx-model-list dbx-pickable-item-field-list\">\n      <mat-selection-list [multiple]=\"multiSelect\" (selectionChange)=\"matSelectionChanged($event)\">\n        <mat-list-option *ngFor=\"let item of items$ | async\" [selected]=\"item.selected\" [value]=\"item\">\n          <p>{{ item.display.label }}</p>\n        </mat-list-option>\n      </mat-selection-list>\n      <dbx-injected-content [config]=\"footerConfig\"></dbx-injected-content>\n    </div>\n  </dbx-loading>\n</div>\n\n<!-- Filter Input -->\n<ng-template #filterTemplate>\n  <div class=\"dbx-pickable-item-field-filter\">\n    <mat-form-field class=\"dbx-pickable-item-field-filter-field\" appearance=\"fill\">\n      <mat-label>{{ filterLabel }}</mat-label>\n      <input name=\"filter items\" #filterMatInput=\"matInput\" matInput [placeholder]=\"placeholder\"\n        [formControl]=\"inputCtrl\">\n    </mat-form-field>\n    <div class=\"searchable-field-form-loading\">\n      <dbx-loading [linear]=\"true\" [context]=\"filterResultsContext\"></dbx-loading>\n    </div>\n  </div>\n</ng-template>\n", components: [{ type: i1$1.DbxLoadingComponent, selector: "dbx-loading", inputs: ["show", "text", "mode", "color", "diameter", "linear", "context", "loading", "error"] }, { type: i2$3.MatSelectionList, selector: "mat-selection-list", inputs: ["disableRipple", "tabIndex", "color", "compareWith", "disabled", "multiple"], outputs: ["selectionChange"], exportAs: ["matSelectionList"] }, { type: i2$3.MatListOption, selector: "mat-list-option", inputs: ["disableRipple", "checkboxPosition", "color", "value", "disabled", "selected"], outputs: ["selectedChange"], exportAs: ["matListOption"] }, { type: i2.DbxInjectedComponent, selector: "dbx-injected-content, [dbx-injected-content]", inputs: ["config", "template"] }, { type: i4.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.MatLabel, selector: "mat-label" }, { type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], pipes: { "async": i5.AsyncPipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxPickableListFieldComponent, decorators: [{
+            type: Component,
+            args: [{ template: "<div class=\"dbx-pickable-item-field\">\n  <dbx-loading [context]=\"context\">\n    <ng-container *ngIf=\"showFilterInput\">\n      <ng-container *ngTemplateOutlet=\"filterTemplate\"></ng-container>\n    </ng-container>\n    <div class=\"dbx-model-list dbx-pickable-item-field-list\">\n      <mat-selection-list [multiple]=\"multiSelect\" (selectionChange)=\"matSelectionChanged($event)\">\n        <mat-list-option *ngFor=\"let item of items$ | async\" [selected]=\"item.selected\" [value]=\"item\">\n          <p>{{ item.display.label }}</p>\n        </mat-list-option>\n      </mat-selection-list>\n      <dbx-injected-content [config]=\"footerConfig\"></dbx-injected-content>\n    </div>\n  </dbx-loading>\n</div>\n\n<!-- Filter Input -->\n<ng-template #filterTemplate>\n  <div class=\"dbx-pickable-item-field-filter\">\n    <mat-form-field class=\"dbx-pickable-item-field-filter-field\" appearance=\"fill\">\n      <mat-label>{{ filterLabel }}</mat-label>\n      <input name=\"filter items\" #filterMatInput=\"matInput\" matInput [placeholder]=\"placeholder\"\n        [formControl]=\"inputCtrl\">\n    </mat-form-field>\n    <div class=\"searchable-field-form-loading\">\n      <dbx-loading [linear]=\"true\" [context]=\"filterResultsContext\"></dbx-loading>\n    </div>\n  </div>\n</ng-template>\n" }]
+        }] });
+
+class DbxFormFormlyPickableFieldModule {
+}
+DbxFormFormlyPickableFieldModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxFormFormlyPickableFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+DbxFormFormlyPickableFieldModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxFormFormlyPickableFieldModule, declarations: [DbxPickableChipFieldComponent,
+        DbxPickableListFieldComponent], imports: [CommonModule,
+        DbxTextModule,
+        DbxLoadingModule,
+        DbxButtonModule,
+        FormsModule,
+        MatButtonModule,
+        MatInputModule,
+        MatFormFieldModule,
+        ReactiveFormsModule,
+        MatAutocompleteModule,
+        MatListModule,
+        DbxDatePipeModule,
+        DbxAnchorModule,
+        MatChipsModule,
+        MatIconModule,
+        DbxInjectedComponentModule, i1$4.FormlyModule] });
+DbxFormFormlyPickableFieldModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxFormFormlyPickableFieldModule, imports: [[
+            CommonModule,
+            DbxTextModule,
+            DbxLoadingModule,
+            DbxButtonModule,
+            FormsModule,
+            MatButtonModule,
+            MatInputModule,
+            MatFormFieldModule,
+            ReactiveFormsModule,
+            MatAutocompleteModule,
+            MatListModule,
+            DbxDatePipeModule,
+            DbxAnchorModule,
+            MatChipsModule,
+            MatIconModule,
+            DbxInjectedComponentModule,
+            FormlyModule.forChild({
+                types: [
+                    { name: 'pickablechipfield', component: DbxPickableChipFieldComponent },
+                    { name: 'pickablelistfield', component: DbxPickableListFieldComponent },
+                ]
+            })
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxFormFormlyPickableFieldModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        DbxTextModule,
+                        DbxLoadingModule,
+                        DbxButtonModule,
+                        FormsModule,
+                        MatButtonModule,
+                        MatInputModule,
+                        MatFormFieldModule,
+                        ReactiveFormsModule,
+                        MatAutocompleteModule,
+                        MatListModule,
+                        DbxDatePipeModule,
+                        DbxAnchorModule,
+                        MatChipsModule,
+                        MatIconModule,
+                        DbxInjectedComponentModule,
+                        FormlyModule.forChild({
+                            types: [
+                                { name: 'pickablechipfield', component: DbxPickableChipFieldComponent },
+                                { name: 'pickablelistfield', component: DbxPickableListFieldComponent },
+                            ]
+                        })
+                    ],
+                    declarations: [
+                        DbxPickableChipFieldComponent,
+                        DbxPickableListFieldComponent
+                    ],
+                    exports: []
+                }]
+        }] });
+
+class DbxSearchableFieldAutocompleteItemComponent {
+    ngOnInit() {
+        var _a;
+        this.content.clear();
+        const componentClass = (_a = this.displayValue) === null || _a === void 0 ? void 0 : _a.componentClass;
+        if (componentClass) {
+            const componentRef = this.content.createComponent(componentClass);
+            componentRef.instance.displayValue = this.displayValue;
+        }
+    }
+}
+DbxSearchableFieldAutocompleteItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxSearchableFieldAutocompleteItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+DbxSearchableFieldAutocompleteItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.0", type: DbxSearchableFieldAutocompleteItemComponent, selector: "dbx-searchable-field-autocomplete-item", inputs: { displayValue: "displayValue" }, viewQueries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: `
+    <ng-template #content></ng-template>
+  `, isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxSearchableFieldAutocompleteItemComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'dbx-searchable-field-autocomplete-item',
+                    template: `
+    <ng-template #content></ng-template>
+  `
+                }]
+        }], propDecorators: { content: [{
+                type: ViewChild,
+                args: ['content', { static: true, read: ViewContainerRef }]
+            }], displayValue: [{
+                type: Input
+            }] } });
+// MARK: Default
+class DbxDefaultSearchableFieldDisplayComponent {
+}
+DbxDefaultSearchableFieldDisplayComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxDefaultSearchableFieldDisplayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+DbxDefaultSearchableFieldDisplayComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.0", type: DbxDefaultSearchableFieldDisplayComponent, selector: "dbx-default-searchable-field-display", inputs: { displayValue: "displayValue" }, ngImport: i0, template: `
+    <span class="s-chip-label">{{ displayValue.label }}</span>
+    <span class="s-chip-sublabel" *ngIf="displayValue.sublabel">({{ displayValue.sublabel }})</span>
+  `, isInline: true, directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxDefaultSearchableFieldDisplayComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'dbx-default-searchable-field-display',
+                    template: `
+    <span class="s-chip-label">{{ displayValue.label }}</span>
+    <span class="s-chip-sublabel" *ngIf="displayValue.sublabel">({{ displayValue.sublabel }})</span>
+  `
+                }]
+        }], propDecorators: { displayValue: [{
+                type: Input
+            }] } });
+class DbxDefaultSearchableAnchorFieldDisplayComponent {
+}
+DbxDefaultSearchableAnchorFieldDisplayComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxDefaultSearchableAnchorFieldDisplayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+DbxDefaultSearchableAnchorFieldDisplayComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.0", type: DbxDefaultSearchableAnchorFieldDisplayComponent, selector: "ng-component", inputs: { displayValue: "displayValue" }, ngImport: i0, template: `
+    <dbx-anchor [block]="true" [anchor]="displayValue?.anchor">
+      <dbx-default-searchable-field-display [displayValue]="displayValue"></dbx-default-searchable-field-display>
+    </dbx-anchor>
+  `, isInline: true, components: [{ type: i1$1.DbxAnchorComponent, selector: "dbx-anchor, [dbx-anchor]", inputs: ["block"] }, { type: DbxDefaultSearchableFieldDisplayComponent, selector: "dbx-default-searchable-field-display", inputs: ["displayValue"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxDefaultSearchableAnchorFieldDisplayComponent, decorators: [{
+            type: Component,
+            args: [{
+                    template: `
+    <dbx-anchor [block]="true" [anchor]="displayValue?.anchor">
+      <dbx-default-searchable-field-display [displayValue]="displayValue"></dbx-default-searchable-field-display>
+    </dbx-anchor>
+  `
+                }]
+        }], propDecorators: { displayValue: [{
+                type: Input
+            }] } });
+
+/**
+ * Abstract searchable field that provides a feature for searching for values, and for displaying values using Observables.
+ *
+ * Display values are cached for performance.
+ */
+class AbstractDbxSearchableValueFieldDirective extends FieldType {
+    constructor() {
+        super(...arguments);
+        /**
+         * Whether or not to set/get values as an array.
+         */
+        this.multiSelect = true;
+        this.inputCtrl = new FormControl('');
+        this._formControlObs = new BehaviorSubject(undefined);
+        this.formControl$ = this._formControlObs.pipe(filterMaybe());
+        this._displayHashMap = new BehaviorSubject(new Map());
+        this.inputValue$ = this.inputCtrl.valueChanges.pipe();
+        this.inputValueString$ = this.inputValue$.pipe(debounceTime$1(200), distinctUntilChanged$1());
+        this.searchResultsState$ = this.inputValueString$.pipe(filter$1((text) => Boolean(text || this.searchOnEmptyText) && Boolean(this.search)), 
+        // TODO: Consider caching search text/results.
+        switchMap$1((text) => this.search(text).pipe(switchMap$1((x) => this.loadDisplayValuesForFieldValues(x)), 
+        // Return begin loading to setup the loading state.
+        startWith(beginLoading()))), shareReplay$1(1));
+        this.singleValueSyncSubscription = new SubscriptionObject();
+        this.searchContext = new LoadingStateContextInstance({ obs: this.searchResultsState$, showLoadingOnNoValue: true });
+        this.searchResults$ = this.searchResultsState$.pipe(map$1(x => { var _a; return (_a = x === null || x === void 0 ? void 0 : x.value) !== null && _a !== void 0 ? _a : []; }));
+        this._formControlValue = this.formControl$.pipe(switchMap$1(control => control.valueChanges.pipe(startWith(control.value), shareReplay$1(1))));
+        this.values$ = this._formControlValue.pipe(map$1(convertMaybeToArray), shareReplay$1(1));
+        this.displayValuesState$ = this.values$.pipe(distinctUntilChanged$1(), switchMap$1((values) => this.loadDisplayValuesForValues(values)), shareReplay$1(1));
+        this.displayValues$ = this.displayValuesState$.pipe(map$1(x => { var _a; return (_a = x === null || x === void 0 ? void 0 : x.value) !== null && _a !== void 0 ? _a : []; }));
+    }
+    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));
+    }
+    get label() {
+        var _a;
+        return (_a = this.field.templateOptions) === null || _a === void 0 ? void 0 : _a.label;
+    }
+    get readonly() {
+        var _a;
+        return (_a = this.field.templateOptions) === null || _a === void 0 ? void 0 : _a.readonly;
+    }
+    get searchOnEmptyText() {
+        var _a;
+        return (_a = this.field.searchOnEmptyText) !== null && _a !== void 0 ? _a : false;
+    }
+    get required() {
+        var _a;
+        return (_a = this.field.templateOptions) === null || _a === void 0 ? void 0 : _a.required;
+    }
+    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;
+    }
+    get placeholder() {
+        var _a, _b;
+        return (_b = (_a = this.field.templateOptions) === null || _a === void 0 ? void 0 : _a.placeholder) !== null && _b !== void 0 ? _b : '';
+    }
+    get description() {
+        var _a, _b;
+        return (_a = this.field.description) !== null && _a !== void 0 ? _a : (_b = this.field.templateOptions) === null || _b === void 0 ? void 0 : _b.description;
+    }
+    get hashForValue() {
+        var _a;
+        return (_a = this.field.hashForValue) !== null && _a !== void 0 ? _a : ((x) => x);
+    }
+    get displayForValue() {
+        return this.field.displayForValue;
+    }
+    get useAnchor() {
+        return this.field.useAnchor;
+    }
+    get anchorForValue() {
+        return this.field.anchorForValue;
+    }
+    get componentClass() {
+        return this.field.componentClass;
+    }
+    get search() {
+        return this.field.search;
+    }
+    get values() {
+        var _a;
+        return (_a = this._getValueOnFormControl(this.formControl.value)) !== null && _a !== void 0 ? _a : [];
+    }
+    get allowStringValues() {
+        var _a;
+        return (_a = this.allowStringValues) !== null && _a !== void 0 ? _a : Boolean(this.convertStringValue);
+    }
+    get convertStringValue() {
+        return this.field.convertStringValue;
+    }
+    loadDisplayValuesForValues(values) {
+        return this.loadDisplayValuesForFieldValues(values.map((value) => ({ value })));
+    }
+    loadDisplayValuesForFieldValues(values) {
+        return this.getDisplayValuesForFieldValues(values).pipe(map$1((displayValues) => ({ loading: false, model: displayValues })), startWith({ loading: true }), shareReplay$1(1));
+    }
+    getDisplayValuesForFieldValues(values) {
+        return this._displayHashMap.pipe(mergeMap((displayMap) => {
+            var _a;
+            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 componentClass = (_a = this.componentClass) !== null && _a !== void 0 ? _a : this.defaultComponentClass;
+                const anchorForValue = this.useAnchor && this.anchorForValue;
+                return displayValuesObs.pipe(first$1(), map$1((displayResults) => {
+                    // Assign the default component classes.
+                    displayResults.forEach(x => {
+                        if (!x.componentClass) {
+                            x.componentClass = componentClass;
+                        }
+                        if (!x.anchor && anchorForValue) {
+                            x.anchor = anchorForValue(x);
+                        }
+                    });
+                    // Create a map to re-join values later.
+                    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]); });
+                    // Return display values.
+                    return newDisplayValues;
+                }));
+            }
+            else {
+                // If all display values are hashed return that.
+                return of(hasDisplay.map(x => x[3]));
+            }
+        }));
+    }
+    ngOnInit() {
+        this._formControlObs.next(this.formControl);
+        if (this.field.textInputValidator) {
+            this.inputCtrl.setValidators(this.field.textInputValidator);
+        }
+        if (!this.defaultComponentClass) {
+            if (this.useAnchor) {
+                this.defaultComponentClass = DbxDefaultSearchableAnchorFieldDisplayComponent;
+            }
+            else {
+                this.defaultComponentClass = DbxDefaultSearchableFieldDisplayComponent;
+            }
+        }
+        if (this.multiSelect === false) {
+            this.singleValueSyncSubscription.subscription = this.displayValues$.subscribe((x) => {
+                if (x[0]) {
+                    this._syncSingleValue(x[0]);
+                }
+            });
+        }
+    }
+    ngOnDestroy() {
+        this._displayHashMap.complete();
+        this._formControlObs.complete();
+        this.searchContext.destroy();
+    }
+    /**
+     * Used to sync the input control with the selected value.
+     *
+     * Only used when multiSelect is false.
+     */
+    _syncSingleValue(value) {
+        this.inputCtrl.setValue(value.label);
+    }
+    _addWithTextValue(text) {
+        if (!this.field.allowStringValues) {
+            return;
+        }
+        if (text) {
+            text = (text || '').trim();
+            this.inputCtrl.setValue(text.trim());
+        }
+        // console.log('Add: ', text, this.inputCtrl.valid);
+        if (!this.inputCtrl.valid) {
+            return;
+        }
+        if (text) {
+            const value = (this.convertStringValue) ? this.convertStringValue(text) : text;
+            this.addValue(value);
+        }
+    }
+    addWithDisplayValue(displayValue) {
+        this.addValue(displayValue.value);
+    }
+    removeWithDisplayValue(displayValue) {
+        this.removeValue(displayValue.value);
+    }
+    addValue(value) {
+        this.textInput.nativeElement.value = '';
+        this.inputCtrl.setValue(null);
+        this.setValues([...this.values, value]);
+    }
+    removeValue(value) {
+        let values;
+        if (this.hashForValue) {
+            const hashToFilter = this.hashForValue(value);
+            values = this.values.filter(x => this.hashForValue(x) !== hashToFilter);
+        }
+        else {
+            values = this.values.filter(x => x !== value);
+        }
+        this.setValues(values);
+    }
+    setValues(values) {
+        // Use to filter non-unique values.
+        if (this.hashForValue) {
+            values = findUnique(values, this.hashForValue);
+        }
+        this._setValueOnFormControl(values);
+    }
+    // MARK: Internal
+    _getValueOnFormControl(valueOnFormControl) {
+        const value = (valueOnFormControl != null) ? [].concat(valueOnFormControl) : []; // Always return an array.
+        return value;
+    }
+    _setValueOnFormControl(values) {
+        const value = (this.multiSelect) ? values : values === null || values === void 0 ? void 0 : values[0];
+        this.formControl.setValue(value);
+        this.formControl.markAsDirty();
+        this.formControl.markAsTouched();
+    }
+}
+AbstractDbxSearchableValueFieldDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: AbstractDbxSearchableValueFieldDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+AbstractDbxSearchableValueFieldDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.0", type: AbstractDbxSearchableValueFieldDirective, viewQueries: [{ propertyName: "textInput", first: true, predicate: ["textInput"], descendants: true }], usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: AbstractDbxSearchableValueFieldDirective, decorators: [{
+            type: Directive
+        }], propDecorators: { textInput: [{
+                type: ViewChild,
+                args: ['textInput']
+            }] } });
+
+class DbxSearchableChipFieldComponent extends AbstractDbxSearchableValueFieldDirective {
+    constructor() {
+        super(...arguments);
+        this.separatorKeysCodes = [ENTER, COMMA];
+    }
+    selected(event) {
+        this.addWithDisplayValue(event.option.value);
+    }
+    tabPressedOnInput(event) {
+        var _a;
+        if (((_a = event === null || event === void 0 ? void 0 : event.key) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === 'tab') {
+            const value = this.inputCtrl.value;
+            if ((value || '').trim()) {
+                this._addWithTextValue(value);
+                event.preventDefault();
+                event.stopImmediatePropagation();
+                return false;
+            }
+        }
+        return true;
+    }
+    addChip(event) {
+        var _a;
+        const text = (_a = event.value) !== null && _a !== void 0 ? _a : this.inputCtrl.value;
+        return this._addWithTextValue(text);
+    }
+}
+DbxSearchableChipFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxSearchableChipFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+DbxSearchableChipFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.0", type: DbxSearchableChipFieldComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<div class=\"dbx-searchable-field\">\n  <!-- Autocomplete -->\n  <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"selected($event)\">\n    <mat-option *ngFor=\"let displayValue of (searchResults$ | async)\" [value]=\"displayValue\">\n      <dbx-searchable-field-autocomplete-item [displayValue]=\"displayValue\">\n      </dbx-searchable-field-autocomplete-item>\n    </mat-option>\n  </mat-autocomplete>\n  <!-- Template -->\n  <ng-template #content>\n    <mat-form-field class=\"dbx-searchable-field-form-field\">\n      <mat-label>{{ label }}</mat-label>\n      <!-- TODO: Add back aria-label  [attr.aria-label]=\"'email ' + emailParticipantsType\" -->\n      <mat-chip-list [required]=\"required\" [disabled]=\"readonly\" #chipList>\n        <mat-chip *ngFor=\"let displayValue of displayValues$ | async\" [removable]=\"true\"\n          (removed)=\"removeWithDisplayValue(displayValue)\">\n          <span class=\"s-chip-label\">{{ displayValue.label }}</span>\n          <span class=\"s-chip-sublabel\" *ngIf=\"displayValue.sublabel\">({{ displayValue.sublabel }})</span>\n          <mat-icon *ngIf=\"!readonly\" matChipRemove>cancel</mat-icon>\n        </mat-chip>\n        <input #textInput [name]=\"name\" [placeholder]=\"placeholder\" [formControl]=\"inputCtrl\" [matAutocomplete]=\"auto\"\n          autocomplete=\"{{ autocomplete }}\" [matChipInputFor]=\"chipList\" (keydown)=\"tabPressedOnInput($event)\"\n          [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\" (matChipInputTokenEnd)=\"addChip($event)\">\n      </mat-chip-list>\n      <mat-hint *ngIf=\"description\">{{ description }}</mat-hint>\n    </mat-form-field>\n    <div class=\"searchable-field-form-loading\">\n      <dbx-loading [linear]=\"true\" [context]=\"searchContext\"></dbx-loading>\n    </div>\n  </ng-template>\n  <!-- View -->\n  <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n</div>\n", components: [{ type: i1$5.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { type: i2$2.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { type: DbxSearchableFieldAutocompleteItemComponent, selector: "dbx-searchable-field-autocomplete-item", inputs: ["displayValue"] }, { type: i4.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i5$1.MatChipList, selector: "mat-chip-list", inputs: ["errorStateMatcher", "multiple", "compareWith", "value", "required", "placeholder", "disabled", "aria-orientation", "selectable", "tabIndex"], outputs: ["change", "valueChange"], exportAs: ["matChipList"] }, { type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i1$1.DbxLoadingComponent, selector: "dbx-loading", inputs: ["show", "text", "mode", "color", "diameter", "linear", "context", "loading", "error"] }], directives: [{ type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.MatLabel, selector: "mat-label" }, { type: i5$1.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disableRipple", "tabIndex", "selected", "value", "selectable", "disabled", "removable"], outputs: ["selectionChange", "destroyed", "removed"], exportAs: ["matChip"] }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5$1.MatChipRemove, selector: "[matChipRemove]" }, { type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1$5.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { type: i5$1.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i4.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "async": i5.AsyncPipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxSearchableChipFieldComponent, decorators: [{
+            type: Component,
+            args: [{ template: "<div class=\"dbx-searchable-field\">\n  <!-- Autocomplete -->\n  <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"selected($event)\">\n    <mat-option *ngFor=\"let displayValue of (searchResults$ | async)\" [value]=\"displayValue\">\n      <dbx-searchable-field-autocomplete-item [displayValue]=\"displayValue\">\n      </dbx-searchable-field-autocomplete-item>\n    </mat-option>\n  </mat-autocomplete>\n  <!-- Template -->\n  <ng-template #content>\n    <mat-form-field class=\"dbx-searchable-field-form-field\">\n      <mat-label>{{ label }}</mat-label>\n      <!-- TODO: Add back aria-label  [attr.aria-label]=\"'email ' + emailParticipantsType\" -->\n      <mat-chip-list [required]=\"required\" [disabled]=\"readonly\" #chipList>\n        <mat-chip *ngFor=\"let displayValue of displayValues$ | async\" [removable]=\"true\"\n          (removed)=\"removeWithDisplayValue(displayValue)\">\n          <span class=\"s-chip-label\">{{ displayValue.label }}</span>\n          <span class=\"s-chip-sublabel\" *ngIf=\"displayValue.sublabel\">({{ displayValue.sublabel }})</span>\n          <mat-icon *ngIf=\"!readonly\" matChipRemove>cancel</mat-icon>\n        </mat-chip>\n        <input #textInput [name]=\"name\" [placeholder]=\"placeholder\" [formControl]=\"inputCtrl\" [matAutocomplete]=\"auto\"\n          autocomplete=\"{{ autocomplete }}\" [matChipInputFor]=\"chipList\" (keydown)=\"tabPressedOnInput($event)\"\n          [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\" (matChipInputTokenEnd)=\"addChip($event)\">\n      </mat-chip-list>\n      <mat-hint *ngIf=\"description\">{{ description }}</mat-hint>\n    </mat-form-field>\n    <div class=\"searchable-field-form-loading\">\n      <dbx-loading [linear]=\"true\" [context]=\"searchContext\"></dbx-loading>\n    </div>\n  </ng-template>\n  <!-- View -->\n  <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n</div>\n" }]
+        }] });
+
+function makeMetaFilterSearchableFieldValueDisplayFn(loadMetaForValues, makeDisplayForValues) {
+    return (values) => {
+        const { included: loaded, excluded: needLoading } = separateValues(values, (x) => Boolean(x.meta));
+        let allValues;
+        if (needLoading.length > 0) {
+            const loadingResult = loadMetaForValues(needLoading);
+            allValues = loadingResult.pipe(map((result) => {
+                const resultMap = arrayToMap(result, (x) => x.value);
+                const mergedWithLoad = needLoading.map((x) => {
+                    var _a;
+                    const id = x.value;
+                    const loadedItem = resultMap.get(id);
+                    const anchor = (_a = x.anchor) !== null && _a !== void 0 ? _a : loadedItem === null || loadedItem === void 0 ? void 0 : loadedItem.anchor;
+                    const meta = loadedItem === null || loadedItem === void 0 ? void 0 : loadedItem.meta;
+                    return Object.assign(Object.assign({}, x), { anchor,
+                        meta });
+                }).filter(x => !x.meta);
+                return mergedWithLoad;
+            }), map((result) => [...loaded, ...result]));
+        }
+        else {
+            allValues = of(loaded);
+        }
+        return allValues.pipe(map((x) => makeDisplayForValues(x)));
+    };
+}
+function searchableChipField(config) {
+    return formlyField(Object.assign({ type: 'searchablechipfield' }, config));
+}
+function searchableTextField(config) {
+    return formlyField(Object.assign({ type: 'searchabletextfield' }, config));
+}
+
+/**
+ * Display component for selecting a single item/value.
+ */
+class DbxSearchableTextFieldComponent extends AbstractDbxSearchableValueFieldDirective {
+    constructor() {
+        super(...arguments);
+        this.multiSelect = false;
+    }
+    selected(event) {
+        const e = event;
+        this.addWithDisplayValue(e.option.value);
+    }
+}
+DbxSearchableTextFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxSearchableTextFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+DbxSearchableTextFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.0", type: DbxSearchableTextFieldComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<div class=\"dbx-searchable-text-field\">\n  <!-- Autocomplete -->\n  <mat-autocomplete #auto (optionSelected)=\"selected($event)\">\n    <mat-option *ngFor=\"let displayValue of (searchResults$ | async)\" [value]=\"displayValue\">\n      <dbx-searchable-field-autocomplete-item [displayValue]=\"displayValue\">\n      </dbx-searchable-field-autocomplete-item>\n    </mat-option>\n  </mat-autocomplete>\n  <!-- Template -->\n  <ng-template #content>\n    <mat-form-field class=\"dbx-searchable-field-form-field\">\n      <mat-label>{{ label }}</mat-label>\n      <input type=\"search\" [name]=\"name\" matInput #textInput [placeholder]=\"placeholder\" [formControl]=\"inputCtrl\" [matAutocomplete]=\"auto\"\n        autocomplete=\"{{ autocomplete }}\">\n      <mat-hint *ngIf=\"description\">{{ description }}</mat-hint>\n    </mat-form-field>\n    <div class=\"searchable-field-form-loading\">\n      <dbx-loading [linear]=\"true\" [context]=\"searchContext\"></dbx-loading>\n    </div>\n  </ng-template>\n  <!-- View -->\n  <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n</div>\n", components: [{ type: i1$5.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { type: i2$2.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { type: DbxSearchableFieldAutocompleteItemComponent, selector: "dbx-searchable-field-autocomplete-item", inputs: ["displayValue"] }, { type: i4.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i1$1.DbxLoadingComponent, selector: "dbx-loading", inputs: ["show", "text", "mode", "color", "diameter", "linear", "context", "loading", "error"] }], directives: [{ type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.MatLabel, selector: "mat-label" }, { type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1$5.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "async": i5.AsyncPipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxSearchableTextFieldComponent, decorators: [{
+            type: Component,
+            args: [{ template: "<div class=\"dbx-searchable-text-field\">\n  <!-- Autocomplete -->\n  <mat-autocomplete #auto (optionSelected)=\"selected($event)\">\n    <mat-option *ngFor=\"let displayValue of (searchResults$ | async)\" [value]=\"displayValue\">\n      <dbx-searchable-field-autocomplete-item [displayValue]=\"displayValue\">\n      </dbx-searchable-field-autocomplete-item>\n    </mat-option>\n  </mat-autocomplete>\n  <!-- Template -->\n  <ng-template #content>\n    <mat-form-field class=\"dbx-searchable-field-form-field\">\n      <mat-label>{{ label }}</mat-label>\n      <input type=\"search\" [name]=\"name\" matInput #textInput [placeholder]=\"placeholder\" [formControl]=\"inputCtrl\" [matAutocomplete]=\"auto\"\n        autocomplete=\"{{ autocomplete }}\">\n      <mat-hint *ngIf=\"description\">{{ description }}</mat-hint>\n    </mat-form-field>\n    <div class=\"searchable-field-form-loading\">\n      <dbx-loading [linear]=\"true\" [context]=\"searchContext\"></dbx-loading>\n    </div>\n  </ng-template>\n  <!-- View -->\n  <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n</div>\n" }]
+        }] });
+
+class DbxFormFormlySearchableFieldModule {
+}
+DbxFormFormlySearchableFieldModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxFormFormlySearchableFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+DbxFormFormlySearchableFieldModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxFormFormlySearchableFieldModule, declarations: [DbxSearchableChipFieldComponent,
+        DbxSearchableTextFieldComponent,
+        DbxSearchableFieldAutocompleteItemComponent,
+        DbxDefaultSearchableFieldDisplayComponent,
+        DbxDefaultSearchableAnchorFieldDisplayComponent], imports: [CommonModule,
+        DbxTextModule,
+        DbxLoadingModule,
+        DbxButtonModule,
+        FormsModule,
+        MatButtonModule,
+        MatInputModule,
+        MatFormFieldModule,
+        ReactiveFormsModule,
+        MatAutocompleteModule,
+        MatListModule,
+        DbxDatePipeModule,
+        DbxAnchorModule,
+        MatChipsModule,
+        MatIconModule,
+        DbxInjectedComponentModule, i1$4.FormlyModule], exports: [DbxSearchableChipFieldComponent,
+        DbxSearchableTextFieldComponent] });
+DbxFormFormlySearchableFieldModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxFormFormlySearchableFieldModule, imports: [[
+            CommonModule,
+            DbxTextModule,
+            DbxLoadingModule,
+            DbxButtonModule,
+            FormsModule,
+            MatButtonModule,
+            MatInputModule,
+            MatFormFieldModule,
+            ReactiveFormsModule,
+            MatAutocompleteModule,
+            MatListModule,
+            DbxDatePipeModule,
+            DbxAnchorModule,
+            MatChipsModule,
+            MatIconModule,
+            DbxInjectedComponentModule,
+            FormlyModule.forChild({
+                types: [
+                    { name: 'searchablechipfield', component: DbxSearchableChipFieldComponent },
+                    { name: 'searchabletextfield', component: DbxSearchableTextFieldComponent }
+                ]
+            })
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxFormFormlySearchableFieldModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        DbxTextModule,
+                        DbxLoadingModule,
+                        DbxButtonModule,
+                        FormsModule,
+                        MatButtonModule,
+                        MatInputModule,
+                        MatFormFieldModule,
+                        ReactiveFormsModule,
+                        MatAutocompleteModule,
+                        MatListModule,
+                        DbxDatePipeModule,
+                        DbxAnchorModule,
+                        MatChipsModule,
+                        MatIconModule,
+                        DbxInjectedComponentModule,
+                        FormlyModule.forChild({
+                            types: [
+                                { name: 'searchablechipfield', component: DbxSearchableChipFieldComponent },
+                                { name: 'searchabletextfield', component: DbxSearchableTextFieldComponent }
+                            ]
+                        })
+                    ],
+                    declarations: [
+                        DbxSearchableChipFieldComponent,
+                        DbxSearchableTextFieldComponent,
+                        DbxSearchableFieldAutocompleteItemComponent,
+                        DbxDefaultSearchableFieldDisplayComponent,
+                        DbxDefaultSearchableAnchorFieldDisplayComponent
+                    ],
+                    exports: [
+                        DbxSearchableChipFieldComponent,
+                        DbxSearchableTextFieldComponent
+                    ]
+                }]
+        }] });
+
+function chipTextField(config) {
+    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 }))));
+        } }));
+}
+
+class DbxFormRepeatTypeComponent extends FieldArrayType {
+    get repeatSection() {
+        var _a;
+        return (_a = this.to.repeatSection) !== null && _a !== void 0 ? _a : {};
+    }
+    get itemLabel() {
+        var _a;
+        return (_a = this.repeatSection.itemLabel) !== null && _a !== void 0 ? _a : '#';
+    }
+    get addText() {
+        var _a;
+        return (_a = this.repeatSection.addText) !== null && _a !== void 0 ? _a : 'Add';
+    }
+    get removeText() {
+        var _a;
+        return (_a = this.repeatSection.removeText) !== null && _a !== void 0 ? _a : 'Remove';
+    }
+    get max() {
+        var _a;
+        return (_a = this.field.templateOptions) === null || _a === void 0 ? void 0 : _a.maxLength;
+    }
+    get count() {
+        var _a, _b;
+        return (_b = (_a = this.field.fieldGroup) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0;
+    }
+    get canAdd() {
+        const max = this.max;
+        if (max == null) {
+            return true;
+        }
+        else {
+            return (this.count < max);
+        }
+    }
+}
+DbxFormRepeatTypeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxFormRepeatTypeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+DbxFormRepeatTypeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.0", type: DbxFormRepeatTypeComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
+    <div class="form-repeat-section">
+      <!-- Fields -->
+      <div class="form-repeat-section-fields">
+        <ng-container *ngFor="let field of field.fieldGroup; let i = index; let last = last;">
+          <div class="form-repeat-section-field">
+            <div>
+              <h4><span>{{ itemLabel }}</span><span>{{ i + 1 }}</span></h4>
+              <dbx-button-spacer></dbx-button-spacer>
+              <button mat-button color="warn" (click)="remove(i)">{{ removeText }}</button>
+            </div>
+            <formly-field [field]="field"></formly-field>
+          </div>
+          <mat-divider [inset]="true" *ngIf="!last"></mat-divider>
+        </ng-container>
+      </div>
+      <!-- Add Button -->
+      <div class="form-repeat-section-footer">
+        <button *ngIf="canAdd" mat-button (click)="add()">{{ addText }}</button>
+      </div>
+    </div>
+  `, isInline: true, components: [{ type: i1$1.DbxButtonSpacerComponent, selector: "dbx-button-spacer" }, { type: i1$4.FormlyField, selector: "formly-field", inputs: ["field"] }, { type: i3$2.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }], directives: [{ type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxFormRepeatTypeComponent, decorators: [{
+            type: Component,
+            args: [{
+                    template: `
+    <div class="form-repeat-section">
+      <!-- Fields -->
+      <div class="form-repeat-section-fields">
+        <ng-container *ngFor="let field of field.fieldGroup; let i = index; let last = last;">
+          <div class="form-repeat-section-field">
+            <div>
+              <h4><span>{{ itemLabel }}</span><span>{{ i + 1 }}</span></h4>
+              <dbx-button-spacer></dbx-button-spacer>
+              <button mat-button color="warn" (click)="remove(i)">{{ removeText }}</button>
+            </div>
+            <formly-field [field]="field"></formly-field>
+          </div>
+          <mat-divider [inset]="true" *ngIf="!last"></mat-divider>
+        </ng-container>
+      </div>
+      <!-- Add Button -->
+      <div class="form-repeat-section-footer">
+        <button *ngIf="canAdd" mat-button (click)="add()">{{ addText }}</button>
+      </div>
+    </div>
+  `
+                }]
+        }] });
+
+class DbxFormFormlyArrayFieldModule {
+}
+DbxFormFormlyArrayFieldModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxFormFormlyArrayFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+DbxFormFormlyArrayFieldModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxFormFormlyArrayFieldModule, declarations: [DbxFormRepeatTypeComponent], imports: [CommonModule,
+        MatFormFieldModule,
+        ReactiveFormsModule,
+        MatDividerModule,
+        DbxButtonModule, i1$4.FormlyModule] });
+DbxFormFormlyArrayFieldModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxFormFormlyArrayFieldModule, imports: [[
+            CommonModule,
+            MatFormFieldModule,
+            ReactiveFormsModule,
+            MatDividerModule,
+            DbxButtonModule,
+            FormlyModule.forChild({
+                types: [
+                    { name: 'repeat', component: DbxFormRepeatTypeComponent }
+                ]
+            })
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxFormFormlyArrayFieldModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        MatFormFieldModule,
+                        ReactiveFormsModule,
+                        MatDividerModule,
+                        DbxButtonModule,
+                        FormlyModule.forChild({
+                            types: [
+                                { name: 'repeat', component: DbxFormRepeatTypeComponent }
+                            ]
+                        })
+                    ],
+                    declarations: [
+                        DbxFormRepeatTypeComponent
+                    ],
+                    exports: []
+                }]
+        }] });
+
+class DbxFormFormlyBooleanFieldModule {
+}
+DbxFormFormlyBooleanFieldModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxFormFormlyBooleanFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+DbxFormFormlyBooleanFieldModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxFormFormlyBooleanFieldModule });
+DbxFormFormlyBooleanFieldModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxFormFormlyBooleanFieldModule, imports: [[]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxFormFormlyBooleanFieldModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [],
+                    declarations: [],
+                    exports: []
+                }]
+        }] });
+
+function toggleField({ key, label, description, defaultValue, required, readonly }) {
+    return formlyField({
+        key,
+        type: 'toggle',
+        wrappers: ['autotouch', 'form-field'],
+        defaultValue: defaultValue !== null && defaultValue !== void 0 ? defaultValue : false,
+        templateOptions: {
+            label,
+            description,
+            required,
+            readonly
+        }
+    });
+}
+function checkboxField({ key, label = '', placeholder = '', defaultValue, required, readonly, autocomplete }) {
+    return {
+        key,
+        type: 'checkbox',
+        defaultValue,
+        templateOptions: {
+            label,
+            placeholder,
+            required,
+            readonly,
+            autocomplete
+        },
+    };
+}
+/*
+export function acceptTermsField({ key = 'accept', label = 'Accept Terms', description = 'In order to proceed, please accept terms', required = true }
+  : Partial<FieldConfigWithDescription>): FormlyFieldConfig {
+  return {
+    key,
+    type: 'checkbox',
+    templateOptions: {
+      label,
+      description,
+      pattern: 'true',
+      required
+    },
+    validation: {
+      messages: {
+        pattern: 'Please accept the terms',
+      },
+    },
+  } as FormlyFieldConfig;
+}
+*/
+
+var DateTimeFieldTimeMode;
+(function (DateTimeFieldTimeMode) {
+    /**
+     * Time is required.
+     */
+    DateTimeFieldTimeMode["REQUIRED"] = "required";
+    /**
+     * Time is optional.
+     */
+    DateTimeFieldTimeMode["OPTIONAL"] = "optional";
+    /**
+     * Time is permenantly off.
+     */
+    DateTimeFieldTimeMode["NONE"] = "none";
+})(DateTimeFieldTimeMode || (DateTimeFieldTimeMode = {}));
+class DbxDateTimeFieldComponent extends FieldType {
+    constructor(cdRef) {
+        super();
+        this.cdRef = cdRef;
+        this._sub = new SubscriptionObject();
+        this._valueSub = new SubscriptionObject();
+        this._fullDayControlObs = new BehaviorSubject(undefined);
+        this.fullDayControl$ = this._fullDayControlObs.pipe(filterMaybe());
+        this._offset = new BehaviorSubject(0);
+        this._formControlObs = new BehaviorSubject(undefined);
+        this.formControl$ = this._formControlObs.pipe(filterMaybe());
+        this._updateTime = new Subject();
+        this.value$ = this.formControl$.pipe(switchMap(control => control.valueChanges.pipe(startWith$1(control.value))), distinctUntilChanged((a, b) => isSameMinute(a, b)), shareReplay(1));
+        /**
+         * Used to trigger/display visual updates (specifically on timeDistance, etc.).
+         */
+        this.displayValue$ = interval(10 * 1000).pipe(startWith$1(0), map(_ => new Date().getMinutes()), distinctUntilChanged(), tap((_) => this.cdRef.markForCheck()), switchMap(_ => this.value$), shareReplay(1));
+        this.timeString$ = this.value$.pipe(filter(x => Boolean(x)), map((x) => {
+            const timezone = guessCurrentTimezone();
+            const timeString = toReadableTimeString(x, timezone);
+            return timeString;
+        }));
+        this.timeInputCtrl = new FormControl('', {
+            validators: [
+                Validators.pattern(/^([0-9]|(0[0-9])|(1[0-9])|(2[0-3]))(:)?([0-5][0-9])?(\s)?([apAP][Mm])?(\\s)*$/)
+            ]
+        });
+        this._date = new BehaviorSubject(new Date());
+        this._config = new BehaviorSubject(undefined);
+        this.fullDay$ = this.fullDayControl$.pipe(switchMap(control => control.valueChanges.pipe(startWith$1(control.value))));
+        this.showTimeInput$ = this.fullDay$.pipe(map(x => !x && this.timeMode !== DateTimeFieldTimeMode.NONE));
+        this.showAddTime$ = this.showTimeInput$.pipe(map(x => !x && this.timeMode === DateTimeFieldTimeMode.OPTIONAL), shareReplay(1));
+        this.date$ = this._date.pipe(distinctUntilChanged((a, b) => isSameDay(a, b)));
+        this.dateValue$ = merge(this.value$.pipe(startWith$1(undefined)), this.date$).pipe(filterMaybe(), map((x) => startOfDay(x)), distinctUntilChanged((a, b) => isSameDay(a, b)), shareReplay(1));
+        this.timeInput$ = this._updateTime.pipe(debounceTime(5), map(x => this.timeInputCtrl.value), distinctUntilChanged());
+        this.config$ = this._config.pipe(switchMapMaybeObs(), shareReplay(1));
+        this.rawDateTime$ = combineLatest([
+            this.dateValue$.pipe(filterMaybe()),
+            this.timeInput$.pipe(startWith$1(null)),
+            this.fullDay$
+        ]).pipe(map(([date, timeString, fullDay]) => {
+            let result;
+            if (fullDay) {
+                if (this.field.fullDayInUTC) {
+                    result = utcDayForDate(date);
+                }
+                else {
+                    result = startOfDay(date);
+                }
+            }
+            else if (timeString) {
+                result = readableTimeStringToDate(timeString, {
+                    date,
+                    useSystemTimezone: true
+                });
+            }
+            return result;
+        }), filterMaybe(), distinctUntilChanged((a, b) => isSameMinute(a, b)), shareReplay(1));
+        this.timeOutput$ = combineLatest([
+            this.rawDateTime$,
+            this._offset,
+            this.config$.pipe(distinctUntilChanged()),
+        ]).pipe(throttleTime(10, undefined, { leading: false, trailing: true }), distinctUntilChanged((current, next) => current[0] === next[0] && next[1] === 0), tap(([_, stepsOffset]) => (stepsOffset) ? this._offset.next(0) : 0), map(([date, stepsOffset, config]) => {
+            const instance = new DateTimeMinuteInstance(Object.assign(Object.assign({ date }, config), { roundDownToMinute: true }));
+            date = instance.limit(date);
+            const minutes = stepsOffset * 5;
+            date = addMinutes(date, minutes);
+            return date;
+        }), distinctUntilChanged((a, b) => a && b && isSameMinute(a, b)));
+    }
+    get timeOnly() {
+        return this.field.timeOnly;
+    }
+    get showDateInput() {
+        return !this.timeOnly;
+    }
+    get timeMode() {
+        var _a;
+        return (this.timeOnly) ? DateTimeFieldTimeMode.REQUIRED : ((_a = this.field.timeMode) !== null && _a !== void 0 ? _a : DateTimeFieldTimeMode.REQUIRED);
+    }
+    get description() {
+        var _a;
+        return (_a = this.field.templateOptions) === null || _a === void 0 ? void 0 : _a.description;
+    }
+    ngOnInit() {
+        var _a, _b;
+        this._formControlObs.next(this.formControl);
+        this._config.next((_b = (_a = this.field).getConfigObs) === null || _b === void 0 ? void 0 : _b.call(_a));
+        this._sub.subscription = this.timeOutput$.subscribe((value) => {
+            this.formControl.setValue(value);
+            this.formControl.markAsDirty();
+            this.formControl.markAsTouched();
+        });
+        this._valueSub.subscription = this.timeString$.subscribe((x) => {
+            this.timeInputCtrl.setValue(x);
+        });
+        const isFullDayField = this.field.fullDayFieldName;
+        let fullDayFieldCtrl;
+        if (isFullDayField) {
+            fullDayFieldCtrl = this.form.get(isFullDayField);
+        }
+        if (!fullDayFieldCtrl) {
+            this._fullDayInputCtrl = new FormControl(true);
+            // Set the control in the form too if the name is defined.
+            if (isFullDayField) {
+                this.form.addControl(isFullDayField, this._fullDayInputCtrl);
+            }
+            fullDayFieldCtrl = this._fullDayInputCtrl;
+        }
+        this._fullDayControlObs.next(fullDayFieldCtrl);
+        switch (this.field.timeMode) {
+            case DateTimeFieldTimeMode.OPTIONAL:
+                break;
+            case DateTimeFieldTimeMode.NONE:
+                this.removeTime();
+                break;
+            case DateTimeFieldTimeMode.REQUIRED:
+                this.addTime();
+                break;
+        }
+    }
+    ngOnDestroy() {
+        this._formControlObs.complete();
+        this._date.complete();
+        this._updateTime.complete();
+        this._config.complete();
+        this._sub.destroy();
+        this._valueSub.destroy();
+    }
+    datePicked(event) {
+        const date = event.value;
+        if (date) {
+            this._date.next(date);
+            this._updateTime.next();
+        }
+    }
+    setTime(time) {
+        this.timeInputCtrl.setValue(time);
+        this._offset.next(0);
+        this._updateTime.next();
+    }
+    keydownOnInput(event) {
+        var _a;
+        let direction = 0;
+        switch ((_a = event.key) === null || _a === void 0 ? void 0 : _a.toLowerCase()) {
+            case 'arrowup':
+                direction = 1;
+                break;
+            case 'arrowdown':
+                direction = -1;
+                break;
+        }
+        let offset = 1;
+        if (event.altKey && event.shiftKey) {
+            offset = 300;
+        }
+        else if (event.altKey) {
+            offset = 60;
+        }
+        else if (event.shiftKey) {
+            offset = 5;
+        }
+        if (direction !== 0) {
+            this._offset.next(this._offset.value + (offset * direction));
+            this._updateTime.next();
+        }
+    }
+    focusTime() {
+    }
+    focusOutTime() {
+        this._updateTime.next();
+    }
+    addTime() {
+        this.setFullDay(false);
+    }
+    removeTime() {
+        this.setFullDay(true);
+    }
+    setFullDay(fullDay) {
+        this.fullDayControl$.pipe(first()).subscribe((x) => {
+            x.setValue(fullDay);
+        });
+    }
+}
+DbxDateTimeFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxDateTimeFieldComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+DbxDateTimeFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.0", type: DbxDateTimeFieldComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<div class=\"dbx-datetime-field\" fxLayout=\"row wrap\" fxLayout.xs=\"column wrap\" fxLayoutAlign=\"space-evenly stretch\">\n  <!-- Date -->\n  <div class=\"dbx-datetime-row\" fxFlex.lt-sm=\"100\" fxFlex=\"50\" *ngIf=\"showDateInput\">\n    <ng-container *ngTemplateOutlet=\"dateInputTemplate\"></ng-container>\n  </div>\n  <!-- Time -->\n  <div class=\"dbx-datetime-row\" fxFlex.lt-sm=\"100\" [fxFlex]=\"showDateInput ? 50 : 100\">\n    <ng-container *ngIf=\"showTimeInput$ | async\">\n      <ng-container *ngTemplateOutlet=\"timeMenuAndInputTemplate\"></ng-container>\n    </ng-container>\n    <div class=\"add-time-button-wrapper\" *ngIf=\"showAddTime$ | async\">\n      <button mat-button class=\"add-time-button\" (click)=\"addTime()\">\n        <mat-icon>timer</mat-icon> Add Time\n      </button>\n    </div>\n  </div>\n  <div class=\"dbx-datetime-row dbx-datetime-hint-row\" fxFlex=\"100\">\n    <div class=\"dbx-hint\" [ngSwitch]=\"fullDay$ | async\">\n      <small *ngSwitchCase=\"true\"><b class=\"dbx-ok\">All Day</b> {{ dateValue$ | async | date:'fullDate' }}\n        ({{ dateValue$ | async | dateDistance }})</small>\n      <small *ngSwitchCase=\"false\">\n        <ng-container *ngIf=\"value$ | async\"><b class=\"dbx-ok\">At</b> {{ displayValue$ | async | date:'medium' }}\n          ({{ displayValue$ | async | timeDistance }})</ng-container>\n      </small>\n    </div>\n    <div class=\"dbx-small dbx-label\" *ngIf=\"description\">\n      {{ description }}\n    </div>\n  </div>\n</div>\n\n<!-- Date Input Template -->\n<ng-template #dateInputTemplate>\n  <button mat-icon-button (click)=\"picker.open()\">\n    <mat-icon>calendar_today</mat-icon>\n  </button>\n  <mat-form-field class=\"dbx-datetime-row-field\">\n    <mat-label>Date</mat-label>\n    <input matInput [matDatepicker]=\"picker\" (dateChange)=\"datePicked($event)\" [value]=\"dateValue$ | async\">\n    <mat-datepicker #picker></mat-datepicker>\n  </mat-form-field>\n</ng-template>\n\n<!-- Time Menu/Input Template -->\n<ng-template #timeMenuAndInputTemplate>\n  <button mat-icon-button [matMenuTriggerFor]=\"timemenu\" aria-label=\"opens the time menu\">\n    <mat-icon>timer</mat-icon>\n  </button>\n  <mat-menu #timemenu=\"matMenu\">\n    <ng-container *ngIf=\"timeMode === 'optional'\">\n      <button mat-menu-item (click)=\"removeTime()\">\n        <span>Remove Time</span>\n      </button>\n      <mat-divider></mat-divider>\n    </ng-container>\n    <button mat-menu-item (click)=\"setTime('12:00AM')\">\n      <span>Midnight</span>\n    </button>\n    <button mat-menu-item (click)=\"setTime('6:00AM')\">\n      <span>6:00AM</span>\n    </button>\n    <button mat-menu-item (click)=\"setTime('8:00AM')\">\n      <span>8:00AM</span>\n    </button>\n    <button mat-menu-item (click)=\"setTime('10:00AM')\">\n      <span>10:00AM</span>\n    </button>\n    <button mat-menu-item (click)=\"setTime('12:00PM')\">\n      <span>Noon</span>\n    </button>\n    <button mat-menu-item (click)=\"setTime('2:00PM')\">\n      <span>2:00PM</span>\n    </button>\n    <button mat-menu-item (click)=\"setTime('5:00PM')\">\n      <span>5:00PM</span>\n    </button>\n  </mat-menu>\n  <mat-form-field class=\"dbx-datetime-row-field\">\n    <mat-label>Time</mat-label>\n    <input #timeInput matInput [formControl]=\"timeInputCtrl\" (focus)=\"focusTime()\" (focusout)=\"focusOutTime()\"\n      (keydown)=\"keydownOnInput($event)\">\n  </mat-form-field>\n</ng-template>\n", components: [{ type: i1$2.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i4.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i4$1.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { type: i5$2.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i5$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { type: i3$2.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }], directives: [{ type: i3$1.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i3$1.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$1.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i5.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i5.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i4.MatLabel, selector: "mat-label" }, { type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i4$1.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { type: i5$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], pipes: { "async": i5.AsyncPipe, "date": i5.DatePipe, "dateDistance": i2.DateDistancePipe, "timeDistance": i2.TimeDistancePipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxDateTimeFieldComponent, decorators: [{
+            type: Component,
+            args: [{ template: "<div class=\"dbx-datetime-field\" fxLayout=\"row wrap\" fxLayout.xs=\"column wrap\" fxLayoutAlign=\"space-evenly stretch\">\n  <!-- Date -->\n  <div class=\"dbx-datetime-row\" fxFlex.lt-sm=\"100\" fxFlex=\"50\" *ngIf=\"showDateInput\">\n    <ng-container *ngTemplateOutlet=\"dateInputTemplate\"></ng-container>\n  </div>\n  <!-- Time -->\n  <div class=\"dbx-datetime-row\" fxFlex.lt-sm=\"100\" [fxFlex]=\"showDateInput ? 50 : 100\">\n    <ng-container *ngIf=\"showTimeInput$ | async\">\n      <ng-container *ngTemplateOutlet=\"timeMenuAndInputTemplate\"></ng-container>\n    </ng-container>\n    <div class=\"add-time-button-wrapper\" *ngIf=\"showAddTime$ | async\">\n      <button mat-button class=\"add-time-button\" (click)=\"addTime()\">\n        <mat-icon>timer</mat-icon> Add Time\n      </button>\n    </div>\n  </div>\n  <div class=\"dbx-datetime-row dbx-datetime-hint-row\" fxFlex=\"100\">\n    <div class=\"dbx-hint\" [ngSwitch]=\"fullDay$ | async\">\n      <small *ngSwitchCase=\"true\"><b class=\"dbx-ok\">All Day</b> {{ dateValue$ | async | date:'fullDate' }}\n        ({{ dateValue$ | async | dateDistance }})</small>\n      <small *ngSwitchCase=\"false\">\n        <ng-container *ngIf=\"value$ | async\"><b class=\"dbx-ok\">At</b> {{ displayValue$ | async | date:'medium' }}\n          ({{ displayValue$ | async | timeDistance }})</ng-container>\n      </small>\n    </div>\n    <div class=\"dbx-small dbx-label\" *ngIf=\"description\">\n      {{ description }}\n    </div>\n  </div>\n</div>\n\n<!-- Date Input Template -->\n<ng-template #dateInputTemplate>\n  <button mat-icon-button (click)=\"picker.open()\">\n    <mat-icon>calendar_today</mat-icon>\n  </button>\n  <mat-form-field class=\"dbx-datetime-row-field\">\n    <mat-label>Date</mat-label>\n    <input matInput [matDatepicker]=\"picker\" (dateChange)=\"datePicked($event)\" [value]=\"dateValue$ | async\">\n    <mat-datepicker #picker></mat-datepicker>\n  </mat-form-field>\n</ng-template>\n\n<!-- Time Menu/Input Template -->\n<ng-template #timeMenuAndInputTemplate>\n  <button mat-icon-button [matMenuTriggerFor]=\"timemenu\" aria-label=\"opens the time menu\">\n    <mat-icon>timer</mat-icon>\n  </button>\n  <mat-menu #timemenu=\"matMenu\">\n    <ng-container *ngIf=\"timeMode === 'optional'\">\n      <button mat-menu-item (click)=\"removeTime()\">\n        <span>Remove Time</span>\n      </button>\n      <mat-divider></mat-divider>\n    </ng-container>\n    <button mat-menu-item (click)=\"setTime('12:00AM')\">\n      <span>Midnight</span>\n    </button>\n    <button mat-menu-item (click)=\"setTime('6:00AM')\">\n      <span>6:00AM</span>\n    </button>\n    <button mat-menu-item (click)=\"setTime('8:00AM')\">\n      <span>8:00AM</span>\n    </button>\n    <button mat-menu-item (click)=\"setTime('10:00AM')\">\n      <span>10:00AM</span>\n    </button>\n    <button mat-menu-item (click)=\"setTime('12:00PM')\">\n      <span>Noon</span>\n    </button>\n    <button mat-menu-item (click)=\"setTime('2:00PM')\">\n      <span>2:00PM</span>\n    </button>\n    <button mat-menu-item (click)=\"setTime('5:00PM')\">\n      <span>5:00PM</span>\n    </button>\n  </mat-menu>\n  <mat-form-field class=\"dbx-datetime-row-field\">\n    <mat-label>Time</mat-label>\n    <input #timeInput matInput [formControl]=\"timeInputCtrl\" (focus)=\"focusTime()\" (focusout)=\"focusOutTime()\"\n      (keydown)=\"keydownOnInput($event)\">\n  </mat-form-field>\n</ng-template>\n" }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; } });
+
+class DbxFormFormlyDateFieldModule {
+}
+DbxFormFormlyDateFieldModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxFormFormlyDateFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+DbxFormFormlyDateFieldModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxFormFormlyDateFieldModule, declarations: [DbxDateTimeFieldComponent], imports: [CommonModule,
+        FormsModule,
+        MatInputModule,
+        MatDividerModule,
+        MatFormFieldModule,
+        MatButtonModule,
+        MatDatepickerModule,
+        MatNativeDateModule,
+        MatMenuModule,
+        ReactiveFormsModule,
+        DbxDatePipeModule,
+        MatChipsModule,
+        MatIconModule,
+        FlexLayoutModule, i1$4.FormlyModule] });
+DbxFormFormlyDateFieldModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxFormFormlyDateFieldModule, imports: [[
+            CommonModule,
+            FormsModule,
+            MatInputModule,
+            MatDividerModule,
+            MatFormFieldModule,
+            MatButtonModule,
+            MatDatepickerModule,
+            MatNativeDateModule,
+            MatMenuModule,
+            ReactiveFormsModule,
+            DbxDatePipeModule,
+            MatChipsModule,
+            MatIconModule,
+            FlexLayoutModule,
+            FormlyModule.forChild({
+                types: [
+                    { name: 'datetime', component: DbxDateTimeFieldComponent }
+                ]
+            })
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxFormFormlyDateFieldModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        FormsModule,
+                        MatInputModule,
+                        MatDividerModule,
+                        MatFormFieldModule,
+                        MatButtonModule,
+                        MatDatepickerModule,
+                        MatNativeDateModule,
+                        MatMenuModule,
+                        ReactiveFormsModule,
+                        DbxDatePipeModule,
+                        MatChipsModule,
+                        MatIconModule,
+                        FlexLayoutModule,
+                        FormlyModule.forChild({
+                            types: [
+                                { name: 'datetime', component: DbxDateTimeFieldComponent }
+                            ]
+                        })
+                    ],
+                    declarations: [
+                        DbxDateTimeFieldComponent
+                    ],
+                    exports: []
+                }]
+        }] });
+
+const TAKE_NEXT_UPCOMING_TIME_CONFIG_OBS = () => of({
+    takeNextUpcomingTime: true,
+    roundDownToMinute: true
+});
+/**
+ * Same as DateTime field but with the Date input hidden by default.
+ */
+function timeOnlyField(config) {
+    return dateTimeField(Object.assign(Object.assign({}, config), { timeMode: DateTimeFieldTimeMode.REQUIRED, timeOnly: true }));
+}
+function dateTimeField({ key, label = '', placeholder = '', description = '', timeMode = DateTimeFieldTimeMode.REQUIRED, fullDayFieldName, getConfigObs, timeOnly = false, required = false }) {
+    const fieldConfig = formlyField({
+        key,
+        type: 'datetime',
+        timeMode: (timeOnly) ? DateTimeFieldTimeMode.REQUIRED : timeMode,
+        fullDayFieldName,
+        getConfigObs,
+        timeOnly,
+        templateOptions: {
+            label,
+            placeholder,
+            required,
+            description
+        },
+    });
+    // TODO: Add configuration...
+    return fieldConfig;
+}
+
+function staticEnumField({ key, label = '', placeholder = '', description, multiple = false, required = false, options }) {
+    const fieldConfig = formlyField({
+        key,
+        type: 'select',
+        templateOptions: {
+            label,
+            description,
+            placeholder,
+            required,
+            multiple,
+            selectAllOption: 'Select All',
+            options
+        },
+    });
+    return fieldConfig;
+}
+
+// TODO: Finish dynamic.enum before adding in
+
+const DEFAULT_PREFERRED_COUNTRIES = ['us'];
+class DbxInternationalPhoneFieldComponent extends FieldType {
+    get fieldInputKey() {
+        return this.key;
+    }
+    get fieldFormGroup() {
+        return this.form;
+    }
+    get label() {
+        return this.field.templateOptions.label;
+    }
+    get placeholder() {
+        return this.field.templateOptions.placeholder;
+    }
+    get description() {
+        return this.field.templateOptions.description;
+    }
+    get preferredCountries() {
+        var _a;
+        return (_a = this.field.preferredCountries) !== null && _a !== void 0 ? _a : DEFAULT_PREFERRED_COUNTRIES;
+    }
+    get onlyCountries() {
+        var _a;
+        return (_a = this.field.onlyCountries) !== null && _a !== void 0 ? _a : [];
+    }
+    get required() {
+        var _a;
+        return (_a = this.field.templateOptions.required) !== null && _a !== void 0 ? _a : false;
+    }
+    get errors() {
+        var _a;
+        return (_a = this.field.formControl) === null || _a === void 0 ? void 0 : _a.errors;
+    }
+}
+DbxInternationalPhoneFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxInternationalPhoneFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+DbxInternationalPhoneFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.0", type: DbxInternationalPhoneFieldComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<div class=\"dbx-international-phone-field\" [formGroup]=\"fieldFormGroup\">\n  <mat-form-field class=\"dbx-international-phone-form-field\">\n    <ngx-mat-intl-tel-input [required]=\"required\" [preferredCountries]=\"preferredCountries\" [enablePlaceholder]=\"false\"\n      name=\"phone\" [formControlName]=\"fieldInputKey\">\n    </ngx-mat-intl-tel-input>\n    <mat-error *ngIf=\"errors?.['required']\">Required Field</mat-error>\n    <mat-error *ngIf=\"errors?.['validatePhoneNumber']\">Invalid Number</mat-error>\n    <mat-hint>{{ description }}</mat-hint>\n  </mat-form-field>\n</div>\n", components: [{ type: i4.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i2$4.NgxMatIntlTelInputComponent, selector: "ngx-mat-intl-tel-input", inputs: ["preferredCountries", "enablePlaceholder", "inputPlaceholder", "cssClass", "name", "onlyCountries", "errorStateMatcher", "enableSearch", "searchPlaceholder", "describedBy", "format", "placeholder", "required", "disabled"], outputs: ["countryChanged"] }], directives: [{ type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.MatError, selector: "mat-error", inputs: ["id"] }, { type: i4.MatHint, selector: "mat-hint", inputs: ["align", "id"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxInternationalPhoneFieldComponent, decorators: [{
+            type: Component,
+            args: [{ template: "<div class=\"dbx-international-phone-field\" [formGroup]=\"fieldFormGroup\">\n  <mat-form-field class=\"dbx-international-phone-form-field\">\n    <ngx-mat-intl-tel-input [required]=\"required\" [preferredCountries]=\"preferredCountries\" [enablePlaceholder]=\"false\"\n      name=\"phone\" [formControlName]=\"fieldInputKey\">\n    </ngx-mat-intl-tel-input>\n    <mat-error *ngIf=\"errors?.['required']\">Required Field</mat-error>\n    <mat-error *ngIf=\"errors?.['validatePhoneNumber']\">Invalid Number</mat-error>\n    <mat-hint>{{ description }}</mat-hint>\n  </mat-form-field>\n</div>\n" }]
+        }] });
+
+class DbxFormFormlyPhoneFieldModule {
+}
+DbxFormFormlyPhoneFieldModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxFormFormlyPhoneFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+DbxFormFormlyPhoneFieldModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxFormFormlyPhoneFieldModule, declarations: [DbxInternationalPhoneFieldComponent], imports: [CommonModule,
+        MatInputModule,
+        FormsModule,
+        NgxMatIntlTelInputModule,
+        ReactiveFormsModule,
+        MatAutocompleteModule,
+        MatChipsModule,
+        MatIconModule,
+        FlexLayoutModule, i1$4.FormlyModule] });
+DbxFormFormlyPhoneFieldModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxFormFormlyPhoneFieldModule, imports: [[
+            CommonModule,
+            MatInputModule,
+            FormsModule,
+            NgxMatIntlTelInputModule,
+            ReactiveFormsModule,
+            MatAutocompleteModule,
+            MatChipsModule,
+            MatIconModule,
+            FlexLayoutModule,
+            FormlyModule.forChild({
+                types: [
+                    { name: 'intphone', component: DbxInternationalPhoneFieldComponent }
+                ]
+            })
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxFormFormlyPhoneFieldModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        MatInputModule,
+                        FormsModule,
+                        NgxMatIntlTelInputModule,
+                        ReactiveFormsModule,
+                        MatAutocompleteModule,
+                        MatChipsModule,
+                        MatIconModule,
+                        FlexLayoutModule,
+                        FormlyModule.forChild({
+                            types: [
+                                { name: 'intphone', component: DbxInternationalPhoneFieldComponent }
+                            ]
+                        })
+                    ],
+                    declarations: [
+                        DbxInternationalPhoneFieldComponent
+                    ],
+                    exports: []
+                }]
+        }] });
+
+const PHONE_LABEL_MAX_LENGTH = 100;
+const ADDRESS_COUNTRY_MAX_LENGTH = 80;
+const ADDRESS_CITY_MAX_LENGTH = 80;
+const ADDRESS_STATE_MAX_LENGTH = 80;
+const ADDRESS_ZIP_MAX_LENGTH = 20;
+const LABEL_STRING_MAX_LENGTH = 100;
+const SEARCH_STRING_MAX_LENGTH = 100;
+function textField({ key, label = '', placeholder = '', required = false, attributes, readonly, autocomplete, minLength, maxLength, pattern }) {
+    return formlyField({
+        key,
+        type: 'input',
+        templateOptions: {
+            label,
+            placeholder,
+            required,
+            minLength,
+            maxLength,
+            pattern,
+            readonly,
+            attributes: Object.assign(Object.assign({}, attributes), (autocomplete) ? { autocomplete } : undefined)
+        }
+    });
+}
+function textAreaField({ key, label = '', placeholder = '', rows = 3, required = false, minLength, maxLength = 1000, attributes }) {
+    return formlyField({
+        key,
+        type: 'textarea',
+        templateOptions: {
+            label,
+            placeholder,
+            required,
+            rows,
+            minLength,
+            maxLength,
+            attributes
+        }
+    });
+}
+function nameField({ key = 'name', label = 'Name', placeholder = 'John Doe', required = false, minLength, maxLength, attributes } = {}) {
+    return textField({
+        key,
+        label,
+        placeholder,
+        required,
+        minLength,
+        maxLength,
+        attributes
+    });
+}
+function emailField({ key = 'email', label = 'Email Address', placeholder = 'person@email.com', description = '', required = false, readonly = false }) {
+    return formlyField({
+        key,
+        type: 'input',
+        templateOptions: {
+            label,
+            placeholder,
+            description,
+            required,
+            readonly
+        },
+        validation: {
+            messages: {
+                required: `Email is required.`
+            }
+        },
+        validators: {
+            email: {
+                expression: (c) => !Validators.email(c),
+                message: () => `Not a valid email address.`
+            }
+        },
+    });
+}
+function cityField({ key = 'city', required = false }) {
+    return textField({
+        key,
+        label: 'City',
+        placeholder: '',
+        required,
+        autocomplete: 'city',
+        maxLength: ADDRESS_CITY_MAX_LENGTH
+    });
+}
+function stateField({ key = 'state', required = false }) {
+    return textField({
+        key,
+        label: 'State',
+        placeholder: '',
+        required,
+        attributes: {
+            autocomplete: 'state'
+        },
+        maxLength: ADDRESS_STATE_MAX_LENGTH
+    });
+}
+function countryField({ key = 'country', required = false }) {
+    return textField({
+        key,
+        label: 'Country',
+        placeholder: '',
+        required,
+        attributes: {
+            autocomplete: 'country'
+        },
+        maxLength: ADDRESS_COUNTRY_MAX_LENGTH
+    });
+}
+function zipCodeField({ key = 'zip', required = false }) {
+    return textField({
+        key,
+        label: 'Zip Code',
+        placeholder: '',
+        required,
+        attributes: {
+            autocomplete: 'postal-code'
+        },
+        maxLength: ADDRESS_ZIP_MAX_LENGTH
+    });
+}
+
+function flexLayoutWrapper(fieldConfigs, { size: defaultSize = 2, retainSizeOnSmallScreen } = {}) {
+    const defaultRetainSizeOnSmallScreen = retainSizeOnSmallScreen;
+    return {
+        wrappers: ['flex'],
+        fieldGroupClassName: 'form-flex-section-group',
+        // fieldGroupClassName: 'field-layout-group',
+        fieldGroup: fieldConfigs.map((config) => {
+            const { field, size = defaultSize, retainSizeOnSmallScreen = defaultRetainSizeOnSmallScreen } = config;
+            let className = `form-flex-${size}`;
+            if (retainSizeOnSmallScreen != false) {
+                className = className + ' form-flex-responsive';
+            }
+            return Object.assign(Object.assign({}, field), { className });
+        })
+    };
+}
+
+function internationalPhoneField({ key, label = '', placeholder = '', required = false }) {
+    const fieldConfig = formlyField({
+        key,
+        type: 'intphone',
+        templateOptions: {
+            label,
+            placeholder,
+            required
+        }
+    });
+    // TODO: Add configuration...
+    return fieldConfig;
+}
+function phoneAndLabelFields({ phoneField: phone, labelField: label }) {
+    return [
+        flexLayoutWrapper([
+            {
+                field: internationalPhoneField(Object.assign({ key: 'phone' }, phone))
+            },
+            {
+                field: textField(Object.assign({ key: 'label', label: 'Label', autocomplete: 'phone-label' }, label))
+            }
+        ])
+    ];
+}
+function phoneAndLabelFieldGroup({ key = 'phone', label = 'Phone Number', required, phoneField, labelField }) {
+    return {
+        key,
+        wrappers: ['section'],
+        templateOptions: {
+            label,
+            required
+        },
+        fieldGroup: phoneAndLabelFields({ phoneField, labelField })
+    };
+}
+function phoneListField({ key = 'phones', label = 'Phone Numbers', repeatSection, required = false, maxPhones = 6, phoneField, labelField }) {
+    return {
+        key,
+        type: 'repeat',
+        wrappers: ['section'],
+        templateOptions: {
+            label,
+            required,
+            repeatSection: repeatSection !== null && repeatSection !== void 0 ? repeatSection : {
+                addText: 'Add Phone Number',
+                removeText: 'Remove Phone Number'
+            },
+            maxLength: maxPhones
+        },
+        fieldArray: {
+            fieldGroup: phoneAndLabelFields({ phoneField, labelField })
+        }
+    };
+}
+
+const ADDRESS_LINE_MAX_LENGTH = 100;
+function addressFormlyFields() {
+    return [
+        textField({
+            key: 'line1',
+            label: 'Line 1',
+            placeholder: '',
+            required: false,
+            autocomplete: 'address-line1',
+            maxLength: ADDRESS_LINE_MAX_LENGTH
+        }),
+        textField({
+            key: 'line2',
+            label: 'Line 2',
+            placeholder: '',
+            required: false,
+            autocomplete: 'address-line2',
+            maxLength: ADDRESS_LINE_MAX_LENGTH
+        }),
+        flexLayoutWrapper([{
+                field: cityField({})
+            }, {
+                field: stateField({})
+            }, {
+                field: zipCodeField({})
+            }, {
+                field: countryField({})
+            }])
+    ];
+}
+function addressField({ key = 'address', required = false }) {
+    return {
+        key,
+        wrappers: ['section'],
+        templateOptions: {
+            label: 'Address',
+            placeholder: '',
+            required
+        },
+        fieldGroup: addressFormlyFields()
+    };
+}
+function addressListField({ key = 'addresses', required = false, maxAddresses = 6 }) {
+    return {
+        key,
+        type: 'repeat',
+        wrappers: ['section'],
+        templateOptions: {
+            label: 'Addresses',
+            placeholder: '',
+            required,
+            repeatSection: {
+                addText: 'Add Address',
+                removeText: 'Remove Address'
+            },
+            maxLength: maxAddresses
+        },
+        fieldArray: {
+            fieldGroup: addressFormlyFields()
+        }
+    };
+}
+
+class DbxFormFormlyTextFieldModule {
+}
+DbxFormFormlyTextFieldModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxFormFormlyTextFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+DbxFormFormlyTextFieldModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxFormFormlyTextFieldModule, exports: [DbxFormFormlyWrapperModule] });
+DbxFormFormlyTextFieldModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxFormFormlyTextFieldModule, imports: [[], DbxFormFormlyWrapperModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxFormFormlyTextFieldModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [],
+                    declarations: [],
+                    exports: [
+                        DbxFormFormlyWrapperModule
+                    ]
+                }]
+        }] });
+
+function hiddenField({ key, required = false }) {
+    return formlyField({
+        key,
+        templateOptions: { required }
+    });
+}
+
+function addToggleWrapperToField({ fieldConfig, toggleSection = {} }) {
+    fieldConfig.wrappers = concatArraysUnique(fieldConfig.wrappers, ['toggle']);
+    fieldConfig.templateOptions = Object.assign(Object.assign({}, fieldConfig.templateOptions), { toggleSection });
+    return fieldConfig;
+}
+
+/**
+ * Allows a directive to provide a formly context and form.
+ */
+function ProvideFormlyContext() {
+    return [{
+            provide: DbxFormlyContext,
+            useClass: DbxFormlyContext
+        }, {
+            provide: DbxForm,
+            useExisting: DbxFormlyContext
+        }];
+}
+/**
+ * DbxForm Instance that registers a delegate and manages the state of that form/delegate.
+ */
+class DbxFormlyContext {
+    constructor() {
+        this.lockSet = new LockSet();
+        this._disabled = false;
+        this._delegate = DbxFormlyContext.EMPTY_DELEGATE;
+        this._streamSubject = new BehaviorSubject(of(DbxFormlyContext.INITIAL_STATE));
+        this._stream$ = this._streamSubject.pipe(mergeMap$1((stream) => stream));
+    }
+    destroy() {
+        this._streamSubject.complete();
+    }
+    get isDestroyed() {
+        return this._streamSubject.isStopped;
+    }
+    setDelegate(delegate) {
+        this._delegate = delegate !== null && delegate !== void 0 ? delegate : DbxFormlyContext.EMPTY_DELEGATE;
+        this._streamSubject.next(this._delegate.stream$);
+        this._delegate.setFields(this._fields);
+        this._delegate.setValue(this._initialValue);
+        this._delegate.setDisabled(this._disabled);
+    }
+    clearDelegate(delegate) {
+        if (this._delegate === delegate && !this.isDestroyed) {
+            this.setDelegate(undefined);
+        }
+    }
+    get fields() {
+        return this._fields;
+    }
+    set fields(fields) {
+        this._fields = fields;
+        this._delegate.setFields(this._fields);
+    }
+    // MARK: FormComponent
+    get isComplete() {
+        return this._delegate.isComplete;
+    }
+    get state() {
+        return this._delegate.state;
+    }
+    get stream$() {
+        return this._stream$;
+    }
+    get value() {
+        return this._delegate.getValue();
+    }
+    setValue(value) {
+        this._initialValue = value;
+        this._delegate.setValue(value);
+    }
+    isDisabled() {
+        return this._delegate.isDisabled();
+    }
+    setDisabled(disabled = true) {
+        this._disabled = disabled;
+        this._delegate.setDisabled(disabled);
+    }
+    resetForm() {
+        this._delegate.resetForm();
+    }
+    forceFormUpdate() {
+        this._delegate.forceFormUpdate();
+    }
+}
+DbxFormlyContext.INITIAL_STATE = { isComplete: false, state: DbxFormState.INITIALIZING };
+DbxFormlyContext.EMPTY_DELEGATE = {
+    isComplete: false,
+    state: DbxFormState.INITIALIZING,
+    stream$: of(DbxFormlyContext.INITIAL_STATE),
+    setFields(fields) {
+        // Do nothing.
+    },
+    getValue() {
+        return undefined;
+    },
+    setValue(value) {
+        // Do nothing.
+    },
+    resetForm() {
+        // Do nothing.
+    },
+    forceFormUpdate() {
+        // Do nothing.
+    },
+    isDisabled() {
+        return false;
+    },
+    setDisabled(disabled) {
+        // Do nothing.
+    }
+};
+
+/**
+ * Abstract component for wrapping a form.
+ */
+class AbstractFormlyFormDirective {
+    constructor(context) {
+        this.context = context;
+    }
+    get disabled() {
+        return this.context.isDisabled();
+    }
+    set disabled(disabled) {
+        this.context.setDisabled(disabled);
+    }
+    ngOnDestroy() {
+        this.context.destroy();
+    }
+    // Utility Functions
+    getValue() {
+        return this.context.value;
+    }
+    setValue(value) {
+        this.context.setValue(value);
+    }
+    clearValue() {
+        this.setValue({});
+    }
+}
+AbstractFormlyFormDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: AbstractFormlyFormDirective, deps: [{ token: DbxFormlyContext }], target: i0.ɵɵFactoryTarget.Directive });
+AbstractFormlyFormDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.0", type: AbstractFormlyFormDirective, inputs: { disabled: "disabled" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: AbstractFormlyFormDirective, decorators: [{
+            type: Directive
+        }], ctorParameters: function () { return [{ type: DbxFormlyContext }]; }, propDecorators: { disabled: [{
+                type: Input
+            }] } });
+/**
+ * Abstract component for wrapping a form.
+ */
+class AbstractSyncFormlyFormDirective extends AbstractFormlyFormDirective {
+    ngOnInit() {
+        this.context.fields = this.fields;
+    }
+}
+AbstractSyncFormlyFormDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: AbstractSyncFormlyFormDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+AbstractSyncFormlyFormDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.0", type: AbstractSyncFormlyFormDirective, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: AbstractSyncFormlyFormDirective, decorators: [{
+            type: Directive
+        }] });
+/**
+ * Abstract component for wrapping an asyncrhronously-configured form.
+ */
+class AbstractAsyncFormlyFormDirective extends AbstractFormlyFormDirective {
+    constructor() {
+        super(...arguments);
+        this._fieldsSub = new SubscriptionObject();
+    }
+    ngOnInit() {
+        this._fieldsSub.subscription = this.fields$.subscribe((fields) => {
+            this.context.fields = fields;
+        });
+    }
+    ngOnDestroy() {
+        super.ngOnDestroy();
+        this._fieldsSub.destroy();
+    }
+}
+AbstractAsyncFormlyFormDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: AbstractAsyncFormlyFormDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+AbstractAsyncFormlyFormDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.0", type: AbstractAsyncFormlyFormDirective, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: AbstractAsyncFormlyFormDirective, decorators: [{
+            type: Directive
+        }] });
+class AbstractConfigAsyncFormlyFormDirective extends AbstractAsyncFormlyFormDirective {
+    constructor() {
+        super(...arguments);
+        this._config = new BehaviorSubject(undefined);
+        this.config$ = this._config.asObservable();
+    }
+    get config() {
+        return this._config.value;
+    }
+    set config(config) {
+        this._config.next(config);
+    }
+    ngOnDestroy() {
+        super.ngOnDestroy();
+        this._config.complete();
+    }
+}
+AbstractConfigAsyncFormlyFormDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: AbstractConfigAsyncFormlyFormDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+AbstractConfigAsyncFormlyFormDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.0", type: AbstractConfigAsyncFormlyFormDirective, inputs: { config: "config" }, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: AbstractConfigAsyncFormlyFormDirective, decorators: [{
+            type: Directive
+        }], propDecorators: { config: [{
+                type: Input
+            }] } });
+
+class DbxFormlyComponent extends AbstractSubscriptionDirective {
+    constructor(context, ngZone) {
+        super();
+        this.context = context;
+        this.ngZone = ngZone;
+        this._changesCount = 0;
+        this._fields = [];
+        this._events = new BehaviorSubject({ isComplete: false, state: DbxFormState.INITIALIZING });
+        this.form = new FormGroup({});
+        this.model = {};
+        this.options = {};
+    }
+    ngOnInit() {
+        this.context.setDelegate(this);
+        this.sub = this.form.valueChanges.pipe(startWith$1(this.form.value), distinctUntilChanged(), debounceTime(50)).subscribe((_) => this._updateForChange());
+    }
+    ngOnDestroy() {
+        this.context.lockSet.onNextUnlock(() => {
+            super.ngOnDestroy();
+            this.context.clearDelegate(this);
+            this._events.complete();
+        });
+    }
+    get fields() {
+        return this._fields;
+    }
+    // MARK: Delegate
+    get isComplete() {
+        return this._events.value.isComplete;
+    }
+    get state() {
+        return this._events.value.state;
+    }
+    get stream$() {
+        return this._events.asObservable();
+    }
+    setFields(fields) {
+        this._fields = fields;
+    }
+    getValue() {
+        return this.form.value; // this.model
+    }
+    setValue(value) {
+        var _a, _b;
+        /*
+        if (value === this.model) {
+          return; // Ignore the same value being set.
+        }
+        */
+        this.model = cloneDeep(value);
+        if (this.options.updateInitialValue) {
+            this.options.updateInitialValue();
+            (_b = (_a = this.options).resetModel) === null || _b === void 0 ? void 0 : _b.call(_a);
+        }
+        // Re-mark as untouched and pristine.
+        this.form.markAsUntouched();
+        this.form.markAsPristine();
+        this._lastResetAt = new Date();
+        this._changesCount = 0;
+        // After updating the value, if the form is still untouched mark it as pristine again.
+        // Sometimes the values get marked as changed and break pristine before a user has time to interact.
+        setTimeout(() => {
+            if (this.form.untouched) {
+                this.form.markAsPristine();
+            }
+        }, 500);
+    }
+    resetForm() {
+        if (this.options.resetModel) {
+            this.options.resetModel();
+        }
+    }
+    isDisabled() {
+        return this.form.disabled;
+    }
+    setDisabled(disabled = true) {
+        // console.log('setting disabled: ', disabled);
+        if (disabled) {
+            this.form.disable();
+        }
+        else {
+            this.form.enable();
+        }
+    }
+    // MARK: Update
+    forceFormUpdate() {
+        this._updateForChange();
+    }
+    _updateForChange() {
+        const complete = this.form.valid;
+        this._changesCount += 1;
+        const nextState = {
+            isComplete: complete,
+            state: (complete) ? DbxFormState.COMPLETE : DbxFormState.INCOMPLETE,
+            untouched: this.form.untouched,
+            pristine: this.form.pristine,
+            changesCount: this._changesCount,
+            lastResetAt: this._lastResetAt
+        };
+        this._events.next(nextState);
+    }
+}
+DbxFormlyComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxFormlyComponent, deps: [{ token: DbxFormlyContext }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+DbxFormlyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.0", type: DbxFormlyComponent, selector: "dbx-formly", exportAs: ["formly"], usesInheritance: true, ngImport: i0, template: `
+    <form [formGroup]="form" class="dbx-formly">
+      <formly-form [form]="form" [fields]="fields" [model]="model"></formly-form>
+    </form>
+  `, isInline: true, components: [{ type: i1$4.FormlyForm, selector: "formly-form", inputs: ["form", "model", "fields", "options"], outputs: ["modelChange"] }], directives: [{ type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxFormlyComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'dbx-formly',
+                    exportAs: 'formly',
+                    template: `
+    <form [formGroup]="form" class="dbx-formly">
+      <formly-form [form]="form" [fields]="fields" [model]="model"></formly-form>
+    </form>
+  `,
+                    // TODO: styleUrls: ['./form.scss'],
+                }]
+        }], ctorParameters: function () { return [{ type: DbxFormlyContext }, { type: i0.NgZone }]; } });
+
+class DbxFormlyModule {
+}
+DbxFormlyModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxFormlyModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+DbxFormlyModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxFormlyModule, declarations: [DbxFormlyComponent], imports: [CommonModule,
+        FormsModule,
+        ReactiveFormsModule,
+        FormlyModule,
+        FormlyMatToggleModule], exports: [
+        // Modules (?)
+        FormsModule,
+        ReactiveFormsModule,
+        // DbxFormWrapperModule, // todo!
+        // Directives
+        DbxFormlyComponent
+    ] });
+DbxFormlyModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxFormlyModule, imports: [[
+            CommonModule,
+            FormsModule,
+            ReactiveFormsModule,
+            FormlyModule,
+            FormlyMatToggleModule
+        ],
+        // Modules (?)
+        FormsModule,
+        ReactiveFormsModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxFormlyModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        FormsModule,
+                        ReactiveFormsModule,
+                        FormlyModule,
+                        FormlyMatToggleModule
+                    ],
+                    declarations: [
+                        DbxFormlyComponent,
+                        // FormComponentFieldComponent
+                    ],
+                    exports: [
+                        // Modules (?)
+                        FormsModule,
+                        ReactiveFormsModule,
+                        // DbxFormWrapperModule, // todo!
+                        // Directives
+                        DbxFormlyComponent,
+                        // FormComponentFieldComponent
+                    ]
+                }]
+        }] });
+
+/**
+ * Provides vertical spacing after a form.
+ */
+class DbxFormSpacerComponent {
+}
+DbxFormSpacerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxFormSpacerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+DbxFormSpacerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.0", type: DbxFormSpacerComponent, selector: "dbx-form-spacer", ngImport: i0, template: `<div class="dbx-form-spacer"></div>`, isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxFormSpacerComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'dbx-form-spacer',
+                    template: `<div class="dbx-form-spacer"></div>`,
+                }]
+        }] });
+
+class DbxFormLayoutModule {
+}
+DbxFormLayoutModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxFormLayoutModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+DbxFormLayoutModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxFormLayoutModule, declarations: [DbxFormSpacerComponent], imports: [CommonModule], exports: [DbxFormSpacerComponent] });
+DbxFormLayoutModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxFormLayoutModule, imports: [[
+            CommonModule
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: DbxFormLayoutModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule
+                    ],
+                    declarations: [
+                        DbxFormSpacerComponent
+                    ],
+                    exports: [
+                        DbxFormSpacerComponent
+                    ]
+                }]
+        }] });
+
+function IsTruthy() {
+    return (control) => {
+        const value = control.value;
+        if (!value) {
+            return {
+                isTruthy: value
+            };
+        }
+        return {};
+    };
+}
+
+const DOMAIN_NAME_REGEX = /(.+)\.(.+)/;
+function IsDomain() {
+    return Validators.pattern(DOMAIN_NAME_REGEX);
+}
+
+function IsInRange(min = Number.MIN_SAFE_INTEGER, max = Number.MAX_SAFE_INTEGER) {
+    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;
+                }
+            }
+        }
+        return errors;
+    };
+}
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ADDRESS_CITY_MAX_LENGTH, ADDRESS_COUNTRY_MAX_LENGTH, ADDRESS_LINE_MAX_LENGTH, ADDRESS_STATE_MAX_LENGTH, ADDRESS_ZIP_MAX_LENGTH, APP_ACTION_FORM_DISABLED_KEY, AbstractAsyncFormlyFormDirective, AbstractConfigAsyncFormlyFormDirective, AbstractDbxPickableItemFieldDirective, AbstractDbxSearchableValueFieldDirective, AbstractFormComponentFieldWrappedComponent, AbstractFormExpandableSectionWrapperDirective, AbstractFormlyFormDirective, AbstractSyncFormlyFormDirective, AutoTouchFieldWrapperComponent, ChecklistItemFieldDataSetBuilder, DEFAULT_HAS_VALUE_FN, DEFAULT_PREFERRED_COUNTRIES, DOMAIN_NAME_REGEX, DateTimeFieldTimeMode, DbxActionFormDirective, DbxChecklistItemContentComponent, DbxChecklistItemFieldComponent, DbxDateTimeFieldComponent, DbxDefaultChecklistItemFieldDisplayComponent, DbxDefaultSearchableAnchorFieldDisplayComponent, DbxDefaultSearchableFieldDisplayComponent, DbxForm, DbxFormFormlyArrayFieldModule, DbxFormFormlyBooleanFieldModule, DbxFormFormlyChecklistItemFieldModule, DbxFormFormlyComponentFieldModule, DbxFormFormlyDateFieldModule, DbxFormFormlyPhoneFieldModule, DbxFormFormlyPickableFieldModule, DbxFormFormlySearchableFieldModule, DbxFormFormlyTextFieldModule, DbxFormFormlyWrapperModule, DbxFormLayoutModule, DbxFormLoadingPairSourceDirective, DbxFormModule, DbxFormRepeatTypeComponent, DbxFormSourceDirective, DbxFormSpacerComponent, DbxFormState, DbxFormValueChangesDirective, DbxFormlyActionModule, DbxFormlyComponent, DbxFormlyContext, DbxFormlyModule, DbxInternationalPhoneFieldComponent, DbxPickableChipFieldComponent, DbxPickableListFieldComponent, DbxSearchableChipFieldComponent, DbxSearchableFieldAutocompleteItemComponent, DbxSearchableTextFieldComponent, FormComponentFieldComponent, FormExpandableSectionWrapperComponent, FormFlexWrapperComponent, FormInfoSectionWrapperComponent, FormSectionWrapperComponent, FormSubsectionWrapperComponent, FormToggleSectionWrapperComponent, IsDomain, IsInRange, IsTruthy, LABEL_STRING_MAX_LENGTH, PHONE_LABEL_MAX_LENGTH, ProvideDbxForm, ProvideFormlyContext, SEARCH_STRING_MAX_LENGTH, TAKE_NEXT_UPCOMING_TIME_CONFIG_OBS, addToggleWrapperToField, addressField, addressFormlyFields, addressListField, checkboxField, checklistItemField, chipTextField, cityField, componentField, countryField, dateTimeField, disableFormlyFieldAutofill, emailField, flexLayoutWrapper, formlyField, hiddenField, internationalPhoneField, makeMetaFilterSearchableFieldValueDisplayFn, nameField, phoneAndLabelFieldGroup, phoneAndLabelFields, phoneListField, searchableChipField, searchableTextField, stateField, staticEnumField, textAreaField, textField, timeOnlyField, toggleField, zipCodeField };
+//# sourceMappingURL=dereekb-dbx-form.mjs.map