@dereekb/dbx-form 10.2.0 → 11.0.1

package/fesm2022/dereekb-dbx-form.mjs

@@ -1,63 +1,61 @@
 import * as i0 from '@angular/core';
-import { forwardRef, Directive, Host, Input, NgModule, EventEmitter, Output, Component, ViewChild, InjectionToken, Inject, ElementRef, Optional, Injectable } from '@angular/core';
+import { forwardRef, inject, Directive, Input, NgModule, EventEmitter, Output, Component, ChangeDetectorRef, ViewChild, InjectionToken, ElementRef, Injectable } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import * as i4 from '@angular/material/dialog';
-import { MatDialogModule } from '@angular/material/dialog';
-import * as i3 from '@uirouter/core';
-import * as i2 from '@dereekb/dbx-core';
-import { AbstractSubscriptionDirective, safeDetectChanges, DbxInjectionComponentModule, DbxDatePipeModule, mergeDbxInjectionComponentConfigs, tapDetectChanges, DbxValuePipeModule } from '@dereekb/dbx-core';
-import * as i2$1 from '@dereekb/dbx-web';
-import { DbxActionTransitionSafetyDirective, DbxTextModule, DbxLoadingModule, DbxFlexLayoutModule, DbxSectionLayoutModule, DbxRouterAnchorModule, dbxValueListItemDecisionFunction, DbxButtonModule, DbxListLayoutModule, AbstractDbxSelectionListWrapperDirective, DEFAULT_LIST_WRAPPER_DIRECTIVE_TEMPLATE, AbstractDbxSelectionListViewDirective, addConfigToValueListItems, provideDbxListView, AbstractDbxValueListViewItemComponent, DbxActionModule, mapCompactModeObs, DbxBarLayoutModule } from '@dereekb/dbx-web';
+import * as i5 from '@dereekb/dbx-web';
+import { DbxActionTransitionSafetyDirective, DbxTextModule, DbxLoadingModule, DbxFlexLayoutModule, DbxSectionLayoutModule, DbxRouterAnchorModule, dbxValueListItemDecisionFunction, DbxButtonModule, DbxListLayoutModule, AbstractDbxSelectionListWrapperDirective, DEFAULT_LIST_WRAPPER_DIRECTIVE_TEMPLATE, AbstractDbxSelectionListViewDirective, addConfigToValueListItems, provideDbxListView, AbstractDbxValueListViewItemComponent, DbxActionModule, CompactContextStore, mapCompactModeObs, DbxBarLayoutModule } from '@dereekb/dbx-web';
 import { isPast, addSeconds, startOfDay, addMinutes, addDays, isBefore } from 'date-fns';
 import { BehaviorSubject, switchMap, first, exhaustMap, of, catchError, delay, filter, combineLatest, map, distinctUntilChanged, shareReplay, Subject, tap, takeUntil, EMPTY, throttleTime, mergeMap, startWith, debounceTime, skipWhile, scan, skip, combineLatestWith, interval, merge, timer } from 'rxjs';
-import { LockSet, SubscriptionObject, asObservable, cleanup, errorOnEmissionsInPeriod, 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 i6 from '@dereekb/dbx-core';
+import { DbxActionContextStoreSourceInstance, AbstractSubscriptionDirective, safeDetectChanges, DbxInjectionComponentModule, DbxDatePipeModule, mergeDbxInjectionComponentConfigs, tapDetectChanges, DbxValuePipeModule } from '@dereekb/dbx-core';
+import { LockSet, SubscriptionObject, asObservable, cleanup, errorOnEmissionsInPeriod, isLoadingStateFinishedLoading, switchMapMaybeObs, filterMaybe, switchMapMaybeDefault, SimpleLoadingContext, distinctUntilHasDifferentValues, startWithBeginLoading, mapLoadingStateResults, successResult, ListLoadingStateContextInstance, mapIsListLoadingStateWithEmptyValue, LoadingStateContextInstance, isLoadingStateWithDefinedValue, isLoadingStateLoading, beginLoading, mapLoadingStateValueWithOperator, valueFromLoadingState, loadingStateContext, skipFirstMaybe, asObservableFromGetter, asyncPusherCache, scanCount } from '@dereekb/rxjs';
+import { MatDialogModule } from '@angular/material/dialog';
 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 * as i2 from '@angular/forms';
 import { FormsModule, ReactiveFormsModule, FormControl, Validators, FormGroup } from '@angular/forms';
-import * as i4$1 from '@angular/material/core';
-import { MatRippleModule, MatNativeDateModule } from '@angular/material/core';
-import * as i4$2 from '@angular/material/checkbox';
+import * as i4 from '@angular/material/core';
+import { MatRippleModule, MatNativeDateModule, DateAdapter } from '@angular/material/core';
+import * as i4$1 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 i7$1 from '@angular/material/button';
+import * as i6$1 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
-import * as i11 from '@ngbracket/ngx-layout/flex';
+import * as i10 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, dateFromMinuteOfDay, dateToMinuteOfDay, 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, iterablesAreSetEquivalent, capitalizeFirstLetter } from '@dereekb/util';
-import * as i2$2 from '@angular/material/slide-toggle';
+import * as i2$1 from '@angular/material/slide-toggle';
 import { MatSlideToggleModule } from '@angular/material/slide-toggle';
-import * as i2$3 from '@ngbracket/ngx-layout/extended';
-import * as i5 from '@angular/material/divider';
+import * as i2$2 from '@ngbracket/ngx-layout/extended';
+import * as i5$1 from '@angular/material/divider';
 import { MatDividerModule } from '@angular/material/divider';
-import * as i4$4 from '@angular/material/autocomplete';
+import * as i4$3 from '@angular/material/autocomplete';
 import { MatAutocompleteModule } from '@angular/material/autocomplete';
-import * as i5$1 from '@angular/material/form-field';
+import * as i4$5 from '@angular/material/form-field';
 import { MatFormFieldModule } from '@angular/material/form-field';
-import * as i4$3 from '@angular/material/input';
+import * as i4$2 from '@angular/material/input';
 import { MatInputModule } from '@angular/material/input';
 import { FieldType as FieldType$1, FormlyMaterialModule } from '@ngx-formly/material';
 import { camelCase } from 'change-case';
-import * as i6 from '@angular/material/chips';
+import * as i6$2 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, parseJsDateString, parseISO8601DayStringToDate, formatToISO8601DateString, formatToISO8601DayStringForSystem, isSameDateHoursAndMinutes, safeToJsDate, guessCurrentTimezone, dateTimezoneUtcNormal, toJsDayDate, isSameDateDay, toLocalReadableTimeString, getTimezoneAbbreviation, utcDayForDate, readableTimeStringToDate, findMinDate, dateFromLogicalDate, findMaxDate, isSameDate, dateTimeMinuteWholeDayDecisionFunction, DateTimeMinuteInstance, isSameDateDayRange, dateRange, clampDateRangeToDateRange, isDateInDateRange, isSameDateRange, limitDateTimeInstance, allTimezoneInfos, timezoneInfoForSystem, searchTimezoneInfos } from '@dereekb/date';
+import { skipUntilTimeElapsedAfterLastEmission, toJsDate, parseJsDateString, parseISO8601DayStringToDate, formatToISO8601DateString, formatToISO8601DayStringForSystem, isSameDateHoursAndMinutes, safeToJsDate, guessCurrentTimezone, dateTimezoneUtcNormal, toJsDayDate, isSameDateDay, toLocalReadableTimeString, getTimezoneAbbreviation, utcDayForDate, readableTimeStringToDate, findMinDate, dateFromLogicalDate, findMaxDate, isSameDate, dateTimeMinuteWholeDayDecisionFunction, DateTimeMinuteInstance, limitDateTimeInstance, isSameDateDayRange, dateRange, clampDateRangeToDateRange, isDateInDateRange, isSameDateRange, allTimezoneInfos, timezoneInfoForSystem, searchTimezoneInfos } from '@dereekb/date';
 import { FieldType as FieldType$2, FormlyMatFormFieldModule } from '@ngx-formly/material/form-field';
-import * as i3$2 from '@angular/material/select';
+import * as i3 from '@angular/material/select';
 import { MatSelectModule } from '@angular/material/select';
-import * as i5$2 from '@angular/material/datepicker';
+import * as i4$6 from '@angular/material/datepicker';
 import { MatDatepickerModule, DateRange, MAT_DATE_RANGE_SELECTION_STRATEGY, MatCalendar } from '@angular/material/datepicker';
-import * as i9 from '@angular/material/menu';
+import * as i8 from '@angular/material/menu';
 import { MatMenuModule } from '@angular/material/menu';
-import * as i4$5 from 'ngx-editor';
+import * as i3$1 from 'ngx-editor';
 import { Editor, NgxEditorModule } from 'ngx-editor';
-import * as i4$6 from '@angular/cdk/drag-drop';
+import * as i4$4 from '@angular/cdk/drag-drop';
 import { DragDropModule } from '@angular/cdk/drag-drop';
 import { FormlyMatSliderModule } from '@ngx-formly/material/slider';
-import * as i3$3 from 'ngx-mat-intl-tel-input';
+import * as i3$2 from 'ngx-mat-intl-tel-input';
 import { NgxMatIntlTelInputComponent } from 'ngx-mat-intl-tel-input';
 import { ADDRESS_CITY_MAX_LENGTH, ADDRESS_STATE_CODE_MAX_LENGTH, ADDRESS_STATE_MAX_LENGTH, ADDRESS_COUNTRY_MAX_LENGTH, ADDRESS_ZIP_MAX_LENGTH, ADDRESS_LINE_MAX_LENGTH } from '@dereekb/model';
 import { FormlyMatToggleModule } from '@ngx-formly/material/toggle';
@@ -112,18 +110,31 @@ const APP_ACTION_FORM_DISABLED_KEY = 'dbx_action_form';
  * If the source is not considered modified, the trigger will be ignored.
  */
 class DbxActionFormDirective {
-    constructor(form, source) {
-        this.form = form;
-        this.source = source;
-        this.lockSet = new LockSet();
-        this._formDisabledWhileWorking = new BehaviorSubject(true);
-        this._triggeredSub = new SubscriptionObject();
-        this._isCompleteSub = new SubscriptionObject();
-        this._isWorkingSub = new SubscriptionObject();
-        if (form.lockSet) {
-            this.lockSet.addChildLockSet(form.lockSet, 'form');
-        }
-        this.lockSet.addChildLockSet(source.lockSet, 'source');
+    form = inject((DbxMutableForm), { host: true });
+    source = inject((DbxActionContextStoreSourceInstance));
+    lockSet = new LockSet();
+    /**
+     * Optional validator that checks whether or not the value is
+     * ready to send before the context store is marked enabled.
+     */
+    dbxActionFormValidator;
+    /**
+     * Optional function that checks whether or not the value has been modified.
+     */
+    dbxActionFormModified;
+    /**
+     * Optional function that maps the form's value to the source's value.
+     */
+    dbxActionFormMapValue;
+    _formDisabledWhileWorking = new BehaviorSubject(true);
+    _triggeredSub = new SubscriptionObject();
+    _isCompleteSub = new SubscriptionObject();
+    _isWorkingSub = new SubscriptionObject();
+    constructor() {
+        if (this.form.lockSet) {
+            this.lockSet.addChildLockSet(this.form.lockSet, 'form');
+        }
+        this.lockSet.addChildLockSet(this.source.lockSet, 'source');
     }
     get formDisabledOnWorking() {
         return this._formDisabledWhileWorking.value;
@@ -229,17 +240,15 @@ 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 }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxActionFormDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵ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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxActionFormDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[dbxActionForm]'
                 }]
-        }], ctorParameters: function () { return [{ type: DbxMutableForm, decorators: [{
-                    type: Host
-                }] }, { type: i2.DbxActionContextStoreSourceInstance }]; }, propDecorators: { dbxActionFormValidator: [{
+        }], ctorParameters: function () { return []; }, propDecorators: { dbxActionFormValidator: [{
                 type: Input
             }], dbxActionFormModified: [{
                 type: Input
@@ -255,33 +264,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  * NOTE: Only works with UIRouter
  */
 class DbxActionFormSafetyDirective extends DbxActionTransitionSafetyDirective {
-    constructor(dbxActionForm, source, transitionService, viewContainerRef, dialog) {
-        super(source, transitionService, viewContainerRef, dialog);
-        this.dbxActionForm = dbxActionForm;
-    }
+    dbxActionForm = inject((DbxActionFormDirective), { host: true });
+    inputSafetyType = 'auto';
     _handleOnBeforeTransition(transition) {
         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 }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxActionFormSafetyDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: DbxActionFormSafetyDirective, selector: "[dbxActionFormSafety]", inputs: { inputSafetyType: ["dbxActionFormSafety", "inputSafetyType"] }, usesInheritance: true, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxActionFormSafetyDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[dbxActionFormSafety]'
                 }]
-        }], ctorParameters: function () { return [{ type: DbxActionFormDirective, decorators: [{
-                    type: Host
-                }] }, { type: i2.DbxActionContextStoreSourceInstance }, { type: i3.TransitionService }, { type: i0.ViewContainerRef }, { type: i4.MatDialog }]; }, propDecorators: { inputSafetyType: [{
+        }], propDecorators: { inputSafetyType: [{
                 type: Input,
                 args: ['dbxActionFormSafety']
             }] } });
 
 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] }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormActionTransitionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: DbxFormActionTransitionModule, declarations: [DbxActionFormSafetyDirective], imports: [CommonModule], exports: [DbxActionFormSafetyDirective] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormActionTransitionModule, imports: [CommonModule] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormActionTransitionModule, decorators: [{
             type: NgModule,
@@ -293,9 +298,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.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] }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormActionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: DbxFormActionModule, declarations: [DbxActionFormDirective], imports: [CommonModule, MatDialogModule], exports: [DbxActionFormDirective] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormActionModule, imports: [CommonModule, MatDialogModule] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormActionModule, decorators: [{
             type: NgModule,
@@ -367,11 +372,8 @@ function dbxFormSourceObservableFromStream(stream$, inputObs, mode$) {
  * Used with a FormComponent to set the value based on the input value.
  */
 class DbxFormSourceDirective extends AbstractSubscriptionDirective {
-    constructor(form) {
-        super();
-        this.form = form;
-        this._mode = new BehaviorSubject('reset');
-    }
+    form = inject((DbxMutableForm), { host: true });
+    _mode = new BehaviorSubject('reset');
     get mode() {
         return this._mode.value;
     }
@@ -394,17 +396,15 @@ 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 }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormSourceDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵ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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormSourceDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[dbxFormSource]'
                 }]
-        }], ctorParameters: function () { return [{ type: DbxMutableForm, decorators: [{
-                    type: Host
-                }] }]; }, propDecorators: { mode: [{
+        }], propDecorators: { mode: [{
                 type: Input,
                 args: ['dbxFormSourceMode']
             }], obs: [{
@@ -416,11 +416,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  * Used with a FormComponent to set the value from a LoadingState when the value is available.
  */
 class DbxFormLoadingSourceDirective extends AbstractSubscriptionDirective {
-    constructor(form) {
-        super();
-        this.form = form;
-        this._mode = new BehaviorSubject('reset');
-    }
+    form = inject((DbxMutableForm), { host: true });
+    _mode = new BehaviorSubject('reset');
     get mode() {
         return this._mode.value;
     }
@@ -437,7 +434,7 @@ class DbxFormLoadingSourceDirective extends AbstractSubscriptionDirective {
         let subscription;
         if (inputObs) {
             subscription = dbxFormSourceObservableFromStream(this.form.stream$, inputObs, this._mode).subscribe((x) => {
-                if (loadingStateHasFinishedLoading(x)) {
+                if (isLoadingStateFinishedLoading(x)) {
                     this.form.setValue(x.value);
                 }
             });
@@ -448,17 +445,15 @@ 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 }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormLoadingSourceDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵ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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormLoadingSourceDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[dbxFormLoadingSource]'
                 }]
-        }], ctorParameters: function () { return [{ type: DbxMutableForm, decorators: [{
-                    type: Host
-                }] }]; }, propDecorators: { mode: [{
+        }], propDecorators: { mode: [{
                 type: Input,
                 args: ['dbxFormLoadingSourceMode']
             }], obs: [{
@@ -472,11 +467,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  * Emits undefined when the form is incomplete, and the value when the form is complete.
  */
 class DbxFormValueChangesDirective extends AbstractSubscriptionDirective {
-    constructor(form) {
-        super();
-        this.form = form;
-        this.dbxFormValueChange = new EventEmitter();
-    }
+    form = inject((DbxForm), { host: true });
+    dbxFormValueChange = new EventEmitter();
     ngOnInit() {
         this.sub = this.form.stream$
             .pipe(mergeMap((x) => this.form.getValue().pipe(first(), map((value) => ({ isComplete: x.isComplete, value })))), delay(0))
@@ -493,24 +485,22 @@ 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 }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormValueChangesDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: DbxFormValueChangesDirective, selector: "[dbxFormValueChange]", outputs: { dbxFormValueChange: "dbxFormValueChange" }, usesInheritance: true, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormValueChangesDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[dbxFormValueChange]'
                 }]
-        }], ctorParameters: function () { return [{ type: DbxForm, decorators: [{
-                    type: Host
-                }] }]; }, propDecorators: { dbxFormValueChange: [{
+        }], propDecorators: { dbxFormValueChange: [{
                 type: Output
             }] } });
 
 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] }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormIoModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵ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 ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormIoModule, imports: [CommonModule] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormIoModule, decorators: [{
             type: NgModule,
@@ -534,9 +524,9 @@ 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] }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: DbxFormModule, exports: [DbxFormActionTransitionModule, DbxFormActionModule, DbxFormIoModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormModule, imports: [DbxFormActionTransitionModule, DbxFormActionModule, DbxFormIoModule] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormModule, decorators: [{
             type: NgModule,
@@ -570,6 +560,7 @@ function defaultValidationMessages() {
 
 // MARK: Default
 class DbxDefaultChecklistItemFieldDisplayComponent {
+    displayContent;
     get label() {
         return this.displayContent?.label;
     }
@@ -579,14 +570,14 @@ class DbxDefaultChecklistItemFieldDisplayComponent {
     get description() {
         return this.displayContent?.description;
     }
-    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: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxDefaultChecklistItemFieldDisplayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵ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"] }] }); }
+  `, 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,
@@ -604,13 +595,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }] } });
 
 class DbxChecklistItemFieldComponent extends FieldType {
-    constructor() {
-        super(...arguments);
-        this._displayContent = new BehaviorSubject(undefined);
-        this.displayContent$ = this._displayContent.pipe(switchMapMaybeObs(), distinctUntilChanged(), shareReplay(1));
-        this.anchor$ = this.displayContent$.pipe(map((x) => x.anchor), shareReplay(1));
-        this.rippleDisabled$ = this.displayContent$.pipe(map((x) => x.ripple === false || (x.ripple !== true && !x.anchor)), distinctUntilChanged(), shareReplay(1));
-    }
+    _displayContent = new BehaviorSubject(undefined);
+    displayContent$ = this._displayContent.pipe(switchMapMaybeObs(), distinctUntilChanged(), shareReplay(1));
+    anchor$ = this.displayContent$.pipe(map((x) => x.anchor), shareReplay(1));
+    rippleDisabled$ = this.displayContent$.pipe(map((x) => x.ripple === false || (x.ripple !== true && !x.anchor)), distinctUntilChanged(), shareReplay(1));
     get formGroup() {
         return this.form;
     }
@@ -641,34 +629,29 @@ 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" }] }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxChecklistItemFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵ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 i2.NgControlStatus; }), selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i0.forwardRef(function () { return i2.NgControlStatusGroup; }), selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i0.forwardRef(function () { return i2.FormGroupDirective; }), selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i0.forwardRef(function () { return i2.FormControlName; }), selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i0.forwardRef(function () { return i4.MatRipple; }), selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "component", type: i0.forwardRef(function () { return i4$1.MatCheckbox; }), selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: i0.forwardRef(function () { return i7.MatIcon; }), selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i0.forwardRef(function () { return i5.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: "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" }]
         }] });
 class DbxChecklistItemContentComponent extends AbstractSubscriptionDirective {
-    constructor(checklistItemFieldComponent, cdRef) {
-        super();
-        this.checklistItemFieldComponent = checklistItemFieldComponent;
-        this.cdRef = cdRef;
-    }
-    ngOnInit() {
-        this.config = {
-            componentClass: this.checklistItemFieldComponent.componentClass,
-            init: (instance) => {
-                this.checklistItemFieldComponent.displayContent$.subscribe((x) => {
-                    instance.displayContent = x;
-                    safeDetectChanges(this.cdRef);
-                });
-            }
-        };
-    }
-    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: `
+    cdRef = inject(ChangeDetectorRef);
+    checklistItemFieldComponent = inject((DbxChecklistItemFieldComponent));
+    config = {
+        componentClass: this.checklistItemFieldComponent.componentClass,
+        init: (instance) => {
+            this.sub = this.checklistItemFieldComponent.displayContent$.subscribe((x) => {
+                instance.displayContent = x;
+                safeDetectChanges(this.cdRef);
+            });
+        }
+    };
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxChecklistItemContentComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵ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"] }] }); }
+  `, isInline: true, dependencies: [{ kind: "component", type: i6.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,
@@ -678,7 +661,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
     <dbx-injection [config]="config"></dbx-injection>
   `
                 }]
-        }], ctorParameters: function () { return [{ type: DbxChecklistItemFieldComponent }, { type: i0.ChangeDetectorRef }]; } });
+        }] });
 
 class DbxFormInfoWrapperComponent extends FieldWrapper {
     get infoWrapper() {
@@ -687,8 +670,8 @@ class DbxFormInfoWrapperComponent extends FieldWrapper {
     onInfoClick() {
         this.infoWrapper.onInfoClick();
     }
-    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: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormInfoWrapperComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵ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>
@@ -699,7 +682,7 @@ class DbxFormInfoWrapperComponent extends FieldWrapper {
         </button>
       </div>
     </div>
-  `, isInline: true, dependencies: [{ kind: "component", type: i7$1.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: i11.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: i11.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: i11.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }] }); }
+  `, isInline: true, dependencies: [{ kind: "component", type: i6$1.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: i10.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: i10.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: i10.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,
@@ -723,12 +706,12 @@ class DbxFormSectionWrapperComponent extends FieldWrapper {
     get headerConfig() {
         return this.props;
     }
-    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: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormSectionWrapperComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵ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"] }] }); }
+  `, isInline: true, dependencies: [{ kind: "component", type: i5.DbxSectionComponent, selector: "dbx-section", inputs: ["elevate"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormSectionWrapperComponent, decorators: [{
             type: Component,
@@ -755,12 +738,12 @@ class DbxFormFlexWrapperComponent extends FieldWrapper {
     get breakToColumn() {
         return this.flexWrapper.breakToColumn ?? false;
     }
-    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: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormFlexWrapperComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵ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" [breakToColumn]="breakToColumn">
       <ng-container #fieldComponent></ng-container>
     </div>
-  `, isInline: true, dependencies: [{ kind: "directive", type: i2$1.DbxFlexGroupDirective, selector: "[dbxFlexGroup]", inputs: ["breakToColumn", "content", "relative", "breakpoint"] }] }); }
+  `, isInline: true, dependencies: [{ kind: "directive", type: i5.DbxFlexGroupDirective, selector: "[dbxFlexGroup]", inputs: ["breakToColumn", "content", "relative", "breakpoint"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormFlexWrapperComponent, decorators: [{
             type: Component,
@@ -777,12 +760,12 @@ class DbxFormSubsectionWrapperComponent extends FieldWrapper {
     get headerConfig() {
         return this.props;
     }
-    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: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormSubsectionWrapperComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵ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" }] }); }
+  `, isInline: true, dependencies: [{ kind: "component", type: i5.DbxSubSectionComponent, selector: "dbx-subsection" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormSubsectionWrapperComponent, decorators: [{
             type: Component,
@@ -797,32 +780,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
         }] });
 
 const DEFAULT_HAS_VALUE_FN = (x) => !objectIsEmpty(x);
-class AbstractFormExpandableSectionWrapperDirective extends FieldWrapper {
-    constructor() {
-        super(...arguments);
-        this._formControlObs = new BehaviorSubject(undefined);
-        this.formControl$ = this._formControlObs.pipe(filterMaybe());
-        this._toggleOpen = new BehaviorSubject(undefined);
-        this.show$ = this._toggleOpen.pipe(switchMap((toggleOpen) => {
-            if (toggleOpen != null) {
-                return of(toggleOpen);
-            }
-            else {
-                return this.hasValue$;
-            }
-        }), distinctUntilChanged(), shareReplay(1));
-        this.hasValue$ = this.formControl$.pipe(switchMap((x) => x.valueChanges.pipe(startWith(x.value), map((value) => {
-            return this.hasValueFn(value);
-        }), shareReplay(1))));
-    }
-    get expandableSection() {
+class AbstractFormExpandSectionWrapperDirective extends FieldWrapper {
+    _formControlObs = new BehaviorSubject(undefined);
+    _toggleOpen = new BehaviorSubject(undefined);
+    formControl$ = this._formControlObs.pipe(filterMaybe());
+    show$ = this._toggleOpen.pipe(switchMap((toggleOpen) => {
+        if (toggleOpen != null) {
+            return of(toggleOpen);
+        }
+        else {
+            return this.hasValue$;
+        }
+    }), distinctUntilChanged(), shareReplay(1));
+    hasValue$ = this.formControl$.pipe(switchMap((x) => x.valueChanges.pipe(startWith(x.value), map((value) => {
+        return this.hasValueFn(value);
+    }), shareReplay(1))));
+    get expandSection() {
         return this.props;
     }
     get hasValueFn() {
-        return this.expandableSection.hasValueFn ?? DEFAULT_HAS_VALUE_FN;
+        return this.expandSection.hasValueFn ?? DEFAULT_HAS_VALUE_FN;
     }
     get expandLabel() {
-        let label = this.expandableSection.expandLabel ?? this.field.props?.label;
+        let label = this.expandSection.expandLabel ?? this.field.props?.label;
         if (label == null) {
             const firstFieldGroup = this.field.fieldGroup?.[0];
             if (firstFieldGroup) {
@@ -841,22 +821,22 @@ 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 }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AbstractFormExpandSectionWrapperDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: AbstractFormExpandSectionWrapperDirective, usesInheritance: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AbstractFormExpandableSectionWrapperDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AbstractFormExpandSectionWrapperDirective, decorators: [{
             type: Directive
         }] });
 
 /**
  * Section that is expandable by a button until a value is set, or the button is pressed.
  */
-class DbxFormExpandWrapperComponent extends AbstractFormExpandableSectionWrapperDirective {
+class DbxFormExpandWrapperComponent extends AbstractFormExpandSectionWrapperDirective {
     get buttonType() {
-        return this.expandableSection.buttonType ?? 'button';
+        return this.expandSection.buttonType ?? 'button';
     }
-    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: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormExpandWrapperComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵ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>
@@ -865,7 +845,7 @@ class DbxFormExpandWrapperComponent extends AbstractFormExpandableSectionWrapper
         <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" }] }); }
+  `, 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,
@@ -895,10 +875,10 @@ class AutoTouchFieldWrapperComponent extends FieldWrapper {
             }
         });
     }
-    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: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AutoTouchFieldWrapperComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵ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 }); }
+  `, isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AutoTouchFieldWrapperComponent, decorators: [{
             type: Component,
@@ -910,27 +890,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
         }] });
 
 /**
- * Section that is expandable by a button until a value is set, or the button is pressed.
+ * Section that can be expanded by a button until a value is set, or the button is pressed.
  */
-class DbxFormToggleWrapperComponent extends AbstractFormExpandableSectionWrapperDirective {
-    constructor() {
-        super(...arguments);
-        this.slideLabel$ = this._toggleOpen.pipe(switchMap((x) => {
-            if (this.expandableSection?.toggleLabelObs) {
-                return this.expandableSection?.toggleLabelObs(x);
-            }
-            else {
-                return of(this.expandLabel);
-            }
-        }), shareReplay(1));
-    }
+class DbxFormToggleWrapperComponent extends AbstractFormExpandSectionWrapperDirective {
+    slideLabel$ = this._toggleOpen.pipe(switchMap((x) => {
+        if (this.expandSection?.toggleLabelObs) {
+            return this.expandSection?.toggleLabelObs(x);
+        }
+        else {
+            return of(this.expandLabel);
+        }
+    }), shareReplay(1));
     onToggleChange() {
         this.show$.pipe(first()).subscribe((show) => {
             this._toggleOpen.next(!show);
         });
     }
-    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: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormToggleWrapperComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵ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>
@@ -939,7 +916,7 @@ class DbxFormToggleWrapperComponent extends AbstractFormExpandableSectionWrapper
         <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" }] }); }
+  `, 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$1.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,
@@ -958,13 +935,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
         }] });
 
 class DbxFormStyleWrapperComponent extends FieldWrapper {
-    constructor() {
-        super(...arguments);
-        this._style = new BehaviorSubject(undefined);
-        this._class = new BehaviorSubject(undefined);
-        this.style$ = this._style.pipe(switchMapMaybeDefault({}), shareReplay(1));
-        this.class$ = this._class.pipe(switchMapMaybeDefault(''), shareReplay(1));
-    }
+    _style = new BehaviorSubject(undefined);
+    _class = new BehaviorSubject(undefined);
+    style$ = this._style.pipe(switchMapMaybeDefault({}), shareReplay(1));
+    class$ = this._class.pipe(switchMapMaybeDefault(''), shareReplay(1));
     get styleGetter() {
         return this.props.styleGetter;
     }
@@ -983,12 +957,12 @@ class DbxFormStyleWrapperComponent extends FieldWrapper {
         this._style.complete();
         this._class.complete();
     }
-    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: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormStyleWrapperComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵ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" }] }); }
+  `, 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$2.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { kind: "directive", type: i2$2.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,
@@ -1007,11 +981,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  * By default shows loading during asynchronous validation of a field (FormControl status is "PENDING")
  */
 class DbxFormWorkingWrapperComponent extends FieldWrapper {
-    constructor() {
-        super(...arguments);
-        this.sub = new SubscriptionObject();
-        this.workingContext = new SimpleLoadingContext(false);
-    }
+    sub = new SubscriptionObject();
+    workingContext = new SimpleLoadingContext(false);
     ngOnInit() {
         this.sub.subscription = this.formControl?.statusChanges.subscribe({
             next: (x) => this.workingContext.setLoading(x === 'PENDING')
@@ -1021,13 +992,13 @@ class DbxFormWorkingWrapperComponent extends FieldWrapper {
         this.workingContext.destroy();
         this.sub.destroy();
     }
-    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: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormWorkingWrapperComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵ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"] }] }); }
+  `, isInline: true, dependencies: [{ kind: "component", type: i5.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,
@@ -1049,12 +1020,11 @@ const INFO_WRAPPER_KEY = 'info';
 const FLEX_WRAPPER_KEY = 'flex';
 const STYLE_WRAPPER_KEY = 'style';
 const WORKING_WRAPPER_KEY = 'working';
-// COMPAT: todo: rename to EXPAND_WRAPPER_KEY and update all references in the next update
-const EXPANDABLE_WRAPPER_KEY = 'expandable';
+const EXPAND_WRAPPER_KEY = 'expand';
 
 class DbxFormFormlyWrapperModule {
-    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,
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormFormlyWrapperModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵ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,
@@ -1062,8 +1032,8 @@ class DbxFormFormlyWrapperModule {
             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,
+            FlexLayoutModule, i1$1.FormlyModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormFormlyWrapperModule, imports: [CommonModule,
             DbxTextModule,
             DbxLoadingModule,
             DbxFlexLayoutModule,
@@ -1075,7 +1045,7 @@ class DbxFormFormlyWrapperModule {
             FormlyModule.forChild({
                 wrappers: [
                     { name: AUTO_TOUCH_WRAPPER_KEY, component: AutoTouchFieldWrapperComponent },
-                    { name: EXPANDABLE_WRAPPER_KEY, component: DbxFormExpandWrapperComponent },
+                    { name: EXPAND_WRAPPER_KEY, component: DbxFormExpandWrapperComponent },
                     { name: TOGGLE_WRAPPER_KEY, component: DbxFormToggleWrapperComponent },
                     { name: SECTION_WRAPPER_KEY, component: DbxFormSectionWrapperComponent },
                     { name: SUBSECTION_WRAPPER_KEY, component: DbxFormSubsectionWrapperComponent },
@@ -1084,7 +1054,7 @@ class DbxFormFormlyWrapperModule {
                     { 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,
@@ -1102,7 +1072,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         FormlyModule.forChild({
                             wrappers: [
                                 { name: AUTO_TOUCH_WRAPPER_KEY, component: AutoTouchFieldWrapperComponent },
-                                { name: EXPANDABLE_WRAPPER_KEY, component: DbxFormExpandWrapperComponent },
+                                { name: EXPAND_WRAPPER_KEY, component: DbxFormExpandWrapperComponent },
                                 { name: TOGGLE_WRAPPER_KEY, component: DbxFormToggleWrapperComponent },
                                 { name: SECTION_WRAPPER_KEY, component: DbxFormSectionWrapperComponent },
                                 { name: SUBSECTION_WRAPPER_KEY, component: DbxFormSubsectionWrapperComponent },
@@ -1119,8 +1089,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
         }] });
 
 class DbxFormFormlyChecklistItemFieldModule {
-    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,
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormFormlyChecklistItemFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: DbxFormFormlyChecklistItemFieldModule, declarations: [DbxChecklistItemFieldComponent, DbxChecklistItemContentComponent, DbxDefaultChecklistItemFieldDisplayComponent], imports: [CommonModule,
             DbxTextModule,
             FormsModule,
             ReactiveFormsModule,
@@ -1130,8 +1100,8 @@ class DbxFormFormlyChecklistItemFieldModule {
             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,
+            DbxFormFormlyWrapperModule, i1$1.FormlyModule], exports: [DbxFormFormlyWrapperModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormFormlyChecklistItemFieldModule, imports: [CommonModule,
             DbxTextModule,
             FormsModule,
             ReactiveFormsModule,
@@ -1144,7 +1114,7 @@ class DbxFormFormlyChecklistItemFieldModule {
             DbxFormFormlyWrapperModule,
             FormlyModule.forChild({
                 types: [{ name: 'checklistitem', component: DbxChecklistItemFieldComponent }]
-            }), DbxFormFormlyWrapperModule] }); }
+            }), DbxFormFormlyWrapperModule] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormFormlyChecklistItemFieldModule, decorators: [{
             type: NgModule,
@@ -1283,10 +1253,10 @@ function checklistItemField(config) {
  * Used for building a set of configurations for a data-type object that has as second object that is used as a checklist.
  */
 class ChecklistItemFieldDataSetBuilder {
+    _fields = new Map();
+    dataObs$;
     constructor(dataObs) {
-        this.dataObs = dataObs;
-        this._fields = new Map();
-        this.dataObs$ = this.dataObs;
+        this.dataObs$ = dataObs;
     }
     /**
      * Merges the input config with existing configuration.
@@ -1382,10 +1352,10 @@ class DbxFormComponentFieldComponent extends FieldType {
     get config() {
         return this.field.componentField;
     }
-    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: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormComponentFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵ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"] }] }); }
+  `, isInline: true, dependencies: [{ kind: "component", type: i6.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,
@@ -1397,14 +1367,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
         }] });
 
 class DbxFormFormlyComponentFieldModule {
-    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,
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormFormlyComponentFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵ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 ɵ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,
@@ -1446,36 +1416,33 @@ function dbxListField(config) {
  * Used for picking items by identifier from a DbxList component.
  */
 class DbxItemListFieldComponent extends FieldType {
-    constructor() {
-        super(...arguments);
-        this._selectionEventSub = new SubscriptionObject();
-        this._loadMoreSub = new SubscriptionObject();
-        this._formControlObs = new BehaviorSubject(undefined);
-        this.formControl$ = this._formControlObs.pipe(filterMaybe());
-        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._listComponentClassObs = new BehaviorSubject(undefined);
-        this.listComponentClass$ = this._listComponentClassObs.pipe(switchMapMaybeObs());
-        this.config$ = this.listComponentClass$.pipe(map((componentClass) => {
-            const loadMore = this.loadMore;
-            const config = {
-                componentClass,
-                init: (listView) => {
-                    listView.selectionMode = 'select'; // always enable select
-                    listView.state$ = this.field.props.state$;
-                    if (loadMore != null) {
-                        this._loadMoreSub.subscription = listView.loadMore.subscribe(() => loadMore());
-                    }
-                    // set subscription
-                    this._selectionEventSub.subscription = listView.selectionChange.subscribe((x) => this.updateForSelection(x));
+    _selectionEventSub = new SubscriptionObject();
+    _loadMoreSub = new SubscriptionObject();
+    _formControlObs = new BehaviorSubject(undefined);
+    formControl$ = this._formControlObs.pipe(filterMaybe());
+    _formControlValue$ = this.formControl$.pipe(switchMap((control) => control.valueChanges.pipe(startWith(control.value), shareReplay(1))));
+    values$ = this._formControlValue$.pipe(map(convertMaybeToArray), shareReplay(1));
+    _listComponentClassObs = new BehaviorSubject(undefined);
+    listComponentClass$ = this._listComponentClassObs.pipe(switchMapMaybeObs());
+    config$ = this.listComponentClass$.pipe(map((componentClass) => {
+        const loadMore = this.loadMore;
+        const config = {
+            componentClass,
+            init: (listView) => {
+                listView.selectionMode = 'select'; // always enable select
+                listView.state$ = this.field.props.state$;
+                if (loadMore != null) {
+                    this._loadMoreSub.subscription = listView.loadMore.subscribe(() => loadMore());
                 }
-            };
-            return config;
-        }));
-        this.isSelectedModifierFunction$ = this.values$.pipe(distinctUntilHasDifferentValues(), map((values) => {
-            return dbxValueListItemDecisionFunction(isSelectedDecisionFunctionFactory({ readKey: this.readKey })(values));
-        }), shareReplay(1));
-    }
+                // set subscription
+                this._selectionEventSub.subscription = listView.selectionChange.subscribe((x) => this.updateForSelection(x));
+            }
+        };
+        return config;
+    }));
+    isSelectedModifierFunction$ = this.values$.pipe(distinctUntilHasDifferentValues(), map((values) => {
+        return dbxValueListItemDecisionFunction(isSelectedDecisionFunctionFactory({ readKey: this.readKey })(values));
+    }), shareReplay(1));
     get label() {
         return this.field.props.label;
     }
@@ -1513,17 +1480,17 @@ 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: "directive", type: i2$1.DbxLabelComponent, selector: "dbx-label" }, { kind: "directive", 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" }] }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxItemListFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵ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  <span class=\"dbx-label dbx-label-padded\" *ngIf=\"label\">{{ label }}</span>\n  <div class=\"dbx-list-item-field-content\">\n    <dbx-injection [config]=\"config$ | async\"></dbx-injection>\n  </div>\n  <mat-divider></mat-divider>\n  <div class=\"dbx-form-description\" *ngIf=\"description\">{{ description }}</div>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5$1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i6.DbxInjectionComponent, selector: "dbx-injection, [dbxInjection], [dbx-injection]", inputs: ["config", "template"] }, { kind: "directive", type: i5.DbxValueListItemModifierDirective, selector: "[dbxListItemModifier]", inputs: ["dbxListItemModifier"] }, { kind: "directive", type: i5.DbxListItemIsSelectedModifierDirective, selector: "[dbxListItemIsSelectedModifier]", inputs: ["dbxListItemIsSelectedModifier"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] });
 }
 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" }]
+            args: [{ template: "<div class=\"dbx-list-item-field\" [dbxListItemModifier] [dbxListItemIsSelectedModifier]=\"isSelectedModifierFunction$ | async\">\n  <span class=\"dbx-label dbx-label-padded\" *ngIf=\"label\">{{ label }}</span>\n  <div class=\"dbx-list-item-field-content\">\n    <dbx-injection [config]=\"config$ | async\"></dbx-injection>\n  </div>\n  <mat-divider></mat-divider>\n  <div class=\"dbx-form-description\" *ngIf=\"description\">{{ description }}</div>\n</div>\n" }]
         }] });
 
 class DbxFormFormlyDbxListFieldModule {
-    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,
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormFormlyDbxListFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: DbxFormFormlyDbxListFieldModule, declarations: [DbxItemListFieldComponent], imports: [CommonModule,
             DbxTextModule,
             DbxLoadingModule,
             DbxButtonModule,
@@ -1536,8 +1503,8 @@ class DbxFormFormlyDbxListFieldModule {
             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,
+            DbxListLayoutModule, i1$1.FormlyModule], exports: [DbxItemListFieldComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormFormlyDbxListFieldModule, imports: [CommonModule,
             DbxTextModule,
             DbxLoadingModule,
             DbxButtonModule,
@@ -1553,7 +1520,7 @@ class DbxFormFormlyDbxListFieldModule {
             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,
@@ -1586,77 +1553,75 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  * Used for picking pre-set values using items as the presentation.
  */
 class AbstractDbxPickableItemFieldDirective extends FieldType$1 {
-    constructor() {
-        super(...arguments);
-        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.filterInputValue$ = this.inputCtrl.valueChanges.pipe(startWith(undefined));
-        this.filterInputValueString$ = this.filterInputValue$.pipe(debounceTime(200), distinctUntilChanged(), shareReplay(1));
-        this.loadResultsDisplayValuesState$ = this.formControl$.pipe(first(), switchMap(() => this.loadValuesFn().pipe(switchMap((x) => this.loadDisplayValuesForFieldValues(x)), startWithBeginLoading())), shareReplay(1));
-        this._formControlValue$ = this.formControl$.pipe(switchMap((control) => control.valueChanges.pipe(startWith(control.value), shareReplay(1))));
-        this.loadResultsDisplayValues$ = this.loadResultsDisplayValuesState$.pipe(map((x) => x?.value ?? []));
-        /**
-         * Current values in the form control.
-         */
-        this.values$ = this._formControlValue$.pipe(map(convertMaybeToArray), shareReplay(1));
-        /**
-         * Current values with their display value.
-         */
-        this.displayValuesState$ = combineLatest([this.loadResultsDisplayValues$, this.values$]).pipe(switchMap(([displayValues, currentValues]) => {
-            const displayValuesMap = makeValuesGroupMap(displayValues, (x) => this.hashForValue(x.value));
-            const valuesNotInDisplayMap = [];
-            currentValues.forEach((x) => {
-                const key = this.hashForValue(x);
-                const displayValue = displayValuesMap.get(key)?.[0];
-                if (!displayValue) {
-                    valuesNotInDisplayMap.push(x);
-                }
-            });
-            if (valuesNotInDisplayMap.length) {
-                return this.loadDisplayValuesForValues(valuesNotInDisplayMap).pipe(map((x) => mapLoadingStateResults(x, {
-                    mapValue: (loadedValues) => {
-                        loadedValues.forEach((x) => (x.isUnknown = x.isUnknown ?? true)); // Assign unknown flag.
-                        return [...displayValues, ...loadedValues];
-                    }
-                })));
-            }
-            else {
-                return of(successResult(displayValues));
-            }
-        }));
-        /**
-         * Results to be displayed if filtered.
-         */
-        this.filteredSearchResultsState$ = this.loadResultsDisplayValues$.pipe(switchMap((values) => this.filterInputValueString$.pipe(switchMap((text) => combineLatest([this._filterValues(text, values), this.displayValuesState$]).pipe(map(([values, displayState]) => mapLoadingStateResults(displayState, {
-            mapValue: (displayValues) => {
-                const valueHashSet = new Set(values.map((x) => this.hashForValue(x)));
-                return displayValues.filter((x) => !x.isUnknown && valueHashSet.has(x._hash));
-            }
-        })), startWithBeginLoading())))), shareReplay(1));
-        this.filteredSearchResults$ = this.filteredSearchResultsState$.pipe(map((x) => x?.value), filterMaybe(), shareReplay(1));
-        this.items$ = combineLatest([this.filteredSearchResults$, this.values$]).pipe(map(([displayValues, values]) => {
-            const selectedHashValuesSet = new Set(values.map((x) => this.hashForValue(x)));
-            let items = displayValues.map((x) => ({ itemValue: x, selected: selectedHashValuesSet.has(x._hash) }));
-            if (this.sortItems) {
-                items = this.sortItems(items);
+    filterMatInput;
+    inputCtrl = new FormControl('');
+    _formControlObs = new BehaviorSubject(undefined);
+    formControl$ = this._formControlObs.pipe(filterMaybe());
+    _clearDisplayHashMapSub = new SubscriptionObject();
+    _displayHashMap = new BehaviorSubject(new Map());
+    filterInputValue$ = this.inputCtrl.valueChanges.pipe(startWith(undefined));
+    filterInputValueString$ = this.filterInputValue$.pipe(debounceTime(200), distinctUntilChanged(), shareReplay(1));
+    loadResultsDisplayValuesState$ = this.formControl$.pipe(first(), switchMap(() => this.loadValuesFn().pipe(switchMap((x) => this.loadDisplayValuesForFieldValues(x)), startWithBeginLoading())), shareReplay(1));
+    _formControlValue$ = this.formControl$.pipe(switchMap((control) => control.valueChanges.pipe(startWith(control.value), shareReplay(1))));
+    loadResultsDisplayValues$ = this.loadResultsDisplayValuesState$.pipe(map((x) => x?.value ?? []));
+    /**
+     * Current values in the form control.
+     */
+    values$ = this._formControlValue$.pipe(map(convertMaybeToArray), shareReplay(1));
+    /**
+     * Current values with their display value.
+     */
+    displayValuesState$ = combineLatest([this.loadResultsDisplayValues$, this.values$]).pipe(switchMap(([displayValues, currentValues]) => {
+        const displayValuesMap = makeValuesGroupMap(displayValues, (x) => this.hashForValue(x.value));
+        const valuesNotInDisplayMap = [];
+        currentValues.forEach((x) => {
+            const key = this.hashForValue(x);
+            const displayValue = displayValuesMap.get(key)?.[0];
+            if (!displayValue) {
+                valuesNotInDisplayMap.push(x);
             }
-            return items;
-        }), shareReplay(1));
-        this.itemsLoadingState$ = this.loadResultsDisplayValues$.pipe(switchMap(() => this.items$.pipe(first(), map((x) => successResult(x)), startWithBeginLoading(), shareReplay(1))));
-        /**
-         * Context used for managing the loading of items, or when the current results change.
-         */
-        this.context = new ListLoadingStateContextInstance({ obs: this.itemsLoadingState$, showLoadingOnNoValue: false });
-        this.filterItemsLoadingState$ = this.items$.pipe(map((x) => successResult(x)), startWithBeginLoading(), shareReplay(1));
-        /**
-         * Context used for searching/filtering.
-         */
-        this.filterResultsContext = new ListLoadingStateContextInstance({ obs: this.filteredSearchResultsState$, showLoadingOnNoValue: true });
-        this.noItemsAvailable$ = this.filterItemsLoadingState$.pipe(isListLoadingStateEmpty(), distinctUntilChanged());
-    }
+        });
+        if (valuesNotInDisplayMap.length) {
+            return this.loadDisplayValuesForValues(valuesNotInDisplayMap).pipe(map((x) => mapLoadingStateResults(x, {
+                mapValue: (loadedValues) => {
+                    loadedValues.forEach((x) => (x.isUnknown = x.isUnknown ?? true)); // Assign unknown flag.
+                    return [...displayValues, ...loadedValues];
+                }
+            })));
+        }
+        else {
+            return of(successResult(displayValues));
+        }
+    }));
+    /**
+     * Results to be displayed if filtered.
+     */
+    filteredSearchResultsState$ = this.loadResultsDisplayValues$.pipe(switchMap((values) => this.filterInputValueString$.pipe(switchMap((text) => combineLatest([this._filterValues(text, values), this.displayValuesState$]).pipe(map(([values, displayState]) => mapLoadingStateResults(displayState, {
+        mapValue: (displayValues) => {
+            const valueHashSet = new Set(values.map((x) => this.hashForValue(x)));
+            return displayValues.filter((x) => !x.isUnknown && valueHashSet.has(x._hash));
+        }
+    })), startWithBeginLoading())))), shareReplay(1));
+    filteredSearchResults$ = this.filteredSearchResultsState$.pipe(map((x) => x?.value), filterMaybe(), shareReplay(1));
+    items$ = combineLatest([this.filteredSearchResults$, this.values$]).pipe(map(([displayValues, values]) => {
+        const selectedHashValuesSet = new Set(values.map((x) => this.hashForValue(x)));
+        let items = displayValues.map((x) => ({ itemValue: x, selected: selectedHashValuesSet.has(x._hash) }));
+        if (this.sortItems) {
+            items = this.sortItems(items);
+        }
+        return items;
+    }), shareReplay(1));
+    itemsLoadingState$ = this.loadResultsDisplayValues$.pipe(switchMap(() => this.items$.pipe(first(), map((x) => successResult(x)), startWithBeginLoading(), shareReplay(1))));
+    /**
+     * Context used for managing the loading of items, or when the current results change.
+     */
+    context = new ListLoadingStateContextInstance({ obs: this.itemsLoadingState$, showLoadingOnNoValue: false });
+    filterItemsLoadingState$ = this.items$.pipe(map((x) => successResult(x)), startWithBeginLoading(), shareReplay(1));
+    /**
+     * Context used for searching/filtering.
+     */
+    filterResultsContext = new ListLoadingStateContextInstance({ obs: this.filteredSearchResultsState$, showLoadingOnNoValue: true });
+    noItemsAvailable$ = this.filterItemsLoadingState$.pipe(mapIsListLoadingStateWithEmptyValue(), distinctUntilChanged());
     get readonly() {
         return this.props.readonly;
     }
@@ -1837,8 +1802,8 @@ 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 }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AbstractDbxPickableItemFieldDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵ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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AbstractDbxPickableItemFieldDirective, decorators: [{
             type: Directive
@@ -1861,8 +1826,8 @@ 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" }] }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxPickableChipListFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵ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: i5.DbxLoadingComponent, selector: "dbx-loading", inputs: ["show", "text", "mode", "color", "diameter", "linear", "padding", "context", "loading", "error"] }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i5$1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: i6$2.MatChipAvatar, selector: "mat-chip-avatar, [matChipAvatar]" }, { kind: "component", type: i6$2.MatChipListbox, selector: "mat-chip-listbox", inputs: ["tabIndex", "multiple", "aria-orientation", "selectable", "compareWith", "required", "hideSingleSelectionIndicator", "value"], outputs: ["change"] }, { kind: "component", type: i6$2.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: i6.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: DbxPickableChipListFieldComponent, decorators: [{
             type: Component,
@@ -1878,8 +1843,8 @@ 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" }] }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxPickableListFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵ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 i5.DbxLoadingComponent; }), selector: "dbx-loading", inputs: ["show", "text", "mode", "color", "diameter", "linear", "padding", "context", "loading", "error"] }, { kind: "directive", type: i0.forwardRef(function () { return i2.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 i2.NgControlStatus; }), selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i0.forwardRef(function () { return i4$2.MatInput; }), selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i0.forwardRef(function () { return i2.FormControlDirective; }), selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i0.forwardRef(function () { return i5$1.MatDivider; }), selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i0.forwardRef(function () { return i6.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: "16.2.12", ngImport: i0, type: DbxPickableListFieldComponent, decorators: [{
             type: Component,
@@ -1892,8 +1857,8 @@ 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" }] }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxPickableListFieldItemListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵ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: i5.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: "16.2.12", ngImport: i0, type: DbxPickableListFieldItemListComponent, decorators: [{
             type: Component,
@@ -1906,6 +1871,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  * NOTE: Values input are PickableItemFieldItem<T>, but output values are PickableValueFieldDisplayValue<T>.
  */
 class DbxPickableListFieldItemListViewComponent extends AbstractDbxSelectionListViewDirective {
+    dbxPickableListFieldComponent = inject((DbxPickableListFieldComponent));
+    // TODO: any belongs here for now, but item list typings need to be updated.
+    config = {
+        componentClass: DbxPickableListFieldItemListViewItemComponent
+    };
     get multiple() {
         return !this.dbxPickableListFieldComponent.pickOnlyOne;
     }
@@ -1916,21 +1886,13 @@ class DbxPickableListFieldItemListViewComponent extends AbstractDbxSelectionList
         }
         return selectionMode;
     }
-    constructor(dbxPickableListFieldComponent) {
-        super();
-        this.dbxPickableListFieldComponent = dbxPickableListFieldComponent;
-        // TODO: any belongs here for now, but item list typings need to be updated.
-        this.config = {
-            componentClass: DbxPickableListFieldItemListViewItemComponent
-        };
-        this.items$ = this.values$.pipe(
-        // NOTE: This causes the "value" to be a PickableValueFieldDisplayValue<T>, which means we emit PickableValueFieldDisplayValue<T> to DbxPickableListFieldComponent.
-        map((x) => addConfigToValueListItems(this.config, x)), shareReplay(1));
-    }
-    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: `
+    items$ = this.values$.pipe(
+    // NOTE: This causes the "value" to be a PickableValueFieldDisplayValue<T>, which means we emit PickableValueFieldDisplayValue<T> to DbxPickableListFieldComponent.
+    map((x) => addConfigToValueListItems(this.config, x)), shareReplay(1));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxPickableListFieldItemListViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵ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.DbxSelectionValueListViewContentComponent, selector: "dbx-selection-list-view-content", inputs: ["multiple", "selectionMode"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] }); }
+  `, isInline: true, dependencies: [{ kind: "component", type: i5.DbxSelectionValueListViewContentComponent, 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,
@@ -1940,7 +1902,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
   `,
                     providers: provideDbxListView(DbxPickableListFieldItemListViewComponent)
                 }]
-        }], ctorParameters: function () { return [{ type: DbxPickableListFieldComponent }]; } });
+        }] });
 class DbxPickableListFieldItemListViewItemComponent extends AbstractDbxValueListViewItemComponent {
     get label() {
         return this.itemValue.label;
@@ -1951,14 +1913,14 @@ class DbxPickableListFieldItemListViewItemComponent extends AbstractDbxValueList
     get icon() {
         return this.itemValue.icon;
     }
-    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: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxPickableListFieldItemListViewItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵ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"] }] }); }
+  `, 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,
@@ -1974,8 +1936,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
         }] });
 
 class DbxFormFormlyPickableFieldModule {
-    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,
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormFormlyPickableFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵ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,
@@ -1991,8 +1953,8 @@ class DbxFormFormlyPickableFieldModule {
             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,
+            DbxListLayoutModule, i1$1.FormlyModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormFormlyPickableFieldModule, imports: [CommonModule,
             DbxTextModule,
             DbxLoadingModule,
             DbxButtonModule,
@@ -2014,7 +1976,7 @@ class DbxFormFormlyPickableFieldModule {
                     { 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,
@@ -2109,35 +2071,33 @@ function pickableValueFieldValuesConfigForStaticLabeledValues(input) {
 
 const DBX_SEARCHABLE_FIELD_COMPONENT_DATA_TOKEN = new InjectionToken('DbxSearchableField');
 class DbxSearchableFieldAutocompleteItemComponent {
-    constructor() {
-        this._displayValue = new BehaviorSubject(undefined);
-        this.displayValue$ = this._displayValue.pipe(filterMaybe(), shareReplay(1));
-        this.config$ = this.displayValue$.pipe(map((x) => {
-            const config = {
-                ...x.display,
-                providers: mergeArraysIntoArray([
-                    {
-                        provide: DBX_SEARCHABLE_FIELD_COMPONENT_DATA_TOKEN,
-                        useValue: x
-                    }
-                ], x.display.providers)
-            };
-            return config;
-        }));
-        this.anchor$ = this.displayValue$.pipe(map((x) => x.anchor));
-    }
+    _displayValue = new BehaviorSubject(undefined);
+    displayValue$ = this._displayValue.pipe(filterMaybe(), shareReplay(1));
+    config$ = this.displayValue$.pipe(map((x) => {
+        const config = {
+            ...x.display,
+            providers: mergeArraysIntoArray([
+                {
+                    provide: DBX_SEARCHABLE_FIELD_COMPONENT_DATA_TOKEN,
+                    useValue: x
+                }
+            ], x.display.providers)
+        };
+        return config;
+    }));
+    anchor$ = this.displayValue$.pipe(map((x) => x.anchor));
     set displayValue(displayValue) {
         this._displayValue.next(displayValue);
     }
     ngOnDestroy() {
         this._displayValue.complete();
     }
-    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: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxSearchableFieldAutocompleteItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵ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" }] }); }
+  `, isInline: true, dependencies: [{ kind: "component", type: i5.DbxAnchorComponent, selector: "dbx-anchor, [dbx-anchor]", inputs: ["block"] }, { kind: "component", type: i6.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,
@@ -2154,30 +2114,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }] } });
 // MARK: Default
 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 }); }
+    displayValue = inject(DBX_SEARCHABLE_FIELD_COMPONENT_DATA_TOKEN);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AbstractDbxSearchableFieldDisplayDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: AbstractDbxSearchableFieldDisplayDirective, ngImport: i0 });
 }
 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,
-                    args: [DBX_SEARCHABLE_FIELD_COMPONENT_DATA_TOKEN]
-                }] }]; } });
+        }] });
 class DbxDefaultSearchableFieldDisplayComponent extends AbstractDbxSearchableFieldDisplayDirective {
     get icon() {
         return this.displayValue.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: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxDefaultSearchableFieldDisplayComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵ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"] }] }); }
+  `, 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,
@@ -2199,6 +2154,33 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  * Display values are cached for performance.
  */
 class AbstractDbxSearchableValueFieldDirective extends FieldType$1 {
+    cdRef = inject(ChangeDetectorRef);
+    /**
+     * Whether or not to allow syncing to
+     */
+    allowSyncValueToInput = false;
+    /**
+     * Optional override set by the parent class for picking a default display for this directive.
+     */
+    defaultDisplay;
+    textInput;
+    inputCtrl = new FormControl('');
+    _formControlObs = new BehaviorSubject(undefined);
+    formControl$ = this._formControlObs.pipe(filterMaybe());
+    _clearDisplayHashMapSub = new SubscriptionObject();
+    _displayHashMap = new BehaviorSubject(new Map());
+    inputValue$ = this.inputCtrl.valueChanges.pipe(startWith(this.inputCtrl.value), map((x) => x || ''));
+    inputValueString$ = this.inputValue$.pipe(debounceTime(200), distinctUntilChanged());
+    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));
+    _singleValueSyncSubscription = new SubscriptionObject();
+    searchContext = new LoadingStateContextInstance({ obs: this.searchResultsState$, showLoadingOnNoValue: false });
+    searchResults$ = this.searchResultsState$.pipe(map((x) => x?.value ?? []));
+    _formControlValue$ = this.formControl$.pipe(switchMap((control) => control.valueChanges.pipe(startWith(control.value), shareReplay(1))));
+    values$ = this._formControlValue$.pipe(map(convertMaybeToArray), shareReplay(1));
+    displayValuesState$ = this.values$.pipe(distinctUntilChanged(), switchMap((values) => this.loadDisplayValuesForValues(values)), shareReplay(1));
+    displayValues$ = this.displayValuesState$.pipe(map((x) => x?.value ?? []));
     get name() {
         return this.field.name ?? camelCase(this.label ?? this.key);
     }
@@ -2311,31 +2293,6 @@ 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) {
@@ -2451,23 +2408,20 @@ 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 }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AbstractDbxSearchableValueFieldDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵ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 });
 }
 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: [{
+        }], propDecorators: { textInput: [{
                 type: ViewChild,
                 args: ['textInput']
             }] } });
 
 class DbxSearchableChipFieldComponent extends AbstractDbxSearchableValueFieldDirective {
-    constructor() {
-        super(...arguments);
-        this._blur = new Subject();
-        this._blurSub = new SubscriptionObject();
-        this.separatorKeysCodes = [ENTER, COMMA];
-    }
+    _blur = new Subject();
+    _blurSub = new SubscriptionObject();
+    separatorKeysCodes = [ENTER, COMMA];
     selected(event) {
         this.addWithDisplayValue(event.option.value);
     }
@@ -2506,8 +2460,8 @@ 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" }] }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxSearchableChipFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵ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: i5.DbxLoadingComponent, selector: "dbx-loading", inputs: ["show", "text", "mode", "color", "diameter", "linear", "padding", "context", "loading", "error"] }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i4$3.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple", "hideSingleSelectionIndicator"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i4.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "directive", type: i4$3.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "directive", type: i6$2.MatChipAvatar, selector: "mat-chip-avatar, [matChipAvatar]" }, { kind: "component", type: i6$2.MatChipGrid, selector: "mat-chip-grid", inputs: ["tabIndex", "disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i6$2.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i6$2.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i6$2.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" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxSearchableChipFieldComponent, decorators: [{
             type: Component,
@@ -2584,14 +2538,10 @@ function searchableTextField(config) {
  * Display component for selecting a single item/value.
  */
 class DbxSearchableTextFieldComponent extends AbstractDbxSearchableValueFieldDirective {
-    constructor() {
-        super(...arguments);
-        this.allowSyncValueToInput = true;
-        this.selectedDisplayValue$ = this.displayValues$.pipe(map((x) => x[0]), shareReplay(1), tapDetectChanges(this.cdRef));
-        this.hasValue$ = this.selectedDisplayValue$.pipe(map((x) => Boolean(x)));
-        this.showSelectedDisplayValue$ = this.selectedDisplayValue$.pipe(map((x) => this.showSelectedValue && Boolean(x)), distinctUntilChanged(), shareReplay(1), tapDetectChanges(this.cdRef));
-        this._clearInputSub = new SubscriptionObject();
-    }
+    allowSyncValueToInput = true;
+    selectedDisplayValue$ = this.displayValues$.pipe(map((x) => x[0]), shareReplay(1), tapDetectChanges(this.cdRef));
+    hasValue$ = this.selectedDisplayValue$.pipe(map((x) => Boolean(x)));
+    showSelectedDisplayValue$ = this.selectedDisplayValue$.pipe(map((x) => this.showSelectedValue && Boolean(x)), distinctUntilChanged(), shareReplay(1), tapDetectChanges(this.cdRef));
     get searchableField() {
         return this.props;
     }
@@ -2601,6 +2551,7 @@ class DbxSearchableTextFieldComponent extends AbstractDbxSearchableValueFieldDir
     get multiSelect() {
         return false;
     }
+    _clearInputSub = new SubscriptionObject();
     ngOnInit() {
         super.ngOnInit();
         this._clearInputSub.subscription = this.inputValue$.pipe(skipWhile((x) => !x)).subscribe((x) => {
@@ -2616,8 +2567,8 @@ 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" }] }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxSearchableTextFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵ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: i5.DbxLoadingComponent, selector: "dbx-loading", inputs: ["show", "text", "mode", "color", "diameter", "linear", "padding", "context", "loading", "error"] }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i4$3.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple", "hideSingleSelectionIndicator"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i4.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "directive", type: i4$3.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" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxSearchableTextFieldComponent, decorators: [{
             type: Component,
@@ -2625,8 +2576,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
         }] });
 
 class DbxFormFormlySearchableFieldModule {
-    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,
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormFormlySearchableFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵ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,
@@ -2641,8 +2592,8 @@ class DbxFormFormlySearchableFieldModule {
             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,
+            DbxInjectionComponentModule, i1$1.FormlyModule], exports: [DbxSearchableChipFieldComponent, DbxSearchableTextFieldComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormFormlySearchableFieldModule, imports: [CommonModule,
             DbxTextModule,
             DbxLoadingModule,
             DbxButtonModule,
@@ -2663,7 +2614,7 @@ class DbxFormFormlySearchableFieldModule {
                     { 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,
@@ -2714,158 +2665,136 @@ function chipTextField(config) {
  * Component that displays a select view (multi or not)
  */
 class DbxFormSourceSelectFieldComponent extends FieldType$2 {
-    constructor() {
-        super(...arguments);
-        this._cacheMetaSub = new SubscriptionObject();
-        this._clearDisplayHashMapSub = new SubscriptionObject();
-        this._valueMetaHashMap = new BehaviorSubject(new Map());
-        this._displayHashMap = new BehaviorSubject(new Map());
-        this._formControlObs = new BehaviorSubject(undefined);
-        this._fromOpenSource = new BehaviorSubject({ values: [], valuesSet: new Set() });
-        this._loadSources = new BehaviorSubject(undefined);
-        this.formControl$ = this._formControlObs.pipe(filterMaybe());
-        this.currentFormControlValue$ = this.formControl$.pipe(switchMap((control) => control.valueChanges.pipe(startWith(control.value))), shareReplay(1));
-        this.values$ = this.currentFormControlValue$.pipe(map(convertMaybeToArray), shareReplay(1));
-        this.allValuesEverSelected$ = this.values$.pipe(scan((acc, values) => {
-            let result = acc;
-            if (!setContainsAllValues(acc, values)) {
-                result = addToSetCopy(acc, values);
+    _cacheMetaSub = new SubscriptionObject();
+    _clearDisplayHashMapSub = new SubscriptionObject();
+    _valueMetaHashMap = new BehaviorSubject(new Map());
+    _displayHashMap = new BehaviorSubject(new Map());
+    _formControlObs = new BehaviorSubject(undefined);
+    _fromOpenSource = new BehaviorSubject({ values: [], valuesSet: new Set() });
+    _loadSources = new BehaviorSubject(undefined);
+    buttonElement;
+    formControl$ = this._formControlObs.pipe(filterMaybe());
+    currentFormControlValue$ = this.formControl$.pipe(switchMap((control) => control.valueChanges.pipe(startWith(control.value))), shareReplay(1));
+    values$ = this.currentFormControlValue$.pipe(map(convertMaybeToArray), shareReplay(1));
+    allValuesEverSelected$ = this.values$.pipe(scan((acc, values) => {
+        let result = acc;
+        if (!setContainsAllValues(acc, values)) {
+            result = addToSetCopy(acc, values);
+        }
+        return result;
+    }, new Set()), distinctUntilChanged(), map((x) => Array.from(x)), shareReplay(1));
+    sourceSelectValuesFromValuesState$ = this.allValuesEverSelected$.pipe(distinctUntilChanged(), switchMap((values) => this.loadSourceSelectValueForValues(values)), shareReplay(1));
+    loadSources$ = this._loadSources.pipe(filterMaybe(), switchMap((loadSource) => {
+        const { valueReader } = this;
+        return loadSource.pipe(switchMap((sources) => {
+            const sourceObs = sources.map((x) => x.meta.pipe(map((metaState) => ({ ...metaState, label: x.label }))));
+            if (sourceObs.length === 0) {
+                return of(successResult([]));
             }
-            return result;
-        }, new Set()), distinctUntilChanged(), map((x) => Array.from(x)), shareReplay(1));
-        this.sourceSelectValuesFromValuesState$ = this.allValuesEverSelected$.pipe(distinctUntilChanged(), switchMap((values) => this.loadSourceSelectValueForValues(values)), shareReplay(1));
-        this.loadSources$ = this._loadSources.pipe(filterMaybe(), switchMap((loadSource) => {
-            const { valueReader } = this;
-            return loadSource.pipe(switchMap((sources) => {
-                const sourceObs = sources.map((x) => x.meta.pipe(map((metaState) => ({ ...metaState, label: x.label }))));
-                if (sourceObs.length === 0) {
-                    return of(successResult([]));
-                }
-                else {
-                    return combineLatest(sourceObs).pipe(map((x) => {
-                        const statesWithValues = x.filter((y) => loadingStateHasValue(y));
-                        const loading = x.findIndex(loadingStateIsLoading) !== -1;
-                        const value = statesWithValues.map((y) => {
-                            const group = {
-                                label: y.label,
-                                values: y.value.map((meta) => ({ meta, value: valueReader(meta) }))
-                            };
-                            return group;
-                        });
-                        return {
-                            loading,
-                            value
+            else {
+                return combineLatest(sourceObs).pipe(map((x) => {
+                    const statesWithValues = x.filter((y) => isLoadingStateWithDefinedValue(y));
+                    const loading = x.findIndex(isLoadingStateLoading) !== -1;
+                    const value = statesWithValues.map((y) => {
+                        const group = {
+                            label: y.label,
+                            values: y.value.map((meta) => ({ meta, value: valueReader(meta) }))
                         };
-                    }));
-                }
-            }));
+                        return group;
+                    });
+                    return {
+                        loading,
+                        value
+                    };
+                }));
+            }
         }));
-        this.fromOpenSource$ = this._fromOpenSource.pipe(distinctUntilChanged((a, b) => setsAreEquivalent(a.valuesSet, b.valuesSet)), map((x) => {
-            const group = {
+    }));
+    fromOpenSource$ = this._fromOpenSource.pipe(distinctUntilChanged((a, b) => setsAreEquivalent(a.valuesSet, b.valuesSet)), map((x) => {
+        const group = {
+            label: '',
+            values: x.values
+        };
+        return group;
+    }), shareReplay(1));
+    valueGroupsFromSourcesState$ = combineLatest([this.fromOpenSource$, this.loadSources$]).pipe(map(([fromOpenSourceGroup, loadSources]) => {
+        const loadSourcesValue = loadSources.value ?? [];
+        const value = [fromOpenSourceGroup, ...loadSourcesValue];
+        const result = {
+            loading: loadSources.loading,
+            value
+        };
+        return result;
+    }), shareReplay(1));
+    allValueGroupsState$ = this.sourceSelectValuesFromValuesState$.pipe(switchMap((sourceSelectValuesFromValues) => {
+        if (isLoadingStateWithDefinedValue(sourceSelectValuesFromValues)) {
+            const valuesFromValuesGroup = {
                 label: '',
-                values: x.values
+                values: sourceSelectValuesFromValues.value
             };
-            return group;
-        }), shareReplay(1));
-        this.valueGroupsFromSourcesState$ = combineLatest([this.fromOpenSource$, this.loadSources$]).pipe(map(([fromOpenSourceGroup, loadSources]) => {
-            const loadSourcesValue = loadSources.value ?? [];
-            const value = [fromOpenSourceGroup, ...loadSourcesValue];
-            const result = {
-                loading: loadSources.loading,
-                value
-            };
-            return result;
-        }), shareReplay(1));
-        this.allValueGroupsState$ = this.sourceSelectValuesFromValuesState$.pipe(switchMap((sourceSelectValuesFromValues) => {
-            if (loadingStateHasValue(sourceSelectValuesFromValues)) {
-                const valuesFromValuesGroup = {
-                    label: '',
-                    values: sourceSelectValuesFromValues.value
+            return this.valueGroupsFromSourcesState$.pipe(map((sourcesState) => {
+                const allGroups = [valuesFromValuesGroup, ...sourcesState.value];
+                const result = {
+                    loading: sourceSelectValuesFromValues.loading || sourcesState.loading,
+                    value: allGroups
                 };
-                return this.valueGroupsFromSourcesState$.pipe(map((sourcesState) => {
-                    const allGroups = [valuesFromValuesGroup, ...sourcesState.value];
-                    const result = {
-                        loading: sourceSelectValuesFromValues.loading || sourcesState.loading,
-                        value: allGroups
-                    };
-                    return result;
-                }));
-            }
-            else {
-                return of(beginLoading({}));
-            }
-        }), shareReplay(1));
-        this.allOptionGroupsState$ = this.allValueGroupsState$.pipe(mapLoadingStateValueWithOperator(switchMap((groups) => {
-            const allGroupsReducedByLabel = makeValuesGroupMap(groups, (x) => x.label);
-            const valuesEncountered = new Set();
-            const allUniqueValues = [];
-            const simplifiedValuesGroups = [];
-            // sort to put the blank label first
-            Array.from(allGroupsReducedByLabel.entries())
-                .sort(sortByStringFunction((x) => x[0]))
-                .forEach(([label, groups]) => {
-                const values = [];
-                groups.forEach((group) => {
-                    group.values.forEach((selectValue) => {
-                        if (!valuesEncountered.has(selectValue.value)) {
-                            values.push(selectValue);
-                            allUniqueValues.push(selectValue);
-                            valuesEncountered.add(selectValue.value);
-                        }
-                    });
+                return result;
+            }));
+        }
+        else {
+            return of(beginLoading({}));
+        }
+    }), shareReplay(1));
+    allOptionGroupsState$ = this.allValueGroupsState$.pipe(mapLoadingStateValueWithOperator(switchMap((groups) => {
+        const allGroupsReducedByLabel = makeValuesGroupMap(groups, (x) => x.label);
+        const valuesEncountered = new Set();
+        const allUniqueValues = [];
+        const simplifiedValuesGroups = [];
+        // sort to put the blank label first
+        Array.from(allGroupsReducedByLabel.entries())
+            .sort(sortByStringFunction((x) => x[0]))
+            .forEach(([label, groups]) => {
+            const values = [];
+            groups.forEach((group) => {
+                group.values.forEach((selectValue) => {
+                    if (!valuesEncountered.has(selectValue.value)) {
+                        values.push(selectValue);
+                        allUniqueValues.push(selectValue);
+                        valuesEncountered.add(selectValue.value);
+                    }
                 });
-                if (values.length > 0) {
-                    simplifiedValuesGroups.push({
-                        label,
-                        values
-                    });
-                }
             });
-            const obs = this.getDisplayValuesForSelectValues(allUniqueValues).pipe(map((displayValues) => {
-                const displayValuesMap = new Map(displayValues.map((x) => [x.value, x]));
-                const displayGroups = simplifiedValuesGroups.map((valueGroup) => {
-                    const values = filterMaybeValues(valueGroup.values.map((x) => displayValuesMap.get(x.value)));
-                    return {
-                        label: valueGroup.label,
-                        values
-                    };
+            if (values.length > 0) {
+                simplifiedValuesGroups.push({
+                    label,
+                    values
                 });
-                return displayGroups;
-            }));
-            return obs;
-        })), shareReplay(1));
-        this.allOptionGroups$ = this.allOptionGroupsState$.pipe(valueFromLoadingState(), shareReplay(1));
-        this.options$ = this.allOptionGroups$.pipe(map((x) => {
-            const { included: groupedValues, excluded: nonGroupedGroup } = separateValues(x, (y) => Boolean(y.label));
-            const result = {
-                nonGroupedValues: nonGroupedGroup[0]?.values ?? [],
-                groupedValues
-            };
-            return result;
-        }), shareReplay(1));
-        this.nonGroupedValues$ = this.options$.pipe(map((x) => x.nonGroupedValues));
-        this.groupedOptions$ = this.options$.pipe(map((x) => x.groupedValues));
-        this.context = loadingStateContext({ obs: this.allOptionGroupsState$ });
-        this.handleSelectOptions = (_, context) => {
-            const { openSource } = this;
-            if (openSource) {
-                const origin = this.buttonElement.nativeElement;
-                const sourceObs = openSource({ origin });
-                context.startWorkingWithObservable(sourceObs.pipe(first(), tap((result) => {
-                    const valuesToAdd = mergeArrays([result.select, result.options]);
-                    if (valuesToAdd.length) {
-                        this.addToOpenSourceMap(valuesToAdd);
-                    }
-                    if (result.select) {
-                        this.addToCurrentValue(result.select.map((x) => this.valueReader(x)));
-                    }
-                })));
-            }
-            else {
-                context.reject();
             }
+        });
+        const obs = this.getDisplayValuesForSelectValues(allUniqueValues).pipe(map((displayValues) => {
+            const displayValuesMap = new Map(displayValues.map((x) => [x.value, x]));
+            const displayGroups = simplifiedValuesGroups.map((valueGroup) => {
+                const values = filterMaybeValues(valueGroup.values.map((x) => displayValuesMap.get(x.value)));
+                return {
+                    label: valueGroup.label,
+                    values
+                };
+            });
+            return displayGroups;
+        }));
+        return obs;
+    })), shareReplay(1));
+    allOptionGroups$ = this.allOptionGroupsState$.pipe(valueFromLoadingState(), shareReplay(1));
+    options$ = this.allOptionGroups$.pipe(map((x) => {
+        const { included: groupedValues, excluded: nonGroupedGroup } = separateValues(x, (y) => Boolean(y.label));
+        const result = {
+            nonGroupedValues: nonGroupedGroup[0]?.values ?? [],
+            groupedValues
         };
-    }
+        return result;
+    }), shareReplay(1));
+    nonGroupedValues$ = this.options$.pipe(map((x) => x.nonGroupedValues));
+    groupedOptions$ = this.options$.pipe(map((x) => x.groupedValues));
     get sourceSelectField() {
         return this.props;
     }
@@ -2958,6 +2887,7 @@ class DbxFormSourceSelectFieldComponent extends FieldType$2 {
             return obs;
         }));
     }
+    context = loadingStateContext({ obs: this.allOptionGroupsState$ });
     ngOnInit() {
         const { loadSources } = this;
         this._loadSources.next(loadSources?.() || of([]));
@@ -2980,6 +2910,25 @@ class DbxFormSourceSelectFieldComponent extends FieldType$2 {
         this._loadSources.complete();
         this.context.destroy();
     }
+    handleSelectOptions = (_, context) => {
+        const { openSource } = this;
+        if (openSource) {
+            const origin = this.buttonElement.nativeElement;
+            const sourceObs = openSource({ origin });
+            context.startWorkingWithObservable(sourceObs.pipe(first(), tap((result) => {
+                const valuesToAdd = mergeArrays([result.select, result.options]);
+                if (valuesToAdd.length) {
+                    this.addToOpenSourceMap(valuesToAdd);
+                }
+                if (result.select) {
+                    this.addToCurrentValue(result.select.map((x) => this.valueReader(x)));
+                }
+            })));
+        }
+        else {
+            context.reject();
+        }
+    };
     addToOpenSourceMap(input) {
         const { valueReader } = this;
         const { values: meta, valuesSet: initialValues } = this._fromOpenSource.value;
@@ -3007,8 +2956,8 @@ 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$2.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", "basic", "raised", "stroked", "flat", "iconOnly", "color", "spinnerColor", "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" }] }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormSourceSelectFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵ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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "component", type: i3.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "panelWidth", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }, { kind: "component", type: i4.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i4.MatOptgroup, selector: "mat-optgroup", inputs: ["disabled"], exportAs: ["matOptgroup"] }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i5.DbxLoadingComponent, selector: "dbx-loading", inputs: ["show", "text", "mode", "color", "diameter", "linear", "padding", "context", "loading", "error"] }, { kind: "directive", type: i6.DbxActionButtonDirective, selector: "[dbxActionButton]" }, { kind: "component", type: i5.DbxButtonComponent, selector: "dbx-button", inputs: ["type", "basic", "raised", "stroked", "flat", "iconOnly", "color", "spinnerColor", "customButtonColor", "customTextColor", "customSpinnerColor"] }, { kind: "directive", type: i5.DbxButtonSpacerDirective, selector: "dbx-button-spacer,[dbxButtonSpacer]" }, { kind: "directive", type: i6.DbxActionDirective, selector: "dbx-action,[dbxAction],dbx-action-context,[dbxActionContext]", exportAs: ["action", "dbxAction"] }, { kind: "directive", type: i6.DbxActionHandlerDirective, selector: "[dbxActionHandler]", inputs: ["dbxActionHandler"] }, { kind: "directive", type: i6.DbxActionValueDirective, selector: "[dbxActionValue]", inputs: ["dbxActionValue"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormSourceSelectFieldComponent, decorators: [{
             type: Component,
@@ -3032,8 +2981,8 @@ function sourceSelectField(config) {
 }
 
 class DbxFormFormlySourceSelectModule {
-    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,
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormFormlySourceSelectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: DbxFormFormlySourceSelectModule, declarations: [DbxFormSourceSelectFieldComponent], imports: [CommonModule,
             FormsModule,
             MatInputModule,
             MatDividerModule,
@@ -3050,8 +2999,8 @@ class DbxFormFormlySourceSelectModule {
             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,
+            FlexLayoutModule, i1$1.FormlyModule], exports: [DbxFormSourceSelectFieldComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormFormlySourceSelectModule, imports: [CommonModule,
             FormsModule,
             MatInputModule,
             MatDividerModule,
@@ -3071,7 +3020,7 @@ class DbxFormFormlySourceSelectModule {
             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,
@@ -3140,9 +3089,9 @@ 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] }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormFormlySelectionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: DbxFormFormlySelectionModule, imports: [CommonModule], exports: [DbxFormFormlyDbxListFieldModule, DbxFormFormlyPickableFieldModule, DbxFormFormlySearchableFieldModule, DbxFormFormlySourceSelectModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormFormlySelectionModule, imports: [CommonModule, DbxFormFormlyDbxListFieldModule, DbxFormFormlyPickableFieldModule, DbxFormFormlySearchableFieldModule, DbxFormFormlySourceSelectModule] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormFormlySelectionModule, decorators: [{
             type: NgModule,
@@ -3154,14 +3103,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
         }] });
 
 class DbxTextEditorFieldComponent extends FieldType$1 {
-    constructor(compact) {
-        super();
-        this.compact = compact;
-        this._sub = new SubscriptionObject();
-        this.compactClass$ = mapCompactModeObs(this.compact?.mode$, {
-            compact: 'dbx-texteditor-field-compact'
-        });
-    }
+    _compactContextStore = inject(CompactContextStore, { optional: true });
+    _editor;
+    _sub = new SubscriptionObject();
+    compactClass$ = mapCompactModeObs(this._compactContextStore?.mode$, {
+        compact: 'dbx-texteditor-field-compact'
+    });
     get formGroupName() {
         return this.field.key;
     }
@@ -3195,50 +3142,48 @@ class DbxTextEditorFieldComponent extends FieldType$1 {
         }
         this._sub.destroy();
     }
-    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: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxTextEditorFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵ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>
+      <span class="dbx-label" *ngIf="label">{{ label }}</span>
       <div class="dbx-texteditor-field-input">
         <ngx-editor [editor]="editor" outputFormat="html" [placeholder]="placeholder" [formControlName]="formGroupName"></ngx-editor>
       </div>
       <div class="dbx-texteditor-field-menu">
         <ngx-editor-menu [editor]="editor"></ngx-editor-menu>
       </div>
-      <dbx-form-description *ngIf="description">{{ description }}</dbx-form-description>
+      <div class="dbx-form-description" *ngIf="description">{{ description }}</div>
     </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: "directive", type: i2$1.DbxLabelComponent, selector: "dbx-label" }, { kind: "directive", 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" }] }); }
+  `, 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: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i3$1.NgxEditorComponent, selector: "ngx-editor", inputs: ["editor", "outputFormat", "placeholder"], outputs: ["focusOut", "focusIn"] }, { kind: "component", type: i3$1.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: `
     <div class="dbx-texteditor-field" [ngClass]="(compactClass$ | async) ?? ''" [formGroup]="formGroup">
-      <dbx-label *ngIf="label">{{ label }}</dbx-label>
+      <span class="dbx-label" *ngIf="label">{{ label }}</span>
       <div class="dbx-texteditor-field-input">
         <ngx-editor [editor]="editor" outputFormat="html" [placeholder]="placeholder" [formControlName]="formGroupName"></ngx-editor>
       </div>
       <div class="dbx-texteditor-field-menu">
         <ngx-editor-menu [editor]="editor"></ngx-editor-menu>
       </div>
-      <dbx-form-description *ngIf="description">{{ description }}</dbx-form-description>
+      <div class="dbx-form-description" *ngIf="description">{{ description }}</div>
     </div>
   `
                 }]
-        }], ctorParameters: function () { return [{ type: i2$1.CompactContextStore, decorators: [{
-                    type: Optional
-                }] }]; } });
+        }] });
 
 class DbxFormFormlyTextEditorFieldModule {
-    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,
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormFormlyTextEditorFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵ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,
+            MatInputModule, i1$1.FormlyModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormFormlyTextEditorFieldModule, imports: [CommonModule,
             DbxTextModule,
             FormsModule,
             ReactiveFormsModule,
@@ -3247,7 +3192,7 @@ class DbxFormFormlyTextEditorFieldModule {
             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,
@@ -3290,27 +3235,21 @@ function textEditorField(config) {
 }
 
 class DbxFormRepeatArrayTypeComponent extends FieldArrayType {
-    constructor() {
-        super(...arguments);
-        this._labelForField = cachedGetter(() => {
-            const input = this.repeatArrayField.labelForField;
-            if (typeof input === 'function') {
-                return input;
-            }
-            else {
-                return makeGetter(input ?? '');
-            }
-        });
-        this._allowRemove = cachedGetter(() => {
-            return asDecisionFunction(this.field.props.allowRemove, true);
-        });
-        this._allowDuplicate = cachedGetter(() => {
-            return asDecisionFunction(this.field.props.allowDuplicate || false, false);
-        });
-        this.trackByFunction = (i, x) => {
-            return x.key;
-        };
-    }
+    _labelForField = cachedGetter(() => {
+        const input = this.repeatArrayField.labelForField;
+        if (typeof input === 'function') {
+            return input;
+        }
+        else {
+            return makeGetter(input ?? '');
+        }
+    });
+    _allowRemove = cachedGetter(() => {
+        return asDecisionFunction(this.field.props.allowRemove, true);
+    });
+    _allowDuplicate = cachedGetter(() => {
+        return asDecisionFunction(this.field.props.allowDuplicate || false, false);
+    });
     get repeatArrayField() {
         return this.field.props;
     }
@@ -3375,6 +3314,9 @@ class DbxFormRepeatArrayTypeComponent extends FieldArrayType {
             return this.count < max;
         }
     }
+    trackByFunction = (i, x) => {
+        return x.key;
+    };
     /**
      * Moves the target index up one value.
      *
@@ -3425,8 +3367,8 @@ class DbxFormRepeatArrayTypeComponent extends FieldArrayType {
             fieldConfig
         });
     }
-    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: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormRepeatArrayTypeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵ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 -->
@@ -3454,7 +3396,7 @@ class DbxFormRepeatArrayTypeComponent extends FieldArrayType {
         </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: i7$1.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", "basic", "raised", "stroked", "flat", "iconOnly", "color", "spinnerColor", "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"] }] }); }
+  `, 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: i6$1.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$4.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$4.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$4.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "directive", type: i4$4.CdkDragPlaceholder, selector: "ng-template[cdkDragPlaceholder]", inputs: ["data"] }, { kind: "component", type: i5.DbxSubSectionComponent, selector: "dbx-subsection" }, { kind: "directive", type: i5.DbxBarDirective, selector: "dbx-bar,[dbxBar]", inputs: ["color"] }, { kind: "component", type: i5.DbxButtonComponent, selector: "dbx-button", inputs: ["type", "basic", "raised", "stroked", "flat", "iconOnly", "color", "spinnerColor", "customButtonColor", "customTextColor", "customSpinnerColor"] }, { kind: "directive", type: i5.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,
@@ -3492,8 +3434,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
         }] });
 
 class DbxFormFormlyArrayFieldModule {
-    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,
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormFormlyArrayFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: DbxFormFormlyArrayFieldModule, declarations: [DbxFormRepeatArrayTypeComponent], imports: [CommonModule,
             MatFormFieldModule,
             ReactiveFormsModule,
             MatDividerModule,
@@ -3502,8 +3444,8 @@ class DbxFormFormlyArrayFieldModule {
             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,
+            DbxButtonModule, i1$1.FormlyModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormFormlyArrayFieldModule, imports: [CommonModule,
             MatFormFieldModule,
             ReactiveFormsModule,
             MatDividerModule,
@@ -3515,7 +3457,7 @@ class DbxFormFormlyArrayFieldModule {
             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,
@@ -3567,9 +3509,9 @@ 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 }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormFormlyBooleanFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: DbxFormFormlyBooleanFieldModule });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormFormlyBooleanFieldModule });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormFormlyBooleanFieldModule, decorators: [{
             type: NgModule,
@@ -3656,31 +3598,23 @@ function dateTimePreset(config) {
 
 const DBX_DATE_TIME_FIELD_MENU_PRESETS_TOKEN = new InjectionToken('DbxDateTimeFieldMenuPresetsServicePresets');
 class DbxDateTimeFieldMenuPresetsService {
+    _configurations = new BehaviorSubject(inject(DBX_DATE_TIME_FIELD_MENU_PRESETS_TOKEN, { optional: true }) ?? []);
+    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' }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxDateTimeFieldMenuPresetsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxDateTimeFieldMenuPresetsService, providedIn: 'root' });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxDateTimeFieldMenuPresetsService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
-                    type: Inject,
-                    args: [DBX_DATE_TIME_FIELD_MENU_PRESETS_TOKEN]
-                }, {
-                    type: Optional
-                }] }]; } });
+        }] });
 
 var DbxDateTimeValueMode;
 (function (DbxDateTimeValueMode) {
@@ -3855,6 +3789,81 @@ const DBX_DATE_TIME_FIELD_DATE_NOT_IN_SCHEDULE_ERROR = 'dateTimeFieldDateNotInSc
  */
 const DBX_DATE_TIME_FIELD_TIME_NOT_IN_RANGE_ERROR = 'dateTimeFieldTimeNotInRange';
 class DbxDateTimeFieldComponent extends FieldType$1 {
+    cdRef = inject(ChangeDetectorRef);
+    dbxDateTimeFieldConfigService = inject(DbxDateTimeFieldMenuPresetsService);
+    _sub = new SubscriptionObject();
+    _valueSub = new SubscriptionObject();
+    _autoFillDateSync = new SubscriptionObject();
+    _config = new BehaviorSubject(undefined);
+    latestConfig$ = this._config.pipe(switchMapMaybeDefault(), distinctUntilChanged(), shareReplay(1));
+    _syncConfigObs = new BehaviorSubject(undefined);
+    _defaultTimezone = new BehaviorSubject(undefined);
+    _timeDate = new BehaviorSubject(undefined);
+    _presets = new BehaviorSubject(of([]));
+    _fullDayInputCtrl;
+    _fullDayControlObs = new BehaviorSubject(undefined);
+    fullDayControl$ = this._fullDayControlObs.pipe(filterMaybe());
+    _offset = new BehaviorSubject(0);
+    _formControlObs = new BehaviorSubject(undefined);
+    formControl$ = this._formControlObs.pipe(filterMaybe());
+    _cleared = new Subject();
+    _updateTime = new Subject();
+    _resyncTimeInputSub = new SubscriptionObject();
+    _resyncTimeInput = new Subject();
+    timeErrorStateMatcher = {
+        isErrorState: (control, form) => {
+            if (control) {
+                return (control.invalid && (control.dirty || control.touched)) || this.errorStateMatcher.isErrorState(this.formControl, form);
+            }
+            else {
+                return false;
+            }
+        }
+    };
+    resyncTimeInput$ = this._resyncTimeInput.pipe(debounceTime(200), shareReplay(1));
+    _configUpdateTimeSync = new SubscriptionObject(this.latestConfig$.pipe(skip(1)).subscribe((x) => {
+        this._updateTime.next();
+    }));
+    timezone$ = this._defaultTimezone.pipe(switchMapMaybeDefault(), distinctUntilChanged()).pipe(map((defaultTimezone) => {
+        return defaultTimezone ?? guessCurrentTimezone();
+    }), distinctUntilChanged(), shareReplay(1));
+    timezoneInstance$ = this.timezone$.pipe(map((timezone) => (timezone ? dateTimezoneUtcNormal({ timezone }) : undefined)), shareReplay(1));
+    timeDate$ = this._timeDate.pipe(switchMapMaybeDefault(), switchMap((x) => {
+        let obs;
+        if (x) {
+            // if the string is not a date string, then treat it as a path
+            if ((typeof x === 'string' && !isISO8601DayStringStart(x)) || isDbxDateTimeFieldTimeDateConfig(x)) {
+                const { path, mapValue } = typeof x === 'string' ? { path: x } : x;
+                obs =
+                    streamValueFromControl(this.form, path)?.pipe(map(mapValue ?? mapIdentityFunction()), map((x) => (x ? toJsDayDate(x) : undefined))) ?? of(undefined);
+            }
+            else {
+                obs = of(toJsDayDate(x));
+            }
+        }
+        else {
+            obs = of(undefined);
+        }
+        return obs;
+    }), distinctUntilChanged(isSameDateDay), shareReplay(1));
+    valueInSystemTimezone$ = this.formControl$.pipe(map((control) => control.valueChanges.pipe(startWith(control.value), shareReplay(1))), combineLatestWith(this.timezoneInstance$), switchMap(([x, timezoneInstance]) => {
+        return x.pipe(map(dbxDateTimeInputValueParseFactory(this.valueMode, timezoneInstance)));
+    }), throttleTime(20, undefined, { leading: true, trailing: true }), // throttle incoming values and timezone changes
+    distinctUntilChanged(isSameDateHoursAndMinutes), shareReplay(1));
+    refreshInteral$ = interval(10 * 1000);
+    /**
+     * Used to trigger/display visual updates (specifically on timeDistance, etc.).
+     */
+    displayValue$ = this.refreshInteral$.pipe(
+    // every 10 seconds, refresh w/interval
+    startWith(0), map(() => new Date().getMinutes()), distinctUntilChanged(), tap(() => this.cdRef.markForCheck()), switchMap(() => this.valueInSystemTimezone$), shareReplay(1));
+    timeString$ = this.valueInSystemTimezone$.pipe(map((x) => (x ? toLocalReadableTimeString(x) : '')), distinctUntilChanged(), shareReplay(1));
+    dateInputCtrl = new FormControl(null, {
+        validators: []
+    });
+    timeInputCtrl = new FormControl(null, {
+        validators: [Validators.pattern(/^(now)$|^([0-9]|(0[0-9])|(1[0-9])|(2[0-3]))(:)?([0-5][0-9])?(\s)?([apAP][Mm])?(\\s)*$/)]
+    });
     get dateLabel() {
         return this.props.dateLabel ?? 'Date';
     }
@@ -3936,242 +3945,165 @@ class DbxDateTimeFieldComponent extends FieldType$1 {
     get minuteStep() {
         return this.field.props.minuteStep ?? this.field.props.step ?? 5;
     }
-    constructor(cdRef, dbxDateTimeFieldConfigService) {
-        super();
-        this.cdRef = cdRef;
-        this.dbxDateTimeFieldConfigService = dbxDateTimeFieldConfigService;
-        this._sub = new SubscriptionObject();
-        this._valueSub = new SubscriptionObject();
-        this._autoFillDateSync = new SubscriptionObject();
-        this._config = new BehaviorSubject(undefined);
-        this.latestConfig$ = this._config.pipe(switchMapMaybeDefault(), distinctUntilChanged(), shareReplay(1));
-        this._syncConfigObs = new BehaviorSubject(undefined);
-        this._defaultTimezone = new BehaviorSubject(undefined);
-        this._timeDate = new BehaviorSubject(undefined);
-        this._presets = new BehaviorSubject(of([]));
-        this._fullDayControlObs = new BehaviorSubject(undefined);
-        this.fullDayControl$ = this._fullDayControlObs.pipe(filterMaybe());
-        this._offset = new BehaviorSubject(0);
-        this._formControlObs = new BehaviorSubject(undefined);
-        this.formControl$ = this._formControlObs.pipe(filterMaybe());
-        this._cleared = new Subject();
-        this._updateTime = new Subject();
-        this._resyncTimeInputSub = new SubscriptionObject();
-        this._resyncTimeInput = new Subject();
-        this.timeErrorStateMatcher = {
-            isErrorState: (control, form) => {
+    fullDay$ = this.fullDayControl$.pipe(switchMap((control) => control.valueChanges.pipe(startWith(control.value))), distinctUntilChanged(), shareReplay(1));
+    showTimeInput$ = this.fullDay$.pipe(map((x) => !x && this.timeMode !== DbxDateTimeFieldTimeMode.NONE));
+    showAddTime$ = this.showTimeInput$.pipe(map((x) => !x && this.timeMode === DbxDateTimeFieldTimeMode.OPTIONAL), shareReplay(1));
+    currentDate$ = this.dateInputCtrl.valueChanges.pipe(startWith(this.dateInputCtrl.value), shareReplay(1));
+    date$ = this.currentDate$.pipe(filterMaybe(), shareReplay(1));
+    timezoneAbbreviation$ = combineLatest([this.currentDate$, this.timezone$, this.timeDate$]).pipe(map(([date, timezone, timeDate]) => getTimezoneAbbreviation(timezone, timeDate ?? date ?? new Date())), distinctUntilChanged(), shareReplay(1));
+    dateValue$ = merge(this.date$, this.valueInSystemTimezone$.pipe(skipFirstMaybe())).pipe(map((x) => (x ? startOfDay(x) : null)), distinctUntilChanged(isSameDateDay), shareReplay(1));
+    timeInput$ = this._updateTime.pipe(debounceTime(5), map(() => this.timeInputCtrl.value || ''), distinctUntilChanged());
+    syncConfigObs$ = this._syncConfigObs.pipe(switchMapMaybeDefault(), shareReplay(1));
+    parsedSyncConfigs$ = this.syncConfigObs$.pipe(map((x) => {
+        let parsed;
+        if (x) {
+            parsed = filterMaybeValues(asArray(x).map((y) => {
+                const control = this.form.get(y.syncWith);
                 if (control) {
-                    return (control.invalid && (control.dirty || control.touched)) || this.errorStateMatcher.isErrorState(this.formControl, form);
-                }
-                else {
-                    return false;
-                }
-            }
-        };
-        this.resyncTimeInput$ = this._resyncTimeInput.pipe(debounceTime(200), shareReplay(1));
-        this._configUpdateTimeSync = new SubscriptionObject(this.latestConfig$.pipe(skip(1)).subscribe((x) => {
-            this._updateTime.next();
-        }));
-        this.timezone$ = this._defaultTimezone.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.timeDate$ = this._timeDate.pipe(switchMapMaybeDefault(), switchMap((x) => {
-            let obs;
-            if (x) {
-                // if the string is not a date string, then treat it as a path
-                if ((typeof x === 'string' && !isISO8601DayStringStart(x)) || isDbxDateTimeFieldTimeDateConfig(x)) {
-                    const { path, mapValue } = typeof x === 'string' ? { path: x } : x;
-                    obs =
-                        streamValueFromControl(this.form, path)?.pipe(map(mapValue ?? mapIdentityFunction()), map((x) => (x ? toJsDayDate(x) : undefined))) ?? of(undefined);
+                    return {
+                        control,
+                        ...y
+                    };
                 }
                 else {
-                    obs = of(toJsDayDate(x));
+                    return undefined;
                 }
+            }));
+        }
+        else {
+            parsed = [];
+        }
+        return parsed;
+    }), shareReplay(1));
+    syncConfigBeforeValue$ = syncConfigValueObs(this.parsedSyncConfigs$, 'before');
+    syncConfigAfterValue$ = syncConfigValueObs(this.parsedSyncConfigs$, 'after');
+    isTimeCleared$ = combineLatest([this.currentDate$, this._timeDate.pipe(startWith(null))]).pipe(switchMap(([date, time]) => {
+        const isTimeCleared = Boolean(!date && !time);
+        return this._cleared.pipe(map(() => true), startWith(isTimeCleared));
+    }), distinctUntilChanged(), shareReplay(1));
+    rawDateTime$ = combineLatest([
+        this._config.pipe(first(), switchMap(() => (this.timeOnly ? of(null) : this.dateValue$))),
+        this.timeInput$.pipe(startWith(null)),
+        this.fullDay$,
+        this.timeDate$,
+        this.isTimeCleared$
+    ]).pipe(map(([date, timeString, fullDay, timeDate, isTimeCleared]) => {
+        let result;
+        if (!isTimeCleared) {
+            if (!date || this.timeOnly) {
+                date = timeDate ?? new Date(); // use the time date, or default to the current day
             }
-            else {
-                obs = of(undefined);
-            }
-            return obs;
-        }), distinctUntilChanged(isSameDateDay), 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(dbxDateTimeInputValueParseFactory(this.valueMode, timezoneInstance)));
-        }), throttleTime(20, undefined, { leading: true, trailing: true }), // throttle incoming values and timezone changes
-        distinctUntilChanged(isSameDateHoursAndMinutes), shareReplay(1));
-        this.refreshInteral$ = interval(10 * 1000);
-        /**
-         * Used to trigger/display visual updates (specifically on timeDistance, etc.).
-         */
-        this.displayValue$ = this.refreshInteral$.pipe(
-        // every 10 seconds, refresh w/interval
-        startWith(0), map(() => new Date().getMinutes()), distinctUntilChanged(), tap(() => this.cdRef.markForCheck()), switchMap(() => this.valueInSystemTimezone$), shareReplay(1));
-        this.timeString$ = this.valueInSystemTimezone$.pipe(map((x) => (x ? toLocalReadableTimeString(x) : '')), distinctUntilChanged(), shareReplay(1));
-        this.dateInputCtrl = new FormControl(null, {
-            validators: []
-        });
-        this.timeInputCtrl = new FormControl(null, {
-            validators: [Validators.pattern(/^(now)$|^([0-9]|(0[0-9])|(1[0-9])|(2[0-3]))(:)?([0-5][0-9])?(\s)?([apAP][Mm])?(\\s)*$/)]
-        });
-        this.fullDay$ = this.fullDayControl$.pipe(switchMap((control) => control.valueChanges.pipe(startWith(control.value))), distinctUntilChanged(), shareReplay(1));
-        this.showTimeInput$ = this.fullDay$.pipe(map((x) => !x && this.timeMode !== DbxDateTimeFieldTimeMode.NONE));
-        this.showAddTime$ = this.showTimeInput$.pipe(map((x) => !x && this.timeMode === DbxDateTimeFieldTimeMode.OPTIONAL), shareReplay(1));
-        this.currentDate$ = this.dateInputCtrl.valueChanges.pipe(startWith(this.dateInputCtrl.value), shareReplay(1));
-        this.date$ = this.currentDate$.pipe(filterMaybe(), shareReplay(1));
-        this.timezoneAbbreviation$ = combineLatest([this.currentDate$, this.timezone$, this.timeDate$]).pipe(map(([date, timezone, timeDate]) => getTimezoneAbbreviation(timezone, timeDate ?? date ?? new Date())), distinctUntilChanged(), shareReplay(1));
-        this.dateValue$ = merge(this.date$, this.valueInSystemTimezone$.pipe(skipFirstMaybe())).pipe(map((x) => (x ? startOfDay(x) : null)), distinctUntilChanged(isSameDateDay), shareReplay(1));
-        this.timeInput$ = this._updateTime.pipe(debounceTime(5), map(() => this.timeInputCtrl.value || ''), distinctUntilChanged());
-        this.syncConfigObs$ = this._syncConfigObs.pipe(switchMapMaybeDefault(), shareReplay(1));
-        this.parsedSyncConfigs$ = this.syncConfigObs$.pipe(map((x) => {
-            let parsed;
-            if (x) {
-                parsed = filterMaybeValues(asArray(x).map((y) => {
-                    const control = this.form.get(y.syncWith);
-                    if (control) {
-                        return {
-                            control,
-                            ...y
-                        };
+            if (date) {
+                if (fullDay) {
+                    if (this.dateTimeField.fullDayInUTC) {
+                        result = utcDayForDate(date);
                     }
                     else {
-                        return undefined;
+                        result = startOfDay(date);
                     }
-                }));
-            }
-            else {
-                parsed = [];
-            }
-            return parsed;
-        }), shareReplay(1));
-        this.syncConfigBeforeValue$ = syncConfigValueObs(this.parsedSyncConfigs$, 'before');
-        this.syncConfigAfterValue$ = syncConfigValueObs(this.parsedSyncConfigs$, 'after');
-        this.isTimeCleared$ = combineLatest([this.currentDate$, this._timeDate.pipe(startWith(null))]).pipe(switchMap(([date, time]) => {
-            const isTimeCleared = Boolean(!date && !time);
-            return this._cleared.pipe(map(() => true), startWith(isTimeCleared));
-        }), distinctUntilChanged(), shareReplay(1));
-        this.rawDateTime$ = combineLatest([
-            this._config.pipe(first(), switchMap(() => (this.timeOnly ? of(null) : this.dateValue$))),
-            this.timeInput$.pipe(startWith(null)),
-            this.fullDay$,
-            this.timeDate$,
-            this.isTimeCleared$
-        ]).pipe(map(([date, timeString, fullDay, timeDate, isTimeCleared]) => {
-            let result;
-            if (!isTimeCleared) {
-                if (!date || this.timeOnly) {
-                    date = timeDate ?? new Date(); // use the time date, or default to the current day
                 }
-                if (date) {
-                    if (fullDay) {
-                        if (this.dateTimeField.fullDayInUTC) {
-                            result = utcDayForDate(date);
-                        }
-                        else {
-                            result = startOfDay(date);
-                        }
-                    }
-                    else if (timeString) {
-                        result =
-                            readableTimeStringToDate(timeString, {
-                                date,
-                                useSystemTimezone: true
-                            }) ?? date;
-                    }
-                    else if (!this.timeOnly) {
-                        if (this.timeMode !== DbxDateTimeFieldTimeMode.REQUIRED) {
-                            // only autofill the date if the time is marked as required (and the time string is empty)
-                            result = date;
-                        }
-                    }
+                else if (timeString) {
+                    result =
+                        readableTimeStringToDate(timeString, {
+                            date,
+                            useSystemTimezone: true
+                        }) ?? date;
                 }
-            }
-            return result;
-        }), distinctUntilChanged(isSameDateHoursAndMinutes), shareReplay(1));
-        this.dateTimePickerConfig$ = combineLatest([this._config.pipe(switchMapMaybeObs()), this.syncConfigBeforeValue$, this.syncConfigAfterValue$]).pipe(map(([x, dateInputMin, dateInputMax]) => {
-            let result = x;
-            if (dateInputMin != null || dateInputMax != null) {
-                const { min: limitMin, max: limitMax } = x?.limits ?? {};
-                const min = findMinDate([dateInputMin, dateFromLogicalDate(limitMin)]);
-                const max = findMaxDate([dateInputMax, dateFromLogicalDate(limitMax)]);
-                result = {
-                    ...x,
-                    limits: {
-                        ...x?.limits,
-                        min,
-                        max
-                    }
-                };
-            }
-            return result;
-        }), distinctUntilChanged(), shareReplay(1));
-        this.dateInputMin$ = this.dateTimePickerConfig$.pipe(map((x) => (x?.limits?.min ?? null)), distinctUntilChanged(isSameDate), shareReplay(1));
-        this.dateInputMax$ = this.dateTimePickerConfig$.pipe(map((x) => (x?.limits?.max ?? null)), distinctUntilChanged(isSameDate), shareReplay(1));
-        /**
-         * Whether or not there is a limited min/max date range applied/available.
-         */
-        this.hasRestrictedDateRange$ = combineLatest([this.dateInputMin$, this.dateInputMax$]).pipe(map(([a, b]) => Boolean(a || b)), distinctUntilChanged(), shareReplay(1));
-        this.dateMinAndMaxIsSameDay$ = combineLatest([this.dateInputMin$, this.dateInputMax$]).pipe(map(([a, b]) => Boolean(a && b) && isSameDateDay(a, b)), distinctUntilChanged(), shareReplay(1));
-        this.pickerFilter$ = this.dateTimePickerConfig$.pipe(distinctUntilChanged(), map((x) => {
-            if (x) {
-                const filter = dateTimeMinuteWholeDayDecisionFunction(x, false);
-                return (x) => (x != null ? filter(x) : true);
-            }
-            else {
-                return () => true;
-            }
-        }), shareReplay(1));
-        this.defaultPickerFilter = () => true;
-        this.timeOutput$ = combineLatest([this.rawDateTime$, this._offset, this.dateTimePickerConfig$]).pipe(throttleTime(TIME_OUTPUT_THROTTLE_TIME$1, undefined, { leading: false, trailing: true }), distinctUntilChanged((current, next) => current[0] === next[0] && next[1] === 0 && current[2] === next[2]), tap(([, stepsOffset]) => (stepsOffset ? this._offset.next(0) : 0)), map(([date, stepsOffset, config]) => {
-            if (date != null) {
-                const instance = new DateTimeMinuteInstance({
-                    date,
-                    ...config,
-                    roundDownToMinute: true
-                });
-                // only clamp when the steps offset is set
-                if (stepsOffset) {
-                    date = instance.clamp(date);
-                    const minutes = stepsOffset * this.minuteStep;
-                    if (minutes != 0) {
-                        date = addMinutes(date, minutes);
-                        date = instance.clamp(date); // clamp the date again
+                else if (!this.timeOnly) {
+                    if (this.timeMode !== DbxDateTimeFieldTimeMode.REQUIRED) {
+                        // only autofill the date if the time is marked as required (and the time string is empty)
+                        result = date;
                     }
                 }
             }
-            return date;
-        }), distinctUntilChanged(isSameDateHoursAndMinutes), shareReplay(1));
-        this.dateTimePickerInstance$ = this.dateTimePickerConfig$.pipe(map((config) => {
-            return new DateTimeMinuteInstance({
+        }
+        return result;
+    }), distinctUntilChanged(isSameDateHoursAndMinutes), shareReplay(1));
+    dateTimePickerConfig$ = combineLatest([this._config.pipe(switchMapMaybeObs()), this.syncConfigBeforeValue$, this.syncConfigAfterValue$]).pipe(map(([x, dateInputMin, dateInputMax]) => {
+        let result = x;
+        if (dateInputMin != null || dateInputMax != null) {
+            const { min: limitMin, max: limitMax } = x?.limits ?? {};
+            const min = findMinDate([dateInputMin, dateFromLogicalDate(limitMin)]);
+            const max = findMaxDate([dateInputMax, dateFromLogicalDate(limitMax)]);
+            result = {
+                ...x,
+                limits: {
+                    ...x?.limits,
+                    min,
+                    max
+                }
+            };
+        }
+        return result;
+    }), distinctUntilChanged(), shareReplay(1));
+    dateInputMin$ = this.dateTimePickerConfig$.pipe(map((x) => (x?.limits?.min ?? null)), distinctUntilChanged(isSameDate), shareReplay(1));
+    dateInputMax$ = this.dateTimePickerConfig$.pipe(map((x) => (x?.limits?.max ?? null)), distinctUntilChanged(isSameDate), shareReplay(1));
+    /**
+     * Whether or not there is a limited min/max date range applied/available.
+     */
+    hasRestrictedDateRange$ = combineLatest([this.dateInputMin$, this.dateInputMax$]).pipe(map(([a, b]) => Boolean(a || b)), distinctUntilChanged(), shareReplay(1));
+    dateMinAndMaxIsSameDay$ = combineLatest([this.dateInputMin$, this.dateInputMax$]).pipe(map(([a, b]) => Boolean(a && b) && isSameDateDay(a, b)), distinctUntilChanged(), shareReplay(1));
+    pickerFilter$ = this.dateTimePickerConfig$.pipe(distinctUntilChanged(), map((x) => {
+        if (x) {
+            const filter = dateTimeMinuteWholeDayDecisionFunction(x, false);
+            return (x) => (x != null ? filter(x) : true);
+        }
+        else {
+            return () => true;
+        }
+    }), shareReplay(1));
+    defaultPickerFilter = () => true;
+    timeOutput$ = combineLatest([this.rawDateTime$, this._offset, this.dateTimePickerConfig$]).pipe(throttleTime(TIME_OUTPUT_THROTTLE_TIME$1, undefined, { leading: false, trailing: true }), distinctUntilChanged((current, next) => current[0] === next[0] && next[1] === 0 && current[2] === next[2]), tap(([, stepsOffset]) => (stepsOffset ? this._offset.next(0) : 0)), map(([date, stepsOffset, config]) => {
+        if (date != null) {
+            const instance = new DateTimeMinuteInstance({
+                date,
                 ...config,
                 roundDownToMinute: true
             });
-        }), shareReplay(1));
-        this.hasEmptyDisplayValue$ = this.displayValue$.pipe(map((x) => !x), distinctUntilChanged(), shareReplay(1));
-        this.presets$ = this._presets.pipe(switchMapMaybeObs(), map((x) => x.map(dateTimePreset)), shareReplay(1));
-        this.showClearButton$ = this.hasEmptyDisplayValue$.pipe(map((x) => Boolean(this.showClearButton && !x)), distinctUntilChanged(), shareReplay(1));
-        this.canAutofillDateWithOnlyAvailableDate$ = this.dateMinAndMaxIsSameDay$;
-        this.showDateInput$ = this.dateMinAndMaxIsSameDay$.pipe(map((dateMinAndMaxIsSameDay) => {
-            return this.showDateInput && (this.alwaysShowDateInput || !dateMinAndMaxIsSameDay);
-        }), distinctUntilChanged(), shareReplay(1));
-        this.currentErrorMessage$ = this.formControl$.pipe(switchMap((formControl) => formControl.statusChanges.pipe(filter((x) => x === 'INVALID' || x === 'VALID'), map((x) => {
-            let currentErrorMessage;
-            if (x === 'INVALID') {
-                if (this.formControl.hasError('required')) {
-                    currentErrorMessage = 'Date is required';
-                }
-                else if (this.formControl.hasError(DBX_DATE_TIME_FIELD_DATE_NOT_IN_SCHEDULE_ERROR)) {
-                    currentErrorMessage = 'Date does not fall on an available dates in schedule.';
-                }
-                else if (this.formControl.hasError(DBX_DATE_TIME_FIELD_TIME_NOT_IN_RANGE_ERROR)) {
-                    currentErrorMessage = 'Time is not valid for the given date.';
-                }
-                else {
-                    currentErrorMessage = 'The given date and time is invalid.';
+            // only clamp when the steps offset is set
+            if (stepsOffset) {
+                date = instance.clamp(date);
+                const minutes = stepsOffset * this.minuteStep;
+                if (minutes != 0) {
+                    date = addMinutes(date, minutes);
+                    date = instance.clamp(date); // clamp the date again
                 }
             }
-            return currentErrorMessage;
-        }))), startWith(undefined), shareReplay(1));
-        this.hasError$ = this.currentErrorMessage$.pipe(map((x) => Boolean(x)), distinctUntilChanged(), shareReplay(1));
-    }
+        }
+        return date;
+    }), distinctUntilChanged(isSameDateHoursAndMinutes), shareReplay(1));
+    dateTimePickerInstance$ = this.dateTimePickerConfig$.pipe(map((config) => {
+        return new DateTimeMinuteInstance({
+            ...config,
+            roundDownToMinute: true
+        });
+    }), shareReplay(1));
+    hasEmptyDisplayValue$ = this.displayValue$.pipe(map((x) => !x), distinctUntilChanged(), shareReplay(1));
+    presets$ = this._presets.pipe(switchMapMaybeObs(), map((x) => x.map(dateTimePreset)), shareReplay(1));
+    showClearButton$ = this.hasEmptyDisplayValue$.pipe(map((x) => Boolean(this.showClearButton && !x)), distinctUntilChanged(), shareReplay(1));
+    canAutofillDateWithOnlyAvailableDate$ = this.dateMinAndMaxIsSameDay$;
+    showDateInput$ = this.dateMinAndMaxIsSameDay$.pipe(map((dateMinAndMaxIsSameDay) => {
+        return this.showDateInput && (this.alwaysShowDateInput || !dateMinAndMaxIsSameDay);
+    }), distinctUntilChanged(), shareReplay(1));
+    currentErrorMessage$ = this.formControl$.pipe(switchMap((formControl) => formControl.statusChanges.pipe(filter((x) => x === 'INVALID' || x === 'VALID'), map((x) => {
+        let currentErrorMessage;
+        if (x === 'INVALID') {
+            if (this.formControl.hasError('required')) {
+                currentErrorMessage = 'Date is required';
+            }
+            else if (this.formControl.hasError(DBX_DATE_TIME_FIELD_DATE_NOT_IN_SCHEDULE_ERROR)) {
+                currentErrorMessage = 'Date does not fall on an available dates in schedule.';
+            }
+            else if (this.formControl.hasError(DBX_DATE_TIME_FIELD_TIME_NOT_IN_RANGE_ERROR)) {
+                currentErrorMessage = 'Time is not valid for the given date.';
+            }
+            else {
+                currentErrorMessage = 'The given date and time is invalid.';
+            }
+        }
+        return currentErrorMessage;
+    }))), startWith(undefined), shareReplay(1));
+    hasError$ = this.currentErrorMessage$.pipe(map((x) => Boolean(x)), distinctUntilChanged(), shareReplay(1));
     ngOnInit() {
         this._formControlObs.next(this.formControl);
         const inputPickerConfig = this.dateTimeField.pickerConfig;
@@ -4451,13 +4383,13 @@ class DbxDateTimeFieldComponent extends FieldType$1 {
     clearValue() {
         this._cleared.next();
     }
-    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\" fxLayoutGap=\"6px grid\" fxLayoutAlign=\"space-evenly stretch\">\n  <!-- Date -->\n  <div class=\"dbx-datetime-row\" fxFlex.lt-sm=\"100\" [fxFlex]=\"dateOnly ? '100' : '50'\" *ngIf=\"showDateInput$ | async\">\n    <ng-container *ngTemplateOutlet=\"dateInputTemplate\"></ng-container>\n  </div>\n  <!-- Time -->\n  <div class=\"dbx-datetime-row\" fxFlex.lt-sm=\"100\" [fxFlex]=\"(showDateInput$ | async) ? '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  <!-- Date Hint -->\n  <ng-container [ngSwitch]=\"hasError$ | async\">\n    <ng-container *ngSwitchCase=\"false\">\n      <div *ngIf=\"!hideDateHint\" class=\"dbx-datetime-row dbx-datetime-hint-row\" fxFlex=\"100\">\n        <div class=\"dbx-hint\">\n          <ng-container [ngSwitch]=\"hasEmptyDisplayValue$ | async\">\n            <ng-container *ngSwitchCase=\"true\">\n              <span class=\"dbx-small\">No date/time set</span>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"false\">\n              <ng-container [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              </ng-container>\n            </ng-container>\n          </ng-container>\n        </div>\n      </div>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"true\">\n      <mat-error *ngIf=\"currentErrorMessage$ | async\">{{ currentErrorMessage$ | async }}</mat-error>\n    </ng-container>\n  </ng-container>\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 [disabled]=\"disabled\" [required]=\"isDateRequired\" [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=\"dbx-datetime-row-button\" *ngIf=\"!hideDatePicker\" mat-icon-button (click)=\"picker.open()\" [disabled]=\"disabled\">\n      <mat-icon>calendar_today</mat-icon>\n    </button>\n    <button matSuffix *ngIf=\"showClearButton$ | async\" class=\"dbx-datetime-clear-button\" mat-icon-button aria-label=\"clears the date and time menu\" [disabled]=\"disabled\" (click)=\"clearValue()\">\n      <mat-icon>clear</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 [errorStateMatcher]=\"timeErrorStateMatcher\" matInput [required]=\"isTimeRequired\" [formControl]=\"timeInputCtrl\" (focus)=\"focusTime()\" (focusout)=\"focusOutTime()\" (keydown)=\"keydownOnTimeInput($event)\" />\n    <button matPrefix class=\"dbx-datetime-row-button\" 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-error *ngIf=\"timeInputCtrl.hasError('pattern')\">The input time is not recognizable.</mat-error>\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: i3$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { 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.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { 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: "component", type: i7$1.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$1.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: i9.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i9.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i9.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "directive", type: i3$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i11.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: i11.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i11.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: i11.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" }] }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxDateTimeFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵ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\" fxLayoutGap=\"6px grid\" fxLayoutAlign=\"space-evenly stretch\">\n  <!-- Date -->\n  <div class=\"dbx-datetime-row\" fxFlex.lt-sm=\"100\" [fxFlex]=\"dateOnly ? '100' : '50'\" *ngIf=\"showDateInput$ | async\">\n    <ng-container *ngTemplateOutlet=\"dateInputTemplate\"></ng-container>\n  </div>\n  <!-- Time -->\n  <div class=\"dbx-datetime-row\" fxFlex.lt-sm=\"100\" [fxFlex]=\"(showDateInput$ | async) ? '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  <!-- Date Hint -->\n  <ng-container [ngSwitch]=\"hasError$ | async\">\n    <ng-container *ngSwitchCase=\"false\">\n      <div *ngIf=\"!hideDateHint\" class=\"dbx-datetime-row dbx-datetime-hint-row\" fxFlex=\"100\">\n        <div class=\"dbx-hint\">\n          <ng-container [ngSwitch]=\"hasEmptyDisplayValue$ | async\">\n            <ng-container *ngSwitchCase=\"true\">\n              <span class=\"dbx-small\">No date/time set</span>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"false\">\n              <ng-container [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              </ng-container>\n            </ng-container>\n          </ng-container>\n        </div>\n      </div>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"true\">\n      <mat-error *ngIf=\"currentErrorMessage$ | async\">{{ currentErrorMessage$ | async }}</mat-error>\n    </ng-container>\n  </ng-container>\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 [disabled]=\"disabled\" [required]=\"isDateRequired\" [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=\"dbx-datetime-row-button\" *ngIf=\"!hideDatePicker\" mat-icon-button (click)=\"picker.open()\" [disabled]=\"disabled\">\n      <mat-icon>calendar_today</mat-icon>\n    </button>\n    <button matSuffix *ngIf=\"showClearButton$ | async\" class=\"dbx-datetime-clear-button\" mat-icon-button aria-label=\"clears the date and time menu\" [disabled]=\"disabled\" (click)=\"clearValue()\">\n      <mat-icon>clear</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 [errorStateMatcher]=\"timeErrorStateMatcher\" matInput [required]=\"isTimeRequired\" [formControl]=\"timeInputCtrl\" (focus)=\"focusTime()\" (focusout)=\"focusOutTime()\" (keydown)=\"keydownOnTimeInput($event)\" />\n    <button matPrefix class=\"dbx-datetime-row-button\" 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-error *ngIf=\"timeInputCtrl.hasError('pattern')\">The input time is not recognizable.</mat-error>\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: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i4$5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4$5.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4$5.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i4$5.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i4$5.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i5$1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i6$1.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: i6$1.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4$6.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i4$6.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i8.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i8.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i8.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "directive", type: i2.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: i10.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: i10.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i10.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: i10.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$2.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.DatePipe, name: "date" }, { kind: "pipe", type: i6.DateDistancePipe, name: "dateDistance" }, { kind: "pipe", type: i6.TimeDistancePipe, name: "timeDistance" }, { kind: "pipe", type: i6.GetValuePipe, name: "getValue" }] });
 }
 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\" fxLayoutGap=\"6px grid\" fxLayoutAlign=\"space-evenly stretch\">\n  <!-- Date -->\n  <div class=\"dbx-datetime-row\" fxFlex.lt-sm=\"100\" [fxFlex]=\"dateOnly ? '100' : '50'\" *ngIf=\"showDateInput$ | async\">\n    <ng-container *ngTemplateOutlet=\"dateInputTemplate\"></ng-container>\n  </div>\n  <!-- Time -->\n  <div class=\"dbx-datetime-row\" fxFlex.lt-sm=\"100\" [fxFlex]=\"(showDateInput$ | async) ? '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  <!-- Date Hint -->\n  <ng-container [ngSwitch]=\"hasError$ | async\">\n    <ng-container *ngSwitchCase=\"false\">\n      <div *ngIf=\"!hideDateHint\" class=\"dbx-datetime-row dbx-datetime-hint-row\" fxFlex=\"100\">\n        <div class=\"dbx-hint\">\n          <ng-container [ngSwitch]=\"hasEmptyDisplayValue$ | async\">\n            <ng-container *ngSwitchCase=\"true\">\n              <span class=\"dbx-small\">No date/time set</span>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"false\">\n              <ng-container [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              </ng-container>\n            </ng-container>\n          </ng-container>\n        </div>\n      </div>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"true\">\n      <mat-error *ngIf=\"currentErrorMessage$ | async\">{{ currentErrorMessage$ | async }}</mat-error>\n    </ng-container>\n  </ng-container>\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 [disabled]=\"disabled\" [required]=\"isDateRequired\" [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=\"dbx-datetime-row-button\" *ngIf=\"!hideDatePicker\" mat-icon-button (click)=\"picker.open()\" [disabled]=\"disabled\">\n      <mat-icon>calendar_today</mat-icon>\n    </button>\n    <button matSuffix *ngIf=\"showClearButton$ | async\" class=\"dbx-datetime-clear-button\" mat-icon-button aria-label=\"clears the date and time menu\" [disabled]=\"disabled\" (click)=\"clearValue()\">\n      <mat-icon>clear</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 [errorStateMatcher]=\"timeErrorStateMatcher\" matInput [required]=\"isTimeRequired\" [formControl]=\"timeInputCtrl\" (focus)=\"focusTime()\" (focusout)=\"focusOutTime()\" (keydown)=\"keydownOnTimeInput($event)\" />\n    <button matPrefix class=\"dbx-datetime-row-button\" 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-error *ngIf=\"timeInputCtrl.hasError('pattern')\">The input time is not recognizable.</mat-error>\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) {
     const dateInputTransformer = dbxDateTimeInputValueParseFactory(mode, timezoneInstance);
@@ -4487,6 +4419,30 @@ function dbxFixedDateRangeOutputValueFactory(mode, timezoneInstance) {
 }
 const TIME_OUTPUT_THROTTLE_TIME = 10;
 class DbxFixedDateRangeFieldComponent extends FieldType$1 {
+    dbxDateTimeFieldMenuPresetsService = inject(DbxDateTimeFieldMenuPresetsService);
+    _sub = new SubscriptionObject();
+    _inputRangeFormSub = new SubscriptionObject();
+    _inputRangeFormValueSub = new SubscriptionObject();
+    _dateRangeInputSub = new SubscriptionObject();
+    _currentSelectionModeSub = new SubscriptionObject();
+    _latestBoundarySub = new SubscriptionObject();
+    _disableEndSub = new SubscriptionObject();
+    _activeDateSub = new SubscriptionObject();
+    _currentDateRangeInput = {};
+    _currentSelectionMode = 'single';
+    _latestBoundary = null;
+    _config = new BehaviorSubject(undefined);
+    _selectionMode = new BehaviorSubject(undefined);
+    _dateRangeInput = new BehaviorSubject(undefined);
+    _timezone = new BehaviorSubject(undefined);
+    _presets = new BehaviorSubject(of([]));
+    _selectionEvent = new Subject();
+    selectedDateRange$ = this._selectionEvent.pipe(map((x) => x.range));
+    _formControlObs = new BehaviorSubject(undefined);
+    formControl$ = this._formControlObs.pipe(filterMaybe());
+    calendar;
+    startDateInputElement;
+    endDateInputElement;
     get currentDateRangeInput() {
         return this._currentDateRangeInput;
     }
@@ -4496,6 +4452,18 @@ class DbxFixedDateRangeFieldComponent extends FieldType$1 {
     get latestBoundary() {
         return this._latestBoundary;
     }
+    config$ = this._config.pipe(filterMaybe(), switchMap((x) => x), distinctUntilChanged(), shareReplay(1));
+    limitDateTimeInstance$ = this.config$.pipe(map(limitDateTimeInstance), shareReplay(1));
+    selectionMode$ = this._selectionMode.pipe(switchMapMaybeDefault('single'), map((x) => x ?? 'single'), distinctUntilChanged(), shareReplay(1));
+    dateRangeInput$ = this._dateRangeInput.pipe(switchMapMaybeDefault(), shareReplay(1));
+    timezone$ = this._timezone.pipe(switchMapMaybeDefault(), distinctUntilChanged()).pipe(map((defaultTimezone) => {
+        return defaultTimezone ?? guessCurrentTimezone();
+    }), distinctUntilChanged(), shareReplay(1));
+    timezoneInstance$ = this.timezone$.pipe(map((timezone) => (timezone ? dateTimezoneUtcNormal({ timezone }) : undefined)), shareReplay(1));
+    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));
     dateRangeSelectionForMode(mode) {
         const result = combineLatest([this.dateRangeInput$, this.limitDateTimeInstance$]).pipe(switchMap(([dateRangeInput, limitInstance]) => {
             const hasDateRangeConfiguration = Boolean(dateRangeInput);
@@ -4644,6 +4612,36 @@ class DbxFixedDateRangeFieldComponent extends FieldType$1 {
         }));
         return result;
     }
+    fullBoundary$ = this.dateRangeSelectionForMode('single').pipe(shareReplay(1));
+    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
+     */
+    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));
+    dateRangeSelection$ = this.selectionMode$.pipe(switchMap((mode) => this.dateRangeSelectionForMode(mode)));
+    calendarSelection$ = this.valueInSystemTimezone$.pipe(map((x) => (x ? new DateRange(x.start, x.end) : null)), shareReplay(1));
+    endDisabled$ = this.selectionMode$.pipe(map((x) => x === 'single'), distinctUntilChanged(), shareReplay(1));
+    inputRangeForm = new FormGroup({
+        start: new FormControl(null),
+        end: new FormControl(null)
+    });
     get fixedDateRangeField() {
         return this.field.props;
     }
@@ -4668,86 +4666,20 @@ 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 = dateTimeMinuteWholeDayDecisionFunction(x, false);
-                return (x) => (x != null ? filter(x) : true);
-            }
-            else {
-                return () => true;
-            }
-        }), shareReplay(1));
-        this.defaultPickerFilter = () => true;
-    }
+    minMaxRange$ = this.limitDateTimeInstance$.pipe(combineLatestWith(timer(MS_IN_MINUTE)), // refresh every minute
+    map(([x]) => x.dateRange()), distinctUntilChanged(isSameDateDayRange), shareReplay(1));
+    min$ = this.minMaxRange$.pipe(map((x) => x?.start ?? null), distinctUntilChanged(), shareReplay(1));
+    max$ = this.minMaxRange$.pipe(map((x) => x?.end ?? null), distinctUntilChanged(), shareReplay(1));
+    pickerFilter$ = this.config$.pipe(distinctUntilChanged(), map((x) => {
+        if (x) {
+            const filter = dateTimeMinuteWholeDayDecisionFunction(x, false);
+            return (x) => (x != null ? filter(x) : true);
+        }
+        else {
+            return () => true;
+        }
+    }), shareReplay(1));
+    defaultPickerFilter = () => true;
     ngOnInit() {
         this._formControlObs.next(this.formControl);
         const dateRangeSelection = this.dateRangeSelection$.pipe(shareReplay(1));
@@ -4858,7 +4790,7 @@ class DbxFixedDateRangeFieldComponent extends FieldType$1 {
             this._presets.next(asObservableFromGetter(this.presets));
         }
         else {
-            this._presets.next(this.dbxDateTimeFieldConfigService.configurations$);
+            this._presets.next(this.dbxDateTimeFieldMenuPresetsService.configurations$);
         }
         this._activeDateSub.subscription = this.calendarFocusDate$.subscribe((x) => {
             this.calendar.activeDate = x;
@@ -4891,13 +4823,13 @@ 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: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFixedDateRangeFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵ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" }] }); }
+        ], 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: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "component", type: i4$5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4$5.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: i4$6.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: i4$6.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { kind: "directive", type: i4$6.MatStartDate, selector: "input[matStartDate]", inputs: ["errorStateMatcher"], outputs: ["dateChange", "dateInput"] }, { kind: "directive", type: i4$6.MatEndDate, selector: "input[matEndDate]", inputs: ["errorStateMatcher"], outputs: ["dateChange", "dateInput"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i2$2.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFixedDateRangeFieldComponent, decorators: [{
             type: Component,
@@ -4907,7 +4839,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                             useClass: forwardRef(() => DbxFixedDateRangeFieldSelectionStrategy)
                         }
                     ], 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" }]
-        }], ctorParameters: function () { return [{ type: DbxDateTimeFieldMenuPresetsService }]; }, propDecorators: { calendar: [{
+        }], propDecorators: { calendar: [{
                 type: ViewChild,
                 args: [MatCalendar]
             }], startDateInputElement: [{
@@ -4918,10 +4850,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 args: ['endDateInput', { read: ElementRef }]
             }] } });
 class DbxFixedDateRangeFieldSelectionStrategy {
-    constructor(_dateAdapter, dbxFixedDateRangeFieldComponent) {
-        this._dateAdapter = _dateAdapter;
-        this.dbxFixedDateRangeFieldComponent = dbxFixedDateRangeFieldComponent;
-    }
+    _dateAdapter = inject((DateAdapter));
+    dbxFixedDateRangeFieldComponent = inject(DbxFixedDateRangeFieldComponent);
     selectionFinished(date, currentRange, event) {
         // unused
         return currentRange;
@@ -4966,16 +4896,16 @@ 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 }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFixedDateRangeFieldSelectionStrategy, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFixedDateRangeFieldSelectionStrategy });
 }
 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 {
-    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,
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormFormlyDateFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: DbxFormFormlyDateFieldModule, declarations: [DbxDateTimeFieldComponent, DbxFixedDateRangeFieldComponent], imports: [CommonModule,
             FormsModule,
             MatInputModule,
             MatDividerModule,
@@ -4990,8 +4920,8 @@ class DbxFormFormlyDateFieldModule {
             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,
+            FlexLayoutModule, i1$1.FormlyModule], exports: [DbxFormFormlyWrapperModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormFormlyDateFieldModule, imports: [CommonModule,
             FormsModule,
             MatInputModule,
             MatDividerModule,
@@ -5013,7 +4943,7 @@ class DbxFormFormlyDateFieldModule {
                     { name: 'datetime', component: DbxDateTimeFieldComponent, wrappers: ['style', 'form-field'] },
                     { name: 'fixeddaterange', component: DbxFixedDateRangeFieldComponent, wrappers: ['style', 'form-field'] }
                 ]
-            }), DbxFormFormlyWrapperModule] }); }
+            }), DbxFormFormlyWrapperModule] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormFormlyDateFieldModule, decorators: [{
             type: NgModule,
@@ -5059,7 +4989,7 @@ function autoTouchWrapper(fieldConfig, autoTouchWrapper = {}) {
     return addWrapperToFormlyFieldConfig(fieldConfig, AUTO_TOUCH_WRAPPER_KEY, autoTouchWrapper);
 }
 function expandWrapper(fieldConfig, expandWrapper = {}) {
-    return addWrapperToFormlyFieldConfig(fieldConfig, EXPANDABLE_WRAPPER_KEY, expandWrapper);
+    return addWrapperToFormlyFieldConfig(fieldConfig, EXPAND_WRAPPER_KEY, expandWrapper);
 }
 function toggleWrapper(fieldConfig, toggleWrapper = {}) {
     return addWrapperToFormlyFieldConfig(fieldConfig, TOGGLE_WRAPPER_KEY, toggleWrapper);
@@ -5549,9 +5479,9 @@ 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] }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormFormlyNumberFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: DbxFormFormlyNumberFieldModule, imports: [FormlyMaterialModule, FormlyMatSliderModule], exports: [DbxFormFormlyWrapperModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormFormlyNumberFieldModule, imports: [FormlyMaterialModule, FormlyMatSliderModule, DbxFormFormlyWrapperModule] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormFormlyNumberFieldModule, decorators: [{
             type: NgModule,
@@ -5564,21 +5494,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
 
 const DEFAULT_PREFERRED_COUNTRIES = ['us'];
 class DbxPhoneFieldComponent extends FieldType$1 {
-    constructor() {
-        super(...arguments);
-        this.inputSync = new SubscriptionObject();
-        this.outputSync = new SubscriptionObject();
-        this.extensionErrorSync = new SubscriptionObject();
-        this.phoneErrorSync = new SubscriptionObject();
-        this.phoneCtrl = new FormControl('');
-        this.extensionCtrl = new FormControl('', {
-            validators: [isPhoneExtension()]
-        });
-        this.inputFormGroup = new FormGroup({
-            phone: this.phoneCtrl,
-            extension: this.extensionCtrl
-        });
-    }
+    inputSync = new SubscriptionObject();
+    outputSync = new SubscriptionObject();
+    extensionErrorSync = new SubscriptionObject();
+    phoneErrorSync = new SubscriptionObject();
+    phoneCtrl = new FormControl('');
+    extensionCtrl = new FormControl('', {
+        validators: [isPhoneExtension()]
+    });
+    inputFormGroup = new FormGroup({
+        phone: this.phoneCtrl,
+        extension: this.extensionCtrl
+    });
     get preferredCountries() {
         return this.props.preferredCountries ?? DEFAULT_PREFERRED_COUNTRIES;
     }
@@ -5643,8 +5570,8 @@ 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$3.NgxMatIntlTelInputComponent, selector: "ngx-mat-intl-tel-input", inputs: ["preferredCountries", "enablePlaceholder", "inputPlaceholder", "cssClass", "name", "onlyCountries", "errorStateMatcher", "enableSearch", "searchPlaceholder", "describedBy", "format", "placeholder", "required", "disabled"], outputs: ["countryChanged"] }] }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxPhoneFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵ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: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i3$2.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: "16.2.12", ngImport: i0, type: DbxPhoneFieldComponent, decorators: [{
             type: Component,
@@ -5652,8 +5579,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
         }] });
 
 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,
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormFormlyPhoneFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: DbxFormFormlyPhoneFieldModule, declarations: [DbxPhoneFieldComponent], imports: [CommonModule,
             MatInputModule,
             MatFormFieldModule,
             FormsModule,
@@ -5662,8 +5589,8 @@ class DbxFormFormlyPhoneFieldModule {
             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,
+            FormlyMatFormFieldModule, i1$1.FormlyModule, NgxMatIntlTelInputComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormFormlyPhoneFieldModule, imports: [CommonModule,
             MatInputModule,
             MatFormFieldModule,
             FormsModule,
@@ -5676,7 +5603,7 @@ class DbxFormFormlyPhoneFieldModule {
             FormlyModule.forChild({
                 types: [{ name: 'intphone', component: DbxPhoneFieldComponent, wrappers: ['form-field'] }]
             }),
-            NgxMatIntlTelInputComponent] }); }
+            NgxMatIntlTelInputComponent] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormFormlyPhoneFieldModule, decorators: [{
             type: NgModule,
@@ -5984,9 +5911,9 @@ 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] }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormFormlyTextFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: DbxFormFormlyTextFieldModule, imports: [FormlyMaterialModule], exports: [DbxFormFormlyWrapperModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormFormlyTextFieldModule, imports: [FormlyMaterialModule, DbxFormFormlyWrapperModule] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormFormlyTextFieldModule, decorators: [{
             type: NgModule,
@@ -6005,9 +5932,9 @@ 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] }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormFormlyValueModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵ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 ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormFormlyValueModule, imports: [CommonModule, DbxFormFormlyArrayFieldModule, DbxFormFormlyBooleanFieldModule, DbxFormFormlyDateFieldModule, DbxFormFormlyPhoneFieldModule, DbxFormFormlyNumberFieldModule, DbxFormFormlyTextFieldModule] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormFormlyValueModule, decorators: [{
             type: NgModule,
@@ -6019,9 +5946,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.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] }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormFormlyFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵ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 ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormFormlyFieldModule, imports: [CommonModule, DbxFormFormlyChecklistItemFieldModule, DbxFormFormlyComponentFieldModule, DbxFormFormlySelectionModule, DbxFormFormlyTextEditorFieldModule, DbxFormFormlyValueModule, DbxFormFormlyWrapperModule] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormFormlyFieldModule, decorators: [{
             type: NgModule,
@@ -6048,17 +5975,15 @@ function provideFormlyContext() {
  * DbxForm Instance that registers a delegate and manages the state of that form/delegate.
  */
 class DbxFormlyContext {
-    constructor() {
-        this.lockSet = new LockSet();
-        this._fields = new BehaviorSubject(undefined);
-        this._initialValue = new BehaviorSubject(undefined);
-        this._disabled = new BehaviorSubject(undefined);
-        this._delegate = new BehaviorSubject(undefined);
-        this.fields$ = this._fields.pipe(filterMaybe(), shareReplay(1));
-        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' }; }
+    static INITIAL_STATE = { isComplete: false, state: DbxFormState.INITIALIZING, status: 'PENDING' };
+    lockSet = new LockSet();
+    _fields = new BehaviorSubject(undefined);
+    _initialValue = new BehaviorSubject(undefined);
+    _disabled = new BehaviorSubject(undefined);
+    _delegate = new BehaviorSubject(undefined);
+    fields$ = this._fields.pipe(filterMaybe(), shareReplay(1));
+    disabled$ = this._disabled.pipe(filterMaybe(), shareReplay(1));
+    stream$ = this._delegate.pipe(distinctUntilChanged(), switchMap((x) => (x ? x.stream$ : of(DbxFormlyContext.INITIAL_STATE))), shareReplay(1));
     destroy() {
         this.lockSet.destroyOnNextUnlock(() => {
             this._fields.complete();
@@ -6132,15 +6057,13 @@ class DbxFormlyContext {
  * Abstract component for wrapping a form.
  */
 class AbstractFormlyFormDirective {
+    context = inject((DbxFormlyContext));
     get disabled() {
         return this.context.isDisabled();
     }
     set disabled(disabled) {
         this.context.setDisabled(undefined, disabled);
     }
-    constructor(context) {
-        this.context = context;
-    }
     ngOnDestroy() {
         this.context.destroy();
     }
@@ -6160,12 +6083,12 @@ 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 }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AbstractFormlyFormDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: AbstractFormlyFormDirective, inputs: { disabled: "disabled" }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AbstractFormlyFormDirective, decorators: [{
             type: Directive
-        }], ctorParameters: function () { return [{ type: DbxFormlyContext }]; }, propDecorators: { disabled: [{
+        }], propDecorators: { disabled: [{
                 type: Input
             }] } });
 /**
@@ -6175,8 +6098,8 @@ 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 }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AbstractSyncFormlyFormDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: AbstractSyncFormlyFormDirective, usesInheritance: true, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AbstractSyncFormlyFormDirective, decorators: [{
             type: Directive
@@ -6185,10 +6108,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  * Abstract component for wrapping an asyncrhronously-configured form.
  */
 class AbstractAsyncFormlyFormDirective extends AbstractFormlyFormDirective {
-    constructor() {
-        super(...arguments);
-        this._fieldsSub = new SubscriptionObject();
-    }
+    _fieldsSub = new SubscriptionObject();
     ngOnInit() {
         this._fieldsSub.subscription = this.fields$.pipe(distinctUntilChanged()).subscribe((fields) => {
             this.context.fields = fields;
@@ -6198,19 +6118,16 @@ 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 }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AbstractAsyncFormlyFormDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: AbstractAsyncFormlyFormDirective, usesInheritance: true, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AbstractAsyncFormlyFormDirective, decorators: [{
             type: Directive
         }] });
 class AbstractConfigAsyncFormlyFormDirective extends AbstractAsyncFormlyFormDirective {
-    constructor() {
-        super(...arguments);
-        this._config = new BehaviorSubject(undefined);
-        this.currentConfig$ = this._config.asObservable();
-        this.config$ = this._config.pipe(filterMaybe(), shareReplay(1));
-    }
+    _config = new BehaviorSubject(undefined);
+    currentConfig$ = this._config.asObservable();
+    config$ = this._config.pipe(filterMaybe(), shareReplay(1));
     get config() {
         return this._config.value;
     }
@@ -6221,8 +6138,8 @@ 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 }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AbstractConfigAsyncFormlyFormDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: AbstractConfigAsyncFormlyFormDirective, inputs: { config: "config" }, usesInheritance: true, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AbstractConfigAsyncFormlyFormDirective, decorators: [{
             type: Directive
@@ -6250,73 +6167,70 @@ function dbxFormSearchFormFields(config) {
  * Used for rending a form from a DbxFormlyContext.
  */
 class DbxFormlyFormComponent extends AbstractSubscriptionDirective {
-    constructor(context) {
-        super();
-        this.context = context;
-        this._fields = new BehaviorSubject(undefined);
-        this._events = new BehaviorSubject({ isComplete: false, state: DbxFormState.INITIALIZING, status: 'PENDING' });
-        this._disabled = new BehaviorSubject(undefined);
-        this._reset = new BehaviorSubject(new Date());
-        this._forceUpdate = new Subject();
-        this._disabledSub = new SubscriptionObject();
-        this._enforceDisabledSub = new SubscriptionObject();
-        this.form = new FormGroup({});
-        this.model = {};
-        this.options = {};
-        this.fields$ = this._fields.pipe(switchMapMaybeObs(), distinctUntilChanged(), shareReplay(1));
-        this.stream$ = this._reset.pipe(switchMap((lastResetAt) => this.form.valueChanges.pipe(startWith(0), distinctUntilChanged(), throttleTime(50, undefined, { leading: true, trailing: true }), scanCount(-1), 
-        // update on validation changes too. Does not count towards changes since last reset.
-        switchMap((changesSinceLastReset) => this.form.statusChanges.pipe(startWith(this.form.status), distinctUntilChanged()).pipe(map(() => changesSinceLastReset))), map((changesSinceLastResetCount) => ({
-            changesSinceLastResetCount,
-            isFormValid: this.form.status !== 'PENDING' && this.form.valid,
-            isFormDisabled: this.form.disabled
-        })), scan((acc, next) => {
-            // Pass forward valid if next was a disabled change/check, which changes angular form's isValid value.
-            // If it was valid prior, then it should be valid now, unless we just reset, in which case it might not be valid.
-            const valid = next.isFormValid || (next.isFormDisabled && acc.isFormValid && acc.changesSinceLastResetCount > 0);
-            return {
-                changesSinceLastResetCount: next.changesSinceLastResetCount,
-                isFormValid: valid,
-                isFormDisabled: next.isFormDisabled
-            };
-        }, {
-            changesSinceLastResetCount: 0,
-            isFormValid: false,
-            isFormDisabled: false
-        }), switchMap(({ changesSinceLastResetCount, isFormValid, isFormDisabled }) => {
-            const nextState = () => {
-                const isReset = changesSinceLastResetCount <= 1; // first emission after reset is the first value.
-                const complete = isFormValid;
-                const nextState = {
-                    isComplete: complete,
-                    state: isReset ? DbxFormState.RESET : DbxFormState.USED,
-                    status: this.form.status,
-                    untouched: this.form.untouched,
-                    pristine: this.form.pristine,
-                    changesCount: changesSinceLastResetCount,
-                    lastResetAt,
-                    disabled: this.disabled,
-                    isDisabled: isFormDisabled
-                };
-                return nextState;
+    _dbxFormlyContext = inject((DbxFormlyContext));
+    _fields = new BehaviorSubject(undefined);
+    _events = new BehaviorSubject({ isComplete: false, state: DbxFormState.INITIALIZING, status: 'PENDING' });
+    _disabled = new BehaviorSubject(undefined);
+    _reset = new BehaviorSubject(new Date());
+    _forceUpdate = new Subject();
+    _disabledSub = new SubscriptionObject();
+    _enforceDisabledSub = new SubscriptionObject();
+    form = new FormGroup({});
+    model = {};
+    options = {};
+    fields$ = this._fields.pipe(switchMapMaybeObs(), distinctUntilChanged(), shareReplay(1));
+    stream$ = this._reset.pipe(switchMap((lastResetAt) => this.form.valueChanges.pipe(startWith(0), distinctUntilChanged(), throttleTime(50, undefined, { leading: true, trailing: true }), scanCount(-1), 
+    // update on validation changes too. Does not count towards changes since last reset.
+    switchMap((changesSinceLastReset) => this.form.statusChanges.pipe(startWith(this.form.status), distinctUntilChanged()).pipe(map(() => changesSinceLastReset))), map((changesSinceLastResetCount) => ({
+        changesSinceLastResetCount,
+        isFormValid: this.form.status !== 'PENDING' && this.form.valid,
+        isFormDisabled: this.form.disabled
+    })), scan((acc, next) => {
+        // Pass forward valid if next was a disabled change/check, which changes angular form's isValid value.
+        // If it was valid prior, then it should be valid now, unless we just reset, in which case it might not be valid.
+        const valid = next.isFormValid || (next.isFormDisabled && acc.isFormValid && acc.changesSinceLastResetCount > 0);
+        return {
+            changesSinceLastResetCount: next.changesSinceLastResetCount,
+            isFormValid: valid,
+            isFormDisabled: next.isFormDisabled
+        };
+    }, {
+        changesSinceLastResetCount: 0,
+        isFormValid: false,
+        isFormDisabled: false
+    }), switchMap(({ changesSinceLastResetCount, isFormValid, isFormDisabled }) => {
+        const nextState = () => {
+            const isReset = changesSinceLastResetCount <= 1; // first emission after reset is the first value.
+            const complete = isFormValid;
+            const nextState = {
+                isComplete: complete,
+                state: isReset ? DbxFormState.RESET : DbxFormState.USED,
+                status: this.form.status,
+                untouched: this.form.untouched,
+                pristine: this.form.pristine,
+                changesCount: changesSinceLastResetCount,
+                lastResetAt,
+                disabled: this.disabled,
+                isDisabled: isFormDisabled
             };
-            const state = nextState();
-            if (isFormValid && this.form.untouched) {
-                return timer(150, 200).pipe(
-                // every 200 ms check if the form is now marked touched, then push a new state
-                filter(() => this.form.touched), map(() => nextState()), 
-                // only push the new state once
-                first(), 
-                // send the first value immediately
-                startWith(state));
-            }
-            else {
-                return of(state);
-            }
-        }))), shareReplay(1));
-    }
+            return nextState;
+        };
+        const state = nextState();
+        if (isFormValid && this.form.untouched) {
+            return timer(150, 200).pipe(
+            // every 200 ms check if the form is now marked touched, then push a new state
+            filter(() => this.form.touched), map(() => nextState()), 
+            // only push the new state once
+            first(), 
+            // send the first value immediately
+            startWith(state));
+        }
+        else {
+            return of(state);
+        }
+    }))), shareReplay(1));
     ngOnInit() {
-        this.context.setDelegate(this);
+        this._dbxFormlyContext.setDelegate(this);
         const resyncDisabledState = () => {
             const isDisabled = BooleanStringKeyArrayUtilityInstance.isTrue(this._disabled.value);
             let change = false;
@@ -6338,9 +6252,9 @@ class DbxFormlyFormComponent extends AbstractSubscriptionDirective {
         });
     }
     ngOnDestroy() {
-        this.context.lockSet.onNextUnlock(() => {
+        this._dbxFormlyContext.lockSet.onNextUnlock(() => {
             super.ngOnDestroy();
-            this.context.clearDelegate(this);
+            this._dbxFormlyContext.clearDelegate(this);
             this._events.complete();
             this._fields.complete();
             this._reset.complete();
@@ -6401,12 +6315,12 @@ class DbxFormlyFormComponent extends AbstractSubscriptionDirective {
     forceFormUpdate() {
         this._forceUpdate.next();
     }
-    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: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormlyFormComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵ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$1.FormlyForm, selector: "formly-form", inputs: ["form", "model", "fields", "options"], outputs: ["modelChange"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] }); }
+  `, isInline: true, dependencies: [{ kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.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,
@@ -6423,14 +6337,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         class: 'dbx-formly'
                     }
                 }]
-        }], ctorParameters: function () { return [{ type: DbxFormlyContext }]; } });
+        }] });
 
 class DbxFormSearchFormComponent extends AbstractConfigAsyncFormlyFormDirective {
-    constructor() {
-        super(...arguments);
-        this.search = new EventEmitter();
-        this.fields$ = this.currentConfig$.pipe(map(dbxFormSearchFormFields));
-    }
+    search = new EventEmitter();
+    fields$ = this.currentConfig$.pipe(map(dbxFormSearchFormFields));
     searchChanged(value) {
         this.search.next(value.search ?? '');
     }
@@ -6438,10 +6349,10 @@ class DbxFormSearchFormComponent extends AbstractConfigAsyncFormlyFormDirective
         super.ngOnDestroy();
         this.search.complete();
     }
-    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: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormSearchFormComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵ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"] }] }); }
+  `, 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,
@@ -6463,11 +6374,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  * Provides an DbxFormlyContext and has an input for fields.
  */
 class DbxFormlyFieldsContextDirective extends AbstractAsyncFormlyFormDirective {
-    constructor() {
-        super(...arguments);
-        this._fields = new BehaviorSubject(undefined);
-        this.fields$ = this._fields.asObservable();
-    }
+    _fields = new BehaviorSubject(undefined);
+    fields$ = this._fields.asObservable();
     get fields() {
         return this._fields.value;
     }
@@ -6478,8 +6386,8 @@ 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 }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormlyFieldsContextDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵ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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormlyFieldsContextDirective, decorators: [{
             type: Directive,
@@ -6493,8 +6401,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }] } });
 
 class DbxFormlyModule {
-    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: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormlyModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵ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,
@@ -6502,11 +6410,11 @@ class DbxFormlyModule {
             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, 
+        ] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormlyModule, imports: [CommonModule, FormsModule, ReactiveFormsModule, FormlyModule, FormlyMatToggleModule, 
             // Modules (?)
             FormsModule,
-            ReactiveFormsModule] }); }
+            ReactiveFormsModule] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormlyModule, decorators: [{
             type: NgModule,
@@ -6526,9 +6434,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.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] }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormFormlyFormModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵ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 ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormFormlyFormModule, imports: [CommonModule, DbxFormModule, DbxFormlyModule, DbxFormFormlyFieldModule] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormFormlyFormModule, decorators: [{
             type: NgModule,
@@ -6684,10 +6592,10 @@ function timezoneStringField(config = {}) {
  * Provides vertical spacing after a form.
  */
 class DbxFormSpacerComponent {
-    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: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormSpacerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵ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 }); }
+  `, isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormSpacerComponent, decorators: [{
             type: Component,
@@ -6700,9 +6608,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.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] }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormLayoutModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: DbxFormLayoutModule, declarations: [DbxFormSpacerComponent], imports: [CommonModule], exports: [DbxFormSpacerComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormLayoutModule, imports: [CommonModule] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormLayoutModule, decorators: [{
             type: NgModule,
@@ -6714,9 +6622,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.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] }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormExtensionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: DbxFormExtensionModule, exports: [DbxFormModule, DbxFormlyModule, DbxFormFormlyFieldModule, DbxFormFormlyFormModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormExtensionModule, imports: [DbxFormModule, DbxFormlyModule, DbxFormFormlyFieldModule, DbxFormFormlyFormModule] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormExtensionModule, decorators: [{
             type: NgModule,
@@ -6729,5 +6637,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { APP_ACTION_FORM_DISABLED_KEY, AbstractAsyncFormlyFormDirective, AbstractConfigAsyncFormlyFormDirective, AbstractDbxPickableItemFieldDirective, AbstractDbxSearchableFieldDisplayDirective, AbstractDbxSearchableValueFieldDirective, AbstractFormExpandableSectionWrapperDirective, AbstractFormlyFormDirective, AbstractSyncFormlyFormDirective, AutoTouchFieldWrapperComponent, ChecklistItemFieldDataSetBuilder, DBX_DATE_TIME_FIELD_DATE_NOT_IN_SCHEDULE_ERROR, DBX_DATE_TIME_FIELD_MENU_PRESETS_TOKEN, DBX_DATE_TIME_FIELD_TIME_NOT_IN_RANGE_ERROR, 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, FIELD_VALUES_ARE_EQUAL_VALIDATION_KEY, FIELD_VALUE_IS_AVAILABLE_ERROR_VALIDATION_KEY, FIELD_VALUE_IS_AVAILABLE_VALIDATION_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, TAKE_NEXT_UPCOMING_TIME_CONFIG_OBS, 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, toggleDisableFormControl, toggleField, toggleWrapper, usernamePasswordLoginFields, validatorsForFieldConfig, valueSelectionField, workingWrapper, wrappedPhoneAndLabelField, zipCodeField };
+export { APP_ACTION_FORM_DISABLED_KEY, AbstractAsyncFormlyFormDirective, AbstractConfigAsyncFormlyFormDirective, AbstractDbxPickableItemFieldDirective, AbstractDbxSearchableFieldDisplayDirective, AbstractDbxSearchableValueFieldDirective, AbstractFormExpandSectionWrapperDirective, AbstractFormlyFormDirective, AbstractSyncFormlyFormDirective, AutoTouchFieldWrapperComponent, ChecklistItemFieldDataSetBuilder, DBX_DATE_TIME_FIELD_DATE_NOT_IN_SCHEDULE_ERROR, DBX_DATE_TIME_FIELD_MENU_PRESETS_TOKEN, DBX_DATE_TIME_FIELD_TIME_NOT_IN_RANGE_ERROR, 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, FIELD_VALUES_ARE_EQUAL_VALIDATION_KEY, FIELD_VALUE_IS_AVAILABLE_ERROR_VALIDATION_KEY, FIELD_VALUE_IS_AVAILABLE_VALIDATION_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, TAKE_NEXT_UPCOMING_TIME_CONFIG_OBS, 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, toggleDisableFormControl, toggleField, toggleWrapper, usernamePasswordLoginFields, validatorsForFieldConfig, valueSelectionField, workingWrapper, wrappedPhoneAndLabelField, zipCodeField };
 //# sourceMappingURL=dereekb-dbx-form.mjs.map