@dereekb/dbx-form 12.0.2 → 12.0.4

package/fesm2022/dereekb-dbx-form.mjs

@@ -1,36 +1,35 @@
 import * as i0 from '@angular/core';
-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 { forwardRef, inject, input, Directive, effect, NgModule, output, signal, Component, ChangeDetectionStrategy, viewChild, InjectionToken, computed, ElementRef, Injectable, makeEnvironmentProviders } from '@angular/core';
+import * as i1$2 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 } from '@dereekb/dbx-web';
 import { isPast, addSeconds, startOfDay, addMinutes, addDays, isBefore } from 'date-fns';
 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 * as i2$2 from '@dereekb/dbx-core';
+import { DbxActionContextStoreSourceInstance, AbstractSubscriptionDirective, DbxInjectionComponent, mergeDbxInjectionComponentConfigs, GetValuePipe, DateDistancePipe, TimeDistancePipe } 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 * as i1 from '@angular/forms';
 import { ReactiveFormsModule, FormControl, FormsModule, Validators, FormGroup } from '@angular/forms';
-import * as i1$2 from '@ngx-formly/core';
+import * as i1$3 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 * as i2 from '@angular/material/checkbox';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 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 * as i1$1 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
-import * as i6 from '@angular/material/button';
+import * as i3$1 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 { MatSlideToggle } from '@angular/material/slide-toggle';
-import * as i2$2 from '@angular/material/divider';
+import { NgClass, NgStyle, NgTemplateOutlet, DatePipe, CommonModule } from '@angular/common';
+import * as i2$1 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-all';
-import * as i1$3 from '@angular/material/chips';
+import * as i1$4 from '@angular/material/chips';
 import { MatChipsModule } from '@angular/material/chips';
 import * as i5 from '@angular/material/autocomplete';
 import { MatAutocompleteModule } from '@angular/material/autocomplete';
@@ -38,24 +37,25 @@ 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 { MatSelect, MatOption, MatOptgroup } from '@angular/material/select';
-import * as i1$4 from 'ngx-editor';
+import * as i1$5 from 'ngx-editor';
 import { Editor, NgxEditorModule } from 'ngx-editor';
-import * as i2$4 from '@angular/cdk/drag-drop';
+import * as i2$3 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 { MatFormFieldModule, MatError, MAT_FORM_FIELD_DEFAULT_OPTIONS } from '@angular/material/form-field';
+import { FormlyMatCheckboxModule } from '@ngx-formly/material/checkbox';
+import { FormlyMatToggleModule } from '@ngx-formly/material/toggle';
+import * as i1$7 from '@angular/material/datepicker';
+import { MatDatepickerModule, MatCalendar, DateRange, MAT_DATE_RANGE_SELECTION_STRATEGY } from '@angular/material/datepicker';
 import { FlexLayoutModule } from '@ngbracket/ngx-layout';
+import * as i9 from '@angular/material/menu';
+import { MatMenuModule } from '@angular/material/menu';
+import * as i1$6 from '@ngbracket/ngx-layout/flex';
+import * as i2$4 from '@ngbracket/ngx-layout/extended';
 import { FormlyMatSliderModule } from '@ngx-formly/material/slider';
-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 { FormlyMatInputModule } from '@ngx-formly/material/input';
 import { provideDateFnsAdapter } from '@angular/material-date-fns-adapter';
 import { enUS } from 'date-fns/locale';
 
@@ -390,6 +390,8 @@ class DbxFormSourceDirective extends AbstractSubscriptionDirective {
             });
         }
         this.sub = subscription;
+    }, {
+        allowSignalWrites: true
     });
     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 });
@@ -436,7 +438,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
  *
  * Emits undefined when the form is incomplete, and the value when the form is complete.
  */
-class DbxFormValueChangesDirective extends AbstractSubscriptionDirective {
+class DbxFormValueChangeDirective extends AbstractSubscriptionDirective {
     form = inject((DbxForm), { host: true });
     dbxFormValueChange = output();
     ngOnInit() {
@@ -451,10 +453,10 @@ class DbxFormValueChangesDirective extends AbstractSubscriptionDirective {
             }
         });
     }
-    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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxFormValueChangeDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: DbxFormValueChangeDirective, isStandalone: true, selector: "[dbxFormValueChange]", outputs: { dbxFormValueChange: "dbxFormValueChange" }, usesInheritance: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxFormValueChangesDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxFormValueChangeDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[dbxFormValueChange]',
@@ -462,24 +464,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 }]
         }] });
 
-const importsAndExports$8 = [DbxFormSourceDirective, DbxFormValueChangesDirective, DbxFormLoadingSourceDirective];
+const importsAndExports$i = [DbxFormSourceDirective, DbxFormValueChangeDirective, DbxFormLoadingSourceDirective];
 /**
  * @deprecated import the directives directly instead.
  *
  * @see DbxFormSourceDirective
- * @see DbxFormValueChangesDirective
+ * @see DbxFormValueChangeDirective
  * @see DbxFormLoadingSourceDirective
  */
 class DbxFormIoModule {
     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 ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: DbxFormIoModule, imports: [DbxFormSourceDirective, DbxFormValueChangeDirective, DbxFormLoadingSourceDirective], exports: [DbxFormSourceDirective, DbxFormValueChangeDirective, DbxFormLoadingSourceDirective] });
     static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxFormIoModule });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxFormIoModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: importsAndExports$8,
-                    exports: importsAndExports$8
+                    imports: importsAndExports$i,
+                    exports: importsAndExports$i
                 }]
         }] });
 
@@ -574,7 +576,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
   `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     standalone: true,
-                    imports: [NgIf]
+                    imports: []
                 }]
         }] });
 
@@ -640,11 +642,11 @@ class DbxChecklistItemFieldComponent extends FieldType {
         this._displayContentObs.set(this.checklistField.displayContent);
     }
     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 });
+    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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i2.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$1.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: "18.2.13", ngImport: i0, type: DbxChecklistItemFieldComponent, decorators: [{
             type: Component,
-            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" }]
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [ReactiveFormsModule, MatCheckboxModule, DbxAnchorComponent, MatRippleModule, MatIconModule, 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 {
@@ -666,7 +668,7 @@ class DbxFormInfoWrapperComponent extends FieldWrapper {
         </button>
       </div>
     </div>
-  `, 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 });
+  `, isInline: true, dependencies: [{ kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxFormInfoWrapperComponent, decorators: [{
             type: Component,
@@ -698,7 +700,7 @@ class DbxFormSectionWrapperComponent extends FieldWrapper {
     <dbx-section [headerConfig]="headerConfig">
       <ng-container #fieldComponent></ng-container>
     </dbx-section>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: DbxSectionLayoutModule }, { kind: "component", type: i1$1.DbxSectionComponent, selector: "dbx-section", inputs: ["elevate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: DbxSectionLayoutModule }, { kind: "component", type: i1$2.DbxSectionComponent, selector: "dbx-section", inputs: ["elevate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxFormSectionWrapperComponent, decorators: [{
             type: Component,
@@ -1030,10 +1032,10 @@ 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];
+const importsAndExports$h = [AutoTouchFieldWrapperComponent, DbxFormSectionWrapperComponent, DbxFormSubsectionWrapperComponent, DbxFormInfoWrapperComponent, DbxFormExpandWrapperComponent, DbxFormToggleWrapperComponent, DbxFormFlexWrapperComponent, DbxFormStyleWrapperComponent, DbxFormWorkingWrapperComponent];
 class DbxFormFormlyWrapperModule {
     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 ɵ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$3.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 },
@@ -1052,7 +1054,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
             type: NgModule,
             args: [{
                     imports: [
-                        ...importsAndExports$7,
+                        ...importsAndExports$h,
                         FormlyModule.forChild({
                             wrappers: [
                                 { name: AUTO_TOUCH_WRAPPER_KEY, component: AutoTouchFieldWrapperComponent },
@@ -1067,14 +1069,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                             ]
                         })
                     ],
-                    exports: importsAndExports$7
+                    exports: importsAndExports$h
                 }]
         }] });
 
-const importsAndExports$6 = [DbxChecklistItemFieldComponent, DbxChecklistItemContentComponent, DbxDefaultChecklistItemFieldDisplayComponent];
+const importsAndExports$g = [DbxChecklistItemFieldComponent, DbxChecklistItemContentComponent, DbxDefaultChecklistItemFieldDisplayComponent];
 class DbxFormFormlyChecklistItemFieldModule {
     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 ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: DbxFormFormlyChecklistItemFieldModule, imports: [DbxChecklistItemFieldComponent, DbxChecklistItemContentComponent, DbxDefaultChecklistItemFieldDisplayComponent, DbxFormFormlyWrapperModule, i1$3.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 }]
@@ -1084,7 +1086,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
             type: NgModule,
             args: [{
                     imports: [
-                        ...importsAndExports$6,
+                        ...importsAndExports$g,
                         DbxFormFormlyWrapperModule,
                         FormlyModule.forChild({
                             types: [{ name: 'checklistitem', component: DbxChecklistItemFieldComponent }]
@@ -1323,11 +1325,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 }]
         }] });
 
-const importsAndExports$5 = [DbxFormComponentFieldComponent];
+const importsAndExports$f = [DbxFormComponentFieldComponent];
 class DbxFormFormlyComponentFieldModule {
     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({
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: DbxFormFormlyComponentFieldModule, imports: [DbxFormComponentFieldComponent, i1$3.FormlyModule], exports: [DbxFormComponentFieldComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxFormFormlyComponentFieldModule, imports: [importsAndExports$f, FormlyModule.forChild({
                 types: [{ name: 'component', component: DbxFormComponentFieldComponent }]
             })] });
 }
@@ -1335,12 +1337,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
             type: NgModule,
             args: [{
                     imports: [
-                        ...importsAndExports$5,
+                        ...importsAndExports$f,
                         FormlyModule.forChild({
                             types: [{ name: 'component', component: DbxFormComponentFieldComponent }]
                         })
                     ],
-                    exports: importsAndExports$5
+                    exports: importsAndExports$f
                 }]
         }] });
 
@@ -1436,18 +1438,18 @@ class DbxItemListFieldComponent extends FieldType {
         }
     }
     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 });
+    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$2.DbxValueListItemModifierDirective, selector: "dbxListItemModifier,[dbxListItemModifier]", inputs: ["dbxListItemModifier"] }, { kind: "directive", type: i1$2.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$1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxItemListFieldComponent, decorators: [{
             type: Component,
             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];
+const importsAndExports$e = [DbxItemListFieldComponent];
 class DbxFormFormlyDbxListFieldModule {
     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({
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: DbxFormFormlyDbxListFieldModule, imports: [DbxItemListFieldComponent, i1$3.FormlyModule], exports: [DbxItemListFieldComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxFormFormlyDbxListFieldModule, imports: [importsAndExports$e, FormlyModule.forChild({
                 types: [{ name: 'dbxlistfield', component: DbxItemListFieldComponent }]
             })] });
 }
@@ -1455,12 +1457,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
             type: NgModule,
             args: [{
                     imports: [
-                        ...importsAndExports$4,
+                        ...importsAndExports$e,
                         FormlyModule.forChild({
                             types: [{ name: 'dbxlistfield', component: DbxItemListFieldComponent }]
                         })
                     ],
-                    exports: importsAndExports$4
+                    exports: importsAndExports$e
                 }]
         }] });
 
@@ -1741,7 +1743,7 @@ class DbxPickableChipListFieldComponent extends AbstractDbxPickableItemFieldDire
         }
     }
     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 });
+    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$4.MatChipAvatar, selector: "mat-chip-avatar, [matChipAvatar]" }, { kind: "component", type: i1$4.MatChipListbox, selector: "mat-chip-listbox", inputs: ["multiple", "aria-orientation", "selectable", "compareWith", "required", "hideSingleSelectionIndicator", "value"], outputs: ["change"] }, { kind: "component", type: i1$4.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: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$1.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: "18.2.13", ngImport: i0, type: DbxPickableChipListFieldComponent, decorators: [{
             type: Component,
@@ -1756,7 +1758,7 @@ class DbxPickableListFieldItemListComponent extends AbstractDbxSelectionListWrap
         });
     }
     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 });
+    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$2.DbxListComponent, selector: "dbx-list", inputs: ["padded", "state", "config", "disabled", "selectionMode"], outputs: ["contentScrolled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxPickableListFieldItemListComponent, decorators: [{
             type: Component,
@@ -1823,7 +1825,7 @@ class DbxPickableListFieldItemListViewItemComponent extends AbstractDbxValueList
         <span class="dbx-chip-sublabel">({{ sublabel }})</span>
       }
     </div>
-  `, 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 });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxPickableListFieldItemListViewItemComponent, decorators: [{
             type: Component,
@@ -1855,18 +1857,18 @@ class DbxPickableListFieldComponent extends AbstractDbxPickableItemFieldDirectiv
         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 });
+    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: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.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];
+const importsAndExports$d = [DbxPickableChipListFieldComponent, DbxPickableListFieldComponent, DbxPickableListFieldItemListComponent, DbxPickableListFieldItemListViewComponent, DbxPickableListFieldItemListViewItemComponent];
 class DbxFormFormlyPickableFieldModule {
     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({
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: DbxFormFormlyPickableFieldModule, imports: [DbxPickableChipListFieldComponent, DbxPickableListFieldComponent, DbxPickableListFieldItemListComponent, DbxPickableListFieldItemListViewComponent, DbxPickableListFieldItemListViewItemComponent, i1$3.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$d, FormlyModule.forChild({
                 types: [
                     { name: 'pickablechipfield', component: DbxPickableChipListFieldComponent, wrappers: ['form-field'] },
                     { name: 'pickablelistfield', component: DbxPickableListFieldComponent, wrappers: ['form-field'] }
@@ -1877,7 +1879,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
             type: NgModule,
             args: [{
                     imports: [
-                        ...importsAndExports$3,
+                        ...importsAndExports$d,
                         FormlyModule.forChild({
                             types: [
                                 { name: 'pickablechipfield', component: DbxPickableChipListFieldComponent, wrappers: ['form-field'] },
@@ -1885,7 +1887,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                             ]
                         })
                     ],
-                    exports: importsAndExports$3
+                    exports: importsAndExports$d
                 }]
         }] });
 
@@ -2007,7 +2009,7 @@ class DbxDefaultSearchableFieldDisplayComponent extends AbstractDbxSearchableFie
         <span class="dbx-chip-sublabel">({{ displayValue.sublabel }})</span>
       }
     </div>
-  `, 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 });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxDefaultSearchableFieldDisplayComponent, decorators: [{
             type: Component,
@@ -2350,7 +2352,7 @@ class DbxSearchableChipFieldComponent extends AbstractDbxSearchableValueFieldDir
         this._blur.next();
     }
     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 });
+    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$4.MatChipAvatar, selector: "mat-chip-avatar, [matChipAvatar]" }, { kind: "component", type: i1$4.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i1$4.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i1$4.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i1$4.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$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: DbxLoadingModule }, { kind: "component", type: i1$2.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: "18.2.13", ngImport: i0, type: DbxSearchableChipFieldComponent, decorators: [{
             type: Component,
@@ -2470,18 +2472,18 @@ class DbxSearchableTextFieldComponent extends AbstractDbxSearchableValueFieldDir
         }
     }
     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 });
+    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: i1.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: i1.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: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: DbxLoadingModule }, { kind: "component", type: i1$2.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: "18.2.13", ngImport: i0, type: DbxSearchableTextFieldComponent, decorators: [{
             type: Component,
             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];
+const importsAndExports$c = [DbxSearchableChipFieldComponent, DbxSearchableTextFieldComponent, DbxSearchableFieldAutocompleteItemComponent, DbxDefaultSearchableFieldDisplayComponent];
 class DbxFormFormlySearchableFieldModule {
     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({
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: DbxFormFormlySearchableFieldModule, imports: [DbxSearchableChipFieldComponent, DbxSearchableTextFieldComponent, DbxSearchableFieldAutocompleteItemComponent, DbxDefaultSearchableFieldDisplayComponent, i1$3.FormlyModule], exports: [DbxSearchableChipFieldComponent, DbxSearchableTextFieldComponent, DbxSearchableFieldAutocompleteItemComponent, DbxDefaultSearchableFieldDisplayComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxFormFormlySearchableFieldModule, imports: [importsAndExports$c, FormlyModule.forChild({
                 types: [
                     { name: 'searchablechipfield', component: DbxSearchableChipFieldComponent, wrappers: ['form-field'] },
                     { name: 'searchabletextfield', component: DbxSearchableTextFieldComponent, wrappers: ['form-field'] }
@@ -2492,7 +2494,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
             type: NgModule,
             args: [{
                     imports: [
-                        ...importsAndExports$2,
+                        ...importsAndExports$c,
                         FormlyModule.forChild({
                             types: [
                                 { name: 'searchablechipfield', component: DbxSearchableChipFieldComponent, wrappers: ['form-field'] },
@@ -2500,7 +2502,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                             ]
                         })
                     ],
-                    exports: importsAndExports$2
+                    exports: importsAndExports$c
                 }]
         }] });
 
@@ -2823,7 +2825,7 @@ class DbxFormSourceSelectFieldComponent extends FieldType$2 {
         this.formControl.markAsTouched();
     }
     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 });
+    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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.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$2.DbxActionDirective, selector: "dbx-action,[dbxAction],dbx-action-context,[dbxActionContext]", exportAs: ["action", "dbxAction"] }, { kind: "directive", type: i2$2.DbxActionHandlerDirective, selector: "[dbxActionHandler]", inputs: ["dbxActionHandler"] }, { kind: "directive", type: i2$2.DbxActionValueDirective, selector: "dbxActionValue,[dbxActionValue]", inputs: ["dbxActionValue"] }, { kind: "directive", type: i2$2.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: "18.2.13", ngImport: i0, type: DbxFormSourceSelectFieldComponent, decorators: [{
             type: Component,
@@ -2845,7 +2847,7 @@ function sourceSelectField(config) {
 
 class DbxFormFormlySourceSelectModule {
     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 ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: DbxFormFormlySourceSelectModule, imports: [DbxFormSourceSelectFieldComponent, i1$3.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'] }]
@@ -2899,17 +2901,25 @@ function addValueSelectionOptionFunction(label) {
     };
 }
 
+const importsAndExports$b = [DbxFormFormlyDbxListFieldModule, DbxFormFormlyPickableFieldModule, DbxFormFormlySearchableFieldModule, DbxFormFormlySourceSelectModule];
+/**
+ * @deprecated import the modules directly instead
+ *
+ * @see DbxFormFormlyDbxListFieldModule
+ * @see DbxFormFormlyPickableFieldModule
+ * @see DbxFormFormlySearchableFieldModule
+ * @see DbxFormFormlySourceSelectModule
+ */
 class DbxFormFormlySelectionModule {
     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] });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: DbxFormFormlySelectionModule, imports: [DbxFormFormlyDbxListFieldModule, DbxFormFormlyPickableFieldModule, DbxFormFormlySearchableFieldModule, DbxFormFormlySourceSelectModule], exports: [DbxFormFormlyDbxListFieldModule, DbxFormFormlyPickableFieldModule, DbxFormFormlySearchableFieldModule, DbxFormFormlySourceSelectModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxFormFormlySelectionModule, imports: [importsAndExports$b, DbxFormFormlyDbxListFieldModule, DbxFormFormlyPickableFieldModule, DbxFormFormlySearchableFieldModule, DbxFormFormlySourceSelectModule] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxFormFormlySelectionModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [CommonModule],
-                    declarations: [],
-                    exports: [DbxFormFormlyDbxListFieldModule, DbxFormFormlyPickableFieldModule, DbxFormFormlySearchableFieldModule, DbxFormFormlySourceSelectModule]
+                    imports: importsAndExports$b,
+                    exports: importsAndExports$b
                 }]
         }] });
 
@@ -2971,7 +2981,7 @@ class DbxTextEditorFieldComponent extends FieldType$1 {
         <div class="dbx-form-description">{{ description }}</div>
       }
     </div>
-  `, 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 });
+  `, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: NgxEditorModule }, { kind: "component", type: i1$5.NgxEditorComponent, selector: "ngx-editor", inputs: ["editor", "outputFormat", "placeholder"], outputs: ["focusOut", "focusIn"] }, { kind: "component", type: i1$5.MenuComponent, selector: "ngx-editor-menu", inputs: ["toolbar", "colorPresets", "disabled", "editor", "customMenuRef", "dropdownPlacement"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxTextEditorFieldComponent, decorators: [{
             type: Component,
@@ -2998,11 +3008,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 }]
         }] });
 
-const importsAndExports$1 = [DbxTextEditorFieldComponent];
+const importsAndExports$a = [DbxTextEditorFieldComponent];
 class DbxFormFormlyTextEditorFieldModule {
     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({
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: DbxFormFormlyTextEditorFieldModule, imports: [DbxTextEditorFieldComponent, i1$3.FormlyModule], exports: [DbxTextEditorFieldComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxFormFormlyTextEditorFieldModule, imports: [importsAndExports$a, FormlyModule.forChild({
                 types: [{ name: 'texteditor', component: DbxTextEditorFieldComponent }]
             })] });
 }
@@ -3010,12 +3020,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
             type: NgModule,
             args: [{
                     imports: [
-                        ...importsAndExports$1,
+                        ...importsAndExports$a,
                         FormlyModule.forChild({
                             types: [{ name: 'texteditor', component: DbxTextEditorFieldComponent }]
                         })
                     ],
-                    exports: importsAndExports$1
+                    exports: importsAndExports$a
                 }]
         }] });
 
@@ -3208,7 +3218,7 @@ class DbxFormRepeatArrayTypeComponent extends FieldArrayType {
         </div>
       </dbx-subsection>
     </div>
-  `, 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 });
+  `, 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$3.FormlyField, selector: "formly-field", inputs: ["field"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i2$3.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$3.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$3.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "directive", type: i2$3.CdkDragPlaceholder, selector: "ng-template[cdkDragPlaceholder]", inputs: ["data"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$1.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: "18.2.13", ngImport: i0, type: DbxFormRepeatArrayTypeComponent, decorators: [{
             type: Component,
@@ -3258,11 +3268,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 }]
         }] });
 
-const importsAndExports = [DbxFormRepeatArrayTypeComponent];
+const importsAndExports$9 = [DbxFormRepeatArrayTypeComponent];
 class DbxFormFormlyArrayFieldModule {
     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({
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: DbxFormFormlyArrayFieldModule, imports: [DbxFormRepeatArrayTypeComponent, i1$3.FormlyModule], exports: [DbxFormRepeatArrayTypeComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxFormFormlyArrayFieldModule, imports: [importsAndExports$9, FormlyModule.forChild({
                 types: [{ name: 'repeatarray', component: DbxFormRepeatArrayTypeComponent }]
             })] });
 }
@@ -3270,12 +3280,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
             type: NgModule,
             args: [{
                     imports: [
-                        ...importsAndExports,
+                        ...importsAndExports$9,
                         FormlyModule.forChild({
                             types: [{ name: 'repeatarray', component: DbxFormRepeatArrayTypeComponent }]
                         })
                     ],
-                    exports: importsAndExports
+                    exports: importsAndExports$9
                 }]
         }] });
 
@@ -3305,17 +3315,17 @@ function repeatArrayField(config) {
     });
 }
 
+const importsAndExports$8 = [FormlyMaterialModule, FormlyMatCheckboxModule, FormlyMatToggleModule];
 class 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 });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: DbxFormFormlyBooleanFieldModule, imports: [FormlyMaterialModule, FormlyMatCheckboxModule, FormlyMatToggleModule], exports: [FormlyMaterialModule, FormlyMatCheckboxModule, FormlyMatToggleModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxFormFormlyBooleanFieldModule, imports: [importsAndExports$8, FormlyMaterialModule, FormlyMatCheckboxModule, FormlyMatToggleModule] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxFormFormlyBooleanFieldModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [],
-                    declarations: [],
-                    exports: []
+                    imports: importsAndExports$8,
+                    exports: importsAndExports$8
                 }]
         }] });
 
@@ -3586,7 +3596,6 @@ const DBX_DATE_TIME_FIELD_DATE_NOT_IN_SCHEDULE_ERROR = 'dateTimeFieldDateNotInSc
  */
 const DBX_DATE_TIME_FIELD_TIME_NOT_IN_RANGE_ERROR = 'dateTimeFieldTimeNotInRange';
 class DbxDateTimeFieldComponent extends FieldType$1 {
-    cdRef = inject(ChangeDetectorRef);
     dbxDateTimeFieldConfigService = inject(DbxDateTimeFieldMenuPresetsService);
     _sub = new SubscriptionObject();
     _valueSub = new SubscriptionObject();
@@ -3597,7 +3606,10 @@ class DbxDateTimeFieldComponent extends FieldType$1 {
     _defaultTimezone = new BehaviorSubject(undefined);
     _timeDate = new BehaviorSubject(undefined);
     _presets = new BehaviorSubject(of([]));
-    _fullDayInputCtrl;
+    /**
+     * Alternative/backup full day control if not defined in the Formly form.
+     */
+    _fullDayInputCtrl = new FormControl(false);
     _fullDayControlObs = new BehaviorSubject(undefined);
     fullDayControl$ = this._fullDayControlObs.pipe(filterMaybe());
     _offset = new BehaviorSubject(0);
@@ -3653,7 +3665,7 @@ class DbxDateTimeFieldComponent extends FieldType$1 {
      */
     displayValue$ = this.refreshInteral$.pipe(
     // every 10 seconds, refresh w/interval
-    startWith(0), map(() => new Date().getMinutes()), distinctUntilChanged(), tap(() => this.cdRef.markForCheck()), switchMap(() => this.valueInSystemTimezone$), shareReplay(1));
+    startWith(0), map(() => new Date().getMinutes()), distinctUntilChanged(), switchMap(() => this.valueInSystemTimezone$), shareReplay(1));
     timeString$ = this.valueInSystemTimezone$.pipe(map((x) => (x ? toLocalReadableTimeString(x) : '')), distinctUntilChanged(), shareReplay(1));
     dateInputCtrl = new FormControl(null, {
         validators: []
@@ -3901,6 +3913,21 @@ class DbxDateTimeFieldComponent extends FieldType$1 {
         return currentErrorMessage;
     }))), startWith(undefined), shareReplay(1));
     hasError$ = this.currentErrorMessage$.pipe(map((x) => Boolean(x)), distinctUntilChanged(), shareReplay(1));
+    dateValueSignal = toSignal(this.dateValue$);
+    displayValueSignal = toSignal(this.displayValue$);
+    pickerFilterSignal = toSignal(this.pickerFilter$, { initialValue: this.defaultPickerFilter });
+    dateInputMinSignal = toSignal(this.dateInputMin$, { initialValue: null });
+    dateInputMaxSignal = toSignal(this.dateInputMax$, { initialValue: null });
+    showDateInputSignal = toSignal(this.showDateInput$);
+    showTimeInputSignal = toSignal(this.showTimeInput$);
+    showAddTimeSignal = toSignal(this.showAddTime$);
+    fullDaySignal = toSignal(this.fullDay$);
+    timezoneAbbreviationSignal = toSignal(this.timezoneAbbreviation$);
+    hasEmptyDisplayValueSignal = toSignal(this.hasEmptyDisplayValue$);
+    currentErrorMessageSignal = toSignal(this.currentErrorMessage$);
+    showClearButtonSignal = toSignal(this.showClearButton$);
+    presetsSignal = toSignal(this.presets$);
+    hasErrorSignal = toSignal(this.hasError$);
     ngOnInit() {
         this._formControlObs.next(this.formControl);
         const inputPickerConfig = this.dateTimeField.pickerConfig;
@@ -3973,7 +4000,7 @@ class DbxDateTimeFieldComponent extends FieldType$1 {
         }
         if (!fullDayFieldCtrl) {
             const isFullDay = this.timeMode === DbxDateTimeFieldTimeMode.NONE;
-            this._fullDayInputCtrl = new FormControl(isFullDay);
+            this._fullDayInputCtrl.setValue(isFullDay);
             // Set the control in the form too if the name is defined.
             if (isFullDayField) {
                 this.form.addControl(isFullDayField, this._fullDayInputCtrl);
@@ -4181,11 +4208,11 @@ class DbxDateTimeFieldComponent extends FieldType$1 {
         this._cleared.next();
     }
     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" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: DbxDateTimeFieldComponent, isStandalone: true, 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  @if (showDateInputSignal()) {\n    <div class=\"dbx-datetime-row\" fxFlex.lt-sm=\"100\" [fxFlex]=\"dateOnly ? '100' : '50'\">\n      <ng-container [ngTemplateOutlet]=\"dateInputTemplate\"></ng-container>\n    </div>\n  }\n  <!-- Time -->\n  <div class=\"dbx-datetime-row\" fxFlex.lt-sm=\"100\" [fxFlex]=\"showDateInputSignal() ? '50' : '100'\">\n    @if (showTimeInputSignal()) {\n      <ng-container [ngTemplateOutlet]=\"timeMenuAndInputTemplate\"></ng-container>\n    }\n    @if (showAddTimeSignal()) {\n      <div 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    }\n  </div>\n  <!-- Date Hint -->\n  @switch (hasErrorSignal()) {\n    @case (false) {\n      @if (!hideDateHint) {\n        <div class=\"dbx-datetime-row dbx-datetime-hint-row\" fxFlex=\"100\">\n          <div class=\"dbx-hint\">\n            @switch (hasEmptyDisplayValueSignal()) {\n              @case (true) {\n                <span class=\"dbx-small\">No date/time set</span>\n              }\n              @case (false) {\n                @switch (fullDaySignal()) {\n                  @case (true) {\n                    <small>\n                      <b class=\"dbx-ok\">{{ allDayLabel }}</b>\n                      {{ displayValueSignal() | date: 'fullDate' }} {{ timezoneAbbreviationSignal() }} ({{ displayValueSignal() | dateDistance }})\n                    </small>\n                  }\n                  @case (false) {\n                    <small>\n                      @if (displayValueSignal()) {\n                        <b class=\"dbx-ok\">{{ atTimeLabel }}</b>\n                        {{ displayValueSignal() | date: 'medium' }} {{ timezoneAbbreviationSignal() }} ({{ displayValueSignal() | timeDistance }})\n                      }\n                    </small>\n                  }\n                }\n              }\n            }\n          </div>\n        </div>\n      }\n    }\n    @case (true) {\n      @if (currentErrorMessageSignal()) {\n        <mat-error>{{ currentErrorMessageSignal() }}</mat-error>\n      }\n    }\n  }\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]=\"dateInputMinSignal()\" [max]=\"dateInputMaxSignal()\" [matDatepicker]=\"picker\" [matDatepickerFilter]=\"pickerFilterSignal()\" (dateChange)=\"datePicked($event)\" [value]=\"dateValueSignal()\" (keydown)=\"keydownOnDateInput($event)\" />\n    <mat-datepicker #picker></mat-datepicker>\n    @if (!hideDatePicker) {\n      <button matPrefix class=\"dbx-datetime-row-button\" mat-icon-button (click)=\"picker.open()\" [disabled]=\"disabled\">\n        <mat-icon>calendar_today</mat-icon>\n      </button>\n    }\n    @if (showClearButtonSignal()) {\n      <button matSuffix 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    }\n    @if (!showTimeInputSignal()) {\n      <span matTextSuffix>\n        <ng-container [ngTemplateOutlet]=\"timezoneSuffixTemplate\"></ng-container>\n      </span>\n    }\n  </mat-form-field>\n</ng-template>\n\n<!-- Time Menu/Input Template -->\n<ng-template #timeMenuAndInputTemplate>\n  <mat-menu #timemenu=\"matMenu\">\n    @if (timeMode === 'optional') {\n      <button mat-menu-item (click)=\"removeTime()\">\n        <span>Remove Time</span>\n      </button>\n      <mat-divider></mat-divider>\n    }\n    @for (preset of presetsSignal(); track preset) {\n      <button mat-menu-item (click)=\"selectPreset(preset)\">{{ preset.label | getValue }}</button>\n    }\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    @if (timeInputCtrl.hasError('pattern')) {\n      <mat-error>The input time is not recognizable.</mat-error>\n    }\n  </mat-form-field>\n</ng-template>\n\n<!-- Timezone Suffix -->\n<ng-template #timezoneSuffixTemplate>\n  @if (showTimezone) {\n    <span class=\"dbx-datetime-timezone dbx-faint\">{{ timezoneAbbreviationSignal() }}</span>\n  }\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: FlexLayoutModule }, { kind: "directive", type: i1$6.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: i1$6.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: i1$6.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: i1$6.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$4.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: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i3$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatFormFieldModule }, { 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.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i4$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i1$7.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i1$7.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { 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: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i9.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: i9.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i9.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "pipe", type: GetValuePipe, name: "getValue" }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "pipe", type: DateDistancePipe, name: "dateDistance" }, { kind: "pipe", type: TimeDistancePipe, name: "timeDistance" }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: i2$1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 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" }]
+            args: [{ imports: [FlexLayoutModule, NgTemplateOutlet, MatButtonModule, NgClass, MatError, MatFormFieldModule, MatDatepickerModule, MatInputModule, FormsModule, ReactiveFormsModule, MatIconModule, MatMenuModule, MatFormFieldModule, GetValuePipe, DatePipe, DateDistancePipe, TimeDistancePipe, MatDividerModule], changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "<div class=\"dbx-datetime-field\" fxLayout=\"row wrap\" fxLayout.xs=\"column wrap\" fxLayoutGap=\"6px grid\" fxLayoutAlign=\"space-evenly stretch\">\n  <!-- Date -->\n  @if (showDateInputSignal()) {\n    <div class=\"dbx-datetime-row\" fxFlex.lt-sm=\"100\" [fxFlex]=\"dateOnly ? '100' : '50'\">\n      <ng-container [ngTemplateOutlet]=\"dateInputTemplate\"></ng-container>\n    </div>\n  }\n  <!-- Time -->\n  <div class=\"dbx-datetime-row\" fxFlex.lt-sm=\"100\" [fxFlex]=\"showDateInputSignal() ? '50' : '100'\">\n    @if (showTimeInputSignal()) {\n      <ng-container [ngTemplateOutlet]=\"timeMenuAndInputTemplate\"></ng-container>\n    }\n    @if (showAddTimeSignal()) {\n      <div 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    }\n  </div>\n  <!-- Date Hint -->\n  @switch (hasErrorSignal()) {\n    @case (false) {\n      @if (!hideDateHint) {\n        <div class=\"dbx-datetime-row dbx-datetime-hint-row\" fxFlex=\"100\">\n          <div class=\"dbx-hint\">\n            @switch (hasEmptyDisplayValueSignal()) {\n              @case (true) {\n                <span class=\"dbx-small\">No date/time set</span>\n              }\n              @case (false) {\n                @switch (fullDaySignal()) {\n                  @case (true) {\n                    <small>\n                      <b class=\"dbx-ok\">{{ allDayLabel }}</b>\n                      {{ displayValueSignal() | date: 'fullDate' }} {{ timezoneAbbreviationSignal() }} ({{ displayValueSignal() | dateDistance }})\n                    </small>\n                  }\n                  @case (false) {\n                    <small>\n                      @if (displayValueSignal()) {\n                        <b class=\"dbx-ok\">{{ atTimeLabel }}</b>\n                        {{ displayValueSignal() | date: 'medium' }} {{ timezoneAbbreviationSignal() }} ({{ displayValueSignal() | timeDistance }})\n                      }\n                    </small>\n                  }\n                }\n              }\n            }\n          </div>\n        </div>\n      }\n    }\n    @case (true) {\n      @if (currentErrorMessageSignal()) {\n        <mat-error>{{ currentErrorMessageSignal() }}</mat-error>\n      }\n    }\n  }\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]=\"dateInputMinSignal()\" [max]=\"dateInputMaxSignal()\" [matDatepicker]=\"picker\" [matDatepickerFilter]=\"pickerFilterSignal()\" (dateChange)=\"datePicked($event)\" [value]=\"dateValueSignal()\" (keydown)=\"keydownOnDateInput($event)\" />\n    <mat-datepicker #picker></mat-datepicker>\n    @if (!hideDatePicker) {\n      <button matPrefix class=\"dbx-datetime-row-button\" mat-icon-button (click)=\"picker.open()\" [disabled]=\"disabled\">\n        <mat-icon>calendar_today</mat-icon>\n      </button>\n    }\n    @if (showClearButtonSignal()) {\n      <button matSuffix 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    }\n    @if (!showTimeInputSignal()) {\n      <span matTextSuffix>\n        <ng-container [ngTemplateOutlet]=\"timezoneSuffixTemplate\"></ng-container>\n      </span>\n    }\n  </mat-form-field>\n</ng-template>\n\n<!-- Time Menu/Input Template -->\n<ng-template #timeMenuAndInputTemplate>\n  <mat-menu #timemenu=\"matMenu\">\n    @if (timeMode === 'optional') {\n      <button mat-menu-item (click)=\"removeTime()\">\n        <span>Remove Time</span>\n      </button>\n      <mat-divider></mat-divider>\n    }\n    @for (preset of presetsSignal(); track preset) {\n      <button mat-menu-item (click)=\"selectPreset(preset)\">{{ preset.label | getValue }}</button>\n    }\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    @if (timeInputCtrl.hasError('pattern')) {\n      <mat-error>The input time is not recognizable.</mat-error>\n    }\n  </mat-form-field>\n</ng-template>\n\n<!-- Timezone Suffix -->\n<ng-template #timezoneSuffixTemplate>\n  @if (showTimezone) {\n    <span class=\"dbx-datetime-timezone dbx-faint\">{{ timezoneAbbreviationSignal() }}</span>\n  }\n</ng-template>\n" }]
         }] });
 
 function dbxFixedDateRangeInputValueFactory(mode, timezoneInstance) {
@@ -4217,6 +4244,11 @@ function dbxFixedDateRangeOutputValueFactory(mode, timezoneInstance) {
 const TIME_OUTPUT_THROTTLE_TIME = 10;
 class DbxFixedDateRangeFieldComponent extends FieldType$1 {
     dbxDateTimeFieldMenuPresetsService = inject(DbxDateTimeFieldMenuPresetsService);
+    calendar = viewChild.required(MatCalendar);
+    startDateInputElement = viewChild('startDateInput', { read: ElementRef });
+    endDateInputElement = viewChild('endDateInput', { read: ElementRef });
+    currentDateRangeInputSignal = signal(undefined);
+    currentSelectionModeSignal = signal('single');
     _sub = new SubscriptionObject();
     _inputRangeFormSub = new SubscriptionObject();
     _inputRangeFormValueSub = new SubscriptionObject();
@@ -4225,9 +4257,6 @@ class DbxFixedDateRangeFieldComponent extends FieldType$1 {
     _latestBoundarySub = new SubscriptionObject();
     _disableEndSub = new SubscriptionObject();
     _activeDateSub = new SubscriptionObject();
-    _currentDateRangeInput = {};
-    _currentSelectionMode = 'single';
-    _latestBoundary = null;
     _config = new BehaviorSubject(undefined);
     _selectionMode = new BehaviorSubject(undefined);
     _dateRangeInput = new BehaviorSubject(undefined);
@@ -4237,18 +4266,6 @@ class DbxFixedDateRangeFieldComponent extends FieldType$1 {
     selectedDateRange$ = this._selectionEvent.pipe(map((x) => x.range));
     _formControlObs = new BehaviorSubject(undefined);
     formControl$ = this._formControlObs.pipe(filterMaybe());
-    calendar;
-    startDateInputElement;
-    endDateInputElement;
-    get currentDateRangeInput() {
-        return this._currentDateRangeInput;
-    }
-    get currentSelectionMode() {
-        return this._currentSelectionMode;
-    }
-    get latestBoundary() {
-        return this._latestBoundary;
-    }
     config$ = this._config.pipe(filterMaybe(), switchMap((x) => x), distinctUntilChanged(), shareReplay(1));
     limitDateTimeInstance$ = this.config$.pipe(map(limitDateTimeInstance), shareReplay(1));
     selectionMode$ = this._selectionMode.pipe(switchMapMaybeDefault('single'), map((x) => x ?? 'single'), distinctUntilChanged(), shareReplay(1));
@@ -4477,6 +4494,12 @@ class DbxFixedDateRangeFieldComponent extends FieldType$1 {
         }
     }), shareReplay(1));
     defaultPickerFilter = () => true;
+    minDateSignal = toSignal(this.min$, { initialValue: null });
+    maxDateSignal = toSignal(this.max$, { initialValue: null });
+    endDisabledSignal = toSignal(this.endDisabled$);
+    latestBoundarySignal = toSignal(this.latestBoundary$);
+    calendarSelectionSignal = toSignal(this.calendarSelection$, { initialValue: null });
+    pickerFilterSignal = toSignal(this.pickerFilter$, { initialValue: this.defaultPickerFilter });
     ngOnInit() {
         this._formControlObs.next(this.formControl);
         const dateRangeSelection = this.dateRangeSelection$.pipe(shareReplay(1));
@@ -4508,8 +4531,8 @@ class DbxFixedDateRangeFieldComponent extends FieldType$1 {
         if (this.selectionMode) {
             this._selectionMode.next(asObservableFromGetter(this.selectionMode));
         }
-        this._currentSelectionModeSub.subscription = this.selectionMode$.subscribe((x) => (this._currentSelectionMode = x));
-        this._dateRangeInputSub.subscription = this.dateRangeInput$.subscribe((x) => (this._currentDateRangeInput = x));
+        this._currentSelectionModeSub.subscription = this.selectionMode$.subscribe((x) => this.currentSelectionModeSignal.set(x));
+        this._dateRangeInputSub.subscription = this.dateRangeInput$.subscribe((x) => this.currentDateRangeInputSignal.set(x));
         this._inputRangeFormSub.subscription = this.valueInSystemTimezone$.subscribe((x) => {
             setInputFormValue(x);
         });
@@ -4518,25 +4541,27 @@ class DbxFixedDateRangeFieldComponent extends FieldType$1 {
                 .pipe(throttleTime(100), // throttle to prevent the value from changing too fast
             switchMap(() => {
                 return this.inputRangeForm.valueChanges.pipe(debounceTime(500), filter(() => {
-                    const startString = this.startDateInputElement.nativeElement?.value;
+                    const startString = this.startDateInputElement()?.nativeElement?.value;
                     let valid = isMonthDaySlashDate(startString);
-                    if (valid && this._currentSelectionMode !== 'single') {
-                        const endString = this.endDateInputElement.nativeElement?.value;
+                    if (valid && this.currentSelectionModeSignal() !== 'single') {
+                        const endString = this.endDateInputElement()?.nativeElement?.value;
                         valid = isMonthDaySlashDate(endString);
                     }
                     return valid; // must be a valid text input
                 }), map((x) => x));
             }), distinctUntilChanged(isSameDateRange))
                 .subscribe((x) => {
-                if (this._currentSelectionMode === 'single') {
+                const currentSelectionMode = this.currentSelectionModeSignal();
+                if (currentSelectionMode === 'single') {
                     this.setDateRange(x?.start ? { start: x.start } : null, 'input');
                 }
                 else {
                     let rangeToSet = x;
-                    if (this._currentSelectionMode === 'arbitrary_quick' && this._latestBoundary && x?.start && x?.end) {
-                        if (!isDateInDateRange(x.start, this._latestBoundary)) {
+                    const latestBoundary = this.latestBoundarySignal();
+                    if (currentSelectionMode === 'arbitrary_quick' && latestBoundary && x?.start && x?.end) {
+                        if (!isDateInDateRange(x.start, latestBoundary)) {
                             // if the end date it outside of the current range (i.e. a range was typed in only to the start date) then set the end to the boundary end
-                            const boundary = dateRange({ ...this._currentDateRangeInput, date: x.start });
+                            const boundary = dateRange({ ...this.currentDateRangeInputSignal(), date: x.start });
                             rangeToSet = { start: x.start, end: boundary.end };
                         }
                     }
@@ -4544,7 +4569,6 @@ class DbxFixedDateRangeFieldComponent extends FieldType$1 {
                 }
             });
         }
-        this._latestBoundarySub.subscription = this.latestBoundary$.subscribe((x) => (this._latestBoundary = x));
         this._dateRangeInput.next(asObservableFromGetter(this.fixedDateRangeField.dateRangeInput));
         this._disableEndSub.subscription = this.endDisabled$.subscribe((disabled) => {
             const end = this.inputRangeForm.get('end');
@@ -4590,7 +4614,7 @@ class DbxFixedDateRangeFieldComponent extends FieldType$1 {
             this._presets.next(this.dbxDateTimeFieldMenuPresetsService.configurations$);
         }
         this._activeDateSub.subscription = this.calendarFocusDate$.subscribe((x) => {
-            this.calendar.activeDate = x;
+            this.calendar().activeDate = x;
         });
     }
     ngOnDestroy() {
@@ -4618,15 +4642,15 @@ class DbxFixedDateRangeFieldComponent extends FieldType$1 {
         this._selectionEvent.next({ type, range });
     }
     _createDateRange(date) {
-        return date ? dateRange({ ...this._currentDateRangeInput, date }) : undefined;
+        return date ? dateRange({ ...this.currentDateRangeInputSignal(), date }) : undefined;
     }
     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: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: DbxFixedDateRangeFieldComponent, isStandalone: true, 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$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" }] });
+        ], viewQueries: [{ propertyName: "calendar", first: true, predicate: MatCalendar, descendants: true, isSignal: true }, { propertyName: "startDateInputElement", first: true, predicate: ["startDateInput"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "endDateInputElement", first: true, predicate: ["endDateInput"], descendants: true, read: ElementRef, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"dbx-fixeddaterange-field\">\n  <mat-calendar #calendarView [selected]=\"calendarSelectionSignal()\" [dateFilter]=\"pickerFilterSignal()\" [minDate]=\"minDateSignal()\" [maxDate]=\"maxDateSignal()\" (selectedChange)=\"selectedChange($event)\"></mat-calendar>\n  <mat-form-field class=\"dbx-fixeddaterange-field-input\" appearance=\"fill\">\n    @if (showRangeInput) {\n      <mat-date-range-input [formGroup]=\"inputRangeForm\">\n        <input #startDateInput matStartDate formControlName=\"start\" placeholder=\"Start date\" />\n        <input #endDateInput [ngClass]=\"endDisabledSignal() ? 'dbx-fixeddaterange-field-input-end' : ''\" [attr.tabindex]=\"endDisabledSignal() ? -1 : 0\" matEndDate formControlName=\"end\" placeholder=\"End date\" />\n      </mat-date-range-input>\n    }\n  </mat-form-field>\n  @if (formControl.hasError('required')) {\n    <mat-error>Date range is required</mat-error>\n  }\n</div>\n", dependencies: [{ kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i1$7.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: i1$7.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { kind: "directive", type: i1$7.MatStartDate, selector: "input[matStartDate]", outputs: ["dateChange", "dateInput"] }, { kind: "directive", type: i1$7.MatEndDate, selector: "input[matEndDate]", outputs: ["dateChange", "dateInput"] }, { kind: "ngmodule", type: MatFormFieldModule }, { 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: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxFixedDateRangeFieldComponent, decorators: [{
             type: Component,
@@ -4635,17 +4659,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                             provide: MAT_DATE_RANGE_SELECTION_STRATEGY,
                             useClass: forwardRef(() => DbxFixedDateRangeFieldSelectionStrategy)
                         }
-                    ], template: "<div class=\"dbx-fixeddaterange-field\">\n  <mat-calendar #calendarView [selected]=\"calendarSelection$ | async\" [dateFilter]=\"(pickerFilter$ | async) || defaultPickerFilter\" [minDate]=\"min$ | async\" [maxDate]=\"max$ | async\" (selectedChange)=\"selectedChange($event)\"></mat-calendar>\n  <mat-form-field class=\"dbx-fixeddaterange-field-input\" appearance=\"fill\">\n    <mat-date-range-input *ngIf=\"showRangeInput\" [formGroup]=\"inputRangeForm\">\n      <input #startDateInput matStartDate formControlName=\"start\" placeholder=\"Start date\" />\n      <input #endDateInput [ngClass]=\"(endDisabled$ | async) ? 'dbx-fixeddaterange-field-input-end' : ''\" [attr.tabindex]=\"(endDisabled$ | async) ? -1 : 0\" matEndDate formControlName=\"end\" placeholder=\"End date\" />\n    </mat-date-range-input>\n  </mat-form-field>\n  <mat-error *ngIf=\"formControl.hasError('required')\">Date range is required</mat-error>\n</div>\n" }]
-        }], propDecorators: { calendar: [{
-                type: ViewChild,
-                args: [MatCalendar]
-            }], startDateInputElement: [{
-                type: ViewChild,
-                args: ['startDateInput', { read: ElementRef }]
-            }], endDateInputElement: [{
-                type: ViewChild,
-                args: ['endDateInput', { read: ElementRef }]
-            }] } });
+                    ], imports: [MatDatepickerModule, MatFormFieldModule, FormsModule, ReactiveFormsModule, MatInputModule, MatError, NgClass], changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "<div class=\"dbx-fixeddaterange-field\">\n  <mat-calendar #calendarView [selected]=\"calendarSelectionSignal()\" [dateFilter]=\"pickerFilterSignal()\" [minDate]=\"minDateSignal()\" [maxDate]=\"maxDateSignal()\" (selectedChange)=\"selectedChange($event)\"></mat-calendar>\n  <mat-form-field class=\"dbx-fixeddaterange-field-input\" appearance=\"fill\">\n    @if (showRangeInput) {\n      <mat-date-range-input [formGroup]=\"inputRangeForm\">\n        <input #startDateInput matStartDate formControlName=\"start\" placeholder=\"Start date\" />\n        <input #endDateInput [ngClass]=\"endDisabledSignal() ? 'dbx-fixeddaterange-field-input-end' : ''\" [attr.tabindex]=\"endDisabledSignal() ? -1 : 0\" matEndDate formControlName=\"end\" placeholder=\"End date\" />\n      </mat-date-range-input>\n    }\n  </mat-form-field>\n  @if (formControl.hasError('required')) {\n    <mat-error>Date range is required</mat-error>\n  }\n</div>\n" }]
+        }] });
 class DbxFixedDateRangeFieldSelectionStrategy {
     _dateAdapter = inject((DateAdapter));
     dbxFixedDateRangeFieldComponent = inject(DbxFixedDateRangeFieldComponent);
@@ -4654,9 +4669,10 @@ class DbxFixedDateRangeFieldSelectionStrategy {
         return currentRange;
     }
     createPreview(activeDate, currentRange, event) {
-        const { currentSelectionMode } = this.dbxFixedDateRangeFieldComponent;
+        const { currentSelectionModeSignal, latestBoundarySignal } = this.dbxFixedDateRangeFieldComponent;
+        const currentSelectionMode = currentSelectionModeSignal();
         if (activeDate != null && currentSelectionMode !== 'single') {
-            const latestBoundary = this.dbxFixedDateRangeFieldComponent.latestBoundary;
+            const latestBoundary = latestBoundarySignal();
             const date = this.dateFromAdapterDate(activeDate);
             if (latestBoundary && (currentSelectionMode === 'normal' || isDateInDateRange(date, latestBoundary))) {
                 const exampleDateRange = this._createDateRange(latestBoundary);
@@ -4700,39 +4716,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
             type: Injectable
         }] });
 
+const importsAndExports$7 = [DbxDateTimeFieldComponent, DbxFixedDateRangeFieldComponent, DbxFormFormlyWrapperModule];
 class DbxFormFormlyDateFieldModule {
     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,
-            MatFormFieldModule,
-            DbxButtonModule,
-            MatButtonModule,
-            MatDatepickerModule,
-            MatMenuModule,
-            ReactiveFormsModule,
-            DbxDatePipeModule,
-            DbxValuePipeModule,
-            MatChipsModule,
-            MatIconModule,
-            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,
-            MatFormFieldModule,
-            DbxButtonModule,
-            MatButtonModule,
-            MatDatepickerModule,
-            MatMenuModule,
-            ReactiveFormsModule,
-            DbxDatePipeModule,
-            DbxValuePipeModule,
-            MatChipsModule,
-            MatIconModule,
-            FlexLayoutModule,
-            FormlyModule.forChild({
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: DbxFormFormlyDateFieldModule, imports: [DbxDateTimeFieldComponent, DbxFixedDateRangeFieldComponent, DbxFormFormlyWrapperModule, i1$3.FormlyModule], exports: [DbxDateTimeFieldComponent, DbxFixedDateRangeFieldComponent, DbxFormFormlyWrapperModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxFormFormlyDateFieldModule, imports: [importsAndExports$7, FormlyModule.forChild({
                 types: [
                     //
                     { name: 'datetime', component: DbxDateTimeFieldComponent, wrappers: ['style', 'form-field'] },
@@ -4744,21 +4732,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
             type: NgModule,
             args: [{
                     imports: [
-                        CommonModule,
-                        FormsModule,
-                        MatInputModule,
-                        MatDividerModule,
-                        MatFormFieldModule,
-                        DbxButtonModule,
-                        MatButtonModule,
-                        MatDatepickerModule,
-                        MatMenuModule,
-                        ReactiveFormsModule,
-                        DbxDatePipeModule,
-                        DbxValuePipeModule,
-                        MatChipsModule,
-                        MatIconModule,
-                        FlexLayoutModule,
+                        ...importsAndExports$7,
                         FormlyModule.forChild({
                             types: [
                                 //
@@ -4767,8 +4741,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                             ]
                         })
                     ],
-                    declarations: [DbxDateTimeFieldComponent, DbxFixedDateRangeFieldComponent],
-                    exports: [DbxFormFormlyWrapperModule]
+                    exports: importsAndExports$7
                 }]
         }] });
 
@@ -4836,6 +4809,17 @@ function flexLayoutWrapper(fieldConfigs, { relative, breakpoint, breakToColumn,
         })
     };
 }
+// TODO: Add addon wrapper/extension from this demo:
+// https://formly.dev/docs/examples/other/material-prefix-suffix
+/*
+export interface NumberFieldAddon {
+  readonly text?: Maybe<string>;
+  readonly icon?: Maybe<string>;
+}
+  
+readonly addonLeft?: Maybe<NumberFieldAddon>;
+readonly addonRight?: Maybe<NumberFieldAddon>;
+*/
 
 const TAKE_NEXT_UPCOMING_TIME_CONFIG_OBS = () => of({
     takeNextUpcomingTime: true,
@@ -5246,7 +5230,7 @@ function numberSliderField(config) {
             validators.push(isDivisibleBy(step));
         }
     }
-    const tickInterval = inputTickInterval === false ? undefined : inputTickInterval ?? tickIntervalFromSteps ?? undefined;
+    const tickInterval = inputTickInterval === false ? undefined : (inputTickInterval ?? tickIntervalFromSteps ?? undefined);
     return formlyField({
         key,
         type: 'slider',
@@ -5269,20 +5253,20 @@ function numberSliderField(config) {
     });
 }
 function dollarAmountField(config) {
-    return numberField({ ...config, transform: { ...config.transform, precision: config.transform?.precision ?? DOLLAR_AMOUNT_PRECISION } });
+    return numberField({ ...config, transform: { ...config.transform, precision: config.transform?.precision ?? DOLLAR_AMOUNT_PRECISION } }); // TODO: Add wrapper addon, addonLeft: { text: '$' }
 }
 
+const importsAndExports$6 = [FormlyMaterialModule, FormlyMatSliderModule];
 class DbxFormFormlyNumberFieldModule {
     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] });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: DbxFormFormlyNumberFieldModule, imports: [FormlyMaterialModule, FormlyMatSliderModule], exports: [FormlyMaterialModule, FormlyMatSliderModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxFormFormlyNumberFieldModule, imports: [importsAndExports$6, FormlyMaterialModule, FormlyMatSliderModule] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxFormFormlyNumberFieldModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [FormlyMaterialModule, FormlyMatSliderModule],
-                    declarations: [],
-                    exports: [DbxFormFormlyWrapperModule]
+                    imports: importsAndExports$6,
+                    exports: importsAndExports$6
                 }]
         }] });
 
@@ -5363,63 +5347,35 @@ class DbxPhoneFieldComponent extends FieldType$1 {
         super.ngOnDestroy();
         this.inputSync.destroy();
         this.outputSync.destroy();
+        this.extensionErrorSync.destroy();
+        this.phoneErrorSync.destroy();
     }
     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"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: DbxPhoneFieldComponent, isStandalone: true, 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  @if (allowExtension) {\n    <div 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  }\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: FlexLayoutModule }, { kind: "ngmodule", type: FormlyMatFormFieldModule }, { kind: "component", type: NgxMatIntlTelInputComponent, selector: "ngx-mat-intl-tel-input", inputs: ["preferredCountries", "enablePlaceholder", "inputPlaceholder", "cssClass", "name", "onlyCountries", "errorStateMatcher", "enableSearch", "searchPlaceholder", "describedBy", "format", "placeholder", "required", "disabled"], outputs: ["countryChanged"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 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" }]
+            args: [{ imports: [CommonModule, MatInputModule, MatFormFieldModule, FormsModule, ReactiveFormsModule, MatIconModule, FlexLayoutModule, FormlyMatFormFieldModule, NgxMatIntlTelInputComponent], changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, 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  @if (allowExtension) {\n    <div 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  }\n</div>\n" }]
         }] });
 
+const importsAndExports$5 = [DbxPhoneFieldComponent];
 class DbxFormFormlyPhoneFieldModule {
     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,
-            ReactiveFormsModule,
-            MatAutocompleteModule,
-            MatChipsModule,
-            MatIconModule,
-            FlexLayoutModule,
-            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,
-            ReactiveFormsModule,
-            MatAutocompleteModule,
-            MatChipsModule,
-            MatIconModule,
-            FlexLayoutModule,
-            FormlyMatFormFieldModule,
-            FormlyModule.forChild({
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: DbxFormFormlyPhoneFieldModule, imports: [DbxPhoneFieldComponent, i1$3.FormlyModule], exports: [DbxPhoneFieldComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxFormFormlyPhoneFieldModule, imports: [importsAndExports$5, FormlyModule.forChild({
                 types: [{ name: 'intphone', component: DbxPhoneFieldComponent, wrappers: ['form-field'] }]
-            }),
-            NgxMatIntlTelInputComponent] });
+            })] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxFormFormlyPhoneFieldModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
-                        CommonModule,
-                        MatInputModule,
-                        MatFormFieldModule,
-                        FormsModule,
-                        ReactiveFormsModule,
-                        MatAutocompleteModule,
-                        MatChipsModule,
-                        MatIconModule,
-                        FlexLayoutModule,
-                        FormlyMatFormFieldModule,
+                        ...importsAndExports$5,
                         FormlyModule.forChild({
                             types: [{ name: 'intphone', component: DbxPhoneFieldComponent, wrappers: ['form-field'] }]
-                        }),
-                        NgxMatIntlTelInputComponent
+                        })
                     ],
-                    declarations: [DbxPhoneFieldComponent],
-                    exports: []
+                    exports: importsAndExports$5
                 }]
         }] });
 
@@ -5532,6 +5488,7 @@ function phoneListField(repeatConfig = {}) {
 const PHONE_LABEL_MAX_LENGTH = 100;
 const LABEL_STRING_MAX_LENGTH = 100;
 const SEARCH_STRING_MAX_LENGTH = 100;
+// MARK: Name Field
 function nameField(config = {}) {
     const { key = 'name', label = 'Name', placeholder = 'John Doe', required = false, minLength, maxLength, attributes } = config;
     return textField({
@@ -5616,6 +5573,7 @@ function zipCodeField(config = {}) {
         maxLength
     });
 }
+// MARK: LatLng Text Field
 const DEFAULT_LAT_LNG_TEXT_FIELD_PLACEHOLDER = '12.345,-67.8910';
 const DEFAULT_LAT_LNG_TEXT_FIELD_PATTERN_MESSAGE = `Invalid/unknown coordinates`;
 function latLngTextField({ key = 'latLng' } = {}) {
@@ -5704,17 +5662,17 @@ function addressListField(config = {}) {
     });
 }
 
+const importsAndExports$4 = [DbxFormFormlyArrayFieldModule, FormlyMaterialModule, FormlyMatInputModule, DbxFormFormlyWrapperModule];
 class DbxFormFormlyTextFieldModule {
     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] });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: DbxFormFormlyTextFieldModule, imports: [DbxFormFormlyArrayFieldModule, FormlyMaterialModule, FormlyMatInputModule, DbxFormFormlyWrapperModule], exports: [DbxFormFormlyArrayFieldModule, FormlyMaterialModule, FormlyMatInputModule, DbxFormFormlyWrapperModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxFormFormlyTextFieldModule, imports: [importsAndExports$4, DbxFormFormlyArrayFieldModule, FormlyMaterialModule, FormlyMatInputModule, DbxFormFormlyWrapperModule] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxFormFormlyTextFieldModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [FormlyMaterialModule],
-                    declarations: [],
-                    exports: [DbxFormFormlyWrapperModule]
+                    imports: importsAndExports$4,
+                    exports: importsAndExports$4
                 }]
         }] });
 
@@ -5725,31 +5683,40 @@ function hiddenField({ key, required = false }) {
     });
 }
 
+const importsAndExports$3 = [DbxFormFormlyArrayFieldModule, DbxFormFormlyDateFieldModule, DbxFormFormlyPhoneFieldModule, DbxFormFormlyNumberFieldModule, DbxFormFormlyTextFieldModule];
+/**
+ * @deprecated import the modules directly
+ *
+ * @see DbxFormFormlyArrayFieldModule
+ * @see DbxFormFormlyDateFieldModule
+ * @see DbxFormFormlyPhoneFieldModule
+ * @see DbxFormFormlyNumberFieldModule
+ * @see DbxFormFormlyTextFieldModule
+ */
 class DbxFormFormlyValueModule {
     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] });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: DbxFormFormlyValueModule, imports: [DbxFormFormlyArrayFieldModule, DbxFormFormlyDateFieldModule, DbxFormFormlyPhoneFieldModule, DbxFormFormlyNumberFieldModule, DbxFormFormlyTextFieldModule], exports: [DbxFormFormlyArrayFieldModule, DbxFormFormlyDateFieldModule, DbxFormFormlyPhoneFieldModule, DbxFormFormlyNumberFieldModule, DbxFormFormlyTextFieldModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxFormFormlyValueModule, imports: [importsAndExports$3, DbxFormFormlyArrayFieldModule, DbxFormFormlyDateFieldModule, DbxFormFormlyPhoneFieldModule, DbxFormFormlyNumberFieldModule, DbxFormFormlyTextFieldModule] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxFormFormlyValueModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [CommonModule],
-                    declarations: [],
-                    exports: [DbxFormFormlyArrayFieldModule, DbxFormFormlyBooleanFieldModule, DbxFormFormlyDateFieldModule, DbxFormFormlyPhoneFieldModule, DbxFormFormlyNumberFieldModule, DbxFormFormlyTextFieldModule]
+                    imports: importsAndExports$3,
+                    exports: importsAndExports$3
                 }]
         }] });
 
+const importsAndExports$2 = [DbxFormFormlyChecklistItemFieldModule, DbxFormFormlyComponentFieldModule, DbxFormFormlySelectionModule, DbxFormFormlyTextEditorFieldModule, DbxFormFormlyValueModule, DbxFormFormlyWrapperModule];
 class DbxFormFormlyFieldModule {
     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] });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: DbxFormFormlyFieldModule, imports: [DbxFormFormlyChecklistItemFieldModule, DbxFormFormlyComponentFieldModule, DbxFormFormlySelectionModule, DbxFormFormlyTextEditorFieldModule, DbxFormFormlyValueModule, DbxFormFormlyWrapperModule], exports: [DbxFormFormlyChecklistItemFieldModule, DbxFormFormlyComponentFieldModule, DbxFormFormlySelectionModule, DbxFormFormlyTextEditorFieldModule, DbxFormFormlyValueModule, DbxFormFormlyWrapperModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxFormFormlyFieldModule, imports: [importsAndExports$2, DbxFormFormlyChecklistItemFieldModule, DbxFormFormlyComponentFieldModule, DbxFormFormlySelectionModule, DbxFormFormlyTextEditorFieldModule, DbxFormFormlyValueModule, DbxFormFormlyWrapperModule] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxFormFormlyFieldModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [CommonModule],
-                    declarations: [],
-                    exports: [DbxFormFormlyChecklistItemFieldModule, DbxFormFormlyComponentFieldModule, DbxFormFormlySelectionModule, DbxFormFormlyTextEditorFieldModule, DbxFormFormlyValueModule, DbxFormFormlyWrapperModule]
+                    imports: importsAndExports$2,
+                    exports: importsAndExports$2
                 }]
         }] });
 
@@ -6102,7 +6069,7 @@ class DbxFormlyComponent extends AbstractSubscriptionDirective {
     <form [formGroup]="form" class="dbx-formly">
       <formly-form [form]="form" [options]="options" [fields]="fieldsSignal()" [model]="modelSignal()"></formly-form>
     </form>
-  `, 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 });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormlyModule }, { kind: "component", type: i1$3.FormlyForm, selector: "formly-form", inputs: ["form", "model", "fields", "options"], outputs: ["modelChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxFormlyComponent, decorators: [{
             type: Component,
@@ -6124,108 +6091,72 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 }]
         }] });
 
+/**
+ * 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
+                }]
+        }] });
+
 class DbxFormSearchFormComponent extends AbstractConfigAsyncFormlyFormDirective {
-    search = new EventEmitter();
+    search = output();
     fields$ = this.currentConfig$.pipe(map(dbxFormSearchFormFields));
     searchChanged(value) {
-        this.search.next(value.search ?? '');
-    }
-    ngOnDestroy() {
-        super.ngOnDestroy();
-        this.search.complete();
+        this.search.emit(value.search ?? '');
     }
     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: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: DbxFormSearchFormComponent, isStandalone: true, selector: "dbx-form-search-form", outputs: { search: "search" }, host: { classAttribute: "d-block dbx-form-search-form" }, providers: dbxFormlyFormComponentProviders(), 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: DbxFormlyComponent, selector: "dbx-formly", exportAs: ["formly"] }] });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: DbxFormlyFormComponentImportsModule }, { kind: "component", type: DbxFormlyComponent, selector: "dbx-formly", exportAs: ["formly"] }, { kind: "directive", type: DbxFormValueChangeDirective, selector: "[dbxFormValueChange]", outputs: ["dbxFormValueChange"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxFormSearchFormComponent, decorators: [{
             type: Component,
             args: [{
+                    selector: 'dbx-form-search-form',
                     template: `
     <dbx-formly (dbxFormValueChange)="searchChanged($event)"></dbx-formly>
   `,
-                    selector: 'dbx-form-search-form',
-                    providers: [provideFormlyContext()],
+                    providers: dbxFormlyFormComponentProviders(),
+                    imports: [DbxFormlyFormComponentImportsModule, DbxFormValueChangeDirective],
+                    standalone: true,
                     host: {
                         class: 'd-block dbx-form-search-form'
                     }
                 }]
-        }], propDecorators: { search: [{
-                type: Output
-            }] } });
+        }] });
 
+const importsAndExports$1 = [DbxFormSearchFormComponent];
 /**
- * Provides an DbxFormlyContext and has an input for fields.
+ * @deprecated import DbxFormSearchFormComponent directly instead.
  */
-class DbxFormlyFieldsContextDirective extends AbstractAsyncFormlyFormDirective {
-    _fields = new BehaviorSubject(undefined);
-    fields$ = this._fields.asObservable();
-    get fields() {
-        return this._fields.value;
-    }
-    set fields(fields) {
-        this._fields.next(fields);
-    }
-    ngOnDestroy() {
-        super.ngOnDestroy();
-        this._fields.complete();
-    }
-    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: "18.2.13", ngImport: i0, type: DbxFormlyFieldsContextDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[dbxFormlyFields]',
-                    providers: provideFormlyContext(),
-                    standalone: true
-                }]
-        }], propDecorators: { fields: [{
-                type: Input,
-                args: ['dbxFormlyFields']
-            }] } });
-
-class DbxFormlyModule {
-    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
-            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: "18.2.13", ngImport: i0, type: DbxFormlyModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [DbxFormlyComponent, DbxFormlyFieldsContextDirective, CommonModule, FormsModule, ReactiveFormsModule, FormlyModule, FormlyMatToggleModule],
-                    exports: [
-                        // Modules (?)
-                        FormsModule,
-                        ReactiveFormsModule,
-                        // Directives
-                        DbxFormlyComponent,
-                        DbxFormlyFieldsContextDirective
-                    ]
-                }]
-        }] });
-
 class DbxFormFormlyFormModule {
     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] });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: DbxFormFormlyFormModule, imports: [DbxFormSearchFormComponent], exports: [DbxFormSearchFormComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxFormFormlyFormModule, imports: [importsAndExports$1] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxFormFormlyFormModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [CommonModule, DbxFormModule, DbxFormlyModule, DbxFormFormlyFieldModule],
-                    declarations: [DbxFormSearchFormComponent],
-                    exports: [DbxFormSearchFormComponent]
+                    imports: importsAndExports$1,
+                    exports: importsAndExports$1
                 }]
         }] });
 
@@ -6371,60 +6302,84 @@ 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.
+ * Provides an DbxFormlyContext and has an input for fields.
  */
-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] });
+class DbxFormlyFieldsContextDirective extends AbstractAsyncFormlyFormDirective {
+    fields = input(undefined, { alias: 'dbxFormlyFields' });
+    fields$ = toObservable(this.fields);
+    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: "17.1.0", version: "18.2.13", type: DbxFormlyFieldsContextDirective, isStandalone: true, selector: "[dbxFormlyFields]", inputs: { fields: { classPropertyName: "fields", publicName: "dbxFormlyFields", isSignal: true, isRequired: false, transformFunction: null } }, providers: provideFormlyContext(), usesInheritance: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxFormlyFormComponentImportsModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxFormlyFieldsContextDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[dbxFormlyFields]',
+                    providers: provideFormlyContext(),
+                    standalone: true
+                }]
+        }] });
+
+class DbxFormlyModule {
+    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
+            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: "18.2.13", ngImport: i0, type: DbxFormlyModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: dbxFormlyFormComponentImports,
-                    exports: dbxFormlyFormComponentImports
+                    imports: [DbxFormlyComponent, DbxFormlyFieldsContextDirective, CommonModule, FormsModule, ReactiveFormsModule, FormlyModule, FormlyMatToggleModule],
+                    exports: [
+                        // Modules (?)
+                        FormsModule,
+                        ReactiveFormsModule,
+                        // Directives
+                        DbxFormlyComponent,
+                        DbxFormlyFieldsContextDirective
+                    ]
                 }]
         }] });
 
 /**
  * Provides vertical spacing after a form.
  */
-class DbxFormSpacerComponent {
-    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 });
+class DbxFormSpacerDirective {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxFormSpacerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: DbxFormSpacerDirective, isStandalone: true, selector: "dbx-form-spacer,[dbxFormSpacer],.dbx-form-spacer", host: { classAttribute: "d-block dbx-form-spacer" }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxFormSpacerComponent, decorators: [{
-            type: Component,
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxFormSpacerDirective, decorators: [{
+            type: Directive,
             args: [{
-                    selector: 'dbx-form-spacer',
-                    template: `
-    <div class="dbx-form-spacer"></div>
-  `
+                    selector: 'dbx-form-spacer,[dbxFormSpacer],.dbx-form-spacer',
+                    host: {
+                        class: 'd-block dbx-form-spacer'
+                    },
+                    standalone: true
                 }]
         }] });
 
+const importsAndExports = [DbxFormSpacerDirective];
+/**
+ * @deprecated import DbxFormSpacerDirective directly instead.
+ */
 class DbxFormLayoutModule {
     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] });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: DbxFormLayoutModule, imports: [DbxFormSpacerDirective], exports: [DbxFormSpacerDirective] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxFormLayoutModule });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxFormLayoutModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [CommonModule],
-                    declarations: [DbxFormSpacerComponent],
-                    exports: [DbxFormSpacerComponent]
+                    imports: importsAndExports,
+                    exports: importsAndExports
                 }]
         }] });
 
@@ -6470,5 +6425,5 @@ function provideDbxFormConfiguration(config) {
  * 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_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 };
+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, DbxFixedDateRangeFieldComponent, DbxFixedDateRangeFieldSelectionStrategy, 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, DbxFormSpacerDirective, DbxFormState, DbxFormStyleWrapperComponent, DbxFormSubsectionWrapperComponent, DbxFormToggleWrapperComponent, DbxFormValueChangeDirective, 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