@dereekb/dbx-form 13.10.0 → 13.10.1

package/fesm2022/dereekb-dbx-form.mjs

@@ -8,7 +8,7 @@ import * as i1$2 from '@dereekb/dbx-core';
 import { DbxActionContextStoreSourceInstance, cleanLockSet, cleanWithLockSet, cleanSubscription, GetValuePipe, DateDistancePipe, TimeDistancePipe, DbxInjectionComponent, mergeDbxInjectionComponentConfigs } from '@dereekb/dbx-core';
 import { makeIsModifiedFunctionObservable, SubscriptionObject, asObservable, LockSet, filterMaybe, switchMapFilterMaybe, scanCount, errorOnEmissionsInPeriod, asObservableFromGetter, maybeValueFromObservableOrValue, valueFromFinishedLoadingState, switchMapMaybeDefault, skipAllInitialMaybe, successResult, startWithBeginLoading, skipUntilTimeElapsedAfterLastEmission, mapLoadingStateResults, isLoadingStateWithDefinedValue, isLoadingStateLoading, beginLoading, mapLoadingStateValueWithOperator, loadingStateContext, distinctUntilHasDifferentValues, SimpleLoadingContext, listLoadingStateContext, mapIsListLoadingStateWithEmptyValue, isLoadingStateInLoadingState, asyncPusherCache } from '@dereekb/rxjs';
 import { toObservable, toSignal, rxResource } from '@angular/core/rxjs-interop';
-import { BooleanStringKeyArrayUtility, iterablesAreSetEquivalent, filterUndefinedValues, filterMaybeArrayValues, filterUniqueValues, areEqualPOJOValuesUsingPojoFilter, NOOP_MODIFIER, asArray, mergeArrays, filterNullAndUndefinedValues, objectHasNoKeys, mapMaybeFunction, isWebsiteUrlWithPrefix, websiteUrlDetails, transformStringFunction, US_STATE_CODE_STRING_REGEX, ZIP_CODE_STRING_REGEX, LAT_LNG_PATTERN, transformNumberFunction, DOLLAR_AMOUNT_PRECISION, getValueFromGetter, asGetter, dateFromMinuteOfDay, dateToMinuteOfDay, isISO8601DayStringStart, mapIdentityFunction, MS_IN_MINUTE, isMonthDaySlashDate, filterFromPOJO, TIME_UNIT_SHORT_LABEL_MAP, timeUnitToMilliseconds, ALL_TIME_UNITS, minutesToHoursAndMinutes, millisecondsToTimeUnit, hoursAndMinutesToTimeUnit, isE164PhoneNumber as isE164PhoneNumber$1, isValidPhoneExtensionNumber, e164PhoneNumberExtensionPair, e164PhoneNumberFromE164PhoneNumberExtensionPair, mergeArraysIntoArray, convertMaybeToArray, lastValue, filterEmptyArrayValues, setContainsAllValues, addToSetCopy, setsAreEquivalent, makeValuesGroupMap, sortByStringFunction, separateValues, isSelectedDecisionFunctionFactory, readKeysFrom, hasDifferentValues, capitalizeFirstLetter, objectIsEmpty, mergeObjectsFunction, filterFromPOJOFunction, mergeObjects, addPlusPrefixToNumber, searchStringFilterFunction, caseInsensitiveFilterByIndexOfDecisionFactory, arrayToMap, firstValue, cachedGetter, makeGetter, asDecisionFunction, TIME_UNIT_LABEL_MAP, HAS_WEBSITE_DOMAIN_NAME_REGEX, KeyValueTypleValueFilter, valuesFromPOJO, allObjectsAreEqual, isNumberDivisibleBy, nearestDivisibleValues, concatArrays } from '@dereekb/util';
+import { BooleanStringKeyArrayUtility, iterablesAreSetEquivalent, filterUndefinedValues, filterMaybeArrayValues, filterUniqueValues, areEqualPOJOValuesUsingPojoFilter, NOOP_MODIFIER, asArray, mergeArrays, filterNullAndUndefinedValues, objectHasNoKeys, mapMaybeFunction, isWebsiteUrlWithPrefix, websiteUrlDetails, transformStringFunction, US_STATE_CODE_STRING_REGEX, ZIP_CODE_STRING_REGEX, LAT_LNG_PATTERN, transformNumberFunction, DOLLAR_AMOUNT_PRECISION, stripObject, getValueFromGetter, asGetter, dateFromMinuteOfDay, dateToMinuteOfDay, isISO8601DayStringStart, mapIdentityFunction, isDate, MS_IN_MINUTE, isMonthDaySlashDate, filterFromPOJO, TIME_UNIT_SHORT_LABEL_MAP, timeUnitToMilliseconds, ALL_TIME_UNITS, minutesToHoursAndMinutes, millisecondsToTimeUnit, hoursAndMinutesToTimeUnit, isE164PhoneNumber as isE164PhoneNumber$1, isValidPhoneExtensionNumber, e164PhoneNumberExtensionPair, e164PhoneNumberFromE164PhoneNumberExtensionPair, mergeArraysIntoArray, convertMaybeToArray, lastValue, filterEmptyArrayValues, setContainsAllValues, addToSetCopy, setsAreEquivalent, makeValuesGroupMap, sortByStringFunction, separateValues, isSelectedDecisionFunctionFactory, readKeysFrom, hasDifferentValues, capitalizeFirstLetter, objectIsEmpty, mergeObjectsFunction, filterFromPOJOFunction, mergeObjects, addPlusPrefixToNumber, searchStringFilterFunction, caseInsensitiveFilterByIndexOfDecisionFactory, arrayToMap, firstValue, cachedGetter, makeGetter, asDecisionFunction, TIME_UNIT_LABEL_MAP, HAS_WEBSITE_DOMAIN_NAME_REGEX, KeyValueTypleValueFilter, valuesFromPOJO, allObjectsAreEqual, isNumberDivisibleBy, nearestDivisibleValues, concatArrays } from '@dereekb/util';
 import * as i1 from '@angular/forms';
 import { FormGroup, FormsModule, ReactiveFormsModule, FormControl, Validators } from '@angular/forms';
 import * as i1$1 from '@ngx-formly/core';
@@ -94,6 +94,17 @@ const DEFAULT_FORM_DISABLED_KEY = 'dbx_form_disabled';
  * Form that has an event stream, value, and state items.
  */
 class DbxForm {
+    /**
+     * Returns an observable that emits the form's current value, regardless of validity gates.
+     *
+     * Used by infrastructure (e.g. {@link DbxActionFormDirective}) that needs the underlying
+     * value to feed user-supplied isValid/isModified functions even while the form is invalid.
+     * Defaults to {@link getValue}; implementations that gate {@link getValue} on validity
+     * should override this to bypass that gate.
+     */
+    currentValue() {
+        return this.getValue();
+    }
 }
 /**
  * Mutable extension of {@link DbxForm} that supports setting values, resetting, and disabling the form.
@@ -241,23 +252,21 @@ class DbxActionFormDirective {
         // Update the enabled/disabled state
         this._isCompleteSub.subscription = this.form.stream$
             .pipe(delay(0), filter((x) => x.state !== DbxFormState.INITIALIZING), switchMap((event) => {
-            return this.form.getValue().pipe(first(), exhaustMap((value) => {
-                // Use both changes count and whether or not something was in the past to guage whether or not the item has been touched.
-                // Angular Form's untouched is whether or not focus has been lost but we can still receive value updates.
-                // More than a certain amount of updates implies that it is being typed into/used.
-                // 3 changes and 2 seconds are arbitrary values derived from guesses about any slow/late changes that may come from external directives for setup.
-                const isProbablyTouched = !event.untouched || ((event.changesCount ?? 0) > 3 && isPast(addSeconds(event.lastResetAt ?? new Date(), 2)));
-                // create overrides
+            // Use both changes count and whether or not something was in the past to guage whether or not the item has been touched.
+            // Angular Form's untouched is whether or not focus has been lost but we can still receive value updates.
+            // More than a certain amount of updates implies that it is being typed into/used.
+            // 3 changes and 2 seconds are arbitrary values derived from guesses about any slow/late changes that may come from external directives for setup.
+            const isProbablyTouched = !event.untouched || ((event.changesCount ?? 0) > 3 && isPast(addSeconds(event.lastResetAt ?? new Date(), 2)));
+            const runIsValidCheck = event.isComplete;
+            const isConsideredModified = event.pristine === false && isProbablyTouched;
+            return this.form.currentValue().pipe(first(), exhaustMap((value) => {
                 const returnFalseFunction = () => of(false);
-                const runIsValidCheck = event.isComplete;
                 const isValidFunction = runIsValidCheck ? undefined : returnFalseFunction;
-                const isConsideredModified = event.pristine === false && isProbablyTouched;
                 const isModifiedFunction = isConsideredModified ? undefined : returnFalseFunction;
-                return this.checkIsValidAndIsModified(value, { isValidFunction, isModifiedFunction }).pipe(map(([valid, modified]) => ({ valid, modified, value, event })), first());
+                return this.checkIsValidAndIsModified(value, { isValidFunction, isModifiedFunction }).pipe(map(([valid, modified]) => ({ valid, modified })), first());
             }));
         }))
-            .subscribe(({ valid, modified /*, value, event */ }) => {
-            // console.log('x: ', value, event, valid, modified);
+            .subscribe(({ valid, modified }) => {
             // Update Modified State
             this.source.setIsModified(modified);
             // Disable if the form is not yet complete/valid.
@@ -308,10 +317,10 @@ class DbxActionFormDirective {
             return of({ value: value });
         }));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxActionFormDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.4", type: DbxActionFormDirective, isStandalone: true, selector: "[dbxActionForm]", inputs: { dbxActionFormDisabledOnWorking: { classPropertyName: "dbxActionFormDisabledOnWorking", publicName: "dbxActionFormDisabledOnWorking", isSignal: true, isRequired: false, transformFunction: null }, dbxActionFormIsValid: { classPropertyName: "dbxActionFormIsValid", publicName: "dbxActionFormIsValid", isSignal: true, isRequired: false, transformFunction: null }, dbxActionFormIsEqual: { classPropertyName: "dbxActionFormIsEqual", publicName: "dbxActionFormIsEqual", isSignal: true, isRequired: false, transformFunction: null }, dbxActionFormIsModified: { classPropertyName: "dbxActionFormIsModified", publicName: "dbxActionFormIsModified", isSignal: true, isRequired: false, transformFunction: null }, dbxActionFormMapValue: { classPropertyName: "dbxActionFormMapValue", publicName: "dbxActionFormMapValue", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxActionFormDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.10", type: DbxActionFormDirective, isStandalone: true, selector: "[dbxActionForm]", inputs: { dbxActionFormDisabledOnWorking: { classPropertyName: "dbxActionFormDisabledOnWorking", publicName: "dbxActionFormDisabledOnWorking", isSignal: true, isRequired: false, transformFunction: null }, dbxActionFormIsValid: { classPropertyName: "dbxActionFormIsValid", publicName: "dbxActionFormIsValid", isSignal: true, isRequired: false, transformFunction: null }, dbxActionFormIsEqual: { classPropertyName: "dbxActionFormIsEqual", publicName: "dbxActionFormIsEqual", isSignal: true, isRequired: false, transformFunction: null }, dbxActionFormIsModified: { classPropertyName: "dbxActionFormIsModified", publicName: "dbxActionFormIsModified", isSignal: true, isRequired: false, transformFunction: null }, dbxActionFormMapValue: { classPropertyName: "dbxActionFormMapValue", publicName: "dbxActionFormMapValue", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxActionFormDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxActionFormDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[dbxActionForm]',
@@ -344,10 +353,10 @@ class DbxActionFormSafetyDirective extends DbxActionTransitionSafetyDirective {
         this.dbxActionForm.form.forceFormUpdate();
         return super._handleOnBeforeTransition(transition);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxActionFormSafetyDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.4", type: DbxActionFormSafetyDirective, isStandalone: true, selector: "[dbxActionFormSafety]", inputs: { dbxActionFormSafety: { classPropertyName: "dbxActionFormSafety", publicName: "dbxActionFormSafety", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxActionFormSafetyDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.10", type: DbxActionFormSafetyDirective, isStandalone: true, selector: "[dbxActionFormSafety]", inputs: { dbxActionFormSafety: { classPropertyName: "dbxActionFormSafety", publicName: "dbxActionFormSafety", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxActionFormSafetyDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxActionFormSafetyDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[dbxActionFormSafety]',
@@ -414,6 +423,9 @@ class DbxFormlyContext {
     getValue() {
         return this._delegate.pipe(filterMaybe(), switchMap((x) => x.getValue()), shareReplay(1));
     }
+    currentValue() {
+        return this._delegate.pipe(filterMaybe(), switchMap((x) => x.currentValue()), shareReplay(1));
+    }
     setValue(value) {
         this._initialValue.next(value);
         if (this._delegate.value) {
@@ -446,10 +458,10 @@ class DbxFormlyContext {
             this._delegate.value.forceFormUpdate();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxFormlyContext, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxFormlyContext });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxFormlyContext, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxFormlyContext });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxFormlyContext, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxFormlyContext, decorators: [{
             type: Injectable
         }] });
 
@@ -562,6 +574,9 @@ class DbxFormlyComponent {
     getValue() {
         return of(this.form.value);
     }
+    currentValue() {
+        return this.getValue();
+    }
     setValue(value) {
         this.modelSignal.set(structuredClone(value));
         if (this.options.updateInitialValue) {
@@ -604,14 +619,14 @@ class DbxFormlyComponent {
     forceFormUpdate() {
         this._forceUpdate.next();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxFormlyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.4", type: DbxFormlyComponent, isStandalone: true, selector: "dbx-formly", host: { classAttribute: "dbx-formly" }, providers: provideDbxMutableForm(DbxFormlyComponent), viewQueries: [{ propertyName: "formlyForm", first: true, predicate: FormlyForm, descendants: true, isSignal: true }], exportAs: ["formly"], ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxFormlyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.10", type: DbxFormlyComponent, isStandalone: true, selector: "dbx-formly", host: { classAttribute: "dbx-formly" }, providers: provideDbxMutableForm(DbxFormlyComponent), viewQueries: [{ propertyName: "formlyForm", first: true, predicate: FormlyForm, descendants: true, isSignal: true }], exportAs: ["formly"], ngImport: i0, template: `
     <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: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],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$1.LegacyFormlyForm, selector: "formly-form" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxFormlyComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxFormlyComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'dbx-formly',
@@ -733,10 +748,10 @@ class DbxFormSourceDirective {
         }
         this._effectSub.setSub(subscription);
     }, ...(ngDevMode ? [{ debugName: "_setFormSourceObservableEffect" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxFormSourceDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.4", 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 } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxFormSourceDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.10", 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 } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxFormSourceDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxFormSourceDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[dbxFormSource]',
@@ -795,8 +810,8 @@ class DbxFormActionDialogComponent extends AbstractDialogDirective {
             data: config
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxFormActionDialogComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: DbxFormActionDialogComponent, isStandalone: true, selector: "ng-component", providers: [provideFormlyContext()], usesInheritance: true, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxFormActionDialogComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.10", type: DbxFormActionDialogComponent, isStandalone: true, selector: "ng-component", providers: [provideFormlyContext()], usesInheritance: true, ngImport: i0, template: `
     <dbx-dialog-content dbxAction [dbxActionHandler]="handleSubmitValue" class="dbx-dialog-content-with-header">
       <h3 class="dbx-dialog-content-header">{{ header }}</h3>
       <dbx-dialog-content-close (close)="close()"></dbx-dialog-content-close>
@@ -807,7 +822,7 @@ class DbxFormActionDialogComponent extends AbstractDialogDirective {
     </dbx-dialog-content>
   `, isInline: true, dependencies: [{ kind: "directive", type: DbxDialogContentDirective, selector: "dbx-dialog-content,[dbxDialogContent],.dbx-dialog-content", inputs: ["width"] }, { kind: "ngmodule", type: DbxActionModule }, { kind: "directive", type: i1$2.DbxActionDirective, selector: "dbx-action,[dbxAction]", exportAs: ["action", "dbxAction"] }, { kind: "directive", type: i1$2.DbxActionHandlerDirective, selector: "[dbxActionHandler]", inputs: ["dbxActionHandler"] }, { kind: "directive", type: i1$2.DbxActionButtonDirective, selector: "[dbxActionButton]", inputs: ["dbxActionButtonEcho"] }, { kind: "ngmodule", type: DbxButtonModule }, { kind: "component", type: i1$3.DbxButtonComponent, selector: "dbx-button", inputs: ["bar", "type", "buttonStyle", "color", "spinnerColor", "customButtonColor", "customTextColor", "customSpinnerColor", "basic", "tonal", "raised", "stroked", "flat", "iconOnly", "fab", "customContent", "allowClickPropagation", "mode"] }, { kind: "component", type: DbxDialogContentCloseComponent, selector: "dbx-dialog-content-close", inputs: ["padded"], outputs: ["close"] }, { kind: "component", type: DbxFormlyComponent, selector: "dbx-formly", exportAs: ["formly"] }, { kind: "directive", type: DbxFormSourceDirective, selector: "[dbxFormSource]", inputs: ["dbxFormSourceMode", "dbxFormSource"] }, { kind: "directive", type: DbxActionFormDirective, selector: "[dbxActionForm]", inputs: ["dbxActionFormDisabledOnWorking", "dbxActionFormIsValid", "dbxActionFormIsEqual", "dbxActionFormIsModified", "dbxActionFormMapValue"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxFormActionDialogComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxFormActionDialogComponent, decorators: [{
             type: Component,
             args: [{
                     template: `
@@ -891,14 +906,75 @@ function mergeCustomFnConfigInto(target, source) {
         }
     }
 }
+/**
+ * Recursively walks a list of fields, returning every field encountered including those
+ * nested inside containers, groups, rows, pages, and array fields.
+ *
+ * Container-style fields (container/group/row/page/full ArrayField) place their children
+ * under `fields`; `SimplifiedArrayField` places its children under `template`. Both are
+ * traversed here so that `_formConfig` declared on a deeply-nested field still gets pulled
+ * up to the form level.
+ *
+ * @param fields - the top-level fields to walk
+ * @returns a flat list of every field reachable from the inputs, in pre-order
+ */
+function flattenForgeFields(fields) {
+    const out = [];
+    function visit(field) {
+        out.push(field);
+        const fieldWithChildren = field;
+        // ContainerField / GroupField / RowField / PageField / ArrayField all carry their
+        // children under `fields`. ArrayField entries may themselves be either a FieldDef
+        // or an array of FieldDefs (object items).
+        if (Array.isArray(fieldWithChildren.fields)) {
+            for (const child of fieldWithChildren.fields) {
+                if (Array.isArray(child)) {
+                    for (const grandchild of child) {
+                        if (grandchild != null && typeof grandchild === 'object') {
+                            visit(grandchild);
+                        }
+                    }
+                }
+                else if (child != null && typeof child === 'object') {
+                    visit(child);
+                }
+            }
+        }
+        // SimplifiedArrayField carries its child shape under `template`, which can be either
+        // a single FieldDef (primitive items) or an array of FieldDefs (object items).
+        const template = fieldWithChildren.template;
+        if (template != null) {
+            if (Array.isArray(template)) {
+                for (const child of template) {
+                    if (child != null && typeof child === 'object') {
+                        visit(child);
+                    }
+                }
+            }
+            else if (typeof template === 'object') {
+                visit(template);
+            }
+        }
+    }
+    for (const field of fields) {
+        visit(field);
+    }
+    return out;
+}
 /**
  * Finalizes a `FormConfig` for consumption by dbx-forge by pulling field-level `_formConfig`
  * values up to the form level and appending any `_hiddenFields` so they participate in
  * validation and value wiring without being rendered.
  *
+ * The walk is recursive: `_formConfig` declared on a field nested inside a container,
+ * group, row, page, or array (full or simplified) is pulled up alongside top-level
+ * `_formConfig` so derivations and validators registered by a child field factory
+ * (e.g. an idempotent transform on a state field inside an address flex layout) are
+ * preserved when the field is composed into a parent layout.
+ *
  * Layering order (lowest to highest priority): `globalDefaults`, the input form's own config,
- * then each field's `_formConfig` in field order — so a later field can override an earlier
- * field's default validation message.
+ * then each field's `_formConfig` in pre-order traversal — so a later field can override an
+ * earlier field's default validation message.
  *
  * @param input - the FormConfig authored by the caller
  * @param globalDefaults - seed values for workspace-wide defaults (e.g. validation messages)
@@ -906,15 +982,16 @@ function mergeCustomFnConfigInto(target, source) {
  */
 function dbxForgeFinalizeFormConfig(input, globalDefaults) {
     const { fields } = input;
+    const allFields = flattenForgeFields(fields);
     /**
      * Extract all the values from the fields that are of type DbxForgeFieldFormConfig.
      */
-    const extractedFieldFormConfigs = filterMaybeArrayValues(fields.map((x) => x._formConfig));
+    const extractedFieldFormConfigs = filterMaybeArrayValues(allFields.map((x) => x._formConfig));
     const globalDefaultsLayer = globalDefaults ? { defaultValidationMessages: globalDefaults.defaultValidationMessages } : {};
     const merged = mergeDbxForgeFieldFormConfig(globalDefaultsLayer, { schemas: input.schemas, externalData: input.externalData, customFnConfig: copyFormConfigCustomFnConfig(input.customFnConfig ?? {}), defaultValidationMessages: input.defaultValidationMessages }, ...extractedFieldFormConfigs);
     // Extract hidden fields from field-level _hiddenFields and _formConfig._hiddenFields
     const hiddenFields = [];
-    for (const field of fields) {
+    for (const field of allFields) {
         if (field._formConfig?._hiddenFields) {
             field._formConfig._hiddenFields.forEach((x) => {
                 hiddenFields.push(x);
@@ -1018,10 +1095,10 @@ class DbxForgeGlobalDefaultConfigService {
     setDefaultValidationMessages(messages) {
         this._defaults = { ...this._defaults, defaultValidationMessages: messages ?? undefined };
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxForgeGlobalDefaultConfigService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxForgeGlobalDefaultConfigService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxForgeGlobalDefaultConfigService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxForgeGlobalDefaultConfigService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxForgeGlobalDefaultConfigService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxForgeGlobalDefaultConfigService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -1297,6 +1374,14 @@ class DbxForgeFormContext {
         }
         return result;
     }
+    /**
+     * Emits the current form value regardless of {@link requireValid}. Used by infrastructure
+     * that needs the underlying value while the form is invalid (e.g. {@link DbxActionFormDirective}
+     * feeding the value into user-supplied isModified functions to drive the action's disabled state).
+     */
+    currentValue() {
+        return this._value.pipe(filterMaybe());
+    }
     getDisabled() {
         return this._disabled.asObservable();
     }
@@ -1324,10 +1409,10 @@ class DbxForgeFormContext {
             this._reset.complete();
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxForgeFormContext, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxForgeFormContext });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxForgeFormContext, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxForgeFormContext });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxForgeFormContext, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxForgeFormContext, decorators: [{
             type: Injectable
         }] });
 /**
@@ -1444,10 +1529,10 @@ class DbxForgeFormContextService {
         }
         return result;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxForgeFormContextService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxForgeFormContextService });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxForgeFormContextService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxForgeFormContextService });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxForgeFormContextService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxForgeFormContextService, decorators: [{
             type: Injectable
         }] });
 /**
@@ -1701,14 +1786,14 @@ class DbxForgeFormComponent {
         this._resetSub.destroy();
         this._disabledSub.destroy();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxForgeFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: DbxForgeFormComponent, isStandalone: true, selector: "dbx-forge", host: { properties: { "class.dbx-forge-form-disabled": "isDisabled()" }, classAttribute: "dbx-forge" }, providers: [EventDispatcher, { provide: DbxForgeDynamicFormSignalRef, useExisting: DbxForgeFormComponent }, DbxForgeFormContextService, { provide: DbxForm, useExisting: DbxForgeFormContext }, { provide: DbxMutableForm, useExisting: DbxForgeFormContext }], viewQueries: [{ propertyName: "dynamicForm", first: true, predicate: DynamicForm, descendants: true, isSignal: true }], ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxForgeFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: DbxForgeFormComponent, isStandalone: true, selector: "dbx-forge", host: { properties: { "class.dbx-forge-form-disabled": "isDisabled()" }, classAttribute: "dbx-forge" }, providers: [EventDispatcher, { provide: DbxForgeDynamicFormSignalRef, useExisting: DbxForgeFormComponent }, DbxForgeFormContextService, { provide: DbxForm, useExisting: DbxForgeFormContext }, { provide: DbxMutableForm, useExisting: DbxForgeFormContext }], viewQueries: [{ propertyName: "dynamicForm", first: true, predicate: DynamicForm, descendants: true, isSignal: true }], ngImport: i0, template: `
     @if (configSignal()) {
       <form [dynamic-form]="configSignal()!" [(value)]="formValue" [formOptions]="formOptionsSignal()"></form>
     }
   `, isInline: true, dependencies: [{ kind: "component", type: DynamicForm, selector: "form[dynamic-form]", inputs: ["dynamic-form", "formOptions", "value"], outputs: ["valueChange", "validityChange", "dirtyChange", "submitted", "reset", "cleared", "events", "initialized", "onPageChange", "onPageNavigationStateChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxForgeFormComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxForgeFormComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'dbx-forge',
@@ -1847,8 +1932,8 @@ class DbxForgeActionDialogComponent extends AbstractDialogDirective {
             data: config
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxForgeActionDialogComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: DbxForgeActionDialogComponent, isStandalone: true, selector: "ng-component", providers: [provideDbxForgeFormContext()], usesInheritance: true, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxForgeActionDialogComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.10", type: DbxForgeActionDialogComponent, isStandalone: true, selector: "ng-component", providers: [provideDbxForgeFormContext()], usesInheritance: true, ngImport: i0, template: `
     <dbx-dialog-content dbxAction [dbxActionHandler]="handleSubmitValue" class="dbx-dialog-content-with-header">
       <h3 class="dbx-dialog-content-header">{{ header }}</h3>
       <dbx-dialog-content-close (close)="close()"></dbx-dialog-content-close>
@@ -1859,7 +1944,7 @@ class DbxForgeActionDialogComponent extends AbstractDialogDirective {
     </dbx-dialog-content>
   `, isInline: true, dependencies: [{ kind: "directive", type: DbxDialogContentDirective, selector: "dbx-dialog-content,[dbxDialogContent],.dbx-dialog-content", inputs: ["width"] }, { kind: "ngmodule", type: DbxActionModule }, { kind: "directive", type: i1$2.DbxActionDirective, selector: "dbx-action,[dbxAction]", exportAs: ["action", "dbxAction"] }, { kind: "directive", type: i1$2.DbxActionHandlerDirective, selector: "[dbxActionHandler]", inputs: ["dbxActionHandler"] }, { kind: "directive", type: i1$2.DbxActionButtonDirective, selector: "[dbxActionButton]", inputs: ["dbxActionButtonEcho"] }, { kind: "ngmodule", type: DbxButtonModule }, { kind: "component", type: i1$3.DbxButtonComponent, selector: "dbx-button", inputs: ["bar", "type", "buttonStyle", "color", "spinnerColor", "customButtonColor", "customTextColor", "customSpinnerColor", "basic", "tonal", "raised", "stroked", "flat", "iconOnly", "fab", "customContent", "allowClickPropagation", "mode"] }, { kind: "component", type: DbxDialogContentCloseComponent, selector: "dbx-dialog-content-close", inputs: ["padded"], outputs: ["close"] }, { kind: "component", type: DbxForgeFormComponent, selector: "dbx-forge" }, { kind: "directive", type: DbxFormSourceDirective, selector: "[dbxFormSource]", inputs: ["dbxFormSourceMode", "dbxFormSource"] }, { kind: "directive", type: DbxActionFormDirective, selector: "[dbxActionForm]", inputs: ["dbxActionFormDisabledOnWorking", "dbxActionFormIsValid", "dbxActionFormIsEqual", "dbxActionFormIsModified", "dbxActionFormMapValue"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxForgeActionDialogComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxForgeActionDialogComponent, decorators: [{
             type: Component,
             args: [{
                     template: `
@@ -1911,10 +1996,10 @@ class DbxFormLoadingSourceDirective {
             this.form.setValue(x);
         }));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxFormLoadingSourceDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.4", type: DbxFormLoadingSourceDirective, isStandalone: true, selector: "[dbxFormLoadingSource]", inputs: { dbxFormLoadingSourceMode: { classPropertyName: "dbxFormLoadingSourceMode", publicName: "dbxFormLoadingSourceMode", isSignal: true, isRequired: false, transformFunction: null }, dbxFormLoadingSource: { classPropertyName: "dbxFormLoadingSource", publicName: "dbxFormLoadingSource", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxFormLoadingSourceDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.10", type: DbxFormLoadingSourceDirective, isStandalone: true, selector: "[dbxFormLoadingSource]", inputs: { dbxFormLoadingSourceMode: { classPropertyName: "dbxFormLoadingSourceMode", publicName: "dbxFormLoadingSourceMode", isSignal: true, isRequired: false, transformFunction: null }, dbxFormLoadingSource: { classPropertyName: "dbxFormLoadingSource", publicName: "dbxFormLoadingSource", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxFormLoadingSourceDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxFormLoadingSourceDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[dbxFormLoadingSource]',
@@ -1957,10 +2042,10 @@ class DbxFormValueChangeDirective {
             }
         }));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxFormValueChangeDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.4", type: DbxFormValueChangeDirective, isStandalone: true, selector: "[dbxFormValueChange]", outputs: { dbxFormValueChange: "dbxFormValueChange" }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxFormValueChangeDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.10", type: DbxFormValueChangeDirective, isStandalone: true, selector: "[dbxFormValueChange]", outputs: { dbxFormValueChange: "dbxFormValueChange" }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxFormValueChangeDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxFormValueChangeDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[dbxFormValueChange]',
@@ -1994,17 +2079,18 @@ function streamValueFromControl(fromControl, path) {
  * to access the core form features provided by the library.
  */
 class DbxFormModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxFormModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.4", ngImport: i0, type: DbxFormModule });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxFormModule });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxFormModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.10", ngImport: i0, type: DbxFormModule });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxFormModule });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxFormModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxFormModule, decorators: [{
             type: NgModule,
             args: [{
                     exports: []
                 }]
         }] });
 
+const SELF_DEPENDENCY_TOKEN = '$self'; // TODO: Import from ng-forge?
 /**
  * Creates a {@link DbxForgeFieldFunction} from a {@link DbxForgeFieldFunctionConfig}.
  *
@@ -2117,12 +2203,14 @@ function dbxForgeBuildFieldDef(configureFunction, _config) {
                         result = `custom:expr:${v.kind ?? v.expression}`;
                     }
                     else {
-                        const customFnName = v.functionName ?? `__inline_${(_inlineValidatorCount += 1)}__`;
+                        _inlineValidatorCount += 1;
+                        const customFnName = v.functionName ?? `__inline_${_inlineValidatorCount}__`;
                         result = `custom:fn:${customFnName}`;
                     }
                     break;
                 case 'async': {
-                    const asyncFnName = v.functionName ?? `__inline_${(_inlineValidatorCount += 1)}__`;
+                    _inlineValidatorCount += 1;
+                    const asyncFnName = v.functionName ?? `__inline_${_inlineValidatorCount}__`;
                     result = `async:${asyncFnName}`;
                     break;
                 }
@@ -2313,7 +2401,8 @@ function _finalizeLogicEntries(instance, fieldDef, logic) {
      * @returns a unique auto-generated function name based on the field key
      */
     function _generateDefaultFunctionName() {
-        return `__fn__${fieldDef.key}_${(customFunctionNameCount += 1)}`;
+        customFunctionNameCount += 1;
+        return `__fn__${fieldDef.key}_${customFunctionNameCount}`;
     }
     /**
      * Registers a custom function with the customFnConfig.
@@ -2375,7 +2464,7 @@ function _finalizeLogicEntries(instance, fieldDef, logic) {
         }
         // set the default dependsOn if not set
         if (!derivationEntry.dependsOn) {
-            derivationEntry.dependsOn = [fieldDef.key];
+            derivationEntry.dependsOn = [SELF_DEPENDENCY_TOKEN];
         }
     }
     function finalizeTransformEntry(entry) {
@@ -2408,14 +2497,14 @@ function _finalizeLogicEntries(instance, fieldDef, logic) {
                     type: 'derivation',
                     trigger: 'onChange',
                     functionName: _registerCustomFunction({ isAsync: false, fn }),
-                    dependsOn: [fieldDef.key]
+                    dependsOn: [SELF_DEPENDENCY_TOKEN]
                 };
                 break;
             case 'async':
                 result = {
                     type: 'derivation',
                     functionName: _registerCustomFunction({ isAsync: true, fn }),
-                    dependsOn: [fieldDef.key]
+                    dependsOn: [SELF_DEPENDENCY_TOKEN]
                 };
                 break;
             case 'debounced':
@@ -2423,7 +2512,7 @@ function _finalizeLogicEntries(instance, fieldDef, logic) {
                     type: 'derivation',
                     trigger: 'debounced',
                     functionName: _registerCustomFunction({ isAsync: false, fn }),
-                    dependsOn: [fieldDef.key],
+                    dependsOn: [SELF_DEPENDENCY_TOKEN],
                     debounceMs: entry.debounceMs
                 };
                 break;
@@ -2485,7 +2574,8 @@ function _finalizeValidators(instance, fieldDef, validation) {
     const validatorCustomFnConfig = { validators: {}, asyncValidators: {} };
     let validatorFnNameCount = 0;
     function _generateValidatorFunctionName() {
-        return `__vfn__${fieldDef.key}_${(validatorFnNameCount += 1)}`;
+        validatorFnNameCount += 1;
+        return `__vfn__${fieldDef.key}_${validatorFnNameCount}`;
     }
     const finalizedValidators = validators.map((entry) => {
         let result;
@@ -2726,7 +2816,7 @@ function isWebsiteUrlValidator(config) {
                 };
         };
     const validateWebsiteDomain = (details) => {
-        let pass = validDomainsSet.size === 0 ? true : false;
+        let pass = validDomainsSet.size === 0;
         if (details.hasWebsiteDomain && validateDomains) {
             pass = validDomainsSet.has(details.domain);
         }
@@ -2925,6 +3015,8 @@ const dbxForgeTextField = dbxForgeFieldFunction({
                     transform: transformStringFunction(transform)
                 }
             ]);
+            // remove the idempotentTransform
+            delete config.idempotentTransform;
         }
         if (config.inputType === 'email') {
             x.addValidation(dbxForgeEmailValidator());
@@ -3096,7 +3188,8 @@ function dbxForgeCityField(config = {}) {
  * ```
  */
 function dbxForgeStateField(config = {}) {
-    const { asCode = false, pattern = asCode ? US_STATE_CODE_STRING_REGEX : undefined, key = 'state', placeholder = '', label = 'State', maxLength = asCode ? ADDRESS_STATE_CODE_MAX_LENGTH : ADDRESS_STATE_MAX_LENGTH, idempotentTransform: transform, required = false } = config;
+    const { asCode = false, pattern = asCode ? US_STATE_CODE_STRING_REGEX : undefined, key = 'state', placeholder: inputPlaceholder, label = 'State', maxLength = asCode ? ADDRESS_STATE_CODE_MAX_LENGTH : ADDRESS_STATE_MAX_LENGTH, idempotentTransform: transform, required = false } = config;
+    const placeholder = (inputPlaceholder ?? asCode) ? 'TX' : 'Texas';
     return dbxForgeTextField({
         ...config,
         key,
@@ -3157,7 +3250,7 @@ function dbxForgeCountryField(config = {}) {
  * ```
  */
 function dbxForgeZipCodeField(config = {}) {
-    const { key = 'zip', placeholder = '', label = 'Zip Code', pattern = ZIP_CODE_STRING_REGEX, maxLength = ADDRESS_ZIP_MAX_LENGTH, required = false } = config;
+    const { key = 'zip', placeholder, label = 'Zip Code', pattern = ZIP_CODE_STRING_REGEX, maxLength = ADDRESS_ZIP_MAX_LENGTH, required = false } = config;
     return dbxForgeTextField({
         ...config,
         key,
@@ -3203,6 +3296,93 @@ function dbxForgeLatLngTextField(config = {}) {
 // MARK: Field Type
 const FORGE_EXPAND_FIELD_TYPE_NAME = 'dbx-forge-expand';
 
+// MARK: Wrapper Type
+/**
+ * Registered wrapper type name for the flex layout wrapper.
+ */
+const DBX_FORGE_FLEX_WRAPPER_TYPE_NAME = 'dbx-forge-flex';
+/**
+ * Type guard that checks if the input is a {@link DbxForgeFlexLayoutFieldConfig}
+ * (has a `field` property) rather than a plain {@link FieldDef}.
+ *
+ * @param input - the field definition or flex layout field config to check
+ * @returns true if the input is a {@link DbxForgeFlexLayoutFieldConfig} with a `field` property
+ */
+function isFlexFieldConfig(input) {
+    return input.field != null;
+}
+/**
+ * Creates a responsive flex layout container that arranges child fields horizontally
+ * with configurable sizing, breakpoints, and responsive behavior.
+ *
+ * Each child field gets a `dbx-flex-N` CSS class applied (merged with any existing className).
+ * The container hosts the `dbx-forge-flex` wrapper, which renders the `dbxFlexGroup`
+ * directive for responsive breakpoint handling.
+ *
+ * A `container` is used (not a `group`) because flex layout is purely visual —
+ * the wrapped fields should remain at the same level in the form value, not be
+ * nested under an extra object.
+ *
+ * This is the forge equivalent of {@link formlyFlexLayoutWrapper}.
+ *
+ * @param input - {@link DbxForgeFlexLayoutConfig} with a `fields` property and layout defaults.
+ *   For backwards compatibility, may also be passed as a deprecated array of fields paired with an optional config.
+ * @returns A {@link ContainerField} with the flex wrapper applied and sized children
+ *
+ * @dbxFormField
+ * @dbxFormSlug flex-layout
+ * @dbxFormTier composite-builder
+ * @dbxFormSuffix Layout
+ * @dbxFormProduces GroupField
+ * @dbxFormArrayOutput no
+ * @dbxFormConfigInterface DbxForgeFlexLayoutConfig
+ * @dbxFormComposesFrom group
+ *
+ * @example
+ * ```typescript
+ * // Simple: all fields get default size (2)
+ * dbxForgeFlexLayout({ fields: [dbxForgeCityField({}), dbxForgeStateField({}), dbxForgeZipCodeField({})] })
+ *
+ * // Resulting form value shape (flat — no wrapper property):
+ * // { city: '...', state: '...', zip: '...' }
+ *
+ * // With per-field sizing and breakpoint
+ * dbxForgeFlexLayout({
+ *   breakpoint: 'small',
+ *   size: 1,
+ *   fields: [
+ *     { field: dbxForgeCityField({}), size: 4 },
+ *     dbxForgeStateField({}),
+ *     dbxForgeZipCodeField({})
+ *   ]
+ * })
+ *
+ * // Full config
+ * dbxForgeFlexLayout({ breakpoint: 'large', breakToColumn: true, relative: true, size: 1, fields: [...] })
+ * ```
+ */
+function dbxForgeFlexLayout(input, legacyConfig) {
+    const config = Array.isArray(input) ? { ...legacyConfig, fields: input } : input;
+    const { breakpoint, relative, breakToColumn, size: defaultSize = 2, fields = [] } = config;
+    const mappedFields = fields.map((entry) => {
+        const { field, size = defaultSize } = isFlexFieldConfig(entry) ? entry : { field: entry };
+        const flexClassName = `dbx-flex-${size}`;
+        const className = field.className ? `${field.className} ${flexClassName}` : flexClassName;
+        return { ...field, className };
+    });
+    const flexWrapper = {
+        type: DBX_FORGE_FLEX_WRAPPER_TYPE_NAME,
+        ...(breakpoint != null && { breakpoint }),
+        ...(relative != null && { relative }),
+        ...(breakToColumn != null && { breakToColumn })
+    };
+    return dbxForgeContainer({
+        fields: mappedFields,
+        className: 'dbx-flex-group',
+        wrappers: [flexWrapper]
+    });
+}
+
 let _dbxForgeRowCounter = 0;
 let _dbxForgeContainerCounter = 0;
 let _dbxForgeToggleCounter = 0;
@@ -3356,7 +3536,7 @@ function dbxForgeContainer(config) {
  *
  * Structure produced:
  * ```
- * Row (outer)
+ * Container (outer, with flex wrapper)
  *   ├── toggle field (type: 'toggle', boolean value)
  *   └── Container (content, hidden when toggle === false)
  * ```
@@ -3364,13 +3544,13 @@ function dbxForgeContainer(config) {
  * This is the forge equivalent of the formly `formlyToggleWrapper`.
  *
  * @param config - Toggle wrapper configuration
- * @returns A {@link RowField} containing the toggle and content container
+ * @returns A {@link ContainerField} containing the toggle and content container
  *
  * @dbxFormField
  * @dbxFormSlug toggle-wrapper
  * @dbxFormTier composite-builder
  * @dbxFormSuffix Wrapper
- * @dbxFormProduces RowField
+ * @dbxFormProduces ContainerField
  * @dbxFormArrayOutput no
  * @dbxFormConfigInterface DbxForgeToggleWrapperConfig
  * @dbxFormComposesFrom toggle, group
@@ -3416,9 +3596,11 @@ function dbxForgeToggleWrapper(config) {
         fields: config.fields,
         logic: [hiddenCondition]
     });
-    return dbxForgeRow({
+    const flexWrapper = { type: DBX_FORGE_FLEX_WRAPPER_TYPE_NAME };
+    return dbxForgeContainer({
         fields: [toggleField, contentContainer],
-        className: config.className ?? 'dbx-forge-toggle-wrapper'
+        className: config.className ?? 'dbx-forge-toggle-wrapper',
+        wrappers: [flexWrapper]
     });
 }
 /**
@@ -3433,7 +3615,7 @@ function dbxForgeToggleWrapper(config) {
  *
  * Structure produced:
  * ```
- * Row (outer)
+ * Container (outer, with flex wrapper)
  *   ├── expand field (type: 'dbx-forge-expand', boolean value)
  *   └── Container (content, hidden when expand field === false)
  * ```
@@ -3441,13 +3623,13 @@ function dbxForgeToggleWrapper(config) {
  * This is the forge equivalent of the formly `formlyExpandWrapper`.
  *
  * @param config - Expand wrapper configuration
- * @returns A {@link RowField} containing the expand control and content container
+ * @returns A {@link ContainerField} containing the expand control and content container
  *
  * @dbxFormField
  * @dbxFormSlug expand-wrapper
  * @dbxFormTier composite-builder
  * @dbxFormSuffix Wrapper
- * @dbxFormProduces RowField
+ * @dbxFormProduces ContainerField
  * @dbxFormArrayOutput no
  * @dbxFormConfigInterface DbxForgeExpandWrapperConfig
  * @dbxFormComposesFrom group
@@ -3494,9 +3676,11 @@ function dbxForgeExpandWrapper(config) {
         fields: config.fields,
         logic: [hiddenCondition]
     });
-    return dbxForgeRow({
+    const flexWrapper = { type: DBX_FORGE_FLEX_WRAPPER_TYPE_NAME };
+    return dbxForgeContainer({
         fields: [expandField, contentContainer],
-        className: config.className ?? 'dbx-forge-expand-wrapper'
+        className: config.className ?? 'dbx-forge-expand-wrapper',
+        wrappers: [flexWrapper]
     });
 }
 
@@ -3624,15 +3808,12 @@ function dbxForgeAddressLineField(config = {}) {
  */
 function dbxForgeAddressFields(config = {}) {
     const { required = true, includeLine2 = true, includeCountry = true } = config;
-    // City and country are full-width on their own rows since names can be long
-    const cityField = dbxForgeCityField({ required, ...config.cityField });
-    // State and zip share a row
-    const stateZipRow = dbxForgeRow({
-        fields: [
-            { ...dbxForgeStateField({ required, ...config.stateField }), col: 6 },
-            { ...dbxForgeZipCodeField({ required, ...config.zipCodeField }), col: 6 }
-        ]
-    });
+    // City, state, zip, and country share a single relative-sized flex row to match formly parity.
+    const singleLineFields = [dbxForgeCityField({ required, ...config.cityField }), dbxForgeStateField({ required, ...config.stateField }), dbxForgeZipCodeField({ required, ...config.zipCodeField })];
+    if (includeCountry) {
+        singleLineFields.push(dbxForgeCountryField({ required, ...config.countryField }));
+    }
+    const singleLineRow = dbxForgeFlexLayout({ size: 1, relative: true, fields: singleLineFields });
     let lines;
     if (includeLine2) {
         lines = [dbxForgeAddressLineField({ required, ...config.line1Field, line: 1 }), dbxForgeAddressLineField({ ...config.line2Field, line: 2 })];
@@ -3640,10 +3821,7 @@ function dbxForgeAddressFields(config = {}) {
     else {
         lines = [dbxForgeAddressLineField({ required, ...config.line1Field, line: 0 })];
     }
-    const fields = [...lines, cityField, stateZipRow];
-    if (includeCountry) {
-        fields.push(dbxForgeCountryField({ required, ...config.countryField }));
-    }
+    const fields = [...lines, singleLineRow];
     return fields;
 }
 /**
@@ -3808,6 +3986,7 @@ function dbxForgeDollarAmountField(config) {
  * wrapper chains via {@link dbxForgeMaterialFormFieldWrappedFieldFunction}.
  */
 const DBX_FORGE_FORM_FIELD_WRAPPER_NAME = 'dbx-forge-form-field-wrapper';
+// MARK: Configuration
 /**
  * Adds the Material-style form-field wrapper ({@link DBX_FORGE_FORM_FIELD_WRAPPER_NAME}) to
  * the builder instance's wrapper chain so the rendered field is surrounded by the shared
@@ -3820,6 +3999,28 @@ function configureDbxForgeFormFieldWrapper(instance) {
         type: DBX_FORGE_FORM_FIELD_WRAPPER_NAME
     });
 }
+/**
+ * Returns a configurator that adds the form-field wrapper with the given props.
+ *
+ * Use this from a field factory's `buildFieldDef` step to attach the wrapper and
+ * pass props (such as `showLabelAt` / `contentLabel`) through to the wrapper component.
+ *
+ * Undefined entries in `props` are dropped, and `props` is omitted from the wrapper
+ * config entirely when no values remain — keeps the wrapper bare in the common case
+ * (e.g. a checkbox/toggle with no label override).
+ *
+ * @param props - wrapper props applied to the inserted wrapper config
+ * @returns a configurator that mutates the builder instance to add the wrapper
+ */
+function configureDbxForgeFormFieldWrapperWith(inputProps) {
+    const props = stripObject(inputProps);
+    return (instance) => {
+        instance.addWrappers({
+            type: DBX_FORGE_FORM_FIELD_WRAPPER_NAME,
+            props
+        });
+    };
+}
 
 /**
  * Material slider wrapped in a form-field container. Supports thumb label, tick interval, and step-derived tick spacing.
@@ -3871,11 +4072,15 @@ const dbxForgeNumberSliderField = dbxForgeFieldFunction({
 /**
  * CSS class applied to forge fields when `styledBox` is enabled.
  *
- * Mirrors the Material outlined form-field appearance for fields that don't use `<mat-form-field>` (checkbox, toggle, slider).
+ * @deprecated Boolean fields now use the Material-style form-field wrapper to render the
+ * outlined chrome and standard label/hint/error subscript. Retained as an export for any
+ * consumers still referencing the class name directly.
  */
 const FORGE_STYLED_BOX_CLASS = 'dbx-forge-styled-box';
 /**
- * Material slide toggle. Renders inside a styled outline box by default so it visually matches surrounding outlined form fields; pass `styledBox: false` to opt out.
+ * Material slide toggle. Renders inside the shared form-field wrapper by default so
+ * it visually matches surrounding outlined form fields and uses the standard error
+ * subscript chrome; pass `styledBox: false` to opt out.
  *
  * @param config - Toggle field configuration
  * @returns A validated {@link MatToggleField} with type `'toggle'`
@@ -3886,7 +4091,7 @@ const FORGE_STYLED_BOX_CLASS = 'dbx-forge-styled-box';
  * @dbxFormProduces boolean
  * @dbxFormArrayOutput no
  * @dbxFormNgFormType toggle
- * @dbxFormWrapperPattern unwrapped
+ * @dbxFormWrapperPattern material-form-field-wrapped
  * @dbxFormConfigInterface DbxForgeToggleFieldConfig
  * @example
  * ```typescript
@@ -3898,12 +4103,21 @@ const dbxForgeToggleField = dbxForgeFieldFunction({
     buildProps: dbxForgeFieldFunctionConfigPropsWithHintBuilder(),
     buildFieldDef: dbxForgeBuildFieldDef((x, config) => {
         if (config.styledBox !== false) {
-            config.className = config.className ?? FORGE_STYLED_BOX_CLASS;
+            // Boolean fields render their primary label inline next to the control,
+            // so by default the wrapper does not render a label of its own (`'content'`)
+            // — the inner field surfaces it. Callers can override via `showLabelAt`.
+            x.configure(configureDbxForgeFormFieldWrapperWith({
+                label: config.showLabelAt === 'content' ? '' : config.label // clear the wrapper label if it should only show in the content
+            }));
+            // clear the wrapper/use empty if it should only show in the wrapper
+            if (config.showLabelAt === 'wrapper') {
+                config.label = config.contentLabel ?? '';
+            }
         }
     })
 });
 /**
- * Material checkbox. Shares the styled-outline-box opt-out with toggle.
+ * Material checkbox. Shares the form-field-wrapper opt-out with toggle.
  *
  * @param config - Checkbox field configuration
  * @returns A validated {@link MatCheckboxField} with type `'checkbox'`
@@ -3914,7 +4128,7 @@ const dbxForgeToggleField = dbxForgeFieldFunction({
  * @dbxFormProduces boolean
  * @dbxFormArrayOutput no
  * @dbxFormNgFormType checkbox
- * @dbxFormWrapperPattern unwrapped
+ * @dbxFormWrapperPattern material-form-field-wrapped
  * @dbxFormConfigInterface DbxForgeCheckboxFieldConfig
  *
  * @example
@@ -3927,7 +4141,16 @@ const dbxForgeCheckboxField = dbxForgeFieldFunction({
     buildProps: dbxForgeFieldFunctionConfigPropsWithHintBuilder(),
     buildFieldDef: dbxForgeBuildFieldDef((x, config) => {
         if (config.styledBox !== false) {
-            config.className = config.className ?? FORGE_STYLED_BOX_CLASS;
+            // Boolean fields render their primary label inline next to the control,
+            // so by default the wrapper does not render a label of its own (`'content'`)
+            // — the inner field surfaces it. Callers can override via `showLabelAt`.
+            x.configure(configureDbxForgeFormFieldWrapperWith({
+                label: config.showLabelAt === 'content' ? '' : config.label // clear the wrapper label if it should only show in the content
+            }));
+            // clear the wrapper/use empty if it should only show in the wrapper
+            if (config.showLabelAt === 'wrapper') {
+                config.label = config.contentLabel ?? '';
+            }
         }
     })
 });
@@ -3980,10 +4203,10 @@ class DbxDateTimeFieldMenuPresetsService {
     set configurations(configurations) {
         this._configurations.next(configurations);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxDateTimeFieldMenuPresetsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxDateTimeFieldMenuPresetsService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxDateTimeFieldMenuPresetsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxDateTimeFieldMenuPresetsService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxDateTimeFieldMenuPresetsService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxDateTimeFieldMenuPresetsService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -4087,7 +4310,7 @@ function dbxDateTimeInputValueParseFactory(mode, timezoneInstance) {
         const originalFactory = factory;
         factory = (input) => {
             const date = originalFactory(input);
-            if (!date || (date instanceof Date && isNaN(date.getTime())))
+            if (!date || (date instanceof Date && Number.isNaN(date.getTime())))
                 return date;
             return timezoneInstance.systemDateToTargetDate(date);
         };
@@ -4306,7 +4529,7 @@ class DbxDateTimeFieldComponent extends FieldType {
         validators: []
     });
     timeInputCtrl = new FormControl(null, {
-        validators: [Validators.pattern(/^(now)$|^([0-9]|(0[0-9])|(1[0-9])|(2[0-3]))(:)?([0-5][0-9])?(\s)?([apAP][Mm])?(\\s)*$/)]
+        validators: [Validators.pattern(/^(now)$|^(\d|(0\d)|(1\d)|(2[0-3]))(:)?([0-5]\d)?(\s)?([apAP][Mm])?(\\s)*$/)]
     });
     get dateLabel() {
         return this.props.dateLabel ?? 'Date';
@@ -4344,7 +4567,13 @@ class DbxDateTimeFieldComponent extends FieldType {
     }
     get timeMode() {
         const dateValuesOnly = this.valueMode === DbxDateTimeValueMode.DAY_STRING;
-        return dateValuesOnly ? DbxDateTimeFieldTimeMode.NONE : this.timeOnly ? DbxDateTimeFieldTimeMode.REQUIRED : (this.dateTimeField.timeMode ?? DbxDateTimeFieldTimeMode.REQUIRED);
+        if (dateValuesOnly) {
+            return DbxDateTimeFieldTimeMode.NONE;
+        }
+        if (this.timeOnly) {
+            return DbxDateTimeFieldTimeMode.REQUIRED;
+        }
+        return this.dateTimeField.timeMode ?? DbxDateTimeFieldTimeMode.REQUIRED;
     }
     get isDateRequired() {
         return this.props.required ?? false;
@@ -4566,7 +4795,7 @@ class DbxDateTimeFieldComponent extends FieldType {
         }
         return currentErrorMessage;
     }))), startWith(undefined), shareReplay(1));
-    hasError$ = this.currentErrorMessage$.pipe(map((x) => Boolean(x)), distinctUntilChanged(), shareReplay(1));
+    hasError$ = this.currentErrorMessage$.pipe(map(Boolean), distinctUntilChanged(), shareReplay(1));
     dateValueSignal = toSignal(this.dateValue$);
     displayValueSignal = toSignal(this.displayValue$);
     pickerFilterSignal = toSignal(this.pickerFilter$, { initialValue: this.defaultPickerFilter });
@@ -4859,10 +5088,10 @@ class DbxDateTimeFieldComponent extends FieldType {
     clearValue() {
         this._cleared.next();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxDateTimeFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", 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  @if (showTimeInputSignal() || showAddTimeSignal()) {\n    <!-- Only show flex if there is content to be displayed. -->\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 aria-hidden=\"true\">timer</mat-icon>\n            Add Time\n          </button>\n        </div>\n      }\n    </div>\n  }\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\" aria-label=\"Open date picker\">\n        <mat-icon aria-hidden=\"true\">calendar_today</mat-icon>\n      </button>\n    }\n    @if (showClearButtonSignal()) {\n      <button matSuffix class=\"dbx-datetime-clear-button\" mat-icon-button aria-label=\"Clear date and time\" [disabled]=\"disabled\" (click)=\"clearValue()\">\n        <mat-icon aria-hidden=\"true\">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=\"Open time presets\" [disabled]=\"disabled\">\n      <mat-icon aria-hidden=\"true\">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$4.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$4.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$4.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$4.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.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.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$5.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1$5.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i1$5.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i1$6.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i1$6.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], 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$7.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: "ngmodule", type: MatDividerModule }, { kind: "component", type: i10.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "pipe", type: GetValuePipe, name: "getValue" }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "pipe", type: DateDistancePipe, name: "dateDistance" }, { kind: "pipe", type: TimeDistancePipe, name: "timeDistance" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxDateTimeFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", 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  @if (showTimeInputSignal() || showAddTimeSignal()) {\n    <!-- Only show flex if there is content to be displayed. -->\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 aria-hidden=\"true\">timer</mat-icon>\n            Add Time\n          </button>\n        </div>\n      }\n    </div>\n  }\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\" aria-label=\"Open date picker\">\n        <mat-icon aria-hidden=\"true\">calendar_today</mat-icon>\n      </button>\n    }\n    @if (showClearButtonSignal()) {\n      <button matSuffix class=\"dbx-datetime-clear-button\" mat-icon-button aria-label=\"Clear date and time\" [disabled]=\"disabled\" (click)=\"clearValue()\">\n        <mat-icon aria-hidden=\"true\">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=\"Open time presets\" [disabled]=\"disabled\">\n      <mat-icon aria-hidden=\"true\">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$4.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$4.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$4.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$4.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.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.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$5.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1$5.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i1$5.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i1$6.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i1$6.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], 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$7.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: "ngmodule", type: MatDividerModule }, { kind: "component", type: i10.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "pipe", type: GetValuePipe, name: "getValue" }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "pipe", type: DateDistancePipe, name: "dateDistance" }, { kind: "pipe", type: TimeDistancePipe, name: "timeDistance" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxDateTimeFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxDateTimeFieldComponent, decorators: [{
             type: Component,
             args: [{ imports: [FlexLayoutModule, NgTemplateOutlet, MatButtonModule, 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  @if (showTimeInputSignal() || showAddTimeSignal()) {\n    <!-- Only show flex if there is content to be displayed. -->\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 aria-hidden=\"true\">timer</mat-icon>\n            Add Time\n          </button>\n        </div>\n      }\n    </div>\n  }\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\" aria-label=\"Open date picker\">\n        <mat-icon aria-hidden=\"true\">calendar_today</mat-icon>\n      </button>\n    }\n    @if (showClearButtonSignal()) {\n      <button matSuffix class=\"dbx-datetime-clear-button\" mat-icon-button aria-label=\"Clear date and time\" [disabled]=\"disabled\" (click)=\"clearValue()\">\n        <mat-icon aria-hidden=\"true\">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=\"Open time presets\" [disabled]=\"disabled\">\n      <mat-icon aria-hidden=\"true\">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" }]
         }] });
@@ -5133,7 +5362,14 @@ function navigateDate(currentDate, step, config) {
         date: newDate,
         ...config
     });
-    const nextDate = instance.isInSchedule(newDate) ? newDate : instance.findNextAvailableDayInSchedule(newDate, step.direction === 1 ? 'future' : 'past');
+    let nextDate;
+    if (instance.isInSchedule(newDate)) {
+        nextDate = newDate;
+    }
+    else {
+        const direction = step.direction === 1 ? 'future' : 'past';
+        nextDate = instance.findNextAvailableDayInSchedule(newDate, direction);
+    }
     let result = undefined;
     if (nextDate != null) {
         result = instance.clampToLimit(nextDate);
@@ -5397,7 +5633,7 @@ class DbxForgeDateTimeFieldComponent {
     // MARK: Form controls
     dateCtrl = new FormControl(null);
     timeCtrl = new FormControl(null, {
-        validators: [Validators.pattern(/^(now)$|^([0-9]|(0[0-9])|(1[0-9])|(2[0-3]))(:)?([0-5][0-9])?(\s)?([apAP][Mm])?(\\s)*$/)]
+        validators: [Validators.pattern(/^(now)$|^(\d|(0\d)|(1\d)|(2[0-3]))(:)?([0-5]\d)?(\s)?([apAP][Mm])?(\\s)*$/)]
     });
     // MARK: Internal signals
     _fullDay = signal(false, ...(ngDevMode ? [{ debugName: "_fullDay" }] : /* istanbul ignore next */ []));
@@ -5510,7 +5746,7 @@ class DbxForgeDateTimeFieldComponent {
             return undefined;
         const parser = dbxDateTimeInputValueParseFactory(this.valueMode(), timezoneInstance);
         const result = parser(raw);
-        if (result instanceof Date && isNaN(result.getTime()))
+        if (result instanceof Date && Number.isNaN(result.getTime()))
             return undefined;
         return result;
     }), throttleTime$1(20, undefined, { leading: true, trailing: true }), distinctUntilChanged$1(isSameDateHoursAndMinutes), shareReplay$1(1));
@@ -5559,7 +5795,7 @@ class DbxForgeDateTimeFieldComponent {
                     const val = config.fieldState.value();
                     const date = safeToJsDate(val);
                     // Reject Invalid Date values (e.g. from empty string sibling fields)
-                    return date instanceof Date && !isNaN(date.getTime()) ? date : null;
+                    return date instanceof Date && !Number.isNaN(date.getTime()) ? date : null;
                 }), distinctUntilChanged$1());
             }
             return of(null);
@@ -5640,7 +5876,7 @@ class DbxForgeDateTimeFieldComponent {
         }
         return computeErrorMessage(errorRecord, this.isRequired());
     })).pipe(shareReplay$1(1));
-    hasError$ = this.currentErrorMessage$.pipe(map$1((x) => Boolean(x)), distinctUntilChanged$1(), shareReplay$1(1));
+    hasError$ = this.currentErrorMessage$.pipe(map$1(Boolean), distinctUntilChanged$1(), shareReplay$1(1));
     // Show clear button
     showClearButton$ = this.hasEmptyDisplayValue$.pipe(map$1((empty) => Boolean(this.showClearButton() && !empty)), distinctUntilChanged$1(), shareReplay$1(1));
     // MARK: Template signals via toSignal()
@@ -5657,7 +5893,7 @@ class DbxForgeDateTimeFieldComponent {
             if (raw != null) {
                 const parser = dbxDateTimeInputValueParseFactory(this.valueMode(), this.timezoneInstance());
                 const date = parser(raw);
-                if (date && !(date instanceof Date && isNaN(date.getTime()))) {
+                if (date && !(date instanceof Date && Number.isNaN(date.getTime()))) {
                     result = startOfDay(date);
                 }
             }
@@ -5732,7 +5968,10 @@ class DbxForgeDateTimeFieldComponent {
             // Time date
             this._timeDateSub?.unsubscribe();
             if (p?.timeDate) {
-                this._timeDateSub = asObservableFromGetter(p.timeDate).subscribe((td) => this._timeDate.set(td ? toJsDayDate(td) : undefined));
+                this._timeDateSub = asObservableFromGetter(p.timeDate).subscribe((td) => {
+                    const resolved = isDate(td) || typeof td === 'string' ? toJsDayDate(td) : undefined;
+                    this._timeDate.set(resolved);
+                });
             }
             // Presets
             this._presetsSub?.unsubscribe();
@@ -5775,7 +6014,7 @@ class DbxForgeDateTimeFieldComponent {
             }
             const parser = dbxDateTimeInputValueParseFactory(this.valueMode(), this.timezoneInstance());
             const date = parser(raw);
-            if (!date || (date instanceof Date && isNaN(date.getTime())))
+            if (!date || (date instanceof Date && Number.isNaN(date.getTime())))
                 return;
             const currentDateCtrl = this.dateCtrl.value;
             if (!currentDateCtrl || !isSameDateDay(currentDateCtrl, date)) {
@@ -6000,12 +6239,14 @@ class DbxForgeDateTimeFieldComponent {
             // Silently handle if sibling field is not writable
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxForgeDateTimeFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: DbxForgeDateTimeFieldComponent, isStandalone: true, selector: "dbx-forge-datetime-field", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, key: { classPropertyName: "key", publicName: "key", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: true, isRequired: false, transformFunction: null }, props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null }, meta: { classPropertyName: "meta", publicName: "meta", isSignal: true, isRequired: false, transformFunction: null }, validationMessages: { classPropertyName: "validationMessages", publicName: "validationMessages", isSignal: true, isRequired: false, transformFunction: null }, defaultValidationMessages: { classPropertyName: "defaultValidationMessages", publicName: "defaultValidationMessages", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"dbx-forge-datetime-field-wrapper\">\n  <!-- Field Label -->\n  @if (fieldLabel()) {\n    <span class=\"dbx-forge-field-label\">\n      {{ fieldLabel() }}\n      @if (isRequired()) {\n        <span class=\"dbx-forge-required-marker\">*</span>\n      }\n    </span>\n  }\n\n  <!-- Date + Time row -->\n  <div class=\"dbx-forge-datetime-field dbx-forge-datetime-inputs\">\n    <!-- Date Input -->\n    @if (showDateInputSignal()) {\n      <div class=\"dbx-forge-datetime-col\" [class.dbx-forge-datetime-col-full]=\"isDateOnly()\">\n        <mat-form-field [appearance]=\"appearance()\" subscriptSizing=\"dynamic\" class=\"dbx-forge-datetime-col-field\">\n          <mat-label>{{ dateLabel() }}</mat-label>\n          <input matInput [disabled]=\"isDisabledSignal()\" [required]=\"isDateRequired()\" [min]=\"dateInputMinSignal()\" [max]=\"dateInputMaxSignal()\" [matDatepicker]=\"picker\" [matDatepickerFilter]=\"pickerFilterSignal()\" (dateChange)=\"onDatePicked($event)\" [value]=\"dateValueSignal()\" (click)=\"onDateInputClick(picker)\" (keydown)=\"onDateKeydown($event)\" [attr.aria-invalid]=\"ariaInvalid()\" [attr.aria-required]=\"ariaRequired()\" [attr.aria-describedby]=\"ariaDescribedBy()\" />\n          @if (!hideDatePicker()) {\n            <button matPrefix mat-icon-button (click)=\"picker.open()\" [disabled]=\"isDisabledSignal()\" aria-label=\"Open date picker\">\n              <mat-icon aria-hidden=\"true\">calendar_today</mat-icon>\n            </button>\n          }\n          <mat-datepicker #picker></mat-datepicker>\n          @if (showClearButtonSignal()) {\n            <button matSuffix mat-icon-button aria-label=\"Clear date and time\" [disabled]=\"isDisabledSignal()\" (click)=\"clearValue()\">\n              <mat-icon aria-hidden=\"true\">clear</mat-icon>\n            </button>\n          }\n          @if (!showTimeInputSignal()) {\n            <span matTextSuffix>\n              <ng-container [ngTemplateOutlet]=\"tzSuffix\"></ng-container>\n            </span>\n          }\n        </mat-form-field>\n      </div>\n    }\n\n    <!-- Time Input / Add Time Button -->\n    @if (showTimeInputSignal() || showAddTimeButtonSignal()) {\n      <div class=\"dbx-forge-datetime-col\">\n        @if (showTimeInputSignal()) {\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 $index) {\n              <button mat-menu-item (click)=\"selectPreset(preset)\">{{ preset.label | getValue }}</button>\n            }\n          </mat-menu>\n          <mat-form-field [appearance]=\"appearance()\" subscriptSizing=\"dynamic\" class=\"dbx-forge-datetime-col-field\">\n            <mat-label>{{ timeLabel() }}</mat-label>\n            <input matInput [errorStateMatcher]=\"timeErrorStateMatcher\" [required]=\"isTimeRequired()\" [formControl]=\"timeCtrl\" (focus)=\"onTimeFocus()\" (focusout)=\"onTimeBlur()\" (keydown)=\"onTimeKeydown($event)\" />\n            <button matPrefix mat-icon-button [matMenuTriggerFor]=\"timemenu\" aria-label=\"Open time presets\" [disabled]=\"isTimeMenuDisabledSignal()\">\n              <mat-icon aria-hidden=\"true\">timer</mat-icon>\n            </button>\n            <span matTextSuffix>\n              <ng-container [ngTemplateOutlet]=\"tzSuffix\"></ng-container>\n            </span>\n            @if (timeCtrl.hasError('pattern')) {\n              <mat-error>The input time is not recognizable.</mat-error>\n            }\n          </mat-form-field>\n        }\n        @if (showAddTimeButtonSignal()) {\n          <div class=\"dbx-forge-add-time-wrapper\">\n            <button mat-button (click)=\"addTime()\">\n              <mat-icon>timer</mat-icon>\n              Add Time\n            </button>\n          </div>\n        }\n      </div>\n    }\n  </div>\n\n  <!-- Date Hint / Error -->\n  @if (hasErrorSignal()) {\n    @if (currentErrorMessageSignal()) {\n      <mat-error class=\"dbx-forge-datetime-error\" [id]=\"errorId()\">{{ currentErrorMessageSignal() }}</mat-error>\n    }\n  } @else if (!hideDateHint()) {\n    <div class=\"dbx-forge-datetime-hint\" [id]=\"hintId()\">\n      @if (!hasValueSignal()) {\n        <span class=\"dbx-small dbx-hint\">No date/time set</span>\n      } @else if (displayValueSignal(); as dv) {\n        @if (fullDaySignal()) {\n          <small>\n            <b class=\"dbx-ok\">{{ allDayLabel() }}</b>\n            {{ dv | date: 'fullDate' }} {{ tzAbbreviationSignal() }} ({{ dv | dateDistance }})\n          </small>\n        } @else {\n          <small>\n            <b class=\"dbx-ok\">{{ atTimeLabel() }}</b>\n            {{ dv | date: 'medium' }} {{ tzAbbreviationSignal() }} ({{ dv | timeDistance }})\n          </small>\n        }\n      }\n    </div>\n  }\n\n  <!-- Description -->\n  @if (description()) {\n    <p class=\"dbx-hint dbx-forge-datetime-desc\">{{ description() }}</p>\n  }\n</div>\n\n<!-- Timezone Suffix Template -->\n<ng-template #tzSuffix>\n  @if (showTimezone()) {\n    <span class=\"dbx-forge-datetime-timezone dbx-faint\">{{ tzAbbreviationSignal() }}</span>\n  }\n</ng-template>\n", styles: [".dbx-forge-datetime-field-wrapper{width:100%}.dbx-forge-datetime-inputs{display:flex;flex-wrap:wrap;gap:6px;align-items:flex-start;width:100%}.dbx-forge-datetime-col{flex:1 1 0%;min-width:180px}.dbx-forge-datetime-col-full{flex:1 1 100%}.dbx-forge-datetime-col-field{width:100%}.dbx-forge-field-label{font-weight:500}.dbx-forge-required-marker{color:var(--mat-sys-error, red)}.dbx-forge-datetime-desc{font-size:12px;margin-top:0}.dbx-forge-add-time-wrapper{display:flex;align-items:center;min-height:56px}.dbx-forge-datetime-timezone{padding:0 6px;pointer-events:none}.dbx-forge-datetime-hint,.dbx-forge-datetime-error{padding:0 2px}@media(max-width:599px){.dbx-forge-datetime-inputs{flex-direction:column}.dbx-forge-datetime-col{flex:1 1 100%}}\n"], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$5.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1$5.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i1$5.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i1$5.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i1$6.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i1$6.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$7.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: "ngmodule", type: MatDividerModule }, { kind: "component", type: i10.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { 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: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "pipe", type: DateDistancePipe, name: "dateDistance" }, { kind: "pipe", type: TimeDistancePipe, name: "timeDistance" }, { kind: "pipe", type: GetValuePipe, name: "getValue" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxForgeDateTimeFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: DbxForgeDateTimeFieldComponent, isStandalone: true, selector: "dbx-forge-datetime-field", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, key: { classPropertyName: "key", publicName: "key", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: true, isRequired: false, transformFunction: null }, props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null }, meta: { classPropertyName: "meta", publicName: "meta", isSignal: true, isRequired: false, transformFunction: null }, validationMessages: { classPropertyName: "validationMessages", publicName: "validationMessages", isSignal: true, isRequired: false, transformFunction: null }, defaultValidationMessages: { classPropertyName: "defaultValidationMessages", publicName: "defaultValidationMessages", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "className()" } }, ngImport: i0, template: "<div class=\"dbx-forge-datetime-field-wrapper\">\n  <!-- Field Label -->\n  @if (fieldLabel()) {\n    <span class=\"dbx-forge-field-label\">\n      {{ fieldLabel() }}\n      @if (isRequired()) {\n        <span class=\"dbx-forge-required-marker\">*</span>\n      }\n    </span>\n  }\n\n  <!-- Date + Time row -->\n  <div class=\"dbx-forge-datetime-field dbx-forge-datetime-inputs\">\n    <!-- Date Input -->\n    @if (showDateInputSignal()) {\n      <div class=\"dbx-forge-datetime-col\" [class.dbx-forge-datetime-col-full]=\"isDateOnly()\">\n        <mat-form-field [appearance]=\"appearance()\" subscriptSizing=\"dynamic\" class=\"dbx-forge-datetime-col-field\">\n          <mat-label>{{ dateLabel() }}</mat-label>\n          <input matInput [disabled]=\"isDisabledSignal()\" [required]=\"isDateRequired()\" [min]=\"dateInputMinSignal()\" [max]=\"dateInputMaxSignal()\" [matDatepicker]=\"picker\" [matDatepickerFilter]=\"pickerFilterSignal()\" (dateChange)=\"onDatePicked($event)\" [value]=\"dateValueSignal()\" (click)=\"onDateInputClick(picker)\" (keydown)=\"onDateKeydown($event)\" [attr.aria-invalid]=\"ariaInvalid()\" [attr.aria-required]=\"ariaRequired()\" [attr.aria-describedby]=\"ariaDescribedBy()\" />\n          @if (!hideDatePicker()) {\n            <button matPrefix mat-icon-button (click)=\"picker.open()\" [disabled]=\"isDisabledSignal()\" aria-label=\"Open date picker\">\n              <mat-icon aria-hidden=\"true\">calendar_today</mat-icon>\n            </button>\n          }\n          <mat-datepicker #picker></mat-datepicker>\n          @if (showClearButtonSignal()) {\n            <button matSuffix mat-icon-button aria-label=\"Clear date and time\" [disabled]=\"isDisabledSignal()\" (click)=\"clearValue()\">\n              <mat-icon aria-hidden=\"true\">clear</mat-icon>\n            </button>\n          }\n          @if (!showTimeInputSignal()) {\n            <span matTextSuffix>\n              <ng-container [ngTemplateOutlet]=\"tzSuffix\"></ng-container>\n            </span>\n          }\n        </mat-form-field>\n      </div>\n    }\n\n    <!-- Time Input / Add Time Button -->\n    @if (showTimeInputSignal() || showAddTimeButtonSignal()) {\n      <div class=\"dbx-forge-datetime-col\">\n        @if (showTimeInputSignal()) {\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 $index) {\n              <button mat-menu-item (click)=\"selectPreset(preset)\">{{ preset.label | getValue }}</button>\n            }\n          </mat-menu>\n          <mat-form-field [appearance]=\"appearance()\" subscriptSizing=\"dynamic\" class=\"dbx-forge-datetime-col-field\">\n            <mat-label>{{ timeLabel() }}</mat-label>\n            <input matInput [errorStateMatcher]=\"timeErrorStateMatcher\" [required]=\"isTimeRequired()\" [formControl]=\"timeCtrl\" (focus)=\"onTimeFocus()\" (focusout)=\"onTimeBlur()\" (keydown)=\"onTimeKeydown($event)\" />\n            <button matPrefix mat-icon-button [matMenuTriggerFor]=\"timemenu\" aria-label=\"Open time presets\" [disabled]=\"isTimeMenuDisabledSignal()\">\n              <mat-icon aria-hidden=\"true\">timer</mat-icon>\n            </button>\n            <span matTextSuffix>\n              <ng-container [ngTemplateOutlet]=\"tzSuffix\"></ng-container>\n            </span>\n            @if (timeCtrl.hasError('pattern')) {\n              <mat-error>The input time is not recognizable.</mat-error>\n            }\n          </mat-form-field>\n        }\n        @if (showAddTimeButtonSignal()) {\n          <div class=\"dbx-forge-add-time-wrapper\">\n            <button mat-button (click)=\"addTime()\">\n              <mat-icon>timer</mat-icon>\n              Add Time\n            </button>\n          </div>\n        }\n      </div>\n    }\n  </div>\n\n  <!-- Date Hint / Error -->\n  @if (hasErrorSignal()) {\n    @if (currentErrorMessageSignal()) {\n      <mat-error class=\"dbx-forge-datetime-error\" [id]=\"errorId()\">{{ currentErrorMessageSignal() }}</mat-error>\n    }\n  } @else if (!hideDateHint()) {\n    <div class=\"dbx-forge-datetime-hint\" [id]=\"hintId()\">\n      @if (!hasValueSignal()) {\n        <span class=\"dbx-small dbx-hint\">No date/time set</span>\n      } @else if (displayValueSignal(); as dv) {\n        @if (fullDaySignal()) {\n          <small>\n            <b class=\"dbx-ok\">{{ allDayLabel() }}</b>\n            {{ dv | date: 'fullDate' }} {{ tzAbbreviationSignal() }} ({{ dv | dateDistance }})\n          </small>\n        } @else {\n          <small>\n            <b class=\"dbx-ok\">{{ atTimeLabel() }}</b>\n            {{ dv | date: 'medium' }} {{ tzAbbreviationSignal() }} ({{ dv | timeDistance }})\n          </small>\n        }\n      }\n    </div>\n  }\n\n  <!-- Description -->\n  @if (description()) {\n    <p class=\"dbx-hint dbx-forge-datetime-desc\">{{ description() }}</p>\n  }\n</div>\n\n<!-- Timezone Suffix Template -->\n<ng-template #tzSuffix>\n  @if (showTimezone()) {\n    <span class=\"dbx-forge-datetime-timezone dbx-faint\">{{ tzAbbreviationSignal() }}</span>\n  }\n</ng-template>\n", styles: [".dbx-forge-datetime-field-wrapper{width:100%}.dbx-forge-datetime-inputs{display:flex;flex-wrap:wrap;gap:6px;align-items:flex-start;width:100%}.dbx-forge-datetime-col{flex:1 1 0%;min-width:180px}.dbx-forge-datetime-col-full{flex:1 1 100%}.dbx-forge-datetime-col-field{width:100%}.dbx-forge-field-label{font-weight:500}.dbx-forge-required-marker{color:var(--mat-sys-error, red)}.dbx-forge-datetime-desc{font-size:12px;margin-top:0}.dbx-forge-add-time-wrapper{display:flex;align-items:center;min-height:56px}.dbx-forge-datetime-timezone{padding:0 6px;pointer-events:none}.dbx-forge-datetime-hint,.dbx-forge-datetime-error{padding:0 2px}@media(max-width:599px){.dbx-forge-datetime-inputs{flex-direction:column;align-items:stretch}.dbx-forge-datetime-col{flex:1 1 auto;width:100%}}\n"], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$5.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1$5.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i1$5.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i1$5.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i1$6.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i1$6.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$7.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: "ngmodule", type: MatDividerModule }, { kind: "component", type: i10.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { 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: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "pipe", type: DateDistancePipe, name: "dateDistance" }, { kind: "pipe", type: TimeDistancePipe, name: "timeDistance" }, { kind: "pipe", type: GetValuePipe, name: "getValue" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxForgeDateTimeFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxForgeDateTimeFieldComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'dbx-forge-datetime-field', standalone: true, imports: [MatFormFieldModule, MatInputModule, MatDatepickerModule, MatButtonModule, MatIconModule, MatMenuModule, MatDividerModule, ReactiveFormsModule, FormsModule, NgTemplateOutlet, DatePipe, DateDistancePipe, TimeDistancePipe, GetValuePipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"dbx-forge-datetime-field-wrapper\">\n  <!-- Field Label -->\n  @if (fieldLabel()) {\n    <span class=\"dbx-forge-field-label\">\n      {{ fieldLabel() }}\n      @if (isRequired()) {\n        <span class=\"dbx-forge-required-marker\">*</span>\n      }\n    </span>\n  }\n\n  <!-- Date + Time row -->\n  <div class=\"dbx-forge-datetime-field dbx-forge-datetime-inputs\">\n    <!-- Date Input -->\n    @if (showDateInputSignal()) {\n      <div class=\"dbx-forge-datetime-col\" [class.dbx-forge-datetime-col-full]=\"isDateOnly()\">\n        <mat-form-field [appearance]=\"appearance()\" subscriptSizing=\"dynamic\" class=\"dbx-forge-datetime-col-field\">\n          <mat-label>{{ dateLabel() }}</mat-label>\n          <input matInput [disabled]=\"isDisabledSignal()\" [required]=\"isDateRequired()\" [min]=\"dateInputMinSignal()\" [max]=\"dateInputMaxSignal()\" [matDatepicker]=\"picker\" [matDatepickerFilter]=\"pickerFilterSignal()\" (dateChange)=\"onDatePicked($event)\" [value]=\"dateValueSignal()\" (click)=\"onDateInputClick(picker)\" (keydown)=\"onDateKeydown($event)\" [attr.aria-invalid]=\"ariaInvalid()\" [attr.aria-required]=\"ariaRequired()\" [attr.aria-describedby]=\"ariaDescribedBy()\" />\n          @if (!hideDatePicker()) {\n            <button matPrefix mat-icon-button (click)=\"picker.open()\" [disabled]=\"isDisabledSignal()\" aria-label=\"Open date picker\">\n              <mat-icon aria-hidden=\"true\">calendar_today</mat-icon>\n            </button>\n          }\n          <mat-datepicker #picker></mat-datepicker>\n          @if (showClearButtonSignal()) {\n            <button matSuffix mat-icon-button aria-label=\"Clear date and time\" [disabled]=\"isDisabledSignal()\" (click)=\"clearValue()\">\n              <mat-icon aria-hidden=\"true\">clear</mat-icon>\n            </button>\n          }\n          @if (!showTimeInputSignal()) {\n            <span matTextSuffix>\n              <ng-container [ngTemplateOutlet]=\"tzSuffix\"></ng-container>\n            </span>\n          }\n        </mat-form-field>\n      </div>\n    }\n\n    <!-- Time Input / Add Time Button -->\n    @if (showTimeInputSignal() || showAddTimeButtonSignal()) {\n      <div class=\"dbx-forge-datetime-col\">\n        @if (showTimeInputSignal()) {\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 $index) {\n              <button mat-menu-item (click)=\"selectPreset(preset)\">{{ preset.label | getValue }}</button>\n            }\n          </mat-menu>\n          <mat-form-field [appearance]=\"appearance()\" subscriptSizing=\"dynamic\" class=\"dbx-forge-datetime-col-field\">\n            <mat-label>{{ timeLabel() }}</mat-label>\n            <input matInput [errorStateMatcher]=\"timeErrorStateMatcher\" [required]=\"isTimeRequired()\" [formControl]=\"timeCtrl\" (focus)=\"onTimeFocus()\" (focusout)=\"onTimeBlur()\" (keydown)=\"onTimeKeydown($event)\" />\n            <button matPrefix mat-icon-button [matMenuTriggerFor]=\"timemenu\" aria-label=\"Open time presets\" [disabled]=\"isTimeMenuDisabledSignal()\">\n              <mat-icon aria-hidden=\"true\">timer</mat-icon>\n            </button>\n            <span matTextSuffix>\n              <ng-container [ngTemplateOutlet]=\"tzSuffix\"></ng-container>\n            </span>\n            @if (timeCtrl.hasError('pattern')) {\n              <mat-error>The input time is not recognizable.</mat-error>\n            }\n          </mat-form-field>\n        }\n        @if (showAddTimeButtonSignal()) {\n          <div class=\"dbx-forge-add-time-wrapper\">\n            <button mat-button (click)=\"addTime()\">\n              <mat-icon>timer</mat-icon>\n              Add Time\n            </button>\n          </div>\n        }\n      </div>\n    }\n  </div>\n\n  <!-- Date Hint / Error -->\n  @if (hasErrorSignal()) {\n    @if (currentErrorMessageSignal()) {\n      <mat-error class=\"dbx-forge-datetime-error\" [id]=\"errorId()\">{{ currentErrorMessageSignal() }}</mat-error>\n    }\n  } @else if (!hideDateHint()) {\n    <div class=\"dbx-forge-datetime-hint\" [id]=\"hintId()\">\n      @if (!hasValueSignal()) {\n        <span class=\"dbx-small dbx-hint\">No date/time set</span>\n      } @else if (displayValueSignal(); as dv) {\n        @if (fullDaySignal()) {\n          <small>\n            <b class=\"dbx-ok\">{{ allDayLabel() }}</b>\n            {{ dv | date: 'fullDate' }} {{ tzAbbreviationSignal() }} ({{ dv | dateDistance }})\n          </small>\n        } @else {\n          <small>\n            <b class=\"dbx-ok\">{{ atTimeLabel() }}</b>\n            {{ dv | date: 'medium' }} {{ tzAbbreviationSignal() }} ({{ dv | timeDistance }})\n          </small>\n        }\n      }\n    </div>\n  }\n\n  <!-- Description -->\n  @if (description()) {\n    <p class=\"dbx-hint dbx-forge-datetime-desc\">{{ description() }}</p>\n  }\n</div>\n\n<!-- Timezone Suffix Template -->\n<ng-template #tzSuffix>\n  @if (showTimezone()) {\n    <span class=\"dbx-forge-datetime-timezone dbx-faint\">{{ tzAbbreviationSignal() }}</span>\n  }\n</ng-template>\n", styles: [".dbx-forge-datetime-field-wrapper{width:100%}.dbx-forge-datetime-inputs{display:flex;flex-wrap:wrap;gap:6px;align-items:flex-start;width:100%}.dbx-forge-datetime-col{flex:1 1 0%;min-width:180px}.dbx-forge-datetime-col-full{flex:1 1 100%}.dbx-forge-datetime-col-field{width:100%}.dbx-forge-field-label{font-weight:500}.dbx-forge-required-marker{color:var(--mat-sys-error, red)}.dbx-forge-datetime-desc{font-size:12px;margin-top:0}.dbx-forge-add-time-wrapper{display:flex;align-items:center;min-height:56px}.dbx-forge-datetime-timezone{padding:0 6px;pointer-events:none}.dbx-forge-datetime-hint,.dbx-forge-datetime-error{padding:0 2px}@media(max-width:599px){.dbx-forge-datetime-inputs{flex-direction:column}.dbx-forge-datetime-col{flex:1 1 100%}}\n"] }]
+            args: [{ selector: 'dbx-forge-datetime-field', standalone: true, imports: [MatFormFieldModule, MatInputModule, MatDatepickerModule, MatButtonModule, MatIconModule, MatMenuModule, MatDividerModule, ReactiveFormsModule, FormsModule, NgTemplateOutlet, DatePipe, DateDistancePipe, TimeDistancePipe, GetValuePipe], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        '[class]': 'className()'
+                    }, template: "<div class=\"dbx-forge-datetime-field-wrapper\">\n  <!-- Field Label -->\n  @if (fieldLabel()) {\n    <span class=\"dbx-forge-field-label\">\n      {{ fieldLabel() }}\n      @if (isRequired()) {\n        <span class=\"dbx-forge-required-marker\">*</span>\n      }\n    </span>\n  }\n\n  <!-- Date + Time row -->\n  <div class=\"dbx-forge-datetime-field dbx-forge-datetime-inputs\">\n    <!-- Date Input -->\n    @if (showDateInputSignal()) {\n      <div class=\"dbx-forge-datetime-col\" [class.dbx-forge-datetime-col-full]=\"isDateOnly()\">\n        <mat-form-field [appearance]=\"appearance()\" subscriptSizing=\"dynamic\" class=\"dbx-forge-datetime-col-field\">\n          <mat-label>{{ dateLabel() }}</mat-label>\n          <input matInput [disabled]=\"isDisabledSignal()\" [required]=\"isDateRequired()\" [min]=\"dateInputMinSignal()\" [max]=\"dateInputMaxSignal()\" [matDatepicker]=\"picker\" [matDatepickerFilter]=\"pickerFilterSignal()\" (dateChange)=\"onDatePicked($event)\" [value]=\"dateValueSignal()\" (click)=\"onDateInputClick(picker)\" (keydown)=\"onDateKeydown($event)\" [attr.aria-invalid]=\"ariaInvalid()\" [attr.aria-required]=\"ariaRequired()\" [attr.aria-describedby]=\"ariaDescribedBy()\" />\n          @if (!hideDatePicker()) {\n            <button matPrefix mat-icon-button (click)=\"picker.open()\" [disabled]=\"isDisabledSignal()\" aria-label=\"Open date picker\">\n              <mat-icon aria-hidden=\"true\">calendar_today</mat-icon>\n            </button>\n          }\n          <mat-datepicker #picker></mat-datepicker>\n          @if (showClearButtonSignal()) {\n            <button matSuffix mat-icon-button aria-label=\"Clear date and time\" [disabled]=\"isDisabledSignal()\" (click)=\"clearValue()\">\n              <mat-icon aria-hidden=\"true\">clear</mat-icon>\n            </button>\n          }\n          @if (!showTimeInputSignal()) {\n            <span matTextSuffix>\n              <ng-container [ngTemplateOutlet]=\"tzSuffix\"></ng-container>\n            </span>\n          }\n        </mat-form-field>\n      </div>\n    }\n\n    <!-- Time Input / Add Time Button -->\n    @if (showTimeInputSignal() || showAddTimeButtonSignal()) {\n      <div class=\"dbx-forge-datetime-col\">\n        @if (showTimeInputSignal()) {\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 $index) {\n              <button mat-menu-item (click)=\"selectPreset(preset)\">{{ preset.label | getValue }}</button>\n            }\n          </mat-menu>\n          <mat-form-field [appearance]=\"appearance()\" subscriptSizing=\"dynamic\" class=\"dbx-forge-datetime-col-field\">\n            <mat-label>{{ timeLabel() }}</mat-label>\n            <input matInput [errorStateMatcher]=\"timeErrorStateMatcher\" [required]=\"isTimeRequired()\" [formControl]=\"timeCtrl\" (focus)=\"onTimeFocus()\" (focusout)=\"onTimeBlur()\" (keydown)=\"onTimeKeydown($event)\" />\n            <button matPrefix mat-icon-button [matMenuTriggerFor]=\"timemenu\" aria-label=\"Open time presets\" [disabled]=\"isTimeMenuDisabledSignal()\">\n              <mat-icon aria-hidden=\"true\">timer</mat-icon>\n            </button>\n            <span matTextSuffix>\n              <ng-container [ngTemplateOutlet]=\"tzSuffix\"></ng-container>\n            </span>\n            @if (timeCtrl.hasError('pattern')) {\n              <mat-error>The input time is not recognizable.</mat-error>\n            }\n          </mat-form-field>\n        }\n        @if (showAddTimeButtonSignal()) {\n          <div class=\"dbx-forge-add-time-wrapper\">\n            <button mat-button (click)=\"addTime()\">\n              <mat-icon>timer</mat-icon>\n              Add Time\n            </button>\n          </div>\n        }\n      </div>\n    }\n  </div>\n\n  <!-- Date Hint / Error -->\n  @if (hasErrorSignal()) {\n    @if (currentErrorMessageSignal()) {\n      <mat-error class=\"dbx-forge-datetime-error\" [id]=\"errorId()\">{{ currentErrorMessageSignal() }}</mat-error>\n    }\n  } @else if (!hideDateHint()) {\n    <div class=\"dbx-forge-datetime-hint\" [id]=\"hintId()\">\n      @if (!hasValueSignal()) {\n        <span class=\"dbx-small dbx-hint\">No date/time set</span>\n      } @else if (displayValueSignal(); as dv) {\n        @if (fullDaySignal()) {\n          <small>\n            <b class=\"dbx-ok\">{{ allDayLabel() }}</b>\n            {{ dv | date: 'fullDate' }} {{ tzAbbreviationSignal() }} ({{ dv | dateDistance }})\n          </small>\n        } @else {\n          <small>\n            <b class=\"dbx-ok\">{{ atTimeLabel() }}</b>\n            {{ dv | date: 'medium' }} {{ tzAbbreviationSignal() }} ({{ dv | timeDistance }})\n          </small>\n        }\n      }\n    </div>\n  }\n\n  <!-- Description -->\n  @if (description()) {\n    <p class=\"dbx-hint dbx-forge-datetime-desc\">{{ description() }}</p>\n  }\n</div>\n\n<!-- Timezone Suffix Template -->\n<ng-template #tzSuffix>\n  @if (showTimezone()) {\n    <span class=\"dbx-forge-datetime-timezone dbx-faint\">{{ tzAbbreviationSignal() }}</span>\n  }\n</ng-template>\n", styles: [".dbx-forge-datetime-field-wrapper{width:100%}.dbx-forge-datetime-inputs{display:flex;flex-wrap:wrap;gap:6px;align-items:flex-start;width:100%}.dbx-forge-datetime-col{flex:1 1 0%;min-width:180px}.dbx-forge-datetime-col-full{flex:1 1 100%}.dbx-forge-datetime-col-field{width:100%}.dbx-forge-field-label{font-weight:500}.dbx-forge-required-marker{color:var(--mat-sys-error, red)}.dbx-forge-datetime-desc{font-size:12px;margin-top:0}.dbx-forge-add-time-wrapper{display:flex;align-items:center;min-height:56px}.dbx-forge-datetime-timezone{padding:0 6px;pointer-events:none}.dbx-forge-datetime-hint,.dbx-forge-datetime-error{padding:0 2px}@media(max-width:599px){.dbx-forge-datetime-inputs{flex-direction:column;align-items:stretch}.dbx-forge-datetime-col{flex:1 1 auto;width:100%}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { field: [{ type: i0.Input, args: [{ isSignal: true, alias: "field", required: true }] }], key: [{ type: i0.Input, args: [{ isSignal: true, alias: "key", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], tabIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabIndex", required: false }] }], props: [{ type: i0.Input, args: [{ isSignal: true, alias: "props", required: false }] }], meta: [{ type: i0.Input, args: [{ isSignal: true, alias: "meta", required: false }] }], validationMessages: [{ type: i0.Input, args: [{ isSignal: true, alias: "validationMessages", required: false }] }], defaultValidationMessages: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultValidationMessages", required: false }] }] } });
 // MARK: Mapper
 /**
@@ -6186,19 +6427,19 @@ class DbxForgeDateRangeFieldComponent {
             result = new Date(dateValue);
             if (timeValue) {
                 const [hoursStr, minutesStr] = timeValue.split(':');
-                const hours = parseInt(hoursStr, 10);
-                const minutes = parseInt(minutesStr, 10);
-                if (!isNaN(hours) && !isNaN(minutes)) {
+                const hours = Number.parseInt(hoursStr, 10);
+                const minutes = Number.parseInt(minutesStr, 10);
+                if (!Number.isNaN(hours) && !Number.isNaN(minutes)) {
                     result.setHours(hours, minutes, 0, 0);
                 }
             }
         }
         return result;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxForgeDateRangeFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: DbxForgeDateRangeFieldComponent, isStandalone: true, selector: "dbx-forge-daterange-field", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, key: { classPropertyName: "key", publicName: "key", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: true, isRequired: false, transformFunction: null }, props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null }, meta: { classPropertyName: "meta", publicName: "meta", isSignal: true, isRequired: false, transformFunction: null }, validationMessages: { classPropertyName: "validationMessages", publicName: "validationMessages", isSignal: true, isRequired: false, transformFunction: null }, defaultValidationMessages: { classPropertyName: "defaultValidationMessages", publicName: "defaultValidationMessages", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"dbx-forge-daterange-field\">\n  <mat-form-field [appearance]=\"effectiveAppearance()\" subscriptSizing=\"dynamic\" class=\"dbx-forge-daterange-start\">\n    <mat-label>{{ startLabelSignal() }}</mat-label>\n    <input matInput [matDatepicker]=\"startPicker\" [formControl]=\"startDateCtrl\" [min]=\"minDateSignal()\" [max]=\"maxDateSignal()\" [attr.aria-invalid]=\"ariaInvalid()\" [attr.aria-required]=\"ariaRequired()\" [attr.aria-describedby]=\"ariaDescribedBy()\" />\n    <mat-datepicker-toggle matIconSuffix [for]=\"startPicker\"></mat-datepicker-toggle>\n    <mat-datepicker #startPicker></mat-datepicker>\n  </mat-form-field>\n  @if (showTimeSignal()) {\n    <mat-form-field [appearance]=\"effectiveAppearance()\" subscriptSizing=\"dynamic\" class=\"dbx-forge-daterange-start-time\">\n      <mat-label>Start Time</mat-label>\n      <input matInput type=\"time\" [formControl]=\"startTimeCtrl\" />\n    </mat-form-field>\n  }\n  <mat-form-field [appearance]=\"effectiveAppearance()\" subscriptSizing=\"dynamic\" class=\"dbx-forge-daterange-end\">\n    <mat-label>{{ endLabelSignal() }}</mat-label>\n    <input matInput [matDatepicker]=\"endPicker\" [formControl]=\"endDateCtrl\" [min]=\"minDateSignal()\" [max]=\"maxDateSignal()\" />\n    <mat-datepicker-toggle matIconSuffix [for]=\"endPicker\"></mat-datepicker-toggle>\n    <mat-datepicker #endPicker></mat-datepicker>\n  </mat-form-field>\n  @if (showTimeSignal()) {\n    <mat-form-field [appearance]=\"effectiveAppearance()\" subscriptSizing=\"dynamic\" class=\"dbx-forge-daterange-end-time\">\n      <mat-label>End Time</mat-label>\n      <input matInput type=\"time\" [formControl]=\"endTimeCtrl\" />\n    </mat-form-field>\n  }\n  @if (errorsToDisplay()[0]; as error) {\n    <mat-error [id]=\"errorId()\">{{ error.message }}</mat-error>\n  } @else if (props()?.hint; as hint) {\n    <mat-hint [id]=\"hintId()\">{{ hint | dynamicText | async }}</mat-hint>\n  }\n</div>\n", styles: [".dbx-forge-daterange-field{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-start}.dbx-forge-daterange-start,.dbx-forge-daterange-end{flex:1 1 auto;min-width:140px}.dbx-forge-daterange-start-time,.dbx-forge-daterange-end-time{flex:0 1 auto;min-width:100px}\n"], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$5.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1$5.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i1$5.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i1$5.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i1$6.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i1$6.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i1$6.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { 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.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: DynamicTextPipe, name: "dynamicText" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxForgeDateRangeFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: DbxForgeDateRangeFieldComponent, isStandalone: true, selector: "dbx-forge-daterange-field", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, key: { classPropertyName: "key", publicName: "key", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: true, isRequired: false, transformFunction: null }, props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null }, meta: { classPropertyName: "meta", publicName: "meta", isSignal: true, isRequired: false, transformFunction: null }, validationMessages: { classPropertyName: "validationMessages", publicName: "validationMessages", isSignal: true, isRequired: false, transformFunction: null }, defaultValidationMessages: { classPropertyName: "defaultValidationMessages", publicName: "defaultValidationMessages", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"dbx-forge-daterange-field\">\n  <mat-form-field [appearance]=\"effectiveAppearance()\" subscriptSizing=\"dynamic\" class=\"dbx-forge-daterange-start\">\n    <mat-label>{{ startLabelSignal() }}</mat-label>\n    <input matInput [matDatepicker]=\"startPicker\" [formControl]=\"startDateCtrl\" [min]=\"minDateSignal()\" [max]=\"maxDateSignal()\" [attr.aria-invalid]=\"ariaInvalid()\" [attr.aria-required]=\"ariaRequired()\" [attr.aria-describedby]=\"ariaDescribedBy()\" />\n    <mat-datepicker-toggle matIconSuffix [for]=\"startPicker\"></mat-datepicker-toggle>\n    <mat-datepicker #startPicker></mat-datepicker>\n  </mat-form-field>\n  @if (showTimeSignal()) {\n    <mat-form-field [appearance]=\"effectiveAppearance()\" subscriptSizing=\"dynamic\" class=\"dbx-forge-daterange-start-time\">\n      <mat-label>Start Time</mat-label>\n      <input matInput type=\"time\" [formControl]=\"startTimeCtrl\" />\n    </mat-form-field>\n  }\n  <mat-form-field [appearance]=\"effectiveAppearance()\" subscriptSizing=\"dynamic\" class=\"dbx-forge-daterange-end\">\n    <mat-label>{{ endLabelSignal() }}</mat-label>\n    <input matInput [matDatepicker]=\"endPicker\" [formControl]=\"endDateCtrl\" [min]=\"minDateSignal()\" [max]=\"maxDateSignal()\" />\n    <mat-datepicker-toggle matIconSuffix [for]=\"endPicker\"></mat-datepicker-toggle>\n    <mat-datepicker #endPicker></mat-datepicker>\n  </mat-form-field>\n  @if (showTimeSignal()) {\n    <mat-form-field [appearance]=\"effectiveAppearance()\" subscriptSizing=\"dynamic\" class=\"dbx-forge-daterange-end-time\">\n      <mat-label>End Time</mat-label>\n      <input matInput type=\"time\" [formControl]=\"endTimeCtrl\" />\n    </mat-form-field>\n  }\n  @if (errorsToDisplay()[0]; as error) {\n    <mat-error [id]=\"errorId()\">{{ error.message }}</mat-error>\n  } @else if (props()?.hint; as hint) {\n    <mat-hint [id]=\"hintId()\">{{ hint | dynamicText | async }}</mat-hint>\n  }\n</div>\n", styles: [".dbx-forge-daterange-field{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-start}.dbx-forge-daterange-start,.dbx-forge-daterange-end{flex:1 1 auto;min-width:140px}.dbx-forge-daterange-start-time,.dbx-forge-daterange-end-time{flex:0 1 auto;min-width:100px}\n"], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$5.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1$5.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i1$5.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i1$5.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i1$6.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i1$6.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i1$6.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { 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.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: DynamicTextPipe, name: "dynamicText" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxForgeDateRangeFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxForgeDateRangeFieldComponent, decorators: [{
             type: Component,
             args: [{ selector: 'dbx-forge-daterange-field', standalone: true, imports: [MatFormFieldModule, MatInputModule, MatDatepickerModule, MatButtonModule, MatIconModule, ReactiveFormsModule, DynamicTextPipe, AsyncPipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"dbx-forge-daterange-field\">\n  <mat-form-field [appearance]=\"effectiveAppearance()\" subscriptSizing=\"dynamic\" class=\"dbx-forge-daterange-start\">\n    <mat-label>{{ startLabelSignal() }}</mat-label>\n    <input matInput [matDatepicker]=\"startPicker\" [formControl]=\"startDateCtrl\" [min]=\"minDateSignal()\" [max]=\"maxDateSignal()\" [attr.aria-invalid]=\"ariaInvalid()\" [attr.aria-required]=\"ariaRequired()\" [attr.aria-describedby]=\"ariaDescribedBy()\" />\n    <mat-datepicker-toggle matIconSuffix [for]=\"startPicker\"></mat-datepicker-toggle>\n    <mat-datepicker #startPicker></mat-datepicker>\n  </mat-form-field>\n  @if (showTimeSignal()) {\n    <mat-form-field [appearance]=\"effectiveAppearance()\" subscriptSizing=\"dynamic\" class=\"dbx-forge-daterange-start-time\">\n      <mat-label>Start Time</mat-label>\n      <input matInput type=\"time\" [formControl]=\"startTimeCtrl\" />\n    </mat-form-field>\n  }\n  <mat-form-field [appearance]=\"effectiveAppearance()\" subscriptSizing=\"dynamic\" class=\"dbx-forge-daterange-end\">\n    <mat-label>{{ endLabelSignal() }}</mat-label>\n    <input matInput [matDatepicker]=\"endPicker\" [formControl]=\"endDateCtrl\" [min]=\"minDateSignal()\" [max]=\"maxDateSignal()\" />\n    <mat-datepicker-toggle matIconSuffix [for]=\"endPicker\"></mat-datepicker-toggle>\n    <mat-datepicker #endPicker></mat-datepicker>\n  </mat-form-field>\n  @if (showTimeSignal()) {\n    <mat-form-field [appearance]=\"effectiveAppearance()\" subscriptSizing=\"dynamic\" class=\"dbx-forge-daterange-end-time\">\n      <mat-label>End Time</mat-label>\n      <input matInput type=\"time\" [formControl]=\"endTimeCtrl\" />\n    </mat-form-field>\n  }\n  @if (errorsToDisplay()[0]; as error) {\n    <mat-error [id]=\"errorId()\">{{ error.message }}</mat-error>\n  } @else if (props()?.hint; as hint) {\n    <mat-hint [id]=\"hintId()\">{{ hint | dynamicText | async }}</mat-hint>\n  }\n</div>\n", styles: [".dbx-forge-daterange-field{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-start}.dbx-forge-daterange-start,.dbx-forge-daterange-end{flex:1 1 auto;min-width:140px}.dbx-forge-daterange-start-time,.dbx-forge-daterange-end-time{flex:0 1 auto;min-width:100px}\n"] }]
         }], ctorParameters: () => [], propDecorators: { field: [{ type: i0.Input, args: [{ isSignal: true, alias: "field", required: true }] }], key: [{ type: i0.Input, args: [{ isSignal: true, alias: "key", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], tabIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabIndex", required: false }] }], props: [{ type: i0.Input, args: [{ isSignal: true, alias: "props", required: false }] }], meta: [{ type: i0.Input, args: [{ isSignal: true, alias: "meta", required: false }] }], validationMessages: [{ type: i0.Input, args: [{ isSignal: true, alias: "validationMessages", required: false }] }], defaultValidationMessages: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultValidationMessages", required: false }] }] } });
@@ -6720,15 +6961,15 @@ class DbxForgeFixedDateRangeFieldComponent {
             // Field may not be ready
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxForgeFixedDateRangeFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: DbxForgeFixedDateRangeFieldComponent, isStandalone: true, selector: "dbx-forge-fixeddaterange-field", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, key: { classPropertyName: "key", publicName: "key", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: true, isRequired: false, transformFunction: null }, props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null }, meta: { classPropertyName: "meta", publicName: "meta", isSignal: true, isRequired: false, transformFunction: null }, validationMessages: { classPropertyName: "validationMessages", publicName: "validationMessages", isSignal: true, isRequired: false, transformFunction: null }, defaultValidationMessages: { classPropertyName: "defaultValidationMessages", publicName: "defaultValidationMessages", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxForgeFixedDateRangeFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: DbxForgeFixedDateRangeFieldComponent, isStandalone: true, selector: "dbx-forge-fixeddaterange-field", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, key: { classPropertyName: "key", publicName: "key", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: true, isRequired: false, transformFunction: null }, props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null }, meta: { classPropertyName: "meta", publicName: "meta", isSignal: true, isRequired: false, transformFunction: null }, validationMessages: { classPropertyName: "validationMessages", publicName: "validationMessages", isSignal: true, isRequired: false, transformFunction: null }, defaultValidationMessages: { classPropertyName: "defaultValidationMessages", publicName: "defaultValidationMessages", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
             {
                 provide: MAT_DATE_RANGE_SELECTION_STRATEGY,
                 useClass: forwardRef(() => DbxForgeFixedDateRangeFieldSelectionStrategy)
             }
         ], 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 }], ngImport: i0, template: "<div class=\"dbx-fixeddaterange-field\">\n  <mat-calendar #calendarView [selected]=\"calendarSelectionSignal()\" [dateFilter]=\"pickerFilterSignal()\" [minDate]=\"minDateSignal()\" [maxDate]=\"maxDateSignal()\" (selectedChange)=\"selectedChange($event)\" [attr.aria-invalid]=\"ariaInvalid()\" [attr.aria-describedby]=\"ariaDescribedBy()\"></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 (errorsToDisplay()[0]; as error) {\n    <mat-error [id]=\"errorId()\">{{ error.message }}</mat-error>\n  } @else if (props()?.hint; as hint) {\n    <mat-hint [id]=\"hintId()\">{{ hint }}</mat-hint>\n  }\n</div>\n", dependencies: [{ kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i1$6.MatCalendar, selector: "mat-calendar", inputs: ["headerComponent", "startAt", "startView", "selected", "minDate", "maxDate", "dateFilter", "dateClass", "comparisonStart", "comparisonEnd", "startDateAccessibleName", "endDateAccessibleName"], outputs: ["selectedChange", "yearSelected", "monthSelected", "viewChanged", "_userSelection", "_userDragDrop"], exportAs: ["matCalendar"] }, { kind: "component", type: i1$6.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { kind: "directive", type: i1$6.MatStartDate, selector: "input[matStartDate]", outputs: ["dateChange", "dateInput"] }, { kind: "directive", type: i1$6.MatEndDate, selector: "input[matEndDate]", outputs: ["dateChange", "dateInput"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$5.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i1$5.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { 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],[formArray],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: MatInputModule }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxForgeFixedDateRangeFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxForgeFixedDateRangeFieldComponent, decorators: [{
             type: Component,
             args: [{ selector: 'dbx-forge-fixeddaterange-field', standalone: true, imports: [MatDatepickerModule, MatFormFieldModule, ReactiveFormsModule, MatInputModule, MatError, NgClass], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         {
@@ -6786,10 +7027,10 @@ class DbxForgeFixedDateRangeFieldSelectionStrategy {
         const year = date.getFullYear();
         return this._dateAdapter.createDate(year, monthIndex, day);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxForgeFixedDateRangeFieldSelectionStrategy, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxForgeFixedDateRangeFieldSelectionStrategy });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxForgeFixedDateRangeFieldSelectionStrategy, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxForgeFixedDateRangeFieldSelectionStrategy });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxForgeFixedDateRangeFieldSelectionStrategy, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxForgeFixedDateRangeFieldSelectionStrategy, decorators: [{
             type: Injectable
         }] });
 // MARK: Mapper
@@ -7106,10 +7347,10 @@ class DbxDurationPickerPopoverComponent extends AbstractPopoverDirective {
         }
         return false;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxDurationPickerPopoverComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: DbxDurationPickerPopoverComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<div class=\"dbx-duration-picker\">\n  @for (unit of units; track unit) {\n    <div class=\"dbx-duration-picker-column\">\n      <span class=\"dbx-duration-picker-label\">{{ unitLabel(unit) }}</span>\n      <button mat-icon-button type=\"button\" (mousedown)=\"onHoldStart('increment', unit, $event)\" (mouseup)=\"stopHold()\" (mouseleave)=\"stopHold()\" (keydown.arrowup)=\"onHoldStart('increment', unit, $event)\" (keydown.arrowdown)=\"onHoldStart('decrement', unit, $event)\" (keyup)=\"onKeyUp($event)\" [disabled]=\"!canIncrement(unit)\" aria-label=\"Increase\">\n        <mat-icon>add</mat-icon>\n      </button>\n      <span class=\"dbx-duration-picker-value\">{{ getValue(unit) }}</span>\n      <button mat-icon-button type=\"button\" (mousedown)=\"onHoldStart('decrement', unit, $event)\" (mouseup)=\"stopHold()\" (mouseleave)=\"stopHold()\" (keydown.arrowup)=\"onHoldStart('increment', unit, $event)\" (keydown.arrowdown)=\"onHoldStart('decrement', unit, $event)\" (keyup)=\"onKeyUp($event)\" [disabled]=\"!canDecrement(unit)\" aria-label=\"Decrease\">\n        <mat-icon>remove</mat-icon>\n      </button>\n    </div>\n  }\n</div>\n", dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxDurationPickerPopoverComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: DbxDurationPickerPopoverComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<div class=\"dbx-duration-picker\">\n  @for (unit of units; track unit) {\n    <div class=\"dbx-duration-picker-column\">\n      <span class=\"dbx-duration-picker-label\">{{ unitLabel(unit) }}</span>\n      <button mat-icon-button type=\"button\" (mousedown)=\"onHoldStart('increment', unit, $event)\" (mouseup)=\"stopHold()\" (mouseleave)=\"stopHold()\" (keydown.arrowup)=\"onHoldStart('increment', unit, $event)\" (keydown.arrowdown)=\"onHoldStart('decrement', unit, $event)\" (keyup)=\"onKeyUp($event)\" [disabled]=\"!canIncrement(unit)\" aria-label=\"Increase\">\n        <mat-icon>add</mat-icon>\n      </button>\n      <span class=\"dbx-duration-picker-value\">{{ getValue(unit) }}</span>\n      <button mat-icon-button type=\"button\" (mousedown)=\"onHoldStart('decrement', unit, $event)\" (mouseup)=\"stopHold()\" (mouseleave)=\"stopHold()\" (keydown.arrowup)=\"onHoldStart('increment', unit, $event)\" (keydown.arrowdown)=\"onHoldStart('decrement', unit, $event)\" (keyup)=\"onKeyUp($event)\" [disabled]=\"!canDecrement(unit)\" aria-label=\"Decrease\">\n        <mat-icon>remove</mat-icon>\n      </button>\n    </div>\n  }\n</div>\n", dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxDurationPickerPopoverComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxDurationPickerPopoverComponent, decorators: [{
             type: Component,
             args: [{ imports: [MatIconModule, MatButtonModule], changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "<div class=\"dbx-duration-picker\">\n  @for (unit of units; track unit) {\n    <div class=\"dbx-duration-picker-column\">\n      <span class=\"dbx-duration-picker-label\">{{ unitLabel(unit) }}</span>\n      <button mat-icon-button type=\"button\" (mousedown)=\"onHoldStart('increment', unit, $event)\" (mouseup)=\"stopHold()\" (mouseleave)=\"stopHold()\" (keydown.arrowup)=\"onHoldStart('increment', unit, $event)\" (keydown.arrowdown)=\"onHoldStart('decrement', unit, $event)\" (keyup)=\"onKeyUp($event)\" [disabled]=\"!canIncrement(unit)\" aria-label=\"Increase\">\n        <mat-icon>add</mat-icon>\n      </button>\n      <span class=\"dbx-duration-picker-value\">{{ getValue(unit) }}</span>\n      <button mat-icon-button type=\"button\" (mousedown)=\"onHoldStart('decrement', unit, $event)\" (mouseup)=\"stopHold()\" (mouseleave)=\"stopHold()\" (keydown.arrowup)=\"onHoldStart('increment', unit, $event)\" (keydown.arrowdown)=\"onHoldStart('decrement', unit, $event)\" (keyup)=\"onKeyUp($event)\" [disabled]=\"!canDecrement(unit)\" aria-label=\"Decrease\">\n        <mat-icon>remove</mat-icon>\n      </button>\n    </div>\n  }\n</div>\n" }]
         }], ctorParameters: () => [] });
@@ -7341,10 +7582,10 @@ class DbxForgeTimeDurationFieldComponent {
         }
         return result;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxForgeTimeDurationFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: DbxForgeTimeDurationFieldComponent, isStandalone: true, selector: "dbx-forge-timeduration-field", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, key: { classPropertyName: "key", publicName: "key", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: true, isRequired: false, transformFunction: null }, props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null }, meta: { classPropertyName: "meta", publicName: "meta", isSignal: true, isRequired: false, transformFunction: null }, validationMessages: { classPropertyName: "validationMessages", publicName: "validationMessages", isSignal: true, isRequired: false, transformFunction: null }, defaultValidationMessages: { classPropertyName: "defaultValidationMessages", publicName: "defaultValidationMessages", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "pickerButtonElement", first: true, predicate: ["pickerButton"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "<mat-form-field [appearance]=\"effectiveAppearance()\" subscriptSizing=\"dynamic\" class=\"dbx-forge-timeduration-field\">\n  @if (label()) {\n    <mat-label>{{ label() | dynamicText | async }}</mat-label>\n  }\n  <input matInput type=\"text\" [formControl]=\"textCtrl\" (blur)=\"onTextBlur()\" (keydown.enter)=\"onTextEnter($event)\" placeholder=\"e.g. 2h30m\" [attr.aria-invalid]=\"ariaInvalid()\" [attr.aria-required]=\"ariaRequired()\" [attr.aria-describedby]=\"ariaDescribedBy()\" />\n  <button mat-icon-button matSuffix type=\"button\" #pickerButton (click)=\"openPicker()\" [disabled]=\"isDisabled()\" aria-label=\"Open duration picker\">\n    <mat-icon>schedule</mat-icon>\n  </button>\n  @if (errorsToDisplay()[0]; as error) {\n    <mat-error [id]=\"errorId()\">{{ error.message }}</mat-error>\n  } @else if (props()?.hint; as hint) {\n    <mat-hint [id]=\"hintId()\">{{ hint | dynamicText | async }}</mat-hint>\n  }\n</mat-form-field>\n", dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$5.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1$5.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i1$5.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i1$5.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$7.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: "pipe", type: DynamicTextPipe, name: "dynamicText" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxForgeTimeDurationFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: DbxForgeTimeDurationFieldComponent, isStandalone: true, selector: "dbx-forge-timeduration-field", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, key: { classPropertyName: "key", publicName: "key", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: true, isRequired: false, transformFunction: null }, props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null }, meta: { classPropertyName: "meta", publicName: "meta", isSignal: true, isRequired: false, transformFunction: null }, validationMessages: { classPropertyName: "validationMessages", publicName: "validationMessages", isSignal: true, isRequired: false, transformFunction: null }, defaultValidationMessages: { classPropertyName: "defaultValidationMessages", publicName: "defaultValidationMessages", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "pickerButtonElement", first: true, predicate: ["pickerButton"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "<mat-form-field [appearance]=\"effectiveAppearance()\" subscriptSizing=\"dynamic\" class=\"dbx-forge-timeduration-field\">\n  @if (label()) {\n    <mat-label>{{ label() | dynamicText | async }}</mat-label>\n  }\n  <input matInput type=\"text\" [formControl]=\"textCtrl\" (blur)=\"onTextBlur()\" (keydown.enter)=\"onTextEnter($event)\" placeholder=\"e.g. 2h30m\" [attr.aria-invalid]=\"ariaInvalid()\" [attr.aria-required]=\"ariaRequired()\" [attr.aria-describedby]=\"ariaDescribedBy()\" />\n  <button mat-icon-button matSuffix type=\"button\" #pickerButton (click)=\"openPicker()\" [disabled]=\"isDisabled()\" aria-label=\"Open duration picker\">\n    <mat-icon>schedule</mat-icon>\n  </button>\n  @if (errorsToDisplay()[0]; as error) {\n    <mat-error [id]=\"errorId()\">{{ error.message }}</mat-error>\n  } @else if (props()?.hint; as hint) {\n    <mat-hint [id]=\"hintId()\">{{ hint | dynamicText | async }}</mat-hint>\n  }\n</mat-form-field>\n", dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$5.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1$5.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i1$5.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i1$5.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$7.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: "pipe", type: DynamicTextPipe, name: "dynamicText" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxForgeTimeDurationFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxForgeTimeDurationFieldComponent, decorators: [{
             type: Component,
             args: [{ selector: 'dbx-forge-timeduration-field', standalone: true, imports: [MatFormFieldModule, MatInputModule, MatButtonModule, MatIconModule, FormsModule, ReactiveFormsModule, DynamicTextPipe, AsyncPipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-form-field [appearance]=\"effectiveAppearance()\" subscriptSizing=\"dynamic\" class=\"dbx-forge-timeduration-field\">\n  @if (label()) {\n    <mat-label>{{ label() | dynamicText | async }}</mat-label>\n  }\n  <input matInput type=\"text\" [formControl]=\"textCtrl\" (blur)=\"onTextBlur()\" (keydown.enter)=\"onTextEnter($event)\" placeholder=\"e.g. 2h30m\" [attr.aria-invalid]=\"ariaInvalid()\" [attr.aria-required]=\"ariaRequired()\" [attr.aria-describedby]=\"ariaDescribedBy()\" />\n  <button mat-icon-button matSuffix type=\"button\" #pickerButton (click)=\"openPicker()\" [disabled]=\"isDisabled()\" aria-label=\"Open duration picker\">\n    <mat-icon>schedule</mat-icon>\n  </button>\n  @if (errorsToDisplay()[0]; as error) {\n    <mat-error [id]=\"errorId()\">{{ error.message }}</mat-error>\n  } @else if (props()?.hint; as hint) {\n    <mat-hint [id]=\"hintId()\">{{ hint | dynamicText | async }}</mat-hint>\n  }\n</mat-form-field>\n" }]
         }], ctorParameters: () => [], propDecorators: { field: [{ type: i0.Input, args: [{ isSignal: true, alias: "field", required: true }] }], key: [{ type: i0.Input, args: [{ isSignal: true, alias: "key", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], tabIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabIndex", required: false }] }], props: [{ type: i0.Input, args: [{ isSignal: true, alias: "props", required: false }] }], meta: [{ type: i0.Input, args: [{ isSignal: true, alias: "meta", required: false }] }], validationMessages: [{ type: i0.Input, args: [{ isSignal: true, alias: "validationMessages", required: false }] }], defaultValidationMessages: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultValidationMessages", required: false }] }], pickerButtonElement: [{ type: i0.ViewChild, args: ['pickerButton', { ...{ read: ElementRef }, isSignal: true }] }] } });
@@ -7722,10 +7963,10 @@ class DbxForgePhoneFieldComponent {
         }
         this._syncing = false;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxForgePhoneFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: DbxForgePhoneFieldComponent, isStandalone: true, selector: "dbx-forge-phone-field", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, key: { classPropertyName: "key", publicName: "key", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: true, isRequired: false, transformFunction: null }, props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null }, meta: { classPropertyName: "meta", publicName: "meta", isSignal: true, isRequired: false, transformFunction: null }, validationMessages: { classPropertyName: "validationMessages", publicName: "validationMessages", isSignal: true, isRequired: false, transformFunction: null }, defaultValidationMessages: { classPropertyName: "defaultValidationMessages", publicName: "defaultValidationMessages", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<mat-form-field [appearance]=\"effectiveAppearance()\" subscriptSizing=\"dynamic\">\n  @if (label()) {\n    <mat-label>{{ label() | dynamicText | async }}</mat-label>\n  }\n  <div class=\"dbx-form-phone-field\">\n    <ngx-mat-input-tel name=\"phone\" class=\"dbx-form-phone-field-phone-content\" [formControl]=\"phoneCtrl\" [autocomplete]=\"effectiveAutocomplete()\" [enableSearch]=\"enableSearch()\" [preferredCountries]=\"preferredCountries()\" [onlyCountries]=\"onlyCountries()\" [enablePlaceholder]=\"false\" [placeholder]=\"(placeholder() | dynamicText | async) ?? ''\" [attr.aria-invalid]=\"ariaInvalid()\" [attr.aria-required]=\"ariaRequired()\" [attr.aria-describedby]=\"ariaDescribedBy()\"></ngx-mat-input-tel>\n    @if (allowExtension()) {\n      <div class=\"dbx-form-phone-field-extension-content\">\n        <span class=\"dbx-hint dbx-button-spacer\">Ext.</span>\n        <input name=\"phone-extension\" class=\"dbx-form-phone-field-extension-input\" placeholder=\"123\" minlength=\"0\" maxlength=\"6\" [formControl]=\"extensionCtrl\" aria-label=\"Phone extension\" />\n      </div>\n    }\n  </div>\n  @if (errorsToDisplay()[0]; as error) {\n    <mat-error [id]=\"errorId()\">{{ error.message }}</mat-error>\n  } @else if (props()?.hint; as hint) {\n    <mat-hint [id]=\"hintId()\">{{ hint | dynamicText | async }}</mat-hint>\n  }\n</mat-form-field>\n", styles: [":host{display:block;width:100%}:host mat-form-field{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$5.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1$5.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i1$5.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { 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.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: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: NgxMatInputTelComponent, selector: "ngx-mat-input-tel", inputs: ["autocomplete", "ariaLabel", "cssClass", "defaultCountry", "errorStateMatcher", "maxLength", "name", "placeholder", "countriesName", "preferredCountries", "onlyCountries", "searchPlaceholder", "validation", "enablePlaceholder", "enableSearch", "resetOnChange", "separateDialCode", "hideAreaCodes", "format", "required", "disabled"], outputs: ["countryChanged"] }, { kind: "pipe", type: DynamicTextPipe, name: "dynamicText" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxForgePhoneFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: DbxForgePhoneFieldComponent, isStandalone: true, selector: "dbx-forge-phone-field", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, key: { classPropertyName: "key", publicName: "key", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: true, isRequired: false, transformFunction: null }, props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null }, meta: { classPropertyName: "meta", publicName: "meta", isSignal: true, isRequired: false, transformFunction: null }, validationMessages: { classPropertyName: "validationMessages", publicName: "validationMessages", isSignal: true, isRequired: false, transformFunction: null }, defaultValidationMessages: { classPropertyName: "defaultValidationMessages", publicName: "defaultValidationMessages", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<mat-form-field [appearance]=\"effectiveAppearance()\" subscriptSizing=\"dynamic\">\n  @if (label()) {\n    <mat-label>{{ label() | dynamicText | async }}</mat-label>\n  }\n  <div class=\"dbx-form-phone-field\">\n    <ngx-mat-input-tel name=\"phone\" class=\"dbx-form-phone-field-phone-content\" [formControl]=\"phoneCtrl\" [autocomplete]=\"effectiveAutocomplete()\" [enableSearch]=\"enableSearch()\" [preferredCountries]=\"preferredCountries()\" [onlyCountries]=\"onlyCountries()\" [enablePlaceholder]=\"false\" [placeholder]=\"(placeholder() | dynamicText | async) ?? ''\" [attr.aria-invalid]=\"ariaInvalid()\" [attr.aria-required]=\"ariaRequired()\" [attr.aria-describedby]=\"ariaDescribedBy()\"></ngx-mat-input-tel>\n    @if (allowExtension()) {\n      <div class=\"dbx-form-phone-field-extension-content\">\n        <span class=\"dbx-hint dbx-button-spacer\">Ext.</span>\n        <input name=\"phone-extension\" class=\"dbx-form-phone-field-extension-input\" placeholder=\"123\" minlength=\"0\" maxlength=\"6\" [formControl]=\"extensionCtrl\" aria-label=\"Phone extension\" />\n      </div>\n    }\n  </div>\n  @if (errorsToDisplay()[0]; as error) {\n    <mat-error [id]=\"errorId()\">{{ error.message }}</mat-error>\n  } @else if (props()?.hint; as hint) {\n    <mat-hint [id]=\"hintId()\">{{ hint | dynamicText | async }}</mat-hint>\n  }\n</mat-form-field>\n", styles: [":host{display:block;width:100%}:host mat-form-field{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$5.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1$5.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i1$5.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { 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.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: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: NgxMatInputTelComponent, selector: "ngx-mat-input-tel", inputs: ["autocomplete", "ariaLabel", "cssClass", "defaultCountry", "errorStateMatcher", "maxLength", "name", "placeholder", "countriesName", "preferredCountries", "onlyCountries", "searchPlaceholder", "validation", "enablePlaceholder", "enableSearch", "resetOnChange", "separateDialCode", "hideAreaCodes", "format", "required", "disabled"], outputs: ["countryChanged"] }, { kind: "pipe", type: DynamicTextPipe, name: "dynamicText" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxForgePhoneFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxForgePhoneFieldComponent, decorators: [{
             type: Component,
             args: [{ selector: 'dbx-forge-phone-field', standalone: true, imports: [MatFormFieldModule, MatInputModule, ReactiveFormsModule, NgxMatInputTelComponent, DynamicTextPipe, AsyncPipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-form-field [appearance]=\"effectiveAppearance()\" subscriptSizing=\"dynamic\">\n  @if (label()) {\n    <mat-label>{{ label() | dynamicText | async }}</mat-label>\n  }\n  <div class=\"dbx-form-phone-field\">\n    <ngx-mat-input-tel name=\"phone\" class=\"dbx-form-phone-field-phone-content\" [formControl]=\"phoneCtrl\" [autocomplete]=\"effectiveAutocomplete()\" [enableSearch]=\"enableSearch()\" [preferredCountries]=\"preferredCountries()\" [onlyCountries]=\"onlyCountries()\" [enablePlaceholder]=\"false\" [placeholder]=\"(placeholder() | dynamicText | async) ?? ''\" [attr.aria-invalid]=\"ariaInvalid()\" [attr.aria-required]=\"ariaRequired()\" [attr.aria-describedby]=\"ariaDescribedBy()\"></ngx-mat-input-tel>\n    @if (allowExtension()) {\n      <div class=\"dbx-form-phone-field-extension-content\">\n        <span class=\"dbx-hint dbx-button-spacer\">Ext.</span>\n        <input name=\"phone-extension\" class=\"dbx-form-phone-field-extension-input\" placeholder=\"123\" minlength=\"0\" maxlength=\"6\" [formControl]=\"extensionCtrl\" aria-label=\"Phone extension\" />\n      </div>\n    }\n  </div>\n  @if (errorsToDisplay()[0]; as error) {\n    <mat-error [id]=\"errorId()\">{{ error.message }}</mat-error>\n  } @else if (props()?.hint; as hint) {\n    <mat-hint [id]=\"hintId()\">{{ hint | dynamicText | async }}</mat-hint>\n  }\n</mat-form-field>\n", styles: [":host{display:block;width:100%}:host mat-form-field{width:100%}\n"] }]
         }], ctorParameters: () => [], propDecorators: { field: [{ type: i0.Input, args: [{ isSignal: true, alias: "field", required: true }] }], key: [{ type: i0.Input, args: [{ isSignal: true, alias: "key", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], tabIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabIndex", required: false }] }], props: [{ type: i0.Input, args: [{ isSignal: true, alias: "props", required: false }] }], meta: [{ type: i0.Input, args: [{ isSignal: true, alias: "meta", required: false }] }], validationMessages: [{ type: i0.Input, args: [{ isSignal: true, alias: "validationMessages", required: false }] }], defaultValidationMessages: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultValidationMessages", required: false }] }] } });
@@ -7850,10 +8091,10 @@ class DbxForgeValueSelectionFieldComponent {
     constructor() {
         setupMetaTracking(this.elementRef, this.meta, { selector: 'mat-select' });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxForgeValueSelectionFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: DbxForgeValueSelectionFieldComponent, isStandalone: true, selector: "dbx-forge-value-selection-field", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, key: { classPropertyName: "key", publicName: "key", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: true, isRequired: false, transformFunction: null }, props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null }, meta: { classPropertyName: "meta", publicName: "meta", isSignal: true, isRequired: false, transformFunction: null }, validationMessages: { classPropertyName: "validationMessages", publicName: "validationMessages", isSignal: true, isRequired: false, transformFunction: null }, defaultValidationMessages: { classPropertyName: "defaultValidationMessages", publicName: "defaultValidationMessages", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "id": "`${key()}`", "attr.data-testid": "key()", "class": "className()", "attr.hidden": "field()().hidden() || null" } }, ngImport: i0, template: "@let f = field();\n@let selectId = key() + '-select';\n\n<mat-form-field class=\"dbx-w100\" [appearance]=\"effectiveAppearance()\" [subscriptSizing]=\"effectiveSubscriptSizing()\">\n  @if (label(); as label) {\n    <mat-label>{{ label | dynamicText | async }}</mat-label>\n  }\n\n  <mat-select [id]=\"selectId\" [formField]=\"f\" [placeholder]=\"(placeholder() | dynamicText | async) ?? ''\" [multiple]=\"multipleSignal()\" [compareWith]=\"compareWithSignal()\" [attr.aria-invalid]=\"ariaInvalid()\" [attr.aria-required]=\"ariaRequired()\" [attr.aria-describedby]=\"ariaDescribedBy()\">\n    @for (option of resolvedOptionsSignal(); track $index) {\n      <mat-option [value]=\"option.value\" [disabled]=\"option.disabled ?? false\">{{ option.label }}</mat-option>\n    }\n  </mat-select>\n\n  @if (errorsToDisplay()[0]; as error) {\n    <mat-error [id]=\"errorId()\">{{ error.message }}</mat-error>\n  } @else if (props()?.hint; as hint) {\n    <mat-hint [id]=\"hintId()\">{{ hint | dynamicText | async }}</mat-hint>\n  }\n</mat-form-field>\n", dependencies: [{ kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { 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", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: FormField, selector: "[formField]", inputs: ["formField"], exportAs: ["formField"] }, { kind: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "pipe", type: DynamicTextPipe, name: "dynamicText" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxForgeValueSelectionFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: DbxForgeValueSelectionFieldComponent, isStandalone: true, selector: "dbx-forge-value-selection-field", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, key: { classPropertyName: "key", publicName: "key", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: true, isRequired: false, transformFunction: null }, props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null }, meta: { classPropertyName: "meta", publicName: "meta", isSignal: true, isRequired: false, transformFunction: null }, validationMessages: { classPropertyName: "validationMessages", publicName: "validationMessages", isSignal: true, isRequired: false, transformFunction: null }, defaultValidationMessages: { classPropertyName: "defaultValidationMessages", publicName: "defaultValidationMessages", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "id": "`${key()}`", "attr.data-testid": "key()", "class": "className()", "attr.hidden": "field()().hidden() || null" } }, ngImport: i0, template: "@let f = field();\n@let selectId = key() + '-select';\n\n<mat-form-field class=\"dbx-w100\" [appearance]=\"effectiveAppearance()\" [subscriptSizing]=\"effectiveSubscriptSizing()\">\n  @if (label(); as label) {\n    <mat-label>{{ label | dynamicText | async }}</mat-label>\n  }\n\n  <mat-select [id]=\"selectId\" [formField]=\"f\" [placeholder]=\"(placeholder() | dynamicText | async) ?? ''\" [multiple]=\"multipleSignal()\" [compareWith]=\"compareWithSignal()\" [attr.aria-invalid]=\"ariaInvalid()\" [attr.aria-required]=\"ariaRequired()\" [attr.aria-describedby]=\"ariaDescribedBy()\">\n    @for (option of resolvedOptionsSignal(); track $index) {\n      <mat-option [value]=\"option.value\" [disabled]=\"option.disabled ?? false\">{{ option.label }}</mat-option>\n    }\n  </mat-select>\n\n  @if (errorsToDisplay()[0]; as error) {\n    <mat-error [id]=\"errorId()\">{{ error.message }}</mat-error>\n  } @else if (props()?.hint; as hint) {\n    <mat-hint [id]=\"hintId()\">{{ hint | dynamicText | async }}</mat-hint>\n  }\n</mat-form-field>\n", dependencies: [{ kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { 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", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: FormField, selector: "[formField]", inputs: ["formField"], exportAs: ["formField"] }, { kind: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "pipe", type: DynamicTextPipe, name: "dynamicText" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxForgeValueSelectionFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxForgeValueSelectionFieldComponent, decorators: [{
             type: Component,
             args: [{ selector: 'dbx-forge-value-selection-field', imports: [MatFormField, MatLabel, MatSelect, MatOption, MatHint, FormField, MatError, DynamicTextPipe, AsyncPipe], changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, host: {
                         '[id]': '`${key()}`',
@@ -7931,14 +8172,14 @@ class DbxSearchableFieldAutocompleteItemComponent {
         return config;
     }, ...(ngDevMode ? [{ debugName: "configSignal" }] : /* istanbul ignore next */ []));
     anchorSignal = computed(() => this.displayValue().anchor, ...(ngDevMode ? [{ debugName: "anchorSignal" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxSearchableFieldAutocompleteItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.4", type: DbxSearchableFieldAutocompleteItemComponent, isStandalone: true, selector: "dbx-searchable-field-autocomplete-item", inputs: { displayValue: { classPropertyName: "displayValue", publicName: "displayValue", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxSearchableFieldAutocompleteItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.10", type: DbxSearchableFieldAutocompleteItemComponent, isStandalone: true, selector: "dbx-searchable-field-autocomplete-item", inputs: { displayValue: { classPropertyName: "displayValue", publicName: "displayValue", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
     <dbx-anchor [block]="true" [anchor]="anchorSignal()">
       <dbx-injection [config]="configSignal()"></dbx-injection>
     </dbx-anchor>
   `, isInline: true, dependencies: [{ kind: "component", type: DbxAnchorComponent, selector: "dbx-anchor, [dbx-anchor]", inputs: ["block"] }, { kind: "component", type: DbxInjectionComponent, selector: "dbx-injection, [dbxInjection], [dbx-injection]", inputs: ["config", "template"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxSearchableFieldAutocompleteItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxSearchableFieldAutocompleteItemComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'dbx-searchable-field-autocomplete-item',
@@ -7961,10 +8202,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
  */
 class AbstractDbxSearchableFieldDisplayDirective {
     displayValue = inject(DBX_SEARCHABLE_FIELD_COMPONENT_DATA_TOKEN);
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: AbstractDbxSearchableFieldDisplayDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.4", type: AbstractDbxSearchableFieldDisplayDirective, isStandalone: true, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: AbstractDbxSearchableFieldDisplayDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.10", type: AbstractDbxSearchableFieldDisplayDirective, isStandalone: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: AbstractDbxSearchableFieldDisplayDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: AbstractDbxSearchableFieldDisplayDirective, decorators: [{
             type: Directive
         }] });
 /**
@@ -7974,8 +8215,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
  */
 class DbxDefaultSearchableFieldDisplayComponent extends AbstractDbxSearchableFieldDisplayDirective {
     icon = this.displayValue.icon;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxDefaultSearchableFieldDisplayComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: DbxDefaultSearchableFieldDisplayComponent, isStandalone: true, selector: "dbx-default-searchable-field-display", usesInheritance: true, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxDefaultSearchableFieldDisplayComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: DbxDefaultSearchableFieldDisplayComponent, isStandalone: true, selector: "dbx-default-searchable-field-display", usesInheritance: true, ngImport: i0, template: `
     <div class="dbx-default-searchable-field-display dbx-flex-bar">
       @if (icon) {
         <mat-icon class="dbx-icon-spacer">{{ icon }}</mat-icon>
@@ -7987,7 +8228,7 @@ class DbxDefaultSearchableFieldDisplayComponent extends AbstractDbxSearchableFie
     </div>
   `, isInline: true, dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxDefaultSearchableFieldDisplayComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxDefaultSearchableFieldDisplayComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'dbx-default-searchable-field-display',
@@ -8132,10 +8373,10 @@ class AbstractForgeSearchableFieldDirective {
             return obs;
         }));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: AbstractForgeSearchableFieldDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.4", type: AbstractForgeSearchableFieldDirective, isStandalone: true, inputs: { key: { classPropertyName: "key", publicName: "key", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: true, isRequired: false, transformFunction: null }, props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null }, meta: { classPropertyName: "meta", publicName: "meta", isSignal: true, isRequired: false, transformFunction: null }, validationMessages: { classPropertyName: "validationMessages", publicName: "validationMessages", isSignal: true, isRequired: false, transformFunction: null }, defaultValidationMessages: { classPropertyName: "defaultValidationMessages", publicName: "defaultValidationMessages", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: AbstractForgeSearchableFieldDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.10", type: AbstractForgeSearchableFieldDirective, isStandalone: true, inputs: { key: { classPropertyName: "key", publicName: "key", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: true, isRequired: false, transformFunction: null }, props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null }, meta: { classPropertyName: "meta", publicName: "meta", isSignal: true, isRequired: false, transformFunction: null }, validationMessages: { classPropertyName: "validationMessages", publicName: "validationMessages", isSignal: true, isRequired: false, transformFunction: null }, defaultValidationMessages: { classPropertyName: "defaultValidationMessages", publicName: "defaultValidationMessages", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: AbstractForgeSearchableFieldDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: AbstractForgeSearchableFieldDirective, decorators: [{
             type: Directive
         }], propDecorators: { key: [{ type: i0.Input, args: [{ isSignal: true, alias: "key", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], tabIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabIndex", required: false }] }], props: [{ type: i0.Input, args: [{ isSignal: true, alias: "props", required: false }] }], meta: [{ type: i0.Input, args: [{ isSignal: true, alias: "meta", required: false }] }], validationMessages: [{ type: i0.Input, args: [{ isSignal: true, alias: "validationMessages", required: false }] }], defaultValidationMessages: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultValidationMessages", required: false }] }] } });
 
@@ -8235,7 +8476,7 @@ function dbxForgeSearchableStringChipField(config) {
     return dbxForgeSearchableChipField({
         ...config,
         props: {
-            ...(config.props ?? {}),
+            ...config.props,
             allowStringValues: true
         }
     });
@@ -8336,10 +8577,10 @@ class DbxForgeSearchableTextFieldComponent extends AbstractForgeSearchableFieldD
             fieldState.value.set(value);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxForgeSearchableTextFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: DbxForgeSearchableTextFieldComponent, isStandalone: true, selector: "dbx-forge-searchable-text-field", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null } }, viewQueries: [{ propertyName: "textInputRef", first: true, predicate: ["textInput"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"dbx-searchable-text-field\" tabindex=\"0\" (click)=\"focusInput()\" (keydown.enter)=\"focusInput()\" [class.dbx-searchable-text-field-has-value]=\"hasValueSignal()\" [class.dbx-searchable-text-field-show-value]=\"showSelectedDisplayValueSignal()\">\n  @if (showSelectedDisplayValueSignal()) {\n    @let sv = selectedDisplayValueSignal();\n    @if (sv) {\n      <div class=\"dbx-searchable-text-field-value\">\n        <dbx-searchable-field-autocomplete-item [displayValue]=\"sv\"></dbx-searchable-field-autocomplete-item>\n      </div>\n    }\n  }\n  <div class=\"dbx-searchable-text-field-input\">\n    @if (searchLabelSignal()) {\n      <div class=\"dbx-label\">{{ searchLabelSignal() }}</div>\n    }\n    <input #textInput class=\"dbx-forge-bare-input\" [formControl]=\"inputCtrl\" [matAutocomplete]=\"auto\" [placeholder]=\"searchInputPlaceholder()\" [attr.aria-invalid]=\"ariaInvalid()\" [attr.aria-describedby]=\"ariaDescribedBy()\" />\n  </div>\n</div>\n<mat-autocomplete class=\"dbx-searchable-text-field-autocomplete\" #auto=\"matAutocomplete\" (optionSelected)=\"selected($event)\">\n  @if (showClearValueSignal() && hasValueSignal()) {\n    <mat-option [value]=\"{ _clear: true }\">Clear</mat-option>\n  }\n  @for (result of searchResultsSignal(); track $index) {\n    <mat-option [value]=\"result\">\n      <dbx-searchable-field-autocomplete-item [displayValue]=\"result\"></dbx-searchable-field-autocomplete-item>\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: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i2$2.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: i2$2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i2$2.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: MatOptionModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: DbxSearchableFieldAutocompleteItemComponent, selector: "dbx-searchable-field-autocomplete-item", inputs: ["displayValue"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxForgeSearchableTextFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: DbxForgeSearchableTextFieldComponent, isStandalone: true, selector: "dbx-forge-searchable-text-field", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null } }, viewQueries: [{ propertyName: "textInputRef", first: true, predicate: ["textInput"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"dbx-searchable-text-field\" tabindex=\"0\" (click)=\"focusInput()\" (keydown.enter)=\"focusInput()\" [class.dbx-searchable-text-field-has-value]=\"hasValueSignal()\" [class.dbx-searchable-text-field-show-value]=\"showSelectedDisplayValueSignal()\">\n  @if (showSelectedDisplayValueSignal()) {\n    @let sv = selectedDisplayValueSignal();\n    @if (sv) {\n      <div class=\"dbx-searchable-text-field-value\">\n        <dbx-searchable-field-autocomplete-item [displayValue]=\"sv\"></dbx-searchable-field-autocomplete-item>\n      </div>\n    }\n  }\n  <div class=\"dbx-searchable-text-field-input\">\n    @if (searchLabelSignal()) {\n      <div class=\"dbx-label\">{{ searchLabelSignal() }}</div>\n    }\n    <input #textInput class=\"dbx-forge-bare-input\" [formControl]=\"inputCtrl\" [matAutocomplete]=\"auto\" [placeholder]=\"searchInputPlaceholder()\" [attr.aria-invalid]=\"ariaInvalid()\" [attr.aria-describedby]=\"ariaDescribedBy()\" />\n  </div>\n</div>\n<mat-autocomplete class=\"dbx-searchable-text-field-autocomplete\" #auto=\"matAutocomplete\" (optionSelected)=\"selected($event)\">\n  @if (showClearValueSignal() && hasValueSignal()) {\n    <mat-option [value]=\"{ _clear: true }\">Clear</mat-option>\n  }\n  @for (result of searchResultsSignal(); track $index) {\n    <mat-option [value]=\"result\">\n      <dbx-searchable-field-autocomplete-item [displayValue]=\"result\"></dbx-searchable-field-autocomplete-item>\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: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i2$2.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: i2$2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i2$2.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: MatOptionModule }, { 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: "21.2.4", ngImport: i0, type: DbxForgeSearchableTextFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxForgeSearchableTextFieldComponent, decorators: [{
             type: Component,
             args: [{ selector: 'dbx-forge-searchable-text-field', imports: [FormsModule, ReactiveFormsModule, MatAutocompleteModule, MatOptionModule, MatIconModule, DbxSearchableFieldAutocompleteItemComponent], changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "<div class=\"dbx-searchable-text-field\" tabindex=\"0\" (click)=\"focusInput()\" (keydown.enter)=\"focusInput()\" [class.dbx-searchable-text-field-has-value]=\"hasValueSignal()\" [class.dbx-searchable-text-field-show-value]=\"showSelectedDisplayValueSignal()\">\n  @if (showSelectedDisplayValueSignal()) {\n    @let sv = selectedDisplayValueSignal();\n    @if (sv) {\n      <div class=\"dbx-searchable-text-field-value\">\n        <dbx-searchable-field-autocomplete-item [displayValue]=\"sv\"></dbx-searchable-field-autocomplete-item>\n      </div>\n    }\n  }\n  <div class=\"dbx-searchable-text-field-input\">\n    @if (searchLabelSignal()) {\n      <div class=\"dbx-label\">{{ searchLabelSignal() }}</div>\n    }\n    <input #textInput class=\"dbx-forge-bare-input\" [formControl]=\"inputCtrl\" [matAutocomplete]=\"auto\" [placeholder]=\"searchInputPlaceholder()\" [attr.aria-invalid]=\"ariaInvalid()\" [attr.aria-describedby]=\"ariaDescribedBy()\" />\n  </div>\n</div>\n<mat-autocomplete class=\"dbx-searchable-text-field-autocomplete\" #auto=\"matAutocomplete\" (optionSelected)=\"selected($event)\">\n  @if (showClearValueSignal() && hasValueSignal()) {\n    <mat-option [value]=\"{ _clear: true }\">Clear</mat-option>\n  }\n  @for (result of searchResultsSignal(); track $index) {\n    <mat-option [value]=\"result\">\n      <dbx-searchable-field-autocomplete-item [displayValue]=\"result\"></dbx-searchable-field-autocomplete-item>\n    </mat-option>\n  }\n</mat-autocomplete>\n" }]
         }], ctorParameters: () => [], propDecorators: { field: [{ type: i0.Input, args: [{ isSignal: true, alias: "field", required: true }] }], textInputRef: [{ type: i0.ViewChild, args: ['textInput', { isSignal: true }] }] } });
@@ -8410,9 +8651,7 @@ class DbxForgeSearchableChipFieldComponent extends AbstractForgeSearchableFieldD
                     break;
                 }
             }
-            if (result == null) {
-                result = 'Invalid input';
-            }
+            result ??= 'Invalid input';
         }
         return result;
     }
@@ -8525,10 +8764,10 @@ class DbxForgeSearchableChipFieldComponent extends AbstractForgeSearchableFieldD
             fieldState.value.set(newValue);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxForgeSearchableChipFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: DbxForgeSearchableChipFieldComponent, isStandalone: true, selector: "dbx-forge-searchable-chip-field", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "<div class=\"dbx-searchable-field dbx-searchable-chip-field\">\n  <mat-chip-grid #chipGrid>\n    @for (dv of displayValuesSignal(); track $index) {\n      <mat-chip-row (removed)=\"removeWithDisplayValue(dv)\">\n        <dbx-searchable-field-autocomplete-item [displayValue]=\"dv\"></dbx-searchable-field-autocomplete-item>\n        <button matChipRemove>\n          <mat-icon>cancel</mat-icon>\n        </button>\n      </mat-chip-row>\n    }\n    <input #textInput class=\"dbx-forge-bare-input\" [class.dbx-warn]=\"inputErrorMessage\" [formControl]=\"inputCtrl\" [matAutocomplete]=\"auto\" [matChipInputFor]=\"chipGrid\" [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\" (matChipInputTokenEnd)=\"addChip($event)\" [placeholder]=\"searchInputPlaceholder()\" (blur)=\"onBlur()\" (keydown)=\"tabPressedOnInput($event)\" [attr.aria-invalid]=\"ariaInvalid()\" [attr.aria-describedby]=\"ariaDescribedBy()\" />\n  </mat-chip-grid>\n  @if (inputCtrl.value && inputCtrl.touched && inputErrorMessage) {\n    <div class=\"dbx-small mat-mdc-form-field-error mat-mdc-form-field-bottom-align\">{{ inputErrorMessage }}</div>\n  }\n</div>\n<mat-autocomplete class=\"dbx-searchable-text-field-autocomplete\" #auto=\"matAutocomplete\" (optionSelected)=\"selectedChip($event)\">\n  @for (result of searchResultsSignal(); track $index) {\n    <mat-option [value]=\"result\">\n      <dbx-searchable-field-autocomplete-item [displayValue]=\"result\"></dbx-searchable-field-autocomplete-item>\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: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i2$2.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: i2$2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i2$2.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i1$8.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i1$8.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled", "readonly", "matChipInputDisabledInteractive"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i1$8.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i1$8.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "ngmodule", type: MatOptionModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: DbxLoadingModule }, { kind: "component", type: DbxSearchableFieldAutocompleteItemComponent, selector: "dbx-searchable-field-autocomplete-item", inputs: ["displayValue"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxForgeSearchableChipFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: DbxForgeSearchableChipFieldComponent, isStandalone: true, selector: "dbx-forge-searchable-chip-field", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "<div class=\"dbx-searchable-field dbx-searchable-chip-field\">\n  <mat-chip-grid #chipGrid>\n    @for (dv of displayValuesSignal(); track $index) {\n      <mat-chip-row (removed)=\"removeWithDisplayValue(dv)\">\n        <dbx-searchable-field-autocomplete-item [displayValue]=\"dv\"></dbx-searchable-field-autocomplete-item>\n        <button matChipRemove>\n          <mat-icon>cancel</mat-icon>\n        </button>\n      </mat-chip-row>\n    }\n    <input #textInput class=\"dbx-forge-bare-input\" [class.dbx-warn]=\"inputErrorMessage\" [formControl]=\"inputCtrl\" [matAutocomplete]=\"auto\" [matChipInputFor]=\"chipGrid\" [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\" (matChipInputTokenEnd)=\"addChip($event)\" [placeholder]=\"searchInputPlaceholder()\" (blur)=\"onBlur()\" (keydown)=\"tabPressedOnInput($event)\" [attr.aria-invalid]=\"ariaInvalid()\" [attr.aria-describedby]=\"ariaDescribedBy()\" />\n  </mat-chip-grid>\n  @if (inputCtrl.value && inputCtrl.touched && inputErrorMessage) {\n    <div class=\"dbx-small mat-mdc-form-field-error mat-mdc-form-field-bottom-align\">{{ inputErrorMessage }}</div>\n  }\n</div>\n<mat-autocomplete class=\"dbx-searchable-text-field-autocomplete\" #auto=\"matAutocomplete\" (optionSelected)=\"selectedChip($event)\">\n  @for (result of searchResultsSignal(); track $index) {\n    <mat-option [value]=\"result\">\n      <dbx-searchable-field-autocomplete-item [displayValue]=\"result\"></dbx-searchable-field-autocomplete-item>\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: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i2$2.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: i2$2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i2$2.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i1$8.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i1$8.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled", "readonly", "matChipInputDisabledInteractive"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i1$8.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i1$8.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "ngmodule", type: MatOptionModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: DbxLoadingModule }, { kind: "component", type: DbxSearchableFieldAutocompleteItemComponent, selector: "dbx-searchable-field-autocomplete-item", inputs: ["displayValue"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxForgeSearchableChipFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxForgeSearchableChipFieldComponent, decorators: [{
             type: Component,
             args: [{ selector: 'dbx-forge-searchable-chip-field', imports: [FormsModule, ReactiveFormsModule, MatAutocompleteModule, MatChipsModule, MatOptionModule, MatIconModule, DbxLoadingModule, DbxSearchableFieldAutocompleteItemComponent], changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "<div class=\"dbx-searchable-field dbx-searchable-chip-field\">\n  <mat-chip-grid #chipGrid>\n    @for (dv of displayValuesSignal(); track $index) {\n      <mat-chip-row (removed)=\"removeWithDisplayValue(dv)\">\n        <dbx-searchable-field-autocomplete-item [displayValue]=\"dv\"></dbx-searchable-field-autocomplete-item>\n        <button matChipRemove>\n          <mat-icon>cancel</mat-icon>\n        </button>\n      </mat-chip-row>\n    }\n    <input #textInput class=\"dbx-forge-bare-input\" [class.dbx-warn]=\"inputErrorMessage\" [formControl]=\"inputCtrl\" [matAutocomplete]=\"auto\" [matChipInputFor]=\"chipGrid\" [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\" (matChipInputTokenEnd)=\"addChip($event)\" [placeholder]=\"searchInputPlaceholder()\" (blur)=\"onBlur()\" (keydown)=\"tabPressedOnInput($event)\" [attr.aria-invalid]=\"ariaInvalid()\" [attr.aria-describedby]=\"ariaDescribedBy()\" />\n  </mat-chip-grid>\n  @if (inputCtrl.value && inputCtrl.touched && inputErrorMessage) {\n    <div class=\"dbx-small mat-mdc-form-field-error mat-mdc-form-field-bottom-align\">{{ inputErrorMessage }}</div>\n  }\n</div>\n<mat-autocomplete class=\"dbx-searchable-text-field-autocomplete\" #auto=\"matAutocomplete\" (optionSelected)=\"selectedChip($event)\">\n  @for (result of searchResultsSignal(); track $index) {\n    <mat-option [value]=\"result\">\n      <dbx-searchable-field-autocomplete-item [displayValue]=\"result\"></dbx-searchable-field-autocomplete-item>\n    </mat-option>\n  }\n</mat-autocomplete>\n" }]
         }], ctorParameters: () => [], propDecorators: { field: [{ type: i0.Input, args: [{ isSignal: true, alias: "field", required: true }] }] } });
@@ -8779,10 +9018,10 @@ class AbstractForgePickableItemFieldDirective {
             return of(hasDisplay.map((x) => x[3]));
         }));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: AbstractForgePickableItemFieldDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.4", type: AbstractForgePickableItemFieldDirective, isStandalone: true, inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, key: { classPropertyName: "key", publicName: "key", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: true, isRequired: false, transformFunction: null }, props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null }, meta: { classPropertyName: "meta", publicName: "meta", isSignal: true, isRequired: false, transformFunction: null }, validationMessages: { classPropertyName: "validationMessages", publicName: "validationMessages", isSignal: true, isRequired: false, transformFunction: null }, defaultValidationMessages: { classPropertyName: "defaultValidationMessages", publicName: "defaultValidationMessages", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: AbstractForgePickableItemFieldDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.10", type: AbstractForgePickableItemFieldDirective, isStandalone: true, inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, key: { classPropertyName: "key", publicName: "key", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: true, isRequired: false, transformFunction: null }, props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null }, meta: { classPropertyName: "meta", publicName: "meta", isSignal: true, isRequired: false, transformFunction: null }, validationMessages: { classPropertyName: "validationMessages", publicName: "validationMessages", isSignal: true, isRequired: false, transformFunction: null }, defaultValidationMessages: { classPropertyName: "defaultValidationMessages", publicName: "defaultValidationMessages", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: AbstractForgePickableItemFieldDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: AbstractForgePickableItemFieldDirective, decorators: [{
             type: Directive
         }], propDecorators: { field: [{ type: i0.Input, args: [{ isSignal: true, alias: "field", required: true }] }], key: [{ type: i0.Input, args: [{ isSignal: true, alias: "key", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], tabIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabIndex", required: false }] }], props: [{ type: i0.Input, args: [{ isSignal: true, alias: "props", required: false }] }], meta: [{ type: i0.Input, args: [{ isSignal: true, alias: "meta", required: false }] }], validationMessages: [{ type: i0.Input, args: [{ isSignal: true, alias: "validationMessages", required: false }] }], defaultValidationMessages: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultValidationMessages", required: false }] }] } });
 
@@ -8871,10 +9110,10 @@ class DbxForgePickableChipFieldComponent extends AbstractForgePickableItemFieldD
             this._setValues(allValues);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxForgePickableChipFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: DbxForgePickableChipFieldComponent, isStandalone: true, selector: "dbx-forge-pickable-chip-field", usesInheritance: true, ngImport: i0, template: "<div class=\"dbx-pickable-item-field\">\n  @if (showTextFilterSignal()) {\n    <div class=\"dbx-pickable-item-field-filter\">\n      @if (filterLabelSignal()) {\n        <div class=\"dbx-label\">{{ filterLabelSignal() }}</div>\n      }\n      <input class=\"dbx-forge-bare-input\" [placeholder]=\"'Filter'\" [formControl]=\"inputCtrl\" />\n      <mat-divider></mat-divider>\n    </div>\n  }\n  <div class=\"dbx-pickable-item-field-chips\">\n    <mat-chip-listbox [multiple]=\"multiSelectSignal()\" [selectable]=\"!isDisabledOrReadonly()\" [disabled]=\"isDisabledOrReadonly()\" [attr.aria-invalid]=\"ariaInvalid()\" [attr.aria-describedby]=\"ariaDescribedBy()\">\n      @if (showSelectAllButtonSignal() && multiSelectSignal() && !isDisabledOrReadonly()) {\n        <mat-chip-option (click)=\"toggleAll()\" [selected]=\"allSelectedSignal()\">\n          <span class=\"dbx-chip-label\">All</span>\n        </mat-chip-option>\n      }\n      @for (item of itemsSignal(); track item.key) {\n        <mat-chip-option (click)=\"itemClicked(item)\" [selected]=\"item.selected\" [disabled]=\"readonlySignal() || 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]=\"footerConfigSignal()\"></dbx-injection>\n  </div>\n  @if (noItemsAvailableSignal()) {\n    <p class=\"dbx-label\" role=\"status\">No items match this filter.</p>\n  }\n</div>\n", dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { 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.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "directive", type: i1$8.MatChipAvatar, selector: "mat-chip-avatar, [matChipAvatar]" }, { kind: "component", type: i1$8.MatChipListbox, selector: "mat-chip-listbox", inputs: ["multiple", "aria-orientation", "selectable", "compareWith", "required", "hideSingleSelectionIndicator", "value"], outputs: ["change"] }, { kind: "component", type: i1$8.MatChipOption, selector: "mat-basic-chip-option, [mat-basic-chip-option], mat-chip-option, [mat-chip-option]", inputs: ["selectable", "selected"], outputs: ["selectionChange"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { 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 ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxForgePickableChipFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: DbxForgePickableChipFieldComponent, isStandalone: true, selector: "dbx-forge-pickable-chip-field", usesInheritance: true, ngImport: i0, template: "<div class=\"dbx-pickable-item-field\">\n  @if (showTextFilterSignal()) {\n    <div class=\"dbx-pickable-item-field-filter\">\n      @if (filterLabelSignal()) {\n        <div class=\"dbx-label\">{{ filterLabelSignal() }}</div>\n      }\n      <input class=\"dbx-forge-bare-input\" [placeholder]=\"'Filter'\" [formControl]=\"inputCtrl\" />\n      <mat-divider></mat-divider>\n    </div>\n  }\n  <div class=\"dbx-pickable-item-field-chips\">\n    <mat-chip-listbox [multiple]=\"multiSelectSignal()\" [selectable]=\"!isDisabledOrReadonly()\" [disabled]=\"isDisabledOrReadonly()\" [attr.aria-invalid]=\"ariaInvalid()\" [attr.aria-describedby]=\"ariaDescribedBy()\">\n      @if (showSelectAllButtonSignal() && multiSelectSignal() && !isDisabledOrReadonly()) {\n        <mat-chip-option (click)=\"toggleAll()\" [selected]=\"allSelectedSignal()\">\n          <span class=\"dbx-chip-label\">All</span>\n        </mat-chip-option>\n      }\n      @for (item of itemsSignal(); track item.key) {\n        <mat-chip-option (click)=\"itemClicked(item)\" [selected]=\"item.selected\" [disabled]=\"readonlySignal() || 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]=\"footerConfigSignal()\"></dbx-injection>\n  </div>\n  @if (noItemsAvailableSignal()) {\n    <p class=\"dbx-label\" role=\"status\">No items match this filter.</p>\n  }\n</div>\n", dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { 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.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "directive", type: i1$8.MatChipAvatar, selector: "mat-chip-avatar, [matChipAvatar]" }, { kind: "component", type: i1$8.MatChipListbox, selector: "mat-chip-listbox", inputs: ["multiple", "aria-orientation", "selectable", "compareWith", "required", "hideSingleSelectionIndicator", "value"], outputs: ["change"] }, { kind: "component", type: i1$8.MatChipOption, selector: "mat-basic-chip-option, [mat-basic-chip-option], mat-chip-option, [mat-chip-option]", inputs: ["selectable", "selected"], outputs: ["selectionChange"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { 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: "21.2.4", ngImport: i0, type: DbxForgePickableChipFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxForgePickableChipFieldComponent, decorators: [{
             type: Component,
             args: [{ selector: 'dbx-forge-pickable-chip-field', imports: [ReactiveFormsModule, MatChipsModule, MatIconModule, MatDivider, DbxInjectionComponent], changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "<div class=\"dbx-pickable-item-field\">\n  @if (showTextFilterSignal()) {\n    <div class=\"dbx-pickable-item-field-filter\">\n      @if (filterLabelSignal()) {\n        <div class=\"dbx-label\">{{ filterLabelSignal() }}</div>\n      }\n      <input class=\"dbx-forge-bare-input\" [placeholder]=\"'Filter'\" [formControl]=\"inputCtrl\" />\n      <mat-divider></mat-divider>\n    </div>\n  }\n  <div class=\"dbx-pickable-item-field-chips\">\n    <mat-chip-listbox [multiple]=\"multiSelectSignal()\" [selectable]=\"!isDisabledOrReadonly()\" [disabled]=\"isDisabledOrReadonly()\" [attr.aria-invalid]=\"ariaInvalid()\" [attr.aria-describedby]=\"ariaDescribedBy()\">\n      @if (showSelectAllButtonSignal() && multiSelectSignal() && !isDisabledOrReadonly()) {\n        <mat-chip-option (click)=\"toggleAll()\" [selected]=\"allSelectedSignal()\">\n          <span class=\"dbx-chip-label\">All</span>\n        </mat-chip-option>\n      }\n      @for (item of itemsSignal(); track item.key) {\n        <mat-chip-option (click)=\"itemClicked(item)\" [selected]=\"item.selected\" [disabled]=\"readonlySignal() || 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]=\"footerConfigSignal()\"></dbx-injection>\n  </div>\n  @if (noItemsAvailableSignal()) {\n    <p class=\"dbx-label\" role=\"status\">No items match this filter.</p>\n  }\n</div>\n" }]
         }], ctorParameters: () => [] });
@@ -8911,10 +9150,10 @@ class DbxForgePickableListFieldComponent extends AbstractForgePickableItemFieldD
             this._setValues(allValues);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxForgePickableListFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: DbxForgePickableListFieldComponent, isStandalone: true, selector: "dbx-forge-pickable-list-field", usesInheritance: true, ngImport: i0, template: "<div class=\"dbx-pickable-item-field dbx-pickable-item-field-list\">\n  @if (showTextFilterSignal()) {\n    <div class=\"dbx-pickable-item-field-filter\">\n      @if (filterLabelSignal()) {\n        <div class=\"dbx-label\">{{ filterLabelSignal() }}</div>\n      }\n      <input class=\"dbx-forge-bare-input\" [placeholder]=\"'Filter'\" [formControl]=\"inputCtrl\" />\n      <mat-divider></mat-divider>\n    </div>\n  }\n  @if (showSelectAllButtonSignal() && multiSelectSignal() && !isDisabledOrReadonly()) {\n    <div class=\"dbx-pickable-item-field-select-all\">\n      <button class=\"dbx-pickable-select-all-button\" type=\"button\" (click)=\"toggleAll()\">{{ allSelectedSignal() ? 'Deselect All' : 'Select All' }}</button>\n      <mat-divider></mat-divider>\n    </div>\n  }\n  <div class=\"dbx-pickable-item-field-list-content\">\n    <mat-selection-list [multiple]=\"multiSelectSignal()\" [disabled]=\"isDisabledOrReadonly()\" (selectionChange)=\"onSelectionChange($event)\" [attr.aria-invalid]=\"ariaInvalid()\" [attr.aria-describedby]=\"ariaDescribedBy()\">\n      @for (item of itemsSignal(); track item.key) {\n        <mat-list-option class=\"dbx-list-view-item\" [value]=\"item.itemValue.value\" [selected]=\"item.selected\" [disabled]=\"readonlySignal() || item.disabled\">\n          @if (item.itemValue.icon) {\n            <mat-icon matListItemIcon>{{ item.itemValue.icon }}</mat-icon>\n          }\n          <div class=\"dbx-default-pickable-item-field-list-item dbx-flex-bar\">\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          </div>\n        </mat-list-option>\n      }\n    </mat-selection-list>\n  </div>\n  <dbx-injection [config]=\"footerConfigSignal()\"></dbx-injection>\n  @if (noItemsAvailableSignal()) {\n    <p class=\"dbx-label\" role=\"status\">No items match this filter.</p>\n  }\n</div>\n", dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { 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.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatListModule }, { kind: "component", type: i2$3.MatSelectionList, selector: "mat-selection-list", inputs: ["color", "compareWith", "multiple", "hideSingleSelectionIndicator", "disabled"], outputs: ["selectionChange"], exportAs: ["matSelectionList"] }, { kind: "component", type: i2$3.MatListOption, selector: "mat-list-option", inputs: ["togglePosition", "checkboxPosition", "color", "value", "selected"], outputs: ["selectedChange"], exportAs: ["matListOption"] }, { kind: "directive", type: i2$3.MatListItemIcon, selector: "[matListItemIcon]" }, { kind: "component", type: i10.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: DbxInjectionComponent, selector: "dbx-injection, [dbxInjection], [dbx-injection]", inputs: ["config", "template"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxForgePickableListFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: DbxForgePickableListFieldComponent, isStandalone: true, selector: "dbx-forge-pickable-list-field", usesInheritance: true, ngImport: i0, template: "<div class=\"dbx-pickable-item-field dbx-pickable-item-field-list\">\n  @if (showTextFilterSignal()) {\n    <div class=\"dbx-pickable-item-field-filter\">\n      @if (filterLabelSignal()) {\n        <div class=\"dbx-label\">{{ filterLabelSignal() }}</div>\n      }\n      <input class=\"dbx-forge-bare-input\" [placeholder]=\"'Filter'\" [formControl]=\"inputCtrl\" />\n      <mat-divider></mat-divider>\n    </div>\n  }\n  @if (showSelectAllButtonSignal() && multiSelectSignal() && !isDisabledOrReadonly()) {\n    <div class=\"dbx-pickable-item-field-select-all\">\n      <button class=\"dbx-pickable-select-all-button\" type=\"button\" (click)=\"toggleAll()\">{{ allSelectedSignal() ? 'Deselect All' : 'Select All' }}</button>\n      <mat-divider></mat-divider>\n    </div>\n  }\n  <div class=\"dbx-pickable-item-field-list-content\">\n    <mat-selection-list [multiple]=\"multiSelectSignal()\" [disabled]=\"isDisabledOrReadonly()\" (selectionChange)=\"onSelectionChange($event)\" [attr.aria-invalid]=\"ariaInvalid()\" [attr.aria-describedby]=\"ariaDescribedBy()\">\n      @for (item of itemsSignal(); track item.key) {\n        <mat-list-option class=\"dbx-list-view-item\" [value]=\"item.itemValue.value\" [selected]=\"item.selected\" [disabled]=\"readonlySignal() || item.disabled\">\n          @if (item.itemValue.icon) {\n            <mat-icon matListItemIcon>{{ item.itemValue.icon }}</mat-icon>\n          }\n          <div class=\"dbx-default-pickable-item-field-list-item dbx-flex-bar\">\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          </div>\n        </mat-list-option>\n      }\n    </mat-selection-list>\n  </div>\n  <dbx-injection [config]=\"footerConfigSignal()\"></dbx-injection>\n  @if (noItemsAvailableSignal()) {\n    <p class=\"dbx-label\" role=\"status\">No items match this filter.</p>\n  }\n</div>\n", dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { 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.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatListModule }, { kind: "component", type: i2$3.MatSelectionList, selector: "mat-selection-list", inputs: ["color", "compareWith", "multiple", "hideSingleSelectionIndicator", "disabled"], outputs: ["selectionChange"], exportAs: ["matSelectionList"] }, { kind: "component", type: i2$3.MatListOption, selector: "mat-list-option", inputs: ["togglePosition", "checkboxPosition", "color", "value", "selected"], outputs: ["selectedChange"], exportAs: ["matListOption"] }, { kind: "directive", type: i2$3.MatListItemIcon, selector: "[matListItemIcon]" }, { kind: "component", type: i10.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: DbxInjectionComponent, selector: "dbx-injection, [dbxInjection], [dbx-injection]", inputs: ["config", "template"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxForgePickableListFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxForgePickableListFieldComponent, decorators: [{
             type: Component,
             args: [{ selector: 'dbx-forge-pickable-list-field', imports: [ReactiveFormsModule, MatListModule, MatIconModule, MatDivider, DbxInjectionComponent], changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "<div class=\"dbx-pickable-item-field dbx-pickable-item-field-list\">\n  @if (showTextFilterSignal()) {\n    <div class=\"dbx-pickable-item-field-filter\">\n      @if (filterLabelSignal()) {\n        <div class=\"dbx-label\">{{ filterLabelSignal() }}</div>\n      }\n      <input class=\"dbx-forge-bare-input\" [placeholder]=\"'Filter'\" [formControl]=\"inputCtrl\" />\n      <mat-divider></mat-divider>\n    </div>\n  }\n  @if (showSelectAllButtonSignal() && multiSelectSignal() && !isDisabledOrReadonly()) {\n    <div class=\"dbx-pickable-item-field-select-all\">\n      <button class=\"dbx-pickable-select-all-button\" type=\"button\" (click)=\"toggleAll()\">{{ allSelectedSignal() ? 'Deselect All' : 'Select All' }}</button>\n      <mat-divider></mat-divider>\n    </div>\n  }\n  <div class=\"dbx-pickable-item-field-list-content\">\n    <mat-selection-list [multiple]=\"multiSelectSignal()\" [disabled]=\"isDisabledOrReadonly()\" (selectionChange)=\"onSelectionChange($event)\" [attr.aria-invalid]=\"ariaInvalid()\" [attr.aria-describedby]=\"ariaDescribedBy()\">\n      @for (item of itemsSignal(); track item.key) {\n        <mat-list-option class=\"dbx-list-view-item\" [value]=\"item.itemValue.value\" [selected]=\"item.selected\" [disabled]=\"readonlySignal() || item.disabled\">\n          @if (item.itemValue.icon) {\n            <mat-icon matListItemIcon>{{ item.itemValue.icon }}</mat-icon>\n          }\n          <div class=\"dbx-default-pickable-item-field-list-item dbx-flex-bar\">\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          </div>\n        </mat-list-option>\n      }\n    </mat-selection-list>\n  </div>\n  <dbx-injection [config]=\"footerConfigSignal()\"></dbx-injection>\n  @if (noItemsAvailableSignal()) {\n    <p class=\"dbx-label\" role=\"status\">No items match this filter.</p>\n  }\n</div>\n" }]
         }], ctorParameters: () => [] });
@@ -9303,10 +9542,10 @@ class DbxForgeSourceSelectFieldComponent {
             return of(hasDisplay.map((x) => x[3]));
         }));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxForgeSourceSelectFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: DbxForgeSourceSelectFieldComponent, isStandalone: true, selector: "dbx-forge-source-select-field", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, key: { classPropertyName: "key", publicName: "key", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: true, isRequired: false, transformFunction: null }, props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null }, meta: { classPropertyName: "meta", publicName: "meta", isSignal: true, isRequired: false, transformFunction: null }, validationMessages: { classPropertyName: "validationMessages", publicName: "validationMessages", isSignal: true, isRequired: false, transformFunction: null }, defaultValidationMessages: { classPropertyName: "defaultValidationMessages", publicName: "defaultValidationMessages", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "id": "`${key()}`", "attr.data-testid": "key()", "class": "className()", "attr.hidden": "field()().hidden() || null" } }, viewQueries: [{ propertyName: "buttonElement", first: true, predicate: ["button"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "filterInputElement", first: true, predicate: ["filterInput"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "@let f = field();\n@let selectId = key() + '-select';\n\n<mat-form-field class=\"dbx-w100\" [appearance]=\"effectiveAppearance()\" [subscriptSizing]=\"effectiveSubscriptSizing()\">\n  @if (label(); as label) {\n    <mat-label>{{ label | dynamicText | async }}</mat-label>\n  }\n\n  <mat-select [id]=\"selectId\" [formField]=\"f\" [multiple]=\"multipleSignal()\" [panelClass]=\"selectPanelClassSignal()\" (openedChange)=\"onSelectOpenedChange($event)\" [attr.aria-invalid]=\"ariaInvalid()\" [attr.aria-required]=\"ariaRequired()\" [attr.aria-describedby]=\"ariaDescribedBy()\">\n    @if (filterableSignal()) {\n      <div class=\"dbx-source-select-filter-container\">\n        <input #filterInput class=\"dbx-source-select-filter-input\" type=\"text\" placeholder=\"Type to filter...\" (input)=\"onFilterInput($event)\" (keydown)=\"onFilterKeydown($event)\" />\n      </div>\n    }\n    @for (value of filteredNonGroupedValuesSignal(); track value.value) {\n      <mat-option [value]=\"value.value\">{{ value.label }}</mat-option>\n    }\n    @for (optionGroup of filteredGroupedOptionsSignal(); track optionGroup.label) {\n      <mat-optgroup [label]=\"optionGroup.label\">\n        @for (value of optionGroup.values; track value.value) {\n          <mat-option [value]=\"value.value\">{{ value.label }}</mat-option>\n        }\n      </mat-optgroup>\n    }\n  </mat-select>\n\n  @if (showOpenSourceButtonSignal() && !isDisabled()) {\n    <div matSuffix class=\"dbx-source-select-field-suffix\">\n      <dbx-action dbxActionValue [dbxActionHandler]=\"handleSelectOptions\">\n        <dbx-button #button dbxActionButton [fab]=\"true\" [iconOnly]=\"true\" [icon]=\"selectButtonIconSignal()\"></dbx-button>\n      </dbx-action>\n    </div>\n  }\n\n  <dbx-loading class=\"dbx-source-select-field-loading\" [linear]=\"true\" [context]=\"context\"></dbx-loading>\n\n  @if (errorsToDisplay()[0]; as error) {\n    <mat-error [id]=\"errorId()\">{{ error.message }}</mat-error>\n  } @else if (hintSignal()) {\n    <mat-hint [id]=\"hintId()\">{{ hintSignal() }}</mat-hint>\n  }\n</mat-form-field>\n", dependencies: [{ kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { 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", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: MatOptgroup, selector: "mat-optgroup", inputs: ["label", "disabled"], exportAs: ["matOptgroup"] }, { kind: "directive", type: MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: FormField, selector: "[formField]", inputs: ["formField"], exportAs: ["formField"] }, { kind: "component", type: DbxButtonComponent, selector: "dbx-button", inputs: ["bar", "type", "buttonStyle", "color", "spinnerColor", "customButtonColor", "customTextColor", "customSpinnerColor", "basic", "tonal", "raised", "stroked", "flat", "iconOnly", "fab", "customContent", "allowClickPropagation", "mode"] }, { kind: "ngmodule", type: DbxActionModule }, { kind: "directive", type: i1$2.DbxActionDirective, selector: "dbx-action,[dbxAction]", exportAs: ["action", "dbxAction"] }, { kind: "directive", type: i1$2.DbxActionHandlerDirective, selector: "[dbxActionHandler]", inputs: ["dbxActionHandler"] }, { kind: "directive", type: i1$2.DbxActionValueDirective, selector: "dbxActionValue,[dbxActionValue]", inputs: ["dbxActionValue"] }, { kind: "directive", type: i1$2.DbxActionButtonDirective, selector: "[dbxActionButton]", inputs: ["dbxActionButtonEcho"] }, { kind: "component", type: DbxLoadingComponent, selector: "dbx-loading", inputs: ["padding", "show", "text", "mode", "color", "diameter", "linear", "loading", "error", "context"] }, { kind: "pipe", type: DynamicTextPipe, name: "dynamicText" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxForgeSourceSelectFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: DbxForgeSourceSelectFieldComponent, isStandalone: true, selector: "dbx-forge-source-select-field", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, key: { classPropertyName: "key", publicName: "key", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: true, isRequired: false, transformFunction: null }, props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null }, meta: { classPropertyName: "meta", publicName: "meta", isSignal: true, isRequired: false, transformFunction: null }, validationMessages: { classPropertyName: "validationMessages", publicName: "validationMessages", isSignal: true, isRequired: false, transformFunction: null }, defaultValidationMessages: { classPropertyName: "defaultValidationMessages", publicName: "defaultValidationMessages", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "id": "`${key()}`", "attr.data-testid": "key()", "class": "className()", "attr.hidden": "field()().hidden() || null" } }, viewQueries: [{ propertyName: "buttonElement", first: true, predicate: ["button"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "filterInputElement", first: true, predicate: ["filterInput"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "@let f = field();\n@let selectId = key() + '-select';\n\n<mat-form-field class=\"dbx-w100\" [appearance]=\"effectiveAppearance()\" [subscriptSizing]=\"effectiveSubscriptSizing()\">\n  @if (label(); as label) {\n    <mat-label>{{ label | dynamicText | async }}</mat-label>\n  }\n\n  <mat-select [id]=\"selectId\" [formField]=\"f\" [multiple]=\"multipleSignal()\" [panelClass]=\"selectPanelClassSignal()\" (openedChange)=\"onSelectOpenedChange($event)\" [attr.aria-invalid]=\"ariaInvalid()\" [attr.aria-required]=\"ariaRequired()\" [attr.aria-describedby]=\"ariaDescribedBy()\">\n    @if (filterableSignal()) {\n      <div class=\"dbx-source-select-filter-container\">\n        <input #filterInput class=\"dbx-source-select-filter-input\" type=\"text\" placeholder=\"Type to filter...\" (input)=\"onFilterInput($event)\" (keydown)=\"onFilterKeydown($event)\" />\n      </div>\n    }\n    @for (value of filteredNonGroupedValuesSignal(); track value.value) {\n      <mat-option [value]=\"value.value\">{{ value.label }}</mat-option>\n    }\n    @for (optionGroup of filteredGroupedOptionsSignal(); track optionGroup.label) {\n      <mat-optgroup [label]=\"optionGroup.label\">\n        @for (value of optionGroup.values; track value.value) {\n          <mat-option [value]=\"value.value\">{{ value.label }}</mat-option>\n        }\n      </mat-optgroup>\n    }\n  </mat-select>\n\n  @if (showOpenSourceButtonSignal() && !isDisabled()) {\n    <div matSuffix class=\"dbx-source-select-field-suffix\">\n      <dbx-action dbxActionValue [dbxActionHandler]=\"handleSelectOptions\">\n        <dbx-button #button dbxActionButton [fab]=\"true\" [iconOnly]=\"true\" [icon]=\"selectButtonIconSignal()\"></dbx-button>\n      </dbx-action>\n    </div>\n  }\n\n  <dbx-loading class=\"dbx-source-select-field-loading\" [linear]=\"true\" [context]=\"context\"></dbx-loading>\n\n  @if (errorsToDisplay()[0]; as error) {\n    <mat-error [id]=\"errorId()\">{{ error.message }}</mat-error>\n  } @else if (hintSignal()) {\n    <mat-hint [id]=\"hintId()\">{{ hintSignal() }}</mat-hint>\n  }\n</mat-form-field>\n", dependencies: [{ kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { 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", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: MatOptgroup, selector: "mat-optgroup", inputs: ["label", "disabled"], exportAs: ["matOptgroup"] }, { kind: "directive", type: MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: FormField, selector: "[formField]", inputs: ["formField"], exportAs: ["formField"] }, { kind: "component", type: DbxButtonComponent, selector: "dbx-button", inputs: ["bar", "type", "buttonStyle", "color", "spinnerColor", "customButtonColor", "customTextColor", "customSpinnerColor", "basic", "tonal", "raised", "stroked", "flat", "iconOnly", "fab", "customContent", "allowClickPropagation", "mode"] }, { kind: "ngmodule", type: DbxActionModule }, { kind: "directive", type: i1$2.DbxActionDirective, selector: "dbx-action,[dbxAction]", exportAs: ["action", "dbxAction"] }, { kind: "directive", type: i1$2.DbxActionHandlerDirective, selector: "[dbxActionHandler]", inputs: ["dbxActionHandler"] }, { kind: "directive", type: i1$2.DbxActionValueDirective, selector: "dbxActionValue,[dbxActionValue]", inputs: ["dbxActionValue"] }, { kind: "directive", type: i1$2.DbxActionButtonDirective, selector: "[dbxActionButton]", inputs: ["dbxActionButtonEcho"] }, { kind: "component", type: DbxLoadingComponent, selector: "dbx-loading", inputs: ["padding", "show", "text", "mode", "color", "diameter", "linear", "loading", "error", "context"] }, { kind: "pipe", type: DynamicTextPipe, name: "dynamicText" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxForgeSourceSelectFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxForgeSourceSelectFieldComponent, decorators: [{
             type: Component,
             args: [{ selector: 'dbx-forge-source-select-field', imports: [MatFormField, MatLabel, MatSelect, MatOption, MatOptgroup, MatHint, MatError, MatSuffix, FormField, DynamicTextPipe, AsyncPipe, DbxButtonComponent, DbxActionModule, DbxLoadingComponent], changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, host: {
                         '[id]': '`${key()}`',
@@ -9489,10 +9728,10 @@ class DbxForgeListSelectionFieldComponent {
             fieldState.value.set(values);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxForgeListSelectionFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.4", type: DbxForgeListSelectionFieldComponent, isStandalone: true, selector: "dbx-forge-list-selection-field", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, key: { classPropertyName: "key", publicName: "key", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: true, isRequired: false, transformFunction: null }, props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null }, meta: { classPropertyName: "meta", publicName: "meta", isSignal: true, isRequired: false, transformFunction: null }, validationMessages: { classPropertyName: "validationMessages", publicName: "validationMessages", isSignal: true, isRequired: false, transformFunction: null }, defaultValidationMessages: { classPropertyName: "defaultValidationMessages", publicName: "defaultValidationMessages", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"dbx-forge-list-item-field\" [class.dbx-forge-list-field-disabled]=\"isDisabled()\" dbxListItemModifier [dbxListItemIsSelectedModifier]=\"isSelectedModifierFunctionSignal()\" [attr.aria-invalid]=\"ariaInvalid()\">\n  <div class=\"dbx-forge-list-item-field-content\">\n    <dbx-injection [config]=\"configSignal()\"></dbx-injection>\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: DbxListModifierModule }, { kind: "directive", type: i1$3.DbxValueListItemModifierDirective, selector: "dbxListItemModifier,[dbxListItemModifier]", inputs: ["dbxListItemModifier"] }, { kind: "directive", type: i1$3.DbxListItemIsSelectedModifierDirective, selector: "dbxListItemIsSelectedModifier,[dbxListItemIsSelectedModifier]", inputs: ["dbxListItemIsSelectedModifier"] }, { kind: "component", type: DbxInjectionComponent, selector: "dbx-injection, [dbxInjection], [dbx-injection]", inputs: ["config", "template"] }, { kind: "ngmodule", type: MatDividerModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxForgeListSelectionFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.10", type: DbxForgeListSelectionFieldComponent, isStandalone: true, selector: "dbx-forge-list-selection-field", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, key: { classPropertyName: "key", publicName: "key", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: true, isRequired: false, transformFunction: null }, props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null }, meta: { classPropertyName: "meta", publicName: "meta", isSignal: true, isRequired: false, transformFunction: null }, validationMessages: { classPropertyName: "validationMessages", publicName: "validationMessages", isSignal: true, isRequired: false, transformFunction: null }, defaultValidationMessages: { classPropertyName: "defaultValidationMessages", publicName: "defaultValidationMessages", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"dbx-forge-list-item-field\" [class.dbx-forge-list-field-disabled]=\"isDisabled()\" dbxListItemModifier [dbxListItemIsSelectedModifier]=\"isSelectedModifierFunctionSignal()\" [attr.aria-invalid]=\"ariaInvalid()\">\n  <div class=\"dbx-forge-list-item-field-content\">\n    <dbx-injection [config]=\"configSignal()\"></dbx-injection>\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: DbxListModifierModule }, { kind: "directive", type: i1$3.DbxValueListItemModifierDirective, selector: "dbxListItemModifier,[dbxListItemModifier]", inputs: ["dbxListItemModifier"] }, { kind: "directive", type: i1$3.DbxListItemIsSelectedModifierDirective, selector: "dbxListItemIsSelectedModifier,[dbxListItemIsSelectedModifier]", inputs: ["dbxListItemIsSelectedModifier"] }, { kind: "component", type: DbxInjectionComponent, selector: "dbx-injection, [dbxInjection], [dbx-injection]", inputs: ["config", "template"] }, { kind: "ngmodule", type: MatDividerModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxForgeListSelectionFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxForgeListSelectionFieldComponent, decorators: [{
             type: Component,
             args: [{ selector: 'dbx-forge-list-selection-field', imports: [DbxListModifierModule, DbxInjectionComponent, MatDividerModule], changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "<div class=\"dbx-forge-list-item-field\" [class.dbx-forge-list-field-disabled]=\"isDisabled()\" dbxListItemModifier [dbxListItemIsSelectedModifier]=\"isSelectedModifierFunctionSignal()\" [attr.aria-invalid]=\"ariaInvalid()\">\n  <div class=\"dbx-forge-list-item-field-content\">\n    <dbx-injection [config]=\"configSignal()\"></dbx-injection>\n  </div>\n</div>\n" }]
         }], ctorParameters: () => [], propDecorators: { field: [{ type: i0.Input, args: [{ isSignal: true, alias: "field", required: true }] }], key: [{ type: i0.Input, args: [{ isSignal: true, alias: "key", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], tabIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabIndex", required: false }] }], props: [{ type: i0.Input, args: [{ isSignal: true, alias: "props", required: false }] }], meta: [{ type: i0.Input, args: [{ isSignal: true, alias: "meta", required: false }] }], validationMessages: [{ type: i0.Input, args: [{ isSignal: true, alias: "validationMessages", required: false }] }], defaultValidationMessages: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultValidationMessages", required: false }] }] } });
@@ -9562,12 +9801,12 @@ class DbxForgeComponentFieldComponent {
     configSignal = computed(() => {
         return this.props()?.componentField;
     }, ...(ngDevMode ? [{ debugName: "configSignal" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxForgeComponentFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.4", type: DbxForgeComponentFieldComponent, isStandalone: true, selector: "dbx-forge-component-field", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, key: { classPropertyName: "key", publicName: "key", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: true, isRequired: false, transformFunction: null }, props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null }, meta: { classPropertyName: "meta", publicName: "meta", isSignal: true, isRequired: false, transformFunction: null }, validationMessages: { classPropertyName: "validationMessages", publicName: "validationMessages", isSignal: true, isRequired: false, transformFunction: null }, defaultValidationMessages: { classPropertyName: "defaultValidationMessages", publicName: "defaultValidationMessages", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "className()", "class.dbx-forge-disabled": "showDisabledState()" } }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxForgeComponentFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.10", type: DbxForgeComponentFieldComponent, isStandalone: true, selector: "dbx-forge-component-field", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, key: { classPropertyName: "key", publicName: "key", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: true, isRequired: false, transformFunction: null }, props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null }, meta: { classPropertyName: "meta", publicName: "meta", isSignal: true, isRequired: false, transformFunction: null }, validationMessages: { classPropertyName: "validationMessages", publicName: "validationMessages", isSignal: true, isRequired: false, transformFunction: null }, defaultValidationMessages: { classPropertyName: "defaultValidationMessages", publicName: "defaultValidationMessages", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "className()", "class.dbx-forge-disabled": "showDisabledState()" } }, ngImport: i0, template: `
     <div class="dbx-form-component" dbx-injection [config]="configSignal()"></div>
   `, isInline: true, dependencies: [{ kind: "component", type: DbxInjectionComponent, selector: "dbx-injection, [dbxInjection], [dbx-injection]", inputs: ["config", "template"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxForgeComponentFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxForgeComponentFieldComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'dbx-forge-component-field',
@@ -9737,10 +9976,10 @@ class DbxForgeTextEditorFieldComponent {
             node.value.set(value);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxForgeTextEditorFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: DbxForgeTextEditorFieldComponent, isStandalone: true, selector: "dbx-forge-texteditor-field", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, key: { classPropertyName: "key", publicName: "key", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: true, isRequired: false, transformFunction: null }, props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null }, meta: { classPropertyName: "meta", publicName: "meta", isSignal: true, isRequired: false, transformFunction: null }, validationMessages: { classPropertyName: "validationMessages", publicName: "validationMessages", isSignal: true, isRequired: false, transformFunction: null }, defaultValidationMessages: { classPropertyName: "defaultValidationMessages", publicName: "defaultValidationMessages", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"dbx-texteditor-field\" [ngClass]=\"compactClassSignal()\" [class.dbx-texteditor-field-disabled]=\"isDisabled()\">\n  @if (labelSignal()) {\n    <span class=\"dbx-label\">{{ labelSignal() }}</span>\n  }\n  <div class=\"dbx-texteditor-field-input\">\n    <ngx-editor [editor]=\"editor\" outputFormat=\"html\" [placeholder]=\"placeholderSignal()\" [formControl]=\"editorFormControl\" [attr.aria-invalid]=\"ariaInvalid()\" [attr.aria-describedby]=\"ariaDescribedBy()\"></ngx-editor>\n  </div>\n  <div class=\"dbx-texteditor-field-menu\">\n    <ngx-editor-menu [editor]=\"editor\" [disabled]=\"isDisabled()\"></ngx-editor-menu>\n  </div>\n  @if (errorsToDisplay()[0]; as error) {\n    <div class=\"dbx-form-description dbx-form-error\" [id]=\"errorId()\">{{ error.message }}</div>\n  } @else if (descriptionSignal()) {\n    <div class=\"dbx-form-description\" [id]=\"hintId()\">{{ descriptionSignal() }}</div>\n  }\n</div>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: NgxEditorModule }, { kind: "component", type: i1$9.NgxEditorComponent, selector: "ngx-editor", inputs: ["editor", "outputFormat", "placeholder"], outputs: ["focusOut", "focusIn"] }, { kind: "component", type: i1$9.NgxEditorMenuComponent, 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: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxForgeTextEditorFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: DbxForgeTextEditorFieldComponent, isStandalone: true, selector: "dbx-forge-texteditor-field", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, key: { classPropertyName: "key", publicName: "key", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: true, isRequired: false, transformFunction: null }, props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null }, meta: { classPropertyName: "meta", publicName: "meta", isSignal: true, isRequired: false, transformFunction: null }, validationMessages: { classPropertyName: "validationMessages", publicName: "validationMessages", isSignal: true, isRequired: false, transformFunction: null }, defaultValidationMessages: { classPropertyName: "defaultValidationMessages", publicName: "defaultValidationMessages", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"dbx-texteditor-field\" [ngClass]=\"compactClassSignal()\" [class.dbx-texteditor-field-disabled]=\"isDisabled()\">\n  @if (labelSignal()) {\n    <span class=\"dbx-label\">{{ labelSignal() }}</span>\n  }\n  <div class=\"dbx-texteditor-field-input\">\n    <ngx-editor [editor]=\"editor\" outputFormat=\"html\" [placeholder]=\"placeholderSignal()\" [formControl]=\"editorFormControl\" [attr.aria-invalid]=\"ariaInvalid()\" [attr.aria-describedby]=\"ariaDescribedBy()\"></ngx-editor>\n  </div>\n  <div class=\"dbx-texteditor-field-menu\">\n    <ngx-editor-menu [editor]=\"editor\" [disabled]=\"isDisabled()\"></ngx-editor-menu>\n  </div>\n  @if (errorsToDisplay()[0]; as error) {\n    <div class=\"dbx-form-description dbx-form-error\" [id]=\"errorId()\">{{ error.message }}</div>\n  } @else if (descriptionSignal()) {\n    <div class=\"dbx-form-description\" [id]=\"hintId()\">{{ descriptionSignal() }}</div>\n  }\n</div>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: NgxEditorModule }, { kind: "component", type: i1$9.NgxEditorComponent, selector: "ngx-editor", inputs: ["editor", "outputFormat", "placeholder"], outputs: ["focusOut", "focusIn"] }, { kind: "component", type: i1$9.NgxEditorMenuComponent, 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: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxForgeTextEditorFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxForgeTextEditorFieldComponent, decorators: [{
             type: Component,
             args: [{ selector: 'dbx-forge-texteditor-field', imports: [NgClass, NgxEditorModule, FormsModule, ReactiveFormsModule], changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "<div class=\"dbx-texteditor-field\" [ngClass]=\"compactClassSignal()\" [class.dbx-texteditor-field-disabled]=\"isDisabled()\">\n  @if (labelSignal()) {\n    <span class=\"dbx-label\">{{ labelSignal() }}</span>\n  }\n  <div class=\"dbx-texteditor-field-input\">\n    <ngx-editor [editor]=\"editor\" outputFormat=\"html\" [placeholder]=\"placeholderSignal()\" [formControl]=\"editorFormControl\" [attr.aria-invalid]=\"ariaInvalid()\" [attr.aria-describedby]=\"ariaDescribedBy()\"></ngx-editor>\n  </div>\n  <div class=\"dbx-texteditor-field-menu\">\n    <ngx-editor-menu [editor]=\"editor\" [disabled]=\"isDisabled()\"></ngx-editor-menu>\n  </div>\n  @if (errorsToDisplay()[0]; as error) {\n    <div class=\"dbx-form-description dbx-form-error\" [id]=\"errorId()\">{{ error.message }}</div>\n  } @else if (descriptionSignal()) {\n    <div class=\"dbx-form-description\" [id]=\"hintId()\">{{ descriptionSignal() }}</div>\n  }\n</div>\n" }]
         }], ctorParameters: () => [], propDecorators: { field: [{ type: i0.Input, args: [{ isSignal: true, alias: "field", required: true }] }], key: [{ type: i0.Input, args: [{ isSignal: true, alias: "key", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], tabIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabIndex", required: false }] }], props: [{ type: i0.Input, args: [{ isSignal: true, alias: "props", required: false }] }], meta: [{ type: i0.Input, args: [{ isSignal: true, alias: "meta", required: false }] }], validationMessages: [{ type: i0.Input, args: [{ isSignal: true, alias: "validationMessages", required: false }] }], defaultValidationMessages: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultValidationMessages", required: false }] }] } });
@@ -10019,10 +10258,10 @@ class DbxForgeArrayFieldWrapperComponent {
         const boundedTo = Math.max(0, Math.min(toIndex, items.length));
         this.dispatcher.dispatch(arrayEvent(key).insertAt(boundedTo, templateWithValues));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxForgeArrayFieldWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: DbxForgeArrayFieldWrapperComponent, isStandalone: true, selector: "dbx-forge-array-field-wrapper", inputs: { fieldInputs: { classPropertyName: "fieldInputs", publicName: "fieldInputs", isSignal: true, isRequired: false, transformFunction: null }, props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "fieldComponent", first: true, predicate: ["fieldComponent"], descendants: true, read: ViewContainerRef, isSignal: true }], ngImport: i0, template: "<div class=\"dbx-form-repeat-array\">\n  @if (labelSignal(); as labelText) {\n    <div class=\"dbx-form-repeat-array-header\">\n      <h4 class=\"dbx-form-repeat-array-title\">{{ labelText | dynamicText | async }}</h4>\n    </div>\n  }\n  @if (hintSignal(); as hintText) {\n    <p class=\"dbx-form-repeat-array-hint\">{{ hintText | dynamicText | async }}</p>\n  }\n  <div class=\"dbx-form-repeat-array-content\" cdkDropList [cdkDropListDisabled]=\"disableRearrangeSignal()\" (cdkDropListDropped)=\"drop($event)\">\n    <ng-container #fieldComponent></ng-container>\n  </div>\n  @if (allowAddSignal()) {\n    <div class=\"dbx-form-repeat-array-footer\">\n      <dbx-button [text]=\"addTextSignal()\" [buttonStyle]=\"addButtonStyleSignal()\" [disabled]=\"addButtonDisabledSignal()\" (buttonClick)=\"addItem()\"></dbx-button>\n    </div>\n  }\n</div>\n", dependencies: [{ kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "component", type: DbxButtonComponent, selector: "dbx-button", inputs: ["bar", "type", "buttonStyle", "color", "spinnerColor", "customButtonColor", "customTextColor", "customSpinnerColor", "basic", "tonal", "raised", "stroked", "flat", "iconOnly", "fab", "customContent", "allowClickPropagation", "mode"] }, { kind: "pipe", type: DynamicTextPipe, name: "dynamicText" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxForgeArrayFieldWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: DbxForgeArrayFieldWrapperComponent, isStandalone: true, selector: "dbx-forge-array-field-wrapper", inputs: { fieldInputs: { classPropertyName: "fieldInputs", publicName: "fieldInputs", isSignal: true, isRequired: false, transformFunction: null }, props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "fieldComponent", first: true, predicate: ["fieldComponent"], descendants: true, read: ViewContainerRef, isSignal: true }], ngImport: i0, template: "<div class=\"dbx-form-repeat-array\">\n  @if (labelSignal(); as labelText) {\n    <div class=\"dbx-form-repeat-array-header\">\n      <h4 class=\"dbx-form-repeat-array-title\">{{ labelText | dynamicText | async }}</h4>\n    </div>\n  }\n  @if (hintSignal(); as hintText) {\n    <p class=\"dbx-form-repeat-array-hint\">{{ hintText | dynamicText | async }}</p>\n  }\n  <div class=\"dbx-form-repeat-array-content\" cdkDropList [cdkDropListDisabled]=\"disableRearrangeSignal()\" (cdkDropListDropped)=\"drop($event)\">\n    <ng-container #fieldComponent></ng-container>\n  </div>\n  @if (allowAddSignal()) {\n    <div class=\"dbx-form-repeat-array-footer\">\n      <dbx-button [text]=\"addTextSignal()\" [buttonStyle]=\"addButtonStyleSignal()\" [disabled]=\"addButtonDisabledSignal()\" (buttonClick)=\"addItem()\"></dbx-button>\n    </div>\n  }\n</div>\n", dependencies: [{ kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "component", type: DbxButtonComponent, selector: "dbx-button", inputs: ["bar", "type", "buttonStyle", "color", "spinnerColor", "customButtonColor", "customTextColor", "customSpinnerColor", "basic", "tonal", "raised", "stroked", "flat", "iconOnly", "fab", "customContent", "allowClickPropagation", "mode"] }, { kind: "pipe", type: DynamicTextPipe, name: "dynamicText" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxForgeArrayFieldWrapperComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxForgeArrayFieldWrapperComponent, decorators: [{
             type: Component,
             args: [{ selector: 'dbx-forge-array-field-wrapper', imports: [DynamicTextPipe, AsyncPipe, CdkDropList, DbxButtonComponent], changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "<div class=\"dbx-form-repeat-array\">\n  @if (labelSignal(); as labelText) {\n    <div class=\"dbx-form-repeat-array-header\">\n      <h4 class=\"dbx-form-repeat-array-title\">{{ labelText | dynamicText | async }}</h4>\n    </div>\n  }\n  @if (hintSignal(); as hintText) {\n    <p class=\"dbx-form-repeat-array-hint\">{{ hintText | dynamicText | async }}</p>\n  }\n  <div class=\"dbx-form-repeat-array-content\" cdkDropList [cdkDropListDisabled]=\"disableRearrangeSignal()\" (cdkDropListDropped)=\"drop($event)\">\n    <ng-container #fieldComponent></ng-container>\n  </div>\n  @if (allowAddSignal()) {\n    <div class=\"dbx-form-repeat-array-footer\">\n      <dbx-button [text]=\"addTextSignal()\" [buttonStyle]=\"addButtonStyleSignal()\" [disabled]=\"addButtonDisabledSignal()\" (buttonClick)=\"addItem()\"></dbx-button>\n    </div>\n  }\n</div>\n" }]
         }], propDecorators: { fieldComponent: [{ type: i0.ViewChild, args: ['fieldComponent', { ...{ read: ViewContainerRef }, isSignal: true }] }], fieldInputs: [{ type: i0.Input, args: [{ isSignal: true, alias: "fieldInputs", required: false }] }], props: [{ type: i0.Input, args: [{ isSignal: true, alias: "props", required: false }] }] } });
@@ -10163,10 +10402,10 @@ class DbxForgeArrayFieldElementWrapperComponent {
             this.parent.duplicateItem(this.arrayContext.index(), targetIndex);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxForgeArrayFieldElementWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: DbxForgeArrayFieldElementWrapperComponent, isStandalone: true, selector: "dbx-forge-array-field-element-wrapper", inputs: { fieldInputs: { classPropertyName: "fieldInputs", publicName: "fieldInputs", isSignal: true, isRequired: false, transformFunction: null }, props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "fieldComponent", first: true, predicate: ["fieldComponent"], descendants: true, read: ViewContainerRef, isSignal: true }], ngImport: i0, template: "<div class=\"dbx-form-repeat-array-field\" cdkDrag cdkDragLockAxis=\"y\" [cdkDragDisabled]=\"disableRearrangeSignal()\">\n  <ng-template cdkDragPlaceholder>\n    <div class=\"dbx-form-repeat-array-drag-placeholder\"></div>\n  </ng-template>\n  <div class=\"dbx-content-navbar dbx-form-repeat-array-bar dbx-flex-bar\">\n    @if (!disableRearrangeSignal()) {\n      <button mat-icon-button type=\"button\" cdkDragHandle class=\"dbx-form-repeat-array-drag-button\" [disabled]=\"isDisabled()\" aria-label=\"Drag to reorder\">\n        <mat-icon>drag_handle</mat-icon>\n      </button>\n      <dbx-button-spacer></dbx-button-spacer>\n    }\n    @if (showIndexChipSignal()) {\n      <dbx-chip [display]=\"indexChipDisplaySignal()\">{{ arrayContext.index() + 1 }}</dbx-chip>\n    }\n    <span class=\"dbx-form-repeat-array-label\">{{ labelSignal() }}</span>\n    <span class=\"spacer\"></span>\n    @if (allowDuplicateSignal()) {\n      <dbx-button class=\"dbx-button-spacer\" [buttonDisplay]=\"duplicateButtonSignal().display\" [buttonStyle]=\"duplicateButtonSignal().style\" [disabled]=\"isDisabled()\" (buttonClick)=\"duplicateItem()\"></dbx-button>\n    }\n    @if (allowRemoveSignal()) {\n      <dbx-button [text]=\"removeTextSignal()\" [buttonStyle]=\"removeButtonStyleSignal()\" [disabled]=\"isDisabled()\" (buttonClick)=\"removeItem()\"></dbx-button>\n    }\n  </div>\n  <div class=\"dbx-form-repeat-array-field-content\">\n    <ng-container #fieldComponent></ng-container>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: 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: CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "directive", type: CdkDragPlaceholder, selector: "ng-template[cdkDragPlaceholder]", inputs: ["data"] }, { kind: "directive", type: DbxChipDirective, selector: "dbx-chip", inputs: ["small", "block", "color", "display", "tone"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: DbxButtonComponent, selector: "dbx-button", inputs: ["bar", "type", "buttonStyle", "color", "spinnerColor", "customButtonColor", "customTextColor", "customSpinnerColor", "basic", "tonal", "raised", "stroked", "flat", "iconOnly", "fab", "customContent", "allowClickPropagation", "mode"] }, { kind: "directive", type: DbxButtonSpacerDirective, selector: "dbx-button-spacer,[dbxButtonSpacer]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxForgeArrayFieldElementWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: DbxForgeArrayFieldElementWrapperComponent, isStandalone: true, selector: "dbx-forge-array-field-element-wrapper", inputs: { fieldInputs: { classPropertyName: "fieldInputs", publicName: "fieldInputs", isSignal: true, isRequired: false, transformFunction: null }, props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "fieldComponent", first: true, predicate: ["fieldComponent"], descendants: true, read: ViewContainerRef, isSignal: true }], ngImport: i0, template: "<div class=\"dbx-form-repeat-array-field\" cdkDrag cdkDragLockAxis=\"y\" [cdkDragDisabled]=\"disableRearrangeSignal()\">\n  <ng-template cdkDragPlaceholder>\n    <div class=\"dbx-form-repeat-array-drag-placeholder\"></div>\n  </ng-template>\n  <div class=\"dbx-content-navbar dbx-form-repeat-array-bar dbx-flex-bar\">\n    @if (!disableRearrangeSignal()) {\n      <button mat-icon-button type=\"button\" cdkDragHandle class=\"dbx-form-repeat-array-drag-button\" [disabled]=\"isDisabled()\" aria-label=\"Drag to reorder\">\n        <mat-icon>drag_handle</mat-icon>\n      </button>\n      <dbx-button-spacer></dbx-button-spacer>\n    }\n    @if (showIndexChipSignal()) {\n      <dbx-chip [display]=\"indexChipDisplaySignal()\">{{ arrayContext.index() + 1 }}</dbx-chip>\n    }\n    <span class=\"dbx-form-repeat-array-label\">{{ labelSignal() }}</span>\n    <span class=\"spacer\"></span>\n    @if (allowDuplicateSignal()) {\n      <dbx-button class=\"dbx-button-spacer\" [buttonDisplay]=\"duplicateButtonSignal().display\" [buttonStyle]=\"duplicateButtonSignal().style\" [disabled]=\"isDisabled()\" (buttonClick)=\"duplicateItem()\"></dbx-button>\n    }\n    @if (allowRemoveSignal()) {\n      <dbx-button [text]=\"removeTextSignal()\" [buttonStyle]=\"removeButtonStyleSignal()\" [disabled]=\"isDisabled()\" (buttonClick)=\"removeItem()\"></dbx-button>\n    }\n  </div>\n  <div class=\"dbx-form-repeat-array-field-content\">\n    <ng-container #fieldComponent></ng-container>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: 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: CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "directive", type: CdkDragPlaceholder, selector: "ng-template[cdkDragPlaceholder]", inputs: ["data"] }, { kind: "directive", type: DbxChipDirective, selector: "dbx-chip", inputs: ["small", "block", "color", "display", "tone"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: DbxButtonComponent, selector: "dbx-button", inputs: ["bar", "type", "buttonStyle", "color", "spinnerColor", "customButtonColor", "customTextColor", "customSpinnerColor", "basic", "tonal", "raised", "stroked", "flat", "iconOnly", "fab", "customContent", "allowClickPropagation", "mode"] }, { kind: "directive", type: DbxButtonSpacerDirective, selector: "dbx-button-spacer,[dbxButtonSpacer]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxForgeArrayFieldElementWrapperComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxForgeArrayFieldElementWrapperComponent, decorators: [{
             type: Component,
             args: [{ selector: 'dbx-forge-array-field-element-wrapper', imports: [CdkDrag, CdkDragHandle, CdkDragPlaceholder, DbxChipDirective, MatIconModule, MatButtonModule, DbxButtonComponent, DbxButtonSpacerDirective], changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "<div class=\"dbx-form-repeat-array-field\" cdkDrag cdkDragLockAxis=\"y\" [cdkDragDisabled]=\"disableRearrangeSignal()\">\n  <ng-template cdkDragPlaceholder>\n    <div class=\"dbx-form-repeat-array-drag-placeholder\"></div>\n  </ng-template>\n  <div class=\"dbx-content-navbar dbx-form-repeat-array-bar dbx-flex-bar\">\n    @if (!disableRearrangeSignal()) {\n      <button mat-icon-button type=\"button\" cdkDragHandle class=\"dbx-form-repeat-array-drag-button\" [disabled]=\"isDisabled()\" aria-label=\"Drag to reorder\">\n        <mat-icon>drag_handle</mat-icon>\n      </button>\n      <dbx-button-spacer></dbx-button-spacer>\n    }\n    @if (showIndexChipSignal()) {\n      <dbx-chip [display]=\"indexChipDisplaySignal()\">{{ arrayContext.index() + 1 }}</dbx-chip>\n    }\n    <span class=\"dbx-form-repeat-array-label\">{{ labelSignal() }}</span>\n    <span class=\"spacer\"></span>\n    @if (allowDuplicateSignal()) {\n      <dbx-button class=\"dbx-button-spacer\" [buttonDisplay]=\"duplicateButtonSignal().display\" [buttonStyle]=\"duplicateButtonSignal().style\" [disabled]=\"isDisabled()\" (buttonClick)=\"duplicateItem()\"></dbx-button>\n    }\n    @if (allowRemoveSignal()) {\n      <dbx-button [text]=\"removeTextSignal()\" [buttonStyle]=\"removeButtonStyleSignal()\" [disabled]=\"isDisabled()\" (buttonClick)=\"removeItem()\"></dbx-button>\n    }\n  </div>\n  <div class=\"dbx-form-repeat-array-field-content\">\n    <ng-container #fieldComponent></ng-container>\n  </div>\n</div>\n" }]
         }], propDecorators: { fieldComponent: [{ type: i0.ViewChild, args: ['fieldComponent', { ...{ read: ViewContainerRef }, isSignal: true }] }], fieldInputs: [{ type: i0.Input, args: [{ isSignal: true, alias: "fieldInputs", required: false }] }], props: [{ type: i0.Input, args: [{ isSignal: true, alias: "props", required: false }] }] } });
@@ -10176,88 +10415,6 @@ var arrayField_element_wrapper_component = /*#__PURE__*/Object.freeze({
     DbxForgeArrayFieldElementWrapperComponent: DbxForgeArrayFieldElementWrapperComponent
 });
 
-// MARK: Wrapper Type
-/**
- * Registered wrapper type name for the flex layout wrapper.
- */
-const DBX_FORGE_FLEX_WRAPPER_TYPE_NAME = 'dbx-forge-flex';
-/**
- * Type guard that checks if the input is a {@link DbxForgeFlexLayoutFieldConfig}
- * (has a `field` property) rather than a plain {@link FieldDef}.
- *
- * @param input - the field definition or flex layout field config to check
- * @returns true if the input is a {@link DbxForgeFlexLayoutFieldConfig} with a `field` property
- */
-function isFlexFieldConfig(input) {
-    return input.field != null;
-}
-/**
- * Creates a responsive flex layout container that arranges child fields horizontally
- * with configurable sizing, breakpoints, and responsive behavior.
- *
- * Each child field gets a `dbx-flex-N` CSS class applied (merged with any existing className).
- * The container hosts the `dbx-forge-flex` wrapper, which renders the `dbxFlexGroup`
- * directive for responsive breakpoint handling.
- *
- * A `container` is used (not a `group`) because flex layout is purely visual —
- * the wrapped fields should remain at the same level in the form value, not be
- * nested under an extra object.
- *
- * This is the forge equivalent of {@link formlyFlexLayoutWrapper}.
- *
- * @param fieldConfigs - Array of field definitions or `{ field, size }` pairs with size overrides
- * @param config - Flex layout defaults including breakpoint, relative sizing, and default size
- * @returns A {@link ContainerField} with the flex wrapper applied and sized children
- *
- * @dbxFormField
- * @dbxFormSlug flex-layout
- * @dbxFormTier composite-builder
- * @dbxFormSuffix Layout
- * @dbxFormProduces GroupField
- * @dbxFormArrayOutput no
- * @dbxFormConfigInterface DbxForgeFlexLayoutConfig
- * @dbxFormComposesFrom group
- *
- * @example
- * ```typescript
- * // Simple: all fields get default size (2)
- * dbxForgeFlexLayout([dbxForgeCityField({}), dbxForgeStateField({}), dbxForgeZipCodeField({})])
- *
- * // Resulting form value shape (flat — no wrapper property):
- * // { city: '...', state: '...', zip: '...' }
- *
- * // With per-field sizing and breakpoint
- * dbxForgeFlexLayout([
- *   { field: dbxForgeCityField({}), size: 4 },
- *   dbxForgeStateField({}),
- *   dbxForgeZipCodeField({})
- * ], { breakpoint: 'small', size: 1 })
- *
- * // Full config
- * dbxForgeFlexLayout([...fields], { breakpoint: 'large', breakToColumn: true, relative: true, size: 1 })
- * ```
- */
-function dbxForgeFlexLayout(fieldConfigs, config = {}) {
-    const { breakpoint, relative, breakToColumn, size: defaultSize = 2 } = config;
-    const mappedFields = fieldConfigs.map((input) => {
-        const { field, size = defaultSize } = isFlexFieldConfig(input) ? input : { field: input };
-        const flexClassName = `dbx-flex-${size}`;
-        const className = field.className ? `${field.className} ${flexClassName}` : flexClassName;
-        return { ...field, className };
-    });
-    const flexWrapper = {
-        type: DBX_FORGE_FLEX_WRAPPER_TYPE_NAME,
-        ...(breakpoint != null && { breakpoint }),
-        ...(relative != null && { relative }),
-        ...(breakToColumn != null && { breakToColumn })
-    };
-    return dbxForgeContainer({
-        fields: mappedFields,
-        className: 'dbx-flex-group',
-        wrappers: [flexWrapper]
-    });
-}
-
 /**
  * Forge wrapper field component that renders child fields inside a Material-style
  * outlined container with a notched outline, floating label, and hint/error subscript.
@@ -10269,11 +10426,20 @@ class DbxForgeFormFieldWrapperComponent {
     fieldComponent = viewChild.required('fieldComponent', { read: ViewContainerRef });
     // Props from wrapper config
     fieldInputs = input(...(ngDevMode ? [undefined, { debugName: "fieldInputs" }] : /* istanbul ignore next */ []));
+    /**
+     * Wrapper config props passed via `addWrappers({ type, props })`.
+     * ng-forge delivers wrapper config properties (with `type` stripped) as individual inputs.
+     */
+    props = input(...(ngDevMode ? [undefined, { debugName: "props" }] : /* istanbul ignore next */ []));
     // Read-only field tree from the wrapped field
     formState = computed(() => this.fieldInputs()?.field, ...(ngDevMode ? [{ debugName: "formState" }] : /* istanbul ignore next */ []));
     // Disabled state
     isDisabled = computed(() => this.formState()?.disabled(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
-    label = computed(() => this.fieldInputs()?.label, ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    /**
+     * Resolved notch label. Prefers a wrapper-level `props.label` override and
+     * falls back to the wrapped field's own label.
+     */
+    label = computed(() => this.props()?.label ?? this.fieldInputs()?.label, ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
     hintSignal = computed(() => this.fieldInputs()?.props?.hint, ...(ngDevMode ? [{ debugName: "hintSignal" }] : /* istanbul ignore next */ []));
     classNameSignal = computed(() => this.fieldInputs()?.className ?? '', ...(ngDevMode ? [{ debugName: "classNameSignal" }] : /* istanbul ignore next */ []));
     // Key for ARIA IDs
@@ -10318,16 +10484,16 @@ class DbxForgeFormFieldWrapperComponent {
     labelId = computed(() => `${this.keySignal()}-label`, ...(ngDevMode ? [{ debugName: "labelId" }] : /* istanbul ignore next */ []));
     errorId = computed(() => `${this.keySignal()}-error`, ...(ngDevMode ? [{ debugName: "errorId" }] : /* istanbul ignore next */ []));
     hintId = computed(() => `${this.keySignal()}-hint`, ...(ngDevMode ? [{ debugName: "hintId" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxForgeFormFieldWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: DbxForgeFormFieldWrapperComponent, isStandalone: true, selector: "dbx-forge-form-field-wrapper", inputs: { fieldInputs: { classPropertyName: "fieldInputs", publicName: "fieldInputs", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classNameSignal()" }, classAttribute: "mat-mdc-form-field mat-form-field-animations-enabled" }, viewQueries: [{ propertyName: "fieldComponent", first: true, predicate: ["fieldComponent"], descendants: true, read: ViewContainerRef, isSignal: true }], ngImport: i0, template: "<div class=\"dbx-forge-form-field-wrapper\" [class.dbx-forge-form-field-wrapper-error]=\"hasError()\" [class.dbx-forge-form-field-wrapper-disabled]=\"isDisabled()\" role=\"group\" [attr.aria-labelledby]=\"label() ? labelId() : null\">\n  <div class=\"dbx-forge-form-field-outline\">\n    <div class=\"dbx-forge-form-field-outline-leading\"></div>\n    <div class=\"dbx-forge-form-field-outline-notch\" [class.dbx-forge-form-field-outline-notch-empty]=\"!label()\">\n      @if (label(); as labelText) {\n        <span class=\"dbx-forge-form-field-outline-label\" [id]=\"labelId()\">\n          {{ labelText | dynamicText | async }}\n          @if (isRequired()) {\n            <span aria-hidden=\"true\" class=\"mat-mdc-form-field-required-marker mdc-floating-label--required\"></span>\n          }\n        </span>\n      }\n    </div>\n    <div class=\"dbx-forge-form-field-outline-trailing\"></div>\n  </div>\n  <div class=\"dbx-forge-form-field-content\">\n    <ng-container #fieldComponent></ng-container>\n  </div>\n</div>\n<div class=\"mat-mdc-form-field-subscript-wrapper mat-mdc-form-field-bottom-align mat-mdc-form-field-subscript-dynamic-size\">\n  @if (showErrors()) {\n    <div class=\"mat-mdc-form-field-error-wrapper\">\n      <div class=\"mat-mdc-form-field-error mat-mdc-form-field-bottom-align\" [id]=\"errorId()\">{{ firstErrorMessage() }}</div>\n    </div>\n  } @else if (hintSignal(); as hint) {\n    <div class=\"mat-mdc-form-field-hint-wrapper\">\n      <div class=\"mat-mdc-form-field-hint mat-mdc-form-field-bottom-align\" [id]=\"hintId()\">{{ hint }}</div>\n    </div>\n  }\n</div>\n", styles: [".dbx-forge-form-field-wrapper{position:relative;margin-top:8px}.dbx-forge-form-field-outline{display:flex;position:absolute;inset:0;pointer-events:none}.dbx-forge-form-field-outline-leading{border:1px solid var(--mdc-outlined-text-field-outline-color, var(--mat-sys-outline, rgba(0, 0, 0, .38)));border-right:none;border-radius:var(--mdc-outlined-text-field-container-shape, 8px) 0 0 var(--mdc-outlined-text-field-container-shape, 8px);width:12px}.dbx-forge-form-field-outline-notch{border-bottom:1px solid var(--mdc-outlined-text-field-outline-color, var(--mat-sys-outline, rgba(0, 0, 0, .38)));display:flex;align-items:flex-start;max-width:calc(100% - 24px)}.dbx-forge-form-field-outline-notch-empty{border-top:1px solid var(--mdc-outlined-text-field-outline-color, var(--mat-sys-outline, rgba(0, 0, 0, .38)));width:0;padding:0}.dbx-forge-form-field-outline-label{display:inline-block;transform:translateY(-50%);pointer-events:auto;padding:0 4px;background:var(--mat-sys-surface, white);white-space:nowrap;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--mat-form-field-outlined-label-text-populated-font, var(--mat-sys-body-small-font));font-size:var(--mat-form-field-outlined-label-text-populated-size, var(--mat-sys-body-small-size));line-height:var(--mat-form-field-outlined-label-text-populated-line-height, var(--mat-sys-body-small-line-height));letter-spacing:var(--mat-form-field-outlined-label-text-populated-tracking, var(--mat-sys-body-small-tracking));font-weight:var(--mat-form-field-outlined-label-text-populated-weight, var(--mat-sys-body-small-weight));color:var(--mdc-outlined-text-field-label-text-color, var(--mat-sys-on-surface-variant, rgba(0, 0, 0, .6)))}.dbx-forge-form-field-outline-trailing{border:1px solid var(--mdc-outlined-text-field-outline-color, var(--mat-sys-outline, rgba(0, 0, 0, .38)));border-left:none;border-radius:0 var(--mdc-outlined-text-field-container-shape, 8px) var(--mdc-outlined-text-field-container-shape, 8px) 0;flex-grow:1}.dbx-forge-form-field-wrapper:hover .dbx-forge-form-field-outline-leading,.dbx-forge-form-field-wrapper:hover .dbx-forge-form-field-outline-notch,.dbx-forge-form-field-wrapper:hover .dbx-forge-form-field-outline-trailing{border-color:var(--mdc-outlined-text-field-hover-outline-color, var(--mat-sys-on-surface, rgba(0, 0, 0, .87)))}.dbx-forge-form-field-wrapper:focus-within .dbx-forge-form-field-outline-leading,.dbx-forge-form-field-wrapper:focus-within .dbx-forge-form-field-outline-notch,.dbx-forge-form-field-wrapper:focus-within .dbx-forge-form-field-outline-trailing{border-color:var(--mdc-outlined-text-field-focus-outline-color, var(--mat-sys-primary));border-width:2px}.dbx-forge-form-field-wrapper:focus-within .dbx-forge-form-field-outline-label{color:var(--mdc-outlined-text-field-focus-label-text-color, var(--mat-sys-primary));padding:0 3px}.dbx-forge-form-field-wrapper-error .dbx-forge-form-field-outline-leading,.dbx-forge-form-field-wrapper-error .dbx-forge-form-field-outline-notch,.dbx-forge-form-field-wrapper-error .dbx-forge-form-field-outline-trailing,.dbx-forge-form-field-wrapper-error:focus-within .dbx-forge-form-field-outline-leading,.dbx-forge-form-field-wrapper-error:focus-within .dbx-forge-form-field-outline-notch,.dbx-forge-form-field-wrapper-error:focus-within .dbx-forge-form-field-outline-trailing{border-color:var(--mdc-outlined-text-field-error-outline-color, var(--mat-sys-error, #f44336))}.dbx-forge-form-field-wrapper-error .dbx-forge-form-field-outline-label,.dbx-forge-form-field-wrapper-error:focus-within .dbx-forge-form-field-outline-label{color:var(--mdc-outlined-text-field-error-label-text-color, var(--mat-sys-error, #f44336))}.dbx-forge-form-field-content{position:relative;padding:var(--mat-form-field-container-vertical-padding, 16px) 16px 8px;min-height:56px;box-sizing:border-box}.dbx-forge-form-field-wrapper-disabled .dbx-forge-form-field-content{opacity:.38;pointer-events:none}.dbx-forge-form-field-wrapper-disabled .dbx-forge-form-field-outline-leading,.dbx-forge-form-field-wrapper-disabled .dbx-forge-form-field-outline-notch,.dbx-forge-form-field-wrapper-disabled .dbx-forge-form-field-outline-trailing,.dbx-forge-form-field-wrapper-disabled:hover .dbx-forge-form-field-outline-leading,.dbx-forge-form-field-wrapper-disabled:hover .dbx-forge-form-field-outline-notch,.dbx-forge-form-field-wrapper-disabled:hover .dbx-forge-form-field-outline-trailing{border-color:var(--mdc-outlined-text-field-disabled-outline-color, rgba(0, 0, 0, .12))}.dbx-forge-form-field-wrapper-disabled .dbx-forge-form-field-outline-label{color:var(--mdc-outlined-text-field-disabled-label-text-color, rgba(0, 0, 0, .38))}\n"], dependencies: [{ kind: "pipe", type: DynamicTextPipe, name: "dynamicText" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxForgeFormFieldWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: DbxForgeFormFieldWrapperComponent, isStandalone: true, selector: "dbx-forge-form-field-wrapper", inputs: { fieldInputs: { classPropertyName: "fieldInputs", publicName: "fieldInputs", isSignal: true, isRequired: false, transformFunction: null }, props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classNameSignal()" }, classAttribute: "mat-mdc-form-field mat-form-field-animations-enabled" }, viewQueries: [{ propertyName: "fieldComponent", first: true, predicate: ["fieldComponent"], descendants: true, read: ViewContainerRef, isSignal: true }], ngImport: i0, template: "<div class=\"dbx-forge-form-field-wrapper\" [class.dbx-forge-form-field-wrapper-error]=\"hasError()\" [class.dbx-forge-form-field-wrapper-disabled]=\"isDisabled()\" role=\"group\" [attr.aria-labelledby]=\"label() ? labelId() : null\">\n  <div class=\"dbx-forge-form-field-outline\">\n    <div class=\"dbx-forge-form-field-outline-leading\"></div>\n    <div class=\"dbx-forge-form-field-outline-notch\" [class.dbx-forge-form-field-outline-notch-empty]=\"!label()\">\n      @if (label(); as labelText) {\n        <span class=\"dbx-forge-form-field-outline-label\" [id]=\"labelId()\">\n          {{ labelText | dynamicText | async }}\n          @if (isRequired()) {\n            <span aria-hidden=\"true\" class=\"mat-mdc-form-field-required-marker mdc-floating-label--required\"></span>\n          }\n        </span>\n      }\n    </div>\n    <div class=\"dbx-forge-form-field-outline-trailing\"></div>\n  </div>\n  <div class=\"dbx-forge-form-field-content\">\n    <ng-container #fieldComponent></ng-container>\n  </div>\n</div>\n<div class=\"mat-mdc-form-field-subscript-wrapper mat-mdc-form-field-bottom-align mat-mdc-form-field-subscript-dynamic-size\">\n  @if (showErrors()) {\n    <div class=\"mat-mdc-form-field-error-wrapper\">\n      <div class=\"mat-mdc-form-field-error mat-mdc-form-field-bottom-align\" [id]=\"errorId()\">{{ firstErrorMessage() }}</div>\n    </div>\n  } @else if (hintSignal(); as hint) {\n    <div class=\"mat-mdc-form-field-hint-wrapper\">\n      <div class=\"mat-mdc-form-field-hint mat-mdc-form-field-bottom-align\" [id]=\"hintId()\">{{ hint }}</div>\n    </div>\n  }\n</div>\n", styles: [".dbx-forge-form-field-wrapper{position:relative;margin-top:8px}.dbx-forge-form-field-outline{display:flex;position:absolute;inset:0;pointer-events:none}.dbx-forge-form-field-outline-leading{border:1px solid var(--mdc-outlined-text-field-outline-color, var(--mat-sys-outline, rgba(0, 0, 0, .38)));border-right:none;border-radius:var(--mdc-outlined-text-field-container-shape, 8px) 0 0 var(--mdc-outlined-text-field-container-shape, 8px);width:12px}.dbx-forge-form-field-outline-notch{border-bottom:1px solid var(--mdc-outlined-text-field-outline-color, var(--mat-sys-outline, rgba(0, 0, 0, .38)));display:flex;align-items:flex-start;max-width:calc(100% - 24px)}.dbx-forge-form-field-outline-notch-empty{border-top:1px solid var(--mdc-outlined-text-field-outline-color, var(--mat-sys-outline, rgba(0, 0, 0, .38)));width:0;padding:0}.dbx-forge-form-field-outline-label{display:inline-block;transform:translateY(-50%);pointer-events:auto;padding:0 4px;background:var(--mat-sys-surface, white);white-space:nowrap;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--mat-form-field-outlined-label-text-populated-font, var(--mat-sys-body-small-font));font-size:var(--mat-form-field-outlined-label-text-populated-size, var(--mat-sys-body-small-size));line-height:var(--mat-form-field-outlined-label-text-populated-line-height, var(--mat-sys-body-small-line-height));letter-spacing:var(--mat-form-field-outlined-label-text-populated-tracking, var(--mat-sys-body-small-tracking));font-weight:var(--mat-form-field-outlined-label-text-populated-weight, var(--mat-sys-body-small-weight));color:var(--mdc-outlined-text-field-label-text-color, var(--mat-sys-on-surface-variant, rgba(0, 0, 0, .6)))}.dbx-forge-form-field-outline-trailing{border:1px solid var(--mdc-outlined-text-field-outline-color, var(--mat-sys-outline, rgba(0, 0, 0, .38)));border-left:none;border-radius:0 var(--mdc-outlined-text-field-container-shape, 8px) var(--mdc-outlined-text-field-container-shape, 8px) 0;flex-grow:1}.dbx-forge-form-field-wrapper:hover .dbx-forge-form-field-outline-leading,.dbx-forge-form-field-wrapper:hover .dbx-forge-form-field-outline-notch,.dbx-forge-form-field-wrapper:hover .dbx-forge-form-field-outline-trailing{border-color:var(--mdc-outlined-text-field-hover-outline-color, var(--mat-sys-on-surface, rgba(0, 0, 0, .87)))}.dbx-forge-form-field-wrapper:focus-within .dbx-forge-form-field-outline-leading,.dbx-forge-form-field-wrapper:focus-within .dbx-forge-form-field-outline-notch,.dbx-forge-form-field-wrapper:focus-within .dbx-forge-form-field-outline-trailing{border-color:var(--mdc-outlined-text-field-focus-outline-color, var(--mat-sys-primary));border-width:2px}.dbx-forge-form-field-wrapper:focus-within .dbx-forge-form-field-outline-label{color:var(--mdc-outlined-text-field-focus-label-text-color, var(--mat-sys-primary));padding:0 3px}.dbx-forge-form-field-wrapper-error .dbx-forge-form-field-outline-leading,.dbx-forge-form-field-wrapper-error .dbx-forge-form-field-outline-notch,.dbx-forge-form-field-wrapper-error .dbx-forge-form-field-outline-trailing,.dbx-forge-form-field-wrapper-error:focus-within .dbx-forge-form-field-outline-leading,.dbx-forge-form-field-wrapper-error:focus-within .dbx-forge-form-field-outline-notch,.dbx-forge-form-field-wrapper-error:focus-within .dbx-forge-form-field-outline-trailing{border-color:var(--mdc-outlined-text-field-error-outline-color, var(--mat-sys-error, #f44336))}.dbx-forge-form-field-wrapper-error .dbx-forge-form-field-outline-label,.dbx-forge-form-field-wrapper-error:focus-within .dbx-forge-form-field-outline-label{color:var(--mdc-outlined-text-field-error-label-text-color, var(--mat-sys-error, #f44336))}.dbx-forge-form-field-content{position:relative;padding:var(--mat-form-field-container-vertical-padding, 16px) 16px 8px;min-height:56px;box-sizing:border-box}.dbx-forge-form-field-wrapper-disabled .dbx-forge-form-field-content{opacity:.38;pointer-events:none}.dbx-forge-form-field-wrapper-disabled .dbx-forge-form-field-outline-leading,.dbx-forge-form-field-wrapper-disabled .dbx-forge-form-field-outline-notch,.dbx-forge-form-field-wrapper-disabled .dbx-forge-form-field-outline-trailing,.dbx-forge-form-field-wrapper-disabled:hover .dbx-forge-form-field-outline-leading,.dbx-forge-form-field-wrapper-disabled:hover .dbx-forge-form-field-outline-notch,.dbx-forge-form-field-wrapper-disabled:hover .dbx-forge-form-field-outline-trailing{border-color:var(--mdc-outlined-text-field-disabled-outline-color, rgba(0, 0, 0, .12))}.dbx-forge-form-field-wrapper-disabled .dbx-forge-form-field-outline-label{color:var(--mdc-outlined-text-field-disabled-label-text-color, rgba(0, 0, 0, .38))}\n"], dependencies: [{ kind: "pipe", type: DynamicTextPipe, name: "dynamicText" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxForgeFormFieldWrapperComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxForgeFormFieldWrapperComponent, decorators: [{
             type: Component,
             args: [{ selector: 'dbx-forge-form-field-wrapper', imports: [DynamicTextPipe, AsyncPipe], changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, host: {
                         class: 'mat-mdc-form-field mat-form-field-animations-enabled',
                         '[class]': 'classNameSignal()'
                     }, template: "<div class=\"dbx-forge-form-field-wrapper\" [class.dbx-forge-form-field-wrapper-error]=\"hasError()\" [class.dbx-forge-form-field-wrapper-disabled]=\"isDisabled()\" role=\"group\" [attr.aria-labelledby]=\"label() ? labelId() : null\">\n  <div class=\"dbx-forge-form-field-outline\">\n    <div class=\"dbx-forge-form-field-outline-leading\"></div>\n    <div class=\"dbx-forge-form-field-outline-notch\" [class.dbx-forge-form-field-outline-notch-empty]=\"!label()\">\n      @if (label(); as labelText) {\n        <span class=\"dbx-forge-form-field-outline-label\" [id]=\"labelId()\">\n          {{ labelText | dynamicText | async }}\n          @if (isRequired()) {\n            <span aria-hidden=\"true\" class=\"mat-mdc-form-field-required-marker mdc-floating-label--required\"></span>\n          }\n        </span>\n      }\n    </div>\n    <div class=\"dbx-forge-form-field-outline-trailing\"></div>\n  </div>\n  <div class=\"dbx-forge-form-field-content\">\n    <ng-container #fieldComponent></ng-container>\n  </div>\n</div>\n<div class=\"mat-mdc-form-field-subscript-wrapper mat-mdc-form-field-bottom-align mat-mdc-form-field-subscript-dynamic-size\">\n  @if (showErrors()) {\n    <div class=\"mat-mdc-form-field-error-wrapper\">\n      <div class=\"mat-mdc-form-field-error mat-mdc-form-field-bottom-align\" [id]=\"errorId()\">{{ firstErrorMessage() }}</div>\n    </div>\n  } @else if (hintSignal(); as hint) {\n    <div class=\"mat-mdc-form-field-hint-wrapper\">\n      <div class=\"mat-mdc-form-field-hint mat-mdc-form-field-bottom-align\" [id]=\"hintId()\">{{ hint }}</div>\n    </div>\n  }\n</div>\n", styles: [".dbx-forge-form-field-wrapper{position:relative;margin-top:8px}.dbx-forge-form-field-outline{display:flex;position:absolute;inset:0;pointer-events:none}.dbx-forge-form-field-outline-leading{border:1px solid var(--mdc-outlined-text-field-outline-color, var(--mat-sys-outline, rgba(0, 0, 0, .38)));border-right:none;border-radius:var(--mdc-outlined-text-field-container-shape, 8px) 0 0 var(--mdc-outlined-text-field-container-shape, 8px);width:12px}.dbx-forge-form-field-outline-notch{border-bottom:1px solid var(--mdc-outlined-text-field-outline-color, var(--mat-sys-outline, rgba(0, 0, 0, .38)));display:flex;align-items:flex-start;max-width:calc(100% - 24px)}.dbx-forge-form-field-outline-notch-empty{border-top:1px solid var(--mdc-outlined-text-field-outline-color, var(--mat-sys-outline, rgba(0, 0, 0, .38)));width:0;padding:0}.dbx-forge-form-field-outline-label{display:inline-block;transform:translateY(-50%);pointer-events:auto;padding:0 4px;background:var(--mat-sys-surface, white);white-space:nowrap;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--mat-form-field-outlined-label-text-populated-font, var(--mat-sys-body-small-font));font-size:var(--mat-form-field-outlined-label-text-populated-size, var(--mat-sys-body-small-size));line-height:var(--mat-form-field-outlined-label-text-populated-line-height, var(--mat-sys-body-small-line-height));letter-spacing:var(--mat-form-field-outlined-label-text-populated-tracking, var(--mat-sys-body-small-tracking));font-weight:var(--mat-form-field-outlined-label-text-populated-weight, var(--mat-sys-body-small-weight));color:var(--mdc-outlined-text-field-label-text-color, var(--mat-sys-on-surface-variant, rgba(0, 0, 0, .6)))}.dbx-forge-form-field-outline-trailing{border:1px solid var(--mdc-outlined-text-field-outline-color, var(--mat-sys-outline, rgba(0, 0, 0, .38)));border-left:none;border-radius:0 var(--mdc-outlined-text-field-container-shape, 8px) var(--mdc-outlined-text-field-container-shape, 8px) 0;flex-grow:1}.dbx-forge-form-field-wrapper:hover .dbx-forge-form-field-outline-leading,.dbx-forge-form-field-wrapper:hover .dbx-forge-form-field-outline-notch,.dbx-forge-form-field-wrapper:hover .dbx-forge-form-field-outline-trailing{border-color:var(--mdc-outlined-text-field-hover-outline-color, var(--mat-sys-on-surface, rgba(0, 0, 0, .87)))}.dbx-forge-form-field-wrapper:focus-within .dbx-forge-form-field-outline-leading,.dbx-forge-form-field-wrapper:focus-within .dbx-forge-form-field-outline-notch,.dbx-forge-form-field-wrapper:focus-within .dbx-forge-form-field-outline-trailing{border-color:var(--mdc-outlined-text-field-focus-outline-color, var(--mat-sys-primary));border-width:2px}.dbx-forge-form-field-wrapper:focus-within .dbx-forge-form-field-outline-label{color:var(--mdc-outlined-text-field-focus-label-text-color, var(--mat-sys-primary));padding:0 3px}.dbx-forge-form-field-wrapper-error .dbx-forge-form-field-outline-leading,.dbx-forge-form-field-wrapper-error .dbx-forge-form-field-outline-notch,.dbx-forge-form-field-wrapper-error .dbx-forge-form-field-outline-trailing,.dbx-forge-form-field-wrapper-error:focus-within .dbx-forge-form-field-outline-leading,.dbx-forge-form-field-wrapper-error:focus-within .dbx-forge-form-field-outline-notch,.dbx-forge-form-field-wrapper-error:focus-within .dbx-forge-form-field-outline-trailing{border-color:var(--mdc-outlined-text-field-error-outline-color, var(--mat-sys-error, #f44336))}.dbx-forge-form-field-wrapper-error .dbx-forge-form-field-outline-label,.dbx-forge-form-field-wrapper-error:focus-within .dbx-forge-form-field-outline-label{color:var(--mdc-outlined-text-field-error-label-text-color, var(--mat-sys-error, #f44336))}.dbx-forge-form-field-content{position:relative;padding:var(--mat-form-field-container-vertical-padding, 16px) 16px 8px;min-height:56px;box-sizing:border-box}.dbx-forge-form-field-wrapper-disabled .dbx-forge-form-field-content{opacity:.38;pointer-events:none}.dbx-forge-form-field-wrapper-disabled .dbx-forge-form-field-outline-leading,.dbx-forge-form-field-wrapper-disabled .dbx-forge-form-field-outline-notch,.dbx-forge-form-field-wrapper-disabled .dbx-forge-form-field-outline-trailing,.dbx-forge-form-field-wrapper-disabled:hover .dbx-forge-form-field-outline-leading,.dbx-forge-form-field-wrapper-disabled:hover .dbx-forge-form-field-outline-notch,.dbx-forge-form-field-wrapper-disabled:hover .dbx-forge-form-field-outline-trailing{border-color:var(--mdc-outlined-text-field-disabled-outline-color, rgba(0, 0, 0, .12))}.dbx-forge-form-field-wrapper-disabled .dbx-forge-form-field-outline-label{color:var(--mdc-outlined-text-field-disabled-label-text-color, rgba(0, 0, 0, .38))}\n"] }]
-        }], propDecorators: { fieldComponent: [{ type: i0.ViewChild, args: ['fieldComponent', { ...{ read: ViewContainerRef }, isSignal: true }] }], fieldInputs: [{ type: i0.Input, args: [{ isSignal: true, alias: "fieldInputs", required: false }] }] } });
+        }], propDecorators: { fieldComponent: [{ type: i0.ViewChild, args: ['fieldComponent', { ...{ read: ViewContainerRef }, isSignal: true }] }], fieldInputs: [{ type: i0.Input, args: [{ isSignal: true, alias: "fieldInputs", required: false }] }], props: [{ type: i0.Input, args: [{ isSignal: true, alias: "props", required: false }] }] } });
 
 var formfield_wrapper_component = /*#__PURE__*/Object.freeze({
     __proto__: null,
@@ -10459,8 +10625,8 @@ class DbxForgeWorkingWrapperComponent {
     showLoading = computed(() => {
         return this.fieldSignalContext.form().pending();
     }, ...(ngDevMode ? [{ debugName: "showLoading" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxForgeWorkingWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: DbxForgeWorkingWrapperComponent, isStandalone: true, selector: "dbx-forge-working-wrapper", viewQueries: [{ propertyName: "fieldComponent", first: true, predicate: ["fieldComponent"], descendants: true, read: ViewContainerRef, isSignal: true }], ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxForgeWorkingWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: DbxForgeWorkingWrapperComponent, isStandalone: true, selector: "dbx-forge-working-wrapper", viewQueries: [{ propertyName: "fieldComponent", first: true, predicate: ["fieldComponent"], descendants: true, read: ViewContainerRef, isSignal: true }], ngImport: i0, template: `
     <div class="dbx-forge-working-wrapper">
       <ng-container #fieldComponent></ng-container>
       @if (showLoading()) {
@@ -10469,7 +10635,7 @@ class DbxForgeWorkingWrapperComponent {
     </div>
   `, isInline: true, dependencies: [{ kind: "ngmodule", type: MatProgressBarModule }, { kind: "component", type: i1$a.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxForgeWorkingWrapperComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxForgeWorkingWrapperComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'dbx-forge-working-wrapper',
@@ -10505,20 +10671,16 @@ const DBX_FORGE_WORKING_WRAPPER_TYPE_NAME = 'dbx-forge-working-wrapper';
  * Default template for a view that extends AbstractSyncForgeFormDirective or AbstractConfigAsyncForgeFormDirective.
  */
 const DBX_FORGE_FORM_COMPONENT_TEMPLATE = `<dbx-forge></dbx-forge>`;
-/**
- * Default providers for a view that extends AbstractSyncForgeFormDirective or AbstractConfigAsyncForgeFormDirective.
- */
-const dbxForgeFormComponentProviders = provideDbxForgeFormContext;
 const dbxForgeFormComponentImports = [DbxForgeFormComponent];
 /**
  * Default imports module for a view that extends AbstractSyncForgeFormDirective or AbstractConfigAsyncForgeFormDirective.
  */
 class DbxForgeFormComponentImportsModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxForgeFormComponentImportsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.4", ngImport: i0, type: DbxForgeFormComponentImportsModule, imports: [DbxForgeFormComponent], exports: [DbxForgeFormComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxForgeFormComponentImportsModule, imports: [dbxForgeFormComponentImports] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxForgeFormComponentImportsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.10", ngImport: i0, type: DbxForgeFormComponentImportsModule, imports: [DbxForgeFormComponent], exports: [DbxForgeFormComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxForgeFormComponentImportsModule, imports: [dbxForgeFormComponentImports] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxForgeFormComponentImportsModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxForgeFormComponentImportsModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: dbxForgeFormComponentImports,
@@ -10556,10 +10718,10 @@ class AbstractForgeFormDirective {
     setDisabled(key, disabled) {
         this.context.setDisabled(key, disabled);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: AbstractForgeFormDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.4", type: AbstractForgeFormDirective, isStandalone: true, inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: AbstractForgeFormDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.10", type: AbstractForgeFormDirective, isStandalone: true, inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: AbstractForgeFormDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: AbstractForgeFormDirective, decorators: [{
             type: Directive
         }], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
 /**
@@ -10569,10 +10731,10 @@ class AbstractSyncForgeFormDirective extends AbstractForgeFormDirective {
     ngOnInit() {
         this.context.config = this.formConfig;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: AbstractSyncForgeFormDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.4", type: AbstractSyncForgeFormDirective, isStandalone: true, usesInheritance: true, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: AbstractSyncForgeFormDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.10", type: AbstractSyncForgeFormDirective, isStandalone: true, usesInheritance: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: AbstractSyncForgeFormDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: AbstractSyncForgeFormDirective, decorators: [{
             type: Directive
         }] });
 /**
@@ -10589,10 +10751,10 @@ class AbstractAsyncForgeFormDirective extends AbstractForgeFormDirective {
     ngOnDestroy() {
         this._configSub.destroy();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: AbstractAsyncForgeFormDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.4", type: AbstractAsyncForgeFormDirective, isStandalone: true, usesInheritance: true, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: AbstractAsyncForgeFormDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.10", type: AbstractAsyncForgeFormDirective, isStandalone: true, usesInheritance: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: AbstractAsyncForgeFormDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: AbstractAsyncForgeFormDirective, decorators: [{
             type: Directive
         }] });
 /**
@@ -10608,10 +10770,10 @@ class AbstractConfigAsyncForgeFormDirective extends AbstractAsyncForgeFormDirect
      */
     config = model(...(ngDevMode ? [undefined, { debugName: "config" }] : /* istanbul ignore next */ []));
     currentConfig$ = toObservable(this.config).pipe(maybeValueFromObservableOrValue());
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: AbstractConfigAsyncForgeFormDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.4", type: AbstractConfigAsyncForgeFormDirective, isStandalone: true, inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { config: "configChange" }, usesInheritance: true, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: AbstractConfigAsyncForgeFormDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.10", type: AbstractConfigAsyncForgeFormDirective, isStandalone: true, inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { config: "configChange" }, usesInheritance: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: AbstractConfigAsyncForgeFormDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: AbstractConfigAsyncForgeFormDirective, decorators: [{
             type: Directive
         }], propDecorators: { config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: false }] }, { type: i0.Output, args: ["configChange"] }] } });
 
@@ -10622,15 +10784,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
  */
 class DbxForgeAsyncConfigFormComponent extends AbstractConfigAsyncForgeFormDirective {
     formConfig$ = this.currentConfig$;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxForgeAsyncConfigFormComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: DbxForgeAsyncConfigFormComponent, isStandalone: true, selector: "dbx-forge-form", providers: dbxForgeFormComponentProviders(), usesInheritance: true, ngImport: i0, template: "<dbx-forge></dbx-forge>", isInline: true, dependencies: [{ kind: "ngmodule", type: DbxForgeFormComponentImportsModule }, { kind: "component", type: DbxForgeFormComponent, selector: "dbx-forge" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxForgeAsyncConfigFormComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.10", type: DbxForgeAsyncConfigFormComponent, isStandalone: true, selector: "dbx-forge-form", providers: provideDbxForgeFormContext(), usesInheritance: true, ngImport: i0, template: "<dbx-forge></dbx-forge>", isInline: true, dependencies: [{ kind: "ngmodule", type: DbxForgeFormComponentImportsModule }, { kind: "component", type: DbxForgeFormComponent, selector: "dbx-forge" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxForgeAsyncConfigFormComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxForgeAsyncConfigFormComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'dbx-forge-form',
                     template: DBX_FORGE_FORM_COMPONENT_TEMPLATE,
-                    providers: dbxForgeFormComponentProviders(),
+                    providers: provideDbxForgeFormContext(),
                     imports: [DbxForgeFormComponentImportsModule],
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     standalone: true
@@ -10717,12 +10879,12 @@ const DBX_FORGE_FIELD_TYPES = [
     // -- Wrapper-related fields --
     {
         name: FORGE_EXPAND_FIELD_TYPE_NAME,
-        loadComponent: () => import('./dereekb-dbx-form-expand.field.component-Bp5_uO1A.mjs').then((m) => m.DbxForgeExpandFieldComponent),
+        loadComponent: () => import('./dereekb-dbx-form-expand.field.component-C-U67kCE.mjs').then((m) => m.DbxForgeExpandFieldComponent),
         mapper: valueFieldMapper
     },
     {
         name: FORGE_INFO_BUTTON_FIELD_TYPE_NAME,
-        loadComponent: () => import('./dereekb-dbx-form-info.field.component-B0cFprvc.mjs').then((m) => m.DbxForgeInfoButtonFieldComponent),
+        loadComponent: () => import('./dereekb-dbx-form-info.field.component-CfUse-zd.mjs').then((m) => m.DbxForgeInfoButtonFieldComponent),
         mapper: valueFieldMapper
     }
 ];
@@ -10736,15 +10898,15 @@ const DBX_FORGE_FIELD_WRAPPER_TYPES = [
     },
     {
         wrapperName: DBX_FORGE_SECTION_WRAPPER_TYPE_NAME,
-        loadComponent: () => import('./dereekb-dbx-form-section.wrapper.component-vq21oG6v.mjs').then((m) => m.DbxForgeSectionWrapperComponent)
+        loadComponent: () => import('./dereekb-dbx-form-section.wrapper.component-6BCFOu3o.mjs').then((m) => m.DbxForgeSectionWrapperComponent)
     },
     {
         wrapperName: DBX_FORGE_STYLE_WRAPPER_TYPE_NAME,
-        loadComponent: () => import('./dereekb-dbx-form-style.wrapper.component-BbKj-IHD.mjs').then((m) => m.DbxForgeStyleWrapperComponent)
+        loadComponent: () => import('./dereekb-dbx-form-style.wrapper.component-BJs4BnH0.mjs').then((m) => m.DbxForgeStyleWrapperComponent)
     },
     {
         wrapperName: DBX_FORGE_INFO_WRAPPER_TYPE_NAME,
-        loadComponent: () => import('./dereekb-dbx-form-info.wrapper.component-18n632L-.mjs').then((m) => m.DbxForgeInfoWrapperComponent)
+        loadComponent: () => import('./dereekb-dbx-form-info.wrapper.component-BdtiodXl.mjs').then((m) => m.DbxForgeInfoWrapperComponent)
     },
     {
         wrapperName: DBX_FORGE_WORKING_WRAPPER_TYPE_NAME,
@@ -10752,7 +10914,7 @@ const DBX_FORGE_FIELD_WRAPPER_TYPES = [
     },
     {
         wrapperName: DBX_FORGE_FLEX_WRAPPER_TYPE_NAME,
-        loadComponent: () => import('./dereekb-dbx-form-flex.wrapper.component-CpOHCk87.mjs').then((m) => m.DbxForgeFlexWrapperComponent)
+        loadComponent: () => import('./dereekb-dbx-form-flex.wrapper.component-DIDKGVO5.mjs').then((m) => m.DbxForgeFlexWrapperComponent)
     },
     {
         wrapperName: DBX_FORGE_ARRAY_FIELD_WRAPPER_NAME,
@@ -10828,19 +10990,19 @@ class DbxFormSearchFormComponent extends AbstractConfigAsyncForgeFormDirective {
     searchChanged(value) {
         this.search.emit(value?.search ?? '');
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxFormSearchFormComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: DbxFormSearchFormComponent, isStandalone: true, selector: "dbx-form-search-form", outputs: { search: "search" }, host: { classAttribute: "d-block dbx-form-search-form" }, providers: dbxForgeFormComponentProviders(), usesInheritance: true, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxFormSearchFormComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.10", type: DbxFormSearchFormComponent, isStandalone: true, selector: "dbx-form-search-form", outputs: { search: "search" }, host: { classAttribute: "d-block dbx-form-search-form" }, providers: provideDbxForgeFormContext(), usesInheritance: true, ngImport: i0, template: `
     <dbx-forge (dbxFormValueChange)="searchChanged($event)"></dbx-forge>
   `, isInline: true, dependencies: [{ kind: "ngmodule", type: DbxForgeFormComponentImportsModule }, { kind: "component", type: DbxForgeFormComponent, selector: "dbx-forge" }, { kind: "directive", type: DbxFormValueChangeDirective, selector: "[dbxFormValueChange]", outputs: ["dbxFormValueChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxFormSearchFormComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxFormSearchFormComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'dbx-form-search-form',
                     template: `
     <dbx-forge (dbxFormValueChange)="searchChanged($event)"></dbx-forge>
   `,
-                    providers: dbxForgeFormComponentProviders(),
+                    providers: provideDbxForgeFormContext(),
                     imports: [DbxForgeFormComponentImportsModule, DbxFormValueChangeDirective],
                     standalone: true,
                     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -11252,8 +11414,8 @@ class DbxDefaultChecklistItemFieldDisplayComponent {
     setDisplayContent(displayContent) {
         this._displayContentSignal.set(displayContent);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxDefaultChecklistItemFieldDisplayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: DbxDefaultChecklistItemFieldDisplayComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxDefaultChecklistItemFieldDisplayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: DbxDefaultChecklistItemFieldDisplayComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: `
     @if (displayContentSignal()) {
       <div class="dbx-default-checklist-item-field">
         @if (displayContentSignal()?.label) {
@@ -11269,7 +11431,7 @@ class DbxDefaultChecklistItemFieldDisplayComponent {
     }
   `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxDefaultChecklistItemFieldDisplayComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxDefaultChecklistItemFieldDisplayComponent, decorators: [{
             type: Component,
             args: [{
                     template: `
@@ -11307,12 +11469,12 @@ class DbxChecklistItemContentComponent {
             }));
         }
     };
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxChecklistItemContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: DbxChecklistItemContentComponent, isStandalone: true, selector: "dbx-checklist-item-content-component", ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxChecklistItemContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.10", type: DbxChecklistItemContentComponent, isStandalone: true, selector: "dbx-checklist-item-content-component", ngImport: i0, template: `
     <dbx-injection [config]="config"></dbx-injection>
   `, isInline: true, dependencies: [{ kind: "component", type: DbxInjectionComponent, selector: "dbx-injection, [dbxInjection], [dbx-injection]", inputs: ["config", "template"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxChecklistItemContentComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxChecklistItemContentComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'dbx-checklist-item-content-component',
@@ -11366,10 +11528,10 @@ class DbxChecklistItemFieldComponent extends FieldType$1 {
         // field prop is finally available here
         this._displayContentObs.set(this.checklistField.displayContent);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxChecklistItemFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", 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],[formArray],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$4.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "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$1.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$7.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 ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxChecklistItemFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", 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],[formArray],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$4.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "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$1.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$7.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: "21.2.4", ngImport: i0, type: DbxChecklistItemFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxChecklistItemFieldComponent, decorators: [{
             type: Component,
             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" }]
         }] });
@@ -11387,8 +11549,8 @@ class DbxFormInfoWrapperComponent extends FieldWrapper {
     onInfoClick() {
         this.infoWrapper.onInfoClick();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxFormInfoWrapperComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: DbxFormInfoWrapperComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxFormInfoWrapperComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.10", type: DbxFormInfoWrapperComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
     <div class="dbx-form-info-wrapper dbx-flex-bar">
       <div class="dbx-form-info-wrapper-content dbx-flex-grow">
         <ng-container #fieldComponent></ng-container>
@@ -11401,7 +11563,7 @@ class DbxFormInfoWrapperComponent extends FieldWrapper {
     </div>
   `, isInline: true, dependencies: [{ kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxFormInfoWrapperComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxFormInfoWrapperComponent, decorators: [{
             type: Component,
             args: [{
                     template: `
@@ -11434,14 +11596,14 @@ class DbxFormSectionWrapperComponent extends FieldWrapper {
     get headerConfig() {
         return this.props;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxFormSectionWrapperComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: DbxFormSectionWrapperComponent, isStandalone: true, selector: "dbx-form-section-wrapper", usesInheritance: true, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxFormSectionWrapperComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.10", type: DbxFormSectionWrapperComponent, isStandalone: true, selector: "dbx-form-section-wrapper", usesInheritance: true, ngImport: i0, template: `
     <dbx-section [headerConfig]="headerConfig">
       <ng-container #fieldComponent></ng-container>
     </dbx-section>
   `, isInline: true, dependencies: [{ kind: "ngmodule", type: DbxSectionLayoutModule }, { kind: "component", type: i1$3.DbxSectionComponent, selector: "dbx-section", inputs: ["elevate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxFormSectionWrapperComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxFormSectionWrapperComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'dbx-form-section-wrapper',
@@ -11475,14 +11637,14 @@ class DbxFormFlexWrapperComponent extends FieldWrapper {
     get breakToColumn() {
         return this.flexWrapper.breakToColumn ?? false;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxFormFlexWrapperComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: DbxFormFlexWrapperComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxFormFlexWrapperComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.10", type: DbxFormFlexWrapperComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
     <div class="dbx-form-flex-section" dbxFlexGroup [content]="false" [relative]="relative" [breakpoint]="breakpoint" [breakToColumn]="breakToColumn">
       <ng-container #fieldComponent></ng-container>
     </div>
   `, isInline: true, dependencies: [{ kind: "directive", type: DbxFlexGroupDirective, selector: "[dbxFlexGroup]", inputs: ["content", "breakToColumn", "relative", "breakpoint"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxFormFlexWrapperComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxFormFlexWrapperComponent, decorators: [{
             type: Component,
             args: [{
                     template: `
@@ -11508,14 +11670,14 @@ class DbxFormSubsectionWrapperComponent extends FieldWrapper {
     get headerConfig() {
         return this.props;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxFormSubsectionWrapperComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: DbxFormSubsectionWrapperComponent, isStandalone: true, selector: "dbx-form-subsection-wrapper", usesInheritance: true, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxFormSubsectionWrapperComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.10", type: DbxFormSubsectionWrapperComponent, isStandalone: true, selector: "dbx-form-subsection-wrapper", usesInheritance: true, ngImport: i0, template: `
     <dbx-subsection [headerConfig]="headerConfig">
       <ng-container #fieldComponent></ng-container>
     </dbx-subsection>
   `, isInline: true, dependencies: [{ kind: "component", type: DbxSubSectionComponent, selector: "dbx-subsection" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxFormSubsectionWrapperComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxFormSubsectionWrapperComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'dbx-form-subsection-wrapper',
@@ -11589,10 +11751,10 @@ class AbstractFormExpandSectionWrapperDirective extends FieldWrapper {
         this._toggleOpen.complete();
         this._formControlObs.complete();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: AbstractFormExpandSectionWrapperDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.4", type: AbstractFormExpandSectionWrapperDirective, isStandalone: true, usesInheritance: true, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: AbstractFormExpandSectionWrapperDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.10", type: AbstractFormExpandSectionWrapperDirective, isStandalone: true, usesInheritance: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: AbstractFormExpandSectionWrapperDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: AbstractFormExpandSectionWrapperDirective, decorators: [{
             type: Directive
         }] });
 
@@ -11603,8 +11765,8 @@ class DbxFormExpandWrapperComponent extends AbstractFormExpandSectionWrapperDire
     get buttonType() {
         return this.expandSection.buttonType ?? 'button';
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxFormExpandWrapperComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: DbxFormExpandWrapperComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxFormExpandWrapperComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: DbxFormExpandWrapperComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
     @if (showSignal()) {
       <div [id]="expandContentId" role="region" [attr.aria-label]="expandLabel">
         <ng-container #fieldComponent></ng-container>
@@ -11614,7 +11776,7 @@ class DbxFormExpandWrapperComponent extends AbstractFormExpandSectionWrapperDire
     }
   `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxFormExpandWrapperComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxFormExpandWrapperComponent, decorators: [{
             type: Component,
             args: [{
                     template: `
@@ -11643,12 +11805,12 @@ class AutoTouchFieldWrapperComponent extends FieldWrapper {
             }
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: AutoTouchFieldWrapperComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: AutoTouchFieldWrapperComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: AutoTouchFieldWrapperComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.10", type: AutoTouchFieldWrapperComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
     <ng-container #fieldComponent></ng-container>
   `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: AutoTouchFieldWrapperComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: AutoTouchFieldWrapperComponent, decorators: [{
             type: Component,
             args: [{
                     template: `
@@ -11675,8 +11837,8 @@ class DbxFormToggleWrapperComponent extends AbstractFormExpandSectionWrapperDire
             this._toggleOpen.next(!show);
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxFormToggleWrapperComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: DbxFormToggleWrapperComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxFormToggleWrapperComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: DbxFormToggleWrapperComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
     <div class="dbx-form-toggle-wrapper">
       <div class="dbx-form-toggle-wrapper-toggle">
         <mat-slide-toggle [checked]="showSignal()" [attr.aria-expanded]="showSignal()" [attr.aria-controls]="expandContentId" (toggleChange)="onToggleChange()">{{ slideLabelSignal() }}</mat-slide-toggle>
@@ -11689,7 +11851,7 @@ class DbxFormToggleWrapperComponent extends AbstractFormExpandSectionWrapperDire
     </div>
   `, isInline: true, dependencies: [{ kind: "component", type: MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxFormToggleWrapperComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxFormToggleWrapperComponent, decorators: [{
             type: Component,
             args: [{
                     template: `
@@ -11742,14 +11904,14 @@ class DbxFormStyleWrapperComponent extends FieldWrapper {
         this._style.complete();
         this._class.complete();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxFormStyleWrapperComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: DbxFormStyleWrapperComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxFormStyleWrapperComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.10", type: DbxFormStyleWrapperComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
     <div class="dbx-form-style-wrapper" [ngClass]="classSignal()" [ngStyle]="styleSignal()">
       <ng-container #fieldComponent></ng-container>
     </div>
   `, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxFormStyleWrapperComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxFormStyleWrapperComponent, decorators: [{
             type: Component,
             args: [{
                     template: `
@@ -11780,15 +11942,15 @@ class DbxFormWorkingWrapperComponent extends FieldWrapper {
         this.workingContext.destroy();
         this.sub.destroy();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxFormWorkingWrapperComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: DbxFormWorkingWrapperComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxFormWorkingWrapperComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.10", type: DbxFormWorkingWrapperComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
     <div class="dbx-form-working-wrapper">
       <ng-container #fieldComponent></ng-container>
       <dbx-loading [linear]="true" [context]="workingContext"></dbx-loading>
     </div>
   `, isInline: true, dependencies: [{ kind: "component", type: 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: "21.2.4", ngImport: i0, type: DbxFormWorkingWrapperComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxFormWorkingWrapperComponent, decorators: [{
             type: Component,
             args: [{
                     template: `
@@ -11858,8 +12020,8 @@ const importsAndExports$h = [
  * Registers all Formly field wrapper types (section, flex, expand, toggle, style, info, working, autotouch, subsection).
  */
 class DbxFormFormlyWrapperModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxFormFormlyWrapperModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.4", ngImport: i0, type: DbxFormFormlyWrapperModule, imports: [AutoTouchFieldWrapperComponent,
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxFormFormlyWrapperModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.10", ngImport: i0, type: DbxFormFormlyWrapperModule, imports: [AutoTouchFieldWrapperComponent,
             DbxFormSectionWrapperComponent,
             DbxFormSubsectionWrapperComponent,
             DbxFormInfoWrapperComponent,
@@ -11882,7 +12044,7 @@ class DbxFormFormlyWrapperModule {
             // Formly
             FormlyModule,
             FormlyMaterialModule] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxFormFormlyWrapperModule, imports: [DbxFormSectionWrapperComponent,
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxFormFormlyWrapperModule, imports: [DbxFormSectionWrapperComponent,
             DbxFormSubsectionWrapperComponent,
             DbxFormInfoWrapperComponent,
             DbxFormToggleWrapperComponent,
@@ -11906,7 +12068,7 @@ class DbxFormFormlyWrapperModule {
             FormlyModule,
             FormlyMaterialModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxFormFormlyWrapperModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxFormFormlyWrapperModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -11934,14 +12096,14 @@ const importsAndExports$g = [DbxChecklistItemFieldComponent, DbxChecklistItemCon
  * Registers the `checklistitem` Formly field type with wrapper support.
  */
 class DbxFormFormlyChecklistItemFieldModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxFormFormlyChecklistItemFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.4", ngImport: i0, type: DbxFormFormlyChecklistItemFieldModule, imports: [DbxChecklistItemFieldComponent, DbxChecklistItemContentComponent, DbxDefaultChecklistItemFieldDisplayComponent, DbxFormFormlyWrapperModule, i1$1.FormlyModule], exports: [DbxChecklistItemFieldComponent, DbxChecklistItemContentComponent, DbxDefaultChecklistItemFieldDisplayComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxFormFormlyChecklistItemFieldModule, imports: [DbxChecklistItemFieldComponent, DbxChecklistItemContentComponent, DbxFormFormlyWrapperModule,
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxFormFormlyChecklistItemFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.10", ngImport: i0, type: DbxFormFormlyChecklistItemFieldModule, imports: [DbxChecklistItemFieldComponent, DbxChecklistItemContentComponent, DbxDefaultChecklistItemFieldDisplayComponent, DbxFormFormlyWrapperModule, i1$1.FormlyModule], exports: [DbxChecklistItemFieldComponent, DbxChecklistItemContentComponent, DbxDefaultChecklistItemFieldDisplayComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxFormFormlyChecklistItemFieldModule, imports: [DbxChecklistItemFieldComponent, DbxChecklistItemContentComponent, DbxFormFormlyWrapperModule,
             FormlyModule.forChild({
                 types: [{ name: 'checklistitem', component: DbxChecklistItemFieldComponent }]
             })] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxFormFormlyChecklistItemFieldModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxFormFormlyChecklistItemFieldModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -12236,12 +12398,12 @@ class DbxFormComponentFieldComponent extends FieldType$1 {
     get config() {
         return this.field.componentField;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxFormComponentFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: DbxFormComponentFieldComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxFormComponentFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.10", type: DbxFormComponentFieldComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
     <div class="dbx-form-component" dbx-injection [config]="config"></div>
   `, isInline: true, dependencies: [{ kind: "component", type: DbxInjectionComponent, selector: "dbx-injection, [dbxInjection], [dbx-injection]", inputs: ["config", "template"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxFormComponentFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxFormComponentFieldComponent, decorators: [{
             type: Component,
             args: [{
                     template: `
@@ -12258,13 +12420,13 @@ const importsAndExports$f = [DbxFormComponentFieldComponent];
  * Registers the `component` Formly field type for custom Angular component injection.
  */
 class DbxFormFormlyComponentFieldModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxFormFormlyComponentFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.4", ngImport: i0, type: DbxFormFormlyComponentFieldModule, imports: [DbxFormComponentFieldComponent, i1$1.FormlyModule], exports: [DbxFormComponentFieldComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxFormFormlyComponentFieldModule, imports: [importsAndExports$f, FormlyModule.forChild({
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxFormFormlyComponentFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.10", ngImport: i0, type: DbxFormFormlyComponentFieldModule, imports: [DbxFormComponentFieldComponent, i1$1.FormlyModule], exports: [DbxFormComponentFieldComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxFormFormlyComponentFieldModule, imports: [importsAndExports$f, FormlyModule.forChild({
                 types: [{ name: 'component', component: DbxFormComponentFieldComponent }]
             })] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxFormFormlyComponentFieldModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxFormFormlyComponentFieldModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -12408,10 +12570,10 @@ class DbxItemListFieldComponent extends FieldType$1 {
             this.formControl.markAsTouched();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxItemListFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", 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$3.DbxValueListItemModifierDirective, selector: "dbxListItemModifier,[dbxListItemModifier]", inputs: ["dbxListItemModifier"] }, { kind: "directive", type: i1$3.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: i10.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxItemListFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", 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$3.DbxValueListItemModifierDirective, selector: "dbxListItemModifier,[dbxListItemModifier]", inputs: ["dbxListItemModifier"] }, { kind: "directive", type: i1$3.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: i10.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxItemListFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", 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" }]
         }] });
@@ -12421,13 +12583,13 @@ const importsAndExports$e = [DbxItemListFieldComponent];
  * Registers the `dbxlistfield` Formly field type for item list selection.
  */
 class DbxFormFormlyDbxListFieldModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxFormFormlyDbxListFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.4", ngImport: i0, type: DbxFormFormlyDbxListFieldModule, imports: [DbxItemListFieldComponent, i1$1.FormlyModule], exports: [DbxItemListFieldComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxFormFormlyDbxListFieldModule, imports: [importsAndExports$e, FormlyModule.forChild({
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxFormFormlyDbxListFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.10", ngImport: i0, type: DbxFormFormlyDbxListFieldModule, imports: [DbxItemListFieldComponent, i1$1.FormlyModule], exports: [DbxItemListFieldComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxFormFormlyDbxListFieldModule, imports: [importsAndExports$e, FormlyModule.forChild({
                 types: [{ name: 'dbxlistfield', component: DbxItemListFieldComponent }]
             })] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxFormFormlyDbxListFieldModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxFormFormlyDbxListFieldModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -12728,10 +12890,10 @@ class AbstractDbxPickableItemFieldDirective extends FieldType {
         this.formControl.markAsTouched();
         this.formControl.markAsDirty();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: AbstractDbxPickableItemFieldDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "21.2.4", type: AbstractDbxPickableItemFieldDirective, isStandalone: true, viewQueries: [{ propertyName: "filterMatInput", first: true, predicate: ["matInput"], descendants: true, read: MatInput, isSignal: true }], usesInheritance: true, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: AbstractDbxPickableItemFieldDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "21.2.10", type: AbstractDbxPickableItemFieldDirective, isStandalone: true, viewQueries: [{ propertyName: "filterMatInput", first: true, predicate: ["matInput"], descendants: true, read: MatInput, isSignal: true }], usesInheritance: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: AbstractDbxPickableItemFieldDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: AbstractDbxPickableItemFieldDirective, decorators: [{
             type: Directive
         }], propDecorators: { filterMatInput: [{ type: i0.ViewChild, args: ['matInput', { ...{ read: MatInput }, isSignal: true }] }] } });
 
@@ -12751,10 +12913,10 @@ class DbxPickableChipListFieldComponent extends AbstractDbxPickableItemFieldDire
             }
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxPickableChipListFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", 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        @if (showSelectAllButton && multiSelect && !isReadonlyOrDisabled) {\n          <mat-chip-option (click)=\"toggleAll()\" [selected]=\"allSelectedSignal()\">\n            <span class=\"dbx-chip-label\">All</span>\n          </mat-chip-option>\n        }\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\" [attr.aria-label]=\"filterLabel || 'Filter items'\" />\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\" role=\"status\">No items match this filter.</p>\n    }\n  </div>\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: MatChipsModule }, { kind: "directive", type: i1$8.MatChipAvatar, selector: "mat-chip-avatar, [matChipAvatar]" }, { kind: "component", type: i1$8.MatChipListbox, selector: "mat-chip-listbox", inputs: ["multiple", "aria-orientation", "selectable", "compareWith", "required", "hideSingleSelectionIndicator", "value"], outputs: ["change"] }, { kind: "component", type: i1$8.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$7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], 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 ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxPickableChipListFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", 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        @if (showSelectAllButton && multiSelect && !isReadonlyOrDisabled) {\n          <mat-chip-option (click)=\"toggleAll()\" [selected]=\"allSelectedSignal()\">\n            <span class=\"dbx-chip-label\">All</span>\n          </mat-chip-option>\n        }\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\" [attr.aria-label]=\"filterLabel || 'Filter items'\" />\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\" role=\"status\">No items match this filter.</p>\n    }\n  </div>\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: MatChipsModule }, { kind: "directive", type: i1$8.MatChipAvatar, selector: "mat-chip-avatar, [matChipAvatar]" }, { kind: "component", type: i1$8.MatChipListbox, selector: "mat-chip-listbox", inputs: ["multiple", "aria-orientation", "selectable", "compareWith", "required", "hideSingleSelectionIndicator", "value"], outputs: ["change"] }, { kind: "component", type: i1$8.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$7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], 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: "21.2.4", ngImport: i0, type: DbxPickableChipListFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxPickableChipListFieldComponent, decorators: [{
             type: Component,
             args: [{ imports: [MatChipsModule, NgTemplateOutlet, FormsModule, ReactiveFormsModule, MatIconModule, MatInputModule, DbxLoadingComponent, MatDivider, DbxInjectionComponent], changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "<div class=\"dbx-pickable-item-field\">\n  <dbx-loading [context]=\"context\" [linear]=\"true\">\n    @if (showFilterInput) {\n      <ng-container *ngTemplateOutlet=\"filterTemplate\"></ng-container>\n    }\n    <!-- Content -->\n    <div class=\"dbx-pickable-item-field-chips\">\n      <mat-chip-listbox [multiple]=\"multiSelect\" [required]=\"required\" [selectable]=\"!isReadonlyOrDisabled\" [disabled]=\"readonly\" #chipList>\n        @if (showSelectAllButton && multiSelect && !isReadonlyOrDisabled) {\n          <mat-chip-option (click)=\"toggleAll()\" [selected]=\"allSelectedSignal()\">\n            <span class=\"dbx-chip-label\">All</span>\n          </mat-chip-option>\n        }\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\" [attr.aria-label]=\"filterLabel || 'Filter items'\" />\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\" role=\"status\">No items match this filter.</p>\n    }\n  </div>\n</ng-template>\n" }]
         }] });
@@ -12769,10 +12931,10 @@ class DbxPickableListFieldItemListComponent extends AbstractDbxSelectionListWrap
             componentClass: DbxPickableListFieldItemListViewComponent
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxPickableListFieldItemListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", 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()\" [hasMore]=\"hasMore()\" [disabled]=\"disabledSignal()\" [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    <ng-content end select=\"[end]\"></ng-content>\n  </dbx-list>", isInline: true, dependencies: [{ kind: "ngmodule", type: DbxListWrapperComponentImportsModule }, { kind: "component", type: i1$3.DbxListComponent, selector: "dbx-list", inputs: ["padded", "state", "config", "disabled", "selectionMode", "hasMore"], outputs: ["contentScrolled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxPickableListFieldItemListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.10", 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()\" [hasMore]=\"hasMore()\" [disabled]=\"disabledSignal()\" [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    <ng-content end select=\"[end]\"></ng-content>\n  </dbx-list>", isInline: true, dependencies: [{ kind: "ngmodule", type: DbxListWrapperComponentImportsModule }, { kind: "component", type: i1$3.DbxListComponent, selector: "dbx-list", inputs: ["padded", "state", "config", "disabled", "selectionMode", "hasMore"], outputs: ["contentScrolled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxPickableListFieldItemListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxPickableListFieldItemListComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'dbx-form-pickable-item-field-item-list',
@@ -12808,12 +12970,12 @@ class DbxPickableListFieldItemListViewComponent extends AbstractDbxSelectionList
     // NOTE: This causes the "value" to be a PickableValueFieldDisplayValue<T>, which means we emit PickableValueFieldDisplayValue<T> to DbxPickableListFieldComponent.
     map((x) => addConfigToValueListItems(this.config, x)), shareReplay(1));
     itemsSignal = toSignal(this.items$);
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxPickableListFieldItemListViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: DbxPickableListFieldItemListViewComponent, isStandalone: true, selector: "ng-component", providers: provideDbxListView(DbxPickableListFieldItemListViewComponent), usesInheritance: true, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxPickableListFieldItemListViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.10", type: DbxPickableListFieldItemListViewComponent, isStandalone: true, selector: "ng-component", providers: provideDbxListView(DbxPickableListFieldItemListViewComponent), usesInheritance: true, ngImport: i0, template: `
     <dbx-selection-list-view-content [multiple]="multiple" [selectionMode]="selectionMode" [items]="itemsSignal()"></dbx-selection-list-view-content>
   `, isInline: true, dependencies: [{ kind: "component", type: DbxSelectionValueListViewContentComponent, selector: "dbx-selection-list-view-content", inputs: ["multiple", "selectionMode"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxPickableListFieldItemListViewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxPickableListFieldItemListViewComponent, decorators: [{
             type: Component,
             args: [{
                     template: `
@@ -12828,8 +12990,8 @@ class DbxPickableListFieldItemListViewItemComponent extends AbstractDbxValueList
     label = this.itemValue.label;
     sublabel = this.itemValue.sublabel;
     icon = this.itemValue.icon;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxPickableListFieldItemListViewItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: DbxPickableListFieldItemListViewItemComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxPickableListFieldItemListViewItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: DbxPickableListFieldItemListViewItemComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
     <div class="dbx-default-pickable-item-field-list-item dbx-flex-bar">
       @if (icon) {
         <mat-icon class="dbx-icon-spacer">{{ icon }}</mat-icon>
@@ -12841,7 +13003,7 @@ class DbxPickableListFieldItemListViewItemComponent extends AbstractDbxValueList
     </div>
   `, isInline: true, dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxPickableListFieldItemListViewItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxPickableListFieldItemListViewItemComponent, decorators: [{
             type: Component,
             args: [{
                     template: `
@@ -12873,10 +13035,10 @@ class DbxPickableListFieldComponent extends AbstractDbxPickableItemFieldDirectiv
         const values = items.map((x) => x.itemValue.value);
         this.setValues(values);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxPickableListFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", 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\" [attr.aria-label]=\"filterLabel || 'Filter items'\" />\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\" role=\"status\">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: i2$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], 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 ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxPickableListFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", 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\" [attr.aria-label]=\"filterLabel || 'Filter items'\" />\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\" role=\"status\">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: i2$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], 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: "21.2.4", ngImport: i0, type: DbxPickableListFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", 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\" [attr.aria-label]=\"filterLabel || 'Filter items'\" />\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\" role=\"status\">No items match this filter.</p>\n    }\n  </div>\n</ng-template>\n" }]
         }] });
@@ -12886,16 +13048,16 @@ const importsAndExports$d = [DbxPickableChipListFieldComponent, DbxPickableListF
  * Registers the `pickablechipfield` and `pickablelistfield` Formly field types.
  */
 class DbxFormFormlyPickableFieldModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxFormFormlyPickableFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.4", ngImport: i0, type: DbxFormFormlyPickableFieldModule, imports: [DbxPickableChipListFieldComponent, DbxPickableListFieldComponent, DbxPickableListFieldItemListComponent, DbxPickableListFieldItemListViewComponent, DbxPickableListFieldItemListViewItemComponent, i1$1.FormlyModule], exports: [DbxPickableChipListFieldComponent, DbxPickableListFieldComponent, DbxPickableListFieldItemListComponent, DbxPickableListFieldItemListViewComponent, DbxPickableListFieldItemListViewItemComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxFormFormlyPickableFieldModule, imports: [importsAndExports$d, FormlyModule.forChild({
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxFormFormlyPickableFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.10", ngImport: i0, type: DbxFormFormlyPickableFieldModule, imports: [DbxPickableChipListFieldComponent, DbxPickableListFieldComponent, DbxPickableListFieldItemListComponent, DbxPickableListFieldItemListViewComponent, DbxPickableListFieldItemListViewItemComponent, i1$1.FormlyModule], exports: [DbxPickableChipListFieldComponent, DbxPickableListFieldComponent, DbxPickableListFieldItemListComponent, DbxPickableListFieldItemListViewComponent, DbxPickableListFieldItemListViewItemComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxFormFormlyPickableFieldModule, imports: [importsAndExports$d, FormlyModule.forChild({
                 types: [
                     { name: 'pickablechipfield', component: DbxPickableChipListFieldComponent, wrappers: ['form-field'] },
                     { name: 'pickablelistfield', component: DbxPickableListFieldComponent, wrappers: ['form-field'] }
                 ]
             })] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxFormFormlyPickableFieldModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxFormFormlyPickableFieldModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -13339,10 +13501,10 @@ class AbstractDbxSearchableValueFieldDirective extends FieldType {
         this.formControl.markAsDirty();
         this.formControl.markAsTouched();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: AbstractDbxSearchableValueFieldDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "21.2.4", type: AbstractDbxSearchableValueFieldDirective, isStandalone: true, viewQueries: [{ propertyName: "textInput", first: true, predicate: ["textInput"], descendants: true, read: ElementRef, isSignal: true }], usesInheritance: true, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: AbstractDbxSearchableValueFieldDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "21.2.10", type: AbstractDbxSearchableValueFieldDirective, isStandalone: true, viewQueries: [{ propertyName: "textInput", first: true, predicate: ["textInput"], descendants: true, read: ElementRef, isSignal: true }], usesInheritance: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: AbstractDbxSearchableValueFieldDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: AbstractDbxSearchableValueFieldDirective, decorators: [{
             type: Directive
         }], propDecorators: { textInput: [{ type: i0.ViewChild, args: ['textInput', { ...{ read: (ElementRef) }, isSignal: true }] }] } });
 
@@ -13393,10 +13555,10 @@ class DbxSearchableChipFieldComponent extends AbstractDbxSearchableValueFieldDir
     onBlur() {
         this._blur.next();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxSearchableChipFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", 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 aria-label=\"Remove\">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()\" [attr.aria-label]=\"searchInputPlaceholder || 'Search'\" />\n  </mat-chip-grid>\n  <div class=\"searchable-field-form-loading\">\n    <dbx-loading [linear]=\"true\" [context]=\"searchContext\"></dbx-loading>\n  </div>\n  @if (inputCtrl.touched && inputErrorMessage) {\n    <span class=\"dbx-chip-input-error\">{{ inputErrorMessage }}</span>\n  }\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$8.MatChipAvatar, selector: "mat-chip-avatar, [matChipAvatar]" }, { kind: "component", type: i1$8.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i1$8.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled", "readonly", "matChipInputDisabledInteractive"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i1$8.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i1$8.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$7.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$3.DbxLoadingComponent, selector: "dbx-loading", inputs: ["padding", "show", "text", "mode", "color", "diameter", "linear", "loading", "error", "context"] }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i2$2.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: i2$2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i2$2.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 ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxSearchableChipFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", 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 aria-label=\"Remove\">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()\" [attr.aria-label]=\"searchInputPlaceholder || 'Search'\" />\n  </mat-chip-grid>\n  <div class=\"searchable-field-form-loading\">\n    <dbx-loading [linear]=\"true\" [context]=\"searchContext\"></dbx-loading>\n  </div>\n  @if (inputCtrl.touched && inputErrorMessage) {\n    <span class=\"dbx-chip-input-error\">{{ inputErrorMessage }}</span>\n  }\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$8.MatChipAvatar, selector: "mat-chip-avatar, [matChipAvatar]" }, { kind: "component", type: i1$8.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i1$8.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled", "readonly", "matChipInputDisabledInteractive"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i1$8.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i1$8.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$7.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$3.DbxLoadingComponent, selector: "dbx-loading", inputs: ["padding", "show", "text", "mode", "color", "diameter", "linear", "loading", "error", "context"] }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i2$2.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: i2$2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i2$2.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: "21.2.4", ngImport: i0, type: DbxSearchableChipFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxSearchableChipFieldComponent, decorators: [{
             type: Component,
             args: [{ imports: [MatChipsModule, MatIconModule, FormsModule, ReactiveFormsModule, DbxLoadingModule, MatAutocompleteModule, MatOptionModule, DbxSearchableFieldAutocompleteItemComponent], changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "<div class=\"dbx-searchable-field\">\n  <!-- View -->\n  <mat-chip-grid [required]=\"required\" [disabled]=\"readonly\" #chipList>\n    @for (displayValue of displayValuesSignal(); track displayValue.value) {\n      <mat-chip-row [removable]=\"true\" (removed)=\"removeWithDisplayValue(displayValue)\">\n        @if (displayValue.icon) {\n          <mat-icon matChipAvatar>{{ displayValue.icon }}</mat-icon>\n        }\n        <span class=\"dbx-chip-label\">{{ displayValue.label }}</span>\n        @if (displayValue.sublabel) {\n          <span class=\"dbx-chip-sublabel\">{{ displayValue.sublabel }}</span>\n        }\n        @if (!readonly) {\n          <mat-icon matChipRemove aria-label=\"Remove\">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()\" [attr.aria-label]=\"searchInputPlaceholder || 'Search'\" />\n  </mat-chip-grid>\n  <div class=\"searchable-field-form-loading\">\n    <dbx-loading [linear]=\"true\" [context]=\"searchContext\"></dbx-loading>\n  </div>\n  @if (inputCtrl.touched && inputErrorMessage) {\n    <span class=\"dbx-chip-input-error\">{{ inputErrorMessage }}</span>\n  }\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" }]
         }] });
@@ -13569,10 +13731,10 @@ class DbxSearchableTextFieldComponent extends AbstractDbxSearchableValueFieldDir
             this.addWithDisplayValue(value);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxSearchableTextFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", 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 }}\" [attr.aria-label]=\"searchLabel || searchInputPlaceholder || 'Search'\" />\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", "disabledInteractive"], 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$3.DbxLoadingComponent, selector: "dbx-loading", inputs: ["padding", "show", "text", "mode", "color", "diameter", "linear", "loading", "error", "context"] }, { kind: "ngmodule", type: MatOptionModule }, { kind: "component", type: i2$2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i2$2.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: i2$2.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 ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxSearchableTextFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", 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 }}\" [attr.aria-label]=\"searchLabel || searchInputPlaceholder || 'Search'\" />\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", "disabledInteractive"], 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$3.DbxLoadingComponent, selector: "dbx-loading", inputs: ["padding", "show", "text", "mode", "color", "diameter", "linear", "loading", "error", "context"] }, { kind: "ngmodule", type: MatOptionModule }, { kind: "component", type: i2$2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i2$2.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: i2$2.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: "21.2.4", ngImport: i0, type: DbxSearchableTextFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", 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 }}\" [attr.aria-label]=\"searchLabel || searchInputPlaceholder || 'Search'\" />\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" }]
         }] });
@@ -13582,16 +13744,16 @@ const importsAndExports$c = [DbxSearchableChipFieldComponent, DbxSearchableTextF
  * Registers the `searchablechipfield` and `searchabletextfield` Formly field types.
  */
 class DbxFormFormlySearchableFieldModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxFormFormlySearchableFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.4", ngImport: i0, type: DbxFormFormlySearchableFieldModule, imports: [DbxSearchableChipFieldComponent, DbxSearchableTextFieldComponent, DbxSearchableFieldAutocompleteItemComponent, DbxDefaultSearchableFieldDisplayComponent, i1$1.FormlyModule], exports: [DbxSearchableChipFieldComponent, DbxSearchableTextFieldComponent, DbxSearchableFieldAutocompleteItemComponent, DbxDefaultSearchableFieldDisplayComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxFormFormlySearchableFieldModule, imports: [importsAndExports$c, FormlyModule.forChild({
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxFormFormlySearchableFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.10", ngImport: i0, type: DbxFormFormlySearchableFieldModule, imports: [DbxSearchableChipFieldComponent, DbxSearchableTextFieldComponent, DbxSearchableFieldAutocompleteItemComponent, DbxDefaultSearchableFieldDisplayComponent, i1$1.FormlyModule], exports: [DbxSearchableChipFieldComponent, DbxSearchableTextFieldComponent, DbxSearchableFieldAutocompleteItemComponent, DbxDefaultSearchableFieldDisplayComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxFormFormlySearchableFieldModule, imports: [importsAndExports$c, FormlyModule.forChild({
                 types: [
                     { name: 'searchablechipfield', component: DbxSearchableChipFieldComponent, wrappers: ['form-field'] },
                     { name: 'searchabletextfield', component: DbxSearchableTextFieldComponent, wrappers: ['form-field'] }
                 ]
             })] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxFormFormlySearchableFieldModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxFormFormlySearchableFieldModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -13999,10 +14161,10 @@ class DbxFormSourceSelectFieldComponent extends FieldType$2 {
         this.formControl.markAsDirty();
         this.formControl.markAsTouched();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxFormSourceSelectFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: DbxFormSourceSelectFieldComponent, isStandalone: true, selector: "dbx-form-sourceselectfield", viewQueries: [{ propertyName: "buttonElement", first: true, predicate: ["button"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "filterInputElement", first: true, predicate: ["filterInput"], 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\" [panelClass]=\"selectPanelClass\" (openedChange)=\"onSelectOpenedChange($event)\">\n      @if (filterable) {\n        <div class=\"dbx-source-select-filter-container\">\n          <input #filterInput class=\"dbx-source-select-filter-input\" type=\"text\" placeholder=\"Type to filter...\" (input)=\"onFilterInput($event)\" (keydown)=\"onFilterKeydown($event)\" />\n        </div>\n      }\n      @for (value of filteredNonGroupedValuesSignal(); track value.value) {\n        <mat-option [value]=\"value.value\">\n          {{ value.label }}\n        </mat-option>\n      }\n      @for (optionGroup of filteredGroupedOptionsSignal(); 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", "canSelectNullableOptions"], 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: ["bar", "type", "buttonStyle", "color", "spinnerColor", "customButtonColor", "customTextColor", "customSpinnerColor", "basic", "tonal", "raised", "stroked", "flat", "iconOnly", "fab", "customContent", "allowClickPropagation", "mode"] }, { 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: i1$2.DbxActionDirective, selector: "dbx-action,[dbxAction]", exportAs: ["action", "dbxAction"] }, { kind: "directive", type: i1$2.DbxActionHandlerDirective, selector: "[dbxActionHandler]", inputs: ["dbxActionHandler"] }, { kind: "directive", type: i1$2.DbxActionValueDirective, selector: "dbxActionValue,[dbxActionValue]", inputs: ["dbxActionValue"] }, { kind: "directive", type: i1$2.DbxActionButtonDirective, selector: "[dbxActionButton]", inputs: ["dbxActionButtonEcho"] }, { kind: "component", type: DbxLoadingComponent, selector: "dbx-loading", inputs: ["padding", "show", "text", "mode", "color", "diameter", "linear", "loading", "error", "context"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxFormSourceSelectFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: DbxFormSourceSelectFieldComponent, isStandalone: true, selector: "dbx-form-sourceselectfield", viewQueries: [{ propertyName: "buttonElement", first: true, predicate: ["button"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "filterInputElement", first: true, predicate: ["filterInput"], 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\" [panelClass]=\"selectPanelClass\" (openedChange)=\"onSelectOpenedChange($event)\">\n      @if (filterable) {\n        <div class=\"dbx-source-select-filter-container\">\n          <input #filterInput class=\"dbx-source-select-filter-input\" type=\"text\" placeholder=\"Type to filter...\" (input)=\"onFilterInput($event)\" (keydown)=\"onFilterKeydown($event)\" />\n        </div>\n      }\n      @for (value of filteredNonGroupedValuesSignal(); track value.value) {\n        <mat-option [value]=\"value.value\">\n          {{ value.label }}\n        </mat-option>\n      }\n      @for (optionGroup of filteredGroupedOptionsSignal(); 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", "canSelectNullableOptions"], 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: ["bar", "type", "buttonStyle", "color", "spinnerColor", "customButtonColor", "customTextColor", "customSpinnerColor", "basic", "tonal", "raised", "stroked", "flat", "iconOnly", "fab", "customContent", "allowClickPropagation", "mode"] }, { 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: i1$2.DbxActionDirective, selector: "dbx-action,[dbxAction]", exportAs: ["action", "dbxAction"] }, { kind: "directive", type: i1$2.DbxActionHandlerDirective, selector: "[dbxActionHandler]", inputs: ["dbxActionHandler"] }, { kind: "directive", type: i1$2.DbxActionValueDirective, selector: "dbxActionValue,[dbxActionValue]", inputs: ["dbxActionValue"] }, { kind: "directive", type: i1$2.DbxActionButtonDirective, selector: "[dbxActionButton]", inputs: ["dbxActionButtonEcho"] }, { 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: "21.2.4", ngImport: i0, type: DbxFormSourceSelectFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxFormSourceSelectFieldComponent, decorators: [{
             type: Component,
             args: [{ selector: 'dbx-form-sourceselectfield', changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatSelect, MatOption, FormsModule, ReactiveFormsModule, DbxButtonComponent, MatOptgroup, DbxButtonSpacerDirective, DbxActionModule, DbxLoadingComponent], standalone: true, template: "<div class=\"dbx-source-select-field\">\n  <div class=\"dbx-source-select-field-content\">\n    <mat-select class=\"dbx-source-select-field-select\" [id]=\"id\" [formControl]=\"formControl\" [multiple]=\"props.multiple\" [panelClass]=\"selectPanelClass\" (openedChange)=\"onSelectOpenedChange($event)\">\n      @if (filterable) {\n        <div class=\"dbx-source-select-filter-container\">\n          <input #filterInput class=\"dbx-source-select-filter-input\" type=\"text\" placeholder=\"Type to filter...\" (input)=\"onFilterInput($event)\" (keydown)=\"onFilterKeydown($event)\" />\n        </div>\n      }\n      @for (value of filteredNonGroupedValuesSignal(); track value.value) {\n        <mat-option [value]=\"value.value\">\n          {{ value.label }}\n        </mat-option>\n      }\n      @for (optionGroup of filteredGroupedOptionsSignal(); 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" }]
         }], propDecorators: { buttonElement: [{ type: i0.ViewChild, args: ['button', { ...{ read: (ElementRef) }, isSignal: true }] }], filterInputElement: [{ type: i0.ViewChild, args: ['filterInput', { ...{ read: (ElementRef) }, isSignal: true }] }] } });
@@ -14046,14 +14208,14 @@ const sourceSelectField = formlySourceSelectField;
  * Registers the `sourceselectfield` Formly field type.
  */
 class DbxFormFormlySourceSelectModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxFormFormlySourceSelectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.4", ngImport: i0, type: DbxFormFormlySourceSelectModule, imports: [DbxFormSourceSelectFieldComponent, i1$1.FormlyModule], exports: [DbxFormSourceSelectFieldComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxFormFormlySourceSelectModule, imports: [DbxFormSourceSelectFieldComponent,
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxFormFormlySourceSelectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.10", ngImport: i0, type: DbxFormFormlySourceSelectModule, imports: [DbxFormSourceSelectFieldComponent, i1$1.FormlyModule], exports: [DbxFormSourceSelectFieldComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxFormFormlySourceSelectModule, imports: [DbxFormSourceSelectFieldComponent,
             FormlyModule.forChild({
                 types: [{ name: 'sourceselectfield', component: DbxFormSourceSelectFieldComponent, wrappers: ['form-field'] }]
             })] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxFormFormlySourceSelectModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxFormFormlySourceSelectModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -14179,8 +14341,8 @@ class DbxTextEditorFieldComponent extends FieldType {
         }
         this._sub.destroy();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxTextEditorFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: DbxTextEditorFieldComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxTextEditorFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: DbxTextEditorFieldComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
     <div class="dbx-texteditor-field" [ngClass]="compactClassSignal()" [formGroup]="formGroup">
       @if (label) {
         <span class="dbx-label">{{ label }}</span>
@@ -14197,7 +14359,7 @@ class DbxTextEditorFieldComponent extends FieldType {
     </div>
   `, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: NgxEditorModule }, { kind: "component", type: i1$9.NgxEditorComponent, selector: "ngx-editor", inputs: ["editor", "outputFormat", "placeholder"], outputs: ["focusOut", "focusIn"] }, { kind: "component", type: i1$9.NgxEditorMenuComponent, 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],[formArray],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: "21.2.4", ngImport: i0, type: DbxTextEditorFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxTextEditorFieldComponent, decorators: [{
             type: Component,
             args: [{
                     template: `
@@ -14227,13 +14389,13 @@ const importsAndExports$b = [DbxTextEditorFieldComponent];
  * Registers the `texteditor` Formly field type for rich text editing.
  */
 class DbxFormFormlyTextEditorFieldModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxFormFormlyTextEditorFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.4", ngImport: i0, type: DbxFormFormlyTextEditorFieldModule, imports: [DbxTextEditorFieldComponent, i1$1.FormlyModule], exports: [DbxTextEditorFieldComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxFormFormlyTextEditorFieldModule, imports: [importsAndExports$b, FormlyModule.forChild({
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxFormFormlyTextEditorFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.10", ngImport: i0, type: DbxFormFormlyTextEditorFieldModule, imports: [DbxTextEditorFieldComponent, i1$1.FormlyModule], exports: [DbxTextEditorFieldComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxFormFormlyTextEditorFieldModule, imports: [importsAndExports$b, FormlyModule.forChild({
                 types: [{ name: 'texteditor', component: DbxTextEditorFieldComponent }]
             })] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxFormFormlyTextEditorFieldModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxFormFormlyTextEditorFieldModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -14418,8 +14580,8 @@ class DbxFormRepeatArrayTypeComponent extends FieldArrayType {
             fieldConfig
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxFormRepeatArrayTypeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: DbxFormRepeatArrayTypeComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxFormRepeatArrayTypeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: DbxFormRepeatArrayTypeComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
     <div class="dbx-form-repeat-array">
       <dbx-subsection [header]="label" [hint]="description">
         <!-- Fields -->
@@ -14459,7 +14621,7 @@ class DbxFormRepeatArrayTypeComponent extends FieldArrayType {
     </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: ["bar", "type", "buttonStyle", "color", "spinnerColor", "customButtonColor", "customTextColor", "customSpinnerColor", "basic", "tonal", "raised", "stroked", "flat", "iconOnly", "fab", "customContent", "allowClickPropagation", "mode"] }, { kind: "ngmodule", type: FormlyModule }, { kind: "component", type: i1$1.LegacyFormlyField, selector: "formly-field" }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i2$5.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i2$5.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$5.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "directive", type: i2$5.CdkDragPlaceholder, selector: "ng-template[cdkDragPlaceholder]", inputs: ["data"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$7.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: "21.2.4", ngImport: i0, type: DbxFormRepeatArrayTypeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxFormRepeatArrayTypeComponent, decorators: [{
             type: Component,
             args: [{
                     template: `
@@ -14512,13 +14674,13 @@ const importsAndExports$a = [DbxFormRepeatArrayTypeComponent];
  * Registers the `repeatarray` Formly field type for dynamic array fields.
  */
 class DbxFormFormlyArrayFieldModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxFormFormlyArrayFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.4", ngImport: i0, type: DbxFormFormlyArrayFieldModule, imports: [DbxFormRepeatArrayTypeComponent, i1$1.FormlyModule], exports: [DbxFormRepeatArrayTypeComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxFormFormlyArrayFieldModule, imports: [importsAndExports$a, FormlyModule.forChild({
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxFormFormlyArrayFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.10", ngImport: i0, type: DbxFormFormlyArrayFieldModule, imports: [DbxFormRepeatArrayTypeComponent, i1$1.FormlyModule], exports: [DbxFormRepeatArrayTypeComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxFormFormlyArrayFieldModule, imports: [importsAndExports$a, FormlyModule.forChild({
                 types: [{ name: 'repeatarray', component: DbxFormRepeatArrayTypeComponent }]
             })] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxFormFormlyArrayFieldModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxFormFormlyArrayFieldModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -14586,11 +14748,11 @@ const importsAndExports$9 = [FormlyMaterialModule, FormlyMatCheckboxModule, Form
  * Provides Formly Material checkbox and toggle field support.
  */
 class DbxFormFormlyBooleanFieldModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxFormFormlyBooleanFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.4", ngImport: i0, type: DbxFormFormlyBooleanFieldModule, imports: [FormlyMaterialModule, FormlyMatCheckboxModule, FormlyMatToggleModule], exports: [FormlyMaterialModule, FormlyMatCheckboxModule, FormlyMatToggleModule] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxFormFormlyBooleanFieldModule, imports: [importsAndExports$9, FormlyMaterialModule, FormlyMatCheckboxModule, FormlyMatToggleModule] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxFormFormlyBooleanFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.10", ngImport: i0, type: DbxFormFormlyBooleanFieldModule, imports: [FormlyMaterialModule, FormlyMatCheckboxModule, FormlyMatToggleModule], exports: [FormlyMaterialModule, FormlyMatCheckboxModule, FormlyMatToggleModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxFormFormlyBooleanFieldModule, imports: [importsAndExports$9, FormlyMaterialModule, FormlyMatCheckboxModule, FormlyMatToggleModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxFormFormlyBooleanFieldModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxFormFormlyBooleanFieldModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: importsAndExports$9,
@@ -15103,15 +15265,15 @@ class DbxFixedDateRangeFieldComponent extends FieldType {
     _createDateRange(date) {
         return date ? dateRange({ ...this.currentDateRangeInputSignal(), date }) : undefined;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxFixedDateRangeFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: DbxFixedDateRangeFieldComponent, isStandalone: true, selector: "ng-component", providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxFixedDateRangeFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", 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, 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$6.MatCalendar, selector: "mat-calendar", inputs: ["headerComponent", "startAt", "startView", "selected", "minDate", "maxDate", "dateFilter", "dateClass", "comparisonStart", "comparisonEnd", "startDateAccessibleName", "endDateAccessibleName"], outputs: ["selectedChange", "yearSelected", "monthSelected", "viewChanged", "_userSelection", "_userDragDrop"], exportAs: ["matCalendar"] }, { kind: "component", type: i1$6.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { kind: "directive", type: i1$6.MatStartDate, selector: "input[matStartDate]", outputs: ["dateChange", "dateInput"] }, { kind: "directive", type: i1$6.MatEndDate, selector: "input[matEndDate]", outputs: ["dateChange", "dateInput"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$5.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],[formArray],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: "21.2.4", ngImport: i0, type: DbxFixedDateRangeFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxFixedDateRangeFieldComponent, decorators: [{
             type: Component,
             args: [{ providers: [
                         {
@@ -15168,10 +15330,10 @@ class DbxFixedDateRangeFieldSelectionStrategy {
         const year = date.getFullYear();
         return this._dateAdapter.createDate(year, monthIndex, day);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxFixedDateRangeFieldSelectionStrategy, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxFixedDateRangeFieldSelectionStrategy });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxFixedDateRangeFieldSelectionStrategy, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxFixedDateRangeFieldSelectionStrategy });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxFixedDateRangeFieldSelectionStrategy, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxFixedDateRangeFieldSelectionStrategy, decorators: [{
             type: Injectable
         }] });
 
@@ -15180,9 +15342,9 @@ const importsAndExports$8 = [DbxDateTimeFieldComponent, DbxFixedDateRangeFieldCo
  * Registers the `datetime` and `fixeddaterange` Formly field types with style and form-field wrappers.
  */
 class DbxFormFormlyDateFieldModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxFormFormlyDateFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.4", ngImport: i0, type: DbxFormFormlyDateFieldModule, imports: [DbxDateTimeFieldComponent, DbxFixedDateRangeFieldComponent, DbxFormFormlyWrapperModule, i1$1.FormlyModule], exports: [DbxDateTimeFieldComponent, DbxFixedDateRangeFieldComponent, DbxFormFormlyWrapperModule] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxFormFormlyDateFieldModule, imports: [importsAndExports$8, FormlyModule.forChild({
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxFormFormlyDateFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.10", ngImport: i0, type: DbxFormFormlyDateFieldModule, imports: [DbxDateTimeFieldComponent, DbxFixedDateRangeFieldComponent, DbxFormFormlyWrapperModule, i1$1.FormlyModule], exports: [DbxDateTimeFieldComponent, DbxFixedDateRangeFieldComponent, DbxFormFormlyWrapperModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxFormFormlyDateFieldModule, imports: [importsAndExports$8, FormlyModule.forChild({
                 types: [
                     //
                     { name: 'datetime', component: DbxDateTimeFieldComponent, wrappers: ['style', 'form-field'] },
@@ -15190,7 +15352,7 @@ class DbxFormFormlyDateFieldModule {
                 ]
             }), DbxFormFormlyWrapperModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxFormFormlyDateFieldModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxFormFormlyDateFieldModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -15984,10 +16146,10 @@ class DbxTimeDurationFieldComponent extends FieldType {
         }
         return timeUnitToMilliseconds(value, this.outputUnit);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxTimeDurationFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.4", type: DbxTimeDurationFieldComponent, isStandalone: true, selector: "ng-component", viewQueries: [{ propertyName: "pickerButtonElement", first: true, predicate: ["pickerButton"], descendants: true, read: ElementRef, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"dbx-form-duration-field\">\n  <input matInput type=\"text\" [formControl]=\"textCtrl\" (blur)=\"onTextBlur()\" (keydown.enter)=\"onTextEnter($event)\" class=\"dbx-form-duration-field-input\" placeholder=\"e.g. 2h30m\" [attr.aria-label]=\"props.label || 'Duration'\" />\n  <button mat-icon-button type=\"button\" #pickerButton (click)=\"openPicker()\" class=\"dbx-form-duration-field-picker-btn\" aria-label=\"Open duration picker\">\n    <mat-icon>schedule</mat-icon>\n  </button>\n</div>\n", dependencies: [{ kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxTimeDurationFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.10", type: DbxTimeDurationFieldComponent, isStandalone: true, selector: "ng-component", viewQueries: [{ propertyName: "pickerButtonElement", first: true, predicate: ["pickerButton"], descendants: true, read: ElementRef, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"dbx-form-duration-field\">\n  <input matInput type=\"text\" [formControl]=\"textCtrl\" (blur)=\"onTextBlur()\" (keydown.enter)=\"onTextEnter($event)\" class=\"dbx-form-duration-field-input\" placeholder=\"e.g. 2h30m\" [attr.aria-label]=\"props.label || 'Duration'\" />\n  <button mat-icon-button type=\"button\" #pickerButton (click)=\"openPicker()\" class=\"dbx-form-duration-field-picker-btn\" aria-label=\"Open duration picker\">\n    <mat-icon>schedule</mat-icon>\n  </button>\n</div>\n", dependencies: [{ kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxTimeDurationFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxTimeDurationFieldComponent, decorators: [{
             type: Component,
             args: [{ imports: [MatInputModule, MatFormFieldModule, MatIconModule, MatButtonModule, FormsModule, ReactiveFormsModule], changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "<div class=\"dbx-form-duration-field\">\n  <input matInput type=\"text\" [formControl]=\"textCtrl\" (blur)=\"onTextBlur()\" (keydown.enter)=\"onTextEnter($event)\" class=\"dbx-form-duration-field-input\" placeholder=\"e.g. 2h30m\" [attr.aria-label]=\"props.label || 'Duration'\" />\n  <button mat-icon-button type=\"button\" #pickerButton (click)=\"openPicker()\" class=\"dbx-form-duration-field-picker-btn\" aria-label=\"Open duration picker\">\n    <mat-icon>schedule</mat-icon>\n  </button>\n</div>\n" }]
         }], propDecorators: { pickerButtonElement: [{ type: i0.ViewChild, args: ['pickerButton', { ...{ read: ElementRef }, isSignal: true }] }] } });
@@ -15997,13 +16159,13 @@ const importsAndExports$7 = [DbxTimeDurationFieldComponent, DbxDurationPickerPop
  * Registers the `timeduration` Formly field type for time duration input with text parsing and popover picker.
  */
 class DbxFormFormlyDurationFieldModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxFormFormlyDurationFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.4", ngImport: i0, type: DbxFormFormlyDurationFieldModule, imports: [DbxTimeDurationFieldComponent, DbxDurationPickerPopoverComponent, i1$1.FormlyModule], exports: [DbxTimeDurationFieldComponent, DbxDurationPickerPopoverComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxFormFormlyDurationFieldModule, imports: [importsAndExports$7, FormlyModule.forChild({
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxFormFormlyDurationFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.10", ngImport: i0, type: DbxFormFormlyDurationFieldModule, imports: [DbxTimeDurationFieldComponent, DbxDurationPickerPopoverComponent, i1$1.FormlyModule], exports: [DbxTimeDurationFieldComponent, DbxDurationPickerPopoverComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxFormFormlyDurationFieldModule, imports: [importsAndExports$7, FormlyModule.forChild({
                 types: [{ name: 'timeduration', component: DbxTimeDurationFieldComponent, wrappers: ['form-field'] }]
             })] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxFormFormlyDurationFieldModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxFormFormlyDurationFieldModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -16289,11 +16451,11 @@ const importsAndExports$6 = [FormlyMaterialModule, FormlyMatSliderModule];
  * Provides Formly Material number input and slider support.
  */
 class DbxFormFormlyNumberFieldModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxFormFormlyNumberFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.4", ngImport: i0, type: DbxFormFormlyNumberFieldModule, imports: [FormlyMaterialModule, FormlyMatSliderModule], exports: [FormlyMaterialModule, FormlyMatSliderModule] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxFormFormlyNumberFieldModule, imports: [importsAndExports$6, FormlyMaterialModule, FormlyMatSliderModule] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxFormFormlyNumberFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.10", ngImport: i0, type: DbxFormFormlyNumberFieldModule, imports: [FormlyMaterialModule, FormlyMatSliderModule], exports: [FormlyMaterialModule, FormlyMatSliderModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxFormFormlyNumberFieldModule, imports: [importsAndExports$6, FormlyMaterialModule, FormlyMatSliderModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxFormFormlyNumberFieldModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxFormFormlyNumberFieldModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: importsAndExports$6,
@@ -16393,10 +16555,10 @@ class DbxPhoneFieldComponent extends FieldType {
         this.extensionErrorSync.destroy();
         this.phoneErrorSync.destroy();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxPhoneFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: DbxPhoneFieldComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<div class=\"dbx-form-phone-field\" [formGroup]=\"inputFormGroup\">\n  <ngx-mat-input-tel name=\"phone\" class=\"dbx-form-phone-field-phone-content\" [required]=\"required\" [enableSearch]=\"enableSearch\" [preferredCountries]=\"preferredCountries\" [enablePlaceholder]=\"false\" [formControl]=\"phoneCtrl\"></ngx-mat-input-tel>\n  @if (allowExtension) {\n    <div class=\"dbx-form-phone-field-extension-content\">\n      <span class=\"dbx-hint dbx-button-spacer\">Ext.</span>\n      <input name=\"phone-extension\" class=\"dbx-form-phone-field-extension-input\" placeholder=\"123\" minlength=\"0\" maxlength=\"6\" #extensionInput [formControl]=\"extensionCtrl\" aria-label=\"Phone extension\" />\n    </div>\n  }\n</div>\n", dependencies: [{ 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],[formArray],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: NgxMatInputTelComponent, selector: "ngx-mat-input-tel", inputs: ["autocomplete", "ariaLabel", "cssClass", "defaultCountry", "errorStateMatcher", "maxLength", "name", "placeholder", "countriesName", "preferredCountries", "onlyCountries", "searchPlaceholder", "validation", "enablePlaceholder", "enableSearch", "resetOnChange", "separateDialCode", "hideAreaCodes", "format", "required", "disabled"], outputs: ["countryChanged"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxPhoneFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: DbxPhoneFieldComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<div class=\"dbx-form-phone-field\" [formGroup]=\"inputFormGroup\">\n  <ngx-mat-input-tel name=\"phone\" class=\"dbx-form-phone-field-phone-content\" [required]=\"required\" [enableSearch]=\"enableSearch\" [preferredCountries]=\"preferredCountries\" [enablePlaceholder]=\"false\" [formControl]=\"phoneCtrl\"></ngx-mat-input-tel>\n  @if (allowExtension) {\n    <div class=\"dbx-form-phone-field-extension-content\">\n      <span class=\"dbx-hint dbx-button-spacer\">Ext.</span>\n      <input name=\"phone-extension\" class=\"dbx-form-phone-field-extension-input\" placeholder=\"123\" minlength=\"0\" maxlength=\"6\" #extensionInput [formControl]=\"extensionCtrl\" aria-label=\"Phone extension\" />\n    </div>\n  }\n</div>\n", dependencies: [{ 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],[formArray],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: NgxMatInputTelComponent, selector: "ngx-mat-input-tel", inputs: ["autocomplete", "ariaLabel", "cssClass", "defaultCountry", "errorStateMatcher", "maxLength", "name", "placeholder", "countriesName", "preferredCountries", "onlyCountries", "searchPlaceholder", "validation", "enablePlaceholder", "enableSearch", "resetOnChange", "separateDialCode", "hideAreaCodes", "format", "required", "disabled"], outputs: ["countryChanged"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxPhoneFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxPhoneFieldComponent, decorators: [{
             type: Component,
             args: [{ imports: [MatInputModule, MatFormFieldModule, FormsModule, ReactiveFormsModule, MatIconModule, FlexLayoutModule, FormlyMatFormFieldModule, NgxMatInputTelComponent], changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "<div class=\"dbx-form-phone-field\" [formGroup]=\"inputFormGroup\">\n  <ngx-mat-input-tel name=\"phone\" class=\"dbx-form-phone-field-phone-content\" [required]=\"required\" [enableSearch]=\"enableSearch\" [preferredCountries]=\"preferredCountries\" [enablePlaceholder]=\"false\" [formControl]=\"phoneCtrl\"></ngx-mat-input-tel>\n  @if (allowExtension) {\n    <div class=\"dbx-form-phone-field-extension-content\">\n      <span class=\"dbx-hint dbx-button-spacer\">Ext.</span>\n      <input name=\"phone-extension\" class=\"dbx-form-phone-field-extension-input\" placeholder=\"123\" minlength=\"0\" maxlength=\"6\" #extensionInput [formControl]=\"extensionCtrl\" aria-label=\"Phone extension\" />\n    </div>\n  }\n</div>\n" }]
         }] });
@@ -16406,13 +16568,13 @@ const importsAndExports$5 = [DbxPhoneFieldComponent];
  * Registers the `intphone` Formly field type for international phone number input.
  */
 class DbxFormFormlyPhoneFieldModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxFormFormlyPhoneFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.4", ngImport: i0, type: DbxFormFormlyPhoneFieldModule, imports: [DbxPhoneFieldComponent, i1$1.FormlyModule], exports: [DbxPhoneFieldComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxFormFormlyPhoneFieldModule, imports: [importsAndExports$5, FormlyModule.forChild({
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxFormFormlyPhoneFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.10", ngImport: i0, type: DbxFormFormlyPhoneFieldModule, imports: [DbxPhoneFieldComponent, i1$1.FormlyModule], exports: [DbxPhoneFieldComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxFormFormlyPhoneFieldModule, imports: [importsAndExports$5, FormlyModule.forChild({
                 types: [{ name: 'intphone', component: DbxPhoneFieldComponent, wrappers: ['form-field'] }]
             })] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxFormFormlyPhoneFieldModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxFormFormlyPhoneFieldModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -16745,7 +16907,7 @@ function formlyCityField(config = {}) {
  * ```
  */
 function formlyStateField(config = {}) {
-    const { asCode = false, pattern = asCode ? US_STATE_CODE_STRING_REGEX : undefined, key = 'state', placeholder = '', label = 'State', autocomplete = 'state', maxLength = asCode ? ADDRESS_STATE_CODE_MAX_LENGTH : ADDRESS_STATE_MAX_LENGTH, transform: transform, required = false } = config;
+    const { asCode = false, pattern = asCode ? US_STATE_CODE_STRING_REGEX : undefined, key = 'state', placeholder = '', label = 'State', autocomplete = 'state', maxLength = asCode ? ADDRESS_STATE_CODE_MAX_LENGTH : ADDRESS_STATE_MAX_LENGTH, transform, required = false } = config;
     return formlyTextField({
         ...config,
         key,
@@ -17011,11 +17173,11 @@ const importsAndExports$4 = [DbxFormFormlyArrayFieldModule, FormlyMaterialModule
  * Aggregates Formly Material input, array field, and wrapper modules for text field support.
  */
 class DbxFormFormlyTextFieldModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxFormFormlyTextFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.4", ngImport: i0, type: DbxFormFormlyTextFieldModule, imports: [DbxFormFormlyArrayFieldModule, FormlyMaterialModule, FormlyMatInputModule, DbxFormFormlyWrapperModule], exports: [DbxFormFormlyArrayFieldModule, FormlyMaterialModule, FormlyMatInputModule, DbxFormFormlyWrapperModule] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxFormFormlyTextFieldModule, imports: [importsAndExports$4, DbxFormFormlyArrayFieldModule, FormlyMaterialModule, FormlyMatInputModule, DbxFormFormlyWrapperModule] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxFormFormlyTextFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.10", ngImport: i0, type: DbxFormFormlyTextFieldModule, imports: [DbxFormFormlyArrayFieldModule, FormlyMaterialModule, FormlyMatInputModule, DbxFormFormlyWrapperModule], exports: [DbxFormFormlyArrayFieldModule, FormlyMaterialModule, FormlyMatInputModule, DbxFormFormlyWrapperModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxFormFormlyTextFieldModule, imports: [importsAndExports$4, DbxFormFormlyArrayFieldModule, FormlyMaterialModule, FormlyMatInputModule, DbxFormFormlyWrapperModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxFormFormlyTextFieldModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxFormFormlyTextFieldModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: importsAndExports$4,
@@ -17055,11 +17217,11 @@ const importsAndExports$3 = [DbxFormFormlyChecklistItemFieldModule, DbxFormForml
  * Aggregates all custom Formly field type modules (checklist, component, texteditor) and wrappers.
  */
 class DbxFormFormlyFieldModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxFormFormlyFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.4", ngImport: i0, type: DbxFormFormlyFieldModule, imports: [DbxFormFormlyChecklistItemFieldModule, DbxFormFormlyComponentFieldModule, DbxFormFormlyTextEditorFieldModule, DbxFormFormlyWrapperModule], exports: [DbxFormFormlyChecklistItemFieldModule, DbxFormFormlyComponentFieldModule, DbxFormFormlyTextEditorFieldModule, DbxFormFormlyWrapperModule] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxFormFormlyFieldModule, imports: [importsAndExports$3, DbxFormFormlyChecklistItemFieldModule, DbxFormFormlyComponentFieldModule, DbxFormFormlyTextEditorFieldModule, DbxFormFormlyWrapperModule] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxFormFormlyFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.10", ngImport: i0, type: DbxFormFormlyFieldModule, imports: [DbxFormFormlyChecklistItemFieldModule, DbxFormFormlyComponentFieldModule, DbxFormFormlyTextEditorFieldModule, DbxFormFormlyWrapperModule], exports: [DbxFormFormlyChecklistItemFieldModule, DbxFormFormlyComponentFieldModule, DbxFormFormlyTextEditorFieldModule, DbxFormFormlyWrapperModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxFormFormlyFieldModule, imports: [importsAndExports$3, DbxFormFormlyChecklistItemFieldModule, DbxFormFormlyComponentFieldModule, DbxFormFormlyTextEditorFieldModule, DbxFormFormlyWrapperModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxFormFormlyFieldModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxFormFormlyFieldModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: importsAndExports$3,
@@ -17112,11 +17274,11 @@ const importsAndExports$2 = [DbxFormFormlyTextFieldModule, DbxFormFormlyWrapperM
  * Imports and re-exports the text field and wrapper modules required by {@link textIsAvailableField}.
  */
 class DbxFormTextAvailableFieldModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxFormTextAvailableFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.4", ngImport: i0, type: DbxFormTextAvailableFieldModule, imports: [DbxFormFormlyTextFieldModule, DbxFormFormlyWrapperModule], exports: [DbxFormFormlyTextFieldModule, DbxFormFormlyWrapperModule] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxFormTextAvailableFieldModule, imports: [importsAndExports$2, DbxFormFormlyTextFieldModule, DbxFormFormlyWrapperModule] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxFormTextAvailableFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.10", ngImport: i0, type: DbxFormTextAvailableFieldModule, imports: [DbxFormFormlyTextFieldModule, DbxFormFormlyWrapperModule], exports: [DbxFormFormlyTextFieldModule, DbxFormFormlyWrapperModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxFormTextAvailableFieldModule, imports: [importsAndExports$2, DbxFormFormlyTextFieldModule, DbxFormFormlyWrapperModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxFormTextAvailableFieldModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxFormTextAvailableFieldModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: importsAndExports$2,
@@ -17261,11 +17423,11 @@ const importsAndExports$1 = [DbxFormFormlyTextFieldModule];
  * Imports and re-exports the text field module required by the username/password login field functions.
  */
 class DbxFormLoginFieldModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxFormLoginFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.4", ngImport: i0, type: DbxFormLoginFieldModule, imports: [DbxFormFormlyTextFieldModule], exports: [DbxFormFormlyTextFieldModule] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxFormLoginFieldModule, imports: [importsAndExports$1, DbxFormFormlyTextFieldModule] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxFormLoginFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.10", ngImport: i0, type: DbxFormLoginFieldModule, imports: [DbxFormFormlyTextFieldModule], exports: [DbxFormFormlyTextFieldModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxFormLoginFieldModule, imports: [importsAndExports$1, DbxFormFormlyTextFieldModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxFormLoginFieldModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxFormLoginFieldModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: importsAndExports$1,
@@ -17309,11 +17471,11 @@ const importsAndExports = [DbxFormFormlySearchableFieldModule];
  * Imports and re-exports the searchable field module required by {@link timezoneStringField}.
  */
 class DbxFormTimezoneStringFieldModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxFormTimezoneStringFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.4", ngImport: i0, type: DbxFormTimezoneStringFieldModule, imports: [DbxFormFormlySearchableFieldModule], exports: [DbxFormFormlySearchableFieldModule] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxFormTimezoneStringFieldModule, imports: [importsAndExports, DbxFormFormlySearchableFieldModule] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxFormTimezoneStringFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.10", ngImport: i0, type: DbxFormTimezoneStringFieldModule, imports: [DbxFormFormlySearchableFieldModule], exports: [DbxFormFormlySearchableFieldModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxFormTimezoneStringFieldModule, imports: [importsAndExports, DbxFormFormlySearchableFieldModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxFormTimezoneStringFieldModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxFormTimezoneStringFieldModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: importsAndExports,
@@ -17374,10 +17536,10 @@ class AbstractFormlyFormDirective {
     setDisabled(key, disabled) {
         this.context.setDisabled(key, disabled);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: AbstractFormlyFormDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.4", type: AbstractFormlyFormDirective, isStandalone: true, inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: AbstractFormlyFormDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.10", type: AbstractFormlyFormDirective, isStandalone: true, inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: AbstractFormlyFormDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: AbstractFormlyFormDirective, decorators: [{
             type: Directive
         }], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
 /**
@@ -17387,10 +17549,10 @@ class AbstractSyncFormlyFormDirective extends AbstractFormlyFormDirective {
     ngOnInit() {
         this.context.fields = this.fields;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: AbstractSyncFormlyFormDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.4", type: AbstractSyncFormlyFormDirective, isStandalone: true, usesInheritance: true, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: AbstractSyncFormlyFormDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.10", type: AbstractSyncFormlyFormDirective, isStandalone: true, usesInheritance: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: AbstractSyncFormlyFormDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: AbstractSyncFormlyFormDirective, decorators: [{
             type: Directive
         }] });
 /**
@@ -17404,20 +17566,20 @@ class AbstractAsyncFormlyFormDirective extends AbstractFormlyFormDirective {
             this.context.fields = fields;
         }));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: AbstractAsyncFormlyFormDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.4", type: AbstractAsyncFormlyFormDirective, isStandalone: true, usesInheritance: true, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: AbstractAsyncFormlyFormDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.10", type: AbstractAsyncFormlyFormDirective, isStandalone: true, usesInheritance: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: AbstractAsyncFormlyFormDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: AbstractAsyncFormlyFormDirective, decorators: [{
             type: Directive
         }] });
 class AbstractConfigAsyncFormlyFormDirective extends AbstractAsyncFormlyFormDirective {
     config = input(undefined, ...(ngDevMode ? [{ debugName: "config" }] : /* istanbul ignore next */ []));
     currentConfig$ = toObservable(this.config).pipe(maybeValueFromObservableOrValue());
     config$ = this.currentConfig$.pipe(filterMaybe(), shareReplay(1));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: AbstractConfigAsyncFormlyFormDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.4", type: AbstractConfigAsyncFormlyFormDirective, isStandalone: true, inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: AbstractConfigAsyncFormlyFormDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.10", type: AbstractConfigAsyncFormlyFormDirective, isStandalone: true, inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: AbstractConfigAsyncFormlyFormDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: AbstractConfigAsyncFormlyFormDirective, decorators: [{
             type: Directive
         }], propDecorators: { config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: false }] }] } });
 
@@ -17427,10 +17589,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
 class DbxFormlyFieldsContextDirective extends AbstractAsyncFormlyFormDirective {
     fields = input(undefined, { ...(ngDevMode ? { debugName: "fields" } : /* istanbul ignore next */ {}), alias: 'dbxFormlyFields' });
     fields$ = toObservable(this.fields);
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxFormlyFieldsContextDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.4", type: DbxFormlyFieldsContextDirective, isStandalone: true, selector: "[dbxFormlyFields]", inputs: { fields: { classPropertyName: "fields", publicName: "dbxFormlyFields", isSignal: true, isRequired: false, transformFunction: null } }, providers: provideFormlyContext(), usesInheritance: true, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxFormlyFieldsContextDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.10", 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: "21.2.4", ngImport: i0, type: DbxFormlyFieldsContextDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxFormlyFieldsContextDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[dbxFormlyFields]',
@@ -17443,20 +17605,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
  * 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: "21.2.4", ngImport: i0, type: DbxFormlyFormComponentImportsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.4", ngImport: i0, type: DbxFormlyFormComponentImportsModule, imports: [DbxFormlyComponent], exports: [DbxFormlyComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxFormlyFormComponentImportsModule, imports: [dbxFormlyFormComponentImports] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxFormlyFormComponentImportsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.10", ngImport: i0, type: DbxFormlyFormComponentImportsModule, imports: [DbxFormlyComponent], exports: [DbxFormlyComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxFormlyFormComponentImportsModule, imports: [dbxFormlyFormComponentImports] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxFormlyFormComponentImportsModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxFormlyFormComponentImportsModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: dbxFormlyFormComponentImports,
@@ -17481,10 +17639,10 @@ function provideDbxFormFormlyFieldDeclarations() {
  * @selector `dbx-form-spacer,[dbxFormSpacer],.dbx-form-spacer`
  */
 class DbxFormSpacerDirective {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxFormSpacerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.4", type: DbxFormSpacerDirective, isStandalone: true, selector: "dbx-form-spacer,[dbxFormSpacer],.dbx-form-spacer", host: { classAttribute: "d-block dbx-form-spacer" }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxFormSpacerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.10", 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: "21.2.4", ngImport: i0, type: DbxFormSpacerDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxFormSpacerDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'dbx-form-spacer,[dbxFormSpacer],.dbx-form-spacer',
@@ -17496,11 +17654,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
         }] });
 
 class DbxFormExtensionModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxFormExtensionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.4", ngImport: i0, type: DbxFormExtensionModule, exports: [DbxFormModule, DbxFormFormlyFieldModule] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxFormExtensionModule, imports: [DbxFormModule, DbxFormFormlyFieldModule] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxFormExtensionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.10", ngImport: i0, type: DbxFormExtensionModule, exports: [DbxFormModule, DbxFormFormlyFieldModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxFormExtensionModule, imports: [DbxFormModule, DbxFormFormlyFieldModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxFormExtensionModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxFormExtensionModule, decorators: [{
             type: NgModule,
             args: [{
                     exports: [DbxFormModule, DbxFormFormlyFieldModule]
@@ -17531,8 +17689,7 @@ function provideDbxFormConfiguration(config) {
         }
     ];
     if (provideDateAdapter !== false) {
-        providers.push(provideDateFnsAdapter());
-        providers.push({
+        providers.push(provideDateFnsAdapter(), {
             provide: MAT_DATE_LOCALE,
             useValue: enUS
         });
@@ -17544,5 +17701,5 @@ function provideDbxFormConfiguration(config) {
  * Generated bundle index. Do not edit.
  */
 
-export { APP_ACTION_FORM_DISABLED_KEY, AbstractAsyncForgeFormDirective, AbstractAsyncFormlyFormDirective, AbstractConfigAsyncForgeFormDirective, AbstractConfigAsyncFormlyFormDirective, AbstractDbxPickableItemFieldDirective, AbstractDbxSearchableFieldDisplayDirective, AbstractDbxSearchableValueFieldDirective, AbstractForgeFormDirective, AbstractForgePickableItemFieldDirective, AbstractForgeSearchableFieldDirective, AbstractFormExpandSectionWrapperDirective, AbstractFormlyFormDirective, AbstractSyncForgeFormDirective, 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_FORGE_ARRAY_FIELD_ELEMENT_WRAPPER_NAME, DBX_FORGE_ARRAY_FIELD_WRAPPER_NAME, DBX_FORGE_DEFAULT_PASSWORDS_MATCH_VALIDATION_MESSAGE, DBX_FORGE_FIELD_TYPES, DBX_FORGE_FIELD_WRAPPER_TYPES, DBX_FORGE_FLEX_WRAPPER_TYPE_NAME, DBX_FORGE_FORM_COMPONENT_TEMPLATE, DBX_FORGE_FORM_FIELD_WRAPPER_NAME, DBX_FORGE_INFO_WRAPPER_TYPE_NAME, DBX_FORGE_PASSWORDS_MATCH_VALIDATION_KIND, DBX_FORGE_SEARCHABLE_CHIP_FIELD_TYPE_NAME, DBX_FORGE_SEARCHABLE_TEXT_FIELD_TYPE_NAME, DBX_FORGE_SECTION_WRAPPER_TYPE_NAME, DBX_FORGE_STYLE_WRAPPER_TYPE_NAME, DBX_FORGE_TEXT_PASSWORD_DEFAULT_AUTOCOMPLETE, DBX_FORGE_TEXT_VERIFY_PASSWORD_DEFAULT_AUTOCOMPLETE, DBX_FORGE_WORKING_WRAPPER_TYPE_NAME, DBX_FORMLY_FORM_COMPONENT_TEMPLATE, DBX_SEARCHABLE_FIELD_COMPONENT_DATA_TOKEN, DEFAULT_DATE_TIME_FIELD_MENU_PRESETS_PRESETS, DEFAULT_DURATION_PICKER_POPOVER_KEY, DEFAULT_FORGE_LAT_LNG_TEXT_FIELD_PLACEHOLDER, DEFAULT_FORM_DISABLED_KEY, DEFAULT_HAS_VALUE_FN, DEFAULT_LAT_LNG_TEXT_FIELD_PATTERN_MESSAGE, DEFAULT_LAT_LNG_TEXT_FIELD_PLACEHOLDER, DEFAULT_PREFERRED_COUNTRIES, DEFAULT_TRANSFORM_DEBOUNCE_TIME, DURATION_MAX_VALIDATION_MESSAGE, DURATION_MIN_VALIDATION_MESSAGE, DbxActionFormDirective, DbxActionFormSafetyDirective, DbxChecklistItemContentComponent, DbxChecklistItemFieldComponent, DbxDateTimeFieldComponent, DbxDateTimeFieldMenuPresetsService, DbxDateTimeFieldTimeMode, DbxDateTimeValueMode, DbxDefaultChecklistItemFieldDisplayComponent, DbxDefaultSearchableFieldDisplayComponent, DbxDurationPickerPopoverComponent, DbxFixedDateRangeFieldComponent, DbxFixedDateRangeFieldSelectionStrategy, DbxForgeActionDialogComponent, DbxForgeArrayFieldElementWrapperComponent, DbxForgeArrayFieldWrapperComponent, DbxForgeAsyncConfigFormComponent, DbxForgeComponentFieldComponent, DbxForgeDateRangeFieldComponent, DbxForgeDateTimeFieldComponent, DbxForgeDynamicFormSignalRef, DbxForgeFixedDateRangeFieldComponent, DbxForgeFixedDateRangeFieldSelectionStrategy, DbxForgeFormComponent, DbxForgeFormComponentImportsModule, DbxForgeFormContext, DbxForgeFormContextService, DbxForgeFormFieldWrapperComponent, DbxForgeGlobalDefaultConfigService, DbxForgeListSelectionFieldComponent, DbxForgePhoneFieldComponent, DbxForgePickableChipFieldComponent, DbxForgePickableListFieldComponent, DbxForgeSearchableChipFieldComponent, DbxForgeSearchableTextFieldComponent, DbxForgeSourceSelectFieldComponent, DbxForgeTextEditorFieldComponent, DbxForgeTimeDurationFieldComponent, DbxForgeWorkingWrapperComponent, DbxForm, DbxFormActionDialogComponent, DbxFormComponentFieldComponent, DbxFormExpandWrapperComponent, DbxFormExtensionModule, DbxFormFlexWrapperComponent, DbxFormFormlyArrayFieldModule, DbxFormFormlyBooleanFieldModule, DbxFormFormlyChecklistItemFieldModule, DbxFormFormlyComponentFieldModule, DbxFormFormlyDateFieldModule, DbxFormFormlyDbxListFieldModule, DbxFormFormlyDurationFieldModule, DbxFormFormlyFieldModule, DbxFormFormlyNumberFieldModule, DbxFormFormlyPhoneFieldModule, DbxFormFormlyPickableFieldModule, DbxFormFormlySearchableFieldModule, DbxFormFormlySourceSelectModule, DbxFormFormlyTextEditorFieldModule, DbxFormFormlyTextFieldModule, DbxFormFormlyWrapperModule, DbxFormInfoWrapperComponent, DbxFormLoadingSourceDirective, DbxFormLoginFieldModule, DbxFormModule, DbxFormRepeatArrayTypeComponent, DbxFormSearchFormComponent, DbxFormSectionWrapperComponent, DbxFormSourceDirective, DbxFormSourceSelectFieldComponent, DbxFormSpacerDirective, DbxFormState, DbxFormStyleWrapperComponent, DbxFormSubsectionWrapperComponent, DbxFormTextAvailableFieldModule, DbxFormTimezoneStringFieldModule, DbxFormToggleWrapperComponent, DbxFormValueChangeDirective, DbxFormWorkingWrapperComponent, DbxFormlyComponent, DbxFormlyContext, DbxFormlyFieldsContextDirective, DbxFormlyFormComponentImportsModule, DbxItemListFieldComponent, DbxMutableForm, DbxPhoneFieldComponent, DbxPickableChipListFieldComponent, DbxPickableListFieldComponent, DbxPickableListFieldItemListComponent, DbxPickableListFieldItemListViewComponent, DbxPickableListFieldItemListViewItemComponent, DbxSearchableChipFieldComponent, DbxSearchableFieldAutocompleteItemComponent, DbxSearchableTextFieldComponent, DbxTextEditorFieldComponent, DbxTimeDurationFieldComponent, FIELD_VALUES_ARE_EQUAL_VALIDATION_KEY, FIELD_VALUE_IS_AVAILABLE_ERROR_VALIDATION_KEY, FIELD_VALUE_IS_AVAILABLE_VALIDATION_KEY, FORGE_COMPONENT_FIELD_TYPE, FORGE_DATERANGE_FIELD_TYPE, FORGE_DATETIME_FIELD_TYPE, FORGE_EXPAND_FIELD_TYPE_NAME, FORGE_FIELD_VALUE_IS_AVAILABLE_VALIDATOR_NAME, FORGE_FIXEDDATERANGE_FIELD_TYPE, FORGE_INFO_BUTTON_FIELD_TYPE_NAME, FORGE_IS_DIVISIBLE_BY_VALIDATION_KEY, FORGE_LIST_SELECTION_FIELD_TYPE, FORGE_PHONE_FIELD_TYPE, FORGE_PICKABLE_CHIP_FIELD_TYPE, FORGE_PICKABLE_LIST_FIELD_TYPE, FORGE_SOURCE_SELECT_FIELD_TYPE, FORGE_STYLED_BOX_CLASS, FORGE_TEXT_EDITOR_FIELD_TYPE, FORGE_TIMEDURATION_FIELD_TYPE, FORGE_VALUE_SELECTION_FIELD_TYPE, INVALID_PHONE_NUMBER_EXTENSION_MESSAGE, INVALID_PHONE_NUMBER_MESSAGE, IS_DIVISIBLE_BY_VALIDATION_KEY, IS_NOT_WEBSITE_URL_VALIDATION_KEY, IS_NOT_WEBSITE_URL_WITH_EXPECTED_DOMAIN_VALIDATION_KEY, IS_NOT_WEBSITE_URL_WITH_PREFIX_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, applyTimeOffset, autoTouchWrapper, buildCombinedDateTime, checkIsFieldFlexLayoutGroupFieldConfig, checkboxField, checklistItemField, chipTextField, cityField, componentField, computeDateKeyboardStep, computeErrorMessage, computeTimeKeyboardStep, configureDbxForgeFormFieldWrapper, configureForgeAutocompleteFieldMeta, copyFormConfigCustomFnConfig, countryField, dateRangeField, dateRangeFieldMapper, dateTimeField, dateTimeFieldCalc, dateTimeFieldMapper, dateTimePreset, dateTimeRangeField, dbxDateRangeIsSameDateRangeFieldValue, dbxDateTimeInputValueParseFactory, dbxDateTimeIsSameDateTimeFieldValue, dbxDateTimeOutputValueFactory, dbxForgeAddressFields, dbxForgeAddressGroup, dbxForgeAddressLineField, dbxForgeAddressListField, dbxForgeArrayField, dbxForgeBuildFieldDef, dbxForgeCheckboxField, dbxForgeChecklistField, dbxForgeCityField, dbxForgeComponentField, dbxForgeContainer, dbxForgeCountryField, dbxForgeDateField, dbxForgeDateRangeRow, dbxForgeDateTimeField, dbxForgeDateTimeRangeRow, dbxForgeDefaultValidationMessages, dbxForgeDollarAmountField, dbxForgeEmailField, dbxForgeExpandWrapper, dbxForgeFieldDisabled, dbxForgeFieldFunction, dbxForgeFieldFunctionConfigPropsWithHintBuilder, dbxForgeFieldFunctionConfigure, dbxForgeFinalizeFormConfig, dbxForgeFixedDateRangeField, dbxForgeFlexLayout, dbxForgeFormComponentProviders, dbxForgeGroup, dbxForgeInfoWrapper, dbxForgeLatLngTextField, dbxForgeListSelectionField, dbxForgeNameField, dbxForgeNumberField, dbxForgeNumberSliderField, dbxForgePhoneField, dbxForgePickableChipField, dbxForgePickableListField, dbxForgeRow, dbxForgeSearchableChipField, dbxForgeSearchableStringChipField, dbxForgeSearchableTextField, dbxForgeSectionWrapper, dbxForgeSourceSelectField, dbxForgeStateField, dbxForgeStyleWrapper, dbxForgeSubsectionWrapper, dbxForgeTextAreaField, dbxForgeTextEditorField, dbxForgeTextField, dbxForgeTextIsAvailableField, dbxForgeTextPasswordField, dbxForgeTextPasswordWithVerifyField, dbxForgeTextVerifyPasswordField, dbxForgeTimeDurationField, dbxForgeTimezoneStringField, dbxForgeToggleField, dbxForgeToggleWrapper, dbxForgeUsernameLoginField, dbxForgeUsernamePasswordLoginFields, dbxForgeValueSelectionField, dbxForgeWebsiteUrlField, dbxForgeZipCodeField, dbxFormSearchFormFields, dbxFormSourceObservable, dbxFormSourceObservableFromStream, dbxFormlyFormComponentProviders, dbxListField, defaultValidationMessages, disableAutofillAttributes, disableFormlyFieldAutofillAttributes, dollarAmountField, durationMaxValidationMessage, durationMinValidationMessage, emailField, expandWrapper, fieldAutocompleteAttributeValue, fieldValueIsAvailableValidator, fieldValuesAreEqualValidator, filterPartialPotentialFieldConfigValuesFromObject, filterPickableItemFieldValuesByLabel, filterPickableItemFieldValuesByLabelFilterFunction, filterPresets, fixedDateRangeField, fixedDateRangeFieldMapper, flexLayoutWrapper, formlyAddValueSelectionOptionFunction, formlyAddWrapperToFormlyFieldConfig, formlyAddressField, formlyAddressFormlyFields, formlyAddressLineField, formlyAddressListField, formlyAutoTouchWrapper, formlyCheckIsFieldFlexLayoutGroupFieldConfig, formlyCheckboxField, formlyChecklistItemField, formlyChipTextField, formlyCityField, formlyComponentField, formlyCountryField, formlyDateRangeField, formlyDateTimeField, formlyDateTimeRangeField, formlyDbxListField, formlyDollarAmountField, formlyEmailField, formlyExpandWrapper, formlyField, formlyFixedDateRangeField, formlyFlexLayoutWrapper, formlyHiddenField, formlyInfoWrapper, formlyLatLngTextField, formlyMakeMetaFilterSearchableFieldValueDisplayFn, formlyNameField, formlyNumberField, formlyNumberFieldTransformParser, formlyNumberSliderField, formlyPhoneAndLabelSectionField, formlyPhoneField, formlyPhoneListField, formlyPickableItemChipField, formlyPickableItemListField, formlyRepeatArrayField, formlySearchableChipField, formlySearchableStringChipField, formlySearchableTextField, formlySectionWrapper, formlySourceSelectField, formlyStateField, formlyStyleWrapper, formlySubsectionWrapper, formlyTextAreaField, formlyTextEditorField, formlyTextField, formlyTextFieldTransformParser, formlyTextIsAvailableField, formlyTextPasswordField, formlyTextPasswordWithVerifyFieldGroup, formlyTextVerifyPasswordField, formlyTimeDurationField, formlyTimeOnlyField, formlyTimezoneStringField, formlyToggleField, formlyToggleWrapper, formlyUsernameLoginField, formlyUsernamePasswordLoginFields, formlyValueSelectionField, formlyWebsiteUrlField, formlyWorkingWrapper, formlyWrappedPhoneAndLabelField, formlyZipCodeField, hiddenField, infoWrapper, isDbxDateTimeFieldTimeDateConfig, isDivisibleBy, isDomain, isE164PhoneNumber, isE164PhoneNumberWithValidExtension, isInRange, isPhoneExtension, isTruthy, isWebsiteUrlValidator, latLngTextField, makeMetaFilterSearchableFieldValueDisplayFn, maxLengthValidationMessage, maxValidationMessage, mergeDbxForgeFieldFormConfig, mergePickerConfig, mergePropsValueObjects, minLengthValidationMessage, minValidationMessage, nameField, navigateDate, numberField, numberFieldTransformParser, numberSliderField, partialPotentialFieldConfigKeys, partialPotentialFieldConfigKeysFilter, phoneAndLabelSectionField, phoneField, phoneFieldMapper, phoneListField, pickableItemChipField, pickableItemListField, pickableValueFieldValuesConfigForStaticLabeledValues, propsAndConfigForFieldConfig, propsValueForFieldConfig, provideDbxForgeFormContext, provideDbxForgeFormFieldDeclarations, provideDbxForm, provideDbxFormConfiguration, provideDbxFormFormlyFieldDeclarations, provideDbxMutableForm, provideFormlyContext, repeatArrayField, resolveForgeSelectionOptions, searchableChipField, searchableStringChipField, searchableTextField, sectionWrapper, sortPickableItemsByLabel, sortPickableItemsByLabelStringFunction, sourceSelectField, stateField, streamValueFromControl, stripEmptyForgeValues, stripForgeInternalKeys, styleWrapper, subsectionWrapper, syncConfigValueObs, textAreaField, textEditorField, textField, textFieldTransformParser, textIsAvailableField, textPasswordField, textPasswordWithVerifyFieldGroup, textVerifyPasswordField, timeDurationField, timeDurationFieldMapper, timeOnlyField, timezoneStringField, toggleDisableFormControl, toggleField, toggleWrapper, usernameLoginField, usernamePasswordLoginFields, validatorsForFieldConfig, valueSelectionField, websiteUrlField, workingWrapper, wrappedPhoneAndLabelField, zipCodeField };
+export { APP_ACTION_FORM_DISABLED_KEY, AbstractAsyncForgeFormDirective, AbstractAsyncFormlyFormDirective, AbstractConfigAsyncForgeFormDirective, AbstractConfigAsyncFormlyFormDirective, AbstractDbxPickableItemFieldDirective, AbstractDbxSearchableFieldDisplayDirective, AbstractDbxSearchableValueFieldDirective, AbstractForgeFormDirective, AbstractForgePickableItemFieldDirective, AbstractForgeSearchableFieldDirective, AbstractFormExpandSectionWrapperDirective, AbstractFormlyFormDirective, AbstractSyncForgeFormDirective, 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_FORGE_ARRAY_FIELD_ELEMENT_WRAPPER_NAME, DBX_FORGE_ARRAY_FIELD_WRAPPER_NAME, DBX_FORGE_DEFAULT_PASSWORDS_MATCH_VALIDATION_MESSAGE, DBX_FORGE_FIELD_TYPES, DBX_FORGE_FIELD_WRAPPER_TYPES, DBX_FORGE_FLEX_WRAPPER_TYPE_NAME, DBX_FORGE_FORM_COMPONENT_TEMPLATE, DBX_FORGE_FORM_FIELD_WRAPPER_NAME, DBX_FORGE_INFO_WRAPPER_TYPE_NAME, DBX_FORGE_PASSWORDS_MATCH_VALIDATION_KIND, DBX_FORGE_SEARCHABLE_CHIP_FIELD_TYPE_NAME, DBX_FORGE_SEARCHABLE_TEXT_FIELD_TYPE_NAME, DBX_FORGE_SECTION_WRAPPER_TYPE_NAME, DBX_FORGE_STYLE_WRAPPER_TYPE_NAME, DBX_FORGE_TEXT_PASSWORD_DEFAULT_AUTOCOMPLETE, DBX_FORGE_TEXT_VERIFY_PASSWORD_DEFAULT_AUTOCOMPLETE, DBX_FORGE_WORKING_WRAPPER_TYPE_NAME, DBX_FORMLY_FORM_COMPONENT_TEMPLATE, DBX_SEARCHABLE_FIELD_COMPONENT_DATA_TOKEN, DEFAULT_DATE_TIME_FIELD_MENU_PRESETS_PRESETS, DEFAULT_DURATION_PICKER_POPOVER_KEY, DEFAULT_FORGE_LAT_LNG_TEXT_FIELD_PLACEHOLDER, DEFAULT_FORM_DISABLED_KEY, DEFAULT_HAS_VALUE_FN, DEFAULT_LAT_LNG_TEXT_FIELD_PATTERN_MESSAGE, DEFAULT_LAT_LNG_TEXT_FIELD_PLACEHOLDER, DEFAULT_PREFERRED_COUNTRIES, DEFAULT_TRANSFORM_DEBOUNCE_TIME, DURATION_MAX_VALIDATION_MESSAGE, DURATION_MIN_VALIDATION_MESSAGE, DbxActionFormDirective, DbxActionFormSafetyDirective, DbxChecklistItemContentComponent, DbxChecklistItemFieldComponent, DbxDateTimeFieldComponent, DbxDateTimeFieldMenuPresetsService, DbxDateTimeFieldTimeMode, DbxDateTimeValueMode, DbxDefaultChecklistItemFieldDisplayComponent, DbxDefaultSearchableFieldDisplayComponent, DbxDurationPickerPopoverComponent, DbxFixedDateRangeFieldComponent, DbxFixedDateRangeFieldSelectionStrategy, DbxForgeActionDialogComponent, DbxForgeArrayFieldElementWrapperComponent, DbxForgeArrayFieldWrapperComponent, DbxForgeAsyncConfigFormComponent, DbxForgeComponentFieldComponent, DbxForgeDateRangeFieldComponent, DbxForgeDateTimeFieldComponent, DbxForgeDynamicFormSignalRef, DbxForgeFixedDateRangeFieldComponent, DbxForgeFixedDateRangeFieldSelectionStrategy, DbxForgeFormComponent, DbxForgeFormComponentImportsModule, DbxForgeFormContext, DbxForgeFormContextService, DbxForgeFormFieldWrapperComponent, DbxForgeGlobalDefaultConfigService, DbxForgeListSelectionFieldComponent, DbxForgePhoneFieldComponent, DbxForgePickableChipFieldComponent, DbxForgePickableListFieldComponent, DbxForgeSearchableChipFieldComponent, DbxForgeSearchableTextFieldComponent, DbxForgeSourceSelectFieldComponent, DbxForgeTextEditorFieldComponent, DbxForgeTimeDurationFieldComponent, DbxForgeWorkingWrapperComponent, DbxForm, DbxFormActionDialogComponent, DbxFormComponentFieldComponent, DbxFormExpandWrapperComponent, DbxFormExtensionModule, DbxFormFlexWrapperComponent, DbxFormFormlyArrayFieldModule, DbxFormFormlyBooleanFieldModule, DbxFormFormlyChecklistItemFieldModule, DbxFormFormlyComponentFieldModule, DbxFormFormlyDateFieldModule, DbxFormFormlyDbxListFieldModule, DbxFormFormlyDurationFieldModule, DbxFormFormlyFieldModule, DbxFormFormlyNumberFieldModule, DbxFormFormlyPhoneFieldModule, DbxFormFormlyPickableFieldModule, DbxFormFormlySearchableFieldModule, DbxFormFormlySourceSelectModule, DbxFormFormlyTextEditorFieldModule, DbxFormFormlyTextFieldModule, DbxFormFormlyWrapperModule, DbxFormInfoWrapperComponent, DbxFormLoadingSourceDirective, DbxFormLoginFieldModule, DbxFormModule, DbxFormRepeatArrayTypeComponent, DbxFormSearchFormComponent, DbxFormSectionWrapperComponent, DbxFormSourceDirective, DbxFormSourceSelectFieldComponent, DbxFormSpacerDirective, DbxFormState, DbxFormStyleWrapperComponent, DbxFormSubsectionWrapperComponent, DbxFormTextAvailableFieldModule, DbxFormTimezoneStringFieldModule, DbxFormToggleWrapperComponent, DbxFormValueChangeDirective, DbxFormWorkingWrapperComponent, DbxFormlyComponent, DbxFormlyContext, DbxFormlyFieldsContextDirective, DbxFormlyFormComponentImportsModule, DbxItemListFieldComponent, DbxMutableForm, DbxPhoneFieldComponent, DbxPickableChipListFieldComponent, DbxPickableListFieldComponent, DbxPickableListFieldItemListComponent, DbxPickableListFieldItemListViewComponent, DbxPickableListFieldItemListViewItemComponent, DbxSearchableChipFieldComponent, DbxSearchableFieldAutocompleteItemComponent, DbxSearchableTextFieldComponent, DbxTextEditorFieldComponent, DbxTimeDurationFieldComponent, FIELD_VALUES_ARE_EQUAL_VALIDATION_KEY, FIELD_VALUE_IS_AVAILABLE_ERROR_VALIDATION_KEY, FIELD_VALUE_IS_AVAILABLE_VALIDATION_KEY, FORGE_COMPONENT_FIELD_TYPE, FORGE_DATERANGE_FIELD_TYPE, FORGE_DATETIME_FIELD_TYPE, FORGE_EXPAND_FIELD_TYPE_NAME, FORGE_FIELD_VALUE_IS_AVAILABLE_VALIDATOR_NAME, FORGE_FIXEDDATERANGE_FIELD_TYPE, FORGE_INFO_BUTTON_FIELD_TYPE_NAME, FORGE_IS_DIVISIBLE_BY_VALIDATION_KEY, FORGE_LIST_SELECTION_FIELD_TYPE, FORGE_PHONE_FIELD_TYPE, FORGE_PICKABLE_CHIP_FIELD_TYPE, FORGE_PICKABLE_LIST_FIELD_TYPE, FORGE_SOURCE_SELECT_FIELD_TYPE, FORGE_STYLED_BOX_CLASS, FORGE_TEXT_EDITOR_FIELD_TYPE, FORGE_TIMEDURATION_FIELD_TYPE, FORGE_VALUE_SELECTION_FIELD_TYPE, INVALID_PHONE_NUMBER_EXTENSION_MESSAGE, INVALID_PHONE_NUMBER_MESSAGE, IS_DIVISIBLE_BY_VALIDATION_KEY, IS_NOT_WEBSITE_URL_VALIDATION_KEY, IS_NOT_WEBSITE_URL_WITH_EXPECTED_DOMAIN_VALIDATION_KEY, IS_NOT_WEBSITE_URL_WITH_PREFIX_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, SELF_DEPENDENCY_TOKEN, TAKE_NEXT_UPCOMING_TIME_CONFIG_OBS, addValueSelectionOptionFunction, addWrapperToFormlyFieldConfig, addressField, addressFormlyFields, addressLineField, addressListField, applyTimeOffset, autoTouchWrapper, buildCombinedDateTime, checkIsFieldFlexLayoutGroupFieldConfig, checkboxField, checklistItemField, chipTextField, cityField, componentField, computeDateKeyboardStep, computeErrorMessage, computeTimeKeyboardStep, configureDbxForgeFormFieldWrapper, configureDbxForgeFormFieldWrapperWith, configureForgeAutocompleteFieldMeta, copyFormConfigCustomFnConfig, countryField, dateRangeField, dateRangeFieldMapper, dateTimeField, dateTimeFieldCalc, dateTimeFieldMapper, dateTimePreset, dateTimeRangeField, dbxDateRangeIsSameDateRangeFieldValue, dbxDateTimeInputValueParseFactory, dbxDateTimeIsSameDateTimeFieldValue, dbxDateTimeOutputValueFactory, dbxForgeAddressFields, dbxForgeAddressGroup, dbxForgeAddressLineField, dbxForgeAddressListField, dbxForgeArrayField, dbxForgeBuildFieldDef, dbxForgeCheckboxField, dbxForgeChecklistField, dbxForgeCityField, dbxForgeComponentField, dbxForgeContainer, dbxForgeCountryField, dbxForgeDateField, dbxForgeDateRangeRow, dbxForgeDateTimeField, dbxForgeDateTimeRangeRow, dbxForgeDefaultValidationMessages, dbxForgeDollarAmountField, dbxForgeEmailField, dbxForgeExpandWrapper, dbxForgeFieldDisabled, dbxForgeFieldFunction, dbxForgeFieldFunctionConfigPropsWithHintBuilder, dbxForgeFieldFunctionConfigure, dbxForgeFinalizeFormConfig, dbxForgeFixedDateRangeField, dbxForgeFlexLayout, provideDbxForgeFormContext as dbxForgeFormComponentProviders, dbxForgeGroup, dbxForgeInfoWrapper, dbxForgeLatLngTextField, dbxForgeListSelectionField, dbxForgeNameField, dbxForgeNumberField, dbxForgeNumberSliderField, dbxForgePhoneField, dbxForgePickableChipField, dbxForgePickableListField, dbxForgeRow, dbxForgeSearchableChipField, dbxForgeSearchableStringChipField, dbxForgeSearchableTextField, dbxForgeSectionWrapper, dbxForgeSourceSelectField, dbxForgeStateField, dbxForgeStyleWrapper, dbxForgeSubsectionWrapper, dbxForgeTextAreaField, dbxForgeTextEditorField, dbxForgeTextField, dbxForgeTextIsAvailableField, dbxForgeTextPasswordField, dbxForgeTextPasswordWithVerifyField, dbxForgeTextVerifyPasswordField, dbxForgeTimeDurationField, dbxForgeTimezoneStringField, dbxForgeToggleField, dbxForgeToggleWrapper, dbxForgeUsernameLoginField, dbxForgeUsernamePasswordLoginFields, dbxForgeValueSelectionField, dbxForgeWebsiteUrlField, dbxForgeZipCodeField, dbxFormSearchFormFields, dbxFormSourceObservable, dbxFormSourceObservableFromStream, provideFormlyContext as dbxFormlyFormComponentProviders, dbxListField, defaultValidationMessages, disableAutofillAttributes, disableFormlyFieldAutofillAttributes, dollarAmountField, durationMaxValidationMessage, durationMinValidationMessage, emailField, expandWrapper, fieldAutocompleteAttributeValue, fieldValueIsAvailableValidator, fieldValuesAreEqualValidator, filterPartialPotentialFieldConfigValuesFromObject, filterPickableItemFieldValuesByLabel, filterPickableItemFieldValuesByLabelFilterFunction, filterPresets, fixedDateRangeField, fixedDateRangeFieldMapper, flexLayoutWrapper, formlyAddValueSelectionOptionFunction, formlyAddWrapperToFormlyFieldConfig, formlyAddressField, formlyAddressFormlyFields, formlyAddressLineField, formlyAddressListField, formlyAutoTouchWrapper, formlyCheckIsFieldFlexLayoutGroupFieldConfig, formlyCheckboxField, formlyChecklistItemField, formlyChipTextField, formlyCityField, formlyComponentField, formlyCountryField, formlyDateRangeField, formlyDateTimeField, formlyDateTimeRangeField, formlyDbxListField, formlyDollarAmountField, formlyEmailField, formlyExpandWrapper, formlyField, formlyFixedDateRangeField, formlyFlexLayoutWrapper, formlyHiddenField, formlyInfoWrapper, formlyLatLngTextField, formlyMakeMetaFilterSearchableFieldValueDisplayFn, formlyNameField, formlyNumberField, formlyNumberFieldTransformParser, formlyNumberSliderField, formlyPhoneAndLabelSectionField, formlyPhoneField, formlyPhoneListField, formlyPickableItemChipField, formlyPickableItemListField, formlyRepeatArrayField, formlySearchableChipField, formlySearchableStringChipField, formlySearchableTextField, formlySectionWrapper, formlySourceSelectField, formlyStateField, formlyStyleWrapper, formlySubsectionWrapper, formlyTextAreaField, formlyTextEditorField, formlyTextField, formlyTextFieldTransformParser, formlyTextIsAvailableField, formlyTextPasswordField, formlyTextPasswordWithVerifyFieldGroup, formlyTextVerifyPasswordField, formlyTimeDurationField, formlyTimeOnlyField, formlyTimezoneStringField, formlyToggleField, formlyToggleWrapper, formlyUsernameLoginField, formlyUsernamePasswordLoginFields, formlyValueSelectionField, formlyWebsiteUrlField, formlyWorkingWrapper, formlyWrappedPhoneAndLabelField, formlyZipCodeField, hiddenField, infoWrapper, isDbxDateTimeFieldTimeDateConfig, isDivisibleBy, isDomain, isE164PhoneNumber, isE164PhoneNumberWithValidExtension, isInRange, isPhoneExtension, isTruthy, isWebsiteUrlValidator, latLngTextField, makeMetaFilterSearchableFieldValueDisplayFn, maxLengthValidationMessage, maxValidationMessage, mergeDbxForgeFieldFormConfig, mergePickerConfig, mergePropsValueObjects, minLengthValidationMessage, minValidationMessage, nameField, navigateDate, numberField, numberFieldTransformParser, numberSliderField, partialPotentialFieldConfigKeys, partialPotentialFieldConfigKeysFilter, phoneAndLabelSectionField, phoneField, phoneFieldMapper, phoneListField, pickableItemChipField, pickableItemListField, pickableValueFieldValuesConfigForStaticLabeledValues, propsAndConfigForFieldConfig, propsValueForFieldConfig, provideDbxForgeFormContext, provideDbxForgeFormFieldDeclarations, provideDbxForm, provideDbxFormConfiguration, provideDbxFormFormlyFieldDeclarations, provideDbxMutableForm, provideFormlyContext, repeatArrayField, resolveForgeSelectionOptions, searchableChipField, searchableStringChipField, searchableTextField, sectionWrapper, sortPickableItemsByLabel, sortPickableItemsByLabelStringFunction, sourceSelectField, stateField, streamValueFromControl, stripEmptyForgeValues, stripForgeInternalKeys, styleWrapper, subsectionWrapper, syncConfigValueObs, textAreaField, textEditorField, textField, textFieldTransformParser, textIsAvailableField, textPasswordField, textPasswordWithVerifyFieldGroup, textVerifyPasswordField, timeDurationField, timeDurationFieldMapper, timeOnlyField, timezoneStringField, toggleDisableFormControl, toggleField, toggleWrapper, usernameLoginField, usernamePasswordLoginFields, validatorsForFieldConfig, valueSelectionField, websiteUrlField, workingWrapper, wrappedPhoneAndLabelField, zipCodeField };
 //# sourceMappingURL=dereekb-dbx-form.mjs.map