@dereekb/dbx-form 9.25.15 → 10.0.0

package/{fesm2020 → fesm2022}/dereekb-dbx-form.mjs

@@ -12,7 +12,7 @@ import { DbxActionTransitionSafetyDirective, DbxTextModule, DbxLoadingModule, Db
 import { isPast, addSeconds, startOfDay, addMinutes, addDays, isAfter } from 'date-fns';
 import { BehaviorSubject, switchMap, first, exhaustMap, of, catchError, delay, filter, combineLatest, map, distinctUntilChanged, shareReplay, Subject, tap, takeUntil, EMPTY, mergeMap, startWith, debounceTime, skipWhile, scan, combineLatestWith, throttleTime, interval, merge, 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, asObservableFromGetter, asyncPusherCache, scanCount } from '@dereekb/rxjs';
-import * as i1$2 from '@ngx-formly/core';
+import * as i1$1 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';
@@ -22,19 +22,19 @@ import * as i4$2 from '@angular/material/checkbox';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import * as i7 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
-import * as i1$1 from '@angular/material/button';
+import * as i8 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
-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, separateValues, filterUniqueValues, searchStringFilterFunction, caseInsensitiveFilterByIndexOfDecisionFactory, sortByStringFunction, mergeIntoArray, lastValue, arrayToMap, setContainsAllValues, addToSetCopy, setsAreEquivalent, filterMaybeValues, mergeArrays, firstValue, cachedGetter, makeGetter, asDecisionFunction, getValueFromGetter, asGetter, isISO8601DayStringStart, mapIdentityFunction, MS_IN_MINUTE, isMonthDaySlashDate, HAS_WEBSITE_DOMAIN_NAME_REGEX, KeyValueTypleValueFilter, valuesFromPOJO, allObjectsAreEqual, isNumberDivisibleBy, nearestDivisibleValues, isE164PhoneNumber as isE164PhoneNumber$1, isValidPhoneExtensionNumber, e164PhoneNumberExtensionPair, mapMaybeFunction, transformNumberFunction, concatArrays, DOLLAR_AMOUNT_PRECISION, e164PhoneNumberFromE164PhoneNumberExtensionPair, transformStringFunction, US_STATE_CODE_STRING_REGEX, ZIP_CODE_STRING_REGEX, LAT_LNG_PATTERN, BooleanStringKeyArrayUtilityInstance, capitalizeFirstLetter } from '@dereekb/util';
+import * as i3$2 from '@ngbracket/ngx-layout/flex';
+import { FlexLayoutModule } from '@ngbracket/ngx-layout';
+import { objectIsEmpty, mergeObjectsFunction, filterFromPOJOFunction, mergeObjects, filterFromPOJO, asArray, objectHasNoKeys, addPlusPrefixToNumber, convertMaybeToArray, isSelectedDecisionFunctionFactory, readKeysFrom, hasDifferentValues, makeValuesGroupMap, separateValues, filterUniqueValues, searchStringFilterFunction, caseInsensitiveFilterByIndexOfDecisionFactory, sortByStringFunction, mergeArraysIntoArray, lastValue, arrayToMap, setContainsAllValues, addToSetCopy, setsAreEquivalent, filterMaybeValues, mergeArrays, firstValue, cachedGetter, makeGetter, asDecisionFunction, getValueFromGetter, asGetter, isISO8601DayStringStart, mapIdentityFunction, MS_IN_MINUTE, isMonthDaySlashDate, HAS_WEBSITE_DOMAIN_NAME_REGEX, KeyValueTypleValueFilter, valuesFromPOJO, allObjectsAreEqual, isNumberDivisibleBy, nearestDivisibleValues, isE164PhoneNumber as isE164PhoneNumber$1, isValidPhoneExtensionNumber, e164PhoneNumberExtensionPair, mapMaybeFunction, transformNumberFunction, concatArrays, DOLLAR_AMOUNT_PRECISION, e164PhoneNumberFromE164PhoneNumberExtensionPair, 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 i2$3 from '@ngbracket/ngx-layout/extended';
 import * as i5 from '@angular/material/divider';
 import { MatDividerModule } from '@angular/material/divider';
 import * as i4$4 from '@angular/material/autocomplete';
 import { MatAutocompleteModule } from '@angular/material/autocomplete';
-import * as i4$7 from '@angular/material/form-field';
+import * as i5$1 from '@angular/material/form-field';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import * as i4$3 from '@angular/material/input';
 import { MatInputModule } from '@angular/material/input';
@@ -44,11 +44,11 @@ import * as i6 from '@angular/material/chips';
 import { MatChipsModule } from '@angular/material/chips';
 import { MatListModule } from '@angular/material/list';
 import { ENTER, COMMA } from '@angular/cdk/keycodes';
-import { skipUntilTimeElapsedAfterLastEmission, toJsDate, parseISO8601DayStringToDate, formatToISO8601DateString, formatToISO8601DayString, isSameDateHoursAndMinutes, safeToJsDate, guessCurrentTimezone, dateTimezoneUtcNormal, toJsDayDate, isSameDateDay, toLocalReadableTimeString, getTimezoneAbbreviation, utcDayForDate, readableTimeStringToDate, findMinDate, dateFromLogicalDate, findMaxDate, dateTimeMinuteDecisionFunction, DateTimeMinuteInstance, isSameDate, limitDateTimeInstance, isSameDateDayRange, dateRange, clampDateRangeToDateRange, isDateInDateRange, isSameDateRange, allTimezoneInfos, timezoneInfoForSystem, searchTimezoneInfos } from '@dereekb/date';
+import { skipUntilTimeElapsedAfterLastEmission, toJsDate, parseISO8601DayStringToDate, formatToISO8601DateString, formatToISO8601DayString, isSameDateHoursAndMinutes, safeToJsDate, guessCurrentTimezone, dateTimezoneUtcNormal, toJsDayDate, isSameDateDay, toLocalReadableTimeString, getTimezoneAbbreviation, utcDayForDate, readableTimeStringToDate, findMinDate, dateFromLogicalDate, findMaxDate, dateTimeMinuteDecisionFunction, DateTimeMinuteInstance, isSameDate, isSameDateDayRange, dateRange, clampDateRangeToDateRange, isDateInDateRange, isSameDateRange, limitDateTimeInstance, allTimezoneInfos, timezoneInfoForSystem, searchTimezoneInfos } from '@dereekb/date';
 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 i5$1 from '@angular/material/datepicker';
+import * as i5$2 from '@angular/material/datepicker';
 import { MatDatepickerModule, DateRange, MAT_DATE_RANGE_SELECTION_STRATEGY, MatCalendar } from '@angular/material/datepicker';
 import * as i10 from '@angular/material/menu';
 import { MatMenuModule } from '@angular/material/menu';
@@ -222,10 +222,10 @@ class DbxActionFormDirective {
             return of({ value: value });
         }
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxActionFormDirective, deps: [{ token: DbxMutableForm, host: true }, { token: i2.DbxActionContextStoreSourceInstance }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: DbxActionFormDirective, selector: "[dbxActionForm]", inputs: { dbxActionFormValidator: "dbxActionFormValidator", dbxActionFormModified: "dbxActionFormModified", dbxActionFormMapValue: "dbxActionFormMapValue", formDisabledOnWorking: "formDisabledOnWorking" }, ngImport: i0 }); }
 }
-DbxActionFormDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxActionFormDirective, deps: [{ token: DbxMutableForm, host: true }, { token: i2.DbxActionContextStoreSourceInstance }], target: i0.ɵɵFactoryTarget.Directive });
-DbxActionFormDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.12", type: DbxActionFormDirective, selector: "[dbxActionForm]", inputs: { dbxActionFormValidator: "dbxActionFormValidator", dbxActionFormModified: "dbxActionFormModified", dbxActionFormMapValue: "dbxActionFormMapValue", formDisabledOnWorking: "formDisabledOnWorking" }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxActionFormDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxActionFormDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[dbxActionForm]'
@@ -256,10 +256,10 @@ class DbxActionFormSafetyDirective extends DbxActionTransitionSafetyDirective {
         this.dbxActionForm.form.forceFormUpdate();
         return super._handleOnBeforeTransition(transition);
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxActionFormSafetyDirective, deps: [{ token: DbxActionFormDirective, host: true }, { token: i2.DbxActionContextStoreSourceInstance }, { token: i3.TransitionService }, { token: i0.ViewContainerRef }, { token: i4.MatDialog }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: DbxActionFormSafetyDirective, selector: "[dbxActionFormSafety]", inputs: { inputSafetyType: ["dbxActionFormSafety", "inputSafetyType"] }, usesInheritance: true, ngImport: i0 }); }
 }
-DbxActionFormSafetyDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxActionFormSafetyDirective, deps: [{ token: DbxActionFormDirective, host: true }, { token: i2.DbxActionContextStoreSourceInstance }, { token: i3.TransitionService }, { token: i0.ViewContainerRef }, { token: i4.MatDialog }], target: i0.ɵɵFactoryTarget.Directive });
-DbxActionFormSafetyDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.12", type: DbxActionFormSafetyDirective, selector: "[dbxActionFormSafety]", inputs: { inputSafetyType: ["dbxActionFormSafety", "inputSafetyType"] }, usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxActionFormSafetyDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxActionFormSafetyDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[dbxActionFormSafety]'
@@ -272,11 +272,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
             }] } });
 
 class DbxFormActionTransitionModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormActionTransitionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: DbxFormActionTransitionModule, declarations: [DbxActionFormSafetyDirective], imports: [CommonModule], exports: [DbxActionFormSafetyDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormActionTransitionModule, imports: [CommonModule] }); }
 }
-DbxFormActionTransitionModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxFormActionTransitionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-DbxFormActionTransitionModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: DbxFormActionTransitionModule, declarations: [DbxActionFormSafetyDirective], imports: [CommonModule], exports: [DbxActionFormSafetyDirective] });
-DbxFormActionTransitionModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxFormActionTransitionModule, imports: [CommonModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxFormActionTransitionModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormActionTransitionModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule],
@@ -286,11 +286,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
         }] });
 
 class DbxFormActionModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormActionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: DbxFormActionModule, declarations: [DbxActionFormDirective], imports: [CommonModule, MatDialogModule], exports: [DbxActionFormDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormActionModule, imports: [CommonModule, MatDialogModule] }); }
 }
-DbxFormActionModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxFormActionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-DbxFormActionModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: DbxFormActionModule, declarations: [DbxActionFormDirective], imports: [CommonModule, MatDialogModule], exports: [DbxActionFormDirective] });
-DbxFormActionModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxFormActionModule, imports: [CommonModule, MatDialogModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxFormActionModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormActionModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, MatDialogModule],
@@ -377,10 +377,10 @@ class DbxFormSourceDirective extends AbstractSubscriptionDirective {
         super.ngOnDestroy();
         this._mode.complete();
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormSourceDirective, deps: [{ token: DbxMutableForm, host: true }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: DbxFormSourceDirective, selector: "[dbxFormSource]", inputs: { mode: ["dbxFormSourceMode", "mode"], obs: ["dbxFormSource", "obs"] }, usesInheritance: true, ngImport: i0 }); }
 }
-DbxFormSourceDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxFormSourceDirective, deps: [{ token: DbxMutableForm, host: true }], target: i0.ɵɵFactoryTarget.Directive });
-DbxFormSourceDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.12", type: DbxFormSourceDirective, selector: "[dbxFormSource]", inputs: { mode: ["dbxFormSourceMode", "mode"], obs: ["dbxFormSource", "obs"] }, usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxFormSourceDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormSourceDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[dbxFormSource]'
@@ -431,10 +431,10 @@ class DbxFormLoadingSourceDirective extends AbstractSubscriptionDirective {
         super.ngOnDestroy();
         this._mode.complete();
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormLoadingSourceDirective, deps: [{ token: DbxMutableForm, host: true }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: DbxFormLoadingSourceDirective, selector: "[dbxFormLoadingSource]", inputs: { mode: ["dbxFormLoadingSourceMode", "mode"], obs: ["dbxFormLoadingSource", "obs"] }, usesInheritance: true, ngImport: i0 }); }
 }
-DbxFormLoadingSourceDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxFormLoadingSourceDirective, deps: [{ token: DbxMutableForm, host: true }], target: i0.ɵɵFactoryTarget.Directive });
-DbxFormLoadingSourceDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.12", type: DbxFormLoadingSourceDirective, selector: "[dbxFormLoadingSource]", inputs: { mode: ["dbxFormLoadingSourceMode", "mode"], obs: ["dbxFormLoadingSource", "obs"] }, usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxFormLoadingSourceDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormLoadingSourceDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[dbxFormLoadingSource]'
@@ -476,10 +476,10 @@ class DbxFormValueChangesDirective extends AbstractSubscriptionDirective {
         super.ngOnDestroy();
         this.dbxFormValueChange.complete();
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormValueChangesDirective, deps: [{ token: DbxForm, host: true }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: DbxFormValueChangesDirective, selector: "[dbxFormValueChange]", outputs: { dbxFormValueChange: "dbxFormValueChange" }, usesInheritance: true, ngImport: i0 }); }
 }
-DbxFormValueChangesDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxFormValueChangesDirective, deps: [{ token: DbxForm, host: true }], target: i0.ɵɵFactoryTarget.Directive });
-DbxFormValueChangesDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.12", type: DbxFormValueChangesDirective, selector: "[dbxFormValueChange]", outputs: { dbxFormValueChange: "dbxFormValueChange" }, usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxFormValueChangesDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormValueChangesDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[dbxFormValueChange]'
@@ -491,11 +491,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
             }] } });
 
 class DbxFormIoModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormIoModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: DbxFormIoModule, declarations: [DbxFormSourceDirective, DbxFormValueChangesDirective, DbxFormLoadingSourceDirective], imports: [CommonModule], exports: [DbxFormSourceDirective, DbxFormValueChangesDirective, DbxFormLoadingSourceDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormIoModule, imports: [CommonModule] }); }
 }
-DbxFormIoModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxFormIoModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-DbxFormIoModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: DbxFormIoModule, declarations: [DbxFormSourceDirective, DbxFormValueChangesDirective, DbxFormLoadingSourceDirective], imports: [CommonModule], exports: [DbxFormSourceDirective, DbxFormValueChangesDirective, DbxFormLoadingSourceDirective] });
-DbxFormIoModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxFormIoModule, imports: [CommonModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxFormIoModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormIoModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule],
@@ -517,11 +517,11 @@ function streamValueFromControl(fromControl, path) {
 }
 
 class DbxFormModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: DbxFormModule, exports: [DbxFormActionTransitionModule, DbxFormActionModule, DbxFormIoModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormModule, imports: [DbxFormActionTransitionModule, DbxFormActionModule, DbxFormIoModule] }); }
 }
-DbxFormModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxFormModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-DbxFormModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: DbxFormModule, exports: [DbxFormActionTransitionModule, DbxFormActionModule, DbxFormIoModule] });
-DbxFormModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxFormModule, imports: [DbxFormActionTransitionModule, DbxFormActionModule, DbxFormIoModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxFormModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormModule, decorators: [{
             type: NgModule,
             args: [{
                     exports: [DbxFormActionTransitionModule, DbxFormActionModule, DbxFormIoModule]
@@ -562,16 +562,16 @@ class DbxDefaultChecklistItemFieldDisplayComponent {
     get description() {
         return this.displayContent?.description;
     }
-}
-DbxDefaultChecklistItemFieldDisplayComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxDefaultChecklistItemFieldDisplayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-DbxDefaultChecklistItemFieldDisplayComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: DbxDefaultChecklistItemFieldDisplayComponent, selector: "ng-component", inputs: { displayContent: "displayContent" }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxDefaultChecklistItemFieldDisplayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DbxDefaultChecklistItemFieldDisplayComponent, selector: "ng-component", inputs: { displayContent: "displayContent" }, ngImport: i0, template: `
     <div *ngIf="displayContent" class="dbx-default-checklist-item-field">
       <div *ngIf="label" class="item-label">{{ label }}</div>
       <div *ngIf="sublabel" class="item-sublabel">{{ sublabel }}</div>
       <div *ngIf="description" class="dbx-hint item-description">{{ description }}</div>
     </div>
-  `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxDefaultChecklistItemFieldDisplayComponent, decorators: [{
+  `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxDefaultChecklistItemFieldDisplayComponent, decorators: [{
             type: Component,
             args: [{
                     template: `
@@ -624,10 +624,10 @@ class DbxChecklistItemFieldComponent extends FieldType {
     ngOnDestroy() {
         this._displayContent.complete();
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxChecklistItemFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.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 i7.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.ɵ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 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 i7.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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.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" }]
         }] });
@@ -648,12 +648,12 @@ class DbxChecklistItemContentComponent extends AbstractSubscriptionDirective {
             }
         };
     }
-}
-DbxChecklistItemContentComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxChecklistItemContentComponent, deps: [{ token: DbxChecklistItemFieldComponent }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-DbxChecklistItemContentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: DbxChecklistItemContentComponent, selector: "dbx-checklist-item-content-component", usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxChecklistItemContentComponent, deps: [{ token: DbxChecklistItemFieldComponent }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DbxChecklistItemContentComponent, selector: "dbx-checklist-item-content-component", usesInheritance: true, ngImport: i0, template: `
     <dbx-injection [config]="config"></dbx-injection>
-  `, isInline: true, dependencies: [{ kind: "component", type: i2.DbxInjectionComponent, selector: "dbx-injection, [dbxInjection], [dbx-injection]", inputs: ["config", "template"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxChecklistItemContentComponent, decorators: [{
+  `, isInline: true, dependencies: [{ kind: "component", type: i2.DbxInjectionComponent, selector: "dbx-injection, [dbxInjection], [dbx-injection]", inputs: ["config", "template"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxChecklistItemContentComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'dbx-checklist-item-content-component',
@@ -670,9 +670,8 @@ class DbxFormInfoWrapperComponent extends FieldWrapper {
     onInfoClick() {
         this.infoWrapper.onInfoClick();
     }
-}
-DbxFormInfoWrapperComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxFormInfoWrapperComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-DbxFormInfoWrapperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: DbxFormInfoWrapperComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormInfoWrapperComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DbxFormInfoWrapperComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
     <div class="dbx-form-info-wrapper" fxLayout="row">
       <div class="dbx-form-info-wrapper-content" fxFlex="grow">
         <ng-container #fieldComponent></ng-container>
@@ -683,8 +682,9 @@ 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: i7.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: [{
+  `, isInline: true, dependencies: [{ kind: "component", type: i8.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i7.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: "16.2.12", ngImport: i0, type: DbxFormInfoWrapperComponent, decorators: [{
             type: Component,
             args: [{
                     template: `
@@ -706,16 +706,17 @@ class DbxFormSectionWrapperComponent extends FieldWrapper {
     get headerConfig() {
         return this.props;
     }
-}
-DbxFormSectionWrapperComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxFormSectionWrapperComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-DbxFormSectionWrapperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: DbxFormSectionWrapperComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormSectionWrapperComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DbxFormSectionWrapperComponent, selector: "dbx-form-section-wrapper", usesInheritance: true, ngImport: i0, template: `
     <dbx-section [headerConfig]="headerConfig">
       <ng-container #fieldComponent></ng-container>
     </dbx-section>
-  `, isInline: true, dependencies: [{ kind: "component", type: i2$1.DbxSectionComponent, selector: "dbx-section", inputs: ["elevate"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxFormSectionWrapperComponent, decorators: [{
+  `, isInline: true, dependencies: [{ kind: "component", type: i2$1.DbxSectionComponent, selector: "dbx-section", inputs: ["elevate"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormSectionWrapperComponent, decorators: [{
             type: Component,
             args: [{
+                    selector: 'dbx-form-section-wrapper',
                     template: `
     <dbx-section [headerConfig]="headerConfig">
       <ng-container #fieldComponent></ng-container>
@@ -734,14 +735,14 @@ class DbxFormFlexWrapperComponent extends FieldWrapper {
     get relative() {
         return this.flexWrapper.relative ?? false;
     }
-}
-DbxFormFlexWrapperComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxFormFlexWrapperComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-DbxFormFlexWrapperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: DbxFormFlexWrapperComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormFlexWrapperComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DbxFormFlexWrapperComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
     <div class="dbx-form-flex-section" dbxFlexGroup [content]="false" [relative]="relative" [breakpoint]="breakpoint">
       <ng-container #fieldComponent></ng-container>
     </div>
-  `, isInline: true, dependencies: [{ kind: "directive", type: i2$1.DbxFlexGroupDirective, selector: "[dbxFlexGroup]", inputs: ["content", "relative", "breakpoint"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxFormFlexWrapperComponent, decorators: [{
+  `, isInline: true, dependencies: [{ kind: "directive", type: i2$1.DbxFlexGroupDirective, selector: "[dbxFlexGroup]", inputs: ["content", "relative", "breakpoint"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormFlexWrapperComponent, decorators: [{
             type: Component,
             args: [{
                     template: `
@@ -756,16 +757,17 @@ class DbxFormSubsectionWrapperComponent extends FieldWrapper {
     get headerConfig() {
         return this.props;
     }
-}
-DbxFormSubsectionWrapperComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxFormSubsectionWrapperComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-DbxFormSubsectionWrapperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: DbxFormSubsectionWrapperComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormSubsectionWrapperComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DbxFormSubsectionWrapperComponent, selector: "dbx-form-subsection-wrapper", usesInheritance: true, ngImport: i0, template: `
     <dbx-subsection [headerConfig]="headerConfig">
       <ng-container #fieldComponent></ng-container>
     </dbx-subsection>
-  `, isInline: true, dependencies: [{ kind: "component", type: i2$1.DbxSubSectionComponent, selector: "dbx-subsection" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxFormSubsectionWrapperComponent, decorators: [{
+  `, isInline: true, dependencies: [{ kind: "component", type: i2$1.DbxSubSectionComponent, selector: "dbx-subsection" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormSubsectionWrapperComponent, decorators: [{
             type: Component,
             args: [{
+                    selector: 'dbx-form-subsection-wrapper',
                     template: `
     <dbx-subsection [headerConfig]="headerConfig">
       <ng-container #fieldComponent></ng-container>
@@ -819,10 +821,10 @@ class AbstractFormExpandableSectionWrapperDirective extends FieldWrapper {
         this._toggleOpen.complete();
         this._formControlObs.complete();
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AbstractFormExpandableSectionWrapperDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: AbstractFormExpandableSectionWrapperDirective, usesInheritance: true, ngImport: i0 }); }
 }
-AbstractFormExpandableSectionWrapperDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: AbstractFormExpandableSectionWrapperDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-AbstractFormExpandableSectionWrapperDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.12", type: AbstractFormExpandableSectionWrapperDirective, usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: AbstractFormExpandableSectionWrapperDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AbstractFormExpandableSectionWrapperDirective, decorators: [{
             type: Directive
         }] });
 
@@ -833,9 +835,8 @@ class DbxFormExpandWrapperComponent extends AbstractFormExpandableSectionWrapper
     get buttonType() {
         return this.expandableSection.buttonType ?? 'button';
     }
-}
-DbxFormExpandWrapperComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxFormExpandWrapperComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-DbxFormExpandWrapperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: DbxFormExpandWrapperComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormExpandWrapperComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DbxFormExpandWrapperComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
     <ng-container [ngSwitch]="show$ | async">
       <ng-container *ngSwitchCase="true">
         <ng-container #fieldComponent></ng-container>
@@ -844,8 +845,9 @@ DbxFormExpandWrapperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "1
         <span class="dbx-form-expand-wrapper-button" (click)="open()">{{ expandLabel }}</span>
       </ng-container>
     </ng-container>
-  `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxFormExpandWrapperComponent, decorators: [{
+  `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormExpandWrapperComponent, decorators: [{
             type: Component,
             args: [{
                     template: `
@@ -873,12 +875,12 @@ class AutoTouchFieldWrapperComponent extends FieldWrapper {
             }
         });
     }
-}
-AutoTouchFieldWrapperComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: AutoTouchFieldWrapperComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-AutoTouchFieldWrapperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: AutoTouchFieldWrapperComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AutoTouchFieldWrapperComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AutoTouchFieldWrapperComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
     <ng-container #fieldComponent></ng-container>
-  `, isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: AutoTouchFieldWrapperComponent, decorators: [{
+  `, isInline: true }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AutoTouchFieldWrapperComponent, decorators: [{
             type: Component,
             args: [{
                     template: `
@@ -907,9 +909,8 @@ class DbxFormToggleWrapperComponent extends AbstractFormExpandableSectionWrapper
             this._toggleOpen.next(!show);
         });
     }
-}
-DbxFormToggleWrapperComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxFormToggleWrapperComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-DbxFormToggleWrapperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: DbxFormToggleWrapperComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormToggleWrapperComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DbxFormToggleWrapperComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
     <div class="dbx-form-toggle-wrapper" [ngSwitch]="show$ | async">
       <div class="dbx-form-toggle-wrapper-toggle">
         <mat-slide-toggle [checked]="show$ | async" (toggleChange)="onToggleChange()">{{ slideLabel$ | async }}</mat-slide-toggle>
@@ -918,8 +919,9 @@ DbxFormToggleWrapperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "1
         <ng-container #fieldComponent></ng-container>
       </ng-container>
     </div>
-  `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: i2$2.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matSlideToggle"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxFormToggleWrapperComponent, decorators: [{
+  `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: i2$2.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matSlideToggle"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormToggleWrapperComponent, decorators: [{
             type: Component,
             args: [{
                     template: `
@@ -961,14 +963,14 @@ class DbxFormStyleWrapperComponent extends FieldWrapper {
         this._style.complete();
         this._class.complete();
     }
-}
-DbxFormStyleWrapperComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxFormStyleWrapperComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-DbxFormStyleWrapperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: DbxFormStyleWrapperComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormStyleWrapperComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DbxFormStyleWrapperComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
     <div class="dbx-form-style-wrapper" [ngClass]="(class$ | async) ?? ''" [ngStyle]="(style$ | async) ?? {}">
       <ng-container #fieldComponent></ng-container>
     </div>
-  `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { 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: "directive", type: i2$3.DefaultStyleDirective, selector: "  [ngStyle],  [ngStyle.xs], [ngStyle.sm], [ngStyle.md], [ngStyle.lg], [ngStyle.xl],  [ngStyle.lt-sm], [ngStyle.lt-md], [ngStyle.lt-lg], [ngStyle.lt-xl],  [ngStyle.gt-xs], [ngStyle.gt-sm], [ngStyle.gt-md], [ngStyle.gt-lg]", inputs: ["ngStyle", "ngStyle.xs", "ngStyle.sm", "ngStyle.md", "ngStyle.lg", "ngStyle.xl", "ngStyle.lt-sm", "ngStyle.lt-md", "ngStyle.lt-lg", "ngStyle.lt-xl", "ngStyle.gt-xs", "ngStyle.gt-sm", "ngStyle.gt-md", "ngStyle.gt-lg"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxFormStyleWrapperComponent, decorators: [{
+  `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { 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: "directive", type: i2$3.DefaultStyleDirective, selector: "  [ngStyle],  [ngStyle.xs], [ngStyle.sm], [ngStyle.md], [ngStyle.lg], [ngStyle.xl],  [ngStyle.lt-sm], [ngStyle.lt-md], [ngStyle.lt-lg], [ngStyle.lt-xl],  [ngStyle.gt-xs], [ngStyle.gt-sm], [ngStyle.gt-md], [ngStyle.gt-lg]", inputs: ["ngStyle", "ngStyle.xs", "ngStyle.sm", "ngStyle.md", "ngStyle.lg", "ngStyle.xl", "ngStyle.lt-sm", "ngStyle.lt-md", "ngStyle.lt-lg", "ngStyle.lt-xl", "ngStyle.gt-xs", "ngStyle.gt-sm", "ngStyle.gt-md", "ngStyle.gt-lg"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormStyleWrapperComponent, decorators: [{
             type: Component,
             args: [{
                     template: `
@@ -999,15 +1001,15 @@ class DbxFormWorkingWrapperComponent extends FieldWrapper {
         this.workingContext.destroy();
         this.sub.destroy();
     }
-}
-DbxFormWorkingWrapperComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxFormWorkingWrapperComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-DbxFormWorkingWrapperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: DbxFormWorkingWrapperComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormWorkingWrapperComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DbxFormWorkingWrapperComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
     <div class="dbx-form-working-wrapper">
       <ng-container #fieldComponent></ng-container>
       <dbx-loading [linear]="true" [context]="workingContext"></dbx-loading>
     </div>
-  `, isInline: true, dependencies: [{ kind: "component", type: i2$1.DbxLoadingComponent, selector: "dbx-loading", inputs: ["show", "text", "mode", "color", "diameter", "linear", "padding", "context", "loading", "error"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxFormWorkingWrapperComponent, decorators: [{
+  `, isInline: true, dependencies: [{ kind: "component", type: i2$1.DbxLoadingComponent, selector: "dbx-loading", inputs: ["show", "text", "mode", "color", "diameter", "linear", "padding", "context", "loading", "error"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormWorkingWrapperComponent, decorators: [{
             type: Component,
             args: [{
                     template: `
@@ -1029,11 +1031,6 @@ const FLEX_WRAPPER_KEY = 'flex';
 const STYLE_WRAPPER_KEY = 'style';
 const WORKING_WRAPPER_KEY = 'working';
 function addWrapperToFormlyFieldConfig(fieldConfig, wrapperKey, wrapperProps) {
-    // ??? can probably remove?
-    fieldConfig.props = {
-        ...fieldConfig.props,
-        ...wrapperProps
-    };
     return {
         wrappers: [wrapperKey],
         props: wrapperProps,
@@ -1098,40 +1095,40 @@ function flexLayoutWrapper(fieldConfigs, { relative, breakpoint, size: defaultSi
 }
 
 class DbxFormFormlyWrapperModule {
-}
-DbxFormFormlyWrapperModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxFormFormlyWrapperModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-DbxFormFormlyWrapperModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: DbxFormFormlyWrapperModule, declarations: [AutoTouchFieldWrapperComponent, DbxFormSectionWrapperComponent, DbxFormSubsectionWrapperComponent, DbxFormInfoWrapperComponent, DbxFormExpandWrapperComponent, DbxFormToggleWrapperComponent, DbxFormFlexWrapperComponent, DbxFormStyleWrapperComponent, DbxFormWorkingWrapperComponent], imports: [CommonModule,
-        DbxTextModule,
-        DbxLoadingModule,
-        DbxFlexLayoutModule,
-        DbxSectionLayoutModule,
-        MatButtonModule,
-        MatSlideToggleModule,
-        MatIconModule,
-        FlexLayoutModule, i1$2.FormlyModule] });
-DbxFormFormlyWrapperModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxFormFormlyWrapperModule, imports: [CommonModule,
-        DbxTextModule,
-        DbxLoadingModule,
-        DbxFlexLayoutModule,
-        DbxSectionLayoutModule,
-        MatButtonModule,
-        MatSlideToggleModule,
-        MatIconModule,
-        FlexLayoutModule,
-        FormlyModule.forChild({
-            wrappers: [
-                { name: AUTO_TOUCH_WRAPPER_KEY, component: AutoTouchFieldWrapperComponent },
-                { name: EXPANDABLE_WRAPPER_KEY, component: DbxFormExpandWrapperComponent },
-                { name: TOGGLE_WRAPPER_KEY, component: DbxFormToggleWrapperComponent },
-                { name: SECTION_WRAPPER_KEY, component: DbxFormSectionWrapperComponent },
-                { name: SUBSECTION_WRAPPER_KEY, component: DbxFormSubsectionWrapperComponent },
-                { name: INFO_WRAPPER_KEY, component: DbxFormInfoWrapperComponent },
-                { name: FLEX_WRAPPER_KEY, component: DbxFormFlexWrapperComponent },
-                { name: STYLE_WRAPPER_KEY, component: DbxFormStyleWrapperComponent },
-                { name: WORKING_WRAPPER_KEY, component: DbxFormWorkingWrapperComponent }
-            ]
-        })] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxFormFormlyWrapperModule, decorators: [{
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormFormlyWrapperModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: DbxFormFormlyWrapperModule, declarations: [AutoTouchFieldWrapperComponent, DbxFormSectionWrapperComponent, DbxFormSubsectionWrapperComponent, DbxFormInfoWrapperComponent, DbxFormExpandWrapperComponent, DbxFormToggleWrapperComponent, DbxFormFlexWrapperComponent, DbxFormStyleWrapperComponent, DbxFormWorkingWrapperComponent], imports: [CommonModule,
+            DbxTextModule,
+            DbxLoadingModule,
+            DbxFlexLayoutModule,
+            DbxSectionLayoutModule,
+            MatButtonModule,
+            MatSlideToggleModule,
+            MatIconModule,
+            FlexLayoutModule, i1$1.FormlyModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormFormlyWrapperModule, imports: [CommonModule,
+            DbxTextModule,
+            DbxLoadingModule,
+            DbxFlexLayoutModule,
+            DbxSectionLayoutModule,
+            MatButtonModule,
+            MatSlideToggleModule,
+            MatIconModule,
+            FlexLayoutModule,
+            FormlyModule.forChild({
+                wrappers: [
+                    { name: AUTO_TOUCH_WRAPPER_KEY, component: AutoTouchFieldWrapperComponent },
+                    { name: EXPANDABLE_WRAPPER_KEY, component: DbxFormExpandWrapperComponent },
+                    { name: TOGGLE_WRAPPER_KEY, component: DbxFormToggleWrapperComponent },
+                    { name: SECTION_WRAPPER_KEY, component: DbxFormSectionWrapperComponent },
+                    { name: SUBSECTION_WRAPPER_KEY, component: DbxFormSubsectionWrapperComponent },
+                    { name: INFO_WRAPPER_KEY, component: DbxFormInfoWrapperComponent },
+                    { name: FLEX_WRAPPER_KEY, component: DbxFormFlexWrapperComponent },
+                    { name: STYLE_WRAPPER_KEY, component: DbxFormStyleWrapperComponent },
+                    { name: WORKING_WRAPPER_KEY, component: DbxFormWorkingWrapperComponent }
+                ]
+            })] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormFormlyWrapperModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -1164,34 +1161,34 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
         }] });
 
 class DbxFormFormlyChecklistItemFieldModule {
-}
-DbxFormFormlyChecklistItemFieldModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxFormFormlyChecklistItemFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-DbxFormFormlyChecklistItemFieldModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: DbxFormFormlyChecklistItemFieldModule, declarations: [DbxChecklistItemFieldComponent, DbxChecklistItemContentComponent, DbxDefaultChecklistItemFieldDisplayComponent], imports: [CommonModule,
-        DbxTextModule,
-        FormsModule,
-        ReactiveFormsModule,
-        MatRippleModule,
-        MatCheckboxModule,
-        MatButtonModule,
-        MatIconModule,
-        DbxRouterAnchorModule,
-        DbxInjectionComponentModule,
-        DbxFormFormlyWrapperModule, i1$2.FormlyModule], exports: [DbxFormFormlyWrapperModule] });
-DbxFormFormlyChecklistItemFieldModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxFormFormlyChecklistItemFieldModule, imports: [CommonModule,
-        DbxTextModule,
-        FormsModule,
-        ReactiveFormsModule,
-        MatRippleModule,
-        MatCheckboxModule,
-        MatButtonModule,
-        MatIconModule,
-        DbxRouterAnchorModule,
-        DbxInjectionComponentModule,
-        DbxFormFormlyWrapperModule,
-        FormlyModule.forChild({
-            types: [{ name: 'checklistitem', component: DbxChecklistItemFieldComponent }]
-        }), DbxFormFormlyWrapperModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxFormFormlyChecklistItemFieldModule, decorators: [{
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormFormlyChecklistItemFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: DbxFormFormlyChecklistItemFieldModule, declarations: [DbxChecklistItemFieldComponent, DbxChecklistItemContentComponent, DbxDefaultChecklistItemFieldDisplayComponent], imports: [CommonModule,
+            DbxTextModule,
+            FormsModule,
+            ReactiveFormsModule,
+            MatRippleModule,
+            MatCheckboxModule,
+            MatButtonModule,
+            MatIconModule,
+            DbxRouterAnchorModule,
+            DbxInjectionComponentModule,
+            DbxFormFormlyWrapperModule, i1$1.FormlyModule], exports: [DbxFormFormlyWrapperModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormFormlyChecklistItemFieldModule, imports: [CommonModule,
+            DbxTextModule,
+            FormsModule,
+            ReactiveFormsModule,
+            MatRippleModule,
+            MatCheckboxModule,
+            MatButtonModule,
+            MatIconModule,
+            DbxRouterAnchorModule,
+            DbxInjectionComponentModule,
+            DbxFormFormlyWrapperModule,
+            FormlyModule.forChild({
+                types: [{ name: 'checklistitem', component: DbxChecklistItemFieldComponent }]
+            }), DbxFormFormlyWrapperModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormFormlyChecklistItemFieldModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -1310,12 +1307,6 @@ function validatorsForFieldConfig(input) {
     }
     return config;
 }
-/**
- * MARK: Compat
- *
- * @deprecated use propsAndConfigForFieldConfig instead.
- */
-const propsForFieldConfig = propsAndConfigForFieldConfig;
 
 function checklistItemField(config) {
     const { key, displayContentObs, componentClass } = config;
@@ -1433,12 +1424,12 @@ class DbxFormComponentFieldComponent extends FieldType {
     get config() {
         return this.field.componentField;
     }
-}
-DbxFormComponentFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxFormComponentFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-DbxFormComponentFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: DbxFormComponentFieldComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormComponentFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DbxFormComponentFieldComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
     <div class="dbx-form-component" dbx-injection [config]="config"></div>
-  `, isInline: true, dependencies: [{ kind: "component", type: i2.DbxInjectionComponent, selector: "dbx-injection, [dbxInjection], [dbx-injection]", inputs: ["config", "template"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxFormComponentFieldComponent, decorators: [{
+  `, isInline: true, dependencies: [{ kind: "component", type: i2.DbxInjectionComponent, selector: "dbx-injection, [dbxInjection], [dbx-injection]", inputs: ["config", "template"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormComponentFieldComponent, decorators: [{
             type: Component,
             args: [{
                     template: `
@@ -1448,16 +1439,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
         }] });
 
 class DbxFormFormlyComponentFieldModule {
-}
-DbxFormFormlyComponentFieldModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxFormFormlyComponentFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-DbxFormFormlyComponentFieldModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: DbxFormFormlyComponentFieldModule, declarations: [DbxFormComponentFieldComponent], imports: [CommonModule,
-        DbxInjectionComponentModule, i1$2.FormlyModule], exports: [DbxFormComponentFieldComponent] });
-DbxFormFormlyComponentFieldModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxFormFormlyComponentFieldModule, imports: [CommonModule,
-        DbxInjectionComponentModule,
-        FormlyModule.forChild({
-            types: [{ name: 'component', component: DbxFormComponentFieldComponent }]
-        })] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxFormFormlyComponentFieldModule, decorators: [{
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormFormlyComponentFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: DbxFormFormlyComponentFieldModule, declarations: [DbxFormComponentFieldComponent], imports: [CommonModule,
+            DbxInjectionComponentModule, i1$1.FormlyModule], exports: [DbxFormComponentFieldComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormFormlyComponentFieldModule, imports: [CommonModule,
+            DbxInjectionComponentModule,
+            FormlyModule.forChild({
+                types: [{ name: 'component', component: DbxFormComponentFieldComponent }]
+            })] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormFormlyComponentFieldModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -1564,49 +1555,49 @@ class DbxItemListFieldComponent extends FieldType {
             this.formControl.markAsTouched();
         }
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxItemListFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DbxItemListFieldComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<div class=\"dbx-list-item-field\" [dbxListItemModifier] [dbxListItemIsSelectedModifier]=\"isSelectedModifierFunction$ | async\">\n  <dbx-label class=\"dbx-label-padded\" *ngIf=\"label\">{{ label }}</dbx-label>\n  <div class=\"dbx-list-item-field-content\">\n    <dbx-injection [config]=\"config$ | async\"></dbx-injection>\n  </div>\n  <mat-divider></mat-divider>\n  <dbx-form-description *ngIf=\"description\">{{ description }}</dbx-form-description>\n</div>\n", dependencies: [{ 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: "component", type: i5.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i2.DbxInjectionComponent, selector: "dbx-injection, [dbxInjection], [dbx-injection]", inputs: ["config", "template"] }, { kind: "directive", type: i2$1.DbxValueListItemModifierDirective, selector: "[dbxListItemModifier]", inputs: ["dbxListItemModifier"] }, { kind: "directive", type: i2$1.DbxListItemIsSelectedModifierDirective, selector: "[dbxListItemIsSelectedModifier]", inputs: ["dbxListItemIsSelectedModifier"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] }); }
 }
-DbxItemListFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxItemListFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-DbxItemListFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: DbxItemListFieldComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<div class=\"dbx-list-item-field\" [dbxListItemModifier] [dbxListItemIsSelectedModifier]=\"isSelectedModifierFunction$ | async\">\n  <dbx-label class=\"dbx-label-padded\" *ngIf=\"label\">{{ label }}</dbx-label>\n  <div class=\"dbx-list-item-field-content\">\n    <dbx-injection [config]=\"config$ | async\"></dbx-injection>\n  </div>\n  <mat-divider></mat-divider>\n  <dbx-form-description *ngIf=\"description\">{{ description }}</dbx-form-description>\n</div>\n", dependencies: [{ 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: "component", type: i5.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i2.DbxInjectionComponent, selector: "dbx-injection, [dbxInjection], [dbx-injection]", inputs: ["config", "template"] }, { kind: "directive", type: i2$1.DbxValueListItemModifierDirective, selector: "[dbxListItemModifier]", inputs: ["dbxListItemModifier"] }, { kind: "directive", type: i2$1.DbxListItemIsSelectedModifierDirective, selector: "[dbxListItemIsSelectedModifier]", inputs: ["dbxListItemIsSelectedModifier"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxItemListFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxItemListFieldComponent, decorators: [{
             type: Component,
             args: [{ template: "<div class=\"dbx-list-item-field\" [dbxListItemModifier] [dbxListItemIsSelectedModifier]=\"isSelectedModifierFunction$ | async\">\n  <dbx-label class=\"dbx-label-padded\" *ngIf=\"label\">{{ label }}</dbx-label>\n  <div class=\"dbx-list-item-field-content\">\n    <dbx-injection [config]=\"config$ | async\"></dbx-injection>\n  </div>\n  <mat-divider></mat-divider>\n  <dbx-form-description *ngIf=\"description\">{{ description }}</dbx-form-description>\n</div>\n" }]
         }] });
 
 class DbxFormFormlyDbxListFieldModule {
-}
-DbxFormFormlyDbxListFieldModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxFormFormlyDbxListFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-DbxFormFormlyDbxListFieldModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: DbxFormFormlyDbxListFieldModule, declarations: [DbxItemListFieldComponent], imports: [CommonModule,
-        DbxTextModule,
-        DbxLoadingModule,
-        DbxButtonModule,
-        FormsModule,
-        MatDividerModule,
-        MatButtonModule,
-        MatInputModule,
-        MatFormFieldModule,
-        ReactiveFormsModule,
-        MatAutocompleteModule,
-        MatIconModule,
-        DbxInjectionComponentModule,
-        DbxListLayoutModule, i1$2.FormlyModule], exports: [DbxItemListFieldComponent] });
-DbxFormFormlyDbxListFieldModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxFormFormlyDbxListFieldModule, imports: [CommonModule,
-        DbxTextModule,
-        DbxLoadingModule,
-        DbxButtonModule,
-        FormsModule,
-        MatDividerModule,
-        MatButtonModule,
-        MatInputModule,
-        MatFormFieldModule,
-        ReactiveFormsModule,
-        MatAutocompleteModule,
-        MatIconModule,
-        DbxInjectionComponentModule,
-        DbxListLayoutModule,
-        FormlyModule.forChild({
-            types: [{ name: 'dbxlistfield', component: DbxItemListFieldComponent }]
-        })] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxFormFormlyDbxListFieldModule, decorators: [{
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormFormlyDbxListFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: DbxFormFormlyDbxListFieldModule, declarations: [DbxItemListFieldComponent], imports: [CommonModule,
+            DbxTextModule,
+            DbxLoadingModule,
+            DbxButtonModule,
+            FormsModule,
+            MatDividerModule,
+            MatButtonModule,
+            MatInputModule,
+            MatFormFieldModule,
+            ReactiveFormsModule,
+            MatAutocompleteModule,
+            MatIconModule,
+            DbxInjectionComponentModule,
+            DbxListLayoutModule, i1$1.FormlyModule], exports: [DbxItemListFieldComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormFormlyDbxListFieldModule, imports: [CommonModule,
+            DbxTextModule,
+            DbxLoadingModule,
+            DbxButtonModule,
+            FormsModule,
+            MatDividerModule,
+            MatButtonModule,
+            MatInputModule,
+            MatFormFieldModule,
+            ReactiveFormsModule,
+            MatAutocompleteModule,
+            MatIconModule,
+            DbxInjectionComponentModule,
+            DbxListLayoutModule,
+            FormlyModule.forChild({
+                types: [{ name: 'dbxlistfield', component: DbxItemListFieldComponent }]
+            })] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormFormlyDbxListFieldModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -1888,10 +1879,10 @@ class AbstractDbxPickableItemFieldDirective extends FieldType$1 {
         this.formControl.markAsTouched();
         this.formControl.markAsDirty();
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AbstractDbxPickableItemFieldDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: AbstractDbxPickableItemFieldDirective, viewQueries: [{ propertyName: "filterMatInput", first: true, predicate: ["filterMatInput"], descendants: true, static: true }], usesInheritance: true, ngImport: i0 }); }
 }
-AbstractDbxPickableItemFieldDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: AbstractDbxPickableItemFieldDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-AbstractDbxPickableItemFieldDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.12", type: AbstractDbxPickableItemFieldDirective, viewQueries: [{ propertyName: "filterMatInput", first: true, predicate: ["filterMatInput"], descendants: true, static: true }], usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: AbstractDbxPickableItemFieldDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AbstractDbxPickableItemFieldDirective, decorators: [{
             type: Directive
         }], propDecorators: { filterMatInput: [{
                 type: ViewChild,
@@ -1912,12 +1903,12 @@ class DbxPickableChipListFieldComponent extends AbstractDbxPickableItemFieldDire
             }
         }
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxPickableChipListFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.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-listbox [multiple]=\"multiSelect\" [required]=\"required\" [selectable]=\"!isReadonlyOrDisabled\" [disabled]=\"readonly\" #chipList>\n        <mat-chip-option *ngFor=\"let item of items$ | async\" (click)=\"itemClicked(item)\" [selected]=\"item.selected\" [disabled]=\"isReadonlyOrDisabled || item.disabled\">\n          <mat-icon matChipAvatar *ngIf=\"item.itemValue.icon\">{{ item.itemValue.icon }}</mat-icon>\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-option>\n      </mat-chip-listbox>\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", "padding", "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.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: i6.MatChipAvatar, selector: "mat-chip-avatar, [matChipAvatar]" }, { kind: "component", type: i6.MatChipListbox, selector: "mat-chip-listbox", inputs: ["tabIndex", "multiple", "aria-orientation", "selectable", "compareWith", "required", "hideSingleSelectionIndicator", "value"], outputs: ["change"] }, { kind: "component", type: i6.MatChipOption, selector: "mat-basic-chip-option, [mat-basic-chip-option], mat-chip-option, [mat-chip-option]", inputs: ["color", "disabled", "disableRipple", "tabIndex", "selectable", "selected"], outputs: ["selectionChange"] }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i2.DbxInjectionComponent, selector: "dbx-injection, [dbxInjection], [dbx-injection]", inputs: ["config", "template"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] }); }
 }
-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 [multiple]=\"multiSelect\" [required]=\"required\" [selectable]=\"!isReadonlyOrDisabled\" [disabled]=\"readonly\" #chipList>\n        <mat-chip *ngFor=\"let item of items$ | async\" (click)=\"itemClicked(item)\" [selected]=\"item.selected\" [disabled]=\"isReadonlyOrDisabled || item.disabled\">\n          <mat-icon class=\"dbx-icon-spacer\" *ngIf=\"item.itemValue.icon\">{{ item.itemValue.icon }}</mat-icon>\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", "padding", "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.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: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { 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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.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 [multiple]=\"multiSelect\" [required]=\"required\" [selectable]=\"!isReadonlyOrDisabled\" [disabled]=\"readonly\" #chipList>\n        <mat-chip *ngFor=\"let item of items$ | async\" (click)=\"itemClicked(item)\" [selected]=\"item.selected\" [disabled]=\"isReadonlyOrDisabled || item.disabled\">\n          <mat-icon class=\"dbx-icon-spacer\" *ngIf=\"item.itemValue.icon\">{{ item.itemValue.icon }}</mat-icon>\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" }]
+            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-listbox [multiple]=\"multiSelect\" [required]=\"required\" [selectable]=\"!isReadonlyOrDisabled\" [disabled]=\"readonly\" #chipList>\n        <mat-chip-option *ngFor=\"let item of items$ | async\" (click)=\"itemClicked(item)\" [selected]=\"item.selected\" [disabled]=\"isReadonlyOrDisabled || item.disabled\">\n          <mat-icon matChipAvatar *ngIf=\"item.itemValue.icon\">{{ item.itemValue.icon }}</mat-icon>\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-option>\n      </mat-chip-listbox>\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" }]
         }] });
 
 /**
@@ -1929,10 +1920,10 @@ class DbxPickableListFieldComponent extends AbstractDbxPickableItemFieldDirectiv
         const values = items.map((x) => x.itemValue.value);
         this.setValues(values);
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxPickableListFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.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", "padding", "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.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.ɵ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", "padding", "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.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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.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" }]
         }] });
@@ -1943,10 +1934,10 @@ class DbxPickableListFieldItemListComponent extends AbstractDbxSelectionListWrap
             componentClass: DbxPickableListFieldItemListViewComponent
         });
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxPickableListFieldItemListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DbxPickableListFieldItemListComponent, selector: "dbx-form-pickable-item-field-item-list", usesInheritance: true, ngImport: i0, template: "\n<dbx-list [state$]=\"state$\" [config]=\"config$ | async\" [disabled]=\"disabled\" [selectionMode]=\"selectionMode\">\n  <ng-content top select=\"[top]\"></ng-content>\n  <ng-content bottom select=\"[bottom]\"></ng-content>\n  <ng-content empty select=\"[empty]\"></ng-content>\n  <ng-content emptyLoading select=\"[emptyLoading]\"></ng-content>\n</dbx-list>\n", isInline: true, dependencies: [{ kind: "component", type: i2$1.DbxListComponent, selector: "dbx-list", inputs: ["padded", "state$", "config", "disabled", "selectionMode"], outputs: ["contentScrolled"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] }); }
 }
-DbxPickableListFieldItemListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxPickableListFieldItemListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-DbxPickableListFieldItemListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: DbxPickableListFieldItemListComponent, selector: "dbx-form-pickable-item-field-item-list", usesInheritance: true, ngImport: i0, template: "\n<dbx-list [state$]=\"state$\" [config]=\"config$ | async\" [disabled]=\"disabled\" [selectionMode]=\"selectionMode\">\n  <ng-content top select=\"[top]\"></ng-content>\n  <ng-content bottom select=\"[bottom]\"></ng-content>\n  <ng-content empty select=\"[empty]\"></ng-content>\n  <ng-content emptyLoading select=\"[emptyLoading]\"></ng-content>\n</dbx-list>\n", isInline: true, dependencies: [{ kind: "component", type: i2$1.DbxListComponent, selector: "dbx-list", inputs: ["padded", "state$", "config", "disabled", "selectionMode"], outputs: ["contentScrolled"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxPickableListFieldItemListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxPickableListFieldItemListComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'dbx-form-pickable-item-field-item-list',
@@ -1957,6 +1948,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
  * NOTE: Values input are PickableItemFieldItem<T>, but output values are PickableValueFieldDisplayValue<T>.
  */
 class DbxPickableListFieldItemListViewComponent extends AbstractDbxSelectionListViewDirective {
+    get multiple() {
+        return !this.dbxPickableListFieldComponent.pickOnlyOne;
+    }
+    get selectionMode() {
+        let selectionMode = 'select';
+        if (this.dbxPickableListFieldComponent.disabled && this.dbxPickableListFieldComponent.changeSelectionModeToViewOnDisabled) {
+            selectionMode = 'view';
+        }
+        return selectionMode;
+    }
     constructor(dbxPickableListFieldComponent) {
         super();
         this.dbxPickableListFieldComponent = dbxPickableListFieldComponent;
@@ -1968,22 +1969,12 @@ class DbxPickableListFieldItemListViewComponent extends AbstractDbxSelectionList
         // NOTE: This causes the "value" to be a PickableValueFieldDisplayValue<T>, which means we emit PickableValueFieldDisplayValue<T> to DbxPickableListFieldComponent.
         map((x) => addConfigToValueListItems(this.config, x)), shareReplay(1));
     }
-    get multiple() {
-        return !this.dbxPickableListFieldComponent.pickOnlyOne;
-    }
-    get selectionMode() {
-        let selectionMode = 'select';
-        if (this.dbxPickableListFieldComponent.disabled && this.dbxPickableListFieldComponent.changeSelectionModeToViewOnDisabled) {
-            selectionMode = 'view';
-        }
-        return selectionMode;
-    }
-}
-DbxPickableListFieldItemListViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxPickableListFieldItemListViewComponent, deps: [{ token: DbxPickableListFieldComponent }], target: i0.ɵɵFactoryTarget.Component });
-DbxPickableListFieldItemListViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: DbxPickableListFieldItemListViewComponent, selector: "ng-component", providers: provideDbxListView(DbxPickableListFieldItemListViewComponent), usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxPickableListFieldItemListViewComponent, deps: [{ token: DbxPickableListFieldComponent }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DbxPickableListFieldItemListViewComponent, selector: "ng-component", providers: provideDbxListView(DbxPickableListFieldItemListViewComponent), usesInheritance: true, ngImport: i0, template: `
     <dbx-selection-list-view-content [multiple]="multiple" [selectionMode]="selectionMode" [items]="items$ | async"></dbx-selection-list-view-content>
-  `, isInline: true, dependencies: [{ kind: "component", type: i2$1.DbxSelectionValueListItemViewComponent, selector: "dbx-selection-list-view-content", inputs: ["multiple", "selectionMode"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxPickableListFieldItemListViewComponent, decorators: [{
+  `, isInline: true, dependencies: [{ kind: "component", type: i2$1.DbxSelectionValueListItemViewComponent, selector: "dbx-selection-list-view-content", inputs: ["multiple", "selectionMode"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxPickableListFieldItemListViewComponent, decorators: [{
             type: Component,
             args: [{
                     template: `
@@ -2002,20 +1993,20 @@ class DbxPickableListFieldItemListViewItemComponent extends AbstractDbxValueList
     get icon() {
         return this.itemValue.icon;
     }
-}
-DbxPickableListFieldItemListViewItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxPickableListFieldItemListViewItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-DbxPickableListFieldItemListViewItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: DbxPickableListFieldItemListViewItemComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
-    <div class="dbx-default-pickable-item-field-list-item">
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxPickableListFieldItemListViewItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DbxPickableListFieldItemListViewItemComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
+    <div class="dbx-default-pickable-item-field-list-item dbx-flex-bar">
       <mat-icon class="dbx-icon-spacer" *ngIf="icon">{{ icon }}</mat-icon>
       <span class="dbx-chip-label">{{ label }}</span>
       <span class="dbx-chip-sublabel" *ngIf="sublabel">({{ sublabel }})</span>
     </div>
-  `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxPickableListFieldItemListViewItemComponent, decorators: [{
+  `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxPickableListFieldItemListViewItemComponent, decorators: [{
             type: Component,
             args: [{
                     template: `
-    <div class="dbx-default-pickable-item-field-list-item">
+    <div class="dbx-default-pickable-item-field-list-item dbx-flex-bar">
       <mat-icon class="dbx-icon-spacer" *ngIf="icon">{{ icon }}</mat-icon>
       <span class="dbx-chip-label">{{ label }}</span>
       <span class="dbx-chip-sublabel" *ngIf="sublabel">({{ sublabel }})</span>
@@ -2025,49 +2016,49 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
         }] });
 
 class DbxFormFormlyPickableFieldModule {
-}
-DbxFormFormlyPickableFieldModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxFormFormlyPickableFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-DbxFormFormlyPickableFieldModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: DbxFormFormlyPickableFieldModule, declarations: [DbxPickableChipListFieldComponent, DbxPickableListFieldComponent, DbxPickableListFieldItemListComponent, DbxPickableListFieldItemListViewComponent, DbxPickableListFieldItemListViewItemComponent], imports: [CommonModule,
-        DbxTextModule,
-        DbxLoadingModule,
-        DbxButtonModule,
-        FormsModule,
-        MatButtonModule,
-        MatInputModule,
-        MatFormFieldModule,
-        ReactiveFormsModule,
-        MatAutocompleteModule,
-        MatListModule,
-        DbxDatePipeModule,
-        DbxRouterAnchorModule,
-        MatChipsModule,
-        MatIconModule,
-        DbxInjectionComponentModule,
-        DbxListLayoutModule, i1$2.FormlyModule] });
-DbxFormFormlyPickableFieldModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxFormFormlyPickableFieldModule, imports: [CommonModule,
-        DbxTextModule,
-        DbxLoadingModule,
-        DbxButtonModule,
-        FormsModule,
-        MatButtonModule,
-        MatInputModule,
-        MatFormFieldModule,
-        ReactiveFormsModule,
-        MatAutocompleteModule,
-        MatListModule,
-        DbxDatePipeModule,
-        DbxRouterAnchorModule,
-        MatChipsModule,
-        MatIconModule,
-        DbxInjectionComponentModule,
-        DbxListLayoutModule,
-        FormlyModule.forChild({
-            types: [
-                { name: 'pickablechipfield', component: DbxPickableChipListFieldComponent, wrappers: ['form-field'] },
-                { name: 'pickablelistfield', component: DbxPickableListFieldComponent, wrappers: ['form-field'] }
-            ]
-        })] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxFormFormlyPickableFieldModule, decorators: [{
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormFormlyPickableFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: DbxFormFormlyPickableFieldModule, declarations: [DbxPickableChipListFieldComponent, DbxPickableListFieldComponent, DbxPickableListFieldItemListComponent, DbxPickableListFieldItemListViewComponent, DbxPickableListFieldItemListViewItemComponent], imports: [CommonModule,
+            DbxTextModule,
+            DbxLoadingModule,
+            DbxButtonModule,
+            FormsModule,
+            MatButtonModule,
+            MatInputModule,
+            MatFormFieldModule,
+            ReactiveFormsModule,
+            MatAutocompleteModule,
+            MatListModule,
+            DbxDatePipeModule,
+            DbxRouterAnchorModule,
+            MatChipsModule,
+            MatIconModule,
+            DbxInjectionComponentModule,
+            DbxListLayoutModule, i1$1.FormlyModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormFormlyPickableFieldModule, imports: [CommonModule,
+            DbxTextModule,
+            DbxLoadingModule,
+            DbxButtonModule,
+            FormsModule,
+            MatButtonModule,
+            MatInputModule,
+            MatFormFieldModule,
+            ReactiveFormsModule,
+            MatAutocompleteModule,
+            MatListModule,
+            DbxDatePipeModule,
+            DbxRouterAnchorModule,
+            MatChipsModule,
+            MatIconModule,
+            DbxInjectionComponentModule,
+            DbxListLayoutModule,
+            FormlyModule.forChild({
+                types: [
+                    { name: 'pickablechipfield', component: DbxPickableChipListFieldComponent, wrappers: ['form-field'] },
+                    { name: 'pickablelistfield', component: DbxPickableListFieldComponent, wrappers: ['form-field'] }
+                ]
+            })] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormFormlyPickableFieldModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -2166,7 +2157,7 @@ class DbxSearchableFieldAutocompleteItemComponent {
         this.config$ = this.displayValue$.pipe(map((x) => {
             const config = {
                 ...x.display,
-                providers: mergeIntoArray([
+                providers: mergeArraysIntoArray([
                     {
                         provide: DBX_SEARCHABLE_FIELD_COMPONENT_DATA_TOKEN,
                         useValue: x
@@ -2183,14 +2174,14 @@ class DbxSearchableFieldAutocompleteItemComponent {
     ngOnDestroy() {
         this._displayValue.complete();
     }
-}
-DbxSearchableFieldAutocompleteItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxSearchableFieldAutocompleteItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-DbxSearchableFieldAutocompleteItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: DbxSearchableFieldAutocompleteItemComponent, selector: "dbx-searchable-field-autocomplete-item", inputs: { displayValue: "displayValue" }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxSearchableFieldAutocompleteItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DbxSearchableFieldAutocompleteItemComponent, selector: "dbx-searchable-field-autocomplete-item", inputs: { displayValue: "displayValue" }, ngImport: i0, template: `
     <dbx-anchor [block]="true" [anchor]="anchor$ | async">
       <dbx-injection [config]="config$ | async"></dbx-injection>
     </dbx-anchor>
-  `, isInline: true, dependencies: [{ kind: "component", type: i2$1.DbxAnchorComponent, selector: "dbx-anchor, [dbx-anchor]", inputs: ["block"] }, { 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: DbxSearchableFieldAutocompleteItemComponent, decorators: [{
+  `, isInline: true, dependencies: [{ kind: "component", type: i2$1.DbxAnchorComponent, selector: "dbx-anchor, [dbx-anchor]", inputs: ["block"] }, { 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: "16.2.12", ngImport: i0, type: DbxSearchableFieldAutocompleteItemComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'dbx-searchable-field-autocomplete-item',
@@ -2208,10 +2199,10 @@ class AbstractDbxSearchableFieldDisplayDirective {
     constructor(displayValue) {
         this.displayValue = displayValue;
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AbstractDbxSearchableFieldDisplayDirective, deps: [{ token: DBX_SEARCHABLE_FIELD_COMPONENT_DATA_TOKEN }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: AbstractDbxSearchableFieldDisplayDirective, ngImport: i0 }); }
 }
-AbstractDbxSearchableFieldDisplayDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: AbstractDbxSearchableFieldDisplayDirective, deps: [{ token: DBX_SEARCHABLE_FIELD_COMPONENT_DATA_TOKEN }], target: i0.ɵɵFactoryTarget.Directive });
-AbstractDbxSearchableFieldDisplayDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.12", type: AbstractDbxSearchableFieldDisplayDirective, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: AbstractDbxSearchableFieldDisplayDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AbstractDbxSearchableFieldDisplayDirective, decorators: [{
             type: Directive
         }], ctorParameters: function () { return [{ type: undefined, decorators: [{
                     type: Inject,
@@ -2221,22 +2212,22 @@ class DbxDefaultSearchableFieldDisplayComponent extends AbstractDbxSearchableFie
     get icon() {
         return this.displayValue.icon;
     }
-}
-DbxDefaultSearchableFieldDisplayComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxDefaultSearchableFieldDisplayComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-DbxDefaultSearchableFieldDisplayComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: DbxDefaultSearchableFieldDisplayComponent, selector: "dbx-default-searchable-field-display", usesInheritance: true, ngImport: i0, template: `
-    <div class="dbx-default-searchable-field-display">
-      <mat-icon *ngIf="icon">{{ icon }}</mat-icon>
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxDefaultSearchableFieldDisplayComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DbxDefaultSearchableFieldDisplayComponent, selector: "dbx-default-searchable-field-display", usesInheritance: true, ngImport: i0, template: `
+    <div class="dbx-default-searchable-field-display dbx-flex-bar">
+      <mat-icon class="dbx-icon-spacer" *ngIf="icon">{{ icon }}</mat-icon>
       <span class="dbx-chip-label">{{ displayValue.label }}</span>
       <span class="dbx-chip-sublabel" *ngIf="displayValue.sublabel">({{ displayValue.sublabel }})</span>
     </div>
-  `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxDefaultSearchableFieldDisplayComponent, decorators: [{
+  `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxDefaultSearchableFieldDisplayComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'dbx-default-searchable-field-display',
                     template: `
-    <div class="dbx-default-searchable-field-display">
-      <mat-icon *ngIf="icon">{{ icon }}</mat-icon>
+    <div class="dbx-default-searchable-field-display dbx-flex-bar">
+      <mat-icon class="dbx-icon-spacer" *ngIf="icon">{{ icon }}</mat-icon>
       <span class="dbx-chip-label">{{ displayValue.label }}</span>
       <span class="dbx-chip-sublabel" *ngIf="displayValue.sublabel">({{ displayValue.sublabel }})</span>
     </div>
@@ -2250,31 +2241,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
  * Display values are cached for performance.
  */
 class AbstractDbxSearchableValueFieldDirective extends FieldType$1 {
-    constructor(cdRef) {
-        super();
-        this.cdRef = cdRef;
-        /**
-         * Whether or not to allow syncing to
-         */
-        this.allowSyncValueToInput = false;
-        this.inputCtrl = new FormControl('');
-        this._formControlObs = new BehaviorSubject(undefined);
-        this.formControl$ = this._formControlObs.pipe(filterMaybe());
-        this._clearDisplayHashMapSub = new SubscriptionObject();
-        this._displayHashMap = new BehaviorSubject(new Map());
-        this.inputValue$ = this.inputCtrl.valueChanges.pipe(startWith(this.inputCtrl.value), map((x) => x || ''));
-        this.inputValueString$ = this.inputValue$.pipe(debounceTime(200), distinctUntilChanged());
-        this.searchResultsState$ = this.inputValueString$.pipe(switchMap((text) => (text || this.searchOnEmptyText ? this.search(text ?? '') : of([])).pipe(switchMap((x) => this.loadDisplayValuesForFieldValues(x)), 
-        // Return begin loading to setup the loading state.
-        startWithBeginLoading())), shareReplay(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.displayValuesState$ = this.values$.pipe(distinctUntilChanged(), switchMap((values) => this.loadDisplayValuesForValues(values)), shareReplay(1));
-        this.displayValues$ = this.displayValuesState$.pipe(map((x) => x?.value ?? []));
-    }
     get name() {
         return this.field.name ?? camelCase(this.label ?? this.key);
     }
@@ -2387,6 +2353,31 @@ class AbstractDbxSearchableValueFieldDirective extends FieldType$1 {
             return obs;
         }));
     }
+    constructor(cdRef) {
+        super();
+        this.cdRef = cdRef;
+        /**
+         * Whether or not to allow syncing to
+         */
+        this.allowSyncValueToInput = false;
+        this.inputCtrl = new FormControl('');
+        this._formControlObs = new BehaviorSubject(undefined);
+        this.formControl$ = this._formControlObs.pipe(filterMaybe());
+        this._clearDisplayHashMapSub = new SubscriptionObject();
+        this._displayHashMap = new BehaviorSubject(new Map());
+        this.inputValue$ = this.inputCtrl.valueChanges.pipe(startWith(this.inputCtrl.value), map((x) => x || ''));
+        this.inputValueString$ = this.inputValue$.pipe(debounceTime(200), distinctUntilChanged());
+        this.searchResultsState$ = this.inputValueString$.pipe(switchMap((text) => (text || this.searchOnEmptyText ? this.search(text ?? '') : of([])).pipe(switchMap((x) => this.loadDisplayValuesForFieldValues(x)), 
+        // Return begin loading to setup the loading state.
+        startWithBeginLoading())), shareReplay(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.displayValuesState$ = this.values$.pipe(distinctUntilChanged(), switchMap((values) => this.loadDisplayValuesForValues(values)), shareReplay(1));
+        this.displayValues$ = this.displayValuesState$.pipe(map((x) => x?.value ?? []));
+    }
     ngOnInit() {
         this._formControlObs.next(this.formControl);
         if (this.refreshDisplayValues$ != null) {
@@ -2502,10 +2493,10 @@ class AbstractDbxSearchableValueFieldDirective extends FieldType$1 {
         this.formControl.markAsDirty();
         this.formControl.markAsTouched();
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AbstractDbxSearchableValueFieldDirective, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: AbstractDbxSearchableValueFieldDirective, viewQueries: [{ propertyName: "textInput", first: true, predicate: ["textInput"], descendants: true }], usesInheritance: true, ngImport: i0 }); }
 }
-AbstractDbxSearchableValueFieldDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: AbstractDbxSearchableValueFieldDirective, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
-AbstractDbxSearchableValueFieldDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.12", type: AbstractDbxSearchableValueFieldDirective, viewQueries: [{ propertyName: "textInput", first: true, predicate: ["textInput"], descendants: true }], usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: AbstractDbxSearchableValueFieldDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AbstractDbxSearchableValueFieldDirective, decorators: [{
             type: Directive
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { textInput: [{
                 type: ViewChild,
@@ -2557,12 +2548,12 @@ class DbxSearchableChipFieldComponent extends AbstractDbxSearchableValueFieldDir
     onBlur() {
         this._blur.next();
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxSearchableChipFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DbxSearchableChipFieldComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<div class=\"dbx-searchable-field\">\n  <!-- View -->\n  <mat-chip-grid [required]=\"required\" [disabled]=\"readonly\" #chipList>\n    <mat-chip-row *ngFor=\"let displayValue of displayValues$ | async\" [removable]=\"true\" (removed)=\"removeWithDisplayValue(displayValue)\">\n      <mat-icon matChipAvatar *ngIf=\"displayValue.icon\">{{ displayValue.icon }}</mat-icon>\n      <span class=\"dbx-chip-label\">{{ displayValue.label }}</span>\n      <span class=\"dbx-chip-sublabel\" *ngIf=\"displayValue.sublabel\">{{ displayValue.sublabel }}</span>\n      <mat-icon matChipRemove *ngIf=\"!readonly\">cancel</mat-icon>\n    </mat-chip-row>\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-grid>\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", "padding", "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", "hideSingleSelectionIndicator"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i4$1.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "directive", type: i4$4.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "directive", type: i6.MatChipAvatar, selector: "mat-chip-avatar, [matChipAvatar]" }, { kind: "component", type: i6.MatChipGrid, selector: "mat-chip-grid", inputs: ["tabIndex", "disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { 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: i6.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["color", "disabled", "disableRipple", "tabIndex", "editable"], outputs: ["edited"] }, { kind: "component", type: i7.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.ɵ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 [multiple]=\"multiSelect\" [required]=\"required\" [selectable]=\"!isReadonlyOrDisabled\" [disabled]=\"readonly\" #chipList>\n    <mat-chip *ngFor=\"let displayValue of displayValues$ | async\" [removable]=\"true\" (removed)=\"removeWithDisplayValue(displayValue)\">\n      <mat-icon class=\"dbx-icon-spacer\" *ngIf=\"displayValue.icon\">{{ displayValue.icon }}</mat-icon>\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", "padding", "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: i7.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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxSearchableChipFieldComponent, decorators: [{
             type: Component,
-            args: [{ template: "<div class=\"dbx-searchable-field\">\n  <!-- View -->\n  <mat-chip-list [multiple]=\"multiSelect\" [required]=\"required\" [selectable]=\"!isReadonlyOrDisabled\" [disabled]=\"readonly\" #chipList>\n    <mat-chip *ngFor=\"let displayValue of displayValues$ | async\" [removable]=\"true\" (removed)=\"removeWithDisplayValue(displayValue)\">\n      <mat-icon class=\"dbx-icon-spacer\" *ngIf=\"displayValue.icon\">{{ displayValue.icon }}</mat-icon>\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" }]
+            args: [{ template: "<div class=\"dbx-searchable-field\">\n  <!-- View -->\n  <mat-chip-grid [required]=\"required\" [disabled]=\"readonly\" #chipList>\n    <mat-chip-row *ngFor=\"let displayValue of displayValues$ | async\" [removable]=\"true\" (removed)=\"removeWithDisplayValue(displayValue)\">\n      <mat-icon matChipAvatar *ngIf=\"displayValue.icon\">{{ displayValue.icon }}</mat-icon>\n      <span class=\"dbx-chip-label\">{{ displayValue.label }}</span>\n      <span class=\"dbx-chip-sublabel\" *ngIf=\"displayValue.sublabel\">{{ displayValue.sublabel }}</span>\n      <mat-icon matChipRemove *ngIf=\"!readonly\">cancel</mat-icon>\n    </mat-chip-row>\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-grid>\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" }]
         }] });
 
 /**
@@ -2667,56 +2658,56 @@ class DbxSearchableTextFieldComponent extends AbstractDbxSearchableValueFieldDir
     selected(event) {
         this.addWithDisplayValue(event.option.value);
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxSearchableTextFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.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", "padding", "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", "hideSingleSelectionIndicator"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i4$1.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "directive", type: i4$4.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: DbxSearchableFieldAutocompleteItemComponent, selector: "dbx-searchable-field-autocomplete-item", inputs: ["displayValue"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] }); }
 }
-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", "padding", "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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.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" }]
         }] });
 
 class DbxFormFormlySearchableFieldModule {
-}
-DbxFormFormlySearchableFieldModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxFormFormlySearchableFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-DbxFormFormlySearchableFieldModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: DbxFormFormlySearchableFieldModule, declarations: [DbxSearchableChipFieldComponent, DbxSearchableTextFieldComponent, DbxSearchableFieldAutocompleteItemComponent, DbxDefaultSearchableFieldDisplayComponent], imports: [CommonModule,
-        DbxTextModule,
-        DbxLoadingModule,
-        DbxButtonModule,
-        FormsModule,
-        MatButtonModule,
-        MatInputModule,
-        MatFormFieldModule,
-        ReactiveFormsModule,
-        MatAutocompleteModule,
-        MatListModule,
-        DbxDatePipeModule,
-        DbxRouterAnchorModule,
-        MatChipsModule,
-        MatIconModule,
-        DbxInjectionComponentModule, i1$2.FormlyModule], exports: [DbxSearchableChipFieldComponent, DbxSearchableTextFieldComponent] });
-DbxFormFormlySearchableFieldModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxFormFormlySearchableFieldModule, imports: [CommonModule,
-        DbxTextModule,
-        DbxLoadingModule,
-        DbxButtonModule,
-        FormsModule,
-        MatButtonModule,
-        MatInputModule,
-        MatFormFieldModule,
-        ReactiveFormsModule,
-        MatAutocompleteModule,
-        MatListModule,
-        DbxDatePipeModule,
-        DbxRouterAnchorModule,
-        MatChipsModule,
-        MatIconModule,
-        DbxInjectionComponentModule,
-        FormlyModule.forChild({
-            types: [
-                { name: 'searchablechipfield', component: DbxSearchableChipFieldComponent, wrappers: ['form-field'] },
-                { name: 'searchabletextfield', component: DbxSearchableTextFieldComponent, wrappers: ['form-field'] }
-            ]
-        })] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxFormFormlySearchableFieldModule, decorators: [{
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormFormlySearchableFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: DbxFormFormlySearchableFieldModule, declarations: [DbxSearchableChipFieldComponent, DbxSearchableTextFieldComponent, DbxSearchableFieldAutocompleteItemComponent, DbxDefaultSearchableFieldDisplayComponent], imports: [CommonModule,
+            DbxTextModule,
+            DbxLoadingModule,
+            DbxButtonModule,
+            FormsModule,
+            MatButtonModule,
+            MatInputModule,
+            MatFormFieldModule,
+            ReactiveFormsModule,
+            MatAutocompleteModule,
+            MatListModule,
+            DbxDatePipeModule,
+            DbxRouterAnchorModule,
+            MatChipsModule,
+            MatIconModule,
+            DbxInjectionComponentModule, i1$1.FormlyModule], exports: [DbxSearchableChipFieldComponent, DbxSearchableTextFieldComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormFormlySearchableFieldModule, imports: [CommonModule,
+            DbxTextModule,
+            DbxLoadingModule,
+            DbxButtonModule,
+            FormsModule,
+            MatButtonModule,
+            MatInputModule,
+            MatFormFieldModule,
+            ReactiveFormsModule,
+            MatAutocompleteModule,
+            MatListModule,
+            DbxDatePipeModule,
+            DbxRouterAnchorModule,
+            MatChipsModule,
+            MatIconModule,
+            DbxInjectionComponentModule,
+            FormlyModule.forChild({
+                types: [
+                    { name: 'searchablechipfield', component: DbxSearchableChipFieldComponent, wrappers: ['form-field'] },
+                    { name: 'searchabletextfield', component: DbxSearchableTextFieldComponent, wrappers: ['form-field'] }
+                ]
+            })] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormFormlySearchableFieldModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -3058,10 +3049,10 @@ class DbxFormSourceSelectFieldComponent extends FieldType$2 {
         this.formControl.markAsDirty();
         this.formControl.markAsTouched();
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormSourceSelectFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DbxFormSourceSelectFieldComponent, selector: "ng-component", viewQueries: [{ propertyName: "buttonElement", first: true, predicate: ["button"], descendants: true, read: ElementRef }], 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 #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", "panelWidth", "hideSingleSelectionIndicator"], 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", "padding", "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" }] }); }
 }
-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", viewQueries: [{ propertyName: "buttonElement", first: true, predicate: ["button"], descendants: true, read: ElementRef }], 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 #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", "padding", "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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.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 #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" }]
         }], propDecorators: { buttonElement: [{
@@ -3083,48 +3074,48 @@ function sourceSelectField(config) {
 }
 
 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: [{
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormFormlySourceSelectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.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$1.FormlyModule], exports: [DbxFormSourceSelectFieldComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.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: "16.2.12", ngImport: i0, type: DbxFormFormlySourceSelectModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -3191,11 +3182,11 @@ function addValueSelectionOptionFunction(label) {
 }
 
 class DbxFormFormlySelectionModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormFormlySelectionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: DbxFormFormlySelectionModule, imports: [CommonModule], exports: [DbxFormFormlyDbxListFieldModule, DbxFormFormlyPickableFieldModule, DbxFormFormlySearchableFieldModule, DbxFormFormlySourceSelectModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormFormlySelectionModule, imports: [CommonModule, DbxFormFormlyDbxListFieldModule, DbxFormFormlyPickableFieldModule, DbxFormFormlySearchableFieldModule, DbxFormFormlySourceSelectModule] }); }
 }
-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, 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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormFormlySelectionModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule],
@@ -3246,9 +3237,8 @@ class DbxTextEditorFieldComponent extends FieldType$1 {
         }
         this._sub.destroy();
     }
-}
-DbxTextEditorFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxTextEditorFieldComponent, deps: [{ token: i2$1.CompactContextStore, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-DbxTextEditorFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: DbxTextEditorFieldComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxTextEditorFieldComponent, deps: [{ token: i2$1.CompactContextStore, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DbxTextEditorFieldComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
     <div class="dbx-texteditor-field" [ngClass]="(compactClass$ | async) ?? ''" [formGroup]="formGroup">
       <dbx-label *ngIf="label">{{ label }}</dbx-label>
       <div class="dbx-texteditor-field-input">
@@ -3259,8 +3249,9 @@ 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$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: [{
+  `, 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: "16.2.12", ngImport: i0, type: DbxTextEditorFieldComponent, decorators: [{
             type: Component,
             args: [{
                     template: `
@@ -3281,26 +3272,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
                 }] }]; } });
 
 class DbxFormFormlyTextEditorFieldModule {
-}
-DbxFormFormlyTextEditorFieldModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxFormFormlyTextEditorFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-DbxFormFormlyTextEditorFieldModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: DbxFormFormlyTextEditorFieldModule, declarations: [DbxTextEditorFieldComponent], imports: [CommonModule,
-        DbxTextModule,
-        FormsModule,
-        ReactiveFormsModule,
-        NgxEditorModule,
-        MatFormFieldModule,
-        MatInputModule, i1$2.FormlyModule] });
-DbxFormFormlyTextEditorFieldModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxFormFormlyTextEditorFieldModule, imports: [CommonModule,
-        DbxTextModule,
-        FormsModule,
-        ReactiveFormsModule,
-        NgxEditorModule,
-        MatFormFieldModule,
-        MatInputModule,
-        FormlyModule.forChild({
-            types: [{ name: 'texteditor', component: DbxTextEditorFieldComponent }]
-        })] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxFormFormlyTextEditorFieldModule, decorators: [{
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormFormlyTextEditorFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: DbxFormFormlyTextEditorFieldModule, declarations: [DbxTextEditorFieldComponent], imports: [CommonModule,
+            DbxTextModule,
+            FormsModule,
+            ReactiveFormsModule,
+            NgxEditorModule,
+            MatFormFieldModule,
+            MatInputModule, i1$1.FormlyModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormFormlyTextEditorFieldModule, imports: [CommonModule,
+            DbxTextModule,
+            FormsModule,
+            ReactiveFormsModule,
+            NgxEditorModule,
+            MatFormFieldModule,
+            MatInputModule,
+            FormlyModule.forChild({
+                types: [{ name: 'texteditor', component: DbxTextEditorFieldComponent }]
+            })] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormFormlyTextEditorFieldModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -3476,9 +3467,8 @@ class DbxFormRepeatArrayTypeComponent extends FieldArrayType {
             fieldConfig
         });
     }
-}
-DbxFormRepeatArrayTypeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxFormRepeatArrayTypeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-DbxFormRepeatArrayTypeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: DbxFormRepeatArrayTypeComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormRepeatArrayTypeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DbxFormRepeatArrayTypeComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
     <div class="dbx-form-repeat-array">
       <dbx-subsection [header]="label" [hint]="description">
         <!-- Fields -->
@@ -3486,7 +3476,7 @@ DbxFormRepeatArrayTypeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion:
           <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-form-repeat-array-bar dbx-bar-fixed-height">
-              <button *ngIf="!disableRearrange" cdkDragHandle mat-stroked-button><mat-icon>drag_handle</mat-icon></button>
+              <button class="dbx-form-repeat-array-drag-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>
@@ -3506,8 +3496,9 @@ 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: i7.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: [{
+  `, 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: i8.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i7.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$1.FormlyField, selector: "formly-field", inputs: ["field"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormRepeatArrayTypeComponent, decorators: [{
             type: Component,
             args: [{
                     template: `
@@ -3518,7 +3509,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
           <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-form-repeat-array-bar dbx-bar-fixed-height">
-              <button *ngIf="!disableRearrange" cdkDragHandle mat-stroked-button><mat-icon>drag_handle</mat-icon></button>
+              <button class="dbx-form-repeat-array-drag-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>
@@ -3543,32 +3534,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
         }] });
 
 class DbxFormFormlyArrayFieldModule {
-}
-DbxFormFormlyArrayFieldModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxFormFormlyArrayFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-DbxFormFormlyArrayFieldModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: DbxFormFormlyArrayFieldModule, declarations: [DbxFormRepeatArrayTypeComponent], imports: [CommonModule,
-        MatFormFieldModule,
-        ReactiveFormsModule,
-        MatDividerModule,
-        MatButtonModule,
-        MatIconModule,
-        DragDropModule,
-        DbxSectionLayoutModule,
-        DbxBarLayoutModule,
-        DbxButtonModule, i1$2.FormlyModule] });
-DbxFormFormlyArrayFieldModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxFormFormlyArrayFieldModule, imports: [CommonModule,
-        MatFormFieldModule,
-        ReactiveFormsModule,
-        MatDividerModule,
-        MatButtonModule,
-        MatIconModule,
-        DragDropModule,
-        DbxSectionLayoutModule,
-        DbxBarLayoutModule,
-        DbxButtonModule,
-        FormlyModule.forChild({
-            types: [{ name: 'repeatarray', component: DbxFormRepeatArrayTypeComponent }]
-        })] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxFormFormlyArrayFieldModule, decorators: [{
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormFormlyArrayFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: DbxFormFormlyArrayFieldModule, declarations: [DbxFormRepeatArrayTypeComponent], imports: [CommonModule,
+            MatFormFieldModule,
+            ReactiveFormsModule,
+            MatDividerModule,
+            MatButtonModule,
+            MatIconModule,
+            DragDropModule,
+            DbxSectionLayoutModule,
+            DbxBarLayoutModule,
+            DbxButtonModule, i1$1.FormlyModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormFormlyArrayFieldModule, imports: [CommonModule,
+            MatFormFieldModule,
+            ReactiveFormsModule,
+            MatDividerModule,
+            MatButtonModule,
+            MatIconModule,
+            DragDropModule,
+            DbxSectionLayoutModule,
+            DbxBarLayoutModule,
+            DbxButtonModule,
+            FormlyModule.forChild({
+                types: [{ name: 'repeatarray', component: DbxFormRepeatArrayTypeComponent }]
+            })] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormFormlyArrayFieldModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -3618,11 +3609,11 @@ function repeatArrayField(config) {
 }
 
 class DbxFormFormlyBooleanFieldModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormFormlyBooleanFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: DbxFormFormlyBooleanFieldModule }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormFormlyBooleanFieldModule }); }
 }
-DbxFormFormlyBooleanFieldModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxFormFormlyBooleanFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-DbxFormFormlyBooleanFieldModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: DbxFormFormlyBooleanFieldModule });
-DbxFormFormlyBooleanFieldModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxFormFormlyBooleanFieldModule });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxFormFormlyBooleanFieldModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormFormlyBooleanFieldModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [],
@@ -3639,7 +3630,7 @@ function toggleField(config) {
         wrappers: ['autotouch', 'form-field'],
         defaultValue: defaultValue ?? false,
         ...propsAndConfigForFieldConfig(config, {
-            appearance: 'standard',
+            // appearance: 'standard', // TODO: Standard no longer allowed.
             ...materialFormField
         })
     });
@@ -3651,7 +3642,7 @@ function checkboxField(config) {
         type: 'checkbox',
         defaultValue: defaultValue ?? false,
         ...propsAndConfigForFieldConfig(config, {
-            appearance: 'standard',
+            // appearance: 'standard', // TODO: Standard no longer allowed.
             ...materialFormField
         })
     });
@@ -3704,21 +3695,21 @@ function dateTimePreset(config) {
 
 const DBX_DATE_TIME_FIELD_MENU_PRESETS_TOKEN = new InjectionToken('DbxDateTimeFieldMenuPresetsServicePresets');
 class DbxDateTimeFieldMenuPresetsService {
-    constructor(initialConfigs) {
-        this.initialConfigs = initialConfigs;
-        this._configurations = new BehaviorSubject(this.initialConfigs ?? []);
-        this.configurations$ = this._configurations.asObservable();
-    }
     get configurations() {
         return this._configurations.value;
     }
     set configurations(configurations) {
         this._configurations.next(configurations);
     }
+    constructor(initialConfigs) {
+        this.initialConfigs = initialConfigs;
+        this._configurations = new BehaviorSubject(this.initialConfigs ?? []);
+        this.configurations$ = this._configurations.asObservable();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxDateTimeFieldMenuPresetsService, deps: [{ token: DBX_DATE_TIME_FIELD_MENU_PRESETS_TOKEN, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxDateTimeFieldMenuPresetsService, providedIn: 'root' }); }
 }
-DbxDateTimeFieldMenuPresetsService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxDateTimeFieldMenuPresetsService, deps: [{ token: DBX_DATE_TIME_FIELD_MENU_PRESETS_TOKEN, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
-DbxDateTimeFieldMenuPresetsService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxDateTimeFieldMenuPresetsService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxDateTimeFieldMenuPresetsService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxDateTimeFieldMenuPresetsService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -3836,6 +3827,63 @@ function syncConfigValueObs(parseConfigsObs, type) {
 }
 const TIME_OUTPUT_THROTTLE_TIME$1 = 10;
 class DbxDateTimeFieldComponent extends FieldType$1 {
+    get dateLabel() {
+        return this.props.dateLabel ?? 'Date';
+    }
+    get timeLabel() {
+        return this.props.timeLabel ?? 'Time';
+    }
+    get allDayLabel() {
+        return this.props.allDayLabel ?? 'All Day';
+    }
+    get atTimeLabel() {
+        return this.props.atTimeLabel ?? 'At';
+    }
+    get dateOnly() {
+        return this.timeMode === DbxDateTimeFieldTimeMode.NONE;
+    }
+    get dateTimeField() {
+        return this.field.props;
+    }
+    get timeOnly() {
+        return this.dateTimeField.timeOnly;
+    }
+    get showDateInput() {
+        return !this.timeOnly;
+    }
+    get valueMode() {
+        return this.field.props.valueMode ?? DbxDateTimeValueMode.DATE;
+    }
+    get timeMode() {
+        const dateValuesOnly = this.valueMode === DbxDateTimeValueMode.DAY_STRING;
+        if (dateValuesOnly) {
+            return DbxDateTimeFieldTimeMode.NONE;
+        }
+        else {
+            return this.timeOnly ? DbxDateTimeFieldTimeMode.REQUIRED : this.dateTimeField.timeMode ?? DbxDateTimeFieldTimeMode.REQUIRED;
+        }
+    }
+    get description() {
+        return this.field.props.description;
+    }
+    get hideDateHint() {
+        return this.field.props.hideDateHint ?? false;
+    }
+    get hideDatePicker() {
+        return this.field.props.hideDatePicker ?? false;
+    }
+    get timezone() {
+        return this.field.props.timezone;
+    }
+    get timeDate() {
+        return this.field.props.timeDate;
+    }
+    get showTimezone() {
+        return this.field.props.showTimezone ?? true;
+    }
+    get presets() {
+        return this.field.props.presets;
+    }
     constructor(cdRef, dbxDateTimeFieldConfigService) {
         super();
         this.cdRef = cdRef;
@@ -3993,66 +4041,9 @@ class DbxDateTimeFieldComponent extends FieldType$1 {
         }), distinctUntilChanged(isSameDateHoursAndMinutes), shareReplay(1));
         this.presets$ = this._presets.pipe(switchMapMaybeObs(), map((x) => x.map(dateTimePreset)), shareReplay(1));
     }
-    get dateLabel() {
-        return this.props.dateLabel ?? 'Date';
-    }
-    get timeLabel() {
-        return this.props.timeLabel ?? 'Time';
-    }
-    get allDayLabel() {
-        return this.props.allDayLabel ?? 'All Day';
-    }
-    get atTimeLabel() {
-        return this.props.atTimeLabel ?? 'At';
-    }
-    get dateOnly() {
-        return this.timeMode === DbxDateTimeFieldTimeMode.NONE;
-    }
-    get dateTimeField() {
-        return this.field.props;
-    }
-    get timeOnly() {
-        return this.dateTimeField.timeOnly;
-    }
-    get showDateInput() {
-        return !this.timeOnly;
-    }
-    get valueMode() {
-        return this.field.props.valueMode ?? DbxDateTimeValueMode.DATE;
-    }
-    get timeMode() {
-        const dateValuesOnly = this.valueMode === DbxDateTimeValueMode.DAY_STRING;
-        if (dateValuesOnly) {
-            return DbxDateTimeFieldTimeMode.NONE;
-        }
-        else {
-            return this.timeOnly ? DbxDateTimeFieldTimeMode.REQUIRED : this.dateTimeField.timeMode ?? DbxDateTimeFieldTimeMode.REQUIRED;
-        }
-    }
-    get description() {
-        return this.field.props.description;
-    }
-    get hideDateHint() {
-        return this.field.props.hideDateHint ?? false;
-    }
-    get hideDatePicker() {
-        return this.field.props.hideDatePicker ?? false;
-    }
-    get timezone() {
-        return this.field.props.timezone;
-    }
-    get timeDate() {
-        return this.field.props.timeDate;
-    }
-    get showTimezone() {
-        return this.field.props.showTimezone ?? true;
-    }
-    get presets() {
-        return this.field.props.presets;
-    }
     ngOnInit() {
         this._formControlObs.next(this.formControl);
-        const inputPickerConfig = this.dateTimeField.getConfigObs || this.dateTimeField.pickerConfig;
+        const inputPickerConfig = this.dateTimeField.pickerConfig;
         this._config.next(inputPickerConfig ? asObservableFromGetter(inputPickerConfig) : undefined);
         this._syncConfigObs.next(this.dateTimeField.getSyncFieldsObs?.());
         this._sub.subscription = this.valueInSystemTimezone$
@@ -4255,12 +4246,12 @@ class DbxDateTimeFieldComponent extends FieldType$1 {
             x.setValue(fullDay);
         });
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxDateTimeFieldComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: DbxDateTimeFieldMenuPresetsService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.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=\"mat-datepicker-button-highlight 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' }} {{ timezoneAbbreviation$ | async }} ({{ displayValue$ | async | dateDistance }})\n      </small>\n      <small *ngSwitchCase=\"false\">\n        <ng-container *ngIf=\"displayValue$ | async\">\n          <b class=\"dbx-ok\">{{ atTimeLabel }}</b>\n          {{ displayValue$ | async | date: 'medium' }} {{ timezoneAbbreviation$ | async }} ({{ displayValue$ | async | timeDistance }})\n        </ng-container>\n      </small>\n    </div>\n  </div>\n</div>\n\n<!-- Date Input Template -->\n<ng-template #dateInputTemplate>\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    <button matPrefix class=\"mat-datepicker-button-highlight dbx-button-spacer\" *ngIf=\"!hideDatePicker\" mat-icon-button (click)=\"picker.open()\" [disabled]=\"disabled\">\n      <mat-icon>calendar_today</mat-icon>\n    </button>\n    <span matTextSuffix *ngIf=\"!(showTimeInput$ | async)\">\n      <ng-container *ngTemplateOutlet=\"timezoneSuffixTemplate\"></ng-container>\n    </span>\n  </mat-form-field>\n</ng-template>\n\n<!-- Time Menu/Input Template -->\n<ng-template #timeMenuAndInputTemplate>\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    <ng-container *ngFor=\"let preset of presets$ | async\">\n      <button mat-menu-item (click)=\"selectPreset(preset)\">{{ preset.label | getValue }}</button>\n    </ng-container>\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    <button matPrefix class=\"mat-datepicker-button-highlight 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    <span matTextSuffix>\n      <ng-container *ngTemplateOutlet=\"timezoneSuffixTemplate\"></ng-container>\n    </span>\n  </mat-form-field>\n</ng-template>\n\n<!-- Timezone Suffix -->\n<ng-template #timezoneSuffixTemplate>\n  <span *ngIf=\"showTimezone\" class=\"dbx-datetime-timezone dbx-faint\">{{ timezoneAbbreviation$ | async }}</span>\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: "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: "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.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5$1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i5$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i5.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: i2$1.DbxButtonSpacerDirective, selector: "dbx-button-spacer,[dbxButtonSpacer]" }, { kind: "component", type: i8.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i8.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i5$2.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i5$2.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i10.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i10.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i10.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: i7.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.DateDistancePipe, name: "dateDistance" }, { kind: "pipe", type: i2.TimeDistancePipe, name: "timeDistance" }, { kind: "pipe", type: i2.GetValuePipe, name: "getValue" }] }); }
 }
-DbxDateTimeFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxDateTimeFieldComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: DbxDateTimeFieldMenuPresetsService }], 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    <!-- 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=\"mat-datepicker-button-highlight 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' }} {{ timezoneAbbreviation$ | async }} ({{ displayValue$ | async | dateDistance }})\n      </small>\n      <small *ngSwitchCase=\"false\">\n        <ng-container *ngIf=\"displayValue$ | async\">\n          <b class=\"dbx-ok\">{{ atTimeLabel }}</b>\n          {{ displayValue$ | async | date: 'medium' }} {{ timezoneAbbreviation$ | async }} ({{ 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=\"mat-datepicker-button-highlight 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    <span matSuffix *ngIf=\"!(showTimeInput$ | async)\">\n      <ng-container *ngTemplateOutlet=\"timezoneSuffixTemplate\"></ng-container>\n    </span>\n  </mat-form-field>\n</ng-template>\n\n<!-- Time Menu/Input Template -->\n<ng-template #timeMenuAndInputTemplate>\n  <button class=\"mat-datepicker-button-highlight 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    <ng-container *ngFor=\"let preset of presets$ | async\">\n      <button mat-menu-item (click)=\"selectPreset(preset)\">{{ preset.label | getValue }}</button>\n    </ng-container>\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    <span matSuffix>\n      <ng-container *ngTemplateOutlet=\"timezoneSuffixTemplate\"></ng-container>\n    </span>\n  </mat-form-field>\n</ng-template>\n\n<!-- Timezone Suffix -->\n<ng-template #timezoneSuffixTemplate>\n  <span *ngIf=\"showTimezone\" class=\"dbx-datetime-timezone dbx-faint\">{{ timezoneAbbreviation$ | async }}</span>\n</ng-template>\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: "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: i4$7.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4$7.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4$7.MatSuffix, selector: "[matSuffix]" }, { 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.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: i5$1.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i5$1.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i10.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i10.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i10.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: i7.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.DateDistancePipe, name: "dateDistance" }, { kind: "pipe", type: i2.TimeDistancePipe, name: "timeDistance" }, { kind: "pipe", type: i2.GetValuePipe, name: "getValue" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxDateTimeFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.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    <!-- 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=\"mat-datepicker-button-highlight 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' }} {{ timezoneAbbreviation$ | async }} ({{ displayValue$ | async | dateDistance }})\n      </small>\n      <small *ngSwitchCase=\"false\">\n        <ng-container *ngIf=\"displayValue$ | async\">\n          <b class=\"dbx-ok\">{{ atTimeLabel }}</b>\n          {{ displayValue$ | async | date: 'medium' }} {{ timezoneAbbreviation$ | async }} ({{ 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=\"mat-datepicker-button-highlight 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    <span matSuffix *ngIf=\"!(showTimeInput$ | async)\">\n      <ng-container *ngTemplateOutlet=\"timezoneSuffixTemplate\"></ng-container>\n    </span>\n  </mat-form-field>\n</ng-template>\n\n<!-- Time Menu/Input Template -->\n<ng-template #timeMenuAndInputTemplate>\n  <button class=\"mat-datepicker-button-highlight 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    <ng-container *ngFor=\"let preset of presets$ | async\">\n      <button mat-menu-item (click)=\"selectPreset(preset)\">{{ preset.label | getValue }}</button>\n    </ng-container>\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    <span matSuffix>\n      <ng-container *ngTemplateOutlet=\"timezoneSuffixTemplate\"></ng-container>\n    </span>\n  </mat-form-field>\n</ng-template>\n\n<!-- Timezone Suffix -->\n<ng-template #timezoneSuffixTemplate>\n  <span *ngIf=\"showTimezone\" class=\"dbx-datetime-timezone dbx-faint\">{{ timezoneAbbreviation$ | async }}</span>\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=\"mat-datepicker-button-highlight 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' }} {{ timezoneAbbreviation$ | async }} ({{ displayValue$ | async | dateDistance }})\n      </small>\n      <small *ngSwitchCase=\"false\">\n        <ng-container *ngIf=\"displayValue$ | async\">\n          <b class=\"dbx-ok\">{{ atTimeLabel }}</b>\n          {{ displayValue$ | async | date: 'medium' }} {{ timezoneAbbreviation$ | async }} ({{ displayValue$ | async | timeDistance }})\n        </ng-container>\n      </small>\n    </div>\n  </div>\n</div>\n\n<!-- Date Input Template -->\n<ng-template #dateInputTemplate>\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    <button matPrefix class=\"mat-datepicker-button-highlight dbx-button-spacer\" *ngIf=\"!hideDatePicker\" mat-icon-button (click)=\"picker.open()\" [disabled]=\"disabled\">\n      <mat-icon>calendar_today</mat-icon>\n    </button>\n    <span matTextSuffix *ngIf=\"!(showTimeInput$ | async)\">\n      <ng-container *ngTemplateOutlet=\"timezoneSuffixTemplate\"></ng-container>\n    </span>\n  </mat-form-field>\n</ng-template>\n\n<!-- Time Menu/Input Template -->\n<ng-template #timeMenuAndInputTemplate>\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    <ng-container *ngFor=\"let preset of presets$ | async\">\n      <button mat-menu-item (click)=\"selectPreset(preset)\">{{ preset.label | getValue }}</button>\n    </ng-container>\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    <button matPrefix class=\"mat-datepicker-button-highlight 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    <span matTextSuffix>\n      <ng-container *ngTemplateOutlet=\"timezoneSuffixTemplate\"></ng-container>\n    </span>\n  </mat-form-field>\n</ng-template>\n\n<!-- Timezone Suffix -->\n<ng-template #timezoneSuffixTemplate>\n  <span *ngIf=\"showTimezone\" class=\"dbx-datetime-timezone dbx-faint\">{{ timezoneAbbreviation$ | async }}</span>\n</ng-template>\n" }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: DbxDateTimeFieldMenuPresetsService }]; } });
 
 function dbxFixedDateRangeInputValueFactory(mode, timezoneInstance) {
@@ -4291,86 +4282,6 @@ function dbxFixedDateRangeOutputValueFactory(mode, timezoneInstance) {
 }
 const TIME_OUTPUT_THROTTLE_TIME = 10;
 class DbxFixedDateRangeFieldComponent extends FieldType$1 {
-    constructor(dbxDateTimeFieldConfigService) {
-        super();
-        this.dbxDateTimeFieldConfigService = dbxDateTimeFieldConfigService;
-        this._sub = new SubscriptionObject();
-        this._inputRangeFormSub = new SubscriptionObject();
-        this._inputRangeFormValueSub = new SubscriptionObject();
-        this._dateRangeInputSub = new SubscriptionObject();
-        this._currentSelectionModeSub = new SubscriptionObject();
-        this._latestBoundarySub = new SubscriptionObject();
-        this._disableEndSub = new SubscriptionObject();
-        this._activeDateSub = new SubscriptionObject();
-        this._currentDateRangeInput = {};
-        this._currentSelectionMode = 'single';
-        this._latestBoundary = null;
-        this._config = new BehaviorSubject(undefined);
-        this._selectionMode = new BehaviorSubject(undefined);
-        this._dateRangeInput = new BehaviorSubject(undefined);
-        this._timezone = new BehaviorSubject(undefined);
-        this._presets = new BehaviorSubject(of([]));
-        this._selectionEvent = new Subject();
-        this.selectedDateRange$ = this._selectionEvent.pipe(map((x) => x.range));
-        this._formControlObs = new BehaviorSubject(undefined);
-        this.formControl$ = this._formControlObs.pipe(filterMaybe());
-        this.config$ = this._config.pipe(filterMaybe(), switchMap((x) => x), distinctUntilChanged(), shareReplay(1));
-        this.limitDateTimeInstance$ = this.config$.pipe(map(limitDateTimeInstance), shareReplay(1));
-        this.selectionMode$ = this._selectionMode.pipe(switchMapMaybeDefault('single'), map((x) => x ?? 'single'), distinctUntilChanged(), shareReplay(1));
-        this.dateRangeInput$ = this._dateRangeInput.pipe(switchMapMaybeDefault(), shareReplay(1));
-        this.timezone$ = this._timezone.pipe(switchMapMaybeDefault(), distinctUntilChanged()).pipe(map((defaultTimezone) => {
-            return defaultTimezone ?? guessCurrentTimezone();
-        }), distinctUntilChanged(), shareReplay(1));
-        this.timezoneInstance$ = this.timezone$.pipe(map((timezone) => (timezone ? dateTimezoneUtcNormal({ timezone }) : undefined)), shareReplay(1));
-        this.valueInSystemTimezone$ = this.formControl$.pipe(map((control) => control.valueChanges.pipe(startWith(control.value), shareReplay(1))), combineLatestWith(this.timezoneInstance$), switchMap(([x, timezoneInstance]) => {
-            return x.pipe(map(dbxFixedDateRangeInputValueFactory(this.valueMode, timezoneInstance)));
-        }), throttleTime(20, undefined, { leading: false, trailing: true }), // throttle incoming values and timezone changes
-        distinctUntilChanged(isSameDateDayRange), shareReplay(1));
-        this.fullBoundary$ = this.dateRangeSelectionForMode('single').pipe(shareReplay(1));
-        this.latestBoundary$ = this.selectionMode$.pipe(switchMap((mode) => {
-            if (mode === 'arbitrary_quick') {
-                // in arbitrary_quick mode, the latest value is the boundary, since we always set the value immediately.
-                return this.valueInSystemTimezone$;
-            }
-            else {
-                return this.fullBoundary$;
-            }
-        }));
-        /**
-         * Focuses on the date any time the selection event from the picker occured, otherwise use the system value
-         */
-        this.calendarFocusDate$ = this._selectionEvent.pipe(startWith(null)).pipe(switchMap((selectionEvent) => {
-            if (selectionEvent && selectionEvent.type === 'calendar' && selectionEvent.range?.start) {
-                return of(selectionEvent.range.start);
-            }
-            else {
-                return this.fullBoundary$.pipe(first(), map((fullBoundary) => {
-                    return fullBoundary?.start ?? selectionEvent?.range?.start;
-                }));
-            }
-        }), filterMaybe(), shareReplay(1));
-        this.dateRangeSelection$ = this.selectionMode$.pipe(switchMap((mode) => this.dateRangeSelectionForMode(mode)));
-        this.calendarSelection$ = this.valueInSystemTimezone$.pipe(map((x) => (x ? new DateRange(x.start, x.end) : null)), shareReplay(1));
-        this.endDisabled$ = this.selectionMode$.pipe(map((x) => x === 'single'), distinctUntilChanged(), shareReplay(1));
-        this.inputRangeForm = new FormGroup({
-            start: new FormControl(null),
-            end: new FormControl(null)
-        });
-        this.minMaxRange$ = this.limitDateTimeInstance$.pipe(combineLatestWith(timer(MS_IN_MINUTE)), // refresh every minute
-        map(([x]) => x.dateRange()), distinctUntilChanged(isSameDateDayRange), shareReplay(1));
-        this.min$ = this.minMaxRange$.pipe(map((x) => x?.start ?? null), distinctUntilChanged(), shareReplay(1));
-        this.max$ = this.minMaxRange$.pipe(map((x) => x?.end ?? null), distinctUntilChanged(), shareReplay(1));
-        this.pickerFilter$ = this.config$.pipe(distinctUntilChanged(), map((x) => {
-            if (x) {
-                const filter = dateTimeMinuteDecisionFunction(x);
-                return (x) => (x != null ? filter(x) : true);
-            }
-            else {
-                return () => true;
-            }
-        }), shareReplay(1));
-        this.defaultPickerFilter = () => true;
-    }
     get currentDateRangeInput() {
         return this._currentDateRangeInput;
     }
@@ -4524,6 +4435,86 @@ class DbxFixedDateRangeFieldComponent extends FieldType$1 {
     get showRangeInput() {
         return this.field.props.showRangeInput ?? true;
     }
+    constructor(dbxDateTimeFieldConfigService) {
+        super();
+        this.dbxDateTimeFieldConfigService = dbxDateTimeFieldConfigService;
+        this._sub = new SubscriptionObject();
+        this._inputRangeFormSub = new SubscriptionObject();
+        this._inputRangeFormValueSub = new SubscriptionObject();
+        this._dateRangeInputSub = new SubscriptionObject();
+        this._currentSelectionModeSub = new SubscriptionObject();
+        this._latestBoundarySub = new SubscriptionObject();
+        this._disableEndSub = new SubscriptionObject();
+        this._activeDateSub = new SubscriptionObject();
+        this._currentDateRangeInput = {};
+        this._currentSelectionMode = 'single';
+        this._latestBoundary = null;
+        this._config = new BehaviorSubject(undefined);
+        this._selectionMode = new BehaviorSubject(undefined);
+        this._dateRangeInput = new BehaviorSubject(undefined);
+        this._timezone = new BehaviorSubject(undefined);
+        this._presets = new BehaviorSubject(of([]));
+        this._selectionEvent = new Subject();
+        this.selectedDateRange$ = this._selectionEvent.pipe(map((x) => x.range));
+        this._formControlObs = new BehaviorSubject(undefined);
+        this.formControl$ = this._formControlObs.pipe(filterMaybe());
+        this.config$ = this._config.pipe(filterMaybe(), switchMap((x) => x), distinctUntilChanged(), shareReplay(1));
+        this.limitDateTimeInstance$ = this.config$.pipe(map(limitDateTimeInstance), shareReplay(1));
+        this.selectionMode$ = this._selectionMode.pipe(switchMapMaybeDefault('single'), map((x) => x ?? 'single'), distinctUntilChanged(), shareReplay(1));
+        this.dateRangeInput$ = this._dateRangeInput.pipe(switchMapMaybeDefault(), shareReplay(1));
+        this.timezone$ = this._timezone.pipe(switchMapMaybeDefault(), distinctUntilChanged()).pipe(map((defaultTimezone) => {
+            return defaultTimezone ?? guessCurrentTimezone();
+        }), distinctUntilChanged(), shareReplay(1));
+        this.timezoneInstance$ = this.timezone$.pipe(map((timezone) => (timezone ? dateTimezoneUtcNormal({ timezone }) : undefined)), shareReplay(1));
+        this.valueInSystemTimezone$ = this.formControl$.pipe(map((control) => control.valueChanges.pipe(startWith(control.value), shareReplay(1))), combineLatestWith(this.timezoneInstance$), switchMap(([x, timezoneInstance]) => {
+            return x.pipe(map(dbxFixedDateRangeInputValueFactory(this.valueMode, timezoneInstance)));
+        }), throttleTime(20, undefined, { leading: false, trailing: true }), // throttle incoming values and timezone changes
+        distinctUntilChanged(isSameDateDayRange), shareReplay(1));
+        this.fullBoundary$ = this.dateRangeSelectionForMode('single').pipe(shareReplay(1));
+        this.latestBoundary$ = this.selectionMode$.pipe(switchMap((mode) => {
+            if (mode === 'arbitrary_quick') {
+                // in arbitrary_quick mode, the latest value is the boundary, since we always set the value immediately.
+                return this.valueInSystemTimezone$;
+            }
+            else {
+                return this.fullBoundary$;
+            }
+        }));
+        /**
+         * Focuses on the date any time the selection event from the picker occured, otherwise use the system value
+         */
+        this.calendarFocusDate$ = this._selectionEvent.pipe(startWith(null)).pipe(switchMap((selectionEvent) => {
+            if (selectionEvent && selectionEvent.type === 'calendar' && selectionEvent.range?.start) {
+                return of(selectionEvent.range.start);
+            }
+            else {
+                return this.fullBoundary$.pipe(first(), map((fullBoundary) => {
+                    return fullBoundary?.start ?? selectionEvent?.range?.start;
+                }));
+            }
+        }), filterMaybe(), shareReplay(1));
+        this.dateRangeSelection$ = this.selectionMode$.pipe(switchMap((mode) => this.dateRangeSelectionForMode(mode)));
+        this.calendarSelection$ = this.valueInSystemTimezone$.pipe(map((x) => (x ? new DateRange(x.start, x.end) : null)), shareReplay(1));
+        this.endDisabled$ = this.selectionMode$.pipe(map((x) => x === 'single'), distinctUntilChanged(), shareReplay(1));
+        this.inputRangeForm = new FormGroup({
+            start: new FormControl(null),
+            end: new FormControl(null)
+        });
+        this.minMaxRange$ = this.limitDateTimeInstance$.pipe(combineLatestWith(timer(MS_IN_MINUTE)), // refresh every minute
+        map(([x]) => x.dateRange()), distinctUntilChanged(isSameDateDayRange), shareReplay(1));
+        this.min$ = this.minMaxRange$.pipe(map((x) => x?.start ?? null), distinctUntilChanged(), shareReplay(1));
+        this.max$ = this.minMaxRange$.pipe(map((x) => x?.end ?? null), distinctUntilChanged(), shareReplay(1));
+        this.pickerFilter$ = this.config$.pipe(distinctUntilChanged(), map((x) => {
+            if (x) {
+                const filter = dateTimeMinuteDecisionFunction(x);
+                return (x) => (x != null ? filter(x) : true);
+            }
+            else {
+                return () => true;
+            }
+        }), shareReplay(1));
+        this.defaultPickerFilter = () => true;
+    }
     ngOnInit() {
         this._formControlObs.next(this.formControl);
         const dateRangeSelection = this.dateRangeSelection$.pipe(shareReplay(1));
@@ -4667,15 +4658,15 @@ class DbxFixedDateRangeFieldComponent extends FieldType$1 {
     _createDateRange(date) {
         return date ? dateRange({ ...this._currentDateRangeInput, date }) : undefined;
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFixedDateRangeFieldComponent, deps: [{ token: DbxDateTimeFieldMenuPresetsService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DbxFixedDateRangeFieldComponent, selector: "ng-component", providers: [
+            {
+                provide: MAT_DATE_RANGE_SELECTION_STRATEGY,
+                useClass: forwardRef(() => DbxFixedDateRangeFieldSelectionStrategy)
+            }
+        ], viewQueries: [{ propertyName: "calendar", first: true, predicate: MatCalendar, descendants: true }, { propertyName: "startDateInputElement", first: true, predicate: ["startDateInput"], descendants: true, read: ElementRef }, { propertyName: "endDateInputElement", first: true, predicate: ["endDateInput"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: "<div class=\"dbx-fixeddaterange-field\">\n  <mat-calendar #calendarView [selected]=\"calendarSelection$ | async\" [dateFilter]=\"(pickerFilter$ | async) || defaultPickerFilter\" [minDate]=\"min$ | async\" [maxDate]=\"max$ | async\" (selectedChange)=\"selectedChange($event)\"></mat-calendar>\n  <mat-form-field class=\"dbx-fixeddaterange-field-input\" appearance=\"fill\">\n    <mat-date-range-input *ngIf=\"showRangeInput\" [formGroup]=\"inputRangeForm\">\n      <input #startDateInput matStartDate formControlName=\"start\" placeholder=\"Start date\" />\n      <input #endDateInput [ngClass]=\"(endDisabled$ | async) ? 'dbx-fixeddaterange-field-input-end' : ''\" [attr.tabindex]=\"(endDisabled$ | async) ? -1 : 0\" matEndDate formControlName=\"end\" placeholder=\"End date\" />\n    </mat-date-range-input>\n  </mat-form-field>\n  <mat-error *ngIf=\"formControl.hasError('required')\">Date range is required</mat-error>\n</div>\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: 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.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "component", type: i5$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: i5$2.MatCalendar, selector: "mat-calendar", inputs: ["headerComponent", "startAt", "startView", "selected", "minDate", "maxDate", "dateFilter", "dateClass", "comparisonStart", "comparisonEnd", "startDateAccessibleName", "endDateAccessibleName"], outputs: ["selectedChange", "yearSelected", "monthSelected", "viewChanged", "_userSelection", "_userDragDrop"], exportAs: ["matCalendar"] }, { kind: "component", type: i5$2.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { kind: "directive", type: i5$2.MatStartDate, selector: "input[matStartDate]", inputs: ["errorStateMatcher"], outputs: ["dateChange", "dateInput"] }, { kind: "directive", type: i5$2.MatEndDate, selector: "input[matEndDate]", inputs: ["errorStateMatcher"], outputs: ["dateChange", "dateInput"] }, { 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: "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" }] }); }
 }
-DbxFixedDateRangeFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxFixedDateRangeFieldComponent, deps: [{ token: DbxDateTimeFieldMenuPresetsService }], target: i0.ɵɵFactoryTarget.Component });
-DbxFixedDateRangeFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: DbxFixedDateRangeFieldComponent, selector: "ng-component", providers: [
-        {
-            provide: MAT_DATE_RANGE_SELECTION_STRATEGY,
-            useClass: forwardRef(() => DbxFixedDateRangeFieldSelectionStrategy)
-        }
-    ], viewQueries: [{ propertyName: "calendar", first: true, predicate: MatCalendar, descendants: true }, { propertyName: "startDateInputElement", first: true, predicate: ["startDateInput"], descendants: true, read: ElementRef }, { propertyName: "endDateInputElement", first: true, predicate: ["endDateInput"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: "<div class=\"dbx-fixeddaterange-field\">\n  <mat-calendar #calendarView [selected]=\"calendarSelection$ | async\" [dateFilter]=\"(pickerFilter$ | async) || defaultPickerFilter\" [minDate]=\"min$ | async\" [maxDate]=\"max$ | async\" (selectedChange)=\"selectedChange($event)\"></mat-calendar>\n  <mat-form-field class=\"dbx-fixeddaterange-field-input\" appearance=\"fill\">\n    <mat-date-range-input *ngIf=\"showRangeInput\" [formGroup]=\"inputRangeForm\">\n      <input #startDateInput matStartDate formControlName=\"start\" placeholder=\"Start date\" />\n      <input #endDateInput [ngClass]=\"(endDisabled$ | async) ? 'dbx-fixeddaterange-field-input-end' : ''\" [attr.tabindex]=\"(endDisabled$ | async) ? -1 : 0\" matEndDate formControlName=\"end\" placeholder=\"End date\" />\n    </mat-date-range-input>\n  </mat-form-field>\n  <mat-error *ngIf=\"formControl.hasError('required')\">Date range is required</mat-error>\n</div>\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: 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.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4$7.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i4$7.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "component", type: i5$1.MatCalendar, selector: "mat-calendar", inputs: ["headerComponent", "startAt", "startView", "selected", "minDate", "maxDate", "dateFilter", "dateClass", "comparisonStart", "comparisonEnd"], outputs: ["selectedChange", "yearSelected", "monthSelected", "viewChanged", "_userSelection"], exportAs: ["matCalendar"] }, { kind: "component", type: i5$1.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { kind: "directive", type: i5$1.MatStartDate, selector: "input[matStartDate]", inputs: ["errorStateMatcher"], outputs: ["dateChange", "dateInput"] }, { kind: "directive", type: i5$1.MatEndDate, selector: "input[matEndDate]", inputs: ["errorStateMatcher"], outputs: ["dateChange", "dateInput"] }, { 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: "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" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxFixedDateRangeFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFixedDateRangeFieldComponent, decorators: [{
             type: Component,
             args: [{ providers: [
                         {
@@ -4742,56 +4733,56 @@ class DbxFixedDateRangeFieldSelectionStrategy {
         const year = date.getFullYear();
         return this._dateAdapter.createDate(year, monthIndex, day);
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFixedDateRangeFieldSelectionStrategy, deps: [{ token: i4$1.DateAdapter }, { token: DbxFixedDateRangeFieldComponent }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFixedDateRangeFieldSelectionStrategy }); }
 }
-DbxFixedDateRangeFieldSelectionStrategy.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxFixedDateRangeFieldSelectionStrategy, deps: [{ token: i4$1.DateAdapter }, { token: DbxFixedDateRangeFieldComponent }], target: i0.ɵɵFactoryTarget.Injectable });
-DbxFixedDateRangeFieldSelectionStrategy.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxFixedDateRangeFieldSelectionStrategy });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxFixedDateRangeFieldSelectionStrategy, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFixedDateRangeFieldSelectionStrategy, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return [{ type: i4$1.DateAdapter }, { type: DbxFixedDateRangeFieldComponent }]; } });
 
 class DbxFormFormlyDateFieldModule {
-}
-DbxFormFormlyDateFieldModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxFormFormlyDateFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-DbxFormFormlyDateFieldModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: DbxFormFormlyDateFieldModule, declarations: [DbxDateTimeFieldComponent, DbxFixedDateRangeFieldComponent], imports: [CommonModule,
-        FormsModule,
-        MatInputModule,
-        MatDividerModule,
-        MatFormFieldModule,
-        DbxButtonModule,
-        MatButtonModule,
-        MatDatepickerModule,
-        MatNativeDateModule,
-        MatMenuModule,
-        ReactiveFormsModule,
-        DbxDatePipeModule,
-        DbxValuePipeModule,
-        MatChipsModule,
-        MatIconModule,
-        FlexLayoutModule, i1$2.FormlyModule], exports: [DbxFormFormlyWrapperModule] });
-DbxFormFormlyDateFieldModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxFormFormlyDateFieldModule, imports: [CommonModule,
-        FormsModule,
-        MatInputModule,
-        MatDividerModule,
-        MatFormFieldModule,
-        DbxButtonModule,
-        MatButtonModule,
-        MatDatepickerModule,
-        MatNativeDateModule,
-        MatMenuModule,
-        ReactiveFormsModule,
-        DbxDatePipeModule,
-        DbxValuePipeModule,
-        MatChipsModule,
-        MatIconModule,
-        FlexLayoutModule,
-        FormlyModule.forChild({
-            types: [
-                //
-                { name: 'datetime', component: DbxDateTimeFieldComponent, wrappers: ['style', 'form-field'] },
-                { name: 'fixeddaterange', component: DbxFixedDateRangeFieldComponent, wrappers: ['style', 'form-field'] }
-            ]
-        }), DbxFormFormlyWrapperModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxFormFormlyDateFieldModule, decorators: [{
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormFormlyDateFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: DbxFormFormlyDateFieldModule, declarations: [DbxDateTimeFieldComponent, DbxFixedDateRangeFieldComponent], imports: [CommonModule,
+            FormsModule,
+            MatInputModule,
+            MatDividerModule,
+            MatFormFieldModule,
+            DbxButtonModule,
+            MatButtonModule,
+            MatDatepickerModule,
+            MatNativeDateModule,
+            MatMenuModule,
+            ReactiveFormsModule,
+            DbxDatePipeModule,
+            DbxValuePipeModule,
+            MatChipsModule,
+            MatIconModule,
+            FlexLayoutModule, i1$1.FormlyModule], exports: [DbxFormFormlyWrapperModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormFormlyDateFieldModule, imports: [CommonModule,
+            FormsModule,
+            MatInputModule,
+            MatDividerModule,
+            MatFormFieldModule,
+            DbxButtonModule,
+            MatButtonModule,
+            MatDatepickerModule,
+            MatNativeDateModule,
+            MatMenuModule,
+            ReactiveFormsModule,
+            DbxDatePipeModule,
+            DbxValuePipeModule,
+            MatChipsModule,
+            MatIconModule,
+            FlexLayoutModule,
+            FormlyModule.forChild({
+                types: [
+                    //
+                    { name: 'datetime', component: DbxDateTimeFieldComponent, wrappers: ['style', 'form-field'] },
+                    { name: 'fixeddaterange', component: DbxFixedDateRangeFieldComponent, wrappers: ['style', 'form-field'] }
+                ]
+            }), DbxFormFormlyWrapperModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormFormlyDateFieldModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -4839,13 +4830,14 @@ function timeOnlyField(config = {}) {
     });
 }
 function dateTimeField(config = {}) {
-    const { key = 'date', dateLabel, timeLabel, allDayLabel, atTimeLabel, timeDate, timezone, showTimezone, timeMode = DbxDateTimeFieldTimeMode.REQUIRED, valueMode, fullDayInUTC, fullDayFieldName, pickerConfig, getConfigObs, getSyncFieldsObs, hideDatePicker, hideDateHint, timeOnly = false, presets, materialFormField } = config;
+    const { key = 'date', dateLabel, timeLabel, allDayLabel, atTimeLabel, timeDate, timezone, showTimezone, timeMode = DbxDateTimeFieldTimeMode.REQUIRED, valueMode, fullDayInUTC, fullDayFieldName, pickerConfig, getSyncFieldsObs, hideDatePicker, hideDateHint, timeOnly = false, presets, materialFormField } = config;
+    const classGetter = 'dbx-mat-form-field-disable-underline dbx-mat-form-date-time-field-wrapper';
     const fieldConfig = formlyField({
         key,
         type: 'datetime',
         ...propsAndConfigForFieldConfig(config, {
             ...materialFormField,
-            appearance: 'standard',
+            classGetter,
             dateLabel,
             timeLabel,
             allDayLabel,
@@ -4862,13 +4854,10 @@ function dateTimeField(config = {}) {
             hideDatePicker,
             hideDateHint,
             pickerConfig,
-            getConfigObs,
             getSyncFieldsObs
         })
     });
-    return styleWrapper(fieldConfig, {
-        classGetter: 'dbx-mat-form-field-disable-underline dbx-mat-form-date-time-field-wrapper'
-    });
+    return fieldConfig;
 }
 function dateRangeField(config = {}) {
     const { required: inputRequired, start, end, timeDate, timezone, showTimezone, presets } = config;
@@ -4942,11 +4931,13 @@ function dateTimeRangeField(inputConfig = {}) {
 }
 function fixedDateRangeField(config = {}) {
     const { key = 'dateRange', dateRangeInput, pickerConfig, timezone, selectionMode, showTimezone, valueMode, fullDayInUTC, presets, showRangeInput, materialFormField } = config;
+    const classGetter = 'dbx-mat-form-field-disable-underline dbx-form-fixed-date-range-field-wrapper';
     const fieldConfig = formlyField({
         key,
         type: 'fixeddaterange',
         ...propsAndConfigForFieldConfig(config, {
             ...materialFormField,
+            classGetter,
             dateRangeInput,
             pickerConfig,
             valueMode,
@@ -4958,9 +4949,7 @@ function fixedDateRangeField(config = {}) {
             showRangeInput
         })
     });
-    return styleWrapper(fieldConfig, {
-        classGetter: 'dbx-mat-form-field-disable-underline dbx-form-fixed-date-range-field-wrapper'
-    });
+    return fieldConfig;
 }
 
 const DEFAULT_DATE_TIME_FIELD_MENU_PRESETS_PRESETS = [
@@ -5252,11 +5241,11 @@ function dollarAmountField(config) {
 }
 
 class DbxFormFormlyNumberFieldModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormFormlyNumberFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: DbxFormFormlyNumberFieldModule, imports: [FormlyMaterialModule, FormlyMatSliderModule], exports: [DbxFormFormlyWrapperModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormFormlyNumberFieldModule, imports: [FormlyMaterialModule, FormlyMatSliderModule, DbxFormFormlyWrapperModule] }); }
 }
-DbxFormFormlyNumberFieldModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxFormFormlyNumberFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-DbxFormFormlyNumberFieldModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: DbxFormFormlyNumberFieldModule, imports: [FormlyMaterialModule, FormlyMatSliderModule], exports: [DbxFormFormlyWrapperModule] });
-DbxFormFormlyNumberFieldModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxFormFormlyNumberFieldModule, imports: [FormlyMaterialModule, FormlyMatSliderModule, DbxFormFormlyWrapperModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxFormFormlyNumberFieldModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormFormlyNumberFieldModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [FormlyMaterialModule, FormlyMatSliderModule],
@@ -5346,42 +5335,42 @@ class DbxPhoneFieldComponent extends FieldType$1 {
         this.inputSync.destroy();
         this.outputSync.destroy();
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxPhoneFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DbxPhoneFieldComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<div class=\"dbx-form-phone-field\" [formGroup]=\"inputFormGroup\">\n  <ngx-mat-intl-tel-input class=\"dbx-form-phone-field-phone-content\" [required]=\"required\" [preferredCountries]=\"preferredCountries\" [enablePlaceholder]=\"false\" name=\"phone\" [formControl]=\"phoneCtrl\"></ngx-mat-intl-tel-input>\n  <div *ngIf=\"allowExtension\" class=\"dbx-form-phone-field-extension-content\">\n    <span class=\"dbx-hint dbx-button-spacer\">Ext.</span>\n    <input class=\"dbx-form-phone-field-extension-input\" placeholder=\"123\" minlength=\"0\" maxlength=\"6\" #extensionInput [formControl]=\"extensionCtrl\" />\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3$1.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i3$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i3$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i3$4.NgxMatIntlTelInputComponent, selector: "ngx-mat-intl-tel-input", inputs: ["preferredCountries", "enablePlaceholder", "inputPlaceholder", "cssClass", "name", "onlyCountries", "errorStateMatcher", "enableSearch", "searchPlaceholder", "describedBy", "format", "placeholder", "required", "disabled"], outputs: ["countryChanged"] }] }); }
 }
-DbxPhoneFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxPhoneFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-DbxPhoneFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: DbxPhoneFieldComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<div class=\"dbx-form-phone-field\" [formGroup]=\"inputFormGroup\">\n  <ngx-mat-intl-tel-input class=\"dbx-form-phone-field-phone-content\" [required]=\"required\" [preferredCountries]=\"preferredCountries\" [enablePlaceholder]=\"false\" name=\"phone\" [formControl]=\"phoneCtrl\"></ngx-mat-intl-tel-input>\n  <div *ngIf=\"allowExtension\" class=\"dbx-form-phone-field-extension-content\">\n    <span class=\"dbx-hint dbx-button-spacer\">Ext.</span>\n    <input class=\"dbx-form-phone-field-extension-input\" placeholder=\"123\" minlength=\"0\" maxlength=\"6\" #extensionInput [formControl]=\"extensionCtrl\" />\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3$1.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i3$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i3$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i3$4.NgxMatIntlTelInputComponent, selector: "ngx-mat-intl-tel-input", inputs: ["preferredCountries", "enablePlaceholder", "inputPlaceholder", "cssClass", "name", "onlyCountries", "errorStateMatcher", "enableSearch", "searchPlaceholder", "describedBy", "format", "placeholder", "required", "disabled"], outputs: ["countryChanged"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxPhoneFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxPhoneFieldComponent, decorators: [{
             type: Component,
             args: [{ template: "<div class=\"dbx-form-phone-field\" [formGroup]=\"inputFormGroup\">\n  <ngx-mat-intl-tel-input class=\"dbx-form-phone-field-phone-content\" [required]=\"required\" [preferredCountries]=\"preferredCountries\" [enablePlaceholder]=\"false\" name=\"phone\" [formControl]=\"phoneCtrl\"></ngx-mat-intl-tel-input>\n  <div *ngIf=\"allowExtension\" class=\"dbx-form-phone-field-extension-content\">\n    <span class=\"dbx-hint dbx-button-spacer\">Ext.</span>\n    <input class=\"dbx-form-phone-field-extension-input\" placeholder=\"123\" minlength=\"0\" maxlength=\"6\" #extensionInput [formControl]=\"extensionCtrl\" />\n  </div>\n</div>\n" }]
         }] });
 
 class DbxFormFormlyPhoneFieldModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormFormlyPhoneFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: DbxFormFormlyPhoneFieldModule, declarations: [DbxPhoneFieldComponent], imports: [CommonModule,
+            MatInputModule,
+            MatFormFieldModule,
+            FormsModule,
+            ReactiveFormsModule,
+            MatAutocompleteModule,
+            MatChipsModule,
+            MatIconModule,
+            FlexLayoutModule,
+            FormlyMatFormFieldModule, i1$1.FormlyModule, NgxMatIntlTelInputComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormFormlyPhoneFieldModule, imports: [CommonModule,
+            MatInputModule,
+            MatFormFieldModule,
+            FormsModule,
+            ReactiveFormsModule,
+            MatAutocompleteModule,
+            MatChipsModule,
+            MatIconModule,
+            FlexLayoutModule,
+            FormlyMatFormFieldModule,
+            FormlyModule.forChild({
+                types: [{ name: 'intphone', component: DbxPhoneFieldComponent, wrappers: ['form-field'] }]
+            }),
+            NgxMatIntlTelInputComponent] }); }
 }
-DbxFormFormlyPhoneFieldModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxFormFormlyPhoneFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-DbxFormFormlyPhoneFieldModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: DbxFormFormlyPhoneFieldModule, declarations: [DbxPhoneFieldComponent], imports: [CommonModule,
-        MatInputModule,
-        MatFormFieldModule,
-        FormsModule,
-        ReactiveFormsModule,
-        MatAutocompleteModule,
-        MatChipsModule,
-        MatIconModule,
-        FlexLayoutModule,
-        FormlyMatFormFieldModule, i1$2.FormlyModule, NgxMatIntlTelInputComponent] });
-DbxFormFormlyPhoneFieldModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxFormFormlyPhoneFieldModule, imports: [CommonModule,
-        MatInputModule,
-        MatFormFieldModule,
-        FormsModule,
-        ReactiveFormsModule,
-        MatAutocompleteModule,
-        MatChipsModule,
-        MatIconModule,
-        FlexLayoutModule,
-        FormlyMatFormFieldModule,
-        FormlyModule.forChild({
-            types: [{ name: 'intphone', component: DbxPhoneFieldComponent, wrappers: ['form-field'] }]
-        }),
-        NgxMatIntlTelInputComponent] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxFormFormlyPhoneFieldModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormFormlyPhoneFieldModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -5687,11 +5676,11 @@ function addressListField(config = {}) {
 }
 
 class DbxFormFormlyTextFieldModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormFormlyTextFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: DbxFormFormlyTextFieldModule, imports: [FormlyMaterialModule], exports: [DbxFormFormlyWrapperModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormFormlyTextFieldModule, imports: [FormlyMaterialModule, DbxFormFormlyWrapperModule] }); }
 }
-DbxFormFormlyTextFieldModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxFormFormlyTextFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-DbxFormFormlyTextFieldModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: DbxFormFormlyTextFieldModule, imports: [FormlyMaterialModule], exports: [DbxFormFormlyWrapperModule] });
-DbxFormFormlyTextFieldModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxFormFormlyTextFieldModule, imports: [FormlyMaterialModule, DbxFormFormlyWrapperModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxFormFormlyTextFieldModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormFormlyTextFieldModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [FormlyMaterialModule],
@@ -5708,11 +5697,11 @@ function hiddenField({ key, required = false }) {
 }
 
 class DbxFormFormlyValueModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormFormlyValueModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: DbxFormFormlyValueModule, imports: [CommonModule], exports: [DbxFormFormlyArrayFieldModule, DbxFormFormlyBooleanFieldModule, DbxFormFormlyDateFieldModule, DbxFormFormlyPhoneFieldModule, DbxFormFormlyNumberFieldModule, DbxFormFormlyTextFieldModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormFormlyValueModule, imports: [CommonModule, DbxFormFormlyArrayFieldModule, DbxFormFormlyBooleanFieldModule, DbxFormFormlyDateFieldModule, DbxFormFormlyPhoneFieldModule, DbxFormFormlyNumberFieldModule, DbxFormFormlyTextFieldModule] }); }
 }
-DbxFormFormlyValueModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxFormFormlyValueModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-DbxFormFormlyValueModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: DbxFormFormlyValueModule, imports: [CommonModule], exports: [DbxFormFormlyArrayFieldModule, DbxFormFormlyBooleanFieldModule, DbxFormFormlyDateFieldModule, DbxFormFormlyPhoneFieldModule, DbxFormFormlyNumberFieldModule, DbxFormFormlyTextFieldModule] });
-DbxFormFormlyValueModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxFormFormlyValueModule, imports: [CommonModule, DbxFormFormlyArrayFieldModule, DbxFormFormlyBooleanFieldModule, DbxFormFormlyDateFieldModule, DbxFormFormlyPhoneFieldModule, DbxFormFormlyNumberFieldModule, DbxFormFormlyTextFieldModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxFormFormlyValueModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormFormlyValueModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule],
@@ -5722,11 +5711,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
         }] });
 
 class DbxFormFormlyFieldModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormFormlyFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: DbxFormFormlyFieldModule, imports: [CommonModule], exports: [DbxFormFormlyChecklistItemFieldModule, DbxFormFormlyComponentFieldModule, DbxFormFormlySelectionModule, DbxFormFormlyTextEditorFieldModule, DbxFormFormlyValueModule, DbxFormFormlyWrapperModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormFormlyFieldModule, imports: [CommonModule, DbxFormFormlyChecklistItemFieldModule, DbxFormFormlyComponentFieldModule, DbxFormFormlySelectionModule, DbxFormFormlyTextEditorFieldModule, DbxFormFormlyValueModule, DbxFormFormlyWrapperModule] }); }
 }
-DbxFormFormlyFieldModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxFormFormlyFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-DbxFormFormlyFieldModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: DbxFormFormlyFieldModule, imports: [CommonModule], exports: [DbxFormFormlyChecklistItemFieldModule, DbxFormFormlyComponentFieldModule, DbxFormFormlySelectionModule, DbxFormFormlyTextEditorFieldModule, DbxFormFormlyValueModule, DbxFormFormlyWrapperModule] });
-DbxFormFormlyFieldModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxFormFormlyFieldModule, imports: [CommonModule, DbxFormFormlyChecklistItemFieldModule, DbxFormFormlyComponentFieldModule, DbxFormFormlySelectionModule, DbxFormFormlyTextEditorFieldModule, DbxFormFormlyValueModule, DbxFormFormlyWrapperModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxFormFormlyFieldModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormFormlyFieldModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule],
@@ -5761,6 +5750,7 @@ class DbxFormlyContext {
         this.disabled$ = this._disabled.pipe(filterMaybe(), shareReplay(1));
         this.stream$ = this._delegate.pipe(distinctUntilChanged(), switchMap((x) => (x ? x.stream$ : of(DbxFormlyContext.INITIAL_STATE))), shareReplay(1));
     }
+    static { this.INITIAL_STATE = { isComplete: false, state: DbxFormState.INITIALIZING, status: 'PENDING' }; }
     destroy() {
         this.lockSet.destroyOnNextUnlock(() => {
             this._fields.complete();
@@ -5829,21 +5819,20 @@ class DbxFormlyContext {
         }
     }
 }
-DbxFormlyContext.INITIAL_STATE = { isComplete: false, state: DbxFormState.INITIALIZING, status: 'PENDING' };
 
 /**
  * Abstract component for wrapping a form.
  */
 class AbstractFormlyFormDirective {
-    constructor(context) {
-        this.context = context;
-    }
     get disabled() {
         return this.context.isDisabled();
     }
     set disabled(disabled) {
         this.context.setDisabled(undefined, disabled);
     }
+    constructor(context) {
+        this.context = context;
+    }
     ngOnDestroy() {
         this.context.destroy();
     }
@@ -5863,10 +5852,10 @@ class AbstractFormlyFormDirective {
     setDisabled(key, disabled) {
         this.context.setDisabled(key, disabled);
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AbstractFormlyFormDirective, deps: [{ token: DbxFormlyContext }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: AbstractFormlyFormDirective, inputs: { disabled: "disabled" }, ngImport: i0 }); }
 }
-AbstractFormlyFormDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: AbstractFormlyFormDirective, deps: [{ token: DbxFormlyContext }], target: i0.ɵɵFactoryTarget.Directive });
-AbstractFormlyFormDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.12", type: AbstractFormlyFormDirective, inputs: { disabled: "disabled" }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: AbstractFormlyFormDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AbstractFormlyFormDirective, decorators: [{
             type: Directive
         }], ctorParameters: function () { return [{ type: DbxFormlyContext }]; }, propDecorators: { disabled: [{
                 type: Input
@@ -5878,10 +5867,10 @@ class AbstractSyncFormlyFormDirective extends AbstractFormlyFormDirective {
     ngOnInit() {
         this.context.fields = this.fields;
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AbstractSyncFormlyFormDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: AbstractSyncFormlyFormDirective, usesInheritance: true, ngImport: i0 }); }
 }
-AbstractSyncFormlyFormDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: AbstractSyncFormlyFormDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-AbstractSyncFormlyFormDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.12", type: AbstractSyncFormlyFormDirective, usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: AbstractSyncFormlyFormDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AbstractSyncFormlyFormDirective, decorators: [{
             type: Directive
         }] });
 /**
@@ -5901,10 +5890,10 @@ class AbstractAsyncFormlyFormDirective extends AbstractFormlyFormDirective {
         super.ngOnDestroy();
         this._fieldsSub.destroy();
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AbstractAsyncFormlyFormDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: AbstractAsyncFormlyFormDirective, usesInheritance: true, ngImport: i0 }); }
 }
-AbstractAsyncFormlyFormDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: AbstractAsyncFormlyFormDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-AbstractAsyncFormlyFormDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.12", type: AbstractAsyncFormlyFormDirective, usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: AbstractAsyncFormlyFormDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AbstractAsyncFormlyFormDirective, decorators: [{
             type: Directive
         }] });
 class AbstractConfigAsyncFormlyFormDirective extends AbstractAsyncFormlyFormDirective {
@@ -5924,10 +5913,10 @@ class AbstractConfigAsyncFormlyFormDirective extends AbstractAsyncFormlyFormDire
         super.ngOnDestroy();
         this._config.complete();
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AbstractConfigAsyncFormlyFormDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: AbstractConfigAsyncFormlyFormDirective, inputs: { config: "config" }, usesInheritance: true, ngImport: i0 }); }
 }
-AbstractConfigAsyncFormlyFormDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: AbstractConfigAsyncFormlyFormDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-AbstractConfigAsyncFormlyFormDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.12", type: AbstractConfigAsyncFormlyFormDirective, inputs: { config: "config" }, usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: AbstractConfigAsyncFormlyFormDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AbstractConfigAsyncFormlyFormDirective, decorators: [{
             type: Directive
         }], propDecorators: { config: [{
                 type: Input
@@ -6102,14 +6091,14 @@ class DbxFormlyFormComponent extends AbstractSubscriptionDirective {
     forceFormUpdate() {
         this._forceUpdate.next();
     }
-}
-DbxFormlyFormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxFormlyFormComponent, deps: [{ token: DbxFormlyContext }], target: i0.ɵɵFactoryTarget.Component });
-DbxFormlyFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: DbxFormlyFormComponent, selector: "dbx-formly", host: { classAttribute: "dbx-formly" }, providers: provideDbxMutableForm(DbxFormlyFormComponent), exportAs: ["formly"], usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormlyFormComponent, deps: [{ token: DbxFormlyContext }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DbxFormlyFormComponent, selector: "dbx-formly", host: { classAttribute: "dbx-formly" }, providers: provideDbxMutableForm(DbxFormlyFormComponent), exportAs: ["formly"], usesInheritance: true, ngImport: i0, template: `
     <form [formGroup]="form" class="dbx-formly">
       <formly-form [form]="form" [fields]="(fields$ | async) ?? []" [model]="model"></formly-form>
     </form>
-  `, isInline: true, dependencies: [{ kind: "directive", type: i3$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { 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: "component", type: i1$2.FormlyForm, selector: "formly-form", inputs: ["form", "model", "fields", "options"], outputs: ["modelChange"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxFormlyFormComponent, decorators: [{
+  `, isInline: true, dependencies: [{ kind: "directive", type: i3$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { 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: "component", type: i1$1.FormlyForm, selector: "formly-form", inputs: ["form", "model", "fields", "options"], outputs: ["modelChange"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormlyFormComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'dbx-formly',
@@ -6139,12 +6128,12 @@ class DbxFormSearchFormComponent extends AbstractConfigAsyncFormlyFormDirective
         super.ngOnDestroy();
         this.search.complete();
     }
-}
-DbxFormSearchFormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxFormSearchFormComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-DbxFormSearchFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: DbxFormSearchFormComponent, selector: "dbx-form-search-form", outputs: { search: "search" }, host: { classAttribute: "d-block dbx-form-search-form" }, providers: [provideFormlyContext()], usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormSearchFormComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DbxFormSearchFormComponent, selector: "dbx-form-search-form", outputs: { search: "search" }, host: { classAttribute: "d-block dbx-form-search-form" }, providers: [provideFormlyContext()], usesInheritance: true, ngImport: i0, template: `
     <dbx-formly (dbxFormValueChange)="searchChanged($event)"></dbx-formly>
-  `, isInline: true, dependencies: [{ kind: "directive", type: DbxFormValueChangesDirective, selector: "[dbxFormValueChange]", outputs: ["dbxFormValueChange"] }, { kind: "component", type: DbxFormlyFormComponent, selector: "dbx-formly", exportAs: ["formly"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxFormSearchFormComponent, decorators: [{
+  `, isInline: true, dependencies: [{ kind: "directive", type: DbxFormValueChangesDirective, selector: "[dbxFormValueChange]", outputs: ["dbxFormValueChange"] }, { kind: "component", type: DbxFormlyFormComponent, selector: "dbx-formly", exportAs: ["formly"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormSearchFormComponent, decorators: [{
             type: Component,
             args: [{
                     template: `
@@ -6179,10 +6168,10 @@ class DbxFormlyFieldsContextDirective extends AbstractAsyncFormlyFormDirective {
         super.ngOnDestroy();
         this._fields.complete();
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormlyFieldsContextDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: DbxFormlyFieldsContextDirective, selector: "[dbxFormlyFields]", inputs: { fields: ["dbxFormlyFields", "fields"] }, providers: provideFormlyContext(), usesInheritance: true, ngImport: i0 }); }
 }
-DbxFormlyFieldsContextDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxFormlyFieldsContextDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-DbxFormlyFieldsContextDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.12", type: DbxFormlyFieldsContextDirective, selector: "[dbxFormlyFields]", inputs: { fields: ["dbxFormlyFields", "fields"] }, providers: provideFormlyContext(), usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxFormlyFieldsContextDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormlyFieldsContextDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[dbxFormlyFields]',
@@ -6194,22 +6183,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
             }] } });
 
 class DbxFormlyModule {
-}
-DbxFormlyModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxFormlyModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-DbxFormlyModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: DbxFormlyModule, declarations: [DbxFormlyFormComponent, DbxFormlyFieldsContextDirective], imports: [CommonModule, FormsModule, ReactiveFormsModule, FormlyModule, FormlyMatToggleModule], exports: [
-        // Modules (?)
-        FormsModule,
-        ReactiveFormsModule,
-        // Directives
-        DbxFormlyFormComponent,
-        DbxFormlyFieldsContextDirective
-        // Helper Modules
-    ] });
-DbxFormlyModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxFormlyModule, imports: [CommonModule, FormsModule, ReactiveFormsModule, FormlyModule, FormlyMatToggleModule, 
-        // Modules (?)
-        FormsModule,
-        ReactiveFormsModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxFormlyModule, decorators: [{
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormlyModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: DbxFormlyModule, declarations: [DbxFormlyFormComponent, DbxFormlyFieldsContextDirective], imports: [CommonModule, FormsModule, ReactiveFormsModule, FormlyModule, FormlyMatToggleModule], exports: [
+            // Modules (?)
+            FormsModule,
+            ReactiveFormsModule,
+            // Directives
+            DbxFormlyFormComponent,
+            DbxFormlyFieldsContextDirective
+            // Helper Modules
+        ] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormlyModule, imports: [CommonModule, FormsModule, ReactiveFormsModule, FormlyModule, FormlyMatToggleModule, 
+            // Modules (?)
+            FormsModule,
+            ReactiveFormsModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormlyModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, FormsModule, ReactiveFormsModule, FormlyModule, FormlyMatToggleModule],
@@ -6227,11 +6216,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
         }] });
 
 class DbxFormFormlyFormModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormFormlyFormModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: DbxFormFormlyFormModule, declarations: [DbxFormSearchFormComponent], imports: [CommonModule, DbxFormModule, DbxFormlyModule, DbxFormFormlyFieldModule], exports: [DbxFormSearchFormComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormFormlyFormModule, imports: [CommonModule, DbxFormModule, DbxFormlyModule, DbxFormFormlyFieldModule] }); }
 }
-DbxFormFormlyFormModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxFormFormlyFormModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-DbxFormFormlyFormModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: DbxFormFormlyFormModule, declarations: [DbxFormSearchFormComponent], imports: [CommonModule, DbxFormModule, DbxFormlyModule, DbxFormFormlyFieldModule], exports: [DbxFormSearchFormComponent] });
-DbxFormFormlyFormModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxFormFormlyFormModule, imports: [CommonModule, DbxFormModule, DbxFormlyModule, DbxFormFormlyFieldModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxFormFormlyFormModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormFormlyFormModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, DbxFormModule, DbxFormlyModule, DbxFormFormlyFieldModule],
@@ -6385,12 +6374,12 @@ function timezoneStringField(config = {}) {
  * Provides vertical spacing after a form.
  */
 class DbxFormSpacerComponent {
-}
-DbxFormSpacerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxFormSpacerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-DbxFormSpacerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: DbxFormSpacerComponent, selector: "dbx-form-spacer", ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormSpacerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DbxFormSpacerComponent, selector: "dbx-form-spacer", ngImport: i0, template: `
     <div class="dbx-form-spacer"></div>
-  `, isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxFormSpacerComponent, decorators: [{
+  `, isInline: true }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormSpacerComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'dbx-form-spacer',
@@ -6401,11 +6390,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
         }] });
 
 class DbxFormLayoutModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormLayoutModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: DbxFormLayoutModule, declarations: [DbxFormSpacerComponent], imports: [CommonModule], exports: [DbxFormSpacerComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormLayoutModule, imports: [CommonModule] }); }
 }
-DbxFormLayoutModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxFormLayoutModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-DbxFormLayoutModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: DbxFormLayoutModule, declarations: [DbxFormSpacerComponent], imports: [CommonModule], exports: [DbxFormSpacerComponent] });
-DbxFormLayoutModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxFormLayoutModule, imports: [CommonModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxFormLayoutModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormLayoutModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule],
@@ -6415,11 +6404,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
         }] });
 
 class DbxFormExtensionModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormExtensionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: DbxFormExtensionModule, exports: [DbxFormModule, DbxFormlyModule, DbxFormFormlyFieldModule, DbxFormFormlyFormModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormExtensionModule, imports: [DbxFormModule, DbxFormlyModule, DbxFormFormlyFieldModule, DbxFormFormlyFormModule] }); }
 }
-DbxFormExtensionModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxFormExtensionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-DbxFormExtensionModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: DbxFormExtensionModule, exports: [DbxFormModule, DbxFormlyModule, DbxFormFormlyFieldModule, DbxFormFormlyFormModule] });
-DbxFormExtensionModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxFormExtensionModule, imports: [DbxFormModule, DbxFormlyModule, DbxFormFormlyFieldModule, DbxFormFormlyFormModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxFormExtensionModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormExtensionModule, decorators: [{
             type: NgModule,
             args: [{
                     exports: [DbxFormModule, DbxFormlyModule, DbxFormFormlyFieldModule, DbxFormFormlyFormModule]
@@ -6430,5 +6419,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_DATE_TIME_FIELD_MENU_PRESETS_TOKEN, DBX_SEARCHABLE_FIELD_COMPONENT_DATA_TOKEN, DEFAULT_DATE_TIME_FIELD_MENU_PRESETS_PRESETS, 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, DbxDateTimeFieldMenuPresetsService, 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_EXTENSION_MESSAGE, 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, dateTimePreset, dateTimeRangeField, dbxDateRangeIsSameDateRangeFieldValue, dbxDateTimeInputValueParseFactory, dbxDateTimeIsSameDateTimeFieldValue, dbxDateTimeOutputValueFactory, dbxFormSearchFormFields, dbxFormSourceObservable, dbxFormSourceObservableFromStream, dbxListField, defaultValidationMessages, disableFormlyFieldAutofillAttributes, dollarAmountField, emailField, expandWrapper, fieldValueIsAvailableValidator, fieldValuesAreEqualValidator, filterPartialPotentialFieldConfigValuesFromObject, filterPickableItemFieldValuesByLabel, filterPickableItemFieldValuesByLabelFilterFunction, fixedDateRangeField, flexLayoutWrapper, formlyField, hiddenField, infoWrapper, isDbxDateTimeFieldTimeDateConfig, isDivisibleBy, isDomain, isE164PhoneNumber, isE164PhoneNumberWithValidExtension, isInRange, isPhoneExtension, isTruthy, latLngTextField, makeMetaFilterSearchableFieldValueDisplayFn, maxLengthValidationMessage, maxValidationMessage, mergePropsValueObjects, minLengthValidationMessage, minValidationMessage, nameField, numberField, numberFieldTransformParser, numberSliderField, partialPotentialFieldConfigKeys, partialPotentialFieldConfigKeysFilter, phoneAndLabelSectionField, phoneField, phoneListField, pickableItemChipField, pickableItemListField, pickableValueFieldValuesConfigForStaticLabeledValues, propsAndConfigForFieldConfig, propsForFieldConfig, propsValueForFieldConfig, provideDbxForm, provideDbxMutableForm, provideFormlyContext, repeatArrayField, searchableChipField, searchableStringChipField, searchableTextField, sectionWrapper, sortPickableItemsByLabel, sortPickableItemsByLabelStringFunction, sourceSelectField, stateField, streamValueFromControl, 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_DATE_TIME_FIELD_MENU_PRESETS_TOKEN, DBX_SEARCHABLE_FIELD_COMPONENT_DATA_TOKEN, DEFAULT_DATE_TIME_FIELD_MENU_PRESETS_PRESETS, 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, DbxDateTimeFieldMenuPresetsService, 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_EXTENSION_MESSAGE, 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, dateTimePreset, dateTimeRangeField, dbxDateRangeIsSameDateRangeFieldValue, dbxDateTimeInputValueParseFactory, dbxDateTimeIsSameDateTimeFieldValue, dbxDateTimeOutputValueFactory, dbxFormSearchFormFields, dbxFormSourceObservable, dbxFormSourceObservableFromStream, dbxListField, defaultValidationMessages, disableFormlyFieldAutofillAttributes, dollarAmountField, emailField, expandWrapper, fieldValueIsAvailableValidator, fieldValuesAreEqualValidator, filterPartialPotentialFieldConfigValuesFromObject, filterPickableItemFieldValuesByLabel, filterPickableItemFieldValuesByLabelFilterFunction, fixedDateRangeField, flexLayoutWrapper, formlyField, hiddenField, infoWrapper, isDbxDateTimeFieldTimeDateConfig, isDivisibleBy, isDomain, isE164PhoneNumber, isE164PhoneNumberWithValidExtension, isInRange, isPhoneExtension, isTruthy, latLngTextField, makeMetaFilterSearchableFieldValueDisplayFn, maxLengthValidationMessage, maxValidationMessage, mergePropsValueObjects, minLengthValidationMessage, minValidationMessage, nameField, numberField, numberFieldTransformParser, numberSliderField, partialPotentialFieldConfigKeys, partialPotentialFieldConfigKeysFilter, phoneAndLabelSectionField, phoneField, phoneListField, pickableItemChipField, pickableItemListField, pickableValueFieldValuesConfigForStaticLabeledValues, propsAndConfigForFieldConfig, propsValueForFieldConfig, provideDbxForm, provideDbxMutableForm, provideFormlyContext, repeatArrayField, searchableChipField, searchableStringChipField, searchableTextField, sectionWrapper, sortPickableItemsByLabel, sortPickableItemsByLabelStringFunction, sourceSelectField, stateField, streamValueFromControl, 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