@dereekb/dbx-form 9.21.0 → 9.22.1

package/fesm2020/dereekb-dbx-form.mjs

@@ -8,35 +8,35 @@ import * as i3 from '@uirouter/core';
 import * as i2 from '@dereekb/dbx-core';
 import { AbstractSubscriptionDirective, safeDetectChanges, DbxInjectionComponentModule, DbxDatePipeModule, mergeDbxInjectionComponentConfigs, tapDetectChanges } from '@dereekb/dbx-core';
 import * as i2$1 from '@dereekb/dbx-web';
-import { DbxActionTransitionSafetyDirective, DbxTextModule, DbxLoadingModule, DbxFlexLayoutModule, DbxSectionLayoutModule, DbxRouterAnchorModule, dbxValueListItemDecisionFunction, DbxButtonModule, DbxListLayoutModule, AbstractDbxSelectionListWrapperDirective, DEFAULT_LIST_WRAPPER_DIRECTIVE_TEMPLATE, AbstractDbxSelectionListViewDirective, addConfigToValueListItems, provideDbxListView, AbstractDbxValueListViewItemComponent, mapCompactModeObs, DbxBarLayoutModule } from '@dereekb/dbx-web';
+import { DbxActionTransitionSafetyDirective, DbxTextModule, DbxLoadingModule, DbxFlexLayoutModule, DbxSectionLayoutModule, DbxRouterAnchorModule, dbxValueListItemDecisionFunction, DbxButtonModule, DbxListLayoutModule, AbstractDbxSelectionListWrapperDirective, DEFAULT_LIST_WRAPPER_DIRECTIVE_TEMPLATE, AbstractDbxSelectionListViewDirective, addConfigToValueListItems, provideDbxListView, AbstractDbxValueListViewItemComponent, DbxActionModule, mapCompactModeObs, DbxBarLayoutModule } from '@dereekb/dbx-web';
 import { isPast, addSeconds, isSameMinute, startOfDay, isSameDay, addMinutes, addDays } from 'date-fns';
-import { BehaviorSubject, switchMap, first, exhaustMap, of, catchError, delay, filter, combineLatest, map, distinctUntilChanged, shareReplay, Subject, tap, takeUntil, EMPTY, mergeMap, startWith, debounceTime, skipWhile, interval, merge, throttleTime, scan, timer } from 'rxjs';
-import { LockSet, SubscriptionObject, asObservable, cleanup, loadingStateHasFinishedLoading, switchMapMaybeObs, filterMaybe, switchMapMaybeDefault, SimpleLoadingContext, distinctUntilHasDifferentValues, startWithBeginLoading, mapLoadingStateResults, successResult, ListLoadingStateContextInstance, isListLoadingStateEmpty, LoadingStateContextInstance, skipFirstMaybe, asyncPusherCache, scanCount } from '@dereekb/rxjs';
+import { BehaviorSubject, switchMap, first, exhaustMap, of, catchError, delay, filter, combineLatest, map, distinctUntilChanged, shareReplay, Subject, tap, takeUntil, EMPTY, mergeMap, startWith, debounceTime, skipWhile, scan, interval, merge, throttleTime, timer } from 'rxjs';
+import { LockSet, SubscriptionObject, asObservable, cleanup, loadingStateHasFinishedLoading, switchMapMaybeObs, filterMaybe, switchMapMaybeDefault, SimpleLoadingContext, distinctUntilHasDifferentValues, startWithBeginLoading, mapLoadingStateResults, successResult, ListLoadingStateContextInstance, isListLoadingStateEmpty, LoadingStateContextInstance, loadingStateHasValue, loadingStateIsLoading, beginLoading, mapLoadingStateValueWithOperator, valueFromLoadingState, loadingStateContext, skipFirstMaybe, asyncPusherCache, scanCount } from '@dereekb/rxjs';
 import * as i1$2 from '@ngx-formly/core';
 import { FieldType, FieldWrapper, FormlyModule, FieldArrayType } from '@ngx-formly/core';
 import * as i3$1 from '@angular/forms';
 import { FormsModule, ReactiveFormsModule, FormControl, Validators, FormGroup } from '@angular/forms';
-import * as i3$2 from '@angular/material/core';
+import * as i4$1 from '@angular/material/core';
 import { MatRippleModule, MatNativeDateModule } from '@angular/material/core';
-import * as i4$1 from '@angular/material/checkbox';
+import * as i4$2 from '@angular/material/checkbox';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import * as i5 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
 import * as i1$1 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
-import * as i3$3 from '@angular/flex-layout/flex';
+import * as i3$2 from '@angular/flex-layout/flex';
 import { FlexLayoutModule } from '@angular/flex-layout';
-import { objectIsEmpty, mergeObjectsFunction, filterFromPOJOFunction, mergeObjects, filterFromPOJO, asArray, objectHasNoKeys, addPlusPrefixToNumber, convertMaybeToArray, isSelectedDecisionFunctionFactory, readKeysFrom, hasDifferentValues, makeValuesGroupMap, findUnique, searchStringFilterFunction, caseInsensitiveFilterByIndexOfDecisionFactory, sortByStringFunction, mergeIntoArray, lastValue, separateValues, arrayToMap, cachedGetter, makeGetter, asDecisionFunction, getValueFromGetter, filterMaybeValues, dateFromLogicalDate, WEBSITE_DOMAIN_NAME_REGEX, KeyValueTypleValueFilter, valuesFromPOJO, allObjectsAreEqual, isNumberDivisibleBy, nearestDivisibleValues, transformNumberFunction, concatArrays, transformStringFunction, US_STATE_CODE_STRING_REGEX, ZIP_CODE_STRING_REGEX, LAT_LNG_PATTERN, BooleanStringKeyArrayUtilityInstance, capitalizeFirstLetter } from '@dereekb/util';
+import { objectIsEmpty, mergeObjectsFunction, filterFromPOJOFunction, mergeObjects, filterFromPOJO, asArray, objectHasNoKeys, addPlusPrefixToNumber, convertMaybeToArray, isSelectedDecisionFunctionFactory, readKeysFrom, hasDifferentValues, makeValuesGroupMap, separateValues, findUnique, searchStringFilterFunction, caseInsensitiveFilterByIndexOfDecisionFactory, sortByStringFunction, mergeIntoArray, lastValue, arrayToMap, setContainsAllValues, addToSetCopy, setsAreEquivalent, filterMaybeValues, mergeArrays, cachedGetter, makeGetter, asDecisionFunction, getValueFromGetter, dateFromLogicalDate, WEBSITE_DOMAIN_NAME_REGEX, KeyValueTypleValueFilter, valuesFromPOJO, allObjectsAreEqual, isNumberDivisibleBy, nearestDivisibleValues, transformNumberFunction, concatArrays, transformStringFunction, US_STATE_CODE_STRING_REGEX, ZIP_CODE_STRING_REGEX, LAT_LNG_PATTERN, BooleanStringKeyArrayUtilityInstance, capitalizeFirstLetter } from '@dereekb/util';
 import * as i2$2 from '@angular/material/slide-toggle';
 import { MatSlideToggleModule } from '@angular/material/slide-toggle';
 import * as i2$3 from '@angular/flex-layout/extended';
 import * as i5$1 from '@angular/material/divider';
 import { MatDividerModule } from '@angular/material/divider';
-import * as i4$3 from '@angular/material/autocomplete';
+import * as i4$4 from '@angular/material/autocomplete';
 import { MatAutocompleteModule } from '@angular/material/autocomplete';
 import * as i3$4 from '@angular/material/form-field';
 import { MatFormFieldModule } from '@angular/material/form-field';
-import * as i4$2 from '@angular/material/input';
+import * as i4$3 from '@angular/material/input';
 import { MatInputModule } from '@angular/material/input';
 import { FieldType as FieldType$1, FormlyMaterialModule } from '@ngx-formly/material';
 import { camelCase } from 'change-case';
@@ -45,17 +45,19 @@ import { MatChipsModule } from '@angular/material/chips';
 import { MatListModule } from '@angular/material/list';
 import { ENTER, COMMA } from '@angular/cdk/keycodes';
 import { skipUntilTimeElapsedAfterLastEmission, toJsDate, parseISO8601DayStringToDate, formatToISO8601DayString, formatToISO8601DateString, safeToJsDate, guessCurrentTimezone, toReadableTimeString, utcDayForDate, readableTimeStringToDate, findMinDate, findMaxDate, dateTimeMinuteDecisionFunction, DateTimeMinuteInstance, toLocalReadableTimeString, allTimezoneInfos, timezoneInfoForSystem, searchTimezoneInfos } from '@dereekb/date';
-import * as i4$4 from 'ngx-editor';
-import { Editor, NgxEditorModule } from 'ngx-editor';
-import * as i4$5 from '@angular/cdk/drag-drop';
-import { DragDropModule } from '@angular/cdk/drag-drop';
-import * as i7 from '@angular/material/datepicker';
+import { FieldType as FieldType$2, FormlyMatFormFieldModule } from '@ngx-formly/material/form-field';
+import * as i3$3 from '@angular/material/select';
+import { MatSelectModule } from '@angular/material/select';
+import * as i8 from '@angular/material/datepicker';
 import { MatDatepickerModule } from '@angular/material/datepicker';
-import * as i8 from '@angular/material/menu';
+import * as i9 from '@angular/material/menu';
 import { MatMenuModule } from '@angular/material/menu';
+import * as i4$5 from 'ngx-editor';
+import { Editor, NgxEditorModule } from 'ngx-editor';
+import * as i4$6 from '@angular/cdk/drag-drop';
+import { DragDropModule } from '@angular/cdk/drag-drop';
 import * as i2$4 from 'ngx-mat-intl-tel-input';
 import { NgxMatIntlTelInputComponent } from 'ngx-mat-intl-tel-input';
-import { FormlyMatFormFieldModule } from '@ngx-formly/material/form-field';
 import { ADDRESS_CITY_MAX_LENGTH, ADDRESS_STATE_CODE_MAX_LENGTH, ADDRESS_STATE_MAX_LENGTH, ADDRESS_COUNTRY_MAX_LENGTH, ADDRESS_ZIP_MAX_LENGTH, ADDRESS_LINE_MAX_LENGTH } from '@dereekb/model';
 import { cloneDeep } from 'lodash';
 import { FormlyMatToggleModule } from '@ngx-formly/material/toggle';
@@ -603,7 +605,7 @@ class DbxChecklistItemFieldComponent extends FieldType {
     }
 }
 DbxChecklistItemFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxChecklistItemFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-DbxChecklistItemFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: DbxChecklistItemFieldComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<div class=\"dbx-checklist-item-wrapper\" [formGroup]=\"formGroup\">\n  <div *ngIf=\"label\" class=\"dbx-checklist-item-label\">{{ label }}</div>\n  <div class=\"dbx-checklist-item\">\n    <div class=\"dbx-checklist-item-check\">\n      <mat-checkbox [formControlName]=\"formControlName\"></mat-checkbox>\n    </div>\n    <div class=\"dbx-checklist-item-content-wrapper\">\n      <dbx-anchor [block]=\"true\" [anchor]=\"anchor$ | async\">\n        <div class=\"dbx-checklist-item-content\" matRipple [matRippleDisabled]=\"(rippleDisabled$ | async) ?? false\">\n          <dbx-checklist-item-content-component></dbx-checklist-item-content-component>\n          <span class=\"spacer\"></span>\n          <mat-icon *ngIf=\"(rippleDisabled$ | async) !== true\">navigate_next</mat-icon>\n        </div>\n      </dbx-anchor>\n    </div>\n  </div>\n  <div *ngIf=\"description\" class=\"dbx-hint\">{{ description }}</div>\n</div>\n", dependencies: [{ kind: "directive", type: i0.forwardRef(function () { return i1.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i0.forwardRef(function () { return i3$1.NgControlStatus; }), selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i0.forwardRef(function () { return i3$1.NgControlStatusGroup; }), selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i0.forwardRef(function () { return i3$1.FormGroupDirective; }), selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i0.forwardRef(function () { return i3$1.FormControlName; }), selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i0.forwardRef(function () { return i3$2.MatRipple; }), selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "component", type: i0.forwardRef(function () { return i4$1.MatCheckbox; }), selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: i0.forwardRef(function () { return i5.MatIcon; }), selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i0.forwardRef(function () { return i2$1.DbxAnchorComponent; }), selector: "dbx-anchor, [dbx-anchor]", inputs: ["block"] }, { kind: "component", type: i0.forwardRef(function () { return DbxChecklistItemContentComponent; }), selector: "dbx-checklist-item-content-component" }, { kind: "pipe", type: i0.forwardRef(function () { return i1.AsyncPipe; }), name: "async" }] });
+DbxChecklistItemFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: DbxChecklistItemFieldComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<div class=\"dbx-checklist-item-wrapper\" [formGroup]=\"formGroup\">\n  <div *ngIf=\"label\" class=\"dbx-checklist-item-label\">{{ label }}</div>\n  <div class=\"dbx-checklist-item\">\n    <div class=\"dbx-checklist-item-check\">\n      <mat-checkbox [formControlName]=\"formControlName\"></mat-checkbox>\n    </div>\n    <div class=\"dbx-checklist-item-content-wrapper\">\n      <dbx-anchor [block]=\"true\" [anchor]=\"anchor$ | async\">\n        <div class=\"dbx-checklist-item-content\" matRipple [matRippleDisabled]=\"(rippleDisabled$ | async) ?? false\">\n          <dbx-checklist-item-content-component></dbx-checklist-item-content-component>\n          <span class=\"spacer\"></span>\n          <mat-icon *ngIf=\"(rippleDisabled$ | async) !== true\">navigate_next</mat-icon>\n        </div>\n      </dbx-anchor>\n    </div>\n  </div>\n  <div *ngIf=\"description\" class=\"dbx-hint\">{{ description }}</div>\n</div>\n", dependencies: [{ kind: "directive", type: i0.forwardRef(function () { return i1.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i0.forwardRef(function () { return i3$1.NgControlStatus; }), selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i0.forwardRef(function () { return i3$1.NgControlStatusGroup; }), selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i0.forwardRef(function () { return i3$1.FormGroupDirective; }), selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i0.forwardRef(function () { return i3$1.FormControlName; }), selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i0.forwardRef(function () { return i4$1.MatRipple; }), selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "component", type: i0.forwardRef(function () { return i4$2.MatCheckbox; }), selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: i0.forwardRef(function () { return i5.MatIcon; }), selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i0.forwardRef(function () { return i2$1.DbxAnchorComponent; }), selector: "dbx-anchor, [dbx-anchor]", inputs: ["block"] }, { kind: "component", type: i0.forwardRef(function () { return DbxChecklistItemContentComponent; }), selector: "dbx-checklist-item-content-component" }, { kind: "pipe", type: i0.forwardRef(function () { return i1.AsyncPipe; }), name: "async" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxChecklistItemFieldComponent, decorators: [{
             type: Component,
             args: [{ template: "<div class=\"dbx-checklist-item-wrapper\" [formGroup]=\"formGroup\">\n  <div *ngIf=\"label\" class=\"dbx-checklist-item-label\">{{ label }}</div>\n  <div class=\"dbx-checklist-item\">\n    <div class=\"dbx-checklist-item-check\">\n      <mat-checkbox [formControlName]=\"formControlName\"></mat-checkbox>\n    </div>\n    <div class=\"dbx-checklist-item-content-wrapper\">\n      <dbx-anchor [block]=\"true\" [anchor]=\"anchor$ | async\">\n        <div class=\"dbx-checklist-item-content\" matRipple [matRippleDisabled]=\"(rippleDisabled$ | async) ?? false\">\n          <dbx-checklist-item-content-component></dbx-checklist-item-content-component>\n          <span class=\"spacer\"></span>\n          <mat-icon *ngIf=\"(rippleDisabled$ | async) !== true\">navigate_next</mat-icon>\n        </div>\n      </dbx-anchor>\n    </div>\n  </div>\n  <div *ngIf=\"description\" class=\"dbx-hint\">{{ description }}</div>\n</div>\n" }]
@@ -660,7 +662,7 @@ DbxFormInfoWrapperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.
         </button>
       </div>
     </div>
-  `, isInline: true, dependencies: [{ kind: "component", type: i1$1.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"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i3$3.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"] }, { kind: "directive", type: i3$3.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"] }, { kind: "directive", type: i3$3.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"] }] });
+  `, isInline: true, dependencies: [{ kind: "component", type: i1$1.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"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i3$2.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"] }, { kind: "directive", type: i3$2.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"] }, { kind: "directive", type: i3$2.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"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxFormInfoWrapperComponent, decorators: [{
             type: Component,
             args: [{
@@ -1779,8 +1781,9 @@ class AbstractDbxPickableItemFieldDirective extends FieldType$1 {
     getDisplayValuesForFieldValues(values) {
         return this._displayHashMap.pipe(mergeMap((displayMap) => {
             const mappingResult = values.map((x) => [x, this.hashForValue(x.value)]).map(([x, hash], i) => [i, hash, x, displayMap.get(hash)]);
-            const hasDisplay = mappingResult.filter((x) => Boolean(x[3]));
-            const needsDisplay = mappingResult.filter((x) => !x[3]);
+            const { 
+            //
+            included: hasDisplay, excluded: needsDisplay } = separateValues(mappingResult, (x) => Boolean(x[3]));
             if (needsDisplay.length > 0) {
                 // Go get the display value.
                 const displayValuesObs = this.displayForValue(needsDisplay.map((x) => x[2]));
@@ -1890,7 +1893,7 @@ class DbxPickableChipListFieldComponent extends AbstractDbxPickableItemFieldDire
     }
 }
 DbxPickableChipListFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxPickableChipListFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-DbxPickableChipListFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: DbxPickableChipListFieldComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<div class=\"dbx-pickable-item-field\">\n  <dbx-loading [context]=\"context\" [linear]=\"true\">\n    <ng-container *ngIf=\"showFilterInput\">\n      <ng-container *ngTemplateOutlet=\"filterTemplate\"></ng-container>\n    </ng-container>\n    <!-- Content -->\n    <div class=\"dbx-pickable-item-field-chips\">\n      <mat-chip-list [required]=\"required\" [selectable]=\"!isReadonlyOrDisabled\" #chipList>\n        <mat-chip *ngFor=\"let item of items$ | async\" (click)=\"itemClicked(item)\" [selected]=\"item.selected\" [disabled]=\"isReadonlyOrDisabled || item.disabled\">\n          <span class=\"dbx-chip-label\">{{ item.itemValue.label }}</span>\n          <span class=\"dbx-chip-sublabel\" *ngIf=\"item.itemValue.sublabel\">{{ item.itemValue.sublabel }}</span>\n        </mat-chip>\n      </mat-chip-list>\n      <dbx-injection [config]=\"footerConfig\"></dbx-injection>\n    </div>\n  </dbx-loading>\n</div>\n\n<!-- Filter Input -->\n<ng-template #filterTemplate>\n  <div class=\"dbx-pickable-item-field-filter\">\n    <div class=\"dbx-label\">{{ filterLabel }}</div>\n    <input [name]=\"name\" autocomplete=\"{{ autocomplete }}\" #filterMatInput=\"matInput\" matInput [placeholder]=\"placeholder\" [formControl]=\"inputCtrl\" />\n    <mat-divider></mat-divider>\n    <dbx-loading [linear]=\"true\" [context]=\"filterResultsContext\"></dbx-loading>\n    <!-- No items found. -->\n    <p *ngIf=\"noItemsAvailable$ | async\" class=\"dbx-label\">No items match this filter.</p>\n  </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$1.DbxLoadingComponent, selector: "dbx-loading", inputs: ["show", "text", "mode", "color", "diameter", "linear", "context", "loading", "error"] }, { kind: "directive", type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4$2.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"] }, { kind: "directive", type: i3$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i5$1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i6.MatChipList, selector: "mat-chip-list", inputs: ["role", "aria-describedby", "errorStateMatcher", "multiple", "compareWith", "value", "required", "placeholder", "disabled", "aria-orientation", "selectable", "tabIndex"], outputs: ["change", "valueChange"], exportAs: ["matChipList"] }, { kind: "directive", type: i6.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disableRipple", "tabIndex", "role", "selected", "value", "selectable", "disabled", "removable"], outputs: ["selectionChange", "destroyed", "removed"], exportAs: ["matChip"] }, { kind: "component", type: i2.DbxInjectionComponent, selector: "dbx-injection, [dbxInjection], [dbx-injection]", inputs: ["config", "template"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] });
+DbxPickableChipListFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: DbxPickableChipListFieldComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<div class=\"dbx-pickable-item-field\">\n  <dbx-loading [context]=\"context\" [linear]=\"true\">\n    <ng-container *ngIf=\"showFilterInput\">\n      <ng-container *ngTemplateOutlet=\"filterTemplate\"></ng-container>\n    </ng-container>\n    <!-- Content -->\n    <div class=\"dbx-pickable-item-field-chips\">\n      <mat-chip-list [required]=\"required\" [selectable]=\"!isReadonlyOrDisabled\" #chipList>\n        <mat-chip *ngFor=\"let item of items$ | async\" (click)=\"itemClicked(item)\" [selected]=\"item.selected\" [disabled]=\"isReadonlyOrDisabled || item.disabled\">\n          <span class=\"dbx-chip-label\">{{ item.itemValue.label }}</span>\n          <span class=\"dbx-chip-sublabel\" *ngIf=\"item.itemValue.sublabel\">{{ item.itemValue.sublabel }}</span>\n        </mat-chip>\n      </mat-chip-list>\n      <dbx-injection [config]=\"footerConfig\"></dbx-injection>\n    </div>\n  </dbx-loading>\n</div>\n\n<!-- Filter Input -->\n<ng-template #filterTemplate>\n  <div class=\"dbx-pickable-item-field-filter\">\n    <div class=\"dbx-label\">{{ filterLabel }}</div>\n    <input [name]=\"name\" autocomplete=\"{{ autocomplete }}\" #filterMatInput=\"matInput\" matInput [placeholder]=\"placeholder\" [formControl]=\"inputCtrl\" />\n    <mat-divider></mat-divider>\n    <dbx-loading [linear]=\"true\" [context]=\"filterResultsContext\"></dbx-loading>\n    <!-- No items found. -->\n    <p *ngIf=\"noItemsAvailable$ | async\" class=\"dbx-label\">No items match this filter.</p>\n  </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$1.DbxLoadingComponent, selector: "dbx-loading", inputs: ["show", "text", "mode", "color", "diameter", "linear", "context", "loading", "error"] }, { kind: "directive", type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4$3.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"] }, { kind: "directive", type: i3$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i5$1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i6.MatChipList, selector: "mat-chip-list", inputs: ["role", "aria-describedby", "errorStateMatcher", "multiple", "compareWith", "value", "required", "placeholder", "disabled", "aria-orientation", "selectable", "tabIndex"], outputs: ["change", "valueChange"], exportAs: ["matChipList"] }, { kind: "directive", type: i6.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disableRipple", "tabIndex", "role", "selected", "value", "selectable", "disabled", "removable"], outputs: ["selectionChange", "destroyed", "removed"], exportAs: ["matChip"] }, { kind: "component", type: i2.DbxInjectionComponent, selector: "dbx-injection, [dbxInjection], [dbx-injection]", inputs: ["config", "template"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxPickableChipListFieldComponent, decorators: [{
             type: Component,
             args: [{ template: "<div class=\"dbx-pickable-item-field\">\n  <dbx-loading [context]=\"context\" [linear]=\"true\">\n    <ng-container *ngIf=\"showFilterInput\">\n      <ng-container *ngTemplateOutlet=\"filterTemplate\"></ng-container>\n    </ng-container>\n    <!-- Content -->\n    <div class=\"dbx-pickable-item-field-chips\">\n      <mat-chip-list [required]=\"required\" [selectable]=\"!isReadonlyOrDisabled\" #chipList>\n        <mat-chip *ngFor=\"let item of items$ | async\" (click)=\"itemClicked(item)\" [selected]=\"item.selected\" [disabled]=\"isReadonlyOrDisabled || item.disabled\">\n          <span class=\"dbx-chip-label\">{{ item.itemValue.label }}</span>\n          <span class=\"dbx-chip-sublabel\" *ngIf=\"item.itemValue.sublabel\">{{ item.itemValue.sublabel }}</span>\n        </mat-chip>\n      </mat-chip-list>\n      <dbx-injection [config]=\"footerConfig\"></dbx-injection>\n    </div>\n  </dbx-loading>\n</div>\n\n<!-- Filter Input -->\n<ng-template #filterTemplate>\n  <div class=\"dbx-pickable-item-field-filter\">\n    <div class=\"dbx-label\">{{ filterLabel }}</div>\n    <input [name]=\"name\" autocomplete=\"{{ autocomplete }}\" #filterMatInput=\"matInput\" matInput [placeholder]=\"placeholder\" [formControl]=\"inputCtrl\" />\n    <mat-divider></mat-divider>\n    <dbx-loading [linear]=\"true\" [context]=\"filterResultsContext\"></dbx-loading>\n    <!-- No items found. -->\n    <p *ngIf=\"noItemsAvailable$ | async\" class=\"dbx-label\">No items match this filter.</p>\n  </div>\n</ng-template>\n" }]
@@ -1907,7 +1910,7 @@ class DbxPickableListFieldComponent extends AbstractDbxPickableItemFieldDirectiv
     }
 }
 DbxPickableListFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxPickableListFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-DbxPickableListFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: DbxPickableListFieldComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<div class=\"dbx-pickable-item-field\">\n  <dbx-loading [context]=\"context\">\n    <ng-container *ngIf=\"showFilterInput\">\n      <ng-container *ngTemplateOutlet=\"filterTemplate\"></ng-container>\n    </ng-container>\n    <!-- Content -->\n    <div class=\"dbx-pickable-item-field-list\">\n      <div class=\"dbx-pickable-item-field-list-content\">\n        <dbx-form-pickable-item-field-item-list [disabled]=\"isReadonlyOrDisabled\" [state$]=\"filterItemsLoadingState$\" (selectionChange)=\"onSelectionChange($event)\"></dbx-form-pickable-item-field-item-list>\n      </div>\n      <dbx-injection [config]=\"footerConfig\"></dbx-injection>\n    </div>\n  </dbx-loading>\n</div>\n\n<!-- Filter Input -->\n<ng-template #filterTemplate>\n  <div class=\"dbx-pickable-item-field-filter\">\n    <div class=\"dbx-label\">{{ filterLabel }}</div>\n    <input [name]=\"name\" autocomplete=\"{{ autocomplete }}\" #filterMatInput=\"matInput\" matInput [placeholder]=\"placeholder\" [formControl]=\"inputCtrl\" />\n    <mat-divider></mat-divider>\n    <dbx-loading [linear]=\"true\" [context]=\"filterResultsContext\"></dbx-loading>\n    <!-- No items found. -->\n    <p *ngIf=\"noItemsAvailable$ | async\" class=\"dbx-label\">No items match this filter.</p>\n  </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i0.forwardRef(function () { return i1.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i0.forwardRef(function () { return i1.NgTemplateOutlet; }), selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i0.forwardRef(function () { return i2$1.DbxLoadingComponent; }), selector: "dbx-loading", inputs: ["show", "text", "mode", "color", "diameter", "linear", "context", "loading", "error"] }, { kind: "directive", type: i0.forwardRef(function () { return i3$1.DefaultValueAccessor; }), selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i0.forwardRef(function () { return i3$1.NgControlStatus; }), selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i0.forwardRef(function () { return i4$2.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"] }, { kind: "directive", type: i0.forwardRef(function () { return i3$1.FormControlDirective; }), selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i0.forwardRef(function () { return i5$1.MatDivider; }), selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i0.forwardRef(function () { return i2.DbxInjectionComponent; }), selector: "dbx-injection, [dbxInjection], [dbx-injection]", inputs: ["config", "template"] }, { kind: "component", type: i0.forwardRef(function () { return DbxPickableListFieldItemListComponent; }), selector: "dbx-form-pickable-item-field-item-list" }, { kind: "pipe", type: i0.forwardRef(function () { return i1.AsyncPipe; }), name: "async" }] });
+DbxPickableListFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: DbxPickableListFieldComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<div class=\"dbx-pickable-item-field\">\n  <dbx-loading [context]=\"context\">\n    <ng-container *ngIf=\"showFilterInput\">\n      <ng-container *ngTemplateOutlet=\"filterTemplate\"></ng-container>\n    </ng-container>\n    <!-- Content -->\n    <div class=\"dbx-pickable-item-field-list\">\n      <div class=\"dbx-pickable-item-field-list-content\">\n        <dbx-form-pickable-item-field-item-list [disabled]=\"isReadonlyOrDisabled\" [state$]=\"filterItemsLoadingState$\" (selectionChange)=\"onSelectionChange($event)\"></dbx-form-pickable-item-field-item-list>\n      </div>\n      <dbx-injection [config]=\"footerConfig\"></dbx-injection>\n    </div>\n  </dbx-loading>\n</div>\n\n<!-- Filter Input -->\n<ng-template #filterTemplate>\n  <div class=\"dbx-pickable-item-field-filter\">\n    <div class=\"dbx-label\">{{ filterLabel }}</div>\n    <input [name]=\"name\" autocomplete=\"{{ autocomplete }}\" #filterMatInput=\"matInput\" matInput [placeholder]=\"placeholder\" [formControl]=\"inputCtrl\" />\n    <mat-divider></mat-divider>\n    <dbx-loading [linear]=\"true\" [context]=\"filterResultsContext\"></dbx-loading>\n    <!-- No items found. -->\n    <p *ngIf=\"noItemsAvailable$ | async\" class=\"dbx-label\">No items match this filter.</p>\n  </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i0.forwardRef(function () { return i1.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i0.forwardRef(function () { return i1.NgTemplateOutlet; }), selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i0.forwardRef(function () { return i2$1.DbxLoadingComponent; }), selector: "dbx-loading", inputs: ["show", "text", "mode", "color", "diameter", "linear", "context", "loading", "error"] }, { kind: "directive", type: i0.forwardRef(function () { return i3$1.DefaultValueAccessor; }), selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i0.forwardRef(function () { return i3$1.NgControlStatus; }), selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i0.forwardRef(function () { return i4$3.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"] }, { kind: "directive", type: i0.forwardRef(function () { return i3$1.FormControlDirective; }), selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i0.forwardRef(function () { return i5$1.MatDivider; }), selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i0.forwardRef(function () { return i2.DbxInjectionComponent; }), selector: "dbx-injection, [dbxInjection], [dbx-injection]", inputs: ["config", "template"] }, { kind: "component", type: i0.forwardRef(function () { return DbxPickableListFieldItemListComponent; }), selector: "dbx-form-pickable-item-field-item-list" }, { kind: "pipe", type: i0.forwardRef(function () { return i1.AsyncPipe; }), name: "async" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxPickableListFieldComponent, decorators: [{
             type: Component,
             args: [{ template: "<div class=\"dbx-pickable-item-field\">\n  <dbx-loading [context]=\"context\">\n    <ng-container *ngIf=\"showFilterInput\">\n      <ng-container *ngTemplateOutlet=\"filterTemplate\"></ng-container>\n    </ng-container>\n    <!-- Content -->\n    <div class=\"dbx-pickable-item-field-list\">\n      <div class=\"dbx-pickable-item-field-list-content\">\n        <dbx-form-pickable-item-field-item-list [disabled]=\"isReadonlyOrDisabled\" [state$]=\"filterItemsLoadingState$\" (selectionChange)=\"onSelectionChange($event)\"></dbx-form-pickable-item-field-item-list>\n      </div>\n      <dbx-injection [config]=\"footerConfig\"></dbx-injection>\n    </div>\n  </dbx-loading>\n</div>\n\n<!-- Filter Input -->\n<ng-template #filterTemplate>\n  <div class=\"dbx-pickable-item-field-filter\">\n    <div class=\"dbx-label\">{{ filterLabel }}</div>\n    <input [name]=\"name\" autocomplete=\"{{ autocomplete }}\" #filterMatInput=\"matInput\" matInput [placeholder]=\"placeholder\" [formControl]=\"inputCtrl\" />\n    <mat-divider></mat-divider>\n    <dbx-loading [linear]=\"true\" [context]=\"filterResultsContext\"></dbx-loading>\n    <!-- No items found. -->\n    <p *ngIf=\"noItemsAvailable$ | async\" class=\"dbx-label\">No items match this filter.</p>\n  </div>\n</ng-template>\n" }]
@@ -2081,22 +2084,24 @@ function sortPickableItemsByLabel(chips) {
     return chips.sort(sortPickableItemsByLabelStringFunction);
 }
 function pickableItemChipField(config) {
-    const { key } = config;
+    const { key, materialFormField } = config;
     return formlyField({
         key,
         type: 'pickablechipfield',
         ...propsAndConfigForFieldConfig(config, {
+            ...materialFormField,
             ...config,
             autocomplete: false
         })
     });
 }
 function pickableItemListField(config) {
-    const { key } = config;
+    const { key, materialFormField } = config;
     return formlyField({
         key,
         type: 'pickablelistfield',
         ...propsAndConfigForFieldConfig(config, {
+            ...materialFormField,
             ...config,
             autocomplete: false
         })
@@ -2210,8 +2215,8 @@ class AbstractDbxSearchableValueFieldDirective extends FieldType$1 {
         this.singleValueSyncSubscription = new SubscriptionObject();
         this.searchContext = new LoadingStateContextInstance({ obs: this.searchResultsState$, showLoadingOnNoValue: false });
         this.searchResults$ = this.searchResultsState$.pipe(map((x) => x?.value ?? []));
-        this._formControlValue$ = this.formControl$.pipe(switchMap((control) => control.valueChanges.pipe(startWith(control.value), shareReplay(1))));
-        this.values$ = this._formControlValue$.pipe(map(convertMaybeToArray), shareReplay(1));
+        this.currentFormControlValue$ = this.formControl$.pipe(switchMap((control) => control.valueChanges.pipe(startWith(control.value), shareReplay(1))));
+        this.values$ = this.currentFormControlValue$.pipe(map(convertMaybeToArray), shareReplay(1));
         this.displayValuesState$ = this.values$.pipe(distinctUntilChanged(), switchMap((values) => this.loadDisplayValuesForValues(values)), shareReplay(1));
         this.displayValues$ = this.displayValuesState$.pipe(map((x) => x?.value ?? []));
     }
@@ -2278,8 +2283,9 @@ class AbstractDbxSearchableValueFieldDirective extends FieldType$1 {
     getDisplayValuesForFieldValues(values) {
         return this._displayHashMap.pipe(mergeMap((displayMap) => {
             const mappingResult = values.map((x) => [x, this.hashForValue(x.value)]).map(([x, hash], i) => [i, hash, x, displayMap.get(hash)]);
-            const hasDisplay = mappingResult.filter((x) => Boolean(x[3]));
-            const needsDisplay = mappingResult.filter((x) => !x[3]);
+            const { 
+            //
+            included: hasDisplay, excluded: needsDisplay } = separateValues(mappingResult, (x) => Boolean(x[3]));
             let obs;
             if (needsDisplay.length > 0) {
                 // Go get the display value.
@@ -2476,7 +2482,7 @@ class DbxSearchableChipFieldComponent extends AbstractDbxSearchableValueFieldDir
     }
 }
 DbxSearchableChipFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxSearchableChipFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-DbxSearchableChipFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: DbxSearchableChipFieldComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<div class=\"dbx-searchable-field\">\n  <!-- View -->\n  <mat-chip-list [selectable]=\"!readonly\" [required]=\"required\" [disabled]=\"readonly\" #chipList>\n    <mat-chip *ngFor=\"let displayValue of displayValues$ | async\" [removable]=\"true\" (removed)=\"removeWithDisplayValue(displayValue)\">\n      <span class=\"dbx-chip-label\">{{ displayValue.label }}</span>\n      <span class=\"dbx-chip-sublabel\" *ngIf=\"displayValue.sublabel\">{{ displayValue.sublabel }}</span>\n      <mat-icon *ngIf=\"!readonly\" matChipRemove>cancel</mat-icon>\n    </mat-chip>\n    <input #textInput [name]=\"name\" [placeholder]=\"placeholder\" [formControl]=\"inputCtrl\" [matAutocomplete]=\"auto\" autocomplete=\"{{ autocomplete }}\" [matAutocompleteDisabled]=\"readonly\" [matChipInputFor]=\"chipList\" (keydown)=\"tabPressedOnInput($event)\" [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\" (matChipInputTokenEnd)=\"addChip($event)\" (blur)=\"onBlur()\" />\n  </mat-chip-list>\n  <div class=\"searchable-field-form-loading\">\n    <dbx-loading [linear]=\"true\" [context]=\"searchContext\"></dbx-loading>\n  </div>\n</div>\n\n<!-- Autocomplete -->\n<mat-autocomplete class=\"dbx-searchable-text-field-autocomplete\" #auto=\"matAutocomplete\" (optionSelected)=\"selected($event)\">\n  <mat-option *ngFor=\"let displayValue of searchResults$ | async\" [value]=\"displayValue\">\n    <dbx-searchable-field-autocomplete-item [displayValue]=\"displayValue\"></dbx-searchable-field-autocomplete-item>\n  </mat-option>\n</mat-autocomplete>\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.DbxLoadingComponent, selector: "dbx-loading", inputs: ["show", "text", "mode", "color", "diameter", "linear", "context", "loading", "error"] }, { kind: "directive", type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i4$3.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i4$3.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: i3$2.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i6.MatChipList, selector: "mat-chip-list", inputs: ["role", "aria-describedby", "errorStateMatcher", "multiple", "compareWith", "value", "required", "placeholder", "disabled", "aria-orientation", "selectable", "tabIndex"], outputs: ["change", "valueChange"], exportAs: ["matChipList"] }, { kind: "directive", type: i6.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disableRipple", "tabIndex", "role", "selected", "value", "selectable", "disabled", "removable"], outputs: ["selectionChange", "destroyed", "removed"], exportAs: ["matChip"] }, { kind: "directive", type: i6.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i6.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: DbxSearchableFieldAutocompleteItemComponent, selector: "dbx-searchable-field-autocomplete-item", inputs: ["displayValue"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] });
+DbxSearchableChipFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: DbxSearchableChipFieldComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<div class=\"dbx-searchable-field\">\n  <!-- View -->\n  <mat-chip-list [selectable]=\"!readonly\" [required]=\"required\" [disabled]=\"readonly\" #chipList>\n    <mat-chip *ngFor=\"let displayValue of displayValues$ | async\" [removable]=\"true\" (removed)=\"removeWithDisplayValue(displayValue)\">\n      <span class=\"dbx-chip-label\">{{ displayValue.label }}</span>\n      <span class=\"dbx-chip-sublabel\" *ngIf=\"displayValue.sublabel\">{{ displayValue.sublabel }}</span>\n      <mat-icon *ngIf=\"!readonly\" matChipRemove>cancel</mat-icon>\n    </mat-chip>\n    <input #textInput [name]=\"name\" [placeholder]=\"placeholder\" [formControl]=\"inputCtrl\" [matAutocomplete]=\"auto\" autocomplete=\"{{ autocomplete }}\" [matAutocompleteDisabled]=\"readonly\" [matChipInputFor]=\"chipList\" (keydown)=\"tabPressedOnInput($event)\" [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\" (matChipInputTokenEnd)=\"addChip($event)\" (blur)=\"onBlur()\" />\n  </mat-chip-list>\n  <div class=\"searchable-field-form-loading\">\n    <dbx-loading [linear]=\"true\" [context]=\"searchContext\"></dbx-loading>\n  </div>\n</div>\n\n<!-- Autocomplete -->\n<mat-autocomplete class=\"dbx-searchable-text-field-autocomplete\" #auto=\"matAutocomplete\" (optionSelected)=\"selected($event)\">\n  <mat-option *ngFor=\"let displayValue of searchResults$ | async\" [value]=\"displayValue\">\n    <dbx-searchable-field-autocomplete-item [displayValue]=\"displayValue\"></dbx-searchable-field-autocomplete-item>\n  </mat-option>\n</mat-autocomplete>\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.DbxLoadingComponent, selector: "dbx-loading", inputs: ["show", "text", "mode", "color", "diameter", "linear", "context", "loading", "error"] }, { kind: "directive", type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i4$4.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i4$4.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: i4$1.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i6.MatChipList, selector: "mat-chip-list", inputs: ["role", "aria-describedby", "errorStateMatcher", "multiple", "compareWith", "value", "required", "placeholder", "disabled", "aria-orientation", "selectable", "tabIndex"], outputs: ["change", "valueChange"], exportAs: ["matChipList"] }, { kind: "directive", type: i6.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disableRipple", "tabIndex", "role", "selected", "value", "selectable", "disabled", "removable"], outputs: ["selectionChange", "destroyed", "removed"], exportAs: ["matChip"] }, { kind: "directive", type: i6.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i6.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: DbxSearchableFieldAutocompleteItemComponent, selector: "dbx-searchable-field-autocomplete-item", inputs: ["displayValue"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxSearchableChipFieldComponent, decorators: [{
             type: Component,
             args: [{ template: "<div class=\"dbx-searchable-field\">\n  <!-- View -->\n  <mat-chip-list [selectable]=\"!readonly\" [required]=\"required\" [disabled]=\"readonly\" #chipList>\n    <mat-chip *ngFor=\"let displayValue of displayValues$ | async\" [removable]=\"true\" (removed)=\"removeWithDisplayValue(displayValue)\">\n      <span class=\"dbx-chip-label\">{{ displayValue.label }}</span>\n      <span class=\"dbx-chip-sublabel\" *ngIf=\"displayValue.sublabel\">{{ displayValue.sublabel }}</span>\n      <mat-icon *ngIf=\"!readonly\" matChipRemove>cancel</mat-icon>\n    </mat-chip>\n    <input #textInput [name]=\"name\" [placeholder]=\"placeholder\" [formControl]=\"inputCtrl\" [matAutocomplete]=\"auto\" autocomplete=\"{{ autocomplete }}\" [matAutocompleteDisabled]=\"readonly\" [matChipInputFor]=\"chipList\" (keydown)=\"tabPressedOnInput($event)\" [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\" (matChipInputTokenEnd)=\"addChip($event)\" (blur)=\"onBlur()\" />\n  </mat-chip-list>\n  <div class=\"searchable-field-form-loading\">\n    <dbx-loading [linear]=\"true\" [context]=\"searchContext\"></dbx-loading>\n  </div>\n</div>\n\n<!-- Autocomplete -->\n<mat-autocomplete class=\"dbx-searchable-text-field-autocomplete\" #auto=\"matAutocomplete\" (optionSelected)=\"selected($event)\">\n  <mat-option *ngFor=\"let displayValue of searchResults$ | async\" [value]=\"displayValue\">\n    <dbx-searchable-field-autocomplete-item [displayValue]=\"displayValue\"></dbx-searchable-field-autocomplete-item>\n  </mat-option>\n</mat-autocomplete>\n" }]
@@ -2525,11 +2531,12 @@ function searchableStringChipField(config) {
     });
 }
 function searchableChipField(config) {
-    const { key, placeholder } = config;
+    const { key, placeholder, materialFormField } = config;
     return formlyField({
         key,
         type: 'searchablechipfield',
         ...propsAndConfigForFieldConfig(config, {
+            ...materialFormField,
             ...config,
             placeholder: placeholder ?? 'Add...',
             autocomplete: false
@@ -2537,11 +2544,12 @@ function searchableChipField(config) {
     });
 }
 function searchableTextField(config) {
-    const { key } = config;
+    const { key, materialFormField } = config;
     return formlyField({
         key,
         type: 'searchabletextfield',
         ...propsAndConfigForFieldConfig(config, {
+            ...materialFormField,
             ...config,
             autocomplete: false
         })
@@ -2583,7 +2591,7 @@ class DbxSearchableTextFieldComponent extends AbstractDbxSearchableValueFieldDir
     }
 }
 DbxSearchableTextFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxSearchableTextFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-DbxSearchableTextFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: DbxSearchableTextFieldComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<div class=\"dbx-searchable-text-field\" [ngClass]=\"{ 'dbx-searchable-text-field-has-value': (hasValue$ | async), 'dbx-searchable-text-field-show-value': showSelectedValue }\">\n  <!-- Result View -->\n  <div class=\"dbx-searchable-text-field-value mat-option mat-option-text\" *ngIf=\"showSelectedDisplayValue$ | async\">\n    <dbx-searchable-field-autocomplete-item [displayValue]=\"(selectedDisplayValue$ | async)!\"></dbx-searchable-field-autocomplete-item>\n  </div>\n  <div class=\"dbx-searchable-text-field-input\">\n    <div *ngIf=\"searchLabel\" class=\"dbx-label\">{{ searchLabel }}</div>\n    <!-- View -->\n    <input type=\"search\" [name]=\"name\" matInput #textInput [placeholder]=\"placeholder\" [formControl]=\"inputCtrl\" [matAutocomplete]=\"auto\" [matAutocompleteDisabled]=\"readonly\" autocomplete=\"{{ autocomplete }}\" />\n    <div class=\"searchable-field-form-loading\">\n      <dbx-loading [linear]=\"true\" [context]=\"searchContext\"></dbx-loading>\n    </div>\n  </div>\n</div>\n\n<!-- Autocomplete -->\n<mat-autocomplete class=\"dbx-searchable-text-field-autocomplete\" #auto (optionSelected)=\"selected($event)\">\n  <mat-option *ngFor=\"let displayValue of searchResults$ | async\" [value]=\"displayValue\">\n    <dbx-searchable-field-autocomplete-item [displayValue]=\"displayValue\"></dbx-searchable-field-autocomplete-item>\n  </mat-option>\n  <!-- Add/Pick String Value -->\n  <mat-option *ngIf=\"allowStringValues && (inputValue$ | async)\" [value]=\"{ value: (inputValue$ | async) }\">\n    <p class=\"dbx-clear-hint text-center\">\"{{ inputValue$ | async }}\"</p>\n  </mat-option>\n  <!-- Show clear value -->\n  <mat-option *ngIf=\"showClearValue && (hasValue$ | async)\" value=\"\">\n    <p class=\"dbx-clear-hint text-center\">Clear</p>\n  </mat-option>\n</mat-autocomplete>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.DbxLoadingComponent, selector: "dbx-loading", inputs: ["show", "text", "mode", "color", "diameter", "linear", "context", "loading", "error"] }, { kind: "directive", type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4$2.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"] }, { kind: "directive", type: i3$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i4$3.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i4$3.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: i3$2.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: DbxSearchableFieldAutocompleteItemComponent, selector: "dbx-searchable-field-autocomplete-item", inputs: ["displayValue"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] });
+DbxSearchableTextFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: DbxSearchableTextFieldComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<div class=\"dbx-searchable-text-field\" [ngClass]=\"{ 'dbx-searchable-text-field-has-value': (hasValue$ | async), 'dbx-searchable-text-field-show-value': showSelectedValue }\">\n  <!-- Result View -->\n  <div class=\"dbx-searchable-text-field-value mat-option mat-option-text\" *ngIf=\"showSelectedDisplayValue$ | async\">\n    <dbx-searchable-field-autocomplete-item [displayValue]=\"(selectedDisplayValue$ | async)!\"></dbx-searchable-field-autocomplete-item>\n  </div>\n  <div class=\"dbx-searchable-text-field-input\">\n    <div *ngIf=\"searchLabel\" class=\"dbx-label\">{{ searchLabel }}</div>\n    <!-- View -->\n    <input type=\"search\" [name]=\"name\" matInput #textInput [placeholder]=\"placeholder\" [formControl]=\"inputCtrl\" [matAutocomplete]=\"auto\" [matAutocompleteDisabled]=\"readonly\" autocomplete=\"{{ autocomplete }}\" />\n    <div class=\"searchable-field-form-loading\">\n      <dbx-loading [linear]=\"true\" [context]=\"searchContext\"></dbx-loading>\n    </div>\n  </div>\n</div>\n\n<!-- Autocomplete -->\n<mat-autocomplete class=\"dbx-searchable-text-field-autocomplete\" #auto (optionSelected)=\"selected($event)\">\n  <mat-option *ngFor=\"let displayValue of searchResults$ | async\" [value]=\"displayValue\">\n    <dbx-searchable-field-autocomplete-item [displayValue]=\"displayValue\"></dbx-searchable-field-autocomplete-item>\n  </mat-option>\n  <!-- Add/Pick String Value -->\n  <mat-option *ngIf=\"allowStringValues && (inputValue$ | async)\" [value]=\"{ value: (inputValue$ | async) }\">\n    <p class=\"dbx-clear-hint text-center\">\"{{ inputValue$ | async }}\"</p>\n  </mat-option>\n  <!-- Show clear value -->\n  <mat-option *ngIf=\"showClearValue && (hasValue$ | async)\" value=\"\">\n    <p class=\"dbx-clear-hint text-center\">Clear</p>\n  </mat-option>\n</mat-autocomplete>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.DbxLoadingComponent, selector: "dbx-loading", inputs: ["show", "text", "mode", "color", "diameter", "linear", "context", "loading", "error"] }, { kind: "directive", type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4$3.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"] }, { kind: "directive", type: i3$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i4$4.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i4$4.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: i4$1.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: DbxSearchableFieldAutocompleteItemComponent, selector: "dbx-searchable-field-autocomplete-item", inputs: ["displayValue"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxSearchableTextFieldComponent, decorators: [{
             type: Component,
             args: [{ template: "<div class=\"dbx-searchable-text-field\" [ngClass]=\"{ 'dbx-searchable-text-field-has-value': (hasValue$ | async), 'dbx-searchable-text-field-show-value': showSelectedValue }\">\n  <!-- Result View -->\n  <div class=\"dbx-searchable-text-field-value mat-option mat-option-text\" *ngIf=\"showSelectedDisplayValue$ | async\">\n    <dbx-searchable-field-autocomplete-item [displayValue]=\"(selectedDisplayValue$ | async)!\"></dbx-searchable-field-autocomplete-item>\n  </div>\n  <div class=\"dbx-searchable-text-field-input\">\n    <div *ngIf=\"searchLabel\" class=\"dbx-label\">{{ searchLabel }}</div>\n    <!-- View -->\n    <input type=\"search\" [name]=\"name\" matInput #textInput [placeholder]=\"placeholder\" [formControl]=\"inputCtrl\" [matAutocomplete]=\"auto\" [matAutocompleteDisabled]=\"readonly\" autocomplete=\"{{ autocomplete }}\" />\n    <div class=\"searchable-field-form-loading\">\n      <dbx-loading [linear]=\"true\" [context]=\"searchContext\"></dbx-loading>\n    </div>\n  </div>\n</div>\n\n<!-- Autocomplete -->\n<mat-autocomplete class=\"dbx-searchable-text-field-autocomplete\" #auto (optionSelected)=\"selected($event)\">\n  <mat-option *ngFor=\"let displayValue of searchResults$ | async\" [value]=\"displayValue\">\n    <dbx-searchable-field-autocomplete-item [displayValue]=\"displayValue\"></dbx-searchable-field-autocomplete-item>\n  </mat-option>\n  <!-- Add/Pick String Value -->\n  <mat-option *ngIf=\"allowStringValues && (inputValue$ | async)\" [value]=\"{ value: (inputValue$ | async) }\">\n    <p class=\"dbx-clear-hint text-center\">\"{{ inputValue$ | async }}\"</p>\n  </mat-option>\n  <!-- Show clear value -->\n  <mat-option *ngIf=\"showClearValue && (hasValue$ | async)\" value=\"\">\n    <p class=\"dbx-clear-hint text-center\">Clear</p>\n  </mat-option>\n</mat-autocomplete>\n" }]
@@ -2675,8 +2683,398 @@ function chipTextField(config) {
     });
 }
 
+/**
+ * Component that displays a select view (multi or not)
+ */
+class DbxFormSourceSelectFieldComponent extends FieldType$2 {
+    constructor() {
+        super(...arguments);
+        this._cacheMetaSub = new SubscriptionObject();
+        this._clearDisplayHashMapSub = new SubscriptionObject();
+        this._valueMetaHashMap = new BehaviorSubject(new Map());
+        this._displayHashMap = new BehaviorSubject(new Map());
+        this._formControlObs = new BehaviorSubject(undefined);
+        this._fromOpenSource = new BehaviorSubject({ values: [], valuesSet: new Set() });
+        this._loadSources = new BehaviorSubject(undefined);
+        this.formControl$ = this._formControlObs.pipe(filterMaybe());
+        this.currentFormControlValue$ = this.formControl$.pipe(switchMap((control) => control.valueChanges.pipe(startWith(control.value))), shareReplay(1));
+        this.values$ = this.currentFormControlValue$.pipe(map(convertMaybeToArray), shareReplay(1));
+        this.allValuesEverSelected$ = this.values$.pipe(scan((acc, values) => {
+            let result = acc;
+            if (!setContainsAllValues(acc, values)) {
+                result = addToSetCopy(acc, values);
+            }
+            return result;
+        }, new Set()), distinctUntilChanged(), map((x) => Array.from(x)), shareReplay(1));
+        this.sourceSelectValuesFromValuesState$ = this.allValuesEverSelected$.pipe(distinctUntilChanged(), switchMap((values) => this.loadSourceSelectValueForValues(values)), shareReplay(1));
+        this.loadSources$ = this._loadSources.pipe(filterMaybe(), switchMap((loadSource) => {
+            const { valueReader } = this;
+            return loadSource.pipe(switchMap((sources) => {
+                const sourceObs = sources.map((x) => x.meta.pipe(map((metaState) => ({ ...metaState, label: x.label }))));
+                if (sourceObs.length === 0) {
+                    return of(successResult([]));
+                }
+                else {
+                    return combineLatest(sourceObs).pipe(map((x) => {
+                        const statesWithValues = x.filter((y) => loadingStateHasValue(y));
+                        const loading = x.findIndex(loadingStateIsLoading) !== -1;
+                        const value = statesWithValues.map((y) => {
+                            const group = {
+                                label: y.label,
+                                values: y.value.map((meta) => ({ meta, value: valueReader(meta) }))
+                            };
+                            return group;
+                        });
+                        return {
+                            loading,
+                            value
+                        };
+                    }));
+                }
+            }));
+        }));
+        this.fromOpenSource$ = this._fromOpenSource.pipe(distinctUntilChanged((a, b) => setsAreEquivalent(a.valuesSet, b.valuesSet)), map((x) => {
+            const group = {
+                label: '',
+                values: x.values
+            };
+            return group;
+        }), shareReplay(1));
+        this.valueGroupsFromSourcesState$ = combineLatest([this.fromOpenSource$, this.loadSources$]).pipe(map(([fromOpenSourceGroup, loadSources]) => {
+            const loadSourcesValue = loadSources.value ?? [];
+            const value = [fromOpenSourceGroup, ...loadSourcesValue];
+            const result = {
+                loading: loadSources.loading,
+                value
+            };
+            return result;
+        }), shareReplay(1));
+        this.allValueGroupsState$ = this.sourceSelectValuesFromValuesState$.pipe(switchMap((sourceSelectValuesFromValues) => {
+            if (loadingStateHasValue(sourceSelectValuesFromValues)) {
+                const valuesFromValuesGroup = {
+                    label: '',
+                    values: sourceSelectValuesFromValues.value
+                };
+                return this.valueGroupsFromSourcesState$.pipe(map((sourcesState) => {
+                    const allGroups = [valuesFromValuesGroup, ...sourcesState.value];
+                    const result = {
+                        loading: sourceSelectValuesFromValues.loading || sourcesState.loading,
+                        value: allGroups
+                    };
+                    return result;
+                }));
+            }
+            else {
+                return of(beginLoading({}));
+            }
+        }), shareReplay(1));
+        this.allOptionGroupsState$ = this.allValueGroupsState$.pipe(mapLoadingStateValueWithOperator(switchMap((groups) => {
+            const allGroupsReducedByLabel = makeValuesGroupMap(groups, (x) => x.label);
+            const valuesEncountered = new Set();
+            const allUniqueValues = [];
+            const simplifiedValuesGroups = [];
+            // sort to put the blank label first
+            Array.from(allGroupsReducedByLabel.entries())
+                .sort(sortByStringFunction((x) => x[0]))
+                .forEach(([label, groups]) => {
+                const values = [];
+                groups.forEach((group) => {
+                    group.values.forEach((selectValue) => {
+                        if (!valuesEncountered.has(selectValue.value)) {
+                            values.push(selectValue);
+                            allUniqueValues.push(selectValue);
+                            valuesEncountered.add(selectValue.value);
+                        }
+                    });
+                });
+                if (values.length > 0) {
+                    simplifiedValuesGroups.push({
+                        label,
+                        values
+                    });
+                }
+            });
+            const obs = this.getDisplayValuesForSelectValues(allUniqueValues).pipe(map((displayValues) => {
+                const displayValuesMap = new Map(displayValues.map((x) => [x.value, x]));
+                const displayGroups = simplifiedValuesGroups.map((valueGroup) => {
+                    const values = filterMaybeValues(valueGroup.values.map((x) => displayValuesMap.get(x.value)));
+                    return {
+                        label: valueGroup.label,
+                        values
+                    };
+                });
+                return displayGroups;
+            }));
+            return obs;
+        })), shareReplay(1));
+        this.allOptionGroups$ = this.allOptionGroupsState$.pipe(valueFromLoadingState(), shareReplay(1));
+        this.options$ = this.allOptionGroups$.pipe(map((x) => {
+            const { included: groupedValues, excluded: nonGroupedGroup } = separateValues(x, (y) => Boolean(y.label));
+            const result = {
+                nonGroupedValues: nonGroupedGroup[0]?.values ?? [],
+                groupedValues
+            };
+            return result;
+        }), shareReplay(1));
+        this.nonGroupedValues$ = this.options$.pipe(map((x) => x.nonGroupedValues));
+        this.groupedOptions$ = this.options$.pipe(map((x) => x.groupedValues));
+        this.context = loadingStateContext({ obs: this.allOptionGroupsState$ });
+        this.handleSelectOptions = (_, context) => {
+            const { openSource } = this;
+            if (openSource) {
+                const sourceObs = openSource();
+                context.startWorkingWithObservable(sourceObs.pipe(first(), tap((result) => {
+                    const valuesToAdd = mergeArrays([result.select, result.options]);
+                    if (valuesToAdd.length) {
+                        this.addToOpenSourceMap(valuesToAdd);
+                    }
+                    if (result.select) {
+                        this.addToCurrentValue(result.select.map((x) => this.valueReader(x)));
+                    }
+                })));
+            }
+            else {
+                context.reject();
+            }
+        };
+    }
+    get sourceSelectField() {
+        return this.props;
+    }
+    get openSource() {
+        return this.props.openSource;
+    }
+    get showOpenSourceButton() {
+        return Boolean(this.openSource);
+    }
+    get loadSources() {
+        return this.props.loadSources;
+    }
+    get valueReader() {
+        return this.props.valueReader;
+    }
+    get metaLoader() {
+        return this.props.metaLoader;
+    }
+    get displayForValue() {
+        return this.props.displayForValue;
+    }
+    get selectButtonIcon() {
+        return this.props.selectButtonIcon ?? 'add';
+    }
+    get multiple() {
+        return this.props.multiple || false;
+    }
+    get refreshDisplayValues$() {
+        return this.props.refreshDisplayValues$;
+    }
+    loadSourceSelectValueForValues(values) {
+        return this.getSourceSelectValueForValues(values).pipe(map((sourceSelectValues) => successResult(sourceSelectValues)), startWithBeginLoading(), shareReplay(1));
+    }
+    getSourceSelectValueForValues(values) {
+        const { valueReader } = this;
+        return this._valueMetaHashMap.pipe(mergeMap((metaMap) => {
+            const mappingResult = values.map((hash, i) => [i, hash, metaMap.get(hash)]);
+            const { 
+            //
+            included: hasMeta, excluded: needsMeta } = separateValues(mappingResult, (x) => Boolean(x[2]));
+            let obs;
+            if (needsMeta.length > 0) {
+                // Go get the meta value.
+                const metaValuesObs = this.metaLoader(needsMeta.map((x) => x[1]));
+                obs = metaValuesObs.pipe(first(), map((metaResults) => {
+                    const metaResultsMapping = metaResults.map((meta) => ({ meta, value: valueReader(meta) }));
+                    const valueIndexHashMap = new Map(metaResultsMapping.map((x) => [x.value, x]));
+                    // Update metaMap. No need to push an update notification.
+                    metaResultsMapping.forEach((x) => metaMap.set(x.value, x));
+                    // Zip values back together.
+                    const newDisplayValues = mappingResult.map((x) => x[2] ?? valueIndexHashMap.get(x[1]));
+                    // Return display values.
+                    return newDisplayValues;
+                }));
+            }
+            else {
+                // If all display values are hashed return them
+                obs = of(hasMeta.map((x) => x[2]));
+            }
+            return obs;
+        }));
+    }
+    loadDisplayValuesForSelectValues(values) {
+        return this.getDisplayValuesForSelectValues(values).pipe(map((displayValues) => successResult(displayValues)), startWithBeginLoading(), shareReplay(1));
+    }
+    getDisplayValuesForSelectValues(values) {
+        return this._displayHashMap.pipe(mergeMap((metaMap) => {
+            const mappingResult = values.map((x) => [x, x.value]).map(([x, hash], i) => [i, hash, x, metaMap.get(hash)]);
+            const hasDisplay = mappingResult.filter((x) => Boolean(x[3]));
+            const needsDisplay = mappingResult.filter((x) => !x[3]);
+            let obs;
+            if (needsDisplay.length > 0) {
+                // Go get the display value.
+                const displayValuesObs = this.displayForValue(needsDisplay.map((x) => x[2]));
+                obs = displayValuesObs.pipe(first(), map((displayResults) => {
+                    const displayResultsMapping = displayResults.map((x) => [x, x.value]);
+                    const valueIndexHashMap = new Map(displayResultsMapping.map(([x, hash]) => [hash, x]));
+                    // Update metaMap. No need to push an update notification.
+                    displayResultsMapping.forEach(([x, hash]) => metaMap.set(hash, x));
+                    // Zip values back together.
+                    const newDisplayValues = mappingResult.map((x) => x[3] ?? valueIndexHashMap.get(x[1]));
+                    // Return display values.
+                    return newDisplayValues;
+                }));
+            }
+            else {
+                // If all display values are hashed return that.
+                obs = of(hasDisplay.map((x) => x[3]));
+            }
+            return obs;
+        }));
+    }
+    ngOnInit() {
+        const { loadSources } = this;
+        this._loadSources.next(loadSources?.() || of([]));
+        if (this.refreshDisplayValues$ != null) {
+            this._clearDisplayHashMapSub.subscription = this.refreshDisplayValues$.subscribe(() => this._displayHashMap.next(new Map()));
+        }
+        this._formControlObs.next(this.formControl);
+        // copy all values from the sources into the values hash map to prevent reloading
+        this._cacheMetaSub.subscription = this.valueGroupsFromSourcesState$.subscribe((x) => {
+            const hashMap = this._valueMetaHashMap.value;
+            x.value.forEach((x) => x.values.forEach((y) => hashMap.set(y.value, y)));
+        });
+    }
+    ngOnDestroy() {
+        super.ngOnDestroy();
+        this._valueMetaHashMap.complete();
+        this._displayHashMap.complete();
+        this._formControlObs.complete();
+        this._fromOpenSource.complete();
+        this._loadSources.complete();
+        this.context.destroy();
+    }
+    addToOpenSourceMap(input) {
+        const { valueReader } = this;
+        const { values: meta, valuesSet: initialValues } = this._fromOpenSource.value;
+        const newMetaFromInput = [];
+        const valuesSet = new Set(initialValues);
+        input.forEach((x) => {
+            const value = valueReader(x);
+            if (!valuesSet.has(value)) {
+                newMetaFromInput.push({ meta: x, value });
+                valuesSet.add(value);
+            }
+        });
+        if (newMetaFromInput.length > 0) {
+            this._fromOpenSource.next({
+                values: [...meta, ...newMetaFromInput],
+                valuesSet: valuesSet
+            });
+        }
+    }
+    addToCurrentValue(values) {
+        const currentValue = asArray(this.formControl.value);
+        const newValueArray = [...currentValue, ...values];
+        const value = this.multiple ? values : lastValue(newValueArray); // pick last value, as the last value added is the newest value.
+        this.formControl.setValue(value);
+        this.formControl.markAsDirty();
+        this.formControl.markAsTouched();
+    }
+}
+DbxFormSourceSelectFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxFormSourceSelectFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+DbxFormSourceSelectFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: DbxFormSourceSelectFieldComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<div class=\"dbx-source-select-field\">\n  <div class=\"dbx-source-select-field-content\">\n    <mat-select class=\"dbx-source-select-field-select\" [id]=\"id\" [formControl]=\"formControl\" [multiple]=\"props.multiple\">\n      <mat-option *ngFor=\"let value of nonGroupedValues$ | async\" [value]=\"value.value\">\n        {{ value.label }}\n      </mat-option>\n      <mat-optgroup *ngFor=\"let optionGroup of groupedOptions$ | async\" [label]=\"optionGroup.label\">\n        <mat-option *ngFor=\"let value of optionGroup.values\" [value]=\"value.value\">\n          {{ value.label }}\n        </mat-option>\n      </mat-optgroup>\n    </mat-select>\n    <ng-container *ngIf=\"showOpenSourceButton\">\n      <dbx-button-spacer></dbx-button-spacer>\n      <dbx-action dbxActionValue [dbxActionHandler]=\"handleSelectOptions\" class=\"dbx-source-select-field-button\">\n        <dbx-button dbxActionButton [iconOnly]=\"true\" [icon]=\"selectButtonIcon\"></dbx-button>\n      </dbx-action>\n    </ng-container>\n  </div>\n  <dbx-loading class=\"dbx-source-select-field-loading\" [linear]=\"true\" [context]=\"context\"></dbx-loading>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "component", type: i3$3.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i4$1.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i4$1.MatOptgroup, selector: "mat-optgroup", inputs: ["disabled"], exportAs: ["matOptgroup"] }, { kind: "directive", type: i3$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i2$1.DbxLoadingComponent, selector: "dbx-loading", inputs: ["show", "text", "mode", "color", "diameter", "linear", "context", "loading", "error"] }, { kind: "directive", type: i2.DbxActionButtonDirective, selector: "[dbxActionButton]" }, { kind: "component", type: i2$1.DbxButtonComponent, selector: "dbx-button", inputs: ["type", "raised", "stroked", "flat", "iconOnly", "color", "customButtonColor", "customTextColor", "customSpinnerColor"] }, { kind: "directive", type: i2$1.DbxButtonSpacerDirective, selector: "dbx-button-spacer,[dbxButtonSpacer]" }, { kind: "directive", type: i2.DbxActionDirective, selector: "dbx-action,[dbxAction],dbx-action-context,[dbxActionContext]", exportAs: ["action", "dbxAction"] }, { kind: "directive", type: i2.DbxActionHandlerDirective, selector: "[dbxActionHandler]", inputs: ["dbxActionHandler"] }, { kind: "directive", type: i2.DbxActionValueDirective, selector: "[dbxActionValue]", inputs: ["dbxActionValue"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxFormSourceSelectFieldComponent, decorators: [{
+            type: Component,
+            args: [{ template: "<div class=\"dbx-source-select-field\">\n  <div class=\"dbx-source-select-field-content\">\n    <mat-select class=\"dbx-source-select-field-select\" [id]=\"id\" [formControl]=\"formControl\" [multiple]=\"props.multiple\">\n      <mat-option *ngFor=\"let value of nonGroupedValues$ | async\" [value]=\"value.value\">\n        {{ value.label }}\n      </mat-option>\n      <mat-optgroup *ngFor=\"let optionGroup of groupedOptions$ | async\" [label]=\"optionGroup.label\">\n        <mat-option *ngFor=\"let value of optionGroup.values\" [value]=\"value.value\">\n          {{ value.label }}\n        </mat-option>\n      </mat-optgroup>\n    </mat-select>\n    <ng-container *ngIf=\"showOpenSourceButton\">\n      <dbx-button-spacer></dbx-button-spacer>\n      <dbx-action dbxActionValue [dbxActionHandler]=\"handleSelectOptions\" class=\"dbx-source-select-field-button\">\n        <dbx-button dbxActionButton [iconOnly]=\"true\" [icon]=\"selectButtonIcon\"></dbx-button>\n      </dbx-action>\n    </ng-container>\n  </div>\n  <dbx-loading class=\"dbx-source-select-field-loading\" [linear]=\"true\" [context]=\"context\"></dbx-loading>\n</div>\n" }]
+        }] });
+
+function sourceSelectField(config) {
+    const { key, materialFormField } = config;
+    return formlyField({
+        key,
+        type: 'sourceselectfield',
+        ...propsAndConfigForFieldConfig(config, {
+            ...materialFormField,
+            ...config,
+            autocomplete: false
+        })
+    });
+}
+
+class DbxFormFormlySourceSelectModule {
+}
+DbxFormFormlySourceSelectModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxFormFormlySourceSelectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+DbxFormFormlySourceSelectModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: DbxFormFormlySourceSelectModule, declarations: [DbxFormSourceSelectFieldComponent], imports: [CommonModule,
+        FormsModule,
+        MatInputModule,
+        MatDividerModule,
+        MatFormFieldModule,
+        MatSelectModule,
+        MatButtonModule,
+        MatDatepickerModule,
+        MatNativeDateModule,
+        MatMenuModule,
+        ReactiveFormsModule,
+        DbxDatePipeModule,
+        DbxLoadingModule,
+        DbxButtonModule,
+        DbxActionModule,
+        MatChipsModule,
+        MatIconModule,
+        FlexLayoutModule, i1$2.FormlyModule], exports: [DbxFormSourceSelectFieldComponent] });
+DbxFormFormlySourceSelectModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxFormFormlySourceSelectModule, imports: [CommonModule,
+        FormsModule,
+        MatInputModule,
+        MatDividerModule,
+        MatFormFieldModule,
+        MatSelectModule,
+        MatButtonModule,
+        MatDatepickerModule,
+        MatNativeDateModule,
+        MatMenuModule,
+        ReactiveFormsModule,
+        DbxDatePipeModule,
+        DbxLoadingModule,
+        DbxButtonModule,
+        DbxActionModule,
+        MatChipsModule,
+        MatIconModule,
+        FlexLayoutModule,
+        FormlyModule.forChild({
+            types: [{ name: 'sourceselectfield', component: DbxFormSourceSelectFieldComponent, wrappers: ['form-field'] }]
+        })] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxFormFormlySourceSelectModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        FormsModule,
+                        MatInputModule,
+                        MatDividerModule,
+                        MatFormFieldModule,
+                        MatSelectModule,
+                        MatButtonModule,
+                        MatDatepickerModule,
+                        MatNativeDateModule,
+                        MatMenuModule,
+                        ReactiveFormsModule,
+                        DbxDatePipeModule,
+                        DbxLoadingModule,
+                        DbxButtonModule,
+                        DbxActionModule,
+                        MatChipsModule,
+                        MatIconModule,
+                        FlexLayoutModule,
+                        FormlyModule.forChild({
+                            types: [{ name: 'sourceselectfield', component: DbxFormSourceSelectFieldComponent, wrappers: ['form-field'] }]
+                        })
+                    ],
+                    declarations: [DbxFormSourceSelectFieldComponent],
+                    exports: [DbxFormSourceSelectFieldComponent]
+                }]
+        }] });
+
 function valueSelectionField(config) {
-    const { key, native = false, addClearOption = false, selectAllOption: inputSelectAllOption, options: inputOptions } = config;
+    const { key, native = false, addClearOption = false, selectAllOption: inputSelectAllOption, options: inputOptions, materialFormField } = config;
     let selectAllOptionConfig;
     if (inputSelectAllOption) {
         selectAllOptionConfig = {
@@ -2688,6 +3086,7 @@ function valueSelectionField(config) {
         key,
         type: native ? 'native-select' : 'select',
         ...propsAndConfigForFieldConfig(config, {
+            ...materialFormField,
             options,
             multiple: config.multiple ?? false,
             ...selectAllOptionConfig
@@ -2709,14 +3108,14 @@ function addValueSelectionOptionFunction(label) {
 class DbxFormFormlySelectionModule {
 }
 DbxFormFormlySelectionModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxFormFormlySelectionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-DbxFormFormlySelectionModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: DbxFormFormlySelectionModule, imports: [CommonModule], exports: [DbxFormFormlyDbxListFieldModule, DbxFormFormlyPickableFieldModule, DbxFormFormlySearchableFieldModule] });
-DbxFormFormlySelectionModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxFormFormlySelectionModule, imports: [CommonModule, DbxFormFormlyDbxListFieldModule, DbxFormFormlyPickableFieldModule, DbxFormFormlySearchableFieldModule] });
+DbxFormFormlySelectionModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: DbxFormFormlySelectionModule, imports: [CommonModule], exports: [DbxFormFormlyDbxListFieldModule, DbxFormFormlyPickableFieldModule, DbxFormFormlySearchableFieldModule, DbxFormFormlySourceSelectModule] });
+DbxFormFormlySelectionModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxFormFormlySelectionModule, imports: [CommonModule, DbxFormFormlyDbxListFieldModule, DbxFormFormlyPickableFieldModule, DbxFormFormlySearchableFieldModule, DbxFormFormlySourceSelectModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxFormFormlySelectionModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule],
                     declarations: [],
-                    exports: [DbxFormFormlyDbxListFieldModule, DbxFormFormlyPickableFieldModule, DbxFormFormlySearchableFieldModule]
+                    exports: [DbxFormFormlyDbxListFieldModule, DbxFormFormlyPickableFieldModule, DbxFormFormlySearchableFieldModule, DbxFormFormlySourceSelectModule]
                 }]
         }] });
 
@@ -2775,7 +3174,7 @@ DbxTextEditorFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.
       </div>
       <dbx-form-description *ngIf="description">{{ description }}</dbx-form-description>
     </div>
-  `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.DbxLabelComponent, selector: "dbx-label" }, { kind: "component", type: i2$1.DbxFormDescriptionComponent, selector: "dbx-form-description" }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i4$4.NgxEditorComponent, selector: "ngx-editor", inputs: ["editor", "outputFormat", "placeholder"], outputs: ["focusOut", "focusIn"] }, { kind: "component", type: i4$4.MenuComponent, selector: "ngx-editor-menu", inputs: ["toolbar", "colorPresets", "disabled", "editor", "customMenuRef", "dropdownPlacement"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] });
+  `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.DbxLabelComponent, selector: "dbx-label" }, { kind: "component", type: i2$1.DbxFormDescriptionComponent, selector: "dbx-form-description" }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i4$5.NgxEditorComponent, selector: "ngx-editor", inputs: ["editor", "outputFormat", "placeholder"], outputs: ["focusOut", "focusIn"] }, { kind: "component", type: i4$5.MenuComponent, selector: "ngx-editor-menu", inputs: ["toolbar", "colorPresets", "disabled", "editor", "customMenuRef", "dropdownPlacement"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxTextEditorFieldComponent, decorators: [{
             type: Component,
             args: [{
@@ -2837,7 +3236,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
         }] });
 
 function textEditorField(config) {
-    const { key, minLength, maxLength } = config;
+    const { key, minLength, maxLength, materialFormField } = config;
     const fieldConfig = formlyField({
         key,
         type: 'texteditor',
@@ -2848,6 +3247,7 @@ function textEditorField(config) {
             updateOn: 'blur'
         },
         ...propsAndConfigForFieldConfig(config, {
+            ...materialFormField,
             minLength,
             maxLength
         })
@@ -3000,16 +3400,17 @@ DbxFormRepeatArrayTypeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion:
         <div class="dbx-form-repeat-array-fields" cdkDropList [cdkDropListDisabled]="disableRearrange" (cdkDropListDropped)="drop($event)">
           <div class="dbx-form-repeat-array-field" cdkDrag cdkDragLockAxis="y" *ngFor="let field of field.fieldGroup; trackBy: trackByFunction; let i = index; let last = last">
             <div class="dbx-form-repeat-array-drag-placeholder" *cdkDragPlaceholder></div>
-            <dbx-bar class="dbx-bar-fixed-height">
-              <button *ngIf="!disableRearrange" cdkDragHandle mat-flat-button><mat-icon>drag_handle</mat-icon></button>
+            <dbx-bar class="dbx-form-repeat-array-bar dbx-bar-fixed-height">
+              <button *ngIf="!disableRearrange" cdkDragHandle mat-stroked-button><mat-icon>drag_handle</mat-icon></button>
               <dbx-button-spacer></dbx-button-spacer>
               <h4>
                 <span class="repeat-array-number">{{ i + 1 }}</span>
                 <span>{{ labelForItem(field, i) }}</span>
               </h4>
               <span class="dbx-spacer"></span>
-              <dbx-button *ngIf="allowDuplicate(i)" [text]="duplicateText" (buttonClick)="duplicate(i)"></dbx-button>
-              <dbx-button *ngIf="allowRemove(i)" color="warn" [text]="removeText" (buttonClick)="remove(i)"></dbx-button>
+              <dbx-button *ngIf="allowDuplicate(i)" [stroked]="true" [text]="duplicateText" (buttonClick)="duplicate(i)"></dbx-button>
+              <dbx-button-spacer></dbx-button-spacer>
+              <dbx-button *ngIf="allowRemove(i)" color="warn" [stroked]="true" [text]="removeText" (buttonClick)="remove(i)"></dbx-button>
             </dbx-bar>
             <formly-field class="dbx-form-repeat-array-field-content" [field]="field"></formly-field>
           </div>
@@ -3020,7 +3421,7 @@ DbxFormRepeatArrayTypeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion:
         </div>
       </dbx-subsection>
     </div>
-  `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1$1.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"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i4$5.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i4$5.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i4$5.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "directive", type: i4$5.CdkDragPlaceholder, selector: "ng-template[cdkDragPlaceholder]", inputs: ["data"] }, { kind: "component", type: i2$1.DbxSubSectionComponent, selector: "dbx-subsection" }, { kind: "directive", type: i2$1.DbxBarDirective, selector: "dbx-bar,[dbxBar]", inputs: ["color"] }, { kind: "component", type: i2$1.DbxButtonComponent, selector: "dbx-button", inputs: ["type", "raised", "stroked", "flat", "color", "customButtonColor", "customTextColor", "customSpinnerColor"] }, { kind: "directive", type: i2$1.DbxButtonSpacerDirective, selector: "dbx-button-spacer,[dbxButtonSpacer]" }, { kind: "component", type: i1$2.FormlyField, selector: "formly-field", inputs: ["field"] }] });
+  `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1$1.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"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i4$6.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i4$6.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i4$6.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "directive", type: i4$6.CdkDragPlaceholder, selector: "ng-template[cdkDragPlaceholder]", inputs: ["data"] }, { kind: "component", type: i2$1.DbxSubSectionComponent, selector: "dbx-subsection" }, { kind: "directive", type: i2$1.DbxBarDirective, selector: "dbx-bar,[dbxBar]", inputs: ["color"] }, { kind: "component", type: i2$1.DbxButtonComponent, selector: "dbx-button", inputs: ["type", "raised", "stroked", "flat", "iconOnly", "color", "customButtonColor", "customTextColor", "customSpinnerColor"] }, { kind: "directive", type: i2$1.DbxButtonSpacerDirective, selector: "dbx-button-spacer,[dbxButtonSpacer]" }, { kind: "component", type: i1$2.FormlyField, selector: "formly-field", inputs: ["field"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxFormRepeatArrayTypeComponent, decorators: [{
             type: Component,
             args: [{
@@ -3031,16 +3432,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
         <div class="dbx-form-repeat-array-fields" cdkDropList [cdkDropListDisabled]="disableRearrange" (cdkDropListDropped)="drop($event)">
           <div class="dbx-form-repeat-array-field" cdkDrag cdkDragLockAxis="y" *ngFor="let field of field.fieldGroup; trackBy: trackByFunction; let i = index; let last = last">
             <div class="dbx-form-repeat-array-drag-placeholder" *cdkDragPlaceholder></div>
-            <dbx-bar class="dbx-bar-fixed-height">
-              <button *ngIf="!disableRearrange" cdkDragHandle mat-flat-button><mat-icon>drag_handle</mat-icon></button>
+            <dbx-bar class="dbx-form-repeat-array-bar dbx-bar-fixed-height">
+              <button *ngIf="!disableRearrange" cdkDragHandle mat-stroked-button><mat-icon>drag_handle</mat-icon></button>
               <dbx-button-spacer></dbx-button-spacer>
               <h4>
                 <span class="repeat-array-number">{{ i + 1 }}</span>
                 <span>{{ labelForItem(field, i) }}</span>
               </h4>
               <span class="dbx-spacer"></span>
-              <dbx-button *ngIf="allowDuplicate(i)" [text]="duplicateText" (buttonClick)="duplicate(i)"></dbx-button>
-              <dbx-button *ngIf="allowRemove(i)" color="warn" [text]="removeText" (buttonClick)="remove(i)"></dbx-button>
+              <dbx-button *ngIf="allowDuplicate(i)" [stroked]="true" [text]="duplicateText" (buttonClick)="duplicate(i)"></dbx-button>
+              <dbx-button-spacer></dbx-button-spacer>
+              <dbx-button *ngIf="allowRemove(i)" color="warn" [stroked]="true" [text]="removeText" (buttonClick)="remove(i)"></dbx-button>
             </dbx-bar>
             <formly-field class="dbx-form-repeat-array-field-content" [field]="field"></formly-field>
           </div>
@@ -3145,22 +3547,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
         }] });
 
 function toggleField(config) {
-    const { key, defaultValue } = config;
+    const { key, defaultValue, materialFormField } = config;
     return formlyField({
         key,
         type: 'toggle',
         wrappers: ['autotouch', 'form-field'],
         defaultValue: defaultValue ?? false,
-        ...propsAndConfigForFieldConfig(config)
+        ...propsAndConfigForFieldConfig(config, {
+            appearance: 'standard',
+            ...materialFormField
+        })
     });
 }
 function checkboxField(config) {
-    const { key, defaultValue } = config;
+    const { key, defaultValue, materialFormField } = config;
     return formlyField({
         key,
         type: 'checkbox',
         defaultValue: defaultValue ?? false,
-        ...propsAndConfigForFieldConfig(config)
+        ...propsAndConfigForFieldConfig(config, {
+            appearance: 'standard',
+            ...materialFormField
+        })
     });
 }
 /*
@@ -3590,10 +3998,10 @@ class DbxDateTimeFieldComponent extends FieldType$1 {
     }
 }
 DbxDateTimeFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxDateTimeFieldComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-DbxDateTimeFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: DbxDateTimeFieldComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<div class=\"dbx-datetime-field\" fxLayout=\"row wrap\" fxLayout.xs=\"column wrap\" fxLayoutAlign=\"space-evenly stretch\">\n  <!-- Date -->\n  <div class=\"dbx-datetime-row\" fxFlex.lt-sm=\"100\" [fxFlex]=\"dateOnly ? '100' : '50'\" *ngIf=\"showDateInput\">\n    <ng-container *ngTemplateOutlet=\"dateInputTemplate\"></ng-container>\n  </div>\n  <!-- Time -->\n  <div class=\"dbx-datetime-row\" fxFlex.lt-sm=\"100\" [fxFlex]=\"showDateInput ? '50' : '100'\">\n    <ng-container *ngIf=\"showTimeInput$ | async\">\n      <ng-container *ngTemplateOutlet=\"timeMenuAndInputTemplate\"></ng-container>\n    </ng-container>\n    <div class=\"add-time-button-wrapper\" *ngIf=\"showAddTime$ | async\">\n      <button mat-button class=\"add-time-button\" ngClass.lt-sm=\"add-time-button-full\" (click)=\"addTime()\">\n        <mat-icon>timer</mat-icon>\n        Add Time\n      </button>\n    </div>\n  </div>\n  <div *ngIf=\"!hideDateHint\" class=\"dbx-datetime-row dbx-datetime-hint-row\" fxFlex=\"100\">\n    <div class=\"dbx-hint\" [ngSwitch]=\"fullDay$ | async\">\n      <small *ngSwitchCase=\"true\">\n        <b class=\"dbx-ok\">{{ allDayLabel }}</b>\n        {{ displayValue$ | async | date: 'fullDate' }} ({{ displayValue$ | async | dateDistance }})\n      </small>\n      <small *ngSwitchCase=\"false\">\n        <ng-container *ngIf=\"value$ | async\">\n          <b class=\"dbx-ok\">{{ atTimeLabel }}</b>\n          {{ displayValue$ | async | date: 'medium' }} ({{ displayValue$ | async | timeDistance }})\n        </ng-container>\n      </small>\n    </div>\n  </div>\n</div>\n\n<!-- Date Input Template -->\n<ng-template #dateInputTemplate>\n  <button *ngIf=\"!hideDatePicker\" mat-icon-button (click)=\"picker.open()\" [disabled]=\"disabled\">\n    <mat-icon>calendar_today</mat-icon>\n  </button>\n  <mat-form-field class=\"dbx-datetime-row-field\">\n    <mat-label>{{ dateLabel }}</mat-label>\n    <input #dateInput matInput [min]=\"dateInputMin$ | async\" [max]=\"dateInputMax$ | async\" [matDatepicker]=\"picker\" [matDatepickerFilter]=\"(pickerFilter$ | async) || defaultPickerFilter\" (dateChange)=\"datePicked($event)\" [value]=\"dateValue$ | async\" (keydown)=\"keydownOnDateInput($event)\" />\n    <mat-datepicker #picker></mat-datepicker>\n  </mat-form-field>\n</ng-template>\n\n<!-- Time Menu/Input Template -->\n<ng-template #timeMenuAndInputTemplate>\n  <button mat-icon-button [matMenuTriggerFor]=\"timemenu\" aria-label=\"opens the time menu\" [disabled]=\"disabled\">\n    <mat-icon>timer</mat-icon>\n  </button>\n  <mat-menu #timemenu=\"matMenu\">\n    <ng-container *ngIf=\"timeMode === 'optional'\">\n      <button mat-menu-item (click)=\"removeTime()\">\n        <span>Remove Time</span>\n      </button>\n      <mat-divider></mat-divider>\n    </ng-container>\n    <button mat-menu-item (click)=\"setLogicalTime('now')\">\n      <span>Now</span>\n    </button>\n    <button mat-menu-item (click)=\"setTime('12:00AM')\">\n      <span>Midnight</span>\n    </button>\n    <button mat-menu-item (click)=\"setTime('6:00AM')\">\n      <span>6:00AM</span>\n    </button>\n    <button mat-menu-item (click)=\"setTime('8:00AM')\">\n      <span>8:00AM</span>\n    </button>\n    <button mat-menu-item (click)=\"setTime('10:00AM')\">\n      <span>10:00AM</span>\n    </button>\n    <button mat-menu-item (click)=\"setTime('12:00PM')\">\n      <span>Noon</span>\n    </button>\n    <button mat-menu-item (click)=\"setTime('2:00PM')\">\n      <span>2:00PM</span>\n    </button>\n    <button mat-menu-item (click)=\"setTime('5:00PM')\">\n      <span>5:00PM</span>\n    </button>\n  </mat-menu>\n  <mat-form-field class=\"dbx-datetime-row-field\">\n    <mat-label>{{ timeLabel }}</mat-label>\n    <input #timeInput matInput [formControl]=\"timeInputCtrl\" (focus)=\"focusTime()\" (focusout)=\"focusOutTime()\" (keydown)=\"keydownOnTimeInput($event)\" />\n  </mat-form-field>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "component", type: i3$4.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4$2.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"] }, { kind: "component", type: i5$1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i1$1.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"] }, { kind: "component", type: i7.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i7.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i8.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i8.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i8.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "directive", type: i3$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i3$3.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"] }, { kind: "directive", type: i3$3.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"] }, { kind: "directive", type: i3$3.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"] }, { kind: "directive", type: i2$3.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.DatePipe, name: "date" }, { kind: "pipe", type: i2.TimeDistancePipe, name: "timeDistance" }, { kind: "pipe", type: i2.DateDistancePipe, name: "dateDistance" }] });
+DbxDateTimeFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: DbxDateTimeFieldComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<div class=\"dbx-datetime-field\" fxLayout=\"row wrap\" fxLayout.xs=\"column wrap\" fxLayoutAlign=\"space-evenly stretch\">\n  <!-- Date -->\n  <div class=\"dbx-datetime-row\" fxFlex.lt-sm=\"100\" [fxFlex]=\"dateOnly ? '100' : '50'\" *ngIf=\"showDateInput\">\n    <ng-container *ngTemplateOutlet=\"dateInputTemplate\"></ng-container>\n    <!-- Additional spacing -->\n    <dbx-button-spacer *ngIf=\"!dateOnly\"></dbx-button-spacer>\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 *ngIf=\"showAddTime$ | async\" class=\"add-time-button-wrapper\">\n      <button mat-button class=\"dbx-button-spacer add-time-button\" ngClass.lt-sm=\"add-time-button-full\" (click)=\"addTime()\">\n        <mat-icon>timer</mat-icon>\n        Add Time\n      </button>\n    </div>\n  </div>\n  <div *ngIf=\"!hideDateHint\" class=\"dbx-datetime-row dbx-datetime-hint-row\" fxFlex=\"100\">\n    <div class=\"dbx-hint\" [ngSwitch]=\"fullDay$ | async\">\n      <small *ngSwitchCase=\"true\">\n        <b class=\"dbx-ok\">{{ allDayLabel }}</b>\n        {{ displayValue$ | async | date: 'fullDate' }} ({{ displayValue$ | async | dateDistance }})\n      </small>\n      <small *ngSwitchCase=\"false\">\n        <ng-container *ngIf=\"value$ | async\">\n          <b class=\"dbx-ok\">{{ atTimeLabel }}</b>\n          {{ displayValue$ | async | date: 'medium' }} ({{ displayValue$ | async | timeDistance }})\n        </ng-container>\n      </small>\n    </div>\n  </div>\n</div>\n\n<!-- Date Input Template -->\n<ng-template #dateInputTemplate>\n  <button class=\"dbx-button-spacer\" *ngIf=\"!hideDatePicker\" mat-icon-button (click)=\"picker.open()\" [disabled]=\"disabled\">\n    <mat-icon>calendar_today</mat-icon>\n  </button>\n  <mat-form-field class=\"dbx-datetime-row-field\" [ngClass]=\"{ 'dbx-datetime-row-field-full-width': hideDatePicker }\">\n    <mat-label>{{ dateLabel }}</mat-label>\n    <input #dateInput matInput [min]=\"dateInputMin$ | async\" [max]=\"dateInputMax$ | async\" [matDatepicker]=\"picker\" [matDatepickerFilter]=\"(pickerFilter$ | async) || defaultPickerFilter\" (dateChange)=\"datePicked($event)\" [value]=\"dateValue$ | async\" (keydown)=\"keydownOnDateInput($event)\" />\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 class=\"dbx-button-spacer\" mat-icon-button [matMenuTriggerFor]=\"timemenu\" aria-label=\"opens the time menu\" [disabled]=\"disabled\">\n    <mat-icon>timer</mat-icon>\n  </button>\n  <mat-menu #timemenu=\"matMenu\">\n    <ng-container *ngIf=\"timeMode === 'optional'\">\n      <button mat-menu-item (click)=\"removeTime()\">\n        <span>Remove Time</span>\n      </button>\n      <mat-divider></mat-divider>\n    </ng-container>\n    <button mat-menu-item (click)=\"setLogicalTime('now')\">\n      <span>Now</span>\n    </button>\n    <button mat-menu-item (click)=\"setTime('12:00AM')\">\n      <span>Midnight</span>\n    </button>\n    <button mat-menu-item (click)=\"setTime('6:00AM')\">\n      <span>6:00AM</span>\n    </button>\n    <button mat-menu-item (click)=\"setTime('8:00AM')\">\n      <span>8:00AM</span>\n    </button>\n    <button mat-menu-item (click)=\"setTime('10:00AM')\">\n      <span>10:00AM</span>\n    </button>\n    <button mat-menu-item (click)=\"setTime('12:00PM')\">\n      <span>Noon</span>\n    </button>\n    <button mat-menu-item (click)=\"setTime('2:00PM')\">\n      <span>2:00PM</span>\n    </button>\n    <button mat-menu-item (click)=\"setTime('5:00PM')\">\n      <span>5:00PM</span>\n    </button>\n  </mat-menu>\n  <mat-form-field class=\"dbx-datetime-row-field\">\n    <mat-label>{{ timeLabel }}</mat-label>\n    <input #timeInput matInput [formControl]=\"timeInputCtrl\" (focus)=\"focusTime()\" (focusout)=\"focusOutTime()\" (keydown)=\"keydownOnTimeInput($event)\" />\n  </mat-form-field>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "component", type: i3$4.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4$3.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"] }, { kind: "component", type: i5$1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: i2$1.DbxButtonSpacerDirective, selector: "dbx-button-spacer,[dbxButtonSpacer]" }, { kind: "component", type: i1$1.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"] }, { kind: "component", type: i8.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i8.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i9.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i9.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i9.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "directive", type: i3$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i3$2.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"] }, { kind: "directive", type: i3$2.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"] }, { kind: "directive", type: i3$2.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"] }, { kind: "directive", type: i2$3.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.DatePipe, name: "date" }, { kind: "pipe", type: i2.TimeDistancePipe, name: "timeDistance" }, { kind: "pipe", type: i2.DateDistancePipe, name: "dateDistance" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxDateTimeFieldComponent, decorators: [{
             type: Component,
-            args: [{ template: "<div class=\"dbx-datetime-field\" fxLayout=\"row wrap\" fxLayout.xs=\"column wrap\" fxLayoutAlign=\"space-evenly stretch\">\n  <!-- Date -->\n  <div class=\"dbx-datetime-row\" fxFlex.lt-sm=\"100\" [fxFlex]=\"dateOnly ? '100' : '50'\" *ngIf=\"showDateInput\">\n    <ng-container *ngTemplateOutlet=\"dateInputTemplate\"></ng-container>\n  </div>\n  <!-- Time -->\n  <div class=\"dbx-datetime-row\" fxFlex.lt-sm=\"100\" [fxFlex]=\"showDateInput ? '50' : '100'\">\n    <ng-container *ngIf=\"showTimeInput$ | async\">\n      <ng-container *ngTemplateOutlet=\"timeMenuAndInputTemplate\"></ng-container>\n    </ng-container>\n    <div class=\"add-time-button-wrapper\" *ngIf=\"showAddTime$ | async\">\n      <button mat-button class=\"add-time-button\" ngClass.lt-sm=\"add-time-button-full\" (click)=\"addTime()\">\n        <mat-icon>timer</mat-icon>\n        Add Time\n      </button>\n    </div>\n  </div>\n  <div *ngIf=\"!hideDateHint\" class=\"dbx-datetime-row dbx-datetime-hint-row\" fxFlex=\"100\">\n    <div class=\"dbx-hint\" [ngSwitch]=\"fullDay$ | async\">\n      <small *ngSwitchCase=\"true\">\n        <b class=\"dbx-ok\">{{ allDayLabel }}</b>\n        {{ displayValue$ | async | date: 'fullDate' }} ({{ displayValue$ | async | dateDistance }})\n      </small>\n      <small *ngSwitchCase=\"false\">\n        <ng-container *ngIf=\"value$ | async\">\n          <b class=\"dbx-ok\">{{ atTimeLabel }}</b>\n          {{ displayValue$ | async | date: 'medium' }} ({{ displayValue$ | async | timeDistance }})\n        </ng-container>\n      </small>\n    </div>\n  </div>\n</div>\n\n<!-- Date Input Template -->\n<ng-template #dateInputTemplate>\n  <button *ngIf=\"!hideDatePicker\" mat-icon-button (click)=\"picker.open()\" [disabled]=\"disabled\">\n    <mat-icon>calendar_today</mat-icon>\n  </button>\n  <mat-form-field class=\"dbx-datetime-row-field\">\n    <mat-label>{{ dateLabel }}</mat-label>\n    <input #dateInput matInput [min]=\"dateInputMin$ | async\" [max]=\"dateInputMax$ | async\" [matDatepicker]=\"picker\" [matDatepickerFilter]=\"(pickerFilter$ | async) || defaultPickerFilter\" (dateChange)=\"datePicked($event)\" [value]=\"dateValue$ | async\" (keydown)=\"keydownOnDateInput($event)\" />\n    <mat-datepicker #picker></mat-datepicker>\n  </mat-form-field>\n</ng-template>\n\n<!-- Time Menu/Input Template -->\n<ng-template #timeMenuAndInputTemplate>\n  <button mat-icon-button [matMenuTriggerFor]=\"timemenu\" aria-label=\"opens the time menu\" [disabled]=\"disabled\">\n    <mat-icon>timer</mat-icon>\n  </button>\n  <mat-menu #timemenu=\"matMenu\">\n    <ng-container *ngIf=\"timeMode === 'optional'\">\n      <button mat-menu-item (click)=\"removeTime()\">\n        <span>Remove Time</span>\n      </button>\n      <mat-divider></mat-divider>\n    </ng-container>\n    <button mat-menu-item (click)=\"setLogicalTime('now')\">\n      <span>Now</span>\n    </button>\n    <button mat-menu-item (click)=\"setTime('12:00AM')\">\n      <span>Midnight</span>\n    </button>\n    <button mat-menu-item (click)=\"setTime('6:00AM')\">\n      <span>6:00AM</span>\n    </button>\n    <button mat-menu-item (click)=\"setTime('8:00AM')\">\n      <span>8:00AM</span>\n    </button>\n    <button mat-menu-item (click)=\"setTime('10:00AM')\">\n      <span>10:00AM</span>\n    </button>\n    <button mat-menu-item (click)=\"setTime('12:00PM')\">\n      <span>Noon</span>\n    </button>\n    <button mat-menu-item (click)=\"setTime('2:00PM')\">\n      <span>2:00PM</span>\n    </button>\n    <button mat-menu-item (click)=\"setTime('5:00PM')\">\n      <span>5:00PM</span>\n    </button>\n  </mat-menu>\n  <mat-form-field class=\"dbx-datetime-row-field\">\n    <mat-label>{{ timeLabel }}</mat-label>\n    <input #timeInput matInput [formControl]=\"timeInputCtrl\" (focus)=\"focusTime()\" (focusout)=\"focusOutTime()\" (keydown)=\"keydownOnTimeInput($event)\" />\n  </mat-form-field>\n</ng-template>\n" }]
+            args: [{ template: "<div class=\"dbx-datetime-field\" fxLayout=\"row wrap\" fxLayout.xs=\"column wrap\" fxLayoutAlign=\"space-evenly stretch\">\n  <!-- Date -->\n  <div class=\"dbx-datetime-row\" fxFlex.lt-sm=\"100\" [fxFlex]=\"dateOnly ? '100' : '50'\" *ngIf=\"showDateInput\">\n    <ng-container *ngTemplateOutlet=\"dateInputTemplate\"></ng-container>\n    <!-- Additional spacing -->\n    <dbx-button-spacer *ngIf=\"!dateOnly\"></dbx-button-spacer>\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 *ngIf=\"showAddTime$ | async\" class=\"add-time-button-wrapper\">\n      <button mat-button class=\"dbx-button-spacer add-time-button\" ngClass.lt-sm=\"add-time-button-full\" (click)=\"addTime()\">\n        <mat-icon>timer</mat-icon>\n        Add Time\n      </button>\n    </div>\n  </div>\n  <div *ngIf=\"!hideDateHint\" class=\"dbx-datetime-row dbx-datetime-hint-row\" fxFlex=\"100\">\n    <div class=\"dbx-hint\" [ngSwitch]=\"fullDay$ | async\">\n      <small *ngSwitchCase=\"true\">\n        <b class=\"dbx-ok\">{{ allDayLabel }}</b>\n        {{ displayValue$ | async | date: 'fullDate' }} ({{ displayValue$ | async | dateDistance }})\n      </small>\n      <small *ngSwitchCase=\"false\">\n        <ng-container *ngIf=\"value$ | async\">\n          <b class=\"dbx-ok\">{{ atTimeLabel }}</b>\n          {{ displayValue$ | async | date: 'medium' }} ({{ displayValue$ | async | timeDistance }})\n        </ng-container>\n      </small>\n    </div>\n  </div>\n</div>\n\n<!-- Date Input Template -->\n<ng-template #dateInputTemplate>\n  <button class=\"dbx-button-spacer\" *ngIf=\"!hideDatePicker\" mat-icon-button (click)=\"picker.open()\" [disabled]=\"disabled\">\n    <mat-icon>calendar_today</mat-icon>\n  </button>\n  <mat-form-field class=\"dbx-datetime-row-field\" [ngClass]=\"{ 'dbx-datetime-row-field-full-width': hideDatePicker }\">\n    <mat-label>{{ dateLabel }}</mat-label>\n    <input #dateInput matInput [min]=\"dateInputMin$ | async\" [max]=\"dateInputMax$ | async\" [matDatepicker]=\"picker\" [matDatepickerFilter]=\"(pickerFilter$ | async) || defaultPickerFilter\" (dateChange)=\"datePicked($event)\" [value]=\"dateValue$ | async\" (keydown)=\"keydownOnDateInput($event)\" />\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 class=\"dbx-button-spacer\" mat-icon-button [matMenuTriggerFor]=\"timemenu\" aria-label=\"opens the time menu\" [disabled]=\"disabled\">\n    <mat-icon>timer</mat-icon>\n  </button>\n  <mat-menu #timemenu=\"matMenu\">\n    <ng-container *ngIf=\"timeMode === 'optional'\">\n      <button mat-menu-item (click)=\"removeTime()\">\n        <span>Remove Time</span>\n      </button>\n      <mat-divider></mat-divider>\n    </ng-container>\n    <button mat-menu-item (click)=\"setLogicalTime('now')\">\n      <span>Now</span>\n    </button>\n    <button mat-menu-item (click)=\"setTime('12:00AM')\">\n      <span>Midnight</span>\n    </button>\n    <button mat-menu-item (click)=\"setTime('6:00AM')\">\n      <span>6:00AM</span>\n    </button>\n    <button mat-menu-item (click)=\"setTime('8:00AM')\">\n      <span>8:00AM</span>\n    </button>\n    <button mat-menu-item (click)=\"setTime('10:00AM')\">\n      <span>10:00AM</span>\n    </button>\n    <button mat-menu-item (click)=\"setTime('12:00PM')\">\n      <span>Noon</span>\n    </button>\n    <button mat-menu-item (click)=\"setTime('2:00PM')\">\n      <span>2:00PM</span>\n    </button>\n    <button mat-menu-item (click)=\"setTime('5:00PM')\">\n      <span>5:00PM</span>\n    </button>\n  </mat-menu>\n  <mat-form-field class=\"dbx-datetime-row-field\">\n    <mat-label>{{ timeLabel }}</mat-label>\n    <input #timeInput matInput [formControl]=\"timeInputCtrl\" (focus)=\"focusTime()\" (focusout)=\"focusOutTime()\" (keydown)=\"keydownOnTimeInput($event)\" />\n  </mat-form-field>\n</ng-template>\n" }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; } });
 
 class DbxFormFormlyDateFieldModule {
@@ -3604,6 +4012,7 @@ DbxFormFormlyDateFieldModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.
         MatInputModule,
         MatDividerModule,
         MatFormFieldModule,
+        DbxButtonModule,
         MatButtonModule,
         MatDatepickerModule,
         MatNativeDateModule,
@@ -3618,6 +4027,7 @@ DbxFormFormlyDateFieldModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.
         MatInputModule,
         MatDividerModule,
         MatFormFieldModule,
+        DbxButtonModule,
         MatButtonModule,
         MatDatepickerModule,
         MatNativeDateModule,
@@ -3639,6 +4049,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
                         MatInputModule,
                         MatDividerModule,
                         MatFormFieldModule,
+                        DbxButtonModule,
                         MatButtonModule,
                         MatDatepickerModule,
                         MatNativeDateModule,
@@ -3672,11 +4083,13 @@ function timeOnlyField(config = {}) {
     });
 }
 function dateTimeField(config = {}) {
-    const { key = 'date', dateLabel, timeLabel, allDayLabel, atTimeLabel, timeMode = DbxDateTimeFieldTimeMode.REQUIRED, valueMode, fullDayInUTC, fullDayFieldName, getConfigObs, getSyncFieldsObs, hideDatePicker, hideDateHint, timeOnly = false } = config;
+    const { key = 'date', dateLabel, timeLabel, allDayLabel, atTimeLabel, timeMode = DbxDateTimeFieldTimeMode.REQUIRED, valueMode, fullDayInUTC, fullDayFieldName, getConfigObs, getSyncFieldsObs, hideDatePicker, hideDateHint, timeOnly = false, materialFormField } = config;
     const fieldConfig = formlyField({
         key,
         type: 'datetime',
         ...propsAndConfigForFieldConfig(config, {
+            ...materialFormField,
+            appearance: 'standard',
             dateLabel,
             timeLabel,
             allDayLabel,
@@ -3859,7 +4272,7 @@ function numberFieldTransformParser(config) {
     return parsers;
 }
 function numberField(config) {
-    const { key, min, max, step, enforceStep, inputType: type = 'number' } = config;
+    const { key, min, max, step, enforceStep, inputType: type = 'number', materialFormField } = config;
     const parsers = numberFieldTransformParser(config);
     const validators = [];
     if (step && enforceStep) {
@@ -3869,6 +4282,7 @@ function numberField(config) {
         key,
         type: 'input',
         ...propsAndConfigForFieldConfig(config, {
+            ...materialFormField,
             type,
             min,
             max,
@@ -3978,12 +4392,13 @@ function textFieldTransformParser(config) {
     return parsers;
 }
 function textField(config) {
-    const { transform, key, pattern, minLength, maxLength, inputType: type = 'text' } = config;
+    const { transform, key, pattern, minLength, maxLength, inputType: type = 'text', materialFormField } = config;
     const parsers = textFieldTransformParser(config);
     return formlyField({
         key,
         type: 'input',
         ...propsAndConfigForFieldConfig(config, {
+            ...materialFormField,
             type,
             minLength,
             maxLength,
@@ -3993,12 +4408,13 @@ function textField(config) {
     });
 }
 function textAreaField(config) {
-    const { key, rows = 3, pattern, minLength, maxLength } = config;
+    const { key, rows = 3, pattern, minLength, maxLength, materialFormField } = config;
     const parsers = textFieldTransformParser(config);
     return formlyField({
         key,
         type: 'textarea',
         ...propsAndConfigForFieldConfig(config, {
+            ...materialFormField,
             rows,
             minLength,
             maxLength,
@@ -4009,11 +4425,12 @@ function textAreaField(config) {
 }
 
 function phoneField(config = {}) {
-    const { key = 'phone', preferredCountries, onlyCountries } = config;
+    const { key = 'phone', label = 'Phone Number', preferredCountries, onlyCountries } = config;
     const fieldConfig = formlyField({
         key,
         type: 'intphone',
         ...propsAndConfigForFieldConfig(config, {
+            label,
             preferredCountries,
             onlyCountries
         })
@@ -4962,5 +5379,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { APP_ACTION_FORM_DISABLED_KEY, AUTO_TOUCH_WRAPPER_KEY, AbstractAsyncFormlyFormDirective, AbstractConfigAsyncFormlyFormDirective, AbstractDbxPickableItemFieldDirective, AbstractDbxSearchableFieldDisplayDirective, AbstractDbxSearchableValueFieldDirective, AbstractFormExpandableSectionWrapperDirective, AbstractFormlyFormDirective, AbstractSyncFormlyFormDirective, AutoTouchFieldWrapperComponent, ChecklistItemFieldDataSetBuilder, DBX_SEARCHABLE_FIELD_COMPONENT_DATA_TOKEN, DEFAULT_FORM_DISABLED_KEY, DEFAULT_HAS_VALUE_FN, DEFAULT_LAT_LNG_TEXT_FIELD_PATTERN_MESSAGE, DEFAULT_LAT_LNG_TEXT_FIELD_PLACEHOLDER, DEFAULT_PREFERRED_COUNTRIES, DISPLAY_FOR_TIMEZONE_STRING_VALUE, DbxActionFormDirective, DbxActionFormSafetyDirective, DbxChecklistItemContentComponent, DbxChecklistItemFieldComponent, DbxDateTimeFieldComponent, DbxDateTimeFieldTimeMode, DbxDateTimeValueMode, DbxDefaultChecklistItemFieldDisplayComponent, DbxDefaultSearchableFieldDisplayComponent, DbxForm, DbxFormActionModule, DbxFormActionTransitionModule, DbxFormComponentFieldComponent, DbxFormExpandWrapperComponent, DbxFormExtensionModule, DbxFormFlexWrapperComponent, DbxFormFormlyArrayFieldModule, DbxFormFormlyBooleanFieldModule, DbxFormFormlyChecklistItemFieldModule, DbxFormFormlyComponentFieldModule, DbxFormFormlyDateFieldModule, DbxFormFormlyDbxListFieldModule, DbxFormFormlyFieldModule, DbxFormFormlyFormModule, DbxFormFormlyNumberFieldModule, DbxFormFormlyPhoneFieldModule, DbxFormFormlyPickableFieldModule, DbxFormFormlySearchableFieldModule, DbxFormFormlySelectionModule, DbxFormFormlyTextEditorFieldModule, DbxFormFormlyTextFieldModule, DbxFormFormlyValueModule, DbxFormFormlyWrapperModule, DbxFormInfoWrapperComponent, DbxFormIoModule, DbxFormLayoutModule, DbxFormLoadingSourceDirective, DbxFormModule, DbxFormRepeatArrayTypeComponent, DbxFormSearchFormComponent, DbxFormSectionWrapperComponent, DbxFormSourceDirective, DbxFormSpacerComponent, DbxFormState, DbxFormSubsectionWrapperComponent, DbxFormToggleWrapperComponent, DbxFormValueChangesDirective, DbxFormWorkingWrapperComponent, DbxFormlyContext, DbxFormlyFieldsContextDirective, DbxFormlyFormComponent, DbxFormlyModule, DbxItemListFieldComponent, DbxMutableForm, DbxPhoneFieldComponent, DbxPickableChipListFieldComponent, DbxPickableListFieldComponent, DbxPickableListFieldItemListComponent, DbxPickableListFieldItemListViewComponent, DbxPickableListFieldItemListViewItemComponent, DbxSearchableChipFieldComponent, DbxSearchableFieldAutocompleteItemComponent, DbxSearchableTextFieldComponent, DbxTextEditorFieldComponent, EXPANDABLE_WRAPPER_KEY, FIELD_VALUES_ARE_EQUAL_VALIDATION_KEY, FIELD_VALUE_IS_AVAILABLE_ERROR_VALIDATION_KEY, FIELD_VALUE_IS_AVAILABLE_VALIDATION_KEY, FLEX_WRAPPER_KEY, INFO_WRAPPER_KEY, INVALID_PHONE_NUMBER_MESSAGE, IS_DIVISIBLE_BY_VALIDATION_KEY, LABEL_STRING_MAX_LENGTH, MAX_LENGTH_VALIDATION_MESSAGE, MAX_VALIDATION_MESSAGE, MIN_LENGTH_VALIDATION_MESSAGE, MIN_VALIDATION_MESSAGE, PHONE_LABEL_MAX_LENGTH, REQUIRED_VALIDATION_MESSAGE, SEARCH_STRING_MAX_LENGTH, SECTION_WRAPPER_KEY, STYLE_WRAPPER_KEY, SUBSECTION_WRAPPER_KEY, TAKE_NEXT_UPCOMING_TIME_CONFIG_OBS, TOGGLE_WRAPPER_KEY, WORKING_WRAPPER_KEY, addValueSelectionOptionFunction, addWrapperToFormlyFieldConfig, addressField, addressFormlyFields, addressLineField, addressListField, autoTouchWrapper, checkIsFieldFlexLayoutGroupFieldConfig, checkboxField, checklistItemField, chipTextField, cityField, componentField, countryField, dateRangeField, dateTimeField, dbxDateTimeInputValueParseFactory, dbxDateTimeOutputValueFactory, dbxFormSearchFormFields, dbxFormSourceObservable, dbxFormSourceObservableFromStream, dbxListField, defaultValidationMessages, disableFormlyFieldAutofillAttributes, dollarAmountField, emailField, expandWrapper, fieldValueIsAvailableValidator, fieldValuesAreEqualValidator, filterPartialPotentialFieldConfigValuesFromObject, filterPickableItemFieldValuesByLabel, filterPickableItemFieldValuesByLabelFilterFunction, flexLayoutWrapper, formlyField, hiddenField, infoWrapper, isDivisibleBy, isDomain, isInRange, isTruthy, latLngTextField, makeMetaFilterSearchableFieldValueDisplayFn, maxLengthValidationMessage, maxValidationMessage, mergePropsValueObjects, minLengthValidationMessage, minValidationMessage, nameField, numberField, numberFieldTransformParser, partialPotentialFieldConfigKeys, partialPotentialFieldConfigKeysFilter, phoneAndLabelSectionField, phoneField, phoneListField, pickableItemChipField, pickableItemListField, propsAndConfigForFieldConfig, propsForFieldConfig, propsValueForFieldConfig, provideDbxForm, provideDbxMutableForm, provideFormlyContext, repeatArrayField, searchableChipField, searchableStringChipField, searchableTextField, sectionWrapper, sortPickableItemsByLabel, sortPickableItemsByLabelStringFunction, stateField, styleWrapper, subsectionWrapper, syncConfigValueObs, textAreaField, textEditorField, textField, textFieldTransformParser, textIsAvailableField, textPasswordField, textPasswordWithVerifyFieldGroup, textVerifyPasswordField, timeOnlyField, timezoneStringField, timezoneStringSearchFunction, toggleField, toggleWrapper, usernamePasswordLoginFields, validatorsForFieldConfig, valueSelectionField, workingWrapper, wrappedPhoneAndLabelField, zipCodeField };
+export { APP_ACTION_FORM_DISABLED_KEY, AUTO_TOUCH_WRAPPER_KEY, AbstractAsyncFormlyFormDirective, AbstractConfigAsyncFormlyFormDirective, AbstractDbxPickableItemFieldDirective, AbstractDbxSearchableFieldDisplayDirective, AbstractDbxSearchableValueFieldDirective, AbstractFormExpandableSectionWrapperDirective, AbstractFormlyFormDirective, AbstractSyncFormlyFormDirective, AutoTouchFieldWrapperComponent, ChecklistItemFieldDataSetBuilder, DBX_SEARCHABLE_FIELD_COMPONENT_DATA_TOKEN, DEFAULT_FORM_DISABLED_KEY, DEFAULT_HAS_VALUE_FN, DEFAULT_LAT_LNG_TEXT_FIELD_PATTERN_MESSAGE, DEFAULT_LAT_LNG_TEXT_FIELD_PLACEHOLDER, DEFAULT_PREFERRED_COUNTRIES, DISPLAY_FOR_TIMEZONE_STRING_VALUE, DbxActionFormDirective, DbxActionFormSafetyDirective, DbxChecklistItemContentComponent, DbxChecklistItemFieldComponent, DbxDateTimeFieldComponent, DbxDateTimeFieldTimeMode, DbxDateTimeValueMode, DbxDefaultChecklistItemFieldDisplayComponent, DbxDefaultSearchableFieldDisplayComponent, DbxForm, DbxFormActionModule, DbxFormActionTransitionModule, DbxFormComponentFieldComponent, DbxFormExpandWrapperComponent, DbxFormExtensionModule, DbxFormFlexWrapperComponent, DbxFormFormlyArrayFieldModule, DbxFormFormlyBooleanFieldModule, DbxFormFormlyChecklistItemFieldModule, DbxFormFormlyComponentFieldModule, DbxFormFormlyDateFieldModule, DbxFormFormlyDbxListFieldModule, DbxFormFormlyFieldModule, DbxFormFormlyFormModule, DbxFormFormlyNumberFieldModule, DbxFormFormlyPhoneFieldModule, DbxFormFormlyPickableFieldModule, DbxFormFormlySearchableFieldModule, DbxFormFormlySelectionModule, DbxFormFormlySourceSelectModule, DbxFormFormlyTextEditorFieldModule, DbxFormFormlyTextFieldModule, DbxFormFormlyValueModule, DbxFormFormlyWrapperModule, DbxFormInfoWrapperComponent, DbxFormIoModule, DbxFormLayoutModule, DbxFormLoadingSourceDirective, DbxFormModule, DbxFormRepeatArrayTypeComponent, DbxFormSearchFormComponent, DbxFormSectionWrapperComponent, DbxFormSourceDirective, DbxFormSourceSelectFieldComponent, DbxFormSpacerComponent, DbxFormState, DbxFormSubsectionWrapperComponent, DbxFormToggleWrapperComponent, DbxFormValueChangesDirective, DbxFormWorkingWrapperComponent, DbxFormlyContext, DbxFormlyFieldsContextDirective, DbxFormlyFormComponent, DbxFormlyModule, DbxItemListFieldComponent, DbxMutableForm, DbxPhoneFieldComponent, DbxPickableChipListFieldComponent, DbxPickableListFieldComponent, DbxPickableListFieldItemListComponent, DbxPickableListFieldItemListViewComponent, DbxPickableListFieldItemListViewItemComponent, DbxSearchableChipFieldComponent, DbxSearchableFieldAutocompleteItemComponent, DbxSearchableTextFieldComponent, DbxTextEditorFieldComponent, EXPANDABLE_WRAPPER_KEY, FIELD_VALUES_ARE_EQUAL_VALIDATION_KEY, FIELD_VALUE_IS_AVAILABLE_ERROR_VALIDATION_KEY, FIELD_VALUE_IS_AVAILABLE_VALIDATION_KEY, FLEX_WRAPPER_KEY, INFO_WRAPPER_KEY, INVALID_PHONE_NUMBER_MESSAGE, IS_DIVISIBLE_BY_VALIDATION_KEY, LABEL_STRING_MAX_LENGTH, MAX_LENGTH_VALIDATION_MESSAGE, MAX_VALIDATION_MESSAGE, MIN_LENGTH_VALIDATION_MESSAGE, MIN_VALIDATION_MESSAGE, PHONE_LABEL_MAX_LENGTH, REQUIRED_VALIDATION_MESSAGE, SEARCH_STRING_MAX_LENGTH, SECTION_WRAPPER_KEY, STYLE_WRAPPER_KEY, SUBSECTION_WRAPPER_KEY, TAKE_NEXT_UPCOMING_TIME_CONFIG_OBS, TOGGLE_WRAPPER_KEY, WORKING_WRAPPER_KEY, addValueSelectionOptionFunction, addWrapperToFormlyFieldConfig, addressField, addressFormlyFields, addressLineField, addressListField, autoTouchWrapper, checkIsFieldFlexLayoutGroupFieldConfig, checkboxField, checklistItemField, chipTextField, cityField, componentField, countryField, dateRangeField, dateTimeField, dbxDateTimeInputValueParseFactory, dbxDateTimeOutputValueFactory, dbxFormSearchFormFields, dbxFormSourceObservable, dbxFormSourceObservableFromStream, dbxListField, defaultValidationMessages, disableFormlyFieldAutofillAttributes, dollarAmountField, emailField, expandWrapper, fieldValueIsAvailableValidator, fieldValuesAreEqualValidator, filterPartialPotentialFieldConfigValuesFromObject, filterPickableItemFieldValuesByLabel, filterPickableItemFieldValuesByLabelFilterFunction, flexLayoutWrapper, formlyField, hiddenField, infoWrapper, isDivisibleBy, isDomain, isInRange, isTruthy, latLngTextField, makeMetaFilterSearchableFieldValueDisplayFn, maxLengthValidationMessage, maxValidationMessage, mergePropsValueObjects, minLengthValidationMessage, minValidationMessage, nameField, numberField, numberFieldTransformParser, partialPotentialFieldConfigKeys, partialPotentialFieldConfigKeysFilter, phoneAndLabelSectionField, phoneField, phoneListField, pickableItemChipField, pickableItemListField, propsAndConfigForFieldConfig, propsForFieldConfig, propsValueForFieldConfig, provideDbxForm, provideDbxMutableForm, provideFormlyContext, repeatArrayField, searchableChipField, searchableStringChipField, searchableTextField, sectionWrapper, sortPickableItemsByLabel, sortPickableItemsByLabelStringFunction, sourceSelectField, stateField, styleWrapper, subsectionWrapper, syncConfigValueObs, textAreaField, textEditorField, textField, textFieldTransformParser, textIsAvailableField, textPasswordField, textPasswordWithVerifyFieldGroup, textVerifyPasswordField, timeOnlyField, timezoneStringField, timezoneStringSearchFunction, toggleField, toggleWrapper, usernamePasswordLoginFields, validatorsForFieldConfig, valueSelectionField, workingWrapper, wrappedPhoneAndLabelField, zipCodeField };
 //# sourceMappingURL=dereekb-dbx-form.mjs.map