@dereekb/dbx-form 11.1.8 → 12.0.0

package/fesm2022/dereekb-dbx-form.mjs

@@ -1,64 +1,63 @@
 import * as i0 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 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 { forwardRef, inject, input, Directive, effect, NgModule, output, signal, Component, ChangeDetectionStrategy, viewChild, InjectionToken, computed, ElementRef, Injectable, ChangeDetectorRef, ViewChild, EventEmitter, Output, Input, makeEnvironmentProviders } from '@angular/core';
+import * as i1$1 from '@dereekb/dbx-web';
+import { DbxActionTransitionSafetyDirective, DbxAnchorComponent, DbxSectionLayoutModule, DbxFlexGroupDirective, DbxSubSectionComponent, DbxLoadingComponent, dbxValueListItemDecisionFunction, DbxListModifierModule, AbstractDbxSelectionListWrapperDirective, provideDbxListViewWrapper, DbxListWrapperComponentImportsModule, DEFAULT_LIST_WRAPPER_COMPONENT_CONFIGURATION_TEMPLATE, AbstractDbxSelectionListViewDirective, addConfigToValueListItems, provideDbxListView, DbxSelectionValueListViewContentComponent, AbstractDbxValueListViewItemComponent, DbxLoadingModule, DbxButtonComponent, DbxButtonSpacerDirective, DbxActionModule, CompactContextStore, mapCompactModeObs, DbxBarDirective, DbxButtonModule } 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 * 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 { map, of, shareReplay, switchMap, first, exhaustMap, catchError, delay, filter, combineLatest, distinctUntilChanged, Subject, tap, takeUntil, EMPTY, throttleTime, mergeMap, startWith, BehaviorSubject, debounceTime, scan, skip, combineLatestWith, interval, merge, timer } from 'rxjs';
+import * as i2$3 from '@dereekb/dbx-core';
+import { DbxActionContextStoreSourceInstance, AbstractSubscriptionDirective, DbxInjectionComponent, mergeDbxInjectionComponentConfigs, DbxDatePipeModule, DbxValuePipeModule } from '@dereekb/dbx-core';
+import { LockSet, makeIsModifiedFunctionObservable, SubscriptionObject, asObservable, cleanup, errorOnEmissionsInPeriod, maybeValueFromObservableOrValue, filterMaybe, valueFromFinishedLoadingState, switchMapFilterMaybe, switchMapMaybeDefault, SimpleLoadingContext, distinctUntilHasDifferentValues, startWithBeginLoading, mapLoadingStateResults, successResult, listLoadingStateContext, mapIsListLoadingStateWithEmptyValue, loadingStateContext, isLoadingStateInLoadingState, isLoadingStateWithDefinedValue, isLoadingStateLoading, beginLoading, mapLoadingStateValueWithOperator, skipFirstMaybe, asObservableFromGetter, asyncPusherCache, scanCount } from '@dereekb/rxjs';
+import { toObservable, toSignal } from '@angular/core/rxjs-interop';
 import * as i2 from '@angular/forms';
-import { FormsModule, ReactiveFormsModule, FormControl, Validators, FormGroup } from '@angular/forms';
-import * as i4 from '@angular/material/core';
-import { MatRippleModule, MatNativeDateModule, DateAdapter } from '@angular/material/core';
-import * as i4$1 from '@angular/material/checkbox';
+import { ReactiveFormsModule, FormControl, FormsModule, Validators, FormGroup } from '@angular/forms';
+import * as i1$2 from '@ngx-formly/core';
+import { FieldType, FieldWrapper, FormlyModule, FieldArrayType, FormlyForm } from '@ngx-formly/core';
+import * as i1$5 from '@angular/common';
+import { NgIf, AsyncPipe, NgClass, NgStyle, NgTemplateOutlet, CommonModule } from '@angular/common';
+import * as i2$1 from '@angular/material/checkbox';
 import { MatCheckboxModule } from '@angular/material/checkbox';
-import * as i7 from '@angular/material/icon';
+import * as i3 from '@angular/material/core';
+import { MatRippleModule, MatOptionModule, DateAdapter, MAT_DATE_LOCALE } from '@angular/material/core';
+import * as i1 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
-import * as i6$1 from '@angular/material/button';
-import { MatButtonModule } from '@angular/material/button';
-import * as i10 from '@ngbracket/ngx-layout/flex';
-import { FlexLayoutModule } from '@ngbracket/ngx-layout';
+import * as i6 from '@angular/material/button';
+import { MatIconButton, MatButtonModule } from '@angular/material/button';
 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, filterMaybeArrayValues, 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, BooleanStringKeyArrayUtility, iterablesAreSetEquivalent, capitalizeFirstLetter } from '@dereekb/util';
-import * as i2$1 from '@angular/material/slide-toggle';
-import { MatSlideToggleModule } from '@angular/material/slide-toggle';
-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$3 from '@angular/material/autocomplete';
-import { MatAutocompleteModule } from '@angular/material/autocomplete';
-import * as i4$5 from '@angular/material/form-field';
-import { MatFormFieldModule } from '@angular/material/form-field';
-import * as i4$2 from '@angular/material/input';
-import { MatInputModule } from '@angular/material/input';
+import { MatSlideToggle } from '@angular/material/slide-toggle';
+import * as i2$2 from '@angular/material/divider';
+import { MatDividerModule, MatDivider } from '@angular/material/divider';
+import * as i4 from '@angular/material/input';
+import { MatInput, MatInputModule } from '@angular/material/input';
 import { FieldType as FieldType$1, FormlyMaterialModule } from '@ngx-formly/material';
-import { camelCase } from 'change-case';
-import * as i6$2 from '@angular/material/chips';
+import { camelCase } from 'change-case-all';
+import * as i1$3 from '@angular/material/chips';
 import { MatChipsModule } from '@angular/material/chips';
-import { MatListModule } from '@angular/material/list';
+import * as i5 from '@angular/material/autocomplete';
+import { MatAutocompleteModule } from '@angular/material/autocomplete';
 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, 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 from '@angular/material/select';
-import { MatSelectModule } from '@angular/material/select';
-import * as i4$6 from '@angular/material/datepicker';
-import { MatDatepickerModule, DateRange, MAT_DATE_RANGE_SELECTION_STRATEGY, MatCalendar } from '@angular/material/datepicker';
-import * as i8 from '@angular/material/menu';
-import { MatMenuModule } from '@angular/material/menu';
-import * as i3$1 from 'ngx-editor';
+import { MatSelect, MatOption, MatOptgroup } from '@angular/material/select';
+import * as i1$4 from 'ngx-editor';
 import { Editor, NgxEditorModule } from 'ngx-editor';
-import * as i4$4 from '@angular/cdk/drag-drop';
+import * as i2$4 from '@angular/cdk/drag-drop';
 import { DragDropModule } from '@angular/cdk/drag-drop';
+import * as i4$1 from '@angular/material/form-field';
+import { MatFormFieldModule, MAT_FORM_FIELD_DEFAULT_OPTIONS } from '@angular/material/form-field';
+import * as i4$2 from '@angular/material/datepicker';
+import { DateRange, MAT_DATE_RANGE_SELECTION_STRATEGY, MatCalendar, MatDatepickerModule } from '@angular/material/datepicker';
+import * as i8 from '@angular/material/menu';
+import { MatMenuModule } from '@angular/material/menu';
+import * as i10 from '@ngbracket/ngx-layout/flex';
+import * as i11 from '@ngbracket/ngx-layout/extended';
+import { FlexLayoutModule } from '@ngbracket/ngx-layout';
 import { FormlyMatSliderModule } from '@ngx-formly/material/slider';
-import * as i3$2 from 'ngx-mat-intl-tel-input';
+import * as i3$1 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';
+import { provideDateFnsAdapter } from '@angular/material-date-fns-adapter';
+import { enUS } from 'date-fns/locale';
 
 /**
  * Current state of a DbxForm
@@ -113,20 +112,38 @@ class DbxActionFormDirective {
     form = inject((DbxMutableForm), { host: true });
     source = inject((DbxActionContextStoreSourceInstance));
     lockSet = new LockSet();
+    /**
+     * Whether or not to disable the form while the action is working.
+     *
+     * Defaults to true.
+     */
+    dbxActionFormDisabledOnWorking = input(true);
     /**
      * Optional validator that checks whether or not the value is
      * ready to send before the context store is marked enabled.
      */
-    dbxActionFormValidator;
+    dbxActionFormIsValid = input();
+    /**
+     * Optional function that checks whether or not the value is still the same/equal.
+     */
+    dbxActionFormIsEqual = input();
     /**
      * Optional function that checks whether or not the value has been modified.
+     *
+     * If dbxActionFormIsEqual is provided, this will be ignored.
      */
-    dbxActionFormModified;
+    dbxActionFormIsModified = input();
     /**
      * Optional function that maps the form's value to the source's value.
      */
-    dbxActionFormMapValue;
-    _formDisabledWhileWorking = new BehaviorSubject(true);
+    dbxActionFormMapValue = input();
+    dbxActionFormDisabledOnWorking$ = toObservable(this.dbxActionFormDisabledOnWorking);
+    isValidFunction$ = toObservable(this.dbxActionFormIsValid).pipe(map((x) => x ?? (() => of(true))), shareReplay(1));
+    isModifiedFunction$ = makeIsModifiedFunctionObservable({
+        isModified: toObservable(this.dbxActionFormIsModified),
+        isEqual: toObservable(this.dbxActionFormIsEqual)
+    }).pipe(shareReplay(1));
+    mapValueFunction$ = toObservable(this.dbxActionFormMapValue);
     _triggeredSub = new SubscriptionObject();
     _isCompleteSub = new SubscriptionObject();
     _isWorkingSub = new SubscriptionObject();
@@ -136,12 +153,6 @@ class DbxActionFormDirective {
         }
         this.lockSet.addChildLockSet(this.source.lockSet, 'source');
     }
-    get formDisabledOnWorking() {
-        return this._formDisabledWhileWorking.value;
-    }
-    set formDisabledOnWorking(formDisabledOnWorking) {
-        this._formDisabledWhileWorking.next(Boolean(formDisabledOnWorking ?? true));
-    }
     ngOnInit() {
         // Pass data from the form to the source when triggered.
         this._triggeredSub.subscription = this.source.triggered$
@@ -184,23 +195,13 @@ class DbxActionFormDirective {
                 // More than a certain amount of updates implies that it is being typed into/used.
                 // 3 changes and 2 seconds are arbitrary values derived from guesses about any slow/late changes that may come from external directives for setup.
                 const isProbablyTouched = !event.untouched || ((event.changesCount ?? 0) > 3 && isPast(addSeconds(event.lastResetAt ?? new Date(), 2)));
-                let validatorObs;
-                const initialIsValidCheck = event.isComplete;
-                if (initialIsValidCheck) {
-                    validatorObs = this.dbxActionFormValidator ? this.dbxActionFormValidator(value) : of(true);
-                }
-                else {
-                    validatorObs = of(false);
-                }
-                let modifiedObs;
+                // create overrides
+                const returnFalseFunction = () => of(false);
+                const runIsValidCheck = event.isComplete;
+                const isValidFunction = runIsValidCheck ? undefined : returnFalseFunction;
                 const isConsideredModified = event.pristine === false && isProbablyTouched;
-                if (isConsideredModified) {
-                    modifiedObs = this.dbxActionFormModified ? this.dbxActionFormModified(value) : of(true);
-                }
-                else {
-                    modifiedObs = of(false);
-                }
-                return combineLatest([validatorObs, modifiedObs]).pipe(first(), map(([valid, modified]) => ({ valid, modified, value, event })));
+                const isModifiedFunction = isConsideredModified ? undefined : returnFalseFunction;
+                return this.checkIsValidAndIsModified(value, { isValidFunction, isModifiedFunction }).pipe(map(([valid, modified]) => ({ valid, modified, value, event })), first());
             }));
         }))
             .subscribe(({ valid, modified /*, value, event */ }) => {
@@ -211,8 +212,8 @@ class DbxActionFormDirective {
             this.source.enable(APP_ACTION_FORM_DISABLED_KEY, valid);
         });
         // Watch the working state and disable form while working
-        this._isWorkingSub.subscription = combineLatest([this.source.isWorking$, this._formDisabledWhileWorking])
-            .pipe(map(([isWorking, lockOnWorking]) => lockOnWorking && isWorking), distinctUntilChanged())
+        this._isWorkingSub.subscription = combineLatest([this.source.isWorking$, this.dbxActionFormDisabledOnWorking$])
+            .pipe(map(([isWorking, disableFormWhileWorking]) => disableFormWhileWorking !== false && isWorking), distinctUntilChanged())
             .subscribe((disable) => {
             this.form.setDisabled(APP_ACTION_FORM_DISABLED_KEY, disable);
         });
@@ -223,40 +224,40 @@ class DbxActionFormDirective {
             this._triggeredSub.destroy();
             this._isCompleteSub.destroy();
             this._isWorkingSub.destroy();
-            this._formDisabledWhileWorking.complete();
             this.form.setDisabled(APP_ACTION_FORM_DISABLED_KEY, false);
         });
     }
+    checkIsValidAndIsModified(value, overrides) {
+        const { isModifiedFunction: overrideIsModifiedFunction, isValidFunction: overrideIsValidFunction } = overrides ?? {};
+        const isValidFunctionObs = overrideIsValidFunction != null ? of(overrideIsValidFunction) : this.isValidFunction$;
+        const isModifiedFunctionObs = overrideIsModifiedFunction != null ? of(overrideIsModifiedFunction) : this.isModifiedFunction$;
+        return combineLatest([isValidFunctionObs, isModifiedFunctionObs]).pipe(switchMap(([isValid, isModified]) => {
+            return combineLatest([isValid(value), isModified(value)]).pipe(map(([valid, modified]) => [valid, modified]));
+        }));
+    }
     preCheckReadyValue(value) {
-        const validatorObs = this.dbxActionFormValidator ? this.dbxActionFormValidator(value) : of(true);
-        const modifiedObs = this.dbxActionFormModified ? this.dbxActionFormModified(value) : of(true);
-        return combineLatest([validatorObs, modifiedObs]).pipe(first(), map(([valid, modified]) => valid && modified));
+        return this.checkIsValidAndIsModified(value);
     }
     readyValue(value) {
-        if (this.dbxActionFormMapValue) {
-            return asObservable(this.dbxActionFormMapValue(value));
-        }
-        else {
-            return of({ value: value });
-        }
+        return this.mapValueFunction$.pipe(switchMap((mapFunction) => {
+            if (mapFunction) {
+                return asObservable(mapFunction(value));
+            }
+            else {
+                return of({ value: value });
+            }
+        }));
     }
-    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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxActionFormDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.2.13", type: DbxActionFormDirective, isStandalone: true, selector: "[dbxActionForm]", inputs: { dbxActionFormDisabledOnWorking: { classPropertyName: "dbxActionFormDisabledOnWorking", publicName: "dbxActionFormDisabledOnWorking", isSignal: true, isRequired: false, transformFunction: null }, dbxActionFormIsValid: { classPropertyName: "dbxActionFormIsValid", publicName: "dbxActionFormIsValid", isSignal: true, isRequired: false, transformFunction: null }, dbxActionFormIsEqual: { classPropertyName: "dbxActionFormIsEqual", publicName: "dbxActionFormIsEqual", isSignal: true, isRequired: false, transformFunction: null }, dbxActionFormIsModified: { classPropertyName: "dbxActionFormIsModified", publicName: "dbxActionFormIsModified", isSignal: true, isRequired: false, transformFunction: null }, dbxActionFormMapValue: { classPropertyName: "dbxActionFormMapValue", publicName: "dbxActionFormMapValue", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxActionFormDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxActionFormDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[dbxActionForm]'
+                    selector: '[dbxActionForm]',
+                    standalone: true
                 }]
-        }], ctorParameters: function () { return []; }, propDecorators: { dbxActionFormValidator: [{
-                type: Input
-            }], dbxActionFormModified: [{
-                type: Input
-            }], dbxActionFormMapValue: [{
-                type: Input
-            }], formDisabledOnWorking: [{
-                type: Input
-            }] } });
+        }], ctorParameters: () => [] });
 
 /**
  * Extension of DbxActionTransitionSafetyDirective that forces the form to update first.
@@ -265,58 +266,66 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  */
 class DbxActionFormSafetyDirective extends DbxActionTransitionSafetyDirective {
     dbxActionForm = inject((DbxActionFormDirective), { host: true });
-    inputSafetyType = 'auto';
+    dbxActionFormSafety = input('auto');
+    _dbxActionFormSafetyUpdateEffect = effect(() => this._safetyType.next(this.dbxActionFormSafety()));
     _handleOnBeforeTransition(transition) {
         this.dbxActionForm.form.forceFormUpdate();
         return super._handleOnBeforeTransition(transition);
     }
-    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 });
+    ngOnDestroy() {
+        super.ngOnDestroy();
+        this._dbxActionFormSafetyUpdateEffect.destroy();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxActionFormSafetyDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.2.13", type: DbxActionFormSafetyDirective, isStandalone: true, selector: "[dbxActionFormSafety]", inputs: { dbxActionFormSafety: { classPropertyName: "dbxActionFormSafety", publicName: "dbxActionFormSafety", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxActionFormSafetyDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxActionFormSafetyDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[dbxActionFormSafety]'
+                    selector: '[dbxActionFormSafety]',
+                    standalone: true
                 }]
-        }], propDecorators: { inputSafetyType: [{
-                type: Input,
-                args: ['dbxActionFormSafety']
-            }] } });
+        }] });
 
+/**
+ * @deprecated import DbxActionFormSafetyDirective directly
+ */
 class DbxFormActionTransitionModule {
-    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] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxFormActionTransitionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: DbxFormActionTransitionModule, imports: [DbxActionFormSafetyDirective], exports: [DbxActionFormSafetyDirective] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxFormActionTransitionModule });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormActionTransitionModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxFormActionTransitionModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [CommonModule],
-                    declarations: [DbxActionFormSafetyDirective],
+                    imports: [DbxActionFormSafetyDirective],
                     exports: [DbxActionFormSafetyDirective]
                 }]
         }] });
 
+/**
+ * @deprecated Import DbxActionFormDirective directly instead.
+ */
 class DbxFormActionModule {
-    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] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxFormActionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: DbxFormActionModule, imports: [DbxActionFormDirective], exports: [DbxActionFormDirective] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxFormActionModule });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormActionModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxFormActionModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [CommonModule, MatDialogModule],
-                    declarations: [DbxActionFormDirective],
+                    imports: [DbxActionFormDirective],
                     exports: [DbxActionFormDirective]
                 }]
         }] });
 
-function dbxFormSourceObservable(form, inputObs, mode$) {
-    return dbxFormSourceObservableFromStream(form.stream$, inputObs, mode$);
+function dbxFormSourceObservable(form, inputObs, modeObs) {
+    return dbxFormSourceObservableFromStream(form.stream$, inputObs, modeObs);
 }
-function dbxFormSourceObservableFromStream(stream$, inputObs, mode$) {
+function dbxFormSourceObservableFromStream(streamObs, inputObs, modeObs) {
     const value$ = asObservable(inputObs).pipe(shareReplay(1)); // catch/share the latest emission
-    const state$ = stream$.pipe(map((x) => x.state), distinctUntilChanged());
+    const state$ = streamObs.pipe(map((x) => x.state), distinctUntilChanged());
+    const mode$ = asObservable(modeObs).pipe(distinctUntilChanged());
     return combineLatest([mode$, value$]).pipe(map((x) => x[0]), distinctUntilChanged(), switchMap((mode) => {
         if (mode === 'reset') {
             // reset only
@@ -331,12 +340,12 @@ function dbxFormSourceObservableFromStream(stream$, inputObs, mode$) {
                         else {
                             return [value, false];
                         }
-                    }), tap(([value, send]) => {
+                    }), tap(([_, send]) => {
                         firstValueSent = true;
                         if (!send) {
                             doneSubject.next(undefined);
                         }
-                    }), filter(([value, send]) => send), map((x) => x[0]), takeUntil(doneSubject), cleanup(() => {
+                    }), filter(([_, send]) => send), map(([value, _]) => value), takeUntil(doneSubject), cleanup(() => {
                         doneSubject.complete();
                     }));
                 }
@@ -373,93 +382,58 @@ function dbxFormSourceObservableFromStream(stream$, inputObs, mode$) {
  */
 class DbxFormSourceDirective extends AbstractSubscriptionDirective {
     form = inject((DbxMutableForm), { host: true });
-    _mode = new BehaviorSubject('reset');
-    get mode() {
-        return this._mode.value;
-    }
-    set mode(mode) {
-        this._mode.next(mode);
-    }
-    set obs(obs) {
-        this.setObs(obs);
-    }
-    setObs(inputObs) {
+    dbxFormSourceMode = input();
+    dbxFormSource = input();
+    _setFormSourceObservableEffect = effect(() => {
+        const formSource = this.dbxFormSource();
+        const mode = this.dbxFormSourceMode() ?? 'reset';
         let subscription;
-        if (inputObs) {
-            subscription = dbxFormSourceObservableFromStream(this.form.stream$, inputObs, this._mode).subscribe((x) => {
+        if (formSource) {
+            subscription = dbxFormSourceObservableFromStream(this.form.stream$, formSource, mode).subscribe((x) => {
                 this.form.setValue(x);
             });
         }
         this.sub = subscription;
-    }
-    ngOnDestroy() {
-        super.ngOnDestroy();
-        this._mode.complete();
-    }
-    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 });
+    });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxFormSourceDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.2.13", type: DbxFormSourceDirective, isStandalone: true, selector: "[dbxFormSource]", inputs: { dbxFormSourceMode: { classPropertyName: "dbxFormSourceMode", publicName: "dbxFormSourceMode", isSignal: true, isRequired: false, transformFunction: null }, dbxFormSource: { classPropertyName: "dbxFormSource", publicName: "dbxFormSource", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormSourceDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxFormSourceDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[dbxFormSource]'
+                    selector: '[dbxFormSource]',
+                    standalone: true
                 }]
-        }], propDecorators: { mode: [{
-                type: Input,
-                args: ['dbxFormSourceMode']
-            }], obs: [{
-                type: Input,
-                args: ['dbxFormSource']
-            }] } });
+        }] });
 
+const DEFAULT_DBX_FORM_LOADING_SOURCE_DIRECTIVE_MODE = 'reset';
 /**
  * Used with a FormComponent to set the value from a LoadingState when the value is available.
+ *
+ * Only passes non-null values from the source.
  */
 class DbxFormLoadingSourceDirective extends AbstractSubscriptionDirective {
     form = inject((DbxMutableForm), { host: true });
-    _mode = new BehaviorSubject('reset');
-    get mode() {
-        return this._mode.value;
-    }
-    set mode(mode) {
-        this._mode.next(mode);
-    }
-    /**
-     * Sets a LoadingContext that is watched for the loading state.
-     */
-    set obs(obs) {
-        this._setObs(obs);
-    }
-    _setObs(inputObs) {
-        let subscription;
-        if (inputObs) {
-            subscription = dbxFormSourceObservableFromStream(this.form.stream$, inputObs, this._mode).subscribe((x) => {
-                if (isLoadingStateFinishedLoading(x)) {
-                    this.form.setValue(x.value);
-                }
-            });
-        }
-        this.sub = subscription;
-    }
-    ngOnDestroy() {
-        super.ngOnDestroy();
-        this._mode.complete();
+    dbxFormLoadingSourceMode = input(DEFAULT_DBX_FORM_LOADING_SOURCE_DIRECTIVE_MODE, { transform: (x) => x ?? DEFAULT_DBX_FORM_LOADING_SOURCE_DIRECTIVE_MODE });
+    dbxFormLoadingSource = input();
+    mode$ = toObservable(this.dbxFormLoadingSourceMode);
+    source$ = toObservable(this.dbxFormLoadingSource).pipe(maybeValueFromObservableOrValue(), filterMaybe(), valueFromFinishedLoadingState());
+    constructor() {
+        super();
+        this.sub = dbxFormSourceObservableFromStream(this.form.stream$, this.source$, this.mode$).subscribe((x) => {
+            this.form.setValue(x);
+        });
     }
-    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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxFormLoadingSourceDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.2.13", type: DbxFormLoadingSourceDirective, isStandalone: true, selector: "[dbxFormLoadingSource]", inputs: { dbxFormLoadingSourceMode: { classPropertyName: "dbxFormLoadingSourceMode", publicName: "dbxFormLoadingSourceMode", isSignal: true, isRequired: false, transformFunction: null }, dbxFormLoadingSource: { classPropertyName: "dbxFormLoadingSource", publicName: "dbxFormLoadingSource", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormLoadingSourceDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxFormLoadingSourceDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[dbxFormLoadingSource]'
+                    selector: '[dbxFormLoadingSource]',
+                    standalone: true
                 }]
-        }], propDecorators: { mode: [{
-                type: Input,
-                args: ['dbxFormLoadingSourceMode']
-            }], obs: [{
-                type: Input,
-                args: ['dbxFormLoadingSource']
-            }] } });
+        }], ctorParameters: () => [] });
 
 /**
  * Used to see form value changes.
@@ -468,46 +442,48 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  */
 class DbxFormValueChangesDirective extends AbstractSubscriptionDirective {
     form = inject((DbxForm), { host: true });
-    dbxFormValueChange = new EventEmitter();
+    dbxFormValueChange = output();
     ngOnInit() {
         this.sub = this.form.stream$
             .pipe(mergeMap((x) => this.form.getValue().pipe(first(), map((value) => ({ isComplete: x.isComplete, value })))), delay(0))
             .subscribe(({ isComplete, value }) => {
             if (isComplete) {
-                this.dbxFormValueChange.next(value);
+                this.dbxFormValueChange.emit(value);
             }
             else {
-                this.dbxFormValueChange.next(undefined);
+                this.dbxFormValueChange.emit(undefined);
             }
         });
     }
-    ngOnDestroy() {
-        super.ngOnDestroy();
-        this.dbxFormValueChange.complete();
-    }
-    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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxFormValueChangesDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: DbxFormValueChangesDirective, isStandalone: true, selector: "[dbxFormValueChange]", outputs: { dbxFormValueChange: "dbxFormValueChange" }, usesInheritance: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormValueChangesDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxFormValueChangesDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[dbxFormValueChange]'
+                    selector: '[dbxFormValueChange]',
+                    standalone: true
                 }]
-        }], propDecorators: { dbxFormValueChange: [{
-                type: Output
-            }] } });
+        }] });
 
+const importsAndExports$8 = [DbxFormSourceDirective, DbxFormValueChangesDirective, DbxFormLoadingSourceDirective];
+/**
+ * @deprecated import the directives directly instead.
+ *
+ * @see DbxFormSourceDirective
+ * @see DbxFormValueChangesDirective
+ * @see DbxFormLoadingSourceDirective
+ */
 class DbxFormIoModule {
-    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] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxFormIoModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: DbxFormIoModule, imports: [DbxFormSourceDirective, DbxFormValueChangesDirective, DbxFormLoadingSourceDirective], exports: [DbxFormSourceDirective, DbxFormValueChangesDirective, DbxFormLoadingSourceDirective] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxFormIoModule });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormIoModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxFormIoModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [CommonModule],
-                    declarations: [DbxFormSourceDirective, DbxFormValueChangesDirective, DbxFormLoadingSourceDirective],
-                    exports: [DbxFormSourceDirective, DbxFormValueChangesDirective, DbxFormLoadingSourceDirective]
+                    imports: importsAndExports$8,
+                    exports: importsAndExports$8
                 }]
         }] });
 
@@ -524,11 +500,11 @@ function streamValueFromControl(fromControl, path) {
 }
 
 class DbxFormModule {
-    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] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxFormModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: DbxFormModule, exports: [DbxFormActionTransitionModule, DbxFormActionModule, DbxFormIoModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxFormModule, imports: [DbxFormActionTransitionModule, DbxFormActionModule, DbxFormIoModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxFormModule, decorators: [{
             type: NgModule,
             args: [{
                     exports: [DbxFormActionTransitionModule, DbxFormActionModule, DbxFormIoModule]
@@ -560,45 +536,86 @@ function defaultValidationMessages() {
 
 // MARK: Default
 class DbxDefaultChecklistItemFieldDisplayComponent {
-    displayContent;
-    get label() {
-        return this.displayContent?.label;
+    _displayContentSignal = signal(undefined);
+    displayContentSignal = this._displayContentSignal.asReadonly();
+    setDisplayContent(displayContent) {
+        this._displayContentSignal.set(displayContent);
     }
-    get sublabel() {
-        return this.displayContent?.sublabel;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxDefaultChecklistItemFieldDisplayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: DbxDefaultChecklistItemFieldDisplayComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: `
+    @if (displayContentSignal()) {
+      <div class="dbx-default-checklist-item-field">
+        @if (displayContentSignal()?.label) {
+          <div class="item-label">{{ displayContentSignal()?.label }}</div>
+        }
+        @if (displayContentSignal()?.sublabel) {
+          <div class="item-sublabel">{{ displayContentSignal()?.sublabel }}</div>
+        }
+        @if (displayContentSignal()?.description) {
+          <div class="dbx-hint item-description">{{ displayContentSignal()?.description }}</div>
+        }
+      </div>
     }
-    get description() {
-        return this.displayContent?.description;
-    }
-    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, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxDefaultChecklistItemFieldDisplayComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxDefaultChecklistItemFieldDisplayComponent, decorators: [{
             type: Component,
             args: [{
                     template: `
-    <div *ngIf="displayContent" class="dbx-default-checklist-item-field">
-      <div *ngIf="label" class="item-label">{{ label }}</div>
-      <div *ngIf="sublabel" class="item-sublabel">{{ sublabel }}</div>
-      <div *ngIf="description" class="dbx-hint item-description">{{ description }}</div>
-    </div>
-  `
+    @if (displayContentSignal()) {
+      <div class="dbx-default-checklist-item-field">
+        @if (displayContentSignal()?.label) {
+          <div class="item-label">{{ displayContentSignal()?.label }}</div>
+        }
+        @if (displayContentSignal()?.sublabel) {
+          <div class="item-sublabel">{{ displayContentSignal()?.sublabel }}</div>
+        }
+        @if (displayContentSignal()?.description) {
+          <div class="dbx-hint item-description">{{ displayContentSignal()?.description }}</div>
+        }
+      </div>
+    }
+  `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    standalone: true,
+                    imports: [NgIf]
                 }]
-        }], propDecorators: { displayContent: [{
-                type: Input
-            }] } });
+        }] });
 
+class DbxChecklistItemContentComponent extends AbstractSubscriptionDirective {
+    checklistItemFieldComponent = inject((DbxChecklistItemFieldComponent));
+    config = {
+        componentClass: this.checklistItemFieldComponent.componentClass,
+        init: (instance) => {
+            this.sub = this.checklistItemFieldComponent.displayContent$.subscribe((content) => {
+                instance.setDisplayContent(content);
+            });
+        }
+    };
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxChecklistItemContentComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: DbxChecklistItemContentComponent, isStandalone: true, selector: "dbx-checklist-item-content-component", usesInheritance: true, ngImport: i0, template: `
+    <dbx-injection [config]="config"></dbx-injection>
+  `, isInline: true, dependencies: [{ kind: "component", type: DbxInjectionComponent, selector: "dbx-injection, [dbxInjection], [dbx-injection]", inputs: ["config", "template"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxChecklistItemContentComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'dbx-checklist-item-content-component',
+                    template: `
+    <dbx-injection [config]="config"></dbx-injection>
+  `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    standalone: true,
+                    imports: [DbxInjectionComponent]
+                }]
+        }] });
 class DbxChecklistItemFieldComponent extends FieldType {
-    _displayContent = new BehaviorSubject(undefined);
-    displayContent$ = this._displayContent.pipe(switchMapMaybeObs(), distinctUntilChanged(), shareReplay(1));
+    _displayContentObs = signal(undefined);
+    displayContent$ = toObservable(this._displayContentObs).pipe(switchMapFilterMaybe(), 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));
+    anchorSignal = toSignal(this.anchor$);
+    rippleDisabledSignal = toSignal(this.rippleDisabled$, { initialValue: false });
     get formGroup() {
         return this.form;
     }
@@ -624,43 +641,14 @@ class DbxChecklistItemFieldComponent extends FieldType {
         return this.checklistField.componentClass ?? DbxDefaultChecklistItemFieldDisplayComponent;
     }
     ngOnInit() {
-        this._displayContent.next(this.checklistField.displayContentObs);
+        this._displayContentObs.set(this.checklistField.displayContent);
     }
-    ngOnDestroy() {
-        this._displayContent.complete();
-    }
-    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 {
-    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: i6.DbxInjectionComponent, selector: "dbx-injection, [dbxInjection], [dbx-injection]", inputs: ["config", "template"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxChecklistItemFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: DbxChecklistItemFieldComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<div class=\"dbx-checklist-item-wrapper\" [formGroup]=\"formGroup\">\n  @if (label) {\n    <div class=\"dbx-checklist-item-label\">{{ label }}</div>\n  }\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]=\"anchorSignal()\">\n        <div class=\"dbx-checklist-item-content\" matRipple [matRippleDisabled]=\"rippleDisabledSignal()\">\n          <dbx-checklist-item-content-component></dbx-checklist-item-content-component>\n          <span class=\"spacer\"></span>\n          @if (!rippleDisabledSignal()) {\n            <mat-icon>navigate_next</mat-icon>\n          }\n        </div>\n      </dbx-anchor>\n    </div>\n  </div>\n  @if (description) {\n    <div class=\"dbx-hint\">{{ description }}</div>\n  }\n</div>\n", dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { 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: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i2$1.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: DbxAnchorComponent, selector: "dbx-anchor, [dbx-anchor]", inputs: ["block"] }, { kind: "ngmodule", type: MatRippleModule }, { kind: "directive", type: i3.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: DbxChecklistItemContentComponent, selector: "dbx-checklist-item-content-component" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxChecklistItemContentComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxChecklistItemFieldComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'dbx-checklist-item-content-component',
-                    template: `
-    <dbx-injection [config]="config"></dbx-injection>
-  `
-                }]
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [ReactiveFormsModule, MatCheckboxModule, DbxAnchorComponent, MatRippleModule, MatIconModule, NgIf, AsyncPipe, DbxChecklistItemContentComponent], template: "<div class=\"dbx-checklist-item-wrapper\" [formGroup]=\"formGroup\">\n  @if (label) {\n    <div class=\"dbx-checklist-item-label\">{{ label }}</div>\n  }\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]=\"anchorSignal()\">\n        <div class=\"dbx-checklist-item-content\" matRipple [matRippleDisabled]=\"rippleDisabledSignal()\">\n          <dbx-checklist-item-content-component></dbx-checklist-item-content-component>\n          <span class=\"spacer\"></span>\n          @if (!rippleDisabledSignal()) {\n            <mat-icon>navigate_next</mat-icon>\n          }\n        </div>\n      </dbx-anchor>\n    </div>\n  </div>\n  @if (description) {\n    <div class=\"dbx-hint\">{{ description }}</div>\n  }\n</div>\n" }]
         }] });
 
 class DbxFormInfoWrapperComponent extends FieldWrapper {
@@ -670,35 +658,38 @@ class DbxFormInfoWrapperComponent extends FieldWrapper {
     onInfoClick() {
         this.infoWrapper.onInfoClick();
     }
-    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">
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxFormInfoWrapperComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: DbxFormInfoWrapperComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
+    <div class="dbx-form-info-wrapper dbx-flex-bar">
+      <div class="dbx-form-info-wrapper-content dbx-flex-grow">
         <ng-container #fieldComponent></ng-container>
       </div>
-      <div class="dbx-form-info-wrapper-info" fxFlex="noshrink" fxLayout="column" fxLayoutAlign="center center">
+      <div class="dbx-form-info-wrapper-info dbx-flex-noshrink dbx-flex-column dbx-flex-center">
         <button mat-icon-button [attr.aria-label]="'show info button for ' + (to.label || 'section')" (click)="onInfoClick()">
           <mat-icon>info</mat-icon>
         </button>
       </div>
     </div>
-  `, isInline: true, 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"] }] });
+  `, isInline: true, dependencies: [{ kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormInfoWrapperComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxFormInfoWrapperComponent, decorators: [{
             type: Component,
             args: [{
                     template: `
-    <div class="dbx-form-info-wrapper" fxLayout="row">
-      <div class="dbx-form-info-wrapper-content" fxFlex="grow">
+    <div class="dbx-form-info-wrapper dbx-flex-bar">
+      <div class="dbx-form-info-wrapper-content dbx-flex-grow">
         <ng-container #fieldComponent></ng-container>
       </div>
-      <div class="dbx-form-info-wrapper-info" fxFlex="noshrink" fxLayout="column" fxLayoutAlign="center center">
+      <div class="dbx-form-info-wrapper-info dbx-flex-noshrink dbx-flex-column dbx-flex-center">
         <button mat-icon-button [attr.aria-label]="'show info button for ' + (to.label || 'section')" (click)="onInfoClick()">
           <mat-icon>info</mat-icon>
         </button>
       </div>
     </div>
-  `
+  `,
+                    imports: [MatIconButton, MatIconModule],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    standalone: true
                 }]
         }] });
 
@@ -706,14 +697,14 @@ class DbxFormSectionWrapperComponent extends FieldWrapper {
     get headerConfig() {
         return this.props;
     }
-    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: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxFormSectionWrapperComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: DbxFormSectionWrapperComponent, isStandalone: true, 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: i5.DbxSectionComponent, selector: "dbx-section", inputs: ["elevate"] }] });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: DbxSectionLayoutModule }, { kind: "component", type: i1$1.DbxSectionComponent, selector: "dbx-section", inputs: ["elevate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormSectionWrapperComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxFormSectionWrapperComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'dbx-form-section-wrapper',
@@ -721,7 +712,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
     <dbx-section [headerConfig]="headerConfig">
       <ng-container #fieldComponent></ng-container>
     </dbx-section>
-  `
+  `,
+                    imports: [DbxSectionLayoutModule],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    standalone: true
                 }]
         }] });
 
@@ -738,21 +732,24 @@ class DbxFormFlexWrapperComponent extends FieldWrapper {
     get breakToColumn() {
         return this.flexWrapper.breakToColumn ?? false;
     }
-    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: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxFormFlexWrapperComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: DbxFormFlexWrapperComponent, isStandalone: true, 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: i5.DbxFlexGroupDirective, selector: "[dbxFlexGroup]", inputs: ["breakToColumn", "content", "relative", "breakpoint"] }] });
+  `, isInline: true, dependencies: [{ kind: "directive", type: DbxFlexGroupDirective, selector: "[dbxFlexGroup]", inputs: ["content", "breakToColumn", "relative", "breakpoint"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormFlexWrapperComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxFormFlexWrapperComponent, decorators: [{
             type: Component,
             args: [{
                     template: `
     <div class="dbx-form-flex-section" dbxFlexGroup [content]="false" [relative]="relative" [breakpoint]="breakpoint" [breakToColumn]="breakToColumn">
       <ng-container #fieldComponent></ng-container>
     </div>
-  `
+  `,
+                    imports: [DbxFlexGroupDirective],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    standalone: true
                 }]
         }] });
 
@@ -760,14 +757,14 @@ class DbxFormSubsectionWrapperComponent extends FieldWrapper {
     get headerConfig() {
         return this.props;
     }
-    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: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxFormSubsectionWrapperComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: DbxFormSubsectionWrapperComponent, isStandalone: true, 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: i5.DbxSubSectionComponent, selector: "dbx-subsection" }] });
+  `, isInline: true, dependencies: [{ kind: "component", type: DbxSubSectionComponent, selector: "dbx-subsection" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormSubsectionWrapperComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxFormSubsectionWrapperComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'dbx-form-subsection-wrapper',
@@ -775,7 +772,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
     <dbx-subsection [headerConfig]="headerConfig">
       <ng-container #fieldComponent></ng-container>
     </dbx-subsection>
-  `
+  `,
+                    imports: [DbxSubSectionComponent],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    standalone: true
                 }]
         }] });
 
@@ -795,6 +795,8 @@ class AbstractFormExpandSectionWrapperDirective extends FieldWrapper {
     hasValue$ = this.formControl$.pipe(switchMap((x) => x.valueChanges.pipe(startWith(x.value), map((value) => {
         return this.hasValueFn(value);
     }), shareReplay(1))));
+    showSignal = toSignal(this.show$, { initialValue: false });
+    hasValueSignal = toSignal(this.hasValue$, { initialValue: false });
     get expandSection() {
         return this.props;
     }
@@ -821,10 +823,10 @@ class AbstractFormExpandSectionWrapperDirective extends FieldWrapper {
         this._toggleOpen.complete();
         this._formControlObs.complete();
     }
-    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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AbstractFormExpandSectionWrapperDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: AbstractFormExpandSectionWrapperDirective, usesInheritance: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AbstractFormExpandSectionWrapperDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AbstractFormExpandSectionWrapperDirective, decorators: [{
             type: Directive
         }] });
 
@@ -835,31 +837,27 @@ class DbxFormExpandWrapperComponent extends AbstractFormExpandSectionWrapperDire
     get buttonType() {
         return this.expandSection.buttonType ?? 'button';
     }
-    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>
-      </ng-container>
-      <ng-container *ngSwitchCase="false">
-        <span class="dbx-form-expand-wrapper-button" (click)="open()">{{ expandLabel }}</span>
-      </ng-container>
-    </ng-container>
-  `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormExpandWrapperComponent, decorators: [{
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxFormExpandWrapperComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: DbxFormExpandWrapperComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
+    @if (showSignal()) {
+      <ng-container #fieldComponent></ng-container>
+    } @else {
+      <span class="dbx-form-expand-wrapper-button" (click)="open()">{{ expandLabel }}</span>
+    }
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxFormExpandWrapperComponent, decorators: [{
             type: Component,
             args: [{
                     template: `
-    <ng-container [ngSwitch]="show$ | async">
-      <ng-container *ngSwitchCase="true">
-        <ng-container #fieldComponent></ng-container>
-      </ng-container>
-      <ng-container *ngSwitchCase="false">
-        <span class="dbx-form-expand-wrapper-button" (click)="open()">{{ expandLabel }}</span>
-      </ng-container>
-    </ng-container>
-  `
+    @if (showSignal()) {
+      <ng-container #fieldComponent></ng-container>
+    } @else {
+      <span class="dbx-form-expand-wrapper-button" (click)="open()">{{ expandLabel }}</span>
+    }
+  `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    standalone: true
                 }]
         }] });
 
@@ -875,17 +873,19 @@ class AutoTouchFieldWrapperComponent extends FieldWrapper {
             }
         });
     }
-    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: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AutoTouchFieldWrapperComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AutoTouchFieldWrapperComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
     <ng-container #fieldComponent></ng-container>
-  `, isInline: true });
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AutoTouchFieldWrapperComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AutoTouchFieldWrapperComponent, decorators: [{
             type: Component,
             args: [{
                     template: `
     <ng-container #fieldComponent></ng-container>
-  `
+  `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    standalone: true
                 }]
         }] });
 
@@ -901,36 +901,40 @@ class DbxFormToggleWrapperComponent extends AbstractFormExpandSectionWrapperDire
             return of(this.expandLabel);
         }
     }), shareReplay(1));
+    slideLabelSignal = toSignal(this.slideLabel$, { initialValue: '' });
     onToggleChange() {
         this.show$.pipe(first()).subscribe((show) => {
             this._toggleOpen.next(!show);
         });
     }
-    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">
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxFormToggleWrapperComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: DbxFormToggleWrapperComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
+    <div class="dbx-form-toggle-wrapper">
       <div class="dbx-form-toggle-wrapper-toggle">
-        <mat-slide-toggle [checked]="show$ | async" (toggleChange)="onToggleChange()">{{ slideLabel$ | async }}</mat-slide-toggle>
+        <mat-slide-toggle [checked]="showSignal()" (toggleChange)="onToggleChange()">{{ slideLabelSignal() }}</mat-slide-toggle>
       </div>
-      <ng-container *ngSwitchCase="true">
+      @if (showSignal()) {
         <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$1.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matSlideToggle"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] });
+  `, isInline: true, dependencies: [{ kind: "component", type: MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormToggleWrapperComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxFormToggleWrapperComponent, decorators: [{
             type: Component,
             args: [{
                     template: `
-    <div class="dbx-form-toggle-wrapper" [ngSwitch]="show$ | async">
+    <div class="dbx-form-toggle-wrapper">
       <div class="dbx-form-toggle-wrapper-toggle">
-        <mat-slide-toggle [checked]="show$ | async" (toggleChange)="onToggleChange()">{{ slideLabel$ | async }}</mat-slide-toggle>
+        <mat-slide-toggle [checked]="showSignal()" (toggleChange)="onToggleChange()">{{ slideLabelSignal() }}</mat-slide-toggle>
       </div>
-      <ng-container *ngSwitchCase="true">
+      @if (showSignal()) {
         <ng-container #fieldComponent></ng-container>
-      </ng-container>
+      }
     </div>
-  `
+  `,
+                    imports: [MatSlideToggle],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    standalone: true
                 }]
         }] });
 
@@ -939,6 +943,8 @@ class DbxFormStyleWrapperComponent extends FieldWrapper {
     _class = new BehaviorSubject(undefined);
     style$ = this._style.pipe(switchMapMaybeDefault({}), shareReplay(1));
     class$ = this._class.pipe(switchMapMaybeDefault(''), shareReplay(1));
+    styleSignal = toSignal(this.style$);
+    classSignal = toSignal(this.class$);
     get styleGetter() {
         return this.props.styleGetter;
     }
@@ -957,21 +963,24 @@ class DbxFormStyleWrapperComponent extends FieldWrapper {
         this._style.complete();
         this._class.complete();
     }
-    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) ?? {}">
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxFormStyleWrapperComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: DbxFormStyleWrapperComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
+    <div class="dbx-form-style-wrapper" [ngClass]="classSignal()" [ngStyle]="styleSignal()">
       <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$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" }] });
+  `, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormStyleWrapperComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxFormStyleWrapperComponent, decorators: [{
             type: Component,
             args: [{
                     template: `
-    <div class="dbx-form-style-wrapper" [ngClass]="(class$ | async) ?? ''" [ngStyle]="(style$ | async) ?? {}">
+    <div class="dbx-form-style-wrapper" [ngClass]="classSignal()" [ngStyle]="styleSignal()">
       <ng-container #fieldComponent></ng-container>
     </div>
-  `
+  `,
+                    imports: [NgClass, NgStyle],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    standalone: true
                 }]
         }] });
 
@@ -992,15 +1001,15 @@ class DbxFormWorkingWrapperComponent extends FieldWrapper {
         this.workingContext.destroy();
         this.sub.destroy();
     }
-    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: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxFormWorkingWrapperComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: DbxFormWorkingWrapperComponent, isStandalone: true, 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: i5.DbxLoadingComponent, selector: "dbx-loading", inputs: ["show", "text", "mode", "color", "diameter", "linear", "padding", "context", "loading", "error"] }] });
+  `, isInline: true, dependencies: [{ kind: "component", type: DbxLoadingComponent, selector: "dbx-loading", inputs: ["padding", "show", "text", "mode", "color", "diameter", "linear", "loading", "error", "context"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormWorkingWrapperComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxFormWorkingWrapperComponent, decorators: [{
             type: Component,
             args: [{
                     template: `
@@ -1008,7 +1017,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
       <ng-container #fieldComponent></ng-container>
       <dbx-loading [linear]="true" [context]="workingContext"></dbx-loading>
     </div>
-  `
+  `,
+                    imports: [DbxLoadingComponent],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    standalone: true
                 }]
         }] });
 
@@ -1022,27 +1034,11 @@ const STYLE_WRAPPER_KEY = 'style';
 const WORKING_WRAPPER_KEY = 'working';
 const EXPAND_WRAPPER_KEY = 'expand';
 
+const importsAndExports$7 = [AutoTouchFieldWrapperComponent, DbxFormSectionWrapperComponent, DbxFormSubsectionWrapperComponent, DbxFormInfoWrapperComponent, DbxFormExpandWrapperComponent, DbxFormToggleWrapperComponent, DbxFormFlexWrapperComponent, DbxFormStyleWrapperComponent, DbxFormWorkingWrapperComponent];
 class DbxFormFormlyWrapperModule {
-    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,
-            DbxSectionLayoutModule,
-            MatButtonModule,
-            MatSlideToggleModule,
-            MatIconModule,
-            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,
-            DbxSectionLayoutModule,
-            MatButtonModule,
-            MatSlideToggleModule,
-            MatIconModule,
-            FlexLayoutModule,
-            FormlyModule.forChild({
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxFormFormlyWrapperModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: DbxFormFormlyWrapperModule, imports: [AutoTouchFieldWrapperComponent, DbxFormSectionWrapperComponent, DbxFormSubsectionWrapperComponent, DbxFormInfoWrapperComponent, DbxFormExpandWrapperComponent, DbxFormToggleWrapperComponent, DbxFormFlexWrapperComponent, DbxFormStyleWrapperComponent, DbxFormWorkingWrapperComponent, i1$2.FormlyModule], exports: [AutoTouchFieldWrapperComponent, DbxFormSectionWrapperComponent, DbxFormSubsectionWrapperComponent, DbxFormInfoWrapperComponent, DbxFormExpandWrapperComponent, DbxFormToggleWrapperComponent, DbxFormFlexWrapperComponent, DbxFormStyleWrapperComponent, DbxFormWorkingWrapperComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxFormFormlyWrapperModule, imports: [DbxFormSectionWrapperComponent, DbxFormSubsectionWrapperComponent, DbxFormInfoWrapperComponent, DbxFormToggleWrapperComponent, DbxFormWorkingWrapperComponent, FormlyModule.forChild({
                 wrappers: [
                     { name: AUTO_TOUCH_WRAPPER_KEY, component: AutoTouchFieldWrapperComponent },
                     { name: EXPAND_WRAPPER_KEY, component: DbxFormExpandWrapperComponent },
@@ -1056,19 +1052,11 @@ class DbxFormFormlyWrapperModule {
                 ]
             })] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormFormlyWrapperModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxFormFormlyWrapperModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
-                        CommonModule,
-                        DbxTextModule,
-                        DbxLoadingModule,
-                        DbxFlexLayoutModule,
-                        DbxSectionLayoutModule,
-                        MatButtonModule,
-                        MatSlideToggleModule,
-                        MatIconModule,
-                        FlexLayoutModule,
+                        ...importsAndExports$7,
                         FormlyModule.forChild({
                             wrappers: [
                                 { name: AUTO_TOUCH_WRAPPER_KEY, component: AutoTouchFieldWrapperComponent },
@@ -1083,59 +1071,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                             ]
                         })
                     ],
-                    declarations: [AutoTouchFieldWrapperComponent, DbxFormSectionWrapperComponent, DbxFormSubsectionWrapperComponent, DbxFormInfoWrapperComponent, DbxFormExpandWrapperComponent, DbxFormToggleWrapperComponent, DbxFormFlexWrapperComponent, DbxFormStyleWrapperComponent, DbxFormWorkingWrapperComponent],
-                    exports: []
+                    exports: importsAndExports$7
                 }]
         }] });
 
+const importsAndExports$6 = [DbxChecklistItemFieldComponent, DbxChecklistItemContentComponent, DbxDefaultChecklistItemFieldDisplayComponent];
 class DbxFormFormlyChecklistItemFieldModule {
-    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,
-            MatRippleModule,
-            MatCheckboxModule,
-            MatButtonModule,
-            MatIconModule,
-            DbxRouterAnchorModule,
-            DbxInjectionComponentModule,
-            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,
-            MatRippleModule,
-            MatCheckboxModule,
-            MatButtonModule,
-            MatIconModule,
-            DbxRouterAnchorModule,
-            DbxInjectionComponentModule,
-            DbxFormFormlyWrapperModule,
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxFormFormlyChecklistItemFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: DbxFormFormlyChecklistItemFieldModule, imports: [DbxChecklistItemFieldComponent, DbxChecklistItemContentComponent, DbxDefaultChecklistItemFieldDisplayComponent, DbxFormFormlyWrapperModule, i1$2.FormlyModule], exports: [DbxFormFormlyWrapperModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxFormFormlyChecklistItemFieldModule, imports: [DbxChecklistItemFieldComponent, DbxChecklistItemContentComponent, DbxFormFormlyWrapperModule,
             FormlyModule.forChild({
                 types: [{ name: 'checklistitem', component: DbxChecklistItemFieldComponent }]
             }), DbxFormFormlyWrapperModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormFormlyChecklistItemFieldModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxFormFormlyChecklistItemFieldModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
-                        CommonModule,
-                        DbxTextModule,
-                        FormsModule,
-                        ReactiveFormsModule,
-                        MatRippleModule,
-                        MatCheckboxModule,
-                        MatButtonModule,
-                        MatIconModule,
-                        DbxRouterAnchorModule,
-                        DbxInjectionComponentModule,
+                        ...importsAndExports$6,
                         DbxFormFormlyWrapperModule,
                         FormlyModule.forChild({
                             types: [{ name: 'checklistitem', component: DbxChecklistItemFieldComponent }]
                         })
                     ],
-                    declarations: [DbxChecklistItemFieldComponent, DbxChecklistItemContentComponent, DbxDefaultChecklistItemFieldDisplayComponent],
                     exports: [DbxFormFormlyWrapperModule]
                 }]
         }] });
@@ -1237,12 +1195,12 @@ function validatorsForFieldConfig(input) {
 }
 
 function checklistItemField(config) {
-    const { key, displayContentObs, componentClass } = config;
+    const { key, displayContent, componentClass } = config;
     const fieldConfig = formlyField({
         key,
         type: 'checklistitem',
         ...propsAndConfigForFieldConfig(config, {
-            displayContentObs,
+            displayContent,
             componentClass
         })
     });
@@ -1270,8 +1228,8 @@ class ChecklistItemFieldDataSetBuilder {
             ...config,
             key
         };
-        if (currentField.displayContentObs && config.displayContentObs) {
-            mergedConfig.displayContentObs = combineLatest([currentField.displayContentObs, config.displayContentObs]).pipe(map(([a, b]) => {
+        if (currentField.displayContent && config.displayContent) {
+            mergedConfig.displayContent = combineLatest([currentField.displayContent, config.displayContent]).pipe(map(([a, b]) => {
                 const result = {
                     ...a,
                     ...b
@@ -1300,14 +1258,14 @@ class ChecklistItemFieldDataSetBuilder {
     }
     showValueFieldArrayCount(key, config) {
         return this.field({
-            displayContentObs: this.contentWithDisplayValueFromData(key, (x) => addPlusPrefixToNumber(x?.length)),
+            displayContent: this.contentWithDisplayValueFromData(key, (x) => addPlusPrefixToNumber(x?.length)),
             ...config,
             key
         });
     }
     showValueField(key, config, labelFn = (x) => x?.toString()) {
         return this.field({
-            displayContentObs: this.contentWithDisplayValueFromData(key, labelFn),
+            displayContent: this.contentWithDisplayValueFromData(key, labelFn),
             ...config,
             key
         });
@@ -1352,42 +1310,41 @@ class DbxFormComponentFieldComponent extends FieldType {
     get config() {
         return this.field.componentField;
     }
-    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: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxFormComponentFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: DbxFormComponentFieldComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
     <div class="dbx-form-component" dbx-injection [config]="config"></div>
-  `, isInline: true, dependencies: [{ kind: "component", type: i6.DbxInjectionComponent, selector: "dbx-injection, [dbxInjection], [dbx-injection]", inputs: ["config", "template"] }] });
+  `, isInline: true, dependencies: [{ kind: "component", type: DbxInjectionComponent, selector: "dbx-injection, [dbxInjection], [dbx-injection]", inputs: ["config", "template"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormComponentFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxFormComponentFieldComponent, decorators: [{
             type: Component,
             args: [{
                     template: `
     <div class="dbx-form-component" dbx-injection [config]="config"></div>
-  `
+  `,
+                    imports: [DbxInjectionComponent],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    standalone: true
                 }]
         }] });
 
+const importsAndExports$5 = [DbxFormComponentFieldComponent];
 class DbxFormFormlyComponentFieldModule {
-    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({
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxFormFormlyComponentFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: DbxFormFormlyComponentFieldModule, imports: [DbxFormComponentFieldComponent, i1$2.FormlyModule], exports: [DbxFormComponentFieldComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxFormFormlyComponentFieldModule, imports: [importsAndExports$5, FormlyModule.forChild({
                 types: [{ name: 'component', component: DbxFormComponentFieldComponent }]
             })] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormFormlyComponentFieldModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxFormFormlyComponentFieldModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
-                        CommonModule,
-                        DbxInjectionComponentModule,
+                        ...importsAndExports$5,
                         FormlyModule.forChild({
                             types: [{ name: 'component', component: DbxFormComponentFieldComponent }]
                         })
                     ],
-                    declarations: [DbxFormComponentFieldComponent],
-                    exports: [DbxFormComponentFieldComponent]
+                    exports: importsAndExports$5
                 }]
         }] });
 
@@ -1423,14 +1380,14 @@ class DbxItemListFieldComponent extends FieldType {
     _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());
+    listComponentClass$ = this._listComponentClassObs.pipe(switchMapFilterMaybe());
     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$;
+                listView.setSelectionMode('select'); // always enable select
+                listView.setState(this.field.props.state$);
                 if (loadMore != null) {
                     this._loadMoreSub.subscription = listView.loadMore.subscribe(() => loadMore());
                 }
@@ -1443,6 +1400,8 @@ class DbxItemListFieldComponent extends FieldType {
     isSelectedModifierFunction$ = this.values$.pipe(distinctUntilHasDifferentValues(), map((values) => {
         return dbxValueListItemDecisionFunction(isSelectedDecisionFunctionFactory({ readKey: this.readKey })(values));
     }), shareReplay(1));
+    configSignal = toSignal(this.config$);
+    isSelectedModifierFunctionSignal = toSignal(this.isSelectedModifierFunction$);
     get label() {
         return this.field.props.label;
     }
@@ -1480,72 +1439,32 @@ class DbxItemListFieldComponent extends FieldType {
             this.formControl.markAsTouched();
         }
     }
-    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" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxItemListFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: DbxItemListFieldComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<div class=\"dbx-list-item-field\" dbxListItemModifier [dbxListItemIsSelectedModifier]=\"isSelectedModifierFunctionSignal()\">\n  @if (label) {\n    <span class=\"dbx-label dbx-label-padded\">{{ label }}</span>\n  }\n  <div class=\"dbx-list-item-field-content\">\n    <dbx-injection [config]=\"configSignal()\"></dbx-injection>\n  </div>\n  <mat-divider></mat-divider>\n  @if (description) {\n    <div class=\"dbx-form-description\">{{ description }}</div>\n  }\n</div>\n", dependencies: [{ kind: "ngmodule", type: DbxListModifierModule }, { kind: "directive", type: i1$1.DbxValueListItemModifierDirective, selector: "dbxListItemModifier,[dbxListItemModifier]", inputs: ["dbxListItemModifier"] }, { kind: "directive", type: i1$1.DbxListItemIsSelectedModifierDirective, selector: "dbxListItemIsSelectedModifier,[dbxListItemIsSelectedModifier]", inputs: ["dbxListItemIsSelectedModifier"] }, { kind: "component", type: DbxInjectionComponent, selector: "dbx-injection, [dbxInjection], [dbx-injection]", inputs: ["config", "template"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: i2$2.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxItemListFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxItemListFieldComponent, decorators: [{
             type: Component,
-            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" }]
+            args: [{ imports: [DbxListModifierModule, DbxInjectionComponent, MatDividerModule], changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "<div class=\"dbx-list-item-field\" dbxListItemModifier [dbxListItemIsSelectedModifier]=\"isSelectedModifierFunctionSignal()\">\n  @if (label) {\n    <span class=\"dbx-label dbx-label-padded\">{{ label }}</span>\n  }\n  <div class=\"dbx-list-item-field-content\">\n    <dbx-injection [config]=\"configSignal()\"></dbx-injection>\n  </div>\n  <mat-divider></mat-divider>\n  @if (description) {\n    <div class=\"dbx-form-description\">{{ description }}</div>\n  }\n</div>\n" }]
         }] });
 
+const importsAndExports$4 = [DbxItemListFieldComponent];
 class DbxFormFormlyDbxListFieldModule {
-    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,
-            FormsModule,
-            MatDividerModule,
-            MatButtonModule,
-            MatInputModule,
-            MatFormFieldModule,
-            ReactiveFormsModule,
-            MatAutocompleteModule,
-            MatIconModule,
-            DbxInjectionComponentModule,
-            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,
-            FormsModule,
-            MatDividerModule,
-            MatButtonModule,
-            MatInputModule,
-            MatFormFieldModule,
-            ReactiveFormsModule,
-            MatAutocompleteModule,
-            MatIconModule,
-            DbxInjectionComponentModule,
-            DbxListLayoutModule,
-            FormlyModule.forChild({
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxFormFormlyDbxListFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: DbxFormFormlyDbxListFieldModule, imports: [DbxItemListFieldComponent, i1$2.FormlyModule], exports: [DbxItemListFieldComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxFormFormlyDbxListFieldModule, imports: [importsAndExports$4, FormlyModule.forChild({
                 types: [{ name: 'dbxlistfield', component: DbxItemListFieldComponent }]
             })] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormFormlyDbxListFieldModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxFormFormlyDbxListFieldModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
-                        CommonModule,
-                        DbxTextModule,
-                        DbxLoadingModule,
-                        DbxButtonModule,
-                        FormsModule,
-                        MatDividerModule,
-                        MatButtonModule,
-                        MatInputModule,
-                        MatFormFieldModule,
-                        ReactiveFormsModule,
-                        MatAutocompleteModule,
-                        MatIconModule,
-                        DbxInjectionComponentModule,
-                        DbxListLayoutModule,
+                        ...importsAndExports$4,
                         FormlyModule.forChild({
                             types: [{ name: 'dbxlistfield', component: DbxItemListFieldComponent }]
                         })
                     ],
-                    declarations: [DbxItemListFieldComponent],
-                    exports: [DbxItemListFieldComponent]
+                    exports: importsAndExports$4
                 }]
         }] });
 
@@ -1553,7 +1472,7 @@ 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 {
-    filterMatInput;
+    filterMatInput = viewChild('matInput', { read: MatInput });
     inputCtrl = new FormControl('');
     _formControlObs = new BehaviorSubject(undefined);
     formControl$ = this._formControlObs.pipe(filterMaybe());
@@ -1615,13 +1534,15 @@ class AbstractDbxPickableItemFieldDirective extends FieldType$1 {
     /**
      * Context used for managing the loading of items, or when the current results change.
      */
-    context = new ListLoadingStateContextInstance({ obs: this.itemsLoadingState$, showLoadingOnNoValue: false });
+    context = listLoadingStateContext({ obs: this.itemsLoadingState$, showLoadingOnNoValue: false });
     filterItemsLoadingState$ = this.items$.pipe(map((x) => successResult(x)), startWithBeginLoading(), shareReplay(1));
+    noItemsAvailable$ = this.filterItemsLoadingState$.pipe(mapIsListLoadingStateWithEmptyValue(), distinctUntilChanged());
     /**
      * Context used for searching/filtering.
      */
-    filterResultsContext = new ListLoadingStateContextInstance({ obs: this.filteredSearchResultsState$, showLoadingOnNoValue: true });
-    noItemsAvailable$ = this.filterItemsLoadingState$.pipe(mapIsListLoadingStateWithEmptyValue(), distinctUntilChanged());
+    filterResultsContext = listLoadingStateContext({ obs: this.filteredSearchResultsState$, showLoadingOnNoValue: true });
+    itemsSignal = toSignal(this.items$);
+    noItemsAvailableSignal = toSignal(this.noItemsAvailable$);
     get readonly() {
         return this.props.readonly;
     }
@@ -1753,7 +1674,7 @@ class AbstractDbxPickableItemFieldDirective extends FieldType$1 {
         this.context.loading$
             .pipe(delay(10), filter((x) => x), first())
             .subscribe(() => {
-            this.filterMatInput?.focus();
+            this.filterMatInput()?.focus();
         });
     }
     ngOnDestroy() {
@@ -1802,15 +1723,12 @@ class AbstractDbxPickableItemFieldDirective extends FieldType$1 {
         this.formControl.markAsTouched();
         this.formControl.markAsDirty();
     }
-    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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AbstractDbxPickableItemFieldDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "18.2.13", type: AbstractDbxPickableItemFieldDirective, viewQueries: [{ propertyName: "filterMatInput", first: true, predicate: ["matInput"], descendants: true, read: MatInput, isSignal: true }], usesInheritance: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AbstractDbxPickableItemFieldDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AbstractDbxPickableItemFieldDirective, decorators: [{
             type: Directive
-        }], propDecorators: { filterMatInput: [{
-                type: ViewChild,
-                args: ['filterMatInput', { static: true }]
-            }] } });
+        }] });
 
 /**
  * Used for picking pre-set values using chips as the presentation.
@@ -1826,30 +1744,14 @@ class DbxPickableChipListFieldComponent extends AbstractDbxPickableItemFieldDire
             }
         }
     }
-    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" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxPickableChipListFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: DbxPickableChipListFieldComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<div class=\"dbx-pickable-item-field\">\n  <dbx-loading [context]=\"context\" [linear]=\"true\">\n    @if (showFilterInput) {\n      <ng-container *ngTemplateOutlet=\"filterTemplate\"></ng-container>\n    }\n    <!-- Content -->\n    <div class=\"dbx-pickable-item-field-chips\">\n      <mat-chip-listbox [multiple]=\"multiSelect\" [required]=\"required\" [selectable]=\"!isReadonlyOrDisabled\" [disabled]=\"readonly\" #chipList>\n        @for (item of itemsSignal(); track item.itemValue.value) {\n          <mat-chip-option (click)=\"itemClicked(item)\" [selected]=\"item.selected\" [disabled]=\"isReadonlyOrDisabled || item.disabled\">\n            @if (item.itemValue.icon) {\n              <mat-icon matChipAvatar>{{ item.itemValue.icon }}</mat-icon>\n            }\n            <span class=\"dbx-chip-label\">{{ item.itemValue.label }}</span>\n            @if (item.itemValue.sublabel) {\n              <span class=\"dbx-chip-sublabel\">{{ item.itemValue.sublabel }}</span>\n            }\n          </mat-chip-option>\n        }\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    @if (noItemsAvailableSignal()) {\n      <p class=\"dbx-label\">No items match this filter.</p>\n    }\n  </div>\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: MatChipsModule }, { kind: "directive", type: i1$3.MatChipAvatar, selector: "mat-chip-avatar, [matChipAvatar]" }, { kind: "component", type: i1$3.MatChipListbox, selector: "mat-chip-listbox", inputs: ["multiple", "aria-orientation", "selectable", "compareWith", "required", "hideSingleSelectionIndicator", "value"], outputs: ["change"] }, { kind: "component", type: i1$3.MatChipOption, selector: "mat-basic-chip-option, [mat-basic-chip-option], mat-chip-option, [mat-chip-option]", inputs: ["selectable", "selected"], outputs: ["selectionChange"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { 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: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4.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: DbxLoadingComponent, selector: "dbx-loading", inputs: ["padding", "show", "text", "mode", "color", "diameter", "linear", "loading", "error", "context"] }, { kind: "component", type: MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: DbxInjectionComponent, selector: "dbx-injection, [dbxInjection], [dbx-injection]", inputs: ["config", "template"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxPickableChipListFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxPickableChipListFieldComponent, decorators: [{
             type: Component,
-            args: [{ template: "<div class=\"dbx-pickable-item-field\">\n  <dbx-loading [context]=\"context\" [linear]=\"true\">\n    <ng-container *ngIf=\"showFilterInput\">\n      <ng-container *ngTemplateOutlet=\"filterTemplate\"></ng-container>\n    </ng-container>\n    <!-- Content -->\n    <div class=\"dbx-pickable-item-field-chips\">\n      <mat-chip-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" }]
+            args: [{ imports: [MatChipsModule, NgTemplateOutlet, FormsModule, ReactiveFormsModule, MatIconModule, MatInputModule, DbxLoadingComponent, MatDivider, DbxInjectionComponent], changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "<div class=\"dbx-pickable-item-field\">\n  <dbx-loading [context]=\"context\" [linear]=\"true\">\n    @if (showFilterInput) {\n      <ng-container *ngTemplateOutlet=\"filterTemplate\"></ng-container>\n    }\n    <!-- Content -->\n    <div class=\"dbx-pickable-item-field-chips\">\n      <mat-chip-listbox [multiple]=\"multiSelect\" [required]=\"required\" [selectable]=\"!isReadonlyOrDisabled\" [disabled]=\"readonly\" #chipList>\n        @for (item of itemsSignal(); track item.itemValue.value) {\n          <mat-chip-option (click)=\"itemClicked(item)\" [selected]=\"item.selected\" [disabled]=\"isReadonlyOrDisabled || item.disabled\">\n            @if (item.itemValue.icon) {\n              <mat-icon matChipAvatar>{{ item.itemValue.icon }}</mat-icon>\n            }\n            <span class=\"dbx-chip-label\">{{ item.itemValue.label }}</span>\n            @if (item.itemValue.sublabel) {\n              <span class=\"dbx-chip-sublabel\">{{ item.itemValue.sublabel }}</span>\n            }\n          </mat-chip-option>\n        }\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    @if (noItemsAvailableSignal()) {\n      <p class=\"dbx-label\">No items match this filter.</p>\n    }\n  </div>\n</ng-template>\n" }]
         }] });
 
-/**
- * Used for picking pre-set values using a selection list as the presentation.
- */
-class DbxPickableListFieldComponent extends AbstractDbxPickableItemFieldDirective {
-    onSelectionChange(event) {
-        const items = event.items;
-        const values = items.map((x) => x.itemValue.value);
-        this.setValues(values);
-    }
-    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,
-            args: [{ template: "<div class=\"dbx-pickable-item-field\">\n  <dbx-loading [context]=\"context\">\n    <ng-container *ngIf=\"showFilterInput\">\n      <ng-container *ngTemplateOutlet=\"filterTemplate\"></ng-container>\n    </ng-container>\n    <!-- Content -->\n    <div class=\"dbx-pickable-item-field-list\">\n      <div class=\"dbx-pickable-item-field-list-content\">\n        <dbx-form-pickable-item-field-item-list [disabled]=\"isReadonlyOrDisabled\" [state$]=\"filterItemsLoadingState$\" (selectionChange)=\"onSelectionChange($event)\"></dbx-form-pickable-item-field-item-list>\n      </div>\n      <dbx-injection [config]=\"footerConfig\"></dbx-injection>\n    </div>\n  </dbx-loading>\n</div>\n\n<!-- Filter Input -->\n<ng-template #filterTemplate>\n  <div class=\"dbx-pickable-item-field-filter\">\n    <div class=\"dbx-label\">{{ filterLabel }}</div>\n    <input [name]=\"name\" autocomplete=\"{{ autocomplete }}\" #filterMatInput=\"matInput\" matInput [placeholder]=\"placeholder\" [formControl]=\"inputCtrl\" />\n    <mat-divider></mat-divider>\n    <dbx-loading [linear]=\"true\" [context]=\"filterResultsContext\"></dbx-loading>\n    <!-- No items found. -->\n    <p *ngIf=\"noItemsAvailable$ | async\" class=\"dbx-label\">No items match this filter.</p>\n  </div>\n</ng-template>\n" }]
-        }] });
 // MARK: Selection List
 class DbxPickableListFieldItemListComponent extends AbstractDbxSelectionListWrapperDirective {
     constructor() {
@@ -1857,16 +1759,20 @@ class DbxPickableListFieldItemListComponent extends AbstractDbxSelectionListWrap
             componentClass: DbxPickableListFieldItemListViewComponent
         });
     }
-    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" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxPickableListFieldItemListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: DbxPickableListFieldItemListComponent, isStandalone: true, selector: "dbx-form-pickable-item-field-item-list", providers: provideDbxListViewWrapper(DbxPickableListFieldItemListComponent), usesInheritance: true, ngImport: i0, template: "\n  <dbx-list [state]=\"currentState$\" [config]=\"configSignal()\" [disabled]=\"disabled()\" [selectionMode]=\"selectionModeSignal()\">\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>", isInline: true, dependencies: [{ kind: "ngmodule", type: DbxListWrapperComponentImportsModule }, { kind: "component", type: i1$1.DbxListComponent, selector: "dbx-list", inputs: ["padded", "state", "config", "disabled", "selectionMode"], outputs: ["contentScrolled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxPickableListFieldItemListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxPickableListFieldItemListComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'dbx-form-pickable-item-field-item-list',
-                    template: DEFAULT_LIST_WRAPPER_DIRECTIVE_TEMPLATE
+                    template: DEFAULT_LIST_WRAPPER_COMPONENT_CONFIGURATION_TEMPLATE,
+                    imports: [DbxListWrapperComponentImportsModule],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    providers: provideDbxListViewWrapper(DbxPickableListFieldItemListComponent),
+                    standalone: true
                 }]
-        }], ctorParameters: function () { return []; } });
+        }], ctorParameters: () => [] });
 /**
  * NOTE: Values input are PickableItemFieldItem<T>, but output values are PickableValueFieldDisplayValue<T>.
  */
@@ -1889,116 +1795,93 @@ class DbxPickableListFieldItemListViewComponent extends AbstractDbxSelectionList
     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: i5.DbxSelectionValueListViewContentComponent, selector: "dbx-selection-list-view-content", inputs: ["multiple", "selectionMode"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] });
+    itemsSignal = toSignal(this.items$);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxPickableListFieldItemListViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: DbxPickableListFieldItemListViewComponent, isStandalone: true, selector: "ng-component", providers: provideDbxListView(DbxPickableListFieldItemListViewComponent), usesInheritance: true, ngImport: i0, template: `
+    <dbx-selection-list-view-content [multiple]="multiple" [selectionMode]="selectionMode" [items]="itemsSignal()"></dbx-selection-list-view-content>
+  `, isInline: true, dependencies: [{ kind: "component", type: DbxSelectionValueListViewContentComponent, selector: "dbx-selection-list-view-content", inputs: ["multiple", "selectionMode"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxPickableListFieldItemListViewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxPickableListFieldItemListViewComponent, decorators: [{
             type: Component,
             args: [{
                     template: `
-    <dbx-selection-list-view-content [multiple]="multiple" [selectionMode]="selectionMode" [items]="items$ | async"></dbx-selection-list-view-content>
+    <dbx-selection-list-view-content [multiple]="multiple" [selectionMode]="selectionMode" [items]="itemsSignal()"></dbx-selection-list-view-content>
   `,
-                    providers: provideDbxListView(DbxPickableListFieldItemListViewComponent)
+                    providers: provideDbxListView(DbxPickableListFieldItemListViewComponent),
+                    imports: [DbxSelectionValueListViewContentComponent],
+                    standalone: true
                 }]
         }] });
 class DbxPickableListFieldItemListViewItemComponent extends AbstractDbxValueListViewItemComponent {
-    get label() {
-        return this.itemValue.label;
-    }
-    get sublabel() {
-        return this.itemValue.sublabel;
-    }
-    get icon() {
-        return this.itemValue.icon;
-    }
-    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: `
+    label = this.itemValue.label;
+    sublabel = this.itemValue.sublabel;
+    icon = this.itemValue.icon;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxPickableListFieldItemListViewItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: DbxPickableListFieldItemListViewItemComponent, isStandalone: true, 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>
+      @if (icon) {
+        <mat-icon class="dbx-icon-spacer">{{ icon }}</mat-icon>
+      }
       <span class="dbx-chip-label">{{ label }}</span>
-      <span class="dbx-chip-sublabel" *ngIf="sublabel">({{ sublabel }})</span>
+      @if (sublabel) {
+        <span class="dbx-chip-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: "ngmodule", type: MatIconModule }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxPickableListFieldItemListViewItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxPickableListFieldItemListViewItemComponent, decorators: [{
             type: Component,
             args: [{
                     template: `
     <div class="dbx-default-pickable-item-field-list-item dbx-flex-bar">
-      <mat-icon class="dbx-icon-spacer" *ngIf="icon">{{ icon }}</mat-icon>
+      @if (icon) {
+        <mat-icon class="dbx-icon-spacer">{{ icon }}</mat-icon>
+      }
       <span class="dbx-chip-label">{{ label }}</span>
-      <span class="dbx-chip-sublabel" *ngIf="sublabel">({{ sublabel }})</span>
+      @if (sublabel) {
+        <span class="dbx-chip-sublabel">({{ sublabel }})</span>
+      }
     </div>
-  `
+  `,
+                    imports: [MatIconModule],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    standalone: true
                 }]
         }] });
+// List Field Component
+/**
+ * Used for picking pre-set values using a selection list as the presentation.
+ */
+class DbxPickableListFieldComponent extends AbstractDbxPickableItemFieldDirective {
+    onSelectionChange(event) {
+        const items = event.items;
+        const values = items.map((x) => x.itemValue.value);
+        this.setValues(values);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxPickableListFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: DbxPickableListFieldComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<div class=\"dbx-pickable-item-field\">\n  <dbx-loading [context]=\"context\">\n    @if (showFilterInput) {\n      <ng-container *ngTemplateOutlet=\"filterTemplate\"></ng-container>\n    }\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    @if (noItemsAvailableSignal()) {\n      <p class=\"dbx-label\">No items match this filter.</p>\n    }\n  </div>\n</ng-template>\n", dependencies: [{ kind: "component", type: DbxPickableListFieldItemListComponent, selector: "dbx-form-pickable-item-field-item-list" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { 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: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4.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: MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: DbxLoadingComponent, selector: "dbx-loading", inputs: ["padding", "show", "text", "mode", "color", "diameter", "linear", "loading", "error", "context"] }, { kind: "component", type: DbxInjectionComponent, selector: "dbx-injection, [dbxInjection], [dbx-injection]", inputs: ["config", "template"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxPickableListFieldComponent, decorators: [{
+            type: Component,
+            args: [{ imports: [DbxPickableListFieldItemListComponent, NgTemplateOutlet, FormsModule, ReactiveFormsModule, MatInputModule, MatDivider, DbxLoadingComponent, DbxInjectionComponent], changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "<div class=\"dbx-pickable-item-field\">\n  <dbx-loading [context]=\"context\">\n    @if (showFilterInput) {\n      <ng-container *ngTemplateOutlet=\"filterTemplate\"></ng-container>\n    }\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    @if (noItemsAvailableSignal()) {\n      <p class=\"dbx-label\">No items match this filter.</p>\n    }\n  </div>\n</ng-template>\n" }]
+        }] });
 
+const importsAndExports$3 = [DbxPickableChipListFieldComponent, DbxPickableListFieldComponent, DbxPickableListFieldItemListComponent, DbxPickableListFieldItemListViewComponent, DbxPickableListFieldItemListViewItemComponent];
 class DbxFormFormlyPickableFieldModule {
-    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,
-            FormsModule,
-            MatButtonModule,
-            MatInputModule,
-            MatFormFieldModule,
-            ReactiveFormsModule,
-            MatAutocompleteModule,
-            MatListModule,
-            DbxDatePipeModule,
-            DbxRouterAnchorModule,
-            MatChipsModule,
-            MatIconModule,
-            DbxInjectionComponentModule,
-            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,
-            FormsModule,
-            MatButtonModule,
-            MatInputModule,
-            MatFormFieldModule,
-            ReactiveFormsModule,
-            MatAutocompleteModule,
-            MatListModule,
-            DbxDatePipeModule,
-            DbxRouterAnchorModule,
-            MatChipsModule,
-            MatIconModule,
-            DbxInjectionComponentModule,
-            DbxListLayoutModule,
-            FormlyModule.forChild({
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxFormFormlyPickableFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: DbxFormFormlyPickableFieldModule, imports: [DbxPickableChipListFieldComponent, DbxPickableListFieldComponent, DbxPickableListFieldItemListComponent, DbxPickableListFieldItemListViewComponent, DbxPickableListFieldItemListViewItemComponent, i1$2.FormlyModule], exports: [DbxPickableChipListFieldComponent, DbxPickableListFieldComponent, DbxPickableListFieldItemListComponent, DbxPickableListFieldItemListViewComponent, DbxPickableListFieldItemListViewItemComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxFormFormlyPickableFieldModule, imports: [importsAndExports$3, FormlyModule.forChild({
                 types: [
                     { name: 'pickablechipfield', component: DbxPickableChipListFieldComponent, wrappers: ['form-field'] },
                     { name: 'pickablelistfield', component: DbxPickableListFieldComponent, wrappers: ['form-field'] }
                 ]
             })] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormFormlyPickableFieldModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxFormFormlyPickableFieldModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
-                        CommonModule,
-                        DbxTextModule,
-                        DbxLoadingModule,
-                        DbxButtonModule,
-                        FormsModule,
-                        MatButtonModule,
-                        MatInputModule,
-                        MatFormFieldModule,
-                        ReactiveFormsModule,
-                        MatAutocompleteModule,
-                        MatListModule,
-                        DbxDatePipeModule,
-                        DbxRouterAnchorModule,
-                        MatChipsModule,
-                        MatIconModule,
-                        DbxInjectionComponentModule,
-                        DbxListLayoutModule,
+                        ...importsAndExports$3,
                         FormlyModule.forChild({
                             types: [
                                 { name: 'pickablechipfield', component: DbxPickableChipListFieldComponent, wrappers: ['form-field'] },
@@ -2006,8 +1889,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                             ]
                         })
                     ],
-                    declarations: [DbxPickableChipListFieldComponent, DbxPickableListFieldComponent, DbxPickableListFieldItemListComponent, DbxPickableListFieldItemListViewComponent, DbxPickableListFieldItemListViewItemComponent],
-                    exports: []
+                    exports: importsAndExports$3
                 }]
         }] });
 
@@ -2061,7 +1943,7 @@ function pickableValueFieldValuesConfigForStaticLabeledValues(input) {
     const optionsMap = new Map(allOptions.map((x) => [x.value, x]));
     return {
         loadValues: () => of(values),
-        filterValues: filterPickableItemFieldValuesByLabel,
+        filterValues: filterPickableItemFieldValuesByLabel, // auto filter by label
         displayForValue: (values) => of(values.map((x) => {
             const meta = x.meta ?? optionsMap.get(x.value);
             return { ...x, meta, label: meta?.label ?? unknownOptionLabel };
@@ -2071,99 +1953,106 @@ function pickableValueFieldValuesConfigForStaticLabeledValues(input) {
 
 const DBX_SEARCHABLE_FIELD_COMPONENT_DATA_TOKEN = new InjectionToken('DbxSearchableField');
 class DbxSearchableFieldAutocompleteItemComponent {
-    _displayValue = new BehaviorSubject(undefined);
-    displayValue$ = this._displayValue.pipe(filterMaybe(), shareReplay(1));
-    config$ = this.displayValue$.pipe(map((x) => {
+    displayValue = input.required();
+    configSignal = computed(() => {
+        const displayValue = this.displayValue();
         const config = {
-            ...x.display,
+            ...displayValue.display,
             providers: mergeArraysIntoArray([
                 {
                     provide: DBX_SEARCHABLE_FIELD_COMPONENT_DATA_TOKEN,
-                    useValue: x
+                    useValue: displayValue
                 }
-            ], x.display.providers)
+            ], displayValue.display.providers)
         };
         return config;
-    }));
-    anchor$ = this.displayValue$.pipe(map((x) => x.anchor));
-    set displayValue(displayValue) {
-        this._displayValue.next(displayValue);
-    }
-    ngOnDestroy() {
-        this._displayValue.complete();
-    }
-    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>
+    });
+    anchorSignal = computed(() => this.displayValue().anchor);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxSearchableFieldAutocompleteItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: DbxSearchableFieldAutocompleteItemComponent, isStandalone: true, selector: "dbx-searchable-field-autocomplete-item", inputs: { displayValue: { classPropertyName: "displayValue", publicName: "displayValue", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
+    <dbx-anchor [block]="true" [anchor]="anchorSignal()">
+      <dbx-injection [config]="configSignal()"></dbx-injection>
     </dbx-anchor>
-  `, 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" }] });
+  `, isInline: true, dependencies: [{ kind: "component", type: DbxAnchorComponent, selector: "dbx-anchor, [dbx-anchor]", inputs: ["block"] }, { kind: "component", type: DbxInjectionComponent, selector: "dbx-injection, [dbxInjection], [dbx-injection]", inputs: ["config", "template"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxSearchableFieldAutocompleteItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxSearchableFieldAutocompleteItemComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'dbx-searchable-field-autocomplete-item',
                     template: `
-    <dbx-anchor [block]="true" [anchor]="anchor$ | async">
-      <dbx-injection [config]="config$ | async"></dbx-injection>
+    <dbx-anchor [block]="true" [anchor]="anchorSignal()">
+      <dbx-injection [config]="configSignal()"></dbx-injection>
     </dbx-anchor>
-  `
+  `,
+                    imports: [DbxAnchorComponent, DbxInjectionComponent],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    standalone: true
                 }]
-        }], propDecorators: { displayValue: [{
-                type: Input
-            }] } });
+        }] });
 // MARK: Default
 class AbstractDbxSearchableFieldDisplayDirective {
     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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AbstractDbxSearchableFieldDisplayDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: AbstractDbxSearchableFieldDisplayDirective, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AbstractDbxSearchableFieldDisplayDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AbstractDbxSearchableFieldDisplayDirective, decorators: [{
             type: Directive
         }] });
 class DbxDefaultSearchableFieldDisplayComponent extends AbstractDbxSearchableFieldDisplayDirective {
-    get icon() {
-        return this.displayValue.icon;
-    }
-    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: `
+    icon = this.displayValue.icon;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxDefaultSearchableFieldDisplayComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: DbxDefaultSearchableFieldDisplayComponent, isStandalone: true, 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>
+      @if (icon) {
+        <mat-icon class="dbx-icon-spacer">{{ icon }}</mat-icon>
+      }
       <span class="dbx-chip-label">{{ displayValue.label }}</span>
-      <span class="dbx-chip-sublabel" *ngIf="displayValue.sublabel">({{ displayValue.sublabel }})</span>
+      @if (displayValue.sublabel) {
+        <span class="dbx-chip-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: "ngmodule", type: MatIconModule }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxDefaultSearchableFieldDisplayComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxDefaultSearchableFieldDisplayComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'dbx-default-searchable-field-display',
                     template: `
     <div class="dbx-default-searchable-field-display dbx-flex-bar">
-      <mat-icon class="dbx-icon-spacer" *ngIf="icon">{{ icon }}</mat-icon>
+      @if (icon) {
+        <mat-icon class="dbx-icon-spacer">{{ icon }}</mat-icon>
+      }
       <span class="dbx-chip-label">{{ displayValue.label }}</span>
-      <span class="dbx-chip-sublabel" *ngIf="displayValue.sublabel">({{ displayValue.sublabel }})</span>
+      @if (displayValue.sublabel) {
+        <span class="dbx-chip-sublabel">({{ displayValue.sublabel }})</span>
+      }
     </div>
-  `
+  `,
+                    imports: [MatIconModule],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    standalone: true
                 }]
         }] });
 
+const DEFAULT_SEARCH_INPUT_PLACEHOLDER = 'Type to Search';
+const DEFAULT_SEARCHABLE_FIELD_DISPLAY = {
+    componentClass: DbxDefaultSearchableFieldDisplayComponent
+};
 /**
  * Abstract searchable field that provides a feature for searching for values, and for displaying values using Observables.
  *
  * Display values are cached for performance.
  */
 class AbstractDbxSearchableValueFieldDirective extends FieldType$1 {
-    cdRef = inject(ChangeDetectorRef);
     /**
-     * Whether or not to allow syncing to
+     * Optional override set by the parent class for whether or not to allow the current value to sync to the input.
      */
     allowSyncValueToInput = false;
     /**
-     * Optional override set by the parent class for picking a default display for this directive.
+     * Default placeholder text to use when searchOnEmptyText is false.
      */
-    defaultDisplay;
-    textInput;
+    defaultSearchInputPlaceholder = DEFAULT_SEARCH_INPUT_PLACEHOLDER;
+    textInput = viewChild('textInput', { read: (ElementRef) });
     inputCtrl = new FormControl('');
     _formControlObs = new BehaviorSubject(undefined);
     formControl$ = this._formControlObs.pipe(filterMaybe());
@@ -2175,12 +2064,17 @@ class AbstractDbxSearchableValueFieldDirective extends FieldType$1 {
     // 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 ?? []));
+    searchContext = loadingStateContext({ obs: this.searchResultsState$, showLoadingOnNoValue: false });
+    searchResults$ = this.searchResultsState$.pipe(map((x) => x?.value ?? []), shareReplay(1));
+    isLoadingSearchResults$ = this.searchResultsState$.pipe(map(isLoadingStateInLoadingState), distinctUntilChanged(), shareReplay(1));
     _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 ?? []));
+    inputValueSignal = toSignal(this.inputValue$);
+    searchResultsSignal = toSignal(this.searchResults$);
+    displayValuesSignal = toSignal(this.displayValues$);
+    isLoadingSearchResultsSignal = toSignal(this.isLoadingSearchResults$);
     get name() {
         return this.field.name ?? camelCase(this.label ?? this.key);
     }
@@ -2205,6 +2099,12 @@ class AbstractDbxSearchableValueFieldDirective extends FieldType$1 {
     get searchOnEmptyText() {
         return this.searchableField.searchOnEmptyText ?? false;
     }
+    get searchInputPlaceholder() {
+        const searchOnEmpty = this.searchOnEmptyText;
+        const placeholder = this.searchableField.placeholder;
+        const test = placeholder || (searchOnEmpty ? undefined : this.defaultSearchInputPlaceholder) || '';
+        return test;
+    }
     get autocomplete() {
         return (this.props.attributes?.['autocomplete'] ?? this.key);
     }
@@ -2260,7 +2160,7 @@ class AbstractDbxSearchableValueFieldDirective extends FieldType$1 {
             if (needsDisplay.length > 0) {
                 // Go get the display value.
                 const displayValuesObs = this.displayForValue(needsDisplay.map((x) => x[2]));
-                const defaultDisplay = mergeDbxInjectionComponentConfigs([this.defaultDisplay, this.display]);
+                const defaultDisplay = mergeDbxInjectionComponentConfigs([DEFAULT_SEARCHABLE_FIELD_DISPLAY, this.display]);
                 const anchorForValue = this.useAnchor && this.anchorForValue;
                 obs = displayValuesObs.pipe(first(), map((displayResults) => {
                     // Assign the default component classes to complete configuration.
@@ -2301,12 +2201,6 @@ class AbstractDbxSearchableValueFieldDirective extends FieldType$1 {
         if (this.searchableField.textInputValidator) {
             this.inputCtrl.setValidators(this.searchableField.textInputValidator);
         }
-        if (!this.defaultDisplay?.componentClass) {
-            this.defaultDisplay = {
-                ...this.defaultDisplay,
-                componentClass: DbxDefaultSearchableFieldDisplayComponent
-            };
-        }
         if (this.allowSyncValueToInput && this.multiSelect === false) {
             this._singleValueSyncSubscription.subscription = this.displayValues$.subscribe((x) => {
                 if (x[0]) {
@@ -2339,7 +2233,6 @@ class AbstractDbxSearchableValueFieldDirective extends FieldType$1 {
             text = (text || '').trim();
             this.inputCtrl.setValue(text.trim());
         }
-        // console.log('Add: ', text, this.inputCtrl.valid);
         if (!this.inputCtrl.valid) {
             return;
         }
@@ -2366,7 +2259,10 @@ class AbstractDbxSearchableValueFieldDirective extends FieldType$1 {
         return addedValue;
     }
     addValue(value) {
-        this.textInput.nativeElement.value = '';
+        const textInput = this.textInput();
+        if (textInput) {
+            textInput.nativeElement.value = '';
+        }
         this.inputCtrl.setValue(null);
         this.setValues([...this.values, value]);
     }
@@ -2408,17 +2304,17 @@ class AbstractDbxSearchableValueFieldDirective extends FieldType$1 {
         this.formControl.markAsDirty();
         this.formControl.markAsTouched();
     }
-    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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AbstractDbxSearchableValueFieldDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "18.2.13", type: AbstractDbxSearchableValueFieldDirective, viewQueries: [{ propertyName: "textInput", first: true, predicate: ["textInput"], descendants: true, read: ElementRef, isSignal: true }], usesInheritance: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AbstractDbxSearchableValueFieldDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AbstractDbxSearchableValueFieldDirective, decorators: [{
             type: Directive
-        }], propDecorators: { textInput: [{
-                type: ViewChild,
-                args: ['textInput']
-            }] } });
+        }] });
 
 class DbxSearchableChipFieldComponent extends AbstractDbxSearchableValueFieldDirective {
+    get multiSelect() {
+        return this.props.multiSelect ?? true;
+    }
     _blur = new Subject();
     _blurSub = new SubscriptionObject();
     separatorKeysCodes = [ENTER, COMMA];
@@ -2439,9 +2335,6 @@ class DbxSearchableChipFieldComponent extends AbstractDbxSearchableValueFieldDir
         const text = event.value ?? this.inputCtrl.value;
         return this._addWithTextValue(text);
     }
-    get multiSelect() {
-        return this.props.multiSelect ?? true;
-    }
     _syncSingleValue(value) {
         // Do nothing
     }
@@ -2460,12 +2353,12 @@ class DbxSearchableChipFieldComponent extends AbstractDbxSearchableValueFieldDir
     onBlur() {
         this._blur.next();
     }
-    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" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxSearchableChipFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: DbxSearchableChipFieldComponent, isStandalone: true, 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    @for (displayValue of displayValuesSignal(); track displayValue.value) {\n      <mat-chip-row [removable]=\"true\" (removed)=\"removeWithDisplayValue(displayValue)\">\n        @if (displayValue.icon) {\n          <mat-icon matChipAvatar>{{ displayValue.icon }}</mat-icon>\n        }\n        <span class=\"dbx-chip-label\">{{ displayValue.label }}</span>\n        @if (displayValue.sublabel) {\n          <span class=\"dbx-chip-sublabel\">{{ displayValue.sublabel }}</span>\n        }\n        @if (!readonly) {\n          <mat-icon matChipRemove>cancel</mat-icon>\n        }\n      </mat-chip-row>\n    }\n    <input #textInput [name]=\"name\" [placeholder]=\"searchInputPlaceholder\" [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  @for (displayValue of searchResultsSignal(); track displayValue.value) {\n    <mat-option [value]=\"displayValue\">\n      <dbx-searchable-field-autocomplete-item [displayValue]=\"displayValue\"></dbx-searchable-field-autocomplete-item>\n    </mat-option>\n  }\n</mat-autocomplete>\n", dependencies: [{ kind: "ngmodule", type: MatChipsModule }, { kind: "directive", type: i1$3.MatChipAvatar, selector: "mat-chip-avatar, [matChipAvatar]" }, { kind: "component", type: i1$3.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i1$3.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i1$3.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i1$3.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: FormsModule }, { 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: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: DbxLoadingModule }, { kind: "component", type: i1$1.DbxLoadingComponent, selector: "dbx-loading", inputs: ["padding", "show", "text", "mode", "color", "diameter", "linear", "loading", "error", "context"] }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i5.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i3.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i5.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: MatOptionModule }, { kind: "component", type: DbxSearchableFieldAutocompleteItemComponent, selector: "dbx-searchable-field-autocomplete-item", inputs: ["displayValue"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxSearchableChipFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxSearchableChipFieldComponent, decorators: [{
             type: Component,
-            args: [{ template: "<div class=\"dbx-searchable-field\">\n  <!-- View -->\n  <mat-chip-grid [required]=\"required\" [disabled]=\"readonly\" #chipList>\n    <mat-chip-row *ngFor=\"let displayValue of displayValues$ | async\" [removable]=\"true\" (removed)=\"removeWithDisplayValue(displayValue)\">\n      <mat-icon matChipAvatar *ngIf=\"displayValue.icon\">{{ displayValue.icon }}</mat-icon>\n      <span class=\"dbx-chip-label\">{{ displayValue.label }}</span>\n      <span class=\"dbx-chip-sublabel\" *ngIf=\"displayValue.sublabel\">{{ displayValue.sublabel }}</span>\n      <mat-icon matChipRemove *ngIf=\"!readonly\">cancel</mat-icon>\n    </mat-chip-row>\n    <input #textInput [name]=\"name\" [placeholder]=\"placeholder\" [formControl]=\"inputCtrl\" [matAutocomplete]=\"auto\" autocomplete=\"{{ autocomplete }}\" [matAutocompleteDisabled]=\"readonly\" [matChipInputFor]=\"chipList\" (keydown)=\"tabPressedOnInput($event)\" [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\" (matChipInputTokenEnd)=\"addChip($event)\" (blur)=\"onBlur()\" />\n  </mat-chip-grid>\n  <div class=\"searchable-field-form-loading\">\n    <dbx-loading [linear]=\"true\" [context]=\"searchContext\"></dbx-loading>\n  </div>\n</div>\n\n<!-- Autocomplete -->\n<mat-autocomplete class=\"dbx-searchable-text-field-autocomplete\" #auto=\"matAutocomplete\" (optionSelected)=\"selected($event)\">\n  <mat-option *ngFor=\"let displayValue of searchResults$ | async\" [value]=\"displayValue\">\n    <dbx-searchable-field-autocomplete-item [displayValue]=\"displayValue\"></dbx-searchable-field-autocomplete-item>\n  </mat-option>\n</mat-autocomplete>\n" }]
+            args: [{ imports: [MatChipsModule, MatIconModule, FormsModule, ReactiveFormsModule, DbxLoadingModule, MatAutocompleteModule, MatOptionModule, DbxSearchableFieldAutocompleteItemComponent], changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "<div class=\"dbx-searchable-field\">\n  <!-- View -->\n  <mat-chip-grid [required]=\"required\" [disabled]=\"readonly\" #chipList>\n    @for (displayValue of displayValuesSignal(); track displayValue.value) {\n      <mat-chip-row [removable]=\"true\" (removed)=\"removeWithDisplayValue(displayValue)\">\n        @if (displayValue.icon) {\n          <mat-icon matChipAvatar>{{ displayValue.icon }}</mat-icon>\n        }\n        <span class=\"dbx-chip-label\">{{ displayValue.label }}</span>\n        @if (displayValue.sublabel) {\n          <span class=\"dbx-chip-sublabel\">{{ displayValue.sublabel }}</span>\n        }\n        @if (!readonly) {\n          <mat-icon matChipRemove>cancel</mat-icon>\n        }\n      </mat-chip-row>\n    }\n    <input #textInput [name]=\"name\" [placeholder]=\"searchInputPlaceholder\" [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  @for (displayValue of searchResultsSignal(); track displayValue.value) {\n    <mat-option [value]=\"displayValue\">\n      <dbx-searchable-field-autocomplete-item [displayValue]=\"displayValue\"></dbx-searchable-field-autocomplete-item>\n    </mat-option>\n  }\n</mat-autocomplete>\n" }]
         }] });
 
 /**
@@ -2539,9 +2432,10 @@ function searchableTextField(config) {
  */
 class DbxSearchableTextFieldComponent extends AbstractDbxSearchableValueFieldDirective {
     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));
+    selectedDisplayValue$ = this.displayValues$.pipe(map((x) => x[0]), shareReplay(1));
+    selectedDisplayValueSignal = toSignal(this.selectedDisplayValue$);
+    hasValueSignal = computed(() => Boolean(this.selectedDisplayValueSignal()));
+    showSelectedDisplayValueSignal = computed(() => this.showSelectedValue && this.hasValueSignal());
     get searchableField() {
         return this.props;
     }
@@ -2551,91 +2445,58 @@ 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) => {
-            if (!x) {
-                // this.clearValues();
-            }
-        });
+    /*
+    private _clearInputSub = new SubscriptionObject();
+  
+    override ngOnInit(): void {
+      super.ngOnInit();
+  
+      this._clearInputSub.subscription = this.inputValue$.pipe(skipWhile((x) => !x)).subscribe((x) => {
+        if (!x) {
+          // this.clearValues();
+        }
+      });
     }
-    ngOnDestroy() {
-        super.ngOnDestroy();
-        this._clearInputSub.destroy();
+  
+    override ngOnDestroy(): void {
+      super.ngOnDestroy();
+      this._clearInputSub.destroy();
     }
+    */
     selected(event) {
-        this.addWithDisplayValue(event.option.value);
+        const value = event.option.value;
+        console.log('selected', value);
+        if (value._clear) {
+            this.clearValues();
+        }
+        else if (!value._ignore) {
+            this.addWithDisplayValue(value);
+        }
     }
-    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" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxSearchableTextFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: DbxSearchableTextFieldComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<div class=\"dbx-searchable-text-field\" [ngClass]=\"{ 'dbx-searchable-text-field-has-value': hasValueSignal(), 'dbx-searchable-text-field-show-value': showSelectedValue }\">\n  <!-- Result View -->\n  @if (showSelectedDisplayValueSignal()) {\n    <div class=\"dbx-searchable-text-field-value mat-option mat-option-text\">\n      <dbx-searchable-field-autocomplete-item [displayValue]=\"selectedDisplayValueSignal()!\"></dbx-searchable-field-autocomplete-item>\n    </div>\n  }\n  <div class=\"dbx-searchable-text-field-input\">\n    @if (searchLabel) {\n      <div class=\"dbx-label\">{{ searchLabel }}</div>\n    }\n    <!-- View -->\n    <input type=\"search\" [name]=\"name\" matInput #textInput [placeholder]=\"searchInputPlaceholder\" [formControl]=\"inputCtrl\" [matAutocomplete]=\"auto\" [matAutocompleteDisabled]=\"readonly || disabled\" 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  @for (displayValue of searchResultsSignal(); track displayValue.value) {\n    <mat-option [value]=\"displayValue\">\n      <dbx-searchable-field-autocomplete-item [displayValue]=\"displayValue\"></dbx-searchable-field-autocomplete-item>\n    </mat-option>\n  }\n  <!-- If No Results -->\n  @if (searchResultsSignal()?.length === 0) {\n    @if (!isLoadingSearchResultsSignal()) {\n      <mat-option value=\"\" disabled>\n        <p class=\"dbx-clear-hint text-center\">No results found.</p>\n      </mat-option>\n    } @else {\n      <mat-option value=\"\" disabled>\n        <p class=\"dbx-clear-hint text-center\">Loading...</p>\n      </mat-option>\n    }\n  }\n  <!-- Add/Pick String Value -->\n  @if (allowStringValues && inputValueSignal()) {\n    <mat-option [value]=\"{ value: inputValueSignal() }\">\n      <p class=\"dbx-clear-hint text-center\">\"{{ inputValueSignal() }}\"</p>\n    </mat-option>\n  }\n  <!-- Show clear value -->\n  @if (showClearValue && hasValueSignal()) {\n    <mat-option value=\"\">\n      <p class=\"dbx-clear-hint text-center\">Clear</p>\n    </mat-option>\n  }\n</mat-autocomplete>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { 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: 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: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: DbxLoadingModule }, { kind: "component", type: i1$1.DbxLoadingComponent, selector: "dbx-loading", inputs: ["padding", "show", "text", "mode", "color", "diameter", "linear", "loading", "error", "context"] }, { kind: "ngmodule", type: MatOptionModule }, { kind: "component", type: i3.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i5.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i5.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: DbxSearchableFieldAutocompleteItemComponent, selector: "dbx-searchable-field-autocomplete-item", inputs: ["displayValue"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxSearchableTextFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxSearchableTextFieldComponent, decorators: [{
             type: Component,
-            args: [{ template: "<div class=\"dbx-searchable-text-field\" [ngClass]=\"{ 'dbx-searchable-text-field-has-value': (hasValue$ | async), 'dbx-searchable-text-field-show-value': showSelectedValue }\">\n  <!-- Result View -->\n  <div class=\"dbx-searchable-text-field-value mat-option mat-option-text\" *ngIf=\"showSelectedDisplayValue$ | async\">\n    <dbx-searchable-field-autocomplete-item [displayValue]=\"(selectedDisplayValue$ | async)!\"></dbx-searchable-field-autocomplete-item>\n  </div>\n  <div class=\"dbx-searchable-text-field-input\">\n    <div *ngIf=\"searchLabel\" class=\"dbx-label\">{{ searchLabel }}</div>\n    <!-- View -->\n    <input type=\"search\" [name]=\"name\" matInput #textInput [placeholder]=\"placeholder\" [formControl]=\"inputCtrl\" [matAutocomplete]=\"auto\" [matAutocompleteDisabled]=\"readonly\" autocomplete=\"{{ autocomplete }}\" />\n    <div class=\"searchable-field-form-loading\">\n      <dbx-loading [linear]=\"true\" [context]=\"searchContext\"></dbx-loading>\n    </div>\n  </div>\n</div>\n\n<!-- Autocomplete -->\n<mat-autocomplete class=\"dbx-searchable-text-field-autocomplete\" #auto (optionSelected)=\"selected($event)\">\n  <mat-option *ngFor=\"let displayValue of searchResults$ | async\" [value]=\"displayValue\">\n    <dbx-searchable-field-autocomplete-item [displayValue]=\"displayValue\"></dbx-searchable-field-autocomplete-item>\n  </mat-option>\n  <!-- Add/Pick String Value -->\n  <mat-option *ngIf=\"allowStringValues && (inputValue$ | async)\" [value]=\"{ value: (inputValue$ | async) }\">\n    <p class=\"dbx-clear-hint text-center\">\"{{ inputValue$ | async }}\"</p>\n  </mat-option>\n  <!-- Show clear value -->\n  <mat-option *ngIf=\"showClearValue && (hasValue$ | async)\" value=\"\">\n    <p class=\"dbx-clear-hint text-center\">Clear</p>\n  </mat-option>\n</mat-autocomplete>\n" }]
+            args: [{ imports: [FormsModule, MatInput, NgClass, ReactiveFormsModule, DbxLoadingModule, MatOptionModule, MatAutocompleteModule, MatChipsModule, MatIconModule, DbxSearchableFieldAutocompleteItemComponent], changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "<div class=\"dbx-searchable-text-field\" [ngClass]=\"{ 'dbx-searchable-text-field-has-value': hasValueSignal(), 'dbx-searchable-text-field-show-value': showSelectedValue }\">\n  <!-- Result View -->\n  @if (showSelectedDisplayValueSignal()) {\n    <div class=\"dbx-searchable-text-field-value mat-option mat-option-text\">\n      <dbx-searchable-field-autocomplete-item [displayValue]=\"selectedDisplayValueSignal()!\"></dbx-searchable-field-autocomplete-item>\n    </div>\n  }\n  <div class=\"dbx-searchable-text-field-input\">\n    @if (searchLabel) {\n      <div class=\"dbx-label\">{{ searchLabel }}</div>\n    }\n    <!-- View -->\n    <input type=\"search\" [name]=\"name\" matInput #textInput [placeholder]=\"searchInputPlaceholder\" [formControl]=\"inputCtrl\" [matAutocomplete]=\"auto\" [matAutocompleteDisabled]=\"readonly || disabled\" 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  @for (displayValue of searchResultsSignal(); track displayValue.value) {\n    <mat-option [value]=\"displayValue\">\n      <dbx-searchable-field-autocomplete-item [displayValue]=\"displayValue\"></dbx-searchable-field-autocomplete-item>\n    </mat-option>\n  }\n  <!-- If No Results -->\n  @if (searchResultsSignal()?.length === 0) {\n    @if (!isLoadingSearchResultsSignal()) {\n      <mat-option value=\"\" disabled>\n        <p class=\"dbx-clear-hint text-center\">No results found.</p>\n      </mat-option>\n    } @else {\n      <mat-option value=\"\" disabled>\n        <p class=\"dbx-clear-hint text-center\">Loading...</p>\n      </mat-option>\n    }\n  }\n  <!-- Add/Pick String Value -->\n  @if (allowStringValues && inputValueSignal()) {\n    <mat-option [value]=\"{ value: inputValueSignal() }\">\n      <p class=\"dbx-clear-hint text-center\">\"{{ inputValueSignal() }}\"</p>\n    </mat-option>\n  }\n  <!-- Show clear value -->\n  @if (showClearValue && hasValueSignal()) {\n    <mat-option value=\"\">\n      <p class=\"dbx-clear-hint text-center\">Clear</p>\n    </mat-option>\n  }\n</mat-autocomplete>\n" }]
         }] });
 
+const importsAndExports$2 = [DbxSearchableChipFieldComponent, DbxSearchableTextFieldComponent, DbxSearchableFieldAutocompleteItemComponent, DbxDefaultSearchableFieldDisplayComponent];
 class DbxFormFormlySearchableFieldModule {
-    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,
-            FormsModule,
-            MatButtonModule,
-            MatInputModule,
-            MatFormFieldModule,
-            ReactiveFormsModule,
-            MatAutocompleteModule,
-            MatListModule,
-            DbxDatePipeModule,
-            DbxRouterAnchorModule,
-            MatChipsModule,
-            MatIconModule,
-            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,
-            FormsModule,
-            MatButtonModule,
-            MatInputModule,
-            MatFormFieldModule,
-            ReactiveFormsModule,
-            MatAutocompleteModule,
-            MatListModule,
-            DbxDatePipeModule,
-            DbxRouterAnchorModule,
-            MatChipsModule,
-            MatIconModule,
-            DbxInjectionComponentModule,
-            FormlyModule.forChild({
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxFormFormlySearchableFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: DbxFormFormlySearchableFieldModule, imports: [DbxSearchableChipFieldComponent, DbxSearchableTextFieldComponent, DbxSearchableFieldAutocompleteItemComponent, DbxDefaultSearchableFieldDisplayComponent, i1$2.FormlyModule], exports: [DbxSearchableChipFieldComponent, DbxSearchableTextFieldComponent, DbxSearchableFieldAutocompleteItemComponent, DbxDefaultSearchableFieldDisplayComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxFormFormlySearchableFieldModule, imports: [importsAndExports$2, FormlyModule.forChild({
                 types: [
                     { name: 'searchablechipfield', component: DbxSearchableChipFieldComponent, wrappers: ['form-field'] },
                     { name: 'searchabletextfield', component: DbxSearchableTextFieldComponent, wrappers: ['form-field'] }
                 ]
             })] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormFormlySearchableFieldModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxFormFormlySearchableFieldModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
-                        CommonModule,
-                        DbxTextModule,
-                        DbxLoadingModule,
-                        DbxButtonModule,
-                        FormsModule,
-                        MatButtonModule,
-                        MatInputModule,
-                        MatFormFieldModule,
-                        ReactiveFormsModule,
-                        MatAutocompleteModule,
-                        MatListModule,
-                        DbxDatePipeModule,
-                        DbxRouterAnchorModule,
-                        MatChipsModule,
-                        MatIconModule,
-                        DbxInjectionComponentModule,
+                        ...importsAndExports$2,
                         FormlyModule.forChild({
                             types: [
                                 { name: 'searchablechipfield', component: DbxSearchableChipFieldComponent, wrappers: ['form-field'] },
@@ -2643,15 +2504,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                             ]
                         })
                     ],
-                    declarations: [DbxSearchableChipFieldComponent, DbxSearchableTextFieldComponent, DbxSearchableFieldAutocompleteItemComponent, DbxDefaultSearchableFieldDisplayComponent],
-                    exports: [DbxSearchableChipFieldComponent, DbxSearchableTextFieldComponent]
+                    exports: importsAndExports$2
                 }]
         }] });
 
 function chipTextField(config) {
     const convertStringValue = config.caseSensitive ? (x) => x : (x) => x?.toLowerCase();
     return searchableChipField({
-        search: () => of([]),
+        search: () => of([]), // no search by default
         ...config,
         allowStringValues: true,
         convertStringValue,
@@ -2672,7 +2532,7 @@ class DbxFormSourceSelectFieldComponent extends FieldType$2 {
     _formControlObs = new BehaviorSubject(undefined);
     _fromOpenSource = new BehaviorSubject({ values: [], valuesSet: new Set() });
     _loadSources = new BehaviorSubject(undefined);
-    buttonElement;
+    buttonElement = viewChild('button', { read: (ElementRef) });
     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));
@@ -2784,7 +2644,7 @@ class DbxFormSourceSelectFieldComponent extends FieldType$2 {
         }));
         return obs;
     })), shareReplay(1));
-    allOptionGroups$ = this.allOptionGroupsState$.pipe(valueFromLoadingState(), shareReplay(1));
+    allOptionGroups$ = this.allOptionGroupsState$.pipe(valueFromFinishedLoadingState(), map((x) => x ?? []), shareReplay(1));
     options$ = this.allOptionGroups$.pipe(map((x) => {
         const { included: groupedValues, excluded: nonGroupedGroup } = separateValues(x, (y) => Boolean(y.label));
         const result = {
@@ -2795,6 +2655,8 @@ class DbxFormSourceSelectFieldComponent extends FieldType$2 {
     }), shareReplay(1));
     nonGroupedValues$ = this.options$.pipe(map((x) => x.nonGroupedValues));
     groupedOptions$ = this.options$.pipe(map((x) => x.groupedValues));
+    nonGroupedValuesSignal = toSignal(this.nonGroupedValues$);
+    groupedOptionsSignal = toSignal(this.groupedOptions$);
     get sourceSelectField() {
         return this.props;
     }
@@ -2914,8 +2776,8 @@ class DbxFormSourceSelectFieldComponent extends FieldType$2 {
     }
     handleSelectOptions = (_, context) => {
         const { openSource } = this;
-        if (openSource) {
-            const origin = this.buttonElement.nativeElement;
+        const origin = this.buttonElement();
+        if (openSource && origin) {
             const sourceObs = openSource({ origin });
             context.startWorkingWithObservable(sourceObs.pipe(first(), tap((result) => {
                 const valuesToAdd = mergeArrays([result.select, result.options]);
@@ -2964,16 +2826,13 @@ class DbxFormSourceSelectFieldComponent extends FieldType$2 {
         this.formControl.markAsDirty();
         this.formControl.markAsTouched();
     }
-    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" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxFormSourceSelectFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: DbxFormSourceSelectFieldComponent, isStandalone: true, selector: "dbx-form-sourceselectfield", viewQueries: [{ propertyName: "buttonElement", first: true, predicate: ["button"], descendants: true, read: ElementRef, isSignal: true }], 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      @for (value of nonGroupedValuesSignal(); track value.value) {\n        <mat-option [value]=\"value.value\">\n          {{ value.label }}\n        </mat-option>\n      }\n      @for (optionGroup of groupedOptionsSignal(); track optionGroup.label) {\n        <mat-optgroup [label]=\"optionGroup.label\">\n          @for (value of optionGroup.values; track value.value) {\n            <mat-option [value]=\"value.value\">\n              {{ value.label }}\n            </mat-option>\n          }\n        </mat-optgroup>\n      }\n    </mat-select>\n    @if (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 [fab]=\"true\" [iconOnly]=\"true\" [icon]=\"selectButtonIcon\"></dbx-button>\n      </dbx-action>\n    }\n  </div>\n  <dbx-loading class=\"dbx-source-select-field-loading\" [linear]=\"true\" [context]=\"context\"></dbx-loading>\n</div>\n", dependencies: [{ kind: "component", type: MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: DbxButtonComponent, selector: "dbx-button", inputs: ["type", "color", "spinnerColor", "customButtonColor", "customTextColor", "customSpinnerColor", "basic", "raised", "stroked", "flat", "iconOnly", "fab"] }, { kind: "component", type: MatOptgroup, selector: "mat-optgroup", inputs: ["label", "disabled"], exportAs: ["matOptgroup"] }, { kind: "directive", type: DbxButtonSpacerDirective, selector: "dbx-button-spacer,[dbxButtonSpacer]" }, { kind: "ngmodule", type: DbxActionModule }, { kind: "directive", type: i2$3.DbxActionDirective, selector: "dbx-action,[dbxAction],dbx-action-context,[dbxActionContext]", exportAs: ["action", "dbxAction"] }, { kind: "directive", type: i2$3.DbxActionHandlerDirective, selector: "[dbxActionHandler]", inputs: ["dbxActionHandler"] }, { kind: "directive", type: i2$3.DbxActionValueDirective, selector: "dbxActionValue,[dbxActionValue]", inputs: ["dbxActionValue"] }, { kind: "directive", type: i2$3.DbxActionButtonDirective, selector: "[dbxActionButton]" }, { kind: "component", type: DbxLoadingComponent, selector: "dbx-loading", inputs: ["padding", "show", "text", "mode", "color", "diameter", "linear", "loading", "error", "context"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormSourceSelectFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxFormSourceSelectFieldComponent, decorators: [{
             type: Component,
-            args: [{ template: "<div class=\"dbx-source-select-field\">\n  <div class=\"dbx-source-select-field-content\">\n    <mat-select class=\"dbx-source-select-field-select\" [id]=\"id\" [formControl]=\"formControl\" [multiple]=\"props.multiple\">\n      <mat-option *ngFor=\"let value of nonGroupedValues$ | async\" [value]=\"value.value\">\n        {{ value.label }}\n      </mat-option>\n      <mat-optgroup *ngFor=\"let optionGroup of groupedOptions$ | async\" [label]=\"optionGroup.label\">\n        <mat-option *ngFor=\"let value of optionGroup.values\" [value]=\"value.value\">\n          {{ value.label }}\n        </mat-option>\n      </mat-optgroup>\n    </mat-select>\n    <ng-container *ngIf=\"showOpenSourceButton\">\n      <dbx-button-spacer></dbx-button-spacer>\n      <dbx-action dbxActionValue [dbxActionHandler]=\"handleSelectOptions\" class=\"dbx-source-select-field-button\">\n        <dbx-button #button dbxActionButton [iconOnly]=\"true\" [icon]=\"selectButtonIcon\"></dbx-button>\n      </dbx-action>\n    </ng-container>\n  </div>\n  <dbx-loading class=\"dbx-source-select-field-loading\" [linear]=\"true\" [context]=\"context\"></dbx-loading>\n</div>\n" }]
-        }], propDecorators: { buttonElement: [{
-                type: ViewChild,
-                args: ['button', { read: ElementRef, static: false }]
-            }] } });
+            args: [{ selector: 'dbx-form-sourceselectfield', changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatSelect, MatOption, FormsModule, ReactiveFormsModule, DbxButtonComponent, MatOptgroup, DbxButtonSpacerDirective, DbxActionModule, DbxLoadingComponent], standalone: true, 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      @for (value of nonGroupedValuesSignal(); track value.value) {\n        <mat-option [value]=\"value.value\">\n          {{ value.label }}\n        </mat-option>\n      }\n      @for (optionGroup of groupedOptionsSignal(); track optionGroup.label) {\n        <mat-optgroup [label]=\"optionGroup.label\">\n          @for (value of optionGroup.values; track value.value) {\n            <mat-option [value]=\"value.value\">\n              {{ value.label }}\n            </mat-option>\n          }\n        </mat-optgroup>\n      }\n    </mat-select>\n    @if (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 [fab]=\"true\" [iconOnly]=\"true\" [icon]=\"selectButtonIcon\"></dbx-button>\n      </dbx-action>\n    }\n  </div>\n  <dbx-loading class=\"dbx-source-select-field-loading\" [linear]=\"true\" [context]=\"context\"></dbx-loading>\n</div>\n" }]
+        }] });
 
 function sourceSelectField(config) {
     const { key, materialFormField } = config;
@@ -2989,74 +2848,22 @@ function sourceSelectField(config) {
 }
 
 class DbxFormFormlySourceSelectModule {
-    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,
-            MatFormFieldModule,
-            MatSelectModule,
-            MatButtonModule,
-            MatDatepickerModule,
-            MatNativeDateModule,
-            MatMenuModule,
-            ReactiveFormsModule,
-            DbxDatePipeModule,
-            DbxLoadingModule,
-            DbxButtonModule,
-            DbxActionModule,
-            MatChipsModule,
-            MatIconModule,
-            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,
-            MatFormFieldModule,
-            MatSelectModule,
-            MatButtonModule,
-            MatDatepickerModule,
-            MatNativeDateModule,
-            MatMenuModule,
-            ReactiveFormsModule,
-            DbxDatePipeModule,
-            DbxLoadingModule,
-            DbxButtonModule,
-            DbxActionModule,
-            MatChipsModule,
-            MatIconModule,
-            FlexLayoutModule,
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxFormFormlySourceSelectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: DbxFormFormlySourceSelectModule, imports: [DbxFormSourceSelectFieldComponent, i1$2.FormlyModule], exports: [DbxFormSourceSelectFieldComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxFormFormlySourceSelectModule, imports: [DbxFormSourceSelectFieldComponent,
             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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxFormFormlySourceSelectModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
-                        CommonModule,
-                        FormsModule,
-                        MatInputModule,
-                        MatDividerModule,
-                        MatFormFieldModule,
-                        MatSelectModule,
-                        MatButtonModule,
-                        MatDatepickerModule,
-                        MatNativeDateModule,
-                        MatMenuModule,
-                        ReactiveFormsModule,
-                        DbxDatePipeModule,
-                        DbxLoadingModule,
-                        DbxButtonModule,
-                        DbxActionModule,
-                        MatChipsModule,
-                        MatIconModule,
-                        FlexLayoutModule,
+                        DbxFormSourceSelectFieldComponent,
                         FormlyModule.forChild({
                             types: [{ name: 'sourceselectfield', component: DbxFormSourceSelectFieldComponent, wrappers: ['form-field'] }]
                         })
                     ],
-                    declarations: [DbxFormSourceSelectFieldComponent],
                     exports: [DbxFormSourceSelectFieldComponent]
                 }]
         }] });
@@ -3097,11 +2904,11 @@ function addValueSelectionOptionFunction(label) {
 }
 
 class DbxFormFormlySelectionModule {
-    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] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxFormFormlySelectionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: DbxFormFormlySelectionModule, imports: [CommonModule], exports: [DbxFormFormlyDbxListFieldModule, DbxFormFormlyPickableFieldModule, DbxFormFormlySearchableFieldModule, DbxFormFormlySourceSelectModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", 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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxFormFormlySelectionModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule],
@@ -3116,7 +2923,8 @@ class DbxTextEditorFieldComponent extends FieldType$1 {
     _sub = new SubscriptionObject();
     compactClass$ = mapCompactModeObs(this._compactContextStore?.mode$, {
         compact: 'dbx-texteditor-field-compact'
-    });
+    }).pipe(filterMaybe());
+    compactClassSignal = toSignal(this.compactClass$, { initialValue: '' });
     get formGroupName() {
         return this.field.key;
     }
@@ -3134,9 +2942,11 @@ class DbxTextEditorFieldComponent extends FieldType$1 {
     }
     ngOnInit() {
         this._editor = new Editor({});
+        // TODO: Sync disabled state too
+        // TODO: Sync the value periodically while not focused too
         // Watch for value changes every second and update the pristine level.
         this._sub.subscription = this.editor.valueChanges
-            .pipe(debounceTime(100), filter(() => this.editor.view.hasFocus()))
+            .pipe(debounceTime(50), filter(() => this.editor.view.hasFocus()))
             .subscribe(() => {
             this.formControl.updateValueAndValidity();
             this.formControl.markAsDirty();
@@ -3144,81 +2954,72 @@ class DbxTextEditorFieldComponent extends FieldType$1 {
     }
     ngOnDestroy() {
         super.ngOnDestroy();
-        if (this.editor) {
-            this.editor.destroy();
-            delete this._editor;
+        if (this._editor != null) {
+            this._editor.destroy();
         }
         this._sub.destroy();
     }
-    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">
-      <span class="dbx-label" *ngIf="label">{{ label }}</span>
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxTextEditorFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: DbxTextEditorFieldComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
+    <div class="dbx-texteditor-field" [ngClass]="compactClassSignal()" [formGroup]="formGroup">
+      @if (label) {
+        <span class="dbx-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>
-      <div class="dbx-form-description" *ngIf="description">{{ description }}</div>
+      @if (description) {
+        <div class="dbx-form-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.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" }] });
+  `, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: NgxEditorModule }, { kind: "component", type: i1$4.NgxEditorComponent, selector: "ngx-editor", inputs: ["editor", "outputFormat", "placeholder"], outputs: ["focusOut", "focusIn"] }, { kind: "component", type: i1$4.MenuComponent, selector: "ngx-editor-menu", inputs: ["toolbar", "colorPresets", "disabled", "editor", "customMenuRef", "dropdownPlacement"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxTextEditorFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxTextEditorFieldComponent, decorators: [{
             type: Component,
             args: [{
                     template: `
-    <div class="dbx-texteditor-field" [ngClass]="(compactClass$ | async) ?? ''" [formGroup]="formGroup">
-      <span class="dbx-label" *ngIf="label">{{ label }}</span>
+    <div class="dbx-texteditor-field" [ngClass]="compactClassSignal()" [formGroup]="formGroup">
+      @if (label) {
+        <span class="dbx-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>
-      <div class="dbx-form-description" *ngIf="description">{{ description }}</div>
+      @if (description) {
+        <div class="dbx-form-description">{{ description }}</div>
+      }
     </div>
-  `
+  `,
+                    imports: [NgClass, NgxEditorModule, FormsModule, ReactiveFormsModule],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    standalone: true
                 }]
         }] });
 
+const importsAndExports$1 = [DbxTextEditorFieldComponent];
 class DbxFormFormlyTextEditorFieldModule {
-    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 ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormFormlyTextEditorFieldModule, imports: [CommonModule,
-            DbxTextModule,
-            FormsModule,
-            ReactiveFormsModule,
-            NgxEditorModule,
-            MatFormFieldModule,
-            MatInputModule,
-            FormlyModule.forChild({
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxFormFormlyTextEditorFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: DbxFormFormlyTextEditorFieldModule, imports: [DbxTextEditorFieldComponent, i1$2.FormlyModule], exports: [DbxTextEditorFieldComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxFormFormlyTextEditorFieldModule, imports: [importsAndExports$1, FormlyModule.forChild({
                 types: [{ name: 'texteditor', component: DbxTextEditorFieldComponent }]
             })] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormFormlyTextEditorFieldModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxFormFormlyTextEditorFieldModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
-                        CommonModule,
-                        DbxTextModule,
-                        FormsModule,
-                        ReactiveFormsModule,
-                        NgxEditorModule,
-                        MatFormFieldModule,
-                        MatInputModule,
+                        ...importsAndExports$1,
                         FormlyModule.forChild({
                             types: [{ name: 'texteditor', component: DbxTextEditorFieldComponent }]
                         })
                     ],
-                    declarations: [DbxTextEditorFieldComponent],
-                    exports: []
+                    exports: importsAndExports$1
                 }]
         }] });
 
@@ -3227,7 +3028,7 @@ function textEditorField(config) {
     const fieldConfig = formlyField({
         key,
         type: 'texteditor',
-        defaultValue: '',
+        defaultValue: '', // Set to always get a string as a result.
         modelOptions: {
             // https://formly.dev/examples/validation/async-validation-update-on
             // Set to trigger value update on blurs with the form. However, the value is set internally too.
@@ -3322,9 +3123,6 @@ class DbxFormRepeatArrayTypeComponent extends FieldArrayType {
             return this.count < max;
         }
     }
-    trackByFunction = (i, x) => {
-        return x.key;
-    };
     /**
      * Moves the target index up one value.
      *
@@ -3375,38 +3173,48 @@ class DbxFormRepeatArrayTypeComponent extends FieldArrayType {
             fieldConfig
         });
     }
-    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: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxFormRepeatArrayTypeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: DbxFormRepeatArrayTypeComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
     <div class="dbx-form-repeat-array">
       <dbx-subsection [header]="label" [hint]="description">
         <!-- Fields -->
         <div class="dbx-form-repeat-array-fields" cdkDropList [cdkDropListDisabled]="disableRearrange" (cdkDropListDropped)="drop($event)">
-          <div class="dbx-form-repeat-array-field" cdkDrag cdkDragLockAxis="y" *ngFor="let field of field.fieldGroup; trackBy: trackByFunction; let i = index; let last = last">
-            <div class="dbx-form-repeat-array-drag-placeholder" *cdkDragPlaceholder></div>
-            <dbx-bar class="dbx-form-repeat-array-bar dbx-bar-fixed-height">
-              <button class="dbx-form-repeat-array-drag-button" *ngIf="!disableRearrange" cdkDragHandle mat-stroked-button><mat-icon>drag_handle</mat-icon></button>
-              <dbx-button-spacer></dbx-button-spacer>
-              <h4>
-                <span class="repeat-array-number">{{ i + 1 }}</span>
-                <span>{{ labelForItem(field, i) }}</span>
-              </h4>
-              <span class="dbx-spacer"></span>
-              <dbx-button *ngIf="allowDuplicate(i)" [stroked]="true" [text]="duplicateText" (buttonClick)="duplicate(i)"></dbx-button>
-              <dbx-button-spacer></dbx-button-spacer>
-              <dbx-button *ngIf="allowRemove(i)" color="warn" [stroked]="true" [text]="removeText" (buttonClick)="remove(i)"></dbx-button>
-            </dbx-bar>
-            <formly-field class="dbx-form-repeat-array-field-content" [field]="field"></formly-field>
-          </div>
+          @for (field of field.fieldGroup; track field.key; let i = $index; let last = $last) {
+            <div class="dbx-form-repeat-array-field" cdkDrag cdkDragLockAxis="y">
+              <div class="dbx-form-repeat-array-drag-placeholder" *cdkDragPlaceholder></div>
+              <dbx-bar class="dbx-form-repeat-array-bar dbx-bar-fixed-height">
+                @if (!disableRearrange) {
+                  <button class="dbx-form-repeat-array-drag-button" cdkDragHandle mat-stroked-button><mat-icon>drag_handle</mat-icon></button>
+                  <dbx-button-spacer></dbx-button-spacer>
+                }
+                <h4>
+                  <span class="repeat-array-number">{{ i + 1 }}</span>
+                  <span>{{ labelForItem(field, i) }}</span>
+                </h4>
+                <span class="dbx-spacer"></span>
+                @if (allowDuplicate(i)) {
+                  <dbx-button [stroked]="true" [text]="duplicateText" (buttonClick)="duplicate(i)"></dbx-button>
+                  <dbx-button-spacer></dbx-button-spacer>
+                }
+                @if (allowRemove(i)) {
+                  <dbx-button color="warn" [stroked]="true" [text]="removeText" (buttonClick)="remove(i)"></dbx-button>
+                }
+              </dbx-bar>
+              <formly-field class="dbx-form-repeat-array-field-content" [field]="field"></formly-field>
+            </div>
+          }
         </div>
         <!-- Add Button -->
         <div class="dbx-form-repeat-array-footer">
-          <dbx-button *ngIf="allowAdd" [raised]="true" [disabled]="addItemDisabled" [text]="addText" (buttonClick)="addClicked()"></dbx-button>
+          @if (allowAdd) {
+            <dbx-button [raised]="true" [disabled]="addItemDisabled" [text]="addText" (buttonClick)="addClicked()"></dbx-button>
+          }
         </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: 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"] }] });
+  `, isInline: true, dependencies: [{ kind: "component", type: DbxSubSectionComponent, selector: "dbx-subsection" }, { kind: "directive", type: DbxBarDirective, selector: "dbx-bar,[dbxBar]", inputs: ["color"] }, { kind: "component", type: DbxButtonComponent, selector: "dbx-button", inputs: ["type", "color", "spinnerColor", "customButtonColor", "customTextColor", "customSpinnerColor", "basic", "raised", "stroked", "flat", "iconOnly", "fab"] }, { kind: "ngmodule", type: FormlyModule }, { kind: "component", type: i1$2.FormlyField, selector: "formly-field", inputs: ["field"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i2$4.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i2$4.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i2$4.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "directive", type: i2$4.CdkDragPlaceholder, selector: "ng-template[cdkDragPlaceholder]", inputs: ["data"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: DbxButtonSpacerDirective, selector: "dbx-button-spacer,[dbxButtonSpacer]" }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormRepeatArrayTypeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxFormRepeatArrayTypeComponent, decorators: [{
             type: Component,
             args: [{
                     template: `
@@ -3414,79 +3222,64 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
       <dbx-subsection [header]="label" [hint]="description">
         <!-- Fields -->
         <div class="dbx-form-repeat-array-fields" cdkDropList [cdkDropListDisabled]="disableRearrange" (cdkDropListDropped)="drop($event)">
-          <div class="dbx-form-repeat-array-field" cdkDrag cdkDragLockAxis="y" *ngFor="let field of field.fieldGroup; trackBy: trackByFunction; let i = index; let last = last">
-            <div class="dbx-form-repeat-array-drag-placeholder" *cdkDragPlaceholder></div>
-            <dbx-bar class="dbx-form-repeat-array-bar dbx-bar-fixed-height">
-              <button class="dbx-form-repeat-array-drag-button" *ngIf="!disableRearrange" cdkDragHandle mat-stroked-button><mat-icon>drag_handle</mat-icon></button>
-              <dbx-button-spacer></dbx-button-spacer>
-              <h4>
-                <span class="repeat-array-number">{{ i + 1 }}</span>
-                <span>{{ labelForItem(field, i) }}</span>
-              </h4>
-              <span class="dbx-spacer"></span>
-              <dbx-button *ngIf="allowDuplicate(i)" [stroked]="true" [text]="duplicateText" (buttonClick)="duplicate(i)"></dbx-button>
-              <dbx-button-spacer></dbx-button-spacer>
-              <dbx-button *ngIf="allowRemove(i)" color="warn" [stroked]="true" [text]="removeText" (buttonClick)="remove(i)"></dbx-button>
-            </dbx-bar>
-            <formly-field class="dbx-form-repeat-array-field-content" [field]="field"></formly-field>
-          </div>
+          @for (field of field.fieldGroup; track field.key; let i = $index; let last = $last) {
+            <div class="dbx-form-repeat-array-field" cdkDrag cdkDragLockAxis="y">
+              <div class="dbx-form-repeat-array-drag-placeholder" *cdkDragPlaceholder></div>
+              <dbx-bar class="dbx-form-repeat-array-bar dbx-bar-fixed-height">
+                @if (!disableRearrange) {
+                  <button class="dbx-form-repeat-array-drag-button" cdkDragHandle mat-stroked-button><mat-icon>drag_handle</mat-icon></button>
+                  <dbx-button-spacer></dbx-button-spacer>
+                }
+                <h4>
+                  <span class="repeat-array-number">{{ i + 1 }}</span>
+                  <span>{{ labelForItem(field, i) }}</span>
+                </h4>
+                <span class="dbx-spacer"></span>
+                @if (allowDuplicate(i)) {
+                  <dbx-button [stroked]="true" [text]="duplicateText" (buttonClick)="duplicate(i)"></dbx-button>
+                  <dbx-button-spacer></dbx-button-spacer>
+                }
+                @if (allowRemove(i)) {
+                  <dbx-button color="warn" [stroked]="true" [text]="removeText" (buttonClick)="remove(i)"></dbx-button>
+                }
+              </dbx-bar>
+              <formly-field class="dbx-form-repeat-array-field-content" [field]="field"></formly-field>
+            </div>
+          }
         </div>
         <!-- Add Button -->
         <div class="dbx-form-repeat-array-footer">
-          <dbx-button *ngIf="allowAdd" [raised]="true" [disabled]="addItemDisabled" [text]="addText" (buttonClick)="addClicked()"></dbx-button>
+          @if (allowAdd) {
+            <dbx-button [raised]="true" [disabled]="addItemDisabled" [text]="addText" (buttonClick)="addClicked()"></dbx-button>
+          }
         </div>
       </dbx-subsection>
     </div>
-  `
+  `,
+                    imports: [DbxSubSectionComponent, DbxBarDirective, DbxButtonComponent, FormlyModule, DragDropModule, MatIconModule, DbxButtonSpacerDirective, MatFormFieldModule, FormsModule, ReactiveFormsModule],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    standalone: true
                 }]
         }] });
 
+const importsAndExports = [DbxFormRepeatArrayTypeComponent];
 class DbxFormFormlyArrayFieldModule {
-    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,
-            MatButtonModule,
-            MatIconModule,
-            DragDropModule,
-            DbxSectionLayoutModule,
-            DbxBarLayoutModule,
-            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,
-            MatButtonModule,
-            MatIconModule,
-            DragDropModule,
-            DbxSectionLayoutModule,
-            DbxBarLayoutModule,
-            DbxButtonModule,
-            FormlyModule.forChild({
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxFormFormlyArrayFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: DbxFormFormlyArrayFieldModule, imports: [DbxFormRepeatArrayTypeComponent, i1$2.FormlyModule], exports: [DbxFormRepeatArrayTypeComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxFormFormlyArrayFieldModule, imports: [importsAndExports, FormlyModule.forChild({
                 types: [{ name: 'repeatarray', component: DbxFormRepeatArrayTypeComponent }]
             })] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormFormlyArrayFieldModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxFormFormlyArrayFieldModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
-                        CommonModule,
-                        MatFormFieldModule,
-                        ReactiveFormsModule,
-                        MatDividerModule,
-                        MatButtonModule,
-                        MatIconModule,
-                        DragDropModule,
-                        DbxSectionLayoutModule,
-                        DbxBarLayoutModule,
-                        DbxButtonModule,
+                        ...importsAndExports,
                         FormlyModule.forChild({
                             types: [{ name: 'repeatarray', component: DbxFormRepeatArrayTypeComponent }]
                         })
                     ],
-                    declarations: [DbxFormRepeatArrayTypeComponent],
-                    exports: []
+                    exports: importsAndExports
                 }]
         }] });
 
@@ -3517,11 +3310,11 @@ function repeatArrayField(config) {
 }
 
 class 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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxFormFormlyBooleanFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: DbxFormFormlyBooleanFieldModule });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxFormFormlyBooleanFieldModule });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormFormlyBooleanFieldModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxFormFormlyBooleanFieldModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [],
@@ -3536,7 +3329,7 @@ function toggleField(config) {
     return formlyField({
         key,
         type: 'toggle',
-        wrappers: [AUTO_TOUCH_WRAPPER_KEY, STYLE_WRAPPER_KEY, 'form-field'],
+        wrappers: [AUTO_TOUCH_WRAPPER_KEY, STYLE_WRAPPER_KEY, 'form-field'], // NOTE: Must specify form-field if other wrapper specified, otherwise it will not be used.
         defaultValue: defaultValue ?? false,
         ...propsAndConfigForFieldConfig(config, {
             classGetter,
@@ -3614,10 +3407,10 @@ class DbxDateTimeFieldMenuPresetsService {
     set configurations(configurations) {
         this._configurations.next(configurations);
     }
-    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' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxDateTimeFieldMenuPresetsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxDateTimeFieldMenuPresetsService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxDateTimeFieldMenuPresetsService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxDateTimeFieldMenuPresetsService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -3917,7 +3710,7 @@ class DbxDateTimeFieldComponent extends FieldType$1 {
             return DbxDateTimeFieldTimeMode.NONE;
         }
         else {
-            return this.timeOnly ? DbxDateTimeFieldTimeMode.REQUIRED : this.dateTimeField.timeMode ?? DbxDateTimeFieldTimeMode.REQUIRED;
+            return this.timeOnly ? DbxDateTimeFieldTimeMode.REQUIRED : (this.dateTimeField.timeMode ?? DbxDateTimeFieldTimeMode.REQUIRED);
         }
     }
     get isDateRequired() {
@@ -4027,7 +3820,7 @@ class DbxDateTimeFieldComponent extends FieldType$1 {
         }
         return result;
     }), distinctUntilChanged(isSameDateHoursAndMinutes), shareReplay(1));
-    dateTimePickerConfig$ = combineLatest([this._config.pipe(switchMapMaybeObs()), this.syncConfigBeforeValue$, this.syncConfigAfterValue$]).pipe(map(([x, dateInputMin, dateInputMax]) => {
+    dateTimePickerConfig$ = combineLatest([this._config.pipe(switchMapFilterMaybe()), this.syncConfigBeforeValue$, this.syncConfigAfterValue$]).pipe(map(([x, dateInputMin, dateInputMax]) => {
         let result = x;
         if (dateInputMin != null || dateInputMax != null) {
             const { min: limitMin, max: limitMax } = x?.limits ?? {};
@@ -4087,7 +3880,7 @@ class DbxDateTimeFieldComponent extends FieldType$1 {
         });
     }), shareReplay(1));
     hasEmptyDisplayValue$ = this.displayValue$.pipe(map((x) => !x), distinctUntilChanged(), shareReplay(1));
-    presets$ = this._presets.pipe(switchMapMaybeObs(), map((x) => x.map(dateTimePreset)), shareReplay(1));
+    presets$ = this._presets.pipe(switchMapFilterMaybe(), 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) => {
@@ -4391,10 +4184,10 @@ class DbxDateTimeFieldComponent extends FieldType$1 {
     clearValue() {
         this._cleared.next();
     }
-    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" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxDateTimeFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", 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$5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$5.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$5.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.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$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i4$1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i4$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i2$2.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i6.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i6.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i4$2.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i4$2.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i8.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i8.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i8.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i1.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: i11.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$5.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$5.DatePipe, name: "date" }, { kind: "pipe", type: i2$3.DateDistancePipe, name: "dateDistance" }, { kind: "pipe", type: i2$3.TimeDistancePipe, name: "timeDistance" }, { kind: "pipe", type: i2$3.GetValuePipe, name: "getValue" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxDateTimeFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", 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" }]
         }] });
@@ -4831,15 +4624,15 @@ class DbxFixedDateRangeFieldComponent extends FieldType$1 {
     _createDateRange(date) {
         return date ? dateRange({ ...this._currentDateRangeInput, date }) : undefined;
     }
-    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: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxFixedDateRangeFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", 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: 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" }] });
+        ], 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$5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$5.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$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: i4$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: i4$2.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { kind: "directive", type: i4$2.MatStartDate, selector: "input[matStartDate]", outputs: ["dateChange", "dateInput"] }, { kind: "directive", type: i4$2.MatEndDate, selector: "input[matEndDate]", 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: i11.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$5.AsyncPipe, name: "async" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFixedDateRangeFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxFixedDateRangeFieldComponent, decorators: [{
             type: Component,
             args: [{ providers: [
                         {
@@ -4904,16 +4697,16 @@ class DbxFixedDateRangeFieldSelectionStrategy {
         const year = date.getFullYear();
         return this._dateAdapter.createDate(year, monthIndex, day);
     }
-    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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxFixedDateRangeFieldSelectionStrategy, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxFixedDateRangeFieldSelectionStrategy });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFixedDateRangeFieldSelectionStrategy, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxFixedDateRangeFieldSelectionStrategy, decorators: [{
             type: Injectable
         }] });
 
 class DbxFormFormlyDateFieldModule {
-    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,
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxFormFormlyDateFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: DbxFormFormlyDateFieldModule, declarations: [DbxDateTimeFieldComponent, DbxFixedDateRangeFieldComponent], imports: [CommonModule,
             FormsModule,
             MatInputModule,
             MatDividerModule,
@@ -4921,15 +4714,14 @@ class DbxFormFormlyDateFieldModule {
             DbxButtonModule,
             MatButtonModule,
             MatDatepickerModule,
-            MatNativeDateModule,
             MatMenuModule,
             ReactiveFormsModule,
             DbxDatePipeModule,
             DbxValuePipeModule,
             MatChipsModule,
             MatIconModule,
-            FlexLayoutModule, i1$1.FormlyModule], exports: [DbxFormFormlyWrapperModule] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormFormlyDateFieldModule, imports: [CommonModule,
+            FlexLayoutModule, i1$2.FormlyModule], exports: [DbxFormFormlyWrapperModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxFormFormlyDateFieldModule, imports: [CommonModule,
             FormsModule,
             MatInputModule,
             MatDividerModule,
@@ -4937,7 +4729,6 @@ class DbxFormFormlyDateFieldModule {
             DbxButtonModule,
             MatButtonModule,
             MatDatepickerModule,
-            MatNativeDateModule,
             MatMenuModule,
             ReactiveFormsModule,
             DbxDatePipeModule,
@@ -4953,7 +4744,7 @@ class DbxFormFormlyDateFieldModule {
                 ]
             }), DbxFormFormlyWrapperModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormFormlyDateFieldModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxFormFormlyDateFieldModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -4965,7 +4756,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         DbxButtonModule,
                         MatButtonModule,
                         MatDatepickerModule,
-                        MatNativeDateModule,
                         MatMenuModule,
                         ReactiveFormsModule,
                         DbxDatePipeModule,
@@ -5257,7 +5047,7 @@ const FIELD_VALUES_ARE_EQUAL_VALIDATION_KEY = 'fieldValuesAreEqual';
 function fieldValuesAreEqualValidator(config = {}) {
     const { keysFilter, valuesFilter: inputValuesFilter, isEqual = (a, b) => a === b, message = 'Field values are not equal.' } = config;
     const valuesFilter = inputValuesFilter ?? {
-        valueFilter: KeyValueTypleValueFilter.NONE,
+        valueFilter: KeyValueTypleValueFilter.NONE, // keep all values. Null/undefined should be processed.
         keysFilter
     };
     return (control) => {
@@ -5487,11 +5277,11 @@ function dollarAmountField(config) {
 }
 
 class DbxFormFormlyNumberFieldModule {
-    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] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxFormFormlyNumberFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: DbxFormFormlyNumberFieldModule, imports: [FormlyMaterialModule, FormlyMatSliderModule], exports: [DbxFormFormlyWrapperModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxFormFormlyNumberFieldModule, imports: [FormlyMaterialModule, FormlyMatSliderModule, DbxFormFormlyWrapperModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormFormlyNumberFieldModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxFormFormlyNumberFieldModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [FormlyMaterialModule, FormlyMatSliderModule],
@@ -5578,17 +5368,17 @@ class DbxPhoneFieldComponent extends FieldType$1 {
         this.inputSync.destroy();
         this.outputSync.destroy();
     }
-    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"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxPhoneFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", 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$5.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$1.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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxPhoneFieldComponent, decorators: [{
             type: Component,
             args: [{ template: "<div class=\"dbx-form-phone-field\" [formGroup]=\"inputFormGroup\">\n  <ngx-mat-intl-tel-input class=\"dbx-form-phone-field-phone-content\" [required]=\"required\" [preferredCountries]=\"preferredCountries\" [enablePlaceholder]=\"false\" name=\"phone\" [formControl]=\"phoneCtrl\"></ngx-mat-intl-tel-input>\n  <div *ngIf=\"allowExtension\" class=\"dbx-form-phone-field-extension-content\">\n    <span class=\"dbx-hint dbx-button-spacer\">Ext.</span>\n    <input class=\"dbx-form-phone-field-extension-input\" placeholder=\"123\" minlength=\"0\" maxlength=\"6\" #extensionInput [formControl]=\"extensionCtrl\" />\n  </div>\n</div>\n" }]
         }] });
 
 class DbxFormFormlyPhoneFieldModule {
-    static ɵ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,
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxFormFormlyPhoneFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: DbxFormFormlyPhoneFieldModule, declarations: [DbxPhoneFieldComponent], imports: [CommonModule,
             MatInputModule,
             MatFormFieldModule,
             FormsModule,
@@ -5597,8 +5387,8 @@ class DbxFormFormlyPhoneFieldModule {
             MatChipsModule,
             MatIconModule,
             FlexLayoutModule,
-            FormlyMatFormFieldModule, i1$1.FormlyModule, NgxMatIntlTelInputComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormFormlyPhoneFieldModule, imports: [CommonModule,
+            FormlyMatFormFieldModule, i1$2.FormlyModule, NgxMatIntlTelInputComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxFormFormlyPhoneFieldModule, imports: [CommonModule,
             MatInputModule,
             MatFormFieldModule,
             FormsModule,
@@ -5613,7 +5403,7 @@ class DbxFormFormlyPhoneFieldModule {
             }),
             NgxMatIntlTelInputComponent] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormFormlyPhoneFieldModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxFormFormlyPhoneFieldModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -5919,11 +5709,11 @@ function addressListField(config = {}) {
 }
 
 class DbxFormFormlyTextFieldModule {
-    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] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxFormFormlyTextFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: DbxFormFormlyTextFieldModule, imports: [FormlyMaterialModule], exports: [DbxFormFormlyWrapperModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxFormFormlyTextFieldModule, imports: [FormlyMaterialModule, DbxFormFormlyWrapperModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormFormlyTextFieldModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxFormFormlyTextFieldModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [FormlyMaterialModule],
@@ -5940,11 +5730,11 @@ function hiddenField({ key, required = false }) {
 }
 
 class DbxFormFormlyValueModule {
-    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] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxFormFormlyValueModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: DbxFormFormlyValueModule, imports: [CommonModule], exports: [DbxFormFormlyArrayFieldModule, DbxFormFormlyBooleanFieldModule, DbxFormFormlyDateFieldModule, DbxFormFormlyPhoneFieldModule, DbxFormFormlyNumberFieldModule, DbxFormFormlyTextFieldModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", 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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxFormFormlyValueModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule],
@@ -5954,11 +5744,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
         }] });
 
 class DbxFormFormlyFieldModule {
-    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] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxFormFormlyFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: DbxFormFormlyFieldModule, imports: [CommonModule], exports: [DbxFormFormlyChecklistItemFieldModule, DbxFormFormlyComponentFieldModule, DbxFormFormlySelectionModule, DbxFormFormlyTextEditorFieldModule, DbxFormFormlyValueModule, DbxFormFormlyWrapperModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", 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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxFormFormlyFieldModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule],
@@ -5971,13 +5761,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  * Allows a directive to provide a formly context and form.
  */
 function provideFormlyContext() {
-    return [
-        {
-            provide: DbxFormlyContext,
-            useClass: DbxFormlyContext
-        },
-        ...provideDbxMutableForm(DbxFormlyContext)
-    ];
+    return [DbxFormlyContext, ...provideDbxMutableForm(DbxFormlyContext)];
 }
 /**
  * DbxForm Instance that registers a delegate and manages the state of that form/delegate.
@@ -5992,6 +5776,9 @@ class DbxFormlyContext {
     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));
+    ngOnDestroy() {
+        this.destroy();
+    }
     destroy() {
         this.lockSet.destroyOnNextUnlock(() => {
             this._fields.complete();
@@ -6059,21 +5846,24 @@ class DbxFormlyContext {
             this._delegate.value.forceFormUpdate();
         }
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxFormlyContext, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxFormlyContext });
 }
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxFormlyContext, decorators: [{
+            type: Injectable
+        }] });
 
 /**
- * Abstract component for wrapping a form.
+ * Abstract component for wrapping a DbxFormlyContext.
+ *
+ * The implementing component should use provideFormlyContext() to provide the DbxFormlyContext specific to this directive. The context is injected using only self.
  */
 class AbstractFormlyFormDirective {
-    context = inject((DbxFormlyContext));
-    get disabled() {
-        return this.context.isDisabled();
-    }
-    set disabled(disabled) {
-        this.context.setDisabled(undefined, disabled);
-    }
+    context = inject((DbxFormlyContext), { self: true });
+    disabled = input(false);
+    _setDisabledOnContext = effect(() => this.context.setDisabled(undefined, this.disabled()));
     ngOnDestroy() {
-        this.context.destroy();
+        this._setDisabledOnContext.destroy();
     }
     // Utility Functions
     getValue() {
@@ -6091,14 +5881,12 @@ class AbstractFormlyFormDirective {
     setDisabled(key, disabled) {
         this.context.setDisabled(key, disabled);
     }
-    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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AbstractFormlyFormDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.2.13", type: AbstractFormlyFormDirective, inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AbstractFormlyFormDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AbstractFormlyFormDirective, decorators: [{
             type: Directive
-        }], propDecorators: { disabled: [{
-                type: Input
-            }] } });
+        }] });
 /**
  * Abstract component for wrapping a form.
  */
@@ -6106,10 +5894,10 @@ class AbstractSyncFormlyFormDirective extends AbstractFormlyFormDirective {
     ngOnInit() {
         this.context.fields = this.fields;
     }
-    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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AbstractSyncFormlyFormDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: AbstractSyncFormlyFormDirective, usesInheritance: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AbstractSyncFormlyFormDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AbstractSyncFormlyFormDirective, decorators: [{
             type: Directive
         }] });
 /**
@@ -6126,34 +5914,22 @@ class AbstractAsyncFormlyFormDirective extends AbstractFormlyFormDirective {
         super.ngOnDestroy();
         this._fieldsSub.destroy();
     }
-    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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AbstractAsyncFormlyFormDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: AbstractAsyncFormlyFormDirective, usesInheritance: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AbstractAsyncFormlyFormDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AbstractAsyncFormlyFormDirective, decorators: [{
             type: Directive
         }] });
 class AbstractConfigAsyncFormlyFormDirective extends AbstractAsyncFormlyFormDirective {
-    _config = new BehaviorSubject(undefined);
-    currentConfig$ = this._config.asObservable();
-    config$ = this._config.pipe(filterMaybe(), shareReplay(1));
-    get config() {
-        return this._config.value;
-    }
-    set config(config) {
-        this._config.next(config);
-    }
-    ngOnDestroy() {
-        super.ngOnDestroy();
-        this._config.complete();
-    }
-    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 });
+    config = input(undefined);
+    currentConfig$ = toObservable(this.config).pipe(maybeValueFromObservableOrValue());
+    config$ = this.currentConfig$.pipe(filterMaybe(), shareReplay(1));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AbstractConfigAsyncFormlyFormDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.2.13", type: AbstractConfigAsyncFormlyFormDirective, inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AbstractConfigAsyncFormlyFormDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AbstractConfigAsyncFormlyFormDirective, decorators: [{
             type: Directive
-        }], propDecorators: { config: [{
-                type: Input
-            }] } });
+        }] });
 
 function dbxFormSearchFormFields(config) {
     const { label, placeholder = 'Search', materialFormField } = config || {};
@@ -6174,8 +5950,9 @@ function dbxFormSearchFormFields(config) {
 /**
  * Used for rending a form from a DbxFormlyContext.
  */
-class DbxFormlyFormComponent extends AbstractSubscriptionDirective {
+class DbxFormlyComponent extends AbstractSubscriptionDirective {
     _dbxFormlyContext = inject((DbxFormlyContext));
+    formlyForm = viewChild(FormlyForm);
     _fields = new BehaviorSubject(undefined);
     _events = new BehaviorSubject({ isComplete: false, state: DbxFormState.INITIALIZING, status: 'PENDING' });
     _disabled = new BehaviorSubject(undefined);
@@ -6184,9 +5961,9 @@ class DbxFormlyFormComponent extends AbstractSubscriptionDirective {
     _disabledSub = new SubscriptionObject();
     _enforceDisabledSub = new SubscriptionObject();
     form = new FormGroup({});
-    model = {};
+    modelSignal = signal({});
     options = {};
-    fields$ = this._fields.pipe(switchMapMaybeObs(), distinctUntilChanged(), shareReplay(1));
+    fields$ = this._fields.pipe(switchMapFilterMaybe(), 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) => ({
@@ -6237,6 +6014,8 @@ class DbxFormlyFormComponent extends AbstractSubscriptionDirective {
             return of(state);
         }
     }))), shareReplay(1));
+    _fieldsSignal = toSignal(this.fields$, { initialValue: undefined });
+    fieldsSignal = computed(() => this._fieldsSignal() ?? []);
     ngOnInit() {
         this._dbxFormlyContext.setDelegate(this);
         const resyncDisabledState = () => {
@@ -6281,8 +6060,7 @@ class DbxFormlyFormComponent extends AbstractSubscriptionDirective {
         return of(this.form.value);
     }
     setValue(value) {
-        // console.log('set value: ', value);
-        this.model = structuredClone(value);
+        this.modelSignal.set(structuredClone(value));
         if (this.options.updateInitialValue) {
             this.options.updateInitialValue();
             this.options.resetModel?.();
@@ -6323,27 +6101,30 @@ class DbxFormlyFormComponent extends AbstractSubscriptionDirective {
     forceFormUpdate() {
         this._forceUpdate.next();
     }
-    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: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxFormlyComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.13", type: DbxFormlyComponent, isStandalone: true, selector: "dbx-formly", host: { classAttribute: "dbx-formly" }, providers: provideDbxMutableForm(DbxFormlyComponent), viewQueries: [{ propertyName: "formlyForm", first: true, predicate: FormlyForm, descendants: true, isSignal: true }], exportAs: ["formly"], usesInheritance: true, ngImport: i0, template: `
     <form [formGroup]="form" class="dbx-formly">
-      <formly-form [form]="form" [fields]="(fields$ | async) ?? []" [model]="model"></formly-form>
+      <formly-form [form]="form" [options]="options" [fields]="fieldsSignal()" [model]="modelSignal()"></formly-form>
     </form>
-  `, 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" }] });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { 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: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormlyModule }, { kind: "component", type: i1$2.FormlyForm, selector: "formly-form", inputs: ["form", "model", "fields", "options"], outputs: ["modelChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormlyFormComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxFormlyComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'dbx-formly',
                     exportAs: 'formly',
                     template: `
     <form [formGroup]="form" class="dbx-formly">
-      <formly-form [form]="form" [fields]="(fields$ | async) ?? []" [model]="model"></formly-form>
+      <formly-form [form]="form" [options]="options" [fields]="fieldsSignal()" [model]="modelSignal()"></formly-form>
     </form>
   `,
-                    providers: provideDbxMutableForm(DbxFormlyFormComponent),
                     host: {
                         class: 'dbx-formly'
-                    }
+                    },
+                    providers: provideDbxMutableForm(DbxFormlyComponent),
+                    imports: [FormsModule, ReactiveFormsModule, FormlyModule],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    standalone: true
                 }]
         }] });
 
@@ -6357,12 +6138,12 @@ class DbxFormSearchFormComponent extends AbstractConfigAsyncFormlyFormDirective
         super.ngOnDestroy();
         this.search.complete();
     }
-    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: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxFormSearchFormComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", 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: DbxFormlyComponent, selector: "dbx-formly", exportAs: ["formly"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormSearchFormComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxFormSearchFormComponent, decorators: [{
             type: Component,
             args: [{
                     template: `
@@ -6394,14 +6175,15 @@ class DbxFormlyFieldsContextDirective extends AbstractAsyncFormlyFormDirective {
         super.ngOnDestroy();
         this._fields.complete();
     }
-    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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxFormlyFieldsContextDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: DbxFormlyFieldsContextDirective, isStandalone: true, 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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxFormlyFieldsContextDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[dbxFormlyFields]',
-                    providers: provideFormlyContext()
+                    providers: provideFormlyContext(),
+                    standalone: true
                 }]
         }], propDecorators: { fields: [{
                 type: Input,
@@ -6409,44 +6191,40 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }] } });
 
 class DbxFormlyModule {
-    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: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxFormlyModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: DbxFormlyModule, imports: [DbxFormlyComponent, DbxFormlyFieldsContextDirective, CommonModule, FormsModule, ReactiveFormsModule, FormlyModule, FormlyMatToggleModule], exports: [
             // Modules (?)
             FormsModule,
             ReactiveFormsModule,
             // Directives
-            DbxFormlyFormComponent,
-            DbxFormlyFieldsContextDirective
-            // Helper Modules
-        ] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormlyModule, imports: [CommonModule, FormsModule, ReactiveFormsModule, FormlyModule, FormlyMatToggleModule, 
+            DbxFormlyComponent,
+            DbxFormlyFieldsContextDirective] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxFormlyModule, imports: [DbxFormlyComponent, CommonModule, FormsModule, ReactiveFormsModule, FormlyModule, FormlyMatToggleModule, 
             // Modules (?)
             FormsModule,
             ReactiveFormsModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormlyModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxFormlyModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [CommonModule, FormsModule, ReactiveFormsModule, FormlyModule, FormlyMatToggleModule],
-                    declarations: [DbxFormlyFormComponent, DbxFormlyFieldsContextDirective],
+                    imports: [DbxFormlyComponent, DbxFormlyFieldsContextDirective, CommonModule, FormsModule, ReactiveFormsModule, FormlyModule, FormlyMatToggleModule],
                     exports: [
                         // Modules (?)
                         FormsModule,
                         ReactiveFormsModule,
                         // Directives
-                        DbxFormlyFormComponent,
+                        DbxFormlyComponent,
                         DbxFormlyFieldsContextDirective
-                        // Helper Modules
                     ]
                 }]
         }] });
 
 class DbxFormFormlyFormModule {
-    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] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxFormFormlyFormModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: DbxFormFormlyFormModule, declarations: [DbxFormSearchFormComponent], imports: [CommonModule, DbxFormModule, DbxFormlyModule, DbxFormFormlyFieldModule], exports: [DbxFormSearchFormComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxFormFormlyFormModule, imports: [CommonModule, DbxFormModule, DbxFormlyModule, DbxFormFormlyFieldModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormFormlyFormModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxFormFormlyFormModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, DbxFormModule, DbxFormlyModule, DbxFormFormlyFieldModule],
@@ -6596,16 +6374,41 @@ function timezoneStringField(config = {}) {
     });
 }
 
+/**
+ * Default template for a view that extends AbstractFormlyFormDirective.
+ */
+const DBX_FORMLY_FORM_COMPONENT_TEMPLATE = `<dbx-formly></dbx-formly>`;
+/**
+ * Default providers for a view that extends AbstractFormlyFormDirective.
+ */
+const dbxFormlyFormComponentProviders = provideFormlyContext;
+const dbxFormlyFormComponentImports = [DbxFormlyComponent];
+/**
+ * Default imports module for a view that extends AbstractFormlyFormDirective.
+ */
+class DbxFormlyFormComponentImportsModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxFormlyFormComponentImportsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: DbxFormlyFormComponentImportsModule, imports: [DbxFormlyComponent], exports: [DbxFormlyComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxFormlyFormComponentImportsModule, imports: [dbxFormlyFormComponentImports] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxFormlyFormComponentImportsModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: dbxFormlyFormComponentImports,
+                    exports: dbxFormlyFormComponentImports
+                }]
+        }] });
+
 /**
  * Provides vertical spacing after a form.
  */
 class DbxFormSpacerComponent {
-    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: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxFormSpacerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: DbxFormSpacerComponent, selector: "dbx-form-spacer", ngImport: i0, template: `
     <div class="dbx-form-spacer"></div>
   `, isInline: true });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormSpacerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxFormSpacerComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'dbx-form-spacer',
@@ -6616,11 +6419,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
         }] });
 
 class DbxFormLayoutModule {
-    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] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxFormLayoutModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: DbxFormLayoutModule, declarations: [DbxFormSpacerComponent], imports: [CommonModule], exports: [DbxFormSpacerComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxFormLayoutModule, imports: [CommonModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormLayoutModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxFormLayoutModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule],
@@ -6630,20 +6433,46 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
         }] });
 
 class DbxFormExtensionModule {
-    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] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxFormExtensionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: DbxFormExtensionModule, exports: [DbxFormModule, DbxFormlyModule, DbxFormFormlyFieldModule, DbxFormFormlyFormModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxFormExtensionModule, imports: [DbxFormModule, DbxFormlyModule, DbxFormFormlyFieldModule, DbxFormFormlyFormModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormExtensionModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxFormExtensionModule, decorators: [{
             type: NgModule,
             args: [{
                     exports: [DbxFormModule, DbxFormlyModule, DbxFormFormlyFieldModule, DbxFormFormlyFormModule]
                 }]
         }] });
 
+function provideDbxFormConfiguration(config) {
+    const { provideDateAdapter, defaultDateTimePresets } = config ?? {};
+    const providers = [
+        {
+            provide: MAT_FORM_FIELD_DEFAULT_OPTIONS,
+            useValue: {
+                subscriptSizing: 'dynamic',
+                floatLabel: 'always',
+                appearance: 'outline'
+            }
+        },
+        {
+            provide: DBX_DATE_TIME_FIELD_MENU_PRESETS_TOKEN,
+            useValue: defaultDateTimePresets ?? DEFAULT_DATE_TIME_FIELD_MENU_PRESETS_PRESETS
+        }
+    ];
+    if (provideDateAdapter !== false) {
+        providers.push(provideDateFnsAdapter());
+        providers.push({
+            provide: MAT_DATE_LOCALE,
+            useValue: enUS
+        });
+    }
+    return makeEnvironmentProviders(providers);
+}
+
 /**
  * Generated bundle index. Do not edit.
  */
 
-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 };
+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_FORMLY_FORM_COMPONENT_TEMPLATE, 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, DbxFormStyleWrapperComponent, DbxFormSubsectionWrapperComponent, DbxFormToggleWrapperComponent, DbxFormValueChangesDirective, DbxFormWorkingWrapperComponent, DbxFormlyComponent, DbxFormlyContext, DbxFormlyFieldsContextDirective, DbxFormlyFormComponentImportsModule, 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, dbxFormlyFormComponentProviders, 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, provideDbxFormConfiguration, 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