@dereekb/dbx-form 13.43.0 → 14.0.1

package/fesm2022/dereekb-dbx-form.mjs

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/core';
-import { forwardRef, inject, input, Directive, effect, Injectable, signal, computed, untracked, viewChild, ChangeDetectionStrategy, Component, output, InjectionToken, DestroyRef, ElementRef, ViewContainerRef, NgModule, model, makeEnvironmentProviders } from '@angular/core';
+import { forwardRef, inject, input, Directive, effect, Service, signal, computed, Injectable, untracked, viewChild, Component, output, InjectionToken, DestroyRef, ElementRef, ViewContainerRef, NgModule, model, makeEnvironmentProviders } from '@angular/core';
 import * as i1$1 from '@dereekb/dbx-web';
-import { DbxActionTransitionSafetyDirective, AbstractDialogDirective, DbxDialogContentDirective, DbxActionModule, DbxButtonModule, DbxDialogContentCloseComponent, AbstractPopoverDirective, DbxPopoverService, DbxAnchorComponent, DbxLoadingModule, DbxButtonComponent, DbxLoadingComponent, dbxValueListItemDecisionFunction, DbxListModifierModule, CompactContextStore, mapCompactModeObs, DbxChipDirective, DbxButtonSpacerDirective } from '@dereekb/dbx-web';
+import { DbxActionTransitionSafetyDirective, AbstractDialogDirective, DbxActionSnackbarErrorDirective, DbxDialogContentDirective, DbxActionModule, DbxButtonModule, DbxDialogContentCloseComponent, AbstractPopoverDirective, DbxPopoverService, DbxAnchorComponent, DbxLoadingModule, DbxButtonComponent, DbxLoadingComponent, dbxValueListItemDecisionFunction, DbxListModifierModule, CompactContextStore, mapCompactModeObs, DbxChipDirective, DbxButtonSpacerDirective } from '@dereekb/dbx-web';
 import { isPast, addSeconds, startOfDay, addMinutes, addDays, isBefore } from 'date-fns';
 import { map, of, shareReplay, switchMap, first, exhaustMap, catchError, delay, filter, combineLatest, distinctUntilChanged, BehaviorSubject, scan, skip, EMPTY, throttleTime, startWith, Subject, interval, combineLatestWith as combineLatestWith$1, timer, withLatestFrom, debounceTime as debounceTime$1, mergeMap, tap as tap$1 } from 'rxjs';
 import * as i1 from '@dereekb/dbx-core';
@@ -167,26 +167,31 @@ class DbxActionFormDirective {
      *
      * Defaults to true.
      */
-    dbxActionFormDisabledOnWorking = input(true, ...(ngDevMode ? [{ debugName: "dbxActionFormDisabledOnWorking" }] : /* istanbul ignore next */ []));
+    dbxActionFormDisabledOnWorking = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dbxActionFormDisabledOnWorking" }] : /* istanbul ignore next */ []));
     /**
      * Optional validator that checks whether or not the value is
      * ready to send before the context store is marked enabled.
      */
-    dbxActionFormIsValid = input(...(ngDevMode ? [undefined, { debugName: "dbxActionFormIsValid" }] : /* istanbul ignore next */ []));
+    dbxActionFormIsValid = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "dbxActionFormIsValid" }] : /* istanbul ignore next */ []));
     /**
      * Optional function that checks whether or not the value is still the same/equal.
      */
-    dbxActionFormIsEqual = input(...(ngDevMode ? [undefined, { debugName: "dbxActionFormIsEqual" }] : /* istanbul ignore next */ []));
+    dbxActionFormIsEqual = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "dbxActionFormIsEqual" }] : /* istanbul ignore next */ []));
     /**
      * Optional function that checks whether or not the value has been modified.
      *
      * If dbxActionFormIsEqual is provided, this will be ignored.
      */
-    dbxActionFormIsModified = input(...(ngDevMode ? [undefined, { debugName: "dbxActionFormIsModified" }] : /* istanbul ignore next */ []));
+    dbxActionFormIsModified = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "dbxActionFormIsModified" }] : /* istanbul ignore next */ []));
     /**
      * Optional function that maps the form's value to the source's value.
      */
-    dbxActionFormMapValue = input(...(ngDevMode ? [undefined, { debugName: "dbxActionFormMapValue" }] : /* istanbul ignore next */ []));
+    dbxActionFormMapValue = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "dbxActionFormMapValue" }] : /* istanbul ignore next */ []));
     dbxActionFormDisabledOnWorking$ = toObservable(this.dbxActionFormDisabledOnWorking);
     isValidFunction$ = toObservable(this.dbxActionFormIsValid).pipe(map((x) => x ?? (() => of(true))), shareReplay(1));
     isModifiedFunction$ = makeIsModifiedFunctionObservable({
@@ -302,14 +307,13 @@ class DbxActionFormDirective {
             return of({ value: value });
         }));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxActionFormDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.11", 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: "22.1.4", ngImport: i0, type: DbxActionFormDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.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 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxActionFormDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: DbxActionFormDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[dbxActionForm]',
-                    standalone: true
+                    selector: '[dbxActionForm]'
                 }]
         }], ctorParameters: () => [], propDecorators: { dbxActionFormDisabledOnWorking: [{ type: i0.Input, args: [{ isSignal: true, alias: "dbxActionFormDisabledOnWorking", required: false }] }], dbxActionFormIsValid: [{ type: i0.Input, args: [{ isSignal: true, alias: "dbxActionFormIsValid", required: false }] }], dbxActionFormIsEqual: [{ type: i0.Input, args: [{ isSignal: true, alias: "dbxActionFormIsEqual", required: false }] }], dbxActionFormIsModified: [{ type: i0.Input, args: [{ isSignal: true, alias: "dbxActionFormIsModified", required: false }] }], dbxActionFormMapValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "dbxActionFormMapValue", required: false }] }] } });
 
@@ -332,20 +336,21 @@ class DbxActionFormSafetyDirective extends DbxActionTransitionSafetyDirective {
      *
      * Defaults to `'auto'`, which blocks transitions when the form has unsaved changes.
      */
-    dbxActionFormSafety = input('auto', ...(ngDevMode ? [{ debugName: "dbxActionFormSafety" }] : /* istanbul ignore next */ []));
-    _dbxActionFormSafetyUpdateEffect = effect(() => this._safetyType.next(this.dbxActionFormSafety()), ...(ngDevMode ? [{ debugName: "_dbxActionFormSafetyUpdateEffect" }] : /* istanbul ignore next */ []));
+    dbxActionFormSafety = input('auto', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dbxActionFormSafety" }] : /* istanbul ignore next */ []));
+    _dbxActionFormSafetyUpdateEffect = effect(() => this._safetyType.next(this.dbxActionFormSafety()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_dbxActionFormSafetyUpdateEffect" }] : /* istanbul ignore next */ []));
     _handleOnBeforeTransition(transition) {
         this.dbxActionForm.form.forceFormUpdate();
         return super._handleOnBeforeTransition(transition);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxActionFormSafetyDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.11", 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: "22.1.4", ngImport: i0, type: DbxActionFormSafetyDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.4", 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.11", ngImport: i0, type: DbxActionFormSafetyDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: DbxActionFormSafetyDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[dbxActionFormSafety]',
-                    standalone: true
+                    selector: '[dbxActionFormSafety]'
                 }]
         }], propDecorators: { dbxActionFormSafety: [{ type: i0.Input, args: [{ isSignal: true, alias: "dbxActionFormSafety", required: false }] }] } });
 
@@ -602,14 +607,11 @@ class DbxForgeGlobalDefaultConfigService {
     setDefaultValidationMessages(messages) {
         this._defaults = { ...this._defaults, defaultValidationMessages: messages ?? undefined };
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxForgeGlobalDefaultConfigService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxForgeGlobalDefaultConfigService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: DbxForgeGlobalDefaultConfigService, deps: [], target: i0.ɵɵFactoryTarget.Service });
+    static ɵprov = i0.ɵɵngDeclareService({ minVersion: "22.0.0", version: "22.1.4", ngImport: i0, type: DbxForgeGlobalDefaultConfigService });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxForgeGlobalDefaultConfigService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: DbxForgeGlobalDefaultConfigService, decorators: [{
+            type: Service
         }] });
 
 /**
@@ -787,7 +789,8 @@ class DbxForgeFormContext {
      * and the combined result is exposed as {@link allWrappersValid}.
      */
     _wrapperValidSignals = new Set();
-    _wrapperValidSignalsVersion = signal(0, ...(ngDevMode ? [{ debugName: "_wrapperValidSignalsVersion" }] : /* istanbul ignore next */ []));
+    _wrapperValidSignalsVersion = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_wrapperValidSignalsVersion" }] : /* istanbul ignore next */ []));
     /**
      * Computed signal that is `true` when all registered wrapper nested forms are valid.
      * Returns `true` when no wrappers are registered.
@@ -802,7 +805,8 @@ class DbxForgeFormContext {
             }
         }
         return result;
-    }, ...(ngDevMode ? [{ debugName: "allWrappersValid" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "allWrappersValid" }] : /* istanbul ignore next */ []));
     /**
      * Registers a wrapper's nested form validity signal for tracking.
      *
@@ -826,7 +830,8 @@ class DbxForgeFormContext {
      * Allows wrapper field components to write values to sibling hidden fields
      * in the parent form (e.g., for the form-field wrapper's hidden field sync).
      */
-    _parentFormTree = signal(undefined, ...(ngDevMode ? [{ debugName: "_parentFormTree" }] : /* istanbul ignore next */ []));
+    _parentFormTree = signal(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_parentFormTree" }] : /* istanbul ignore next */ []));
     parentFormTree = this._parentFormTree.asReadonly();
     setParentFormTree(tree) {
         this._parentFormTree.set(tree);
@@ -928,10 +933,10 @@ class DbxForgeFormContext {
             this._reset.complete();
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxForgeFormContext, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxForgeFormContext });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: DbxForgeFormContext, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: DbxForgeFormContext });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxForgeFormContext, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: DbxForgeFormContext, decorators: [{
             type: Injectable
         }] });
 /**
@@ -985,14 +990,16 @@ class DbxForgeFormContextService {
     formValue = computed(() => {
         const form = this._signalRef.dynamicForm();
         return (form?.formValue() ?? {});
-    }, ...(ngDevMode ? [{ debugName: "formValue" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "formValue" }] : /* istanbul ignore next */ []));
     /**
      * The active Signal Form tree, or undefined until the DynamicForm mounts.
      */
     rootForm = computed(() => {
         const form = this._signalRef.dynamicForm();
         return form?.form();
-    }, ...(ngDevMode ? [{ debugName: "rootForm" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rootForm" }] : /* istanbul ignore next */ []));
     /**
      * Builds an {@link EvaluationContext} scoped to the current array item.
      *
@@ -1048,10 +1055,10 @@ class DbxForgeFormContextService {
         }
         return result;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxForgeFormContextService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxForgeFormContextService });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: DbxForgeFormContextService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: DbxForgeFormContextService });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxForgeFormContextService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: DbxForgeFormContextService, decorators: [{
             type: Injectable
         }] });
 /**
@@ -1090,13 +1097,18 @@ class DbxForgeFormComponent {
     _setValueSub = cleanSubscription();
     _resetSub = cleanSubscription();
     _disabledSub = cleanSubscription();
-    dynamicForm = viewChild(DynamicForm, ...(ngDevMode ? [{ debugName: "dynamicForm" }] : /* istanbul ignore next */ []));
+    dynamicForm = viewChild(DynamicForm, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dynamicForm" }] : /* istanbul ignore next */ []));
     formValue = signal({}, { ...(ngDevMode ? { debugName: "formValue" } : /* istanbul ignore next */ {}), equal: (a, b) => _forgeFormValueEqual(a, b, this._context) });
     configSignal = toSignal(this._context.config$, { initialValue: undefined });
-    _changesCount = signal(0, ...(ngDevMode ? [{ debugName: "_changesCount" }] : /* istanbul ignore next */ []));
-    _lastResetAt = signal(new Date(), ...(ngDevMode ? [{ debugName: "_lastResetAt" }] : /* istanbul ignore next */ []));
-    _isReset = signal(true, ...(ngDevMode ? [{ debugName: "_isReset" }] : /* istanbul ignore next */ []));
-    _disabled = signal(undefined, ...(ngDevMode ? [{ debugName: "_disabled" }] : /* istanbul ignore next */ []));
+    _changesCount = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_changesCount" }] : /* istanbul ignore next */ []));
+    _lastResetAt = signal(new Date(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_lastResetAt" }] : /* istanbul ignore next */ []));
+    _isReset = signal(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_isReset" }] : /* istanbul ignore next */ []));
+    _disabled = signal(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_disabled" }] : /* istanbul ignore next */ []));
     /**
      * True once ng-forge has finished its synchronous initialization: the config
      * has arrived, the DynamicForm view child is populated, and ng-forge has
@@ -1108,7 +1120,8 @@ class DbxForgeFormComponent {
      * {@link DbxFormSourceDirective} 'reset' mode still forwards an
      * asynchronously-resolving value once it arrives.
      */
-    _formReady = signal(false, ...(ngDevMode ? [{ debugName: "_formReady" }] : /* istanbul ignore next */ []));
+    _formReady = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_formReady" }] : /* istanbul ignore next */ []));
     /**
      * A setValue payload received while {@link _formReady} was false. Applied
      * once ready; only the most recent pending value is retained.
@@ -1118,10 +1131,12 @@ class DbxForgeFormComponent {
      * with a null/undefined inner value).
      */
     _pendingValue = undefined;
-    isDisabledSignal = computed(() => BooleanStringKeyArrayUtility.isTrue(this._disabled()), ...(ngDevMode ? [{ debugName: "isDisabledSignal" }] : /* istanbul ignore next */ []));
+    isDisabledSignal = computed(() => BooleanStringKeyArrayUtility.isTrue(this._disabled()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isDisabledSignal" }] : /* istanbul ignore next */ []));
     formOptionsSignal = computed(() => {
         return this.isDisabledSignal() ? { disabled: true } : undefined;
-    }, ...(ngDevMode ? [{ debugName: "formOptionsSignal" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "formOptionsSignal" }] : /* istanbul ignore next */ []));
     /**
      * Computed validity combining the ng-forge DynamicForm's valid signal with
      * validity from all registered wrapper nested forms.
@@ -1131,7 +1146,8 @@ class DbxForgeFormComponent {
      * DynamicForm.valid(). They register their nested validity via
      * {@link DbxForgeFormContext.registerWrapperValidity}, and this computed combines both sources.
      */
-    formValidSignal = computed(() => (this.dynamicForm()?.valid() ?? false) && this._context.allWrappersValid(), ...(ngDevMode ? [{ debugName: "formValidSignal" }] : /* istanbul ignore next */ []));
+    formValidSignal = computed(() => (this.dynamicForm()?.valid() ?? false) && this._context.allWrappersValid(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "formValidSignal" }] : /* istanbul ignore next */ []));
     /**
      * Track form value changes and update the context value + changes count.
      *
@@ -1162,7 +1178,8 @@ class DbxForgeFormComponent {
                 this._emitFormState();
             }
         });
-    }, ...(ngDevMode ? [{ debugName: "_formValueEffect" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_formValueEffect" }] : /* istanbul ignore next */ []));
     /**
      * Marks the form as ready once the ng-forge DynamicForm view child is
      * populated. The viewChild signal updates after ng-forge has completed its
@@ -1185,7 +1202,8 @@ class DbxForgeFormComponent {
                 }
             });
         }
-    }, ...(ngDevMode ? [{ debugName: "_formReadyEffect" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_formReadyEffect" }] : /* istanbul ignore next */ []));
     /**
      * Expose the parent DynamicForm's field tree to the context so wrapper components
      * can write to sibling hidden fields in the parent form.
@@ -1195,7 +1213,8 @@ class DbxForgeFormComponent {
         untracked(() => {
             this._context.setParentFormTree(formTree);
         });
-    }, ...(ngDevMode ? [{ debugName: "_parentFormTreeEffect" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_parentFormTreeEffect" }] : /* istanbul ignore next */ []));
     /**
      * Track validity changes from the DynamicForm and update the context.
      *
@@ -1208,7 +1227,8 @@ class DbxForgeFormComponent {
             this._context.updateIsValid(isValid);
             this._emitFormState();
         });
-    }, ...(ngDevMode ? [{ debugName: "_validityEffect" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_validityEffect" }] : /* istanbul ignore next */ []));
     _emitFormState() {
         const isValid = this.formValidSignal();
         const isReset = this._isReset();
@@ -1308,14 +1328,14 @@ class DbxForgeFormComponent {
         this.formValue.set(sanitized);
         this._emitFormState();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxForgeFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: DbxForgeFormComponent, isStandalone: true, selector: "dbx-forge", host: { properties: { "class.dbx-forge-form-disabled": "isDisabledSignal()" }, 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: "22.1.4", ngImport: i0, type: DbxForgeFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: DbxForgeFormComponent, isStandalone: true, selector: "dbx-forge", host: { properties: { "class.dbx-forge-form-disabled": "isDisabledSignal()" }, 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", "source"], outputs: ["valueChange", "validityChange", "dirtyChange", "submitted", "reset", "cleared", "events", "initialized", "onPageChange", "onPageNavigationStateChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, dependencies: [{ kind: "component", type: DynamicForm, selector: "form[dynamic-form]", inputs: ["dynamic-form", "formOptions", "value", "source"], outputs: ["valueChange", "validityChange", "dirtyChange", "submitted", "reset", "cleared", "events", "initialized", "activePageInitialized", "onPageChange", "onPageNavigationStateChange"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxForgeFormComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: DbxForgeFormComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'dbx-forge',
@@ -1329,9 +1349,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
                         '[class.dbx-forge-form-disabled]': 'isDisabledSignal()'
                     },
                     providers: [EventDispatcher, { provide: DbxForgeDynamicFormSignalRef, useExisting: DbxForgeFormComponent }, DbxForgeFormContextService, { provide: DbxForm, useExisting: DbxForgeFormContext }, { provide: DbxMutableForm, useExisting: DbxForgeFormContext }],
-                    imports: [DynamicForm],
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    standalone: true
+                    imports: [DynamicForm]
                 }]
         }], propDecorators: { dynamicForm: [{ type: i0.ViewChild, args: [i0.forwardRef(() => DynamicForm), { isSignal: true }] }] } });
 /**
@@ -1495,11 +1513,13 @@ class DbxFormSourceDirective {
     /**
      * The mode controlling when the source value is forwarded to the form.
      */
-    dbxFormSourceMode = input(...(ngDevMode ? [undefined, { debugName: "dbxFormSourceMode" }] : /* istanbul ignore next */ []));
+    dbxFormSourceMode = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "dbxFormSourceMode" }] : /* istanbul ignore next */ []));
     /**
      * The source value or observable to pipe into the form.
      */
-    dbxFormSource = input(...(ngDevMode ? [undefined, { debugName: "dbxFormSource" }] : /* istanbul ignore next */ []));
+    dbxFormSource = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "dbxFormSource" }] : /* istanbul ignore next */ []));
     _effectSub = cleanSubscription();
     _setFormSourceObservableEffect = effect(() => {
         const formSource = this.dbxFormSource();
@@ -1519,15 +1539,15 @@ class DbxFormSourceDirective {
             });
         }
         this._effectSub.setSub(subscription);
-    }, ...(ngDevMode ? [{ debugName: "_setFormSourceObservableEffect" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxFormSourceDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.11", 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 });
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_setFormSourceObservableEffect" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: DbxFormSourceDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.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 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxFormSourceDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: DbxFormSourceDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[dbxFormSource]',
-                    standalone: true
+                    selector: '[dbxFormSource]'
                 }]
         }], propDecorators: { dbxFormSourceMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "dbxFormSourceMode", required: false }] }], dbxFormSource: [{ type: i0.Input, args: [{ isSignal: true, alias: "dbxFormSource", required: false }] }] } });
 
@@ -1582,9 +1602,9 @@ class DbxForgeActionDialogComponent extends AbstractDialogDirective {
             data: config
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxForgeActionDialogComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.11", 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">
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: DbxForgeActionDialogComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.4", 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" dbxActionSnackbarError>
       <h3 class="dbx-dialog-content-header">{{ header }}</h3>
       <dbx-dialog-content-close (close)="close()"></dbx-dialog-content-close>
       <div>
@@ -1592,13 +1612,13 @@ class DbxForgeActionDialogComponent extends AbstractDialogDirective {
         <dbx-button dbxActionButton [buttonDisplay]="submitButtonConfig" [buttonStyle]="submitButtonConfig" [raised]="true"></dbx-button>
       </div>
     </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.DbxActionDirective, selector: "dbx-action,[dbxAction]", exportAs: ["action", "dbxAction"] }, { kind: "directive", type: i1.DbxActionHandlerDirective, selector: "[dbxActionHandler]", inputs: ["dbxActionHandler"] }, { kind: "directive", type: i1.DbxActionButtonDirective, selector: "[dbxActionButton]", inputs: ["dbxActionButtonEcho"] }, { kind: "ngmodule", type: DbxButtonModule }, { kind: "component", type: i1$1.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"] }] });
+  `, isInline: true, dependencies: [{ kind: "directive", type: DbxActionSnackbarErrorDirective, selector: "[dbxActionSnackbarError]", inputs: ["dbxActionSnackbarError"] }, { kind: "directive", type: DbxDialogContentDirective, selector: "dbx-dialog-content,[dbxDialogContent],.dbx-dialog-content", inputs: ["width"] }, { kind: "ngmodule", type: DbxActionModule }, { kind: "directive", type: i1.DbxActionDirective, selector: "dbx-action,[dbxAction]", exportAs: ["action", "dbxAction"] }, { kind: "directive", type: i1.DbxActionHandlerDirective, selector: "[dbxActionHandler]", inputs: ["dbxActionHandler"] }, { kind: "directive", type: i1.DbxActionButtonDirective, selector: "[dbxActionButton]", inputs: ["dbxActionButtonEcho"] }, { kind: "ngmodule", type: DbxButtonModule }, { kind: "component", type: i1$1.DbxButtonComponent, selector: "dbx-button", inputs: ["bar", "type", "buttonStyle", "color", "spinnerColor", "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.11", ngImport: i0, type: DbxForgeActionDialogComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: DbxForgeActionDialogComponent, decorators: [{
             type: Component,
             args: [{
                     template: `
-    <dbx-dialog-content dbxAction [dbxActionHandler]="handleSubmitValue" class="dbx-dialog-content-with-header">
+    <dbx-dialog-content dbxAction [dbxActionHandler]="handleSubmitValue" class="dbx-dialog-content-with-header" dbxActionSnackbarError>
       <h3 class="dbx-dialog-content-header">{{ header }}</h3>
       <dbx-dialog-content-close (close)="close()"></dbx-dialog-content-close>
       <div>
@@ -1607,9 +1627,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
       </div>
     </dbx-dialog-content>
   `,
-                    standalone: true,
                     providers: [provideDbxForgeFormContext()],
-                    imports: [DbxDialogContentDirective, DbxActionModule, DbxButtonModule, DbxDialogContentCloseComponent, DbxForgeFormComponent, DbxFormSourceDirective, DbxActionFormDirective]
+                    imports: [DbxActionSnackbarErrorDirective, DbxDialogContentDirective, DbxActionModule, DbxButtonModule, DbxDialogContentCloseComponent, DbxForgeFormComponent, DbxFormSourceDirective, DbxActionFormDirective]
                 }]
         }] });
 
@@ -1636,14 +1655,13 @@ class DbxFormLoggerDirective {
             console.log('dbxFormLogger - stream: ', { currentValue, event });
         }));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxFormLoggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.11", type: DbxFormLoggerDirective, isStandalone: true, selector: "[dbxFormLogger],[dbxFormStreamLogger]", ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: DbxFormLoggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.4", type: DbxFormLoggerDirective, isStandalone: true, selector: "[dbxFormLogger],[dbxFormStreamLogger]", ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxFormLoggerDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: DbxFormLoggerDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[dbxFormLogger],[dbxFormStreamLogger]',
-                    standalone: true
+                    selector: '[dbxFormLogger],[dbxFormStreamLogger]'
                 }]
         }], ctorParameters: () => [] });
 
@@ -1672,7 +1690,8 @@ class DbxFormLoadingSourceDirective {
     /**
      * The loading state source to observe. The form value is set once loading finishes with a non-null value.
      */
-    dbxFormLoadingSource = input(...(ngDevMode ? [undefined, { debugName: "dbxFormLoadingSource" }] : /* istanbul ignore next */ []));
+    dbxFormLoadingSource = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "dbxFormLoadingSource" }] : /* istanbul ignore next */ []));
     mode$ = toObservable(this.dbxFormLoadingSourceMode);
     source$ = toObservable(this.dbxFormLoadingSource).pipe(maybeValueFromObservableOrValue(), filterMaybe(), valueFromFinishedLoadingState());
     constructor() {
@@ -1680,14 +1699,13 @@ class DbxFormLoadingSourceDirective {
             this.form.setValue(x);
         }));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxFormLoadingSourceDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.11", 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: "22.1.4", ngImport: i0, type: DbxFormLoadingSourceDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.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 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxFormLoadingSourceDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: DbxFormLoadingSourceDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[dbxFormLoadingSource]',
-                    standalone: true
+                    selector: '[dbxFormLoadingSource]'
                 }]
         }], ctorParameters: () => [], propDecorators: { dbxFormLoadingSourceMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "dbxFormLoadingSourceMode", required: false }] }], dbxFormLoadingSource: [{ type: i0.Input, args: [{ isSignal: true, alias: "dbxFormLoadingSource", required: false }] }] } });
 
@@ -1726,14 +1744,13 @@ class DbxFormValueChangeDirective {
             }
         }));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxFormValueChangeDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.11", type: DbxFormValueChangeDirective, isStandalone: true, selector: "[dbxFormValueChange]", outputs: { dbxFormValueChange: "dbxFormValueChange" }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: DbxFormValueChangeDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.4", type: DbxFormValueChangeDirective, isStandalone: true, selector: "[dbxFormValueChange]", outputs: { dbxFormValueChange: "dbxFormValueChange" }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxFormValueChangeDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: DbxFormValueChangeDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[dbxFormValueChange]',
-                    standalone: true
+                    selector: '[dbxFormValueChange]'
                 }]
         }], propDecorators: { dbxFormValueChange: [{ type: i0.Output, args: ["dbxFormValueChange"] }] } });
 
@@ -2315,10 +2332,10 @@ function dbxForgeFieldFunctionConfigure(...fns) {
     return fn;
 }
 /**
- * Creates a {@link DbxForgeFieldFunctionConfigPropsBuilder} that automatically copies `hint` (or the deprecated `description`)
+ * Creates a {@link DbxForgeFieldFunctionConfigPropsBuilder} that automatically copies `hint`
  * from the top-level field config into `props.hint`.
  *
- * Historically hint/description lived at the base config level. In `@ng-forge/dynamic-forms` hints are
+ * Historically the hint lived at the base config level. In `@ng-forge/dynamic-forms` hints are
  * expected under `props`, so this builder bridges that gap.
  *
  * @param makeProps - Optional delegate that produces additional props; its result is merged before the hint is applied.
@@ -2338,10 +2355,6 @@ function dbxForgeFieldFunctionConfigPropsWithHintBuilder(makeProps) {
         if ('hint' in input) {
             props.hint = input.hint;
         }
-        else if ('description' in input) {
-            // eslint-disable-next-line @typescript-eslint/no-deprecated -- intentionally accepts the deprecated `description` input as a fallback for `hint`
-            props.hint = input.description;
-        }
         return props;
     };
 }
@@ -2803,14 +2816,14 @@ function dbxForgeNameField(config = {}) {
  * ```
  */
 function dbxForgeEmailField(config = {}) {
-    const { key = 'email', label = 'Email Address', placeholder = 'you@example.com', required, readonly: isReadonly, description, autocomplete } = config;
+    const { key = 'email', label = 'Email Address', placeholder = 'you@example.com', required, readonly: isReadonly, hint, autocomplete } = config;
     return dbxForgeTextField({
         key,
         label,
         placeholder,
         required,
         readonly: isReadonly,
-        description,
+        hint,
         autocomplete,
         inputType: 'email'
     });
@@ -3037,8 +3050,7 @@ function isFlexFieldConfig(input) {
  * dbxForgeFlexLayout({ breakpoint: 'large', breakToColumn: true, relative: true, size: 1, fields: [...] })
  * ```
  */
-function dbxForgeFlexLayout(input, legacyConfig) {
-    const config = Array.isArray(input) ? { ...legacyConfig, fields: input } : input;
+function dbxForgeFlexLayout(config) {
     const { breakpoint, relative, breakToColumn, size: defaultSize = 2, fields = [] } = config;
     const mappedFields = fields.map((entry) => {
         const { field, size = defaultSize } = isFlexFieldConfig(entry) ? entry : { field: entry };
@@ -3825,15 +3837,6 @@ const dbxForgeCheckboxField = dbxForgeFieldFunction({
         }
     })
 });
-// COMPAT: Deprecated aliases
-/**
- * CSS class applied to forge fields when `styledBox` is enabled.
- *
- * @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';
 
 var DbxDateTimeFieldTimeMode;
 (function (DbxDateTimeFieldTimeMode) {
@@ -4598,14 +4601,11 @@ class DbxDateTimeFieldMenuPresetsService {
     set configurations(configurations) {
         this._configurations.next(configurations);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxDateTimeFieldMenuPresetsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxDateTimeFieldMenuPresetsService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: DbxDateTimeFieldMenuPresetsService, deps: [], target: i0.ɵɵFactoryTarget.Service });
+    static ɵprov = i0.ɵɵngDeclareService({ minVersion: "22.0.0", version: "22.1.4", ngImport: i0, type: DbxDateTimeFieldMenuPresetsService });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxDateTimeFieldMenuPresetsService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: DbxDateTimeFieldMenuPresetsService, decorators: [{
+            type: Service
         }] });
 
 // MARK: Time Output Constants
@@ -4626,29 +4626,46 @@ class DbxForgeDateTimeFieldComponent {
     presetsService = inject(DbxDateTimeFieldMenuPresetsService, { optional: true });
     fieldSignalContext = inject(FIELD_SIGNAL_CONTEXT);
     // MARK: ng-forge ValueFieldComponent inputs
-    field = input.required(...(ngDevMode ? [{ debugName: "field" }] : /* istanbul ignore next */ []));
-    key = input.required(...(ngDevMode ? [{ debugName: "key" }] : /* istanbul ignore next */ []));
-    label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : /* istanbul ignore next */ []));
-    placeholder = input(...(ngDevMode ? [undefined, { debugName: "placeholder" }] : /* istanbul ignore next */ []));
-    className = input('', ...(ngDevMode ? [{ debugName: "className" }] : /* istanbul ignore next */ []));
-    tabIndex = input(...(ngDevMode ? [undefined, { debugName: "tabIndex" }] : /* istanbul ignore next */ []));
-    props = input(...(ngDevMode ? [undefined, { debugName: "props" }] : /* istanbul ignore next */ []));
-    meta = input(...(ngDevMode ? [undefined, { debugName: "meta" }] : /* istanbul ignore next */ []));
-    validationMessages = input(...(ngDevMode ? [undefined, { debugName: "validationMessages" }] : /* istanbul ignore next */ []));
-    defaultValidationMessages = input(...(ngDevMode ? [undefined, { debugName: "defaultValidationMessages" }] : /* istanbul ignore next */ []));
+    field = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "field" }] : /* istanbul ignore next */ []));
+    key = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "key" }] : /* istanbul ignore next */ []));
+    label = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "label" }] : /* istanbul ignore next */ []));
+    placeholder = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    className = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "className" }] : /* istanbul ignore next */ []));
+    tabIndex = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "tabIndex" }] : /* istanbul ignore next */ []));
+    props = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "props" }] : /* istanbul ignore next */ []));
+    meta = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "meta" }] : /* istanbul ignore next */ []));
+    validationMessages = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "validationMessages" }] : /* istanbul ignore next */ []));
+    defaultValidationMessages = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "defaultValidationMessages" }] : /* istanbul ignore next */ []));
     // MARK: Form controls
     dateCtrl = new FormControl(null);
     timeCtrl = new FormControl(null, {
         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 */ []));
-    _timezone = signal(undefined, ...(ngDevMode ? [{ debugName: "_timezone" }] : /* istanbul ignore next */ []));
-    _pickerConfig = signal(undefined, ...(ngDevMode ? [{ debugName: "_pickerConfig" }] : /* istanbul ignore next */ []));
-    _timeDate = signal(undefined, ...(ngDevMode ? [{ debugName: "_timeDate" }] : /* istanbul ignore next */ []));
-    _presetConfigs = signal([], ...(ngDevMode ? [{ debugName: "_presetConfigs" }] : /* istanbul ignore next */ []));
-    _isCleared = signal(false, ...(ngDevMode ? [{ debugName: "_isCleared" }] : /* istanbul ignore next */ []));
-    _isTimeInputFocused = signal(false, ...(ngDevMode ? [{ debugName: "_isTimeInputFocused" }] : /* istanbul ignore next */ []));
+    _fullDay = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_fullDay" }] : /* istanbul ignore next */ []));
+    _timezone = signal(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_timezone" }] : /* istanbul ignore next */ []));
+    _pickerConfig = signal(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_pickerConfig" }] : /* istanbul ignore next */ []));
+    _timeDate = signal(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_timeDate" }] : /* istanbul ignore next */ []));
+    _presetConfigs = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_presetConfigs" }] : /* istanbul ignore next */ []));
+    _isCleared = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_isCleared" }] : /* istanbul ignore next */ []));
+    _isTimeInputFocused = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_isTimeInputFocused" }] : /* istanbul ignore next */ []));
     // MARK: Subscription management
     _sub = cleanSubscription();
     _valueSub = cleanSubscription();
@@ -4676,7 +4693,8 @@ class DbxForgeDateTimeFieldComponent {
     fieldLabelSignal = computed(() => {
         const l = this.label();
         return typeof l === 'string' && l ? l : undefined;
-    }, ...(ngDevMode ? [{ debugName: "fieldLabelSignal" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "fieldLabelSignal" }] : /* istanbul ignore next */ []));
     isRequiredSignal = computed(() => {
         let required = false;
         try {
@@ -4687,18 +4705,24 @@ class DbxForgeDateTimeFieldComponent {
             required = false;
         }
         return required;
-    }, ...(ngDevMode ? [{ debugName: "isRequiredSignal" }] : /* istanbul ignore next */ []));
-    isDateRequiredSignal = computed(() => this.isRequiredSignal(), ...(ngDevMode ? [{ debugName: "isDateRequiredSignal" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isRequiredSignal" }] : /* istanbul ignore next */ []));
+    isDateRequiredSignal = computed(() => this.isRequiredSignal(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isDateRequiredSignal" }] : /* istanbul ignore next */ []));
     isTimeRequiredSignal = computed(() => {
         const timeMode = this.timeModeSignal();
         return this.isRequiredSignal() && timeMode === DbxDateTimeFieldTimeMode.REQUIRED;
-    }, ...(ngDevMode ? [{ debugName: "isTimeRequiredSignal" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isTimeRequiredSignal" }] : /* istanbul ignore next */ []));
     descriptionSignal = computed(() => {
         const h = this.props()?.hint;
         return typeof h === 'string' ? h : undefined;
-    }, ...(ngDevMode ? [{ debugName: "descriptionSignal" }] : /* istanbul ignore next */ []));
-    appearanceSignal = computed(() => this.props()?.appearance ?? this.materialConfig?.appearance ?? 'outline', ...(ngDevMode ? [{ debugName: "appearanceSignal" }] : /* istanbul ignore next */ []));
-    valueModeSignal = computed(() => this.props()?.valueMode ?? DbxDateTimeValueMode.DATE, ...(ngDevMode ? [{ debugName: "valueModeSignal" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "descriptionSignal" }] : /* istanbul ignore next */ []));
+    appearanceSignal = computed(() => this.props()?.appearance ?? this.materialConfig?.appearance ?? 'outline', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "appearanceSignal" }] : /* istanbul ignore next */ []));
+    valueModeSignal = computed(() => this.props()?.valueMode ?? DbxDateTimeValueMode.DATE, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "valueModeSignal" }] : /* istanbul ignore next */ []));
     timeModeSignal = computed(() => {
         const p = this.props();
         if (this.valueModeSignal() === DbxDateTimeValueMode.DAY_STRING)
@@ -4708,43 +4732,64 @@ class DbxForgeDateTimeFieldComponent {
         if (p?.timeMode)
             return p.timeMode;
         return DbxDateTimeFieldTimeMode.REQUIRED;
-    }, ...(ngDevMode ? [{ debugName: "timeModeSignal" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "timeModeSignal" }] : /* istanbul ignore next */ []));
     isTimeOnlySignal = computed(() => {
         const props = this.props();
         return this.valueModeSignal() === DbxDateTimeValueMode.MINUTE_OF_DAY || props?.timeOnly === true;
-    }, ...(ngDevMode ? [{ debugName: "isTimeOnlySignal" }] : /* istanbul ignore next */ []));
-    isDateOnlySignal = computed(() => this.timeModeSignal() === DbxDateTimeFieldTimeMode.NONE, ...(ngDevMode ? [{ debugName: "isDateOnlySignal" }] : /* istanbul ignore next */ []));
-    isFullDaySignal = computed(() => this._fullDay(), ...(ngDevMode ? [{ debugName: "isFullDaySignal" }] : /* istanbul ignore next */ []));
-    showDateInputSignal = computed(() => !this.isTimeOnlySignal(), ...(ngDevMode ? [{ debugName: "showDateInputSignal" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isTimeOnlySignal" }] : /* istanbul ignore next */ []));
+    isDateOnlySignal = computed(() => this.timeModeSignal() === DbxDateTimeFieldTimeMode.NONE, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isDateOnlySignal" }] : /* istanbul ignore next */ []));
+    isFullDaySignal = computed(() => this._fullDay(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isFullDaySignal" }] : /* istanbul ignore next */ []));
+    showDateInputSignal = computed(() => !this.isTimeOnlySignal(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showDateInputSignal" }] : /* istanbul ignore next */ []));
     showTimeInputSignal = computed(() => {
         const timeMode = this.timeModeSignal();
         return !this._fullDay() && timeMode !== DbxDateTimeFieldTimeMode.NONE;
-    }, ...(ngDevMode ? [{ debugName: "showTimeInputSignal" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showTimeInputSignal" }] : /* istanbul ignore next */ []));
     showAddTimeButtonSignal = computed(() => {
         const timeMode = this.timeModeSignal();
         return !this.showTimeInputSignal() && timeMode === DbxDateTimeFieldTimeMode.OPTIONAL;
-    }, ...(ngDevMode ? [{ debugName: "showAddTimeButtonSignal" }] : /* istanbul ignore next */ []));
-    dateLabelSignal = computed(() => this.props()?.dateLabel ?? 'Date', ...(ngDevMode ? [{ debugName: "dateLabelSignal" }] : /* istanbul ignore next */ []));
-    timeLabelSignal = computed(() => this.props()?.timeLabel ?? 'Time', ...(ngDevMode ? [{ debugName: "timeLabelSignal" }] : /* istanbul ignore next */ []));
-    allDayLabelSignal = computed(() => this.props()?.allDayLabel ?? 'All Day', ...(ngDevMode ? [{ debugName: "allDayLabelSignal" }] : /* istanbul ignore next */ []));
-    atTimeLabelSignal = computed(() => this.props()?.atTimeLabel ?? 'At', ...(ngDevMode ? [{ debugName: "atTimeLabelSignal" }] : /* istanbul ignore next */ []));
-    hideDateHintSignal = computed(() => this.props()?.hideDateHint ?? false, ...(ngDevMode ? [{ debugName: "hideDateHintSignal" }] : /* istanbul ignore next */ []));
-    hideDatePickerSignal = computed(() => this.props()?.hideDatePicker ?? false, ...(ngDevMode ? [{ debugName: "hideDatePickerSignal" }] : /* istanbul ignore next */ []));
-    showTimezoneSignal = computed(() => this.props()?.showTimezone ?? true, ...(ngDevMode ? [{ debugName: "showTimezoneSignal" }] : /* istanbul ignore next */ []));
-    showClearButtonSignal = computed(() => this.props()?.showClearButton !== false, ...(ngDevMode ? [{ debugName: "showClearButtonSignal" }] : /* istanbul ignore next */ []));
-    minuteStepSignal = computed(() => this.props()?.minuteStep ?? 5, ...(ngDevMode ? [{ debugName: "minuteStepSignal" }] : /* istanbul ignore next */ []));
-    alwaysShowDateInputSignal = computed(() => this.props()?.alwaysShowDateInput ?? true, ...(ngDevMode ? [{ debugName: "alwaysShowDateInputSignal" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showAddTimeButtonSignal" }] : /* istanbul ignore next */ []));
+    dateLabelSignal = computed(() => this.props()?.dateLabel ?? 'Date', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dateLabelSignal" }] : /* istanbul ignore next */ []));
+    timeLabelSignal = computed(() => this.props()?.timeLabel ?? 'Time', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "timeLabelSignal" }] : /* istanbul ignore next */ []));
+    allDayLabelSignal = computed(() => this.props()?.allDayLabel ?? 'All Day', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "allDayLabelSignal" }] : /* istanbul ignore next */ []));
+    atTimeLabelSignal = computed(() => this.props()?.atTimeLabel ?? 'At', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "atTimeLabelSignal" }] : /* istanbul ignore next */ []));
+    hideDateHintSignal = computed(() => this.props()?.hideDateHint ?? false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hideDateHintSignal" }] : /* istanbul ignore next */ []));
+    hideDatePickerSignal = computed(() => this.props()?.hideDatePicker ?? false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hideDatePickerSignal" }] : /* istanbul ignore next */ []));
+    showTimezoneSignal = computed(() => this.props()?.showTimezone ?? true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showTimezoneSignal" }] : /* istanbul ignore next */ []));
+    showClearButtonSignal = computed(() => this.props()?.showClearButton !== false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showClearButtonSignal" }] : /* istanbul ignore next */ []));
+    minuteStepSignal = computed(() => this.props()?.minuteStep ?? 5, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "minuteStepSignal" }] : /* istanbul ignore next */ []));
+    alwaysShowDateInputSignal = computed(() => this.props()?.alwaysShowDateInput ?? true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "alwaysShowDateInputSignal" }] : /* istanbul ignore next */ []));
     autofillDateWhenTimeIsPickedSignal = computed(() => {
         const alwaysShowDateInput = this.alwaysShowDateInputSignal();
         return this.props()?.autofillDateWhenTimeIsPicked ?? alwaysShowDateInput === false;
-    }, ...(ngDevMode ? [{ debugName: "autofillDateWhenTimeIsPickedSignal" }] : /* istanbul ignore next */ []));
-    openOnInputClickSignal = computed(() => this.props()?.openOnInputClick ?? 'picker', ...(ngDevMode ? [{ debugName: "openOnInputClickSignal" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "autofillDateWhenTimeIsPickedSignal" }] : /* istanbul ignore next */ []));
+    openOnInputClickSignal = computed(() => this.props()?.openOnInputClick ?? 'picker', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "openOnInputClickSignal" }] : /* istanbul ignore next */ []));
     // MARK: Timezone signals
-    resolvedTimezoneSignal = computed(() => this._timezone() ?? guessCurrentTimezone(), ...(ngDevMode ? [{ debugName: "resolvedTimezoneSignal" }] : /* istanbul ignore next */ []));
+    resolvedTimezoneSignal = computed(() => this._timezone() ?? guessCurrentTimezone(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedTimezoneSignal" }] : /* istanbul ignore next */ []));
     timezoneInstanceSignal = computed(() => {
         const tz = this.resolvedTimezoneSignal();
         return tz ? dateTimezoneUtcNormal({ timezone: tz }) : undefined;
-    }, ...(ngDevMode ? [{ debugName: "timezoneInstanceSignal" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "timezoneInstanceSignal" }] : /* istanbul ignore next */ []));
     // MARK: Field value reading
     // FieldTree<unknown> is callable — calling it returns FieldState which has .value, .disabled, etc.
     // We call field()() to first unwrap the InputSignal (→ FieldTree), then call the FieldTree (→ FieldState).
@@ -4758,7 +4803,8 @@ class DbxForgeDateTimeFieldComponent {
             // Field tree not yet initialized — fall through to undefined
         }
         return result;
-    }, ...(ngDevMode ? [{ debugName: "fieldValueSignal" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "fieldValueSignal" }] : /* istanbul ignore next */ []));
     isDisabled = dbxForgeFieldDisabled();
     // MARK: Observable pipelines
     // Parse field value to system timezone Date
@@ -4925,7 +4971,8 @@ class DbxForgeDateTimeFieldComponent {
             }
         }
         return result;
-    }, ...(ngDevMode ? [{ debugName: "dateValueSignal" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dateValueSignal" }] : /* istanbul ignore next */ []));
     displayValueSignal = toSignal(this.displayValue$);
     pickerFilterSignal = toSignal(this.pickerFilter$, { initialValue: () => true });
     dateInputMinSignal = toSignal(this.dateInputMin$, { initialValue: null });
@@ -4944,12 +4991,17 @@ class DbxForgeDateTimeFieldComponent {
         const isOptional = this.timeModeSignal() === DbxDateTimeFieldTimeMode.OPTIONAL;
         const hasPresets = Boolean(this.presetsSignal()?.length);
         return disabled || (!isOptional && !hasPresets);
-    }, ...(ngDevMode ? [{ debugName: "isTimeMenuDisabledSignal" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isTimeMenuDisabledSignal" }] : /* istanbul ignore next */ []));
     // ARIA
-    hintIdSignal = computed(() => `${this.key()}-hint`, ...(ngDevMode ? [{ debugName: "hintIdSignal" }] : /* istanbul ignore next */ []));
-    errorIdSignal = computed(() => `${this.key()}-error`, ...(ngDevMode ? [{ debugName: "errorIdSignal" }] : /* istanbul ignore next */ []));
-    ariaInvalidSignal = computed(() => (this.hasErrorSignal() ? 'true' : null), ...(ngDevMode ? [{ debugName: "ariaInvalidSignal" }] : /* istanbul ignore next */ []));
-    ariaRequiredSignal = computed(() => (this.field()().required() ? 'true' : null), ...(ngDevMode ? [{ debugName: "ariaRequiredSignal" }] : /* istanbul ignore next */ []));
+    hintIdSignal = computed(() => `${this.key()}-hint`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hintIdSignal" }] : /* istanbul ignore next */ []));
+    errorIdSignal = computed(() => `${this.key()}-error`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "errorIdSignal" }] : /* istanbul ignore next */ []));
+    ariaInvalidSignal = computed(() => (this.hasErrorSignal() ? 'true' : null), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaInvalidSignal" }] : /* istanbul ignore next */ []));
+    ariaRequiredSignal = computed(() => (this.field()().required() ? 'true' : null), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaRequiredSignal" }] : /* istanbul ignore next */ []));
     ariaDescribedBySignal = computed(() => {
         const errorId = this.errorIdSignal();
         const props = this.props();
@@ -4962,7 +5014,8 @@ class DbxForgeDateTimeFieldComponent {
             result = hintId;
         }
         return result;
-    }, ...(ngDevMode ? [{ debugName: "ariaDescribedBySignal" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaDescribedBySignal" }] : /* istanbul ignore next */ []));
     constructor() {
         setupMetaTracking(this.elementRef, this.meta, { selector: 'input' });
         // Initialize fullDay from timeMode
@@ -5279,14 +5332,14 @@ class DbxForgeDateTimeFieldComponent {
             // Silently handle if sibling field is not writable
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxForgeDateTimeFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", 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 (fieldLabelSignal()) {\n    <span class=\"dbx-forge-field-label\">\n      {{ fieldLabelSignal() }}\n      @if (isRequiredSignal()) {\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 (resolvedShowDateInputSignal()) {\n      <div class=\"dbx-forge-datetime-col\" [class.dbx-forge-datetime-col-full]=\"isDateOnlySignal()\">\n        <mat-form-field [appearance]=\"appearanceSignal()\" subscriptSizing=\"dynamic\" class=\"dbx-forge-datetime-col-field\">\n          <mat-label>{{ dateLabelSignal() }}</mat-label>\n          <input matInput [disabled]=\"isDisabledSignal()\" [required]=\"isDateRequiredSignal()\" [min]=\"dateInputMinSignal()\" [max]=\"dateInputMaxSignal()\" [matDatepicker]=\"picker\" [matDatepickerFilter]=\"pickerFilterSignal()\" (dateChange)=\"onDatePicked($event)\" [value]=\"dateValueSignal()\" (click)=\"onDateInputClick(picker)\" (keydown)=\"onDateKeydown($event)\" [attr.aria-invalid]=\"ariaInvalidSignal()\" [attr.aria-required]=\"ariaRequiredSignal()\" [attr.aria-describedby]=\"ariaDescribedBySignal()\" />\n          @if (!hideDatePickerSignal()) {\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 (resolvedShowClearButtonSignal()) {\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 (timeModeSignal() === '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]=\"appearanceSignal()\" subscriptSizing=\"dynamic\" class=\"dbx-forge-datetime-col-field\">\n            <mat-label>{{ timeLabelSignal() }}</mat-label>\n            <input matInput [errorStateMatcher]=\"timeErrorStateMatcher\" [required]=\"isTimeRequiredSignal()\" [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]=\"errorIdSignal()\">{{ currentErrorMessageSignal() }}</mat-error>\n    }\n  } @else if (!hideDateHintSignal()) {\n    <div class=\"dbx-forge-datetime-hint\" [id]=\"hintIdSignal()\">\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\">{{ allDayLabelSignal() }}</b>\n            {{ dv | date: 'fullDate' }} {{ tzAbbreviationSignal() }} ({{ dv | dateDistance }})\n          </small>\n        } @else {\n          <small>\n            <b class=\"dbx-ok\">{{ atTimeLabelSignal() }}</b>\n            {{ dv | date: 'medium' }} {{ tzAbbreviationSignal() }} ({{ dv | timeDistance }})\n          </small>\n        }\n      }\n    </div>\n  }\n\n  <!-- Description -->\n  @if (descriptionSignal()) {\n    <p class=\"dbx-hint dbx-forge-datetime-desc\">{{ descriptionSignal() }}</p>\n  }\n</div>\n\n<!-- Timezone Suffix Template -->\n<ng-template #tzSuffix>\n  @if (showTimezoneSignal()) {\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$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1$2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i1$2.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i1$2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2.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: i3.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i3.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4.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: i4.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$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i6.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: i6.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i6.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: i7.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$4.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$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$4.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: "22.1.4", ngImport: i0, type: DbxForgeDateTimeFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.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 } }, host: { properties: { "class": "className()" } }, ngImport: i0, template: "<div class=\"dbx-forge-datetime-field-wrapper\">\n  <!-- Field Label -->\n  @if (fieldLabelSignal()) {\n    <span class=\"dbx-forge-field-label\">\n      {{ fieldLabelSignal() }}\n      @if (isRequiredSignal()) {\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 (resolvedShowDateInputSignal()) {\n      <div class=\"dbx-forge-datetime-col\" [class.dbx-forge-datetime-col-full]=\"isDateOnlySignal()\">\n        <mat-form-field [appearance]=\"appearanceSignal()\" subscriptSizing=\"dynamic\" class=\"dbx-forge-datetime-col-field\">\n          <mat-label>{{ dateLabelSignal() }}</mat-label>\n          <input\n            matInput\n            [disabled]=\"isDisabledSignal()\"\n            [required]=\"isDateRequiredSignal()\"\n            [min]=\"dateInputMinSignal()\"\n            [max]=\"dateInputMaxSignal()\"\n            [matDatepicker]=\"picker\"\n            [matDatepickerFilter]=\"pickerFilterSignal()\"\n            (dateChange)=\"onDatePicked($event)\"\n            [value]=\"dateValueSignal()\"\n            (click)=\"onDateInputClick(picker)\"\n            (keydown)=\"onDateKeydown($event)\"\n            [attr.aria-invalid]=\"ariaInvalidSignal()\"\n            [attr.aria-required]=\"ariaRequiredSignal()\"\n            [attr.aria-describedby]=\"ariaDescribedBySignal()\" />\n          @if (!hideDatePickerSignal()) {\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 (resolvedShowClearButtonSignal()) {\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 (timeModeSignal() === '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]=\"appearanceSignal()\" subscriptSizing=\"dynamic\" class=\"dbx-forge-datetime-col-field\">\n            <mat-label>{{ timeLabelSignal() }}</mat-label>\n            <input matInput [errorStateMatcher]=\"timeErrorStateMatcher\" [required]=\"isTimeRequiredSignal()\" [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]=\"errorIdSignal()\">{{ currentErrorMessageSignal() }}</mat-error>\n    }\n  } @else if (!hideDateHintSignal()) {\n    <div class=\"dbx-forge-datetime-hint\" [id]=\"hintIdSignal()\">\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\">{{ allDayLabelSignal() }}</b>\n            {{ dv | date: 'fullDate' }} {{ tzAbbreviationSignal() }} ({{ dv | dateDistance }})\n          </small>\n        } @else {\n          <small>\n            <b class=\"dbx-ok\">{{ atTimeLabelSignal() }}</b>\n            {{ dv | date: 'medium' }} {{ tzAbbreviationSignal() }} ({{ dv | timeDistance }})\n          </small>\n        }\n      }\n    </div>\n  }\n\n  <!-- Description -->\n  @if (descriptionSignal()) {\n    <p class=\"dbx-hint dbx-forge-datetime-desc\">{{ descriptionSignal() }}</p>\n  }\n</div>\n\n<!-- Timezone Suffix Template -->\n<ng-template #tzSuffix>\n  @if (showTimezoneSignal()) {\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$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1$2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i1$2.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i1$2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2.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: i3.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i3.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4.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: i4.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$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i6.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: i6.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i6.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: i7.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$4.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$4.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" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxForgeDateTimeFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", 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, host: {
+            args: [{ selector: 'dbx-forge-datetime-field', imports: [MatFormFieldModule, MatInputModule, MatDatepickerModule, MatButtonModule, MatIconModule, MatMenuModule, MatDividerModule, ReactiveFormsModule, FormsModule, NgTemplateOutlet, DatePipe, DateDistancePipe, TimeDistancePipe, GetValuePipe], host: {
                         '[class]': 'className()'
-                    }, template: "<div class=\"dbx-forge-datetime-field-wrapper\">\n  <!-- Field Label -->\n  @if (fieldLabelSignal()) {\n    <span class=\"dbx-forge-field-label\">\n      {{ fieldLabelSignal() }}\n      @if (isRequiredSignal()) {\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 (resolvedShowDateInputSignal()) {\n      <div class=\"dbx-forge-datetime-col\" [class.dbx-forge-datetime-col-full]=\"isDateOnlySignal()\">\n        <mat-form-field [appearance]=\"appearanceSignal()\" subscriptSizing=\"dynamic\" class=\"dbx-forge-datetime-col-field\">\n          <mat-label>{{ dateLabelSignal() }}</mat-label>\n          <input matInput [disabled]=\"isDisabledSignal()\" [required]=\"isDateRequiredSignal()\" [min]=\"dateInputMinSignal()\" [max]=\"dateInputMaxSignal()\" [matDatepicker]=\"picker\" [matDatepickerFilter]=\"pickerFilterSignal()\" (dateChange)=\"onDatePicked($event)\" [value]=\"dateValueSignal()\" (click)=\"onDateInputClick(picker)\" (keydown)=\"onDateKeydown($event)\" [attr.aria-invalid]=\"ariaInvalidSignal()\" [attr.aria-required]=\"ariaRequiredSignal()\" [attr.aria-describedby]=\"ariaDescribedBySignal()\" />\n          @if (!hideDatePickerSignal()) {\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 (resolvedShowClearButtonSignal()) {\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 (timeModeSignal() === '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]=\"appearanceSignal()\" subscriptSizing=\"dynamic\" class=\"dbx-forge-datetime-col-field\">\n            <mat-label>{{ timeLabelSignal() }}</mat-label>\n            <input matInput [errorStateMatcher]=\"timeErrorStateMatcher\" [required]=\"isTimeRequiredSignal()\" [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]=\"errorIdSignal()\">{{ currentErrorMessageSignal() }}</mat-error>\n    }\n  } @else if (!hideDateHintSignal()) {\n    <div class=\"dbx-forge-datetime-hint\" [id]=\"hintIdSignal()\">\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\">{{ allDayLabelSignal() }}</b>\n            {{ dv | date: 'fullDate' }} {{ tzAbbreviationSignal() }} ({{ dv | dateDistance }})\n          </small>\n        } @else {\n          <small>\n            <b class=\"dbx-ok\">{{ atTimeLabelSignal() }}</b>\n            {{ dv | date: 'medium' }} {{ tzAbbreviationSignal() }} ({{ dv | timeDistance }})\n          </small>\n        }\n      }\n    </div>\n  }\n\n  <!-- Description -->\n  @if (descriptionSignal()) {\n    <p class=\"dbx-hint dbx-forge-datetime-desc\">{{ descriptionSignal() }}</p>\n  }\n</div>\n\n<!-- Timezone Suffix Template -->\n<ng-template #tzSuffix>\n  @if (showTimezoneSignal()) {\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"] }]
+                    }, template: "<div class=\"dbx-forge-datetime-field-wrapper\">\n  <!-- Field Label -->\n  @if (fieldLabelSignal()) {\n    <span class=\"dbx-forge-field-label\">\n      {{ fieldLabelSignal() }}\n      @if (isRequiredSignal()) {\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 (resolvedShowDateInputSignal()) {\n      <div class=\"dbx-forge-datetime-col\" [class.dbx-forge-datetime-col-full]=\"isDateOnlySignal()\">\n        <mat-form-field [appearance]=\"appearanceSignal()\" subscriptSizing=\"dynamic\" class=\"dbx-forge-datetime-col-field\">\n          <mat-label>{{ dateLabelSignal() }}</mat-label>\n          <input\n            matInput\n            [disabled]=\"isDisabledSignal()\"\n            [required]=\"isDateRequiredSignal()\"\n            [min]=\"dateInputMinSignal()\"\n            [max]=\"dateInputMaxSignal()\"\n            [matDatepicker]=\"picker\"\n            [matDatepickerFilter]=\"pickerFilterSignal()\"\n            (dateChange)=\"onDatePicked($event)\"\n            [value]=\"dateValueSignal()\"\n            (click)=\"onDateInputClick(picker)\"\n            (keydown)=\"onDateKeydown($event)\"\n            [attr.aria-invalid]=\"ariaInvalidSignal()\"\n            [attr.aria-required]=\"ariaRequiredSignal()\"\n            [attr.aria-describedby]=\"ariaDescribedBySignal()\" />\n          @if (!hideDatePickerSignal()) {\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 (resolvedShowClearButtonSignal()) {\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 (timeModeSignal() === '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]=\"appearanceSignal()\" subscriptSizing=\"dynamic\" class=\"dbx-forge-datetime-col-field\">\n            <mat-label>{{ timeLabelSignal() }}</mat-label>\n            <input matInput [errorStateMatcher]=\"timeErrorStateMatcher\" [required]=\"isTimeRequiredSignal()\" [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]=\"errorIdSignal()\">{{ currentErrorMessageSignal() }}</mat-error>\n    }\n  } @else if (!hideDateHintSignal()) {\n    <div class=\"dbx-forge-datetime-hint\" [id]=\"hintIdSignal()\">\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\">{{ allDayLabelSignal() }}</b>\n            {{ dv | date: 'fullDate' }} {{ tzAbbreviationSignal() }} ({{ dv | dateDistance }})\n          </small>\n        } @else {\n          <small>\n            <b class=\"dbx-ok\">{{ atTimeLabelSignal() }}</b>\n            {{ dv | date: 'medium' }} {{ tzAbbreviationSignal() }} ({{ dv | timeDistance }})\n          </small>\n        }\n      }\n    </div>\n  }\n\n  <!-- Description -->\n  @if (descriptionSignal()) {\n    <p class=\"dbx-hint dbx-forge-datetime-desc\">{{ descriptionSignal() }}</p>\n  }\n</div>\n\n<!-- Timezone Suffix Template -->\n<ng-template #tzSuffix>\n  @if (showTimezoneSignal()) {\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
 /**
@@ -5334,16 +5387,26 @@ class DbxForgeDateRangeFieldComponent {
     destroyRef = inject(DestroyRef);
     elementRef = inject((ElementRef));
     // Standard ng-forge value field inputs
-    field = input.required(...(ngDevMode ? [{ debugName: "field" }] : /* istanbul ignore next */ []));
-    key = input.required(...(ngDevMode ? [{ debugName: "key" }] : /* istanbul ignore next */ []));
-    label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : /* istanbul ignore next */ []));
-    placeholder = input(...(ngDevMode ? [undefined, { debugName: "placeholder" }] : /* istanbul ignore next */ []));
-    className = input('', ...(ngDevMode ? [{ debugName: "className" }] : /* istanbul ignore next */ []));
-    tabIndex = input(...(ngDevMode ? [undefined, { debugName: "tabIndex" }] : /* istanbul ignore next */ []));
-    props = input(...(ngDevMode ? [undefined, { debugName: "props" }] : /* istanbul ignore next */ []));
-    meta = input(...(ngDevMode ? [undefined, { debugName: "meta" }] : /* istanbul ignore next */ []));
-    validationMessages = input(...(ngDevMode ? [undefined, { debugName: "validationMessages" }] : /* istanbul ignore next */ []));
-    defaultValidationMessages = input(...(ngDevMode ? [undefined, { debugName: "defaultValidationMessages" }] : /* istanbul ignore next */ []));
+    field = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "field" }] : /* istanbul ignore next */ []));
+    key = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "key" }] : /* istanbul ignore next */ []));
+    label = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "label" }] : /* istanbul ignore next */ []));
+    placeholder = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    className = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "className" }] : /* istanbul ignore next */ []));
+    tabIndex = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "tabIndex" }] : /* istanbul ignore next */ []));
+    props = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "props" }] : /* istanbul ignore next */ []));
+    meta = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "meta" }] : /* istanbul ignore next */ []));
+    validationMessages = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "validationMessages" }] : /* istanbul ignore next */ []));
+    defaultValidationMessages = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "defaultValidationMessages" }] : /* istanbul ignore next */ []));
     /**
      * Internal FormControls for start and end dates and times.
      */
@@ -5352,27 +5415,38 @@ class DbxForgeDateRangeFieldComponent {
     endDateCtrl = new FormControl(null);
     endTimeCtrl = new FormControl('');
     // Computed props
-    startLabelSignal = computed(() => this.props()?.startLabel ?? 'Start', ...(ngDevMode ? [{ debugName: "startLabelSignal" }] : /* istanbul ignore next */ []));
-    endLabelSignal = computed(() => this.props()?.endLabel ?? 'End', ...(ngDevMode ? [{ debugName: "endLabelSignal" }] : /* istanbul ignore next */ []));
-    showTimeSignal = computed(() => this.props()?.showTime ?? false, ...(ngDevMode ? [{ debugName: "showTimeSignal" }] : /* istanbul ignore next */ []));
-    effectiveAppearanceSignal = computed(() => this.props()?.appearance ?? this.materialConfig?.appearance ?? 'outline', ...(ngDevMode ? [{ debugName: "effectiveAppearanceSignal" }] : /* istanbul ignore next */ []));
+    startLabelSignal = computed(() => this.props()?.startLabel ?? 'Start', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "startLabelSignal" }] : /* istanbul ignore next */ []));
+    endLabelSignal = computed(() => this.props()?.endLabel ?? 'End', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "endLabelSignal" }] : /* istanbul ignore next */ []));
+    showTimeSignal = computed(() => this.props()?.showTime ?? false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showTimeSignal" }] : /* istanbul ignore next */ []));
+    effectiveAppearanceSignal = computed(() => this.props()?.appearance ?? this.materialConfig?.appearance ?? 'outline', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "effectiveAppearanceSignal" }] : /* istanbul ignore next */ []));
     minDateSignal = computed(() => {
         const minDate = this.props()?.minDate;
         return minDate ? safeToJsDate(minDate) : null;
-    }, ...(ngDevMode ? [{ debugName: "minDateSignal" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "minDateSignal" }] : /* istanbul ignore next */ []));
     maxDateSignal = computed(() => {
         const maxDate = this.props()?.maxDate;
         return maxDate ? safeToJsDate(maxDate) : null;
-    }, ...(ngDevMode ? [{ debugName: "maxDateSignal" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "maxDateSignal" }] : /* istanbul ignore next */ []));
     // Error handling
     resolvedErrors = createResolvedErrorsSignal(this.field, this.validationMessages, this.defaultValidationMessages);
     showErrors = shouldShowErrors(this.field);
-    errorsToDisplaySignal = computed(() => (this.showErrors() ? this.resolvedErrors() : []), ...(ngDevMode ? [{ debugName: "errorsToDisplaySignal" }] : /* istanbul ignore next */ []));
+    errorsToDisplaySignal = computed(() => (this.showErrors() ? this.resolvedErrors() : []), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "errorsToDisplaySignal" }] : /* istanbul ignore next */ []));
     // ARIA
-    hintIdSignal = computed(() => `${this.key()}-hint`, ...(ngDevMode ? [{ debugName: "hintIdSignal" }] : /* istanbul ignore next */ []));
-    errorIdSignal = computed(() => `${this.key()}-error`, ...(ngDevMode ? [{ debugName: "errorIdSignal" }] : /* istanbul ignore next */ []));
-    ariaInvalidSignal = computed(() => (this.showErrors() ? 'true' : null), ...(ngDevMode ? [{ debugName: "ariaInvalidSignal" }] : /* istanbul ignore next */ []));
-    ariaRequiredSignal = computed(() => (this.field()().required() ? 'true' : null), ...(ngDevMode ? [{ debugName: "ariaRequiredSignal" }] : /* istanbul ignore next */ []));
+    hintIdSignal = computed(() => `${this.key()}-hint`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hintIdSignal" }] : /* istanbul ignore next */ []));
+    errorIdSignal = computed(() => `${this.key()}-error`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "errorIdSignal" }] : /* istanbul ignore next */ []));
+    ariaInvalidSignal = computed(() => (this.showErrors() ? 'true' : null), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaInvalidSignal" }] : /* istanbul ignore next */ []));
+    ariaRequiredSignal = computed(() => (this.field()().required() ? 'true' : null), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaRequiredSignal" }] : /* istanbul ignore next */ []));
     ariaDescribedBySignal = computed(() => {
         const errorId = this.errorIdSignal();
         const hintId = this.hintIdSignal();
@@ -5381,7 +5455,8 @@ class DbxForgeDateRangeFieldComponent {
         if (this.props()?.hint)
             return hintId;
         return null;
-    }, ...(ngDevMode ? [{ debugName: "ariaDescribedBySignal" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaDescribedBySignal" }] : /* istanbul ignore next */ []));
     /**
      * Flag to prevent feedback loops during sync.
      */
@@ -5483,12 +5558,12 @@ class DbxForgeDateRangeFieldComponent {
         }
         return result;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxForgeDateRangeFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", 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]=\"effectiveAppearanceSignal()\" 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]=\"ariaInvalidSignal()\" [attr.aria-required]=\"ariaRequiredSignal()\" [attr.aria-describedby]=\"ariaDescribedBySignal()\" />\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]=\"effectiveAppearanceSignal()\" 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]=\"effectiveAppearanceSignal()\" 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]=\"effectiveAppearanceSignal()\" 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 (errorsToDisplaySignal()[0]; as error) {\n    <mat-error [id]=\"errorIdSignal()\">{{ error.message }}</mat-error>\n  } @else if (props()?.hint; as hint) {\n    <mat-hint [id]=\"hintIdSignal()\">{{ 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$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1$2.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i1$2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i1$2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2.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: i3.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i3.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i3.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$4.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$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.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: "22.1.4", ngImport: i0, type: DbxForgeDateRangeFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.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]=\"effectiveAppearanceSignal()\" 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]=\"ariaInvalidSignal()\" [attr.aria-required]=\"ariaRequiredSignal()\" [attr.aria-describedby]=\"ariaDescribedBySignal()\" />\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]=\"effectiveAppearanceSignal()\" 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]=\"effectiveAppearanceSignal()\" 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]=\"effectiveAppearanceSignal()\" 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 (errorsToDisplaySignal()[0]; as error) {\n    <mat-error [id]=\"errorIdSignal()\">{{ error.message }}</mat-error>\n  } @else if (props()?.hint; as hint) {\n    <mat-hint [id]=\"hintIdSignal()\">{{ 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$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1$2.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i1$2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i1$2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2.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: i3.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i3.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i3.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$4.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: DynamicTextPipe, name: "dynamicText" }, { kind: "pipe", type: AsyncPipe, name: "async" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxForgeDateRangeFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", 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]=\"effectiveAppearanceSignal()\" 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]=\"ariaInvalidSignal()\" [attr.aria-required]=\"ariaRequiredSignal()\" [attr.aria-describedby]=\"ariaDescribedBySignal()\" />\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]=\"effectiveAppearanceSignal()\" 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]=\"effectiveAppearanceSignal()\" 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]=\"effectiveAppearanceSignal()\" 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 (errorsToDisplaySignal()[0]; as error) {\n    <mat-error [id]=\"errorIdSignal()\">{{ error.message }}</mat-error>\n  } @else if (props()?.hint; as hint) {\n    <mat-hint [id]=\"hintIdSignal()\">{{ 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"] }]
+            args: [{ selector: 'dbx-forge-daterange-field', imports: [MatFormFieldModule, MatInputModule, MatDatepickerModule, MatButtonModule, MatIconModule, ReactiveFormsModule, DynamicTextPipe, AsyncPipe], template: "<div class=\"dbx-forge-daterange-field\">\n  <mat-form-field [appearance]=\"effectiveAppearanceSignal()\" 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]=\"ariaInvalidSignal()\" [attr.aria-required]=\"ariaRequiredSignal()\" [attr.aria-describedby]=\"ariaDescribedBySignal()\" />\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]=\"effectiveAppearanceSignal()\" 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]=\"effectiveAppearanceSignal()\" 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]=\"effectiveAppearanceSignal()\" 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 (errorsToDisplaySignal()[0]; as error) {\n    <mat-error [id]=\"errorIdSignal()\">{{ error.message }}</mat-error>\n  } @else if (props()?.hint; as hint) {\n    <mat-hint [id]=\"hintIdSignal()\">{{ 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 }] }] } });
 // MARK: Mapper
 /**
@@ -5566,23 +5641,36 @@ class DbxForgeFixedDateRangeFieldComponent {
     destroyRef = inject(DestroyRef);
     elementRef = inject((ElementRef));
     // MARK: ng-forge ValueFieldComponent inputs
-    field = input.required(...(ngDevMode ? [{ debugName: "field" }] : /* istanbul ignore next */ []));
-    key = input.required(...(ngDevMode ? [{ debugName: "key" }] : /* istanbul ignore next */ []));
-    label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : /* istanbul ignore next */ []));
-    placeholder = input(...(ngDevMode ? [undefined, { debugName: "placeholder" }] : /* istanbul ignore next */ []));
-    className = input('', ...(ngDevMode ? [{ debugName: "className" }] : /* istanbul ignore next */ []));
-    tabIndex = input(...(ngDevMode ? [undefined, { debugName: "tabIndex" }] : /* istanbul ignore next */ []));
-    props = input(...(ngDevMode ? [undefined, { debugName: "props" }] : /* istanbul ignore next */ []));
-    meta = input(...(ngDevMode ? [undefined, { debugName: "meta" }] : /* istanbul ignore next */ []));
-    validationMessages = input(...(ngDevMode ? [undefined, { debugName: "validationMessages" }] : /* istanbul ignore next */ []));
-    defaultValidationMessages = input(...(ngDevMode ? [undefined, { debugName: "defaultValidationMessages" }] : /* istanbul ignore next */ []));
+    field = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "field" }] : /* istanbul ignore next */ []));
+    key = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "key" }] : /* istanbul ignore next */ []));
+    label = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "label" }] : /* istanbul ignore next */ []));
+    placeholder = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    className = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "className" }] : /* istanbul ignore next */ []));
+    tabIndex = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "tabIndex" }] : /* istanbul ignore next */ []));
+    props = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "props" }] : /* istanbul ignore next */ []));
+    meta = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "meta" }] : /* istanbul ignore next */ []));
+    validationMessages = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "validationMessages" }] : /* istanbul ignore next */ []));
+    defaultValidationMessages = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "defaultValidationMessages" }] : /* istanbul ignore next */ []));
     // MARK: View children
-    calendar = viewChild.required(MatCalendar);
+    calendar = viewChild.required(MatCalendar, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "calendar" }] : /* istanbul ignore next */ []));
     startDateInputElement = viewChild('startDateInput', { ...(ngDevMode ? { debugName: "startDateInputElement" } : /* istanbul ignore next */ {}), read: ElementRef });
     endDateInputElement = viewChild('endDateInput', { ...(ngDevMode ? { debugName: "endDateInputElement" } : /* istanbul ignore next */ {}), read: ElementRef });
     // MARK: Internal signals
-    currentDateRangeInputSignal = signal(undefined, ...(ngDevMode ? [{ debugName: "currentDateRangeInputSignal" }] : /* istanbul ignore next */ []));
-    currentSelectionModeSignal = signal('single', ...(ngDevMode ? [{ debugName: "currentSelectionModeSignal" }] : /* istanbul ignore next */ []));
+    currentDateRangeInputSignal = signal(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "currentDateRangeInputSignal" }] : /* istanbul ignore next */ []));
+    currentSelectionModeSignal = signal('single', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "currentSelectionModeSignal" }] : /* istanbul ignore next */ []));
     // MARK: Subscription management
     _sub = cleanSubscription();
     _inputRangeFormSub = cleanSubscription();
@@ -5615,20 +5703,29 @@ class DbxForgeFixedDateRangeFieldComponent {
             // Field tree not yet initialized — fall through to false
         }
         return result;
-    }, ...(ngDevMode ? [{ debugName: "isRequiredSignal" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isRequiredSignal" }] : /* istanbul ignore next */ []));
     isDisabled = dbxForgeFieldDisabled();
-    valueModeSignal = computed(() => this.props()?.valueMode ?? DbxDateTimeValueMode.DATE, ...(ngDevMode ? [{ debugName: "valueModeSignal" }] : /* istanbul ignore next */ []));
-    showRangeInputSignal = computed(() => this.props()?.showRangeInput ?? true, ...(ngDevMode ? [{ debugName: "showRangeInputSignal" }] : /* istanbul ignore next */ []));
-    showTimezoneSignal = computed(() => this.props()?.showTimezone ?? true, ...(ngDevMode ? [{ debugName: "showTimezoneSignal" }] : /* istanbul ignore next */ []));
+    valueModeSignal = computed(() => this.props()?.valueMode ?? DbxDateTimeValueMode.DATE, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "valueModeSignal" }] : /* istanbul ignore next */ []));
+    showRangeInputSignal = computed(() => this.props()?.showRangeInput ?? true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showRangeInputSignal" }] : /* istanbul ignore next */ []));
+    showTimezoneSignal = computed(() => this.props()?.showTimezone ?? true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showTimezoneSignal" }] : /* istanbul ignore next */ []));
     // Error handling
     resolvedErrors = createResolvedErrorsSignal(this.field, this.validationMessages, this.defaultValidationMessages);
     showErrors = shouldShowErrors(this.field);
-    errorsToDisplaySignal = computed(() => (this.showErrors() ? this.resolvedErrors() : []), ...(ngDevMode ? [{ debugName: "errorsToDisplaySignal" }] : /* istanbul ignore next */ []));
+    errorsToDisplaySignal = computed(() => (this.showErrors() ? this.resolvedErrors() : []), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "errorsToDisplaySignal" }] : /* istanbul ignore next */ []));
     // ARIA
-    hintIdSignal = computed(() => `${this.key()}-hint`, ...(ngDevMode ? [{ debugName: "hintIdSignal" }] : /* istanbul ignore next */ []));
-    errorIdSignal = computed(() => `${this.key()}-error`, ...(ngDevMode ? [{ debugName: "errorIdSignal" }] : /* istanbul ignore next */ []));
-    ariaInvalidSignal = computed(() => (this.showErrors() ? 'true' : null), ...(ngDevMode ? [{ debugName: "ariaInvalidSignal" }] : /* istanbul ignore next */ []));
-    ariaRequiredSignal = computed(() => (this.field()().required() ? 'true' : null), ...(ngDevMode ? [{ debugName: "ariaRequiredSignal" }] : /* istanbul ignore next */ []));
+    hintIdSignal = computed(() => `${this.key()}-hint`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hintIdSignal" }] : /* istanbul ignore next */ []));
+    errorIdSignal = computed(() => `${this.key()}-error`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "errorIdSignal" }] : /* istanbul ignore next */ []));
+    ariaInvalidSignal = computed(() => (this.showErrors() ? 'true' : null), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaInvalidSignal" }] : /* istanbul ignore next */ []));
+    ariaRequiredSignal = computed(() => (this.field()().required() ? 'true' : null), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaRequiredSignal" }] : /* istanbul ignore next */ []));
     ariaDescribedBySignal = computed(() => {
         const errorId = this.errorIdSignal();
         const props = this.props();
@@ -5641,7 +5738,8 @@ class DbxForgeFixedDateRangeFieldComponent {
             result = hintId;
         }
         return result;
-    }, ...(ngDevMode ? [{ debugName: "ariaDescribedBySignal" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaDescribedBySignal" }] : /* istanbul ignore next */ []));
     hasRequiredErrorSignal = computed(() => {
         let result = false;
         try {
@@ -5659,7 +5757,8 @@ class DbxForgeFixedDateRangeFieldComponent {
             // Field tree not yet initialized — fall through to false
         }
         return result;
-    }, ...(ngDevMode ? [{ debugName: "hasRequiredErrorSignal" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasRequiredErrorSignal" }] : /* istanbul ignore next */ []));
     // MARK: Field value reading
     fieldValueSignal = computed(() => {
         let result = undefined;
@@ -5671,7 +5770,8 @@ class DbxForgeFixedDateRangeFieldComponent {
             // Field tree not yet initialized — fall through to undefined
         }
         return result;
-    }, ...(ngDevMode ? [{ debugName: "fieldValueSignal" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "fieldValueSignal" }] : /* istanbul ignore next */ []));
     fieldValue$ = toObservable(this.fieldValueSignal);
     // MARK: Observable pipelines
     config$ = this._config.pipe(map((x) => x ?? of({})), switchMap((x) => x), distinctUntilChanged(), shareReplay(1));
@@ -5885,7 +5985,9 @@ class DbxForgeFixedDateRangeFieldComponent {
         // The old switchMap pattern re-subscribed to dateRangeSelection (which has shareReplay(1))
         // whenever the field value changed externally, causing the cached user selection to replay
         // and overwrite the external value.
-        this._sub.subscription = dateRangeSelection.pipe(skipAllInitialMaybe(), withLatestFrom(this.valueInSystemTimezone$, this.timezoneInstance$.pipe(map((timezoneInstance) => fixedDateRangeOutputValueFactory(this.valueModeSignal(), timezoneInstance)))), throttleTime(TIME_OUTPUT_THROTTLE_TIME, undefined, { leading: false, trailing: true })).subscribe(([rawValue, currentValue, valueFactory]) => {
+        this._sub.subscription = dateRangeSelection
+            .pipe(skipAllInitialMaybe(), withLatestFrom(this.valueInSystemTimezone$, this.timezoneInstance$.pipe(map((timezoneInstance) => fixedDateRangeOutputValueFactory(this.valueModeSignal(), timezoneInstance)))), throttleTime(TIME_OUTPUT_THROTTLE_TIME, undefined, { leading: false, trailing: true }))
+            .subscribe(([rawValue, currentValue, valueFactory]) => {
             const value = rawValue ? valueFactory(rawValue) : null;
             const isSameRange = dbxDateRangeIsSameDateRangeFieldValue(value, currentValue);
             if (!isSameRange) {
@@ -6019,17 +6121,17 @@ class DbxForgeFixedDateRangeFieldComponent {
             // Field may not be ready
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxForgeFixedDateRangeFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", 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: "22.1.4", ngImport: i0, type: DbxForgeFixedDateRangeFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.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: [
             {
                 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]=\"ariaInvalidSignal()\" [attr.aria-describedby]=\"ariaDescribedBySignal()\"></mat-calendar>\n  <mat-form-field class=\"dbx-fixeddaterange-field-input\" appearance=\"fill\">\n    @if (showRangeInputSignal()) {\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 (errorsToDisplaySignal()[0]; as error) {\n    <mat-error [id]=\"errorIdSignal()\">{{ error.message }}</mat-error>\n  } @else if (props()?.hint; as hint) {\n    <mat-hint [id]=\"hintIdSignal()\">{{ hint }}</mat-hint>\n  }\n</div>\n", dependencies: [{ kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i3.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: i3.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { kind: "directive", type: i3.MatStartDate, selector: "input[matStartDate]", outputs: ["dateChange", "dateInput"] }, { kind: "directive", type: i3.MatEndDate, selector: "input[matEndDate]", outputs: ["dateChange", "dateInput"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$2.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i1$2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$4.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$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$4.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 });
+        ], 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]=\"ariaInvalidSignal()\" [attr.aria-describedby]=\"ariaDescribedBySignal()\"></mat-calendar>\n  <mat-form-field class=\"dbx-fixeddaterange-field-input\" appearance=\"fill\">\n    @if (showRangeInputSignal()) {\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 (errorsToDisplaySignal()[0]; as error) {\n    <mat-error [id]=\"errorIdSignal()\">{{ error.message }}</mat-error>\n  } @else if (props()?.hint; as hint) {\n    <mat-hint [id]=\"hintIdSignal()\">{{ hint }}</mat-hint>\n  }\n</div>\n", dependencies: [{ kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i3.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: i3.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { kind: "directive", type: i3.MatStartDate, selector: "input[matStartDate]", outputs: ["dateChange", "dateInput"] }, { kind: "directive", type: i3.MatEndDate, selector: "input[matEndDate]", outputs: ["dateChange", "dateInput"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$2.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i1$2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$4.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxForgeFixedDateRangeFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", 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: [
+            args: [{ selector: 'dbx-forge-fixeddaterange-field', imports: [MatDatepickerModule, MatFormFieldModule, ReactiveFormsModule, MatInputModule, MatError, NgClass], providers: [
                         {
                             provide: MAT_DATE_RANGE_SELECTION_STRATEGY,
                             useClass: forwardRef(() => DbxForgeFixedDateRangeFieldSelectionStrategy)
@@ -6085,10 +6187,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.11", ngImport: i0, type: DbxForgeFixedDateRangeFieldSelectionStrategy, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxForgeFixedDateRangeFieldSelectionStrategy });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: DbxForgeFixedDateRangeFieldSelectionStrategy, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: DbxForgeFixedDateRangeFieldSelectionStrategy });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxForgeFixedDateRangeFieldSelectionStrategy, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: DbxForgeFixedDateRangeFieldSelectionStrategy, decorators: [{
             type: Injectable
         }] });
 // MARK: Mapper
@@ -6182,7 +6284,8 @@ const DEFAULT_DURATION_PICKER_POPOVER_KEY = 'durationpicker';
  * ```
  */
 class DbxDurationPickerPopoverComponent extends AbstractPopoverDirective {
-    durationData = signal(this.popover.data?.current ?? {}, ...(ngDevMode ? [{ debugName: "durationData" }] : /* istanbul ignore next */ []));
+    durationData = signal(this.popover.data?.current ?? {}, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "durationData" }] : /* istanbul ignore next */ []));
     units = [...(this.popover.data?.units ?? ['d', 'h', 'min', 's'])].reverse();
     _onChange = this.popover.data?.onChange;
     _minMs = this.popover.data?.minMs;
@@ -6410,12 +6513,12 @@ class DbxDurationPickerPopoverComponent extends AbstractPopoverDirective {
         }
         return false;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxDurationPickerPopoverComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", 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$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4.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: "22.1.4", ngImport: i0, type: DbxDurationPickerPopoverComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.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\n        mat-icon-button\n        type=\"button\"\n        (mousedown)=\"onHoldStart('increment', unit, $event)\"\n        (mouseup)=\"stopHold()\"\n        (mouseleave)=\"stopHold()\"\n        (keydown.arrowup)=\"onHoldStart('increment', unit, $event)\"\n        (keydown.arrowdown)=\"onHoldStart('decrement', unit, $event)\"\n        (keyup)=\"onKeyUp($event)\"\n        [disabled]=\"!canIncrement(unit)\"\n        aria-label=\"Increase\">\n        <mat-icon>add</mat-icon>\n      </button>\n      <span class=\"dbx-duration-picker-value\">{{ getValue(unit) }}</span>\n      <button\n        mat-icon-button\n        type=\"button\"\n        (mousedown)=\"onHoldStart('decrement', unit, $event)\"\n        (mouseup)=\"stopHold()\"\n        (mouseleave)=\"stopHold()\"\n        (keydown.arrowup)=\"onHoldStart('increment', unit, $event)\"\n        (keydown.arrowdown)=\"onHoldStart('decrement', unit, $event)\"\n        (keyup)=\"onKeyUp($event)\"\n        [disabled]=\"!canDecrement(unit)\"\n        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$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxDurationPickerPopoverComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", 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" }]
+            args: [{ imports: [MatIconModule, MatButtonModule], 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\n        mat-icon-button\n        type=\"button\"\n        (mousedown)=\"onHoldStart('increment', unit, $event)\"\n        (mouseup)=\"stopHold()\"\n        (mouseleave)=\"stopHold()\"\n        (keydown.arrowup)=\"onHoldStart('increment', unit, $event)\"\n        (keydown.arrowdown)=\"onHoldStart('decrement', unit, $event)\"\n        (keyup)=\"onKeyUp($event)\"\n        [disabled]=\"!canIncrement(unit)\"\n        aria-label=\"Increase\">\n        <mat-icon>add</mat-icon>\n      </button>\n      <span class=\"dbx-duration-picker-value\">{{ getValue(unit) }}</span>\n      <button\n        mat-icon-button\n        type=\"button\"\n        (mousedown)=\"onHoldStart('decrement', unit, $event)\"\n        (mouseup)=\"stopHold()\"\n        (mouseleave)=\"stopHold()\"\n        (keydown.arrowup)=\"onHoldStart('increment', unit, $event)\"\n        (keydown.arrowdown)=\"onHoldStart('decrement', unit, $event)\"\n        (keyup)=\"onKeyUp($event)\"\n        [disabled]=\"!canDecrement(unit)\"\n        aria-label=\"Decrease\">\n        <mat-icon>remove</mat-icon>\n      </button>\n    </div>\n  }\n</div>\n" }]
         }], ctorParameters: () => [] });
 
 /**
@@ -6433,16 +6536,26 @@ class DbxForgeTimeDurationFieldComponent {
     popoverService = inject(DbxPopoverService);
     elementRef = inject((ElementRef));
     // Standard ng-forge value field inputs
-    field = input.required(...(ngDevMode ? [{ debugName: "field" }] : /* istanbul ignore next */ []));
-    key = input.required(...(ngDevMode ? [{ debugName: "key" }] : /* istanbul ignore next */ []));
-    label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : /* istanbul ignore next */ []));
-    placeholder = input(...(ngDevMode ? [undefined, { debugName: "placeholder" }] : /* istanbul ignore next */ []));
-    className = input('', ...(ngDevMode ? [{ debugName: "className" }] : /* istanbul ignore next */ []));
-    tabIndex = input(...(ngDevMode ? [undefined, { debugName: "tabIndex" }] : /* istanbul ignore next */ []));
-    props = input(...(ngDevMode ? [undefined, { debugName: "props" }] : /* istanbul ignore next */ []));
-    meta = input(...(ngDevMode ? [undefined, { debugName: "meta" }] : /* istanbul ignore next */ []));
-    validationMessages = input(...(ngDevMode ? [undefined, { debugName: "validationMessages" }] : /* istanbul ignore next */ []));
-    defaultValidationMessages = input(...(ngDevMode ? [undefined, { debugName: "defaultValidationMessages" }] : /* istanbul ignore next */ []));
+    field = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "field" }] : /* istanbul ignore next */ []));
+    key = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "key" }] : /* istanbul ignore next */ []));
+    label = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "label" }] : /* istanbul ignore next */ []));
+    placeholder = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    className = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "className" }] : /* istanbul ignore next */ []));
+    tabIndex = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "tabIndex" }] : /* istanbul ignore next */ []));
+    props = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "props" }] : /* istanbul ignore next */ []));
+    meta = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "meta" }] : /* istanbul ignore next */ []));
+    validationMessages = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "validationMessages" }] : /* istanbul ignore next */ []));
+    defaultValidationMessages = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "defaultValidationMessages" }] : /* istanbul ignore next */ []));
     /**
      * Internal FormControl for the text input.
      */
@@ -6453,14 +6566,19 @@ class DbxForgeTimeDurationFieldComponent {
      */
     _currentDurationData = {};
     // Computed props
-    effectiveAppearanceSignal = computed(() => this.props()?.appearance ?? this.materialConfig?.appearance ?? 'outline', ...(ngDevMode ? [{ debugName: "effectiveAppearanceSignal" }] : /* istanbul ignore next */ []));
-    outputUnitSignal = computed(() => this.props()?.outputUnit ?? 'ms', ...(ngDevMode ? [{ debugName: "outputUnitSignal" }] : /* istanbul ignore next */ []));
-    valueModeSignal = computed(() => this.props()?.valueMode ?? 'number', ...(ngDevMode ? [{ debugName: "valueModeSignal" }] : /* istanbul ignore next */ []));
-    allowedUnitsSignal = computed(() => this.props()?.allowedUnits ?? ALL_TIME_UNITS, ...(ngDevMode ? [{ debugName: "allowedUnitsSignal" }] : /* istanbul ignore next */ []));
+    effectiveAppearanceSignal = computed(() => this.props()?.appearance ?? this.materialConfig?.appearance ?? 'outline', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "effectiveAppearanceSignal" }] : /* istanbul ignore next */ []));
+    outputUnitSignal = computed(() => this.props()?.outputUnit ?? 'ms', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "outputUnitSignal" }] : /* istanbul ignore next */ []));
+    valueModeSignal = computed(() => this.props()?.valueMode ?? 'number', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "valueModeSignal" }] : /* istanbul ignore next */ []));
+    allowedUnitsSignal = computed(() => this.props()?.allowedUnits ?? ALL_TIME_UNITS, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "allowedUnitsSignal" }] : /* istanbul ignore next */ []));
     pickerUnitsSignal = computed(() => {
         const allowedUnits = this.allowedUnitsSignal();
         return this.props()?.pickerUnits ?? allowedUnits.filter((u) => u !== 'ms');
-    }, ...(ngDevMode ? [{ debugName: "pickerUnitsSignal" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pickerUnitsSignal" }] : /* istanbul ignore next */ []));
     /**
      * Units used for decomposing/displaying duration text.
      */
@@ -6470,18 +6588,24 @@ class DbxForgeTimeDurationFieldComponent {
             units.push('ms');
         }
         return units;
-    }, ...(ngDevMode ? [{ debugName: "displayUnitsSignal" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "displayUnitsSignal" }] : /* istanbul ignore next */ []));
     // Disabled state
     isDisabled = dbxForgeFieldDisabled();
     // Error handling
     resolvedErrors = createResolvedErrorsSignal(this.field, this.validationMessages, this.defaultValidationMessages);
     showErrors = shouldShowErrors(this.field);
-    errorsToDisplaySignal = computed(() => (this.showErrors() ? this.resolvedErrors() : []), ...(ngDevMode ? [{ debugName: "errorsToDisplaySignal" }] : /* istanbul ignore next */ []));
+    errorsToDisplaySignal = computed(() => (this.showErrors() ? this.resolvedErrors() : []), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "errorsToDisplaySignal" }] : /* istanbul ignore next */ []));
     // ARIA
-    hintIdSignal = computed(() => `${this.key()}-hint`, ...(ngDevMode ? [{ debugName: "hintIdSignal" }] : /* istanbul ignore next */ []));
-    errorIdSignal = computed(() => `${this.key()}-error`, ...(ngDevMode ? [{ debugName: "errorIdSignal" }] : /* istanbul ignore next */ []));
-    ariaInvalidSignal = computed(() => (this.showErrors() ? 'true' : null), ...(ngDevMode ? [{ debugName: "ariaInvalidSignal" }] : /* istanbul ignore next */ []));
-    ariaRequiredSignal = computed(() => (this.field()().required() ? 'true' : null), ...(ngDevMode ? [{ debugName: "ariaRequiredSignal" }] : /* istanbul ignore next */ []));
+    hintIdSignal = computed(() => `${this.key()}-hint`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hintIdSignal" }] : /* istanbul ignore next */ []));
+    errorIdSignal = computed(() => `${this.key()}-error`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "errorIdSignal" }] : /* istanbul ignore next */ []));
+    ariaInvalidSignal = computed(() => (this.showErrors() ? 'true' : null), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaInvalidSignal" }] : /* istanbul ignore next */ []));
+    ariaRequiredSignal = computed(() => (this.field()().required() ? 'true' : null), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaRequiredSignal" }] : /* istanbul ignore next */ []));
     ariaDescribedBySignal = computed(() => {
         const errorId = this.errorIdSignal();
         const hintId = this.hintIdSignal();
@@ -6490,7 +6614,8 @@ class DbxForgeTimeDurationFieldComponent {
         if (this.props()?.hint)
             return hintId;
         return null;
-    }, ...(ngDevMode ? [{ debugName: "ariaDescribedBySignal" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaDescribedBySignal" }] : /* istanbul ignore next */ []));
     /**
      * Flag to prevent feedback loops during sync.
      */
@@ -6651,12 +6776,12 @@ class DbxForgeTimeDurationFieldComponent {
         }
         return result;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxForgeTimeDurationFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", 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]=\"effectiveAppearanceSignal()\" 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]=\"ariaInvalidSignal()\" [attr.aria-required]=\"ariaRequiredSignal()\" [attr.aria-describedby]=\"ariaDescribedBySignal()\" />\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 (errorsToDisplaySignal()[0]; as error) {\n    <mat-error [id]=\"errorIdSignal()\">{{ error.message }}</mat-error>\n  } @else if (props()?.hint; as hint) {\n    <mat-hint [id]=\"hintIdSignal()\">{{ hint | dynamicText | async }}</mat-hint>\n  }\n</mat-form-field>\n", dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1$2.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i1$2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i1$2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2.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: i4.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$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.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$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$4.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: "22.1.4", ngImport: i0, type: DbxForgeTimeDurationFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.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]=\"effectiveAppearanceSignal()\" 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]=\"ariaInvalidSignal()\" [attr.aria-required]=\"ariaRequiredSignal()\" [attr.aria-describedby]=\"ariaDescribedBySignal()\" />\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 (errorsToDisplaySignal()[0]; as error) {\n    <mat-error [id]=\"errorIdSignal()\">{{ error.message }}</mat-error>\n  } @else if (props()?.hint; as hint) {\n    <mat-hint [id]=\"hintIdSignal()\">{{ hint | dynamicText | async }}</mat-hint>\n  }\n</mat-form-field>\n", dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1$2.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i1$2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i1$2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2.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: i4.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$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: DynamicTextPipe, name: "dynamicText" }, { kind: "pipe", type: AsyncPipe, name: "async" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxForgeTimeDurationFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", 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]=\"effectiveAppearanceSignal()\" 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]=\"ariaInvalidSignal()\" [attr.aria-required]=\"ariaRequiredSignal()\" [attr.aria-describedby]=\"ariaDescribedBySignal()\" />\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 (errorsToDisplaySignal()[0]; as error) {\n    <mat-error [id]=\"errorIdSignal()\">{{ error.message }}</mat-error>\n  } @else if (props()?.hint; as hint) {\n    <mat-hint [id]=\"hintIdSignal()\">{{ hint | dynamicText | async }}</mat-hint>\n  }\n</mat-form-field>\n" }]
+            args: [{ selector: 'dbx-forge-timeduration-field', imports: [MatFormFieldModule, MatInputModule, MatButtonModule, MatIconModule, FormsModule, ReactiveFormsModule, DynamicTextPipe, AsyncPipe], template: "<mat-form-field [appearance]=\"effectiveAppearanceSignal()\" 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]=\"ariaInvalidSignal()\" [attr.aria-required]=\"ariaRequiredSignal()\" [attr.aria-describedby]=\"ariaDescribedBySignal()\" />\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 (errorsToDisplaySignal()[0]; as error) {\n    <mat-error [id]=\"errorIdSignal()\">{{ error.message }}</mat-error>\n  } @else if (props()?.hint; as hint) {\n    <mat-hint [id]=\"hintIdSignal()\">{{ 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 }] }] } });
 // MARK: Mapper
 /**
@@ -6818,16 +6943,26 @@ class DbxForgePhoneFieldComponent {
     destroyRef = inject(DestroyRef);
     elementRef = inject((ElementRef));
     // Standard ng-forge value field inputs
-    field = input.required(...(ngDevMode ? [{ debugName: "field" }] : /* istanbul ignore next */ []));
-    key = input.required(...(ngDevMode ? [{ debugName: "key" }] : /* istanbul ignore next */ []));
-    label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : /* istanbul ignore next */ []));
-    placeholder = input(...(ngDevMode ? [undefined, { debugName: "placeholder" }] : /* istanbul ignore next */ []));
-    className = input('', ...(ngDevMode ? [{ debugName: "className" }] : /* istanbul ignore next */ []));
-    tabIndex = input(...(ngDevMode ? [undefined, { debugName: "tabIndex" }] : /* istanbul ignore next */ []));
-    props = input(...(ngDevMode ? [undefined, { debugName: "props" }] : /* istanbul ignore next */ []));
-    meta = input(...(ngDevMode ? [undefined, { debugName: "meta" }] : /* istanbul ignore next */ []));
-    validationMessages = input(...(ngDevMode ? [undefined, { debugName: "validationMessages" }] : /* istanbul ignore next */ []));
-    defaultValidationMessages = input(...(ngDevMode ? [undefined, { debugName: "defaultValidationMessages" }] : /* istanbul ignore next */ []));
+    field = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "field" }] : /* istanbul ignore next */ []));
+    key = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "key" }] : /* istanbul ignore next */ []));
+    label = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "label" }] : /* istanbul ignore next */ []));
+    placeholder = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    className = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "className" }] : /* istanbul ignore next */ []));
+    tabIndex = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "tabIndex" }] : /* istanbul ignore next */ []));
+    props = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "props" }] : /* istanbul ignore next */ []));
+    meta = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "meta" }] : /* istanbul ignore next */ []));
+    validationMessages = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "validationMessages" }] : /* istanbul ignore next */ []));
+    defaultValidationMessages = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "defaultValidationMessages" }] : /* istanbul ignore next */ []));
     /**
      * Internal FormControl used to bridge ngx-mat-input-tel (reactive forms)
      * with the ng-forge Signal Forms field tree.
@@ -6835,23 +6970,34 @@ class DbxForgePhoneFieldComponent {
     phoneCtrl = new FormControl('');
     extensionCtrl = new FormControl('', { validators: [isPhoneExtension()] });
     // Computed props
-    preferredCountriesSignal = computed(() => this.props()?.preferredCountries ?? DEFAULT_FORGE_PREFERRED_COUNTRIES, ...(ngDevMode ? [{ debugName: "preferredCountriesSignal" }] : /* istanbul ignore next */ []));
-    onlyCountriesSignal = computed(() => this.props()?.onlyCountries ?? [], ...(ngDevMode ? [{ debugName: "onlyCountriesSignal" }] : /* istanbul ignore next */ []));
-    enableSearchSignal = computed(() => this.props()?.enableSearch ?? true, ...(ngDevMode ? [{ debugName: "enableSearchSignal" }] : /* istanbul ignore next */ []));
-    allowExtensionSignal = computed(() => this.props()?.allowExtension ?? false, ...(ngDevMode ? [{ debugName: "allowExtensionSignal" }] : /* istanbul ignore next */ []));
-    effectiveAppearanceSignal = computed(() => this.props()?.appearance ?? this.materialConfig?.appearance ?? 'outline', ...(ngDevMode ? [{ debugName: "effectiveAppearanceSignal" }] : /* istanbul ignore next */ []));
-    effectiveAutocompleteSignal = computed(() => this.props()?.autocomplete ?? 'off', ...(ngDevMode ? [{ debugName: "effectiveAutocompleteSignal" }] : /* istanbul ignore next */ []));
+    preferredCountriesSignal = computed(() => this.props()?.preferredCountries ?? DEFAULT_FORGE_PREFERRED_COUNTRIES, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "preferredCountriesSignal" }] : /* istanbul ignore next */ []));
+    onlyCountriesSignal = computed(() => this.props()?.onlyCountries ?? [], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "onlyCountriesSignal" }] : /* istanbul ignore next */ []));
+    enableSearchSignal = computed(() => this.props()?.enableSearch ?? true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "enableSearchSignal" }] : /* istanbul ignore next */ []));
+    allowExtensionSignal = computed(() => this.props()?.allowExtension ?? false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "allowExtensionSignal" }] : /* istanbul ignore next */ []));
+    effectiveAppearanceSignal = computed(() => this.props()?.appearance ?? this.materialConfig?.appearance ?? 'outline', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "effectiveAppearanceSignal" }] : /* istanbul ignore next */ []));
+    effectiveAutocompleteSignal = computed(() => this.props()?.autocomplete ?? 'off', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "effectiveAutocompleteSignal" }] : /* istanbul ignore next */ []));
     // Disabled state
     isDisabled = dbxForgeFieldDisabled();
     // Error handling
     resolvedErrors = createResolvedErrorsSignal(this.field, this.validationMessages, this.defaultValidationMessages);
     showErrors = shouldShowErrors(this.field);
-    errorsToDisplaySignal = computed(() => (this.showErrors() ? this.resolvedErrors() : []), ...(ngDevMode ? [{ debugName: "errorsToDisplaySignal" }] : /* istanbul ignore next */ []));
+    errorsToDisplaySignal = computed(() => (this.showErrors() ? this.resolvedErrors() : []), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "errorsToDisplaySignal" }] : /* istanbul ignore next */ []));
     // ARIA
-    hintIdSignal = computed(() => `${this.key()}-hint`, ...(ngDevMode ? [{ debugName: "hintIdSignal" }] : /* istanbul ignore next */ []));
-    errorIdSignal = computed(() => `${this.key()}-error`, ...(ngDevMode ? [{ debugName: "errorIdSignal" }] : /* istanbul ignore next */ []));
-    ariaInvalidSignal = computed(() => (this.showErrors() ? 'true' : null), ...(ngDevMode ? [{ debugName: "ariaInvalidSignal" }] : /* istanbul ignore next */ []));
-    ariaRequiredSignal = computed(() => (this.field()().required() ? 'true' : null), ...(ngDevMode ? [{ debugName: "ariaRequiredSignal" }] : /* istanbul ignore next */ []));
+    hintIdSignal = computed(() => `${this.key()}-hint`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hintIdSignal" }] : /* istanbul ignore next */ []));
+    errorIdSignal = computed(() => `${this.key()}-error`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "errorIdSignal" }] : /* istanbul ignore next */ []));
+    ariaInvalidSignal = computed(() => (this.showErrors() ? 'true' : null), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaInvalidSignal" }] : /* istanbul ignore next */ []));
+    ariaRequiredSignal = computed(() => (this.field()().required() ? 'true' : null), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaRequiredSignal" }] : /* istanbul ignore next */ []));
     ariaDescribedBySignal = computed(() => {
         const errorId = this.errorIdSignal();
         const hintId = this.hintIdSignal();
@@ -6860,7 +7006,8 @@ class DbxForgePhoneFieldComponent {
         if (this.props()?.hint)
             return hintId;
         return null;
-    }, ...(ngDevMode ? [{ debugName: "ariaDescribedBySignal" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaDescribedBySignal" }] : /* istanbul ignore next */ []));
     /**
      * Flag to prevent feedback loops during sync.
      */
@@ -6935,12 +7082,12 @@ class DbxForgePhoneFieldComponent {
         }
         this._syncing = false;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxForgePhoneFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", 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]=\"effectiveAppearanceSignal()\" 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\n      name=\"phone\"\n      class=\"dbx-form-phone-field-phone-content\"\n      [formControl]=\"phoneCtrl\"\n      [autocomplete]=\"effectiveAutocompleteSignal()\"\n      [enableSearch]=\"enableSearchSignal()\"\n      [preferredCountries]=\"preferredCountriesSignal()\"\n      [onlyCountries]=\"onlyCountriesSignal()\"\n      [enablePlaceholder]=\"false\"\n      [placeholder]=\"(placeholder() | dynamicText | async) ?? ''\"\n      [attr.aria-invalid]=\"ariaInvalidSignal()\"\n      [attr.aria-required]=\"ariaRequiredSignal()\"\n      [attr.aria-describedby]=\"ariaDescribedBySignal()\"></ngx-mat-input-tel>\n    @if (allowExtensionSignal()) {\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 (errorsToDisplaySignal()[0]; as error) {\n    <mat-error [id]=\"errorIdSignal()\">{{ error.message }}</mat-error>\n  } @else if (props()?.hint; as hint) {\n    <mat-hint [id]=\"hintIdSignal()\">{{ 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$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1$2.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i1$2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$4.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$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i1$4.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$4.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: "22.1.4", ngImport: i0, type: DbxForgePhoneFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.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]=\"effectiveAppearanceSignal()\" 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\n      name=\"phone\"\n      class=\"dbx-form-phone-field-phone-content\"\n      [formControl]=\"phoneCtrl\"\n      [autocomplete]=\"effectiveAutocompleteSignal()\"\n      [enableSearch]=\"enableSearchSignal()\"\n      [preferredCountries]=\"preferredCountriesSignal()\"\n      [onlyCountries]=\"onlyCountriesSignal()\"\n      [enablePlaceholder]=\"false\"\n      [placeholder]=\"(placeholder() | dynamicText | async) ?? ''\"\n      [attr.aria-invalid]=\"ariaInvalidSignal()\"\n      [attr.aria-required]=\"ariaRequiredSignal()\"\n      [attr.aria-describedby]=\"ariaDescribedBySignal()\"></ngx-mat-input-tel>\n    @if (allowExtensionSignal()) {\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 (errorsToDisplaySignal()[0]; as error) {\n    <mat-error [id]=\"errorIdSignal()\">{{ error.message }}</mat-error>\n  } @else if (props()?.hint; as hint) {\n    <mat-hint [id]=\"hintIdSignal()\">{{ 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$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1$2.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i1$2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$4.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i1$4.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$4.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" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxForgePhoneFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", 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]=\"effectiveAppearanceSignal()\" 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\n      name=\"phone\"\n      class=\"dbx-form-phone-field-phone-content\"\n      [formControl]=\"phoneCtrl\"\n      [autocomplete]=\"effectiveAutocompleteSignal()\"\n      [enableSearch]=\"enableSearchSignal()\"\n      [preferredCountries]=\"preferredCountriesSignal()\"\n      [onlyCountries]=\"onlyCountriesSignal()\"\n      [enablePlaceholder]=\"false\"\n      [placeholder]=\"(placeholder() | dynamicText | async) ?? ''\"\n      [attr.aria-invalid]=\"ariaInvalidSignal()\"\n      [attr.aria-required]=\"ariaRequiredSignal()\"\n      [attr.aria-describedby]=\"ariaDescribedBySignal()\"></ngx-mat-input-tel>\n    @if (allowExtensionSignal()) {\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 (errorsToDisplaySignal()[0]; as error) {\n    <mat-error [id]=\"errorIdSignal()\">{{ error.message }}</mat-error>\n  } @else if (props()?.hint; as hint) {\n    <mat-hint [id]=\"hintIdSignal()\">{{ hint | dynamicText | async }}</mat-hint>\n  }\n</mat-form-field>\n", styles: [":host{display:block;width:100%}:host mat-form-field{width:100%}\n"] }]
+            args: [{ selector: 'dbx-forge-phone-field', imports: [MatFormFieldModule, MatInputModule, ReactiveFormsModule, NgxMatInputTelComponent, DynamicTextPipe, AsyncPipe], template: "<mat-form-field [appearance]=\"effectiveAppearanceSignal()\" 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\n      name=\"phone\"\n      class=\"dbx-form-phone-field-phone-content\"\n      [formControl]=\"phoneCtrl\"\n      [autocomplete]=\"effectiveAutocompleteSignal()\"\n      [enableSearch]=\"enableSearchSignal()\"\n      [preferredCountries]=\"preferredCountriesSignal()\"\n      [onlyCountries]=\"onlyCountriesSignal()\"\n      [enablePlaceholder]=\"false\"\n      [placeholder]=\"(placeholder() | dynamicText | async) ?? ''\"\n      [attr.aria-invalid]=\"ariaInvalidSignal()\"\n      [attr.aria-required]=\"ariaRequiredSignal()\"\n      [attr.aria-describedby]=\"ariaDescribedBySignal()\"></ngx-mat-input-tel>\n    @if (allowExtensionSignal()) {\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 (errorsToDisplaySignal()[0]; as error) {\n    <mat-error [id]=\"errorIdSignal()\">{{ error.message }}</mat-error>\n  } @else if (props()?.hint; as hint) {\n    <mat-hint [id]=\"hintIdSignal()\">{{ 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 }] }] } });
 // MARK: Mapper
 /**
@@ -7022,42 +7169,63 @@ class DbxForgeValueSelectionFieldComponent {
     materialConfig = inject(MATERIAL_CONFIG, { optional: true });
     elementRef = inject((ElementRef));
     // ng-forge ValueFieldComponent inputs
-    field = input.required(...(ngDevMode ? [{ debugName: "field" }] : /* istanbul ignore next */ []));
-    key = input.required(...(ngDevMode ? [{ debugName: "key" }] : /* istanbul ignore next */ []));
-    label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : /* istanbul ignore next */ []));
-    placeholder = input(...(ngDevMode ? [undefined, { debugName: "placeholder" }] : /* istanbul ignore next */ []));
-    className = input('', ...(ngDevMode ? [{ debugName: "className" }] : /* istanbul ignore next */ []));
-    tabIndex = input(...(ngDevMode ? [undefined, { debugName: "tabIndex" }] : /* istanbul ignore next */ []));
-    props = input(...(ngDevMode ? [undefined, { debugName: "props" }] : /* istanbul ignore next */ []));
-    meta = input(...(ngDevMode ? [undefined, { debugName: "meta" }] : /* istanbul ignore next */ []));
-    validationMessages = input(...(ngDevMode ? [undefined, { debugName: "validationMessages" }] : /* istanbul ignore next */ []));
-    defaultValidationMessages = input(...(ngDevMode ? [undefined, { debugName: "defaultValidationMessages" }] : /* istanbul ignore next */ []));
+    field = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "field" }] : /* istanbul ignore next */ []));
+    key = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "key" }] : /* istanbul ignore next */ []));
+    label = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "label" }] : /* istanbul ignore next */ []));
+    placeholder = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    className = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "className" }] : /* istanbul ignore next */ []));
+    tabIndex = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "tabIndex" }] : /* istanbul ignore next */ []));
+    props = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "props" }] : /* istanbul ignore next */ []));
+    meta = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "meta" }] : /* istanbul ignore next */ []));
+    validationMessages = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "validationMessages" }] : /* istanbul ignore next */ []));
+    defaultValidationMessages = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "defaultValidationMessages" }] : /* istanbul ignore next */ []));
     // Derived signals
-    addClearOptionSignal = computed(() => this.props()?.addClearOption, ...(ngDevMode ? [{ debugName: "addClearOptionSignal" }] : /* istanbul ignore next */ []));
+    addClearOptionSignal = computed(() => this.props()?.addClearOption, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "addClearOptionSignal" }] : /* istanbul ignore next */ []));
     addClearOption$ = toObservable(this.addClearOptionSignal).pipe(distinctUntilChanged());
-    inputOptionsSignal = computed(() => this.props()?.options, ...(ngDevMode ? [{ debugName: "inputOptionsSignal" }] : /* istanbul ignore next */ []));
+    inputOptionsSignal = computed(() => this.props()?.options, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "inputOptionsSignal" }] : /* istanbul ignore next */ []));
     inputOptions$ = toObservable(this.inputOptionsSignal).pipe(maybeValueFromObservableOrValue());
     resolvedOptions$ = combineLatest([this.inputOptions$, this.addClearOption$]).pipe(map(([options, addClearOption]) => resolveForgeSelectionOptions(options ?? [], addClearOption ?? false)));
     resolvedOptionsSignal = toSignal(this.resolvedOptions$);
-    multipleSignal = computed(() => this.props()?.multiple ?? false, ...(ngDevMode ? [{ debugName: "multipleSignal" }] : /* istanbul ignore next */ []));
-    effectiveAppearanceSignal = computed(() => this.props()?.appearance ?? this.materialConfig?.appearance ?? 'outline', ...(ngDevMode ? [{ debugName: "effectiveAppearanceSignal" }] : /* istanbul ignore next */ []));
-    effectiveSubscriptSizingSignal = computed(() => this.props()?.subscriptSizing ?? this.materialConfig?.subscriptSizing ?? 'dynamic', ...(ngDevMode ? [{ debugName: "effectiveSubscriptSizingSignal" }] : /* istanbul ignore next */ []));
-    compareWithSignal = computed(() => this.props()?.compareWith ?? Object.is, ...(ngDevMode ? [{ debugName: "compareWithSignal" }] : /* istanbul ignore next */ []));
+    multipleSignal = computed(() => this.props()?.multiple ?? false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "multipleSignal" }] : /* istanbul ignore next */ []));
+    effectiveAppearanceSignal = computed(() => this.props()?.appearance ?? this.materialConfig?.appearance ?? 'outline', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "effectiveAppearanceSignal" }] : /* istanbul ignore next */ []));
+    effectiveSubscriptSizingSignal = computed(() => this.props()?.subscriptSizing ?? this.materialConfig?.subscriptSizing ?? 'dynamic', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "effectiveSubscriptSizingSignal" }] : /* istanbul ignore next */ []));
+    compareWithSignal = computed(() => this.props()?.compareWith ?? Object.is, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "compareWithSignal" }] : /* istanbul ignore next */ []));
     // Error display
     resolvedErrors = createResolvedErrorsSignal(this.field, this.validationMessages, this.defaultValidationMessages);
     showErrors = shouldShowErrors(this.field);
-    errorsToDisplaySignal = computed(() => (this.showErrors() ? this.resolvedErrors() : []), ...(ngDevMode ? [{ debugName: "errorsToDisplaySignal" }] : /* istanbul ignore next */ []));
+    errorsToDisplaySignal = computed(() => (this.showErrors() ? this.resolvedErrors() : []), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "errorsToDisplaySignal" }] : /* istanbul ignore next */ []));
     /**
      * Unique ID for the hint element
      */
-    hintIdSignal = computed(() => `${this.key()}-hint`, ...(ngDevMode ? [{ debugName: "hintIdSignal" }] : /* istanbul ignore next */ []));
+    hintIdSignal = computed(() => `${this.key()}-hint`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hintIdSignal" }] : /* istanbul ignore next */ []));
     /**
      * Base ID for error elements
      */
-    errorIdSignal = computed(() => `${this.key()}-error`, ...(ngDevMode ? [{ debugName: "errorIdSignal" }] : /* istanbul ignore next */ []));
+    errorIdSignal = computed(() => `${this.key()}-error`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "errorIdSignal" }] : /* istanbul ignore next */ []));
     // Accessibility
-    ariaInvalidSignal = computed(() => (this.showErrors() ? 'true' : null), ...(ngDevMode ? [{ debugName: "ariaInvalidSignal" }] : /* istanbul ignore next */ []));
-    ariaRequiredSignal = computed(() => (this.field()().required() ? 'true' : null), ...(ngDevMode ? [{ debugName: "ariaRequiredSignal" }] : /* istanbul ignore next */ []));
+    ariaInvalidSignal = computed(() => (this.showErrors() ? 'true' : null), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaInvalidSignal" }] : /* istanbul ignore next */ []));
+    ariaRequiredSignal = computed(() => (this.field()().required() ? 'true' : null), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaRequiredSignal" }] : /* istanbul ignore next */ []));
     ariaDescribedBySignal = computed(() => {
         const errorId = this.errorIdSignal();
         const hintId = this.hintIdSignal();
@@ -7066,16 +7234,17 @@ class DbxForgeValueSelectionFieldComponent {
         if (this.props()?.hint)
             return hintId;
         return null;
-    }, ...(ngDevMode ? [{ debugName: "ariaDescribedBySignal" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaDescribedBySignal" }] : /* istanbul ignore next */ []));
     constructor() {
         setupMetaTracking(this.elementRef, this.meta, { selector: 'mat-select' });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxForgeValueSelectionFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", 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]=\"effectiveAppearanceSignal()\" [subscriptSizing]=\"effectiveSubscriptSizingSignal()\">\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]=\"ariaInvalidSignal()\" [attr.aria-required]=\"ariaRequiredSignal()\" [attr.aria-describedby]=\"ariaDescribedBySignal()\">\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 (errorsToDisplaySignal()[0]; as error) {\n    <mat-error [id]=\"errorIdSignal()\">{{ error.message }}</mat-error>\n  } @else if (props()?.hint; as hint) {\n    <mat-hint [id]=\"hintIdSignal()\">{{ 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: "22.1.4", ngImport: i0, type: DbxForgeValueSelectionFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.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]=\"effectiveAppearanceSignal()\" [subscriptSizing]=\"effectiveSubscriptSizingSignal()\">\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]=\"ariaInvalidSignal()\" [attr.aria-required]=\"ariaRequiredSignal()\" [attr.aria-describedby]=\"ariaDescribedBySignal()\">\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 (errorsToDisplaySignal()[0]; as error) {\n    <mat-error [id]=\"errorIdSignal()\">{{ error.message }}</mat-error>\n  } @else if (props()?.hint; as hint) {\n    <mat-hint [id]=\"hintIdSignal()\">{{ 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" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxForgeValueSelectionFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", 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: {
+            args: [{ selector: 'dbx-forge-value-selection-field', imports: [MatFormField, MatLabel, MatSelect, MatOption, MatHint, FormField, MatError, DynamicTextPipe, AsyncPipe], host: {
                         '[id]': '`${key()}`',
                         '[attr.data-testid]': 'key()',
                         '[class]': 'className()',
@@ -7133,7 +7302,8 @@ const DBX_SEARCHABLE_FIELD_COMPONENT_DATA_TOKEN = new InjectionToken('DbxSearcha
  * value data via {@link DBX_SEARCHABLE_FIELD_COMPONENT_DATA_TOKEN}.
  */
 class DbxSearchableFieldAutocompleteItemComponent {
-    displayValue = input.required(...(ngDevMode ? [{ debugName: "displayValue" }] : /* istanbul ignore next */ []));
+    displayValue = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "displayValue" }] : /* istanbul ignore next */ []));
     configSignal = computed(() => {
         const displayValue = this.displayValue();
         const config = {
@@ -7149,16 +7319,18 @@ class DbxSearchableFieldAutocompleteItemComponent {
             ], displayValue.display.providers)
         };
         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.11", ngImport: i0, type: DbxSearchableFieldAutocompleteItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.11", 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: `
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "configSignal" }] : /* istanbul ignore next */ []));
+    anchorSignal = computed(() => this.displayValue().anchor, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "anchorSignal" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: DbxSearchableFieldAutocompleteItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.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: `
     <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 });
+  `, 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"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxSearchableFieldAutocompleteItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: DbxSearchableFieldAutocompleteItemComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'dbx-searchable-field-autocomplete-item',
@@ -7167,9 +7339,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
       <dbx-injection [config]="configSignal()"></dbx-injection>
     </dbx-anchor>
   `,
-                    imports: [DbxAnchorComponent, DbxInjectionComponent],
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    standalone: true
+                    imports: [DbxAnchorComponent, DbxInjectionComponent]
                 }]
         }], propDecorators: { displayValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayValue", required: true }] }] } });
 // MARK: Default
@@ -7181,10 +7351,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
  */
 class AbstractDbxSearchableFieldDisplayDirective {
     displayValue = inject(DBX_SEARCHABLE_FIELD_COMPONENT_DATA_TOKEN);
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: AbstractDbxSearchableFieldDisplayDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.11", type: AbstractDbxSearchableFieldDisplayDirective, isStandalone: true, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: AbstractDbxSearchableFieldDisplayDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.4", type: AbstractDbxSearchableFieldDisplayDirective, isStandalone: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: AbstractDbxSearchableFieldDisplayDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: AbstractDbxSearchableFieldDisplayDirective, decorators: [{
             type: Directive
         }] });
 /**
@@ -7194,8 +7364,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
  */
 class DbxDefaultSearchableFieldDisplayComponent extends AbstractDbxSearchableFieldDisplayDirective {
     icon = this.displayValue.icon;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxDefaultSearchableFieldDisplayComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: DbxDefaultSearchableFieldDisplayComponent, isStandalone: true, selector: "dbx-default-searchable-field-display", usesInheritance: true, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: DbxDefaultSearchableFieldDisplayComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", 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>
@@ -7205,9 +7375,9 @@ class DbxDefaultSearchableFieldDisplayComponent extends AbstractDbxSearchableFie
         <span class="dbx-chip-sublabel">({{ displayValue.sublabel }})</span>
       }
     </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxDefaultSearchableFieldDisplayComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: DbxDefaultSearchableFieldDisplayComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'dbx-default-searchable-field-display',
@@ -7222,9 +7392,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
       }
     </div>
   `,
-                    imports: [MatIconModule],
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    standalone: true
+                    imports: [MatIconModule]
                 }]
         }] });
 
@@ -7241,15 +7409,24 @@ const DEFAULT_SEARCHABLE_FIELD_DISPLAY = {
  */
 class AbstractForgeSearchableFieldDirective {
     // MARK: ng-forge ValueFieldComponent Inputs
-    key = input.required(...(ngDevMode ? [{ debugName: "key" }] : /* istanbul ignore next */ []));
-    label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : /* istanbul ignore next */ []));
-    placeholder = input(...(ngDevMode ? [undefined, { debugName: "placeholder" }] : /* istanbul ignore next */ []));
-    className = input('', ...(ngDevMode ? [{ debugName: "className" }] : /* istanbul ignore next */ []));
-    tabIndex = input(...(ngDevMode ? [undefined, { debugName: "tabIndex" }] : /* istanbul ignore next */ []));
-    props = input(...(ngDevMode ? [undefined, { debugName: "props" }] : /* istanbul ignore next */ []));
-    meta = input(...(ngDevMode ? [undefined, { debugName: "meta" }] : /* istanbul ignore next */ []));
-    validationMessages = input(...(ngDevMode ? [undefined, { debugName: "validationMessages" }] : /* istanbul ignore next */ []));
-    defaultValidationMessages = input(...(ngDevMode ? [undefined, { debugName: "defaultValidationMessages" }] : /* istanbul ignore next */ []));
+    key = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "key" }] : /* istanbul ignore next */ []));
+    label = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "label" }] : /* istanbul ignore next */ []));
+    placeholder = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    className = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "className" }] : /* istanbul ignore next */ []));
+    tabIndex = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "tabIndex" }] : /* istanbul ignore next */ []));
+    props = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "props" }] : /* istanbul ignore next */ []));
+    meta = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "meta" }] : /* istanbul ignore next */ []));
+    validationMessages = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "validationMessages" }] : /* istanbul ignore next */ []));
+    defaultValidationMessages = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "defaultValidationMessages" }] : /* istanbul ignore next */ []));
     inputCtrl = new FormControl('');
     _clearDisplayHashMapSub = cleanSubscription();
     _displayHashMap = completeOnDestroy(new BehaviorSubject(new Map()));
@@ -7260,18 +7437,23 @@ class AbstractForgeSearchableFieldDirective {
     labelSignal = computed(() => {
         const l = this.label();
         return typeof l === 'string' ? l : undefined;
-    }, ...(ngDevMode ? [{ debugName: "labelSignal" }] : /* istanbul ignore next */ []));
-    hintSignal = computed(() => this.props()?.hint, ...(ngDevMode ? [{ debugName: "hintSignal" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "labelSignal" }] : /* istanbul ignore next */ []));
+    hintSignal = computed(() => this.props()?.hint, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hintSignal" }] : /* istanbul ignore next */ []));
     // ARIA IDs
-    hintIdSignal = computed(() => `${this.key()}-hint`, ...(ngDevMode ? [{ debugName: "hintIdSignal" }] : /* istanbul ignore next */ []));
-    errorIdSignal = computed(() => `${this.key()}-error`, ...(ngDevMode ? [{ debugName: "errorIdSignal" }] : /* istanbul ignore next */ []));
+    hintIdSignal = computed(() => `${this.key()}-hint`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hintIdSignal" }] : /* istanbul ignore next */ []));
+    errorIdSignal = computed(() => `${this.key()}-error`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "errorIdSignal" }] : /* istanbul ignore next */ []));
     searchInputPlaceholderSignal = computed(() => {
         const p = this.props();
         const placeholderValue = this.placeholder();
         const searchOnEmpty = p?.searchOnEmptyText ?? false;
         const placeholder = typeof placeholderValue === 'string' ? placeholderValue : undefined;
         return placeholder || (searchOnEmpty ? '' : DEFAULT_SEARCH_INPUT_PLACEHOLDER);
-    }, ...(ngDevMode ? [{ debugName: "searchInputPlaceholderSignal" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "searchInputPlaceholderSignal" }] : /* istanbul ignore next */ []));
     // MARK: Search Results
     searchResultsState$ = this.inputValueString$.pipe(switchMap((text) => {
         const p = this.props();
@@ -7351,10 +7533,10 @@ class AbstractForgeSearchableFieldDirective {
             return obs;
         }));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: AbstractForgeSearchableFieldDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.11", 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: "22.1.4", ngImport: i0, type: AbstractForgeSearchableFieldDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.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 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: AbstractForgeSearchableFieldDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", 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 }] }] } });
 
@@ -7468,8 +7650,10 @@ function dbxForgeSearchableStringChipField(config) {
  */
 class DbxForgeSearchableTextFieldComponent extends AbstractForgeSearchableFieldDirective {
     elementRef = inject((ElementRef));
-    field = input.required(...(ngDevMode ? [{ debugName: "field" }] : /* istanbul ignore next */ []));
-    textInputRef = viewChild('textInput', ...(ngDevMode ? [{ debugName: "textInputRef" }] : /* istanbul ignore next */ []));
+    field = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "field" }] : /* istanbul ignore next */ []));
+    textInputRef = viewChild('textInput', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "textInputRef" }] : /* istanbul ignore next */ []));
     _singleValueSyncSub = cleanSubscription();
     _valuesSubject = completeOnDestroy(new BehaviorSubject([]));
     // Disabled state
@@ -7477,42 +7661,52 @@ class DbxForgeSearchableTextFieldComponent extends AbstractForgeSearchableFieldD
     // Error handling
     resolvedErrors = createResolvedErrorsSignal(this.field, this.validationMessages, this.defaultValidationMessages);
     showErrors = shouldShowErrors(this.field);
-    errorsToDisplaySignal = computed(() => (this.showErrors() ? this.resolvedErrors() : []), ...(ngDevMode ? [{ debugName: "errorsToDisplaySignal" }] : /* istanbul ignore next */ []));
+    errorsToDisplaySignal = computed(() => (this.showErrors() ? this.resolvedErrors() : []), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "errorsToDisplaySignal" }] : /* istanbul ignore next */ []));
     // ARIA
-    ariaInvalidSignal = computed(() => (this.showErrors() ? 'true' : null), ...(ngDevMode ? [{ debugName: "ariaInvalidSignal" }] : /* istanbul ignore next */ []));
+    ariaInvalidSignal = computed(() => (this.showErrors() ? 'true' : null), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaInvalidSignal" }] : /* istanbul ignore next */ []));
     ariaDescribedBySignal = computed(() => {
         if (this.errorsToDisplaySignal().length > 0)
             return this.errorIdSignal();
         if (this.props()?.hint)
             return this.hintIdSignal();
         return null;
-    }, ...(ngDevMode ? [{ debugName: "ariaDescribedBySignal" }] : /* istanbul ignore next */ []));
-    showClearValueSignal = computed(() => this.props()?.showClearValue ?? true, ...(ngDevMode ? [{ debugName: "showClearValueSignal" }] : /* istanbul ignore next */ []));
-    searchLabelSignal = computed(() => this.props()?.searchLabel ?? 'Search', ...(ngDevMode ? [{ debugName: "searchLabelSignal" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaDescribedBySignal" }] : /* istanbul ignore next */ []));
+    showClearValueSignal = computed(() => this.props()?.showClearValue ?? true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showClearValueSignal" }] : /* istanbul ignore next */ []));
+    searchLabelSignal = computed(() => this.props()?.searchLabel ?? 'Search', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "searchLabelSignal" }] : /* istanbul ignore next */ []));
     fieldValueSignal = computed(() => {
         const fieldGetter = this.field();
         const fieldState = typeof fieldGetter === 'function' ? fieldGetter() : undefined;
         return fieldState?.value?.();
-    }, ...(ngDevMode ? [{ debugName: "fieldValueSignal" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "fieldValueSignal" }] : /* istanbul ignore next */ []));
     displayValues$ = this._valuesSubject.pipe(switchMap((values) => this._loadDisplayValuesForValues(values)), map((x) => x?.value ?? []), shareReplay(1));
     selectedDisplayValue$ = this.displayValues$.pipe(map((x) => x[0]), shareReplay(1));
     selectedDisplayValueSignal = toSignal(this.selectedDisplayValue$);
-    hasValueSignal = computed(() => Boolean(this.selectedDisplayValueSignal()), ...(ngDevMode ? [{ debugName: "hasValueSignal" }] : /* istanbul ignore next */ []));
+    hasValueSignal = computed(() => Boolean(this.selectedDisplayValueSignal()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasValueSignal" }] : /* istanbul ignore next */ []));
     showSelectedDisplayValueSignal = computed(() => {
         const hasValue = this.hasValueSignal();
         const p = this.props();
         const showSelected = p?.showSelectedValue ?? !(p?.allowStringValues ?? false);
         return showSelected && hasValue;
-    }, ...(ngDevMode ? [{ debugName: "showSelectedDisplayValueSignal" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showSelectedDisplayValueSignal" }] : /* istanbul ignore next */ []));
     // Disabled state propagation
     _disabledEffect = effect(() => {
         toggleDisableFormControl(this.inputCtrl, this.isDisabled());
-    }, ...(ngDevMode ? [{ debugName: "_disabledEffect" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_disabledEffect" }] : /* istanbul ignore next */ []));
     _syncFieldValueEffect = effect(() => {
         const fieldValue = this.fieldValueSignal();
         const values = fieldValue != null && fieldValue !== '' ? [fieldValue] : [];
         this._valuesSubject.next(values);
-    }, ...(ngDevMode ? [{ debugName: "_syncFieldValueEffect" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_syncFieldValueEffect" }] : /* istanbul ignore next */ []));
     constructor() {
         super();
         setupMetaTracking(this.elementRef, this.meta, { selector: 'input' });
@@ -7557,12 +7751,12 @@ class DbxForgeSearchableTextFieldComponent extends AbstractForgeSearchableFieldD
             fieldState.value.set(value ?? null);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxForgeSearchableTextFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", 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]=\"searchInputPlaceholderSignal()\" [attr.aria-invalid]=\"ariaInvalidSignal()\" [attr.aria-describedby]=\"ariaDescribedBySignal()\" />\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\" [class.dbx-searchable-field-anchor-option]=\"!!result.anchor\">\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$4.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$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i2$1.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$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i2$1.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: "22.1.4", ngImport: i0, type: DbxForgeSearchableTextFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.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]=\"searchInputPlaceholderSignal()\" [attr.aria-invalid]=\"ariaInvalidSignal()\" [attr.aria-describedby]=\"ariaDescribedBySignal()\" />\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\" [class.dbx-searchable-field-anchor-option]=\"!!result.anchor\">\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$4.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i2$1.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$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i2$1.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"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxForgeSearchableTextFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", 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]=\"searchInputPlaceholderSignal()\" [attr.aria-invalid]=\"ariaInvalidSignal()\" [attr.aria-describedby]=\"ariaDescribedBySignal()\" />\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\" [class.dbx-searchable-field-anchor-option]=\"!!result.anchor\">\n      <dbx-searchable-field-autocomplete-item [displayValue]=\"result\"></dbx-searchable-field-autocomplete-item>\n    </mat-option>\n  }\n</mat-autocomplete>\n" }]
+            args: [{ selector: 'dbx-forge-searchable-text-field', imports: [FormsModule, ReactiveFormsModule, MatAutocompleteModule, MatOptionModule, MatIconModule, DbxSearchableFieldAutocompleteItemComponent], 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]=\"searchInputPlaceholderSignal()\" [attr.aria-invalid]=\"ariaInvalidSignal()\" [attr.aria-describedby]=\"ariaDescribedBySignal()\" />\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\" [class.dbx-searchable-field-anchor-option]=\"!!result.anchor\">\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 }] }] } });
 
 var searchableText_field_component = /*#__PURE__*/Object.freeze({
@@ -7578,23 +7772,27 @@ var searchableText_field_component = /*#__PURE__*/Object.freeze({
  */
 class DbxForgeSearchableChipFieldComponent extends AbstractForgeSearchableFieldDirective {
     elementRef = inject((ElementRef));
-    field = input.required(...(ngDevMode ? [{ debugName: "field" }] : /* istanbul ignore next */ []));
+    field = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "field" }] : /* istanbul ignore next */ []));
     separatorKeysCodes = [ENTER, COMMA];
     // Disabled state
     isDisabled = dbxForgeFieldDisabled();
     // Error handling
     resolvedErrors = createResolvedErrorsSignal(this.field, this.validationMessages, this.defaultValidationMessages);
     showErrors = shouldShowErrors(this.field);
-    errorsToDisplaySignal = computed(() => (this.showErrors() ? this.resolvedErrors() : []), ...(ngDevMode ? [{ debugName: "errorsToDisplaySignal" }] : /* istanbul ignore next */ []));
+    errorsToDisplaySignal = computed(() => (this.showErrors() ? this.resolvedErrors() : []), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "errorsToDisplaySignal" }] : /* istanbul ignore next */ []));
     // ARIA
-    ariaInvalidSignal = computed(() => (this.showErrors() ? 'true' : null), ...(ngDevMode ? [{ debugName: "ariaInvalidSignal" }] : /* istanbul ignore next */ []));
+    ariaInvalidSignal = computed(() => (this.showErrors() ? 'true' : null), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaInvalidSignal" }] : /* istanbul ignore next */ []));
     ariaDescribedBySignal = computed(() => {
         if (this.errorsToDisplaySignal().length > 0)
             return this.errorIdSignal();
         if (this.props()?.hint)
             return this.hintIdSignal();
         return null;
-    }, ...(ngDevMode ? [{ debugName: "ariaDescribedBySignal" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaDescribedBySignal" }] : /* istanbul ignore next */ []));
     _blur = completeOnDestroy(new Subject());
     _blurSub = cleanSubscription();
     _valuesSubject = completeOnDestroy(new BehaviorSubject([]));
@@ -7604,14 +7802,16 @@ class DbxForgeSearchableChipFieldComponent extends AbstractForgeSearchableFieldD
     // Disabled state propagation
     _disabledEffect = effect(() => {
         toggleDisableFormControl(this.inputCtrl, this.isDisabled());
-    }, ...(ngDevMode ? [{ debugName: "_disabledEffect" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_disabledEffect" }] : /* istanbul ignore next */ []));
     _syncFieldValueEffect = effect(() => {
         const fieldGetter = this.field();
         const fieldState = typeof fieldGetter === 'function' ? fieldGetter() : undefined;
         const fieldValue = fieldState?.value?.();
         const values = fieldValue == null ? [] : convertMaybeToArray(fieldValue).filter((v) => v != null && v !== '');
         this._valuesSubject.next(values);
-    }, ...(ngDevMode ? [{ debugName: "_syncFieldValueEffect" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_syncFieldValueEffect" }] : /* istanbul ignore next */ []));
     constructor() {
         super();
         setupMetaTracking(this.elementRef, this.meta, { selector: 'input' });
@@ -7746,12 +7946,12 @@ class DbxForgeSearchableChipFieldComponent extends AbstractForgeSearchableFieldD
             fieldState.value.set(newValue ?? null);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxForgeSearchableChipFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", 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]=\"searchInputPlaceholderSignal()\" (blur)=\"onBlur()\" (keydown)=\"tabPressedOnInput($event)\" [attr.aria-invalid]=\"ariaInvalidSignal()\" [attr.aria-describedby]=\"ariaDescribedBySignal()\" />\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$4.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$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i2$1.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$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i2$1.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i3$1.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i3$1.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled", "readonly", "matChipInputDisabledInteractive"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i3$1.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i3$1.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$3.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: "22.1.4", ngImport: i0, type: DbxForgeSearchableChipFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.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\n      #textInput\n      class=\"dbx-forge-bare-input\"\n      [class.dbx-warn]=\"inputErrorMessage\"\n      [formControl]=\"inputCtrl\"\n      [matAutocomplete]=\"auto\"\n      [matChipInputFor]=\"chipGrid\"\n      [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\n      (matChipInputTokenEnd)=\"addChip($event)\"\n      [placeholder]=\"searchInputPlaceholderSignal()\"\n      (blur)=\"onBlur()\"\n      (keydown)=\"tabPressedOnInput($event)\"\n      [attr.aria-invalid]=\"ariaInvalidSignal()\"\n      [attr.aria-describedby]=\"ariaDescribedBySignal()\" />\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$4.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i2$1.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$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i2$1.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i3$1.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i3$1.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled", "readonly", "matChipInputDisabledInteractive"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i3$1.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i3$1.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$3.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"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxForgeSearchableChipFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", 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]=\"searchInputPlaceholderSignal()\" (blur)=\"onBlur()\" (keydown)=\"tabPressedOnInput($event)\" [attr.aria-invalid]=\"ariaInvalidSignal()\" [attr.aria-describedby]=\"ariaDescribedBySignal()\" />\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" }]
+            args: [{ selector: 'dbx-forge-searchable-chip-field', imports: [FormsModule, ReactiveFormsModule, MatAutocompleteModule, MatChipsModule, MatOptionModule, MatIconModule, DbxLoadingModule, DbxSearchableFieldAutocompleteItemComponent], 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\n      #textInput\n      class=\"dbx-forge-bare-input\"\n      [class.dbx-warn]=\"inputErrorMessage\"\n      [formControl]=\"inputCtrl\"\n      [matAutocomplete]=\"auto\"\n      [matChipInputFor]=\"chipGrid\"\n      [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\n      (matChipInputTokenEnd)=\"addChip($event)\"\n      [placeholder]=\"searchInputPlaceholderSignal()\"\n      (blur)=\"onBlur()\"\n      (keydown)=\"tabPressedOnInput($event)\"\n      [attr.aria-invalid]=\"ariaInvalidSignal()\"\n      [attr.aria-describedby]=\"ariaDescribedBySignal()\" />\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 }] }] } });
 
 var searchableChip_field_component = /*#__PURE__*/Object.freeze({
@@ -7779,16 +7979,26 @@ const FORGE_PICKABLE_LIST_FIELD_TYPE = 'dbx-pickable-list';
  */
 class AbstractForgePickableItemFieldDirective {
     // MARK: ng-forge ValueFieldComponent Inputs
-    field = input.required(...(ngDevMode ? [{ debugName: "field" }] : /* istanbul ignore next */ []));
-    key = input.required(...(ngDevMode ? [{ debugName: "key" }] : /* istanbul ignore next */ []));
-    label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : /* istanbul ignore next */ []));
-    placeholder = input(...(ngDevMode ? [undefined, { debugName: "placeholder" }] : /* istanbul ignore next */ []));
-    className = input('', ...(ngDevMode ? [{ debugName: "className" }] : /* istanbul ignore next */ []));
-    tabIndex = input(...(ngDevMode ? [undefined, { debugName: "tabIndex" }] : /* istanbul ignore next */ []));
-    props = input(...(ngDevMode ? [undefined, { debugName: "props" }] : /* istanbul ignore next */ []));
-    meta = input(...(ngDevMode ? [undefined, { debugName: "meta" }] : /* istanbul ignore next */ []));
-    validationMessages = input(...(ngDevMode ? [undefined, { debugName: "validationMessages" }] : /* istanbul ignore next */ []));
-    defaultValidationMessages = input(...(ngDevMode ? [undefined, { debugName: "defaultValidationMessages" }] : /* istanbul ignore next */ []));
+    field = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "field" }] : /* istanbul ignore next */ []));
+    key = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "key" }] : /* istanbul ignore next */ []));
+    label = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "label" }] : /* istanbul ignore next */ []));
+    placeholder = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    className = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "className" }] : /* istanbul ignore next */ []));
+    tabIndex = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "tabIndex" }] : /* istanbul ignore next */ []));
+    props = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "props" }] : /* istanbul ignore next */ []));
+    meta = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "meta" }] : /* istanbul ignore next */ []));
+    validationMessages = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "validationMessages" }] : /* istanbul ignore next */ []));
+    defaultValidationMessages = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "defaultValidationMessages" }] : /* istanbul ignore next */ []));
     inputCtrl = new FormControl('');
     _clearDisplayHashMapSub = cleanSubscription();
     _displayHashMap = completeOnDestroy(new BehaviorSubject(new Map()));
@@ -7797,35 +8007,49 @@ class AbstractForgePickableItemFieldDirective {
     labelSignal = computed(() => {
         const l = this.label();
         return typeof l === 'string' ? l : undefined;
-    }, ...(ngDevMode ? [{ debugName: "labelSignal" }] : /* istanbul ignore next */ []));
-    hintSignal = computed(() => this.props()?.hint, ...(ngDevMode ? [{ debugName: "hintSignal" }] : /* istanbul ignore next */ []));
-    multiSelectSignal = computed(() => this.props()?.multiSelect ?? true, ...(ngDevMode ? [{ debugName: "multiSelectSignal" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "labelSignal" }] : /* istanbul ignore next */ []));
+    hintSignal = computed(() => this.props()?.hint, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hintSignal" }] : /* istanbul ignore next */ []));
+    multiSelectSignal = computed(() => this.props()?.multiSelect ?? true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "multiSelectSignal" }] : /* istanbul ignore next */ []));
     isDisabled = dbxForgeFieldDisabled();
     readonlySignal = computed(() => {
         const fieldGetter = this.field();
         const fieldState = typeof fieldGetter === 'function' ? fieldGetter() : undefined;
         return fieldState?.readonly?.() ?? false;
-    }, ...(ngDevMode ? [{ debugName: "readonlySignal" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "readonlySignal" }] : /* istanbul ignore next */ []));
     isDisabledOrReadonlySignal = computed(() => {
         const readonly = this.readonlySignal();
         return this.isDisabled() || readonly;
-    }, ...(ngDevMode ? [{ debugName: "isDisabledOrReadonlySignal" }] : /* istanbul ignore next */ []));
-    showSelectAllButtonSignal = computed(() => this.props()?.showSelectAllButton ?? false, ...(ngDevMode ? [{ debugName: "showSelectAllButtonSignal" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isDisabledOrReadonlySignal" }] : /* istanbul ignore next */ []));
+    showSelectAllButtonSignal = computed(() => this.props()?.showSelectAllButton ?? false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showSelectAllButtonSignal" }] : /* istanbul ignore next */ []));
     showTextFilterSignal = computed(() => {
         const props = this.props();
         return this.props()?.showTextFilter ?? Boolean(props?.filterValues);
-    }, ...(ngDevMode ? [{ debugName: "showTextFilterSignal" }] : /* istanbul ignore next */ []));
-    filterLabelSignal = computed(() => this.props()?.filterLabel, ...(ngDevMode ? [{ debugName: "filterLabelSignal" }] : /* istanbul ignore next */ []));
-    footerConfigSignal = computed(() => this.props()?.footerConfig, ...(ngDevMode ? [{ debugName: "footerConfigSignal" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showTextFilterSignal" }] : /* istanbul ignore next */ []));
+    filterLabelSignal = computed(() => this.props()?.filterLabel, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "filterLabelSignal" }] : /* istanbul ignore next */ []));
+    footerConfigSignal = computed(() => this.props()?.footerConfig, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "footerConfigSignal" }] : /* istanbul ignore next */ []));
     // Error handling
     resolvedErrors = createResolvedErrorsSignal(this.field, this.validationMessages, this.defaultValidationMessages);
     showErrors = shouldShowErrors(this.field);
-    errorsToDisplaySignal = computed(() => (this.showErrors() ? this.resolvedErrors() : []), ...(ngDevMode ? [{ debugName: "errorsToDisplaySignal" }] : /* istanbul ignore next */ []));
+    errorsToDisplaySignal = computed(() => (this.showErrors() ? this.resolvedErrors() : []), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "errorsToDisplaySignal" }] : /* istanbul ignore next */ []));
     // ARIA
-    hintIdSignal = computed(() => `${this.key()}-hint`, ...(ngDevMode ? [{ debugName: "hintIdSignal" }] : /* istanbul ignore next */ []));
-    errorIdSignal = computed(() => `${this.key()}-error`, ...(ngDevMode ? [{ debugName: "errorIdSignal" }] : /* istanbul ignore next */ []));
-    ariaInvalidSignal = computed(() => (this.showErrors() ? 'true' : null), ...(ngDevMode ? [{ debugName: "ariaInvalidSignal" }] : /* istanbul ignore next */ []));
-    ariaRequiredSignal = computed(() => (this.field()().required() ? 'true' : null), ...(ngDevMode ? [{ debugName: "ariaRequiredSignal" }] : /* istanbul ignore next */ []));
+    hintIdSignal = computed(() => `${this.key()}-hint`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hintIdSignal" }] : /* istanbul ignore next */ []));
+    errorIdSignal = computed(() => `${this.key()}-error`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "errorIdSignal" }] : /* istanbul ignore next */ []));
+    ariaInvalidSignal = computed(() => (this.showErrors() ? 'true' : null), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaInvalidSignal" }] : /* istanbul ignore next */ []));
+    ariaRequiredSignal = computed(() => (this.field()().required() ? 'true' : null), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaRequiredSignal" }] : /* istanbul ignore next */ []));
     ariaDescribedBySignal = computed(() => {
         const errorId = this.errorIdSignal();
         const props = this.props();
@@ -7838,7 +8062,8 @@ class AbstractForgePickableItemFieldDirective {
             result = hintId;
         }
         return result;
-    }, ...(ngDevMode ? [{ debugName: "ariaDescribedBySignal" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaDescribedBySignal" }] : /* istanbul ignore next */ []));
     get _pickOnlyOne() {
         const p = this.props();
         const asArrayValue = p?.asArrayValue ?? true;
@@ -7899,7 +8124,8 @@ class AbstractForgePickableItemFieldDirective {
     allSelectedSignal = computed(() => {
         const items = this.itemsSignal();
         return items.length > 0 && items.every((x) => x.selected);
-    }, ...(ngDevMode ? [{ debugName: "allSelectedSignal" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "allSelectedSignal" }] : /* istanbul ignore next */ []));
     // Sync field value to _valuesSubject
     _syncFieldValueEffect = effect(() => {
         const fieldGetter = this.field();
@@ -7910,7 +8136,8 @@ class AbstractForgePickableItemFieldDirective {
         // otherwise show up as a phantom selection when the user picks an item.
         const values = filterEmptyArrayValues(convertMaybeToArray(fieldValue));
         this._valuesSubject.next(values);
-    }, ...(ngDevMode ? [{ debugName: "_syncFieldValueEffect" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_syncFieldValueEffect" }] : /* istanbul ignore next */ []));
     // MARK: Lifecycle
     ngOnInit() {
         const p = this.props();
@@ -8010,10 +8237,10 @@ class AbstractForgePickableItemFieldDirective {
             return of(hasDisplay.map((x) => x[3]));
         }));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: AbstractForgePickableItemFieldDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.11", 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: "22.1.4", ngImport: i0, type: AbstractForgePickableItemFieldDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.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 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: AbstractForgePickableItemFieldDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", 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 }] }] } });
 
@@ -8102,12 +8329,12 @@ class DbxForgePickableChipFieldComponent extends AbstractForgePickableItemFieldD
             this._setValues(allValues);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxForgePickableChipFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", 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]=\"!isDisabledOrReadonlySignal()\" [disabled]=\"isDisabledOrReadonlySignal()\" [attr.aria-invalid]=\"ariaInvalidSignal()\" [attr.aria-describedby]=\"ariaDescribedBySignal()\">\n      @if (showSelectAllButtonSignal() && multiSelectSignal() && !isDisabledOrReadonlySignal()) {\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    <output class=\"dbx-label\">No items match this filter.</output>\n  }\n</div>\n", dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$4.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$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "directive", type: i3$1.MatChipAvatar, selector: "mat-chip-avatar, [matChipAvatar]" }, { kind: "component", type: i3$1.MatChipListbox, selector: "mat-chip-listbox", inputs: ["multiple", "aria-orientation", "selectable", "compareWith", "required", "hideSingleSelectionIndicator", "value"], outputs: ["change"] }, { kind: "component", type: i3$1.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$3.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: "22.1.4", ngImport: i0, type: DbxForgePickableChipFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.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]=\"!isDisabledOrReadonlySignal()\" [disabled]=\"isDisabledOrReadonlySignal()\" [attr.aria-invalid]=\"ariaInvalidSignal()\" [attr.aria-describedby]=\"ariaDescribedBySignal()\">\n      @if (showSelectAllButtonSignal() && multiSelectSignal() && !isDisabledOrReadonlySignal()) {\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    <output class=\"dbx-label\">No items match this filter.</output>\n  }\n</div>\n", dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$4.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "directive", type: i3$1.MatChipAvatar, selector: "mat-chip-avatar, [matChipAvatar]" }, { kind: "component", type: i3$1.MatChipListbox, selector: "mat-chip-listbox", inputs: ["multiple", "aria-orientation", "selectable", "compareWith", "required", "hideSingleSelectionIndicator", "value"], outputs: ["change"] }, { kind: "component", type: i3$1.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$3.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"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxForgePickableChipFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", 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]=\"!isDisabledOrReadonlySignal()\" [disabled]=\"isDisabledOrReadonlySignal()\" [attr.aria-invalid]=\"ariaInvalidSignal()\" [attr.aria-describedby]=\"ariaDescribedBySignal()\">\n      @if (showSelectAllButtonSignal() && multiSelectSignal() && !isDisabledOrReadonlySignal()) {\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    <output class=\"dbx-label\">No items match this filter.</output>\n  }\n</div>\n" }]
+            args: [{ selector: 'dbx-forge-pickable-chip-field', imports: [ReactiveFormsModule, MatChipsModule, MatIconModule, MatDivider, DbxInjectionComponent], 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]=\"!isDisabledOrReadonlySignal()\" [disabled]=\"isDisabledOrReadonlySignal()\" [attr.aria-invalid]=\"ariaInvalidSignal()\" [attr.aria-describedby]=\"ariaDescribedBySignal()\">\n      @if (showSelectAllButtonSignal() && multiSelectSignal() && !isDisabledOrReadonlySignal()) {\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    <output class=\"dbx-label\">No items match this filter.</output>\n  }\n</div>\n" }]
         }], ctorParameters: () => [] });
 
 var pickableChip_field_component = /*#__PURE__*/Object.freeze({
@@ -8142,12 +8369,12 @@ class DbxForgePickableListFieldComponent extends AbstractForgePickableItemFieldD
             this._setValues(allValues);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxForgePickableListFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", 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() && !isDisabledOrReadonlySignal()) {\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]=\"isDisabledOrReadonlySignal()\" (selectionChange)=\"onSelectionChange($event)\" [attr.aria-invalid]=\"ariaInvalidSignal()\" [attr.aria-describedby]=\"ariaDescribedBySignal()\">\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    <output class=\"dbx-label\">No items match this filter.</output>\n  }\n</div>\n", dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$4.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$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatListModule }, { kind: "component", type: i2$2.MatSelectionList, selector: "mat-selection-list", inputs: ["color", "compareWith", "multiple", "hideSingleSelectionIndicator", "disabled"], outputs: ["selectionChange"], exportAs: ["matSelectionList"] }, { kind: "component", type: i2$2.MatListOption, selector: "mat-list-option", inputs: ["togglePosition", "checkboxPosition", "color", "value", "selected"], outputs: ["selectedChange"], exportAs: ["matListOption"] }, { kind: "directive", type: i2$2.MatListItemIcon, selector: "[matListItemIcon]" }, { kind: "component", type: i7.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$3.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: "22.1.4", ngImport: i0, type: DbxForgePickableListFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.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() && !isDisabledOrReadonlySignal()) {\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]=\"isDisabledOrReadonlySignal()\" (selectionChange)=\"onSelectionChange($event)\" [attr.aria-invalid]=\"ariaInvalidSignal()\" [attr.aria-describedby]=\"ariaDescribedBySignal()\">\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    <output class=\"dbx-label\">No items match this filter.</output>\n  }\n</div>\n", dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$4.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatListModule }, { kind: "component", type: i2$2.MatSelectionList, selector: "mat-selection-list", inputs: ["color", "compareWith", "multiple", "hideSingleSelectionIndicator", "disabled"], outputs: ["selectionChange"], exportAs: ["matSelectionList"] }, { kind: "component", type: i2$2.MatListOption, selector: "mat-list-option", inputs: ["togglePosition", "color", "value", "selected"], outputs: ["selectedChange"], exportAs: ["matListOption"] }, { kind: "directive", type: i2$2.MatListItemIcon, selector: "[matListItemIcon]" }, { kind: "component", type: i7.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$3.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"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxForgePickableListFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", 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() && !isDisabledOrReadonlySignal()) {\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]=\"isDisabledOrReadonlySignal()\" (selectionChange)=\"onSelectionChange($event)\" [attr.aria-invalid]=\"ariaInvalidSignal()\" [attr.aria-describedby]=\"ariaDescribedBySignal()\">\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    <output class=\"dbx-label\">No items match this filter.</output>\n  }\n</div>\n" }]
+            args: [{ selector: 'dbx-forge-pickable-list-field', imports: [ReactiveFormsModule, MatListModule, MatIconModule, MatDivider, DbxInjectionComponent], 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() && !isDisabledOrReadonlySignal()) {\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]=\"isDisabledOrReadonlySignal()\" (selectionChange)=\"onSelectionChange($event)\" [attr.aria-invalid]=\"ariaInvalidSignal()\" [attr.aria-describedby]=\"ariaDescribedBySignal()\">\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    <output class=\"dbx-label\">No items match this filter.</output>\n  }\n</div>\n" }]
         }], ctorParameters: () => [] });
 
 var pickableList_field_component = /*#__PURE__*/Object.freeze({
@@ -8208,16 +8435,26 @@ class DbxForgeSourceSelectFieldComponent {
     materialConfig = inject(MATERIAL_CONFIG, { optional: true });
     elementRef = inject((ElementRef));
     // ng-forge ValueFieldComponent inputs
-    field = input.required(...(ngDevMode ? [{ debugName: "field" }] : /* istanbul ignore next */ []));
-    key = input.required(...(ngDevMode ? [{ debugName: "key" }] : /* istanbul ignore next */ []));
-    label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : /* istanbul ignore next */ []));
-    placeholder = input(...(ngDevMode ? [undefined, { debugName: "placeholder" }] : /* istanbul ignore next */ []));
-    className = input('', ...(ngDevMode ? [{ debugName: "className" }] : /* istanbul ignore next */ []));
-    tabIndex = input(...(ngDevMode ? [undefined, { debugName: "tabIndex" }] : /* istanbul ignore next */ []));
-    props = input(...(ngDevMode ? [undefined, { debugName: "props" }] : /* istanbul ignore next */ []));
-    meta = input(...(ngDevMode ? [undefined, { debugName: "meta" }] : /* istanbul ignore next */ []));
-    validationMessages = input(...(ngDevMode ? [undefined, { debugName: "validationMessages" }] : /* istanbul ignore next */ []));
-    defaultValidationMessages = input(...(ngDevMode ? [undefined, { debugName: "defaultValidationMessages" }] : /* istanbul ignore next */ []));
+    field = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "field" }] : /* istanbul ignore next */ []));
+    key = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "key" }] : /* istanbul ignore next */ []));
+    label = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "label" }] : /* istanbul ignore next */ []));
+    placeholder = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    className = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "className" }] : /* istanbul ignore next */ []));
+    tabIndex = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "tabIndex" }] : /* istanbul ignore next */ []));
+    props = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "props" }] : /* istanbul ignore next */ []));
+    meta = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "meta" }] : /* istanbul ignore next */ []));
+    validationMessages = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "validationMessages" }] : /* istanbul ignore next */ []));
+    defaultValidationMessages = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "defaultValidationMessages" }] : /* istanbul ignore next */ []));
     // Disabled state
     isDisabled = dbxForgeFieldDisabled();
     _cacheMetaSub = cleanSubscription();
@@ -8231,19 +8468,27 @@ class DbxForgeSourceSelectFieldComponent {
     buttonElement = viewChild('button', { ...(ngDevMode ? { debugName: "buttonElement" } : /* istanbul ignore next */ {}), read: (ElementRef) });
     filterInputElement = viewChild('filterInput', { ...(ngDevMode ? { debugName: "filterInputElement" } : /* istanbul ignore next */ {}), read: (ElementRef) });
     // Computed signals from props
-    hintSignal = computed(() => this.props()?.hint, ...(ngDevMode ? [{ debugName: "hintSignal" }] : /* istanbul ignore next */ []));
+    hintSignal = computed(() => this.props()?.hint, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hintSignal" }] : /* istanbul ignore next */ []));
     // Material config
-    effectiveAppearanceSignal = computed(() => this.materialConfig?.appearance ?? 'outline', ...(ngDevMode ? [{ debugName: "effectiveAppearanceSignal" }] : /* istanbul ignore next */ []));
-    effectiveSubscriptSizingSignal = computed(() => this.materialConfig?.subscriptSizing ?? 'dynamic', ...(ngDevMode ? [{ debugName: "effectiveSubscriptSizingSignal" }] : /* istanbul ignore next */ []));
+    effectiveAppearanceSignal = computed(() => this.materialConfig?.appearance ?? 'outline', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "effectiveAppearanceSignal" }] : /* istanbul ignore next */ []));
+    effectiveSubscriptSizingSignal = computed(() => this.materialConfig?.subscriptSizing ?? 'dynamic', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "effectiveSubscriptSizingSignal" }] : /* istanbul ignore next */ []));
     // Error handling
     resolvedErrors = createResolvedErrorsSignal(this.field, this.validationMessages, this.defaultValidationMessages);
     showErrors = shouldShowErrors(this.field);
-    errorsToDisplaySignal = computed(() => (this.showErrors() ? this.resolvedErrors() : []), ...(ngDevMode ? [{ debugName: "errorsToDisplaySignal" }] : /* istanbul ignore next */ []));
+    errorsToDisplaySignal = computed(() => (this.showErrors() ? this.resolvedErrors() : []), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "errorsToDisplaySignal" }] : /* istanbul ignore next */ []));
     // ARIA
-    hintIdSignal = computed(() => `${this.key()}-hint`, ...(ngDevMode ? [{ debugName: "hintIdSignal" }] : /* istanbul ignore next */ []));
-    errorIdSignal = computed(() => `${this.key()}-error`, ...(ngDevMode ? [{ debugName: "errorIdSignal" }] : /* istanbul ignore next */ []));
-    ariaInvalidSignal = computed(() => (this.showErrors() ? 'true' : null), ...(ngDevMode ? [{ debugName: "ariaInvalidSignal" }] : /* istanbul ignore next */ []));
-    ariaRequiredSignal = computed(() => (this.field()().required() ? 'true' : null), ...(ngDevMode ? [{ debugName: "ariaRequiredSignal" }] : /* istanbul ignore next */ []));
+    hintIdSignal = computed(() => `${this.key()}-hint`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hintIdSignal" }] : /* istanbul ignore next */ []));
+    errorIdSignal = computed(() => `${this.key()}-error`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "errorIdSignal" }] : /* istanbul ignore next */ []));
+    ariaInvalidSignal = computed(() => (this.showErrors() ? 'true' : null), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaInvalidSignal" }] : /* istanbul ignore next */ []));
+    ariaRequiredSignal = computed(() => (this.field()().required() ? 'true' : null), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaRequiredSignal" }] : /* istanbul ignore next */ []));
     ariaDescribedBySignal = computed(() => {
         const errorId = this.errorIdSignal();
         const hintId = this.hintIdSignal();
@@ -8252,13 +8497,20 @@ class DbxForgeSourceSelectFieldComponent {
         if (this.props()?.hint)
             return hintId;
         return null;
-    }, ...(ngDevMode ? [{ debugName: "ariaDescribedBySignal" }] : /* istanbul ignore next */ []));
-    multipleSignal = computed(() => this.props()?.multiple ?? false, ...(ngDevMode ? [{ debugName: "multipleSignal" }] : /* istanbul ignore next */ []));
-    showOpenSourceButtonSignal = computed(() => Boolean(this.props()?.openSource), ...(ngDevMode ? [{ debugName: "showOpenSourceButtonSignal" }] : /* istanbul ignore next */ []));
-    selectButtonIconSignal = computed(() => this.props()?.selectButtonIcon ?? 'add', ...(ngDevMode ? [{ debugName: "selectButtonIconSignal" }] : /* istanbul ignore next */ []));
-    filterableSignal = computed(() => this.props()?.filterable !== false, ...(ngDevMode ? [{ debugName: "filterableSignal" }] : /* istanbul ignore next */ []));
-    filterableGroupsSignal = computed(() => this.props()?.filterableGroups !== false, ...(ngDevMode ? [{ debugName: "filterableGroupsSignal" }] : /* istanbul ignore next */ []));
-    selectPanelClassSignal = computed(() => (this.filterableSignal() ? 'dbx-source-select-filterable-panel' : ''), ...(ngDevMode ? [{ debugName: "selectPanelClassSignal" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaDescribedBySignal" }] : /* istanbul ignore next */ []));
+    multipleSignal = computed(() => this.props()?.multiple ?? false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "multipleSignal" }] : /* istanbul ignore next */ []));
+    showOpenSourceButtonSignal = computed(() => Boolean(this.props()?.openSource), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showOpenSourceButtonSignal" }] : /* istanbul ignore next */ []));
+    selectButtonIconSignal = computed(() => this.props()?.selectButtonIcon ?? 'add', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectButtonIconSignal" }] : /* istanbul ignore next */ []));
+    filterableSignal = computed(() => this.props()?.filterable !== false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "filterableSignal" }] : /* istanbul ignore next */ []));
+    filterableGroupsSignal = computed(() => this.props()?.filterableGroups !== false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "filterableGroupsSignal" }] : /* istanbul ignore next */ []));
+    selectPanelClassSignal = computed(() => (this.filterableSignal() ? 'dbx-source-select-filterable-panel' : ''), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectPanelClassSignal" }] : /* istanbul ignore next */ []));
     values$ = this._valuesSubject.asObservable().pipe(shareReplay(1));
     allValuesEverSelected$ = this.values$.pipe(scan((acc, values) => {
         let result = acc;
@@ -8374,7 +8626,8 @@ class DbxForgeSourceSelectFieldComponent {
         // ng-forge can seed the field with the empty-string primitive default; treat nullish/empty as unset.
         const values = filterEmptyArrayValues(fieldValue == null ? [] : convertMaybeToArray(fieldValue));
         this._valuesSubject.next(values);
-    }, ...(ngDevMode ? [{ debugName: "_syncFieldValueEffect" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_syncFieldValueEffect" }] : /* istanbul ignore next */ []));
     constructor() {
         setupMetaTracking(this.elementRef, this.meta, { selector: 'mat-select' });
     }
@@ -8529,17 +8782,17 @@ class DbxForgeSourceSelectFieldComponent {
             return of(hasDisplay.map((x) => x[3]));
         }));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxForgeSourceSelectFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", 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]=\"effectiveAppearanceSignal()\" [subscriptSizing]=\"effectiveSubscriptSizingSignal()\">\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]=\"ariaInvalidSignal()\" [attr.aria-required]=\"ariaRequiredSignal()\" [attr.aria-describedby]=\"ariaDescribedBySignal()\">\n    @if (filterableSignal()) {\n      <div class=\"dbx-source-select-filter-container\">\n        <input #filterInput class=\"dbx-forge-bare-input 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 (errorsToDisplaySignal()[0]; as error) {\n    <mat-error [id]=\"errorIdSignal()\">{{ error.message }}</mat-error>\n  } @else if (hintSignal()) {\n    <mat-hint [id]=\"hintIdSignal()\">{{ 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.DbxActionDirective, selector: "dbx-action,[dbxAction]", exportAs: ["action", "dbxAction"] }, { kind: "directive", type: i1.DbxActionHandlerDirective, selector: "[dbxActionHandler]", inputs: ["dbxActionHandler"] }, { kind: "directive", type: i1.DbxActionValueDirective, selector: "dbxActionValue,[dbxActionValue]", inputs: ["dbxActionValue"] }, { kind: "directive", type: i1.DbxActionButtonDirective, selector: "[dbxActionButton]", inputs: ["dbxActionButtonEcho"] }, { kind: "component", type: DbxLoadingComponent, selector: "dbx-loading", inputs: ["padding", "show", "text", "mode", "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: "22.1.4", ngImport: i0, type: DbxForgeSourceSelectFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.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]=\"effectiveAppearanceSignal()\" [subscriptSizing]=\"effectiveSubscriptSizingSignal()\">\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]=\"ariaInvalidSignal()\" [attr.aria-required]=\"ariaRequiredSignal()\" [attr.aria-describedby]=\"ariaDescribedBySignal()\">\n    @if (filterableSignal()) {\n      <div class=\"dbx-source-select-filter-container\">\n        <input #filterInput class=\"dbx-forge-bare-input 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\" dbxActionSnackbarError>\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 (errorsToDisplaySignal()[0]; as error) {\n    <mat-error [id]=\"errorIdSignal()\">{{ error.message }}</mat-error>\n  } @else if (hintSignal()) {\n    <mat-hint [id]=\"hintIdSignal()\">{{ hintSignal() }}</mat-hint>\n  }\n</mat-form-field>\n", dependencies: [{ kind: "directive", type: DbxActionSnackbarErrorDirective, selector: "[dbxActionSnackbarError]", inputs: ["dbxActionSnackbarError"] }, { 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", "customTextColor", "customSpinnerColor", "basic", "tonal", "raised", "stroked", "flat", "iconOnly", "fab", "customContent", "allowClickPropagation", "mode"] }, { kind: "ngmodule", type: DbxActionModule }, { kind: "directive", type: i1.DbxActionDirective, selector: "dbx-action,[dbxAction]", exportAs: ["action", "dbxAction"] }, { kind: "directive", type: i1.DbxActionHandlerDirective, selector: "[dbxActionHandler]", inputs: ["dbxActionHandler"] }, { kind: "directive", type: i1.DbxActionValueDirective, selector: "dbxActionValue,[dbxActionValue]", inputs: ["dbxActionValue"] }, { kind: "directive", type: i1.DbxActionButtonDirective, selector: "[dbxActionButton]", inputs: ["dbxActionButtonEcho"] }, { kind: "component", type: DbxLoadingComponent, selector: "dbx-loading", inputs: ["padding", "show", "text", "mode", "diameter", "linear", "loading", "error", "context"] }, { kind: "pipe", type: DynamicTextPipe, name: "dynamicText" }, { kind: "pipe", type: AsyncPipe, name: "async" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxForgeSourceSelectFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", 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: {
+            args: [{ selector: 'dbx-forge-source-select-field', imports: [DbxActionSnackbarErrorDirective, MatFormField, MatLabel, MatSelect, MatOption, MatOptgroup, MatHint, MatError, MatSuffix, FormField, DynamicTextPipe, AsyncPipe, DbxButtonComponent, DbxActionModule, DbxLoadingComponent], host: {
                         '[id]': '`${key()}`',
                         '[attr.data-testid]': 'key()',
                         '[class]': 'className()',
                         '[attr.hidden]': 'field()().hidden() || null'
-                    }, template: "@let f = field();\n@let selectId = key() + '-select';\n\n<mat-form-field class=\"dbx-w100\" [appearance]=\"effectiveAppearanceSignal()\" [subscriptSizing]=\"effectiveSubscriptSizingSignal()\">\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]=\"ariaInvalidSignal()\" [attr.aria-required]=\"ariaRequiredSignal()\" [attr.aria-describedby]=\"ariaDescribedBySignal()\">\n    @if (filterableSignal()) {\n      <div class=\"dbx-source-select-filter-container\">\n        <input #filterInput class=\"dbx-forge-bare-input 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 (errorsToDisplaySignal()[0]; as error) {\n    <mat-error [id]=\"errorIdSignal()\">{{ error.message }}</mat-error>\n  } @else if (hintSignal()) {\n    <mat-hint [id]=\"hintIdSignal()\">{{ hintSignal() }}</mat-hint>\n  }\n</mat-form-field>\n" }]
+                    }, template: "@let f = field();\n@let selectId = key() + '-select';\n\n<mat-form-field class=\"dbx-w100\" [appearance]=\"effectiveAppearanceSignal()\" [subscriptSizing]=\"effectiveSubscriptSizingSignal()\">\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]=\"ariaInvalidSignal()\" [attr.aria-required]=\"ariaRequiredSignal()\" [attr.aria-describedby]=\"ariaDescribedBySignal()\">\n    @if (filterableSignal()) {\n      <div class=\"dbx-source-select-filter-container\">\n        <input #filterInput class=\"dbx-forge-bare-input 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\" dbxActionSnackbarError>\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 (errorsToDisplaySignal()[0]; as error) {\n    <mat-error [id]=\"errorIdSignal()\">{{ error.message }}</mat-error>\n  } @else if (hintSignal()) {\n    <mat-hint [id]=\"hintIdSignal()\">{{ hintSignal() }}</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 }] }], buttonElement: [{ type: i0.ViewChild, args: ['button', { ...{ read: (ElementRef) }, isSignal: true }] }], filterInputElement: [{ type: i0.ViewChild, args: ['filterInput', { ...{ read: (ElementRef) }, isSignal: true }] }] } });
 
 var sourceselect_field_component = /*#__PURE__*/Object.freeze({
@@ -8595,16 +8848,26 @@ const dbxForgeListSelectionField = dbxForgeFieldFunction({
 class DbxForgeListSelectionFieldComponent {
     elementRef = inject((ElementRef));
     // ng-forge ValueFieldComponent inputs
-    field = input.required(...(ngDevMode ? [{ debugName: "field" }] : /* istanbul ignore next */ []));
-    key = input.required(...(ngDevMode ? [{ debugName: "key" }] : /* istanbul ignore next */ []));
-    label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : /* istanbul ignore next */ []));
-    placeholder = input(...(ngDevMode ? [undefined, { debugName: "placeholder" }] : /* istanbul ignore next */ []));
-    className = input('', ...(ngDevMode ? [{ debugName: "className" }] : /* istanbul ignore next */ []));
-    tabIndex = input(...(ngDevMode ? [undefined, { debugName: "tabIndex" }] : /* istanbul ignore next */ []));
-    props = input(...(ngDevMode ? [undefined, { debugName: "props" }] : /* istanbul ignore next */ []));
-    meta = input(...(ngDevMode ? [undefined, { debugName: "meta" }] : /* istanbul ignore next */ []));
-    validationMessages = input(...(ngDevMode ? [undefined, { debugName: "validationMessages" }] : /* istanbul ignore next */ []));
-    defaultValidationMessages = input(...(ngDevMode ? [undefined, { debugName: "defaultValidationMessages" }] : /* istanbul ignore next */ []));
+    field = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "field" }] : /* istanbul ignore next */ []));
+    key = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "key" }] : /* istanbul ignore next */ []));
+    label = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "label" }] : /* istanbul ignore next */ []));
+    placeholder = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    className = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "className" }] : /* istanbul ignore next */ []));
+    tabIndex = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "tabIndex" }] : /* istanbul ignore next */ []));
+    props = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "props" }] : /* istanbul ignore next */ []));
+    meta = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "meta" }] : /* istanbul ignore next */ []));
+    validationMessages = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "validationMessages" }] : /* istanbul ignore next */ []));
+    defaultValidationMessages = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "defaultValidationMessages" }] : /* istanbul ignore next */ []));
     // Disabled state
     isDisabled = dbxForgeFieldDisabled();
     isDisabled$ = toObservable(this.isDisabled);
@@ -8615,8 +8878,10 @@ class DbxForgeListSelectionFieldComponent {
     labelSignal = computed(() => {
         const l = this.label();
         return typeof l === 'string' ? l : undefined;
-    }, ...(ngDevMode ? [{ debugName: "labelSignal" }] : /* istanbul ignore next */ []));
-    hintSignal = computed(() => this.props()?.hint, ...(ngDevMode ? [{ debugName: "hintSignal" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "labelSignal" }] : /* istanbul ignore next */ []));
+    hintSignal = computed(() => this.props()?.hint, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hintSignal" }] : /* istanbul ignore next */ []));
     /**
      * Resolves the configured `maxHeight` prop into a CSS length string for the
      * `--dbx-forge-list-item-field-height` custom property. Returns `null` when
@@ -8634,15 +8899,20 @@ class DbxForgeListSelectionFieldComponent {
             return `${raw}px`;
         }
         return raw;
-    }, ...(ngDevMode ? [{ debugName: "maxHeightCssVarSignal" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "maxHeightCssVarSignal" }] : /* istanbul ignore next */ []));
     // Error handling
     resolvedErrors = createResolvedErrorsSignal(this.field, this.validationMessages, this.defaultValidationMessages);
     showErrors = shouldShowErrors(this.field);
-    errorsToDisplaySignal = computed(() => (this.showErrors() ? this.resolvedErrors() : []), ...(ngDevMode ? [{ debugName: "errorsToDisplaySignal" }] : /* istanbul ignore next */ []));
+    errorsToDisplaySignal = computed(() => (this.showErrors() ? this.resolvedErrors() : []), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "errorsToDisplaySignal" }] : /* istanbul ignore next */ []));
     // ARIA
-    hintIdSignal = computed(() => `${this.key()}-hint`, ...(ngDevMode ? [{ debugName: "hintIdSignal" }] : /* istanbul ignore next */ []));
-    errorIdSignal = computed(() => `${this.key()}-error`, ...(ngDevMode ? [{ debugName: "errorIdSignal" }] : /* istanbul ignore next */ []));
-    ariaInvalidSignal = computed(() => (this.showErrors() ? 'true' : null), ...(ngDevMode ? [{ debugName: "ariaInvalidSignal" }] : /* istanbul ignore next */ []));
+    hintIdSignal = computed(() => `${this.key()}-hint`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hintIdSignal" }] : /* istanbul ignore next */ []));
+    errorIdSignal = computed(() => `${this.key()}-error`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "errorIdSignal" }] : /* istanbul ignore next */ []));
+    ariaInvalidSignal = computed(() => (this.showErrors() ? 'true' : null), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaInvalidSignal" }] : /* istanbul ignore next */ []));
     ariaDescribedBySignal = computed(() => {
         const errorId = this.errorIdSignal();
         const hintId = this.hintIdSignal();
@@ -8651,7 +8921,8 @@ class DbxForgeListSelectionFieldComponent {
         if (this.props()?.hint)
             return hintId;
         return null;
-    }, ...(ngDevMode ? [{ debugName: "ariaDescribedBySignal" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaDescribedBySignal" }] : /* istanbul ignore next */ []));
     listComponentClass$ = this._listComponentClassObs.pipe(switchMapFilterMaybe());
     config$ = this.listComponentClass$.pipe(map((componentClass) => {
         const p = this.props();
@@ -8731,12 +9002,12 @@ class DbxForgeListSelectionFieldComponent {
             fieldState.value.set(values);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxForgeListSelectionFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.11", 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()\" [style.--dbx-forge-list-item-field-height]=\"maxHeightCssVarSignal()\" dbxListItemModifier [dbxListItemIsSelectedModifier]=\"isSelectedModifierFunctionSignal()\" [attr.aria-invalid]=\"ariaInvalidSignal()\">\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$1.DbxValueListItemModifierDirective, selector: "dbxListItemModifier,[dbxListItemModifier]", inputs: ["dbxListItemModifier"] }, { kind: "directive", type: i1$1.DbxListItemIsSelectedModifierDirective, selector: "dbxListItemIsSelectedModifier,[dbxListItemIsSelectedModifier]", inputs: ["dbxListItemIsSelectedModifier"] }, { kind: "component", type: DbxInjectionComponent, selector: "dbx-injection, [dbxInjection], [dbx-injection]", inputs: ["config", "template"] }, { kind: "ngmodule", type: MatDividerModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: DbxForgeListSelectionFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.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()\" [style.--dbx-forge-list-item-field-height]=\"maxHeightCssVarSignal()\" dbxListItemModifier [dbxListItemIsSelectedModifier]=\"isSelectedModifierFunctionSignal()\" [attr.aria-invalid]=\"ariaInvalidSignal()\">\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$1.DbxValueListItemModifierDirective, selector: "dbxListItemModifier,[dbxListItemModifier]", inputs: ["dbxListItemModifier"] }, { kind: "directive", type: i1$1.DbxListItemIsSelectedModifierDirective, selector: "dbxListItemIsSelectedModifier,[dbxListItemIsSelectedModifier]", inputs: ["dbxListItemIsSelectedModifier"] }, { kind: "component", type: DbxInjectionComponent, selector: "dbx-injection, [dbxInjection], [dbx-injection]", inputs: ["config", "template"] }, { kind: "ngmodule", type: MatDividerModule }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxForgeListSelectionFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", 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()\" [style.--dbx-forge-list-item-field-height]=\"maxHeightCssVarSignal()\" dbxListItemModifier [dbxListItemIsSelectedModifier]=\"isSelectedModifierFunctionSignal()\" [attr.aria-invalid]=\"ariaInvalidSignal()\">\n  <div class=\"dbx-forge-list-item-field-content\">\n    <dbx-injection [config]=\"configSignal()\"></dbx-injection>\n  </div>\n</div>\n" }]
+            args: [{ selector: 'dbx-forge-list-selection-field', imports: [DbxListModifierModule, DbxInjectionComponent, MatDividerModule], template: "<div class=\"dbx-forge-list-item-field\" [class.dbx-forge-list-field-disabled]=\"isDisabled()\" [style.--dbx-forge-list-item-field-height]=\"maxHeightCssVarSignal()\" dbxListItemModifier [dbxListItemIsSelectedModifier]=\"isSelectedModifierFunctionSignal()\" [attr.aria-invalid]=\"ariaInvalidSignal()\">\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 }] }] } });
 
 var list_field_component = /*#__PURE__*/Object.freeze({
@@ -8785,34 +9056,46 @@ const FORGE_COMPONENT_FIELD_TYPE = 'dbx-component';
 class DbxForgeComponentFieldComponent {
     elementRef = inject((ElementRef));
     // ng-forge ValueFieldComponent inputs
-    field = input.required(...(ngDevMode ? [{ debugName: "field" }] : /* istanbul ignore next */ []));
-    key = input.required(...(ngDevMode ? [{ debugName: "key" }] : /* istanbul ignore next */ []));
-    label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : /* istanbul ignore next */ []));
-    placeholder = input(...(ngDevMode ? [undefined, { debugName: "placeholder" }] : /* istanbul ignore next */ []));
-    className = input('', ...(ngDevMode ? [{ debugName: "className" }] : /* istanbul ignore next */ []));
-    tabIndex = input(...(ngDevMode ? [undefined, { debugName: "tabIndex" }] : /* istanbul ignore next */ []));
-    props = input(...(ngDevMode ? [undefined, { debugName: "props" }] : /* istanbul ignore next */ []));
-    meta = input(...(ngDevMode ? [undefined, { debugName: "meta" }] : /* istanbul ignore next */ []));
-    validationMessages = input(...(ngDevMode ? [undefined, { debugName: "validationMessages" }] : /* istanbul ignore next */ []));
-    defaultValidationMessages = input(...(ngDevMode ? [undefined, { debugName: "defaultValidationMessages" }] : /* istanbul ignore next */ []));
+    field = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "field" }] : /* istanbul ignore next */ []));
+    key = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "key" }] : /* istanbul ignore next */ []));
+    label = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "label" }] : /* istanbul ignore next */ []));
+    placeholder = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    className = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "className" }] : /* istanbul ignore next */ []));
+    tabIndex = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "tabIndex" }] : /* istanbul ignore next */ []));
+    props = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "props" }] : /* istanbul ignore next */ []));
+    meta = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "meta" }] : /* istanbul ignore next */ []));
+    validationMessages = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "validationMessages" }] : /* istanbul ignore next */ []));
+    defaultValidationMessages = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "defaultValidationMessages" }] : /* istanbul ignore next */ []));
     // Disabled state
     isDisabled = dbxForgeFieldDisabled();
     showDisabledStateSignal = computed(() => {
         const props = this.props();
         return this.isDisabled() && (props?.allowDisabledEffects ?? true);
-    }, ...(ngDevMode ? [{ debugName: "showDisabledStateSignal" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showDisabledStateSignal" }] : /* istanbul ignore next */ []));
     constructor() {
         setupMetaTracking(this.elementRef, this.meta, { selector: 'dbx-injection' });
     }
     configSignal = computed(() => {
         return this.props()?.componentField;
-    }, ...(ngDevMode ? [{ debugName: "configSignal" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxForgeComponentFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.11", 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": "showDisabledStateSignal()" } }, ngImport: i0, template: `
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "configSignal" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: DbxForgeComponentFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.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": "showDisabledStateSignal()" } }, 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 });
+  `, isInline: true, dependencies: [{ kind: "component", type: DbxInjectionComponent, selector: "dbx-injection, [dbxInjection], [dbx-injection]", inputs: ["config", "template"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxForgeComponentFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: DbxForgeComponentFieldComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'dbx-forge-component-field',
@@ -8820,8 +9103,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
     <div class="dbx-form-component" dbx-injection [config]="configSignal()"></div>
   `,
                     imports: [DbxInjectionComponent],
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    standalone: true,
                     host: {
                         '[class]': 'className()',
                         '[class.dbx-forge-disabled]': 'showDisabledStateSignal()'
@@ -8893,16 +9174,26 @@ class DbxForgeTextEditorFieldComponent {
     _compactContextStore = inject(CompactContextStore, { optional: true });
     elementRef = inject((ElementRef));
     // ng-forge ValueFieldComponent inputs
-    field = input.required(...(ngDevMode ? [{ debugName: "field" }] : /* istanbul ignore next */ []));
-    key = input.required(...(ngDevMode ? [{ debugName: "key" }] : /* istanbul ignore next */ []));
-    label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : /* istanbul ignore next */ []));
-    placeholder = input(...(ngDevMode ? [undefined, { debugName: "placeholder" }] : /* istanbul ignore next */ []));
-    className = input('', ...(ngDevMode ? [{ debugName: "className" }] : /* istanbul ignore next */ []));
-    tabIndex = input(...(ngDevMode ? [undefined, { debugName: "tabIndex" }] : /* istanbul ignore next */ []));
-    props = input(...(ngDevMode ? [undefined, { debugName: "props" }] : /* istanbul ignore next */ []));
-    meta = input(...(ngDevMode ? [undefined, { debugName: "meta" }] : /* istanbul ignore next */ []));
-    validationMessages = input(...(ngDevMode ? [undefined, { debugName: "validationMessages" }] : /* istanbul ignore next */ []));
-    defaultValidationMessages = input(...(ngDevMode ? [undefined, { debugName: "defaultValidationMessages" }] : /* istanbul ignore next */ []));
+    field = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "field" }] : /* istanbul ignore next */ []));
+    key = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "key" }] : /* istanbul ignore next */ []));
+    label = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "label" }] : /* istanbul ignore next */ []));
+    placeholder = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    className = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "className" }] : /* istanbul ignore next */ []));
+    tabIndex = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "tabIndex" }] : /* istanbul ignore next */ []));
+    props = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "props" }] : /* istanbul ignore next */ []));
+    meta = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "meta" }] : /* istanbul ignore next */ []));
+    validationMessages = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "validationMessages" }] : /* istanbul ignore next */ []));
+    defaultValidationMessages = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "defaultValidationMessages" }] : /* istanbul ignore next */ []));
     _editor;
     _editorValueSub = cleanSubscription();
     _syncFromFieldSub = cleanSubscription();
@@ -8916,20 +9207,27 @@ class DbxForgeTextEditorFieldComponent {
     labelSignal = computed(() => {
         const l = this.label();
         return typeof l === 'string' ? l : undefined;
-    }, ...(ngDevMode ? [{ debugName: "labelSignal" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "labelSignal" }] : /* istanbul ignore next */ []));
     placeholderSignal = computed(() => {
         const p = this.placeholder();
         return typeof p === 'string' ? p : '';
-    }, ...(ngDevMode ? [{ debugName: "placeholderSignal" }] : /* istanbul ignore next */ []));
-    descriptionSignal = computed(() => this.props()?.hint, ...(ngDevMode ? [{ debugName: "descriptionSignal" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "placeholderSignal" }] : /* istanbul ignore next */ []));
+    descriptionSignal = computed(() => this.props()?.hint, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "descriptionSignal" }] : /* istanbul ignore next */ []));
     // Error handling
     resolvedErrors = createResolvedErrorsSignal(this.field, this.validationMessages, this.defaultValidationMessages);
     showErrors = shouldShowErrors(this.field);
-    errorsToDisplaySignal = computed(() => (this.showErrors() ? this.resolvedErrors() : []), ...(ngDevMode ? [{ debugName: "errorsToDisplaySignal" }] : /* istanbul ignore next */ []));
+    errorsToDisplaySignal = computed(() => (this.showErrors() ? this.resolvedErrors() : []), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "errorsToDisplaySignal" }] : /* istanbul ignore next */ []));
     // ARIA
-    hintIdSignal = computed(() => `${this.key()}-hint`, ...(ngDevMode ? [{ debugName: "hintIdSignal" }] : /* istanbul ignore next */ []));
-    errorIdSignal = computed(() => `${this.key()}-error`, ...(ngDevMode ? [{ debugName: "errorIdSignal" }] : /* istanbul ignore next */ []));
-    ariaInvalidSignal = computed(() => (this.showErrors() ? 'true' : null), ...(ngDevMode ? [{ debugName: "ariaInvalidSignal" }] : /* istanbul ignore next */ []));
+    hintIdSignal = computed(() => `${this.key()}-hint`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hintIdSignal" }] : /* istanbul ignore next */ []));
+    errorIdSignal = computed(() => `${this.key()}-error`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "errorIdSignal" }] : /* istanbul ignore next */ []));
+    ariaInvalidSignal = computed(() => (this.showErrors() ? 'true' : null), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaInvalidSignal" }] : /* istanbul ignore next */ []));
     ariaDescribedBySignal = computed(() => {
         const errorId = this.errorIdSignal();
         const hintId = this.hintIdSignal();
@@ -8938,7 +9236,8 @@ class DbxForgeTextEditorFieldComponent {
         if (this.props()?.hint)
             return hintId;
         return null;
-    }, ...(ngDevMode ? [{ debugName: "ariaDescribedBySignal" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaDescribedBySignal" }] : /* istanbul ignore next */ []));
     constructor() {
         setupMetaTracking(this.elementRef, this.meta, { selector: 'ngx-editor' });
     }
@@ -8949,7 +9248,8 @@ class DbxForgeTextEditorFieldComponent {
     _disabledEffect = effect(() => {
         const disabled = this.isDisabled();
         toggleDisableFormControl(this.editorFormControl, disabled);
-    }, ...(ngDevMode ? [{ debugName: "_disabledEffect" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_disabledEffect" }] : /* istanbul ignore next */ []));
     _syncFieldToEditor = effect(() => {
         const fieldSignal = this.field();
         const node = fieldSignal ? fieldSignal() : undefined;
@@ -8957,7 +9257,8 @@ class DbxForgeTextEditorFieldComponent {
         if (fieldValue !== undefined && fieldValue !== this.editorFormControl.value) {
             this.editorFormControl.setValue(fieldValue ?? '', { emitEvent: false });
         }
-    }, ...(ngDevMode ? [{ debugName: "_syncFieldToEditor" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_syncFieldToEditor" }] : /* istanbul ignore next */ []));
     ngOnInit() {
         this._editor = new Editor({});
         // Watch for FormControl value changes (updated by ngx-editor's formControl binding)
@@ -8982,12 +9283,12 @@ class DbxForgeTextEditorFieldComponent {
             node.value.set(value);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxForgeTextEditorFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", 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-content\">\n    <div class=\"dbx-texteditor-field-input\">\n      <ngx-editor [editor]=\"editor\" outputFormat=\"html\" [placeholder]=\"placeholderSignal()\" [formControl]=\"editorFormControl\" [attr.aria-invalid]=\"ariaInvalidSignal()\" [attr.aria-describedby]=\"ariaDescribedBySignal()\"></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  </div>\n  @if (errorsToDisplaySignal()[0]; as error) {\n    <div class=\"dbx-form-description dbx-form-error\" [id]=\"errorIdSignal()\">{{ error.message }}</div>\n  } @else if (descriptionSignal()) {\n    <div class=\"dbx-form-description\" [id]=\"hintIdSignal()\">{{ descriptionSignal() }}</div>\n  }\n</div>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: NgxEditorModule }, { kind: "component", type: i1$5.NgxEditorComponent, selector: "ngx-editor", inputs: ["editor", "outputFormat", "placeholder"], outputs: ["focusOut", "focusIn"] }, { kind: "component", type: i1$5.NgxEditorMenuComponent, selector: "ngx-editor-menu", inputs: ["toolbar", "colorPresets", "disabled", "editor", "customMenuRef", "dropdownPlacement"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: DbxForgeTextEditorFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.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-content\">\n    <div class=\"dbx-texteditor-field-input\">\n      <ngx-editor [editor]=\"editor\" outputFormat=\"html\" [placeholder]=\"placeholderSignal()\" [formControl]=\"editorFormControl\" [attr.aria-invalid]=\"ariaInvalidSignal()\" [attr.aria-describedby]=\"ariaDescribedBySignal()\"></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  </div>\n  @if (errorsToDisplaySignal()[0]; as error) {\n    <div class=\"dbx-form-description dbx-form-error\" [id]=\"errorIdSignal()\">{{ error.message }}</div>\n  } @else if (descriptionSignal()) {\n    <div class=\"dbx-form-description\" [id]=\"hintIdSignal()\">{{ descriptionSignal() }}</div>\n  }\n</div>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: NgxEditorModule }, { kind: "component", type: i1$5.NgxEditorComponent, selector: "ngx-editor", inputs: ["editor", "outputFormat", "placeholder"], outputs: ["focusOut", "focusIn"] }, { kind: "component", type: i1$5.NgxEditorMenuComponent, selector: "ngx-editor-menu", inputs: ["toolbar", "colorPresets", "disabled", "editor", "customMenuRef", "dropdownPlacement"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxForgeTextEditorFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", 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-content\">\n    <div class=\"dbx-texteditor-field-input\">\n      <ngx-editor [editor]=\"editor\" outputFormat=\"html\" [placeholder]=\"placeholderSignal()\" [formControl]=\"editorFormControl\" [attr.aria-invalid]=\"ariaInvalidSignal()\" [attr.aria-describedby]=\"ariaDescribedBySignal()\"></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  </div>\n  @if (errorsToDisplaySignal()[0]; as error) {\n    <div class=\"dbx-form-description dbx-form-error\" [id]=\"errorIdSignal()\">{{ error.message }}</div>\n  } @else if (descriptionSignal()) {\n    <div class=\"dbx-form-description\" [id]=\"hintIdSignal()\">{{ descriptionSignal() }}</div>\n  }\n</div>\n" }]
+            args: [{ selector: 'dbx-forge-texteditor-field', imports: [NgClass, NgxEditorModule, FormsModule, ReactiveFormsModule], 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-content\">\n    <div class=\"dbx-texteditor-field-input\">\n      <ngx-editor [editor]=\"editor\" outputFormat=\"html\" [placeholder]=\"placeholderSignal()\" [formControl]=\"editorFormControl\" [attr.aria-invalid]=\"ariaInvalidSignal()\" [attr.aria-describedby]=\"ariaDescribedBySignal()\"></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  </div>\n  @if (errorsToDisplaySignal()[0]; as error) {\n    <div class=\"dbx-form-description dbx-form-error\" [id]=\"errorIdSignal()\">{{ error.message }}</div>\n  } @else if (descriptionSignal()) {\n    <div class=\"dbx-form-description\" [id]=\"hintIdSignal()\">{{ 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 }] }] } });
 
 var texteditor_field_component = /*#__PURE__*/Object.freeze({
@@ -9108,30 +9409,39 @@ function _withValuesFromSource(field, source) {
  * for coordinated add/remove/reorder operations.
  */
 class DbxForgeArrayFieldWrapperComponent {
-    fieldComponent = viewChild.required('fieldComponent', { read: ViewContainerRef });
-    fieldInputs = input(...(ngDevMode ? [undefined, { debugName: "fieldInputs" }] : /* istanbul ignore next */ []));
+    fieldComponent = viewChild.required('fieldComponent', { ...(ngDevMode ? { debugName: "fieldComponent" } : /* istanbul ignore next */ {}), read: ViewContainerRef });
+    fieldInputs = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "fieldInputs" }] : /* istanbul ignore next */ []));
     dispatcher = inject(EventDispatcher);
     _formContextService = inject(DbxForgeFormContextService);
     /**
      * 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 */ []));
+    props = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "props" }] : /* istanbul ignore next */ []));
     // Disabled state
     isDisabled = dbxForgeFieldDisabled();
-    labelSignal = computed(() => this.props()?.label ?? '', ...(ngDevMode ? [{ debugName: "labelSignal" }] : /* istanbul ignore next */ []));
-    hintSignal = computed(() => this.props()?.hint ?? '', ...(ngDevMode ? [{ debugName: "hintSignal" }] : /* istanbul ignore next */ []));
-    disableRearrangeSignal = computed(() => this.props()?.disableRearrange ?? false, ...(ngDevMode ? [{ debugName: "disableRearrangeSignal" }] : /* istanbul ignore next */ []));
-    allowAddSignal = computed(() => this.props()?.allowAdd ?? true, ...(ngDevMode ? [{ debugName: "allowAddSignal" }] : /* istanbul ignore next */ []));
+    labelSignal = computed(() => this.props()?.label ?? '', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "labelSignal" }] : /* istanbul ignore next */ []));
+    hintSignal = computed(() => this.props()?.hint ?? '', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hintSignal" }] : /* istanbul ignore next */ []));
+    disableRearrangeSignal = computed(() => this.props()?.disableRearrange ?? false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disableRearrangeSignal" }] : /* istanbul ignore next */ []));
+    allowAddSignal = computed(() => this.props()?.allowAdd ?? true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "allowAddSignal" }] : /* istanbul ignore next */ []));
     addTextSignal = computed(() => {
         const text = this.props()?.addText;
         return typeof text === 'string' ? text : 'Add';
-    }, ...(ngDevMode ? [{ debugName: "addTextSignal" }] : /* istanbul ignore next */ []));
-    addButtonStyleSignal = computed(() => this.props()?.addButtonStyle ?? { type: 'raised', color: 'primary' }, ...(ngDevMode ? [{ debugName: "addButtonStyleSignal" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "addTextSignal" }] : /* istanbul ignore next */ []));
+    addButtonStyleSignal = computed(() => this.props()?.addButtonStyle ?? { type: 'raised', color: 'primary' }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "addButtonStyleSignal" }] : /* istanbul ignore next */ []));
     /**
      * Current item count read reactively from the form value.
      */
-    itemCountSignal = computed(() => this._readArrayValue().length, ...(ngDevMode ? [{ debugName: "itemCountSignal" }] : /* istanbul ignore next */ []));
+    itemCountSignal = computed(() => this._readArrayValue().length, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "itemCountSignal" }] : /* istanbul ignore next */ []));
     /**
      * Whether the array has reached its configured `maxLength`. When true, the
      * add button is disabled. Returns false when `maxLength` is not set.
@@ -9140,7 +9450,8 @@ class DbxForgeArrayFieldWrapperComponent {
         const itemCount = this.itemCountSignal();
         const maxLength = this.props()?.maxLength;
         return typeof maxLength === 'number' && itemCount >= maxLength;
-    }, ...(ngDevMode ? [{ debugName: "atMaxLengthSignal" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "atMaxLengthSignal" }] : /* istanbul ignore next */ []));
     /**
      * Add button disabled state — combines the standard disabled flag with the
      * `maxLength` cap so clicking past the limit is prevented.
@@ -9148,7 +9459,8 @@ class DbxForgeArrayFieldWrapperComponent {
     addButtonDisabledSignal = computed(() => {
         const atMaxLength = this.atMaxLengthSignal();
         return this.isDisabled() || atMaxLength;
-    }, ...(ngDevMode ? [{ debugName: "addButtonDisabledSignal" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "addButtonDisabledSignal" }] : /* istanbul ignore next */ []));
     drop(event) {
         if (event.previousIndex === event.currentIndex) {
             return;
@@ -9270,12 +9582,12 @@ 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.11", ngImport: i0, type: DbxForgeArrayFieldWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", 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: "22.1.4", ngImport: i0, type: DbxForgeArrayFieldWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.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", "customTextColor", "customSpinnerColor", "basic", "tonal", "raised", "stroked", "flat", "iconOnly", "fab", "customContent", "allowClickPropagation", "mode"] }, { kind: "pipe", type: DynamicTextPipe, name: "dynamicText" }, { kind: "pipe", type: AsyncPipe, name: "async" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxForgeArrayFieldWrapperComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", 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" }]
+            args: [{ selector: 'dbx-forge-array-field-wrapper', imports: [DynamicTextPipe, AsyncPipe, CdkDropList, DbxButtonComponent], 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 }] }] } });
 
 var arrayField_wrapper_component = /*#__PURE__*/Object.freeze({
@@ -9304,17 +9616,21 @@ const DEFAULT_DUPLICATE_BUTTON = {
  * a drag handle, item label, and remove button.
  */
 class DbxForgeArrayFieldElementWrapperComponent {
-    fieldComponent = viewChild.required('fieldComponent', { read: ViewContainerRef });
+    fieldComponent = viewChild.required('fieldComponent', { ...(ngDevMode ? { debugName: "fieldComponent" } : /* istanbul ignore next */ {}), read: ViewContainerRef });
     parent = inject(DbxForgeArrayFieldWrapperComponent);
     formContextService = inject(DbxForgeFormContextService);
     arrayContext = inject(ARRAY_CONTEXT);
     // Disabled state
     isDisabled = dbxForgeFieldDisabled();
     // Props from wrapper config (ng-forge passes wrapper config properties as individual inputs)
-    fieldInputs = input(...(ngDevMode ? [undefined, { debugName: "fieldInputs" }] : /* istanbul ignore next */ []));
-    props = input(...(ngDevMode ? [undefined, { debugName: "props" }] : /* istanbul ignore next */ []));
-    disableRearrangeSignal = computed(() => this.props()?.disableRearrange ?? false, ...(ngDevMode ? [{ debugName: "disableRearrangeSignal" }] : /* istanbul ignore next */ []));
-    showIndexChipSignal = computed(() => this.props()?.showIndexChip ?? true, ...(ngDevMode ? [{ debugName: "showIndexChipSignal" }] : /* istanbul ignore next */ []));
+    fieldInputs = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "fieldInputs" }] : /* istanbul ignore next */ []));
+    props = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "props" }] : /* istanbul ignore next */ []));
+    disableRearrangeSignal = computed(() => this.props()?.disableRearrange ?? false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disableRearrangeSignal" }] : /* istanbul ignore next */ []));
+    showIndexChipSignal = computed(() => this.props()?.showIndexChip ?? true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showIndexChipSignal" }] : /* istanbul ignore next */ []));
     indexChipDisplaySignal = computed(() => {
         const displayFn = this.props()?.indexChipDisplay;
         let result = DEFAULT_INDEX_CHIP_DISPLAY;
@@ -9323,7 +9639,8 @@ class DbxForgeArrayFieldElementWrapperComponent {
             result = displayFn(ctx);
         }
         return result;
-    }, ...(ngDevMode ? [{ debugName: "indexChipDisplaySignal" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "indexChipDisplaySignal" }] : /* istanbul ignore next */ []));
     allowRemoveSignal = computed(() => {
         const allowRemove = this.props()?.allowRemove;
         let result;
@@ -9335,12 +9652,15 @@ class DbxForgeArrayFieldElementWrapperComponent {
             result = allowRemove ?? true;
         }
         return result;
-    }, ...(ngDevMode ? [{ debugName: "allowRemoveSignal" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "allowRemoveSignal" }] : /* istanbul ignore next */ []));
     removeTextSignal = computed(() => {
         const text = this.props()?.removeText;
         return typeof text === 'string' ? text : 'Remove';
-    }, ...(ngDevMode ? [{ debugName: "removeTextSignal" }] : /* istanbul ignore next */ []));
-    removeButtonStyleSignal = computed(() => this.props()?.removeButtonStyle ?? { type: 'stroked', color: 'warn' }, ...(ngDevMode ? [{ debugName: "removeButtonStyleSignal" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "removeTextSignal" }] : /* istanbul ignore next */ []));
+    removeButtonStyleSignal = computed(() => this.props()?.removeButtonStyle ?? { type: 'stroked', color: 'warn' }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "removeButtonStyleSignal" }] : /* istanbul ignore next */ []));
     /**
      * Resolves {@link DbxForgeArrayFieldElementWrapperProps.allowDuplicate} to either
      * `false` (hide the button) or a target {@link IndexNumber}. `true` maps to the
@@ -9367,8 +9687,10 @@ class DbxForgeArrayFieldElementWrapperComponent {
             }
         }
         return result;
-    }, ...(ngDevMode ? [{ debugName: "duplicateTargetIndexSignal" }] : /* istanbul ignore next */ []));
-    allowDuplicateSignal = computed(() => this.duplicateTargetIndexSignal() !== false, ...(ngDevMode ? [{ debugName: "allowDuplicateSignal" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "duplicateTargetIndexSignal" }] : /* istanbul ignore next */ []));
+    allowDuplicateSignal = computed(() => this.duplicateTargetIndexSignal() !== false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "allowDuplicateSignal" }] : /* istanbul ignore next */ []));
     duplicateButtonSignal = computed(() => {
         const duplicateButton = this.props()?.duplicateButton;
         let result;
@@ -9380,7 +9702,8 @@ class DbxForgeArrayFieldElementWrapperComponent {
             result = duplicateButton ?? DEFAULT_DUPLICATE_BUTTON;
         }
         return result;
-    }, ...(ngDevMode ? [{ debugName: "duplicateButtonSignal" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "duplicateButtonSignal" }] : /* istanbul ignore next */ []));
     labelSignal = computed(() => {
         const props = this.props();
         const index = this.arrayContext.index();
@@ -9404,7 +9727,8 @@ class DbxForgeArrayFieldElementWrapperComponent {
             }
         }
         return result;
-    }, ...(ngDevMode ? [{ debugName: "labelSignal" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "labelSignal" }] : /* istanbul ignore next */ []));
     removeItem() {
         this.parent.removeItem(this.arrayContext.index());
     }
@@ -9414,12 +9738,12 @@ class DbxForgeArrayFieldElementWrapperComponent {
             this.parent.duplicateItem(this.arrayContext.index(), targetIndex);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxForgeArrayFieldElementWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", 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  @if (showIndexChipSignal()) {\n    <dbx-chip [display]=\"indexChipDisplaySignal()\">{{ arrayContext.index() + 1 }}</dbx-chip>\n  }\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    <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$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4.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: "22.1.4", ngImport: i0, type: DbxForgeArrayFieldElementWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.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  @if (showIndexChipSignal()) {\n    <dbx-chip [display]=\"indexChipDisplaySignal()\">{{ arrayContext.index() + 1 }}</dbx-chip>\n  }\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    <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$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4.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", "customTextColor", "customSpinnerColor", "basic", "tonal", "raised", "stroked", "flat", "iconOnly", "fab", "customContent", "allowClickPropagation", "mode"] }, { kind: "directive", type: DbxButtonSpacerDirective, selector: "dbx-button-spacer,[dbxButtonSpacer]" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxForgeArrayFieldElementWrapperComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", 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  @if (showIndexChipSignal()) {\n    <dbx-chip [display]=\"indexChipDisplaySignal()\">{{ arrayContext.index() + 1 }}</dbx-chip>\n  }\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    <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" }]
+            args: [{ selector: 'dbx-forge-array-field-element-wrapper', imports: [CdkDrag, CdkDragHandle, CdkDragPlaceholder, DbxChipDirective, MatIconModule, MatButtonModule, DbxButtonComponent, DbxButtonSpacerDirective], 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  @if (showIndexChipSignal()) {\n    <dbx-chip [display]=\"indexChipDisplaySignal()\">{{ arrayContext.index() + 1 }}</dbx-chip>\n  }\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    <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 }] }] } });
 
 var arrayField_element_wrapper_component = /*#__PURE__*/Object.freeze({
@@ -9435,18 +9759,22 @@ var arrayField_element_wrapper_component = /*#__PURE__*/Object.freeze({
  * and the parent {@link FieldSignalContext} to observe form validation state.
  */
 class DbxForgeFormFieldWrapperComponent {
-    fieldComponent = viewChild.required('fieldComponent', { read: ViewContainerRef });
+    fieldComponent = viewChild.required('fieldComponent', { ...(ngDevMode ? { debugName: "fieldComponent" } : /* istanbul ignore next */ {}), read: ViewContainerRef });
     // Props from wrapper config
-    fieldInputs = input(...(ngDevMode ? [undefined, { debugName: "fieldInputs" }] : /* istanbul ignore next */ []));
+    fieldInputs = input(/* @ts-ignore */
+    ...(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 */ []));
+    props = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "props" }] : /* istanbul ignore next */ []));
     // Read-only field tree from the wrapped field
-    formStateSignal = computed(() => this.fieldInputs()?.field, ...(ngDevMode ? [{ debugName: "formStateSignal" }] : /* istanbul ignore next */ []));
+    formStateSignal = computed(() => this.fieldInputs()?.field, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "formStateSignal" }] : /* istanbul ignore next */ []));
     // Disabled state
-    isDisabledSignal = computed(() => this.formStateSignal()?.disabled(), ...(ngDevMode ? [{ debugName: "isDisabledSignal" }] : /* istanbul ignore next */ []));
+    isDisabledSignal = computed(() => this.formStateSignal()?.disabled(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isDisabledSignal" }] : /* istanbul ignore next */ []));
     /**
      * Resolved notch label. Prefers a wrapper-level `props.label` override and
      * falls back to the wrapped field's own label.
@@ -9454,13 +9782,18 @@ class DbxForgeFormFieldWrapperComponent {
     labelSignal = computed(() => {
         const fieldInputs = this.fieldInputs();
         return this.props()?.label ?? fieldInputs?.label;
-    }, ...(ngDevMode ? [{ debugName: "labelSignal" }] : /* 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 */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "labelSignal" }] : /* istanbul ignore next */ []));
+    hintSignal = computed(() => this.fieldInputs()?.props?.hint, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hintSignal" }] : /* istanbul ignore next */ []));
+    classNameSignal = computed(() => this.fieldInputs()?.className ?? '', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "classNameSignal" }] : /* istanbul ignore next */ []));
     // Key for ARIA IDs
-    keySignal = computed(() => this.fieldInputs()?.key ?? '', ...(ngDevMode ? [{ debugName: "keySignal" }] : /* istanbul ignore next */ []));
+    keySignal = computed(() => this.fieldInputs()?.key ?? '', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "keySignal" }] : /* istanbul ignore next */ []));
     // Validation state from form tree
-    childErrorsSignal = computed(() => this.formStateSignal()?.errors(), ...(ngDevMode ? [{ debugName: "childErrorsSignal" }] : /* istanbul ignore next */ []));
+    childErrorsSignal = computed(() => this.formStateSignal()?.errors(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "childErrorsSignal" }] : /* istanbul ignore next */ []));
     /**
      * Whether errors should be displayed.
      *
@@ -9471,7 +9804,8 @@ class DbxForgeFormFieldWrapperComponent {
     showErrorsSignal = computed(() => {
         const childErrors = this.childErrorsSignal();
         return (this.formStateSignal()?.invalid() ?? false) && (childErrors?.length ?? 0) > 0;
-    }, ...(ngDevMode ? [{ debugName: "showErrorsSignal" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showErrorsSignal" }] : /* istanbul ignore next */ []));
     hasError = this.showErrorsSignal;
     /**
      * Resolves the first error message using the same priority as ng-forge's
@@ -9491,21 +9825,26 @@ class DbxForgeFormFieldWrapperComponent {
         const defaultMessages = inputs?.defaultValidationMessages ?? {};
         const message = fieldMessages[error.kind] ?? defaultMessages[error.kind] ?? error.message ?? error.kind;
         return interpolateParams(message, error);
-    }, ...(ngDevMode ? [{ debugName: "firstErrorMessageSignal" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "firstErrorMessageSignal" }] : /* istanbul ignore next */ []));
     /**
      * Whether any child field has `required` state, used to show the asterisk in the label.
      */
-    isRequiredSignal = computed(() => this.formStateSignal()?.required(), ...(ngDevMode ? [{ debugName: "isRequiredSignal" }] : /* istanbul ignore next */ []));
+    isRequiredSignal = computed(() => this.formStateSignal()?.required(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isRequiredSignal" }] : /* istanbul ignore next */ []));
     // ARIA IDs
-    labelIdSignal = computed(() => `${this.keySignal()}-label`, ...(ngDevMode ? [{ debugName: "labelIdSignal" }] : /* istanbul ignore next */ []));
-    errorIdSignal = computed(() => `${this.keySignal()}-error`, ...(ngDevMode ? [{ debugName: "errorIdSignal" }] : /* istanbul ignore next */ []));
-    hintIdSignal = computed(() => `${this.keySignal()}-hint`, ...(ngDevMode ? [{ debugName: "hintIdSignal" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxForgeFormFieldWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", 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: "dbx-forge-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]=\"isDisabledSignal()\" role=\"group\" [attr.aria-labelledby]=\"labelSignal() ? labelIdSignal() : 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]=\"!labelSignal()\">\n      @if (labelSignal(); as labelText) {\n        <span class=\"dbx-forge-form-field-outline-label\" [id]=\"labelIdSignal()\">\n          {{ labelText | dynamicText | async }}\n          @if (isRequiredSignal()) {\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 (showErrorsSignal()) {\n    <div class=\"mat-mdc-form-field-error-wrapper\">\n      <div class=\"mat-mdc-form-field-error mat-mdc-form-field-bottom-align\" [id]=\"errorIdSignal()\">{{ firstErrorMessageSignal() }}</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]=\"hintIdSignal()\">{{ 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(--mat-form-field-outlined-outline-color, var(--mat-sys-outline, rgba(0, 0, 0, .38)));border-right:none;border-radius:var(--mat-form-field-outlined-container-shape, var(--mat-sys-corner-extra-small, 4px)) 0 0 var(--mat-form-field-outlined-container-shape, var(--mat-sys-corner-extra-small, 4px));width:12px}.dbx-forge-form-field-outline-notch{border-bottom:1px solid var(--mat-form-field-outlined-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(--mat-form-field-outlined-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(--mat-form-field-outlined-label-text-color, var(--mat-sys-on-surface-variant, rgba(0, 0, 0, .6)))}.dbx-forge-form-field-outline-trailing{border:1px solid var(--mat-form-field-outlined-outline-color, var(--mat-sys-outline, rgba(0, 0, 0, .38)));border-left:none;border-radius:0 var(--mat-form-field-outlined-container-shape, var(--mat-sys-corner-extra-small, 4px)) var(--mat-form-field-outlined-container-shape, var(--mat-sys-corner-extra-small, 4px)) 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(--mat-form-field-outlined-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(--mat-form-field-outlined-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(--mat-form-field-outlined-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(--mat-form-field-outlined-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(--mat-form-field-outlined-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(--mat-form-field-outlined-disabled-outline-color, rgba(0, 0, 0, .12))}.dbx-forge-form-field-wrapper-disabled .dbx-forge-form-field-outline-label{color:var(--mat-form-field-outlined-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.11", ngImport: i0, type: DbxForgeFormFieldWrapperComponent, decorators: [{
+    labelIdSignal = computed(() => `${this.keySignal()}-label`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "labelIdSignal" }] : /* istanbul ignore next */ []));
+    errorIdSignal = computed(() => `${this.keySignal()}-error`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "errorIdSignal" }] : /* istanbul ignore next */ []));
+    hintIdSignal = computed(() => `${this.keySignal()}-hint`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hintIdSignal" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: DbxForgeFormFieldWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", 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: "dbx-forge-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]=\"isDisabledSignal()\" role=\"group\" [attr.aria-labelledby]=\"labelSignal() ? labelIdSignal() : 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]=\"!labelSignal()\">\n      @if (labelSignal(); as labelText) {\n        <span class=\"dbx-forge-form-field-outline-label\" [id]=\"labelIdSignal()\">\n          {{ labelText | dynamicText | async }}\n          @if (isRequiredSignal()) {\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 (showErrorsSignal()) {\n    <div class=\"mat-mdc-form-field-error-wrapper\">\n      <div class=\"mat-mdc-form-field-error mat-mdc-form-field-bottom-align\" [id]=\"errorIdSignal()\">{{ firstErrorMessageSignal() }}</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]=\"hintIdSignal()\">{{ 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(--mat-form-field-outlined-outline-color, var(--mat-sys-outline, rgba(0, 0, 0, .38)));border-right:none;border-radius:var(--mat-form-field-outlined-container-shape, var(--mat-sys-corner-extra-small, 4px)) 0 0 var(--mat-form-field-outlined-container-shape, var(--mat-sys-corner-extra-small, 4px));width:12px}.dbx-forge-form-field-outline-notch{border-bottom:1px solid var(--mat-form-field-outlined-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(--mat-form-field-outlined-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(--mat-form-field-outlined-label-text-color, var(--mat-sys-on-surface-variant, rgba(0, 0, 0, .6)))}.dbx-forge-form-field-outline-trailing{border:1px solid var(--mat-form-field-outlined-outline-color, var(--mat-sys-outline, rgba(0, 0, 0, .38)));border-left:none;border-radius:0 var(--mat-form-field-outlined-container-shape, var(--mat-sys-corner-extra-small, 4px)) var(--mat-form-field-outlined-container-shape, var(--mat-sys-corner-extra-small, 4px)) 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(--mat-form-field-outlined-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(--mat-form-field-outlined-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(--mat-form-field-outlined-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(--mat-form-field-outlined-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(--mat-form-field-outlined-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(--mat-form-field-outlined-disabled-outline-color, rgba(0, 0, 0, .12))}.dbx-forge-form-field-wrapper-disabled .dbx-forge-form-field-outline-label{color:var(--mat-form-field-outlined-disabled-label-text-color, rgba(0, 0, 0, .38))}\n"], dependencies: [{ kind: "pipe", type: DynamicTextPipe, name: "dynamicText" }, { kind: "pipe", type: AsyncPipe, name: "async" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: DbxForgeFormFieldWrapperComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'dbx-forge-form-field-wrapper', imports: [DynamicTextPipe, AsyncPipe], changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, host: {
+            args: [{ selector: 'dbx-forge-form-field-wrapper', imports: [DynamicTextPipe, AsyncPipe], host: {
                         // `mat-form-field-animations-enabled` is intentionally retained: it gates
                         // the 300ms subscript fade animation via Material's
                         // `.mat-form-field-animations-enabled .mat-mdc-form-field-hint-wrapper { animation-duration: 300ms; }`
@@ -9643,22 +9982,23 @@ function dbxForgeStyleWrapper(config) {
  * pending signal to detect when async validators are running.
  */
 class DbxForgeWorkingWrapperComponent {
-    fieldComponent = viewChild.required('fieldComponent', { read: ViewContainerRef });
+    fieldComponent = viewChild.required('fieldComponent', { ...(ngDevMode ? { debugName: "fieldComponent" } : /* istanbul ignore next */ {}), read: ViewContainerRef });
     fieldSignalContext = inject(FIELD_SIGNAL_CONTEXT);
     showLoadingSignal = computed(() => {
         return this.fieldSignalContext.form().pending();
-    }, ...(ngDevMode ? [{ debugName: "showLoadingSignal" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxForgeWorkingWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", 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: `
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showLoadingSignal" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: DbxForgeWorkingWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.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: `
     <div class="dbx-forge-working-wrapper">
       <ng-container #fieldComponent></ng-container>
       @if (showLoadingSignal()) {
         <mat-progress-bar mode="indeterminate" class="dbx-forge-working-bar"></mat-progress-bar>
       }
     </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: MatProgressBarModule }, { kind: "component", type: i1$6.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: MatProgressBarModule }, { kind: "component", type: i1$6.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxForgeWorkingWrapperComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: DbxForgeWorkingWrapperComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'dbx-forge-working-wrapper',
@@ -9670,9 +10010,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
       }
     </div>
   `,
-                    imports: [MatProgressBarModule],
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    standalone: true
+                    imports: [MatProgressBarModule]
                 }]
         }], propDecorators: { fieldComponent: [{ type: i0.ViewChild, args: ['fieldComponent', { ...{ read: ViewContainerRef }, isSignal: true }] }] } });
 
@@ -9699,11 +10037,11 @@ 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.11", ngImport: i0, type: DbxForgeFormComponentImportsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.11", ngImport: i0, type: DbxForgeFormComponentImportsModule, imports: [DbxForgeFormComponent], exports: [DbxForgeFormComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxForgeFormComponentImportsModule, imports: [dbxForgeFormComponentImports] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: DbxForgeFormComponentImportsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.4", ngImport: i0, type: DbxForgeFormComponentImportsModule, imports: [DbxForgeFormComponent], exports: [DbxForgeFormComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: DbxForgeFormComponentImportsModule, imports: [dbxForgeFormComponentImports] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxForgeFormComponentImportsModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: DbxForgeFormComponentImportsModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: dbxForgeFormComponentImports,
@@ -9717,7 +10055,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
  */
 class AbstractForgeFormDirective {
     context = inject((DbxForgeFormContext), { self: true });
-    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    disabled = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
     _disabledEffect = effect(() => {
         if (this.disabled()) {
             this.context.setDisabled('directive', true);
@@ -9725,7 +10064,8 @@ class AbstractForgeFormDirective {
         else {
             this.context.setDisabled('directive', false);
         }
-    }, ...(ngDevMode ? [{ debugName: "_disabledEffect" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_disabledEffect" }] : /* istanbul ignore next */ []));
     getValue() {
         return this.context.getValue();
     }
@@ -9741,10 +10081,10 @@ class AbstractForgeFormDirective {
     setDisabled(key, disabled) {
         this.context.setDisabled(key, disabled);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: AbstractForgeFormDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.11", 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: "22.1.4", ngImport: i0, type: AbstractForgeFormDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.4", 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.11", ngImport: i0, type: AbstractForgeFormDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: AbstractForgeFormDirective, decorators: [{
             type: Directive
         }], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
 /**
@@ -9754,10 +10094,10 @@ class AbstractSyncForgeFormDirective extends AbstractForgeFormDirective {
     ngOnInit() {
         this.context.config = this.formConfig;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: AbstractSyncForgeFormDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.11", type: AbstractSyncForgeFormDirective, isStandalone: true, usesInheritance: true, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: AbstractSyncForgeFormDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.4", type: AbstractSyncForgeFormDirective, isStandalone: true, usesInheritance: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: AbstractSyncForgeFormDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: AbstractSyncForgeFormDirective, decorators: [{
             type: Directive
         }] });
 /**
@@ -9771,10 +10111,10 @@ class AbstractAsyncForgeFormDirective extends AbstractForgeFormDirective {
             this.context.config = formConfig;
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: AbstractAsyncForgeFormDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.11", type: AbstractAsyncForgeFormDirective, isStandalone: true, usesInheritance: true, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: AbstractAsyncForgeFormDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.4", type: AbstractAsyncForgeFormDirective, isStandalone: true, usesInheritance: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: AbstractAsyncForgeFormDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: AbstractAsyncForgeFormDirective, decorators: [{
             type: Directive
         }] });
 /**
@@ -9788,12 +10128,13 @@ class AbstractConfigAsyncForgeFormDirective extends AbstractAsyncForgeFormDirect
     /**
      * The forge form config input.
      */
-    config = model(...(ngDevMode ? [undefined, { debugName: "config" }] : /* istanbul ignore next */ []));
+    config = model(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "config" }] : /* istanbul ignore next */ []));
     currentConfig$ = toObservable(this.config).pipe(maybeValueFromObservableOrValue());
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: AbstractConfigAsyncForgeFormDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.11", 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: "22.1.4", ngImport: i0, type: AbstractConfigAsyncForgeFormDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.4", 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.11", ngImport: i0, type: AbstractConfigAsyncForgeFormDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: AbstractConfigAsyncForgeFormDirective, decorators: [{
             type: Directive
         }], propDecorators: { config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: false }] }, { type: i0.Output, args: ["configChange"] }] } });
 
@@ -9804,18 +10145,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
  */
 class DbxForgeAsyncConfigFormComponent extends AbstractConfigAsyncForgeFormDirective {
     formConfig$ = this.currentConfig$;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxForgeAsyncConfigFormComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.11", 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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: DbxForgeAsyncConfigFormComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.4", 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" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxForgeAsyncConfigFormComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: DbxForgeAsyncConfigFormComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'dbx-forge-form',
                     template: DBX_FORGE_FORM_COMPONENT_TEMPLATE,
                     providers: provideDbxForgeFormContext(),
-                    imports: [DbxForgeFormComponentImportsModule],
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    standalone: true
+                    imports: [DbxForgeFormComponentImportsModule]
                 }]
         }] });
 
@@ -9899,12 +10238,12 @@ const DBX_FORGE_FIELD_TYPES = [
     // -- Wrapper-related fields --
     {
         name: FORGE_EXPAND_FIELD_TYPE_NAME,
-        loadComponent: () => import('./dereekb-dbx-form-expand.field.component-uqVNtX2s.mjs').then((m) => m.DbxForgeExpandFieldComponent),
+        loadComponent: () => import('./dereekb-dbx-form-expand.field.component-BO_8nxHg.mjs').then((m) => m.DbxForgeExpandFieldComponent),
         mapper: valueFieldMapper
     },
     {
         name: FORGE_INFO_BUTTON_FIELD_TYPE_NAME,
-        loadComponent: () => import('./dereekb-dbx-form-info.field.component-CBAXCDdO.mjs').then((m) => m.DbxForgeInfoButtonFieldComponent),
+        loadComponent: () => import('./dereekb-dbx-form-info.field.component-CImBKYE7.mjs').then((m) => m.DbxForgeInfoButtonFieldComponent),
         mapper: valueFieldMapper
     }
 ];
@@ -9918,15 +10257,15 @@ const DBX_FORGE_FIELD_WRAPPER_TYPES = [
     },
     {
         wrapperName: DBX_FORGE_SECTION_WRAPPER_TYPE_NAME,
-        loadComponent: () => import('./dereekb-dbx-form-section.wrapper.component-BoR5-a8A.mjs').then((m) => m.DbxForgeSectionWrapperComponent)
+        loadComponent: () => import('./dereekb-dbx-form-section.wrapper.component-CpXSvC5e.mjs').then((m) => m.DbxForgeSectionWrapperComponent)
     },
     {
         wrapperName: DBX_FORGE_STYLE_WRAPPER_TYPE_NAME,
-        loadComponent: () => import('./dereekb-dbx-form-style.wrapper.component-C4dVNND_.mjs').then((m) => m.DbxForgeStyleWrapperComponent)
+        loadComponent: () => import('./dereekb-dbx-form-style.wrapper.component-CPzzgQXk.mjs').then((m) => m.DbxForgeStyleWrapperComponent)
     },
     {
         wrapperName: DBX_FORGE_INFO_WRAPPER_TYPE_NAME,
-        loadComponent: () => import('./dereekb-dbx-form-info.wrapper.component-ChSBMxgm.mjs').then((m) => m.DbxForgeInfoWrapperComponent)
+        loadComponent: () => import('./dereekb-dbx-form-info.wrapper.component-DdDCQ47C.mjs').then((m) => m.DbxForgeInfoWrapperComponent)
     },
     {
         wrapperName: DBX_FORGE_WORKING_WRAPPER_TYPE_NAME,
@@ -9934,7 +10273,7 @@ const DBX_FORGE_FIELD_WRAPPER_TYPES = [
     },
     {
         wrapperName: DBX_FORGE_FLEX_WRAPPER_TYPE_NAME,
-        loadComponent: () => import('./dereekb-dbx-form-flex.wrapper.component-C2nN1Oi1.mjs').then((m) => m.DbxForgeFlexWrapperComponent)
+        loadComponent: () => import('./dereekb-dbx-form-flex.wrapper.component-C54ACtzt.mjs').then((m) => m.DbxForgeFlexWrapperComponent)
     },
     {
         wrapperName: DBX_FORGE_ARRAY_FIELD_WRAPPER_NAME,
@@ -9976,11 +10315,9 @@ function provideDbxForgeFormFieldDeclarations(...additionalFieldTypes) {
  * Creates a forge field array for a simple search form with a single text input.
  *
  * @param config - Optional search field configuration with label and placeholder.
- * @returns The forge field defs for the search form
- *
- * TODO(migrate): Will be renamed in a future release to dbxForgePresetSearchFormFields.
+ * @returns The forge field defs for the search form.
  */
-function dbxFormSearchFormFields(config) {
+function dbxForgePresetSearchFormFields(config) {
     const { key = 'search', label, placeholder = 'Search', props } = config ?? {};
     const field = dbxForgeTextField({
         key,
@@ -9992,20 +10329,19 @@ function dbxFormSearchFormFields(config) {
     return [field];
 }
 
-// TODO(migrate): Will be renamed in a future release to DbxForgePresetSearchFormComponent.
-class DbxFormSearchFormComponent extends AbstractConfigAsyncForgeFormDirective {
+class DbxForgePresetSearchFormComponent extends AbstractConfigAsyncForgeFormDirective {
     // eslint-disable-next-line @angular-eslint/no-output-native
     search = output();
-    formConfig$ = this.currentConfig$.pipe(map((config) => ({ fields: dbxFormSearchFormFields(config) })));
+    formConfig$ = this.currentConfig$.pipe(map((config) => ({ fields: dbxForgePresetSearchFormFields(config) })));
     searchChanged(value) {
         this.search.emit(value?.search ?? '');
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxFormSearchFormComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.11", 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: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: DbxForgePresetSearchFormComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.4", type: DbxForgePresetSearchFormComponent, 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 });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: DbxForgeFormComponentImportsModule }, { kind: "component", type: DbxForgeFormComponent, selector: "dbx-forge" }, { kind: "directive", type: DbxFormValueChangeDirective, selector: "[dbxFormValueChange]", outputs: ["dbxFormValueChange"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxFormSearchFormComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: DbxForgePresetSearchFormComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'dbx-form-search-form',
@@ -10014,8 +10350,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
   `,
                     providers: provideDbxForgeFormContext(),
                     imports: [DbxForgeFormComponentImportsModule, DbxFormValueChangeDirective],
-                    standalone: true,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
                     host: {
                         class: 'd-block dbx-form-search-form'
                     }
@@ -10219,23 +10553,6 @@ function dbxForgeUsernameLoginField(username) {
     }
     return result;
 }
-// MARK: Compat
-// COMPAT: Deprecated aliases
-/**
- * @deprecated use DEFAULT_DBX_FORGE_PASSWORDS_MATCH_VALIDATION_MESSAGE instead.
- * @dbxAllowDefaultPrefix
- */
-const DBX_FORGE_DEFAULT_PASSWORDS_MATCH_VALIDATION_MESSAGE = DEFAULT_DBX_FORGE_PASSWORDS_MATCH_VALIDATION_MESSAGE;
-/**
- * @deprecated use DEFAULT_DBX_FORGE_TEXT_PASSWORD_AUTOCOMPLETE instead.
- * @dbxAllowDefaultPrefix
- */
-const DBX_FORGE_TEXT_PASSWORD_DEFAULT_AUTOCOMPLETE = DEFAULT_DBX_FORGE_TEXT_PASSWORD_AUTOCOMPLETE;
-/**
- * @deprecated use DEFAULT_DBX_FORGE_TEXT_VERIFY_PASSWORD_AUTOCOMPLETE instead.
- * @dbxAllowDefaultPrefix
- */
-const DBX_FORGE_TEXT_VERIFY_PASSWORD_DEFAULT_AUTOCOMPLETE = DEFAULT_DBX_FORGE_TEXT_VERIFY_PASSWORD_AUTOCOMPLETE;
 
 /**
  * A function that takes a search string and returns matching string results.
@@ -10514,17 +10831,16 @@ function pickableValueFieldValuesConfigForStaticLabeledValues(input) {
  * @selector `dbx-form-spacer,[dbxFormSpacer],.dbx-form-spacer`
  */
 class DbxFormSpacerDirective {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxFormSpacerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.11", 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: "22.1.4", ngImport: i0, type: DbxFormSpacerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.4", 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.11", ngImport: i0, type: DbxFormSpacerDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: DbxFormSpacerDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'dbx-form-spacer,[dbxFormSpacer],.dbx-form-spacer',
                     host: {
                         class: 'd-block dbx-form-spacer'
-                    },
-                    standalone: true
+                    }
                 }]
         }] });
 
@@ -10699,5 +11015,5 @@ function provideDbxFormConfiguration(config) {
  * Generated bundle index. Do not edit.
  */
 
-export { APP_ACTION_FORM_DISABLED_KEY, AbstractAsyncForgeFormDirective, AbstractConfigAsyncForgeFormDirective, AbstractDbxSearchableFieldDisplayDirective, AbstractForgeFormDirective, AbstractForgePickableItemFieldDirective, AbstractForgeSearchableFieldDirective, AbstractSyncForgeFormDirective, 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_SEARCHABLE_FIELD_COMPONENT_DATA_TOKEN, DEFAULT_DATE_TIME_FIELD_MENU_PRESETS_PRESETS, DEFAULT_DBX_FORGE_PASSWORDS_MATCH_VALIDATION_MESSAGE, DEFAULT_DBX_FORGE_TEXT_PASSWORD_AUTOCOMPLETE, DEFAULT_DBX_FORGE_TEXT_VERIFY_PASSWORD_AUTOCOMPLETE, DEFAULT_DURATION_PICKER_POPOVER_KEY, DEFAULT_FORGE_LAT_LNG_TEXT_FIELD_PATTERN_MESSAGE, DEFAULT_FORGE_LAT_LNG_TEXT_FIELD_PLACEHOLDER, DEFAULT_FORM_DISABLED_KEY, DEFAULT_TRANSFORM_DEBOUNCE_TIME, DbxActionFormDirective, DbxActionFormSafetyDirective, DbxDateTimeFieldMenuPresetsService, DbxDateTimeFieldTimeMode, DbxDateTimeValueMode, DbxDefaultSearchableFieldDisplayComponent, DbxDurationPickerPopoverComponent, 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, DbxFormLoadingSourceDirective, DbxFormLoggerDirective, DbxFormSearchFormComponent, DbxFormSourceDirective, DbxFormSpacerDirective, DbxFormState, DbxFormValueChangeDirective, DbxMutableForm, DbxSearchableFieldAutocompleteItemComponent, 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, SELF_DEPENDENCY_TOKEN, _filterForgeFormValueKeepInternal, _filterForgeFormValueStripInternal, _forgeFormValueEqual, applyTimeOffset, buildCombinedDateTime, computeDateKeyboardStep, computeErrorMessage, computeTimeKeyboardStep, configureDbxForgeFormFieldWrapper, configureDbxForgeFormFieldWrapperWith, configureForgeAutocompleteFieldMeta, copyFormConfigCustomFnConfig, dateRangeFieldMapper, dateTimeFieldCalc, dateTimeFieldMapper, dateTimePreset, 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, disableAutofillAttributes, fieldAutocompleteAttributeValue, fieldValueIsAvailableValidator, fieldValuesAreEqualValidator, filterPickableItemFieldValuesByLabel, filterPickableItemFieldValuesByLabelFilterFunction, filterPresets, fixedDateRangeFieldMapper, isDivisibleBy, isDomain, isE164PhoneNumber, isE164PhoneNumberWithValidExtension, isInRange, isPhoneExtension, isTruthy, isWebsiteUrlValidator, mergeDbxForgeFieldFormConfig, mergePickerConfig, navigateDate, phoneFieldMapper, pickableValueFieldValuesConfigForStaticLabeledValues, provideDbxForgeFormContext, provideDbxForgeFormFieldDeclarations, provideDbxForm, provideDbxFormConfiguration, provideDbxMutableForm, resolveForgeSelectionOptions, streamValueFromControl, stripEmptyForgeValues, stripForgeInternalKeys, timeDurationFieldMapper, toggleDisableFormControl };
+export { APP_ACTION_FORM_DISABLED_KEY, AbstractAsyncForgeFormDirective, AbstractConfigAsyncForgeFormDirective, AbstractDbxSearchableFieldDisplayDirective, AbstractForgeFormDirective, AbstractForgePickableItemFieldDirective, AbstractForgeSearchableFieldDirective, AbstractSyncForgeFormDirective, 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_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_WORKING_WRAPPER_TYPE_NAME, DBX_SEARCHABLE_FIELD_COMPONENT_DATA_TOKEN, DEFAULT_DATE_TIME_FIELD_MENU_PRESETS_PRESETS, DEFAULT_DBX_FORGE_PASSWORDS_MATCH_VALIDATION_MESSAGE, DEFAULT_DBX_FORGE_TEXT_PASSWORD_AUTOCOMPLETE, DEFAULT_DBX_FORGE_TEXT_VERIFY_PASSWORD_AUTOCOMPLETE, DEFAULT_DURATION_PICKER_POPOVER_KEY, DEFAULT_FORGE_LAT_LNG_TEXT_FIELD_PATTERN_MESSAGE, DEFAULT_FORGE_LAT_LNG_TEXT_FIELD_PLACEHOLDER, DEFAULT_FORM_DISABLED_KEY, DEFAULT_TRANSFORM_DEBOUNCE_TIME, DbxActionFormDirective, DbxActionFormSafetyDirective, DbxDateTimeFieldMenuPresetsService, DbxDateTimeFieldTimeMode, DbxDateTimeValueMode, DbxDefaultSearchableFieldDisplayComponent, DbxDurationPickerPopoverComponent, DbxForgeActionDialogComponent, DbxForgeArrayFieldElementWrapperComponent, DbxForgeArrayFieldWrapperComponent, DbxForgeAsyncConfigFormComponent, DbxForgeComponentFieldComponent, DbxForgeDateRangeFieldComponent, DbxForgeDateTimeFieldComponent, DbxForgeDynamicFormSignalRef, DbxForgeFixedDateRangeFieldComponent, DbxForgeFixedDateRangeFieldSelectionStrategy, DbxForgeFormComponent, DbxForgeFormComponentImportsModule, DbxForgeFormContext, DbxForgeFormContextService, DbxForgeFormFieldWrapperComponent, DbxForgeGlobalDefaultConfigService, DbxForgeListSelectionFieldComponent, DbxForgePhoneFieldComponent, DbxForgePickableChipFieldComponent, DbxForgePickableListFieldComponent, DbxForgePresetSearchFormComponent, DbxForgeSearchableChipFieldComponent, DbxForgeSearchableTextFieldComponent, DbxForgeSourceSelectFieldComponent, DbxForgeTextEditorFieldComponent, DbxForgeTimeDurationFieldComponent, DbxForgeWorkingWrapperComponent, DbxForm, DbxFormLoadingSourceDirective, DbxFormLoggerDirective, DbxFormSourceDirective, DbxFormSpacerDirective, DbxFormState, DbxFormValueChangeDirective, DbxMutableForm, DbxSearchableFieldAutocompleteItemComponent, 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_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, SELF_DEPENDENCY_TOKEN, _filterForgeFormValueKeepInternal, _filterForgeFormValueStripInternal, _forgeFormValueEqual, applyTimeOffset, buildCombinedDateTime, computeDateKeyboardStep, computeErrorMessage, computeTimeKeyboardStep, configureDbxForgeFormFieldWrapper, configureDbxForgeFormFieldWrapperWith, configureForgeAutocompleteFieldMeta, copyFormConfigCustomFnConfig, dateRangeFieldMapper, dateTimeFieldCalc, dateTimeFieldMapper, dateTimePreset, 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, dbxForgePresetSearchFormFields, 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, dbxFormSourceObservable, dbxFormSourceObservableFromStream, disableAutofillAttributes, fieldAutocompleteAttributeValue, fieldValueIsAvailableValidator, fieldValuesAreEqualValidator, filterPickableItemFieldValuesByLabel, filterPickableItemFieldValuesByLabelFilterFunction, filterPresets, fixedDateRangeFieldMapper, isDivisibleBy, isDomain, isE164PhoneNumber, isE164PhoneNumberWithValidExtension, isInRange, isPhoneExtension, isTruthy, isWebsiteUrlValidator, mergeDbxForgeFieldFormConfig, mergePickerConfig, navigateDate, phoneFieldMapper, pickableValueFieldValuesConfigForStaticLabeledValues, provideDbxForgeFormContext, provideDbxForgeFormFieldDeclarations, provideDbxForm, provideDbxFormConfiguration, provideDbxMutableForm, resolveForgeSelectionOptions, streamValueFromControl, stripEmptyForgeValues, stripForgeInternalKeys, timeDurationFieldMapper, toggleDisableFormControl };
 //# sourceMappingURL=dereekb-dbx-form.mjs.map